/* Design tokens, the redesigned look, and the dark theme. Loaded after style.css. */
:root {
  --bg:#F3F5F7; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E3E8EE; --border-strong:#CBD5E1;
  --text:#0F172A; --text-2:#475569; --muted:#64748B;
  --accent:#0F766E; --accent-hover:#0B5F58; --accent-soft:#E3F3F1; --accent-ink:#0B5F58; --on-accent:#FFFFFF;
  --danger:#B42318; --ok:#1D6B2F; --warn:#8A5A00; --info:#1D4EA0; --route:#E4572E;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.10);
  --chart-grid:#DCE2E7; --chart-label:#64748B; --map-bg:#E3E9EC;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:#0B1220; --surface:#131C2B; --surface-2:#1B2638; --border:#26334A; --border-strong:#3A4A66;
  --text:#E6EDF7; --text-2:#B4C0D3; --muted:#8EA0B8;
  --accent:#2DD4BF; --accent-hover:#5EEAD4; --accent-soft:#12383A; --accent-ink:#7EE8DA; --on-accent:#052E2A;
  --danger:#F87171; --ok:#6FD58B; --warn:#F2C14E; --info:#8AB4F8; --route:#FF7A59;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
  --chart-grid:#26334A; --chart-label:#8EA0B8; --map-bg:#1A2434;
  color-scheme: dark;
}

/* ---------- base ---------- */
:root { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", sans-serif; color:var(--text); background:var(--bg); }
body { background:var(--bg); color:var(--text); }
a { color:var(--accent-ink); }
.muted, footer { color:var(--muted); }
hr.soft, .library-panel hr { border-top-color:var(--border); }
::selection { background:var(--accent); color:var(--on-accent); }

/* ---------- top bar ---------- */
header.topbar { display:flex; align-items:center; justify-content:flex-start; gap:1.4rem; height:60px; padding:0 1.25rem;
  background:var(--surface); color:var(--text); border-bottom:1px solid var(--border); position:relative; z-index:1100; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:650; font-size:1.02rem; color:var(--text); text-decoration:none; white-space:nowrap; }
.brand-mark { width:30px; height:30px; border-radius:9px; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; }
.tabs { display:flex; gap:.2rem; }
.tabs a { padding:.5rem .9rem; border-radius:9px; color:var(--text-2); text-decoration:none; font-weight:500; font-size:.94rem; }
.tabs a:hover { background:var(--surface-2); color:var(--text); }
.tabs a.active { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
header.topbar .header-actions { margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.header-link, .header-btn { color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; padding:.45rem .8rem; font-size:.9rem; margin:0; text-decoration:none; }
.header-link:hover, .header-btn:hover { background:var(--surface-2); }
.icon-btn { width:38px; height:38px; padding:0; margin:0; border-radius:999px; font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.user-menu { position:relative; }
.user-chip { display:flex; align-items:center; gap:.55rem; margin:0; padding:.25rem .7rem .25rem .25rem; border-radius:999px; background:var(--surface); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--text); color:var(--bg); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.role-pill { font-size:.72rem; font-weight:600; background:var(--accent-soft); color:var(--accent-ink); border-radius:999px; padding:.1rem .5rem; }
.menu-pop { position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:.4rem; z-index:2000; }
.menu-pop a, .menu-pop button { display:block; width:100%; text-align:left; margin:0; border:0; background:transparent; color:var(--text); padding:.55rem .7rem; border-radius:9px; text-decoration:none; font-size:.92rem; }
.menu-pop a:hover, .menu-pop button:hover { background:var(--surface-2); }
.menu-pop .menu-head { padding:.5rem .7rem .6rem; border-bottom:1px solid var(--border); margin-bottom:.3rem; }
.menu-pop .menu-head small { display:block; color:var(--muted); }
.page-head { padding:1.4rem 1.25rem 0; }
.account-main .page-head { padding:0 0 1rem; }
.page-head h1 { margin:0; font-size:1.5rem; letter-spacing:-.01em; }
.page-head p { margin:.3rem 0 0; color:var(--muted); font-size:.95rem; }

/* ---------- cards, inputs, buttons ---------- */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:none; padding:1rem 1.1rem; margin-bottom:.75rem; }
.panel h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:650; margin:0 0 .8rem; }
.panel h3 { color:var(--text); }
.panel code { background:var(--surface-2); color:var(--text); }
input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:.55rem .7rem; }
input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
input[type=file] { color:var(--text-2); }
input[type=file]::file-selector-button { background:var(--surface-2); color:var(--text); border:1px solid var(--border-strong); border-radius:9px; padding:.4rem .8rem; margin-right:.7rem; cursor:pointer; }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color:var(--accent); }
button { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:.55rem .95rem; font-weight:500; margin:.15rem .1rem .15rem 0; }
button:hover:not(:disabled) { background:var(--surface-2); }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled { opacity:.45; }
button.secondary, button.small, .route-card button, .route-card button.secondary { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); }
button.secondary:hover:not(:disabled), .route-card button:hover:not(:disabled) { background:var(--surface-2); }
button.primary, #rerouteBtn, #libraryUploadBtn, #librarySearchBtn, #editInPlannerBtn, #downloadBtn:not(.secondary), #checkBtn, #gLoginBtn, #gMfaBtn, #gSyncBtn,
.auth-card button[type=submit], .account-main form button[type=submit]:not(.secondary), #codeBtn, #loginBtn, #codesDone, #twofaStart, #googleLink {
  background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600; }
