/* ============================================================
   Dr Zulayho CRM - Main Stylesheet v4.0
   Professional CRM kod negizi
   ============================================================ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {
  /* Brand - HEAD_WEB electric blue aksent (aynan head-design-handoff) */
  --primary: #0029FF;
  --primary-700: #0020CC;
  --primary-900: #0B1330;
  --primary-soft: #EBEEFF;
  --primary-glow: rgba(0, 41, 255, .15);

  /* Accents - HEAD semantik */
  --coral: #FF2D2D;
  --coral-soft: #FFECEC;
  --coral-700: #DC2626;   /* coral dark enough as TEXT on white (4.83:1) */
  --amber: #FFD60A;
  --amber-soft: #FFFBE5;
  --amber-900: #92400E;   /* amber dark enough as TEXT on white (≥4.5:1) */
  --success: #19E07A;
  --success-soft: #E6FBF0;
  --success-700: #047857;  /* success dark enough as TEXT on white (5.49:1) */
  --info: #3D5BFF;
  --info-soft: #EBEEFF;
  --purple: #3D5BFF;
  --purple-soft: #EBEEFF;
  --pink: #2A4AFF;

  /* ── THEME-04: semantic soft-chip scale (theme-aware). Light values = the exact
     inline pastel hex they replace, so light mode is unchanged. Dark values are
     overridden below. Kills the inline pastel hex + the [style*] band-aids. ── */
  --warn-bg: #FEF3C7;   --warn-bg-2: #FFFBEB;   --warn-ink: #92400E;   --warn-line: #FDE68A;
  --danger-bg: #FEE2E2; --danger-bg-2: #FEF2F2; --danger-ink: #991B1B; --danger-line: #FECACA;
  --ok-bg: #D1FAE5;     --ok-bg-2: #ECFDF5;     --ok-ink: #065F46;     --ok-line: #A7F3D0;
  --info-bg: #DBEAFE;   --info-bg-2: #EFF6FF;   --info-ink: #1E40AF;   --info-line: #BFDBFE;
  --role-bg: #F3E8FF;   --role-bg-2: #FAF5FF;   --role-ink: #7C3AED;   --role-line: #E9D5FF;
  /* brand text-inks: brand blue as TEXT (fills keep --primary/--purple). Dark → bright. */
  --primary-ink: #0020CC;  --purple-ink: #3D5BFF;
  --coral-ink: #DC2626;   /* coral as TEXT (fills keep --coral). Light 4.83:1, dark bright */

  /* Neutral - HEAD (cool, oq kanvas) */
  --text: #0A0B0D;
  --text-2: #4A4F59;
  --muted: #5B6270;   /* A11Y-06: ≥4.5:1 on #FFFFFF (6.13:1) AND on --bg #F3F5F9 (5.51:1) */
  --muted-2: #B0B6C0;
  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface-2: #F3F5F9;
  --skeleton-mid: #E2E8F0;   /* THEME-01: skeleton shimmer mid-stop (token, dark-overridable) */
  --border: #E6E8EC;
  --border-soft: #F0F2F5;
  --border-strong: #D7DAE1;
  --dark: #0B1330;
  --dark-2: #11214A;
  /* Doim to'q fonda turadigan matn uchun (--dark chipi). --primary-ink dark
     mavzuda o'zgaradi, shu sabab bu yerda ishlamaydi: yorug' mavzuda TV-navbat
     raqami 1.81:1 edi. Bu token hech qachon flip qilinmaydi (7.9:1). */
  --on-dark-ink: #8FA6FF;

  /* Effects - HEAD (cool soyalar, navy glow) */
  --shadow-xs: 0 1px 2px rgba(15, 26, 60, .04);
  --shadow-sm: 0 1px 2px rgba(15, 26, 60, .05);
  --shadow: 0 4px 12px rgba(15, 26, 60, .06);
  --shadow-md: 0 8px 20px rgba(15, 26, 60, .08);
  --shadow-lg: 0 12px 32px rgba(0, 41, 255, .14);
  --shadow-xl: 0 24px 60px rgba(11, 19, 48, .18);

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radii - yumshoqroq (ZULAYHO_WEB) */
  --r-1: 5px;
  --r-2: 7px;
  --r-3: 10px;
  --r-4: 13px;
  --r-5: 16px;
  --r-6: 22px;
  --r-full: 999px;

  /* Typography - ZULAYHO_WEB (Space Grotesk / Hanken Grotesk / Space Mono) */
  --ff-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ff-display: 'Space Grotesk', 'Hanken Grotesk', sans-serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;

  /* Transitions */
  --t-fast: .15s ease;
  --t: .25s ease;
  --t-slow: .4s ease;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;
}

/* ── 1b. DARK THEME (faqat token-override, komponentlarga tegilmaydi) ── */
[data-theme="dark"] {
  --primary-soft: rgba(0, 90, 255, .16);
  --primary-glow: rgba(61, 91, 255, .25);

  --coral-soft: rgba(255, 45, 45, .14);
  --amber-soft: rgba(255, 214, 10, .12);
  --success-soft: rgba(25, 224, 122, .12);
  --info-soft: rgba(61, 91, 255, .16);
  --purple-soft: rgba(61, 91, 255, .16);
  --pink: #5A74FF;

  --text: #F2F4F8;
  --text-2: #C3C9D6;
  --muted: #8B93A3;
  --muted-2: #5C6472;
  --bg: #12141A;
  --surface: #1B1E27;
  --surface-2: #232733;
  --skeleton-mid: #2A2E3A;   /* THEME-01: skeleton mid-stop in dark */
  --border: #2A2E3A;
  --border-soft: #232733;
  --border-strong: #353B4A;
  --dark: #060913;
  --dark-2: #0B1330;

  /* THEME-04: semantic soft-chip scale in dark - translucent accent bg + bright
     accent ink (every ink/bg pair verified ≥7.3:1, ink-on-surface ≥8.7:1). */
  --warn-bg: rgba(245,158,11,.16);   --warn-bg-2: rgba(245,158,11,.10);   --warn-ink: #FBBF24;   --warn-line: rgba(245,158,11,.32);
  --danger-bg: rgba(239,68,68,.16);  --danger-bg-2: rgba(239,68,68,.10);  --danger-ink: #FCA5A5; --danger-line: rgba(239,68,68,.32);
  --ok-bg: rgba(16,185,129,.16);     --ok-bg-2: rgba(16,185,129,.10);     --ok-ink: #6EE7B7;     --ok-line: rgba(16,185,129,.32);
  --info-bg: rgba(59,130,246,.18);   --info-bg-2: rgba(59,130,246,.10);   --info-ink: #93C5FD;   --info-line: rgba(59,130,246,.34);
  --role-bg: rgba(139,92,246,.18);   --role-bg-2: rgba(139,92,246,.10);   --role-ink: #C4B5FD;   --role-line: rgba(139,92,246,.34);
  --primary-ink: #8FA6FF;  --purple-ink: #8FA6FF;   /* bright brand-blue text on dark (7.2:1) */
  --amber-900: #FBBF24;   /* legacy amber ink used as TEXT - bright in dark (10:1) */
  --coral-ink: #FF8A8A;   /* coral TEXT bright in dark (~7:1) */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, .6);
}

/* THEME-02: soft-bg tags/chips use hard dark hex text that dies on translucent
   dark backgrounds - swap to the light accent hue so it reads over the tint. */
[data-theme="dark"] .seg-active { color: var(--success); }
[data-theme="dark"] .seg-vip { color: var(--amber); }
[data-theme="dark"] .seg-lost { color: var(--coral-ink); }
[data-theme="dark"] .seg-new { color: #8FA6FF; }
[data-theme="dark"] .identity-confidence.high { color: var(--success); }
[data-theme="dark"] .identity-confidence.med { color: var(--amber); }
[data-theme="dark"] .identity-confidence.low { color: var(--coral-ink); }

/* THEME-04: the old [style*="*-soft"] attribute-selector band-aids are gone -
   soft-chip text now uses theme-aware ink tokens (--warn-ink/--info-ink/--ok-ink/
   --danger-ink/--role-ink/--primary-ink/--purple-ink) so dark text flips itself. */
[data-theme="dark"] .nav-item.on,
[data-theme="dark"] .badge,
[data-theme="dark"] .live-pill,
[data-theme="dark"] .id-chip,
[data-theme="dark"] .settings-nav-item.on { color: #8FA6FF; }
/* keep the count badge on solid --primary readable (white on blue) */
[data-theme="dark"] .nav-item.on .badge { color: #fff; }
/* THEME-03b: the *-700 accent text (deliberately dark for light-mode AA) sits
   directly on the dark card surface in dark mode and fails - switch trend /
   required-asterisk text to the BRIGHT accent so it reads on dark. */
[data-theme="dark"] .kpi-trend.up, [data-theme="dark"] .k-foot.up { color: var(--success); }
[data-theme="dark"] .kpi-trend.down, [data-theme="dark"] .k-foot.down { color: #FF8A8A; }
[data-theme="dark"] .label .req { color: #FF8A8A; }
[data-theme="dark"] .error-msg { color: #FF8A8A; }
/* THEME-05: brand-logo PNG o'zi to'q rangli (rasm, CSS emas) - dark sidebar'da
   ko'rinmaydi. Oq monoxromga o'giriladi (brightness 0 → invert). */
[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); opacity: .95; }

/* THEME-06: scrollbar - default oq track dark rejimda yorug' chiziq bo'lib porlaydi.
   Ikkala temada ham token-mos: track shaffof, thumb border-strong. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-2); }

/* ── 2. BASE / RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--ff-sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* Keyboard focus ring (A11Y-01/02): visible ring for keyboard nav on every
   interactive element, incl. click-only rows made focusable in screens.js. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-item:focus-visible, .btn:focus-visible, .contact-row:focus-visible,
.kanban-card:focus-visible, .chat-item:focus-visible, .settings-nav-item:focus-visible,
[role="button"]:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ── 3. SHELL / LAYOUT (to'liq ekran ilova) ──────────────── */
.frame { background: var(--bg); min-height: 100vh; color: var(--text); position: relative; }
.screen { display: block; width: 100%; }
.screen.active { animation: fadeIn var(--t); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* A11Y-09 / PERF-07 / AP-3: respect reduced-motion - kill animations/transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* App: doimiy chap sidebar + main (butun viewport, faqat .main skroll bo'ladi) */
.app { display: grid; grid-template-columns: 252px 1fr; height: 100vh; height: 100dvh; overflow: hidden; }

/* Sidebar */
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: var(--s-4) var(--s-3); display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; position: sticky; top: 0;
  transition: background-color var(--t), border-color var(--t);
}
.side-top { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-4); margin-bottom: var(--s-1); border-bottom: 1px solid var(--border-soft); }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; flex: 1; }
.brand-logo { height: 30px; width: auto; max-width: 100%; display: block; }
.brand-mark { width: 38px; height: 38px; border-radius: 30%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--ff-display); flex-shrink: 0; box-shadow: var(--shadow-lg); }
.brand-text { min-width: 0; }
.brand-name { font-family: var(--ff-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; color: var(--text); }
.brand-sub { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nav-toggle { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--border); background: var(--surface); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.nav-toggle:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-soft); }

.side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 calc(-1 * var(--s-1)); padding: var(--s-1); }
.nav-group { margin-top: var(--s-3); }
.nav-group:first-child { margin-top: var(--s-1); }
.nav-group-title { font-family: var(--ff-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 0 var(--s-2); margin-bottom: 6px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 9px 10px; border-radius: var(--r-3); color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; margin-bottom: 2px; transition: background var(--t-fast), color var(--t-fast); position: relative; white-space: nowrap; }
.nav-item:hover { background: var(--bg); }
.nav-item.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.nav-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-full); background: var(--primary); }
.nav-item .badge { background: var(--primary-soft); color: var(--primary-ink); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); min-width: 18px; text-align: center; }
.nav-item.on .badge { background: var(--primary); color: #fff; }
.nav-item-content { display: flex; align-items: center; gap: var(--s-3); min-width: 0; overflow: hidden; }
.nav-item-content i { flex-shrink: 0; }
.user-card { margin-top: var(--s-3); padding: var(--s-3); background: var(--bg); border-radius: var(--r-4); display: flex; align-items: center; gap: var(--s-3); }

/* Collapsed sidebar (ikonka-rail) */
.app.nav-collapsed { grid-template-columns: 74px 1fr; }
.app.nav-collapsed .sidebar { padding-left: var(--s-2); padding-right: var(--s-2); }
.app.nav-collapsed .brand-text,
.app.nav-collapsed .brand-name,
.app.nav-collapsed .nav-group-title,
.app.nav-collapsed .nav-item .badge,
.app.nav-collapsed .ni-label,
.app.nav-collapsed .uc-text { display: none; }
.app.nav-collapsed .side-top { flex-direction: column-reverse; align-items: center; gap: var(--s-2); padding: var(--s-1) 0 var(--s-3); }
.app.nav-collapsed .brand { align-items: center; }
.app.nav-collapsed .brand-logo { height: 19px; }
.app.nav-collapsed .nav-item { justify-content: center; padding: 10px 0; }
.app.nav-collapsed .nav-item-content { justify-content: center; gap: 0; }
.app.nav-collapsed .nav-item.on::before { display: none; }
.app.nav-collapsed .user-card { justify-content: center; padding: var(--s-2); }
.app.nav-collapsed .user-card .uc-avatar-wrap, .app.nav-collapsed .user-card .btn { }
.app.nav-collapsed .user-card .btn.logout-btn { display: none; }

/* Main panel */
/* 2026-08-20 dizayn-audit: har bir ekranda ish boshlanishigacha 106px sarflanardi.
   Ichki asbob uchun bu landing-sahifa o'lchami. 80px'ga tushirildi. */
.main { padding: var(--s-4) var(--s-6); overflow-y: auto; height: 100vh; height: 100dvh; }
/* Sarlavha yopishqoq: uzun ro'yxatni aylantirganda ham ekran nomi va asosiy
   tugmalar ko'rinib turadi. top qiymati .main padding-top'ining manfiysi. */
.page-head { position: sticky; top: calc(-1 * var(--s-4)); z-index: var(--z-sticky); background: var(--bg); padding-top: 4px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); flex-wrap: wrap; gap: var(--s-3); }
.page-title { font-family: var(--ff-display); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.page-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ── 4. PRIMITIVES ──────────────────────────────────────── */
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary-ink); font-weight: 600; font-size: 10px; flex-shrink: 0; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.avatar.xl { width: 64px; height: 64px; font-size: 20px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }

/* Buttons */
.btn { padding: 9px 16px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-700); }
.btn.danger { background: var(--surface); color: var(--coral-ink); border-color: var(--coral); }
.btn.danger:hover { background: var(--coral-soft); }
.btn.danger-solid { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn.purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.lg { padding: 12px 18px; font-size: 14px; }
.btn.icon { padding: 8px; }
/* Pul yo'nalishi uchun lug'at (2026-08-20 dizayn-audit). Kassadagi "To'lash"
   tugmasi inline `#10B981` bilan yashil qilingan edi; inline stil `.btn.primary:hover`
   ni ham yengib, tugmada hover javobi UMUMAN yo'q edi. Endi klass: kirim yashil,
   chiqim esa ko'rinishidan farq qiladi. */
.btn.pay { background: var(--success-700); border-color: var(--success-700); color: #fff; }
.btn.pay:hover:not(:disabled) { background: #036B4B; border-color: #036B4B; }
.btn.payout { background: var(--surface); color: var(--warn-ink); border-color: var(--warn-line); }
.btn.payout:hover:not(:disabled) { background: var(--warn-bg); }
/* Bosilish javobi: .btn allaqachon transform o'tishini e'lon qilgan, lekin uni
   hech narsa ishga tushirmasdi (butun faylda `:active` nol marta uchrardi). */
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.94); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Pills, badges, tags */
.live-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); background: var(--primary-soft); color: var(--primary-ink); border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.role-mgr { background: var(--purple); color: #fff; }
.role-op { background: var(--primary); color: #fff; }

.seg-tag { padding: 3px 8px; border-radius: var(--r-2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.seg-active { background: var(--success-soft); color: #065F46; border: 1px solid #A7F3D0; }
.seg-vip { background: var(--amber-soft); color: #92400E; border: 1px solid #FDE68A; }
.seg-lost { background: var(--coral-soft); color: #991B1B; border: 1px solid #FECACA; }
.seg-new { background: var(--info-soft); color: #1E40AF; border: 1px solid #BFDBFE; }

/* Channel badges */
.ch-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-2); font-size: 11px; font-weight: 600; }
.ch-ig { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); color: #fff; }
.ch-tg { background: #229ED9; color: #fff; }
.ch-phone { background: #475569; color: #fff; }
.ch-walkin { background: var(--success); color: #fff; }

/* ID chips (clinic_id) */
.id-chip { font-family: var(--ff-mono); font-weight: 600; padding: 3px 7px; border-radius: var(--r-1); background: var(--primary-soft); color: var(--primary-ink); font-size: 11px; letter-spacing: .04em; }
.id-chip.lg { font-size: 14px; padding: 4px 10px; }

/* Cards */
.card { background: var(--surface); border-radius: var(--r-5); border: 1px solid var(--border-soft); padding: 14px; }
/* Jadval/ro'yxat kartasi: ichki padding yo'q, burchaklar qirqiladi.
   `overflow: clip` ATAYLAB (hidden emas): hidden o'z aylantirish konteynerini
   yaratib, ichkaridagi yopishqoq <thead>ni .main o'rniga kartaga bog'lab qo'yardi
   va sarlavha aylantirishda yo'qolardi. clip esa faqat qirqadi. */
.card.flush { padding: 0; overflow: clip; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); }
.card-title { font-family: var(--ff-display); font-weight: 700; font-size: 15px; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-foot { padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }

/* KPI cards */
/* 2026-08-20 dizayn-audit: .kpi kartasi bitta raqam uchun 144-162px egallardi va uni
   9 ta ekran ishlatadi (identity, reports, reengage, agents, infra, migration, kassa,
   vrach, doctors): hamma joyda ish-kontenti fold ostiga surilardi. Zichlashtirildi:
   ~84px. Ustunlar auto-fit: 5 ta KPI 4-ustunli gridda bo'sh katak qoldirmaydi. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi { background: var(--surface); border-radius: var(--r-5); padding: 10px 12px; min-height: 84px; border: 1px solid var(--border-soft); }
.kpi-label { font-size: 11px; line-height: 1.35; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.kpi-icon { width: 18px; height: 18px; flex: none; border-radius: var(--r-1); background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.kpi-value { font-family: var(--ff-display); font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-trend { font-size: 11px; line-height: 1.35; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.kpi-trend.up { color: var(--success-700); }
.kpi-trend.down { color: var(--coral-700); }

/* ── KPI STRIP (2026-08-20 dizayn-audit) ─────────────────────────────────
   Muammo (o'lchangan): dashboardda 6 ta .kpi kartasi 1440x900 ekranda 304px
   egallardi, birinchi grafik y=434 dan boshlanardi (foldning 48%'i bitta
   raqamga ketardi) va menejer uchun eng muhim "Diqqat talab qiladi" kartasi
   fold ostida qolardi. Yechim: 6 ta alohida karta o'rniga BITTA zich strip,
   ustunlar orasida 1px chiziq. Balandligi ~84px, ya'ni ~220px qaytariladi.
   .kpi/.kpi-grid saqlanadi: boshqa ekranlar (reports, doctors) ularni
   ishlatadi va kichik-sonli KPI'da katta karta hamon to'g'ri. */
/* Ustunlar teng emas: 3-ustun (Bugungi tashrif) uch qismli holat-satrini ko'taradi
   (keldi/kutmoqda/kelmadi), shuning uchun unga nisbatan kengroq joy beriladi.
   Teng 1fr'da bu satr 1366px laptopda kesilib qolardi. */
/* 2026-08-25 (analitika rejasi P0.1): strip 6 dan 7 ustunga chiqdi - birinchi
   katak "Bu oy qoldi" (FOYDA). 1-katak 1.15fr, 4-katak (bugungi tashrif) 1.2fr:
   ikkalasi ham ko'p qismli satr ko'taradi. 1500px'dan pastda 4 ustunga o'tadi,
   chunki 7 katak 1440px laptopda yorliqni kesa boshlaydi. */
.kpi-strip { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); margin-bottom: var(--s-4); overflow: hidden; }
.kpi-cell { padding: var(--s-3); min-width: 0; border-left: 1px solid var(--border-soft); }
.kpi-cell:first-child { border-left: 0; }
.k-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); min-width: 0; }
.k-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-label i, .k-label svg { flex-shrink: 0; }
.k-value { font-family: var(--ff-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.18; margin-top: 3px; white-space: nowrap; }
.k-unit { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.k-foot { font-size: 12px; line-height: 1.35; margin-top: 2px; display: flex; align-items: center; gap: 3px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-foot.up { color: var(--success-700); }
.k-foot.down { color: var(--coral-700); }
.k-foot i, .k-foot svg { flex-shrink: 0; }
/* Uch qismli holat-satri (keldi / kutmoqda / kelmadi): ajratuvchi nuqta o'rniga
   bo'shliq + semantik rang. Nuqtalar 13px joy yeydi, 1366px laptopda satr
   kesilib qolardi; rang esa tezroq skanerlanadi. */
.k-foot.split { gap: 7px; }
.k-foot.split .ok { color: var(--success-700); }
.k-foot.split .bad { color: var(--coral-700); }

/* Segment plitkasi (segments ekrani). Ilgari karta ichida karta + chap chetda 4px
   rangli chiziq edi: ikkalasi ham noto'g'ri naqsh. Endi tekis, bosiladigan plitka. */
.seg-tile { display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-4); padding: var(--s-3) var(--s-4); cursor: pointer; font: inherit; color: var(--text); transition: border-color var(--t-fast), background-color var(--t-fast); }
.seg-tile:hover { background: var(--surface); border-color: var(--border-strong); }
.seg-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.st-count { font-family: var(--ff-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 5px; }
.st-unit { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.st-crit { font-size: 11px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .k-foot.split .ok { color: var(--success); }
[data-theme="dark"] .k-foot.split .bad { color: #FF8A8A; }

/* Blok-lentasi (Qabulxona): 9 ta blok. Ilgari inline `repeat(9,1fr)` edi va
   768px'da yuqoridagi qoida uni 868px'lik ustunga cho'zardi. Endi tor ekranda
   yon tomonga suriladi: bir qarashda o'qiladigan lenta bo'lib qoladi. */
.block-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 1px; background: var(--border-soft); padding: 1px; }
@media (max-width: 768px) {
  .block-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; grid-auto-columns: minmax(84px, 1fr); }
}

/* Tab-strip: profil va shifokor ekranlarida bir xil naqsh, lekin CSS'da umuman
   yo'q edi: har biri beshtadan bir xil inline satr bilan ushlab turilardi va
   faol holatni bosish-ishlovchisi yana inline yozardi. Ikkalasi turli rang
   ishlatardi (--primary-ink vs --primary), shu sabab tab bosilganda tusini
   o'zgartirardi. (2026-08-20 dizayn-audit) */
.tab-strip { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab-strip::-webkit-scrollbar { display: none; }
.tab-strip > button { padding: 12px 18px; font: inherit; font-weight: 600; font-size: 13px; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); }
.tab-strip > button:hover { color: var(--text); background: var(--bg); }
.tab-strip > button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab-strip > button.active { color: var(--primary-ink); border-bottom-color: var(--primary); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Jadval sarlavhasi yopishqoq .page-head OSTIGA yopishadi (--head-h ni app.js
   _syncHeadHeight() o'lchab qo'yadi). Ilgari uzun ro'yxatni aylantirganda ustun
   nomlari yo'qolib, xodim qaysi ustun nima ekanini eslab qolishga majbur edi. */
.table th { position: sticky; top: calc(var(--head-h, 63px) - var(--s-4)); z-index: 2; text-align: left; padding: 6px 14px; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); background: var(--bg); }
/* Qatorlar pastroq: bir ekranda ~30% ko'proq mijoz/to'lov ko'rinadi.
   768px'dan pastda quyidagi mobil qoida bekor qiladi. */
.table td { padding: 7px 14px; border-bottom: 1px solid var(--border-soft); }
.table tr:hover td { background: var(--bg); cursor: pointer; }
.table tr.selected td { background: var(--primary-soft); }
/* RESP-04: keng jadvallar uchun gorizontal aylantirish (screens.js jadvallarni shunga o'raydi).
   2026-08-20: `overflow-x:auto` o'z aylantirish konteynerini yaratadi, shuning uchun
   yopishqoq <thead> .main'ga emas, o'ramga yopishib qolardi va ishlamasdi. O'lchandi:
   1320px'dan keng ekranda hech bir jadval o'ramdan oshmaydi: demak u yerda aylantirish
   kerak emas va thead yopishishi mumkin. Tor ekranda aylantirish qaytariladi. */
.table-wrap { overflow-x: visible; -webkit-overflow-scrolling: touch; }
/* 2026-09-05 (brauzer tekshiruvi, 1280px): shu media-so'rov yoqilganda
   `.table-wrap` AYLANTIRISH KONTEYNERIGA aylanadi (bir o'q `auto` bo'lsa
   ikkinchisi ham `visible` bo'lolmaydi). Shunda `th` ning sticky ofseti
   sahifa tepasidan emas, JADVAL tepasidan hisoblanadi va sarlavha 63px
   pastga tushib BIRINCHI QATORNI yopib qo'yadi - ya'ni eng yangi mijoz
   noutbuk va telefonda umuman ko'rinmaydi. Ayni shu nuqson 2026-09-02 da
   profil jadvalida chiqqan edi (yuqoridagi izoh).
   Yechim: konteyner ichida ofset 0. Sarlavha yopishmaydi, lekin qator
   yashirilmaydi - ikkisidan bu afzal.

   QAROR (2026-09-06 tuzatish rejasi 5.1): bu 1320px dan tor ekranda DEMO
   rejimda ham sticky sarlavhani o'chiradi. Ataylab qabul qilindi: yopishgan
   sarlavha qulaylik, yashirilgan birinchi qator esa NUQSON. Muqobil yechim
   (JS dan `--head-h` ni o'lchab ofset berish) har resize da o'lchov talab
   qiladi va prototipda tekin emas; kerak bo'lsa alohida vazifa. */
@media (max-width: 1320px) {
  .table-wrap { overflow-x: auto; }
  .table-wrap .table th { top: 0; }
}
/* 2026-09-02 (egasi: "bronlar bo'limida jadvalda xatolik bor"): profil
   ichidagi tab-jadvalda sarlavha qatori birinchi qator USTIGA chiqib qolardi.
   Sabab: <table> ga inline `overflow:hidden` berilgan edi - shu bilan jadvalning
   O'ZI aylantirish konteyneriga aylanib, `position:sticky` sarlavha .page-head
   uchun mo'ljallangan 55px ofsetni endi JADVAL tepasidan hisoblardi, ya'ni
   sarlavha 55px pastga tushib qatorlarni yopardi. Inline overflow olib tashlandi;
   qisqa tab-ro'yxatlarida sarlavhani yopishtirishning ma'nosi ham yo'q. */
#profile-tab-content .table th, .prof-table .table th { position: static; }

/* ── 5. FORMS ───────────────────────────────────────────── */
.form-group { margin-bottom: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.label .req { color: var(--coral-700); }
.input, .select, .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); font-size: 14px; transition: border var(--t-fast), box-shadow var(--t-fast); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.input.error, .select.error, .textarea.error { border-color: var(--coral); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
/* `.input.sm` markupda ishlatilardi (payout kun-tanlagichi, alohida foiz jadvali), lekin
   CSS'da umuman yo'q edi - maydonlar to'liq o'lchamda chiqib qatorni buzardi (2026-08-23). */
.input.sm, .select.sm { padding: 6px 10px; font-size: 12px; }
/* Ikkilamchi jadval ustunlari: tor ekranda yashiriladi (asosiy pul-zanjiri qoladi) */
@media (max-width: 768px) { .table .col-opt { display: none; } }
/* Pul-ziddiyati qatori bosiladi: hover/fokus javobi bo'lmasa bosilishi bilinmaydi */
.conflict-row { border-radius: 7px; margin: 0 -8px; padding-left: 8px !important; padding-right: 8px !important; transition: background var(--t-fast); }
.conflict-row:hover { background: var(--bg); }
.conflict-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.helper { font-size: 11px; color: var(--muted); margin-top: 4px; }
.error-msg { font-size: 11px; color: var(--coral-ink); margin-top: 4px; display: flex; align-items: center; gap: 4px; }

/* Checkbox / Radio */
.check { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; user-select: none; padding: var(--s-2); border-radius: var(--r-2); }
.check:hover { background: var(--bg); }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }
.check span { font-size: 13px; }

/* Toggle / Switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-strong); transition: var(--t-fast); border-radius: var(--r-full); }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--t-fast); }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(16px); }

/* Search input */
.search { position: relative; display: flex; align-items: center; }
.search input { padding-left: 36px; }
.search-icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }

/* ── 6. MODALS ──────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--s-6); animation: fadeIn .2s; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--r-6); max-width: 560px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); animation: modalIn .25s; }
.modal.lg { max-width: 800px; }
.modal.xl { max-width: 1100px; }
@keyframes modalIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-family: var(--ff-display); font-weight: 700; font-size: 18px; }
.modal-close { padding: 8px; border-radius: var(--r-2); color: var(--muted); }
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body { padding: var(--s-6); overflow-y: auto; flex: 1; }
.modal-foot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: var(--s-2); background: var(--bg); }

/* Confirm dialog (small modal) */
.modal.confirm { max-width: 420px; }
.modal.confirm .modal-body { text-align: center; padding: var(--s-6); }
.modal.confirm .confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-4); }

/* ── 7. TOASTS ──────────────────────────────────────────── */
.toast-stack { position: fixed; top: var(--s-6); right: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); z-index: var(--z-toast); pointer-events: none; }
.toast { background: var(--surface); border-radius: var(--r-4); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--s-3); min-width: 280px; max-width: 400px; pointer-events: auto; animation: toastIn .25s; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }
/* AP-1: left-stripe removed; the colored .toast-icon now carries the type. */
.toast-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.toast.success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast.error .toast-icon { background: var(--coral-soft); color: var(--coral); }
.toast.warning .toast-icon { background: var(--amber-soft); color: var(--amber); }
.toast.info .toast-icon { background: var(--info-soft); color: var(--info); }
.toast-body { flex: 1; font-size: 13px; }
.toast-title { font-weight: 600; }
.toast-msg { color: var(--muted); font-size: 12px; }
.toast-close { color: var(--muted); padding: 4px; }

/* ── 8. STATES (empty / loading / error) ─────────────────── */
.empty-state, .error-state, .loading-state { padding: var(--s-12) var(--s-6); text-align: center; }
.empty-icon, .error-icon, .loading-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--s-4); display: flex; align-items: center; justify-content: center; }
.empty-icon { background: var(--bg); color: var(--muted); }
.error-icon { background: var(--coral-soft); color: var(--coral); }
.loading-icon { background: var(--primary-soft); color: var(--primary); }
.empty-title, .error-title { font-family: var(--ff-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.empty-msg, .error-msg { color: var(--muted); font-size: 13px; margin-bottom: var(--s-4); max-width: 360px; margin-left: auto; margin-right: auto; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--skeleton-mid) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-2); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton.line { height: 12px; margin: 6px 0; }
.skeleton.line.lg { height: 18px; }
.skeleton.circle { border-radius: 50%; }

/* Spinner */
.spinner { width: 24px; height: 24px; border: 2px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 9. UTILITIES ───────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.text-muted { color: var(--muted); }
.text-sm { font-size: 12px; }
/* 2026-08-20: 11px -> 12px. 11 va 12 orasida ko'z ilg'aydigan pog'ona yo'q edi,
   lekin 11px xodim o'qishi kerak bo'lgan tafsilotni (telefon, yosh, vaqt) ko'tarardi.
   .text-sm bilan tenglashdi: bu ataylab, haqiqiy pog'onalar 12 / 13 / 15. */
.text-xs { font-size: 12px; }
.text-lg { font-size: 16px; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--ff-mono); }
.text-center { text-align: center; }
.w-full { width: 100%; }
.cursor-pointer { cursor: pointer; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Dividers */
.divider { height: 1px; background: var(--border-soft); margin: var(--s-4) 0; }
.divider-vert { width: 1px; background: var(--border-soft); margin: 0 var(--s-4); align-self: stretch; }

/* ── 10. SCREEN-SPECIFIC ────────────────────────────────── */
/* Dashboard */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
/* Dashboard amal-qatori (3 ta karta). Ilgari inline grid edi; klass bo'lgani uchun
   endi 768px'dagi umumiy inline-grid yig'ish qoidasiga tobe emas va o'z
   breakpointiga ega: planshetda 2 ustun, telefonda 1. */
.dash-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
@media (max-width: 1100px) { .dash-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dash-actions { grid-template-columns: 1fr; } }
/* Chap karta (grafik) o'ngdagi ro'yxatdan past bo'lgani uchun barlar tagida katta
   oq bo'shliq qolardi. Karta flex-ustun bo'lsa, .spark ortiqcha balandlikni yeydi
   va grafik o'qiladiganroq bo'ladi (2026-08-20 dizayn-audit). */
.dash-grid > .card { display: flex; flex-direction: column; }
.spark { flex: 1; min-height: 120px; display: flex; align-items: end; gap: 3px; margin-top: var(--s-3); }
.spark-bar { flex: 1; background: linear-gradient(to top, var(--primary), var(--primary-soft)); border-radius: 3px 3px 0 0; min-height: 4px; }
.spark-bar.now { background: var(--coral); }
.intent-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.intent-row:last-child { border: none; }

/* Identity graph (profile) */
.identity-graph { background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%); border-radius: var(--r-5); padding: var(--s-5); margin-bottom: var(--s-4); border: 1px solid #A7F3D0; }
.identity-node { background: var(--surface); border-radius: var(--r-4); padding: var(--s-3); border: 1px solid var(--border); margin-bottom: var(--s-2); display: flex; justify-content: space-between; align-items: center; }
.identity-node.golden { border-color: var(--amber); background: var(--amber-soft); }
.identity-confidence { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-1); }
.identity-confidence.high { background: var(--success-soft); color: #065F46; }
.identity-confidence.med { background: var(--amber-soft); color: #92400E; }
.identity-confidence.low { background: var(--coral-soft); color: #991B1B; }

/* Memory layers (AI) */
.memory-layer { background: var(--surface); border-left: 3px solid var(--primary); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); border-radius: 0 var(--r-3) var(--r-3) 0; }
.memory-layer.fact { border-left-color: var(--info); }
.memory-layer.episodic { border-left-color: var(--purple); }
.memory-layer.preference { border-left-color: var(--amber); }
.memory-layer.summary { border-left-color: var(--success); }
.memory-type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* TV Display */
.tv-display { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color: #fff; min-height: 720px; display: flex; flex-direction: column; padding: var(--s-12) var(--s-16); position: relative; }
.tv-clock { position: absolute; top: var(--s-6); right: var(--s-6); font-family: var(--ff-mono); font-size: 18px; opacity: .6; }
.tv-now { text-align: center; margin: auto 0; }
.tv-label { font-size: 18px; color: #94A3B8; margin-bottom: var(--s-4); letter-spacing: .15em; text-transform: uppercase; }
.tv-id { font-family: var(--ff-mono); font-size: 140px; font-weight: 700; color: #8FA6FF; letter-spacing: -.02em; line-height: 1; }
.tv-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding-top: var(--s-8); }
.tv-next-item { background: rgba(255, 255, 255, .04); border-radius: var(--r-5); padding: var(--s-4); text-align: center; border: 1px solid rgba(255, 255, 255, .08); }
.tv-next-item .id { font-family: var(--ff-mono); font-size: 36px; font-weight: 700; }

/* Kanban (tasks/comments) */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.kanban-col { background: var(--bg); border-radius: var(--r-5); padding: var(--s-3); min-height: 400px; }
.kanban-col-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) var(--s-2) var(--s-3); }
.kanban-col-title { font-weight: 600; font-size: 13px; }
.kanban-col-count { background: var(--surface); color: var(--muted); padding: 2px 7px; border-radius: var(--r-2); font-size: 11px; font-weight: 600; }
.kanban-card { background: var(--surface); border-radius: var(--r-3); padding: var(--s-3); margin-bottom: var(--s-2); border: 1px solid var(--border-soft); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.kanban-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 1px; background: var(--border-soft); border-radius: var(--r-4); overflow: hidden; min-width: 640px; }
.cal-cell { background: var(--surface); padding: var(--s-2); min-height: 60px; }
.cal-head { background: var(--bg); font-weight: 600; font-size: 11px; color: var(--muted); text-align: center; padding: var(--s-3) var(--s-2); }
.cal-time { background: var(--bg); font-size: 10px; color: var(--muted); text-align: right; padding-right: var(--s-2); padding-top: 6px; }
.cal-event { background: var(--primary-soft); border-left: 3px solid var(--primary); padding: 4px 6px; border-radius: var(--r-1); font-size: 11px; margin-bottom: 2px; cursor: pointer; }
.cal-event.walkin { background: var(--success-soft); border-left-color: var(--success); }
.cal-event.reserved { background: var(--info-soft); border-left-color: var(--info); }
.cal-event.urgent { background: var(--coral-soft); border-left-color: var(--coral); }

/* Reports / Charts */
.chart-card { background: var(--surface); border-radius: var(--r-5); padding: var(--s-5); border: 1px solid var(--border-soft); }
.bar-chart { display: flex; align-items: end; gap: var(--s-2); height: 200px; padding-top: var(--s-4); }
.bar-chart .bar { flex: 1; background: linear-gradient(to top, var(--primary), var(--primary-soft)); border-radius: 3px 3px 0 0; position: relative; min-height: 8px; transition: opacity var(--t-fast); }
.bar-chart .bar:hover { opacity: .8; }
.bar-chart .bar .label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; }
.donut-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Livechat */
.chat-app { display: grid; grid-template-columns: 320px 1fr 280px; height: 700px; }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; }
.chat-item { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; gap: var(--s-3); }
.chat-item:hover { background: var(--bg); }
.chat-item.active { background: var(--primary-soft); border-left: 3px solid var(--primary); padding-left: calc(var(--s-4) - 3px); }
.chat-msgs { display: flex; flex-direction: column; }
.chat-head { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.chat-stream { flex: 1; overflow-y: auto; padding: var(--s-5); background: var(--bg); display: flex; flex-direction: column; gap: var(--s-3); }
.chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: var(--r-4); }
.chat-bubble.in { background: var(--surface); border: 1px solid var(--border-soft); align-self: flex-start; }
.chat-bubble.out { background: var(--primary); color: #fff; align-self: flex-end; }
.chat-bubble .time { font-size: 10px; opacity: .7; margin-top: 4px; }
.chat-input { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); display: flex; gap: var(--s-2); align-items: end; }
.chat-side { border-left: 1px solid var(--border); padding: var(--s-5); overflow-y: auto; background: var(--bg); }
.chat-toggle { display: none; } /* RESP-01: faqat mobil chat-head'da ko'rinadi (≤1024px) */

/* Settings */
.settings-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-6); }
.settings-nav-item { padding: var(--s-3); border-radius: var(--r-3); cursor: pointer; font-size: 13px; }
.settings-nav-item.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }

/* Auth */
.auth-shell { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; padding: var(--s-12); display: flex; flex-direction: column; justify-content: center; }
.auth-main { padding: var(--s-12); display: flex; flex-direction: column; justify-content: center; }
.auth-card { max-width: 380px; width: 100%; margin: 0 auto; }

/* 7 katak faqat keng ekranda sig'adi. 1500px'dan pastda 4 ustun (2 qator). */
@media (max-width: 1500px) {
  .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Strip 3 ustunga 1320px'da o'tadi (1280 emas): 1280-1320 oralig'ida
   yorliqlar kesila boshlaydi. */
@media (max-width: 1320px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Telefonda zichlikdan ko'ra o'qilishi muhim: matn ikki qatorga o'ralsin,
   katak balandligi o'zi moslashadi. */
@media (max-width: 600px) {
  .k-label > span, .k-foot { white-space: normal; overflow: visible; }
  .k-foot.split { flex-wrap: wrap; row-gap: 0; }
}

/* ── 11. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  /* Mobil: sidebar defolt ikonka-rail; kengaytirilganda kontent ustiga suziladi */
  .app { grid-template-columns: 74px 1fr; }
  .app:not(.nav-collapsed) .sidebar { position: fixed; top: 0; left: 0; width: 260px; z-index: var(--z-modal); box-shadow: var(--shadow-xl); }
  .chat-app { grid-template-columns: 1fr; height: auto; min-height: 70dvh; }
  .chat-list, .chat-side { display: none; }
  .chat-app.show-list .chat-list { display: block; }
  .chat-app.show-side .chat-side { display: block; }
  .chat-toggle { display: inline-flex; }
  .settings-grid { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .auth-side { display: none; }
  .tv-display { min-height: 60dvh; }
  .tv-id { font-size: 96px; }
}
@media (max-width: 768px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-cell { padding: var(--s-3); }
  .k-value { font-size: 19px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .kpi { padding: var(--s-3); }
  .kpi-value { font-size: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .main { padding: var(--s-4); }
  .page-title { font-size: 18px; }
  .modal { max-width: calc(100% - 24px); }
  .modal-body { padding: var(--s-4); }
  .tv-id { font-size: 64px; }
  .tv-display { padding: var(--s-6); }
  .tv-next-grid { grid-template-columns: 1fr; }
  .table { font-size: 12px; }
  .table th, .table td { padding: var(--s-2); }
  /* Mobil: ekranlardagi inline ko'p-ustunli grid'lar bitta ustunga yig'iladi (aks holda 390px'da gorizontal oshib ketadi) */
  .main [style*="grid-template-columns:1fr 1fr"],
  .main [style*="grid-template-columns:2fr 1fr"],
  .main [style*="grid-template-columns:1.6fr 1fr"],
  .main [style*="grid-template-columns:340px 1fr"],
  .main [style*="grid-template-columns:380px 1fr"],
  .main [style*="grid-template-columns:260px 1fr"],
  .main [style*="grid-template-columns:1fr 60px 1fr"],
  /* inline repeat(N,1fr) grids (KPI/kanban/zapis/payment) - beats inline over class media rules; .cal-grid is class-based + table-wrapped so unaffected */
  /* 2026-08-20: auto-fill / auto-fit gridlar CHIQARILDI. Ular o'zi moslashadi;
     ularni ham bitta ustunga majburlash foydasiz balandlik qo'shardi. Qolgan
     qattiq `repeat(N,1fr)` lar esa hamon yig'iladi. Bu qoidani BUTUNLAY olib
     tashlab bo'lmaydi: 390px'da o'lchandi, usiz blok-navigatsiyaning 81px'i
     kesilib, bosib bo'lmaydigan holga kelardi. */
  .main [style*="grid-template-columns:repeat("]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
    /* `1fr` = `minmax(auto, 1fr)`: ustun min-content'dan kichrayolmaydi, shuning
       uchun keng bola (jadval, uzun satr) uni cho'zib yuborardi. O'lchandi: 390px
       qutida 641px ustun hosil bo'lib, Qabulxonaning 33 ta boshqaruvi ekrandan
       chiqib ketardi va ularga YETIB BO'LMASDI. minmax(0,1fr) kichrayishga ruxsat
       beradi, keng bola esa o'zining .table-wrap aylantirgichiga tushadi. */
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Telefon: `.flex` yordamchisi o'ralmaydi, shu sabab sig'magan tugma ekrandan
   chiqib ketardi va unga yetib bo'lmasdi (o'lchandi: vrach "Qidirish",
   doctors "Foizni o'zgartirish"). Sig'ganlari bir qatorda qoladi. */
@media (max-width: 480px) {
  .main .flex { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ── DEV: suzuvchi rol-almashtirgich (qurish jarayoni uchun) ── */
#dev-role-fab { position: fixed; bottom: 18px; right: 18px; z-index: var(--z-toast); display: flex; align-items: center; gap: 4px; background: var(--dark, #0B1330); border-radius: 999px; padding: 6px 8px; box-shadow: 0 10px 28px rgba(11, 19, 48, .38); }
#dev-role-fab .fab-tag { font-family: var(--ff-mono, 'Space Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .55); padding: 0 6px; }
#dev-role-fab button { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, .75); font-weight: 600; font-size: 12px; font-family: inherit; padding: 7px 12px; border-radius: 999px; transition: background .15s, color .15s; }
#dev-role-fab button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#dev-role-fab button.on { background: var(--primary, #0029FF); color: #fff; }
/* 2026-08-30 (egasi): panel tugmalarni yopib qo'yardi - endi qo'lda suriladi.
   Dastak = "DEV" chipi yoki panelning bo'sh joyi; tugmalar bosilaveradi. */
#dev-role-fab { touch-action: none; }
#dev-role-fab .fab-tag { cursor: grab; user-select: none; -webkit-user-select: none; }
#dev-role-fab.dragging { cursor: grabbing; opacity: .92; box-shadow: 0 16px 40px rgba(11, 19, 48, .5); }
#dev-role-fab.dragging .fab-tag { cursor: grabbing; }
@media print { #dev-role-fab { display: none !important; } }
@media (max-width: 640px) {
  #dev-role-fab button { padding: 7px 9px; font-size: 0; gap: 0; }
  #dev-role-fab button i { width: 15px !important; height: 15px !important; }
}
@media (max-width: 480px) {
  .toast-stack { left: var(--s-3); right: var(--s-3); top: var(--s-3); }
  .toast { min-width: 0; max-width: none; }
}

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: calc(var(--z-modal) - 1); }
.sidebar-backdrop.open { display: block; }

/* RESP-06: comfortable touch targets on coarse (touch) pointers. */
@media (pointer: coarse) {
  .nav-toggle, .btn.icon, .modal-close, .toast-close, .btn.sm { min-width: 44px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
}
/* Tanlash katakchalari 13x13 edi (brauzer sukuti): standart minimumi 24x24.
   Sichqoncha bilan ham tegib bo'lmasdi, ommaviy tanlash esa aynan desktopda. */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* Minimum hit area for the close ✕ and toggle even on fine pointers. */
.toast-close { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.switch { min-height: 24px; }

/* Print styles */
@media print {
  .sidebar, .dev-meta, .page-actions, .modal-overlay, .toast-stack { display: none !important; }
  .frame { box-shadow: none; border-radius: 0; }
  .screen { display: block !important; }
}

/* ── TEAM KPI + XABAR widgeti (sidebar; 2026-07-23 rol-KPI qurilishi) ── */
.tk-widget { margin: 0 10px 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-3); flex-shrink: 0; }
.tk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tk-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tk-gear { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 6px; display: flex; }
.tk-gear:hover { color: var(--primary-ink); background: var(--primary-soft); }
.tk-bar { height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.tk-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .4s ease; }
.tk-fill.full { background: var(--success); }
.tk-meta { font-size: 11px; color: var(--muted); margin-top: 5px; }
.tk-msg { font-size: 11px; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-actions { display: flex; gap: 6px; margin-top: 8px; }
.tk-unread { position: absolute; top: -5px; right: -5px; background: var(--coral); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.nav-collapsed .tk-widget { display: none; }

/* ══ 2026-08-15 KALENDAR-BRON vidjeti (egasi 4-taklifi: Du→Ya, o'tgan kun o'chiq, sig'im-nuqta)
   DIQQAT: 'dp-' (date-picker) prefiksi ATAYLAB - Kalendar-EKRAN allaqachon .cal-grid/.cal-head
   klasslarini ishlatadi (yuqorida, min-width:640px) va nomlar to'qnashib vidjetni buzardi. ══ */
.dp-cal { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head strong { font-size: 12.5px; text-transform: capitalize; }
.dp-nav { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text); }
.dp-nav:disabled { opacity: .3; cursor: not-allowed; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dp-wd span { font-size: 9.5px; text-align: center; color: var(--muted); font-weight: 700; padding: 2px 0; text-transform: uppercase; }
.dp-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 34px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
.dp-day:hover:not(:disabled) { background: var(--bg); }
.dp-day.off { color: var(--muted); opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.dp-day.today { border-color: var(--primary); }
.dp-day.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dp-day.sel .dp-dot { background: #fff !important; }
.dp-day.empty { cursor: default; }
.dp-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; }
.dp-dot.g { background: var(--success); }
.dp-dot.y { background: #d97706; }
.dp-dot.r { background: #dc2626; }
/* Blok-panel: tanlangan kunning bo'sh joylari (chip) */
.block-list { display: flex; flex-wrap: wrap; gap: 6px; }
.block-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; font-size: 11px; min-width: 96px; color: var(--text); }
.block-chip b { font-size: 12px; }
.block-chip em { font-style: normal; color: var(--success); font-weight: 600; }
.block-chip.off { opacity: .45; cursor: not-allowed; }
.block-chip.off em { color: #dc2626; }
.block-chip.sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
/* Qo'ng'iroq pop-upi va toast-xabarlar BIR burchakda edi (ikkalasi ham o'ng-yuqorida) -
   pop-up z-index 9999 bilan xabarlarni to'sib qo'yardi (egasi 2026-08-15: "notificationlar
   ustma-ust tushib o'qib bo'lmayapti"). Endi qo'ng'iroq paytida navbat pop-up OSTIGA suriladi;
   --call-h ni renderCallPopup o'lchab qo'yadi (STT paneli o'sganda ham to'g'ri qoladi). */
body.call-active .toast-stack { top: calc(var(--call-h, 300px) + 26px); }

/* Jonli-STT paneli (qo'ng'iroq pop-up ichida) */
.stt-box { max-height: 110px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 9px; padding: 6px 8px; font-size: 11px; margin: 6px 0; line-height: 1.5; }
.stt-chip { border: 1px dashed var(--primary); background: var(--primary-soft); color: var(--text); border-radius: 999px; padding: 3px 9px; font-size: 10.5px; cursor: pointer; font: inherit; text-align: left; }
.stt-chip:hover { background: var(--primary); color: #fff; }

/* ── KLINIK XAVFSIZLIK BANDI + OLDINGI TEKSHIRUV (v109) ────────────────
   Benchmark 2026-08-25: Storyboard naqshi (doimiy xavf-bandi) va prior
   comparison. Ataylab jim ranglar - bu ogohlantirish emas, kontekst. */
/* ══ NATIJA VARAG'I FORMASI (2026-09-01) ═══════════════════════════════
   Bo'limli, ikki tilli shablon: har qatorning me'yori va oldingi qiymati
   maydon ostida turadi, standart matn oldindan to'ldirilgan. */
.er-toolbar { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.er-badge {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 6px 10px; border-radius: 8px; margin-bottom: 10px;
}
.er-badge.ok { background: var(--success-soft); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.er-badge.warn { background: var(--amber-soft); color: var(--warn-ink); border: 1px solid var(--amber-soft); }
.er-sec { margin-bottom: 14px; }
.er-sec-t {
  font-family: var(--ff-display); font-weight: 700; font-size: 13px;
  padding-bottom: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.er-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px 16px; }
.er-row { min-width: 0; }
.er-row.wide { grid-column: 1 / -1; }
.er-row .label { display: block; margin-bottom: 3px; }
.er-row .input { width: 100%; }
.er-row textarea.input { resize: vertical; line-height: 1.45; }
.er-unit { color: var(--muted); font-weight: 400; }
.er-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 11px; }
.er-norm { color: var(--muted); }
.er-prior { color: var(--muted); }
.er-prior strong { color: var(--ink); }
.er-ref { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 6px; }

.safety-band {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn-ink);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
.safety-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warn-ink);
}
.safety-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.safety-list li { font-size: 13px; color: var(--ink); line-height: 1.45; }

.prior-band {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
.prior-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--ink);
}
.prior-head i { vertical-align: middle; }

.flag-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--warn-bg); color: var(--warn-ink);
  vertical-align: middle; margin-left: 4px;
}

/* ── HISOBOT KATALOGI (2026-08-25) ────────────────────────────────────────
   Egasi: "hisobotlar ro'yxati chiqsin, bittasi tanlansa shakllansin".
   Ro'yxat qatori tugma: klaviatura bilan ham yuriladi, hover'da ajraladi. */
.seg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.seg-tile.on { border-color: var(--primary); background: var(--surface); box-shadow: inset 0 0 0 1px var(--primary); }
.rep-group { border-top: 1px solid var(--border-soft); padding-top: var(--s-2); margin-top: var(--s-2); }
.rep-group:first-of-type { border-top: 0; margin-top: 0; }
.rep-group-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: var(--s-2) 0; }
.rep-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: var(--r-3); padding: 9px var(--s-2); cursor: pointer; transition: background-color var(--t-fast); }
.rep-row:hover { background: var(--bg); }
.rep-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rep-row.planned { cursor: default; opacity: .55; }
.rep-row.planned:hover { background: transparent; }
.rep-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-3); background: var(--bg); color: var(--muted); }
.rep-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rep-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-desc { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Talqin qavati: jadvaldan OLDIN turadi, ataylab kattaroq */
.rep-lead { margin-bottom: var(--s-3); }
.rep-headline { font-family: var(--ff-display); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.rep-action { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 13px; line-height: 1.5; color: var(--text); }
.rep-action i, .rep-action svg { margin-top: 2px; color: var(--primary); }

/* ── MCP demo (Sozlamalar > Integratsiyalar) ───────────────── */
.mcp-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.mcp-chat { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mcp-msg { padding: 12px 14px; border-radius: var(--r-3); font-size: 13px; line-height: 1.6; max-width: 92%; }
.mcp-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.mcp-msg.ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.mcp-head { font-family: var(--ff-display); font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.mcp-act { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft); }
.mcp-act i, .mcp-act svg { margin-top: 2px; color: var(--primary); }
.mcp-tool { align-self: flex-start; font-family: var(--ff-mono); font-size: 11px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: var(--r-2); padding: 5px 9px; }
.mcp-rules { display: flex; flex-direction: column; gap: 10px; }
.mcp-rule { padding: 11px 13px; border-radius: var(--r-3); background: var(--bg); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-strong); font-size: 13px; line-height: 1.6; }
.mcp-rule.danger { background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger-ink); }
.mcp-steps { display: flex; flex-direction: column; gap: 8px; }
.mcp-step { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-3); background: var(--surface); }
.mcp-num { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-family: var(--ff-display); font-weight: 700; font-size: 14px; }
.mcp-num.soft { background: var(--bg); color: var(--muted); }
@media (max-width: 640px) { .mcp-msg { max-width: 100%; } }

@media (max-width: 1320px) { .seg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-desc { white-space: normal; }
  .rep-headline { font-size: 15px; }
}

/* ── VRACH KALENDARI (v114, 2026-08-27; dizayn qayta ishlandi) ──────────
   Chapda kompakt oy-gridi (qat'iy en), o'ngda tanlangan kun ro'yxati.
   Grid kartaning butun enini egallamaydi: 7 ustun 1500px ga cho'zilsa kataklar
   bo'shab ketadi va kun-ro'yxati ekrandan pastga tushib ko'rinmay qoladi. */
.vc-layout { display: grid; grid-template-columns: minmax(280px, 34%) 1fr; align-items: start; }
.vc-side {
  padding: 12px 14px; border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px;
}
/* Nav: chapda oy-nomi maydoni, o'ngda yuqori/pastki strelka (Windows 11 uslubi) */
.vc-nav { display: flex; align-items: center; gap: 4px; }
.vc-month {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border-soft);
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-arrow {
  width: 32px; height: 32px; flex: none; border: 1px solid transparent;
  background: transparent; border-radius: 6px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.vc-arrow:hover { background: var(--bg); color: var(--ink); }
.vc-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.vc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; justify-items: center; }
.vc-head {
  text-align: center; font-size: 11px; font-weight: 500;
  color: var(--muted); padding: 4px 0 6px;
}
.vc-pad { height: 36px; }
.vc-cell {
  position: relative; width: 36px; height: 36px;
  border: 1px solid transparent; background: transparent;
  border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: inherit; color: var(--ink); line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.vc-cell:hover { background: var(--bg); border-color: var(--border-soft); }
.vc-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.vc-cell.out { color: var(--muted); opacity: .55; }
.vc-cell.today { border-color: var(--primary); }
.vc-cell.sel { background: var(--primary); border-color: var(--primary); color: #fff; opacity: 1; }
.vc-cell.sel .vc-dot { background: rgba(255,255,255,.9); }
.vc-num { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Band kun belgisi: aniq son tooltipda va kun-ro'yxati sarlavhasida */
.vc-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.vc-dot.busy { width: 6px; height: 6px; bottom: 3px; }
/* v151: klinika yopiq kun (bayram/sanitariya) - kalendar katagi, sababi tooltipda */
.vc-cell.closed { background: var(--danger-bg); color: var(--danger-ink); border-color: transparent; }
.vc-cell.closed:hover { background: var(--danger-bg); border-color: var(--danger-line); }
.vc-cell.closed.sel { background: var(--primary); color: #fff; }
/* v151: vrach "Mening jadvalim" kartasi - uch ustun (ertaga / ta'til / ish vaqti) */
.vs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-col { padding: 12px 16px; min-width: 0; }
.vs-col + .vs-col { border-left: 1px solid var(--border-soft); }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
/* v151: Xavfsizlik > "AI ga ochiq ma'lumot" ikki ustun */
.ai-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-scope ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-col + .vs-col { border-left: 0; border-top: 1px solid var(--border-soft); }
  .ai-scope { grid-template-columns: 1fr; }
}

.vc-day { min-width: 0; }
.vc-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--border-soft); background: var(--bg);
}
@media (max-width: 900px) {
  .vc-layout { grid-template-columns: 1fr; }
  .vc-side { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .vc-grid { max-width: 300px; margin: 0 auto; width: 100%; }
}

/* Spravochnik filtri: aniq kunni tanlash uchun kalendar-oynasi (v119) */
.fday-wrap { position: relative; display: inline-flex; gap: 4px; align-items: center; }
.fday-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 300px; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18));
}
.fday-pop .vc-month { font-size: 13px; padding: 7px 10px; }
@media (max-width: 700px) { .fday-pop { left: auto; right: 0; } }

/* Bosiladigan jadval qatori (bemor kartasini ochadi) */
tr.row-click { cursor: pointer; }
tr.row-click:hover > td { background: var(--bg); }
tr.row-click:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ══════════════════════════════════════════════════════════════════════════
   QABULXONA v122 (egasi qarorlari 2026-08-29): filtr paneli + bemor yon-paneli
   ══════════════════════════════════════════════════════════════════════════ */

/* Filtr qatori: sana-navigatsiyasi + vrach/xizmat selektlari.
   Tor ekranda o'raladi, gorizontal surish paydo bo'lmaydi. */
.rec-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.rec-filters .fday-wrap { position: relative; }

/* Navbat tartibi kartasidagi bosiladigan qator */
.rec-qrow:hover { background: var(--border-soft) !important; }
/* 2026-08-31 (egasi qarori): yon panel olib tashlandi. Jadval butun ekran
   enida, yordamchi kartalar jadval ostida; ustun soni ekranga qarab. */
.rec-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px; align-items: stretch; }
/* 2026-09-01 (egasi qarori): to'rttasi bir xil o'lchamda - "Bugungi
   statistika"ning tabiiy balandligiga (270px) tenglashtirilgan.
   Sarlavha/subtitr qo'zg'almaydi, ma'lumot ko'payib ketsa faqat
   .rb-body ichida aylantiriladi (kartaning o'zi cho'zilmaydi). */
.rec-below > .card { height: 270px; display: flex; flex-direction: column; overflow: hidden; }
.rec-below .rb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Bemor yon-paneli (5-punkt: "yon panel") ──────────────────────────────
   Modal EMAS: operator kartani ko'rib turib navbat ro'yxatini yo'qotmaydi. */
.rec-drawer-ov {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(10, 11, 13, .28);
}
.rec-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1401;
  width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .16);
  animation: recDrawerIn .16s ease-out;
}
@keyframes recDrawerIn { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rec-drawer { animation: none; } }

.rec-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.rec-drawer-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.rec-drawer-foot {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--bg);
}
.rec-drawer-foot .btn { flex: 0 0 auto; }

.rec-sec { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rec-sec:last-child { border-bottom: none; }
.rec-sec-t {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.rec-kv {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 4px 0;
}
.rec-kv > span:first-child { color: var(--muted); flex: 0 0 auto; }
.rec-kv > strong, .rec-kv > span:last-child { text-align: right; min-width: 0; }

/* Tor ekranda panel to'liq kenglikda ochiladi */
@media (max-width: 560px) {
  .rec-drawer { width: 100%; border-left: none; }
}

/* ── Yon-paneldagi vrach tanlash (egasi 2026-08-29: "vrachlar ochiq vaqtlari
   ham aniq ko'rinib turishi kerak") ──────────────────────────────────────── */
.rd-doc {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  font: inherit; color: inherit;
}
.rd-doc:hover { background: var(--bg); border-color: var(--primary); }
.rd-doc:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rd-doc.cur { border-color: var(--primary); background: var(--primary-soft); }
.rd-doc.full { opacity: .78; }
.rd-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-doc-name { font-size: 13px; font-weight: 600; }
.rd-doc-free { font-size: 11px; font-weight: 700; white-space: nowrap; }
.rd-bar {
  height: 4px; margin: 6px 0 4px; border-radius: 2px;
  background: var(--border-soft); overflow: hidden;
}
.rd-bar-fill { height: 100%; border-radius: 2px; }
.rd-doc-sub { font-size: 11px; color: var(--muted); }

/* ══ VRACH NAVBATLARI (qabulxona, egasi 2026-08-30) ═══════════════════════
   Har vrachning o'z navbati: holat, blok-joylari, keyingi bemor. */
.dq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.dq-card { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.dq-card.rdy { border-color: var(--ok-line); box-shadow: 0 0 0 2px var(--success-soft); }
.dq-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--text); cursor: pointer; text-align: left; }
.dq-name:hover { color: var(--primary-ink); text-decoration: underline; }
.dq-pend { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center;
  border-radius: 50%; background: var(--amber-soft); color: var(--warn-ink); font-size: 9px; font-weight: 700; }
.dq-blocks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.dq-blk { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--bg);
  color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.dq-blk strong { color: var(--text); }
.dq-blk.full { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-bg); }
.dq-blk.full strong { color: var(--danger-ink); }
.dq-next { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.dq-next.empty { justify-content: center; padding: 9px; border-style: dashed; }
.dq-next.busy { background: var(--info-soft); border-color: var(--info-soft); }
.dq-id { font-family: var(--ff-mono, monospace); font-weight: 700; font-size: 12px; letter-spacing: .5px; }
/* Vrach bo'shadi -> keyingi bemor yashil va sekin qimirlaydi. Egasi (5.4):
   10 soniyadan keyin to'xtaydi, aks holda doimiy harakat e'tiborni o'ldiradi. */
.dq-next.go { background: var(--success-soft); border-color: var(--ok-line);
  animation: dqShake 2.4s ease-in-out 4; }
.dq-next.go .dq-id { color: var(--ok-ink); }
@keyframes dqShake {
  0%, 88%, 100% { transform: translateX(0); }
  91% { transform: translateX(-3px); }
  94% { transform: translateX(3px); }
  97% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) { .dq-next.go { animation: none; } }
/* Kelgan, lekin hali to'lamagan bemor: navbatda emas, kassada (2026-08-30) */
.dq-next.pay { background: var(--danger-bg); border-color: var(--danger-bg); }

/* ── Narxnoma (Sozlamalar > Narxnoma va imtiyozlar), 2026-09-01 ─────────── */
.pr-tag { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-soft); color: var(--muted); background: var(--bg); }
.pr-tag.on { background: var(--success-soft); color: var(--ok-ink); border-color: var(--ok-line); }
.pr-row-off td { opacity: .55; }

/* ── Vrach paneli IXCHAM rejimi (Q4) + kutish vaqti (Q2), 2026-09-02 ─────── */
.dq-list { display: flex; flex-direction: column; gap: 6px; }
.dq-card.compact { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(150px, 1fr) auto; gap: 6px 12px; align-items: center; padding: 7px 12px; }
.dq-card.compact .dq-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dq-card.compact .dq-blocks { margin: 0; }
.dq-card.compact .dq-row-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 1100px) { .dq-card.compact { grid-template-columns: 1fr; } .dq-card.compact .dq-row-act { justify-content: flex-start; } }
.wait-min { font-size: 10px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.wait-min.warn { color: var(--danger-ink); font-weight: 700; }

/* ── Mijozlar ro'yxati: amaliy belgilar, saralash, arxiv (2026-09-02 audit) ── */
.flag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.flag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-1); border: 1px solid transparent; white-space: nowrap; }
.flag-today { background: var(--ok-bg-2); color: var(--ok-ink); border-color: var(--ok-line); }
.flag-debt { background: var(--coral-soft); color: #991B1B; border-color: #FECACA; }
.flag-code { background: var(--warn-bg-2); color: var(--warn-ink); border-color: var(--warn-line); }
.flag-merge { background: var(--purple-soft); color: var(--purple-ink); border-color: var(--role-line); }
.flag-task { background: var(--info-soft); color: #1E40AF; border-color: #BFDBFE; }
.flag-stage { background: var(--bg); color: var(--text-2); border-color: var(--border); }
.flag-quiet { background: var(--bg); color: var(--muted); border-color: var(--border); }

/* Saralanadigan ustun sarlavhasi: <th> ichidagi tugma, matn bilan bir xil ko'rinadi */
.th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.th-sort:hover { color: var(--primary-ink); }
.th-sort i { opacity: .45; }
.th-sort:hover i { opacity: .9; }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--primary-ink); }
th[aria-sort="ascending"] .th-sort i, th[aria-sort="descending"] .th-sort i { opacity: 1; }

/* Arxivdagi mijoz qatori: ko'rinadi, lekin fon rejada */
tr.row-archived { opacity: .62; }
tr.row-archived:hover { opacity: 1; }

/* ── Mijozlar: egasi uchun kirim-oqimi strip (2026-09-02) ────────────────── */
.own-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1200px) { .own-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .own-strip { grid-template-columns: repeat(2, 1fr); } }
.own-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 12px 14px; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.own-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.own-card.warn { border-color: var(--warn-line); background: var(--warn-bg-2); }
.own-card.warn:hover { border-color: var(--amber); }
.own-label { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.own-value { font-size: 24px; font-weight: 800; font-family: var(--ff-display); line-height: 1.1; color: var(--text); }
.own-card.warn .own-value { color: var(--warn-ink); }
.own-sub { font-size: 10px; color: var(--muted); }
.chan-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--bg); }
.chan-seg { height: 100%; }
.chan-seg.seg-ig { background: linear-gradient(90deg, #F0679A, #C23CD6); }
.chan-seg.seg-tg { background: #2AA3E0; }
.chan-seg.seg-rec { background: var(--border-strong); }

/* ── 12. EGASI KOKPITI (2026-09-03 Faza A) ─────────────────────────────
   Namuna: TalentFlow (Pinterest, docs/screenshots/namuna-pinterest-talentflow-2026-09-03.jpg).
   Egasi qarori: namunani TO'LIQ ko'chirish, lekin kontrast qoidalari (v93,
   dark 2026-07-22) saqlanadi. Tokenlar :root da, ko'rinish hozircha FAQAT
   dashboardda (.main > .dash); boshqa ekranlarga C fazada tarqaladi.
   Ikonka-plitkalar metrika OILASI bo'yicha qat'iy xaritalangan (bezak emas):
   pul = ko'k, tashrif = sabzi, sifat = yashil, oqim = binafsha. */
:root {
  --canvas: #EEF3FB;
  --navy: #0B1F4A; --navy-2: #12305F; --on-navy: #FFFFFF; --on-navy-muted: rgba(255, 255, 255, .74);
  --r-card: 14px;
  --shadow-card: 0 1px 2px rgba(15, 26, 60, .04), 0 6px 18px rgba(15, 26, 60, .07);
  --m-money-bg: #DCE6FF;   --m-money-ink: #0029FF;
  --m-visit-bg: #FFE4D1;   --m-visit-ink: #C2410C;
  --m-quality-bg: #D6F5E3; --m-quality-ink: #047857;
  --m-flow-bg: #EDE4FF;    --m-flow-ink: #6D28D9;
  /* Grafik palitrasi: dataviz validator bilan tekshirilgan 5 kategorik rang
     (2026-09-03 auditi). "Boshqa" kulrang + tekstura, palitradan tashqarida.
     Holat ranglari (ok/ogohlantirish/xavf) kategorik palitrada ishlatilmaydi. */
  --chart-1: #0029FF; --chart-2: #0E9F9F; --chart-3: #B7791F; --chart-4: #7C3AED; --chart-5: #C2410C;
  --chart-other: #9AA3B2;
  --chart-forecast: rgba(0, 41, 255, .55);
  --chart-area: rgba(0, 41, 255, .13);
  --chart-grid: #E3E8F2;
  --chart-target: #4A4F59;
}
[data-theme="dark"] {
  --canvas: #12151D;
  --navy: #141F45; --navy-2: #1B2A5C; --on-navy: #F2F4F8; --on-navy-muted: rgba(242, 244, 248, .72);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  --m-money-bg: rgba(91, 124, 255, .18);  --m-money-ink: #8FA6FF;
  --m-visit-bg: rgba(232, 106, 56, .18);  --m-visit-ink: #F59E6B;
  --m-quality-bg: rgba(16, 185, 129, .18); --m-quality-ink: #6EE7B7;
  --m-flow-bg: rgba(147, 112, 234, .2);   --m-flow-ink: #B79DF5;
  --chart-1: #5B7CFF; --chart-2: #18A0A0; --chart-3: #C4871F; --chart-4: #9370EA; --chart-5: #E86A38;
  --chart-other: #6B7383;
  --chart-forecast: rgba(91, 124, 255, .6);
  --chart-area: rgba(91, 124, 255, .18);
  --chart-grid: #2A2E3A;
  --chart-target: #C3C9D6;
}

/* Kanvas va karta ko'rinishi faqat dashboardda */
.main:has(> .dash) { background: var(--canvas); }
.dash { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.dash .card { border-radius: var(--r-card); box-shadow: var(--shadow-card); border-color: transparent; padding: 16px; }
.dash .card-head { margin-bottom: var(--s-3); align-items: flex-start; gap: var(--s-2); }
.dash .card-head .btn.sm.ghost { color: var(--primary-ink); flex: none; }

/* Sarlavha bandi (navy): sana + PeriodControl + yangilanish vaqti */
.dash-head { position: sticky; top: calc(-1 * var(--s-4)); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--on-navy); border-radius: var(--r-card); padding: 12px 18px; box-shadow: var(--shadow-card); }
.dh-title { font-family: var(--ff-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--on-navy); margin: 0; }
.dh-sub { font-size: 12px; color: var(--on-navy-muted); margin-top: 2px; }
.dh-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.dh-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-navy-muted); white-space: nowrap; }
.dh-updated i, .dh-updated svg { width: 13px; height: 13px; }
.dash-head .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: var(--on-navy); }
.dash-head .btn:hover { background: rgba(255, 255, 255, .22); }

