/* =============================================================
   brand.css — Look von drumlessonscologne.de für die ganze App
   (Schüler- und Admin-Bereich). Wird als letztes Stylesheet geladen.

   Farben:  Anthrazit #17181a / #1e2023 / #2d3033
            Orange   #e0992f (Buttons, dunkle Schrift #241701), hell #f0b256
   Schrift: Montserrat (Überschriften), Roboto (Text)
            Schriftdateien liegen (sobald kopiert) unter /static/fonts/;
            sonst greifen installierte bzw. System-Schriften.
   ============================================================= */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/roboto-latin.woff2') format('woff2');
}

:root {
  --brand-ink: #17181a;
  --brand-ink-2: #1e2023;
  --brand-ink-3: #2d3033;
  --brand-orange: #e0992f;
  --brand-orange-light: #f0b256;
  --brand-orange-text: #241701;
  --brand-orange-dark: #b8741a; /* für Links auf hellem Grund (Kontrast) */
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .page-head h1, .status-number, .offer-size, .offer-price, .ashell-brand, .brand-word {
  font-family: var(--font-head);
  letter-spacing: -0.01em;
}
h1, h2 { font-weight: 700; }

/* ---- Logo (wie auf der Website) ---- */
.brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark svg { width: 34px; height: 34px; flex: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word b { color: #f1f2f2; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; }
.brand-word i { color: var(--brand-orange); font-style: normal; font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.28em; }

/* ---- Schüler-Bereich: dunkle Kopfzeile wie auf der Website ---- */
body:not(.admin) .topbar { background: var(--brand-ink); border-bottom: 0; color: #f1f2f2; }
body:not(.admin) .topbar nav, body:not(.admin) .topbar .hello { color: #cfd4d2; }
body:not(.admin) .topbar .link-button, body:not(.admin) .topbar a:not(.brand-mark) { color: var(--brand-orange-light); }

/* ---- Buttons & Links ---- */
.btn-primary,
body.admin.billing .btn-primary {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: var(--brand-orange-text) !important;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled),
body.admin.billing .btn-primary:hover { background: var(--brand-orange-light) !important; border-color: var(--brand-orange-light) !important; }
.btn-primary:disabled { opacity: 0.55; }
body:not(.admin) main a:not(.btn), body.admin main a:not(.btn):not(.chip) { color: var(--brand-orange-dark); }

/* ---- Admin-Navigation in Markenfarben ---- */
.ashell-bar { background: var(--brand-ink); }
.ashell-nav a.active, .ashell-more summary.active { background: var(--brand-orange); color: var(--brand-orange-text) !important; font-weight: 600; }
.ashell-menu { background: var(--brand-ink-2); border: 1px solid var(--brand-ink-3); }
body.admin.billing { --primary: #e0992f; --primary-dark: #c9831f; }
body.admin.billing .chip-active { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
body.admin:not(.billing) { --accent: #e0992f; --accent-hover: #c9831f; }

/* ---- Kleine orange Überzeilen (wie "SCHLAGZEUGUNTERRICHT · KÖLN") ---- */
.status-label { color: var(--brand-orange-dark); font-weight: 600; letter-spacing: 0.12em; }

/* ---- Kartenstand ---- */
.card-status { border: 2px solid var(--brand-ink); }
.dot-step { border-color: var(--brand-ink); }
.dot-step.done { background: var(--brand-orange); border-color: var(--brand-orange); }
.dot-step.booked { background: repeating-linear-gradient(45deg, var(--brand-orange) 0 3px, transparent 3px 6px); border-color: var(--brand-orange); }
.order-highlight { border-color: var(--brand-orange); background: #fff8ec; }
.offer input:checked + .offer-body { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(224, 153, 47, 0.2); }
.slot-row input:checked + .slot-when, .slot-row:has(input:checked) { border-color: var(--brand-orange); }

/* Kopfzeile Schüler: auf schmalen Bildschirmen umbrechen */
body:not(.admin) .topbar { flex-wrap: wrap; gap: 8px 16px; }
body:not(.admin) .topbar nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  body:not(.admin) .topbar .hello { display: none; }
  body:not(.admin) .topbar nav { font-size: 0.9rem; }
}

/* Auswahlknöpfe in Formularen nicht auf volle Breite ziehen */
.voucher-pay label { flex-direction: row !important; align-items: center; gap: 8px; margin: 0; }
.voucher-pay input[type="radio"], .startstand-include input, label > input[type="checkbox"] { width: auto !important; flex: none; margin: 0; }

/* Auswahllisten wie Eingabefelder */
body.admin:not(.billing) select, .order-billing select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit; color: inherit; max-width: 100%;
}
.billing-grid select { width: 100%; }

/* ---- Abrechnung ---- */
.payout-head { align-items: flex-end; }
.payout-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.payout-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.payout-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.payout-tile strong { font-family: var(--font-head); font-size: 1.8rem; line-height: 1.1; }
.payout-main { background: var(--brand-ink); border-color: var(--brand-ink); color: #f1f2f2; }
.payout-main .status-label { color: var(--brand-orange-light); }
.payout-main .text-muted { color: #cfd4d2; }
.payout-table .num, .admin-table th.num { text-align: right; white-space: nowrap; }
.payout-table tfoot td { border-top: 2px solid var(--brand-ink); padding-top: 10px; }
.payout-dates { font-size: 0.88rem; color: var(--text-muted); }
.payout-dates span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.payout-dates b { color: var(--text); font-weight: 600; }
.payout-history { display: flex; align-items: flex-end; gap: 6px; height: 170px; overflow-x: auto; padding-top: 8px; }
.payout-bar { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-decoration: none; color: var(--text-muted) !important; font-size: 0.75rem; }
.payout-bar-fill { width: 100%; max-width: 40px; background: #e5e7eb; border-radius: 6px 6px 0 0; }
.payout-bar:hover .payout-bar-fill { background: var(--brand-orange-light); }
.payout-bar.current .payout-bar-fill { background: var(--brand-orange); }
.payout-bar.current { color: var(--text) !important; font-weight: 600; }
.payout-bar-value { font-size: 0.7rem; }
.payout-head { flex-wrap: wrap; gap: 12px; }
.payout-head > div:first-child { text-align: left; flex: 1 1 220px; }