/* =========================
   ADMIN – Grundlayout & Sticky-Footer
   ========================= */

/* Basisfarben & UI */
:root{
  --bg:#fff;
  --text:#222;
  --muted:#666;
  --accent:#b10e0e;
  --border:#e6e6e6;
  --shadow:0 10px 30px rgba(0,0,0,.08)
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

/* 
 * >>> Sticky-Footer auf ALLEN Admin-Seiten <<<
 * - body als Flex-Container
 * - .admin-main füllt den verfügbaren Raum
 * - .site-footer hängt sich immer ganz unten an
 * - 100vh UND 100dvh wegen iOS/Safari-Darstellung
 */
.admin-body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  background:#fafafa;
  color:var(--text);
}
.admin-main{
  flex:1 0 auto;
  padding:36px 16px;
}
.site-footer{
  margin-top:auto;        /* Footer klebt unten */
  flex-shrink:0;
}

/* Kopf mit Logo und Aktionen (Logout etc.) */
.auth-header{
  position:sticky; top:0; z-index:2;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px;
}
.auth-header .logo img{height:60px;width:auto;display:block}
.admin-nav{display:flex;gap:8px}

/* Buttons */
.btn{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{filter:brightness(.96)}
.btn.secondary{background:#eee;color:#222}
.btn.danger{background:#c0392b}

/* Admin-Seite „Benutzerverwaltung“ */
.admin-main{max-width:min(1760px, calc(100vw - 24px));width:100%;margin:20px auto}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.toolbar .muted{color:var(--muted)}
.table-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:auto;
}
table.users{
  width:100%;
  border-collapse:collapse;
}
table.users th,
table.users td{
  padding:10px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
table.users tr:last-child td{border-bottom:0}
table.users input[type="text"], 
table.users input[type="password"],
table.users input[type="date"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  background:#fff;
}

/* Passwort-Anzeige (●●●) */
.pw-cell{
  display:flex;
  align-items:center;
  gap:10px;
}
.pw-indicator{
  font-weight:700;
  letter-spacing:.12em;
}

/* Zuordnung (TK / TK GmbH / Sub / keine) – Labels nebeneinander */
table.users .org label{
  margin-right:10px;
  white-space:nowrap;
}

/* Login/Admin teilen sich diesen Footer-Fix */
.auth-body, .admin-body {
  min-height:100vh;
  min-height:100dvh;
}

/* ==== Büro-Accounts: View/Write untereinander, sauber ausgerichtet ==== */
table.users td.orgperm{
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.25;
}
table.users td.orgperm label{
  display: block;          /* Zeilenumbruch zwischen View und Write */
  margin: 0;
  white-space: nowrap;
}

/* ==== Tabs: Links so stylen wie Buttons ==== */
.tabs {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.tabs .tab,
.tabs .tablink {
  appearance:none;
  border:0;
  padding:.45rem .7rem;
  background:#efefef;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  color:#222;
  line-height:1.2;
}
.tabs .tab.active,
.tabs .tablink.active {
  background:#d21;
  color:#fff;
}
.tabs .tab:focus-visible,
.tabs .tablink:focus-visible {
  outline:2px solid #d21;
  outline-offset:2px;
}

/* =========================================================
   Stundenzettel + Fahrer:
   Ja / Nein sauber untereinander & ausgerichtet
   ========================================================= */

/* Beide Spalten etwas kompakter machen */
table.users td.stz,
table.users td.driver{
  padding-top:8px;
  padding-bottom:8px;
  line-height:1.25;
}

/* Jede Zeile (Ja / Nein) als kleiner Flex-Block:
   - Input + Text bleiben auf einer Zeile
   - Blöcke selbst stehen untereinander
*/
table.users td.stz > div,
table.users td.driver > div{
  display:flex;
  align-items:center;
  gap:4px;
}

/* Label innerhalb der Blöcke */
table.users td.stz label,
table.users td.driver label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

/* Radios ausdrücklich wieder inline, falls irgendwo global block gesetzt wurde */
table.users td.stz input[type="radio"],
table.users td.driver input[type="radio"]{
  display:inline-block;
  margin:0;
}

/* =========================================================
   V5.9 – Büro-Accounts übersichtlicher darstellen
   ---------------------------------------------------------
   Zweck: Die vielen Ja/Nein-Felder und die neue Spalte
   „Support Niko“ sollen kompakter und sauberer wirken.
   Sicherheitsaspekt: reine Darstellung; Rechte werden weiterhin
   serverseitig in PHP geprüft und gespeichert.
   ========================================================= */
.table-wrap{max-width:100%;overflow-x:auto}
table.users th{white-space:nowrap;text-align:left;background:#fff;font-size:.95rem}
table.users td{font-size:.95rem}
table.users .radio-stack{display:grid;gap:6px;align-content:start}
table.users .radio-stack label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:600}
table.users .support-stack label{font-weight:800}
table.users td.supportniko{min-width:128px}
table.users td.pin{min-width:90px}
table.users td.pw-cell{min-width:138px}
table.users td.employment{min-width:138px}
table.users td.orgperm{min-width:92px}
table.users td.tuv,
table.users td.bauzeiten,
table.users td.stz,
table.users td.lager,
table.users td.driver,
table.users td.employeehours{min-width:82px}
@media (max-width: 900px){
  .auth-header{position:static;align-items:flex-start;gap:10px;flex-wrap:wrap}
  .admin-nav{flex-wrap:wrap}
  .admin-main{margin:10px auto;padding:18px 10px}
  table.users th, table.users td{padding:8px}
}

/* =========================================================
   V6.0 - Admin: volle Breite, kompaktere Office-Accounts,
   neues Pop-up fuer Accountanlage.
   ========================================================= */
.admin-office-mode .table-wrap{
  overflow-x:auto;
}
.admin-office-mode table.users{
  table-layout:fixed;
  min-width:1180px;
}
.admin-office-mode table.users th,
.admin-office-mode table.users td{
  padding:7px 5px;
  font-size:.88rem;
}
.admin-office-mode table.users .sel-head,
.admin-office-mode table.users td:first-child{width:34px}
.admin-office-mode table.users th:nth-child(2),
.admin-office-mode table.users th:nth-child(3){width:118px}
.admin-office-mode table.users th:nth-child(4){width:132px}
.admin-office-mode table.users th:nth-child(5){width:78px}
.admin-office-mode table.users th:nth-child(6),
.admin-office-mode table.users th:nth-child(7),
.admin-office-mode table.users th:nth-child(8),
.admin-office-mode table.users th:nth-child(9),
.admin-office-mode table.users th:nth-child(10),
.admin-office-mode table.users th:nth-child(11){width:72px}
.admin-office-mode table.users th:nth-child(12){width:128px}
.admin-office-mode table.users th:nth-child(13){width:112px}
.admin-office-mode table.users th:nth-child(14){width:95px}
.admin-office-mode table.users .radio-stack{gap:4px}
.admin-office-mode table.users .radio-stack label{font-size:.82rem;gap:3px}
.admin-office-mode table.users input[type="text"],
.admin-office-mode table.users input[type="password"],
.admin-office-mode table.users input[type="date"]{
  padding:7px 6px;
}
.admin-office-mode table.users td.supportniko,
.admin-office-mode table.users td.pin,
.admin-office-mode table.users td.pw-cell,
.admin-office-mode table.users td.orgperm,
.admin-office-mode table.users td.tuv,
.admin-office-mode table.users td.bauzeiten,
.admin-office-mode table.users td.stz,
.admin-office-mode table.users td.lager,
.admin-office-mode table.users td.driver,
.admin-office-mode table.users td.employeehours{
  min-width:0;
}

.account-modal[hidden]{display:none!important}
.account-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
}
.account-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
}
.account-modal__panel{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  max-height:min(86vh, 760px);
  overflow:auto;
  background:#fff;
  color:#111827;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 22px 70px rgba(15,23,42,.28);
}
.account-modal__head,
.account-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
}
.account-modal__head{
  border-bottom:1px solid #e5e7eb;
}
.account-modal__head strong{
  display:block;
  font-size:1.15rem;
}
.account-modal__head p{
  margin:.25rem 0 0;
  color:#6b7280;
  font-weight:600;
}
.account-modal__x{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f3f4f6;
  color:#111827;
  font-weight:900;
  cursor:pointer;
}
.account-modal__body{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  padding:18px;
}
.account-modal__foot{
  border-top:1px solid #e5e7eb;
  justify-content:flex-end;
}
.dialog-field{
  display:grid;
  gap:6px;
  font-weight:800;
}
.dialog-field input,
.dialog-field select{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:9px;
  padding:10px 11px;
  font:inherit;
  background:#fff;
}
.dialog-grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.dialog-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f9fafb;
  font-weight:800;
}
body.modal-open{overflow:hidden}
@media (max-width: 720px){
  .account-modal__body,
  .dialog-grid{grid-template-columns:1fr}
}