/* ==========================================================================
   Car Services — global polish layer (polish.css)
   --------------------------------------------------------------------------
   Loaded once, right after theme.css, by the shared header partials — so every
   page that uses the site chrome gets the same refinement without per-page
   work.

   Ground rules (deliberate, please keep):
   - VISUAL-ONLY properties: colour, border, radius, shadow, transition,
     typography. No display / position / size changes on generic selectors,
     so no existing layout can move or break.
   - Every colour comes from theme.css tokens (with literal fallbacks), so the
     palette stays exactly the brand navy #172a74 / teal #21a9af family.
   - Low specificity, no !important — any page that intentionally styles a
     component keeps winning.
   - All added motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---- 0. Reclaim the brand tokens Bootstrap hijacks -------------------------
   Bootstrap 4 declares :root { --blue:#007bff; --teal:#20c997; ... } and its
   stylesheet usually loads after each page's own <style> block — so every page
   that uses var(--blue)/var(--teal) as its BRAND token silently renders
   Bootstrap's palette instead (verified live on /marketplace: --blue resolved
   to #007bff, turning all Browse/Search buttons off-brand). polish.css loads
   after Bootstrap, so re-declaring here restores the brand everywhere. */
:root {
  --blue: var(--color-primary-blue, #172a74);
  --teal: var(--color-primary-teal, #21a9af);
}

/* ---- 1. Typography rhythm ------------------------------------------------
   NOTE: no `color` on headings — many pages set white headings over the brand
   gradient, and a global colour would flip them dark (verified live before
   removal). Rhythm only. */
h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h4, h5, h6, .h4, .h5, .h6 {
  line-height: 1.3;
}
p {
  line-height: 1.65;
}
small, .small {
  line-height: 1.5;
}
hr {
  border-top-color: var(--color-border-alt, #e5e7eb);
}
::selection {
  background: color-mix(in srgb, var(--color-primary-teal, #21a9af) 25%, #ffffff);
  color: var(--color-text-dark, #1f2937);
}

/* ---- 2. Navbar legibility -------------------------------------------------
   Bootstrap's navbar-dark leaves links at 50% white, which reads washed-out
   over the brand gradient. Lift resting/hover/active states. */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--transition-fast, 120ms ease), opacity var(--transition-fast, 120ms ease);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  font-weight: var(--font-weight-semibold, 600);
}
.navbar-dark .navbar-brand {
  letter-spacing: 0.04em;
}

/* ---- 3. Forms — one consistent, modern control style --------------------- */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  border-color: var(--color-border, #d1d5db);
  border-radius: var(--radius, 8px);
  color: var(--color-text-dark, #1f2937);
  transition: border-color var(--transition-fast, 120ms ease),
    box-shadow var(--transition-fast, 120ms ease);
}
.form-control::placeholder,
textarea::placeholder {
  color: var(--color-text-light, #6b7280);
  opacity: 0.8;
}
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
  border-color: var(--color-primary-teal, #21a9af);
  box-shadow: 0 0 0 0.2rem rgba(33, 169, 175, 0.18);
  outline: none;
}
/* Weight only — labels also appear over dark hero forms, so no colour here */
label,
.form-label,
.col-form-label {
  font-weight: var(--font-weight-medium, 500);
}
.form-text,
.invalid-feedback,
.valid-feedback {
  line-height: 1.4;
}
/* Native date/number pickers inherit the same face */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="number"].form-control {
  color: var(--color-text-dark, #1f2937);
}

/* ---- 4. Buttons ----------------------------------------------------------- */
.btn {
  border-radius: var(--radius, 8px);
  transition: transform var(--transition-fast, 120ms ease),
    box-shadow var(--transition-fast, 120ms ease),
    background-color var(--transition-fast, 120ms ease),
    border-color var(--transition-fast, 120ms ease),
    color var(--transition-fast, 120ms ease),
    filter var(--transition-fast, 120ms ease);
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary-teal, #21a9af);
  outline-offset: 2px;
  box-shadow: none;
}
/* Brand-align Bootstrap's default blue primary with the palette navy */
.btn-primary {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover, #153066);
  border-color: var(--color-primary-hover, #153066);
}
.btn-primary:not(:disabled):active {
  background-color: #101f56;
  border-color: #101f56;
}
.btn-outline-primary {
  color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
  color: #fff;
}
.btn-info {
  background-color: var(--color-primary-teal, #21a9af);
  border-color: var(--color-primary-teal, #21a9af);
}
.btn-info:hover,
.btn-info:focus {
  background-color: #1a9196;
  border-color: #1a9196;
}
.btn-link {
  color: var(--color-primary-blue, #172a74);
}
.btn-link:hover {
  color: var(--color-primary-teal, #21a9af);
}

/* ---- 5. Cards & panels ----------------------------------------------------- */
.card {
  border-color: var(--color-border-alt, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  transition: box-shadow var(--transition, 240ms ease);
}
.card-header {
  border-bottom-color: var(--color-border-alt, #e5e7eb);
}
.card-footer {
  border-top-color: var(--color-border-alt, #e5e7eb);
}

/* ---- 6. Tables -------------------------------------------------------------- */
.table thead th {
  border-bottom: 2px solid var(--color-border-alt, #e5e7eb);
  color: var(--color-text-dark, #1f2937);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table td,
.table th {
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: rgba(33, 169, 175, 0.05);
}

/* ---- 7. Bootstrap components — dropdowns, modals, alerts, badges, nav-pills */
.dropdown-menu {
  border-color: var(--color-border-alt, #e5e7eb);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}
.dropdown-item {
  transition: background-color var(--transition-fast, 120ms ease),
    color var(--transition-fast, 120ms ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(33, 169, 175, 0.1);
  color: var(--color-text-dark, #1f2937);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary-blue, #172a74);
  color: #fff;
}
.modal-content {
  border: none;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(16, 25, 47, 0.18));
}
.modal-header {
  border-bottom-color: var(--color-border-alt, #e5e7eb);
}
.modal-footer {
  border-top-color: var(--color-border-alt, #e5e7eb);
}
.alert {
  border-radius: var(--radius, 8px);
}
.badge {
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
}
.badge-primary {
  background-color: var(--color-primary-blue, #172a74);
}
.badge-info {
  background-color: var(--color-primary-teal, #21a9af);
}
.nav-pills .nav-link.active {
  background-color: var(--color-primary-blue, #172a74);
}
.nav-tabs .nav-link.active {
  color: var(--color-primary-blue, #172a74);
  font-weight: var(--font-weight-semibold, 600);
}
.page-item.active .page-link {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.page-link {
  color: var(--color-primary-blue, #172a74);
}
.page-link:hover {
  color: var(--color-primary-hover, #153066);
  background-color: rgba(33, 169, 175, 0.08);
}
.progress-bar {
  background-color: var(--color-primary-teal, #21a9af);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-primary-teal, #21a9af);
  border-color: var(--color-primary-teal, #21a9af);
}

/* ---- 8. Footer refinement --------------------------------------------------- */
footer.footer a {
  transition: color var(--transition-fast, 120ms ease), opacity var(--transition-fast, 120ms ease);
}
footer.footer a:hover {
  color: var(--color-primary-teal, #21a9af);
  text-decoration: none;
}

/* ---- 9. Details: scrollbar, images, disabled states ------------------------- */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-bg-alt, #f8fafc);
  }
  ::-webkit-scrollbar-thumb {
    background: #c3cad6;
    border-radius: 8px;
    border: 2px solid var(--color-bg-alt, #f8fafc);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9aa6b8;
  }
}
.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
}
img {
  object-position: center;
}

/* ---- 10. Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .dropdown-item,
  .form-control,
  .custom-select,
  .navbar-dark .navbar-nav .nav-link,
  footer.footer a {
    transition: none;
  }
}