/* ============================================================
   FeuerwehrManagementSystem – Design-System
   Übernimmt das Design der Website bau.ff-stadtmitte24.de:
   Farben, Schriften (PT Sans / Quicksand), Radien, Schatten,
   Buttons in Versalien, roter Akzentbalken vor Überschriften.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Quicksand:wght@400;500;700&display=swap');

:root {
    --fw-red:      #c90101;
    --fw-red-dark: #a30101;
    --fw-dark:     #171717;
    --fw-gray:     #f3f4f6;
    --fw-text:     #2d2d2d;
    --shadow-sm:   0 2px 8px rgba(0,0,0,.07);
    --shadow-md:   0 6px 20px rgba(0,0,0,.11);
    --shadow-lg:   0 12px 36px rgba(0,0,0,.16);
    --radius:      9px;
    --transition:  all .24s ease;
    --topbar:      58px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--fw-gray);
    font-family: 'PT Sans', sans-serif;
    color: var(--fw-text);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Quicksand', sans-serif; font-weight: 700; }
a { color: var(--fw-red); }
a:hover { color: var(--fw-red-dark); }

/* ============================================================
   Kopfleiste – weiß mit rotem Abschluss wie die Website-Navigation
   ============================================================ */
.fms-navbar {
    background: #fff;
    border-bottom: 3px solid var(--fw-red);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    height: var(--topbar);
    padding: 0 1rem;
}
.fms-navbar .navbar-brand {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fw-dark) !important;
}
.fms-navbar .navbar-brand i { color: var(--fw-red); }
.fms-navbar .dropdown-toggle {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--fw-dark) !important;
}
.fms-navbar .dropdown-toggle:hover { color: var(--fw-red) !important; }
.fms-navbar .btn-outline-light {
    color: var(--fw-dark);
    border-color: #ddd;
}
.fms-navbar .btn-outline-light:hover { background: var(--fw-red); border-color: var(--fw-red); color: #fff; }

.dropdown-menu {
    border: none;
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 3px solid var(--fw-red);
    box-shadow: var(--shadow-md);
    padding: 6px 0;
}
.dropdown-item { font-size: .88rem; padding: 9px 18px; transition: background .15s, color .15s; }
.dropdown-item:hover { background: var(--fw-red); color: #fff; }

/* ============================================================
   Anmeldung
   ============================================================ */
.fms-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #171717 0%, #2a0606 45%, #7a0101 100%);
}
.fms-login-card {
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.fms-login-card .card-header {
    background: var(--fw-red);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 0 !important;
    padding: 1.6rem;
    font-family: 'Quicksand', sans-serif;
}

/* ============================================================
   Seitenleiste
   ============================================================ */
.fms-sidebar {
    position: fixed;
    top: var(--topbar); left: 0; bottom: 0;
    width: 280px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    z-index: 1030;
}
.fms-content {
    margin-left: 280px;
    margin-top: var(--topbar);
    min-height: calc(100vh - var(--topbar));
    display: flex;
    flex-direction: column;
}
.fms-content > .container-fluid { flex: 1; }

/* Bootstrap setzt beim aufgelösten Offcanvas (ab lg) display:flex ohne Richtung
   auf den Body – dadurch stünden Dashboard-Link und Modulliste nebeneinander. */
.fms-sidebar .offcanvas-body { display: block; }

@media (max-width: 991.98px) {
    .fms-sidebar { top: 0; width: 280px; }
    .fms-content { margin-left: 0; }
}

.fms-side-link {
    display: block;
    padding: .75rem 1.1rem;
    color: var(--fw-dark);
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid #f1f1f1;
    transition: var(--transition);
}
.fms-side-link:hover { background: var(--fw-gray); color: var(--fw-red); }
.fms-side-link.active {
    background: var(--fw-red);
    color: #fff;
    box-shadow: inset 4px 0 0 var(--fw-red-dark);
}

.fms-sidebar .accordion-item { border: none; border-bottom: 1px solid #f1f1f1; }
.fms-sidebar .accordion-button {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--fw-dark);
    background: #fff;
}
.fms-sidebar .accordion-button:not(.collapsed) {
    color: var(--fw-red);
    background: #fff;
    box-shadow: none;
}
.fms-sidebar .accordion-button:focus { box-shadow: none; }
.fms-sidebar .accordion-button i { color: var(--fw-red); }

.fms-side-sublink {
    display: block;
    padding: .45rem 1.1rem .45rem 2.6rem;
    color: #555;
    text-decoration: none;
    font-size: .88rem;
    transition: var(--transition);
}
.fms-side-sublink:hover { background: var(--fw-gray); color: var(--fw-red); }
.fms-side-sublink.active {
    background: #fdecec;
    color: var(--fw-red);
    font-weight: 700;
    border-left: 3px solid var(--fw-red);
}

/* ============================================================
   Überschriften, Karten, Tabellen
   ============================================================ */
.page-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fw-dark);
    border: none;
    padding-left: 0;
}
.page-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.15em;
    background: var(--fw-red);
    border-radius: 2px;
    flex-shrink: 0;
}

