/* ── KAVEX BRAND TYPEFACE ── */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

  :root {
    /* ── KAVEX LOCKED BRAND COLOURS ── */
    /* Brand primaries */
    --brand-primary:      #0E1E3B;      /* Ink Navy */
    --brand-accent:       #2F6BFF;      /* Primary Blue -- brand pack 2026-10-03 */
    --brand-accent-hover: #2456D6;      /* Primary Blue hover */

    /* BRAG status colours (v2  -  aligned to brand pack 2026-10-03) */
    --success: #22B573;    /* On Track / Complete -- brand green */
    --warning: #E0A83B;    /* At Risk -- brand amber/gold */
    --danger:  #EF4444;    /* Delayed / Critical */
    --info:    #2F6BFF;    /* Information / Complete Blue */

    /* Node brand colours (v1  -  for illustrations/icon mark only) */
    --node-green: #22B573;
    --node-gold:  #E0A83B;
    --node-coral: #F0563B;
    --node-blue:  #2F6BFF;

    /* Sidebar / dark nav background */
    --sidebar-bg: #0E1E3B;

    /* Accent aliases (used by empty-state-cta and other components) */
    --accent:       #2F6BFF;
    --accent-hover: #2456D6;

    /* Deep navy  -  clearly stepped surfaces for readability */
    --bg-primary:  #0f1a2e;   /* pane bodies (deep navy) */
    --bg-card:     #17273f;   /* cards  -  clear step up from primary */
    --bg-surface:  #20344f;   /* elevated surfaces */
    --bg-elevated: #2b4666;   /* most elevated / hover */

    /* Legacy aliases (keep for existing code) */
    --navy:        #17273f;
    --navy-dark:   #0a1326;   /* sidebar stays darkest */
    --navy-light:  #2b4666;

    /* Brand Blue -- locked to brand pack */
    --blue:        #2F6BFF;
    --blue-light:  #A5BFFF;   /* lightened brand blue for text on dark backgrounds */
    --blue-pale:   rgba(47,107,255,.14);
    --indigo:      #2F6BFF;
    --indigo-light:#A5BFFF;
    --indigo-pale: rgba(47,107,255,.14);

    /* Semantic colours -- aligned to brand palette */
    --green:       #22B573;
    --green-pale:  rgba(34,181,115,.13);
    --amber:       #E0A83B;
    --amber-pale:  rgba(224,168,59,.13);
    --red:         #ef4444;
    --red-pale:    rgba(239,68,68,.13);
    --purple:      #a855f7;
    --purple-pale: rgba(168,85,247,.13);

    /* BRAG status  -  info/complete blue matches brand blue */
    --brag-blue:   #2F6BFF;
    --brag-blue-pale: rgba(47,107,255,.13);

    /* Engineer view surfaces  -  one step darker than --bg-primary */
    --bg-deep:     #0c1525;
    --bg-deeper:   #090f1a;

    /* Text -- brand muted token for dark mode */
    --text:        #F4F6FA;   /* brand cloud -- high contrast on navy */
    --text-muted:  #B7C3D5;   /* brand dark muted ~5.5:1 on card bg */

    /* Borders -- subtle on dark surfaces, brand-aligned navy tint */
    --border:      rgba(51,70,96,.55);
    --border-strong: rgba(51,70,96,.9);

    /* Misc */
    --slate:       #64748b;
    --slate-light: rgba(255,255,255,.05);
    --white:       #17273f;
    --radius:      8px;
    --shadow:      0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:   0 10px 30px rgba(0,0,0,.5);
    /* Typography scale  -  minimum 12px for accessibility */
    --font-xs:   12px;
    --font-sm:   13px;
    --font-base: 14px;
    --font-md:   15px;
    --font-lg:   18px;
    --font-xl:   24px;
    /* Spacing */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: 16px;
    --gap-lg: 24px;
    /* Radius scale -- signed off Q2-B (balanced 4/6px) */
    --radius-sm:   4px;    /* buttons, inputs, badges */
    --radius:      6px;    /* cards, modals, dropdowns */
    --radius-lg:  12px;    /* drawer panels */
    --radius-pill: 9999px; /* pill badges */

    /* KPI stat-card left-border colours -- Q4-B (coloured border, no gradient) */
    --kpi-danger:  #EF4444;
    --kpi-warning: #F59E0B;
    --kpi-success: #22C55E;
    --kpi-info:    #2563EB;
    --kpi-neutral: rgba(255,255,255,.2);

    /* Density row heights -- Q3-C (toggle: compact default) */
    --row-py-compact:     5px;
    --row-py-comfortable: 9px;
    --row-px-compact:     10px;
    --row-px-comfortable: 12px;
    /* Padding scale */
    --pad-tight:  6px 10px;
    --pad-std:    10px 14px;
    --pad-card:   14px 18px;
    --pad-modal:  20px 24px;
    /* Typography additions */
    --font-label: 11px;
    --font-md:    16px;
    /* Z-index budget */
    --z-base:   1;
    --z-sticky: 10;
    --z-modal:  100;
    --z-toast:  200;
  }

  /* Fluid root  -  text scales gently from 1024px to 2560px screens */
  html { font-size: clamp(14px, calc(0.4vw + 10px), 18px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text); font-size: 1rem; line-height: 1.55; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

  /* ── TOP BAR ── */
  #topbar {
    background: #0E1E38;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 16px 0 0;
    height: 58px;
    flex-shrink: 0;
    gap: 12px;
    border-bottom: 1px solid rgba(47,107,255,.2);
    box-shadow: 0 2px 16px rgba(0,0,0,.4);
  }
  .topbar-logo-img { height: 58px; width: 208px; display: block; flex-shrink: 0; }
  /* Prevent icon-font flash on hover */
  /* Promote sidebar to its own GPU layer -- all hover repaints stay inside it, no bleed */
  #sidebar { contain: paint; will-change: transform; transform: translateZ(0); }
  i[class^="ti"], i[class*=" ti"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.12s ease;
  }
  .persona-tabs { display: flex; gap: 2px; background: rgba(0,0,0,.3); border-radius: 6px; padding: 3px; border: 1px solid rgba(255,255,255,.1); }
  .persona-tab {
    padding: 5px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.7); border: none; background: none; transition: all .15s;
  }
  .persona-tab.active { background: rgba(99,102,241,.35); color: white; box-shadow: 0 0 10px rgba(99,102,241,.25); font-weight: 600; }
  .persona-tab:hover:not(.active) { color: white; background: rgba(255,255,255,.15); }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .engineer-selector { display: flex; gap: 4px; }
  .eng-btn {
    padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500;
    border: 1px solid rgba(255,255,255,.3); background: none; color: rgba(255,255,255,.8); transition: all .15s;
  }
  .eng-btn.active { background: var(--brag-blue); border-color: var(--brag-blue); color: white; }

  /* ── SPLIT LAYOUT ── */
  #app { display: flex; flex: 1; overflow: hidden; }
  .pane {
    flex: 1; overflow: hidden; display: flex; flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.15);
  }
  .pane:last-child { border-right: none; }
  /* Unified module header — EXACT same height on every screen, no exceptions */
  .pane-header,
  .module-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .pane-actions { display: flex; align-items: center; gap: 8px; }
  .pane-title,
  .module-header h2,
  .module-header .module-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pane-body { flex: 1; overflow-y: auto; padding: 18px; }

  /* ── STATS ── */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }

  /* ── STAT BAR — locked-height KPI strip, identical on every module ── */
  .stat-bar {
    height: 80px;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    align-items: stretch;
    box-sizing: border-box;
  }

  .stat-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 20px rgba(0,0,0,.45); flex:1;
    transition: transform 150ms ease, box-shadow 150ms ease;
    min-width: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
  }
  .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-value { font-size: 24px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* hide any third-line subtitle inside a stat-card when inside .stat-bar */
  .stat-bar .stat-card > div:nth-child(3) { display: none; }
  /* Q4-B: Coloured left border only -- no gradient, no coloured text. Clean. */
  .stat-card.blue,  .stat-card.stat-card--info    { border-left: 4px solid var(--kpi-info);    background: var(--bg-card); box-shadow: none; }
  .stat-card.amber, .stat-card.stat-card--warning  { border-left: 4px solid var(--kpi-warning); background: var(--bg-card); box-shadow: none; }
  .stat-card.green, .stat-card.stat-card--success  { border-left: 4px solid var(--kpi-success); background: var(--bg-card); box-shadow: none; }
  .stat-card.red,   .stat-card.stat-card--danger   { border-left: 4px solid var(--kpi-danger);  background: var(--bg-card); box-shadow: none; }
  .stat-card.neutral, .stat-card.stat-card--neutral { border-left: 4px solid var(--kpi-neutral); background: var(--bg-card); box-shadow: none; }
  /* Stat values use standard --text colour (no semantic colouring on numbers -- Q4-B) */
  .stat-card.blue .stat-value, .stat-card.amber .stat-value,
  .stat-card.green .stat-value, .stat-card.red .stat-value { color: var(--text); }
  .stat-filter-card,
  .stat-card[onclick] { cursor: pointer; transition: transform .15s, box-shadow .15s; -webkit-user-select:none; user-select:none; }
  .stat-filter-card:hover,
  .stat-card[onclick]:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .stat-filter-card.active,
  .stat-card[onclick].active { outline: 2px solid #a5b4fc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
  /* Unified sub-tab bar */
  .subtab-bar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    display: flex;
    gap: 0;
    flex-shrink: 0;
  }
  .reports-sub-tab, .subtab-btn { padding:10px 18px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted);border-bottom:3px solid transparent;transition:all .15s; }
  .reports-sub-tab.active, .subtab-btn.active { color:var(--blue);border-bottom-color:var(--blue); }
  .reports-sub-tab:hover:not(.active), .subtab-btn:hover:not(.active) { color:var(--text);background:var(--slate-light); }
  .ceo-table { width:100%;border-collapse:collapse;font-size:12px;margin-bottom:4px; }
  .ceo-table th { background:var(--bg-surface);color:var(--text-muted);padding:6px 8px;text-align:right;font-weight:600;font-size:12px; }
  .ceo-table th:first-child { text-align:left; }
  .ceo-table td { padding:5px 8px;text-align:right;border-bottom:1px solid var(--border);color:var(--text); }
  .ceo-table td:first-child { text-align:left;font-size:12px;color:var(--text-muted); }
  .ceo-table tr:hover td { background:var(--blue-pale); }
  .ceo-section-hdr td { background:rgba(99,102,241,.2)!important;color:var(--blue-light)!important;font-weight:700;text-align:left!important;font-size:12px;letter-spacing:.5px;padding:7px 10px!important; }
  .ceo-editable { cursor:pointer;min-width:28px;display:inline-block; }
  .ceo-editable:hover { background:var(--amber-pale);border-radius:3px; }
  .ceo-total { font-weight:700;color:var(--blue-light); }
  .ceo-delta-pos { color:var(--green);font-weight:600; }
  .ceo-delta-neg { color:var(--red);font-weight:600; }
  .ceo-ytd { color:var(--text-muted);font-size:12px; }
  /* Job list items (left panel) */
  .job-list-item { padding: 11px 14px 11px 12px; cursor: pointer; transition: all 150ms ease;
    border: 1px solid rgba(255,255,255,.11); border-left: 4px solid var(--slate);
    border-radius: 10px; margin: 0 10px 7px; background: rgba(255,255,255,.07);
    box-shadow: 0 1px 4px rgba(0,0,0,.22); min-height: 68px; box-sizing: border-box; }
  .job-list-item:first-child { margin-top: 8px; }
  .job-list-item:last-child  { margin-bottom: 8px; }
  .job-list-item:hover { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.5); box-shadow: 0 4px 16px rgba(99,102,241,.18); transform: translateY(-1px); }
  /* detail-label / detail-value (2-col grid layout used in new detail panels) */
  .detail-label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 3px 0 1px; }
  .detail-value { font-size: 14px; color: var(--text); padding: 1px 0 3px; font-weight: 500; }
  /* notif-content fills remaining space */
  .notif-content { flex: 1; min-width: 0; }
  .job-list-item.selected { background: linear-gradient(135deg, rgba(99,102,241,.28) 0%, rgba(99,102,241,.14) 100%); border-color: rgba(99,102,241,.65); box-shadow: 0 4px 18px rgba(99,102,241,.22); }
  /* Content section cards — used across all module detail panes */
  .kavex-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
  /* Shared data table — CRM, Finance, Accounts, Invoices, RAMS, POs, etc. */
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .data-table thead tr { background: var(--navy); color: white; }
  .data-table thead th { padding: 8px 10px; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
  .data-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .data-table tbody tr { transition: background 100ms ease; }
  .data-table tbody tr:hover { background: var(--bg-primary) !important; }
  .data-table tfoot tr { background: var(--bg-primary); font-weight: 700; }
  .data-table tfoot td { padding: 8px 10px; border-top: 2px solid var(--navy); }
  .job-list-ref { font-weight: 700; font-size: 13px; color: var(--blue-light); letter-spacing: .01em; }
  .job-list-desc { font-size: 14px; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--text); }
  .job-list-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

  /* ── FILTER BAR ── */
  .filter-bar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
  .filter-bar input {
    flex: 1; padding: 9px 14px; border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--radius);
    font-size: 14px; outline: none; background: var(--bg-card); color: var(--text); transition: border-color .13s;
  }
  .filter-bar input::placeholder { color: rgba(255,255,255,.45); }
  .filter-bar input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
  .filter-bar select {
    padding: 9px 12px; border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--radius);
    font-size: 14px; background: var(--bg-card); color: var(--text); outline: none; cursor: pointer; transition: border-color .13s;
  }
  .filter-bar select:focus { border-color: var(--blue-light); }

  /* ── BTN ── */
  .btn {
    padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1.5px solid transparent; transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px; letter-spacing: .01em;
    white-space: nowrap; flex-shrink: 0;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; border-color: rgba(165,180,252,.25); box-shadow: 0 3px 12px rgba(99,102,241,.38); }
  .btn-primary:hover { background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 5px 20px rgba(99,102,241,.5); border-color: rgba(165,180,252,.4); transform: translateY(-1px); }
  .btn-sm { padding: 5px 12px; font-size: 12px; }
  .btn-ghost { background: rgba(255,255,255,.05); color: var(--text); border: 1.5px solid rgba(255,255,255,.22); }
  .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
  .btn-green { background: var(--green); color: #052e16; border-color: rgba(255,255,255,.15); }
  .btn-green:hover { background: #16a34a; box-shadow: 0 0 16px rgba(34,197,94,.3); }
  .btn-amber { background: var(--amber); color: #451a03; border-color: rgba(255,255,255,.15); }
  .btn-amber:hover { background: #d97706; box-shadow: 0 0 16px rgba(245,158,11,.3); }
  .btn-red { background: var(--red); color: white; border-color: rgba(255,255,255,.15); }
  .btn-red:hover { background: #dc2626; box-shadow: 0 0 16px rgba(239,68,68,.3); }
  .btn-purple { background: var(--purple); color: white; border-color: rgba(255,255,255,.15); }
  .btn-purple:hover { background: #9333ea; box-shadow: 0 0 16px rgba(168,85,247,.3); }
  .btn-danger-ghost {
    background: transparent;
    color: var(--red);
    border: 1.5px solid rgba(239,68,68,.4);
  }
  .btn-danger-ghost:hover {
    background: rgba(239,68,68,.1);
    border-color: var(--red);
  }

  /* Standard transition utility */
  .trans { transition: all 150ms ease; }

  /* ── TABLE ── */
  .table-wrap { background: var(--bg-card); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; background: #20344f; border-bottom: 1px solid rgba(255,255,255,.15); }
  td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14px; }
  tr:last-child td { border-bottom: none; }
  tr:nth-child(even) td { background: rgba(255,255,255,.025); }
  tr:nth-child(even):hover td { background: var(--blue-pale); }
  tr.clickable:hover td { background: var(--blue-pale); cursor: pointer; }
  tr.selected td { background: var(--blue-pale); }

  /* Sticky table headers */
  .data-table thead th,
  table.kavex-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-surface);
  }
  thead th { position: sticky; top: 0; z-index: 10; background: var(--bg-card); }

  /* ── BADGES ── */
  .badge {
    display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700;
    letter-spacing: .01em;
  }
  .badge-blue     { background: rgba(59,130,246,.2);   color: #93c5fd; }   /* BRAG Blue  -  Complete */
  .badge-complete { background: rgba(59,130,246,.2);   color: #93c5fd; }
  .badge-green  { background: rgba(34,197,94,.16);   color: #86efac; }
  .badge-amber  { background: rgba(245,158,11,.18);  color: #fcd34d; }
  .badge-red    { background: rgba(239,68,68,.18);   color: #fca5a5; }
  .badge-purple { background: rgba(168,85,247,.18);  color: #d8b4fe; }
  .badge-slate  { background: rgba(255,255,255,.07); color: #94a3b8; }
  .badge-navy   { background: rgba(99,102,241,.12);  color: #a5b4fc; }

  /* ── JOB DETAIL PANEL ── */
  #eng-detail-panel {
    background: var(--bg-card); border-top: 1px solid var(--border);
    flex-shrink: 0; overflow-y: auto;
    transition: max-height .2s ease;
  }
  .detail-header {
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
  }
  .detail-body { padding: 16px; }
  .detail-close { margin-left: auto; cursor: pointer; color: var(--text-muted); font-size: 18px; background: none; border: none; transition: color .12s; }
  .detail-close:hover { color: var(--text); }
  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .detail-field label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 3px; }
  .detail-field span { font-size: 13px; color: var(--text); }
  .action-bar { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }

  /* ── TIMELINE ── */
  .timeline { margin: 12px 0; }
  .tl-item { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; }
  .tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 4px; flex-shrink: 0; }
  .tl-dot.edit { background: var(--amber); border-radius: 2px; }
  .tl-dot.note { background: var(--purple); }
  .tl-dot.system { background: var(--slate); }
  .tl-time { color: var(--text-muted); white-space: nowrap; min-width: 120px; }
  .tl-label { color: var(--text); }
  .tl-item.tl-edit .tl-label { color: var(--amber); }
  .tl-item.tl-note .tl-label { color: var(--purple); }
  .tl-field-change { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .tl-old { text-decoration: line-through; color: var(--red); }
  .tl-new { color: var(--green); font-weight: 600; }

  /* ── ENGINEER JOB CARD ── */
  .job-card {
    background: var(--bg-card); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 12px rgba(0,0,0,.5); margin-bottom: 10px; overflow: hidden; cursor: pointer;
    transition: all .15s; border-left: 4px solid transparent;
  }
  .job-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.6); border-color: rgba(255,255,255,.25); }
  .job-card.selected { border-color: var(--blue); border-width: 2px; }
  .job-card-header { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
  .job-card-body { padding: 0 14px 12px; }
  .job-card-title { font-weight: 600; font-size: 13px; }
  .job-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .job-card-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

  /* ── DRAWER PANELS  -  replaces all centred modals, slide in from right ── */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    display: flex; align-items: stretch; justify-content: flex-end; z-index: 8000;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .modal-backdrop.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--bg-card); border-left: 1px solid rgba(255,255,255,.14);
    border-radius: 12px 0 0 12px; width: 520px; max-width: 95vw;
    height: 100vh; max-height: 100vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: -10px 0 48px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32,0,.67,0);
  }
  .modal-backdrop.open .modal { transform: translateX(0); }
  .modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  }
  .modal-header h3 { font-size: 15px; font-weight: 600; }
  .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; }
  .form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px; }
  .form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: 10px 14px; border: 1.5px solid rgba(255,255,255,.13); border-radius: var(--radius);
    font-size: var(--font-sm); outline: none; font-family: inherit; resize: vertical;
    background: var(--bg-card); color: var(--text); transition: border-color .13s; min-height: 40px;
  }
  /* Shared inline input style  -  use for inline edits outside modals */
  .field-input, .form-control, select.field-input {
    padding: 7px 10px; border: 1.5px solid rgba(255,255,255,.13); border-radius: 6px;
    font-size: var(--font-sm); font-family: inherit; outline: none;
    background: var(--bg-card); color: var(--text); transition: border-color .13s;
    min-height: 36px;
  }
  .field-input:focus, .form-control:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
  .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,.45); }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
  .form-field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
  .photo-upload {
    border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px;
    text-align: center; cursor: pointer; color: var(--text-muted); font-size: 13px;
    transition: all .15s;
  }
  .photo-upload:hover { border-color: var(--blue-light); color: var(--blue); }
  .photo-upload.has-photo { border-color: var(--green); background: var(--green-pale); }
  .photo-preview { width: 100%; border-radius: var(--radius); max-height: 180px; object-fit: cover; margin-top: 8px; }
  .signature-canvas {
    border: 1px solid var(--border); border-radius: var(--radius); cursor: crosshair;
    background: var(--bg-deep); display: block; width: 100%;
  }
  .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

  /* Standard modal width classes */
  .modal-sm  { max-width: 400px; }
  .modal-md  { max-width: 520px; }
  .modal-lg  { max-width: 680px; }
  .modal-xl  { max-width: 860px; }

  /* ── NEW JOB MODAL fields ── */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── CUSTOMERS ── */
  .customer-card {
    background: rgba(255,255,255,.04); border-radius: 10px;
    border: 1px solid rgba(255,255,255,.09); border-left: 4px solid var(--slate);
    padding: 14px; margin: 0 10px 7px; cursor: pointer; transition: all .15s;
  }
  .customer-card:first-child { margin-top: 8px; }
  .customer-card:last-child  { margin-bottom: 8px; }
  .customer-card:hover { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.5); box-shadow: 0 4px 16px rgba(99,102,241,.18); transform: translateY(-1px); }
  .contract-card {
    background: var(--bg-card); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.13);
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all .15s;
    border-left-width: 4px;
  }
  .contract-card:hover { border-color: rgba(99,102,241,.5); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  .cust-name { font-weight: 600; font-size: 14px; }
  .cust-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

  /* ── TABS ── */
  .inner-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,.15); background: var(--bg-card); flex-shrink: 0; padding: 0 4px; }
  .inner-tab {
    padding: 12px 18px; font-size: var(--font-sm); font-weight: 500; cursor: pointer; border: none;
    background: none; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: all 150ms ease; font-family: inherit;
  }
  .inner-tab.active { color: var(--blue-light); border-bottom-color: var(--blue-light); font-weight: 700; }
  .inner-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.04); }

  /* ── PRIORITY DOTS ── */
  .p1 { color: var(--red); font-weight: 700; }
  .p2 { color: #f97316; font-weight: 700; }
  .p3 { color: var(--amber); font-weight: 600; }
  .p4 { color: var(--slate); }

  /* -- EMPTY STATE -- */
  .empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: var(--font-sm); }
  .empty-icon { font-size: 32px; margin-bottom: 8px; opacity: .5; }
  .empty-title { font-size: var(--font-base); font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--text-muted);
    text-align: center;
  }
  .empty-state-icon {
    font-size: 48px;
    opacity: 0.25;
    line-height: 1;
  }
  .empty-state-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
  }
  .empty-state-sub {
    font-size: var(--font-sm);
    color: var(--text-muted);
    max-width: 280px;
  }

  /* Empty state CTA */
  .empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }

  .empty-state-cta:hover {
    background: var(--accent-hover, #4f46e5);
  }

  /* Status alert panels  -  dark-theme aware, replaces light-theme banners */
  .alert-panel { border-radius: var(--radius); padding: 12px 14px; border-left: 3px solid; font-size: var(--font-sm); margin-bottom: 10px; }
  .alert-panel.success { background: var(--green-pale); border-color: var(--green); color: var(--text); }
  .alert-panel.warning { background: var(--amber-pale); border-color: var(--amber); color: var(--text); }
  .alert-panel.danger  { background: var(--red-pale);   border-color: var(--red);   color: var(--text); }
  .alert-panel.info    { background: var(--blue-pale);  border-color: var(--blue);  color: var(--text); }
  .alert-panel strong  { font-weight: 700; }

  /* ── TOAST ── */
  #toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(60px);
    background: var(--navy); color: white; padding: 10px 20px; border-radius: 6px;
    font-size: 13px; font-weight: 500; z-index: 200; transition: transform .25s ease;
    pointer-events: none;
  }
  #toast.show { transform: translateX(-50%) translateY(0); }

  /* Toast type variants */
  .toast-success { border-left: 4px solid var(--success, #22c55e); }
  .toast-error   { border-left: 4px solid var(--danger, #ef4444); }
  .toast-warn    { border-left: 4px solid var(--warning, #f59e0b); }

  .toast-icon {
    margin-right: 6px;
    font-style: normal;
  }
  .toast-error .toast-icon { color: #ef4444; }
  .toast-warn  .toast-icon { color: #f59e0b; }
  .toast-success .toast-icon { color: #22c55e; }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

  /* ── ASSIGN MODAL ── */
  #assign-modal .modal { width: 380px; }
  .assign-eng-option {
    padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; transition: all .15s; background: var(--bg-surface);
  }
  .assign-eng-option:hover { border-color: var(--blue-light); background: var(--blue-pale); }
  .assign-eng-option.selected-eng { border-color: var(--blue); background: var(--blue-pale); }

  .section-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: rgba(255,255,255,.55); margin-bottom: 10px; margin-top: 6px;
  }

  /* WCAG AA fix  -  small uppercase labels
     rgba(255,255,255,.55) on --bg-card (#17273f) ≈ #8fa3b8  -  below 4.5:1.
     #94a3b8 on #17273f ≈ 5.0:1, passes AA for 12px bold text. */
  .section-label,
  .pane-section-label,
  .stat-label-sm {
    font-size: 12px !important;
    color: #94a3b8;
    letter-spacing: 0.5px;
  }

  /* ── SIDEBAR NAV ── */
  #sidebar {
    width: 210px; background: linear-gradient(180deg, #060b18 0%, #091222 60%, #0c1830 100%); flex-shrink: 0;
    display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
    border-right: 1px solid rgba(99,102,241,.22);
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
    scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent;
  }
  #sidebar::-webkit-scrollbar { width: 4px; }
  #sidebar::-webkit-scrollbar-track { background: transparent; }
  #sidebar::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 4px; }
  .nav-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: rgba(255,255,255,.38); padding: 10px 18px 4px;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px; cursor: pointer; border: none;
    background: none; color: rgba(255,255,255,.62); font-size: 13px;
    font-weight: 500; width: 100%; text-align: left; transition: all 150ms ease;
    border-left: 3px solid transparent; font-family: inherit; min-height: 36px;
  }
  .nav-item { transition: background-color 0.15s ease, color 0.15s ease, border-left-color 0.15s ease; }
  .nav-item:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.97); border-left-color: rgba(165,180,252,.35); }
  .nav-item.active {
    background: linear-gradient(90deg, rgba(99,102,241,.42) 0%, rgba(99,102,241,.12) 100%);
    color: white; border-left-color: #a5b4fc; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(99,102,241,.15);
  }
  .nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; line-height: 1; opacity: .85; transition: opacity 0.15s ease; }
  .nav-item.active .nav-icon { opacity: 1; }
  .nav-badge {
    margin-left: auto; background: var(--red); color: white;
    font-size: 12px; font-weight: 700; border-radius: 9999px;
    padding: 2px 6px; min-width: 18px; text-align: center;
  }
  .nav-badge.amber { background: var(--amber); }
  .nav-badge.green { background: var(--green); }
  .nav-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 6px 0; }
  .nav-footer {
    margin-top: auto; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.1);
    font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.7;
  }
  .nav-eng-pill {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    color: rgba(255,255,255,.5); font-size: 12px;
  }
  .nav-eng-avatar {
    width: 24px; height: 24px; border-radius: 50%; background: var(--blue);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    font-weight: 700; color: white; flex-shrink: 0;
  }

  /* ── STUB VIEWS ── */
  .stub-view {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; color: var(--text-muted); gap: 12px; padding: 40px;
  }
  .stub-icon { font-size: 40px; }
  .stub-title { font-size: 16px; font-weight: 600; color: var(--text); }
  .stub-desc { font-size: 13px; text-align: center; max-width: 280px; line-height: 1.6; }
  .stub-tag { display: inline-block; background: var(--blue-pale); color: var(--blue); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 9999px; }

  /* ── QUOTES ── */
  .quote-card { background:rgba(255,255,255,.07); border-radius:var(--radius); border:1px solid rgba(255,255,255,.11); padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:all .18s; border-left: 4px solid transparent; box-shadow:0 1px 4px rgba(0,0,0,.22); }
  .quote-card:hover { border-color:rgba(99,102,241,.5); box-shadow: 0 6px 22px rgba(99,102,241,.2); transform:translateY(-1px); }
  .quote-card.selected { border-color:var(--blue); border-width:2px; background:var(--blue-pale); }
  .quote-total { font-size:20px; font-weight:700; }
  .line-item-row { display:grid; grid-template-columns:1fr 60px 70px 80px; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; align-items:center; }
  .line-item-row.header { font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text-muted); }

  /* ── SCHEDULING ── */
  .sched-grid { display:grid; grid-template-columns:120px repeat(5,1fr); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); overflow:hidden; background:var(--bg-card); box-shadow:0 4px 20px rgba(0,0,0,.35); }
  .sched-cell { padding:8px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-height:64px; }
  .sched-cell:last-child { border-right:none; }
  .sched-header-cell { background:var(--bg-surface); color:var(--text); font-size:12px; font-weight:700; padding:8px 10px; border-right:1px solid var(--border); text-align:center; }
  .sched-eng-cell { background:var(--bg-surface); font-size:12px; font-weight:600; padding:8px 10px; display:flex; align-items:flex-start; gap:6px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .sched-today { background:rgba(99,102,241,.08); }
  .sched-chip { border-radius:4px; padding:3px 6px; font-size:12px; margin-bottom:4px; cursor:pointer; border-left:3px solid var(--blue); background:rgba(99,102,241,.12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .1s; color:var(--text); }
  .sched-chip:hover { opacity:.75; }
  .sched-chip.p1 { background:rgba(239,68,68,.15); border-color:var(--red); }
  .sched-chip.p2 { background:rgba(249,115,22,.15); border-color:#f97316; }
  .sched-chip.p3 { background:rgba(99,102,241,.12); border-color:var(--blue); }
  .sched-chip.p4 { background:rgba(255,255,255,.05); border-color:var(--slate); }
  .cal-day:hover { background:rgba(255,255,255,.04) !important; }
  .cal-day-selected { outline: 2px solid var(--blue); outline-offset:-2px; }

  /* ── REPORTS ── */
  .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
  .kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--pad-card);
    text-align: center;
    transition: box-shadow 150ms ease, transform 150ms ease;
    box-shadow: var(--shadow);
  }
  .kpi-card[onclick] { cursor: pointer; }
  .kpi-card[onclick]:hover { box-shadow: 0 0 0 2px var(--blue-light); transform: translateY(-1px); }
  .kpi-card .kpi-value { font-size: var(--font-xl); font-weight: 700; color: var(--text); }
  .kpi-card .kpi-label { font-size: var(--font-xs); color: var(--text-muted); margin-top: 4px; }
  .kpi-value { font-size:28px; font-weight:700; }
  .kpi-label { font-size:12px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.3px; }
  .kpi-delta { font-size:12px; margin-top:4px; }
  .kpi-delta.up { color:var(--green); }
  .kpi-delta.dn { color:var(--red); }
  .chart-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12px; }
  .chart-bar-wrap { flex:1; height:18px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
  .chart-bar-fill { height:100%; border-radius:3px; background:var(--blue); }
  .chart-label { min-width:110px; color:var(--text-muted); }
  .chart-val { min-width:28px; text-align:right; font-weight:600; color:var(--text); }

  /* ── ADMIN ── */
  .admin-block { background:linear-gradient(135deg,#192d48 0%,#17273f 100%); border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); padding:16px; margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,.3); border-top:1px solid rgba(99,102,241,.18); }
  .admin-block-title { font-size:13px; font-weight:700; margin-bottom:12px; color:var(--text); }
  .settings-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .settings-row:last-child { border-bottom:none; }
  .toggle-wrap { position:relative; width:40px; height:22px; cursor:pointer; }
  .toggle-bg { width:40px; height:22px; background:rgba(255,255,255,.15); border-radius:11px; transition:background .15s; }
  .toggle-bg.on { background:var(--green); }
  .toggle-knob { position:absolute; width:18px; height:18px; background:var(--bg-card); border-radius:50%; top:2px; left:2px; transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .toggle-bg.on + .toggle-knob, .toggle-wrap.on .toggle-knob { left:20px; }

  /* ── SUBCONTRACTORS ── */
  .sub-card { background:rgba(255,255,255,.04); border-radius:10px;
    border:1px solid rgba(255,255,255,.09); border-left:4px solid var(--slate);
    padding:14px 16px; margin:0 10px 7px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .15s; }
  .sub-card:first-child { margin-top: 8px; }
  .sub-card:last-child  { margin-bottom: 8px; }
  .sub-card:hover { background:rgba(99,102,241,.16); border-color:rgba(99,102,241,.5); box-shadow:0 4px 16px rgba(99,102,241,.18); transform:translateY(-1px); }
  .sub-avatar { width:40px; height:40px; border-radius:50%; background:var(--purple); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; flex-shrink:0; }
  .stars { color:var(--amber); font-size:var(--font-xs); letter-spacing:1px; }
  /* ── CRM ── */
  .pipeline-stepper { display:flex; margin:14px 0; }
  .pipeline-step { flex:1; text-align:center; padding:8px 2px 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; border-top:3px solid var(--border); color:var(--text-muted); cursor:default; }
  .pipeline-step.done { border-top-color:var(--green); color:var(--green); }
  .pipeline-step.active { border-top-color:var(--blue); color:var(--blue); }
  .pipeline-step.lost { border-top-color:var(--red); color:var(--red); }
  .prob-bar-wrap { height:10px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden; margin:6px 0 2px; }
  .prob-bar-fill { height:100%; border-radius:5px; transition:width .4s; }
  .crm-service-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; background:var(--blue-pale); color:var(--blue); margin:2px; }
  .crm-note-item { padding:10px 0; border-bottom:1px solid var(--border); }
  .crm-note-meta { font-size:12px; color:var(--text-muted); margin-bottom:3px; }
  .crm-note-text { font-size:13px; color:var(--text); }

  /* ── CUSTOMER PORTAL OWN NAV ── */
  .cp-portal-header { background:var(--navy); padding:0 20px; height:52px; display:flex; align-items:center; gap:16px; flex-shrink:0; }
  .cp-portal-logo { display:block; height:26px; width:auto; }
  .cp-nav-bar { background:var(--bg-card); border-bottom:1px solid var(--border); display:flex; gap:0; flex-shrink:0; padding:0 16px; }
  .cp-nav-tab { padding:11px 18px; border:none; background:none; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; font-family:inherit; }
  .cp-nav-tab.active { color:var(--blue-light); border-bottom-color:var(--blue-light); }
  .cp-nav-tab:hover:not(.active) { color:var(--text); background:var(--slate-light); }
  .cp-content { flex:1; overflow-y:auto; padding:20px; background:var(--bg-primary); }
  .cp-back-btn { margin-left:auto; padding:5px 14px; border-radius:var(--radius); font-size:12px; font-weight:500; border:1px solid rgba(255,255,255,.3); background:none; color:rgba(255,255,255,.8); cursor:pointer; font-family:inherit; transition:all .15s; }
  .cp-back-btn:hover { background:rgba(255,255,255,.15); color:white; }

  /* ── NOTIFICATIONS ── */
  .notif-item { display:flex; gap:12px; padding:12px 14px; cursor:pointer; transition:all .15s;
    border: 1px solid rgba(255,255,255,.09); border-left: 4px solid var(--slate);
    border-radius: 10px; margin: 0 10px 7px; background: rgba(255,255,255,.04); }
  .notif-item:first-child { margin-top: 8px; }
  .notif-item:last-child  { margin-bottom: 8px; }
  .notif-item.unread { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); }
  .notif-item.unread .notif-dot { background:var(--blue); }
  .notif-item:hover { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.5); box-shadow: 0 4px 16px rgba(99,102,241,.18); transform: translateY(-1px); }
  .notif-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:5px; }
  .notif-dot.read { background:transparent; border:1px solid var(--border); }
  .notif-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:var(--blue-pale); }
  .notif-title { font-size:13px; font-weight:600; }
  .notif-title.read { font-weight:400; color:var(--text-muted); }
  .notif-time { font-size:12px; color:var(--text-muted); margin-top:2px; }

  /* ── CUSTOMER PORTAL ── */
  .cp-hero { background:var(--navy); color:white; padding:20px; border-radius:var(--radius); margin-bottom:16px; }
  .cp-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
  .cp-stat { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); padding:12px; text-align:center; }
  .cp-stat-val { font-size:22px; font-weight:700; color:var(--blue); }
  .cp-stat-lbl { font-size:12px; color:var(--text-muted); }
  .cp-job-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; cursor:pointer; }
  .cp-job-row:hover { background:var(--slate-light); margin:0 -16px; padding:10px 16px; }

  /* ── DASHBOARD GRID ── */
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .dash-card {
    background: linear-gradient(180deg, #192d48 0%, #17273f 100%); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); padding: 18px 20px;
    border-top: 1px solid rgba(99,102,241,.22);
  }
  .dash-card-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: rgba(165,180,252,.75); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(99,102,241,.2); }
  .eng-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .eng-row:last-child { border-bottom: none; }

  /* ── FIELD ENGINEER MOBILE VIEW ── */
  .ev-phone-wrap { flex:1; overflow-y:auto; background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%); display:flex; align-items:flex-start; justify-content:center; padding:28px 0 40px; }
  .ev-phone { width:375px; background:var(--bg-card); border-radius:44px; box-shadow:0 0 0 10px #1e293b, 0 0 0 11px #334155, 0 40px 100px rgba(0,0,0,.7); overflow:hidden; position:relative; flex-shrink:0; }
  .ev-notch { background:var(--bg-card); height:28px; display:flex; align-items:center; justify-content:center; }
  .ev-notch-pill { width:120px; height:6px; background:var(--navy-dark); border-radius:3px; }
  .ev-status-bar { background:var(--navy); padding:8px 20px 10px; display:flex; align-items:center; justify-content:space-between; }
  .ev-screen { background:var(--bg-primary); min-height:580px; overflow-y:auto; }
  .ev-bottom-nav { display:flex; background:var(--navy-dark); border-top:1px solid rgba(255,255,255,.08); padding-bottom:env(safe-area-inset-bottom,0); }
  .ev-nav-btn { flex:1; padding:10px 0 12px; border:none; background:none; font-family:inherit; font-size:12px; color:var(--text-muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color .15s; }
  .ev-nav-btn.active { color:var(--blue); }
  .ev-nav-icon { font-size:22px; line-height:1; }
  .ev-home-bar { height:28px; background:var(--bg-card); display:flex; align-items:center; justify-content:center; }

  /* Job cards */
  .ev-job-card { background:var(--bg-deep); margin:10px 12px 0; border-radius:14px; padding:14px 14px 12px; box-shadow:0 1px 6px rgba(0,0,0,.4); border-left:4px solid transparent; cursor:pointer; }
  .ev-job-card.p1 { border-left-color:var(--red); }
  .ev-job-card.p2 { border-left-color:var(--amber); }
  .ev-job-card.p3 { border-left-color:var(--brag-blue); }
  .ev-job-card.p4 { border-left-color:var(--text-muted); }

  /* Section label inside phone */
  .ev-sec { padding:14px 14px 4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }

  /* Action buttons inside phone */
  .ev-btn { width:100%; padding:15px; border:none; border-radius:14px; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; margin-bottom:10px; transition:opacity .12s, transform .1s; }
  .ev-btn:active { transform:scale(.98); opacity:.88; }
  .ev-btn-blue  { background:var(--blue); color:white; }
  .ev-btn-green { background:var(--green); color:white; }
  .ev-btn-red   { background:var(--red); color:white; }
  .ev-btn-ghost { background:var(--bg-surface); color:var(--text-muted); }

  /* Proof screen */
  .ev-photo-well { background:var(--bg-deeper); border:2px dashed rgba(255,255,255,.15); border-radius:14px; padding:28px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; margin-bottom:12px; }
  .ev-photo-well.has-photos { border-color:var(--blue); background:rgba(99,102,241,.1); }
  .ev-field-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:6px; }
  .ev-textarea { width:100%; padding:12px; border:1.5px solid rgba(255,255,255,.12); border-radius:12px; font-size:var(--font-base); font-family:inherit; outline:none; resize:none; box-sizing:border-box; background:var(--bg-deep); color:var(--text); }
  .ev-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
  .ev-num-input { width:100%; padding:12px; border:1.5px solid rgba(255,255,255,.12); border-radius:12px; font-size:18px; font-weight:700; font-family:inherit; outline:none; text-align:center; background:var(--bg-deep); color:var(--text); box-sizing:border-box; }
  .ev-num-input:focus { border-color:var(--blue); }

  /* Detail rows */
  .ev-detail-row { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
  .ev-detail-icon { font-size:18px; width:24px; flex-shrink:0; text-align:center; }
  .ev-detail-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-weight:700; margin-bottom:2px; }
  .ev-detail-val { font-size:14px; color:var(--text); }

  /* Stat box in profile/today header */
  .ev-stat-mini { background:rgba(255,255,255,.12); border-radius:12px; padding:10px 8px; text-align:center; flex:1; }

  /* ── Quote preview overlay ── */
  #quote-preview-overlay {
    display:none; position:fixed; inset:0; z-index:9000;
    background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    overflow-y:auto; padding:40px 20px;
  }
  #quote-preview-overlay.open { display:block; }
  #quote-preview-doc {
    background:#fff; max-width:760px; margin:0 auto;
    border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.25);
    overflow:hidden;
  }
  .qp-header { background:linear-gradient(135deg,#0f2d5c 0%,#1a4a8a 100%); color:#fff; padding:32px 36px 24px; }
  .qp-logo   { font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:2px; }
  .qp-tagline{ font-size:12px; opacity:.65; margin-bottom:24px; }
  .qp-meta   { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .qp-meta-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.6px; opacity:.55; margin-bottom:2px; }
  .qp-meta-val { font-size:13px; font-weight:600; }
  .qp-bill   { padding:24px 36px; border-bottom:1px solid #e2e8f0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .qp-bill-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; margin-bottom:4px; }
  .qp-bill-val { font-size:14px; font-weight:600; color:#0f172a; }
  .qp-bill-sub { font-size:12px; color:#64748b; margin-top:2px; }
  .qp-desc   { padding:16px 36px; background:#f8fafc; border-bottom:1px solid #e2e8f0; font-size:13px; color:#334155; }
  .qp-lines  { padding:24px 36px; }
  .qp-line-hdr{ display:grid; grid-template-columns:1fr 52px 80px 90px; gap:8px; padding:6px 0; border-bottom:2px solid #0f2d5c; margin-bottom:2px; }
  .qp-line-row{ display:grid; grid-template-columns:1fr 52px 80px 90px; gap:8px; padding:8px 0; border-bottom:1px solid #f1f5f9; align-items:center; }
  .qp-total  { padding:20px 36px; background:#f8fafc; border-top:2px solid var(--border-strong); display:flex; justify-content:flex-end; }
  .qp-total-box { background:#0f2d5c; color:#fff; border-radius:10px; padding:16px 24px; min-width:200px; text-align:right; }
  .qp-footer { padding:24px 36px; border-top:1px solid #e2e8f0; display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:12px; color:#64748b; }

  @media print {
    body { background: white !important; color: #000 !important; font-size: 12pt; }
    .sidebar, .topbar, #nav-bar, .pane-header .btn, .module-header .btn,
    .btn-primary, .btn-ghost, #kavex-ai-btn, .breadcrumb-bar,
    .job-action-bar, .filter-rail { display: none !important; }
    .pane, .content-area, #app { position: static !important; overflow: visible !important; }
    .modal-overlay { position: static !important; background: none !important; }
    .modal-content { box-shadow: none !important; border: 1px solid #ccc !important; max-width: 100% !important; }
    .stat-card, .kpi-card { border: 1px solid #ccc !important; background: white !important; color: #000 !important; }
    @page { size: A4; margin: 15mm; }
  }
  /* ── LOGIN SCREEN ── */
  #login-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--navy-dark);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .2s;
  }
  .login-card {
    background: var(--bg-card); border-radius: 14px; padding: 28px 28px 24px;
    width: 760px; max-width: 96vw; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.18);
  }
  #login-user-list, #switch-user-list {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  }
  .login-user-row {
    cursor: pointer; padding: 14px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: all .12s; text-align: center;
  }
  .login-user-row:hover { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.4); transform: translateY(-1px); }
  .login-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: white;
  }
  .login-pin-pad {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 200px; margin: 16px auto 0;
  }
  .pin-btn {
    padding: 14px 0; font-size: 18px; font-weight: 600; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; background: var(--bg-surface); color: var(--text); transition: all .1s;
  }
  .pin-btn:hover { background: var(--blue-pale); }
  .pin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); display: inline-block; margin: 0 4px; transition: background .15s; }
  .pin-dot.filled { background: var(--blue-light); }
  /* Switch user overlay */
  #switch-user-overlay {
    position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.6);
    display: none; align-items: center; justify-content: center;
  }
  #switch-user-overlay.open { display: flex; }
  /* Role badge colours */
  .role-admin    { background: var(--navy); }
  .role-manager  { background: var(--purple); }
  .role-helpdesk { background: var(--blue); }
  .role-engineer { background: var(--green); }
  .role-customer { background: var(--slate); }
  /* ── VETTING STATUS ── */
  .vetting-PENDING        { background:rgba(255,255,255,.07); color:#94a3b8; }
  .vetting-DOCS_REQUESTED { background:rgba(245,158,11,.15);  color:#fcd34d; }
  .vetting-UNDER_REVIEW   { background:rgba(99,102,241,.15);  color:#a5b4fc; }
  .vetting-APPROVED       { background:rgba(34,197,94,.15);   color:#86efac; }
  .vetting-REJECTED       { background:rgba(239,68,68,.15);   color:#fca5a5; }
  .vetting-SUSPENDED      { background:rgba(168,85,247,.15);  color:#d8b4fe; }
  /* ── CHIP (filter pills) ── */
  .chip {
    padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-muted);
    cursor: pointer; transition: all .15s; font-family: inherit;
  }
  .chip:hover { background: var(--blue-pale); color: var(--blue-light); border-color: var(--blue); }

  /* ═══════════════════════════════════════════════════════
     ACCESSIBILITY & LEGIBILITY SYSTEM
     WCAG AA compliant, colour-blindness aware, fluid text
     ═══════════════════════════════════════════════════════ */

  /* Focus indicators  -  visible for keyboard & switch users */
  :focus-visible {
    outline: 2.5px solid var(--blue-light);
    outline-offset: 2px;
    border-radius: 4px;
  }
  button:focus-visible, a:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2.5px solid #a5b4fc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(129,140,248,.2);
  }
  /* Remove outline when mouse-clicked (only show on keyboard) */
  :focus:not(:focus-visible) { outline: none; }

  /* ── BRAG: shape indicators for colour-blind users ──
     Left-bordered items get a small role attribute that CSS
     uses to add a supplementary shape before the job ref.
     Green=circle  Amber=triangle  Red=octagon  Blue=check
     These are cosmetic only; screen-readers use badge text. */

  /* ── Boxed pane layout ── */
  .pane-split  { display:flex; flex:1; overflow:hidden; padding:0 12px 12px; gap:12px; position:relative; }
  /* ── Resizable pane divider ── */
  .pane-resizer {
    position:absolute; top:0; bottom:12px; width:10px; cursor:col-resize; z-index:20;
    background:transparent; border-radius:4px; transform:translateX(-50%);
  }
  .pane-resizer::after {
    content:''; position:absolute; left:50%; transform:translateX(-50%);
    top:50%; margin-top:-24px; width:3px; height:48px; border-radius:3px;
    background:rgba(255,255,255,.12); transition:background .15s, height .15s;
  }
  .pane-resizer:hover::after, .pane-resizer.dragging::after {
    background:rgba(99,102,241,.75); height:64px;
  }
  .list-panel  { flex:1; min-width:0; background:var(--bg-card); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.1); box-shadow:0 4px 24px rgba(0,0,0,.3); }
  .detail-panel{ flex:1; position:relative; background:var(--bg-card); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 4px 24px rgba(0,0,0,.3); }
  .pane-filter { padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .pane-filter input[type="text"], .pane-filter input:not([type]) {
    flex:1; min-width:120px; padding:9px 14px; border:1.5px solid rgba(255,255,255,.12); border-radius:var(--radius);
    font-size:14px; outline:none; background:var(--bg-card); color:var(--text); transition:border-color .13s; font-family:inherit;
  }
  .pane-filter input::placeholder { color:rgba(255,255,255,.45); }
  .pane-filter input:focus { border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
  .pane-filter select {
    padding:9px 12px; border:1.5px solid rgba(255,255,255,.12); border-radius:var(--radius);
    font-size:14px; background:var(--bg-card); color:var(--text); outline:none; cursor:pointer; transition:border-color .13s; font-family:inherit;
  }
  .pane-filter select:focus { border-color:var(--blue-light); }

  /* ── DENSITY TOGGLE -- Q3-C (compact default, user toggle) ── */
  /* Applied as data-density="compact|comfortable" on <html> */
  html, [data-density="compact"] {
    --row-py: var(--row-py-compact);
    --row-px: var(--row-px-compact);
  }
  [data-density="comfortable"] {
    --row-py: var(--row-py-comfortable);
    --row-px: var(--row-px-comfortable);
  }
  /* Density-aware table rows */
  .data-table thead th { padding: var(--row-py, 6px) var(--row-px, 10px); }
  .data-table tbody td { padding: var(--row-py, 6px) var(--row-px, 10px); }
  /* Density-aware list items */
  .job-list-item, .list-item { padding: var(--row-py, 6px) var(--row-px, 10px); }
  /* Density toggle control */
  .density-toggle {
    display: inline-flex; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm);
    overflow: hidden; margin-left: auto; flex-shrink: 0;
  }
  .density-opt {
    padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
    background: transparent; color: rgba(255,255,255,.45); border: none; transition: all .12s;
  }
  .density-opt.active, .density-opt[data-active="true"] {
    background: var(--bg-elevated); color: var(--text);
  }
  .density-opt:hover:not(.active) { color: rgba(255,255,255,.7); }

  .brag-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    font-size: 9px; font-weight: 900; flex-shrink: 0; line-height: 1;
    margin-right: 4px; vertical-align: middle;
  }
  .brag-icon.brag-green  { background: rgba(34,197,94,.25);  color: #22c55e; }
  .brag-icon.brag-amber  { background: rgba(245,158,11,.25); color: #f59e0b; }
  .brag-icon.brag-red    { background: rgba(239,68,68,.25);  color: #ef4444; }
  .brag-icon.brag-blue   { background: var(--brag-blue-pale); color: var(--brag-blue); }
  .brag-icon.brag-slate  { background: rgba(100,116,139,.2); color: #94a3b8; }

  /* ── Minimum touch target size (WCAG 2.5.5) ── */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 30px; }
  .nav-item { min-height: 44px; }

  /* ── Stronger muted text on the darkest sidebar background ── */
  #sidebar .nav-item { color: rgba(255,255,255,.68); }
  #sidebar .nav-item:hover { color: rgba(255,255,255,.96); }

  /* ── Form label contrast boost ── */
  .form-field label, .detail-field label {
    color: rgba(255,255,255,.7);
  }

  /* ── Improved td contrast ── */
  td { color: var(--text); line-height: 1.5; }

  /* ── Readable table header text (not just muted) ── */
  th { color: rgba(255,255,255,.75); }

  /* ── Active persona tab fix: dark text on card bg was invisible ── */
  .persona-tab.active { color: var(--text) !important; font-weight: 600; }

  /* ── Reduced letter-spacing on tiny uppercase labels (readability) ── */
  .stat-label, .kpi-label, .detail-label, .pane-title,
  .nav-section-label, .detail-field label {
    letter-spacing: .3px;
  }

  /* ── CTA / action buttons: ensure sufficient contrast ── */
  .btn-green { color: #f0fdf4; }  /* was #052e16  -  dark text on green, hard to read */
  .btn-amber { color: #1c0a00; }

  /* ── Motion-safe: respect prefers-reduced-motion ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Inner padding for detail panels */
  #job-detail-panel > *, #customer-detail > *, #quote-detail > *,
  #invoice-detail > *, #notif-detail > *, #sub-detail > *, #crm-detail > * { padding-top: 0; }
  /* Reports body cards get inner spacing */
  #reports-body .dash-card, #admin-body .dash-card { margin-bottom: 12px; }

/* ── ASSET REGISTER ── */
.condition-badge { display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:9999px; }
.cond-1 { background:rgba(239,68,68,.2);color:#fca5a5; }
.cond-2 { background:rgba(245,158,11,.2);color:#fcd34d; }
.cond-3 { background:rgba(99,102,241,.2);color:#a5b4fc; }
.cond-4 { background:rgba(34,197,94,.2);color:#86efac; }
.cond-5 { background:rgba(34,197,94,.28);color:#4ade80; }
.asset-list-item { padding:11px 14px 11px 12px;cursor:pointer;transition:all .18s;
  border:1px solid rgba(255,255,255,.11);border-left:4px solid var(--slate);
  border-radius:10px;margin:0 10px 7px;background:rgba(255,255,255,.07);
  box-shadow:0 1px 4px rgba(0,0,0,.22);min-height:68px;box-sizing:border-box; }
.asset-list-item:hover { background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.5);box-shadow:0 4px 16px rgba(99,102,241,.18);transform:translateY(-1px); }
.asset-list-item.selected { background:linear-gradient(135deg,rgba(99,102,241,.28) 0%,rgba(99,102,241,.14) 100%);border-color:rgba(99,102,241,.65);box-shadow:0 4px 18px rgba(99,102,241,.22); }
.import-drop-zone { border:2px dashed rgba(99,102,241,.4);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(99,102,241,.06); }
.import-drop-zone:hover,.import-drop-zone.drag-over { border-color:rgba(99,102,241,.8);background:rgba(99,102,241,.12); }
.import-preview-table { width:100%;border-collapse:collapse;font-size:12px;margin-top:12px; }
.import-preview-table th { background:var(--bg-surface);color:var(--text-muted);padding:6px 8px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px; }
.import-preview-table td { padding:5px 8px;border-bottom:1px solid var(--border);color:var(--text);font-size:12px; }
.sched-row { display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px; }
.sched-row:last-child { border-bottom:none; }

/* ── SLA ── */
.sla-bar { display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 0; }
.sla-pill { font-size:11px;font-weight:700;padding:3px 8px;border-radius:9999px; }
.sla-met { background:rgba(34,197,94,.18);color:#4ade80; }
.sla-breach { background:rgba(239,68,68,.18);color:#fca5a5; }
.sla-at-risk { background:rgba(245,158,11,.18);color:#fcd34d; }
.sla-pending { background:rgba(148,163,184,.12);color:rgba(148,163,184,.8); }
.badge-purple { background:rgba(168,85,247,.18);color:#d8b4fe; }
.badge-navy { background:rgba(30,41,59,.8);color:rgba(148,163,184,.9);border:1px solid rgba(148,163,184,.2); }

/* ═══════ MY WORK SCREEN ═══════════════════════════════ */
.mw-screen{display:flex;flex-direction:column;flex:1;overflow:hidden}
.mw-header-bar{padding:16px 20px 12px;border-bottom:1px solid #1E2A3A;flex-shrink:0}
.mw-greeting{font-size:20px;font-weight:900;color:#E2E8F0;margin-bottom:2px}
.mw-sub{font-size:12px;color:#64748B}
.mw-body{flex:1;overflow-y:auto;padding-bottom:40px}
.mw-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 20px}
.mw-stat{background:#141926;border-radius:8px;padding:10px 14px;border:1px solid #1E2A3A}
.mw-stat-val{font-size:26px;font-weight:900;color:#E2E8F0}
.mw-stat-val.red{color:#EF4444}.mw-stat-val.amb{color:#F59E0B}.mw-stat-val.blu{color:#00B4D8}
.mw-stat-label{font-size:11px;color:#64748B;margin-top:2px}
.mw-sec-head{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#475569;padding:12px 20px 6px;display:flex;align-items:center;gap:8px}
.mw-sec-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mw-task{display:flex;align-items:flex-start;gap:12px;padding:10px 20px;border-bottom:1px solid #1A2035;cursor:pointer;transition:background .12s}
.mw-task:hover{background:#141926}
.mw-task-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.mwi-red{background:rgba(239,68,68,.15);color:#EF4444}
.mwi-amb{background:rgba(245,158,11,.15);color:#F59E0B}
.mwi-blu{background:rgba(0,180,216,.15);color:#00B4D8}
.mwi-grn{background:rgba(34,197,94,.12);color:#22C55E}
.mwi-pur{background:rgba(139,92,246,.12);color:#A78BFA}
.mwi-gry{background:#1E2A3A;color:#64748B}
.mw-task-body{flex:1;min-width:0}
.mw-task-title{font-size:13px;font-weight:700;color:#E2E8F0;margin-bottom:2px}
.mw-task-ctx{font-size:11px;color:#64748B;line-height:1.5}
.mw-task-ctx b{color:#00B4D8;font-weight:600}
.mw-auto{font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;background:rgba(34,197,94,.12);color:#22C55E;letter-spacing:.04em;margin-left:4px;vertical-align:middle}
.mw-task-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;min-width:88px}
.mw-time{font-size:11px;color:#64748B}
.mw-time.urg{color:#EF4444;font-weight:700}.mw-time.tod{color:#F59E0B;font-weight:600}
.mw-act-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid #1E2A3A;background:#141926;color:#94A3B8;cursor:pointer;white-space:nowrap}
.mw-act-btn:hover{background:#1E2A3A;color:#E2E8F0}
.mw-empty{text-align:center;padding:48px 20px;color:#475569;font-size:13px}


  /* ═══ PROJECTS ═══ */
  .proj-card { display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #1A2035;cursor:pointer;border-left:4px solid transparent;transition:background .12s }
  .proj-card:hover { background:rgba(255,255,255,.04) }
  .proj-card.selected { background:rgba(0,180,216,.08);border-left-color:var(--blue) }
  .proj-info { flex:1;min-width:0 }
  .proj-name { font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .proj-meta { font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .proj-ring { width:36px;height:36px;flex-shrink:0 }
  .wiz-steps { display:flex;align-items:center;gap:0;margin-bottom:6px }
  .wiz-step { display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-muted);flex:1 }
  .wiz-step.active { color:var(--blue) }
  .wiz-step.done { color:#22C55E }
  .wiz-dot { width:22px;height:22px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0 }
  .wiz-line { flex:1;height:2px;background:var(--border);margin:0 4px }
  .wiz-line.done { background:#22C55E }
  .completeness-bar { height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:4px }
  .completeness-fill { height:100%;border-radius:3px;transition:width .3s }
  .proj-status-badge { font-size:10px;font-weight:800;padding:2px 7px;border-radius:12px;white-space:nowrap }
  .proj-status-ACTIVE { background:rgba(34,197,94,.15);color:#22C55E }
  .proj-status-MOBILISING { background:rgba(0,180,216,.15);color:#00B4D8 }
  .proj-status-TENDER { background:rgba(245,158,11,.15);color:#F59E0B }
  .proj-status-PAUSED { background:rgba(100,116,139,.15);color:#94A3B8 }
  .proj-status-COMPLETE { background:rgba(139,92,246,.15);color:#A78BFA }
  .info-screen { display:flex;flex-direction:column;gap:16px;padding:4px 0 }
  .info-item { display:flex;align-items:flex-start;gap:12px }
  .info-icon { width:36px;height:36px;border-radius:8px;background:rgba(0,180,216,.12);color:#00B4D8;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px }
/* ═══ KAVEX AI INTELLIGENCE LAYER ═══════════════ */
#kavex-ai-btn{position:fixed;bottom:28px;right:28px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#2E5FA3 0%,#00B4D8 100%);border:none;cursor:pointer;z-index:9999;box-shadow:0 4px 24px rgba(0,180,216,.45);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;font-family:inherit;color:#fff;transition:transform .2s,box-shadow .2s;letter-spacing:-0.5px}
#kavex-ai-btn:hover{transform:scale(1.1);box-shadow:0 6px 32px rgba(0,180,216,.6)}
#kavex-ai-panel{position:fixed;right:-420px;top:0;bottom:0;width:400px;background:#1B2A4A;border-left:1px solid rgba(46,95,163,.35);z-index:9998;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.45)}
#kavex-ai-panel.ai-open{right:0}
.aip-header{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid rgba(46,95,163,.3);background:#0D1421;flex-shrink:0}
.aip-logo{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#2E5FA3,#00B4D8);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;font-family:inherit;flex-shrink:0}
.aip-title{flex:1;font-size:14px;font-weight:700;color:#F4F6F9;font-family:inherit;margin:0}
.aip-status{font-size:10px;color:#22C55E;background:rgba(34,197,94,.12);padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.05em}
.aip-close{background:none;border:none;color:#64748B;cursor:pointer;font-size:18px;padding:0 4px;line-height:1}
.aip-close:hover{color:#F4F6F9}
.aip-chips{display:flex;gap:5px;padding:9px 12px;flex-wrap:wrap;border-bottom:1px solid rgba(46,95,163,.2);flex-shrink:0;background:rgba(13,20,33,.4)}
.aip-chip{font-size:11px;padding:4px 9px;border-radius:12px;border:1px solid rgba(46,95,163,.45);color:#AECAEF;cursor:pointer;background:rgba(46,95,163,.1);white-space:nowrap;transition:all .15s}
.aip-chip:hover{background:rgba(46,95,163,.3);border-color:#2E5FA3;color:#F4F6F9}
.aip-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.ai-m{display:flex;gap:7px;align-items:flex-start}
.ai-m.ai-user{flex-direction:row-reverse}
.ai-m-av{width:26px;height:26px;border-radius:50%;background:#1E3A5F;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#AECAEF;flex-shrink:0;font-family:inherit}
.ai-m.ai-bot .ai-m-av{background:linear-gradient(135deg,#2E5FA3,#00B4D8);color:#fff}
.ai-m-bub{max-width:82%;padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.55;color:#F4F6F9}
.ai-m.ai-bot .ai-m-bub{background:#1E3A5F;border-radius:4px 12px 12px 12px}
.ai-m.ai-user .ai-m-bub{background:#2E5FA3;border-radius:12px 4px 12px 12px}
.ai-m-bub b,.ai-m-bub strong{color:#00B4D8}
.ai-m-bub ul{margin:5px 0 0 0;padding-left:15px}
.ai-m-bub li{margin:2px 0}
.ai-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#00B4D8;margin:0 2px;animation:aib .9s infinite}
.ai-dots span:nth-child(2){animation-delay:.2s}
.ai-dots span:nth-child(3){animation-delay:.4s}
@keyframes aib{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}
.aip-input-row{display:flex;gap:7px;padding:11px 12px;border-top:1px solid rgba(46,95,163,.3);background:#0D1421;flex-shrink:0}
.aip-input{flex:1;background:#1E3A5F;border:1px solid rgba(46,95,163,.4);border-radius:18px;padding:7px 13px;font-size:12.5px;color:#F4F6F9;outline:none;font-family:inherit}
.aip-input::placeholder{color:#64748B}
.aip-input:focus{border-color:#2E5FA3}
.aip-send{width:34px;height:34px;border-radius:50%;background:#2E5FA3;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:background .15s;flex-shrink:0;align-self:center}
.aip-send:hover{background:#00B4D8}
.ai-insight-strip{border:1px solid rgba(0,180,216,.22);border-radius:9px;padding:9px 12px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start;background:linear-gradient(135deg,rgba(30,58,95,.65) 0%,rgba(46,95,163,.1) 100%)}
.ai-ins-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:800;font-family:inherit}
.ai-ins-body{flex:1}
.ai-ins-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.ai-ins-text{font-size:12px;color:#F4F6F9;line-height:1.4}
.ai-ins-cta{font-size:11px;color:#00B4D8;cursor:pointer;margin-top:3px;text-decoration:underline}
.ai-ins-cta:hover{color:#AECAEF}
.ai-dispatch-card{background:#0D1421;border:1px solid rgba(0,180,216,.28);border-radius:9px;padding:12px;margin-top:8px}
.ai-dispatch-card h4{margin:0 0 8px;font-size:11px;color:#00B4D8;text-transform:uppercase;letter-spacing:.07em;font-family:inherit}
.ai-eng-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;margin-bottom:5px;border:1px solid rgba(46,95,163,.22);background:rgba(30,58,95,.4);transition:background .15s}
.ai-eng-row:hover{background:rgba(46,95,163,.28)}
.ai-eng-row.ai-top{border-color:rgba(0,180,216,.45);background:rgba(0,180,216,.07)}
.ai-eng-score{font-size:17px;font-weight:800;color:#00B4D8;width:32px;text-align:right;flex-shrink:0;font-family:inherit}
.ai-eng-info{flex:1}
.ai-eng-name{font-size:12.5px;font-weight:700;color:#F4F6F9}
.ai-eng-why{font-size:11px;color:#AECAEF;margin-top:2px}

/* ═══════ KAVEX CONNECT  -  ON-DEMAND WORKFORCE MARKETPLACE ═══ */
.kc-board{display:flex;height:100%;overflow:hidden}
.kc-left{width:340px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.kc-right{flex:1;overflow-y:auto;padding:20px}
.kc-header{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;gap:10px;flex-shrink:0}
.kc-header h2{margin:0;font-size:16px;font-weight:800;font-family:inherit;flex:1}
.kc-badge-live{font-size:10px;font-weight:700;background:rgba(0,180,216,.15);color:#00B4D8;border:1px solid rgba(0,180,216,.3);padding:2px 8px;border-radius:10px;letter-spacing:.06em}
.kc-list{flex:1;overflow-y:auto}
.kc-req-row{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;position:relative}
.kc-req-row:hover{background:var(--bg-surface)}
.kc-req-row.kc-selected{background:rgba(46,95,163,.12);border-left:3px solid #2E5FA3}
.kc-req-skill{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.kc-req-meta{font-size:11px;color:var(--text-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kc-urg{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.06em}
.kc-urg.urgent{background:rgba(239,68,68,.15);color:#EF4444;border:1px solid rgba(239,68,68,.25)}
.kc-urg.same-day{background:rgba(245,158,11,.15);color:#F59E0B;border:1px solid rgba(245,158,11,.25)}
.kc-urg.next-day{background:rgba(46,95,163,.15);color:#2E5FA3;border:1px solid rgba(46,95,163,.25)}
.kc-urg.flexible{background:rgba(100,116,139,.1);color:#94A3B8;border:1px solid rgba(100,116,139,.2)}
.kc-req-resp{position:absolute;top:12px;right:14px;font-size:11px;font-weight:700;color:#22C55E}
.kc-detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:10px;text-align:center}
.kc-detail-empty .kc-empty-icon{font-size:48px;opacity:.25}
.kc-detail-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:14px}
.kc-detail-title{font-size:14px;font-weight:700;color:var(--text);margin:0 0 12px;font-family:inherit;display:flex;align-items:center;gap:8px}
.kc-match-worker{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);margin-bottom:8px;transition:border-color .15s}
.kc-match-worker.kc-top-match{border-color:rgba(0,180,216,.45);background:rgba(0,180,216,.05)}
.kc-match-score{font-size:22px;font-weight:900;font-family:inherit;width:42px;text-align:center;flex-shrink:0}
.kc-match-info{flex:1}
.kc-match-name{font-size:13px;font-weight:700;color:var(--text)}
.kc-match-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.kc-tag{font-size:10px;padding:2px 6px;border-radius:5px;background:rgba(46,95,163,.15);color:#AECAEF;font-weight:600}
.kc-match-actions{display:flex;gap:6px;flex-direction:column;align-items:flex-end}
.kc-ping-btn{font-size:11px!important;padding:4px 10px!important;white-space:nowrap}
/* Worker feed (engineer side) */
.kc-feed{display:flex;flex-direction:column;gap:12px;padding:16px}
.kc-job-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.kc-job-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kc-job-card.urg-urgent::before{background:#EF4444}
.kc-job-card.urg-same-day::before{background:#F59E0B}
.kc-job-card.urg-next-day::before{background:#2E5FA3}
.kc-job-card.urg-flexible::before{background:#64748B}
.kc-job-card:hover{border-color:rgba(46,95,163,.4);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.kc-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.kc-rate-badge{font-size:18px;font-weight:900;color:#22C55E;font-family:inherit}
.kc-rate-unit{font-size:11px;color:var(--text-muted);font-weight:400}
.kc-card-skill{font-size:16px;font-weight:800;color:var(--text);margin:0 0 4px;font-family:inherit}
.kc-card-desc{font-size:12.5px;color:var(--text-muted);margin-bottom:10px;line-height:1.4}
.kc-card-meta{display:flex;gap:10px;font-size:11px;color:var(--text-muted);flex-wrap:wrap;margin-bottom:12px}
.kc-card-meta span{display:flex;align-items:center;gap:4px}
.kc-card-actions{display:flex;gap:8px}
.kc-accept-btn{flex:1;padding:10px!important;font-size:14px!important;font-weight:700!important}
.kc-pass-btn{padding:10px 16px!important;font-size:13px!important}
.kc-timer{font-size:11px;font-weight:700;color:#F59E0B;background:rgba(245,158,11,.1);padding:2px 8px;border-radius:8px}
/* Availability pill in engineer header */
.kc-avail-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;cursor:pointer;font-size:12px;font-weight:700;border:1px solid transparent;transition:all .15s;font-family:inherit}
.kc-avail-pill.avail{background:rgba(34,197,94,.12);color:#22C55E;border-color:rgba(34,197,94,.25)}
.kc-avail-pill.busy{background:rgba(239,68,68,.1);color:#EF4444;border-color:rgba(239,68,68,.2)}
.kc-avail-pill.off{background:rgba(100,116,139,.1);color:#94A3B8;border-color:rgba(100,116,139,.2)}
.kc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:kc-pulse 2s infinite}
@keyframes kc-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Post request modal */
.kc-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:8888;display:flex;align-items:center;justify-content:center}
.kc-modal-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:520px;max-width:95vw;max-height:90vh;overflow-y:auto}
.kc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kc-form-group label{font-size:12px;color:var(--text-muted);font-weight:600;display:block;margin-bottom:3px}
.kc-form-group input,.kc-form-group select,.kc-form-group textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:12.5px;font-family:inherit;background:var(--bg);color:var(--text)}
.kc-form-group textarea{min-height:68px;resize:vertical}
.kc-status-filled{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:8px;margin-bottom:10px}

/* ══ Customer Portal v2 ══════════════════════════════════════ */
.cp2-header{display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;background:var(--navy);border-bottom:2px solid rgba(255,255,255,.08);flex-shrink:0}
.cp2-logo{font-size:17px;font-weight:900;letter-spacing:-.5px;color:white}
.cp2-logo span{color:#818cf8}
.cp2-sep{width:1px;height:20px;background:rgba(255,255,255,.18)}
.cp2-portal-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.38)}
.cp2-nav{display:flex;align-items:center;gap:4px;padding:0 16px;height:46px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0}
.cp2-nav-btn{padding:5px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s;white-space:nowrap;line-height:1.4}
.cp2-nav-btn:hover{color:var(--text);background:rgba(255,255,255,.07)}
.cp2-nav-btn.active{color:white;background:#4f46e5}
.cp2-body{position:absolute;inset:0;overflow-y:auto;padding:28px 32px}
.cp2-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:26px}
.cp2-hero h1{font-size:22px;font-weight:800;color:var(--text);margin:0 0 4px}
.cp2-hero p{font-size:13px;color:var(--text-muted);margin:0}
.cp2-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px}
/* Overview 2-col grid */
.cp2-ov-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.cp2-sidebar{display:flex;flex-direction:column;gap:14px}
.cp2-sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cp2-sidebar-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:13px 16px 10px;border-bottom:1px solid var(--border)}
.cp2-site-row{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);transition:background .15s;cursor:default}
.cp2-site-row[onclick]{cursor:pointer}
.cp2-site-row[onclick]:hover{background:rgba(99,102,241,.07)}
.cp2-site-row:last-child{border-bottom:none}
.cp2-acct-hdr{background:linear-gradient(135deg,#1e2b50 0%,#2d3a68 100%);padding:18px 18px 16px;display:flex;align-items:flex-start;gap:12px}
.cp2-acct-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.cp2-acct-name{font-size:15px;font-weight:700;color:white;margin-bottom:3px}
.cp2-acct-type{font-size:11px;color:rgba(255,255,255,.45);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.cp2-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;-webkit-user-select:none;user-select:none}
.cp2-stat:hover{border-color:rgba(99,102,241,.45);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.cp2-stat-n{font-size:32px;font-weight:800;line-height:1;margin-bottom:5px}
.cp2-stat-l{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.cp2-section{margin-bottom:30px}
.cp2-section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cp2-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}
.cp2-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s,transform .15s;margin-bottom:8px}
.cp2-split-left .cp2-card{margin-bottom:0}
.cp2-card:hover{border-color:rgba(99,102,241,.55);box-shadow:0 6px 22px rgba(99,102,241,.2),0 2px 8px rgba(0,0,0,.35);transform:translateY(-2px);background:rgba(99,102,241,.03)}
.cp2-card.selected{border-color:#818cf8;border-width:2px;background:rgba(99,102,241,.07);transform:translateY(0);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.cp2-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.cp2-card-ref{font-size:12px;font-weight:700;color:#818cf8}
.cp2-card-desc{font-size:13px;color:var(--text);font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp2-card-meta{font-size:12px;color:var(--text-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cp2-action-card{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);border-radius:12px;padding:13px 18px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.cp2-action-card:hover{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.5);transform:translateY(-2px);box-shadow:0 6px 18px rgba(245,158,11,.15),0 2px 6px rgba(0,0,0,.3)}
.cp2-action-icon{width:34px;height:34px;border-radius:9px;background:rgba(245,158,11,.15);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.cp2-activity-table{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cp2-activity-row{display:flex;gap:12px;padding:10px 16px;align-items:center;transition:background .15s,border-radius .15s;cursor:pointer}
.cp2-activity-row:hover{background:rgba(99,102,241,.07);border-radius:8px}
.cp2-activity-row+.cp2-activity-row{border-top:1px solid var(--border)}
/* Slide-in detail panel */
.cp2-detail-overlay{position:fixed;inset:0;z-index:500;pointer-events:none}
.cp2-detail-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52);pointer-events:none;opacity:0;transition:opacity .2s}
.cp2-detail-panel{position:absolute;top:0;right:0;bottom:0;width:500px;max-width:96vw;background:var(--bg-surface);border-left:1px solid var(--border);display:flex;flex-direction:column;pointer-events:none;transform:translateX(100%);transition:transform .26s cubic-bezier(.25,.46,.45,.94)}
.cp2-detail-overlay.open .cp2-detail-backdrop{opacity:1;pointer-events:all}
.cp2-detail-overlay.open .cp2-detail-panel{pointer-events:all}
.cp2-detail-overlay.open .cp2-detail-panel{transform:translateX(0)}
.cp2-detail-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg-card)}
.cp2-detail-body{flex:1;overflow-y:auto;padding:20px}
.cp2-close{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.07);border:none;cursor:pointer;color:var(--text-muted);font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .1s;line-height:1;flex-shrink:0}
.cp2-close:hover{background:rgba(255,255,255,.14);color:var(--text)}
/* Portal left sidebar nav */
.cp2-portal-nav{width:210px;flex-shrink:0;background:linear-gradient(180deg,#060b18 0%,#091222 60%,#0c1830 100%);border-right:1px solid rgba(99,102,241,.22);box-shadow:4px 0 20px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.3) transparent}
.cp2-portal-nav::-webkit-scrollbar{width:4px}
.cp2-portal-nav::-webkit-scrollbar-thumb{background:rgba(99,102,241,.35);border-radius:4px}

/* ── stat-card slate modifier ── */
.stat-card.slate{border-left:4px solid #64748b;background:linear-gradient(135deg,rgba(100,116,139,.18) 0%,rgba(100,116,139,.05) 100%);border-color:rgba(100,116,139,.32);box-shadow:0 4px 20px rgba(100,116,139,.1),0 2px 8px rgba(0,0,0,.3)}
.stat-card.slate .stat-value{color:#94a3b8}
/* ── stat-card purple modifier ── */
.stat-card.purple{border-left:4px solid #a78bfa;background:linear-gradient(135deg,rgba(139,92,246,.22) 0%,rgba(139,92,246,.06) 100%);border-color:rgba(139,92,246,.38);box-shadow:0 4px 20px rgba(139,92,246,.18),0 2px 8px rgba(0,0,0,.3)}
.stat-card.purple .stat-value{color:#c4b5fd}

/* ── portal 50/50 split layout ── */
.cp2-split-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cp2-split-left{display:flex;flex-direction:column;gap:8px}
.cp2-split-right{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:sticky;top:0;overflow-y:auto;display:flex;flex-direction:column}
.cp2-split-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:280px;color:var(--text-muted);padding:40px;text-align:center;font-size:13px;font-weight:500}
.cp2-split-placeholder i{opacity:.22}

/* ── document library ── */
.cp2-doc-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.cp2-doc-card:hover{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.04);transform:translateY(-2px);box-shadow:0 6px 18px rgba(99,102,241,.15),0 2px 6px rgba(0,0,0,.3)}
.cp2-doc-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cp2-doc-cat-btn{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer;transition:all .15s;font-family:inherit;display:inline-flex;align-items:center;gap:3px}
.cp2-doc-cat-btn:hover{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.3);color:var(--text)}
.cp2-doc-cat-btn.active{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.45);color:var(--blue-light)}

/* Mob filter cards (3-col) in portal */
.cp2-mob-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}

/* ── Mobile responsive (< 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide sidebar on mobile  -  JS also hides it for engineer view */
  body.is-mobile #sidebar {
    display: none !important;
  }

  /* Main layout: sidebar + content → single column */
  body.is-mobile #app {
    flex-direction: column !important;
  }

  /* Content area: full width */
  body.is-mobile .pane-body {
    width: 100% !important;
    padding: 8px !important;
  }

  /* Filter bars: wrap to column */
  body.is-mobile .filter-bar,
  body.is-mobile .pane-filter {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Split panes: stack vertically */
  body.is-mobile .pane-split {
    flex-direction: column !important;
  }

  body.is-mobile .list-panel {
    width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  body.is-mobile .detail-panel {
    width: 100% !important;
  }

  /* Engineer view  -  remove phone frame constraints */
  body.is-mobile .ev-phone {
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    height: 100vh !important;
  }

  body.is-mobile .ev-phone-wrap {
    padding: 0 !important;
    background: transparent !important;
  }

  /* Stat cards: 2-column grid on mobile */
  body.is-mobile .stats,
  body.is-mobile .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modals: full width */
  body.is-mobile .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 2vw !important;
  }
}

/* ── Scheduling DnD ───────────────────────────────────────────────────── */
.sched-unassigned-panel {
  width: 220px;
  min-width: 200px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

.sched-unassigned-panel h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sched-unassigned-card {
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
  cursor: grab;
  transition: opacity 0.15s, box-shadow 0.15s;
  -webkit-user-select: none;
  user-select: none;
}

.sched-unassigned-card:active,
.sched-unassigned-card.dragging {
  cursor: grabbing;
  opacity: 0.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.job-card[draggable="true"] {
  cursor: grab;
}

.job-card[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.7;
}

/* Drop target highlight */
.cal-day.drag-over,
.week-day-col.drag-over,
[data-date].drag-over {
  background: rgba(99, 102, 241, 0.15) !important;
  border: 2px dashed var(--accent, #6366f1) !important;
  border-radius: 4px;
}

/* Incident severity borders */
.incident-card[data-severity="Low"]      { border-left-color: var(--info, #38bdf8); }
.incident-card[data-severity="Medium"]   { border-left-color: var(--warning, #f59e0b); }
.incident-card[data-severity="High"]     { border-left-color: var(--danger, #ef4444); }
.incident-card[data-severity="Critical"] { border-left-color: #7f1d1d; }

.riddor-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Subcontractor document expiry states */
.sub-doc-expired   { border-left: 3px solid #ef4444; background: rgba(239,68,68,0.06); }
.sub-doc-expiring  { border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.06); }
.sub-doc-valid     { border-left: 3px solid #22c55e; }

/* Aged debt bucket colors */
.aging-bucket-header {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  margin: 8px 0 4px;
}
.aging-1-30  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.aging-31-60 { background: rgba(249,115,22,0.12); color: #f97316; }
.aging-61-90 { background: rgba(239,68,68,0.12);  color: #ef4444; }
.aging-90plus { background: rgba(127,29,29,0.15);  color: #fca5a5; font-weight: 700; }

/* ── UX INFRASTRUCTURE (js/ux.js) ── */

/* Inline validation */
.field-input.field-error { border-color: var(--red) !important; }
.field-error-msg { color: var(--red); font-size: 11px; margin-top: 3px; }

/* Breadcrumb bar */
.bc-link { color: var(--blue); cursor: pointer; }
.bc-link:hover { text-decoration: underline; }
.bc-sep { color: var(--text-muted); font-size: 10px; display: flex; align-items: center; }

/* Pikaday dark theme */
.pika-single { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pika-title { background: var(--bg-card); }
.pika-prev, .pika-next { color: var(--text-muted); }
.pika-button { color: var(--text); background: transparent; }
.pika-button:hover, .pika-button:focus { background: var(--blue) !important; color: #fff !important; }
.is-selected .pika-button { background: var(--blue) !important; color: #fff !important; }
.is-today .pika-button { color: var(--blue); font-weight: 700; }
.pika-label { color: var(--text); }

/* -- JOB ROW PRIORITY INDICATORS -- */
.job-row { border-left: 3px solid transparent; transition: border-color 150ms ease; }
.job-row.priority-p1 { border-left-color: var(--red); background: rgba(239,68,68,.04); }
.job-row.priority-p2 { border-left-color: var(--amber); }
.job-row.priority-p3 { border-left-color: var(--blue); }
.job-row.priority-p4 { border-left-color: var(--border); }
.job-row.sla-breaching { background: rgba(239,68,68,.07); }
.job-row.sla-breaching .sla-countdown { color: var(--red); font-weight: 700; animation: pulse-red 1.5s ease infinite; }
.job-row.job-closed { opacity: 0.55; }

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* SLA countdown chip */
.sla-countdown {
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  white-space: nowrap;
}

/* Filter rail */
.filter-rail {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  padding: 12px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-rail-section { padding: 8px 14px 4px; font-size: var(--font-label); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.filter-rail-item { padding: 7px 14px; font-size: var(--font-sm); color: var(--text-muted); cursor: pointer; border-left: 3px solid transparent; transition: all 150ms ease; }
.filter-rail-item:hover { background: var(--bg-surface); color: var(--text); }
.filter-rail-item.active { color: var(--text); background: rgba(47,107,255,.12); border-left-color: var(--blue); font-weight: 600; }

/* Jobs split-pane layout */
.jobs-split { display: flex; flex: 1; overflow: hidden; }
.jobs-list-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.jobs-detail-pane {
  width: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-card);
  overflow-y: auto;
  transition: width 280ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.jobs-detail-pane.open { width: 480px; }

/* Scheduler capacity bar */
.cap-bar-wrap { height: 6px; background: rgba(255,255,255,.1); border-radius: var(--radius-pill); overflow: hidden; margin-top: 4px; }
.cap-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 400ms ease; }
.cap-bar-fill.green  { background: var(--green); }
.cap-bar-fill.amber  { background: var(--amber); }
.cap-bar-fill.red    { background: var(--red); }

/* Admin left-rail */
.admin-split { display: flex; flex: 1; overflow: hidden; }
.admin-rail {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-primary);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-rail-item {
  padding: 10px 16px;
  font-size: var(--font-sm);
  color: var(--text-muted);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-rail-item:hover { background: var(--bg-surface); color: var(--text); }
.admin-rail-item.active { color: var(--text); background: rgba(47,107,255,.12); border-left-color: var(--blue); font-weight: 600; }
.admin-content-pane { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Compliance calendar tooltip */
.cal-event-tooltip {
  position: absolute;
  z-index: var(--z-modal);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: var(--font-xs);
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transform: translateY(-100%) translateY(-8px);
}

/* P1 fast-track button */
.btn-p1-fast {
  background: linear-gradient(135deg, var(--red) 0%, #dc2626 100%);
  color: white;
  border: none;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}
.btn-p1-fast:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,.4); }

/* Notification badge on topbar */
.topbar-alert-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}