/* ============================================================
   BROADSHEET — the internal-app (kabinet) design system.
   Same newsprint system as the public site (static/css/broadsheet.css,
   scoped to body.marketing-site) — near-black serif on paper white, cyan
   as the one working accent, magenta rare — applied to the authenticated
   app shell instead: sidebar, topbar, dashboards, tables, forms, the exam
   room. Scoped entirely under body.app-shell so the marketing site (and
   its own forced-light rules) are untouched.
   Unlike marketing, the app keeps its light/dark toggle — this file
   carries a matching dark palette, ported 1:1 from the Claude Design
   handoff's [data-theme="dark"] block ("DEVOPS IT CENTER · ilova qismi").
   Loads after style.css (the old "Charcoal & Sky" system) and after
   broadsheet.css, so its .app-shell-scoped selectors win on specificity
   without needing !important everywhere.
   ============================================================ */

body.app-shell {
    /* Explicit, not left to the browser to guess from the OS — native
       chrome (scrollbars, date/color pickers, autofill) should match
       whichever theme data-bs-theme actually says, not the device's own
       system-level light/dark setting when the two disagree. */
    color-scheme: light;
    --bw-bg: #f3f2f2;
    --bw-surface: #eae9e9;
    --bw-sheet: #ffffff;
    --bw-text: #201e1d;
    --bw-ink-2: #605d5d;
    --bw-accent: #0088b0;
    --bw-accent-2: #d6006c;
    --bw-accent-100: #e9f8ff;
    --bw-accent-200: #cbeeff;
    --bw-accent-600: #1186ac;
    --bw-accent-700: #006786;
    --bw-accent-800: #004961;
    --bw-accent-2-100: #fff1f4;
    --bw-accent-2-700: #aa0b56;
    --bw-divider: rgba(32, 30, 29, 0.14);
    --bw-neutral-100: #f8f4f4;
    --bw-neutral-200: #eae7e7;
    --bw-neutral-300: #d7d3d3;
    --bw-neutral-400: #bab6b6;
    --bw-neutral-700: #605d5d;
    --bw-neutral-800: #444141;
    --bw-pill: #17161a;

    --bw-ok: #146c43;
    --bw-ok-bg: #e7f1ec;
    --bw-bad: #b3352b;
    --bw-bad-bg: #f9e9e7;
    --bw-warn: #8a4b06;
    --bw-warn-bg: #f8efdb;

    --bw-font-heading: "Source Serif 4", Georgia, serif;
    --bw-font-body: "Source Serif 4", Georgia, serif;
    --bw-radius: 3px;
    --bw-shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.14);
    --bw-shadow-md: 0 3px 14px rgba(45, 43, 43, 0.14);

    background: var(--bw-bg);
    color: var(--bw-text);
    font-family: var(--bw-font-body);
}
[data-bs-theme="dark"] body.app-shell {
    color-scheme: dark;
    --bw-bg: #17161a;
    --bw-surface: #201f24;
    --bw-sheet: #201f24;
    --bw-text: #f4f1ee;
    --bw-ink-2: #a8a4ac;
    --bw-accent: #62c5ee;
    --bw-accent-2: #ff90b1;
    --bw-accent-100: #10333f;
    --bw-accent-200: #17495a;
    --bw-accent-600: #8ad4f5;
    --bw-accent-700: #b3e4fa;
    --bw-accent-800: #cbeeff;
    --bw-accent-2-100: #3b1626;
    --bw-accent-2-700: #ffc0d0;
    --bw-divider: rgba(244, 241, 238, 0.18);
    --bw-neutral-100: #2b2a2f;
    --bw-neutral-200: #34333a;
    --bw-neutral-300: #3d3c43;
    --bw-neutral-400: #6b6870;
    --bw-neutral-700: #a8a4ac;
    --bw-neutral-800: #e6e2df;
    --bw-pill: #0d0c0f;

    --bw-ok: #67c493;
    --bw-ok-bg: #133020;
    --bw-bad: #ff9182;
    --bw-bad-bg: #391a16;
    --bw-warn: #edbb00;
    --bw-warn-bg: #31290c;

    background: var(--bw-bg);
    color: var(--bw-text);
}
body.app-shell.exam-mode { background: var(--bw-bg); }

/* ============ legacy "Charcoal & Sky" token bridge ============
   Countless existing templates carry their own inline <style> blocks or
   style="" attributes that read the OLD global tokens directly (var(--blue),
   var(--paper-2), var(--charcoal-2), var(--indigo), var(--radius)…) —
   the class-level reskin above never reaches those since it only targets
   Bootstrap/app classes. Redeclaring the old names to resolve through the
   new Broadsheet tokens (a var() reference, re-evaluated live against
   whichever theme is active) pulls every one of them in line for free —
   the lesson timeline, exam overlays, quick-action tiles, month badges,
   proctoring panels — without hunting down and rewriting each component. */
