/* ============================================================
   LID TIZIMI — Enterprise Design System v2
   Uslub: zamonaviy SaaS CRM (soft-gray fon, oq yuzalar, Deep
   Green + Emerald + Gold aksent (OXU KIDS brendi), Manrope/Inter
   tipografiya, Apple uslubidagi yumshoq qatlamli soyalar).
   Eslatma: --navy* / --royal* nomlari tarixiy — qiymatlari endi
   bog'cha brendining to'q yashil/emerald ranglari.
   Barcha sahifalar faqat shu tokenlar va komponentlardan
   foydalanadi — yangi rang/shrift/radius kiritilmaydi.
   ============================================================ */

/* ------------------------- 1. Design tokenlar ------------------------- */
:root {
    /* Brend — Deep Green (OXU KIDS) */
    --navy-900: #06281c;
    --navy-800: #0b3d2e;
    --navy-700: #11543f;
    --navy-600: #177054;
    --navy: var(--navy-700);
    --navy-2: var(--navy-600);

    /* Interaktiv — Emerald Green */
    --royal: #0f8a62;
    --royal-2: #16a377;
    --royal-soft: #e7f5ef;

    /* Aksent — Gold */
    --gold: #c9a227;
    --gold-2: #dfb84e;
    --gold-3: #f0d488;
    --gold-text: #8a6c15;
    --gold-soft: rgba(201, 162, 39, 0.14);
    --gold-grad: linear-gradient(92deg, #e3bd54 0%, #cfa32f 100%);

    /* Semantik ranglar */
    --emerald: #10b981;
    --emerald-text: #067647;
    --emerald-soft: #e6f7f0;
    --amber: #f59e0b;
    --amber-text: #92610a;
    --amber-soft: #fcf3e1;
    --red: #ef4444;
    --red-text: #c02626;
    --red-soft: #fdeded;
    --cyan: #06b6d4;
    --cyan-text: #0e7490;
    --cyan-soft: #e4f7fb;

    /* Eski nomlar (sahifalar moslligi) */
    --green: var(--emerald);
    --green-soft: var(--emerald-soft);
    --blue: var(--royal);
    --blue-soft: var(--royal-soft);

    /* Yuzalar */
    --bg: #f4f8f6;
    --surface: #ffffff;
    --surface-2: #f7faf8;
    --card: var(--surface);
    --section-bg: var(--surface-2);
    --hover: #eff5f2;
    --glass: rgba(244, 248, 246, 0.72);

    /* Matn — yashil tusli neytral */
    --text: #26332c;
    --muted: #64756c;
    --heading: #0b3d2e;
    --label: #3b4a42;

    /* Chiziqlar va inputlar */
    --border: #e3ebe6;
    --border-2: #ecf2ee;
    --input-bg: #ffffff;
    --input-border: #d5e0d9;

    /* Soyalar — yumshoq, qatlamli (Apple uslubi) */
    --shadow-xs: 0 1px 2px rgba(10, 30, 22, 0.05);
    --shadow-sm: 0 1px 2px rgba(10, 30, 22, 0.04), 0 2px 8px rgba(10, 30, 22, 0.05);
    --shadow: 0 1px 2px rgba(10, 30, 22, 0.04), 0 8px 24px rgba(10, 30, 22, 0.07);
    --shadow-lg: 0 2px 6px rgba(10, 30, 22, 0.06), 0 20px 48px rgba(10, 30, 22, 0.15);

    /* Radius shkalasi: 12 / 16 / 20 */
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 20px;

    /* Fokus halqalari */
    --ring: 0 0 0 3px rgba(15, 138, 98, 0.16);
    --ring-gold: 0 0 0 3px rgba(201, 162, 39, 0.22);

    /* Tipografiya */
    --font-display: 'Manrope', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-serif: var(--font-display); /* eski nom mosligi */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Sidebar */
    --sb-bg: linear-gradient(180deg, #0e4936 0%, #0b3b2c 55%, #073023 100%);
    --sb-w: 268px;
    --sb-w-mini: 80px;
}

:root[data-theme="dark"] {
    --navy-800: #14503c;
    --navy-700: #1d7357;
    --navy-600: #26996f;

    --royal: #34c391;
    --royal-2: #55d4a6;
    --royal-soft: #113327;

    --gold-text: #dfc271;
    --gold-soft: rgba(201, 162, 39, 0.16);

    --emerald-text: #5fd8ab;
    --emerald-soft: #0e2e22;
    --amber-text: #f5c97a;
    --amber-soft: #33270e;
    --red-text: #f79a9a;
    --red-soft: #391722;
    --cyan-text: #6fd6e8;
    --cyan-soft: #0d2b36;

    --bg: #0a1712;
    --surface: #0f1f18;
    --surface-2: #13271e;
    --hover: #183024;
    --glass: rgba(10, 23, 18, 0.72);

    --text: #dbe9e1;
    --muted: #8ca89b;
    --heading: #eef8f2;
    --label: #c3d6cb;

    --border: #233c2f;
    --border-2: #1d3226;
    --input-bg: #0d211a;
    --input-border: #2c4a3b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.6);

    --ring: 0 0 0 3px rgba(52, 195, 145, 0.28);

    --sb-bg: linear-gradient(180deg, #0c3527 0%, #092b20 55%, #072218 100%);
}

/* ------------------------- 2. Baza ------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.serif, .display { font-family: var(--font-display); }
.tabular { font-variant-numeric: tabular-nums; }

::selection { background: rgba(15, 138, 98, 0.18); }

/* Ikonkalar (SVG sprite) — yagona chiziqli uslub */
.i {
    width: 20px; height: 20px; flex-shrink: 0;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
}
.i.sm { width: 16px; height: 16px; }
.i.lg { width: 24px; height: 24px; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.32); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); }

/* Klaviatura tugmasi (kbd) */
.kbd {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-bottom-width: 2px;
    color: var(--muted); font-size: 11px; font-weight: 600;
    font-family: var(--font-sans); line-height: 1.5; white-space: nowrap;
}

/* ------------------------- 3. Layout ------------------------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sb-w);
    background: var(--sb-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    display: flex; flex-direction: column;
    padding: 18px 14px 14px;
    overflow-y: auto; overflow-x: hidden;
    z-index: 50;
    transition: width 0.22s ease, transform 0.22s ease;
}

.main {
    margin-left: var(--sb-w); min-height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left 0.22s ease;
}

.content { padding: 26px 32px 44px; flex: 1; }

/* Kontent bloklari yumshoq kirib keladi */
.content > * { animation: fadeUp 0.35s ease both; }
.content > *:nth-child(2) { animation-delay: 0.04s; }
.content > *:nth-child(3) { animation-delay: 0.08s; }
.content > *:nth-child(4) { animation-delay: 0.12s; }
.content > *:nth-child(5) { animation-delay: 0.16s; }

/* 12 ustunli dashboard grid */
.dash-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px; margin-bottom: 20px; align-items: start;
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
@media (max-width: 1280px) {
    .span-7, .span-8, .span-5, .span-4, .span-6 { grid-column: span 12; }
}

/* ------------------------- 4. Sidebar ------------------------- */
.sb-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 8px 16px; margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sb-brand .logo-box {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
    background: rgba(201, 162, 39, 0.14);
    border: 1px solid rgba(201, 162, 39, 0.35);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s ease;
}
.sb-brand .logo-box img { width: 30px; height: 30px; object-fit: contain; }
.sb-brand a:hover .logo-box { transform: scale(1.06); }
.sb-brand .b-name {
    font-family: var(--font-display); font-size: 15.5px; font-weight: 800;
    letter-spacing: 0.06em; color: #fff; text-decoration: none; display: block;
    line-height: 1.2;
}
.sb-brand .b-name span { color: var(--gold-2); }
.sb-brand small { display: block; color: #8d9ac4; font-size: 11px; letter-spacing: 0.02em; }

.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    height: 40px; padding: 0 10px; border-radius: 10px;
    color: #aab6da; text-decoration: none;
    font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
}
.menu a .ic-slot {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.16s ease, color 0.16s ease;
}
.menu a .i { width: 18px; height: 18px; }
.menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; transform: translateX(2px); }
.menu a:hover .ic-slot { background: rgba(255, 255, 255, 0.1); }
.menu a.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    color: #fff; font-weight: 600;
}
.menu a.active::before {
    content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%;
    width: 3px; border-radius: 0 4px 4px 0; background: var(--gold-2);
}
.menu a.active .ic-slot {
    background: rgba(201, 162, 39, 0.18); color: var(--gold-2);
}
.menu a:focus-visible { outline: none; box-shadow: var(--ring-gold); }
.menu .section {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
    color: #66739f; padding: 16px 12px 6px; white-space: nowrap;
}

