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

/* ============================================================
   DESIGN TOKENS
   Same palette as v2 but extended with two additional semantic
   colours specifically for surfacing the new intelligence:
   --regulatory : a distinct hot-magenta reserved for compliance
                  risk so it cannot be confused with operational
                  amber. Anything regulatory uses this colour.
   --critical-pulse : for the May 2026 crisis banner - it is
                      a deeper red than the operational red so
                      that the crisis hierarchy is visually clear
============================================================ */
:root{
  --bg-deep:#02050d; --bg-mid:#050b1c;
  --bg-panel:rgba(10,22,46,.55); --bg-panel-solid:#0a142e;
  --grid:rgba(0,170,255,.06); --line:rgba(0,200,255,.18); --line-strong:rgba(0,200,255,.5);
  --cyan:#00d4ff; --cyan-glow:#3de8ff; --blue:#0a6dff;
  --silver:#cbd9ec; --silver-dim:#7a8aa6; --white:#eaf2ff;
  --green:#00ffa3; --amber:#ffb13b; --red:#ff3a6b; --magenta:#b94dff; --gold:#ffd76b;
  --regulatory:#ff2d8e;       /* compliance/POPIA risk - hot magenta */
  --critical-pulse:#ff0844;   /* May 2026 crisis - hot red */

  /* Responsive spacing tokens */
  --page-padding: clamp(12px, 2vw, 28px);
  --gap-sm: clamp(8px, 1vw, 14px);
  --gap-md: clamp(12px, 1.5vw, 24px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg-deep);color:var(--white);font-family:'Rajdhani',sans-serif;overflow-x:hidden}
body{min-height:100vh;-webkit-font-smoothing:antialiased;padding-bottom:60px}

.atmos{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 10%, rgba(10,109,255,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 90%, rgba(0,212,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 50%, rgba(185,77,255,.06) 0%, transparent 60%),
    linear-gradient(180deg, #02050d 0%, #050b1c 50%, #02050d 100%);
}
.atmos::before{content:"";position:absolute;inset:0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at center, #000 0%, transparent 90%);
}

@keyframes blink{0%,90%,100%{opacity:1}45%{opacity:.3}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes crisis-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,8,68,.6), 0 0 30px rgba(255,8,68,.3);}
  50%{box-shadow:0 0 0 8px rgba(255,8,68,0), 0 0 50px rgba(255,8,68,.5);}
}
@keyframes regulatory-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,45,142,.5), 0 0 25px rgba(255,45,142,.3);}
  50%{box-shadow:0 0 0 6px rgba(255,45,142,0), 0 0 40px rgba(255,45,142,.5);}
}

/* ============================================================
   COMMAND BAR
   Three live indicators on the right: connection status to
   Supabase, last refresh time, and a manual REFRESH button
   that re-runs the queries. This makes the dashboard truly
   live rather than a static snapshot.
============================================================ */
.cmd-bar{position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:clamp(10px, 1.5vw, 24px);padding:clamp(10px, 1vw, 14px) var(--page-padding);
  background:rgba(2,5,13,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand-block{display:flex;align-items:center;gap:clamp(8px, 1vw, 14px)}
.cm-hex{width:36px;height:40px;flex-shrink:0}
.brand-text{line-height:1.1}
.brand-text .b1{font-family:'Orbitron';font-weight:700;font-size:clamp(11px, 0.9vw, 14px);letter-spacing:clamp(1px, 0.2vw, 3px);color:var(--white)}
.brand-text .b1 b{color:var(--cyan)}
.brand-text .b2{font-size:clamp(8px, 0.6vw, 10px);letter-spacing:clamp(1px, 0.2vw, 2.5px);color:var(--silver-dim);text-transform:uppercase;margin-top:3px}
.brand-text .b2 .live-dot{color:var(--green);font-size:11px}

.cmd-right{margin-left:auto;display:flex;align-items:center;gap:clamp(8px, 1vw, 14px);flex-wrap:wrap}

.db-conn{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--green);background:rgba(0,255,163,.06);font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);color:var(--green);letter-spacing:.5px}
.db-conn .pulse{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:blink 1.4s infinite;flex-shrink:0}
.db-conn small{color:var(--silver-dim);font-size:clamp(7px, 0.5vw, 9px);letter-spacing:1.5px;margin-left:4px}

