:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #667085;
  --line: #e1e6ee;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --accent-soft: #e7efff;
  --bar-prev: #c3ccda;
  --warn-bg: #fff4d6;
  --warn-text: #8a5a00;
  --err-bg: #fde8e8;
  --err-text: #a12020;
  --ok-bg: #e3f6e8;
  --ok-text: #1d6b34;
  --test: #c62828;
  --radius: 10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #20252d;
  --card: #2a303a;
  --text: #e7ebf1;
  --muted: #a1adbf;
  --line: #3b4452;
  --accent: #6ea0ff;
  --accent-text: #0f1724;
  --accent-soft: #2c3f63;
  --bar-prev: #4a566a;
  --warn-bg: #4a3d1a;
  --warn-text: #f2cf74;
  --err-bg: #4a2629;
  --err-text: #ff9b9b;
  --ok-bg: #21402d;
  --ok-text: #8fdca5;
  --test: #e04848;
  color-scheme: dark;
}
/* Auto: system ma ciemny motyw i użytkownik nie wybrał żadnego motywu ręcznie (brak data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #20252d;
    --card: #2a303a;
    --text: #e7ebf1;
    --muted: #a1adbf;
    --line: #3b4452;
    --accent: #6ea0ff;
    --accent-text: #0f1724;
    --accent-soft: #2c3f63;
    --bar-prev: #4a566a;
    --warn-bg: #4a3d1a;
    --warn-text: #f2cf74;
    --err-bg: #4a2629;
    --err-text: #ff9b9b;
    --ok-bg: #21402d;
    --ok-text: #8fdca5;
    --test: #e04848;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 26px;                /* miejsce na pasek statusu na dole */
}
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
p { margin: .4rem 0; }
.muted { color: var(--muted); }

/* pasek z nazwą bazy */
.dbbar { padding: 4px 16px; font-size: .85rem; text-align: center; }
.dbbar.test { background: var(--test); color: #fff; font-weight: 700; letter-spacing: .03em; padding: 8px 16px; }
.dbbar.prod { color: var(--muted); text-align: right; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
#tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#tabs button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
#tabs button.active { background: var(--accent-soft); color: var(--accent); }

main { max-width: none; margin: 0 auto; padding: 16px clamp(12px, 2.4vw, 56px); }
#tab-entry { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* #tab-meters bez ograniczenia szerokości (cała szerokość okna) - tabela liczników bez poziomego paska;
   w węższym oknie plakietki (podlicznik, składnik, wirtualny) zawijają się pod nazwę */
td.meter-name-cell { white-space: normal; min-width: 14rem; }
td.meter-name-cell .badge { white-space: nowrap; }
section[hidden] { display: none; }
#tab-settings { max-width: 720px; }
.settings-card { display: grid; gap: 12px; }
.settings-card h2 { margin: 0; font-size: 1.1rem; }
.settings-card .notice { margin-bottom: 0; }
.setting-row { display: grid; gap: 2px; }
.setting-row input[type=checkbox] { flex-shrink: 0; }
.setting-help { font-size: .85rem; margin: 0 0 0 24px; }
p.setting-help { margin: 0; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--muted); }
.field > span { font-weight: 600; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--text); }

input, select, button { font: inherit; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; min-height: 40px; max-width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }

.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 8px 14px; min-height: 40px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.danger { color: var(--err-text); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* formularz odczytów: karta na licznik */
.meter-card { display: grid; gap: 8px 14px; grid-template-columns: 1fr; }
.meter-card h3 { margin: 0; font-size: 1rem; }
.meter-card .last { font-size: .85rem; color: var(--muted); }
.meter-card .inputs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
/* nazwa licznika + mały trybik z opcjami odczytu (przeliczenie na poprzedni dzień, wymiana licznika) */
.meter-card { position: relative; }
.meter-card .meter-head { display: flex; align-items: center; gap: 8px; }
.meter-card .meter-head h3 { flex: 1 1 auto; min-width: 0; }
.card-gear > .gear-btn { font-size: .95rem; padding: 2px 7px; min-height: 28px; color: var(--muted); }
.card-gear > .gear-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.card-gear .gear-list { min-width: 230px; }
.card-gear .gear-cmd:disabled { opacity: .5; cursor: default; background: transparent; color: var(--text); }
.meter-card .note-btn { color: var(--muted); }
.meter-card .preview:empty { display: none; }
.lock-note { cursor: help; font-size: .9rem; padding: 0 6px; }
.meter-card input.value { font-size: 1.15rem; width: 11rem; font-variant-numeric: tabular-nums; }
.preview { font-size: .9rem; min-height: 1.3em; }
.preview.muted { color: var(--muted); }
.preview.warn { background: var(--warn-bg); color: var(--warn-text); padding: 4px 8px; border-radius: 6px; }
.preview.ok { color: var(--ok-text); }
.preview.err { background: var(--err-bg); color: var(--err-text); padding: 4px 8px; border-radius: 6px; }
@media (min-width: 760px) {
  .meter-card { grid-template-columns: 220px 1fr; align-items: start; }
  /* trybik w prawym górnym rogu karty (jak na telefonie); pola nie wchodzą pod niego */
  .meter-card .card-gear { position: absolute; top: 10px; right: 10px; }
  .meter-card .inputs { padding-right: 40px; }
}
/* telefon: ciaśniejsze karty, żeby na ekranie zmieściło się więcej liczników */
@media (max-width: 600px) {
  .card.meter-card { padding: 10px 12px; margin-bottom: 8px; gap: 6px; }
  .meter-card .inputs { gap: 6px 8px; }
  .meter-card .note-field { margin-top: 6px; }
  .meter-card .value-label { display: none; }     /* „Nowy odczyt” - wiadomo z kontekstu, pole ma podpowiedź „nowy stan” */
}

.notice { border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; white-space: pre-line; }
.notice.ok { background: var(--ok-bg); color: var(--ok-text); }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.notice.err { background: var(--err-bg); color: var(--err-text); }

/* tabele */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }
tr:last-child td { border-bottom: 0; }
tr.suspicious td { background: var(--warn-bg); }
td.left, th.left { text-align: left; }
.badge { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.up { color: var(--text); }
.neutral { color: var(--muted); }

/* wykres */
.chart-title { font-weight: 700; min-width: 11rem; text-align: center; }
/* wysokość wykresu rośnie z oknem, ale nie schodzi poniżej czytelnego minimum */
#chart { width: 100%; height: clamp(340px, calc(100vh - 470px), 760px); cursor: pointer; }
@media (max-width: 600px) { #chart { height: 320px; } }
.summary { margin-top: 8px; font-size: .95rem; }
.nav-group { display: flex; align-items: center; gap: 6px; }

.empty { color: var(--muted); padding: 24px; text-align: center; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.order-cell { width: 1%; }
.order-btns { display: flex; gap: 4px; }
.order-btns .btn { min-width: 2.2em; padding-left: 0; padding-right: 0; }

/* cienki pasek statusu na dole (wersja aplikacji, schemat, baza) */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-wrap: nowrap; gap: 6px 14px; align-items: center; overflow: hidden;
  padding: 3px 16px; font-size: .75rem; line-height: 1.4; white-space: nowrap;
  background: var(--card); color: var(--muted); border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.statusbar .sep { opacity: .5; }
.statusbar .db { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  max-width: min(92vw, 560px); z-index: 50; pointer-events: none;
}
#toast div {
  margin-top: 6px; padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  background: var(--text); color: var(--bg); white-space: pre-line;
}
#toast div.err { background: var(--err-text); color: #fff; }

/* wybór motywu w nagłówku */
.theme { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.theme select { min-height: 34px; padding: 4px 8px; }

/* kolor licznika */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; flex: none; }
.meter-card { border-left: 5px solid var(--mc, var(--line)); }
.swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dot-btn { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.dot-btn:hover { box-shadow: 0 0 0 2px var(--accent); }
input[type=color] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); cursor: pointer; }
input[type=color]:disabled { opacity: .4; cursor: default; }
.color-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.color-cell .pickers { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
td.left.wrap { white-space: normal; }

/* wybór liczników na wykresie */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-size: .95rem; user-select: none; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); }
.chip.other { opacity: .55; }
.chip input { display: none; }
.chip .dot { margin-right: 0; }
.hint { font-size: .85rem; color: var(--muted); margin: 0 0 10px; }

/* ---------- statystyki pod wykresem ---------- */
.summary { display: grid; gap: 10px; }
.stat-card { border-left: 4px solid var(--mc, var(--line)); background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.stat-title { margin-bottom: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; }
.stat-k { font-size: .78rem; color: var(--muted); }
.stat-v { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-s { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-range { font-size: .8rem; margin-top: 6px; }

/* ---------- ramka szczegółów klikniętego słupka ---------- */
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.detail-head h3 { margin: 0; font-size: 1.05rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.detail-block { border-left: 4px solid var(--mc, var(--line)); background: var(--bg); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.kv { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.kv .k { color: var(--muted); font-size: .9rem; }
.kv .v { font-weight: 700; }
.reading-line { font-size: .9rem; font-variant-numeric: tabular-nums; }
.detail-block .muted { font-size: .85rem; }

/* ---------- okno edycji odczytu ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 40; }
.dialog { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; width: min(460px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.dialog h2 { margin: 0; }
.dialog input[type=text], .dialog input[type=datetime-local] { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- telefon: kompaktowy pasek ---------- */
@media (max-width: 600px) {
  .dbbar.test { padding: 4px 10px; font-size: .8rem; }
  .statusbar { padding: 3px 10px; font-size: .7rem; gap: 6px 10px; }
  .top { padding: 6px 10px; gap: 2px 8px; }
  h1 { font-size: 1.05rem; }
  .top h1 { order: 1; }
  .theme { order: 2; font-size: 0; gap: 0; margin-left: auto; }      /* sam wybór, bez napisu "Motyw" */
  .theme select { font-size: .8rem; min-height: 30px; padding: 2px 6px; }
  /* zakładki: tekst może iść w dwie linie (bez łamania słów); gdy dalej się nie mieszczą - pasek przewija się w bok */
  #tabs { order: 3; width: 100%; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
          scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #tabs::-webkit-scrollbar { display: none; }
  /* równy podział szerokości, ale nie węższy niż najdłuższe słowo (min-content) - „Nowe odczyty” idzie w dwie linie */
  #tabs button { flex: 1 1 0; min-width: min-content; min-height: 42px; padding: 4px 4px;
                 font-size: .78rem; line-height: 1.15; white-space: normal; overflow-wrap: normal; word-break: keep-all;
                 text-align: center; hyphens: none; }
  /* gdy pasek się przewija: zanikanie przy krawędzi, za którą są jeszcze zakładki */
  #tabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  #tabs.more-left { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
  #tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
                               mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
  main { padding: 10px; }
  .card { padding: 10px 12px; }
}

/* ---------- zakładka „Odczyty”: filtr dat, eksport, strony ---------- */
.table-toolbar .toolbar-end { margin-left: auto; }
.date-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; }
.date-filter label.check { min-height: 40px; }
.date-pair { display: flex; gap: 8px; }
.date-pair input:disabled { opacity: .5; }
.field-err { color: var(--err-text); font-size: .85rem; align-self: center; }

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--accent); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); display: grid;
}
.menu-item { border: 0; background: transparent; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-soft); color: var(--accent); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 4px; }
.pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pager-nav .btn.small { min-width: 38px; font-variant-numeric: tabular-nums; }
.page-box { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; font-size: .9rem; white-space: nowrap; }
.page-box input.page-input { width: 4.6rem; min-height: 32px; padding: 4px 6px; text-align: center; }
.pager-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .9rem; }
.pager-info select { min-height: 32px; padding: 2px 6px; }

.radio-group { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; margin: 0; display: grid; gap: 6px; }
.radio-group legend { font-size: .85rem; color: var(--muted); font-weight: 600; padding: 0 4px; }
input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

@media (max-width: 600px) {
  .date-pair input[type=date] { width: 9.6rem; }
  .pager { justify-content: center; }
  .pager-nav { justify-content: center; flex-wrap: nowrap; gap: 3px; }
  .pager-nav .btn.small { min-width: 34px; padding: 4px 6px; }
  .page-box { margin: 0 2px; gap: 4px; }
  .page-box .page-word { display: none; }            /* na wąskim ekranie samo pole „[ 3 ] z 27” */
  .page-box input.page-input { width: 3.6rem; }
}

/* ---------- komentarz do odczytu, „Przelicz na poprzedni dzień” ---------- */
.note-field { margin-top: 8px; }
.note-field input.note-input { width: 100%; }
.meter-card.shifted .value { border-color: var(--accent); background: var(--accent-soft); }
td.note-cell { text-align: left; white-space: normal; min-width: 12rem; max-width: 26rem; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
/* w tabeli najwyżej 2 linie komentarza; całość w podpowiedzi (title) i w oknie „Popraw odczyt” */
.note-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: inherit; width: 100%; resize: vertical; min-height: 40px;
}

/* ---------- edycja licznika: potwierdzenia ---------- */
.change-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 2px; }
.change-list s { color: var(--muted); }
.related-list { display: grid; gap: 6px; }
.related-list label.check { align-items: center; flex-wrap: wrap; }

/* ---------- import odczytów ---------- */
.import-new { flex-wrap: wrap; }
.import-actions { align-items: center; margin: 8px 0; }
.import-actions .toolbar-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
tr.row-err td { background: var(--err-bg); }
td.status-cell { text-align: left; font-size: .88rem; }
tr.row-err:not(.err-detail) td { border-bottom: 0; }
tr.err-detail td { text-align: left; white-space: normal; padding-top: 0; }
/* tekst błędu przyklejony do lewej krawędzi i nie szerszy niż ekran, nawet gdy tabela przewija się w bok */
tr.err-detail .err-text { position: sticky; left: 10px; max-width: min(60rem, calc(100vw - 48px)); color: var(--err-text); font-size: .88rem; font-weight: 600; }
.import-err { color: var(--err-text); font-weight: 600; }
.import-ok { color: var(--ok-text); }
.table-toolbar .toolbar-end { display: flex; gap: 8px; align-items: center; }
input[type=file] { max-width: 100%; font-size: .9rem; }

/* ---------- logowanie, użytkownik, akceptacja odczytów (0.9.0) ---------- */
:root { --pending-bg: #fdecec; --pending-text: #8a2b2b; }
:root[data-theme="dark"] { --pending-bg: #3a2a2e; --pending-text: #f0b4b4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --pending-bg: #3a2a2e; --pending-text: #f0b4b4; }
}
body.logged-out .top #tabs, body.logged-out main, body.logged-out #userbox { visibility: hidden; }
.login-screen { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.login-card { width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; display: grid; gap: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.login-card h1 { font-size: 1.4rem; }
.login-card input { width: 100%; }
.login-card input[type=checkbox] { width: auto; margin: 0; }
.login-card label.check { justify-self: start; cursor: pointer; }
.login-card label.check.is-disabled { opacity: .5; cursor: not-allowed; }
.device-list { display: grid; gap: 8px; }
.device { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.device.current { border-color: var(--accent); }
.device-info { display: grid; gap: 2px; font-size: .9rem; min-width: 0; }
.device-info .muted { font-size: .8rem; }
.device-info .badge { justify-self: start; margin-left: 0; }
input[type=password], input[type=email], input[type=url] {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; min-height: 40px; max-width: 100%;
}
.dialog input[type=password], .dialog input[type=email], .dialog select { width: 100%; }
.userbox { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.userbox .who { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
tr.pending td { background: var(--pending-bg); font-style: italic; }
tr.pending td .row-actions, tr.pending td .pick { font-style: normal; }
.badge.pending-badge { background: var(--pending-bg); color: var(--pending-text); border: 1px solid var(--pending-text); font-style: normal; }
.pick-cell { width: 34px; text-align: center !important; }
.pending-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; padding: 8px 12px;
  border-radius: 8px; background: var(--pending-bg); color: var(--pending-text); font-size: .9rem; }
.pending-bar .btn { margin-left: auto; }
td.added-cell { text-align: left; font-size: .85rem; color: var(--muted); }
td.wrap-cell { white-space: normal; min-width: 10rem; max-width: 24rem; overflow-wrap: anywhere; }
.history-table td { font-size: .88rem; }
@media (max-width: 600px) {
  .userbox { order: 2; width: 100%; justify-content: flex-end; }
  .userbox .who { max-width: 12rem; }
  .theme { order: 1; }
  .two-cols { grid-template-columns: 1fr; }
  .pending-bar .btn { margin-left: 0; }
}
.userbox .btn { white-space: nowrap; }
@media (max-width: 600px) { .userbox .btn.small { padding: 3px 8px; min-height: 28px; font-size: .8rem; } }

/* ---------- dodatkowe motywy ciemne (0.10.0) ----------
   Wszystkie są "ciemne": kolory liczników biorą wariant dla ciemnego motywu (isDark() w app.js).
   Klucze w data-theme są neutralne (purple/blue/green/red) - nazwy widoczne dla użytkownika są tylko w index.html. */
:root[data-theme="purple"] {            /* Deep Purple – fiolet z żółtym akcentem */
  --bg: #1e1d3a; --card: #2b2a52; --text: #eceaff; --muted: #aaa5d8; --line: #423f78;
  --accent: #fad000; --accent-text: #1e1d3a; --accent-soft: #433d7c; --bar-prev: #5a559e;
  --warn-bg: #4a3f1a; --warn-text: #f5d36b; --err-bg: #4f2244; --err-text: #ff9bb5;
  --ok-bg: #1f4236; --ok-text: #8fe0b0; --test: #ff4f6e;
  --pending-bg: #4a2a58; --pending-text: #f3b8e0;
  color-scheme: dark;
}
:root[data-theme="blue"] {              /* Deep Sea – granat z błękitnym akcentem */
  --bg: #13202d; --card: #1a2a3a; --text: #d9e3ec; --muted: #8ca2b7; --line: #2a3e52;
  --accent: #5cb8e6; --accent-text: #0b1620; --accent-soft: #1e4058; --bar-prev: #3a5670;
  --warn-bg: #3f3a1c; --warn-text: #f0cf74; --err-bg: #43262c; --err-text: #ff9b9b;
  --ok-bg: #1b3d33; --ok-text: #86dbb0; --test: #e04848;
  --pending-bg: #3a2a35; --pending-text: #f0b4b4;
  color-scheme: dark;
}
:root[data-theme="green"] {             /* Deep Jungle – ciemna zieleń z soczystym zielonym akcentem */
  --bg: #1d241f; --card: #252f28; --text: #dfe7dc; --muted: #9cad9d; --line: #36443a;
  --accent: #8ccf3f; --accent-text: #0f170c; --accent-soft: #35491f; --bar-prev: #4b5e4d;
  --warn-bg: #463e18; --warn-text: #ecd06e; --err-bg: #472628; --err-text: #ff9b9b;
  --ok-bg: #24452b; --ok-text: #9be3a8; --test: #e04848;
  --pending-bg: #3f2c2c; --pending-text: #f0b4b4;
  color-scheme: dark;
}
:root[data-theme="red"] {               /* Deep Fire – bordo z czerwonym akcentem */
  --bg: #1a0808; --card: #270e0e; --text: #ede5e7; --muted: #bb9fa2; --line: #4c1f20;
  --accent: #ff5a5f; --accent-text: #1a0808; --accent-soft: #631c1c; --bar-prev: #6a3a3c;
  --warn-bg: #4a3a14; --warn-text: #f2cf74; --err-bg: #5c1517; --err-text: #ffb0b0;
  --ok-bg: #1f3d2a; --ok-text: #8fdca5; --test: #ff3b3b;
  --pending-bg: #4d1f2c; --pending-text: #ffc0c8;
  color-scheme: dark;
}

/* ---------- zakładka „Odczyty”: widok „wg dni” (0.12.0) ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: var(--card); color: var(--text); padding: 8px 12px; min-height: 40px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn:hover { background: var(--accent-soft); }
.seg-btn.on { background: var(--accent); color: var(--accent-text); cursor: default; }
.meters-menu > summary { min-width: 11rem; justify-content: space-between; }
.menu-list.meters-list { left: 0; right: auto; min-width: 250px; max-height: 60vh; overflow-y: auto; }
.dialog .date-pair { display: grid; grid-template-columns: 1fr 1fr; }
.dialog .date-pair input[type=date] { width: 100%; min-width: 0; }
.meters-all { display: flex; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.meter-check { padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.meter-check:hover { background: var(--accent-soft); }
.meter-check .dot { margin-right: 0; }
.day-nav .pager-nav { justify-content: center; margin: 4px 0 10px; }
.day-period { font-weight: 700; min-width: 13rem; text-align: center; padding: 0 8px; }
.days-table tr.day-head td { background: var(--accent-soft); color: var(--text); font-weight: 700; text-align: left; padding: 6px 10px; }
.days-table tr.day-head td::first-letter { text-transform: uppercase; }
.days-table .unit { color: var(--muted); font-size: .85em; }
.days-table .added-word { display: none; }
.days-table td.c-meter { font-weight: 600; }

/* telefon: każdy odczyt w dwóch liniach (licznik + godzina, pod spodem liczby), komentarz i „Dodano” niżej */
@media (max-width: 600px) {
  .seg-btn { padding: 6px 10px; }
  /* lista liczników na całą szerokość ekranu (pionowo zostaje pod przyciskiem) */
  .menu-list.meters-list { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .day-period { min-width: 0; font-size: .9rem; padding: 0 4px; white-space: nowrap; }
  .day-nav .pager-nav { flex-wrap: wrap; row-gap: 6px; }
  .days-table thead { display: none; }
  .days-table, .days-table tbody, .days-table tr.day-head, .days-table tr.day-head td { display: block; }
  /* flex z podziałem linii: [licznik  godzina  przyciski] / [odczyt  Δ  na dobę  %] / komentarz / dodano */
  .days-table tr.day-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
  .days-table tr.day-row::before, .days-table tr.day-row::after { content: ""; flex-basis: 100%; height: 0; }
  .days-table tr.day-row::before { order: 4; }
  .days-table tr.day-row::after { order: 9; }
  .days-table tr.day-row td { display: block; padding: 0; border: 0; background: transparent; min-width: 0; max-width: none; }
  .days-table tr.day-row.pending { background: var(--pending-bg); font-style: italic; }
  .days-table tr.day-row.suspicious { background: var(--warn-bg); }
  .days-table tr.day-row td.c-pick { order: 0; width: auto; align-self: center; }
  .days-table tr.day-row td.c-meter { order: 1; flex: 1 1 0; white-space: normal; overflow-wrap: anywhere; }
  .days-table tr.day-row td.c-time { order: 2; text-align: right; white-space: normal; }
  .days-table tr.day-row td.c-act { order: 3; align-self: center; }
  .days-table tr.day-row td.c-value { order: 5; text-align: left; font-weight: 600; }
  .days-table tr.day-row td.c-delta { order: 6; }
  .days-table tr.day-row td.c-perday { order: 7; }
  .days-table tr.day-row td.c-pct { order: 8; margin-left: auto; }
  .days-table tr.day-row td.c-note { order: 10; flex-basis: 100%; text-align: left; font-size: .82rem; }
  .days-table tr.day-row td.c-added { order: 11; flex-basis: 100%; font-size: .75rem; }
  .days-table tr.day-row td.c-pick:empty, .days-table tr.day-row td.c-note:empty, .days-table tr.day-row td.c-hours, .days-table tr.day-row td.c-chg { display: none; }
  .days-table tr.day-row td.c-delta::before, .days-table tr.day-row td.c-perday::before { content: attr(data-label) " "; color: var(--muted); font-size: .75rem; font-weight: 400; }
  .days-table .added-word { display: inline; }
  .days-table .row-actions .btn.small { min-height: 28px; padding: 2px 8px; font-size: .8rem; }
  .days-table tr.day-head td { padding: 6px 10px; font-size: .9rem; }
}

/* ---------- trybik z ustawieniami widoku i tabela dopasowana do ekranu (0.14.0) ---------- */
.gear-btn { font-size: 1.15rem; line-height: 1; padding: 6px 10px; }
.gear-list { min-width: 240px; padding: 6px 8px 8px; gap: 2px; }
.gear-title { font-size: .8rem; font-weight: 600; color: var(--muted); padding: 4px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.gear-item { padding: 7px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.gear-item:hover { background: var(--accent-soft); }
/* wysokość ustawia fitTables() w app.js; tabela przewija się w obu kierunkach, nagłówek kolumn zostaje u góry */
.table-wrap.fit { overflow: auto; }
.table-wrap.fit th { z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }

/* ---------- wielkość czcionki w tabelach (0.15.0) ----------
   --table-zoom ustawia applyTableFont() w app.js; zoom skaluje tekst i odstępy w komórkach, więc mieści się więcej danych */
.table-wrap > table { zoom: var(--table-zoom, 1); }
.gear-font { display: grid; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.gear-font select { width: 100%; }
.gear-font .btn { justify-self: start; }
.toolbar.gear-only { margin-bottom: 8px; }

/* liczniki wirtualne */
.notice.virtual-info { background: var(--accent-soft); color: var(--text); white-space: normal; }
.virtual-note { font-size: 1rem; }
.comp-formula-cell { font-size: .82rem; margin-top: 2px; white-space: normal; }
.comp-editor { display: grid; gap: 6px; justify-items: start; }
.comp-list { display: grid; gap: 6px; width: 100%; }
.comp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.comp-row select:not(.comp-sign) { flex: 1 1 200px; min-width: 0; max-width: 420px; }
.comp-row .comp-sign, .dialog .comp-row .comp-sign { width: auto; flex: 0 0 auto; }
.comp-row .comp-factor, .dialog .comp-row input.comp-factor { width: 5.5em; flex: 0 0 auto; }
.dialog .comp-row select:not(.comp-sign) { width: auto; }
.comp-formula { margin: 2px 0 0; font-size: .9rem; }
.dialog.dialog-wide { width: min(620px, 100%); }

/* eksport jako ikona, polecenia w trybiku, ukrywany opis licznika wirtualnego */
.icon-btn { gap: 2px; padding: 6px 8px; line-height: 1; }
.icon-btn svg { display: block; }
.icon-btn .caret { font-size: .7rem; opacity: .7; }
.export-menu .menu-list { padding: 6px 8px 8px; }
.gear-action { width: 100%; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 10px; }
.notice.virtual-info { position: relative; padding-right: 40px; }
.notice-close { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.notice-close:hover, .notice-close:focus-visible { background: var(--card); color: var(--text); }
.virtual-formula { margin: 0 0 8px; font-size: .9rem; }

/* ---------- więcej miejsca na dane na telefonie (1.1.0) ----------
   Nagłówek: imię + trybik konta (Zmień hasło, Urządzenia) + Wyloguj w jednej linii.
   „Odczyty”: filtry schowane pod przyciskiem z lejkiem (filtersToggle() w app.js) razem z opisem pod tabelą.
   Na szerokim ekranie bez zmian: filtry zawsze widoczne, przycisku nie ma. */
.user-menu .menu-list { min-width: 200px; }
.user-menu .gear-title { white-space: nowrap; }
.filters-box { display: contents; }
.filters-summary, .filters-toggle { display: none; }
.filters-toggle.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 600px) {
  .dbbar.prod { display: none; }                 /* „Baza: Produkcyjna” - na telefonie zbędne (testowa ma czerwony pasek) */
  .filters-toggle { display: inline-flex; }
  .filters-collapsed .filters-box, .filters-collapsed .table-note { display: none; }
  .filters-collapsed .filters-summary { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0;
    font-weight: 600; font-size: .9rem; align-self: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .filters-collapsed .filters-summary > span { overflow: hidden; text-overflow: ellipsis; }
  .filters-collapsed .table-toolbar { margin-bottom: 6px; align-items: center; flex-wrap: nowrap; }
  .table-toolbar .toolbar-end { gap: 6px; }

  /* Wykresy: mniejsze „pigułki” liczników, pola w dwóch kolumnach, bez podpowiedzi */
  .chips { gap: 5px; margin-bottom: 6px; }
  .chip { padding: 3px 9px; gap: 4px; font-size: .8rem; }
  #tab-charts .hint { display: none; }
  .chart-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 8px; }
  .chart-toolbar .field { font-size: .75rem; min-width: 0; }
  .chart-toolbar select, .chart-toolbar input { width: 100%; min-width: 0; min-height: 34px; padding: 3px 6px; font-size: .85rem; }

  /* Historia: „Zakres dat”, eksport i trybik w pierwszej linii, daty pod spodem */
  .history-toolbar { gap: 6px 10px; align-items: center; }
  .history-toolbar .date-filter { display: contents; }
  .history-toolbar .date-filter label.check { order: 1; min-height: 0; }
  .history-toolbar .toolbar-end { order: 2; }
  .history-toolbar .date-pair { order: 3; width: 100%; }
  .history-toolbar .field-err { order: 4; }
}

/* ---------- 1.2.0: imię z lewej, węższe daty, eksport obok dat (telefon) ---------- */
@media (max-width: 600px) {
  .userbox .who { margin-right: auto; font-weight: 600; }       /* imię z lewej (pod nazwą aplikacji), przyciski z prawej */
  /* „Odczyty” wg licznika: pola dat tylko tak szerokie jak data; obok nich eksport i trybik (wcześniej linię niżej) */
  .table-toolbar .date-filter { display: contents; }
  .table-toolbar:not(.history-toolbar) .date-filter label.check { order: 1; flex-basis: 100%; min-height: 0; }
  .table-toolbar:not(.history-toolbar) .date-pair { order: 2; gap: 6px; }
  .table-toolbar:not(.history-toolbar) { column-gap: 8px; }
  .table-toolbar .date-pair input[type=date] { width: 6.6rem; font-size: .85rem; padding: 6px 3px; }
  .table-toolbar:not(.history-toolbar) .toolbar-end { order: 3; align-self: end; gap: 4px; }
  .table-toolbar .toolbar-end .btn { padding-left: 7px; padding-right: 7px; }
  .table-toolbar .filters-box > .dot { display: none; }          /* kolor licznika widać w opisie po zwinięciu filtrów */
  .table-toolbar .field-err { order: 4; flex-basis: 100%; }
  .table-toolbar .filters-box > label.check { order: 5; }
  .table-toolbar .toolbar-end .btn { min-height: 38px; }
}
/* pasek „Dostępna nowa wersja” (checkNewVersion() w app.js) */
.update-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 12px;
  background: var(--accent-soft); color: var(--text); font-size: .9rem; border-bottom: 1px solid var(--accent); }
/* widok „wg dni”: checkbox w nagłówku dnia - zaznacza odczyty do akceptacji z tego dnia (1.2.1);
   w jednej kolumnie z checkboxami odczytów (pick-cell ma 34 px, checkbox 18 px) */
.days-table .day-pick-label { display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.days-table .day-pick { margin: 0 16px 0 -2px; }
@media (max-width: 600px) { .days-table .day-pick { margin: 0 12px 0 0; } }
/* pasek „do akceptacji”: checkbox „zaznacz wszystkie” na początku, krótsze napisy na telefonie (1.2.1) */
.pending-all { display: inline-flex; align-items: center; gap: 8px; }
.pending-all input { flex-shrink: 0; }
.txt-short { display: none; }
@media (max-width: 600px) {
  .txt-long { display: none; }
  .txt-short { display: inline; }
  .pending-bar { flex-wrap: nowrap; padding: 6px 10px; }
  .pending-bar .btn { margin-left: auto; white-space: nowrap; }
}
/* ekran logowania: reset hasła, prośba do administratora, strona „Ustaw hasło” (1.3.0) */
.login-card .notice { margin-bottom: 0; }
.login-card h2.login-sub { font-size: 1.1rem; margin: 0; }
.login-card textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.btn-link { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--accent); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.btn-link:hover, .btn-link:focus-visible { color: var(--text); }
.settings-card + .settings-card { margin-top: 14px; }
.mail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mail-grid .wide { grid-column: 1 / -1; }
.mail-grid input:not([type=checkbox]), .mail-grid select { width: 100%; }
.mail-grid input[inputmode=numeric] { max-width: 9rem; }
@media (max-width: 600px) { .mail-grid { grid-template-columns: 1fr; } }
.settings-card .actions-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }