/* ============================================================================
   Contractor Panel — Dark Theme Form Fix (CORRECTED)
   ============================================================================
   Fixes the white-background dropdown issue across ALL contractor pages.

   ROOT CAUSE HISTORY:
   1) Rules were originally unscoped, so --foreground fell back to white
      even outside dark mode while --bg-secondary resolved to a real light
      value from elsewhere — light bg + white text = invisible.
   2) The app toggles dark mode TWO different ways on different pages:
      contractor-login.php sets `data-theme="dark"`, contractor-dashboard.php
      sets `class="dark"`. Scoping to only one of these left the other
      page completely unstyled by this file.

   THE FIX: every rule is scoped to `html:is(.dark, [data-theme="dark"])`,
   so it works no matter which mechanism a given page uses. Nothing in
   this file touches light-mode pages. Background and text color are
   always resolved together, from the same mode.

   LONGER-TERM RECOMMENDATION: standardize on ONE theme mechanism across
   the whole app (pick either the class or the attribute) so future CSS
   and JS don't have to account for both.

   Load this file AFTER app.css on every contractor page:
   <link rel="stylesheet" href="<?= $baseUrl ?>/assets/css/contractor-dark-fix.css">
   ============================================================================ */

/* ─── Dark theme variables (only meaningful when html:is(.dark, [data-theme="dark"]) is present) ──── */
html:is(.dark, [data-theme="dark"]) {
  --bg-primary: #1a1a1a;
  --bg-secondary: #1a1a1a;
  --bg: #111111;
  --bg-hover: rgba(255,255,255,0.04);
  --bg-card: #1a1a1a;
  --foreground: #fafafa;
  --muted-foreground: #737373;
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --border: rgba(255,255,255,0.08);
  --destructive: #f87171;
  --popover: #1a1a1a;
  --card: #1a1a1a;
}

/* ─── Native <select> dropdowns — fix white background (DARK MODE ONLY) ──── */
html:is(.dark, [data-theme="dark"]) select {
  background-color: var(--bg-secondary, #161b22) !important;
  color: var(--foreground, #f0f6fc) !important;
  border: 1px solid var(--border, #30363d) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1.5 3.5h9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2rem !important;
}

/* ─── The dropdown OPTIONS (the actual menu that pops open) ──────────────── */
html:is(.dark, [data-theme="dark"]) select option,
html:is(.dark, [data-theme="dark"]) select option:checked,
html:is(.dark, [data-theme="dark"]) select option:hover,
html:is(.dark, [data-theme="dark"]) select option:focus {
  background-color: #161b22 !important;
  color: #f0f6fc !important;
}
html:is(.dark, [data-theme="dark"]) select option:checked {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
html:is(.dark, [data-theme="dark"]) select option:-moz-focusring,
html:is(.dark, [data-theme="dark"]) select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #f0f6fc !important;
}

/* ─── Inputs + textareas — consistent dark styling (DARK MODE ONLY) ──────── */
html:is(.dark, [data-theme="dark"]) input[type="text"],
html:is(.dark, [data-theme="dark"]) input[type="email"],
html:is(.dark, [data-theme="dark"]) input[type="password"],
html:is(.dark, [data-theme="dark"]) input[type="number"],
html:is(.dark, [data-theme="dark"]) input[type="tel"],
html:is(.dark, [data-theme="dark"]) input[type="url"],
html:is(.dark, [data-theme="dark"]) input[type="search"],
html:is(.dark, [data-theme="dark"]) input[type="date"],
html:is(.dark, [data-theme="dark"]) input[type="datetime-local"],
html:is(.dark, [data-theme="dark"]) input[type="time"],
html:is(.dark, [data-theme="dark"]) textarea {
  background-color: var(--bg-secondary, #161b22) !important;
  color: var(--foreground, #f0f6fc) !important;
  border: 1px solid var(--border, #30363d) !important;
}
html:is(.dark, [data-theme="dark"]) input::placeholder,
html:is(.dark, [data-theme="dark"]) textarea::placeholder {
  color: var(--muted-foreground, #6e7681) !important;
  opacity: 1;
}
html:is(.dark, [data-theme="dark"]) input:focus,
html:is(.dark, [data-theme="dark"]) select:focus,
html:is(.dark, [data-theme="dark"]) textarea:focus {
  outline: none !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15) !important;
}

/* ─── Date input calendar picker icon (light on dark) ────────────────────── */
html:is(.dark, [data-theme="dark"]) input[type="date"]::-webkit-calendar-picker-indicator,
html:is(.dark, [data-theme="dark"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html:is(.dark, [data-theme="dark"]) input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

/* ─── Checkbox + radio accent ────────────────────────────────────────────── */
html:is(.dark, [data-theme="dark"]) input[type="checkbox"],
html:is(.dark, [data-theme="dark"]) input[type="radio"] {
  accent-color: #d97706;
}

/* ─── File input ─────────────────────────────────────────────────────────── */
html:is(.dark, [data-theme="dark"]) input[type="file"] {
  background-color: var(--bg-secondary, #161b22) !important;
  color: var(--foreground, #f0f6fc) !important;
  border: 1px solid var(--border, #30363d) !important;
  border-radius: 0.5rem;
  padding: 0.4rem !important;
}
html:is(.dark, [data-theme="dark"]) input[type="file"]::file-selector-button {
  background: #d97706;
  color: #fff;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.5rem;
}
html:is(.dark, [data-theme="dark"]) input[type="file"]::file-selector-button:hover {
  background: #b45309;
}

/* ─── Autofill fix (Chrome's yellow background) ──────────────────────────── */
html:is(.dark, [data-theme="dark"]) input:-webkit-autofill,
html:is(.dark, [data-theme="dark"]) input:-webkit-autofill:hover,
html:is(.dark, [data-theme="dark"]) input:-webkit-autofill:focus,
html:is(.dark, [data-theme="dark"]) textarea:-webkit-autofill,
html:is(.dark, [data-theme="dark"]) select:-webkit-autofill {
  -webkit-text-fill-color: var(--foreground, #f0f6fc) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary, #161b22) inset !important;
  caret-color: var(--foreground, #f0f6fc);
  transition: background-color 9999s ease-in-out 0s;
}

/* ─── Search input type ──────────────────────────────────────────────────── */
html:is(.dark, [data-theme="dark"]) input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.7);
  cursor: pointer;
}