/* Jan – Vereinsverwaltung. Design-Tokens aus dem Claude-Design-Entwurf. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13.5px;
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface2: #f7f7f5;
  --border: #e5e4df;
  --border2: #d8d6d0;
  --text: #201f1d;
  --text2: #71706a;
  --text3: #9c9a93;
  --accent: oklch(0.55 0.16 255);
  --accent-hover: oklch(0.5 0.16 255);
  --accent-soft: oklch(0.95 0.028 255);
  --accent-soft2: oklch(0.91 0.05 255);
  --rowpad: 9px;
  --green: oklch(0.55 0.14 152);
  --green-soft: oklch(0.94 0.045 152);
  --amber: oklch(0.62 0.13 75);
  --amber-soft: oklch(0.95 0.05 85);
  --red: oklch(0.55 0.18 27);
  --red-soft: oklch(0.94 0.04 27);
  --shadow: 0 1px 3px rgba(30,28,24,0.07);
  --radius: 8px;
  background: var(--bg);
  color: var(--text);
}

body[data-theme="dunkel"] {
  --bg: #151517;
  --surface: #1d1d20;
  --surface2: #242427;
  --border: #2c2c30;
  --border2: #3a3a3f;
  --text: #ededef;
  --text2: #a2a1a8;
  --text3: #6f6e75;
  --accent: oklch(0.68 0.14 255);
  --accent-hover: oklch(0.74 0.13 255);
  --accent-soft: oklch(0.3 0.05 255);
  --accent-soft2: oklch(0.36 0.07 255);
  --green: oklch(0.72 0.14 152);
  --green-soft: oklch(0.32 0.05 152);
  --amber: oklch(0.75 0.13 80);
  --amber-soft: oklch(0.33 0.05 85);
  --red: oklch(0.7 0.16 27);
  --red-soft: oklch(0.32 0.05 27);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.mono { font-family: 'IBM Plex Mono', monospace; }
input, select, button, textarea { font-family: inherit; color: var(--text); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-soft2); outline-offset: 0; border-color: var(--accent) !important;
}
::placeholder { color: var(--text3); }
button { cursor: pointer; }

/* Layout */
.shell { display: flex; height: 100vh; overflow: hidden; }
nav.side {
  width: 224px; flex: none; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 9px; background: #fff;
  border: 1px solid var(--border); display: grid; place-items: center;
  font-weight: 700; color: var(--accent);
}
.brand-name { font-weight: 700; font-size: 16px; color: var(--accent); letter-spacing: -0.2px; }
.brand-name .dot { color: #d22c2c; }
.navlist { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.navbtn {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: none;
  border-radius: 7px; background: transparent; color: var(--text2);
  font-size: 13px; font-weight: 500; text-align: left; width: 100%;
}
.navbtn:hover { background: var(--surface2); }
.navbtn.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.navbtn .ico { width: 16px; text-align: center; }
.navbtn .lbl { flex: 1; }
.badge {
  font-size: 10.5px; font-weight: 600; padding: 1.5px 6px; border-radius: 99px;
  background: var(--surface2); color: var(--text3);
}
.badge.warn { background: var(--red-soft); color: var(--red); }
.side-auth {
  margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text2);
}
.side-auth:empty { display: none; }
.side-auth .who { display: flex; align-items: center; gap: 8px; }
.side-auth .who img {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
}
.side-auth .who .mail {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text2);
}
.side-auth .btn.sm { width: 100%; justify-content: center; }
.side-auth .hint { margin-top: 6px; color: var(--text3); line-height: 1.45; }
.side-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text2);
}
main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* height:100% allein genuegt nicht: mit min-height:auto darf der Inhalt die
   Hoehe wieder aufblaehen, dann rutschte die Fussleiste des Detail-Panels
   unter den Fensterrand. min-height:0 erlaubt dem Flex-Kind zu schrumpfen. */
.screen { display: none; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.screen.on { display: flex; }
.screen.scroll { overflow-y: auto; }

/* Header */
header.head { flex: none; display: flex; align-items: center; gap: 16px; padding: 18px 24px 0; }
h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.2px; }
.sub { font-size: 12.5px; color: var(--text2); margin-top: 3px; }
.spacer { flex: 1; }

