/* =====================================================================
   SWARM — Command Deck theme
   Industrial command-center skin. Dark (default) + Light, switched by
   <html data-theme="dark|light"> (set pre-paint from localStorage in
   view.php; toggle lives at the bottom of the command rail).

   HOW THIS WORKS
   --------------
   The app is styled with Tailwind's Play CDN (utility classes baked into
   the markup). Rather than rewrite every page, this stylesheet:
     1. Defines a palette of CSS variables per mode (:root = dark,
        html[data-theme="light"] = light).
     2. Remaps the neutral Tailwind utility classes the app uses
        (bg-white/slate-*, text-slate-*, borders) AND the legacy report
        classes (.swarm-tile/.swarm-table/.deals-table/.pill*) to those
        variables. Because the remap reads variables, light mode resolves
        to the native Tailwind values — so flipping data-theme reskins the
        whole app, every page, in both directions.
     3. Styles the chrome (rail/topbar) and dashboard tiles with the same
        variables, so they flip too.

   New Command-Deck dashboard components use the .cd-* / .swarm-* names
   below; the LEGACY per-page report styles (.swarm-tile/.swarm-table)
   now live here (variable-driven) instead of in each page's <style>.

   Bump SWARM_THEME_VER in includes/view.php when this changes.
   ===================================================================== */

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

