/* XEFOMORPH — interfejs. Płaski, kafelkowy, wysoki kontrast. Krój: Atkinson Hyperlegible Next (czytelność),
   Bricolage Grotesque (tylko liczby i nagłówki), JetBrains Mono (numery KSeF). */

:root {
  --ink: #0f1a2e;
  --ink-2: #4a586f;          /* tekst pomocniczy, kontrast ≥ 5,5:1 na papierze */
  --paper: #ecf0f4;
  --card: #ffffff;
  --line: #d3dae3;
  --action: #2b3fe0;
  --action-ink: #ffffff;
  --action-soft: #e6e9fc;
  --ok: #137a5a;   --ok-soft: #dcf2ea;
  --warn: #8f5400; --warn-soft: #fff0d3;
  --bad: #b3261e;  --bad-soft: #fde4e1;
  --shadow: 0 1px 0 rgba(15, 26, 46, .06);
  --r: 14px;
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8edf5; --ink-2: #a9b6cb; --paper: #0d1420; --card: #152033; --line: #2a3850;
    --action: #8b9bff; --action-ink: #0d1420; --action-soft: #1d2a52;
    --ok: #4cc9a0; --ok-soft: #12352b; --warn: #f2b24a; --warn-soft: #3a2a0c; --bad: #ff8a80; --bad-soft: #3d1815;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --ink: #e8edf5; --ink-2: #a9b6cb; --paper: #0d1420; --card: #152033; --line: #2a3850;
  --action: #8b9bff; --action-ink: #0d1420; --action-soft: #1d2a52;
  --ok: #4cc9a0; --ok-soft: #12352b; --warn: #f2b24a; --warn-soft: #3a2a0c; --bad: #ff8a80; --bad-soft: #3d1815;
  --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--font); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 .6em; }
