/* =========
   Modernes kompaktes Dark-Theme (global)
   (angepasst auf Klassen aus header.php: .site-header, .container, .nav-main, .userbox, .burger, .mobile-only)
   ========= */

:root{
  --bg:#0e1217; --panel:#141a22; --panel-2:#1a222d; --text:#e6edf3; --muted:#9fb0c3;
  --brand:#3aa3ff; --brand-2:#1f8bff; --danger:#ef4444; --ok:#22c55e; --border:#223042;
  --shadow:0 4px 22px rgba(0,0,0,.35); --radius:12px;

  --btn-min-w:160px; --btn-h:44px; --btn-r:10px;

  --input-h:44px; --input-r:10px; --input-py:10px; --input-px:12px;

  --container-w:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Links */
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-2); text-decoration:underline; }

/* Container */
.container,.page,.shell{ width:100%; max-width:var(--container-w); margin:0 auto; padding:16px; }

/* ---- Header / Navigation ---- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#0f1115; border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .topbar{ padding:10px 16px; display:flex; align-items:center; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:40px; width:auto; object-fit:contain; display:block; }
.brand .name,.brand-title{ font-weight:700; color:var(--text); }
.spacer{ flex:1; }

/* Desktop-Navi */
.nav-main{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nav-main a{
  color:#60a5fa; text-decoration:none; padding:8px 10px; border-radius:8px;
}
.nav-main a:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
/* statt Outline (vermeidet „Doppelrahmen“) */
.nav-main a.active{ box-shadow:0 0 0 2px rgba(76,199,144,.45) inset; }

/* Admin-Dropdown */
.nav-main .dropdown{ position:relative; }
.nav-main .dropdown > a{ color:#60a5fa; padding:8px 10px; border-radius:8px; }
.nav-main .dropdown > a::after{ content:"▼"; font-size:10px; margin-left:6px; opacity:.8; }
.nav-main .dropdown ul{
  position:absolute; left:0; top:calc(100% + 8px); display:none;
  min-width:220px; background:#131823; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:6px; box-shadow:0 12px 26px rgba(0,0,0,.35); list-style:none; margin:0;
}
.nav-main .dropdown:hover ul{ display:block; }
.nav-main .dropdown ul a{
  display:block; padding:8px 12px; border-radius:8px; color:#e5e7eb; white-space:nowrap;
}
.nav-main .dropdown ul a:hover{ background:rgba(255,255,255,.06); }

/* Userbox + Buttons rechts */
.userbox{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  cursor:pointer;
}
.icon-btn:hover{ background:rgba(255,255,255,.15); }
.userbox .logout-btn{
  color:#fff !important; text-decoration:none; padding:8px 12px; border-radius:10px; background:#e11d48; border:0;
}
.userbox .logout-btn:hover{ background:#c8103c; }

/* Burger (mobile) */
.burger{
  display:none; appearance:none; background:transparent; border:0; cursor:pointer;
  height:40px; width:40px; align-items:center; justify-content:center; border-radius:8px; color:#e5e7eb;
}
.burger .bar{ display:block; width:22px; height:2px; background:#e5e7eb; margin:4px 0; }

/* Mobile */
.mobile-only{ display:none; }

/* Fokus */
.site-header a:focus-visible, .site-header button:focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px; border-radius:6px;
}

/* Breakpoint */
@media (max-width: 900px){
  .nav-main{
    display:none; flex-direction:column; align-items:stretch;
    position:absolute; left:16px; right:16px; top:56px; padding:10px; border-radius:12px;
    background:#0f1115; border:1px solid rgba(255,255,255,.08);
  }
  .nav-main.open{ display:flex; }
  .burger{ display:inline-flex; }
  .userbox{ display:none; }
  .mobile-only{ display:block; }
}

/* Gastmodus */
.guest .burger, .guest .nav-main, .guest .userbox{ display:none !important; }

/* ---- Cards ---- */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin:16px 0;
}
.card h1,.card h2{ margin:0 0 12px; line-height:1.2; }

/* ---- Formulare ---- */
.form{ display:grid; gap:14px; }
.form .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form.inline{ grid-auto-flow:column; align-items:end; gap:10px; }
@media (max-width: 720px){
  .form .grid{ grid-template-columns:1fr; }
  .form.inline{ grid-auto-flow:row; align-items:stretch; }
}
label{ display:grid; gap:6px; font-weight:500; color:var(--muted); }

/* Globale Dark-Inputs (alle Seiten) */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea{
  -webkit-appearance:none; appearance:none;
  min-height:var(--input-h);
  line-height:1.3;
  padding:var(--input-py) var(--input-px);
  font-size:16px;
  border-radius:var(--input-r);
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  box-sizing:border-box;
}

/* iOS Safari Pfeil */
select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* Fokus */
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(58,163,255,.15);
  outline:none;
}

/* ---- Buttons ---- */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--btn-r);
  background:var(--brand); color:#fff; padding:12px 16px;
  font-weight:600; cursor:pointer; text-decoration:none;
  min-height:var(--btn-h);
}
button:hover,.btn:hover{ background:var(--brand-2); color:#fff; text-decoration:none; }
button[disabled],.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn.danger{ background:var(--danger); }
.btn.ok{ background:var(--ok); }
.btn.gray{ background:rgba(255,255,255,.14); }

/* Report-Aktion */
.report-buttons,.actions{ display:flex; flex-wrap:wrap; gap:10px; }
.report-buttons .btn,.actions .btn{ min-width:var(--btn-min-w); height:var(--btn-h); border-radius:8px; }

/* Mini-Icon-Buttons in Tabellen */
.table-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
.icon-btn.sm{
  width:30px; height:30px; padding:0; border-radius:6px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff;
}
.icon-btn.sm:hover{ background:rgba(255,255,255,.16); }
.icon-btn.sm.err{ border-color:var(--danger); background:rgba(255,0,0,.12); color:#ff6b6b; }
.icon-btn.sm.err:hover{ background:rgba(255,0,0,.18); }

/* ---- Tabellen ---- */
.table-wrap,.table-responsive{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background:var(--panel);
}
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
thead th{ background:#101722; position:sticky; top:0; z-index:1; }

/* Spalten-Hilfen */
td.col-date,th.col-date,td.col-time,th.col-time,td.col-num,th.col-num{ white-space:nowrap; }
td.col-tour,th.col-tour{ white-space:normal; word-break:break-word; }

/* Actions-Spalte niemals umbrechen */
td.actions{ white-space:nowrap !important; text-align:right; }
td.actions .icon-btn{ margin-left:6px; }

@media (max-width:900px){ th,td{ padding:8px 10px; font-size:13px; } }
@media (max-width:480px){ th,td{ padding:6px 8px; font-size:12px; } }

/* Scrollhinweis dezent */
.table-wrap::after,.table-responsive::after{
  content:""; position:sticky; right:0; top:0; bottom:0; width:12px;
  background:linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events:none; display:block;
}

/* ---- Flash ---- */
.flash{ padding:12px 14px; border-radius:10px; margin:12px 0; }
.flash.ok{ background:rgba(46,204,113,.15); border:1px solid rgba(46,204,113,.35); }
.flash.err{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); }

/* ---- Footer ---- */
.site-footer{ color:var(--muted); margin:26px 0 10px; text-align:center; width:100%; }

/* Hilfsklassen */
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.muted{ color:var(--muted); }
.signature-block{ display:flex; gap:16px; margin-top:16px; }
.signature-line{ flex:1; height:48px; border-bottom:1px dashed var(--border); color:var(--muted);
  display:flex; align-items:flex-end; justify-content:flex-start; padding-bottom:6px; }
.page{ max-width:var(--container-w); margin:0 auto; padding:16px; overflow-x:hidden; }
@media (max-width:520px){ .btn-submit{ width:100%; } }
img{ max-width:100%; height:auto; }

/* Gleich hohe Form-Controls in Grids */
.form .grid > label > input,
.form .grid > label > select,
.form .grid > label > textarea{ min-height:var(--input-h); }

/* ===== FIXES (Inputs & Icons erzwingen, auch im Modal) ===== */

/* 1) Inputs überall dunkel (Form + Modal) */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="date"],
.form input[type="time"],
.form select,
.form textarea,
.modal .form input[type="text"],
.modal .form input[type="email"],
.modal .form input[type="password"],
.modal .form input[type="number"],
.modal .form input[type="date"],
.modal .form input[type="time"],
.modal .form select,
.modal .form textarea{
  background:var(--panel-2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  height:var(--input-h);
  line-height:1.3;
  padding:var(--input-py) var(--input-px);
  border-radius:var(--input-r);
  -webkit-appearance:none; appearance:none;
  box-shadow:none !important;
}
.form input::placeholder,
.form textarea::placeholder,
.modal .form input::placeholder,
.modal .form textarea::placeholder{ color:var(--muted); opacity:.9; }

/* Autofill dunkel halten */
.form input:-webkit-autofill,
.form input:-webkit-autofill:focus,
.modal .form input:-webkit-autofill,
.modal .form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:0 0 0 1000px var(--panel-2) inset !important;
  background:var(--panel-2) !important;
  caret-color:var(--text);
}

/* Select-Pfeil auch im Modal */
.form select,
.modal .form select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* 2) SVG-Icons sichtbar erzwingen */
.icon-btn{ color:#fff !important; }
.icon-btn svg,
.icon-btn svg *,
.modal .icon-btn svg,
.modal .icon-btn svg *{
  width:18px; height:18px; display:block;
  fill:currentColor !important;
  stroke:currentColor !important;
  stroke-width:1.6 !important;
  pointer-events:none;
}

/* 3) Safety – falls globales Reset */
svg{ fill:currentColor; }
	  
/* Tabelle: Zellen mittig ausrichten */
table td, table th { vertical-align: middle; }

/* Stoppzahl-Button exakt wie Text ausrichten */
.stops-btn{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;          /* kein extra Zeilenabstand */
  display: inline;         /* nicht inline-block */
  vertical-align: baseline;/* gleiche Grundlinie wie Text */
  text-decoration: underline;
  cursor: pointer;
}
.stops-btn:hover{ opacity:.85; }