/* Stammtisch — Design-System (mobile-first, Kneipen-Identität, Dark/Light).
   Farbwelt bewusst warm: Eiche + Bernstein, wie die Ausbaustufe-Speisekarte. */

:root {
  --ground:   #EFE7D6;
  --surface:  #F8F2E6;
  --surface2: #FCF8EF;
  --ink:      #2A211A;
  --ink-soft: #5A4B3C;
  --ink-mute: #8A7860;
  --line:     #E1D5BF;
  --line-str: #D2C2A4;
  --amber:    #B0770F;
  --amber-ink:#FFFFFF;
  --green:    #3E6B4F;
  --brick:    #A9482A;
  --danger:   #A9482A;
  --shadow:   0 6px 24px -12px rgba(60, 40, 15, .35);
  --nav-h:    64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #17110B;
    --surface:  #201812;
    --surface2: #2A2018;
    --ink:      #F1E8D8;
    --ink-soft: #C6B7A1;
    --ink-mute: #94836D;
    --line:     #362A20;
    --line-str: #46372A;
    --amber:    #E7A733;
    --amber-ink:#241704;
    --green:    #79A98A;
    --brick:    #D97A4E;
    --danger:   #D97A4E;
    --shadow:   0 8px 28px -14px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="light"] {
  --ground:#EFE7D6; --surface:#F8F2E6; --surface2:#FCF8EF; --ink:#2A211A;
  --ink-soft:#5A4B3C; --ink-mute:#8A7860; --line:#E1D5BF; --line-str:#D2C2A4;
  --amber:#B0770F; --amber-ink:#FFFFFF; --green:#3E6B4F; --brick:#A9482A; --danger:#A9482A;
}
:root[data-theme="dark"] {
  --ground:#17110B; --surface:#201812; --surface2:#2A2018; --ink:#F1E8D8;
  --ink-soft:#C6B7A1; --ink-mute:#94836D; --line:#362A20; --line-str:#46372A;
  --amber:#E7A733; --amber-ink:#241704; --green:#79A98A; --brick:#D97A4E; --danger:#D97A4E;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
.serif { font-family: "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif; }
a { color: var(--amber); text-decoration: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 8px; }

/* --- Layout --- */
.wrap { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 1.5rem; }
.stack > * + * { margin-top: .8rem; }
.row { display: flex; align-items: center; gap: .6rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.muted { color: var(--ink-mute); }
.tnum { font-variant-numeric: tabular-nums; }

h1.page { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 1.7rem; margin: .2rem 0 .1rem; letter-spacing: -.01em; }
.eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); font-weight: 600; }

/* --- Top bar --- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: max(env(safe-area-inset-top, 0px), .2rem) 1rem .55rem;
}
.topbar-inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 40px; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--amber); color: var(--amber-ink); display: grid; place-items: center; font-size: 1rem; }
.club-switch { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--line-str); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 600; max-width: 55vw; }
.club-switch .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; font-size: 1.15rem; }

/* --- Cards --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; }
.card.tight { padding: .8rem .9rem; }
.card-title { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 1.15rem; margin: 0 0 .1rem; }

/* --- Buttons (min 44px touch) --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: 0 1.1rem; border-radius: 13px; border: 1px solid var(--line-str); background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform .05s ease, filter .15s ease; width: auto; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--amber); color: var(--amber-ink); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); background: transparent; }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 1.05rem; }

/* --- Chips / badges --- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px solid var(--line-str); color: var(--ink-soft); }
.chip.amber { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 45%, transparent); }
.chip.green { color: var(--green); border-color: color-mix(in oklab, var(--green) 45%, transparent); }
.chip.red { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.chip.solid { background: var(--amber); color: var(--amber-ink); border-color: transparent; }

/* --- Avatar --- */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklab, var(--amber) 22%, var(--surface2)); color: var(--amber); display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: 0 0 auto; text-transform: uppercase; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.15rem; }

/* --- List rows --- */
.list { display: flex; flex-direction: column; gap: .5rem; }
.list-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .grow .s { font-size: .82rem; color: var(--ink-mute); }

/* --- Big number (Kasse/Stats) --- */
.bignum { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 2.4rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pos { color: var(--danger); }   /* Schuld = rot */
.neg { color: var(--green); }    /* Guthaben/ausgeglichen = grün */

/* --- Forms --- */
label.field { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .75rem; border-radius: 12px;
  border: 1px solid var(--line-str); background: var(--surface2); color: var(--ink);
  font-size: 1rem; font-family: inherit;
}
textarea { min-height: 84px; }

/* --- Tiles (penalty catalog, 2-tap) --- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .9rem; border-radius: 15px; border: 1px solid var(--line-str); background: var(--surface); color: var(--ink); min-height: 74px; text-align: left; cursor: pointer; }
.tile:active { transform: scale(.97); }
.tile .lab { font-weight: 700; line-height: 1.15; }
.tile .amt { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 700; }

/* --- Knobeln: Spielerkarte + Quick-Buttons je Zahlungsart --- */
.player-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem; }
.player-card + .player-card { margin-top: .7rem; }
.player-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.player-head .nm { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.paybtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; min-height: 62px; padding: .5rem .35rem; border-radius: 13px; border: 1px solid var(--line-str); background: var(--surface2); color: var(--ink); cursor: pointer; text-align: center; line-height: 1.15; transition: transform .06s ease, background .15s ease, color .15s ease; }
.paybtn:active { transform: scale(.94); }
.paybtn.flash { background: var(--green); color: #fff; border-color: transparent; }
.paybtn.shake { animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.paybtn .l { font-weight: 600; font-size: .82rem; }
.paybtn .a { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 700; font-size: .8rem; }
.paybtn.flash .a { color: #fff; }

/* --- Zimmerverteilung (Stammtischfahrt) --- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip.person { background: var(--surface2); padding-right: .35rem; cursor: default; }
.chip.person.tappable { cursor: pointer; }
.chip.person.tappable:active { transform: scale(.96); }
.chip-x { background: none; border: 0; padding: 0 .1rem; margin-left: .15rem; color: var(--ink-mute); cursor: pointer; display: inline-flex; align-items: center; }
.chip-x .ico { width: 14px; height: 14px; }
.room-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: .85rem .9rem; }
.room-card + .room-card { margin-top: .6rem; }
.room-card.full { border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
.beds { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-mute); }

/* --- Bottom nav --- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in oklab, var(--ground) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-inner { max-width: 640px; margin: 0 auto; height: var(--nav-h); display: grid; grid-template-columns: repeat(5, 1fr); }
.nav a, .nav button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-mute); font-size: .66rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.nav .ic { font-size: 1.3rem; line-height: 1; }
.nav a.active { color: var(--amber); }

/* --- FAB --- */
.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 45; height: 56px; padding: 0 1.1rem; border-radius: 18px; background: var(--amber); color: var(--amber-ink); border: 0; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: .5rem; box-shadow: var(--shadow); cursor: pointer; }
.fab:active { transform: scale(.96); }

/* --- Bottom sheet --- */
.sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 6, 2, .5); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--surface2); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line); padding: .5rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow); }
.sheet.open { transform: translateY(0); }
.sheet .grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line-str); margin: .3rem auto .8rem; }
.sheet h2 { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 1.25rem; margin: 0 0 .1rem; }
.sheet-menu { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; }
.sheet-menu a, .sheet-menu button { display: flex; align-items: center; gap: .8rem; padding: .85rem .4rem; border-radius: 12px; color: var(--ink); background: none; border: 0; font-size: 1.02rem; width: 100%; text-align: left; cursor: pointer; }
.sheet-menu a:active { background: var(--surface); }
.sheet-menu .ic { width: 26px; text-align: center; font-size: 1.2rem; }

/* --- Toast --- */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 76px); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; padding: 0 1rem; }
.toast { pointer-events: auto; max-width: 480px; width: 100%; background: var(--ink); color: var(--ground); padding: .8rem 1rem; border-radius: 13px; font-size: .92rem; font-weight: 500; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; display: flex; align-items: center; gap: .6rem; }
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--danger); color: #fff; }
.toast.ok { background: var(--green); color: #fff; }

/* --- Messages (Django) --- */
.msg { padding: .7rem .9rem; border-radius: 12px; font-size: .9rem; margin-bottom: .5rem; border: 1px solid var(--line-str); background: var(--surface); }
.msg.success { border-color: color-mix(in oklab, var(--green) 45%, transparent); }
.msg.error { border-color: color-mix(in oklab, var(--danger) 45%, transparent); }

/* --- Progress bar (poll/weekday) --- */
.bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--amber); border-radius: 999px; }

/* --- Icons (Heroicons inline) --- */
.ico { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
.btn .ico { width: 1.2em; height: 1.2em; }
.iconbtn .ico { width: 22px; height: 22px; }
.fab .ico { width: 22px; height: 22px; }
.nav .ico { width: 24px; height: 24px; }
.sheet-menu .ico { width: 22px; height: 22px; }
.chip .ico { width: 15px; height: 15px; vertical-align: -.2em; }
.card-title .ico, h1 .ico { vertical-align: -.12em; }

.empty { text-align: center; color: var(--ink-mute); padding: 2rem 1rem; }
.empty .ico { width: 2.2rem; height: 2.2rem; opacity: .6; margin-bottom: .4rem; }
.empty .em { font-size: 2rem; display: block; margin-bottom: .4rem; }

.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}