body.app-shell {
    --ink: var(--bw-bg);
    --charcoal: var(--bw-sheet);
    --charcoal-2: var(--bw-surface);
    --blue: var(--bw-accent);
    --blue-light: var(--bw-accent-200);
    --blue-dim: var(--bw-accent-700);
    --emerald: var(--bw-ok);
    --emerald-light: var(--bw-ok);
    --emerald-dim: var(--bw-ok);
    --burgundy: var(--bw-bad);
    --danger: var(--bw-bad);
    --amber: var(--bw-warn);
    --amber-light: var(--bw-warn);
    --amber-dim: var(--bw-warn);
    --indigo: var(--bw-accent-2);
    --indigo-light: var(--bw-accent-2);
    --indigo-dark: var(--bw-accent-2-700);
    --violet: var(--bw-accent-2);
    --violet-light: var(--bw-accent-2);
    --violet-dim: var(--bw-accent-2-700);
    --paper: var(--bw-bg);
    --paper-2: var(--bw-sheet);
    --text-strong: var(--bw-text);
    --text-body: var(--bw-text);
    --text-muted: var(--bw-ink-2);
    --text-on-dark: var(--bw-text);
    --text-on-dark-muted: var(--bw-ink-2);
    --border-soft: var(--bw-divider);
    --shadow-soft: var(--bw-shadow-sm);
    --radius: var(--bw-radius);
}

/* — typography — */
body.app-shell h1, body.app-shell h2, body.app-shell h3,
body.app-shell h4, body.app-shell h5, body.app-shell h6 {
    font-family: var(--bw-font-heading); font-weight: 600;
    letter-spacing: -0.01em; color: var(--bw-text);
}
body.app-shell p { color: var(--bw-text); }
body.app-shell a { color: var(--bw-accent-700); }
body.app-shell a.app-nav-link, body.app-shell .btn { color: inherit; }
body.app-shell .text-muted { color: var(--bw-ink-2) !important; }
body.app-shell .text-body { color: var(--bw-text) !important; }
body.app-shell .text-dark, body.app-shell .text-black { color: var(--bw-text) !important; }
body.app-shell .text-white { color: var(--bw-text) !important; }
body.app-shell ::selection { background: color-mix(in srgb, var(--bw-accent) 25%, transparent); }
body.app-shell :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 2px; }

/* Small tracked-caps "kicker" label — used above dashboard headings,
   the same voice as the marketing site's .bw-kicker. */
.app-shell .kicker, .app-shell .app-kicker {
    display: block; font-size: 0.72rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--bw-accent-700); margin-bottom: 0.4rem;
}

/* Page header — kicker + big serif heading + optional meta line, no box,
   matching the mockup's "KABINET / Salom, Student 1 / Guruh 1 · Kurs 1…"
   pattern. A thin rule (not a card) closes the block when .with-rule is
   added, echoing the mockup's divider between the greeting and the next
   section instead of another boxed card. */
