:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --text: #1d232b;
    --muted: #6b7380;
    --border: #d8dce2;
    --accent: #2f6f4f;
    --accent-text: #ffffff;
    --neg: #c62828;
    --info-bg: #e8f1fb;
    --ok-bg: #e7f5ec;
    --err-bg: #fdecea;
    --row-alt: #f8f9fa;
    --warn-bg: #fff4d6;
    --warn-text: #8a5a00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15181d;
        --surface: #1e232a;
        --text: #e6e8eb;
        --muted: #9aa3ae;
        --border: #343b45;
        --accent: #4f9d76;
        --neg: #ff6b6b;
        --info-bg: #1d2c3d;
        --ok-bg: #1b3326;
        --err-bg: #3d1f1f;
        --row-alt: #232931;
        --warn-bg: #3a3218;
        --warn-text: #f0c060;
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
main { padding: 16px; max-width: 1600px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }
.muted { color: var(--muted); }
.neg { color: var(--neg); }
.nowrap { white-space: nowrap; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--text); }
.topbar nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.topbar nav a { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--text); }
.topbar nav a.active, .topbar nav a:hover { background: var(--bg); color: var(--accent); }
.logout { display: flex; align-items: center; gap: 8px; }

input, select, button, .btn { font: inherit; color: inherit; }
input, select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); max-width: 100%; }
input.short { width: 7em; }
button, .btn { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--neg); }
button.small { padding: 3px 8px; font-size: 0.9em; }
button.link { border: 0; background: none; color: var(--accent); padding: 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card.narrow { max-width: 560px; margin: 24px auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 4px; }
.row, .inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.row label, .inline-form label { display: flex; flex-direction: column; gap: 4px; }
label.inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin-right: 12px; }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.flash-success { background: var(--ok-bg); }
.flash-error { background: var(--err-bg); }
.flash-info { background: var(--info-bg); }
.flash-warn { background: var(--warn-bg); }
.open-badge { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.75rem; font-weight: 600; vertical-align: middle; }

.pagehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; }

.tablewrap { overflow-x: auto; }
table.grid { border-collapse: collapse; background: var(--surface); width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
table.grid tbody tr:nth-child(even) { background: var(--row-alt); }
table.overview td { text-align: right; white-space: nowrap; }
table.overview tr.empty td { color: var(--muted); }
table.overview .strong, table.overview tfoot { font-weight: 700; }

.summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.summary > div { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; display: flex; flex-direction: column; }
.summary span { font-size: 0.8rem; color: var(--muted); }

/* Monatsansicht im Stil der bisherigen Excel: eine Spalte pro Kategorie */
.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.col { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; }
.col header { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.col h2 { margin: 0; font-size: 1.05rem; }
.colsum { font-weight: 700; }
.col.kind-income header { background: var(--ok-bg); border-radius: 10px 10px 0 0; }
.col.kind-extern header { background: var(--info-bg); border-radius: 10px 10px 0 0; }
.entries { list-style: none; margin: 0; padding: 0; flex: 1; }
.entries li > a { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 4px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--row-alt); }
.entries li > a:hover { background: var(--row-alt); }
.entries .amt { text-align: right; white-space: nowrap; }
.entries .note { min-width: 0; overflow-wrap: anywhere; }
.entries small { margin-left: 4px; }
.quickadd { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 4px; padding: 8px; border-top: 1px solid var(--border); }
.quickadd input { min-width: 0; }
/* offener Eintrag aus einer Vorlage: Betrag direkt in der Liste eintragen */
.entries li.open { background: var(--warn-bg); }
.entries .fill { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 8px; align-items: center; padding: 3px 8px 3px 12px; border-bottom: 1px solid var(--row-alt); }
.entries .fill input { min-width: 0; padding: 2px 6px; text-align: right; }
.entries .fill .note { color: inherit; text-decoration: none; }
.entries .fill button { padding: 2px 8px; }

.category-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.chip input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.chip-static { display: inline-block; padding: 1px 8px; margin: 1px; border-radius: 999px; background: var(--row-alt); font-size: 0.9em; }
.hint-extern { display: none; }
.is-extern .hint-extern { display: block; }

.receipt-layout { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 16px; align-items: start; }
.receipt-image img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.receipt-image pre { white-space: pre-wrap; font-size: 0.8rem; max-height: 400px; overflow: auto; }
table.items input { width: 100%; }
table.items td:nth-child(2) { width: 7em; }

table.statements .stmt-text { max-width: 360px; font-size: 0.9em; word-break: break-word; }
table.statements small { display: block; }
table.statements tr.action-ignore, table.statements tr.action-later { opacity: 0.6; }
table.statements tr.action-duplicate { background: var(--info-bg) !important; }
table.statements tr:not(.action-import) .for-import,
table.statements tr:not(.action-duplicate) .for-duplicate,
table.statements tr:not(.action-ignore) .for-ignore { display: none; }
table.raw td { font-size: 0.85em; white-space: nowrap; }
table.raw tr.header { font-weight: 700; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--text); border-radius: 6px 6px 0 0; }
.tabs a.active { background: var(--surface); border: 1px solid var(--border); border-bottom-color: var(--surface); margin-bottom: -1px; color: var(--accent); }
.taglist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.taglist li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.history { font-size: 0.9em; color: var(--muted); }
table.audit code { font-size: 0.8em; word-break: break-all; }

@media (max-width: 760px) {
    .receipt-layout { grid-template-columns: 1fr; }
    main { padding: 12px; }
}