.breadcrumb { margin-bottom: .75rem; }
.breadcrumb a { text-decoration: none; }

.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.card-header {
    background: #fff;
    border-bottom: 2px solid var(--fw-gray);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    padding: .85rem 1.1rem;
}
.card-header i { color: var(--fw-red); }

.table > :not(caption) > * > * { vertical-align: middle; }
.table > thead th {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555;
    background: var(--fw-gray);
    border-bottom: 2px solid #e3e5e8;
}
.table-hover > tbody > tr:hover > * { background: #fdf6f6; }

/* Datentabellen der generischen Liste */
.fms-data-table { font-size: .9rem; }
.fms-data-table th { white-space: nowrap; }
.fms-data-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Kennzahlen-Kacheln – heller Anklang an die Zählerboxen der Website
   ============================================================ */
.fms-stat-card {
    border: none;
    border-top: 4px solid var(--fw-red);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.fms-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fms-stat-card .stat-icon {
    font-size: 1.7rem;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    color: #fff;
}
.fms-stat-number {
    font-family: 'Quicksand', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--fw-dark);
}
.fms-stat-label {
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ============================================================
   Schaltflächen im Stil der Website
   ============================================================ */
.btn {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    border-radius: 5px;
    transition: var(--transition);
}
.btn-fw, a.btn-fw {
    background: var(--fw-red);
    color: #fff !important;
    border: 2px solid var(--fw-red);
    padding: 7px 20px;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.btn-fw:hover, a.btn-fw:hover {
    background: var(--fw-red-dark);
    border-color: var(--fw-red-dark);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,1,1,.3);
}

.btn-fw-outline, a.btn-fw-outline {
    background: transparent;
    color: var(--fw-red) !important;
    border: 2px solid var(--fw-red);
    padding: 6px 19px;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.btn-fw-outline:hover, a.btn-fw-outline:hover {
    background: var(--fw-red);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Bootstrap-Schaltflächen an das System angleichen */
.btn-outline-primary {
    color: var(--fw-red);
    border-color: var(--fw-red);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background: var(--fw-red);
    border-color: var(--fw-red);
    color: #fff;
}
.btn-primary {
    background: var(--fw-red);
    border-color: var(--fw-red);
}
.btn-primary:hover, .btn-primary:active { background: var(--fw-red-dark); border-color: var(--fw-red-dark); }
.btn-outline-secondary { color: #555; border-color: #ccc; }
.btn-outline-secondary:hover { background: var(--fw-dark); border-color: var(--fw-dark); color: #fff; }

.form-control:focus, .form-select:focus {
    border-color: var(--fw-red);
    box-shadow: 0 0 0 .2rem rgba(201,1,1,.12);
}
.form-label { font-weight: 700; font-size: .85rem; color: #444; }
.form-check-input:checked { background-color: var(--fw-red); border-color: var(--fw-red); }
/* Bootstrap bemisst Kontrollkästchen in em. Im Kopf eines Aufklappbereichs steckt
   der Haken in einem h2 und würde dadurch auf doppelte Größe wachsen. */
.form-check-input { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: .2rem; }
.form-check-input[type="checkbox"] { border-radius: .25rem; }   /* em-Radius würde im h2 zum Kreis */

/* Aufklappbereiche im Inhalt: roter Akzent statt Bootstrap-Blau */
.fms-content .accordion-button:not(.collapsed) {
    background: #fdecec;
    color: var(--fw-red);
    box-shadow: inset 0 -1px 0 rgba(201,1,1,.2);
}
.fms-content .accordion-button:focus { box-shadow: none; }
.fms-content .accordion-button::after { filter: hue-rotate(-20deg); }
.fms-content .accordion-item { border-color: #eee; border-radius: var(--radius); }

/* ============================================================
   Kennzeichen und Hinweise
   ============================================================ */
.bg-fw     { background: var(--fw-red) !important; }
.text-fw   { color: var(--fw-red) !important; }
.border-fw { border-color: var(--fw-red) !important; }

.badge-status { font-weight: 700; font-size: .78rem; }
.badge {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    letter-spacing: .3px;
}

/* Kennzeichen im Stil der Fahrzeug-Plaketten der Website */
.fw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #555;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: .73rem;
    font-weight: 700;
}

/* Einsatzkarte mit rotem Randbalken (wie die Einsatzliste der Website) */
.fw-incident {
    background: #fff;
    border-radius: var(--radius);
    border-left: 4px solid var(--fw-red);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    transition: var(--transition);
}
.fw-incident:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }

.alert { border: none; border-radius: var(--radius); border-left: 4px solid transparent; }
.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: var(--fw-red); }
.alert-warning { border-left-color: #f0ad4e; }
.alert-info    { border-left-color: #0dcaf0; }

/* ============================================================
   Fußzeile
   ============================================================ */
.fms-footer {
    background: var(--fw-dark);
    color: #888;
    border-top: 3px solid var(--fw-red);
    font-size: .88rem;
}
.fms-footer a { color: #888; text-decoration: none; }
.fms-footer a:hover { color: #fff; }