/* PeriodControl (yagona davr tanlagichi; STATE.period) */
.period-ctl { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-full); background: rgba(255, 255, 255, .12); }
.pc-btn { border: 0; background: transparent; color: var(--on-navy-muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-full); cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast); }
.pc-btn:hover { color: var(--on-navy); }
.pc-btn.on { background: var(--on-navy); color: var(--navy); }
.pc-btn:focus-visible { outline: 2px solid var(--on-navy); outline-offset: 1px; }
.pc-range { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pc-range input { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
/* Navy banddan tashqarida (boshqa ekranlar, C faza) */
.period-ctl.light { background: var(--surface-2); }
.period-ctl.light .pc-btn { color: var(--muted); }
.period-ctl.light .pc-btn.on { background: var(--primary); color: #fff; }

/* So'rang paneli (Faza A: joy + input + chiplar; javob kartasi B fazada) */
.ask-panel { padding: 14px 16px; }
.ask-row { display: flex; align-items: center; gap: 10px; }
.ask-ico { width: 20px; height: 20px; color: var(--primary); flex: none; }
.ask-input { flex: 1; min-width: 0; height: 46px; font: inherit; font-size: 15px; padding: 0 14px; border-radius: var(--r-4); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.ask-input::placeholder { color: var(--muted); }
.ask-input:focus { outline: 2px solid var(--primary); outline-offset: 0; background: var(--surface); }
.ask-go { height: 40px; width: 40px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
.ask-go i, .ask-go svg { width: 16px; height: 16px; }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ask-chip { font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.ask-chip:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.ask-hint { font-size: 11.5px; color: var(--muted); margin-left: auto; }

/* StatCard (5 ta; namuna anatomiyasi: plitka + yorliq + katta son + farq + progress) */
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.stat-card { display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sc-top { display: flex; align-items: flex-start; gap: 12px; }
.sc-tile { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.sc-tile i, .sc-tile svg { width: 22px; height: 22px; }
.sc-tile.money { background: var(--m-money-bg); color: var(--m-money-ink); }
.sc-tile.visit { background: var(--m-visit-bg); color: var(--m-visit-ink); }
.sc-tile.quality { background: var(--m-quality-bg); color: var(--m-quality-ink); }
.sc-tile.flow { background: var(--m-flow-bg); color: var(--m-flow-ink); }
.sc-main { min-width: 0; flex: 1; }
.sc-label { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.sc-value { font-family: var(--ff-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-value.ok { color: var(--ok-ink); }
.sc-value.bad { color: var(--danger-ink); }
.sc-value.warn { color: var(--warn-ink); }
.sc-unit { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* Sparkline son ostida, karta kengligida: o'ngda tursa "so'm" birligi bilan
   ustma-ust tushardi (1440 da o'lchandi) */
.sc-spark { width: 100%; height: 26px; margin-top: 2px; }
.sc-spark svg { width: 100%; height: 100%; display: block; }
.sc-foot { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; min-width: 0; }
.sc-foot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-foot.up { color: var(--success-700); }
.sc-foot.down { color: var(--coral-700); }
[data-theme="dark"] .sc-foot.up { color: var(--success); }
[data-theme="dark"] .sc-foot.down { color: #FF8A8A; }
.sc-foot i, .sc-foot svg { width: 13px; height: 13px; flex: none; }
.sc-insight { font-size: 12px; color: var(--text-2); line-height: 1.4; padding-top: 6px; border-top: 1px dashed var(--border-soft); margin-top: auto; }
.ch-progress { height: 6px; border-radius: 3px; background: var(--chart-grid); overflow: hidden; }
.ch-progress > span { display: block; height: 100%; background: var(--chart-1); border-radius: 3px; }
.ch-progress.full > span { background: var(--success-700); }

/* Qatorlar: chap 2/3, o'ng 1/3 */
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); }
.dash-row > .card, .dash-row > .dash-acc > .card { height: 100%; display: flex; flex-direction: column; }
/* 1fr = minmax(auto,1fr): min-width:0 bo'lmasa keng bola (SVG, nowrap satr) ustunni
   cho'zib .main ni gorizontal aylantirardi (390 da o'lchandi: 356 > 316) */
.dash-row > .card, .dash-acc { min-width: 0; }
.dash-acc > summary { display: none; }

/* InsightLine: grafik ostidagi bitta gap (REPORTS headline uslubi) */
.ins-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 13px; line-height: 1.45; color: var(--text); }
.ins-line i, .ins-line svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--primary); }
.ins-line.up i, .ins-line.up svg { color: var(--success-700); }
.ins-line.down i, .ins-line.down svg { color: var(--coral-700); }
[data-theme="dark"] .ins-line.up i, [data-theme="dark"] .ins-line.up svg { color: var(--success); }
[data-theme="dark"] .ins-line.down i, [data-theme="dark"] .ins-line.down svg { color: #FF8A8A; }
.ins-line.muted { color: var(--muted); }
.ins-line.muted i, .ins-line.muted svg { color: var(--muted); }
.ins-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }

/* Grafiklar (charts.js) */
.ch-svg { display: block; width: 100%; max-width: 100%; height: auto; color: var(--muted); }
.ch-area { max-height: 280px; }
.ch-empty { display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border-radius: var(--r-3); padding: 12px; text-align: center; }
.ch-bars { display: flex; flex-direction: column; gap: 8px; }
.ch-bar-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.ch-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bar-svg { width: 100%; height: 8px; display: block; }
.ch-bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.ch-bar-share { color: var(--muted); margin-left: 6px; }
.ch-donut-wrap { display: flex; align-items: center; gap: 14px; }
.ch-donut { width: 120px; height: 120px; flex: none; color: var(--text); }
.ch-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ch-lg-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ch-lg-dot.other { background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255, 255, 255, .55) 2px 4px); }
.ch-lg-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-lg-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-lg-pct { color: var(--muted); font-weight: 400; }
.ch-funnel { max-width: 380px; color: var(--text); }
.ch-heat { color: var(--text); }
.ch-spark { width: 100%; height: 100%; }

/* Diqqat talab qiladi: og'irlik bo'yicha, 3 ta ko'rinadi + "+N yana" */
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--border-soft); border-radius: var(--r-2); }
.att-row:hover, .conflict-row:hover { background: var(--bg); }
.att-row.att-crit { background: var(--danger-bg-2); }
.att-more[hidden] { display: none; }
.att-more-btn { margin-top: 6px; }

/* Ertangi kun */
.tm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tm-stat { background: var(--surface-2); border-radius: var(--r-3); padding: 10px 12px; min-width: 0; }
.tm-stat b { display: block; font-family: var(--ff-display); font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tm-stat span { font-size: 11.5px; color: var(--muted); }
.tm-blocks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.tm-block { background: var(--surface-2); border-radius: var(--r-2); padding: 6px 4px; text-align: center; font-size: 10.5px; color: var(--muted); min-width: 0; }
.tm-block b { display: block; color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tm-block .bar { display: block; height: 4px; border-radius: 2px; background: var(--chart-grid); margin-top: 5px; overflow: hidden; }
.tm-block .bar span { display: block; height: 100%; background: var(--m-visit-ink); }
.tm-block.full .bar span { background: var(--coral); }
.tm-calls { margin-top: 10px; }
.tm-call { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; background: transparent; border: 0; border-top: 1px solid var(--border-soft); padding: 8px 0; color: var(--text); cursor: pointer; }
.tm-call:hover { background: var(--bg); }
.tm-call:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tm-time { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); flex: none; }
.tm-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-reason { margin-left: auto; font-size: 11.5px; color: var(--warn-ink); flex: none; }

/* Moslashuv */
@media (max-width: 1400px) { .ask-hint { display: none; } }
@media (max-width: 1280px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* minmax(0,1fr): bitta ustunda ham track bola min-content'idan katta bo'lib ketmasin */
@media (max-width: 1100px) { .dash-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 5-karta yetim qolmasin: toq oxirgi karta butun qatorni oladi */
  .stat-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dash .card { padding: 14px; }
  /* Tor karta: plitka + yorliq bir qatorda, son ostida butun kenglikda. Ilgari son
     plitka yonida turib "1.3 mln so'm" kartadan chiqib ketardi va .main ni gorizontal
     aylantirardi (390 da o'lchandi); o'ralsa "1.3 / mln" bo'lib ikki qatorga tushardi. */
  .sc-top { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; align-items: center; }
  .sc-main { display: contents; }
  .sc-value { grid-column: 1 / -1; font-size: 22px; margin-top: 4px; }
  .stat-card { overflow: hidden; }
  .sc-tile { width: 38px; height: 38px; }
  .sc-tile i, .sc-tile svg { width: 19px; height: 19px; }
  .dash-head { padding: 12px 14px; gap: 10px; position: static; }
  .dh-title { font-size: 17px; }
  /* Telefon: "Hisobotlar" tugmasi yon menyuda bor, bandda faqat vaqt qoladi */
  .dh-right { margin-left: auto; align-self: flex-start; }
  .dh-right .btn { display: none; }
  .period-ctl { width: 100%; justify-content: space-between; overflow-x: auto; }
  .pc-btn { padding: 6px 9px; font-size: 12px; }
  .ask-input { height: 42px; font-size: 14px; }
  /* Chiplar bitta qatorda, yon tomonga suriladi (3 qatorga o'ralib 237px olardi) */
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex: none; }
  /* Mobil tartib: So'rang -> StatCard -> Diqqat -> qolgani akkordeon */
  .dash-row .att-card { order: -1; }
  .dash-acc > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 12px 14px; background: var(--surface); border-radius: var(--r-card); font-weight: 700; font-family: var(--ff-display); font-size: 14px; box-shadow: var(--shadow-card); }
  .dash-acc > summary::-webkit-details-marker { display: none; }
  .dash-acc > summary::after { content: '+'; font-size: 18px; color: var(--muted); line-height: 1; }
  .dash-acc[open] > summary { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: none; }
  .dash-acc[open] > summary::after { content: '\2212'; }
  .dash-acc[open] > .card { border-radius: 0 0 var(--r-card) var(--r-card); height: auto; }
  .tm-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-stats { gap: 6px; }
  .tm-stat { padding: 8px; }
  .tm-stat b { font-size: 17px; }
  .ch-donut-wrap { align-items: flex-start; }
  /* DEV paneli (pastki o'ng, suzuvchi) oxirgi kartani yopmasin (D11) */
  .main:has(> .dash) { padding-bottom: 84px; }
}

/* ── Jonli rejimda ULANMAGAN ekran ogohlantirishi (2026-09-06) ──────────
   Egasi qarori bilan `LIVE_SCREENS` endi ekranni yashirmaydi; ulanmagan
   ekran ustida shu banner turadi, aks holda demo raqamlar real deb
   o'qilishi mumkin. Ranglar theme-aware tokenlardan (light/dark ikkalasi). */
.demo-banner {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-line); border-radius: var(--r-md, 10px);
  font-size: 12.5px; line-height: 1.45;
}
.demo-banner b { font-weight: 700; }
@media print { .demo-banner { display: none; } }

/* Kanali noma'lum kontaktlar segmenti (2026-09-06): jonli bazada `created_via`
   ko'p qatorda NULL, ilgari ular jimgina Instagram deb sanalardi. */
.chan-seg.seg-unknown { background: repeating-linear-gradient(45deg, var(--border-strong) 0 6px, var(--border) 6px 12px); }


/* ══════════════════════════════════════════════════════════════════════
   LIVECHAT v166 (2026-09-07 auditi): uch bo'lakli ekran, viewport
   balandligi (sahifa aylanmaydi, har ustun o'zi aylanadi), inline uslublar
   klassga, ro'yxat identifikatsiyasi (ism birinchi, ID kichik), holat
   qatori, kun ajratgichi, baho tugmalari, filtr chiplari.
   ══════════════════════════════════════════════════════════════════════ */
.chat-page-head { margin-bottom: 12px; }
.page-title #chat-counts { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 8px; }
.chat-count { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); }
.chat-count.need { background: var(--coral-700); color: #fff; }
.chat-count.odam { background: var(--amber-soft, #FEF3C7); color: var(--warn-ink, #92400E); }
.live-chip, .demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; }
.live-chip { background: var(--sage-100, #E6F4EA); color: var(--ink, #1F3B2A); }
.live-chip.err { background: var(--coral-soft, #FEE2E2); color: var(--coral-ink, #991B1B); }
.demo-chip { background: var(--bg-2, #F2EFE9); color: var(--muted, #7A7368); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.live-dot.sse { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

.chat-card { overflow: clip; }
.chat-app { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; height: calc(100dvh - var(--head-h, 64px) - 44px); min-height: 480px; }
.chat-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); overflow: hidden; }
.chat-tools { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex: none; }
.chat-tools .search .input { padding-left: 32px; font-size: 13px; }
.chat-filters { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2, var(--muted)); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-full); cursor: pointer; line-height: 1.3; }
.chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip b { font-weight: 700; opacity: .85; }
.chip-select { font-size: 11px; padding: 3px 6px; height: auto; border-radius: var(--r-full); width: auto; }
.chat-list-items { flex: 1; min-height: 0; overflow-y: auto; }
.chat-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.chat-more { margin: 10px auto; display: block; }

.chat-item { padding: 10px 12px; gap: 10px; align-items: flex-start; }
.chat-item.need { box-shadow: inset 3px 0 0 var(--coral-700); }
.chat-item.active.need { box-shadow: none; }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ci-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ci-time { font-size: 11px; color: var(--muted); flex: none; }
.ci-last { font-size: 12px; color: var(--text-2, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.chat-item.need .ci-last { color: var(--text); font-weight: 500; }
.ci-out { color: var(--muted); margin-right: 3px; }
.ci-tags { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.ci-tags .ch-badge { font-size: 10px; padding: 1px 6px; }
.ci-handle { font-size: 10px; color: var(--muted); font-family: var(--ff-mono); overflow: hidden; text-overflow: ellipsis; max-width: 120px; white-space: nowrap; }
.ci-id { font-size: 9px; padding: 1px 5px; margin-left: auto; opacity: .75; }
.ci-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-1); background: var(--bg); color: var(--muted); }
.ci-tag.pause { background: var(--coral-soft, #FEE2E2); color: var(--coral-ink, #991B1B); }
.ci-tag.odam { background: var(--amber-soft, #FEF3C7); color: var(--warn-ink, #92400E); }
.ci-tag.lid { background: var(--sage-100, #E6F4EA); color: var(--ink, #1F3B2A); }
.ci-tag.taklif { background: var(--info-soft, #DBEAFE); color: var(--info-ink, #1E3A8A); }
.ci-tag.intent { margin-left: 6px; opacity: .8; }
.ci-unread { background: var(--coral-700); color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.avatar-anon { background: var(--bg); color: var(--muted); border: 1px dashed var(--border); }
.avatar-lg { width: 34px; height: 34px; font-size: 12px; }

.chat-msgs { min-height: 0; }
.chat-head { flex: none; min-height: 56px; }
.chat-head .ci-name { max-width: 260px; }
.chat-stream { min-height: 0; }
.chat-day { align-self: center; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-full); }
.chat-sys { align-self: center; padding: 6px 12px; background: rgba(124, 58, 237, .1); border-radius: 99px; font-size: 11px; color: var(--purple-ink); font-weight: 600; }
.chat-loading { align-self: center; font-size: 11px; color: var(--muted); }
.chat-bubble.op { background: var(--primary-900, #0B1330); }
.chat-bubble.fail { border: 1px solid var(--coral-700); background: var(--coral-soft, #FEE2E2); color: var(--coral-ink, #991B1B); }
.chat-bubble .time { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fb-btns { display: inline-flex; gap: 2px; margin-left: 6px; opacity: 0; transition: opacity .15s; }
.chat-bubble:hover .fb-btns, .fb-btns:has(.on) { opacity: 1; }
.fb { border: 0; background: transparent; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; opacity: .6; filter: grayscale(1); }
.fb:hover, .fb.on { opacity: 1; filter: none; }
.chat-input { flex: none; }
.chat-pause-opt { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-status-line { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--surface); }

.chat-side { min-height: 0; }
.ctx-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ctx-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.ctx-val { font-size: 13px; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ctx-block { margin-bottom: 14px; }
.ctx-title { font-size: 11px; font-weight: 700; color: var(--text-2, var(--muted)); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ctx-summary { line-height: 1.5; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-3); padding: 8px 10px; }

@media (max-width: 1320px) { .chat-app { grid-template-columns: 280px minmax(0, 1fr) 240px; } }
@media (max-width: 1024px) {
  .chat-app { height: auto; min-height: 70dvh; }
  /* Mobil: RESP-01 qoidasi saqlanadi, ro'yxat va yon panel faqat tugma bilan ochiladi */
  .chat-list, .chat-side { display: none; }
  .chat-app.show-list .chat-list { display: flex; }
  .chat-app.show-side .chat-side { display: block; }
  .chat-list-items { max-height: 60dvh; }
}

/* Kirish ekrani: ikkinchi darajali yo'l (o'qish tokeni) yig'ilgan turadi */
.auth-alt { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.auth-alt > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
.auth-alt > summary::-webkit-details-marker { display: none; }
.auth-alt > summary::before { content: '+ '; font-weight: 700; }
.auth-alt[open] > summary::before { content: '- '; }
.auth-alt > summary:hover { color: var(--primary-ink); }

/* Yon paneldagi Instagram handle: qidiruvda ishlatiladi, ko'chirishga qulay */
.ctx-handle { font-family: var(--ff-mono); font-size: 12px; word-break: break-all; }

/* ══════════════════════════════════════════════════════════
   ISHGA TUSHIRISH v175 (2026-09-08): "Tez kunda" bo'limlari
   Jonli rejimda ishga tushirish doirasidan tashqaridagi menyu bandi xira
   ko'rinadi (bosiladi, ichida tushuntirish chiqadi). Demo rejimda bu klass
   umuman qo'yilmaydi.
   ══════════════════════════════════════════════════════════ */
.nav-item.soon .ni-label { opacity: .55; }
.nav-item.soon i { opacity: .55; }
.nav-item.soon:hover .ni-label, .nav-item.soon:hover i { opacity: .8; }

/* ══════════════════════════════════════════════════════════
   CHUQUR HAVOLA NISHONI (Klinika faktlari, 2026-09-15)
   "Prompt o'zgarishlari" jurnalidagi "Tahrirlash" tugmasi kerakli tabni
   ochadi va nishon elementga 3 soniyaga `.fokus` sinfini qo'yadi
   (`app.js _faktFokusQolla`). Qoida umuman yo'q edi: sahifa kerakli joyga
   aylanardi, lekin HECH NARSA o'zgarmasdi va menejer qaysi maydonga olib
   kelinganini ko'rmasdi. Fayl OXIRIDA turadi: `.input` bilan bir xil
   solishtirma og'irlikda bo'lgani uchun keyingi qoida g'olib chiqadi.
   Yangi rang yo'q - mavjud aksent tokenlari.
   ══════════════════════════════════════════════════════════ */
.fokus, .fokus:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-2);
  background: var(--primary-soft);
  box-shadow: 0 0 0 4px var(--primary-glow);
  transition: background-color var(--t), box-shadow var(--t), outline-color var(--t);
}
/* Jadval katagi yoki qatoriga tushsa: `outline-offset` qo'shni katakni
   qirqib ketmasin, ramka ichkariga chiziladi. */
td.fokus, th.fokus, tr.fokus { outline-offset: -2px; border-radius: 0; }


/* ── TRIGGERLAR bo'limi (2026-09-15 dizayn auditi, docs/TRIGGER_AUDIT_2026-09-15.md 4.3) ──
   Boshqaruv ekrani: tepada "Ishlayotganlar" kartalari, pastda oilalar
   yig'iluvchi bo'lim, qatorda faqat nom + tavsif + switch. Oila rangi
   faqat chap chetdagi chiziq (--trg-oila), holat ranglari bilan aralashmaydi. */
.trg-tabs { margin-bottom: var(--s-4); background: var(--surface); border: 1px solid var(--border-soft); border-bottom: 1px solid var(--border); border-radius: var(--r-4) var(--r-4) 0 0; }
.trg-toolbar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-4); }
.trg-toolbar .input { max-width: 320px; }
.trg-faol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-3); }
.trg-faol { position: relative; border: 1px solid var(--border-soft); border-radius: var(--r-4); padding: 12px 12px 12px 16px; background: var(--surface); overflow: hidden; min-width: 0; }
.trg-faol::before, .trg-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--trg-oila, var(--border-strong)); border-radius: 0 2px 2px 0; }
.trg-row { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px 10px 16px; border-top: 1px solid var(--border-soft); }
.trg-list > .trg-row:first-child { border-top: 0; }
.trg-main { flex: 1; min-width: 0; }
.trg-name { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); text-align: left; line-height: 1.35; }
.trg-name:hover { color: var(--primary-ink); text-decoration: underline; }
.trg-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.trg-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.trg-qachon { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.trg-stat { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.trg-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }
.trg-oila > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.trg-oila > summary::-webkit-details-marker { display: none; }
.trg-oila > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-2); }
.trg-oila[open] > summary { margin-bottom: 6px; }
.trg-chev { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform var(--t-fast); }
.trg-oila[open] .trg-chev { transform: rotate(180deg); }
.trg-korik { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; margin-top: 14px; border: 1px solid var(--border-soft); border-radius: var(--r-3); background: var(--bg); cursor: pointer; }
.trg-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.trg-dl dt { color: var(--muted); }
.trg-dl dd { margin: 0; }
.navbat-matn { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--primary-soft); background: var(--bg); border-radius: 0 var(--r-3) var(--r-3) 0; font-size: 13px; line-height: 1.5; }
.lid-tel { color: var(--primary-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lid-tel:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .trg-faol-grid { grid-template-columns: 1fr; }
  .trg-row { align-items: flex-start; padding-left: 14px; }
  .trg-row .switch { margin-top: 2px; }
  .trg-toolbar .input { max-width: none; flex: 1 1 100%; }
  .trg-dl { grid-template-columns: 1fr; gap: 2px; }
  .trg-dl dt { margin-top: 6px; }
}