/* Mini rejimda tooltip (data-tip) */
body.sb-mini .menu a::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--navy-900); color: #fff;
    padding: 6px 11px; border-radius: 8px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 80;
}
body.sb-mini .menu a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Sidebar pastki profil kartasi */
.sb-profile {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}
.sb-profile .avatar { width: 34px; height: 34px; font-size: 13px; border-width: 1.5px; }
.sb-profile .p-info { flex: 1; min-width: 0; }
.sb-profile .p-info b {
    display: block; color: #fff; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile .p-info small { color: #8d9ac4; font-size: 11px; }
.sb-profile form { display: contents; }
.sb-profile .p-out {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #8d9ac4; cursor: pointer;
    transition: all 0.15s ease;
}
.sb-profile .p-out:hover { background: rgba(239, 68, 68, 0.18); color: #f8b4b4; }
.sb-profile .p-out .i { width: 15px; height: 15px; }

.sb-foot {
    padding-top: 10px; margin-top: 10px; font-size: 10.5px; color: #66739f;
    text-align: center; white-space: nowrap;
}

/* ------------------------- 5. Header (glass) ------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 32px;
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border);
}

.tb-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--label);
    border: 1px solid var(--border); border-radius: 11px;
    cursor: pointer; box-shadow: var(--shadow-xs);
    transition: all 0.16s ease;
    position: relative;
}
.tb-btn:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tb-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.tb-btn .i { width: 18px; height: 18px; }
.tb-btn .dot {
    position: absolute; top: 8px; right: 9px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--red); border: 1.5px solid var(--surface);
}

.tb-title { min-width: 0; margin-right: 4px; }
.tb-title h1 {
    font-family: var(--font-display); font-size: 16.5px; font-weight: 800;
    letter-spacing: -0.01em; color: var(--heading); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-title small {
    display: flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: 12px;
}
.tb-title small .i { width: 12px; height: 12px; }

.tb-search {
    flex: 1; max-width: 460px; margin-left: auto; position: relative;
}
.tb-search > .i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.tb-search input {
    width: 100%; height: 38px; padding: 0 76px 0 38px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 11px;
    font-size: 13.5px; outline: none; font-family: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.tb-search input::placeholder { color: var(--muted); }
.tb-search input:focus { border-color: var(--royal); box-shadow: var(--ring); }
.tb-search .kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    cursor: pointer;
}

.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-search ~ .tb-actions { margin-left: 0; }

/* Foydalanuvchi chipi */
.user-toggle {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border);
    height: 38px; padding: 0 10px 0 5px; border-radius: 11px; cursor: pointer;
    font-family: inherit; color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: all 0.16s ease;
}
.user-toggle:hover { border-color: var(--royal); box-shadow: var(--shadow-sm); }
.user-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.user-toggle .info { text-align: left; }
.user-toggle .info b { display: block; font-size: 12.5px; font-weight: 600; color: var(--heading); line-height: 1.2; }
.user-toggle .info small { color: var(--muted); font-size: 10.5px; }
.user-toggle .caret { color: var(--muted); display: inline-flex; transition: transform 0.18s ease; }
.user-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.avatar {
    width: 30px; height: 30px; border-radius: 9px; position: relative;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    color: var(--gold-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; flex-shrink: 0;
    font-family: var(--font-display);
}
.avatar.round { border-radius: 50%; }
.avatar .status-dot {
    position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
    background: var(--emerald); border: 2px solid var(--surface); border-radius: 50%;
}

/* Bell paneli */
.bell-panel {
    min-width: 300px; padding: 0;
}
.bell-panel .bp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border-2);
    font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--heading);
}
.bell-panel .empty { padding: 26px 14px; }
.bell-panel .empty .i { width: 30px; height: 30px; margin-bottom: 6px; }
.bell-panel { min-width: 320px; }
.bp-list { max-height: 360px; overflow-y: auto; }
.bp-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; text-decoration: none;
    border-bottom: 1px solid var(--border-2);
    transition: background 0.14s ease;
}
.bp-item:last-child { border-bottom: 0; }
.bp-item:hover { background: var(--input-bg); }
.bp-ic {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--input-bg); color: var(--royal);
    border: 1px solid var(--border-2);
}
.bp-ic.warn { background: var(--amber-soft); color: var(--amber-text); }
.bp-ic .i { width: 15px; height: 15px; }
.bp-body { flex: 1; min-width: 0; }
.bp-body b { display: block; font-size: 12.8px; font-weight: 600; color: var(--heading); line-height: 1.35; }
.bp-body small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.bp-time { color: var(--muted); font-size: 10.5px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ------------------------- 6. Command Palette (Ctrl+K) ------------------------- */
.cp-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(11, 17, 32, 0.45);
    backdrop-filter: blur(6px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 14vh 20px 20px;
    animation: fadeIn 0.15s ease both;
}
.cp-overlay[hidden] { display: none; }
.cp-box {
    width: 100%; max-width: 560px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    overflow: hidden; animation: scaleIn 0.18s ease both;
}
.cp-head { position: relative; border-bottom: 1px solid var(--border-2); }
.cp-head .i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--muted);
}
.cp-input {
    width: 100%; height: 52px; padding: 0 52px 0 44px;
    border: none; outline: none; background: transparent;
    color: var(--text); font-size: 15px; font-family: inherit;
}
.cp-input::placeholder { color: var(--muted); }
.cp-head .kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.cp-list { max-height: 330px; overflow-y: auto; padding: 8px; }
.cp-group {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted); padding: 10px 10px 4px;
}
.cp-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
    color: var(--text); font-size: 13.5px;
    transition: background 0.12s ease;
}
.cp-item .cp-ic {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border-2);
    color: var(--muted);
}
.cp-item .cp-ic .i { width: 15px; height: 15px; }
.cp-item .cp-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-item .cp-hint { color: var(--muted); font-size: 11.5px; }
.cp-item.active { background: var(--royal-soft); color: var(--heading); }
.cp-item.active .cp-ic { background: var(--surface); color: var(--royal); border-color: transparent; }
:root[data-theme="dark"] .cp-item.active .cp-ic { background: rgba(255,255,255,0.08); }
.cp-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.cp-foot {
    display: flex; align-items: center; gap: 14px;
    padding: 9px 14px; border-top: 1px solid var(--border-2);
    color: var(--muted); font-size: 11px;
}
.cp-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ------------------------- 7. Sahifa sarlavhasi ------------------------- */
.page-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-head .ph-text { min-width: 0; }
.page-head h1 {
    font-family: var(--font-display); font-size: 23px; font-weight: 800;
    letter-spacing: -0.02em; color: var(--heading); line-height: 1.25;
}
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-head .spacer { margin-left: auto; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.back-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--label);
    border: 1px solid var(--border); border-radius: 11px;
    box-shadow: var(--shadow-xs); text-decoration: none;
    transition: all 0.16s ease;
}
.back-btn:hover { border-color: var(--royal); color: var(--royal); transform: translateX(-2px); }
.back-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.breadcrumbs {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color 0.14s ease; }
.breadcrumbs a:hover { color: var(--royal); }
.breadcrumbs .sep { opacity: 0.55; }
.breadcrumbs .cur { color: var(--heading); font-weight: 600; }

/* ------------------------- 8. Xabarlar ------------------------- */
.messages { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px;
    border: 1px solid transparent; box-shadow: var(--shadow-xs);
    animation: fadeUp 0.3s ease both;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.msg.hide { opacity: 0; transform: translateY(-6px); }
.msg::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    margin-top: 6px; flex-shrink: 0;
}
.msg.success { background: var(--emerald-soft); color: var(--emerald-text); border-color: rgba(16, 185, 129, 0.25); }
.msg.success::before { background: var(--emerald); }
.msg.error { background: var(--red-soft); color: var(--red-text); border-color: rgba(239, 68, 68, 0.25); }
.msg.error::before { background: var(--red); }
.msg.warning { background: var(--amber-soft); color: var(--amber-text); border-color: rgba(245, 158, 11, 0.28); }
.msg.warning::before { background: var(--amber); }
.msg.info { background: var(--cyan-soft); color: var(--cyan-text); border-color: rgba(6, 182, 212, 0.25); }
.msg.info::before { background: var(--cyan); }

/* ------------------------- 9. Karta ------------------------- */
.card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    padding: 22px;
    transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card h2 {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--heading); margin-bottom: 16px;
    display: flex; align-items: center; gap: 9px;
}
.card h2 .i { color: var(--gold); width: 17px; height: 17px; }
.card-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.card-head h2 { margin: 0; }
.card-cap { font-size: 12px; color: var(--muted); margin: -12px 0 16px; }
.card-head + .card-cap { margin-top: -12px; }

/* ------------------------- 10. KPI kartalar ------------------------- */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 16px; margin-bottom: 22px;
}
.kpi {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px; min-height: 122px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.kpi { text-decoration: none; color: inherit; cursor: pointer; }
.kpi:focus-visible { outline: none; box-shadow: var(--ring); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--kc, var(--royal)) 35%, var(--border)); }
.kpi::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--kc, var(--royal)), color-mix(in srgb, var(--kc, var(--royal)) 20%, transparent));
    opacity: 0; transition: opacity 0.18s ease;
}
.kpi:hover::before { opacity: 1; }
.kpi .k-top { display: flex; align-items: center; gap: 10px; }
.kpi .k-ic {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--kc, var(--royal)) 12%, transparent);
    color: var(--kc, var(--royal));
}
.kpi .k-ic .i { width: 19px; height: 19px; }
.kpi .k-label { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.kpi .k-num {
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: 31px; font-weight: 800; letter-spacing: -0.03em;
    color: var(--heading); line-height: 1;
}
.kpi .k-sub {
    display: flex; align-items: center; gap: 7px; margin-top: auto;
    font-size: 11.5px; color: var(--muted);
}
.k-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2.5px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--kc, var(--royal)) 11%, transparent);
    color: color-mix(in srgb, var(--kc, var(--royal)) 78%, var(--text));
}
.k-chip .i { width: 11px; height: 11px; }

