/* ======================================================================
  web/css/home.css — grouped and ordered for maintainability
  Sections:
    1) Theme variables
    2) Typography & Base
    3) Home / Hero / Features
    4) Buttons & Links
    5) Navbar & Header (grouped)
    6) Header controls (theme toggle)
    7) Dropdowns, Avatar, Toggler
    8) Cards / Panels
    9) Forms, Inputs & Placeholders (incl. autofill)
   10) Quick-try & QuickResult modal
   11) Tables / Calculator results
   12) Footer
  ====================================================================== */

/* -----------------------------
  1) Theme variables
  ----------------------------- */
.theme-vars-note {
  display: none;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --muted: #6c757d;
  --text: #212529;
  --primary: #0d6efd;
  --info: #0dcaf0;
  --info-overlay: rgba(13, 202, 240, 0.10);
  --alert-info-bg: rgba(13, 202, 240, 0.06);
  --alert-info-text: #000000;
  --alert-info-border: rgba(13, 202, 240, 0.12);
  --alert-info-header-bg: rgba(13, 202, 240, 0.14);
  --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --row-alt: rgba(0, 0, 0, 0.02);
}

/* Explicit theme classes to allow JS to toggle light/dark regardless of
   the user's OS `prefers-color-scheme`. These mirror the variable sets
   used for the two modes so switching `body.theme-dark` / `body.theme-light`
   fully updates colors site-wide. */
body.theme-light {
  --bg: #ffffff;
  --surface: #ffffff;
  --muted: #6c757d;
  --text: #212529;
  --primary: #0d6efd;
  --info: #0dcaf0;
  --info-overlay: rgba(13, 202, 240, 0.10);
  --alert-info-bg: rgba(13, 202, 240, 0.06);
  --alert-info-text: #000000;
  --alert-info-border: rgba(13, 202, 240, 0.12);
  --alert-info-header-bg: rgba(13, 202, 240, 0.14);
  --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --row-alt: rgba(0, 0, 0, 0.02);
}



body.theme-dark {
  --bg: #0b0c0d;
  --surface: #111214;
  --muted: #adb5bd;
  --text: #e9ecef;
  --primary: #66a6ff;
  --info: #5fe3f0;
  --info-overlay: rgba(95, 227, 240, 0.10);
  --alert-info-bg: rgba(103, 146, 255, 0.08);
  --alert-info-text: rgba(233, 238, 239, 0.95);
  --alert-info-border: rgba(127, 183, 255, 0.14);
  --alert-info-header-bg: rgba(127, 183, 255, 0.18);
  --card-shadow: none;
  --card-bg: #151617;
  --card-border: rgba(255, 255, 255, 0.06);
  --row-alt: rgba(255, 255, 255, 0.02);
  --bs-tertiary-bg: var(--card-bg);
  --bs-light: var(--card-bg);
  --bs-light-bg-subtle: var(--card-bg);
  --bs-light-border-subtle: var(--card-border);
}

/* Comprehensive mapping of `body.theme-dark` rules to prefers-color-scheme
   This ensures the app follows system dark mode even when JS theme class
   is not present. Duplicate important selectors with high specificity. */
@media (prefers-color-scheme: dark) {

  .btn-primary,
  .btn-success,
  .btn-danger,
  .btn-warning,
  .btn-info,
  .btn-secondary {
    color: #ffffff !important;
  }

  .navbar-system-theme {
    background-color: #111214;
  }

  .navbar-system-theme .navbar-brand,
  .navbar-system-theme .nav-link {
    color: #e9ecef;
  }

  #header .navbar-system-theme {
    background-color: #111214 !important;
    box-shadow: none !important;
  }

  #header .navbar-system-theme .navbar-brand,
  #header .navbar-system-theme .nav-link {
    color: #e9ecef !important;
  }

  .header-controls .btn:hover,
  .header-controls .btn:focus {
    background-color: rgba(255, 255, 255, 0.04) !important;
  }

  .navbar-system-theme .dropdown-menu {
    background-color: #131415 !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item {
    color: var(--text) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item:hover,
  .navbar-system-theme .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
  }

  .navbar-system-theme .nav-link.dropdown-toggle {
    color: var(--text) !important;
  }

  .user-avatar {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04);
  }

  input.form-control,
  textarea.form-control,
  .form-control,
  .card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  select.form-select,
  .form-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Tables and calculator results */
  table.calculator-results thead tr:nth-child(2) th,
  #quickResultModal table.calculator-results thead tr:nth-child(2) th {
    color: var(--text) !important;
    font-weight: 600 !important;
  }

  #quickResultModal .modal-content table.calculator-results tbody td,
  #quickResultModal table.calculator-results tbody td {
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text) !important;
    background: transparent !important;
  }

  #quickResultModal .modal-content table.calculator-results tbody tr:nth-child(odd),
  #quickResultModal table.calculator-results tbody tr:nth-child(odd) {
    background-color: var(--row-alt) !important;
  }

  /* Footer */
  #footer {
    border-top-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(233, 238, 239, 0.95) !important;
  }

  #footer a {
    color: #7fb7ff !important;
  }
}

/* Removed legacy JS-driven theme class support (theme is CSS-only now)
   `prefers-color-scheme` and CSS variables control both light/dark modes. */

/* Respect system-level dark mode preference when no JS theme class is present */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0d;
    --surface: #111214;
    --muted: #adb5bd;
    --text: #e9ecef;
    --primary: #66a6ff;
    --info: #5fe3f0;
    --info-overlay: rgba(95, 227, 240, 0.10);
    --alert-info-bg: rgba(103, 146, 255, 0.08);
    --alert-info-text: rgba(233, 238, 239, 0.95);
    --alert-info-border: rgba(127, 183, 255, 0.14);
    --alert-info-header-bg: rgba(127, 183, 255, 0.18);
    --card-shadow: none;
    --card-bg: #151617;
    --card-border: rgba(255, 255, 255, 0.06);
    --row-alt: rgba(255, 255, 255, 0.02);
    /* Mirror a few Bootstrap variables so built-in components follow dark theme */
    --bs-tertiary-bg: var(--card-bg);
    --bs-light: var(--card-bg);
    --bs-light-bg-subtle: var(--card-bg);
    --bs-light-border-subtle: var(--card-border);
  }
}

