/* ===========================
   Page canvas
   =========================== */

/* Every page paints its gradient on .admin-bg / .participant-bg, plain blocks whose width
   is the viewport. If anything overflows horizontally the document scrolls past their
   right edge, and without a background on the root that strip is the browser's white
   canvas. Painting the same dark base here keeps it dark whatever overflows. */
html {
    background-color: #0f172a;
}

html:has(.participant-bg) {
    background-color: #1a1a2e;
}

/* Page header: a title on the left, action buttons on the right. Below about 390px the
   two no longer fit side by side, and because .d-flex does not wrap the document grows
   wider than the viewport — a table then never gets to scroll inside .table-responsive,
   the page scrolls instead, and the strip beside .admin-bg / .participant-bg shows
   through. Let the header stack.

   Direct children only: the same utility combination is used for compact rows inside
   cards (the dashboard's progress-bar labels, for one), which must keep their two halves
   on one line. */
@media (max-width: 767.98px) {
    .admin-content > .d-flex.justify-content-between,
    .participant-content > .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
}

/* ===========================
   TurnierRegie Participant Theme
   =========================== */

/* Dark gradient background */
.participant-bg {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    position: relative;
    color: #e2e8f0;
    /* The decorative blobs below sit at left: -20% / right: -10%, so on a narrow phone
       (~333px and below) they reach past the right edge and give the document a phantom
       horizontal scroll. Clip rather than hide: clip does not make this a scroll
       container, so sticky positioning inside keeps working. */
    overflow-x: clip;
}

.participant-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 400px;
    height: 400px;
    background: rgba(139, 69, 19, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

.participant-bg::after {
    content: '';
    position: absolute;
    right: -10%;
    width: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

/* Glassmorphic card */
.glass-card {
    backdrop-filter: blur(10px);
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    color: #e2e8f0;
}

.glass-card-header {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
}

.glass-card-header h3,
.glass-card-header h4,
.glass-card-header h5 {
    margin-bottom: 0;
}

.glass-card .card-body {
    padding: 1.5rem;
}

.glass-card .card-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    padding: 1rem 1.25rem;
}

/* Purple accent button */
.btn-purple {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.5);
    color: white;
}

/* Dark-mode form controls */
.participant-bg .form-control,
.participant-bg .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.participant-bg .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.participant-bg .form-control:focus,
.participant-bg .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #7c3aed;
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
    color: #e2e8f0;
}

.participant-bg .form-check-label {
    color: #cbd5e1;
}

.participant-bg .form-check-input {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.participant-bg .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

.participant-bg .form-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.participant-bg .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark-mode alerts */
.participant-bg .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.participant-bg .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.participant-bg .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.participant-bg .alert-warning {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde68a;
}

/* Dark-mode list groups */
.participant-bg .list-group-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

/* Dark-mode badge overrides */
.participant-bg .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

.participant-bg .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===========================
   Sidebar (desktop)
   =========================== */
.participant-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    padding: 1.5rem 0;
}

.sidebar-brand {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}

.sidebar-brand h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
}

