@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
        body { font-family: 'Cairo', sans-serif; }

        /* ===== Housing Executive Dashboard V8 ===== */
        .housing-exec-report{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
        .housing-report-header{background:linear-gradient(135deg,#0f172a 0%,#1e293b 58%,#312e81 100%);color:#fff;border-radius:18px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 28px rgba(15,23,42,.14)}
        .housing-report-brand{display:flex;align-items:center;gap:16px}.housing-report-logo{background:#fff;border-radius:12px;padding:6px 10px;min-width:150px;display:flex;align-items:center;justify-content:center}.housing-report-brand h2{font-size:20px;font-weight:900;margin:0 0 2px}.housing-report-brand p{font-size:10px;color:#cbd5e1;font-weight:700;margin:0}
        .housing-report-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:10px;font-weight:700;color:#dbeafe}.housing-live-dot{color:#86efac}.housing-live-dot i{font-size:7px;margin-left:4px}
        .housing-kpi-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.housing-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:15px;padding:11px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 3px 12px rgba(15,23,42,.06);min-height:72px}.housing-kpi .kpi-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}.housing-kpi small{display:block;font-size:9px;font-weight:800;color:#64748b;line-height:1.3}.housing-kpi strong{display:block;font-size:23px;line-height:1.1;font-weight:900;color:#0f172a;margin-top:3px}.housing-kpi-primary{background:linear-gradient(135deg,#312e81,#4338ca);border:none}.housing-kpi-primary small,.housing-kpi-primary strong{color:#fff}.housing-kpi-primary .kpi-icon{background:rgba(255,255,255,.16);color:#fde68a}.housing-kpi-success .kpi-icon{background:#dcfce7;color:#15803d}.housing-kpi-success strong{color:#15803d}.housing-kpi-leave .kpi-icon{background:#fffbeb;color:#d97706}.housing-kpi-leave strong{color:#d97706}.housing-kpi-vacant .kpi-icon{background:#e0f2fe;color:#0369a1}.housing-kpi-vacant strong{color:#0369a1}.housing-kpi-danger .kpi-icon{background:#ffe4e6;color:#be123c}.housing-kpi-danger strong{color:#be123c}.housing-kpi-neutral .kpi-icon{background:#f1f5f9;color:#475569}.housing-kpi-blue .kpi-icon{background:#dbeafe;color:#1d4ed8}.housing-kpi-teal .kpi-icon{background:#ccfbf1;color:#0f766e}
        .housing-report-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.housing-report-column{display:flex;flex-direction:column;gap:12px}.housing-analysis-card{background:#fff;border:1px solid #dbe3ef;border-radius:16px;padding:0 14px 12px;box-shadow:0 4px 14px rgba(15,23,42,.05);overflow:hidden}.analysis-head{margin:0 -14px 10px;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:900;border-bottom:1px solid}.analysis-head em{font-size:8px;font-style:normal;padding:3px 7px;border-radius:999px;background:#fff9;font-weight:800}.analysis-head.amber{background:#fffbeb;color:#92400e;border-color:#fde68a}.analysis-head.green{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}.analysis-head.blue{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}.analysis-head.indigo{background:#eef2ff;color:#312e81;border-color:#c7d2fe}
        .housing-rank-list{display:grid;gap:7px}.housing-rank-row{display:grid;grid-template-columns:minmax(115px,1.4fr) 3.2fr 52px;align-items:center;gap:8px;min-height:24px}.housing-rank-name{font-size:9.5px;font-weight:800;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.housing-rank-bar{height:9px;background:#eef2f7;border-radius:999px;overflow:hidden;position:relative}.housing-rank-fill{height:100%;border-radius:999px;min-width:3px}.housing-rank-value{text-align:left;font-size:9px;color:#64748b;font-weight:800;white-space:nowrap}.housing-rank-value b{font-size:12px;color:#0f172a;margin-left:3px}.rank-amber{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.rank-green{background:linear-gradient(90deg,#059669,#34d399)}.rank-blue{background:linear-gradient(90deg,#2563eb,#60a5fa)}.rank-indigo{background:linear-gradient(90deg,#4f46e5,#818cf8)}
        .housing-room-status-card{margin-top:auto;padding-bottom:9px}.analysis-head.status-head{background:#f0fdfa;color:#115e59;border-color:#99f6e4}
        .housing-room-status-buildings{display:grid;grid-template-columns:1fr 1fr;gap:8px}.housing-room-status-building{border:1px solid #dbe3ef;border-radius:10px;background:#fbfdff;padding:6px 7px;min-width:0}
        .housing-room-status-building-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:8.5px;font-weight:900;color:#334155;margin-bottom:5px}.housing-room-status-building-title b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;border-radius:7px;background:#e2e8f0;color:#0f172a;font-size:11px}
        .housing-room-status-chips{display:flex;flex-wrap:wrap;gap:4px}.housing-room-status-chip{display:inline-flex;align-items:center;gap:3px;min-height:20px;padding:3px 5px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;font-size:7.4px;font-weight:800;color:#475569;white-space:nowrap}.housing-room-status-chip i{font-size:7px}.housing-room-status-chip b{font-size:9.5px;color:#0f172a;margin-right:2px}.housing-room-status-chip.status-ready{background:#ecfdf5;border-color:#a7f3d0;color:#047857}.housing-room-status-chip.status-occupied{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.housing-room-status-chip.status-service{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}.housing-room-status-chip.status-maintenance{background:#fffbeb;border-color:#fde68a;color:#b45309}.housing-room-status-chip.status-outservice,.housing-room-status-chip.status-closed{background:#fff1f2;border-color:#fecdd3;color:#be123c}.housing-room-status-chip.status-unspecified,.housing-room-status-chip.status-other{background:#f8fafc;color:#64748b}.housing-room-status-empty{font-size:7.5px;color:#94a3b8;font-weight:800}
        .housing-report-footer{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:7px 12px;display:flex;justify-content:space-between;align-items:center;font-size:8.5px;font-weight:800;color:#64748b}
        .housing-occupancy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.housing-occupancy-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:9px 7px;text-align:center}.housing-occupancy-stat span{display:block;font-size:8px;font-weight:800;color:#64748b;line-height:1.35}.housing-occupancy-stat b{display:block;font-size:18px;font-weight:900;color:#0f172a;margin-top:3px}.housing-occupancy-stat small{display:block;font-size:7px;color:#94a3b8;font-weight:700;margin-top:1px}
        .housing-building-card{flex:1;display:flex;flex-direction:column}.housing-building-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}.housing-building-box{border:1px solid #dbeafe;background:linear-gradient(180deg,#f8fbff,#fff);border-radius:13px;padding:10px;display:flex;flex-direction:column;justify-content:space-between}.housing-building-box h4{font-size:11px;font-weight:900;color:#1e3a8a;margin:0 0 7px;display:flex;align-items:center;justify-content:space-between}.housing-building-box h4 b{font-size:18px;color:#312e81}.housing-building-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.housing-building-stat{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:6px;text-align:center}.housing-building-stat span{display:block;font-size:7.5px;color:#64748b;font-weight:800}.housing-building-stat b{display:block;font-size:14px;color:#0f172a;font-weight:900;margin-top:1px}.housing-building-progress{height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin-top:8px}.housing-building-progress > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#22c55e)}.housing-building-rate{font-size:8px;font-weight:900;color:#475569;text-align:left;margin-top:4px}

        @media print {
            @page { size: A4 landscape; margin: 3mm; page-orientation: upright; }
            body { 
                background: #ffffff !important; 
                -webkit-print-color-adjust: exact !important; 
                print-color-adjust: exact !important; 
            }
            header, nav, #login-screen, .no-print, #cloud-loader { display: none !important; }
            #app-container { display: block !important; }
            .erp-module:not(#module-housing):not(#module-fleet) { display: none !important; }
            .print-card {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                border: 1px solid #cbd5e1 !important;
                box-shadow: none !important;
            }
            #module-housing{display:block !important;}
            #module-fleet{display:none !important;}
            html,body{margin:0 !important;padding:0 !important;overflow:hidden !important;transform:none !important;writing-mode:horizontal-tb !important;}
            #app-container,#module-housing{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;}
            #module-housing > .container{width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;}
            #module-housing > .container > *{margin-top:0 !important;margin-bottom:0 !important;}
            #tab-sec-housing-dash{display:grid !important;grid-template-rows:auto auto minmax(0,1fr) auto !important;width:100% !important;height:203mm !important;max-height:203mm !important;box-sizing:border-box !important;margin:0 !important;padding:0 !important;gap:2mm !important;overflow:hidden !important;transform:none !important;writing-mode:horizontal-tb !important;}
            #tab-sec-housing-tbl,#tab-sec-housing-dep{display:none !important;}
            .housing-report-header{padding:2.6mm 3.6mm !important;border-radius:2.7mm !important;min-height:20mm !important;}
            .housing-report-logo{min-width:36mm !important;max-width:48mm !important;height:13mm !important;padding:1mm 2mm !important}.housing-report-logo img{max-height:11mm !important;max-width:44mm !important}
            .housing-report-brand{gap:3.2mm !important}.housing-report-brand h2{font-size:13.2pt !important}.housing-report-brand p{font-size:6.7pt !important}.housing-report-meta{font-size:6.7pt !important;gap:1.2mm !important}
            .housing-kpi-grid{grid-template-columns:repeat(8,minmax(0,1fr)) !important;gap:1.2mm !important}.housing-kpi{min-height:15.5mm !important;padding:1.3mm 1.4mm !important;border-radius:2.2mm !important}.housing-kpi .kpi-icon{width:8.8mm !important;height:8.8mm !important;border-radius:2.2mm !important;font-size:8.8pt !important}.housing-kpi small{font-size:6.3pt !important}.housing-kpi strong{font-size:16.5pt !important;margin-top:.6mm !important}
            .housing-report-body{gap:2.5mm !important;min-height:0 !important;height:100% !important;overflow:hidden !important}.housing-report-column{gap:2.1mm !important;min-height:0 !important}.housing-report-column:last-child .housing-building-card{flex:1 !important;min-height:0 !important}.housing-analysis-card{padding:0 2.8mm 2mm !important;border-radius:2.2mm !important}.analysis-head{margin:0 -2.8mm 1.7mm !important;padding:1.8mm 2.8mm !important;font-size:7.1pt !important}.analysis-head em{font-size:5.5pt !important;padding:.6mm 1.6mm !important}.housing-room-status-card{margin-top:auto !important;padding-bottom:1.2mm !important}.housing-room-status-buildings{gap:1.2mm !important}.housing-room-status-building{padding:1mm 1.2mm !important;border-radius:1.7mm !important}.housing-room-status-building-title{font-size:5.8pt !important;margin-bottom:.8mm !important}.housing-room-status-building-title b{height:4.5mm !important;min-width:5.5mm !important;font-size:7pt !important}.housing-room-status-chips{gap:.6mm !important}.housing-room-status-chip{min-height:4mm !important;padding:.45mm .8mm !important;border-radius:1.2mm !important;font-size:5.1pt !important}.housing-room-status-chip i{font-size:4.7pt !important}.housing-room-status-chip b{font-size:6.3pt !important}.housing-rank-list{gap:1.15mm !important}.housing-rank-row{grid-template-columns:minmax(29mm,1.45fr) 3.2fr 14mm !important;gap:1.6mm !important;min-height:4.8mm !important}.housing-rank-name{font-size:6.3pt !important}.housing-rank-bar{height:2.2mm !important}.housing-rank-value{font-size:5.7pt !important}.housing-rank-value b{font-size:7.7pt !important}.housing-report-footer{padding:1.4mm 2.8mm !important;border-radius:1.7mm !important;font-size:5.6pt !important}.housing-occupancy-grid{gap:1.5mm !important}.housing-occupancy-stat{padding:1.7mm 1mm !important;border-radius:1.8mm !important}.housing-occupancy-stat span{font-size:5.8pt !important}.housing-occupancy-stat b{font-size:11pt !important;margin-top:.5mm !important}.housing-occupancy-stat small{font-size:4.8pt !important}.housing-building-grid{gap:1.7mm !important}.housing-building-box{padding:1.8mm !important;border-radius:1.8mm !important}.housing-building-box h4{font-size:7pt !important;margin-bottom:1mm !important}.housing-building-box h4 b{font-size:11pt !important}.housing-building-stats{gap:1mm !important}.housing-building-stat{padding:1mm !important;border-radius:1.3mm !important}.housing-building-stat span{font-size:5.3pt !important}.housing-building-stat b{font-size:8.4pt !important}.housing-building-progress{height:1.8mm !important;margin-top:1.2mm !important}.housing-building-rate{font-size:5.4pt !important;margin-top:.7mm !important}
        }
    
        /* ===== V23: Responsive mobile/tablet layout ===== */
        html, body { max-width: 100%; }
        body { overflow-x: hidden; }
        img, svg, canvas { max-width: 100%; }
        .erp-module, #app-container { min-width: 0; max-width: 100%; }

        @media (max-width: 900px) {
            body { font-size: 14px; }

            /* Main header: prevent desktop-width overflow on phones */
            header > .container {
                width: 100% !important;
                max-width: 100% !important;
                padding: 8px 10px !important;
                gap: 8px;
                flex-direction: column !important;
                align-items: stretch !important;
            }
            header > .container > div {
                min-width: 0 !important;
                max-width: 100% !important;
            }
            header > .container > div:first-child {
                width: 100%;
                justify-content: center;
            }
            header > .container > div:nth-child(2) {
                width: 100%;
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px !important;
            }
            header > .container > div:nth-child(2) > button {
                width: 100%;
                min-width: 0;
                justify-content: center;
                white-space: normal;
                line-height: 1.25;
                padding: 8px 5px !important;
                font-size: 11px !important;
            }
            header > .container > div:nth-child(2) > div:last-child {
                grid-column: 1 / -1;
                width: 100%;
                border: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                display: grid !important;
                grid-template-columns: 1fr auto auto;
                gap: 6px !important;
                align-items: stretch;
            }
            #current-user-badge {
                min-width: 0;
                white-space: normal;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1.25;
            }

            /* Secondary navigation bars */
            #module-housing > div:first-child .container,
            #module-inventory > div:first-child .container,
            #module-fleet > div:first-child .container {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
                overflow-x: auto;
                flex-wrap: nowrap !important;
                scrollbar-width: thin;
            }
            #module-housing > div:first-child button,
            #module-inventory > div:first-child button,
            #module-fleet > div:first-child button {
                flex: 0 0 auto;
                white-space: nowrap;
            }

            /* Portal */
            #module-portal {
                width: 100% !important;
                max-width: 100% !important;
                padding: 16px 12px !important;
            }
            #module-portal > div:first-child {
                padding: 22px 18px !important;
                border-radius: 18px !important;
            }
            #module-portal > div:first-child h2 {
                font-size: 22px !important;
                line-height: 1.35 !important;
            }
            #module-portal > div:nth-child(2) {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
            }
            #module-portal > div:nth-child(2) > div {
                padding: 20px !important;
                min-height: auto !important;
            }

            /* Housing executive report */
            #module-housing > .container {
                width: 100% !important;
                max-width: 100% !important;
                padding: 12px 10px !important;
            }
            .housing-exec-report { gap: 10px; width: 100%; min-width: 0; }
            .housing-report-header {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 12px !important;
                padding: 16px !important;
            }
            .housing-report-brand {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center;
            }
            .housing-report-logo { min-width: 0 !important; width: min(100%, 260px); }
            .housing-report-meta { align-items: center !important; text-align: center; }
            .housing-kpi-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
            .housing-kpi {
                min-width: 0 !important;
                min-height: 74px;
                padding: 10px !important;
            }
            .housing-kpi strong { font-size: 21px; }
            .housing-report-body {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }
            .housing-analysis-card { min-width: 0; padding-left: 10px; padding-right: 10px; }
            .housing-rank-row {
                grid-template-columns: minmax(85px, 1.25fr) 2fr 48px !important;
                gap: 6px !important;
            }
            .housing-rank-name { font-size: 9px; }
            .housing-building-grid { grid-template-columns: 1fr !important; }
            .housing-occupancy-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

            /* Main section containers */
            #module-inventory > .container,
            #module-fleet > .container,
            #module-settings > .container,
            .erp-module > .container {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Cards, forms and modal sizing */
            .bg-white.rounded-xl, .bg-white.rounded-2xl {
                max-width: 100%;
            }
            .fixed.inset-0 > div {
                max-height: 92vh;
                overflow-y: auto;
            }

            /* Tables remain usable by horizontal scrolling instead of widening the page */
            .overflow-x-auto {
                width: 100%;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
            }
            table { max-width: none; }

            /* MTI layout */
            #mti .grid, #tab-sec-fleet-hand .grid {
                min-width: 0;
            }
            #mti input, #mti select, #mti button,
            #tab-sec-fleet-hand input, #tab-sec-fleet-hand select, #tab-sec-fleet-hand textarea {
                max-width: 100%;
            }
        }

        @media (max-width: 520px) {
            header > .container > div:nth-child(2) {
                grid-template-columns: 1fr 1fr;
            }
            header > .container > div:nth-child(2) > button {
                font-size: 10px !important;
                padding: 7px 4px !important;
            }
            header .text-lg { font-size: 17px !important; }

            .housing-kpi-grid { grid-template-columns: 1fr 1fr !important; }
            .housing-kpi { gap: 7px !important; }
            .housing-kpi .kpi-icon { width: 32px; height: 32px; }
            .housing-kpi small { font-size: 8px; }
            .housing-kpi strong { font-size: 19px; }

            .housing-rank-row {
                grid-template-columns: minmax(76px, 1.2fr) 1.6fr 42px !important;
            }

            #module-portal > div:first-child h2 { font-size: 20px !important; }
            #module-portal > div:first-child p { font-size: 11px !important; }

            /* Avoid oversized fixed paddings generated by desktop Tailwind classes */
            .p-8 { padding: 1.25rem !important; }
            .p-6 { padding: 1rem !important; }
        }

        /* English layout: UI becomes LTR; user-entered Arabic values retain their own text */
        html.lang-en body { direction: ltr; }
        html.lang-en .text-right { text-align: left; }
        html.lang-en .text-left { text-align: right; }
        html.lang-en .border-r-4 { border-right-width: 0 !important; border-left-width: 4px !important; }

    
        /* ===== V28 Official NARIVEX Product Branding ===== */
        .narivex-official-logo{
            display:block;
            object-fit:contain;
        }
        .narivex-login-logo{
            width:min(100%, 340px);
            max-height:150px;
            margin:0 auto 10px;
        }
        .narivex-header-brand{
            background:#fff;
            border-radius:10px;
            padding:3px 7px;
            display:flex;
            align-items:center;
            gap:7px;
            box-shadow:0 2px 8px rgba(0,0,0,.16);
        }
        .narivex-header-logo{
            width:115px;
            height:34px;
        }
        .narivex-header-erp{
            color:#1e293b;
            font-size:13px;
            font-weight:900;
            white-space:nowrap;
        }
        .narivex-superadmin-logo{
            width:120px;
            height:38px;
            background:#fff;
            border-radius:10px;
            padding:3px 6px;
            object-fit:contain;
        }
        @media (max-width:900px){
            .narivex-header-logo{width:96px;height:30px}
            .narivex-header-erp{font-size:11px}
        }
        @media (max-width:520px){
            .narivex-login-logo{width:min(100%,260px);max-height:110px}
            .narivex-header-brand{padding:2px 5px}
            .narivex-header-logo{width:82px;height:26px}
            .narivex-header-erp{font-size:10px}
        }

/* ===== V38.7 Housing operational optimizer ===== */
#housing-room-optimizer button,#housing-room-optimizer select{font-family:inherit}
@media(max-width:520px){#housing-optimizer-list{max-height:440px}}

        .housing-report-column-status .housing-room-status-card{flex:0 0 auto}
        @media print{
            .housing-report-column-status{display:flex !important;flex-direction:column !important;height:100% !important;min-height:0 !important}
            .housing-report-column-status .housing-building-card{flex:1 1 auto !important;min-height:0 !important}
            .housing-report-column-status .housing-room-status-card{flex:0 0 auto !important;margin-top:1.2mm !important;display:block !important;visibility:visible !important;overflow:visible !important}
        }

/* ===== V38.15: Production sticky navigation + resumable inventory import ===== */
:root{--narivex-header-height:54px}
.narivex-module-subnav{
    position:sticky;
    top:var(--narivex-header-height);
    z-index:24;
    box-shadow:0 5px 14px rgba(15,23,42,.16);
}
.narivex-module-subnav>.container{position:relative}
.inventory-import-progress{
    border:1px solid #c7d2fe;
    background:linear-gradient(135deg,#eef2ff,#f8fafc 58%,#ecfeff);
    border-radius:12px;
    padding:10px 12px;
}
.inventory-import-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inventory-import-spinner{
    width:31px;height:31px;border-radius:9px;background:#e0e7ff;color:#4338ca;
    display:inline-flex;align-items:center;justify-content:center;font-size:13px
}
.inventory-import-progress:not(.is-paused) .inventory-import-spinner i{animation:narivex-import-spin 1.15s linear infinite}
.inventory-import-progress.is-paused .inventory-import-spinner{background:#fef3c7;color:#b45309}
.inventory-import-track{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:9px}
.inventory-import-track>span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#06b6d4);border-radius:999px;transition:width .2s ease}
.inventory-import-hint{font-size:10px;color:#64748b;font-weight:700;margin-top:7px}
@keyframes narivex-import-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){
    .narivex-module-subnav .container{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
    .narivex-module-subnav .container>div{flex-wrap:nowrap;white-space:nowrap}
}
@media print{.narivex-module-subnav,.inventory-import-progress{display:none!important}}


/* ===== V38.16 — NARIVEX Worker Smart ID ===== */
.worker-smart-card{
    width:85.6mm;
    height:54mm;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:3.2mm;
    overflow:hidden;
    position:relative;
    font-family:Arial,"Noto Sans Arabic",sans-serif;
    direction:rtl;
    color:#0f172a;
    display:flex;
    flex-direction:column;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
}
.worker-smart-card .wsc-top{
    height:10.8mm;
    padding:1.15mm 2.4mm;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2mm;
    background:linear-gradient(110deg,var(--wsc-from,#052e2b),var(--wsc-mid,#064e3b),var(--wsc-to,#0f172a));
    color:#fff;
}
.worker-smart-card .wsc-brand{
    display:flex;
    align-items:center;
    gap:1.8mm;
    min-width:0;
    height:100%;
}
.worker-smart-card .wsc-logo{
    width:7mm;height:7mm;border-radius:1.6mm;
    background:#fff;display:flex;align-items:center;justify-content:center;
    overflow:hidden;color:#047857;font-size:12pt;font-weight:900;
}
.worker-smart-card .wsc-logo img{width:100%;height:100%;object-fit:contain;padding:.4mm}
.worker-smart-card .wsc-brand-name{
    font-size:7.4pt;
    font-weight:900;
    line-height:1.18;
    max-width:47mm;
    max-height:6.6mm;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    text-align:right;
    margin:0;
    padding:0;
}
.worker-smart-card .wsc-product{font-size:5.4pt;opacity:.9;margin-top:.4mm;letter-spacing:.2px}
.worker-smart-card .wsc-id-label{font-size:5.6pt;text-align:left;opacity:.9}
.worker-smart-card .wsc-id{font-size:6.4pt;font-weight:900;direction:ltr;text-align:left}
.worker-smart-card .wsc-body{
    flex:1;
    padding:2.2mm 2.5mm 1.8mm;
    display:grid;
    grid-template-columns:1fr 21.5mm;
    gap:2.2mm;
    min-height:0;
}
.worker-smart-card .wsc-name{
    font-size:9pt;font-weight:900;color:#0f172a;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border-bottom:.25mm solid #e2e8f0;padding-bottom:1mm;margin-bottom:1.2mm;
}
.worker-smart-card .wsc-name-en{font-size:4.5pt;color:#64748b;font-weight:700;margin-top:.3mm}
.worker-smart-card .wsc-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1mm 1.8mm;font-size:6pt;
}
.worker-smart-card .wsc-field{min-width:0}
.worker-smart-card .wsc-field span{display:block;color:#64748b;font-size:5.2pt;font-weight:700;margin-bottom:.25mm}
.worker-smart-card .wsc-field b{display:block;font-size:6.5pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worker-smart-card .wsc-qr-wrap{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-right:.25mm solid #e2e8f0;padding-right:1.6mm;min-width:0;
}
.worker-smart-card .wsc-qr{
    width:20mm;height:20mm;background:#fff;display:flex;align-items:center;justify-content:center;
}
.worker-smart-card .wsc-qr img,.worker-smart-card .wsc-qr canvas{max-width:100%!important;max-height:100%!important;width:100%!important;height:100%!important}
.worker-smart-card .wsc-qr-caption{font-size:4.8pt;color:#475569;font-weight:800;text-align:center;margin-top:.7mm;line-height:1.15}
.worker-smart-card .wsc-bottom{
    height:5.5mm;background:#f1f5f9;border-top:.25mm solid #e2e8f0;
    padding:1mm 2.4mm;display:flex;align-items:center;justify-content:space-between;gap:2mm;
    font-size:5.1pt;color:#475569;font-weight:700;
}
.worker-smart-card .wsc-status{display:inline-flex;align-items:center;gap:.7mm;color:#047857;font-weight:900}
.worker-smart-card-screen-scale{transform:scale(1);transform-origin:center}
.worker-smart-card-print-root{display:none}

@media(max-width:600px){
    .worker-smart-card-screen-scale{transform:scale(.86)}
}

@media print{
    body.worker-card-print-mode > *:not(#worker-smart-card-print-root){display:none!important}
    body.worker-card-print-mode #worker-smart-card-print-root{
        display:grid!important;
        position:static!important;
        width:100%!important;
        grid-template-columns:85.6mm 85.6mm;
        grid-auto-rows:54mm;
        gap:2mm 6mm;
        align-content:start;
        justify-content:center;
        background:#fff!important;
        margin:0!important;
        padding:0!important;
    }
    body.worker-card-print-mode #worker-smart-card-print-root .worker-smart-card{
        box-shadow:none!important;
        break-inside:avoid!important;
        page-break-inside:avoid!important;
    }
    body.worker-card-print-mode #worker-smart-card-print-root .worker-smart-card:nth-child(10n+1):not(:first-child){
        break-before:page;
        page-break-before:always;
    }
    @page{size:A4 portrait;margin:8mm}
}

.worker-smart-card .wsc-role-chip{
    display:inline-block;
    margin-top:.45mm;
    padding:.25mm 1.2mm;
    border-radius:2mm;
    background:rgba(255,255,255,.16);
    border:.2mm solid rgba(255,255,255,.24);
    font-size:4.8pt;
    font-weight:900;
    line-height:1.1;
}

.worker-smart-card .wsc-brand > .min-w-0{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:7.2mm;
    overflow:hidden;
}


/* ==========================================================
   V38.17.6 — Housing independent page navigation
   Root fix: report display:flex must never override hidden.
   ========================================================== */
#module-housing .housing-tab.hidden{
    display:none !important;
}
#module-housing .housing-tab:not(.hidden){
    min-width:0;
}


/* ===== V38.21.8 — Unified independent pages + sticky titles ===== */
.narivex-module-subnav{
    position:sticky !important;
    top:var(--narivex-header-height) !important;
    z-index:40 !important;
}
.narivex-page-sticky-title{
    position:sticky;
    top:calc(var(--narivex-header-height) + 48px);
    z-index:32;
    box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.va-kpi-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.va-kpi-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.10)}
.va-status-card{cursor:pointer;transition:all .15s ease}
.va-status-card:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,23,42,.08)}
.va-unavailable-option{color:#991b1b}
@media(max-width:700px){
    .narivex-page-sticky-title{top:calc(var(--narivex-header-height) + 45px)}
}
@media print{
    .narivex-page-sticky-title{position:static!important}
}

#vehicle-allocation-center{isolation:isolate}
#va-runtime-banner{position:relative;z-index:45}

/* V38.22.0 — Allocation rebuilt from scratch */
#vehicle-allocation-center .va22-kpi{transition:transform .15s ease,box-shadow .15s ease}
#vehicle-allocation-center .va22-kpi:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.08)}
#vehicle-allocation-center select option:disabled{color:#991b1b;background:#fff1f2}
#vehicle-allocation-center select{min-height:42px}

/* V38.22.1 */
#va22-driver-card b{display:block}

/* ===== V38.23 Fleet Intelligence ===== */
.fi-kpi-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.fi-kpi-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.10);border-color:#7dd3fc}

/* V38.23.1 — Ensure Fleet Intelligence is visible in fleet nav */
#module-fleet .narivex-module-subnav{
  overflow-x:auto !important;
  white-space:nowrap !important;
}
#module-fleet .narivex-module-subnav > *{flex-shrink:0!important}
#btn-tab-fleet-intelligence{display:flex!important;visibility:visible!important}

/* V38.24 Vehicle Handover 2.0 */
#vh2-signature{cursor:crosshair}
#vh2-panel input[type=file]::file-selector-button{border:0;border-radius:.5rem;padding:.35rem .65rem;margin-left:.5rem;background:#f1f5f9;font-weight:700}

/* V38.25 Smart Inventory */
#smart-inventory-center{isolation:isolate}
#si-camera-wrap video{background:#000}

/* V38.25.1 — Fullscreen mobile barcode camera */
body.si-camera-open{
  overflow:hidden!important;
  touch-action:none;
}
.si-camera-fullscreen{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  background:#000!important;
  width:100vw!important;
  height:100dvh!important;
}
.si-camera-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#000!important;
}
.si-camera-topbar{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 16px 14px;
  background:linear-gradient(to bottom,rgba(0,0,0,.80),rgba(0,0,0,.15),transparent);
}
.si-camera-close{
  width:46px;
  height:46px;
  flex:none;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:22px;
  border:1px solid rgba(255,255,255,.28);
}
.si-camera-overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px;
}
.si-scan-frame{
  position:relative;
  width:min(88vw,720px);
  height:min(34vh,280px);
  border:3px solid rgba(34,211,238,.95);
  border-radius:24px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.24),
    0 0 34px rgba(34,211,238,.36);
  overflow:hidden;
}
.si-scan-frame:before,
.si-scan-frame:after{
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  border-color:#fff;
}
.si-scan-frame:before{
  top:8px;
  right:8px;
  border-top:5px solid #fff;
  border-right:5px solid #fff;
  border-radius:0 12px 0 0;
}
.si-scan-frame:after{
  bottom:8px;
  left:8px;
  border-bottom:5px solid #fff;
  border-left:5px solid #fff;
  border-radius:0 0 0 12px;
}
.si-scan-line{
  position:absolute;
  left:5%;
  right:5%;
  top:12%;
  height:3px;
  border-radius:999px;
  background:#22d3ee;
  box-shadow:0 0 16px #22d3ee;
  animation:siScanLine 1.8s ease-in-out infinite alternate;
}
@keyframes siScanLine{
  from{transform:translateY(0)}
  to{transform:translateY(calc(min(34vh,280px) - 70px))}
}
.si-camera-hint{
  margin-top:22px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.56);
  backdrop-filter:blur(6px);
}
.si-camera-controls{
  position:absolute;
  z-index:25;
  bottom:max(24px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.si-camera-control-btn{
  width:48px;
  height:48px;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:18px;
  font-weight:900;
}
.si-camera-zoom-label{
  min-width:72px;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:14px;
}
@media (orientation:landscape){
  .si-scan-frame{
    width:min(70vw,760px);
    height:min(52vh,320px);
  }
}

/* V38.25.2 Smart Item Vision Engine */
#si-vision-review input,#si-vision-review textarea{outline:none}
#si-vision-review input:focus,#si-vision-review textarea:focus{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.10)}

/* V38.25.3 Hyper Smart Inventory Camera */
.si-smart-actions{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px));
  transform:translateX(-50%);
  width:min(92vw,620px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.si-smart-main-btn,.si-smart-secondary-btn{
  min-height:48px;
  border-radius:14px;
  padding:10px 14px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
}
.si-smart-main-btn{
  background:rgba(79,70,229,.90);
  color:#fff;
  box-shadow:0 8px 24px rgba(79,70,229,.32);
}
.si-smart-secondary-btn{
  background:rgba(15,23,42,.74);
  color:#fff;
}
.si-smart-secondary-btn.is-active{
  background:rgba(190,24,93,.90);
}
.si-camera-detected-card{
  position:absolute;
  z-index:35;
  left:50%;
  top:max(90px,calc(env(safe-area-inset-top) + 76px));
  transform:translateX(-50%);
  width:min(92vw,620px);
  padding:14px;
  border-radius:16px;
  background:rgba(2,6,23,.86);
  border:1px solid rgba(34,211,238,.35);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.si-live-ai-result{
  position:absolute;
  z-index:28;
  left:50%;
  bottom:max(170px,calc(env(safe-area-inset-bottom) + 165px));
  transform:translateX(-50%);
  width:min(90vw,560px);
  padding:12px 14px;
  border-radius:14px;
  background:rgba(2,6,23,.76);
  border:1px solid rgba(34,211,238,.28);
  backdrop-filter:blur(8px);
}
@media(max-width:640px){
  .si-smart-actions{grid-template-columns:1fr}
  .si-camera-controls{bottom:max(18px,env(safe-area-inset-bottom))}
  .si-smart-actions{bottom:max(88px,calc(env(safe-area-inset-bottom) + 82px))}
  .si-live-ai-result{bottom:max(190px,calc(env(safe-area-inset-bottom) + 184px))}
}

/* V38.25.4 Camera lifecycle + precision */
#si-refocus{background:#e0f2fe;color:#075985}
.si-scan-frame{width:min(92vw,840px)!important;height:min(30vh,245px)!important}
@media(max-width:640px){.si-scan-frame{width:94vw!important;height:25vh!important;min-height:150px}}

/* ===== V38.26 NARIVEX Unified Smart Search ===== */
.narivex-smart-search-input{
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important;
  background-color:#fff!important;
}
.narivex-smart-search-input:focus{
  border-color:#6366f1!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12)!important;
  outline:none!important;
}
.narivex-smart-search-input::placeholder{
  color:#94a3b8!important;
}

/* =========================================================
   V38.27 — NARIVEX Unified Right Sidebar Navigation
   ========================================================= */
:root{
  --narivex-sidebar-width:280px;
  --narivex-sidebar-collapsed-width:82px;
}

.narivex-top-module-menu{
  display:none!important;
}

.narivex-legacy-subnav{
  display:none!important;
}

.narivex-right-sidebar{
  position:fixed;
  z-index:48;
  top:0;
  right:0;
  bottom:0;
  width:var(--narivex-sidebar-width);
  background:linear-gradient(180deg,#0f172a 0%,#111827 55%,#0b1120 100%);
  color:#fff;
  border-left:1px solid rgba(148,163,184,.14);
  box-shadow:-10px 0 32px rgba(15,23,42,.14);
  display:flex;
  flex-direction:column;
  transition:width .22s ease,transform .22s ease;
}

.narivex-sidebar-head{
  min-height:76px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(148,163,184,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.narivex-sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.narivex-sidebar-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:contain;
  background:#fff;
  padding:3px;
  flex:none;
}

.narivex-sidebar-brand-name{
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
}

.narivex-sidebar-current-title{
  margin-top:3px;
  color:#94a3b8;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.narivex-sidebar-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 10px 18px;
  scrollbar-width:thin;
  scrollbar-color:#475569 transparent;
}

.narivex-sidebar-section-title{
  padding:6px 10px 8px;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
}

.narivex-sidebar-menu{
  display:flex;
  flex-direction:column;
  gap:5px;
}

/* RBAC visibility must override component display rules (grid/flex). */
.rbac-hidden{
  display:none !important;
}

.narivex-side-main,
.narivex-side-sub{
  width:100%;
  min-height:43px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  text-align:right;
  border:1px solid transparent;
  border-radius:11px;
  padding:8px 9px;
  color:#cbd5e1;
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease;
}

.narivex-side-main:hover,
.narivex-side-sub:hover{
  color:#fff;
  background:rgba(99,102,241,.12);
  border-color:rgba(129,140,248,.18);
}

.narivex-side-main.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(79,70,229,.30),rgba(37,99,235,.18));
  border-color:rgba(129,140,248,.28);
  box-shadow:inset -3px 0 0 #818cf8;
}

.narivex-side-main > i:first-child,
.narivex-side-sub > i:first-child{
  width:28px;
  text-align:center;
  font-size:14px;
}

.narivex-side-main span,
.narivex-side-sub span{
  min-width:0;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.narivex-side-chevron{
  color:#64748b;
  font-size:9px;
}

.narivex-sidebar-divider{
  height:1px;
  margin:14px 8px 8px;
  background:rgba(148,163,184,.14);
}

.narivex-side-sub{
  grid-template-columns:28px minmax(0,1fr);
  min-height:40px;
  color:#aeb9c9;
  background:rgba(255,255,255,.018);
}

.narivex-side-sub.active{
  color:#fff;
  background:rgba(16,185,129,.13);
  border-color:rgba(52,211,153,.22);
  box-shadow:inset -3px 0 0 #34d399;
}

.narivex-side-sub.accent-cyan{color:#67e8f9}
.narivex-side-sub.accent-sky{color:#7dd3fc}
.narivex-side-sub.accent-amber{color:#fcd34d}

.narivex-sidebar-footer{
  padding:12px;
  border-top:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.30);
}

.narivex-side-logout{
  width:100%;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  border-radius:10px;
  background:rgba(225,29,72,.12);
  color:#fda4af;
  border:1px solid rgba(244,63,94,.18);
  font-size:11px;
  font-weight:900;
}

.narivex-sidebar-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}

.narivex-sidebar-mobile-close{
  display:none;
  width:36px;
  height:36px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.narivex-sidebar-overlay{
  position:fixed;
  z-index:47;
  inset:0;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(2px);
}

/* Desktop: content occupies the area to the left of the sidebar */
@media (min-width:1024px){
  #app-main-header{
    margin-right:var(--narivex-sidebar-width);
    width:auto;
    transition:margin-right .22s ease;
  }

  #app-container > .erp-module,
  #smart-inventory-center{
    margin-right:var(--narivex-sidebar-width)!important;
    transition:margin-right .22s ease;
  }

  body.narivex-sidebar-collapsed{
    --narivex-sidebar-width:var(--narivex-sidebar-collapsed-width);
  }

  body.narivex-sidebar-collapsed .narivex-sidebar-brand-name,
  body.narivex-sidebar-collapsed .narivex-sidebar-current-title,
  body.narivex-sidebar-collapsed .narivex-sidebar-section-title,
  body.narivex-sidebar-collapsed .narivex-side-main span,
  body.narivex-sidebar-collapsed .narivex-side-main .narivex-side-chevron,
  body.narivex-sidebar-collapsed #narivex-submenu-wrap,
  body.narivex-sidebar-collapsed .narivex-sidebar-footer span,
  body.narivex-sidebar-collapsed #narivex-sidebar-tenant{
    display:none!important;
  }

  body.narivex-sidebar-collapsed .narivex-side-main{
    grid-template-columns:1fr;
    justify-items:center;
  }

  body.narivex-sidebar-collapsed .narivex-sidebar-brand{
    justify-content:center;
    width:100%;
  }

  .narivex-sidebar-toggle{
    display:flex;
  }
}

/* Mobile/tablet: drawer from the right */
@media (max-width:1023px){
  .narivex-right-sidebar{
    width:min(86vw,320px);
    transform:translateX(104%);
    box-shadow:-18px 0 44px rgba(0,0,0,.28);
  }

  .narivex-right-sidebar.is-open{
    transform:translateX(0);
  }

  .narivex-sidebar-mobile-close,
  .narivex-sidebar-toggle{
    display:flex;
  }

  body.narivex-sidebar-mobile-open{
    overflow:hidden!important;
  }

  #app-main-header{
    margin-right:0!important;
  }

  #app-container > .erp-module,
  #smart-inventory-center{
    margin-right:0!important;
  }
}

/* The header now contains identity + utility controls only */
#app-main-header > div{
  min-height:54px;
}

