/*
 * ════════════════════════════════════════════════════════════════════════
 *  OXU KIDS CRM — DIZAYN TIZIMI  (premium, Linear/Stripe/Vercel darajasi)
 * ════════════════════════════════════════════════════════════════════════
 *
 *  Falsafa: sofistike neytrallar · aniq ishlatilgan binafsha aksent ·
 *  yumshoq qatlamli soyalar · shisha (glass) yuzalar · mukammal spacing ·
 *  silliq mikro-interaksiyalar. Ikkala tema token darajasida.
 *
 *  Bootstrap 5.3 ustidagi qatlam — `data-bs-theme` orqali dark/light.
 *  Sinf nomlari shablonlardagidek; bu fayl faqat ko'rinishni belgilaydi.
 *
 *   1. Token'lar (rang · spacing · radius · soya · type · motion)
 *   2. Moslik + Bootstrap o'zgaruvchilari
 *   3. Keyframe animatsiyalari
 *   4. Asos (reset, tipografika, fon, scrollbar)
 *   5. Karkas (shell, sidebar, topbar, kontent, footer)
 *   6. Komponentlar (btn, input, select, dropdown, modal, drawer, tabs,
 *      accordion, breadcrumb, pagination, tooltip, progress, avatar, alert,
 *      badge, chip)
 *   7. Data table (sticky · zebra · hover · sort · responsive)
 *   8. Modullar (stat, lid kartasi, kanban, forma bloklari, timeline, chart)
 *   9. Holatlar (empty · error · skeleton) va utilitalar
 *  10. Print
 */

