/* =================================================================
 *  Buchhaltung — App Stylesheet
 *  Mobile-first. Druck-Stylesheet inkludiert via @media print unten.
 * ================================================================ */

:root {
    --color-primary: #2d6cdf;
    --color-accent:  #5e81ac;
    --color-success: #2e7d32;
    --color-danger:  #c62828;
    --color-warning: #b58900;
    --color-bg:      #fafafa;
    --color-fg:      #1c1c1c;
    --color-muted:   #6b7280;
    --color-border:  #e2e8f0;
    --color-card-bg: #ffffff;
    --radius:        10px;
    --tap-target:    44px;
    --gap:           12px;
    --shadow:        0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
    /* Fluid-Cap für den Hauptcontainer: bis 1500 px am Viewport gecappt,
       mindestens 32 px Sicherheitsabstand zum Rand. */
    --cap: min(1500px, calc(100vw - 32px));
}

*, *::before, *::after { box-sizing: border-box; }

html, body { background: var(--color-bg); color: var(--color-fg); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       margin: 0; line-height: 1.45; }
h1, h2, h3 { margin: 0 0 12px; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.0rem; }

a { color: var(--color-primary); text-decoration: none; }
a:focus, a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ----- Header & Nav ----- */
.appheader {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 8px clamp(12px, 1.5vw, 24px); position: sticky; top: 0; z-index: 30;
    box-shadow: var(--shadow);
    transition: padding 180ms ease, box-shadow 180ms ease;
}
.brand { font-weight: 700; color: var(--color-primary); padding: 8px 4px; min-height: var(--tap-target); display: inline-flex; align-items: center; }

.appnav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.appnav a { padding: 10px 12px; border-radius: 8px; min-height: var(--tap-target); display: inline-flex; align-items: center; white-space: nowrap; }
.appnav a:hover, .appnav a:focus-visible { background: rgba(0,0,0,.05); }

.userbox { margin-left: auto; }
.userbox .who { font-weight: 600; }
.userbox .role { color: var(--color-muted); margin-left: 6px; }
@media (max-width: 760px) {
    .appheader { flex-wrap: wrap; }
    .userbox { width: 100%; justify-content: flex-end; }
}

/* Mobile: Header kollabiert beim Scrollen nach unten auf eine schmale Zeile.
   Tap auf den Brand-Link stellt die volle Navigation wieder her und scrollt
   nach oben. Auf großen Bildschirmen bleibt der Header immer voll sichtbar. */
@media (max-width: 760px) {
    .appheader.header-collapsed { padding: 6px clamp(12px, 1.5vw, 24px); }
    .appheader.header-collapsed .appnav,
    .appheader.header-collapsed .userbox { display: none; }
    .appheader.header-collapsed .brand { font-weight: 600; }
}

.inline { display: inline-block; margin: 0; }
.linkish { background: none; border: 0; color: var(--color-primary); cursor: pointer; padding: 4px 6px; }
.linkish.danger { color: var(--color-danger); }
.linkish:hover { text-decoration: underline; }

/* ----- Main & Cards ----- */
.appmain { padding: 20px clamp(16px, 1.5vw, 28px); max-width: var(--cap); margin: 0 auto; }
.card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
        padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h1, .card h2 { color: var(--color-primary); }
