/* =========================================================
   ClassFund / Klassenkasse — style.css (v1.2)
   ---------------------------------------------------------
   ✓ Existing look preserved
   ✓ Adds <details> “background / rarely used” styling
   ✓ Adds disabled button styling
   ========================================================= */

:root{
  --bg:#0b0b0d;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text:#f5f5f5;
  --muted: rgba(245,245,245,.70);
  --accent: rgba(99,102,241,.26);
  --accentStroke: rgba(99,102,241,.70);
  --danger: rgba(239,68,68,.22);
  --dangerStroke: rgba(239,68,68,.60);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --pos: rgba(34,197,94,.95);
  --neg: rgba(239,68,68,.95);
}

html[data-theme="paper"]{
  --bg:#f7f6f2;
  --card: rgba(0,0,0,.04);
  --stroke: rgba(0,0,0,.10);
  --text:#141414;
  --muted: rgba(20,20,20,.60);
  --accent: rgba(0,0,0,.06);
  --accentStroke: rgba(0,0,0,.18);
  --danger: rgba(239,68,68,.14);
  --dangerStroke: rgba(239,68,68,.30);
  --shadow: 0 14px 40px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  min-height: 100vh;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  position: relative;
  overflow-x: hidden;

  background: var(--bg);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(900px 600px at 15% 15%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);

  background-repeat: no-repeat;
  background-size: cover;
}

.app{ max-width: 1160px; margin:0 auto; padding:22px; }

.topbar{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:16px;
}
.topbar__title h1{ margin:0; font-size:26px; }
.sub{ margin:6px 0 0; color: var(--muted); }

.topbar__controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

.donate input[type="image"]{
  height: clamp(90px, 10vh, 100px);
  width: auto;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.6);
  padding: 1px;
}

.supportCard{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.supportTitle{ font-weight: 900; }

.donate--inline input[type="image"]{
  height: 70px;
  width: auto;
  flex: 0 0 auto;
}

.seg{ display:grid; gap:6px; }
.seg__label{ font-size:12px; color: var(--muted); }
.seg__select{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  min-width: 120px;
}
html[data-theme="paper"] .seg__select{ background: rgba(255,255,255,.75); }

.grid{ display:grid; grid-template-columns: 440px 1fr; gap:16px; }
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

.card{
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--card) 85%, transparent 15%);
}

h2{ margin:0 0 12px; font-size:18px; }
.hr{ border:0; border-top:1px solid var(--stroke); margin:14px 0; opacity:.9; }

.field{ display:grid; gap:6px; margin-bottom:12px; }
label{ font-size:13px; color: var(--muted); }

/* Text-like inputs only (exclude radio/checkbox) */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding:11px 12px;
  border-radius:12px;
  outline:none;
}

input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.35); }

html[data-theme="paper"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="paper"] select,
html[data-theme="paper"] textarea{ background: rgba(255,255,255,.75); }
html[data-theme="paper"] input::placeholder,
html[data-theme="paper"] textarea::placeholder{ color: rgba(0,0,0,.35); }

textarea{ resize: vertical; }

/* Radios + Checkboxes: keep native size & align nicely */
input[type="radio"],
input[type="checkbox"]{
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  min-height: auto;
  vertical-align: middle;
  accent-color: color-mix(in srgb, var(--accentStroke) 85%, white 15%);
}

.radio label{
  display:flex;
  align-items:center;
  gap:10px;
  line-height: 1.2;
}

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .row2{ grid-template-columns: 1fr; }
}

.hint{ margin:8px 0 0; color: var(--muted); font-size:13px; }
.small{ font-size:12px; margin-top: 8px; }

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
  white-space: normal;
  line-height: 1.15;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--accent);
  border-color: var(--accentStroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn--primary:hover{
  box-shadow: 0 0 18px rgba(99,102,241,.25), 0 14px 38px rgba(0,0,0,.22);
}
.btn--danger{
  background: var(--danger);
  border-color: var(--dangerStroke);
}
.btn--icon{ padding:6px 10px; white-space: nowrap; }
.btn--file{ display:inline-flex; align-items:center; gap:8px; white-space: nowrap; }
.btn--file input{ display:none; }

.btn:disabled,
.btn--disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.7);
}

.summary{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
.summary__item{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px;
  margin: 5px 0;
}
html[data-theme="paper"] .summary__item{ background: rgba(255,255,255,.65); }
.summary__label{ font-size:12px; color: var(--muted); }
.summary__value{ font-size:18px; font-weight:900; margin-top:4px; }

.families{ display:grid; gap:10px; margin-top:10px; }
.familyCard{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
}
html[data-theme="paper"] .familyCard{ background: rgba(255,255,255,.65); }

/* Inactive family styling */
.familyCard.isInactive{
  opacity: .55;
  filter: grayscale(.2);
}

.familyCard.isInactive .familyName{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.25);
}

.familyCard.isInactive .amount{
  opacity: .75;
}

/* Optional: make actions slightly deemphasized */
.familyCard.isInactive .btn{
  opacity: .9;
}

/* If you want the toggle button to look "warning-ish" when active -> deactivation */
.familyCard .btn.toggleActiveBtn.isDeactivate{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.45);
}
.familyCard .btn.toggleActiveBtn.isDeactivate:hover{
  background: rgba(239,68,68,.20);
}

/* If inactive -> activation button can look positive */
.familyCard .btn.toggleActiveBtn.isActivate{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.45);
}
.familyCard .btn.toggleActiveBtn.isActivate:hover{
  background: rgba(34,197,94,.20);
}

.familyTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.familyMeta{ min-width:0; display:grid; gap:4px; }
.familyName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.familySmall{
  font-size:12px; color: var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center;
  padding:4px 8px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:12px;
  gap:6px;
}
.badge--inactive{ opacity:.75; }
.badge--due{
  border-color: color-mix(in srgb, var(--dangerStroke) 50%, var(--stroke) 50%);
  color: color-mix(in srgb, var(--neg) 70%, var(--muted) 30%);
}
.amount{ font-weight:950; font-size:16px; }
.amount.pos{ color: var(--pos); }
.amount.neg{ color: var(--neg); }

.familyActions{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}

