body {
    font-family: Arial, sans-serif;
    padding: 10px;
    padding-top: 70px;
}

.navbar a {
    margin-right: 10px;
}

.fit-video {
    width: 100%;
    object-fit: cover;
}

.alert {
    color: red;
}

.scroll500 {
    max-height: 500px;
    overflow-y: auto;
}

.scroll300 {
    max-height: 300px;
    overflow-y: auto;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word; /* optional */
}

.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

/*
    // was only necessary when button is directly in a <td>. within <div> no problem
button.btn.btn-danger:has(i[class^="fa-"]),
button.btn.btn-danger:has(i[class^="fa-"]):hover,
button.btn.btn-danger:has(i[class^="fa-"]):focus,
button.btn.btn-danger:has(i[class^="fa-"]):active {*/
/* Optik */
/*background-color: #dc3545 !important;
    background-image: none !important;
    border-color: #dc3545 !important;
    color: #fff !important;*/
/* Entspricht d-inline-flex align-items-center justify-content-center */
/*display: inline-flex;
    align-items: center;
    justify-content: center;*/
/* optional: für kompakte Icon-Buttons */
/*padding: 6px;
}*/

a:not([class]),
a:not([class]):hover,
a:not([class]):focus,
.btn-link,
.btn-link:hover,
.btn-link:focus {
    text-decoration: none !important;
    padding: 0 !important;
}

/* ============================= BTN Circle ModulesMonths ============================= */

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}


/* ============================= FLOATING FORM ============================= */

/* Wrapper wie form-floating Input */
.floating-switch-wrapper {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background-color: #fff;
    /* MATCH Bootstrap form-floating height */
    height: calc(3.5rem + 2px); /* = 56px + border */
    padding: 1rem .75rem .5rem .75rem;
    width: 100%; /* <-- dadurch gleich breit wie input/select */
    display: block;
}

    /* Floating label oben */
    .floating-switch-wrapper .floating-label {
        position: absolute;
        top: .25rem;
        left: .75rem;
        font-size: .85rem;
        color: #6c757d;
        pointer-events: none;
        background: #fff;
        padding: 0 .25rem;
    }

    /* Switch Box */
    .floating-switch-wrapper .switch-box {
        display: flex;
        align-items: center;
        height: 2rem;
    }

    /* Wichtig: Switch links ausrichten */
    .floating-switch-wrapper .form-switch.left-switch .form-check-input {
        margin-left: 0 !important; /* überschreibt margin-left: auto von Bootstrap */
        width: 2.5em;
        height: 1.2em;
        margin-top: 0;
    }

/* ============================= SWITCH GNERALLY IN RED WHEN CHECKED ============================= */

.form-switch .form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* #dc3545, also "danger" */
    border-color: var(--bs-danger);
}

/* ============================= SWITCH IN FLOATING FORM ============================= */

/* OFF state → schwarzer Punkt */
.switch-danger:not(:checked) {
    background-color: #fff;
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e") !important;
}

/* ON state → Danger + weißer Punkt (Bootstrap Standard) */
.switch-danger:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e") !important;
}

/* Fokus */
.switch-danger:focus {
    border-color: #dc3545 !important;
    box-shadow: none !important;
}

/* ============================= UPLOAD ============================= */

.file-upload {
    max-width: 400px;
    margin: 0 auto; /* centers horizontally in parent */
}

.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: #f8d7da;
}

    .drop-zone.hover {
        border-color: #0d6efd;
        background-color: #f0f7ff;
    }

.file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-list {
    margin-top: 1rem;
    padding-left: 1.25rem;
}

.progress {
    margin-top: 1rem;
    height: 1.25rem;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #0d6efd;
    color: #fff;
    text-align: center;
    line-height: 1.25rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ============================= table hold first line ============================= */

tr.bordered td {
    border-bottom: 1px solid black;
}

table {
    border-collapse: collapse;
}

.tableFixHead {
    overflow-y: auto;
    height: 600px;
    table-layout: fixed;
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
    }

    .tableFixHead th {
        background: white;
    }

/* ============================= verifcation 6 digits ============================= */

.otp-wrap {
    position: relative;
    display: inline-block;
}

.otp-boxes {
    display: inline-flex;
    gap: 10px; /* mehr Abstand */
    padding: 4px;
}

.otp-box {
    width: 44px; /* größer */
    height: 44px; /* größer */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9aa0a6;
    border-radius: 8px; /* etwas runder */
    background: #f8f9fa;
    font-size: 20px; /* Zahl größer */
    font-weight: 700;
    line-height: 1;
    color: #212529;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.otp-boxes--focus .otp-box {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.25);
}

/* das echte Input liegt unsichtbar darüber */
.otp-overlay-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* unsichtbar */
    border: none;
    background: transparent;
    /* wichtig: weiterhin klick-/fokussierbar */
    cursor: text;
}

/* =========================================================
   Blazor Reconnect Modal – Black Overlay, White Text,
   centered content, reload button ONLY on failed/rejected
   (never on reconnect-show)
   ========================================================= */

/* Modal grundsätzlich ausblenden */
#components-reconnect-modal {
    display: none;
}

    /* Standard: alles aus */
    #components-reconnect-modal .reconnect-show,
    #components-reconnect-modal .reconnect-failed,
    #components-reconnect-modal .reconnect-rejected,
    #components-reconnect-modal .reconnect-reload {
        display: none;
    }

    /* Modal sichtbar, sobald ein State gesetzt ist */
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.85);
        padding: 4rem 2rem;
    }

        /* Textblöcke je nach State */
        #components-reconnect-modal.components-reconnect-show .reconnect-show,
        #components-reconnect-modal.components-reconnect-failed .reconnect-failed,
        #components-reconnect-modal.components-reconnect-rejected .reconnect-rejected {
            display: block;
            color: #fff;
            text-align: center;
            max-width: 42rem;
            width: min(42rem, 100%);
            padding: 1.25rem 1rem;
            margin: 0 auto;
            font-size: 1.1rem;
            line-height: 1.45;
        }

        /* WICHTIG: Reload-Button beim SHOW-State IMMER aus (hart) */
        #components-reconnect-modal.components-reconnect-show .reconnect-reload {
            display: none !important;
        }

        /* Reload-Button NUR bei failed/rejected einblenden */
        #components-reconnect-modal.components-reconnect-failed .reconnect-reload,
        #components-reconnect-modal.components-reconnect-rejected .reconnect-reload {
            display: inline-block !important;
        }

    /* Reload-Link als Bootstrap btn btn-danger (filled) erzwingen + nicht breit */
    #components-reconnect-modal a.btn.btn-danger.reconnect-reload {
        width: auto !important;
        max-width: none !important;
        margin: 0 auto !important;
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }

        /* Hover/Active */
        #components-reconnect-modal a.btn.btn-danger.reconnect-reload:hover {
            background-color: #bb2d3b !important;
            border-color: #b02a37 !important;
        }

        #components-reconnect-modal a.btn.btn-danger.reconnect-reload:active {
            background-color: #b02a37 !important;
            border-color: #a52834 !important;
        }

        /* Fokus */
        #components-reconnect-modal a.btn.btn-danger.reconnect-reload:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.35);
        }