@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Inter:wght@400;500;600&display=swap');

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

:root {
    --sidebar-bg:    #003366;
    --main-bg:       #F4F4F4;
    --primary:       #4A90E2;
    --teal:          #50E3C2;
    --light-blue:    #5CB8FF;
    --border-radius: 8px;
    --transition:    all 0.3s ease;
    --sidebar-width: 280px;
}

/* ══════════════════════════════════════════════
   DARK MODE — Monochrome Black & Gray
   ══════════════════════════════════════════════ */

/* Smooth transition on toggle */
body, body *, body *::before, body *::after {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.25s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease !important;
}
.sidebar, .main-container, .menu-link, .stat-card,
.job-actions-dropdown, .modal-overlay {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.25s ease,
        box-shadow 0.35s ease,
        transform 0.3s ease,
        width 0.3s ease,
        margin-left 0.3s ease,
        padding-left 0.3s ease,
        opacity 0.2s ease,
        filter 0.35s ease !important;
}

body.dark-mode {
    background: #0c0c0c;
    color: #e0e0e0;
}
body.dark-mode .main-container { background: #0c0c0c; }

/* Header */
body.dark-mode .header {
    background: #111111;
    border-bottom: 1px solid #222222;
    box-shadow: none;
}
body.dark-mode .hamburger-btn { color: #666; }
body.dark-mode .hamburger-btn:hover { background: #1a1a1a; }
body.dark-mode .page-title { color: #ffffff; }
body.dark-mode .search-wrap input {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
}
body.dark-mode .search-wrap input:focus {
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
    background: #1f1f1f;
}
body.dark-mode .search-wrap input::placeholder { color: #444; }

/* Stat Cards */
body.dark-mode .stat-card {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
body.dark-mode .stat-card:hover {
    border-color: #444;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    transform: translateY(-3px);
}
body.dark-mode .stat-label { color: #555; letter-spacing: 1.2px; font-size: 10px; }
body.dark-mode .stat-number { color: #ffffff; }
body.dark-mode .stat-icon svg { color: #555; opacity: 1; }

/* Chart Card */
body.dark-mode .chart-card {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
body.dark-mode .chart-title { color: #555; letter-spacing: 1.5px; font-size: 11px; }

/* Table Card */
body.dark-mode .table-card {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
body.dark-mode .table-header {
    background: #111111;
    color: #555;
    letter-spacing: 1.5px;
    font-size: 11px;
    border-bottom: 1px solid #222;
}
body.dark-mode .table-card thead th {
    background: #111111;
    color: #555;
    border-bottom: 1px solid #222;
    letter-spacing: 1.2px;
    font-size: 10px;
}
body.dark-mode .table-card tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
body.dark-mode .table-card tbody tr:hover { background: #1e1e1e; }
body.dark-mode .table-card tbody td { color: #999; border-bottom: 1px solid #1e1e1e; }
body.dark-mode .table-summary { color: #444; border-top-color: #222; }

/* Filters */
body.dark-mode .filter-select {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
}
body.dark-mode .filter-select:focus { border-color: #555; box-shadow: 0 0 0 3px rgba(255,255,255,0.05); }
body.dark-mode .filter-select option { background: #1a1a1a; color: #e0e0e0; }

/* 3-dot menu */
body.dark-mode .job-actions-btn { color: #444; }
body.dark-mode .job-actions-btn:hover { background: #1e1e1e; color: #ccc; }
body.dark-mode .job-actions-dropdown {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
body.dark-mode .job-actions-dropdown button { color: #999; }
body.dark-mode .job-actions-dropdown button:hover { background: #1e1e1e; color: #e0e0e0; }
body.dark-mode .job-actions-dropdown button.action-delete { color: #cc4444; }
body.dark-mode .job-actions-dropdown button.action-delete:hover { background: rgba(204,68,68,0.08); }

/* Modal */
body.dark-mode .modal-overlay { background: rgba(0,0,0,0.85); }
body.dark-mode .modal-box {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8);
}
body.dark-mode .modal-header {
    background: #111111;
    color: #e0e0e0;
    border-bottom: 1px solid #222;
    letter-spacing: 1px;
}
body.dark-mode .modal-footer { border-top: 1px solid #222; }
body.dark-mode .form-group label { color: #555; letter-spacing: 0.8px; }
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background: #111111;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
}
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
    background: #1a1a1a;
}
body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder { color: #444; }
body.dark-mode .form-group select option { background: #161616; }
body.dark-mode .btn-cancel { background: #1e1e1e; color: #777; border: 1px solid #2a2a2a; }
body.dark-mode .btn-cancel:hover { background: #252525; color: #ccc; }
body.dark-mode .btn-submit { background: #e0e0e0; color: #0c0c0c; font-weight: 700; box-shadow: none; }
body.dark-mode .btn-submit:hover { background: #ffffff; }

/* Dropdowns */
body.dark-mode #sidebarUserDropdown {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
body.dark-mode #sidebarUserDropdown > div:first-child {
    background: #111111;
    border-bottom: 1px solid #222;
}
body.dark-mode #sidebarUserDropdown > div:first-child > div:first-child { color: #ffffff; }
body.dark-mode #sidebarUserDropdown > div:first-child > div:last-child { color: #444; }
body.dark-mode #sidebarUserDropdown button,
body.dark-mode #sidebarUserDropdown a { color: #999 !important; }
body.dark-mode #sidebarUserDropdown button:hover { background: #1e1e1e !important; color: #e0e0e0 !important; }
body.dark-mode #sidebarUserDropdown a:hover { background: rgba(204,68,68,0.08) !important; }
body.dark-mode #sidebarNotificationDropdown {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
body.dark-mode #sidebarNotificationDropdown > div:first-child {
    background: #111111;
    border-bottom: 1px solid #222;
    color: #e0e0e0;
}
body.dark-mode .notif-item { background: transparent !important; border-bottom-color: #1e1e1e !important; }
body.dark-mode .notif-item:hover { background: #1e1e1e !important; }

/* Profile Modal */
body.dark-mode #profileModal > div {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8);
}
body.dark-mode #profileModal > div > div:first-child {
    background: #111111 !important;
    border-bottom: 1px solid #222 !important;
}

/* Tabs */
body.dark-mode .tab-btn { color: #444; }
body.dark-mode .tab-btn.active { color: #e0e0e0; border-bottom-color: #e0e0e0; }

/* Status badges — muted monochrome */
body.dark-mode .status-active   { background: rgba(255,255,255,0.07); color: #aaa; border: 1px solid #333; }
body.dark-mode .status-pending  { background: rgba(255,255,255,0.07); color: #aaa; border: 1px solid #333; }
body.dark-mode .status-inactive { background: rgba(255,255,255,0.07); color: #777; border: 1px solid #2a2a2a; }

/* Buttons */
body.dark-mode .btn-create {
    background: #e0e0e0;
    color: #0c0c0c;
    font-weight: 700;
    border: none;
    box-shadow: none;
}
body.dark-mode .btn-create:hover { background: #ffffff; }

/* Sidebar */
body.dark-mode .sidebar { background: #111111; border-right: 1px solid #1e1e1e; box-shadow: none; }
body.dark-mode .sidebar-header { border-bottom-color: #1e1e1e; }
body.dark-mode .menu-section-label { color: #333; }
body.dark-mode .menu-link { color: #555; }
body.dark-mode .menu-link svg { color: #333; stroke: #333; }
body.dark-mode .menu-link:hover { background: #1a1a1a; color: #e0e0e0; padding-left: 20px; }
body.dark-mode .menu-link:hover svg { color: #aaa; stroke: #aaa; }
body.dark-mode .menu-link.active { background: #1e1e1e; color: #ffffff; border: 1px solid #2a2a2a; }
body.dark-mode .menu-link.active svg { color: #ffffff; stroke: #ffffff; }

/* ── Logo ── */
body.dark-mode .logo-img {
    /* original colors preserved in dark mode */
}

/* ── Links ── */
body.dark-mode a { color: #aaa !important; }
body.dark-mode a:hover { color: #fff !important; }
/* Keep logout link red-ish but muted */
body.dark-mode a[href*="logout"] { color: #cc4444 !important; }

/* ── ALL table headers — override inline style="background:#002B5B" and #4A90E2 ── */
body.dark-mode .table-header,
body.dark-mode thead th,
body.dark-mode .table-card thead th {
    background: #111111 !important;
    color: #555 !important;
    border-bottom: 1px solid #222 !important;
    letter-spacing: 1.2px !important;
}

/* ── Status badges — ALL variants monochrome ── */
body.dark-mode .status-badge,
body.dark-mode [class*="status-"] {
    background: rgba(255,255,255,0.06) !important;
    color: #888 !important;
    border: 1px solid #2a2a2a !important;
}
body.dark-mode .status-active   { background: rgba(255,255,255,0.07) !important; color: #aaa !important; border: 1px solid #333 !important; }
body.dark-mode .status-pending  { background: rgba(255,255,255,0.07) !important; color: #aaa !important; border: 1px solid #333 !important; }
body.dark-mode .status-inactive { background: rgba(255,255,255,0.07) !important; color: #666 !important; border: 1px solid #2a2a2a !important; }

/* ── Status dots ── */
body.dark-mode .status-dot.open   { background: #555 !important; }
body.dark-mode .status-dot.closed { background: #333 !important; }
body.dark-mode .status-dot.draft  { background: #444 !important; }

/* ── Alert / message banners (inline-styled success/error divs) ── */
body.dark-mode [style*="background:#dcfce7"],
body.dark-mode [style*="background: #dcfce7"] {
    background: #111111 !important;
    border-color: #222 !important;
    color: #777 !important;
}
body.dark-mode [style*="background:#fef2f2"],
body.dark-mode [style*="background: #fef2f2"] {
    background: #111111 !important;
    border-color: #222 !important;
    color: #777 !important;
}
body.dark-mode [style*="background:#fffbeb"],
body.dark-mode [style*="background: #fffbeb"] {
    background: #111111 !important;
    border-color: #222 !important;
    color: #777 !important;
}
body.dark-mode [style*="background:#f0fdf4"],
body.dark-mode [style*="background: #f0fdf4"] {
    background: #111111 !important;
    border-color: #222 !important;
    color: #777 !important;
}

/* ── Inline blue/navy backgrounds (table headers, modal headers, buttons) ── */
body.dark-mode [style*="background:#002B5B"],
body.dark-mode [style*="background: #002B5B"] {
    background: #111111 !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background:#4A90E2"],
body.dark-mode [style*="background: #4A90E2"] {
    background: #1e1e1e !important;
    color: #aaa !important;
}
body.dark-mode [style*="background:#1e3a5f"],
body.dark-mode [style*="background: #1e3a5f"] {
    background: #111111 !important;
    color: #e0e0e0 !important;
}

/* ── Analytics cards — green (new hires) ── */
body.dark-mode [style*="background:#f0fdf4"],
body.dark-mode [style*="background: #f0fdf4"] {
    background: #111111 !important;
}
body.dark-mode [style*="border:1px solid #bbf7d0"],
body.dark-mode [style*="border: 1px solid #bbf7d0"] {
    border-color: #222 !important;
}

/* ── Analytics cards — red (resignations) ── */
body.dark-mode [style*="border:1px solid #fecaca"],
body.dark-mode [style*="border: 1px solid #fecaca"] {
    border-color: #222 !important;
}

/* ── Analytics cards — orange (turnover) ── */
body.dark-mode [style*="background:#fff7ed"],
body.dark-mode [style*="background: #fff7ed"] {
    background: #111111 !important;
}
body.dark-mode [style*="border:1px solid #fed7aa"],
body.dark-mode [style*="border: 1px solid #fed7aa"] {
    border-color: #222 !important;
}

/* ── Analytics cards — slate/neutral (total employees, avg salary) ── */
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"] {
    background: #111111 !important;
}
body.dark-mode [style*="border:1px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #e2e8f0"] {
    border-color: #222 !important;
}
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b"] { color: #555 !important; }

/* ── Analytics cards — purple (top department) ── */
body.dark-mode [style*="background:#faf5ff"],
body.dark-mode [style*="background: #faf5ff"] {
    background: #161616 !important;
}
body.dark-mode [style*="border:1px solid #e9d5ff"],
body.dark-mode [style*="border: 1px solid #e9d5ff"] {
    border-color: #252525 !important;
}
body.dark-mode [style*="color:#7c3aed"],
body.dark-mode [style*="color: #7c3aed"] { color: #777 !important; }

/* ── Performance summary pills ── */
body.dark-mode [style*="color:#2563eb"],
body.dark-mode [style*="color: #2563eb"] { color: #555 !important; }

/* ── Performance summary — colored dot spans (background: #color on inline span) ── */
body.dark-mode [style*="background:#16a34a"],
body.dark-mode [style*="background: #16a34a"] { background: #444 !important; }
body.dark-mode [style*="background:#2563eb"],
body.dark-mode [style*="background: #2563eb"] { background: #444 !important; }
body.dark-mode [style*="background:#dc2626"],
body.dark-mode [style*="background: #dc2626"] { background: #444 !important; }

/* ── Inline colored text overrides ── */
body.dark-mode [style*="color:#4A90E2"],
body.dark-mode [style*="color: #4A90E2"] { color: #888 !important; }
body.dark-mode [style*="color:#002B5B"],
body.dark-mode [style*="color: #002B5B"] { color: #aaa !important; }
body.dark-mode [style*="color:#22c55e"],
body.dark-mode [style*="color: #22c55e"] { color: #666 !important; }
body.dark-mode [style*="color:#16a34a"],
body.dark-mode [style*="color: #16a34a"] { color: #777 !important; }
body.dark-mode [style*="color:#dc2626"],
body.dark-mode [style*="color: #dc2626"] { color: #777 !important; }
body.dark-mode [style*="color:#d97706"],
body.dark-mode [style*="color: #d97706"] { color: #777 !important; }
body.dark-mode [style*="color:#166534"],
body.dark-mode [style*="color: #166534"] { color: #666 !important; }
body.dark-mode [style*="color:#991b1b"],
body.dark-mode [style*="color: #991b1b"] { color: #666 !important; }
body.dark-mode [style*="color:#92400e"],
body.dark-mode [style*="color: #92400e"] { color: #666 !important; }

/* ── Inline white backgrounds (cards, dropdowns, doc rows) ── */
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"] {
    background: #161616 !important;
}
body.dark-mode [style*="background:#f9f9f9"],
body.dark-mode [style*="background: #f9f9f9"],
body.dark-mode [style*="background:#f5f5f5"],
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f4f4f4"],
body.dark-mode [style*="background: #f4f4f4"] {
    background: #111111 !important;
}

/* ── Inline border colors ── */
body.dark-mode [style*="border:1px solid #e5e5e5"],
body.dark-mode [style*="border:1px solid #e5e7eb"],
body.dark-mode [style*="border:1px solid #e0e0e0"],
body.dark-mode [style*="border:1px solid #f0f0f0"],
body.dark-mode [style*="border-bottom:1px solid #e5e5e5"],
body.dark-mode [style*="border-bottom:1px solid #f0f0f0"] {
    border-color: #222 !important;
}

/* ── Inline text colors (labels, subtitles) ── */
body.dark-mode [style*="color:#888"],
body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color:#aaa"],
body.dark-mode [style*="color: #aaa"],
body.dark-mode [style*="color:#999"],
body.dark-mode [style*="color: #999"] { color: #555 !important; }
body.dark-mode [style*="color:#111"],
body.dark-mode [style*="color: #111"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#222"],
body.dark-mode [style*="color: #222"] { color: #e0e0e0 !important; }
body.dark-mode [style*="color:#444"],
body.dark-mode [style*="color: #444"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #555"] { color: #999 !important; }

/* ── Doc rows ── */
body.dark-mode .doc-row {
    background: #161616 !important;
    border-color: #252525 !important;
}
body.dark-mode .doc-row:hover { background: #1e1e1e !important; }
body.dark-mode .doc-meta-name { color: #e0e0e0 !important; }
body.dark-mode .doc-meta-sub  { color: #555 !important; }
body.dark-mode .doc-view-btn {
    border-color: #333 !important;
    color: #aaa !important;
    background: #111 !important;
}
body.dark-mode .doc-view-btn:hover { background: #222 !important; color: #fff !important; }
body.dark-mode .doc-del-btn {
    border-color: #3a1a1a !important;
    color: #cc4444 !important;
    background: #111 !important;
}
body.dark-mode .doc-del-btn:hover { background: #1f0f0f !important; }

/* ── Doc checklist slots (JS-generated classes) ── */
body.dark-mode .doc-slot-row {
    background: #111 !important;
    border-color: #252525 !important;
}
body.dark-mode .doc-slot-row.done {
    background: #0f1a0f !important;
    border-color: #1a3a1a !important;
}
body.dark-mode .doc-slot-name { color: #e0e0e0 !important; }
body.dark-mode .doc-slot-not-uploaded { color: #444 !important; }
body.dark-mode .doc-req-header {
    background: #111 !important;
    border-color: #252525 !important;
}
body.dark-mode .doc-req-header.complete {
    background: #0f1a0f !important;
    border-color: #1a3a1a !important;
}
body.dark-mode .doc-req-header-text.complete { color: #6aaa6a !important; }
body.dark-mode .doc-req-header-text.incomplete { color: #aa8833 !important; }
body.dark-mode .doc-other-label { color: #444 !important; }
body.dark-mode #docCountBadge { background: #252525 !important; color: #888 !important; }

/* ── Notification dropdown (inline-styled) ── */
body.dark-mode #sidebarNotificationDropdown {
    background: #161616 !important;
    border-color: #252525 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
}
body.dark-mode #sidebarNotificationDropdown > div:first-child {
    background: #111111 !important;
    border-bottom-color: #222 !important;
    color: #e0e0e0 !important;
}
body.dark-mode #markAllReadBtn { color: #666 !important; }
body.dark-mode .notif-item { background: #161616 !important; border-bottom-color: #1e1e1e !important; }
body.dark-mode .notif-item:hover { background: #1e1e1e !important; }

/* ── User dropdown (inline-styled) ── */
body.dark-mode #sidebarUserDropdown {
    background: #161616 !important;
    border-color: #252525 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
}
body.dark-mode #sidebarUserDropdown > div:first-child {
    background: #111111 !important;
    border-bottom-color: #222 !important;
}

/* ── Profile modal (inline-styled) ── */
body.dark-mode #profileModal > div {
    background: #161616 !important;
    border: 1px solid #252525 !important;
}
body.dark-mode #profileModal > div > div:first-child {
    background: #111111 !important;
    border-bottom-color: #222 !important;
}
body.dark-mode #profileAvatarWrap { border-color: #333 !important; }
body.dark-mode #profileUploadStatus { color: #666 !important; }

/* ── AI Screen modal ── */
body.dark-mode #aiScreenModal .modal-header[style*="background:#002B5B"],
body.dark-mode #aiScreenModal .modal-header[style*="background: #002B5B"] {
    background: #111111 !important;
    border-bottom: 1px solid #222 !important;
}
body.dark-mode #aiScreenLoading > div:nth-child(2) { color: #aaa !important; }
body.dark-mode [style*="background:#e5e7eb"] { background: #222 !important; }
body.dark-mode [style*="background:#f8fafc"] { background: #111 !important; }
body.dark-mode [style*="border-left:3px solid #4A90E2"] { border-left-color: #444 !important; }

/* Dark mode toggle button — icon only, yin-yang */
.dark-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, filter 0.3s ease;
}
.dark-toggle-btn:hover {
    opacity: 1;
}

/* SVG yin-yang colors — light mode: dark half is dark, light half is white */
#dmDarkHalf  { fill: #1a1a2e; }
#dmLightHalf { fill: #f0f0f0; }
#dmDarkDot   { fill: #1a1a2e; }
#dmLightDot  { fill: #f0f0f0; }
#dmYinYang   { color: rgba(255,255,255,0.3); }

/* Light mode: light half glows */
#dmLightHalf, #dmLightDot {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.9));
}

/* Dark mode: dark half glows */
body.dark-mode .dark-toggle-btn {
    background: none;
    border: none;
    box-shadow: none;
}
body.dark-mode #dmDarkHalf  { fill: #e0e0e0; }
body.dark-mode #dmLightHalf { fill: #1a1a1a; }
body.dark-mode #dmDarkDot   { fill: #e0e0e0; }
body.dark-mode #dmLightDot  { fill: #1a1a1a; }
body.dark-mode #dmYinYang   { color: rgba(255,255,255,0.15); }
body.dark-mode #dmDarkHalf,
body.dark-mode #dmDarkDot {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
}
body.dark-mode #dmLightHalf,
body.dark-mode #dmLightDot { filter: none; }

/* ══════════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════════ */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: #F4F4F4;
    min-height: 100vh;
    display: flex;
}

/* ── SIDEBAR ── */
.sidebar {
    background-color: #003366;
    width: 280px;
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
    overflow-y: auto;
    color: white;
    z-index: 1000;
    box-shadow: 4px 0 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}
.sidebar.collapsed { width: 0; overflow: hidden; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    gap: 10px;
}
.logo-img { max-width: 48px; max-height: 48px; object-fit: contain; border-radius: 6px; }

.sidebar-header-icons { display: flex; align-items: center; gap: 8px; position: relative; }
#sidebarNotificationBtn {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; color: white;
}
#sidebarNotificationBtn svg { width: 24px; height: 24px; }

.user-avatar-sidebar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: white;
    color: #003366;
    font-weight: bold;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.sidebar-menu { padding: 0 10px; overflow-y: auto; }

.menu-section-label {
    padding: 12px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.45);
}
.menu-item { margin: 0; }
.menu-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 16px;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.menu-link svg { width: 28px; height: 28px; flex-shrink: 0; color: rgba(255,255,255,0.7); stroke: rgba(255,255,255,0.7); }
.menu-link:hover { background: rgba(255,255,255,0.1); padding-left: 20px; }
.menu-link.active { background: #4A90E2; font-weight: 600; box-shadow: inset 4px 0 0 rgba(255,255,255,0.3); }

.sidebar-dropdown-panel,
.sdp-header, .sdp-user-header, .sdp-body, .sdp-empty,
.sdp-link, .sdp-link-danger, .sdp-footer { display: none; }

/* ── MAIN CONTAINER ── */
.main-container {
    margin-left: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #F4F4F4;
}
.main-container.expanded { margin-left: 0; }

/* ── HEADER ── */
.header {
    background: white;
    padding: 16px 30px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
}
.hamburger-btn {
    margin-right: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
}
.hamburger-btn:hover { background: #f0f0f0; }
.hamburger-btn svg { width: 22px; height: 22px; }

.search-wrap { position: relative; width: 300px; }
.search-wrap input {
    width: 100%;
    padding: 9px 36px 9px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    outline: none;
    background: #fafafa;
}
.search-wrap input:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.1);
    background: white;
}
.search-wrap .search-icon {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    width: 16px; height: 16px;
}

/* ── CONTENT ── */
.content { padding: 30px; flex: 1; }

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #333;
    letter-spacing: -0.5px;
    margin-bottom: 30px;
}

/* ── STAT CARDS ── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.stat-card {
    background: white;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: default;
    animation: fadeIn 0.4s ease-out;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.stat-icon svg { width: 48px; height: 48px; opacity: 0.6; color: #333; }
.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #666; margin-bottom: 6px; }
.stat-number { font-family: 'Montserrat', sans-serif; font-size: 48px; font-weight: 900; color: #111; line-height: 1; }

/* ── CHART CARD ── */
.chart-card {
    background: white;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    animation: fadeIn 0.4s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.chart-title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333; margin-bottom: 20px; }
.chart-container { height: 300px; position: relative; }

/* ── TABLE CARD ── */
.table-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    animation: fadeIn 0.4s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.table-header {
    background: #4A90E2;
    color: white;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table-wrapper { overflow-x: auto; }
.table-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-card thead th {
    background: #4A90E2;
    color: white;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky; top: 0;
}
.table-card tbody tr:nth-child(even) { background: #f9f9f9; }
.table-card tbody tr:hover { background: #f0f0f0; }
.table-card tbody td { padding: 12px 16px; color: #444; border-bottom: 1px solid #f0f0f0; }
.table-card tbody tr:last-child td { border-bottom: none; }
.table-summary { padding: 12px 16px; font-size: 12px; color: #888; border-top: 1px solid #f0f0f0; }

/* ── STATUS BADGES ── */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.status-active   { background: #dcfce7; color: #16a34a; }
.status-pending  { background: #fff7ed; color: #ea580c; }
.status-inactive { background: #fee2e2; color: #dc2626; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.status-dot.open   { background: #22c55e; }
.status-dot.closed { background: #ef4444; }
.status-dot.draft  { background: #3b82f6; }

/* ── ACTION BAR ── */
.action-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.btn-create {
    background: #4A90E2;
    color: white;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-create:hover { background: #357abd; }
.filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    background: white;
    cursor: pointer;
    outline: none;
}
.filter-select:focus { border-color: #4A90E2; }
.action-bar .search-wrap { width: 220px; }

/* ── 3-DOT ACTIONS ── */
.job-actions-wrap { position: relative; display: inline-block; }
.job-actions-btn {
    width: 32px; height: 32px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.job-actions-btn:hover { background: #f0f0f0; }
.job-actions-dropdown {
    position: fixed;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    min-width: 160px;
    display: none;
    overflow: hidden;
}
.job-actions-dropdown.open { display: block; }
.job-actions-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.job-actions-dropdown button:hover { background: #f5f5f5; }
.job-actions-dropdown button.action-delete { color: #ef4444; }
.job-actions-dropdown button.action-delete:hover { background: #fef2f2; }

/* ── MODAL ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header {
    padding: 18px 24px;
    background: #f5f5f5;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}
.modal-body  { padding: 24px; }
.modal-footer { padding: 16px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e0e0e0; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 6px; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    outline: none;
    font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #4A90E2; box-shadow: 0 0 0 3px rgba(74,144,226,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.btn { padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
.btn-cancel { background: #f0f0f0; color: #555; }
.btn-cancel:hover { background: #e0e0e0; }
.btn-submit { background: #4A90E2; color: white; }
.btn-submit:hover { background: #357abd; }

/* Tab buttons */
.tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: #888; }
.tab-btn.active { color: #4A90E2; border-bottom-color: #4A90E2; }

/* ── ANIMATIONS ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
    .sidebar { left: -280px; }
    .sidebar.active { left: 0; }
    .main-container { margin-left: 0; }
    .search-wrap { width: 180px; }
    .form-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   EXECUTIVE LUXURY — Skeuomorphic Theme
   Activated via: [data-theme="executive"] on <body>
   ══════════════════════════════════════════════ */

/* ── Root Variables ── */
[data-theme="executive"] {
    --exec-bg:            #1a1a1e;
    --exec-surface:       #212126;
    --exec-surface-raise: #26262c;
    --exec-surface-deep:  #141418;
    --exec-gold:          #c9a84c;
    --exec-gold-light:    #e8c96a;
    --exec-gold-dim:      #7a6230;
    --exec-silver:        #a8a8b8;
    --exec-silver-dim:    #5a5a6a;
    --exec-text-primary:  #f0ede8;
    --exec-text-secondary:#9a9890;
    --exec-text-muted:    #5a5855;
    --exec-border:        #c9a84c40;
    --exec-border-strong: #c9a84c80;

    /* Bevel — raised surface (light top-left, dark bottom-right) */
    --exec-bevel-raised:
        inset 1px 1px 0px rgba(255,255,255,0.08),
        inset -1px -1px 0px rgba(0,0,0,0.6),
        0 4px 16px rgba(0,0,0,0.6),
        0 1px 3px rgba(0,0,0,0.8);

    /* Bevel — carved/inset surface */
    --exec-bevel-inset:
        inset 2px 2px 5px rgba(0,0,0,0.7),
        inset -1px -1px 2px rgba(255,255,255,0.05);

    /* Gold glow for active/hover states */
    --exec-gold-glow:
        0 0 12px rgba(201,168,76,0.25),
        0 0 4px  rgba(201,168,76,0.15);

    /* Noise texture overlay via SVG data URI */
    --exec-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Smooth transition on theme switch ── */
[data-theme="executive"],
[data-theme="executive"] *,
[data-theme="executive"] *::before,
[data-theme="executive"] *::after {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        color 0.3s ease,
        box-shadow 0.4s ease !important;
}

/* ── Body ── */
[data-theme="executive"] body,
body[data-theme="executive"] {
    background: var(--exec-bg);
    background-image: var(--exec-noise);
    color: var(--exec-text-primary);
}

/* ══════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════ */
[data-theme="executive"] .sidebar {
    background: linear-gradient(180deg, #1e1e24 0%, #18181d 60%, #141418 100%);
    border-right: 1px solid var(--exec-border-strong);
    box-shadow:
        4px 0 24px rgba(0,0,0,0.7),
        inset -1px 0 0 rgba(201,168,76,0.12);
}

[data-theme="executive"] .sidebar-header {
    border-bottom: 1px solid var(--exec-border);
    background: linear-gradient(135deg, #222228 0%, #1a1a20 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

[data-theme="executive"] .menu-section-label {
    color: var(--exec-gold-dim);
    letter-spacing: 2px;
    font-size: 9px;
}

[data-theme="executive"] .menu-link {
    color: var(--exec-text-secondary);
    border-radius: 6px;
    border: 1px solid transparent;
}

[data-theme="executive"] .menu-link svg {
    color: var(--exec-silver-dim);
    stroke: var(--exec-silver-dim);
}

[data-theme="executive"] .menu-link:hover {
    background: linear-gradient(135deg, #2a2a32 0%, #222228 100%);
    color: var(--exec-gold-light);
    border-color: var(--exec-border);
    box-shadow: var(--exec-bevel-raised);
    padding-left: 20px;
}

[data-theme="executive"] .menu-link:hover svg {
    color: var(--exec-gold);
    stroke: var(--exec-gold);
}

[data-theme="executive"] .menu-link.active {
    background: linear-gradient(135deg, #2c2a1e 0%, #221f14 100%);
    color: var(--exec-gold-light);
    border: 1px solid var(--exec-border-strong);
    box-shadow:
        var(--exec-bevel-raised),
        var(--exec-gold-glow),
        inset 3px 0 0 var(--exec-gold);
    font-weight: 700;
}

[data-theme="executive"] .menu-link.active svg {
    color: var(--exec-gold);
    stroke: var(--exec-gold);
}

[data-theme="executive"] .logo-img {
    filter: sepia(0.3) brightness(1.1) contrast(1.1);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
[data-theme="executive"] .header {
    background: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
    border-bottom: 1px solid var(--exec-border-strong);
    box-shadow:
        0 2px 16px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(201,168,76,0.15);
}

[data-theme="executive"] .hamburger-btn {
    color: var(--exec-silver-dim);
}

[data-theme="executive"] .hamburger-btn:hover {
    background: rgba(201,168,76,0.08);
    color: var(--exec-gold);
}

[data-theme="executive"] .page-title {
    color: var(--exec-text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

[data-theme="executive"] .search-wrap input {
    background: var(--exec-surface-deep);
    border: 1px solid var(--exec-border);
    color: var(--exec-text-primary);
    box-shadow: var(--exec-bevel-inset);
}

[data-theme="executive"] .search-wrap input:focus {
    border-color: var(--exec-gold);
    box-shadow:
        var(--exec-bevel-inset),
        0 0 0 3px rgba(201,168,76,0.12),
        var(--exec-gold-glow);
    background: #161619;
}

[data-theme="executive"] .search-wrap input::placeholder {
    color: var(--exec-text-muted);
}

/* ══════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════ */
[data-theme="executive"] .stat-card {
    background: linear-gradient(145deg, #28282e 0%, #1e1e24 50%, #1a1a1f 100%);
    border: 1px solid var(--exec-border-strong);
    box-shadow:
        /* outer raise */
        0 8px 32px rgba(0,0,0,0.7),
        0 2px 8px rgba(0,0,0,0.5),
        /* bevel top-left highlight */
        inset 1px 1px 0 rgba(255,255,255,0.07),
        /* bevel bottom-right shadow */
        inset -1px -1px 0 rgba(0,0,0,0.5),
        /* gold rim glow */
        0 0 0 1px rgba(201,168,76,0.08);
}

[data-theme="executive"] .stat-card:hover {
    border-color: var(--exec-gold);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.8),
        0 4px 12px rgba(0,0,0,0.6),
        inset 1px 1px 0 rgba(255,255,255,0.1),
        inset -1px -1px 0 rgba(0,0,0,0.6),
        var(--exec-gold-glow);
    transform: translateY(-4px);
}

[data-theme="executive"] .stat-label {
    color: var(--exec-gold-dim);
    letter-spacing: 1.8px;
    font-size: 10px;
    text-transform: uppercase;
}

[data-theme="executive"] .stat-number {
    color: var(--exec-text-primary);
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

[data-theme="executive"] .stat-icon svg {
    color: var(--exec-gold-dim);
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.2));
}

/* ══════════════════════════════════════════════
   DATA TABLES
   ══════════════════════════════════════════════ */
[data-theme="executive"] .table-card {
    background: var(--exec-surface);
    border: 1px solid var(--exec-border-strong);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        inset 1px 1px 0 rgba(255,255,255,0.05),
        inset -1px -1px 0 rgba(0,0,0,0.4);
}

[data-theme="executive"] .table-header,
[data-theme="executive"] .table-card thead th {
    background: linear-gradient(180deg, #2a2820 0%, #221f18 100%) !important;
    color: var(--exec-gold) !important;
    border-bottom: 1px solid var(--exec-border-strong) !important;
    letter-spacing: 1.8px !important;
    font-size: 10px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: inset 0 -1px 0 rgba(201,168,76,0.2);
}

[data-theme="executive"] .table-card tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

[data-theme="executive"] .table-card tbody tr:hover {
    background: linear-gradient(90deg, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0.02) 100%);
}

[data-theme="executive"] .table-card tbody td {
    color: var(--exec-text-secondary);
    border-bottom: 1px solid rgba(201,168,76,0.06);
}

[data-theme="executive"] .table-summary {
    color: var(--exec-text-muted);
    border-top-color: var(--exec-border);
}

/* ── Table inline-style overrides ── */
[data-theme="executive"] [style*="background:#002B5B"],
[data-theme="executive"] [style*="background: #002B5B"],
[data-theme="executive"] [style*="background:#4A90E2"],
[data-theme="executive"] [style*="background: #4A90E2"] {
    background: linear-gradient(180deg, #2a2820 0%, #221f18 100%) !important;
    color: var(--exec-gold) !important;
}

/* ══════════════════════════════════════════════
   STATUS BADGES — Executive Monochrome Gold
   ══════════════════════════════════════════════ */
[data-theme="executive"] .status-badge,
[data-theme="executive"] [class*="status-"] {
    background: rgba(201,168,76,0.08) !important;
    color: var(--exec-gold) !important;
    border: 1px solid var(--exec-border-strong) !important;
    box-shadow: var(--exec-bevel-inset);
}

[data-theme="executive"] .status-dot.open   { background: var(--exec-gold) !important; }
[data-theme="executive"] .status-dot.closed { background: var(--exec-silver-dim) !important; }
[data-theme="executive"] .status-dot.draft  { background: var(--exec-text-muted) !important; }

/* ══════════════════════════════════════════════
   DARK MODE TOGGLE — 3-state visual
   ══════════════════════════════════════════════ */
[data-theme="executive"] .dark-toggle-btn {
    background: none;
    border: none;
    box-shadow: none;
}

/* Executive: gold yin-yang */
[data-theme="executive"] #dmDarkHalf  { fill: #c9a84c; }
[data-theme="executive"] #dmLightHalf { fill: #2a2820; }
[data-theme="executive"] #dmDarkDot   { fill: #c9a84c; }
[data-theme="executive"] #dmLightDot  { fill: #2a2820; }
[data-theme="executive"] #dmDarkHalf,
[data-theme="executive"] #dmDarkDot {
    filter: drop-shadow(0 0 5px rgba(201,168,76,0.9));
}
[data-theme="executive"] #dmLightHalf,
[data-theme="executive"] #dmLightDot { filter: none; }

/* ══════════════════════════════════════════════
   MISC — Inline white/light bg overrides
   ══════════════════════════════════════════════ */
[data-theme="executive"] [style*="background:white"],
[data-theme="executive"] [style*="background: white"],
[data-theme="executive"] [style*="background:#fff"],
[data-theme="executive"] [style*="background: #fff"],
[data-theme="executive"] [style*="background:#ffffff"],
[data-theme="executive"] [style*="background: #ffffff"],
[data-theme="executive"] [style*="background:#f9f9f9"],
[data-theme="executive"] [style*="background: #f9f9f9"],
[data-theme="executive"] [style*="background:#f5f5f5"],
[data-theme="executive"] [style*="background: #f5f5f5"],
[data-theme="executive"] [style*="background:#f8fafc"],
[data-theme="executive"] [style*="background: #f8fafc"],
[data-theme="executive"] [style*="background:#f4f4f4"],
[data-theme="executive"] [style*="background: #f4f4f4"] {
    background: var(--exec-surface) !important;
}

[data-theme="executive"] [style*="color:#333"],
[data-theme="executive"] [style*="color: #333"],
[data-theme="executive"] [style*="color:#111"],
[data-theme="executive"] [style*="color: #111"],
[data-theme="executive"] [style*="color:#000"],
[data-theme="executive"] [style*="color: #000"] {
    color: var(--exec-text-primary) !important;
}

[data-theme="executive"] [style*="color:#4A90E2"],
[data-theme="executive"] [style*="color: #4A90E2"] {
    color: var(--exec-gold) !important;
}

[data-theme="executive"] [style*="border:1px solid #e5e5e5"],
[data-theme="executive"] [style*="border:1px solid #e5e7eb"],
[data-theme="executive"] [style*="border:1px solid #e0e0e0"],
[data-theme="executive"] [style*="border-bottom:1px solid #e5e5e5"],
[data-theme="executive"] [style*="border-bottom:1px solid #f0f0f0"] {
    border-color: var(--exec-border) !important;
}

/* ── Main container & content bg ── */
[data-theme="executive"] .main-container {
    background: var(--exec-bg);
    background-image: var(--exec-noise);
}

[data-theme="executive"] .chart-card {
    background: var(--exec-surface);
    border: 1px solid var(--exec-border-strong);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        inset 1px 1px 0 rgba(255,255,255,0.05),
        inset -1px -1px 0 rgba(0,0,0,0.4);
}

[data-theme="executive"] .chart-title {
    color: var(--exec-gold-dim);
    letter-spacing: 2px;
}

/* ══════════════════════════════════════════════
   EXECUTIVE LUXURY — True Skeuomorphic Theme
   Activated via: [data-theme="executive"] on <body>
   ══════════════════════════════════════════════ */

/* ── Root Variables ── */
[data-theme="executive"] {
    /* Palette */
    --eg: #c9a84c;          /* gold base */
    --eg-l: #e8c96a;        /* gold light */
    --eg-ll: #f5e199;       /* gold highlight */
    --eg-d: #8a6820;        /* gold dark */
    --eg-dd: #4a3810;       /* gold deep shadow */
    --eg-glow: rgba(201,168,76,0.35);

    /* Surfaces — obsidian layers */
    --es-0: #0d0d10;        /* deepest pit */
    --es-1: #131316;        /* base body */
    --es-2: #1a1a1f;        /* raised floor */
    --es-3: #222228;        /* card surface */
    --es-4: #2c2c34;        /* top face of raised element */
    --es-5: #38383f;        /* highlight edge */

    /* Text */
    --et-1: #f5f0e8;        /* primary — warm white */
    --et-2: #b0a898;        /* secondary */
    --et-3: #6a6460;        /* muted */
    --et-4: #3a3835;        /* disabled */

    /* Borders */
    --eb-gold:   rgba(201,168,76,0.55);
    --eb-gold-s: rgba(201,168,76,0.25);
    --eb-dark:   rgba(0,0,0,0.8);
    --eb-light:  rgba(255,255,255,0.07);

    /* ── Lighting model ──
       Light source: top-left at ~45°
       Highlight = top/left edges (lighter)
       Shadow    = bottom/right edges (darker)
    */

    /* Raised plate — sits above the surface */
    --skeuo-raised:
        /* ambient lift */
        0 6px 24px rgba(0,0,0,0.75),
        0 2px 6px  rgba(0,0,0,0.9),
        /* top-left bevel highlight */
        inset 1px 1px 0 rgba(255,255,255,0.10),
        inset 2px 2px 0 rgba(255,255,255,0.04),
        /* bottom-right bevel shadow */
        inset -1px -1px 0 rgba(0,0,0,0.70),
        inset -2px -2px 0 rgba(0,0,0,0.40);

    /* Deep raised — hero cards, prominent panels */
    --skeuo-raised-deep:
        0 12px 40px rgba(0,0,0,0.85),
        0 4px 12px  rgba(0,0,0,0.95),
        0 1px 3px   rgba(0,0,0,1),
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset 3px 3px 0 rgba(255,255,255,0.04),
        inset -1px -1px 0 rgba(0,0,0,0.80),
        inset -3px -3px 0 rgba(0,0,0,0.50);

    /* Inset / carved — inputs, recessed areas */
    --skeuo-inset:
        inset 2px 2px 6px  rgba(0,0,0,0.85),
        inset 4px 4px 10px rgba(0,0,0,0.50),
        inset -1px -1px 0  rgba(255,255,255,0.06);

    /* Gold rim — decorative border glow */
    --skeuo-gold-rim:
        0 0 0 1px rgba(201,168,76,0.60),
        0 0 8px  rgba(201,168,76,0.20),
        0 0 20px rgba(201,168,76,0.08);

    /* Gold active glow */
    --skeuo-gold-active:
        0 0 0 1px var(--eg),
        0 0 12px rgba(201,168,76,0.45),
        0 0 30px rgba(201,168,76,0.15);

    /* Brushed metal noise */
    --exec-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ── Smooth transition ── */
[data-theme="executive"],
[data-theme="executive"] *,
[data-theme="executive"] *::before,
[data-theme="executive"] *::after {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        color 0.3s ease,
        box-shadow 0.4s ease,
        transform 0.25s ease !important;
}

/* ── Body & main container ── */
body[data-theme="executive"] {
    background-color: var(--es-1);
    background-image:
        var(--exec-noise),
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(201,168,76,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(201,168,76,0.03) 0%, transparent 50%);
    color: var(--et-1);
}

[data-theme="executive"] .main-container {
    background-color: var(--es-1);
    background-image:
        var(--exec-noise),
        linear-gradient(160deg, rgba(201,168,76,0.025) 0%, transparent 40%);
}

/* ══════════════════════════════════════════════
   SIDEBAR — Matte obsidian column, brushed texture
   ══════════════════════════════════════════════ */
[data-theme="executive"] .sidebar {
    /* Brushed charcoal: subtle horizontal micro-stripe via repeating-linear-gradient
       layered over the noise SVG and a deep obsidian base gradient */
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 3px
        ),
        var(--exec-noise),
        linear-gradient(180deg,
            #1e1e24 0%,
            #18181e 25%,
            #131318 55%,
            #0e0e12 80%,
            #0a0a0d 100%);
    border-right: 1px solid transparent;
    /* Right edge: gradient gold seam — not solid */
    border-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(201,168,76,0.5) 20%,
        rgba(232,201,106,0.7) 50%,
        rgba(201,168,76,0.5) 80%,
        transparent 100%
    ) 1;
    box-shadow:
        6px 0 40px rgba(0,0,0,0.95),
        3px 0 14px rgba(0,0,0,0.8),
        inset -1px 0 0 rgba(201,168,76,0.20),
        inset -3px 0 8px rgba(201,168,76,0.04),
        inset 1px 0 0 rgba(255,255,255,0.035);
}

[data-theme="executive"] .sidebar-header {
    background:
        var(--exec-noise),
        linear-gradient(135deg,
            #242428 0%,
            #1c1c20 40%,
            #161618 100%);
    border-bottom: 1px solid var(--eb-gold);
    box-shadow:
        0 3px 12px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(201,168,76,0.12);
    padding: 14px 15px;
}

[data-theme="executive"] .menu-section-label {
    color: var(--eg-d);
    letter-spacing: 2.5px;
    font-size: 9px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

[data-theme="executive"] .menu-link {
    color: var(--et-2);
    border-radius: 5px;
    border: 1px solid transparent;
    position: relative;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

[data-theme="executive"] .menu-link svg {
    color: var(--et-3);
    stroke: var(--et-3);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

[data-theme="executive"] .menu-link:hover {
    /* Multi-stop metallic gold gradient stroke as background */
    background:
        linear-gradient(135deg,
            #2c2c34 0%,
            #242428 40%,
            #1e1e22 100%);
    color: var(--eg-l);
    /* Gradient border via box-shadow outline — not solid */
    border-color: transparent;
    outline: none;
    padding-left: 20px;
    box-shadow:
        /* raised lift */
        0 4px 16px rgba(0,0,0,0.7),
        0 1px 4px rgba(0,0,0,0.9),
        /* top-left bevel */
        inset 1px 1px 0 rgba(255,255,255,0.08),
        /* bottom-right shadow */
        inset -1px -1px 0 rgba(0,0,0,0.6),
        /* soft inset gold glow — backlit from within */
        inset 0 0 12px rgba(201,168,76,0.07),
        /* outer gold rim */
        0 0 0 1px rgba(201,168,76,0.35),
        0 0 8px rgba(201,168,76,0.12);
}

[data-theme="executive"] .menu-link:hover svg {
    color: var(--eg);
    stroke: var(--eg);
    filter: drop-shadow(0 0 5px rgba(201,168,76,0.55));
}

[data-theme="executive"] .menu-link.active {
    /* Multi-stop gold metallic gradient — simulates a lit gold plate */
    background:
        linear-gradient(135deg,
            #332e1a 0%,
            #2a2510 25%,
            #221e0c 55%,
            #1c1908 80%,
            #161406 100%);
    color: var(--eg-ll);
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow:
        0 0 10px rgba(201,168,76,0.55),
        0 0 20px rgba(201,168,76,0.20),
        0 1px 3px rgba(0,0,0,0.9);
    box-shadow:
        /* deep outer lift */
        0 8px 28px rgba(0,0,0,0.85),
        0 3px 8px rgba(0,0,0,0.95),
        /* top-left bevel highlight */
        inset 1px 1px 0 rgba(255,255,255,0.10),
        inset 2px 2px 0 rgba(255,255,255,0.04),
        /* bottom-right shadow */
        inset -1px -1px 0 rgba(0,0,0,0.75),
        /* INSET gold glow — embossed / backlit from within */
        inset 0 0 18px rgba(201,168,76,0.14),
        inset 0 0 6px  rgba(201,168,76,0.08),
        /* left gold bar */
        inset 3px 0 0 var(--eg),
        inset 5px 0 10px rgba(201,168,76,0.20),
        /* outer gold active ring */
        0 0 0 1px var(--eg),
        0 0 14px rgba(201,168,76,0.30),
        0 0 30px rgba(201,168,76,0.10);
}

[data-theme="executive"] .menu-link.active svg {
    color: var(--eg-l);
    stroke: var(--eg-l);
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.7));
}

[data-theme="executive"] .logo-img {
    filter: sepia(0.4) brightness(1.15) contrast(1.1) saturate(0.9);
}

/* ══════════════════════════════════════════════
   HEADER — Polished obsidian bar
   ══════════════════════════════════════════════ */
[data-theme="executive"] .header {
    background:
        var(--exec-noise),
        linear-gradient(180deg,
            #252528 0%,
            #1e1e22 50%,
            #191919 100%);
    border-bottom: 1px solid var(--eb-gold);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.8),
        0 1px 4px  rgba(0,0,0,0.9),
        /* top highlight — light source */
        inset 0 1px 0 rgba(255,255,255,0.07),
        /* bottom gold seam */
        inset 0 -1px 0 rgba(201,168,76,0.20),
        inset 0 -2px 0 rgba(201,168,76,0.06);
}

[data-theme="executive"] .hamburger-btn {
    color: var(--et-3);
    border-radius: 6px;
}

[data-theme="executive"] .hamburger-btn:hover {
    background: linear-gradient(135deg, #2a2a2e 0%, #222226 100%);
    color: var(--eg);
    box-shadow: var(--skeuo-raised), var(--skeuo-gold-rim);
}

[data-theme="executive"] .page-title {
    color: var(--et-1);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-shadow:
        0 2px 8px rgba(0,0,0,0.9),
        0 0 20px rgba(201,168,76,0.08);
}

/* Search — carved inset field */
[data-theme="executive"] .search-wrap input {
    background:
        linear-gradient(180deg, #0f0f12 0%, #131316 100%);
    border: 1px solid var(--eb-gold-s);
    color: var(--et-1);
    box-shadow: var(--skeuo-inset);
    border-radius: 8px;
}

[data-theme="executive"] .search-wrap input:focus {
    border-color: var(--eg);
    box-shadow:
        var(--skeuo-inset),
        0 0 0 2px rgba(201,168,76,0.15),
        var(--skeuo-gold-rim);
    background: linear-gradient(180deg, #0d0d10 0%, #111114 100%);
}

[data-theme="executive"] .search-wrap input::placeholder { color: var(--et-4); }
[data-theme="executive"] .search-wrap .search-icon { color: var(--eg-d); }

/* ══════════════════════════════════════════════
   STAT CARDS — Pillowed raised plates with
   top-left light source & carved number recess
   ══════════════════════════════════════════════ */
[data-theme="executive"] .stat-card {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.008) 0px,
            rgba(255,255,255,0.008) 1px,
            transparent 1px,
            transparent 4px
        ),
        var(--exec-noise),
        linear-gradient(145deg,
            #30303a 0%,       /* top-left — light catch */
            #272730 15%,
            #202028 40%,
            #1a1a22 65%,
            #141418 85%,
            #0f0f12 100%);   /* bottom-right — deep shadow */
    border: 1px solid transparent;
    border-radius: 10px;
    /* Gradient border — not solid gold */
    background-clip: padding-box;
    outline: 1px solid rgba(201,168,76,0.45);
    outline-offset: -1px;
    box-shadow:
        /* === RAISED / PILLOWED === */
        /* ambient lift — soft large shadow */
        0 10px 40px rgba(0,0,0,0.80),
        /* contact shadow — tight dark */
        0 3px 8px  rgba(0,0,0,0.95),
        /* micro contact */
        0 1px 2px  rgba(0,0,0,1),
        /* top-left highlight — light source reflection */
        inset 1px 1px 0 rgba(255,255,255,0.12),
        inset 2px 2px 0 rgba(255,255,255,0.05),
        inset 3px 3px 0 rgba(255,255,255,0.02),
        /* bottom-right shadow — dual layer */
        inset -1px -1px 0 rgba(0,0,0,0.80),
        inset -2px -2px 0 rgba(0,0,0,0.50),
        /* gold rim glow */
        0 0 0 1px rgba(201,168,76,0.12),
        0 0 16px rgba(201,168,76,0.06);
    position: relative;
    overflow: hidden;
}

/* Top-left corner light catch — white reflection */
[data-theme="executive"] .stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 1px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 40%,
        transparent 100%);
    pointer-events: none;
}

/* Bottom-right deep shadow edge */
[data-theme="executive"] .stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 70%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,1) 100%);
    pointer-events: none;
}

[data-theme="executive"] .stat-card:hover {
    outline-color: rgba(201,168,76,0.75);
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.90),
        0 8px 20px  rgba(0,0,0,0.95),
        0 2px 4px   rgba(0,0,0,1),
        inset 1px 1px 0 rgba(255,255,255,0.15),
        inset 2px 2px 0 rgba(255,255,255,0.06),
        inset -1px -1px 0 rgba(0,0,0,0.85),
        inset -2px -2px 0 rgba(0,0,0,0.55),
        0 0 0 1px var(--eg),
        0 0 20px rgba(201,168,76,0.30),
        0 0 40px rgba(201,168,76,0.10);
}

[data-theme="executive"] .stat-label {
    color: var(--eg-d);
    letter-spacing: 2.2px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}

/* Stat number — carved recess glow effect */
[data-theme="executive"] .stat-number {
    /* Off-white / light cream — not pure white */
    color: #f0e8d8;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-shadow:
        /* carved inset: dark shadow above, light below */
        0 -1px 2px rgba(0,0,0,0.9),
        0  2px 4px rgba(0,0,0,0.7),
        /* inner glow — number glowing inside recess */
        0 0 12px rgba(201,168,76,0.18),
        0 0 24px rgba(201,168,76,0.08);
}

[data-theme="executive"] .stat-icon svg {
    color: var(--eg-d);
    opacity: 0.75;
    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,0.95))
        drop-shadow(0 0 10px rgba(201,168,76,0.22));
}

/* ══════════════════════════════════════════════
   TABLE CARD — Recessed panel carved into surface
   ══════════════════════════════════════════════ */
[data-theme="executive"] .table-card {
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.007) 0px,
            rgba(255,255,255,0.007) 1px,
            transparent 1px,
            transparent 4px
        ),
        var(--exec-noise),
        linear-gradient(180deg,
            #1e1e24 0%,
            #191920 35%,
            #141418 70%,
            #101012 100%);
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background-clip: padding-box;
    outline: 1px solid rgba(201,168,76,0.40);
    outline-offset: -1px;
    box-shadow:
        /* === RECESSED / CARVED === */
        /* dramatic outer drop — panel sits deep */
        0 16px 60px rgba(0,0,0,0.90),
        0 6px 20px  rgba(0,0,0,0.95),
        0 2px 6px   rgba(0,0,0,1),
        /* top-left inset shadow — carved top edge */
        inset 2px 2px 8px  rgba(0,0,0,0.80),
        inset 4px 4px 16px rgba(0,0,0,0.50),
        /* bottom-right inner highlight — carved bottom edge */
        inset -1px -1px 0 rgba(255,255,255,0.05),
        /* gradient gold rim glow */
        0 0 0 1px rgba(201,168,76,0.08),
        0 0 24px rgba(201,168,76,0.05);
    position: relative;
}

/* Top gradient gold seam */
[data-theme="executive"] .table-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,0.35) 15%,
        rgba(232,201,106,0.75) 40%,
        rgba(245,225,153,0.90) 50%,
        rgba(232,201,106,0.75) 60%,
        rgba(201,168,76,0.35) 85%,
        transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Table header — vertical brushed gold-to-dark-gold gradient */
[data-theme="executive"] .table-header,
[data-theme="executive"] .table-card thead th {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg,
            #3a3218 0%,     /* bright gold top */
            #2e2810 20%,
            #241f0c 45%,
            #1c1808 70%,
            #141206 100%    /* deep dark gold bottom */
        ) !important;
    color: var(--eg-l) !important;
    border-bottom: 1px solid transparent !important;
    /* Gradient border on header bottom */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(201,168,76,0.50),
        inset 0 -2px 0 rgba(201,168,76,0.15),
        0 3px 10px rgba(0,0,0,0.6) !important;
    letter-spacing: 2px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-shadow:
        0 1px 4px rgba(0,0,0,0.95),
        0 0 8px rgba(201,168,76,0.25) !important;
}

[data-theme="executive"] .table-card tbody tr {
    border-bottom: 1px solid rgba(201,168,76,0.06);
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="executive"] .table-card tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.015);
}

[data-theme="executive"] .table-card tbody tr:hover {
    background:
        linear-gradient(90deg,
            rgba(201,168,76,0.10) 0%,
            rgba(201,168,76,0.05) 40%,
            transparent 100%);
    box-shadow:
        inset 3px 0 0 var(--eg),
        inset 5px 0 12px rgba(201,168,76,0.14);
}

[data-theme="executive"] .table-card tbody td {
    /* Off-white cream — not pure white */
    color: #c8c0b0;
    border-bottom: 1px solid rgba(201,168,76,0.055);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

[data-theme="executive"] .table-card tbody td:first-child {
    color: #f0e8d8;
    font-weight: 600;
}

[data-theme="executive"] .table-summary {
    color: var(--et-3);
    border-top: 1px solid rgba(201,168,76,0.20);
    background: linear-gradient(180deg, #161618 0%, #111112 100%);
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Inline header overrides — same brushed gold gradient */
[data-theme="executive"] [style*="background:#002B5B"],
[data-theme="executive"] [style*="background: #002B5B"],
[data-theme="executive"] [style*="background:#4A90E2"],
[data-theme="executive"] [style*="background: #4A90E2"],
[data-theme="executive"] [style*="background:#1e3a5f"],
[data-theme="executive"] [style*="background: #1e3a5f"] {
    background:
        linear-gradient(180deg,
            #3a3218 0%,
            #241f0c 50%,
            #141206 100%) !important;
    color: var(--eg-l) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95) !important;
}

/* ══════════════════════════════════════════════
   CHART CARD — Same slab treatment
   ══════════════════════════════════════════════ */
[data-theme="executive"] .chart-card {
    background:
        var(--exec-noise),
        linear-gradient(180deg, #222226 0%, #181819 100%);
    border: 1px solid var(--eb-gold);
    border-radius: 10px;
    box-shadow:
        var(--skeuo-raised-deep),
        var(--skeuo-gold-rim);
    position: relative;
    overflow: hidden;
}

[data-theme="executive"] .chart-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,0.5) 20%,
        rgba(245,225,153,0.85) 50%,
        rgba(201,168,76,0.5) 80%,
        transparent 100%);
    pointer-events: none;
}

[data-theme="executive"] .chart-title {
    color: var(--eg-d);
    letter-spacing: 2.5px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ══════════════════════════════════════════════
   BUTTONS — Cast metal
   ══════════════════════════════════════════════ */

/* Primary / create button — deep matte charcoal with metallic gold border */
[data-theme="executive"] .btn-create {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.010) 0px,
            rgba(255,255,255,0.010) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg,
            #2e2e38 0%,
            #252530 40%,
            #1c1c26 70%,
            #141420 100%);
    color: var(--eg-l);
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 11px;
    /* Fine metallic gold border — gradient not solid */
    border: 1px solid transparent;
    background-clip: padding-box;
    outline: 1px solid rgba(201,168,76,0.60);
    outline-offset: -1px;
    border-radius: 7px;
    text-shadow:
        0 0 8px rgba(201,168,76,0.35),
        0 1px 3px rgba(0,0,0,0.9);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.75),
        0 1px 4px  rgba(0,0,0,0.95),
        inset 0 1px 0 rgba(255,255,255,0.09),
        inset 0 -1px 0 rgba(0,0,0,0.50),
        inset 1px 0 0 rgba(255,255,255,0.05),
        inset -1px 0 0 rgba(0,0,0,0.30),
        0 0 8px rgba(201,168,76,0.10);
}

[data-theme="executive"] .btn-create:hover {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg,
            #363640 0%,
            #2c2c38 40%,
            #22222e 70%,
            #1a1a24 100%);
    outline-color: rgba(201,168,76,0.85);
    color: var(--eg-ll);
    transform: translateY(-1px);
    box-shadow:
        0 6px 22px rgba(0,0,0,0.80),
        0 2px 6px  rgba(0,0,0,0.95),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 0 0 1px var(--eg),
        0 0 14px rgba(201,168,76,0.25),
        0 0 28px rgba(201,168,76,0.08);
}

[data-theme="executive"] .btn-create:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.8),
        inset 0 2px 6px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,255,255,0.06);
}

/* Submit button */
[data-theme="executive"] .btn-submit {
    background:
        linear-gradient(180deg,
            #d4b050 0%,
            #c9a84c 40%,
            #a8882a 100%);
    color: #0d0d10;
    font-weight: 800;
    border: 1px solid var(--eg-d);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}

[data-theme="executive"] .btn-submit:hover {
    background:
        linear-gradient(180deg, #e0c060 0%, #d4b050 40%, #b89030 100%);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.30),
        var(--skeuo-gold-active);
}

/* Cancel button — dark plate */
[data-theme="executive"] .btn-cancel {
    background:
        linear-gradient(180deg, #2c2c34 0%, #222228 50%, #1a1a1e 100%);
    color: var(--et-2);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        var(--skeuo-raised),
        inset 0 1px 0 rgba(255,255,255,0.07);
}

[data-theme="executive"] .btn-cancel:hover {
    background:
        linear-gradient(180deg, #34343e 0%, #28282e 50%, #202024 100%);
    color: var(--et-1);
    border-color: var(--eb-gold-s);
    box-shadow: var(--skeuo-raised), var(--skeuo-gold-rim);
}

/* Filter select — inset tray */
[data-theme="executive"] .filter-select {
    background:
        linear-gradient(180deg, #0f0f12 0%, #131316 100%);
    border: 1px solid var(--eb-gold-s);
    color: var(--et-1);
    border-radius: 8px;
    box-shadow: var(--skeuo-inset);
}

[data-theme="executive"] .filter-select:focus {
    border-color: var(--eg);
    box-shadow: var(--skeuo-inset), var(--skeuo-gold-rim);
}

[data-theme="executive"] .filter-select option {
    background: #1a1a1e;
    color: var(--et-1);
}

/* ══════════════════════════════════════════════
   MODAL — Vault door panel
   ══════════════════════════════════════════════ */
[data-theme="executive"] .modal-overlay {
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(4px);
}

[data-theme="executive"] .modal-box {
    background:
        var(--exec-noise),
        linear-gradient(160deg,
            #28282e 0%,
            #202024 40%,
            #1a1a1e 100%);
    border: 1px solid var(--eb-gold);
    border-radius: 12px;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.95),
        0 10px 30px rgba(0,0,0,0.8),
        inset 1px 1px 0 rgba(255,255,255,0.08),
        inset -1px -1px 0 rgba(0,0,0,0.7),
        var(--skeuo-gold-active);
    position: relative;
    overflow: hidden;
}

[data-theme="executive"] .modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,0.5) 20%,
        rgba(245,225,153,0.9) 50%,
        rgba(201,168,76,0.5) 80%,
        transparent 100%);
    pointer-events: none;
}

[data-theme="executive"] .modal-header {
    background:
        var(--exec-noise),
        linear-gradient(180deg, #2e2a18 0%, #221e0e 100%);
    color: var(--eg-l);
    border-bottom: 1px solid var(--eb-gold);
    letter-spacing: 1.5px;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px rgba(201,168,76,0.2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 2px 8px rgba(0,0,0,0.5);
}

[data-theme="executive"] .modal-footer {
    border-top: 1px solid var(--eb-gold-s);
    background: linear-gradient(180deg, #1a1a1e 0%, #141416 100%);
}

[data-theme="executive"] .form-group label {
    color: var(--eg-d);
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

[data-theme="executive"] .form-group input,
[data-theme="executive"] .form-group select,
[data-theme="executive"] .form-group textarea {
    background: linear-gradient(180deg, #0f0f12 0%, #131316 100%);
    border: 1px solid var(--eb-gold-s);
    color: var(--et-1);
    box-shadow: var(--skeuo-inset);
}

[data-theme="executive"] .form-group input:focus,
[data-theme="executive"] .form-group select:focus,
[data-theme="executive"] .form-group textarea:focus {
    border-color: var(--eg);
    box-shadow: var(--skeuo-inset), var(--skeuo-gold-rim);
    outline: none;
}

[data-theme="executive"] .form-group input::placeholder,
[data-theme="executive"] .form-group textarea::placeholder { color: var(--et-4); }
[data-theme="executive"] .form-group select option { background: #1a1a1e; }

/* ══════════════════════════════════════════════
   STATUS BADGES — Domed convex resin seals
   ══════════════════════════════════════════════ */
[data-theme="executive"] .status-badge,
[data-theme="executive"] [class*="status-"] {
    /* Convex dome: bright center fading to darker edges */
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%,
            rgba(201,168,76,0.28) 0%,
            rgba(201,168,76,0.14) 50%,
            rgba(201,168,76,0.05) 100%) !important;
    color: var(--eg-ll) !important;
    border: 1px solid var(--eb-gold) !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    font-size: 10px !important;
    text-shadow:
        0 0 8px rgba(201,168,76,0.50),
        0 1px 3px rgba(0,0,0,0.8) !important;
    box-shadow:
        /* outer lift — dome sits above surface */
        0 3px 10px rgba(0,0,0,0.70),
        0 1px 3px  rgba(0,0,0,0.90),
        /* top highlight — convex light catch */
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 1px 0 0 rgba(255,255,255,0.08),
        /* bottom shadow — dome curves away */
        inset 0 -1px 0 rgba(0,0,0,0.50),
        /* soft inner gold glow — resin backlit */
        inset 0 0 8px  rgba(201,168,76,0.18),
        inset 0 0 16px rgba(201,168,76,0.08),
        /* outer gold halo */
        0 0 6px  rgba(201,168,76,0.20),
        0 0 14px rgba(201,168,76,0.08) !important;
}

[data-theme="executive"] .status-dot.open {
    background: var(--eg) !important;
    box-shadow:
        0 0 6px  rgba(201,168,76,0.70),
        0 0 12px rgba(201,168,76,0.35) !important;
}
[data-theme="executive"] .status-dot.closed { background: var(--et-3) !important; box-shadow: none !important; }
[data-theme="executive"] .status-dot.draft  { background: var(--et-4) !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════
   3-DOT ACTION MENU
   ══════════════════════════════════════════════ */
[data-theme="executive"] .job-actions-btn {
    color: var(--et-3);
    border-radius: 6px;
}

[data-theme="executive"] .job-actions-btn:hover {
    background: linear-gradient(135deg, #2a2a30 0%, #222226 100%);
    color: var(--eg);
    box-shadow: var(--skeuo-raised), var(--skeuo-gold-rim);
}

[data-theme="executive"] .job-actions-dropdown {
    background:
        var(--exec-noise),
        linear-gradient(180deg, #252528 0%, #1e1e22 100%);
    border: 1px solid var(--eb-gold);
    border-radius: 8px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.9),
        0 4px 12px rgba(0,0,0,0.8),
        inset 1px 1px 0 rgba(255,255,255,0.06),
        var(--skeuo-gold-rim);
}

[data-theme="executive"] .job-actions-dropdown button {
    color: var(--et-2);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

[data-theme="executive"] .job-actions-dropdown button:hover {
    background: linear-gradient(90deg,
        rgba(201,168,76,0.10) 0%,
        rgba(201,168,76,0.04) 100%);
    color: var(--eg-l);
}

[data-theme="executive"] .job-actions-dropdown button.action-delete { color: #cc4444; }
[data-theme="executive"] .job-actions-dropdown button.action-delete:hover {
    background: rgba(180,40,40,0.10);
    color: #ff6666;
}

/* ══════════════════════════════════════════════
   SIDEBAR DROPDOWNS (notif, user)
   ══════════════════════════════════════════════ */
[data-theme="executive"] #sidebarNotificationDropdown,
[data-theme="executive"] #sidebarUserDropdown {
    background:
        var(--exec-noise),
        linear-gradient(180deg, #252528 0%, #1e1e22 100%) !important;
    border: 1px solid var(--eb-gold) !important;
    border-radius: 10px !important;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.9),
        inset 1px 1px 0 rgba(255,255,255,0.06),
        var(--skeuo-gold-rim) !important;
}

[data-theme="executive"] #sidebarNotificationDropdown > div:first-child,
[data-theme="executive"] #sidebarUserDropdown > div:first-child {
    background: linear-gradient(180deg, #2e2a18 0%, #221e0e 100%) !important;
    border-bottom: 1px solid var(--eb-gold) !important;
    color: var(--eg-l) !important;
}

[data-theme="executive"] .notif-item {
    background: transparent !important;
    border-bottom-color: rgba(201,168,76,0.08) !important;
    color: var(--et-2) !important;
}

[data-theme="executive"] .notif-item:hover {
    background: linear-gradient(90deg,
        rgba(201,168,76,0.08) 0%,
        transparent 100%) !important;
}

/* ══════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════ */
[data-theme="executive"] .tab-btn {
    color: var(--et-3);
    border-bottom: 2px solid transparent;
}

[data-theme="executive"] .tab-btn.active {
    color: var(--eg-l);
    border-bottom-color: var(--eg);
    text-shadow: 0 0 8px rgba(201,168,76,0.3);
}

/* ══════════════════════════════════════════════
   DARK MODE TOGGLE — Gold yin-yang
   ══════════════════════════════════════════════ */
[data-theme="executive"] .dark-toggle-btn {
    background: none;
    border: none;
    box-shadow: none;
}

[data-theme="executive"] #dmDarkHalf  { fill: #c9a84c; }
[data-theme="executive"] #dmLightHalf { fill: #2a2820; }
[data-theme="executive"] #dmDarkDot   { fill: #c9a84c; }
[data-theme="executive"] #dmLightDot  { fill: #2a2820; }
[data-theme="executive"] #dmDarkHalf,
[data-theme="executive"] #dmDarkDot {
    filter: drop-shadow(0 0 6px rgba(201,168,76,1));
}
[data-theme="executive"] #dmLightHalf,
[data-theme="executive"] #dmLightDot { filter: none; }

/* ══════════════════════════════════════════════
   INLINE STYLE OVERRIDES — all light/white bgs
   ══════════════════════════════════════════════ */
[data-theme="executive"] [style*="background:white"],
[data-theme="executive"] [style*="background: white"],
[data-theme="executive"] [style*="background:#fff"],
[data-theme="executive"] [style*="background: #fff"],
[data-theme="executive"] [style*="background:#ffffff"],
[data-theme="executive"] [style*="background: #ffffff"],
[data-theme="executive"] [style*="background:#f9f9f9"],
[data-theme="executive"] [style*="background: #f9f9f9"],
[data-theme="executive"] [style*="background:#f5f5f5"],
[data-theme="executive"] [style*="background: #f5f5f5"],
[data-theme="executive"] [style*="background:#f8fafc"],
[data-theme="executive"] [style*="background: #f8fafc"],
[data-theme="executive"] [style*="background:#f4f4f4"],
[data-theme="executive"] [style*="background: #f4f4f4"],
[data-theme="executive"] [style*="background:#f0fdf4"],
[data-theme="executive"] [style*="background: #f0fdf4"],
[data-theme="executive"] [style*="background:#fef2f2"],
[data-theme="executive"] [style*="background: #fef2f2"],
[data-theme="executive"] [style*="background:#fff7ed"],
[data-theme="executive"] [style*="background: #fff7ed"],
[data-theme="executive"] [style*="background:#faf5ff"],
[data-theme="executive"] [style*="background: #faf5ff"],
[data-theme="executive"] [style*="background:#dcfce7"],
[data-theme="executive"] [style*="background: #dcfce7"],
[data-theme="executive"] [style*="background:#fffbeb"],
[data-theme="executive"] [style*="background: #fffbeb"] {
    background: linear-gradient(180deg, #222226 0%, #1c1c20 100%) !important;
    border-color: var(--eb-gold-s) !important;
}

[data-theme="executive"] [style*="color:#333"],
[data-theme="executive"] [style*="color: #333"],
[data-theme="executive"] [style*="color:#111"],
[data-theme="executive"] [style*="color: #111"],
[data-theme="executive"] [style*="color:#000"],
[data-theme="executive"] [style*="color: #000"],
[data-theme="executive"] [style*="color:#002B5B"],
[data-theme="executive"] [style*="color: #002B5B"] { color: var(--et-1) !important; }

[data-theme="executive"] [style*="color:#4A90E2"],
[data-theme="executive"] [style*="color: #4A90E2"],
[data-theme="executive"] [style*="color:#16a34a"],
[data-theme="executive"] [style*="color: #16a34a"],
[data-theme="executive"] [style*="color:#dc2626"],
[data-theme="executive"] [style*="color: #dc2626"],
[data-theme="executive"] [style*="color:#d97706"],
[data-theme="executive"] [style*="color: #d97706"],
[data-theme="executive"] [style*="color:#7c3aed"],
[data-theme="executive"] [style*="color: #7c3aed"],
[data-theme="executive"] [style*="color:#2563eb"],
[data-theme="executive"] [style*="color: #2563eb"] { color: var(--eg) !important; }

[data-theme="executive"] [style*="color:#888"],
[data-theme="executive"] [style*="color: #888"],
[data-theme="executive"] [style*="color:#64748b"],
[data-theme="executive"] [style*="color: #64748b"],
[data-theme="executive"] [style*="color:#999"],
[data-theme="executive"] [style*="color: #999"] { color: var(--et-3) !important; }

[data-theme="executive"] [style*="border:1px solid #e5e5e5"],
[data-theme="executive"] [style*="border:1px solid #e5e7eb"],
[data-theme="executive"] [style*="border:1px solid #e0e0e0"],
[data-theme="executive"] [style*="border:1px solid #e2e8f0"],
[data-theme="executive"] [style*="border:1px solid #bbf7d0"],
[data-theme="executive"] [style*="border:1px solid #fecaca"],
[data-theme="executive"] [style*="border:1px solid #fed7aa"],
[data-theme="executive"] [style*="border:1px solid #e9d5ff"],
[data-theme="executive"] [style*="border-bottom:1px solid #e5e5e5"],
[data-theme="executive"] [style*="border-bottom:1px solid #f0f0f0"] {
    border-color: var(--eb-gold-s) !important;
}

/* Inline colored dot spans (performance summary) */
[data-theme="executive"] [style*="background:#16a34a"],
[data-theme="executive"] [style*="background: #16a34a"],
[data-theme="executive"] [style*="background:#2563eb"],
[data-theme="executive"] [style*="background: #2563eb"],
[data-theme="executive"] [style*="background:#dc2626"],
[data-theme="executive"] [style*="background: #dc2626"] {
    background: var(--eg-d) !important;
    box-shadow: 0 0 4px rgba(201,168,76,0.4) !important;
}

/* ══════════════════════════════════════════════
   SKELETON — Executive shimmer
   ══════════════════════════════════════════════ */
[data-theme="executive"] .skeleton-line {
    background: linear-gradient(90deg,
        #1e1e24 25%,
        #2e2a18 50%,
        #1e1e24 75%);
    background-size: 600px 100%;
}

[data-theme="executive"] .skeleton-table-card {
    background: linear-gradient(180deg, #222226 0%, #181819 100%);
    border: 1px solid var(--eb-gold);
    box-shadow: var(--skeuo-raised-deep), var(--skeuo-gold-rim);
}

[data-theme="executive"] .skeleton-table-header {
    background: linear-gradient(180deg, #2e2a18 0%, #1e1a0a 100%);
}