/*
  Mirror existing `body.theme-dark` selectors to ensure CSS-only dark
  theming via `prefers-color-scheme`. Placing this after other rules
  guarantees it applies even if legacy `body.theme-dark` selectors remain.
*/
@media (prefers-color-scheme: dark) {

  .btn-primary,
  .btn-success,
  .btn-danger,
  .btn-warning,
  .btn-info,
  .btn-secondary {
    color: #ffffff !important;
  }

  .navbar-system-theme {
    background-color: #111214 !important;
  }

  .navbar-system-theme .navbar-brand,
  .navbar-system-theme .nav-link {
    color: #e9ecef !important;
  }

  #header .navbar-system-theme {
    background-color: #111214 !important;
    box-shadow: none !important;
  }

  #header .navbar-system-theme .navbar-brand,
  #header .navbar-system-theme .nav-link {
    color: #e9ecef !important;
  }

  .header-controls .btn:hover,
  .header-controls .btn:focus {
    background-color: rgba(255, 255, 255, 0.04) !important;
  }

  .navbar-system-theme .dropdown-menu {
    background-color: #131415 !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item {
    color: var(--text) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item:hover,
  .navbar-system-theme .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
  }

  .navbar-system-theme .nav-link.dropdown-toggle {
    color: var(--text) !important;
  }

  .user-avatar {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  input.form-control,
  textarea.form-control,
  .form-control,
  .card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  select.form-select,
  .form-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .breadcrumb {
    background: transparent !important;
  }

  .breadcrumb .breadcrumb-item a {
    color: rgba(233, 238, 239, 0.85) !important;
  }

  .breadcrumb .breadcrumb-item {
    color: rgba(233, 238, 239, 0.75) !important;
  }

  .breadcrumb .breadcrumb-item.active {
    color: rgba(233, 238, 239, 0.95) !important;
    font-weight: 600;
  }

  /* Placeholder / autofill specifics */
  input::placeholder,
  textarea::placeholder,
  .form-control::placeholder {
    color: rgba(233, 238, 239, 0.55) !important;
    font-style: italic !important;
  }

  input.form-control::-webkit-input-placeholder,
  textarea.form-control::-webkit-input-placeholder,
  .form-control::-webkit-input-placeholder {
    color: rgba(233, 238, 239, 0.55) !important;
  }

  /* Quick-try number input styles */
  #quick-try-form input.number-input,
  #quick-try-form input.number-input:not(:focus) {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #quick-try-form input.number-input:focus,
  #quick-try-form input.number-input:focus-visible {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(102, 166, 255, 0.14) !important;
    box-shadow: 0 0 0 0.125rem rgba(102, 166, 255, 0.08) !important;
  }

  #quick-try-form input.number-input:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
  }

  .number-input::placeholder {
    color: rgba(233, 238, 239, 0.85) !important;
    opacity: 1 !important;
  }

  /* Tables / preview results */
  #preview-results .table {
    color: #e6e6e6 !important;
    background-color: #121212 !important;
    border-color: #222 !important;
  }

  #preview-results .table thead th {
    background-color: #0f0f0f !important;
    color: #e6e6e6 !important;
    border-color: #2b2b2b !important;
  }

  #preview-results .table tbody tr,
  #preview-results .table tbody td {
    background-color: #121212 !important;
    color: #e6e6e6 !important;
    border-top-color: #1f1f1f !important;
  }

  .upgrade-cta .alert a.btn {
    color: var(--text) !important;
  }

  .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* Minimal close button: plain white 'X', no background or border */
.alert-dismissible .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.65rem 0.45rem !important;
  color: inherit !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.alert-dismissible .btn-close::before {
  content: 'X';
  color: inherit;
}


/* -----------------------------
  2) Typography & Base
  ----------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text) !important;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

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

main#main .container {
  color: var(--text);
}

.muted-small {
  color: var(--muted);
  font-size: .95rem;
}


/* -----------------------------
  3) Home / Hero / Features
  ----------------------------- */
/* The hero gradient has been removed per user request. Use a neutral,
   theme-aware background so pages remain visually consistent. */
.home-hero {
  background: transparent;
  padding: 3.5rem 0;
}

.home-hero .hero-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
}

.home-hero {
  position: relative;
  overflow: visible;
}

.home-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text) !important;
}

.home-hero .lead {
  color: var(--muted);
}

.quick-try {
  max-width: 520px;
}

.features .feature-card {
  padding: 1.25rem;
  border-radius: 6px;
  background: var(--card-bg);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
}

.cta-row {
  background: color-mix(in srgb, var(--card-bg) 96%, transparent);
  padding: 2rem 0;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .home-hero {
    padding: 2rem 0;
  }

  .quick-try {
    max-width: 100%;
  }
}


/* -----------------------------
  4) Buttons & Links
  ----------------------------- */
a,
.nav-link {
  color: var(--primary);
}

button,
.btn {
  color: var(--text);
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary {
  color: #ffffff !important;
}

/* Light-mode tweaks for primary buttons to ensure visibility and contrast */
body.theme-light .btn-primary {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: rgba(13, 110, 253, 0.9) !important;
  box-shadow: 0 1px 0 rgba(13, 110, 253, 0.06) inset;
}

body.theme-light .btn-primary:hover,
body.theme-light .btn-primary:focus {
  background-color: rgba(13, 110, 253, 0.92) !important;
  border-color: rgba(13, 110, 253, 1) !important;
  filter: brightness(0.97) !important;
}

/* Ensure the profile 'Choose file' button uses the theme info color consistently */
#logo-choose-btn {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: #000000 !important;
}

#logo-choose-btn:hover,
#logo-choose-btn:focus {
  filter: brightness(0.98) !important;
}


