:root{
  --bg:#0d0d0d;
  --panel:#ffffff;
  --text:#111;
  --muted:#777;
  --gold:#b8860b;
  --gold-strong:#a3740a;
  --banner-bg:#2b0f0f;
  --banner-border:#7a1c1c;
  --ok:#4ee44e;
  --line:#e9e9e9;
  --pre-bg:#f9f9f9;
  --pre-border:#dddddd;
}
body.dark{
  --bg:#0d0d0d;
  --panel:#1a1a1a;
  --text:#f2f2f2;
  --muted:#bdbdbd;
  --gold:#f7c66f;
  --gold-strong:#d8a33c;
  --banner-bg:#3a1313;
  --banner-border:#9e2a2a;
  --ok:#65ffa0;
  --line:#333;
  --pre-bg:#0f0f0f;
  --pre-border:#2a2a2a;
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  margin:0;
}

header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.15);
}
.brand{color:var(--gold); font-weight:600}
.right-head{display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted)}
.badge{color:var(--ok)}
.org{opacity:.8}
button.theme{
  font-size:12px; padding:6px 10px; border-radius:6px; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer;
}

/* Breach banner (global sticky) */
#breachBanner{
  display:none; position:sticky; top:0; z-index:9999;
  background:var(--banner-bg); color:#ffb4b4; border-bottom:1px solid var(--banner-border);
  padding:10px 16px; font-weight:600;
}
#breachBanner.pulse{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,120,120,0.32); }
  70%{ box-shadow:0 0 0 12px rgba(255,120,120,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,120,120,0); }
}

/* Breach banner (in-card Phoenix Codex style) */
.pc-breach-banner{
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--banner-border);
  background:var(--banner-bg);
  color:#ffdddd;
  font-size:0.85rem;
  box-shadow:0 0 12px rgba(0,0,0,0.35);
}
.pc-breach-banner strong{
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:0.78rem;
}

/* Rows inside breach banner */
.banner-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:0.82rem;
}
.banner-row:last-child{
  border-bottom:none;
}
.banner-row span{
  display:inline-block;
}

/* Severity tags */
.tag-critical,
.tag-warning,
.tag-stable,
.tag-missing{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:0.72rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  border:1px solid;
  white-space:nowrap;
}

/* Critical = deep Phoenix red */
.tag-critical{
  border-color:var(--banner-border);
  color:#ffb4b4;
  background:rgba(178,34,34,0.18);
}

/* Warning = Phoenix gold */
.tag-warning{
  border-color:var(--gold-strong);
  color:var(--gold);
  background:rgba(184,134,11,0.18);
}

/* Stable = covenant-green */
.tag-stable{
  border-color:#2e8b57;
  color:#9effc4;
  background:rgba(46,139,87,0.18);
}

/* Missing = muted / unknown */
.tag-missing{
  border-color:var(--line);
  color:var(--muted);
  background:rgba(128,128,128,0.14);
  font-style:italic;
}

/* Subtle entrance animation for newly mounted rows/banners */
.fade-in{
  opacity:0;
  animation:fadeIn 0.32s ease-out forwards;
}
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-2px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

main{
  display:flex;
  justify-content:center;
  padding:40px 16px;
}

.card{
  width:min(720px,100%);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  padding:22px 26px;
  margin-bottom:18px;
}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
h3{margin:0 0 8px 0; color:var(--gold)}
.muted{color:var(--muted); font-size:13px}
.time{color:var(--gold); font-size:13px}

pre{
  background:var(--pre-bg); border:1px solid var(--pre-border);
  padding:12px; border-radius:8px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; margin:10px 0 16px 0;
}
button.action{
  background:var(--gold); color:#fff; border:none;
  padding:8px 16px; border-radius:6px; font-weight:600; cursor:pointer;
}
button.action:hover{background:var(--gold-strong)}
footer{margin:36px 0 24px; text-align:center; font-size:12px; color:var(--muted)}

.btn-small{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  margin-left:8px;
}
.btn-small.primary{
  background:var(--gold);
  color:#fff;
  border:none;
}
.btn-small.primary:hover{background:var(--gold-strong)}

/* Phoenix logo */
#logoContainer{
  position:fixed; right:32px; bottom:28px; z-index:9;
  opacity:.95; pointer-events:none;
  filter:drop-shadow(0 0 2px rgba(184,134,11,.35));
}
#phoenixLogo{width:160px; height:auto}

/* Phoenix Cockpit shell & tabs */
.pc-shell{
  width:100%;
  max-width:1100px;
}

.pc-tabs{
  display:flex;
  gap:0.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:0.25rem;
  flex-wrap:wrap;
}

.pc-tab-btn{
  border:none;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  font-size:0.85rem;
  cursor:pointer;
  background:transparent;
  color:rgba(255,255,255,0.6);
  transition:background 0.15s ease, color 0.15s ease;
}

.pc-tab-btn.pc-active{
  background:rgba(255,255,255,0.12);
  color:#fff;
}

.pc-tab{display:none;}
.pc-tab.pc-active{display:block;}

.pc-section-note{
  font-size:0.85rem;
  opacity:0.7;
  margin-bottom:0.75rem;
}

.pc-placeholder-card{
  border-radius:0.6rem;
  border:1px dashed rgba(255,255,255,0.18);
  padding:1rem 1.2rem;
  font-size:0.9rem;
  opacity:0.8;
}

/* Runway table */
.pc-runway-card{
  width:min(1100px,100%);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  padding:16px 20px;
}
.pc-runway-summary{
  font-size:0.85rem;
  margin:6px 0 4px;
  color:var(--muted);
}

/* Filter bar + chips */
.pc-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 6px;
}
.pc-filter-chip{
  border-radius:999px;
  border:1px solid var(--line);
  padding:3px 10px;
  font-size:0.78rem;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  user-select:none;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pc-filter-chip.active{
  background:var(--gold);
  border-color:var(--gold-strong);
  color:#fff;
}

/* Entity chip colouring by position
   1: All entities (keeps default)
   2: Phoenix Global Ops  -> red
   3: Phoenix HQ          -> gold
   4: Phoenix UK Sub      -> green */
.pc-filter-bar .pc-filter-chip:nth-child(2){
  border-color:#b22222;
  color:#ffb4b4;
}
.pc-filter-bar .pc-filter-chip:nth-child(3){
  border-color:var(--gold-strong);
  color:var(--gold);
}
.pc-filter-bar .pc-filter-chip:nth-child(4){
  border-color:#2e8b57;
  color:#9effc4;
}

/* Active state colours mapped to same entities */
.pc-filter-bar .pc-filter-chip:nth-child(2).active{
  background:rgba(178,34,34,0.9);
  border-color:#b22222;
  color:#fff;
}
.pc-filter-bar .pc-filter-chip:nth-child(3).active{
  background:var(--gold-strong);
  border-color:var(--gold-strong);
  color:#111;
}
.pc-filter-bar .pc-filter-chip:nth-child(4).active{
  background:#2e8b57;
  border-color:#2e8b57;
  color:#fff;
}

.pc-runway-scroll{overflow-x:auto; margin-top:8px;}
.pc-runway-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.pc-runway-table th,
.pc-runway-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  text-align:right;
  white-space:nowrap;
}
.pc-runway-table th:first-child,
.pc-runway-table td:first-child{
  text-align:left;
}
.pc-runway-table th{
  font-weight:600;
  color:var(--muted);
}
.pc-runway-table tr:hover td{
  background:rgba(255,255,255,0.03);
}

/* Colour flags */
.pc-row-warn td{
  background:rgba(184,134,11,0.14);
}
.pc-row-severe td{
  background:rgba(178,34,34,0.18);
}

