/* ============================================
   التاجر للأرشفة — Black Background + Gold Accent (Arabic RTL)
   ============================================ */

:root {
    --bg:         #080c14;
    --bg-2:       #0d1117;
    --bg-3:       #161b27;
    --bg-4:       #1e2535;
    --border:     rgba(99,120,160,0.18);
    --gold:       #c9a227;
    --gold-light: #e8c04a;
    --gold-dark:  #a07d1a;
    --text:       #e2e8f0;
    --text-muted: #8892a4;
    --sidebar-w:  260px;
    --radius:     10px;
    --shadow:     0 8px 32px rgba(0,0,0,0.7);
    --accent:     #c9a227;
    --glow-gold:  0 0 20px rgba(201,162,39,0.12);
}

* { box-sizing: border-box; }

body {
    font-family: 'Cairo', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    font-size: 14px;
}

/* ============ LAYOUT ============ */
.app-wrapper { display: flex; min-height: 100vh; }

/* ============ SIDEBAR ============ */
.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    background: #080c14;
    border-left: 1px solid rgba(99,120,160,0.18);
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0;
    z-index: 1000; transition: transform 0.3s ease, right 0.3s ease;
    overflow: hidden;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.sidebar-header {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #000;
    box-shadow: 0 4px 12px rgba(201,162,39,0.3);
    flex-shrink: 0;
}
.brand-text { line-height: 1.2; }
.brand-name { font-size: 1.05rem; font-weight: 800; color: var(--gold); display: block; }
.brand-sub { font-size: 0.68rem; color: var(--text-muted); }

/* Scrollable nav */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    padding: 14px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 99px; }

.nav-section-title {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-muted);
    padding: 12px 10px 5px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 9px;
    color: var(--text-muted); text-decoration: none;
    font-weight: 500; transition: all 0.18s;
    margin-bottom: 2px; font-size: 0.86rem;
    border: 1px solid transparent;
    position: relative;
}
.nav-item:hover { background: rgba(99,120,160,0.1); color: var(--text); border-color: rgba(99,120,160,0.15); }
.nav-item.active {
    background: rgba(201,162,39,0.1);
    color: var(--gold);
    border-color: rgba(201,162,39,0.25);
    font-weight: 700;
    box-shadow: inset 0 0 20px rgba(201,162,39,0.04);
}
.nav-item.active::before {
    content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
    width:3px; height:60%; background:var(--gold); border-radius:2px 0 0 2px;
}
.nav-item.active i { color: var(--gold) !important; }
.nav-item i { font-size: 0.95rem; width: 20px; text-align: center; flex-shrink: 0; }

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #000;
    flex-shrink: 0;
}
.user-details { flex: 1; min-width: 0; }
.user-name { font-size: 0.82rem; font-weight: 700; }
.user-role { font-size: 0.68rem; color: var(--gold); }
.user-menu-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px; border-radius: 6px; font-size: .85rem;
    transition: all .2s;
}
.user-menu-btn:hover { color: var(--text); background: var(--bg-3); }

/* ============ MAIN CONTENT ============ */
.main-content {
    margin-right: var(--sidebar-w);
    flex: 1; display: flex; flex-direction: column; min-height: 100vh;
    transition: margin-right 0.3s ease;
}
/* === Sidebar collapsed state (toggled by hamburger button) === */
.sidebar-collapsed .sidebar { transform: translateX(100%); }
.sidebar-collapsed .main-content { margin-right: 0; }

/* ============ TOPBAR ============ */
.topbar {
    height: 60px;
    background: rgba(8,12,20,0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(99,120,160,0.2);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 200;
    gap: 16px;
    box-shadow: 0 1px 0 rgba(201,162,39,0.07), 0 4px 16px rgba(0,0,0,0.4);
}

/* Right side of topbar (brand + page title) */
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Hamburger button */
.sidebar-toggle {
    width: 38px; height: 38px; border-radius: 9px;
    background: none; border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    transition: all .2s; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-3); border-color: rgba(255,255,255,0.15); }
.toggle-line {
    width: 18px; height: 2px; border-radius: 2px;
    background: var(--text); transition: all .3s;
    display: block;
}
.sidebar-toggle:hover .toggle-line { background: var(--gold); }

/* Brand in topbar */
.topbar-brand { display: flex; align-items: center; gap: 7px; }
.topbar-brand-icon {
    font-size: 1.1rem; color: var(--gold);
}
.topbar-brand-name {
    font-size: 1rem; font-weight: 800; color: var(--gold);
}

/* Divider */
.topbar-divider {
    width: 1px; height: 24px; background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* Page title */
.topbar-page-title { display: flex; align-items: center; gap: 8px; }
.tpt-label {
    font-size: .88rem; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}

/* Left side of topbar (search + actions + user) */
.topbar-left { display: flex; align-items: center; gap: 10px; }

/* Search bar */
.topbar-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 9px; padding: 6px 12px;
    transition: all .2s; min-width: 180px;
}
.topbar-search:focus-within { border-color: rgba(201,162,39,0.4); background: var(--bg-2); }
.ts-icon { color: var(--text-muted); font-size: .85rem; flex-shrink: 0; }
.ts-input {
    background: none; border: none; outline: none;
    color: var(--text); font-family: 'Cairo', sans-serif; font-size: .82rem;
    flex: 1; min-width: 0;
}
.ts-input::placeholder { color: var(--text-muted); }
.ts-shortcut {
    background: var(--bg-4); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px; padding: 1px 5px; font-size: .68rem; font-family: monospace;
    flex-shrink: 0;
}

/* Notification button */
.topbar-icon-btn {
    width: 36px; height: 36px; border-radius: 9px;
    background: none; border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; transition: all .2s; position: relative;
    flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--bg-3); color: var(--text); border-color: rgba(255,255,255,0.15); }