/* Buttons */
.btn {
  padding: 7px 13px; border: 1px solid var(--border2); border-radius: 7px;
  background: var(--surface); font-size: 13px; font-weight: 550;
}
.btn:hover { background: var(--surface2); }
.btn.primary { border: none; background: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.dash {
  border: 1px dashed var(--border2); background: none; color: var(--text2);
  width: 100%; padding: 9px 0; font-weight: 600; border-radius: var(--radius);
}
.btn.dash:hover { color: var(--accent); border-color: var(--accent); }
.chip {
  padding: 5.5px 11px; border: 1px solid var(--border2); border-radius: 99px;
  background: var(--surface); color: var(--text2); font-size: 12px; font-weight: 550;
}
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft2); }
.iconbtn { border: none; background: none; color: var(--text3); font-size: 15px; padding: 2px; }
.iconbtn:hover { color: var(--text); }

/* Cards & tables */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.card-pad { padding: 14px 16px; }
.toolbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 24px 12px; flex-wrap: wrap; }
.body-split { flex: 1; display: flex; min-height: 0; padding: 0 24px 20px; gap: 14px; }
.tablewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rows { flex: 1; overflow-y: auto; }
.thead, .trow { display: grid; gap: 0 10px; align-items: center; }
.thead {
  padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 11px;
  font-weight: 650; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3);
}
.trow { padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.trow:hover { background: var(--surface2); }
.tfoot { padding: 7px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text3); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pill.gruppe { background: var(--accent-soft); color: var(--accent); font-size: 10.5px; }
.pill.befr { background: var(--amber-soft); color: var(--amber); font-size: 10.5px; }
.sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text3);
}
.hint {
  font-size: 12px; color: var(--text2); background: var(--surface2);
  border-radius: 7px; padding: 9px 12px; line-height: 1.5;
}
input.f, select.f, textarea.f {
  padding: 6px 9px; border: 1px solid var(--border2); border-radius: 6px;
  background: var(--surface); font-size: 12.5px; width: 100%;
}
label.fld { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }

/* Detail panel
   Breite darf mitgehen: bei festen 330px blieb links zu wenig fuer die
   Tabelle uebrig. Unter 1100px liegt das Panel als Schublade OBEN AUF der
   Liste (siehe Media Query weiter unten) statt ihr Platz zu nehmen. */
aside.detail {
  width: clamp(300px, 32%, 380px); flex: none;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.detail-head {
  flex: none;
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
.detail-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
/* Fussleiste des Panels: bleibt immer sichtbar, auch wenn der Inhalt
   laenger ist als das Fenster. Vorher rutschten die Schaltflaechen bei
   kleinem Fenster unter den Bildschirmrand. */
.detail-foot {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface2);
}
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 99px;
  background: var(--accent-soft2); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}

/* Ziehen & Ablegen auf der Gruppen-Seite */
.grpzeile:active { cursor: grabbing; }
.grpzeile:hover  { background: var(--surface2); }
.sidecard.dropziel {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
}

/* Gruppenauswahl – gemeinsam von Panel und Familienanlage genutzt
   (siehe mitgliedFelder in jan.js) */
.fld-lbl { font-size: 11px; color: var(--text2); }
.grpwahl { display: flex; flex-direction: column; gap: 4px; }
.grpbtn {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--border2); border-radius: 7px;
  background: var(--surface); text-align: left; width: 100%;
}
.grpbtn.on { border-color: var(--accent-soft2); background: var(--accent-soft); }
.grpbox {
  width: 16px; height: 16px; flex: none; border-radius: 5px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--accent); display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.grpbtn.on .grpbox { border-color: var(--accent-soft2); }
