/* ============================================================================
   DAMSOLID ADMIN THEME — override layer (brand/section-3, applied 2026-07-07)
   Loaded by _nav.php on every admin page (and manually by login pages).

   Strategy: the codebase speaks a consistent Tailwind vocabulary (black/zinc/
   yellow) + a small CSS-variable vocabulary. This sheet remaps BOTH to the
   Damsolid palette with !important, so 80+ pages re-theme without markup edits.
   Client-facing document views (quote/invoice/contract/addendum) do NOT load
   this sheet — they are branded directly.

   Paper pages, espresso text, Signal orange rationed. Dark surfaces (nav)
   stay dark — but espresso, not black.
   ============================================================================ */

/* Self-hosted brand fonts (Damsolid brand kit 03-fonts). No CDN dependency:
   the exact locked files, load even offline, no third-party request. */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;
  font-display:swap;src:url('fonts/BricolageGrotesque-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;
  font-display:swap;src:url('fonts/BricolageGrotesque-Bold.woff2') format('woff2');}
@font-face{font-family:'Work Sans';font-weight:400;font-style:normal;
  font-display:swap;src:url('fonts/WorkSans-Regular.woff2') format('woff2');}
@font-face{font-family:'Work Sans';font-weight:500;font-style:normal;
  font-display:swap;src:url('fonts/WorkSans-Medium.woff2') format('woff2');}
@font-face{font-family:'Work Sans';font-weight:600;font-style:normal;
  font-display:swap;src:url('fonts/WorkSans-SemiBold.woff2') format('woff2');}