.notif-dot {
    position: absolute; top: 7px; left: 8px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); border: 2px solid #000;
}

/* User profile */
.topbar-user {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px 10px;
    cursor: pointer; transition: all .2s;
    flex-shrink: 0;
}
.topbar-user:hover { border-color: rgba(201,162,39,0.3); background: var(--bg-2); }
.tu-avatar {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800; color: #000; flex-shrink: 0;
}
.tu-info { line-height: 1.2; }
.tu-name { font-size: .78rem; font-weight: 700; }
.tu-role { font-size: .65rem; color: var(--gold); }
.tu-arrow { color: var(--text-muted); font-size: .7rem; }

/* ============ PAGE CONTENT ============ */
.page-content { flex: 1; }
.content-area { flex: 1; padding: 24px; }
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.page-title { font-size: 1.3rem; font-weight: 800; margin: 0; }
.page-sub { color: var(--text-muted); font-size: .82rem; margin: 0; }
.date-badge {
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 14px; font-size: .82rem; color: var(--text-muted);
}

/* ============ CARDS ============ */
.card-panel {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.panel-header {
    padding: 13px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.panel-title { font-weight: 700; font-size: .9rem; display: flex; align-items: center; }
.panel-link { font-size: .8rem; color: var(--text-muted); text-decoration: none; }
.panel-link:hover { color: var(--text); }
.panel-body { padding: 18px; }

/* ============ STAT CARDS ============ */
.stat-card {
    border-radius: 14px; padding: 20px; position: relative;
    overflow: hidden; border: 1px solid var(--border); background: var(--bg-2);
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.stat-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; margin-bottom: 14px;
}
.stat-value { font-size: 2rem; font-weight: 900; line-height: 1; }
.stat-label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.stat-badge { font-size: .75rem; margin-top: 8px; }
.stat-sub { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.stat-primary { border-top: 3px solid var(--gold);   box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 -1px 0 rgba(201,162,39,.3) inset; }
.stat-success { border-top: 3px solid #27ae60;       box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 -1px 0 rgba(39,174,96,.3) inset; }
.stat-warning { border-top: 3px solid #e67e22;       box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 -1px 0 rgba(230,126,34,.3) inset; }
.stat-info    { border-top: 3px solid #2980b9;       box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 -1px 0 rgba(41,128,185,.3) inset; }

/* ============ KPI ============ */
.kpi-card {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 14px; padding: 20px; text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin: 0 auto 12px;
}
.kpi-value { font-size: 2rem; font-weight: 900; margin-bottom: 4px; }
.kpi-label { font-size: .82rem; color: var(--text-muted); }
.kpi-gold   { background: rgba(201,162,39,0.12); color: var(--gold); }
.kpi-blue   { background: rgba(41,128,185,0.15); color: #2980b9; }
.kpi-green  { background: rgba(39,174,96,0.15); color: #27ae60; }
.kpi-orange { background: rgba(230,126,34,0.15); color: #e67e22; }
.kpi-purple { background: rgba(142,68,173,0.15); color: #8e44ad; }

/* ============ BUTTONS ============ */
.btn-gold, .btn-accent {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000; border: none;
    padding: 9px 20px; border-radius: 9px;
    font-family: 'Cairo', sans-serif; font-weight: 700; font-size: .88rem;
    cursor: pointer; display: inline-flex; align-items: center; transition: all .2s;
    box-shadow: 0 2px 12px rgba(201,162,39,0.25);
}
.btn-gold:hover, .btn-accent:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #000; box-shadow: 0 4px 16px rgba(201,162,39,0.35);
}
.btn-outline-secondary {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); padding: 9px 18px; border-radius: 9px;
    font-family: 'Cairo', sans-serif; font-weight: 600; font-size: .88rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s; text-decoration: none;
}
.btn-outline-secondary:hover { background: var(--bg-3); color: var(--text); border-color: rgba(255,255,255,0.18); }
.btn-outline-danger {
    background: transparent; color: #e74c3c; border: 1px solid rgba(231,76,60,.3);
    padding: 9px 18px; border-radius: 9px; font-family: 'Cairo', sans-serif;
    font-weight: 600; font-size: .88rem; cursor: pointer;
    display: inline-flex; align-items: center; transition: all .2s;
}
.btn-outline-danger:hover { background: rgba(231,76,60,.1); }
.btn-refresh {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px; transition: all .2s;
}
.btn-refresh:hover { color: var(--text); background: var(--bg-3); }
.btn-clear-all {
    background: none; border: 1px solid rgba(231,76,60,.3); color: #e74c3c;
    border-radius: 7px; padding: 4px 12px; font-size: .78rem; cursor: pointer;
    transition: all .2s; font-family: 'Cairo', sans-serif;
}
.btn-clear-all:hover { background: rgba(231,76,60,.1); }
.btn-action {
    width: 30px; height: 30px; border-radius: 7px; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .8rem; transition: all .2s;
}
.btn-view  { background: rgba(255,255,255,0.06); color: var(--text); }
.btn-view:hover { background: rgba(255,255,255,0.12); }
.btn-delete { background: rgba(231,76,60,.1); color: #e74c3c; }
.btn-delete:hover { background: rgba(231,76,60,.2); }

/* ============ FORMS ============ */
.form-control-dark, .form-select-dark {
    background: var(--bg-3) !important; color: var(--text) !important;
    border: 1px solid rgba(99,120,160,0.22) !important; border-radius: 9px;
    padding: 9px 14px; font-family: 'Cairo', sans-serif; font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control-dark:focus, .form-select-dark:focus {
    outline: none !important; border-color: rgba(201,162,39,0.5) !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,0.1) !important;
    background: var(--bg-2) !important;
}
.form-control-dark::placeholder { color: var(--text-muted) !important; }
.form-select-dark option { background: var(--bg-3); color: var(--text); }
.form-label-dark { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; display: block; }
textarea.form-control-dark { resize: vertical; }

/* ============ SEARCH BAR (page-level) ============ */
.search-wrap { position: relative; flex: 1; max-width: 340px; }
.search-wrap i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-input {
    background: var(--bg-3); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px;
    padding: 8px 36px 8px 14px; width: 100%; font-size: .85rem;
    font-family: 'Cairo', sans-serif;
}
.search-input:focus { outline: none; border-color: rgba(201,162,39,0.4); }
.search-input::placeholder { color: var(--text-muted); }

/* ============ TABLE ============ */
.table-dark-custom {
    width: 100%; border-collapse: collapse;
    /* ── Override ALL Bootstrap 5 table colour variables ── */
    --bs-table-bg:           transparent;
    --bs-table-accent-bg:    transparent;
    --bs-table-striped-bg:   transparent;
    --bs-table-hover-bg:     transparent;
    --bs-table-active-bg:    transparent;
    --bs-table-color:        var(--text);
    --bs-table-border-color: rgba(99,120,160,0.12);
}
.table-dark-custom > :not(caption) > * > * {
    /* Kill Bootstrap's inset box-shadow trick completely */
    box-shadow: none !important;
    background-color: transparent !important;
}
.table-dark-custom thead { position: sticky; top: 60px; z-index: 10; }
.table-dark-custom th {
    background: #111827 !important;
    color: #8892a4;
    font-size: .75rem; font-weight: 700;
    padding: 11px 14px;
    text-align: right;
    border-bottom: 1px solid rgba(99,120,160,0.22) !important;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.table-dark-custom td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(99,120,160,0.1) !important;
    font-size: .85rem; vertical-align: middle;
    background-color: transparent !important;
    color: var(--text);
    white-space: nowrap;
}
/* Allow document title to wrap, but cap its width */
.table-dark-custom .doc-name {
    white-space: normal;
    word-break: break-word;
    min-width: 140px;
    max-width: 220px;
}
.table-dark-custom tr:last-child td { border-bottom: none !important; }
.table-dark-custom tbody tr:hover td {
    background-color: rgba(201,162,39,0.05) !important;
    border-bottom-color: rgba(201,162,39,0.12) !important;
}

/* ============ BADGES ============ */
.status-badge, .priority-badge {
    padding: 4px 11px; border-radius: 20px; font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.badge-active   { background: rgba(39,174,96,0.15);   color: #3dd68c;  border: 1px solid rgba(39,174,96,0.3); }
.badge-archived { background: rgba(127,140,141,0.12); color: #94a3b8;  border: 1px solid rgba(127,140,141,0.25); }
.badge-pending  { background: rgba(59,130,246,0.15);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.3); }
.badge-deleted  { background: rgba(231,76,60,.15);    color: #f87171;  border: 1px solid rgba(231,76,60,.3); }
.badge-low      { background: rgba(148,163,184,0.08); color: #94a3b8;  border: 1px solid rgba(148,163,184,0.15); }
.badge-medium   { background: rgba(59,130,246,0.12);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.25); }
.badge-high     { background: rgba(251,146,60,0.15);  color: #fb923c;  border: 1px solid rgba(251,146,60,0.3); }
.badge-critical { background: rgba(231,76,60,.18);    color: #f87171;  border: 1px solid rgba(231,76,60,.35); }
.role-badge { padding: 4px 11px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.role-admin   { background: rgba(201,162,39,0.15); color: #e8c04a;    border: 1px solid rgba(201,162,39,0.3); }
.role-manager { background: rgba(167,139,250,0.12); color: #a78bfa;   border: 1px solid rgba(167,139,250,0.25); }
.role-employee{ background: rgba(39,174,96,0.12);   color: #3dd68c;   border: 1px solid rgba(39,174,96,0.25); }
.role-viewer  { background: rgba(148,163,184,0.08); color: #94a3b8;   border: 1px solid rgba(148,163,184,0.15); }
.tag-chip {
    background: rgba(99,120,160,0.1); color: var(--text-muted);
    border: 1px solid rgba(99,120,160,0.2); border-radius: 6px;
    padding: 2px 9px; font-size: .76rem; display: inline-flex; align-items: center;
}

/* ============ FILE ICONS ============ */
.file-icon-lg {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.file-pdf  { background: rgba(231,76,60,.12); color: #e74c3c; }
.file-docx, .file-doc { background: rgba(41,128,185,0.12); color: #2980b9; }
.file-xlsx, .file-xls { background: rgba(39,174,96,0.12);  color: #27ae60; }
.file-scan { background: rgba(201,162,39,0.12); color: var(--gold); }

/* ============ INFO ROWS ============ */
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: .8rem; color: var(--text-muted); }
.detail-card {
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; display: flex; align-items: center; gap: 12px;
}
.detail-label { font-size: .76rem; color: var(--text-muted); }
.detail-value { font-size: .88rem; font-weight: 700; }

/* ============ DOCUMENT ROWS ============ */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-title { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: .75rem; color: var(--text-muted); }

/* ============ ACTIVITY ============ */
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.activity-content { flex: 1; }
.activity-action { font-size: .82rem; font-weight: 600; }
.activity-meta { font-size: .75rem; color: var(--text-muted); }
.activity-time { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }

/* ============ DEPT ROWS ============ */
.dept-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.dept-row:last-child { border-bottom: none; }
.dept-name { font-size: .82rem; font-weight: 600; width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-bar-wrap { flex: 1; height: 6px; background: var(--bg-4); border-radius: 99px; overflow: hidden; }
.dept-bar { height: 100%; background: var(--gold); border-radius: 99px; transition: width .5s; }
.dept-count { font-size: .8rem; font-weight: 700; color: var(--text-muted); width: 24px; text-align: center; }

/* ============ EMPLOYEE CARDS (system users) ============ */
.emp-card {
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px; display: flex; align-items: flex-start; gap: 14px;
    position: relative; transition: border-color .2s;
}
.emp-card:hover { border-color: rgba(201,162,39,0.2); }
.emp-inactive { opacity: .55; }
.emp-avatar {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 900; color: #000; flex-shrink: 0;
}
.emp-info { flex: 1; }
.emp-name { font-size: .95rem; font-weight: 800; }
.emp-position { font-size: .8rem; color: var(--text-muted); }
.emp-dept { font-size: .78rem; color: var(--text-muted); }
.emp-contact { display: flex; flex-direction: column; gap: 4px; }
.contact-link {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--bg-3); color: var(--text-muted); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: .78rem;
    text-decoration: none; transition: all .2s;
}
.contact-link:hover { color: var(--gold); background: var(--bg-4); border-color: rgba(201,162,39,0.2); }
.emp-actions { position: absolute; top: 12px; left: 12px; }

/* ============ MODAL ============ */
.modal-dark {
    background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 16px;
}
.modal-dark .modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-dark .modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }
.modal-dark .modal-body { padding: 20px; }
.modal-section-title {
    font-size: .8rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* ============ SCANNER TABS ============ */
.file-tabs { display: flex; gap: 4px; }
.file-tab {
    padding: 5px 14px; border-radius: 7px; border: 1px solid var(--border);
    background: none; color: var(--text-muted); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .2s; font-family: 'Cairo', sans-serif;
    display: flex; align-items: center; gap: 4px;
}
.file-tab:hover { background: var(--bg-3); color: var(--text); }
.file-tab.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; border-color: var(--gold); }

/* ============ SCANNER CONTROL ROW ============ */
.scanner-control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .scanner-control-row { grid-template-columns: 1fr; } }
.scanner-device-select {
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.inline-device-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.inline-device-item {
    display: flex; align-items: center; padding: 8px 10px;
    border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    transition: all .2s; font-size: .82rem;
}
.inline-device-item:hover { background: var(--bg-4); border-color: rgba(255,255,255,0.08); }
.inline-device-item.active { background: rgba(201,162,39,0.1); border-color: rgba(201,162,39,0.3); color: var(--gold); font-weight: 600; }
.scanner-actions { display: flex; flex-direction: column; }

/* ============ SCANNED PAGE CARDS ============ */
.scanned-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
}
.scanned-page-card {
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 8px; text-align: center; position: relative;
    transition: border-color .2s; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scanned-page-card:hover { border-color: rgba(201,162,39,0.3); }
.scan-card-num {
    position: absolute; top: 6px; right: 8px;
    font-size: .68rem; font-weight: 800; color: var(--gold);
}
.scan-card-preview {
    width: 56px; height: 72px; border-radius: 6px;
    background: var(--bg-4); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--text-muted);
}
.scan-card-info { width: 100%; }
.scan-card-name { font-size: .75rem; font-weight: 700; }
.scan-card-meta { font-size: .68rem; color: var(--text-muted); }
.scan-card-time { font-size: .65rem; color: var(--text-muted); }
.scan-card-delete {
    position: absolute; top: 4px; left: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(231,76,60,.2); color: #e74c3c; border: none;
    cursor: pointer; font-size: .7rem; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
}
.scanned-page-card:hover .scan-card-delete { opacity: 1; }

/* ============ MERGE ACTION BAR ============ */
.merge-action-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(201,162,39,0.05); border: 1px solid rgba(201,162,39,0.15);
    border-radius: 10px; padding: 12px 16px; gap: 12px; flex-wrap: wrap;
}
.merge-info { font-size: .82rem; color: var(--text-muted); }

/* ============ UPLOAD ZONE ============ */
.upload-zone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 36px 20px; text-align: center; cursor: pointer;
    transition: all .3s; color: var(--text-muted);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: rgba(201,162,39,0.5); background: rgba(201,162,39,0.03); color: var(--text);
}
.upload-zone i { font-size: 2.5rem; display: block; margin-bottom: 10px; color: var(--gold); }
.upload-zone p { font-weight: 600; margin: 0 0 4px; font-size: .9rem; }
.upload-zone span { font-size: .78rem; }
.file-selected-info {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px;
}

/* ============ VISIBILITY OPTIONS ============ */
.visibility-options { display: flex; flex-direction: column; gap: 8px; }
.vis-option {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 10px; border: 1px solid var(--border); cursor: pointer;
    transition: all .2s; position: relative;
}
.vis-option input[type=radio] { display: none; }
.vis-option:hover { background: var(--bg-3); }
.vis-option.selected { border-color: rgba(201,162,39,0.35); background: rgba(201,162,39,0.05); }
.vis-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.vis-info { flex: 1; }
.vis-title { font-size: .88rem; font-weight: 700; }
.vis-sub { font-size: .75rem; color: var(--text-muted); }
.vis-check { color: var(--gold); font-size: 1rem; opacity: 0; transition: opacity .2s; }
.vis-option.selected .vis-check { opacity: 1; }

/* ============ USERS SELECT LIST ============ */
.users-select-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.user-select-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .2s;
}
.user-select-item:last-child { border-bottom: none; }
.user-select-item:hover { background: var(--bg-3); }
.user-select-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }
.user-mini-avatar {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800; color: #000; flex-shrink: 0;
}

/* ============ ARCHIVE SECTION CARDS ============ */
.archive-section-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 12px; border-radius: 14px;
    border: 1px solid var(--border); text-decoration: none;
    background: var(--bg-2); transition: all .25s; text-align: center;
}
.archive-section-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(201,162,39,0.2); }
.arc-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 10px; }
.arc-label { font-weight: 700; font-size: .88rem; margin-bottom: 4px; color: var(--text); }
.arc-count { font-size: .78rem; font-weight: 600; margin-bottom: 8px; color: var(--gold); }
.arc-arrow { font-size: 1rem; opacity: .5; color: var(--text-muted); }
.archive-section-card:hover .arc-arrow { opacity: 1; color: var(--gold); }

/* ============ VISIBILITY BADGE ============ */
.visibility-badge { display: inline-flex; align-items: center; font-size: .78rem; color: var(--text-muted); }

/* ============ SCAN ANIMATION ============ */
@keyframes scanPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.05)} }
.scan-animation { animation: scanPulse 1s ease-in-out infinite; display: inline-block; }

/* ============ FOOTER ============ */
.app-footer {
    padding: 14px 24px; border-top: 1px solid var(--border);
    font-size: .78rem; color: var(--text-muted);
    display: flex; align-items: center; justify-content: space-between;
}

/* ============ DOCUMENT REF ============ */
.doc-ref { background: var(--bg-4); color: #7f8c8d; border-radius: 6px; padding: 2px 8px; font-size: .75rem; font-family: monospace; }

/* ============ ALERT ============ */
.alert { padding: 12px 16px; border-radius: 10px; border: 1px solid; font-size: .85rem; }

/* ============ PROGRESS ============ */
.progress { background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.progress-bar { background: var(--gold); height: 100%; border-radius: 99px; transition: width .5s; }

/* ============ TEXT HELPERS ============ */
.text-gold { color: var(--gold); }

/* ============ EMPLOYEE DOCS PANEL ============ */
.emp-doc-section { padding: 12px; background: var(--bg-2); border-radius: var(--radius); }
.emp-doc-section-header { margin-bottom: 4px; }
.emp-doc-badge {
    display: inline-flex; align-items: center; padding: 5px 14px;
    border-radius: 20px; font-size: .82rem; font-weight: 700;
}
.emp-doc-badge.permit { background: rgba(201,162,39,.12); color: var(--gold); border: 1px solid rgba(201,162,39,.3); }
.emp-doc-badge.health  { background: rgba(231,76,60,.12);  color: #e74c3c;  border: 1px solid rgba(231,76,60,.3); }
.emp-divider { border-color: rgba(255,255,255,.07); margin: 16px 0; }
.emp-upload-zone {
    border: 2px dashed rgba(255,255,255,.15); border-radius: 10px;
    padding: 24px 16px; text-align: center; cursor: pointer;
    transition: all .25s; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.emp-upload-zone:hover { border-color: var(--gold); background: rgba(201,162,39,.04); }
.emp-upload-zone i { font-size: 1.8rem; color: var(--text-muted); }
.emp-upload-zone span { font-size: .85rem; color: var(--text); font-weight: 600; }
.emp-upload-zone small { font-size: .75rem; color: var(--text-muted); }
.emp-upload-zone.has-file { border-color: rgba(39,174,96,.4); background: rgba(39,174,96,.05); }
.emp-upload-zone.has-file i { color: #27ae60; }
.emp-file-info {
    background: var(--bg-3); border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; padding: 8px 12px;
    display: flex; align-items: center; gap: 10px; font-size: .82rem;
}
.emp-file-info i { font-size: 1.2rem; color: var(--gold); flex-shrink: 0; }
.emp-file-info .fname { font-weight: 600; color: var(--text); }
.emp-file-info .fsize { color: var(--text-muted); font-size: .75rem; }
.emp-file-hint {
    font-size: .78rem; color: var(--text-muted);
    background: rgba(201,162,39,.07); border: 1px dashed rgba(201,162,39,.25);
    border-radius: 8px; padding: 8px 12px; line-height: 1.4;
}

/* ============ RESPONSIVE ============ */

/* ── Sidebar Overlay (mobile backdrop) ── */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* ─────────────────────────────────────────
   MD — Tablets  (< 992px)
   Sidebar slides off, hamburger shows it
───────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root { --sidebar-w: 240px; }

    /* ── Sidebar hidden: slide it fully off-screen to the right ── */
    .sidebar,
    .sidebar-collapsed .sidebar {
        right: calc(-1 * var(--sidebar-w) - 20px);
        transform: none !important;
        z-index: 1050 !important;
        box-shadow: none;
    }

    /* ── Sidebar open: bring it back to the right edge ── */
    .sidebar.open,
    .sidebar-collapsed .sidebar.open {
        right: 0 !important;
        transform: none !important;
        box-shadow: -8px 0 40px rgba(0,0,0,0.6);
    }

    .main-content,
    .sidebar-collapsed .main-content { margin-right: 0 !important; }

    .topbar-brand { display: none !important; }
    .topbar-divider:first-of-type { display: none !important; }
    .tpt-label { max-width: 200px; }
}

/* ─────────────────────────────────────────
   SM — Large phones  (< 768px)
───────────────────────────────────────── */
@media (max-width: 767.98px) {
    .content-area { padding: 14px; }

    /* ── Topbar ── */
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar-search { display: none !important; }
    .tpt-label { max-width: 150px; font-size: .83rem; }
    .tu-info, .tu-arrow { display: none !important; }
    .topbar-user { padding: 5px; }
    .topbar-divider { display: none !important; }

    /* ── Page header ── */
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
    .page-header .btn,
    .page-header .d-flex,
    .page-header > a { width: 100%; justify-content: flex-start; }
    .page-header .gap-2 { flex-wrap: wrap; }

    /* ── Stat cards — 2 per row ── */
    .row.g-3 > [class*="col-md-3"],
    .row.g-3 > [class*="col-lg-3"],
    .row.g-4 > [class*="col-md-3"],
    .row.g-4 > [class*="col-lg-3"] { flex: 0 0 50%; max-width: 50%; }
    .stat-value { font-size: 1.6rem; }
    .stat-card { padding: 16px; }

    /* ── Tables ── */
    .table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
    .table-dark-custom { min-width: 900px; }
    .table-dark-custom th,
    .table-dark-custom td { padding: 8px 10px; font-size: .8rem; }
    /* ArchiveList has 12+ columns — needs more space */
    .archive-table { min-width: 1080px; }
    /* Fix sticky thead — inside overflow-x container it overlaps on mobile; disable sticky */
    .table-dark-custom thead { position: static !important; }
    /* Compact document cell on mobile — hide size/badge row, keep title only */
    .table-dark-custom .doc-size { display: none !important; }
    /* Prevent the document cell's flex container from stretching the row */
    .table-dark-custom td .d-flex { flex-wrap: nowrap; align-items: center; }
    /* Hide lower-priority columns on very narrow tables */
    .col-hide-mobile { display: none !important; }

    /* ── Filter / form rows ── */
    .filter-bar,
    form.d-flex,
    .archive-filters { flex-direction: column !important; gap: 8px !important; }
    .filter-bar .form-control-dark,
    .filter-bar .form-select-dark,
    .archive-filters input,
    .archive-filters select { width: 100% !important; min-width: unset !important; }

    /* ── Panel ── */
    .panel-body { padding: 12px; }
    .panel-header { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
    .panel-header .d-flex { flex-wrap: wrap; gap: 6px; }

    /* ── Modal — full width ── */
    .modal-dialog { margin: 6px; max-width: calc(100vw - 12px) !important; }
    .modal-lg, .modal-xl { max-width: calc(100vw - 12px) !important; }
    .modal-body { padding: 14px; }
    .modal-header, .modal-footer { padding: 10px 14px; }

    /* ── Flex layouts that may not wrap ── */
    .d-flex.gap-3, .d-flex.gap-4 { flex-wrap: wrap; }
    .justify-content-between.d-flex { flex-wrap: wrap; gap: 8px; }

    /* ── Action buttons — icon only on xs rows ── */
    .action-btns { flex-wrap: wrap; gap: 4px; }

    /* ── Input groups ── */
    .input-group { width: 100%; }
    .input-group-dark { width: 100%; }

    /* ── Footer ── */
    .app-footer { flex-direction: column; gap: 4px; text-align: center; padding: 10px; }

    /* ── KPI grid — 2 per row ── */
    .row > [class*="col-md-2"] { flex: 0 0 50%; max-width: 50%; }

    /* ── Root overflow chain fix ──
       Flex child min-width:auto causes page to widen beyond viewport.
       min-width:0 lets the flex item shrink to viewport width.
       Each layer then clips / scrolls correctly. */
    body { overflow-x: hidden; }
    .main-content { min-width: 0; overflow-x: hidden; width: 100%; }
    .content-area { overflow-x: hidden; width: 100%; max-width: 100%; }
    .card-panel { overflow: hidden; }
    /* table-responsive scrolls the table inside its clipped boundary */
    .table-responsive { overflow-x: auto; max-width: 100%; }

    /* ── Bulk bar & inline buttons wrap ── */
    .bulk-bar-inner { flex-wrap: wrap; }
    .panel-header .d-flex.gap-2 { flex-wrap: wrap; }

    /* ── Documents/Archive details — col-lg stacks by Bootstrap at < 992px already ── */
    /* Extra: reduce large padding on detail pages */
    .container-fluid { padding-left: 8px; padding-right: 8px; }
    .px-4 { padding-left: 12px !important; padding-right: 12px !important; }

    /* ══════════════════════════════════════
       MESSAGES / CHAT
    ══════════════════════════════════════ */
    .chat-app {
        flex-direction: column;
        height: auto !important;
        min-height: unset !important;
        border-radius: 12px;
    }
    .chat-sidebar {
        width: 100% !important;
        border-left: none !important;
        border-bottom: 1px solid var(--border);
        max-height: 260px;
        flex-shrink: 0;
    }
    .chat-main { min-height: 420px; }

    /* ══════════════════════════════════════
       CASES CREATE WIZARD
    ══════════════════════════════════════ */
    .cc-hero { padding: 16px 16px 14px; }
    .cc-hero-title { font-size: 1.4rem; }
    .cc-hero-sub { font-size: .78rem; }
    .cc-seal { display: none !important; }
    .cc-steps { padding: 0 6px; gap: 0; }
    .cc-step { padding: 10px 8px; gap: 6px; }
    .cc-step-lbl { font-size: .7rem; }
    .cc-body { padding: 12px; }
    .cc-panel { padding: 14px; border-radius: 10px; }

    /* ══════════════════════════════════════
       DOCUMENTS / ARCHIVE CREATE FORM
    ══════════════════════════════════════ */
    .col-lg-4, .col-lg-8 { flex: 0 0 100%; max-width: 100%; }

    /* ══════════════════════════════════════
       CASES DETAILS
    ══════════════════════════════════════ */
    .cd-actions { flex-wrap: wrap; gap: 6px; }
    .cd-actions .btn, .cd-actions a { flex: 1 1 auto; justify-content: center; text-align: center; }

    /* ══════════════════════════════════════
       HEARINGS — stack columns
    ══════════════════════════════════════ */
    /* col-lg-* already handled by Bootstrap at < 992px */

    /* ══════════════════════════════════════
       REPORTS
    ══════════════════════════════════════ */
    .kpi-card { padding: 12px; }

    /* ══════════════════════════════════════
       ARCHIVE LIST filters
    ══════════════════════════════════════ */
    .archive-section-card { padding: 12px; }

    /* ══════════════════════════════════════
       EMPLOYEES CARDS
    ══════════════════════════════════════ */
    .col-md-6.col-xl-4 { flex: 0 0 100%; max-width: 100%; }

    /* ══════════════════════════════════════
       SETTINGS PAGE
    ══════════════════════════════════════ */
    .settings-card-header { flex-wrap: wrap; gap: 8px; }
    .settings-card-header .ms-auto { margin-right: 0 !important; width: 100%; }
    .settings-card { padding: 14px; }

    /* ══════════════════════════════════════
       ROLES / PERMISSIONS TABLE
    ══════════════════════════════════════ */
    .perm-cell { min-width: 70px; }

    /* ══════════════════════════════════════
       USERS TABLE
    ══════════════════════════════════════ */
    .user-role-badge { white-space: nowrap; }
}

/* ─────────────────────────────────────────
   XS — Small phones  (< 480px)
───────────────────────────────────────── */
@media (max-width: 479.98px) {
    :root { --sidebar-w: 100vw; }

    .content-area { padding: 10px; }

    /* ── Topbar ── */
    .topbar { padding: 0 10px; height: 54px; }
    .tpt-label { max-width: 110px; font-size: .8rem; }
    .topbar-icon-btn { width: 32px; height: 32px; font-size: .85rem; }

    /* ── Stat cards — 1 per row ── */
    .row.g-3 > [class*="col-md-3"],
    .row.g-3 > [class*="col-lg-3"],
    .row.g-4 > [class*="col-md-3"],
    .row.g-4 > [class*="col-lg-3"],
    .row > [class*="col-md-2"] { flex: 0 0 100%; max-width: 100%; }
    .stat-value { font-size: 1.4rem; }

    /* ── Badges — smaller ── */
    .status-badge, .priority-badge, .role-badge { padding: 3px 8px; font-size: .68rem; }

    /* ── Action buttons — icon only ── */
    .btn-action span { display: none; }

    /* ── Modals — full width ── */
    .modal-dialog { margin: 4px !important; max-width: calc(100vw - 8px) !important; }

    /* ── Search dropdown ── */
    .search-dropdown { width: calc(100vw - 24px); right: auto; left: 50%; transform: translateX(-50%); }

    /* ── KPI / archive section cards — 2 per row ── */
    .col-6 { flex: 0 0 50%; max-width: 50%; }

    /* ── Cases Create wizard — compact ── */
    .cc-hero { padding: 12px; }
    .cc-hero-title { font-size: 1.15rem; }
    .cc-steps { padding: 0 2px; }
    .cc-step { padding: 8px 4px; gap: 4px; }
    .cc-step-lbl { display: none; }
    .cc-step-num { width: 26px; height: 26px; font-size: .78rem; }

    /* ── Messages chat — smaller sidebar ── */
    .chat-sidebar { max-height: 200px; }
    .chat-main { min-height: 340px; }

    /* ── Buttons — no text in bulk / action bars ── */
    .bulk-bar .btn span, .panel-header .btn span { display: none; }

    /* ── Tables — extra compact ── */
    .table-dark-custom { min-width: 860px; }
    .archive-table { min-width: 1000px; }
    .table-dark-custom th,
    .table-dark-custom td { padding: 6px 8px; font-size: .76rem; }

    /* ── Panel header wraps ── */
    .panel-header { flex-direction: column; align-items: flex-start; }
    .panel-header .ms-auto { margin-right: 0 !important; width: 100%; }

    /* ── Employee cards: 1 per row ── */
    .col-md-6.col-xl-4 { flex: 0 0 100%; max-width: 100%; }

    /* ── Settings: save button full width ── */
    .settings-card .btn { width: 100%; }

    /* ── Cases Index hero ── */
    .ci-hero h1 { font-size: 1.4rem; }
    .ci-stats { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Documents Create sidebar goes below ── */
    .col-lg-4, .col-lg-8 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* ── Archive section cards — 2 per row ── */
    .col-6.col-md-4.col-lg { flex: 0 0 50%; max-width: 50%; }

    /* ── Reports chart containers ── */
    canvas { max-height: 220px; }
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: rgba(99,120,160,0.3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,120,160,0.5); }

/* ============ ALERT BANNERS ============ */
.alert-banner { padding: 10px 16px; border-radius: 10px; font-size: .85rem; font-weight: 600; display: flex; align-items: center; }
.alert-banner-success { background: rgba(39,174,96,0.12); color: #27ae60; border: 1px solid rgba(39,174,96,0.25); }
.alert-banner-danger  { background: rgba(231,76,60,0.12);  color: #e74c3c; border: 1px solid rgba(231,76,60,0.25); }
.alert-banner-warning { background: rgba(230,126,34,0.12); color: #e67e22; border: 1px solid rgba(230,126,34,0.25); }

/* ============ SIDEBAR BADGE ============ */
.sidebar-badge { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;font-size:.65rem;font-weight:700;color:#fff;padding:0 5px;margin-right:6px; }

/* ============ COMPACT TABLE ============ */
.table-compact td, .table-compact th { padding: 5px 10px !important; font-size: .78rem !important; }
.table-compact .file-icon-sm { width: 26px !important; height: 26px !important; font-size: .7rem !important; }
.table-compact .doc-size, .table-compact .tag-chip { display: none !important; }

/* ============ FILE ICON SMALL ============ */
.file-icon-sm {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.file-pdf { background: rgba(231,76,60,.12); color: #e74c3c; }
.file-docx, .file-doc { background: rgba(41,128,185,0.12); color: #2980b9; }
.file-xlsx, .file-xls { background: rgba(39,174,96,0.12); color: #27ae60; }
.file-scan { background: rgba(201,162,39,0.12); color: var(--gold); }
.file-jpg, .file-jpeg, .file-png { background: rgba(142,68,173,0.12); color: #8e44ad; }

/* ============ DOC META ============ */
.doc-name { font-size: .86rem; font-weight: 600; }
.doc-size { font-size: .74rem; color: var(--text-muted); }
.doc-number { font-size: .78rem; color: var(--text-muted); background: var(--bg-3); padding: 2px 7px; border-radius: 5px; }

/* ============ ACTION BUTTONS ============ */
.action-btns { display: flex; gap: 4px; align-items: center; }

/* ============ EMPTY STATE ============ */
.empty-state { text-align: center; padding: 60px 24px; }
.empty-state h5 { font-weight: 700; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); font-size: .88rem; }

/* ============ THEME TOGGLE BUTTON ============ */
#themeToggleBtn { transition: color .2s, background .2s, border-color .2s, transform .2s; }
#themeToggleBtn:hover { transform: rotate(20deg); }

/* ============ LIGHT MODE ============ */
.light-mode {
    --bg:         #ffffff;
    --bg-2:       #f8f9fc;
    --bg-3:       #eef0f5;
    --bg-4:       #e2e5ed;
    --border:     rgba(0,0,0,0.09);
    --text:       #1a1a2e;
    --text-muted: #6b7280;
    --shadow:     0 4px 24px rgba(0,0,0,0.08);
    --accent:     #c9a227;
}
.light-mode body { background: var(--bg); color: var(--text); }
.light-mode .sidebar {
    background: #ffffff;
    border-left-color: rgba(0,0,0,0.1);
}
.light-mode .sidebar-header { border-bottom-color: rgba(0,0,0,0.08); }
.light-mode .sidebar-footer  { border-top-color:    rgba(0,0,0,0.08); }
.light-mode .topbar {
    background: #ffffff;
    border-bottom-color: rgba(0,0,0,0.08);
}
.light-mode .toggle-line            { background: var(--text); }
.light-mode .sidebar-toggle         { border-color: rgba(0,0,0,0.12); }
.light-mode .sidebar-toggle:hover   { background: #eef0f4; border-color: rgba(0,0,0,0.2); }
.light-mode .topbar-divider         { background: rgba(0,0,0,0.1); }
.light-mode .notif-dot              { border-color: #ffffff; }
.light-mode .nav-item:hover         { background: #eef0f4; border-color: rgba(0,0,0,0.06); }
.light-mode .nav-item.active        { background: rgba(201,162,39,0.1); }
.light-mode .ts-shortcut            { border-color: rgba(0,0,0,0.1); background: #eef0f4; }
.light-mode .topbar-icon-btn:hover  { background: #eef0f4; border-color: rgba(0,0,0,0.18); }
.light-mode .table-dark-custom tr:hover td { background: rgba(0,0,0,0.02); }
.light-mode .progress               { background: rgba(0,0,0,0.06); }
.light-mode .emp-divider            { border-color: rgba(0,0,0,0.07); }
.light-mode .emp-upload-zone        { border-color: rgba(0,0,0,0.15); }
.light-mode .emp-file-info          { border-color: rgba(0,0,0,0.08); }
.light-mode .inline-device-item:hover { border-color: rgba(0,0,0,0.1); }
.light-mode .badge-low              { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.light-mode .role-viewer            { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.light-mode .tag-chip               { background: rgba(0,0,0,0.04); }
.light-mode ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* ============ SEARCH DROPDOWN ============ */
#searchWrapper { position: relative; }
.search-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 9999; display: none; overflow: hidden; }
.search-dropdown.open { display: block; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background .15s; }
.sd-item:last-of-type { border-bottom: none; }
.sd-item:hover { background: var(--bg-3); }
.sd-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; }
.sd-info { flex: 1; min-width: 0; }
.sd-title { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.sd-status { font-size: .7rem; color: var(--text-muted); background: var(--bg-3); padding: 2px 7px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; }
.sd-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: .84rem; }
.sd-all { display: block; padding: 9px 14px; font-size: .8rem; color: var(--gold); text-decoration: none; text-align: center; background: var(--bg-3); border-top: 1px solid var(--border); }
.sd-all:hover { background: var(--bg-4); }

/* ============ NOTIFICATION DROPDOWN ============ */
.notif-wrapper { position: relative; }
.notif-dropdown { position: absolute; top: calc(100% + 10px); left: 0; width: 320px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 9999; display: none; overflow: hidden; }
.notif-dropdown.open { display: block; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .84rem; font-weight: 600; }
.notif-count-badge { background: var(--gold); color: #000; border-radius: 10px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.notif-body { max-height: 280px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background .15s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-3); }
.notif-item-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; margin-top: 1px; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-sub { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }
.notif-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: .84rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notif-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .82rem; }
.notif-footer { border-top: 1px solid var(--border); padding: 8px 14px; }
.notif-footer-link { font-size: .78rem; color: var(--gold); text-decoration: none; display: flex; align-items: center; }
.notif-footer-link:hover { opacity: .8; }

/* ============ BULK ACTION BAR ============ */
.bulk-bar { background: var(--bg-3); border: 1px solid rgba(201,162,39,.2); border-radius: var(--radius); padding: 10px 16px; }
.bulk-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bulk-bar-count { font-size: .85rem; font-weight: 600; color: var(--gold); }

/* ============ LIGHT MODE ADDITIONS ============ */
.light-mode .search-dropdown, .light-mode .notif-dropdown { background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.light-mode .sd-item:hover, .light-mode .notif-item:hover { background: #f4f6f9; }
.light-mode .sd-all, .light-mode .notif-count-badge { background: #eef0f4; }
.light-mode .bulk-bar { background: rgba(201,162,39,.06); }