.grplbl { flex: 1; font-size: 12.5px; font-weight: 550; }
.grpbtn.on .grplbl, .grpbtn.on .grpfee { color: var(--accent); }
.grpfee { font-size: 11.5px; color: var(--text2); }
/* Mehrspaltig, sobald Platz ist (Familienanlage) */
.grpwahl.breit { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Status */
.st-offen   { background: color-mix(in oklab, var(--red-soft) 32%, var(--surface)); }
.st-ki      { background: color-mix(in oklab, var(--amber-soft) 32%, var(--surface)); }
.st-ignoriert { background: var(--surface2); text-decoration: line-through; opacity: .65; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(15,15,18,0.45);
  display: grid; place-items: center; z-index: 50;
}
.modal-box {
  width: 460px; max-height: 84vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.warnbox {
  display: flex; gap: 8px; font-size: 12px; color: var(--red);
  background: var(--red-soft); border-radius: 7px; padding: 9px 12px; line-height: 1.5;
}
.drop {
  display: grid; place-items: center; gap: 6px; padding: 26px 16px;
  border: 2px dashed var(--border2); border-radius: 10px; text-align: center;
}
.drop:hover { border-color: var(--accent); }

/* Sparkasse-Logo */
.sparkasse-s {
  width: 14px; height: 14px; flex: none; border-radius: 4px;
  background: #e2001a; color: #fff; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800;
}

/* Toast */
#toast {
  position: fixed; bottom: 18px; right: 18px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 550;
  background: var(--text); color: var(--bg); box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none;
}
#toast.on { opacity: 1; transform: none; }
#toast.err { background: var(--red); color: #fff; }
#toast.ok { background: var(--green); color: #fff; }

/* Portal-Modus: Verwaltung ausgeblendet */
body.portal-mode nav.side, body.portal-mode .topbar,
body.portal-mode #syBanner, body.portal-mode #roleBanner { display: none !important; }

/* Top bar */
.topbar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px;
  gap: 10px; padding: 8px 24px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: relative; z-index: 30;
}
.topbar .pagetitle { flex: none; font-weight: 650; font-size: 14px; min-width: 90px; white-space: nowrap; }
.topbar select.tb {
  padding: 5px 7px; border: 1px solid var(--border2); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600;
}
.dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; width: 210px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); overflow: hidden;
  display: flex; flex-direction: column; z-index: 60;
}
.dropdown button {
  display: flex; align-items: center; gap: 9px; padding: 7.5px 12px; border: none;
  border-bottom: 1px solid var(--border); background: none; text-align: left;
  font-size: 12.5px; font-weight: 550; color: var(--text);
}
.dropdown button:hover { background: var(--accent-soft); }
.dropdown .ico { width: 16px; text-align: center; font-size: 12px; color: var(--text3); }
.banner {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 24px;
  border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 550;
}
.mobnav { display: none; }
@media (max-width: 760px) {
  nav.side { display: none !important; }
  .mobnav { display: block; }
}

/* Schmales Fenster: das Detail-Panel nimmt der Liste keinen Platz mehr weg,
   sondern liegt als Schublade darueber. Sonst wurde die Tabelle bis zur
   Unlesbarkeit gequetscht und die Schaltflaechen im Panel waren nicht mehr
   erreichbar. */
@media (max-width: 1100px) {
  .body-split { position: relative; }
  aside.detail {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(380px, 100%); z-index: 30;
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.18);
  }
}
@media (max-width: 620px) {
  aside.detail { width: 100%; }        /* Vollbild auf dem Telefon */
  .body-split { padding: 0 12px 12px; }
  .toolbar { padding: 10px 12px 8px; }
}

/* Sidebar nav groups */
.navgroups { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.navgroup-title {
  padding: 9px 10px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text3);
}
nav.side.closed { width: 56px; }
nav.side.closed .brand-name, nav.side.closed .navbtn .lbl, nav.side.closed .navbtn .badge,
nav.side.closed .navgroup-title, nav.side.closed .side-foot .fname { display: none; }
nav.side.closed .navgroup-sep { height: 1px; background: var(--border); margin: 6px 8px; }
.navgroup-sep { display: none; }
nav.side.closed .navgroup-sep { display: block; }
nav.side { transition: width 0.15s ease; }

/* Portal */
.pcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 13px 15px; display: flex; flex-direction: column; gap: 7px;
}
.pchip {
  padding: 8px 16px; border: 1px solid var(--border2); border-radius: 99px;
  background: var(--surface); color: var(--text2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pchip.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Side list cards (Gruppen/Anwesenheit/Lehrer/Veranstaltungen) */
.sidecard {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  text-align: left; cursor: pointer;
}
.sidecard.on { border-color: var(--accent); background: var(--accent-soft); }
.minitag {
  padding: 1.5px 7px; border-radius: 99px; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text2); font-size: 10px; font-weight: 700;
}
.datechip {
  padding: 4.5px 11px; border: 1px solid var(--border2); border-radius: 99px;
  background: var(--surface); color: var(--text2); font-size: 11.5px; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}
.datechip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.progress { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 99px; }

/* Settings tabs */
.tabs { flex: none; display: flex; gap: 4px; padding: 14px 24px 0; }
.tab {
  padding: 7px 14px; border: 1px solid var(--border); border-bottom: none;
  border-radius: 8px 8px 0 0; background: var(--surface2); color: var(--text2);
  font-size: 12.5px; font-weight: 600;
}
.tab.on { background: var(--surface); color: var(--accent); border-color: var(--border2); }
.tabpane { display: none; }
.tabpane.on { display: block; }