/* ══ 1. TOKEN'LAR ═══════════════════════════════════════════════════════ */
:root, [data-bs-theme="light"] {
  color-scheme: light;

  /* Brend aksenti — Royal Blue → Deep Navy (oxukids.uz) */
  --a1:#1E3FA8; --a2:#152F8E; --a3:#0A1A5C;
  --grad: linear-gradient(135deg, var(--a1) 0%, var(--a2) 55%, var(--a3) 100%);
  --grad-soft: linear-gradient(135deg, rgba(21,47,142,.10), rgba(10,26,92,.10));
  --accent:#17318F; --accent-2:#0F2470; --accent-ink:#0A1A5C; --accent-weak:#E9EDF8;
  --accent-glow: rgba(21,47,142,.20);
  /* Ikkilamchi brend aksenti — Warm Gold (premium bezaklar) */
  --gold:#C49F5B; --gold-2:#B8944E; --gold-ink:#8A6624; --gold-weak:#F6EEDC; --gold-bd:#E6D4AC;

  /* Neytrallar — iliq krem yuzalar, navy matn (brend) */
  --n0:#FFFFFF;
  --n25:#FCFAF6;
  --n50:#FAF7F2;
  --n100:#F3EEE4;
  --n150:#ECE4D6;
  --n200:#E3D9C8;
  --n300:#D0C6B2;
  --n400:#A7A192;
  --n500:#6F7286;
  --n600:#565A73;
  --n700:#3C415C;
  --n800:#262B45;
  --n900:#141833;

  --bg:#F5F1E9;
  --bg-2:#EFEAE0;
  --surface:var(--n0);
  --surface-2:#FBF8F3;
  --surface-3:#F3EEE4;
  --hover:rgba(21,47,142,.045);
  --glass: rgba(255,255,255,.72);
  --glass-bd: rgba(20,24,51,.08);
  --glass-hi: rgba(255,255,255,.65);

  --ink:var(--n900); --ink-2:var(--n700); --muted:var(--n500); --faint:var(--n400);
  --border:var(--n200); --border-2:var(--n150); --line:var(--n150);

  /* Semantik — 7 oila, har biri: asosiy · yumshoq fon · chegara · matn */
  --ok:#2E9E6B;   --ok-bg:#E6F4EC;  --ok-bd:#BEE3CE;  --ok-ink:#1E7A51;
  --warn:#B8860B; --warn-bg:#FAF0D8; --warn-bd:#EAD5A2; --warn-ink:#87610D;
  --bad:#D6453F;  --bad-bg:#FBEAEA;  --bad-bd:#F2C2C0;  --bad-ink:#AF2E2A;
  --info:#2F6FB5; --info-bg:#E7F0FA; --info-bd:#BAD6EF; --info-ink:#215688;
  --neutral:#6F7286; --neutral-bg:#F0EDE6; --neutral-bd:#E0DACD; --neutral-ink:#565A73;

  /* Sidebar — indigo gradient + binafsha aktiv pill (rasm dizayni) */
  --side-bg:#3238B6;
  --side-bg-2:#20259C;
  --side-bd:rgba(255,255,255,.16);
  --side-tx:#C6CBF4;
  --side-hi:#FFFFFF;
  --side-pill-1:#8B5CF6;
  --side-pill-2:#6D3EF0;
  --side-active:#CDBCFF;

  /* Soyalar — qatlamli, yumshoq (Stripe/Linear ruhi) */
  --sh-xs: 0 1px 2px rgba(20,18,31,.05);
  --sh-sm: 0 1px 3px rgba(20,18,31,.06), 0 1px 2px rgba(20,18,31,.04);
  --sh-md: 0 6px 16px rgba(20,18,31,.07), 0 2px 6px rgba(20,18,31,.05);
  --sh-lg: 0 16px 40px rgba(20,18,31,.12), 0 6px 12px rgba(20,18,31,.06);
  --sh-xl: 0 32px 64px rgba(20,18,31,.16), 0 8px 20px rgba(20,18,31,.08);
  --sh-glow: 0 8px 24px var(--accent-glow);
  --sh-inset: inset 0 1px 0 var(--glass-hi);
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --a1:#5E7EEA; --a2:#4A6BDF; --a3:#7B97F0;
  --grad: linear-gradient(135deg, var(--a1) 0%, var(--a2) 50%, var(--a3) 100%);
  --grad-soft: linear-gradient(135deg, rgba(94,126,234,.18), rgba(123,151,240,.14));
  --accent:#5E7EEA; --accent-2:#829CF2; --accent-ink:#A6BAF7; --accent-weak:#16214A;
  --accent-glow: rgba(90,123,232,.42);
  --gold:#D8B978; --gold-2:#C9A860; --gold-ink:#E6CF9C; --gold-weak:#2A2414; --gold-bd:#4C3F22;

  --n0:#080C1E;
  --n25:#0B1024;
  --n50:#0F1530;
  --n100:#141B3C;
  --n150:#1A234A;
  --n200:#232E5C;
  --n300:#334073;
  --n400:#4E5788;
  --n500:#7E86AC;
  --n600:#9AA1C4;
  --n700:#B6BCDA;
  --n800:#D4D8EC;
  --n900:#ECEEF9;

  --bg:#060A1A;
  --bg-2:#0A0F26;
  --surface:#0F1738;
  --surface-2:#141D42;
  --surface-3:#1B2550;
  --hover:rgba(94,126,234,.10);
  --glass: rgba(16,23,56,.66);
  --glass-bd: rgba(255,255,255,.09);
  --glass-hi: rgba(255,255,255,.05);

  --ink:var(--n900); --ink-2:var(--n700); --muted:var(--n500); --faint:var(--n400);
  --border:var(--n200); --border-2:var(--n150); --line:var(--n150);

  --ok:#35C88A;   --ok-bg:#0E2A1E;  --ok-bd:#1D4E37;  --ok-ink:#5FDCA0;
  --warn:#E0B45A; --warn-bg:#2A2314; --warn-bd:#524218; --warn-ink:#EDC97A;
  --bad:#F26169;  --bad-bg:#2A1518;  --bad-bd:#54282C;  --bad-ink:#F5878D;
  --info:#5AA0EA; --info-bg:#0E2236; --info-bd:#1E466A; --info-ink:#84B6F0;
  --neutral:#7E86AC; --neutral-bg:#141B36; --neutral-bd:#26305A; --neutral-ink:#9AA1C4;

  --side-bg:#1A1E6E;
  --side-bg-2:#101347;
  --side-bd:rgba(255,255,255,.10);
  --side-tx:#A9B0E4;
  --side-hi:#FFFFFF;
  --side-pill-1:#8B5CF6;
  --side-pill-2:#6D3EF0;
  --side-active:#CDBCFF;

  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 6px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --sh-lg: 0 16px 40px rgba(0,0,0,.6), 0 6px 12px rgba(0,0,0,.4);
  --sh-xl: 0 32px 64px rgba(0,0,0,.7), 0 8px 20px rgba(0,0,0,.5);
  --sh-glow: 0 8px 28px var(--accent-glow);
  --sh-inset: inset 0 1px 0 var(--glass-hi);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;
    --a1:#5E7EEA; --a2:#4A6BDF; --a3:#7B97F0;
    --grad:linear-gradient(135deg,#5E7EEA,#4A6BDF 50%,#7B97F0);
    --grad-soft:linear-gradient(135deg,rgba(94,126,234,.18),rgba(123,151,240,.14));
    --accent:#5E7EEA; --accent-2:#829CF2; --accent-ink:#A6BAF7; --accent-weak:#16214A; --accent-glow:rgba(90,123,232,.42);
    --gold:#D8B978; --gold-2:#C9A860; --gold-ink:#E6CF9C; --gold-weak:#2A2414; --gold-bd:#4C3F22;
    --n0:#080C1E;--n25:#0B1024;--n50:#0F1530;--n100:#141B3C;--n150:#1A234A;--n200:#232E5C;--n300:#334073;--n400:#4E5788;--n500:#7E86AC;--n600:#9AA1C4;--n700:#B6BCDA;--n800:#D4D8EC;--n900:#ECEEF9;
    --bg:#060A1A;--bg-2:#0A0F26;--surface:#0F1738;--surface-2:#141D42;--surface-3:#1B2550;--hover:rgba(94,126,234,.10);
    --glass:rgba(16,23,56,.66);--glass-bd:rgba(255,255,255,.09);--glass-hi:rgba(255,255,255,.05);
    --ink:#ECEEF9;--ink-2:#B6BCDA;--muted:#7E86AC;--faint:#4E5788;--border:#232E5C;--border-2:#1A234A;--line:#1A234A;
    --ok:#35C88A;--ok-bg:#0E2A1E;--ok-bd:#1D4E37;--ok-ink:#5FDCA0;
    --warn:#E0B45A;--warn-bg:#2A2314;--warn-bd:#524218;--warn-ink:#EDC97A;
    --bad:#F26169;--bad-bg:#2A1518;--bad-bd:#54282C;--bad-ink:#F5878D;
    --info:#5AA0EA;--info-bg:#0E2236;--info-bd:#1E466A;--info-ink:#84B6F0;
    --neutral:#7E86AC;--neutral-bg:#141B36;--neutral-bd:#26305A;--neutral-ink:#9AA1C4;
    --side-bg:#1A1E6E;--side-bg-2:#101347;--side-bd:rgba(255,255,255,.10);--side-tx:#A9B0E4;--side-hi:#FFFFFF;
    --side-pill-1:#8B5CF6;--side-pill-2:#6D3EF0;--side-active:#CDBCFF;
    --sh-xs:0 1px 2px rgba(0,0,0,.4);--sh-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
    --sh-md:0 6px 16px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);--sh-lg:0 16px 40px rgba(0,0,0,.6),0 6px 12px rgba(0,0,0,.4);
    --sh-xl:0 32px 64px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.5);--sh-glow:0 8px 28px var(--accent-glow);--sh-inset:inset 0 1px 0 var(--glass-hi);
  }
}

/* O'lchamlar — temaga bog'liq emas */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --r-xs:6px; --r-sm:9px; --r:12px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --side-w:244px; --top-h:60px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:120ms var(--ease); --t:200ms var(--ease); --t-slow:340ms var(--ease-out);
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --parent-accent:#B07A3E; --child-accent:#3E9B54;
}

/* ══ 2. MOSLIK + BOOTSTRAP ══════════════════════════════════════════════ */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --brand:var(--accent); --brand-dark:var(--accent-ink); --brand-light:var(--accent-weak);
  --card-bg:var(--surface); --border-color:var(--border);
  --text-muted:var(--muted); --danger:var(--bad); --warning:var(--warn); --success:var(--ok);
  --radius:var(--r); --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md);

  --bs-body-bg:var(--bg); --bs-body-color:var(--ink);
  --bs-border-color:var(--border); --bs-border-radius:var(--r); --bs-border-radius-sm:var(--r-sm); --bs-border-radius-lg:var(--r-lg);
  --bs-secondary-bg:var(--surface-2); --bs-tertiary-bg:var(--surface-3);
  --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--muted); --bs-heading-color:var(--ink);
  --bs-link-color:var(--accent); --bs-link-hover-color:var(--accent-2);
}

