/* --- Fuhrpark Seite --- */

.page.page-fuhrpark{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 28px;
}

.page.page-fuhrpark .header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.page.page-fuhrpark .header-left h2{
  margin:0;
  font-size:1.8rem;
  font-weight:800;
}
.page.page-fuhrpark .header-left .sub{
  margin:4px 0 0;
  font-size:13px;
  color:#6b7280;
}
.page.page-fuhrpark .btn-link{
  font-size:13px;
  text-decoration:none;
  color:#111827;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.page.page-fuhrpark .btn-link:hover{
  background:#eef2ff;
}

.btn.small{ padding:4px 8px; font-size:12px; }

.btn.danger{
  border-color:#fecaca;
  background:#fef2f2;
  color:#b91c1c;
}
.btn:hover{ background:#eef2ff; }

/* Formular Fahrzeug hinzufügen */
.add-vehicle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.add-vehicle input{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:13px;
}
.btn{
  background:#ffffff;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
}
.btn.primary{
  border-color:#111827;
  background:#111827;
  color:#f9fafb;
}
.btn.primary:hover{
  opacity:0.95;
}

.muted{
  font-size:13px;
  color:#6b7280;
}

/* Tabelle */
.card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
  overflow:hidden;
}
.table-wrap{
  overflow:auto;
}
.veh-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.veh-table th,
.veh-table td{
  border-bottom:1px solid #e5e7eb;
  padding:8px 10px;
}
.veh-table thead th{
  text-align:left;
  background:#f9fafb;
  font-size:12px;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.veh-table tbody tr:nth-child(odd){
  background:#fdfdfd;
}
.veh-table tbody tr:hover{
  background:#f1f5f9;
}

@media (max-width: 900px){
  .add-vehicle input{
    flex:1 1 45%;
  }
}
@media (max-width: 640px){
  .add-vehicle{
    flex-direction:column;
    align-items:stretch;
  }
}


/* =========================================================
   GLOBAL (aus layout.html ausgelagert)
   ========================================================= */
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f3f4f6;
  color:#111827;
}

header{
  padding:12px 20px;
  background:#548a03;
  color:#f9fafb;
  font-weight:600;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.header-right{
  font-size:12px;
  color:#e5e7eb;
}
.header-right a{
  color:#e5e7eb;
  text-decoration:none;
}
.header-right a:hover{
  text-decoration:underline;
}

.wrap{
  max-width:1600px;
  margin:24px auto 32px;
  padding:0 24px;
}

/* Login-Card */
.auth-container{
  min-height:calc(100vh - 60px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:#ffffff;
  border-radius:12px;
  padding:24px 24px 20px;
  box-shadow:0 10px 25px rgba(15,23,42,0.12);
  border:1px solid #e5e7eb;
}
.auth-title{
  font-size:20px;
  font-weight:600;
  margin-bottom:4px;
}
.auth-sub{
  font-size:13px;
  color:#6b7280;
  margin-bottom:18px;
}
.form-group{
  margin-bottom:14px;
}
label{
  display:block;
  font-size:13px;
  margin-bottom:4px;
  color:#374151;
}
input[type="text"],
input[type="password"]{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  font-size:14px;
  box-sizing:border-box;
}
input[type="text"]:focus,
input[type="password"]:focus{
  outline:none;
  border-color:#111827;
  box-shadow:0 0 0 1px #11182711;
}
.btn-primary{
  width:100%;
  padding:9px 12px;
  border-radius:999px;
  border:none;
  background:#111827;
  color:#f9fafb;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.btn-primary:hover{
  opacity:0.95;
}
.auth-footer{
  margin-top:14px;
  font-size:12px;
  color:#9ca3af;
  text-align:center;
}
.flash-msg{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  margin-bottom:12px;
}

/* Tabellen-Styles (Anwesenheit, Basis) */
.table-wrap{overflow:auto; border:1px solid #e5e7eb; border-radius:8px; background:#fff}
.att-table{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%}
.att-table th, .att-table td{padding:4px 6px; border:1px solid #e5e7eb; font-size:13px; line-height:1.2}
.att-table th{background:#fafafa; position:sticky; top:0; z-index:2}
.att-table td.name{position:sticky; left:0; background:#fff; z-index:1; max-width:220px; white-space:nowrap}
.att-table input[type="text"]{
  width:32px; text-align:center; padding:4px 0; border:1px solid #cbd5e1; border-radius:6px;
}
.hint{margin-top:8px; color:#555; font-size:12px}
.att-meta{display:block; font-size:11px; color:#6b7280}



/* =========================================================
   Dashboard – Kacheln
   ========================================================= */

.modules {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.tile {
  width: 180px;
  height: 160px;
  padding: 20px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;

  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: all .18s ease-in-out;
}

.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.tile-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.tile-title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .tile {
    width: 150px;
    height: 140px;
  }
  .tile-icon {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 600px) {
  .modules {
    justify-content: center;
  }
}




/* =========================================================
   Kompatibilität: alte Klassen (.site-header/.container)
   nutzen die neuen Layout-Styles
   ========================================================= */

/* falls Templates noch <div class="site-header"> statt <header> nutzen */
.site-header{
  padding:12px 20px;
  background:#548a03;
  color:#f9fafb;
  font-weight:600;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header a{
  color:#e5e7eb;
  text-decoration:none;
}
.site-header a:hover{
  text-decoration:underline;
}

/* falls Templates noch <div class="container"> statt .wrap nutzen */
.container{
  max-width:1600px;
  margin:24px auto 32px;
  padding:0 24px;
}


/* Safari Fix: Safe-Area + Header Layout */
header, .site-header{
  padding-top: calc(12px + env(safe-area-inset-top));
}

.header-left, .header-right{
  min-width: 0;
}

header, .site-header{
  gap: 12px;              /* Safari braucht oft explizit gap */
  flex-wrap: wrap;        /* verhindert „verschluckte“ Elemente */
}

/* ✅ NEU: Desktop-Fix – Top-Header rechts (Eingeloggt/Logout) immer 1 Zeile */
@media (min-width: 521px){
  header, .site-header{
    flex-wrap: nowrap;                 /* verhindert Umbruch in 2 Zeilen */
  }

  header .header-left, .site-header .header-left{
    flex: 1 1 auto;
    min-width: 0;
  }

  header .header-right, .site-header .header-right{
    white-space: nowrap;               /* "Eingeloggt als … · Logout" bleibt in einer Zeile */
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
}

/* =========================================================
   MOBILE FIX: Top-Header (layout.html) sauber ausrichten
   ========================================================= */
@media (max-width: 520px){

  /* Header: nicht so stark padding, und sauber untereinander wenn nötig */
  header, .site-header{
    padding-left: 16px;
    padding-right: 16px;
    align-items: flex-start;
  }

  /* linke Seite (Friko Dashboard) */
  header .header-left, .site-header .header-left{
    flex: 1 1 100%;
  }

/* ✅ NUR Umsatz-Seite: Überschrift + Datum/Navi untereinander */
.page .header{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.page .header-right{
  width: 100%;
}

  /* rechte Seite (Eingeloggt als … Logout) */
  header .header-right, .site-header .header-right{
    flex: 1 1 100%;
    text-align: left;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    white-space: normal;
  }

  /* verhindert unschönes „Wort für Wort“-Umbrechen */
  header .header-right a, .site-header .header-right a{
    white-space: nowrap;
  }
}