.refresh-btn{padding:8px 16px;font-family:'Rajdhani';font-weight:700;font-size:clamp(10px, 0.7vw, 11px);letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(135deg, rgba(0,212,255,.15), rgba(10,109,255,.1));
  border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.refresh-btn:hover{background:var(--cyan);color:var(--bg-deep);box-shadow:0 0 20px rgba(0,212,255,.5)}
.refresh-btn .spin{display:inline-block;transition:transform .6s}
.refresh-btn.loading .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.cmd-clock{font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);color:var(--cyan);letter-spacing:1px;
  padding-left:clamp(8px, 1vw, 14px);border-left:1px solid var(--line);text-align:right;line-height:1.4}
.cmd-clock small{color:var(--silver-dim);font-size:clamp(7px, 0.5vw, 9px);display:block;letter-spacing:1.5px}

/* ============================================================
   CRISIS BANNER
   This is the new top-of-page element that did not exist in v2.
   The May 2026 reputation crisis is the single most important
   thing surfaced by the real data, so it gets its own banner
   above every other section. The visual treatment uses
   --critical-pulse for maximum visibility.
============================================================ */
.crisis-banner{margin:18px var(--page-padding) 0;padding:clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 22px);
  background:linear-gradient(135deg, rgba(255,8,68,.18), rgba(255,8,68,.04));
  border:2px solid var(--critical-pulse);position:relative;overflow:hidden;
  animation:crisis-pulse 3s ease-in-out infinite;
  display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(12px, 1.5vw, 24px);align-items:center;
}
.crisis-banner::before{content:"";position:absolute;top:0;left:-100%;right:-100%;height:2px;
  background:linear-gradient(90deg, transparent, var(--critical-pulse), transparent);
  animation:scan 3s linear infinite}
.crisis-icon{font-family:'Orbitron';font-weight:900;font-size:clamp(28px, 2.8vw, 42px);color:var(--critical-pulse);
  text-shadow:0 0 20px var(--critical-pulse);line-height:1}
.crisis-text h2{font-family:'Orbitron';font-weight:900;font-size:clamp(11px, 1vw, 15px);letter-spacing:clamp(1px, 0.2vw, 3px);color:var(--white);margin-bottom:6px}
.crisis-text h2 b{color:var(--critical-pulse)}
.crisis-text p{font-family:'Inter';font-size:clamp(11px, 0.85vw, 13px);color:var(--silver);line-height:1.5}
.crisis-text p b{color:var(--white)}
.crisis-stat{text-align:center;padding:0 clamp(10px, 1.2vw, 18px);border-left:1px solid rgba(255,8,68,.3)}
.crisis-stat .v{font-family:'Orbitron';font-weight:900;font-size:clamp(22px, 2vw, 32px);color:var(--critical-pulse);line-height:1}
.crisis-stat .l{font-size:clamp(7px, 0.6vw, 9px);color:var(--silver-dim);letter-spacing:2px;text-transform:uppercase;margin-top:6px}
.crisis-stat .delta{font-size:clamp(9px, 0.7vw, 11px);color:var(--silver);font-family:'JetBrains Mono';margin-top:4px}

/* ============================================================
   LAYOUT
============================================================ */
.page{position:relative;z-index:1;padding:var(--page-padding)}
.section{margin-bottom:clamp(18px, 2vw, 28px)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.section-header h2{font-family:'Orbitron';font-weight:700;font-size:clamp(10px, 0.85vw, 13px);letter-spacing:clamp(2px, 0.3vw, 4px);color:var(--white);display:flex;align-items:center;gap:10px}
.section-header h2::before{content:"";width:4px;height:18px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex-shrink:0}
.section-header h2 .badge{font-size:clamp(8px, 0.65vw, 10px);color:var(--cyan);padding:3px 8px;border:1px solid var(--cyan);letter-spacing:2px;margin-left:8px;font-family:'Rajdhani'}
.section-header h2 .badge.live{color:var(--green);border-color:var(--green)}
.section-header h2 .badge.live::before{content:"\25CF ";animation:blink 1.4s infinite}
.section-header .meta{font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);color:var(--silver-dim);letter-spacing:1px}