@media print{
  .narivex-right-sidebar,
  .narivex-sidebar-overlay,
  .narivex-sidebar-toggle{
    display:none!important;
  }

  #app-container > .erp-module,
  #smart-inventory-center,
  #app-main-header{
    margin-right:0!important;
  }
}


/* ==========================================================================
   V38.27.3.1 — GLOBAL RESPONSIVE CONTAINMENT HARDENING
   Goal: keep every screen inside the visible viewport; no sidebar-induced
   horizontal push, no overlapping cards/forms, and controlled table scroll.
   ========================================================================== */

:root{
  --narivex-page-gutter: clamp(10px, 1.6vw, 24px);
  --narivex-content-max: 1920px;
}

/* Universal box sizing / intrinsic width safety */
*, *::before, *::after{
  box-sizing:border-box;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden !important;
}

#app-container,
#app-main-header,
.erp-module,
.erp-module > *,
.erp-module .container,
.erp-module section,
.erp-module form,
.erp-module .grid,
.erp-module .flex{
  min-width:0;
}

#app-container{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* Desktop sidebar must consume width, not ADD width to a 100%-wide module. */
@media (min-width:1024px){
  #app-main-header{
    margin-right:var(--narivex-sidebar-width) !important;
    width:calc(100% - var(--narivex-sidebar-width)) !important;
    max-width:calc(100% - var(--narivex-sidebar-width)) !important;
    min-width:0 !important;
  }

  #app-container > .erp-module,
  #smart-inventory-center{
    margin-right:var(--narivex-sidebar-width) !important;
    width:calc(100% - var(--narivex-sidebar-width)) !important;
    max-width:calc(100% - var(--narivex-sidebar-width)) !important;
    min-width:0 !important;
  }
}

/* Tablet/mobile drawer does not reserve permanent horizontal space. */
@media (max-width:1023px){
  #app-main-header,
  #app-container > .erp-module,
  #smart-inventory-center{
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Normalize main content containers, including Tailwind desktop max-width containers. */
.erp-module > .container,
.erp-module .container{
  width:100% !important;
  max-width:var(--narivex-content-max) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.erp-module > .container{
  padding-left:var(--narivex-page-gutter) !important;
  padding-right:var(--narivex-page-gutter) !important;
}

/* Portal is a special module with direct children instead of a single .container. */
#module-portal{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding-left:var(--narivex-page-gutter) !important;
  padding-right:var(--narivex-page-gutter) !important;
}

#module-portal > *{
  max-width:100%;
  min-width:0;
}

/* Grids must be allowed to shrink instead of pushing the page. */
.erp-module [class*="grid-cols-"],
.erp-module .grid{
  min-width:0 !important;
}

.erp-module .grid > *,
.erp-module [class*="grid-cols-"] > *{
  min-width:0 !important;
  max-width:100%;
}

/* Flex rows: prevent long inputs/buttons from forcing siblings off-screen. */
.erp-module .flex > *{
  min-width:0;
}

.erp-module .flex.flex-wrap{
  row-gap:.5rem;
}