:root {
  --dw-espresso:     #33241A;
  --dw-espresso-hi:  #4A3628;                                    /* raised dark surface */
  --dw-timber:       #6F4A2F;
  --dw-signal:       #EF6A0D;
  --dw-signal-deep:  #B54708;
  --dw-clay:         #7A695A;
  --dw-sand:         #E8DFD3;
  --dw-paper:        #FAF6F0;
  --dw-white:        #FFFFFF;
  --dw-info:         #3E6B8C;
  --dw-success:      #2F7A4F;
  --dw-error:        #BE3D2A;
  --dw-field:        #FFFFFF;
  --dw-hover:        color-mix(in srgb, #E8DFD3 40%, #FFFFFF);
  --dw-tint-signal:  color-mix(in srgb, #EF6A0D 12%, #FFFFFF);
  --dw-tint-success: color-mix(in srgb, #2F7A4F 12%, #FFFFFF);
  --dw-tint-error:   color-mix(in srgb, #BE3D2A 12%, #FFFFFF);
  --dw-tint-info:    color-mix(in srgb, #3E6B8C 12%, #FFFFFF);

  /* Custom-property vocabulary used by var-styled pages (dashboards etc.) */
  --bg: var(--dw-paper) !important;
  --surface: var(--dw-white) !important;
  --surface2: var(--dw-hover) !important;
  --border: var(--dw-sand) !important;
  --border2: var(--dw-sand) !important;
  --text: var(--dw-espresso) !important;
  --text2: var(--dw-clay) !important;
  --text3: var(--dw-clay) !important;
  --text4: color-mix(in srgb, var(--dw-clay) 65%, var(--dw-paper)) !important;
  --accent: var(--dw-signal-deep) !important;   /* text-safe orange on light */
  --yellow: var(--dw-signal-deep) !important;
  --red: var(--dw-error) !important;
  --green: var(--dw-success) !important;
  --blue: var(--dw-info) !important;
  --font: 'Work Sans','Segoe UI',Arial,sans-serif !important;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--dw-paper) !important;   /* beats the #000 FOUC guards (later in cascade) */
  color: var(--dw-espresso) !important;
  font-family: 'Work Sans','Segoe UI',Arial,sans-serif !important;
  font-variant-numeric: tabular-nums;
}
/* Retire the Mediaholix mono face app-wide: some pages set `* { font-family:
   'IBM Plex Mono' }`, which escapes the html/body rule above. `body *` +
   !important beats every non-important font-family, so nothing renders in the
   old face. (Documents/emails don't load this sheet, so they're unaffected.) */
body * { font-family: 'Work Sans','Segoe UI',Arial,sans-serif !important; }

/* Display face: headlines & hero numbers only (≥24px = text-2xl+, per brand) */
.text-2xl, .text-3xl, .text-4xl {
  font-family: 'Bricolage Grotesque','Work Sans',sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* ── Surfaces (Tailwind vocabulary → paper/white/sand) ─────────────────────── */
.bg-black, .bg-zinc-950, .bg-neutral-950 { background-color: var(--dw-paper) !important; }
.bg-zinc-900, .bg-neutral-900            { background-color: var(--dw-white) !important; }
.bg-zinc-900\/60, .bg-zinc-900\/50, .bg-zinc-900\/40, .bg-zinc-900\/30,
.bg-zinc-950\/95, .bg-zinc-800\/50, .bg-zinc-800\/30
                                         { background-color: var(--dw-hover) !important; }
.bg-zinc-800                             { background-color: var(--dw-field) !important; }
.bg-zinc-700, .bg-zinc-700\/60           { background-color: var(--dw-sand) !important; }
.hover\:bg-zinc-700:hover, .hover\:bg-zinc-800:hover,
.hover\:bg-zinc-800\/50:hover, .hover\:bg-zinc-900:hover,
.hover\:bg-zinc-900\/50:hover            { background-color: var(--dw-hover) !important; }

/* ── Borders & dividers ────────────────────────────────────────────────────── */
.border-zinc-950, .border-zinc-900, .border-zinc-800, .border-zinc-700, .border-zinc-600,
.divide-zinc-800 > :not([hidden]) ~ :not([hidden]), .divide-zinc-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dw-sand) !important;
}
.hover\:border-zinc-600:hover, .hover\:border-zinc-500:hover { border-color: var(--dw-clay) !important; }

/* ── Text (dark-theme grays → espresso/clay) ───────────────────────────────── */
.text-white, .text-zinc-100, .text-zinc-200, .text-zinc-300, .text-slate-800 { color: var(--dw-espresso) !important; }
.text-zinc-400, .text-zinc-500, .text-slate-500, .text-slate-700 { color: var(--dw-clay) !important; }
.text-zinc-600, .text-zinc-700 { color: color-mix(in srgb, var(--dw-clay) 75%, var(--dw-paper)) !important; }
.hover\:text-white:hover, .hover\:text-zinc-100:hover, .hover\:text-zinc-200:hover { color: var(--dw-espresso) !important; }
.placeholder-zinc-600::placeholder, .bg-zinc-800::placeholder, input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--dw-clay) 70%, var(--dw-white)) !important;
}
.text-black { color: var(--dw-espresso) !important; }

/* ── Gray-family parity: slate / gray / stone remap exactly like zinc/neutral ──
   Catches any page that reached for a different gray scale, so nothing renders
   dark-on-paper or low-contrast anywhere in the admin. ── */
.bg-slate-950, .bg-gray-950, .bg-stone-950 { background-color: var(--dw-paper) !important; }
.bg-slate-900, .bg-gray-900, .bg-stone-900 { background-color: var(--dw-white) !important; }
.bg-slate-800, .bg-gray-800, .bg-stone-800 { background-color: var(--dw-field) !important; }
.bg-slate-700, .bg-gray-700, .bg-stone-700 { background-color: var(--dw-sand) !important; }
.border-slate-950, .border-slate-900, .border-slate-800, .border-slate-700, .border-slate-600,
.border-gray-950, .border-gray-900, .border-gray-800, .border-gray-700, .border-gray-600,
.border-stone-950, .border-stone-900, .border-stone-800, .border-stone-700, .border-stone-600 {
  border-color: var(--dw-sand) !important;
}
.text-slate-100, .text-slate-200, .text-slate-300,
.text-gray-100, .text-gray-200, .text-gray-300,
.text-stone-100, .text-stone-200, .text-stone-300 { color: var(--dw-espresso) !important; }
.text-slate-400, .text-slate-600,
.text-gray-400, .text-gray-500, .text-gray-600,
.text-stone-400, .text-stone-500, .text-stone-600 { color: var(--dw-clay) !important; }

/* ── Accent: yellow → Signal (rationed; deep variant for text/AA) ──────────── */
.text-yellow-400, .text-yellow-300, .text-amber-400, .text-amber-300, .text-yellow-500
  { color: var(--dw-signal-deep) !important; }
.hover\:text-yellow-400:hover, .hover\:text-yellow-300:hover { color: var(--dw-signal) !important; }
.bg-yellow-400, .bg-yellow-500 { background-color: var(--dw-signal) !important; color: var(--dw-espresso) !important; }
.hover\:bg-yellow-300:hover, .hover\:bg-yellow-400:hover { background-color: var(--dw-signal-deep) !important; color: #FFFFFF !important; }
.bg-yellow-900\/50, .bg-yellow-900\/60, .bg-yellow-900\/30, .bg-amber-900\/30, .bg-amber-900\/60,
.bg-yellow-400\/10 { background-color: var(--dw-tint-signal) !important; }
.border-yellow-400, .border-yellow-800, .border-amber-800, .focus\:border-yellow-400:focus
  { border-color: var(--dw-signal) !important; }
.focus\:ring-yellow-400:focus, .focus\:ring:focus { --tw-ring-color: color-mix(in srgb, var(--dw-signal) 35%, transparent) !important; }
.focus\:border-indigo-500:focus { border-color: var(--dw-timber) !important; }
.focus\:ring-indigo-200:focus { --tw-ring-color: color-mix(in srgb, var(--dw-timber) 25%, transparent) !important; }

/* ── Functional colors (badges/status → brand trio, light tints) ───────────── */
.text-green-400, .text-green-300, .text-emerald-400, .text-emerald-300 { color: var(--dw-success) !important; }
.bg-green-900\/60, .bg-green-900\/50, .bg-green-900\/30, .bg-green-900\/20,
.bg-emerald-900\/60, .bg-emerald-900\/50, .bg-emerald-900\/30, .bg-emerald-900\/20, .bg-green-900
  { background-color: var(--dw-tint-success) !important; }
.border-green-800, .border-emerald-800, .border-green-700 { border-color: color-mix(in srgb, var(--dw-success) 40%, var(--dw-white)) !important; }

.text-red-400, .text-red-300, .text-rose-400, .text-rose-500, .text-rose-800 { color: var(--dw-error) !important; }
.bg-red-900\/50, .bg-red-900\/60, .bg-red-900\/30, .bg-rose-900\/30, .bg-rose-50, .bg-red-900
  { background-color: var(--dw-tint-error) !important; }
.border-red-800, .border-rose-800, .border-rose-200 { border-color: color-mix(in srgb, var(--dw-error) 40%, var(--dw-white)) !important; }

.text-blue-400, .text-blue-300, .text-indigo-400 { color: var(--dw-info) !important; }
.bg-blue-900\/60, .bg-blue-900\/50, .bg-blue-900\/30, .bg-blue-900 { background-color: var(--dw-tint-info) !important; }
.border-blue-800 { border-color: color-mix(in srgb, var(--dw-info) 40%, var(--dw-white)) !important; }

/* ── Tables: sand header band, white body, sand lines ───────────────────────────
   Brand: tables are white with sand lines; the header row carries the sand fill
   so tables read as sand-on-white, never dark (brand owner 2026-07-08). The
   thead selectors carry a class to out-rank the generic .bg-zinc-* → white remap
   above (a bare `thead` would lose to a `.bg-zinc-900` header class). Cells stay
   transparent over the white table base so row hover + status tints still show. */
table { background-color: var(--dw-white) !important; }
thead, thead tr, thead th, thead td,
thead.bg-zinc-900, thead.bg-zinc-950, thead.bg-zinc-800,
thead .bg-zinc-900, thead .bg-zinc-950, thead .bg-zinc-800 {
  background-color: var(--dw-sand) !important;
}
thead th, thead td { color: var(--dw-espresso) !important; }

/* ── Custom component classes with hardcoded dark hex ───────────────────────────
   Some pages hand-rolled component CSS in literal #18181b/#27272a/#0a0a0a (dash-
   boards, cards) — a vocabulary the Tailwind-class/CSS-var remap can't reach, so
   these stayed dark. Force them to the paper palette so cards, KPI tiles and the
   tables inside them render light. */
.kpi-card, .section-card, .card {
  background-color: var(--dw-white) !important;
  border-color: var(--dw-sand) !important;
}
.progress-bar { background-color: var(--dw-sand) !important; }
.row-link:hover { background-color: var(--dw-hover) !important; }

/* ── Brand island: nav = dark brown (BRAND_ESPRESSO), white text & icons ───────
   The <nav> element itself carries class="bg-black", and the global `.bg-black`
   rule above (specificity 0,1,0, !important) would out-rank a bare `nav` selector
   (0,0,1) — so the bar rendered paper/near-white. `nav.bg-black` (0,1,1) wins. */
nav, nav.bg-black, nav.bg-zinc-900, nav.bg-zinc-950, .p-nav, header.site-head {
  background-color: var(--dw-espresso) !important;   /* menu = dark brown per brand owner 2026-07-08 */
  border-color: color-mix(in srgb, #000000 35%, var(--dw-espresso)) !important;
}
nav .bg-black, nav .bg-zinc-900, nav .bg-zinc-950 { background-color: var(--dw-espresso) !important; }
/* raised surfaces inside the dark bar (active item, quick-clock fields) → lighter espresso */
nav .bg-zinc-800 { background-color: var(--dw-espresso-hi) !important; }
/* hover any menu item → orange CTA fill with white text + icons (brand owner 2026-07-08) */
nav .hover\:bg-zinc-800:hover { background-color: var(--dw-signal) !important; color: #FFFFFF !important; }
nav .hover\:bg-zinc-800:hover .text-zinc-300, nav .hover\:bg-zinc-800:hover .text-yellow-400,
nav .hover\:bg-zinc-800:hover svg { color: #FFFFFF !important; }
nav .text-white, nav .text-zinc-100, nav .text-zinc-200, nav .text-zinc-300 { color: #FFFFFF !important; }
nav .text-zinc-400, nav .text-zinc-500 { color: color-mix(in srgb, #FFFFFF 80%, var(--dw-espresso)) !important; }
nav .hover\:text-white:hover { color: #FFFFFF !important; }
nav svg { color: #FFFFFF !important; }   /* icons use fill=currentColor → white */
nav .text-yellow-400, nav .hover\:text-yellow-400:hover { color: var(--dw-signal) !important; }
nav .border-zinc-800, nav .border-zinc-700 { border-color: color-mix(in srgb, #000000 30%, var(--dw-espresso)) !important; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
input, select, textarea {
  color: var(--dw-espresso) !important;
  border-color: var(--dw-sand) !important;
  background-color: var(--dw-field) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--dw-signal) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dw-signal) !important; }

/* ── Odds & ends ───────────────────────────────────────────────────────────── */
.shadow-2xl, .shadow-xl, .shadow-lg { box-shadow: 0 8px 28px rgba(51,36,26,.10) !important; }
::selection { background: color-mix(in srgb, var(--dw-signal) 25%, transparent); }
a { text-decoration-color: color-mix(in srgb, var(--dw-clay) 40%, transparent); }