/* ============================================================
   VIENNA V182 — THEME CONTRAST AUTHORITY
   Objetivo:
   - Black: texto principal realmente branco/claro em TODA a UI.
   - White: texto principal realmente escuro em TODA a UI.
   - Preserva laranja da marca e cores semânticas (erro/sucesso/alerta).
   - Carregado por último para neutralizar regras antigas hard-coded.
   ============================================================ */

:root,
html[data-rairo-theme="light"] {
  color-scheme: light;
  --vt-bg: #FFF8F2;
  --vt-surface: #FFFFFF;
  --vt-surface-2: #FFFDFB;
  --vt-surface-3: #F7F2EE;
  --vt-text: #27231F;
  --vt-text-2: #4E4741;
  --vt-muted: #706861;
  --vt-placeholder: #9A9088;
  --vt-line: rgba(39,35,31,.10);
  --vt-primary: #F59A62;
  --vt-primary-light: #FFC39B;
  --vt-primary-dark: #D9703F;

  /* aliases usados por CSS legado / mapa */
  --text: var(--vt-text);
  --muted: var(--vt-muted);
  --muted-2: var(--vt-placeholder);
  --rairo-ink: var(--vt-text);
  --rairo-muted: var(--vt-muted);
  --rairo-bg: var(--vt-bg);
  --rairo-card: var(--vt-surface);
  --rairo-card-2: var(--vt-surface-2);
  --vg-bg: var(--vt-bg);
  --vg-surface: rgba(255,255,255,.965);
  --vg-surface-solid: var(--vt-surface);
  --vg-surface-soft: var(--vt-surface-2);
  --vg-surface-glass: rgba(255,255,255,.90);
  --vg-text: var(--vt-text);
  --vg-text-2: var(--vt-text-2);
  --vg-muted: var(--vt-muted);
}

html[data-rairo-theme="black"] {
  color-scheme: dark;
  --vt-bg: #171512;
  --vt-surface: #211E1B;
  --vt-surface-2: #27231F;
  --vt-surface-3: #302B27;
  --vt-text: #FFF8F2;
  --vt-text-2: #E8DED7;
  --vt-muted: #BFB4AC;
  --vt-placeholder: #938981;
  --vt-line: rgba(255,248,242,.11);
  --vt-primary: #F59A62;
  --vt-primary-light: #FFC39B;
  --vt-primary-dark: #D9703F;

  --text: var(--vt-text);
  --muted: var(--vt-muted);
  --muted-2: var(--vt-placeholder);
  --rairo-ink: var(--vt-text);
  --rairo-muted: var(--vt-muted);
  --rairo-bg: var(--vt-bg);
  --rairo-card: var(--vt-surface);
  --rairo-card-2: var(--vt-surface-2);
  --vg-bg: var(--vt-bg);
  --vg-surface: rgba(33,30,27,.975);
  --vg-surface-solid: var(--vt-surface);
  --vg-surface-soft: var(--vt-surface-2);
  --vg-surface-glass: rgba(27,24,22,.92);
  --vg-text: var(--vt-text);
  --vg-text-2: var(--vt-text-2);
  --vg-muted: var(--vt-muted);
}

/* ---------- Base: White ---------- */
html[data-rairo-theme="light"],
html[data-rairo-theme="light"] body {
  background-color: var(--vt-bg) !important;
  color: var(--vt-text) !important;
}

html[data-rairo-theme="light"] :is(
  .page-title,.title,.section-title,
  h1,h2,h3,h4,h5,h6,
  strong,b,label,legend,summary,
  .brand,.drawer-link,.result-copy b,.route-head h2,
  .destination-confirm h3,.planner-section-head b
) {
  color: var(--vt-text) !important;
}

html[data-rairo-theme="light"] :is(
  p,small,.muted,.tiny,.subtitle,.page-subtitle,
  .result-address,.result-copy small,.search-label,.search-message,
  .route-head p,.route-card-meta,.route-ai
) {
  color: var(--vt-muted) !important;
}

html[data-rairo-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,select,.input,.textarea,.select
) {
  color: var(--vt-text) !important;
}
html[data-rairo-theme="light"] :is(input,textarea)::placeholder {
  color: var(--vt-placeholder) !important;
  opacity: 1 !important;
}

/* ---------- Base: Black ---------- */
html[data-rairo-theme="black"],
html[data-rairo-theme="black"] body {
  background-color: var(--vt-bg) !important;
  color: var(--vt-text) !important;
}