button.primary:hover:not(:disabled), #rerouteBtn:hover:not(:disabled), #libraryUploadBtn:hover:not(:disabled), #librarySearchBtn:hover:not(:disabled), #editInPlannerBtn:hover:not(:disabled),
#downloadBtn:not(.secondary):hover:not(:disabled), #checkBtn:hover:not(:disabled), #gLoginBtn:hover:not(:disabled), #gMfaBtn:hover:not(:disabled), #gSyncBtn:hover:not(:disabled),
.auth-card button[type=submit]:hover:not(:disabled), .account-main form button[type=submit]:not(.secondary):hover:not(:disabled), #codesDone:hover, #twofaStart:hover, #googleLink:hover { background:var(--accent-hover); }
#rerouteBtn { padding:.75rem 1.2rem; font-size:1rem; }
button.danger, .route-card button.danger { background:var(--surface); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); }
button.danger:hover:not(:disabled), .route-card button.danger:hover:not(:disabled) { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.side-link { background:var(--accent); color:var(--on-accent); }
.buttons { gap:.35rem; }
#exportBtn, #updateLibraryBtn { width:100%; }

/* ---------- planner layout ---------- */
#mainLayout { grid-template-columns:352px minmax(0,1fr); gap:16px; padding:16px; height:calc(100vh - 60px - 38px); min-height:560px; }
#mainLayout > aside { padding:0 2px 0 0; max-height:none; overflow-y:auto; }
#mainLayout .map-wrap { border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--map-bg); }
#mainLayout #map { height:100%; min-height:0; }
main.menu-collapsed { grid-template-columns:1fr; }
#message { color:var(--text-2); padding:.4rem .3rem .8rem; }
footer { padding:.6rem 1rem; font-size:.75rem; }
.profile { display:flex; align-items:center; gap:.65rem; }
.profile select { flex:1; }
.mode-pill { background:var(--accent-soft); color:var(--accent-ink); }
.menu-tab { background:var(--surface); color:var(--text); border:1px solid var(--border); border-left:0; box-shadow:var(--shadow); }
.menu-tab:hover { background:var(--surface-2) !important; }
.data-banner { background:#0F172A; border:1px solid #26334A; }
@media(max-width:850px) {
  header.topbar { height:auto; flex-wrap:wrap; padding:.6rem .9rem; gap:.5rem .9rem; }
  header.topbar .tabs { order:3; width:100%; overflow-x:auto; }
  #mainLayout { height:auto; grid-template-columns:1fr; }
  #mainLayout #map { height:58vh; min-height:380px; }
  #mainLayout > aside { overflow:visible; }
  .user-chip .user-name, .user-chip .role-pill { display:none; }
}

/* ---------- map overlays ---------- */
.summary-overlay { background:color-mix(in srgb, var(--surface) 96%, transparent); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); left:16px; right:16px; bottom:20px; }
.summary-bar { padding:.7rem 1rem; }
.summary-stats { gap:.4rem 1.8rem; }
.summary-stats div { flex-direction:column; gap:0; }
.summary-stats span { color:var(--muted); font-size:.74rem; }
.summary-stats strong { font-size:1.3rem; font-weight:650; }
#summaryBody { padding:0 1rem .7rem; }
.route-edit-controls, .zoom-info { background:var(--surface); color:var(--text-2); }
.route-edit-controls .mode-title, .route-edit-controls .mode-toggle .mode-toggle-label, .route-edit-controls .mode-toggle .mode-chevron { color:var(--muted); }
.route-edit-controls button, .route-edit-controls .mode-toggle { background:var(--surface-2); color:var(--text); border:2px solid transparent; }
.route-edit-controls button:hover { background:var(--border); }
.route-edit-controls .mode-toggle { background:var(--surface); }
.route-edit-controls button.active { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); box-shadow:none; font-weight:650; }
.route-edit-controls .mode-toggle .mode-current { background:var(--accent-soft); color:var(--accent-ink); }
.route-edit-controls .mode-hint { color:var(--text-2); border-top-color:var(--border); }
.zoom-info.warn { background:color-mix(in srgb, var(--warn) 22%, var(--surface)); color:var(--warn); }
#map, #previewMap, #tileMap, #compareMap { background:var(--map-bg); }
.leaflet-container { background:var(--map-bg); font-family:inherit; }
.leaflet-bar a, .leaflet-control-layers, .leaflet-control-layers-expanded { background:var(--surface); color:var(--text); border-color:var(--border); }
.leaflet-bar a:hover { background:var(--surface-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--surface); color:var(--text); }
.leaflet-control-attribution { background:color-mix(in srgb, var(--surface) 80%, transparent) !important; color:var(--muted); }
.leaflet-control-attribution a { color:var(--accent-ink); }
html[data-theme="dark"] .leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.75); }

