:root {
    --bg-main: #f7f5f7;
    --card-bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #faf7f9;
    --surface-elevated: #ffffff;
    --primary: #2d1a27;
    --text: #2d1a27;
    --secondary: #b91568;
    --secondary-2: #ed1c91;
    --brand: #ed1c91;
    --brand-strong: #b91568;
    --brand-deep: #7a104d;
    --brand-soft: #fbeaf4;
    --success: #0f8b66;
    --warning: #b86608;
    --danger: #ce3345;
    --purple: #7d4770;
    --border: #e7dee4;
    --border-strong: #d8ccd4;
    --text-main: #2d1a27;
    --text-muted: #756773;
    --input-bg: #fbf9fa;
    --shadow: 0 22px 60px -42px rgba(45,26,39,.30);
    --shadow-sm: 0 14px 36px -30px rgba(45,26,39,.26);
    --shadow-soft: 0 16px 40px -32px rgba(45,26,39,.24);
    --shadow-card: 0 18px 42px -34px rgba(45,26,39,.26);
}
[data-theme="dark"] {
    --bg-main: #100e11;
    --card-bg: #1b181c;
    --surface: #1d1a1f;
    --surface-soft: #272229;
    --surface-elevated: #231f25;
    --primary: #f8f3f6;
    --text: #f8f3f6;
    --secondary: #ff69b8;
    --secondary-2: #ff4eae;
    --brand: #ff4eae;
    --brand-strong: #d9338d;
    --brand-deep: #8f1b5a;
    --brand-soft: #3a1c2d;
    --success: #4bd6a8;
    --warning: #f2b45d;
    --danger: #ff7a89;
    --purple: #d88bc0;
    --border: #403842;
    --border-strong: #574b57;
    --text-main: #f8f3f6;
    --text-muted: #bcaeb7;
    --input-bg: #242026;
    --shadow: 0 24px 64px -42px rgba(0,0,0,.72);
    --shadow-sm: 0 16px 38px -30px rgba(0,0,0,.64);
    --shadow-soft: 0 18px 42px -32px rgba(0,0,0,.62);
    --shadow-card: 0 20px 48px -34px rgba(0,0,0,.68);
}

* {
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
        }
        body {
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: var(--text-main);
            line-height: 1.65;
            background:
                radial-gradient(circle at 8% 0%, rgba(194,24,117,.13), transparent 26%),
                radial-gradient(circle at 92% 4%, rgba(240,74,167,.11), transparent 23%),
                var(--bg-main);
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            background-image:
                linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: linear-gradient(to bottom, #000, transparent 65%);
        }
        html[dir="rtl"] body { direction: rtl; text-align: right; }
        html[dir="ltr"] body { direction: ltr; text-align: left; }
        input, select, table, code, .metric-info h2 { unicode-bidi: plaintext; }
        input[type="number"], code { direction: ltr; text-align: left; }

        .erp-container { max-width: 1680px; margin: auto; }
        .erp-header {
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22px;
            padding: 22px 24px;
            color: #fff;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 24px;
            background: linear-gradient(120deg,#2c101f 0%,#6b1747 46%,#a50f62 100%);
            box-shadow: 0 28px 70px -38px rgba(122,16,77,.72);
        }
        .erp-header::after {
            content: '';
            position: absolute;
            width: 340px;
            height: 340px;
            inset-inline-end: -110px;
            top: -190px;
            border-radius: 50%;
            background: rgba(34,211,238,.16);
            pointer-events: none;
        }
        .brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
        .brand-icon {
            width: 50px;
            height: 50px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            font-size: 27px;
            font-weight: 900;
            color: #fff;
            background: linear-gradient(145deg,#ff5fb9,#c21875);
            box-shadow: 0 14px 28px -18px #ff5fb9;
        }
        .erp-header h1 { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.35; letter-spacing: -.25px; }
        .brand-subtitle { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.68); }
        .header-actions { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        .header-actions .btn, .header-actions select {
            color: #fff !important;
            background: rgba(255,255,255,.10) !important;
            border: 1px solid rgba(255,255,255,.16) !important;
            box-shadow: none;
            backdrop-filter: blur(10px);
        }
        .header-actions .btn:hover { background: rgba(255,255,255,.17) !important; }
        .header-actions select option { color: #111827; }
        .erp-badge { border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); font-weight: 800; }

        .nav-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 22px;
            padding: 7px;
            overflow-x: auto;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: var(--shadow-soft);
        }
        .tab-btn {
            padding: 11px 20px;
            color: var(--text-muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: 13px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            white-space: nowrap;
        }
        .tab-btn:hover { transform: translateY(-1px); border-color: var(--border); background: rgba(194,24,117,.05); }
        .tab-btn.active { color: #fff; background: linear-gradient(135deg,#c21875,#ed1c91); box-shadow: 0 12px 26px -18px rgba(194,24,117,.88); }

        .barcode-scanner-bar {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 22px;
            padding: 18px 22px;
            color: var(--text-main);
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: var(--shadow-card);
        }
        .barcode-scanner-bar::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(#f04aa7,#c21875,#9d2c7d); }
        .scanner-input-group { display: flex; align-items: center; gap: 10px; flex-grow: 1; max-width: 700px; }
        .scanner-label { color: var(--secondary); font-size: 13px; font-weight: 900; white-space: nowrap; }
        .scanner-input-group input { width: 100%; background: var(--bg-main); color: var(--primary); }

        #toast-container { position: fixed; top: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        html[dir="rtl"] #toast-container { left: 20px; }
        html[dir="ltr"] #toast-container { right: 20px; }
        .toast {
            min-width: 300px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            color: var(--text-main);
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 18px 46px -26px rgba(15,23,42,.6);
            font-size: 13px;
            font-weight: 700;
            animation: slideIn .3s ease;
        }
        @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        html[dir="rtl"] .toast { border-right: 5px solid var(--secondary); }
        html[dir="ltr"] .toast { border-left: 5px solid var(--secondary); }
        .toast.success { border-color: var(--success); }
        .toast.danger { border-color: var(--danger); }
        .toast.warning { border-color: var(--warning); }

        html[dir="rtl"] .notification-drawer { left: 0; right: auto; transform: translateX(-100%); }
        html[dir="ltr"] .notification-drawer { right: 0; left: auto; transform: translateX(100%); }
        .notification-drawer.open { transform: translateX(0) !important; visibility: visible !important; }

        .notif-item.danger { border-right: 4px solid var(--danger); }
        .notif-item.warning { border-right: 4px solid var(--warning); }

        .analytics-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 20px; }
        .chart-card, .logs-card, .metric-card, .erp-toolbar, .erp-table-container, .kpi-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: var(--shadow-card);
        }
        .chart-card, .logs-card { height: 290px; display: flex; flex-direction: column; padding: 22px; }
        .card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--primary); font-size: 14px; font-weight: 900; letter-spacing: -.1px; }
        .logs-list { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; direction: rtl; text-align: right; font-size: 12px; }
        html[dir="ltr"] .logs-list { direction: ltr; text-align: left; }
        .log-item { padding: 8px 10px; color: var(--text-muted); background: var(--bg-main); border-left: 3px solid var(--secondary); border-radius: 10px; font-size: 11px; }


        .metric-card.success::before { background: var(--success); }
        .metric-card.warning::before { background: var(--warning); }
        .metric-card.danger::before { background: var(--danger); }
        html[dir="rtl"] .metric-info h2 { text-align: right; }
        html[dir="ltr"] .metric-info h2 { text-align: left; }


        .kpi-card h2 { font-family: Arial,'Cairo',sans-serif; font-variant-numeric: tabular-nums; }

        .erp-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 16px 18px; }
        .inventory-toolbar {
            padding: 18px;
            display: grid;
            grid-template-columns: 1.15fr 1.4fr 1fr;
            gap: 14px;
            align-items: stretch;
        }
        .toolbar-panel {
            background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.96));
            border: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
            border-radius: 18px;
            padding: 14px;
            box-shadow: 0 18px 30px -28px rgba(15,23,42,.45);
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
        }
        body[data-theme="dark"] .toolbar-panel {
            background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(17,24,39,.9));
            border-color: rgba(148,163,184,.14);
            box-shadow: 0 18px 30px -28px rgba(0,0,0,.68);
        }
        .toolbar-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: -.15px;
        }
        .toolbar-panel-title small {
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 800;
        }
        .toolbar-actions-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .toolbar-actions-grid .btn,
        .toolbar-import-actions .btn,
        .toolbar-filters-grid .btn {
            width: 100%;
            justify-content: center;
        }
        .toolbar-select-wrap,
        .toolbar-search-wrap {
            position: relative;
        }
        .toolbar-select-wrap::after {
            content: '⌄';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 14px;
            pointer-events: none;
        }
        html[dir="rtl"] .toolbar-select-wrap::after { left: 14px; }
        html[dir="ltr"] .toolbar-select-wrap::after { right: 14px; }
        .toolbar-select-wrap select {
            width: 100%;
            appearance: none;
            padding-inline-end: 34px;
            background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
        }
        body[data-theme="dark"] .toolbar-select-wrap select {
            background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(17,24,39,.92));
        }
        .custom-file-input {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .custom-file-card {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 12px;
            align-items: center;
            padding: 13px 14px;
            border-radius: 16px;
            border: 1px dashed color-mix(in srgb, var(--secondary) 32%, var(--border) 68%);
            background: linear-gradient(180deg, rgba(239,246,255,.95), rgba(248,250,252,.95));
            cursor: pointer;
            transition: .2s ease;
        }
        .custom-file-card:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--secondary) 60%, var(--border) 40%);
            box-shadow: 0 18px 28px -24px rgba(194,24,117,.45);
        }
        body[data-theme="dark"] .custom-file-card {
            background: linear-gradient(180deg, rgba(13,27,47,.95), rgba(15,23,42,.96));
            border-color: rgba(59,130,246,.35);
        }
        .custom-file-icon {
            inline-size: 46px;
            block-size: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, rgba(194,24,117,.16), rgba(237,28,145,.18));
            color: var(--secondary);
            font-size: 20px;
            font-weight: 900;
            box-shadow: inset 0 0 0 1px rgba(194,24,117,.08);
        }
        .custom-file-text {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .custom-file-label {
            font-size: 13px;
            font-weight: 900;
            color: var(--primary);
        }
        .custom-file-name {
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .toolbar-import-actions,
        .toolbar-filters-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .toolbar-search-wrap input {
            width: 100%;
            padding-inline-start: 42px;
            background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
        }
        body[data-theme="dark"] .toolbar-search-wrap input {
            background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(17,24,39,.92));
        }
        .toolbar-search-wrap::before {
            content: '';
            position: absolute;
            inset-block-start: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: currentColor;
            opacity: .58;
            pointer-events: none;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        html[dir="rtl"] .toolbar-search-wrap::before { right: 14px; }
        html[dir="ltr"] .toolbar-search-wrap::before { left: 14px; }
        html[dir="rtl"] .toolbar-search-wrap input { padding-right: 42px; padding-left: 14px; }
        .master-toolbar {
            padding: 18px;
            display: grid;
            grid-template-columns: 1.25fr .95fr 1fr;
            gap: 14px;
            align-items: stretch;
        }
        .master-toolbar .toolbar-panel { min-height: 150px; }
        .master-file-card {
            min-height: 76px;
            border-style: solid;
            background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(238,242,255,.94));
        }
        body[data-theme="dark"] .master-file-card {
            background: linear-gradient(135deg, rgba(15,32,57,.96), rgba(28,25,60,.90));
        }
        .master-file-card .custom-file-icon {
            background: linear-gradient(135deg, rgba(194,24,117,.18), rgba(157,44,125,.17));
            color: #4f46e5;
        }
        .master-action-stack {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .master-search-panel { justify-content: space-between; }
        .master-count-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 13px 14px;
            border: 1px solid var(--border);
            border-radius: 15px;
            background: color-mix(in srgb, var(--bg-main) 88%, var(--secondary) 12%);
        }
        .master-count-card span:first-child {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 900;
        }
        .master-count-value {
            min-width: 50px;
            text-align: center;
            color: var(--secondary);
            font-family: Arial,'Cairo',sans-serif;
            font-size: 25px;
            font-weight: 900;
            direction: ltr;
            unicode-bidi: isolate;
        }
        .master-danger-btn {
            background: rgba(220,38,38,.06) !important;
            color: var(--danger) !important;
            border: 1px solid rgba(220,38,38,.22) !important;
            box-shadow: none !important;
        }
        .master-danger-btn:hover { background: rgba(220,38,38,.11) !important; }
        @media (max-width: 1320px) {
            .master-toolbar { grid-template-columns: 1fr 1fr; }
            .master-search-panel { grid-column: 1 / -1; }
        }
        @media (max-width: 880px) {
            .master-toolbar { grid-template-columns: 1fr; }
            .master-search-panel { grid-column: auto; }
        }

        @media (max-width: 1320px) {
            .inventory-toolbar { grid-template-columns: 1fr 1fr; }
            .toolbar-panel-filters { grid-column: 1 / -1; }
        }
        @media (max-width: 880px) {
            .inventory-toolbar { grid-template-columns: 1fr; }
            .toolbar-panel { padding: 13px; }
            .toolbar-actions-grid,
            .toolbar-import-actions,
            .toolbar-filters-grid { grid-template-columns: 1fr; }
        }
        input[type="file"], input[type="text"], input[type="date"], input[type="number"], select {
            min-height: 44px;
            padding: 10px 14px;
            color: var(--text-main);
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            outline: none;
            font-size: 13px;
            font-weight: 700;
        }
        input[type="text"]::placeholder { color: #94a3b8; font-weight: 700; }
        .scanner-input-group input:focus, input:focus, select:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(194,24,117,.11); }

        .btn {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            color: #fff;
            border: none;
            border-radius: 11px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 10px 24px -20px rgba(15,23,42,.5);
        }
        .btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
        .btn:disabled { opacity: .45; filter: saturate(.5); transform: none; cursor: not-allowed; }
        .btn-blue { background: linear-gradient(135deg,#c21875,#ed1c91); }
        .btn-green { background: linear-gradient(135deg,#059669,#10b981); }
        .btn-purple { background: linear-gradient(135deg,#9d2c7d,#c1459a); }
        .btn-orange { background: linear-gradient(135deg,#d97706,#f59e0b); }
        .btn-red { background: linear-gradient(135deg,#dc2626,#ef4444); }
        .erp-table-container {
            overflow: hidden;
            border-radius: 22px;
        }
        .table-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 17px 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 95%, white 5%), color-mix(in srgb, var(--bg-main) 88%, white 12%));
        }
        .table-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--primary);
            font-size: 14px;
            font-weight: 900;
        }
        .table-section-icon {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(194,24,117,.14), rgba(237,28,145,.12));
            color: var(--secondary);
            font-size: 17px;
        }
        .table-section-subtitle {
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 10.5px;
            font-weight: 700;
        }
        .table-count-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 11px;
            color: var(--secondary);
            background: rgba(194,24,117,.08);
            border: 1px solid rgba(194,24,117,.12);
            border-radius: 999px;
            font: 800 11px/1 Arial,'Cairo',sans-serif;
            direction: ltr;
            white-space: nowrap;
        }
        .table-scroll { overflow: auto; }
        table { width: 100%; min-width: 1040px; border-collapse: separate; border-spacing: 0; }
        html[dir="rtl"] table { text-align: right; }
        html[dir="ltr"] table { text-align: left; }
        th, td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: middle; }
        th {
            position: sticky;
            top: 0;
            z-index: 4;
            color: var(--text-muted);
            background: color-mix(in srgb,var(--bg-main) 94%, var(--secondary) 6%);
            font-size: 10.5px;
            font-weight: 900;
            white-space: nowrap;
            letter-spacing: .05px;
        }
        tbody tr { position: relative; transition: background .16s ease, box-shadow .16s ease; }
        tbody tr:hover { background: rgba(194,24,117,.035); box-shadow: inset 4px 0 0 rgba(194,24,117,.22); }
        html[dir="rtl"] tbody tr:hover { box-shadow: inset -4px 0 0 rgba(194,24,117,.22); }
        .stock-row-expired { background: rgba(220,38,38,.025); }
        .stock-row-critical { background: rgba(245,158,11,.018); }
        .table-check { width: 17px; height: 17px; accent-color: var(--secondary); cursor: pointer; }
        .code-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 190px;
            padding: 6px 9px;
            color: var(--secondary);
            background: rgba(194,24,117,.07);
            border: 1px solid rgba(194,24,117,.10);
            border-radius: 9px;
            font-family: Consolas,'Courier New',monospace;
            font-size: 11.5px;
            font-weight: 800;
            direction: ltr;
            unicode-bidi: isolate;
        }
        .item-cell { min-width: 190px; }
        .item-name-link { color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 900; text-decoration: none; }
        .item-name-link:hover { color: var(--secondary); }
        .multi-record-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-inline-start: 6px;
            padding: 3px 7px;
            color: var(--purple);
            background: rgba(157,44,125,.09);
            border-radius: 999px;
            font-size: 9.5px;
            font-weight: 900;
            direction: ltr;
        }
        .status-badge, .category-badge, .location-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
        .status-badge { padding: 6px 10px; }
        .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 14%, transparent); }
        .category-badge { padding: 5px 9px; color: var(--purple); background: rgba(193,69,154,.10); }
        .location-tag { padding: 5px 9px; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); }
        .s-safe { color: var(--success); background: rgba(16,185,129,.11); }
        .s-warning { color: var(--warning); background: rgba(245,158,11,.11); }
        .s-danger { color: var(--danger); background: rgba(239,68,68,.10); }
        .s-expired { color: #fff; background: linear-gradient(135deg,#dc2626,#ef4444); font-weight: 900; }
        .s-expired::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
        .qty-pill {
            min-width: 68px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 7px 10px;
            color: var(--primary);
            background: linear-gradient(180deg, rgba(194,24,117,.08), rgba(237,28,145,.045));
            border: 1px solid rgba(194,24,117,.12);
            border-radius: 11px;
            font: 900 14px/1 Arial,'Cairo',sans-serif;
            font-variant-numeric: tabular-nums;
            direction: ltr;
        }
        .expiry-cell { min-width: 125px; direction: ltr; }
        .expiry-date-main { color: var(--primary); font: 800 12px/1.25 Arial,'Cairo',sans-serif; direction: ltr; }
        .expiry-days-text { display: block; margin-top: 5px; color: var(--text-muted); font: 700 10px/1.2 Arial,'Cairo',sans-serif; direction: ltr; }
        .row-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
        .table-action-btn {
            width: 34px;
            height: 34px;
            display: inline-grid;
            place-items: center;
            border-radius: 10px;
            border: 1px solid transparent;
            background: transparent;
            font-size: 15px;
            cursor: pointer;
            transition: transform .16s ease, background .16s ease, border-color .16s ease;
        }
        .table-action-btn:hover { transform: translateY(-1px); }
        .table-action-in { color: var(--success); background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.14); }
        .table-action-in:hover { background: rgba(16,185,129,.15); }
        .table-action-out { color: var(--warning); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.14); }
        .table-action-out:hover { background: rgba(245,158,11,.15); }

        /* ===== Master table ===== */
        .master-table-card { margin-top: 2px; }
        .master-table { min-width: 900px; }
        .master-table th:first-child,
        .master-table td:first-child { width: 58px; text-align: center; }
        .master-index-chip {
            width: 30px;
            height: 30px;
            display: inline-grid;
            place-items: center;
            border-radius: 9px;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--bg-main) 91%, var(--secondary) 9%);
            border: 1px solid var(--border);
            font: 900 11px/1 Arial,'Cairo',sans-serif;
            direction: ltr;
            unicode-bidi: isolate;
        }
        .master-code-chip {
            max-width: 220px;
            color: #c21875;
            background: linear-gradient(180deg, rgba(194,24,117,.08), rgba(237,28,145,.045));
            border-color: rgba(194,24,117,.13);
        }
        body[data-theme="dark"] .master-code-chip { color: #ff9ed1; }
        .master-item-cell { min-width: 240px; }
        .master-name-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .master-name-mark {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: var(--purple);
            background: rgba(157,44,125,.09);
            border: 1px solid rgba(157,44,125,.10);
            font-size: 14px;
        }
        .master-item-name {
            display: block;
            color: var(--primary);
            font-size: 12.8px;
            font-weight: 900;
            line-height: 1.55;
        }
        .master-item-caption {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 9.5px;
            font-weight: 700;
        }
        .master-category-badge {
            padding: 6px 10px;
            color: var(--purple);
            background: rgba(157,44,125,.09);
            border: 1px solid rgba(157,44,125,.08);
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 800;
            white-space: nowrap;
        }
        .master-location-tag {
            padding: 6px 10px;
            color: var(--text-main);
            background: color-mix(in srgb, var(--bg-main) 94%, var(--secondary) 6%);
            border: 1px solid var(--border);
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 800;
            white-space: nowrap;
        }
        .master-row-actions { justify-content: flex-start; }
        .table-action-edit {
            color: var(--warning);
            background: rgba(245,158,11,.08);
            border-color: rgba(245,158,11,.14);
        }
        .table-action-edit:hover { background: rgba(245,158,11,.15); }
        .table-action-delete {
            color: var(--danger);
            background: rgba(239,68,68,.07);
            border-color: rgba(239,68,68,.13);
        }
        .table-action-delete:hover { background: rgba(239,68,68,.14); }
        .master-table tbody tr:hover .master-name-mark {
            background: rgba(157,44,125,.14);
            border-color: rgba(157,44,125,.16);
        }
        .table-empty-state { padding: 46px 20px !important; text-align: center; color: var(--text-muted); }
        @media (max-width: 760px) {
            .table-section-header { align-items: flex-start; padding: 14px; position: sticky; left: 0; }
            .table-section-subtitle { display: none; }
            th, td { padding: 11px 10px; }
        }

        .progress-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background: rgba(0,0,0,.7); }
        .progress-bar-container { width: 80%; max-width: 500px; height: 18px; margin-top: 15px; overflow: hidden; background: rgba(255,255,255,.2); border-radius: 10px; }
        .progress-bar-fill { width: 0; height: 100%; background: var(--success); transition: width .1s; }

        .modal-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); }
        .modal-card { width: 90%; max-width: 750px; max-height: 90vh; padding: 25px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 80px -45px rgba(15,23,42,.75); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
        .close-btn { color: var(--text-muted); background: none; border: none; font-size: 22px; cursor: pointer; }

        #totalCount, #safeCount, #warningCount, #criticalCount, #kpiTotalQty, #kpiCriticalQty, #kpiTotalRecords, #masterCountBadge, #notifBadge {
            direction: ltr;
            unicode-bidi: isolate;
            font-family: Arial,'Cairo',sans-serif;
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 1024px) { .analytics-grid { grid-template-columns: 1fr; } }
        @media (max-width: 900px) {
            body { padding: 12px; }
            .erp-header { padding: 18px; align-items: flex-start; flex-wrap: wrap; }
            .brand-subtitle { display: none; }
            .header-actions { width: 100%; margin-top: 12px; }
            .barcode-scanner-bar { padding: 15px; }
            .scanner-input-group { min-width: 100%; }
        }

        /* ===== Dashboard / KPI / Notifications ===== */
        .dashboard-shell { display: grid; gap: 18px; }
        .dashboard-hero {
            position: relative;
            overflow: hidden;
            min-height: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 24px 26px;
            border: 1px solid rgba(59,130,246,.16);
            border-radius: 24px;
            background:
                radial-gradient(circle at 10% 10%, rgba(34,211,238,.18), transparent 32%),
                radial-gradient(circle at 90% 0%, rgba(99,102,241,.18), transparent 32%),
                linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,255,255,.97));
            box-shadow: var(--shadow-card);
        }
        body[data-theme="dark"] .dashboard-hero {
            background:
                radial-gradient(circle at 10% 10%, rgba(34,211,238,.10), transparent 32%),
                radial-gradient(circle at 90% 0%, rgba(99,102,241,.12), transparent 32%),
                linear-gradient(135deg, rgba(15,23,42,.97), rgba(13,27,47,.98));
            border-color: rgba(96,165,250,.15);
        }
        .dashboard-hero-copy h2 { margin: 0; color: var(--primary); font-size: 22px; font-weight: 900; }
        .dashboard-hero-copy p { margin: 7px 0 0; color: var(--text-muted); font-size: 12px; font-weight: 700; }
        .dashboard-health-ring {
            inline-size: 106px;
            block-size: 106px;
            flex: 0 0 106px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: conic-gradient(var(--success) var(--health-angle, 0deg), rgba(148,163,184,.18) 0deg);
            box-shadow: 0 18px 42px -26px rgba(5,150,105,.7);
        }
        .dashboard-health-ring::before {
            content: '';
            inline-size: 78px;
            block-size: 78px;
            border-radius: 50%;
            background: var(--card-bg);
            box-shadow: inset 0 0 0 1px var(--border);
            grid-area: 1/1;
        }
        .dashboard-health-value { position: relative; z-index: 1; grid-area: 1/1; text-align: center; direction: ltr; }
        .dashboard-health-value strong { display:block; font: 900 23px/1 Arial,'Cairo',sans-serif; color: var(--success); }
        .dashboard-health-value span { display:block; margin-top:4px; color:var(--text-muted); font-size:9px; font-weight:900; }

        .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 0; }
        .kpi-card {
            position: relative;
            overflow: hidden;
            min-height: 142px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            border-radius: 22px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -38px rgba(15,23,42,.58); }
        .kpi-card::after {
            content:'';
            position:absolute;
            inset-inline-end:-36px;
            inset-block-start:-42px;
            inline-size:110px;
            block-size:110px;
            border-radius:50%;
            background:var(--kpi-soft, rgba(194,24,117,.08));
        }
        .kpi-card.blue { --kpi-color:#c21875; --kpi-soft:rgba(194,24,117,.10); }
        .kpi-card.red { --kpi-color:#dc2626; --kpi-soft:rgba(220,38,38,.09); }
        .kpi-card.purple { --kpi-color:#9d2c7d; --kpi-soft:rgba(157,44,125,.09); }
        .kpi-icon {
            position:relative; z-index:1;
            inline-size:54px; block-size:54px; flex:0 0 54px;
            display:grid; place-items:center;
            border-radius:17px;
            color:var(--kpi-color);
            background:var(--kpi-soft);
            border:1px solid color-mix(in srgb, var(--kpi-color) 18%, transparent);
            font-size:24px;
        }
        .kpi-content { position:relative; z-index:1; min-width:0; }
        .kpi-label { display:block; color:var(--text-muted); font-size:11px; font-weight:900; }
        .kpi-value { margin:7px 0 4px; color:var(--kpi-color); font:900 31px/1 Arial,'Cairo',sans-serif; font-variant-numeric:tabular-nums; direction:ltr; }
        html[dir="rtl"] .kpi-value { text-align:right; }
        .kpi-note { color:var(--text-muted); font-size:10px; font-weight:700; }

        .dashboard-status-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
        .dashboard-status-card {
            padding:14px 16px;
            border:1px solid var(--border);
            border-radius:18px;
            background:var(--card-bg);
            box-shadow:var(--shadow-soft);
        }
        .dashboard-status-name { font-size:11px; font-weight:900; color:var(--primary); }
        .dashboard-status-number { font:900 16px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .dashboard-status-bar { height:7px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.14); }
        .dashboard-status-fill { height:100%; width:0%; border-radius:999px; transition:width .35s ease; }
        .dashboard-status-card.safe .dashboard-status-number { color:var(--success); }
        .dashboard-status-card.safe .dashboard-status-fill { background:linear-gradient(90deg,#059669,#34d399); }
        .dashboard-status-card.warning .dashboard-status-number { color:var(--warning); }
        .dashboard-status-card.warning .dashboard-status-fill { background:linear-gradient(90deg,#d97706,#fbbf24); }
        .dashboard-status-card.danger .dashboard-status-number { color:var(--danger); }
        .dashboard-status-card.danger .dashboard-status-fill { background:linear-gradient(90deg,#dc2626,#fb7185); }

        .dashboard-chart-card { height: 390px; padding: 22px 24px; border-radius: 22px; }
        .dashboard-chart-card .card-title { margin-bottom: 16px; }
        .dashboard-chart-title-wrap { display:flex; align-items:center; gap:10px; }
        .dashboard-chart-icon { inline-size:34px; block-size:34px; border-radius:11px; display:grid; place-items:center; background:rgba(194,24,117,.09); color:var(--secondary); }

        /* ===== Language / Direction Overrides ===== */
        .dashboard-pro { gap: 16px; }
        .dashboard-topbar {
            display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
            padding:4px 4px 2px;
        }
        .dashboard-eyebrow, .dashboard-attention-kicker {
            display:block; color:var(--secondary); font:900 9px/1.2 Arial,'Cairo',sans-serif;
            letter-spacing:1.4px; direction:ltr; text-align:inherit;
        }
        .dashboard-title-block h2 { margin:6px 0 3px; color:var(--primary); font-size:25px; font-weight:900; letter-spacing:-.5px; }
        .dashboard-title-block p { margin:0; color:var(--text-muted); font-size:11px; font-weight:700; }
        .dashboard-meta { display:flex; align-items:center; gap:10px; }
        .dashboard-live-pill, .dashboard-updated {
            min-height:42px; display:flex; align-items:center; gap:8px; padding:9px 13px;
            border:1px solid var(--border); border-radius:14px; background:var(--card-bg); box-shadow:var(--shadow-soft);
            color:var(--text-muted); font-size:10px; font-weight:800;
        }
        .live-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px rgba(5,150,105,.10); }
        .dashboard-updated { flex-direction:column; align-items:flex-start; gap:1px; direction:ltr; }
        .dashboard-updated strong { color:var(--primary); font:900 12px/1.2 Arial,'Cairo',sans-serif; }

        .dashboard-hero-pro { min-height:190px; padding:28px 30px; }
        .dashboard-mini-label { display:inline-flex; padding:5px 9px; border-radius:999px; color:var(--secondary); background:rgba(194,24,117,.08); font-size:9px; font-weight:900; }
        .dashboard-hero-pro .dashboard-hero-copy h2 { margin-top:10px; font-size:26px; }
        .dashboard-hero-pro .dashboard-hero-copy p { max-width:620px; }
        .dashboard-hero-stats { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
        .dashboard-hero-stats > div {
            min-width:82px; display:flex; align-items:baseline; gap:6px; padding:8px 10px;
            border:1px solid rgba(148,163,184,.18); border-radius:12px; background:rgba(255,255,255,.48);
        }
        body[data-theme="dark"] .dashboard-hero-stats > div { background:rgba(15,23,42,.28); }
        .dashboard-hero-stats strong { color:var(--primary); font:900 14px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .dashboard-hero-stats span { color:var(--text-muted); font-size:9px; font-weight:800; }
        .dashboard-hero-pro .dashboard-health-ring { width:126px; height:126px; flex-basis:126px; }
        .dashboard-hero-pro .dashboard-health-ring::before { width:92px; height:92px; }
        .dashboard-hero-pro .dashboard-health-value strong { font-size:27px; }

        .dashboard-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
        .kpi-card.cyan { --kpi-color:#d2388d; --kpi-soft:rgba(8,145,178,.10); }
        .dashboard-kpi-grid .kpi-card { min-height:132px; padding:18px; }
        .dashboard-kpi-grid .kpi-icon { width:50px; height:50px; flex-basis:50px; font-size:22px; }
        .dashboard-kpi-grid .kpi-value { font-size:29px; }

        .dashboard-status-grid-pro .dashboard-status-card { padding:16px; }
        .dashboard-status-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-bottom:6px; }
        .status-orb { width:10px; height:10px; border-radius:50%; }
        .dashboard-status-card.safe .status-orb { background:var(--success); box-shadow:0 0 0 5px rgba(5,150,105,.08); }
        .dashboard-status-card.warning .status-orb { background:var(--warning); box-shadow:0 0 0 5px rgba(217,119,6,.08); }
        .dashboard-status-card.danger .status-orb { background:var(--danger); box-shadow:0 0 0 5px rgba(220,38,38,.08); }
        .dashboard-status-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--text-muted); font-size:9px; font-weight:800; }
        .dashboard-status-meta span:first-child { color:var(--primary); font-family:Arial,'Cairo',sans-serif; direction:ltr; }

        .dashboard-lower-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:16px; align-items:stretch; }
        .dashboard-main-chart { height:400px; margin:0; }
        .dashboard-card-badge { padding:5px 9px; border-radius:999px; color:var(--success); background:rgba(5,150,105,.09); font:900 9px/1 Arial,sans-serif; letter-spacing:.5px; }
        .dashboard-attention-card {
            min-height:400px; padding:20px; border:1px solid var(--border); border-radius:22px; background:var(--card-bg);
            box-shadow:var(--shadow-card); overflow:hidden;
        }
        .dashboard-attention-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
        .dashboard-attention-head h3 { margin:5px 0 0; color:var(--primary); font-size:15px; font-weight:900; }
        .dashboard-attention-count { min-width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--danger); background:rgba(220,38,38,.08); font:900 12px/1 Arial,sans-serif; }
        .dashboard-attention-list { display:flex; flex-direction:column; gap:9px; max-height:315px; overflow:auto; padding-inline-end:2px; }
        .attention-item {
            display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
            padding:11px 12px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb,var(--card-bg) 94%, var(--bg-main) 6%);
        }
        .attention-dot { width:9px; height:9px; border-radius:50%; }
        .attention-item.expired .attention-dot, .attention-item.critical .attention-dot { background:var(--danger); }
        .attention-item.warning .attention-dot { background:var(--warning); }
        .attention-main { min-width:0; }
        .attention-name { display:block; color:var(--primary); font-size:10.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .attention-meta { display:flex; gap:8px; margin-top:3px; color:var(--text-muted); font-size:8.8px; font-weight:700; flex-wrap:wrap; }
        .attention-days { padding:5px 7px; border-radius:9px; font:900 9px/1 Arial,'Cairo',sans-serif; direction:ltr; white-space:nowrap; }
        .attention-item.expired .attention-days, .attention-item.critical .attention-days { color:var(--danger); background:rgba(220,38,38,.08); }
        .attention-item.warning .attention-days { color:var(--warning); background:rgba(217,119,6,.08); }
        .attention-empty { min-height:260px; display:grid; place-items:center; text-align:center; color:var(--text-muted); font-size:11px; font-weight:800; }
        .attention-empty strong { display:block; margin-bottom:6px; color:var(--success); font-size:22px; }

        @media(max-width:1180px) {
            .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .dashboard-lower-grid { grid-template-columns:1fr; }
            .dashboard-attention-card { min-height:auto; }
        }
        @media(max-width:760px) {
            .dashboard-topbar, .dashboard-hero-pro { align-items:flex-start; flex-direction:column; }
            .dashboard-meta { width:100%; justify-content:space-between; }
            .dashboard-health-ring { align-self:center; }
            .dashboard-kpi-grid, .dashboard-status-grid-pro { grid-template-columns:1fr; }
            .dashboard-hero-stats { width:100%; }
            .dashboard-hero-stats > div { flex:1; justify-content:center; }
        }

        .erp-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
        .metric-card {
            position:relative;
            overflow:hidden;
            display:flex;
            align-items:center;
            min-height:128px;
            padding: 19px;
            gap: 14px;
            border-radius: 20px;
            background: linear-gradient(180deg, var(--card-bg), color-mix(in srgb, var(--card-bg) 94%, var(--bg-main) 6%));
        }
        .metric-card::before { display:none; }
        .metric-card::after { content:''; position:absolute; inset-inline-end:-24px; inset-block-end:-35px; inline-size:105px; block-size:105px; border-radius:50%; background:rgba(194,24,117,.055); }
        .metric-card.success::after { background:rgba(5,150,105,.07); }
        .metric-card.warning::after { background:rgba(217,119,6,.07); }
        .metric-card.danger::after { background:rgba(220,38,38,.07); }
        .metric-icon { position:relative; z-index:1; inline-size:46px; block-size:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:14px; background:rgba(194,24,117,.09); color:var(--secondary); font-size:21px; }
        .metric-card.success .metric-icon { background:rgba(5,150,105,.10); color:var(--success); }
        .metric-card.warning .metric-icon { background:rgba(217,119,6,.10); color:var(--warning); }
        .metric-card.danger .metric-icon { background:rgba(220,38,38,.10); color:var(--danger); }
        .metric-info { position:relative; z-index:1; min-width:0; }
        .metric-info span { display:block; color:var(--text-muted); font-size:10.5px; font-weight:800; line-height:1.5; }
        .metric-info h2 { margin:8px 0 0; color:var(--primary); font:800 29px/1 Arial,'Cairo',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.6px; direction:ltr; }
        .metric-sub { margin-top:5px; color:var(--text-muted); font-size:9.5px; font-weight:700; }

        .notification-backdrop {
            position:fixed; inset:0; z-index:99990;
            background:rgba(2,6,23,.38);
            backdrop-filter:blur(3px);
            opacity:0; visibility:hidden; pointer-events:none;
            transition:opacity .25s ease, visibility .25s ease;
        }
        .notification-backdrop.open { opacity:1; visibility:visible; pointer-events:auto; }
        .notification-drawer {
            position:fixed;
            z-index:99999;
            display:flex;
            flex-direction:column;
            visibility:hidden;
            background:var(--card-bg);
            transition:transform .3s ease, visibility .3s ease;
            width:min(440px, calc(100vw - 18px));
            margin:9px;
            top:0; bottom:0;
            border:1px solid var(--border) !important;
            border-radius:24px !important;
            box-shadow:0 28px 80px -35px rgba(2,6,23,.78);
            overflow:hidden;
        }
        .drawer-header {
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:20px 20px 16px;
            background:
                radial-gradient(circle at 88% 0%, rgba(194,24,117,.13), transparent 42%),
                var(--card-bg);
            border-bottom:0;
        }
        .drawer-title-wrap { display:flex; align-items:center; gap:11px; }
        .drawer-title-icon { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,rgba(194,24,117,.13),rgba(237,28,145,.12)); color:var(--secondary); font-size:20px; }
        .drawer-title-text strong { display:block; color:var(--primary); font-size:15px; font-weight:900; }
        .drawer-title-text small { display:block; margin-top:2px; color:var(--text-muted); font-size:10px; font-weight:700; }
        .drawer-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 20px 16px; background:var(--card-bg); }
        .drawer-summary-card { padding:10px; text-align:center; border:1px solid var(--border); border-radius:13px; background:var(--bg-main); }
        .drawer-summary-card strong { display:block; font:900 16px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .drawer-summary-card span { display:block; margin-top:5px; color:var(--text-muted); font-size:9px; font-weight:800; }
        .drawer-summary-card.total strong { color:var(--secondary); }
        .drawer-summary-card.critical strong { color:var(--danger); }
        .drawer-summary-card.warning strong { color:var(--warning); }
        .drawer-body { flex-grow:1; display:flex; flex-direction:column; overflow-y:auto; gap:10px; padding:12px 14px 18px; background:color-mix(in srgb,var(--bg-main) 94%, var(--card-bg) 6%); }
        .notif-item {
            display:grid;
            grid-template-columns:auto 1fr;
            gap:11px;
            padding:13px;
            border-radius:17px;
            background:var(--card-bg);
            box-shadow:0 12px 26px -24px rgba(15,23,42,.5);
            border:1px solid var(--border);
            font-size:12px;
        }
        .notif-item.danger, .notif-item.warning { border-right:1px solid var(--border); }
        .notif-icon { inline-size:40px; block-size:40px; display:grid; place-items:center; border-radius:13px; font-size:18px; }
        .notif-item.danger .notif-icon { background:rgba(220,38,38,.09); color:var(--danger); }
        .notif-item.warning .notif-icon { background:rgba(217,119,6,.10); color:var(--warning); }
        .notif-main { min-width:0; }
        .notif-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
        .notif-title strong { color:var(--primary); font-size:12px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .notif-state { padding:3px 7px; border-radius:999px; font-size:8.5px; font-weight:900; white-space:nowrap; }
        .notif-item.danger .notif-state { color:var(--danger); background:rgba(220,38,38,.08); }
        .notif-item.warning .notif-state { color:var(--warning); background:rgba(217,119,6,.09); }
        .notif-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
        .notif-meta span { padding:4px 7px; border-radius:999px; background:var(--bg-main); color:var(--text-muted); border:1px solid var(--border); font-size:9px; font-weight:800; }
        .notif-empty { text-align:center; padding:42px 20px; }
        .notif-empty-icon { inline-size:62px; block-size:62px; margin:0 auto 12px; display:grid; place-items:center; border-radius:20px; background:rgba(5,150,105,.09); color:var(--success); font-size:28px; }
        .notif-empty strong { display:block; color:var(--primary); font-size:14px; }
        .notif-empty span { display:block; margin-top:5px; color:var(--text-muted); font-size:11px; }

        @media (max-width: 900px) {
            .kpi-grid, .dashboard-status-grid, .erp-metrics { grid-template-columns:1fr 1fr; }
            .dashboard-hero { padding:20px; }
        }
        @media (max-width: 620px) {
            .kpi-grid, .dashboard-status-grid, .erp-metrics { grid-template-columns:1fr; }
            .dashboard-hero { align-items:flex-start; }
            .dashboard-health-ring { inline-size:90px; block-size:90px; flex-basis:90px; }
            .dashboard-health-ring::before { inline-size:66px; block-size:66px; }
            .drawer-summary { padding-inline:12px; }
        }


        /* ===== Full Audit Log ===== */
        .mini-log-link {
            border: 0;
            background: rgba(194,24,117,.08);
            color: var(--secondary);
            padding: 6px 9px;
            border-radius: 10px;
            font: 800 10px/1 'Cairo',sans-serif;
            cursor: pointer;
        }
        .mini-log-link:hover { background: rgba(194,24,117,.14); transform: translateY(-1px); }

        .audit-page { display: flex; flex-direction: column; gap: 18px; }
        .audit-hero {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 24px 26px;
            border: 1px solid var(--border);
            border-radius: 24px;
            background:
                radial-gradient(circle at 8% 16%, rgba(237,28,145,.16), transparent 34%),
                radial-gradient(circle at 92% 90%, rgba(194,24,117,.13), transparent 34%),
                var(--card-bg);
            box-shadow: var(--shadow-card);
        }
        .audit-hero::before {
            content: '';
            position: absolute;
            inset-block: 0;
            inset-inline-start: 0;
            width: 6px;
            background: linear-gradient(180deg,#f04aa7,#c21875,#9d2c7d);
        }
        .audit-hero-copy { position: relative; z-index: 1; min-width: 0; }
        .audit-eyebrow { color: var(--secondary); font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
        .audit-hero h2 { margin: 5px 0 4px; color: var(--primary); font-size: 24px; line-height: 1.25; }
        .audit-hero p { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 700; }
        .audit-hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

        .audit-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
        .audit-kpi-card {
            min-height: 112px;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 19px;
            background: var(--card-bg);
            box-shadow: var(--shadow-soft);
        }
        .audit-kpi-icon {
            inline-size: 46px;
            block-size: 46px;
            flex: 0 0 46px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: rgba(194,24,117,.09);
            font-size: 21px;
        }
        .audit-kpi-card.receipt .audit-kpi-icon { background: rgba(5,150,105,.10); }
        .audit-kpi-card.dispatch .audit-kpi-icon { background: rgba(217,119,6,.11); }
        .audit-kpi-card.admin .audit-kpi-icon { background: rgba(157,44,125,.10); }
        .audit-kpi-copy span { display: block; color: var(--text-muted); font-size: 10.5px; font-weight: 800; }
        .audit-kpi-copy strong {
            display: block;
            margin-top: 7px;
            color: var(--primary);
            font: 800 27px/1 Arial,'Cairo',sans-serif;
            font-variant-numeric: tabular-nums;
            direction: ltr;
        }
        html[dir="rtl"] .audit-kpi-copy strong { text-align: right; }
        html[dir="ltr"] .audit-kpi-copy strong { text-align: left; }

        .audit-toolbar {
            display: grid;
            grid-template-columns: minmax(240px,1.35fr) minmax(180px,.7fr) minmax(310px,1.1fr) auto;
            gap: 12px;
            align-items: end;
            padding: 17px;
            border: 1px solid var(--border);
            border-radius: 20px;
            background: var(--card-bg);
            box-shadow: var(--shadow-card);
        }
        .audit-filter-block { min-width: 0; }
        .audit-filter-label { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 10.5px; font-weight: 900; }
        .audit-toolbar input,
        .audit-toolbar select {
            width: 100%;
            min-height: 43px;
            background: var(--bg-main);
        }
        .audit-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .audit-date-input { direction: ltr; text-align: center; font-family: Arial,'Cairo',sans-serif; font-variant-numeric: tabular-nums; }
        .audit-quick-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
        .audit-range-btn {
            border: 1px solid var(--border);
            background: var(--bg-main);
            color: var(--text-muted);
            min-height: 34px;
            padding: 7px 10px;
            border-radius: 10px;
            font: 800 10px/1 'Cairo',sans-serif;
            cursor: pointer;
        }
        .audit-range-btn:hover { border-color: rgba(194,24,117,.3); color: var(--secondary); }

        .audit-table-card { overflow: hidden; }
        .audit-table { min-width: 900px; }
        .audit-table th:nth-child(1) { width: 145px; }
        .audit-table th:nth-child(2) { width: 125px; }
        .audit-table th:nth-child(3) { width: 145px; }
        .audit-date-cell,
        .audit-time-cell { direction: ltr; white-space: nowrap; font-family: Arial,'Cairo',sans-serif; font-variant-numeric: tabular-nums; }
        .audit-date-cell { color: var(--primary); font-weight: 800; }
        .audit-time-cell { color: var(--text-muted); font-size: 11px; font-weight: 700; }
        .audit-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            padding: 6px 9px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 10.5px;
            font-weight: 900;
        }
        .audit-type-badge.receipt { color: #047857; background: rgba(5,150,105,.10); border-color: rgba(5,150,105,.16); }
        .audit-type-badge.dispatch { color: #b45309; background: rgba(217,119,6,.11); border-color: rgba(217,119,6,.17); }
        .audit-type-badge.import { color: #a50f62; background: rgba(194,24,117,.09); border-color: rgba(194,24,117,.15); }
        .audit-type-badge.master { color: #9d2c7d; background: rgba(157,44,125,.09); border-color: rgba(157,44,125,.15); }
        .audit-type-badge.delete { color: #b91c1c; background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.15); }
        .audit-type-badge.backup { color: #0e7490; background: rgba(8,145,178,.10); border-color: rgba(8,145,178,.16); }
        .audit-type-badge.other { color: var(--text-muted); background: var(--bg-main); border-color: var(--border); }
        body[data-theme="dark"] .audit-type-badge { color: var(--text-main); }
        .audit-details-cell { color: var(--text-main); font-size: 11.5px; font-weight: 700; line-height: 1.75; overflow-wrap: anywhere; }
        .audit-empty-state { text-align: center; padding: 40px 20px !important; color: var(--text-muted); font-weight: 800; }

        @media (max-width: 1120px) {
            .audit-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
            .audit-toolbar { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 680px) {
            .audit-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
            .audit-hero-actions { width: 100%; }
            .audit-hero-actions .btn { flex: 1; }
            .audit-kpi-grid { grid-template-columns: 1fr 1fr; }
            .audit-kpi-card { padding: 14px; min-height: 96px; }
            .audit-kpi-icon { inline-size: 38px; block-size: 38px; flex-basis: 38px; font-size: 17px; }
            .audit-kpi-copy strong { font-size: 23px; }
            .audit-toolbar { grid-template-columns: 1fr; }
            .audit-date-grid { grid-template-columns: 1fr 1fr; }
        }

        @media print {
            body * { visibility: hidden; }
            #barcodePrintSection, #barcodePrintSection * { visibility: visible; }
            #barcodePrintSection { position: absolute; left: 0; top: 0; width: 100%; text-align: center; }
        }


        /* ===== Item Card & Action Modals ===== */
        .item-card-modal { max-width: 980px; padding: 0; overflow: hidden; }
        .item-card-modal .modal-header { margin:0; padding:18px 22px; background:linear-gradient(135deg,rgba(194,24,117,.08),rgba(237,28,145,.04)); }
        .item-card-modal #modalBodyContent { padding:20px 22px 22px; overflow-y:auto; }
        .item-card-hero {
            display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px;
            padding:20px; border:1px solid var(--border); border-radius:20px;
            background:linear-gradient(135deg,color-mix(in srgb,var(--card-bg) 90%, #fff1f8 10%),var(--card-bg));
            box-shadow:var(--shadow-soft);
        }
        .item-card-identity { display:flex; align-items:center; gap:14px; min-width:0; }
        .item-card-avatar { inline-size:54px; block-size:54px; flex:0 0 54px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(135deg,#c21875,#f04aa7); color:#fff; font-size:24px; box-shadow:0 18px 32px -22px rgba(194,24,117,.75); }
        .item-card-eyebrow { color:var(--secondary); font:900 9px/1.2 Arial,'Cairo',sans-serif; letter-spacing:1.2px; direction:ltr; }
        .item-card-name { margin:5px 0 7px; color:var(--primary); font-size:20px; line-height:1.45; font-weight:900; }
        .item-card-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
        .item-card-total { min-width:150px; padding:15px 18px; text-align:center; border-radius:18px; border:1px solid rgba(194,24,117,.14); background:rgba(194,24,117,.06); }
        .item-card-total span { display:block; color:var(--text-muted); font-size:9.5px; font-weight:800; }
        .item-card-total strong { display:block; margin-top:7px; color:var(--secondary); font:900 28px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .item-card-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
        .item-mini-kpi { padding:12px 13px; border:1px solid var(--border); border-radius:15px; background:var(--card-bg); }
        .item-mini-kpi span { display:block; color:var(--text-muted); font-size:9.5px; font-weight:800; }
        .item-mini-kpi strong { display:block; margin-top:5px; color:var(--primary); font:900 16px/1.2 Arial,'Cairo',sans-serif; direction:ltr; }
        .item-mini-kpi.success strong { color:var(--success); }
        .item-card-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; }
        .item-card-section-head h4 { margin:0; color:var(--primary); font-size:13px; font-weight:900; }
        .item-card-section-head small { display:block; margin-top:2px; color:var(--text-muted); font-size:9px; font-weight:700; }
        .item-records-shell { overflow:auto; max-height:300px; border:1px solid var(--border); border-radius:17px; background:var(--card-bg); }
        .item-records-table { min-width:720px; }
        .item-records-table th { font-size:10px; }
        .item-records-table td { font-size:11px; }
        .item-record-date strong { display:block; color:var(--primary); font:900 11px/1.2 Arial,'Cairo',sans-serif; direction:ltr; }
        .item-record-date small { display:block; margin-top:3px; color:var(--text-muted); font-size:8.5px; direction:rtl; }
        html[dir="ltr"] .item-record-date small { direction:ltr; }
        .item-record-qty { display:inline-flex; min-width:54px; justify-content:center; padding:6px 9px; border-radius:10px; color:var(--secondary); background:rgba(194,24,117,.07); font:900 11px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .item-record-actions { display:flex; gap:6px; align-items:center; }
        .item-record-action { inline-size:32px; block-size:32px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); cursor:pointer; font-size:14px; font-weight:900; }
        .item-record-action.in { color:var(--success); background:rgba(5,150,105,.06); border-color:rgba(5,150,105,.18); }
        .item-record-action.out { color:var(--warning); background:rgba(217,119,6,.06); border-color:rgba(217,119,6,.18); }
        .item-record-action:disabled { opacity:.35; cursor:not-allowed; }
        .item-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:12px 14px; border:1px dashed var(--border); border-radius:15px; background:var(--bg-main); }
        .barcode-mini { display:flex; align-items:center; gap:12px; min-width:0; }
        .barcode-mini-copy strong { display:block; color:var(--primary); font-size:10.5px; font-weight:900; }
        .barcode-mini-copy small { display:block; margin-top:2px; color:var(--text-muted); font-size:8.5px; }

        .operation-modal-overlay { z-index:11050; }
        .operation-modal { max-width:650px; padding:0; overflow:hidden; }
        .operation-modal .modal-header { margin:0; padding:18px 20px; background:linear-gradient(135deg,rgba(194,24,117,.08),rgba(240,74,167,.04)); }
        .operation-modal-body { padding:18px 20px 20px; }
        .operation-summary { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:13px 14px; margin-bottom:14px; border:1px solid var(--border); border-radius:16px; background:var(--bg-main); }
        .operation-summary-icon { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:13px; background:rgba(194,24,117,.09); color:var(--secondary); font-size:19px; }
        .operation-summary strong { display:block; color:var(--primary); font-size:12px; font-weight:900; }
        .operation-summary small { display:block; margin-top:3px; color:var(--text-muted); font-size:9.5px; font-weight:700; line-height:1.6; }
        .operation-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
        .operation-field.full { grid-column:1/-1; }
        .operation-field label { display:block; margin-bottom:5px; color:var(--text-muted); font-size:9.5px; font-weight:900; }
        .operation-field input { width:100%; min-height:46px; }
        .operation-field input[readonly] { background:var(--bg-main); color:var(--text-muted); cursor:default; }
        .operation-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:13px; }
        .operation-preview-card { padding:11px 12px; border:1px solid var(--border); border-radius:14px; background:var(--card-bg); }
        .operation-preview-card span { display:block; color:var(--text-muted); font-size:8.8px; font-weight:800; }
        .operation-preview-card strong { display:block; margin-top:5px; color:var(--primary); font:900 17px/1 Arial,'Cairo',sans-serif; direction:ltr; }
        .operation-preview-card.after strong { color:var(--secondary); }
        .operation-preview-card.invalid strong { color:var(--danger); }
        .operation-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
        .btn-neutral { color:var(--text-main); background:var(--bg-main); border:1px solid var(--border); }

        .master-form-modal-overlay { z-index:11500; }
        .master-form-modal { max-width:650px; padding:0; overflow:hidden; }
        .master-form-modal .modal-header { margin:0; padding:18px 20px; background:linear-gradient(135deg,rgba(157,44,125,.08),rgba(194,24,117,.04)); }
        .master-form-body { padding:18px 20px 20px; }
        .master-form-summary { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:13px 14px; margin-bottom:14px; border:1px solid var(--border); border-radius:16px; background:var(--bg-main); }
        .master-form-icon { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:13px; background:rgba(157,44,125,.09); color:var(--purple); font-size:19px; }
        .master-form-summary strong { display:block; color:var(--primary); font-size:12px; font-weight:900; }
        .master-form-summary small { display:block; margin-top:3px; color:var(--text-muted); font-size:9.5px; font-weight:700; line-height:1.6; }
        .master-form-code-note { display:block; margin-top:5px; color:var(--text-muted); font-size:8.5px; font-weight:700; line-height:1.55; }

        .confirm-modal-overlay { z-index:12000; }
        .confirm-modal-card { max-width:480px; padding:0; overflow:hidden; }
        .confirm-modal-head { display:flex; align-items:center; gap:12px; padding:19px 20px 12px; }
        .confirm-modal-icon { inline-size:44px; block-size:44px; display:grid; place-items:center; flex:0 0 44px; border-radius:14px; background:rgba(194,24,117,.09); color:var(--secondary); font-size:21px; }
        .confirm-modal-card.danger .confirm-modal-icon { background:rgba(220,38,38,.09); color:var(--danger); }
        .confirm-modal-head h3 { margin:0; color:var(--primary); font-size:15px; font-weight:900; }
        .confirm-modal-message { padding:0 20px; color:var(--text-main); font-size:11px; font-weight:800; line-height:1.8; }
        .confirm-modal-details { margin:12px 20px 0; padding:12px 13px; max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:13px; background:var(--bg-main); color:var(--text-muted); font:700 9.5px/1.8 'Cairo',sans-serif; white-space:pre-line; }
        .confirm-modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:16px 20px 20px; }
        .confirm-modal-card.danger #confirmDialogAccept { background:linear-gradient(135deg,#dc2626,#ef4444); }

        @media(max-width:760px) {
            .item-card-modal #modalBodyContent { padding:14px; }
            .item-card-hero { grid-template-columns:1fr; }
            .item-card-total { width:100%; }
            .item-card-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .item-card-section-head { align-items:flex-start; flex-direction:column; }
            .item-card-footer { align-items:stretch; flex-direction:column; }
            .operation-form-grid { grid-template-columns:1fr; }
            .operation-field.full { grid-column:auto; }
        }



        .scanner-label[data-ui-icon] { display:inline-flex; align-items:center; gap:7px; --ui-icon-size:17px; }
        /* ===== Unified SVG Icon System ===== */
        .ui-icon {
            width: 1.12em;
            height: 1.12em;
            flex: 0 0 auto;
            display: inline-block;
            vertical-align: -0.16em;
            color: currentColor;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            overflow: visible;
        }
        .ui-icon .ui-soft { fill: currentColor; stroke: none; opacity: .12; }
        [data-ui-icon] { --ui-icon-size: 1.08em; }
        [data-ui-icon] > .ui-icon[data-generated-ui-icon] { width: var(--ui-icon-size); height: var(--ui-icon-size); }
        .btn[data-ui-icon], .tab-btn[data-ui-icon], .toolbar-panel-title > span[data-ui-icon],
        .card-title [data-ui-icon], .audit-hero-actions .btn[data-ui-icon] {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn[data-ui-icon] { --ui-icon-size: 18px; }
        .tab-btn[data-ui-icon] { --ui-icon-size: 20px; }
        .tab-btn[data-ui-icon] > .ui-icon { color: color-mix(in srgb, currentColor 80%, #ed1c91 20%); }
        .tab-btn.active[data-ui-icon] > .ui-icon { color: currentColor; }
        .brand-icon[data-ui-icon] {
            width: 52px; height: 52px; border-radius: 16px;
            display:grid; place-items:center;
            background: linear-gradient(145deg, rgba(237,28,145,.98), rgba(194,24,117,.98));
            border:1px solid rgba(255,255,255,.28);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(2,132,199,.25);
            --ui-icon-size: 33px;
        }
        .brand-icon[data-ui-icon] > .ui-icon { color:#fff; stroke-width:1.65; }
        .drawer-title-icon[data-ui-icon], .operation-summary-icon[data-ui-icon], .master-form-icon[data-ui-icon],
        .confirm-modal-icon[data-ui-icon], .kpi-icon[data-ui-icon], .metric-icon[data-ui-icon], .audit-kpi-icon[data-ui-icon],
        .table-section-icon[data-ui-icon], .dashboard-chart-icon[data-ui-icon], .custom-file-icon[data-ui-icon], .master-name-mark[data-ui-icon] {
            display:grid; place-items:center;
        }
        .drawer-title-icon[data-ui-icon] { --ui-icon-size: 24px; }
        .operation-summary-icon[data-ui-icon], .master-form-icon[data-ui-icon], .confirm-modal-icon[data-ui-icon] { --ui-icon-size: 27px; }
        .kpi-icon[data-ui-icon], .metric-icon[data-ui-icon] { --ui-icon-size: 24px; }
        .audit-kpi-icon[data-ui-icon] { --ui-icon-size: 22px; }
        .table-section-icon[data-ui-icon], .dashboard-chart-icon[data-ui-icon] { --ui-icon-size: 19px; }
        .custom-file-icon[data-ui-icon] { --ui-icon-size: 28px; }
        .master-name-mark[data-ui-icon] { --ui-icon-size: 17px; }
        .header-select-with-icon {
            display:inline-flex; align-items:center; gap:7px; padding-inline-start:10px;
            border:1px solid rgba(255,255,255,.3); border-radius:10px; background:rgba(255,255,255,.12);
        }
        .header-select-with-icon > .ui-icon { width:18px; height:18px; color:#fff; }
        .header-select-with-icon select { border:0 !important; background:transparent !important; padding-inline-start:0 !important; }
        .icon-inline { display:inline-flex; align-items:center; gap:5px; }
        .icon-inline > .ui-icon { width:14px; height:14px; }
        .row-actions .ui-icon, .item-record-actions .ui-icon { width:17px; height:17px; pointer-events:none; }
        .table-action-btn, .item-record-action { display:inline-grid; place-items:center; }
        .location-tag .ui-icon, .master-location-tag .ui-icon { width:13px; height:13px; margin-inline-end:4px; vertical-align:-2px; }
        .item-card-avatar[data-ui-icon] { display:grid; place-items:center; --ui-icon-size:28px; }
        .barcode-mini .ui-icon { width:18px; height:18px; }
        .ui-icon-sprite { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

    


        /* ===== PWA / Login Support ===== */
        .reports-page { display:flex; flex-direction:column; gap:18px; }
        .reports-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 24px; border-radius:22px; border:1px solid var(--border); background:linear-gradient(135deg,var(--card-bg),var(--surface-soft)); box-shadow:var(--shadow); }
        .reports-hero::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; inset-inline-end:-95px; top:-125px; background:radial-gradient(circle,rgba(194,24,117,.13),transparent 68%); pointer-events:none; }
        .reports-hero-copy,.reports-hero-actions { position:relative; z-index:1; }
        .reports-eyebrow { display:block; color:var(--secondary); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; }
        .reports-hero h2 { margin:0; color:var(--primary); font-size:22px; font-weight:900; }
        .reports-hero p { margin:6px 0 0; color:var(--text-muted); font-size:11px; line-height:1.7; }
        .reports-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .reports-mode-card { padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--card-bg); box-shadow:var(--shadow-soft); }
        .reports-mode-row { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,2.2fr); gap:14px; align-items:end; }
        .reports-filter-label { display:block; margin-bottom:6px; color:var(--text-muted); font-size:9px; font-weight:900; }
        .reports-mode-select,.reports-filter-block input,.reports-filter-block select { width:100%; min-height:42px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); padding:9px 11px; font:inherit; font-size:10px; outline:none; }
        .reports-mode-select:focus,.reports-filter-block input:focus,.reports-filter-block select:focus { border-color:var(--secondary); box-shadow:0 0 0 3px rgba(194,24,117,.09); }
        .reports-mode-help { padding:11px 13px; border-radius:14px; border:1px solid rgba(194,24,117,.13); background:rgba(194,24,117,.055); color:var(--text-muted); font-size:10px; line-height:1.7; }
        .reports-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--card-bg); box-shadow:var(--shadow-soft); }
        .reports-filter-block.wide { grid-column:span 2; }
        .reports-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
        .reports-quick-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
        .reports-range-btn { border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:10px; padding:8px 10px; font:inherit; font-size:9px; font-weight:900; cursor:pointer; }
        .reports-range-btn:hover { border-color:rgba(194,24,117,.35); color:var(--secondary); }
        .reports-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
        .reports-kpi { position:relative; overflow:hidden; min-height:102px; padding:15px; border-radius:18px; border:1px solid var(--border); background:var(--card-bg); box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:12px; }
        .reports-kpi::after { content:""; position:absolute; width:76px; height:76px; border-radius:50%; inset-inline-end:-28px; bottom:-35px; background:rgba(194,24,117,.045); }
        .reports-kpi-icon { width:42px; height:42px; flex:0 0 42px; border-radius:13px; display:grid; place-items:center; background:rgba(194,24,117,.09); color:var(--secondary); --ui-icon-size:21px; }
        .reports-kpi.receipt .reports-kpi-icon { background:rgba(5,150,105,.09); color:#059669; }
        .reports-kpi.dispatch .reports-kpi-icon { background:rgba(220,38,38,.08); color:#dc2626; }
        .reports-kpi.warning .reports-kpi-icon { background:rgba(217,119,6,.10); color:#d97706; }
        .reports-kpi-copy { min-width:0; position:relative; z-index:1; }
        .reports-kpi-copy span { display:block; color:var(--text-muted); font-size:9px; font-weight:800; line-height:1.5; }
        .reports-kpi-copy strong { display:block; margin-top:4px; color:var(--primary); font-size:23px; font-weight:900; font-variant-numeric:tabular-nums; }
        .reports-kpi-copy small { display:block; margin-top:2px; color:var(--text-muted); font-size:8px; line-height:1.45; }
        .reports-analytics { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.65fr); gap:12px; }
        .reports-chart-card,.reports-insight-card { border:1px solid var(--border); border-radius:18px; background:var(--card-bg); box-shadow:var(--shadow-soft); padding:16px; min-width:0; }
        .reports-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
        .reports-card-head strong { color:var(--primary); font-size:11px; font-weight:900; }
        .reports-card-head small { color:var(--text-muted); font-size:8px; }
        .reports-chart-wrap { position:relative; height:245px; }
        .reports-insight-list { display:grid; gap:8px; max-height:245px; overflow:auto; }
        .reports-insight-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
        .reports-insight-item span { min-width:0; color:var(--text); font-size:9px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .reports-insight-item strong { color:var(--primary); font-size:10px; font-weight:900; }
        .reports-table-card { border-radius:18px; }
        .reports-table { width:100%; border-collapse:separate; border-spacing:0; min-width:920px; }
        .reports-table th { position:sticky; top:0; z-index:2; padding:11px 10px; background:var(--surface-soft); color:var(--text-muted); border-bottom:1px solid var(--border); font-size:9px; font-weight:900; text-align:start; white-space:nowrap; }
        .reports-table td { padding:10px; border-bottom:1px solid var(--border); color:var(--text); font-size:9px; vertical-align:middle; }
        .reports-table tr:last-child td { border-bottom:0; }
        .reports-table tr:hover td { background:rgba(194,24,117,.025); }
        .report-type-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border); font-size:8px; font-weight:900; white-space:nowrap; }
        .report-type-chip.receipt { color:#047857; background:rgba(5,150,105,.07); border-color:rgba(5,150,105,.15); }
        .report-type-chip.dispatch { color:#b91c1c; background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.14); }
        .report-status-chip { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:8px; font-weight:900; }
        .report-status-chip.safe { color:#047857; background:rgba(5,150,105,.08); }
        .report-status-chip.warning { color:#b45309; background:rgba(217,119,6,.09); }
        .report-status-chip.critical,.report-status-chip.expired { color:#b91c1c; background:rgba(220,38,38,.08); }
        .reports-empty { padding:32px!important; text-align:center!important; color:var(--text-muted)!important; font-size:11px!important; }
        .reports-footer-row { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--text-muted); font-size:9px; padding:0 4px; }
        @media (max-width:1050px) { .reports-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); } .reports-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .reports-analytics { grid-template-columns:1fr; } }
        @media (max-width:680px) { .reports-hero { align-items:flex-start; flex-direction:column; } .reports-mode-row,.reports-toolbar,.reports-kpi-grid { grid-template-columns:1fr; } .reports-filter-block.wide { grid-column:auto; } .reports-date-grid { grid-template-columns:1fr; } }

        /* ===== Settings, Notifications & Performance ===== */
        .warehouse-name-display {
            display:inline-flex; align-items:center; gap:6px; margin-top:5px; padding:3px 9px;
            border-radius:999px; font-size:10px; font-weight:800; color:rgba(255,255,255,.92);
            background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14);
        }
        .notification-toolbar { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
        .notification-filter-chip { border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; padding:7px 11px; font:inherit; font-size:10px; font-weight:800; cursor:pointer; transition:.18s ease; }
        .notification-filter-chip:hover { border-color:rgba(194,24,117,.35); color:var(--primary); }
        .notification-filter-chip.active { background:linear-gradient(135deg,#c21875,#f04aa7); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(194,24,117,.18); }
        .notification-review-all { margin-inline-start:auto; }
        .notif-item.reviewed { opacity:.58; }
        .notif-item.reviewed .notif-state::after { content:' ✓'; }
        .notif-actions { display:flex; align-items:center; gap:6px; margin-top:8px; }
        .notif-action-btn { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px; padding:5px 9px; font:inherit; font-size:9px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
        .notif-action-btn:hover { color:var(--primary); border-color:rgba(194,24,117,.35); }
        .notif-action-btn.reviewed { color:var(--success); }
        .drawer-summary-card.reviewed strong { color:#64748b; }
        .notif-count-note { font-size:9px; color:var(--text-muted); padding:0 14px 10px; }

        .settings-page { display:grid; gap:18px; }
        .settings-hero { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#0f2f55,#a50f62 62%,#f04aa7); box-shadow:0 20px 44px rgba(122,16,77,.16); }
        .settings-hero-copy h2 { margin:4px 0 6px; font-size:24px; }
        .settings-hero-copy p { margin:0; opacity:.82; font-size:12px; }
        .settings-eyebrow { font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
        .settings-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
        .settings-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:19px; box-shadow:var(--shadow-sm); }
        .settings-card.full { grid-column:1/-1; }
        .settings-card-head { display:flex; gap:11px; align-items:center; margin-bottom:16px; }
        .settings-card-icon { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#c21875; background:rgba(194,24,117,.08); }
        .settings-card-icon .ui-icon { width:21px; height:21px; }
        .settings-card-head strong { display:block; font-size:14px; }
        .settings-card-head small { display:block; color:var(--text-muted); font-size:10px; margin-top:2px; }
        .settings-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
        .settings-field { display:grid; gap:6px; }
        .settings-field.full { grid-column:1/-1; }
        .settings-field label { font-size:10px; font-weight:900; color:var(--text-muted); }
        .settings-field input,.settings-field select { width:100%; border:1px solid var(--border); background:var(--surface-soft); color:var(--text); border-radius:12px; padding:10px 11px; font:inherit; outline:none; }
        .settings-field input:focus,.settings-field select:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.10); }
        .settings-switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--border); }
        .settings-switch-row:last-child { border-bottom:0; }
        .settings-switch-copy strong { display:block; font-size:11px; }
        .settings-switch-copy small { display:block; color:var(--text-muted); font-size:9px; margin-top:2px; }
        .settings-switch { position:relative; width:46px; height:26px; flex:0 0 auto; }
        .settings-switch input { opacity:0; width:0; height:0; }
        .settings-switch span { position:absolute; inset:0; border-radius:999px; background:#cbd5e1; cursor:pointer; transition:.2s; }
        .settings-switch span::after { content:''; position:absolute; width:20px; height:20px; top:3px; left:3px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.16); }
        .settings-switch input:checked + span { background:linear-gradient(135deg,#c21875,#f04aa7); }
        .settings-switch input:checked + span::after { transform:translateX(20px); }
        [dir="rtl"] .settings-switch input:checked + span::after { transform:translateX(20px); }
        .settings-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
        .settings-status { padding:13px; border-radius:15px; background:var(--surface-soft); border:1px solid var(--border); }
        .settings-status span { display:block; color:var(--text-muted); font-size:9px; font-weight:800; }
        .settings-status strong { display:block; margin-top:5px; font-size:15px; direction:ltr; }
        .self-test-results { margin-top:14px; display:grid; gap:7px; }
        .self-test-row { display:flex; align-items:flex-start; gap:8px; padding:9px 10px; border-radius:11px; background:var(--surface-soft); font-size:10px; }
        .self-test-row.pass { border-inline-start:3px solid #10b981; }
        .self-test-row.warn { border-inline-start:3px solid #f59e0b; }
        .self-test-row.fail { border-inline-start:3px solid #ef4444; }
        .stable-status-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:rgba(16,185,129,.13); color:#047857; font-size:10px; font-weight:900; }
        [data-theme="dark"] .stable-status-pill { color:#6ee7b7; }
        .performance-note { margin-top:10px; padding:10px 11px; border-radius:12px; background:rgba(194,24,117,.06); color:var(--text-muted); font-size:9px; line-height:1.7; }

        @media (max-width: 900px) {
            .settings-grid { grid-template-columns:1fr; }
            .settings-card.full { grid-column:auto; }
            .settings-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .settings-hero { align-items:flex-start; flex-direction:column; }
            .drawer-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
        @media (max-width: 560px) {
            .settings-fields,.settings-status-grid { grid-template-columns:1fr; }
            .notification-review-all { margin-inline-start:0; }
        }


        /* ===== PWA UI ===== */
        .pwa-install-btn { display:none; }
        .pwa-install-btn.ready { display:inline-flex; }
        .pwa-status-pill {
            display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
            font-size:10px; font-weight:800; border:1px solid var(--border); background:var(--surface);
            color:var(--text-muted);
        }
        .pwa-status-pill.online { color:#047857; border-color:rgba(5,150,105,.24); background:rgba(5,150,105,.08); }
        .pwa-status-pill.offline { color:#b45309; border-color:rgba(217,119,6,.28); background:rgba(217,119,6,.08); }
        .pwa-status-pill.installed { color:#a50f62; border-color:rgba(194,24,117,.24); background:rgba(194,24,117,.08); }
        .pwa-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
        .pwa-details-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
        .pwa-detail { padding:11px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface-soft); }
        .pwa-detail span { display:block; color:var(--text-muted); font-size:9px; font-weight:800; margin-bottom:4px; }
        .pwa-detail strong { display:block; color:var(--primary); font-size:11px; overflow-wrap:anywhere; }
        .pwa-help { margin-top:10px; color:var(--text-muted); font-size:10px; line-height:1.8; }
        @media (max-width:760px) { .pwa-details-grid { grid-template-columns:1fr; } }


        /* ===== Login & Authentication UI ===== */
        
.auth-gate {
            position:fixed; inset:0; z-index:12000; display:grid; place-items:center; overflow:auto;
            padding:16px; color:#0f172a; background:linear-gradient(145deg,#24101d 0%,#7a104d 58%,#98145d 100%);
        }
        .auth-gate.hidden { display:none; }
        .auth-gate.auth-exit { animation:authGateExit .20s ease both; pointer-events:none; }
        @keyframes authGateExit { to { opacity:0; transform:scale(.994); } }
        .auth-shell {
            width:min(920px,100%); min-height:520px; display:grid; grid-template-columns:340px minmax(0,1fr);
            overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.18); background:#fff;
            box-shadow:0 32px 90px rgba(0,0,0,.36);
        }
        .auth-showcase {
            position:relative; min-width:0; padding:34px 30px; color:#fff;
            background:linear-gradient(155deg,#331125 0%,#7a104d 58%,#98145d 100%);
            display:flex; flex-direction:column; justify-content:space-between;
        }
        .auth-showcase::after {
            content:""; position:absolute; width:300px; height:300px; border-radius:50%; inset-inline-end:-170px; bottom:-150px;
            border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 48px rgba(255,255,255,.018),0 0 0 96px rgba(255,255,255,.01); pointer-events:none;
        }
        .auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
        .auth-brand-icon {
            width:58px; height:58px; flex:0 0 58px; border-radius:18px; display:grid; place-items:center; --ui-icon-size:31px;
            color:#fff; background:linear-gradient(135deg,#ed1c91,#c21875 58%,#f04aa7); border:1px solid rgba(255,255,255,.20);
            box-shadow:0 16px 34px rgba(237,28,145,.22);
        }
        .auth-brand h2 { margin:0; color:#fff; font-size:20px; font-weight:900; letter-spacing:-.3px; }
        .auth-warehouse-chip {
            position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%;
            padding:7px 10px; border-radius:999px; color:#fde7f4; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11);
            font-size:9px; font-weight:800;
        }
        .auth-warehouse-chip strong { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .auth-showcase-footer { position:relative; z-index:1; display:grid; gap:9px; }
        .auth-status-line { display:flex; gap:8px; flex-wrap:wrap; }
        .auth-live-status,.auth-db-status {
            display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px;
            border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:rgba(226,232,240,.82); font-size:8px; font-weight:800;
        }
        .auth-live-dot,.auth-db-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.10); }
        .auth-live-status.offline .auth-live-dot,.auth-db-status.warning .auth-db-dot { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.10); }
        .auth-db-status.error .auth-db-dot { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.10); }
        .auth-version { color:rgba(203,213,225,.62); font-size:8px; font-weight:800; }
        .auth-card {
            position:relative; min-width:0; padding:72px 42px 34px; background:#fff; display:flex; flex-direction:column; justify-content:center;
        }
        .auth-card-top { position:absolute; top:22px; inset-inline-end:24px; display:flex; gap:7px; }
        .auth-lang-btn {
            min-width:42px; height:31px; padding:0 9px; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b;
            font:inherit; font-size:9px; font-weight:900; cursor:pointer; transition:.15s ease;
        }
        .auth-lang-btn:hover { border-color:#efa4cf; color:#a50f62; }
        .auth-lang-btn.active { color:#fff; border-color:#c21875; background:#c21875; box-shadow:0 7px 16px rgba(194,24,117,.16); }
        .auth-mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:22px; }
        .auth-mobile-brand .auth-brand-icon { width:46px; height:46px; flex-basis:46px; border-radius:14px; --ui-icon-size:25px; }
        .auth-mobile-brand h2 { margin:0; font-size:16px; font-weight:900; color:#0f172a; }
        .auth-mobile-brand small { display:block; margin-top:2px; color:#64748b; font-size:8px; font-weight:800; }
        .auth-panel { display:none; }
        .auth-panel.active { display:block; animation:authPanelIn .18s ease both; }
        @keyframes authPanelIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
        .auth-title { margin:0 0 22px; color:#0f172a; font-size:27px; font-weight:900; letter-spacing:-.45px; }
        .auth-form { display:grid; gap:16px; }
        .auth-field label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; color:#334155; font-size:10px; font-weight:900; }
        .auth-field input,.auth-field select {
            width:100%; min-height:44px; padding:10px 12px; border:1px solid #dbe3ef; border-radius:13px; background:#f8fafc; color:#0f172a;
            font:inherit; font-size:11px; outline:none; transition:.15s ease;
        }
        .auth-field input:focus,.auth-field select:focus { background:#fff; border-color:#c21875; box-shadow:0 0 0 4px rgba(194,24,117,.08); }
        .auth-setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .auth-user-select-native { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; overflow:hidden!important; }
        .auth-user-picker { position:relative; z-index:8; }
        .auth-user-picker-trigger {
            width:100%; height:46px; min-height:46px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px;
            padding:7px 9px; border:1px solid #dbe3ef; border-radius:13px; background:#fff; color:#0f172a; text-align:start; cursor:pointer;
            font:inherit; box-shadow:0 4px 12px rgba(15,23,42,.025); transition:.15s ease;
        }
        .auth-user-picker-trigger:hover,.auth-user-picker.open .auth-user-picker-trigger { border-color:#efa4cf; background:#fff8fc; box-shadow:0 0 0 3px rgba(194,24,117,.06); }
        .auth-user-picker-trigger:focus-visible { outline:none; border-color:#c21875; box-shadow:0 0 0 4px rgba(194,24,117,.09); }
        .auth-selected-avatar {
            grid-area:auto; width:28px; height:28px; min-width:28px; min-height:28px; margin:0; border-radius:9px; display:grid; place-items:center;
            background:linear-gradient(135deg,#7a104d,#c21875); color:#fff; font-size:8px; font-weight:900;
        }
        .auth-user-picker-main { min-width:0; display:grid; gap:1px; }
        .auth-user-picker-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0f172a; font-size:9px; line-height:1.15; font-weight:900; }
        .auth-user-picker-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#64748b; font-size:7px; line-height:1.1; }
        .auth-user-picker-meta { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
        .auth-selected-role { display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; border:1px solid #dbe3ef; background:#fff; color:#475569; font-size:6.5px; font-weight:900; }
        .auth-selected-role.admin { color:#9d2c7d; background:rgba(157,44,125,.07); border-color:rgba(157,44,125,.16); }
        .auth-selected-role.warehouse { color:#047857; background:rgba(5,150,105,.07); border-color:rgba(5,150,105,.16); }
        .auth-selected-role.viewer { color:#9b296d; background:rgba(2,132,199,.07); border-color:rgba(2,132,199,.16); }
        .auth-user-picker-chevron { width:14px; height:14px; color:#94a3b8; transition:transform .15s ease; }
        .auth-user-picker.open .auth-user-picker-chevron { transform:rotate(180deg); }
        .auth-user-dropdown {
            position:absolute; top:calc(100% + 6px); inset-inline:0; display:none; z-index:80; padding:7px; border:1px solid #dbe3ef; border-radius:14px;
            background:#fff; box-shadow:0 20px 46px rgba(15,23,42,.15);
        }
        .auth-user-picker.open .auth-user-dropdown { display:block; animation:authDropdownIn .12s ease both; }
        @keyframes authDropdownIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
        .auth-user-search { position:relative; display:flex; align-items:center; margin-bottom:6px; }
        .auth-user-search > .ui-icon { position:absolute; inset-inline-start:10px; width:15px; height:15px; color:#94a3b8; pointer-events:none; }
        .auth-user-search input { min-height:38px; padding:8px 10px; padding-inline-start:34px; border-radius:11px; font-size:9px; }
        .auth-user-options { display:grid; gap:4px; max-height:min(260px,40vh); overflow:auto; scrollbar-width:thin; }
        .auth-user-dropdown-option {
            width:100%; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 8px; border:1px solid transparent;
            border-radius:11px; background:#fff; color:#0f172a; text-align:start; font:inherit; cursor:pointer; transition:.12s ease;
        }
        .auth-user-dropdown-option:hover,.auth-user-dropdown-option.active { border-color:#efbdd8; background:#fff1f8; }
        .auth-user-dropdown-option .auth-user-avatar { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,#7a104d,#c21875); color:#fff; font-size:8px; font-weight:900; }
        .auth-user-dropdown-option-copy { min-width:0; }
        .auth-user-dropdown-option-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0f172a; font-size:9px; font-weight:900; }
        .auth-user-dropdown-option-copy small { display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#64748b; font-size:7px; }
        .auth-user-dropdown-role { display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; border:1px solid #dbe3ef; background:#f8fafc; color:#475569; font-size:6.5px; font-weight:900; white-space:nowrap; }
        .auth-user-dropdown-role.admin { color:#9d2c7d; background:rgba(157,44,125,.07); border-color:rgba(157,44,125,.16); }
        .auth-user-dropdown-role.warehouse { color:#047857; background:rgba(5,150,105,.07); border-color:rgba(5,150,105,.16); }
        .auth-user-dropdown-role.viewer { color:#9b296d; background:rgba(2,132,199,.07); border-color:rgba(2,132,199,.16); }
        .auth-user-dropdown-empty { display:none; padding:10px 7px 5px; color:#94a3b8; font-size:8px; font-weight:800; text-align:center; }
        .auth-user-dropdown-empty.visible { display:block; }
        .auth-user-dropdown-meta { margin-top:5px; color:#94a3b8; font-size:6.7px; }
        .auth-selected-profile-compact { display:flex; justify-content:flex-end; margin:4px 1px 0; }
        .auth-selected-profile-compact .auth-selected-main { display:inline-flex; align-items:center; gap:5px; min-width:0; }
        .auth-selected-profile-compact .auth-selected-main strong,.auth-selected-profile-compact .auth-selected-main small { margin:0; color:#94a3b8; font-size:6.6px; font-weight:800; }
        .auth-input-shell { position:relative; display:flex; align-items:center; }
        .auth-input-shell > .ui-icon { position:absolute; inset-inline-start:12px; width:17px; height:17px; color:#94a3b8; pointer-events:none; }
        .auth-input-shell .auth-pin { min-height:46px; padding-inline-start:40px; padding-inline-end:45px; letter-spacing:7px; text-align:center; direction:ltr; font-weight:900; font-variant-numeric:tabular-nums; }
        .auth-pin-toggle { position:absolute; inset-inline-end:6px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#64748b; cursor:pointer; }
        .auth-pin-toggle:hover { color:#c21875; background:#fff1f8; }
        .auth-pin-toggle .ui-icon { width:17px; height:17px; }
        .auth-pin-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
        .auth-caps-note { display:none; align-items:center; gap:5px; color:#b45309; font-size:8px; font-weight:800; }
        .auth-caps-note.visible { display:flex; }
        .auth-recovery-link { margin-inline-start:auto; padding:0; border:0; background:transparent; color:#c21875; font:inherit; font-size:8px; font-weight:900; cursor:pointer; }
        .auth-recovery-box,.auth-lockout { display:none; margin-top:6px; padding:8px 10px; border-radius:10px; font-size:8px; font-weight:800; line-height:1.6; }
        .auth-recovery-box.visible { display:block; background:#fff1f8; border:1px solid #efbdd8; color:#8d1458; }
        .auth-lockout.visible { display:flex; align-items:center; gap:6px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
        .auth-error { min-height:18px; color:#dc2626; font-size:9px; font-weight:800; line-height:1.55; border-radius:9px; }
        .auth-error:not(:empty) { padding:7px 9px; background:#fef2f2; border:1px solid #fecaca; }
        .auth-submit { width:100%; min-height:46px; justify-content:center; border-radius:13px; padding:11px 14px; font-size:10px; box-shadow:0 10px 22px rgba(194,24,117,.16); }
        .auth-submit:disabled { cursor:wait; opacity:.68; }
        .auth-card.shake { animation:authShake .28s ease; }
        @keyframes authShake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }
        .auth-success-splash {
            position:fixed; inset:0; z-index:13000; display:none; place-items:center; padding:18px; background:rgba(4,17,38,.92); backdrop-filter:blur(12px);
        }
        .auth-success-splash.visible { display:grid; animation:authSplashIn .16s ease both; }
        @keyframes authSplashIn { from { opacity:0; } to { opacity:1; } }
        .auth-success-box { width:min(300px,100%); text-align:center; color:#fff; }
        .auth-success-icon { width:62px; height:62px; margin:0 auto 14px; border-radius:19px; display:grid; place-items:center; --ui-icon-size:34px; background:linear-gradient(135deg,#ed1c91,#c21875,#f04aa7); }
        .auth-success-box h3 { margin:0 0 7px; font-size:17px; font-weight:900; }
        .auth-success-box p { display:none; }
        .auth-success-user { display:inline-flex; align-items:center; gap:6px; color:#fde7f4; font-size:9px; font-weight:800; }
        .auth-success-progress { width:120px; height:3px; margin:15px auto 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.13); }
        .auth-success-progress::after { content:""; display:block; width:45%; height:100%; border-radius:inherit; background:#ff77c5; animation:authProgress 1s ease-in-out infinite alternate; }
        @keyframes authProgress { from { transform:translateX(-55%); } to { transform:translateX(150%); } }
        @media (max-width:760px) {
            .auth-gate { padding:0; place-items:stretch; }
            .auth-shell { width:100%; min-height:100dvh; grid-template-columns:1fr; border:0; border-radius:0; }
            .auth-showcase { display:none; }
            .auth-card { min-height:100dvh; padding:74px 20px 28px; justify-content:flex-start; }
            .auth-mobile-brand { display:flex; }
            .auth-card-top { top:20px; inset-inline-end:20px; }
            .auth-title { font-size:24px; margin-bottom:20px; }
            .auth-setup-grid { grid-template-columns:1fr; }
            .auth-user-dropdown { position:fixed; top:auto; bottom:8px; inset-inline:8px; max-height:min(70dvh,520px); border-radius:18px; }
            .auth-user-options { max-height:min(50dvh,350px); }
        }
        @media (max-height:620px) and (min-width:761px) {
            .auth-gate { padding:8px; }
            .auth-shell { min-height:0; }
            .auth-showcase { padding:24px 26px; }
            .auth-card { padding-top:58px; padding-bottom:22px; }
            .auth-card-top { top:14px; }
            .auth-title { margin-bottom:16px; font-size:23px; }
            .auth-form { gap:12px; }
        }
        @media (prefers-reduced-motion:reduce) {
            .auth-gate,.auth-panel,.auth-user-picker.open .auth-user-dropdown,.auth-success-splash,.auth-success-progress::after { animation:none!important; }
        }
        .current-user-pill { display:inline-flex; align-items:center; gap:8px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); color:#fff; min-width:0; }
        .current-user-pill .ui-icon { width:17px; height:17px; flex:0 0 auto; }
        .current-user-copy { min-width:0; line-height:1.15; }
        .current-user-copy strong { display:block; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
        .current-user-copy small { display:block; opacity:.78; font-size:8px; margin-top:2px; }
        .user-management-head { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
        .user-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:12px 0; }
        .user-stat { padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
        .user-stat span { display:block; color:var(--text-muted); font-size:9px; font-weight:800; }
        .user-stat strong { display:block; margin-top:3px; font-size:18px; color:var(--primary); }
        .users-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:15px; }
        .users-table { width:100%; border-collapse:collapse; min-width:720px; }
        .users-table th,.users-table td { padding:10px 11px; border-bottom:1px solid var(--border); text-align:start; font-size:10px; }
        .users-table th { color:var(--text-muted); font-weight:900; background:var(--surface-soft); }
        .users-table tr:last-child td { border-bottom:0; }
        .role-badge,.user-status-badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 8px; font-size:9px; font-weight:900; border:1px solid transparent; }
        .role-badge.admin { color:#9d2c7d; background:rgba(157,44,125,.09); border-color:rgba(157,44,125,.18); }
        .role-badge.warehouse { color:#9b296d; background:rgba(237,28,145,.10); border-color:rgba(237,28,145,.20); }
        .role-badge.viewer { color:#475569; background:rgba(100,116,139,.10); border-color:rgba(100,116,139,.18); }
        .user-status-badge.active { color:#047857; background:rgba(5,150,105,.09); border-color:rgba(5,150,105,.18); }
        .user-status-badge.disabled { color:#b91c1c; background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.16); }
        .user-row-actions { display:flex; gap:6px; flex-wrap:wrap; }
        .user-modal-card { max-width:560px; }
        .permission-denied-flash { animation:permissionDenied .28s ease; }
        @keyframes permissionDenied { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
        .audit-user-cell { white-space:nowrap; font-weight:800; color:var(--primary); }
        .audit-user-cell small { display:block; color:var(--text-muted); font-size:8px; font-weight:700; margin-top:2px; }
        @media (max-width:760px) { .user-stats{grid-template-columns:1fr;} .current-user-copy strong{max-width:90px;} }

    

        /* ===== Cloud User Directory / Access ===== */
        .cloud-sync-card { position:relative; overflow:hidden; }
        .cloud-sync-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; inset-inline-end:-95px; top:-105px; background:radial-gradient(circle,rgba(194,24,117,.10),transparent 68%); pointer-events:none; }
        .cloud-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:12px 0; }
        .cloud-status-box { border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); padding:10px 11px; min-width:0; }
        .cloud-status-box span { display:block; color:var(--text-muted); font-size:8px; font-weight:900; }
        .cloud-status-box strong { display:block; margin-top:4px; color:var(--primary); font-size:10px; font-weight:900; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
        .cloud-sync-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; }
        .cloud-sync-note { margin-top:10px; padding:9px 11px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); color:var(--text-muted); font-size:9px; line-height:1.75; }
        .cloud-sync-note strong { color:var(--primary); }
        .cloud-connection-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 8px; border:1px solid var(--border); background:var(--surface); font-size:8px; font-weight:900; color:var(--text-muted); }
        .cloud-connection-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#94a3b8; }
        .cloud-connection-pill.connected { color:#047857; border-color:rgba(5,150,105,.20); background:rgba(5,150,105,.06); }
        .cloud-connection-pill.connected::before { background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.10); }
        .cloud-connection-pill.warning { color:#b45309; border-color:rgba(217,119,6,.20); background:rgba(217,119,6,.06); }
        .cloud-connection-pill.warning::before { background:#f59e0b; }
        .cloud-device-link { border:0; background:transparent; color:#c21875; font:inherit; font-size:8px; font-weight:900; cursor:pointer; padding:4px 0; }
        .auth-cloud-row { display:flex; justify-content:center; margin-top:9px; }
        .cloud-device-modal { width:min(590px,calc(100vw - 24px)); }
        #cloudDeviceModal { z-index:13050; }
        .cloud-device-modal .modal-body { padding-top:2px; }
        .cloud-device-help { font-size:9px; color:var(--text-muted); line-height:1.75; margin:0 0 12px; }
        .auth-cloud-login-subtitle { margin:-8px 0 22px; color:#64748b; font-size:14px; font-weight:700; line-height:1.8; }
        .cloud-secret-warning { padding:9px 10px; border-radius:12px; border:1px solid rgba(217,119,6,.20); background:rgba(217,119,6,.06); color:#92400e; font-size:8px; line-height:1.7; margin-top:9px; }
        @media (max-width:760px) { .cloud-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
        @media (max-width:520px) { .cloud-status-grid { grid-template-columns:1fr; } }

/* ===== Granular permissions UI ===== */
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.permission-option{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);font-size:10px;font-weight:800;cursor:pointer}
.permission-option input{width:17px;height:17px;accent-color:#c21875;flex:0 0 auto}
.permission-option:has(input:checked){border-color:rgba(194,24,117,.34);background:rgba(194,24,117,.08);color:var(--primary)}

/* ===== Base mobile app shell ===== */
@media (max-width: 760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding:8px;padding-bottom:18px}
  .erp-container{width:100%;max-width:100%;overflow:hidden}
  .erp-header{margin-bottom:10px;padding:13px 12px;border-radius:18px;gap:10px}
  .brand-lockup{width:100%;gap:9px}
  .brand-icon{width:40px;height:40px;border-radius:13px;--ui-icon-size:24px}
  .erp-header h1{font-size:17px;line-height:1.15}
  .warehouse-name-display{font-size:9px;margin-top:3px}
  .header-actions{width:100%;margin-top:2px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .header-actions .btn,.header-actions select,.header-select-with-icon{min-width:0;width:100%;height:40px;padding:7px 6px;font-size:0;border-radius:11px!important;justify-content:center}
  .header-actions .btn .ui-icon,.header-actions .ui-icon{margin:0;width:19px;height:19px}
  .header-actions .btn span:not(#notifBadge):not(.current-user-copy){font-size:0}
  .header-select-with-icon select{font-size:0!important;padding:0!important}
  .current-user-pill{grid-column:span 2;justify-content:center;min-height:40px;border-radius:11px}
  .current-user-copy strong{max-width:110px;font-size:9px}.current-user-copy small{font-size:7px}
  .erp-badge{grid-column:span 2;text-align:center;font-size:8px!important;display:flex;align-items:center;justify-content:center}
  .nav-tabs{position:sticky;top:0;z-index:500;margin:0 -2px 10px;padding:5px;gap:5px;border-radius:14px;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .tab-btn{padding:9px 11px;font-size:10px;border-radius:10px;min-height:38px}
  .barcode-scanner-bar,.dashboard-hero,.dashboard-topbar,.settings-hero,.audit-hero,.reports-hero{border-radius:16px}
  .scanner-input-group,.scanner-mode-group{width:100%;min-width:0}
  .erp-card,.settings-card,.toolbar-panel,.reports-chart-card,.reports-insight-card{border-radius:16px}
  .settings-grid{grid-template-columns:1fr!important;gap:10px}
  .settings-card.full{grid-column:auto}
  .settings-fields{grid-template-columns:1fr!important}
  .settings-field.full{grid-column:auto!important}
  .permission-grid{grid-template-columns:1fr}
  .cloud-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cloud-sync-actions,.settings-hero-actions,.audit-hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .cloud-sync-actions .btn,.settings-hero-actions .btn,.audit-hero-actions .btn{width:100%;justify-content:center}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;padding:18px 14px}
  .user-modal-card{max-width:none}
  .table-scroll,.users-table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .progress-bar-container{width:88%}
  .notification-drawer{width:min(94vw,420px)}
}
@media (max-width: 430px){
  .header-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .current-user-pill,.erp-badge{grid-column:span 3}
  .cloud-status-grid{grid-template-columns:1fr}
  .cloud-sync-actions,.settings-hero-actions,.audit-hero-actions{grid-template-columns:1fr}
}

/* ===== v20.6.1 UI Polish & Visual Consistency ===== */
/* One consolidated visual layer. Keep feature logic outside this section. */
.brand-v2061 {
  color:var(--text-main);
  background:
    radial-gradient(circle at 8% -8%, rgba(237,28,145,.055), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(122,16,77,.035), transparent 22%),
    linear-gradient(180deg,#faf9fa 0%,var(--bg-main) 62%,#f9f7f9 100%);
  font-size:14px;
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body[data-theme="dark"].brand-v2061 {
  background:
    radial-gradient(circle at 8% -8%, rgba(237,28,145,.08), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(122,16,77,.12), transparent 20%),
    linear-gradient(180deg,#0f0d10 0%,var(--bg-main) 65%,#0d0b0e 100%);
}
.brand-v2061 .company-logo { display:block; width:100%; height:100%; object-fit:contain; }
.brand-v2061 .brand-logo-shell,
.brand-v2061 .auth-brand-logo-wrap {
  display:grid; place-items:center; flex:0 0 auto; overflow:hidden;
  background:#fff; border:1px solid rgba(255,255,255,.68);
  box-shadow:0 12px 28px -18px rgba(0,0,0,.48);
}
.brand-v2061 .brand-logo-shell { width:58px; height:58px; border-radius:18px; padding:4px; }
.brand-v2061 .auth-brand-logo-wrap { width:78px; height:78px; border-radius:23px; padding:5px; }
.brand-v2061 .auth-brand-logo-wrap.mobile { width:54px; height:54px; border-radius:16px; padding:3px; }
.brand-v2061 .brand-company-kicker,
.brand-v2061 .auth-company-kicker { display:block; letter-spacing:1.6px; font:900 9px/1.2 Arial,sans-serif; color:#ffd8ec; }

/* Header: brand-forward without turning the whole UI pink. */
.brand-v2061 .erp-header {
  padding:21px 24px; border-radius:24px; border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 10% 8%,rgba(255,255,255,.095),transparent 24%),
    linear-gradient(118deg,#24141f 0%,#4f1738 48%,#7a104d 100%);
  box-shadow:0 26px 68px -42px rgba(60,15,43,.82);
}
.brand-v2061 .erp-header::after { width:300px; height:300px; top:-180px; inset-inline-end:-90px; background:rgba(237,28,145,.13); }
.brand-v2061 .erp-header h1 { font-size:23px; line-height:1.28; letter-spacing:-.28px; }
.brand-v2061 .brand-subtitle { color:rgba(255,247,252,.72); font-size:11px; }
.brand-v2061 .warehouse-name-display { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.13); }
.brand-v2061 .header-actions .btn,
.brand-v2061 .header-actions select,
.brand-v2061 .header-select-with-icon,
.brand-v2061 .current-user-pill,
.brand-v2061 .erp-badge {
  color:#fff!important; background:rgba(255,255,255,.075)!important; border-color:rgba(255,255,255,.15)!important;
  box-shadow:none; backdrop-filter:blur(10px);
}
.brand-v2061 .header-actions .btn:hover { background:rgba(255,255,255,.14)!important; border-color:rgba(255,255,255,.22)!important; }

/* Buttons and controls */
.brand-v2061 .btn { font-weight:800; letter-spacing:0; }
.brand-v2061 .btn-blue { color:#fff; background:linear-gradient(135deg,#8f154f,#b91568); box-shadow:0 12px 24px -18px rgba(185,21,104,.70); }
.brand-v2061 .btn-purple { color:#fff; background:linear-gradient(135deg,#5f294e,#8c3b71); }
.brand-v2061 .btn-neutral { background:var(--surface); color:var(--text-main); border:1px solid var(--border); box-shadow:none; }
.brand-v2061 .btn-neutral:hover { border-color:var(--border-strong); background:var(--surface-soft); }
.brand-v2061 input,
.brand-v2061 select,
.brand-v2061 textarea { color:var(--text-main); background:var(--input-bg); border-color:var(--border); }
.brand-v2061 input::placeholder,
.brand-v2061 textarea::placeholder { color:color-mix(in srgb,var(--text-muted) 78%,transparent); opacity:1; }
.brand-v2061 input:focus,
.brand-v2061 select:focus,
.brand-v2061 textarea:focus { border-color:var(--brand-strong)!important; box-shadow:0 0 0 4px rgba(185,21,104,.10)!important; outline:0; }

/* Main navigation */
.brand-v2061 .nav-tabs { padding:7px; gap:7px; border-radius:18px; background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-soft); }
.brand-v2061 .tab-btn { min-height:44px; padding:10px 17px; border-radius:12px; color:var(--text-muted); font-size:13px; }
.brand-v2061 .tab-btn:hover { color:var(--text-main); background:var(--surface-soft); border-color:var(--border); transform:none; }
.brand-v2061 .tab-btn.active { color:#fff; background:linear-gradient(135deg,#8f154f,#b91568); box-shadow:0 10px 22px -17px rgba(185,21,104,.78); }
.brand-v2061 .barcode-scanner-bar { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-card); }
.brand-v2061 .barcode-scanner-bar::before { width:4px; background:linear-gradient(var(--brand),var(--brand-strong)); }

/* Shared surfaces */
.brand-v2061 .chart-card,
.brand-v2061 .logs-card,
.brand-v2061 .erp-toolbar,
.brand-v2061 .erp-table-container,
.brand-v2061 .kpi-card,
.brand-v2061 .metric-card,
.brand-v2061 .settings-card,
.brand-v2061 .reports-chart-card,
.brand-v2061 .reports-insight-card,
.brand-v2061 .dashboard-status-card,
.brand-v2061 .dashboard-live-pill,
.brand-v2061 .dashboard-updated,
.brand-v2061 .toolbar-panel,
.brand-v2061 .master-count-card,
.brand-v2061 .custom-file-card,
.brand-v2061 .master-file-card {
  color:var(--text-main); background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-card);
}

/* Professional KPI cards. Compact, balanced, no empty decorative bubbles. */
.brand-v2061 .erp-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 20px; }
.brand-v2061 .metric-card {
  --metric-accent:var(--brand-strong); --metric-soft:rgba(185,21,104,.085);
  min-height:116px; padding:17px 17px 16px; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:13px;
  overflow:hidden; border-radius:18px; border:1px solid var(--border); border-inline-start:4px solid var(--metric-accent);
  background:linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 97%,var(--metric-soft) 3%) 100%);
}
.brand-v2061 .metric-card::before,
.brand-v2061 .metric-card::after { display:none!important; content:none!important; }
.brand-v2061 .metric-card.success { --metric-accent:var(--success); --metric-soft:rgba(15,139,102,.08); }
.brand-v2061 .metric-card.warning { --metric-accent:var(--warning); --metric-soft:rgba(184,102,8,.08); }
.brand-v2061 .metric-card.danger { --metric-accent:var(--danger); --metric-soft:rgba(206,51,69,.08); }
.brand-v2061 .metric-icon {
  position:relative; width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  color:var(--metric-accent); background:var(--metric-soft); border:1px solid color-mix(in srgb,var(--metric-accent) 17%,transparent); box-shadow:none;
}
.brand-v2061 .metric-info { min-width:0; }
.brand-v2061 .metric-info > span { color:var(--text-muted); font-size:11px; font-weight:800; line-height:1.55; }
.brand-v2061 .metric-info h2 { margin:6px 0 3px; color:var(--text-main); font:900 30px/1.05 Arial,'Cairo',sans-serif; letter-spacing:-.45px; }
.brand-v2061 .metric-sub { margin-top:3px; color:var(--text-muted); font-size:10px; font-weight:700; line-height:1.5; }

.brand-v2061 .dashboard-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.brand-v2061 .kpi-card {
  --kpi-color:var(--brand-strong); --kpi-soft:rgba(185,21,104,.085);
  min-height:128px; padding:18px; align-items:center; gap:14px; border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 97%,var(--kpi-soft) 3%) 100%);
  box-shadow:var(--shadow-card); isolation:isolate;
}
.brand-v2061 .kpi-card::before { content:""; position:absolute; inset-block:16px; inset-inline-start:0; width:4px; border-radius:0 4px 4px 0; background:var(--kpi-color); z-index:0; }
html[dir="rtl"] .brand-v2061 .kpi-card::before { border-radius:4px 0 0 4px; }
.brand-v2061 .kpi-card::after { display:none!important; content:none!important; }
.brand-v2061 .kpi-card.blue,
.brand-v2061 .kpi-card.cyan { --kpi-color:var(--brand-strong); --kpi-soft:rgba(185,21,104,.085); }
.brand-v2061 .kpi-card.purple { --kpi-color:#875273; --kpi-soft:rgba(135,82,115,.09); }
.brand-v2061 .kpi-card.red { --kpi-color:var(--danger); --kpi-soft:rgba(206,51,69,.08); }
.brand-v2061 .kpi-icon { width:48px; height:48px; flex-basis:48px; border-radius:14px; color:var(--kpi-color); background:var(--kpi-soft); box-shadow:none; }
.brand-v2061 .kpi-label { color:var(--text-muted); font-size:11px; line-height:1.55; }
.brand-v2061 .kpi-value { margin:6px 0 3px; color:var(--text-main); font-size:29px; }
.brand-v2061 .kpi-note { color:var(--text-muted); font-size:10px; line-height:1.5; }

/* Dashboard */
.brand-v2061 .dashboard-topbar { padding:6px 2px 0; }
.brand-v2061 .dashboard-title-block h2 { color:var(--text-main); font-size:25px; }
.brand-v2061 .dashboard-title-block p { font-size:11.5px; line-height:1.7; }
.brand-v2061 .dashboard-eyebrow,
.brand-v2061 .dashboard-attention-kicker { color:var(--brand-strong); }
.brand-v2061 .dashboard-hero,
.brand-v2061 .dashboard-hero-pro,
.brand-v2061 .reports-hero,
.brand-v2061 .audit-hero { border:1px solid var(--border); background:linear-gradient(145deg,var(--surface),var(--surface-soft)); color:var(--text-main); box-shadow:var(--shadow-card); }
.brand-v2061 .dashboard-hero-copy h2,
.brand-v2061 .dashboard-status-name,
.brand-v2061 .card-title { color:var(--text-main); }
.brand-v2061 .dashboard-mini-label { color:var(--brand-strong); background:var(--brand-soft); }
.brand-v2061 .dashboard-hero-stats > div { background:var(--surface-elevated); border-color:var(--border); }

/* Tables: readable hierarchy in both themes. */
.brand-v2061 .erp-table-container { border-radius:20px; overflow:hidden; background:var(--surface); }
.brand-v2061 .table-section-header { padding:17px 19px; color:var(--text-main); background:var(--surface); border-bottom:1px solid var(--border); }
.brand-v2061 .table-section-title { font-size:13px; line-height:1.55; }
.brand-v2061 .table-section-subtitle { color:var(--text-muted); font-size:10px; line-height:1.6; }
.brand-v2061 .table-section-icon { color:var(--brand-strong); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand-strong) 14%,var(--border)); }
.brand-v2061 .table-count-chip { color:var(--brand-strong); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand-strong) 14%,var(--border)); }
.brand-v2061 table { color:var(--text-main); font-variant-numeric:tabular-nums; }
.brand-v2061 th { color:var(--text-muted); background:var(--surface-soft); border-bottom:1px solid var(--border); font-size:10.5px; font-weight:900; }
.brand-v2061 td { color:var(--text-main); border-color:var(--border); font-size:11px; line-height:1.6; }
.brand-v2061 tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface) 96%,var(--brand-soft) 4%); }
.brand-v2061 tbody tr:hover { background:color-mix(in srgb,var(--surface) 92%,var(--brand-soft) 8%); box-shadow:inset 3px 0 0 var(--brand-strong); }
html[dir="rtl"] .brand-v2061 tbody tr:hover { box-shadow:inset -3px 0 0 var(--brand-strong); }
.brand-v2061 .code-chip,
.brand-v2061 .master-code-chip { color:var(--brand-strong); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand-strong) 15%,var(--border)); }
.brand-v2061 .qty-pill { color:var(--text-main); background:var(--surface-soft); border-color:var(--border); }
.brand-v2061 .category-badge { color:var(--text-main); background:var(--surface-soft); border:1px solid var(--border); }

/* Settings information architecture */
.brand-v2061 .settings-page { gap:15px; }
.brand-v2061 .settings-hero {
  position:relative; overflow:hidden; padding:24px 25px; border-radius:21px; color:#fff;
  background:linear-gradient(120deg,#26141f 0%,#551a3d 54%,#7a104d 100%); border:1px solid rgba(255,255,255,.10); box-shadow:0 24px 60px -40px rgba(80,17,53,.82);
}
.brand-v2061 .settings-hero::after { content:""; position:absolute; inset-inline-end:-60px; top:-110px; width:220px; height:220px; border-radius:50%; background:rgba(237,28,145,.12); pointer-events:none; }
.brand-v2061 .settings-hero-copy,
.brand-v2061 .settings-hero-actions { position:relative; z-index:1; }
.brand-v2061 .settings-hero-copy h2 { margin:3px 0 5px; font-size:24px; line-height:1.3; }
.brand-v2061 .settings-hero-copy p { max-width:720px; font-size:11.5px; line-height:1.75; color:rgba(255,248,252,.76); }
.brand-v2061 .settings-eyebrow { color:#ffd6ea; opacity:.92; }
.brand-v2061 .stable-status-pill { color:#d8f8ed; background:rgba(15,139,102,.18); border:1px solid rgba(104,224,185,.18); }
.brand-v2061 .settings-nav { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:7px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-soft); scrollbar-width:none; }
.brand-v2061 .settings-nav::-webkit-scrollbar { display:none; }
.brand-v2061 .settings-nav-btn { min-height:42px; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--text-muted); font:800 10px/1.3 'Cairo',sans-serif; cursor:pointer; }
.brand-v2061 .settings-nav-btn:hover { color:var(--text-main); background:var(--surface-soft); border-color:var(--border); }
.brand-v2061 .settings-nav-btn.active { color:#fff; background:#8f154f; border-color:#8f154f; }
.brand-v2061 .settings-nav-btn .ui-icon { width:16px; height:16px; }
.brand-v2061 .settings-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.brand-v2061 .settings-card { grid-column:span 6; padding:19px; border-radius:18px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.brand-v2061 .settings-card.full { grid-column:1/-1; }
.brand-v2061 .settings-card-head { gap:12px; margin-bottom:15px; }
.brand-v2061 .settings-card-icon { width:42px; height:42px; border-radius:12px; color:var(--brand-strong); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand-strong) 13%,var(--border)); }
.brand-v2061 .settings-card-head strong { color:var(--text-main); font-size:13.5px; line-height:1.5; }
.brand-v2061 .settings-card-head small { color:var(--text-muted); font-size:10px; line-height:1.65; }
.brand-v2061 .settings-group-heading { grid-column:1/-1; display:flex; align-items:center; gap:11px; padding:10px 3px 4px; scroll-margin-top:92px; }
.brand-v2061 .settings-group-heading:not(:first-child) { margin-top:4px; padding-top:18px; border-top:1px solid var(--border); }
.brand-v2061 .settings-group-index { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:var(--brand-strong); background:var(--brand-soft); font:900 10px/1 Arial,sans-serif; }
.brand-v2061 .settings-group-heading strong { display:block; color:var(--text-main); font-size:14px; line-height:1.45; }
.brand-v2061 .settings-group-heading small { display:block; margin-top:2px; color:var(--text-muted); font-size:9.5px; line-height:1.55; }
.brand-v2061 .settings-field label { color:var(--text-muted); font-size:10px; line-height:1.45; }
.brand-v2061 .settings-field input,
.brand-v2061 .settings-field select { min-height:44px; color:var(--text-main); background:var(--input-bg); border-color:var(--border); }
.brand-v2061 .settings-switch-row { border-bottom-color:var(--border); }
.brand-v2061 .settings-switch-copy strong { color:var(--text-main); font-size:11px; line-height:1.5; }
.brand-v2061 .settings-switch-copy small { color:var(--text-muted); line-height:1.55; }
.brand-v2061 .settings-status,
.brand-v2061 .pwa-detail,
.brand-v2061 .self-test-row,
.brand-v2061 .performance-note,
.brand-v2061 .cloud-status-box,
.brand-v2061 .cloud-sync-note { color:var(--text-main); background:var(--surface-soft); border-color:var(--border); }
.brand-v2061 .settings-status span,
.brand-v2061 .pwa-detail span,
.brand-v2061 .pwa-help,
.brand-v2061 .performance-note { color:var(--text-muted); }
.brand-v2061 .pwa-detail strong,
.brand-v2061 .settings-status strong { color:var(--text-main); }

/* Login */
.brand-v2061 .auth-gate { background:linear-gradient(145deg,#1d1118 0%,#4e1738 56%,#7a104d 100%); }
.brand-v2061 .auth-shell { border-color:rgba(255,255,255,.16); box-shadow:0 34px 92px rgba(25,6,18,.48); }
.brand-v2061 .auth-showcase { background:linear-gradient(155deg,#29141f 0%,#57173e 56%,#7a104d 100%); }
.brand-v2061 .auth-card { background:#fff; }
.brand-v2061 .auth-title { color:#2d1a27; font-size:28px; line-height:1.35; }
.brand-v2061 .auth-subtitle { color:#756773; line-height:1.75; }
.brand-v2061 .auth-field label { color:#5d4e59; }
.brand-v2061 .auth-field input,
.brand-v2061 .auth-field select { color:#2d1a27; background:#fbf9fa; border-color:#e4dbe1; }
.brand-v2061 .auth-field input::placeholder { color:#9d9099; }
.brand-v2061 .auth-field input:focus,
.brand-v2061 .auth-field select:focus { background:#fff; border-color:#b91568; box-shadow:0 0 0 4px rgba(185,21,104,.09); }
.brand-v2061 .auth-lang-btn.active { color:#fff; background:#8f154f; border-color:#8f154f; }
.brand-v2061 .auth-recovery-link,
.brand-v2061 .cloud-device-link { color:#8f154f; }

/* Notifications and status wording should be readable, not technical-looking. */
.brand-v2061 .pwa-status-pill { background:var(--surface-soft); border-color:var(--border); color:var(--text-muted); }
.brand-v2061 .pwa-status-pill.online { color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--surface)); border-color:color-mix(in srgb,var(--success) 22%,var(--border)); }
.brand-v2061 .pwa-status-pill.offline { color:var(--warning); background:color-mix(in srgb,var(--warning) 9%,var(--surface)); border-color:color-mix(in srgb,var(--warning) 24%,var(--border)); }
.brand-v2061 .pwa-status-pill.installed { color:var(--brand-strong); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand-strong) 18%,var(--border)); }

/* Dark theme: explicit surface/text contract to prevent white-on-white regressions. */
body[data-theme="dark"].brand-v2061 .nav-tabs,
body[data-theme="dark"].brand-v2061 .barcode-scanner-bar,
body[data-theme="dark"].brand-v2061 .chart-card,
body[data-theme="dark"].brand-v2061 .logs-card,
body[data-theme="dark"].brand-v2061 .metric-card,
body[data-theme="dark"].brand-v2061 .kpi-card,
body[data-theme="dark"].brand-v2061 .erp-toolbar,
body[data-theme="dark"].brand-v2061 .toolbar-panel,
body[data-theme="dark"].brand-v2061 .erp-table-container,
body[data-theme="dark"].brand-v2061 .settings-card,
body[data-theme="dark"].brand-v2061 .settings-nav,
body[data-theme="dark"].brand-v2061 .reports-chart-card,
body[data-theme="dark"].brand-v2061 .reports-insight-card,
body[data-theme="dark"].brand-v2061 .dashboard-status-card,
body[data-theme="dark"].brand-v2061 .dashboard-live-pill,
body[data-theme="dark"].brand-v2061 .dashboard-updated,
body[data-theme="dark"].brand-v2061 .custom-file-card,
body[data-theme="dark"].brand-v2061 .master-file-card,
body[data-theme="dark"].brand-v2061 .master-count-card,
body[data-theme="dark"].brand-v2061 .notification-drawer,
body[data-theme="dark"].brand-v2061 .modal-card {
  color:var(--text-main)!important; background:var(--surface)!important; border-color:var(--border)!important;
}
body[data-theme="dark"].brand-v2061 .dashboard-hero,
body[data-theme="dark"].brand-v2061 .dashboard-hero-pro,
body[data-theme="dark"].brand-v2061 .reports-hero,
body[data-theme="dark"].brand-v2061 .audit-hero { color:var(--text-main)!important; background:linear-gradient(145deg,#211b22,#19161a)!important; border-color:var(--border)!important; }
body[data-theme="dark"].brand-v2061 .table-section-header,
body[data-theme="dark"].brand-v2061 th { color:var(--text-main)!important; background:var(--surface-soft)!important; border-color:var(--border)!important; }
body[data-theme="dark"].brand-v2061 td { color:var(--text-main)!important; border-color:var(--border)!important; }
body[data-theme="dark"].brand-v2061 tbody tr:nth-child(even) { background:#201b21; }
body[data-theme="dark"].brand-v2061 tbody tr:hover { background:#29222a; }
body[data-theme="dark"].brand-v2061 .table-section-title,
body[data-theme="dark"].brand-v2061 .card-title,
body[data-theme="dark"].brand-v2061 .dashboard-title-block h2,
body[data-theme="dark"].brand-v2061 .dashboard-hero-copy h2,
body[data-theme="dark"].brand-v2061 .dashboard-status-name,
body[data-theme="dark"].brand-v2061 .settings-card-head strong,
body[data-theme="dark"].brand-v2061 .settings-switch-copy strong,
body[data-theme="dark"].brand-v2061 .settings-group-heading strong,
body[data-theme="dark"].brand-v2061 .metric-info h2,
body[data-theme="dark"].brand-v2061 .kpi-value { color:var(--text-main)!important; }
body[data-theme="dark"].brand-v2061 .table-section-subtitle,
body[data-theme="dark"].brand-v2061 .metric-info > span,
body[data-theme="dark"].brand-v2061 .metric-sub,
body[data-theme="dark"].brand-v2061 .kpi-label,
body[data-theme="dark"].brand-v2061 .kpi-note,
body[data-theme="dark"].brand-v2061 .settings-card-head small,
body[data-theme="dark"].brand-v2061 .settings-group-heading small,
body[data-theme="dark"].brand-v2061 .settings-field label,
body[data-theme="dark"].brand-v2061 .settings-switch-copy small { color:var(--text-muted)!important; }
body[data-theme="dark"].brand-v2061 input,
body[data-theme="dark"].brand-v2061 select,
body[data-theme="dark"].brand-v2061 textarea { color:var(--text-main)!important; background:var(--input-bg)!important; border-color:var(--border)!important; }
body[data-theme="dark"].brand-v2061 select option { color:#f8f3f6; background:#242026; }
body[data-theme="dark"].brand-v2061 .code-chip,
body[data-theme="dark"].brand-v2061 .master-code-chip,
body[data-theme="dark"].brand-v2061 .table-count-chip,
body[data-theme="dark"].brand-v2061 .table-section-icon,
body[data-theme="dark"].brand-v2061 .settings-card-icon,
body[data-theme="dark"].brand-v2061 .settings-group-index { color:#ff81c6; background:#351d2b; border-color:#543044; }
body[data-theme="dark"].brand-v2061 .qty-pill,
body[data-theme="dark"].brand-v2061 .category-badge,
body[data-theme="dark"].brand-v2061 .settings-status,
body[data-theme="dark"].brand-v2061 .pwa-detail,
body[data-theme="dark"].brand-v2061 .performance-note,
body[data-theme="dark"].brand-v2061 .cloud-status-box,
body[data-theme="dark"].brand-v2061 .cloud-sync-note,
body[data-theme="dark"].brand-v2061 .self-test-row { color:var(--text-main)!important; background:var(--surface-soft)!important; border-color:var(--border)!important; }
body[data-theme="dark"].brand-v2061 .notification-filter-chip,
body[data-theme="dark"].brand-v2061 .notif-action-btn { color:var(--text-muted); background:var(--surface-soft); border-color:var(--border); }

/* Responsive */
@media (max-width:1200px) {
  .brand-v2061 .erp-metrics,
  .brand-v2061 .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-v2061 .settings-card { grid-column:span 6; }
}
@media (max-width:900px) {
  .brand-v2061 .erp-header { align-items:flex-start; flex-direction:column; }
  .brand-v2061 .header-actions { width:100%; }
  .brand-v2061 .settings-card { grid-column:1/-1; }
}
@media (max-width:760px) {
  .brand-v2061 { font-size:13px; background:var(--bg-main); }
  .brand-v2061 .erp-container { padding:7px; }
  .brand-v2061 .erp-header { margin:-7px -7px 10px; padding:14px 12px 12px; border-radius:0 0 22px 22px; }
  .brand-v2061 .brand-logo-shell { width:48px; height:48px; border-radius:14px; padding:3px; }
  .brand-v2061 .brand-company-kicker { font-size:7px; letter-spacing:1.1px; }
  .brand-v2061 .erp-header h1 { font-size:18px; }
  .brand-v2061 .brand-subtitle { display:none; }
  .brand-v2061 .header-actions { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:7px; padding-bottom:2px; scrollbar-width:none; }
  .brand-v2061 .header-actions::-webkit-scrollbar { display:none; }
  .brand-v2061 .header-actions .btn,
  .brand-v2061 .header-actions .header-select-with-icon,
  .brand-v2061 .current-user-pill { flex:0 0 auto; width:auto; min-width:46px; min-height:46px; padding:8px 10px; border-radius:12px!important; grid-column:auto; }
  .brand-v2061 .current-user-pill { min-width:116px; }
  .brand-v2061 .erp-badge { display:none!important; }
  .brand-v2061 .nav-tabs { position:sticky; top:0; z-index:700; margin:0 0 10px; border-radius:14px; }
  .brand-v2061 .tab-btn { min-height:44px; padding:9px 12px; }
  .brand-v2061 .erp-metrics,
  .brand-v2061 .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .brand-v2061 .metric-card { min-height:106px; padding:13px; grid-template-columns:42px minmax(0,1fr); gap:10px; border-radius:15px; }
  .brand-v2061 .metric-icon { width:42px; height:42px; border-radius:12px; }
  .brand-v2061 .metric-info > span { font-size:9.5px; }
  .brand-v2061 .metric-info h2 { font-size:25px; }
  .brand-v2061 .metric-sub { font-size:8.8px; }
  .brand-v2061 .dashboard-kpi-grid .kpi-card { min-height:112px; padding:14px; border-radius:15px; }
  .brand-v2061 .dashboard-kpi-grid .kpi-icon { width:42px; height:42px; flex-basis:42px; }
  .brand-v2061 .dashboard-kpi-grid .kpi-value { font-size:25px; }
  .brand-v2061 .settings-hero { align-items:flex-start; flex-direction:column; padding:20px; border-radius:18px; }
  .brand-v2061 .settings-hero-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .brand-v2061 .settings-hero-actions .stable-status-pill { grid-column:1/-1; width:max-content; }
  .brand-v2061 .settings-nav { position:sticky; top:60px; z-index:650; border-radius:14px; }
  .brand-v2061 .settings-grid { grid-template-columns:1fr; gap:10px; }
  .brand-v2061 .settings-card,
  .brand-v2061 .settings-card.full,
  .brand-v2061 .settings-group-heading { grid-column:1; }
  .brand-v2061 .settings-card { padding:15px; border-radius:15px; }
  .brand-v2061 .settings-group-heading { padding-top:14px; }
  .brand-v2061 .settings-fields { grid-template-columns:1fr; }
  .brand-v2061 .settings-field.full { grid-column:auto; }
  .brand-v2061 .settings-card-head strong { font-size:12.5px; }
  .brand-v2061 .settings-card-head small { font-size:9.5px; }
  .brand-v2061 .erp-table-container { overflow:visible; border:0; background:transparent; box-shadow:none; }
  .brand-v2061 .table-scroll,
  .brand-v2061 .users-table-wrap { overflow:visible; border:0; }
  .brand-v2061 table.responsive-data-table { min-width:0!important; width:100%; display:block; border-collapse:separate; }
  .brand-v2061 table.responsive-data-table thead { display:none; }
  .brand-v2061 table.responsive-data-table tbody { display:grid; gap:10px; width:100%; }
  .brand-v2061 table.responsive-data-table tbody tr { display:block; width:100%; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-card); }
  .brand-v2061 table.responsive-data-table tbody tr:hover { background:var(--surface); box-shadow:var(--shadow-card); }
  .brand-v2061 table.responsive-data-table tbody td { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0!important; padding:10px 12px; border:0; border-bottom:1px solid var(--border); text-align:end; font-size:10.5px; }
  .brand-v2061 table.responsive-data-table tbody td:last-child { border-bottom:0; }
  .brand-v2061 table.responsive-data-table tbody td::before { content:attr(data-mobile-label); flex:0 0 39%; max-width:39%; color:var(--text-muted); font-size:9px; font-weight:900; line-height:1.45; text-align:start; }
  .brand-v2061 table.responsive-data-table tbody td[colspan] { display:block; text-align:center; padding:24px 14px; }
  .brand-v2061 table.responsive-data-table tbody td[colspan]::before { display:none; content:none; }
  .brand-v2061 .table-action-btn { width:46px; height:46px; border-radius:12px; }
  .brand-v2061 .modal-card { border:1px solid var(--border); box-shadow:0 -22px 68px -30px rgba(0,0,0,.55); }
  .brand-v2061 .notification-drawer { width:100vw; max-width:100vw; top:7vh; border-radius:20px 20px 0 0!important; }
  .brand-v2061 .auth-card { padding-inline:20px; }
}
@media (max-width:430px) {
  .brand-v2061 .erp-metrics,
  .brand-v2061 .dashboard-kpi-grid { grid-template-columns:1fr; }
  .brand-v2061 .settings-hero-actions { grid-template-columns:1fr; }
  .brand-v2061 .settings-hero-actions .stable-status-pill { grid-column:auto; }
  .brand-v2061 table.responsive-data-table tbody td { align-items:flex-start; }
  .brand-v2061 table.responsive-data-table tbody td::before { flex-basis:42%; max-width:42%; }
}

/* v20.6.1 typography + residual accent cleanup */
.brand-v2061 .custom-file-icon,
.brand-v2061 .master-file-card .custom-file-icon {
  color:var(--brand-strong);
  background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-strong) 12%,transparent);
}
.brand-v2061 .custom-file-label { color:var(--text-main); font-size:12.5px; line-height:1.5; }
.brand-v2061 .custom-file-name { color:var(--text-muted); font-size:10.5px; line-height:1.5; }
.brand-v2061 .toolbar-panel-title { color:var(--text-main); font-size:12px; line-height:1.55; }
.brand-v2061 .toolbar-panel-title small { color:var(--text-muted); font-size:9.5px; line-height:1.5; }
.brand-v2061 .reports-card-head strong { color:var(--text-main); font-size:12px; line-height:1.5; }
.brand-v2061 .reports-card-head small { color:var(--text-muted); font-size:9px; line-height:1.5; }
.brand-v2061 .cloud-status-box span { color:var(--text-muted); font-size:9px; line-height:1.45; }
.brand-v2061 .cloud-status-box strong { color:var(--text-main); font-size:10.5px; line-height:1.45; }
.brand-v2061 .user-stat span { color:var(--text-muted); font-size:9.5px; line-height:1.45; }
.brand-v2061 .user-stat strong { color:var(--text-main); }
.brand-v2061 .drawer-summary-card { color:var(--text-main); background:var(--surface-soft); border-color:var(--border); }
.brand-v2061 .drawer-summary-card span { color:var(--text-muted); }
body[data-theme="dark"].brand-v2061 .custom-file-label,
body[data-theme="dark"].brand-v2061 .toolbar-panel-title,
body[data-theme="dark"].brand-v2061 .reports-card-head strong,
body[data-theme="dark"].brand-v2061 .cloud-status-box strong,
body[data-theme="dark"].brand-v2061 .user-stat strong { color:var(--text-main)!important; }