:root {
  --navy: #14304f; --navy-2: #1d4470; --teal: #0f8a7e; --teal-light: #e3f4f1;
  --ink: #1c2733; --muted: #5b6878; --line: #dfe5ec; --soft: #f4f7fa; --bg: #f6f8fb;
  --red: #b2382b; --red-bg: #fde8e6; --radius: 12px;
  /* motywy (jasny / ciemny / navy): --navy = kolor tytułów, --head-bg = górny pasek, --card = karty, pola, menu */
  --head-bg: #14304f; --card: #fff; --accent-hover: #0b7368; --row-hover: #f0f7f6; --tag-bg: #eceff3;
  --note-bg: #fff8e1; --note-ink: #6b5200; --ok-bg: #dff3e6; --ok-ink: #1d7a3e; --info-bg: #e3eefb; --info-ink: #1d4f8c;
  --violet-bg: #f3e8fb; --violet-ink: #6a2d8c; --diff-bg: #fff4f2; --new-bg: #eef8f1; --warn-ink: #b26b00; --warn-bg: #fdf0d9; --warn-ink2: #8a5300;
  --danger-border: #e3b4ad; --shadow-rgb: 20,48,79; --btn: #0f8a7e;
  color-scheme: light;
}
:root[data-motyw="ciemny"] {
  --navy: #e6ebf2; --navy-2: #c9d3e0; --teal: #35b8a8; --teal-light: #1f3d3a;
  --ink: #dde3ea; --muted: #9aa5b3; --line: #3a414b; --soft: #262b32; --bg: #1e2227;
  --red: #ff8a7a; --red-bg: #47282a;
  --head-bg: #16191d; --card: #2a2f36; --accent-hover: #2a9d8f; --row-hover: #313840; --tag-bg: #363c45;
  --note-bg: #3b3420; --note-ink: #f0d58e; --ok-bg: #1f3a2b; --ok-ink: #84d6a0; --info-bg: #1f3350; --info-ink: #9cc4f5;
  --violet-bg: #392b47; --violet-ink: #d4adf0; --diff-bg: #3a2b2b; --new-bg: #22372b; --warn-ink: #f0a640; --warn-bg: #46381f; --warn-ink2: #f3c27a;
  --danger-border: #7a4038; --shadow-rgb: 0,0,0; --btn: #16877a;
  color-scheme: dark;
}
:root[data-motyw="navy"] {   /* jasny stalowoniebieski jak w LMS: panele #cdddea, nagłówki #a7c6db, granatowe etykiety */
  --navy: #234062; --navy-2: #2c5378; --teal: #245f94; --teal-light: #c2d7e8;
  --ink: #2b3540; --muted: #4f5f6a; --line: #9fb7cb; --soft: #a7c6db; --bg: #dbe6ef;
  --red: #a8322a; --red-bg: #f3d6d2;
  --head-bg: #2c5378; --card: #cdddea; --input: #f7fbfe; --accent-hover: #1d4f7c; --row-hover: #bcd2e3; --tag-bg: #b4cde0;
  --note-bg: #f4e9c4; --note-ink: #5e4a00; --ok-bg: #cfe6d6; --ok-ink: #1d6b36; --info-bg: #bcd5ee; --info-ink: #1d4f8c;
  --violet-bg: #dcd0ef; --violet-ink: #5b2d86; --diff-bg: #efd9d6; --new-bg: #d2e9da; --warn-ink: #a35f00; --warn-bg: #f1e0bd; --warn-ink2: #7a4800;
  --danger-border: #d9a59e; --shadow-rgb: 35,64,98; --btn: #2f6b9e;
  --flash-bg: #b9d1e5; --flash-ink: #1d4470; --flash-bar: #2f6b9e;
  color-scheme: light;
}
input, select, textarea { background-color: var(--input, var(--card)); color: var(--ink); border-color: var(--line); }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; background: var(--bg); }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; width: 100%; }
main.wrap { padding-top: 28px; padding-bottom: 48px; }
a { color: var(--teal); }
h1 { font-size: 26px; color: var(--navy); margin: 0 0 4px; line-height: 1.2; }
h2 { font-size: 19px; color: var(--navy); margin: 32px 0 12px; }
.muted { color: var(--muted); margin: 0; }