/* ---------- DARK (default) ---------- */
:root{
  --bg:#0A0D10; --bg-2:#0E1217; --panel:#13181E; --panel-2:#181E26;
  --raise:#1E252E; --line:#262E38; --line-2:#313B47;
  --ink:#EAF0F6; --ink-2:#C2CCD6; --muted:#8A96A4; --muted-2:#5C6672;
  --amber:#FFC21A; --amber-deep:#E2A400; --amber-soft:rgba(255,194,26,.12); --amber-ink:#1a1205;
  --ok:#34D399; --warn:#FFB020; --crit:#FF5151;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* chrome */
  --rail-bg:linear-gradient(180deg,#0E1318,#0B0F13);
  --topbar-bg:rgba(11,15,19,.7);
  --grid-line:rgba(255,255,255,.018);
  --shadow-tile:0 16px 40px -18px rgba(0,0,0,.8);
  --page-glow:rgba(255,194,26,.05);

  /* Tailwind neutral remap targets (dark) */
  --c-bg-white:var(--panel); --c-bg-50:var(--bg-2); --c-bg-100:var(--panel-2);
  --c-bg-200:var(--raise); --c-bg-300:var(--line-2);
  --c-bg-700:var(--raise); --c-bg-800:#1A212A; --c-bg-900:#11161C;
  --c-tx-900:var(--ink); --c-tx-700:var(--ink-2); --c-tx-600:var(--ink-2);
  --c-tx-500:var(--muted); --c-tx-400:var(--muted-2);
  --c-bd-100:#1C232B; --c-bd-200:var(--line); --c-bd-300:var(--line-2); --c-bd-900:var(--line-2);
  --c-code-bg:var(--panel-2);

  /* semantic remap (dark = tinted surface + light text) */
  --c-em-bg:rgba(52,211,153,.10); --c-em-bg2:rgba(52,211,153,.16); --c-em-tx:#6EE7B7; --c-em-bd:rgba(52,211,153,.35);
  --c-am-bg:rgba(255,194,26,.10); --c-am-bg2:rgba(255,194,26,.16); --c-am-bg3:rgba(255,194,26,.22); --c-am-tx:var(--amber); --c-am-bd:rgba(255,194,26,.35);
  --c-ro-bg:rgba(255,81,81,.10); --c-ro-bg2:rgba(255,81,81,.16); --c-ro-tx:#FF8B8B; --c-ro-bd:rgba(255,81,81,.35);
  --c-sk-bg:rgba(56,189,248,.10); --c-sk-bg2:rgba(56,189,248,.16); --c-sk-tx:#7DD3FC; --c-sk-bd:rgba(56,189,248,.35);
  --c-vi-bg:rgba(167,139,250,.10); --c-vi-bg2:rgba(167,139,250,.16); --c-vi-tx:#C4B5FD; --c-vi-bd:rgba(167,139,250,.35);

  /* report pills (dark) */
  --pill-fin-bg:rgba(56,189,248,.16);  --pill-fin-tx:#7DD3FC;
  --pill-cash-bg:rgba(255,194,26,.16); --pill-cash-tx:var(--amber);
  --pill-active-bg:rgba(52,211,153,.16); --pill-active-tx:#6EE7B7;
  --pill-missing-bg:rgba(255,81,81,.16); --pill-missing-tx:#FF8B8B;
  --pill-reversed-bg:rgba(255,176,32,.16); --pill-reversed-tx:#FFD27A;
  --pill-pending-bg:rgba(56,189,248,.16); --pill-pending-tx:#7DD3FC;
  --pill-other-bg:var(--raise); --pill-other-tx:var(--muted);
}

/* ---------- LIGHT ---------- */
html[data-theme="light"]{
  --bg:#EEF2F7; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F5F8FB;
  --raise:#EAF0F6; --line:#E2E8F0; --line-2:#CBD5E1;
  --ink:#0F172A; --ink-2:#334155; --muted:#64748B; --muted-2:#94A3B8;
  --amber:#B45309; --amber-deep:#92400E; --amber-soft:rgba(180,83,9,.12); --amber-ink:#FFFFFF;
  --ok:#059669; --warn:#B45309; --crit:#DC2626;

  --rail-bg:linear-gradient(180deg,#FFFFFF,#F4F7FA);
  --topbar-bg:rgba(255,255,255,.82);
  --grid-line:rgba(15,23,42,.045);
  --shadow-tile:0 16px 40px -22px rgba(15,23,42,.25);
  --page-glow:rgba(180,83,9,.05);

  --c-bg-white:#FFFFFF; --c-bg-50:#F8FAFC; --c-bg-100:#F1F5F9;
  --c-bg-200:#E2E8F0; --c-bg-300:#CBD5E1;
  --c-bg-700:#334155; --c-bg-800:#1E293B; --c-bg-900:#0F172A;
  --c-tx-900:#0F172A; --c-tx-700:#334155; --c-tx-600:#475569;
  --c-tx-500:#64748B; --c-tx-400:#94A3B8;
  --c-bd-100:#F1F5F9; --c-bd-200:#E2E8F0; --c-bd-300:#CBD5E1; --c-bd-900:#0F172A;
  --c-code-bg:#F1F5F9;

  --c-em-bg:#ECFDF5; --c-em-bg2:#D1FAE5; --c-em-tx:#065F46; --c-em-bd:#6EE7B7;
  --c-am-bg:#FFFBEB; --c-am-bg2:#FEF3C7; --c-am-bg3:#FDE68A; --c-am-tx:#92400E; --c-am-bd:#FCD34D;
  --c-ro-bg:#FFF1F2; --c-ro-bg2:#FFE4E6; --c-ro-tx:#9F1239; --c-ro-bd:#FDA4AF;
  --c-sk-bg:#F0F9FF; --c-sk-bg2:#E0F2FE; --c-sk-tx:#075985; --c-sk-bd:#7DD3FC;
  --c-vi-bg:#F5F3FF; --c-vi-bg2:#EDE9FE; --c-vi-tx:#5B21B6; --c-vi-bd:#C4B5FD;

  --pill-fin-bg:#DBEAFE; --pill-fin-tx:#1E40AF;
  --pill-cash-bg:#FEF3C7; --pill-cash-tx:#92400E;
  --pill-active-bg:#DCFCE7; --pill-active-tx:#166534;
  --pill-missing-bg:#FEE2E2; --pill-missing-tx:#991B1B;
  --pill-reversed-bg:#FEF3C7; --pill-reversed-tx:#92400E;
  --pill-pending-bg:#DBEAFE; --pill-pending-tx:#1E40AF;
  --pill-other-bg:#F1F5F9; --pill-other-tx:#475569;
}

/* ---------- base ---------- */
html,body{background:var(--bg)!important}
body{
  font-family:var(--sans)!important; color:var(--ink)!important;
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--page-glow), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg))!important;
  background-attachment:fixed!important; -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1100px 700px at 70% 0%,#000 30%,transparent 85%);
          mask-image:radial-gradient(1100px 700px at 70% 0%,#000 30%,transparent 85%);
}
[x-cloak]{display:none!important}

/* =====================================================================
   TAILWIND NEUTRAL + SEMANTIC REMAP (variable-driven; light = native)
   ===================================================================== */
.bg-white{background-color:var(--c-bg-white)!important}
.bg-slate-50{background-color:var(--c-bg-50)!important}
.bg-slate-100{background-color:var(--c-bg-100)!important}
.bg-slate-200{background-color:var(--c-bg-200)!important}
.bg-slate-300{background-color:var(--c-bg-300)!important}
.bg-slate-700{background-color:var(--c-bg-700)!important}
.bg-slate-800{background-color:var(--c-bg-800)!important}
.bg-slate-900,.bg-slate-950{background-color:var(--c-bg-900)!important}
.via-white{--tw-gradient-via:var(--c-bg-white)!important}
.hover\:bg-slate-50:hover{background-color:var(--c-bg-100)!important}
.hover\:bg-slate-100:hover{background-color:var(--c-bg-200)!important}
.hover\:bg-slate-700:hover{background-color:var(--c-bg-700)!important}
.hover\:bg-slate-800:hover{background-color:var(--c-bg-800)!important}

.text-slate-900,.text-slate-800{color:var(--c-tx-900)!important}
.text-slate-700{color:var(--c-tx-700)!important}
.text-slate-600{color:var(--c-tx-600)!important}
.text-slate-500{color:var(--c-tx-500)!important}
.text-slate-400,.text-slate-300,.text-slate-200{color:var(--c-tx-400)!important}
.hover\:text-slate-900:hover,.hover\:text-slate-700:hover{color:var(--c-tx-900)!important}

.border-slate-100{border-color:var(--c-bd-100)!important}
.border-slate-200{border-color:var(--c-bd-200)!important}
.border-slate-300,.border-slate-400,.border-slate-500{border-color:var(--c-bd-300)!important}
.border-slate-700,.border-slate-900{border-color:var(--c-bd-900)!important}
.divide-slate-50>:not([hidden])~:not([hidden]),
.divide-slate-100>:not([hidden])~:not([hidden]),
.divide-slate-200>:not([hidden])~:not([hidden]){border-color:var(--c-bd-200)!important}
.ring-slate-900{--tw-ring-color:var(--c-bd-300)!important}
code{background-color:var(--c-code-bg)!important;color:var(--amber)!important}

.bg-emerald-50{background-color:var(--c-em-bg)!important}
.bg-emerald-100{background-color:var(--c-em-bg2)!important}
.bg-amber-50{background-color:var(--c-am-bg)!important}
.bg-amber-100{background-color:var(--c-am-bg2)!important}
.bg-amber-200{background-color:var(--c-am-bg3)!important}
.bg-rose-50{background-color:var(--c-ro-bg)!important}
.bg-rose-100{background-color:var(--c-ro-bg2)!important}
.bg-sky-50{background-color:var(--c-sk-bg)!important}
.bg-sky-100{background-color:var(--c-sk-bg2)!important}
.bg-violet-50{background-color:var(--c-vi-bg)!important}
.bg-violet-100{background-color:var(--c-vi-bg2)!important}
.text-emerald-900,.text-emerald-800{color:var(--c-em-tx)!important}
.text-amber-900,.text-amber-800,.text-amber-700{color:var(--c-am-tx)!important}
.text-rose-900,.text-rose-800,.text-rose-700,.text-rose-600{color:var(--c-ro-tx)!important}
.text-sky-900,.text-sky-800,.text-sky-700{color:var(--c-sk-tx)!important}
.text-violet-900,.text-violet-800{color:var(--c-vi-tx)!important}
.border-emerald-300{border-color:var(--c-em-bd)!important}
.border-amber-300{border-color:var(--c-am-bd)!important}
.border-rose-300,.border-rose-200{border-color:var(--c-ro-bd)!important}
.border-sky-300,.border-sky-200{border-color:var(--c-sk-bd)!important}
.border-violet-300{border-color:var(--c-vi-bd)!important}
a.text-sky-700{color:var(--c-sk-tx)!important}

/* form controls — themed in both modes (date/number/text inputs were
   rendering as light browser defaults with invisible text on dark) */
input[type="text"],input[type="number"],input[type="date"],input[type="datetime-local"],
input[type="email"],input[type="password"],input[type="search"],input[type="tel"],
input[type="time"],input[type="month"],input[type="url"],select,textarea{
  background-color:var(--panel)!important;color:var(--ink)!important;
  border-color:var(--line-2)!important;color-scheme:dark;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)!important}