/* Autoridade principal: qualquer título/rótulo que ficou preto vira claro. */
html[data-rairo-theme="black"] :is(
  .page-title,.title,.section-title,
  h1,h2,h3,h4,h5,h6,
  strong,b,label,legend,summary,
  .brand,.brand span,.nav-actions .tiny,
  .drawer-link,.drawer-link span,.drawer-link em,
  .drawer-user b,.drawer-profile,
  .result-copy b,.search-item,.search-item b,.search-suggestion b,
  .planner-heading-copy b,.planner-section-head b,.planner-preset b,.nearby-service b,
  .route-head h2,.route-time span,.route-card h3,.route-card .mins,
  .destination-confirm h3,.nav-summary-item strong,
  .profile-v72-copy h1,.profile-v72-section-head h2,.profile-v72-detail-copy b,
  .profile-v72-nav-copy b,.profile-v72-map-copy b,.profile-v72-person b,
  .auth-copy h1,.auth-actions-head h2,.sheet-head h2,
  .ob-head h1,.ob-section-title b,.choice label b,.pref label b
) {
  color: var(--vt-text) !important;
}

/* Texto secundário: nunca preto no Black; fica cinza claro legível. */
html[data-rairo-theme="black"] :is(
  p,small,.muted,.tiny,.subtitle,.page-subtitle,
  .drawer-user span,.drawer-login p,.guest-drawer-content>p,
  .result-address,.result-copy small,.search-label,.search-label span,.search-label em,.search-message,.search-message span,
  .search-suggestion small,.planner-heading-copy span,.planner-preset small,.nearby-service small,
  .route-head p,.route-card-meta,.route-ai,.route-card p,
  .destination-confirm p,.nav-summary-item small,.traffic-radar-copy span,
  .profile-v72-copy p,.profile-v72-detail-copy span,.profile-v72-note,
  .auth-copy p,.auth-actions-head p,.auth-legal,.lead,.legal,.sheet-head p,.sheet-switch,
  .ob-head p,.ob-section-title span,.choice label span,.pref label span
) {
  color: var(--vt-muted) !important;
}

/* Forms e controles de texto. */
html[data-rairo-theme="black"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,select,.input,.textarea,.select,
  .location-input,.sheet-input,.sheet-select
) {
  background-color: var(--vt-surface-2) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  caret-color: var(--vt-primary) !important;
}
html[data-rairo-theme="black"] :is(input,textarea)::placeholder {
  color: var(--vt-placeholder) !important;
  opacity: 1 !important;
}
html[data-rairo-theme="black"] select option {
  background: var(--vt-surface) !important;
  color: var(--vt-text) !important;
}

/* ---------- Surfaces comuns ---------- */
html[data-rairo-theme="black"] :is(
  .panel,.card,.kpi,.alert-card,.auth-card,.profile-card,.profile-detail,
  .faq details,.notif,.invite-card,.flash,
  .account-drawer,.prefs-drawer,.safety-drawer,.sheet,.destination-confirm,
  .search-results,.route-card,.route-loading-card,.resume-trip-card,
  .nav-panel,.nav-voice-popover,.traffic-radar
) {
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}

html[data-rairo-theme="light"] :is(
  .panel,.card,.kpi,.alert-card,.auth-card,.profile-card,.profile-detail,
  .faq details,.notif,.invite-card,.flash
) {
  color: var(--vt-text) !important;
}

/* ---------- Mapa / WebView ---------- */
html[data-rairo-theme="black"] .ws-app {
  --text: var(--vt-text) !important;
  --ink: var(--vt-text) !important;
  --muted: var(--vt-muted) !important;
  color: var(--vt-text) !important;
}
html[data-rairo-theme="light"] .ws-app {
  --text: var(--vt-text) !important;
  --ink: var(--vt-text) !important;
  --muted: var(--vt-muted) !important;
  color: var(--vt-text) !important;
}

/* Elementos que tinham cores escuras hard-coded em folhas antigas. */
html[data-rairo-theme="black"] .ws-app :is(
  .location-input,.row-btn,.chip-shortcut,.quick,.map-btn,.nav-stack-btn,.nav-audio-toggle,
  .segment button,.travel button,.route-variant,.route-card,
  .parking-nearby,.parking-item,.parking-row,.route-insight,.insight,
  .drawer-user,.drawer-profile,.drawer-link,.safety-tool,.pref-row,
  .planner-preset,.nearby-service,.search-item,.search-suggestion,
  .destination-edit,.floating-preview-cancel,.nav-recalc-btn,.nav-summary-item
) {
  color: var(--vt-text) !important;
}

html[data-rairo-theme="black"] .ws-app :is(
  .route-card-meta,.route-card p,.route-card span,.route-ai,
  .parking-head>span,.insight span,.planner-tip,
  .result-meta,.search-message,.nav-maneuver-copy span,.nav-maneuver-copy small
) {
  color: var(--vt-muted) !important;
}

/* ---------- Tables / generic content pages ---------- */
html[data-rairo-theme="black"] table,
html[data-rairo-theme="black"] :is(th,td) {
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="light"] table,
html[data-rairo-theme="light"] :is(th,td) {
  color: var(--vt-text) !important;
}

/* ---------- Botões ---------- */
html[data-rairo-theme="black"] :is(button,.btn):not(.btn-primary):not(.sheet-submit):not(.auth-choice.primary):not(.destination-accept):not([class*="danger"]):not([class*="success"]) {
  color: var(--vt-text) !important;
}
html[data-rairo-theme="light"] :is(button,.btn):not(.btn-primary):not(.sheet-submit):not(.auth-choice.primary):not(.destination-accept):not([class*="danger"]):not([class*="success"]) {
  color: var(--vt-text) !important;
}

/* CTA principal continua branco sobre o laranja nos dois temas. */
:is(.btn-primary,.sheet-submit,.auth-choice.primary,.destination-accept,.guest-drawer-primary) {
  color: #FFFFFF !important;
}

/* Marca / estados semânticos NÃO são dessaturados pela troca de tema. */
:is(.eyebrow,[class*="eyebrow"],[class*="kicker"],.planner-section-head small,.destination-confirm-kicker,.destination-confirm-kicker small) {
  color: var(--vt-primary) !important;
}
:is(.danger,.error,[class*="danger"],[class*="error"]) { --vt-semantic-preserve: 1; }
:is(.success,[class*="success"]) { --vt-semantic-preserve: 1; }

/* Mapbox popup acompanha o tema. */
html[data-rairo-theme="black"] .mapboxgl-popup-content {
  background: var(--vt-surface) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="black"] .mapboxgl-popup-content :is(b,strong,h1,h2,h3,h4,span,p,small) {
  color: inherit !important;
}
html[data-rairo-theme="light"] .mapboxgl-popup-content {
  background: var(--vt-surface) !important;
  color: var(--vt-text) !important;
}

/* Troca visual curta e fluida; evita animação pesada no mapa. */
@media (prefers-reduced-motion: no-preference) {
  body,
  .topbar,.mobile-dock,
  .panel,.card,.auth-card,
  .account-drawer,.prefs-drawer,.safety-drawer,.sheet,.search-results,.destination-confirm,
  input,textarea,select,button {
    transition-property: color,background-color,border-color !important;
    transition-duration: 140ms !important;
    transition-timing-function: ease-out !important;
  }
}

/* ============================================================
   VIENNA V185 — BLACK MODE FINAL CONTRAST LOCK
   This block intentionally lives in the last-loaded theme sheet.
   It only affects Black mode and neutralizes late legacy light-mode
   hard-codes from the bundled map/navigation stylesheet.
   ============================================================ */

/* Active navigation: ETA / remaining time / distance card. */
html[data-rairo-theme="black"] body.body-nav #activeNav.nav-panel.nav-minimal {
  background: rgba(33,30,27,.985) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  box-shadow: 0 -12px 42px rgba(0,0,0,.30) !important;
}
html[data-rairo-theme="black"] body.body-nav #activeNav .nav-summary-item {
  background: var(--vt-surface-2) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="black"] body.body-nav #activeNav .nav-summary-item small,
html[data-rairo-theme="black"] body.body-nav #activeNav .nav-summary-item strong,
html[data-rairo-theme="black"] body.body-nav #activeNav .nav-summary-item:first-child strong {
  color: var(--vt-text) !important;
}

/* Speedometer: never inherit the old black text / white card in Black mode. */
html[data-rairo-theme="black"] body.body-nav .ws-app .floating-speedo {
  background: rgba(39,35,31,.985) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.26) !important;
}
html[data-rairo-theme="black"] body.body-nav .ws-app .floating-speedo strong,
html[data-rairo-theme="black"] body.body-nav .ws-app .floating-speedo span,
html[data-rairo-theme="black"] body.body-nav .ws-app .floating-speedo small {
  color: var(--vt-text) !important;
}
html[data-rairo-theme="black"] body.body-nav .ws-app .floating-speedo::before {
  background: rgba(255,248,242,.14) !important;
}

