/* Rotorama battery tests - light theme matching the rotorama.cz e-shop
 * (Rubik font, red #E4022E, dark #313131 navbar, light gray borders) */
:root {
	--bg: #fff;
	--bg-soft: #F7F7F7;
	--bg-hover: #f0f0f0;
	--text: #313131;
	--muted: #707070;
	--faint: #A0A0A0;
	--accent: #E4022E;
	--accent-dark: #c60228;
	--accent-pale: #ffe6eb;
	--ok: #3AB54A;
	--warn: #b8860b;
	--warn-bg: #fff8e1;
	--err: #E4022E;
	--border: #E4E4E4;
	--border-strong: #D2D2D2;
	--navbar: #313131;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.55 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }

h1 { font-size: 1.7rem; font-weight: 500; margin: .9rem 0; }
h2 { font-size: 1.2rem; font-weight: 500; margin: 0 0 .7rem; }

code { background: var(--bg-soft); border: 1px solid var(--border); padding: .05rem .35rem; border-radius: 4px; font-size: .85em; }

.muted { color: var(--muted); }

/* header - dark navbar like the e-shop */
.topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0 1.4rem; background: var(--navbar); min-height: 62px;
	flex-wrap: wrap;
}
.topbar .brand { display: flex; align-items: center; gap: .7rem; font-weight: 500; font-size: 1.1rem; padding: .5rem 0; }
.topbar .brand-logo { height: 30px; display: block; }
.topbar .brand a:hover { text-decoration: none; }
.topbar .brand-name { color: #fff; border-left: 1px solid #565656; padding-left: .7rem; letter-spacing: .02em; }
.topbar .brand-name span { color: var(--accent); font-weight: 400; }
.topbar .brand-name:hover { color: var(--accent-pale); }
.topbar nav { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; padding: .6rem 0; }
.topbar nav a { color: #fff; font-size: .95rem; }
.topbar nav a:hover { color: var(--accent-pale); text-decoration: none; }
.topbar .lang a { color: var(--faint); margin-left: .4rem; font-size: .85rem; }
.topbar .lang a.active { color: #fff; font-weight: 700; }
.topbar .admin-link { border: 1px solid var(--accent); border-radius: 6px; padding: .2rem .6rem; font-size: .85rem; }
.topbar .admin-link:hover { background: var(--accent); }

/* cards & layout */
.card {
	background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
	padding: 1.1rem 1.3rem; margin: 1rem 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.card.narrow { max-width: 480px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* flash messages */
.flash { padding: .6rem 1rem; border-radius: 6px; margin: .8rem 0; background: var(--bg-soft); border-left: 4px solid var(--faint); }
.flash.success { border-left-color: var(--ok); background: #f0faf1; }
.flash.error { border-left-color: var(--err); background: var(--accent-pale); }
.flash.warning { border-left-color: var(--warn); background: var(--warn-bg); }

/* homepage intro */
.intro { max-width: 950px; margin: 1.4rem 0 1.2rem; }
.intro p { font-size: 1.05rem; line-height: 1.65; color: #4b4b4b; margin: 0; }
.intro a { font-weight: 500; white-space: nowrap; }

/* filter bar */
.filter-bar {
	display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
	background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
	padding: .7rem 1rem; margin: 1rem 0;
}
.filter-group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.filter-group.grow { flex: 1 1 260px; }
.filter-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
.chips { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.chip {
	display: inline-block; padding: .22rem .75rem; border-radius: 999px; font-size: .85rem;
	border: 1px solid var(--border-strong); color: var(--text); background: #fff;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.reset { border-style: dashed; color: var(--muted); }

/* dual-range slider */
.range-slider { position: relative; flex: 1 1 160px; min-width: 160px; height: 26px; }
.range-slider .rs-track, .range-slider .rs-fill {
	position: absolute; top: 11px; height: 4px; border-radius: 2px; pointer-events: none;
}
.range-slider .rs-track { left: 0; right: 0; background: var(--border-strong); }
.range-slider .rs-fill { background: var(--accent); }
.range-slider input[type=range] {
	position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 26px; margin: 0;
	-webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.range-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
	width: 16px; height: 16px; border-radius: 50%; background: #fff;
	border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.range-slider input[type=range]::-moz-range-thumb {
	pointer-events: auto; cursor: pointer;
	width: 14px; height: 14px; border-radius: 50%; background: #fff;
	border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.rs-readout { color: var(--muted); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* tables */
.table-scroll { overflow-x: auto; }
/* the list and compare tables have grown past a dozen columns: give those
   pages the full desktop width and stop cells from wrapping mid-value */
main:has(.compare-source), main:has(table.compare) { max-width: min(96vw, 1560px); }
.compare-source td { white-space: nowrap; }
.compare-source td.name { white-space: normal; min-width: 170px; }
/* equal battery columns whatever the name or image size; the template sets
   a per-count min-width inline so narrow screens scroll instead of crush */
table.compare { table-layout: fixed; width: 100%; }
table.compare tr:first-child th:first-child { width: 190px; }
table.compare th, table.compare td { overflow-wrap: break-word; }
table.grid { border-collapse: collapse; width: 100%; }
table.grid th, table.grid td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid th { color: var(--muted); font-weight: 500; font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; }
table.grid th a { color: var(--muted); }
table.grid tr:hover td { background: var(--bg-soft); }
table.grid td.name a { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 500; }
table.grid td.name a:hover { color: var(--accent); text-decoration: none; }
table.grid td.name img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
table.grid a.sorted { color: var(--accent); }
table.stats th { width: 30%; color: var(--text); font-weight: 500; text-transform: none; font-size: .95rem; }
table.stats th[title] { cursor: help; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
table.stats td.value { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
table.stats td.value .amps { font-weight: 400; color: var(--muted); margin-left: .3rem; }
table.compare th img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; display: block; margin-bottom: .3rem; }
table.compare td.best { color: var(--ok); font-weight: 700; }

/* buttons & forms */
.btn {
	display: inline-block; background: var(--accent); border: none; color: #fff;
	padding: .48rem 1rem; border-radius: 4px; cursor: pointer; font-size: .92rem;
	font-family: inherit; font-weight: 500;
}
.btn:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border-strong); }
.btn.secondary:hover { background: var(--bg-soft); }
.btn.danger { background: #fff; color: var(--err); border: 1px solid var(--err); }
.btn.danger:hover { background: var(--accent-pale); }
.btn.small { padding: .2rem .6rem; font-size: .8rem; }
.btn.buy { font-size: 1.05rem; margin-top: .6rem; padding: .6rem 1.4rem; }
.row-actions { display: flex; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; }

form label { display: block; color: var(--muted); font-size: .85rem; margin-top: .6rem; }
form input[type=text], form input[type=password], form input[type=number], form textarea, form select {
	width: 100%; max-width: 480px; background: #fff; color: var(--text);
	border: 1px solid var(--border-strong); border-radius: 4px; padding: .45rem .6rem; font: inherit;
}
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--accent-pale); border-color: var(--accent); }
form textarea.code { font-family: ui-monospace, Consolas, monospace; max-width: 100%; }
form input[type=submit] { margin-top: .8rem; }
form input[type=file] { color: var(--muted); margin: .4rem 0; }
form ul.error, form span.error { color: var(--err); list-style: none; padding: 0; }

/* parameters admin: a wide data table - give it room and sane input widths */
body.admin main { max-width: min(96vw, 1900px); }
table.params { width: 100%; }
table.params td { white-space: nowrap; }
table.params input, table.params select { max-width: none; padding: .25rem .4rem; font-size: .85rem; }
table.params input[name$='[label_cs]'], table.params input[name$='[note_cs]'],
table.params input[name$='[label_en]'], table.params input[name$='[note_en]'] { width: 100%; min-width: 150px; }
table.params input[name$='[unit]'] { width: 75px; }
table.params input[name$='[decimals]'], table.params input[name$='[sort_order]'] { width: 55px; }

/* battery detail */
.breadcrumb { margin: .6rem 0; }
.battery-head { display: flex; gap: 1.6rem; align-items: flex-start; margin: 1rem 0; flex-wrap: wrap; }
.battery-head img { width: 240px; max-width: 40vw; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fff; }
.battery-head h1 { margin: 0 0 .4rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 1rem 0; }
.kpi { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; text-align: center; }
.kpi strong { display: block; font-size: 1.55rem; font-weight: 700; color: var(--accent); }
.kpi span { color: var(--muted); font-size: .82rem; }
.kpi small { display: block; color: var(--faint); font-size: .75rem; margin-top: .2rem; }

.card.warnings { border-left: 4px solid var(--warn); background: var(--warn-bg); }
.card.warnings ul { margin: 0; padding-left: 1.2rem; }
.warn-mark { cursor: help; }
.stale-note { color: var(--warn); font-weight: 500; cursor: help; }
.warn-box { border-left: 4px solid var(--warn); background: var(--warn-bg); border-radius: 6px; padding: .7rem 1rem; margin-top: 1rem; }
.warn-box h3 { margin: 0 0 .4rem; font-size: .95rem; }
.warn-box ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.warn-box p { margin: .3rem 0 0; }

.prose { line-height: 1.65; }
.prose h3 { margin: 1rem 0 .3rem; font-weight: 500; }
.prose p, .prose li { color: #4b4b4b; }
.prose table { border-collapse: collapse; margin: .8rem 0; }
.prose table th, .prose table td { border: 1px solid var(--border-strong); padding: .4rem .7rem; text-align: left; }
.prose table th { background: var(--bg-soft); }
.page { max-width: 820px; }

/* charts */
#discharge-chart svg, #compare-charts svg, #raw-chart svg { width: 100%; height: auto; display: block; }
.raw-controls { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
#raw-chart { min-height: 100px; }
.chart-tip {
	position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--border-strong);
	border-radius: 6px; padding: .4rem .6rem; font-size: .78rem; white-space: nowrap; z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.chart-wrap { position: relative; }
.chart-wrap + .chart-wrap { margin-top: 1.4rem; }
.chart-wrap h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 500; color: var(--muted); }

/* page editor */
.page-editor input[type=text], .page-editor textarea { max-width: none; }
.page-editor .editor-lang { margin-bottom: 1.6rem; }
.page-editor .editor-lang h2 { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.page-editor .editor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-top: .4rem; }
@media (max-width: 1000px) { .page-editor .editor-cols { grid-template-columns: 1fr; } }
.page-editor textarea.code {
	width: 100%; min-height: 420px; resize: vertical;
	font: 13px/1.5 ui-monospace, Consolas, 'Cascadia Code', monospace;
	tab-size: 2; background: #fbfbfb;
}
.page-editor .preview-box {
	border: 1px dashed var(--border-strong); border-radius: 6px;
	padding: .8rem 1rem; min-height: 420px; max-height: 640px; overflow-y: auto;
	background: #fff; font-size: .9rem;
}

/* admin bits */
.thumb { max-width: 180px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; float: right; margin-left: 1rem; }
.ok { color: var(--ok); font-weight: 700; }
.err { color: var(--err); font-weight: 700; cursor: help; }
.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; }
.tag { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border-strong); color: var(--muted); }
.tag:hover { text-decoration: none; }
.tag.on { border-color: var(--ok); color: var(--ok); }
.tag.off { border-color: var(--err); color: var(--err); text-decoration: line-through; }
.tag.overridden { box-shadow: 0 0 0 2px var(--warn) inset; }
details.overrides { margin: .8rem 0; }
details.overrides summary { cursor: pointer; color: var(--muted); }

.calc-link { margin: 1rem 0; }
.calc-link a { font-weight: 500; }

pre.log {
	font-family: ui-monospace, Consolas, monospace; font-size: .8rem; line-height: 1.45;
	white-space: pre-wrap; overflow-wrap: anywhere; max-height: 70vh; overflow: auto;
	background: #fafafa; border: 1px solid var(--border); border-radius: 6px; padding: .8rem 1rem; margin: 0;
}

.toast {
	position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(8px);
	background: #313131; color: #fff; padding: .6rem 1.1rem; border-radius: 6px;
	font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.25);
	opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.site-footer { max-width: 1180px; margin: 0 auto; padding: 1rem; color: var(--faint); font-size: .82rem; border-top: 1px solid var(--border); }
.site-footer a { color: var(--muted); }
.site-footer .disclaimer { max-width: 900px; }
.site-footer .legal { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--border); }