/* ══ 3. KEYFRAME ANIMATSIYALARI ═════════════════════════════════════════ */
@keyframes fade-up   { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes fade-in   { from{opacity:0} to{opacity:1} }
@keyframes scale-in  { from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none} }
@keyframes slide-left{ from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none} }
@keyframes shimmer   { 100%{ transform:translateX(100%) } }
@keyframes ripple    { to{ transform:scale(2.6); opacity:0 } }
@keyframes spin      { to{ transform:rotate(360deg) } }
@keyframes float     { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes pulse-dot { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ══ 4. ASOS ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01","calt";
  text-rendering:optimizeLegibility;
}

/* Ambient — juda nozik binafsha aura (Framer ruhi), chalg'itmaydi */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 480px at 100% -8%, var(--accent-glow), transparent 62%),
    radial-gradient(560px 460px at -6% 106%, rgba(45,123,255,.10), transparent 60%);
  opacity:.7;
}
[data-bs-theme="dark"] body::before { opacity:1; }

h1,h2,h3,h4,h5,h6 { font-weight:660; letter-spacing:-.02em; color:var(--ink); line-height:1.25; }
h1 { font-size:1.5rem; letter-spacing:-.03em; }
h2 { font-size:1.2rem; }
h3 { font-size:1.02rem; }
a { text-decoration:none; color:var(--accent); transition:color var(--t-fast); }
a:hover { color:var(--accent-2); }
small,.small { font-size:.8125rem; }
strong,b { font-weight:640; }
.text-muted { color:var(--muted) !important; }
hr { border-color:var(--line); opacity:1; }
code { background:var(--surface-3); color:var(--accent-ink); padding:.12em .42em; border-radius:var(--r-xs); font-size:.85em; font-family:var(--mono); }

.tabular, .table, .stat-card-value, .kanban-col-count, .badge, .lead-card-date,
.timeline-meta, .lead-card-phone, .mono, .count { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); }

::selection { background:var(--accent); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); }

/* Nozik scrollbar */
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--n300); background-clip:content-box; }

.grad-text, .text-gradient {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  [data-reveal] { opacity:1!important; transform:none!important; }
}

/* ══ 5. KARKAS ══════════════════════════════════════════════════════════ */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }

/* ── Sidebar — suzuvchi indigo panel (rasm dizayni) ── */
.app-sidebar {
  background:linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%) !important;
  color:var(--side-tx);
  width:280px;
  border:1px solid var(--side-bd);
}
@media (min-width:992px) {
  .app-sidebar {
    position:fixed; top:14px; left:14px; bottom:14px;
    width:var(--side-w);
    display:flex; flex-direction:column;
    z-index:1030; overflow:hidden;
    border-radius:var(--r-xl);
    box-shadow:0 24px 60px rgba(16,19,71,.40), var(--sh-lg);
  }
  .app-authenticated .app-shell { padding-left:calc(var(--side-w) + 28px); }
}
/* Sidebar ichida nozik binafsha porlash */
.app-sidebar::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 240px at 30% 0%, rgba(139,92,246,.28), transparent 70%);
}
.app-sidebar > * { position:relative; }

.sidebar-brand {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--side-bd); flex:0 0 auto;
}
.brand-link { display:flex; align-items:center; gap:12px; color:#fff; white-space:nowrap; }
.brand-link:hover { color:#fff; }
.brand-shield { width:42px; flex:0 0 42px; display:inline-flex; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.brand-shield svg { width:100%; height:auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.08; }
.brand-name { font-size:1.16rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.brand-sub { margin-top:2px; font-size:.625rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.sidebar-body { flex:1 1 auto; overflow-y:auto; padding:10px; }

/* Guruhlar — ikonkali qatorlar; ochilgani binafsha pill (rasmdagi CRM kabi) */
.nav-group { margin-bottom:4px; }
.nav-group-toggle {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9.5px 12px; background:transparent; border:0; cursor:pointer;
  border-radius:var(--r);
  color:var(--side-tx); font-size:13.5px; font-weight:600; letter-spacing:-.006em;
  transition:background var(--t-fast), color var(--t-fast), box-shadow var(--t);
}
.nav-group-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-group-icon { width:20px; text-align:center; font-size:1.02rem; opacity:.92; }
.nav-group-title { flex:1 1 auto; text-align:left; }
.nav-group-caret {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:.6rem; opacity:1;
  transition:transform var(--t), background var(--t-fast), color var(--t-fast);
}
.nav-group-toggle.collapsed .nav-group-caret { transform:rotate(-90deg); }
.nav-group-toggle:not(.collapsed) {
  background:linear-gradient(95deg, var(--side-pill-1) 0%, var(--side-pill-2) 100%);
  color:#fff;
  box-shadow:0 10px 24px rgba(109,62,240,.38), inset 0 1px 0 rgba(255,255,255,.24);
}
.nav-group-toggle:not(.collapsed) .nav-group-icon { opacity:1; }
.nav-group-toggle:not(.collapsed) .nav-group-caret { background:#fff; color:var(--side-pill-2); }

/* Ichki bandlar — radio-nuqta uslubi (rasmdagi Lidlar kabi) */
.nav-group-items { padding:5px 2px 4px 14px; }
.sidebar-nav .nav-link {
  position:relative; display:flex; align-items:center; gap:12px;
  padding:7.5px 10px; margin:1px 0; border-radius:var(--r-sm);
  color:var(--side-tx); font-size:13.5px; font-weight:500;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.sidebar-nav .nav-link::before {
  content:""; width:9px; height:9px; flex:0 0 9px; border-radius:50%;
  border:1.6px solid rgba(255,255,255,.42); background:transparent;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.sidebar-nav .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link:hover::before { border-color:#fff; }
.sidebar-nav .nav-link:active { transform:scale(.985); }
.sidebar-nav .nav-link.active { background:transparent; color:var(--side-active); font-weight:600; }
.sidebar-nav .nav-link.active::before {
  border-color:var(--side-active); background:var(--side-active);
  box-shadow:0 0 0 3.5px rgba(139,92,246,.22), 0 0 12px rgba(139,92,246,.85);
}
.sidebar-nav .nav-link.disabled { color:rgba(255,255,255,.28); }
.sidebar-nav .nav-link.disabled::before { content:none; }
.sidebar-nav .nav-icon { display:none; } /* rasm dizayni: ikonka o'rniga nuqta */
.sidebar-nav .nav-label { flex:1 1 auto; }
.sidebar-nav .nav-badge { font-size:.64rem; font-weight:700; padding:.16em .5em; }

/* Pastki karta — gradient "promo" uslubi (rasmdagi pastki karta kabi) */
.sidebar-footer { flex:0 0 auto; padding:12px; }
.sidebar-user {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:12px 13px; border-radius:var(--r-md);
  background:
    linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(120deg, var(--side-pill-2), var(--side-bg-2) 85%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Nuqtali to'lqin bezagi (o'ng tomonda) */
.sidebar-user::after {
  content:""; position:absolute; top:-10px; right:-14px; bottom:-10px; width:112px;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.5px);
  background-size:9px 9px; opacity:.45; pointer-events:none;
  -webkit-mask-image:linear-gradient(255deg, #000 20%, transparent 78%);
  mask-image:linear-gradient(255deg, #000 20%, transparent 78%);
}
.sidebar-user-info { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.sidebar-user-name { color:#fff; font-size:.8125rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user-role { color:rgba(255,255,255,.68); font-size:.6875rem; }
.sidebar-user-spark { position:relative; margin-left:auto; color:#fff; opacity:.85; font-size:.9rem; }
.app-sidebar .btn-close { filter:invert(1) grayscale(1) brightness(1.6); }

.avatar-circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  background:var(--grad); color:#fff; font-size:.78rem; font-weight:700;
  box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Topbar — suzuvchi shisha bar ── */
.app-topbar {
  position:sticky; top:0; z-index:1020;
  display:flex; align-items:center; gap:10px;
  height:var(--top-h); padding:0 16px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-bd);
}
@media (min-width:992px) {
  .app-topbar { top:14px; margin:14px 24px 0; border-radius:var(--r-md); box-shadow:var(--sh-sm); }
}
.topbar-search { flex:1 1 auto; max-width:440px; }
.topbar-search .input-group-text { background:transparent; border-color:transparent; border-right:0; color:var(--faint); }
.topbar-search .form-control { background:var(--surface-3); border-color:transparent; border-left:0; color:var(--ink); }
.topbar-search .input-group { border-radius:var(--r-sm); background:var(--surface-3); transition:box-shadow var(--t); }
.topbar-search .input-group:focus-within { box-shadow:0 0 0 3px var(--accent-glow); }
.topbar-search .input-group:focus-within .input-group-text { color:var(--accent); }
.topbar-search .form-control:focus { background:transparent; box-shadow:none; }

.topbar-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:var(--r-sm); font-size:1.05rem; color:var(--ink-2);
  background:transparent; border:1px solid transparent; transition:all var(--t-fast);
}
.btn-icon:hover { color:var(--accent); background:var(--hover); }
.btn-icon:active { transform:scale(.94); }
.topbar-user { display:flex; align-items:center; gap:9px; border-radius:var(--r-sm); padding:4px 11px 4px 4px; background:transparent; border:1px solid transparent; transition:all var(--t-fast); }
.topbar-user:hover { background:var(--hover); }
.topbar-user-info { display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.topbar-user-name { font-size:.8125rem; font-weight:600; }
.topbar-user-role { font-size:.6875rem; color:var(--muted); }

#themeToggle .bi-sun-fill { display:none; }
[data-bs-theme="dark"] #themeToggle .bi-sun-fill { display:inline-block; }
[data-bs-theme="dark"] #themeToggle .bi-moon-stars { display:none; }

.notifications-dropdown { width:366px; max-height:480px; overflow-y:auto; }
.notification-item { display:flex; flex-direction:column; gap:2px; white-space:normal; padding:.6rem 1rem; border-left:2px solid transparent; border-radius:0; text-align:left; }
.notification-item.unread { background:var(--grad-soft); border-left-color:var(--accent); }
.notification-title { font-size:.8125rem; font-weight:600; color:var(--ink); }
.notification-text { font-size:.75rem; color:var(--muted); }
.notification-time { font-size:.6875rem; color:var(--faint); }

/* ── Kontent ── */
.app-content { flex:1 1 auto; padding:22px 24px; animation:fade-up .4s var(--ease-out) both; }
@media (max-width:991.98px){ .app-content{ padding:16px; } }
.app-guest .app-content { display:flex; align-items:center; justify-content:center; animation:none; }
.app-footer { padding:16px 24px; color:var(--faint); font-size:.72rem; text-align:center; }

.page-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.page-title { display:flex; align-items:center; gap:12px; margin:0; font-size:1.4rem; font-weight:720; letter-spacing:-.03em; }
.page-title .bi {
  color:#fff; font-size:1rem; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-sm); background:var(--grad); box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.page-actions { display:flex; flex-wrap:wrap; gap:8px; }
.app-messages .alert { animation:slide-left .34s var(--ease-out) both; }

/* Breadcrumb */
.breadcrumb { font-size:.8125rem; margin:0 0 4px; --bs-breadcrumb-divider-color:var(--faint); }
.breadcrumb-item, .breadcrumb-item a { color:var(--muted); }
.breadcrumb-item.active { color:var(--ink-2); font-weight:550; }
.breadcrumb-item + .breadcrumb-item::before { color:var(--faint); }

/* ══ 6. KOMPONENTLAR ════════════════════════════════════════════════════ */

/* ── Tugmalar (ripple bilan) ── */
.btn {
  --bs-btn-font-weight:600; --bs-btn-border-radius:var(--r-sm);
  position:relative; overflow:hidden; letter-spacing:-.006em;
  transition:transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn-sm { --bs-btn-border-radius:var(--r-xs); }
.btn-lg { --bs-btn-border-radius:var(--r); }
.btn .ripple {
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:scale(0); animation:ripple .6s var(--ease-out); pointer-events:none;
}
.btn-primary {
  --bs-btn-bg:transparent; --bs-btn-border-color:transparent;
  background:var(--grad); border:0; color:#fff; box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover { color:#fff; transform:translateY(-1px); box-shadow:0 12px 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary:active, .btn-primary:focus-visible { color:#fff; }
.btn-outline-primary {
  --bs-btn-color:var(--accent); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--accent-weak); --bs-btn-hover-border-color:var(--accent); --bs-btn-hover-color:var(--accent-2);
  --bs-btn-active-bg:var(--accent-weak); --bs-btn-active-color:var(--accent-2);
  background:var(--surface);
}
.btn-light, .btn-outline-secondary, .btn-secondary {
  --bs-btn-bg:var(--surface); --bs-btn-color:var(--ink-2); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--surface-3); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--n300);
  --bs-btn-active-bg:var(--surface-3); --bs-btn-active-color:var(--ink);
  box-shadow:var(--sh-xs);
}
.btn-light:hover, .btn-outline-secondary:hover, .btn-secondary:hover { box-shadow:var(--sh-sm); }
.btn-danger  { --bs-btn-bg:var(--bad);  --bs-btn-border-color:var(--bad);  --bs-btn-hover-bg:var(--bad-ink);  --bs-btn-hover-border-color:var(--bad-ink); box-shadow:0 6px 16px rgba(226,55,68,.24); }
.btn-success { --bs-btn-bg:var(--ok);   --bs-btn-border-color:var(--ok);   --bs-btn-hover-bg:var(--ok-ink);   --bs-btn-hover-border-color:var(--ok-ink); }
.btn-warning { --bs-btn-bg:var(--warn); --bs-btn-border-color:var(--warn); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }
.text-brand { color:var(--accent) !important; }

/* ── Kartalar ── */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-header { background:transparent; border-bottom:1px solid var(--line); font-weight:640; padding:.9rem 1.15rem; color:var(--ink); }
.card-body { padding:1.15rem; }
/* Glass variant — .card.glass */
.card.glass, .glass-card {
  background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-color:var(--glass-bd); box-shadow:var(--sh-md), var(--sh-inset);
}
.table-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden;
}

/* ── Formalar (fokus animatsiyasi) ── */
.form-label { font-weight:600; font-size:.8125rem; color:var(--ink-2); margin-bottom:.35rem; }
.form-control, .form-select {
  background:var(--surface); border-color:var(--border); border-radius:var(--r-sm); color:var(--ink);
  padding:.5rem .8rem; transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.form-control-sm, .form-select-sm { border-radius:var(--r-xs); padding:.34rem .6rem; }
.form-control::placeholder { color:var(--faint); }
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color:var(--n300); }
.form-control:focus, .form-select:focus { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); color:var(--ink); }
.form-control:disabled, .form-select:disabled { background:var(--surface-3); color:var(--muted); }
.input-group-text { background:var(--surface-3); border-color:var(--border); color:var(--muted); }
.form-check-input { background-color:var(--surface); border-color:var(--n300); transition:background var(--t-fast), border var(--t-fast); }
.form-check-input:checked { background:var(--accent); border-color:var(--accent); }
.form-check-input:focus { box-shadow:0 0 0 4px var(--accent-glow); border-color:var(--accent); }
.form-switch .form-check-input { width:2.4em; }
.form-text { color:var(--muted); font-size:.75rem; }
.invalid-feedback { color:var(--bad); font-size:.75rem; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color:var(--bad); }

/* ── Badge / chip ── */
.badge {
  font-weight:640; font-size:.6875rem; letter-spacing:.01em;
  padding:.36em .72em; border-radius:var(--r-full); line-height:1.4; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:.3em;
}
.badge .bi { font-size:.95em; }
.badge.text-bg-primary   { background:var(--accent-weak) !important;  color:var(--accent-ink) !important;  border-color:var(--accent-glow); }
.badge.text-bg-success   { background:var(--ok-bg) !important;   color:var(--ok-ink) !important;   border-color:var(--ok-bd); }
.badge.text-bg-danger    { background:var(--bad-bg) !important;  color:var(--bad-ink) !important;  border-color:var(--bad-bd); }
.badge.text-bg-warning   { background:var(--warn-bg) !important; color:var(--warn-ink) !important; border-color:var(--warn-bd); }
.badge.text-bg-info      { background:var(--info-bg) !important; color:var(--info-ink) !important; border-color:var(--info-bd); }
.badge.text-bg-secondary { background:var(--neutral-bg) !important; color:var(--neutral-ink) !important; border-color:var(--neutral-bd); }
.badge.text-bg-light     { background:var(--surface-3) !important; color:var(--muted) !important; border-color:var(--border) !important; }
.badge.border { border:1px solid var(--border) !important; }
.source-badge { font-weight:600; }
/* Status badge'da nozik nuqta */
.badge.text-bg-primary::before, .badge.text-bg-success::before, .badge.text-bg-danger::before,
.badge.text-bg-warning::before, .badge.text-bg-info::before {
  content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;
}
.badge.text-bg-light::before, .badge.border::before, .source-badge::before { content:none; }

.nav-badge.text-bg-primary { background:var(--accent) !important; color:#fff !important; }
.nav-badge.text-bg-warning { background:var(--warn) !important; color:#fff !important; }
.nav-badge.text-bg-danger  { background:var(--bad) !important; color:#fff !important; }
.nav-badge::before { content:none !important; }
.app-topbar .badge.text-bg-danger,
.notifications-dropdown .dropdown-header .badge.text-bg-danger { background:var(--bad) !important; color:#fff !important; }
.app-topbar .badge.text-bg-danger::before { content:none; }

/* ── Alert'lar ── */
.alert { border-radius:var(--r); border-width:1px; padding:.75rem 1rem; box-shadow:var(--sh-xs); display:flex; align-items:flex-start; gap:.6rem; }
.alert-success { background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-ink); }
.alert-danger  { background:var(--bad-bg); border-color:var(--bad-bd); color:var(--bad-ink); }
.alert-warning { background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-ink); }
.alert-info    { background:var(--info-bg); border-color:var(--info-bd); color:var(--info-ink); }
.alert-secondary { background:var(--neutral-bg); border-color:var(--neutral-bd); color:var(--neutral-ink); }
.alert .btn-close { opacity:.5; }
[data-bs-theme="dark"] .alert .btn-close { filter:invert(1) grayscale(1); }

/* ── Dropdown (animatsiya) ── */
.dropdown-menu {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-lg); padding:.35rem;
}
.dropdown-menu.show { animation:scale-in .16s var(--ease-out) both; transform-origin:top; }
.dropdown-item { border-radius:var(--r-xs); padding:.48rem .7rem; color:var(--ink-2); transition:background var(--t-fast), color var(--t-fast); }
.dropdown-item:hover, .dropdown-item:focus { background:var(--hover); color:var(--ink); }
.dropdown-item .bi { width:18px; color:var(--muted); }
.dropdown-item.text-danger { color:var(--bad) !important; }
.dropdown-item.text-danger .bi { color:inherit; }
.dropdown-header { font-size:.72rem; font-weight:700; color:var(--ink-2); }
.dropdown-divider { border-color:var(--line); }
.dropdown-item-text { color:var(--ink-2); }

/* ── Modal / offcanvas (drawer) ── */
.modal-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-xl); }
.modal-header, .modal-footer { border-color:var(--line); }
.modal-backdrop.show { opacity:.5; backdrop-filter:blur(3px); }
.modal.fade .modal-dialog { transition:transform .28s var(--ease-out), opacity .28s; }
.offcanvas { background:var(--surface); color:var(--ink); border-color:var(--border); }
.offcanvas.app-sidebar { background:linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%) !important; }
.offcanvas-header { border-bottom:1px solid var(--line); }

/* ── Tabs ── */
.nav-tabs { border-bottom:1px solid var(--line); gap:2px; }
.nav-tabs .nav-link { border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; border-radius:0; padding:.55rem .9rem; transition:color var(--t-fast), border-color var(--t-fast); }
.nav-tabs .nav-link:hover { color:var(--ink); border-bottom-color:var(--n300); }
.nav-tabs .nav-link.active { color:var(--accent); background:transparent; border-bottom-color:var(--accent); }
.nav-pills .nav-link { color:var(--muted); border-radius:var(--r-sm); font-weight:600; }
.nav-pills .nav-link.active { background:var(--grad); color:#fff; box-shadow:var(--sh-glow); }
.tab-pane.active { animation:fade-up .3s var(--ease-out) both; }

/* ── Accordion ── */
.accordion { --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--border); --bs-accordion-border-radius:var(--r); }
.accordion-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r)!important; margin-bottom:8px; overflow:hidden; box-shadow:var(--sh-xs); }
.accordion-button { background:var(--surface); color:var(--ink); font-weight:600; border-radius:var(--r)!important; }
.accordion-button:not(.collapsed) { background:var(--accent-weak); color:var(--accent-ink); box-shadow:none; }
.accordion-button:focus { box-shadow:0 0 0 4px var(--accent-glow); border-color:var(--accent); }
.accordion-button::after { transition:transform var(--t); }

/* ── Pagination ── */
.app-pagination { margin-top:18px; }
.pagination {
  --bs-pagination-bg:var(--surface); --bs-pagination-color:var(--ink-2);
  --bs-pagination-border-color:var(--border);
  --bs-pagination-hover-bg:var(--hover); --bs-pagination-hover-color:var(--accent);
  --bs-pagination-active-bg:var(--accent); --bs-pagination-active-border-color:var(--accent);
  --bs-pagination-disabled-bg:var(--surface-2); --bs-pagination-disabled-color:var(--faint);
  --bs-pagination-border-radius:var(--r-sm); gap:4px;
}
.page-link { font-weight:600; transition:all var(--t-fast); }
.page-item.active .page-link { box-shadow:var(--sh-glow); }

/* ── Progress ── */
.progress { background:var(--surface-3); border-radius:var(--r-full); height:.5rem; overflow:hidden; }
.progress-bar { background:var(--grad); border-radius:var(--r-full); transition:width .8s var(--ease-out); }

/* ── Tooltip ── */
.tooltip { --bs-tooltip-bg:var(--n800); --bs-tooltip-color:var(--n0); --bs-tooltip-border-radius:var(--r-xs); font-size:.75rem; }
.tooltip .tooltip-inner { box-shadow:var(--sh-md); font-weight:500; padding:.4rem .6rem; }

/* ── List group ── */
.list-group { --bs-list-group-bg:transparent; --bs-list-group-border-color:var(--line); --bs-list-group-color:var(--ink); }
.list-group-item { background:transparent; border-color:var(--line); color:var(--ink); transition:background var(--t-fast); }
.list-group-item-action:hover { background:var(--hover); color:var(--ink); }

/* ══ 7. DATA TABLE ══════════════════════════════════════════════════════ */
.table {
  --bs-table-bg:transparent; --bs-table-color:var(--ink);
  --bs-table-border-color:var(--line);
  --bs-table-hover-bg:var(--hover); --bs-table-hover-color:var(--ink);
  --bs-table-striped-bg:var(--surface-2);
  margin-bottom:0;
}
.table > thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-2);
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:700; white-space:nowrap;
  border-bottom:1px solid var(--border); padding:.72rem 1rem;
}
.table > thead th.sortable { cursor:pointer; user-select:none; transition:color var(--t-fast); }
.table > thead th.sortable:hover { color:var(--accent); }
.table > thead th.sortable::after { content:"\F282"; font-family:"bootstrap-icons"; font-size:.9em; opacity:.35; margin-left:.35em; }
.table > thead th.sortable.asc::after { content:"\F286"; opacity:1; color:var(--accent); }
.table > thead th.sortable.desc::after { content:"\F282"; opacity:1; color:var(--accent); }
.table > tbody td { padding:.78rem 1rem; vertical-align:middle; border-color:var(--line); }
.table > tbody tr { transition:background var(--t-fast); box-shadow:inset 3px 0 0 transparent; }
.table > tbody tr:last-child td { border-bottom:0; }
.table-hover > tbody tr:hover { transform:none; }
/* Rang-kodli qatorlar (badge rangiga qarab) */
.table > tbody > tr:has(.badge.text-bg-primary) { box-shadow:inset 3px 0 0 var(--accent); }
.table > tbody > tr:has(.badge.text-bg-info)    { box-shadow:inset 3px 0 0 var(--info); }
.table > tbody > tr:has(.badge.text-bg-success) { box-shadow:inset 3px 0 0 var(--ok); }
.table > tbody > tr:has(.badge.text-bg-warning) { box-shadow:inset 3px 0 0 var(--warn); }
.table > tbody > tr:has(.badge.text-bg-danger)  { box-shadow:inset 3px 0 0 var(--bad); }
/* Sticky birinchi ustun (kerak joyda .table-sticky-1) */
.table-sticky-1 th:first-child, .table-sticky-1 td:first-child {
  position:sticky; left:0; z-index:1; background:var(--surface);
}
.table-sticky-1 thead th:first-child { z-index:3; background:var(--surface-2); }

/* ══ 8. MODULLAR ════════════════════════════════════════════════════════ */

/* ── Dashboard hero — indigo banner (sidebar bilan uyg'un) ── */
.dash-hero {
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-bottom:18px;
  color:#fff;
  background:
    radial-gradient(520px 280px at 85% -30%, rgba(139,92,246,.45), transparent 65%),
    linear-gradient(120deg, var(--side-bg) 0%, var(--side-bg-2) 70%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 48px rgba(16,19,71,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
/* Nuqtali to'lqin bezagi (o'ng tomonda, sidebar kartasi kabi) */
.dash-hero::after {
  content:""; position:absolute; top:-20px; right:-20px; bottom:-20px; width:46%;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px);
  background-size:10px 10px; opacity:.32; pointer-events:none;
  -webkit-mask-image:linear-gradient(250deg, #000 8%, transparent 70%);
  mask-image:linear-gradient(250deg, #000 8%, transparent 70%);
}
.dash-hero-inner { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.dash-hero-text { flex:1 1 300px; min-width:0; }
.dash-hero-hello { margin:0 0 5px; font-size:1.35rem; font-weight:760; letter-spacing:-.03em; color:#fff; }
.dash-hero-sub { margin:0; color:rgba(255,255,255,.72); font-size:.84rem; }
.dash-hero-sub strong { color:#fff; font-weight:700; }
.dash-hero-stats { display:flex; gap:10px; flex-wrap:wrap; }
.dash-hero-pill {
  display:flex; flex-direction:column; gap:3px; min-width:88px;
  padding:10px 14px; border-radius:var(--r);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.dash-hero-pill b { font-size:1.15rem; font-weight:780; letter-spacing:-.02em; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.dash-hero-pill span { font-size:.65rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.dash-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-hero-light {
  display:inline-flex; align-items:center; gap:7px;
  padding:.55rem 1rem; border-radius:var(--r-sm); border:0;
  background:#fff; color:#0A1A5C; font-weight:700; font-size:.85rem;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform var(--t-fast), box-shadow var(--t);
}
.btn-hero-light:hover { transform:translateY(-1px); color:#0A1A5C; box-shadow:0 14px 28px rgba(0,0,0,.3); }
.btn-hero-ghost {
  display:inline-flex; align-items:center; gap:7px;
  padding:.55rem 1rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-weight:600; font-size:.85rem;
  transition:background var(--t-fast), transform var(--t-fast);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); color:#fff; transform:translateY(-1px); }
/* Hero ogohlantirish chiplari (SLA, taqsimlanmagan) */
.dash-hero-alerts { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.dash-alert-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:.42rem .85rem; border-radius:var(--r-full);
  font-size:.78rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2);
  transition:background var(--t-fast), transform var(--t-fast);
}
.dash-alert-chip:hover { background:rgba(255,255,255,.22); color:#fff; transform:translateY(-1px); }
.dash-alert-chip.is-danger { background:rgba(214,69,63,.38); border-color:rgba(255,177,173,.4); }
.dash-alert-chip.is-warn { background:rgba(196,159,91,.34); border-color:rgba(238,214,166,.4); }
.dash-alert-chip .bi { font-size:.9rem; }
@media (max-width:575.98px) {
  .dash-hero { padding:18px; }
  .dash-hero-hello { font-size:1.12rem; }
}

/* ── Karta sarlavhasi — gradient ikonka chipi ── */
.card-head-title { display:flex; align-items:center; gap:9px; margin:0; }
.card-head-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; font-size:.85rem; color:#fff;
  background:var(--grad); box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Voronka chiziqlari — bosqich toniga qarab ── */
.progress-bar.tone-primary { background:var(--grad); }
.progress-bar.tone-info    { background:linear-gradient(90deg, #2F6FB5, #5AA0EA); }
.progress-bar.tone-success { background:linear-gradient(90deg, #2E9E6B, #5FDCA0); }
.progress-bar.tone-warning { background:linear-gradient(90deg, #B8860B, #E0B45A); }
.progress-bar.tone-danger  { background:linear-gradient(90deg, #D6453F, #F26169); }

/* ── Stat kartochkalari (premium KPI) ── */
.stat-card {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:14px; align-items:center;
  padding:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); color:inherit;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat-card::after {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--side-pill-1)); opacity:0; transition:opacity var(--t);
}
a.stat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--accent-glow); color:inherit; }
a.stat-card:hover::after { opacity:1; }
.stat-card-icon {
  grid-row:1 / 3; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r); font-size:1.35rem; color:#fff;
  background:var(--grad); box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.stat-card-icon.text-bg-primary   { background:linear-gradient(135deg,#1E3FA8,#0A1A5C) !important; color:#fff !important; }
.stat-card-icon.text-bg-info      { background:linear-gradient(135deg,#3B82C4,#A8C8E8) !important; color:#fff !important; }
.stat-card-icon.text-bg-success   { background:linear-gradient(135deg,#2E9E6B,#8FB896) !important; color:#fff !important; }
.stat-card-icon.text-bg-danger    { background:linear-gradient(135deg,#D6453F,#E8638A) !important; color:#fff !important; }
.stat-card-icon.text-bg-warning   { background:linear-gradient(135deg,#C49F5B,#DEC48A) !important; color:#fff !important; }
.stat-card-icon.text-bg-secondary { background:linear-gradient(135deg,#6F7286,#A7A192) !important; color:#fff !important; }
.stat-card-value {
  grid-column:2; align-self:end; font-size:1.8rem; font-weight:780; line-height:1; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.stat-card-label { grid-column:2; align-self:start; font-size:.72rem; color:var(--muted); font-weight:550; text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

/* ── Lid kartasi ── */
.lead-card {
  margin-bottom:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.lead-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--accent-glow); }
.lead-card .card-body { padding:14px; }
.lead-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
.lead-card-name { font-weight:660; color:var(--ink); font-size:.9375rem; letter-spacing:-.01em; }
.lead-card-name:hover { color:var(--accent); }
.lead-card-row { display:flex; align-items:center; gap:7px; margin-bottom:6px; font-size:.8125rem; color:var(--ink-2); }
.lead-card-row .bi { color:var(--faint); }
.lead-card-phone { color:var(--accent); font-weight:600; font-family:var(--mono); font-size:.78rem; }
.lead-card-meta { flex-wrap:wrap; gap:5px; }
.lead-card-children, .lead-card-operator { color:var(--muted); }
.lead-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.lead-card-date { font-size:.72rem; color:var(--faint); }
.lead-card-sla { margin-top:8px; font-size:.72rem; font-weight:600; color:var(--bad); display:flex; align-items:center; gap:5px; }
.lead-card-sla .bi { animation:pulse-dot 1.6s ease-in-out infinite; }
.sla-risk { border-left:3px solid var(--bad) !important; }

/* ── Kanban ── */
.kanban-board { display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding:2px 2px 14px; }
.kanban-col {
  flex:0 0 292px; max-width:292px; display:flex; flex-direction:column;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  max-height:calc(100vh - var(--top-h) - 150px);
}
.kanban-col-head {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; background:var(--surface); border-bottom:1px solid var(--line);
  font-size:.72rem; font-weight:720; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2);
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.kanban-col-head::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0; background:var(--neutral); }
.kanban-col[data-stage="to_come"]    .kanban-col-head::before { background:var(--grad); }
.kanban-col[data-stage="no_show"]    .kanban-col-head::before { background:var(--warn); }
.kanban-col[data-stage="ready"]      .kanban-col-head::before { background:var(--info); }
.kanban-col[data-stage="contracted"] .kanban-col-head::before { background:var(--ok); }
.kanban-col[data-stage="problem"]    .kanban-col-head::before { background:var(--bad); }
.kanban-col-count { background:var(--surface-3); border-radius:var(--r-full); padding:.1rem .55rem; font-size:.6875rem; font-weight:700; color:var(--muted); }
.kanban-col-body { flex:1 1 auto; overflow-y:auto; padding:11px; min-height:100px; }
.kanban-col.drag-over { outline:2px dashed var(--accent); outline-offset:-3px; background:var(--accent-weak); }
.kanban-col.drop-forbidden { outline:2px dashed var(--bad); outline-offset:-3px; background:var(--bad-bg); }
.kanban-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  margin-bottom:10px; padding:12px; cursor:grab; box-shadow:var(--sh-xs); transition:all var(--t);
}
.kanban-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--accent-glow); }
.kanban-card:active { cursor:grabbing; }
.kanban-card.dragging { opacity:.5; box-shadow:var(--sh-lg); transform:rotate(1.5deg); }
.kanban-card .lead-card { margin-bottom:0; border:0; background:transparent; box-shadow:none; }
.kanban-card .lead-card:hover { transform:none; box-shadow:none; }

/* ── Lid formasi bloklari (E2/E3) ── */
.parent-block, .child-block {
  position:relative; border-radius:var(--r); padding:16px 16px 16px 20px; margin-bottom:16px;
  background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--neutral);
}
.parent-block { border-left-color:var(--parent-accent); }
.child-block  { border-left-color:var(--child-accent); }
.parent-block .form-control, .parent-block .form-select,
.child-block .form-control, .child-block .form-select { background:var(--surface); }
.block-title { display:flex; align-items:center; gap:8px; margin-bottom:13px; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }
.parent-block .block-title .bi { color:var(--parent-accent); }
.child-block .block-title .bi { color:var(--child-accent); }
.formset-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; animation:fade-up .3s var(--ease-out) both; }
.formset-row.d-none { display:none !important; }

/* ── Timeline (E5 «Barcha Tarix») ── */
.timeline { position:relative; margin:0; padding:0 0 0 26px; list-style:none; }
.timeline::before { content:""; position:absolute; top:5px; bottom:5px; left:6px; width:2px; background:linear-gradient(180deg, var(--border), transparent); }
.timeline-item { position:relative; padding-bottom:18px; animation:fade-up .35s var(--ease-out) both; }
.timeline-item::before {
  content:""; position:absolute; top:4px; left:-25px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.timeline-item.is-danger::before  { border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg); }
.timeline-item.is-success::before { border-color:var(--ok);  box-shadow:0 0 0 3px var(--ok-bg); }
.timeline-item.is-warning::before { border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-bg); }
.timeline-text { font-size:.8125rem; color:var(--ink-2); }
.timeline-meta { font-size:.6875rem; color:var(--faint); }

/* ── Chart (inline SVG uchun) ── */
.chart-area { width:100%; display:block; }
.chart-grid line { stroke:var(--line); stroke-width:1; }
.chart-axis { fill:var(--faint); font-size:10px; font-family:var(--mono); }

/* ══ 9. HOLATLAR + UTILITALAR ═══════════════════════════════════════════ */

/* Scroll reveal — JS `.revealed` qo'shadi */
[data-reveal] { opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
[data-reveal].revealed { opacity:1; transform:none; }

/* Skeleton loader */
.skeleton { position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-xs); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--glass-hi), transparent); animation:shimmer 1.4s infinite; }
.skeleton-text { height:.75em; margin:.35em 0; border-radius:var(--r-xs); }
.skeleton-line { height:14px; border-radius:var(--r-xs); }
.skeleton-circle { border-radius:50%; }

/* Spinner */
.spinner-ring { display:inline-block; width:20px; height:20px; border:2.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }

/* Empty state */
.empty-state { padding:52px 16px; text-align:center; color:var(--muted); animation:fade-up .4s var(--ease-out) both; }
.empty-state-icon {
  display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px;
  margin-bottom:16px; border-radius:20px; background:var(--grad-soft); color:var(--accent); font-size:1.7rem;
  box-shadow:var(--sh-sm);
}
.empty-state-title { font-weight:700; font-size:.98rem; color:var(--ink-2); margin-bottom:5px; }
.empty-state-text { font-size:.8125rem; margin-bottom:18px; }

/* Error pages */
.error-page { padding:72px 16px; text-align:center; }
.error-code { font-size:5.5rem; font-weight:800; line-height:1; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.error-title { font-size:1.45rem; font-weight:720; margin:14px 0 8px; }
.error-text { color:var(--muted); margin-bottom:26px; }
.error-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }

/* Toast */
.toast { background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:var(--r); box-shadow:var(--sh-lg); }
.toast.showing, .toast.show { animation:slide-left .32s var(--ease-out) both; }

/* Utility */
.floating { animation:float 4s ease-in-out infinite; }
.glass { background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); }
.hover-lift { transition:transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }

/* ══ 10. PRINT ══════════════════════════════════════════════════════════ */
@media print {
  body::before { display:none; }
  .app-sidebar, .app-topbar, .app-footer, .page-actions, .app-pagination,
  .toast-container, .btn, .alert-dismissible .btn-close { display:none !important; }
  .app-shell { padding-left:0 !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  .app-content { animation:none; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .card, .table-card, .kanban-col, .stat-card { border:1px solid #999 !important; box-shadow:none !important; backdrop-filter:none !important; break-inside:avoid; }
  .table > thead th { position:static; background:#eee !important; color:#000 !important; }
  .stat-card-value, .error-code { -webkit-text-fill-color:#000; color:#000 !important; }
  a { color:#000 !important; }
  .parent-block, .child-block { background:#fff !important; border:1px solid #999 !important; }
}