/* KPI hero (navy) — birinchi asosiy karta */
.kpi.hero {
    background: linear-gradient(135deg, #1c2f74 0%, #14225a 60%, #0e1a45 100%);
    border-color: rgba(255, 255, 255, 0.08);
}
.kpi.hero::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.25), transparent 70%);
}
.kpi.hero .k-label { color: #c3cdec; }
.kpi.hero .k-num { color: #fff; }
.kpi.hero .k-ic { background: rgba(255, 255, 255, 0.1); color: var(--gold-2); }
.kpi.hero .k-sub { color: #9daccf; }
.kpi.hero .k-chip { background: rgba(201, 162, 39, 0.18); color: var(--gold-3); }
.kpi.hero:hover { border-color: rgba(201, 162, 39, 0.4); }

/* Eski nomlar mosligi (boshqa sahifalarda ishlatilmaydi, lekin ehtiyot) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; margin-bottom: 22px; }

/* Rangli ikonka kvadratchalari (jadval/sahifalarda) */
.ic-blue { background: var(--royal-soft); color: var(--royal); }
.ic-green { background: var(--emerald-soft); color: var(--emerald-text); }
.ic-red { background: var(--red-soft); color: var(--red-text); }
.ic-amber { background: var(--amber-soft); color: var(--amber-text); }
.ic-cyan { background: var(--cyan-soft); color: var(--cyan-text); }
.ic-purple { background: #f1e9fd; color: #7c3aed; }
.ic-navy { background: rgba(17, 84, 63, 0.1); color: var(--navy-700); }
:root[data-theme="dark"] .ic-purple { background: #2b1d4d; color: #b794f6; }
:root[data-theme="dark"] .ic-navy { background: rgba(120, 145, 220, 0.15); color: #9db1e8; }

/* ------------------------- 11. Tugmalar ------------------------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 11px;
    font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; border: 1px solid transparent; text-decoration: none;
    line-height: 1; white-space: nowrap;
    transition: all 0.16s ease;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn .i { width: 16px; height: 16px; }

.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11, 61, 46, 0.28); }

.btn-royal { background: var(--royal); color: #fff; }
.btn-royal:hover { background: var(--royal-2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 138, 98, 0.3); }

.btn-gold { background: var(--gold-grad); color: #fff; text-shadow: 0 1px 2px rgba(120, 85, 10, 0.25); }
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 162, 39, 0.35); }

.btn-light {
    background: var(--surface); color: var(--label);
    border-color: var(--border); box-shadow: var(--shadow-xs);
}
.btn-light:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--label); }
.btn-ghost:hover { background: var(--hover); color: var(--heading); }

.btn-danger { background: var(--red-soft); color: var(--red-text); }
.btn-danger:hover { background: var(--red); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }

.btn-success { background: var(--emerald); color: #fff; }
.btn-success:hover { background: #0d9668; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn[disabled], .btn.loading { opacity: 0.6; pointer-events: none; }
.btn .spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: spin 0.7s linear infinite;
}

/* Ripple (JS .rp elementini qo'shadi) */
.btn .rp {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: 0.16;
    transform: scale(0); animation: ripple 0.45s ease-out forwards;
}

.icon-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--muted);
    cursor: pointer; text-decoration: none; padding: 0;
    transition: all 0.16s ease;
}
.icon-btn .i { width: 15px; height: 15px; }
.icon-btn:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* ------------------------- 12. Jadval (Data Grid) ------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
    padding: 11px 14px; text-align: left; font-size: 13.5px;
    border-bottom: 1px solid var(--border-2);
}
table.grid th {
    color: var(--muted); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.1em; font-weight: 600; white-space: nowrap;
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid tr { transition: background 0.13s ease; }
table.grid tr:hover td { background: var(--hover); }
table.grid td b { color: var(--heading); font-weight: 600; }

/* Saralanadigan ustun sarlavhalari */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--royal); }
th.sortable .s-arr { opacity: 0.35; font-size: 9px; margin-left: 4px; }
th.sortable.asc .s-arr, th.sortable.desc .s-arr { opacity: 1; color: var(--royal); }

/* Jadval ustidagi panel: qidiruv + filter chiplar */
.grid-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.grid-toolbar .gt-search { position: relative; width: 220px; max-width: 100%; }
.grid-toolbar .gt-search .i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
.grid-toolbar .gt-search input {
    width: 100%; height: 34px; padding: 0 12px 0 33px;
    border: 1px solid var(--input-border); border-radius: 10px;
    background: var(--input-bg); color: var(--text);
    font-size: 12.5px; font-family: inherit; outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.grid-toolbar .gt-search input:focus { border-color: var(--royal); box-shadow: var(--ring); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--label); font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: all 0.15s ease;
}
.chip:hover { border-color: var(--royal); color: var(--royal); }
.chip.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.chip .c-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, currentColor); }
.chip .c-n { color: inherit; opacity: 0.65; font-size: 11px; }

/* Jadval avatarlari */
.av {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    font-family: var(--font-display);
}
.av-1 { background: linear-gradient(135deg, #3b6fe0, #274ba6); }
.av-2 { background: linear-gradient(135deg, #10b981, #0b7f56); }
.av-3 { background: linear-gradient(135deg, #9333ea, #6b21a8); }
.av-4 { background: linear-gradient(135deg, #f59e0b, #b45309); }
.av-5 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.av-6 { background: linear-gradient(135deg, #ef4444, #991b1b); }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person .nm { min-width: 0; }
.cell-person .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-person .nm small { color: var(--muted); font-size: 11.5px; }

.mini-av {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    color: var(--gold-2); font-size: 9.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------- 13. Badge / Pill / Tag ------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3.5px 11px; border-radius: 999px;
    background: var(--c, var(--navy-700));
    color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    line-height: 1.45;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .badge[style*="--c"] {
        background: color-mix(in srgb, var(--c) 12%, transparent);
        color: color-mix(in srgb, var(--c) 85%, var(--text));
        border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    }
    :root[data-theme="dark"] .badge[style*="--c"] {
        background: color-mix(in srgb, var(--c) 20%, transparent);
        color: color-mix(in srgb, var(--c) 68%, #fff);
    }
}
.badge .dot-c { width: 6px; height: 6px; border-radius: 50%; background: var(--c, currentColor); }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3.5px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    background: var(--surface-2); color: var(--label);
    border: 1px solid var(--border); white-space: nowrap;
}
.pill.ok { background: var(--emerald-soft); color: var(--emerald-text); border-color: rgba(16, 185, 129, 0.25); }
.pill.off { background: var(--red-soft); color: var(--red-text); border-color: rgba(239, 68, 68, 0.25); }
.pill.gold { background: var(--gold-soft); color: var(--gold-text); border-color: rgba(201, 162, 39, 0.35); }
.pill.info { background: var(--cyan-soft); color: var(--cyan-text); border-color: rgba(6, 182, 212, 0.25); }

.tag {
    font-size: 11px; padding: 2.5px 9px; border-radius: 7px;
    background: var(--surface-2); color: var(--label); border: 1px solid var(--border);
    white-space: nowrap;
}

/* ------------------------- 14. Dropdown ------------------------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.dropdown-toggle .caret { display: inline-flex; }
.dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 208px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px; z-index: 60;
}
.dropdown-menu.open { display: block; animation: dropIn 0.16s ease both; }
.dropdown-menu form { margin: 0; }
.dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 11px; border-radius: 9px; border: none; background: none;
    color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background 0.13s ease, color 0.13s ease;
}
.dropdown-item .i { width: 16px; height: 16px; color: var(--muted); }
.dropdown-item:hover { background: var(--hover); color: var(--heading); }
.dropdown-item:hover .i { color: var(--royal); }
.dropdown-item.danger { color: var(--red-text); }
.dropdown-item.danger .i { color: var(--red-text); }
.dropdown-item.danger:hover { background: var(--red-soft); }
.dropdown-sep { height: 1px; background: var(--border-2); margin: 6px 6px; }

/* ------------------------- 15. Forma ------------------------- */
.form-card { max-width: 620px; }
.form-field { margin-bottom: 16px; }
.form-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; margin-bottom: 7px; color: var(--label);
}
.form-field label .i { width: 14px; height: 14px; color: var(--muted); }
.req { color: var(--red); font-weight: 700; }

.form-field input, .form-field select, .form-field textarea,
input.ui, select.ui, textarea.ui {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit; outline: none;
    background: var(--input-bg); color: var(--text);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-field textarea { resize: vertical; min-height: 74px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
input.ui:focus, select.ui:focus, textarea.ui:focus {
    border-color: var(--royal); box-shadow: var(--ring);
}
.form-field input[type="color"] { height: 44px; padding: 5px; cursor: pointer; }
.form-field input[type="checkbox"], .form-field input[type="radio"] { width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--royal); }

.form-field select, select.ui {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 38px; cursor: pointer;
}
.form-field .help { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-field .err { font-size: 12px; color: var(--red-text); margin-top: 5px; font-weight: 500; }

.f-ic { position: relative; }
.f-ic > .i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.f-ic input, .f-ic select { padding-left: 38px; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    width: 40px; height: 22px; border-radius: 999px; flex-shrink: 0;
    background: var(--input-border); position: relative;
    transition: background 0.18s ease;
}
.switch .track::after {
    content: ""; position: absolute; left: 3px; top: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}
.switch input:checked + .track { background: var(--royal); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* ------------------------- 16. Modal ------------------------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(11, 17, 32, 0.5);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: fadeIn 0.18s ease both;
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
    width: 100%; max-width: 440px;
    background: var(--surface); border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 24px; animation: scaleIn 0.2s ease both;
}
.modal-dialog h3 {
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    color: var(--heading); margin-bottom: 4px;
    display: flex; align-items: center; gap: 9px;
}
.modal-dialog h3 .i { color: var(--gold); }

/* Arxiv/bekor modallari (_archive_modal.html va _arxiv_modal.html umumiy) */
.am-dialog label {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: var(--label); margin: 13px 0 6px;
}
.am-dialog select, .am-dialog input[type="text"], .am-dialog textarea {
    width: 100%; padding: 10px 13px; font-size: 14px;
    border: 1px solid var(--input-border); border-radius: 10px; outline: none;
    background: var(--input-bg); color: var(--text);
    font-family: inherit; box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.am-dialog select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2374809c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 38px; cursor: pointer;
}
.am-dialog select:focus, .am-dialog input:focus, .am-dialog textarea:focus {
    border-color: var(--navy); box-shadow: var(--ring);
}
.am-dialog textarea { resize: vertical; min-height: 64px; }
.am-name { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.am-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ------------------------- 17. Bo'sh holat ------------------------- */
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .i { width: 38px; height: 38px; color: var(--border); stroke-width: 1.3; margin-bottom: 10px; }
.empty p { font-size: 13px; }

/* ------------------------- 18. Timeline ------------------------- */
.timeline { position: relative; display: flex; flex-direction: column; }
.tl-item {
    position: relative; display: flex; gap: 12px;
    padding: 10px 10px 14px; margin: 0 -10px; border-radius: 12px;
    transition: background 0.14s ease;
}
.tl-item:hover { background: var(--surface-2); }
.tl-item::before {
    content: ""; position: absolute; left: 24px; top: 42px; bottom: -2px;
    width: 2px; background: var(--border-2);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; z-index: 1;
    background: var(--surface); border: 2px solid var(--c, var(--royal));
    color: var(--c, var(--royal));
    display: inline-flex; align-items: center; justify-content: center;
}
.tl-dot .i { width: 13px; height: 13px; }
.tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.tl-body .tl-title { font-size: 13px; font-weight: 600; color: var(--heading); }
.tl-body .tl-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tl-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 4px; }

/* ------------------------- 19. Ma'lumot qatorlari ------------------------- */
.info-row {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--border-2); font-size: 13.5px;
}
.info-row:last-child { border-bottom: none; }
.info-row .k {
    width: 168px; flex-shrink: 0; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
}
.info-row .k .i { width: 15px; height: 15px; }
.info-row .v { color: var(--text); font-weight: 500; min-width: 0; }

/* ------------------------- 20. Funnel (pipeline) ------------------------- */
.pipeline { display: flex; flex-direction: column; }
.pl-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; margin: 0 -10px; border-radius: 12px;
    text-decoration: none; color: inherit;
    transition: background 0.14s ease;
}
.pl-row:hover { background: var(--surface-2); }
.pl-ic {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, var(--royal)) 12%, transparent);
    color: var(--c, var(--royal));
}
.pl-ic .i { width: 15px; height: 15px; }
.pl-main { flex: 1; min-width: 0; }
.pl-head {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.pl-name {
    font-size: 12.5px; font-weight: 600; color: var(--heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-count {
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
    font-size: 13.5px; font-weight: 800; color: var(--heading);
}
.pl-share { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-track {
    display: block; height: 8px; border-radius: 999px; background: var(--border-2);
    overflow: hidden; position: relative;
}
.pl-fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--c, var(--royal)), color-mix(in srgb, var(--c, var(--royal)) 55%, #fff));
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] .pl-fill {
    background: linear-gradient(90deg, var(--c, var(--royal)), color-mix(in srgb, var(--c, var(--royal)) 60%, #000));
}
.pl-conv {
    display: flex; align-items: center; gap: 6px;
    padding: 0 0 2px 54px; margin-top: -2px;
    font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pl-conv .i { width: 11px; height: 11px; }
.pl-conv .ok { color: var(--emerald-text); }
.pl-conv .low { color: var(--amber-text); }

/* ------------------------- 21. Diagramma konteynerlari ------------------------- */
.chart-box { position: relative; min-height: 220px; }
.chart-box .apexcharts-canvas { margin: 0 auto; }
.chart-skel {
    position: absolute; inset: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.apexcharts-tooltip {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    font-family: var(--font-sans) !important;
}
.apexcharts-tooltip-title {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-2) !important;
    font-family: var(--font-sans) !important;
}
.apexcharts-legend-text { color: var(--label) !important; font-family: var(--font-sans) !important; }

/* ------------------------- 22. Quick Actions ------------------------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.qa {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 14px; text-decoration: none;
    background: var(--surface-2); border: 1px solid var(--border);
    transition: all 0.16s ease;
}
.qa .qa-ic {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--kc, var(--royal)) 12%, transparent);
    color: var(--kc, var(--royal));
    transition: transform 0.16s ease;
}
.qa .qa-tx { flex: 1; min-width: 0; }
.qa .qa-tx b { display: block; font-size: 13px; font-weight: 600; color: var(--heading); }
.qa .qa-tx small { color: var(--muted); font-size: 11.5px; }
.qa .arr { color: var(--muted); transition: transform 0.16s ease; }
.qa:hover {
    border-color: color-mix(in srgb, var(--kc, var(--royal)) 40%, var(--border));
    transform: translateY(-2px); box-shadow: var(--shadow);
    background: var(--surface);
}
.qa:hover .arr { transform: translateX(3px); color: var(--kc, var(--royal)); }
.qa:hover .qa-ic { transform: scale(1.06); }

/* ------------------------- 23. Animatsiyalar ------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.45); }
    70% { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}
@keyframes shimmer {
    from { background-position: -400px 0; }
    to { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--border-2) 25%, var(--hover) 50%, var(--border-2) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 10px; color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------- 24. Impersonation banner ------------------------- */
.impersonate-bar {
    background: linear-gradient(90deg, #7c2d12, #92400e);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 10px 32px; font-size: 13px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.4);
}
.impersonate-bar b { color: var(--gold-3); }
.impersonate-bar form { margin: 0; }
.impersonate-bar button {
    background: var(--gold-grad); color: #fff; border: none;
    padding: 8px 14px; border-radius: 9px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; font-family: inherit; white-space: nowrap;
    transition: filter 0.16s ease;
}
.impersonate-bar button:hover { filter: brightness(1.08); }

/* ------------------------- 25. Qo'ng'iroq (UCM) popup / modal ------------------------- */
.call-popup {
    position: fixed; right: 22px; bottom: 22px; z-index: 200;
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; min-width: 300px;
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.25s ease both;
}
.call-popup[hidden] { display: none; }
.call-popup.ringing { border-color: var(--gold); animation: pulse-gold 1.2s infinite; }
.call-popup.answered { border-color: var(--emerald); }
.call-popup .cp-icon {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    color: var(--gold-2);
    display: flex; align-items: center; justify-content: center;
}
.call-popup.ringing .cp-icon .i { animation: ring-shake 0.6s infinite; }
@keyframes ring-shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}
.call-popup .cp-status { font-size: 11.5px; color: var(--muted); }
.call-popup .cp-number {
    font-size: 17px; font-weight: 800; color: var(--heading);
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.call-popup .cp-name { font-size: 12.5px; }
.call-popup .cp-name.new { color: var(--amber-text); font-weight: 600; }
.call-popup .cp-close {
    border: none; background: none; color: var(--muted); cursor: pointer;
    align-self: flex-start; padding: 2px; border-radius: 6px;
    transition: color 0.14s ease;
}
.call-popup .cp-close:hover { color: var(--red); }

/* Avto javob countdown'i */
.call-popup .cp-count {
    margin-top: 4px; font-size: 12px; font-weight: 700;
    color: var(--amber-text); font-variant-numeric: tabular-nums;
}
.call-popup .cp-count[hidden] { display: none; }

/* Popup boshqaruv tugmalari (javob/rad, hold/mute/transfer/konf/tugatish) */
.call-popup .cp-actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 10px;
}
.call-popup .cp-actions[hidden] { display: none; }
.ca-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 12px; font-weight: 600; font-family: inherit;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ca-btn .i.sm { width: 13px; height: 13px; }
.ca-btn:hover { border-color: var(--navy); }
.ca-btn.ok {
    background: var(--emerald); border-color: var(--emerald); color: #fff;
}
.ca-btn.ok:hover { filter: brightness(1.07); }
.ca-btn.danger {
    background: transparent; border-color: var(--red); color: var(--red);
}
.ca-btn.danger:hover { background: var(--red); color: #fff; }
.ca-btn.toggled {
    background: var(--royal-soft); border-color: var(--royal); color: var(--royal);
}
.ca-auto {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 11.5px; color: var(--muted); margin-left: auto; user-select: none;
}
.ca-auto input { accent-color: var(--emerald); }

/* Transfer raqami kiritish qatori */
.call-popup .cp-transfer { display: flex; gap: 6px; margin-top: 8px; }
.call-popup .cp-transfer[hidden] { display: none; }
.call-popup .cp-transfer input {
    flex: 1; min-width: 0; padding: 6px 10px; border-radius: 9px;
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--text); font-size: 12.5px; font-family: inherit; outline: none;
}
.call-popup .cp-transfer input:focus { border-color: var(--navy); box-shadow: var(--ring); }

/* Amal xatosi (masalan, UCM rad etsa) */
.call-popup .cp-err {
    margin-top: 6px; font-size: 11.5px; color: var(--red); font-weight: 600;
}
.call-popup .cp-err[hidden] { display: none; }

/* Operator holati + avto javob widget'i (topbar foydalanuvchi menyusida) */
.aa-widget { padding: 8px 11px; display: flex; flex-direction: column; gap: 8px; }
.aa-widget .aa-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 12.5px; color: var(--text);
}
.aa-widget .aa-label {
    display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
}
.aa-widget .aa-label .i.sm { width: 13px; height: 13px; }
.aa-widget select {
    padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-family: inherit;
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--text); outline: none;
}
.aa-widget .aa-check {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    user-select: none;
}
.aa-widget .aa-check input { accent-color: var(--emerald); }
.aa-widget .aa-delay { color: var(--muted); font-size: 12px; }
.aa-widget .aa-delay input {
    width: 52px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px;
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--text); font-family: inherit; outline: none;
}

/* Avatar holat nuqtasi operator presence'iga qarab rang oladi */
.status-dot[data-presence="busy"] { background: var(--red) !important; }
.status-dot[data-presence="away"] { background: var(--gold) !important; }
.status-dot[data-presence="offline"] { background: #9ca3af !important; }

.call-modal-backdrop {
    position: fixed; inset: 0; z-index: 210; background: rgba(11, 17, 32, 0.5);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.18s ease both;
}
.call-modal-backdrop[hidden] { display: none; }
.call-modal {
    background: var(--surface); border-radius: var(--radius-lg); padding: 28px;
    width: 410px; max-width: calc(100vw - 40px); text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.2s ease both;
}
.call-modal .cm-head {
    font-size: 13px; color: var(--muted); margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.call-modal .cm-number {
    font-size: 26px; font-weight: 800; color: var(--heading);
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.call-modal .cm-name { font-size: 14px; margin-top: 6px; }
.call-modal .cm-name.new { color: var(--amber-text); font-weight: 700; }
.call-modal .cm-meta { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.call-modal .cm-actions {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 22px; flex-wrap: wrap;
}

/* ------------------------- 26. Sidebar mini rejim ------------------------- */
body.sb-mini .sidebar { width: var(--sb-w-mini); padding: 18px 12px 14px; }
body.sb-mini .main { margin-left: var(--sb-w-mini); }
body.sb-mini .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-mini .sb-brand .b-wrap, body.sb-mini .sb-brand small { display: none; }
body.sb-mini .menu a { justify-content: center; padding: 0; }
body.sb-mini .menu a .label { display: none; }
body.sb-mini .menu .section {
    padding: 12px 0 4px; text-align: center; letter-spacing: 0;
    overflow: hidden; height: 26px;
}
body.sb-mini .menu a.active::before { left: -12px; }
body.sb-mini .sb-profile { flex-direction: column; padding: 8px 6px; }
body.sb-mini .sb-profile .p-info { display: none; }
body.sb-mini .sb-foot { display: none; }

/* ------------------------- 27. Responsive ------------------------- */
@media (max-width: 1100px) {
    .sidebar { width: var(--sb-w-mini); padding: 18px 12px 14px; }
    .main { margin-left: var(--sb-w-mini); }
    .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sb-brand .b-wrap, .sb-brand small { display: none; }
    .menu a { justify-content: center; padding: 0; }
    .menu a .label { display: none; }
    .menu .section { padding: 12px 0 4px; text-align: center; letter-spacing: 0; overflow: hidden; height: 26px; }
    .menu a.active::before { left: -12px; }
    .sb-profile { flex-direction: column; padding: 8px 6px; }
    .sb-profile .p-info { display: none; }
    .sb-foot { display: none; }
    /* mini tooltiplar avtomatik yoqiladi */
    .menu a::after {
        content: attr(data-tip);
        position: absolute; left: calc(100% + 12px); top: 50%;
        transform: translateY(-50%) translateX(-4px);
        background: var(--navy-900); color: #fff;
        padding: 6px 11px; border-radius: 8px;
        font-size: 12px; font-weight: 500; white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: var(--shadow-lg);
        opacity: 0; pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 80;
    }
    .menu a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 900px) {
    .tb-search { display: none; }
    .tb-title small .tb-date { display: none; }
    .content { padding: 18px 16px 32px; }
    .topbar { padding: 10px 16px; }
    .table-wrap { margin: 0 -16px; padding: 0 16px; }
}

@media (max-width: 720px) {
    .sidebar {
        width: var(--sb-w); padding: 18px 14px 14px;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sb-brand { justify-content: flex-start; }
    .sb-brand .b-wrap, .sb-brand small { display: revert; }
    .menu a { justify-content: flex-start; padding: 0 10px; }
    .menu a .label { display: revert; }
    .menu .section { padding: 16px 12px 6px; text-align: left; letter-spacing: 0.14em; height: auto; }
    .menu a::after { display: none; }
    .sb-profile { flex-direction: row; padding: 10px; }
    .sb-profile .p-info { display: block; }
    body.sb-open .sidebar { transform: translateX(0); }
    .main { margin-left: 0 !important; }
    .sb-backdrop {
        position: fixed; inset: 0; z-index: 49;
        background: rgba(11, 17, 32, 0.5); backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
    }
    body.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }
    .user-toggle .info { display: none; }
    .page-head h1 { font-size: 20px; }
    .tb-new-btn { display: none; }
}


/* ============================================================
   OXU DESIGN SYSTEM v3 — Enterprise SaaS qatlami
   ------------------------------------------------------------
   Bu blok uchala CRM'da (lid tizimi, OxuSchool, OxuKids) BIR XIL
   — undagi hech bir qoida brend rangini qattiq yozmaydi, faqat
   yuqoridagi (1-bo'lim) tokenlardan foydalanadi. Shuning uchun
   uni bir loyihada tuzatib, qolgan ikkitasiga ko'chirish mumkin.

   v3 nima qo'shadi:
     * yetishmagan shkalalar — bo'shliq, tipografiya, harakat,
       z-index, boshqaruv balandligi (ilgari har sahifa o'zicha
       11px / 9px / 8px padding tanlardi);
     * YAGONA jadval tizimi (.dg) va eski beshta jadval sinfining
       (.grid / .table / .stx-table / .io-table / .emp-table)
       shu tizimga aliaslari — shablonlarni birdan qayta yozmasdan
       hammasi bir xil ko'rinadi;
     * YAGONA modal spetsifikatsiyasi (.ui-modal) va eski
       .modal-overlay / .modal-dialog uchun alias; a11y (fokus
       tutqichi, scroll lock, aria) — ui.js da;
     * komponentlar: toolbar, segmented tabs, pagination, bo'sh
       holat, skeleton, toast, tooltip, status nuqtasi.

   QOIDA: yangi rang, shrift yoki radius kiritilmaydi. Sahifaga
   xos CSS shablon ichida emas, shu yerda yashaydi.
   ============================================================ */

/* ------------------------- 28. v3 tokenlar ------------------------- */
:root {
    /* Bo'shliq — 4px bazasi. Komponentlar orasidagi masofa faqat
       shu qadamlardan olinadi (13px / 17px kabi «qo'lda» qiymatlar
       jadval qatorlarining balandligini bir-biriga mos kelmaydigan
       qilib qo'yardi). */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* Tipografiya shkalasi */
    --fs-2xs: 10.5px;   /* jadval sarlavhasi (micro-caps) */
    --fs-xs: 11.5px;    /* badge, pill, yordamchi */
    --fs-sm: 12.5px;    /* ikkinchi darajali matn */
    --fs-md: 13.5px;    /* jadval katagi, tugma */
    --fs-base: 14px;    /* asosiy matn, input */
    --fs-lg: 16px;      /* modal sarlavhasi, karta boshi */
    --fs-xl: 20px;      /* sahifa sarlavhasi */
    --fs-2xl: 26px;     /* KPI raqami */
    --lh-tight: 1.25;
    --lh: 1.55;
    --fw-md: 500;
    --fw-sb: 600;
    --fw-b: 700;
    --caps: 0.09em;     /* micro-caps letter-spacing */

    /* Boshqaruv elementlari balandligi — tugma, input, select va
       chip bir qatorda turganda piksel-piksel mos kelishi uchun */
    --ctl-sm: 32px;
    --ctl: 38px;
    --ctl-lg: 44px;

    /* Jadval qatori */
    --row-h: 44px;
    --row-h-dense: 36px;

    /* Radius — mavjud shkalaga ikkita qo'shimcha */
    --radius-xs: 8px;
    --radius-pill: 999px;

    /* Harakat: bitta ease butun tizimda. Uzunliklar qisqa —
       enterprise UI «sakramaydi», u darhol javob beradi. */
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 260ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Qatlamlar — z-index endi taxmin qilinmaydi */
    --z-sticky: 20;
    --z-header: 40;
    --z-sidebar: 50;
    --z-dropdown: 60;
    --z-overlay: 100;
    --z-modal: 110;
    --z-toast: 120;
    --z-tooltip: 130;

    /* Jadval ichki bo'shliqlari (dense rejim ularni qayta yozadi) */
    --dg-px: 14px;
    --dg-py: 11px;
}

/* ------------------------- 29. Fokus va a11y bazasi ------------------------- */
/* Klaviatura bilan yurgan foydalanuvchi HAR DOIM qayerdaligini
   ko'rishi kerak — ilgari fokus halqasi faqat ba'zi komponentlarda
   e'lon qilingan edi. Sichqoncha bilan bosishda halqa chiqmaydi
   (:focus-visible), ya'ni dizayn buzilmaydi. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--royal);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* Komponent o'zi ring bilan ishlaganda ikkilanmasin */
.btn:focus-visible,
.icon-btn:focus-visible,
.chip:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Faqat skrinrider uchun matn (jadval sarlavhalari, ikonka tugmalar) */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Klaviatura bilan sahifaga kirganda kontentga sakrash */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-tooltip);
    background: var(--surface); color: var(--heading);
    padding: 10px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    font-size: var(--fs-md); font-weight: var(--fw-sb);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------- 30. Data Grid (.dg) ------------------------- */
/* Yagona jadval tizimi. Tuzilishi:

     <div class="dg-card">
       <div class="dg-toolbar"> qidiruv / filtrlar / amallar </div>
       <div class="dg-scroll">
         <table class="dg">
           <thead><tr><th scope="col">...</th></tr></thead>
           <tbody>...</tbody>
         </table>
       </div>
       <div class="dg-foot"> sahifalash </div>
     </div>

   Modifikatorlar: .dg--dense (qator 36px), .dg--zebra,
   .dg--bordered, .dg--sticky-first (birinchi ustun yopishadi).
   Kataklar: .num (raqam — o'ngga, tabular), .nowrap, .dg-actions. */

.dg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;                 /* burchaklar jadval bilan mos */
}

/* Gorizontal scroll konteyneri. Scroll borligini bildirish uchun
   chetlarda soya chiziladi (ilgari foydalanuvchi o'ngda yana ustun
   borligini umuman bilmasdi). Soya `background-attachment: local`
   hiylasi bilan — JS kerak emas. */
/* Bootstrap'ning `.table-responsive` si ham shu affordansni oladi —
   60 dan ortiq shablonni qayta yozmasdan hammasida «o'ngda yana
   ustun bor» belgisi paydo bo'ladi. */
.dg-scroll, .table-responsive {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.13), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.13), transparent) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
:root[data-theme="dark"] .dg-scroll,
:root[data-theme="dark"] .table-responsive {
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(18, 26, 46, 0)) left center,
        linear-gradient(to left, var(--surface) 30%, rgba(18, 26, 46, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), transparent) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Yopishqoq sarlavha SHU konteyner scroll qilinganda ishlaydi —
   sahifa scroll'ida emas. Sabab CSS spetsifikatsiyasida: `overflow-x:
   auto` bo'lgan elementda `overflow-y: visible` ham `auto` ga aylanadi,
   ya'ni konteyner o'zi scroll konteksti bo'lib qoladi. Uzun jadvalda
   sarlavha ko'rinib tursin desangiz — `.dg-scroll--tall` qo'shing. */
.dg-scroll--tall { max-height: min(70vh, 640px); overflow-y: auto; }

table.dg {
    width: 100%;
    border-collapse: separate;        /* sticky th chizig'i yo'qolmasin */
    border-spacing: 0;
    font-size: var(--fs-md);
    color: var(--text);
}

/* --- Sarlavha: micro-caps, yopishqoq, ostida qattiq chiziq --- */
table.dg > thead > tr > th {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--surface);
    padding: var(--sp-2) var(--dg-px);
    height: 38px;
    text-align: left; vertical-align: middle;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-sb);
    letter-spacing: var(--caps);
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    /* sticky elementda border-bottom «suzib» ketadi — soya bilan
       mahkamlaymiz, aks holda scroll paytida chiziq yo'qoladi */
    box-shadow: inset 0 -1px 0 var(--border);
}
table.dg > thead > tr > th:first-child { padding-left: var(--sp-5); }
table.dg > thead > tr > th:last-child { padding-right: var(--sp-5); }

/* --- Kataklar --- */
table.dg > tbody > tr > td {
    padding: var(--dg-py) var(--dg-px);
    height: var(--row-h);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-2);
}
table.dg > tbody > tr > td:first-child { padding-left: var(--sp-5); }
table.dg > tbody > tr > td:last-child { padding-right: var(--sp-5); }
table.dg > tbody > tr:last-child > td { border-bottom: none; }

table.dg > tbody > tr { transition: background var(--dur-fast) var(--ease); }
table.dg > tbody > tr:hover > td { background: var(--hover); }
table.dg > tbody > tr.is-selected > td { background: var(--royal-soft); }
table.dg > tbody > tr.is-muted > td { opacity: 0.55; }

/* Kontentga oid tipografiya — hamma jadvalda bir xil */
table.dg td b, table.dg td strong { color: var(--heading); font-weight: var(--fw-sb); }
table.dg td small { color: var(--muted); font-size: var(--fs-xs); }
table.dg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dg .nowrap { white-space: nowrap; }
table.dg .dg-link { color: var(--heading); text-decoration: none; font-weight: var(--fw-sb); }
table.dg .dg-link:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }

/* Bosiladigan qator */
table.dg > tbody > tr.dg-row-link { cursor: pointer; }
table.dg > tbody > tr.dg-row-link:focus-within > td { background: var(--hover); }

/* --- Zich rejim (ko'p ustunli hisobot jadvallari) --- */
table.dg.dg--dense { font-size: var(--fs-sm); }
table.dg.dg--dense > tbody > tr > td { height: var(--row-h-dense); padding: var(--sp-1) var(--sp-3); }
table.dg.dg--dense > thead > tr > th { height: 32px; padding: var(--sp-1) var(--sp-3); }

/* --- Zebra (faqat uzun raqamli jadvallarda) --- */
table.dg.dg--zebra > tbody > tr:nth-child(even) > td { background: var(--surface-2); }
table.dg.dg--zebra > tbody > tr:hover > td { background: var(--hover); }

/* --- Chegaralangan (matritsa: rol × status kabi) --- */
table.dg.dg--bordered > tbody > tr > td,
table.dg.dg--bordered > thead > tr > th { border-right: 1px solid var(--border-2); }
table.dg.dg--bordered > tbody > tr > td:last-child,
table.dg.dg--bordered > thead > tr > th:last-child { border-right: none; }

/* --- Birinchi ustun yopishqoq (uzun jadvalda ism ko'rinib tursin) --- */
table.dg.dg--sticky-first > thead > tr > th:first-child,
table.dg.dg--sticky-first > tbody > tr > td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border-2);
}
table.dg.dg--sticky-first > thead > tr > th:first-child { z-index: calc(var(--z-sticky) + 1); }
table.dg.dg--sticky-first > tbody > tr:hover > td:first-child { background: var(--hover); }

/* --- Jami/yakun qatori --- */
table.dg > tbody > tr.dg-total > td,
table.dg > tfoot > tr > td {
    background: var(--surface-2);
    border-top: 2px solid var(--border);
    font-weight: var(--fw-sb); color: var(--heading);
}

/* --- Saralanadigan sarlavha --- */
table.dg th.sortable, th.sortable { cursor: pointer; user-select: none; }
table.dg th.sortable:hover, th.sortable:hover { color: var(--royal); }
table.dg th.sortable::after {
    content: "";
    display: inline-block; width: 0; height: 0; margin-left: 6px;
    vertical-align: middle; opacity: 0.3;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
table.dg th.sortable.desc::after { transform: rotate(180deg); }
table.dg th.sortable.asc::after, table.dg th.sortable.desc::after { opacity: 1; color: var(--royal); }

/* --- Amallar ustuni --- */
.dg-actions {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    justify-content: flex-end; white-space: nowrap;
}
table.dg th.dg-actions-col, table.dg td.dg-actions-col { text-align: right; width: 1%; }
/* Sichqoncha bilan ishlaganda amallar qator ustida turganda chiqadi —
   sensorli ekranda (hover yo'q) doim ko'rinadi, aks holda tugmaga
   umuman yetib bo'lmasdi. */
@media (hover: hover) and (pointer: fine) {
    table.dg > tbody > tr .dg-actions.on-hover { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
    table.dg > tbody > tr:hover .dg-actions.on-hover,
    table.dg > tbody > tr:focus-within .dg-actions.on-hover { opacity: 1; }
}

/* --- Tanlash ustuni --- */
table.dg th.dg-check-col, table.dg td.dg-check-col { width: 1%; padding-right: 0; }
table.dg input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* --- Toolbar (jadval ustidagi qator) --- */
.dg-toolbar {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border-2);
    background: var(--surface);
    min-height: 56px;
}
.dg-toolbar > .spacer { margin-left: auto; }
.dg-toolbar .dg-title {
    display: flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-display); font-size: var(--fs-lg);
    font-weight: var(--fw-b); color: var(--heading); margin: 0;
}
.dg-toolbar .dg-title .i { width: 17px; height: 17px; color: var(--gold); }
.dg-toolbar .dg-count {
    font-size: var(--fs-xs); font-weight: var(--fw-sb); color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 2px 9px; border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

/* --- Pastki qator (sahifalash / yakun) --- */
.dg-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border-2);
    font-size: var(--fs-sm); color: var(--muted);
}

/* --- Bo'sh holat (jadval ichida colspan bilan) --- */
.dg-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2); text-align: center;
    padding: var(--sp-10) var(--sp-4); color: var(--muted);
}
.dg-empty .i { width: 40px; height: 40px; color: var(--border); stroke-width: 1.25; }
.dg-empty b { display: block; font-size: var(--fs-base); color: var(--heading); font-weight: var(--fw-sb); }
.dg-empty p { font-size: var(--fs-md); max-width: 380px; }
.dg-empty .btn { margin-top: var(--sp-2); }

/* --- Yuklanish holati (skeleton qatorlar) --- */
.dg-skel-row td { height: var(--row-h); }
.dg-skel {
    display: block; height: 10px; border-radius: var(--radius-xs);
    background: linear-gradient(90deg, var(--border-2) 25%, var(--hover) 50%, var(--border-2) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
}
.dg-skel.w-40 { width: 40%; }
.dg-skel.w-60 { width: 60%; }
.dg-skel.w-80 { width: 80%; }

/* ------------------------- 31. Eski jadval sinflari → .dg ------------------------- */
/* Uchala CRM'da beshta parallel jadval tizimi bor edi (har birining
   o'z padding'i va sarlavha uslubi). Shablonlarni birdan qayta
   yozmasdan hammasini bir xil ko'rinishga keltirish uchun eski
   sinflar shu yerda .dg spetsifikatsiyasiga bog'lanadi. Yangi
   sahifa faqat .dg dan foydalanadi; eski sinflar vaqt o'tib
   shablonlar ko'chirilgach olib tashlanadi. */

/* Bootstrap .table ning border modeli (border-collapse: collapse +
   inset box-shadow bilan striping) ATAYIN tegilmaydi — faqat
   o'lchamlar va tokenlar moslanadi. Custom jadvallar esa
   `separate` ga o'tadi: `collapse` da yopishqoq sarlavhaning
   pastki chizig'i scroll paytida yo'qoladi.

   DIQQAT: bu yerda faqat UCHALA loyihada ham uchraydigan sinflar
   bor. Sahifaga xos jadvallar (lid tizimidagi .stx-table,
   .io-table, .emp-table) o'z fayllarida shu spetsifikatsiyaga
   bog'lanadi — aks holda twin'larda hech qachon mos kelmaydigan
   o'lik CSS bo'lib qolardi. */
table.grid {
    font-size: var(--fs-md);
    border-collapse: separate; border-spacing: 0;
}

/* Sarlavha */
table.grid th,
.table thead th {
    height: 38px; padding: var(--sp-2) var(--dg-px);
    font-size: var(--fs-2xs); font-weight: var(--fw-sb);
    letter-spacing: var(--caps); text-transform: uppercase;
    color: var(--muted); white-space: nowrap; text-align: left;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
/* Yopishqoq sarlavhaning chizig'i faqat custom jadvalga qo'shiladi
   (Bootstrap `collapse` modelida bu ikkinchi chiziq bo'lib chiqardi) */
table.grid th { box-shadow: inset 0 -1px 0 var(--border); }
/* Kataklar */
table.grid td,
.table tbody td {
    height: var(--row-h); padding: var(--dg-py) var(--dg-px);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-2);
}
table.grid tr:hover td { background: var(--hover); }

/* Katak yordamchilari — .dg dagilar bilan bir xil. Jadval qatlamining
   `Column(css=...)` aynan shu sinflarni yuboradi, umumiy ro'yxat esa
   Bootstrap `.table` bilan chiziladi: faqat `table.dg` ostida
   e'lon qilinsa, .num/.nowrap ro'yxatlarda hech qachon ishlamaydi. */
table.grid .num, .table .num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.grid .nowrap, .table .nowrap { white-space: nowrap; }

/* Zich variant — ko'p ustunli hisobot jadvali */
table.grid[style*="font-size:12.5px"] { font-size: var(--fs-sm); }

/* Matritsa jadvallari (rol × status) — chegara bilan zich */
table.grid.perm-table td, table.grid.perm-table th,
table.grid.trans-table td, table.grid.trans-table th,
table.grid.menu-table td, table.grid.menu-table th {
    height: auto; padding: var(--sp-2) var(--sp-3);
}

/* Bootstrap .table: o'zgaruvchilar orqali tokenlarga bog'lanadi */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-2);
    --bs-table-hover-bg: var(--hover);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table.table-sm tbody td, .table.table-sm thead th {
    height: var(--row-h-dense); padding: var(--sp-1) var(--sp-3);
}


/* ------------------------- 32. Toolbar / filter bar / tabs ------------------------- */
/* «Filtr qatori» va «rol tablari» har sahifada qaytadan yozilgan
   edi (.filter-bar, .role-tabs, .chips, .tab — bitta tushuncha
   uchun to'rtta nom). Bittasi qoldi: .toolbar + .segmented. */

.toolbar {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.toolbar > form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: 0; }
.toolbar > .spacer, .toolbar form > .spacer { margin-left: auto; }

/* Qidiruv maydoni — ikonka ichida, boshqaruv balandligi bilan bir xil */
.search-field { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.search-field > .i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.search-field input {
    width: 100%; height: var(--ctl); padding: 0 var(--sp-3) 0 38px;
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text);
    font-size: var(--fs-md); font-family: inherit; outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-field input:focus { border-color: var(--royal); box-shadow: var(--ring); }
.search-field input::placeholder { color: var(--muted); }

/* Toolbar ichidagi select — forma maydonlari bilan bir xil ko'rinish,
   lekin boshqaruv balandligida (38px). Har sahifada qaytadan yozilmaydi. */
.toolbar select, .filter-bar select {
    height: var(--ctl); padding: 0 38px 0 var(--sp-3);
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background-color: var(--input-bg); color: var(--text);
    font-size: var(--fs-md); font-family: inherit; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.toolbar select:focus, .filter-bar select:focus { border-color: var(--royal); box-shadow: var(--ring); }
.filter-bar form { display: flex; gap: var(--sp-2); flex: 1; min-width: 300px; flex-wrap: wrap; align-items: center; }
.filter-bar .f-ic, .filter-bar .search-field { flex: 1 1 220px; min-width: 220px; }
.filter-bar .f-ic input { height: var(--ctl); }

/* Segmentli tanlov (tab / chip / filtr) — bitta komponent */
.segmented { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.segmented > a, .segmented > button, .chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    height: var(--ctl-sm); padding: 0 var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--label); font-size: var(--fs-sm); font-weight: var(--fw-md);
    font-family: inherit; text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.segmented > a:hover, .segmented > button:hover, .chip:hover {
    border-color: var(--royal); color: var(--royal); background: var(--royal-soft);
}
.segmented > a.active, .segmented > button.active, .chip.active {
    background: var(--navy-800); border-color: var(--navy-800); color: #fff;
}
.segmented > a.active:hover, .segmented > button.active:hover { color: #fff; }
/* Ichidagi son — asosiy yozuvdan ajralib turadi, lekin baqirmaydi */
.segmented .cnt, .chip .c-n {
    font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
    color: var(--muted); font-weight: var(--fw-sb);
}
.segmented > a.active .cnt, .segmented > button.active .cnt, .chip.active .c-n {
    color: rgba(255, 255, 255, 0.72);
}
.chip .c-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, currentColor); }

/* Eski nomlar — shablonlar ko'chirilgunicha ishlaydi */
.filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.role-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.role-tabs a {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    height: var(--ctl-sm); padding: 0 var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--label); font-size: var(--fs-sm); font-weight: var(--fw-md);
    text-decoration: none; white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.role-tabs a:hover { border-color: var(--royal); color: var(--royal); background: var(--royal-soft); transform: none; }
.role-tabs a.active {
    background: var(--navy-800); border-color: var(--navy-800); color: #fff; box-shadow: none;
}
.role-tabs a .cnt { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.role-tabs a.active .cnt { color: rgba(255, 255, 255, 0.72); }

/* ------------------------- 33. Sahifalash ------------------------- */
.pager { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pager a, .pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--ctl-sm); height: var(--ctl-sm); padding: 0 var(--sp-2);
    border-radius: var(--radius-xs); border: 1px solid transparent;
    color: var(--label); font-size: var(--fs-sm); font-weight: var(--fw-md);
    text-decoration: none; font-variant-numeric: tabular-nums;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pager a:hover { background: var(--hover); border-color: var(--border); color: var(--heading); }
.pager .current { background: var(--royal); border-color: var(--royal); color: #fff; }
.pager .disabled { color: var(--muted); opacity: 0.5; pointer-events: none; }
.pager .gap { border: none; color: var(--muted); }

/* ------------------------- 34. Modal (.ui-modal) ------------------------- */
/* Yagona spetsifikatsiya. a11y (fokus tutqichi, scroll lock, aria,
   Escape, fokusni qaytarish) — static/js/ui.js dagi UIModal.
   Eski .modal-overlay / .modal-dialog shu yerda ayni ko'rinishga
   keltiriladi va ui.js ularni ham avtomatik «yaxshilaydi». */

.ui-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-5);
}
.ui-modal[hidden] { display: none; }
.ui-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 17, 32, 0.5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    animation: fadeIn var(--dur) var(--ease) both;
}
.ui-modal__dialog {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; max-width: 520px; max-height: calc(100vh - 2 * var(--sp-5));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modalIn var(--dur-slow) var(--ease-out) both;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.ui-modal__dialog--sm { max-width: 400px; }
.ui-modal__dialog--md { max-width: 520px; }
.ui-modal__dialog--lg { max-width: 720px; }
.ui-modal__dialog--xl { max-width: 980px; }

.ui-modal__head {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border-2);
    flex-shrink: 0;
}
.ui-modal__head h3, .ui-modal__title {
    font-family: var(--font-display); font-size: var(--fs-lg);
    font-weight: var(--fw-b); color: var(--heading);
    display: flex; align-items: center; gap: var(--sp-2); margin: 0;
    line-height: var(--lh-tight);
}
.ui-modal__head h3 .i, .ui-modal__title .i { width: 18px; height: 18px; color: var(--gold); }
.ui-modal__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.ui-modal__x {
    margin-left: auto; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: var(--radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--muted); cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ui-modal__x .i { width: 16px; height: 16px; }
.ui-modal__x:hover { background: var(--hover); color: var(--heading); }

.ui-modal__body {
    padding: var(--sp-5) var(--sp-6);
    overflow-y: auto; flex: 1 1 auto;
}
.ui-modal__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-2);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    flex-shrink: 0;
}
.ui-modal__foot .spacer { margin-right: auto; }
.ui-modal__err {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    margin-top: var(--sp-3); padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--red-soft); color: var(--red-text);
    border: 1px solid rgba(239, 68, 68, 0.25);
    font-size: var(--fs-md);
}
.ui-modal__err[hidden] { display: none; }

/* --- Eski modallar shu spetsifikatsiyaga --- */
.modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(11, 17, 32, 0.5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-5);
    animation: fadeIn var(--dur) var(--ease) both;
    overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
    width: 100%; max-width: 480px;
    max-height: calc(100vh - 2 * var(--sp-5));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-6);
    animation: modalIn var(--dur-slow) var(--ease-out) both;
}
.modal-dialog h3 {
    font-family: var(--font-display); font-size: var(--fs-lg);
    font-weight: var(--fw-b); color: var(--heading);
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0 0 var(--sp-1);
    line-height: var(--lh-tight);
}
.modal-dialog h3 .i { width: 18px; height: 18px; color: var(--gold); }

/* Bootstrap modali (twin'lar) — ayni o'lchamlar */
.modal .modal-content {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal .modal-header { border-bottom: 1px solid var(--border-2); padding: var(--sp-5) var(--sp-6); }
.modal .modal-title {
    font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-b);
    color: var(--heading); display: flex; align-items: center; gap: var(--sp-2);
}
.modal .modal-body { padding: var(--sp-5) var(--sp-6); }
.modal .modal-footer {
    border-top: 1px solid var(--border-2); padding: var(--sp-4) var(--sp-6);
    gap: var(--sp-2); background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ------------------------- 35. Drawer (yon panel) ------------------------- */
.ui-drawer { position: fixed; inset: 0; z-index: var(--z-modal); }
.ui-drawer[hidden] { display: none; }
.ui-drawer__backdrop {
    position: absolute; inset: 0; background: rgba(11, 17, 32, 0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fadeIn var(--dur) var(--ease) both;
}
.ui-drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(520px, 100%);
    display: flex; flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: drawerIn var(--dur-slow) var(--ease-out) both;
}
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ui-drawer__head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-2); flex-shrink: 0;
}
.ui-drawer__body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; }

/* ------------------------- 36. Toast (bildirishnoma) ------------------------- */
.toast-stack {
    position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--sp-2);
    max-width: min(380px, calc(100vw - 2 * var(--sp-5)));
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-left: 3px solid var(--royal);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: var(--fs-md); pointer-events: auto;
    animation: toastIn var(--dur-slow) var(--ease-out) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast.is-leaving { animation: fadeIn var(--dur) var(--ease) reverse both; }
.toast .i { width: 18px; height: 18px; flex-shrink: 0; color: var(--royal); margin-top: 1px; }
.toast b { display: block; color: var(--heading); font-weight: var(--fw-sb); }
.toast.ok { border-left-color: var(--emerald); }
.toast.ok .i { color: var(--emerald); }
.toast.warn { border-left-color: var(--amber); }
.toast.warn .i { color: var(--amber); }
.toast.err { border-left-color: var(--red); }
.toast.err .i { color: var(--red); }
.toast .x {
    margin-left: auto; border: none; background: none; cursor: pointer;
    color: var(--muted); padding: 0; line-height: 1;
}

/* ------------------------- 37. Bo'sh holat / skeleton ------------------------- */
.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2); text-align: center;
    padding: var(--sp-10) var(--sp-4); color: var(--muted);
}
.empty .i { width: 40px; height: 40px; color: var(--border); stroke-width: 1.25; margin-bottom: 0; }
.empty b { font-size: var(--fs-base); color: var(--heading); font-weight: var(--fw-sb); }
.empty p { font-size: var(--fs-md); max-width: 380px; }

/* ------------------------- 38. Tugma / input rafinatsiyasi ------------------------- */
.btn {
    height: var(--ctl);
    font-size: var(--fs-md); font-weight: var(--fw-sb);
    border-radius: var(--radius-sm);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn-lg { height: var(--ctl-lg); padding: 0 var(--sp-5); font-size: var(--fs-base); }
.btn-sm { height: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--radius-xs); }
/* O'chirilgan tugma «bosilar ekan» degan taassurot bermasin */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none;
}
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--surface); animation: spin 0.7s linear infinite;
}
.btn-light.is-loading::after, .btn-ghost.is-loading::after { color: var(--label); }

/* Ikonka tugma — jadval amallari uchun asosiy element */
.icon-btn { width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--radius-xs); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm .i { width: 14px; height: 14px; }

/* Input o'lchamlari boshqaruv shkalasiga bog'landi */
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-field select,
input.ui, select.ui {
    height: var(--ctl-lg); padding-top: 0; padding-bottom: 0;
    font-size: var(--fs-base);
}
.form-field.sm input, .form-field.sm select { height: var(--ctl); font-size: var(--fs-md); }
.form-field textarea { padding: var(--sp-3) var(--sp-4); }
/* Xato holati — chegara + xabar (ilgari faqat xabar bor edi) */
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea,
.form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid {
    border-color: var(--red);
}
.form-field.has-error input:focus, .form-field input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled {
    background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
/* Majburiy maydon yulduzchasi — bir xil ko'rinish */
.req, .required-star { color: var(--red); font-weight: var(--fw-b); margin-left: 2px; }

/* ------------------------- 39. Status badge ------------------------- */
/* Holatni FAQAT rang bilan ko'rsatish rang ko'rligida o'qilmaydi —
   shuning uchun har badge'da nuqta + matn birga turadi. */
.status {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: var(--fw-sb);
    border: 1px solid transparent; white-space: nowrap;
    background: var(--surface-2); color: var(--label); border-color: var(--border);
}
.status::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0; opacity: 0.85;
}
.status.ok { background: var(--emerald-soft); color: var(--emerald-text); border-color: rgba(16, 185, 129, 0.25); }
.status.warn { background: var(--amber-soft); color: var(--amber-text); border-color: rgba(245, 158, 11, 0.28); }
.status.err { background: var(--red-soft); color: var(--red-text); border-color: rgba(239, 68, 68, 0.25); }
.status.info { background: var(--cyan-soft); color: var(--cyan-text); border-color: rgba(6, 182, 212, 0.25); }
.status.gold { background: var(--gold-soft); color: var(--gold-text); border-color: rgba(201, 162, 39, 0.35); }
.status.neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

/* Mavjud .pill / .badge-soft-* ayni balandlikka keltiriladi */
.pill, .badge[class*="badge-soft-"] {
    height: 24px; padding: 0 10px; font-size: var(--fs-xs); font-weight: var(--fw-sb);
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
}

/* ------------------------- 40. Utility ------------------------- */
.u-nowrap { white-space: nowrap; }
.u-num { font-variant-numeric: tabular-nums; }
.u-muted { color: var(--muted); }
.u-heading { color: var(--heading); font-weight: var(--fw-sb); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-row { display: flex; align-items: center; gap: var(--sp-2); }
.u-spacer { margin-left: auto; }

/* `fadeUp` kirish animatsiyasi `fill-mode: both` bilan tugagach ham
   elementda `transform` qoldiradi — bu esa ichidagi `position: fixed`
   elementlar (jadval qator menyusi, portal dropdown) uchun containing
   block yaratib, ularni sahifa bo'ylab siljitib yuboradi. `backwards`
   da kirish effekti saqlanadi, transform qoldig'i esa yo'qoladi. */
.content > * { animation-fill-mode: backwards; }

/* Body scroll lock — modal/drawer ochilganda (ui.js qo'yadi).
   Scrollbar kengligi kompensatsiya qilinadi, aks holda sahifa
   modal ochilganda «sakraydi». */
body.ui-scroll-lock { overflow: hidden; padding-right: var(--ui-sbw, 0px); }

/* ------------------------- 41. Responsive (v3) ------------------------- */
@media (max-width: 900px) {
    :root { --dg-px: 12px; --dg-py: 10px; --row-h: 42px; }
    .dg-toolbar, .dg-foot { padding: var(--sp-3); }
    table.dg > thead > tr > th:first-child,
    table.dg > tbody > tr > td:first-child { padding-left: var(--sp-3); }
    table.dg > thead > tr > th:last-child,
    table.dg > tbody > tr > td:last-child { padding-right: var(--sp-3); }
    .ui-modal { padding: var(--sp-3); align-items: flex-end; }
    .ui-modal__dialog { max-height: calc(100vh - 2 * var(--sp-3)); }
    .ui-modal__head, .ui-modal__body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .ui-modal__foot { padding: var(--sp-3) var(--sp-4); }
    .modal-overlay { padding: var(--sp-3); }
    .modal-dialog { padding: var(--sp-4); }
    .toast-stack { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); max-width: none; }
}

/* Sensorli ekranda amal tugmalari hech qachon yashirilmaydi */
@media (hover: none) {
    .dg-actions.on-hover { opacity: 1 !important; }
}

/* Chop etish — jadval qog'ozda o'qilsin */
@media print {
    .sidebar, .topbar, .dg-toolbar, .dg-foot, .toast-stack,
    .ui-modal, .modal-overlay, .btn, .icon-btn { display: none !important; }
    .main { margin-left: 0 !important; }
    .dg-card, .card { box-shadow: none; border-color: #d0d0d0; }
    table.dg > thead > tr > th { position: static; box-shadow: none; }
}

/* ------------------- 42. Til almashtirgich (UZ | RU) ------------------- */
/* Topbar'dagi kichik segmentli boshqaruv. `.segmented` (§32) bilan bir xil
   geometriya, lekin `.tb-btn` balandligiga (38px) moslangan — yonidagi
   tugmalar bilan bir chiziqda turishi uchun. */
.lang-switch {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    height: var(--ctl, 38px); padding: 3px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 11px; box-shadow: var(--shadow-xs);
}
.lang-switch__btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 100%; padding: 0 var(--sp-2, 8px);
    font-family: inherit; font-size: var(--fs-xs, 11.5px);
    font-weight: var(--fw-semibold, 600); letter-spacing: 0.02em;
    color: var(--muted); border-radius: 8px;
    transition: background var(--dur-fast, 0.14s) var(--ease, ease),
                color var(--dur-fast, 0.14s) var(--ease, ease);
}
.lang-switch__btn:hover { color: var(--heading); background: var(--hover); }
.lang-switch__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.lang-switch__btn[aria-pressed="true"] {
    background: var(--surface); color: var(--royal);
    box-shadow: var(--shadow-xs);
}
.lang-switch form { margin: 0; display: contents; }

/* Kirish sahifasi kabi topbar'siz sahifalarda — o'ng yuqori burchakda */
.lang-switch--floating {
    position: absolute; top: var(--sp-5, 20px); right: var(--sp-5, 20px);
    z-index: var(--z-sticky, 20);
}

@media (max-width: 600px) {
    .lang-switch__btn { min-width: 30px; padding: 0 var(--sp-1, 4px); }
}