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

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #001F74;
  --primary-light: #0a3399;
  --primary-dark: #001350;
  /* Heading text colour — same as --primary in light mode, brighter
     blue in dark mode so navy text stays readable on dark slate. */
  --heading: #001F74;
  --accent: #E4002B;
  --accent-light: #ff1a3d;
  --bg: #F8FAFC;
  --card-bg: #ffffff;
  --surface-2: #f1f5f9;       /* subtle inset (search bar bg, etc) */
  --text: #0F172A;
  --text-light: #64748B;
  --border: #E2E8F0;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #2563eb;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ============================================================
   DARK MODE PALETTE
   Triggered by [data-theme="dark"] on <html> (set by the inline
   FOUC-prevention script in each page's <head> before paint).
   We keep --primary at navy because it's used as button/badge
   backgrounds in many places; for places where navy was used as
   TEXT, we expose --heading and override it here to a brighter
   blue so headings stay readable on dark slate.
   ============================================================ */
[data-theme="dark"] {
  --heading: #93b8ff;
  --bg: #0b1220;
  --card-bg: #131c2e;
  --surface-2: #1a2436;
  --text: #e6e8ef;
  --text-light: #9ca3af;
  --border: #2c3a55;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}
[data-theme="dark"] ::selection { background: rgba(147,184,255,0.20); }

html { scroll-behavior: smooth; }

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection { background: rgba(0,31,116,0.12); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.5;
}

/* Header — white bg in light mode, themed in dark mode */
header {
  background: var(--card-bg);
  color: var(--text);
  padding: 8px 24px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 0 var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}
header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo span { color: var(--accent); }
.header-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  border-left: 1px solid var(--border);
  padding-left: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Main */
main {
  flex: 1;
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* Views */
.view { display: none; }
.view.active { display: block; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.job-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.job-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.job-card-header h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--heading);
  font-weight: 600;
}
.job-card p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 4px;
  line-height: 1.5;
}

/* Status Badges */
.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-quote { background: #dbeafe; color: #1d4ed8; }
.badge-pricing { background: #fef3c7; color: #b45309; }
.badge-priced { background: #d1fae5; color: #065f46; }
.badge-accepted { background: #dcfce7; color: var(--success); }
.badge-rejected { background: #fee2e2; color: var(--danger); }
.badge-pending { background: #f3f4f6; color: var(--text-light); }

/* Back Button */
.btn-back {
  background: none;
  border: none;
  color: var(--heading);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  margin-bottom: 16px;
  padding: 4px 0;
  font-weight: 500;
}
.btn-back:hover { color: var(--accent); }

/* Job Detail */
.detail-header {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.detail-header h2 {
  margin-bottom: 4px;
  font-size: 18px;
}
.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.detail-meta p {
  font-size: 14px;
  color: var(--text-light);
}
.detail-meta strong {
  color: var(--text);
}
.detail-desc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.tab {
  background: none;
  border: none;
  padding: 12px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.tab:hover { color: var(--heading); }
.tab.active {
  color: var(--heading);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Forms */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  background: var(--card-bg);
  color: var(--text);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,31,116,0.08);
}
.input-prefix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-prefix span {
  position: absolute;
  left: 16px;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
}
.input-prefix input {
  padding-left: 32px;
}

/* Buttons — pill shape matching epspaint.com.au */
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 13px 30px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 16px rgba(228,0,43,0.3);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Success Message */
.success-msg {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #065f46;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* Upload / Docs */
.upload-area {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.upload-area p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 16px;
}
.doc-list {
  margin-top: 16px;
}
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.doc-item .doc-type {
  font-weight: 600;
  color: var(--heading);
}

/* Status Display */
.status-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.status-card .status-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.status-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}
.status-card p {
  font-size: 14px;
  color: var(--text-light);
}

/* Timeline */
.timeline {
  margin-top: 24px;
  text-align: left;
}
.timeline-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-left: 2px solid var(--border);
  margin-left: 8px;
  padding-left: 20px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.timeline-item.future::before {
  background: var(--border);
}
.timeline-item .tl-label {
  font-size: 13px;
  font-weight: 600;
}
.timeline-item .tl-date {
  font-size: 12px;
  color: var(--text-light);
}

/* Footer — gradient stripe like the site */
footer {
  text-align: center;
  padding: 28px 20px;
  font-size: 12px;
  color: var(--text-light);
  background: var(--card-bg);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--primary), var(--accent)) 1;
  letter-spacing: 0.3px;
}
[data-theme="dark"] footer {
  /* In dark mode, the navy primary is dimmer; use the brighter heading
     blue so the gradient stripe still pops. */
  border-image: linear-gradient(90deg, var(--heading), var(--accent)) 1;
}
[data-theme="dark"] header::after {
  background: linear-gradient(90deg, var(--heading) 0%, var(--accent) 100%);
}
footer p { opacity: 0.7; }

/* Rates */
.rate-group {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.rate-group h3 {
  font-family: 'Poppins', sans-serif;
}
.rate-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 10px;
}
.rate-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.rate-unit {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
@media (max-width: 480px) {
  .rate-row { grid-template-columns: 100px 1fr 60px; }
  .rate-row label { font-size: 13px; }
}

/* Responsive */
@media (max-width: 768px) {
  header { padding: 0 16px; height: 72px; }
  .header-inner { gap: 10px; }
  .logo img { height: 38px; }
  .header-title { font-size: 11px; padding-left: 10px; }
  main { padding: 20px 14px; }
  .detail-meta { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 480px) {
  .header-title { display: none; }
  .btn-primary { padding: 12px 24px; font-size: 13px; }
}

/* ============================================================
   THEME TOGGLE BUTTON
   Drop-in <button class="theme-toggle"> with two SVG icons; the
   moon shows in light mode (click → dark), the sun shows in
   dark mode (click → light). Sized to match other header-btn
   controls so it sits cleanly in any page header.

   Light mode: subtle navy circle on the white header.
   Dark mode: amber/yellow tinted circle so the sun icon glows
   against the dark slate header — much higher contrast than a
   dim slate-on-slate button.
   ============================================================ */
.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  flex-shrink: 0;
}
.theme-toggle:hover { transform: scale(1.06); border-color: var(--primary); background: var(--card-bg); }
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .theme-toggle {
  /* Warm amber tint — sun icon needs to feel "lit" against dark slate */
  background: rgba(251,191,36,0.14);
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(251,191,36,0.22);
  border-color: rgba(251,191,36,0.7);
  box-shadow: 0 0 16px rgba(251,191,36,0.25);
}
[data-theme="dark"] .theme-toggle .icon-light { display: block; }
[data-theme="dark"] .theme-toggle .icon-dark { display: none; }

/* ============================================================
   DARK MODE STATUS BADGES
   The badges use literal hex pairs in light mode for tight
   contrast control. In dark mode we soften the background and
   brighten the foreground so they read on dark slate.
   ============================================================ */
[data-theme="dark"] .badge-quote { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-theme="dark"] .badge-pricing { background: rgba(245,158,11,0.18); color: #fcd34d; }
[data-theme="dark"] .badge-priced { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .badge-accepted { background: rgba(22,163,74,0.20); color: #86efac; }
[data-theme="dark"] .badge-rejected { background: rgba(220,38,38,0.20); color: #fca5a5; }
[data-theme="dark"] .badge-pending { background: rgba(148,163,184,0.18); color: var(--text-light); }

/* ============================================================
   DARK MODE — INLINE WHITE BACKGROUND CATCH
   Modals, dropdowns and ad-hoc admin panels use inline
   `style="background:white..."` heavily. Catch the common
   patterns and re-skin them as themed surfaces. We DON'T
   override `color:` so any inline text colour still applies
   (most are var(--primary) headings or var(--text) body).
   ============================================================ */
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
  background: var(--card-bg) !important;
}
/* Likewise for inline `background:#f8fafc` / `background:#f4f6f8` —
   these are the muted "inset" surfaces (search bars, mock-stats,
   table headers). Re-skin to surface-2. */
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f4f6f8"],
[data-theme="dark"] [style*="background: #f4f6f8"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"] {
  background: var(--surface-2) !important;
}
/* Head-PO auto-fill "read from PDF" note (admin.html #hp-autofill-note).
   Uses classes (not inline hex) so it works with the dark-mode toggle —
   the [style*=...] catch-all above only matches literal hex written into
   the HTML, not colours set via JS (which browsers normalise to rgb()). */
.hp-autofill-note { font-size: 12px; margin-top: 6px; padding: 8px 10px; border-radius: 6px; }
.hp-autofill-note.neutral { background: var(--surface-2); color: var(--text-light); }
.hp-autofill-note.success { background: rgba(34,197,94,0.16); color: #1b7a34; }
[data-theme="dark"] .hp-autofill-note.success { color: #86efac; }

/* ============================================================
   DARK MODE — ADMIN-SPECIFIC HOTSPOTS
   These elements are shared across the admin shell and have
   inline-styled or class-based color fixes that need attention
   in dark mode.
   ============================================================ */
[data-theme="dark"] #global-search { color: var(--text); }
[data-theme="dark"] #global-search::placeholder { color: var(--text-light); opacity: 0.7; }
[data-theme="dark"] kbd {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* Common navy-text patterns inline-styled in admin.html */
[data-theme="dark"] [style*="color:var(--primary)"],
[data-theme="dark"] [style*="color: var(--primary)"],
[data-theme="dark"] [style*="color:#001F74"],
[data-theme="dark"] [style*="color: #001F74"] {
  color: var(--heading) !important;
}
/* Inline border separators using #f1f5f9 / #e5e7eb need to come up
   to var(--border) on dark so they don't disappear. */
[data-theme="dark"] [style*="border-top:1px solid #f1f5f9"],
[data-theme="dark"] [style*="border-bottom:1px solid #f1f5f9"],
[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"] {
  border-color: var(--border) !important;
}
/* Inline near-black text colours (used inside re-skinned cards) need
   to lift to var(--text) so they stay readable on dark surfaces. */
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#0F172A"],
[data-theme="dark"] [style*="color: #0F172A"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"] {
  color: var(--text) !important;
}
/* Comprehensive near-black text sweep — the #1 dark-mode readability bug is
   hardcoded dark inline text (incl. the #333333 house body colour) sitting on
   a surface the background catch-all flipped to dark. Lift them all to
   var(--text). Covers 3- and 6-digit hex, upper/lowercase, and black keywords. */
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color: #222"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#0d1f6e"],
[data-theme="dark"] [style*="color: #0d1f6e"],
[data-theme="dark"] [style*="color:#0D1F6E"],
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color: #1a1a1a"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#0b1220"] {
  color: var(--text) !important;
}
/* Mid-grey secondary text → var(--text-light) (readable, not full-bright). */
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#71717a"],
[data-theme="dark"] [style*="color: #71717a"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#525252"],
[data-theme="dark"] [style*="color: #525252"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#777"],
[data-theme="dark"] [style*="color: #777"] {
  color: var(--text-light) !important;
}
/* Inputs/textareas/selects with hardcoded white bg + dark text used across the
   admin console — force them onto the dark surface so typed text is visible. */
[data-theme="dark"] input[style*="background:var(--card-bg)"],
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2, #16233a) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-light) !important; opacity: 0.75; }
/* Additional muted/inset surfaces commonly inline-styled in admin.html */
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#fafbfc"],
[data-theme="dark"] [style*="background: #fafbfc"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"] {
  background: var(--surface-2) !important;
}

/* ============================================================
   DARK MODE — TINTED ALERT BACKGROUNDS
   Many components use light-tinted Tailwind palette backgrounds
   (#fef3c7 amber, #dcfce7 green, #fee2e2 red, #dbeafe blue,
   #f0fdf4 emerald, #ecfdf5 mint, #eef2ff indigo). In dark mode
   these read as glaring near-white blocks. Re-tone them to deep
   tinted backgrounds and bring the text contrast up.
   ============================================================ */

/* Amber / warning */
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color: #92400e"],
[data-theme="dark"] [style*="color:#b45309"],
[data-theme="dark"] [style*="color: #b45309"],
[data-theme="dark"] [style*="color:#a16207"],
[data-theme="dark"] [style*="color: #a16207"] { color: #fbbf24 !important; }

/* Green / success */
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background: #dcfce7"],
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"],
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"] {
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
}
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color: #166534"],
[data-theme="dark"] [style*="color:#14532d"],
[data-theme="dark"] [style*="color: #14532d"],
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color: #065f46"],
[data-theme="dark"] [style*="color:#047857"],
[data-theme="dark"] [style*="color: #047857"] { color: #86efac !important; }

/* Red / danger */
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"] {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}
[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color: #dc2626"],
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color: #991b1b"] { color: #fca5a5 !important; }

/* Blue / info */
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background: #eef2ff"] {
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color:#3730a3"],
[data-theme="dark"] [style*="color: #3730a3"],
[data-theme="dark"] [style*="color:#4338ca"],
[data-theme="dark"] [style*="color: #4338ca"] { color: #93c5fd !important; }

/* Purple / accent */
[data-theme="dark"] [style*="background:rgba(228,0,43,0.10)"],
[data-theme="dark"] [style*="background:#f3e8ff"],
[data-theme="dark"] [style*="background: #f3e8ff"] {
  background: rgba(124, 58, 237, 0.14) !important;
}

/* Common all-purple text */
[data-theme="dark"] [style*="color:#7c3aed"],
[data-theme="dark"] [style*="color: #7c3aed"] { color: #c4b5fd !important; }

/* Form inputs — make sure inline-styled inputs/textareas pick up the
   dark theme so admin doesn't see white-on-white text. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-light); opacity: 0.65; }

/* The header search input has its background set inline to var(--bg).
   That picks up the dark bg automatically; just make sure the text
   inside reads correctly. */
[data-theme="dark"] header input[type="text"],
[data-theme="dark"] header input[type="search"] {
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] header input::placeholder { color: var(--text-light); opacity: 0.7; }

/* Header logo — invert on dark mode if the asset is dark-on-transparent
   (the EPS logo.png is navy on transparent so it disappears on dark slate).
   Apply a soft white fill via filter. */
[data-theme="dark"] header .logo img { filter: brightness(0) invert(1); }

/* ============================================================
   DARK MODE — SEMANTIC ALERT/ACTION CARDS
   The admin dashboard renders action queue + "Needs Attention"
   cards with literal pastel hexes inline (background:#eff6ff,
   border:1px solid #bfdbfe, etc.). Re-skin them as tinted-dark
   variants — same hue, much darker bg, brighter text/border —
   so they read as semantic on the dark slate page.
   ============================================================ */

/* Blue (info) — quotes-to-award, etc. */
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] {
  background: rgba(37,99,235,0.12) !important;
}
[data-theme="dark"] [style*="border:1px solid #bfdbfe"],
[data-theme="dark"] [style*="border: 1px solid #bfdbfe"] {
  border-color: rgba(96,165,250,0.30) !important;
}

/* Amber (caution) — POs awaiting sign, invoices to review */
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"],
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"] {
  background: rgba(245,158,11,0.12) !important;
}
[data-theme="dark"] [style*="border:1px solid #fde68a"],
[data-theme="dark"] [style*="border: 1px solid #fde68a"],
[data-theme="dark"] [style*="border:1px solid #fcd34d"],
[data-theme="dark"] [style*="border: 1px solid #fcd34d"] {
  border-color: rgba(252,211,77,0.30) !important;
}

/* Orange (warning) — docs expiring, charges */
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#ffedd5"],
[data-theme="dark"] [style*="background: #ffedd5"] {
  background: rgba(234,88,12,0.12) !important;
}
[data-theme="dark"] [style*="border:1px solid #fed7aa"],
[data-theme="dark"] [style*="border: 1px solid #fed7aa"] {
  border-color: rgba(254,215,170,0.30) !important;
}

/* Red (danger) — non-compliant, stale, rejected */
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"],
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"] {
  background: rgba(220,38,38,0.12) !important;
}
[data-theme="dark"] [style*="border:1px solid #fca5a5"],
[data-theme="dark"] [style*="border: 1px solid #fca5a5"],
[data-theme="dark"] [style*="border:1px solid #fecaca"],
[data-theme="dark"] [style*="border: 1px solid #fecaca"] {
  border-color: rgba(252,165,165,0.30) !important;
}

/* Green (success) — ready to pay, all clear, awarded */
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"],
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background: #dcfce7"] {
  background: rgba(22,163,74,0.12) !important;
}
[data-theme="dark"] [style*="border:1px solid #86efac"],
[data-theme="dark"] [style*="border: 1px solid #86efac"] {
  border-color: rgba(134,239,172,0.30) !important;
}

/* Violet (info) — questions, expense claims */
[data-theme="dark"] [style*="background:#f5f3ff"],
[data-theme="dark"] [style*="background: #f5f3ff"],
[data-theme="dark"] [style*="background:#ede9fe"],
[data-theme="dark"] [style*="background: #ede9fe"] {
  background: rgba(124,58,237,0.14) !important;
}
[data-theme="dark"] [style*="border:1px solid #c4b5fd"],
[data-theme="dark"] [style*="border: 1px solid #c4b5fd"] {
  border-color: rgba(196,181,253,0.30) !important;
}

/* Semantic text colors — brighten in dark mode so the BIG count numbers,
   chevrons, and "X overdue" warnings pop on the new tinted backgrounds.
   Each maps a 600-level Tailwind hue used in light mode to its 300-level
   equivalent for dark mode (~3.5:1 against the dark slate page). */
[data-theme="dark"] [style*="color:#2563eb"],
[data-theme="dark"] [style*="color: #2563eb"] { color: #93c5fd !important; }     /* blue */
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"] { color: #93c5fd !important; }
[data-theme="dark"] [style*="color:#f59e0b"],
[data-theme="dark"] [style*="color: #f59e0b"] { color: #fcd34d !important; }     /* amber */
[data-theme="dark"] [style*="color:#b45309"],
[data-theme="dark"] [style*="color: #b45309"] { color: #fcd34d !important; }
[data-theme="dark"] [style*="color:#ea580c"],
[data-theme="dark"] [style*="color: #ea580c"] { color: #fdba74 !important; }     /* orange */
[data-theme="dark"] [style*="color:#9a3412"],
[data-theme="dark"] [style*="color: #9a3412"] { color: #fdba74 !important; }
[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color: #dc2626"] { color: #fca5a5 !important; }     /* red */
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color: #991b1b"] { color: #fca5a5 !important; }
[data-theme="dark"] [style*="color:#16a34a"],
[data-theme="dark"] [style*="color: #16a34a"] { color: #86efac !important; }     /* green */
[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color: #15803d"] { color: #86efac !important; }
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color: #065f46"] { color: #86efac !important; }
[data-theme="dark"] [style*="color:#14532d"],
[data-theme="dark"] [style*="color: #14532d"] { color: #86efac !important; }
[data-theme="dark"] [style*="color:#7c3aed"],
[data-theme="dark"] [style*="color: #7c3aed"] { color: #c4b5fd !important; }     /* violet */