/* --- Themes ---------------------------------------------------------------------------------------
   <html data-theme="..."> picks one (User.theme, see app/themes.py); "auto" follows the device.
   Each theme sets the page colours and uses either the light or the dark data palette below. The data
   palettes (price-level ramp, smart-plan orange, statistics slots --s1..--s8) are validated against
   every theme's card colour; light: light/sand/contrast, dark: dark/nord/oled. */

/* Light data palette */
:root {
  color-scheme: light;
  --lvl-cheap: #86b6ef; --lvl-normal: #2a78d6; --lvl-high: #104281; --planned: #eb6834;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --s-other: #7d858f; --s-unknown: #bfc4ca;
}
/* Dark data palette */
:root[data-theme="dark"], :root[data-theme="nord"], :root[data-theme="oled"] {
  color-scheme: dark;
  --lvl-cheap: #256abf; --lvl-normal: #5598e7; --lvl-high: #b7d3f6; --planned: #d95926;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --s-other: #8a939e; --s-unknown: #4d5560;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: dark;
    --lvl-cheap: #256abf; --lvl-normal: #5598e7; --lvl-high: #b7d3f6; --planned: #d95926;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --s-other: #8a939e; --s-unknown: #4d5560;
  }
}

/* Light (also "auto" on a light device) */
:root {
  --bg: #f4f5f7; --card: #fff; --text: #1b1f24; --muted: #6a737d; --border: #dde1e6; --grid: #e4e3df;
  --accent: #0a7d5a; --accent-text: #fff; --danger: #c0392b;
  --ok-bg: #e3f5ec; --err-bg: #fbe9e7; --info-bg: #e8f0fb;
}
/* Dark (also "auto" on a dark device) */
:root[data-theme="dark"] {
  --bg: #111418; --card: #1b2027; --text: #e6e8eb; --muted: #9aa4af; --border: #2e353e; --grid: #34383e;
  --accent: #2fbf8a; --accent-text: #0b1a14; --danger: #ff7b6b;
  --ok-bg: #173327; --err-bg: #3a1c19; --info-bg: #1a2638;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    --bg: #111418; --card: #1b2027; --text: #e6e8eb; --muted: #9aa4af; --border: #2e353e; --grid: #34383e;
    --accent: #2fbf8a; --accent-text: #0b1a14; --danger: #ff7b6b;
    --ok-bg: #173327; --err-bg: #3a1c19; --info-bg: #1a2638;
  }
}
/* Nord: cool blue-grey, frost accent */
:root[data-theme="nord"] {
  --bg: #20242d; --card: #292e39; --text: #eceff4; --muted: #a7b1c2; --border: #3b4252; --grid: #3b4252;
  --accent: #88c0d0; --accent-text: #1d2129; --danger: #e5838c;
  --ok-bg: #2f4038; --err-bg: #4a3036; --info-bg: #2f3d52;
}
/* OLED: true black, saves power on OLED phones */
:root[data-theme="oled"] {
  --bg: #000; --card: #0b0b0c; --text: #f2f2f2; --muted: #9c9c9c; --border: #262628; --grid: #222224;
  --accent: #3ddc97; --accent-text: #00140b; --danger: #ff6b6b;
  --ok-bg: #0f2a1e; --err-bg: #2e1212; --info-bg: #101c2c;
}
/* Sand: warm paper tones, terracotta accent */
:root[data-theme="sand"] {
  --bg: #f3ede2; --card: #fffbf4; --text: #2b2620; --muted: #6b6257; --border: #e3d9c9; --grid: #ebe2d3;
  --accent: #a4512a; --accent-text: #fff; --danger: #b3261e;
  --ok-bg: #e6f0dc; --err-bg: #f7e2db; --info-bg: #e7edf3;
}
/* High contrast: black on white, strong borders and focus rings */
:root[data-theme="contrast"] {
  --bg: #fff; --card: #fff; --text: #000; --muted: #333; --border: #000; --grid: #8a8a8a;
  --accent: #003c9e; --accent-text: #fff; --danger: #a00000;
  --ok-bg: #d4f0d4; --err-bg: #f8d4d4; --info-bg: #d9e6fb;
}
:root[data-theme="contrast"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; }
:root[data-theme="contrast"] a:not(.button) { text-decoration: underline; }

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
main { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
h1, h2 { margin-top: 0; }
label { display: block; margin-bottom: 12px; font-weight: 500; }
input[type=email], input[type=password], input:not([type]) { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.row input:not([type]) { display: inline-block; width: auto; flex: 1; min-width: 160px; margin: 0; }
button, .button { display: inline-block; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secondary, .button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 400; }
button.danger, .danger { color: var(--danger); }
button.toggle.off { background: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline, .actions form { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
code { font-size: 0.9em; word-break: break-all; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.flash { padding: 10px 12px; border-radius: 6px; background: var(--info-bg); }
.flash.success { background: var(--ok-bg); }
.flash.error { background: var(--err-bg); }
details { margin-top: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.account { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.account-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.charger { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8em; background: var(--bg); border: 1px solid var(--border); }
.status.charging { background: var(--ok-bg); }
.status.waiting { background: var(--info-bg); }
.status.offline { background: var(--err-bg); }
.events { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 600px) {
  table thead { display: none; }
  table td { display: block; border: 0; padding: 2px 0; }
  table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
}
select { padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; max-width: 100%; }
.status.cheap { background: var(--ok-bg); }
.status.high { background: var(--err-bg); }
.actions form.eco { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.swatch.cheap, .bar.cheap { background: var(--lvl-cheap); }
.swatch.normal, .bar.normal { background: var(--lvl-normal); }
.swatch.high, .bar.high { background: var(--lvl-high); }
.swatch.now { background: transparent; border: 2px solid var(--text); }
.status.normal { background: var(--bg); }
.levels { list-style: none; padding: 0; }
.levels li { margin: 4px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); }
.row.spread { justify-content: space-between; margin-top: 0; }
.row.tight { margin-top: 0; }
.price-chart { margin: 16px 0 24px; }
.price-chart figcaption { font-weight: 600; margin-bottom: 8px; }
.plot { position: relative; height: 180px; border-bottom: 1px solid var(--border); }
.threshold { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); pointer-events: none; z-index: 1; }
.threshold span { position: absolute; top: -1.3em; font-size: 0.75em; color: var(--muted); background: var(--card); padding: 0 4px; }
.bars { position: absolute; inset: 0; display: flex; gap: 2px; }
.bar-slot { position: relative; flex: 1; min-width: 0; height: 100%; cursor: default; outline: none; }
.bar-slot:hover, .bar-slot:focus-visible { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.bar { position: absolute; left: 0; right: 0; border-radius: 4px 4px 0 0; }
.bar-slot.is-now .bar { outline: 2px solid var(--text); outline-offset: 1px; }
.x-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.tip { position: absolute; z-index: 10; padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--card); font-size: 0.85em; white-space: nowrap; pointer-events: none; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 600; margin-bottom: 6px; }
fieldset .check { margin-bottom: 6px; }
input[type=number] { display: block; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; width: 10em; }
.top nav a { text-decoration: none; }
.inline-check { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
.threshold.left span { left: 0; }
.threshold.right span { right: 0; }
@media (max-width: 600px) {
  .bars { gap: 1px; }
  .bar { border-radius: 2px 2px 0 0; }
}

/* Smart plan: planned charging periods (--planned, see Themes), a separate strip under the price bars. */
.swatch.planned { background: var(--planned); }
.plan-strip { display: flex; gap: 2px; height: 6px; margin-top: 4px; }
.plan-strip span { flex: 1; border-radius: 2px; }
.plan-strip span.on { background: var(--planned); }
@media (max-width: 600px) { .plan-strip { gap: 1px; } }
input[type=time] { display: block; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.check input[type=number] { display: inline-block; width: 6em; margin: 0 4px; padding: 4px 6px; }
h2 { margin-top: 18px; }
form.direct { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: nowrap; }
form.direct input[type=number] { display: inline-block; width: 4.2em; margin: 0; padding: 4px 6px; }
button.small { padding: 4px 8px; }
details.location { margin: 6px 0 0; }
details.location form { margin-top: 8px; max-width: 26em; }
details.location select { display: block; margin-top: 4px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.tile { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tile strong { font-size: 1.2em; }
.problems { list-style: none; padding: 0; margin: 0; }
.problems li { padding: 6px 0; border-bottom: 1px solid var(--border); }
h2.danger { color: var(--danger); }
.s1 { --c: var(--s1); } .s2 { --c: var(--s2); } .s3 { --c: var(--s3); } .s4 { --c: var(--s4); }
.s5 { --c: var(--s5); } .s6 { --c: var(--s6); } .s7 { --c: var(--s7); } .s8 { --c: var(--s8); }
.other { --c: var(--s-other); } .unknown { --c: var(--s-unknown); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 8px 0; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); vertical-align: middle; }
.mchart { position: relative; margin: 8px 0 12px; }
.mplot { position: relative; display: flex; align-items: flex-end; justify-content: space-around; height: 220px; padding-left: 44px; border-bottom: 1px solid var(--muted); }
.mtick { position: absolute; left: 44px; right: 0; border-top: 1px solid var(--grid); pointer-events: none; }
.mtick span { position: absolute; left: -44px; top: -0.7em; width: 40px; text-align: right; font-size: 0.75em; color: var(--muted); }
.mcol { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.mcol:hover, .mcol:focus-visible { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.mstack { width: min(24px, 70%); display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.mstack span { display: block; min-height: 2px; flex-basis: 0; background: var(--c); }
.mlabels { display: flex; justify-content: space-around; padding-left: 44px; font-size: 0.75em; color: var(--muted); text-align: center; }
.mlabels > span { flex: 1; }
.mtip { position: absolute; top: 0; z-index: 2; min-width: 150px; padding: 8px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 4px 14px rgb(0 0 0 / 0.15); font-size: 0.85em; pointer-events: none; }
.mtip div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mtip .line { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c); }
.costs input[type=number] { display: inline-block; width: 6em; margin: 0 4px; padding: 4px 6px; }
.costs .inline-check { margin: 8px 0 0; }
a.button.small { padding: 4px 10px; }
@media (max-width: 600px) { .mlabels { font-size: 0.62em; } }
/* Account page */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.theme-choice { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-weight: 400; cursor: pointer; }
.theme-choice.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-choice input { margin: 0; }
.theme-preview { display: inline-flex; gap: 3px; padding: 5px; border-radius: 6px; border: 1px solid var(--border); flex: none; }
.theme-preview > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: 600; }
.theme-preview i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.theme-preview.auto { background: linear-gradient(90deg, #f4f5f7 50%, #111418 50%); }
.narrow-form { max-width: 26em; }
form.stack fieldset label { margin-bottom: 2px; }
h3.danger { color: var(--danger); margin-top: 24px; }
/* Admin */
.table-scroll { overflow-x: auto; }
table.facts th { width: 11em; font-weight: 500; color: var(--muted); vertical-align: top; }
@media (max-width: 600px) { table.facts th { display: block; width: auto; border: 0; padding-bottom: 0; } }
details.weekdays { margin: 4px 0 12px; }
.weekday-times th { font-weight: 500; width: 8em; }
.weekday-times td, .weekday-times th { padding: 4px 6px; border: 0; }
.weekday-times input[type=time] { margin: 0; }
@media (max-width: 600px) { .weekday-times tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .weekday-times th, .weekday-times td { display: block; } }
/* Prices page: charging plan per car, a strip per car in its statistics colour */
.car-picker { gap: 6px 16px; margin: 8px 0 12px; }
.car-plan { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.car-plan h3 { margin: 0 0 4px; }
.plan-strip.car span.on { background: var(--c); }
.swatch.car-swatch { background: var(--c); }