/* BEVMAQ palette (www.bevmaq.com): slate-900 #111827, slate-800 #1f2937, slate-600 #4b5563, slate-200 #e5e7eb, slate-50 #f9fafb, orange-500 #f97316, orange-50 #fff7ed.
   --accent (#f97316) is for borders and decoration only; text and buttons use --link / --btn (orange-700, 5.2:1 with white). */
:root { color-scheme:light; --ink:#111827; --body:#1f2937; --muted:#4b5563; --line:#e5e7eb; --bg:#f9fafb; --surface:#fff; --accent:#f97316; --tint:#fff7ed; --link:#c2410c; --btn:#c2410c; --btn-hover:#9a3412; --btn-text:#fff; --ok:#16a34a; --ok-text:#15803d; --warn:#d97706; --warn-text:#b45309; --warn-bg:#fffbeb; --warn-line:#fcd34d; --warn-ink:#92400e; --bad:#dc2626; --bad-text:#b91c1c; --bad-bg:#fef2f2; --bad-line:#fecaca; --th-bg:#111827; --th-text:#fafafa; --info:#64748b; --info-text:#475569; --info-bg:#f1f5f9; }
/* Dark: system preference unless the toggle pinned a theme (data-theme on <html>, stored in localStorage bi_theme). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --ink:#f9fafb; --body:#e5e7eb; --muted:#9ca3af; --line:#374151; --bg:#0b1220; --surface:#111827; --tint:#3b2411; --link:#fb923c; --btn:#c2410c; --btn-hover:#ea580c; --btn-text:#fff; --ok:#4ade80; --ok-text:#4ade80; --warn:#fbbf24; --warn-text:#fbbf24; --warn-bg:#2b1d06; --warn-line:#78350f; --warn-ink:#fbbf24; --bad:#f87171; --bad-text:#f87171; --bad-bg:#2a1215; --bad-line:#7f1d1d; --th-bg:#1f2937; --th-text:#f9fafb; --info:#64748b; --info-text:#a5b4c8; --info-bg:#1a2332; } }
:root[data-theme="dark"] { color-scheme:dark; --ink:#f9fafb; --body:#e5e7eb; --muted:#9ca3af; --line:#374151; --bg:#0b1220; --surface:#111827; --tint:#3b2411; --link:#fb923c; --btn:#c2410c; --btn-hover:#ea580c; --btn-text:#fff; --ok:#4ade80; --ok-text:#4ade80; --warn:#fbbf24; --warn-text:#fbbf24; --warn-bg:#2b1d06; --warn-line:#78350f; --warn-ink:#fbbf24; --bad:#f87171; --bad-text:#f87171; --bad-bg:#2a1215; --bad-line:#7f1d1d; --th-bg:#1f2937; --th-text:#f9fafb; --info:#64748b; --info-text:#a5b4c8; --info-bg:#1a2332; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header .logo { background:#fff; padding:4px 8px; border-radius:6px; } }
:root[data-theme="dark"] header .logo { background:#fff; padding:4px 8px; border-radius:6px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:'Geist', system-ui, sans-serif; color:var(--body); background:var(--bg); }
a { color:var(--link); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
header { display:flex; align-items:center; gap:16px; padding:14px 24px; background:var(--surface); border-bottom:3px solid var(--accent); }
header .logo { height:40px; flex:none; }
header .title { font-weight:700; font-size:20px; color:var(--ink); min-width:0; }
header .title span { display:block; font-weight:400; font-size:12px; color:var(--muted); }
header .right { margin-left:auto; display:flex; align-items:center; gap:12px; min-width:0; }
header .user { font-size:13px; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header .theme { flex:none; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; background:none; border:1px solid var(--line); border-radius:6px; color:var(--muted); padding:0 8px; font:inherit; cursor:pointer; }
header .theme:hover { color:var(--link); border-color:var(--accent); }
header a { text-decoration:none; }
main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px 24px; margin-bottom:20px; }
.card.center { text-align:center; padding:48px 24px; }
h1 { margin:0 0 8px; font-size:22px; color:var(--ink); }
h2 { margin:0; font-size:18px; color:var(--ink); border-left:4px solid var(--accent); padding-left:10px; }
.hint, .muted { color:var(--muted); font-size:14px; }
kbd { font-family:inherit; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 4px; font-size:12px; }
.drop { border:2px dashed var(--line); border-radius:8px; padding:18px; margin:14px 0; cursor:pointer; background:var(--bg); }
.drop.over { border-color:var(--accent); background:var(--tint); }
.drop-inner { text-align:center; color:var(--muted); font-size:14px; }
.files { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.files li { display:inline-flex; align-items:center; gap:6px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px 4px 2px 10px; font-size:13px; }
.files li .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.files li small { color:var(--muted); white-space:nowrap; }
.files .remove { flex:none; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:6px; color:var(--bad-text); font:inherit; font-size:18px; line-height:1; cursor:pointer; }
.files .remove:hover { background:var(--bad-bg); }
.files li a { color:var(--bad-text); text-decoration:none; margin-left:6px; }
.row { margin:10px 0; }
.field-label { display:block; margin-bottom:4px; font-size:14px; font-weight:600; color:var(--ink); }
textarea { width:100%; background:var(--surface); color:var(--body); border:1px solid var(--line); border-radius:6px; padding:10px; font:inherit; font-size:14px; resize:vertical; }
textarea::placeholder { color:var(--muted); opacity:1; }
.actions { display:flex; align-items:center; gap:12px; }
.spacer { flex:1; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; padding:8px 16px; font:inherit; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--btn); border-color:var(--btn); color:var(--btn-text); }
.btn.primary:hover { background:var(--btn-hover); border-color:var(--btn-hover); }
.btn:disabled { opacity:.75; cursor:wait; }
.btn.primary:disabled { opacity:1; background:#9a3412; border-color:#9a3412; color:#fff; }
.result-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.downloads { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.downloads[hidden] { display:none !important; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13.5px; }
th { text-align:left; background:var(--th-bg); color:var(--th-text); padding:8px 10px; font-weight:600; }
td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
td.num { text-align:right; white-space:nowrap; }
td.src { color:var(--muted); font-size:12.5px; min-width:130px; overflow-wrap:break-word; }
td[data-label="Status"] { min-width:170px; }
.status { font-weight:700; }
.note { display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--muted); }
tr.tier-ok .status { color:var(--ok-text); }
tr.tier-warn .status { color:var(--warn-text); }
tr.tier-bad .status { color:var(--bad-text); }
tr.tier-info .status { color:var(--info-text); }
tr.tier-ok td:first-child { box-shadow:inset 3px 0 var(--ok); }
tr.tier-warn td:first-child { box-shadow:inset 3px 0 var(--warn); }
tr.tier-bad td:first-child { box-shadow:inset 3px 0 var(--bad); }
tr.tier-info td:first-child { box-shadow:inset 3px 0 var(--info); }
.error { color:var(--bad-text); background:var(--bad-bg); border:1px solid var(--bad-line); border-radius:6px; padding:10px 14px; }
.error a { color:inherit; font-weight:600; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:24px; }
.answer { white-space:pre-wrap; font-size:14.5px; color:var(--body); margin:12px 0; }
.plan { padding-left:22px; font-size:14px; }
.plan li { margin:6px 0; }
.plan li.blocked { color:var(--muted); }
.step .label { font-weight:700; color:var(--ink); }
.step.blocked .label { color:var(--muted); }
.step .why { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.steps { list-style:none; padding:0; margin:8px 0 0; font-size:14px; }
.steps li { padding:6px 10px; border-left:3px solid var(--ok); background:var(--bg); margin:4px 0; }
.steps li.ok .label { color:var(--ok-text); font-weight:700; }
.steps li.nok { border-left-color:var(--bad); }
.steps li.nok .label { color:var(--bad-text); font-weight:700; }
.mailbox { margin:4px 0 0; font-size:13.5px; }
.mailbox .tip { color:var(--muted); }
.mailbox .ok-note { display:block; color:var(--ok-text); font-weight:600; margin-top:4px; }
.mode { margin:6px 0 0; }
.mode.warn { color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:6px; padding:6px 10px; }
.warn { color:var(--warn-ink); font-weight:600; }
#result-summary .warn { display:inline-block; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:6px; padding:1px 8px; margin-top:4px; }
.busy { display:flex; align-items:center; gap:10px; margin:12px 0 0; padding:10px 12px; background:var(--tint); border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:14px; }
.spinner { flex:none; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--btn); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; border-color:var(--btn); border-top-color:var(--line); } * { scroll-behavior:auto !important; } }
form.inline { display:inline; }
button.link { background:none; border:0; padding:4px 2px; min-height:24px; color:var(--link); font:inherit; cursor:pointer; text-decoration:underline; }

/* Stacked rows for narrow screens: every cell shows its column header from data-label. */
@media (max-width: 900px) {
  .table-wrap { overflow-x:visible; }
  table, tbody, tr, td { display:block; width:100%; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  tr { display:flex; flex-direction:column; margin:10px 0; border:1px solid var(--line); border-left-width:4px; border-radius:8px; overflow:hidden; background:var(--surface); }
  tr.tier-ok { border-left-color:var(--ok); }
  tr.tier-warn { border-left-color:var(--warn); }
  tr.tier-bad { border-left-color:var(--bad); }
  tr.tier-info { border-left-color:var(--info); }
  tr td:first-child { box-shadow:none !important; }
  td, td.num, td.src { display:grid; grid-template-columns:minmax(90px,36%) 1fr; gap:8px; text-align:left; white-space:normal; overflow-wrap:anywhere; padding:6px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
  td:last-child { border-bottom:0; }
  td::before { content:attr(data-label); font-size:12px; font-weight:600; color:var(--muted); }
  td:empty::after { content:"–"; color:var(--muted); }
  td[data-label="Status"] { order:-1; background:var(--bg); font-size:15px; }
  td[data-label="Status"]::before { align-self:center; }
  td[data-label="Status"] .note { grid-column:1 / -1; margin-top:0; }
}
@media (max-width: 640px) {
  header { flex-wrap:wrap; gap:8px 12px; padding:10px 16px; }
  header .logo { height:32px; }
  header .title { font-size:18px; }
  header .title span { display:none; }
  header .right { width:100%; margin-left:0; justify-content:space-between; gap:8px; }
  main { margin:12px auto; padding:0 12px; }
  .card { padding:16px; margin-bottom:12px; }
  .card.center { padding:32px 16px; }
  .actions { flex-wrap:wrap; }
  .actions .spacer { display:none; }
  .actions .btn { flex:1 1 100%; }
  #mic-state, #agent-jev { flex:1 1 100%; }
  .result-head { align-items:flex-start; }
  .downloads { margin-left:0; width:100%; }
  .downloads .btn { flex:1 1 100%; }
  .drop { padding:14px; }
}

/* Booking metadata under each document name */
td.docs .doc { display:block; }
td.docs .doc + .doc { margin-top:6px; }
.docname { overflow-wrap:anywhere; }
.docmeta { display:block; margin-top:2px; font-size:12px; line-height:1.6; color:var(--muted); }
.badge { display:inline-block; padding:0 6px; border:1px solid currentColor; border-radius:999px; background:var(--bg); font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap; vertical-align:baseline; }
.badge.rc { color:var(--link); background:var(--tint); }
.badge.einv { color:var(--ok-text); }
.badge.unsure { color:var(--muted); border-style:dashed; font-weight:500; cursor:help; }

/* DATEV row */
.datev { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0 0; }
.datev-confirm { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 10px; background:var(--tint); border:1px solid var(--line); border-radius:6px; font-size:14px; color:var(--ink); }
.datev-status { font-size:14px; }
.datev-status.ok-note { color:var(--ok-text); font-weight:600; }

/* Month card */
.months { list-style:none; padding:0; margin:12px 0 0; }
.month-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--line); }
.month-row:last-child { border-bottom:0; padding-bottom:0; }
.month-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; flex:1 1 320px; min-width:0; font-size:14px; }
.month-name { color:var(--ink); }
.month-sent { color:var(--muted); }
.warn.missing { background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:6px; padding:0 8px; }
.month-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.month-missing { flex:1 1 100%; list-style:none; margin:0; padding:8px 12px; background:var(--bg); border-left:3px solid var(--warn); border-radius:4px; font-size:13.5px; }
.month-missing li { display:flex; flex-wrap:wrap; gap:2px 12px; padding:2px 0; }
.ml-date { color:var(--muted); }
.ml-eur { margin-left:auto; white-space:nowrap; }
@media (max-width: 640px) {
  .datev .btn { flex:1 1 100%; }
  .datev-confirm { width:100%; }
  .datev-confirm .btn { flex:1 1 auto; }
  .month-actions { width:100%; }
  .month-actions .btn { flex:1 1 auto; }
  .month-row .month-actions { justify-content:space-between; }
}
td.docs { min-width:220px; }
@media (max-width: 900px) { td.docs { min-width:0; } }