.panel{position:relative;background:var(--bg-panel);border:1px solid var(--line);backdrop-filter:blur(12px);padding:clamp(12px, 1.2vw, 16px) clamp(14px, 1.2vw, 18px)}
.panel::before,.panel::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan)}
.panel::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.panel::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ============================================================
   REGULATORY ALERT BAR
   Distinct from the operational crisis banner because compliance
   risk has a different escalation path than operational risk.
   This bar specifically surfaces the achu B 251-day pending case
   and the pattern of unauthorized-debit complaints.
============================================================ */
.reg-alert{margin-bottom:clamp(16px, 1.5vw, 24px);padding:clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 18px);
  background:linear-gradient(135deg, rgba(255,45,142,.14), rgba(255,45,142,.04));
  border:1px solid var(--regulatory);position:relative;
  animation:regulatory-pulse 4s ease-in-out infinite;
  display:flex;align-items:center;gap:clamp(10px, 1vw, 16px);
  flex-wrap:wrap;
}
.reg-alert .reg-tag{font-family:'Orbitron';font-weight:900;font-size:clamp(8px, 0.65vw, 10px);letter-spacing:3px;padding:4px 10px;background:var(--regulatory);color:#fff;flex-shrink:0}
.reg-alert .reg-text{font-family:'Inter';font-size:clamp(11px, 0.8vw, 12px);color:var(--silver);line-height:1.5;flex:1;min-width:200px}
.reg-alert .reg-text b{color:var(--white)}
.reg-alert .reg-text .hot{color:var(--regulatory);font-weight:700}
.reg-alert .reg-action{font-family:'Rajdhani';font-weight:700;font-size:clamp(10px, 0.7vw, 11px);letter-spacing:2px;text-transform:uppercase;padding:8px 14px;border:1px solid var(--regulatory);color:var(--regulatory);cursor:pointer;background:transparent;transition:all .2s;flex-shrink:0}
.reg-alert .reg-action:hover{background:var(--regulatory);color:#fff}

/* ============================================================
   EXECUTIVE KPI MEGA-TILES
   Now driven by REAL Supabase counts: 490 reviews, 4.34 avg,
   97.3% response rate, 13 pending. The "vs prior" deltas are
   computed from the monthly_trend query results.
============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-sm)}
.kpi-mega{padding:clamp(12px, 1.2vw, 18px);background:linear-gradient(180deg, rgba(10,22,46,.85), rgba(2,5,13,.6));
  border:1px solid var(--line);position:relative;overflow:hidden;min-height:clamp(100px, 9vw, 140px);display:flex;flex-direction:column}
.kpi-mega::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);animation:scan 5s linear infinite;opacity:.5}
.kpi-mega .lbl{font-size:clamp(8px, 0.65vw, 10px);letter-spacing:clamp(1px, 0.2vw, 2.5px);color:var(--silver-dim);text-transform:uppercase;font-family:'Rajdhani';font-weight:600}
.kpi-mega .val{font-family:'Orbitron';font-weight:900;font-size:clamp(20px, 2.2vw, 34px);color:var(--white);line-height:1.1;margin:8px 0 6px;letter-spacing:-.5px}
.kpi-mega .val .u{font-size:clamp(11px, 1vw, 16px);color:var(--silver-dim);margin-left:2px}
.kpi-mega .val.cyan{color:var(--cyan)}
.kpi-mega .val.green{color:var(--green)}
.kpi-mega .val.red{color:var(--red)}
.kpi-mega .val.gold{color:var(--gold)}
.kpi-mega .val.amber{color:var(--amber)}
.kpi-mega .delta{font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);margin-top:auto;letter-spacing:.5px}
.delta-up{color:var(--green)}.delta-up::before{content:"\25B2 "}
.delta-down{color:var(--red)}.delta-down::before{content:"\25BC "}
.delta-flat{color:var(--silver-dim)}.delta-flat::before{content:"\25AC "}

/* ============================================================
   PENDING REVIEW QUEUE
   New section that was missing from v2. These are 13 actual
   HelloPeter reviews awaiting your response, sorted by hours
   pending. High-severity items are flagged. The 251-day case
   gets its own distinct regulatory styling.
============================================================ */
.queue-block{padding:0;background:var(--bg-panel);border:1px solid var(--line);position:relative;overflow:hidden}
.queue-block::before,.queue-block::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan);z-index:2}
.queue-block::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.queue-block::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.queue-table{width:100%;border-collapse:collapse}
.queue-table thead th{background:rgba(0,212,255,.08);padding:clamp(8px, 0.7vw, 11px) clamp(8px, 0.9vw, 14px);text-align:left;
  font-family:'Orbitron';font-weight:500;font-size:clamp(8px, 0.65vw, 10px);letter-spacing:2px;color:var(--cyan);
  border-bottom:1px solid var(--line);text-transform:uppercase;position:sticky;top:0;z-index:1}