.sidebar-brand small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.sidebar-user {
    margin: 0 1rem 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user .user-name {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
}

.sidebar-user .user-email {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    padding: 0;
    list-style: none;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav li a:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav li a.active {
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.1);
    border-left-color: #7c3aed;
}

.sidebar-nav li a i {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
}

.sidebar-feedback {
    padding: 0.75rem 1.25rem 0;
    margin-top: auto;
}

.sidebar-feedback a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.sidebar-feedback a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-logout {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logout a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.sidebar-logout a:hover {
    color: #f87171;
}

/* Main content area offset for sidebar */
.participant-content {
    margin-left: 250px;
    padding: 2rem;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===========================
   Bottom tab bar (mobile)
   =========================== */
.participant-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
}

.participant-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.65rem;
    padding: 0.25rem 0.25rem;
    transition: color 0.2s ease;
    /* Equal-width tabs that may shrink, so adding a tab never wraps the bar. */
    flex: 1 1 0;
    min-width: 0;
}

.participant-bottom-nav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-bottom-nav a i {
    font-size: 1.25rem;
}

.participant-bottom-nav a.active {
    color: #c4b5fd;
}

.participant-bottom-nav a:hover {
    color: #e2e8f0;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 767.98px) {
    .participant-sidebar {
        display: none !important;
    }

    .participant-content {
        margin-left: 0;
        padding: 1rem;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 768px) {
    .participant-bottom-nav {
        display: none !important;
    }
}

/* ===========================
   Auth layout (centered card)
   =========================== */
.auth-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

/* Inner card in dashboard for nested content */
.glass-card-inner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.glass-card-inner .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border-radius: 12px 12px 0 0;
}

.glass-card-inner .card-body {
    color: #e2e8f0;
}

/* Code display box */
.code-display {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #c4b5fd;
}

/* Card with colored accent header (for partner search, etc.) */
.glass-card-accent-info .glass-card-header {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.glass-card-accent-warning .glass-card-header {
    background: linear-gradient(135deg, #a16207, #eab308);
    color: #1a1a2e;
}

.glass-card-accent-success .glass-card-header {
    background: linear-gradient(135deg, #166534, #22c55e);
}

/* hr in dark mode */
.participant-bg hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Links in dark mode */
.participant-bg a:not(.btn):not(.sidebar-nav a):not(.sidebar-feedback a):not(.sidebar-logout a):not(.participant-bottom-nav a) {
    color: #a78bfa;
}

.participant-bg a:not(.btn):hover {
    color: #c4b5fd;
}

/* ===========================
   TurnierRegie Admin Theme
   =========================== */

/* Dark slate gradient background */
.admin-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
    position: relative;
    color: #e2e8f0;
    /* The decorative blobs below sit at left: -20% / right: -10%, so on a narrow phone
       (~333px and below) they reach past the right edge and give the document a phantom
       horizontal scroll. Clip rather than hide: clip does not make this a scroll
       container, so sticky positioning inside keeps working. */
    overflow-x: clip;
}

.admin-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 400px;
    height: 400px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.admin-bg::after {
    content: '';
    position: absolute;
    right: -10%;
    width: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
}

/* Emerald glass card header */
.admin-bg .glass-card-header {
    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
}

/* Control sitting in a coloured card header. The gradient above ends bright
   (#10b981), where white text drops to ~2.5:1 — fine on the dark left edge
   where the title sits, unreadable on the right. The chip gives the control its
   own dark ground so it stays legible wherever it lands in the gradient. */
.glass-card-header .header-control {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.75rem;
    color: #e2e8f0;
}

.glass-card-header .header-control.form-switch {
    padding-left: 3rem;
}

/* Emerald accent button */
.btn-admin {
    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 95, 70, 0.5);
    color: white;
}

/* Compact stat tile (dashboard) — whole tile is the link, no extra button */
.stat-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 0.75rem;
    text-decoration: none;
    color: #e2e8f0;
    transition: all 0.3s ease;
}

.stat-tile:hover,
.stat-tile:focus {
    color: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.45);
}

.stat-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 12px;
    font-size: 1.125rem;
    color: white;
    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
}

.stat-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.stat-tile-value {
    font-size: 1.375rem;
    font-weight: 700;
}

/* Labels wrap rather than truncate — no information is lost on narrow screens */
.stat-tile-label {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.7);
    overflow-wrap: anywhere;
}

@media (min-width: 992px) {
    .stat-tile {
        padding: 1rem 1.25rem;
        gap: 1rem;
    }

    .stat-tile-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }

    .stat-tile-value {
        font-size: 2rem;
    }

    .stat-tile-label {
        font-size: 0.875rem;
    }
}

/* Dark-mode form controls (admin) */
.admin-bg .form-control,
.admin-bg .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.admin-bg .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.admin-bg .form-control:focus,
.admin-bg .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #10b981;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
    color: #e2e8f0;
}

.admin-bg .form-check-label {
    color: #cbd5e1;
}