/* Pasek górny */
header.top { background: var(--head-bg); color: #fff; }
header.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.logo small { font-weight: 400; color: #9fe0d6; margin-left: 4px; }
.logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--teal); display: grid; place-items: center; flex: none; }
.logo-mark.big { width: 52px; height: 52px; border-radius: 12px; background: var(--head-bg); }
.current { background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 20px; font-size: 14px; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.who { color: #b9c9da; }
.btn-link { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; }
.btn-link:hover { background: rgba(255,255,255,.12); }

/* Logowanie */
.login { max-width: 380px; margin: 48px auto 0; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand .logo-mark { margin: 0 auto 12px; }
.login-brand h1 span { color: var(--teal); font-weight: 400; }
.login-brand p { color: var(--muted); margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 4px 18px rgba(var(--shadow-rgb),.06); display: grid; gap: 14px; }
.card label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.btn { font: inherit; font-weight: 600; background: var(--btn); color: #fff; border: 0; border-radius: 8px; padding: 11px 18px; cursor: pointer; }
.btn:hover { background: var(--accent-hover); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.alert { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; font-size: 15px; }

/* Lista wspólnot */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
/* nagłówek z przyciskami: przyciski w linii tytułu po prawej, opis pod spodem na całą szerokość – długi opis nie przesuwa
   przycisków i się z nimi nie miesza; na telefonie przyciski pod opisem */
.head-row:has(> div:first-child > h1):has(> .actions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.head-row:has(> div:first-child > h1):has(> .actions) > div:first-child { display: contents; }
.head-row:has(> div:first-child > h1):has(> .actions) > div:first-child > * { grid-column: 1 / -1; }
.head-row:has(> div:first-child > h1):has(> .actions) > div:first-child > h1 { grid-column: 1; grid-row: 1; }
.head-row:has(> div:first-child > h1):has(> .actions) > .actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.head-row:has(> div:first-child > h1):has(> .actions) > :not(:first-child):not(.actions) { grid-column: 1 / -1; }
.head-row input[type=search] { max-width: 300px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wsp { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.wsp:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(15,138,126,.12); }
.wsp.last { border-left: 4px solid var(--teal); }
.wsp-name { font-weight: 600; color: var(--navy); }
.wsp-addr { color: var(--muted); font-size: 15px; }
.wsp-meta { color: var(--muted); font-size: 13px; margin-top: 6px; }
.wsp.off { opacity: .7; }
.ended { margin-top: 28px; }
.ended summary { cursor: pointer; color: var(--muted); margin-bottom: 12px; }

/* Wspólnota */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs span { margin: 0 6px; }
.switch { display: grid; gap: 4px; min-width: 260px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stats b { display: block; font-size: 22px; color: var(--navy); }
.stats span { font-size: 13px; color: var(--muted); }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.module { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; position: relative; }
.module h3 { margin: 0 0 4px; font-size: 16px; color: var(--navy); }
.module p { margin: 0; font-size: 14px; color: var(--muted); }
.module.off { background: var(--soft); }
.soon { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--note-ink); background: var(--note-bg); padding: 1px 8px; border-radius: 10px; }

.foot { color: var(--muted); font-size: 13px; padding: 18px 0; border-top: 1px solid var(--line); background: var(--card); }

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .stats { grid-template-columns: 1fr; }
  .current { order: 3; max-width: 100%; flex-basis: 100%; margin-bottom: 8px; }
  .head-row input[type=search], .switch { max-width: none; width: 100%; min-width: 0; }
  .head-row:has(> div:first-child > h1):has(> .actions) > .actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
}

/* Moduł: lokale i właściciele */
a.module { text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
a.module:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(15,138,126,.12); }
.ready { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--teal); }
.note { background: var(--note-bg); color: var(--note-ink); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.filters { margin: 0 0 10px; font-size: 14px; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table.data { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: var(--soft); color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: var(--row-hover); }
table.data tr.off td { color: var(--muted); }
table.data a { text-decoration: none; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--tag-bg); color: var(--muted); vertical-align: middle; }
.stats.four { grid-template-columns: repeat(4, 1fr); }
.props { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0 0; font-size: 15px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.person h3 { margin: 6px 0 4px; font-size: 16px; color: var(--navy); }
.person p { margin: 0 0 4px; font-size: 14px; }
.person .contact { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.small { font-size: 13px; }
.role { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.role-wlasciciel { background: var(--ok-bg); color: var(--ok-ink); }
.role-lokator { background: var(--info-bg); color: var(--info-ink); }
.role-platnik { background: var(--violet-bg); color: var(--violet-ink); }
.history { margin-top: 20px; }
.history summary { cursor: pointer; color: var(--muted); margin-bottom: 10px; }
.history table.data tbody tr { cursor: default; }
@media (max-width: 640px) {
  .stats.four { grid-template-columns: 1fr 1fr; }
  .hide-sm { display: none; }
  table.data th, table.data td { padding: 7px 8px; }
}

/* Edycja */
.flash { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 15px; }
.flash-ok { background: var(--flash-bg, var(--ok-bg)); color: var(--flash-ink, var(--ok-ink)); border-left: 4px solid var(--flash-bar, transparent); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.form { gap: 16px; }
.form.narrow { max-width: 420px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.form-grid .wide, .form-grid label:has(.wide) { grid-column: 1 / -1; }
.form label.check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 15px; }
.form label.check input { margin-top: 4px; }
.form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 16px; display: grid; gap: 10px; }
.form legend { color: var(--muted); font-size: 14px; padding: 0 6px; }
.form select[size] { padding: 4px; }
.actions { display: flex; align-items: center; gap: 14px; }
.h2-row { margin: 28px 0 12px; align-items: center; }
.h2-row h2 { margin: 0; }
.person-actions { display: flex; gap: 14px; margin-top: 8px !important; font-size: 14px; }
.changes { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.danger-zone { margin-top: 14px; }
.btn-danger { font: inherit; font-size: 14px; background: none; border: 1px solid var(--danger-border); color: var(--red); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.btn-danger:hover { background: var(--red-bg); }

/* Liczniki i odczyty */
.neg { color: var(--red); font-weight: 600; }
.typ { display: inline-block; min-width: 34px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--tag-bg); color: var(--muted); }
.typ-ZW { background: var(--info-bg); color: var(--info-ink); }
.typ-CW, .typ-CWU { background: var(--red-bg); color: var(--red); }
table.data.static tbody tr { cursor: default; }
table.data.static tbody tr:hover { background: transparent; }
.sheet td { vertical-align: middle; }
.sheet .cell { width: 9em; font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; text-align: right; }
.sheet .cell:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
label.check.tiny { display: inline-flex; gap: 4px; font-size: 12px; color: var(--muted); margin-left: 6px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.btn-danger.small { padding: 3px 8px; font-size: 13px; }

/* Konta i administracja */
header.top .menu { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; flex-wrap: wrap; }
header.top .menu a { color: #d6e2ee; text-decoration: none; }
header.top .menu a:hover, header.top .menu a.on { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
header.top .menu .who { color: #9fe0d6; }
header.top .logout { margin: 0; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 6px 0 18px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.filters a.on { font-weight: 700; color: var(--navy); }
.tag.warn { background: var(--red-bg); color: var(--red); }
.perms { max-width: 640px; }
.perms td:not(:first-child), .perms th:not(:first-child) { text-align: center; width: 110px; }
.btn-secondary { font: inherit; font-size: 14px; background: var(--card); border: 1px solid var(--line); color: var(--navy); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.btn-secondary:hover { border-color: var(--teal); }
.wrap-actions { flex-wrap: wrap; }
.sila { height: 22px; background: var(--soft); border-radius: 6px; overflow: hidden; }
.sila span { display: block; height: 100%; font-size: 12px; line-height: 22px; padding-left: 8px; color: #fff; transition: width .2s; white-space: nowrap; }
.sila .s0 { background: #b2382b; } .sila .s1 { background: #d9822b; } .sila .s2 { background: #c9a227; color: #222; } .sila .s3 { background: #3a9a5b; } .sila .s4 { background: #1d7a3e; }
@media (max-width: 640px) { header.top .menu { margin-left: 0; width: 100%; padding-bottom: 8px; } }

/* Naliczenia */
.ok-txt { color: var(--ok-ink); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); cursor: pointer; }
table.nal .lok-det > td { background: var(--soft); padding: 8px 10px 14px; }
table.inner { font-size: 13.5px; background: var(--card); border: 1px solid var(--line); }
table.inner tr.st-roznica td, table.inner tr.st-nasze td, table.inner tr.st-probit td { background: var(--diff-bg); }
table.inner tr.st-ok td:first-child { border-left: 3px solid #3a9a5b; }
table.inner tr.st-roznica td:first-child, table.inner tr.st-nasze td:first-child, table.inner tr.st-probit td:first-child { border-left: 3px solid var(--red); }

/* Należności */
table.aging { table-layout: fixed; }
.table-wrap + p.small { margin-top: 8px; }
tr.bo td { background: var(--soft); font-style: italic; }

/* Cennik */
.card.skl { margin: 0 0 14px; padding: 14px 18px; gap: 8px; }
.skl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.skl-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.skl-head .nr { display: inline-block; min-width: 28px; font-variant-numeric: tabular-nums; color: var(--muted); }
table.zrodla td { padding: 5px 8px; }
details.edit { border-top: 1px dashed var(--line); padding-top: 8px; }
details.edit summary { cursor: pointer; color: var(--teal); font-size: 14px; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; margin-top: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 6px 0; }
.inline-form label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.inline-form label.check { display: flex; font-size: 13px; color: var(--ink); }
.btn.small, .btn-secondary.small { padding: 6px 12px; font-size: 13px; }
code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: .9em; word-break: break-all; }

/* Ustawienia */
.tabs.sub { border-bottom: 0; margin-top: -8px; }
.tabs.sub a { font-size: 14px; padding: 6px 12px; }
.form label .hint { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Parametry lokalu */
.card.params { gap: 6px; }
.params-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.params-grid div { display: grid; }
.params-grid b { font-size: 17px; color: var(--navy); }
h3 { color: var(--navy); }
.sklad-form .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; width: 100%; }
details.edit.card { padding: 12px 16px; margin: 14px 0; }

/* Zapis naliczenia */
.card.nal-stan { margin: 0 0 14px; gap: 6px; }
.card.nal-stan.ok { border-left: 4px solid #3a9a5b; }
.card.nal-stan p { margin: 0; }

/* Wpłaty */
table.wyciag td { vertical-align: top; }
.tag.ok { background: var(--ok-bg); color: var(--ok-ink); }
.rejestry-pobierz { align-items: center; margin: 4px 0 14px; }
.rejestry fieldset.rach { margin: 10px 0; }
.rejestry fieldset.rach legend { font-size: 14px; font-weight: 600; color: var(--navy); padding: 0 4px; }
tr.nowy td { background: var(--new-bg); }
.nowrap { white-space: nowrap; }

/* Nawigacja: biuro zarządcy / obsługa wspólnoty (nawigacja.php) */
.ik { flex: none; vertical-align: middle; }
header.top .menu .who { display: inline-flex; align-items: center; gap: 6px; }
header.top.wsp-mode .wrap { gap: 14px; }
.btn-back { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 5px 12px 5px 8px; font-size: 14px; }
.btn-back:hover { background: rgba(255,255,255,.12); }
.wsp-switch { position: relative; min-width: 0; }
.wsp-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; color: #fff; }
.wsp-switch summary::-webkit-details-marker { display: none; }
.wsp-switch summary .ik { color: #9fe0d6; }
.wsp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.wsp-switch .dd { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; width: min(420px, 90vw); max-height: 70vh; overflow-y: auto; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--shadow-rgb),.18); padding: 8px; }
.wsp-switch .dd p { margin: 4px 8px 6px; }
.wsp-switch .dd a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; }
.wsp-switch .dd a span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.wsp-switch .dd a:hover { background: var(--soft); }
.wsp-switch .dd a.on { background: var(--teal-light); }
.wsp-addr-top { color: #b9c9da; font-size: 14px; white-space: nowrap; }
.wspmenu { background: var(--card); border-bottom: 1px solid var(--line); }
.wspmenu .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.wspmenu a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 9px 10px; color: var(--muted); text-decoration: none; white-space: nowrap; font-size: 14px; border-bottom: 2px solid transparent; }
.wspmenu a:first-child { padding-left: 0; }
h1 + .stats { margin-top: 14px; }
.wspmenu a:hover { color: var(--navy); }
.wspmenu a.on { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.wspmenu a.on .ik { color: var(--teal); }
.subnav { background: var(--soft); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; }
.subnav a { padding: 5px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.subnav a:hover { color: var(--navy); background: var(--card); }
.subnav a.on { color: var(--navy); background: var(--card); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
h2.sec { margin: 28px 0 12px; }
h2.sec .small { font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.tile .ik { color: var(--navy); margin-top: 1px; }
.tile b { display: block; color: var(--navy); font-size: 15px; }
.tile small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
a.tile:hover { border-color: var(--teal); }
a.tile:hover .ik { color: var(--teal); }
.tile.off { background: var(--soft); }
.tile.off .ik, .tile.off b { color: var(--muted); }
.uwagi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.uwagi a { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; text-decoration: none; color: var(--ink); }
.uwagi a .ik { color: var(--warn-ink); }
.uwagi a:hover { border-color: var(--teal); }
@media (max-width: 1439px) { .wspmenu a .ik { display: none; } }
@media (max-width: 1300px) { .wsp-addr-top { display: none; } }
@media (max-width: 1100px) { .wspmenu a .ik { display: none; } .wsp-title { max-width: 30ch; } }
@media (max-width: 640px) {
  .wsp-addr-top { display: none; }
  .wsp-title { max-width: 60vw; }
}
/* Pulpit wspólnoty */
.pulpit-head { align-items: flex-start; }
.uwagi-dd { position: relative; }
.uwagi-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.uwagi-dd > summary::-webkit-details-marker { display: none; }
.uwagi-dd > summary > .ik:first-child { color: var(--warn-ink); }
.uwagi-dd .licz { background: var(--warn-bg); color: var(--warn-ink2); border-radius: 10px; padding: 0 7px; font-size: 12px; }
.uwagi-dd[open] > summary { border-color: var(--teal); }
.uwagi-dd .uwagi { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(460px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--shadow-rgb),.16); padding: 6px; gap: 2px; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.kpi-c { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.kpi-c:hover { border-color: var(--teal); }
.kpi-l { font-size: 13px; color: var(--muted); }
.kpi-c b { font-size: 24px; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi-c b small { font-size: 14px; font-weight: 400; color: var(--muted); }
.kpi-d { font-size: 12px; color: var(--muted); }
.terminy { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.terminy li { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.terminy li:last-child { border-bottom: 0; }
.t-data { display: grid; min-width: 96px; }
.t-data b { color: var(--navy); font-size: 15px; }
.t-data small { color: var(--muted); font-size: 12px; }
.terminy a { color: var(--ink); text-decoration: none; }
.terminy a:hover { color: var(--teal); text-decoration: underline; }
@media (max-width: 640px) { .uwagi-dd .uwagi { left: 0; right: auto; } }
/* Lista uwag strony (uwagi_dd) w górnym pasku */
header.top .uwagi-dd > summary { background: #e07b00; border: 0; color: #fff; padding: 5px 10px; font-size: 14px; font-weight: 600; gap: 6px; border-radius: 6px; }
header.top .uwagi-dd > summary .ik { color: #fff !important; }
header.top .uwagi-dd .licz { background: rgba(255,255,255,.25); color: #fff; }
header.top .uwagi-dd.z-krytyczne > summary { background: #c62828; }
header.top .uwagi-dd.z-sprawdz > summary { background: #d4a500; }
header.top .uwagi-dd.z-termin > summary { background: #2e7d4f; }
header.top .uwagi-dd .licz { background: rgba(255,255,255,.25) !important; color: #fff !important; }
header.top .uwagi-dd[open] > summary { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
header.top .uwagi-dd .uwagi { right: 0; left: auto; top: calc(100% + 10px); z-index: 30; }
.uwagi-dd .uwagi li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; font-size: 14px; color: var(--ink); border-radius: 6px; text-align: left; }
.uwagi-dd .uwagi li + li { border-top: 1px solid var(--line); border-radius: 0; }
.uwagi-dd .uwagi li > .ik { color: var(--warn-ink); margin-top: 2px; }
.uwagi-dd .uwagi li.u-krytyczne > .ik { color: var(--red); }
.uwagi-dd .uwagi li.u-pilne > .ik { color: #e07b00; }
.uwagi-dd .uwagi li.u-sprawdz > .ik { color: #d4a500; }
.uwagi-dd .uwagi li.u-termin > .ik { color: var(--ok-ink); }
.uwagi-dd .uwagi .u-kiedy { color: var(--muted); font-size: 12px; white-space: nowrap; }
.uwagi-dd .uwagi details.u-grupa > summary { cursor: pointer; list-style: none; }
.uwagi-dd .uwagi details.u-grupa > summary::-webkit-details-marker { display: none; }
.uwagi-dd .uwagi details.u-grupa > summary::after { content: " ▸"; color: var(--muted); }
.uwagi-dd .uwagi details.u-grupa[open] > summary::after { content: " ▾"; }
.uwagi-dd .uwagi details.u-grupa ul { margin: 6px 0 0; padding-left: 16px; max-height: 50vh; overflow: auto; }
.uwagi-dd .uwagi details.u-grupa li { display: list-item; padding: 3px 0; border: 0; font-size: 13px; }
.uwagi-dd .uwagi li div { min-width: 0; }
.uwagi-dd .uwagi li ul { margin: 4px 0 0; padding-left: 18px; }
.uwagi-dd .uwagi li a { display: inline; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.uwagi-dd .uwagi li a:hover { color: var(--teal); }
@media (max-width: 640px) { header.top .uwagi-dd .uwagi { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; } header.top .uwagi-dd .u-t { display: none; } }
/* Wybór motywu (Moje konto) */
.motywy { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.motyw { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: var(--card); cursor: pointer; }
.motyw:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.motyw input { position: absolute; opacity: 0; pointer-events: none; }
.motyw .prev { display: grid; grid-template-rows: 14px 1fr; height: 70px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.motyw .prev i { display: block; }
.motyw .prev span { display: flex; gap: 6px; padding: 8px; }
.motyw .prev b { flex: 1; border-radius: 4px; }
.motyw .nazwa { font-weight: 600; color: var(--navy); font-size: 14px; }
/* Rozliczenia wody */
details.mini { margin-top: 2px; }
details.mini summary { cursor: pointer; color: var(--teal); }
details.mini table.inner { margin-top: 6px; }
/* Dokumenty: przycisk pobierania nad opisem pliku */
table.dokumenty td .btn-secondary { display: inline-block; margin-bottom: 6px; }
a.btn-secondary { display: inline-block; text-decoration: none; }
/* Formularze: podpis, pole i podpowiedź w siatce wspólnej dla całego wiersza (subgrid) – pola w jednej linii i tej samej
   wysokości niezależnie od długości podpisu i podpowiedzi; bez subgrid: przynajmniej bez rozciągania */
.form-grid > label:not(.check) { display: grid; align-content: start; }
@supports (grid-template-rows: subgrid) {
  .form-grid > label:not(.check) { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-items: end; }
  .form-grid > label:not(.check) > .hint { align-self: start; }
}
/* nagłówek na początku karty bez dużego górnego marginesu (h2 ma 32px dla sekcji strony) */
.card > h2:first-of-type, .card > form > h2:first-of-type { margin-top: 0; }
/* Pola formularzy – JEDNA reguła dla wszystkich typów (tekst, data, miesiąc, liczba, e-mail, wyszukiwanie, lista):
   wysokość wprost (46 px = przycisk), żeby lista i data nie miały własnych wysokości przeglądarki; w formularzach
   w linii (.inline-form, filtry, tabela wyciągu) wersja kompaktowa 36 px razem z przyciskami. :where = specyficzność 0,
   więc szczególne reguły (np. .sheet .cell) dalej działają. */
:root { --pole-h: 46px; --pole-h-k: 36px; }
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image]),
       select:not([multiple], [size])) {
  font: inherit; font-size: 16px; line-height: normal; height: var(--pole-h); padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: var(--input, var(--card)); color: var(--ink); width: 100%; min-width: 0;
}
:where(textarea) { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; width: 100%; resize: vertical;
  background: var(--input, var(--card)); color: var(--ink); box-sizing: border-box; }
:where(select[multiple], select[size]) { font: inherit; font-size: 15px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; width: 100%;
  background: var(--input, var(--card)); color: var(--ink); }
.inline-form :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image]), select:not([multiple], [size])),
table.wyciag select {
  font-size: 14px; height: var(--pole-h-k); padding: 0 8px; border-radius: 6px; width: auto;
}
table.wyciag select { max-width: 220px; }
.inline-form :where(.btn, .btn-secondary, .btn-danger, button) { height: var(--pole-h-k); padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.inline-form input[type=file] { font-size: 14px; }
/* arkusz odczytów: pola kompaktowe, wiersze wyśrodkowane w pionie; pole wyboru w formularzu w linii na wysokości pól */
table.data.sheet td, table.sheet td { vertical-align: middle; }
.sheet .cell { height: var(--pole-h-k); padding: 0 8px; font-size: 15px; }
.inline-form label.check { align-self: flex-end; min-height: var(--pole-h-k); align-items: center; }

/* profil księgowania: opcje jako czytelne, zawijane przyciski wyboru */
fieldset.opcje, .form fieldset.opcje { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; min-width: 0; }
.opcje.obok { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.opcje label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); color: var(--ink); font-size: 14px; line-height: 1.35; cursor: pointer; }
.opcje label:has(input:checked) { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.opcje label:has(input:disabled) { cursor: default; }
.opcje input { margin-top: 3px; flex: none; }
.opcje .tag { margin-left: auto; flex: none; align-self: center; }

/* stały odstęp między blokami treści (kafelki, ramki, tabele) – bez wagi, jawne marginesy wygrywają */
:where(:not(.card) > :is(.stats, .kpi, .card, .table-wrap, .pusto, .note, details.card):not(:last-child)) { margin-bottom: 14px; }
/* zwinięta ramka <details> nie rezerwuje miejsca na treść */
details.card:not([open]) { gap: 0; padding-top: 16px; padding-bottom: 16px; }
details.card > summary { cursor: pointer; }
/* rozwinięta ramka nie rozpycha się do szerokości tabeli w środku (telefon: tabela przewija się w .table-wrap) */
details.card { grid-template-columns: minmax(0, 1fr); }
/* zwykła informacja (np. pusta lista) – bez żółtego tła uwag */
.pusto { margin-top: 0; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
/* pole wyboru z opisem w siatce formularza – cały wiersz, żeby opis się nie łamał */
.form-grid > label.check { grid-column: 1 / -1; }
/* pola tekstowe rosną z treścią (Chrome/Edge/Safari), w pozostałych przeglądarkach liczy się rows */
:where(textarea) { field-sizing: content; min-height: 5.5em; max-height: 70vh; }
/* przycisk-link w formularzu w linii – wyśrodkowany jak zwykły przycisk */
.inline-form a.btn-secondary, .inline-form a.btn { display: inline-flex; }
/* wiersze tabel z przyciskami akcji: treść i przycisk na jednej wysokości */
table.data tr:has(> td > form button, > td > .btn-secondary, > td > .btn) > td { vertical-align: middle; }
/* przyciski formularza w siatce – zawsze w osobnym, pełnym wierszu pod polami */
.form-grid > .actions { grid-column: 1 / -1; }
.actions { flex-wrap: wrap; }
.actions > :is(.btn, .btn-secondary, .btn-danger, button) { white-space: nowrap; }
/* uwaga z jednym odnośnikiem: kliknięcie w dowolne miejsce pozycji przenosi tam, gdzie uwaga prowadzi */
.uwagi-dd .uwagi li.klik { position: relative; cursor: pointer; }
.uwagi-dd .uwagi li.klik a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.uwagi-dd .uwagi li.klik:hover { background: var(--row-hover, rgba(0,0,0,.04)); }
/* odczyty z poczty */
.flash-blad { background: var(--red-bg); color: var(--red); }
table.poczta tbody tr { cursor: pointer; }
table.import tr.imp-jest td, table.import tr.imp-starszy td, table.import tr.imp-poza td { color: var(--muted); }
table.import select { min-width: 260px; }
.mail-tresc { font-size: 14px; line-height: 1.5; white-space: normal; max-height: 360px; overflow: auto; }
.zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 14px; }
.zdjecia img { width: 100%; height: 440px; object-fit: contain; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: block; }
form.inline { display: inline; }
td.nowrap, .nowrap { white-space: nowrap; }
.tag { white-space: nowrap; }
.wsp.demo .wsp-name::after { content: "demo"; margin-left: 8px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--tag-bg); color: var(--muted); vertical-align: 2px; }
/* odczyty z poczty: filtr mediów, oznaczenia mediów */
.inline-form fieldset.media-wybor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; border: 0; min-height: var(--pole-h-k); align-self: flex-end; }
.inline-form fieldset.media-wybor legend { float: left; font-size: 12px; color: var(--muted); padding: 0; margin-right: 2px; }
.inline-form fieldset.media-wybor label.check { min-height: 0; align-self: center; gap: 5px; }
.tag.media-woda { background: var(--info-bg); color: var(--info-ink); }
.tag.media-gaz { background: var(--warn-bg); color: var(--warn-ink2); }
.tag.media-cieplo { background: var(--red-bg); color: var(--red); }
.tag.media-prad { background: var(--violet-bg); color: var(--violet-ink); }
.typ-GAZ { background: var(--warn-bg); color: var(--warn-ink2); }
.typ-CO { background: var(--red-bg); color: var(--red); }
.typ-EE { background: var(--violet-bg); color: var(--violet-ink); }
table.sheet input[type=text] { max-width: 140px; }
.filtr-poczta select[name=od] { max-width: 340px; }
/* sortowane nagłówki tabel */
th[data-sort]:hover { color: var(--ink); }
th[aria-sort=ascending]::after { content: " ▲"; font-size: 10px; }
th[aria-sort=descending]::after { content: " ▼"; font-size: 10px; }
.switch .actions.obok { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.switch .actions.obok select { width: auto; flex: 0 1 auto; }
@media (max-width: 760px) { .switch .actions.obok { justify-content: flex-start; } }
/* kopia zapasowa */
.kopia-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.kopia-karty > .card { margin: 0; }
.card h2.wide, .form-grid > h2 { grid-column: 1 / -1; margin: 0; }
.form-grid > p.wide { grid-column: 1 / -1; margin: 0; }
details.card > summary label.check { display: inline-flex; gap: 8px; align-items: center; margin-right: 8px; }
/* naliczenia: wydruk i wysyłka zawiadomienia z rozwiniętego lokalu */
.lok-akcje { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 10px; }
.lok-akcje .btn, .lok-akcje .btn-secondary { display: inline-flex; align-items: center; }
.lok-akcje { position: sticky; left: 0; max-width: calc(100vw - 72px); }
/* pole wyboru pliku: ta sama wysokość i ramka co pozostałe pola, przycisk „Przeglądaj” wewnątrz pola */
:where(input[type=file]) {
  font: inherit; font-size: 15px; width: 100%; max-width: 100%; height: var(--pole-h); line-height: calc(var(--pole-h) - 2px);
  padding: 0 10px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--input, var(--card)); color: var(--ink);
  box-sizing: border-box; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
input[type=file]::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600; height: 100%; margin: 0 12px 0 0; padding: 0 16px;
  border: 0; border-right: 1px solid var(--line); background: var(--tag-bg); color: var(--navy); cursor: pointer;
}
input[type=file]:hover::file-selector-button { filter: brightness(.96); }
.inline-form input[type=file] { height: var(--pole-h-k); line-height: calc(var(--pole-h-k) - 2px); width: auto; min-width: 280px; }
@media (min-width: 700px) { .form-grid > label:has(> input[type=file]):not(.wide) { grid-column: span 2; } }
table.kontr tbody tr { cursor: pointer; }
/* księgowość: konta */
table.konta tbody tr:not(.suma) { cursor: pointer; }
table.konta tr.suma td { font-weight: 700; background: var(--tag-bg); }
table tr.wybrany td { background: var(--note-bg); }

/* zamknięcie roku: lista kontrolna – na telefonie kontrola, stan i szczegóły jedno pod drugim */
table.zamk table.data { margin-top: 6px; }
table.pk-pozycje input { width: 100%; min-width: 7em; }
@media (max-width: 640px) {
  table.zamk thead { display: none; }
  table.zamk > tbody > tr > td { display: block; border-bottom: 0; padding: 4px 12px; }
  table.zamk > tbody > tr > td:first-child { padding-top: 12px; }
  table.zamk > tbody > tr > td:last-child { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
}
.zamk-werdykt p, .zamk-werdykt ul { margin: 0 0 8px; }
.zamk-werdykt form { margin: 0; }
.os-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.os-grid > * { min-width: 0; overflow-wrap: anywhere; }
.os-grid .card { margin: 0; }
table.data tr.muted td { color: var(--muted); }
@media (max-width: 760px) { .os-grid { grid-template-columns: minmax(0, 1fr); } }
.zg-rada { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--teal); background: var(--soft); border-radius: 0 6px 6px 0; }
table.zg { table-layout: fixed; } table.zg th.zg-k { width: 24%; } table.zg th.zg-s { width: 130px; }
table.data td.zg-pod { padding-left: 22px; color: var(--muted); }
/* wyciąg: dekretacja pozycji (konto przeciwne) */
table.wyciag select.dek { max-width: 280px; width: 100%; }
table.wyciag input.dek-konto { width: 8em; padding: 4px 8px; margin-top: 4px; min-height: 0; }
table.wyciag select.dek.pominieta { opacity: .4; text-decoration: line-through; }
/* przełącznik programów Jurysty (Zarządca ↔ Księgowość firm) */
header.top .menu .app-switch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; text-decoration: none; }
header.top .menu .app-switch:hover { background: rgba(255,255,255,.12); }
.login-cele { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login-cele .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding-left: 10px; padding-right: 10px; }
.login-cele .btn + .btn { background: var(--navy-2); }
/* telefon (przegląd 17.10): pasek górny w jednym rzędzie – teksty przy ikonach chowane (.m-tekst), wylogowanie jako ikona */
.m-ikona { display: none; }
@media (max-width: 640px) {
  header.top .wrap { gap: 8px; min-height: 52px; flex-wrap: nowrap; }
  header.top .menu { margin-left: auto; width: auto; padding-bottom: 0; gap: 6px; flex-wrap: nowrap; }
  header.top .m-tekst, .btn-back .m-tekst { display: none; }
  header.top .m-ikona { display: inline-flex; }
  header.top .menu .app-switch { padding: 5px 7px; }
  header.top .btn-link { padding: 5px 7px; display: inline-flex; }
  header.top .wsp-switch summary { min-width: 0; }
  .wsp-title { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
  header.top .logo span small { display: none; }
  .btn-back { padding: 5px 8px; }
  /* menu modułów: cień po prawej – widać, że da się przewinąć */
  nav.wspmenu { position: relative; }
  nav.wspmenu::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--card)); }
  .kpi { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-c { padding: 10px 12px; }
  .kpi-c b { font-size: 18px; }
  /* tabele „karty” (app.js / ks.js dopisują etykiety kolumn): wiersz = karta „etykieta – wartość” */
  table.karty thead { display: none; }
  table.karty, table.karty > tbody, table.karty > tbody > tr, table.karty > tbody > tr > td, table.karty > tfoot, table.karty > tfoot > tr { display: block; width: auto; }
  table.karty > tbody > tr { padding: 8px 12px; border-bottom: 1px solid var(--line); }
  table.karty > tbody > tr > td { border: 0; padding: 2px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; white-space: normal; }
  table.karty > tbody > tr > td::before { content: attr(data-l); color: var(--muted); font-size: 12px; text-align: left; flex: 0 0 auto; max-width: 45%; }
  table.karty > tbody > tr > td:first-child { display: block; text-align: left; font-size: 15px; }
  table.karty > tbody > tr > td:first-child::before { content: none; }
  table.karty > tbody > tr > td[data-l=""]::before { content: none; }
  table.karty > tbody > tr > td:empty, table.karty .hide-sm { display: none; }
  table.karty > tbody > tr > td input:not([type=checkbox]), table.karty > tbody > tr > td select { flex: 1 1 auto; max-width: 62%; }
  table.karty > tfoot > tr > th { display: inline-block; border: 0; }
}
/* wybór z wyszukiwaniem (app.js select[data-szukaj]) i odświeżanie fragmentu (form[data-ajax]) */
input.szukaj-wybor { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; min-width: 11em; max-width: 280px; background: var(--card); color: var(--ink); }
input.szukaj-wybor.zle { border-color: var(--danger-border); background: var(--red-bg); }
.laduje { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* koszty: kategoria wprost na liście */
.kat1 { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.kat1 select { max-width: 230px; font-size: 13px; padding: 3px 6px; min-height: 0; height: 30px; }
.kat1 .btn-secondary.small { padding: 2px 8px; }
.kolejka-wys { flex-basis: 100%; margin-top: 6px; }
.kolejka-wys progress { vertical-align: middle; width: 140px; margin: 0 6px; }

/* biuro: do zrobienia */
.do-zrobienia { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.do-zrobienia > li > details { border-radius: 8px; background: var(--note-bg); color: var(--note-ink); }
.do-zrobienia summary { padding: 7px 12px; cursor: pointer; }
.do-zrobienia details ul { margin: 0; padding: 0 12px 8px 30px; }
.do-zrobienia details a { color: inherit; }

/* wyszukiwarka globalna i skróty (szukaj.js) */
.szukaj-btn { display: inline-flex; align-items: center; gap: 4px; }
dialog.szukaj-glob { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: 0; border: 1px solid var(--line, #d0d7de); border-radius: 12px; background: var(--card, #fff); color: inherit; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
dialog.szukaj-glob::backdrop { background: rgba(15, 30, 50, .35); }
dialog.szukaj-glob input[type=search] { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line, #d0d7de); border-radius: 12px 12px 0 0; padding: 14px 16px; font-size: 17px; outline: none; }
.szukaj-wyniki { max-height: calc(min(80vh, 640px) - 100px); overflow-y: auto; padding: 4px 0; }
.szukaj-wyniki h3 { margin: 8px 16px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667); }
.szukaj-wyniki a { display: block; padding: 6px 16px; text-decoration: none; color: inherit; }
.szukaj-wyniki a span { display: block; font-size: 13px; color: var(--muted, #667); }
.szukaj-wyniki a.on, .szukaj-wyniki a:hover { background: var(--info-bg, #e3eefb); }
.szukaj-pusto { margin: 12px 16px; color: var(--muted, #667); }
.szukaj-pomoc { margin: 0; padding: 8px 16px; font-size: 12px; color: var(--muted, #667); border-top: 1px solid var(--line, #d0d7de); }
dialog.skroty { padding: 16px; }
dialog.skroty kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line, #d0d7de); border-radius: 4px; font: 13px monospace; text-align: center; }

/* stronicowanie długich list */
.strony { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0; }
.strony a, .strony b { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; background: var(--card); }
.strony b { border-color: var(--teal); background: var(--teal-light); }
.strony > span:first-child { margin-right: 8px; }

/* lista odświeżana na żywo (na_zywo.js) */
main.laduje-lekko { opacity: .7; transition: opacity .12s; }

/* analizy: wykres słupkowy zaległości w tabeli */
.wykres-zal td.pasek { width: 55%; }
.wykres-zal td.pasek span { display: block; height: 12px; border-radius: 3px; background: var(--teal); min-width: 2px; }
.wykres-zal tr.prognoza td.pasek span { background: repeating-linear-gradient(45deg, var(--teal) 0 4px, transparent 4px 8px); border: 1px solid var(--teal); }
.podglad-zmiany { margin-bottom: 14px; } .podglad-zmiany summary { cursor: pointer; }

/* rzędy z polem i przyciskiem obok siebie (pasek narzędzi listy, filtr, akcje pod tabelą) – jedna, kompaktowa wysokość
   jak w .inline-form, żeby lista wyboru i przycisk nie były różnej wysokości (oba programy) */
:is(.ks-pasek, .ks-filtr, .actions:has(select, input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]))) :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image]), select:not([multiple], [size])) {
  font-size: 14px; height: var(--pole-h-k); padding: 0 8px; border-radius: 6px; width: auto; box-sizing: border-box;
}
:is(.ks-pasek, .ks-filtr, .actions:has(select, input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]))) :where(.btn, .btn-secondary, .btn-danger, button) {
  height: var(--pole-h-k); padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
/* rząd akcji: przycisk główny i drugorzędne tej samej wysokości (wcześniej „Zapisz” był wyraźnie wyższy od sąsiednich) */
.actions :is(.btn, .btn-secondary, .btn-danger) {
  height: var(--pole-h-k); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 15px; line-height: 1; vertical-align: middle;
}
/* telefon: długi napis przycisku zawija się w dwie linie i przycisk rośnie, zamiast wychodzić poza ekran */
@media (max-width: 640px) { .actions > :is(.btn, .btn-secondary, .btn-danger, button) { white-space: normal; max-width: 100%; height: auto; min-height: var(--pole-h-k); padding-block: 6px; line-height: 1.3; } }
/* formularz w jednym rzędzie: podpowiedź pod polem nie zmienia wyrównania pól i przycisków (pozycjonowana pod polem, rząd robi jej miejsce) */
.inline-form label { position: relative; }
.inline-form label > .hint { position: absolute; top: 100%; left: 0; margin-top: 2px; white-space: nowrap; font-size: 12px; }
.inline-form:has(label > .hint) { margin-bottom: 26px; }

/* rejestr zadań: lista na pulpicie wspólnoty, „odłóż” przy zadaniu, odłożone i ukryte */
.do-zrobienia.plaska > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 12px; border-radius: 8px; background: var(--note-bg); color: var(--note-ink); }
.do-zrobienia.plaska > li.pilne { background: var(--red-bg); }
.do-zrobienia.plaska > li > a { flex: 1 1 auto; color: inherit; text-decoration: none; }
.do-zrobienia details ul li { margin: 3px 0; }
.zad-odloz { display: inline-block; font-size: 12px; }
.zad-odloz > summary { cursor: pointer; color: var(--muted); list-style: none; padding: 0 4px; }
.zad-odloz > summary::-webkit-details-marker { display: none; }
.zad-odloz[open] > form { margin-top: 4px; }
.zad-odlozone { margin: 4px 0 14px; } .zad-odlozone summary { cursor: pointer; color: var(--muted); }
/* „Wyczyść” w formularzach filtrów – zawsze widoczny, spokojniejszy od „Pokaż” */
.btn-secondary.wyczysc { color: var(--muted); gap: 6px; text-decoration: none; }
.btn-secondary.wyczysc:hover { color: var(--navy); }

/* pulpit: kalendarz terminów (lewo) + „Do zrobienia” jako kategorie z wysuwanymi panelami (prawo) */
.w-pilne { --wb: var(--red-bg); --wi: var(--red); }
.w-wazne { --wb: var(--warn-bg); --wi: var(--warn-ink2); }
.w-sred  { --wb: var(--note-bg); --wi: var(--note-ink); }
.w-info  { --wb: var(--info-bg); --wi: var(--info-ink); }
.pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 16px; margin: 0 0 22px; align-items: stretch; }
.pz > .card { margin: 0; padding: 14px 16px; }
.pz h2 { font-size: 17px; margin: 0; }
.kal-g { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kal-n { font: inherit; font-size: 20px; line-height: 1; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--navy); cursor: pointer; }
.kal-n:hover:not(:disabled) { border-color: var(--teal); }
.kal-n:disabled { opacity: .35; cursor: default; }
.kal-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-dt { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.kal-d { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; height: 46px; padding: 5px 7px; border-radius: 7px; font: inherit; font-size: 14px;
  border: 1px solid transparent; background: var(--soft); color: var(--ink); box-sizing: border-box; }
.kal-d.wk { color: var(--muted); }
.kal-d.minal { opacity: .55; }
.kal-d.dzis { border-color: var(--navy); font-weight: 700; }
button.kal-d { cursor: pointer; background: var(--wb); color: var(--wi); font-weight: 600; border-color: color-mix(in srgb, var(--wi) 25%, transparent); }
button.kal-d:hover { border-color: var(--wi); }
button.kal-d.dzis { border-color: var(--navy); }
.kal-d small { position: absolute; right: 5px; bottom: 3px; font-size: 11px; font-weight: 700; }
.kal-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.kal-leg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--wb); border: 1px solid var(--wi); margin-right: 5px; vertical-align: -1px; }
.kal-najbl { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 14px; display: grid; gap: 3px; }
.kal-najbl a { color: var(--ink); }
.kal-najbl a:hover { color: var(--teal); }
.pz-lista { position: relative; min-height: 220px; }
.pz-przew { position: absolute; inset: 14px 16px; overflow-y: auto; }
.pz-lista h2 { margin-bottom: 10px; }
.pz-pusto { margin: 0; }
.pz-kat { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pz-kat > li { display: flex; align-items: center; gap: 6px; padding-right: 8px; border-radius: 8px; background: var(--wb); color: var(--wi); flex-wrap: wrap; }
.pz-kat > li.pz-odl { background: var(--soft); color: var(--muted); }
.pz-k { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 12px; font: inherit; font-size: 14px; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none; }
.pz-k > span:first-child { flex: 1 1 auto; min-width: 0; }
.pz-k > small { white-space: nowrap; opacity: .8; }
.pz-k:hover > span:first-child { text-decoration: underline; }
.pz-ile { min-width: 24px; padding: 1px 7px; border-radius: 10px; background: var(--card); color: var(--wi, var(--muted)); font-size: 12px; text-align: center; }
.pz-str { font-size: 18px; line-height: 1; }
.pz-kat .zad-odloz > summary { color: inherit; opacity: .75; }
.pz-kat .zad-odloz[open] { flex-basis: 100%; padding: 0 0 8px 12px; }
/* wysuwany panel (popover): obok kategorii albo pod dniem; na telefonie od dołu ekranu */
.fly { margin: 0; padding: 0; width: min(440px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .22); }
.fly:popover-open { animation: fly-wj .16s ease-out; }
.fly[data-fly="bok"]:popover-open { animation-name: fly-bok; }
@keyframes fly-wj { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fly-bok { from { opacity: 0; transform: translateX(14px); } }
.fly::backdrop { background: transparent; }
.fly-g { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.fly-g h3 { margin: 0; font-size: 15px; }
.fly-x { font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; }
.fly-l { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.fly-l > li { font-size: 14px; padding: 7px 10px; border-radius: 8px; background: var(--wb, var(--soft)); color: var(--wi, var(--ink)); }
.fly-l > li > a, .fly-l > li > span:first-child { display: block; color: inherit; text-decoration: none; }
.fly-l > li > a > b, .fly-l > li > span > b { display: block; font-size: 13px; }
.fly-l > li > a:hover > span { text-decoration: underline; }
.fly-s { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; font-size: 12px; opacity: .85; }
.fly-s .zad-odloz[open] { flex-basis: 100%; }
.fly-l form.inline { display: inline; }
@media (max-width: 900px) {
  .pz { grid-template-columns: 1fr; }
  .pz-lista { min-height: 0; }
  .pz-przew { position: static; }
  .fly { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 75vh; border-radius: 14px 14px 0 0; }
  .fly[data-fly]:popover-open { animation-name: fly-dol; }
  @keyframes fly-dol { from { transform: translateY(30px); opacity: 0; } }
  .kal-d { height: 40px; }
}
/* pasek górny – wspólny dla obu programów (pasek_gorny w wspolne.php): program | wybór | … | uwagi, użytkownik, szukaj, wyloguj.
   Program i wybór mają stałą szerokość, żeby pasek nie skakał przy przełączaniu wspólnot, firm i programów. */
header.pasek .wrap { position: relative; display: grid; grid-template-columns: 270px minmax(330px, 500px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.p-app { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 17px; }
.p-app-t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b9c9da; }
.p-app-t b { color: #fff; font-weight: 700; }
.p-app-zm { display: inline-flex; color: #9fe0d6; opacity: .65; }
a.p-app:hover { background: rgba(255,255,255,.10); }
a.p-app:hover .p-app-zm { opacity: 1; }
.p-wybor { min-width: 0; }
.p-wybor summary { justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.p-wybor summary:hover, .p-wybor[open] summary { background: rgba(255,255,255,.10); }
.p-wybor .wsp-title { flex: 1; min-width: 0; max-width: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-wybor .wsp-title.pusty { color: #d6e2ee; font-weight: 600; }
.p-wybor .p-m { display: none; }
.p-wybor .dd a.dd-powrot { font-weight: 600; color: var(--teal); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.p-user { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; color: #9fe0d6; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; }
.p-user:hover, .p-user.on { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.p-inic { display: none; }
.p-prawo { grid-column: 4; display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* stałe miejsce na „Uwagi” (puste, gdy brak) – „Szukaj” i „Wyloguj” zawsze w tym samym miejscu */
.p-uwagi { width: 128px; display: flex; justify-content: flex-end; }
header.top .p-uwagi .uwagi-dd { width: 100%; }
header.top .p-uwagi .uwagi-dd > summary { width: 100%; box-sizing: border-box; justify-content: center; }
.p-prawo .szukaj-btn { width: 96px; justify-content: center; } .p-prawo .logout .btn-link { width: 104px; justify-content: center; }
header.pasek.wsp-mode .wrap { gap: 12px; }
.p-prawo .btn-link { display: inline-flex; align-items: center; gap: 6px; }
/* węższe ekrany: bez słowa „Jurysta” (zostaje nazwa programu) – więcej miejsca na pełną nazwę wspólnoty */
@media (max-width: 1440px) { header.pasek .wrap { grid-template-columns: 196px minmax(300px, 500px) minmax(0, 1fr) auto; } .p-app .p-j { display: none; } .p-wybor summary { font-size: 16px; } }
@media (max-width: 1150px) {
  /* tablet: po prawej same ikony (podpis w podpowiedzi), użytkownik jako inicjały – pełne napisy nie mieściły się w 768 px */
  header.pasek .wrap { grid-template-columns: auto minmax(0, 420px) minmax(0, 1fr) auto; }
  .p-prawo .m-tekst { display: none; }
  .p-user .p-ik { display: none; }
  .p-inic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
  .p-user.on .p-inic { background: var(--teal); }
  .p-prawo .szukaj-btn, .p-prawo .logout .btn-link { width: auto; }
}
@media (max-width: 640px) {
  header.pasek .wrap, header.pasek.wsp-mode .wrap { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .p-prawo { grid-column: 3; }
  .p-app { padding: 2px; gap: 4px; } .p-app-t, .p-app-zm { display: none; }
  .p-wybor .p-d { display: none; } .p-wybor .p-m { display: inline; }
  .p-user .p-ik { display: none; }
  .p-inic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
  .p-user.on .p-inic { background: var(--teal); }
  .p-wybor summary { padding: 5px 6px; font-size: 15px; }
  .p-wybor .dd { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; }
  .p-prawo { gap: 6px; }
  .p-uwagi { width: 62px; }
  .p-prawo .szukaj-btn, .p-prawo .logout .btn-link { width: auto; }
}
/* zamknięta lista nie bierze udziału w układzie (inaczej na telefonie poszerzała stronę) */
.uwagi-dd:not([open]) .uwagi, .wsp-switch:not([open]) .dd { display: none; }
/* długie listy wyboru w filtrach nie wychodzą poza ekran telefonu (np. Kategoria w kosztach) */
.inline-form > label { max-width: 100%; min-width: 0; }
.inline-form select, .inline-form label > span { max-width: 100%; min-width: 0; }
span.inline-form { display: inline-flex; flex-wrap: wrap; max-width: 100%; } span.inline-form select { max-width: 100%; }
/* własne terminy: dodawanie z kalendarza */
.kal-stopka { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; }
.kal-stopka .kal-leg { margin: 0; }
a.kal-nowy { text-decoration: none; }
a.kal-nowy:hover { border-color: var(--teal); background: var(--teal-light); }
a.kal-nowy:hover::after { content: "+"; position: absolute; right: 7px; top: 4px; color: var(--teal); font-weight: 700; }
.fly-dodaj { margin: 0; padding: 4px 16px 12px; font-size: 14px; }
.termin-wyst { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.termin-wyst p { margin: 0; }
/* telefon: w menu modułów same ikony (nazwa w podpowiedzi i dla czytników ekranu), rozłożone na całą szerokość */
@media (max-width: 640px) {
  .wspmenu .wrap { justify-content: space-between; gap: 0; }
  .wspmenu a, .wspmenu a:first-child { padding: 11px 5px 9px; }
  .wspmenu a .ik { display: inline-block !important; width: 21px; height: 21px; }
  .wspmenu a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  nav.wspmenu::after { display: none; }
}
/* telefon: „Uwagi” bez ikonki – kolor (pomarańczowy / czerwony) i liczba wystarczą */
@media (max-width: 640px) {
  header.top .uwagi-dd > summary > .ik:first-child { display: none; }
  header.top .uwagi-dd > summary { padding: 5px 7px; gap: 4px; }
  .p-uwagi { width: 52px; }
}
/* Administracja → System */
.pigulki { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.pigulki a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--navy); text-decoration: none; font-size: 14px; }
.pigulki a:hover { border-color: var(--teal); }
.pigulki a.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.pigulki a .licz { background: #e07b00; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.pigulki.male a { padding: 4px 11px; font-size: 13px; }
.pigulki a.on .muted { color: rgba(255,255,255,.8); }
.sys-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; align-items: start; }
.sys-siatka > .card { margin: 0; }
.sys-siatka h2 { font-size: 17px; margin: 0 0 8px; }
.sys-szeroka { grid-column: 1 / -1; }
table.sys-tab { width: 100%; margin: 0 0 6px; border-collapse: collapse; font-size: 14px; }
table.sys-tab th, table.sys-tab td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; background: none; }
table.sys-tab tr:last-child > * { border-bottom: 0; }
table.sys-tab th { font-weight: 400; color: var(--muted); width: 40%; padding-right: 14px; }
table.sys-tab td.n { text-align: right; white-space: nowrap; padding-left: 12px; }
.sys-siatka details { margin: 4px 0 8px; }
.sys-log { max-height: 320px; overflow: auto; font-size: 12px; background: var(--soft); padding: 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.sys-skan { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sys-bledy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sys-bledy > li { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--wi); border-radius: 10px; padding: 10px 14px; }
.sys-bledy > li.zamk { opacity: .75; border-left-color: var(--line); }
.sys-bledy p { margin: 4px 0; }
.sb-g { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sb-w { display: block; font-size: 12px; color: var(--muted); }
.sb-g a { color: var(--ink); text-decoration: none; }
.sb-g a:hover { color: var(--teal); text-decoration: underline; }
.sb-zamknij > summary { cursor: pointer; font-size: 13px; color: var(--teal); }
@media (max-width: 640px) { .sys-siatka { grid-template-columns: 1fr; } }
/* aplikacja na telefon (PWA): przycisk instalacji w stopce; w trybie aplikacji stopka bez niego */
.pwa-instalacja { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 8px; }
.pwa-instalacja:not(:has(:not([hidden]))) { display: none; }
html.pwa .pwa-instalacja { display: none; }

/* box „Zmiany przepisów i stawek” (monitor.php) */
.monitor { margin-top: 18px; }
.monitor .mon-kol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 8px 22px; }
.monitor .mon-kol h3 { margin: 6px 0 4px; font-size: 15px; }
.monitor .mon-wiecej > summary { cursor: pointer; font-size: 13px; color: var(--teal); padding: 6px 0; }
.monitor .mon-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.monitor .mon-lista li { position: relative; padding: 7px 24px 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.monitor .mon-lista li .tag { margin-right: 4px; }
.monitor .mon-ukryj { position: absolute; right: 0; top: 6px; margin: 0; }
.monitor .mon-ukryj .link-btn { color: var(--muted); font-size: 13px; }

/* Pomoc – instrukcja (pomoc.php; ten sam blok w ks.css Księgowości) */
.pom-szukaj { display: flex; gap: 12px; align-items: center; padding: 12px 16px; position: sticky; top: 64px; z-index: 5; }
.pom-szukaj input[type=search] { flex: 1; font-size: 16px; }
.pom-spis ol { columns: 2; margin: 8px 0 0; padding-left: 22px; }
.pom-spis li { margin: 3px 0; }
.pomoc .pom-sek { margin-top: 14px; padding: 18px 22px; scroll-margin-top: 130px; }
.pomoc .pom-sek h2 { margin-top: 0; font-size: 19px; }
.pomoc .pom-sek h3 { font-size: 15px; margin: 14px 0 4px; }
.pomoc .pom-sek p, .pomoc .pom-sek li { line-height: 1.55; }
.pomoc .pom-sek ul, .pomoc .pom-sek ol { padding-left: 22px; }
.pomoc .wskazowka, .pomoc .uwaga { border-left: 4px solid var(--teal); background: var(--teal-light); padding: 8px 12px; border-radius: 6px; margin: 10px 0; }
.pomoc .uwaga { border-left-color: var(--warn-ink); background: var(--warn-bg); }
.pomoc kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 13px; background: var(--card); }
.pomoc mark { background: #ffe066; color: inherit; padding: 0 1px; border-radius: 2px; }
.pomoc table { border-collapse: collapse; margin: 8px 0; } .pomoc td, .pomoc th { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
@media (max-width: 700px) { .pom-spis ol { columns: 1; } .pom-szukaj { top: 56px; } }
@media print { header.top, nav.mods, .pom-szukaj, .head-row .actions, .pom-spis { display: none !important; } .pomoc .pom-sek { box-shadow: none; border: 0; padding: 0; break-inside: auto; } }
.pomoc [hidden], .pom-spis[hidden] { display: none !important; }
.pomoc .pom-sek > * { margin-top: 0; }
.pomoc .pom-sek p, .pomoc .pom-sek ul, .pomoc .pom-sek ol, .pomoc .pom-sek table { margin: 6px 0 8px; }
.pomoc .pom-sek h2 { margin-bottom: 8px; }
.pomoc .pom-sek li { margin: 3px 0; }
.pomoc .pom-sek, .pom-spis { display: block; }

/* pulpit wspólnoty: liczby w skróconej formie obok nazwy (nazwa zawija się w dwie linie, gdy brak miejsca) */
.pulpit-glowa { flex-wrap: wrap; align-items: flex-start; }
.pulpit-glowa > :first-child { flex: 1 1 0; min-width: 180px; }
.pulpit-glowa h1 { overflow-wrap: anywhere; }
.kpi.kpi-mini { display: flex; flex: 0 0 auto; gap: 8px; margin: 0; }
.kpi-mini .kpi-c { padding: 7px 12px; gap: 0; min-width: 0; }
.kpi-mini .kpi-l { font-size: 12px; white-space: nowrap; }
.kpi-mini .kpi-c b { font-size: 18px; white-space: nowrap; }
.kpi-mini .kpi-c b small { font-size: 12px; }
.kpi-mini .kpi-d { font-size: 11px; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* do 1000 px liczby pod nazwą, na całą szerokość (tablet 768 px: wcześniej wystawały poza ekran) */
@media (max-width: 1000px) { .pulpit-glowa > :first-child { flex-basis: 100%; } .kpi.kpi-mini { min-width: 0; }
  .kpi.kpi-mini { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* telefon i tablet: opisy zawijają się zamiast wychodzić na sąsiedni kafelek (20.10.2026) */
  .kpi-mini .kpi-l, .kpi-mini .kpi-d { white-space: normal; overflow: visible; max-width: 100%; overflow-wrap: break-word; text-wrap: balance; }
  .kpi-mini .kpi-c > * { min-width: 0; max-width: 100%; }
  /* kafelki w rzędzie mają równą wysokość – treść każdego wyśrodkowana w pionie i poziomie, bez „rozjechanych” odstępów */
  .kpi-mini .kpi-c { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2px; } }

.pomoc .kr { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -0.05em; margin-right: 4px; } .pomoc .kr-c { background: #c62828; } .pomoc .kr-p { background: #e07b00; } .pomoc .kr-z { background: #d4a500; } .pomoc .kr-g { background: #2e7d4f; }
.kpi-mini .kpi-c { text-align: center; justify-items: center; }
.tile { align-items: center; } .tile .ik { margin-top: 0; }
.tile { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.tile .tile-t { display: inline-flex; align-items: center; gap: 8px; } .tile .tile-t .ik { margin: 0; flex: none; }

/* okno potwierdzenia (popover na środku ekranu) – np. „Usuń wyciąg” */
.fly.okno { margin: auto; width: min(520px, calc(100vw - 24px)); max-height: min(80vh, 640px); }
.fly.okno::backdrop { background: rgba(var(--shadow-rgb), .35); }
.okno-t { padding: 14px 16px 16px; }
.okno-t > p { margin: 0 0 12px; }
.okno-t .fly-l { padding: 0; margin: 0 0 14px; }
.okno-t .fly-l > li { background: var(--red-bg); color: var(--ink); }
.okno-t .fly-l > li > a > span { font-size: 13px; color: var(--muted); }
.okno-t .actions { justify-content: flex-end; margin: 0; }
.btn-danger .ik, .btn-secondary .ik { margin: -2px 4px 0 0; }
.wyc-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
tr:target > td { background: var(--warn-bg, #fff6d6); }
.actions > .btn-danger:has(.ik) { display: inline-flex; align-items: center; }
.profil-szcz > td { background: var(--soft); padding-top: 4px; } .profil-szcz p { margin: 6px 0; } .profil-szcz table { margin: 4px 0; }
.profil-szcz details.k200 > summary { cursor: pointer; padding: 4px 0; } .profil-szcz details.k200[open] > summary { margin-bottom: 4px; }