/* -----------------------------
  5) Navbar & Header (grouped)
  ----------------------------- */
.navbar-system-theme {
  transition: background-color .18s ease, color .18s ease;
  width: 100%;
}

body.theme-light #header .navbar-system-theme {
  background-color: #ebebeb !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  color: #212529 !important;
}

body.theme-light #header .navbar-system-theme .navbar-brand,
body.theme-light #header .navbar-system-theme .nav-link {
  color: #212529 !important;
}

body.theme-light #header .navbar-system-theme .nav-link:hover {
  color: #0d6efd !important;
}

body.theme-dark #header .navbar-system-theme {
  background-color: #111214 !important;
  box-shadow: none !important;
}

body.theme-dark #header .navbar-system-theme .navbar-brand,
body.theme-dark #header .navbar-system-theme .nav-link {
  color: #e9ecef !important;
}

body.theme-dark #header .navbar-system-theme .nav-link:hover {
  color: #66a6ff !important;
}

body.theme-dark #header .navbar-system-theme .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

@media (min-width: 768px) {
  #header .navbar-system-theme {
    border: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  }
}

/* Form error styling: make validation messages stand out */
.invalid-feedback,
.help-block,
.form-text.text-danger {
  color: #dc3545 !important;
  font-style: italic !important;
}


#header {
  position: relative;
}


/* -----------------------------
  6) Header controls (theme toggle)
  ----------------------------- */
.header-controls {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 1060;
  right: 12px;
  padding-right: 4px;
}

@media (max-width: 1200px) {
  .header-controls {
    right: 12px;
  }
}

.header-controls .btn {
  padding: 4px !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.header-controls .btn:hover,
.header-controls .btn:focus {
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

body.theme-dark .header-controls .btn:hover,
body.theme-dark .header-controls .btn:focus {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.header-controls .fa,
.header-controls .fas,
.header-controls .far {
  font-size: 16px;
}


/* -----------------------------
  7) Dropdowns, Avatar, Toggler
  ----------------------------- */
.navbar-system-theme .dropdown-menu {
  background-color: #ffffff;
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar-system-theme .dropdown-menu .dropdown-item {
  color: #212529;
}

.navbar-system-theme .dropdown-menu .dropdown-item:hover,
.navbar-system-theme .dropdown-menu .dropdown-item:focus {
  background-color: rgba(13, 110, 253, 0.06);
  color: #0d6efd;
}

body.theme-dark .navbar-system-theme .dropdown-menu {
  background-color: #131415 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark .navbar-system-theme .dropdown-menu .dropdown-item {
  color: var(--text) !important;
}

body.theme-dark .navbar-system-theme .dropdown-menu .dropdown-item:hover,
body.theme-dark .navbar-system-theme .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
}

/* Ensure the user dropdown uses light styling when `body.theme-light` is set */
body.theme-light .navbar-system-theme .dropdown-menu {
  background-color: #ffffff !important;
  color: #212529 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .navbar-system-theme .dropdown-menu .dropdown-item {
  color: #212529 !important;
}

body.theme-light .navbar-system-theme .dropdown-menu .dropdown-item:hover,
body.theme-light .navbar-system-theme .dropdown-menu .dropdown-item:focus {
  background-color: rgba(13, 110, 253, 0.06) !important;
  color: #0d6efd !important;
}


.navbar-system-theme .nav-link.dropdown-toggle {
  color: inherit !important;
}

body.theme-dark .navbar-system-theme .nav-link.dropdown-toggle {
  color: var(--text) !important;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dee2e6;
  color: #212529;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.navbar-system-theme .nav-link .user-avatar {
  margin-right: 8px;
}

.user-avatar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 28px;
  margin-right: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.user-avatar-logo-img {
  display: block;
  max-width: 60px;
  max-height: 24px;
  width: auto;
  height: auto;
}

body.theme-dark .user-avatar {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

body.theme-dark .user-avatar-logo {
  background: rgba(255, 255, 255, 0.08);
}

/* Light-mode form controls: darker borders and placeholders for readability */
body.theme-light input.form-control,
body.theme-light textarea.form-control,
body.theme-light .form-control,
body.theme-light select.form-select,
body.theme-light .form-select {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

body.theme-light input.form-control:focus,
body.theme-light textarea.form-control:focus,
body.theme-light .form-control:focus,
body.theme-light select.form-select:focus,
body.theme-light .form-select:focus {
  border-color: rgba(13, 110, 253, 0.30) !important;
  box-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.06) !important;
}

/* Darker placeholder text in light mode */
body.theme-light input::placeholder,
body.theme-light textarea::placeholder,
body.theme-light .form-control::placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  opacity: 1 !important;
}


.nav-link.dropdown-toggle {
  gap: 6px;
}

.user-dropdown-toggle::after {
  display: none !important;
}

.navbar-system-theme .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.08);
}

.navbar-system-theme .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='%23212529' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

body.theme-dark .navbar-system-theme .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}


/* -----------------------------
  8) Cards / Panels
  ----------------------------- */
.home-hero .hero-card,
.features .feature-card,
.cta-row,
.quick-try,
.home-hero .hero-card .card,
.features .feature-card .card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Dashboard / Estimates table: ensure text is dark and readable in explicit light mode */
body.theme-light .bordered-table,
body.theme-light .bordered-table td,
body.theme-light .bordered-table th {
  color: #212529 !important;
}

/* Table header in light mode: use dark background and white text for visibility */
body.theme-light .bordered-table thead tr {
  background-color: #212529 !important;
}

body.theme-light .bordered-table thead th {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark input.form-control,
body.theme-dark textarea.form-control,
body.theme-dark .form-control,
body.theme-dark .card {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ensure selects (panel size dropdown) match theme surfaces */
select.form-select,
.form-select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--card-border);
}

select.form-select:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.125rem rgba(102, 166, 255, 0.08);
}