.admin-bg .form-check-input {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.admin-bg .form-check-input:checked {
    background-color: #10b981;
    border-color: #10b981;
}

/* Check-in desk: these toggles get tapped on a phone while someone waits, so the whole row
   is the target instead of the 1em box Bootstrap ships. */
.admin-bg .checkin-partner-toggle {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem 0.6rem 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
}

.admin-bg .checkin-partner-toggle .form-check-input {
    width: 1.35em;
    height: 1.35em;
    margin-left: -1.75rem;
}

.admin-bg .checkin-partner-toggle .form-check-label {
    display: block;
    cursor: pointer;
}

.admin-bg .checkin-partner-toggle:has(.form-check-input:checked) {
    border-color: #10b981;
    background-color: rgba(16, 185, 129, 0.12);
}

.admin-bg .form-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.admin-bg .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

.admin-bg .form-label {
    color: #cbd5e1;
}

/* Dark-mode alerts (admin) */
.admin-bg .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.admin-bg .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.admin-bg .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.admin-bg .alert-warning {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde68a;
}

/* Dark-mode list groups (admin) */
.admin-bg .list-group-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

/* Kategorie "C und höher" – Bootstrap kennt keine Orange-Kontextklasse */
.badge.bg-category-c-and-above {
    background-color: var(--bs-orange, #fd7e14);
}

/* Dark-mode badge overrides (admin) */
.admin-bg .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

.admin-bg .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dark-mode tables (admin) */
.admin-bg .table {
    color: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: #e2e8f0;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.1);
}

.admin-bg .table th {
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

.admin-bg .table td {
    border-color: rgba(255, 255, 255, 0.08);
}

/* hr in dark mode (admin) */
.admin-bg hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Links in dark mode (admin) */
.admin-bg a:not(.btn):not(.sidebar-nav a):not(.sidebar-feedback a):not(.sidebar-logout a):not(.admin-topbar a) {
    color: #6ee7b7;
}

.admin-bg a:not(.btn):hover {
    color: #a7f3d0;
}

/* Input group (admin) */
.admin-bg .input-group-text {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

/* Progress bar (admin) */
.admin-bg .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Code display (admin) */
.admin-bg code {
    color: #6ee7b7;
}

/* Multi-line code block (admin) — darker than the glass card it sits in, so the
   mint `code` colour above keeps its contrast. A light background here (e.g.
   Bootstrap's .bg-body-secondary) makes the text unreadable. */
.admin-bg pre.code-block {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e2e8f0;
    overflow-x: auto;
}

/* ===========================
   Admin Sidebar (desktop)
   =========================== */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    padding: 1.5rem 0;
    overflow-y: auto;
}

.admin-sidebar .sidebar-brand {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}

.admin-sidebar .sidebar-brand h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
}

.admin-sidebar .sidebar-brand small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.admin-sidebar .sidebar-user {
    margin: 0 1rem 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar .sidebar-user .user-name {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
}

.admin-sidebar .sidebar-user .user-email {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar .sidebar-nav {
    flex: 1;
    padding: 0;
    list-style: none;
}

.admin-sidebar .sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.admin-sidebar .sidebar-nav li a:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.admin-sidebar .sidebar-nav li a.active {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.1);
    border-left-color: #10b981;
}

.admin-sidebar .sidebar-nav li a i {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
}

.sidebar-section-label {
    padding: 0.75rem 1.25rem 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.admin-sidebar .sidebar-feedback {
    padding: 0.75rem 1.25rem 0;
    margin-top: auto;
}

.admin-sidebar .sidebar-logout {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar .sidebar-logout a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.admin-sidebar .sidebar-logout a:hover {
    color: #f87171;
}

/* Admin content area offset */
.admin-content {
    margin-left: 250px;
    padding: 2rem;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===========================
   Admin Mobile Topbar
   =========================== */
.admin-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(15, 23, 42, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1050;
}

.admin-topbar .topbar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.admin-topbar .topbar-toggler {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
}

.admin-topbar .topbar-toggler:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Admin offcanvas (mobile nav) */
.admin-bg .offcanvas {
    background: rgba(15, 23, 42, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.admin-bg .offcanvas .btn-close {
    filter: invert(1);
}

/* Modal dark styling (admin) */
.admin-bg .modal-content {
    background-color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.admin-bg .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.admin-bg .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.admin-bg .modal-header .btn-close {
    filter: invert(1);
}

/* ===========================
   Admin Responsive
   =========================== */
@media (max-width: 767.98px) {
    .admin-sidebar {
        display: none !important;
    }

    .admin-content {
        margin-left: 0;
        padding: 1rem;
        padding-top: calc(56px + 1rem);
    }
}

@media (min-width: 768px) {
    .admin-topbar {
        display: none !important;
    }
}

/* ===========================
   Admin Filter Bar
   =========================== */
.admin-filter-bar .form-control,
.admin-filter-bar .form-select {
    min-width: 150px;
}

.admin-filter-bar .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}

.admin-filter-bar .btn-outline-secondary:hover {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ===========================
   Admin Sortable Table Headers
   =========================== */
.admin-bg .table th a {
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
}

.admin-bg .table th a:hover {
    color: #6ee7b7;
}

/* ===========================
   Admin Pagination
   =========================== */
.admin-pagination .pagination {
    margin-bottom: 0;
}

.admin-pagination .page-link {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.admin-pagination .page-link:hover {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.admin-pagination .page-item.active .page-link {
    background-color: #10b981;
    border-color: #10b981;
    color: #fff;
}

.admin-pagination .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.25);
}

/* ===========================
   Legal footer + Impressum page
   =========================== */
.legal-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    opacity: 0.7;
    position: relative;
    z-index: 1;
}

.legal-footer:hover {
    opacity: 1;
}

/* Markdown rendered from the impressum_content setting */
.legal-content h1,
.legal-content h2,
.legal-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-content > :first-child {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.legal-content hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Admin Meldeliste (registration matrix)
   ============================================ */

/*
   Not .table-responsive: its overflow-x makes the computed overflow-y non-visible, which
   turns the wrapper into the containing block for `position: sticky` — and without a
   bounded height the header would then never actually stick. A wrapper that scrolls on
   both axes with a max-height makes header and first columns stick inside it.
*/
.meldeliste-scroll {
    overflow: auto;
    max-height: calc(100vh - 18rem);
    border-radius: 8px;
}

.meldeliste-filter {
    max-width: 24rem;
}

.meldeliste-table {
    /* Collapsed borders are dropped on sticky cells in every engine. */
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
}

.meldeliste-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Opaque: the solid form of .glass-card's rgba(30, 41, 59, 0.85). A translucent
       background would let the scrolled-under rows bleed through. */
    background-color: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    vertical-align: bottom;
}

.meldeliste-table td,
.meldeliste-table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Striping is impossible here: a striped <tr> background would show through the opaque
   sticky columns. Hover gives the same row-tracking help without that conflict. */
.meldeliste-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

.meldeliste-cell {
    text-align: center;
}

/*
   Frozen identity columns. Nr. plus the leading name stay pinned at every width, because a
   row scrolled sideways has to stay identifiable — and Nr. alone cannot do that: it is "–"
   for every couple that has not been assigned a number yet. The second name column joins
   the frozen block only from md up, where there is room for it.

   Fixed widths are what keep the `left` offsets constant.
*/
.meldeliste-table .meldeliste-sticky-1,
.meldeliste-table .meldeliste-sticky-2 {
    position: sticky;
    z-index: 1;
    background-color: #1e293b;
}

.meldeliste-table thead .meldeliste-sticky-1,
.meldeliste-table thead .meldeliste-sticky-2,
.meldeliste-table thead .meldeliste-sticky-3 {
    /* Corner cells must sit above both the sticky header and the sticky columns. */
    z-index: 3;
}

.meldeliste-table .meldeliste-sticky-1 {
    left: 0;
    min-width: 3.25rem;
    max-width: 3.25rem;
}

.meldeliste-table .meldeliste-sticky-2 {
    left: 3.25rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    /* Long names are cut rather than allowed to widen the frozen block. */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Below md this is the edge of the frozen block. */
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
    .meldeliste-table .meldeliste-sticky-3 {
        position: sticky;
        z-index: 1;
        background-color: #1e293b;
    }

    .meldeliste-table .meldeliste-sticky-1 {
        min-width: 4rem;
        max-width: 4rem;
    }

    .meldeliste-table .meldeliste-sticky-2 {
        left: 4rem;
        min-width: 11rem;
        max-width: 11rem;
        box-shadow: none;
    }

    .meldeliste-table .meldeliste-sticky-3 {
        left: 15rem;
        min-width: 11rem;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Marks the edge of the frozen block — which column that is differs between the
       grassroots (three) and Jack'n'Jill (two) layouts. Declared after the sticky-2 reset
       above so it still wins for Jack'n'Jill, where sticky-2 *is* the last frozen column. */
    .meldeliste-table .meldeliste-sticky-last {
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.15);
    }
}

/* Traffic lights in the Meldeliste status column: check-in · fee · number. */
.meldeliste-status-group {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.meldeliste-status {
    font-size: 0.95rem;
    line-height: 1;
}

/* "Nothing to collect" must not read as a state that still needs work. */
.meldeliste-status-na {
    opacity: 0.35;
}

/*
   The whole status group is one link to the check-in desk. The icons keep their own
   traffic-light colours (Bootstrap's text-* utilities are !important), so the link only
   has to supply the affordance.
*/
.meldeliste-status-link {
    display: inline-block;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.meldeliste-status-link:hover,
.meldeliste-status-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
}