/* Handlowa 7 preview. Consumes design-tokens.css. No raw values that a token covers.
   Read-only preview build following docs/design/design-spec.md. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--h7-font-sans);
  font-size: var(--h7-text-body); line-height: var(--h7-lh-body);
  color: var(--h7-ink); background: var(--h7-canvas);
  -webkit-font-smoothing: antialiased;
}
.num, .money, .r { font-feature-settings: var(--h7-font-numeric); }
.mono { font-family: var(--h7-font-mono); }
a { color: var(--h7-primary); text-decoration: none; }
a:hover { color: var(--h7-primary-deep); }
:focus-visible { outline: none; box-shadow: var(--h7-focus-ring); border-radius: var(--h7-radius-sm); }
.boot { padding: var(--h7-space-16); text-align: center; color: var(--h7-text-muted); }

/* ---- App shell ---- */
.shell { display: grid; grid-template-columns: var(--h7-sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--h7-canvas); border-right: var(--h7-border-hairline);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { height: var(--h7-topbar-h); display: flex; align-items: center; padding: 0 var(--h7-space-5);
  font-weight: var(--h7-weight-heading); font-size: var(--h7-text-h2); }
.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--h7-space-3); flex: 1; }
.nav a { display: flex; align-items: center; gap: var(--h7-space-3); height: 40px; padding: 0 var(--h7-space-3);
  border-radius: var(--h7-radius-sm); color: var(--h7-ink); font-size: var(--h7-text-body); transition: background var(--h7-motion-fast); }
.nav a:hover { background: var(--h7-surface-tint); }
.nav a[aria-current="page"] { background: var(--h7-primary-wash); color: var(--h7-primary); font-weight: var(--h7-weight-medium); }
.nav a .ic { width: 18px; text-align: center; opacity: .8; }
.side-foot { padding: var(--h7-space-4) var(--h7-space-5); color: var(--h7-text-muted); font-size: var(--h7-text-caption); }

.topbar, .tabbar { display: none; }
.main { min-width: 0; }
.content { max-width: var(--h7-content-max); margin: 0 auto; padding: var(--h7-space-8); }

.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--h7-space-4); margin-bottom: var(--h7-space-6); flex-wrap: wrap; }
.title { font-size: var(--h7-text-display); line-height: var(--h7-lh-display); font-weight: var(--h7-weight-heading); }
.eyebrow, .th, th { font-size: var(--h7-text-label); font-weight: var(--h7-weight-heading); text-transform: uppercase; letter-spacing: var(--h7-ls-label); color: var(--h7-text-muted); }
.muted { color: var(--h7-text-muted); }
.caption { font-size: var(--h7-text-caption); color: var(--h7-text-muted); }

/* ---- Month picker / controls ---- */
.control { display: inline-flex; align-items: center; gap: var(--h7-space-2); height: 40px; padding: 0 var(--h7-space-4);
  background: var(--h7-surface); border: var(--h7-border-hairline); border-radius: var(--h7-radius-sm); box-shadow: var(--h7-elev-raised); font-weight: var(--h7-weight-medium); }

/* ---- Cards ---- */
.grid { display: grid; gap: var(--h7-space-5); }
.grid-2col { grid-template-columns: 2fr 1fr; align-items: start; }
.grid-3col { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--h7-surface); border-radius: var(--h7-radius-md); box-shadow: var(--h7-elev-floating), var(--h7-edge-lit); padding: var(--h7-space-5); }
.card > h2 { font-size: var(--h7-text-h2); font-weight: var(--h7-weight-heading); margin: 0 0 var(--h7-space-4); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--h7-space-3); margin-bottom: var(--h7-space-4); }
.kpi .lbl { font-size: var(--h7-text-label); text-transform: uppercase; letter-spacing: var(--h7-ls-label); color: var(--h7-text-muted); }
.kpi .val { font-size: var(--h7-text-num-lg); line-height: var(--h7-lh-num); font-weight: var(--h7-weight-heading); font-feature-settings: var(--h7-font-numeric); margin: var(--h7-space-2) 0 var(--h7-space-1); }

/* ---- Buttons ---- */
.btn { height: 40px; padding: 0 var(--h7-space-4); border-radius: var(--h7-radius-sm); font: inherit; font-weight: var(--h7-weight-medium);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--h7-space-2); border: 1px solid transparent; transition: background var(--h7-motion); }
.btn.primary { background: var(--h7-primary); color: #fff; }
.btn.primary:hover { background: var(--h7-primary-deep); }
.btn.secondary { background: var(--h7-surface); border-color: var(--h7-line-strong); color: var(--h7-ink); }
.btn.tertiary { background: none; color: var(--h7-primary); padding: 0 var(--h7-space-2); height: auto; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Segmented ---- */
.segmented { display: inline-flex; background: var(--h7-surface); border: var(--h7-border-hairline); border-radius: var(--h7-radius-sm); box-shadow: var(--h7-elev-raised); overflow: hidden; }
.segmented button { border: 0; background: none; font: inherit; padding: 0 var(--h7-space-4); height: 38px; cursor: pointer; color: var(--h7-ink); }
.segmented button[aria-pressed="true"] { background: var(--h7-primary-wash); color: var(--h7-primary); font-weight: var(--h7-weight-medium); }

/* ---- Status chips ---- */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 2px var(--h7-space-3); border-radius: var(--h7-radius-pill);
  font-size: 12px; border: 1px solid; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; }
.chip.done { color: var(--h7-success); border-color: var(--h7-success); background: var(--h7-success-wash); }
.chip.done::before { background: var(--h7-success); }
.chip.todo { color: var(--h7-text-muted); border-color: var(--h7-line-strong); }
.chip.todo::before { background: transparent; border: 1px solid var(--h7-ink); }
.chip.warn { color: var(--h7-warning); border-color: var(--h7-warning-mark); background: var(--h7-warning-wash); }
.chip.warn::before { background: var(--h7-warning-mark); border-radius: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--h7-warning-mark); }

/* ---- Tables (floating rows) ---- */
.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0 var(--h7-space-2); }
table.data th { text-align: left; padding: var(--h7-space-2) var(--h7-space-3); }
table.data th.r, table.data td.r { text-align: right; font-feature-settings: var(--h7-font-numeric); }
table.data td { background: var(--h7-surface); padding: var(--h7-space-3); box-shadow: var(--h7-elev-floating); }
table.data tbody tr td:first-child { border-radius: var(--h7-radius-md) 0 0 var(--h7-radius-md); }
table.data tbody tr td:last-child { border-radius: 0 var(--h7-radius-md) var(--h7-radius-md) 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { transform: translateY(-1px); box-shadow: var(--h7-elev-lifted); }
.primary-cell { font-weight: var(--h7-weight-medium); }
.sub { font-size: var(--h7-text-caption); color: var(--h7-text-muted); }

/* ---- Checklist ---- */
.checklist { display: flex; flex-direction: column; gap: var(--h7-space-2); }
.check-row { display: flex; align-items: center; gap: var(--h7-space-3); padding: var(--h7-space-3); border-radius: var(--h7-radius-sm); }
.check-row:hover { background: var(--h7-surface-tint); }
.check-row .lbl { flex: 1; }

/* ---- Wizard stepper ---- */
.stepper { display: flex; align-items: center; gap: var(--h7-space-2); flex-wrap: wrap; margin-bottom: var(--h7-space-5); }
.step { display: inline-flex; align-items: center; gap: var(--h7-space-2); padding: var(--h7-space-2) var(--h7-space-3); border-radius: var(--h7-radius-pill); }
.step .dot { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: var(--h7-weight-medium); }
.step.done .dot { background: var(--h7-success); color: #fff; }
.step.current { background: var(--h7-primary-wash); }
.step.current .dot { background: var(--h7-primary); color: #fff; }
.step.upcoming .dot { border: 1px solid var(--h7-line-strong); color: var(--h7-text-muted); }
.step.current .st-label { font-weight: var(--h7-weight-heading); }
.step .connector { width: 24px; height: 1px; background: var(--h7-line); }

/* ---- Wizard panel ---- */
.wizard { background: var(--h7-surface); border-radius: var(--h7-radius-lg); box-shadow: var(--h7-elev-floating), var(--h7-edge-lit); padding: var(--h7-space-6); }
.wizard .panel-head { font-size: var(--h7-text-h2); font-weight: var(--h7-weight-heading); margin-bottom: var(--h7-space-5); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--h7-space-4); }
.field label { display: block; font-size: var(--h7-text-label); text-transform: uppercase; letter-spacing: var(--h7-ls-label); color: var(--h7-text-muted); margin-bottom: var(--h7-space-1); }
.field .ro { background: var(--h7-surface-tint); border: 0; border-radius: var(--h7-radius-sm); padding: var(--h7-space-3); font-feature-settings: var(--h7-font-numeric); font-size: var(--h7-text-body-lg); }
.info-banner { background: var(--h7-surface-tint); border-radius: var(--h7-radius-md); padding: var(--h7-space-3) var(--h7-space-4); display: flex; gap: var(--h7-space-3); align-items: center; margin: var(--h7-space-4) 0; }
.info-banner::before { content: "i"; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--h7-ink); display: grid; place-items: center; font-size: 12px; flex: none; }

/* ---- Meter cards (Liczniki mobile-first) ---- */
.progress { display: flex; align-items: center; gap: var(--h7-space-3); margin-bottom: var(--h7-space-5); }
.progress .bar { flex: 1; height: 4px; background: var(--h7-line); border-radius: 999px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--h7-primary); }
.meter-group h3 { font-size: var(--h7-text-label); text-transform: uppercase; letter-spacing: var(--h7-ls-label); color: var(--h7-text-muted); margin: var(--h7-space-5) 0 var(--h7-space-3); }
.meter-card { background: var(--h7-surface); border-radius: var(--h7-radius-md); box-shadow: var(--h7-elev-floating), var(--h7-edge-lit); padding: var(--h7-space-4); margin-bottom: var(--h7-space-3); }
.meter-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--h7-space-3); }
.meter-card .mname { font-size: var(--h7-text-body-lg); font-weight: var(--h7-weight-medium); }
.meter-card .prev { margin: var(--h7-space-3) 0; }
.meter-card .prev b { font-feature-settings: var(--h7-font-numeric); }
.meter-input { width: 100%; height: var(--h7-touch-lg); border: var(--h7-border-input); border-radius: var(--h7-radius-sm);
  font-size: var(--h7-text-num-xl); font-feature-settings: var(--h7-font-numeric); text-align: right; padding: 0 var(--h7-space-4); background: var(--h7-surface-tint); }
.consumption { margin-top: var(--h7-space-3); font-feature-settings: var(--h7-font-numeric); }

/* ---- Invoice preview (print layout) ---- */
.viewer { background: var(--h7-canvas); border-radius: var(--h7-radius-md); padding: var(--h7-space-6); }
.viewer-toolbar { display: flex; justify-content: flex-end; gap: var(--h7-space-3); margin-bottom: var(--h7-space-5); }
.paper { background: #fff; color: var(--h7-print-ink); width: 178mm; max-width: 100%; margin: 0 auto; padding: 14mm; box-shadow: var(--h7-elev-lifted);
  font-size: 9.5pt; line-height: 1.45; }
.paper .doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--h7-space-5); }
.paper .logo-box { width: 52mm; height: 16mm; border: .5pt dashed #999; display: grid; place-items: center; color: #999; font-size: 8pt; }
.paper .meta { text-align: right; }
.paper .meta .fv { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; }
.paper .meta .nr { font-size: 14pt; font-weight: 700; font-family: var(--h7-font-mono); }
.paper .meta table { margin-left: auto; margin-top: 4px; }
.paper .meta td { padding: 1px 0 1px 10px; }
.paper .meta td.k { color: #444; font-size: 8pt; }
.paper .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-bottom: var(--h7-space-4); }
.paper .party { border: .5pt solid #999; padding: 4mm; }
.paper .party .lab { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #444; }
.paper .party .lname { font-size: 10.5pt; font-weight: 700; }
.paper table.lines { width: 100%; border-collapse: collapse; margin: var(--h7-space-3) 0; }
.paper table.lines th { background: #F2F2F2; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 2mm; border-top: .5pt solid #111; border-bottom: .5pt solid #111; }
.paper table.lines td { padding: 1.6mm 2mm; border-bottom: .5pt solid #999; vertical-align: top; }
.paper table.lines td.r, .paper table.lines th.r { text-align: right; font-feature-settings: var(--h7-font-numeric); }
.paper .summary { width: 88mm; margin-left: auto; margin-top: var(--h7-space-3); }
.paper .summary table { width: 100%; border-collapse: collapse; }
.paper .summary td { padding: 1mm 2mm; font-feature-settings: var(--h7-font-numeric); }
.paper .summary td.r { text-align: right; }
.paper .summary .razem td { border-top: 1pt solid #111; font-weight: 700; }
.paper .due { border: 1pt solid #111; padding: 2mm; margin: var(--h7-space-3) 0 var(--h7-space-2); font-size: 12pt; font-weight: 700; text-align: right; }
.paper .words { font-style: italic; margin-bottom: var(--h7-space-4); }
.paper .bank { font-family: var(--h7-font-mono); font-size: 10pt; }
.paper .appendix { margin-top: var(--h7-space-6); border-top: .5pt solid #999; padding-top: var(--h7-space-4); }
.paper .appendix table { width: 100%; border-collapse: collapse; }
.paper .appendix th { background: #F2F2F2; font-size: 8pt; text-transform: uppercase; text-align: left; padding: 2mm; }
.paper .appendix td { padding: 1.6mm 2mm; border-bottom: .5pt solid #999; }
.paper .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: var(--h7-space-12); }
.paper .sign .rule { border-top: .5pt dotted #111; padding-top: 2mm; text-align: center; font-size: 7.5pt; }

/* ---- Empty state ---- */
.empty { text-align: center; padding: var(--h7-space-16) var(--h7-space-8); color: var(--h7-text-muted); }
.empty .big { font-size: 32px; opacity: .5; margin-bottom: var(--h7-space-3); }

/* ---- Login gate ---- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--h7-space-6); }
.gate .card { width: 360px; max-width: 100%; }

/* ---- Filters ---- */
.filters { display: flex; gap: var(--h7-space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--h7-space-5); }
.filters input[type="search"] { height: 40px; border: var(--h7-border-input); border-radius: var(--h7-radius-sm); padding: 0 var(--h7-space-3); font: inherit; min-width: 200px; }

/* ---- Verification strip ---- */
.verify { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--h7-space-4); margin: var(--h7-space-4) 0; }
.verify .cell { background: var(--h7-surface-tint); border-radius: var(--h7-radius-md); padding: var(--h7-space-4); }
.verify .cell .v { font-size: var(--h7-text-num-lg); font-weight: var(--h7-weight-heading); font-feature-settings: var(--h7-font-numeric); }

/* ---- Invoice scale-to-fit frame (mobile). JS sets the scale; print resets. ---- */
.paper-frame { display: flex; justify-content: center; overflow: hidden; }
.paper-frame .paper { transform-origin: top left; }

/* ---- Pagination ---- */
.pager { display: flex; gap: var(--h7-space-3); align-items: center; justify-content: center; margin-top: var(--h7-space-4); }
.pager .info { color: var(--h7-text-muted); font-size: var(--h7-text-caption); }

/* ---- Suspicious reading marker ---- */
.susp-note { display: inline-flex; align-items: center; gap: 6px; color: var(--h7-warning); font-size: var(--h7-text-caption); margin-top: var(--h7-space-2); }

/* ---- Responsive: mobile ---- */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; height: var(--h7-topbar-h);
    background: var(--h7-surface); box-shadow: var(--h7-elev-floating); font-weight: var(--h7-weight-heading); z-index: 5; }
  .content { padding: var(--h7-space-4); padding-bottom: calc(var(--h7-tabbar-h) + env(safe-area-inset-bottom) + var(--h7-space-6)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--h7-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--h7-surface); box-shadow: var(--h7-elev-lifted); border-top: var(--h7-border-hairline); z-index: 5; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--h7-text-muted); font-size: 11px; }
  .tabbar a .ic { font-size: 18px; }
  .tabbar a[aria-current="page"] { color: var(--h7-primary); }
  .grid-2col, .grid-3col { grid-template-columns: 1fr; }
  .viewer { padding: var(--h7-space-3); }
}

/* ---- Print: no screen depth, no scaling crosses into print ---- */
@media print {
  .sidebar, .topbar, .tabbar, .viewer-toolbar, .filters, .title-row, .pager { display: none !important; }
  .content, .viewer, .paper-frame { padding: 0; max-width: none; overflow: visible; height: auto !important; }
  .paper { box-shadow: none; width: auto; transform: none !important; }
}