body.theme-dark select.form-select,
body.theme-dark .form-select {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.theme-light select.form-select,
body.theme-light .form-select {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Breadcrumbs in dark mode: increase contrast for links and active item */
body.theme-dark .breadcrumb {
  background: transparent !important;
}

body.theme-dark .breadcrumb .breadcrumb-item a {
  color: rgba(233, 238, 239, 0.85) !important;
}

body.theme-dark .breadcrumb .breadcrumb-item {
  color: rgba(233, 238, 239, 0.75) !important;
}

body.theme-dark .breadcrumb .breadcrumb-item.active {
  color: rgba(233, 238, 239, 0.95) !important;
  font-weight: 600;
}

/* Breadcrumbs in light mode: ensure sufficient contrast for links and active item */
body.theme-light .breadcrumb {
  background: transparent !important;
}

body.theme-light .breadcrumb .breadcrumb-item a {
  color: rgba(33, 37, 41, 0.72) !important;
}

body.theme-light .breadcrumb .breadcrumb-item {
  color: rgba(33, 37, 41, 0.6) !important;
}

body.theme-light .breadcrumb .breadcrumb-item.active {
  color: rgba(33, 37, 41, 0.92) !important;
  font-weight: 600;
}

/* Footer text readable in light mode */
body.theme-light #footer {
  color: rgba(33, 37, 41, 0.85) !important;
}

body.theme-light #footer a {
  color: rgba(33, 37, 41, 0.75) !important;
}

body.theme-light #footer .text-muted {
  color: rgba(33, 37, 41, 0.6) !important;
}

/* -----------------------------
  Settings tab styling
  Keep tabs neutral (not using primary button styles) and add small spacing
 ----------------------------- */
#settingsTab {
  display: flex;
  gap: 0.5rem;
}

/* Screenshot proof gallery */
.proof-gallery {
  max-width: 1120px;
}

.proof-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.proof-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #ffffff;
  border-bottom: 0;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

.proof-media:hover {
  transform: scale(1.01);
}

.proof-copy {
  padding: 0.85rem 0.95rem 0.95rem;
}

.proof-copy h6 {
  color: var(--text);
}

#proofPreviewModal .modal-body {
  position: relative;
}

body.theme-dark #proofPreviewModal .btn-close {
  background-color: transparent !important;
  border: 0;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}

body.theme-dark #proofPreviewModal .btn-close:hover,
body.theme-dark #proofPreviewModal .btn-close:focus {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  body:not(.theme-light) #proofPreviewModal .btn-close {
    background-color: transparent !important;
    border: 0;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
  }

  body:not(.theme-light) #proofPreviewModal .btn-close:hover,
  body:not(.theme-light) #proofPreviewModal .btn-close:focus {
    opacity: 1;
  }
}

#proofPreviewImage {
  background: #ffffff;
  border-color: #ffffff !important;
  box-shadow: none;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

.proof-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  z-index: 2;
}

.proof-modal-prev {
  left: 1rem;
}

.proof-modal-next {
  right: 1rem;
}

.proof-modal-nav:hover,
.proof-modal-nav:focus {
  background: var(--card-bg);
  border-color: color-mix(in srgb, var(--card-border) 60%, var(--text) 40%);
}

#settingsTab .nav-link {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--text) !important;
  padding: 0.45rem 0.75rem !important;
  margin-right: 0 !important;
  /* gap handles spacing */
  border-radius: 6px !important;
  box-shadow: none !important;
}

#settingsTab .nav-link.active {
  background: color-mix(in srgb, var(--card-bg) 85%, transparent) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text) !important;
}

@media (prefers-color-scheme: dark) {
  #settingsTab .nav-link {
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
  }

  #settingsTab .nav-link.active {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
  }
}


/* -----------------------------
  9) Forms, Inputs & Placeholders (incl. autofill)
  ----------------------------- */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder,
.form-control::-ms-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
  color: rgba(33, 37, 41, 0.45);
  font-style: italic;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark .form-control::placeholder,
body.theme-dark input:-ms-input-placeholder,
body.theme-dark textarea:-ms-input-placeholder,
body.theme-dark .form-control:-ms-input-placeholder,
body.theme-dark input::-ms-input-placeholder,
body.theme-dark textarea::-ms-input-placeholder,
body.theme-dark .form-control::-ms-input-placeholder,
body.theme-dark input::-webkit-input-placeholder,
body.theme-dark textarea::-webkit-input-placeholder,
body.theme-dark .form-control::-webkit-input-placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
  font-style: italic !important;
}

/* Stronger placeholder overrides with vendor prefixes and higher specificity
   to ensure italic placeholders and readable colors in both light/dark themes */
input.form-control::placeholder,
textarea.form-control::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  font-style: italic !important;
}

input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  font-style: italic !important;
}

input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder,
.form-control::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  font-style: italic !important;
}

input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  font-style: italic !important;
}

/* Dark theme: lighter, italic placeholders */
body.theme-dark input.form-control::placeholder,
body.theme-dark textarea.form-control::placeholder,
body.theme-dark .form-control::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
  font-style: italic !important;
}

body.theme-dark input.form-control::-webkit-input-placeholder,
body.theme-dark textarea.form-control::-webkit-input-placeholder,
body.theme-dark .form-control::-webkit-input-placeholder,
body.theme-dark input::-webkit-input-placeholder,
body.theme-dark textarea::-webkit-input-placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
  font-style: italic !important;
}

body.theme-dark input.form-control::-moz-placeholder,
body.theme-dark textarea.form-control::-moz-placeholder,
body.theme-dark .form-control::-moz-placeholder,
body.theme-dark input::-moz-placeholder,
body.theme-dark textarea::-moz-placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
  font-style: italic !important;
}

body.theme-dark input.form-control:-ms-input-placeholder,
body.theme-dark textarea.form-control:-ms-input-placeholder,
body.theme-dark .form-control:-ms-input-placeholder,
body.theme-dark input:-ms-input-placeholder,
body.theme-dark textarea:-ms-input-placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
  font-style: italic !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
