/* KSV Clauen Kassenverwaltung -- Basis-Styles.
   Farben/Schriften bewusst nah am zuvor abgestimmten Klick-Prototyp gehalten. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
    --accent: #1f7a8c;
    --accent-dark: #145e6d;
    --admin: #b45309;
    --admin-soft: #c9a06b;
    --bg: #f7f7f5;
    --ink: #1f2430;
    --muted: #6b7280;
    --muted-light: #8a8f98;
    --border: #e6e6e2;
    --border-soft: #f0f0ee;
    --green: #1c6b41;
    --green-bg: #e6f7ec;
    --orange: #92400e;
    --orange-bg: #fef3e2;
    --red: #c0392b;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14.5px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, .h1, .h2 { font-family: 'Sora', sans-serif; margin: 0; }
.h1 { font-weight: 800; }
.h2 { font-weight: 700; }
.mono { font-family: 'JetBrains Mono', monospace; }

.container { max-width: 1100px; margin: 0 auto; }

/* ---------- Topbar & Navigation ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; transition: opacity .15s ease; }
.brand:hover { opacity: 0.8; }
.brand-logo {
    height: 44px; width: auto; flex-shrink: 0; display: block;
}
.brand-name { font-size: 16.5px; line-height: 1.2; }
.brand-sub { font-size: 12px; color: var(--muted-light); }

.admin-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 5px 10px;
    border-radius: 999px; background: var(--orange-bg); color: var(--orange);
}

.viewer-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 5px 10px;
    border-radius: 999px; background: #e2f1f4; color: var(--accent-dark);
}

.nav {
    display: flex; align-items: center; gap: 4px;
    padding: 0 24px; background: #fff; border-bottom: 1px solid var(--border);
    overflow-x: auto; white-space: nowrap;
}
.nav a {
    display: inline-block; padding: 13px 16px; font-family: 'Sora', sans-serif;
    font-weight: 700; font-size: 13.5px; color: var(--muted-light);
    border-bottom: 3px solid transparent; cursor: pointer;
}
.nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav a.admin-link { color: var(--admin-soft); }
.nav a.admin-link.active { color: var(--orange); border-bottom-color: var(--admin); }
.nav .nav-divider { width: 1px; align-self: stretch; margin: 10px 6px; background: var(--border); flex-shrink: 0; }
.nav .nav-admin-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange);
    flex-shrink: 0; padding-right: 4px;
}

@media (max-width: 640px) {
    /* Auf schmalen Bildschirmen passen nicht alle Reiter in eine Zeile --
       sie brechen deshalb einfach in eine zweite (ggf. dritte) Zeile um,
       statt seitlich abgeschnitten und nur per Wischen erreichbar zu sein
       (das war vorher so gelöst, war aber auf manchen Geräten schwer als
       "hier kann man wischen" erkennbar). */
    .nav {
        padding: 8px 14px; flex-wrap: wrap; row-gap: 6px; column-gap: 2px;
        overflow-x: visible; white-space: normal;
    }
    .nav a { padding: 8px 11px; font-size: 12.5px; border-radius: 8px; }
    .nav a.active { background: #1f7a8c14; }
    .nav a.admin-link.active { background: var(--orange-bg); }
}

/* ---------- Layout building blocks ---------- */

.content { padding: 26px 24px 60px 24px; }

.card {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; margin-bottom: 18px;
}
.card-tight { padding: 4px; }

/* Für Verwaltungsseiten, die aus einem schmalen Formular-Card gefolgt von
   einer breiten Tabelle bestehen (Kategorien, Veranstaltungen, Mitglieder):
   begrenzt die GESAMTE Seite auf eine gemeinsame Breite, statt dass das
   Formular schmal bleibt und die Tabelle bis zum vollen 1100px-Container
   auseinandergezogen wird -- sonst klafft auf breiten Bildschirmen neben dem
   Formular eine große, unbeabsichtigt wirkende Lücke. */
.narrow-page { max-width: 820px; }

.stat-card .label { margin-bottom: 12px; }
.stat-card .value { font-size: 27px; }

.stat-grid { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-grid .stat-card { flex: 1 1 240px; max-width: 280px; margin-bottom: 0; }
@media (max-width: 480px) {
    .stat-grid { gap: 12px; }
    .stat-grid .stat-card { flex-basis: 100%; max-width: none; }
}

/* ---------- Kassenstand-Verlauf (Liniendiagramm, reines SVG ohne JS) ---------- */

a.trend-card-link {
    text-decoration: none; color: inherit; display: block; cursor: pointer;
    transition: box-shadow .15s ease, transform .1s ease;
}
a.trend-card-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: var(--accent); }
a.trend-card-link:active { transform: scale(0.995); }

.trend-card-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.trend-card-header .label { margin-bottom: 8px; }
@media (max-width: 640px) {
    .trend-card-header { align-items: flex-start; }
}

.trend-chart { width: 100%; height: auto; display: block; overflow: visible; }
/* Die große, beschriftete Verlauf-Ansicht (verlauf.php) braucht auf schmalen
   Bildschirmen ein eigenes, schmaleres SVG -- sonst würden die
   Achsenbeschriftungen (Euro-Beträge, Monate) beim Herunterskalieren auf
   Handy-Breite unlesbar klein. Serverseitig werden deshalb zwei Varianten
   gerendert und hier per CSS nur die passende eingeblendet. */
.trend-chart-mobile { display: none; }
@media (max-width: 640px) {
    .trend-chart-desktop { display: none; }
    .trend-chart-mobile { display: block; }
}
.trend-line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.trend-dot-current { fill: var(--accent); }
.trend-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.trend-axis-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--muted-light); }
.trend-grad-start { stop-color: var(--accent); stop-opacity: 0.28; }
.trend-grad-end { stop-color: var(--accent); stop-opacity: 0; }

.label {
    font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
    display: block; margin-bottom: 6px;
}

.btn {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
    border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid #d8d8d3; color: var(--ink); }
.btn-big {
    font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px;
    border: none; border-radius: 12px; padding: 14px 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; background: var(--accent); color: #fff;
}

.input, select.input, textarea.input {
    font-family: 'Work Sans', sans-serif; font-size: 13.5px;
    padding: 10px 12px; border: 1px solid #d8d8d3; border-radius: 9px;
    width: 100%; background: #fff; color: var(--ink);
}
textarea.input { font-family: 'JetBrains Mono', monospace; line-height: 1.5; }

.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Datumsfelder brauchen nie die volle Feldbreite -- vor allem wenn die
   field-row auf schmalen Bildschirmen auf eine Spalte umbricht, wirkt ein
   volles-Breite-Datumsfeld unnötig ausladend. Feste, kompakte Breite reicht
   für "TT.MM.JJJJ" plus Kalender-Icon locker aus. */
input[type="date"].input { max-width: 170px; }

.badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-muted { background: var(--border-soft); color: var(--muted-light); }
/* Veranstaltungs-Badge farblich vom Kategorie-Badge abgesetzt (statt zwei
   optisch identischen grauen Pillen), damit auf einen Blick klar ist,
   welcher Chip die Kategorie und welcher die Veranstaltung ist. */
.badge-event { background: #e2f1f4; color: var(--accent-dark); }
.badge-event:hover { background: #d3ebef; }

/* Kategorie-/Veranstaltungs-Badges unter statt neben dem Beschreibungstext --
   so kollidieren sie nie mit dem Text und das Muster ist auf Mobil und
   Desktop identisch (keine Sonderbehandlung je Bildschirmgröße nötig). */
.desc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* ---------- Filter-Checkbox (z. B. "Bereits bezahlte ausblenden") ----------
   Rein CSS-basiert, ganz ohne JavaScript: die Checkbox blendet über den
   Geschwister-Selektor passende Tabellenzeilen ein/aus. Checkbox und Label
   müssen dafür direkte Geschwister der Karte mit der Tabelle bleiben. */
.filter-checkbox {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.filter-checkbox-label {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13px; color: var(--muted); margin-bottom: 14px; user-select: none;
}
.filter-checkbox-label::before {
    content: ''; width: 17px; height: 17px; border-radius: 5px;
    border: 1.5px solid #d8d8d3; background: #fff; flex-shrink: 0;
}
.filter-checkbox:checked + .filter-checkbox-label::before {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/12px no-repeat;
    border-color: var(--accent);
}
.filter-checkbox:focus-visible + .filter-checkbox-label::before { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-checkbox:checked ~ .card .row-aktuell { display: none; }

.chip {
    font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 700;
    padding: 8px 14px; border-radius: 9px; cursor: pointer;
    border: 1.5px solid #d8d8d3; background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.member-chip {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
    border-radius: 13px; cursor: pointer; border: 1.5px solid var(--border);
    background: #fff; text-align: left; width: 100%;
}
.member-chip.selected { border-color: var(--accent); background: #1f7a8c14; box-shadow: inset 0 0 0 1px var(--accent); }
.member-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }

.avatar {
    width: 34px; height: 34px; border-radius: 999px; display: flex;
    align-items: center; justify-content: center; font-family: 'Sora', sans-serif;
    font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0;
}

/* Auf schmalen Bildschirmen passt bei 220px Mindestbreite nur eine Spalte
   in die Zeile -- bei einer langen Mitgliederliste (z. B. 13 Mitglieder)
   wird das dann schnell eine sehr lange, unübersichtliche Liste zum
   Durchscrollen. Zwei kompaktere Spalten halbieren die Höhe der Liste und
   machen sie auf einen Blick erfassbar. */
@media (max-width: 480px) {
    .member-chip-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .member-chip { padding: 8px 10px; gap: 8px; }
    .member-chip .avatar { width: 28px; height: 28px; font-size: 10.5px; }
}

/* ---------- Tables (responsive: collapse to cards on narrow screens) ---------- */

table.data { border-collapse: collapse; width: 100%; }
table.data th {
    text-align: left; font-family: 'Sora', sans-serif; font-size: 11px;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-light);
    font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
table.data td { text-align: left; font-size: 13.5px; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); }
table.data tr:last-child td { border-bottom: none; }
.amount-in { color: var(--green); font-weight: 600; }
.amount-out { color: #d97706; font-weight: 600; }
.voided { text-decoration: line-through; color: #b4b8bf; }

table.grid { border-collapse: collapse; width: 100%; }
table.grid th {
    text-align: center; font-family: 'Sora', sans-serif; font-size: 11.5px;
    font-weight: 700; color: var(--muted); padding: 0 6px 12px 6px;
}
table.grid th:first-child { text-align: left; }
table.grid td { text-align: center; font-size: 12.5px; padding: 8px 6px; border-top: 1px solid var(--border-soft); }
table.grid td:first-child { text-align: left; font-weight: 600; font-size: 13px; padding-right: 16px; white-space: nowrap; }

/* Name-Spalte bleibt beim seitlichen Scrollen der Jahresübersicht sichtbar
   ("sticky"), damit man auf schmalen Bildschirmen immer sieht, wessen Zeile
   man gerade ansieht. */
table.grid th:first-child, table.grid td:first-child {
    position: sticky; left: 0; background: #fff;
    box-shadow: 4px 0 6px -4px rgba(0,0,0,.12);
}
table.grid th:first-child { z-index: 2; }
table.grid td:first-child { z-index: 1; }
table.grid .cell { display: inline-block; min-width: 52px; padding: 5px 0; }
.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid-today { box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 6px; }
.grid-paid { color: var(--green); font-weight: 600; }
.grid-open { background: var(--orange-bg); color: var(--orange); border-radius: 6px; font-weight: 700; }
.grid-none { color: #d8d8d3; }

.grid-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.grid-toolbar .range-label { flex: 1; text-align: center; font-size: 12px; color: var(--muted-light); }

@media (max-width: 640px) {
    table.responsive thead { display: none; }
    table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
    table.responsive tr { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin-bottom: 10px; }
    table.responsive td {
        border-bottom: 1px solid var(--border-soft); padding: 10px 0;
        display: flex; justify-content: space-between; gap: 12px;
    }
    table.responsive td:last-child { border-bottom: none; }
    table.responsive td::before {
        content: attr(data-label); font-family: 'Sora', sans-serif; font-weight: 700;
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-light);
        flex-shrink: 0;
    }

    /* "Grund"/"Beschreibung"-Zellen (Name + Text + evtl. Kategorie-Badge)
       sprengen die schmale Handy-Breite, wenn Label und Inhalt sich wie bei
       den übrigen Zellen ein und dieselbe Zeile teilen müssen -- das drückt
       Text und Badge dann ineinander (siehe Screenshot-Feedback). Deshalb
       hier eine eigene Zeile fürs Label, darunter Inhalt und Badge ganz
       normal fließend/umbrechend über die volle Breite.
    */
    table.responsive td[data-label="Grund"],
    table.responsive td[data-label="Beschreibung"] {
        display: block;
    }
    table.responsive td[data-label="Grund"]::before,
    table.responsive td[data-label="Beschreibung"]::before {
        display: block;
        margin-bottom: 4px;
    }

    /* "Zahlungspflichtig"-Tabelle: kompaktere 2-zeilige Karte statt vier
       einzeln beschrifteten Zeilen pro Mitglied -- Name+Status oben,
       offene Monate+Betrag darunter. */
    table.due-table.responsive tr {
        display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 3px;
        padding: 12px 14px;
    }
    table.due-table.responsive td { display: block; padding: 0; border: 0; }
    table.due-table.responsive td::before { content: none; }
    table.due-table.responsive td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 14px; }
    table.due-table.responsive td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--muted-light); }
    table.due-table.responsive td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
    table.due-table.responsive td:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 700; font-size: 13px; }
}

.activity-row {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.activity-row:last-child { border-bottom: none; }
.activity-time { color: var(--muted-light); font-size: 12px; flex-shrink: 0; }

.notice { font-size: 12.5px; color: var(--muted-light); margin-top: 10px; }
.success { font-size: 13px; color: var(--green); font-weight: 600; margin-top: 14px; }
.error-text { font-size: 12.5px; color: var(--red); margin-bottom: 10px; }

.login-wrap {
    /* align-items bewusst NICHT "center" -- das Anmelde-Feld soll wie vorher
       oben bleiben, nur der Wappen-Hintergrund (absolut positioniert, siehe
       unten) soll den kompletten Bereich ausfüllen. "center" hatte das
       Anmelde-Feld selbst mit nach unten in die Bildschirmmitte gezogen,
       auf dem Handy oft weit unterhalb des sichtbaren Bereichs. */
    display: flex; justify-content: center; align-items: flex-start;
    /* Füllt den kompletten sichtbaren Bereich unterhalb der Kopfzeile (81px hoch) --
       damit das Wappen im Hintergrund immer den ganzen sichtbaren Platz ausfüllt,
       egal ob Mobil oder Desktop. */
    min-height: calc(100vh - 81px);
    padding: 60px 20px 40px; position: relative; overflow: hidden;
}
.login-card { max-width: 380px; width: 100%; position: relative; z-index: 1; }

/* Öffentliche Startseite (public/index.php, nicht angemeldet): nutzt densel-
   ben Wappen-Hintergrund-Look wie .login-wrap, aber hier stehen direkt
   Inhalte (Kassenstand, Jahresübersicht) statt eines schmalen Anmelde-
   Formulars an -- auf dem Handy soll man Kassenstand und Liste möglichst
   ohne Scrollen sehen, daher hier deutlich weniger Abstand nach oben als
   beim eigentlichen Login. */
@media (max-width: 640px) {
    .public-home-wrap { padding-top: 20px; }
}

/* Dekoratives Wappen im Hintergrund der Anmelde-Seite ("Blur-Look").
   Füllt .login-wrap komplett aus (wie ein Hintergrundbild mit "cover") --
   dafür sorgt preserveAspectRatio="xMidYMid slice" auf dem <svg> selbst. */
.login-bg-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--accent);
    opacity: 0.14;
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
    /* Unten weich ausblenden statt hart an der Box-Kante abzuschneiden --
       oben bewusst nicht (das Wappen soll direkt unter dem Header voll
       sichtbar beginnen). */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.login-bg-logo svg { width: 100%; height: 100%; display: block; }
.login-bg-logo svg path { fill: currentColor !important; }

/* Chips, die eigentlich Checkboxen/Radios sind (kein JavaScript nötig) */
.chip-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip-input:checked + label.chip { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-input:focus-visible + label.chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-actions { display: flex; gap: 10px; }
.text-link-btn {
    background: transparent; border: none; padding: 2px 4px; cursor: pointer;
    font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700; color: var(--accent);
}

.demo-banner {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    padding: 9px 14px; border: 1px dashed #d8d8d3; border-radius: 10px; background: #fbfbfa;
    font-size: 11.5px; color: var(--muted-light); flex-wrap: wrap;
}

/* ---------- Druckansicht (z. B. für die Kassenprüfung) ----------
   Blendet Navigation, Buttons und Formulare aus, zeigt nur die reinen
   Karten/Tabellen -- und stellt sicher, dass seitlich scrollbare Bereiche
   (Jahresübersicht) beim Drucken komplett statt nur ausschnittsweise
   erscheinen. */
/* ---------- Footer: dezenter Link zum PayPal-Pool ---------- */
.site-footer {
    text-align: center;
    padding: 20px 24px 32px;
}
.paypal-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--border-soft);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.paypal-link:hover { background: var(--green-bg); color: var(--green); }

@media print {
    .nav, .topbar form, .topbar a.btn-ghost, .admin-badge,
    .demo-banner, .success, .error-text, .site-footer,
    button, form, .btn, .btn-ghost, .btn-big, .btn-primary, .text-link-btn {
        display: none !important;
    }
    body { background: #fff; }
    .content { padding: 0; }
    .card {
        border: 1px solid #ccc; box-shadow: none; break-inside: avoid;
        margin-bottom: 14px;
    }
    .grid-scroll { overflow: visible !important; }
    a { color: inherit; text-decoration: none; }
    a.trend-card-link { pointer-events: none; }
}