/* PFWS global light/dark theme */

html[data-theme="light"] {
  --bg: #f5f7fb;
  --fg: #0f172a;
  --ink: #0f172a;
  --muted: #64748b;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel2: #f8fafc;
  --surface: #ffffff;
  --card: #ffffff;
  --line: #dbe3ef;
  --border: #e2e8f0;
  --input-bg: #ffffff;
  --input-fg: #0f172a;
  --accent: #0b6bff;
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
  --bg: #0b1020;
  --fg: #e5eefc;
  --ink: #e8eefc;
  --muted: #9fb0c9;
  --panel: #121827;
  --panel-2: #0f172a;
  --panel2: #151e31;
  --surface: #111827;
  --card: #111827;
  --line: rgba(148, 163, 184, 0.20);
  --border: rgba(148, 163, 184, 0.22);
  --input-bg: #0f172a;
  --input-fg: #e5eefc;
  --accent: #38bdf8;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.32);
}

html[data-theme],
html[data-theme] body {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

html[data-theme] .pfws-topbar,
html[data-theme] .topbar {
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: saturate(1.4) blur(10px);
}

html[data-theme] .pfws-brand,
html[data-theme] .pfws-brand-link,
html[data-theme] .pfws-nav-link,
html[data-theme] .pfws-role-value,
html[data-theme] .topbar a,
html[data-theme] .topbar .brand {
  color: var(--ink) !important;
}

html[data-theme] .pfws-role,
html[data-theme] .pfws-env,
html[data-theme] .small,
html[data-theme] .k,
html[data-theme] .muted,
html[data-theme] .metric-sub,
html[data-theme] .energySummarySub,
html[data-theme] .xsection-title-note {
  color: var(--muted) !important;
}

html[data-theme] .card,
html[data-theme] .panel,
html[data-theme] .table-wrap.card,
html[data-theme] .energySummaryCard,
html[data-theme] .energyRuntimeSection,
html[data-theme] .energy-metric-card,
html[data-theme] .energySummaryLine,
html[data-theme] .metric-card,
html[data-theme] .accordion,
html[data-theme] dialog,
html[data-theme] .pfws-modal {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme] .panel-head,
html[data-theme] .accBtn {
  background: var(--panel-2) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
  background: var(--input-bg) !important;
  color: var(--input-fg) !important;
  border-color: var(--border) !important;
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent) !important;
}

html[data-theme] button,
html[data-theme] .btn,
html[data-theme] .pfws-btn,
html[data-theme] a.button,
html[data-theme] .ghost {
  border-color: var(--border) !important;
}

html[data-theme] table {
  color: var(--ink) !important;
}

html[data-theme] th {
  color: var(--muted) !important;
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
}

html[data-theme] td {
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme] tbody tr:hover {
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 5%) !important;
}

/* Routes page hard-coded light style overrides */
html[data-theme="dark"] .filters .pill,
html[data-theme="dark"] .pfws-routes-count {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] #routesTable.routes thead th {
  background: var(--panel-2) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] #routesTable.routes tbody td {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] #routesTable.routes tbody tr:hover td {
  background: #172033 !important;
}

html[data-theme="dark"] #routesTable.routes td:nth-child(9) button,
html[data-theme="dark"] .routes-actions-wrap button {
  background: #020617 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html[data-theme="light"] #routesTable.routes td:nth-child(9) button,
html[data-theme="light"] .routes-actions-wrap button {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* Route detail and x-section */
html[data-theme="light"] .xsection-wrap,
html[data-theme="light"] #rd_xsection_svg {
  background: #071225 !important;
}

html[data-theme="dark"] .mapCard,
html[data-theme="dark"] #map {
  background: #111827 !important;
  border-color: var(--border) !important;
}

/* Toasts and modals */
html[data-theme="dark"] .pfws-toast,
html[data-theme="dark"] .pfws-banner {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Theme switch */
.pfws-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

#pfws_theme_toggle {
  height: 32px;
  min-width: 74px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-weight: 900;
  padding: 0 10px;
  cursor: pointer;
}

#pfws_theme_toggle:hover {
  background: var(--panel-2);
}

body.pfws-printing-route-detail .pfws-theme-switch {
  display: none !important;
}

@media (max-width: 760px) {
  .pfws-theme-label {
    display: none;
  }
}


/* PFWS route detail light contrast fixes V1 */