.app-shell .bw-page-header { margin-bottom: 1.75rem; }
.app-shell .bw-page-header h1, .app-shell .bw-page-header h2, .app-shell .bw-page-header h3 {
    margin-bottom: 0.35rem; font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.app-shell .bw-page-header p { color: var(--bw-ink-2); margin-bottom: 0; }
.app-shell .bw-page-header.with-rule { padding-bottom: 1.5rem; border-bottom: 1px solid var(--bw-divider); }

/* Flat stat row — big colored serif numbers with a caption underneath, no
   box and no icon, replacing the old boxed .stat-icon-gradient tiles on
   the dashboards. Color rotates through the same four voices the mockup
   uses (accent/ok/warn/accent-2) so a row of different stats stays legible
   without a card around each one. */
.app-shell .bw-stats { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; margin: 0 0 2rem; }
.app-shell .bw-stat { min-width: 6rem; }
.app-shell .bw-stat-value {
    display: block; font-family: var(--bw-font-heading); font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1; color: var(--bw-text);
}
.app-shell .bw-stat-label { display: block; font-size: 0.82rem; color: var(--bw-ink-2); margin-top: 0.35rem; }
.app-shell .bw-stat-value.c-accent { color: var(--bw-accent-700); }
.app-shell .bw-stat-value.c-accent-2 { color: var(--bw-accent-2-700); }
.app-shell .bw-stat-value.c-ok { color: var(--bw-ok); }
.app-shell .bw-stat-value.c-warn { color: var(--bw-warn); }
[data-bs-theme="dark"] .app-shell .bw-stat-value.c-accent-2 { color: var(--bw-accent-2); }

/* "Davom eting" style continue-block — a thin top rule instead of a boxed
   card, kicker + title + slim progress bar + button. */
.app-shell .bw-continue { border-top: 1px solid var(--bw-divider); padding-top: 1.25rem; margin-bottom: 2rem; }
.app-shell .bw-continue .progress { height: 6px; margin: 0.75rem 0 0.5rem; }
.app-shell .bw-section-title {
    font-family: var(--bw-font-heading); font-weight: 600; font-size: 1.15rem;
    margin-bottom: 1rem;
}

/* ============ layout shell ============ */
.app-shell.app-shell, .app-shell .app-layout { background: var(--bw-bg); }

.app-shell .app-sidebar {
    background: var(--bw-sheet);
    border-right: 1px solid var(--bw-divider);
}
.app-shell .app-sidebar-brand {
    font-family: var(--bw-font-heading); font-weight: 700;
    color: var(--bw-text);
    border-bottom: 1px solid var(--bw-divider);
    letter-spacing: -0.01em;
}
.app-shell .app-sidebar-brand:hover { color: var(--bw-accent-700); }
.app-shell .app-nav-section-label {
    font-family: var(--bw-font-body); font-weight: 600;
    font-size: 0.66rem; letter-spacing: 0.16em; color: var(--bw-ink-2);
}
.app-shell .app-nav-link {
    color: var(--bw-text); border-radius: var(--bw-radius); font-weight: 500;
}
.app-shell .app-nav-link:hover { background: var(--bw-accent-100); color: var(--bw-accent-700); }
.app-shell .app-nav-link.active {
    background: var(--bw-accent-100); color: var(--bw-accent-700);
    font-weight: 700; box-shadow: inset 2px 0 0 var(--bw-accent);
}
.app-shell .app-nav-link .badge { font-family: var(--bw-font-body); }
.app-shell .app-nav-link--alert { box-shadow: inset 3px 0 0 var(--bw-bad); }
.app-shell .app-nav-link--alert:hover { background: var(--bw-bad-bg); color: var(--bw-bad); }
.app-shell .bw-badge-alert {
    background: var(--bw-accent-2); color: #fff; font-size: 0.62rem;
    font-weight: 600; padding: 0.1rem 0.45rem; text-transform: lowercase;
}
.app-shell .app-nav-sublink { color: var(--bw-ink-2); }
/* Sidebar line icons (accounts/templatetags/ui_icons.py) — replace the old
   emoji prefixes; currentColor means they pick up the link's own state
   color for free (muted normally, accent when active/hovered). */
.app-shell .app-nav-icon { flex-shrink: 0; opacity: 0.85; }
.app-shell .app-nav-link:hover .app-nav-icon,
.app-shell .app-nav-link.active .app-nav-icon { opacity: 1; }
.app-shell .app-nav-group-chevron { display: inline-flex; }

.app-shell .app-topbar {
    background: var(--bw-bg);
    border-bottom: 1px solid var(--bw-divider);
}
.app-shell .app-sidebar-toggle { border-color: var(--bw-divider); color: var(--bw-text); }
.app-shell .app-topbar-user-btn { border-color: var(--bw-divider); color: var(--bw-text); font-family: var(--bw-font-heading); }
.app-shell .app-topbar-user-btn:hover { border-color: var(--bw-accent); color: var(--bw-accent-700); }
.app-shell .theme-toggle { background: transparent; border-color: var(--bw-divider); color: var(--bw-text); }
.app-shell .theme-toggle:hover { background: var(--bw-accent-100); }
.app-shell footer { border-color: var(--bw-divider) !important; color: var(--bw-ink-2) !important; }
.app-shell footer a { color: var(--bw-text) !important; }
.app-shell footer a:hover { color: var(--bw-accent-700) !important; }

/* ============ buttons ============ */
.app-shell .btn {
    font-family: var(--bw-font-heading); font-weight: 600; font-size: 0.9rem;
    border-radius: var(--bw-radius); padding: 0.55rem 1.3rem;
    border: 1px solid transparent; transition: none; letter-spacing: normal;
}
.app-shell .btn:hover, .app-shell .btn:focus { transform: none; }
.app-shell .btn-sm { padding: 0.35rem 0.95rem; font-size: 0.82rem; }
.app-shell .btn-lg { padding: 0.7rem 1.6rem; font-size: 1rem; }
.app-shell .btn-primary {
    background: var(--bw-accent); border-color: var(--bw-accent); color: #fff; box-shadow: none;
}
[data-bs-theme="dark"] .app-shell .btn-primary { color: #0a303e; }
.app-shell .btn-primary:hover, .app-shell .btn-primary:focus {
    background: var(--bw-accent-600); border-color: var(--bw-accent-600); color: #fff; box-shadow: none;
}
[data-bs-theme="dark"] .app-shell .btn-primary:hover { color: #0a303e; }
.app-shell .btn-success { background: var(--bw-ok); border-color: var(--bw-ok); color: #fff; }
.app-shell .btn-danger  { background: var(--bw-bad); border-color: var(--bw-bad); color: #fff; }
.app-shell .btn-outline-primary   { color: var(--bw-accent-700); border-color: var(--bw-accent); background: transparent; }
.app-shell .btn-outline-secondary { color: var(--bw-text); border-color: var(--bw-divider); background: transparent; }
.app-shell .btn-outline-danger    { color: var(--bw-bad); border-color: var(--bw-bad); background: transparent; }
.app-shell .btn-outline-warning   { color: var(--bw-warn); border-color: var(--bw-warn); background: transparent; }
.app-shell .btn-outline-primary:hover   { background: var(--bw-accent); color: #fff; }
.app-shell .btn-outline-secondary:hover { background: color-mix(in srgb, var(--bw-text) 7%, transparent); color: var(--bw-text); }
.app-shell .btn-outline-danger:hover    { background: var(--bw-bad); color: #fff; }
.app-shell .btn-outline-warning:hover   { background: var(--bw-warn); color: #fff; }
.app-shell .btn-secondary { background: var(--bw-surface); border-color: var(--bw-divider); color: var(--bw-text); }
.app-shell .btn:disabled { opacity: 0.45; }

/* ============ cards / surfaces ============ */
.app-shell .card, .app-shell .glass-card, .app-shell .glass-panel {
    background: var(--bw-sheet); border: 1px solid var(--bw-divider);
    border-radius: var(--bw-radius); box-shadow: none; color: var(--bw-text);
}
.app-shell .card.shadow-sm { box-shadow: var(--bw-shadow-sm) !important; }
.app-shell a .card:hover, .app-shell .card-hover:hover {
    transform: none; border-color: var(--bw-accent); box-shadow: var(--bw-shadow-sm) !important;
}
.app-shell .card-title, .app-shell .card-body h1, .app-shell .card-body h2, .app-shell .card-body h3,
.app-shell .card-body h4, .app-shell .card-body h5, .app-shell .card-body h6 { color: var(--bw-text); }
.app-shell table.bg-white, .app-shell .table-responsive > table.bg-white {
    background: var(--bw-sheet) !important; color: var(--bw-text); border-radius: var(--bw-radius);
}
.app-shell .bg-white, .app-shell .bg-light { background: var(--bw-sheet) !important; color: var(--bw-text); }
.app-shell .bg-secondary-subtle { background: var(--bw-surface) !important; color: var(--bw-text) !important; }
.app-shell .bg-primary-subtle, .app-shell .bg-info-subtle { background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important; }
.app-shell .bg-success-subtle { background: var(--bw-ok-bg) !important; color: var(--bw-ok) !important; }
.app-shell .bg-warning-subtle { background: var(--bw-warn-bg) !important; color: var(--bw-warn) !important; }
.app-shell .bg-danger-subtle { background: var(--bw-bad-bg) !important; color: var(--bw-bad) !important; }

/* ============ tables ============ */
.app-shell .table { color: var(--bw-text); font-size: 0.9rem; }
.app-shell .table > :not(caption) > * > * { color: inherit; border-color: var(--bw-divider); background: transparent; }
.app-shell .table thead th {
    font-family: var(--bw-font-body); font-weight: 600; font-size: 0.72rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--bw-ink-2);
    border-bottom-width: 1px;
}
.app-shell .table tbody tr:hover > * { background: color-mix(in srgb, var(--bw-text) 4%, transparent); }
.app-shell .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--bw-text) 4%, transparent); }

/* ============ forms ============ */
.app-shell .form-control, .app-shell .form-select {
    background: var(--bw-sheet); border: 1px solid var(--bw-divider); color: var(--bw-text);
    border-radius: var(--bw-radius); font-family: var(--bw-font-body);
}
.app-shell .form-control:focus, .app-shell .form-select:focus {
    background: var(--bw-sheet); border-color: var(--bw-accent); color: var(--bw-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent) 16%, transparent);
}
.app-shell ::placeholder { color: var(--bw-ink-2); opacity: 1; }
.app-shell label, .app-shell .form-label {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bw-ink-2);
}
.app-shell .form-check-label { text-transform: none; letter-spacing: normal; font-size: 0.9rem; color: var(--bw-text); }
.app-shell .form-check-input { background-color: var(--bw-sheet); border: 1px solid var(--bw-neutral-400); }
.app-shell .form-check-input:checked { background-color: var(--bw-accent); border-color: var(--bw-accent); }
.app-shell .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent) 16%, transparent); border-color: var(--bw-accent); }
.app-shell .input-group-text { background: var(--bw-surface); border-color: var(--bw-divider); color: var(--bw-ink-2); }
.app-shell #timer { background: var(--bw-sheet); color: var(--bw-text); border: 1px solid var(--bw-accent); font-family: var(--bw-font-heading); }

/* ============ badges / tags / alerts ============ */
.app-shell .badge { font-family: var(--bw-font-body); font-weight: 600; letter-spacing: 0.01em; border-radius: 2px; }
.app-shell .badge.bg-primary { background: var(--bw-accent) !important; }
.app-shell .badge.bg-secondary { background: var(--bw-neutral-400) !important; color: var(--bw-text) !important; }
.app-shell .badge.bg-success { background: var(--bw-ok) !important; color: #fff !important; }
.app-shell .badge.bg-danger { background: var(--bw-bad) !important; color: #fff !important; }
.app-shell .badge.bg-warning { background: var(--bw-warn) !important; color: #fff !important; }
.app-shell .badge.bg-info { background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important; }
.app-shell .badge.bg-dark { background: var(--bw-pill) !important; }
.app-shell .outcome-pill, .app-shell .bw-tag {
    background: transparent; border: 1px solid var(--bw-accent); color: var(--bw-accent-700); border-radius: 2px;
}
[data-bs-theme="dark"] .app-shell .outcome-pill { color: var(--bw-accent-700); background: color-mix(in srgb, var(--bw-accent) 14%, transparent); }

.app-shell .alert { border: 1px solid transparent; border-radius: var(--bw-radius); font-size: 0.9rem; }
.app-shell .alert-success { background: var(--bw-ok-bg); color: var(--bw-ok); border-color: color-mix(in srgb, var(--bw-ok) 30%, transparent); }
.app-shell .alert-danger  { background: var(--bw-bad-bg); color: var(--bw-bad); border-color: color-mix(in srgb, var(--bw-bad) 30%, transparent); }
.app-shell .alert-warning { background: var(--bw-warn-bg); color: var(--bw-warn); border-color: color-mix(in srgb, var(--bw-warn) 30%, transparent); }
.app-shell .alert-info    { background: var(--bw-accent-100); color: var(--bw-accent-700); border-color: color-mix(in srgb, var(--bw-accent) 25%, transparent); }
.app-shell .glass-panel.alert-glass { background: var(--bw-warn-bg); color: var(--bw-warn); border: 1px solid color-mix(in srgb, var(--bw-warn) 30%, transparent); }

/* ============ lists / dropdown / dialogs / misc bootstrap chrome ============ */
.app-shell .list-group-item { background: var(--bw-sheet); color: var(--bw-text); border-color: var(--bw-divider); }
.app-shell .dropdown-menu { background: var(--bw-sheet); border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow-md); }
.app-shell .dropdown-item { color: var(--bw-text); font-size: 0.88rem; }
.app-shell .dropdown-item:hover, .app-shell .dropdown-item:focus { background: var(--bw-accent-100); color: var(--bw-accent-700); }
.app-shell .dropdown-item-text { color: var(--bw-ink-2); }
.app-shell .dropdown-divider { border-color: var(--bw-divider); }
.app-shell .modal-content { background: var(--bw-sheet); color: var(--bw-text); border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); }
.app-shell .modal-header, .app-shell .modal-footer { border-color: var(--bw-divider); }
.app-shell .accordion-item { background: transparent; border-color: var(--bw-divider); }
.app-shell .accordion-button { background: var(--bw-sheet); color: var(--bw-text); font-family: var(--bw-font-heading); box-shadow: none !important; }
.app-shell .accordion-button:not(.collapsed) { background: var(--bw-accent-100); color: var(--bw-accent-700); }
.app-shell .nav-tabs { border-color: var(--bw-divider); }
.app-shell .nav-tabs .nav-link { color: var(--bw-ink-2); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-family: var(--bw-font-heading); }
.app-shell .nav-tabs .nav-link:hover { color: var(--bw-accent-700); }
.app-shell .nav-tabs .nav-link.active { color: var(--bw-accent-700); background: transparent; border-bottom-color: var(--bw-accent); }
.app-shell .pagination .page-link { background: var(--bw-sheet); border-color: var(--bw-divider); color: var(--bw-text); }
.app-shell .pagination .page-item.active .page-link { background: var(--bw-accent); border-color: var(--bw-accent); color: #fff; }
.app-shell .progress { background: var(--bw-neutral-200); border-radius: 999px; }
.app-shell .progress-bar { background: var(--bw-accent); }
.app-shell hr, .app-shell .dropdown-divider, .app-shell .border-top, .app-shell .border-bottom { border-color: var(--bw-divider) !important; }

/* To'lov eslatmasi — sariq, yoqimli, lekin sezilarli: to'lov qilingunicha
   har sahifada ko'rinadi (yopish tugmasi yo'q — ataylab). */
.app-shell .bw-payment-banner {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--bw-warn-bg); color: var(--bw-warn);
    border: 1px solid color-mix(in srgb, var(--bw-warn) 35%, transparent);
    border-radius: var(--bw-radius); padding: 0.7rem 1rem; margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.app-shell .bw-payment-banner-icon { font-size: 1.15rem; flex-shrink: 0; }
.app-shell .bw-payment-banner-text { flex: 1; min-width: 200px; }

/* Umumiy donut diagramma — teacher_dashboard'dagi "yo'nalish bo'yicha
   o'quvchilar" kabi; background (conic-gradient) shablon/view'dan keladi. */
.app-shell .bw-donut {
    width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.app-shell .bw-donut-inner {
    width: 68px; height: 68px; border-radius: 50%; background: var(--bw-sheet);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--bw-font-heading); font-weight: 700; font-size: 1.1rem;
}

/* Sinf sardori qatori — guruh o'quvchilar jadvalida */
.app-shell tr.sardor-row > td:first-child { box-shadow: inset 3px 0 0 var(--bw-warn); }
.app-shell tr.sardor-row { background: var(--bw-warn-bg); }

/* ============ profile avatar ============ */
.app-shell .bw-avatar {
    width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bw-accent-100); color: var(--bw-accent-700);
    border: 1px dashed var(--bw-accent);
    font-family: var(--bw-font-heading); font-weight: 700; font-size: 1.6rem;
    overflow: hidden;
}
.app-shell .bw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-shell .bw-avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.app-shell .bw-avatar-upload-label { font-size: 0.8rem; color: var(--bw-ink-2); margin-top: 0.4rem; }

/* — "boshqa bo'limlar" grid: telegram/devices/referral/parent-invite — */
.app-shell .bw-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.app-shell .bw-info-card {
    border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); padding: 1rem;
}
.app-shell .bw-info-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.app-shell .bw-info-card-title { font-family: var(--bw-font-heading); font-weight: 700; font-size: 1.05rem; }
.app-shell .bw-info-card-bar { height: 4px; border-radius: 999px; background: var(--bw-neutral-200); margin-bottom: 0.5rem; overflow: hidden; }
.app-shell .bw-info-card-bar-fill { height: 100%; background: var(--bw-accent); }
.app-shell .bw-info-card-bar-fill.c-ok { background: var(--bw-ok); }
.app-shell .bw-info-card-body { font-size: 0.85rem; color: var(--bw-ink-2); }

/* — "Oyliklarim" (o'qituvchi maosh holati) — */
.app-shell .bw-salary-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
    font-size: 0.85rem; color: var(--bw-ink-2); margin-bottom: 1.25rem;
}
.app-shell .bw-salary-legend .bw-dot {
    width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 0.35rem; vertical-align: middle;
}
.app-shell .bw-dot--full { background: var(--bw-ok); }
.app-shell .bw-dot--partial { background: var(--bw-warn); }
.app-shell .bw-dot--none { background: var(--bw-bad); }
.app-shell .bw-dot--current { background: var(--bw-accent); }
.app-shell .bw-dot--neutral { background: var(--bw-neutral-400); }

.app-shell .bw-month-card {
    border: 1px solid var(--bw-divider); border-left: 3px solid var(--bw-neutral-400);
    border-radius: var(--bw-radius); padding: 1rem 1.1rem;
}
.app-shell .bw-month-card--full { border-left-color: var(--bw-ok); }
.app-shell .bw-month-card--partial { border-left-color: var(--bw-warn); }
.app-shell .bw-month-card--none { border-left-color: var(--bw-bad); }
.app-shell .bw-month-card--current { border-left-color: var(--bw-accent); }
.app-shell .bw-month-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.app-shell .bw-month-card-name { font-family: var(--bw-font-heading); font-weight: 700; font-size: 1.15rem; }
.app-shell .bw-month-card-bar { height: 4px; border-radius: 999px; background: var(--bw-neutral-200); overflow: hidden; margin-bottom: 0.55rem; }
.app-shell .bw-month-card-bar-fill { height: 100%; background: var(--bw-neutral-400); }
.app-shell .bw-month-card-bar-fill--full { background: var(--bw-ok); }
.app-shell .bw-month-card-bar-fill--partial { background: var(--bw-warn); }
.app-shell .bw-month-card-bar-fill--none { background: var(--bw-bad); }
.app-shell .bw-month-card-bar-fill--current { background: var(--bw-accent); }
.app-shell .bw-month-card-amount { font-size: 0.85rem; color: var(--bw-ink-2); }