/* ---------- checklist (expenses selection) ---------- */
.checklist{
  border:1px solid var(--stroke);
  border-radius:12px;
  background: rgba(255,255,255,.04);
  padding:10px;
  display:grid;
  gap:8px;
  max-height: 240px;
  overflow:auto;
}
.checkItem{
  display:flex; gap:10px; align-items:flex-start;
  padding:6px 8px;
  border-radius:10px;
}
.checkItem:hover{ background: rgba(255,255,255,.04); }
.checkItem input{ margin-top: 3px; }
.checkItem__main{ display:grid; gap:2px; min-width:0; }
.checkItem__title{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkItem__sub{ font-size:12px; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ledger{ display:grid; gap:10px; margin-top:10px; }
.txRow{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:8px;
}
html[data-theme="paper"] .txRow{ background: rgba(255,255,255,.65); }

.txTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.txTitle{ font-weight:900; }
.txMeta{ color: var(--muted); font-size:12px; line-height:1.35; white-space: pre-line; }
.txActions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.empty{ margin-top: 12px; }
.muted{ color: var(--muted); }

/* ---------- dialogs ---------- */
.dialog{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(10,10,11,.92);
  color: var(--text);
  padding:16px;
  width: min(760px, 92vw);
}
html[data-theme="paper"] .dialog{
  background: rgba(255,255,255,.92);
  color: var(--text);
}
.dialog--wide{ width: min(980px, 96vw); }
.dialog::backdrop{ background: rgba(0,0,0,.55); }
.dialog__head{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-bottom:8px;
}
.exportText{
  margin-top:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.dialog__actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:10px;
  flex-wrap: wrap;
}

.emailGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){
  .emailGrid{ grid-template-columns: 1fr; }
}
.preview{
  margin:0;
  white-space: pre-wrap;
  word-break: break-word;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:12px;
  padding:12px;
  min-height: 280px;
}
html[data-theme="paper"] .preview{ background: rgba(255,255,255,.75); }

.report{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:12px;
  padding:12px;
}
html[data-theme="paper"] .report{ background: rgba(255,255,255,.75); }
.report h3{ margin: 6px 0 8px; }
.report table{ width:100%; border-collapse: collapse; font-size: 13px; }
.report th, .report td{
  padding: 8px 6px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
.report th{ text-align:left; color: var(--muted); font-weight: 800; }

.timeRange{
  padding-left: 2px;
  color: red;
}

/* Category tables */
.categoryOverview{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
}
html[data-theme="paper"] .categoryOverview{ background: rgba(255,255,255,.65); }

.catTable{ width:100%; border-collapse: collapse; font-size: 13px; }
.catTable th, .catTable td{
  padding: 8px 6px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
.catTable th{ text-align:left; color: var(--muted); font-weight: 800; }


/* Import dialog UX */
.dropzone{
  border: 2px dashed var(--stroke);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  outline: none;
}

.dropzone:focus{
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.dropzone--dragover{
  border-color: var(--text);
  transform: scale(1.01);
}

.dropzone__title{
  font-weight: 800;
  margin-bottom: 4px;
}

.dropzone__sub{
  font-size: 13px;
}

.importStatus{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.importStatus--ok{ color: var(--pos); }
.importStatus--warn{ color: var(--muted); }
.importStatus--err{ color: var(--neg); }

/* ---------- reminder UI ---------- */
.reminderTop{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding:10px 12px;
  border-radius:12px;
  color: var(--muted);
}
.reminderList{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:12px;
  padding:10px;
  max-height: 420px;
  overflow:auto;
  display:grid;
  gap:10px;
}
/* Reminder list: prevent long emails from overlapping buttons */
.reminderRow {
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* allow break at safe points */
  word-break: break-word;
}

.reminderRow__left {
  flex: 1;
  min-width: 0; /* IMPORTANT: enables ellipsis inside flex item */
}

.reminderRow__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reminderRow .muted.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminderRow__buttons {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

html[data-theme="paper"] .reminderList{ background: rgba(255,255,255,.75); }
.remItem{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:6px;
}
.remItem__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.remItem__name{ font-weight: 900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.remItem__meta{ font-size:12px; color: var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.remItem__due{ font-weight: 900; color: var(--neg); }

/* =========================================================
   Add-Family <details> "background / rarely used"
   ========================================================= */

.detailsCard{
  border: 1px dashed color-mix(in srgb, var(--stroke) 70%, transparent 30%);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--card) 55%, transparent 45%);
}

.detailsSummary{
  cursor: pointer;
  user-select: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 10px;
  outline: none;
}

.detailsSummary::-webkit-details-marker{ display:none; }

.detailsSummary::after{
  content:"▾";
  opacity:.8;
  transform: translateY(-1px);
}

details[open] .detailsSummary::after{ content:"▴"; }

.detailsBody{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}

details.detailsCard .btn--primary{
  box-shadow: none;
  filter: saturate(.95);
}

/* ---------- category badges ---------- */
.badge--category{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  margin-left:6px;
  white-space:nowrap;
  border:1px solid transparent;
}

/* Material */
.badge--cat-material {
  background: #236b0f;
  color: #e0f2fe;
  border-color: #bae6fd;
}

/* Ausflug */
.badge--cat-ausflug {
  background: #155e75;
  color: #ecfeff;
  border-color: #a5f3fc;
}

/* Geschenk */
.badge--cat-geschenk {
  background: #701a75;
  color: #fdf4ff;
  border-color: #f5d0fe;
}

.badge--cat-bank-fees {
  background: #9e459f;
  color: #fdf4ff;
  border-color: #f5d0fe;
}

.badge--cat-reise {
  background: #b56a24;
  color: #fdf4ff;
  border-color: #f5d0fe;
}

/* Veranstaltung */
.badge--cat-veranstaltung {
  background: #660d64;
  color: #fdf4ff;
  border-color: #f5d0fe;
}

/* Einzahlung */
.badge--cat-einzahlung {
  background: #627807;
  color: #fdf4ff;
  border-color: #f5d0fe;
}

/* Essen */
.badge--cat-essen {
  background: #9a3412;
  color: #fff7ed;
  border-color: #fed7aa;
}

/* Fallback */
.badge--cat-unkategorisiert {
  background: #666509;
  color: #f1f5f9;
  border-color: #e2e8f0;
}

/* --------------------------- */
/* Themes */
/* --------------------------- */


/* paper theme tuning */
html[data-theme="paper"] .badge--category { opacity: .95; }

/* Mint theme tuning */
html[data-theme="mint"]{
  --bg:#f3fbf7;
  --card: rgba(6,95,70,.06);
  --stroke: rgba(6,95,70,.14);

  --text:#0f172a;
  --muted: rgba(15,23,42,.62);

  --accent: rgba(16,185,129,.22);
  --accentStroke: rgba(5,150,105,.65);

  --danger: rgba(239,68,68,.14);
  --dangerStroke: rgba(239,68,68,.32);

  --shadow: 0 14px 40px rgba(2,6,23,.10);

  --pos: rgba(16,185,129,.95);
  --neg: rgba(239,68,68,.95);
}

/* Mint: inputs/selects slightly lighter */
html[data-theme="mint"] input,
html[data-theme="mint"] select,
html[data-theme="mint"] textarea{
  background: rgba(255,255,255,.78);
}

html[data-theme="mint"] input::placeholder,
html[data-theme="mint"] textarea::placeholder{
  color: rgba(15,23,42,.35);
}

/* Mint: body glow more “fresh” */
html[data-theme="mint"] body::before{
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(16,185,129,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(34,197,94,.10), transparent 55%),
    var(--bg);
}


/* SLATE theme tuning */
html[data-theme="slate"]{
  --bg:#0b1220;
  --card: rgba(148,163,184,.08);
  --stroke: rgba(148,163,184,.18);

  --text:#f8fafc;
  --muted: rgba(248,250,252,.68);

  --accent: rgba(56,189,248,.20);
  --accentStroke: rgba(56,189,248,.60);

  --danger: rgba(239,68,68,.20);
  --dangerStroke: rgba(239,68,68,.55);

  --shadow: 0 18px 50px rgba(0,0,0,.42);

  --pos: rgba(34,197,94,.95);
  --neg: rgba(239,68,68,.95);
}

/* Slate: slightly darker controls (fits the night-friendly vibe) */
html[data-theme="slate"] .seg__select,
html[data-theme="slate"] input,
html[data-theme="slate"] select,
html[data-theme="slate"] textarea{
  background: rgba(2,6,23,.55);
}

/* Slate: cooler “modern” glow */
html[data-theme="slate"] body::before{
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(99,102,241,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);
}


html[data-theme="notebook"]{
  --bg:#fbfaf6;
  --card: rgba(15,23,42,.04);
  --stroke: rgba(15,23,42,.12);

  --text:#0f172a;
  --muted: rgba(15,23,42,.60);

  --accent: rgba(59,130,246,.16);
  --accentStroke: rgba(59,130,246,.38);

  --danger: rgba(239,68,68,.14);
  --dangerStroke: rgba(239,68,68,.30);

  --shadow: 0 14px 36px rgba(2,6,23,.10);

  --pos: rgba(22,163,74,.92);
  --neg: rgba(239,68,68,.92);
}

html[data-theme="notebook"] input,
html[data-theme="notebook"] select,
html[data-theme="notebook"] textarea,
html[data-theme="notebook"] .seg__select{
  background: rgba(255,255,255,.85);
}

html[data-theme="notebook"] input::placeholder,
html[data-theme="notebook"] textarea::placeholder{
  color: rgba(15,23,42,.35);
}

/* Schulheft-Linien + leichter Rand (sehr dezent) */
html[data-theme="notebook"] body::before{
  background:
    linear-gradient(to bottom, rgba(59,130,246,.07) 1px, transparent 1px) 0 0 / 100% 34px,
    radial-gradient(900px 600px at 15% 10%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(16,185,129,.08), transparent 55%),
    var(--bg);
}


html[data-theme="sky"]{
  --bg:#f4f8ff;
  --card: rgba(2,132,199,.06);
  --stroke: rgba(2,132,199,.16);

  --text:#0f172a;
  --muted: rgba(15,23,42,.60);

  --accent: rgba(14,165,233,.18);
  --accentStroke: rgba(2,132,199,.45);

  --danger: rgba(239,68,68,.14);
  --dangerStroke: rgba(239,68,68,.30);

  --shadow: 0 14px 36px rgba(2,6,23,.10);

  --pos: rgba(16,185,129,.92);
  --neg: rgba(239,68,68,.92);
}

html[data-theme="sky"] input,
html[data-theme="sky"] select,
html[data-theme="sky"] textarea,
html[data-theme="sky"] .seg__select{
  background: rgba(255,255,255,.84);
}

html[data-theme="sky"] body::before{
  background:
    radial-gradient(900px 600px at 20% 12%, rgba(14,165,233,.16), transparent 55%),
    radial-gradient(900px 600px at 85% 18%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(900px 600px at 55% 115%, rgba(16,185,129,.08), transparent 55%),
    var(--bg);
}

html[data-theme="mono"]{
  --bg:#fafafa;
  --card: rgba(2,6,23,.04);
  --stroke: rgba(2,6,23,.12);

  --text:#0b1220;
  --muted: rgba(11,18,32,.60);

  --accent: rgba(2,6,23,.06);
  --accentStroke: rgba(2,6,23,.18);

  --danger: rgba(239,68,68,.12);
  --dangerStroke: rgba(239,68,68,.28);

  --shadow: 0 12px 32px rgba(2,6,23,.10);

  --pos: rgba(22,163,74,.92);
  --neg: rgba(239,68,68,.92);
}

html[data-theme="mono"] input,
html[data-theme="mono"] select,
html[data-theme="mono"] textarea,
html[data-theme="mono"] .seg__select{
  background: rgba(255,255,255,.90);
}

html[data-theme="mono"] body::before{
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(2,6,23,.06), transparent 55%),
    radial-gradient(900px 600px at 82% 18%, rgba(2,6,23,.04), transparent 55%),
    var(--bg);
}

/* ---------- Dialogs: use class-based styling so we don't fight defaults ---------- */
dialog.dialog{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;              /* wichtig: nicht 0 */
  width:min(760px, 92vw);
  color: var(--text);
  background: rgba(10,10,11,.92); /* dark default */
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* wide variant */
dialog.dialog.dialog--wide{ width:min(980px, 96vw); }

/* theme overrides */
html[data-theme="paper"] dialog.dialog{
  background: rgba(255,255,255,.92);
}

html[data-theme="mint"] dialog.dialog,
html[data-theme="notebook"] dialog.dialog,
html[data-theme="sky"] dialog.dialog,
html[data-theme="mono"] dialog.dialog{
  background: rgba(255,255,255,.92);
}

/* slate stays dark by default (looks better) */
html[data-theme="slate"] dialog.dialog{
  background: rgba(10,10,11,.92);
}

/* backdrop */
dialog.dialog::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}



/* ==============================
   Footer
================================ */

.app-footer {
  margin-top: 40px;
  padding: 24px 16px 28px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 65%, transparent 35%);
  backdrop-filter: blur(10px);
}

.footer-container {
  max-width: 1160px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.footer-logo {
  height: 36px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-brand:hover .footer-logo {
  opacity: 1;
  transform: translateY(-1px);
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  color: var(--muted);
}

.footer-meta a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.footer-meta a:hover {
  text-decoration: underline;
}

.footer-sep {
  opacity: 0.5;
}


/* --- SEO / FAQ sections --- */

.seo-privacy,
.seo-faq,
.seo-teaser{
  width: 100%;
  margin: 18px auto 34px;
  padding: 16px 22px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 70%, transparent 30%);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.seo-privacy h2,
.seo-faq h2,
.seo-teaser h2{
  margin: 0 0 10px;
  font-size: 18px;
}

.seo-privacy p,
.seo-faq p,
.seo-teaser p{
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 92ch;
}

.seo-privacy hr,
.seo-teaser hr{
  border: 0;
  border-top: 1px solid var(--stroke);
  margin: 14px 0;
  opacity: .9;
}

.seo-faq h3,
.seo-teaser h3{
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

.seo-faq p,
.seo-teaser p{
  margin: 0 0 10px;
}


/*---------------------------*/
/* Mobile comfort */
/*---------------------------*/

@media (max-width: 520px){
  .app{ padding: 14px; }
  .topbar{ flex-direction: column; align-items: stretch; }
  .topbar__controls{ justify-content: flex-start; }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-meta {
    justify-content: center;
  }
}

@media (min-width: 981px){
  .grid{ align-items: start; }
  .grid > .card:first-child{
    position: sticky;
    padding-right: 10px;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow: auto;
  }

  .seo-privacy,
  .seo-faq,
  .seo-teaser{
    padding: 14px;
  }
}

/* iPhone notch support + avoid input zoom */
html { -webkit-text-size-adjust: 100%; }
:root{
  --tap: 44px;         /* min tap target */
  --pad: 12px;
}

/* Make tap targets comfortable */
.btn, input, select, textarea{
  min-height: var(--tap);
}

/* Better overall padding on mobile incl. safe-areas */
@media (max-width: 820px){
  .app{
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(16px + env(safe-area-inset-bottom))
      12px;
  }
}

/* ---------- Header / Topbar ---------- */
@media (max-width: 820px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .topbar__controls .donate{
    grid-column: span 2;
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }

  /* title smaller, avoid big header taking whole screen */
  .topbar__title h1{ font-size: 22px; }
  .sub{ font-size: 13px; line-height: 1.45; }

  /* Controls become a responsive grid instead of a long wrap-row */
  .topbar__controls{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  /* Select segments should fill available width */
  .seg{ width: 100%; }
  .seg__select{ width: 100%; min-width: 0; }

  /* Buttons become full-width grid cells */
  .topbar__controls .btn{
    width: 100%;
    text-align: center;
  }

  /* Make “danger” not too dominant visually */
  #resetBtn{ grid-column: span 2; }

  .supportCard{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Extra small phones: 1 column controls */
@media (max-width: 420px){
  .topbar__controls{
    grid-template-columns: 1fr;
  }
  #resetBtn{ grid-column: auto; }

  .supportCard{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Main grid ---------- */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

/* ---------- Summary cards ---------- */
@media (max-width: 820px){
  .summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 420px){
  .summary{ grid-template-columns: 1fr; }
}

/* Improve summary__value wrapping (numbers shouldn’t overflow) */
.summary__value{
  overflow-wrap: anywhere;
}

/* ---------- Family cards / tx rows ---------- */
@media (max-width: 520px){
  .familyTop, .txTop{
    flex-direction: column;
    align-items: flex-start;
  }
  .familyActions, .txActions{
    justify-content: flex-start;
    width: 100%;
  }
  .familyActions .btn,
  .txActions .btn{
    flex: 1 1 auto;
  }
}

/* ---------- Checklists / scroll areas ---------- */
@media (max-width: 820px){
  .checklist{
    max-height: 220px;
  }
  .reminderList{
    max-height: 340px;
  }
}

/* ---------- Dialogs (modals) ---------- */
@media (max-width: 820px){
  .dialog{
    width: min(96vw, 720px);
    padding: 14px;
    border-radius: 16px;
  }

  /* make content scroll within dialog on small screens */
  .dialog .emailGrid,
  .dialog .dialog__actions{
    gap: 10px;
  }

  /* better large text areas */
  .exportText,
  #emailTemplate,
  #reminderTemplate{
    font-size: 14px;
  }

  dialog::backdrop{
    background: rgba(0,0,0,.62);
  }
}

/* Prevent background scroll-jank when dialog is open (nice on iOS) */
body.dialog-open{
  overflow: hidden;
}

/* ---------- Footer ---------- */
@media (max-width: 820px){
  .app-footer{ margin-top: 26px; }
}

/* ---------- Links in SEO teaser (better tap) ---------- */
@media (max-width: 820px){
  .seo-teaser a, .seo-faq a, .seo-privacy a{
    display: inline-block;
    padding: 10px 0;
  }
}

/* ==============================
   FIXES: badge duplication + theme-friendly badges + iOS dialog safe-area
   ============================== */

/* --- 1) unify badge base (override the later inline-block definition) --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  margin-left:6px;
}

/* keep category badge as a “stronger” variant */
.badge--category{
  font-weight:800;
  padding:4px 9px;
  border:1px solid transparent;
}

/* --- 2) category colors: keep your palette, but soften per theme --- */
/* fallback first, then color-mix for nicer theme blending */
.badge--cat-material{
  background:#236b0f;
  color:#e0f2fe;
  border-color:#bae6fd;
  background: color-mix(in srgb, #236b0f 82%, var(--card) 18%);
}

.badge--cat-ausflug{
  background:#155e75;
  color:#ecfeff;
  border-color:#a5f3fc;
  background: color-mix(in srgb, #155e75 82%, var(--card) 18%);
}

.badge--cat-geschenk{
  background:#701a75;
  color:#fdf4ff;
  border-color:#f5d0fe;
  background: color-mix(in srgb, #701a75 82%, var(--card) 18%);
}

.badge--cat-bank-fees{
  background:#9e459f;
  color:#fdf4ff;
  border-color:#f5d0fe;
  background: color-mix(in srgb, #9e459f 82%, var(--card) 18%);
}

.badge--cat-reise{
  background:#b56a24;
  color:#fff7ed;
  border-color:#fed7aa;
  background: color-mix(in srgb, #b56a24 82%, var(--card) 18%);
}

.badge--cat-veranstaltung{
  background:#660d64;
  color:#fdf4ff;
  border-color:#f5d0fe;
  background: color-mix(in srgb, #660d64 82%, var(--card) 18%);
}

.badge--cat-einzahlung{
  background:#627807;
  color:#fdf4ff;
  border-color:#f5d0fe;
  background: color-mix(in srgb, #627807 82%, var(--card) 18%);
}

.badge--cat-essen{
  background:#9a3412;
  color:#fff7ed;
  border-color:#fed7aa;
  background: color-mix(in srgb, #9a3412 82%, var(--card) 18%);
}

.badge--cat-unkategorisiert{
  background:#666509;
  color:#f1f5f9;
  border-color:#e2e8f0;
  background: color-mix(in srgb, #666509 82%, var(--card) 18%);
}

/* --- 3) iOS safe-area inside dialogs --- */
dialog.dialog{
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (max-width: 820px){
  dialog.dialog{
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}


/* ClassFund Tooltip (emails) */
.cfTooltip{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: help;
  flex: 0 0 auto;
}

.cfTooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;

  max-width: 340px;
  width: max-content;
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(0,0,0,.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);

  font-size: 12px;
  line-height: 1.35;

  /* wichtig für lange emails */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;

  z-index: 9999;
}

.cfTooltip:hover::after,
.cfTooltip:focus::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}