/* Title: Global Overrides for Readability (updated)
   Ensures login card, inputs and select dropdowns remain readable on dark themes.
   Includes autofill fixes for Chrome/Edge and fallbacks for other browsers.
   Also contains styling for the custom select widget used by /assets/js/custom_select.js.
   Upload to /public_html/assets/css/themes/_overrides.css and clear browser cache.
*/

:root {
  --override-hero-text: #ffffff;
  --override-hero-muted: rgba(255,255,255,0.85);
  --override-card-bg: rgba(0,0,0,0.55);
  --override-card-border: rgba(255,255,255,0.04);
  --override-input-bg: rgba(255,255,255,0.03);
  --override-input-color: #ffffff;
  --override-btn-bg: #d97706; /* fallback accent */
  --override-btn-color: #000;
  --override-select-bg: rgba(255,255,255,0.02);
  --override-select-option-bg: rgba(15,19,22,0.95);
  --override-select-option-color: #ffffff;
}

/* Header / hero helpers */
.header-hero, .hero-grad {
  color: var(--override-hero-text) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Login / card background / border */
.pp-card, .card {
  background: var(--override-card-bg) !important;
  border: 1px solid var(--override-card-border) !important;
  color: var(--override-input-color) !important;
  border-radius: 12px !important;
}

/* Inputs (textareas, inputs, selects) */
.pp-input, input.pp-input, input[type="text"], input[type="password"], textarea, select,
.pp-select {
  background: var(--override-input-bg) !important;
  color: var(--override-input-color) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  -webkit-text-fill-color: var(--override-input-color) !important;
  border-radius: 10px !important;
}

/* Prevent browser autofill from painting white/yellow background:
   -webkit-box-shadow trick forces a full inset colour to override UA highlight
*/
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--override-input-color) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--override-input-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--override-input-bg) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Also target the newer pseudo selectors (Safari/others) */
input:-internal-autofill-selected,
textarea:-internal-autofill-selected {
  -webkit-text-fill-color: var(--override-input-color) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--override-input-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--override-input-bg) inset !important;
}

/* Focus state */
.pp-input:focus, select:focus, .pp-select:focus, textarea:focus {
  box-shadow: 0 6px 18px rgba(217,119,6,0.09) !important;
  border-color: var(--override-btn-bg) !important;
  outline: none !important;
}

/* Buttons */
.pp-btn, .btn {
  background: var(--override-btn-bg) !important;
  color: var(--override-btn-color) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Links and muted text */
.pp-link, a, .pp-muted {
  color: var(--override-hero-muted) !important;
}

/* Ensure logo and headings remain visible */
.pp-logo { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }
.header-hero h1, .hero-grad h1 { text-shadow: 0 3px 10px rgba(0,0,0,0.65); }

/* Ensure form labels are readable */
label, .pp-muted, .pp-link { color: var(--override-hero-muted) !important; }

/* =========================================================
   Native select / option dark rules (fallback and best-effort)
   =========================================================
*/
select.pp-select, select {
  background: var(--override-select-bg) !important;
  color: var(--override-input-color) !important;
  border-radius: 10px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2.2rem !important;
}

/* Option styles (honored by many browsers) */
select.pp-select option, select option {
  background-color: var(--override-select-option-bg) !important;
  color: var(--override-select-option-color) !important;
}
select.pp-select option:checked, select option:checked {
  background-color: rgba(217,119,6,0.14) !important; /* subtle accent highlight */
  color: var(--override-select-option-color) !important;
}
select.pp-select option:hover, select option:hover {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--override-select-option-color) !important;
}

/* Firefox fallback */
@-moz-document url-prefix() {
  select.pp-select, select {
    box-shadow: none !important;
    background: var(--override-select-option-bg) !important;
  }
}

/* IE/Edge fallback */
select::-ms-expand { filter: invert(1) !important; }

/* Specific role control */
#pp-role, #pp-role option {
  background: var(--override-select-bg) !important;
  color: var(--override-input-color) !important;
}

/* Hide native select visually when replaced by custom control (keeps accessible) */
.cs-hidden-native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* =========================================================
   Custom select widget styles (used by assets/js/custom_select.js)
   ========================================================= */
.cs-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.cs-toggle {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--override-input-bg);
  color: var(--override-input-color);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  font-size: 1rem;
}
.cs-toggle:focus { outline: none; box-shadow: 0 6px 18px rgba(217,119,6,0.08); }

.cs-options {
  position: absolute;
  left: 0;
  right: 0;
  margin: 6px 0 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--override-select-option-bg);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  display: none;
  max-height: 260px;
  overflow: auto;
  z-index: 9999;
}
.cs-options.open { display: block; }

.cs-option {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--override-select-option-color);
}
.cs-option:hover, .cs-option:focus { background: rgba(255,255,255,0.03); outline: none; }
.cs-option.selected { background: rgba(217,119,6,0.12); color: var(--override-select-option-color); }

/* ensure options scroll nicely on mobile */
@media (max-width:520px) {
  .cs-options { max-height: 40vh; }
}