/* ═══════════════════════════════════════════════════════
   LAYOUT — Topbar, Sidebar, Main, Grid-System, Responsive
═══════════════════════════════════════════════════════ */

/* ─── Fokus-Sichtbarkeit (Tastatur) ─────────────────── */
/* :focus-visible statt :focus, damit Maus-Klicks keinen Ring auslösen.
   Zusätzlich zum Outline ein farbiger "Halo" (box-shadow), damit der Fokus
   auch auf farbigen/dunklen Untergründen und bei abgeschnittenem Outline
   (z. B. in Tabellen) gut erkennbar bleibt. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--accent-2); outline-offset: 2px; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 25%, transparent);
}
nav.side a:focus-visible { outline-offset: -2px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline-offset: 3px;
}

/* ─── Skip-Link „Zum Inhalt springen" ───────────────────
   Erster Tab-Stopp der App; springt an der Navigation vorbei direkt zum
   Hauptinhalt. Liegt außerhalb des Viewports und wird erst beim Fokussieren
   sichtbar (kein display:none, damit er per Tab erreichbar bleibt). */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-10) var(--sp-16); border-radius: var(--radius-sm); font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow);
  transform: translateY(-150%); transition: transform var(--transition);
}
.skip-link:focus { transform: none; outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ─── Topbar ─────────────────────────────────────────── */
.app { display: none; }

.topbar {
  position: sticky; top: var(--preview-h, 0px); z-index: 30; height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; gap: var(--sp-10); padding-left: var(--sp-16); padding-right: var(--sp-16);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.topbar .spacer { display: none; }
.menu-btn { display: none; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 15px; padding: 0 var(--sp-14); height: 44px; border-radius: var(--radius-sm); font-weight: 500;
  border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; background: transparent;
}

#userPill { flex: 1; justify-content: center; cursor: pointer; transition: border-color var(--transition), color var(--transition); }
#userPill:hover { border-color: var(--accent); color: var(--ink); }
#autoLogoutCountdown { min-width: 56px; justify-content: center; font-variant-numeric: tabular-nums; }

.theme-select {
  width: auto; max-width: 130px; padding: 0 26px; height: 44px; font-size: 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  margin: 0; flex-shrink: 0;
  text-align: center; text-align-last: center;
}
.theme-select:focus { box-shadow: none; }
.theme-select:hover { border-color: var(--muted); background: var(--panel-2); }

/* ─── Haupt-Layout (Sidebar + Content) ──────────────── */
.layout {
  display: grid; grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h) - var(--safe-top) - var(--preview-h, 0px)); max-width: 1700px; margin: 0 auto;
}

/* ─── Sidebar-Navigation ─────────────────────────────── */
nav.side {
  padding: var(--sp-14) var(--sp-10) var(--sp-16); border-right: 1px solid var(--line);
  position: sticky; top: calc(var(--topbar-h) + var(--safe-top) + var(--preview-h, 0px)); height: calc(100vh - var(--topbar-h) - var(--safe-top) - var(--preview-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  display: flex; flex-direction: column;
}
nav.side a {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 500;
  cursor: pointer; margin-bottom: 1px; border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
nav.side a:hover { background: var(--panel); color: var(--ink); }
nav.side a.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--ink); border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--red); margin-left: auto; flex: none; }

nav .group-label {
  display: flex; align-items: center; gap: var(--sp-8);
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin: var(--sp-16) var(--sp-4) var(--sp-4);
}
nav .group-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
nav .group-label.group-empty { display: none; }

/* ─── Sidebar anpassen (Menüpunkte ausblenden) ───────── */
.nav-edit-btn { margin: var(--sp-6) var(--sp-4) var(--sp-4); align-self: flex-start; }
.nav-edit-hint {
  margin: 0 var(--sp-4) var(--sp-10); padding: var(--sp-10) var(--sp-12);
  background: var(--panel); border: 1px dashed var(--accent); border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
}
.nav-edit-actions { margin-top: var(--sp-8); display: flex; gap: var(--sp-8); flex-wrap: wrap; }
nav.side a.nav-custom-hidden { display: none; }
.nav-tools { margin-left: auto; display: flex; gap: var(--sp-4); }
.nav-tool-btn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  width: 22px; height: 22px; cursor: pointer; color: var(--ink); font-size: 11px;
  padding: 0; box-shadow: none; line-height: 1;
}
.nav-tool-btn:hover { border-color: var(--accent); }
.nav-hidden-box { margin: var(--sp-10) var(--sp-4) 0; }

.nav-build {
  margin-top: auto; padding: var(--sp-20) var(--sp-10) var(--sp-6);
  font-size: 10px; color: var(--muted); opacity: .55; text-align: center;
  letter-spacing: .04em;
}

/* ─── Hauptbereich ───────────────────────────────────── */
/* overflow-x/-y beide "clip" setzen, sonst macht der Browser daraus einen
   eigenen Scroll-Container und position:sticky in Kindelementen (z. B. die
   Speichern-Leiste von Formularen) bezieht sich nicht mehr auf den Viewport. */
main { padding: 28px 32px 100px; min-width: 0; overflow-x: clip; overflow-y: clip; }

.view        { display: none; animation: fadeUp .22s ease; }
.view.active { display: block; }

/* ─── Lese-Breite für Fließtext ─────────────────────────
   Lange Zeilen erschweren das Lesen (besonders bei Dyslexie/AuDHD). Erklär-
   lastige Ansichten (Glossar, Hilfe) und längere Fließtexte werden auf eine
   angenehme Zeilenlänge begrenzt. .readable ist zur Wiederverwendung gedacht. */
.prose-view.view.active { max-width: 72ch; }
.readable { max-width: 72ch; }
.listcard > p { max-width: 70ch; }

/* ─── Fokus-Modus ───────────────────────────────────────
   Blendet die Seitennavigation aus und zentriert den Inhalt auf eine ruhige
   Breite – weniger Ablenkung, ein Bereich zur Zeit. Jederzeit über den
   Topbar-Knopf umschaltbar (bleibt sichtbar, damit man nie „feststeckt"). */
html.focus-mode nav.side { display: none; }
html.focus-mode .layout  { grid-template-columns: 1fr; }
html.focus-mode main     { max-width: 900px; margin-inline: auto; }
html.focus-mode #bonobo  { display: none; }
html.focus-mode .menu-btn { display: none; }
/* Aktiver Zustand des Umschalt-Knopfes (auch für Screenreader via aria-pressed). */
.btn-icon[aria-pressed="true"] {
  color: var(--accent-2); border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-title { font-size: 26px; margin-bottom: var(--sp-4); letter-spacing: -.025em; }
.page-sub   { color: var(--muted); margin-bottom: var(--sp-22); font-size: 14px; }

/* ─── Tabs (z. B. Einstellungen) ─────────────────────── */
.settings-tabs {
  display: flex; gap: var(--sp-6); overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line); margin-bottom: var(--sp-20); padding-bottom: 1px;
}
/* Mobil: Tabs umbrechen statt seitlich abzuschneiden – eine horizontal
   scrollbare Leiste ohne Scroll-Indikator versteckte den letzten Reiter
   ("Datenschutz") vor allen, die die Wischgeste nicht vermuten (Audit 3.5). */
@media (max-width: 640px) {
  .settings-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
}
.settings-tab {
  flex: none; background: transparent; border: none; box-shadow: none;
  color: var(--ink-soft); padding: var(--sp-10) var(--sp-16); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.settings-tab:hover  { color: var(--ink); }
.settings-tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.settings-panel { display: none; animation: fadeUp .18s ease; }
.settings-panel.active { display: block; }

/* ─── Grid-Helfer ────────────────────────────────────── */
.grid { display: grid; gap: var(--sp-16); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Dashboard-Raster (4 Spalten, konfigurierbar) ──── */
/* --dash-unit = kleinste Kachelhöhe (h1); h2 = 2x --dash-unit + Gap = Höhe der größten Kacheln.
   grid-auto-flow: dense sortiert die Kacheln wie bei Apple Home stets passend nach, sodass
   keine Lücken (blank spots) entstehen. */
:root { --dash-unit: 104px; }
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(var(--dash-unit), auto); grid-auto-flow: dense; gap: var(--sp-16); align-items: stretch; }
.dash-tile            { grid-column: span 2; grid-row: span 2; min-width: 0; min-height: 0; }
.dash-tile.w1         { grid-column: span 1; }
.dash-tile.w2         { grid-column: span 2; }
.dash-tile.w3         { grid-column: span 3; }
.dash-tile.w4         { grid-column: span 4; }
.dash-tile.h1         { grid-row: span 1; }
.dash-tile.h2         { grid-row: span 2; }
/* Kachel-Inhalt streckt sich auf die volle (Grid-bestimmte) Höhe, damit gleich hohe
   Nachbar-Kacheln keine Lücken lassen. */
.dash-tile            { display: flex; flex-direction: column; }
.dash-tile > *        { flex: 1 1 auto; min-height: 0; min-width: 0; }
.dash-tile > .card    { margin: 0; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; display: flex; flex-direction: column; height: 100%; }
.dash-tile > .card > .section-head, .dash-tile > .card > .kv { flex: none; }
.dash-tile > .card > #dSplit, .dash-tile > .card > #dBdays, .dash-tile > .card > #dFahrt,
.dash-tile > .card > #terminInfo, .dash-tile .table-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.dash-tile #dBrettWrap { display: flex; flex-direction: column; gap: var(--sp-16); height: 100%; }
/* flex: none statt flex: 1 – sonst werden alle Bereiche (unabhängig von der
   Beitragslänge) auf gleiche Höhe gestreckt: ein kurzer Beitrag bekommt dann
   viel Leerraum am unteren Rand, ein langer wirkt dagegen zu eng. Jeder
   Bereich soll stattdessen nur so hoch sein wie sein eigener Inhalt. */
.dash-tile #dBrettWrap .card { margin: 0; flex: none; overflow: hidden; }
.dash-tile.hidden-tile { display: none; }

/* Bearbeiten-Modus */
.dash-grid.editing .dash-tile           { position: relative; outline: 2px dashed var(--line); outline-offset: 3px; border-radius: 18px; }
.dash-grid.editing .dash-tile:hover     { outline-color: var(--accent); }
.dash-grid.editing .dash-tile.dragging  { opacity: .4; z-index: 10; }
.dash-grid.editing .dash-tile.drop-target { outline-color: var(--accent-2); outline-style: solid; }

.tile-tools { position: absolute; top: 8px; right: 8px; display: none; gap: var(--sp-4); z-index: 5; }
.dash-grid.editing .tile-tools { display: flex; }
.tile-tools button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; color: var(--ink); font-size: 12px; padding: 0; box-shadow: none; }
.tile-tools button:hover { border-color: var(--accent); }
.tile-tools .tile-handle { cursor: grab; touch-action: none; font-size: 15px; }
.tile-tools .tile-handle:active { cursor: grabbing; }

.dash-hidden-chip { display: inline-flex; align-items: center; gap: var(--sp-6); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: var(--sp-6) var(--sp-14); margin: var(--sp-4) var(--sp-6) var(--sp-4) 0; cursor: pointer; font-size: 13px; transition: border-color var(--transition); }
.dash-hidden-chip:hover { border-color: var(--accent); }

/* ─── Globale Kachel-Reihenfolge (jede Seite außer Dashboard) ──────────
   Admin-Bearbeitungsmodus, s. public/js/cardOrder.js. Wirkt auf jede
   ausgezeichnete Karte (data-card-id), unabhängig von ihrem Elternelement –
   anders als .dash-grid.editing gibt es keinen einzelnen festen Container. */
body.card-order-editing [data-card-id] { position: relative; outline: 2px dashed var(--line); outline-offset: 3px; border-radius: 12px; }
body.card-order-editing [data-card-id]:hover { outline-color: var(--accent); }
body.card-order-editing [data-card-id].dragging     { opacity: .4; z-index: 10; }
body.card-order-editing [data-card-id].drop-target  { outline-color: var(--accent-2); outline-style: solid; }
.card-order-tools { position: absolute; top: 8px; right: 8px; display: none; z-index: 5; }
body.card-order-editing .card-order-tools { display: flex; }
.card-order-tools .card-order-handle {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; width: 28px; height: 28px;
  cursor: grab; touch-action: none; color: var(--ink); font-size: 15px; padding: 0; box-shadow: none;
}
.card-order-tools .card-order-handle:hover  { border-color: var(--accent); }
.card-order-tools .card-order-handle:active { cursor: grabbing; }

/* ─── Mobile Scrim (Sidebar-Overlay) ────────────────── */
.scrim      { position: fixed; inset: calc(var(--topbar-h) + var(--safe-top) + var(--preview-h, 0px)) 0 0 0; background: rgba(0,0,0,.45); z-index: 39; display: none; }
.scrim.open { display: block; }

/* ─── Modal-Scroll-Sperre ────────────────────────────── */
/* Solange ein Modal offen ist, darf nur das Modal selbst scrollen, nicht der
   Hintergrund (analog zur ausgeklappten Sidebar, siehe html.menu-open). */
html.modal-open, html.modal-open body { overflow: hidden; height: 100%; }
body.modal-open main { overflow: hidden; touch-action: none; }

/* ═══ RESPONSIVE ═══════════════════════════════════════ */

.swipe-hint { display: none; }

/* Tablet */
@media (max-width: 1100px) {
  :root { --sidebar-w: 200px; }
  main { padding: var(--sp-22) var(--sp-22) 80px; }
}

/* Mobile */
@media (max-width: 860px) {
  :root { --sidebar-w: min(78vw, 270px); }
  body { font-size: 15px; }
  .layout { grid-template-columns: 1fr; }
  .topbar { padding-left: var(--sp-10); padding-right: var(--sp-10); gap: var(--sp-10); }
  .topbar .brand { display: none; }
  #view-dashboard .section-head { flex-wrap: wrap; }
  #view-dashboard .section-head > div:first-child { flex: 0 0 100%; }
  #dashEditBtn { margin-left: auto; }

  nav.side {
    position: fixed; top: calc(var(--topbar-h) + var(--safe-top) + var(--preview-h, 0px)); left: 0; bottom: 0;
    width: var(--sidebar-w); z-index: 40; background: var(--bg-2);
    transform: translateX(-110%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    min-height: auto;
  }
  nav.side.open { transform: none; box-shadow: var(--shadow-lg); }

  /* Bei ausgeklappter Menüleiste nur diese scrollen, nicht den Inhalt darunter. */
  html.menu-open, html.menu-open body { overflow: hidden; height: 100%; }
  body.menu-open main { overflow: hidden; touch-action: none; }

  .menu-btn {
    display: inline-grid; place-items: center; background: transparent;
    border: 1px solid var(--line); color: var(--ink);
    width: 44px; height: 44px; padding: 0; border-radius: var(--radius-sm);
    flex: none; font-size: 18px; box-shadow: none;
  }

  main { padding: var(--sp-18) var(--sp-14) 90px; }
  .page-title { font-size: 22px; }

  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-tile.w2, .dash-tile.w3, .dash-tile.w4 { grid-column: span 2; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: var(--sp-10) var(--sp-10); }
  th { font-size: 10px; }
  .swipe-hint { display: block; text-align: center; color: var(--muted); font-size: 12px; padding: var(--sp-4) 0 var(--sp-2); margin: 0; }
  /* Touch-Targets für Verwaltungs-Buttons im Sidebar- und Dashboard-Editor */
  .nav-tool-btn { width: 32px; height: 32px; font-size: 13px; }
  .tile-tools button { width: 36px; height: 36px; font-size: 14px; }
}

/* Kleinstes Mobile */
@media (max-width: 480px) {
  .grid.cols-4 { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-tile, .dash-tile.w1, .dash-tile.w2, .dash-tile.w3, .dash-tile.w4 { grid-column: span 1; }
  .section-head { flex-wrap: wrap; gap: var(--sp-8); }
  .section-head .spacer { display: none; }
  .theme-select { max-width: 100px; padding: 0 var(--sp-10); }
}