.app-shell .bw-pill {
    font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 2px;
    border: 1px solid var(--bw-divider); color: var(--bw-ink-2); white-space: nowrap;
}
.app-shell .bw-pill--ok { color: var(--bw-ok); border-color: var(--bw-ok); }
.app-shell .bw-pill--warn { color: var(--bw-warn); border-color: var(--bw-warn); }
.app-shell .bw-pill--bad { color: var(--bw-bad); border-color: var(--bw-bad); }
.app-shell .bw-pill--accent { color: var(--bw-accent-700); border-color: var(--bw-accent); }
.app-shell .bw-pill--neutral { color: var(--bw-ink-2); border-color: var(--bw-divider); }

/* — "Guruhlarim" guruh kartalari — */
.app-shell .bw-group-card {
    display: block; text-decoration: none; color: var(--bw-text);
    border: 1px solid var(--bw-divider); border-left: 3px solid var(--bw-accent);
    border-radius: var(--bw-radius); padding: 1rem 1.1rem; height: 100%;
}
.app-shell .bw-group-card:hover { border-color: var(--bw-neutral-400); color: var(--bw-text); }
.app-shell .bw-group-card-dir {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff; padding: 0.12rem 0.5rem; border-radius: 2px;
}
.app-shell .bw-group-card-name { font-family: var(--bw-font-heading); font-weight: 700; font-size: 1.3rem; margin: 0.3rem 0 0.5rem; }
.app-shell .bw-group-card-bar { height: 3px; border-radius: 999px; background: var(--bw-neutral-200); overflow: hidden; margin-bottom: 0.5rem; }
.app-shell .bw-group-card-bar-fill { height: 100%; background: var(--bw-accent); }
.app-shell .bw-group-card-detail { font-size: 0.82rem; color: var(--bw-ink-2); }

/* — "Farzandlarim" farzand tanlash kartalari — */
.app-shell .bw-child-card {
    display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
    background: transparent; color: var(--bw-text); cursor: pointer;
    border: 1px solid var(--bw-divider); border-left: 3px solid var(--bw-accent);
    border-radius: var(--bw-radius); padding: 0.7rem 0.9rem;
}
.app-shell .bw-child-card.is-active { background: var(--bw-surface); font-weight: 700; }
.app-shell .bw-child-card-name { font-family: var(--bw-font-heading); font-weight: 700; }
.app-shell .bw-child-card-dir { font-size: 0.8rem; color: var(--bw-ink-2); }
.app-shell .bw-child-panel { border-top: 1px solid var(--bw-divider); padding-top: 1.25rem; }

