/* ── N3 Dark Theme – Shared Base ───────────────────────────────────────────── */

:root {
    --bg:             #1c1c1c;  --sidebar-bg:    #111111;
    --alpha-bg:       #151515;  --accent:        #e5a00d;
    --accent-dim:     rgba(229,160,13,0.12);
    --text:           #e0e0e0;  --text-muted:    #888888;
    --card-bg:        #252525;  --border:        #2e2e2e;
    --sidebar-width:  182px;    --alpha-w:       44px;
    --sidebar-compact:56px;     --radius:        4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); display: flex; flex-direction: column; height: 100vh; position: fixed; top: 0; left: 0; z-index: 200; border-right: 1px solid var(--border); transition: transform 0.28s ease, width 0.25s ease; }
.sidebar-header { padding: 28px 20px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sidebar-logo-icon { width: 34px; height: 34px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-weight: 700; font-size: 13px; flex-shrink: 0; letter-spacing: 0.5px; }
.sidebar-logo-text { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.4px; }
.sidebar-nav { flex: 1; padding: 14px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nav-section-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-muted); padding: 14px 20px 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text-muted); text-decoration: none; font-size: 14px; border-left: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; cursor: pointer; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.nav-item i { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.sidebar-footer { padding: 10px 0; border-top: 1px solid var(--border); flex-shrink: 0; }
.theme-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text-muted); font-size: 14px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; border-left: 3px solid transparent; transition: color 0.15s, background 0.15s; }
.theme-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.theme-toggle i { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.hamburger { display: none; position: fixed; top: 14px; left: 14px; z-index: 300; background: var(--sidebar-bg); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; border-radius: var(--radius); align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 150; }

/* ── Compact Sidebar ─────────────────────────────────────────────────────── */
body.compact .sidebar { width: var(--sidebar-compact); overflow: hidden; }
body.compact .sidebar-header { padding: 28px 0 22px; justify-content: center; }
body.compact .sidebar-logo { justify-content: center; gap: 0; }
body.compact .sidebar-logo-text { display: none; }
body.compact .nav-section-label { padding: 14px 0 6px; text-align: center; }
body.compact .nav-item { font-size: 0; padding: 10px 0; justify-content: center; gap: 0; }
body.compact .nav-item i { font-size: 14px; width: auto; }
body.compact .theme-toggle { font-size: 0; padding: 10px 0; justify-content: center; gap: 0; }
body.compact .theme-toggle i { font-size: 14px; width: auto; }
body.compact .nav-item:hover, body.compact .theme-toggle:hover { background: rgba(255,255,255,0.05); }

/* ── Page tabs (driver-tabs / dtab — shared across Driver*.jsp + Result*.jsp) ── */
.driver-tabs {
    display: flex; gap: 8px;
    margin-left: auto; padding: 0; flex-shrink: 0; align-items: center;
}
.dtab {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius);
    color: var(--text-muted); font-size: 11px;
    text-decoration: none;
    transition: color 0.13s, background 0.13s;
    white-space: nowrap; line-height: 1;
}
button.dtab { border: none; background: none; cursor: pointer; font-family: inherit; }
.dtab i      { font-size: 11px; }
.dtab img    { height: 11px; width: auto; vertical-align: middle; filter: invert(1) opacity(0.55); }
body.grey-mode .dtab img { filter: invert(0) opacity(0.6); }
.dtab:hover  { color: var(--text); background: rgba(255,255,255,0.06); }
.dtab.active { color: var(--accent); background: var(--accent-dim); }
body.grey-mode .dtab:hover  { background: rgba(0,0,0,0.07); }
body.grey-mode .dtab.active { background: var(--accent-dim); }

/* ── Grey Mode ───────────────────────────────────────────────────────────── */
body.grey-mode {
    --bg: #efefef;  --sidebar-bg: #d7d7d7;  --alpha-bg: #dcdcdc;
    --accent: #e5a00d;  --accent-dim: rgba(229,160,13,0.13);
    --text: #222222;  --text-muted: #666666;
    --card-bg: #ffffff;  --border: #cccccc;
}
body.grey-mode .nav-item:hover,
body.grey-mode .theme-toggle:hover { background: rgba(0,0,0,0.06); }
body.grey-mode .nav-item.active { background: var(--accent-dim); }
body.grey-mode.compact .nav-item:hover,
body.grey-mode.compact .theme-toggle:hover { background: rgba(0,0,0,0.06); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
}