/* ============================================================
   BEP Stock · Design System (Velt)
   Brutalist refined — bordeaux + jet + bone
   Used by the React app AND the standalone HTML views
   ============================================================ */

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

:root {
  /* ----- raw palette ----- */
  --bep-jet:        #0A0A0A;
  --bep-asphalt:    #1A1A1A;
  --bep-steel:      #2E2E2E;
  --bep-graphite:   #4A4A4A;
  --bep-concrete:   #8A8A8A;
  --bep-cement:     #BDBDBD;
  --bep-chalk:      #E5E5E2;
  --bep-bone:       #F4F4F0;
  --bep-paper:      #FAFAF7;
  --bep-white:      #FFFFFF;

  --bep-bordeaux:      #6B1F2E;
  --bep-bordeaux-deep: #501623;
  --bep-bordeaux-tint: #F4E6E9;
  --bep-bottle:        #0E3B2E;
  --bep-bottle-deep:   #082A20;
  --bep-bottle-tint:   #E2EBE7;
  --bep-hazard:        #B0282A;
  --bep-check:         #1F8A5B;
  --bep-info:          #2A6FDB;

  /* status */
  --bep-ok-bg:    #E3F1EA; --bep-ok-fg:   #155B3E;
  --bep-warn-bg:  #FFF4CC; --bep-warn-fg: #6B5300;
  --bep-err-bg:   #FBE0DE; --bep-err-fg:  #8E1916;
  --bep-info-bg:  #DFE9F9; --bep-info-fg: #15407F;

  /* ----- typography ----- */
  --bep-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bep-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- shadows / motion ----- */
  --bep-shadow-pop: 4px 4px 0 0 var(--bep-jet);
  --bep-shadow-hard: 2px 2px 0 0 var(--bep-jet);
  --bep-shadow-ring: 0 0 0 3px var(--bep-bordeaux);
  --bep-ease-snap: cubic-bezier(0.4, 0, 0, 1);

  /* ----- legacy aliases for existing inline styles ----- */
  --bep-teal: var(--bep-bordeaux);
  --bep-gold: var(--bep-bordeaux);
  --bep-dark: var(--bep-jet);
  --bep-surface: var(--bep-bone);
  --bep-card: var(--bep-paper);
  --bep-border: var(--bep-chalk);
  --bep-text: var(--bep-jet);
  --bep-muted: var(--bep-graphite);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--bep-font-sans);
  color: var(--bep-jet);
  background: var(--bep-bone);
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 { font-family: var(--bep-font-sans); letter-spacing: -0.02em; }

code, kbd, samp, pre, .mono, .font-mono { font-family: var(--bep-font-mono); }

/* numbers + IDs default to tabular monospace where the markup hints at it */
[class*="mono"], [data-mono], .tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================
   Scrollbars — thin, jet
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bep-cement); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--bep-graphite); }

/* ============================================================
   Selection / focus
   ============================================================ */
::selection { background: var(--bep-bordeaux); color: var(--bep-paper); }
:focus-visible { outline: none; box-shadow: var(--bep-shadow-ring); }

/* ============================================================
   Hachure utility patterns (industrial accents)
   ============================================================ */
.hachure {
  background-image: repeating-linear-gradient(-45deg, var(--bep-jet) 0 1px, transparent 1px 8px);
}
.hachure-yellow {
  background: repeating-linear-gradient(-45deg, var(--bep-bordeaux) 0 10px, var(--bep-jet) 10px 20px);
}

/* ============================================================
   Reusable components (mirrors the Standalone UI kit)
   ============================================================ */

/* --- Buttons --- */
.bep-btn {
  font-family: var(--bep-font-sans);
  font-size: 13px; font-weight: 600; line-height: 1;
  padding: 8px 14px;
  border: 1px solid var(--bep-jet);
  background: var(--bep-paper); color: var(--bep-jet);
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; border-radius: 0;
  transition: transform 120ms var(--bep-ease-snap), box-shadow 120ms;
}
.bep-btn:hover { background: var(--bep-bone); }
.bep-btn.primary { background: var(--bep-bordeaux); color: var(--bep-paper); box-shadow: var(--bep-shadow-hard); border-color: var(--bep-jet); }
.bep-btn.primary:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 var(--bep-jet); background: var(--bep-bordeaux-deep); }
.bep-btn.primary:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 0 var(--bep-jet); }
.bep-btn.dark { background: var(--bep-jet); color: var(--bep-paper); }
.bep-btn.ghost { background: transparent; border-color: transparent; }
.bep-btn.ghost:hover { background: var(--bep-chalk); }
.bep-btn.danger { color: var(--bep-err-fg); border-color: var(--bep-err-fg); background: var(--bep-paper); }
.bep-btn.sm { font-size: 12px; padding: 5px 10px; }

/* --- Inputs --- */
.bep-ipt {
  font-family: inherit; font-size: 13px; line-height: 1.2;
  padding: 8px 10px;
  border: 1px solid var(--bep-jet);
  background: var(--bep-white);
  border-radius: 2px;
}
.bep-ipt.mono { font-family: var(--bep-font-mono); }
.bep-ipt:focus { outline: none; box-shadow: var(--bep-shadow-ring); }

/* --- Field --- */
.bep-field { display: flex; flex-direction: column; gap: 5px; }
.bep-field > label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bep-graphite); }

/* --- Eyebrow / section --- */
.bep-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bep-graphite); }
.bep-sec { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }
.bep-sec h2 { font-size: 16px; font-weight: 600; margin: 0; }
.bep-sec hr { flex: 1; border: 0; border-top: 1px solid var(--bep-chalk); margin: 0; }

/* --- Cards --- */
.bep-card-flat {
  background: var(--bep-paper);
  border: 1px solid var(--bep-chalk);
  border-radius: 0;
}
.bep-card-signature {
  background: var(--bep-paper);
  border: 2px solid var(--bep-jet);
  box-shadow: var(--bep-shadow-pop);
  border-radius: 0;
}
.bep-card-hachure {
  background: var(--bep-paper);
  border: 1px dashed var(--bep-jet);
  background-image: linear-gradient(90deg, transparent 0 calc(100% - 4px), var(--bep-jet) calc(100% - 4px));
  border-radius: 0;
}

/* --- Badge --- */
.bep-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 7px; display: inline-flex; align-items: center; gap: 5px;
  border-radius: 2px; line-height: 1.4;
}
.bep-badge::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.bep-badge.flat::before { display: none; }
.bep-badge.ok   { background: var(--bep-ok-bg);   color: var(--bep-ok-fg); }
.bep-badge.warn { background: var(--bep-warn-bg); color: var(--bep-warn-fg); }
.bep-badge.err  { background: var(--bep-err-bg);  color: var(--bep-err-fg); }
.bep-badge.info { background: var(--bep-info-bg); color: var(--bep-info-fg); }
.bep-badge.neut { background: var(--bep-chalk);   color: var(--bep-steel); }
.bep-badge.dark { background: var(--bep-bordeaux);color: var(--bep-paper); }

/* --- KPI --- */
.bep-kpi {
  background: var(--bep-paper);
  border: 1px solid var(--bep-chalk);
  padding: 14px 16px; border-radius: 0; position: relative;
}
.bep-kpi.signature { border: 2px solid var(--bep-jet); box-shadow: var(--bep-shadow-pop); }
.bep-kpi__eye { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bep-graphite); }
.bep-kpi__num { font-family: var(--bep-font-mono); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-top: 12px; font-variant-numeric: tabular-nums; }
.bep-kpi__sub { font-size: 11px; color: var(--bep-graphite); margin-top: 8px; }

/* --- Data table --- */
.bep-dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.bep-dtable th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bep-graphite);
  text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--bep-jet);
  background: var(--bep-bone); white-space: nowrap;
}
.bep-dtable th.num { text-align: right; }
.bep-dtable td { padding: 11px 12px; border-bottom: 1px solid var(--bep-chalk); vertical-align: middle; }
.bep-dtable td.num { text-align: right; font-family: var(--bep-font-mono); font-variant-numeric: tabular-nums; }
.bep-dtable td.mono { font-family: var(--bep-font-mono); font-size: 12px; }
.bep-dtable tr:hover td { background: var(--bep-paper); }
.bep-dtable tr.selected td { background: var(--bep-bordeaux-tint); }

/* ============================================================
   RETROFIT — Override existing app classes / legacy colors
   The live React app is built on Tailwind via CDN.
   We retrofit a brutalist look by neutralising rounding, shadow
   softness, decorative gradients, and remapping the legacy
   teal/gold/amber palette to bordeaux/jet/bone.
   ============================================================ */

/* legacy app classes from index.css */
.bep-table thead tr { background: var(--bep-bone); }
.bep-table th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bep-graphite);
  padding: 10px 12px; text-align: left;
  border-bottom: 2px solid var(--bep-jet);
  background: var(--bep-bone);
}
.bep-table td { padding: 11px 12px; font-size: 13px; border-bottom: 1px solid var(--bep-chalk); color: var(--bep-steel); }
.bep-table tbody tr:hover td { background: var(--bep-paper); }

.bep-card {
  background: var(--bep-paper);
  border: 1px solid var(--bep-chalk);
  border-radius: 0;
  box-shadow: none;
}

.bep-badge {
  border-radius: 2px;
  letter-spacing: 0.1em;
}

/* ============================================================
   Tailwind CDN retrofit — soft → brutalist
   These remap utility classes without changing markup.
   ============================================================ */

/* radii — flatten everything except pills and circles (avatars) */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl { border-radius: 2px !important; }

/* keep avatar / pill shapes */
.rounded-full { border-radius: 9999px !important; }

/* shadows — kill soft blur; promote signature elements to hard-offset */
.shadow-sm, .shadow, .shadow-md, .shadow-lg { box-shadow: var(--bep-shadow-hard) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--bep-shadow-pop) !important; }
.shadow-none { box-shadow: none !important; }

/* default body bg if Tailwind sets bg-gray-* canvas */
.bg-gray-50, .bg-slate-50, .bg-stone-50, .bg-zinc-50, .bg-neutral-50 { background-color: var(--bep-bone) !important; }
.bg-white { background-color: var(--bep-paper) !important; }
.bg-gray-100, .bg-slate-100, .bg-stone-100, .bg-zinc-100, .bg-neutral-100 { background-color: var(--bep-bone) !important; }

/* legacy teal/gold/amber/orange → bordeaux family */
.bg-teal-50, .bg-amber-50, .bg-yellow-50, .bg-orange-50 { background-color: var(--bep-bordeaux-tint) !important; }
.bg-teal-100, .bg-amber-100, .bg-yellow-100, .bg-orange-100 { background-color: var(--bep-bordeaux-tint) !important; }
.bg-teal-500, .bg-teal-600, .bg-teal-700,
.bg-amber-500, .bg-amber-600, .bg-amber-700,
.bg-yellow-500, .bg-yellow-600,
.bg-orange-500, .bg-orange-600 { background-color: var(--bep-bordeaux) !important; color: var(--bep-paper) !important; }

.text-teal-500, .text-teal-600, .text-teal-700,
.text-amber-500, .text-amber-600, .text-amber-700,
.text-yellow-500, .text-yellow-600,
.text-orange-500, .text-orange-600 { color: var(--bep-bordeaux) !important; }

.border-teal-500, .border-teal-600,
.border-amber-500, .border-amber-600,
.border-yellow-500, .border-yellow-600,
.border-orange-500, .border-orange-600 { border-color: var(--bep-bordeaux) !important; }

/* greens → bottle */
.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600 { background-color: var(--bep-bottle) !important; color: var(--bep-paper) !important; }
.text-emerald-500, .text-emerald-600, .text-green-500, .text-green-600, .text-green-700 { color: var(--bep-bottle) !important; }
.text-emerald-700 { color: var(--bep-ok-fg) !important; }
.bg-emerald-50, .bg-green-50, .bg-green-100, .bg-emerald-100 { background-color: var(--bep-ok-bg) !important; }

/* reds → hazard */
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 { background-color: var(--bep-hazard) !important; color: var(--bep-paper) !important; }
.text-red-500, .text-red-600, .text-red-700, .text-rose-500, .text-rose-600, .text-rose-700 { color: var(--bep-err-fg) !important; }
.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100 { background-color: var(--bep-err-bg) !important; }

/* darks */
.bg-slate-900, .bg-gray-900, .bg-neutral-900, .bg-zinc-900, .bg-stone-900,
.bg-slate-800, .bg-gray-800, .bg-neutral-800, .bg-zinc-800, .bg-stone-800 { background-color: var(--bep-jet) !important; color: var(--bep-paper) !important; }

/* gradients — flatten any "from-… to-…" backgrounds to a solid jet */
[class*="bg-gradient"] { background-image: none !important; background-color: var(--bep-jet) !important; color: var(--bep-paper) !important; }

/* generic borders — tighten to chalk */
.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-zinc-100, .border-zinc-200, .border-neutral-100, .border-neutral-200 { border-color: var(--bep-chalk) !important; }
.border-gray-300, .border-slate-300, .border-zinc-300, .border-neutral-300 { border-color: var(--bep-cement) !important; }

/* focus rings: align to bordeaux */
.ring-teal-500, .ring-amber-500, .ring-yellow-500, .ring-orange-500 { --tw-ring-color: var(--bep-bordeaux) !important; }
.focus\:ring-teal-500:focus, .focus\:ring-amber-500:focus { --tw-ring-color: var(--bep-bordeaux) !important; }

/* inputs — sharper, jet border */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
  border-radius: 2px;
  font-family: var(--bep-font-sans);
  transition: box-shadow 0.15s, border-color 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--bep-shadow-ring); }

/* native button base — keep specific opt-in via .bep-btn */
button { font-family: inherit; }

/* uppercase tracked label utility shared with vue-*.html */
.bep-label-track {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bep-graphite);
}

/* ============================================================
   Standalone HTML views retrofit
   Many vue-*.html files inline a dark theme with teal/gold.
   We re-skin the most visible elements to the brutalist palette
   without changing the markup or layout.
   ============================================================ */

body.bep-skin {
  background: var(--bep-bone) !important;
  color: var(--bep-jet) !important;
  font-family: var(--bep-font-sans) !important;
}

body.bep-skin .header {
  background: var(--bep-jet) !important;
  color: var(--bep-paper) !important;
  border-bottom: 1px solid var(--bep-jet);
}
body.bep-skin .header::before { display: none !important; }
body.bep-skin .header-text h1 { color: var(--bep-paper); letter-spacing: -0.02em; }
body.bep-skin .header-text p  { color: var(--bep-cement); }
body.bep-skin .role-badge {
  background: var(--bep-bordeaux) !important;
  color: var(--bep-paper) !important;
  border: 1px solid var(--bep-jet) !important;
  border-radius: 2px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
}

body.bep-skin .sidebar {
  background: var(--bep-jet) !important;
  border-right: 1px solid var(--bep-jet) !important;
}
body.bep-skin .sidebar-group-label { color: var(--bep-concrete) !important; font-family: var(--bep-font-mono); }
body.bep-skin .sidebar-item { color: var(--bep-cement) !important; border-left-color: transparent !important; }
body.bep-skin .sidebar-item:hover { background: var(--bep-asphalt) !important; color: var(--bep-paper) !important; }
body.bep-skin .sidebar-item.active {
  background: var(--bep-asphalt) !important;
  color: var(--bep-paper) !important;
  border-left-color: var(--bep-bordeaux) !important;
}
body.bep-skin .sidebar-item .badge,
body.bep-skin .sidebar-item .count {
  background: var(--bep-bordeaux) !important;
  color: var(--bep-paper) !important;
  border-radius: 2px !important;
  font-family: var(--bep-font-mono);
}

body.bep-skin .main { background: var(--bep-bone) !important; }

body.bep-skin .kpi-card,
body.bep-skin .panel,
body.bep-skin .hero-clock,
body.bep-skin .input-tile,
body.bep-skin .card {
  background: var(--bep-paper) !important;
  border: 1px solid var(--bep-chalk) !important;
  border-radius: 0 !important;
  color: var(--bep-jet) !important;
  box-shadow: none !important;
}
body.bep-skin .kpi-card::before { background: var(--bep-bordeaux) !important; }
body.bep-skin .kpi-label,
body.bep-skin .panel-title { color: var(--bep-graphite) !important; letter-spacing: 0.12em; }
body.bep-skin .kpi-value { color: var(--bep-jet) !important; font-family: var(--bep-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
body.bep-skin .kpi-sub  { color: var(--bep-graphite) !important; }
body.bep-skin .kpi-trend.up { color: var(--bep-ok-fg) !important; }
body.bep-skin .kpi-trend.down { color: var(--bep-err-fg) !important; }

body.bep-skin .clock-time { color: var(--bep-bordeaux) !important; font-family: var(--bep-font-mono); }
body.bep-skin .clock-date { color: var(--bep-graphite) !important; }
body.bep-skin .site-chip,
body.bep-skin .streak {
  background: var(--bep-bordeaux) !important;
  color: var(--bep-paper) !important;
  border: 1px solid var(--bep-jet) !important;
  border-radius: 2px !important;
}

body.bep-skin .section-icon {
  background: var(--bep-bordeaux-tint) !important;
  border: 1px solid var(--bep-bordeaux) !important;
  border-radius: 0 !important;
  color: var(--bep-bordeaux) !important;
}
body.bep-skin .section-header h2 { color: var(--bep-jet) !important; }
body.bep-skin .section-header p { color: var(--bep-graphite) !important; }

body.bep-skin .flash-alert {
  background: var(--bep-ok-bg) !important;
  border: 1px solid var(--bep-bottle) !important;
  border-radius: 0 !important;
  color: var(--bep-ok-fg) !important;
}
body.bep-skin .flash-dot { background: var(--bep-bottle) !important; }

body.bep-skin button,
body.bep-skin .btn {
  font-family: var(--bep-font-sans);
  border-radius: 0;
}

/* tables in static views */
body.bep-skin table th {
  background: var(--bep-bone) !important;
  color: var(--bep-graphite) !important;
  border-bottom: 2px solid var(--bep-jet) !important;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
body.bep-skin table td { border-bottom: 1px solid var(--bep-chalk) !important; color: var(--bep-steel) !important; }
body.bep-skin tr:hover td { background: var(--bep-paper) !important; }

/* mono / numeric hints */
body.bep-skin .mono,
body.bep-skin [class*="-num"],
body.bep-skin [class*="value"] { font-family: var(--bep-font-mono); }