/* ============ davomat + baho jadvali (attendance board) ============ */
.app-shell .att-board-sticky { position: sticky; left: 0; background: var(--bw-bg); z-index: 1; min-width: 170px; }
.app-shell .att-board-date { min-width: 44px; font-size: 0.78rem; }
.app-shell .att-board td, .app-shell .att-board th { padding: 0.5rem 0.6rem; }

.app-shell .att-dot {
    width: 22px; height: 22px; border-radius: 999px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; border: 1.5px solid var(--bw-neutral-400);
    background: transparent; cursor: pointer; line-height: 1; transition: transform 0.08s ease;
}
.app-shell button.att-dot:hover { transform: scale(1.15); }
.app-shell .att-dot--present { background: var(--bw-ok); border-color: var(--bw-ok); }
.app-shell .att-dot--first_lesson { background: var(--bw-warn); border-color: var(--bw-warn); }
.app-shell .att-dot--excused { background: var(--bw-text); border-color: var(--bw-text); }
.app-shell .att-dot--absent { background: var(--bw-bad); border-color: var(--bw-bad); }
.app-shell .att-dot--late { background: var(--bw-warn); border-color: var(--bw-warn); }
.app-shell .att-dot--future { cursor: not-allowed; opacity: 0.35; border-style: dashed; }
.app-shell .att-dot--empty, .app-shell .att-dot--,
.app-shell i.att-dot { background: transparent; }
.app-shell i.att-dot.att-dot--present { background: var(--bw-ok); }
.app-shell i.att-dot.att-dot--first_lesson { background: var(--bw-warn); }
.app-shell i.att-dot.att-dot--excused { background: var(--bw-text); }
.app-shell i.att-dot.att-dot--absent { background: var(--bw-bad); }
.app-shell .att-dot-grade { font-size: 0.68rem; font-weight: 700; color: #fff; }
.app-shell .att-dot--empty .att-dot-grade { color: var(--bw-text); }

.app-shell .att-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.85rem; color: var(--bw-ink-2); margin-top: 1rem; }
.app-shell .att-legend .att-dot { width: 12px; height: 12px; vertical-align: middle; margin-right: 0.35rem; }

