/* =========================================================================
   DataPilot – app.css · gemeinsames Design-System
   -------------------------------------------------------------------------
   EINE Quelle für Variablen (hell + dunkel) und die wiederkehrenden Bausteine
   (Buttons, Felder, Cards, Badges, Akkordeon, Modal, Hints, Flashes …).

   Lade-Reihenfolge (base.html.twig): app.css → seitenspezifische <style> →
   theme.css. Noch nicht migrierte Seiten haben eigene <style>-Blöcke, die
   app.css überschreiben (kein Bruch). Migrierte Seiten löschen ihr <style>
   und erben alles von hier. theme.css bleibt nur für die Inline-#fff-Altlasten
   der noch nicht migrierten Seiten nötig.
   ========================================================================= */

:root{
  --bg:#f6f7f9; --surface:#ffffff; --sidebar:#fbfbfd;
  --border:#ebecf1; --border-strong:#e0e1e8;
  --text:#15171c; --muted:#73767f; --faint:#9aa0aa;
  --accent:#4f46e5; --accent-hover:#4338ca; --accent-weak:#eef0fe;
  --ok:#15803d; --ok-weak:#ecfdf3; --danger:#b42318; --danger-weak:#fef2f2; --warn:#b45309; --warn-weak:#fff7ed;
  --shadow:0 1px 2px rgba(20,22,30,.04), 0 4px 14px rgba(20,22,30,.05);
  --radius:14px; --radius-lg:16px;
}
html[data-theme="dark"]{
  --bg:#0f1115; --surface:#171a21; --sidebar:#13161c;
  --border:#262b35; --border-strong:#333a47;
  --text:#e7e9ee; --muted:#9aa1ad; --faint:#6b7280;
  --accent:#6d76f7; --accent-hover:#828bff; --accent-weak:#23263d;
  --ok:#86efac; --ok-weak:rgba(34,197,94,.13); --danger:#fca5a5; --danger-weak:rgba(239,68,68,.13); --warn:#fcd34d; --warn-weak:rgba(245,158,11,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- Basis (Bare-Element-Defaults; Seiten-Styles überschreiben sie) ---------- */
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.wrap{ max-width:980px; margin:28px auto; padding:0 20px; }
.wrap.narrow{ max-width:760px; }

/* ---------- Typo / Seiten-Kopf ---------- */
h1{ font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px; }
.lead{ color:var(--muted); font-size:14px; margin:0 0 22px; max-width:760px; line-height:1.5; }
.sec{ font-size:15px; font-weight:600; margin:6px 0 12px; }
.sechead{ display:flex; align-items:center; gap:10px; margin:24px 0 12px; }
.sechead .sec{ margin:0; }
.grow{ margin-left:auto; }
.muted{ color:var(--faint); } .faint{ color:var(--faint); font-size:13px; }

/* ---------- Topbar (eigenständige Seiten ohne Admin-Nav) ---------- */
.topbar{ height:56px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 18px; position:sticky; top:0; z-index:5; }
.topbar .logo{ width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:0 0 28px; }
.topbar b{ font-size:15px; font-weight:600; } .topbar .sub{ color:var(--faint); font-size:12px; }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.topbar .ghost{ font-size:13px; color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; transition:.12s; white-space:nowrap; }
.topbar .ghost:hover{ background:var(--bg); color:var(--text); }

/* ---------- Card ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:22px; box-shadow:var(--shadow); }
.card h2{ font-size:15px; font-weight:600; margin:0 0 14px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:10px; padding:9px 15px; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; transition:.14s; font-family:inherit; }
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:9px; }
.btn.ghost, .btn.sec{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn.ghost:hover, .btn.sec:hover{ background:var(--bg); }
.btn.danger{ background:transparent; color:var(--danger); border-color:transparent; }
.btn.danger:hover{ background:var(--danger-weak); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Felder ---------- */
label{ font-size:12px; font-weight:500; color:var(--muted); display:block; margin:0 0 6px 2px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
textarea, select, .control{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; outline:none; background:var(--surface); color:var(--text); transition:.14s;
}
textarea, textarea.control{ resize:vertical; line-height:1.5; }
.control.mono, input.mono, textarea.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
input:focus, textarea:focus, select:focus, .control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
::placeholder{ color:var(--faint); }
.field{ flex:1; min-width:160px; }
.fields-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-hint{ font-size:11.5px; color:var(--faint); margin-top:4px; line-height:1.4; }
.chk{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text); font-weight:400; cursor:pointer; margin:0; }
.chk input{ width:auto; }
.checks{ display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:6px; }

/* ---------- Badges / Status / Chips ---------- */
.badge{ display:inline-block; background:var(--accent-weak); color:var(--accent); padding:2.5px 9px; border-radius:20px; font-size:12px; font-weight:500; }
.pill{ display:inline-block; font-size:10.5px; padding:1px 8px; border-radius:999px; background:var(--bg); color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.status{ font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.status.on{ color:var(--ok); } .status.off, .status.inactive{ color:var(--faint); }
.status::before{ content:"●"; font-size:9px; }
.status.off::before, .status.inactive::before{ content:"○"; }
.due{ flex-shrink:0; font-size:12px; font-weight:600; border-radius:20px; padding:3px 11px; white-space:nowrap; background:var(--bg); color:var(--muted); border:1px solid var(--border-strong); }
.due.over{ background:var(--danger-weak); color:var(--danger); border-color:transparent; }
.due.today{ background:var(--warn-weak); color:var(--warn); border-color:transparent; }

/* ---------- Hints / Flashes ---------- */
.hint{ background:var(--accent-weak); border-left:3px solid var(--accent); padding:10px 14px; border-radius:10px; color:var(--text); font-size:13px; line-height:1.5; margin-bottom:14px; }
.flash{ padding:11px 14px; border-radius:11px; margin-bottom:14px; font-size:14px; }
.flash.success, .flash.ok{ background:var(--ok-weak); color:var(--ok); }
.flash.error{ background:var(--danger-weak); color:var(--danger); }

/* ---------- Liste / Zeile ---------- */
.list .row-item{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-top:1px solid var(--border); }
.list .row-item:first-child{ border-top:0; }
.row-item .main{ flex:1; min-width:0; }
.row-item .title{ font-weight:600; font-size:14.5px; line-height:1.4; }
.row-item .note{ font-size:13px; color:var(--muted); margin-top:4px; white-space:pre-wrap; }
.row-item .meta{ font-size:12px; color:var(--faint); margin-top:6px; }
.row-item .acts{ flex-shrink:0; display:flex; gap:6px; align-items:center; }

/* ---------- Akkordeon-Liste ---------- */
details.acccard{ padding:0; overflow:hidden; }
details.acccard > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:13px 16px; }
details.acccard > summary::-webkit-details-marker{ display:none; }
details.acccard > summary:hover{ background:var(--bg); }
details.acccard[open] > summary{ border-bottom:1px solid var(--border); }
details.acccard > summary::after{ content:"▸"; display:inline-block; margin-left:8px; color:var(--faint); transition:transform .15s; }
details.acccard[open] > summary::after{ transform:rotate(90deg); }
.acccard .accmeta{ font-size:12px; color:var(--faint); }
.acccard .accstat{ margin-left:auto; }
.accbody{ padding:14px 16px; }

/* ---------- Modal (Anlegen/Bearbeiten) ---------- */
.emodal{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px 16px; background:rgba(0,0,0,.7); }
.emodal[hidden]{ display:none; }
.emodal-card{ width:min(640px,100%); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:0 24px 70px rgba(0,0,0,.55); padding:18px 20px 20px; max-height:88vh; overflow-y:auto; }
.emodal-card.emodal-wide{ width:min(860px,100%); }
html[data-theme="dark"] .emodal-card{ background:#1d212a; }
.emodal-head{ display:flex; align-items:center; margin-bottom:14px; }
.emodal-head b{ font-size:16px; }
.emodal-x{ margin-left:auto; border:none; background:transparent; color:var(--faint); font-size:22px; line-height:1; cursor:pointer; border-radius:8px; width:32px; height:32px; }
.emodal-x:hover{ background:var(--bg); color:var(--text); }
.emodal-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.emodal .fields-row, .emodal .row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Tabelle ---------- */
table.grid{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.grid th, table.grid td{ text-align:left; padding:11px 14px; font-size:13.5px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.grid th{ background:var(--bg); font-weight:600; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
table.grid tbody tr:last-child td{ border-bottom:none; }

/* ---------- App-weite Navigation (_topnav.html.twig) ---------- */
.topbar .brand{ display:flex; align-items:center; gap:10px; margin-right:8px; text-decoration:none; color:inherit; }
.brand-logo{ height:28px; max-width:130px; object-fit:contain; display:block; border-radius:6px; }
.topnav-links{ display:flex; align-items:center; gap:2px; min-width:0; }
.navlink{ font-size:13.5px; color:var(--muted); text-decoration:none; padding:7px 12px; border-radius:9px; transition:.12s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; }
.navlink:hover{ background:var(--bg); color:var(--text); }
.navlink.on{ background:var(--accent-weak); color:var(--accent); font-weight:500; }
.navbadge{ background:var(--accent); color:#fff; border-radius:20px; padding:1px 7px; font-size:11px; font-weight:600; }
/* Standard-Seitenkopf: Titel (+Intro) links, primärer Add-Button oben rechts */
.pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; }
.pagehead > div:first-child{ flex:1 1 auto; min-width:0; }
.pagehead > .btn, .pagehead > .btn-sm{ flex:0 0 auto; margin-top:3px; }

/* Seiten-Intro als kleiner Info-Toggle neben der H1 */
.lead-toggle{ margin-left:10px; width:20px; height:20px; padding:0; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); font-size:12px; font-style:italic; font-weight:700; font-family:Georgia,serif; line-height:1; cursor:pointer; vertical-align:middle; transition:.12s; }
.lead-toggle:hover, .lead-toggle.on{ background:var(--accent-weak); color:var(--accent); border-color:var(--accent); }

/* Zweite Navi-Zeile (Verwaltungs-Bereich) */
.subnav{ display:flex; align-items:center; gap:1px; height:46px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:56px; z-index:4; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.subnav a{ font-size:13px; color:var(--muted); text-decoration:none; padding:6px 11px; border-radius:8px; white-space:nowrap; transition:.12s; }
.subnav a:hover{ background:var(--bg); color:var(--text); }
.subnav a.on{ background:var(--accent-weak); color:var(--accent); font-weight:500; }
.subnav .sep{ flex:0 0 auto; width:1px; height:18px; background:var(--border-strong); margin:0 7px; }
.userchip{ font-size:13px; color:var(--text); padding:5px 10px; text-decoration:none; border-radius:8px; transition:.12s; }
.userchip:hover{ background:var(--bg); color:var(--accent); }
@media (max-width:820px){ .topnav-links{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .topbar .brand b{ display:none; } }