/* Driver controls and free-map tool rail. */
html[data-rairo-theme="black"] body.body-nav .ws-app :is(#navDrawerRecenter,#soundBtn,#navCameraToggle),
html[data-rairo-theme="black"] body:not(.body-nav) .ws-app :is(.options-btn,.map-tools .map-btn,.floating-locate) {
  background: rgba(39,35,31,.97) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.20) !important;
}
html[data-rairo-theme="black"] body.body-nav .ws-app :is(#soundBtn.active,#navCameraToggle.active) {
  background: var(--vt-primary) !important;
  color: #fff !important;
  border-color: var(--vt-primary) !important;
}
html[data-rairo-theme="black"] body.body-nav .ws-app #navDrawerRecenter.active {
  background: var(--vt-surface-2) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}

/* Maneuver/street cards: old bundled rules forced black text and white surfaces. */
html[data-rairo-theme="black"] body.body-nav .nav-maneuver-top,
html[data-rairo-theme="black"] body.body-nav .nav-street-chip {
  background: rgba(33,30,27,.975) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}
html[data-rairo-theme="black"] body.body-nav .nav-maneuver-copy b,
html[data-rairo-theme="black"] body.body-nav .nav-street-chip,
html[data-rairo-theme="black"] body.body-nav .nav-street-chip span {
  color: var(--vt-text) !important;
}
html[data-rairo-theme="black"] body.body-nav .nav-maneuver-copy span {
  color: var(--vt-primary-light) !important;
}

/* Planner / route-preview text that legacy light rules pin to dark colors. */
html[data-rairo-theme="black"] .ws-app #routeState,
html[data-rairo-theme="black"] .ws-app #routeState :is(.route-head h2,.route-time span,.route-time small,.customize-route-kicker,.customize-route-kicker b,.route-choice-label,.route-card,.route-card h3,.route-card-meta,.route-ai,.safety-level strong,.traffic-line,.route-insight strong,.route-insight span,.preview-actions .sub-action,.disclaimer) {
  color: var(--vt-text) !important;
}
html[data-rairo-theme="black"] .ws-app #routeState :is(.route-head p,.route-card-meta,.route-ai,.safety-level strong,.traffic-line,.route-insight span,.disclaimer) {
  color: var(--vt-muted) !important;
}
html[data-rairo-theme="black"] .ws-app #routeState :is(.segment button,.travel button,.route-card,.route-insight .insight,.preview-actions .sub-action,.parking-nearby,.parking-item) {
  background: var(--vt-surface-2) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="black"] .ws-app #routeState :is(.segment button.active,.travel button.active) {
  background: rgba(245,154,98,.16) !important;
  color: var(--vt-primary-light) !important;
  border-color: rgba(245,154,98,.28) !important;
}

/* Traffic / reroute helper content. */
html[data-rairo-theme="black"] body.body-nav :is(.traffic-suggestion,.reroute,.nav-alt-hint,.nav-feedback) {
  background: rgba(33,30,27,.98) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="black"] body.body-nav :is(.traffic-suggestion b,.traffic-suggestion span,.traffic-suggestion small,.nav-alt-copy b,.nav-alt-copy em,.nav-feedback-copy b,.nav-feedback-copy small,.reroute span) {
  color: var(--vt-text) !important;
}


/* Small late surfaces that were still authored as White-only. */
html[data-rairo-theme="black"] body:not(.body-nav) #planSheet .planner-grab,
html[data-rairo-theme="black"] .ws-app .connectivity-pill,
html[data-rairo-theme="black"] .ws-app .place-popup-save,
html[data-rairo-theme="black"] .ws-app .traffic-dismiss {
  background: var(--vt-surface-2) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
}
html[data-rairo-theme="black"] body:not(.body-nav) #planSheet .planner-grab:active {
  background: var(--vt-surface-3) !important;
}
html[data-rairo-theme="black"] .ws-app #activeNav .traffic-suggestion.show {
  background: rgba(33,30,27,.985) !important;
  color: var(--vt-text) !important;
  border-color: var(--vt-line) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.28) !important;
}
html[data-rairo-theme="black"] .ws-app .traffic-suggestion-icon {
  background: rgba(245,154,98,.14) !important;
  color: var(--vt-primary-light) !important;
}