/* Statement table: nine columns (date, amount, counterparty, Art, Projekt, documents, source, amount per document, status).
   Below 1500 px the per-document amount column goes (the gross amount is in the metadata line), below 1200 px the source too. */
@media (min-width: 1200px) { main { max-width: 1180px; } }
@media (min-width: 901px) { .docmeta { font-size: 12px; line-height: 1.35; } #result-table td.c-docs { max-width: 240px; } }
@media (min-width: 901px) and (max-width: 1499px) { #result-table th:nth-child(8), #result-table td.c-amt { display: none; } }
@media (min-width: 901px) and (max-width: 1199px) {
  #result-table th:nth-child(7), #result-table td.c-src { display: none; }
  th, td { padding: 8px 6px; }
  td.c-project { min-width:140px; } .project-input { min-width:130px; }
  #result-table td.docs { min-width:130px; } td[data-label="Status"] { min-width:140px; } td.c-who { min-width:110px; }
}
@media (min-width: 1500px) { main { max-width: 1400px; } }

/* Info tier, credits, counterparty/purpose */
td.credit { color:var(--ok-text); font-weight:600; }
.counterparty { overflow-wrap:anywhere; }
.purpose { margin-top:2px; font-size:12.5px; line-height:1.35; color:var(--muted); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:220px; }
td.c-who { min-width:130px; }
.art { overflow-wrap:break-word; }
.art-p { color:var(--muted); font-size:12px; font-weight:400; }
td.c-art { min-width:96px; max-width:130px; }
#result-table td.docs { min-width:170px; }
#result-table td.src { min-width:110px; }

/* Projekt input with remember-tick */
td.c-project { min-width:176px; }
.project-line { display:flex; align-items:center; gap:8px; }
.project-input { flex:1 1 auto; min-width:160px; width:100%; min-height:32px; padding:4px 8px; background:var(--surface); color:var(--body); border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; }
.project-input::placeholder { color:var(--muted); opacity:1; font-style:italic; }
.project-input[aria-invalid="true"] { border-color:var(--bad); box-shadow:0 0 0 1px var(--bad); }
.tick { flex:none; font-size:12px; font-weight:600; color:var(--ok-text); white-space:nowrap; }
.tick:empty { display:none; }
.suggest { display:inline-block; font-size:12px; padding:2px 0; min-height:20px; }

/* Filter chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.chip:hover:not(:disabled) { border-color:var(--accent); }
.chip.active { background:var(--btn); border-color:var(--btn); color:var(--btn-text); }
.chip-n { font-size:12px; font-weight:600; opacity:.9; }
.chip:disabled { color:var(--muted); cursor:default; border-style:dashed; }
.chip:disabled .chip-n { opacity:1; }
.drop-types { display:block; margin-top:4px; font-size:13px; }

/* Legend */
.legend { margin:14px 0 0; font-size:13px; color:var(--muted); }
.legend summary { cursor:pointer; color:var(--link); width:fit-content; padding:4px 0; }
.legend p { margin:6px 0; max-width:70ch; }
.legend strong { color:var(--ink); }

@media (max-width: 900px) {
  #result-table td.docs, #result-table td.src { min-width:0; }
  td.c-art { max-width:none; }
  td.c-project { grid-template-columns:1fr; }
  td.c-project::before { margin-bottom:2px; }
  .project-input { min-width:0; min-height:40px; font-size:15px; }
  .suggest { min-height:32px; font-size:13px; }
  td.c-who, td.c-art, td.c-project { min-width:0; }
  .purpose { max-width:none; }
  .chip { min-height:40px; }
}