/* ===== Variablen ===== */
:root {
  --fw-red:            #cc1111;
  --fw-red-dark:       #a80e0e;
  --status-green-bg:   #e8f5e9;
  --status-green-bd:   #43a047;
  --status-yellow-bg:  #fffde7;
  --status-yellow-bd:  #f9a825;
  --status-red-bg:     #ffebee;
  --status-red-bd:     #e53935;
}

/* ===== Allgemein ===== */
body { background-color: #f4f5f7; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ===== Feuerwehr-Rot ===== */
.bg-fw-red           { background-color: var(--fw-red) !important; }
.btn-fw-red          { background-color: var(--fw-red); border-color: var(--fw-red); color: #fff; }
.btn-fw-red:hover    { background-color: var(--fw-red-dark); border-color: var(--fw-red-dark); color: #fff; }
.btn-fw-red:disabled { background-color: var(--fw-red); border-color: var(--fw-red); opacity: .65; }

/* ===== Login ===== */
.login-bg  { background: linear-gradient(135deg, #8b0000 0%, #cc1111 50%, #a80e0e 100%); }
.login-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.login-header {
  background: var(--fw-red);
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
}

/* ===== Navbar ===== */
.navbar { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* ===== Statistik-Karten ===== */
.stat-card {
  background: #fff; border-radius: 10px; padding: 12px 16px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-top: 3px solid #dee2e6;
}
.stat-card.stat-green  { border-top-color: var(--status-green-bd); }
.stat-card.stat-yellow { border-top-color: var(--status-yellow-bd); }
.stat-card.stat-red    { border-top-color: var(--status-red-bd); }
.stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label  { font-size: .75rem; color: #6c757d; margin-top: 2px; }

/* ===== Tabellenzeilen ===== */
tbody tr.row-green  { background-color: var(--status-green-bg)  !important; border-left: 4px solid var(--status-green-bd); }
tbody tr.row-yellow { background-color: var(--status-yellow-bg) !important; border-left: 4px solid var(--status-yellow-bd); }
tbody tr.row-red    { background-color: var(--status-red-bg)    !important; border-left: 4px solid var(--status-red-bd); }
tbody tr:hover { filter: brightness(.97); }

.name-green  { color: #2e7d32; font-weight: 600; }
.name-yellow { color: #e65100; font-weight: 600; }
.name-red    { color: #c62828; font-weight: 600; }

/* ===== Tabelle Wrapper ===== */
.table-responsive { background: #fff; border-radius: 10px; overflow-x: auto; }
thead.table-dark th {
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  letter-spacing: .02em; padding-top: 10px; padding-bottom: 10px;
}
tbody td { font-size: .85rem; vertical-align: middle; white-space: nowrap; }

/* ===== Sticky Aktionsspalte ===== */
.col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -3px 0 6px rgba(0,0,0,.07);
}
thead .col-actions                                    { background: #212529; }
tbody tr.row-green  .col-actions                      { background: var(--status-green-bg); }
tbody tr.row-yellow .col-actions                      { background: var(--status-yellow-bg); }
tbody tr.row-red    .col-actions                      { background: var(--status-red-bg); }
tbody tr:not(.row-green):not(.row-yellow):not(.row-red) .col-actions { background: #fff; }

/* ===== Status-Badge & Probleme-Chips ===== */
.badge-status  { font-size: .75rem; padding: 4px 8px; border-radius: 20px; white-space: nowrap; }
.problem-chip  { font-size: .72rem; cursor: default; }

/* ===== Aktions-Buttons ===== */
.btn-action { padding: 2px 8px; font-size: .8rem; }

/* ===== Legende ===== */
.legend-item         { font-size: .78rem; color: #555; display: flex; align-items: center; gap: 4px; }
.legend-green  i     { color: var(--status-green-bd); }
.legend-yellow i     { color: var(--status-yellow-bd); }
.legend-red    i     { color: var(--status-red-bd); }

/* ===== Leerer Zustand ===== */
#empty-state { background: #fff; border-radius: 10px; border: 2px dashed #dee2e6; }

/* ===== Profil-Header ===== */
.profile-header {
  background: #fff; border-radius: 12px;
  padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ===== Qualifikations-Karten ===== */
.qual-card {
  background: #fff; border-radius: 10px; padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-left: 5px solid #dee2e6;
  height: 100%;
}
.qual-card-green  { border-left-color: var(--status-green-bd);  background: var(--status-green-bg); }
.qual-card-yellow { border-left-color: var(--status-yellow-bd); background: var(--status-yellow-bg); }
.qual-card-red    { border-left-color: var(--status-red-bd);    background: var(--status-red-bg); }
.qual-card-none   { border-left-color: #adb5bd; background: #f8f9fa; }

.qual-card-label   { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin-bottom: .4rem; }
.qual-card-date    { font-size: 1.25rem; font-weight: 700; margin-bottom: .2rem; }
.qual-card-expiry  { font-size: .8rem; color: #555; margin-bottom: .3rem; }
.qual-card-hint    { font-size: .72rem; color: #888; }
.qual-card-missing { font-size: .95rem; color: #adb5bd; font-style: italic; margin-bottom: .3rem; }

/* ===== Verlaufs-Tabelle ===== */
#records-table td { font-size: .85rem; }
#records-table .badge { font-size: .72rem; }

/* ===== Person-Checkliste im Nachweis-Modal ===== */
.person-checklist {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
}

.person-check-item {
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  transition: background .08s;
  user-select: none;
}
.person-check-item:last-child { border-bottom: none; }
.person-check-item:hover      { background: #f0f4ff; }
.person-check-item input      { cursor: pointer; }

/* Status-Punkt in der Checkliste */
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: #adb5bd;
}
.status-dot-green  { background: #43a047; }
.status-dot-yellow { background: #f9a825; }
.status-dot-red    { background: #e53935; }
.status-dot-none   { background: #adb5bd; }

/* ===== Datei-Vorschau im Modal ===== */
#file-preview .badge { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Modal Close-Button Farbfix ===== */
.modal-header.bg-fw-red .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }