/* Rahmen der Oberflaeche: Seitenleiste, Kopfleiste, gemeinsame Bausteine (Buttons, Felder, Tabellen, Ueberschriften) und die
   Farbvariablen fuer Hell/Dunkel. Wird NACH tailwind.css geladen. Dunkel gilt, wenn das Betriebssystem es verlangt
   (ausser der Nutzer hat "Hell" gewaehlt) oder der Nutzer "Dunkel" gewaehlt hat (html[data-theme]). Die Farben der
   Utility-Klassen (bg-white, text-gray-700 ...) kommen aus tailwind.css ueber Variablen, deren Dunkelwerte
   scripts/build_static_css.py erzeugt -- hier stehen nur die Variablen des Rahmens. */

:root {
  color-scheme: light;
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-text: #0f172a;
  --c-muted: #64748b;
  --c-border: #e2e8f0;
  --c-border-stark: #cbd5e1;
  --c-hover: #f1f5f9;
  --c-akzent: #2563eb;
  --c-akzent-hover: #1d4ed8;
  --c-akzent-text: #ffffff;
  --c-akzent-weich: rgba(37, 99, 235, 0.12);
  --c-fokus: rgba(37, 99, 235, 0.35);
  --c-kopf: rgba(255, 255, 255, 0.86);
  --sb-bg: #0f172a;
  --sb-rand: #1e293b;
  --sb-text: #cbd5e1;
  --sb-text-stark: #ffffff;
  --sb-hover: rgba(255, 255, 255, 0.07);
  --sb-aktiv: rgba(96, 165, 250, 0.18);
  --sb-gedaempft: #64748b;
  --schatten: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --schatten-gross: 0 10px 30px rgba(15, 23, 42, 0.18);
  --sb-breite: 16.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #0b1120;
    --c-surface: #111a2e;
    --c-text: #e2e8f0;
    --c-muted: #94a3b8;
    --c-border: #243049;
    --c-border-stark: #334155;
    --c-hover: #1b263b;
    --c-akzent: #3b82f6;
    --c-akzent-hover: #60a5fa;
    --c-akzent-weich: rgba(96, 165, 250, 0.16);
    --c-fokus: rgba(96, 165, 250, 0.45);
    --c-kopf: rgba(17, 26, 46, 0.86);
    --sb-bg: #0a1020;
    --sb-rand: #1b263b;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schatten-gross: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0b1120;
  --c-surface: #111a2e;
  --c-text: #e2e8f0;
  --c-muted: #94a3b8;
  --c-border: #243049;
  --c-border-stark: #334155;
  --c-hover: #1b263b;
  --c-akzent: #3b82f6;
  --c-akzent-hover: #60a5fa;
  --c-akzent-weich: rgba(96, 165, 250, 0.16);
  --c-fokus: rgba(96, 165, 250, 0.45);
  --c-kopf: rgba(17, 26, 46, 0.86);
  --sb-bg: #0a1020;
  --sb-rand: #1b263b;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-gross: 0 10px 30px rgba(0, 0, 0, 0.55);
}

body { background-color: var(--c-bg); color: var(--c-text); }

/* ---------- Rahmen ---------- */
.app-huelle { display: flex; min-height: 100vh; }
.app-spalte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-spalte > main { flex: 1 1 auto; width: 100%; }

.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sb-breite); max-width: 86vw;
  display: flex; flex-direction: column; background: var(--sb-bg); color: var(--sb-text);
  border-right: 1px solid var(--sb-rand); transform: translateX(-100%); transition: transform .2s ease;
}
body.nav-offen .app-sidebar { transform: none; box-shadow: var(--schatten-gross); }
.app-ueberlagerung { position: fixed; inset: 0; z-index: 30; background: rgba(2, 6, 23, 0.55); }

@media (min-width: 1024px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--sb-breite); transform: none; box-shadow: none; max-width: none; }
  body.nav-zu .app-sidebar { display: none; }
  .app-ueberlagerung { display: none !important; }
}

.app-sidebar-zu {
  position: absolute; top: .7rem; right: .6rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .6rem; border: 0; background: transparent; color: var(--sb-text); cursor: pointer;
}
.app-sidebar-zu:hover, .app-sidebar-zu:focus-visible { background: var(--sb-hover); color: var(--sb-text-stark); outline: none; }
.app-sidebar-zu svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 1024px) { .app-sidebar-zu { display: none; } }
.app-marke { display: flex; align-items: center; gap: .7rem; padding: .95rem 1rem; text-decoration: none; color: var(--sb-text-stark); }
.app-marke-logo {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .6rem;
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 700; font-size: 1rem;
}
.app-marke-logo-bild { width: 2.5rem; height: 2.5rem; flex: none; object-fit: contain; border-radius: .6rem; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.app-marke-text { display: flex; flex-direction: column; font-weight: 650; line-height: 1.1; letter-spacing: .01em; }
.app-marke-text small { font-weight: 400; font-size: .7rem; color: var(--sb-gedaempft); margin-top: .15rem; }
.app-marke-kopf { color: var(--c-text); padding: 0; }
.app-marke-kopf .app-marke-text small { color: var(--c-muted); }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: .25rem .6rem 1rem; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.app-sidebar-fuss { padding: .6rem 1rem .7rem; font-size: .7rem; color: var(--sb-gedaempft); border-top: 1px solid var(--sb-rand); display: flex; flex-direction: column; gap: .45rem; }
.sb-installieren {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem; border-radius: .5rem; cursor: pointer;
  background: var(--sb-aktiv); color: var(--sb-text-stark); border: 1px solid var(--sb-rand); font-size: .78rem; font-weight: 500;
}
.sb-installieren:hover { background: var(--sb-hover); }
.sb-installieren svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-hinweis { color: var(--sb-text); line-height: 1.35; }
.sb-version { opacity: .8; }
.fuss-links { display: flex; flex-wrap: wrap; gap: .15rem .8rem; }
.fuss-links a { color: inherit; text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; }
.app-sidebar-fuss .fuss-links a { color: var(--sb-text); }
.app-sidebar-fuss .fuss-links a:hover { color: var(--sb-text-stark); }

.nav-symbol, .nav-pfeil, .app-icon-knopf svg, .app-suche-knopf svg {
  width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-pfeil { width: .9rem; height: .9rem; margin-left: auto; transition: transform .15s ease; opacity: .7; }
details[open] > summary > .nav-pfeil { transform: rotate(90deg); }

.nav-direkt, .nav-gruppe > summary {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; margin-top: .15rem; border-radius: .5rem;
  color: var(--sb-text); font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; user-select: none;
}
.nav-gruppe > summary::-webkit-details-marker, .nav-modul > summary::-webkit-details-marker, .app-benutzer > summary::-webkit-details-marker { display: none; }
.nav-direkt:hover, .nav-gruppe > summary:hover { background: var(--sb-hover); color: var(--sb-text-stark); }
.nav-direkt.aktiv { background: var(--sb-aktiv); color: var(--sb-text-stark); }
.nav-gruppe[data-aktiv] > summary { color: var(--sb-text-stark); }
.nav-gruppe-inhalt { display: flex; flex-direction: column; margin: .1rem 0 .4rem 1.45rem; padding-left: .55rem; border-left: 1px solid var(--sb-rand); }

.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .32rem .6rem; border-radius: .4rem;
  color: var(--sb-text); font-size: .84rem; text-decoration: none; line-height: 1.25;
}
.nav-link:hover { background: var(--sb-hover); color: var(--sb-text-stark); }
.nav-link.aktiv { background: var(--sb-aktiv); color: var(--sb-text-stark); font-weight: 600; }
.nav-link-tief { padding-left: 1.1rem; }
.nav-abschnitt, .nav-untergruppe {
  margin: .55rem 0 .15rem .6rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-gedaempft);
}
.nav-untergruppe { margin-left: .6rem; }
.nav-modul > summary {
  display: flex; align-items: center; gap: .4rem; padding: .32rem .6rem; border-radius: .4rem; cursor: pointer; list-style: none;
  font-size: .84rem; font-weight: 600; color: var(--sb-text);
}
.nav-modul > summary:hover { background: var(--sb-hover); color: var(--sb-text-stark); }
.nav-modul[data-aktiv] > summary { color: var(--sb-text-stark); }
.nav-modul-inhalt { display: flex; flex-direction: column; margin-left: .5rem; }
.nav-badge { background: #f59e0b; color: #0f172a; border-radius: 9999px; font-size: .7rem; font-weight: 700; padding: 0 .45rem; line-height: 1.25rem; }

/* ---------- Kopfleiste ---------- */
.app-kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .4rem .75rem;
  background: var(--c-kopf); border-bottom: 1px solid var(--c-border); backdrop-filter: blur(8px);
}
@media (min-width: 640px) { .app-kopf { padding-left: 1.5rem; padding-right: 1.5rem; } }
.app-icon-knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
}
.app-icon-knopf:hover { background: var(--c-hover); }
.app-suche-knopf {
  display: flex; align-items: center; gap: .55rem; flex: 0 1 22rem; min-width: 0; height: 2.25rem; padding: 0 .65rem; border-radius: .5rem;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-muted); font-size: .85rem; text-align: left;
}
.app-suche-knopf:hover { border-color: var(--c-border-stark); }
.app-suche-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-suche-kbd { display: none; font-family: inherit; font-size: .7rem; border: 1px solid var(--c-border-stark); border-radius: .3rem; padding: 0 .35rem; color: var(--c-muted); }
@media (min-width: 640px) { .app-suche-kbd { display: inline; } }
.app-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.app-mandant { font-size: .85rem; color: var(--c-muted); display: none; }
@media (min-width: 640px) { .app-mandant { display: inline; } }
.app-auswahl { height: 2.25rem; font-size: .85rem; padding: 0 .5rem; border-radius: .5rem; }