.form-control::-moz-placeholder,
input:-moz-placeholder,
textarea:-moz-placeholder,
.form-control:-moz-placeholder {
  color: rgba(33, 37, 41, 0.45);
}

body.theme-dark input::-moz-placeholder,
body.theme-dark textarea::-moz-placeholder,
body.theme-dark .form-control::-moz-placeholder,
body.theme-dark input:-moz-placeholder,
body.theme-dark textarea:-moz-placeholder,
body.theme-dark .form-control:-moz-placeholder {
  color: rgba(233, 238, 239, 0.55) !important;
}

/* quick-try / number input specifics */
#quick-try-form input[name="total_sqft"]::placeholder,
#quick-try-form input[name="total_sqft"]::-webkit-input-placeholder,
#quick-try-form input[name="total_sqft"]:-ms-input-placeholder,
#quick-try-form input[name="total_sqft"]::-ms-input-placeholder {
  color: rgba(233, 238, 239, 0.9) !important;
  opacity: 1 !important;
}

body.theme-dark #quick-try-form input.number-input,
body.theme-dark #quick-try-form input.number-input:not(:focus) {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark #quick-try-form input.number-input:focus,
body.theme-dark #quick-try-form input.number-input:focus-visible {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(102, 166, 255, 0.14) !important;
  box-shadow: 0 0 0 0.125rem rgba(102, 166, 255, 0.08) !important;
  outline: none !important;
}

body.theme-dark #quick-try-form input.number-input:-webkit-autofill,
body.theme-dark #quick-try-form input.number-input:-webkit-autofill:focus,
body.theme-dark #quick-try-form input.number-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
}

@keyframes onAutoFillStart {
  from {
    opacity: 0.99;
  }

  to {
    opacity: 1;
  }
}

body.theme-dark #quick-try-form input.number-input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}

body.theme-dark input.number-input:-webkit-autofill,
body.theme-dark input.number-input:-webkit-autofill:focus,
body.theme-dark input.number-input:-webkit-autofill:hover,
body.theme-dark input.number-input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
  background-clip: padding-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

body.theme-dark input.number-input:-webkit-autofill::first-line {
  -webkit-text-fill-color: var(--text) !important;
}

body.theme-dark input.number-input::first-line {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Autofill support when user prefers dark and body lacks theme class */
@media (prefers-color-scheme: dark) {

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill:focus,
  input:-internal-autofill-selected,
  textarea:-internal-autofill-selected {
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    background-clip: padding-box !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }

  input:-webkit-autofill::first-line,
  textarea:-webkit-autofill::first-line {
    -webkit-text-fill-color: var(--text) !important;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill:focus,
  input:-internal-autofill-selected,
  textarea:-internal-autofill-selected {
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    background-clip: padding-box !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }
}

/* Settings action bar: place Profile on the left and Save on the right */
.settings-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.75rem;
}

.settings-actions .settings-actions-left {
  display: flex;
  align-items: center;
}

.settings-actions .settings-actions-right {
  display: flex;
  align-items: center;
}

body.theme-dark .hero-card #quick-try-form input.number-input,
body.theme-dark .quick-try #quick-try-form input.number-input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.number-input {
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

.number-input::placeholder,
.number-input::-webkit-input-placeholder,
.number-input::-moz-placeholder,
.number-input:-ms-input-placeholder,
.number-input::-ms-input-placeholder {
  color: rgba(33, 37, 41, 0.45) !important;
  opacity: 1 !important;
}

body.theme-dark .number-input::placeholder,
body.theme-dark .number-input::-webkit-input-placeholder,
body.theme-dark .number-input::-moz-placeholder,
body.theme-dark .number-input:-ms-input-placeholder,
body.theme-dark .number-input::-ms-input-placeholder {
  color: rgba(233, 238, 239, 0.85) !important;
  opacity: 1 !important;
}

.simple-experiment .number-input {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}

#quick-try-form .number-input {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}


/* -----------------------------
  10) Quick-try & QuickResult modal
  ----------------------------- */
#quickResultModal .modal-dialog {
  max-width: 75vw !important;
  width: 75vw !important;
}

@media (max-width: 768px) {
  #quickResultModal .modal-dialog {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
  }
}

#quickResultModal .modal-footer .btn-link {
  color: #ffffff !important;
  background-color: var(--primary) !important;
  border: 1px solid transparent !important;
  padding: .375rem .75rem !important;
  border-radius: .25rem !important;
  text-decoration: none !important;
}

#quickResultModal .modal-footer .btn-link:hover {
  filter: brightness(0.95) !important;
  text-decoration: none !important;
}

#quickResultModal .modal-content {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

#quickResultModal .modal-header,
#quickResultModal .modal-body,
#quickResultModal .modal-footer {
  background: transparent !important;
  color: inherit !important;
}

#quickResultModal .modal-title {
  color: var(--text) !important;
}

#quickResultModal .muted-small,
#quickResultModal .text-muted {
  color: var(--muted) !important;
}

/* Global upgrade CTA — applies to both page and modal views */
.upgrade-cta .alert {
  background: color-mix(in srgb, var(--card-bg) 88%, transparent) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
}

.upgrade-cta .alert a.btn {
  color: #000 !important;
}

@media (prefers-color-scheme: dark) {
  .upgrade-cta .alert a.btn {
    color: var(--text) !important;
  }
}

body.theme-dark .upgrade-cta .alert a.btn {
  color: var(--text) !important;
}

/* Ensure upgrade CTA buttons are readable in explicit light mode */
body.theme-light .upgrade-cta .alert a.btn {
  color: #ffffff !important;
}

body.theme-dark .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

#quickResultModal table.calculator-results,
#quickResultModal .modal-content table.calculator-results {
  width: 100% !important;
  color: var(--text) !important;
  border-collapse: collapse !important;
  border: 1px solid var(--card-border) !important;
  background: transparent !important;
}

