/* ============================================================
   FW Einsatzdoku 2.0 – Design System (Hell / Professionell)
   Feuerwehr Schwaigern
   ============================================================ */

:root {
  /* Hintergründe */
  --c-bg:         #f0f2f5;
  --c-bg-card:    #ffffff;
  --c-bg-input:   #f7f8fa;
  --c-bg-hover:   #eef0f4;
  --c-border:     #d1d5db;
  --c-border-focus: #b91c1c;

  /* Text */
  --c-text:       #111827;
  --c-text-muted: #6b7280;
  --c-text-dim:   #9ca3af;

  /* Feuerwehr-Rot */
  --c-red:        #b91c1c;
  --c-red-hover:  #991b1b;
  --c-red-dim:    #fef2f2;
  --c-red-border: #fca5a5;

  /* Status */
  --c-green:      #15803d;
  --c-green-dim:  #f0fdf4;
  --c-gold:       #b45309;
  --c-gold-dim:   #fffbeb;
  --c-blue:       #1d4ed8;
  --c-blue-dim:   #eff6ff;
  --c-orange:     #c2410c;

  /* BOS-Status */
  --s1: #15803d;
  --s2: #1d4ed8;
  --s3: #b45309;
  --s4: #b91c1c;
  --s5: #6d28d9;
  --s6: #4b5563;

  /* Schriften */
  --font-base: 'Barlow', system-ui, sans-serif;
  --font-cond: 'Barlow Condensed', 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --touch: 44px;
  --t-fast: 100ms ease;
  --t-mid:  180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-base);
  background:  var(--c-bg);
  color:       var(--c-text);
  line-height: 1.5;
  min-height:  100dvh;
}

/* ── Typografie ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family:    var(--font-cond);
  font-weight:    700;
  letter-spacing: 0.01em;
  line-height:    1.2;
}
h1 { font-size: clamp(1.35rem, 3vw, 1.65rem); }
h2 { font-size: clamp(1.1rem, 2.5vw, 1.3rem); }
h3 { font-size: 1.05rem; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Karten ─────────────────────────────────────────────── */
.card {
  background:    var(--c-bg-card);
  border:        1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding:       1rem 1.25rem;
  box-shadow:    0 1px 3px rgba(0,0,0,.05);
}
.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.75rem;
  padding-bottom:  0.5rem;
  border-bottom:   1px solid var(--c-border);
}
.card-titel {
  font-family:    var(--font-cond);
  font-size:      0.8rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--c-text-muted);
}

/* ── Formulare ──────────────────────────────────────────── */
input, select, textarea {
  width:         100%;
  background:    var(--c-bg-input);
  color:         var(--c-text);
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  padding:       0.55rem 0.875rem;
  font-family:   var(--font-base);
  font-size:     1rem;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  outline:       none;
  min-height:    var(--touch);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-border-focus);
  box-shadow:   0 0 0 2px rgba(185,28,28,.15);
  background:   #fff;
}
input::placeholder { color: var(--c-text-dim); }
label {
  display:        block;
  font-size:      0.7rem;
  font-weight:    700;
  color:          var(--c-text-muted);
  margin-bottom:  0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.field { margin-bottom: 1rem; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.35rem;
  min-height:      var(--touch);
  padding:         0 1.1rem;
  border:          none;
  border-radius:   var(--r-md);
  font-family:     var(--font-base);
  font-size:       0.875rem;
  font-weight:     600;
  cursor:          pointer;
  transition:      background var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  white-space:     nowrap;
  user-select:     none;
}
.btn:active { transform: scale(0.98); }
.btn-primary   { background: var(--c-red);   color: #fff; }
.btn-primary:hover { background: var(--c-red-hover); }
.btn-secondary {
  background: #fff;
  color:      var(--c-text);
  border:     1px solid var(--c-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn-secondary:hover { background: var(--c-bg-hover); }
.btn-ghost  { background: transparent; color: var(--c-text-muted); }
.btn-ghost:hover { background: var(--c-bg-hover); color: var(--c-text); }
.btn-full { width: 100%; }
.btn-sm   { min-height: 34px; padding: 0 0.75rem; font-size: 0.8rem; }
.btn-lg   { min-height: 50px; padding: 0 1.75rem; font-size: 1rem; }

/* ── BOS-Status Buttons ──────────────────────────────────── */
.status-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.15rem;
  width:           100%;
  min-height:      80px;
  border:          2px solid var(--c-border);
  border-radius:   var(--r-lg);
  font-family:     var(--font-mono);
  font-size:       1.75rem;
  font-weight:     700;
  cursor:          pointer;
  transition:      all var(--t-mid);
  background:      #fff;
  color:           var(--c-text-muted);
}
.status-btn .status-label {
  font-family:    var(--font-base);
  font-size:      0.58rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--c-text-muted);
}
.status-btn[data-status="1"]:hover { border-color: var(--s1); color: var(--s1); }
.status-btn[data-status="2"]:hover { border-color: var(--s2); color: var(--s2); }
.status-btn[data-status="3"]:hover { border-color: var(--s3); color: var(--s3); }
.status-btn[data-status="4"]:hover { border-color: var(--s4); color: var(--s4); }
.status-btn[data-status="5"]:hover { border-color: var(--s5); color: var(--s5); }
.status-btn[data-status="6"]:hover { border-color: var(--s6); color: var(--s6); }

.status-btn.aktiv[data-status="1"] { background: var(--s1); color: #fff; border-color: var(--s1); }
.status-btn.aktiv[data-status="2"] { background: var(--s2); color: #fff; border-color: var(--s2); }
.status-btn.aktiv[data-status="3"] { background: var(--s3); color: #fff; border-color: var(--s3); }
.status-btn.aktiv[data-status="4"] { background: var(--s4); color: #fff; border-color: var(--s4); }
.status-btn.aktiv[data-status="5"] { background: var(--s5); color: #fff; border-color: var(--s5); }
.status-btn.aktiv[data-status="6"] { background: var(--s6); color: #fff; border-color: var(--s6); }

/* ── Status-Badge ─────────────────────────────────────────── */
.status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  padding:       0.2rem 0.55rem;
  border-radius: var(--r-sm);
  font-family:   var(--font-mono);
  font-size:     0.78rem;
  font-weight:   700;
  border:        1px solid;
}
.status-badge[data-status="1"] { background: #f0fdf4; color: var(--s1); border-color: #bbf7d0; }
.status-badge[data-status="2"] { background: #eff6ff; color: var(--s2); border-color: #bfdbfe; }
.status-badge[data-status="3"] { background: #fffbeb; color: var(--s3); border-color: #fde68a; }
.status-badge[data-status="4"] { background: #fef2f2; color: var(--s4); border-color: #fecaca; }
.status-badge[data-status="5"] { background: #f5f3ff; color: var(--s5); border-color: #ddd6fe; }
.status-badge[data-status="6"] { background: #f9fafb; color: var(--s6); border-color: #e5e7eb; }

/* ── Kommentar-Badge ──────────────────────────────────────── */
.kommentar-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  padding:       0.2rem 0.55rem;
  border-radius: var(--r-sm);
  background:    var(--c-gold-dim);
  border:        1px solid #fde68a;
  color:         var(--c-gold);
  font-size:     0.78rem;
  font-weight:   600;
  max-width:     100%;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  padding:       0.7rem 0.875rem;
  border-radius: var(--r-md);
  font-size:     0.875rem;
  border:        1px solid transparent;
}
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* ── Toasts ───────────────────────────────────────────────── */
#toast-container {
  position:       fixed;
  bottom:         1.25rem;
  right:          1.25rem;
  z-index:        9999;
  display:        flex;
  flex-direction: column-reverse;
  gap:            0.4rem;
  max-width:      320px;
}
.toast {
  padding:       0.7rem 0.875rem;
  border-radius: var(--r-md);
  font-size:     0.875rem;
  font-weight:   500;
  box-shadow:    0 4px 16px rgba(0,0,0,.12);
  animation:     slideIn 180ms ease;
  cursor:        pointer;
  border:        1px solid transparent;
}
@keyframes slideIn { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:none; } }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
  width:  22px; height: 22px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--c-red);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── App-Header ───────────────────────────────────────────── */
.app-header {
  background:    #fff;
  border-bottom: 2px solid var(--c-red);
  padding:       0 1.25rem;
  height:        52px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    0 1px 4px rgba(0,0,0,.08);
}
.app-logo {
  font-family:    var(--font-cond);
  font-size:      1rem;
  font-weight:    800;
  color:          var(--c-text);
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-logo .logo-balken {
  width: 4px; height: 20px;
  background: var(--c-red);
  border-radius: 2px;
}
.app-logo .logo-text-fw {
  color: var(--c-red);
}

/* ── Navigation ───────────────────────────────────────────── */
.header-nav { display: flex; gap: 0.1rem; }
.nav-link {
  display:     flex;
  align-items: center;
  gap:         0.3rem;
  padding:     0.3rem 0.65rem;
  border-radius: var(--r-md);
  color:       var(--c-text-muted);
  text-decoration: none;
  font-size:   0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition:  all var(--t-fast);
  min-height:  var(--touch);
}
.nav-link:hover { background: var(--c-bg-hover); color: var(--c-text); }
.nav-link.aktiv {
  color:      var(--c-red);
  background: var(--c-red-dim);
}
.nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }

.header-user { display: flex; align-items: center; gap: 0.5rem; }
.user-badge {
  font-size:      0.75rem;
  color:          var(--c-text-muted);
  font-weight:    600;
  background:     var(--c-bg-hover);
  padding:        0.25rem 0.6rem;
  border-radius:  var(--r-sm);
  border:         1px solid var(--c-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Layout ───────────────────────────────────────────────── */
.page { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
  flex-wrap:       wrap;
  gap:             0.75rem;
}
.page-title {
  font-family:    var(--font-cond);
  font-size:      1.35rem;
  font-weight:    800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--c-text);
}

.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-sm         { gap: 0.5rem; }
.gap-md         { gap: 1rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-md { margin-bottom: 1rem; }
.divider { height: 1px; background: var(--c-border); margin: 1rem 0; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

/* ── Loading ──────────────────────────────────────────────── */
.loading-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100dvh - 52px);
  gap:             1rem;
  color:           var(--c-text-muted);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hide-mobile { display: none !important; }
}