/* Forms: all interactive controls stay inside their parent card. */
.erp-module input:not([type="checkbox"]):not([type="radio"]),
.erp-module select,
.erp-module textarea,
.erp-module button{
  max-width:100%;
}

.erp-module input:not([type="checkbox"]):not([type="radio"]),
.erp-module select,
.erp-module textarea{
  min-width:0;
}

.erp-module textarea{
  resize:vertical;
}

/* Long text, emails, IDs, filenames and URLs must wrap instead of widening cards. */
.erp-module p,
.erp-module span,
.erp-module label,
.erp-module td,
.erp-module th,
.erp-module div{
  overflow-wrap:anywhere;
}

.erp-module .whitespace-nowrap{
  overflow-wrap:normal;
}

/* Cards/panels can never exceed the available content width. */
.erp-module .bg-white,
.erp-module [class*="rounded-"],
.erp-module [class*="shadow"]{
  max-width:100%;
}

/* Tables: scroll inside their own wrapper. Never widen the whole application. */
.erp-module .overflow-x-auto{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.erp-module table{
  width:100%;
}

.erp-module table[class*="min-w-"]{
  width:max-content;
  max-width:none;
}

/* Large fixed-min-width tables stay scrollable; wrapper contains overflow. */
.erp-module .overflow-x-auto > table{
  margin:0;
}

/* Modals: fit viewport at every size and scroll internally, never behind sidebar. */
.fixed.inset-0{
  padding:clamp(8px,2vw,24px) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

.fixed.inset-0 > div,
.fixed.inset-0 > form{
  width:min(100%, 900px);
  max-width:calc(100vw - clamp(16px,4vw,48px)) !important;
  max-height:calc(100dvh - clamp(16px,4vw,48px)) !important;
  overflow:auto !important;
  margin:auto !important;
  min-width:0 !important;
}

/* Preserve intentionally compact dialogs. */
.fixed.inset-0 > .max-w-sm{ width:min(100%,24rem) !important; }
.fixed.inset-0 > .max-w-md{ width:min(100%,28rem) !important; }
.fixed.inset-0 > .max-w-lg{ width:min(100%,32rem) !important; }
.fixed.inset-0 > .max-w-xl{ width:min(100%,36rem) !important; }
.fixed.inset-0 > .max-w-2xl{ width:min(100%,42rem) !important; }
.fixed.inset-0 > .max-w-3xl{ width:min(100%,48rem) !important; }
.fixed.inset-0 > .max-w-4xl{ width:min(100%,56rem) !important; }
.fixed.inset-0 > .max-w-5xl{ width:min(100%,64rem) !important; }
.fixed.inset-0 > .max-w-6xl{ width:min(100%,72rem) !important; }

/* Permission editor / settings forms: avoid two-column collision at modest widths. */
@media (max-width:1280px){
  #module-settings .grid-cols-2,
  #module-settings .lg\:grid-cols-2,
  #module-settings .xl\:grid-cols-2{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* Medium displays: reduce gutters and collapse dense 3/4 column layouts safely. */
@media (max-width:1199px){
  :root{ --narivex-page-gutter:12px; }

  .erp-module .xl\:grid-cols-4,
  .erp-module .xl\:grid-cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Tablet layout: one or two columns only, header wraps, navigation remains usable. */
@media (max-width:900px){
  .erp-module .lg\:grid-cols-4,
  .erp-module .lg\:grid-cols-3,
  .erp-module .md\:grid-cols-4,
  .erp-module .md\:grid-cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .erp-module .lg\:grid-cols-2,
  .erp-module .md\:grid-cols-2{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #app-main-header{
    overflow:visible;
  }

  #app-main-header > div{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .narivex-module-subnav,
  .narivex-module-subnav .container{
    max-width:100%;
  }
}

/* Phone: all operational card grids become a single column where overlap is likely. */
@media (max-width:640px){
  :root{ --narivex-page-gutter:8px; }

  .erp-module .grid-cols-2,
  .erp-module .grid-cols-3,
  .erp-module .grid-cols-4,
  .erp-module .md\:grid-cols-2,
  .erp-module .md\:grid-cols-3,
  .erp-module .md\:grid-cols-4,
  .erp-module .lg\:grid-cols-2,
  .erp-module .lg\:grid-cols-3,
  .erp-module .lg\:grid-cols-4,
  .erp-module .xl\:grid-cols-2,
  .erp-module .xl\:grid-cols-3,
  .erp-module .xl\:grid-cols-4{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .erp-module button{
    white-space:normal;
    line-height:1.3;
  }

  .fixed.inset-0{
    align-items:flex-start !important;
    padding:8px !important;
  }

  .fixed.inset-0 > div,
  .fixed.inset-0 > form{
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    border-radius:14px !important;
  }
}

/* Very small phones: sidebar drawer itself stays within viewport. */
@media (max-width:380px){
  .narivex-right-sidebar{
    width:94vw !important;
  }
}

/* Never let hidden/offcanvas UI create document width. */
.narivex-sidebar-overlay,
.narivex-right-sidebar,
.hidden{
  max-width:100vw;
}

/* Print remains isolated from interactive viewport sizing. */
@media print{
  #app-main-header,
  #app-container > .erp-module,
  #smart-inventory-center{
    width:100% !important;
    max-width:100% !important;
    margin-right:0 !important;
  }
}


/* ==========================================================================
   V38.27.3.1.3 — SIDEBAR FUNCTIONAL COLOR SYSTEM
   ========================================================================== */
:root{
  --nvx-main-home:#475569;
  --nvx-main-inventory:#4f46e5;
  --nvx-main-housing:#059669;
  --nvx-main-fleet:#d97706;
  --nvx-main-settings:#0284c7;
  --nvx-main-platform:#9333ea;

  --nvx-sub-inventory:#818cf8;
  --nvx-sub-housing:#34d399;
  --nvx-sub-fleet:#fbbf24;
  --nvx-sub-settings:#38bdf8;
  --nvx-sub-platform:#c084fc;
}

.narivex-side-main{
  --nvx-main:#475569;
  --nvx-main-soft:#64748b;
  border-inline-start:4px solid transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.nvx-module-portal{
  --nvx-main:var(--nvx-main-home);
  --nvx-main-soft:#64748b;
}
.nvx-module-inventory_system{
  --nvx-main:var(--nvx-main-inventory);
  --nvx-main-soft:var(--nvx-sub-inventory);
}
.nvx-module-housing_system{
  --nvx-main:var(--nvx-main-housing);
  --nvx-main-soft:var(--nvx-sub-housing);
}
.nvx-module-fleet_system{
  --nvx-main:var(--nvx-main-fleet);
  --nvx-main-soft:var(--nvx-sub-fleet);
}
.nvx-module-settings{
  --nvx-main:var(--nvx-main-settings);
  --nvx-main-soft:var(--nvx-sub-settings);
}
.nvx-module-superadmin{
  --nvx-main:var(--nvx-main-platform);
  --nvx-main-soft:var(--nvx-sub-platform);
}

.narivex-side-main:hover{
  background:color-mix(in srgb,var(--nvx-main) 16%,transparent)!important;
  border-inline-start-color:var(--nvx-main-soft);
}

.narivex-side-main.active{
  background:linear-gradient(135deg,
      color-mix(in srgb,var(--nvx-main) 90%,#0f172a),
      var(--nvx-main))!important;
  color:#fff!important;
  border-inline-start-color:var(--nvx-main-soft);
  box-shadow:0 6px 18px color-mix(in srgb,var(--nvx-main) 28%,transparent);
}

.narivex-side-main.active i,
.narivex-side-main.active span,
.narivex-side-main.active .narivex-side-chevron{
  color:#fff!important;
}

/* Each open submenu gets its own related tinted surface. */
#narivex-submenu-wrap{
  border-radius:12px;
  padding:6px;
  margin-block:5px 9px;
  border:1px solid transparent;
}

.nvx-submenu-inventory_system{
  background:color-mix(in srgb,var(--nvx-main-inventory) 10%,transparent);
  border-color:color-mix(in srgb,var(--nvx-main-inventory) 24%,transparent);
}
.nvx-submenu-housing_system{
  background:color-mix(in srgb,var(--nvx-main-housing) 10%,transparent);
  border-color:color-mix(in srgb,var(--nvx-main-housing) 24%,transparent);
}
.nvx-submenu-fleet_system{
  background:color-mix(in srgb,var(--nvx-main-fleet) 10%,transparent);
  border-color:color-mix(in srgb,var(--nvx-main-fleet) 24%,transparent);
}
.nvx-submenu-settings{
  background:color-mix(in srgb,var(--nvx-main-settings) 10%,transparent);
  border-color:color-mix(in srgb,var(--nvx-main-settings) 24%,transparent);
}
.nvx-submenu-superadmin{
  background:color-mix(in srgb,var(--nvx-main-platform) 10%,transparent);
  border-color:color-mix(in srgb,var(--nvx-main-platform) 24%,transparent);
}

/* Related but visibly different colors for child items. */
.narivex-side-sub{
  --nvx-sub:#94a3b8;
  border-inline-start:3px solid transparent;
  border-radius:9px;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.nvx-sub-inventory_system{--nvx-sub:var(--nvx-sub-inventory);}
.nvx-sub-housing_system{--nvx-sub:var(--nvx-sub-housing);}
.nvx-sub-fleet_system{--nvx-sub:var(--nvx-sub-fleet);}
.nvx-sub-settings{--nvx-sub:var(--nvx-sub-settings);}
.nvx-sub-superadmin{--nvx-sub:var(--nvx-sub-platform);}

.narivex-side-sub:hover{
  background:color-mix(in srgb,var(--nvx-sub) 16%,transparent)!important;
  border-inline-start-color:var(--nvx-sub);
  color:#fff!important;
}

.narivex-side-sub.active{
  background:color-mix(in srgb,var(--nvx-sub) 28%,#111827)!important;
  border-inline-start-color:var(--nvx-sub);
  color:#fff!important;
  font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nvx-sub) 30%,transparent);
}

/* Submenu title follows the current family. */
.nvx-submenu-inventory_system #narivex-submenu-title{color:var(--nvx-sub-inventory)!important;}
.nvx-submenu-housing_system #narivex-submenu-title{color:var(--nvx-sub-housing)!important;}
.nvx-submenu-fleet_system #narivex-submenu-title{color:var(--nvx-sub-fleet)!important;}
.nvx-submenu-settings #narivex-submenu-title{color:var(--nvx-sub-settings)!important;}
.nvx-submenu-superadmin #narivex-submenu-title{color:var(--nvx-sub-platform)!important;}

/* Accent-specific Smart Inventory remains distinct inside the inventory family. */
.nvx-sub-inventory_system.accent-cyan{
  --nvx-sub:#22d3ee;
}
.nvx-sub-inventory_system.accent-cyan.active{
  background:color-mix(in srgb,#22d3ee 28%,#111827)!important;
}

@supports not (background:color-mix(in srgb,#000 10%,transparent)){
  .nvx-module-inventory_system.active{background:#4f46e5!important;}
  .nvx-module-housing_system.active{background:#059669!important;}
  .nvx-module-fleet_system.active{background:#d97706!important;}
  .nvx-module-settings.active{background:#0284c7!important;}
  .nvx-module-superadmin.active{background:#9333ea!important;}
  .narivex-side-sub.active{background:#334155!important;color:#fff!important;}
}


/* ==========================================================================
   V38.27.3.1.4 — ENTERPRISE SIDEBAR VISUAL IDENTITY
   Persistent color-coded primary navigation + lighter subordinate navigation.
   ========================================================================== */

/* Primary navigation: always colored, visually dominant. */
.narivex-side-main{
  position:relative;
  min-height:50px;
  padding:12px 14px !important;
  margin-block:5px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--nvx-main) 34%,transparent);
  border-inline-start:5px solid var(--nvx-main);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--nvx-main) 18%,#0f172a),
      color-mix(in srgb,var(--nvx-main) 8%,#111827)) !important;
  color:#e5edf8 !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 8px rgba(2,6,23,.18);
}

/* Persistent module-color icon tile */
.narivex-side-main .narivex-side-icon,
.narivex-side-main > i{
  width:30px;
  min-width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--nvx-main) 34%,transparent);
  color:color-mix(in srgb,var(--nvx-main-soft) 85%,#fff) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nvx-main) 30%,transparent);
}

/* Permanent subtle color rail/glow per module */
.narivex-side-main::before{
  content:"";
  position:absolute;
  inset-block:8px;
  inset-inline-start:0;
  width:4px;
  border-radius:99px;
  background:var(--nvx-main);
  box-shadow:0 0 14px color-mix(in srgb,var(--nvx-main) 52%,transparent);
}

/* Main labels remain clearly stronger than submenu labels */
.narivex-side-main .narivex-side-label,
.narivex-side-main > span:not(.narivex-side-icon):not(.narivex-side-chevron){
  font-size:15px !important;
  font-weight:850 !important;
  color:#f8fafc !important;
}

/* Hover: lift, don't radically recolor */
.narivex-side-main:hover{
  transform:translateX(-2px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--nvx-main) 28%,#0f172a),
      color-mix(in srgb,var(--nvx-main) 15%,#111827)) !important;
  border-color:color-mix(in srgb,var(--nvx-main) 56%,transparent);
  box-shadow:
    0 5px 16px rgba(2,6,23,.24),
    0 0 0 1px color-mix(in srgb,var(--nvx-main) 18%,transparent);
}

/* Active primary item = stronger same identity, not a different visual language */
.narivex-side-main.active{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--nvx-main) 92%,#111827),
      color-mix(in srgb,var(--nvx-main-soft) 72%,#111827)) !important;
  border-color:color-mix(in srgb,var(--nvx-main-soft) 72%,#fff);
  color:#fff !important;
  box-shadow:
    0 8px 22px color-mix(in srgb,var(--nvx-main) 28%,rgba(2,6,23,.35)),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.narivex-side-main.active::before{
  width:5px;
  background:#fff;
  box-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 18px color-mix(in srgb,var(--nvx-main) 60%,transparent);
}

.narivex-side-main.active .narivex-side-icon,
.narivex-side-main.active > i{
  background:rgba(255,255,255,.16);
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Chevron remains smaller and softer than the main title */
.narivex-side-main .narivex-side-chevron{
  font-size:10px !important;
  color:color-mix(in srgb,var(--nvx-main-soft) 70%,#94a3b8) !important;
}

/* --------------------------------------------------------------------------
   Sub-navigation: visibly subordinate, lighter/smaller, cleaner hierarchy.
   -------------------------------------------------------------------------- */

#narivex-submenu-wrap{
  position:relative;
  margin:2px 0 10px;
  padding:8px 7px 8px 12px;
  border-radius:12px;
  border-inline-start:2px solid color-mix(in srgb,var(--nvx-sub) 50%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#narivex-submenu-title{
  padding:3px 8px 7px;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.03em;
  opacity:.86;
}

/* Submenu items: smaller, flatter, less saturated */
.narivex-side-sub{
  min-height:40px;
  padding:9px 11px !important;
  margin-block:3px;
  border-radius:9px;
  border:1px solid transparent;
  border-inline-start:2px solid transparent;
  background:rgba(255,255,255,.022) !important;
  color:#b9c5d6 !important;
  font-size:12px !important;
  font-weight:650 !important;
  box-shadow:none !important;
}

.narivex-side-sub .narivex-side-icon,
.narivex-side-sub > i{
  width:24px;
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  color:var(--nvx-sub) !important;
  background:color-mix(in srgb,var(--nvx-sub) 10%,transparent);
}

.narivex-side-sub .narivex-side-label,
.narivex-side-sub > span:not(.narivex-side-icon){
  font-size:12px !important;
  font-weight:650 !important;
  color:#c8d2df !important;
}

/* Sub hover only gets a soft tint */
.narivex-side-sub:hover{
  transform:translateX(-1px);
  background:color-mix(in srgb,var(--nvx-sub) 11%,rgba(255,255,255,.025)) !important;
  border-inline-start-color:color-mix(in srgb,var(--nvx-sub) 65%,transparent);
  color:#f1f5f9 !important;
}

/* Active submenu: still subordinate to active primary */
.narivex-side-sub.active{
  background:color-mix(in srgb,var(--nvx-sub) 18%,#172033) !important;
  border:1px solid color-mix(in srgb,var(--nvx-sub) 30%,transparent);
  border-inline-start:3px solid var(--nvx-sub);
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:750 !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--nvx-sub) 10%,transparent) !important;
}

/* Main items retain color even when another item is active */
.nvx-module-portal{background:linear-gradient(135deg,rgba(71,85,105,.24),rgba(71,85,105,.10))!important;}
.nvx-module-inventory_system{background:linear-gradient(135deg,rgba(79,70,229,.25),rgba(79,70,229,.10))!important;}
.nvx-module-housing_system{background:linear-gradient(135deg,rgba(5,150,105,.25),rgba(5,150,105,.10))!important;}
.nvx-module-fleet_system{background:linear-gradient(135deg,rgba(217,119,6,.25),rgba(217,119,6,.10))!important;}
.nvx-module-settings{background:linear-gradient(135deg,rgba(2,132,199,.25),rgba(2,132,199,.10))!important;}
.nvx-module-superadmin{background:linear-gradient(135deg,rgba(147,51,234,.25),rgba(147,51,234,.10))!important;}

/* Active module-specific colors remain stronger */
.nvx-module-portal.active{background:linear-gradient(135deg,#475569,#64748b)!important;}
.nvx-module-inventory_system.active{background:linear-gradient(135deg,#4338ca,#6366f1)!important;}
.nvx-module-housing_system.active{background:linear-gradient(135deg,#047857,#10b981)!important;}
.nvx-module-fleet_system.active{background:linear-gradient(135deg,#b45309,#f59e0b)!important;}
.nvx-module-settings.active{background:linear-gradient(135deg,#0369a1,#0ea5e9)!important;}
.nvx-module-superadmin.active{background:linear-gradient(135deg,#7e22ce,#a855f7)!important;}

/* Nested submenu surface identity */
.nvx-submenu-inventory_system{
  background:linear-gradient(180deg,rgba(79,70,229,.095),rgba(79,70,229,.035))!important;
}
.nvx-submenu-housing_system{
  background:linear-gradient(180deg,rgba(5,150,105,.095),rgba(5,150,105,.035))!important;
}
.nvx-submenu-fleet_system{
  background:linear-gradient(180deg,rgba(217,119,6,.095),rgba(217,119,6,.035))!important;
}
.nvx-submenu-settings{
  background:linear-gradient(180deg,rgba(2,132,199,.095),rgba(2,132,199,.035))!important;
}
.nvx-submenu-superadmin{
  background:linear-gradient(180deg,rgba(147,51,234,.095),rgba(147,51,234,.035))!important;
}

/* Avoid excessive density on narrower sidebars */
@media (max-width:1200px){
  .narivex-side-main{
    min-height:46px;
    padding:10px 11px !important;
    font-size:14px !important;
  }
  .narivex-side-main .narivex-side-label,
  .narivex-side-main > span:not(.narivex-side-icon):not(.narivex-side-chevron){
    font-size:14px !important;
  }
  .narivex-side-sub{
    min-height:38px;
    padding:8px 9px !important;
    font-size:11.5px !important;
  }
}

/* Collapsed sidebar keeps the color identity using the icon tile/rail. */
body.narivex-sidebar-collapsed .narivex-side-main{
  justify-content:center;
  padding-inline:8px !important;
}
body.narivex-sidebar-collapsed .narivex-side-main::before{
  inset-block:7px;
}


/* ==========================================================================
   V38.27.3.1.5 — SMART SIDEBAR ACCORDION INTERACTION
   ========================================================================== */

/* Chevron communicates open/closed state clearly. */
.narivex-side-main .narivex-side-chevron,
.narivex-side-main .fa-chevron-left,
.narivex-side-main .fa-angle-left{
  transition:transform .22s cubic-bezier(.2,.8,.2,1), color .18s ease;
  transform-origin:center;
}

.narivex-side-main[aria-expanded="true"] .narivex-side-chevron,
.narivex-side-main[aria-expanded="true"] .fa-chevron-left,
.narivex-side-main[aria-expanded="true"] .fa-angle-left{
  transform:rotate(-90deg);
}

/* Open submenu gets a short polished entrance instead of appearing abruptly. */
#narivex-submenu-wrap.nvx-submenu-open{
  animation:nvxSubmenuReveal .20s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes nvxSubmenuReveal{
  from{
    opacity:0;
    transform:translateY(-6px) scale(.992);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Focus-visible is distinct from active/hover and meets keyboard accessibility needs. */
.narivex-side-main:focus-visible,
.narivex-side-sub:focus-visible{
  outline:2px solid #67e8f9 !important;
  outline-offset:2px;
}

/* The expanded parent gets a subtle persistent relation cue even if a child is active. */
.narivex-side-main[aria-expanded="true"]:not(.active){
  border-color:color-mix(in srgb,var(--nvx-main) 48%,transparent);
  box-shadow:0 3px 12px color-mix(in srgb,var(--nvx-main) 14%,transparent);
}

/* Respect reduced-motion user preferences. */
@media (prefers-reduced-motion:reduce){
  #narivex-submenu-wrap.nvx-submenu-open{
    animation:none;
  }
  .narivex-side-main .narivex-side-chevron,
  .narivex-side-main .fa-chevron-left,
  .narivex-side-main .fa-angle-left{
    transition:none;
  }
}