.pc-left-flag{
  width:3px;
  border-radius:2px;
  margin-right:6px;
  display:inline-block;
  vertical-align:middle;
  height:16px;
}
.pc-flag-ok{background:#2e8b57;}
.pc-flag-warn{background:#b8860b;}
.pc-flag-severe{background:#b22222;}

/* Chart card */
.pc-chart-card{
  margin-top:14px;
  padding:12px 16px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.15);
}
.pc-chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  font-size:0.85rem;
}
#runwayChartContainer{display:none;}
.pc-chart-meta{
  font-size:0.8rem;
  color:var(--muted);
  margin-top:4px;
}

/* Breach log table */
.pc-breach-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.pc-breach-table th,
.pc-breach-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.badge-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:0.75rem;
  border:1px solid rgba(255,255,255,0.15);
}
.badge-pill.severe{border-color:#b22222; color:#ffb4b4;}
.badge-pill.elevated{border-color:#b8860b; color:#f7c66f;}
.badge-pill.info{border-color:#2e8b57; color:#9effc4;}

/* Org profile form */
.pc-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px 18px;
  margin-top:8px;
}
.pc-field label{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  display:block;
  margin-bottom:2px;
}
.pc-field input,
.pc-field select{
  width:100%;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:0.85rem;
}

/* Assistant */
.assistant-text{
  font-size:0.85rem;
  white-space:pre-wrap;
}

/* ===================== */
/*   DASHBOARD LAYOUT    */
/* ===================== */

/* Top Command Surface card + dashboard cards */
.pc-dashboard-hero,
.pc-dashboard-card{
  width:min(1100px,100%);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  padding:18px 22px;
  margin-bottom:18px;
}

.pc-dashboard-hero h3{
  margin-bottom:4px;
}
.pc-dashboard-hero .muted{
  font-size:0.8rem;
}

/* Hero KPI rows */
.pc-hero-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
  flex-wrap:wrap;
}
.pc-hero-block{
  font-size:0.8rem;
}
.pc-hero-label{
  display:block;
  color:var(--muted);
  margin-bottom:2px;
}
.pc-hero-value{
  font-size:1rem;
  font-weight:600;
}

/* Status chips in hero */
.pc-hero-status-chips{
  display:flex;
  gap:6px;
  margin-top:4px;
  flex-wrap:wrap;
}
.pc-hero-status-chips .tag-critical,
.pc-hero-status-chips .tag-warning,
.pc-hero-status-chips .tag-stable{
  font-size:0.7rem;
}

/* ===================== */
/*   RUNWAY TILES GRID   */
/* ===================== */

#runwayTiles{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.pc-runway-tile{
  flex:1 1 200px;
  min-width:200px;
  max-width:260px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.14);
  padding:10px 12px;
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pc-runway-tile .tile-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}

.tile-entity{
  font-weight:600;
  font-size:0.85rem;
}

.tile-main{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-end;
}

.tile-runway-value{
  font-size:1.2rem;
  font-weight:700;
}
.tile-runway-label{
  font-size:0.72rem;
  color:var(--muted);
}
.tile-cash-label{
  font-size:0.72rem;
  color:var(--muted);
  display:block;
}
.tile-cash-value{
  font-size:0.8rem;
}

/* ===================== */
/*   DASHBOARD ASSISTANT */
/* ===================== */

#dashboardAssistantBox{
  transition:max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease, padding-top 0.25s ease;
}
#dashboardAssistantBox.collapsed{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  padding-top:0;
}

/* Align quick links */
.pc-quick-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pc-quick-links .btn-small{
  margin-left:0;
}

/* ===================== */
/*   CHART HEIGHT FIX    */
/* ===================== */

/* Force sensible height for charts so they don't become endless */
#runwayChart,
#cashFloorChart,
#breachHeatmap{
  width:100% !important;
  height:260px !important;
  max-height:260px !important;
}