:root {
      --accent:        #3b82f6;
      --accent-light:  #60a5fa;
      --accent-dim:    rgba(59,130,246,0.12);
      --accent-glow:   rgba(59,130,246,0.35);
      --bg-base:       #050d1c;
      --bg-sidebar:    #080f1e;
      --bg-card:       #0e1c30;
      --bg-row:        #091628;
      --bg-hover:      #102035;
      --border:        #1a2e48;
      --text-primary:  #e2e8f0;
      --text-muted:    #94a3b8;
      --text-faint:    #475569;
    }
    /* Role themes */
    body.role-client   { --accent:#3b82f6; --accent-light:#60a5fa; --accent-dim:rgba(59,130,246,0.12); --accent-glow:rgba(59,130,246,0.3); }
    body.role-staff    { --accent:#0d9488; --accent-light:#2dd4bf; --accent-dim:rgba(13,148,136,0.12); --accent-glow:rgba(13,148,136,0.3); }
    body.role-admin    { --accent:#7c3aed; --accent-light:#a78bfa; --accent-dim:rgba(124,58,237,0.12); --accent-glow:rgba(124,58,237,0.3); }
    body.role-superhead{ --accent:#d97706; --accent-light:#fbbf24; --accent-dim:rgba(217,119,6,0.12);  --accent-glow:rgba(217,119,6,0.3); }

    * { font-family:'Inter',sans-serif; box-sizing:border-box; }
    body { background:var(--bg-base); color:var(--text-primary); margin:0; padding:0; min-height:100vh; display:flex; -webkit-user-select:none; user-select:none; }
    input,textarea,select { user-select:text; -webkit-user-select:text; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width:5px; height:5px; }
    ::-webkit-scrollbar-track { background:var(--bg-base); }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--accent); }

    /* ── Sidebar ── */
    #sidebar {
      width: 228px; min-width:228px;
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      position: fixed; top:0; left:0; bottom:0;
      z-index: 100;
      transition: transform 0.25s ease;
    }
    #sidebar .sidebar-logo {
      padding: 1.25rem 1rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items:center; gap:0.75rem;
    }
    #sidebar .logo-mark {
      width:38px; height:38px; border-radius:10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:1rem; color:white; letter-spacing:0.02em;
      flex-shrink:0;
    }
    #sidebar .logo-text { font-weight:700; font-size:1rem; color:var(--text-primary); line-height:1.2; }
    #sidebar .logo-sub  { font-size:0.65rem; color:var(--text-faint); font-weight:400; }

    .sidebar-section { padding: 0.75rem 0.5rem 0; }
    .sidebar-section-label { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); padding:0 0.5rem 0.4rem; }

    .nav-item {
      display:flex; align-items:center; gap:0.625rem;
      padding:0.5rem 0.75rem; border-radius:8px;
      color:var(--text-muted); font-size:0.82rem; font-weight:500;
      text-decoration:none; transition:all 0.18s; margin:1px 0;
      cursor:pointer;
    }
    .nav-item:hover { background:var(--accent-dim); color:var(--text-primary); }
    .nav-item.active {
      background:var(--accent-dim);
      color:var(--accent-light);
      border-left:2px solid var(--accent);
      padding-left:calc(0.75rem - 2px);
    }
    .nav-item svg { width:16px; height:16px; flex-shrink:0; opacity:0.8; }
    .nav-item.active svg { opacity:1; }

    .sidebar-footer {
      margin-top:auto;
      padding: 0.75rem 0.75rem 1rem;
      border-top: 1px solid var(--border);
    }
    .sidebar-user { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
    .sidebar-avatar {
      width:32px; height:32px; border-radius:8px;
      background:var(--accent-dim);
      display:flex; align-items:center; justify-content:center;
      font-weight:700; font-size:0.8rem; color:var(--accent-light);
      flex-shrink:0;
    }
    .sidebar-name { font-size:0.8rem; font-weight:600; color:var(--text-primary); line-height:1.2; }
    .sidebar-role {
      font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
      color:var(--accent-light); opacity:0.9;
    }

    /* ── Main content ── */
    #main-wrapper { margin-left:228px; flex:1; display:flex; flex-direction:column; min-height:100vh; min-width:0; }
    #topbar {
      background:var(--bg-sidebar); border-bottom:1px solid var(--border);
      padding:0.6rem 1.5rem; display:flex; align-items:center; justify-content:between;
      position:sticky; top:0; z-index:50;
      gap:1rem;
    }
    .topbar-inner { display:flex; align-items:center; justify-content:space-between; width:100%; }

    #content { flex:1; padding:0; }

    /* ── Cards ── */
    .card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:14px; overflow:hidden;
    }
    .card-body { padding:1.25rem; }

    /* ── Stat cards ── */
    .stat-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:14px; padding:1.25rem;
      position:relative; overflow:hidden;
      transition:all 0.2s;
    }
    .stat-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,var(--accent),var(--accent-light));
    }
    .stat-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px var(--accent-glow); }
    .stat-label { font-size:0.7rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:0.5rem; }
    .stat-value { font-size:1.75rem; font-weight:800; line-height:1; color:var(--text-primary); }
    .stat-value.accent { color:var(--accent-light); }
    .stat-icon {
      position:absolute; top:1rem; right:1rem;
      width:38px; height:38px; border-radius:10px;
      background:var(--accent-dim);
      display:flex; align-items:center; justify-content:center;
    }
    .stat-icon svg { width:18px; height:18px; color:var(--accent-light); stroke:var(--accent-light); }

    /* ── Gradient badge ── */
    .role-pill {
      font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
      padding:0.25rem 0.65rem; border-radius:20px;
      background:var(--accent-dim); color:var(--accent-light);
      border:1px solid var(--accent);
    }

    /* ── Buttons ── */
    .btn-primary { background:var(--accent); color:white; border:none; padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.4rem; }
    .btn-primary:hover { filter:brightness(1.15); box-shadow:0 4px 14px var(--accent-glow); transform:translateY(-1px); }
    .btn-secondary { background:transparent; color:var(--text-muted); border:1px solid var(--border); padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; }
    .btn-secondary:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--accent); }
    .btn-danger  { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.25); padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.4rem; }
    .btn-danger:hover  { background:rgba(239,68,68,0.2); }
    .btn-success { background:rgba(16,185,129,0.1); color:#34d399; border:1px solid rgba(16,185,129,0.25); padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.4rem; }
    .btn-success:hover { background:rgba(16,185,129,0.2); }
    .btn-warning { background:rgba(245,158,11,0.1); color:#fbbf24; border:1px solid rgba(245,158,11,0.25); padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.4rem; }
    .btn-warning:hover { background:rgba(245,158,11,0.2); }
    .btn-sm { padding:0.3rem 0.7rem; font-size:0.75rem; border-radius:6px; }

    /* ── Inputs ── */
    .input-field { background:var(--bg-row); border:1px solid var(--border); color:var(--text-primary); border-radius:8px; padding:0.5rem 0.75rem; font-size:0.875rem; width:100%; transition:border-color 0.2s, box-shadow 0.2s; }
    .input-field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
    .input-field option { background:#0d1829; }
    .filter-label { display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-faint); margin-bottom:0.35rem; }

    /* ── Table ── */
    table { border-collapse:separate; border-spacing:0; width:100%; }
    thead th { background:var(--bg-row); color:var(--text-primary); font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:0.7rem 1rem; border-bottom:2px solid var(--accent); white-space:nowrap; }
    tbody tr { border-bottom:1px solid #0f1d2d; transition:background 0.13s; }
    tbody tr:hover { background:var(--bg-hover); }
    tbody td { padding:0.65rem 1rem; font-size:0.8rem; color:#cbd5e1; white-space:nowrap; }

    /* ── Badges ── */
    .badge { display:inline-block; padding:0.18rem 0.55rem; border-radius:5px; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
    .badge-open        { background:rgba(59,130,246,0.15); color:#60a5fa; }
    .badge-in_progress { background:rgba(245,158,11,0.15); color:#fbbf24; }
    .badge-resolved    { background:rgba(16,185,129,0.15); color:#34d399; }
    .badge-closed      { background:rgba(100,116,139,0.15); color:#94a3b8; }
    .badge-pending     { background:rgba(245,158,11,0.15); color:#fbbf24; }
    .badge-approved    { background:rgba(16,185,129,0.15); color:#34d399; }
    .badge-rejected    { background:rgba(239,68,68,0.15); color:#f87171; }
    .badge-low         { background:rgba(100,116,139,0.15); color:#94a3b8; }
    .badge-normal      { background:rgba(59,130,246,0.15); color:#60a5fa; }
    .badge-high        { background:rgba(245,158,11,0.15); color:#fbbf24; }
    .badge-urgent      { background:rgba(239,68,68,0.15); color:#f87171; }
    .badge-ce { background:rgba(59,130,246,0.15); color:#60a5fa; }
    .badge-pe { background:rgba(167,139,250,0.15); color:#a78bfa; }
    .badge-eo { background:rgba(251,191,36,0.12); color:#fbbf24; }
    .badge-io { background:rgba(16,185,129,0.12); color:#34d399; }

    /* ── Colors ── */
    .profit { color:#34d399; } .loss { color:#f87171; } .neutral { color:#94a3b8; }
    .gradient-text { background:linear-gradient(135deg,var(--accent),var(--accent-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    /* ── Status dots ── */
    .dot-green  { width:9px; height:9px; background:#34d399; border-radius:50%; display:inline-block; box-shadow:0 0 6px #34d399; }
    .dot-yellow { width:9px; height:9px; background:#fbbf24; border-radius:50%; display:inline-block; box-shadow:0 0 6px #fbbf24; }
    .dot-red    { width:9px; height:9px; background:#f87171; border-radius:50%; display:inline-block; box-shadow:0 0 6px #f87171; animation:pulse-red 1.4s infinite; }
    @keyframes pulse-red { 0%,100%{opacity:1;box-shadow:0 0 4px #f87171;} 50%{opacity:0.45;box-shadow:0 0 10px #f87171;} }

    /* ── Alerts ── */
    .alert { padding:0.75rem 1rem; border-radius:10px; margin-bottom:0.75rem; font-size:0.85rem; display:flex; align-items:flex-start; gap:0.5rem; }
    .alert-success { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.3); color:#34d399; }
    .alert-error   { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#f87171; }
    .alert-info    { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.3); color:#60a5fa; }
    .alert-warning { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); color:#fbbf24; }

    /* ── Section header ── */
    .section-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
    .section-title { font-size:0.875rem; font-weight:700; color:var(--text-primary); }

    /* ── Page header ── */
    .page-header { margin-bottom:1.75rem; }
    .page-title { font-size:1.5rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; }
    .page-sub { font-size:0.8rem; color:var(--text-faint); margin-top:0.2rem; }

    /* ── Announcement banner ── */
    .ann-bar { padding:0.55rem 1.5rem; font-size:0.8rem; display:flex; align-items:center; gap:0.6rem; border-bottom:1px solid var(--border); }
    .ann-pinned  { background:rgba(245,158,11,0.1); color:#fbbf24; }
    .ann-regular { background:rgba(59,130,246,0.08); color:#93c5fd; }

    /* ── Pagination ── */
    .pagination-btn { background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); padding:0.35rem 0.7rem; border-radius:6px; font-size:0.8rem; cursor:pointer; transition:all 0.2s; }
    .pagination-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
    .pagination-btn.active { background:var(--accent); border-color:var(--accent); color:white; }
    .pagination-btn:disabled { opacity:0.35; cursor:not-allowed; }

    /* ── Sort ── */
    .sort-icon::after { content:' ⇅'; opacity:0.35; font-size:0.65em; }
    .sort-asc::after  { content:' ↑'; opacity:1; color:var(--accent-light); }
    .sort-desc::after { content:' ↓'; opacity:1; color:var(--accent-light); }

    /* ── Column filter (Excel-style) ── */
    tr.cf-hide { display:none !important; }
    thead th { position:relative; }
    .filter-funnel {
      display:inline-block; margin-left:0.3rem; cursor:pointer;
      font-size:0.85em; line-height:1; opacity:0.3; vertical-align:middle;
      transition:opacity 0.15s, color 0.15s; color:var(--text-muted);
    }
    .filter-funnel:hover { opacity:0.8; color:var(--text-primary); }
    .filter-funnel.active { opacity:1; color:var(--accent-light); }
    .table-filter-pop {
      position:fixed; z-index:9998; width:240px;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,0.55);
      display:flex; flex-direction:column; max-height:360px; overflow:hidden;
      font-weight:400; text-transform:none; letter-spacing:normal;
    }
    .table-filter-pop .tf-search {
      padding:0.5rem; border-bottom:1px solid var(--border);
    }
    .table-filter-pop .tf-search input {
      width:100%; background:var(--bg-row); border:1px solid var(--border);
      color:var(--text-primary); border-radius:6px; padding:0.35rem 0.5rem;
      font-size:0.78rem;
    }
    .table-filter-pop .tf-search input:focus { outline:none; border-color:var(--accent); }
    .table-filter-pop .tf-list { overflow-y:auto; padding:0.25rem; flex:1; }
    .table-filter-pop label {
      display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0.45rem;
      border-radius:5px; font-size:0.78rem; color:var(--text-primary);
      cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .table-filter-pop label:hover { background:var(--bg-hover); }
    .table-filter-pop label.tf-all { font-weight:600; border-bottom:1px solid var(--border); border-radius:0; }
    .table-filter-pop input[type=checkbox] { accent-color:var(--accent); flex-shrink:0; }
    .table-filter-pop .tf-foot {
      display:flex; justify-content:space-between; align-items:center;
      padding:0.45rem 0.6rem; border-top:1px solid var(--border);
      font-size:0.7rem; color:var(--text-faint); gap:0.5rem;
    }
    .table-filter-pop .tf-foot button {
      background:none; border:none; color:var(--accent-light); cursor:pointer;
      font-size:0.72rem; font-weight:600; padding:0.15rem 0.3rem; border-radius:4px;
    }
    .table-filter-pop .tf-foot button:hover { background:var(--accent-dim); }

    /* ── Hamburger (mobile) ── */
    #menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:0.25rem; }
    @media (max-width:768px) {
      #sidebar { transform:translateX(-100%); }
      #sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,0.6); }
      #main-wrapper { margin-left:0 !important; }
      #menu-toggle { display:flex; }
    }

    /* ── Idle screen guard (60s of no input) ── */
    #focusGuard { display:none; position:fixed; inset:0; z-index:99999; background:var(--bg-base); align-items:center; justify-content:center; flex-direction:column; gap:12px; }
    #focusGuard.active { display:flex; }

    /* ── Session lock (120s of no input) — preserves underlying page state.
       Sits ABOVE focusGuard, doesn't auto-dismiss on mouse move; only a
       successful password unlock removes it. ── */
    #sessionLock { display:none; position:fixed; inset:0; z-index:100000;
      background:rgba(2,6,23,0.96); backdrop-filter:blur(6px);
      align-items:center; justify-content:center; }
    #sessionLock.active { display:flex; }
    #sessionLock .lock-card { background:var(--bg-card); border:1px solid var(--border);
      border-radius:14px; padding:1.75rem 2rem; width:min(92vw,380px);
      box-shadow:0 24px 60px rgba(0,0,0,0.7); }
    #sessionLock h2 { color:var(--text-primary); font-size:1.05rem; font-weight:700;
      margin-bottom:0.4rem; display:flex; align-items:center; gap:0.5rem; }
    #sessionLock .lock-user { color:var(--accent-light); font-size:0.85rem;
      font-weight:600; margin-bottom:0.25rem; }
    #sessionLock .lock-hint { color:var(--text-faint); font-size:0.78rem;
      margin-bottom:1rem; line-height:1.45; }
    #sessionLock input[type=password] { width:100%; padding:0.65rem 0.85rem;
      background:rgba(15,23,42,0.6); border:1.5px solid var(--border);
      border-radius:8px; color:var(--text-primary); font-size:0.95rem;
      margin-bottom:0.6rem; }
    #sessionLock input[type=password]:focus { outline:none; border-color:var(--accent-light); }
    #sessionLock button { width:100%; padding:0.65rem; background:var(--accent);
      color:#fff; border:none; border-radius:8px; font-weight:700;
      font-size:0.9rem; cursor:pointer; }
    #sessionLock button:hover { background:var(--accent-light); }
    #sessionLock .lock-error { color:#f87171; font-size:0.78rem; margin-top:0.5rem;
      min-height:1em; font-weight:600; }
    #sessionLock .lock-foot { display:flex; justify-content:space-between;
      align-items:center; margin-top:0.85rem; font-size:0.72rem; color:var(--text-faint); }
    #sessionLock .lock-foot a { color:var(--text-muted); text-decoration:underline;
      text-underline-offset:2px; }
    #sessionLock .lock-foot a:hover { color:#f87171; }

    /* ── Notification bell + dropdown (top-right of every page) ── */
    #notifWrap     { position:relative; }
    #notifBell     { background:none; border:none; cursor:pointer; padding:0.3rem 0.45rem;
                     color:var(--text-muted); position:relative; display:flex; align-items:center;
                     border-radius:6px; transition:background 0.15s, color 0.15s; }
    #notifBell:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
    #notifBell svg { width:18px; height:18px; }
    #notifBadge    { position:absolute; top:-2px; right:-2px; background:#f87171; color:white;
                     font-size:0.58rem; font-weight:700; padding:0.05rem 0.32rem; border-radius:10px;
                     min-width:14px; line-height:1.2; text-align:center; box-shadow:0 0 0 2px var(--bg-base,#0a0e1a); }
    #notifPanel    { position:absolute; top:calc(100% + 0.45rem); right:0; width:380px; max-width:92vw;
                     background:var(--bg-card,#0f172a); border:1px solid var(--border,#1e293b);
                     border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,0.5); z-index:9999;
                     display:flex; flex-direction:column; max-height:480px; overflow:hidden; }
    #notifPanel[hidden] { display:none; }
    #notifPanel .notif-head { display:flex; justify-content:space-between; align-items:center;
                              padding:0.7rem 0.85rem; border-bottom:1px solid var(--border);
                              background:rgba(15,23,42,0.6); }
    #notifPanel .notif-head h3 { font-size:0.85rem; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:0.4rem; }
    #notifPanel .notif-head button { font-size:0.7rem; color:var(--text-muted); background:none;
                                     border:none; cursor:pointer; padding:0.2rem 0.5rem;
                                     border-radius:4px; }
    #notifPanel .notif-head button:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }
    #notifPanel .notif-body { padding:0.45rem; overflow-y:auto; display:flex; flex-direction:column; gap:0.35rem; }
    #notifPanel .notif-item { display:flex; align-items:flex-start; gap:0.55rem;
                              padding:0.5rem 0.65rem; border-radius:6px; text-decoration:none;
                              background:rgba(15,23,42,0.4); transition:background 0.15s; }
    #notifPanel .notif-item:hover { background:rgba(15,23,42,0.85); }
    #notifPanel .notif-item .body { flex:1; min-width:0; }
    #notifPanel .notif-item .title { font-size:0.78rem; color:var(--text-primary); font-weight:600; line-height:1.35; }
    #notifPanel .notif-item .detail { font-size:0.68rem; color:var(--text-muted); margin-top:0.2rem; line-height:1.4; }
    #notifPanel .notif-item .when { font-size:0.62rem; color:var(--text-faint); white-space:nowrap; padding-top:0.15rem; }
    #notifPanel .notif-empty { padding:1.5rem 1rem; text-align:center; color:var(--text-faint); font-size:0.78rem; }

    /* ── Print protection ── */
    @media print { body * { visibility:hidden !important; } body::after { visibility:visible !important; content:'Printing is disabled for BrokerDesk.'; display:block; text-align:center; font-size:24px; margin-top:40vh; color:#333; } }

    /* ── Upload drop zone ── */
    .drop-zone { border:2px dashed var(--border); border-radius:12px; padding:2rem; text-align:center; transition:all 0.2s; cursor:pointer; }
    .drop-zone:hover, .drop-zone.dragover { border-color:var(--accent); background:var(--accent-dim); }