/* ==========================================================================
   Evalynx UI — foundation + PageHeader component (premium overhaul pilot)
   Scoped, theme-aware (uses the app's data-theme on <html>). Safe to add
   without affecting existing pages; only elements with .ev-* classes are styled.
   ========================================================================== */

.ev-ph{
  /* light tokens (default) */
  --ph-accent:#5b54e6;
  --ph-accent-press:#4842c9;
  --ph-accent-soft:#ecebfe;
  --ph-h1:#edecf9;      /* header gradient top */
  --ph-h2:#fbfbfe;      /* header gradient bottom */
  --ph-ink:#1b1c28;
  --ph-2:#5b5e72;
  --ph-line:#e6e7f0;
  --ph-surface:#ffffff;
  --ph-shadow:0 12px 30px -14px rgba(24,24,52,.28);
}
:root[data-theme="dark"] .ev-ph{
  --ph-accent:#8078ff;
  --ph-accent-press:#6a62f0;
  --ph-accent-soft:#201e3f;
  --ph-h1:#1a1c2b;
  --ph-h2:#101119;
  --ph-ink:#eceef6;
  --ph-2:#a6a9bd;
  --ph-line:#282a39;
  --ph-surface:#15161f;
  --ph-shadow:0 14px 30px -16px rgba(0,0,0,.7);
}
/* Fallback if data-theme is not yet set */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ev-ph{
    --ph-accent:#8078ff;--ph-accent-press:#6a62f0;--ph-accent-soft:#201e3f;
    --ph-h1:#1a1c2b;--ph-h2:#101119;--ph-ink:#eceef6;--ph-2:#a6a9bd;--ph-line:#282a39;--ph-surface:#15161f;
    --ph-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  }
}

/* ---- PageHeader band: slim, restrained premium gradient ---- */
.ev-ph{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1.5rem;
  padding:1.1rem 1.15rem 1.15rem;
  border-bottom:1px solid var(--ph-line);
  border-radius:16px 16px 0 0;
  background:
    radial-gradient(130% 220% at 0% -80%, color-mix(in srgb, var(--ph-accent) 12%, transparent), transparent 55%),
    linear-gradient(180deg, var(--ph-h1) 0%, var(--ph-h2) 100%);
}
.ev-ph-left{min-width:0}
.ev-ph-eyebrow{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ph-accent);font-weight:800;margin:0 0 .32rem;
}
.ev-ph h1{
  font-size:1.55rem;font-weight:800;letter-spacing:-.012em;line-height:1.15;
  color:var(--ph-ink);margin:0;display:flex;align-items:center;gap:.55rem;
}
.ev-ph h1 i{color:var(--ph-accent);font-size:1.15rem}
.ev-ph-count{
  font-size:.72rem;font-weight:700;color:var(--ph-2);
  background:var(--ph-surface);border:1px solid var(--ph-line);
  border-radius:999px;padding:.12rem .55rem;line-height:1.4;
}
.ev-ph-desc{font-size:.83rem;color:var(--ph-2);margin:.32rem 0 0}

/* ---- Actions ---- */
.ev-ph-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.ev-btn{
  font-size:.82rem;font-weight:700;border-radius:9px;padding:.58rem .9rem;
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  text-decoration:none;border:1px solid transparent;line-height:1;white-space:nowrap;
  transition:filter .15s ease,border-color .15s ease,background .15s ease;
}
.ev-btn i{font-size:.85em}
.ev-btn-primary{background:var(--ph-accent);color:#fff}
.ev-btn-primary:hover{background:var(--ph-accent-press)}
.ev-btn-secondary{background:var(--ph-surface);border-color:var(--ph-line);color:var(--ph-ink)}
.ev-btn-secondary:hover{border-color:var(--ph-accent);color:var(--ph-accent)}

/* ---- "New" dropdown (native <details>, no framework) ---- */
.ev-new{position:relative}
.ev-new>summary{list-style:none;display:inline-flex}
.ev-new>summary::-webkit-details-marker{display:none}
.ev-new>summary::marker{content:""}
.ev-new[open]>summary .ev-caret{transform:rotate(180deg)}
.ev-caret{transition:transform .15s ease;font-size:.7em;margin-left:.1rem}
.ev-new-menu{
  position:absolute;right:0;top:calc(100% + .45rem);min-width:250px;
  background:var(--ph-surface);border:1px solid var(--ph-line);border-radius:13px;
  box-shadow:var(--ph-shadow);padding:.4rem;z-index:60;
  display:flex;flex-direction:column;gap:.08rem;
}
.ev-new-item{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .62rem;border-radius:9px;
  color:var(--ph-ink);text-decoration:none;font-size:.82rem;font-weight:600;
  background:transparent;border:0;cursor:pointer;width:100%;text-align:left;font-family:inherit;
}
.ev-new-item:hover{background:var(--ph-accent-soft);color:var(--ph-accent)}
.ev-new-item i{width:1.05rem;text-align:center;color:var(--ph-2);flex:none}
.ev-new-item:hover i{color:var(--ph-accent)}
.ev-new-sep{height:1px;background:var(--ph-line);margin:.25rem .2rem}

/* ---- View toggle (aligned to the new system) ---- */
.ev-view-toggle{display:inline-flex;border:1px solid var(--ph-line);border-radius:9px;overflow:hidden;background:var(--ph-surface)}
.ev-view-toggle button{
  border:0;background:transparent;color:var(--ph-2);padding:.5rem .62rem;cursor:pointer;font-size:.82rem;line-height:1;
}
.ev-view-toggle button.active{background:var(--ph-accent-soft);color:var(--ph-accent)}

@media (max-width:640px){
  .ev-ph{flex-direction:column;align-items:stretch}
  .ev-ph-actions{justify-content:flex-start}
}

/* ==========================================================================
   Unified stat card (.ev-stat) — one spec for every page, both themes.
   Replaces the light-glass vs dark-navy drift (Dashboard vs Control Room).
   ========================================================================== */
.ev-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0 0 1.5rem;
}
@media (max-width:900px){.ev-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ev-stats{grid-template-columns:1fr}}