.kpi-row { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 700px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.quick-actions { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 700px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .quick-actions { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1900px) { .quick-actions { grid-template-columns: repeat(6, 1fr); } }
.kpi .big { font-size: 1.6rem; font-weight: 700; margin: 4px 0 0; }
.action { display: block; }
.action h3 { color: var(--color-primary); }
.action:hover, .action:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.pos { color: var(--color-success); }
.neg { color: var(--color-danger); }

/* ----- Forms ----- */
.form { display: block; }
.form label { display: block; margin: 12px 0 6px; font-weight: 600; }
.form .row { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 700px) { .form .row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .form .row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .form .row { grid-template-columns: repeat(4, 1fr); } }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number],
.form input[type=date], .form select, .form textarea, .form .plain-list li label {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px;
    min-height: var(--tap-target); background: #fff;
}
.form small { display: block; color: var(--color-muted); font-size: 0.85em; margin-top: 4px; font-weight: 400; }
fieldset { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
fieldset label { font-weight: 400; margin: 6px 0; }
.form .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center;
       background: #fff; border: 1px solid var(--color-border); border-radius: 8px;
       padding: 10px 16px; min-height: var(--tap-target); color: var(--color-fg); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { border-color: var(--color-primary); }
.btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn.primary:hover { filter: brightness(0.95); }
.btn.danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn.danger:hover { filter: brightness(0.95); }

/* ----- Tables ----- */
.report { width: 100%; border-collapse: collapse; }
.report th, .report td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.report .num { text-align: right; font-variant-numeric: tabular-nums; }
.report th.num { text-align: right; }
.report td.empty-note { vertical-align: middle; }
.report th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 0.9rem; }
.report tr.storno { background: rgba(0,0,0,.04); text-decoration: line-through; color: var(--color-muted); }
.report tr.deleted { color: var(--color-muted); }

/* Long-List Tabellen: Header bleibt beim Scrollen oben haften. Setzt
   border-collapse separat (notwendig für position: sticky auf <th>). */
.report.sticky-head { border-collapse: separate; border-spacing: 0; }
.report.sticky-head thead th { position: sticky; top: 0; z-index: 2; }

/* Jahresübersicht-Matrix: 14 Spalten passen auf Mobile nicht in eine Zeile.
   Container ermöglicht horizontales Scrollen; Monats-Spalten ohne
   text-wrap, damit Zahlen nicht brechen; Sticky-Kontospalte + Summe
   halten die Achsen sichtbar beim Scrollen. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.report.matrix th, .report.matrix td { padding: 6px 8px; white-space: nowrap; }
.report.matrix th.label-col, .report.matrix td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.report.matrix th.label-col { background: #f8fafc; }
@media (max-width: 600px) {
  .report.matrix th, .report.matrix td { padding: 4px 6px; font-size: 0.8rem; }
}
@media print {
  .table-scroll { overflow: visible; }
  .report.matrix th.label-col, .report.matrix td:first-child { position: static; }
}

.toggleable[data-hidden] { display: none; }

/* ----- Badges / Hinweise ----- */
.badge { display: inline-block; padding: 2px 6px; background: var(--color-accent); color: #fff; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.system { background: #475569; }
.badge.expense { background: var(--color-danger); }
.badge.income { background: var(--color-success); }
.badge.storno { background: var(--color-warning); color: #000; }
.hint { background: #fef9c3; border: 1px solid #fde68a; padding: 10px 12px; border-radius: 8px; color: #78350f; }
.warn-inline { color: var(--color-danger); font-weight: 600; }
.muted { color: var(--color-muted); }
.flash { padding: 10px 12px; border-radius: 8px; margin: 8px 0; }
.flash.ok    { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.flash.info  { background: #e0f2fe; border: 1px solid #7dd3fc; color: #075985; }
.flash.warn  { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
.flash.error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.plain-list li:last-child { border-bottom: 0; }

/* ----- Plain layout (Login / Install) ----- */
body.plain { background: var(--color-bg); }
body.plain .appmain { max-width: 480px; }
.login-card { padding: 24px; }
.login-card h1 { margin-bottom: 20px; }

.appfooter { padding: 16px clamp(16px, 1.5vw, 28px); color: var(--color-muted); font-size: 0.85rem; display: flex; justify-content: space-between; max-width: var(--cap); margin: 0 auto; }

/* ----- Booking Form: hide rows not matching current behavior ----- */
.booking-form .row.hidden { display: none; }

/* =================================================================
 *  Druck-Stylesheet — A4, Graustufen, tabellen-basiert, page-aware
 *  Browser-Druck: Strg+P / ⌘+P.
 * ================================================================ */
@media print {
    @page { size: A4 portrait; margin: 14mm; }
    html, body {
        background: #fff !important; color: #000 !important;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11pt;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* Alles raus aus der Druckansicht, was nicht zum Bericht gehört */
    .no-print, .appnav, header.appheader, footer.appfooter, .actionbar { display: none !important; }

    /* Theme-Variablen überschreiben — alles monochrom */
    :root {
        --color-primary:#000; --color-accent:#000; --color-success:#000;
        --color-danger:#000; --color-warning:#000; --color-bg:#fff;
        --color-fg:#000; --color-muted:#000; --color-border:#000;
    }
    * { background: transparent !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }

    /* Hauptcontainer für PDF auf A4-Hochformat-Lesbarkeit zwingen,
       unabhängig von der Bildschirm-Fluid-Cap. */
    .appmain { max-width: 17cm !important; padding: 0 !important; margin: 0 !important; }
    .card { background: #fff !important; border: 0; box-shadow: none; padding: 0; margin: 0; }

    table.report, table.euer, table.kpi { width: 100%; border-collapse: collapse; page-break-inside: auto; }
    table.report thead { display: table-header-group; }
    table.report tr, table.report thead, table.report tfoot { page-break-inside: avoid; }
    table.report th, table.report td { border: 1px solid #000 !important; padding: 3px 5px; background:#fff !important; color:#000 !important; }
    table.report th { border-bottom: 2px solid #000 !important; font-weight: 700; text-align: left; }
    table.report .num { text-align: right; font-variant-numeric: tabular-nums; }
    table.euer .line-major td { border-top: 1px solid #000; font-weight: 700; padding-top: 6px; }
    table.euer .grand td { border-top: 2px solid #000; border-bottom: 2px solid #000; font-size: 1.15rem; padding: 6px; }

    .badge { border: 1px solid #000; padding: 0 4px; border-radius: 0; background: transparent !important; color:#000 !important; }
    .flash, .hint { border: 1px solid #000; padding: 6px; background: transparent !important; color:#000 !important; }

    .print-only { display: block !important; }
    .storno td { font-style: italic; }
}