/* ════════════════════════════════════════════════════════════════════════════
   agbooks — central stylesheet
   Mirrors the AGP CMS look (tokens, nav, buttons, list/edit, toast, login) and
   adds the bookkeeping editor: document list, line-item editor, totals, and the
   live PDF preview panel.
   ──────────────────────────────────────────────────────────────────────────
    1. Tokens & reset          6. Editor: form fields
    2. CMS navigation          7. Editor: line items + totals
    3. Buttons                 8. Editor: live preview
    4. List view + FAB         9. Toast
    5. Doc / customer rows     10. Login   11. Responsive
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens & reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #ffffff;
  --surface: #fafafa;
  --border:  #e2e2e2;
  --text:    #1a1917;
  --muted:   #9a9690;
  --accent:  #1a1917;
  --danger:  #c0392b;

  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --text-xs:   12px;
  --text-s:    13px;
  --text-base: clamp(15px, calc(0.9rem + 0.375vw), 18px);
  --text-m:    clamp(17px, calc(1.05rem + 0.5vw), 20px);
  --text-l:    clamp(19px, calc(1.2rem + 0.3vw), 22px);
  --text-xl:   clamp(26px, calc(1.5rem + 1vw), 34px);
  --text-xxl:  clamp(34px, calc(1.8rem + 1.5vw), 48px);

  --radius:      16px;
  --radius-pill: 999px;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ── 2. CMS navigation ──────────────────────────────────────────────────────── */
.cms-nav { margin-bottom: 8px; border-bottom: 1px solid var(--border); }

.cms-mainnav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px;
  max-width: 1200px; margin: 0 auto;
}
.cms-mainnav-links { display: flex; align-items: center; gap: 24px; }
.cms-mainnav-right { display: flex; align-items: center; gap: 16px; }

.cms-main-link {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--muted); text-decoration: none; transition: color .15s;
}
.cms-main-link:hover  { color: var(--text); }
.cms-main-link.active { color: var(--text); font-weight: 700; }

.cms-logout {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); text-decoration: none; transition: color .15s;
}
.cms-logout:hover { color: var(--text); }

/* ── 3. Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  padding: 7px 16px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-m);
  border-radius: var(--radius-pill);
  transition: opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { opacity: 0.75; }

.btn-ghost {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  text-decoration: none;
  line-height: normal;
  display: inline-flex; align-items: center; gap: 6px;
}

.btn-primary {
  background: var(--accent); color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; line-height: normal;
}

.btn-danger {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-danger:hover { background: rgba(192, 57, 43, 0.1); color: var(--danger); opacity: 1; }

.icon-trash, .icon-send, .icon-smile {
  display: inline-block; width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
.icon-trash { -webkit-mask-image: url('../img/trash-2.svg'); mask-image: url('../img/trash-2.svg'); }
.icon-send  { -webkit-mask-image: url('../img/send.svg');    mask-image: url('../img/send.svg'); }
.icon-smile { -webkit-mask-image: url('../img/smile.svg');   mask-image: url('../img/smile.svg'); }

/* ── 4. List view + FAB ─────────────────────────────────────────────────────── */
#listView { max-width: 1200px; margin: 0 auto; padding: 24px 20px 96px; }

.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.list-title { font-size: var(--text-xl); font-weight: bold; }

.empty-msg { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); padding: 24px 0; }

/* Filter pills on the left, running totals on the right */
.filter-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.filter-bar .filter-pills { margin-bottom: 0; }
/* Year dropdown (list filter bar + Auswertung header) */
.year-form { margin: 0; }
.year-select {
  font-family: var(--sans); font-size: var(--text-m);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); padding: 6px 14px; cursor: pointer;
  outline: none; transition: border-color 0.15s;
}
.year-select:hover, .year-select:focus { border-color: var(--accent); }

.list-sums { display: flex; align-items: center; gap: 16px; white-space: nowrap; margin-left: auto; }
.list-sums .sum { display: flex; align-items: center; gap: 7px; }
.list-sums .sum-val { font-size: var(--text-m); font-weight: bold; }
.list-sums .icon-send  { width: 17px; height: 17px; color: #2f6fb0; }  /* offen/versendet blue */
.list-sums .icon-smile { width: 17px; height: 17px; color: #2e8b57; }  /* paid green */
.list-sums .count-pill {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
  background: #f0ede8; border-radius: var(--radius-pill); padding: 3px 10px;
}

/* Service filter pills above the list (mirrors the agcms genre filter) */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-pill {
  font-family: var(--sans); font-size: var(--text-m);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  padding: 6px 16px; cursor: pointer; transition: all 0.15s;
}
.filter-pill:hover  { border-color: var(--accent); color: var(--text); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.fab {
  position: fixed; bottom: 24px; right: 24px;
  height: 48px; padding: 0 2em;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; border: none;
  font-family: var(--sans); font-size: var(--text-l); font-weight: 500;
  cursor: pointer; display: none; align-items: center; gap: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25); transition: opacity 0.15s;
  z-index: 50; white-space: nowrap;
}
.fab:hover   { opacity: 0.8; }
.fab.visible { display: flex; }

/* ── 5. Doc / customer rows ─────────────────────────────────────────────────── */
.row-list { display: flex; flex-direction: column; gap: 8px; }

.data-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.data-row:hover { border-color: var(--accent); }

.row-main { flex: 1; min-width: 0; }
.row-name { font-size: var(--text-l); font-weight: bold; line-height: 1.2; }
.row-name.untitled { color: var(--muted); font-weight: normal; font-style: italic; }
.row-sub {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
  margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.row-amount { font-size: var(--text-l); font-weight: bold; white-space: nowrap; }
/* Front column: invoice number with the invoice date stacked beneath it */
.row-lead { display: flex; flex-direction: column; gap: 2px; min-width: 72px; flex-shrink: 0; }
.row-num  { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.row-date { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }

.badge {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: var(--radius-pill); padding: 2px 9px; background: #f0ede8; color: var(--muted);
}
.badge.draft { background: #f0ede8; color: var(--muted); }
.badge.sent  { background: #e7f0fb; color: #2f6fb0; }
.badge.paid  { background: #e7f6ec; color: #2e8b57; }

/* Icon toggles on a list row: "versendet" (send) + "bezahlt" (smile).
   Subtle until active, then tinted — blue for sent, green for paid. */
.row-flag {
  background: rgba(0, 0, 0, 0.06); border: none; border-radius: var(--radius-pill);
  color: var(--muted); cursor: pointer; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.row-flag:hover           { color: var(--text); }
.row-flag.sent.active     { background: #e7f0fb; color: #2f6fb0; }
.row-flag.paid.active     { background: #e7f6ec; color: #2e8b57; }
.row-flag.active:hover    { opacity: 0.85; }

/* Payment tag in an invoice's sub-line: green when paid, amber when partial */
.row-sub .row-paid-on { color: #2e8b57; }
.row-sub .row-paid-on.partial { color: #b8860b; }
/* Paid flag tinted amber while only partly paid */
.row-flag.paid.partial { background: #fbf3e0; color: #b8860b; }

/* "Bezahlt" date popover, anchored under the paid icon */
.paid-pop {
  position: absolute; z-index: 120;
  display: flex; flex-direction: column; gap: 8px; min-width: 190px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 12px;
}
.paid-pop-label {
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.paid-pop-date {
  font-family: var(--sans); font-size: var(--text-base); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: transparent; outline: none; transition: border-color 0.15s;
}
.paid-pop-date:focus { border-color: var(--accent); }
.paid-pop-actions { display: flex; gap: 8px; justify-content: flex-end; }
.paid-pop-actions button {
  font-family: var(--sans); font-size: var(--text-s); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 7px 14px; background: transparent; color: var(--text); transition: all 0.15s;
}
.paid-pop-ok { background: #2e8b57; border-color: #2e8b57; color: #fff; }
.paid-pop-ok:hover { opacity: 0.85; }
.paid-pop-clear:hover { border-color: var(--danger); color: var(--danger); }
.paid-pop-info { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }

/* ── Editor: Zahlungen (payments) ────────────────────────────────────────────── */
.payments-summary { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); margin-bottom: 12px; }
.payments-summary .pay-open { color: var(--danger); }
.payments-summary .pay-over { color: var(--danger); }
.payments-summary .pay-done { color: #2e8b57; }
.payments-head, .payment-row {
  display: grid; grid-template-columns: 1fr 150px 40px; gap: 10px; align-items: center;
}
.payments-head {
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); padding: 0 2px 6px;
}
.payments-head .num { text-align: right; }
.payments-editor { display: flex; flex-direction: column; gap: 8px; }
.payment-row .payment-date, .payment-row .payment-amount {
  font-family: var(--sans); font-size: var(--text-base); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: transparent; outline: none; transition: border-color 0.15s;
}
.payment-row .payment-amount { text-align: right; font-variant-numeric: tabular-nums; }
.payment-row .payment-date:focus, .payment-row .payment-amount:focus { border-color: var(--accent); }
.payment-del {
  background: none; border: none; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
}
.payment-del:hover { color: var(--danger); }

/* ── Edit view shell (shared by all editors) ────────────────────────────────── */
#editView { display: none; flex-direction: column; min-height: 100vh; }
#editView.active { display: flex; }

.edit-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.spacer { flex: 1; }

.edit-body {flex: 1;padding: 24px 20px 120px;/* max-width: 1200px; */width: 100%;margin: 0 auto;}

/* ── 6. Editor: form fields ─────────────────────────────────────────────────── */
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label,
.fld-label {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.fld input,
.fld select,
.fld textarea {
  font-family: var(--sans); font-size: var(--text-base);
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text);
  padding: 8px 12px; outline: none; transition: border-color 0.15s; width: 100%;
}
.fld textarea { font-family: var(--mono); font-size: var(--text-s); line-height: 1.5; resize: vertical; }
.fld input:focus,
.fld select:focus,
.fld textarea:focus { border-color: var(--accent); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted); }

.fld-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.fld-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }

/* Autocomplete combobox (Kunde) — search input + filtered dropdown, hidden id field */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); padding: 4px;
}
.combo-list[hidden] { display: none; }
.combo-opt {
  font-family: var(--sans); font-size: var(--text-base); color: var(--text);
  padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.combo-opt:first-child { color: var(--muted); }
.combo-opt.active, .combo-opt:hover { background: var(--surface); }

/* Pill-style radio group (Service selector) — same look as the list filter pills */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt { cursor: pointer; line-height: 0; }
.pill-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-opt span {
  display: inline-block; line-height: normal;
  font-family: var(--sans); font-size: var(--text-m);
  text-transform: none; letter-spacing: normal;   /* override .fld label */
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted); background: transparent;
  padding: 7px 16px; transition: all 0.15s; user-select: none;
}
.pill-opt:hover span { border-color: var(--accent); color: var(--text); }
.pill-opt input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-label {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  margin: 28px 0 12px; display: block;
}
/* In the document editor, precede each section (Einleitung, Positionen,
   Fußtext, Zahlungen) with a divider line and a larger gap. */
.form-col .section-label {
  margin-top: 100px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* ── 7. Editor: line items + totals ─────────────────────────────────────────── */
.items-editor { display: flex; flex-direction: column; gap: 8px; }

/* Optional lead-in item (no number/qty/price) — dashed to set it apart. Same grid
   as .item-row so its Leistung starts flush with the item rows' Leistung column. */
.lead-item {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 74px 88px 92px 30px;
  gap: 10px; align-items: start;
  padding: 10px; margin-bottom: 12px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--bg);
}
.lead-item .item-main { grid-column: 2 / -1; }   /* Leistung column → right edge */

.item-head,
.item-row {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 74px 88px 92px 30px;
  gap: 10px; align-items: start;
}
.item-head {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  padding: 0 2px 2px;
}
.item-head .num, .item-row .num { text-align: right; }

.item-row {
  padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.item-row.drag-over { border-color: var(--accent); background: var(--surface); }
.item-row.dragging  { opacity: 0.4; }

.item-row .drag-handle {
  cursor: grab; color: var(--muted); font-size: 16px; line-height: 1.6; user-select: none;
  padding-top: 6px;
}
.item-row .drag-handle:active { cursor: grabbing; }

.item-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-title {
  font-family: var(--sans); font-size: var(--text-base); font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text); padding: 6px 10px; outline: none; width: 100%;
}
.item-desc {
  font-family: var(--mono); font-size: var(--text-xs); line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text); padding: 6px 10px; outline: none; width: 100%; resize: vertical;
}
.item-title:focus, .item-desc:focus, .item-num:focus { border-color: var(--accent); }

.item-num {
  font-family: var(--mono); font-size: var(--text-s); text-align: right;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text); padding: 6px 8px; outline: none; width: 100%;
}
.item-total {
  font-family: var(--mono); font-size: var(--text-s); text-align: right;
  padding: 7px 4px 0 0; color: var(--text); white-space: nowrap;
}
/* Per-row actions: delete on top, duplicate below */
.item-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.item-del,
.item-dup {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0; display: flex; justify-content: center; transition: color 0.15s;
}
.item-del:hover { color: var(--danger); }
.item-dup:hover { color: var(--text); }

.add-item {
  align-self: flex-start; margin-top: 4px;
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0,0,0,0.05); border: none; border-radius: var(--radius-pill);
  padding: 8px 16px; cursor: pointer; color: var(--text); transition: opacity 0.15s;
}
.add-item:hover { opacity: 0.7; }

.totals-box {
  margin-top: 20px; margin-left: auto; width: 280px; max-width: 100%;
  font-family: var(--mono); font-size: var(--text-s);
}
.totals-box .trow { display: flex; justify-content: space-between; padding: 4px 0; }
.totals-box .trow.grand {
  font-family: var(--sans); font-weight: bold; font-size: var(--text-m);
  border-top: 1px solid var(--text); margin-top: 6px; padding-top: 10px;
}

/* ── 8. Editor: live preview ────────────────────────────────────────────────── */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 36px; align-items: start; }
.preview-col { position: sticky; top: 84px; }
.preview-label {
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; display: block;
}
.preview-frame {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.preview-frame iframe {
  width: 794px; height: 1123px; border: 0; display: block;
  transform-origin: top left;
}

/* ── 9. Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-family: var(--sans); font-size: var(--text-base);
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-pill); opacity: 0;
  transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 100; white-space: nowrap;
}
.toast.show  { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }
.toast-undo { display: flex; align-items: center; gap: 16px; pointer-events: auto; }
.toast-undo button {
  background: none; border: none; color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-base); font-weight: 700;
  text-decoration: underline; padding: 0; white-space: nowrap;
}
.toast-undo button:hover { opacity: 0.75; }

/* ── 10. Login ──────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 24px; }
.login-heading { font-size: var(--text-xxl); font-weight: bold; line-height: 1.1; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form input[type="password"] {
  width: 100%; font-family: var(--sans); font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); padding: 10px 16px; outline: none; transition: border-color 0.15s;
}
.login-form input[type="password"]:focus { border-color: var(--accent); }
.login-submit {
  width: 100%; padding: 11px 16px; border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 500;
  cursor: pointer; transition: opacity 0.15s;
}
.login-submit:hover { opacity: 0.8; }
.login-error { font-size: 14px; color: var(--danger); }

/* ── 10b. Auswertung (monthly report) ───────────────────────────────────────── */
#reportView { max-width: 1000px; margin: 0 auto; padding: 24px 20px 96px; }
.report-intro { color: var(--muted); font-size: var(--text-s); margin-bottom: 20px; }
.report-scroll { overflow-x: auto; }

.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.report-table th {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: normal;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.report-table td { border-bottom: 1px solid var(--border); }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .col-month { font-weight: 500; }
.report-table .col-count { color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); }
.report-table .brutto { font-weight: bold; }
.report-table tbody tr:hover td { background: var(--surface); }

.report-table tfoot td {
  border-bottom: none; border-top: 2px solid var(--text);
  font-weight: bold; padding-top: 14px;
}
.report-table tfoot .col-month { text-transform: none; }

/* ── 10c. Verwaltung (Nummernkreise + Sicherung) ─────────────────────────────── */
#adminView { max-width: 1200px; margin: 0 auto; padding: 24px 20px 96px; }
.backup-row .row-name { font-size: var(--text-m); display: flex; align-items: center; gap: 8px; }
.import-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.import-row input[type="file"] { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); }
.report-intro code { font-family: var(--mono); font-size: 0.9em; background: var(--surface); padding: 1px 5px; border-radius: 5px; }

/* ── 11. Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .doc-layout { grid-template-columns: 1fr; }
  .preview-col { position: static; }
}
@media (max-width: 720px) {
  .cms-mainnav { padding: 8px 14px; }
  .cms-mainnav-links { gap: 18px; }
  #listView, .edit-body, #adminView { padding-left: 14px; padding-right: 14px; }
  .fld-grid, .fld-grid-3 { grid-template-columns: 1fr; }
  .item-head { display: none; }
  .item-row {
    grid-template-columns: minmax(0,1fr) 70px 84px;
    grid-template-areas: "main main main" "handle qty rate" "total total del";
  }
}