.app-benutzer { position: relative; }
.app-benutzer > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; padding: .15rem .35rem; border-radius: .5rem; }
.app-benutzer > summary:hover { background: var(--c-hover); }
.app-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px;
  background: var(--c-akzent-weich); color: var(--c-akzent); font-weight: 700; font-size: .85rem;
}
.app-benutzer-name { display: none; font-size: .85rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .app-benutzer-name { display: inline; } }
.app-benutzer .nav-pfeil { transform: rotate(90deg); }
.app-benutzer[open] .nav-pfeil { transform: rotate(-90deg); }
.app-benutzer-menue {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50; width: 15rem; padding: .4rem; border-radius: .75rem;
  background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--schatten-gross);
}
.app-benutzer-kopf { padding: .5rem .6rem; font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--c-border); margin-bottom: .3rem; }
.app-benutzer-kopf span { font-weight: 400; color: var(--c-muted); }
.app-menue-eintrag { display: block; width: 100%; padding: .45rem .6rem; border-radius: .4rem; font-size: .875rem; text-align: left; text-decoration: none; color: var(--c-text); }
.app-menue-eintrag:hover { background: var(--c-hover); }
.app-menue-abmelden { color: #dc2626; }
.app-menue-titel { padding: .45rem .6rem .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.app-darstellung { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: 0 .4rem .5rem; }
.app-darstellung button { padding: .3rem .2rem; font-size: .78rem; border: 1px solid var(--c-border); border-radius: .4rem; color: var(--c-text); }
.app-darstellung button:hover { background: var(--c-hover); }
.app-darstellung button[aria-pressed="true"] { background: var(--c-akzent); border-color: var(--c-akzent); color: var(--c-akzent-text); }

/* ---------- Schnellsuche (Strg+K) ---------- */
.nav-suche { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 10vh .75rem 0; background: rgba(2, 6, 23, 0.55); }
.nav-suche-box { width: 100%; max-width: 34rem; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: .85rem; box-shadow: var(--schatten-gross); overflow: hidden; }
.nav-suche-box input { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; padding: .85rem 1rem; font-size: 1rem; background: transparent; color: inherit; }
.nav-suche-box input:focus { outline: none; box-shadow: none; }
.nav-suche-liste { list-style: none; margin: 0; padding: .35rem; max-height: 50vh; overflow-y: auto; }
.nav-suche-liste li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.nav-suche-liste li small { color: var(--c-muted); font-size: .75rem; }
.nav-suche-liste li[aria-selected="true"] { background: var(--c-akzent-weich); }
.nav-suche-hinweis { margin: 0; padding: .45rem 1rem; font-size: .72rem; color: var(--c-muted); border-top: 1px solid var(--c-border); }

/* ---------- Gemeinsame Bausteine ---------- */
main h1 { font-size: 1.5rem !important; line-height: 2rem !important; font-weight: 650; letter-spacing: -0.01em; }
main h2 { letter-spacing: -0.005em; }

.btn-primary, .btn-primary-sm, .btn-secondary, .btn-secondary-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  border-radius: .5rem; text-decoration: none; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-primary, .btn-secondary { padding: .45rem 1rem; }
.btn-primary-sm, .btn-secondary-sm { padding: .4rem .75rem; }
.btn-primary, .btn-primary-sm { background-color: var(--c-akzent); color: var(--c-akzent-text); border: 1px solid transparent; box-shadow: var(--schatten); }
.btn-primary:hover, .btn-primary-sm:hover { background-color: var(--c-akzent-hover); }
.btn-secondary, .btn-secondary-sm { background-color: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-stark); }
.btn-secondary:hover, .btn-secondary-sm:hover { background-color: var(--c-hover); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea {
  background-color: var(--c-surface); color: var(--c-text); border-color: var(--c-border-stark); border-radius: .5rem;
}
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: .8; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-akzent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--c-fokus);
}
.app-sidebar a:focus-visible, .app-sidebar summary:focus-visible { outline-offset: -2px; box-shadow: none; }

main table { border-radius: .5rem; }
main table thead th { font-weight: 600; font-size: .78rem; letter-spacing: .02em; }
main table tbody tr:hover > td { background-color: var(--c-hover); }
main a:not([class]) { color: var(--c-akzent); }
main hr { border-color: var(--c-border); }
code, pre { border-radius: .4rem; }

@media print {
  .app-sidebar, .app-kopf, .app-ueberlagerung, .nav-suche { display: none !important; }
  .app-huelle { display: block; }
}

/* Umschalter statt Auswahlliste (app/static/umschalter.js): Knopfleiste, das Select bleibt unsichtbar im Formular */
.umschalter { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--c-border-stark); border-radius: .5rem; overflow: hidden; background: var(--c-surface); }
.umschalter button { padding: .3rem .75rem; font-size: .875rem; color: var(--c-text); background: transparent; border: 0; border-right: 1px solid var(--c-border); cursor: pointer; }
.umschalter button:last-child { border-right: 0; }
.umschalter button:hover:not(:disabled) { background: var(--c-hover); }
.umschalter button[aria-pressed="true"] { background: var(--c-akzent); color: var(--c-akzent-text); }
.umschalter button:disabled { opacity: .6; cursor: default; }
.umschalter-select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; }

/* Schmale Bildschirme: nichts darf die Seite breiter als den Bildschirm machen */
p, label, li, dd, dt, h1, h2, h3, summary { overflow-wrap: break-word; }
select, input:not([type="checkbox"]):not([type="radio"]), textarea { max-width: 100%; }
@media (max-width: 640px) {
  .umschalter { display: flex; gap: .375rem; border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .umschalter button { flex: 1 1 auto; border: 1px solid var(--c-border-stark); border-radius: .5rem; padding: .5rem .75rem; }
  .umschalter button:last-child { border-right: 1px solid var(--c-border-stark); }
}
label, form > div { max-width: 100%; }
label > select { width: 100%; }
.grid > *, .flex-wrap > * { min-width: 0; }
@media (max-width: 639px) {
  form.flex-col input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), form.flex-col select, form.flex-col textarea { width: 100%; }
  form.flex-col > div { width: 100%; }
}