.queue-table tbody td{padding:clamp(8px, 0.8vw, 12px) clamp(8px, 0.9vw, 14px);font-size:clamp(10px, 0.8vw, 12px);color:var(--white);border-bottom:1px solid rgba(0,212,255,.06);font-family:'Inter';vertical-align:top}
.queue-table tbody tr:hover{background:rgba(0,212,255,.04)}
.queue-table tbody tr.severity-high{background:rgba(255,58,107,.05)}
.queue-table tbody tr.regulatory{background:rgba(255,45,142,.06);border-left:3px solid var(--regulatory)}
.queue-table tbody tr.regulatory td:first-child{padding-left:11px}
.q-stars{font-family:'JetBrains Mono';color:var(--gold);font-size:clamp(10px, 0.8vw, 12px);letter-spacing:1px;white-space:nowrap}
.q-stars.bad{color:var(--red)}
.q-stars.mid{color:var(--amber)}
.q-name{font-family:'Rajdhani';font-weight:600;font-size:clamp(11px, 0.85vw, 13px);color:var(--white)}
.q-name small{display:block;font-size:clamp(8px, 0.65vw, 10px);color:var(--silver-dim);font-family:'JetBrains Mono';font-weight:400;letter-spacing:.5px;margin-top:2px}
.q-snippet{font-size:clamp(10px, 0.7vw, 11px);color:var(--silver);line-height:1.4;max-width:420px}
.q-snippet b{color:var(--white)}
.q-branch{font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);color:var(--cyan);font-weight:700}
.q-branch.none{color:var(--silver-dim);font-weight:400}
.q-tag{display:inline-block;padding:2px 6px;font-family:'Rajdhani';font-weight:600;font-size:clamp(8px, 0.55vw, 9px);letter-spacing:1.5px;text-transform:uppercase}
.q-tag.cat{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.3)}
.q-tag.sev-low{background:rgba(0,255,163,.1);color:var(--green);border:1px solid rgba(0,255,163,.3)}
.q-tag.sev-medium{background:rgba(255,177,59,.1);color:var(--amber);border:1px solid rgba(255,177,59,.3)}
.q-tag.sev-high{background:rgba(255,58,107,.15);color:var(--red);border:1px solid var(--red)}
.q-hours{font-family:'JetBrains Mono';font-size:clamp(10px, 0.8vw, 12px);font-weight:700;text-align:right;white-space:nowrap}
.q-hours.fresh{color:var(--cyan)}
.q-hours.aging{color:var(--amber)}
.q-hours.stale{color:var(--red)}
.q-hours.regulatory{color:var(--regulatory)}
.q-hours small{display:block;font-size:clamp(7px, 0.55vw, 9px);color:var(--silver-dim);font-weight:400;letter-spacing:1px;margin-top:2px}
.q-action{padding:6px 10px;font-family:'Rajdhani';font-weight:700;font-size:clamp(9px, 0.65vw, 10px);letter-spacing:1.5px;
  background:transparent;border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;text-transform:uppercase;white-space:nowrap}
.q-action:hover{background:var(--cyan);color:var(--bg-deep)}
.q-action.urgent{border-color:var(--red);color:var(--red)}
.q-action.urgent:hover{background:var(--red);color:#fff}
.q-action.reg{border-color:var(--regulatory);color:var(--regulatory)}
.q-action.reg:hover{background:var(--regulatory);color:#fff}

/* ============================================================
   MONTHLY TREND CHART
   Shows the dramatic May 2026 reputation drop visually.
   This is now a "before/after" chart with annotation markers.
============================================================ */
.trend-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap-sm)}
.trend-block{padding:clamp(12px, 1.2vw, 18px);background:var(--bg-panel);border:1px solid var(--line);position:relative}
.trend-block::before,.trend-block::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan)}
.trend-block::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.trend-block::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.trend-block h4{font-family:'Orbitron';font-weight:600;font-size:clamp(9px, 0.7vw, 11px);letter-spacing:2px;color:var(--cyan);margin-bottom:14px}

