/**
 * @file        SID-2026.css
 * @brief       Corporate-Design-Skin „SID-2026" für alle SID-PHP-Projekte
 * @author      Claude Code / SID
 * @version     1.4.0
 * @date        2026-05-21
 *
 * Farbwerte nach SID-CD (CMYK → HEX):
 *   Blau    100C/35M/0Y/0K   → #00A6FF
 *   Grün     94C/0M/100Y/0K  → #0FFF00
 *   Gelb      0C/35M/90Y/0K  → #FFA61A
 *   Rot       0C/100M/68Y/0K → #FF0052
 *   Schwarz   0C/0M/0Y/100K  → #000000
 *   Grau      0C/0M/0Y/60K   → #666666
 *
 * @changelog
 * - 1.4.0 (2026-05-21): bg-filter-panel (#f5f5f5) für dunklere sichtbare Card-Abgrenzung
 * - 1.3.0 (2026-05-21): form-switch-sm für kleine elegante Toggle-Schalter (2em × 1.25em)
 * - 1.2.0 (2026-05-21): Form-Elemente – form-check-input und form-switch mit SID-Blau Akzenten
 * - 1.1.0 (2026-04-10): Footer-Textfarbe auf hell (#cccccc) geändert
 * - 1.0.0 (2026-02-18): Initiale Version
 */

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --sid-blue:    #00A6FF;
    --sid-green:   #0FFF00;
    --sid-yellow:  #FFA61A;
    --sid-red:     #FF0052;
    --sid-black:   #000000;
    --sid-gray:    #666666;
    --sid-white:   #FFFFFF;

    /* Bootstrap-Overrides */
    --bs-primary:        var(--sid-blue);
    --bs-primary-rgb:    0, 166, 255;
    --bs-secondary:      var(--sid-gray);
    --bs-secondary-rgb:  102, 102, 102;
    --bs-success:        var(--sid-green);
    --bs-warning:        var(--sid-yellow);
    --bs-danger:         var(--sid-red);
    --bs-dark:           var(--sid-black);
    --bs-body-bg:        var(--sid-white);
    --bs-body-color:     var(--sid-black);
    --bs-link-color:     var(--sid-blue);
    --bs-link-hover-color: #0080c5;
}

/* ─── Basis ──────────────────────────────────────────────────────────────── */
body {
    background-color: var(--sid-white);
    color: var(--sid-black);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.navbar.sid-navbar {
    background-color: var(--sid-blue);
    border-bottom: 3px solid #0080c5;
}

.navbar.sid-navbar .navbar-brand,
.navbar.sid-navbar .nav-link {
    color: var(--sid-white) !important;
}

.navbar.sid-navbar .nav-link:hover {
    color: var(--sid-yellow) !important;
}

/* ─── Logo ───────────────────────────────────────────────────────────────── */
.sid-logo {
    max-height: 40px;
    width: auto;
}

/* ─── Überschriften ──────────────────────────────────────────────────────── */
h1, h2, h3 {
    color: var(--sid-blue);
}

h4, h5, h6 {
    color: var(--sid-gray);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--sid-blue);
    border-color: var(--sid-blue);
    color: var(--sid-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0080c5;
    border-color: #0080c5;
}

.btn-danger {
    background-color: var(--sid-red);
    border-color: var(--sid-red);
}

.btn-warning {
    background-color: var(--sid-yellow);
    border-color: var(--sid-yellow);
    color: var(--sid-black);
}

.btn-success {
    background-color: #0da800;
    border-color: #0da800;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table thead {
    background-color: var(--sid-blue);
    color: var(--sid-white);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 166, 255, 0.07);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card-header {
    background-color: var(--sid-blue);
    color: var(--sid-white);
    font-weight: bold;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer.sid-footer {
    background-color: var(--sid-black);
    color: #cccccc;
    padding: 1rem 0;
    font-size: 0.85rem;
}

footer.sid-footer small,
footer.sid-footer .text-muted,
footer.sid-footer .text-white-50 {
    color: #cccccc !important;
}

footer.sid-footer a {
    color: var(--sid-blue);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert-primary {
    background-color: rgba(0, 166, 255, 0.15);
    border-color: var(--sid-blue);
    color: #004f7a;
}

/* ─── Utility-Klassen ────────────────────────────────────────────────────── */
.text-sid-blue   { color: var(--sid-blue)   !important; }
.text-sid-green  { color: var(--sid-green)  !important; }
.text-sid-yellow { color: var(--sid-yellow) !important; }
.text-sid-red    { color: var(--sid-red)    !important; }
.text-sid-gray   { color: var(--sid-gray)   !important; }

.bg-sid-blue   { background-color: var(--sid-blue)   !important; color: #fff !important; }
.bg-sid-green  { background-color: var(--sid-green)  !important; color: #000 !important; }
.bg-sid-yellow { background-color: var(--sid-yellow) !important; color: #000 !important; }
.bg-sid-red    { background-color: var(--sid-red)    !important; color: #fff !important; }
.bg-sid-gray   { background-color: var(--sid-gray)   !important; color: #fff !important; }

.border-sid-blue { border-color: var(--sid-blue) !important; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.bg-filter-panel {
    background-color: #f5f5f5;
}

/* ─── Form-Elemente ──────────────────────────────────────────────────────── */
.form-check-input {
    border-color: var(--sid-gray);
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--sid-blue);
    border-color: var(--sid-blue);
}

.form-check-input:focus {
    border-color: var(--sid-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 166, 255, 0.25);
}

/* Toggle-Switches standard */
.form-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
}

.form-switch .form-check-label {
    cursor: pointer;
    user-select: none;
    padding-left: 0.5rem;
    font-size: 0.95rem;
}

/* Toggle-Switches klein */
.form-switch-sm .form-check-input {
    width: 2em;
    height: 1.25em;
    border-radius: 0.625em;
}

.form-switch-sm .form-check-label {
    cursor: pointer;
    user-select: none;
    padding-left: 0.4rem;
    font-size: 0.9rem;
}