/* Route-detail hero/header: current route title sits on a dark strip in light mode. */
html[data-theme="light"] body:has(#rd_name_hdr) #rd_name_hdr,
html[data-theme="light"] body:has(#rd_name_hdr) #rd_subtitle,
html[data-theme="light"] body:has(#rd_name_hdr) #rd_eval_at,
html[data-theme="light"] body:has(#rd_name_hdr) #rd_model,
html[data-theme="light"] body:has(#rd_name_hdr) #rd_cycle {
  color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme="light"] body:has(#rd_name_hdr) #rd_subtitle {
  color: #cbd5e1 !important;
}

/* If the route header wrapper is theme-overridden by generic card rules, keep it intentionally dark. */
html[data-theme="light"] .card:has(#rd_name_hdr),
html[data-theme="light"] .routeHeader:has(#rd_name_hdr),
html[data-theme="light"] .routeHero:has(#rd_name_hdr),
html[data-theme="light"] .rdHero:has(#rd_name_hdr),
html[data-theme="light"] .pageHero:has(#rd_name_hdr) {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* Route summary / top blocker cards. These cards have inline dark backgrounds from JS. */
html[data-theme="light"] #rd_blockers_inline,
html[data-theme="light"] #rd_blockers_inline * {
  color: #0f172a !important;
  opacity: 1 !important;
}

html[data-theme="light"] #rd_blockers_inline_list > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 5px solid #ef4444 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #rd_blockers_inline_list .small,
html[data-theme="light"] #rd_blockers_inline_list .msg,
html[data-theme="light"] #rd_blockers_inline_list [class*="small"] {
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="light"] #rd_blockers_inline_list b,
html[data-theme="light"] #rd_blockers_inline_list strong,
html[data-theme="light"] #rd_blockers_inline_list [style*="font-weight"] {
  color: #0f172a !important;
}

/* Full reasons accordions when opened in light mode. */
html[data-theme="light"] #rd_reasons_host .accordion,
html[data-theme="light"] #rd_reasons_host .reasonGroup,
html[data-theme="light"] #rd_reasons_host .reasonRow {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] #rd_reasons_host .accBtn,
html[data-theme="light"] #rd_reasons_host .gh {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] #rd_reasons_host .msg,
html[data-theme="light"] #rd_reasons_host .val,
html[data-theme="light"] #rd_reasons_host .small {
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="light"] #rd_reasons_host .countPill {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe !important;
}

/* X-section legend sits on a white card in light mode, but many labels came from dark UI. */
html[data-theme="light"] #rd_xsection_card,
html[data-theme="light"] #rd_xsection_card .cardPad {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] #rd_xsection_card .h2,
html[data-theme="light"] #rd_xsection_card h2,
html[data-theme="light"] #rd_xsection_card h3,
html[data-theme="light"] #rd_xsection_card strong,
html[data-theme="light"] #rd_xsection_card b {
  color: #0f172a !important;
  opacity: 1 !important;
}

html[data-theme="light"] .xsection-legend,
html[data-theme="light"] .xsection-legend *,
html[data-theme="light"] .xsection-legend-item,
html[data-theme="light"] .xsection-title-note,
html[data-theme="light"] #rd_xsection_status,
html[data-theme="light"] #rd_xsection_badge {
  color: #475569 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .xsection-legend-item span:not(.legend-scale):not(.legend-patch):not(.legend-line):not(.legend-cloudbase) {
  color: #475569 !important;
}

html[data-theme="light"] .xsection-layer-btn {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .xsection-layer-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html[data-theme="light"] .xsection-layer-btn.is-active {
  background: #ecfeff !important;
  color: #0f172a !important;
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22) inset !important;
}

/* Keep the actual x-section plot dark and readable. */
html[data-theme="light"] .xsection-wrap,
html[data-theme="light"] #rd_xsection_svg {
  background: #071225 !important;
  color: #e5eefc !important;
}

/* Energy/detail panels: restore strong text in light mode. */
html[data-theme="light"] .energyRuntimeSection,
html[data-theme="light"] .energy-metric-card,
html[data-theme="light"] .energySummaryLine,
html[data-theme="light"] .energy-detail-lines,
html[data-theme="light"] .energy-detail-lines *,
html[data-theme="light"] .metric-label,
html[data-theme="light"] .metric-value,
html[data-theme="light"] .metric-sub {
  opacity: 1 !important;
}

html[data-theme="light"] .metric-label,
html[data-theme="light"] .energy-card-title {
  color: #0f172a !important;
}

html[data-theme="light"] .metric-sub,
html[data-theme="light"] .energy-detail-lines,
html[data-theme="light"] .energySummarySub {
  color: #334155 !important;
}

/* Inputs in route detail cards. */
html[data-theme="light"] body:has(#rd_energy_card) input,
html[data-theme="light"] body:has(#rd_energy_card) select,
html[data-theme="light"] body:has(#rd_energy_card) textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] body:has(#rd_energy_card) input:focus,
html[data-theme="light"] body:has(#rd_energy_card) select:focus,
html[data-theme="light"] body:has(#rd_energy_card) textarea:focus {
  outline: 2px solid rgba(59, 130, 246, 0.28) !important;
  border-color: #3b82f6 !important;
}

/* Decision pills should stay high-contrast. */
html[data-theme="light"] .decisionBanner.go,
html[data-theme="light"] .energyDecisionBanner.go,
html[data-theme="light"] #rd_energy_decision.go,
html[data-theme="light"] #rd_reco_badge.go {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}

html[data-theme="light"] .decisionBanner.hold,
html[data-theme="light"] .energyDecisionBanner.hold,
html[data-theme="light"] #rd_energy_decision.hold,
html[data-theme="light"] #rd_reco_badge.hold {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
}

html[data-theme="light"] .decisionBanner.no,
html[data-theme="light"] .decisionBanner.no_go,
html[data-theme="light"] .energyDecisionBanner.no,
html[data-theme="light"] .energyDecisionBanner.no_go,
html[data-theme="light"] #rd_energy_decision.no,
html[data-theme="light"] #rd_energy_decision.no_go,
html[data-theme="light"] #rd_reco_badge.no,
html[data-theme="light"] #rd_reco_badge.no_go {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

/* Tooltips should remain dark even on the light theme. */
html[data-theme="light"] #rd_wind_tooltip,
html[data-theme="light"] #rd_layer_tooltip,
html[data-theme="light"] #rd_xsection_body_tooltip,
html[data-theme="light"] .xsection-tooltip {
  background: rgba(8, 15, 27, 0.97) !important;
  color: #e5eefc !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html[data-theme="light"] #rd_wind_tooltip *,
html[data-theme="light"] #rd_layer_tooltip *,
html[data-theme="light"] #rd_xsection_body_tooltip *,
html[data-theme="light"] .xsection-tooltip * {
  color: inherit;
}

/* END PFWS route detail light contrast fixes V1 */


/* PFWS route title light-theme visibility fix V2 */

/*
 * The title line is built as:
 *   Route #id · <span id="rd_name_hdr">name</span>
 * Earlier CSS only fixed #rd_name_hdr, so the "Route #id ·" text stayed dark.
 */

html[data-theme="light"] body:has(#rd_name_hdr) *:has(> #rd_name_hdr),
html[data-theme="light"] body:has(#rd_name_hdr) h1:has(#rd_name_hdr),
html[data-theme="light"] body:has(#rd_name_hdr) h2:has(#rd_name_hdr),
html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titleline {
  color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body:has(#rd_name_hdr) *:has(> #rd_name_hdr) *,
html[data-theme="light"] body:has(#rd_name_hdr) h1:has(#rd_name_hdr) *,
html[data-theme="light"] body:has(#rd_name_hdr) h2:has(#rd_name_hdr) *,
html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titleline * {
  color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme="light"] #rd_name_hdr {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] body:has(#rd_name_hdr) #rd_subtitle,
html[data-theme="light"] body:has(#rd_name_hdr) #rd_subtitle *,
html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titlebar #rd_subtitle,
html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titlebar #rd_subtitle * {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titlebar {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  border-color: #334155 !important;
}

html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titlebar,
html[data-theme="light"] body:has(#rd_name_hdr) .pfws-rd-titlebar * {
  opacity: 1 !important;
}

/* END PFWS route title light-theme visibility fix V2 */


/* PFWS route detail energy RU formatting fixes V1 */

/*
 * Russian decision words are much longer than GO/HOLD/NO.
 * The old 5-column KPI grid makes cards too narrow and clips text.
 */
body:has(#rd_energy_card) .energy-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body:has(#rd_energy_card) .energy-metric-card {
  min-width: 0 !important;
  min-height: 132px !important;
  padding: 14px 14px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body:has(#rd_energy_card) .metric-label {
  font-size: 12px !important;
  line-height: 1.18 !important;
  letter-spacing: .055em !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body:has(#rd_energy_card) .metric-value {
  font-size: clamp(21px, 1.55vw, 30px) !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  max-width: 100% !important;
}

html[lang^="ru"] body:has(#rd_energy_card) .metric-value {
  font-size: clamp(20px, 1.35vw, 26px) !important;
}

body:has(#rd_energy_card) .metric-sub {
  margin-top: 8px !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  max-width: 100% !important;
}

body:has(#rd_energy_card) .energy-detail-lines {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html[data-theme="light"] body:has(#rd_energy_card) .energy-metric-card,
html[data-theme="light"] body:has(#rd_energy_card) .energySummaryLine,
html[data-theme="light"] body:has(#rd_energy_card) .energyRuntimeSection {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] body:has(#rd_energy_card) .metric-label,
html[data-theme="light"] body:has(#rd_energy_card) .metric-value,
html[data-theme="light"] body:has(#rd_energy_card) .energy-card-title {
  color: #0f172a !important;
  opacity: 1 !important;
}

html[data-theme="light"] body:has(#rd_energy_card) .metric-sub,
html[data-theme="light"] body:has(#rd_energy_card) .energy-detail-lines,
html[data-theme="light"] body:has(#rd_energy_card) .energy-detail-lines * {
  color: #334155 !important;
  opacity: 1 !important;
}

/* Keep semantic decision cards readable after the generic theme overrides. */
html[data-theme="light"] body:has(#rd_energy_card) .energy-metric-card.go {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
}

html[data-theme="light"] body:has(#rd_energy_card) .energy-metric-card.hold {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
}

html[data-theme="light"] body:has(#rd_energy_card) .energy-metric-card.no,
html[data-theme="light"] body:has(#rd_energy_card) .energy-metric-card.no_go {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

@media (max-width: 900px) {
  body:has(#rd_energy_card) .energy-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

/* END PFWS route detail energy RU formatting fixes V1 */


/* PFWS route detail centered wide layout V1 */

/*
 * Route detail currently inherits the base .pfws-container max-width.
 * This makes the page look narrow on large screens.
 * Scope this only to pages containing #rd_name_hdr.
 */

html,
body {
  width: 100%;
}

body:has(#rd_name_hdr) {
  overflow-x: hidden;
}

body:has(#rd_name_hdr) .pfws-main {
  width: 100% !important;
}

body:has(#rd_name_hdr) .pfws-main > .pfws-container,
.pfws-main > .pfws-container:has(#rd_name_hdr) {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(#rd_name_hdr) .pfws-topbar-inner,
body:has(#rd_name_hdr) .topbar .inner {
  max-width: none !important;
  width: min(1880px, calc(100vw - 56px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(#rd_name_hdr) .wrap,
body:has(#rd_name_hdr) .routeDetailWrap,
body:has(#rd_name_hdr) .route-detail-wrap,
body:has(#rd_name_hdr) .rd-wrap,
.wrap:has(#rd_name_hdr),
.routeDetailWrap:has(#rd_name_hdr),
.route-detail-wrap:has(#rd_name_hdr),
.rd-wrap:has(#rd_name_hdr) {
  max-width: none !important;
  width: min(1880px, calc(100vw - 56px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(#rd_name_hdr) .topGrid {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
}

body:has(#rd_name_hdr) .card,
body:has(#rd_name_hdr) .mapCard,
body:has(#rd_name_hdr) #rd_xsection_card,
body:has(#rd_name_hdr) .xsection-wrap {
  max-width: none !important;
}

body:has(#rd_name_hdr) #map,
body:has(#rd_name_hdr) .map,
body:has(#rd_name_hdr) .mapCard,
body:has(#rd_name_hdr) #rd_xsection_card,
body:has(#rd_name_hdr) .xsection-wrap,
body:has(#rd_name_hdr) #rd_xsection_svg {
  width: 100% !important;
}

@media (max-width: 1100px) {
  body:has(#rd_name_hdr) .topGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  body:has(#rd_name_hdr) .pfws-topbar-inner,
  body:has(#rd_name_hdr) .topbar .inner,
  body:has(#rd_name_hdr) .wrap,
  body:has(#rd_name_hdr) .routeDetailWrap,
  body:has(#rd_name_hdr) .route-detail-wrap,
  body:has(#rd_name_hdr) .rd-wrap,
  .wrap:has(#rd_name_hdr),
  .routeDetailWrap:has(#rd_name_hdr),
  .route-detail-wrap:has(#rd_name_hdr),
  .rd-wrap:has(#rd_name_hdr) {
    width: calc(100vw - 24px) !important;
  }
}

/* END PFWS route detail centered wide layout V1 */