/* ═══════════════════════════════════════════════════════════════
   SITELOG · Editorial Brutalist Industrial — design overlay
   Mono palette + safety orange accent. Space Grotesk + JetBrains Mono.
   Loaded LAST → overrides polish.css tokens via cascade.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* Mono foundation */
  --bg:           #FAFAF7;
  --bg-grad:      #FAFAF7;
  --panel:        #FFFFFF;
  --panel-alt:    #F5F4F0;
  --ink:          #0A0B0D;
  --ink-soft:     #1A1B1F;
  --muted:        #6B6E76;
  --muted-dim:    #9A9CA3;
  --line:         #E6E5E1;
  --line-strong:  #C5C3BD;

  /* Brand: industrial safety orange */
  --brand:        #FF5500;
  --brand-dark:   #CC4400;
  --brand-darker: #0A0B0D;
  --brand-soft:   rgba(255, 85, 0, 0.08);
  --brand-tint:   rgba(255, 85, 0, 0.16);

  /* Muted semantics */
  --green:        #2E7D32;
  --green-soft:   rgba(46, 125, 50, 0.10);
  --amber:        #B8860B;
  --amber-soft:   rgba(184, 134, 11, 0.10);
  --red:          #C62828;
  --red-soft:     rgba(198, 40, 40, 0.10);
  --cyan:         #0288A6;

  /* No shadows — borders dominant */
  --shadow-sm:    none;
  --shadow:       none;
  --shadow-md:    none;
  --shadow-lg:    none;
  --shadow-glow:  0 0 0 3px var(--brand-soft);

  /* Sharp radii */
  --r-xs:   2px;
  --r-sm:   4px;
  --r:      6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 4px;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
}

/* Base */
html, body {
  background: var(--bg) !important;
  background-attachment: scroll !important;
}
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Mono numerics everywhere */
.kpi-card .value, .stat-tile strong, .plan-card .value, td, th,
.fleet-chip strong, .hero-badge strong, .insight-card .value,
.chart-row .value, .progress-num, .filter-chip, .num, .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero", "tnum";
  letter-spacing: 0;
}

/* Display typography for headlines */
h1, h2, h3, .display, .hero h1, .form-hero h1, .page-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}
h1 { font-size: clamp(32px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3.5vw, 32px); }
h3 { font-size: clamp(18px, 2.5vw, 22px); }

/* Eyebrow labels */
.eyebrow, .section-header > .label, .form-section-label, label {
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 11px;
  color: var(--muted);
}

/* Hero overhaul — brutalist, no gradients */
.hero, .form-hero {
  background: var(--ink) !important;
  color: #fff;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  padding: 32px 24px;
}
.hero::before, .form-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.4;
}
.hero h1, .form-hero h1 { color: #fff; }
.hero h1::before, .form-hero h1::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--brand);
  margin-right: 12px;
  vertical-align: middle;
}

/* Hero badges → mono tags */
.hero-badge {
  background: var(--ink-soft) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: var(--r-sm) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff !important;
  padding: 6px 10px !important;
}
.hero-badge strong { color: var(--brand) !important; }

/* Cards — hard borders, no shadow */
.card, .panel, .kpi-card, .plan-card, .insight-card, .filter-bar, .form-section {
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  background: var(--panel);
}
.kpi-card::before { display: none !important; }

/* Buttons — sharp, weighty */
button, .btn, .button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
  transition: transform 0.1s ease, background 0.15s ease;
}
button:hover, .btn:hover, .button:hover { transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }
button.primary, .btn-primary, .btn.primary {
  background: var(--brand) !important;
  color: #fff !important;
}
button.primary:hover { background: var(--brand-dark) !important; }
button.ghost, .btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
}

/* Inputs */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  font-family: 'JetBrains Mono', monospace !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  background: var(--panel) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px var(--brand-soft) !important;
  outline: none;
}

/* Labels above inputs */
label, .field-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Tables — brutalist data grid */
table { border-collapse: collapse; }
th {
  background: var(--ink) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  border: none !important;
  padding: 10px 12px !important;
}
td {
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  font-size: 13px;
}
tbody tr:hover { background: var(--panel-alt); }

/* Chips / pills — square */
.chip, .filter-chip, .tag, .pill {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
}
.chip.active, .filter-chip.active, .chip.selected {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* Stat tiles — bordered grid */
.stat-tile, .kpi-card {
  padding: 20px !important;
  background: var(--panel) !important;
}
.kpi-card .value, .stat-tile strong {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
}
.kpi-card .label, .stat-tile .label {
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 10.5px !important;
  color: var(--muted) !important;
}

/* Section divider — hard rule */
.section-divider, hr {
  border: none !important;
  height: 1.5px !important;
  background: var(--ink) !important;
  margin: 32px 0 !important;
}

/* Loading skeletons — strict mono */
.skeleton {
  background: linear-gradient(90deg, var(--line) 0%, var(--panel-alt) 50%, var(--line) 100%) !important;
  border-radius: var(--r-xs) !important;
}

/* Status colors keep but mono accent */
.success, .ok, .badge-green { color: var(--green) !important; }
.warning, .badge-amber { color: var(--amber) !important; }
.error, .danger, .badge-red { color: var(--red) !important; }

/* Numbered nav (01 / 02 / 03 brutalist signature) */
.numbered::before {
  content: attr(data-num) " // ";
  font-family: 'JetBrains Mono', monospace;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Noise overlay (subtle paper grain) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* Toast/notification */
.toast {
  background: var(--ink) !important;
  color: #fff !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: var(--r-sm) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

/* Top-left brand mark (auto-injected) */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.brand-mark img { width: 22px; height: 22px; }
.hero .brand-mark, .form-hero .brand-mark { color: #fff; }

/* Scroll bar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--bg); }

/* ──────────────────────────────────────────────────────────────
   HIGH-SPECIFICITY OVERRIDES (defeat polish.css cascade)
   ────────────────────────────────────────────────────────────── */

/* Top navigation — solid ink, no blue gradient */
body .topnav,
html body .topnav,
.form-page .topnav {
  background: var(--ink) !important;
  border-bottom: 1.5px solid var(--ink) !important;
  background-image: none !important;
  color: #fff !important;
}
body .topnav .topnav-brand,
body .topnav a {
  color: #fff !important;
}
body .topnav .topnav-logo {
  background: var(--brand) !important;
  border-radius: var(--r-xs) !important;
  width: 22px !important; height: 22px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* Hero / form-hero — solid ink, no purple/cyan radials */
body .hero,
body .form-hero,
.form-page .form-hero {
  background: var(--ink) !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #fff !important;
  border-bottom: 1.5px solid var(--ink) !important;
}
body .hero h1, body .form-hero h1,
body .hero .hero-sub, body .form-hero .hero-sub,
body .hero .form-hero-sub, body .form-hero .form-hero-sub {
  color: #fff !important;
}

/* Primary buttons — ALWAYS orange */
body button.primary,
body .btn-primary,
body .btn.primary,
body button[type="submit"],
body .submit-btn,
body input[type="submit"],
.form-actions .btn-primary {
  background: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
body button.primary:hover,
body .btn-primary:hover {
  background: var(--brand-dark) !important;
}

/* Section number badges (the blue "1" "2" "3" circles) */
body .form-section-num,
body .form-section .section-num,
body .form-section header > span:first-child,
body .form-section-header > .num,
body [class*="section-num"] {
  background: var(--ink) !important;
  color: var(--brand) !important;
  border-radius: var(--r-xs) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
}

/* Filter chip pill row */
body .filter-chip,
body .chip {
  background: var(--panel) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
}
body .filter-chip.active,
body .chip.active {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Project status pill / colored badges */
body .badge-online {
  background: var(--green) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Form section bordered card */
body .form-section,
body .form-card {
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-md) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

/* Inputs/selects/textarea inside form */
body .form-page input,
body .form-page select,
body .form-page textarea {
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-sm) !important;
  background: var(--panel) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
body .form-page input:focus,
body .form-page select:focus,
body .form-page textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px var(--brand-soft) !important;
}

/* Reset / secondary buttons */
body .btn:not(.primary):not(.btn-primary) {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
}

/* KPI / hero badge cards */
body .hero-badge {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}