/* Category breakdown bars */
.cat-bars{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cat-row{display:grid;grid-template-columns:clamp(80px, 9vw, 140px) 1fr 60px;gap:clamp(6px, 0.7vw, 10px);align-items:center;font-size:clamp(9px, 0.7vw, 11px)}
.cat-row .cat-name{font-family:'Rajdhani';font-weight:600;color:var(--white);text-transform:capitalize}
.cat-row .cat-name small{color:var(--silver-dim);font-size:clamp(7px, 0.55vw, 9px);display:block;letter-spacing:1px}
.cat-row .cat-bar{height:14px;background:rgba(122,138,166,.08);position:relative;overflow:hidden}
.cat-row .cat-bar > div{height:100%;display:flex}
.cat-row .cat-bar .pos-seg{background:linear-gradient(90deg, var(--green), #00b873)}
.cat-row .cat-bar .neg-seg{background:linear-gradient(90deg, var(--red), #b8264a)}
.cat-row .cat-count{font-family:'JetBrains Mono';color:var(--white);text-align:right;font-weight:700}

/* ============================================================
   BRANCH HOTSPOT TABLE
   Real branches from production, sorted by issue severity in
   May 2026. Shows the SS/ZZ/GR crisis cluster.
============================================================ */
.hotspot-table{width:100%;border-collapse:collapse;background:var(--bg-panel);border:1px solid var(--line)}
.hotspot-table thead th{background:rgba(0,212,255,.08);padding:clamp(8px, 0.7vw, 11px) clamp(8px, 0.9vw, 14px);text-align:left;font-family:'Orbitron';font-weight:500;font-size:clamp(8px, 0.65vw, 10px);letter-spacing:2px;color:var(--cyan);border-bottom:1px solid var(--line);text-transform:uppercase}
.hotspot-table thead th:not(:first-child){text-align:right}
.hotspot-table tbody td{padding:clamp(8px, 0.7vw, 11px) clamp(8px, 0.9vw, 14px);font-size:clamp(10px, 0.8vw, 12px);color:var(--white);border-bottom:1px solid rgba(0,212,255,.06);font-family:'JetBrains Mono'}
.hotspot-table tbody td:first-child{font-family:'Rajdhani';font-weight:600;font-size:clamp(11px, 0.85vw, 13px)}
.hotspot-table tbody td:not(:first-child){text-align:right}
.hotspot-table tbody tr.critical{background:rgba(255,58,107,.06)}
.hotspot-table tbody tr.critical td:first-child{color:var(--red);font-weight:700}
.hotspot-table tbody tr.healthy td:first-child{color:var(--green)}
.rate-pill{display:inline-block;padding:3px 8px;font-weight:700}
.rate-pill.ok{background:rgba(0,255,163,.15);color:var(--green)}
.rate-pill.mid{background:rgba(255,177,59,.15);color:var(--amber)}
.rate-pill.bad{background:rgba(255,58,107,.18);color:var(--red)}

/* ============================================================
   ROOT CAUSE PANEL
   Shows actual client complaint quotes pulled from the real
   complaint_text field. These are the exact words clients have
   used in their reviews, organised by failure pattern.
============================================================ */
.root-cause{padding:clamp(14px, 1.3vw, 20px);background:linear-gradient(135deg, rgba(255,8,68,.08), rgba(2,5,13,.6));border:1px solid var(--critical-pulse);position:relative}
.root-cause::before,.root-cause::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--critical-pulse);box-shadow:0 0 10px var(--critical-pulse)}
.root-cause::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.root-cause::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.root-cause h3{font-family:'Orbitron';font-weight:900;font-size:clamp(11px, 0.9vw, 14px);letter-spacing:clamp(1px, 0.2vw, 3px);color:var(--white);margin-bottom:6px}
.root-cause h3 span{color:var(--critical-pulse)}
.root-cause .sub{font-family:'Inter';font-size:clamp(11px, 0.8vw, 12px);color:var(--silver);margin-bottom:18px;line-height:1.5}
.root-cause .sub b{color:var(--white)}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
.rc-pattern{padding:clamp(10px, 0.9vw, 14px);background:var(--bg-panel);border-left:3px solid var(--critical-pulse);position:relative}
.rc-pattern .pat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rc-pattern .pat-name{font-family:'Orbitron';font-weight:700;font-size:clamp(9px, 0.7vw, 11px);letter-spacing:2px;color:var(--white);text-transform:uppercase}
.rc-pattern .pat-count{font-family:'JetBrains Mono';font-size:clamp(11px, 0.9vw, 14px);font-weight:700;color:var(--critical-pulse)}
.rc-quote{font-family:'Inter';font-style:italic;font-size:clamp(10px, 0.7vw, 11px);color:var(--silver);line-height:1.5;padding:8px 10px;background:rgba(255,255,255,.02);border-left:2px solid rgba(255,8,68,.3);margin-bottom:6px}
.rc-quote::before{content:"\275D ";color:var(--critical-pulse);font-size:14px}
.rc-quote .src{display:block;margin-top:6px;font-style:normal;font-size:clamp(7px, 0.55vw, 9px);color:var(--silver-dim);letter-spacing:1px}

/* ============================================================
   AGENT INTELLIGENCE
   This is new for v3. The real review data names specific agents
   - some positively (Reshmika, Sharon Kisten, Mrs Farzana) and
   some negatively (Roxanne). This surfaces that pattern so
   coaching and recognition can be data-driven.
============================================================ */
.agent-intel{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
.agent-col{padding:clamp(12px, 1.2vw, 18px);background:var(--bg-panel);border:1px solid var(--line);position:relative}
.agent-col::before,.agent-col::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan)}
.agent-col::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.agent-col::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.agent-col.positive{border-color:var(--green)}
.agent-col.positive::before,.agent-col.positive::after{border-color:var(--green)}
.agent-col.negative{border-color:var(--red)}
.agent-col.negative::before,.agent-col.negative::after{border-color:var(--red)}
.agent-col h4{font-family:'Orbitron';font-weight:700;font-size:clamp(10px, 0.8vw, 12px);letter-spacing:2px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.agent-col.positive h4{color:var(--green)}
.agent-col.negative h4{color:var(--red)}
.agent-mention{padding:10px 0;border-bottom:1px dashed rgba(0,212,255,.1);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(8px, 0.8vw, 12px);align-items:start}
.agent-mention:last-child{border-bottom:none}
.agent-mention .ag-name{font-family:'Rajdhani';font-weight:700;font-size:clamp(11px, 0.85vw, 13px);color:var(--white)}
.agent-mention .ag-quote{font-family:'Inter';font-size:clamp(10px, 0.7vw, 11px);color:var(--silver);line-height:1.4;font-style:italic}
.agent-mention .ag-meta{font-family:'JetBrains Mono';font-size:clamp(8px, 0.65vw, 10px);color:var(--silver-dim);text-align:right;letter-spacing:.5px}

/* ============================================================
   DIAGNOSTIC LAYER (v3)
   Same structure as v2 but every finding now tied to REAL
   evidence from the actual database. The rand-impact numbers
   are deliberately conservative because they reference real
   patterns, not invented ones.
============================================================ */
.diag-block{padding:clamp(16px, 1.5vw, 24px);background:linear-gradient(135deg, rgba(10,22,46,.85), rgba(2,5,13,.6));border:1px solid var(--cyan);position:relative;overflow:hidden}
.diag-block::before,.diag-block::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--cyan);box-shadow:0 0 12px var(--cyan)}
.diag-block::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.diag-block::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.diag-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px}
.diag-head h3{font-family:'Orbitron';font-weight:900;font-size:clamp(12px, 1vw, 16px);letter-spacing:clamp(2px, 0.3vw, 4px);color:var(--white)}
.diag-head h3 span{color:var(--cyan)}
.diag-head .stamp{font-family:'JetBrains Mono';font-size:clamp(8px, 0.65vw, 10px);color:var(--silver-dim);letter-spacing:1.5px}
.diag-head .stamp b{color:var(--cyan)}
.diag-summary{background:rgba(0,212,255,.06);border-left:3px solid var(--cyan);padding:clamp(10px, 0.9vw, 14px) clamp(12px, 1vw, 16px);margin-bottom:18px;font-family:'Inter';font-size:clamp(11px, 0.85vw, 13px);line-height:1.6;color:var(--white)}
.diag-summary b{color:var(--cyan)}
.diag-summary .red-em{color:var(--red);font-weight:700}
.diag-summary .green-em{color:var(--green);font-weight:700}
.diag-summary .reg-em{color:var(--regulatory);font-weight:700}
.diag-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
.diag-item{padding:clamp(10px, 0.9vw, 14px);background:var(--bg-panel);border:1px solid var(--line);position:relative;padding-left:clamp(14px, 1.2vw, 18px)}
.diag-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.diag-item.regulatory::before{background:var(--regulatory);box-shadow:0 0 8px var(--regulatory)}
.diag-item.critical::before{background:var(--red);box-shadow:0 0 8px var(--red)}
.diag-item.warn::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.diag-item.opportunity::before{background:var(--green);box-shadow:0 0 8px var(--green)}
.diag-item .tag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.diag-item .sev{font-family:'Orbitron';font-weight:700;font-size:clamp(7px, 0.55vw, 9px);letter-spacing:2px;padding:3px 6px}
.diag-item.regulatory .sev{background:var(--regulatory);color:#fff}
.diag-item.critical .sev{background:var(--red);color:var(--bg-deep)}
.diag-item.warn .sev{background:var(--amber);color:var(--bg-deep)}
.diag-item.opportunity .sev{background:var(--green);color:var(--bg-deep)}
.diag-item .impact{font-family:'JetBrains Mono';font-size:clamp(9px, 0.7vw, 11px);color:var(--white);font-weight:700;margin-left:auto}
.diag-item .impact.neg{color:var(--red)}
.diag-item .impact.pos{color:var(--green)}
.diag-item .impact.reg{color:var(--regulatory)}
.diag-item h5{font-family:'Rajdhani';font-weight:700;font-size:clamp(12px, 0.9vw, 14px);color:var(--white);letter-spacing:.5px;margin-bottom:6px;line-height:1.3}
.diag-item p{font-family:'Inter';font-size:clamp(10px, 0.8vw, 12px);color:var(--silver);line-height:1.5;margin-bottom:8px}
.diag-item p b{color:var(--white)}
.diag-item .action{font-family:'Rajdhani';font-weight:600;font-size:clamp(9px, 0.7vw, 11px);color:var(--cyan);letter-spacing:1px;text-transform:uppercase;padding-top:6px;border-top:1px dashed rgba(0,212,255,.15)}
.diag-item .action::before{content:"\2192 ";color:var(--cyan)}

/* Operational ops strip - shows live escalations, agent states, SMS volume */
.ops-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-sm);margin-bottom:clamp(16px, 1.5vw, 24px)}
.ops-card{padding:clamp(12px, 1vw, 16px);background:var(--bg-panel);border:1px solid var(--line);position:relative}
.ops-card::before{content:"";position:absolute;top:0;left:0;width:3px;bottom:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.ops-card.warn::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.ops-card.active::before{background:var(--green);box-shadow:0 0 8px var(--green)}
.ops-card .ops-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ops-card .ops-title{font-family:'Orbitron';font-weight:600;font-size:clamp(8px, 0.65vw, 10px);letter-spacing:2px;color:var(--cyan);text-transform:uppercase}
.ops-card .ops-val{font-family:'Orbitron';font-weight:900;font-size:clamp(18px, 1.7vw, 26px);color:var(--white);line-height:1}
.ops-card .ops-sub{font-family:'JetBrains Mono';font-size:clamp(8px, 0.65vw, 10px);color:var(--silver-dim);letter-spacing:1px;margin-top:4px}
.ops-card .ops-list{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(0,212,255,.1);font-family:'JetBrains Mono';font-size:clamp(8px, 0.65vw, 10px);color:var(--silver);line-height:1.6}
.ops-card .ops-list b{color:var(--white)}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   The original design targets width=1800. These breakpoints
   adapt the layout for tablets and mobile phones.
============================================================ */

/* Tablet landscape and smaller desktops (< 1200px) */
@media (max-width: 1200px) {
  .kpi-grid{grid-template-columns:repeat(3, 1fr)}
  .ops-strip{grid-template-columns:repeat(2, 1fr)}
  .trend-grid{grid-template-columns:1fr}
  .diag-list{grid-template-columns:1fr 1fr}
  .crisis-banner{grid-template-columns:auto 1fr auto auto}

  .q-snippet{max-width:280px}
}

/* Tablet portrait (< 900px) */
@media (max-width: 900px) {
  .kpi-grid{grid-template-columns:repeat(3, 1fr)}
  .rc-grid{grid-template-columns:1fr}
  .agent-intel{grid-template-columns:1fr}
  .diag-list{grid-template-columns:1fr}

  .crisis-banner{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
  }
  .crisis-stat:first-of-type{
    grid-column:1;
  }
  .crisis-stat{
    border-left:none;
    border-top:1px solid rgba(255,8,68,.3);
    padding:12px 0 0;
  }

  /* Stack crisis stats side by side below text */
  .crisis-banner{
    grid-template-columns:1fr;
  }
  .crisis-icon{font-size:28px}
  .crisis-banner > .crisis-stat{
    display:inline-block;
    border-left:1px solid rgba(255,8,68,.3);
    border-top:none;
    padding:0 18px;
  }

  .cmd-bar{flex-wrap:wrap}
  .brand-text .b2{display:none}

  /* Make tables horizontally scrollable */
  .queue-block{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .queue-table{min-width:700px}
  .hotspot-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Mobile (< 600px) */
@media (max-width: 600px) {
  :root{
    --page-padding:10px;
  }

  .kpi-grid{grid-template-columns:repeat(2, 1fr)}
  .ops-strip{grid-template-columns:1fr}
  .trend-grid{grid-template-columns:1fr}
  .rc-grid{grid-template-columns:1fr}
  .agent-intel{grid-template-columns:1fr}
  .diag-list{grid-template-columns:1fr}

  /* Command bar: stack vertically on small screens */
  .cmd-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:10px;
  }
  .cmd-right{
    margin-left:0;
    width:100%;
    justify-content:space-between;
  }
  .db-conn small{display:none}

  /* Crisis banner: single column stack */
  .crisis-banner{
    grid-template-columns:1fr;
    gap:12px;
    margin:10px var(--page-padding) 0;
    padding:12px;
  }
  .crisis-icon{font-size:24px;text-align:center}
  .crisis-text h2{font-size:11px;letter-spacing:1px}
  .crisis-text p{font-size:11px}
  .crisis-stat{
    border-left:none;
    border-top:1px solid rgba(255,8,68,.3);
    padding:10px 0 0;
    text-align:left;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .crisis-stat .v{font-size:22px}

  /* Regulatory alert: stack */
  .reg-alert{
    flex-direction:column;
    align-items:flex-start;
  }
  .reg-alert .reg-action{
    align-self:flex-end;
  }

  /* Section headers: wrap meta below heading */
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .section-header .meta{font-size:8px}

  /* Diagnostic head: stack */
  .diag-head{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Agent mentions: reduce columns */
  .agent-mention{
    grid-template-columns:1fr;
    gap:6px;
  }
  .agent-mention .ag-meta{text-align:left}

  /* Category bar rows: stack label above bar */
  .cat-row{
    grid-template-columns:1fr 60px;
    gap:4px;
  }
  .cat-row .cat-name{grid-column:1 / -1}
  .cat-row .cat-bar{grid-column:1}
  .cat-row .cat-count{grid-column:2}
}

/* Small mobile (< 400px) */
@media (max-width: 400px) {
  .kpi-grid{grid-template-columns:1fr}
  .kpi-mega{min-height:auto}

  .brand-text .b1{font-size:10px;letter-spacing:1px}
  .cm-hex{width:28px;height:32px}

  .cmd-clock{
    border-left:none;
    padding-left:0;
  }

  .crisis-banner{padding:10px}
  .crisis-icon{display:none}

  body{padding-bottom:30px}
}