.app-shell .att-cell-popup {
    position: absolute; z-index: 1050; width: 260px; padding: 0.9rem;
    background: var(--bw-sheet); border: 1px solid var(--bw-divider);
    border-radius: var(--bw-radius); box-shadow: var(--bw-shadow-md);
}
.app-shell .att-cell-popup-head { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bw-ink-2); margin-bottom: 0.6rem; }
.app-shell .att-cell-popup-statuses { display: flex; flex-direction: column; gap: 0.15rem; }
.app-shell .att-status-opt {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: none;
    background: transparent; border-radius: 2px; color: var(--bw-text); font-size: 0.9rem; text-align: left; cursor: pointer;
}
.app-shell .att-status-opt:hover { background: var(--bw-surface); }
.app-shell .att-status-opt.is-active { background: var(--bw-accent-100); font-weight: 600; }
.app-shell .att-cell-popup-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bw-ink-2); margin: 0.7rem 0 0.35rem; }
.app-shell .att-grade-row { display: flex; gap: 0.3rem; }
.app-shell .att-grade-btn {
    flex: 1; padding: 0.3rem 0; border: 1px solid var(--bw-divider); border-radius: 2px;
    background: transparent; color: var(--bw-text); font-weight: 700; cursor: pointer;
}
.app-shell .att-grade-btn.is-active { color: #fff; }
.app-shell .att-grade-btn--1.is-active, .app-shell .att-grade-btn--2.is-active { background: var(--bw-bad); border-color: var(--bw-bad); }
.app-shell .att-grade-btn--3.is-active { background: var(--bw-warn); border-color: var(--bw-warn); }
.app-shell .att-grade-btn--4.is-active, .app-shell .att-grade-btn--5.is-active { background: var(--bw-ok); border-color: var(--bw-ok); }
.app-shell .att-grade-clear { flex: 0 0 34px; color: var(--bw-ink-2); }

/* ============ dashboard decoration (stat tiles, hero bands) ============ */
.app-shell .stat-icon-gradient, .app-shell .stat-icon, .app-shell .card-cover-icon {
    background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important;
    box-shadow: none; border-radius: var(--bw-radius);
}
.app-shell .stat-icon-gradient:hover { transform: none; box-shadow: none; }
.app-shell .stat-icon-blue, .app-shell .stat-icon-teal { background: var(--bw-accent-100); color: var(--bw-accent-700); }
.app-shell .stat-icon-green { background: var(--bw-ok-bg); color: var(--bw-ok); }
.app-shell .stat-icon-orange { background: var(--bw-warn-bg); color: var(--bw-warn); }
.app-shell .quick-action-tile { border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); color: var(--bw-text); transition: none; }
.app-shell .quick-action-tile:hover { border-color: var(--bw-accent); transform: none; color: var(--bw-accent-700); }
.app-shell .hero-gradient {
    background: var(--bw-surface); color: var(--bw-text); border: 1px solid var(--bw-divider);
    border-radius: var(--bw-radius) !important;
}
.app-shell .hero-gradient h1, .app-shell .hero-gradient h2 { color: var(--bw-text) !important; }
.app-shell .hero-gradient p { color: var(--bw-ink-2) !important; }
.app-shell .hero-gradient-text { background: none; -webkit-text-fill-color: unset; color: var(--bw-accent-700); }
.app-shell .hero-grid-texture::before { display: none; }
.app-shell .dark-band { background: var(--bw-surface); border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); }
.app-shell .indigo-card { background: var(--bw-surface); color: var(--bw-text); border: 1px solid var(--bw-divider); }
.app-shell .indigo-card:hover { color: var(--bw-accent-700); }
.app-shell .indigo-card .text-muted { color: var(--bw-ink-2) !important; }
.app-shell .filter-pill { background: transparent; border: 1px solid var(--bw-divider); color: var(--bw-text); border-radius: 2px; }
.app-shell .filter-pill:hover { border-color: var(--bw-accent); }
.app-shell .filter-pill.active { background: var(--bw-accent); color: #fff; border-color: var(--bw-accent); }
.app-shell .why-card { background: var(--bw-sheet); box-shadow: var(--bw-shadow-sm); }

/* ============ mobile tabbar + AI assistant ============ */
.app-shell .mobile-tabbar { background: var(--bw-sheet); border-top: 1px solid var(--bw-divider); }
.app-shell .mobile-tabbar-btn { color: var(--bw-ink-2); }
.app-shell .mobile-tabbar-btn.active { color: var(--bw-accent-700); }
.app-shell .ai-fab { background: var(--bw-accent); color: #fff; box-shadow: var(--bw-shadow-md); }
.app-shell .ai-panel { background: var(--bw-bg); border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow-md); }
.app-shell .ai-panel-head { background: var(--bw-sheet); border-bottom: 1px solid var(--bw-divider); }
.app-shell .ai-panel-title { font-family: var(--bw-font-heading); color: var(--bw-text); }
.app-shell .ai-msg-bubble { background: var(--bw-sheet); color: var(--bw-text); border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); }
.app-shell .ai-msg-row.mine .ai-msg-bubble { background: var(--bw-accent); color: #fff; border-color: var(--bw-accent); }
.app-shell .ai-chip { background: var(--bw-surface); color: var(--bw-text); border: 1px solid var(--bw-divider); border-radius: 999px; }
.app-shell .ai-chip:hover { border-color: var(--bw-accent); color: var(--bw-accent-700); }
.app-shell .ai-panel-input { background: var(--bw-sheet); border: 1px solid var(--bw-divider); color: var(--bw-text); border-radius: var(--bw-radius); }
.app-shell .ai-panel-send { background: var(--bw-accent); color: #fff; }

/* ============ exam room — matches the "Imtihon jarayoni" prototype:
   calm, minimal chrome; the timer and navigator stay small and quiet so
   the question itself carries the page. ============ */
.app-shell.exam-mode .app-topbar { background: var(--bw-bg); border-bottom-color: var(--bw-divider); }
.app-shell .exam-content .card, .app-shell .exam-content .glass-card { border-radius: var(--bw-radius); }
.app-shell .q-nav-btn {
    border-radius: 2px; border: 1px solid var(--bw-divider); background: var(--bw-sheet);
    color: var(--bw-text); font-family: var(--bw-font-heading); font-weight: 700;
    transition: none;
}
.app-shell .q-nav-btn:hover { transform: none; border-color: var(--bw-accent); }
.app-shell .q-nav-btn.is-answered { background: var(--bw-ok-bg); color: var(--bw-ok); border-color: var(--bw-ok); }
.app-shell .q-nav-btn.is-marked { background: var(--bw-warn-bg); color: var(--bw-warn); border-color: var(--bw-warn); }
.app-shell .q-nav-btn.is-current { background: var(--bw-accent); color: #fff; border-color: var(--bw-accent); box-shadow: 0 0 0 2px var(--bw-accent-200); }
.app-shell .exam-legend { color: var(--bw-ink-2); }
.app-shell .exam-donut { background: conic-gradient(var(--bw-accent) calc(var(--exam-pct, 0) * 1%), var(--bw-neutral-200) 0); }
.app-shell .exam-donut-inner { background: var(--bw-sheet); color: var(--bw-text); font-family: var(--bw-font-heading); }
.app-shell .exam-code-block { background: var(--bw-pill); color: var(--bw-neutral-100); border-radius: var(--bw-radius); }
.app-shell .overlay-backdrop { background: color-mix(in srgb, var(--bw-pill) 72%, transparent); }
.app-shell .overlay-backdrop .glass-panel { background: var(--bw-sheet); color: var(--bw-text); }

@media (prefers-reduced-motion: reduce) {
    .app-shell .card, .app-shell .btn, .app-shell .q-nav-btn { transition: none; }
}