/* VisionnIQ — Deep Forest theme (WHOOP-inspired, dark green).
   Loaded AFTER each page's inline <style>, so these :root values win.
   Single source of truth — tweak here to retune the whole site. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  --bg:#080D0A; --s1:#121A15; --s2:#18231D; --s3:#1F2C26;
  --b1:rgba(255,255,255,0.07); --b2:rgba(31,224,130,0.20);
  --t1:#EAF3EE; --t2:#8FA39A; --t3:#566860;
  --acc:#1FE082; --grn:#2DD4A7; --red:#FF6B81; --amb:#F5B14C; --pur:#16C7C7;
  --mono:"Geist Mono","JetBrains Mono",monospace;
  --sans:"Inter",sans-serif;
  --display:"Space Grotesk","Inter",sans-serif;
}

/* Depth: layered emerald + teal glow baked into the page background */
body{
  background:
    radial-gradient(1000px 520px at 80% -12%, rgba(31,224,130,0.11), transparent 60%),
    radial-gradient(820px 480px at -6% 108%, rgba(22,199,199,0.06), transparent 55%),
    var(--bg) !important;
  background-attachment:fixed;
}

/* Display font on titles + brand */
.page-title,.panel-title,.logo-text,.kpi-value,.metric-value{font-family:var(--display);letter-spacing:-0.012em}
.kpi-value,.metric-value{font-family:var(--mono)}

/* Brand mark: emerald -> teal gradient with glow */
.logo-mark{background:linear-gradient(135deg,#1FE082,#16C7C7)!important;color:#04130C!important;box-shadow:0 4px 20px rgba(31,224,130,0.35)}

/* Data cells in mono + tabular numerals (skip product name + action button) */
.margin-table td:not(:first-child):not(:last-child){font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Panels: soft elevation + hairline */
.panel{box-shadow:0 1px 0 rgba(255,255,255,0.03),0 10px 34px rgba(0,0,0,0.40)}

/* Primary buttons: emerald gradient */
.btn-primary{background:linear-gradient(135deg,#1FE082,#0FB36B)!important;border-color:#1FE082!important;color:#04130C!important;box-shadow:0 4px 16px rgba(31,224,130,0.28)}

/* Recolour the old hardcoded cyan accents to emerald */
.nav-item.active{background:rgba(31,224,130,0.10)!important;color:var(--acc)!important;box-shadow:inset 2px 0 0 #1FE082}
.avatar{background:rgba(31,224,130,0.12)!important;color:var(--acc)!important}
.upload-panel:hover,.drop-zone:hover,.drop-zone.over{border-color:var(--acc)!important;background:rgba(31,224,130,0.08)!important}
.field input:focus,.search-input:focus{border-color:var(--acc)!important}

/* ---- Margin Health (gauges + hero + monitor cards) ---- */
.mh-wrap{margin-bottom:1.5rem}
.mh-title{font-family:var(--display);font-size:15px;font-weight:600;color:var(--t1);margin:0 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mh-title .sub{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--t3)}
.mh-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.mh-gauge{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--b1);border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center}
.mh-ring{position:relative;width:130px;height:130px}
.mh-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mh-ring .n{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;color:var(--t1)}
.mh-ring .u{font-family:var(--mono);font-size:11px;color:var(--t2);margin-top:3px}
.mh-glabel{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--t2);text-transform:uppercase;text-align:center}
.mh-gsub{font-size:10px;color:var(--t3);margin-top:2px;max-width:150px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-hero{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 18px;margin-bottom:14px;background:linear-gradient(135deg,#0B3D2E,#0B6E55 55%,#0E7C8B);box-shadow:0 10px 32px rgba(11,110,85,.30)}
.mh-hero .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.mh-hero h4{font-family:var(--display);font-size:16px;font-weight:600;color:#fff;margin:0 0 3px}
.mh-hero p{font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.4;margin:0}
.mh-monitors{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mh-mon{background:var(--s1);border:1px solid var(--b1);border-radius:16px;padding:16px 18px}
.mh-mon .h{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--t2);text-transform:uppercase;margin-bottom:12px}
.mh-mon .b{display:flex;align-items:center;gap:12px}
.mh-chip{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.mh-chip.ok{background:rgba(31,224,130,.14);color:var(--acc)}
.mh-chip.warn{background:rgba(245,177,76,.16);color:var(--amb)}
.mh-mon .val{font-family:var(--display);font-weight:700;font-size:18px;color:var(--t1)}
.mh-mon .s{font-size:11px;color:var(--t3)}
@media(max-width:720px){.mh-gauges{grid-template-columns:1fr}.mh-monitors{grid-template-columns:1fr}}