.ev-stat{
  --st-accent:#5b54e6;--st-accent-soft:#ecebfe;--st-ink:#1b1c28;--st-2:#5b5e72;
  --st-line:#e6e7f0;--st-surface:#ffffff;--st-good:#17915f;--st-crit:#cf3f50;
  --st-shadow:0 1px 2px rgba(20,20,40,.05),0 10px 24px -16px rgba(30,30,60,.25);
  background:var(--st-surface);border:1px solid var(--st-line);border-radius:14px;
  padding:1rem 1.1rem;box-shadow:var(--st-shadow);display:flex;flex-direction:column;gap:.7rem;
}
:root[data-theme="dark"] .ev-stat{
  --st-accent:#8078ff;--st-accent-soft:#201e3f;--st-ink:#eceef6;--st-2:#a6a9bd;
  --st-line:#282a39;--st-surface:#15161f;--st-good:#33c98d;--st-crit:#f0707f;
  --st-shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ev-stat{
    --st-accent:#8078ff;--st-accent-soft:#201e3f;--st-ink:#eceef6;--st-2:#a6a9bd;
    --st-line:#282a39;--st-surface:#15161f;--st-good:#33c98d;--st-crit:#f0707f;
  }
}
.ev-stat__icon{
  width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;
  background:var(--st-accent-soft);color:var(--st-accent);font-size:.95rem;
}
.ev-stat__value{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:var(--st-ink);
  line-height:1;font-variant-numeric:tabular-nums}
.ev-stat__label{font-size:.78rem;color:var(--st-2);font-weight:600}
.ev-stat__delta{font-size:.72rem;font-weight:700;color:var(--st-good)}
.ev-stat--crit .ev-stat__value{color:var(--st-crit)}
.ev-stat--crit .ev-stat__icon{background:color-mix(in srgb,var(--st-crit) 14%,transparent);color:var(--st-crit)}

/* ==========================================================================
   Operational table (.ev-optable) — clean, scannable rows for ops pages
   (Control Room, and reusable elsewhere). Theme-aware.
   ========================================================================== */
.ev-optable-card{
  --ot-accent:#5b54e6;--ot-ink:#1b1c28;--ot-2:#5b5e72;--ot-3:#9195aa;--ot-line:#e9eaf2;
  --ot-surface:#ffffff;--ot-head:#f3f3fa;--ot-hover:#f7f7fc;--ot-good:#17915f;--ot-good-bg:#e4f5ec;
  --ot-warn:#a8690a;--ot-warn-bg:#fbefda;--ot-crit:#cf3f50;--ot-crit-bg:#fce9ec;--ot-info:#2563c9;--ot-info-bg:#e7effc;
  --ot-shadow:0 1px 2px rgba(20,20,40,.05),0 12px 30px -18px rgba(30,30,60,.25);
  background:var(--ot-surface);border:1px solid var(--ot-line);border-radius:16px;box-shadow:var(--ot-shadow);overflow:hidden;
}
:root[data-theme="dark"] .ev-optable-card{
  --ot-accent:#8078ff;--ot-ink:#eceef6;--ot-2:#a6a9bd;--ot-3:#6c6f85;--ot-line:#282a39;
  --ot-surface:#15161f;--ot-head:#1b1d29;--ot-hover:#1c1e2b;--ot-good:#33c98d;--ot-good-bg:#10261e;
  --ot-warn:#e0a340;--ot-warn-bg:#2a2110;--ot-crit:#f0707f;--ot-crit-bg:#2c1519;--ot-info:#6fa8ff;--ot-info-bg:#12233d;
  --ot-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 34px -20px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-optable-card{
  --ot-accent:#8078ff;--ot-ink:#eceef6;--ot-2:#a6a9bd;--ot-3:#6c6f85;--ot-line:#282a39;
  --ot-surface:#15161f;--ot-head:#1b1d29;--ot-hover:#1c1e2b;--ot-good:#33c98d;--ot-good-bg:#10261e;
  --ot-warn:#e0a340;--ot-warn-bg:#2a2110;--ot-crit:#f0707f;--ot-crit-bg:#2c1519;--ot-info:#6fa8ff;--ot-info-bg:#12233d;
}}
.ev-optable-wrap{overflow-x:auto}
.ev-optable{width:100%;border-collapse:collapse;font-size:.83rem;color:var(--ot-ink);min-width:760px}
.ev-optable thead th{
  text-align:center;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ot-3);font-weight:700;
  padding:.85rem .7rem;background:var(--ot-head);border-bottom:1px solid var(--ot-line);white-space:nowrap;
}
.ev-optable thead th:first-child{text-align:left;padding-left:1.1rem}
.ev-optable thead th:last-child{padding-right:1.1rem}
.ev-optable tbody td{padding:.85rem .7rem;border-bottom:1px solid var(--ot-line);text-align:center;vertical-align:middle}
.ev-optable tbody td:first-child{text-align:left;padding-left:1.1rem}
.ev-optable tbody td:last-child{padding-right:1.1rem}
.ev-optable tbody tr:last-child td{border-bottom:0}
.ev-optable tbody tr:hover{background:var(--ot-hover)}
.ev-optable tbody tr.is-flagged td:first-child{box-shadow:inset 3px 0 0 var(--ot-crit)}
.ev-ot-exam{display:flex;flex-direction:column;gap:.3rem;min-width:180px}
.ev-ot-exam strong{font-size:.92rem;font-weight:700;color:var(--ot-ink);line-height:1.25}
.ev-ot-sched{font-size:.72rem;color:var(--ot-3)}
.ev-ot-num{font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem;color:var(--ot-ink)}
.ev-ot-num--zero{color:var(--ot-3);font-weight:600}
.ev-ot-num--live{color:var(--ot-accent)}
.ev-ot-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  padding:.2rem .55rem;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.ev-ot-chip::before{content:"";width:6px;height:6px;border-radius:50%}
.ev-ot-chip--active{color:var(--ot-good);background:var(--ot-good-bg)}.ev-ot-chip--active::before{background:var(--ot-good)}
.ev-ot-chip--draft{color:var(--ot-warn);background:var(--ot-warn-bg)}.ev-ot-chip--draft::before{background:var(--ot-warn)}
.ev-ot-chip--completed{color:var(--ot-info);background:var(--ot-info-bg)}.ev-ot-chip--completed::before{background:var(--ot-info)}
.ev-ot-chip--neutral{color:var(--ot-2);background:color-mix(in srgb,var(--ot-2) 14%,transparent)}.ev-ot-chip--neutral::before{background:var(--ot-2)}
.ev-ot-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.5rem;padding:0 .5rem;border-radius:999px;
  font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums}
.ev-ot-badge--alert{color:var(--ot-crit);background:var(--ot-crit-bg)}
.ev-ot-badge--zero{color:var(--ot-3);background:transparent}
.ev-ot-open{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;text-decoration:none;
  padding:.45rem .8rem;border-radius:8px;background:var(--ot-accent);color:#fff;white-space:nowrap}
.ev-ot-open:hover{filter:brightness(1.07)}
.ev-ot-empty{padding:3rem 1.5rem;text-align:center;color:var(--ot-2)}
.ev-ot-empty i{font-size:1.6rem;color:var(--ot-3);margin-bottom:.6rem;display:block}
.ev-ot-empty h3{font-size:1rem;color:var(--ot-ink);margin:0 0 .35rem}
.ev-ot-empty p{font-size:.83rem;margin:0 auto;max-width:44ch}
/* stacked labels for small screens */
.ev-ot-collabel{display:none;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ot-3);margin-bottom:.15rem}

/* Section heading (above tables/sections within a page) */
.ev-section-head{--sh-ink:#1b1c28;--sh-2:#5b5e72;--sh-line:#e6e7f0;--sh-surface:#fff;--sh-accent:#5b54e6;--sh-accent-soft:#ecebfe;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1.75rem 0 1rem;flex-wrap:wrap}
:root[data-theme="dark"] .ev-section-head{--sh-ink:#eceef6;--sh-2:#a6a9bd;--sh-line:#282a39;--sh-surface:#15161f;--sh-accent:#8078ff;--sh-accent-soft:#201e3f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-section-head{--sh-ink:#eceef6;--sh-2:#a6a9bd;--sh-line:#282a39;--sh-surface:#15161f;--sh-accent:#8078ff;--sh-accent-soft:#201e3f}}
.ev-section-head__title h2{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--sh-ink)}
.ev-section-head__title p{font-size:.82rem;margin:.22rem 0 0;color:var(--sh-2)}
.ev-count{font-size:.72rem;font-weight:700;color:var(--sh-accent);background:var(--sh-accent-soft);
  border-radius:999px;padding:.25rem .7rem;white-space:nowrap}