/* ─── Design tokens (themed) ───────────────────────────────────────────
* Theme is selected via ``. The pre-paint script
* in each HTML file's reads localStorage["fs25.dash.v1.theme"]
* and sets the attribute before first paint to avoid a flash.
*
* Available themes: dark-green (default), dark-blue, light, high-contrast, fs25-native.
* `:root` (no attribute) is a safety fallback — same values as dark-green.
*/
/* Geometry tokens (theme-independent) */
:root {
--radius: 8px;
--nav-h: 52px;
}
/* Default + dark-green */
:root,
:root[data-theme="dark-green"] {
--bg: #0d1610;
--surface: #172220;
--surface2: #1f2c28;
--border: #2e3a34;
--accent: #7fb069; /* tlumený list */
--accent2: #e8a838; /* zralé obilí */
--accent3: #c08552; /* hlína (pro budoucí použití) */
--text: #e6ecdf;
--muted: #8a9a82;
--red: #e05252;
--orange: #e07a30;
--teal: #4caf9a;
}
/* Dark blue (cooler night palette) */
:root[data-theme="dark-blue"] {
--bg: #0e1422;
--surface: #162236;
--surface2: #1c2c46;
--border: #2a3654;
--accent: #5a8fad;
--accent2: #f0b429;
--text: #dde7f0;
--muted: #7a8aa0;
--red: #e05252;
--orange: #e07a30;
--teal: #4cc4af;
}
/* Light (office monitor friendly) */
:root[data-theme="light"] {
--bg: #f4f6f1;
--surface: #ffffff;
--surface2: #eef1e7;
--border: #d6dcc6;
--accent: #3a8a22;
--accent2: #b07a00;
--text: #1c2a18;
--muted: #5d7355;
--red: #c43a3a;
--orange: #c45a18;
--teal: #1f8a76;
}
/* High contrast (accessibility) */
:root[data-theme="high-contrast"] {
--bg: #000000;
--surface: #101010;
--surface2: #181818;
--border: #ffffff;
--accent: #ffd400;
--accent2: #ffd400;
--text: #ffffff;
--muted: #bbbbbb;
--red: #ff5555;
--orange: #ff9900;
--teal: #66e0c4;
}
/* FS25-native (echoes the in-game HUD: GIANTS green + steel HUD + wheat gold) */
:root[data-theme="fs25-native"] {
--bg: #0a0d0a;
--surface: #141811;
--surface2: #1d2419;
--border: #2f3b2a;
--accent: #a0c213; /* GIANTS FS25 brand green */
--accent2: #d4a836; /* wheat gold */
--accent3: #8b6f47; /* aged steel-brown */
--text: #f0f2e8;
--muted: #92a08a; /* lifted from #8a9580 for AA contrast on surface2 */
--red: #d04545;
--orange: #e08838;
--teal: #4caf9a;
}
:root[data-theme="fs25-native"] body {
font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}
/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 14px;
min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ─── Nav ────────────────────────────────────────────────────────────── */
nav {
position: sticky; top: 0; z-index: 100;
height: var(--nav-h);
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 20px;
gap: 0;
}
.nav-brand {
font-size: 16px; font-weight: 700; color: var(--accent);
margin-right: 12px; white-space: nowrap;
}
.nav-save {
font-size: 11px; color: var(--muted);
margin-right: 18px; white-space: nowrap;
padding: 2px 8px;
background: var(--surface2);
border-radius: 4px;
max-width: 240px;
overflow: hidden; text-overflow: ellipsis;
}
.nav-version {
font-size: 11px; color: var(--accent);
margin-right: 10px; white-space: nowrap;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-burger {
display: none; /* desktop: hidden; mobile media query shows it */
background: transparent;
border: 1px solid var(--border);
color: var(--text);
width: 32px; height: 32px;
border-radius: 4px;
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0;
margin-right: 8px;
flex-shrink: 0;
}
.nav-burger:hover { background: var(--surface2); border-color: var(--accent); }
.nav-links a {
padding: 6px 14px;
border-radius: var(--radius);
font-size: 13px;
color: var(--muted);
transition: background .15s, color .15s;
}
.nav-links a:hover,
.nav-links a.active {
background: var(--surface2);
color: var(--text);
text-decoration: none;
}
.nav-links a.active { color: var(--accent); }
.nav-status {
margin-left: auto;
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--muted);
}
.dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--muted); flex-shrink: 0;
}
.dot.live { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot.error { background: var(--red); }
/* ─── Notification bell ──────────────────────────────────────────────── */
.bell-slot { position: relative; display: inline-flex; }
.bell {
background: transparent;
border: 1px solid transparent;
color: var(--muted);
border-radius: 6px;
cursor: pointer;
padding: 4px 8px;
font-size: 16px;
line-height: 1;
display: inline-flex; align-items: center; gap: 4px;
position: relative;
}
.bell:hover { background: var(--surface2); color: var(--text); }
.bell.has-alerts { color: var(--accent2); }
.bell-icon { display: inline-block; }
.bell-count {
background: var(--red);
color: #fff;
font-size: 10px; font-weight: 700;
padding: 1px 5px;
border-radius: 9px;
min-width: 16px; text-align: center;
line-height: 1.2;
}
.bell-panel {
position: absolute;
right: 0; top: calc(100% + 6px);
width: 360px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
z-index: 100;
overflow: hidden;
color: var(--text);
}
.bell-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.bell-panel-head h3 {
margin: 0; font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--muted);
}
.bell-close {
background: transparent; border: none;
color: var(--muted); cursor: pointer;
font-size: 18px; line-height: 1;
padding: 0 4px;
}
.bell-close:hover { color: var(--text); }
.bell-list {
list-style: none; padding: 0; margin: 0;
max-height: 50vh; overflow-y: auto;
}
.bell-item {
display: grid;
grid-template-columns: 28px 1fr 16px;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
cursor: pointer;
align-items: center;
transition: background .15s;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--surface2); }
.bell-item-icon { font-size: 18px; line-height: 1; text-align: center; }
.bell-item-text { min-width: 0; }
.bell-item-title {
font-size: 12px; font-weight: 600;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-item-detail {
font-size: 11px;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.bell-item-arrow { color: var(--muted); font-size: 14px; }
.bell-item.bell-urgent .bell-item-icon { color: var(--red); }
.bell-item.bell-warning .bell-item-icon { color: var(--orange); }
/* Per-row dismiss button — invisible until row hover. Hides the alert
from the bell badge until the underlying condition changes (different
items in detail) or the page reloads. */
.bell-item-dismiss {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 2px 6px;
border-radius: 4px;
opacity: 0;
transition: opacity .12s, color .12s, background-color .12s;
flex-shrink: 0;
}
.bell-item:hover .bell-item-dismiss { opacity: 1; }
.bell-item-dismiss:hover { color: var(--red); background: rgba(255,255,255,.05); }
.bell-empty {
padding: 20px 14px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.bell-panel-actions {
padding: 8px 14px;
border-top: 1px solid var(--border);
display: flex; justify-content: flex-end;
}
.bell-dismiss-all {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--muted);
padding: 4px 12px;
border-radius: 6px;
font-size: 11px;
cursor: pointer;
transition: color .12s, border-color .12s;
}
.bell-dismiss-all:hover { color: var(--text); border-color: var(--accent); }
/* Card flash on bell-item click — short pulse to direct user's eye */
@keyframes card-flash {
0% { box-shadow: 0 0 0 2px var(--accent2); }
50% { box-shadow: 0 0 0 3px var(--accent2); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.card-flash { animation: card-flash 1s ease-out; }
/* ─── Main content ───────────────────────────────────────────────────── */
main {
padding: 12px;
max-width: 1920px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Bento content grid — auto-fit columns. Cards keep their natural height
(`align-items:start`) so a tall card doesn't stretch its row neighbours. */
/* Section layout — 4-column CSS grid with sec-fields spanning 2 cells.
* At a wide viewport the field table is the visual anchor (2 of 4 cols,
* left side), the four smaller sections fill the remaining 2 cols and the
* row below. At 1300 px we collapse to 2 cols (sec-fields then = both =
* full width); below 700 px every section stacks in a single column.
*
* grid-auto-flow:row dense lets shorter sections back-fill gaps created
* by sec-fields' span, so the layout stays compact instead of leaving
* empty cells next to the field table.
*/
.masonry {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* Sections are placed explicitly by applyMasonrySpans() (greedy shortest-
column packer), so auto-flow only matters as a fallback for not-yet-
measured sections. */
grid-auto-flow: row dense;
/* 2 px row unit — fine enough that the `grid-row: span N` inline value
written by applyMasonrySpans() lands within a couple of pixels of
each section's true height. Larger row units (8 px, 4 px) leave
noticeable trailing whitespace below shorter sections; 2 px keeps the
excess below 14 px (≈ one row gap). */
grid-auto-rows: 2px;
gap: 5px;
align-items: start;
}
.masonry > .section {
margin: 0;
min-width: 0;
/* Default span — JS overrides per-section after measuring. */
grid-row: span 100;
}
.masonry > .sec-fields {
grid-column: span 2;
}
@media (max-width: 1300px) {
.masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* sec-fields stays at span:2 — that's the whole row at 2-col viewport. */
}
@media (max-width: 700px) {
.masonry { grid-template-columns: 1fr; }
.masonry > .sec-fields { grid-column: auto; }
}
/* ─── KPI hero row ───────────────────────────────────────────────────── */
.kpi-row {
display: grid;
/* auto-fit so the row gracefully shrinks when KPIs are hidden — the
remaining cards fill the row instead of leaving a 75 %-wide layout. */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
display: flex; flex-direction: column;
gap: 4px;
min-height: 92px;
justify-content: center;
}
/* Status accents — light left-border tint so the eye picks up the card's
state before reading the number (balance dropped, fields ready, ...). */
.kpi-card.kpi-alert { border-left: 3px solid var(--red); padding-left: 13px; }
.kpi-card.kpi-ok { border-left: 3px solid var(--accent); padding-left: 13px; }
/* Forecast advice — pulls the seasonal headline out of an 11px muted
chart-header span and into a real callout box above the chart. */
.forecast-advice {
margin: 8px 16px 4px;
padding: 8px 12px;
background: color-mix(in srgb, var(--accent2) 12%, transparent);
border-left: 3px solid var(--accent2);
border-radius: 4px;
font-size: 13px;
color: var(--text);
line-height: 1.4;
}
.forecast-advice b { color: var(--accent2); }
.forecast-advice .forecast-advice-text { margin-left: 4px; }
.kpi-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
font-weight: 600;
}
.kpi-value {
font-size: 28px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex; align-items: baseline; gap: 8px;
}
.kpi-value .kpi-icon {
font-size: 24px;
line-height: 1;
}
.kpi-sub {
font-size: 12px;
color: var(--muted);
line-height: 1.2;
min-height: 14px;
}
.kpi-sub.delta-up { color: var(--accent); }
.kpi-sub.delta-down { color: var(--red); }
/* Weather KPI — split into "current" (left) + "forecast strip" (right) with
a vertical divider. Overrides the default column flex on .kpi-card. */
.kpi-card.kpi-weather-card {
flex-direction: row;
align-items: stretch;
gap: 0;
padding-right: 12px;
}
.kpi-weather-card .kpi-weather-current {
display: flex; flex-direction: column;
gap: 4px;
justify-content: center;
flex: 1; min-width: 0;
}
.kpi-weather-card .kpi-weather-forecast {
display: flex; flex-direction: column;
justify-content: center;
gap: 5px;
padding-left: 14px;
margin-left: 14px;
border-left: 2px solid var(--border);
min-width: 96px;
}
.kpi-weather-card .kpi-weather-forecast:empty { display: none; }
.forecast-day {
display: flex; align-items: center;
gap: 7px;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
line-height: 1;
}
.forecast-day .forecast-when { font-weight: 600; color: var(--text); opacity: .75; }
.forecast-day .forecast-icon { font-size: 14px; }
.forecast-day .forecast-temp { margin-left: auto; opacity: .8; }
/* Balance KPI — same split as weather: current (left) + 3-day history (right) */
.kpi-card.kpi-balance-card {
flex-direction: row;
align-items: stretch;
gap: 0;
padding-right: 12px;
}
.kpi-balance-card .kpi-balance-current {
display: flex; flex-direction: column;
gap: 4px;
justify-content: center;
flex: 1; min-width: 0;
}
.kpi-balance-card .kpi-balance-history {
display: flex; flex-direction: column;
justify-content: center;
gap: 5px;
padding-left: 14px;
margin-left: 14px;
border-left: 2px solid var(--border);
min-width: 96px;
}
.kpi-balance-card .kpi-balance-history:empty { display: none; }
.history-day {
display: flex; align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
line-height: 1;
}
.history-day .history-when { font-weight: 600; color: var(--text); opacity: .75; }
.history-day .history-arrow { font-size: 12px; }
.history-day .history-delta { margin-left: auto; opacity: .85; }
.history-day.delta-up .history-arrow,
.history-day.delta-up .history-delta { color: var(--accent); opacity: 1; }
.history-day.delta-down .history-arrow,
.history-day.delta-down .history-delta { color: var(--red); opacity: 1; }
/* Updated timestamp in nav */
.nav-updated {
font-size: 11px; color: var(--muted);
margin-right: 8px;
font-variant-numeric: tabular-nums;
}
/* ─── Section card ───────────────────────────────────────────────────── */
.section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.section-header {
padding: 10px 16px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--muted);
}
.section-header .count {
background: var(--surface2);
border-radius: 10px;
padding: 1px 7px;
font-size: 10px; color: var(--text);
}
:root[data-theme="fs25-native"] .section-header .count {
background: color-mix(in srgb, var(--accent2) 25%, transparent);
color: var(--accent2);
}
.section-header .section-jump {
margin-left: auto;
font-size: 11px;
text-transform: none;
letter-spacing: 0;
color: var(--accent);
text-decoration: none;
}
.section-header .section-jump:hover { text-decoration: underline; }
.section-body { padding: 12px 16px; }
/* ─── Table ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
background: var(--surface2);
padding: 7px 10px;
text-align: left;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); white-space: nowrap;
}
tbody tr { border-top: 1px solid var(--border); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tbody td { padding: 7px 10px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Collapsible group rows (storage / prices) */
tr.collapsible { cursor: pointer; user-select: none; }
tr.collapsible:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.group-toggle { display: inline-block; width: 12px; color: var(--accent); font-size: 11px; }
.group-meta { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 8px; }
.hidden-row { display: none; }
/* Inline donut for silo headers */
.silo-donut {
vertical-align: -2px;
color: var(--accent);
margin-right: 2px;
}
.silo-donut.donut-warn { color: var(--accent2); }
.silo-donut.donut-full { color: var(--red); }
.silo-pct {
margin-left: auto;
color: var(--muted);
font-size: 11px; font-variant-numeric: tabular-nums;
float: right;
}
/* Sortable column headers (sortable.js) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }
th.sortable::after {
content: ' \2195';
opacity: .35;
font-size: 9px;
margin-left: 3px;
}
th.sort-asc::after { content: ' \2191'; opacity: 1; color: var(--accent); }
th.sort-desc::after { content: ' \2193'; opacity: 1; color: var(--accent); }
/* ─── Progress bar ───────────────────────────────────────────────────── */
.bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .5s; }
.bar-fill.warn { background: var(--accent2); }
.bar-fill.danger { background: var(--red); }
.bar-fill.full { background: var(--teal); }
.bar-pct { font-size: 11px; color: var(--muted); width: 32px; text-align: right; flex-shrink: 0; }
/* ─── Storage change flash ─────────────────────────────────────────────
Applied for ~10 s when an item's amount changes (timing is JS-side via
scheduled re-render that removes the class). Static colour, no animation
— keyframes had a subtle bug (!important inside @keyframes is ignored
per CSS spec, so red animation didn't always win against .st-row td's
own background). Applied to | (not | ) because .st-row td sets
its own background. */
/* Table rows — must override .st-row td's own background (var(--surface2)) */
tr.flash-up > td,
tr.flash-down > td { transition: background-color .3s ease-out; }
tr.flash-up > td { background-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; }
tr.flash-down > td { background-color: rgba(224, 82, 82, .35) !important; }
/* Div-based rows (vehicles, animals) */
.vehicle-row.flash-up,
.animal-row.flash-up { background-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; transition: background-color .3s ease-out; }
.vehicle-row.flash-down,
.animal-row.flash-down { background-color: rgba(224, 82, 82, .35) !important; transition: background-color .3s ease-out; }
/* Per-bar flash for animal parameter changes (food, straw, milk, manure, …) */
.ac-bar-lbl.flash-up { background-color: color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 3px; transition: background-color .3s ease-out; }
.ac-bar-lbl.flash-down { background-color: rgba(224, 82, 82, .6); border-radius: 3px; transition: background-color .3s ease-out; }
/* Sub-line values (zdraví, reprodukce) */
.ac-sub-val.flash-up { color: var(--accent); transition: color .3s ease-out; }
.ac-sub-val.flash-down { color: var(--red); transition: color .3s ease-out; }
/* Per-section toggle (right-aligned in section-header) to enable/disable
the change-flash effect. State persisted in DashState.flashEnabled keyed
by section name. iOS-style switch — native checkbox is visually hidden
(still keyboard/click-accessible inside the