/* /public/assets/mandato.css
   CDU-Selm Design – globales UI-Stylesheet
   Enthält:
   - Farb-Variablen, Base, Container
   - Buttons, Cards, Notices
   - Form-Grid, Felder, Checkboxen
   - Tabellen (table-export), Subhead, Pagination
   - Header/Navi (Topbar, Dropdowns, Mobile Drawer)
*/

/* ========== Variablen & Base ========== */
:root{
  --blue:#2d3c4b; --yellow:#ffa600; --teal:#52b7c1; --white:#ffffff;
  --gray-bg:#f6f7fb; --border:#e5e7eb;
  --text:#222222;
}
html, body { height:100%; }
body{
  margin:0; background:var(--gray-bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
[hidden]{ display:none !important; }

/* ========== Layout Utility ========== */
.container{ max-width:1200px; margin:0 auto; padding:16px; }
.page .container{ max-width:1100px; } /* entspricht deinem header.php */
h1{ margin:10px 0 6px; font-size:28px; color:var(--blue); }

.p-3{ padding:16px; } .mt-3{ margin-top:16px; }

/* ========== Cards & Notices ========== */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.notice{
  background:#ecfeff; border:1px solid var(--teal);
  color:#0f172a; padding:10px 12px; border-radius:8px; margin:8px 0 0;
}

/* ========== Buttons ========== */
.btn{
  display:inline-block; padding:8px 12px; border-radius:8px;
  border:1px solid #cbd5e1; text-decoration:none; color:#1f2937;
  background:#f8fafc; cursor:pointer; line-height:1.2;
}
.btn:hover{ text-decoration:none; filter:brightness(.98); background:#f3f4f6; }
.btn-primary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-danger{ background:#dc2626; border-color:#dc2626; color:#fff; }
.btn-outline-danger{ background:#fff; border-color:#dc2626; color:#dc2626; }
.btn-success{ background:#16a34a; border-color:#16a34a; color:#fff; }
.btn-sm{ padding:4px 8px; font-size:12px; border-radius:6px; }

/* ========== Formulare ========== */
.form-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(260px,1fr));
  gap:12px 16px;
  align-items:start;
}

.field label {
  display:block;
  margin:0 0 6px 0;
  font-weight:600;
}

.field input,
.field select,
.field textarea {
  width:100%;
  box-sizing:border-box;
  padding:8px;
  border:1px solid #cbd5e1;
  border-radius:8px;        /* <- deine bevorzugte Rundung */
  background:#fff;
  color:#0f172a;
  outline:none;
  transition:border-color .12s ease, background .12s ease;
}

/* Optionale, dezente Hover/Fokus-Zustände (ohne starken Glow) */
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color:#b6c3d1;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:#52b7c1;    /* --teal */
}

/* Platzhalter dezent */
.field ::placeholder { color:#94a3b8; }

/* Disabled/readonly */
.field input[disabled],
.field select[disabled],
.field textarea[disabled],
.field input[readonly],
.field textarea[readonly]{
  background:#f8fafc; color:#6b7280; border-color:#e2e8f0;
}

/* Checkbox-Layout 18px | auto */
.checkbox {
  display:grid;
  grid-template-columns:18px auto;
  align-items:center;
  gap:8px;
}
.checkbox > input[type="checkbox"] {
  width:18px; height:18px; margin:0;
  accent-color:#52b7c1; /* --teal */
}

/* Felder über volle Breite */
.field.span-2 { grid-column:1 / -1; }

/* ========== Tabellen (Export-/Listen-Stil) ========== */
.table-export{ width:100%; border-collapse:collapse; margin:0 0 16px; }
.table-export thead th{
  background:var(--teal); color:#fff; font-weight:700; padding:8px 10px;
  border-bottom:3px solid var(--yellow); text-align:left;
}
.table-export tbody td{ padding:8px 10px; border-bottom:1px solid var(--border); }
.ended-row td{ color:#555; background:#f1f5f9; }


/* ========== Subhead & Pagination ========== */
.subhead{
  margin:0 0 12px; background:var(--blue); color:#fff;
  padding:8px 10px; border-radius:8px;
}
.pagination{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pagination .info{ color:#475569; font-size:14px; }

/* ========== HEADER / NAV (aus header.php übernommen) ========== */
.topbar{
  position:sticky; top:0; z-index:1000; background:var(--blue); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden;
}
.topbar .container{ max-width:none; padding-left:20px; padding-right:20px; }

.nav{ display:flex; align-items:center; gap:14px; min-height:60px; }
.brand{ color:#fff; font-weight:700; letter-spacing:.2px; font-size:1.5rem; line-height:1; }
.brand:hover{ color:#fff; text-decoration:underline; }
.nav a.link{ color:#fff; padding:10px 10px; border-radius:6px; }
.nav a.link:hover{ background:var(--yellow); color:#000; text-decoration:none; }
.nav a.link.active{ background:var(--yellow); color:#000; }

/* Dropdowns (linke Menüs per Hover) */
.dropdown{ position:relative; }
.dropdown > a.link::after{ content:"▾"; font-size:.8em; margin-left:6px; }
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--blue); border:1px solid rgba(255,255,255,.18); border-radius:10px;
  padding:6px; display:none; z-index:20; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.dropdown:hover .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:8px 10px; border-radius:8px; color:#fff; }
.dropdown-menu a:hover{ background:var(--yellow); color:#000; text-decoration:none; }
.dropdown-divider{ height:1px; background:#e5e7eb; opacity:.7; margin:6px; border-radius:1px; }

/* Rechtsbereich */
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-dd{ position:relative; }
.user-pill{
  display:inline-block; padding:6px 12px; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
}
.user-dd .dropdown-menu{ left:auto; right:0; min-width:220px; }
.user-dd .dropdown-menu a{ color:#fff; }
.user-dd.open .dropdown-menu{ display:block; }
.btn-logout{ background:var(--yellow); border-color:var(--yellow); color:#000; }
.btn-logout:hover{ filter:brightness(1.05); text-decoration:none; }

/* Mobile */
.burger{ margin-left:auto; display:none; background:transparent; border:0; padding:8px; color:#fff; border-radius:8px; }
.burger:focus{ outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }
.burger .bar{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }

.mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:998; }
.mobile-drawer{
  position:fixed; top:0; right:0; height:100%; width:86%; max-width:360px; background:var(--blue); color:#fff;
  transform:translateX(100%) !important; transition:transform .2s ease;
  display:flex; flex-direction:column; box-shadow:-12px 0 24px rgba(0,0,0,.35); z-index:999;
}
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.15); }
.drawer-content{ padding:6px 14px 18px; overflow:auto; -webkit-overflow-scrolling:touch; }
.drawer-link{ display:block; padding:10px 10px; border-radius:8px; color:#fff; text-decoration:none; }
.drawer-link:hover{ background:var(--yellow); color:#000; text-decoration:none; }
.drawer-section{ margin-top:10px; }
.accordion{ border:1px solid rgba(255,255,255,.15); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.accordion > button{ width:100%; text-align:left; background:rgba(255,255,255,.07); color:#fff; border:0; padding:12px; font-size:1rem; cursor:pointer; }
.accordion > button .chev{ float:right; opacity:.8; }
.accordion.open > button{ background:rgba(255,255,255,.12); }
.drawer-sub{ display:none; padding:6px 8px 10px; }
.accordion.open .drawer-sub{ display:block; }

.drawer-open .mobile-overlay{ opacity:1; pointer-events:auto; }
.drawer-open .mobile-drawer{ transform:translateX(0) !important; }

@media (max-width:900px){
  .brand{ font-size:1.3rem; }
  .dropdown, .nav a.link, .nav-right{ display:none; }
  .burger{ display:block; }
  .dropdown-menu{ display:none !important; }
}
@media (min-width:901px){ .mobile-drawer, .mobile-overlay{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* === Mandato v6.2: Desktop Inline-Menü + Mobile Overlay-Fix === */

/* --- Desktop: Top-Navigation nebeneinander --- */
.container.nav { display: flex; align-items: center; gap: 16px; }
.nav-left { display: flex; align-items: center; gap: 18px; }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Links + Dropdown-Trigger in einer Zeile, gleich hohe Klickflächen */
.nav-left > a.link,
.nav-left > .dropdown > a.link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  text-decoration: none;
}

/* Dropdown korrekt positionieren */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  z-index: 997; /* unter Header, über Content */
}

/* --- Mobile: Drawer/Overlay immer über dem Header --- */
@media (max-width: 899px) {
  /* Burger bleibt sichtbar; Header-Inhalte ausgeblendet */
  .hide-on-mobile { display: none !important; }

  /* Sichere Z-Index-Reihenfolge gegen Header-Überdeckung */
  .topbar { position: sticky; top: 0; z-index: 20; }            /* bewusst niedrig */
  .burger { z-index: 10002; }                                   /* immer klickbar */
  .mobile-overlay { z-index: 10000; }                           /* dunkelt ab */
  .mobile-drawer  { z-index: 10001; }                           /* liegt über Overlay */

  /* Falls die Brand-Klasse irgendwo ohne .hide-on-mobile auftaucht, trotzdem weg */
  .brand { display: none !important; }
}

/* --- Basisstile für Burger/Drawer (falls noch nicht vorhanden) --- */
.burger { display: none; background: transparent; border: 0; }
.burger .bar { display: block; width: 22px; height: 2px; margin: 4px 0; background: var(--text-on-header, #fff); }

@media (max-width: 899px) {
  .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; }
}

/* Overlay & Drawer (z-index wird oben im Mobile-Block überschrieben) */
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .18s ease;
}
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 420px);
  background: var(--header-bg, #1b2733);
  color: var(--header-fg, #fff);
  transform: translateX(100%);
  transition: transform .18s ease;
  display: flex; flex-direction: column;
}

.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer-title { font-weight: 600; }
.drawer-close { background: transparent; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }

.drawer-content { padding: 8px 0 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; }
.drawer-section { padding: 8px 12px; }
.drawer-link { display: block; padding: 10px 12px; color: inherit; text-decoration: none; }
.drawer-link.active { background: rgba(255,255,255,.12); }
.drawer-sub { padding-left: 6px; }

.accordion > button { width: 100%; text-align: left; background: transparent; color: inherit; border: 0; padding: 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.accordion .chev { opacity: .85; }
.accordion.open .chev { transform: rotate(180deg); }
.accordion .drawer-sub { display: none; }
.accordion.open .drawer-sub { display: block; }
/* /v6.2 end */

/* === Mandato v6.2.1: Logout-Fix & Drawer-Feinschliff === */
/* Erzwingt gelben Logout-Button (Desktop + Mobile), auch wenn Unterseiten eigene Button-Themen injizieren. */

/* Desktop */
a.btn-logout,
.btn.btn-logout,
.nav-right .btn-logout {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
a.btn-logout:hover,
.btn.btn-logout:hover,
.nav-right .btn-logout:hover,
a.btn-logout:focus,
.btn.btn-logout:focus,
.nav-right .btn-logout:focus {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: #000 !important;
  filter: brightness(1.05);
  text-decoration: none !important;
}

/* Falls irgendwo .btn-logout zusätzlich .btn-primary / .btn-danger etc. erhält */
.btn-logout[class*="btn-"],
.btn-logout[class^="btn-"] {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: #000 !important;
}

/* Mobile Drawer */
.mobile-drawer .drawer-link.logout {
  background: var(--yellow) !important;
  color: #000 !important;
}
.mobile-drawer .drawer-link.logout:hover,
.mobile-drawer .drawer-link.logout:focus,
.mobile-drawer .drawer-link.logout:active {
  background: var(--yellow) !important;
  color: #000 !important;
}

/* Sicherstellen, dass generische Hover-Styles nicht über dem Logout liegen */
.mobile-drawer .drawer-link.logout:hover,
.mobile-drawer .drawer-link.logout:focus {
  text-decoration: none !important;
}

/* Optional: leichte visuelle Trennung des User-Blocks im Drawer */
.mobile-drawer .drawer-section .drawer-link[style*="rgba(255,255,255,.08)"] {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
}
/* === /Ende v6.2.1 === */
/* v6.3 Logout-Only Override */
.btn-logout,
.nav-right .btn-logout {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn-logout:hover,
.btn-logout:focus {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: #000 !important;
  text-decoration: none !important;
  filter: brightness(1.05);
}

/* Mobile Drawer Logout */
.mobile-drawer .drawer-link.logout {
  background: var(--yellow) !important;
  color: #000 !important;
}
.mobile-drawer .drawer-link.logout:hover,
.mobile-drawer .drawer-link.logout:focus {
  background: var(--yellow) !important;
  color: #000 !important;
  text-decoration: none !important;
}
/* /Ende v6.3 */