/* Paddick Tender Radar -- all styles. Split out of index.html in v59 so
   the three concerns (markup / style / behaviour) are separately
   navigable; still served statically with no build step. */

  :root {
    --bg: #f3f4f7;
    --panel: #ffffff;
    --panel-2: #f7f8fa;
    --line: #e3e5ea;
    --line-bright: #cdd1db;
    --ink: #191c22;
    --muted: #6b7280;
    --charcoal: #0e1117;
    --brass: #c8870f;
    --brass-dark: #9c690a;
    --brass-glow: rgba(200,135,15,0.22);
    --brass-tint: #fbf1de;
    --green: #17a367;
    --green-bg: #e7f7ef;
    --green-glow: rgba(23,163,103,0.25);
    --amber: #c8870f;
    --amber-bg: #fbf1de;
    --red: #d64545;
    --red-bg: #fceeed;
    --red-glow: rgba(214,69,69,0.25);
    --mono: "Consolas", "Courier New", monospace;
    --sans: Arial, Helvetica, sans-serif;
    --serif: "Arial Black", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: var(--sans);
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(200,135,15,0.06), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(23,163,103,0.05), transparent 55%),
      var(--bg);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  header {
    background: linear-gradient(180deg, #0d0f14 0%, #060709 100%);
    padding: 18px 36px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 0 var(--brass);
    position: relative;
  }
  header img.logo { height: 48px; width: auto; flex-shrink: 0; }
  header .header-text .eyebrow {
    font-family: var(--mono);
    font-size: 12.1px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 6px;
  }
  header h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 28.8px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff;
  }
  header .sub {
    font-size: 14.3px;
    color: #a3aab7;
    margin-top: 6px;
    font-family: var(--sans);
  }

  /* ---------- Top bar controls ---------- */
  .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .topbar-search { position: relative; }
  .topbar-search input {
    width: 260px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    color: #fff;
    font-family: var(--sans);
    font-size: 13.5px;
  }
  .topbar-search input::placeholder { color: #7b8291; }
  .topbar-search input:focus { outline: none; border-color: var(--brass); background: rgba(255,255,255,0.09); }
  .topbar-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #7b8291; font-size: 14px; pointer-events: none; }
  .topbar-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; width: 360px; max-height: 420px; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 20px 48px -12px rgba(0,0,0,0.35); z-index: 50; display: none;
  }
  .topbar-search-results.open { display: block; }
  .topbar-search-result {
    padding: 10px 14px; border-bottom: 1px solid var(--panel-2); cursor: pointer; color: var(--ink);
  }
  .topbar-search-result:last-child { border-bottom: none; }
  .topbar-search-result:hover { background: var(--panel-2); }
  .topbar-search-result .tsr-title { font-size: 13px; font-weight: 600; }
  .topbar-search-result .tsr-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .topbar-search-empty { padding: 14px; font-size: 12.5px; color: var(--muted); }

  .topbar-pill {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px; padding: 6px 12px; font-size: 12px; color: #cfd3db; cursor: pointer; position: relative;
  }
  .topbar-pill .pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .topbar-pill .pill-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(23,163,103,0.6); }
  .topbar-pill .pill-dot.error { background: var(--red); box-shadow: 0 0 6px rgba(214,69,69,0.6); }

  .topbar-icon-btn {
    position: relative; width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #cfd3db; cursor: pointer; font-size: 15px;
  }
  .topbar-icon-btn:hover { background: rgba(255,255,255,0.11); }
  .topbar-badge {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px;
    background: var(--red); color: #fff; font-size: 9.5px; font-family: var(--mono); font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
  }
  .topbar-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 440px; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 20px 48px -12px rgba(0,0,0,0.35); z-index: 50; display: none; color: var(--ink);
  }
  .topbar-dropdown.open { display: block; }
  .topbar-dropdown-header { padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 13.5px; font-weight: 500; }
  .topbar-notif-item { padding: 10px 14px; border-bottom: 1px solid var(--panel-2); font-size: 12.5px; }
  .topbar-notif-item:last-child { border-bottom: none; }
  .topbar-notif-item.is-alert { background: var(--red-bg); }
  .topbar-notif-time { color: var(--muted); font-size: 10.5px; font-family: var(--mono); }
  .topbar-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .topbar-user-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--brass);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 13px; font-weight: 600; flex-shrink: 0;
  }
  .topbar-user-name { font-size: 12.8px; color: #e4e6eb; }

  .summary-bar {
    display: flex;
    gap: 14px;
    padding: 0 0 4px;
    flex-wrap: wrap;
  }
  .stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-bright);
    border-radius: 10px;
    padding: 16px 22px;
    min-width: 150px;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  }
  .stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(20,20,30,0.15); }
  .stat b {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
    display: block;
    line-height: 1.1;
    margin-bottom: 3px;
  }
  .stat { font-size: 13.8px; color: var(--muted); }
  .stat.g { border-left-color: var(--green); }
  .stat.g b { color: var(--green); }
  .stat.a { border-left-color: var(--amber); }
  .stat.a b { color: var(--amber); }
  .stat.r { border-left-color: var(--red); }
  .stat.r b { color: var(--red); }

  .panel {
    background: var(--panel);
    margin: 20px 0 32px;
    border-radius: 14px;
    padding: 24px 28px 30px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px -16px rgba(20,20,30,0.12);
  }

  .toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .toolbar select {
    font-family: var(--sans);
    font-size: 14.3px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--panel-2);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
  }
  .toolbar .refresh { margin-left: auto; }

  h2 { color: var(--ink); }

  table { width: 100%; border-collapse: collapse; }
  thead th {
    text-align: left;
    font-family: var(--mono);
    font-size: 11.6px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 10px;
    border-bottom: 1px solid var(--line-bright);
  }
  tbody tr { cursor: pointer; border-bottom: 1px solid var(--line); transition: background 0.15s; }
  tbody tr:hover { background: var(--panel-2); }
  tbody td { padding: 14px 10px; font-size: 14.9px; vertical-align: top; }
  tbody td strong { font-family: var(--serif); font-weight: 500; font-size: 16.5px; color: var(--ink); }

  .light {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
  .light.green { background: var(--green); box-shadow: 0 0 0 4px var(--green-glow); }
  .light.amber { background: var(--amber); box-shadow: 0 0 0 4px var(--brass-glow); }
  .light.red { background: var(--red); box-shadow: 0 0 0 4px var(--red-glow); }

  .badge {
    font-family: var(--mono);
    font-size: 11.6px;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    border: 1px solid transparent;
  }
  .badge.green { background: var(--green-bg); color: var(--green); border-color: rgba(23,163,103,0.25); }
  .badge.amber { background: var(--amber-bg); color: var(--amber); border-color: rgba(200,135,15,0.25); }
  .badge.red { background: var(--red-bg); color: var(--red); border-color: rgba(214,69,69,0.25); }

  .deadline { font-family: var(--mono); font-size: 13.8px; color: var(--muted); }
  .deadline.soon { color: var(--red); font-weight: 500; }

  .empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 15.4px;
    line-height: 1.7;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 18px;
    margin-top: 6px;
  }
  .pagination span { font-family: var(--mono); font-size: 12.1px; color: var(--muted); }

  /* Tender Workspace -- a real full-page view (id=page-workspace), sharing
     the shell's topbar and sidebar like every other page, rather than a
     drawer overlaid on top of whatever was underneath. This is the screen
     the day-to-day work actually happens in, so it gets the full canvas. */
  #page-workspace .ws-header, #page-workspace .ws-body { padding: 0; max-width: 1240px; }
  /* Long unbroken strings (URLs in error messages, reference numbers) must
     wrap rather than push the layout wider than the viewport. */
  #page-workspace .ws-panel { overflow-wrap: break-word; }
  .ws-back-btn {
    background: none; border: 1px solid var(--line); color: var(--muted);
    font-size: 12.8px; padding: 6px 14px; border-radius: 20px; cursor: pointer;
    margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px;
  }
  .ws-back-btn:hover { color: var(--ink); border-color: var(--line-bright); background: var(--panel-2); }
  #page-workspace h2 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21.8px; color: var(--ink); }
  #page-workspace .meta { font-family: var(--mono); font-size: 13.2px; color: var(--muted); margin-bottom: 20px; line-height: 1.9; }
  #page-workspace section { margin-bottom: 24px; }
  #page-workspace h3 {
    font-size: 12.1px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--brass-dark); font-family: var(--mono); margin-bottom: 10px; font-weight: 500;
  }
  #page-workspace p { line-height: 1.65; font-size: 16px; }
  .reason-list { font-size: 14.9px; line-height: 1.85; padding-left: 18px; }
  .status-row { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ---------- Tender Workspace tabs ---------- */
  .ws-tabbar {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin: 18px 0 0;
    padding-bottom: 0;
  }
  .ws-tab {
    padding: 9px 16px;
    font-size: 12.8px;
    font-family: var(--sans);
    color: var(--muted);
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ws-tab:hover { color: var(--ink); background: var(--panel-2); }
  .ws-tab.active {
    color: var(--brass-dark);
    font-weight: 600;
    background: var(--panel);
    border-color: var(--line);
    border-bottom: 1px solid var(--panel);
  }
  .ws-tab .ws-tab-count {
    font-size: 10px;
    font-family: var(--mono);
    background: var(--panel-2);
    border-radius: 8px;
    padding: 1px 6px;
    color: var(--muted);
  }
  .ws-tab.active .ws-tab-count { background: var(--brass-glow); color: var(--brass-dark); }
  .ws-panel { display: none; padding-top: 26px; }
  .ws-panel.active { display: block; }
  .clar-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
  .clar-question { font-size: 14.3px; font-weight: 600; color: var(--ink); }
  .clar-answer { font-size: 13.6px; color: var(--ink); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--panel-2); }
  .clar-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
  .clar-unanswered { font-size: 12.5px; color: var(--amber); margin-top: 6px; font-style: italic; }
  .doc-link { display: block; font-size: 14.9px; margin-bottom: 6px; color: var(--brass-dark); text-decoration: none; }
  .doc-link:hover { text-decoration: underline; }
  textarea {
    width: 100%; min-height: 70px; font-family: var(--sans); font-size: 14.9px;
    padding: 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical;
    background: var(--panel-2); color: var(--ink);
  }
  .draft-output {
    white-space: pre-wrap; font-size: 14.9px; line-height: 1.65; background: var(--panel-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-top: 14px;
    max-height: 420px; overflow-y: auto; color: var(--ink);
  }
  .warn {
    font-size: 13.8px; color: var(--brass-dark); background: var(--brass-tint);
    padding: 10px 12px; border-radius: 8px; margin-top: 12px; border: 1px solid rgba(200,135,15,0.2);
  }

  /* Button system with real hierarchy, instead of one flat treatment for
     everything. This is the pattern most enterprise dashboards use:
       - Segmented control for the traffic-light filters -- one grouped
         track, not four loose separate pills
       - Ghost buttons for secondary/utility actions (refresh, re-score,
         dedupe) -- quiet, don't compete for attention
       - One solid primary button for the actual main action (pull new
         tenders) -- the only thing that should visually shout
       - draft-btn (drawer actions) sits between the two: a solid dark
         button, since these do trigger real actions, but without the
         primary's brass fill, which is reserved for the single most
         important action per screen */
  button {
    font-family: var(--sans);
    font-size: 14.3px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, border-color 0.15s;
  }

  .segmented {
    display: inline-flex;
    align-items: center;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
  }
  .segmented button {
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 7px 14px;
    color: var(--muted);
    display: flex;
    align-items: center;
  }
  .segmented button:hover { color: var(--ink); }
  .segmented button.active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(20,20,30,0.12);
    font-weight: 600;
  }
  .seg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
  .seg-dot.green { background: var(--green); }
  .seg-dot.amber { background: var(--amber); }
  .seg-dot.red { background: var(--red); }

  .toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

  .btn-ghost {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    padding: 8px 14px;
  }
  .btn-ghost:hover {
    border-color: var(--brass-dark);
    background: var(--brass-tint);
  }
  .btn-ghost:disabled { opacity: 0.4; cursor: default; }

  .btn-primary {
    background: linear-gradient(135deg, var(--brass), var(--brass-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px var(--brass-glow);
  }
  .btn-primary:hover {
    box-shadow: 0 10px 22px -6px var(--brass-glow);
    transform: translateY(-1px);
  }
  .btn-primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

  .draft-btn, a.draft-btn, .pagination button {
    background: #14161b;
    color: #fff !important;
    border: 1px solid #14161b;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: var(--sans);
    font-size: 14.3px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
  }
  .draft-btn:hover, a.draft-btn:hover, .pagination button:hover {
    background: #2a2d34;
    box-shadow: 0 6px 16px -6px rgba(20,20,30,0.4);
    transform: translateY(-1px);
  }
  .draft-btn:disabled, .pagination button:disabled {
    opacity: 0.35;
    box-shadow: none;
    transform: none;
  }

  .status-row button {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-bright);
    border-radius: 20px;
    padding: 6px 13px;
    font-family: var(--sans);
    font-size: 13.2px;
    cursor: pointer;
  }
  .status-row button:hover { border-color: var(--brass-dark); }
  .status-row button.active {
    background: var(--brass);
    color: #fff;
    border-color: var(--brass);
    font-weight: 700;
  }
  .relevance-btn {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-bright);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 14px;
    margin-right: 4px;
  }
  .relevance-btn:hover {
    border-color: var(--brass-dark);
    background: var(--brass-tint);
  }
  .relevance-btn:disabled { opacity: 0.4; cursor: default; }
  .relevance-btn.active-yes {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
  }
  .relevance-btn.active-no {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }

  /* ---------- App shell / navigation ---------- */
  .app-shell { display: flex; align-items: stretch; min-height: 100vh; }
  .sidebar {
    width: 208px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0d0f14 0%, #060709 100%);
    padding: 18px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 2px 0 0 var(--brass);
  }
  .sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 18px 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sidebar .brand img { height: 30px; width: auto; }
  .sidebar .brand span {
    font-family: var(--serif);
    color: #fff;
    font-size: 15.5px;
    letter-spacing: -0.01em;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    margin: 1px 8px;
    border-radius: 8px;
    color: #a3aab7;
    font-size: 13.6px;
    font-family: var(--sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
    user-select: none;
  }
  .nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
  .nav-item:hover { background: rgba(255,255,255,0.05); color: #e4e6eb; }
  .nav-item.active {
    background: var(--brass-glow);
    color: #ffd699;
    border-color: rgba(200,135,15,0.35);
    font-weight: 600;
  }
  .nav-item .soon-tag {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brass);
    opacity: 0.75;
    font-family: var(--mono);
  }
  .main-content { flex: 1; min-width: 0; }
  /* Every page provides one consistent content inset -- 26px gap below the
     header (matching what Opportunities always had) and 36px sides -- so
     individual containers no longer carry their own side margins. */
  .page { display: none; padding: 26px 36px 44px; }
  .page.active { display: block; }

  /* ---------- Placeholder pages ---------- */
  .placeholder-page {
    margin: 20px 0;
    padding: 48px 36px;
    text-align: center;
    background: var(--panel);
    border: 1px dashed var(--line-bright);
    border-radius: 14px;
    color: var(--muted);
  }
  .placeholder-page h2 { font-family: var(--serif); color: var(--ink); font-size: 19.8px; margin: 0 0 10px; }
  .placeholder-page ul { text-align: left; max-width: 480px; margin: 18px auto 0; padding-left: 20px; line-height: 1.9; font-size: 13.6px; }

  /* ---------- Dashboard grid ---------- */
  .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
    margin: 0 0 32px;
  }
  .dash-grid.full-width { grid-template-columns: 1fr; }
  .dash-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 21px 23px 23px;
    box-shadow: 0 12px 32px -16px rgba(20,20,30,0.12);
  }
  .dash-card h3 {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dash-card h3 .card-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2px 9px;
  }
  .dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .dash-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--panel-2);
  }
  .dash-row:last-child { border-bottom: none; }
  .dash-row:hover { background: var(--panel-2); }
  .dash-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .dash-row .dot.green { background: var(--green); }
  .dash-row .dot.amber { background: var(--amber); }
  .dash-row .dot.red { background: var(--red); }
  .dash-row .row-main { flex: 1; min-width: 0; }
  .dash-row .row-title {
    font-size: 13.2px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dash-row .row-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .dash-row .row-meta { font-size: 11.5px; color: var(--muted); flex-shrink: 0; text-align: right; }
  .dash-empty { color: var(--muted); font-size: 13px; padding: 10px 4px; }

  .portal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: 13.2px;
    border-bottom: 1px solid var(--panel-2);
  }
  /* Column layout: the portal name flexes, the imported count is one
     right-aligned column, the status pill another -- so the numbers line
     up down the widget instead of floating wherever leftover space lands. */
  .portal-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-row:last-child { border-bottom: none; }
  .portal-status {
    font-size: 11px;
    font-family: var(--mono);
    padding: 2px 9px;
    border-radius: 10px;
    min-width: 112px;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .portal-status.ok { background: var(--green-bg); color: var(--green); }
  .portal-status.error { background: var(--red-bg); color: var(--red); }
  .portal-health-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
  }
  .portal-health-meta b { color: var(--ink); font-family: var(--mono); }

  .activity-row { display: flex; gap: 12px; padding: 8px 4px; font-size: 12.8px; border-bottom: 1px solid var(--panel-2); }
  .activity-row:last-child { border-bottom: none; }
  .activity-row .activity-time { font-family: var(--mono); color: var(--muted); width: 92px; flex-shrink: 0; }
  .activity-row .activity-type { color: var(--brass-dark); font-weight: 600; margin-right: 6px; }

  .pipeline-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--panel-2); font-size: 13.4px; }
  .pipeline-stat-row:last-child { border-bottom: none; }
  .pipeline-stat-row .pv-value { font-family: var(--mono); color: var(--ink); }
  .pipeline-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--line); }
  .pipeline-total b { font-family: var(--serif); font-size: clamp(17px, 2.2vw, 24px); color: var(--brass-dark); overflow-wrap: anywhere; }

  /* ---------- Executive KPI strip (v2) ---------- */
  /* ---------- Action Centre ---------- */
  .action-centre {
    margin: 0 0 20px;
    background: linear-gradient(120deg, #0d0f14 0%, #1a1d24 100%);
    border-radius: 14px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 12px 32px -16px rgba(20,20,30,0.3);
  }
  .action-centre-greeting { font-family: var(--serif); font-size: 19px; color: #fff; margin: 0 0 6px; }
  .action-centre-items { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #cfd3db; }
  .action-centre-items b { color: var(--brass); font-family: var(--mono); }
  .action-centre-items .warn-item b { color: var(--red); }
  .action-centre-btn {
    background: var(--brass); color: #fff; border: none; border-radius: 8px;
    padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0;
  }
  .action-centre-btn:hover { background: var(--brass-dark); }

  /* ---------- Match % badges/stars ---------- */
  .match-ring { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; flex-direction: column; line-height: 1.05; }
  .match-ring.tier-excellent { background: #0e7a45; }
  .match-ring.tier-strong { background: var(--green); }
  .match-ring.tier-good { background: var(--amber); }
  .match-ring.tier-weak { background: #9aa1ad; }
  .match-ring small { font-size: 8px; font-weight: 400; opacity: 0.85; }
  .match-label { font-size: 10.5px; font-weight: 600; margin-top: 2px; }
  .match-label.tier-excellent, .match-label.tier-strong { color: var(--green); }
  .match-label.tier-good { color: var(--amber); }
  .match-label.tier-weak { color: var(--muted); }
  .match-stars { font-size: 10px; letter-spacing: 1px; color: var(--brass); }

  /* ---------- Richer opportunity cards (Today's Opportunities v2) ---------- */
  .opp-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
  .opp-card:hover { background: var(--panel-2); }
  .opp-card:last-child { margin-bottom: 0; }
  .opp-card-body { flex: 1; min-width: 0; }
  .opp-card-top { display: flex; align-items: center; gap: 7px; }
  .opp-card-title { font-size: 13.4px; font-weight: 600; color: var(--ink); }
  .opp-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.3px; color: var(--muted); margin-top: 5px; }
  .opp-card-open { font-size: 11.5px; color: var(--brass-dark); font-weight: 600; margin-top: 6px; }

  .urgency-badge.with-dot::before { content: attr(data-dot); margin-right: 3px; }

  .portal-live-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
  .portal-live-dot.ok { background: var(--green); box-shadow: 0 0 5px rgba(23,163,103,0.6); }
  .portal-live-dot.error { background: var(--red); box-shadow: 0 0 5px rgba(214,69,69,0.6); }
  .portal-row-meta { font-size: 10.5px; color: var(--muted); font-family: var(--mono); width: 96px; text-align: right; flex-shrink: 0; margin-right: 14px; }

  .kpi-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
  .kpi-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 148px;
    max-width: 220px;
    flex: 1 1 148px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04);
    overflow: hidden;
  }
  .kpi-card b { font-family: var(--serif); font-size: clamp(17px, 2vw, 25px); font-weight: 500; display: block; line-height: 1.15; margin-bottom: 4px; color: var(--ink); overflow-wrap: anywhere; white-space: normal; }
  /* Text-valued KPI figures ("Due tomorrow", "3d left") -- smaller, and
     wrap at word boundaries only, so "tomorrow" never breaks mid-word. */
  .kpi-card b.kpi-text { font-size: clamp(15px, 1.5vw, 20px); overflow-wrap: normal; word-break: keep-all; }
  .kpi-card span { font-size: 11.8px; color: var(--muted); }
  .kpi-card.accent-blue b { color: #2563a8; }
  .kpi-card.accent-green b { color: var(--green); }
  .kpi-card.accent-amber b { color: var(--amber); }
  .kpi-card .kpi-benchmark { display: block; font-size: 10.5px; color: var(--brass-dark); margin-top: 3px; font-family: var(--mono); }

  /* Featured asymmetric layout: wide left card, narrower right card */
  .dash-grid-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 20px; align-items: start; }
  .widget-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--panel-2); }
  .widget-pagination button {
    padding: 5px 12px; border: 1px solid var(--line-bright); border-radius: 7px;
    background: var(--panel); color: var(--ink); cursor: pointer; font-size: 12px; font-family: var(--sans);
  }
  .widget-pagination button:disabled { opacity: 0.4; cursor: default; }
  .widget-pagination button:not(:disabled):hover { background: var(--panel-2); }
  .widget-pagination .page-info { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
  @media (max-width: 900px) { .dash-grid-featured { grid-template-columns: 1fr; } }

  /* AI Recommended cards */
  .ai-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .ai-card:hover { background: var(--panel-2); }
  .ai-card:last-child { margin-bottom: 0; }
  .ai-score-ring {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    color: #fff;
  }
  .ai-score-ring.green { background: var(--green); }
  .ai-score-ring.amber { background: var(--amber); }
  .ai-score-ring.red { background: var(--red); }
  .ai-card-body { flex: 1; min-width: 0; }
  .ai-card-title { font-size: 13.6px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .ai-card-buyer { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .ai-card-value { font-size: 12.5px; color: var(--brass-dark); font-family: var(--mono); margin-top: 4px; }
  .ai-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
  .ai-tag { font-size: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--muted); }

  /* Closing Soon urgency */
  .urgency-badge { font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; }
  .urgency-today { background: var(--red-bg); color: var(--red); }
  .urgency-tomorrow { background: var(--brass-tint); color: var(--brass-dark); }
  .urgency-soon { background: #fff8e1; color: #9a7b1f; }
  .urgency-later { background: var(--green-bg); color: var(--green); }

  /* Today's Opportunities richer rows */
  .today-row { padding: 10px 8px; border-bottom: 1px solid var(--panel-2); }
  .today-row:last-child { border-bottom: none; }
  .today-row-top { display: flex; align-items: center; gap: 8px; }
  .today-new-badge { font-size: 9.5px; font-family: var(--mono); background: var(--brass); color: #fff; border-radius: 6px; padding: 1px 6px; letter-spacing: 0.04em; }
  .today-row-title { font-size: 13.4px; color: var(--ink); flex: 1; }
  .today-row-meta { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }

  /* Pipeline bar chart */
  .pipeline-bar-row { margin-bottom: 12px; }
  .pipeline-bar-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
  .pipeline-bar-label span:last-child { flex-shrink: 0; }
  .pipeline-bar-track { background: var(--panel-2); border-radius: 6px; height: 10px; overflow: hidden; }
  .pipeline-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brass-dark), var(--brass)); border-radius: 6px; }

  /* ---------- Today's Queue ---------- */
  .queue-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
  .queue-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
    padding: 8px 16px; font-size: 12.8px; cursor: pointer; color: var(--ink);
  }
  .queue-pill b { font-family: var(--mono); font-size: 14px; }
  .queue-pill:hover { background: var(--panel-2); }
  .queue-pill.done { color: var(--muted); }
  .queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 18px; margin: 0 0 32px; }
  .queue-step { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
  .queue-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .queue-step-num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--brass); color: #fff;
    display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 700; flex-shrink: 0;
  }
  .queue-step-head h3 { font-family: var(--serif); font-size: 14px; font-weight: 500; margin: 0; flex: 1; }
  .queue-step-count { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border-radius: 10px; padding: 2px 9px; color: var(--muted); }
  .queue-step.all-clear { opacity: 0.65; }
  .queue-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--panel-2); font-size: 13px; cursor: pointer; border-radius: 6px; }
  .queue-item:hover { background: var(--panel-2); }
  .queue-item:last-child { border-bottom: none; }
  .queue-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .queue-item-sub { color: var(--muted); font-size: 11px; }
  .queue-empty-note { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }

  .nav-badge {
    margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--brass); color: #fff; font-size: 10px; font-family: var(--mono); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  }

  /* KPI colour semantics: green = business positive, amber = needs attention,
     red = urgent, blue = financial, default ink = informational */
  .kpi-card.accent-red b { color: var(--red); }
  .kpi-card.accent-grey b { color: var(--muted); }

  /* Opportunity table rows: thin traffic-light left border for effortless scanning */
  tr.opp-row-green td:first-child { border-left: 3px solid var(--green); }
  tr.opp-row-amber td:first-child { border-left: 3px solid var(--amber); }
  tr.opp-row-red td:first-child { border-left: 3px solid #c9ccd3; }
  .row-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
  .row-tag { font-size: 9.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
  .row-match { font-family: var(--mono); font-size: 12px; font-weight: 700; }
  .row-match.tier-excellent, .row-match.tier-strong { color: var(--green); }
  .row-match.tier-good { color: var(--amber); }
  .row-match.tier-weak { color: var(--muted); }

  /* Buyer initials avatar on AI cards */
  .buyer-initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--panel-2);
    border: 1px solid var(--line); font-size: 8.5px; font-weight: 700; color: var(--muted);
    margin-right: 5px; vertical-align: -4px; font-family: var(--mono);
  }
  .ai-why { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; }
  .ai-why .tick { color: var(--green); margin-right: 3px; }

  /* ---------- Filter bar (Opportunities) ---------- */
  .filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  }
  .filter-bar input, .filter-bar select {
    padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 7px;
    font-family: var(--sans); font-size: 12.8px; background: var(--panel); color: var(--ink);
  }
  .filter-bar input { width: 130px; }
  .filter-bar label { font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }

  /* ---------- Calendar ---------- */
  .cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
  .cal-title { font-family: var(--serif); font-size: 18px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 32px; }
  .cal-dow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: 4px 0; font-family: var(--mono); }
  .cal-day {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    min-height: 96px; padding: 6px 8px; font-size: 12px; overflow: hidden;
  }
  .cal-day.other-month { opacity: 0.35; }
  .cal-day.today-cell { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
  .cal-day-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 4px; }
  .cal-event {
    background: var(--brass-tint); border-left: 3px solid var(--brass); border-radius: 4px;
    padding: 2px 6px; font-size: 10.5px; margin-bottom: 3px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
  }
  .cal-event.urgent { background: var(--red-bg); border-left-color: var(--red); }
  .cal-event:hover { filter: brightness(0.95); }
  .cal-more { font-size: 10px; color: var(--muted); }

  /* ---------- Knowledge Base ---------- */
  .kb-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin: 0 0 32px; align-items: start; }
  .kb-sections { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  .kb-section-item { padding: 9px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); }
  .kb-section-item:hover { background: var(--panel-2); }
  .kb-section-item.active { background: var(--brass-tint); color: var(--brass-dark); font-weight: 600; }
  .kb-main { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
  .kb-doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--panel-2); font-size: 13.4px; }
  .kb-doc-row:last-child { border-bottom: none; }
  .kb-doc-meta { color: var(--muted); font-size: 11.5px; margin-left: auto; flex-shrink: 0; font-family: var(--mono); }
  .kb-doc-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 15px; }

  .buyer-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
  .buyer-card:hover { background: var(--panel-2); }
  .buyer-card-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .buyer-card-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
  .buyer-card-stats b { color: var(--ink); font-family: var(--mono); }

  /* ---------- Analytics ---------- */
  .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; margin: 0 0 32px; }
  .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; justify-content: flex-end; }
  .bar-fill { width: 100%; max-width: 42px; background: linear-gradient(180deg, var(--brass), var(--brass-dark)); border-radius: 4px 4px 0 0; min-height: 2px; }
  .bar-fill.alt { background: linear-gradient(180deg, #6ba3d6, #2563a8); }
  .bar-label { font-size: 9px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
  .bar-value { font-size: 9.5px; color: var(--ink); font-family: var(--mono); }
  .chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 10px; }
  .chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
  .lesson-row { padding: 12px 4px; border-bottom: 1px solid var(--panel-2); }
  .lesson-row:last-child { border-bottom: none; }
  .lesson-status { font-size: 10px; font-family: var(--mono); text-transform: uppercase; padding: 2px 8px; border-radius: 8px; margin-right: 8px; }
  .lesson-status.won { background: var(--green-bg); color: var(--green); }
  .lesson-status.lost { background: var(--red-bg); color: var(--red); }
  .lesson-notes { font-size: 13px; margin-top: 6px; color: var(--ink); }
  .forecast-stat { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--panel-2); font-size: 13.4px; }
  .forecast-stat:last-child { border-bottom: none; }
  .forecast-stat b { font-family: var(--mono); }

  /* ---------- Settings & Help ---------- */
  .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; margin: 0 0 32px; }
  .settings-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--panel-2); font-size: 13.2px; }
  .settings-row:last-child { border-bottom: none; }
  .settings-row b { font-family: var(--mono); text-align: right; }
  .settings-note { font-size: 11.8px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
  .kbd { font-family: var(--mono); font-size: 11px; background: var(--panel-2); border: 1px solid var(--line-bright); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
  .theme-toggle { display: flex; align-items: center; gap: 10px; }
  .theme-toggle button { padding: 7px 14px; border: 1px solid var(--line-bright); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 12.8px; }
  .theme-toggle button.active { background: var(--brass); border-color: var(--brass); color: #fff; }

  /* ---------- Dark mode ---------- */
  body.dark {
    --bg: #14161b;
    --panel: #1d2027;
    --panel-2: #24272f;
    --line: #2f333d;
    --line-bright: #3d424e;
    --ink: #e8eaef;
    --muted: #9aa1ad;
    --brass-tint: #33291a;
    --green-bg: #16311f;
    --amber-bg: #33291a;
    --red-bg: #38201f;
  }
  body.dark { background: var(--bg); }

  /* ---------- Kanban board ---------- */
  .kanban-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; flex-wrap: wrap; gap: 10px; }
  .kanban-board {
    display: flex;
    gap: 14px;
    margin: 0 0 32px;
    overflow-x: auto;
    padding-bottom: 10px;
    align-items: flex-start;
  }
  .kanban-col {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    min-width: 250px;
    max-width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 260px);
  }
  .kanban-col-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
  }
  .kanban-col-title { font-family: var(--serif); font-size: 13.5px; font-weight: 500; color: var(--ink); }
  .kanban-col-count { font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1px 7px; }
  .kanban-col-value { font-size: 10.5px; color: var(--muted); font-family: var(--mono); padding: 0 14px 10px; flex-shrink: 0; }
  .kanban-col-body { padding: 10px; overflow-y: auto; flex: 1; min-height: 60px; }
  .kanban-col-body.drag-over { background: var(--brass-glow); }
  .kanban-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-bright);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(20,20,30,0.05);
  }
  .kanban-card:active { cursor: grabbing; }
  .kanban-card.dragging { opacity: 0.4; }
  .kanban-card.green { border-left-color: var(--green); }
  .kanban-card.amber { border-left-color: var(--amber); }
  .kanban-card.red { border-left-color: var(--red); }
  .kanban-card-title { font-size: 12.8px; color: var(--ink); line-height: 1.35; margin-bottom: 4px; }
  .kanban-card-buyer { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
  .kanban-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10.8px; color: var(--muted); font-family: var(--mono); }
  .kanban-card-deadline.due-soon { color: var(--red); font-weight: 600; }
  .kanban-empty { font-size: 11.5px; color: var(--muted); text-align: center; padding: 16px 6px; }

  /* ============================================================
     Responsive layer (tablet & phone). Strategy, not per-page hacks:
     - the sidebar becomes a sticky horizontal nav strip that scrolls
     - every auto-fit grid collapses to one column instead of forcing
       its minmax() floor past the viewport
     - wide content (tender table, calendar, workspace tabs) scrolls
       horizontally inside its container rather than breaking the page
     ============================================================ */
  @media (max-width: 940px) {
    .app-shell { flex-direction: column; }
    .sidebar {
      width: 100%; box-sizing: border-box;
      flex-direction: row; align-items: center;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      padding: 6px 10px; gap: 2px;
      position: sticky; top: 0; z-index: 25;
      box-shadow: 0 2px 0 var(--brass);
    }
    .sidebar .brand { border-bottom: none; padding: 0 12px 0 2px; margin: 0; flex-shrink: 0; }
    .sidebar .brand img { height: 24px; }
    .sidebar .brand span { display: none; }
    .nav-item { white-space: nowrap; flex-shrink: 0; margin: 0 2px; padding: 8px 12px; font-size: 13px; }

    header { flex-wrap: wrap; padding: 14px 16px; gap: 10px 14px; }
    header img.logo { height: 34px; }
    header h1 { font-size: 21px; }
    header .sub { font-size: 12.6px; }
    .topbar-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
    .topbar-search { flex: 1; min-width: 180px; }
    .topbar-search input { width: 100%; box-sizing: border-box; }
    .topbar-pill { display: none; }         /* portal status lives on the dashboard widget */
    .topbar-user-name { display: none; }    /* avatar alone identifies you */

    .page { padding: 16px 14px 40px; }

    /* Grids: one column beats a sideways-broken two */
    .dash-grid, .dash-grid-featured, .queue-grid, .analytics-grid, .settings-grid { grid-template-columns: 1fr; }
    .kb-layout { grid-template-columns: 1fr; }
    .kb-sections { display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
    .kb-section-item { white-space: nowrap; flex-shrink: 0; }

    /* Wide content scrolls inside its container */
    .panel { overflow-x: auto; }
    .panel table { min-width: 780px; }
    #page-calendar { overflow-x: auto; }
    .cal-grid { min-width: 700px; }
    .ws-tabbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ws-tab { flex-shrink: 0; }
    .status-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .status-row button { flex-shrink: 0; }

    .kpi-card { min-width: 128px; flex: 1 1 40%; max-width: none; }
    .action-centre { flex-wrap: wrap; gap: 12px; }
  }

  @media (max-width: 560px) {
    header h1 { font-size: 19px; }
    .page { padding: 12px 10px 36px; }
    .kpi-card { flex: 1 1 100%; }
    .login-card { padding: 26px 20px 20px; }
  }

  /* Documents page filter counts need a gap from their labels */
  #docsKindFilter .card-count { margin-left: 6px; }

  /* ---------- Login overlay ---------- */
  #loginOverlay {
    position: fixed; inset: 0; z-index: 100;
    background:
      radial-gradient(ellipse 700px 420px at 20% -10%, rgba(200,135,15,0.14), transparent 60%),
      linear-gradient(180deg, #0d0f14 0%, #060709 100%);
    display: flex; align-items: center; justify-content: center;
  }
  .login-card {
    width: min(380px, 92vw);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 34px 36px 26px;
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 0 0 3px var(--brass-glow);
  }
  .login-card h2 { font-family: var(--serif); font-weight: 500; font-size: 21.6px; margin: 0 0 4px; color: var(--ink); }
  .login-card .login-sub { font-size: 13.4px; color: var(--muted); margin: 0 0 20px; }
  .login-card input {
    display: block; width: 100%; box-sizing: border-box;
    padding: 11px 13px; margin-bottom: 10px;
    border: 1px solid var(--line-bright); border-radius: 9px;
    font-family: var(--sans); font-size: 14.3px;
    background: var(--panel-2); color: var(--ink);
  }
  .login-card button {
    width: 100%; padding: 11px; margin-top: 4px;
    background: var(--brass); color: #fff; border: none; border-radius: 9px;
    font-size: 14.3px; font-weight: 600;
  }
  .login-card button:disabled { opacity: 0.6; }
  #loginError { font-size: 13px; color: var(--red); margin-top: 10px; min-height: 18px; }
  .login-card .login-foot { font-size: 11.8px; color: var(--muted); margin: 18px 0 0; line-height: 1.7; }

  /* ---------- Top bar user menu ---------- */
  .topbar-user-menu {
    display: none;
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.25);
    min-width: 170px; z-index: 30; overflow: hidden;
  }
  .topbar-user-menu.open { display: block; }
  .topbar-user-menu .menu-item { padding: 10px 14px; font-size: 13.4px; color: var(--ink); cursor: pointer; }
  .topbar-user-menu .menu-item:hover { background: var(--panel-2); }
  .topbar-user-menu .menu-meta { padding: 10px 14px; font-size: 11.8px; color: var(--muted); border-bottom: 1px solid var(--line); }