/* =============================================================
   SGI Inventory — Global Accessibility & Readability Overrides
   Loaded via <link> BEFORE the inline <style> block in each
   template. Uses !important where inline styles would otherwise
   win the cascade. CSS variables cannot be overridden from here
   (inline <style> has later source order), so concrete selectors
   are used throughout.
   ============================================================= */

/* ── 0. BACKGROUND IMAGES ──────────────────────────────────────
   Scoped to each theme so switching works correctly.
   body::before (grid overlay) sits on top via z-index: 0. ───── */
html[data-theme="dark"] body {
  background-image: url('../Background_d.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ── 1. BASE FONT SIZE ─────────────────────────────────────────
   Lifts the base from 16px to 17px, making all rem-based sizes
   slightly larger across every page. !important overrides any
   template that declares html { font-size: 16px } inline. ─── */
html {
  font-size: 17px !important;
}

/* ── 2. DATA TABLE SIZES ───────────────────────────────────────
   Templates set table cells to ~.83rem inline. With 17px base
   that is fine, but we ensure a minimum for readability. ───── */
.data-table td {
  font-size: .88rem !important;
}

.data-table th {
  font-size: .65rem !important;
  color: rgba(240, 240, 240, .80) !important;
}

/* ── 3. RED IDENTIFIER LINKS — WCAG AA COMPLIANT ────────────────
   #C41E24 on #080808 = ~3.4:1 contrast (fails AA at 4.5:1).
   #E8353C on #080808 = ~4.57:1 (passes AA). Same hue, brighter.
   All identifier span classes that consume var(--red) are listed
   here since the variable itself cannot be overridden externally. */
.wo-num,
.wo-num-big,
.po-num,
.rc-link,
.num-cell,
.adj-num {
  color: #E8353C !important;
}

/* Cancelled/void status badges use red text */
.s-CANCELLED,
.s-VOID {
  color: #E8353C !important;
}

/* Global search result key highlight */
.gsr-key {
  color: #E8353C !important;
}

/* ── 4. DATE / CALENDAR INPUTS ─────────────────────────────────
   Without explicit styling, date inputs show browser-default
   colors which are often dark-on-dark or flash a light popup.

   color-scheme: dark  →  browser renders the calendar picker
                           popup in dark mode (Chromium, Firefox,
                           Safari all respect this).
   The ::-webkit-calendar-picker-indicator filter converts the
   default dark icon to a reddish-tinted light icon visible on
   dark surfaces. ─────────────────────────────────────────────── */
input[type="date"] {
  color-scheme: dark;
  background: #191919 !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 6px;
  padding: .45rem .75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: .85rem;
}

input[type="date"]:focus {
  border-color: #E8353C !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 53, 60, .20);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.2) saturate(2) hue-rotate(320deg);
  cursor: pointer;
  opacity: 0.75;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── 5. DIM TEXT CONTRAST BOOST ────────────────────────────────
   --text-dim at 0.65 opacity is borderline; some templates set
   it even lower (item_stock.html uses 0.20). Target semantic
   uses directly so they render at a readable opacity. ─────── */
.breadcrumb {
  color: rgba(240, 240, 240, .78) !important;
}

.empty-state,
.empty {
  color: rgba(240, 240, 240, .78) !important;
}

/* Form field labels used in detail/create pages */
label.fl {
  color: rgba(240, 240, 240, .82) !important;
}

/* ── 6. GHOST / SECONDARY BUTTON VISIBILITY ────────────────────
   Buttons without a solid fill rely on --border (20% white) for
   their border, which can be nearly invisible. Slight boost. ── */
.btn:not(.primary):not(.success):not(.warning):not(.danger):not(.cyan) {
  border-color: rgba(255, 255, 255, .32) !important;
  color: rgba(240, 240, 240, .92) !important;
}

.btn:not(.primary):not(.success):not(.warning):not(.danger):not(.cyan):hover {
  border-color: rgba(232, 53, 60, .55) !important;
  color: #f0f0f0 !important;
}

/* ── 7. PLACEHOLDER TEXT ───────────────────────────────────────
   Default placeholder inherits --text-dim which can be very
   faint. Give all filter/search inputs a more visible placeholder. */
.filter-input::placeholder,
.filter-select::placeholder,
.search-input::placeholder,
.gs-input::placeholder {
  color: rgba(240, 240, 240, .52) !important;
}

/* ── 8. WO NUMBER — NO WRAP ────────────────────────────────────
   Prevents "WO-12345" from breaking across two lines when the
   column is tight. The column will expand to fit the content. */
.wo-num {
  white-space: nowrap;
}

/* ── 9. TECH PILL LEGIBILITY ───────────────────────────────────
   .tech-pill uses --border (20% white) which is hard to see.
   NOTE: no !important here — skill-colored pills use inline
   style="border-color:X;color:X" which must take precedence.
   Without !important, inline styles win naturally. Pills without
   a skill color get a slightly more visible default border. ─── */
.tech-pill {
  border-color: rgba(255, 255, 255, .30);
  color: rgba(240, 240, 240, .88);
}

/* =============================================================
   SGI — LIGHT MODE OVERRIDES
   Applied when <html data-theme="light"> is set.
   Uses html[data-theme="light"] (specificity 0-1-1) to beat
   the inline :root {} block (specificity 0-1-0) in each template.
   ============================================================= */

/* ── Variables ──────────────────────────────────────────────── */
html[data-theme="light"] {
  --red:        #B51A20;
  --red-dark:   #8F1519;
  --red-glow:   rgba(181, 26, 32, .10);
  --black:      #F5F5F5;
  --surface:    #FFFFFF;
  --surface-2:  #EAEAEA;
  --surface-3:  #E0E0E0;
  --border:     rgba(0, 0, 0, .15);
  --border-red: rgba(181, 26, 32, .40);
  --text:       #111111;
  --text-muted: #333333;
  --text-dim:   #5C5C5C;
  --green:      #166534;
  --yellow:     #92400E;
  --blue:       #1D4ED8;
  --purple:     #6B21A8;
  --orange:     #C2410C;
  --cyan:       #0C6E87;
  color-scheme: light;
}

/* ── Override hardcoded dark values from the rules above ─────── */
html[data-theme="light"] .data-table th {
  color: var(--text-dim) !important;
}
html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty {
  color: var(--text-muted) !important;
}
html[data-theme="light"] label.fl {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .btn:not(.primary):not(.success):not(.warning):not(.danger):not(.cyan) {
  border-color: rgba(0, 0, 0, .32) !important;
  color: #333333 !important;
}
html[data-theme="light"] .btn:not(.primary):not(.success):not(.warning):not(.danger):not(.cyan):hover {
  border-color: rgba(181, 26, 32, .55) !important;
  color: #111111 !important;
}
html[data-theme="light"] .tech-pill {
  border-color: rgba(0, 0, 0, .25);
  color: var(--text-muted);
}
html[data-theme="light"] .filter-input::placeholder,
html[data-theme="light"] .filter-select::placeholder,
html[data-theme="light"] .search-input::placeholder,
html[data-theme="light"] .gs-input::placeholder {
  color: rgba(0, 0, 0, .38) !important;
}

/* ── WCAG red overrides — --red now passes on light bg ────────── */
html[data-theme="light"] .wo-num,
html[data-theme="light"] .wo-num-big,
html[data-theme="light"] .po-num,
html[data-theme="light"] .rc-link,
html[data-theme="light"] .num-cell,
html[data-theme="light"] .adj-num,
html[data-theme="light"] .s-CANCELLED,
html[data-theme="light"] .s-VOID,
html[data-theme="light"] .gsr-key {
  color: var(--red) !important;
}

/* ── Date inputs ────────────────────────────────────────────── */
html[data-theme="light"] input[type="date"] {
  color-scheme: light;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid rgba(0, 0, 0, .32) !important;
}
html[data-theme="light"] input[type="date"]:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(181, 26, 32, .18);
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.55;
}

/* ── Header glass ────────────────────────────────────────────── */
html[data-theme="light"] .header {
  background: rgba(245, 245, 245, .97);
}

/* ── Logo text — hardcoded #fff in templates ─────────────────── */
html[data-theme="light"] .logo-text strong {
  color: #111111 !important;
}

/* ── Background image (light mode) ──────────────────────────── */
html[data-theme="light"] body {
  background-image: url('../Background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ── Background grid overlay ─────────────────────────────────── */
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(181, 26, 32, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 26, 32, .04) 1px, transparent 1px);
}

/* ── Table row hover ──────────────────────────────────────────── */
html[data-theme="light"] .data-table tbody tr:hover td {
  background: rgba(0, 0, 0, .035);
}

/* ── Modal backdrop ──────────────────────────────────────────── */
html[data-theme="light"] .modal-bg {
  background: rgba(0, 0, 0, .45);
}
html[data-theme="light"] .mobile-nav-backdrop {
  background: rgba(0, 0, 0, .40);
}

/* ── Form inputs & filter bars ───────────────────────────────── */
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .filter-input,
html[data-theme="light"] .filter-bar select {
  background-color: var(--surface); /* background-color not shorthand — preserves background-image/repeat */
  border-color: rgba(0, 0, 0, .32);
  color: var(--text);
}

/* ── Global search widget ────────────────────────────────────── */
html[data-theme="light"] .gs-input {
  background: var(--surface-2);
  border-color: rgba(0, 0, 0, .22);
  color: var(--text);
}
html[data-theme="light"] .gs-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
  background: var(--surface);
}
html[data-theme="light"] .gs-input:hover { border-color: rgba(0, 0, 0, .38); }
html[data-theme="light"] .gs-icon { color: rgba(0, 0, 0, .45); }
html[data-theme="light"] .gs-results {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
}

/* ── Status badges ───────────────────────────────────────────── */
html[data-theme="light"] .s-AVAILABLE {
  color: var(--green); border-color: rgba(22, 101, 52, .35); background: rgba(22, 101, 52, .08);
}
html[data-theme="light"] .s-IN_SERVICE,
html[data-theme="light"] .s-OPEN {
  color: var(--cyan); border-color: rgba(12, 110, 135, .35); background: rgba(12, 110, 135, .08);
}
html[data-theme="light"] .s-UNDER_REPAIR {
  color: var(--yellow); border-color: rgba(146, 64, 14, .35); background: rgba(146, 64, 14, .08);
}
html[data-theme="light"] .s-AWAITING_PARTS {
  color: var(--orange); border-color: rgba(194, 65, 12, .35); background: rgba(194, 65, 12, .08);
}
html[data-theme="light"] .s-SCHEDULED_MAINTENANCE {
  color: var(--purple); border-color: rgba(107, 33, 168, .35); background: rgba(107, 33, 168, .08);
}
html[data-theme="light"] .s-OUT_OF_SERVICE {
  color: #B91C1C; border-color: rgba(185, 28, 28, .40); background: rgba(185, 28, 28, .08);
}
html[data-theme="light"] .s-RETIRED,
html[data-theme="light"] .s-DISPOSED {
  color: var(--text-dim); border-color: rgba(0, 0, 0, .18); background: transparent;
}
html[data-theme="light"] .s-DRAFT {
  color: var(--text-dim); border-color: rgba(0, 0, 0, .18); background: transparent;
}

/* ── Flash messages ──────────────────────────────────────────── */
html[data-theme="light"] .msg.success {
  background: rgba(22, 101, 52, .08); border-color: var(--green); color: #14532D;
}
html[data-theme="light"] .msg.error {
  background: rgba(185, 28, 28, .08); border-color: #B91C1C; color: #7F1D1D;
}
html[data-theme="light"] .msg.warning {
  background: rgba(146, 64, 14, .08); border-color: var(--yellow); color: #78350F;
}
html[data-theme="light"] .msg.info {
  background: rgba(29, 78, 216, .08); border-color: var(--blue); color: #1E3A8A;
}

/* ── Colored buttons (green/yellow/danger) ───────────────────── */
html[data-theme="light"] .btn.green {
  color: #14532D; background: rgba(22, 101, 52, .10); border-color: rgba(22, 101, 52, .40);
}
html[data-theme="light"] .btn.yellow {
  color: #78350F; background: rgba(146, 64, 14, .10); border-color: rgba(146, 64, 14, .40);
}
html[data-theme="light"] .btn.danger {
  color: #B91C1C; background: rgba(185, 28, 28, .08); border-color: rgba(185, 28, 28, .40);
}

/* ── PM status indicators ────────────────────────────────────── */
html[data-theme="light"] .pm-overdue  { color: #B91C1C; }
html[data-theme="light"] .pm-due-soon { color: var(--yellow); }
html[data-theme="light"] .pm-ok       { color: var(--green); }

/* ── GPS age indicators ──────────────────────────────────────── */
html[data-theme="light"] .gps-age.fresh { color: var(--green); }
html[data-theme="light"] .gps-age.stale { color: var(--yellow); }

/* ── WO Map page — hardcoded dark values ─────────────────────── */
html[data-theme="light"] .map-legend {
  background: rgba(245, 245, 245, .95) !important;
  border-color: rgba(0, 0, 0, .15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
html[data-theme="light"] .wo-chip.em { color: #B91C1C; }
html[data-theme="light"] .wo-chip.sc { color: var(--blue); }
html[data-theme="light"] .wo-chip.ct { color: var(--green); }
html[data-theme="light"] .stab:hover { border-color: rgba(0, 0, 0, .35); color: var(--text); }

/* =============================================================
   COMPREHENSIVE LIGHT-MODE FIXES
   Overrides hardcoded dark values in per-template inline styles.
   These selectors all use html[data-theme="light"] to ensure they
   only fire in light mode, and !important to beat inline <style>.
   ============================================================= */

/* ── Select dropdown arrow — template SVGs use white stroke ────── */
html[data-theme="light"] select,
html[data-theme="light"] select.filter-input,
html[data-theme="light"] .field select,
html[data-theme="light"] .filter-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
}

/* ── Status badge dark borders/colors ───────────────────────────── */
/* DRAFT — #444 border, #9e9e9e text */
html[data-theme="light"] .s-DRAFT {
  color: #5C5C5C !important;
  border-color: rgba(0,0,0,0.20) !important;
  background: rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] .s-UNASSIGNED {
  color: #5C5C5C !important;
  border-color: rgba(0,0,0,0.20) !important;
  background: rgba(0,0,0,0.04) !important;
}

/* Priority badge — .p-LOW uses rgba(255,255,255,.1) border */
html[data-theme="light"] .p-LOW {
  border-color: rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .p-NORMAL {
  border-color: rgba(0,0,0,0.15) !important;
}

/* URGENT — hardcoded #f87171 (light red on dark) */
html[data-theme="light"] .p-URGENT,
html[data-theme="light"] .p-URGENT {
  color: #B91C1C !important;
  border-color: rgba(185,28,28,0.4) !important;
  background: rgba(185,28,28,0.07) !important;
}

/* Job chips — job-E / job-S use hardcoded light-on-dark colors */
html[data-theme="light"] .job-E {
  color: #B91C1C !important;
  background: rgba(185,28,28,0.08) !important;
  border-color: rgba(185,28,28,0.30) !important;
}
html[data-theme="light"] .job-S {
  color: #1D4ED8 !important;
  background: rgba(29,78,216,0.08) !important;
  border-color: rgba(29,78,216,0.25) !important;
}
html[data-theme="light"] .job-C {
  color: #166534 !important;
  background: rgba(22,101,52,0.08) !important;
  border-color: rgba(22,101,52,0.25) !important;
}

/* ── Table row hover — templates use rgba(255,255,255,.02) ─────── */
html[data-theme="light"] .data-table tbody tr:hover td,
html[data-theme="light"] .data-table tr:hover td {
  background: rgba(0,0,0,0.03) !important;
}

/* ── Audit log row divider — rgba(255,255,255,.04) ─────────────── */
html[data-theme="light"] .audit-row {
  border-bottom-color: rgba(0,0,0,0.07) !important;
}

/* ── Comm badges — cust-badge uses hardcoded #4da6ff ───────────── */
html[data-theme="light"] .cust-badge {
  color: #1D4ED8 !important;
  background: rgba(29,78,216,0.08) !important;
  border-color: rgba(29,78,216,0.25) !important;
}

/* ── Flash message text — hardcoded light-on-dark colors ────────── */
html[data-theme="light"] .msg.success { color: #14532D !important; }
html[data-theme="light"] .msg.error   { color: #7F1D1D !important; }
html[data-theme="light"] .msg.warning { color: #78350F !important; }
html[data-theme="light"] .msg.info    { color: #1E3A8A !important; }

/* ── .btn color variants for light mode ─────────────────────────── */
html[data-theme="light"] .btn.success {
  color: #14532D !important;
  background: rgba(22,101,52,.10) !important;
  border-color: rgba(22,101,52,.40) !important;
}
html[data-theme="light"] .btn.warning {
  color: #78350F !important;
  background: rgba(146,64,14,.10) !important;
  border-color: rgba(146,64,14,.40) !important;
}
html[data-theme="light"] .btn.danger {
  color: #B91C1C !important;
  background: rgba(185,28,28,.08) !important;
  border-color: rgba(185,28,28,.40) !important;
}
html[data-theme="light"] .btn.cyan {
  color: #0C6E87 !important;
  background: rgba(12,110,135,.08) !important;
  border-color: rgba(12,110,135,.35) !important;
}

/* ── Filter inputs — some templates omit background in .filter-input */
html[data-theme="light"] .filter-input,
html[data-theme="light"] input.filter-input,
html[data-theme="light"] select.filter-input {
  background-color: var(--surface) !important; /* background-color not shorthand — preserves SVG arrow */
  border-color: rgba(0,0,0,0.22) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .filter-input:focus {
  border-color: var(--red) !important;
}

/* ── Card / panel backgrounds that use --surface-2 ─────────────── */
/* --surface-2 is already overridden to #EAEAEA in light mode vars,
   so var(--surface-2) references will auto-adapt. No !important needed. */

/* ── Table header — var(--surface-2) adapts; var(--text-dim) adapts ─ */
/* Nothing to override — they use CSS vars that already switch. */

/* ── Hardcoded dark .s-RECEIVED / .s-CLOSED text colors ─────────── */
html[data-theme="light"] .s-RECEIVED {
  color: #14532D !important;
  border-color: rgba(22,101,52,.35) !important;
  background: rgba(22,101,52,.07) !important;
}
html[data-theme="light"] .s-CLOSED {
  color: #166534 !important;
  border-color: rgba(22,101,52,.35) !important;
  background: rgba(22,101,52,.07) !important;
}

/* ── Comm type selector hover — hardcoded rgba(196,30,36,.08) ───── */
html[data-theme="light"] .comm-btn.sgi:hover,
html[data-theme="light"] .comm-btn.sgi.selected {
  border-color: var(--border-red) !important;
  background: var(--red-glow) !important;
  color: var(--red) !important;
}
html[data-theme="light"] .comm-btn.cust:hover,
html[data-theme="light"] .comm-btn.cust.selected {
  border-color: rgba(29,78,216,.5) !important;
  background: rgba(29,78,216,.08) !important;
  color: var(--blue) !important;
}

/* ── Hardcoded white text in .so-link-bar ───────────────────────── */
html[data-theme="light"] .so-link-bar a {
  color: #166534 !important;
}

/* ── Input fields inside .field — var(--surface-2) needs no fix,
   but the select arrow is already handled above. ────────────────── */
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea {
  background: var(--surface) !important;
  border-color: rgba(0,0,0,0.22) !important;
  color: var(--text) !important;
}

/* ── Dispatch board and map pages — hardcoded dark backgrounds ───── */
html[data-theme="light"] .dispatch-col,
html[data-theme="light"] .crew-col {
  background: var(--surface) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* ── SO link bar ─────────────────────────────────────────────────── */
html[data-theme="light"] .so-link-bar {
  background: rgba(22,101,52,0.06) !important;
  border-color: rgba(22,101,52,0.22) !important;
}