/* ---------- weather panel ---------- */
.wind-panel { background:color-mix(in srgb, var(--surface) 97%, transparent); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); color:var(--text); }
.wind-head .banner-close { color:var(--text-2); border:0; }
.wind-btn { background:var(--surface); color:var(--accent-ink); border:1px solid var(--accent); }
.wind-days button, .wx-tabs button { background:var(--surface-2); color:var(--text-2); border:2px solid transparent; }
.wind-days button.active { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.wx-tabs { border-bottom-color:var(--border); }
.wx-tabs button { background:transparent; border:0; border-bottom:3px solid transparent; }
.wx-tabs button small { color:var(--muted); }
.wx-tabs button:hover { background:var(--surface-2); }
.wx-tabs button.active { color:var(--accent-ink); background:var(--accent-soft); border-bottom-color:var(--accent); }
.wx-best { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); color:var(--text); }
.wind-impact, .wind-advice { background:var(--surface-2); color:var(--text); }
.wind-impact.low, .wind-advice.keep { background:color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.wind-impact.moderate, .wind-advice.reverse { background:color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.wind-impact.high { background:color-mix(in srgb, var(--danger) 18%, var(--surface)); }
.wind-warn { background:color-mix(in srgb, var(--warn) 20%, var(--surface)); color:var(--warn); }
.wind-warn.thunder, .wind-warn.ice, .wind-warn.snow { background:color-mix(in srgb, var(--danger) 18%, var(--surface)); color:var(--danger); }
.wind-warn.cold, .wind-warn.rain { background:color-mix(in srgb, var(--info) 18%, var(--surface)); color:var(--info); }
.wind-warn.heat { background:color-mix(in srgb, var(--warn) 22%, var(--surface)); color:var(--warn); }
.wind-status.error { color:var(--danger); }
.wind-arrow { color:var(--info); }
.wind-table th, .wind-table td, .history-list li, .tile-table td { border-bottom-color:var(--border); }
.wind-table thead th, .tile-table th { color:var(--muted); border-bottom-color:var(--border-strong); }
.wind-table tbody th, .wind-legend, .temp-legend { color:var(--text-2); }
.wind-hours .hour { color:var(--text-2); }
.wind-hours .hour:hover { background:var(--surface-2); }
.wind-hours .hour.sel { background:var(--accent-soft); border-color:var(--accent); }
.wind-note { color:var(--muted); }

/* ---------- library, routing data, garmin ---------- */
.route-card { background:var(--surface); border-color:var(--border); color:var(--text); }
.route-card p { color:var(--text-2); }
.route-card:hover { border-color:var(--border-strong); }
.route-card.selected { background:var(--accent-soft); outline:2px solid var(--accent); }
.inline-edit { border-top-color:var(--border); }
.more-filters summary, .lib-left details summary { color:var(--text); }
.preview-stats span, .preview-meta, .preview-empty, .tile-area { color:var(--muted); }
.stats div, .g-counts div, .garmin-row, .selection-summary, .cmp-overlap { background:var(--surface-2); color:var(--text); }
.stats span, .g-counts span { color:var(--muted); }
.cmp-row.focus { background:var(--accent-soft); border-color:var(--accent); }
.cmp-name { color:var(--text); background:transparent !important; border:0; }
.selection-summary.warn, .notice-warn { background:color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color:color-mix(in srgb, var(--warn) 45%, var(--border)); color:var(--text); }
.notice-info { background:color-mix(in srgb, var(--info) 12%, var(--surface)); border-color:color-mix(in srgb, var(--info) 40%, var(--border)); }
.badge { background:var(--surface-2); color:var(--text-2); }
.badge.ok, .gbadge.ok { background:color-mix(in srgb, var(--ok) 18%, var(--surface)); color:var(--ok); }
.badge.update, .gbadge.pend { background:color-mix(in srgb, var(--warn) 20%, var(--surface)); color:var(--warn); }
.badge.busy { background:color-mix(in srgb, var(--info) 18%, var(--surface)); color:var(--info); }
.gbadge.err { background:color-mix(in srgb, var(--danger) 18%, var(--surface)); color:var(--danger); }
.history-list li.ok b { color:var(--ok); } .history-list li.fail b { color:var(--danger); }
.legend { color:var(--text-2); }
.lib-main, .rd-main { gap:16px; padding:16px 1.25rem 1.5rem; }

/* ---------- sign-in, account, admin ---------- */
.auth-card { box-shadow:var(--shadow); }
.auth-error { background:color-mix(in srgb, var(--danger) 13%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 45%, var(--border)); color:var(--danger); }
.auth-note { background:color-mix(in srgb, var(--ok) 13%, var(--surface)); border-color:color-mix(in srgb, var(--ok) 45%, var(--border)); color:var(--ok); }
.google-btn { background:var(--surface); color:var(--text); border-color:var(--border-strong); border-radius:10px; }
.google-btn:hover { background:var(--surface-2); }
.auth-divider, .account-facts dt { color:var(--muted); }
.codes-grid li { background:var(--surface-2); color:var(--text); }
.qr-box { background:#fff; }
.rp-readonly { background:color-mix(in srgb, var(--warn) 16%, var(--surface)); color:var(--text); border-bottom-color:color-mix(in srgb, var(--warn) 45%, var(--border)); }
.users-table th, .users-table td { border-bottom-color:var(--border); }
.users-table th { color:var(--muted); font-weight:600; }
.auth-main { min-height:calc(100vh - 60px); align-items:center; }

/* ---------- compact helper text ---------- */
.panel p { font-size:.88rem; line-height:1.5; margin:.4rem 0; }
.panel .mode-line { margin:.1rem 0 .7rem; }
.panel p.muted, .panel ul.muted { font-size:.8rem; }
details.help { margin:.5rem 0 .2rem; }
details.help summary { cursor:pointer; color:var(--accent-ink); font-size:.84rem; font-weight:500; padding:.2rem 0; }
details.help[open] summary { margin-bottom:.3rem; }
details.help p, details.help ul { font-size:.82rem; color:var(--text-2); }
#mainLayout .panel { padding:.9rem 1rem; margin-bottom:.65rem; }
.profile label { color:var(--text-2); font-size:.9rem; }

/* ---------- planner edit buttons: one primary action, the rest in a grid ---------- */
.buttons:has(#rerouteBtn) { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.6rem; }
.buttons:has(#rerouteBtn) button { margin:0; width:100%; padding-left:.5rem; padding-right:.5rem; font-size:.88rem; }
.buttons:has(#rerouteBtn) #rerouteBtn { grid-column:1 / -1; font-size:1rem; }
.buttons:has(#rerouteBtn) #clearWaypointBtn { grid-column:1 / -1; }