/* ============================================================
   BesicEdu — Notifications bell + dropdown + parent dashboard
   DESIGN_SYSTEM.md §2.3 — module rangi: warm (e'tibor) + success (parents).
   Faqat var(--bedu-*) tokenlardan foydalanadi.
   ============================================================ */

/* ─── Navbar bell ────────────────────────────────────────── */
.bedu-bell {
    position: relative;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--bedu-text-muted);
    width: 38px; height: 38px;
    border-radius: var(--bedu-radius-pill);
    cursor: pointer;
    transition: background-color var(--bedu-dur-fast) var(--bedu-ease),
                color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-bell:hover,
.bedu-bell:focus-visible {
    background: var(--bedu-surface-muted);
    color: var(--bedu-text);
    outline: none;
}
.bedu-bell__badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 18px; height: 18px;
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-warm);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0 5px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}
.bedu-bell[data-count="0"] .bedu-bell__badge { display: none; }
.bedu-bell:not([data-count="0"]) .bedu-bell__badge { display: inline-flex; }

/* ─── Bell dropdown ──────────────────────────────────────── */
.bedu-notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(380px, calc(100vw - 32px));
    max-height: 480px;
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    box-shadow: var(--bedu-shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--bedu-z-dropdown);
}
.bedu-notif-dropdown[data-open="true"] { display: flex; }

.bedu-notif-dropdown__head {
    padding: var(--bedu-space-3) var(--bedu-space-4);
    border-bottom: 1px solid var(--bedu-border);
    display: flex;
    align-items: center;
    gap: var(--bedu-space-2);
    background: var(--bedu-surface);
}
.bedu-notif-dropdown__title {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    color: var(--bedu-text);
    flex: 1;
}
.bedu-notif-dropdown__mark-all {
    background: transparent;
    border: 0;
    color: var(--bedu-primary-600);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--bedu-radius-sm);
}
.bedu-notif-dropdown__mark-all:hover { background: var(--bedu-primary-50); }

.bedu-notif-dropdown__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}
.bedu-notif-empty {
    text-align: center;
    padding: var(--bedu-space-5);
    color: var(--bedu-text-muted);
}

/* ─── Notification row ───────────────────────────────────── */
.bedu-notif {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--bedu-space-2);
    align-items: flex-start;
    padding: 12px var(--bedu-space-4);
    border-bottom: 1px solid var(--bedu-border);
    text-decoration: none;
    color: var(--bedu-text);
    cursor: pointer;
    transition: background-color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-notif:hover { background: var(--bedu-surface-muted); }
.bedu-notif:last-child { border-bottom: 0; }
.bedu-notif[data-unread="true"] {
    background: var(--bedu-primary-50);
}
.bedu-notif[data-unread="true"]:hover {
    background: var(--bedu-primary-100);
}

.bedu-notif__icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bedu-surface-muted);
    color: var(--bedu-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
/* Per-kind icon color tweaks */
.bedu-notif[data-kind="badge_earned"] .bedu-notif__icon {
    background: var(--bedu-accent-50);
    color: var(--bedu-accent-600);
}
.bedu-notif[data-kind="forum_mention"] .bedu-notif__icon {
    background: var(--bedu-primary-50);
    color: var(--bedu-primary-700);
}
.bedu-notif[data-kind="quiz_finished"] .bedu-notif__icon {
    background: var(--bedu-success-50);
    color: var(--bedu-success-600);
}
.bedu-notif[data-kind="weekly_report"] .bedu-notif__icon {
    background: var(--bedu-success-50);
    color: var(--bedu-success-600);
}
.bedu-notif[data-kind="peer_review_recvd"] .bedu-notif__icon {
    background: var(--bedu-accent-50);
    color: var(--bedu-accent-600);
}

.bedu-notif__body { min-width: 0; }
.bedu-notif__title {
    font-weight: 600;
    color: var(--bedu-text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bedu-notif__meta {
    color: var(--bedu-text-muted);
    font-size: 0.78rem;
}
.bedu-notif__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bedu-primary);
    align-self: center;
    flex-shrink: 0;
}
.bedu-notif[data-unread="false"] .bedu-notif__dot { visibility: hidden; }

/* ─── Parent dashboard widget ────────────────────────────── */
.bedu-parent-children {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--bedu-space-3);
}
.bedu-parent-child {
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    padding: var(--bedu-space-4);
    display: flex;
    gap: var(--bedu-space-3);
    align-items: flex-start;
}
.bedu-parent-child__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bedu-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.bedu-parent-child__name {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    color: var(--bedu-text);
}
.bedu-parent-child__rel {
    color: var(--bedu-text-muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* ─── Invite + QR card ───────────────────────────────────── */
.bedu-invite {
    background: var(--bedu-success-50);
    border: 1px solid var(--bedu-success);
    border-radius: var(--bedu-radius);
    padding: var(--bedu-space-4);
    color: var(--bedu-text);
    max-width: 480px;
}
.bedu-invite__head {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    color: var(--bedu-success-600);
    margin-bottom: var(--bedu-space-2);
}
.bedu-invite__url {
    display: flex;
    gap: var(--bedu-space-2);
    align-items: center;
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    padding: 8px 10px;
    margin-top: var(--bedu-space-2);
}
.bedu-invite__url input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--bedu-text);
    font-size: 0.85rem;
    min-width: 0;
}
.bedu-invite__url input:focus { outline: none; }
.bedu-invite__qr {
    margin-top: var(--bedu-space-3);
    display: flex;
    justify-content: center;
    padding: var(--bedu-space-3);
    background: #fff;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
}

/* ─── Weekly report card ─────────────────────────────────── */
.bedu-report {
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    padding: var(--bedu-space-4);
    margin-bottom: var(--bedu-space-3);
}
.bedu-report__head {
    display: flex;
    align-items: flex-start;
    gap: var(--bedu-space-2);
    margin-bottom: var(--bedu-space-3);
}
.bedu-report__mood {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    color: var(--bedu-success-600);
    font-size: 1.1rem;
}
.bedu-report__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--bedu-space-3);
}
.bedu-report__stat {
    text-align: center;
    background: var(--bedu-surface-muted);
    border-radius: var(--bedu-radius-sm);
    padding: var(--bedu-space-3);
}
.bedu-report__stat-val {
    display: block;
    font-family: var(--bedu-font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--bedu-text);
    line-height: 1.1;
}
.bedu-report__stat-label {
    font-size: 0.78rem;
    color: var(--bedu-text-muted);
    margin-top: 2px;
}