#quickResultModal .modal-content table.calculator-results thead th,
#quickResultModal table.calculator-results thead th {
  background-color: var(--alert-info-header-bg) !important;
  color: var(--alert-info-text) !important;
  border: none !important;
  vertical-align: middle !important;
}

#quickResultModal .modal-content table.calculator-results tbody td,
#quickResultModal table.calculator-results tbody td {
  border-bottom: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  background: transparent !important;
}

#quickResultModal .modal-content table.calculator-results tbody tr:nth-child(odd),
#quickResultModal table.calculator-results tbody tr:nth-child(odd) {
  background-color: var(--row-alt) !important;
}

#quickResultModal table.calculator-results tbody tr:nth-child(even) {
  background: transparent !important;
}

#quickResultModal .modal-content table.calculator-results tbody tr:hover,
#quickResultModal table.calculator-results tbody tr:hover {
  background-color: var(--info-overlay) !important;
}

/* Ensure quick-result / calculator table hover is visible in light-mode
   even if other styles override color variables or body.theme-light is not set. */
@media (prefers-color-scheme: light) {

  #quickResultModal .modal-content table.calculator-results tbody tr:hover,
  #quickResultModal table.calculator-results tbody tr:hover {
    background-color: rgba(102, 166, 255, 0.12) !important;
    color: #212529 !important;
  }
}

/* Also support explicit theme class */
body.theme-light #quickResultModal .modal-content table.calculator-results tbody tr:hover,
body.theme-light #quickResultModal table.calculator-results tbody tr:hover {
  background-color: rgba(102, 166, 255, 0.12) !important;
  color: #212529 !important;
}

#quickResultModal .modal-content table.calculator-results .muted-small,
#quickResultModal .modal-content table.calculator-results .text-muted,
#quickResultModal table.calculator-results .muted-small,
#quickResultModal table.calculator-results .text-muted {
  color: var(--muted) !important;
}

@media (max-width: 576px) {
  #quickResultModal table.calculator-results thead th {
    font-size: .9rem !important;
    padding: .4rem !important;
  }
}


/* -----------------------------
  11) Tables / Calculator results (grouped)
  ----------------------------- */
table.calculator-results,
.calculator-results.table {
  width: 100% !important;
  color: var(--text) !important;
  border-collapse: collapse !important;
  border: 1px solid var(--card-border) !important;
  background: transparent !important;
}

/* Table header background and text color: use overridable CSS variables so themes can control contrast */
/* Make calculator table header match the modal header style so inline and modal
   results render identically. Uses alert header variables which adjust per-theme. */
table.calculator-results thead th,
.calculator-results thead th {
  background: var(--alert-info-header-bg, var(--table-header-bg, var(--primary))) !important;
  color: var(--alert-info-text, var(--table-header-text, #ffffff)) !important;
  border: none !important;
  vertical-align: middle !important;
}

table.calculator-results tbody td,
.calculator-results tbody td {
  border-bottom: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  background: transparent !important;
}

table.calculator-results tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--card-bg) 96%, transparent) !important;
}

table.calculator-results tbody tr:nth-child(even) {
  background: transparent !important;
}

table.calculator-results tbody tr:hover {
  background: color-mix(in srgb, var(--card-bg) 88%, var(--muted) 6%) !important;
}

table.calculator-results .muted-small,
table.calculator-results .text-muted,
.calculator-results .muted-small,
.calculator-results .text-muted {
  color: var(--muted) !important;
}

@media (max-width: 576px) {
  table.calculator-results thead th {
    font-size: .95rem !important;
    padding: .45rem !important;
  }
}

/* Light-mode: make calculator results header lighter for better contrast */
@media (prefers-color-scheme: light) {

  table.calculator-results thead th,
  .calculator-results thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* Make calculator quick results header match the dashboard dark header in light mode */
  body.theme-light table.calculator-results thead tr,
  body.theme-light #quickResultModal table.calculator-results thead tr {
    background-color: #212529 !important;
  }

  body.theme-light table.calculator-results thead th,
  body.theme-light #quickResultModal table.calculator-results thead th {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
}

/* Also support explicit light body class — prefer dashboard-style dark header for app data tables */
body.theme-light table.calculator-results thead th,
body.theme-light .calculator-results thead th,
body.theme-light .app-data-table thead th {
  background-color: #212529 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Use theme variables for table header/text colors in dark mode for proper contrast */
body.theme-dark table.calculator-results thead tr:nth-child(2) th,
body.theme-dark #quickResultModal table.calculator-results thead tr:nth-child(2) th {
  color: var(--text) !important;
  font-weight: 600 !important;
}

body.theme-dark table.calculator-results thead tr:nth-child(2) th .muted-small,
body.theme-dark #quickResultModal table.calculator-results thead tr:nth-child(2) th .muted-small {
  color: var(--muted) !important;
}


/* -----------------------------
  12) Footer
  ----------------------------- */
#footer {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

body.theme-dark #footer {
  border-top-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(233, 238, 239, 0.95) !important;
}

body.theme-dark #footer,
body.theme-dark #footer p,
body.theme-dark #footer small,
body.theme-dark #footer .muted-small,
body.theme-dark #footer .text-muted,
body.theme-dark #footer li,
body.theme-dark #footer span {
  color: rgba(233, 238, 239, 0.92) !important;
}

#footer a {
  color: var(--primary) !important;
}

body.theme-dark #footer a {
  color: #7fb7ff !important;
}

/* Mirror body.theme-dark overrides when user prefers dark via OS setting */
@media (prefers-color-scheme: dark) {

  input.form-control,
  textarea.form-control,
  .form-control,
  .card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  select.form-select,
  .form-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .header-controls .btn:hover,
  .header-controls .btn:focus {
    background-color: rgba(255, 255, 255, 0.04) !important;
  }

  .navbar-system-theme .dropdown-menu {
    background-color: #131415 !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item {
    color: var(--text) !important;
  }

  .navbar-system-theme .dropdown-menu .dropdown-item:hover,
  .navbar-system-theme .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
  }

  .user-avatar {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.04);
  }

  body,
  main#main .container {
    background-color: var(--bg) !important;
    color: var(--text) !important;
  }

  #footer {
    border-top-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(233, 238, 239, 0.95) !important;
  }

  #footer a {
    color: #7fb7ff !important;
  }
}


