/* Assured Handyman — theme layer
   ===================================================================
   Default palette matches Suncoast Assured Inspector's actual, real
   design tokens (pulled directly from its styles.css :root block —
   not approximated). Loaded AFTER the compiled Tailwind styles.css so
   these overrides win.

   Rev 2: fixes a real cascade bug from the first version of this file —
   .app-header and the generic .bg-slate-800 override were both single-
   class selectors with !important, so whichever was declared LATER in
   the file won regardless of which was semantically more specific;
   .bg-slate-800 came after .app-header, silently overriding the header
   back to a white background while the text (correctly, via a higher-
   specificity selector) still switched to header-text color — pale
   text on white, illegible. Fixed here by giving header/nav rules
   compound selectors (higher real specificity, e.g. `header.app-header`)
   so they win regardless of source order, not just by reordering rules
   and hoping order never changes again.

   Architecture note: Tailwind utility classes are compiled to fixed
   hex values at build time, which is fine for a fixed design but can't
   support runtime user customization on its own. Rather than rewrite
   every class in every file, this file redefines the specific,
   recurring Tailwind classes already used throughout the app to
   reference CSS custom properties instead of their original hardcoded
   colors. Changing a --color-* variable (via inline style on :root,
   which JS sets from a saved preference) instantly re-themes everything
   using that class, with no rebuild step.

   Status/semantic colors (emerald=success, amber=warning, red=danger,
   plus the service-category icon colors) are deliberately NOT wired to
   user customization — green-means-good and red-means-bad are universal
   conventions worth keeping fixed regardless of brand color, and mixing
   semantic and brand color into one "customize everything" system would
   make status indicators unreliable. Only shade adjustments were made
   here, to keep them legible against the new light background instead
   of the dark one they were originally tuned for. */

:root {
  --color-bg: #F2EDE1;           /* sand — page background */
  --color-surface: #FFFFFF;      /* white — card background */
  --color-surface-alt: #E7DFCC;  /* sand-dim — secondary surface / inset */
  --color-header: #1B3A4B;       /* navy — header & bottom nav chrome */
  --color-header-deep: #122834;  /* navy-deep — pressed/darker chrome */
  --color-border: rgba(27,58,75,0.14); /* line — subtle borders */
  --color-border-strong: rgba(27,58,75,0.28);
  --color-primary: #4FA8A0;      /* seafoam — primary buttons & active states */
  --color-primary-hover: #3A857E;/* seafoam-dark */
  --color-text: #24303A;         /* ink — primary text */
  --color-text-muted: #5A6B75;   /* ink-soft — secondary/muted text */
  --color-text-on-header: #F2EDE1;   /* sand — text on navy chrome */
  --color-text-on-primary: #122834;  /* navy-deep — text on seafoam buttons */
}

body { background-color: var(--color-bg) !important; color: var(--color-text) !important; }

/* ---------------- Generic card / page surfaces (lower specificity —
   declared first, so the compound header/nav selectors below reliably
   win on any element that carries both sets of classes) ---------------- */
.bg-slate-900:not(.app-header):not(.app-nav) { background-color: var(--color-bg) !important; }
.bg-slate-800, .bg-slate-800\/60, .bg-slate-800\/80 { background-color: var(--color-surface) !important; }
.bg-slate-900\/40, .bg-slate-900\/60, .bg-slate-900\/70 { background-color: var(--color-surface-alt) !important; }
.bg-slate-700 { background-color: var(--color-surface-alt) !important; }
.hover\:bg-slate-600:hover, .hover\:bg-slate-700:hover, .hover\:bg-slate-750:hover { background-color: var(--color-border-strong) !important; }

.border-slate-700, .border-slate-700\/60, .border-slate-600 {
  border-color: var(--color-border) !important;
}

/* Primary brand color — buttons, active nav/tab states, focus rings */
.bg-blue-600 { background-color: var(--color-primary) !important; color: var(--color-text-on-primary) !important; }
.hover\:bg-blue-500:hover { background-color: var(--color-primary-hover) !important; }
.text-blue-400, .text-blue-300 { color: var(--color-primary-hover) !important; }
.border-blue-500, .border-blue-500\/30, .border-blue-500\/40 { border-color: var(--color-primary) !important; }
.bg-blue-500\/15 { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important; }
.focus\:border-blue-500:focus { border-color: var(--color-primary) !important; }
.accent-blue-500 { accent-color: var(--color-primary) !important; }

/* Text hierarchy */
.text-white { color: var(--color-text) !important; }
.text-slate-100, .text-slate-200, .text-slate-300 { color: var(--color-text) !important; }
.text-slate-400, .text-slate-500, .text-slate-600 { color: var(--color-text-muted) !important; }

