:root {
  --ground: #F4F6F8; --surface: #FFFFFF; --ink: #14202B; --ink-2: #475467; --muted: #667085;
  --line: #E4E7EC; --field: #C9D1DA; --accent: #0F6E66; --accent-ink: #0A4F49;
  --chip: #EEF2F6; --chip-ink: #344054;
  --soon-bg: #FEF0C7; --soon-ink: #7A2E0E; --check-bg: #FEF7C3; --check-ink: #713B12; --late-bg: #FEE4E2; --late-ink: #912018;
  --done-bg: #D1FADF; --done-ink: #05603A; --warn: #B54708;
  /* Text on filled buttons and dark chips; tints, borders and chart greys. */
  --on-accent: #FFFFFF; --on-ink: #FFFFFF; --approve-hover: #034A2C;
  --border-strong: #D0D5DD; --subtle: #FAFBFC; --subtle-2: #F2F4F7;
  --accent-soft: #F0F8F7; --accent-soft-2: #E3F1EF;
  --soon-line: #FEDF89; --soon-soft: #FFFCF0; --late-line: #FDA29B;
  /* Schedule: morning dusk yellow, afternoon light green, evening purple, holiday grey. */
  --sh-morning: #F6DFA0; --sh-afternoon: #CDEBC9; --sh-evening: #DCCBF2; --sh-ink: #344054; --hol: #DDE1E6;
  --grid: #EEF0F3; --neutral-bar: #98A2B3; --info-bg: #E6EEF7; --info-ink: #1F4E79;
  --ticker-bg: #14202B; --shadow: 20, 32, 43;
  --brand-tile: #0F6E66; --brand-glyph: #FFFFFF;
  /* Notes (ksefapp.note_colours): each person's colour, and the service (Pomoc). */
  --note-green-bg: #E3F1EF; --note-green-ink: #0A3F3A; --note-green-dot: #0F6E66; --note-purple-bg: #EFE9F8; --note-purple-ink: #46306F; --note-purple-dot: #7A5BB5;
  --note-blue-bg: #E6EEF7; --note-blue-ink: #1F3F66; --note-blue-dot: #2E6DB4; --note-pink-bg: #FBE7F0; --note-pink-ink: #7A2550; --note-pink-dot: #C4558A;
  --note-sand-bg: #F8EFDD; --note-sand-ink: #5E4413; --note-sand-dot: #C08A2E; --note-graphite-bg: #ECEFF3; --note-graphite-ink: #26313D; --note-graphite-dot: #5B6B7C;
  --note-peach-bg: #FCEADF; --note-peach-ink: #7A3B17; --note-peach-dot: #DD7F4B; --note-olive-bg: #EEF1DC; --note-olive-ink: #46511A; --note-olive-dot: #7E8D35;
  --chat-help-bg: #F2F0FA; --chat-help-ink: #3E2F70;
  /* Hospitality (ksefapp.hospitality): catering colours on the bookings calendar, and their
     light tints on the staff schedule. */
  --cat-full: #D9534F; --cat-full-ink: #FFFFFF; --cat-partial: #F2C94C; --cat-partial-ink: #3D2E00;
  --cat-self: #2F9E5B; --cat-self-ink: #FFFFFF; --cat-none: #98A2B3; --cat-none-ink: #FFFFFF;
  --cat-full-tint: #FCE4E2; --cat-partial-tint: #FEF4CC; --cat-self-tint: #DDF2E5; --cat-none-tint: #ECEFF3;
  /* Individual stays (rooms, not the whole property) are blue whatever the catering. */
  --cat-rooms: #3A78C2; --cat-rooms-ink: #FFFFFF; --cat-rooms-tint: #E1ECF8;
  --font: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
/* Dark colours: picked in Moje konto / Ustawienia (data-theme="dark" on <html>), or the
   device's dark mode when nothing is picked. Both blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E151C; --surface: #151F28; --ink: #E6EBEF; --ink-2: #B4BFCA; --muted: #8B98A6;
    --line: #26323D; --field: #3A4754; --accent: #5FC4B8; --accent-ink: #8ADBD0;
    --chip: #1E2A35; --chip-ink: #C9D2DB;
    --soon-bg: #3A2C0E; --soon-ink: #F8C97A; --check-bg: #36310C; --check-ink: #FDE272; --late-bg: #3D1A17; --late-ink: #F6A59C;
    --done-bg: #123526; --done-ink: #7FDDA9; --warn: #F0A15A;
    --on-accent: #0B1218; --on-ink: #0B1218; --approve-hover: #A6EBC4;
    --border-strong: #3A4754; --subtle: #18232D; --subtle-2: #1C2833;
    --accent-soft: #14302D; --accent-soft-2: #18403B;
    --soon-line: #6B4E12; --soon-soft: #2A2213; --late-line: #7A2A23;
    --sh-morning: #5A4A1E; --sh-afternoon: #284A2B; --sh-evening: #3F3260; --sh-ink: #E6EAEE; --hol: #2E3944;
    --grid: #24313C; --neutral-bar: #6B7886; --info-bg: #1A2A3D; --info-ink: #9CC3EB;
    --ticker-bg: #0A1016; --shadow: 0, 0, 0;
    --brand-tile: #5FC4B8; --brand-glyph: #0B1218;
  --note-green-bg: #18403B; --note-green-ink: #D6F2EE; --note-green-dot: #5FC4B8; --note-purple-bg: #2E2547; --note-purple-ink: #E3D9FA; --note-purple-dot: #B39DE6;
  --note-blue-bg: #1C3048; --note-blue-ink: #D3E4F6; --note-blue-dot: #79AEE6; --note-pink-bg: #47213A; --note-pink-ink: #F8D6E7; --note-pink-dot: #EE93BE;
  --note-sand-bg: #3D3220; --note-sand-ink: #F3E3C3; --note-sand-dot: #E0B66A; --note-graphite-bg: #2A333D; --note-graphite-ink: #DCE3EA; --note-graphite-dot: #9AAAB9;
  --note-peach-bg: #45291C; --note-peach-ink: #F8DCCB; --note-peach-dot: #F2A77C; --note-olive-bg: #323A1E; --note-olive-ink: #E2EAC6; --note-olive-dot: #B5C46E;
  --chat-help-bg: #2A2546; --chat-help-ink: #E0D9FA;
  --cat-full: #C2463F; --cat-full-ink: #FFFFFF; --cat-partial: #D9AE2E; --cat-partial-ink: #2A1F00;
  --cat-self: #2E8A52; --cat-self-ink: #FFFFFF; --cat-none: #6B7886; --cat-none-ink: #FFFFFF;
  --cat-full-tint: #3E1F1D; --cat-partial-tint: #3A3214; --cat-self-tint: #1A3526; --cat-none-tint: #26303A;
  --cat-rooms: #4C86CC; --cat-rooms-ink: #FFFFFF; --cat-rooms-tint: #1B2C42;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0E151C; --surface: #151F28; --ink: #E6EBEF; --ink-2: #B4BFCA; --muted: #8B98A6;
  --line: #26323D; --field: #3A4754; --accent: #5FC4B8; --accent-ink: #8ADBD0;
  --chip: #1E2A35; --chip-ink: #C9D2DB;
  --soon-bg: #3A2C0E; --soon-ink: #F8C97A; --check-bg: #36310C; --check-ink: #FDE272; --late-bg: #3D1A17; --late-ink: #F6A59C;
  --done-bg: #123526; --done-ink: #7FDDA9; --warn: #F0A15A;
  --on-accent: #0B1218; --on-ink: #0B1218; --approve-hover: #A6EBC4;
  --border-strong: #3A4754; --subtle: #18232D; --subtle-2: #1C2833;
  --accent-soft: #14302D; --accent-soft-2: #18403B;
  --soon-line: #6B4E12; --soon-soft: #2A2213; --late-line: #7A2A23;
  --sh-morning: #5A4A1E; --sh-afternoon: #284A2B; --sh-evening: #3F3260; --sh-ink: #E6EAEE; --hol: #2E3944;
  --grid: #24313C; --neutral-bar: #6B7886; --info-bg: #1A2A3D; --info-ink: #9CC3EB;
  --ticker-bg: #0A1016; --shadow: 0, 0, 0;
  --brand-tile: #5FC4B8; --brand-glyph: #0B1218;
  --note-green-bg: #18403B; --note-green-ink: #D6F2EE; --note-green-dot: #5FC4B8; --note-purple-bg: #2E2547; --note-purple-ink: #E3D9FA; --note-purple-dot: #B39DE6;
  --note-blue-bg: #1C3048; --note-blue-ink: #D3E4F6; --note-blue-dot: #79AEE6; --note-pink-bg: #47213A; --note-pink-ink: #F8D6E7; --note-pink-dot: #EE93BE;
  --note-sand-bg: #3D3220; --note-sand-ink: #F3E3C3; --note-sand-dot: #E0B66A; --note-graphite-bg: #2A333D; --note-graphite-ink: #DCE3EA; --note-graphite-dot: #9AAAB9;
  --note-peach-bg: #45291C; --note-peach-ink: #F8DCCB; --note-peach-dot: #F2A77C; --note-olive-bg: #323A1E; --note-olive-ink: #E2EAC6; --note-olive-dot: #B5C46E;
  --chat-help-bg: #2A2546; --chat-help-ink: #E0D9FA;
  --cat-full: #C2463F; --cat-full-ink: #FFFFFF; --cat-partial: #D9AE2E; --cat-partial-ink: #2A1F00;
  --cat-self: #2E8A52; --cat-self-ink: #FFFFFF; --cat-none: #6B7886; --cat-none-ink: #FFFFFF;
  --cat-full-tint: #3E1F1D; --cat-partial-tint: #3A3214; --cat-self-tint: #1A3526; --cat-none-tint: #26303A;
  --cat-rooms: #4C86CC; --cat-rooms-ink: #FFFFFF; --cat-rooms-tint: #1B2C42;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; }
a { color: var(--accent); } a:hover { color: var(--accent-ink); }
.visually-hidden { position: absolute; left: -9999px; }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.muted { color: var(--muted); font-size: 13px; }
.wrap { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 16px 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; z-index: 2; }
.topbar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.office-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.office-actions form { margin: 0; }
@media (max-width: 600px) { .office-top { flex-wrap: wrap; } .office-actions { width: 100%; } .office-actions > * { flex: 1; } .office-actions .btn { width: 100%; } }
.company-picker { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.company-picker .page-name { font-size: 17px; font-weight: 700; margin: 0; }
.company-picker #company { font-size: 13px; }
.company-picker select { border: none; background: none; font: inherit; font-size: 13px; font-weight: 400; color: var(--muted); padding: 0; max-width: 100%; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex: none; }
.icon-btn:disabled { opacity: .5; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tabs */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 8px; }
.tab { flex: 1 0 auto; text-align: center; text-decoration: none; font-size: 13px; padding: 10px 8px 12px; white-space: nowrap; color: var(--muted); font-weight: 500; border-bottom: 3px solid transparent; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.badge { font-size: 12px; font-weight: 600; background: var(--chip); color: var(--chip-ink); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.tab[aria-current="page"] .badge { background: var(--accent); color: var(--on-accent); }

/* Cards */
.list { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--field); color: inherit; }
.row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.row.center { align-items: center; flex-wrap: wrap; }
.party { font-size: 16px; font-weight: 600; line-height: 1.3; }
.amount { font-size: 17px; font-weight: 700; white-space: nowrap; }
.pill { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 10px; background: var(--chip); color: var(--chip-ink); white-space: nowrap; }
.pill.soon { background: var(--soon-bg); color: var(--soon-ink); }
.pill.late { background: var(--late-bg); color: var(--late-ink); }
.pill.done { background: var(--done-bg); color: var(--done-ink); }
.flags { display: flex; gap: 6px; flex-wrap: wrap; }
.flag { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: var(--chip); color: var(--chip-ink); }
.flag.warn { background: var(--soon-bg); color: var(--soon-ink); }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.flash { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--chip); color: var(--chip-ink); font-size: 14px; }
.flash.error { background: var(--late-bg); color: var(--late-ink); }
.flash.ok { background: var(--done-bg); color: var(--done-ink); }

