/*
====================================================================
  Zentrale Custom-Styles für das Webportal
  ---------------------------------------------------------------
  Hinweise zur Nutzung:
  - Jeder Abschnitt ist mit einem Kommentar versehen, der die zugehörige Seite und Funktion beschreibt.
  - Änderungen an diesen Styles wirken sich auf alle Seiten aus, die das zentrale head.php nutzen.
  - Bitte bei neuen Layouts oder Seiten die Kommentare entsprechend ergänzen!
====================================================================
*/

/* ===================== GLOBAL (alle Seiten) ===================== */

.container-fluid {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.card,
.alert {
    margin-left: 0;
    margin-right: 0;
    /* padding links/rechts wieder Standard */
    padding-left: 0;
    padding-right: 0;
}

/* Einheitliches Padding für alle Alert-Boxen (Hinweis, Fehler, etc.) */
.alert {
    padding: 16px 20px;
}

body {
    margin: 0;
    padding: 0px;
}

/* ===================== FORMULARE & TABELLEN (global) ===================== */

table td input.form-control,
table td select.form-select {
    font-size: 0.85rem !important;
    height: 31px !important;
    padding: 0.2rem 0.5rem !important;
}

h2 {
    font-weight: 500;
}

.table td,
.table th {
    font-size: 0.90rem;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: nowrap;
    word-break: break-word;
    padding-left: 0.7rem;
    padding-right: 0.4rem;
    border-color: #e0e0e0;
    height: 32px;
}

.btn {
    padding: 3px 10px;
}

.pagination {
    margin-bottom: 0;
}

/* ===================== PROFIL, ADMIN, SUPPORT, MELDUNGEN ===================== */
/* Tabellen- und Layout-Styles für Profil bearbeiten, Admin-Konsole, Support, Meldungen */
.table thead th.id-col {
    width: 35px;
}

/* z.B. für ID-Spalten */
.table thead th.name-col {
    width: 250px;
}

/* z.B. für Name-Spalten */
.table thead th.link-col {
    width: auto;
}

.table thead th.group-col {
    width: 70px;
}

.table thead th.position-col {
    width: 70px;
}

.table thead th.status-col {
    width: 100px;
}

.table thead th.action-col {
    width: 170px;
}

.table thead th.icon-col {
    width: 40px;
}

.action-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.footer {
    padding: 10px;
    margin-top: 20px;
    color: #666;
    font-size: 0.9em;
}

/* ===================== MELDUNGEN (meldungen.php) ===================== */
.table th:nth-child(2),
.table td:nth-child(2) {
    min-width: 360px !important;
    width: 360px !important;
}

.table th {
    font-weight: 500;
    letter-spacing: 0.01em;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}

.table-hover tbody tr:hover {
    background: #fffbe6;
}

.table-bordered {
    border-radius: 0.5rem;
    overflow: hidden;
}

.action-btns .btn {
    min-width: 32px;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
}

.action-btns .btn i {
    font-size: 1.1rem;
}

.empty-table-row {
    text-align: center;
    color: #888;
    font-style: italic;
    background: #f8f9fa;
}


/* Toast-Styles für Meldungen und globale Toasts */
.toast-center-animate,
#meldungenToast.toast-center-animate {
    box-shadow: 0 6px 24px rgba(60, 60, 60, 0.13), 0 1.5px 6px rgba(0, 0, 0, 0.08);
    border-radius: 0.85rem;
    background: #1976d2;
    color: #111;
    border: 1px solid #1565c0;
    opacity: 0;
    pointer-events: none;
    animation: toast-fadein-up 0.7s cubic-bezier(.23, 1.02, .32, 1) forwards;
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

.toast-blue,
#meldungenToast.toast-blue {
    background: #1976d2 !important;
    color: #111 !important;
    border: 1px solid #1565c0 !important;
}

.toast-center-animate.show,
#meldungenToast.show {
    opacity: 1 !important;
    pointer-events: auto;
}

@keyframes toast-fadein-up {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-body,
#meldungenToast .toast-body {
    font-size: 1.01rem;
    font-weight: 400;
    padding: 0.65rem 1.1rem 0.65rem 1.0rem;
    letter-spacing: 0.01em;
    line-height: 1.45;
}

#meldungenToast .btn-close,
.small-close-btn {
    filter: grayscale(0.7) brightness(0.8);
    opacity: 0.6;
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem;
    min-height: 1.2rem;
    font-size: 0.95rem;
    margin-top: 2px;
}

#meldungenToast .btn-close:focus {
    box-shadow: none;
    outline: none;
}

#meldungenToast .d-flex.align-items-center.justify-content-between {
    gap: 0.5rem;
}

#meldungenToast .btn-close,
.small-close-btn {
    margin-left: auto;
    margin-right: 0;
}

/* ===================== STARTSEITE & WACHEN ===================== */
/* Layout für Button-Container (startseite.php, wachen.php) */
.button-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.button-group {
    flex: 1 1 calc(20% - 10px);
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    min-width: 220px;
    max-width: 100%;
    margin-bottom: 10px;
}

.button-group h6 {
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    color: #555;
    background: #ffc107;
    color: #000;
    padding: 0.5rem;
    border-radius: 0;
    font-weight: 500;
}

.button-group .btn {
    width: 100%;
    margin-bottom: 6px;
}

.btn-abmelden {
    padding: 3px 10px;
}

/* ===================== WACHEN: Statusanzeige für Fahrzeuge ===================== */
.fahrzeug-status-einheit {
    min-height: 38px;
    height: 38px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    background: var(--fz-bg, #fff);
    transition: background 0.2s;
}

.fahrzeug-status-einheit:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    background: #f8f9fa;
}

.fahrzeug-status-rahmen {
    border: 1.5px solid #888;
    border-radius: 0.45rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #fff;
    margin-bottom: 2px;
    min-height: 38px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.status-value {
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
    border-radius: 7px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    font-size: 1.15rem !important;
    font-weight: 500;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: #888 !important;
    padding: 0 !important;
    line-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    background-clip: padding-box;
    text-align: center;
    background: var(--fz-bg, #fff);
    color: var(--fz-color, #000);
}

.status-dropdown {
    position: relative !important;
    z-index: 90 !important;
    margin-left: 8px;
    margin-right: 0;
}

.status-dropdown .dropdown-menu {
    min-width: 32px;
    left: 0;
    right: auto;
    position: absolute !important;
    z-index: 90 !important;
    top: 36px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
    background: #fff;
    display: block;
}

.status-dropdown.position-relative {
    flex: 0 0 40px !important;
}

.fahrzeug-label {
    font-weight: 500;
    color: #222;
    background: none;
    font-size: 0.98rem !important;
    padding: 0.35rem 0.7rem !important;
    line-height: 1.2;
    flex-grow: 1;
    text-align: left;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-uhrzeit {
    font-size: 0.93rem;
    min-width: 54px;
    text-align: right;
    padding-right: 12px;
    margin-left: 8px;
}