:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c0f14;
  color: #edf0f5;
  --panel: #161c25;
  --border: #2a3341;
  --muted: #9ba8ba;
  --accent: #ff963e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at top left, #22232b 0, #0c0f14 65%); }
button, input, select { font: inherit; }
.hidden { display: none !important; }
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/static/caravan-landscape.png") left bottom / contain no-repeat;
}
.app { min-height: 100vh; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form { width: min(400px, 100%); display: grid; gap: 16px; padding: 32px; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 80px #0006; }
.login h1, header h1 { margin: 0; font-size: 28px; letter-spacing: -.8px; }
.login input, header select, .toolbar input { min-height: 44px; min-width: 0; border: 1px solid #394557; border-radius: 9px; padding: 10px 12px; background: #0f141d; color: #edf0f5; }
input::placeholder { color: var(--muted); }
button { min-height: 42px; border: 1px solid transparent; border-radius: 9px; padding: 9px 18px; background: var(--accent); color: #211307; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover { background: #ffb372; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ffc18e; outline-offset: 3px; }
.toolbar button[data-hours] { background: #1b222d; border-color: #394557; color: #c6d0de; }
.toolbar button[data-hours]:hover { border-color: var(--accent); color: #fff; }
.toolbar button.active { background: var(--accent); color: #211307; border-color: var(--accent); }
#loginError { color: #ff9292; min-height: 20px; margin: 0; }
.dashboard { width: min(1440px, 100%); margin: 0 auto; padding: 30px 28px; display: grid; gap: 22px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
header h1::before { content: ''; display: inline-block; width: 9px; height: 23px; border-radius: 3px; background: var(--accent); margin-right: 12px; }
header p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
header select { min-width: 190px; }
.groupHeading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-right: 28px; }
.groupHeading h2 { margin: 0; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: #c6d0de; }
.groupNote { color: var(--muted); font-size: 12px; }
.groupHeading h2 { flex: 1; min-width: 0; }
.groupToggle { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 0; background: transparent; color: #c6d0de; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.groupToggle:hover { background: transparent; color: var(--accent); }
.chevron { color: var(--accent); font-size: 22px; line-height: 1; transition: transform .15s; }
.groupToggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.metricGroup .groupHeading { margin-bottom: 0; }
.metricGroup .statusGrid { margin-top: 10px; }
.gpsContent, .metricContent { display: grid; gap: 16px; min-width: 0; }
.charts > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.statusGrid.climateGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.climateValue { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; margin-top: 12px; }
.statusGrid .climateValue strong { flex: 1 1 auto; min-width: 0; margin-top: 0; white-space: nowrap; }
.statusGrid #gps { white-space: normal; }
.extrema { flex-shrink: 0; display: grid; gap: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.extrema small { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.extrema b { color: #d5deea; font-weight: 500; }
.statusGrid .extrema span { font-size: 10px; }
.metricHint { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.connectionBadge { font-size: 11px; font-weight: 700; letter-spacing: 1px; border: 1px solid #495465; border-radius: 20px; padding: 5px 10px; color: #c6d0de; }
.connectionBadge[data-online="true"] { color: #82e4b2; border-color: #35624d; background: #152d24; }
.statusGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.energyGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.yieldPhases { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 10px; font-size: 11px; }
.yieldPhases > div { display: flex; justify-content: space-between; gap: 8px; }
.yieldPhases dt { min-width: 0; }
.yieldPhases dd { white-space: nowrap; }
.todayYieldCard #todayYield { margin-top: 10px; font-size: 24px; }
@media (max-width: 1250px) {
  #gpsFields, #energyFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gpsFields > article:last-child:nth-child(odd),
  #energyFields > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.statusGrid article, .charts article, .details article { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.energyGrid article { border-top: 2px solid #82512c; }
.statusGrid span { display: block; color: var(--muted); font-size: 12px; }
.statusGrid strong { display: block; margin-top: 12px; font-size: 26px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#location, #gps, #victron { font-size: 18px; }
#solar, #battery { color: #ffad67; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; background: #121821; border: 1px solid var(--border); border-radius: 12px; }
.toolbar label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.mapBand { height: min(62vh, 620px); min-height: 360px; border: 1px solid #394557; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 36px #0003; }
#map { width: 100%; height: 100%; background: #242b33; }
.caravanMarker { background: transparent; border: 0; }
.caravanMarker svg { display: block; overflow: visible; filter: drop-shadow(0 3px 4px #0006); }
.caravanMarker:focus-visible { outline: 3px solid #ff963e; outline-offset: 4px; border-radius: 12px; }
.leaflet-control-zoom a { background: #161c25 !important; color: #edf0f5 !important; border-color: #394557 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #161c25; color: #edf0f5; }
.charts, .details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.charts h2, .details h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; }
.charts canvas { height: 230px !important; }
.chartScroll { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-color: #795435 #141b24; scrollbar-width: thin; }
.chartScroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chartLayout { display: grid; grid-template-columns: minmax(0, 1fr) 10px; gap: 8px; }
.chartZoom { height: 230px; overflow-y: scroll; overflow-x: hidden; scrollbar-color: #795435 #141b24; scrollbar-width: thin; overscroll-behavior: contain; }
.chartZoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chartZoomTrack { height: 1150px; width: 1px; }
.chartTrack { position: relative; }
.chartViewport { position: sticky; left: 0; height: 230px; }
.chartArtwork { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 12px; }
.chartWatermark { position: absolute; width: min(180px, 70%); height: 180px; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #b3c6dc; opacity: .055; }
.chartViewport canvas, .historyChart canvas { position: relative; z-index: 1; }
.historyChart { position: relative; }
.chartHint { font-size: 10px; color: var(--muted); margin: 12px 0 0; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .statusGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statusGrid.climateGrid { grid-template-columns: 1fr; }
  
}
@media (max-width: 600px) {
  .dashboard { padding: 18px 12px; gap: 18px; }
  header { align-items: stretch; flex-direction: column; }
  header h1 { font-size: 25px; }
  header select { width: 100%; }
  .statusGrid, #gpsFields, #energyFields, #climateFields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .statusGrid article { padding: 14px; }
  .statusGrid strong { font-size: 22px; }
  #location, #gps, #victron { font-size: 15px; }
  .groupNote { display: none; }
  .mapBand { min-height: 330px; height: 48vh; }
  .charts, .details { grid-template-columns: 1fr; }
  .toolbar label { width: 100%; justify-content: space-between; }
  .toolbar input { flex: 1; min-width: 0; }
}

.connectionBadge[data-online="false"] { color: #ff9b9b; border-color: #783d45; background: #351d25; }
button.connectionBadge { min-height: 32px; color: #c6d0de; background: #202733; cursor: help; }
#victron.connectionBadge { display: inline-block; font-size: 13px; margin-top: 12px; }
#chargeState { font-size: 19px; }
.wifiStatus { position: relative; }
.headerTools .wifiStatus { min-width: 0; max-width: 100%; }
.headerTools #deviceSelect { width: 100%; max-width: 100%; min-width: 0; }
.wifiTooltip { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; max-width: 290px; padding: 16px; border: 1px solid #465266; border-radius: 12px; background: #161c25; box-shadow: 0 8px 30px #0008; z-index: 1100; pointer-events: none; }
.wifiStatus:hover .wifiTooltip, .wifiStatus:focus-within .wifiTooltip { display: grid; gap: 8px; }
#wifiName { overflow-wrap: anywhere; } #wifiSignal { color: var(--muted); }
.signalIcon { display: flex; align-items: flex-end; gap: 4px; height: 24px; color: var(--accent); }
.signalIcon i { width: 7px; height: 6px; border-radius: 2px; background: #3b4656; }
.signalIcon i:nth-of-type(2) { height: 12px; } .signalIcon i:nth-of-type(3) { height: 18px; } .signalIcon i:nth-of-type(4) { height: 24px; }
.signalIcon i.lit { background: #82e4b2; }
#historyDialog { width: min(1000px, 95vw); max-height: 90vh; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: #edf0f5; }
#historyDialog::backdrop { background: #000b; }
#historyDialog select { background: #10151d; color: #fff; padding: 8px; border-radius: 8px; }
.historyNote, #historyStatus { font-size: 13px; color: var(--muted); line-height: 1.6; }
.historyChart { height: 270px; margin: 20px 0; }
.tableScroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; white-space: nowrap; font-size: 13px; }
.cardActions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
th, td { padding: 12px; text-align: right; border-bottom: 1px solid var(--border); } th { color: var(--muted); } th:first-child, td:first-child { text-align: left; }

/* Travel dashboard: quiet surfaces, clear hierarchy and data-led graphics. */
:root { --panel: #151b22; --border: #29323c; --muted: #9da9b7; --accent: #ffa153; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 130px) + 20px); }
body { background: radial-gradient(ellipse at 85% 0, #30231766, transparent 38%), #0d1117; }
.dashboard { max-width: 1400px; gap: 16px; padding: 32px 32px 24px; }
.uiIcon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.masthead { position: sticky; top: 0; z-index: 1200; padding: 16px 0; margin-bottom: 12px; background: #0d1117f5; box-shadow: 0 10px 24px #0003; backdrop-filter: blur(14px); }
.masthead::before { content: ''; position: absolute; inset: 0 -16px; background: inherit; z-index: -1; border-bottom: 1px solid var(--border); }
.chartViewport canvas { cursor: crosshair; }
.voltageLegend { display: flex; justify-content: space-between; position: relative; max-width: 230px; padding-top: 9px; margin: -10px 0 12px; color: var(--muted); font-size: 10px; cursor: help; }
.voltageLegend::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 4px; background: linear-gradient(to right, rgb(248,100,100), rgb(245,202,82) 60%, rgb(105,216,155)); }
.brandBlock, .headerTools, .headerTools nav { display: flex; align-items: center; gap: 18px; }
.brandMark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #8a5835; border-radius: 20px; color: var(--accent); background: linear-gradient(145deg, #493222, #241e1b); box-shadow: 0 8px 28px #0003; }
.brandMark .uiIcon { width: 36px; height: 36px; }
.brandMark img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.eyebrow { display: block; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 2.2px; margin-bottom: 6px; }
header h1 { font-size: 29px; letter-spacing: -1px; font-weight: 750; }
header h1::before { display: none; }
header h1 em { font-style: normal; font-weight: 400; color: #bdc5ce; }
header p { font-size: 12px; }
#refreshStatus:empty { display: none; }
.headerTools { gap: 24px; }
.headerTools nav { gap: 16px; }
.headerTools a { display: inline-flex; gap: 7px; align-items: center; color: #b9c3ce; text-decoration: none; font-size: 12px; }
.headerTools a:hover { color: var(--accent); }
.headerTools .uiIcon { width: 17px; height: 17px; }
.iconButton { width: 42px; min-width: 42px; padding: 0; background: #1b222d; border-color: #394557; color: #ffb779; }
header select { min-width: 150px; font-size: 12px; background: #181f28; border-color: var(--border); }
.metricGroup { --section-color: #8dbbda; border: 1px solid var(--border); border-radius: 16px; background: #141a22cc; padding: 4px 18px; }
.metricGroup:has(#energyTitle) { --section-color: #ffad67; }
.metricGroup:has(#climateTitle) { --section-color: #87cbb9; }
.groupToggle { min-height: 64px; font-size: 12px; letter-spacing: 1px; gap: 14px; }
.sectionIcon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--section-color) 10%, transparent); color: var(--section-color); border: 1px solid color-mix(in srgb, var(--section-color) 17%, transparent); }
.chevron { position: absolute; right: 0; top: calc(50% - 10px); width: 20px; margin: 0; text-align: center; font-size: 20px; color: #84909e; }
.groupNote { font-size: 11px; }
.metricGroup:has(.groupToggle[aria-expanded="true"]) { border-color: #414b57; }
.metricGroup .statusGrid { margin: 0 0 14px; }
.statusGrid article { position: relative; border-radius: 12px; background: linear-gradient(145deg, #1c242e, #151c25); padding: 20px; border: 1px solid #303a46; }
.energyGrid article { border-top: 1px solid #514032; }
.statusGrid .metricLabel { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.metricLabel .uiIcon { width: 17px; height: 17px; color: var(--section-color); }
.statusGrid strong { font-size: 29px; letter-spacing: -.8px; font-weight: 650; }
#location, #gps { font-size: 16px; letter-spacing: -.2px; }
#heading { font-size: 25px; }
#chargeState { font-size: 19px; }
.connectionBadge { letter-spacing: .6px; }
.connectionBadge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; background: currentColor; vertical-align: 1px; }
.connectionBadge[data-online="true"]::before { box-shadow: 0 0 9px #82e4b255; }
.sparkline { display: block; width: 100%; height: 36px; margin-top: 16px; color: var(--section-color); }
.sparkline:empty { display: none; }
.extrema { border-color: #3b4754; }
.extrema small { font-size: 10px; }
.extrema b { font-size: 12px; }
.sectionHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 0 2px; }
.sectionHeading h2 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.sectionCaption { color: var(--muted); font-size: 12px; }
.toolbar { background: #171e27; border-radius: 14px; gap: 7px; padding: 12px; }
.toolbar button { font-size: 12px; min-height: 38px; padding: 8px 13px; }
.toolbar input { min-height: 38px; padding: 6px 8px; font-size: 12px; }
.toolbar button[data-hours] { border-color: transparent; background: transparent; }
.toolbar button.active { background: #3e2d21; border-color: #87522d; color: #ffb779; }
.toolbar button:disabled { opacity: .45; cursor: default; }
.mapBand { border-radius: 18px; border-color: #4a514b; height: min(57vh, 560px); box-shadow: 0 18px 45px #0004; }
.charts, .details { gap: 16px; }
.charts article { padding: 12px 16px 14px; border-radius: 16px; background: linear-gradient(160deg, #19212b, #121922); box-shadow: 0 6px 22px #0002; }
.charts h2 { font-size: 14px; letter-spacing: -.1px; margin-bottom: 6px; }
.chartHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.charts .chartHeader h2 { margin: 0; flex: 0 1 auto; }
.chartLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
.chartLegend button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; text-align: left; }
.chartLegend button:hover { color: #edf0f5; background: transparent; }
.chartLegend button[aria-pressed="false"] { text-decoration: line-through; opacity: .5; }
.chartLegendSwatch { width: 18px; flex: 0 0 18px; border-top: 2px solid; }
.charts h2::before { content: ''; display: inline-block; height: 11px; width: 3px; border-radius: 2px; margin-right: 9px; background: var(--accent); }
.details { margin-top: 12px; }
.details article { padding: 24px; border-radius: 16px; background: #141b24; }
.details h2 { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.details h2 .uiIcon { color: var(--accent); }
.diagnosticSparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: 42px; }
.diagnosticSparks span { display: block; color: var(--muted); font-size: 10px; line-height: 14px; }
.diagnosticSparks .sparkline { margin-top: 2px; height: 26px; color: #6db7ff; }
.diagnosticSparks #heapSpark { color: #82e4b2; }
.cardSubtitle { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.cardActions button { background: #30261f; color: #ffb779; border-color: #67452b; width: 100%; font-size: 12px; }
.cardActions button:hover { background: #483021; }
#victron { max-width: 100%; white-space: normal; line-height: 1.3; text-align: center; font-size: 14px; }
#notificationDialog { width: min(760px, 95vw); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: #edf0f5; }
#notificationDialog::backdrop { background: #000b; }
.notificationPermission { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 20px; }
.notificationPermission p { flex: 1 1 260px; margin: 0; color: var(--muted); }
#notificationRuleForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #10151d; }
#notificationRuleForm label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
#notificationRuleForm input, #notificationRuleForm select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #394557; border-radius: 8px; background: #0d1117; color: #edf0f5; }
#notificationRuleForm button { align-self: end; }
.notificationRules { display: grid; gap: 8px; margin-top: 16px; color: var(--muted); }
.notificationRule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.notificationRule button { min-height: 34px; padding: 5px 10px; background: #351d25; color: #ff9b9b; border-color: #783d45; }
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); margin: 0; padding: 14px max(12px, calc((100vw - 1336px) / 2)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: #0d1117f5; backdrop-filter: blur(12px); color: #7e8a98; font-size: 10px; letter-spacing: 1.2px; }
footer span { letter-spacing: 0; }
@media (max-width: 1100px) { .headerTools nav { display: none; } .toolbar label { flex: 1; } .toolbar input { width: 100%; } }
@media (max-width: 600px) {
  .dashboard { padding: 18px 12px; gap: 12px; }
  .masthead { gap: 18px; padding-bottom: 20px; margin-bottom: 4px; }
  .masthead::before { left: -12px; right: -12px; }
  .brandMark { width: 50px; height: 50px; border-radius: 15px; }
  .brandMark .uiIcon { width: 30px; height: 30px; }
  .brandBlock { gap: 12px; }
  header h1 { font-size: 25px; }
  .headerTools { width: 100%; }
  .metricGroup { padding: 3px 10px; border-radius: 13px; }
  .groupToggle { font-size: 10px; letter-spacing: .3px; gap: 8px; min-height: 60px; }
  .sectionIcon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; }
  .sectionIcon .uiIcon { width: 18px; height: 18px; }
  .chevron { margin-right: 0; }
  button.connectionBadge { font-size: 9px; padding: 5px 7px; letter-spacing: .2px; }
  .connectionBadge::before { margin-right: 4px; }
  .statusGrid article { padding: 14px 12px; }
  .statusGrid .metricLabel { font-size: 10px; gap: 6px; }
  .statusGrid strong { font-size: 24px; }
  #location, #gps { font-size: 14px; }
  #heading { font-size: 22px; }
  #chargeState { font-size: 16px; }
  #victron.connectionBadge { font-size: 10px; padding: 5px 6px; }
  #notificationRuleForm { grid-template-columns: 1fr; }
  .sectionHeading { margin-top: 20px; }
  .sectionHeading h2 { font-size: 21px; }
  .sectionCaption { max-width: 110px; text-align: right; font-size: 10px; }
  .toolbar label { flex: auto; }
  .mapBand { min-height: 330px; height: 48vh; border-radius: 14px; }
  .details article { padding: 18px; }
  .charts article { padding: 10px 12px 12px; }
  .cardSubtitle { font-size: 10px; }
  footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.dashboard { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

.leaflet-control-layers { background: #161c25; color: #edf0f5; border: 1px solid #394557 !important; border-radius: 9px; }
.leaflet-control-layers label { cursor: pointer; }
.mapLayerSelect { min-width: 120px; min-height: 36px; padding: 7px 10px; border: 1px solid #394557; border-radius: 9px; background: #161c25; color: #edf0f5; font: inherit; cursor: pointer; box-shadow: 0 2px 9px #0005; }


.metricGroup:has(#chargerTitle) { --section-color: #bd9aff; }
#chargerConnection.connectionBadge { display:inline-block; font-size:13px; letter-spacing:.4px; }
#chargerState { font-size:19px; }
@media (max-width:1250px) { #chargerFields { grid-template-columns:repeat(2,minmax(0,1fr)); } #chargerFields > article:last-child { grid-column:1/-1; } }
@media (max-width:600px) { #chargerFields { grid-template-columns:minmax(0,1fr); } }

/* Iga avatud alajaotuse sõltumatu periood ja eksport. */
.groupHeading {flex-wrap:wrap; gap:12px}
.sectionControls {display:flex;align-items:center;gap:12px;margin-left:auto}
.metricGroup:has(.groupToggle[aria-expanded="false"]) .sectionControls {display:none}
.rangeButtons {display:flex;gap:4px}
.rangeButtons button,.exportMenu summary {padding:8px 12px;font-size:12px;cursor:pointer}
.rangeButtons .active {background:#ff963e;color:#171b22;border-color:#ff963e}
.exportMenu {position:relative}
.exportMenu summary {border:1px solid #394455;border-radius:8px;list-style:none}
.exportMenu summary::after {content:" ▾"}
.exportOptions {position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;padding:6px;background:#222e3c;border:1px solid #46536a;border-radius:10px;box-shadow:0 8px 30px #0008}
.exportOptions button {display:block;width:100%;text-align:left;margin:3px 0}
@media(max-width:700px){.sectionControls{width:100%;margin-left:0;justify-content:space-between}.groupHeading .groupNote{margin-left:auto}}

.rangeButtons button:not(.active), .exportOptions button {background:#26313e;color:#dce3ec;border:1px solid #46536a}
.rangeButtons button:not(.active):hover, .exportOptions button:hover {background:#38475b}

#chargerFields {grid-template-columns:repeat(3,minmax(0,1fr))}
#chargerFields > article:last-child {grid-column:auto}
@media(max-width:1250px){#chargerFields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#chargerFields{grid-template-columns:minmax(0,1fr)}}

.mapBand {position:relative;isolation:isolate}
.mapLocationButton {position:absolute;left:4px;bottom:4px;z-index:1000;min-height:40px;padding:9px 14px;font-size:12px;box-shadow:0 3px 12px #0005}
.mapLocationButton:disabled {opacity:.6;cursor:default}

#energyFields {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1250px){#energyFields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#energyFields{grid-template-columns:minmax(0,1fr)}}

.yieldCardHeading {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.yieldCardHeading .metricLabel {margin-bottom:0}
.yieldCardHeading #openHistory {margin-left:auto;flex-shrink:0;min-height:30px;padding:5px 9px;font-size:11px}

#shuntFields {grid-template-columns:repeat(3,minmax(0,1fr))}
#shuntFields strong.connectionBadge{font-size:13px}
@media(max-width:1250px){#shuntFields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#shuntFields{grid-template-columns:minmax(0,1fr)}}
.connectionBadge[data-warning="true"] { color: #f5c65d; border-color: #78602c; background: #332b18; }
.connectionBadge[data-warning="true"]::before { box-shadow: 0 0 9px #f5c65d55; }

#shuntSoc[data-warning="true"], #shuntSocWarning[data-warning="true"] { color:#ffb454; }