/* Detail */
.back { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.section-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.big { font-size: 32px; font-weight: 700; letter-spacing: -.5px; }
.amount-party { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.part-paid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.part-paid-note { font-size: 13px; color: var(--soon-ink); }
.part-payments { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.part-row { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.amount-party-name { font-weight: 600; overflow-wrap: anywhere; }
.amount-party-note { color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; }
.divider { height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: 3px; }

/* Forms */
.auth { max-width: 400px; margin: 0 auto; padding: 48px 20px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.logo { width: 36px; height: 36px; border-radius: 9px; background: none; color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; }
label { font-size: 14px; font-weight: 600; }
input[type=email], input[type=password], .auth input[type=text] { width: 100%; height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; background: var(--surface); }
.btn { height: 44px; border-radius: 10px; border: none; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 600; padding: 0 18px; cursor: pointer; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-strong); height: 44px; font-size: 15px; }
/* Delete buttons: one look, red outline (small in list rows). */
.btn.ghost.danger { color: var(--late-ink); border-color: var(--late-line); }
.btn.ghost.danger:hover { background: var(--late-bg); }
/* A button that acts on ticked rows lights up once something is ticked (app.js). */
.btn.ghost.lit { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.btn.ghost.lit.lit-danger { background: var(--late-ink); border-color: var(--late-ink); color: var(--on-accent); box-shadow: 0 0 0 3px var(--late-bg); }
.btn.ghost[data-lights-up] { transition: background .15s, color .15s, box-shadow .15s; }
/* Save buttons (data-save, app.js): one look everywhere. Dim (outlined) while nothing has
   changed, filled and glowing once there is something to save. */
.btn[data-save] { height: 44px; font-size: 15px; font-weight: 600; padding: 0 20px; background: var(--surface); color: var(--accent-ink); border: 1px solid var(--accent); transition: background .15s, color .15s, box-shadow .15s; }
.btn[data-save].lit { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.scan-match-link { flex-direction: row; text-align: left; align-items: center; gap: 14px; justify-content: space-between; }
.scan-match-link .btn { flex: none; height: 40px; font-size: 14px; box-shadow: 0 0 0 3px var(--accent-soft-2); }
@media (max-width: 600px) { .scan-match-link { flex-direction: column; align-items: stretch; } }
/* Links styled as buttons look and line up like real <button>s: centred text, no underline. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; vertical-align: middle; }
a.btn:hover { color: var(--on-accent); }
a.btn.ghost:hover { color: var(--ink-2); }
.error { color: var(--late-ink); font-size: 14px; }
.caps-note { color: var(--warn); font-size: 12px; margin-top: 4px; font-weight: 400; }
.caps-note[hidden] { display: none; }
.foot { padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

@media (min-width: 900px) {
  .list { padding: 24px 16px; }
}
.spin-on { animation: spin 1s linear infinite; }
/* Waiting for the next page (app.js): busy cursor everywhere; a pressed pull button spins. */
html.page-busy, html.page-busy * { cursor: progress !important; }
.is-busy::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn[disabled].is-busy { opacity: .8; cursor: progress; }
.pull-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pull-form .muted { font-size: 13px; }

/* News ticker */
body.has-ticker { padding-bottom: 44px; }
.ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; z-index: 5; display: flex; align-items: center; background: var(--ticker-bg); color: #E4E7EC; font-size: 13px; border-top: 1px solid #22313F; }
.ticker-label { flex: none; height: 100%; display: flex; align-items: center; padding: 0 12px; background: var(--accent); color: var(--on-accent); font-weight: 700; letter-spacing: .3px; }
.ticker-window { flex: 1; overflow: hidden; height: 100%; }
.ticker-track { display: flex; width: max-content; height: 100%; animation: ticker 90s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; margin: 0; padding: 0; list-style: none; height: 100%; }
.ticker-list li { display: flex; align-items: center; height: 100%; }
.ticker-list a { color: #fff; text-decoration: none; padding: 0 22px; white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 100%; border-right: 1px solid #22313F; }
.ticker-list a:hover, .ticker-list a:focus-visible { color: #8FD9CF; text-decoration: underline; outline: none; }
.ticker-date { font-family: var(--mono); font-size: 12px; color: #8FD9CF; }
.ticker-src { color: #98A2B3; font-size: 12px; }
.ticker-pin { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #14202B; background: #F8C97A; border-radius: 4px; padding: 2px 6px; }
.ticker-preview { display: flex; align-items: center; height: 34px; margin: 4px 0 10px; border-radius: 6px; overflow: hidden; background: var(--ticker-bg); color: #fff; font-size: 12px; max-width: 460px; }
.ticker-preview .ticker-label { height: 100%; }
.ticker-preview-item { display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-window { overflow-x: auto; }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* Account pop-up */
.missing-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--soon-line); background: var(--soon-bg); color: var(--soon-ink); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.missing-cta { color: var(--accent-ink); text-decoration: underline; }
.link-btn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; align-self: flex-start; }
.sheet { border: none; padding: 20px 16px 24px; width: 100%; max-width: 480px; max-height: 90vh; border-radius: 16px; box-shadow: 0 20px 50px rgba(var(--shadow), .25); color: var(--ink); font-family: var(--font); }
.sheet::backdrop { background: rgba(var(--shadow), .45); }
/* "Na pewno?" box (app.js window.appConfirm): question, then Anuluj + the action, right-aligned. */
.app-confirm { max-width: 420px; }
.app-confirm-q { margin: 0 0 18px; font-size: 16px; line-height: 1.45; white-space: pre-line; }
.app-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.app-confirm-actions .btn { height: 44px; }
.btn.app-confirm-danger { background: var(--late-ink); color: var(--on-accent); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 18px; }
.sheet-close { width: 44px; height: 44px; border: none; background: var(--chip); border-radius: 22px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
@media (max-width: 600px) {
  .sheet { margin: auto 0 0; max-width: none; border-radius: 16px 16px 0 0; }
}
.account-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.options { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.options legend { padding: 0; margin-bottom: 8px; }
.option { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-weight: 500; cursor: pointer; background: var(--surface); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option.plain { border: none; padding: 4px 0; background: none; }
.option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-note { color: var(--muted); font-size: 12px; font-weight: 400; }
.day-gap { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.best-hint { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--done-ink); background: var(--done-bg); border-radius: 10px; padding: 1px 8px; margin-bottom: 2px; }
.title-hit { color: var(--done-ink); font-weight: 600; }
/* A bank line's amount against the invoice: same, close, other. */
.amount-fit { font-weight: 700; white-space: nowrap; }
.amount-fit.exact { color: var(--done-ink); }
.amount-fit.close { color: var(--warn); }
.amount-fit.off { color: var(--late-ink); }
/* A złoty line for an invoice in another currency: the rate it implies (reconcile.FxLine). */
.fx-note { display: block; font-size: 12px; color: var(--muted); }
.fx-note.far { color: var(--late-ink); }
.match-amount .fx-rate { display: block; font-size: 11px; font-weight: 400; text-align: right; }
.text-input { width: 100%; height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 15px; background: var(--surface); }
.warn-box { background: var(--soon-bg); color: var(--soon-ink); border-radius: 10px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* Paid / unpaid */
.paid-box { background: var(--done-bg); color: var(--done-ink); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.paid-box .muted { color: var(--done-ink); }
.paid-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.paid-form label { font-size: 12px; color: var(--muted); }
.paid-row { display: flex; gap: 8px; flex-wrap: wrap; }
.paid-row input { height: 40px; border: 1px solid var(--field); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); }

/* Order switch and due-date groups */
.order-switch { display: flex; gap: 4px; background: var(--chip); border-radius: 10px; padding: 3px; align-self: flex-start; }
.order-switch a { text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 7px 10px; border-radius: 8px; }
.order-switch a[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.group { display: flex; flex-direction: column; gap: 12px; }
.group + .group { margin-top: 8px; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.group-head.late { color: var(--late-ink); }
.group-total { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Month bar on the invoice list */
.month-bar { display: flex; gap: 2px; overflow-x: auto; background: var(--chip); border-radius: 10px; padding: 3px; scrollbar-width: none; }
.month-bar::-webkit-scrollbar { display: none; }
.month-bar a { flex: 1 0 auto; text-align: center; text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 7px 9px; border-radius: 8px; white-space: nowrap; }
.month-bar a:hover { color: var(--ink); }
.month-bar a[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.month-bar .future { flex: 1 0 auto; text-align: center; color: var(--ink-3, var(--ink-2)); opacity: .45; font-size: 13px; font-weight: 500; padding: 7px 9px; white-space: nowrap; }
/* Year box and month bar on the finance pages */
.period-bar { display: flex; gap: 8px; align-items: center; }
.period-bar .month-bar { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .period-bar { flex-direction: column; align-items: stretch; }
}

/* Filter from an overview bucket */
.active-filter { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
.active-filter b { color: var(--ink); }
.active-filter a { color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.active-filter a:hover { text-decoration: underline; }

/* Downloads */
.list-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-tools .order-switch { align-self: auto; }
.download { position: relative; margin-left: auto; }
.download summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px; padding: 8px 12px; }
.download summary::-webkit-details-marker { display: none; }
.download[open] summary { border-color: var(--accent); color: var(--ink); }
.download-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: auto auto auto auto; gap: 8px 12px; align-items: center; box-shadow: 0 8px 24px rgba(var(--shadow), .12); white-space: nowrap; }
.download-menu .muted { grid-column: 1; }
.download-menu a { font-size: 14px; font-weight: 600; padding: 6px 0; }
.download-menu a.export-icon { padding: 0; }
/* PDF / Excel downloads: a small icon button, the hover text names the file. */
.export-icons { display: inline-flex; gap: 6px; align-items: center; }
.export-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); vertical-align: middle; text-decoration: none; }
.export-icon:hover, .export-icon:focus-visible { border-color: var(--accent); color: var(--ink); }
.export-icon svg { width: 26px; height: 26px; overflow: visible; }
.export-icon .ei-sheet, .export-icon .ei-arrow { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.export-icon .ei-badge { fill: currentColor; }
.export-icon text { fill: var(--surface); font: 700 5.4px/1 system-ui, sans-serif; letter-spacing: .2px; }
.export-icon::after { content: attr(data-tip); display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); z-index: 20; padding: 6px 9px; border-radius: 7px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); pointer-events: none; }
.export-icon:hover::after, .export-icon:focus-visible::after { display: block; }
.invoice-downloads { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invoice-downloads .btn.ghost { display: inline-flex; align-items: center; text-decoration: none; }

/* Approval */
.card-link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; }
.card:has(.card-link:hover) { border-color: var(--field); }
/* A card that opens on click everywhere but its own links and buttons. */
.card-click { position: relative; }
.card-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.card-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-click .card-link { pointer-events: none; }
.card-click .vendor-link, .card-click form, .card-click button, .card-click .card-link a { position: relative; z-index: 1; pointer-events: auto; }
.card:has(.card-cover:hover) { border-color: var(--field); }
/* The other party's name links to its page in Kontrahenci, without looking like a button. */
.vendor-link { color: inherit; text-decoration: none; }
.vendor-link:hover { color: var(--accent); text-decoration: underline; }
.approval-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.note-input { width: 100%; border: 1px solid var(--field); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); resize: vertical; }
input.note-input { height: 40px; }
.approval-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.approval-row .btn { height: 40px; font-size: 14px; }
.btn.approve { background: var(--done-ink); }
.btn.approve:hover { background: var(--approve-hover); }
.btn.reject { background: var(--surface); color: var(--late-ink); border: 1px solid var(--late-line); }
.btn.reject:hover { background: var(--late-bg); }
.waiting { font-size: 13px; font-weight: 600; color: var(--done-ink); }
/* On list cards: buttons and "+ notatka" on one short line, so a list of invoices to
   approve is not three screens long. The note field takes its own line when opened. */
.approval-form.compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 8px; }
.approval-form.compact .approval-row .btn { height: 34px; padding: 0 14px; font-size: 13px; }
.approval-form.compact .note-toggle[open] { flex-basis: 100%; }
.correction-box { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.approval-box { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.approval-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.history-row { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.section-label + .history-row { border-top: none; padding-top: 0; }
.upload-results .history-row:first-child { border-top: none; padding-top: 0; }
.statement-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; }
.statement-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.statement-head + .statement-row, .statement-list > .statement-row:first-of-type { border-top: none; }
.statement-row .history-row { flex: 1; min-width: 0; border-top: none; overflow-wrap: anywhere; }
.statement-row .link-btn { align-self: center; }
.statement-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.statement-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.upload-error { color: var(--late-ink); }

/* Settings */
.settings-form { display: flex; flex-direction: column; gap: 14px; }
.settings-form .option { align-items: flex-start; }
.settings-form .text-input { font-family: var(--font); max-width: 220px; }

/* User row and settings menu */
.user-row { margin-bottom: -4px; }
.topbar-lead { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topbar-lead .back { flex: none; }
.user-name { font-size: 13px; color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-account { gap: 0; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.user-account:hover, .user-account:focus-visible { background: var(--subtle-2); }
.user-account:hover .user-name { text-decoration: underline; }

/* Pay run */
a.missing-btn { text-decoration: none; }
.pay-form { display: flex; flex-direction: column; gap: 12px; }
.pay-section { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pay-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.select-all { font-size: 13px; }
.pay-item { gap: 8px; }
.pay-item.blocked { background: var(--subtle); }
.pay-item.blocked .party, .pay-item.blocked .amount { color: var(--ink-2); }
.pay-item:has(.pay-pick input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-pick { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.pay-pick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.pay-pick input:disabled { cursor: not-allowed; }
a.pay-pick { color: inherit; text-decoration: none; }
a.pay-pick input:disabled { cursor: pointer; }
a.pay-pick:hover .party { text-decoration: underline; }
.pay-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.pay-account { color: var(--ink-2); font-size: 12px; }
.override { border-top: 1px solid var(--line); padding-top: 8px; }
.pay-bar { position: sticky; bottom: 44px; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -4px 20px rgba(var(--shadow), .08); }
.pay-bar-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pay-date input { height: 40px; border: 1px solid var(--field); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); }
.pay-bar .btn:disabled { opacity: .5; cursor: not-allowed; }
.download-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--on-accent); }
.download-btn:hover { color: var(--on-accent); background: var(--accent-ink); }
.cancel-run { padding: 4px 0 8px; }
.topay-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.topay-actions .btn { display: inline-flex; align-items: center; text-decoration: none; height: 40px; font-size: 14px; color: var(--on-accent); }
.topay-actions .btn.ghost { color: var(--ink-2); }
.sent-box { background: var(--chip); color: var(--chip-ink); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.settings-form .text-input.mono-input { font-family: var(--mono); max-width: 100%; }

/* Bank statement reconciliation */
.wrap.wide { max-width: 1040px; }
.upload-form { display: flex; flex-direction: column; gap: 10px; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 20px 16px; min-height: 120px; box-sizing: border-box; border: 1.5px dashed var(--field); border-radius: 12px; background: var(--subtle); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.drop svg { color: var(--accent); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop.chosen { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.drop-text { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; font-weight: 400; }
.drop-text b { color: var(--accent); }
.drop-formats { font-size: 12px; font-weight: 400; }
.bank-unsupported { padding: 8px 10px; border-radius: 8px; background: var(--late-bg); color: var(--late-ink); font-size: 13px; }
.bank-support-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.bank-support-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pill.bank-tag.both { background: var(--done-bg); color: var(--done-ink); }
.pill.bank-tag.link { background: var(--check-bg); color: var(--check-ink); }
/* Wyciąg: where statements are added (the bank accounts page). Big with nothing read yet. */
.add-statements { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); border: 1.5px dashed var(--accent); background: var(--accent-soft); }
.add-statements svg { color: var(--accent); flex: none; }
.add-statements b { color: var(--accent); font-size: 15px; }
.add-statements:hover b { text-decoration: underline; }
.add-statements-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.add-statements-line .muted { margin-right: auto; font-size: 13px; }
.add-statements-line .rematch-form { margin: 0; }
.add-statements-line .last-pull { margin-right: 0; }
#statements { scroll-margin-top: 72px; }
.format-switch { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--late-ink); background: var(--late-bg); color: var(--late-ink); font-size: 14px; }
.format-switch .btn { justify-self: start; }
.drop-text b { font-weight: 700; }
.drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-actions { display: flex; justify-content: flex-end; }
.upload-actions .btn { height: 44px; font-size: 14px; }
.upload-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .upload-actions .btn { width: 100%; } }
.upload-progress { margin-top: 12px; display: grid; gap: 6px; font-size: 13px; }
.upload-bar { height: 6px; border-radius: 3px; background: var(--line, #e5e5e5); overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--accent, #2f6f4f); transition: width .3s; }
/* "Skanuj fakturę": camera capture with crop and rotate */
.scan { display: flex; flex-direction: column; gap: 8px; }
.scan-btn { height: 48px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; padding: 0 20px; }
.scan-sub { font-size: 13px; }
.scan-panel { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.scan-panel[hidden], .scan-sel[hidden] { display: none; }
.scan-stage { position: relative; display: flex; justify-content: center; background: var(--subtle-2); border-radius: 12px; padding: 8px; }
.scan-stage canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; touch-action: none; cursor: crosshair; border-radius: 4px; box-shadow: 0 1px 4px rgba(var(--shadow), .15); }
.scan-sel { position: absolute; border: 2px solid var(--accent); background: rgba(0, 137, 123, .12); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .4); pointer-events: none; border-radius: 2px; }
.scan-stage { overflow: hidden; }
.scan-hint { font-size: 12px; }
.scan-tools, .scan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-tools .btn, .scan-actions .btn { height: 40px; font-size: 14px; }
.scan-tools .btn:disabled, .scan-actions .btn:disabled { opacity: .45; }
.scan-actions #scan-send { margin-left: auto; }
.btn.danger { color: var(--late-ink); }
.scan-pages { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.scan-thumb { position: relative; flex: none; padding: 3px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; line-height: 0; }
.scan-thumb.on { border-color: var(--accent); }
.scan-thumb canvas { display: block; max-height: 72px; }
.scan-thumb span { position: absolute; right: 4px; bottom: 4px; line-height: 1; font-size: 11px; font-weight: 700; background: var(--ink); color: var(--on-ink); border-radius: 6px; padding: 2px 5px; }
.scan-status:empty { display: none; }
.upload-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 6px 0 2px; }
.upload-or::before, .upload-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .scan-btn { align-self: stretch; }
  .scan-tools .btn { flex: 1 1 40%; }
  .scan-actions #scan-send { flex: 1 1 100%; order: -1; margin-left: 0; height: 48px; }
  .scan-actions .btn.ghost { flex: 1; }
}
.col-empty { color: var(--muted); font-size: 14px; padding: 16px; border: 1px dashed var(--field); border-radius: 14px; text-align: center; }
.amount.in, .tx-amt.in { color: var(--done-ink); }
.tx-title { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
/* When the status and amount do not fit beside the name (phones), they move under it
   instead of squeezing the name into a narrow column. */
.match-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 10px; text-decoration: none; color: inherit; border-top: 1px solid var(--line); padding-top: 8px; }
.match-line:hover { color: inherit; }
.match-line:hover .match-number { color: var(--accent); text-decoration: underline; }
.match-line.card-click:hover .match-number { color: inherit; text-decoration: none; }
.match-line:has(.card-cover:hover) .match-number { color: var(--accent); text-decoration: underline; }
.match-number { font-weight: 600; font-size: 14px; }
.match-amount { font-weight: 600; font-size: 14px; white-space: nowrap; }
/* A party's recent statement lines: status beside the amount, the line opens its page. */
.line-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 10px; flex-shrink: 0; margin-left: auto; }
a.match-line:hover .line-title { color: var(--accent); text-decoration: underline; }
.option-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.option-block .match-line:first-child { border-top: none; padding-top: 0; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.action-row .btn { height: 38px; font-size: 14px; }
.manual-form { display: flex; flex-direction: column; gap: 8px; }
.manual-form .option { padding: 10px; }
.manual-form .btn { align-self: flex-start; }
.partner-line { cursor: default; }
.transfer-fold > summary { list-style: none; display: inline-block; }
.transfer-fold > summary::-webkit-details-marker { display: none; }
.transfer-form { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.find-transfers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.find-transfers .btn { height: 36px; font-size: 14px; }
/* One search box over the bank lines: amount, name and title words together. */
.bank-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bank-search-box { position: relative; flex: 1 1 240px; min-width: 0; }
.bank-search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.bank-search-box .text-input { padding-left: 38px; font-family: inherit; font-size: 16px; }
.bank-search .btn { height: 48px; }
.bank-search-note { margin-top: -4px; }
/* Bank lines like a spreadsheet: sortable column heads. */
.pick-found { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 2px 4px; cursor: pointer; }
.pick-found input { width: 18px; height: 18px; margin: 0; }
.sort-head { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sort-head:hover { color: var(--ink); }
.sort-head.on { color: var(--accent-ink); }
.sort-arrow { font-size: 12px; opacity: .45; }
.sort-head.on .sort-arrow { opacity: 1; }
.tx-year { display: block; font-size: 11px; color: var(--muted); }
.flat-list > .month-head { cursor: default; border-bottom: 1px solid var(--line); }
/* Invoice cards that can be ticked for a category at once. */
.card-click.pickable { padding-left: 46px; }
.card-pick { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; z-index: 1; cursor: pointer; }
.card-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.card-click:has(.card-pick input:checked) { background: var(--accent-soft); border-color: var(--accent); }

/* Status colours: green matched, yellow to confirm, red unmatched, grey hidden */
.s-matched { --s-bg: var(--done-bg); --s-ink: var(--done-ink); --s-bar: #12B76A; }
.s-suggested { --s-bg: var(--soon-bg); --s-ink: var(--soon-ink); --s-bar: #F79009; }
.s-check { --s-bg: var(--check-bg); --s-ink: var(--check-ink); --s-bar: #EAAA08; }
.pill.check { background: var(--check-bg); color: var(--check-ink); }
.check-note { background: var(--check-bg); color: var(--check-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.split-sum { font-size: 14px; font-weight: 600; }
.split-sum.off { color: var(--soon-ink); }
.split-sum.ok { color: var(--done-ink); }
.remember { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--muted); }
.rule-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rule-row:first-of-type { border-top: none; }
.s-unmatched { --s-bg: var(--late-bg); --s-ink: var(--late-ink); --s-bar: #F04438; }
.s-dismissed { --s-bg: var(--chip); --s-ink: var(--muted); --s-bar: var(--field); }
.s-transfer { --s-bg: var(--info-bg); --s-ink: var(--info-ink); --s-bar: #4F86C6; }
/* Unmatched, but like a second payment of an invoice already paid: purple. */
.tx-row.double { --s-bg: var(--note-purple-bg); --s-ink: var(--note-purple-ink); --s-bar: var(--note-purple-dot); }
.double-note { background: var(--note-purple-bg); color: var(--note-purple-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.double-note a { color: inherit; }
.double-note form { display: inline; margin-left: 4px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: var(--s-bar); flex: none; }

.recon { display: flex; flex-direction: column; gap: 10px; }
.recon-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.recon-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.recon-legend .dot { margin-left: 6px; }
.recon-legend .dot:first-child { margin-left: 0; }
.recon-tools .order-switch label, .order-switch.radios label { display: flex; cursor: pointer; font-weight: 500; }
.recon-tools .order-switch input, .order-switch.radios input { position: absolute; opacity: 0; pointer-events: none; }
.recon-tools .order-switch span, .order-switch.radios span { font-size: 13px; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; }
.recon-tools .order-switch input:checked + span, .order-switch.radios input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.recon-tools .order-switch input:focus-visible + span, .order-switch.radios input:focus-visible + span { outline: 2px solid var(--accent); }
/* "Format pliku" right before a bank file is made or downloaded (partials/bank_format_pick.html). */
.bank-format-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bank-format-pick .order-switch { flex-wrap: wrap; }

/* Month */
.month { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.month.done { border-left: 5px solid #12B76A; }
.month.open { border-left: 5px solid #F04438; }
.month-head { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot name counts" ". money money"; gap: 4px 10px; align-items: center; padding: 14px 16px; }
.month-head::-webkit-details-marker { display: none; }
.month-head .dot { grid-area: dot; }
.month-name { grid-area: name; font-weight: 700; font-size: 16px; }
.month-counts { grid-area: counts; display: flex; gap: 4px; }
.month-money { grid-area: money; font-size: 12px; }
.month[open] > .month-head { border-bottom: 1px solid var(--line); }
/* Older months on the bank screen: one line each, opening that month alone. */
.month.brief a.month-head { color: inherit; text-decoration: none; }
.month.brief .month-name::after { content: " ›"; color: var(--ink-2); }
.month.brief a.month-head:hover .month-name { text-decoration: underline; }
.months-more { font-size: 13px; padding: 2px 4px; }
.cnt { font-size: 12px; font-weight: 700; min-width: 26px; text-align: center; border-radius: 10px; padding: 2px 7px; background: var(--s-bg); color: var(--s-ink); }

/* Transaction rows */
.tx-table { display: flex; flex-direction: column; }
.tx-thead { display: flex; padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.tx-thead > span { display: none; }
.tx-thead.no-tick { display: none; }
.tx-row { border-bottom: 1px solid var(--line); }
.tx-row:last-of-type { border-bottom: none; }
.tx-sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px 42px minmax(0, 1fr) auto; grid-template-areas: "pick date who amt" "pick date cat chip"; gap: 2px 8px; align-items: center; padding: 10px 16px 10px 8px; border-left: 4px solid var(--s-bar); }
.tx-pick { grid-area: pick; display: flex; align-items: center; justify-content: center; align-self: stretch; cursor: pointer; }
.tx-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.tx-cat { grid-area: cat; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: 12px; color: var(--ink-2); background: none; border: 0; padding: 2px 0; text-align: left; display: inline-flex; align-items: center; gap: 5px; }
button.tx-cat { cursor: pointer; border-bottom: 1px dashed var(--field); border-radius: 0; }
button.tx-cat:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tx-cat.unset { color: var(--soon-ink); font-weight: 600; }
.tx-cat.suggested { color: var(--muted); }
.tx-row:has(.tx-pick input:checked) > .tx-sum { background: var(--accent-soft); }
/* Ticked lines: the actions stay at the bottom of the screen. */
.tx-bulk { position: sticky; top: auto; bottom: 10px; z-index: 5; box-shadow: 0 6px 24px rgba(var(--shadow), .18); border: 1px solid var(--field); }
.tx-bulk[hidden] { display: none; }
body.has-ticker .tx-bulk { bottom: 50px; }
.tx-bulk-count { font-size: 14px; white-space: nowrap; }
.tx-bulk .cat-pick-panel { top: auto; bottom: calc(100% + 4px); }
/* "Akceptuj zaznaczone": the same bar, held at the top of the list instead. */
.tx-bulk.bulk-top, body.has-ticker .tx-bulk.bulk-top { top: 10px; bottom: auto; }
.tx-bulk.bulk-top .cat-pick-panel { top: calc(100% + 4px); bottom: auto; }
.tx-thead .tx-pick { grid-area: auto; justify-content: flex-start; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.tx-sum::-webkit-details-marker { display: none; }
.tx-sum:hover, .tx-row[open] > .tx-sum { background: var(--subtle); }
.tx-date { grid-area: date; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.tx-who { grid-area: who; display: flex; flex-direction: column; min-width: 0; }
.tx-name, .tx-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-name { font-size: 14px; font-weight: 600; }
.tx-sub { font-size: 12px; color: var(--muted); }
.tx-amt { grid-area: amt; font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.tx-chip { grid-area: chip; justify-self: end; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 8px; background: var(--s-bg); color: var(--s-ink); white-space: nowrap; }
.tx-box { margin: 4px 12px 12px; border-left: 4px solid var(--s-bar); }

/* "Do zrobienia": only lines that still need a decision */

@media (min-width: 760px) {
  .month-head { grid-template-columns: auto auto 1fr auto; grid-template-areas: "dot name money counts"; }
  .month-money { justify-self: end; }
  .tx-thead { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr) 130px 130px 170px; gap: 12px; padding: 8px 16px 8px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
  .tx-thead > span { display: block; }
  .tx-thead.no-tick { display: grid; }
  .tx-thead .tx-all-label { display: none; }
  .tx-thead .r { text-align: right; }
  .tx-sum { grid-template-columns: 26px 56px minmax(0, 1fr) 130px 130px 170px; grid-template-areas: "pick date who amt chip cat"; gap: 12px; }
  .tx-cat { font-size: 13px; }
  .tx-who { flex-direction: row; gap: 10px; align-items: baseline; }
  .tx-name { flex: none; max-width: 45%; }
  .tx-name:only-child { max-width: 100%; }
  .tx-chip { justify-self: start; }
}
.bank-payment { display: flex; flex-direction: column; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.bank-payment .pill, .bank-payment .action-row { align-self: flex-start; margin-top: 4px; }
#bank .bank-payment + .bank-payment { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
#bank-nearby .bank-payment { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.nearby-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 2px; }
.nearby-status .pill, .nearby-status .flag { margin-top: 0; }
.nearby-status .nearby-act { margin-left: auto; font-size: 13px; }
.nearby-status .nearby-act .link-btn { font-size: 13px; }
.nearby-box { border-top: 1px solid var(--line); padding-top: 8px; }
.nearby-box > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
/* The five best matches show, the rest fold away (partials/top_five.html). */
.more-fold > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 0; }
.more-fold-body { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }

/* Office dashboard */
.dash-summary { font-size: 13px; color: var(--ink-2); }
.dash-summary b { color: var(--ink); }
.late-ink { color: var(--late-ink) !important; }
.dash { display: flex; flex-direction: column; gap: 10px; }
.dash-head { display: none; }
.dash-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; border-left: 5px solid #12B76A; }
.dash-row.attention { border-left-color: #F79009; }
.dash-row:has(.pill.late) { border-left-color: #F04438; }
.dash-name { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.dash-name:hover .party { color: var(--accent); text-decoration: underline; }
.dash-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; color: inherit; font-size: 14px; }
.dash-cell::before { content: attr(data-label); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
a.dash-cell:hover .dash-num, a.dash-cell:hover .zero { text-decoration: underline; }
.dash-num { font-weight: 700; }
.dash-sub { font-size: 12px; color: var(--ink-2); }
.zero { color: var(--muted); }
.dash-sync { font-size: 13px; color: var(--ink-2); }
.dash-sync.stale { color: var(--soon-ink); font-weight: 600; }
@media (min-width: 900px) {
  .dash { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .dash-head, .dash-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1.2fr 1.3fr 1.3fr 1.4fr; gap: 12px; align-items: center; }
  .dash-head { padding: 10px 16px 10px 21px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; background: var(--subtle); border-bottom: 1px solid var(--line); }
  .dash-row { border: none; border-radius: 0; border-bottom: 1px solid var(--line); border-left: 5px solid #12B76A; }
  .dash-row:last-child { border-bottom: none; }
  .dash-row:hover { background: var(--subtle); }
  .dash-name { grid-column: auto; }
  .dash-cell::before { display: none; }
  .dash .empty { padding: 32px; }
}

/* Finance view */
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fin-kpi { display: flex; flex-direction: column; gap: 4px; }
.fin-big { font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.fin-small { font-size: 13px; font-weight: 400; }
.fin-good { color: var(--done-ink); font-weight: 600; }
.fin-bad { color: var(--late-ink); }
.fin-small .fin-bad, .fin-table .fin-bad { font-weight: 600; }
/* Płynność: the accounts behind the total, folded away; name, balance, day per row. */
.liq-banks > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--muted); min-height: 28px; }
.liq-banks > summary::-webkit-details-marker { display: none; }
.liq-banks > summary .settings-chev { width: 16px; height: 16px; }
.liq-banks[open] > summary .settings-chev { transform: rotate(180deg); }
.liq-rows { display: grid; grid-template-columns: minmax(0, max-content) auto auto; justify-content: start; gap: 4px 10px; align-items: baseline; margin-top: 4px; }
/* Balance check (ksefapp.balance_check): an account that does not add up is tinted red. */
.bc-card .fin-chart-head { flex-wrap: wrap; gap: 8px; }
.bc-spans { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bc-span { padding: 4px 10px; }
.bc-table tr.bc-off td, .bc-points tr.bc-off td { background: var(--late-bg); }
.bc-table tr.picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.bc-table td.bc-left { text-align: left; white-space: normal; }
.bc-table td .fin-small { margin-top: 2px; }
.bc-diff { color: var(--late-ink); font-weight: 600; }
.bc-h3 { font-size: 14px; margin: 16px 0 6px; }
.bc-causes { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.bc-causes > li > ul { margin: 4px 0; padding-left: 18px; }
.bc-points { margin-top: 14px; }
.bc-points summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.bc-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#konto, #saldo { scroll-margin-top: 72px; }
.bc-row[data-href] { cursor: pointer; }
.bc-row[data-href]:hover td { background: var(--subtle-2); }
.bc-row.bc-off[data-href]:hover td { background: var(--late-line); }
.br-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 12px; }
.br-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 4px; }
.br-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-row > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.br-total { border-top: 1px solid var(--line); font-weight: 600; }
.br-row-wrap > summary { cursor: pointer; list-style: none; }
.br-row-wrap > summary::-webkit-details-marker { display: none; }
.br-row-wrap > summary:hover { background: var(--subtle-2); }
.br-row-wrap[data-empty] > summary { cursor: default; }
.br-row-wrap[open] { padding-bottom: 8px; }
.br-hint { padding: 0 4px; }
.br-part { display: flex; justify-content: space-between; gap: 12px; max-width: 520px; padding: 0 4px; color: var(--ink-2); }
.br-part b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-st { font-size: 11px; margin-top: 2px; }
.br-st.pair, .br-st.matched { background: var(--done-bg); color: var(--done-ink); }
.br-st.unpaired, .br-st.unmatched { background: var(--late-bg); color: var(--late-ink); }
.fin-table.br-items td.br-text { text-align: left; white-space: normal; min-width: 200px; max-width: 460px; }
.fin-table.br-items th:first-child { text-align: left; }
.bc-tip { background: var(--info-bg); color: var(--info-ink); padding: 10px 12px; border-radius: 8px; }
.fin-table.bc-lines td.bc-text { text-align: left; white-space: normal; min-width: 220px; max-width: 420px; }
.fin-table.bc-lines th:nth-child(2) { text-align: left; }
.fin-table.bc-lines tr.bc-dayend td:first-child { text-align: left; }
.bc-lines tr.bc-dayend td { font-size: 13px; color: var(--ink-2); background: var(--subtle); }
.bc-lines tr.bc-dayend.bc-off td { background: var(--late-bg); color: var(--late-ink); font-weight: 600; }
.bc-lines tr.bc-dup td { background: var(--soon-soft); }
/* Phones: the account, the bank's balance and the difference fit without scrolling. */
@media (max-width: 640px) {
  .fin-table.bc-table { min-width: 0; font-size: 13px; }
  .fin-table.bc-table th, .fin-table.bc-table td { padding: 8px 4px; white-space: normal; }
  .fin-table.bc-table th:nth-child(-n+4):not(:first-child),
  .fin-table.bc-table td:nth-child(-n+4):not(:first-child):not(.bc-left) { display: none; }
}
.liq-name { min-width: 0; overflow-wrap: anywhere; }
.liq-amt { text-align: right; padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liq-day { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Five cards in one row on a wide screen; there the account list drops down over the
   page, on narrow screens it opens inside the card, which then takes the full width. */
.fin-liq { position: relative; }
@media (min-width: 1280px) {
  .fin-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fin-kpis .fin-big { font-size: 22px; }
  .liq-banks[open] > .liq-rows { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); width: max-content; max-width: 460px; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
}
@media (max-width: 1279px) { .fin-kpi:has(.liq-banks[open]) { grid-column: 1 / -1; } }
.fin-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-chart-head h2, .fin-h2 { margin: 0; font-size: 16px; font-weight: 700; }
.fin-legend { display: flex; gap: 16px; font-size: 13px; color: var(--chip-ink); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.in, .fin-bar.in { background: #00897B; }
.sw.out, .fin-bar.out { background: #C8701A; }
.fin-chart-card { gap: 14px; }
.fin-chart-scroll, .fin-table-scroll { overflow-x: auto; }
.fin-chart { min-width: 640px; display: flex; padding-top: 8px; }
.fin-axis { width: 60px; height: 220px; position: relative; flex-shrink: 0; font-size: 11px; color: var(--muted); }
.fin-axis span { position: absolute; right: 8px; transform: translateY(-50%); white-space: nowrap; }
.fin-plot { flex: 1; display: flex; flex-direction: column; }
.fin-bars { height: 220px; display: flex; align-items: flex-end; gap: 0; position: relative; border-bottom: 1px solid var(--neutral-bar); background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 55px; }
.fin-month { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 4px; position: relative; }
/* The euro rate over the bars, on its own scale at the right. */
.fin-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.fin-fx polyline { fill: none; stroke: #3949AB; stroke-width: 2; stroke-linejoin: round; }
.fin-fx-dot { position: absolute; left: 50%; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: #3949AB; border: 2px solid var(--card, #fff); z-index: 2; }
.sw.fx { height: 3px; border-radius: 2px; background: #3949AB; }
.fin-fx-axis { width: 44px; }
.fin-fx-axis span { right: auto; left: 8px; color: #3949AB; }
.fin-month.current .fin-bar { opacity: .55; }
.fin-bar { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 1px; position: relative; }
.fin-bar.neg { border-radius: 0 0 4px 4px; }
.sw.balance, .fin-bar.balance { background: #5C6670; }
.fin-bar.balance.neg { background: #B5473F; }
.fin-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ink-2); opacity: .5; pointer-events: none; }
.fin-bar:hover { filter: brightness(.88); }
.fin-labels { display: flex; gap: 0; padding-top: 6px; }
.fin-labels span { flex: 1; padding: 0 4px; text-align: center; font-size: 11px; color: var(--ink-2); }
.fin-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.fin-table th { text-align: right; font-weight: 600; color: var(--ink-2); padding: 8px 10px; font-size: 13px; }
.fin-table td { text-align: right; padding: 8px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.fin-table th:first-child, .fin-table td:first-child { text-align: left; }
.fin-note { font-size: 12px; color: var(--muted); }
.fin-taxes { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .fin-taxes { grid-template-columns: 1fr 1fr; } }
.fin-tax { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.fin-tax.running { border-style: dashed; }
.fin-tax .fin-big { font-size: 22px; }
.fin-tax-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chip-ink); font-weight: 600; }
.fin-dot { width: 10px; height: 10px; border-radius: 3px; background: #C8701A; }
.fin-tax.cit .fin-dot { background: #7A5CB8; }
.fin-notes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
/* Finance views: Year / Do zeszłego roku / 5 lat / Wszystkie lata, graphs or amounts. */
.fin-tools { gap: 8px; }
.fin-switches { display: flex; gap: 8px 12px; flex-wrap: wrap; max-width: 100%; align-items: flex-end; }
.fin-pick-form { display: flex; flex-direction: column; gap: 3px; }
.fin-pick-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-pick-form select { min-height: 36px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.fin-chart-tools { display: flex; gap: 12px; align-items: flex-end; }
.fin-switches .order-switch { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.fin-switches .order-switch a { white-space: nowrap; }
.fin-charts { display: flex; flex-direction: column; gap: 12px; }
a.fin-bar { display: block; }
.fin-bar.ly, .sw.ly { opacity: .4; }
.fin-bar.running { opacity: .55; }
.fin-month.n4 { gap: 1px; }
.fin-month.n4 .fin-bar { width: 22%; }
.fin-month.picked { background: var(--chip); border-radius: 6px 6px 0 0; }
.fin-labels span.picked { color: var(--ink); font-weight: 700; }
.fin-labels a, a.fin-pick { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.fin-labels a:hover, a.fin-pick:hover { color: var(--ink); text-decoration-style: solid; }
.fin-yoy-cell { display: block; font-size: 11px; font-weight: 400; white-space: nowrap; }
.fin-yoy-cell .sw { width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.fin-chart:not(.few) .fin-yoy-cell { font-size: 10px; }
.fin-yoy { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.fin-chart.few { min-width: 0; }
.fin-under { margin-top: -4px; }
.fin-values td { vertical-align: top; }
.fin-amt { font-weight: 600; }
a.fin-amt, .fin-amt-sub a { color: var(--accent); text-decoration: none; }
a.fin-amt:hover, .fin-amt-sub a:hover { text-decoration: underline; }
.fin-amt-sub { display: block; font-size: 12px; font-weight: 400; }
.fin-values td.before, .fin-values td.before .fin-amt { color: var(--muted); font-weight: 400; }
.fin-values td.before a.fin-amt, .fin-values td.before .fin-amt-sub a { color: var(--muted); text-decoration: underline dotted; }
.fin-values tr.picked td, .fin-values tr.picked td:first-child { background: var(--chip); }
.fin-values tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
.fin-values tr.future td:first-child { color: var(--muted); }
.fin-bar.future { visibility: hidden; }
.fin-values th:first-child, .fin-values td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
@media (max-width: 640px) {
  .fin-switches .order-switch { flex-wrap: wrap; }
  .fin-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fin-kpi .fin-big { font-size: 20px; }
  /* Two by two, Płynność last across the full width. */
  .fin-kpis .fin-liq { order: 1; grid-column: 1 / -1; }
}

/* Invoices by email (M7) */
.address-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.address { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; min-width: 0; flex: 1 1 220px; }
.copy-btn { flex: none; }
.address-change summary { list-style: none; }
.address-change summary::-webkit-details-marker { display: none; }
.address-change[open] summary { margin-bottom: 8px; }
/* Online shops on "Faktury spoza KSeF" and the purchases page (shops.py). */
.shops-card > summary.shops-summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shops-card > summary.shops-summary::-webkit-details-marker { display: none; }
.shops-card[open] > summary .link-btn { display: none; }
.shops-card { display: grid; gap: 6px; }
.option-link { font-size: 12px; font-weight: 500; margin-left: 6px; white-space: nowrap; }
.shop-paid-flag { align-self: flex-start; font-size: 11px; margin: 2px 0; }
.shop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.shop-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-upload input[type="file"] { max-width: 220px; font-size: 13px; }
.shop-help summary { list-style: none; }
.shop-help summary::-webkit-details-marker { display: none; }
.shop-help ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.shop-years { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-years .pill { text-decoration: none; }
.shop-line { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.shop-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; padding: 8px 0 2px; }
.shop-part { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.shop-part .shop-line { border-top: none; padding: 2px 0 2px 10px; }
.shop-invoice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; padding-top: 4px; }
.shop-items { font-size: 13px; overflow-wrap: anywhere; }
/* Invoice list: the first line items under the invoice number, at most two rows. */
.inv-items { font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.shop-panel { display: grid; gap: 4px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--line); }
.shop-match { padding-top: 8px; }
/* Purchases page: each seller's Allegro lines, its invoice, and the bank line, each
   in its own labelled box; "cols" puts the three side by side (wide screens only). */
.shop-pick { padding-top: 6px; }
.shop-choose { padding-top: 6px; }
.shop-choose summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.shop-options { gap: 6px; padding-top: 8px; }
.shop-options .option { padding: 10px; }
.shop-options .btn { align-self: flex-start; }
.shop-opt-line { overflow-wrap: anywhere; }
.shop-found { color: var(--done-ink); font-weight: 600; }
.shop-pick select { width: 100%; max-width: 100%; }
.shop-cmp { display: grid; gap: 8px; padding-top: 8px; }
.shop-box { border: 1px solid var(--line); border-left: 4px solid var(--kind, var(--line)); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; align-content: start; min-width: 0; background: var(--surface); }
.shop-box .shop-line { border-top: 1px dashed var(--line); }
.shop-box .shop-invoice:empty { display: none; }
.box-allegro { --kind: var(--k-buy-dot); --kind-bg: var(--k-buy-bg); --kind-ink: var(--k-buy-ink); }
.box-invoice { --kind: var(--k-inv-dot); --kind-bg: var(--k-inv-bg); --kind-ink: var(--k-inv-ink); }
.box-bank { --kind: var(--k-bank-dot); --kind-bg: var(--k-bank-bg); --kind-ink: var(--k-bank-ink); }
.shop-kind { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; margin-bottom: 4px; }
.kind-allegro { background: var(--k-buy-bg); color: var(--k-buy-ink); }
.kind-invoice { background: var(--k-inv-bg); color: var(--k-inv-ink); }
.kind-bank { background: var(--k-bank-bg); color: var(--k-bank-ink); }
.shop-line.same .shop-title { font-weight: 500; }
.shop-same { color: var(--done-ink); font-weight: 700; }
.shop-heads { display: none; }
.shop-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 8px 0 0; }
.shop-sum > div { display: flex; flex-direction: column; padding: 4px 10px; border-radius: 8px; min-width: 110px; }
.shop-sum dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.shop-sum dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-sum dd .muted { font-weight: 400; font-size: 12px; }
.shop-sum .shop-sum-off { justify-content: center; font-size: 13px; font-weight: 600; }
.shop-sum-off { background: var(--late-bg); color: var(--late-ink); }
.day-gap.gap-near { color: var(--done-ink); font-weight: 600; }
.day-gap.gap-far { color: var(--late-ink); font-weight: 600; }
.shop-unlink { padding-top: 4px; }
.shop-sum dd.shop-var { font-size: 12px; font-weight: 500; opacity: .85; }
.shop-sum dd.var-ok { color: var(--done-ink); opacity: 1; font-weight: 600; }
.shop-sum dd.var-off { color: var(--late-ink); opacity: 1; font-weight: 600; }
.shop-variance-total { padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.shop-private { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* An invoice paired with an Allegro purchase (ksefapp.shop_match): an orange "A". */
.allegro-a { display: inline-block; width: 20px; height: 20px; border-radius: 6px; background: #FF5A00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg transform='translate(5 3.9) scale(0.42)' fill='none' stroke='%23fff' stroke-width='5.2'%3E%3Cpath d='M5.4 7.2C7.2 4.7 9.6 3.6 12.8 3.6C18.4 3.6 21.1 6.2 21.1 11V28.6'/%3E%3Cpath d='M21.1 13.6H9C4.9 13.6 2.6 16 2.6 19.8C2.6 23.8 4.9 26 8.9 26H21.1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; color: transparent; font-size: 0; line-height: 0; overflow: hidden; text-decoration: none; flex: none; vertical-align: middle; }
.shop-on-invoice { gap: 4px; border-left: 4px solid #FF5A00; }
.shop-flag { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding-left: 3px; }
.shop-flag .allegro-a { width: 16px; height: 16px; border-radius: 4px; }
.shop-on-head { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Badges in the top right corner of an invoice card and of the invoice page
   (partials/corner_badges.html): the Allegro "a" and the grey "Spoza KSeF". */
.corner-badges { position: absolute; top: -7px; right: -7px; z-index: 2; display: inline-flex; gap: 4px; align-items: center; }
.corner-badges > * { box-shadow: 0 0 0 2px var(--surface); }
.not-ksef-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--ink-2); color: var(--surface); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .01em; }
.card.has-corner { position: relative; }
/* The invoice page's bar for looking at the invoice and changing it: stays at the top. */
.inv-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; background: var(--ground); }
.inv-tools .btn { height: 40px; font-size: 14px; padding: 0 14px; }
.inv-tools .btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.inv-preview { gap: 8px; }
.inv-preview[hidden] { display: none; }
.inv-page { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
#pozycje, #allegro-purchase { scroll-margin-top: 64px; }
.shop-unlink .btn { font-size: 13px; }
@media (min-width: 900px) {
  .shop-heads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; }
  .shop-heads.no-bank, .shop-cmp.cols.no-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-cmp.cols { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 4px; }
  .shop-cmp.cols .box-allegro { grid-column: 1; grid-row: var(--row); }
  .shop-cmp.cols .box-invoice { grid-column: 2; grid-row: var(--row); }
  .shop-cmp.cols .box-bank { grid-column: 3; grid-row: 1 / span var(--rows); }
  .shop-cmp.cols .shop-box > .shop-kind { display: none; }
}

.inbox-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--soon-bg); color: var(--soon-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.inbox-notice:hover { color: var(--soon-ink); filter: brightness(.97); }
.warn-box { background: var(--soon-bg); color: var(--soon-ink); display: flex; flex-direction: column; gap: 4px; margin: 0; }
.review-form .text-input { max-width: none; }
.review-form .text-input[readonly] { background: var(--subtle-2); color: var(--ink-2); }
/* Boxes the invoice can't be saved without: light red while empty, normal once filled. */
.review-form .text-input[required]:invalid { background: var(--late-bg); border-color: var(--late-line); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-pair > .stack { min-width: 0; }
.review-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.doc-open { display: inline-flex; align-items: center; text-decoration: none; }
/* Review screen: the original file next to the form (side by side on a wide screen,
   above the form on a phone, with a full-screen mode for zooming in). */
.wrap.review-wrap { max-width: 1360px; }
.review-layout { display: flex; flex-direction: column; flex: 1; }
.doc-viewer { margin: 16px 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle-2); display: flex; flex-direction: column; overflow: hidden; height: 46vh; min-height: 260px; }
.dv-bar { display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.dv-gap { flex: 1; }
.dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.dv-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.dv-zoom { min-width: 56px; font-variant-numeric: tabular-nums; }
.dv-close { display: none; }
.dv-scroll { flex: 1; overflow: auto; padding: 8px; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: none; cursor: grab; }
.dv-scroll::-webkit-scrollbar { display: none; }
.dv-scroll.dv-dragging { cursor: grabbing; }
.dv-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dv-page { position: relative; margin: 0 auto 8px; width: 100%; min-height: 160px; }
.dv-page img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 1px 4px rgba(var(--shadow), .18); border-radius: 2px; user-select: none; -webkit-user-drag: none; }
.dv-more { text-align: center; padding: 4px 0 8px; }
/* Picking text: words lie over the picture as boxes; picked ones are tinted. */
.dv-words { position: absolute; left: 50%; top: 50%; display: none; }
.doc-viewer.dv-text .dv-words { display: block; }
.dv-w { position: absolute; border-radius: 2px; cursor: text; }
.dv-w:hover { background: rgba(15, 110, 102, .12); }
.dv-w.on { background: rgba(15, 110, 102, .32); box-shadow: 0 0 0 1px rgba(15, 110, 102, .45); }
.doc-viewer.dv-text .dv-text-btn { border-color: var(--accent); color: var(--accent); }
.dv-pick { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border-top: 1px solid var(--line); font-size: 13px; max-height: 40%; overflow: auto; }
.dv-pick[hidden], .dv-pick-fields[hidden], .dv-pick-clear[hidden] { display: none; }
.dv-pick-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.dv-pick-text { flex: 1; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.dv-pick-text.dv-picked { color: var(--ink); }
.dv-pick-clear { min-width: 28px; height: 28px; padding: 0; }
.dv-pick-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dv-chip { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.dv-chip:hover { border-color: var(--border-strong); }
.dv-chip-first { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.text-input.dv-filled { animation: dv-filled 1.6s ease-out; }
@keyframes dv-filled { from { background: rgba(15, 110, 102, .18); } to { background: transparent; } }
.doc-viewer.dv-full { position: fixed; inset: 0; z-index: 1000; margin: 0; height: auto; border: none; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.doc-viewer.dv-full .dv-close { display: inline-flex; }
.doc-viewer.dv-full .dv-expand { display: none; }
body.dv-open { overflow: hidden; }
@media (max-width: 420px) { .dv-label { display: none; } }
@media (min-width: 1000px) {
  .review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .review-layout > .list { grid-column: 1; grid-row: 1; }
  .review-layout > .doc-viewer { grid-column: 2; grid-row: 1; position: sticky; top: 72px; height: calc(100vh - 136px); margin: 24px 16px 16px 0; }
  .review-layout > .doc-viewer.dv-full { position: fixed; margin: 0; height: auto; }
}
@media (max-width: 600px) { .review-actions .btn { width: 100%; } }
@media (max-width: 380px) { .form-pair { grid-template-columns: 1fr; } }

/* Issuing a sales invoice (M8) */
.issue-form { display: flex; flex-direction: column; gap: 12px; }
.issue-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.issue-field > span, .issue-field > label > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.issue-field.grow { flex: 1; }
.field-input { width: 100%; height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); min-width: 0; }
select.field-input { padding: 0 8px; }
.field-input.num { text-align: right; }
.mono-field { font-family: var(--mono); }
.nip-row { display: flex; gap: 8px; }
.nip-row .btn.ghost { height: 44px; flex: none; }
.buyer-kind { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.issue-lines { display: flex; flex-direction: column; gap: 10px; }
.issue-line { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--ground); }
.issue-line-head { display: flex; gap: 8px; align-items: flex-end; }
.issue-line-nums { display: grid; grid-template-columns: 0.7fr 0.9fr 1.2fr 1.1fr 1.2fr 1.1fr; gap: 8px; align-items: end; }
.issue-line-total { text-align: right; }
.issue-line-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pkwiu-field { grid-column: span 2; }
.more-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin: 0 0 8px; }
.more-group legend { padding: 0 4px; }
.issue-field > .pkwiu-name { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.line-remove { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 20px; cursor: pointer; }
.issue-sum { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.issue-actions { display: flex; flex-direction: column; gap: 6px; }
.seller-box summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.advanced summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
details.advanced[open] summary { margin-bottom: 8px; }
.error-list { margin: 4px 0 0; padding-left: 18px; }
.preview-line { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.issue-secondary { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.late-box { background: var(--late-bg); color: var(--late-ink); }
@media (max-width: 760px) { .issue-line-nums { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 480px) { .issue-line-nums { grid-template-columns: 1fr 1fr; } }
.issue-form [hidden] { display: none; }
.req { color: var(--late-ink); font-weight: 700; }
.vat-head { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.tip { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--field); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; position: relative; }
.tip-text { display: none; position: absolute; right: -8px; top: calc(100% + 6px); z-index: 20; width: min(260px, 70vw); padding: 8px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 400; text-align: left; line-height: 1.4; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
/* Opens only on a click (issue.html toggles aria-expanded), never on hover. */
.tip[aria-expanded="true"] .tip-text { display: block; }
.issue-secondary a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Security log lists (account page, company settings) and the privacy page. */
.access-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.access-log .mono { font-size: 12px; }
.prose h2 { font-size: 15px; margin: 8px 0 0; }
.prose p, .prose ul { margin: 0; line-height: 1.5; }
.prose ul { padding-left: 18px; }
/* Privacy notice in the reader's language next to the binding Polish text. */
.notice-pair { display: grid; gap: 12px; }
.notice-pair .notice-lang { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
@media (min-width: 900px) { .notice-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
/* ---------------------------------------------------------------- Phones
   Everything below only changes narrow screens; wide screens keep the layout above. */
.bottom-nav { display: none; }
.tab-more { display: none; }
.note-toggle summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; padding: 10px 0; display: inline-block; }
.note-toggle summary::-webkit-details-marker { display: none; }
.note-toggle[open] summary { display: none; }
.approval-row .btn { min-width: 0; }

@media (max-width: 759px) {
  /* 16 px stops iPhones from zooming in when a field gets focus. */
  input:not([type=checkbox]):not([type=radio]), textarea, select:not(#company) { font-size: 16px; }

  /* Bottom navigation replaces the news ticker on phones. */
  body.has-ticker { padding-bottom: 0; }
  .ticker { display: none; }
  body.has-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  /* Icons all start at the same height and every label gets room for two lines, so a
     label that wraps ("Bank statement") does not push its icon up. */
  .bottom-nav a { flex: 1; min-width: 0; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 7px 1px 0; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; }
  .bottom-nav svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* Labels break only between words, never with a hyphen inside one; long names have a
     shorter phone version (menu.BOTTOM_LABELS). */
  .bottom-nav span { display: block; width: 100%; height: 2.4em; line-height: 1.2; text-align: center; overflow: hidden; -webkit-hyphens: manual; hyphens: manual; }
  .bottom-nav a[aria-current="page"] { color: var(--accent); }
  /* "Więcej" opens the whole menu (it replaces the ☰ button on phones); "+" in the
     middle opens the add sheet (menu.plus_items). */
  .bottom-nav button { flex: 1; min-width: 0; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 7px 1px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
  .bottom-more svg { fill: currentColor; stroke: none; }
  .bottom-nav .bottom-more.is-current { color: var(--accent); }
  .bottom-nav .bottom-plus { padding-top: 2px; }
  .bottom-plus i { width: 44px; height: 44px; margin-top: -16px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(var(--shadow), .25); }
  .bottom-plus i svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .bottom-plus span { height: auto; }
  body.has-nav .menu-btn { display: none; }
  /* Bar screens are top level on phones: no back arrow, and the name and e-mail row
     (in the menu under „Więcej”) is left out. */
  body.has-nav .back[data-on-bar], body.has-nav .user-row { display: none; }
  .plus-sheet { position: fixed; inset: 0; z-index: 30; }
  .plus-shade { position: absolute; inset: 0; background: rgba(var(--shadow), .45); }
  .plus-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 18px 18px 0 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 -8px 24px rgba(var(--shadow), .2); animation: plus-up .18s ease-out; }
  @keyframes plus-up { from { transform: translateY(40px); opacity: .4; } }
  @media (prefers-reduced-motion: reduce) { .plus-panel { animation: none; } }
  .plus-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; margin-bottom: 6px; }
  .plus-opt { display: flex; gap: 14px; align-items: center; padding: 12px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; }
  .plus-opt:active, .plus-opt:focus-visible { background: var(--subtle-2); }
  .plus-opt i { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--accent-soft-2); color: var(--accent-ink); display: grid; place-items: center; }
  .plus-opt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .plus-opt b { display: block; font-size: 16px; font-weight: 600; }
  .plus-opt small { display: block; color: var(--muted); font-size: 13px; }
  .plus-cancel { margin-top: 6px; }
  /* Smallest phones (iPhone SE, 320 px): a size smaller so "Rechnungen" still fits. */
  @media (max-width: 340px) { .bottom-nav a { font-size: 10px; } }
  .pay-bar { bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-ticker .tx-bulk, .tx-bulk { bottom: calc(68px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 6px 8px; }
  .tx-bulk .btn { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px; }
  body.has-ticker .tx-bulk.bulk-top, .tx-bulk.bulk-top { top: 8px; bottom: auto; }

  /* Header: tighter, and the top rows fold away once you scroll. */
  .topbar { padding-top: 10px; gap: 8px; }
  .company-picker label { display: none; }
  .company-picker select { min-height: 40px; }
  body.header-collapsed .user-row, body.header-collapsed .sync-line { display: none; }
  body.header-collapsed .topbar { padding-top: 6px; }

  /* Tabs: the first two stay, the rest go under "Więcej". */
  .tabs-wrap { display: flex; align-items: stretch; margin: 0 -16px; padding: 0 8px; }
  .tabs-wrap .tabs { margin: 0; padding: 0; overflow: visible; flex: 2; }
  .tab-extra { display: none; }
  .tab-more { display: block; position: relative; flex: 1; }
  .tab-more summary { list-style: none; cursor: pointer; display: block; height: 100%; }
  .tab-more summary::-webkit-details-marker { display: none; }
  .tab-more-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
  .tab-more-menu { position: absolute; right: 0; top: 100%; z-index: 4; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(var(--shadow), .12); }
  .tab-more-menu a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
  .tab-more-menu a[aria-current="page"] { background: var(--chip); }

  /* Approval cards: one row of buttons. */
  .approval-row { flex-wrap: nowrap; }
  .approval-row .btn { flex: 1; height: 44px; padding: 0 6px; }
  .approval-form { gap: 4px; }
  .approval-form.compact .approval-row { flex-basis: 100%; }
  .approval-form.compact .approval-row .btn { height: 44px; padding: 0 6px; }

  /* Tap targets of at least 44 px. */
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .order-switch a, .order-switch label { min-height: 40px; display: inline-flex; align-items: center; }
  .download summary { min-height: 44px; display: inline-flex; align-items: center; }
  .option input { width: 24px; height: 24px; }
}
@media (max-width: 759px) {
  .tabs-wrap .tabs { min-width: 0; }
  .tabs-wrap .tabs .tab { flex: 1 1 0; min-width: 0; padding: 10px 4px 12px; overflow: hidden; text-overflow: ellipsis; }
  .tab-more { flex: 0 0 auto; }
  .tab-more summary.tab { padding: 10px 10px 12px; white-space: nowrap; }
  .tab-more-active { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 759px) {
  .download-menu a { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 759px) {
  .tabs-wrap .tabs .tab { display: flex; justify-content: center; align-items: center; gap: 4px; }
  .tabs-wrap .tabs .tab.tab-extra { display: none; }
  .tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tabs-wrap .tab .badge { flex: none; margin-left: 0; }
}

/* ---------------------------------------------------------------- Side menu
   One menu for every screen of a company (entries in web/menu.py). Wide screens keep it
   open on the left; narrower ones open it as a drawer from the ☰ button. */
.side-menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: min(300px, 86vw); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .2s ease; overflow-y: auto; }
body.menu-open .side-menu { transform: none; box-shadow: 0 0 40px rgba(var(--shadow), .18); }
.side-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(var(--shadow), .32); }
body.menu-open { overflow: hidden; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 14px 16px; border-bottom: 1px solid var(--line); }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); }
.side-brand:hover { color: var(--ink); }
.side-brand .logo { flex: none; }
.logo .brand-mark { display: block; width: 100%; height: 100%; }
.brand > .brand-mark { flex: none; width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand .tagline { font-size: 13px; font-weight: 500; color: var(--muted); }
.side-company { display: flex; flex-direction: column; min-width: 0; }
/* Long names wrap onto a second line and only then get "…"; the full name is in the title. */
.side-company-name { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.side-company .muted { font-size: 12px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.side-nav a, .side-other { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.side-nav a:hover, .side-other:hover { background: var(--chip); color: var(--ink); }
.side-nav a[aria-current="page"] { background: var(--accent-soft-2); color: var(--accent-ink); }
.side-nav a[aria-current="page"] svg { stroke: var(--accent); }
.side-nav svg, .side-other svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-group.has-sub { position: relative; }
.side-group.has-sub > a { padding-right: 44px; }
.side-toggle { position: absolute; top: 4px; right: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.side-toggle:hover { background: var(--chip); color: var(--ink); }
.side-toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.side-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.side-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 32px; padding-left: 10px; border-left: 1px solid var(--line); }
.side-nav .side-sub a { min-height: 40px; padding: 6px 10px; font-weight: 500; font-size: 13.5px; }
.side-sub[hidden] { display: none; }
/* A small heading inside a sub-menu, e.g. "Zaawansowane" under Ustawienia. */
.side-subhead { margin: 8px 0 0; padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.side-label { display: flex; flex-direction: column; line-height: 1.2; }
.side-hint { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.side-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.side-other { color: var(--ink-2); }
/* "Zainstaluj aplikację": a button dressed as a menu link, hidden until app.js finds the app can be installed. */
.side-install { width: 100%; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }
.side-install[hidden] { display: none; }
.side-lang { display: flex; align-items: center; gap: 12px; padding: 4px 10px; color: var(--ink-2); }
.side-lang svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-lang select { flex: 1; min-width: 0; min-height: 40px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.op-lang { margin-left: auto; }
.lang-buttons { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lang-buttons [aria-current] { color: var(--ink); text-decoration: none; font-weight: 600; }
.side-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.side-user-name { font-size: 13px; font-weight: 600; }
.side-email { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user form { flex: none; }
.side-account { color: inherit; text-decoration: none; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.side-account:hover, .side-account:focus-visible { background: var(--subtle-2); }
.side-account:hover .side-user-name { text-decoration: underline; }
.menu-btn { margin-left: auto; }

@media (min-width: 1000px) {
  body.has-nav { padding-left: 248px; }
  body.has-nav .side-menu { width: 248px; transform: none; transition: none; z-index: 3; }
  body.has-nav .ticker { left: 248px; }
  .menu-btn, .side-close, .side-backdrop { display: none !important; }
  body.menu-open { overflow: auto; }
  /* The menu shows who is logged in, so the inbox header doesn't repeat it. */
  body.has-nav .user-row { display: none; }
}

/* ---------------------------------------------------------------- Overview (Przegląd) */
.home-top { padding: 12px 16px; }
.home-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.home-sub { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.home-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.home-actions form { margin: 0; }
.home-panel { white-space: nowrap; }
/* Phones: the title needs the room; the panel is still one tap away on Konto. */
@media (max-width: 640px) { .home-actions .home-panel { display: none; } }
.year-pick select { min-height: 40px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.home { gap: 14px; }
.home h2 { margin: 0; font-size: 15px; font-weight: 700; }

.home-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.alert-tile { gap: 2px; padding: 14px 16px; border-left-width: 4px; }
.alert-tile:hover { border-color: var(--field); color: inherit; }
.alert-tile.late { border-left-color: var(--late-ink); }
.alert-tile.soon { border-left-color: #E9A23B; }
.alert-tile.ok { border-left-color: #3BA776; }
.alert-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.alert-num { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.alert-tile.late .alert-num { color: var(--late-ink); }
.alert-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-tile.late .alert-sub { color: var(--late-ink); font-weight: 600; }
.home-sync { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: -4px; }
.home-sync .fin-dot { background: #3BA776; border-radius: 50%; width: 8px; height: 8px; }
.home-sync.stale { color: var(--soon-ink); font-weight: 600; }
.home-sync.stale .fin-dot { background: #E9A23B; }
.eu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 560px) { .eu-grid { grid-template-columns: 1fr; } }
.kc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kc-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.kc-row:first-child { border-top: 0; padding-top: 4px; }
.kc-when { font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kc-title { font-weight: 600; }
.kc-for { font-size: 13px; color: var(--ink-2); }
.kc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.kc-src { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .kc-row { grid-template-columns: 1fr; gap: 4px; } }

.home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.kpi-spark { gap: 4px; }
.spark { width: 100%; height: 30px; display: block; margin-top: 2px; }
.spark-mid { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark rect.pos { fill: #00897B; }
.spark rect.neg { fill: #C8701A; }
.spark rect:hover { opacity: .75; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.home-chart { min-width: 0; }
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .home-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid.solo { grid-template-columns: minmax(0, 1fr); }
}

.bars-scroll { overflow-x: auto; margin: 0 -4px; }
.bars { width: 100%; height: auto; display: block; }
.bars .grid { stroke: var(--grid); stroke-width: 1; }
.bars .baseline { stroke: var(--neutral-bar); stroke-width: 1; }
.bars .axis { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.bars .month { fill: var(--ink-2); }
.bars .hit { fill: transparent; }
.bars .in { fill: #00897B; }
.bars .out { fill: #C8701A; }
.bars .col.current .in, .bars .col.current .out { opacity: .55; }
.bars .col a { cursor: pointer; }
.bars .col a:hover .hit, .bars .col a:focus-visible .hit { fill: var(--subtle-2); }

.home-taxes { gap: 0; }
.home-taxes .fin-chart-head { margin-bottom: 6px; }
.tax-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tax-row .fin-dot { flex: none; }
.fin-dot.cit { background: #7A5CB8; }
.tax-label { font-weight: 600; font-size: 14px; }
.tax-amount { margin-left: auto; font-weight: 700; font-size: 17px; white-space: nowrap; text-align: right; display: flex; flex-direction: column; }
.tax-amount .muted { font-weight: 400; font-size: 12px; }
.tax-row .stack { flex: 1; }
.tax-running { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 0 10px; font-size: 14px; }
.tax-running b { white-space: nowrap; }
.home-taxes a.fin-note { margin-top: auto; color: var(--accent); }

.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hbar-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 36px; padding: 2px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; }
a.hbar-row:hover { background: var(--chip); color: var(--ink); }
.hbar-row.stacked { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
.hbar-row.stacked .hbar-label { grid-area: label; }
.hbar-row.stacked .hbar-track { grid-area: track; }
.hbar-row.stacked .hbar-value { grid-area: value; }
.hbar-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; display: block; }
.hbar { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--neutral-bar); }
.hbar.late { background: #D92D20; }
.hbar.soon { background: #E9A23B; }
.hbar.neutral { background: var(--neutral-bar); }
.hbar.out { background: #C8701A; }
.hbar-value { font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.hbar-value .muted { font-weight: 400; }

.meter { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.meter .seg { min-width: 4px; }
a.seg:hover, a.seg:focus-visible { filter: brightness(.9); }
.meter-legend a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.meter-legend a:hover b { text-decoration: underline; }
.seg.done, .sw.done { background: #3BA776; }
.seg.soon, .sw.soon { background: #E9A23B; }
.seg.open, .sw.open { background: var(--neutral-bar); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); align-items: center; }
.meter-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Incoming invoices on the overview */
.incoming { gap: 10px; }
.in-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.in-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.in-chip b { color: var(--ink); font-size: 15px; }
.in-chip:hover { background: var(--chip); color: var(--ink); }
.in-chip.soon { border-color: #E9A23B; background: var(--soon-bg); color: var(--soon-ink); }
.in-chip.soon b { color: var(--soon-ink); }
.in-list { list-style: none; margin: 0; padding: 0; }
.in-list li + li { border-top: 1px solid var(--line); }
.in-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; margin: 0 -6px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.in-row:hover { background: var(--chip); color: var(--ink); }
.in-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.in-party { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-meta { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-due.late { color: var(--late-ink); font-weight: 600; }
.in-due.soon { color: var(--soon-ink); font-weight: 600; }
.in-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.in-amount { font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.chart-tip { position: fixed; z-index: 40; pointer-events: none; background: var(--ink); color: var(--on-ink); font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 8px; white-space: pre-line; box-shadow: 0 4px 14px rgba(var(--shadow), .2); max-width: 260px; }

@media (max-width: 759px) {
  .home-top { padding: 10px 16px; }
  .home-title { font-size: 18px; }
  .home-alerts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .alert-tile { padding: 12px; }
  .alert-num { font-size: 24px; }
  .hbar-row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; }
  .bars { min-width: 600px; }
}
/* Counterparties ("Kontrahenci") */
.vendor-tools { align-items: flex-start; }
.vendor-filter { flex-wrap: wrap; }
.vendor-filter .badge { margin-left: 2px; }
.vendor-card { padding: 0; gap: 0; }
.vendor-list { list-style: none; margin: 0; padding: 0; }
.vendor-head, .vendor-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px 250px; gap: 16px; align-items: center; padding: 12px 16px; }
.vendor-head { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
.vendor-row + .vendor-row { border-top: 1px solid var(--line); }
.vendor-row:target { background: var(--accent-soft); }
/* Long names and PKD lines wrap instead of widening the page on a phone. */
.vendor-name, .vendor-name.pick-row > .stack { min-width: 0; }
.vendor-name .muted { overflow-wrap: anywhere; }
.vendor-name a.party { font-size: 15px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.vendor-name a.party:hover { color: var(--accent); text-decoration: underline; }
.num { text-align: right; }
.vendor-sum { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 14px; white-space: nowrap; }
.vendor-sum .stack { align-items: flex-end; gap: 0; }
.vendor-sum .in { color: var(--done-ink); }
.flag.bank { background: var(--info-bg); color: var(--info-ink); }
.cat-form { display: flex; align-items: center; gap: 8px; }
.cat-select { width: 100%; height: 38px; border-radius: 9px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--field); }
.cat-select.wide { max-width: 360px; height: 44px; }
.cat-select.suggested { border: 1px dashed var(--accent); color: var(--ink-2); background: var(--accent-soft); }
.cat-select.unset { border-color: var(--soon-line); background: var(--soon-bg); color: var(--soon-ink); }
.cat-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cat-ok { font-size: 13px; white-space: nowrap; align-self: center; }
.cat-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.cat-label { font-size: 14px; }
.cat-label.suggested { color: var(--ink-2); border-bottom: 1px dashed var(--accent); }
.cat-label.unset { color: var(--soon-ink); }
.vendor-facts b { font-size: 16px; }
.plain-input { flex: 1 1 220px; min-width: 0; height: 40px; border: 1px solid var(--field); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); }
.match-amount.in { color: var(--done-ink); }
@media (max-width: 860px) {
  .vendor-head { display: none; }
  .vendor-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sum" "src src" "cat cat"; gap: 8px 12px; }
  .vendor-name { grid-area: name; }
  .vendor-sum { grid-area: sum; }
  .vendor-src { grid-area: src; }
  .vendor-cat { grid-area: cat; }
}
.vendor-row.from-bank-row { grid-template-columns: minmax(0, 1fr) 150px 130px; }
.from-bank-row .plain-input { width: 100%; max-width: 420px; }
@media (max-width: 860px) {
  .vendor-row.from-bank-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "src sum"; }
}

/* Category breakdown on the finance page */
.cat-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .cat-cols { grid-template-columns: 1.4fr 1fr; gap: 32px; } }
.cat-col-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
.cat-col-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.cat-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cat-bar-row { display: flex; flex-direction: column; gap: 4px; }
.cat-bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cat-bar-amount { font-weight: 600; white-space: nowrap; }
.cat-bar-amount .muted { font-weight: 400; margin-left: 4px; }
.cat-track { position: relative; height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.cat-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.cat-fill.out { background: #C8701A; }
.cat-fill.in { background: #00897B; }
.cat-fill.bank { background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.cat-bar-row.unset .cat-fill:not(.bank) { background: var(--neutral-bar); }
.cat-sub { font-size: 12px; }
.vendor-pkd { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gus-status { font-size: 12px; }
.gus-status.warn { color: var(--warn); }
.gus-status.bad { color: var(--late-ink); font-weight: 600; }
.gus-status.ok { color: var(--done-ink); font-weight: 600; }
.pay-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pay-link input { flex: 1; min-width: 200px; }
.pay-qr svg { display: block; width: 120px; height: 120px; border-radius: 6px; }
.plan-banner.krs-pull { align-items: center; gap: 10px; }
.krs-spin { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.krs-ok { color: var(--done-ink); font-weight: 600; }

/* Own categories ("Kategorie") */
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }
.cat-dot.big { width: 14px; height: 14px; margin: 3px 0 0; }
.cat-manage { list-style: none; margin: 0; padding: 0; }
.cat-manage li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.cat-manage li:first-child { border-top: none; }
.cat-manage li.is-hidden .party { color: var(--muted); }
.cat-manage-row { display: flex; gap: 10px; align-items: flex-start; }
.cat-manage .party { font-size: 15px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cat-manage .party:hover { color: var(--accent); text-decoration: underline; }
.cat-edit summary, .cat-new summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 4px 0; }
.cat-edit[open] { background: var(--ground); border-radius: 10px; padding: 8px 12px 12px; }
.cat-edit form + form, .cat-edit form + .paid-row { margin-top: 8px; }
.cat-new { margin-top: 4px; }
.cat-new[open] summary { margin-bottom: 6px; }
.cat-kind, .swatches { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cat-kind legend, .swatches legend { width: 100%; padding: 0; margin-bottom: 4px; font-size: 14px; }
.cat-kind label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 32px; }
.cat-kind input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.swatches { gap: 8px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span:not(.visually-hidden) { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--field); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.link-btn.danger { color: var(--late-ink); }
.stack > .plain-input { flex: 0 0 auto; }
.cat-all > summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 4px 0; }
.cat-bar-label a.cat-link { color: inherit; text-decoration: none; }
.cat-bar-label a.cat-link:hover { color: var(--accent); text-decoration: underline; }

/* Access checklist ("Dostęp użytkownika", Moje konto) */
.access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.access-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.access-list li:first-child { border-top: none; }
.access-mark { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.access-list .yes .access-mark { background: var(--done-bg); color: var(--done-ink); }
.access-list .no .access-mark { background: var(--chip); color: var(--muted); }
.access-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.access-name { font-size: 14px; font-weight: 600; }
.access-list .no .access-name { color: var(--muted); font-weight: 500; }
.access-hint { font-size: 12px; color: var(--muted); }
.access-changed { font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.access-legend { font-size: 13px; margin: 0 0 10px; display: grid; gap: 2px; }
.access-edit li { flex-wrap: wrap; }
.level-pick { display: inline-flex; border: 1px solid var(--field); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.level-pick label { position: relative; display: flex; }
.level-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.level-pick span { padding: 7px 11px; font-size: 13px; font-weight: 500; color: var(--ink-2); border-left: 1px solid var(--field); white-space: nowrap; }
.level-pick label:first-child span { border-left: none; }
.level-pick input:checked + span { background: var(--accent); color: var(--on-accent); }
.level-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 600px) {
  .access-edit .level-pick { width: calc(100% - 36px); margin-left: 36px; }
  .access-edit .level-pick label { flex: 1; }
  .access-edit .level-pick span { flex: 1; text-align: center; padding: 9px 4px; }
}
.booking-parts { padding-left: 36px; }
.booking-parts fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.booking-parts legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 2px; }
.booking-parts p { margin: 0 0 4px; }
.booking-part { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.booking-part input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.booking-parts[hidden] { display: none; }
.booking-parts-read { margin-top: 12px; }
.member-row { flex-direction: row; justify-content: space-between; align-items: center; }
.account-company + .account-company { border-top: 1px solid var(--line); padding-top: 10px; }
.account-company summary { cursor: pointer; }

/* ---------------------------------------------------------------- labour manager */
.staff-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.staff-actions .btn { display: inline-flex; align-items: center; text-decoration: none; height: 44px; }
.staff-actions .btn.ghost { height: 44px; }
.warn-card { border-color: var(--soon-line); background: var(--soon-soft); }
.staff-reminders, .staff-items, .staff-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.staff-reminders li { padding: 4px 0; font-size: 14px; }
.staff-items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.staff-items li:first-child { border-top: none; }
.hire-steps li.is-done b { font-weight: 500; color: var(--muted); }
.hire-mark { display: inline-block; width: 1.2em; color: var(--accent); font-weight: 700; }
.hire-steps .item-actions { flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.hire-upload[open] { flex-basis: 100%; }
.item-actions { display: flex; gap: 12px; align-items: center; font-size: 14px; flex: none; }
.item-actions form, .staff-items form { margin: 0; }
.ezla-steps { margin: 8px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.howto-video { margin: 4px 0 8px; max-width: 640px; }
.howto-video video { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); }
.howto-video figcaption { font-size: 13px; margin-top: 6px; }
.howto-video.tall { max-width: 300px; }
.ezla-notes li { flex-wrap: wrap; }
.ezla-notes .item-actions { flex: 0 1 auto; }
.ezla-notes .item-actions select { max-width: 220px; }
.ezla-notes label.warn { color: var(--soon-ink); }
.zus-tabs { margin: 4px 0 0; padding: 0; }
.staff-head, .staff-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 90px; gap: 12px; align-items: start; }
.staff-head { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.staff-row { padding: 10px 0; border-top: 1px solid var(--line); }
.staff-row:first-child { border-top: none; }
/* Work is over (end recorded or the last contract ran out): kept on the list, greyed. */
.staff-row.ended { opacity: .6; }
.staff-row .pill { align-self: flex-start; white-space: normal; }
.staff-head .num, .staff-row .num { text-align: right; align-items: flex-end; }
.staff-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.staff-position { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.staff-position-form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.staff-position-form input { flex: 1; min-width: 0; max-width: 360px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.akta-part { display: flex; flex-direction: column; gap: 2px; }
.staff-details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 0; }
.staff-details[open] summary { margin-bottom: 10px; }
.staff-form { display: flex; flex-direction: column; gap: 12px; }
.staff-bulk { gap: 12px; }
.staff-bulk-grid { display: flex; flex-direction: column; gap: 6px; }
.staff-bulk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 6px; align-items: center; }
.staff-bulk-row.head { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.staff-bulk-row .plain-input { height: 36px; width: 100%; }
.staff-bulk-row.flagged .plain-input { border-color: var(--warn, #c98a00); }
.staff-bulk-note { grid-column: 2 / -1; font-size: 13px; color: var(--ink); display: flex; gap: 6px; align-items: flex-start; }
.staff-bulk-after { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.staff-bulk-after legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.staff-bulk-hint { flex-basis: 100%; font-size: 12px; }
.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field.wide { grid-column: 1 / -1; }
.field.check { flex-direction: row; align-items: center; gap: 8px; }
.field.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.field input:not([type=checkbox]):not([type=file]), .field select, .field textarea, .staff-inline input, .staff-inline select, .equip-line input, .crew-shifts input {
  height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); width: 100%; box-sizing: border-box; }
.field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.field input.mono { font-family: var(--mono); font-size: 14px; }
.ocr-mark { font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft-2); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.staff-upload, .staff-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.staff-inline input { flex: 1 1 220px; width: auto; }
.staff-inline select { flex: 0 0 auto; width: auto; }
.staff-archive { padding: 0 2px 24px; }
.staff-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
.review-file { position: sticky; top: 72px; }
.doc-frame { width: 100%; border: 1px solid var(--line); border-radius: 8px; max-height: 70vh; object-fit: contain; background: var(--ground); }
.time-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.time-nav { display: flex; align-items: center; gap: 8px; }
.time-nav .btn.ghost { height: 36px; width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; }
.time-nav .btn.ghost.today-btn { width: auto; min-width: max-content; flex: none; white-space: nowrap; padding: 0 12px; font-size: 14px; }
.time-card { padding: 12px; }
.time-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.time-grid { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.time-grid th, .time-grid td { border-bottom: 1px solid var(--line); padding: 4px 3px; text-align: center; vertical-align: top; }
.time-grid thead th { font-weight: 500; color: var(--muted); }
.time-grid thead th span { display: block; font-size: 11px; }
.time-grid thead th b { color: var(--ink); }
.time-grid th.today b { color: var(--accent); }
.time-grid .time-name { position: sticky; left: 0; background: var(--surface); text-align: left; min-width: 110px; max-width: 150px; z-index: 1; font-weight: 600; }
.time-grid .time-name .muted { display: block; font-weight: 400; font-size: 11px; }
.time-grid .off { background: var(--subtle); }
.time-grid .absent { background: var(--soon-soft); }
.time-grid input { width: 70px; height: 28px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; text-align: center; padding: 0 2px; display: block; margin: 0 auto 3px; background: var(--surface); }
.time-grid input.t-act { border-color: var(--field); font-weight: 600; }
.time-grid .t-plan-ro { display: block; font-size: 12px; color: var(--ink-2); height: 28px; line-height: 28px; white-space: nowrap; min-width: 72px; }
.time-grid .num { text-align: right; white-space: nowrap; }
.time-grid .num .muted { display: block; font-size: 11px; }
.time-grid .hol { background: var(--hol); }
.time-grid td.shift-morning input.t-plan, .board-block.shift-morning { background: var(--sh-morning); }
.time-grid td.shift-afternoon input.t-plan, .board-block.shift-afternoon { background: var(--sh-afternoon); }
.time-grid td.shift-evening input.t-plan, .board-block.shift-evening { background: var(--sh-evening); }
.time-grid td.shift-morning .t-plan-ro, .time-grid td.shift-afternoon .t-plan-ro, .time-grid td.shift-evening .t-plan-ro { border-radius: 6px; color: var(--sh-ink); }
.time-grid td.shift-morning .t-plan-ro { background: var(--sh-morning); }
.time-grid td.shift-afternoon .t-plan-ro { background: var(--sh-afternoon); }
.time-grid td.shift-evening .t-plan-ro { background: var(--sh-evening); }
.time-grid td[class*="shift-"] input.t-plan { color: var(--sh-ink); border-color: transparent; }
.board td { vertical-align: middle; padding: 3px 2px; }
.board-block { display: block; min-width: 44px; padding: 5px 4px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--sh-ink); white-space: nowrap; }
.board-block.absent { background: var(--soon-soft); color: var(--soon-ink); border: 1px solid var(--soon-line); }
.board-block.hol { background: var(--hol); }
.board tfoot th, .board tfoot td { border-bottom: none; padding-top: 8px; font-size: 12px; }
.shift-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0 2px; font-size: 13px; color: var(--ink-2); }
.shift-legend li { display: flex; align-items: center; gap: 6px; }
.shift-legend .board-block { min-width: 0; width: 18px; height: 14px; padding: 0; }
.staff-manager { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.staff-invite-wait { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.staff-invite-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.staff-delete-ask { margin-top: 10px; }
.staff-delete-ask form { margin-top: 4px; }
.staff-manager > div { flex: 1 1 240px; }
.timesheet { border-collapse: collapse; width: 100%; font-size: 13px; }
.timesheet th, .timesheet td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.timesheet thead th { font-weight: 500; color: var(--muted); font-size: 12px; }
.timesheet .num { text-align: right; }
.timesheet input.t-clock { width: 64px; height: 32px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; padding: 0 4px; background: var(--surface); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.timesheet tr.off { background: var(--subtle); }
.timesheet tr.hol { background: var(--hol); }
.timesheet tr.today .ts-day b { color: var(--accent); }
.timesheet .ts-day { font-weight: 400; }
.timesheet tr:has(+ .ts-note-row) > * { border-bottom: none; padding-bottom: 0; }
.timesheet .ts-note-row td { padding-top: 0; }
.timesheet .ts-note-row input { width: 100%; height: 26px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 12px; padding: 0 6px; background: transparent; color: var(--ink-2); box-sizing: border-box; }
.timesheet .ts-note-row input::placeholder { color: var(--muted); opacity: .7; }
.timesheet .ts-note-row input.has { background: var(--subtle-2); color: var(--ink); }
.timesheet .ts-note-row input:hover, .timesheet .ts-note-row input:focus { border-color: var(--line); background: var(--surface); }
.timesheet .ts-day .muted, .timesheet .ts-day .abs-code { display: inline; margin-left: 6px; font-size: 11px; }
.timesheet .ts-ro { color: var(--ink-2); }
.ts-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 6px; background: transparent; }
.ts-dot.shift-morning { background: var(--sh-morning); } .ts-dot.shift-afternoon { background: var(--sh-afternoon); } .ts-dot.shift-evening { background: var(--sh-evening); }
.timesheet .ts-week th, .timesheet .ts-week td { background: var(--subtle-2); font-size: 12px; color: var(--ink-2); }
.timesheet .ts-total th, .timesheet .ts-total td { font-size: 14px; font-weight: 600; border-bottom: none; padding-top: 8px; }
.ts-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 8px; }
.ts-kpis .card { padding: 10px 12px; }
.fill-range > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fill-range > summary .muted { font-weight: 400; font-size: 13px; }
.fill-range[open] > summary { margin-bottom: 12px; }
.fill-range [hidden] { display: none; }
.fill-set { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fill-set legend { font-size: 13px; color: var(--ink-2); font-weight: 500; padding: 0; margin-bottom: 6px; }
.fill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fill-chip { position: relative; }
.fill-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fill-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--field); border-radius: 18px; font-size: 14px; cursor: pointer; background: var(--surface); }
.fill-chip.day span { min-width: 44px; justify-content: center; padding: 0 6px; }
.fill-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fill-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fill-need { margin: 2px 0 0; font-size: 13px; color: var(--late-ink); font-weight: 500; }
.fill-range .btn:disabled, .dz-pop .btn:disabled { opacity: .45; cursor: not-allowed; }
.settings-form [data-phone-save]:disabled { opacity: .45; cursor: not-allowed; }
.fill-summary { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.fill-count { text-align: right; }
.fill-table .fill-tick { width: 32px; }
.fill-table .fill-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
.fill-table tr.fill-skip { color: var(--muted); }
.fill-status { font-size: 12px; }
.fill-status.fill-new, .fill-status.fill-replace { font-weight: 600; color: var(--accent-ink); }
.fill-actions { position: sticky; bottom: 44px; background: var(--ground); padding: 8px 0; z-index: 2; }
.fill-range .field.check input[type=radio] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent); }
.fill-table td, .fill-table th { white-space: normal; }
@media (max-width: 759px) {
  .fill-count { text-align: left; }
  .fill-table .fill-now { display: none; }
  .fill-actions { bottom: calc(68px + env(safe-area-inset-bottom)); }
}
.gantt { font-size: 13px; }
.g-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.g-row.off { background: var(--subtle); }
.g-row.hol { background: var(--hol); }
.g-row.today .g-day b { color: var(--accent); }
.g-day { padding: 5px 8px 5px 2px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g-day .muted, .g-hol { font-size: 11px; }
.g-hol { color: var(--ink-2); }
.g-abs { font-size: 11px; color: var(--soon-ink); }
.g-people { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; min-height: 30px; }
.g-people .g-lane { min-height: 26px; font-size: 13px; }
.g-people .g-name { font-size: 13px; }
.g-people .g-hrs { font-size: 12px; line-height: 22px; padding: 0 8px; }
.g-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; padding: 6px 9px; border-radius: 7px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); pointer-events: none; }
@media (max-width: 600px) {
  .g-row { grid-template-columns: 74px minmax(0, 1fr); }
}
.g-cal { display: block; font-size: 12px; }
.g-cal-head, .g-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 104px; }
.g-cal-head .num { text-align: right; }
.g-cal-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 4px 6px; border-left: 1px solid var(--line); background: var(--subtle-2); }
.g-cal-total b { font-size: 15px; }
.g-cal-total .muted { font-size: 10px; }
.g-cal-head div { padding: 4px 6px 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.g-cal-week { border-top: 2px solid var(--border-strong); }
.g-cal-week:last-child { border-bottom: 2px solid var(--border-strong); }
.g-cal-day { min-height: 74px; padding: 4px 4px 6px; border-left: 1px solid var(--line); min-width: 0; }
.g-cal-day.off { background: var(--subtle); }
.g-cal-day.hol { background: var(--hol); }
.g-cal-day.outside { opacity: .45; }
.g-cal-day.today .g-cal-date b { color: var(--surface); background: var(--accent); border-radius: 10px; padding: 0 6px; }
.g-cal-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 3px; min-height: 18px; }
.g-cal-date b { font-size: 13px; }
.g-cal-date .g-hol { font-size: 11px; line-height: 1.2; }
.g-lane { position: relative; display: flex; align-items: center; gap: 4px; min-height: 20px; margin-bottom: 2px; padding-left: 2px; border-radius: 4px; color: var(--ink); text-decoration: none; cursor: pointer; }
.g-name { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-hrs { flex: none; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 18px; color: var(--sh-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-hrs.shift-morning { background: var(--sh-morning); } .g-hrs.shift-afternoon { background: var(--sh-afternoon); } .g-hrs.shift-evening { background: var(--sh-evening); }
.g-hrs.cont { opacity: .65; font-weight: 400; }
.g-lane.cont .g-name { font-weight: 400; color: var(--muted); }
.g-lane:hover .g-tip, .g-lane:focus .g-tip { display: block; }
.g-cal-day:nth-child(n+6) .g-tip { left: auto; right: 0; }
.g-lane:hover, .g-lane:focus { background: var(--subtle-2); z-index: 4; }
.g-cal-abs { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 3px; }
.g-list { display: none; }
.g-week-h { text-transform: none; font-size: 14px; color: var(--ink); }
.g-week { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 2px 4px; border-top: 2px solid var(--border-strong); font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .3px; }
@media (max-width: 760px) {
  .g-cal { display: none; }
  .g-list { display: block; }
}
.abs-code { display: block; font-size: 11px; font-weight: 700; color: var(--soon-ink); }
[data-day-href] { cursor: pointer; }
.g-cal-day[data-day-href]:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.g-zoom { color: inherit; text-decoration: none; border-radius: 6px; }
.g-zoom:hover b, .g-zoom:focus-visible b { color: var(--accent); text-decoration: underline; }
.print-link { height: 36px; display: inline-flex; align-items: center; text-decoration: none; }

/* One day hour by hour (schedule view=day) */
.dz-hol { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--hol); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dz-kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 2px 2px 14px; }
.dz-kpis div { display: flex; flex-direction: column; }
.dz-kpis b { font-size: 20px; }
.dz-kpis .muted { font-size: 12px; }
.dz { font-size: 13px; }
.dz-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.dz-name { padding: 8px 10px 8px 2px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dz-name a, .dz-name b { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-name a:hover { color: var(--accent); text-decoration: underline; }
.dz-name .muted { font-size: 12px; }
/* A line every hour on a computer; every 2 hours on a phone (below). */
.dz-track { position: relative; min-height: 42px; background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / var(--n))); }
.dz-axis .dz-track { min-height: 26px; background-image: none; }
.dz-axis .dz-name { font-size: 12px; font-weight: 600; color: var(--muted); justify-content: flex-end; }
.dz-tick { position: absolute; bottom: 5px; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dz-tick:first-child { transform: none; }
.dz-tick:last-child { transform: translateX(-100%); }
.dz-bar { position: absolute; top: 8px; height: 26px; line-height: 26px; padding: 0 8px; border-radius: 6px; color: var(--sh-ink); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.dz-bar.shift-morning, .dz-info-time.shift-morning { background: var(--sh-morning); } .dz-bar.shift-afternoon, .dz-info-time.shift-afternoon { background: var(--sh-afternoon); } .dz-bar.shift-evening, .dz-info-time.shift-evening { background: var(--sh-evening); }
.dz-bar.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; opacity: .75; font-weight: 500; }
/* People from outside the team: the same shift colour, washed out, with a dashed edge. */
.g-lane.ext .g-hrs, .dz-row.ext .dz-bar, .time-grid tr.ext td[class*="shift-"] .t-plan-ro, .time-grid tr.ext td[class*="shift-"] input.t-plan {
  background-image: linear-gradient(color-mix(in srgb, var(--surface) 58%, transparent), color-mix(in srgb, var(--surface) 58%, transparent));
  outline: 1px dashed var(--border-strong); outline-offset: -1px;
}
.g-lane.ext .g-name { font-weight: 500; }
.ext-tag { display: inline-block; padding: 0 6px; border-radius: 8px; border: 1px dashed var(--border-strong); font-size: 11px; font-weight: 500; line-height: 16px; color: var(--muted); vertical-align: 1px; align-self: flex-start; }
.ext-list summary { cursor: pointer; list-style: none; }
.ext-list summary::-webkit-details-marker { display: none; }
.ext-list .ext-edit { flex: 1; }
.ext-list .ext-edit[open] summary .link-btn { display: none; }
.ext-list .ext-edit .staff-form { margin-top: 12px; }
.ext-list li:has(.ext-row) { align-items: center; }
.ext-list .ext-row { flex: 1; min-width: 0; }
#usun form { margin: 0; }
.ext-login { display: flex; flex-direction: column; gap: 8px; }
.ext-login form { margin: 0; }
.dz-done { position: absolute; top: 38px; height: 4px; border-radius: 2px; background: var(--ink-2); }
.dz-done span { position: absolute; top: 5px; left: 0; font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; }
.dz-row:has(.dz-done) .dz-track { min-height: 60px; }
.dz-done.r span { left: auto; right: 0; }
.dz:not(.open) .dz-count { display: none; }
.dz-count-toggle { margin: 8px 2px 0; font-size: 13px; }
.dz-count { border-bottom: none; background: var(--subtle); border-radius: 0 0 8px 8px; }
.dz-hours { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: stretch; }
.dz-hours span { display: flex; align-items: center; justify-content: center; margin: 6px 1px; border-radius: 5px; font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.dz-hours .lvl-1 { background: var(--accent-soft); }
.dz-hours .lvl-2 { background: var(--accent-soft-2); }
.dz-hours .lvl-3 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.dz-hours .lvl-4 { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); color: var(--ink); }
/* The owner's day view: draw, move and stretch shifts (app.js [data-dz-edit]). */
.dz-editable .dz-row:not(.dz-axis):not(.dz-count):not(.dz-guest) .dz-track { cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dz-editable [data-dz-bar] { cursor: grab; touch-action: none; }
.dz-editable [data-dz-bar]:hover, .dz-editable [data-dz-bar]:focus-visible { box-shadow: 0 0 0 2px var(--ink-2); outline: none; }
.dz-editable .dz-bar.dz-moving { cursor: grabbing; box-shadow: 0 2px 10px rgb(0 0 0 / .18), 0 0 0 2px var(--accent); z-index: 2; }
.dz-grip { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.dz-grip.l { left: 0; } .dz-grip.r { right: 0; }
.dz-grip::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 3px; width: 3px; border-radius: 2px; background: rgb(0 0 0 / .22); opacity: 0; }
[data-dz-bar]:hover .dz-grip::after { opacity: 1; }
.dz-bar.dz-draft { background: var(--accent-soft-2); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.dz-new .dz-name b { color: var(--accent); }
.dz-new .dz-track { background-color: var(--subtle); }
.dz-pop { position: absolute; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px rgb(0 0 0 / .18); display: flex; flex-direction: column; gap: 10px; }
.dz-pop[hidden] { display: none; }
.dz-pop-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz-pop-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.dz-pop-people small { margin-left: 6px; font-size: 11px; }
.dz-pop-people input:checked + span small { color: inherit; opacity: .85; }
.dz-pop-hint { margin: 0; font-size: 12px; }
.dz-pop .staff-actions { margin: 0; }
.fill-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 44px)); gap: 4px; }
.fill-cal-h { font-size: 12px; color: var(--muted); text-align: center; }
.fill-cal-d { position: relative; }
.fill-cal-d input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fill-cal-d span { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--field); border-radius: 8px; font-size: 14px; cursor: pointer; background: var(--surface); font-variant-numeric: tabular-nums; }
.fill-cal-d.off span { background: var(--subtle); }
.fill-cal-d input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fill-cal-d input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fill-all span { border-style: dashed; font-weight: 600; }
.fill-chip.ext span { border-style: dashed; color: var(--ink-2); }
.fill-shift.shift-morning span { background: var(--sh-morning); color: var(--sh-ink); }
.fill-shift.shift-afternoon span { background: var(--sh-afternoon); color: var(--sh-ink); }
.fill-shift.shift-evening span { background: var(--sh-evening); color: var(--sh-ink); }
.fill-shift input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fill-months { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.fill-month { display: flex; flex-direction: column; gap: 6px; }
.fill-month-name { font-size: 14px; font-weight: 600; text-transform: capitalize; }
.fill-cal-d.anchor span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fill-cal-tip { margin: 0; font-size: 13px; }
.fill-cal-sum { display: flex; gap: 12px; align-items: center; font-size: 14px; }
/* Booking stay calendar: same day boxes as the shift calendar; check-in and check-out filled, nights between tinted. */
.stay-cal { display: flex; flex-direction: column; gap: 8px; }
.stay-cal[hidden] { display: none; }
.grid2 > .stay-cal, .acc-period > .stay-cal, .no-work-form > .stay-cal, .staff-grid > .stay-cal { grid-column: 1 / -1; flex-basis: 100%; }
.stay-cal-nav { display: flex; gap: 6px; }
.stay-cal-nav .btn { min-width: 40px; padding: 4px 10px; font-size: 18px; line-height: 1; }
.stay-d { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; }
.stay-d:hover span { border-color: var(--accent); }
.stay-d:focus-visible { outline: none; }
.stay-d:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
.stay-d.mid span { background: var(--accent-soft-2); border-color: var(--accent-soft-2); }
.stay-d.in span, .stay-d.out span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.dz-others { margin: 12px 2px 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
/* Names are buttons that open a card (popover) with the full name and hours. */
.dz-who { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dz-who:hover { text-decoration: underline; }
.dz-who:focus-visible, button.dz-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dz-name { justify-content: center; }
button.dz-bar { border: 0; margin: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.dz-bar { text-overflow: clip; }
.dz-info { margin: auto; width: min(320px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 32px rgb(0 0 0 / .2); }
.dz-info:popover-open { display: flex; flex-direction: column; gap: 6px; }
.dz-info::backdrop { background: rgb(0 0 0 / .25); }
.dz-info-name { font-size: 17px; }
.dz-info-time { align-self: flex-start; padding: 4px 10px; border-radius: 6px; font-weight: 700; color: var(--sh-ink); }
.dz-info-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .dz-row { grid-template-columns: 92px minmax(0, 1fr); }
  .dz-name { padding-right: 6px; }
  .dz-name a, .dz-name b { white-space: normal; font-size: 12px; line-height: 1.25; }
  .dz-name .muted { font-size: 11px; white-space: nowrap; }
  .dz-who { white-space: normal; font-size: 13px; line-height: 1.25; }
  .dz-bar, button.dz-bar { padding: 0 4px; font-size: 11px; letter-spacing: -.2px; }
  .dz-track { background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(200% / var(--n))); }
  .dz-axis .dz-track { background-image: none; }
  .dz-tick.odd { display: none; }
  .dz-hours span { font-size: 11px; margin: 6px 0; }
  .dz-count .dz-name .muted { display: none; }
  .dz-done span { display: none; }
  .dz-row:has(.dz-done) .dz-track { min-height: 50px; }
  .dz-kpis { gap: 8px 18px; }
  .dz-kpis b { font-size: 17px; }
}

/* The schedule sheet to print (schedule_print.html): A4 landscape, always paper colours. */
.print-page { background: var(--ground); margin: 0; }
.print-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; max-width: 1180px; margin: 0 auto; }
.print-bar .btn { height: 40px; }
.print-bar a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.print-bar .muted { margin: 0; font-size: 12px; }
.print-sheet {
  --sh-morning: #F6DFA0; --sh-afternoon: #CDEBC9; --sh-evening: #DCCBF2; --sh-ink: #344054; --hol: #DDE1E6;
  --ink: #14202B; --ink-2: #475467; --muted: #667085; --line: #D0D5DD; --subtle: #F4F5F7; --soon-ink: #7A2E0E;
  box-sizing: border-box; width: 297mm; max-width: calc(100% - 32px); min-height: 190mm; margin: 0 auto 32px; padding: 10mm;
  background: #fff; color: var(--ink); box-shadow: 0 2px 14px rgba(0,0,0,.12); border-radius: 4px; overflow-x: auto;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 20px; margin-bottom: 4mm; }
.ps-head h1 { margin: 0; font-size: 17px; }
.ps-head p { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); }
.ps-head .shift-legend { font-size: 11px; color: var(--ink-2); }
.ps-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; font-variant-numeric: tabular-nums; }
.ps-table th, .ps-table td { border: 1px solid var(--line); padding: 3px 2px; text-align: center; vertical-align: middle; overflow: hidden; }
.ps-c-name { width: 34mm; }
.ps-c-sum { width: 13mm; }
.ps-table .ps-name { text-align: left; padding-left: 5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ps-table thead th { font-weight: 500; color: var(--ink-2); background: #fff; }
.ps-table thead th b { display: block; color: var(--ink); font-size: 12px; }
.ps-wd { display: block; font-size: 9px; text-transform: capitalize; }
.ps-hol { display: block; font-size: 9px; line-height: 1.15; white-space: normal; }
.ps-table .off { background: var(--subtle); }
.ps-table .hol { background: var(--hol); }
.ps-table td.shift-morning { background: var(--sh-morning); } .ps-table td.shift-afternoon { background: var(--sh-afternoon); } .ps-table td.shift-evening { background: var(--sh-evening); }
.ps-table td span, .ps-table td small { display: block; line-height: 1.2; color: var(--sh-ink); }
.ps-table td small { color: var(--ink-2); font-size: 10px; }
.ps-abs { font-weight: 700; color: var(--soon-ink) !important; font-size: 10px; }
.ps-table .ps-sum { text-align: right; padding-right: 5px; }
.ps-table tfoot td, .ps-table tfoot th { font-weight: 600; background: var(--subtle); }
.print-sheet.month .ps-table td { height: 11mm; font-size: 10px; }
.print-sheet.month .ps-table thead th b { font-size: 11px; }
.print-sheet.week .ps-table { font-size: 13px; }
.print-sheet.week .ps-table td { height: 15mm; }
.print-sheet.week .ps-table td span { font-weight: 600; }
.print-sheet.week .ps-c-name { width: 45mm; }
/* Many people: rows shrink so the sheet still fits one A4 page (about 140 mm for rows). */
.print-sheet.dense .ps-table td, .print-sheet.dense .ps-table th { height: auto; padding-top: 0; padding-bottom: 0; }
.print-sheet.dense .ps-table tbody td, .print-sheet.dense .ps-table tbody th { height: calc(140mm / var(--rows)); }
.print-sheet.week.dense .ps-table { font-size: 11px; }
.print-sheet.week.dense .ps-table td small { display: none; }
.print-sheet.month.dense .ps-table td { font-size: 9px; letter-spacing: -.2px; }
.ps-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4mm; font-size: 10px; color: var(--muted); }
.ps-foot span:last-child { margin-left: auto; }
@media print {
  .print-page { background: #fff; }
  .print-bar { display: none; }
  .print-sheet { width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .ps-table tr { break-inside: avoid; }
  .ps-table thead { display: table-header-group; }
}
@media (max-width: 760px) {
  .print-sheet { padding: 12px; }
  .ps-table { min-width: 860px; }
}
@media (max-width: 720px) {
  .staff-grid, .staff-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .staff-review { grid-template-columns: minmax(0, 1fr); }
  .review-file { position: static; }
  .staff-head, .staff-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 64px; }
}

/* Send an invoice to the customer by e-mail */
textarea.field-input { height: auto; min-height: 220px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
textarea.field-input.notes-input { min-height: 84px; }
.test-mode { background: var(--soon-bg); color: var(--soon-ink); border-radius: 10px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.test-mode strong { font-weight: 700; }
.sent-mail summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sent-mail pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 8px 0 0; color: var(--ink-2); }
.send-mail-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Remembered invoice line items (settings) */
.saved-item summary { list-style: none; cursor: pointer; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.saved-item summary::-webkit-details-marker { display: none; }
.saved-item[open] summary { margin-bottom: 10px; }
/* Settings: a link card to the module picker. */
.settings-link { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: inherit; }
.settings-link:hover { border-color: var(--accent); }
.settings-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; min-height: 40px; }
.settings-block > summary::-webkit-details-marker { display: none; }
.settings-block > summary:hover .section-label { color: var(--accent-ink); }
/* Settings page: four folding sections (Firma i zespół, Faktury i podatki, Moje
   ustawienia, Zaawansowane), each a header row with an icon tile; the cards inside
   carry a small line icon of their own. */
.settings-section { display: flex; flex-direction: column; }
.settings-section > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; list-style: none; min-height: 58px; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary:hover { border-color: var(--field); }
.settings-section > summary .option-body { flex: 1; }
.settings-section > summary .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-section[open] > summary .settings-chev { transform: rotate(180deg); }
.settings-section-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.settings-section-ico { flex: none; box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-soft); fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-section-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px 18px; margin-left: 17px; border-left: 2px solid var(--line); }
.settings-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-link .option-body, .settings-block > summary .option-body { flex: 1; }
.settings-link:hover .settings-ico, .settings-block > summary:hover .settings-ico { stroke: var(--accent-ink); }
@media (max-width: 600px) {
  .settings-section-body { padding-left: 10px; margin-left: 8px; }
  .settings-section > summary { padding: 10px 12px; }
}
.settings-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.settings-block[open] > summary { margin-bottom: 8px; }
.settings-block:not([open]) { gap: 0; }
.settings-block[open] > summary .settings-chev { transform: rotate(180deg); }
.cat-edit .paid-row { gap: 20px; }
/* Company bank accounts: the account picker (pay, bank statement) and the settings list */
.acct-pick { display: flex; gap: 6px; margin: 0 -4px; padding: 2px 4px; }
.acct-scroll { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.acct-scroll::-webkit-scrollbar { display: none; }
.acct-pick.has-all .acct-scroll { padding-left: 6px; border-left: 1px solid var(--line); margin-left: 0; }
.acct-all { flex: none; }
.acct-add { align-items: center; padding: 7px 14px; color: var(--accent); background: transparent; border: 1px dashed var(--field); }
.acct-add:hover { color: var(--accent-ink); border-color: var(--accent); }
.acct-chip { flex: none; display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink-2); background: var(--chip); border: 1px solid transparent; border-radius: 10px; padding: 7px 12px; min-height: 44px; justify-content: center; }
.acct-chip b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.acct-chip .muted { font-size: 12px; white-space: nowrap; }
.acct-chip .mono { font-size: 12px; }
.acct-chip[aria-current="true"] { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.acct-chip:hover { color: var(--ink); border-color: var(--field); }
.acct-cur { font-weight: 600; color: var(--chip-ink); }
.pay-switch { font-size: 14px; font-weight: 600; }
.tx-acct { display: inline-block; font-size: 11px; font-weight: 600; color: var(--chip-ink); background: var(--chip); border-radius: 6px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; }
.acct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-list > li { border-top: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.acct-list > li:first-child { border-top: none; padding-top: 0; }
.pulled-range { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pulled-gap { color: var(--warn); }
.acct-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.acct-edit summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.acct-edit summary::-webkit-details-marker { display: none; }
.acct-edit[open] summary { margin-bottom: 8px; }
@media (min-width: 900px) { .home-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
select.text-input { font-family: var(--font); font-size: 15px; }
.logo-preview { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; justify-content: flex-start; }
.logo-preview img { max-height: 64px; max-width: 100%; object-fit: contain; }
.doc-head.has-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; }
.doc-head-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.doc-logo { display: flex; align-items: center; justify-content: flex-end; max-width: min(45vw, 280px); }
.doc-logo img { display: block; height: 100%; max-height: 150px; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) { .doc-head.has-logo { grid-template-columns: minmax(0, 1fr); gap: 10px; } .doc-logo { order: -1; max-width: 100%; } .doc-logo img { height: auto; max-height: 72px; } }
.rate-compare { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rate-compare li { display: grid; grid-template-columns: minmax(120px, auto) auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); }
.rate-compare li.used { border-color: var(--accent); background: var(--surface); color: var(--ink); font-weight: 500; }
.rate-compare li:not(.used) .pill { opacity: .75; }
.rate-compare .muted { font-size: 12px; font-weight: 400; }
@media (max-width: 520px) { .rate-compare li { grid-template-columns: 1fr auto; } .rate-compare li .muted { grid-column: 1; } }
.side-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 12px); margin: 10px 6px 2px; padding: 12px 6px 8px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-align: left; }
.side-section:hover { color: var(--ink); }
.side-section svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.side-section[aria-expanded="true"] .side-section-chev { transform: rotate(180deg); }
.side-section .side-section-icon { width: 20px; height: 20px; transition: none; }
.side-section-label { flex: 1; }
.side-section-body { display: flex; flex-direction: column; gap: 2px; }
.side-section-body[hidden] { display: none; }
.side-divider { margin: 10px 10px 6px; border-top: 1px solid var(--line); }
.flash.flash-float { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; margin: 0; max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 6px 24px rgba(var(--shadow), .18); transition: opacity .4s; }
.flash.flash-gone { opacity: 0; pointer-events: none; }

/* "Dla księgowej": export for a period and bank statement files */
.acc-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-quick .pill { text-decoration: none; }
.acc-period, .acc-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.acc-period .text-input, .acc-filter .text-input { font-family: var(--font); width: auto; min-width: 150px; height: 40px; }
.acc-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-downloads .btn { height: 44px; }
.acc-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.acc-keep { padding: 10px 12px; border-radius: 10px; background: var(--subtle); color: var(--ink-2); font-size: 13px; }
.acc-upload { display: flex; flex-direction: column; gap: 10px; }
.acc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.acc-fields .text-input { font-family: var(--font); height: 44px; }
.acc-fields .acc-wide { grid-column: 1 / -1; }
.acc-month { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.acc-month-name { font-weight: 600; text-transform: capitalize; }
.acc-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acc-files li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; }
.acc-files li a { overflow-wrap: anywhere; }
.acc-files .btn.ghost { height: 34px; font-size: 13px; padding: 0 10px; white-space: nowrap; }
@media (max-width: 600px) { .acc-downloads .btn { flex: 1 1 100%; } }
/* "Moje dane": accountant's files month by month */
.md-year > summary { cursor: pointer; padding: 6px 0; }
.md-month { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.md-month-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-links { display: flex; flex-wrap: wrap; gap: 6px; }
.md-links .btn { height: 36px; }
.md-odd { flex-basis: 100%; order: 3; }

/* Trial countdown / overdue payment, above every company page (ksefapp.billing). */
.plan-banner { margin: 0 auto; max-width: 720px; padding: 8px 16px; font-size: 14px; background: var(--accent-soft-2); color: var(--accent-ink); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.plan-banner a { color: inherit; font-weight: 600; }
.plan-banner.late { background: var(--late-bg); color: var(--late-ink); }

/* Owner panel (/panel) */
.op .op-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op .op-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.op .op-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.op .op-alert { border-color: var(--warn); }
.op .op-alert-text { color: var(--late-ink); background: var(--late-bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.op .law-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.op .law-row a { overflow-wrap: anywhere; }
.op .law-sources { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.op .rate-form { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.op .rate-form label { display: grid; gap: 4px; font-size: 13px; }
.op .rate-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.op .rate-form .btn { justify-self: start; }
.op .op-bars { display: flex; align-items: flex-end; gap: 2px; height: 80px; }
.op .op-bars-weeks { gap: 6px; height: 64px; }
.op .op-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.op .op-bar span { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.op .op-bar small { font-size: 11px; color: var(--muted); }
.op .op-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.op .op-sub { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.op .op-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); }
.op .op-line span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op .op-table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.op .op-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.op .op-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px 6px 0; white-space: nowrap; }
.op .op-table td { border-top: 1px solid var(--line); padding: 8px 8px 8px 0; vertical-align: top; }
.op .op-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op .op-table td:first-child { min-width: 150px; }
.op .op-people-row > td { border-top: 0; padding-top: 0; }
.op .op-people summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.op .op-people .op-table-wrap { margin: 6px 0 4px; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.op .op-fail { color: var(--late-ink); }
.op .disk-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--subtle-2); border: 1px solid var(--line); margin: 4px 0 12px; }
.op .disk-bar span { display: block; height: 100%; min-width: 0; }
.op .disk-app { background: var(--neutral-bar); }
.op .disk-users { background: var(--accent); }
.op .disk-free { background: var(--subtle-2); border: 1px solid var(--field); }
.op .disk-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 8px; }
.op .disk-legend > div { display: flex; gap: 8px; align-items: flex-start; }
.op .disk-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-top: 5px; }
.op .disk-firm { align-items: center; }
.op .disk-firm span:first-child { flex: 1 1 auto; min-width: 0; }
.op .disk-firm span:last-child { flex: 0 0 72px; text-align: right; font-variant-numeric: tabular-nums; }
.op .disk-bar .disk-users { min-width: 3px; }
.op .disk-mini { flex: 0 0 30%; height: 6px; border-radius: 3px; background: var(--subtle-2); overflow: hidden; }
.op .disk-mini span { display: block; height: 100%; background: var(--accent); }
.op .op-firm-row td { border-top: 0; padding-top: 0; color: var(--muted); }
.op .op-firm-row td:first-child { padding-left: 14px; }

/* Categories for many vendors: ticked on the list, or by PKD code. */
.pick-row { display: flex; gap: 10px; align-items: flex-start; }
.vendor-pick { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.bulk-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; position: sticky; top: 0; z-index: 2; }
.bulk-bar .cat-select { max-width: 260px; }
/* Searchable category list (data-cat-pick in app.js): a button, then a search box on top. */
.cat-pick { position: relative; flex: 1 1 220px; max-width: 320px; }
.bulk-bar .cat-pick .cat-select { max-width: none; }
.cat-pick .cat-select.wide { max-width: none; }
.cat-pick:has(> .wide) { max-width: 360px; }
.stack > .cat-pick { flex: none; width: 100%; }
.cat-pick-btn { display: block; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 26px; background: var(--surface) no-repeat right 10px center / 10px 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); }
.cat-pick-btn.empty { color: var(--muted); }
.cat-pick-panel { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: max(100%, 280px); max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--field); border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--shadow), .14); padding: 6px; }
.cat-pick-search { width: 100%; height: 40px; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: var(--ground); border: 1px solid var(--field); }
.cat-pick-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.cat-pick-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; }
.cat-pick-head { font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; padding: 8px 8px 4px; }
.cat-pick-list [role="option"] { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.cat-pick-list [role="option"].active, .cat-pick-list [role="option"]:hover { background: var(--accent-soft); }
.cat-pick-list [aria-selected="true"] { font-weight: 600; }
.cat-pick-add { color: var(--accent-ink); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; }
.cat-pick-foot { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--accent); text-decoration: none; }
.cat-pick-foot:hover { background: var(--accent-soft); border-radius: 7px; }
.cat-list-add { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cat-list .cat-manage-row .vendor-pick { margin-top: 3px; flex: none; }
.cat-noinv { flex: none; font-size: 13px; white-space: nowrap; }
.cat-noinv label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cat-renamed { color: var(--muted); }
.cat-list > li[hidden] { display: none; }
.bulk-bar .link-btn { align-self: center; }
@media (max-width: 600px) { .cat-pick { flex-basis: 100%; max-width: none; } .cat-pick-panel { width: 100%; } }
/* Vendors offered while the seller is typed in on the scanned-invoice form (email_doc.html). */
.hint-host { position: relative; }
.seller-hints { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--surface); border: 1px solid var(--field); border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--shadow), .14); max-height: min(320px, 50vh); overflow-y: auto; }
.seller-hints [role="option"] { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.seller-hints [role="option"].active, .seller-hints [role="option"]:hover { background: var(--accent-soft); }
.seller-hints .hint-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.seller-hints .hint-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-all { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.undo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.undo-bar form { margin: 0; }
.vendor-offer { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px solid rgba(var(--shadow), .12); }
.vendor-offer-text { margin: 0; flex-basis: 100%; }
.vendor-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vendor-offer .btn.small { height: auto; min-height: 32px; padding: 6px 12px; white-space: normal; text-align: left; }
.pkd-section > summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.pkd-section > summary::-webkit-details-marker { display: none; }
.pkd-tree { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--line); }
.pkd-tree.top { padding-left: 0; border-left: 0; margin-top: 8px; }
.pkd-tree li { padding: 6px 0; }
.pkd-tree li:target > .pkd-row { background: var(--accent-soft); border-radius: 6px; }
.pkd-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pkd-code { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 52px; }
.pkd-name { flex: 1 1 220px; min-width: 0; gap: 0; }
.pkd-state { font-size: 14px; white-space: nowrap; }
.pkd-state.rule { font-weight: 600; }
.pkd-edit { margin: 4px 0 0 64px; }
.pkd-edit form { margin: 6px 0; }
.pkd-any { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
@media (max-width: 640px) {
  .pkd-edit { margin-left: 0; }
  .pkd-state { white-space: normal; }
}
.bank-cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 220px; gap: 16px; align-items: center; padding: 12px 16px; }
.bank-cat-row + .bank-cat-row { border-top: 1px solid var(--line); }
.bank-cat-row .num { text-align: right; white-space: nowrap; }
.bank-cat-row .num.in { color: var(--done-ink); }
.bank-cat-title { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .bank-cat-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bank-cat-row > .stack:last-child { grid-column: 1 / -1; padding-left: 28px; }
}
.line-party { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; }
.line-party .cat-edit { flex-basis: 100%; }
.line-cat-link { font-size: 13px; }

/* ---------------------------------------------------------------- Chat (Wiadomości) */
.side-badge { flex: none; margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-actions form { margin: 0; }
.acc-form .field-input { max-width: 420px; }

.chat-pane { gap: 12px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-head h2 { margin: 0; }
.chat-list { display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-meta { font-size: 12px; color: var(--muted); }
.chat-meta b { color: var(--ink-2); font-weight: 600; }
.chat-who { font-size: 12px; opacity: .72; white-space: nowrap; }
.chat-bubble { padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.side-firm .chat-bubble { background: var(--note-green-bg); color: var(--note-green-ink); }
.chat-msg.side-office .chat-bubble { background: var(--note-purple-bg); color: var(--note-purple-ink); }
.chat-msg.note-green .chat-bubble { background: var(--note-green-bg); color: var(--note-green-ink); } .note-dot.note-green { background: var(--note-green-dot); }
.chat-msg.note-purple .chat-bubble { background: var(--note-purple-bg); color: var(--note-purple-ink); } .note-dot.note-purple { background: var(--note-purple-dot); }
.chat-msg.note-blue .chat-bubble { background: var(--note-blue-bg); color: var(--note-blue-ink); } .note-dot.note-blue { background: var(--note-blue-dot); }
.chat-msg.note-pink .chat-bubble { background: var(--note-pink-bg); color: var(--note-pink-ink); } .note-dot.note-pink { background: var(--note-pink-dot); }
.chat-msg.note-sand .chat-bubble { background: var(--note-sand-bg); color: var(--note-sand-ink); } .note-dot.note-sand { background: var(--note-sand-dot); }
.chat-msg.note-graphite .chat-bubble { background: var(--note-graphite-bg); color: var(--note-graphite-ink); } .note-dot.note-graphite { background: var(--note-graphite-dot); }
.chat-msg.note-peach .chat-bubble { background: var(--note-peach-bg); color: var(--note-peach-ink); } .note-dot.note-peach { background: var(--note-peach-dot); }
.chat-msg.note-olive .chat-bubble { background: var(--note-olive-bg); color: var(--note-olive-ink); } .note-dot.note-olive { background: var(--note-olive-dot); }
.note-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.chat-msg.side-help .chat-bubble { background: var(--chat-help-bg); color: var(--chat-help-ink); }
.chat-msg.mine .chat-bubble { border-bottom-right-radius: 4px; }
.chat-msg:not(.mine) .chat-bubble { border-bottom-left-radius: 4px; }
.chat-del { display: inline; margin: 0 0 0 8px; }
.chat-like { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.chat-like-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 12px; height: 26px; padding: 0 8px; font: inherit; font-size: 13px; cursor: pointer; opacity: .75; }
.chat-like-btn:hover:not(:disabled), .chat-like-btn.on { opacity: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chat-like-btn:disabled { cursor: default; }
.chat-react > summary { list-style: none; display: inline-flex; align-items: center; gap: 1px; user-select: none; }
.chat-react > summary::-webkit-details-marker { display: none; }
.chat-react[open] > summary { opacity: 1; border-color: var(--accent); }
.chat-react-pick { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.chat-react-opt { border: 0; background: none; font-size: 19px; line-height: 1; width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer; }
.chat-react-opt:hover, .chat-react-opt:focus-visible { background: var(--accent-soft); }
.chat-empty { font-size: 14px; }
.chat-form { display: flex; flex-direction: column; gap: 8px; margin: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.chat-input { min-height: 64px; font-size: 15px; }
.chat-send { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-send .muted { font-size: 12px; }
.chat-btn { height: 40px; flex: none; }
.chat-send-btns { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* Emoji button beside note boxes and its pop-up grid (partials/emoji_picker.html).
   The grid hangs from the button row, so on a phone it stays inside the card. */
.emoji-wrap { display: inline-flex; }
.emoji-btn { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 20px; line-height: 1; cursor: pointer; }
.emoji-btn:hover, .emoji-btn:focus-visible, .emoji-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.emoji-pop { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30; width: 296px; max-width: calc(100vw - 32px); max-height: min(400px, 60vh); overflow-y: auto; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
.emoji-pop[hidden] { display: none; }
.emoji-wrap.left .emoji-pop { right: auto; left: 0; }
.emoji-group { display: block; margin: 4px 2px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-opt { border: 0; background: none; font-size: 21px; line-height: 1; aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 8px; cursor: pointer; }
.emoji-opt:hover, .emoji-opt:focus-visible { background: var(--accent-soft); outline: none; }
.chat-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.chat-row.unread { border-color: var(--accent); }
.chat-row.unread strong { color: var(--accent-ink); }
.chat-row-detail, .chat-row-last { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-last { color: var(--ink-2); }
.chat-row-side { gap: 4px; align-items: flex-end; flex: none; font-size: 12px; }
.chat-row-icon { flex: none; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--chat-help-bg); color: var(--chat-help-ink); font-weight: 700; }
.chat-help-row { justify-content: flex-start; }
.chat-help-row .side-badge { margin-left: auto; }
.faq { gap: 4px; }
.faq h2 { margin: 0 0 4px; }
.faq-item { border-top: 1px solid var(--line); padding: 10px 0; }
.faq-item:first-of-type { border-top: none; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.faq-item p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.faq-item .howto-video { margin: 10px 0 4px; }
.faq-film { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); vertical-align: 1px; }
.tx-chat-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; align-self: flex-start; }
.tx-chat-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-chat-link .side-badge { margin-left: 2px; }

/* The invoice page with its conversation: below the invoice on phones, beside it on
   wide screens, where it stays in view while the invoice scrolls. */
.chat-side { padding: 0 16px 16px; }
@media (min-width: 1100px) {
  .wrap.with-chat { max-width: 1200px; }
  .with-chat .detail-cols { display: grid; grid-template-columns: minmax(0, 720px) minmax(320px, 1fr); align-items: start; }
  .with-chat .chat-side { position: sticky; top: 64px; padding: 16px 16px 16px 0; }
  .with-chat .chat-side .chat-pane { max-height: calc(100vh - 140px); }
  .with-chat .chat-side .chat-list { overflow-y: auto; min-height: 60px; }
}
.acc-more { display: flex; flex-direction: column; gap: 12px; }
.acc-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.acc-more[open] > summary { margin-bottom: 4px; }
.acc-more > .field, .acc-more > .muted { margin-top: 10px; }

/* Long rule lists fold away; the heading keeps the count. */
.rules-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rules-fold > summary::-webkit-details-marker { display: none; }
.rules-fold > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--ink-2); font-weight: 700; transition: transform .15s; }
.rules-fold[open] > summary::before { transform: rotate(90deg); }
.rules-fold > summary h2 { margin: 0; }
.rules-fold[open] > summary { margin-bottom: 8px; }
.note-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.note-colour-name { display: inline-flex; align-items: center; gap: 8px; }
.op .op-bar.slow span { background: var(--warn); }
.op .op-bad { color: var(--late-ink); }
.op .op-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.op .op-help summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.op .op-help ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }

/* Scans matched to a party and a bank line before they are added (scan_matches.html). */
.scan-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; position: sticky; top: 0; z-index: 2; background: var(--ground); padding: 8px 0; }
.scan-match { display: flex; flex-direction: column; gap: 10px; }
.scan-match.sure { border-left: 3px solid var(--done-ink); }
.scan-pick { display: flex; align-items: flex-start; gap: 12px; min-width: 0; cursor: pointer; }
.scan-pick input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.scan-field { display: flex; flex-direction: column; gap: 4px; }
.scan-field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.scan-field-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; min-width: 0; }
.scan-field-body select { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.scan-change > summary { font-size: 13px; }
.scan-change form { margin-top: 6px; }
/* "i" at the top right of a Finanse chart: its notes on hover or focus. */
.fin-info { position: relative; display: inline-flex; }
.fin-info-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); background: none; color: var(--muted); font: italic 600 11px/1 Georgia, serif; padding: 0; cursor: help; }
.fin-info:hover .fin-info-btn, .fin-info-btn:focus-visible { color: var(--ink); border-color: var(--ink); }
.fin-legend .fin-info-pop, .fin-info-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(360px, 80vw); padding: 10px 12px; border-radius: 8px; background: var(--card, #fff); border: 1px solid var(--grid); box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 12px; line-height: 1.45; color: var(--ink-2); text-align: left; white-space: normal; }
.fin-info-pop p { margin: 0 0 6px; }
.fin-info-pop p:last-child { margin-bottom: 0; }
/* The legend's "span { display: inline-flex }" must not open the notes (it did, so they
   sat over the chart). Only the hovered icon opens them; a click leaves nothing stuck over the chart
   (keyboard focus still opens them). The icon itself shows only while the chart is
   hovered, except on touch screens, which cannot hover. */
.fin-legend .fin-info:hover .fin-info-pop, .fin-legend .fin-info:has(.fin-info-btn:focus-visible) .fin-info-pop { display: block; }
/* The same "i" beside a Finanse card's title (Wpływy, Wydatki, Saldo, Płynność). */
.fin-kpi { position: relative; }
.fin-kpi > .fin-info { position: absolute; top: 10px; right: 10px; }
.fin-kpi-title { padding-right: 22px; }
.fin-kpi .fin-info:hover .fin-info-pop, .fin-kpi .fin-info:has(.fin-info-btn:focus-visible) .fin-info-pop { display: block; }
.fin-kpis > .fin-kpi:first-child .fin-info-pop { right: auto; left: 0; }
@media (hover: hover) {
  .fin-chart-card .fin-info { opacity: 0; transition: opacity .15s; }
  .fin-chart-card:hover .fin-info, .fin-info:has(.fin-info-btn:focus-visible) { opacity: 1; }
}
/* Finanse: what falls due within a week, above everything else. */
.fin-due { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 10px; background: var(--soon-bg); color: var(--soon-ink); font-size: 14px; }
.fin-due-row { display: flex; gap: 8px; align-items: flex-start; }
.fin-due-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fin-due-when { opacity: .8; }
.fin-due-late { display: block; font-size: 12.5px; opacity: .85; }
/* ZUS i podatki (ksefapp.tax_payments) */
.tp-list { gap: 0; }
.tp-row { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.tp-row:first-child { border-top: 0; padding-top: 0; }
.tp-row:last-child { padding-bottom: 0; }
.tp-main { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; font-size: 14px; }
.tp-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex-shrink: 0; max-width: 55%; }
.tp-amount .pill { white-space: normal; }
.tp-amount > div:first-child { font-weight: 600; }
.tp-edit summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.tp-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; }
.tp-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-form-row input { flex: 1 1 140px; min-width: 0; }
.pay-tax .pay-account { user-select: all; }
.tp-older { display: flex; flex-direction: column; gap: 12px; }
.tp-older > summary { cursor: pointer; list-style: revert; }
.tp-older[open] > summary { margin-bottom: 8px; }
.fin-due-row.overdue { color: var(--late-ink); }
.fin-due-link { color: inherit; font-weight: 600; white-space: nowrap; }
.fin-due-foot { font-size: 12.5px; padding-top: 4px; border-top: 1px solid var(--soon-line); }
.fin-due-foot a { color: inherit; font-weight: 600; }

/* Invoice page: everything from the KSeF file (partials/ksef_rows.html). */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.kv dd.pre { white-space: pre-line; }
.ksef-section + .ksef-section { border-top: 1px solid var(--line); padding-top: 10px; }
.ksef-section-title { font-weight: 600; font-size: 14px; }
.line-extras { font-size: 12px; display: flex; flex-wrap: wrap; gap: 0 10px; }
.vat-bands { width: 100%; border-collapse: collapse; font-size: 13px; }
.vat-bands th { color: var(--muted); font-weight: 500; text-align: right; padding: 2px 0; }
.vat-bands td { text-align: right; padding: 2px 0; font-variant-numeric: tabular-nums; }
.vat-bands th:first-child, .vat-bands td:first-child { text-align: left; }
.vat-bands td + td, .vat-bands th + th { padding-left: 12px; white-space: nowrap; }
@media (max-width: 480px) { .kv { grid-template-columns: minmax(0, 1fr); } .kv dd { margin-bottom: 4px; } }
.pay-line { display: grid; grid-template-columns: 82px minmax(0, max-content) auto; justify-content: start; align-items: center; gap: 0 10px; }
.pay-line .mono { overflow-wrap: anywhere; }
.pay-line .copy-btn { font-size: 13px; align-self: center; min-height: 0; }
@media (max-width: 480px) {
  .pay-line { grid-template-columns: minmax(0, max-content) auto; margin-top: 4px; }
  .pay-line > .muted { grid-column: 1 / -1; font-size: 12px; }
  .pay-line .copy-btn { min-height: 32px; }
}
.own-party summary { cursor: pointer; list-style-position: inside; }
.own-party summary .muted { font-size: 14px; }
.own-party .kv { margin-top: 6px; }

/* Overtime bank and day-off requests */
.ot-hours { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; }
.ot-hours.plus { color: var(--done-ink); }
.ot-hours.minus { color: var(--ink-2); }
.ot-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ot-hint { justify-content: flex-end; font-weight: 400; }
.ot-week { width: 100%; border-collapse: collapse; font-size: 14px; }
.ot-week th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; padding: 0 6px 6px; border-bottom: 1px solid var(--line); }
.ot-week td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.ot-week tr.off td:first-child { color: var(--muted); }
.ot-week input { height: 38px; border: 1px solid var(--field); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); width: 100%; box-sizing: border-box; }
.ot-week input.h { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.ot-week tfoot td { font-weight: 600; border-top: 2px solid var(--line); }
.ot-week .num { text-align: right; }
.ot-approve li { flex-wrap: wrap; }
.btn.small { height: 32px; padding: 0 12px; font-size: 14px; }
@media (max-width: 720px) {
  .ot-week .hint-col { display: none; }
}
.ot-reject summary { list-style: none; cursor: pointer; }
.ot-reject summary::-webkit-details-marker { display: none; }
.ot-reject[open] { flex-basis: 100%; }
.staff-details .section-label { margin-top: 14px; }
.ot-allow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }

/* ---------------------------------------------------------------- Tutorial (tour.js)
   The page dims, the place being explained stays lit, and a box next to it says what
   it is. Clicks on the dimmed page do nothing until the tour ends or is skipped. */
.tour-shade { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.tour-shade.on { background: rgba(var(--shadow), .55); }
.tour-hole { position: fixed; z-index: 1001; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(var(--shadow), .55); transition: left .2s, top .2s, width .2s, height .2s; }
.tour-pop { position: fixed; z-index: 1002; width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 34px rgba(var(--shadow), .28); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.tour-pop.docked { left: 12px !important; right: 12px; width: auto; }
.tour-count { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.tour-count:empty { display: none; }
.tour-title { margin: 0; font-size: 16px; font-weight: 700; }
.tour-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tour-actions .link-btn { font-size: 13px; color: var(--muted); align-self: center; }
.tour-nav { display: flex; gap: 8px; }
.tour-nav .btn { height: 40px; font-size: 14px; padding: 0 14px; }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }

/* One small tip in the corner, above the news ticker or the phone bar. */
.hint-card { position: fixed; right: 16px; bottom: 56px; z-index: 20; width: min(340px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start; padding: 12px 8px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: 0 6px 22px rgba(var(--shadow), .14); font-size: 13.5px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.hint-card.on { opacity: 1; transform: none; }
.hint-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 4px; }
.hint-actions:not(:has(> :not([hidden]))) { display: none; }
.hint-go { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.hint-go:hover { text-decoration: underline; }
.hint-body .hint-actions .link-btn { margin-top: 0; color: var(--accent-ink); }
.hint-card > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hint-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hint-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.hint-body .link-btn { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.hint-card .icon-btn { width: 32px; height: 32px; border: none; font-size: 20px; color: var(--muted); }
@media (max-width: 759px) {
  .hint-card { left: 12px; right: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hint-body .link-btn { min-height: 0; }
}

/* ---------------------------------------------------------------- Questions (faq.html) */
.faq-search { display: flex; gap: 8px; }
.faq-search .text-input { flex: 1; min-width: 0; font-family: var(--font); }
.faq-topic { margin: 14px 0 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.faq-item .faq-link { display: inline-block; margin-top: 6px; font-size: 14px; }
.faq-none { color: var(--muted); }
.faq-again { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Szczegóły z banku: every field the bank sent for a line */
.bank-details { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 6px 16px; margin: 0; }
.bank-details dt { color: var(--muted); }
.bank-details dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bank-details { grid-template-columns: 1fr; gap: 2px; }
  .bank-details dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- Lista płac */
.pay-months { align-items: center; }
.pay-month { font-size: 16px; min-width: 140px; text-align: center; }
.pay-files { flex-wrap: wrap; margin-top: 12px; }
.pay-net { text-align: right; }
.pay-net b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pay-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.pay-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pay-lines { width: 100%; border-collapse: collapse; font-size: 14px; align-self: start; }
.pay-lines td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.pay-lines td .muted { font-size: 12px; }
.pay-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 12px; }
.pay-lines tr.sum td { font-weight: 600; border-top: 2px solid var(--line); }
.pit-scroll { overflow-x: auto; margin-top: 8px; }
.pit-scroll .pay-lines { min-width: 560px; }
.pay-lines th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 6px 8px 6px 0; }
.pay-lines th.num { text-align: right; }
.pit-log td { padding-right: 8px; }
.pit-followed summary { cursor: pointer; font-size: 12px; }
.pay-sheet .pay-grid td { padding: 3px 0; vertical-align: middle; }
.pay-sheet .pay-grid td:first-child { font-size: 13px; }
.pay-sheet .pay-grid input { width: 112px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.pay-sheet .pay-grid output { display: inline-block; min-width: 112px; padding: 4px 7px; text-align: right; }
.pay-sheet .pay-grid tr.typed input { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pay-sheet .pay-grid tr.typed td:first-child::after { content: " ✎"; color: var(--muted); }
.pay-grid .hint-btn, .tick .hint-btn { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; line-height: 16px; cursor: pointer; vertical-align: 1px; }
.pay-grid .hint-btn[aria-expanded="true"], .tick .hint-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.pay-grid label[title] { cursor: help; }
.field.tick { display: grid; grid-template-columns: minmax(0, max-content) auto 1fr; align-items: center; gap: 6px 8px; }
.field.tick > label { display: flex; align-items: center; gap: 8px; }
.field.tick > label input { flex: none; }
.tick-hint { grid-column: 1 / -1; font-size: 12px; font-weight: 400; color: var(--ink-2); background: var(--accent-soft); padding: 6px 8px; border-radius: 6px; line-height: 1.45; }
.rules-list { display: flex; flex-direction: column; }
.rules-list .rule { border-top: 1px solid var(--line); padding: 8px 0; }
.rules-list .rule summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.rules-list .rule p { margin: 6px 0 2px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pay-grid tr.hint-row td { font-size: 12px; color: var(--ink-2); background: var(--accent-soft); padding: 6px 8px; border-radius: 6px; border-top: 0; }
.pay-sheet.busy output, .pay-sheet.busy input:not(:focus) { opacity: .6; }

.pay-payees li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pay-payees li .field { margin: 0; flex: 1 1 200px; }
.pay-payees li .num { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .pay-cols { grid-template-columns: minmax(0, 1fr); }
}
/* JPK markers (ksefapp.jpk_markers) */
.flag.jpk { background: var(--info-bg); color: var(--info-ink); }
.flag.jpk.check { background: var(--check-bg); color: var(--check-ink); }
.flag.jpk.bad { background: var(--late-bg); color: var(--late-ink); }
.jpk-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.jpk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jpk-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.jpk-list .jpk-msg { font-size: 13px; color: var(--ink-2); }
.jpk-list .jpk-msg.bad { color: var(--late-ink); }
.jpk-pick { display: flex; gap: 8px; align-items: center; }
.jpk-pick .field-input { width: auto; height: 36px; font-size: 13px; }
.jpk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jpk-table th, .jpk-table td { text-align: left; padding: 6px 8px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.jpk-table .jpk-nr { overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 600px) { .jpk-list li { flex-direction: column; align-items: flex-start; } .jpk-table .jpk-date { display: none; } }

/* Hospitality: bookings calendar (hotel.html), booking, rooms; tint on the schedule */
.cat-pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 10px; white-space: nowrap; background: var(--cat, var(--cat-none)); color: var(--cat-ink, var(--cat-none-ink)); }
.cat-full { --cat: var(--cat-full); --cat-ink: var(--cat-full-ink); --cat-tint: var(--cat-full-tint); }
.cat-partial { --cat: var(--cat-partial); --cat-ink: var(--cat-partial-ink); --cat-tint: var(--cat-partial-tint); }
.cat-self { --cat: var(--cat-self); --cat-ink: var(--cat-self-ink); --cat-tint: var(--cat-self-tint); }
.cat-none { --cat: var(--cat-none); --cat-ink: var(--cat-none-ink); --cat-tint: var(--cat-none-tint); }
.cat-rooms { --cat: var(--cat-rooms); --cat-ink: var(--cat-rooms-ink); --cat-tint: var(--cat-rooms-tint); }
.cat-pill.st-tentative, .cat-pill.st-enquiry { background: repeating-linear-gradient(135deg, var(--cat-tint) 0 6px, var(--surface) 6px 12px); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cat); }
.pill.st-confirmed { background: var(--done-bg); color: var(--done-ink); }
.pill.st-cancelled { text-decoration: line-through; }
.hotel-title { min-width: 150px; text-align: center; text-transform: capitalize; }
.hotel-title.plain { text-transform: none; }
.hotel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hotel-actions .btn { height: 40px; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.hotel-today { width: auto !important; padding: 0 10px !important; font-size: 13px !important; }
.hotel-search-box { position: relative; display: flex; flex: 1 1 240px; min-width: 0; }
.hotel-hit { font-size: 12px; color: var(--muted); font-style: italic; }
/* List filter bar (partials/list_filters.html): tabs, search, pills, + Dodaj filtr. */
.lf { display: flex; flex-direction: column; gap: 10px; }
.lf-tabs { align-self: flex-start; }
.lf-tabs b { font-weight: 700; }
.lf-switches { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lf-search { display: flex; }
.lf-search .hotel-search { height: 44px; border: 1px solid var(--field); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; padding: 0 12px; }
.lf-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lf-pop { position: relative; }
.lf-pop > summary, .lf-sub > summary { list-style: none; cursor: pointer; }
.lf-pop > summary::-webkit-details-marker, .lf-sub > summary::-webkit-details-marker { display: none; }
.lf-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.lf-pill.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 8px; }
.lf-pill.add { border-style: dashed; }
.lf-pill.on.solo { border-radius: 17px; padding-right: 12px; background: var(--surface); color: var(--ink); border-color: var(--line); }
.lf-x { display: inline-grid; place-items: center; min-width: 32px; font-size: 16px; line-height: 1; height: 34px; margin-left: -8px; padding: 0 10px 0 6px; border: 1px solid var(--accent); border-left: 0; border-radius: 0 17px 17px 0; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.lf-x:hover { background: var(--accent); color: var(--surface); }
.lf-clear { font-size: 13px; color: var(--accent); margin-left: 4px; }
.lf-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--shadow), .14); padding: 8px; min-width: 240px; max-width: min(560px, calc(100vw - 32px)); }
.lf-title { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 6px 2px; text-transform: uppercase; letter-spacing: .03em; }
.lf-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; }
.lf-seg a { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lf-seg a:hover { background: var(--chip); }
.lf-seg a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lf-extra { display: flex; justify-content: space-between; gap: 8px; padding: 2px 8px 4px; font-size: 13px; }
.lf-extra a { color: var(--accent); }
.lf-menu { display: flex; flex-direction: column; gap: 2px; min-width: 260px; }
.lf-sub > summary { padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.lf-sub > summary:hover, .lf-sub[open] > summary { background: var(--chip); }
.lf-found { font-size: 13px; color: var(--muted); }
.lf-pills .download summary { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 17px; font-size: 14px; }
.lf-pair { display: inline-flex; align-items: center; max-width: 100%; }
@media (max-width: 700px) { .lf-sort-hint { display: none; } }
.lf-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 6px; }
.lf-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.lf-form .text-input { width: 110px; }
.lf-panel .lf-seg { max-height: 50vh; overflow-y: auto; }
@media (max-width: 600px) { .lf-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 80px; max-width: none; } }
.hotel-more { position: relative; }
.hotel-more summary { list-style: none; cursor: pointer; gap: 6px; }
.hotel-more summary::-webkit-details-marker { display: none; }
.hotel-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(var(--shadow), .12); }
.hotel-more-menu a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.hotel-more-menu a:hover { background: var(--chip); }
.hotel-more-menu small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.hotel-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.hotel-legend a.cat-pill { text-decoration: none; }
.hotel-legend a.cat-pill.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-2); }
.hotel-legend a.cat-pill.off { opacity: .45; }
.hotel-card { padding: 10px; }
.hc { display: block; font-size: 12px; }
.hc-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hc-head div { padding: 4px 8px 6px; font-weight: 600; color: var(--muted); text-align: right; }
.hc-week { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); min-height: 92px; border-top: 1px solid var(--line); row-gap: 2px; }
.hc-week:last-child { border-bottom: 1px solid var(--line); }
.hc-day { grid-row: 1 / -1; border-left: 1px solid var(--line); min-width: 0; }
.hc-day:nth-child(7) { border-right: 1px solid var(--line); }
.hc-day.off { background: var(--subtle); }
.hc-day.outside { background: var(--subtle-2); }
.hc-day.outside .hc-date b { color: var(--muted); font-weight: 500; }
.hc-date { display: flex; justify-content: flex-end; align-items: baseline; gap: 2px; padding: 4px 8px; text-decoration: none; color: var(--ink); }
.hc-date b { font-size: 13px; }
.hc-day.today .hc-date b { color: var(--surface); background: var(--accent); border-radius: 10px; padding: 0 6px; }
.hc-plus { order: -1; margin-right: auto; color: var(--accent); font-weight: 700; opacity: 0; }
a.hc-date:hover .hc-plus, a.hc-date:focus .hc-plus { opacity: 1; }
.hc-pill { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0 2px; padding: 0 8px; border-radius: 7px; background: var(--cat); color: var(--cat-ink); text-decoration: none; font-weight: 600; font-size: 12.5px; line-height: 26px; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--shadow), .12); }
.hc-pill:hover { color: var(--cat-ink); filter: brightness(.95); }
.hc-pill .hc-name { overflow: hidden; text-overflow: ellipsis; }
.hc-pill small { font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.hc-pill.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hc-pill.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hc-pill.st-tentative, .hc-pill.st-enquiry { background: repeating-linear-gradient(135deg, var(--cat-tint) 0 6px, var(--surface) 6px 12px); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cat); }
.hc-pill.st-cancelled { opacity: .5; text-decoration: line-through; }
.hc-pill.clash { outline: 2px solid var(--late-ink); outline-offset: -2px; }
.hotel-clash-mark { color: var(--late-ink); }
.hotel-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hotel-items .empty { padding: 24px 8px; }
.hotel-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-left: 5px solid var(--cat); border-radius: 10px; color: inherit; text-decoration: none; }
.hotel-item:hover { color: inherit; border-color: var(--field); border-left-color: var(--cat); }
.hotel-item.is-cancelled { opacity: .55; }
.hotel-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hotel-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.hotel-phone { display: none; }
.hotel-table-wrap { overflow-x: auto; }
.hotel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hotel-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hotel-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hotel-table td:first-child { border-left: 4px solid var(--cat, transparent); }
.hotel-table .num { text-align: right; white-space: nowrap; }
.hotel-table a { text-decoration: none; color: var(--ink); }
.hotel-table tr.is-cancelled td { opacity: .55; }
.hotel-summary { border-left: 6px solid var(--cat); }
.hotel-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hotel-money div { display: flex; flex-direction: column; gap: 2px; background: var(--subtle-2); border-radius: 10px; padding: 8px 10px; }
.hotel-money b { font-size: 16px; }
.hotel-timeline { list-style: none; margin: 0 0 4px; padding: 0; display: flex; }
.hotel-timeline li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hotel-timeline li + li::before { content: ""; position: absolute; top: 11px; right: calc(50% + 13px); width: calc(100% - 26px); height: 2px; background: var(--line); }
.hotel-timeline li.st-done::before, .hotel-timeline li.st-skip::before { background: var(--cat-self); }
.hotel-timeline .tl-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: var(--surface); font: 700 13px/1 var(--font); display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; }
.hotel-timeline .tl-label { font-size: 12px; line-height: 1.25; color: var(--muted); text-decoration: none; padding: 0 2px; }
.hotel-timeline .st-done .tl-dot { background: var(--cat-self); border-color: var(--cat-self); }
.hotel-timeline .st-done .tl-label { color: var(--ink-2); }
.hotel-timeline .st-next .tl-dot { border-color: var(--cat-partial); background: var(--cat-partial-tint); box-shadow: 0 0 0 4px var(--cat-partial-tint); }
.hotel-timeline .st-next .tl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-partial); }
.hotel-timeline .st-next .tl-label { color: var(--ink); font-weight: 600; }
.hotel-timeline .st-late .tl-dot { background: var(--cat-full); border-color: var(--cat-full); }
.hotel-timeline .st-late .tl-label { color: var(--late-ink); font-weight: 600; }
.hotel-timeline .st-skip .tl-dot { border-style: dashed; border-color: var(--cat-self); color: var(--cat-self); background: var(--surface); }
.hotel-timeline .st-todo .tl-dot, .hotel-timeline .st-todo .tl-label { opacity: .7; }
.hotel-timeline .tl-tip { display: none; position: absolute; top: 34px; z-index: 5; min-width: 150px; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; text-align: left; flex-direction: column; gap: 2px; box-shadow: 0 6px 20px rgba(var(--shadow), .18); }
.hotel-timeline .tl-tip a { color: inherit; font-weight: 600; }
.hotel-timeline li:first-child .tl-tip { left: 0; }
.hotel-timeline li:last-child .tl-tip { right: 0; }
.next-step { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--subtle); color: var(--ink-2); white-space: nowrap; }
.next-step.st-next { border-color: var(--cat-partial); background: var(--cat-partial-tint); color: var(--ink); }
.next-step.st-late { border-color: transparent; background: var(--late-bg); color: var(--late-ink); }
.next-step.st-done { border-color: transparent; background: var(--done-bg); color: var(--done-ink); }
.next-step.own { font-style: italic; }
.hotel-dots { display: flex; gap: 3px; margin-top: 5px; }
.hotel-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--neutral-bar); box-sizing: border-box; }
.hotel-dots .st-done { background: var(--cat-self); border-color: var(--cat-self); }
.hotel-dots .st-next { background: var(--cat-partial); border-color: var(--cat-partial); }
.hotel-dots .st-late { background: var(--cat-full); border-color: var(--cat-full); }
.hotel-dots .st-skip { border-style: dashed; }
.hotel-next { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.hotel-clash { margin: 0; }
.hotel-clash a { color: inherit; font-weight: 600; }
.hotel-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hotel-kind, .hotel-room-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.hotel-choice { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 5px 12px 5px 8px; cursor: pointer; color: var(--ink); font-weight: 500; }
.hotel-choice input { margin: 0; accent-color: var(--accent); }
.hotel-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hotel-choice.cat { padding: 3px 6px 3px 8px; }
.hotel-payments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hotel-payments li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hotel-payments li .stack { flex: 1 1 200px; }
.hotel-pay-actions { display: flex; align-items: center; gap: 10px; margin: 0; }
.hotel-pay-actions .btn.ghost { height: 34px; font-size: 13px; }
.hotel-pay-date { height: 34px; font-size: 13px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.hotel-pay-bank { flex-basis: 100%; font-size: 13px; }
.hotel-pay-link { flex-basis: 100%; font-size: 14px; }
.hotel-pay-link-search { gap: 8px; padding-top: 8px; justify-content: flex-start; }
.hotel-pay-link-search .field { flex: 1 1 180px; min-width: 0; }
.hotel-pay-offer { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.hotel-pay-offer .stack { flex: 1 1 220px; font-size: 13px; }
.hotel-pay-offer .btn { height: 34px; font-size: 13px; }
.hotel-wa-form { gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hotel-wa-form input[type=url] { flex: 1 1 260px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.hotel-wa-due { border-color: var(--accent); }
.hotel-wa-note { padding: 10px 12px; border-radius: 10px; background: var(--done-bg); color: var(--done-ink); font-size: 14px; }
.hotel-wa-note a { color: inherit; font-weight: 600; }
.booking-pay-waiting { display: flex; flex-direction: column; gap: 10px; border-color: var(--accent); }
.booking-pay-waiting h2 { margin: 0; font-size: 15px; }
.booking-pay-waiting > p { margin: 0; font-size: 13px; }
.booking-pay-item { display: flex; flex-direction: column; gap: 6px; }
.booking-pay-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.hotel-add-pay summary { list-style: none; }
.hotel-add-pay summary::-webkit-details-marker { display: none; }
.hotel-add-pay[open] summary { margin-bottom: 8px; }
.hotel-delete { padding: 0 4px; }
.hotel-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.hotel-room-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 700px) {
  .hc { display: none; }
  .hotel-phone { display: flex; }
  .hotel-table-wrap { display: none; }
  .hotel-card { padding: 8px; }
  .hotel-money { grid-template-columns: 1fr; }
  .hotel-timeline .tl-label { display: none; }
  .hotel-timeline li.open .tl-tip { display: flex; }
  .hotel-timeline li.open .tl-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hotel-actions { width: 100%; }
  .hotel-actions .btn { flex: 1; justify-content: center; }
}
/* Grafik: days with guests in, a light tint of the catering colour and the stays' names */
.g-cal-day.stay { background: var(--cat-tint); }
.g-row.stay { background: var(--cat-tint); }
/* Guests in on the Ustaw zmiany grid too: the day column tinted, a stripe in the catering colour on top. */
.time-grid th.stay, .time-grid td.stay { background: var(--cat-tint); }
.time-grid thead th.stay { box-shadow: inset 0 3px 0 var(--cat); }
.time-grid td.stay.absent { background: var(--soon-soft); }
.g-stays { display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; }
.g-stay { display: block; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px; border-left: 3px solid var(--cat); background: var(--surface); color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.g-stay:hover { color: var(--ink); }
.g-legend-stay { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.g-legend-stay i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--cat-tint); box-shadow: inset 0 0 0 1px var(--cat); }
.hotel-form .field .hotel-choice input[type=radio] { width: 16px; height: 16px; padding: 0; border: 0; flex: none; }
.hotel-choice span { white-space: nowrap; }
.hotel-table td:first-child { min-width: 170px; }
.hotel-table td:nth-child(2) { min-width: 110px; }
.hotel-table .pill, .hotel-table .cat-pill { font-size: 11.5px; padding: 3px 8px; }
.hotel-history-lines { margin: 2px 0 0; padding-left: 18px; color: var(--ink); overflow-wrap: anywhere; }
.hotel-history-lines li { margin: 1px 0; }
.hotel-history > .history-row:first-child { border-top: none; padding-top: 0; }
.hotel-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.hotel-pick legend { padding: 0; margin-bottom: 4px; }
/* Same segmented buttons as on Użytkownicy i dostęp; undo the text-field look that
   .field / .staff-inline give every input. */
.hotel-pick .level-pick input[type=radio] { width: 100%; height: 100%; padding: 0; border: 0; flex: none; }
.hotel-pick .level-pick input:checked + span { background: #3BA776; color: #fff; }
.hotel-pick .level-pick input:disabled + span { opacity: .5; }
.hotel-pick .level-pick { align-self: flex-start; }
.hotel-pick .level-pick span { padding: 8px 18px; }
.hotel-pick .muted { display: block; margin-top: 4px; font-size: 13px; }
.staff-inline .hotel-pick { flex-basis: 100%; }
.att-share { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; }
.att-share-note { margin-top: 6px; font-size: 13px; }
/* Kilometrówka (mileage.html): the month laid out like the paper log. */
.mi-period { min-width: 150px; text-align: center; }
.mi-head { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; font-size: 14px; }
.mi-facts { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: 14px; }
.mi-facts dt { color: var(--muted); font-size: 13px; }
.mi-facts dd { margin: 0; text-align: right; font-weight: 600; }
.mi-summary { cursor: pointer; }
.mi-header-form { margin-top: 10px; }
.mi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mi-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mi-table td { padding: 7px 6px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-table .num { text-align: right; }
.mi-table td.mi-wrap { white-space: normal; min-width: 120px; }
.mi-table tfoot td { border-top: 2px solid var(--line); }
.mi-table tr.editing td { background: var(--accent-soft-2); }
.mi-team tr.open td { background: var(--subtle); }
.mi-actions { display: flex; gap: 4px; justify-content: flex-end; }
.mi-actions .btn.small { height: 30px; padding: 0 8px; font-size: 13px; }
.mi-add { border-top: 1px solid var(--line); padding-top: 12px; }
.mi-add-grid { display: grid; grid-template-columns: 150px 1.4fr 1.2fr 80px 100px 1fr; gap: 10px; align-items: end; }
.mi-routes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mi-route { border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.mi-route:hover { border-color: var(--field); }
.mi-rate { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mi-bottom { justify-content: space-between; gap: 8px; }
.mi-back > summary { list-style: none; display: inline-flex; align-items: center; }
.mi-back[open] form { margin-top: 8px; }
@media (max-width: 760px) {
  .mi-head { grid-template-columns: 1fr; }
  .mi-facts dd { text-align: left; }
  .mi-add-grid { grid-template-columns: 1fr 1fr; }
  .mi-add-grid .grow { grid-column: 1 / -1; }
  .mi-rate { margin-left: 0; }
}
.mi-phone { display: none; }
@media (max-width: 760px) {
  /* Each trip becomes a small card: date and value, route, purpose and km x rate. */
  .mi-trips thead, .mi-trips .mi-n, .mi-trips .mi-rt { display: none; }
  .mi-trips, .mi-trips tbody, .mi-trips tfoot { display: block; }
  .mi-trips tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "d v" "r r" "p km" "rem rem" "act act"; gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .mi-trips tbody td { border: none; padding: 0; white-space: normal; min-width: 0; }
  .mi-trips tbody td[colspan] { grid-column: 1 / -1; }
  .mi-trips .mi-d { grid-area: d; font-weight: 600; }
  .mi-trips .mi-v { grid-area: v; font-weight: 600; }
  .mi-trips .mi-r { grid-area: r; }
  .mi-trips .mi-p { grid-area: p; color: var(--muted); }
  .mi-trips .mi-km { grid-area: km; color: var(--muted); }
  .mi-trips .mi-rem { grid-area: rem; }
  .mi-trips .mi-rem:empty { display: none; }
  .mi-trips .mi-actions { grid-area: act; justify-content: flex-start; margin-top: 4px; }
  .mi-trips .mi-phone { display: inline; }
  .mi-trips tfoot tr { display: flex; justify-content: space-between; padding: 10px 0; border-top: 2px solid var(--line); }
  .mi-trips tfoot td { border: none; padding: 0; }
  .mi-trips tfoot td:empty { display: none; }
}
.mi-pay { display: flex; flex-direction: column; gap: 8px; }
.mi-pay > summary { list-style: none; display: inline-flex; align-items: center; align-self: flex-start; }
.mi-pay[open] > summary { margin-bottom: 4px; }
.mi-payees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mi-payees li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }

/* --- Wiki (ksefapp.wiki): spaces, page tree, pages, the editor ------------------------ */
.wiki-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wiki-tools .btn { height: 40px; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.wiki-search { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.wiki-search .text-input { height: 40px; font-family: var(--font); font-size: 14px; }
.wiki-search.wide { flex-wrap: wrap; }
.wiki-search.wide .text-input[type=search] { flex: 2 1 240px; }
.wiki-search.wide select { flex: 1 1 160px; width: auto; }
.wiki-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wiki-space-card { gap: 6px; }
a.wiki-space-card:hover { border-color: var(--field); }
.wiki-space-new summary { display: flex; flex-direction: column; gap: 4px; cursor: pointer; list-style: none; }
.wiki-space-new summary::-webkit-details-marker { display: none; }
.wiki-space-new[open] { grid-column: 1 / -1; }
.wiki-mark { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.wiki-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.c-green { background: var(--note-green-bg); color: var(--note-green-ink); }
.c-purple { background: var(--note-purple-bg); color: var(--note-purple-ink); }
.c-blue { background: var(--note-blue-bg); color: var(--note-blue-ink); }
.c-pink { background: var(--note-pink-bg); color: var(--note-pink-ink); }
.c-sand { background: var(--note-sand-bg); color: var(--note-sand-ink); }
.c-graphite { background: var(--note-graphite-bg); color: var(--note-graphite-ink); }
.c-peach { background: var(--note-peach-bg); color: var(--note-peach-ink); }
.c-olive { background: var(--note-olive-bg); color: var(--note-olive-ink); }
.wiki-dot.c-green { background: var(--note-green-dot); } .wiki-dot.c-purple { background: var(--note-purple-dot); }
.wiki-dot.c-blue { background: var(--note-blue-dot); } .wiki-dot.c-pink { background: var(--note-pink-dot); }
.wiki-dot.c-sand { background: var(--note-sand-dot); } .wiki-dot.c-graphite { background: var(--note-graphite-dot); }
.wiki-dot.c-peach { background: var(--note-peach-dot); } .wiki-dot.c-olive { background: var(--note-olive-dot); }
.wiki-colours { border: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wiki-colours legend { margin-bottom: 4px; }
.wiki-colour { cursor: pointer; position: relative; }
.wiki-colour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wiki-colour input:checked + .wiki-mark { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wiki-colour input:focus-visible + .wiki-mark { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wiki-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wiki-rows li { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.wiki-rows li:first-child { border-top: none; }
.wiki-kind.k-process { background: var(--accent-soft-2); color: var(--accent-ink); }
.wiki-kind.k-meeting { background: var(--info-bg); color: var(--info-ink); }
.wiki-kind.k-idea { background: var(--soon-bg); color: var(--soon-ink); }
.wiki-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wiki-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.wiki-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wiki-table tr:last-child td { border-bottom: none; }

/* Tree | page | details on a wide screen; on a phone the page first, then the rest. */
.wiki-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.wiki-layout > * { min-width: 0; }
@media (min-width: 900px) {
  .wiki-layout { grid-template-columns: 210px minmax(0, 1fr) 230px; }
  .wiki-layout.two { grid-template-columns: 230px minmax(0, 1fr); }
  .wiki-layout.edit { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 899px) { .wiki-layout > .wiki-side { order: 3; } }
.wiki-side { padding: 12px 10px; }
.wiki-tree { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.wiki-tree-space { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 8px 8px; }
.wiki-tree-level { list-style: none; margin: 0; padding: 0; }
.wiki-tree-level .wiki-tree-level { padding-left: 14px; }
.wiki-tree-item { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.wiki-tree-item:hover { background: var(--subtle-2); color: var(--ink); }
.wiki-tree-item.on { background: var(--accent-soft-2); color: var(--accent-ink); font-weight: 600; }
.wiki-tree-add { padding: 8px; font-size: 13px; }
.wiki-article { position: relative; gap: 12px; }
.wiki-crumbs { font-size: 13px; }
.wiki-h1 { font-size: 24px; font-weight: 600; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.wiki-title-input { font-family: var(--font); font-size: 18px; font-weight: 600; }
.wiki-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.wiki-facts dt { color: var(--muted); }
.wiki-facts dd { margin: 0; overflow-wrap: anywhere; }
.wiki-history-short { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.wiki-children { border-top: 1px solid var(--line); padding-top: 10px; }
.wiki-btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* The page's text, read and edited. */
.wiki-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.wiki-body > :first-child { margin-top: 0; }
.wiki-body h2 { font-size: 19px; font-weight: 600; margin: 22px 0 6px; }
.wiki-body h3 { font-size: 16px; font-weight: 600; margin: 18px 0 4px; }
.wiki-body h4 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; }
.wiki-body p { margin: 0 0 10px; }
.wiki-body ul, .wiki-body ol { margin: 0 0 10px; padding-left: 24px; }
.wiki-body blockquote { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid var(--field); color: var(--ink-2); background: var(--subtle); }
.wiki-body pre { background: var(--subtle-2); padding: 10px; border-radius: 8px; overflow-x: auto; font-family: var(--mono); font-size: 13px; }
.wiki-body hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.wiki-body table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; max-width: 100%; }
.wiki-body th, .wiki-body td { border: 1px solid var(--line); padding: 6px 10px; min-width: 80px; text-align: left; vertical-align: top; }
.wiki-body th { background: var(--subtle-2); font-weight: 600; }
.wiki-body ul.wiki-check { list-style: none; padding-left: 0; }
.wiki-body ul.wiki-check > li { position: relative; padding-left: 28px; margin: 4px 0; }
.wiki-body ul.wiki-check > li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border: 1.5px solid var(--field); border-radius: 4px; background: var(--surface); box-sizing: border-box; }
.wiki-body ul.wiki-check > li[data-done="1"]::before { background: var(--accent); border-color: var(--accent); }
.wiki-body ul.wiki-check > li[data-done="1"]::after { content: ""; position: absolute; left: 7px; top: 6px; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wiki-body ul.wiki-check > li[data-done="1"] { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--field); }
.wiki-body ul.wiki-check > li.tickable::before, .wiki-editor ul.wiki-check > li::before { cursor: pointer; }
.wiki-editor { min-height: 320px; border: 1px solid var(--field); border-radius: 10px; padding: 14px 16px; background: var(--surface); outline: none; }
.wiki-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.wiki-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; }
.wiki-toolbar button { font: inherit; font-size: 13px; padding: 5px 9px; border-radius: 6px; border: none; background: none; color: var(--ink-2); cursor: pointer; }
.wiki-toolbar button:hover, .wiki-toolbar button:focus-visible { background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.wiki-sep { width: 1px; background: var(--line); margin: 3px 2px; }
.wiki-link-row[hidden] { display: none; }
.wiki-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wiki-link-row .text-input { flex: 1 1 240px; height: 40px; width: auto; font-family: var(--font); font-size: 14px; }
.wiki-slash { position: absolute; z-index: 5; width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--shadow), .14); padding: 4px; display: flex; flex-direction: column; }
.wiki-slash[hidden] { display: none; }
.wiki-slash button { font: inherit; font-size: 14px; text-align: left; padding: 7px 10px; border: none; background: none; border-radius: 6px; color: var(--ink); cursor: pointer; }
.wiki-slash button.on, .wiki-slash button:hover { background: var(--accent-soft); }
.wiki-kinds { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.wiki-kinds legend { margin-bottom: 8px; }
.wiki-diff { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.wiki-diff li { padding: 3px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.wiki-diff li.add { background: var(--done-bg); color: var(--done-ink); }
.wiki-diff li.add::before { content: "+ "; }
.wiki-diff li.del { background: var(--late-bg); color: var(--late-ink); text-decoration: line-through; }
.wiki-diff li.del::before { content: "− "; }
.wiki-hits { list-style: none; margin: 0; padding: 0; }
.wiki-hits li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.wiki-hits li:first-child { border-top: none; }
.wiki-snippet { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.wiki-snippet mark { background: var(--soon-bg); color: var(--soon-ink); border-radius: 3px; padding: 0 2px; }
/* Bookings: rooms hidden for the whole property, agreed arrival/departure times, paid hold. */
.hotel-rooms[hidden] { display: none; }
.hotel-time { font-size: 12px; font-weight: 600; color: var(--soon-ink); }
.pill.st-paid_hold { background: var(--soon-bg); color: var(--soon-ink); }
/* Grafik day view: guests' rows above the people, from check-in or to check-out. */
.dz-guest { background: var(--cat-tint); }
.dz-guest .dz-track { min-height: 42px; }
.dz-bar.dz-stay { background: var(--cat); color: var(--cat-ink); border-radius: 0; }
.dz-bar.dz-stay.in { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.dz-bar.dz-stay.out { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.dz-bar.dz-stay.st-tentative { background: repeating-linear-gradient(135deg, var(--cat-tint) 0 6px, var(--surface) 6px 12px); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cat); }
.dz-special { font-style: normal; font-weight: 600; color: var(--soon-ink); }
/* "Powitanie i film na start" beside staff invitations (partials/invite_welcome.html):
   undo the text-field size .staff-inline gives every input. */
.field.invite-welcome { margin: 0; flex: 0 1 auto; }
.staff-inline .invite-welcome input[type=checkbox] { flex: none; width: 18px; height: 18px; }
.bulk-bar .invite-welcome { font-size: 14px; }
.staff-bulk-after .invite-welcome { flex-basis: 100%; }
/* Kasa: the cash box (cash.html). */
.cash-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-size: 14px; }
.cash-figures b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cash-figures .cash-big { font-size: 22px; }
.cash-grid { display: grid; grid-template-columns: 160px 130px 1.6fr 1fr; gap: 10px; align-items: end; }
.cash-grid .cash-file { grid-column: span 2; }
.cash-start .cash-grid { grid-template-columns: 180px 200px; }
.cash-dir { display: flex; gap: 8px; flex-wrap: wrap; }
.cash-dir .option { padding: 8px 12px; align-items: center; }
.cash-what .pill { margin-right: 4px; }
.cash-check.ok { background: var(--done-bg); color: var(--done-ink); border-radius: 10px; padding: 12px; font-size: 14px; }
.cash-how { margin: 8px 0 12px; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {
  .cash-figures { grid-template-columns: 1fr 1fr; }
  .cash-grid, .cash-start .cash-grid { grid-template-columns: 1fr 1fr; }
  .cash-grid .grow { grid-column: 1 / -1; }
  /* Each movement becomes a small card: date and amount, what it is, the balance. */
  .cash-table thead { display: none; }
  .cash-table, .cash-table tbody { display: block; }
  .cash-table tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "d amt" "w w" "act bal"; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .cash-table tbody td { border: none; padding: 0; white-space: normal; min-width: 0; }
  .cash-table tbody td[colspan] { grid-column: 1 / -1; }
  .cash-table .cash-d { grid-area: d; font-weight: 600; }
  .cash-table .cash-in, .cash-table .cash-out { grid-area: amt; font-weight: 600; }
  .cash-table .cash-in:empty, .cash-table .cash-out:empty { display: none; }
  .cash-table .cash-what { grid-area: w; }
  .cash-table .cash-bal { grid-area: bal; }
  .cash-table .mi-actions { grid-area: act; justify-content: flex-start; }
  .cash-table .mi-phone { display: inline; }
}
/* Wyposażenie: the handover form lists the items with an ilość box each, like the paper. */
.equip-lines { display: flex; flex-direction: column; }
.equip-line { display: grid; grid-template-columns: 1fr 88px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-weight: 400; }
.equip-line.equip-head { border-top: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.equip-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.equip-pick .field { flex: 1 1 220px; }
.equip-pick .btn { height: 44px; }
.equip-confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 12px; border-radius: 10px; background: var(--soon-bg); }
.equip-confirm .staff-items li { border-color: rgba(0,0,0,.08); }
/* The welcome e-mail after the deposit: the box that asks first, and the bar while it waits. */
.hotel-welcome { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--check-bg); color: var(--check-ink); border-color: #EAAA08; }
.hotel-welcome .btn.ghost { color: inherit; }
.hotel-welcome-later { margin: 0 16px; font-size: 14px; }
.hotel-welcome-ask { max-width: 640px; }
.hotel-welcome-preview { width: 100%; height: 46vh; border: 1px solid var(--line); border-radius: 10px; background: #EFEBE7; }

/* Import danych (import_start.html, import_sheet.html, import_done.html): the file as a
   sheet, a field and a key tick above each column; red to fix, yellow changes, green
   fills, grey ignored or locked (KSeF). */
.wrap.imp-wide { max-width: 1440px; }
.imp-form { display: flex; flex-direction: column; gap: 12px; }
.imp-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--field); border-radius: 12px; background: var(--subtle); color: var(--accent); text-align: center; cursor: pointer; }
.imp-drop:hover, .imp-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.imp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.imp-drop-title { font-weight: 600; color: var(--ink); }
.imp-drop.is-over { border-color: var(--accent); background: var(--accent-soft); border-style: solid; }
.imp-drop.is-busy { cursor: progress; }
.imp-drop-names { font-weight: 600; color: var(--ink); word-break: break-all; }
.imp-kinds { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.imp-kinds legend { margin-bottom: 6px; }
.imp-kind { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.imp-kind > span { display: flex; flex-direction: column; }
.imp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.imp-row:first-of-type { border-top: none; }
.imp-status { font-size: 12px; border-radius: 10px; padding: 2px 8px; background: var(--chip); color: var(--chip-ink); white-space: nowrap; }
.imp-status.imp-draft { background: var(--soon-bg); color: var(--soon-ink); }
.imp-status.imp-done { background: var(--done-bg); color: var(--done-ink); }
.imp-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.imp-inline { display: flex; align-items: center; gap: 8px; }
.imp-inline select, .imp-name { height: 36px; border: 1px solid var(--field); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.imp-name { min-width: 220px; }
.imp-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-chip { font-size: 13px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); text-decoration: none; }
.imp-chip.bad { background: var(--late-bg); color: var(--late-ink); border-color: var(--late-line); }
.imp-chip.diff { background: var(--soon-bg); color: var(--soon-ink); border-color: var(--soon-line); }
.imp-chip.fill { background: var(--done-bg); color: var(--done-ink); border-color: var(--done-bg); }
.imp-chip.on { outline: 2px solid var(--accent); outline-offset: 1px; font-weight: 600; }
.imp-sheet-form { display: flex; flex-direction: column; gap: 12px; }
.imp-ask { border: 1px solid var(--soon-line); background: var(--soon-soft); }
.imp-scroll { overflow: auto; max-height: min(60vh, 560px); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); overscroll-behavior: contain; position: relative; z-index: 0; }
.imp-scroll thead th { position: sticky; z-index: 2; }
.imp-scroll thead .imp-map th { top: 0; }
.imp-scroll thead .imp-heads th { top: var(--imp-map-h, 66px); }
.imp-grid { border-collapse: separate; border-spacing: 0; }
.imp-scroll .imp-grid .imp-n { position: sticky; left: 0; z-index: 1; }
.imp-scroll .imp-grid thead th.imp-n { z-index: 3; background: var(--subtle); }
.imp-grid .imp-map th.imp-n { min-width: 36px; }
.imp-grid { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.imp-grid th, .imp-grid td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.imp-scroll .imp-grid th, .imp-scroll .imp-grid td { border-width: 0 1px 1px 0; }
.imp-grid thead th { background: var(--subtle-2); font-weight: 600; color: var(--ink-2); }
.imp-grid .imp-map th { background: var(--accent-soft-2); min-width: 150px; }
.imp-grid .imp-map select { width: 100%; height: 32px; border: 1px solid var(--field); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.imp-grid .imp-map select.is-key { border-color: var(--accent); font-weight: 700; }
.imp-grid .imp-map select.is-ignored { color: var(--muted); background: var(--subtle-2); }
.imp-key { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font-weight: 500; font-size: 12px; cursor: pointer; }
.imp-key.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.imp-keyhint { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.imp-key-demo { padding: 2px 8px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; }
.imp-grid .imp-n { width: 36px; min-width: 36px; text-align: center; color: var(--muted); background: var(--subtle); font-weight: 400; }
.imp-r-bad { background: var(--late-bg); }
.imp-r-diff { background: var(--soon-soft); }
.imp-r-new { background: var(--info-bg); }
.imp-chip.new { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-ink); }
.imp-r-skip { opacity: .55; }
.imp-c-ignored { color: var(--muted); background: var(--subtle-2); }
.imp-c-key { font-weight: 600; }
.imp-c-diff { background: var(--soon-bg); font-weight: 600; }
.imp-c-fill { background: var(--done-bg); }
.imp-c-lock { background: var(--subtle-2); color: var(--muted); }
.imp-c-bad { background: var(--late-bg); box-shadow: inset 0 0 0 2px var(--late-ink); }
.imp-c-kept { text-decoration: line-through; color: var(--muted); }
.imp-fix { width: 100%; min-width: 110px; box-sizing: border-box; height: 30px; border: 1px solid var(--late-line); border-radius: 6px; font: inherit; font-size: 13px; padding: 0 6px; background: var(--surface); color: var(--ink); }
.imp-msg { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.imp-old, .imp-skip { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 2px; color: var(--soon-ink); }
.imp-skip { color: var(--late-ink); }
.imp-status-cell { min-width: 170px; }
.imp-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--border-strong); }
.imp-swatch.bad { background: var(--late-bg); border-color: var(--late-line); }
.imp-swatch.diff { background: var(--soon-bg); border-color: var(--soon-line); }
.imp-swatch.fill { background: var(--done-bg); }
.imp-swatch.new { background: var(--info-bg); border-color: var(--info-ink); }
.imp-swatch.ignored { background: var(--subtle-2); }
.imp-foot { display: flex; flex-direction: column; gap: 10px; }
.imp-tpl { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.imp-done.imp-done { border-color: var(--done-bg); }

/* Rates box: year title between the previous / next year arrows. */
.year-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.year-steps .section-label { flex: 1; text-align: center; margin: 0; }
.year-steps .icon-btn { width: 32px; height: 32px; font-size: 20px; line-height: 1; }

/* Settings > Powiadomienia with SMS on: event | e-mail | SMS (ksefapp.sms) */
.notify-grid { display: grid; grid-template-columns: 1fr 56px 56px; align-items: center; gap: 8px 4px; }
.notify-col { text-align: center; font-size: 12px; }
.notify-col input { width: 20px; height: 20px; }
/* Settings > Powiadomienia: headings over the events (incoming, outgoing, staff, other) */
.notify-group { grid-column: 1 / -1; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.notify-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Settings > SMS: one card per person */
.phone-row { display: flex; gap: 6px; }
.phone-row { align-items: center; }
.phone-row .phone-prefix { flex: 0 0 auto; padding: 0 4px; font-variant-numeric: tabular-nums; color: var(--muted, inherit); }
.phone-row input { flex: 1 1 auto; min-width: 0; }
.sms-person { display: flex; flex-direction: column; gap: 10px; }
.sms-person-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.sms-events { display: flex; flex-wrap: wrap; gap: 6px; }
.sms-events label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--surface); cursor: pointer; }
.sms-events label:has(input:checked) { background: var(--accent-soft-2); border-color: var(--accent); }
.sms-events input { margin: 0; }
.sms-stopped { color: var(--muted); font-size: 13px; }
.due-days select { margin-top: 4px; font-size: 13px; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink-2); }

/* "Brak internetu" bar at the top (base.html, app.js): no connection, or the main page is the saved copy. */
.offline-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: 8px 16px; background: #B54708; color: #FFFFFF; font-size: 14px; font-weight: 600; text-align: center; }
.offline-bar[hidden], .offline-bar [hidden] { display: none; }
.offline-bar span { font-weight: 400; }

/* iPhone app (and a home-screen app): the page runs under the clock and Wi-Fi icons, so
   everything starts below them and a strip in the page colour covers that area. Zero in
   an ordinary browser. */
body { padding-top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--surface); z-index: 40; pointer-events: none; }
.topbar { top: env(safe-area-inset-top, 0px); }
.side-menu { padding-top: env(safe-area-inset-top, 0px); }
/* Workers of a firm from outside: add N people (optional name) in one row. */
.crew-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.crew-list .staff-inline input[name="name"] { flex: 1 1 160px; }
.crew-shifts li { flex-wrap: wrap; }
.crew-shifts input { flex: 1 1 100%; height: 38px; font-size: 14px; }

/* Staff card: hours this month and last, each opening the person's timesheet. */
.hours-months { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 8px; margin-bottom: 10px; }
.hours-month { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.hours-month:hover { border-color: var(--accent); }
@media (max-width: 560px) { .hours-months { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dz-pop-people.need { outline: 2px solid var(--late-ink); outline-offset: 4px; border-radius: 8px; }
/* Per-person planned hours at the end of each week, and the month's table. */
.g-cal-people { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
.g-cal-people li { display: flex; justify-content: space-between; gap: 6px; color: var(--ink-2); }
.g-cal-people li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-cal-people li b { font-size: 11px; font-variant-numeric: tabular-nums; }
.g-cal-people li.ext { opacity: .75; }
.month-hours td.num, .month-hours th.num { padding: 6px 10px; font-variant-numeric: tabular-nums; }
.month-hours tfoot th, .month-hours tfoot td { border-top: 2px solid var(--line); border-bottom: none; }
.dz-pop [hidden] { display: none !important; }
/* Hours worked, written like the shift above; while empty the plan shows grey. */
.time-grid input.t-act::placeholder { color: var(--muted); font-weight: 400; font-style: italic; opacity: .8; }
/* Totals in line with the boxes: planned beside the plan, worked beside the worked. */
.time-grid td.t-sum span, .time-grid td.t-sum b { display: block; height: 28px; line-height: 28px; margin-bottom: 3px; white-space: nowrap; }
.time-grid td.t-sum .t-sum-plan { color: var(--ink-2); font-size: 12px; }
.time-grid td.t-sum .t-sum-act { font-size: 13px; }
/* Row labels beside the boxes: the plan line, then the hours worked line. */
.time-grid th.t-kind { text-align: right; font-weight: 500; font-size: 11px; color: var(--muted); padding-right: 6px; white-space: nowrap; }
.time-grid th.t-kind span { display: block; height: 28px; line-height: 28px; margin-bottom: 3px; }
.time-grid th.t-kind .t-kind-act { color: var(--ink-2); font-weight: 600; }
.time-grid:has(.t-kind) .time-name { width: 120px; min-width: 120px; max-width: 120px; box-sizing: border-box; }
.time-grid th.t-kind { position: sticky; left: 120px; z-index: 1; background: var(--surface); }
/* "Historia zmian" (partials/time_changes.html). */
.time-log summary { cursor: pointer; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.time-log summary .muted { font-weight: 400; font-size: 13px; }
.time-log-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.time-log-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.time-log-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.time-log-table .nowrap { white-space: nowrap; }
.time-log-table s { color: var(--muted); }
/* Grafik: shift changes wait here until the owner sends one notification per person. */
.notify-bar { position: fixed; right: 16px; bottom: 56px; z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 28px rgba(var(--shadow), .18); animation: notify-bar-in .25s ease-out; }
.notify-bar-head { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none; padding-right: 22px; position: relative; }
.notify-bar-head::-webkit-details-marker { display: none; }
.notify-bar-head::after { content: "–"; position: absolute; right: 0; top: 0; color: var(--muted); font-size: 18px; line-height: 1; }
.notify-bar details:not([open]) .notify-bar-head::after { content: "+"; }
.notify-bar-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.notify-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-bar-actions .btn:first-of-type { flex: 1; }
@keyframes notify-bar-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) { .notify-bar { right: 12px; left: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media print { .notify-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .notify-bar { animation: none; } }
.notify-bar-people { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.notify-bar-people label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.notify-bar-people label > span { display: flex; flex-direction: column; }
.notify-bar-people .muted { font-size: 12px; }
.notify-bar-people input { margin-top: 3px; accent-color: var(--accent); }
.notify-bar-form { display: flex; flex-direction: column; gap: 10px; }

/* Grafik notes (ksefapp.shift_notes): week/month/day notes everyone sees, and a shift's
   notes with tick lists. */
.board-note { background: var(--note-sand-bg); color: var(--note-sand-ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-note-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.board-note form { display: flex; flex-direction: column; gap: 6px; white-space: normal; }
.board-note textarea { width: 100%; min-height: 54px; border: 1px dashed var(--field); border-radius: 8px; background: transparent; padding: 7px 10px; font: inherit; color: inherit; resize: vertical; }
.board-note .board-note-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sn-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; white-space: normal; }
.sn-list-head { font-size: 12px; opacity: .8; }
.sn-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.sn-item.done .sn-text { text-decoration: line-through; color: var(--muted); }
.sn-box { width: 22px; height: 22px; flex: none; border: 2px solid var(--field); border-radius: 6px; background: var(--surface); color: var(--surface); font-weight: 700; line-height: 1; padding: 0; cursor: pointer; }
.sn-box[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.sn-text { flex: 1; min-width: 0; }
.sn-by { font-size: 11px; color: var(--accent-ink); }
.sn-waiting { display: block; font-size: 11px; opacity: .75; margin-top: 4px; }
.sn-builder { display: flex; flex-direction: column; gap: 6px; }
.sn-builder summary { list-style: none; display: inline-block; cursor: pointer; }
.sn-builder summary::-webkit-details-marker { display: none; }
.sn-builder-rows { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.sn-builder-rows input { border: 1px solid var(--field); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.sn-history { margin-top: 6px; font-size: 11.5px; white-space: normal; }
.sn-history summary { cursor: pointer; opacity: .8; }
.sn-history ul { margin: 4px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.sn-edit { margin-top: 4px; }
.sn-edit summary { list-style: none; display: inline-flex; cursor: pointer; }
.sn-edit summary::-webkit-details-marker { display: none; }
.sn-edit-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); max-width: 520px; }
.sn-edit-rows { display: flex; flex-direction: column; gap: 4px; }
.sn-edit-row { display: flex; gap: 6px; align-items: center; }
.sn-edit-row input[name^="item_"] { flex: 1; min-width: 0; border: 1px solid var(--field); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.sn-edit-gap { width: 32px; flex: none; }
.sn-edit-drop { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; white-space: nowrap; }
.sn-phrase-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.sn-phrase-list label { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; overflow-wrap: anywhere; }
.sn-now { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.sn-now input { accent-color: var(--accent); }
.sn-chip { display: inline-flex; gap: 3px; align-items: center; font-size: 10.5px; line-height: 1.5; padding: 0 5px; border-radius: 99px; background: rgba(var(--shadow), .09); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sn-chip.new { background: var(--accent); color: var(--surface); }
.sn-chip.add { background: transparent; border: 1px dashed var(--field); color: var(--muted); }
.time-grid td .sn-chip { margin-top: 3px; }
/* Shift notes reachable from the schedule: the chip under a name in the day view and
   the 💬 count on a shift in the week/month calendar. */
.dz-name .sn-chip { margin-left: 4px; vertical-align: 1px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.dz-name .sn-chip.new { color: var(--surface); }
.dz-name .sn-chip:hover { text-decoration: none; }
.g-note { font-size: 10px; font-weight: 500; opacity: .85; }
.g-note.new { padding: 0 3px; border-radius: 99px; background: var(--accent); color: var(--surface); opacity: 1; }
a.g-lane { text-decoration: none; }
.day-pin { display: block; font-size: 10.5px; font-weight: 500; color: var(--note-sand-ink); background: var(--note-sand-bg); border-radius: 4px; padding: 0 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.day-pin-input { width: 100%; min-width: 60px; font-size: 11px; margin-top: 3px; border: 1px dashed var(--field); border-radius: 4px; padding: 1px 4px; background: transparent; }
.sn-pop { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--accent); }
.sn-pop a { font-weight: 600; }
.notes-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.notes-tabs a { border: 1px solid var(--field); border-radius: 99px; padding: 5px 12px; text-decoration: none; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.notes-tabs a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft, var(--line)); color: var(--accent-ink); font-weight: 600; }
.board-note-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sn-pop-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.chat-row-main { gap: 2px; min-width: 0; }
.sn-bubble { white-space: normal; }
.sn-bubble .sn-body { white-space: pre-wrap; }
/* A time typed on a 24-hour clock (input.t-clock, app.js tidies "630" to 06:30). */
input.t-clock { font-variant-numeric: tabular-nums; }
/* Week schedule on a phone: the week as a row of day buttons, one day's column at a
   time (data-show on .time-scroll, app.js), no sideways scrolling. */
.wk-pager { display: none; }
@media (max-width: 760px) {
  .wk-pager:not([hidden]) { display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px; }
  .wk-pager > .btn.ghost { width: 34px; padding: 0; flex: none; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
  .wk-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .wk-day { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; padding: 4px 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; cursor: pointer; }
  .wk-day span { font-size: 11px; color: var(--muted); }
  .wk-day.off { background: var(--subtle); }
  .wk-day.hol { background: var(--hol); }
  .wk-day.today b { color: var(--accent); }
  .wk-day[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .wk-day i { width: 6px; height: 6px; border-radius: 50%; margin-top: 2px; background: transparent; }
  .wk-day i.on { background: var(--accent); opacity: .6; }
  .time-scroll[data-show] { overflow-x: visible; }
  .time-scroll[data-show] .time-grid { width: 100%; }
  .time-scroll[data-show] [data-col] { display: none; }
  .time-scroll[data-show="0"] [data-col="0"], .time-scroll[data-show="1"] [data-col="1"],
  .time-scroll[data-show="2"] [data-col="2"], .time-scroll[data-show="3"] [data-col="3"],
  .time-scroll[data-show="4"] [data-col="4"], .time-scroll[data-show="5"] [data-col="5"],
  .time-scroll[data-show="6"] [data-col="6"] { display: table-cell; }
  .time-scroll[data-show] .time-grid input { width: 100%; max-width: 160px; box-sizing: border-box; height: 34px; font-size: 14px; }
  .time-scroll[data-show] .time-grid .t-plan-ro { min-width: 0; }
}
.timesheet .ts-short { display: none; }
/* One person's timesheet on a phone: the day on its own line, plan and actual times
   below it, so the table fits the screen without scrolling sideways. */
@media (max-width: 640px) {
  .timesheet, .timesheet thead, .timesheet tbody, .timesheet tfoot { display: block; }
  .timesheet tr { display: grid; grid-template-columns: 1fr 1fr 2.4em 1fr 1fr 2.4em; column-gap: 4px; align-items: center; border-bottom: 1px solid var(--line); padding: 2px 4px; }
  .timesheet th, .timesheet td { border-bottom: none; padding: 2px 0; white-space: normal; }
  .timesheet thead th { font-size: 11px; line-height: 1.2; }
  .timesheet thead th:first-child { display: none; }
  .timesheet th[colspan="2"], .timesheet td[colspan="2"], .timesheet tr.ts-week th, .timesheet tr.ts-total th { grid-column: span 2; }
  .timesheet .ts-day, .timesheet .ts-note-row td { grid-column: 1 / -1; }
  .timesheet tr:has(+ .ts-note-row) { border-bottom: none; }
  .timesheet input.t-clock { width: 100%; box-sizing: border-box; height: 34px; font-size: 14px; }
  .timesheet .ts-ro { text-align: center; }
  .timesheet tr.ts-week { background: var(--subtle-2); }
  .timesheet tr > * { min-width: 0; }
  .timesheet .ts-long { display: none; }
  .timesheet .ts-short { display: inline; }
}
/* On a phone the one-day week view has no room for the row labels. */
@media (max-width: 760px) {
  .time-scroll[data-show] .time-grid th.t-kind { display: none; }
  .time-scroll[data-show] .time-grid:has(.t-kind) .time-name { width: auto; min-width: 90px; max-width: 130px; }
}

/* JPK history (jpk_history.html): the VAT return month by month */
.jh-scroll { overflow-x: auto; margin: 0 -4px; }
.jh-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.jh-table th, .jh-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.jh-table thead th { font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: normal; vertical-align: bottom; }
.jh-table .num { text-align: right; }
.jh-table tbody th { font-weight: 600; }
.jh-table .jh-year th, .jh-table .jh-year td { font-weight: 700; background: var(--subtle); border-bottom: 2px solid var(--line); }
.jh-src { font-size: 12px; color: var(--ink-2); }
.jh-files summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 6px 0; }

/* Loading bar at the very top while a page loads (html.page-busy, app.js): a tap shows
   at once that something is happening. Waits a moment so quick swaps don't flash it. */
html.page-busy::after { content: ""; position: fixed; top: env(safe-area-inset-top, 0px); left: 0; width: 40vw; height: 3px; border-radius: 0 2px 2px 0; background: var(--accent); z-index: 2000; pointer-events: none; animation: page-busy-bar 1.1s ease-in-out .12s infinite both; }
@keyframes page-busy-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* A page that takes a moment more: a spinner in the middle of the screen as well. */
html.page-busy::before { content: ""; position: fixed; left: 50%; top: 45%; width: 28px; height: 28px; margin: -17px 0 0 -17px; border: 3px solid var(--accent); border-right-color: transparent; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 8px var(--surface), 0 4px 16px 8px rgba(0, 0, 0, .12); z-index: 2001; pointer-events: none; opacity: 0; animation: spin .8s linear infinite, page-busy-show .2s ease .3s forwards; }
@keyframes page-busy-show { to { opacity: 1; } }
/* Moving between pages: the old page stays until the new one is ready, then fades over
   (Safari 18.2+, Chrome 126+), with the bottom tabs and top bar standing still. */
@view-transition { navigation: auto; }
.bottom-nav { view-transition-name: bottom-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { html.page-busy::after { width: 100vw; animation: none; opacity: .6; } }

/* Finance charts on a phone: the whole year fits the screen instead of scrolling sideways.
   Narrower scale, thinner gaps, smaller month names; the year-on-year line above the chart
   replaces the per-month change under each bar. */
@media (max-width: 640px) {
  .fin-chart { min-width: 0; }
  .fin-axis { width: 40px; font-size: 10px; }
  .fin-axis span { right: 4px; }
  .fin-fx-axis { width: 34px; }
  .fin-fx-axis span { left: 4px; }
  .fin-month { padding: 0 1px; gap: 1px; }
  .fin-bar { width: 45%; }
  .fin-month.n4 .fin-bar { width: 24%; }
  .fin-labels span { padding: 0 1px; font-size: 10px; overflow: hidden; text-overflow: clip; }
  .fin-chart:not(.few) .fin-yoy-cell { display: none; }
}

/* Settings > Powiadomienia: where to (e-mail, app, SMS number), then a column of ticks per
   way, with a tick at the top of each column for all of it. */
.notify-where { display: flex; flex-direction: column; gap: 10px; }
.notify-head { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-2); cursor: pointer; }

/* Where the next part of a long invoice list loads (inbox_cards.html). */
.more-cards { padding: 16px; text-align: center; font-size: 14px; }

/* Days someone cannot work (ksefapp.availability): hatched grey, a shift on one outlined in red. */
.time-grid td.blocked, .timesheet tr.blocked > th, .timesheet tr.blocked > td {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--grid) 6px 9px);
}
.time-grid td.clash input.t-plan, .time-grid td.clash .t-plan-ro { outline: 2px solid var(--late-line); outline-offset: -2px; }
.no-work { display: block; font-size: 11px; font-weight: 600; color: var(--late-ink); }
.timesheet .ts-day .no-work { display: inline; margin-left: 6px; }
.no-work small { font-weight: 400; color: var(--muted); }
.fill-chip .no-work { display: inline; }
.g-nowork { font-size: 11px; color: var(--late-ink); }
.g-lane.clash { outline: 2px solid var(--late-line); outline-offset: -1px; }
.clash-warn { background: var(--late-bg); border-color: var(--late-line); color: var(--late-ink); }
.clash-warn .muted { color: var(--late-ink); opacity: .85; }
.clash-list { margin: 6px 0; padding-left: 18px; }
.no-work-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.no-work-form .no-work-note { flex: 1 1 220px; }
.no-work-form .field input { width: 100%; }
.no-work-card .staff-items form { margin: 0; }

/* Grafik > "Wklej daty" (ksefapp.date_lists): pasted date lists such as garbage collection */
.dates-form, .dates-new { display: flex; flex-direction: column; gap: 10px; }
.dates-form textarea { min-height: 170px; font-family: var(--mono); font-size: 14px; }
.dates-form .field, .dates-new .field { max-width: 520px; }
.dates-form .field:has(textarea) { max-width: none; }
.dates-into select { max-width: 320px; }
.icon-pick { border: 0; padding: 0; margin: 0; }
.icon-pick legend { font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.icon-pick-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.icon-opt { position: relative; }
.icon-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icon-opt span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; font-size: 20px; cursor: pointer; background: var(--surface); }
.icon-opt input:checked + span { border: 2px solid var(--accent); background: var(--accent-soft); }
.icon-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-own { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.icon-own input { width: 56px; font-size: 18px; text-align: center; padding: 3px; border: 1px solid var(--field); border-radius: 8px; }
.dates-remind { display: flex; flex-direction: column; gap: 4px; }
.dates-preview { display: flex; flex-direction: column; gap: 6px; }
.dates-preview .time-grid td, .dates-preview .time-grid th { text-align: left; }
.dates-bad td { color: var(--late-ink); }
.dates-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dates-rows li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dates-rows li > span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.dates-list details > summary { cursor: pointer; color: var(--accent); font-size: 14px; margin: 4px 0 8px; }
.board-dates { display: flex; flex-direction: column; gap: 2px; font-size: 14px; white-space: normal; }
/* Finance chart on a touch screen: the box a first tap on a bar opens (app.js). */
.fin-tip { position: fixed; z-index: 60; min-width: 160px; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 10px; background: var(--card, #fff); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(16, 24, 40, .16); font-size: 13px; line-height: 1.4; color: var(--ink); }
.fin-tip[hidden] { display: none; }
.fin-tip-name { font-weight: 700; }
.fin-tip-dates, .fin-tip-more { font-size: 12px; color: var(--muted); }
.fin-tip-amount { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-tip-go { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 600; text-decoration: none; }
.fin-bar.tip-on { outline: 2px solid var(--ink); outline-offset: 1px; filter: none; }
.fin-month:has(.tip-on) { background: var(--chip); border-radius: 6px 6px 0 0; }

/* The shift window on the planner's week and month (partials/shift_window.html): a
   centred card on a computer, a sheet from the bottom on a phone. */
dialog.shiftwin { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgb(0 0 0 / .22); }
dialog.shiftwin::backdrop { background: rgb(0 0 0 / .35); }
.shiftwin form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.sw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sw-title { font-size: 17px; }
.sw-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.sw-section, .sw-who { display: flex; flex-direction: column; gap: 6px; }
.sw-who[hidden], .sw-last[hidden], .sw-all[hidden], .shiftwin .btn[hidden] { display: none; }
.sw-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sw-all { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--accent); }
.sw-last { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(var(--shadow), .07); font-size: 14px; }
.shiftwin textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--field); border-radius: 8px; resize: vertical; }
.sw-hint { font-size: 12px; }
.shiftwin .staff-actions { margin: 0; flex-wrap: wrap; }
.shiftwin .btn:disabled { opacity: .45; cursor: not-allowed; }
.sw-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sw-tools form { margin: 0; }
[data-sw-new] { cursor: cell; }
[data-sw-open] { cursor: pointer; }
@media (max-width: 640px) {
  dialog.shiftwin { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 90dvh; }
}
/* --- Phone: "Dziś" start screen (partials/today_cards.html, ksefapp.today) ----------- */
.phone-only, .today-screen { display: none; }
.today-screen { padding: 16px 16px 4px; flex-direction: column; gap: 10px; }
.today-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.today-card:active { background: var(--subtle-2); }
.today-card.is-empty .today-value { color: var(--muted); }
.today-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.today-title { font-size: 13px; color: var(--muted); font-weight: 600; }
.today-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.today-note { font-size: 13px; }
.today-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.today-line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.today-line > span { display: flex; flex-direction: column; min-width: 0; }
.today-line small { font-size: 12.5px; }
.today-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-btn { flex: none; }
.today-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 6px; }
.today-foot .btn { flex: 1; }
@media (max-width: 759px) {
  .phone-only { display: inline; }
  .desk-only { display: none; }
  .today-screen { display: flex; }
  .home-full { display: none; }
  .home-actions .year-pick { display: none; }
}
.today-btn { display: inline-flex; align-items: center; }
/* Invoice list on phones: months, years, order and filters behind "Filtry". */
.filters-btn { display: none; }
@media (max-width: 759px) {
  .inbox-search { flex-wrap: nowrap; }
  .inbox-search .bank-search-box { flex: 1; min-width: 0; }
  .inbox-search button[type=submit] { display: none; }
  .filters-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; height: auto; align-self: stretch; }
}
/* Staff "Dziś" (my_today.html). */
.view-switch { align-self: flex-start; }
.shift-today { display: flex; flex-direction: column; gap: 4px; padding: 16px; color: var(--sh-ink); }
.shift-today.shift-morning { background: var(--sh-morning); }
.shift-today.shift-afternoon { background: var(--sh-afternoon); }
.shift-today.shift-evening { background: var(--sh-evening); }
.shift-today:not([class*="shift-morning"]):not([class*="shift-afternoon"]):not([class*="shift-evening"]) { color: var(--ink); }
.shift-today-label { font-size: 13px; font-weight: 600; opacity: .8; }
.shift-today-time { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.today-day-note { margin-top: 6px; }
.today-hours { display: flex; flex-direction: column; gap: 10px; }
.today-hours-done { font-weight: 600; color: var(--done-ink); }
.today-hours-actions { display: flex; flex-direction: column; gap: 8px; }
.today-hours-actions form > .btn, .big-btn { width: 100%; min-height: 48px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.today-change > summary { list-style: none; cursor: pointer; }
.today-change > summary::-webkit-details-marker { display: none; }
.today-change[open] > summary { display: none; }
.today-change-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.today-change-form .t-clock { width: 100%; }
.today-hours-hint { font-size: 13px; }
.today-notes { display: flex; flex-direction: column; gap: 10px; }
.today-note-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--note-blue-bg); color: var(--note-blue-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.today-note-item.mine { background: var(--note-peach-bg); color: var(--note-peach-ink); }
.today-note-who { font-size: 12px; }
.today-next li { display: flex; justify-content: space-between; }
.today-schedule { margin-top: 4px; }
@media (max-width: 759px) { .print-link { display: none; } }
/* Finanse on phones: the week's deadlines as one line (finance.html). */
.fin-due-line { display: none; }
@media (max-width: 759px) {
  .fin-due-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--soon-bg); color: var(--soon-ink); }
  .fin-due-line.overdue { background: var(--late-bg); color: var(--late-ink); }
  .fin-due-line-actions { display: flex; gap: 10px; align-items: center; flex: none; }
  .fin-due-line .link-btn { color: inherit; text-decoration: underline; }
  .fin-due:not(.open) { display: none; }
}
@media (max-width: 759px) {
  .fin-filters-btn { align-self: flex-start; height: auto; min-height: 40px; }
  .fin-switches:not(.open) { display: none; }
  .fin-tools .dash-summary { font-size: 13px; }
}
/* Pulpit biura on phones: one compact block per firm, the buttons behind the initials. */
.office-me { display: none; }
@media (max-width: 759px) {
  .office-top { flex-wrap: nowrap; align-items: center; }
  .office-top .office-actions { display: none; }
  .office-me { display: block; position: relative; margin-left: auto; flex: none; }
  .avatar-btn { list-style: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft-2); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; cursor: pointer; }
  .avatar-btn::-webkit-details-marker { display: none; }
  .office-me-menu { position: absolute; right: 0; top: 46px; z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--shadow), .15); padding: 6px; display: flex; flex-direction: column; min-width: 180px; }
  .office-me-menu a, .office-me-menu .btn { display: block; padding: 10px 12px; border: 0; background: none; text-align: left; color: var(--ink); text-decoration: none; font: inherit; height: auto; width: 100%; }
  .dash-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; padding: 10px 12px; }
  .dash-row .dash-name { grid-column: 1 / -1; }
  .dash-row .dash-cell:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .dash-row .dash-cell:last-child::before { display: none; }
  .dash-cell::before { font-size: 10px; letter-spacing: .2px; }
  .dash-cell[data-short]::before { content: attr(data-short); }
  .dash-sub { font-size: 12px; }
  .recon-tools .dash-summary { font-size: 13px; }
}
@media (max-width: 759px) { .dash-row .dash-name .muted { display: none; } }

/* Pakiet Start: "X z 10" free invoices this month; yellow from the 8th. */
.start-counter { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.start-counter.warn { background: var(--soon-bg); color: var(--soon-ink); border-color: transparent; }
.start-counter.warn .muted { color: inherit; }
/* The 11th invoice: a full screen with two choices. */
.limit-screen { max-width: 560px; margin: 0 auto; }
.limit-screen h2 { font-size: 20px; margin: 0; }
.limit-choice { display: flex; flex-direction: column; gap: 8px; }
.limit-choice .btn { width: 100%; }
/* First screen after sign-up: connect KSeF, step by step. */
.ksef-guide ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ksef-guide li { display: flex; gap: 10px; align-items: flex-start; }
.ksef-guide .step-no { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--soon-bg); color: var(--soon-ink); }
.ksef-guide li.done .step-no { background: var(--done-bg); color: var(--done-ink); }
.ksef-guide li.done .step-text { text-decoration: line-through; opacity: .7; }
/* A person's own remark on the day (TimeEntry.note) on the Grafik: 📝 */
.g-note.rem { margin-left: 2px; }
.dz-rem { cursor: pointer; border: 0; background: none; padding: 0 2px; font-size: 13px; }
.dz-remark { font-size: 14px; padding: 6px 8px; border-radius: 8px; background: rgba(var(--shadow), .07); white-space: pre-wrap; }
.sw-remark::before { content: "📝 "; }

/* A firm from outside lists its own people (my-work "Moi pracownicy"): one row each. */
.vendor-crew li > form { flex: 1 1 auto; }
.vendor-crew .staff-inline input[name="phone"] { flex: 0 1 200px; }
.vendor-crew .crew-locked { flex: 1 1 160px; padding: 0 2px; }
@media (min-width: 700px) { .vendor-crew .staff-inline { flex-wrap: nowrap; } }
.crew-shifts input.crew-plan { flex: 0 0 120px; width: 120px; }

/* Side-by-side match (partials/match_pair.html): the bank line and an invoice, field by
   field on level rows, a ✓ ≈ ≠ mark in the middle; the other suggestions in the same
   columns under the bank line. Phone: name + mark above, bank left, invoice right. */
.mp { display: flex; flex-direction: column; }
.mp-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); grid-template-areas: "l m r"; }
.mp-l { grid-area: l; } .mp-m { grid-area: m; } .mp-r { grid-area: r; }
.mp-l, .mp-r { background: var(--surface); border: 1px solid var(--line); border-top-color: var(--grid); border-bottom: none; padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.mp-m { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; text-align: center; }
.mp-head .mp-l, .mp-head .mp-r { border-radius: 12px 12px 0 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--on-ink); }
.mp-head .mp-l { background: var(--ink); border-color: var(--ink); }
.mp-head .mp-r { background: var(--accent); border-color: var(--accent); }
.mp-head .mp-r a { color: var(--on-accent); font-weight: 500; font-size: 14px; }
.mp-q { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mp-row:nth-last-child(2) .mp-l, .mp-row:nth-last-child(2) .mp-r { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.mp-lab, .mp-mlab, .mc-headrow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.mp-mlab { display: none; }
.mp-val { font-weight: 500; }
.mp-sub { font-size: 13px; color: var(--muted); }
.mp-chip { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mp-chip.s-ok, .mp-score.s-ok { background: var(--done-bg); color: var(--done-ink); }
.mp-chip.s-near, .mp-score.s-near { background: var(--check-bg); color: var(--check-ink); }
.mp-chip.s-bad, .mp-score.s-bad { background: var(--late-bg); color: var(--late-ink); }
.mp-chip.s-none { background: var(--chip); color: var(--muted); font-weight: 500; }
.mp-foot { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mp-sum { display: flex; align-items: center; gap: 10px; }
.mp-score-text { font-weight: 600; font-size: 16px; }
.mp-dots { display: inline-flex; gap: 4px; }
.mp-dots i { width: 12px; height: 12px; border-radius: 3px; background: var(--cat-self); }
.mp-dots i.s-near { background: var(--cat-partial); } .mp-dots i.s-bad { background: var(--cat-full); }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-score { border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mc-row { display: grid; grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .9fr) 92px; align-items: stretch; }
.mc-headrow { padding: 8px 0 6px; }
.mc-headrow > span { padding: 0 8px; }
.mc-bank { background: var(--ink); color: var(--on-ink); }
.mc-cell { padding: 8px; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-width: 0; overflow-wrap: anywhere; font-size: 14px; border-top: 1px solid var(--grid); }
.mc-bank .mc-cell { border-top: none; }
.mc-cand { cursor: default; }
label.mc-cand { cursor: pointer; }
.mc-ctl { display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--grid); }
.mc-cell.s-ok { background: color-mix(in srgb, var(--done-bg) 45%, var(--surface)); }
.mc-cell.s-near { background: color-mix(in srgb, var(--check-bg) 55%, var(--surface)); }
.mc-cell.s-bad { background: color-mix(in srgb, var(--late-bg) 50%, var(--surface)); }
.mc-note { font-size: 12px; font-weight: 600; color: var(--muted); }
.s-ok > .mc-note { color: var(--done-ink); } .s-near > .mc-note { color: var(--check-ink); } .s-bad > .mc-note { color: var(--late-ink); }
.mc-kind { font-size: 12px; color: var(--muted); }
.mc-bank .mc-amt { font-weight: 600; }
.mc-score { align-items: flex-start; }
.mc-cand:has(input:checked) .mc-ctl, .mc-cand:has(input:checked) .mc-doc { background: var(--accent-soft-2); }
.mc .more-fold > summary { padding: 10px 12px; border-top: 1px solid var(--grid); }
.mc .more-fold-body { gap: 0; padding: 0; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--grid); }
.mc-cand .btn { height: 32px; font-size: 13px; padding: 0 10px; }
.mp-others { margin-top: 14px; }
/* Already matched (invoice page): the same pair, smaller. */
.mp-done { font-size: 14px; }
.mp-done .mp-row { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); }
.mp-done .mp-l, .mp-done .mp-r { padding: 6px 12px; }
.mp-done .mp-chip { font-size: 12px; padding: 2px 8px; }
.mp-done .mp-foot { margin-top: 6px; }
.mp-done .mp-score-text { font-size: 14px; }
@media (max-width: 640px) {
  .mp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "m m" "l r"; background: var(--surface); border: 1px solid var(--line); border-bottom: none; }
  .mp-row:nth-last-child(2) { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; }
  .mp-l, .mp-r, .mp-row:nth-last-child(2) .mp-l, .mp-row:nth-last-child(2) .mp-r { border: none; border-radius: 0; padding: 2px 12px 10px; }
  .mp-m { flex-direction: row; justify-content: space-between; padding: 8px 12px 2px; }
  .mp-mlab { display: inline; }
  .mp-lab { display: none; }
  .mp-head { border: none; background: transparent; grid-template-areas: "l r"; }
  .mp-head .mp-m { display: none; }
  .mp-head .mp-l, .mp-head .mp-r { padding: 8px 12px; border-radius: 0; }
  .mp-head .mp-l { border-radius: 12px 0 0 0; } .mp-head .mp-r { border-radius: 0 12px 0 0; }
  .mp-head .mp-r a { font-size: 12px; }
  .mp-chip { font-size: 12px; padding: 2px 8px; }
  .mp-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .mp-actions form, .mp-actions .btn { width: 100%; }
  .mc { border: none; gap: 10px; overflow: visible; }
  .mc .mc-headrow { display: none; }
  .mc-row { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
  .mc-bank { background: var(--ink); }
  .mc-bank > span:empty { display: none; }
  .mc-cell { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 8px; padding: 6px 12px; }
  .mc-cell::before { content: attr(data-label); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; grid-row: span 2; align-self: start; padding-top: 2px; }
  .mc-bank .mc-cell::before { color: var(--chip); }
  .mc-cell > * { grid-column: 2; }
  .mc-ctl { justify-content: flex-start; padding: 10px 12px; border: none; order: 9; }
  .mc-ctl input { width: 22px; height: 22px; }
  .mp-head .mp-r { font-size: 14px; } .mp-head .mp-r a { white-space: nowrap; }
  .mc-ctl:empty { display: none; }
  .mc-cand .btn { height: 40px; width: 100%; }
  .mc-ctl form { width: 100%; }
  .mc-score { order: -1; }
  .mc .more-fold > summary { border: none; }
  .mc .more-fold-body { display: flex; flex-direction: column; gap: 10px; }
}
.mc-v .mp-sub { display: block; font-size: 12px; font-weight: 400; }
@media (max-width: 640px) { .mp-others + .mc .mc-bank { display: none; } }
/* Desktop: a ✓ alone in the narrow control column; phone: the word too. Hidden visually, still read out. */
.mc-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) { .mc-btn-text { position: static; width: auto; height: auto; clip: auto; margin-left: 6px; } }
.mp-head .mp-r.mp-booking { background: var(--cat-rooms); border-color: var(--cat-rooms); }
.mp-head .mp-l a { color: var(--on-ink); font-weight: 500; font-size: 14px; }
.hotel-pay-offer .mp { flex: 1; }
.hotel-pay-offer:has(.mp) { display: block; border: none; padding: 0; margin-top: 8px; }
.hotel-pay-offer:has(.mp) .btn { height: 44px; font-size: 15px; }
.mp-m .mp-chip { white-space: normal; }

/* Category rules with conditions (bank_rule.html) and the quick switch on a line. */
.bank-cat-vendor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bank-cat-vendor select { max-width: 260px; }
.rule-form { display: flex; flex-direction: column; gap: 12px; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rule-found { list-style: none; margin: 0; padding: 0; }
.rule-found-row { display: grid; grid-template-columns: 24px 90px minmax(0, 1fr) 120px 200px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rule-found-row .num { text-align: right; white-space: nowrap; }
.rule-found-row .num.in { color: var(--done-ink); }
.rule-future { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
@media (max-width: 720px) {
  .rule-found-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .rule-found-row > .muted:nth-of-type(1) { display: none; }
  .rule-found-row > .cat-sub { grid-column: 2 / -1; }
}

/* One colour per kind of document, everywhere it is compared (Allegro purchases, the bank
   line's matching): a bank line dark navy and an invoice teal-green as on the bank
   line's matching (.mp-head, .mc-bank), an Allegro purchase in Allegro's orange (as the
   "A" on invoices). Solid headers with
   white text; light shades of the same for boxes and totals. */
:root { --allegro: #FF5A00; --k-buy-solid: var(--allegro); --k-buy-bg: color-mix(in srgb, var(--allegro) 14%, var(--surface)); --k-buy-ink: color-mix(in srgb, var(--allegro) 55%, var(--ink)); --k-buy-dot: var(--allegro);
  --k-inv-solid: var(--accent); --k-inv-bg: var(--note-green-bg); --k-inv-ink: var(--note-green-ink); --k-inv-dot: var(--accent);
  --k-bank-solid: var(--ink); --k-bank-bg: color-mix(in srgb, var(--ink) 10%, var(--surface)); --k-bank-ink: var(--ink); --k-bank-dot: var(--ink); }

/* Allegro purchases, three columns (shop_purchases.html): purchase | invoice | bank line,
   rows level, ✓ / ≈ / ≠ between the columns. On a phone the three stack per row. */
.m3 { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr) 140px minmax(0, 1fr); margin-top: 12px; }
.m3.no-bank { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); }
.m3-row { display: contents; }
.m3-a, .m3-i, .m3-b { background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--grid); border-bottom: none; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.m3-a { border-left: 4px solid var(--k-buy-dot); } .m3-i { border-left: 4px solid var(--k-inv-dot); } .m3-b { border-left: 4px solid var(--k-bank-dot); }
.m3-x, .m3-y { display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; }
.m3-x .mp-chip, .m3-y .mp-chip { white-space: normal; }
.m3-head > div { font-weight: 600; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; border-radius: 12px 12px 0 0; }
.m3-head .m3-a { background: var(--k-buy-solid); color: var(--on-ink); border-color: var(--k-buy-solid); }
.m3-head .m3-i { background: var(--k-inv-solid); color: var(--on-accent); border-color: var(--k-inv-solid); }
.m3-head .m3-b { background: var(--k-bank-solid); color: var(--on-ink); border-color: var(--k-bank-solid); }
.m3-head .m3-b a { color: inherit; font-weight: 500; font-size: 14px; }
.m3-head > div { padding-top: 11px; padding-bottom: 11px; }
.m3-head .m3-x, .m3-head .m3-y { border-radius: 0; }
.m3-next > .m3-a, .m3-next > .m3-i { border-top: 3px solid var(--line); }
.m3-blank.m3-b { border-top-color: transparent; }
.m3-acts > .m3-a, .m3-acts > .m3-i, .m3-acts > .m3-b { border-top-style: dashed; gap: 6px; }
.m3-acts .mp-sum { gap: 8px; } .m3-acts .mp-score-text { font-size: 14px; }
.m3-row:last-child > .m3-a, .m3-row:last-child > .m3-i, .m3-row:last-child > .m3-b { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.m3 .shop-choose summary { font-size: 14px; }
@media (max-width: 760px) {
  .m3, .m3.no-bank { display: flex; flex-direction: column; gap: 0; }
  .m3-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0; border-top: 1px solid var(--grid); }
  .m3-head { flex-direction: row; flex-wrap: wrap; gap: 6px; border: none; padding-top: 0; }
  .m3-head > div { border-radius: 999px; padding: 2px 10px; font-size: 12px; }
  .m3-head .m3-x, .m3-head .m3-y { display: none; }
  .m3-a, .m3-i, .m3-b { border: none; border-left: 4px solid; border-radius: 0 8px 8px 0; padding: 6px 10px; }
  .m3-a { border-left-color: var(--k-buy-dot); background: color-mix(in srgb, var(--k-buy-bg) 45%, var(--surface)); }
  .m3-i { border-left-color: var(--k-inv-dot); background: color-mix(in srgb, var(--k-inv-bg) 45%, var(--surface)); }
  .m3-b { border-left-color: var(--k-bank-dot); background: color-mix(in srgb, var(--k-bank-bg) 45%, var(--surface)); }
  .m3-head .m3-a, .m3-head .m3-i, .m3-head .m3-b { border: none; }
  .m3-x, .m3-y { justify-content: flex-start; padding: 0 0 0 14px; }
  .m3-x:empty, .m3-y:empty, .m3-blank { display: none; }
  .m3-next { border-top: 3px solid var(--line); }
  .m3-row:last-child > .m3-a, .m3-row:last-child > .m3-i, .m3-row:last-child > .m3-b { border-bottom: none; border-radius: 0 8px 8px 0; }
}
.mp-line { display: block; }
.mp-line + .mp-line { margin-top: 4px; }
.mp-line .muted { font-weight: 400; font-size: 13px; white-space: nowrap; }
.m3 .mp-chip { font-size: 12px; padding: 3px 9px; }
@media (max-width: 760px) {
  .m3-acts > .m3-a, .m3-acts > .m3-i, .m3-acts > .m3-b { border-top: none; }
  .m3 .m3-a > .mp-lab { display: block; }
}

/* What is left to do for an Allegro payment, on top of it. */
.shop-todo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.shop-todo .shop-match { margin: 0; }
.shop-todo.t-done { background: var(--done-bg); color: var(--done-ink); font-weight: 600; }
.shop-todo.t-todo { background: var(--check-bg); color: var(--check-ink); border-left: 4px solid var(--warn, #B54708); }
.shop-todo.t-wait { background: var(--chip); color: var(--ink-2); }
/* The phone's comparison table (hidden on a computer, where the columns show). */
.m3p { display: none; }
.m3t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.m3t th, .m3t td { padding: 6px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; border-top: 1px solid var(--grid); }
.m3t thead th { color: var(--on-ink); font-weight: 600; border: none; border-radius: 8px 8px 0 0; }
.m3t thead th:first-child { width: 66px; background: none; }
.m3t thead .k-buy { background: var(--k-buy-solid); } .m3t thead .k-inv { background: var(--k-inv-solid); } .m3t thead .k-bank { background: var(--k-bank-solid); }
.m3t tbody th { font-size: 10px; overflow-wrap: normal; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.m3t td.s-ok { background: color-mix(in srgb, var(--done-bg) 60%, var(--surface)); }
.m3t td.s-near { background: color-mix(in srgb, var(--check-bg) 70%, var(--surface)); }
.m3t td.s-bad { background: color-mix(in srgb, var(--late-bg) 70%, var(--surface)); }
.m3t-mark { font-weight: 700; }
.s-ok > .m3t-mark { color: var(--done-ink); } .s-near > .m3t-mark { color: var(--check-ink); } .s-bad > .m3t-mark { color: var(--late-ink); }
.m3t-notes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m3t-notes:empty { display: none; }
.m3t-notes .mp-chip { white-space: normal; }
@media (max-width: 760px) {
  .m3 .m3-data { display: none; }
  .m3 .m3p { display: block; padding: 4px 0 0; border: none; }
  .m3-acts { padding-top: 4px; border-top: none; }
  .m3-acts > .m3-i, .m3-acts > .m3-b { background: none; border-left-width: 3px; }
}
/* The invoice pinned on top of the bank lines that may pay it (invoice.html), in the
   invoice's colour of the pair. */
.mc-inv { background: var(--accent); color: var(--on-accent); }
.mc-inv .mc-cell { border-top: none; }
.mc-inv .mc-amt { font-weight: 600; }
.mc-inv .mp-sub { color: inherit; opacity: .8; }
@media (max-width: 640px) { .mc-inv .mc-cell::before { color: var(--on-accent); opacity: .75; } .mc-inv > span:empty { display: none; } }
/* A date never breaks inside ("06.11.202 / 6"): the date column keeps room for one. */
@media (min-width: 641px) { .mc-row { grid-template-columns: 36px minmax(0, 1.1fr) minmax(104px, .9fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(96px, .9fr) 92px; } }
.quick-cat { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.quick-cat form { margin: 0; }
/* Vendor page: every category this party's payments land in. */
.vendor-cats-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vendor-cat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); text-decoration: none; background: var(--surface); }
.vendor-cat-chip:hover { border-color: var(--field); }
.vendor-cat-list { list-style: none; margin: 0; padding: 0; }
.vendor-cat-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.vendor-cat-list li:first-child { border-top: 0; }
.vendor-cat-all { margin-top: 10px; }
.vendor-cat-all + .paid-row { margin-top: 6px; }
/* Płatności bez faktury: the same category buttons as an opened Wyciąg line. */
.bank-cat-quick { grid-column: 1 / -1; padding-left: 28px; }
.bank-cat-quick .cat-pick { min-width: 180px; }
.vendor-cat-box { display: flex; flex-direction: column; gap: 10px; }
.vendor-cat-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.vendor-cat-main .cat-pick { flex: 1; max-width: 420px; }

/* Faktury cykliczne (recurring.html, recurring_item.html) */
.facts { margin: 0; display: grid; gap: 6px; }
.facts > div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 8px; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; }
.recurring-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.recurring-lines td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.recurring-lines td.num { text-align: right; padding-left: 8px; white-space: nowrap; }
.recurring-row .row { gap: 8px; }

/* Notes shared with a firm from outside (staff_external.html, my_docs.html). */
.firm-notes li { align-items: flex-start; }
.firm-note-body { white-space: pre-line; overflow-wrap: anywhere; margin: 4px 0; }

/* Cennik tabs (partials/price_tabs.html): the same look as the Umowy tabs, as buttons on
   the Cennik page and as links on the pantry list. */
.price-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.price-tabs > a, .price-tabs > button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 12px; cursor: pointer; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.price-tabs > [aria-selected="true"], .price-tabs > [aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.price-tabs > a:hover { color: var(--ink); }

/* Housekeeping (hotel_cleaning.html): the day's cleans of the rooms between stays. */
.clean-days { gap: 8px; align-items: center; flex-wrap: wrap; }
.clean-day { font-size: 18px; margin: 0 4px; }
.clean-list > li { display: flex; flex-direction: column; gap: 4px; }
.clean-head { justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.clean-assign, .clean-add { gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.clean-items { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }