/* ==================================================================
       shadcn/ui DIZAYN TIZIMI  —  D1: tokenlar
       ------------------------------------------------------------------
       Token nomlari va qiymatlari shadcn/ui (v4, OKLCH) bilan bir xil.
       Shu sababli shadcn hujjatidagi har qanday komponentni bu yerga
       o'zgartirmasdan ko'chirish mumkin.
       ================================================================== */
    :root {
        /* --- shadcn asosiy tokenlar (light) --- */
        --background:            oklch(1 0 0);
        --foreground:            oklch(0.145 0 0);
        --card:                  oklch(1 0 0);
        --card-foreground:       oklch(0.145 0 0);
        --popover:               oklch(1 0 0);
        --popover-foreground:    oklch(0.145 0 0);
        --primary:               oklch(0.205 0 0);
        --primary-foreground:    oklch(0.985 0 0);
        --secondary:             oklch(0.97 0 0);
        --secondary-foreground:  oklch(0.205 0 0);
        --muted:                 oklch(0.97 0 0);
        --muted-foreground:      oklch(0.556 0 0);
        --accent:                oklch(0.97 0 0);
        --accent-foreground:     oklch(0.205 0 0);
        --destructive:           oklch(0.577 0.245 27.325);
        --destructive-foreground: oklch(0.985 0 0);
        --border:                oklch(0.922 0 0);
        --input:                 oklch(0.922 0 0);
        --ring:                  oklch(0.708 0 0);

        /* --- Yon panel (shadcn sidebar tokenlari) --- */
        --sidebar:                     oklch(0.985 0 0);
        --sidebar-foreground:          oklch(0.145 0 0);
        --sidebar-primary:             oklch(0.205 0 0);
        --sidebar-primary-foreground:  oklch(0.985 0 0);
        --sidebar-accent:              oklch(0.97 0 0);
        --sidebar-accent-foreground:   oklch(0.205 0 0);
        --sidebar-border:              oklch(0.922 0 0);
        --sidebar-ring:                oklch(0.708 0 0);

        /* --- Diagramma ranglari (shadcn chart-1..5) --- */
        --chart-1: oklch(0.646 0.222 41.116);
        --chart-2: oklch(0.6 0.118 184.704);
        --chart-3: oklch(0.398 0.07 227.392);
        --chart-4: oklch(0.828 0.189 84.429);
        --chart-5: oklch(0.769 0.188 70.08);

        /* --- Ish jarayoni ranglari (bu loyihaga xos, shadcn uslubida) ---
           success = yakunlangan ish, warning = kutilmoqda, info = jarayonda */
        --success:              oklch(0.596 0.145 163.225);
        --success-foreground:   oklch(0.985 0 0);
        --success-muted:        oklch(0.972 0.024 157.000);
        --warning:              oklch(0.769 0.188 70.08);
        --warning-foreground:   oklch(0.216 0.06 70);
        --warning-muted:        oklch(0.977 0.036 95.000);
        --info:                 oklch(0.546 0.215 262.881);
        --info-foreground:      oklch(0.985 0 0);
        --info-muted:           oklch(0.972 0.016 255.000);
        --destructive-muted:    oklch(0.971 0.013 17.38);

        /* --- Radius (shadcn: --radius = 0.625rem) --- */
        --radius:     0.625rem;
        --radius-sm:  calc(var(--radius) - 4px);
        --radius-md:  calc(var(--radius) - 2px);
        --radius-lg:  var(--radius);
        --radius-xl:  calc(var(--radius) + 4px);

        /* --- Soya (shadcn shadow shkalasi) --- */
        --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
        --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
        --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.10), 0 2px 4px -2px oklch(0 0 0 / 0.10);
        --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.10), 0 4px 6px -4px oklch(0 0 0 / 0.10);
        --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.10), 0 8px 10px -6px oklch(0 0 0 / 0.10);

        /* --- Shrift --- */
        --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

        /* --- Bo'shliq shkalasi --- */
        --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
        --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
    }

    /* --- Qorong'i rejim: qo'lda tanlangani ustun turadi --- */
    :root[data-theme="dark"] {
        --background:            oklch(0.145 0 0);
        --foreground:            oklch(0.985 0 0);
        --card:                  oklch(0.205 0 0);
        --card-foreground:       oklch(0.985 0 0);
        --popover:               oklch(0.269 0 0);
        --popover-foreground:    oklch(0.985 0 0);
        --primary:               oklch(0.922 0 0);
        --primary-foreground:    oklch(0.205 0 0);
        --secondary:             oklch(0.269 0 0);
        --secondary-foreground:  oklch(0.985 0 0);
        --muted:                 oklch(0.269 0 0);
        --muted-foreground:      oklch(0.708 0 0);
        --accent:                oklch(0.371 0 0);
        --accent-foreground:     oklch(0.985 0 0);
        --destructive:           oklch(0.704 0.191 22.216);
        --destructive-foreground: oklch(0.985 0 0);
        --border:                oklch(1 0 0 / 12%);
        --input:                 oklch(1 0 0 / 18%);
        --ring:                  oklch(0.556 0 0);

        --sidebar:                     oklch(0.205 0 0);
        --sidebar-foreground:          oklch(0.985 0 0);
        --sidebar-primary:             oklch(0.985 0 0);
        --sidebar-primary-foreground:  oklch(0.205 0 0);
        --sidebar-accent:              oklch(0.269 0 0);
        --sidebar-accent-foreground:   oklch(0.985 0 0);
        --sidebar-border:              oklch(1 0 0 / 12%);
        --sidebar-ring:                oklch(0.439 0 0);

        --chart-1: oklch(0.488 0.243 264.376);
        --chart-2: oklch(0.696 0.17 162.48);
        --chart-3: oklch(0.769 0.188 70.08);
        --chart-4: oklch(0.627 0.265 303.9);
        --chart-5: oklch(0.645 0.246 16.439);

        --success:            oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.205 0 0);
        --success-muted:      oklch(0.28 0.05 163);
        --warning:            oklch(0.828 0.189 84.429);
        --warning-foreground: oklch(0.205 0 0);
        --warning-muted:      oklch(0.30 0.06 84);
        --info:               oklch(0.623 0.214 259.815);
        --info-foreground:    oklch(0.985 0 0);
        --info-muted:         oklch(0.28 0.06 260);
        --destructive-muted:  oklch(0.28 0.07 25);

        --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.35);
        --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.45), 0 1px 2px -1px oklch(0 0 0 / 0.45);
        --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.45), 0 2px 4px -2px oklch(0 0 0 / 0.45);
        --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.50), 0 4px 6px -4px oklch(0 0 0 / 0.50);
        --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.55), 0 8px 10px -6px oklch(0 0 0 / 0.55);
    }

    /* ------------------------------------------------------------------
       VAQTINCHALIK KO'PRIK — eski token nomlari
       ------------------------------------------------------------------
       HTML ichida hali 400 ga yaqin inline uslub bor va ular eski
       nomlarni ishlatadi (var(--text-2), var(--alarm) ...). D3-D9
       bosqichlarida har bir ekran ko'chirilgan sari bu nomlar yo'qoladi.
       Yakuniy bosqichda bu blok butunlay o'chiriladi.
       ------------------------------------------------------------------ */
    :root {
        --paper:      var(--background);
        --surface:    var(--card);
        --surface-2:  var(--muted);
        --line:       var(--border);
        --line-soft:  var(--border);
        --text:       var(--foreground);
        --text-2:     var(--muted-foreground);
        --alarm:      var(--destructive);
        --alarm-bg:   var(--destructive-muted);
        --go:         var(--success);
        --go-bg:      var(--success-muted);
        --r:          var(--radius-md);
        --ff-body:    var(--font-sans);
        --ff-display: var(--font-sans);
    }

    /* ==================================================================
       D2: POYDEVOR QATLAMI
       ================================================================== */
    *, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

    html { -webkit-text-size-adjust: 100%; }

    body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: 0.875rem;
        line-height: 1.5715;
        background: var(--background);
        color: var(--foreground);
        font-feature-settings: "cv02","cv03","cv04","cv11";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Raqamlar jadvalda ustma-ust tik tursin */
    table, .tabular, input[type="number"], .ui-money, .ui-num { font-variant-numeric: tabular-nums; }

    a { color: inherit; }

    ::selection { background: color-mix(in oklch, var(--primary) 22%, transparent); }

    /* Aylantirish chizig'i — shadcn uslubidagi ingichka */
    * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

    /* Klaviatura fokusi — shadcn ring */
    :where(a, button, [role="button"], summary):focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

    /* ---------- Tipografiya ---------- */
    h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--foreground); }
    h1 { font-size: 1.5rem;   line-height: 1.25; }
    h2 { font-size: 1.25rem;  line-height: 1.3;  margin: 0 0 var(--sp-1); }
    h3 { font-size: 1rem;     line-height: 1.4;  margin: var(--sp-4) 0 var(--sp-2); }
    h4 { font-size: 0.875rem; line-height: 1.4; }
    p  { margin: 0 0 var(--sp-2); }

    .ui-muted    { color: var(--muted-foreground); }
    .ui-small    { font-size: 0.8125rem; }
    .ui-tiny     { font-size: 0.75rem; }
    .ui-mono     { font-family: var(--font-mono); }
    .ui-lead     { font-size: 1rem; color: var(--muted-foreground); }
    .ui-num-lg   { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .ui-num-xl   { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }

    /* ==================================================================
       KOMPONENT 1 — Button
       Variantlar: default | secondary | destructive | outline | ghost |
                   link | success   ×   O'lchamlar: sm | (md) | lg | icon
       ================================================================== */
    .btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--sp-2); white-space: nowrap; flex-shrink: 0;
        height: 2.25rem; padding: 0 var(--sp-4);
        border: 1px solid transparent; border-radius: var(--radius-md);
        font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1;
        text-decoration: none; cursor: pointer; user-select: none;
        transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
        background: transparent; color: var(--foreground);
    }
    .btn:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent); }
    .btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
    .btn > svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    .btn--default      { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
    .btn--default:hover{ background: color-mix(in oklch, var(--primary) 88%, var(--background)); }

    .btn--secondary      { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-xs); }
    .btn--secondary:hover{ background: color-mix(in oklch, var(--secondary) 80%, var(--foreground) 4%); }

    .btn--destructive      { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-xs); }
    .btn--destructive:hover{ background: color-mix(in oklch, var(--destructive) 88%, black); }
    .btn--destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 35%, transparent); }

    .btn--success      { background: var(--success); color: var(--success-foreground); box-shadow: var(--shadow-xs); }
    .btn--success:hover{ background: color-mix(in oklch, var(--success) 88%, black); }

    .btn--outline      { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
    .btn--outline:hover{ background: var(--accent); color: var(--accent-foreground); }

    .btn--ghost      { background: transparent; }
    .btn--ghost:hover{ background: var(--accent); color: var(--accent-foreground); }

    .btn--link { background: transparent; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }

    .btn--sm   { height: 2rem;    padding: 0 var(--sp-3); font-size: 0.8125rem; border-radius: var(--radius-sm); gap: var(--sp-1); }
    .btn--lg   { height: 2.5rem;  padding: 0 var(--sp-6); font-size: 0.9375rem; }
    .btn--xl   { height: 3rem;    padding: 0 var(--sp-8); font-size: 1rem; }
    .btn--icon { width: 2.25rem;  padding: 0; }
    .btn--icon.btn--sm { width: 2rem; }
    .btn--block{ width: 100%; }

    /* ==================================================================
       KOMPONENT 2-6 — Input, Label, Textarea, Select, Checkbox, Switch
       ================================================================== */
    .ui-field { display: grid; gap: var(--sp-2); min-width: 0; }

    .ui-label {
        display: flex; align-items: center; gap: var(--sp-2);
        font-size: 0.875rem; font-weight: 500; line-height: 1;
        color: var(--foreground); user-select: none;
    }
    .ui-label .req { color: var(--destructive); }

    .ui-input, .ui-select, .ui-textarea,
    input[type="text"], input[type="number"], input[type="date"],
    input[type="password"], input[type="tel"], input[type="search"], select, textarea {
        display: block; width: 100%; min-width: 0;
        height: 2.25rem; padding: 0 var(--sp-3);
        background: var(--background); color: var(--foreground);
        border: 1px solid var(--input); border-radius: var(--radius-md);
        font-family: inherit; font-size: 0.875rem; line-height: 1.5;
        box-shadow: var(--shadow-xs);
        transition: border-color .15s, box-shadow .15s;
        outline: none;
    }
    textarea, .ui-textarea { height: auto; min-height: 4.5rem; padding: var(--sp-2) var(--sp-3); resize: vertical; }

    input::placeholder, textarea::placeholder { color: var(--muted-foreground); }

    input:focus-visible, select:focus-visible, textarea:focus-visible,
    .ui-input:focus, .ui-select:focus, .ui-textarea:focus {
        border-color: var(--ring);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent);
    }
    input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--muted); }
    .ui-input--invalid, [aria-invalid="true"] { border-color: var(--destructive) !important; }
    .ui-input--invalid:focus-visible, [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 30%, transparent) !important; }

    .ui-input--sm { height: 2rem; font-size: 0.8125rem; }
    .ui-input--lg { height: 2.5rem; font-size: 0.9375rem; }

    /* Select — shadcn ko'rinishidagi o'z belgisi bilan */
    select, .ui-select {
        appearance: none; -webkit-appearance: none;
        padding-right: var(--sp-8); cursor: pointer;
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                          linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: right 1rem center, right 0.7rem center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
    }

    /* Raqam maydonidagi o'q tugmalar olib tashlanadi — qiymatni to'sib qo'yardi */
    input[type="number"] { -moz-appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .ui-hint  { font-size: 0.8125rem; color: var(--muted-foreground); }
    .ui-error { font-size: 0.8125rem; color: var(--destructive); font-weight: 500; }

    /* Checkbox va Switch */
    .ui-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: 0.875rem; }
    .ui-check input[type="checkbox"] {
        appearance: none; -webkit-appearance: none;
        width: 1rem; height: 1rem; flex-shrink: 0; padding: 0; margin: 0;
        border: 1px solid var(--input); border-radius: var(--radius-sm);
        background: var(--background); box-shadow: var(--shadow-xs); cursor: pointer;
        display: inline-grid; place-content: center;
    }
    .ui-check input[type="checkbox"]::after {
        content: ""; width: 0.5rem; height: 0.3rem;
        border-left: 2px solid var(--primary-foreground); border-bottom: 2px solid var(--primary-foreground);
        transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
    }
    .ui-check input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
    .ui-check input[type="checkbox"]:checked::after { opacity: 1; }

    /* Radio — checkbox bilan bir xil, faqat dumaloq va ichida nuqta */
    .ui-radio { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: 0.875rem; }
    .ui-radio input[type="radio"] {
        appearance: none; -webkit-appearance: none;
        width: 1rem; height: 1rem; flex-shrink: 0; padding: 0; margin: 0;
        border: 1px solid var(--input); border-radius: 999px;
        background: var(--background); box-shadow: var(--shadow-xs); cursor: pointer;
        display: inline-grid; place-content: center;
    }
    .ui-radio input[type="radio"]::after {
        content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px;
        background: var(--primary-foreground); transform: scale(0);
    }
    .ui-radio input[type="radio"]:checked { background: var(--primary); border-color: var(--primary); }
    .ui-radio input[type="radio"]:checked::after { transform: scale(1); }
    .ui-radio input[type="radio"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

    .ui-switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: 0.875rem; }
    .ui-switch input { appearance: none; -webkit-appearance: none; width: 2rem; height: 1.15rem; margin: 0; flex-shrink: 0;
        background: var(--input); border: 1px solid transparent; border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; }
    .ui-switch input::after { content: ""; position: absolute; top: 1px; left: 1px; width: 0.9rem; height: 0.9rem;
        border-radius: 999px; background: var(--background); box-shadow: var(--shadow-sm); transition: transform .15s; }
    .ui-switch input:checked { background: var(--primary); }
    .ui-switch input:checked::after { transform: translateX(0.85rem); }

    /* ==================================================================
       KOMPONENT 7 — Card
       ================================================================== */
    .ui-card {
        display: flex; flex-direction: column; gap: var(--sp-6);
        background: var(--card); color: var(--card-foreground);
        border: 1px solid var(--border); border-radius: var(--radius-xl);
        padding: var(--sp-6) 0; box-shadow: var(--shadow-xs);
        min-width: 0;
    }
    .ui-card--flat  { box-shadow: none; }
    .ui-card--tight { gap: var(--sp-4); padding: var(--sp-4) 0; }
    .ui-card-header {
        display: grid; gap: var(--sp-1); padding: 0 var(--sp-6);
        grid-template-columns: 1fr auto; align-items: start;
    }
    .ui-card-title { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; grid-column: 1; }
    .ui-card-desc  { font-size: 0.8125rem; color: var(--muted-foreground); grid-column: 1; }
    .ui-card-action{ grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: flex; gap: var(--sp-2); align-items: center; }
    .ui-card-body  { padding: 0 var(--sp-6); min-width: 0; }
    .ui-card-footer{ padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
    .ui-card--tight .ui-card-header,
    .ui-card--tight .ui-card-body,
    .ui-card--tight .ui-card-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .ui-card-sep { height: 1px; background: var(--border); border: 0; margin: 0; }

    /* ==================================================================
       KOMPONENT 8 — Badge
       ================================================================== */
    .ui-badge {
        display: inline-flex; align-items: center; gap: var(--sp-1);
        padding: 0.125rem var(--sp-2); border-radius: var(--radius-sm);
        border: 1px solid transparent; white-space: nowrap;
        font-size: 0.75rem; font-weight: 500; line-height: 1.35; width: fit-content;
    }
    .ui-badge--default     { background: var(--primary); color: var(--primary-foreground); }
    .ui-badge--secondary   { background: var(--secondary); color: var(--secondary-foreground); }
    .ui-badge--outline     { border-color: var(--border); color: var(--foreground); }
    .ui-badge--destructive { background: var(--destructive); color: var(--destructive-foreground); }
    .ui-badge--success     { background: var(--success-muted); color: var(--success); border-color: color-mix(in oklch, var(--success) 30%, transparent); }
    .ui-badge--warning     { background: var(--warning-muted); color: var(--warning-foreground); border-color: color-mix(in oklch, var(--warning) 40%, transparent); }
    .ui-badge--info        { background: var(--info-muted); color: var(--info); border-color: color-mix(in oklch, var(--info) 30%, transparent); }
    .ui-badge--danger      { background: var(--destructive-muted); color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 30%, transparent); }
    .ui-badge--lg          { font-size: 0.8125rem; padding: 0.25rem var(--sp-3); }

    /* ==================================================================
       KOMPONENT 9 — Table
       ================================================================== */
    .ui-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
    .ui-table-wrap--tall { max-height: 28rem; overflow-y: auto; }
    .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; caption-side: bottom; }
    .ui-table thead th {
        position: sticky; top: 0; z-index: 1;
        background: var(--muted); color: var(--muted-foreground);
        font-size: 0.75rem; font-weight: 500; text-align: left; white-space: nowrap;
        padding: var(--sp-2) var(--sp-4); height: 2.5rem;
        border-bottom: 1px solid var(--border);
    }
    .ui-table tbody td { padding: var(--sp-2) var(--sp-4); height: 2.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .ui-table tbody tr:last-child td { border-bottom: 0; }
    .ui-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 55%, transparent); }
    .ui-table tfoot td { padding: var(--sp-2) var(--sp-4); font-weight: 600; background: var(--muted); border-top: 1px solid var(--border); }
    .ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .ui-table caption { padding: var(--sp-3); color: var(--muted-foreground); font-size: 0.8125rem; }
    .ui-table--compact thead th      { padding: var(--sp-1) var(--sp-2); height: 2rem; }
    .ui-table--compact tbody td      { padding: var(--sp-1) var(--sp-2); height: auto; }
    .ui-table--compact .ui-input     { height: 1.75rem; font-size: 0.8125rem; padding: 0 var(--sp-2); }
    .ui-table--compact .btn          { height: 1.75rem; padding: 0 var(--sp-2); font-size: 0.8125rem; }
    .ui-table--compact .btn--icon    { width: 1.75rem; padding: 0; }

    /* ==================================================================
       KOMPONENT 10 — Tabs
       ================================================================== */
    .ui-tabs { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1);
        background: var(--muted); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; overflow-x: auto; }
    .ui-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
        height: 1.75rem; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-md);
        font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none;
        white-space: nowrap; cursor: pointer; background: transparent; transition: all .15s; }
    .ui-tab:hover { color: var(--foreground); }
    .ui-tab[aria-selected="true"], .ui-tab.is-active {
        background: var(--background); color: var(--foreground);
        border-color: var(--border); box-shadow: var(--shadow-xs);
    }

    /* ==================================================================
       KOMPONENT 13 — Alert
       ================================================================== */
    .ui-alert {
        display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3);
        align-items: start; padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--border); border-radius: var(--radius-lg);
        background: var(--card); color: var(--card-foreground);
        font-size: 0.875rem; margin-bottom: var(--sp-4);
    }
    .ui-alert-icon  { font-size: 1rem; line-height: 1.3; grid-row: 1 / span 2; }
    .ui-alert-title { font-weight: 500; line-height: 1.35; }
    .ui-alert-desc  { color: var(--muted-foreground); font-size: 0.8125rem; }
    .ui-alert--destructive { border-color: color-mix(in oklch, var(--destructive) 35%, transparent); background: var(--destructive-muted); color: var(--destructive); }
    .ui-alert--destructive .ui-alert-desc { color: color-mix(in oklch, var(--destructive) 80%, var(--foreground)); }
    .ui-alert--success { border-color: color-mix(in oklch, var(--success) 35%, transparent); background: var(--success-muted); color: var(--success); }
    .ui-alert--warning { border-color: color-mix(in oklch, var(--warning) 45%, transparent); background: var(--warning-muted); color: var(--warning-foreground); }
    .ui-alert--info    { border-color: color-mix(in oklch, var(--info) 30%, transparent); background: var(--info-muted); color: var(--info); }

    /* ==================================================================
       KOMPONENT 14 — Dialog
       ================================================================== */
    .ui-dialog-overlay { position: fixed; inset: 0; z-index: 90; background: oklch(0 0 0 / 0.55); backdrop-filter: blur(2px); }
    .ui-dialog {
        position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); overflow-y: auto;
        display: grid; gap: var(--sp-4);
        background: var(--popover); color: var(--popover-foreground);
        border: 1px solid var(--border); border-radius: var(--radius-xl);
        padding: var(--sp-6); box-shadow: var(--shadow-xl);
    }
    .ui-dialog-header { display: grid; gap: var(--sp-1); }
    .ui-dialog-title  { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
    .ui-dialog-desc   { font-size: 0.8125rem; color: var(--muted-foreground); }
    .ui-dialog-footer { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
    .ui-dialog-close  { position: absolute; top: var(--sp-4); right: var(--sp-4); }

    /* ==================================================================
       KOMPONENT 15 — Progress
       ================================================================== */
    .ui-progress { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 999px; background: var(--muted); }
    /* Rulon rangi oq bo'lsa fon bilan qo'shilib ketardi — ichki kontur ajratib turadi */
    .ui-progress > i { display: block; height: 100%; background: var(--primary); border-radius: 999px;
                       box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.16); transition: width .3s ease; }
    .ui-progress--sm { height: 0.375rem; }
    .ui-progress--lg { height: 0.75rem; }
    .ui-progress--low  > i { background: var(--destructive) !important; }
    .ui-progress--warn > i { background: var(--warning) !important; }

    /* ==================================================================
       KOMPONENT 16-18 — Separator, Avatar, Tooltip
       ================================================================== */
    .ui-sep { height: 1px; width: 100%; background: var(--border); border: 0; margin: var(--sp-4) 0; flex-shrink: 0; }
    .ui-sep--v { width: 1px; height: auto; align-self: stretch; margin: 0 var(--sp-3); }

    .ui-avatar {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 2rem; height: 2rem; border-radius: 999px;
        background: var(--muted); color: var(--muted-foreground);
        font-size: 0.75rem; font-weight: 600; text-transform: uppercase; user-select: none;
        overflow: hidden;
    }
    .ui-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
    .ui-avatar--sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
    .ui-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .ui-tip { position: relative; display: inline-flex; }
    .ui-tip::after {
        content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
        background: var(--primary); color: var(--primary-foreground);
        font-size: 0.75rem; padding: 0.25rem var(--sp-2); border-radius: var(--radius-sm);
        white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 70;
    }
    .ui-tip:hover::after, .ui-tip:focus-within::after { opacity: 1; }

    /* ==================================================================
       KOMPONENT 19-20 — Empty state, Skeleton
       ================================================================== */
    .ui-empty {
        display: grid; gap: var(--sp-2); justify-items: center; text-align: center;
        padding: var(--sp-10) var(--sp-4);
        border: 1px dashed var(--border); border-radius: var(--radius-lg);
        color: var(--muted-foreground); background: var(--card);
    }
    .ui-empty-icon  { font-size: 1.5rem; opacity: .7; }
    .ui-empty-title { font-size: 0.9375rem; font-weight: 500; color: var(--foreground); }
    .ui-empty-desc  { font-size: 0.8125rem; }

    .ui-skeleton { background: var(--muted); border-radius: var(--radius-md); animation: ui-pulse 1.8s ease-in-out infinite; }
    @keyframes ui-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

    /* ==================================================================
       YORDAMCHI JOYLASHUV KLASSLARI
       ================================================================== */
    .ui-stack   { display: grid; gap: var(--sp-4); min-width: 0; }
    .ui-stack-2 { display: grid; gap: var(--sp-2); min-width: 0; }
    .ui-row     { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
    .ui-row--between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
    .ui-row--end     { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
    .ui-grid    { display: grid; gap: var(--sp-3); min-width: 0; }
    .ui-grid-2  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-3); }
    .ui-grid-3  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-3); }
    .ui-grid-4  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--sp-3); }
    /* Kartochkalar to'ri — ichida to'liq forma bo'lgan panellar uchun.
       ui-grid-2 dan kengroq: tor ustunda forma maydonlari qisilib qolmaydi. */
    .ui-grid-cards { display: grid; align-items: start; gap: var(--sp-4);
                     grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }

    /* Kanban ustuni tor — undagi tugma matni bir qatorga sig'masa,
       kesilib ketmasin, ikkinchi qatorga tushsin. */
    .job-act .btn { white-space: normal; text-align: center; line-height: 1.2;
                    height: auto; min-height: 2.25rem; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
    .job-act .ui-input { min-width: 0; }
    .ui-spacer  { flex: 1 1 auto; }
    .ui-list    { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
    .ui-list li { line-height: 1.6; }

    /* Kenglik yordamchilari — jadval katakchalaridagi tor maydonlar uchun.
       Inline style o'rniga shular ishlatiladi. */
    .ui-w-full { width: 100%; }
    .ui-w-xs   { width: 4.5rem; }
    .ui-w-sm   { width: 7rem;   }
    .ui-w-md   { width: 9rem;   }

    /* Pul ustunlari — ma'no rangi ma'lumotga bog'liq, shuning uchun klass */
    .ui-money     { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .ui-money--neg { color: var(--destructive); }
    .ui-money--pos { color: var(--success); }

    /* Ochib-yopiladigan bo'lim (details/summary) — shadcn uslubida */
    .ui-details            { min-width: 0; }
    .ui-details > summary  { display: flex; align-items: center; gap: var(--sp-2);
        cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 500;
        color: var(--foreground); padding: var(--sp-1) 0; }
    .ui-details > summary::-webkit-details-marker { display: none; }
    .ui-details > summary::before { content: "›"; display: inline-block;
        color: var(--muted-foreground); transition: transform .15s; }
    .ui-details[open] > summary::before { transform: rotate(90deg); }
    .ui-details-body { margin-top: var(--sp-3); }

    /* Ro'yxat qatori — kartochka ichidagi qisqa satrlar uchun */
    .ui-listrow { display: flex; align-items: center; gap: var(--sp-3);
        padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); min-width: 0; }
    .ui-listrow:last-child { border-bottom: 0; }
    .ui-listrow-main { min-width: 0; flex: 1 1 auto; }
    .ui-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ui-thumb { width: 2.75rem; height: 2.75rem; flex-shrink: 0; object-fit: cover;
        border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--muted); }

    /* Tik aylantiriladigan joy */
    .ui-scroll-y      { overflow-y: auto; min-height: 0; }
    .ui-scroll-y--sm  { max-height: 20rem; }
    .ui-scroll-y--md  { max-height: 30rem; }

    /* Ko'rinish yordamchilari.
       DIQQAT: `!important` YO'Q — JavaScript el.style.display bilan
       ochib-yopadigan joylar shu klasslar ustidan ishlashi kerak. */
    .ui-hidden   { display: none; }
    .ui-collapse { display: none; }
    .ui-collapse.is-open { display: block; }
    .ui-linkish  { text-decoration: underline; cursor: pointer; color: var(--foreground); }
    .ui-center   { text-align: center; }

    /* Hisob-kitob qatori — material/pechat/garpun summalari */
    .calc-summary { display: flex; flex-wrap: wrap; gap: var(--sp-5);
        padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2);
        background: var(--muted); border: 1px solid var(--border);
        border-radius: var(--radius-lg); font-size: 0.8125rem; color: var(--muted-foreground); }
    .calc-summary b { color: var(--foreground); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

    /* Pechat qatori — asosiy o'lchov, shuning uchun ajratib turadi */
    .compact-row--accent { border-color: var(--foreground); background: var(--card); }
    .compact-row--accent > label { font-weight: 600; }

    .bottom-debt-grid--one { grid-template-columns: 1fr; }
    .big-input--center { text-align: center; }

    /* Chekka yordamchilari — faqat shu to'rttasi, ko'paytirilmaydi */
    .ui-mt-3 { margin-top: var(--sp-3); }
    .ui-mt-4 { margin-top: var(--sp-4); }
    .ui-mb-3 { margin-bottom: var(--sp-3); }
    .ui-mb-4 { margin-bottom: var(--sp-4); }
    .ui-form-narrow { max-width: 26rem; }

    /* Rulon ochish formasi — bitta qatorda, tor ekranda o'zi buklanadi */
    .roll-form { display: grid; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-5);
                 grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

    /* Ombordagi soni — rang ma'noni bildiradi (kam / o'rta / yetarli) */
    .stock-num        { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: var(--sp-1); }
    .stock-num--low   { color: var(--destructive); }
    .stock-num--mid   { color: var(--warning); }
    .stock-num--ok    { color: var(--success); }

    /* Filtr qatori — hisobotlar ustidagi sana/diler tanlovi */
    .filter-bar { display: grid; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-5);
                  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
    .filter-bar--narrow { max-width: 34rem; }

    /* Ikki qavatli jadval sarlavhasi va "JAMI" qatori */
    .ui-table .ui-th-group { text-align: center; background: var(--accent); color: var(--accent-foreground); }
    .ui-table tr.is-total td { background: var(--muted); font-weight: 600; }
    .ui-scroll-x{ overflow-x: auto; min-width: 0; }

    /* ==================================================================
       KOMPONENT 11-12 — Sidebar va Sheet (mobil menyu)
       ================================================================== */
    .app-shell { display: flex; min-height: 100vh; background: var(--background); }

    .app-sidebar {
        width: 15rem; flex-shrink: 0;
        background: var(--sidebar); color: var(--sidebar-foreground);
        border-right: 1px solid var(--sidebar-border);
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
        display: flex; flex-direction: column; gap: var(--sp-1);
        padding: var(--sp-3);
    }
    .app-sidebar .brand {
        display: flex; align-items: center; gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-2) var(--sp-3);
        font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
        color: var(--sidebar-foreground);
        border-bottom: 1px solid var(--sidebar-border);
        margin-bottom: var(--sp-2);
    }
    .app-sidebar .brand-mark {
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.75rem; height: 1.75rem; flex-shrink: 0;
        border-radius: var(--radius-md);
        background: var(--sidebar-primary); color: var(--sidebar-primary-foreground);
        font-size: 0.75rem; font-weight: 700;
    }
    .app-sidebar a.nav-item {
        display: flex; align-items: center; gap: var(--sp-2);
        padding: 0 var(--sp-2); height: 2rem;
        border-radius: var(--radius-md);
        color: var(--sidebar-foreground); text-decoration: none;
        font-size: 0.875rem; font-weight: 400; line-height: 1;
        transition: background-color .15s, color .15s;
    }
    .app-sidebar a.nav-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
    .app-sidebar a.nav-item.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
    .app-sidebar .nav-icon { width: 1rem; text-align: center; font-size: 0.875rem; flex-shrink: 0; opacity: .85; }
    .app-sidebar .nav-lock { margin-left: auto; font-size: 0.625rem; opacity: .5; }
    .app-sidebar .nav-label {
        padding: var(--sp-3) var(--sp-2) var(--sp-1);
        font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
        color: var(--muted-foreground);
    }
    .app-sidebar .ratsiya-side { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--sidebar-border); display: grid; gap: var(--sp-2); }
    .app-sidebar .ratsiya-side .btn { width: 100%; }

    .app-content { flex: 1; min-width: 0; background: var(--background); }
    .wrapper { width: 100%; max-width: 90rem; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-12); min-width: 0; }

    /* Sahifa sarlavhasi qatori */
    .ui-page-head {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
    }
    .ui-page-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
    .ui-page-desc  { font-size: 0.875rem; color: var(--muted-foreground); margin: var(--sp-1) 0 0; }

    .sound-hint { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; margin: 0 0 var(--sp-2); }
    .main-layout { display: grid; gap: var(--sp-4); min-width: 0; }
    .right-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-4); }

    /* Mobil yuqori qator (Sheet trigger) */
    .mobile-bar { display: none; }
    .nav-backdrop { display: none; }

    /* ---------- Kirish oynasi (admin va xodim) ---------- */
    .ui-auth { max-width: 24rem; margin: var(--sp-10) auto; }
    .ui-auth .ui-card { gap: var(--sp-4); }

    /* ---------- Kim kirgani ko'rinadigan qator ---------- */
    .ui-session-bar {
        display: flex; align-items: center; gap: var(--sp-2);
        padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
        border-bottom: 1px solid var(--border);
        color: var(--muted-foreground);
    }

    /* ==================================================================
       ISH KARTASI — Card ustiga qurilgan
       ================================================================== */
    .job {
        display: grid; grid-template-columns: 3px 1fr; min-width: 0;
        background: var(--card); color: var(--card-foreground);
        border: 1px solid var(--border); border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs); overflow: hidden;
        transition: box-shadow .15s, border-color .15s;
    }
    .job:hover { box-shadow: var(--shadow-sm); }
    .job.is-late { border-color: color-mix(in oklch, var(--destructive) 55%, transparent); }
    .job-band { border: 0; box-shadow: inset -1px 0 0 oklch(0 0 0 / 0.14); }
    .job-in   { padding: var(--sp-3); display: grid; gap: var(--sp-2); min-width: 0; }
    .job-top  { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
    .job-id   { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .job-wait { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .job-wait.late { color: var(--destructive); font-weight: 600; }
    .job-dealer { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.35; margin: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .job-figs { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
    .job-kv   { font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
    .job-kv span { font-size: 0.6875rem; font-weight: 400; color: var(--muted-foreground); margin-left: 2px; letter-spacing: 0; }
    .job-dims { font-size: 0.8125rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .job-chips{ display: flex; gap: var(--sp-1); flex-wrap: wrap; }
    .job-shot { width: 100%; height: 4rem; object-fit: contain; background: var(--muted);
                border: 1px solid var(--border); border-radius: var(--radius-md); display: block; }
    .job-act  { display: grid; gap: var(--sp-2); }
    .job-act .btn { width: 100%; }
    .job-meta { font-size: 0.75rem; color: var(--muted-foreground); border-top: 1px solid var(--border);
                padding-top: var(--sp-2); display: grid; gap: 2px; }

    /* ==================================================================
       KANBAN (8 ustun) — texnik shartnoma talabi
       ================================================================== */
    .width-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-2); align-items: start; }
    .wcol { min-width: 0; display: grid; gap: var(--sp-2); align-content: start;
            background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-2); }
    .wcol-head {
        display: flex; align-items: baseline; justify-content: center; gap: var(--sp-1);
        font-size: 0.8125rem; font-weight: 600; color: var(--foreground);
        padding: var(--sp-1) var(--sp-2);
    }
    .wcol-head span { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
    .wcol-body { display: grid; gap: var(--sp-2); min-width: 0; }
    .wcol.is-empty { background: transparent; border-style: dashed; }
    .wcol.is-empty .wcol-head { color: var(--muted-foreground); }
    .wcol-none { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; padding: var(--sp-4) var(--sp-1); }
    .board-empty {
        border: 1px dashed var(--border); border-radius: var(--radius-lg);
        padding: var(--sp-10) var(--sp-4); text-align: center;
        color: var(--muted-foreground); font-size: 0.9375rem; background: var(--card);
    }

    /* Navbat sarlavhasi */
    .qhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5);
             padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
    .qhead h2 { margin: 0; font-size: 1.375rem; letter-spacing: -0.02em; }
    .qstat { font-size: 0.8125rem; color: var(--muted-foreground); }
    .qstat b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
    .qstat.late b { color: var(--destructive); }

    /* ==================================================================
       RULON O'LCHAGICHI — Progress ustiga qurilgan
       ================================================================== */
    .roll { display: grid; gap: var(--sp-1); }
    .roll-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
                font-size: 0.75rem; color: var(--muted-foreground); }
    .roll-top b { color: var(--foreground); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .meter { height: 0.5rem; background: var(--muted); border-radius: 999px; overflow: hidden; }
    .meter i { display: block; height: 100%; border-radius: 999px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.16); }
    .meter.low i { background: var(--destructive) !important; }
    .roll-warn { font-size: 0.6875rem; font-weight: 500; color: var(--destructive); line-height: 1.3; margin: 0; }

    /* ==================================================================
       MATERIAL CHIPI — rang materialning haqiqiy rangi
       ================================================================== */
    .material-swatch {
        cursor: pointer; display: inline-flex; align-items: center;
        height: 2rem; padding: 0 var(--sp-3); margin: 0 var(--sp-1) var(--sp-1) 0;
        border-radius: var(--radius-md); border: 1px solid oklch(0 0 0 / 0.14);
        font-size: 0.8125rem; font-weight: 500;
        /* Material rangi mavzuga bog'liq emas — bu javondagi vinilning haqiqiy
           rangi. Shuning uchun parda ham, matn rangi ham qat'iy qilib qo'yilgan:
           qorong'i rejimda ham L303 oq bo'lib ko'rinadi. */
        color: oklch(0.18 0 0);
        box-shadow: inset 0 0 0 999px oklch(1 0 0 / 0.68);
        transition: box-shadow .15s, border-color .15s;
    }
    .material-swatch:hover { border-color: oklch(0 0 0 / 0.30); }
    .material-swatch.selected {
        border-color: oklch(0 0 0 / 0.30);
        box-shadow: inset 0 0 0 999px oklch(1 0 0 / 0.55), 0 0 0 2px var(--ring);
        font-weight: 600;
    }

    /* ==================================================================
       RASM QO'YISH MAYDONI
       ================================================================== */
    .paste-area {
        border: 1px dashed var(--border); border-radius: var(--radius-lg);
        background: var(--muted); min-height: 16rem; max-width: 21rem; margin: 0 auto;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; overflow: hidden; outline: none; transition: border-color .15s, background .15s;
    }
    .paste-area:focus-visible, .paste-area:hover { border-color: var(--ring); background: var(--card); }
    .paste-hint { color: var(--muted-foreground); font-size: 0.8125rem; text-align: center; padding: var(--sp-5); }
    .paste-area img { width: 100%; height: 100%; max-height: 26rem; object-fit: contain; }
    .shots-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-3) 0; }
    .shots-preview img { width: 100%; max-height: 24rem; object-fit: contain;
                         border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted); }

    /* ==================================================================
       ISH JARAYONI KLASSLARI
       Faqat shu loyihaga xos elementlar (chip, kanban, rulon, ish
       kartochkasi). Hammasi shadcn tokenlari ustiga qurilgan.
       ================================================================== */
    .chip { display: inline-flex; align-items: center; padding: 0.125rem var(--sp-2); border-radius: var(--radius-sm);
            border: 1px solid transparent; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }
    .chip-alarm { background: var(--destructive); color: var(--destructive-foreground); }
    .chip-out   { background: transparent; border-color: var(--border); color: var(--muted-foreground); }
    .chip-now   { background: var(--primary); color: var(--primary-foreground); }

    .kv-badge-print { background: var(--card); color: var(--foreground); border: 1px solid var(--foreground);
                      border-radius: var(--radius-md); padding: var(--sp-1); text-align: center;
                      font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .kv-badge-mat   { background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border);
                      border-radius: var(--radius-md); padding: var(--sp-1); text-align: center;
                      font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }

    .summary-box { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg);
                   padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
                   display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
    .total-large { font-size: 2rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
                   text-align: right; font-variant-numeric: tabular-nums; }
    .bottom-debt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sp-2);
                        margin-top: var(--sp-2); padding: var(--sp-3); background: var(--muted);
                        border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.8125rem; }
    .row-money-box { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
    .price-input   { text-align: center; }

    .compact-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.6fr 1.2fr 1.5fr; gap: var(--sp-2);
                   align-items: center; margin-bottom: var(--sp-2); padding: var(--sp-2);
                   background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg); }
    .top-combo-row { display: grid; grid-template-columns: 1.3fr 1.7fr 0.65fr 0.35fr 0.65fr 0.65fr;
                     gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-3); }
    .top-combo-row .material-swatch { height: 1.75rem; font-size: 0.75rem; }

    /* ==================================================================
       PLANSHET VA TELEFON
       ================================================================== */
    @media (max-width: 1400px) { .width-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    @media (max-width: 900px) {
        .app-shell { display: block; }

        /* Yon panel -> Sheet: chapdan chiqadigan panel */
        .app-sidebar {
            position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
            width: 17rem; max-width: 82vw; z-index: 60;
            transform: translateX(-100%); transition: transform .2s ease;
            box-shadow: var(--shadow-xl);
        }
        body.nav-open .app-sidebar { transform: translateX(0); }

        .nav-backdrop {
            display: block; position: fixed; inset: 0; z-index: 50;
            background: oklch(0 0 0 / 0.55); backdrop-filter: blur(2px);
            opacity: 0; pointer-events: none; transition: opacity .2s ease;
        }
        body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
        body.nav-open { overflow: hidden; }

        /* Barmoq uchun kattaroq nishon */
        .app-sidebar a.nav-item { height: 2.5rem; font-size: 0.9375rem; }

        /* Mobil yuqori qator */
        .mobile-bar {
            display: flex; align-items: center; gap: var(--sp-3);
            position: sticky; top: 0; z-index: 40;
            height: 3.5rem; padding: 0 var(--sp-3);
            background: color-mix(in oklch, var(--background) 86%, transparent);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
        }
        .mobile-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
                        flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .nav-toggle {
            width: 2.25rem; height: 2.25rem; flex-shrink: 0; padding: 0;
            background: transparent; color: var(--foreground);
            border: 1px solid var(--border); border-radius: var(--radius-md);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
        }
        .nav-toggle:hover { background: var(--accent); }
        .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
            display: block; width: 1rem; height: 1.5px; background: currentColor; content: ""; border-radius: 2px;
        }
        .nav-toggle-bars { position: relative; }
        .nav-toggle-bars::before { position: absolute; top: -5px; left: 0; }
        .nav-toggle-bars::after  { position: absolute; top:  5px; left: 0; }
        .mobile-ratsiya { flex-shrink: 0; }
        .app-sidebar .ratsiya-side { display: none; }

        .wrapper { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
        .sound-hint { display: none; }

        /* Doska bitta ustunga; bo'sh o'lchamlar ko'rsatilmaydi */
        .width-board { grid-template-columns: 1fr; gap: var(--sp-3); }
        .wcol.is-empty { display: none; }

        /* Telefonda karta kattalashadi — barmoq uchun */
        .job-in { padding: var(--sp-4); gap: var(--sp-3); }
        .job-dealer { font-size: 0.9375rem; white-space: normal; }
        .job-kv { font-size: 1.75rem; }
        .job-kv span { font-size: 0.8125rem; }
        .job-dims { font-size: 0.9375rem; }
        .chip { font-size: 0.8125rem; padding: 0.25rem var(--sp-2); }
        .job-act .btn { height: 2.75rem; font-size: 0.9375rem; }
        .job-act input { height: 2.75rem; font-size: 1rem; }
        .job-shot { height: 7rem; }

        /* Keng jadval — o'zi suriladi */
        .panel-box { overflow-x: auto; padding: var(--sp-4); }
        .scrollable-table, .ui-table-wrap { overflow-x: auto; }
        .data-table, .ui-table { min-width: 34rem; }

        .compact-row { grid-template-columns: 1fr 1fr; }
        .top-combo-row { grid-template-columns: 1fr 1fr; }
        .shots-preview { grid-template-columns: 1fr; }
        .right-col { grid-template-columns: 1fr; }
        .ui-card { padding: var(--sp-4) 0; gap: var(--sp-4); }
        .ui-card-header, .ui-card-body, .ui-card-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
        .ui-dialog { padding: var(--sp-4); }
    }

    /* HTML ichida qattiq yozilgan ustunlarni telefonda bittaga tushiramiz.
       Inline uslub kuchliroq bo'lgani uchun !important kerak.
       Bu qoida D3-D9 bosqichlarida inline uslublar o'chgani sari kamayadi. */
    @media (max-width: 700px) {
        [style*="display:grid"], [style*="display: grid"] { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 560px) {
        .top-combo-row { grid-template-columns: 1fr; }
        .compact-row   { grid-template-columns: 1fr; }
        .summary-box   { flex-direction: column; align-items: stretch; }
        .total-large   { text-align: left; font-size: 1.75rem; }
        .paste-area    { min-height: 11rem; }
        .ui-page-head  { flex-direction: column; align-items: stretch; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }