/* ========== Reset & Base ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  
}


:root {
  --primary:#d32f2f;
  --primary-dark:#b71c1c;
  --accent:#007bff;
  --accent-active:#9c27b0;
  --bg:#f5f5f5;
  --text:#333;
  --muted:#666;
  --ok:#4caf50;
  --warn:#ff9800;
  --error:#f44336;
}
body {
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* ========== Header ========== */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
  z-index: 100;
}
.header-title h1 { font-size: 1.6rem; margin: 0; }
.header-actions { display:flex; gap:10px; }
.time-display { text-align:center; /*flex:1*/; }
#current-date { font-size:1rem; opacity:.95; }
#current-time { font-size:3rem; font-weight:700; font-variant-numeric:tabular-nums; }
.weather-info {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.15);
  padding:8px 12px; border-radius:8px;
}
.weather-icon { font-size:2rem; }
#weather-temp { font-size:1.2rem; font-weight:700; }
#weather-desc, #weather-location { font-size:.85rem; opacity:.9; }

/* ========== Navigation (horizontal einklappbar) ========== */
.main-nav {
  background:#333;
  overflow:hidden;
  height:5px;                /* eingeklappt */
  transition:height 0.3s ease;
  display:flex;
  justify-content:flex-start;
  width:100%;
}
.main-nav:hover {
  height:50px;               /* aufgeklappt */
}
.nav-item {
  color:#fff;
  text-decoration:none;
  padding:14px 20px;
  transition:.2s background-color;
  display:none;              /* versteckt im eingeklappten Zustand */
}
.main-nav:hover .nav-item {
  display:block;             /* sichtbar im aufgeklappten Zustand */
}
.nav-item:hover,
.nav-item.active {
  background:var(--primary);
}

/* ✅ Touchgeräte: immer sichtbar */
@media (hover: none) and (pointer: coarse) {
  .main-nav {
    height:auto !important;
    display:flex !important;
    flex-direction: row;
    justify-content: space-around;
  }
  .nav-item {
    display:block !important;
    flex:1;
    text-align:center;
    padding:12px;
  }
}

/* ========== Layout ========== */
.dashboard {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:20px;
  padding:20px;
  min-height:calc(100vh - 160px); /* Header + Nav eingerechnet */
  align-items: start;          /* ✅ Panels dehnen sich */
    grid-auto-rows: auto;  /* jede Zeile passt sich automatisch an */

}
.panel {
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

.panel-body {
  flex:1;
  overflow-y:visible;   /* Scrollbar nur im Panel */
  max-height:500px;  /* Höhe begrenzen, anpassen wie du willst */
}
.panel-header {
  background:#f5f5f5;
  padding:12px 16px;
  border-bottom:1px solid #e0e0e0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.panel-header h2 { color:var(--primary); font-size:1.1rem; margin:0; }
.panel {
  height: 100%;        /* Panel füllt die ganze Zelle */
}

.dashboard {
  align-items: stretch; /* sorgt dafür, dass alle Grid-Items voll gestreckt werden */
}
/* ========== Buttons ========== */
.btn {
  display:inline-block;
  padding:8px 14px;
  border:none;
  border-radius:6px;
  font-size:.9rem;
  cursor:pointer;
  transition:.2s background-color, .2s filter;
  text-decoration:none;
}
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:#666; color:#fff; }
.btn-secondary:hover { filter:brightness(.95); }
.btn-danger { background:var(--error); color:#fff; }
.btn-danger:hover { filter:brightness(.95); }
.btn-success { background:var(--ok); color:#fff; }
.btn-success:hover { filter:brightness(.95); }
.btn-small { padding:4px 8px; font-size:.8rem; }

/* ========== Meldungen ========== */
.alerts-panel{ grid-column:1; }
.alert-list{ flex:1; }
.alert-item{
  padding:14px; border-bottom:1px solid #eee;
  transition:.2s background-color;
  border-left:4px solid transparent;
}
.alert-item:hover{ background:#fafafa; }
.alert-item:last-child{ border-bottom:none; }
.alert-item.high-priority{ border-left-color:#ff5722; background:#ffebee; }
.alert-item.medium-priority{ border-left-color:var(--warn); }
.alert-item.low-priority{ border-left-color:var(--ok); }
.alert-header{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.alert-title{ font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.alert-time{ font-size:.9rem; color:var(--muted); font-weight:700; }
.alert-description{ font-size:.95rem;}

/* ========== Kalender ========== */
.calendar-panel{ grid-column:2; }
.calendar-container{ flex:1; display:flex; justify-content:center; align-items:center; padding:20px; }

/* ========== Fahrzeuge Status & Details ========== */
.vehicle-panel{ grid-column:3; }
.vehicle-info{ display:flex; flex-direction:column; flex:1; }
.vehicle-name{ font-weight:700; font-size:1.05rem; margin-bottom:3px; }
.vehicle-details{ font-size:.85rem; color:var(--muted); }
.vehicle-status{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.status-badge{ padding:4px 10px; border-radius:12px; font-size:.8rem; font-weight:700; color:#fff; }
.status-available{ background:var(--ok); }
.status-in-use{ background:var(--warn); }
.status-maintenance{ background:var(--error); }

/* ========== Planung (Dashboard) ========== */
.planung-list{ flex:1; }
.planung-item{
  padding:14px;
  border-bottom:1px solid #eee;
  transition:.2s background-color;
  border-right:4px solid var(--accent); /* Standard: Balken rechts blau */
}
.planung-item.active { border-right-color: var(--accent-active); } /* Lila wenn aktiv */
.planung-item:hover{ background:#fafafa; }
.planung-header{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.planung-title{ font-weight:800; font-size:1.2rem;}
.planung-time{ font-size:.9rem; color:var(--muted); font-weight:700; }
.planung-body p{ margin:4px 0; font-size:.9rem; }

/* ========== Tabellen & Formulare ========== */
.form-container{ background:#fff; padding:16px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.08); margin-bottom:16px; }
.form-group{ margin-bottom:12px; }
.form-group label{ display:block; margin-bottom:6px; font-weight:700; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:1rem;
}
.form-group textarea{ resize:vertical; min-height:90px; }
.table-container{ background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.08); overflow:hidden; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th, .data-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid #eee; }
.data-table th{ background:#f5f5f5; font-weight:700; color:#333; }
.data-table tr:hover{ background:#fafafa; }

/* ========== Fahrzeugstatus-Karten unten ========== */
.vehicle-status-overview{ margin-top:16px; padding:14px; background:#f9f9f9; border-radius:10px; }
.status-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.status-card{ padding:14px; border-radius:10px; text-align:center; color:#fff; }
.status-card.available{ background:var(--ok); }
.status-card.in-use{ background:var(--warn); }
.status-card.maintenance{ background:var(--error); }
.status-count{ font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.status-label{ font-size:.85rem; }

/* ========== Misc ========== */
.no-data{ text-align:center; padding:28px 12px; color:#666; font-style:italic; }
.loading{ opacity:.7; pointer-events:none; }
.spinner{
  border:3px solid #f3f3f3;
  border-top:3px solid var(--primary);
  border-radius:50%;
  width:18px; height:18px;
  animation:spin 1s linear infinite;
  display:inline-block;
  margin-right:8px;
  vertical-align:middle;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ========== Responsive Extra ========== */
@media (max-width:1200px){
  .dashboard{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .calendar-panel{ grid-column:1 / span 2; }
}
@media (max-width:768px){
  .dashboard{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .calendar-panel{ grid-column:1; }
  .header{ flex-direction:column; gap:12px; text-align:center; }
  .time-display{ order:-1; }
  .status-cards{ grid-template-columns:1fr; }
}
.header-logo {
  height: 75px;       /* anpassen nach Wunsch */
  object-fit: contain;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;                 /* Abstand zwischen den einzelnen Checkbox-Blöcken */
}

.checkbox-group label {
  display: inline-flex;
  align-items: center;
  font-size: .95rem;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 4px;         /* ✅ enger Abstand Text/Box */
}

.badge {
  color: var(--primary);
}






/* Meldungs-Liste füllt die ganze Panel-Höhe und scrollt intern */
#meldungen-list.autoscroll {
  flex: 1;
  overflow: hidden;      /* kein sichtbarer Scrollbalken */
  position: relative;
}

/* optional: Fade oben/unten */
#meldungen-list.autoscroll::before,
#meldungen-list.autoscroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 5;
}


/* Alerts-Panel: Panel-Body als Flex-Container,
   damit die Meldungsliste die ganze Höhe nutzen kann */
.alerts-panel .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: none;         /* überschreibt das globale max-height:500px */
}


/* ========== Darkmode (17:00–08:00) ========== */

/* sanfter Übergang */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Basismode umschalten über Variablen */
body.dark-mode {
  --bg: #282b30;    /* Hintergrund */
  --text: #f5f5f5;  /* Standard-Textfarbe */
  --muted: #aaaaaa; /* gedämpfte Texte */
}

/* Hintergrund wirklich dunkel setzen */
body.dark-mode {
  background-color: #282b30;
  color: var(--text);
}

/* Panels dunkler */
body.dark-mode .panel {
  background: #32363d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* Panel-Header */
body.dark-mode .panel-header {
  background: #24272d;
  border-bottom: 1px solid #1c1e22;
}

/* Tabellen */
body.dark-mode .table-container {
  background: #32363d;
}

body.dark-mode .data-table th {
  background: #24272d;
  color: var(--text);
}

body.dark-mode .data-table td {
  border-bottom: 1px solid #1f2227;
}

body.dark-mode .data-table tr:hover {
  background: #2c3036;
}

/* Form-Container */
body.dark-mode .form-container {
  background: #32363d;
}

/* No-Data Meldungen */
body.dark-mode .no-data {
  color: #cccccc;
}

/* Navi etwas dunkler */
body.dark-mode .main-nav {
  background: #111;
}

/* Footer mit QR-Code etwas abtönen */
body.dark-mode .calendar-footer {
  background: transparent;
}

/* ========== Google Kalender Darkmode-Hack ========== */

/* GOOGLE CALENDAR DARKMODE – Anpassung Richtung #282b30 */

/* GOOGLE-KALENDER - Soft Dark Mode #282b30 */

/* Container bleibt normal */
.calendar-dark-wrap {
  position: relative;
  overflow: hidden;
}

/* Nur IFRAME stylen */
body.dark-mode .calendar-dark-wrap iframe {
  filter: invert(0.90)              /* nur leicht invertieren */
          brightness(0.75)          /* etwas abdunkeln */
          contrast(1.05);           /* damit Schrift knackig bleibt */
}