/* Light pastel text (text-*-200) was tuned for pale-on-dark banners —
   illegible against the new light background. Darkened to a shade that
   keeps the same hue/meaning but actually reads on sand/white. */
.text-blue-200 { color: var(--color-primary-hover) !important; }
.text-amber-200, .text-amber-200\/80 { color: #92400E !important; }
.text-emerald-200 { color: #065F46 !important; }
.text-red-200 { color: #991B1B !important; }

/* Status colors — shade-adjusted for legibility on a light background,
   semantics (which color = which meaning) deliberately unchanged. */
.text-emerald-400 { color: #1F8A5F !important; }
.text-amber-400 { color: #B7791F !important; }
.text-red-400 { color: #C0392B !important; }
.text-purple-300 { color: #7C5CBF !important; }
.text-cyan-400 { color: #1E88A8 !important; }
.text-orange-400 { color: #C2621F !important; }
.text-yellow-400 { color: #B7871F !important; }
.text-indigo-400 { color: #4C5FD5 !important; }

input, select, textarea {
  color: var(--color-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted) !important; opacity: 0.6; }

/* ---------------- Header & bottom nav chrome ----------------
   Compound selectors (element + class, or class + descendant) give
   these real higher specificity than the generic single-class rules
   above, so they win regardless of source order — the actual fix for
   the cascade bug, not just reordering and hoping. */
header.app-header, nav.app-nav {
  background-color: var(--color-header) !important;
  border-color: var(--color-header-deep) !important;
  color: var(--color-text-on-header) !important;
}
header.app-header .text-white, header.app-header h1, nav.app-nav .text-white {
  color: var(--color-text-on-header) !important;
}
header.app-header p, header.app-header span:not([class*="bg-"]) {
  color: var(--color-text-on-header) !important; opacity: 0.75;
}
nav.app-nav a { color: var(--color-text-on-header) !important; opacity: 0.65; }
nav.app-nav a[class*="text-blue-400"] { opacity: 1; color: var(--color-primary) !important; }
/* Gear/back icon buttons inside the header use bg-slate-700 as a subtle
   "chip" — needs its own compound override too, or it inherits white
   from the generic .bg-slate-700 rule and disappears against navy. */
header.app-header .bg-slate-700 {
  background-color: rgba(242,237,225,0.14) !important;
  border-color: rgba(242,237,225,0.25) !important;
}
header.app-header .bg-slate-700:hover { background-color: rgba(242,237,225,0.22) !important; }

/* Today page's weather card gradient — same treatment as the Jobs
   Portal's hero banner, remapped from the original dark blue/indigo
   gradient (which desaturated into a muddy lavender once the page
   background went light) to a navy→primary gradient using the theme's
   own customizable colors. */
.from-blue-900\/60.to-indigo-900\/60 {
  background: linear-gradient(to right, var(--color-header), color-mix(in srgb, var(--color-header) 55%, var(--color-primary) 45%)) !important;
  border-color: var(--color-header-deep) !important;
}
.from-blue-900\/60.to-indigo-900\/60, .from-blue-900\/60.to-indigo-900\/60 * { color: var(--color-text-on-header); }
.from-blue-900\/60.to-indigo-900\/60 .text-white { color: var(--color-text-on-header) !important; }

/* ---------------- 3D tactile buttons ----------------
   Adapted directly from Inspector's own .btn-primary pattern (a raised
   bottom-offset shadow that compresses on press) rather than a generic
   approximation — same shadow structure, same active-state transform,
   applied to this app's existing rounded-full primary-action buttons. */
.bg-blue-600 {
  box-shadow: 0 3px 0 var(--color-primary-hover), 0 4px 8px rgba(18,40,52,0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bg-blue-600:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 var(--color-primary-hover), 0 2px 4px rgba(18,40,52,0.18);
}
/* Secondary/ghost buttons get the same raised feel with a neutral
   shadow, so the primary action still reads as "the" button next to it
   while every button still feels physically pressable. Applied broadly
   (not excluded from the header) — a raised gear/back icon chip reads
   fine against navy too, and a complex :not() selector risks the whole
   rule being dropped if a browser doesn't support it, which would be
   worse than the minor cosmetic overlap. */
.bg-slate-700 {
  box-shadow: 0 2px 0 var(--color-border-strong), 0 3px 6px rgba(18,40,52,0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bg-slate-700:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--color-border-strong), 0 1px 2px rgba(18,40,52,0.08);
}