a { color: var(--action); }
.mono { font-family: var(--mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-2); }
.small { font-size: .92rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- powłoka ---- */
.top { position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { font: 800 1.35rem/1 var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand b { color: var(--action); }
.top .grow { flex: 1; }
.who { color: var(--ink-2); font-size: .95rem; }
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 120px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; margin: 0 0 6px -4px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.back:hover { color: var(--ink); }
.page-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-h .sub { color: var(--ink-2); }

/* ---- przyciski i pola ---- */
button, .btn { font: 500 1rem/1 var(--font); min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--ink-2); }
button.primary, .btn.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 700; }
button.primary:hover { filter: brightness(1.08); }
button.ghost { border-color: transparent; background: transparent; color: var(--action); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.sm { min-height: 38px; padding: 0 12px; font-size: .95rem; border-radius: 10px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; min-height: 46px; padding: 8px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--action); }
label.f { display: block; font-weight: 500; margin: 0 0 12px; }
label.f > span { display: block; margin-bottom: 4px; font-size: .95rem; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- zdanie dnia + pasek obiegu ---- */
.today { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 18px; box-shadow: var(--shadow); }
.today h1 { max-width: 30ch; }
.today h1 em { font-style: normal; color: var(--action); white-space: nowrap; }
.today .lead { margin: 10px 0 16px; color: var(--ink-2); max-width: 62ch; }
.loop { margin-top: 20px; }
.loop-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--line); }
.loop-bar i { display: block; min-width: 4px; }
.loop-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .95rem; }
.loop-legend span { display: inline-flex; align-items: center; gap: 7px; }
.loop-legend b { font-variant-numeric: tabular-nums; }
.dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.c-todo { background: var(--action); } .c-way { background: var(--warn); } .c-manual { background: #6f7f99; }
.c-ok { background: var(--ok); } .c-ign { background: var(--line); border: 1px solid var(--ink-2); }

/* ---- kafelki ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 16px 18px 16px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); text-align: left; cursor: pointer; }
.tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 0 4px 4px 0; background: var(--line); }
.tile.ok::before { background: var(--ok); } .tile.warn::before { background: var(--warn); } .tile.bad::before { background: var(--bad); } .tile.act::before { background: var(--action); }
.tile:hover { border-color: var(--ink-2); }
.tile .k { font-size: .98rem; color: var(--ink-2); font-weight: 500; }
.tile .v { font: 800 2.3rem/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .v small { font: 500 1rem var(--font); color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.tile .h { color: var(--ink-2); font-size: .93rem; margin-top: auto; }
.tile.wide { grid-column: span 2; }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .tile { min-height: 118px; padding: 14px 12px 14px 18px; } .tile .v { font-size: 1.9rem; } .tile.wide { grid-column: span 2; } }

/* ---- listy ---- */
.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.group-h { padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; gap: 8px; }
.group-h.late { color: var(--bad); }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 64px; }
.item:last-child { border-bottom: 0; }
.item.clickable { cursor: pointer; }
.item.clickable:hover { background: color-mix(in srgb, var(--action) 5%, var(--card)); }
.item .who-line { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.item .meta { color: var(--ink-2); font-size: .93rem; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; }
.item .amt { font: 700 1.12rem var(--display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.item .amt small { display: block; font: 400 .85rem var(--font); color: var(--ink-2); }
.item.off { opacity: .72; }
.item .main { min-width: 0; }
@media (max-width: 560px) { .item { grid-template-columns: auto 1fr; } .item .amt { grid-column: 2; text-align: left; } }

/* zaznaczanie (duży, czytelny przełącznik) */
.check { position: relative; width: 30px; height: 30px; flex: none; }
.check input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; min-height: 0; }
.check span { position: absolute; inset: 0; border: 2px solid var(--ink-2); border-radius: 9px; background: var(--card); display: grid; place-items: center; }
.check input:checked + span { background: var(--action); border-color: var(--action); }
.check input:checked + span::after { content: ""; width: 9px; height: 16px; border: solid var(--action-ink); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -2px); }
.check input:focus-visible + span { outline: 3px solid var(--action); outline-offset: 2px; }
.check input:disabled { cursor: not-allowed; } .check input:disabled + span { border-color: var(--line); background: var(--paper); }

/* ---- znaczniki ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: .84rem; font-weight: 700; background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.chip.act { background: var(--action-soft); color: var(--action); border-color: transparent; }

/* ---- pasek zaznaczenia (przyklejony) ---- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 26, 46, .08); }
.bar-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; }
.bar .tot { flex: 1; min-width: 0; }
.bar .tot b { font: 800 1.5rem var(--display); font-variant-numeric: tabular-nums; }
.bar .tot span { display: block; color: var(--ink-2); font-size: .92rem; }

/* ---- karty i podsumowania ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h2 { margin-bottom: 8px; }
.card.warn { border-color: var(--warn); background: var(--warn-soft); }
.card.bad { border-color: var(--bad); background: var(--bad-soft); }
.card.ok { border-color: var(--ok); background: var(--ok-soft); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 500; }
table.t { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.t th { text-align: left; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; }
table.t td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.r, table.t th.r { text-align: right; }
.scroll-x { overflow-x: auto; }

.drop { border: 2.5px dashed var(--ink-2); border-radius: var(--r); padding: 34px 20px; text-align: center; background: var(--card); cursor: pointer; }
.drop.over { border-color: var(--action); background: var(--action-soft); }
.drop b { font: 800 1.3rem var(--display); display: block; margin-bottom: 4px; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 0; }
.steps li { counter-increment: s; display: flex; gap: 12px; padding: 6px 0; align-items: baseline; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.seg button { min-height: 40px; border-radius: 20px; padding: 0 14px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.search { max-width: 420px; }

/* ---- dialog, toast, asystent ---- */
dialog { border: 0; border-radius: 18px; padding: 22px; max-width: min(520px, calc(100vw - 24px)); width: 100%; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog::backdrop { background: rgba(10, 16, 28, .55); }
dialog h2 { margin-bottom: 8px; }
dialog .row-actions { margin-top: 16px; justify-content: flex-end; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--card); padding: 12px 18px; border-radius: 12px; max-width: calc(100vw - 32px); font-weight: 500; }
.toast.err { background: var(--bad); color: #fff; }
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 30; min-height: 52px; padding: 0 20px; border-radius: 26px; box-shadow: 0 6px 24px rgba(15, 26, 46, .3); }
body.has-bar .fab { bottom: 92px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 40; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0, 0, 0, .2); }
.drawer-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.drawer-h h2 { flex: 1; }
.msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.u { align-self: flex-end; background: var(--action); color: var(--action-ink); }
.msg.a { align-self: flex-start; background: var(--paper); }
.msg.a p { margin: 0 0 .5em; }
.acard { border: 1.5px solid var(--action); border-radius: 12px; padding: 12px; background: var(--action-soft); }
.acard .row-actions { margin-top: 10px; }
.compose { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.compose textarea { min-height: 46px; max-height: 120px; resize: none; }
.hints { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; }

.login { max-width: 420px; margin: 8vh auto 0; }
.login .brand { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--action); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.empty { padding: 34px 20px; text-align: center; color: var(--ink-2); }
.empty b { display: block; color: var(--ink); font: 800 1.2rem var(--display); margin-bottom: 4px; }
@media print { .no-print, .top, .bar, .fab, .back, .row-actions, .drawer { display: none !important; } body { background: #fff; } }