/* ==========================================================================
   MrExcavator premium layer — drafting-paper surfaces, plan-ink type,
   survey-orange accent, and the signature: measured numbers set in mono
   like an instrument readout. Loads AFTER Bootstrap + base inline styles
   and works through the existing CSS variables, so dark mode follows.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Archivo";
  src: url("../vendor/fonts/Archivo_wght_600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../vendor/fonts/Archivo_wght_700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../vendor/fonts/IBM_Plex_Mono_wght_400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../vendor/fonts/IBM_Plex_Mono_wght_600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #16212e;
  --paper: #f6f7f6;
  --line: #e3e7e9;
  --survey: #c8531b;          /* the brand's flagging orange, used sparingly */
  --survey-soft: rgba(200, 83, 27, 0.10);
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --readout: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-1: 0 1px 2px rgba(22, 33, 46, 0.05), 0 0 0 1px rgba(22, 33, 46, 0.03);
  --shadow-2: 0 6px 16px -8px rgba(22, 33, 46, 0.18);
  /* retune the existing theme variables */
  --bg-page: var(--paper);
  --text-primary: var(--ink);
  --border-color: var(--line);
}
[data-theme="dark"] {
  --paper: #0c1320;
  --line: rgba(255, 255, 255, 0.08);
  --survey-soft: rgba(220, 116, 62, 0.16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 18px -10px rgba(0, 0, 0, 0.55);
  /* premium.css loads last, so the dark text/border vars must be restated
     here or the :root values above would win the source-order tie. */
  --text-primary: #e6edf7;
  --text-muted: #94a3b8;
  --border-color: var(--line);
  --bg-page: var(--paper);
}

/* Drafting-paper grid — barely-there, app pages only (never the editor).
   z-index:-1 keeps it under the content WITHOUT giving .main-content its own
   stacking context: z-index:1 there trapped every in-page Bootstrap modal
   BELOW the body-level .modal-backdrop (1050) — Upload/Clone/Archive dialogs
   were click-dead (dogfood 3). */
body:has(.main-content)::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(22, 33, 46, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 33, 46, 0.028) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-theme="dark"] body:has(.main-content)::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
}
.main-content { position: relative; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6,
.topbar h5, .card-header, .modal-title, .brand-logo {
  font-family: var(--display);
  letter-spacing: -0.01em;
}
h1, h2 { font-weight: 700; }
h3, h4, h5, h6, .card-header { font-weight: 600; }
.text-muted, small { letter-spacing: 0; }

/* The signature: every measured figure reads like an instrument.
   Hooks onto the numeric surfaces that already exist in the markup. */
.stat-card h2, .stat-card h3, .stat-card .h3, .stat-card .h2,
.kpi-value, .egr-total, .scale-readout, #jobTotalsCount,
.job-totals, .qnum, td.qty, .takeoff-qty, code {
  font-family: var(--readout);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- surfaces */
.card {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}
.card:hover { box-shadow: var(--shadow-1); } /* cards stay calm; rows react */
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.92rem;
  display: flex; align-items: center; gap: 0.5rem;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
/* survey notch — the tick of orange before every card title */
.card-header::before {
  content: "";
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--survey);
  flex: 0 0 3px;
}
.card-header .badge { margin-left: auto; }
.card-header i.bi { color: var(--text-muted); font-size: 0.9em; }

/* stat tiles: quiet frame, loud number */
.stat-card { border-left-width: 3px; }
.stat-card h2, .stat-card h3 { font-size: 1.9rem; line-height: 1.1; }
.stat-card .text-muted { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* ------------------------------------------------------------------ tables */
.table thead th {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--text-muted);
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent;
}
.table > :not(caption) > * > * { border-bottom-color: var(--border-color); }
.table-hover > tbody > tr:hover > * { background: rgba(22, 33, 46, 0.035); }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.04); }
.table td { vertical-align: middle; }

/* ------------------------------------------------------------------- chips */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.34em 0.7em;
}
.badge.bg-secondary { background: var(--bg-soft) !important; color: var(--text-muted) !important; border: 1px solid var(--border-color); }

/* ----------------------------------------------------------------- buttons */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25); }
.btn-sm { border-radius: 7px; }
.btn:focus-visible, a:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--survey); outline-offset: 2px; box-shadow: none;
}

/* ----------------------------------------------------------------- sidebar */
.sidebar {
  background: linear-gradient(180deg, #17202c 0%, #111a25 100%) !important;
}
.sidebar .brand-logo { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.sidebar .sidebar-section-title, .sidebar [class*="section-title"] {
  font-size: 0.62rem; letter-spacing: 0.14em; font-weight: 700; opacity: 0.55;
}
.sidebar .nav-link { border-radius: 8px; margin: 1px 8px; transition: background 0.12s ease; }
.sidebar .nav-link.active, .sidebar .nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 3px 0 0 var(--survey);
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.05); }

/* ------------------------------------------------------------------ topbar */
.topbar {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .topbar {
  background: rgba(15, 22, 36, 0.82) !important;
  border-bottom-color: var(--border-color);
}

/* ----------------------------------------------------- misc quality floor */
.alert { border-radius: 10px; }
.form-control, .form-select { border-radius: 8px; }
.dropdown-menu { border-radius: 10px; border-color: var(--border-color); box-shadow: var(--shadow-2); }
.modal-content { border-radius: 14px; border: 1px solid var(--border-color); box-shadow: var(--shadow-2); }
.progress { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}