html[data-theme="light"] input[type="text"],html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="email"],html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="time"],html[data-theme="light"] input[type="month"],
html[data-theme="light"] input[type="url"],html[data-theme="light"] select,html[data-theme="light"] textarea{color-scheme:light}
/* make the calendar/clock picker glyph visible on dark */
html:not([data-theme="light"]) input::-webkit-calendar-picker-indicator{filter:invert(.85)}

/* primary call-to-action (auth pages, etc.) — hornet gold, brighter on hover.
   Fixed golds so it reads on both light and dark panels. */
.swarm-cta{background:#E0A500!important;color:#1A1205!important;border-color:#E0A500!important;transition:background .14s,box-shadow .14s}
.swarm-cta:hover{background:#FFC21A!important;color:#1A1205!important;box-shadow:0 0 0 3px rgba(255,194,26,.28)}

/* =====================================================================
   CHROME — left command rail + topbar
   ===================================================================== */
.swarm-shell{position:relative;z-index:1;display:flex;min-height:100vh}
.swarm-rail{width:248px;flex:none;position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--rail-bg);display:flex;flex-direction:column;z-index:30}
.swarm-rail .brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid var(--line);text-decoration:none}
.swarm-rail .brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.swarm-rail .brand .wm{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:3px;color:var(--ink);line-height:1}
.swarm-rail .brand .sub{font-size:9px;letter-spacing:2px;color:var(--amber);text-transform:uppercase;margin-top:4px;font-weight:700;line-height:1.2}
.swarm-rail .scroll{flex:1;overflow-y:auto;padding:14px 12px}
.swarm-rail .grp{margin-bottom:18px}
.swarm-rail .grp h4{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--muted-2);text-transform:uppercase;margin:0 8px 8px;font-weight:700}
.swarm-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:500;text-decoration:none;border:1px solid transparent;margin-bottom:2px;position:relative;transition:.14s}
.swarm-nav svg{width:16px;height:16px;flex:none;color:var(--muted-2);transition:.14s}
.swarm-nav:hover{background:var(--panel-2);color:var(--ink)}
.swarm-nav:hover svg{color:var(--amber)}
.swarm-nav.active{background:linear-gradient(90deg,var(--amber-soft),transparent);color:var(--ink);border-color:var(--amber-soft)}
.swarm-nav.active svg{color:var(--amber)}
.swarm-nav.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--amber);border-radius:0 3px 3px 0;box-shadow:0 0 10px var(--amber)}
.swarm-nav .tag{margin-left:auto;font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:20px;background:var(--raise);color:var(--muted)}
.swarm-nav .tag.hot{background:var(--c-ro-bg2);color:var(--c-ro-tx)}
/* nested sub-nav (e.g. Floor Plan -> Floor Plan Payoff) */
.swarm-subgrp{margin:1px 0 3px 23px;padding-left:11px;border-left:1px solid var(--line)}
.swarm-nav.sub{padding:7px 11px;font-size:12.5px}
.swarm-nav.sub svg{width:9px;height:9px}
.swarm-nav.sub.active::before{display:none}
/* Accordion folder groups in the command rail */
.swarm-folder{margin-bottom:2px}
.swarm-folder>summary{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;list-style:none;border:1px solid transparent;transition:.14s;user-select:none}
.swarm-folder>summary::-webkit-details-marker{display:none}
.swarm-folder>summary:hover{background:var(--panel-2);color:var(--ink)}
.swarm-folder>summary .fico{width:16px;height:16px;flex:none;color:var(--muted-2);transition:.14s}
.swarm-folder>summary:hover .fico{color:var(--amber)}
.swarm-folder[open]>summary{color:var(--ink)}
.swarm-folder[open]>summary .fico{color:var(--amber)}
.swarm-folder>summary .chev{margin-left:auto;width:13px;height:13px;color:var(--muted-2);transition:transform .18s}
.swarm-folder[open]>summary .chev{transform:rotate(90deg)}
.swarm-fold-body{margin:1px 0 4px 14px;padding-left:10px;border-left:1px solid var(--line)}
.swarm-fold-body .swarm-nav{font-size:13px}
.swarm-fold-body .swarm-nav.active::before{left:-11px}
.swarm-rail .railfoot{padding:12px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.swarm-rail .railfoot b{color:var(--muted)}

/* theme toggle (bottom-left of rail) */
.swarm-themetoggle{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:10px;padding:8px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);font-family:var(--mono);font-size:11px;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;font-weight:500;transition:.14s}
.swarm-themetoggle:hover{border-color:var(--amber);color:var(--amber)}
.swarm-themetoggle svg{width:15px;height:15px;flex:none}
html[data-theme="light"] .swarm-themetoggle .ic-sun{display:none}
html:not([data-theme="light"]) .swarm-themetoggle .ic-moon{display:none}

.swarm-col{flex:1;min-width:0;display:flex;flex-direction:column}
.swarm-topbar{display:flex;align-items:center;gap:14px;padding:13px 26px;border-bottom:1px solid var(--line);background:var(--topbar-bg);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.swarm-topbar .crumb{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--muted)}
.swarm-topbar .crumb b{color:var(--ink)}
.swarm-topbar .spacer{flex:1}
.swarm-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.5px;padding:5px 11px;border:1px solid var(--line-2);border-radius:7px;color:var(--muted);text-decoration:none;transition:.14s}
.swarm-chip:hover{border-color:var(--amber);color:var(--ink)}
.swarm-chip .amber{color:var(--amber)}
.swarm-chip .ok{color:var(--ok)}
.swarm-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.swarm-dot.live{animation:swarm-pulse 1.9s infinite}
@keyframes swarm-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.swarm-user{display:flex;align-items:center;gap:10px;text-decoration:none}
.swarm-avatar{width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,var(--amber),var(--amber-deep));color:var(--amber-ink);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.swarm-user .meta{line-height:1.2}
.swarm-user .meta b{font-size:13px;color:var(--ink)}
.swarm-user .meta span{display:block;font-size:10px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:1px}
.swarm-main{flex:1;padding:24px 26px 48px;width:100%;max-width:1320px;margin:0 auto}
.swarm-burger{display:none;background:none;border:1px solid var(--line-2);border-radius:7px;color:var(--ink);width:36px;height:34px;cursor:pointer;align-items:center;justify-content:center}
.swarm-burger svg{width:18px;height:18px}
.swarm-rail-scrim{display:none}

/* =====================================================================
   COMMAND-DECK DASHBOARD COMPONENTS (splash) — namespaced .cd-* for the
   tile/table so they don't collide with the legacy report classes below.
   ===================================================================== */
.swarm-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.swarm-hero h1{font-size:28px;margin:0;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.swarm-hero h1 .accent{color:var(--amber)}
.swarm-hero p{margin:7px 0 0;color:var(--muted);font-size:13.5px}
.swarm-btn{font-family:var(--mono);font-size:12px;letter-spacing:.5px;padding:10px 16px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);cursor:pointer;text-transform:uppercase;font-weight:500;transition:.14s;text-decoration:none;display:inline-block}
.swarm-btn:hover{border-color:var(--amber);color:var(--amber)}
.swarm-btn.solid{background:linear-gradient(135deg,var(--amber),var(--amber-deep));color:var(--amber-ink);border:0;font-weight:700}
.swarm-btn.solid:hover{filter:brightness(1.08);color:var(--amber-ink)}
.swarm-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.swarm-stat{background:linear-gradient(180deg,var(--panel),var(--bg));border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden}
.swarm-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--amber-soft),transparent 70%)}
.swarm-stat .lab{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase}
.swarm-stat .val{font-family:var(--mono);font-size:32px;font-weight:700;margin-top:6px;line-height:1;color:var(--ink)}
.swarm-stat .val.ok{color:var(--ok)} .swarm-stat .val.amber{color:var(--amber)} .swarm-stat .val.crit{color:var(--crit)}
.swarm-stat .val.sm{font-size:20px;padding-top:8px}
.swarm-stat .delta{font-family:var(--mono);font-size:11px;margin-top:7px;color:var(--muted)}
.swarm-stat .delta.up{color:var(--ok)} .swarm-stat .delta.down{color:var(--crit)}
.swarm-sec{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.swarm-sec h2{font-size:13px;font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0;font-weight:700}
.swarm-sec .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.swarm-sec .hint{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.swarm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.cd-tile{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.16s;position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.cd-tile:hover{transform:translateY(-3px);border-color:var(--c-am-bd);box-shadow:var(--shadow-tile),0 0 0 1px var(--amber-soft)}
.cd-tile .top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cd-tile .badge{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg);flex:none}
.cd-tile .badge svg{width:19px;height:19px;color:var(--amber)}
.cd-tile .ttl{font-weight:700;font-size:15px;color:var(--ink)}
.cd-tile .ttl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;font-weight:500;margin-top:3px}
.swarm-health{margin-left:auto;font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.swarm-health.ok{background:var(--c-em-bg2);color:var(--ok)}
.swarm-health.warn{background:rgba(255,176,32,.16);color:var(--warn)}
.swarm-health.crit{background:var(--c-ro-bg2);color:var(--c-ro-tx)}
.cd-tile .body{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1}
.swarm-big{display:flex;align-items:baseline;gap:10px}
.swarm-big .n{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;color:var(--ink)}
.swarm-big .n.amber{color:var(--amber)} .swarm-big .n.crit{color:var(--crit)}
.swarm-big .u{font-family:var(--mono);font-size:12px;color:var(--muted)}
.swarm-kvs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.swarm-kv .k{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.swarm-kv .v{font-family:var(--mono);font-size:15px;font-weight:500;margin-top:2px;color:var(--ink)}
.swarm-kv .v.crit{color:var(--crit)} .swarm-kv .v.ok{color:var(--ok)} .swarm-kv .v.amber{color:var(--amber)} .swarm-kv .v.muted{color:var(--muted)}
.swarm-spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.swarm-spark i{flex:1;background:linear-gradient(180deg,var(--amber),var(--amber-soft));border-radius:2px 2px 0 0;opacity:.85;min-height:2px}
.cd-tile .foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line);background:rgba(0,0,0,.10)}
.cd-tile .foot .upd{font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}
.cd-tile .foot .go{font-family:var(--mono);font-size:11px;color:var(--amber);display:flex;align-items:center;gap:6px;font-weight:500;letter-spacing:.5px}
.cd-tile .foot .go svg{width:14px;height:14px;transition:.16s}
.cd-tile:hover .foot .go svg{transform:translateX(4px)}
.swarm-split{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}
.swarm-card{background:linear-gradient(180deg,var(--panel),var(--bg));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.swarm-card .ch{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.swarm-card .ch h3{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.swarm-card .ch .sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto}
.cd-table{width:100%;border-collapse:collapse}
.cd-table th{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:11px 18px;font-weight:700;border-bottom:1px solid var(--line)}
.cd-table td{padding:12px 18px;font-size:13px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.cd-table tr:last-child td{border-bottom:0}
.cd-table tr:hover td{background:var(--amber-soft)}
.cd-table td b{color:var(--ink)}
.swarm-st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px}
.swarm-st .d{width:6px;height:6px;border-radius:50%}
.swarm-st.ok .d{background:var(--ok)} .swarm-st.ok{color:var(--ok)}
.swarm-st.fail .d{background:var(--crit)} .swarm-st.fail{color:var(--c-ro-tx)}
.swarm-st.run .d{background:var(--amber)} .swarm-st.run{color:var(--amber)}
.swarm-mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.swarm-fleet{padding:8px 6px}
.swarm-agent{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px}
.swarm-agent:hover{background:var(--panel-2)}
.swarm-agent .ico{width:32px;height:32px;border-radius:8px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;color:var(--amber);font-family:var(--mono);font-weight:700;font-size:12px;flex:none}
.swarm-agent .nm{font-size:13px;font-weight:600;color:var(--ink)}
.swarm-agent .nm small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400;margin-top:1px}
.swarm-agent .pill{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:5px}
.swarm-agent .pill.on{background:var(--c-am-bg2);color:var(--amber)}
.swarm-agent .pill.off{background:var(--raise);color:var(--muted)}
.swarm-empty{border:1px dashed var(--line-2);border-radius:12px;padding:36px;text-align:center;color:var(--muted)}
.swarm-empty img{height:48px;width:48px;margin:0 auto 10px;opacity:.5}

/* =====================================================================
   LEGACY REPORT COMPONENTS — used by dashboards/sales-mtd-full.php,
   dashboards/deals.php (their per-page <style> blocks were removed).
   Variable-driven so they read correctly in dark AND light.
   ===================================================================== */
.swarm-tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.swarm-tile.dashed{border-style:dashed}
.swarm-tile .label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;font-family:var(--mono)}
.swarm-tile .value{font-size:28px;font-weight:700;color:var(--ink);line-height:1.1;font-family:var(--mono)}
.swarm-tile .sub{font-size:12px;color:var(--muted);margin-top:4px}
.swarm-tile.gold{background:var(--c-am-bg);border-color:var(--c-am-bd)}
.swarm-tile.gold .label,.swarm-tile.gold .value,.swarm-tile.gold .sub{color:var(--c-am-tx)}

.swarm-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 12px;font-family:var(--mono)}

.swarm-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.swarm-table th{background:var(--panel-2);padding:10px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);font-family:var(--mono)}
.swarm-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.swarm-table tr:last-child td{border-bottom:none}
.swarm-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.swarm-table .total-row td{font-weight:700;background:var(--panel-2);border-top:2px solid var(--line-2);color:var(--ink)}

.deals-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.deals-table th{background:var(--panel-2);padding:9px 10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;font-family:var(--mono)}
.deals-table th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.deals-table td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top;color:var(--ink-2)}
.deals-table tr:last-child td{border-bottom:none}
.deals-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--mono)}

.pill{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600}
.deals-table .pill{padding:1px 7px;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.pill-fin{background:var(--pill-fin-bg);color:var(--pill-fin-tx)}
.pill-cash{background:var(--pill-cash-bg);color:var(--pill-cash-tx)}
.pill-whlsl{background:#4b5563;color:#fff}
.pill-active{background:var(--pill-active-bg);color:var(--pill-active-tx)}
.pill-missing{background:var(--pill-missing-bg);color:var(--pill-missing-tx)}
.pill-reversed{background:var(--pill-reversed-bg);color:var(--pill-reversed-tx)}
.pill-pending{background:var(--pill-pending-bg);color:var(--pill-pending-tx)}
.pill-other{background:var(--pill-other-bg);color:var(--pill-other-tx)}
pre.raw{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px;font-size:11px;max-height:400px;overflow:auto;color:var(--ink-2)}

/* quick-range + multiselect filters (from deals.php) */
.pill-btn{display:inline-block;padding:5px 12px;border-radius:9999px;font-size:12px;font-weight:500;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);text-decoration:none;transition:all .12s}
.pill-btn:hover{background:var(--raise);color:var(--ink)}
.pill-btn.active{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.multiselect{position:relative;display:inline-block}
.multiselect>summary{list-style:none;cursor:pointer;border:1px solid var(--line-2);border-radius:6px;padding:5px 26px 5px 10px;font-size:13px;background:var(--panel);color:var(--ink);min-width:160px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%2364748b' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.multiselect>summary::-webkit-details-marker{display:none}
.multiselect[open]>summary{border-color:var(--amber)}
.multiselect-panel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:240px;max-height:300px;overflow-y:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:6px 0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.multiselect-panel label{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.multiselect-panel label:hover{background:var(--raise)}
.multiselect-panel input[type="checkbox"]{margin:0}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1080px){
  .swarm-strip{grid-template-columns:repeat(2,1fr)}
  .swarm-tiles{grid-template-columns:1fr}
  .swarm-split{grid-template-columns:1fr}
}
@media(max-width:860px){
  .swarm-rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease}
  .swarm-rail.open{transform:translateX(0)}
  .swarm-rail-scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:25}
  .swarm-burger{display:inline-flex}
  .swarm-main{padding:18px 16px 40px}
  .swarm-topbar{padding:12px 16px}
  .swarm-user .meta{display:none}

  /* ---- Mobile data tables -------------------------------------------
     Wide data tables were being clipped by their container on phones.
     Turn every content table into its own horizontal scroller so all
     columns stay reachable with a left/right swipe. Scoped to this
     mobile query only — desktop layout is unchanged. */
  .swarm-main table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .swarm-main table th,
  .swarm-main table td{ white-space:nowrap; }
  /* Let the containers that used to clip (rounded cards, report wells)
     show the scrolling table instead of hiding its overflow. */
  .swarm-main .cm-card-b,
  .swarm-main .gm-card-b,
  .swarm-main .swarm-table,
  .swarm-main .deals-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Keep the page body from scrolling sideways — only tables do. */
  .swarm-main{ overflow-x:hidden; }

  /* ---- Mobile topbar -------------------------------------------------
     The status/clock/calendar/weather chips were overflowing off-screen.
     Drop the flex spacer and let the chip row swipe horizontally so every
     chip stays reachable instead of being clipped. */
  .swarm-topbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .swarm-topbar::-webkit-scrollbar{ display:none; }
  .swarm-topbar .spacer{ display:none; }
  .swarm-topbar > *{ flex:0 0 auto; }
}
