/* yurit — umumiy uslublar.
 *
 * PERF-2: bu 132 KB ilgari base.html ICHIDA, ya'ni HAR BIR sahifa
 * javobida yozilardi. HTML keshlanmaydi, demak brauzer uni har
 * ochilishda qaytadan yuklab, qaytadan tahlil qilardi — telefonda
 * bu "hamma joyda sekin" degan tuyg'uning asosiy sababi edi.
 * Alohida fayl bir marta yuklanadi va WhiteNoise uni hash'li nom
 * bilan MUDDATSIZ keshlaydi.
 */
/* Dark mode color variables (Bootstrap 5.3 native) */
        [data-bs-theme="dark"] body { background: #15171c; color: #d4d6db; }
        [data-bs-theme="dark"] .card { background: #1c1f26; color: #d4d6db; border-color: #2a2e38; }
        [data-bs-theme="dark"] .card-header { background: #22252e; color: #d4d6db; border-color: #2a2e38; }
        [data-bs-theme="dark"] .table { color: #d4d6db; --bs-table-color: #d4d6db; --bs-table-bg: transparent; }
        [data-bs-theme="dark"] .table-light { --bs-table-bg: #22252e; --bs-table-color: #d4d6db; color: #d4d6db; }
        [data-bs-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: #2a2e38; }
        [data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; }
        [data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(255,193,7,0.15); --bs-table-color: #ffe69c; color: #ffe69c; }
        [data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(25,135,84,0.18); --bs-table-color: #75d99a; color: #75d99a; }
        [data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(220,53,69,0.18); --bs-table-color: #ea868f; color: #ea868f; }
        [data-bs-theme="dark"] .bg-light { background: #22252e !important; color: #d4d6db; }
        [data-bs-theme="dark"] .text-dark { color: #d4d6db !important; }
        [data-bs-theme="dark"] .text-muted { color: #8b8f9a !important; }
        [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-top { border-color: #2a2e38 !important; }
        [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
            background: #22252e; color: #d4d6db; border-color: #353944;
        }
        [data-bs-theme="dark"] .form-control::placeholder { color: #6a6d77; }
        [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus {
            background: #22252e; color: #d4d6db; border-color: #0d6efd;
        }
        [data-bs-theme="dark"] .input-group-text {
            background: #22252e; color: #d4d6db; border-color: #353944;
        }
        [data-bs-theme="dark"] code { background: #2a2e38; color: #f8a700; padding: 1px 6px; border-radius: 3px; }
        [data-bs-theme="dark"] .alert-info { background: rgba(13,202,240,0.12); color: #6edff6; border-color: rgba(13,202,240,0.25); }
        [data-bs-theme="dark"] .alert-warning { background: rgba(255,193,7,0.12); color: #ffe69c; border-color: rgba(255,193,7,0.25); }
        [data-bs-theme="dark"] .alert-danger { background: rgba(220,53,69,0.12); color: #ea868f; border-color: rgba(220,53,69,0.25); }
        [data-bs-theme="dark"] .alert-success { background: rgba(25,135,84,0.12); color: #75d99a; border-color: rgba(25,135,84,0.25); }
        [data-bs-theme="dark"] .alert-light { background: #22252e; color: #d4d6db; border-color: #353944; }
        [data-bs-theme="dark"] .dropdown-menu { background: #22252e; color: #d4d6db; border-color: #353944; }
        [data-bs-theme="dark"] .dropdown-item { color: #d4d6db; }
        [data-bs-theme="dark"] .dropdown-item:hover { background: #2a2e38; color: #fff; }
        [data-bs-theme="dark"] .dropdown-divider { border-color: #353944; }
        [data-bs-theme="dark"] .modal-content { background: #1c1f26; color: #d4d6db; }
        [data-bs-theme="dark"] .code-pill { background: #2a2e38; color: #d4d6db; }
        [data-bs-theme="dark"] .lookup-hero { background: linear-gradient(135deg, #1c1f26 0%, #1a2842 100%); }
        [data-bs-theme="dark"] .btn-close { filter: invert(1) opacity(0.7); }
        [data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: #6ea8fe; }
        body {
            background: #f4f6fa;
            font-size: 15px;
            /* Respect iPhone safe areas in landscape */
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
        /* Navbar: extend background behind notch, but push content below it */
        nav.navbar {
            padding-top: calc(0.5rem + env(safe-area-inset-top));
        }
        /* Same for the iOS install banner (sits at the bottom near home indicator) */
        #iosInstallHint {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        }
        .navbar-brand { font-weight: 700; letter-spacing: 0.3px; }

        /* ====== yurit Navbar ====== */
        .yurit-nav {
            background: linear-gradient(180deg, #1a1f2e 0%, #11151f 100%);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
        }
        .yurit-nav .navbar-toggler {
            border-color: rgba(255,255,255,0.15);
            color: #fff;
        }
        .yurit-nav .navbar-toggler-icon {
            filter: invert(1) opacity(0.85);
        }
        .yurit-brand {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 1.15rem;
            color: #fff !important;
            text-decoration: none;
        }
        .yurit-brand .brand-logo {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, #198754 0%, #20c997 100%);
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            box-shadow: 0 2px 6px rgba(25,135,84,0.35);
        }
        .yurit-brand .brand-text {
            font-weight: 700;
            letter-spacing: 0.3px;
        }
        .yurit-brand .brand-logo--mark {
            background: transparent !important;
            box-shadow: none !important;
            width: 40px; height: 34px;
            color: #201e1d;
        }
        [data-bs-theme="dark"] .yurit-brand .brand-logo--mark { color: #e8e8ee; }
        .yurit-brand .nav-mark { display: block; overflow: visible; }
        /* Brand mark — handoff o'lchami (96:72), to'liq shtrix ko'rinadi */
        /* Mark o'lchami — keyingi .brand-logo (28px) va global svg
           max-width qoidalaridan ustun turishi uchun !important + nav-mark */
        .yurit-brand .brand-logo.brand-logo--mark { width: 86px !important; height: 65px !important; }
        .yurit-brand .nav-mark { width: 86px !important; height: 65px !important; max-width: none !important; }
        .yurit-brand--stacked, .yurit-brand { gap: 0.55rem; }
        .yurit-brand .brand-text { font-weight: 800; letter-spacing: -0.5px; font-size: 2.15rem; }
        .yurit-brand .nav-mark .nm-ink { stroke: currentColor; }

        /* ---- Sidebar OCHIQ bo'lganda: logo harakatlanadi (yurish + g'ildirak) ---- */
        @keyframes nm-bob  { to { transform: translateY(-1.5px); } }
        @keyframes nm-legF { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
        @keyframes nm-rope { to { stroke-dashoffset: -12; } }
        @keyframes nm-spin { to { transform: rotate(-360deg); } }
        @keyframes nm-road { to { transform: translateX(-96px); } }
        /* Ochiq holatda (default) animatsiya ishlaydi */
        .yurit-brand .nm-body { animation: nm-bob .5s ease-in-out infinite alternate; transform-box: view-box; }
        .yurit-brand .nm-leg1 { animation: nm-legF .8s ease-in-out infinite alternate; transform-origin: 24px 34px; transform-box: view-box; }
        .yurit-brand .nm-leg2 { animation: nm-legF .8s ease-in-out -.4s infinite alternate; transform-origin: 24px 34px; transform-box: view-box; }
        .yurit-brand .nm-rope { animation: nm-rope 1s linear infinite; }
        .yurit-brand .nm-w1 { animation: nm-spin 1.1s linear infinite; transform-origin: 58px 50px; transform-box: view-box; }
        .yurit-brand .nm-w2 { animation: nm-spin 1.1s linear infinite; transform-origin: 80px 50px; transform-box: view-box; }
        .yurit-brand .nm-roadG { animation: nm-road 3s linear infinite; transform-box: view-box; }
        /* YIG'ILGAN (collapsed) holatda: harakat to'xtaydi — statik ikonka */
        body.yrt-sidebar-collapsed .yurit-brand .nm-body,
        body.yrt-sidebar-collapsed .yurit-brand .nm-leg1,
        body.yrt-sidebar-collapsed .yurit-brand .nm-leg2,
        body.yrt-sidebar-collapsed .yurit-brand .nm-rope,
        body.yrt-sidebar-collapsed .yurit-brand .nm-w1,
        body.yrt-sidebar-collapsed .yurit-brand .nm-w2,
        body.yrt-sidebar-collapsed .yurit-brand .nm-roadG {
            animation: none !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .yurit-brand .nm-body, .yurit-brand .nm-leg1, .yurit-brand .nm-leg2,
            .yurit-brand .nm-rope, .yurit-brand .nm-w1, .yurit-brand .nm-w2,
            .yurit-brand .nm-roadG { animation: none !important; }
        }

        /* Navlink + dropdown styling */
        .yurit-nav .nav-link {
            color: rgba(255,255,255,0.78);
            padding: 0.5rem 0.85rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        .yurit-nav .nav-link:hover,
        .yurit-nav .nav-link:focus {
            color: #fff;
            background: rgba(255,255,255,0.08);
        }
        .yurit-nav .nav-link.show,
        .yurit-nav .nav-item.active .nav-link {
            color: #fff;
            background: rgba(255,255,255,0.1);
        }
        .yurit-nav .dropdown-menu {
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 10px;
            padding: 0.5rem;
            margin-top: 0.35rem;
            min-width: 220px;
        }
        .yurit-nav .dropdown-menu .dropdown-item {
            border-radius: 6px;
            padding: 0.5rem 0.65rem;
            font-size: 0.92rem;
        }
        .yurit-nav .dropdown-menu .dropdown-item:hover {
            background: rgba(13, 110, 253, 0.07);
        }
        .yurit-nav .dropdown-menu .dropdown-header {
            font-size: 0.7rem;
            color: #6c757d;
            letter-spacing: 0.5px;
            padding: 0.4rem 0.65rem 0.2rem;
        }

        /* POS button — primary CTA */
        .yurit-pos-btn {
            border-radius: 8px;
            padding: 0.45rem 1rem;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(25,135,84,0.3);
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .yurit-pos-btn:hover {
            box-shadow: 0 3px 10px rgba(25,135,84,0.45);
            transform: translateY(-1px);
        }

        /* Connection status badge */
        .yurit-status-badge {
            border-radius: 999px;
            padding: 0.35rem 0.7rem;
            font-weight: 500;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            line-height: 1;
        }

        /* User avatar circle */
        .yurit-user-link {
            color: rgba(255,255,255,0.85) !important;
        }
        .yurit-user-link:hover { color: #fff !important; }
        .yurit-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: #fff;
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 2px 5px rgba(13,110,253,0.35);
            flex-shrink: 0;
        }

        /* Mobile collapse */
        @media (max-width: 991.98px) {
            .yurit-nav .navbar-nav { padding-top: 0.5rem; }
            .yurit-nav .nav-link { padding: 0.65rem 0.85rem; }
            .yurit-nav .nav-item { margin-bottom: 2px; }
            .yurit-nav .dropdown-menu {
                background: rgba(255,255,255,0.05);
                border: none;
                box-shadow: none;
                margin: 0 0 0.5rem 0.5rem;
            }
            .yurit-nav .dropdown-menu .dropdown-item {
                color: rgba(255,255,255,0.82);
            }
            .yurit-nav .dropdown-menu .dropdown-item:hover {
                background: rgba(255,255,255,0.08);
                color: #fff;
            }
            .yurit-nav .dropdown-menu .dropdown-header {
                color: rgba(255,255,255,0.5);
            }
            .yurit-nav .dropdown-menu .dropdown-divider {
                border-color: rgba(255,255,255,0.1);
            }
            .yurit-user-link {
                padding: 0.5rem 0.85rem;
            }
        }
        /* ====== /yurit Navbar ====== */
        .card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
        .stat-card { border-left: 4px solid #0d6efd; }
        .stat-card.green { border-left-color: #198754; }
        .stat-card.orange { border-left-color: #fd7e14; }
        .stat-card.red { border-left-color: #dc3545; }
        .matrix-table th, .matrix-table td { text-align: center; vertical-align: middle; }
        .matrix-table .stock-cell { font-weight: 600; }
        .stock-zero { color: #adb5bd; }
        .stock-low { color: #fd7e14; font-weight: 700; }
        .stock-ok { color: #198754; font-weight: 600; }
        .code-pill { font-family: 'SF Mono', Menlo, monospace; background: #e9ecef;
                     padding: 4px 10px; border-radius: 6px; font-size: 1.05em;
                     letter-spacing: 1px; white-space: nowrap; }
        .hero-search input { font-size: 1.5rem; padding: 1rem; }

        /* Tables: scroll horizontally when narrow */
        .table-responsive { -webkit-overflow-scrolling: touch; }

        /* Touch-friendly buttons on mobile */
        @media (max-width: 768px) {
            body { font-size: 14px; }
            h3 { font-size: 1.35rem; }
            h4 { font-size: 1.2rem; }
            h5 { font-size: 1.05rem; }
            .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
            .card { border-radius: 10px; }
            .card.p-4 { padding: 1rem !important; }
            .card.p-3 { padding: 0.85rem !important; }
            .btn { min-height: 38px; }
            .btn-sm { min-height: 32px; }
            .hero-search input { font-size: 1.05rem; padding: 0.65rem; }
            .hero-search form { flex-wrap: wrap; }
            .hero-search form .btn { flex: 1 1 45%; }
            .code-pill { font-size: 0.95em; padding: 3px 7px; }
            .stat-card h3 { font-size: 1.3rem; }
            .stat-card .text-muted.small { font-size: 0.78rem; }
            /* Hide button text on phones, keep icons */
            .btn .btn-text { display: none; }
            /* Tighter table cells */
            .table-sm th, .table-sm td { padding: 0.4rem 0.45rem; font-size: 0.85rem; }
            .table th, .table td { padding: 0.55rem 0.45rem; font-size: 0.88rem; }
            /* Matrix tables use less padding on mobile */
            .matrix-table th, .matrix-table td { padding: 0.35rem 0.25rem !important; font-size: 0.78rem; }
            .matrix-table .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.72rem; }
            /* Navbar tweaks */
            .navbar .nav-link { padding-top: 0.65rem; padding-bottom: 0.65rem; }
            .navbar-text { font-size: 0.85rem; }
            /* Forms */
            .form-control, .form-select { font-size: 16px; } /* prevents iOS zoom */
            /* Dashboard / Insights filter row */
            .form-select-sm { font-size: 14px; }
        }

        /* Tablet adjustments (iPad portrait, etc.) */
        @media (max-width: 992px) and (min-width: 769px) {
            .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
        }

        /* =====================================================================
           YURIT DESIGN SYSTEM (Data-Dense Dashboard, ui-ux-pro-max)
           Scope: analytics & admin surfaces. Opt-in via .yrt-* classes.
           Bootstrap continues to power non-opted-in pages unchanged.
           ===================================================================== */
        :root {
            --yrt-font-ui:   'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            --yrt-font-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

            /* ── Light palette — Executive Indigo lead, semantic tints ─── */
            --yrt-primary:       #5B5BD6;
            --yrt-primary-soft:  #818CF8;
            --yrt-primary-deep:  #4F46E5;
            --yrt-on-primary:    #FFFFFF;
            --yrt-accent:        #D97706;
            --yrt-accent-soft:   #F59E0B;
            --yrt-bg:            #F6F7FB;
            --yrt-surface:       #FFFFFF;
            --yrt-surface-2:     #F1F5F9;
            --yrt-surface-3:     #E2E8F0;
            --yrt-fg:            #0F172A;
            --yrt-fg-muted:      #5C6470;
            --yrt-fg-soft:       #94A3B8;
            --yrt-border:        #E5E8EE;
            --yrt-border-strong: #CBD5E1;

            /* Semantic colour ramps — each with text + tint pair */
            --yrt-success:       #15803D;  --yrt-success-tint:  rgba(34,197,94,0.12);
            --yrt-warning:       #B45309;  --yrt-warning-tint:  rgba(245,158,11,0.14);
            --yrt-danger:        #B91C1C;  --yrt-danger-tint:   rgba(239,68,68,0.12);
            --yrt-info:          #0369A1;  --yrt-info-tint:     rgba(14,165,233,0.12);

            /* Shadow depth scale */
            --yrt-shadow-xs: 0 1px 1px rgba(15,23,42,0.03);
            --yrt-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
            --yrt-shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
            --yrt-shadow-lg: 0 10px 24px -8px rgba(15,23,42,0.12), 0 4px 8px -4px rgba(15,23,42,0.06);
            --yrt-shadow-xl: 0 24px 56px -16px rgba(15,23,42,0.22), 0 8px 16px -8px rgba(15,23,42,0.10);
            --yrt-shadow-indigo: 0 8px 24px -6px rgba(91,91,214,0.30);
            --yrt-shadow-green:  0 8px 24px -6px rgba(22,163,74,0.30);
            --yrt-shadow-amber:  0 8px 24px -6px rgba(217,119,6,0.30);

            /* Radius scale */
            --yrt-radius-xs: 4px;
            --yrt-radius-sm: 6px;
            --yrt-radius:    10px;
            --yrt-radius-md: 12px;
            --yrt-radius-lg: 16px;
            --yrt-radius-xl: 20px;
            --yrt-radius-pill: 999px;

            /* Spacing scale (4 / 8 base) */
            --yrt-space-1: 0.25rem;   /* 4 */
            --yrt-space-2: 0.5rem;    /* 8 */
            --yrt-space-3: 0.75rem;   /* 12 */
            --yrt-space-4: 1rem;      /* 16 */
            --yrt-space-5: 1.25rem;   /* 20 */
            --yrt-space-6: 1.5rem;    /* 24 */
            --yrt-space-8: 2rem;      /* 32 */
            --yrt-space-10: 2.5rem;   /* 40 */
            --yrt-space-12: 3rem;     /* 48 */

            /* Motion — single source of truth */
            --yrt-ease:        cubic-bezier(0.22, 1, 0.36, 1);
            --yrt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
            --yrt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --yrt-trans-fast:  120ms var(--yrt-ease);
            --yrt-trans:       180ms var(--yrt-ease);
            --yrt-trans-slow:  280ms var(--yrt-ease);
        }
        [data-bs-theme="dark"] {
            --yrt-primary:       #818CF8;
            --yrt-primary-soft:  #A5B4FC;
            --yrt-primary-deep:  #5B5BD6;
            --yrt-accent:        #F59E0B;
            --yrt-accent-soft:   #FBBF24;
            --yrt-bg:            #0B0F1A;
            --yrt-surface:       #151A26;
            --yrt-surface-2:     #1C2230;
            --yrt-surface-3:     #283142;
            --yrt-fg:            #E2E8F0;
            --yrt-fg-muted:      #94A3B8;
            --yrt-fg-soft:       #64748B;
            --yrt-border:        #25304A;
            --yrt-border-strong: #334155;

            --yrt-success: #34D399; --yrt-success-tint: rgba(52,211,153,0.16);
            --yrt-warning: #FBBF24; --yrt-warning-tint: rgba(251,191,36,0.16);
            --yrt-danger:  #F87171; --yrt-danger-tint:  rgba(248,113,113,0.16);
            --yrt-info:    #38BDF8; --yrt-info-tint:    rgba(56,189,248,0.16);

            --yrt-shadow-xs: 0 1px 1px rgba(0,0,0,0.3);
            --yrt-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
            --yrt-shadow-md: 0 4px 16px rgba(0,0,0,0.45);
            --yrt-shadow-lg: 0 12px 30px -8px rgba(0,0,0,0.55);
            --yrt-shadow-xl: 0 28px 64px -16px rgba(0,0,0,0.6);
            --yrt-shadow-indigo: 0 10px 28px -8px rgba(129,140,248,0.40);
            --yrt-shadow-green:  0 10px 28px -8px rgba(52,211,153,0.35);
            --yrt-shadow-amber:  0 10px 28px -8px rgba(251,191,36,0.35);
        }

        /* Global typography upgrade — applies everywhere */
        body {
            font-family: var(--yrt-font-ui);
            font-feature-settings: 'cv11', 'ss01';
            -webkit-font-smoothing: antialiased;
        }
        code, .code-pill, .yrt-num, .yrt-data-table tbody td.num {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
        }
        .yrt-num, .yrt-data-table td.num, .yrt-data-table th.num {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        /* ---- Page header (title + actions, used by every admin page) ---- */
        .yrt-page-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
            margin: 0.25rem 0 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--yrt-border);
        }
        .yrt-page-header h1, .yrt-page-header .yrt-h1 {
            font-family: var(--yrt-font-ui);
            font-weight: 600;
            font-size: 1.55rem;
            margin: 0;
            letter-spacing: -0.01em;
            color: var(--yrt-fg);
        }
        .yrt-page-header .yrt-sub {
            color: var(--yrt-fg-muted);
            font-size: 0.92rem;
            margin-top: 0.15rem;
        }
        .yrt-page-header .yrt-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* ---- KPI card grid + card ---- */
        .yrt-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.85rem;
            margin-bottom: 1.25rem;
        }
        .yrt-kpi {
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            border-radius: var(--yrt-radius);
            padding: 1rem 1.1rem;
            box-shadow: var(--yrt-shadow-sm);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            transition: box-shadow var(--yrt-trans), transform var(--yrt-trans);
            position: relative;
            overflow: hidden;
        }
        .yrt-kpi:hover { box-shadow: var(--yrt-shadow-md); }
        .yrt-kpi .yrt-kpi-label {
            font-size: 0.78rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--yrt-fg-muted);
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .yrt-kpi .yrt-kpi-value {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-size: 1.75rem;
            font-weight: 600;
            line-height: 1.05;
            color: var(--yrt-fg);
        }
        .yrt-kpi .yrt-kpi-meta {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            color: var(--yrt-fg-muted);
        }
        .yrt-kpi .yrt-delta {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            display: inline-flex;
            align-items: center;
            gap: 0.15rem;
            padding: 0.1rem 0.45rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 500;
            background: var(--yrt-surface-2);
        }
        .yrt-delta.up    { color: var(--yrt-success); background: rgba(21,128,61,0.10); }
        .yrt-delta.down  { color: var(--yrt-danger);  background: rgba(185,28,28,0.10); }
        .yrt-delta.flat  { color: var(--yrt-fg-muted); }
        [data-bs-theme="dark"] .yrt-delta.up    { background: rgba(52,211,153,0.12); }
        [data-bs-theme="dark"] .yrt-delta.down  { background: rgba(248,113,113,0.13); }

        .yrt-kpi.accent { border-left: 3px solid var(--yrt-primary); }
        .yrt-kpi.accent-amber { border-left: 3px solid var(--yrt-accent); }
        .yrt-kpi.accent-success { border-left: 3px solid var(--yrt-success); }
        .yrt-kpi.accent-danger { border-left: 3px solid var(--yrt-danger); }

        /* sparkline holder inside a KPI */
        .yrt-kpi .yrt-spark {
            margin-top: 0.25rem;
            height: 32px;
            opacity: 0.85;
        }

        /* ---- Section card (a chart + a header + optional actions) ---- */
        .yrt-section {
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            border-radius: var(--yrt-radius);
            box-shadow: var(--yrt-shadow-sm);
            margin-bottom: 1rem;
            overflow: hidden;
        }
        .yrt-section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding: 0.85rem 1.1rem;
            border-bottom: 1px solid var(--yrt-border);
            background: var(--yrt-surface-2);
        }
        .yrt-section-head h2, .yrt-section-head .yrt-h2 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--yrt-fg);
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }
        .yrt-section-head .yrt-sub {
            font-size: 0.78rem;
            color: var(--yrt-fg-muted);
            margin-top: 0.1rem;
        }
        .yrt-section-body { padding: 1.1rem; }
        .yrt-section-body.flush { padding: 0; }
        .yrt-section .yrt-chart-box {
            position: relative;
            height: 280px;
        }
        .yrt-section .yrt-chart-box.tall { height: 360px; }
        .yrt-section .yrt-chart-box.short { height: 200px; }

        /* ---- Compact data table ---- */
        .yrt-data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.88rem;
        }
        .yrt-data-table thead th {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 0.04em;
            padding: 0.55rem 0.85rem;
            text-align: left;
            border-bottom: 1px solid var(--yrt-border);
            white-space: nowrap;
        }
        .yrt-data-table tbody td {
            padding: 0.55rem 0.85rem;
            border-bottom: 1px solid var(--yrt-border);
            color: var(--yrt-fg);
            vertical-align: middle;
        }
        .yrt-data-table tbody tr { transition: background var(--yrt-trans); }
        .yrt-data-table tbody tr:hover { background: var(--yrt-surface-2); }
        .yrt-data-table tbody tr:last-child td { border-bottom: 0; }

        /* ---- Pills, tags ---- */
        .yrt-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            font-size: 0.74rem;
            font-weight: 500;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
            border: 1px solid var(--yrt-border);
            white-space: nowrap;
        }
        .yrt-tag.primary { color: var(--yrt-primary); background: rgba(59,130,246,0.10); border-color: transparent; }
        .yrt-tag.accent  { color: var(--yrt-accent);  background: rgba(217,119,6,0.12); border-color: transparent; }
        .yrt-tag.success { color: var(--yrt-success); background: rgba(21,128,61,0.10); border-color: transparent; }
        .yrt-tag.danger  { color: var(--yrt-danger);  background: rgba(185,28,28,0.10); border-color: transparent; }

        /* ---- Empty state ---- */
        .yrt-empty {
            padding: 2.5rem 1rem;
            text-align: center;
            color: var(--yrt-fg-muted);
            border: 1px dashed var(--yrt-border-strong);
            border-radius: var(--yrt-radius);
            background: var(--yrt-surface);
        }
        .yrt-empty .yrt-empty-icon {
            font-size: 2.25rem;
            color: var(--yrt-border-strong);
            display: block;
            margin-bottom: 0.5rem;
        }

        /* ---- Focus / a11y ---- */
        .yrt-kpi:focus-visible,
        .yrt-section:focus-visible,
        .yrt-section-head [tabindex]:focus-visible {
            outline: 2px solid var(--yrt-primary);
            outline-offset: 2px;
        }

        /* ---- Heatmap & matrix helpers ---- */
        .yrt-heatmap {
            display: grid;
            gap: 2px;
        }
        .yrt-heatmap-cell {
            min-height: 30px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg);
            background: var(--yrt-surface-2);
            transition: transform var(--yrt-trans);
        }
        .yrt-heatmap-cell:hover { transform: scale(1.08); z-index: 2; }

        /* ---- Stacked page header (title row + filter row) ---- */
        .yrt-page-header-stack {
            display: block;       /* override flex from .yrt-page-header */
        }
        .yrt-page-title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .yrt-page-filter-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1.25rem;
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px dashed var(--yrt-border);
        }
        .yrt-filter-group {
            display: flex;
            align-items: center;
            gap: 0.55rem;
        }
        .yrt-filter-label {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--yrt-fg-muted);
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            white-space: nowrap;
        }

        /* ---- Filter toolbar (single-row variant kept for other pages) ---- */
        .yrt-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.6rem;
        }
        .yrt-period-chips {
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid var(--yrt-border);
            background: var(--yrt-surface);
            box-shadow: var(--yrt-shadow-sm);
        }
        .yrt-period-chips .btn {
            border-radius: 0;
            border: none;
            font-size: 0.82rem;
            font-weight: 500;
            padding: 0.35rem 0.85rem;
            color: var(--yrt-fg-muted);
            background: transparent;
            transition: background var(--yrt-trans), color var(--yrt-trans);
        }
        .yrt-period-chips .btn + .btn {
            border-left: 1px solid var(--yrt-border);
        }
        .yrt-period-chips .btn:hover,
        .yrt-period-chips .btn:focus-visible {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
            text-decoration: none;
        }
        .yrt-period-chips .btn-primary {
            background: var(--yrt-primary);
            color: var(--yrt-on-primary);
        }
        .yrt-period-chips .btn-primary:hover {
            background: var(--yrt-primary);
            color: var(--yrt-on-primary);
            filter: brightness(1.08);
        }
        .yrt-branch-filter {
            min-width: 180px;
        }
        .yrt-branch-filter .form-select {
            border-color: var(--yrt-border);
            font-size: 0.85rem;
        }
        @media (max-width: 768px) {
            .yrt-page-filter-row { gap: 0.85rem; }
            .yrt-filter-group { flex-wrap: wrap; }
            .yrt-period-chips .btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
            .yrt-branch-filter { min-width: 0; flex: 1 1 auto; }
        }

        /* ---- Reduced motion ---- */
        @media (prefers-reduced-motion: reduce) {
            .yrt-kpi, .yrt-data-table tbody tr,
            .yrt-heatmap-cell { transition: none; }
        }

        /* Print snapshot lives in DOM but is hidden on screen — print
           media query swaps which one is visible (see @media print). */
        img.yrt-chart-print { display: none; }

        /* =====================================================================
           MODERN ADMIN SHELL (v2)
           Synthesis of Linear (tight monochrome typography), Stripe (light
           breathing professional surfaces) and Apple Liquid Glass (subtle
           depth via backdrop-filter on sticky / overlay layers). Replaces
           the top navbar with a fixed-width sidebar. Token overrides come
           last so they win every cascade race.
           ===================================================================== */

        :root {
            /* Light palette: Stripe-ish surfaces, Linear-ish text */
            --yrt-bg:            #F7F8FA;
            --yrt-surface:       #FFFFFF;
            --yrt-surface-2:     #F3F4F6;
            --yrt-fg:            #0B0D12;
            --yrt-fg-muted:      #5C6470;
            --yrt-border:        #ECEEF1;
            --yrt-border-strong: #D4D7DC;
            --yrt-primary:       #5B5BD6;   /* Indigo — Linear vibe */
            --yrt-primary-soft:  #6E70E0;
            --yrt-on-primary:    #FFFFFF;
            --yrt-accent:        #D97706;
            --yrt-success:       #167C3F;
            --yrt-warning:       #B45309;
            --yrt-danger:        #C8312B;

            /* Softer, layered shadows (Stripe-style) */
            --yrt-shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.04);
            --yrt-shadow-md: 0 1px 2px rgba(11, 13, 18, 0.04),
                             0 8px 24px rgba(11, 13, 18, 0.05);
            --yrt-shadow-lg: 0 1px 2px rgba(11, 13, 18, 0.04),
                             0 12px 48px rgba(11, 13, 18, 0.08);

            --yrt-radius:    10px;
            --yrt-radius-lg: 14px;
            --yrt-radius-sm: 6px;

            --yrt-sidebar-w: 240px;
            --yrt-glass-bg-light:  rgba(255, 255, 255, 0.72);
            --yrt-glass-bg-dark:   rgba(15, 17, 22, 0.70);
        }
        [data-bs-theme="dark"] {
            --yrt-bg:            #0A0B0E;
            --yrt-surface:       #131418;
            --yrt-surface-2:     #1A1C21;
            --yrt-fg:            #F3F4F6;
            --yrt-fg-muted:      #9197A3;
            --yrt-border:        #232631;
            --yrt-border-strong: #353945;
            --yrt-primary:       #7C7CFA;
            --yrt-primary-soft:  #9292FB;
            --yrt-on-primary:    #FFFFFF;
            --yrt-accent:        #F59E0B;
            --yrt-success:       #34D399;
            --yrt-warning:       #FBBF24;
            --yrt-danger:        #F87171;

            --yrt-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
            --yrt-shadow-md: 0 8px 32px rgba(0,0,0,0.45);
            --yrt-shadow-lg: 0 18px 56px rgba(0,0,0,0.55);
        }

        body {
            background: var(--yrt-bg) !important;
            color: var(--yrt-fg);
            font-feature-settings: 'cv11', 'ss01';
            letter-spacing: -0.005em;
        }

        /* ---- Sidebar: convert the existing .yurit-nav <nav> to a fixed
               left rail. The dropdown sub-menus still pop, but they slide
               out to the RIGHT of the active item. ---- */
        :root { --yrt-sidebar-current: var(--yrt-sidebar-w); }
        body.yrt-sidebar-collapsed,
        html.yrt-sidebar-collapsed-pre body { --yrt-sidebar-current: 64px; }
        html.yrt-sidebar-collapsed-pre body { /* match collapsed visual class */ }

        nav.yurit-nav.navbar {
            position: fixed;
            inset: 0 auto 0 0;
            width: var(--yrt-sidebar-current);
            height: 100dvh;
            padding: calc(0.85rem + env(safe-area-inset-top)) 0.75rem
                     calc(0.85rem + env(safe-area-inset-bottom)) 0.75rem;
            background: var(--yrt-glass-bg-light);
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            border-right: 1px solid var(--yrt-border);
            border-bottom: none;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            margin: 0 !important;
            z-index: 1040;
            /* IMPORTANT: overflow MUST stay visible so dropdown menus can
               pop out to the right of the rail. CSS spec collapses
               overflow-x:visible to auto whenever overflow-y is non-visible,
               so we keep both visible and scroll the inner column instead. */
            overflow: visible;
            transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* Inner column owns the scroll so the outer <nav> can stay
           overflow:visible. Dropdowns are anchored to .nav-item which
           sits inside this column, so a fixed positioner on the menu
           escapes the scroll viewport cleanly. */
        nav.yurit-nav .container-fluid {
            min-height: 0;
            flex: 1 1 auto;
            overflow-y: auto;
            overflow-x: visible;
        }

        /* Sidebar collapse/expand toggle (desktop only) */
        .yrt-sidebar-collapser {
            position: fixed;
            top: 22px;
            left: calc(var(--yrt-sidebar-current) - 14px);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            display: none;       /* shown on lg+ via media query */
            align-items: center;
            justify-content: center;
            color: var(--yrt-fg-muted);
            cursor: pointer;
            z-index: 1050;
            transition: left 180ms cubic-bezier(0.4, 0, 0.2, 1),
                        color 120ms, background 120ms, transform 120ms;
            box-shadow: var(--yrt-shadow-md);
            padding: 0;
        }
        .yrt-sidebar-collapser:hover {
            color: var(--yrt-fg);
            transform: scale(1.08);
        }
        .yrt-sidebar-collapser i {
            transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.82rem;
        }
        body.yrt-sidebar-collapsed .yrt-sidebar-collapser i {
            transform: rotate(180deg);
        }
        @media (min-width: 992px) {
            .yrt-sidebar-collapser { display: inline-flex; }
        }

        /* Collapsed sidebar: icon-only. Hide every text descendant
           explicitly so nothing bleeds out of the 64px rail. */
        body.yrt-sidebar-collapsed nav.yurit-nav .nav-link,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-pos-btn,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-user-link,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-status-badge {
            font-size: 0 !important;
            justify-content: center;
            gap: 0;
            padding-left: 0.4rem !important;
            padding-right: 0.4rem !important;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .nav-link i,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-pos-btn i,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-status-badge i,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand .brand-logo,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand .brand-logo i {
            font-size: 1rem !important;
            margin: 0 !important;
        }
        /* Collapsed: faqat ixcham mark — "yurit" so'zi yashiriladi */
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand .brand-logo--mark {
            width: 34px !important; height: 26px !important;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand .nav-mark {
            width: 34px !important; height: 26px !important;
        }
        /* Belt-and-braces: nuke the text spans completely so nothing
           inherits or escapes our font-size zero. */
        body.yrt-sidebar-collapsed nav.yurit-nav .brand-text,
        body.yrt-sidebar-collapsed nav.yurit-nav #connStatusText,
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-user-link > span:not(.yurit-avatar) {
            display: none !important;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .nav-link.dropdown-toggle::after {
            display: none;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-avatar {
            font-size: 0.85rem !important;
            width: 30px;
            height: 30px;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .container-fluid {
            align-items: center;
        }
        /* The sidebar has overflow-x:visible so dropdowns can spill right;
           that also allows long brand text to bleed past the 64px width.
           Force the brand's link box to clip + full-width center so the
           logo lines up with the nav-link icons below it. */
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-brand {
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            align-self: stretch;
            display: flex !important;
            justify-content: center !important;
            margin: 0 !important;
        }
        /* Status badge (Wifi pill) — center inside its <li> too. */
        body.yrt-sidebar-collapsed nav.yurit-nav .navbar-nav:last-child .nav-item {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        body.yrt-sidebar-collapsed nav.yurit-nav .yurit-status-badge {
            margin: 0 auto !important;
        }
        [data-bs-theme="dark"] nav.yurit-nav.navbar {
            background: var(--yrt-glass-bg-dark);
        }
        nav.yurit-nav .container-fluid {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            padding: 0;
            gap: 0.5rem;
        }
        /* Brand: smaller, refined */
        .yurit-brand {
            padding: 0.45rem 0.65rem 0.85rem;
            font-size: 1.05rem !important;
            color: var(--yrt-fg) !important;
            border-bottom: 1px solid var(--yrt-border);
            margin-bottom: 0.5rem;
        }
        .yurit-brand .brand-logo {
            width: 28px; height: 28px;
            background: linear-gradient(135deg, var(--yrt-primary) 0%, var(--yrt-primary-soft) 100%);
            border-radius: 8px;
            box-shadow: 0 4px 14px rgba(91, 91, 214, 0.32);
            font-size: 0.95rem;
        }
        .yurit-brand .brand-text {
            color: var(--yrt-fg);
            font-weight: 600;
        }

        /* POS button in sidebar — full width */
        nav.yurit-nav .yurit-pos-btn {
            width: 100%;
            justify-content: flex-start;
            background: linear-gradient(135deg, #198754, #20c997);
            border: none;
            border-radius: var(--yrt-radius);
            padding: 0.55rem 0.85rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        nav.yurit-nav .d-lg-none { display: none !important; }  /* mobile pos button hidden, sidebar shows it always */

        /* Nav items vertical layout */
        nav.yurit-nav .navbar-toggler { display: none; }
        nav.yurit-nav .collapse,
        nav.yurit-nav .navbar-collapse {
            display: flex !important;
            flex-direction: column;
            flex: 1 1 auto;
            align-items: stretch;
            min-height: 0;
        }
        nav.yurit-nav .navbar-nav {
            flex-direction: column !important;
            align-items: stretch !important;
            padding: 0 !important;
            gap: 1px;
            width: 100%;
        }
        nav.yurit-nav .navbar-nav:last-child {
            margin-top: auto;   /* push user/status block to bottom */
            border-top: 1px solid var(--yrt-border);
            padding-top: 0.5rem !important;
        }
        nav.yurit-nav .nav-item {
            margin: 0;
            width: 100%;
        }
        nav.yurit-nav .nav-link {
            color: var(--yrt-fg-muted) !important;
            padding: 0.5rem 0.7rem !important;
            border-radius: var(--yrt-radius-sm);
            font-size: 0.875rem;
            font-weight: 500;
            display: flex !important;
            align-items: center;
            gap: 0.55rem;
            background: transparent !important;
            transition: background 120ms ease, color 120ms ease;
        }
        nav.yurit-nav .nav-link i.bi {
            font-size: 1rem;
            opacity: 0.85;
        }
        nav.yurit-nav .nav-link:hover,
        nav.yurit-nav .nav-link:focus-visible {
            color: var(--yrt-fg) !important;
            background: var(--yrt-surface-2) !important;
        }
        nav.yurit-nav .nav-link.show {
            color: var(--yrt-fg) !important;
            background: var(--yrt-surface-2) !important;
        }
        /* Hozir turgan sahifa — ajralib tursin (chap chekkada rangli chiziq).
           DIQQAT: --yrt-primary-soft TO'Q rang (#818CF8), fon uchun emas —
           u ishlatilsa matn fon bilan qo'shilib ko'rinmay qoladi. */
        nav.yurit-nav .nav-item.active > .nav-link,
        nav.yurit-nav .nav-link.is-current {
            /* Aniq qiymatlar: color-mix + o'zgaruvchi bu yerda shaffofga
               aylanib ketardi, --yrt-primary-soft esa to'q rang. */
            color: #4F46E5 !important;
            background: rgba(91, 91, 214, .12) !important;
            font-weight: 600;
            position: relative;
        }
        [data-bs-theme="dark"] nav.yurit-nav .nav-item.active > .nav-link,
        [data-bs-theme="dark"] nav.yurit-nav .nav-link.is-current {
            color: #A5B4FC !important;
            background: rgba(129, 140, 248, .18) !important;
        }
        nav.yurit-nav .nav-item.active > .nav-link::before,
        nav.yurit-nav .nav-link.is-current::before {
            content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
            width: 3px; border-radius: 0 3px 3px 0;
            background: var(--yrt-primary);
        }
        nav.yurit-nav .nav-item.active > .nav-link i.bi { opacity: 1; }
        /* Ochiladigan ro'yxat ichidagi faol band */
        nav.yurit-nav .dropdown-menu .dropdown-item.is-current {
            background: rgba(91, 91, 214, .12);
            color: var(--yrt-primary);
            font-weight: 600;
            border-radius: 6px;
        }
        nav.yurit-nav .nav-link.dropdown-toggle::after {
            margin-left: auto;
            opacity: 0.55;
        }
        /* Dropdown menus inside the sidebar use position:fixed so they
           escape any ancestor with overflow:auto/scroll. Coordinates are
           set by JS (positionSidebarDropdown) on show.bs.dropdown. */
        nav.yurit-nav .nav-item.dropdown { position: relative; }
        nav.yurit-nav .dropdown-menu {
            position: fixed !important;
            /* CRITICAL: no inset/top/left/right/bottom rules here — JS sets
               top + left as inline styles; an !important reset would
               outrank the inline values and the menu would render at 0,0. */
            margin: 0 !important;
            min-width: 220px;
            max-width: 260px;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid var(--yrt-border);
            border-radius: var(--yrt-radius);
            box-shadow: var(--yrt-shadow-lg);
            padding: 0.4rem;
            z-index: 1080;
        }
        [data-bs-theme="dark"] nav.yurit-nav .dropdown-menu {
            background: rgba(20, 22, 28, 0.97);
        }
        nav.yurit-nav .dropdown-menu .dropdown-item {
            border-radius: var(--yrt-radius-sm);
            padding: 0.45rem 0.65rem;
            font-size: 0.875rem;
            color: var(--yrt-fg);
        }
        nav.yurit-nav .dropdown-menu .dropdown-item:hover {
            background: var(--yrt-surface-2);
        }
        nav.yurit-nav .dropdown-menu .dropdown-header {
            font-size: 0.66rem;
            color: var(--yrt-fg-muted);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.4rem 0.65rem 0.2rem;
        }
        /* Connection badge & user avatar at sidebar bottom */
        nav.yurit-nav .yurit-status-badge {
            background: var(--yrt-surface-2) !important;
            color: var(--yrt-fg-muted) !important;
            padding: 0.3rem 0.6rem;
            font-size: 0.74rem;
        }
        nav.yurit-nav .yurit-user-link {
            color: var(--yrt-fg) !important;
            padding: 0.55rem 0.7rem !important;
        }
        nav.yurit-nav .yurit-avatar {
            background: linear-gradient(135deg, var(--yrt-primary), var(--yrt-primary-soft));
            box-shadow: 0 2px 8px rgba(91, 91, 214, 0.25);
        }

        /* ---- Content offset for the sidebar (desktop) ---- */
        body > .container-fluid:last-of-type,
        body > div.container-fluid {
            margin-left: var(--yrt-sidebar-current);
            padding-left: 1.25rem !important;
            padding-right: 1.25rem !important;
            max-width: none;
            box-sizing: border-box;
            width: calc(100vw - var(--yrt-sidebar-current));
            transition: margin-left 180ms cubic-bezier(0.4, 0, 0.2, 1),
                        width      180ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        body > #offlineBanner { margin-left: var(--yrt-sidebar-current); }

        /* Tighter KPI grid so 4 cards comfortably fit even on 1024px */
        .yrt-kpi-grid {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.7rem;
        }
        @media (min-width: 1280px) {
            .yrt-kpi-grid {
                grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
                gap: 0.85rem;
            }
        }

        /* ---- Mobile: sidebar slides off, hamburger triggers it ---- */
        @media (max-width: 991.98px) {
            nav.yurit-nav.navbar {
                transform: translateX(-100%);
                transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: var(--yrt-shadow-lg);
                /* Off-canvas menyu — yig'ilgan var'dan qat'i nazar to'liq eni */
                width: 260px !important;
                max-width: 82vw !important;
            }
            nav.yurit-nav.navbar.show-mobile {
                transform: translateX(0);
            }
            nav.yurit-nav .d-lg-none {
                display: inline-flex !important;
            }
            /* Mobil: sidebar off-canvas -> kontent to'liq kenglik.
               (desktop width: calc(100vw - sidebar) shu yerda BEKOR
               qilinishi shart, aks holda kontent ingichka chiziqqa
               siqiladi) */
            body > .container-fluid,
            body > #offlineBanner {
                margin-left: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                /* Notch/rounded chetlarni hisobga olamiz */
                padding-left: calc(12px + env(safe-area-inset-left)) !important;
                padding-right: calc(12px + env(safe-area-inset-right)) !important;
            }
            /* Mobile top bar (added via JS) replaces the sidebar header */
            .yrt-mobile-topbar {
                position: sticky;
                top: 0;
                z-index: 1030;
                background: var(--yrt-glass-bg-light);
                backdrop-filter: blur(14px) saturate(160%);
                -webkit-backdrop-filter: blur(14px) saturate(160%);
                border-bottom: 1px solid var(--yrt-border);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
                /* Notch/rounded-corner xavfsiz zonasi + chetdan bo'sh joy.
                   MUHIM: bu panel body'ning bevosita farzandi (container-fluid
                   ichida EMAS), shuning uchun manfiy margin bermaymiz — aks
                   holda ☰ va POS tugmalari ekran chetiga yopishib qoladi. */
                padding: calc(0.55rem + env(safe-area-inset-top))
                         calc(0.9rem + env(safe-area-inset-right))
                         0.55rem calc(0.9rem + env(safe-area-inset-left));
                margin: 0 0 1rem;
                max-width: 100%;
                overflow-x: hidden;
            }
            .yrt-mobile-topbar > * { min-width: 0; }
            .yrt-mobile-topbar .yrt-hamburger,
            .yrt-mobile-topbar .btn { flex: 0 0 auto; }
            .yrt-mobile-topbar .yrt-topbrand { flex: 1 1 auto; justify-content: center; overflow: hidden; }
            .yrt-mobile-topbar .yrt-topbrand strong { white-space: nowrap; }
            [data-bs-theme="dark"] .yrt-mobile-topbar {
                background: var(--yrt-glass-bg-dark);
            }
            .yrt-mobile-topbar .yrt-hamburger {
                background: transparent;
                border: 1px solid var(--yrt-border);
                border-radius: 8px;
                padding: 0.4rem 0.55rem;
                color: var(--yrt-fg);
            }
        }
        @media (min-width: 992px) {
            .yrt-mobile-topbar { display: none; }
        }

        /* ---- Refined .yrt-* components for the new aesthetic ---- */
        .yrt-kpi {
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            box-shadow: var(--yrt-shadow-sm);
            border-radius: var(--yrt-radius);
        }
        .yrt-kpi:hover {
            box-shadow: var(--yrt-shadow-md);
            transform: translateY(-1px);
        }
        .yrt-section {
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            box-shadow: var(--yrt-shadow-sm);
            border-radius: var(--yrt-radius);
        }
        .yrt-section-head {
            background: transparent;
            border-bottom: 1px solid var(--yrt-border);
            padding: 0.95rem 1.15rem;
        }
        .yrt-page-header {
            border-bottom: 1px solid var(--yrt-border);
        }

        /* Period chips — sleeker, no heavy borders */
        .yrt-period-chips {
            border: 1px solid var(--yrt-border);
            background: var(--yrt-surface);
            box-shadow: var(--yrt-shadow-sm);
        }
        .yrt-period-chips .btn-primary {
            background: var(--yrt-fg);
            color: var(--yrt-surface);
        }
        [data-bs-theme="dark"] .yrt-period-chips .btn-primary {
            background: var(--yrt-primary);
            color: var(--yrt-on-primary);
        }

        /* Buttons — slightly tighter, more modern */
        .btn-primary {
            background: var(--yrt-fg);
            border-color: var(--yrt-fg);
            color: var(--yrt-bg);
        }
        .btn-primary:hover, .btn-primary:focus-visible {
            background: var(--yrt-fg);
            border-color: var(--yrt-fg);
            filter: brightness(1.05);
        }
        [data-bs-theme="dark"] .btn-primary {
            background: var(--yrt-primary);
            border-color: var(--yrt-primary);
            color: var(--yrt-on-primary);
        }
        .btn { letter-spacing: 0; font-weight: 500; }

        /* Modals & dropdown panels — glass treatment */
        .modal-content,
        .dropdown-menu {
            background: var(--yrt-glass-bg-light);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid var(--yrt-border);
            box-shadow: var(--yrt-shadow-lg);
            border-radius: var(--yrt-radius);
        }
        [data-bs-theme="dark"] .modal-content,
        [data-bs-theme="dark"] .dropdown-menu {
            background: var(--yrt-glass-bg-dark);
        }

        /* Tighten typography */
        .yrt-page-header .yrt-h1 {
            font-size: 1.5rem;
            letter-spacing: -0.018em;
            font-weight: 600;
        }
        .yrt-h2 {
            font-size: 0.95rem;
            letter-spacing: -0.008em;
            font-weight: 600;
        }

        /* Reduce print-on-screen "alert" noise */
        .alert {
            border: 1px solid var(--yrt-border);
            background: var(--yrt-surface);
            color: var(--yrt-fg);
            border-radius: var(--yrt-radius);
        }

        /* Hide the screen-reader cmdk button — sidebar already has it */
        /* (no-op placeholder) */

        /* ---- Print: hide nav/actions, expand layout, force light ---- */
        @media print {
            /* Force light palette regardless of dark-mode toggle */
            :root {
                --yrt-bg: #FFFFFF;
                --yrt-surface: #FFFFFF;
                --yrt-surface-2: #F8FAFC;
                --yrt-fg: #0F172A;
                --yrt-fg-muted: #475569;
                --yrt-border: #CBD5E1;
            }
            html, body, [data-bs-theme="dark"] {
                background: #FFFFFF !important;
                color: #0F172A !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            /* Navbar, sticky bars, action buttons, filter forms — gone.
               Mobil yuqori panel va uchib turuvchi xabarlar ham qog'ozga
               tushmasin (ilgari tushardi — chek "ekran surati"dek chiqardi). */
            nav.navbar, .yurit-nav, .yrt-page-header .yrt-actions,
            .yrt-section-head form, .btn-group, footer, #cmdkModal,
            #iosInstallHint, .modal,
            .yrt-mobile-topbar, .yrt-sidebar-scrim, .alert-dismissible {
                display: none !important;
            }
            /* Generic .no-print escape hatch */
            .no-print, [data-no-print] { display: none !important; }
            .container-fluid, .container { max-width: 100% !important; padding: 0 !important; }
            .yrt-page-header { border-bottom: 2px solid #0F172A; padding: 0 0 8mm; margin: 0 0 6mm; }
            .yrt-page-header .yrt-h1 { font-size: 18pt; }
            .yrt-page-header .yrt-sub { font-size: 9pt; color: #475569; }
            /* KPI grid: keep on one row, lighter shadows */
            .yrt-kpi-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 4mm;
                margin-bottom: 6mm;
                page-break-inside: avoid;
            }
            .yrt-kpi {
                box-shadow: none !important;
                border: 1px solid #CBD5E1 !important;
                padding: 3mm;
                page-break-inside: avoid;
            }
            .yrt-kpi .yrt-kpi-value { font-size: 14pt; }
            .yrt-section {
                box-shadow: none !important;
                border: 1px solid #CBD5E1 !important;
                margin-bottom: 5mm;
                page-break-inside: avoid;
            }
            .yrt-section-head {
                background: #F1F5F9 !important;
                padding: 2mm 3mm;
            }
            .yrt-section-head h2, .yrt-section-head .yrt-h2 { font-size: 11pt; }
            .yrt-section-body { padding: 3mm; }
            /* Tables — every row stays together, every header repeats per page */
            .yrt-data-table { font-size: 9pt; }
            .yrt-data-table thead { display: table-header-group; }
            .yrt-data-table tr { page-break-inside: avoid; }
            /* Charts: every .yrt-chart-box has a hidden img.yrt-chart-print
               snapshot sitting next to its canvas. In print we hide the
               canvas (which the print pipeline mis-sizes) and show the
               img — the browser prints a regular bitmap, perfectly scaled
               by object-fit:contain into the container. */
            .yrt-chart-box, .yrt-chart-box.short {
                height: 70mm !important;
                page-break-inside: avoid;
                position: relative;
            }
            .yrt-chart-box.tall { height: 100mm !important; }
            .yrt-chart-box > canvas { display: none !important; }
            .yrt-chart-box > img.yrt-chart-print {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;
                object-position: center !important;
            }
            .yrt-section { overflow: visible !important; }
            /* Data tables — keep numeric columns on a single line.
               The on-screen layout has enough room; in print the narrower
               columns made big sums wrap to two lines and looked broken. */
            .yrt-data-table td.num, .yrt-data-table th.num,
            .yrt-data-table .yrt-num { white-space: nowrap; }
            .yrt-data-table { font-size: 8pt; }
            /* Reduce row spacing */
            .row.g-3 { --bs-gutter-y: 4mm; --bs-gutter-x: 4mm; }
            /* Each big section starts on a new page */
            .yrt-section.print-break { page-break-before: always; }
            @page { size: A4; margin: 12mm 10mm 14mm 10mm; }
        }

        /* ---- Mobile tightening for the new system ---- */
        @media (max-width: 768px) {
            .yrt-page-header { margin-bottom: 0.85rem; padding-bottom: 0.75rem; }
            .yrt-page-header h1, .yrt-page-header .yrt-h1 { font-size: 1.25rem; }
            .yrt-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.55rem; }
            .yrt-kpi { padding: 0.75rem 0.85rem; }
            .yrt-kpi .yrt-kpi-value { font-size: 1.35rem; }
            .yrt-section-head { padding: 0.7rem 0.85rem; }
            .yrt-section-body { padding: 0.85rem; }
            .yrt-section .yrt-chart-box { height: 220px; }
            .yrt-data-table { font-size: 0.82rem; }
            .yrt-data-table thead th, .yrt-data-table tbody td { padding: 0.45rem 0.55rem; }
        }

        /* ════════════════════════════════════════════════════════════════
           EXECUTIVE LIQUID GLASS — global .dash-* layer
           Promoted from dashboard.html so every page can opt in via
           <div class="container-fluid px-3 dash-page"> ... </div>
           Synthesizes Linear typography + Stripe surfaces + Apple HIG motion.
           ════════════════════════════════════════════════════════════════ */
        :root {
            --dash-radius: 16px;
            --dash-radius-sm: 10px;
            --dash-grad-revenue: linear-gradient(135deg, #5B5BD6 0%, #8B5CF6 50%, #EC4899 100%);
            --dash-grad-success: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
            --dash-grad-warn:    linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
            --dash-grad-info:    linear-gradient(135deg, #0284C7 0%, #38BDF8 100%);
            --dash-grad-aurora: radial-gradient(ellipse at top left, rgba(91,91,214,0.18), transparent 55%),
                                radial-gradient(ellipse at top right, rgba(34,197,94,0.14), transparent 50%),
                                radial-gradient(ellipse at bottom, rgba(245,158,11,0.10), transparent 60%);
            --dash-ease: cubic-bezier(0.22, 1, 0.36, 1);
        }
        [data-bs-theme="dark"] {
            --dash-grad-aurora: radial-gradient(ellipse at top left, rgba(91,91,214,0.30), transparent 55%),
                                radial-gradient(ellipse at top right, rgba(34,197,94,0.22), transparent 50%),
                                radial-gradient(ellipse at bottom, rgba(245,158,11,0.16), transparent 60%);
        }
        .dash-page {
            color: var(--yrt-fg);
            /* Barcha sahifalar bir xil kenglikda boshlansin — ilgari har
               sahifa o'z ichki max-width'ini qo'yardi (760/860/900px) va
               sarlavhalar turlicha kenglikda ko'rinardi. */
            max-width: 1400px;
            margin-inline: auto;
        }

        /* ── Aurora hero ───────────────────────────────────────────────── */
        .dash-hero {
            position: relative;
            border-radius: var(--dash-radius);
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            overflow: hidden;
            margin-bottom: 1.25rem;
            isolation: isolate;
        }
        .dash-hero__glow {
            position: absolute; inset: 0;
            background: var(--dash-grad-aurora);
            z-index: 0; pointer-events: none;
        }
        .dash-hero__inner {
            position: relative; z-index: 1;
            display: flex; align-items: flex-end;
            justify-content: space-between;
            gap: 1.25rem;
            padding: 1.6rem 1.6rem 1.5rem;
            flex-wrap: wrap;
        }
        .dash-hero__heading { min-width: 0; flex: 1 1 320px; }
        .dash-hero__eyebrow {
            display: inline-flex; align-items: center;
            gap: 0.45rem;
            font-size: 0.74rem; font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--yrt-fg-muted);
            margin-bottom: 0.45rem;
        }
        .dash-pulse {
            width: 8px; height: 8px;
            border-radius: 999px;
            background: #22C55E;
            box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
            animation: dashPulse 2s var(--dash-ease) infinite;
        }
        @keyframes dashPulse {
            50%, 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
        }
        .dash-hero__title {
            font-size: clamp(1.55rem, 2.6vw, 2.1rem);
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.022em;
            color: var(--yrt-fg);
            display: inline-flex; align-items: center; gap: 0.55rem;
        }
        .dash-hero__title i { color: var(--yrt-primary); font-size: 0.85em; }
        .dash-hero__sub {
            margin: 0.3rem 0 0;
            color: var(--yrt-fg-muted);
            font-size: 0.94rem;
            display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem;
            align-items: center;
        }
        .dash-hero__sub i { opacity: 0.7; }
        .dash-hero__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .dash-hero__filters {
            position: relative; z-index: 1;
            display: flex; gap: 0.85rem;
            align-items: center; flex-wrap: wrap;
            padding: 0.85rem 1.6rem 1.1rem;
            border-top: 1px solid var(--yrt-border);
            background: var(--yrt-surface);
        }
        .dash-filter-group {
            display: flex; align-items: center; gap: 0.5rem;
            flex-wrap: wrap;
        }
        .dash-filter-label {
            font-size: 0.74rem; font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--yrt-fg-muted);
            display: inline-flex; align-items: center; gap: 0.3rem;
        }

        /* ── Buttons ───────────────────────────────────────────────────── */
        .dash-btn {
            display: inline-flex; align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.95rem;
            border-radius: var(--dash-radius-sm);
            font-weight: 500; font-size: 0.9rem;
            text-decoration: none;
            border: 1px solid transparent;
            transition: transform 180ms var(--dash-ease), box-shadow 180ms var(--dash-ease),
                        background 180ms var(--dash-ease);
            cursor: pointer; white-space: nowrap;
            background: var(--yrt-surface);
            color: var(--yrt-fg);
        }
        .dash-btn:hover { transform: translateY(-1px); color: var(--yrt-fg); }
        .dash-btn--primary {
            background: var(--dash-grad-success);
            color: #FFFFFF;
            box-shadow: 0 8px 24px -8px rgba(22, 163, 74, 0.55);
        }
        .dash-btn--primary:hover { color: #FFFFFF; box-shadow: 0 12px 28px -8px rgba(22, 163, 74, 0.7); }
        .dash-btn--indigo {
            background: linear-gradient(135deg, #5B5BD6, #818CF8);
            color: #FFFFFF;
            box-shadow: 0 8px 24px -8px rgba(91, 91, 214, 0.55);
        }
        .dash-btn--indigo:hover { color: #FFFFFF; }
        .dash-btn--ghost {
            background: rgba(255,255,255,0.7);
            color: var(--yrt-fg);
            border-color: var(--yrt-border);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .dash-btn--ghost:hover { background: var(--yrt-surface); color: var(--yrt-fg); }
        [data-bs-theme="dark"] .dash-btn--ghost { background: rgba(255,255,255,0.05); color: var(--yrt-fg); }
        .dash-btn--icon {
            padding: 0.55rem 0.7rem;
            background: rgba(56, 178, 246, 0.12);
            color: #0EA5E9;
            border-color: rgba(56, 178, 246, 0.18);
        }
        .dash-btn--icon:hover { color: #0284C7; background: rgba(56, 178, 246, 0.18); }
        .dash-btn--sm { padding: 0.4rem 0.7rem; font-size: 0.82rem; }

        /* ── Chip group (segmented control) ────────────────────────────── */
        .dash-chips {
            display: inline-flex; gap: 0.35rem;
            padding: 0.25rem;
            background: var(--yrt-surface-2);
            border: 1px solid var(--yrt-border);
            border-radius: 999px;
        }
        .dash-chip {
            padding: 0.35rem 0.85rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--yrt-fg-muted);
            text-decoration: none;
            border: 1px solid transparent;
            transition: background 140ms var(--dash-ease), color 140ms var(--dash-ease);
            white-space: nowrap;
        }
        .dash-chip:hover { color: var(--yrt-fg); }
        .dash-chip.is-active {
            background: var(--yrt-surface);
            color: var(--yrt-primary);
            border-color: var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.06);
        }

        /* ── KPI strip ─────────────────────────────────────────────────── */
        .dash-kpis {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 0.85rem;
            margin-bottom: 1.5rem;
        }
        .dash-kpis--four { grid-template-columns: repeat(4, 1fr); }
        .dash-kpis--five { grid-template-columns: repeat(5, 1fr); }
        @media (max-width: 1400px) {
            .dash-kpis--five { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 900px) {
            .dash-kpis--five { grid-template-columns: repeat(2, 1fr); }
        }
        .dash-kpis--three { grid-template-columns: repeat(3, 1fr); }
        @media (max-width: 1100px) {
            .dash-kpis { grid-template-columns: repeat(2, 1fr); }
            .dash-kpis--four { grid-template-columns: repeat(2, 1fr); }
            .dash-kpis--three { grid-template-columns: repeat(2, 1fr); }
            .dash-kpi--lead { grid-column: 1 / -1; }
        }
        @media (max-width: 600px) {
            .dash-kpis { grid-template-columns: 1fr; }
            .dash-kpis--four, .dash-kpis--three { grid-template-columns: 1fr; }
            .dash-kpi--lead { grid-column: auto; }
        }
        .dash-kpi {
            position: relative;
            padding: 1.05rem 1.15rem;
            border-radius: var(--dash-radius);
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            transition: transform 220ms var(--dash-ease), box-shadow 220ms var(--dash-ease);
            overflow: hidden;
            display: flex; flex-direction: column;
            gap: 0.55rem;
            isolation: isolate;
        }
        .dash-kpi::before {
            content: '';
            position: absolute; inset: 0;
            pointer-events: none;
            border-radius: inherit;
            background: var(--tone-tint, transparent);
            opacity: 0.4;
            z-index: -1;
        }
        .dash-kpi[data-tone="indigo"] { --tone-tint: linear-gradient(160deg, rgba(91,91,214,0.10), transparent 60%); }
        .dash-kpi[data-tone="amber"]  { --tone-tint: linear-gradient(160deg, rgba(245,158,11,0.10), transparent 60%); }
        .dash-kpi[data-tone="slate"]  { --tone-tint: linear-gradient(160deg, rgba(100,116,139,0.08), transparent 60%); }
        .dash-kpi[data-tone="success"]{ --tone-tint: linear-gradient(160deg, rgba(34,197,94,0.10), transparent 60%); }
        .dash-kpi[data-tone="danger"] { --tone-tint: linear-gradient(160deg, rgba(239,68,68,0.10), transparent 60%); }
        .dash-kpi[data-tone="info"]   { --tone-tint: linear-gradient(160deg, rgba(14,165,233,0.10), transparent 60%); }
        .dash-kpi:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px -10px rgba(11,13,18,0.18);
        }
        .dash-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
        .dash-kpi__label {
            display: inline-flex; align-items: center; gap: 0.4rem;
            font-size: 0.78rem; font-weight: 500;
            color: var(--yrt-fg-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .dash-kpi__value {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-size: 1.7rem;
            font-weight: 600;
            line-height: 1.05;
            color: var(--yrt-fg);
            letter-spacing: -0.015em;
        }
        .dash-kpi__footer {
            display: flex; align-items: baseline; justify-content: space-between;
            font-size: 0.82rem;
            color: var(--yrt-fg-muted);
            gap: 0.5rem;
        }
        .dash-kpi__footer strong {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg);
            font-weight: 600;
        }
        .dash-kpi__unit { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
        .dash-kpi__u { font-size: 0.5em; font-weight: 600; opacity: 0.5; margin-left: 0.2em; }
        .dash-kpi--lead .dash-kpi__u { color: rgba(255,255,255,0.85); opacity: 1; }

        .dash-kpi--lead {
            background: var(--dash-grad-revenue);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 14px 44px -14px rgba(91,91,214,0.55);
        }
        .dash-kpi--lead::before { display: none; }
        .dash-kpi--lead .dash-kpi__label { color: rgba(255,255,255,0.85); }
        .dash-kpi--lead .dash-kpi__value { color: #FFFFFF; font-size: 2.15rem; }
        .dash-kpi--lead .dash-kpi__footer { color: rgba(255,255,255,0.85); }
        .dash-kpi--lead .dash-kpi__footer strong { color: #FFFFFF; }
        .dash-kpi--lead .dash-delta { background: #FFFFFF !important; box-shadow: 0 1px 4px rgba(0,0,0,0.18); font-weight: 700; }
        .dash-kpi--lead .dash-delta.is-up   { color: #15803D !important; background: #FFFFFF !important; }
        .dash-kpi--lead .dash-delta.is-down { color: #DC2626 !important; background: #FFFFFF !important; }
        .dash-kpi--lead .dash-delta.is-flat { color: #475569 !important; background: #FFFFFF !important; }

        /* ── Delta pill ───────────────────────────────────────────────── */
        .dash-delta {
            display: inline-flex; align-items: center; gap: 0.15rem;
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
        }
        .dash-delta.is-up    { color: #15803D; background: rgba(34,197,94,0.12); }
        .dash-delta.is-down  { color: #B91C1C; background: rgba(239,68,68,0.10); }
        .dash-delta.is-flat  { color: var(--yrt-fg-muted); }
        [data-bs-theme="dark"] .dash-delta.is-up   { color: #34D399; background: rgba(34,197,94,0.14); }
        [data-bs-theme="dark"] .dash-delta.is-down { color: #F87171; background: rgba(239,68,68,0.16); }

        /* ── Cards ────────────────────────────────────────────────────── */
        .dash-card {
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            border-radius: var(--dash-radius);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            overflow: hidden;
            height: 100%;
            display: flex; flex-direction: column;
            margin-bottom: 1rem;
        }
        .dash-card__head {
            padding: 1.05rem 1.15rem 0.9rem;
            display: flex; align-items: flex-start;
            justify-content: space-between;
            gap: 0.6rem; flex-wrap: wrap;
        }
        .dash-card__title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.005em;
            color: var(--yrt-fg);
            display: inline-flex; align-items: center; gap: 0.45rem;
        }
        .dash-card__title i { color: var(--yrt-primary); }
        .dash-card__sub {
            margin: 0.2rem 0 0;
            color: var(--yrt-fg-muted);
            font-size: 0.82rem;
        }
        .dash-card__body { padding: 0 1.15rem 1.15rem; flex: 1; }
        .dash-card__body--flush { padding: 0 0 0.5rem; }
        .dash-card__body--list  { padding: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
        .dash-card__body--padded { padding: 1.15rem; }
        .dash-chart-box { position: relative; height: 280px; padding-top: 0.25rem; }
        .dash-chart-box--short { height: 220px; }
        .dash-chart-box--tall { height: 360px; }

        /* ── Pill labels ──────────────────────────────────────────────── */
        .dash-pill {
            display: inline-flex; align-items: center;
            padding: 0.18rem 0.6rem;
            border-radius: 999px;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
            font-size: 0.74rem; font-weight: 600;
            letter-spacing: 0.04em;
        }
        .dash-pill--danger  { background: rgba(239,68,68,0.10); color: #B91C1C; }
        .dash-pill--warn    { background: rgba(245,158,11,0.12); color: #B45309; }
        .dash-pill--success { background: rgba(34,197,94,0.12); color: #15803D; }
        .dash-pill--info    { background: rgba(14,165,233,0.12); color: #0369A1; }
        .dash-pill--muted   { background: var(--yrt-surface-2); }
        [data-bs-theme="dark"] .dash-pill--danger  { color: #FCA5A5; }
        [data-bs-theme="dark"] .dash-pill--warn    { color: #FCD34D; }
        [data-bs-theme="dark"] .dash-pill--success { color: #6EE7B7; }
        [data-bs-theme="dark"] .dash-pill--info    { color: #7DD3FC; }
        .dash-link {
            font-size: 0.82rem;
            color: var(--yrt-primary);
            text-decoration: none;
            font-weight: 500;
            display: inline-flex; align-items: center; gap: 0.25rem;
        }
        .dash-link:hover { color: var(--yrt-primary); text-decoration: underline; }

        /* ── Attention/alert list items ───────────────────────────────── */
        .dash-alert {
            display: flex; align-items: center; gap: 0.7rem;
            padding: 0.7rem 0.85rem;
            border-radius: var(--dash-radius-sm);
            text-decoration: none;
            color: var(--yrt-fg);
            background: var(--yrt-surface);
            transition: background 160ms var(--dash-ease), transform 160ms var(--dash-ease);
            border: 1px solid transparent;
        }
        .dash-alert:hover { background: var(--yrt-surface-2); transform: translateX(2px); color: var(--yrt-fg); }
        .dash-alert__icon {
            width: 34px; height: 34px;
            border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .dash-alert--danger  .dash-alert__icon { background: rgba(239,68,68,0.12); color: #B91C1C; }
        .dash-alert--warn    .dash-alert__icon { background: rgba(245,158,11,0.14); color: #B45309; }
        .dash-alert--success .dash-alert__icon { background: rgba(34,197,94,0.14); color: #15803D; }
        .dash-alert--info    .dash-alert__icon { background: rgba(14,165,233,0.14); color: #0369A1; }
        .dash-alert--muted   .dash-alert__icon { background: var(--yrt-surface-2); color: var(--yrt-fg-muted); }
        .dash-alert__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .dash-alert__text strong { font-size: 0.88rem; color: var(--yrt-fg); font-weight: 600; }
        .dash-alert__text small { color: var(--yrt-fg-muted); font-size: 0.72rem; }
        .dash-alert__count {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-weight: 700;
            font-size: 1.1rem;
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
        }
        .dash-alert--danger  .dash-alert__count { background: rgba(239,68,68,0.14); color: #B91C1C; }
        .dash-alert--warn    .dash-alert__count { background: rgba(245,158,11,0.16); color: #B45309; }
        .dash-alert--success .dash-alert__count { background: rgba(34,197,94,0.16); color: #15803D; }
        .dash-alert--info    .dash-alert__count { background: rgba(14,165,233,0.16); color: #0369A1; }

        /* ── Empty state ──────────────────────────────────────────────── */
        .dash-empty {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--yrt-fg-muted);
            display: flex; flex-direction: column;
            align-items: center; gap: 0.35rem;
        }
        .dash-empty__icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            background: var(--yrt-surface-2);
            display: flex; align-items: center; justify-content: center;
            color: var(--yrt-fg-muted);
            font-size: 1.4rem;
            margin-bottom: 0.4rem;
        }
        .dash-empty strong { color: var(--yrt-fg); font-size: 0.95rem; }
        .dash-empty small { font-size: 0.78rem; }

        /* ── Branch list with inline bars ─────────────────────────────── */
        .dash-branches { list-style: none; padding: 0; margin: 0; }
        .dash-branch { padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--yrt-border); }
        .dash-branch:last-child { border-bottom: 0; }
        .dash-branch__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; gap: 0.5rem; }
        .dash-branch__name { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--yrt-fg); }
        .dash-branch__chip {
            width: 26px; height: 26px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--yrt-primary), var(--yrt-primary-soft));
            color: #FFFFFF;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700;
        }
        .dash-branch__revenue {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-size: 0.95rem;
            color: var(--yrt-fg);
        }
        .dash-branch__bar { height: 6px; border-radius: 999px; background: var(--yrt-surface-2); overflow: hidden; margin: 0.35rem 0 0.45rem; }
        .dash-branch__fill {
            display: block; height: 100%;
            background: linear-gradient(90deg, var(--yrt-primary), var(--yrt-primary-soft));
            border-radius: 999px;
            transform-origin: left;
            animation: dashBarFill 700ms var(--dash-ease) both;
        }
        @keyframes dashBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .dash-branch__meta { display: flex; gap: 0.95rem; font-size: 0.78rem; color: var(--yrt-fg-muted); flex-wrap: wrap; }
        .dash-branch__meta i { margin-right: 0.2rem; opacity: 0.7; }

        /* ── Leaderboard ──────────────────────────────────────────────── */
        .dash-leader { list-style: none; padding: 0; margin: 0; }
        .dash-leader__item {
            padding: 0.7rem 1.15rem;
            display: flex; gap: 0.85rem; align-items: flex-start;
            border-bottom: 1px solid var(--yrt-border);
        }
        .dash-leader__item:last-child { border-bottom: 0; }
        .dash-leader__rank {
            flex-shrink: 0;
            width: 28px; height: 28px;
            border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-weight: 700; font-size: 0.85rem;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
        }
        .dash-leader__rank[data-rank="1"] { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #78350F; }
        .dash-leader__rank[data-rank="2"] { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #1F2937; }
        .dash-leader__rank[data-rank="3"] { background: linear-gradient(135deg, #FECACA, #FB923C); color: #7C2D12; }
        .dash-leader__body { flex: 1; min-width: 0; }
        .dash-leader__name {
            display: block;
            color: var(--yrt-fg);
            font-weight: 600; font-size: 0.92rem;
            text-decoration: none;
            margin-bottom: 0.3rem;
        }
        .dash-leader__name:hover { color: var(--yrt-primary); }
        .dash-leader__bar { height: 4px; background: var(--yrt-surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 0.35rem; }
        .dash-leader__bar span {
            display: block; height: 100%;
            background: linear-gradient(90deg, #22C55E, #16A34A);
            border-radius: 999px;
            animation: dashBarFill 700ms var(--dash-ease) both;
        }
        .dash-leader__meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--yrt-fg-muted); }
        /* DSH-1: ro'yxat ostidagi chegirma xulosasi qatorlar bilan bir
           xil chetlanishda tursin (ilgari <ol> ichida, paddingsiz edi). */
        .dash-leader__foot { padding: 0 1.15rem 0.35rem; }
        .dash-leader__foot > div:first-child { margin-top: 0 !important; }
        .dash-leader__sum {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg); font-weight: 500;
        }

        /* ── Stats + low stock ────────────────────────────────────────── */
        .dash-stats { list-style: none; padding: 0; margin: 0; }
        .dash-stats li {
            display: flex; justify-content: space-between;
            padding: 0.55rem 0;
            border-bottom: 1px dashed var(--yrt-border);
            font-size: 0.88rem;
            color: var(--yrt-fg-muted);
        }
        .dash-stats li:last-child { border-bottom: 0; }
        .dash-stats li strong {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg);
            font-weight: 600;
        }
        .dash-stats__highlight strong { color: var(--yrt-primary); }

        .dash-low {
            margin-top: 0.9rem;
            padding: 0.75rem;
            border-radius: var(--dash-radius-sm);
            background: linear-gradient(180deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02));
            border: 1px solid rgba(245,158,11,0.18);
        }
        .dash-low__head {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 0.4rem;
            font-size: 0.74rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
            color: #B45309;
        }
        .dash-low__list { list-style: none; padding: 0; margin: 0; }
        .dash-low__list li {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 0.5rem;
            align-items: center;
            padding: 0.35rem 0;
            font-size: 0.82rem;
        }
        .dash-low__name { color: var(--yrt-fg); text-decoration: none; font-weight: 500; }
        .dash-low__name:hover { color: var(--yrt-primary); }
        .dash-low__branch { color: var(--yrt-fg-muted); font-size: 0.74rem; }

        /* ── Activity feed ────────────────────────────────────────────── */
        .dash-feed { list-style: none; padding: 0; margin: 0; }
        .dash-feed__row {
            display: grid;
            grid-template-columns: 50px 1.5fr 70px 90px 1fr 32px;
            align-items: center;
            gap: 0.75rem;
            padding: 0.65rem 1.15rem;
            border-bottom: 1px solid var(--yrt-border);
            transition: background 140ms var(--dash-ease);
        }
        .dash-feed__row:hover { background: var(--yrt-surface-2); }
        .dash-feed__row:last-child { border-bottom: 0; }
        .dash-feed__time {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg-muted);
            font-size: 0.85rem;
        }
        .dash-feed__cashier { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
        .dash-feed__cashier > span:last-child { display: flex; flex-direction: column; min-width: 0; }
        .dash-feed__cashier strong {
            font-size: 0.88rem; color: var(--yrt-fg);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dash-feed__cashier small { color: var(--yrt-fg-muted); font-size: 0.72rem; }
        .dash-avatar {
            width: 30px; height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--yrt-primary), var(--yrt-primary-soft));
            color: #FFFFFF;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.78rem; font-weight: 700;
            flex-shrink: 0;
        }
        .dash-feed__items { color: var(--yrt-fg-muted); font-size: 0.82rem; }
        .dash-feed__total {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            color: var(--yrt-fg); font-size: 0.95rem;
            text-align: right;
        }
        .dash-feed__total small {
            font-size: 0.7rem; color: var(--yrt-fg-muted);
            text-transform: uppercase; letter-spacing: 0.05em;
            margin-left: 0.2rem;
        }
        .dash-feed__view {
            width: 28px; height: 28px;
            border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--yrt-fg-muted);
            text-decoration: none;
            transition: background 140ms var(--dash-ease), color 140ms var(--dash-ease);
        }
        .dash-feed__view:hover { background: var(--yrt-primary); color: #FFFFFF; }
        @media (max-width: 900px) {
            .dash-feed__row {
                grid-template-columns: 1fr 1fr;
                row-gap: 0.25rem;
            }
            .dash-feed__time { grid-column: 1; }
            .dash-feed__total { grid-column: 2; text-align: right; }
            .dash-feed__cashier { grid-column: 1 / -1; }
            .dash-feed__items, .dash-feed__pay { font-size: 0.75rem; }
            .dash-feed__view { position: absolute; right: 0.6rem; top: 0.6rem; }
        }

        /* ── Mobile tightening ────────────────────────────────────────── */
        @media (max-width: 768px) {
            .dash-hero__inner { padding: 1.15rem 1.15rem 1rem; }
            .dash-hero__filters { padding: 0.7rem 1.15rem 0.85rem; }
            .dash-kpi { padding: 0.85rem 0.95rem; }
            .dash-kpi__value { font-size: 1.4rem; }
            .dash-kpi--lead .dash-kpi__value { font-size: 1.7rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .dash-kpi, .dash-alert, .dash-btn, .dash-feed__row,
            .dash-branch__fill, .dash-leader__bar span,
            .dash-pulse { transition: none; animation: none; }
        }

        /* ════════════════════════════════════════════════════════════════
           YURIT → Executive Glass auto-modernization layer
           Lifts every existing .yrt-section + .yrt-page-header on every page
           to match the dashboard's richer surface treatment without having
           to rewrite individual templates.
           ════════════════════════════════════════════════════════════════ */
        .yrt-section {
            border-radius: var(--dash-radius);
            border-color: var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            margin-bottom: 1rem;
            transition: box-shadow 220ms var(--dash-ease);
        }
        .yrt-section:hover { box-shadow: 0 4px 14px -4px rgba(11,13,18,0.10); }
        .yrt-section-head {
            padding: 1.05rem 1.15rem 0.9rem;
            background: var(--yrt-surface);
            border-bottom: 1px solid var(--yrt-border);
        }
        .yrt-section-head h2,
        .yrt-section-head .yrt-h2 {
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.005em;
        }
        .yrt-section-head h2 i,
        .yrt-section-head .yrt-h2 i { color: var(--yrt-primary); }
        .yrt-section-body { padding: 1.15rem; }
        .yrt-section-body.flush { padding: 0; }

        .yrt-kpi {
            border-radius: var(--dash-radius);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            transition: transform 220ms var(--dash-ease), box-shadow 220ms var(--dash-ease);
        }
        .yrt-kpi:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px -10px rgba(11,13,18,0.18);
        }
        .yrt-kpi.accent,
        .yrt-kpi.accent-success,
        .yrt-kpi.accent-amber,
        .yrt-kpi.accent-danger { border-left-width: 4px; }

        .yrt-page-header {
            position: relative;
            border-radius: var(--dash-radius);
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            overflow: hidden;
            margin: 0 0 1.25rem;
            padding: 1.15rem 1.35rem;
            isolation: isolate;
            /* preserve original flex layout for non-stack variants */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
        }
        .yrt-page-header::before {
            content: '';
            position: absolute; inset: 0;
            background: var(--dash-grad-aurora);
            z-index: -1; pointer-events: none;
            opacity: 0.9;
        }
        .yrt-page-header h1,
        .yrt-page-header .yrt-h1 {
            font-size: clamp(1.4rem, 2.2vw, 1.75rem);
            font-weight: 700;
            letter-spacing: -0.018em;
        }
        .yrt-page-header .yrt-sub {
            font-size: 0.9rem;
            display: inline-flex; align-items: center;
            gap: 0.35rem; flex-wrap: wrap;
        }
        .yrt-page-header .yrt-sub i { opacity: 0.7; }

        /* Stacked variant (filter row underneath) */
        .yrt-page-header.yrt-page-header-stack {
            padding: 0; flex-direction: column;
            align-items: stretch; gap: 0;
            border-bottom-width: 1px;
        }
        .yrt-page-title-row {
            display: flex; flex-wrap: wrap; align-items: flex-end;
            justify-content: space-between;
            gap: 0.85rem;
            padding: 1.15rem 1.35rem 0.95rem;
        }
        .yrt-page-filter-row {
            position: relative; z-index: 1;
            display: flex; flex-wrap: wrap;
            gap: 0.85rem 1.1rem;
            padding: 0.85rem 1.35rem;
            border-top: 1px solid var(--yrt-border);
            background: var(--yrt-surface);
            align-items: center;
        }
        .yrt-filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        .yrt-filter-label {
            font-size: 0.72rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--yrt-fg-muted);
            display: inline-flex; align-items: center; gap: 0.3rem;
        }

        /* Period chips inside filter row */
        .yrt-period-chips .btn-outline-secondary {
            border-color: transparent;
            color: var(--yrt-fg-muted);
            background: var(--yrt-surface-2);
        }
        .yrt-period-chips .btn-outline-secondary:hover {
            color: var(--yrt-fg);
            background: var(--yrt-surface-2);
            border-color: var(--yrt-border);
        }
        .yrt-period-chips .btn-primary {
            background: linear-gradient(135deg, #5B5BD6, #818CF8);
            border-color: transparent;
            box-shadow: 0 4px 12px -4px rgba(91,91,214,0.45);
        }

        /* Code pill — refresh */
        .code-pill {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
            padding: 0.1rem 0.45rem;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 500;
            border: 1px solid var(--yrt-border);
            text-decoration: none;
            display: inline-block;
        }
        .code-pill:hover { color: var(--yrt-primary); border-color: var(--yrt-primary); }

        /* Modernize Bootstrap card surface to match dash-card */
        .card {
            border-radius: var(--dash-radius);
            border-color: var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
        }
        .card-header {
            border-bottom-color: var(--yrt-border);
            background: var(--yrt-surface);
            border-top-left-radius: var(--dash-radius);
            border-top-right-radius: var(--dash-radius);
        }
        .card-footer {
            border-top-color: var(--yrt-border);
            background: var(--yrt-surface);
            border-bottom-left-radius: var(--dash-radius);
            border-bottom-right-radius: var(--dash-radius);
        }

        /* Dark mode adjustments for the modernization layer */
        [data-bs-theme="dark"] .yrt-page-header::before { opacity: 1; }

        /* ════════════════════════════════════════════════════════════════
           MICRO-INTERACTIONS LIBRARY — global
           Skeleton shimmer, count-up numeric tween, pulse dot variants,
           hover-lift card, press-scale button, status tile badges.
           ════════════════════════════════════════════════════════════════ */

        /* Skeleton — show while data loads. Wrap any block in .yrt-skeleton
           and the contents are hidden; on hydration remove the class.
           If your view needs a placeholder shape, use <div class="yrt-skel"
           style="width: X; height: Y"></div>. */
        @keyframes srtShimmer {
            0%   { background-position: -468px 0; }
            100% { background-position:  468px 0; }
        }
        .yrt-skel {
            display: inline-block;
            border-radius: var(--yrt-radius-sm);
            background: linear-gradient(90deg,
                var(--yrt-surface-2) 0%,
                var(--yrt-surface-3) 40%,
                var(--yrt-surface-2) 80%);
            background-size: 936px 100%;
            animation: srtShimmer 1.4s linear infinite;
            color: transparent !important;
            user-select: none;
            pointer-events: none;
        }
        .yrt-skel.is-block { display: block; }

        /* Pulse — live status indicator, multiple tones */
        @keyframes srtPulse {
            0%   { box-shadow: 0 0 0 0 currentColor; }
            70%  { box-shadow: 0 0 0 9px transparent; }
            100% { box-shadow: 0 0 0 0 transparent; }
        }
        .yrt-pulse {
            display: inline-block;
            width: 8px; height: 8px;
            border-radius: var(--yrt-radius-pill);
            background: var(--yrt-success);
            color: rgba(34,197,94,0.55);  /* feeds the keyframe via currentColor */
            animation: srtPulse 2.4s var(--yrt-ease) infinite;
        }
        .yrt-pulse[data-tone="amber"]  { background: var(--yrt-accent-soft); color: rgba(245,158,11,0.55); }
        .yrt-pulse[data-tone="danger"] { background: var(--yrt-danger); color: rgba(239,68,68,0.55); }
        .yrt-pulse[data-tone="info"]   { background: var(--yrt-info); color: rgba(14,165,233,0.55); }
        .yrt-pulse[data-tone="indigo"] { background: var(--yrt-primary); color: rgba(91,91,214,0.55); }

        /* Hover-lift — universal interactive surface treatment */
        .yrt-hover-lift {
            transition: transform var(--yrt-trans), box-shadow var(--yrt-trans);
            will-change: transform;
        }
        .yrt-hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: var(--yrt-shadow-lg);
        }
        .yrt-hover-lift:active { transform: translateY(0); transition-duration: 80ms; }

        /* Press-scale — for tap-friendly buttons (mobile) */
        @media (hover: none) and (pointer: coarse) {
            .yrt-press-scale:active { transform: scale(0.97); }
        }

        /* Status tile — small label + value badge cluster
           <span class="yrt-tile" data-tone="success">
              <span class="yrt-tile__icon"><i class="bi bi-check"></i></span>
              <span class="yrt-tile__body">
                  <strong>Tugallandi</strong><small>5 daqiqa oldin</small>
              </span>
           </span> */
        .yrt-tile {
            display: inline-flex; gap: 0.55rem; align-items: center;
            padding: 0.45rem 0.7rem;
            border-radius: var(--yrt-radius);
            background: var(--yrt-surface-2);
            border: 1px solid var(--yrt-border);
            font-size: 0.82rem;
        }
        .yrt-tile[data-tone="success"] { background: var(--yrt-success-tint); border-color: transparent; color: var(--yrt-success); }
        .yrt-tile[data-tone="warning"] { background: var(--yrt-warning-tint); border-color: transparent; color: var(--yrt-warning); }
        .yrt-tile[data-tone="danger"]  { background: var(--yrt-danger-tint);  border-color: transparent; color: var(--yrt-danger); }
        .yrt-tile[data-tone="info"]    { background: var(--yrt-info-tint);    border-color: transparent; color: var(--yrt-info); }
        .yrt-tile__icon {
            width: 24px; height: 24px;
            border-radius: var(--yrt-radius-sm);
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.55);
        }
        .yrt-tile__body { display: inline-flex; flex-direction: column; line-height: 1.15; }
        .yrt-tile__body small { opacity: 0.75; font-size: 0.72rem; }

        /* Staggered entrance — opt-in via .yrt-stagger on a parent, the
           children fade up sequentially. Keeps focus on hero data first. */
        @keyframes srtStaggerFade {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .yrt-stagger > * {
            opacity: 0;
            animation: srtStaggerFade 360ms var(--yrt-ease-out) both;
        }
        .yrt-stagger > *:nth-child(1) { animation-delay: 40ms; }
        .yrt-stagger > *:nth-child(2) { animation-delay: 90ms; }
        .yrt-stagger > *:nth-child(3) { animation-delay: 140ms; }
        .yrt-stagger > *:nth-child(4) { animation-delay: 190ms; }
        .yrt-stagger > *:nth-child(5) { animation-delay: 240ms; }
        .yrt-stagger > *:nth-child(6) { animation-delay: 280ms; }
        @media (prefers-reduced-motion: reduce) {
            .yrt-stagger > *,
            .yrt-skel,
            .yrt-pulse,
            .yrt-hover-lift { animation: none !important; transition: none !important; }
        }

        /* Refined glass surface — opt-in with .yrt-glass on any container */
        .yrt-glass {
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(12px) saturate(1.1);
            -webkit-backdrop-filter: blur(12px) saturate(1.1);
            border: 1px solid rgba(255,255,255,0.55);
            box-shadow: var(--yrt-shadow-md);
        }
        [data-bs-theme="dark"] .yrt-glass {
            background: rgba(20,25,38,0.66);
            border-color: rgba(255,255,255,0.05);
        }

        /* Count-up — for numeric display; JS sets the value, CSS provides
           the monospace + tabular treatment so the digits don't jitter. */
        .yrt-count {
            font-family: var(--yrt-font-mono);
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum';
            display: inline-block;
        }

        /* ════════════════════════════════════════════════════════════════
           Bootstrap .table → Executive Glass treatment
           Every plain Bootstrap table inherits the dashboard's data-dense
           look: glass header with uppercase labels, tabular numerics,
           subtle hover row, rounded card edge when inside .card.
           ════════════════════════════════════════════════════════════════ */
        .table {
            font-size: 0.88rem;
            color: var(--yrt-fg);
            border-color: var(--yrt-border);
            margin-bottom: 0;
            --bs-table-bg: transparent;
            --bs-table-color: var(--yrt-fg);
            --bs-table-hover-bg: var(--yrt-surface-2);
            --bs-table-hover-color: var(--yrt-fg);
            --bs-table-border-color: var(--yrt-border);
        }
        .table > :not(caption) > * > * {
            padding: 0.6rem 0.85rem;
            border-bottom-color: var(--yrt-border);
        }
        .table > thead {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
        }
        .table > thead > tr > th {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg-muted);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 0.04em;
            border-bottom: 1px solid var(--yrt-border);
            white-space: nowrap;
        }
        .table > tbody > tr { transition: background var(--yrt-trans); }
        .table > tbody > tr:hover { background: var(--yrt-surface-2); }
        .table > tbody > tr:last-child > * { border-bottom: 0; }
        .table-sm > :not(caption) > * > * { padding: 0.4rem 0.6rem; }
        .table-bordered { border-color: var(--yrt-border); }
        .table-bordered > :not(caption) > * > * { border-color: var(--yrt-border); }

        /* Tabular numerics for cells marked .num or .text-end */
        .table td.num, .table th.num,
        .table td.text-end, .table th.text-end {
            font-variant-numeric: tabular-nums;
            text-align: right;
        }
        .table .code-pill, .table code { font-family: var(--yrt-font-mono); }

        /* Tables sitting inside a .card or .dash-card: clip to rounded edge */
        .card .table-responsive,
        .dash-card .table-responsive,
        .yrt-section .table-responsive { border-radius: 0; overflow: auto; }
        /* Kartaning burchaklarini yumaloq qilamiz, LEKIN gorizontal
           scroll'ni saqlaymiz (overflow:hidden emas, overflow-x:auto) */
        .card > .table-responsive:first-child,
        .card > .table:first-child { border-top-left-radius: var(--dash-radius); border-top-right-radius: var(--dash-radius); overflow-x: auto; overflow-y: hidden; }
        .card > .table-responsive:last-child,
        .card > .table:last-child { border-bottom-left-radius: var(--dash-radius); border-bottom-right-radius: var(--dash-radius); overflow-x: auto; overflow-y: hidden; }

        /* Bootstrap badge → glass pill */
        .badge {
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 0.32em 0.65em;
            border-radius: 999px;
            font-size: 0.72em;
        }

        /* ════════════════════════════════════════════════════════════════
           Forms, modals, alerts, dropdowns, list-group, pagination
           ════════════════════════════════════════════════════════════════ */
        .form-control, .form-select {
            border-radius: var(--dash-radius-sm);
            border-color: var(--yrt-border);
            transition: border-color 160ms var(--dash-ease), box-shadow 160ms var(--dash-ease);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--yrt-primary);
            box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.15);
        }
        .form-control-lg { border-radius: var(--dash-radius); font-size: 1.05rem; }
        .input-group > .form-control,
        .input-group > .form-select { border-color: var(--yrt-border); }
        .input-group > .btn { border-color: transparent; }
        .input-group-text {
            background: var(--yrt-surface-2);
            border-color: var(--yrt-border);
            color: var(--yrt-fg-muted);
        }
        .form-label {
            font-size: 0.78rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--yrt-fg-muted);
            margin-bottom: 0.3rem;
        }
        .form-label.small { font-size: 0.72rem; }

        /* Bootstrap btn polish — keep colors but soften corners + shadows */
        .btn {
            border-radius: var(--dash-radius-sm);
            font-weight: 500;
            transition: transform 160ms var(--dash-ease), box-shadow 160ms var(--dash-ease),
                        background 160ms var(--dash-ease), color 160ms var(--dash-ease);
        }
        .btn:hover { transform: translateY(-1px); }
        .btn-sm { border-radius: 8px; padding: 0.32rem 0.7rem; }
        .btn-lg { border-radius: var(--dash-radius); }
        .btn-primary {
            background: linear-gradient(135deg, #5B5BD6, #6366F1);
            border-color: transparent;
            box-shadow: 0 4px 12px -4px rgba(91, 91, 214, 0.40);
        }
        .btn-primary:hover, .btn-primary:focus {
            background: linear-gradient(135deg, #4F46E5, #5B5BD6);
            border-color: transparent;
            box-shadow: 0 8px 20px -6px rgba(91, 91, 214, 0.55);
        }
        .btn-success {
            background: linear-gradient(135deg, #16A34A, #22C55E);
            border-color: transparent;
            box-shadow: 0 4px 12px -4px rgba(22, 163, 74, 0.40);
        }
        .btn-success:hover, .btn-success:focus {
            background: linear-gradient(135deg, #15803D, #16A34A);
            border-color: transparent;
        }
        .btn-warning {
            background: linear-gradient(135deg, #D97706, #F59E0B);
            border-color: transparent;
            color: #FFFFFF;
        }
        .btn-warning:hover, .btn-warning:focus { color: #FFFFFF; }
        .btn-danger {
            background: linear-gradient(135deg, #B91C1C, #EF4444);
            border-color: transparent;
        }
        .btn-info {
            background: linear-gradient(135deg, #0284C7, #38BDF8);
            border-color: transparent;
            color: #FFFFFF;
        }
        .btn-info:hover, .btn-info:focus { color: #FFFFFF; }
        .btn-outline-primary, .btn-outline-success, .btn-outline-danger,
        .btn-outline-warning, .btn-outline-info, .btn-outline-secondary {
            background: var(--yrt-surface);
            border-color: var(--yrt-border);
        }
        .btn-outline-secondary { color: var(--yrt-fg-muted); }
        .btn-outline-primary { color: var(--yrt-primary); }
        .btn-outline-success { color: #16A34A; }
        .btn-outline-danger { color: #B91C1C; }
        .btn-outline-warning { color: #B45309; }
        .btn-outline-info { color: #0369A1; }
        .btn-outline-primary:hover { background: var(--yrt-primary); color: #FFF; border-color: transparent; }
        .btn-outline-success:hover { background: #16A34A; color: #FFF; border-color: transparent; }
        .btn-outline-danger:hover  { background: #B91C1C; color: #FFF; border-color: transparent; }
        .btn-outline-warning:hover { background: #D97706; color: #FFF; border-color: transparent; }
        .btn-outline-info:hover    { background: #0284C7; color: #FFF; border-color: transparent; }
        .btn-link { color: var(--yrt-primary); text-decoration: none; }
        .btn-link:hover { color: var(--yrt-primary); text-decoration: underline; transform: none; }

        /* Modal — glass surface */
        .modal-content {
            border-radius: var(--dash-radius);
            border-color: var(--yrt-border);
            box-shadow: 0 24px 60px -16px rgba(11, 13, 18, 0.35);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .modal-header {
            border-bottom-color: var(--yrt-border);
            padding: 1rem 1.25rem;
        }
        .modal-title {
            font-weight: 600;
            font-size: 1.05rem;
            letter-spacing: -0.005em;
        }
        .modal-body { padding: 1.25rem; }
        .modal-footer {
            border-top-color: var(--yrt-border);
            padding: 0.85rem 1.25rem;
        }

        /* Alerts */
        .alert {
            border-radius: var(--dash-radius-sm);
            border: 1px solid transparent;
            padding: 0.85rem 1.05rem;
        }
        .alert-success { background: rgba(34,197,94,0.10); color: #15803D; border-color: rgba(34,197,94,0.18); }
        .alert-warning { background: rgba(245,158,11,0.10); color: #B45309; border-color: rgba(245,158,11,0.18); }
        .alert-danger  { background: rgba(239,68,68,0.10); color: #B91C1C; border-color: rgba(239,68,68,0.18); }
        .alert-info    { background: rgba(14,165,233,0.10); color: #0369A1; border-color: rgba(14,165,233,0.18); }
        [data-bs-theme="dark"] .alert-success { color: #6EE7B7; }
        [data-bs-theme="dark"] .alert-warning { color: #FCD34D; }
        [data-bs-theme="dark"] .alert-danger  { color: #FCA5A5; }
        [data-bs-theme="dark"] .alert-info    { color: #7DD3FC; }

        /* Dropdown menu — glass */
        .dropdown-menu {
            border-radius: var(--dash-radius-sm);
            border-color: var(--yrt-border);
            box-shadow: 0 12px 32px -10px rgba(11, 13, 18, 0.18);
            padding: 0.4rem;
        }
        .dropdown-item {
            border-radius: 6px;
            padding: 0.5rem 0.7rem;
            color: var(--yrt-fg);
            font-size: 0.9rem;
        }
        .dropdown-item:hover, .dropdown-item:focus {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
        }
        .dropdown-divider { border-color: var(--yrt-border); margin: 0.3rem 0; }

        /* List group — soft */
        .list-group {
            border-radius: var(--dash-radius);
            border-color: var(--yrt-border);
        }
        .list-group-item {
            border-color: var(--yrt-border);
            padding: 0.85rem 1rem;
            background: var(--yrt-surface);
            color: var(--yrt-fg);
        }
        .list-group-item-action:hover {
            background: var(--yrt-surface-2);
            color: var(--yrt-fg);
        }

        /* Pagination */
        .pagination { gap: 0.25rem; }
        .page-link {
            border-radius: 8px !important;
            border-color: var(--yrt-border);
            color: var(--yrt-fg);
            font-weight: 500;
        }
        .page-link:hover { background: var(--yrt-surface-2); border-color: var(--yrt-border); color: var(--yrt-fg); }
        .page-item.active .page-link {
            background: linear-gradient(135deg, #5B5BD6, #6366F1);
            border-color: transparent;
            color: #FFFFFF;
            box-shadow: 0 4px 12px -4px rgba(91, 91, 214, 0.40);
        }
        .page-item.disabled .page-link { color: var(--yrt-fg-muted); background: var(--yrt-surface); }

        /* Breadcrumb */
        .breadcrumb {
            background: transparent;
            font-size: 0.85rem;
            margin-bottom: 0.75rem;
        }
        .breadcrumb-item + .breadcrumb-item::before { color: var(--yrt-fg-muted); }
        .breadcrumb-item a { color: var(--yrt-primary); text-decoration: none; }
        .breadcrumb-item.active { color: var(--yrt-fg-muted); }

        /* Tooltip / popover */
        .tooltip-inner {
            background: #0B0D12;
            border-radius: 8px;
            padding: 0.4rem 0.7rem;
            font-size: 0.78rem;
        }

        /* Nav tabs / pills */
        .nav-tabs {
            border-bottom-color: var(--yrt-border);
            gap: 0.25rem;
        }
        .nav-tabs .nav-link {
            border-radius: var(--dash-radius-sm) var(--dash-radius-sm) 0 0;
            border: 1px solid transparent;
            color: var(--yrt-fg-muted);
            font-weight: 500;
            padding: 0.55rem 1rem;
        }
        .nav-tabs .nav-link:hover { color: var(--yrt-fg); border-color: var(--yrt-border) var(--yrt-border) transparent; }
        .nav-tabs .nav-link.active {
            background: var(--yrt-surface);
            color: var(--yrt-primary);
            border-color: var(--yrt-border) var(--yrt-border) var(--yrt-surface);
        }
        .nav-pills .nav-link {
            border-radius: 999px;
            color: var(--yrt-fg-muted);
            font-weight: 500;
            padding: 0.4rem 0.95rem;
        }
        .nav-pills .nav-link.active {
            background: linear-gradient(135deg, #5B5BD6, #6366F1);
            color: #FFFFFF;
            box-shadow: 0 4px 12px -4px rgba(91, 91, 214, 0.40);
        }

        /* Progress bar */
        .progress {
            height: 8px;
            border-radius: 999px;
            background: var(--yrt-surface-2);
            overflow: hidden;
        }
        .progress-bar {
            background: linear-gradient(90deg, var(--yrt-primary), var(--yrt-primary-soft));
            border-radius: 999px;
        }
        .progress-bar.bg-success { background: linear-gradient(90deg, #16A34A, #22C55E); }
        .progress-bar.bg-warning { background: linear-gradient(90deg, #D97706, #F59E0B); }
        .progress-bar.bg-danger  { background: linear-gradient(90deg, #B91C1C, #EF4444); }
        .progress-bar.bg-info    { background: linear-gradient(90deg, #0284C7, #38BDF8); }

        /* ════════════════════════════════════════════════════════════
           DASH BRIDGE — apply executive Liquid Glass treatment to the
           legacy .yrt-* components inside any .dash-page container.
           Lets a page opt into the dashboard's visual language by just
           adding `dash-page` to its outer wrapper, without rewriting
           markup. Bumps surface radius, softens borders, adds the
           lifted KPI hover, gives the section heads the dash-card
           rhythm and gradient-tints the first KPI as the "lead".
           ════════════════════════════════════════════════════════════ */

        /* Page header gets an Aurora glow strip behind it. */
        .dash-page > .yrt-page-header,
        .dash-page > .yrt-page-header-stack {
            position: relative;
            isolation: isolate;
            background: var(--yrt-surface);
            border: 1px solid var(--yrt-border);
            border-radius: 16px;
            padding: 1.25rem 1.4rem;
            margin-bottom: 1.25rem;
            overflow: hidden;
        }
        .dash-page > .yrt-page-header::before,
        .dash-page > .yrt-page-header-stack::before {
            content: '';
            position: absolute; inset: 0;
            background: var(--dash-grad-aurora, radial-gradient(
                ellipse at top left, rgba(91,91,214,0.16), transparent 55%),
                radial-gradient(ellipse at top right, rgba(34,197,94,0.12), transparent 50%),
                radial-gradient(ellipse at bottom, rgba(245,158,11,0.08), transparent 60%));
            z-index: -1; pointer-events: none;
        }
        .dash-page > .yrt-page-header .yrt-h1,
        .dash-page > .yrt-page-header-stack .yrt-h1 {
            font-size: clamp(1.5rem, 2.4vw, 1.95rem);
            letter-spacing: -0.02em;
            font-weight: 700;
        }

        /* KPI grid → dash-kpis spacing + first card as the gradient lead */
        .dash-page .yrt-kpi-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 0.85rem;
            margin-bottom: 1.4rem;
        }
        @media (max-width: 1100px) {
            .dash-page .yrt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
            .dash-page .yrt-kpi-grid > .yrt-kpi:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 600px) {
            .dash-page .yrt-kpi-grid { grid-template-columns: 1fr; }
            .dash-page .yrt-kpi-grid > .yrt-kpi:first-child { grid-column: auto; }
        }
        .dash-page .yrt-kpi {
            border-radius: 16px;
            padding: 1.05rem 1.15rem;
            border: 1px solid var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            transition: transform 220ms cubic-bezier(0.22,1,0.36,1),
                        box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
            overflow: hidden;
            position: relative;
            isolation: isolate;
        }
        .dash-page .yrt-kpi:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px -10px rgba(11,13,18,0.18);
        }
        .dash-page .yrt-kpi-value {
            font-size: 1.7rem;
            letter-spacing: -0.015em;
        }
        /* Subtle tone tint per position (parallels dashboard satellites) */
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(2)::before,
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(3)::before,
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(4)::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit;
            opacity: 0.45; z-index: -1; pointer-events: none;
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(2)::before {
            background: linear-gradient(160deg, rgba(91,91,214,0.10), transparent 60%);
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(3)::before {
            background: linear-gradient(160deg, rgba(245,158,11,0.10), transparent 60%);
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:nth-child(4)::before {
            background: linear-gradient(160deg, rgba(100,116,139,0.08), transparent 60%);
        }
        /* Lead KPI — the first card becomes a gradient hero */
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child {
            background: linear-gradient(135deg, #5B5BD6 0%, #8B5CF6 50%, #EC4899 100%);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 14px 44px -14px rgba(91,91,214,0.55);
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child::before { display: none; }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-kpi-label,
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-kpi-meta {
            color: rgba(255,255,255,0.88);
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-kpi-value {
            color: #FFFFFF;
            font-size: 2.1rem;
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-num,
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child strong {
            color: #FFFFFF;
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-delta {
            background: rgba(255,255,255,0.22) !important;
            color: #FFFFFF !important;
        }
        .dash-page .yrt-kpi-grid > .yrt-kpi:first-child .yrt-delta i { color: #FFFFFF; }

        /* Sections → dash-card rhythm */
        .dash-page .yrt-section {
            border-radius: 16px;
            border: 1px solid var(--yrt-border);
            box-shadow: 0 1px 2px rgba(11,13,18,0.04);
            background: var(--yrt-surface);
            overflow: hidden;
            transition: box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
        }
        .dash-page .yrt-section:hover {
            box-shadow: 0 6px 24px -10px rgba(11,13,18,0.12);
        }
        .dash-page .yrt-section-head {
            background: transparent;
            border-bottom: 1px solid var(--yrt-border);
            padding: 1rem 1.15rem 0.9rem;
        }
        .dash-page .yrt-section-head h2,
        .dash-page .yrt-section-head .yrt-h2 {
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.005em;
        }
        .dash-page .yrt-section-head .yrt-sub {
            font-size: 0.82rem;
            color: var(--yrt-fg-muted);
        }
        .dash-page .yrt-section-body { padding: 1.05rem 1.15rem 1.15rem; }
        .dash-page .yrt-section-body.flush { padding: 0; }

        /* Data tables inside dash-page get a quieter, more readable look */
        .dash-page .yrt-data-table thead th {
            font-size: 0.7rem;
            letter-spacing: 0.06em;
            padding: 0.6rem 0.95rem;
        }
        .dash-page .yrt-data-table tbody td {
            padding: 0.7rem 0.95rem;
        }
        .dash-page .yrt-data-table tbody tr:hover {
            background: var(--yrt-surface-2);
        }

        /* Tag pills (period chips, filter labels) get the brighter
           Linear-style active state on dash pages. */
        .dash-page .yrt-period-chips .btn-primary {
            background: var(--yrt-fg);
            color: var(--yrt-surface);
            border-color: var(--yrt-fg);
        }
        [data-bs-theme="dark"] .dash-page .yrt-period-chips .btn-primary {
            background: var(--yrt-primary);
            color: var(--yrt-on-primary);
            border-color: var(--yrt-primary);
        }

        /* Section grids spacing — keep matching dash-page rhythm */
        .dash-page .row.g-3 { --bs-gutter-y: 1rem; }

        /* ============ GLOBAL RESPONSIVE SAFETY-NET ============ */
        /* Hech narsa ekrandan chiqib ketmasin — telefon, planshet,
           laptop, monitor — hammasida moslashadi. */
        html, body { max-width: 100%; overflow-x: hidden; }
        img, svg, video, canvas { max-width: 100%; }
        /* Jadvallar tabiiy kengligini oladi; scroll o'rovchi (.table-responsive
           / .yrt-table-scroll) uni gorizontal aylantiradi */
        .table-responsive, .yrt-table-scroll {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .table-responsive > table, .yrt-table-scroll > table { max-width: none; }
        /* O'ngga aylantirish mumkinligini bildiruvchi yumshoq soya */
        .table-responsive, .yrt-table-scroll { position: relative; }
        /* Har qanday jadval o'ralmagan bo'lsa ham gorizontal scroll qiladi */
        .yrt-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .table-responsive, .yrt-table-scroll { scrollbar-width: thin; }
        /* Kartalar ichidagi keng bloklar kartani yormasin */
        .card, .dash-card, .yrt-section { max-width: 100%; }
        /* Uzun so'z/kod qatorlari sindirilsin */
        td, th, .badge, code { overflow-wrap: anywhere; }
        /* Kichik ekranlarda gap va padding'ni ixchamlaymiz */
        @media (max-width: 575.98px) {
            .card { padding: 0.85rem !important; }
            .dash-hero__inner { padding: 1.1rem !important; }
            .dash-hero__title { font-size: 1.35rem !important; }
            .table-sm td, .table-sm th { padding: 0.35rem 0.4rem !important; }
            .btn-lg { padding: 0.6rem 0.9rem !important; font-size: 0.95rem !important; }
            .dash-kpi__value { font-size: 1.5rem !important; }
        }

        /* Touch targets: icon-only controls reach ~44px on touch devices */
        @media (pointer: coarse) {
            .btn { min-height: 40px; }
            .btn:has(> i.bi:only-child) {
                min-width: 44px; min-height: 44px;
                display: inline-flex; align-items: center; justify-content: center;
            }
            .btn-group-sm > .btn:has(> i.bi:only-child),
            .btn-sm:has(> i.bi:only-child) { min-width: 40px; min-height: 40px; }
        }
    
    /* --- Jadval ustunlarini sozlash (yurit-table-resize.js) --- */
    .yrt-col-handle {
        position: absolute; top: 0; right: -4px; width: 8px; height: 100%;
        cursor: col-resize; user-select: none; touch-action: none;
        z-index: 3; background: transparent;
    }
    .yrt-col-handle::after {
        content: ''; position: absolute; top: 18%; left: 3px;
        width: 2px; height: 64%; border-radius: 2px;
        background: transparent; transition: background .12s;
    }
    th:hover > .yrt-col-handle::after { background: rgba(13,110,253,.35); }
    .yrt-col-handle:hover::after,
    body.yrt-col-resizing .yrt-col-handle:hover::after { background: #0d6efd; }
    /* Tortayotganda matn belgilanib ketmasin */
    body.yrt-col-resizing { cursor: col-resize; user-select: none; }
    body.yrt-col-resizing * { cursor: col-resize !important; }
    /* Kenglik cheklanganda matn chiroyli kesilsin */
    table[style*="table-layout: fixed"] th,
    table[style*="table-layout: fixed"] td {
        overflow: hidden; text-overflow: ellipsis;
    }
    @media print { .yrt-col-handle { display: none !important; } }

    /* Saralanadigan jadval sarlavhalari (_sort_th.html) — ilgari bu CSS
       HAR <th> ichida takrorlanardi. */
    .sort-th-link:hover { color: #0d6efd !important; }
    .sort-th-link i { opacity: .4; transition: opacity .15s; }
    .sort-th-link:hover i { opacity: 1; }

    /* --- Jadval qator raqamlari (yurit-rownum.js) ---
       Tor, xira va tanlanmaydigan: raqam yo'l ko'rsatadi, lekin
       ma'lumot bilan bellashmaydi. Nusxa olishda ham qo'shilmaydi. */
    .yrt-rownum {
        width: 34px;
        min-width: 34px;
        text-align: right;
        padding-right: 10px !important;
        color: var(--yrt-muted, #6B7280);
        font-size: .78rem;
        font-variant-numeric: tabular-nums;
        user-select: none;
        white-space: nowrap;
    }
    th.yrt-rownum { font-weight: 600; }
    @media print { .yrt-rownum { display: none !important; } }

    /* AUD-1: audit partiyasi ochilganda ichki qatorlar ro'yxati */
    .yrt-audit-batch { max-width: 620px; max-height: 340px; overflow: auto; }
    .yrt-audit-batch ol { font-size: .84em; }
    .yrt-audit-batch li { margin-bottom: .25rem; }

    /* --- Rasmni kattalashtirib ko'rish (yurit-zoom.js) --- */
    /* --- Faktura rasmini kattalashtirish --- */
    .yrt-zoom {
        display: none;
        position: fixed; inset: 0; z-index: 2000;
        background: rgba(0, 0, 0, .92);
        overflow: hidden;
        touch-action: none;
    }
    .yrt-zoom.is-open { display: block; }
    .yrt-zoom img {
        position: absolute; top: 50%; left: 50%;
        transform-origin: center center;
        max-width: none; max-height: none;
        user-select: none; -webkit-user-drag: none;
        cursor: grab;
    }
    .yrt-zoom img.is-dragging { cursor: grabbing; }
    .yrt-zoom__bar {
        position: absolute; top: 0; left: 0; right: 0; z-index: 2;
        display: flex; gap: .35rem; align-items: center; justify-content: center;
        flex-wrap: wrap;
        padding: calc(.5rem + env(safe-area-inset-top, 0px)) .5rem .5rem;
        background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0));
    }
    .yrt-zoom__pct {
        color: #fff; font-size: .8rem; min-width: 3.2rem; text-align: center;
    }
    .yrt-zoom__hint {
        position: absolute; left: 0; right: 0;
        bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
        text-align: center; color: rgba(255,255,255,.62); pointer-events: none;
        padding: 0 1rem;
    }
    @media (max-width: 575.98px) { .yrt-zoom__hint { display: none; } }

    /* --- Mahsulot rasmi (product_detail sarlavhasi) --- */
    .yrt-prodimg {
        position: relative; width: 120px; height: 120px;
        border-radius: 8px; border: 1px solid var(--yrt-border);
        background: #fff; overflow: hidden; display: block;
    }
    .yrt-prodimg img {
        width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
        display: block;
    }
    .yrt-prodimg__acts {
        position: absolute; inset: auto 0 0 0;
        display: flex; gap: .25rem; justify-content: center;
        padding: .25rem; opacity: 0; transition: opacity .15s;
        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55));
    }
    .yrt-prodimg:hover .yrt-prodimg__acts { opacity: 1; }
    .yrt-prodimg--empty {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: .3rem; cursor: pointer;
        border-style: dashed; color: var(--yrt-fg-muted);
        font-size: .72rem; padding: 0;
    }
    .yrt-prodimg--empty i { font-size: 1.5rem; }
    .yrt-prodimg--empty:hover {
        border-color: var(--yrt-primary); color: var(--yrt-primary);
    }