/* Lighthouse admin — dwello "Brutalist Mono" design system.
   Loaded AFTER Tailwind so these overrides win. Cream paper, copper accent,
   ink linework, JetBrains Mono, sharp square edges, flat (no shadows). */

:root {
  /* raw brutalist palette */
  --cream:      #F4F2EE;
  --cream2:     #ECEAE4;
  --cream3:     #E2DFD8;
  --ink:        #111111;
  --ink2:       #666666;
  --ink3:       #A8A29A;
  --copper:     #FF3B1F;
  --copperDark: #D9210A;
  --copperSoft: #FFE4DE;
  --line:       rgba(17,17,17,0.10);
  --line2:      rgba(17,17,17,0.18);
  --mono:       'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  /* semantic tokens (existing component rules read these) mapped onto brutalist */
  --color-bg:           var(--cream2);
  --color-bg-muted:     var(--cream3);
  --color-surface:      var(--cream);
  --color-border:       var(--ink);
  --color-border-hover: var(--ink);
  --color-text:         var(--ink);
  --color-text-muted:   var(--ink2);
  --color-text-faint:   var(--ink3);
  --color-accent:       var(--copper);
  --color-accent-hover: var(--copperDark);
  --color-accent-soft:  var(--copperSoft);
  --color-success:      var(--ink);
  --color-success-soft: var(--cream3);
  --color-warning:      var(--copper);
  --color-warning-soft: var(--copperSoft);
  --color-danger:       var(--copperDark);
  --color-danger-soft:  var(--copperSoft);
  --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --radius: 0px; --radius-lg: 0px;
}

/* ---- Global base: brutalist paper + mono everywhere ---- */
html, body {
  background: var(--cream2);
  color: var(--ink);
  font-family: var(--mono);
  font-feature-settings: normal;
}
* { font-family: var(--mono) !important; box-sizing: border-box; }

[x-cloak] { display: none !important; }
.section-anchor { scroll-margin-top: 80px; }

/* ---- Sharp square edges (brutalist signature) — keep true circles round ---- */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl,
.rounded-t-lg, .rounded-b-lg, .rounded-t-xl { border-radius: 0 !important; }
.rounded-full { border-radius: 9999px !important; }

/* ---- Flatten shadows ---- */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }

/* ---- Tailwind background overrides -> cream / copper ---- */
.bg-white, .bg-gray-50, .bg-gray-50\/50 { background-color: var(--cream) !important; }
.bg-gray-100, .bg-gray-200, .bg-gray-300 { background-color: var(--cream2) !important; }
.bg-indigo-600, .bg-indigo-700, .bg-indigo-500 { background-color: var(--copper) !important; color: var(--cream) !important; }
.bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-100, .bg-indigo-200 { background-color: var(--copperSoft) !important; }
.bg-emerald-50, .bg-emerald-200, .bg-amber-50, .bg-amber-100, .bg-red-50, .bg-red-100, .bg-red-200 { background-color: var(--copperSoft) !important; }
.bg-emerald-600, .bg-emerald-700, .bg-red-600, .bg-red-700 { background-color: var(--copperDark) !important; color: var(--cream) !important; }
.bg-gray-900\/40 { background-color: rgba(17,17,17,0.55) !important; }

/* ---- Tailwind text overrides ---- */
.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600 { color: var(--ink) !important; }
.text-gray-500, .text-gray-400 { color: var(--ink2) !important; }
.text-gray-300, .text-gray-200 { color: var(--ink3) !important; }
.text-white { color: var(--cream) !important; }
.text-indigo-600, .text-indigo-500, .text-indigo-700, .text-indigo-800, .text-indigo-900 { color: var(--copper) !important; }
.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900,
.text-green-400, .text-green-500, .text-green-600 { color: var(--ink) !important; }
.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900 { color: var(--copper) !important; }
.text-red-400, .text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: var(--copperDark) !important; }

/* ---- Tailwind border overrides -> ink linework ---- */
.border, .border-2, .border-t, .border-b, .border-l, .border-r,
.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-500, .border-gray-600,
.border-emerald-200 { border-color: var(--ink) !important; }
.border-indigo-100, .border-indigo-200, .border-indigo-400, .border-indigo-500,
.border-amber-100, .border-amber-200, .border-amber-300, .border-amber-400, .border-amber-500 { border-color: var(--copper) !important; }
.border-red-100, .border-red-200, .border-red-500 { border-color: var(--copperDark) !important; }
.border-dashed { border-style: dashed !important; }

/* ---- Hover overrides ---- */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--cream2) !important; }
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-600:hover { background-color: var(--copperDark) !important; }
.hover\:bg-red-50:hover { background-color: var(--copperSoft) !important; }
.hover\:border-indigo-300:hover, .hover\:border-indigo-400:hover { border-color: var(--copper) !important; }
.hover\:border-red-200:hover { border-color: var(--copperDark) !important; }
.hover\:text-gray-600:hover, .hover\:text-gray-900:hover, .hover\:text-gray-700:hover { color: var(--ink) !important; }
.hover\:text-indigo-600:hover { color: var(--copper) !important; }
.hover\:text-red-600:hover { color: var(--copperDark) !important; }

/* ---- Focus ring ---- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ---- Spinner ---- */
.spinner {
  border: 2px solid var(--line2);
  border-top-color: var(--copper);
  border-radius: 50%;
  width: 16px; height: 16px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Form controls — cream field, ink border, square ---- */
.lh-input, .lh-select, .lh-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 0.875rem;
  font-family: var(--mono);
  color: var(--ink);
  letter-spacing: 0.2px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.lh-input:hover, .lh-select:hover, .lh-textarea:hover { border-color: var(--copper); }
.lh-input:focus, .lh-select:focus, .lh-textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: none;
}
.lh-input:disabled, .lh-select:disabled, .lh-textarea:disabled {
  background: var(--cream2); color: var(--ink2); cursor: not-allowed;
}
.lh-input::placeholder, .lh-textarea::placeholder {
  color: var(--ink3); text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em;
}

/* ---- Status pill — square cream chip, ink/copper text ---- */
.lh-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  border-radius: 0;
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--ink);
}
.lh-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lh-pill-success { color: var(--ink);        background: var(--cream); }
.lh-pill-warning { color: var(--copper);     background: var(--copperSoft); border-color: var(--copper); }
.lh-pill-danger  { color: var(--copperDark); background: var(--copperSoft); border-color: var(--copperDark); }
.lh-pill-neutral { color: var(--ink2);       background: var(--cream); }
.lh-pill-accent  { color: var(--copper);     background: var(--copperSoft); border-color: var(--copper); }

/* ---- Card — cream paper, sharp ink border, flat ---- */
.lh-card {
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.lh-card--rail { border-left: 3px solid var(--copper); }
.lh-card-hover { cursor: pointer; }
.lh-card-hover:hover { border-color: var(--copper); background: var(--cream); }

/* ---- Table ---- */
.lh-table { width: 100%; border-collapse: collapse; }
.lh-table thead th {
  text-align: left; font-size: 0.6875rem; font-weight: 700;
  color: var(--ink2); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--ink); background: var(--cream2);
}
.lh-table tbody td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line2); font-size: 0.875rem; vertical-align: middle; color: var(--ink); }
.lh-table tbody tr:hover { background: var(--cream2); cursor: pointer; }
.lh-table tbody tr:last-child td { border-bottom: none; }
.lh-table th.sortable { cursor: pointer; user-select: none; }
.lh-table th.sortable:hover { color: var(--ink); }
.lh-table th .sort-indicator { margin-left: 0.25rem; opacity: 0.5; }
.lh-table th.sort-active .sort-indicator { opacity: 1; color: var(--copper); }

/* ---- Eyebrow label (uppercase, letter-spaced mono) ---- */
.lh-eyebrow {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink3); line-height: 1.2;
}
.lh-eyebrow-accent { color: var(--copper); }
.lh-section-head { margin-bottom: 1.25rem; }
.lh-section-head .lh-eyebrow { margin-bottom: 0.4rem; display: block; }

/* ============================================================================
   Left sidebar shell
   ========================================================================== */
.lh-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 15rem;
  background: var(--cream);
  border-right: 1px solid var(--ink);
  display: flex; flex-direction: column;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.lh-sidebar.lh-sidebar--open { transform: translateX(0); }
.lh-sidebar-logo { padding: 1.25rem 1.25rem 0.85rem; border-bottom: 1px solid var(--line2); }
.lh-nav { flex: 1; overflow-y: auto; padding: 0.85rem 0.75rem; display: flex; flex-direction: column; gap: 2px; }
.lh-nav-item {
  position: relative; display: flex; align-items: center; gap: 0.625rem;
  padding: 0.55rem 0.75rem; border-radius: 0;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink2); transition: background 0.12s, color 0.12s;
}
.lh-nav-item:hover { background: var(--cream2); color: var(--ink); }
.lh-nav-item.active { background: var(--copperSoft); color: var(--copper); }
.lh-nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--copper);
}
.lh-nav-item svg { flex-shrink: 0; }
.lh-sidebar-foot {
  border-top: 1px solid var(--ink);
  padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.lh-nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0; color: var(--ink2);
  transition: background 0.12s, color 0.12s;
}
.lh-nav-icon-btn:hover { background: var(--cream2); color: var(--ink); }

/* Mobile top bar */
.lh-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: 3.5rem; padding: 0 1rem;
  background: var(--cream); border-bottom: 1px solid var(--ink);
}

/* Content area */
.lh-main { padding: 1.5rem 1rem 3rem; max-width: 1400px; margin: 0 auto; }
@media (min-width: 1024px) {
  .lh-sidebar { transform: translateX(0); }
  .lh-topbar { display: none; }
  .lh-content { margin-left: 15rem; }
  .lh-main { padding: 2rem 2.25rem 3.5rem; }
}

/* ---- Stat-card icon chip — square ink-bordered ---- */
.lh-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0; border: 1px solid var(--ink);
}
.lh-stat-icon--neutral { background: var(--cream2);     color: var(--ink2); }
.lh-stat-icon--accent  { background: var(--copperSoft); color: var(--copper); border-color: var(--copper); }
.lh-stat-icon--success { background: var(--cream2);     color: var(--ink); }
.lh-stat-icon--warning { background: var(--copperSoft); color: var(--copper); border-color: var(--copper); }
.lh-stat-icon--danger  { background: var(--copperSoft); color: var(--copperDark); border-color: var(--copperDark); }
.lh-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }