/* Shared by the farm UI (ui/) and the measurements form (services/measurements/web/, loads it as ./farm/common.css):
   colours of the light and dark theme, fonts for all 7 languages, the top bar. Same bar on both pages, so switching
   between them does not move anything: brand + tabs on the left, language + theme on the right, page extras between. */
:root {
  --bg: #f1f4f0;
  --surface: #ffffff;
  --surface-2: #e7ece5;
  --field: #f7f9f6;
  --fg: #16201a;
  --muted: #5a685f;
  --line: #d3dbd1;
  --line-strong: #aab6ac;
  --accent: #1d6d77;
  --accent-strong: #165760;
  --accent-soft: rgba(29,109,119,.12);
  --on-accent: #ffffff;
  --lamp: #e3a300;
  --lamp-soft: rgba(227,163,0,.13);
  --ok: #2c8748;
  --warn: #c07300;
  --crit: #c2362b;
  --ok-soft: rgba(44,135,72,.12);
  --warn-soft: rgba(192,115,0,.14);
  --crit-soft: rgba(194,54,43,.12);
  /* status colour of TEXT (chips, "no data", errors): >= 4.5:1 on white, the page, grey panels and the *-soft
     backgrounds (WCAG AA); --ok / --warn / --crit stay for dots, bars and stripes, which need 3:1 */
  --ok-ink: #1d6a36;
  --warn-ink: #865000;
  --crit-ink: #a82b22;
  --shadow: 0 8px 24px rgba(22,32,26,.06);
  --font-display: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Thai", "Leelawadee UI", "Noto Sans Myanmar",
    "Myanmar Text", Padauk, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: var(--font-display);
  --font-data: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  /* one shape scale (Material 3): full - buttons, filters, the selected menu item; m - cards; s - chips, fields */
  --shape-xs: 4px; --shape-s: 8px; --shape-m: 12px; --shape-l: 16px; --shape-full: 999px;
  --radius: var(--shape-m);
  --radius-small: var(--shape-s);
  /* chart series (categorical slots 1–3, validated all-pairs) and night shading */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --night: rgba(22,32,26,.07);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1411; --surface: #172019; --surface-2: #212b24; --field: #121915; --fg: #e4ebe5; --muted: #93a298; --line: #2b362f;
    --line-strong: #46534a; --accent: #5db6c0; --accent-strong: #7cc6ce; --accent-soft: rgba(93,182,192,.16); --on-accent: #0f1411;
    --lamp: #f0c04a; --lamp-soft: rgba(240,192,74,.12);
    --ok: #5cc27f; --warn: #eea33a; --crit: #ef6b5f; --ok-soft: rgba(92,194,127,.14); --warn-soft: rgba(238,163,58,.15); --crit-soft: rgba(239,107,95,.15);
    --ok-ink: #5cc27f; --warn-ink: #eea33a; --crit-ink: #f5857a;
    --shadow: none;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --night: rgba(0,0,0,.28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1411; --surface: #172019; --surface-2: #212b24; --field: #121915; --fg: #e4ebe5; --muted: #93a298; --line: #2b362f;
  --line-strong: #46534a; --accent: #5db6c0; --accent-strong: #7cc6ce; --accent-soft: rgba(93,182,192,.16); --on-accent: #0f1411;
  --lamp: #f0c04a; --lamp-soft: rgba(240,192,74,.12);
  --ok: #5cc27f; --warn: #eea33a; --crit: #ef6b5f; --ok-soft: rgba(92,194,127,.14); --warn-soft: rgba(238,163,58,.15); --crit-soft: rgba(239,107,95,.15);
  --ok-ink: #5cc27f; --warn-ink: #eea33a; --crit-ink: #f5857a;
  --shadow: none;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --night: rgba(0,0,0,.28);
  color-scheme: dark;
}

/* the scrollbar keeps its place on short pages too: nothing moves when switching pages */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.45; }

.gf-topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.gf-topbar-in { max-width: 1180px; min-height: 56px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; box-sizing: border-box; }
.gf-brand { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .01em; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.gf-brand small { font-weight: 400; color: var(--muted); font-size: 13px; }
.gf-logo { width: 24px; height: 24px; border-radius: 6px; align-self: center; flex: none; }
.gf-logo.big { width: 40px; height: 40px; border-radius: 10px; }
.gf-nav { display: flex; gap: 2px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.gf-nav a { display: block; padding: 5px 13px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 22px; }
.gf-nav a:hover { color: var(--fg); }
.gf-nav a[aria-current="page"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gf-spacer { flex: 1 1 auto; }
.gf-pill { height: 34px; box-sizing: border-box; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 11px; cursor: pointer; color: var(--muted);
  font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.gf-pill:hover { color: var(--fg); border-color: var(--muted); }
.gf-pill b { font-size: 14px; font-weight: 400; color: var(--fg); }
.gf-pill .flag { width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.gf-muted { color: var(--muted); font-size: 13px; }
/* phone: two rows on both pages - brand | alarms, language, theme; below it the tabs at full width. One row did not
   fit 375 px once the alarm badge came (the page scrolled sideways, the theme button was cut), longer languages even
   less; the tabs at full width also fit any language and are big enough for a finger. */
@media (max-width: 520px) {
  .gf-pill span { display: none; }
  .gf-hide-narrow { display: none !important; }
  .gf-topbar-in { gap: 8px; padding: 8px 12px; }
  .gf-nav { order: 10; flex: 1 1 100%; }
  .gf-nav a { flex: 1 1 0; text-align: center; padding: 6px 8px; }
}
/* touch screens: 44 px targets (WCAG 2.5.5, Material 48 dp) - workers tap in gloves; a mouse keeps the compact bar */
@media (pointer: coarse) {
  .gf-pill { height: 44px; min-width: 44px; justify-content: center; }
  .gf-nav a { line-height: 32px; }
}

/* colour palettes of the dark theme (the viewer's choice, ui/theme.js "gf-palette"): the same pages, another seed colour;
   teal is the blocks above. The light theme is one (user 2026-10-22: the colours hardly differ there; it is to be reworked). Status colours (ok / warn / crit) and the chart series stay the same in every palette:
   their meaning must not change with a taste. tests/ui_contrast_test.js checks every palette in both forms. */
@media (prefers-color-scheme: dark) {
  :root[data-palette="green"]:not([data-theme="light"]) {
    --bg: #0f1511; --surface: #1b211d; --surface-2: #262b27; --field: #141a16; --fg: #dee4de; --muted: #bfc9c1; --line: #353d37;
    --line-strong: #5a645c; --accent: #8fd5ae; --accent-strong: #aaf2c9; --accent-soft: rgba(143,213,174,.16); --on-accent: #003822;
  }
}
:root[data-palette="green"][data-theme="dark"] {
    --bg: #0f1511; --surface: #1b211d; --surface-2: #262b27; --field: #141a16; --fg: #dee4de; --muted: #bfc9c1; --line: #353d37;
    --line-strong: #5a645c; --accent: #8fd5ae; --accent-strong: #aaf2c9; --accent-soft: rgba(143,213,174,.16); --on-accent: #003822;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --bg: #111315; --surface: #1b1e21; --surface-2: #25292d; --field: #15181a; --fg: #e3e5e8; --muted: #a2a8af; --line: #2e3236;
    --line-strong: #4a5056; --accent: #a6c8ec; --accent-strong: #c2dbf5; --accent-soft: rgba(166,200,236,.16); --on-accent: #0f2234;
  }
}
:root[data-palette="graphite"][data-theme="dark"] {
    --bg: #111315; --surface: #1b1e21; --surface-2: #25292d; --field: #15181a; --fg: #e3e5e8; --muted: #a2a8af; --line: #2e3236;
    --line-strong: #4a5056; --accent: #a6c8ec; --accent-strong: #c2dbf5; --accent-soft: rgba(166,200,236,.16); --on-accent: #0f2234;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="contrast"]:not([data-theme="light"]) {
    --bg: #000000; --surface: #000000; --surface-2: #1f1f1f; --field: #000000; --fg: #ffffff; --muted: #dadada; --line: #8c8c8c;
    --line-strong: #ffffff; --accent: #7fe6f0; --accent-strong: #b8f3f8; --accent-soft: rgba(127,230,240,.2); --on-accent: #000000;
  }
}
:root[data-palette="contrast"][data-theme="dark"] {
    --bg: #000000; --surface: #000000; --surface-2: #1f1f1f; --field: #000000; --fg: #ffffff; --muted: #dadada; --line: #8c8c8c;
    --line-strong: #ffffff; --accent: #7fe6f0; --accent-strong: #b8f3f8; --accent-soft: rgba(127,230,240,.2); --on-accent: #000000;
}