/* -----------------------------
  Preview / Estimate page overrides (moved from inline styles in views/estimate/estimate.php)
  These ensure preview tables and controls respect site theme classes (`theme-dark` / `dark-mode`) and
  the prefers-color-scheme media query. Keeping these in the stylesheet avoids inline CSS conflicts.
  ----------------------------- */

/* originally hid rooms by default (quick mode) - change to visible so HTMX-inserted partials display */
#rooms-container {
  display: block;
}

/* Reserve space for labor controls to avoid layout shifting */
.labor-column {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Light-mode overrides for preview/result tables */
@media (prefers-color-scheme: light) {

  /* System light preference: ensure preview tables use light backgrounds */
  #preview-results table {
    background: transparent !important;
  }

  #preview-results table tbody tr:nth-child(odd) {
    background: #f8f9fa !important;
  }

  #preview-results table tbody tr:nth-child(even) {
    background: transparent !important;
  }

  #preview-results table th,
  #preview-results table td {
    color: #212529 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
  }

  /* Generic light-mode fallback for all .table inside the main container */
  main#main .container table.table tbody tr:nth-child(odd) {
    background: #f8f9fa !important;
  }

  main#main .container table.table th,
  main#main .container table.table td {
    color: #212529 !important;
  }
}

/* Also keep explicit body.theme-light selectors for pages that set the class */
/* Explicit light-mode preview table selectors removed — no overrides present */

.labor-column .form-check {
  margin-right: .5rem;
}

/* The sheet-size and scope selects should adapt to dark/light themes */
#EstimateForm-sheet-size.form-select,
#EstimateForm-scope-choice.form-select {
  transition: background-color .15s, color .15s, border-color .15s;
}

/* Respect user's OS preference for dark mode */
@media (prefers-color-scheme: dark) {

  #EstimateForm-sheet-size.form-select,
  #EstimateForm-scope-choice.form-select {
    background-color: #2b2b2b;
    color: #e6e6e6;
    border-color: #444;
  }

  #EstimateForm-sheet-size.form-select option,
  #EstimateForm-scope-choice.form-select option {
    background-color: #2b2b2b;
    color: #e6e6e6;
  }
}

/* Also support an explicit .dark-mode or .theme-dark body class */
body.theme-dark #EstimateForm-sheet-size.form-select,
.theme-dark #EstimateForm-sheet-size.form-select,
body.dark-mode #EstimateForm-sheet-size.form-select,
.dark-mode #EstimateForm-sheet-size.form-select,
body.theme-dark #EstimateForm-scope-choice.form-select,
.theme-dark #EstimateForm-scope-choice.form-select,
body.dark-mode #EstimateForm-scope-choice.form-select,
.dark-mode #EstimateForm-scope-choice.form-select {
  background-color: #2b2b2b;
  color: #e6e6e6;
  border-color: #444;
}

body.theme-dark #EstimateForm-sheet-size.form-select option,
.theme-dark #EstimateForm-sheet-size.form-select option,
body.dark-mode #EstimateForm-sheet-size.form-select option,
.dark-mode #EstimateForm-sheet-size.form-select option,
body.theme-dark #EstimateForm-scope-choice.form-select option,
.theme-dark #EstimateForm-scope-choice.form-select option,
body.dark-mode #EstimateForm-scope-choice.form-select option,
.dark-mode #EstimateForm-scope-choice.form-select option {
  background-color: #2b2b2b;
  color: #e6e6e6;
}

/* Preview tables: adapt to dark mode for readability */
#preview-results h5,
#preview-results h6,
#preview-results p {
  transition: color .15s;
}

@media (prefers-color-scheme: dark) {

  #preview-results h5,
  #preview-results h6,
  #preview-results p {
    color: #e6e6e6;
  }

  /* Dark mode: dark background, light text for table and rows */
  #preview-results .table {
    color: #e6e6e6;
    background-color: #121212;
    border-color: #222;
  }

  #preview-results .table thead th {
    background-color: #0f0f0f;
    color: #e6e6e6;
    border-color: #2b2b2b;
  }

  #preview-results .table tbody tr {
    background-color: #121212;
    color: #e6e6e6;
  }

  #preview-results .table tbody td,
  #preview-results .table tbody th {
    border-top-color: #1f1f1f;
    color: #e6e6e6;
  }
}

/* Strong overrides to ensure Bootstrap doesn't force light rows in dark mode */
@media (prefers-color-scheme: dark) {

  #preview-results .table,
  #preview-results .table tbody tr,
  #preview-results .table tbody td,
  #preview-results .table tbody th,
  #preview-results .table thead th {
    background-color: #121212 !important;
    color: #e6e6e6 !important;
    border-color: #222 !important;
  }

  #preview-results .table thead th {
    background-color: #0f0f0f !important;
  }
}

/* Light-mode defaults: ensure readable light backgrounds and dark text */
#preview-results .table {
  color: #212529;
  background-color: #ffffff;
  border-color: #dee2e6;
}

#preview-results .table thead th {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #dee2e6;
}

#preview-results .table tbody tr {
  background-color: #ffffff;
  color: #212529;
}

#preview-results .table tbody td,
#preview-results .table tbody th {
  border-top-color: #e9ecef;
  color: #212529;
}

/* Also apply when an explicit .dark-mode or .theme-dark class is present on body */
body.theme-dark #preview-results h5,
.theme-dark #preview-results h5,
body.dark-mode #preview-results h5,
.dark-mode #preview-results h5,
body.theme-dark #preview-results h6,
.theme-dark #preview-results h6,
body.dark-mode #preview-results h6,
.dark-mode #preview-results h6,
body.theme-dark #preview-results p,
.theme-dark #preview-results p,
body.dark-mode #preview-results p,
.dark-mode #preview-results p {
  color: #e6e6e6;
}

