/* ===============================
   SWITCH (User + Card Center)
   =============================== */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: #28a745;
}

.switch input:checked + .slider:before {
    transform: translateX(18px);
}

/* ===============================
   TICKETS – DETAILS ROW
   =============================== */
/* Kein Hover auf den Detail-Zeilen */
.table-hover tbody tr.ticket-details:hover {
    background-color: inherit !important;
}

/* Text im ausgeklappten Bereich weiß */
tr.ticket-details td,
tr.ticket-details td * {
    color: #fff !important;
}

/* Formularbereiche weiterhin dunkel */
tr.ticket-details textarea,
tr.ticket-details input,
tr.ticket-details select {
    color: #000 !important;
    background-color: #fff !important;
}

tr.ticket-details textarea::placeholder,
tr.ticket-details input::placeholder {
    color: #555 !important;
}

/* ===============================
   Mobile-Optimierung für Tabellen
   (inkl. gestapelter Ansicht .table-stack)
   =============================== */

@media (max-width: 767.98px) {
    /* Allgemeine Verkleinerung für alle Tabellen auf Mobile */
    .table.table-hover th,
    .table.table-hover td {
        padding: 0.35rem 0.5rem;
        font-size: 0.85rem;
        vertical-align: middle;
    }

    .vote-expired-btn {
        margin-left: 4px;
        margin-bottom: 8px;
    }

    .table td code,
    .table td .breakable {
        white-space: normal;
        word-break: break-all;
    }

    .table .btn.btn-sm {
        padding: 0.15rem 0.45rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .table .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.5em;
        white-space: nowrap;
    }

    /* --- Gestapelte Tabellen (User-Center, Card-Center, Tickets, Own-Cards) --- */
    .table-stack thead {
        display: none;
    }

    .table-stack tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        padding: 0.5rem 0.75rem;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .table-stack tbody tr.table-row-not-active {
        background-color: rgba(64, 0, 0, 0.6);
    }

    /* WICHTIG: Label oben, Inhalt darunter */
    .table-stack tbody tr td {
        display: flex;
        flex-direction: column; /* untereinander statt nebeneinander */
        align-items: flex-start;
        padding: 0.25rem 0;
        border-top: 0;
    }

    .table-stack tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        opacity: 0.8;
        text-align: left;
        margin-right: 0; /* kein horizontaler Abstand nötig */
        margin-bottom: 0.15rem; /* kleiner Abstand unter dem Label */
    }

    /* Letzte Spalte (Aktion) – weiterhin linksbündig */
    .table-stack tbody tr td:last-child {
        justify-content: flex-start;
    }

    .table-stack tbody tr td[data-label="Aktion"]::before {
        margin-right: 0.5rem;
    }

    /* Lange Inhalte explizit umbrechen */
    .table-stack .breakable {
        word-break: break-all;
    }

    /* =========
       SPEZIAL: Ticket-Details-Row innerhalb .table-stack
       ========= */
    /* Detail-Zeile nicht wie „Karte“ behandeln */
    .table-stack tbody tr.ticket-details {
        border: none;
        padding: 0;
        background: transparent;
        margin-bottom: 0.75rem;
    }

    .table-stack tbody tr.ticket-details td {
        display: block;
        padding: 0.5rem 0.75rem;
        border-top: none;
    }

    .table-stack tbody tr.ticket-details td::before {
        content: none;
    }

    /* Horizontalen Overflow im Detail-Row verhindern */
    tr.ticket-details td {
        overflow-x: hidden;
    }

    /* Bootstrap-Form-Row-Margins neutralisieren */
    tr.ticket-details .form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Innenabstände der Spalten etwas reduzieren,
       damit auch wirklich nichts raussteht */
    tr.ticket-details .form-row .form-group[class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}