body.theme-dark #preview-results .table,
.theme-dark #preview-results .table,
body.dark-mode #preview-results .table,
.dark-mode #preview-results .table {
  color: #e6e6e6;
  background-color: #121212;
  border-color: #222;
}

body.theme-dark #preview-results .table thead th,
.theme-dark #preview-results .table thead th,
body.dark-mode #preview-results .table thead th,
.dark-mode #preview-results .table thead th {
  background-color: #0f0f0f;
  color: #e6e6e6;
  border-color: #2b2b2b;
}

body.theme-dark #preview-results .table tbody tr,
.theme-dark #preview-results .table tbody tr,
body.dark-mode #preview-results .table tbody tr,
.dark-mode #preview-results .table tbody tr {
  background-color: #121212;
  color: #e6e6e6;
}

body.theme-dark #preview-results .table tbody td,
.theme-dark #preview-results .table tbody td,
body.dark-mode #preview-results .table tbody td,
.dark-mode #preview-results .table tbody td {
  border-top-color: #1f1f1f;
  color: #e6e6e6;
}

body.theme-dark #preview-results .table,
.theme-dark #preview-results .table,
body.theme-dark #preview-results .table tbody tr,
.theme-dark #preview-results .table tbody tr,
body.theme-dark #preview-results .table tbody td,
.theme-dark #preview-results .table tbody td,
body.theme-dark #preview-results .table thead th,
.theme-dark #preview-results .table thead th {
  background-color: #121212 !important;
  color: #e6e6e6 !important;
  border-color: #222 !important;
}

body.theme-dark #preview-results .table thead th,
.theme-dark #preview-results .table thead th {
  background-color: #0f0f0f !important;
}

/* Explicit light-theme preview overrides so prefers-color-scheme dark rules do not leak into forced light mode */
body.theme-light #preview-results .card,
body.theme-light #preview-results .card-body {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}

body.theme-light #preview-results .table,
body.theme-light #preview-results .table tbody tr,
body.theme-light #preview-results .table tbody td,
body.theme-light #preview-results .table tbody th,
body.theme-light #preview-results .table thead th {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

body.theme-light #preview-results .table thead th {
  background-color: #f8f9fa !important;
}

body.theme-light #preview-results .text-muted {
  color: #6c757d !important;
}

/* Strong dark-mode overrides applied when user prefers dark */
@media (prefers-color-scheme: dark) {

  /* Ensure odd table rows inside main container use dark alt color */
  main#main .container table.table tbody tr:nth-child(odd) {
    background: var(--row-alt) !important;
    color: var(--text) !important;
    border-color: var(--card-border) !important;
  }

  /* Preview-specific small table overrides */
  #preview-results .table,
  #preview-results .table tbody tr,
  #preview-results .table tbody td,
  #preview-results .table thead th {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--card-border) !important;
  }

  /* Form controls (inputs/selects) when user prefers dark */
  input.form-control,
  textarea.form-control,
  .form-control,
  select.form-select,
  .form-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
}

/* Ensure Preview button hover shows in case global styles override Bootstrap */
#submit-estimate.btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

#submit-estimate.btn-secondary:hover,
#submit-estimate.btn-secondary:focus {
  background-color: #5c636a !important;
  border-color: #545b61 !important;
  color: #fff !important;
}


/* Small preview help line readability */

/* Select / option dark-mode fixes
   Some browsers render native select dropdowns with bright option backgrounds.
   Provide strong rules for selects and option elements when user prefers dark. */
@media (prefers-color-scheme: dark) {

  select,
  select.form-select,
  .form-select {
    color: var(--text) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    -webkit-text-fill-color: var(--text) !important;
  }

  /* Options inside selects (where supported) */
  select option,
  .form-select option,
  select.form-select option,
  optgroup,
  .form-select optgroup {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
  }

  /* Focus/active states (use subtle highlight) */
  select:focus,
  select.form-select:focus,
  .form-select:focus {
    box-shadow: 0 0 0 0.125rem rgba(102, 166, 255, 0.06) !important;
    outline: none !important;
  }

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

/* Footer: ensure dark background and readable text in dark mode
   Target only the footer (and when it uses .bg-light) to avoid changing .bg-light globally. */
@media (prefers-color-scheme: dark) {

  #footer,
  #footer .container {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-top-color: rgba(255, 255, 255, 0.03) !important;
  }

  /* If footer was using Bootstrap's .bg-light, override locally */
  #footer.bg-light {
    background-color: var(--surface) !important;
  }

  #footer .row.text-muted,
  #footer .text-muted {
    color: rgba(233, 238, 239, 0.85) !important;
  }

  #footer a {
    color: #7fb7ff !important;
  }
}

/* Placeholder fixes for estimate quick-area and general form controls in dark mode */
@media (prefers-color-scheme: dark) {

  /* Specific quick-area input placeholder */
  #EstimateForm-quick-area::placeholder,
  #EstimateForm-quick-area::-webkit-input-placeholder,
  #EstimateForm-quick-area:-ms-input-placeholder,
  #EstimateForm-quick-area::-ms-input-placeholder {
    color: rgba(233, 238, 239, 0.7) !important;
    opacity: 1 !important;
  }

  /* General form control placeholders (inputs, textareas) */
  input.form-control::placeholder,
  textarea.form-control::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: rgba(233, 238, 239, 0.55) !important;
    opacity: 1 !important;
  }

  /* Ensure webkit text fill for placeholders remains readable */
  input.form-control:-webkit-autofill::first-line,
  input.form-control:-webkit-autofill,
  textarea.form-control:-webkit-autofill::first-line,
  textarea.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
  }
}

#preview-results .preview-help {
  color: var(--muted);
  font-weight: 500;
}

body.theme-dark #preview-results .preview-help,
.theme-dark #preview-results .preview-help,
body.dark-mode #preview-results .preview-help,
.dark-mode #preview-results .preview-help {
  color: rgba(233, 238, 239, 0.96) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}