/* DartFan Game Center - allgemeines Theme
   Wird schrittweise von Profil/Spielerbereich und später weiteren Seiten genutzt. */

:root,
html[data-theme="light"] {
    --df-bg: #f6f8fa;
    --df-card: #ffffff;
    --df-section: #fbfcfe;
    --df-section-2: #ffffff;
    --df-text: #223b5a;
    --df-heading: #223b5a;
    --df-muted: #6f7f90;
    --df-muted-2: #4a5a6a;
    --df-label: #324A5F;
    --df-line: #e7edf3;
    --df-line-2: #d7dde5;
    --df-blue: #007acc;
    --df-blue-dark: #005f9e;
    --df-secondary: #666666;
    --df-secondary-hover: #555555;
    --df-input: #ffffff;
    --df-input-readonly: #eef2f6;
    --df-input-readonly-text: #5d6976;
    --df-pill-bg: #fbfcfe;
    --df-pill-text: #3c4c5d;
    --df-photo-bg: #eef2f7;
    --df-ok-bg: #e9f7ee;
    --df-ok-fg: #1d8f3a;
    --df-ok-line: #ccebd6;
    --df-err-bg: #fdecec;
    --df-err-fg: #b3261e;
    --df-err-line: #f5bcbc;
    --df-warn-bg: #fff3d6;
    --df-warn-fg: #8a5a00;
    --df-warn-line: #ffe5a3;
    --df-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    --df-focus: #fff6df;
    color-scheme: light;
}

html[data-theme="dark"] {
    --df-bg: #0f1318;
    --df-card: #171d24;
    --df-section: #121820;
    --df-section-2: #10161d;
    --df-text: #e8eef5;
    --df-heading: #f4f8fb;
    --df-muted: #a9b5c2;
    --df-muted-2: #b5c0cc;
    --df-label: #9fb7cf;
    --df-line: #2a3440;
    --df-line-2: #354454;
    --df-blue: #007acc;
    --df-blue-dark: #005f9e;
    --df-secondary: #334155;
    --df-secondary-hover: #475569;
    --df-input: #0f151c;
    --df-input-readonly: #111821;
    --df-input-readonly-text: #aeb8c4;
    --df-pill-bg: #10161d;
    --df-pill-text: #d8e2eb;
    --df-photo-bg: #111821;
    --df-ok-bg: #102418;
    --df-ok-fg: #7ee08b;
    --df-ok-line: #2b6b3c;
    --df-err-bg: #2a1315;
    --df-err-fg: #ff8a8a;
    --df-err-line: #6b2b31;
    --df-warn-bg: #3d3013;
    --df-warn-fg: #ffd166;
    --df-warn-line: #6b531a;
    --df-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    --df-focus: rgba(255, 209, 102, .18);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --df-bg: #0f1318;
        --df-card: #171d24;
        --df-section: #121820;
        --df-section-2: #10161d;
        --df-text: #e8eef5;
        --df-heading: #f4f8fb;
        --df-muted: #a9b5c2;
        --df-muted-2: #b5c0cc;
        --df-label: #9fb7cf;
        --df-line: #2a3440;
        --df-line-2: #354454;
        --df-blue: #007acc;
        --df-blue-dark: #005f9e;
        --df-secondary: #334155;
        --df-secondary-hover: #475569;
        --df-input: #0f151c;
        --df-input-readonly: #111821;
        --df-input-readonly-text: #aeb8c4;
        --df-pill-bg: #10161d;
        --df-pill-text: #d8e2eb;
        --df-photo-bg: #111821;
        --df-ok-bg: #102418;
        --df-ok-fg: #7ee08b;
        --df-ok-line: #2b6b3c;
        --df-err-bg: #2a1315;
        --df-err-fg: #ff8a8a;
        --df-err-line: #6b2b31;
        --df-warn-bg: #3d3013;
        --df-warn-fg: #ffd166;
        --df-warn-line: #6b531a;
        --df-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        --df-focus: rgba(255, 209, 102, .18);
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --df-bg: #f6f8fa;
        --df-card: #ffffff;
        --df-section: #fbfcfe;
        --df-section-2: #ffffff;
        --df-text: #223b5a;
        --df-heading: #223b5a;
        --df-muted: #6f7f90;
        --df-muted-2: #4a5a6a;
        --df-label: #324A5F;
        --df-line: #e7edf3;
        --df-line-2: #d7dde5;
        --df-blue: #007acc;
        --df-blue-dark: #005f9e;
        --df-secondary: #666666;
        --df-secondary-hover: #555555;
        --df-input: #ffffff;
        --df-input-readonly: #eef2f6;
        --df-input-readonly-text: #5d6976;
        --df-pill-bg: #fbfcfe;
        --df-pill-text: #3c4c5d;
        --df-photo-bg: #eef2f7;
        --df-ok-bg: #e9f7ee;
        --df-ok-fg: #1d8f3a;
        --df-ok-line: #ccebd6;
        --df-err-bg: #fdecec;
        --df-err-fg: #b3261e;
        --df-err-line: #f5bcbc;
        --df-warn-bg: #fff3d6;
        --df-warn-fg: #8a5a00;
        --df-warn-line: #ffe5a3;
        --df-shadow: 0 4px 18px rgba(0, 0, 0, .06);
        --df-focus: #fff6df;
        color-scheme: light;
    }
}


/* Allgemeine Spielerbereich-Basis -------------------------------------- */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="system"] {
    --bg: var(--df-bg);
    --card: var(--df-card);
    --border: var(--df-line);
    --text: var(--df-text);
    --muted: var(--df-muted);
    --primary: var(--df-blue);
    --primary-soft: var(--df-pill-bg);
    --ok-bg: var(--df-ok-bg);
    --ok-text: var(--df-ok-fg);
    --warn-bg: var(--df-warn-bg);
    --warn-text: var(--df-warn-fg);
    --bad-bg: var(--df-err-bg);
    --bad-text: var(--df-err-fg);
    --danger-bg: var(--df-err-bg);
    --danger-text: var(--df-err-fg);
    --info-bg: var(--df-pill-bg);
    --info-text: var(--df-label);
    --section-bg: var(--df-section);
    --heading: var(--df-heading);
    --label: var(--df-label);
    --line: var(--df-line);
    --line2: var(--df-line-2);
    --blue: var(--df-blue);
    --blue-dark: var(--df-blue-dark);
    --secondary: var(--df-secondary);
    --secondary-hover: var(--df-secondary-hover);
    --input: var(--df-input);
    --readonly-bg: var(--df-input-readonly);
    --readonly-text: var(--df-input-readonly-text);
    --pill-bg: var(--df-pill-bg);
    --pill-text: var(--df-pill-text);
    --photo-bg: var(--df-photo-bg);
    --ok-fg: var(--df-ok-fg);
    --ok-line: var(--df-ok-line);
    --err-bg: var(--df-err-bg);
    --err-fg: var(--df-err-fg);
    --err-line: var(--df-err-line);
    --warn-fg: var(--df-warn-fg);
    --warn-line: var(--df-warn-line);
    --shadow: var(--df-shadow);
    --focus: var(--df-focus);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    background: var(--df-bg);
    color: var(--df-text);
}
a { color: var(--df-blue); }
a:hover { color: var(--df-blue-dark); }
input, select, textarea {
    color: var(--df-text);
    background: var(--df-input);
    border-color: var(--df-line-2);
}
input::placeholder, textarea::placeholder { color: var(--df-muted); }
button, .btn { font-family: inherit; }

/* Eigener Game-Center-Datepicker für den Spielerbereich ---------------- */
html[data-theme-area="app"] .gc-datepicker-popover {
    position: fixed;
    z-index: 99999;
    width: min(320px, calc(100vw - 24px));
    border: 1px solid var(--df-line-2);
    border-radius: 14px;
    background: var(--df-card);
    color: var(--df-text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
    padding: 12px;
    font-family: inherit;
}
html[data-theme-area="app"] .gc-datepicker-popover[hidden] { display: none !important; }
html[data-theme-area="app"] .gc-datepicker-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
html[data-theme-area="app"] .gc-datepicker-title {
    min-width: 150px; text-align: center; font-weight: 800; color: var(--df-heading);
}
html[data-theme-area="app"] .gc-datepicker-nav,
html[data-theme-area="app"] .gc-datepicker-clear {
    appearance: none; border: 1px solid var(--df-line-2); background: var(--df-section); color: var(--df-text);
    border-radius: 10px; cursor: pointer; font-weight: 800;
}
html[data-theme-area="app"] .gc-datepicker-nav { width: 36px; height: 34px; line-height: 1; font-size: 20px; }
html[data-theme-area="app"] .gc-datepicker-clear { padding: 7px 10px; margin-top: 10px; }
html[data-theme-area="app"] .gc-datepicker-nav:hover,
html[data-theme-area="app"] .gc-datepicker-clear:hover { border-color: var(--df-blue); color: var(--df-heading); }
html[data-theme-area="app"] .gc-datepicker-grid,
html[data-theme-area="app"] .gc-datepicker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
html[data-theme-area="app"] .gc-datepicker-weekday { padding: 5px 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--df-muted); }
html[data-theme-area="app"] .gc-datepicker-weekday.weekend { color: var(--df-err-fg); }
html[data-theme-area="app"] .gc-datepicker-day {
    appearance: none; width: 100%; min-width: 0; height: 34px; padding: 0; border: 1px solid transparent;
    border-radius: 10px; background: transparent; color: var(--df-text); cursor: pointer; font: inherit; font-weight: 700;
}
html[data-theme-area="app"] .gc-datepicker-day.other-month { color: var(--df-muted); opacity: .68; }
html[data-theme-area="app"] .gc-datepicker-day.weekend { color: var(--df-err-fg); }
html[data-theme-area="app"] .gc-datepicker-day:hover,
html[data-theme-area="app"] .gc-datepicker-day:focus-visible { background: color-mix(in srgb, var(--df-blue) 22%, transparent); border-color: var(--df-blue); outline: none; }
html[data-theme-area="app"] .gc-datepicker-day.today { border-color: var(--df-line-2); }
html[data-theme-area="app"] .gc-datepicker-day.selected { background: var(--df-blue); border-color: var(--df-blue); color: #fff; }
html[data-theme-area="app"] input.gc-date-input { cursor: pointer; }


/* ---- profile.php ehemaliges lokales CSS, zentralisiert ---- */
*{box-sizing:border-box}
        body{
            font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
            background:var(--df-bg);
            margin:0;
            padding:22px;
            color:var(--df-text);
        }
        html[data-theme="dark"] body{
            background:radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg);
        }
        @media (prefers-color-scheme: dark) {
            html[data-theme="system"] body{
                background:radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg);
            }
        }
        .card{
            background:var(--df-card);
            border:1px solid var(--df-line);
            border-radius:16px;
            box-shadow:var(--df-shadow);
            padding:22px;
            max-width:1080px;
            margin:0 auto;
        }
        .topbar{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:flex-start;
            flex-wrap:wrap;
            margin-bottom:8px;
        }
        h1{margin:0;font-size:28px;color:var(--df-heading)}
        h2{margin:0 0 12px 0;font-size:18px;color:var(--df-heading)}
        .btn-secondary{
            display:inline-block;
            text-decoration:none;
            background:var(--df-secondary);
            color:var(--df-card);
            border:1px solid transparent;
            border-radius:10px;
            padding:10px 14px;
            font-weight:800;
            white-space:nowrap;
        }
        .btn-secondary:hover{background:var(--df-secondary-hover)}
        .muted{color:var(--df-muted);font-size:13px}
        .profile-meta{
            margin:10px 0 18px 0;
            color:var(--muted2);
            font-size:15px;
        }
        .meta-row{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:12px;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            font-size:13px;
            font-weight:700;
            border:1px solid var(--df-line);
            background:var(--df-pill-bg);
            color:var(--df-pill-text);
        }
        .pill-warn{background:var(--df-warn-bg); color:var(--df-warn-fg); border-color:var(--df-warn-line)}
        .pill-ok{background:var(--df-ok-bg); color:var(--df-ok-fg); border-color:var(--df-ok-line)}
        .msg{
            padding:12px 14px;
            border-radius:12px;
            margin:10px 0 16px 0;
            font-weight:700;
        }
        .msg-ok{background:var(--df-ok-bg); color:var(--df-ok-fg); border:1px solid var(--df-ok-line)}
        .msg-err{background:var(--df-err-bg); color:var(--df-err-fg); border:1px solid var(--df-err-line)}
        .msg-warn{background:var(--df-warn-bg); color:var(--df-warn-fg); border:1px solid var(--df-warn-line)}
        .section{
            background:var(--section-bg);
            border:1px solid var(--df-line);
            border-radius:14px;
            padding:16px;
            margin-top:16px;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:flex-start;
            flex-wrap:wrap;
            margin-bottom:12px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        label{
            display:block;
            font-size:13px;
            font-weight:800;
            color:var(--df-label);
            margin-bottom:6px;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="file"],
        select{
            width:100%;
            padding:11px 12px;
            border:1px solid var(--df-line-2);
            border-radius:10px;
            font-size:14px;
            background:var(--df-input);
            color:var(--df-text);
        }
        input[type="file"]::file-selector-button{
            border:0;
            border-radius:8px;
            background:var(--df-blue);
            color:var(--df-card);
            padding:8px 10px;
            font-weight:800;
            margin-right:10px;
            cursor:pointer;
        }
        input[readonly],
        .readonly-field{
            background:var(--df-input-readonly) !important;
            color:var(--df-input-readonly-text);
            cursor:not-allowed;
        }
        .field-required{
            border-color:var(--df-warn-line) !important;
            box-shadow:0 0 0 3px var(--df-focus);
        }
        .checkbox{
            display:flex;
            align-items:center;
            gap:8px;
            margin-top:8px;
            font-size:14px;
            color:var(--df-text);
        }
        .checkbox input{width:16px;height:16px}
        .actions{
            display:flex;
            gap:10px;
            margin-top:14px;
            flex-wrap:wrap;
        }
        .btn{
            background:var(--df-blue);
            color:var(--df-card);
            border:none;
            border-radius:10px;
            padding:10px 14px;
            cursor:pointer;
            font-weight:800;
            font-size:14px;
        }
        .btn:hover{background:var(--df-blue-dark)}
        .hint-box{
            background:var(--df-card);
            border:1px dashed var(--df-line-2);
            padding:12px 14px;
            border-radius:12px;
            color:var(--muted2);
            font-size:14px;
        }
        .photo-row{
            display:flex;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
            padding:10px 12px;
            background:var(--df-card);
            border:1px solid var(--df-line);
            border-radius:12px;
            margin-bottom:10px;
        }
        .photo-thumb{
            width:72px;
            height:72px;
            border-radius:50%;
            object-fit:cover;
            border:1px solid var(--df-line-2);
            background:var(--df-photo-bg);
        }
        .photo-placeholder{
            width:72px;
            height:72px;
            border-radius:50%;
            border:1px solid var(--df-line-2);
            background:var(--df-photo-bg);
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:30px;
        }
        @media (max-width: 720px){
            body{padding:12px}
            .grid-2{grid-template-columns:1fr}
        }



/* ---- index.php ehemaliges lokales CSS, zentralisiert ---- */
* { box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%);
            color: var(--df-text);
            margin: 0;
            padding: 24px;
            min-height: 100vh;
        }
        .main-container {
            max-width: 1180px;
            margin: 0 auto;
        }
        .hero {
            background: linear-gradient(135deg, var(--df-card) 0%, var(--df-section) 100%);
            border: 1px solid var(--df-line);
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(29, 53, 87, .06);
            padding: 26px 28px;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
        }
        .hero h1 {
            margin: 0 0 10px 0;
            font-size: 33px;
            color: var(--df-heading);
        }
        .hero p {
            margin: 0;
            color: var(--df-muted);
            font-size: 16px;
            line-height: 1.55;
            max-width: 760px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }
        .admin-preview-box {
            margin-top: 14px;
            background: var(--df-card)7ed;
            border: 1px solid #fed7aa;
            color: #7c2d12;
            border-radius: 16px;
            padding: 14px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .admin-preview-box strong { color: #7c2d12; }
        .admin-preview-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
        .admin-preview-form input {
            border: 1px solid #fdba74;
            border-radius: 10px;
            padding: 9px 11px;
            font: inherit;
            min-width: 170px;
            background: var(--df-card);
            color: #1f2937;
        }
        .admin-preview-note { font-weight: 800; }
        .admin-preview-error { width: 100%; color: #991b1b; font-weight: 800; }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border-radius: 12px;
            font-weight: 800;
            text-decoration: none;
            border: 1px solid transparent;
            transition: .16s ease;
            white-space: nowrap;
        }
        .btn-main {
            background: var(--df-blue);
            color: var(--df-card);
        }
        .btn-main:hover { background: #2058ca; }
        .btn-soft {
            background: var(--df-card);
            color: #44576b;
            border-color: var(--df-line);
        }
        .btn-soft:hover { background: var(--df-section); }
        .welcome-row {
            margin-top: 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }
        .welcome {
            font-size: 17px;
            color: #44576b;
        }
        .pass-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
        }
        .pass-badge.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .pass-badge.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); }
        .pass-badge.bad { background: var(--df-err-bg); color: var(--df-err-fg); }
        .badge-link {
            text-decoration: none;
            display: inline-block;
        }
        .badge-link:focus-visible .pass-badge,
        .badge-link:hover .pass-badge {
            filter: brightness(0.98);
            box-shadow: 0 2px 8px rgba(31,53,86,.08);
        }
        .alert {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: var(--df-card)7dd;
            border: 1px solid #f0dc97;
            color: #6f5600;
            border-radius: 16px;
            padding: 16px 18px;
            margin: 18px 0 0 0;
        }
        .alert i { font-size: 20px; margin-top: 2px; }
        .alert-title { font-weight: 800; margin-bottom: 4px; }
        .alert a { color: #2459d4; font-weight: 700; text-decoration: none; }
        .alert a:hover { text-decoration: underline; }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        .stat-card {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 18px;
            padding: 18px 18px 16px;
            box-shadow: 0 4px 16px rgba(31, 56, 94, .04);
        }
        .stat-label {
            color: var(--df-muted);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .stat-value {
            margin-top: 8px;
            font-size: 34px;
            font-weight: 900;
            color: #1e3654;
            line-height: 1;
        }
        .stat-help {
            margin-top: 10px;
            color: var(--df-muted);
            font-size: 14px;
            line-height: 1.45;
        }
        .inline-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 800;
        }
        .inline-status.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .inline-status.bad { background: var(--df-err-bg); color: var(--df-err-fg); }
        .section-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 18px;
            margin-top: 20px;
        }
        .section-full {
            margin-top: 20px;
        }
        .compact-info-line {
            margin-top: 20px;
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(31, 56, 94, .04);
            padding: 12px 16px;
            color: var(--df-muted);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            line-height: 1.4;
        }
        .compact-info-line .info-main {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .compact-info-line i {
            color: #456a98;
        }
        .compact-info-line a {
            color: var(--df-blue);
            font-weight: 800;
            text-decoration: none;
        }
        .compact-info-line a:hover {
            text-decoration: underline;
        }
        .games-split-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }
        .games-split-grid.single {
            grid-template-columns: minmax(0, 760px);
            justify-content: center;
        }
        .games-block {
            border: 1px solid var(--df-line);
            border-radius: 16px;
            background: var(--df-card);
            padding: 12px;
        }
        .games-block-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin: 0 0 10px 0;
            color: var(--df-heading);
            font-weight: 900;
            font-size: 15px;
        }
        .games-block .index-games {
            gap: 8px;
        }
        .panel {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(31, 56, 94, .04);
            padding: 22px;
        }
        .panel h2 {
            margin: 0 0 6px 0;
            font-size: 24px;
            color: #1d3557;
        }
        .panel-sub {
            color: var(--df-muted);
            margin: 0 0 18px 0;
            line-height: 1.5;
        }
        .tournament-list,
        .mini-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .tournament-item,
        .mini-item {
            background: #fbfdff;
            border: 1px solid var(--df-line);
            border-radius: 16px;
            padding: 14px 16px;
        }
        .tournament-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
        }
        .tournament-content {
            flex: 1 1 auto;
            min-width: 0;
        }
        .tournament-image-box {
            flex: 0 0 122px;
            width: 122px;
            min-height: 82px;
            border-left: 1px solid var(--df-line);
            padding-left: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tournament-image-box img {
            width: 82px;
            height: 82px;
            max-width: 82px;
            max-height: 82px;
            object-fit: cover;
            border-radius: 12px;
            display: block;
        }
        .tournament-top,
        .mini-top {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
        }
        .tournament-name,
        .mini-name {
            font-weight: 800;
            color: #203854;
            font-size: 16px;
        }
        .tournament-desc {
            margin-top: 4px;
            color: var(--df-muted);
            font-size: 14px;
            line-height: 1.45;
        }
        .open-games-compact {
            gap: 8px;
        }
        .open-games-compact .mini-item {
            padding: 10px 12px;
            border-radius: 12px;
        }
        .open-game-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            line-height: 1.25;
        }
        .open-game-opponent {
            color: var(--df-muted);
            font-size: 14px;
            text-align: right;
        }
        .open-game-opponent strong {
            color: var(--df-heading);
        }
        .index-games {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .index-game-card {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 14px;
            padding: 10px 12px;
        }
        .index-game-line1,
        .index-game-line2 {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .index-game-line1 {
            justify-content: space-between;
            margin-bottom: 7px;
        }
        .index-game-title-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex-wrap: wrap;
        }
        .index-game-title,
        .index-game-tournament {
            font-weight: 900;
            color: var(--df-heading);
            font-size: 15px;
            line-height: 1.2;
            white-space: nowrap;
        }
        .index-game-tournament {
            color: var(--df-heading);
        }
        .index-title-sep {
            color: var(--df-muted);
            font-weight: 900;
        }
        .index-game-line2 {
            justify-content: space-between;
            align-items: stretch;
            color: var(--df-muted);
            font-size: 13px;
            line-height: 1.25;
            gap: 8px;
        }
        .index-info-box {
            flex: 1 1 0;
            min-width: 0;
            border: 1px solid var(--df-line);
            border-radius: 12px;
            background: var(--df-section-2);
            padding: 8px 10px;
        }
        .index-info-box.period.appointment {
            background: var(--df-ok-bg);
            border-color: var(--df-ok-line);
        }
        .index-info-box.period.no-appointment {
            background: var(--df-warn-bg);
            border-color: var(--df-warn-line);
        }
        .index-info-label {
            display: block;
            color: var(--df-muted);
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 2px;
        }
        .index-opponent-name {
            display: block;
            color: var(--df-heading);
            font-weight: 900;
            font-size: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .index-period-text {
            display: block;
            color: var(--df-ok-fg);
            font-weight: 900;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .index-info-box.period.no-appointment .index-period-text { color: var(--df-warn-fg); }
        .index-info-box.period.appointment .index-period-text { color: var(--df-ok-fg); }
        .index-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }
        .index-status-pill.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .index-status-pill.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); }
        .index-status-pill.neutral { background: var(--df-pill-bg); color: var(--df-pill-text); }
        @media (max-width: 560px) {
            .open-game-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 4px;
            }
            .open-game-opponent {
                text-align: left;
            }
        }
        .meta-row {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            background: var(--df-pill-bg);
            color: var(--df-label);
        }
        .pill.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .pill.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); }
        .pill.neutral { background: #eef1f5; color: #607282; }
        .panel-footer {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        .empty {
            padding: 16px;
            border-radius: 16px;
            background: #fbfdff;
            border: 1px dashed #d7e2f0;
            color: var(--df-muted);
            line-height: 1.55;
        }
        .quick-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
            margin-top: 20px;
        }
        .quick-card {
            background: linear-gradient(102deg, #e9edfb 80%, #f3f8ff 100%);
            border-radius: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,.05);
            min-height: 112px;
            padding: 22px 14px 18px;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            transition: box-shadow .13s, transform .13s, background .13s;
        }
        .quick-card:hover {
            box-shadow: 0 6px 20px rgba(55,103,198,.14);
            background: linear-gradient(102deg, #dae6ff 82%, #eef5ff 100%);
            transform: translateY(-2px) scale(1.018);
        }
        .quick-icon {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: #3767c6;
            margin-bottom: 14px;
            line-height: 1;
        }
        .quick-title {
            width: 100%;
            text-align: center;
            font-size: 1.02em;
            font-weight: 700;
            color: #21344b;
            line-height: 1.28;
        }
        .bottom-actions {
            margin-top: 28px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .logout, .admin-btn {
            display: inline-block;
            border-radius: 10px;
            padding: 13px 22px;
            font-size: 1.02em;
            font-weight: 700;
            text-decoration: none;
            transition: background .15s;
        }
        .logout { background: #e55353; color: var(--df-card); }
        .logout:hover { background: #ba3232; }
        .admin-btn { background: #5c677d; color: var(--df-card); }
        .admin-btn:hover { background: #434b5b; }

        .staff-panel {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 18px;
            box-shadow: 0 8px 24px rgba(29,53,87,.05);
            padding: 18px;
            margin: 18px 0;
        }
        .staff-panel h2 {
            margin: 0 0 8px 0;
            font-size: 20px;
            color: var(--df-text);
        }
        .staff-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(220px, 1fr));
            gap: 12px;
            margin-top: 14px;
        }
        .staff-action {
            text-decoration: none;
            background: var(--df-pill-bg);
            border: 1px solid #dbe8ff;
            color: var(--df-blue);
            border-radius: 14px;
            padding: 14px;
            font-weight: 900;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .staff-action span {
            color: var(--df-muted);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }
        .staff-cats {
            color: var(--df-muted);
            font-size: 13px;
            margin-top: 8px;
        }
        @media (max-width: 900px) {
            .staff-actions { grid-template-columns: 1fr; }
        }
        @media (max-width: 1080px) {
            .stats-grid, .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .section-grid, .games-split-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 760px) {
            body { padding: 12px; }
            .hero { padding: 20px 18px; flex-direction: column; }
            .hero h1 { font-size: 27px; }
            .hero-actions { justify-content: flex-start; }
            .stats-grid, .quick-grid { grid-template-columns: 1fr; }
            .compact-info-line { align-items: flex-start; }
            .welcome-row { align-items: flex-start; }
            .pass-badge { display: block; }
            .tournament-item { align-items: flex-start; }
            .tournament-image-box {
                flex-basis: 86px;
                width: 86px;
                min-height: 62px;
                padding-left: 10px;
            }
            .tournament-image-box img {
                width: 62px;
                height: 62px;
                max-width: 62px;
                max-height: 62px;
            }
        }



/* ---- open_games.php ehemaliges lokales CSS, zentralisiert ---- */
* { box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%);
            color: var(--df-text);
            margin: 0;
            padding: 24px;
            min-height: 100vh;
        }
        .main-container { max-width: 1180px; margin: 0 auto; }
        .hero {
            background: linear-gradient(135deg, var(--df-card) 0%, var(--df-section) 100%);
            border: 1px solid var(--df-line);
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(29, 53, 87, .06);
            padding: 26px 28px;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
        }
        .hero h1 { margin: 0 0 10px 0; font-size: 33px; color: var(--df-heading); }
        .hero p { margin: 0; color: var(--df-muted); font-size: 16px; line-height: 1.55; max-width: 760px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
        .admin-preview-box {
            margin-top: 14px;
            background: var(--df-card)7ed;
            border: 1px solid #fed7aa;
            color: #7c2d12;
            border-radius: 16px;
            padding: 14px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .admin-preview-box strong { color: #7c2d12; }
        .admin-preview-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
        .admin-preview-form input {
            border: 1px solid #fdba74;
            border-radius: 10px;
            padding: 9px 11px;
            font: inherit;
            min-width: 170px;
            background: var(--df-card);
            color: #1f2937;
        }
        .admin-preview-note { font-weight: 800; }
        .admin-preview-error { width: 100%; color: #991b1b; font-weight: 800; }
        .btn-disabled { opacity: .65; cursor: not-allowed; }
        .filter-panel {
            margin-top: 16px;
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 18px;
            padding: 14px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0; }
        .filter-field { display: flex; flex-direction: column; gap: 5px; color: var(--df-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
        .filter-field select {
            border: 1px solid #cdd8e6;
            border-radius: 10px;
            padding: 9px 11px;
            background: var(--df-card);
            color: var(--df-text);
            min-width: 230px;
            font: inherit;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0;
        }
        .filter-summary { color: var(--df-muted); font-size: 14px; line-height: 1.45; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 15px;
            border-radius: 12px;
            font-weight: 800;
            text-decoration: none;
            border: 1px solid transparent;
            transition: .16s ease;
            white-space: nowrap;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
        }
        .btn-main { background: var(--df-blue); color: var(--df-card); }
        .btn-main:hover { background: #2058ca; }
        .btn-soft { background: var(--df-card); color: #44576b; border-color: var(--df-line); }
        .btn-soft:hover { background: var(--df-section); }
        .btn-small { padding: 8px 11px; border-radius: 10px; font-size: 13px; }
        .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
        .stat-card { background: var(--df-card); border: 1px solid var(--df-line); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 4px 16px rgba(31, 56, 94, .04); }
        .stat-label { color: var(--df-muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
        .stat-value { margin-top: 8px; font-size: 34px; font-weight: 900; color: #1e3654; line-height: 1; }
        .stat-help { margin-top: 10px; color: var(--df-muted); font-size: 14px; line-height: 1.45; }
        .panel { margin-top: 20px; background: var(--df-card); border: 1px solid var(--df-line); border-radius: 20px; box-shadow: 0 4px 16px rgba(31, 56, 94, .04); padding: 22px; }
        .panel h2 { margin: 0 0 6px 0; font-size: 24px; color: #1d3557; }
        .panel-sub { color: var(--df-muted); margin: 0 0 18px 0; line-height: 1.5; }
        .tournament-group { margin-top: 22px; }
        .tournament-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
        .tournament-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .tournament-image { width: 58px; height: 58px; border-radius: 15px; object-fit: cover; border: 1px solid var(--df-line); background: #f2f6fb; box-shadow: 0 6px 16px rgba(31, 56, 94, .10); flex: 0 0 auto; }
        .tournament-heading h3 { margin: 0; font-size: 21px; color: #203854; }
        .mdt-links { display: flex; flex-wrap: wrap; gap: 8px; }
        .game-list { display: flex; flex-direction: column; gap: 14px; }
        .game-list-flat { margin-top: 18px; }
        .game-tournament-mini {
            display: grid;
            grid-template-columns: minmax(240px, 1fr) minmax(260px, auto) minmax(240px, 1fr);
            align-items: center;
            gap: 16px;
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid var(--df-line);
        }
        .game-tournament-title {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            color: #203854;
            font-weight: 900;
            font-size: 17px;
            justify-self: start;
        }
        .game-tournament-title span { overflow-wrap: anywhere; }
        .game-tournament-image {
            width: 58px;
            height: 58px;
            border-radius: 15px;
            object-fit: cover;
            border: 1px solid var(--df-line);
            background: #f2f6fb;
            box-shadow: 0 6px 16px rgba(31, 56, 94, .10);
            flex: 0 0 auto;
        }
        .game-round-mode {
            justify-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            text-align: center;
            min-width: 0;
        }
        .game-round-title {
            font-weight: 900;
            color: #203854;
            font-size: 20px;
            line-height: 1.2;
        }
        .game-tournament-links { justify-content: flex-end; justify-self: end; }
        .game-card { background: #fbfdff; border: 1px solid var(--df-line); border-radius: 18px; padding: 17px; }
        .game-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: flex-start; }
        .game-title { font-weight: 900; color: #203854; font-size: 19px; margin-bottom: 7px; }

        .game-primary-row { display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 24px; align-items: center; margin-top: 10px; }
        .opponent-area { min-width: 0; overflow: visible; }
        .opponent-head { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
        .opponent-link { display: inline-flex; align-items: center; gap: 8px; color: #153257; font-weight: 900; font-size: 22px; text-decoration: none; flex-shrink: 0; }
        .opponent-link:hover { color: var(--df-blue); text-decoration: underline; }
        .opponent-avatar-wrap { position: relative; width: 62px; height: 58px; flex: 0 0 62px; display: inline-flex; align-items: center; justify-content: center; }
        .opponent-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 1px solid var(--df-line); background: var(--df-pill-bg); box-shadow: 0 6px 16px rgba(31, 56, 94, .14); flex: 0 0 58px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
        .opponent-flag-img { position: absolute; right: -4px; bottom: 1px; width: 26px; height: 18px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,.9); background: var(--df-card); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
        .opponent-avatar-fallback { color: var(--df-muted); font-size: 34px; box-shadow: none; }
        .opponent-avatar-fallback i { line-height: 1; }
        .calendar-under-link { display: inline-flex; align-items: center; color: var(--df-muted); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
        .calendar-under-link:hover { color: var(--df-blue); text-decoration: underline; }
        .period-box { display: inline-flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 16px; background: #eefaf2; color: #11613c; border: 1px solid #c7efd5; }
        .period-box.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); border-color: #ffe4a8; }
        .period-box.danger { background: var(--df-err-bg); color: var(--df-err-fg); border-color: #f6c5c5; }
        .period-label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; opacity: .82; }
        .period-value { font-size: 18px; font-weight: 900; }
        .status-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .quick-slots { margin-top: 14px; border-top: 1px solid var(--df-line); padding-top: 14px; }
        .quick-slots h4 { margin: 0 0 10px 0; color: #1e3654; font-size: 16px; }
        .quick-slots-details { border: 1px solid var(--df-line); border-radius: 14px; background: var(--df-card); overflow: hidden; }
        .quick-slots-details > summary { cursor: pointer; padding: 12px 14px; background: var(--df-section); color: #1d3557; font-weight: 900; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
        .quick-slots-details > summary::-webkit-details-marker { display: none; }
        .quick-slots-details > summary:after { content: '▾'; color: var(--df-muted); font-size: 14px; }
        .quick-slots-details[open] > summary:after { content: '▴'; }
        .quick-slots-inner { padding: 12px; }
        .date-chip-list { display: flex; flex-direction: column; gap: 10px; }
        .date-slot-group { background: var(--df-card); border: 1px solid var(--df-line); border-radius: 14px; padding: 12px; }
        .date-slot-title { font-weight: 900; color: #1d3557; margin-bottom: 0; cursor: pointer; list-style: none; }
        .date-slot-title::-webkit-details-marker { display: none; }
        .date-slot-group[open] .date-slot-title { margin-bottom: 8px; }
        .calendar-link-note { font-size: 13px; color: var(--df-muted); margin-left: 4px; }

        .opponent-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: #153257; font-weight: 900; font-size: 20px; }
        .opponent-summary::-webkit-details-marker { display: none; }
        .opponent-summary .hint { color: var(--df-muted); font-weight: 700; font-size: 13px; }
        .schedule-line { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--df-pill-bg); color: var(--df-label); }
        .pill.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .pill.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); }
        .pill.danger { background: var(--df-err-bg); color: var(--df-err-fg); }
        .pill.neutral { background: #eef1f5; color: #607282; }
        .inline-pill-form { display: inline-flex; margin: 0; padding: 0; }
        .pill-button { border: 0; font-family: inherit; cursor: pointer; }
        .pill-button:hover { filter: brightness(.98); text-decoration: underline; }
        .disabled-pill { opacity: .55; filter: grayscale(.25); cursor: not-allowed; }
        .calendar-panel { margin-top: 15px; border-top: 1px solid var(--df-line); padding-top: 15px; }
        .calendar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
        .mini-box { background: var(--df-card); border: 1px solid var(--df-line); border-radius: 14px; padding: 13px; }
        .mini-box h4 { margin: 0 0 8px 0; font-size: 15px; color: #1e3654; }
        .mini-box p { margin: 0; color: var(--df-muted); line-height: 1.45; }
        .date-details { margin-top: 10px; border: 1px solid var(--df-line); border-radius: 12px; background: var(--df-card); overflow: hidden; }
        .date-details summary { cursor: pointer; padding: 11px 13px; font-weight: 900; color: #1d3557; background: var(--df-section); }
        .slot-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
        .slot-form { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 12px; background: var(--df-section); border: 1px solid #dce7f5; }
        .slot-time { font-weight: 900; color: #1d3557; }
        .existing-appointment { margin-top: 12px; border: 1px solid #bfe8cc; background: #f1fbf4; color: #12633d; border-radius: 14px; padding: 12px; font-weight: 700; }
        .scolia-box { margin-top: 14px; border-top: 1px solid var(--df-line); padding-top: 14px; width: 50%; min-width: 420px; }
        .scolia-box .quick-slots-details { width: 100%; }
        .scolia-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
        .scolia-label { font-weight: 900; color: #1d3557; margin-right: 4px; }
        .scolia-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .scolia-input { min-width: 220px; border: 1px solid #d7e2f0; border-radius: 11px; padding: 10px 12px; font: inherit; color: var(--df-text); background: var(--df-card); }
        .scolia-input:focus { outline: 2px solid rgba(47,103,216,.16); border-color: #9bb8ef; }
        .flash { margin-top: 18px; border-radius: 14px; padding: 13px 15px; font-weight: 800; border: 1px solid var(--df-line); }
        .flash.success { background: var(--df-ok-bg); color: var(--df-ok-fg); border-color: #bfe8cc; }
        .flash.error { background: var(--df-err-bg); color: var(--df-err-fg); border-color: #f6c5c5; }
        .empty, .notice { padding: 16px; border-radius: 16px; background: #fbfdff; border: 1px dashed #d7e2f0; color: var(--df-muted); line-height: 1.55; }
        .footer-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
        @media (max-width: 900px) {
            .hero { flex-direction: column; padding: 20px 18px; }
            .hero-actions { justify-content: flex-start; }
            .stats-grid, .calendar-grid { grid-template-columns: 1fr; }
            .game-top { grid-template-columns: 1fr; }
            .game-primary-row { grid-template-columns: 1fr; gap: 10px; align-items: flex-start; }
            .opponent-head { flex-wrap: wrap; white-space: normal; }
            .scolia-box { width: 100%; min-width: 0; }
            .game-tournament-mini { grid-template-columns: 1fr; align-items: flex-start; }
            .game-round-mode { justify-self: start; text-align: left; }
            .game-tournament-links { justify-content: flex-start; justify-self: start; }
        }
        @media (max-width: 640px) {
            body { padding: 12px; }
            .hero h1 { font-size: 27px; }
            .btn { width: 100%; }
    
        .game-primary-row { grid-template-columns: 1fr; gap: 10px; }
        .opponent-link { font-size: 20px; }
        .period-box { display: inline-flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 16px; background: #eefaf2; color: #11613c; border: 1px solid #c7efd5; }
        .period-box.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); border-color: #ffe4a8; }
        .period-box.danger { background: var(--df-err-bg); color: var(--df-err-fg); border-color: #f6c5c5; }
        .period-label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; opacity: .82; }
        .period-value { font-size: 18px; font-weight: 900; }
        .status-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .quick-slots { margin-top: 14px; border-top: 1px solid var(--df-line); padding-top: 14px; }
        .quick-slots h4 { margin: 0 0 10px 0; color: #1e3654; font-size: 16px; }
        .quick-slots-details { border: 1px solid var(--df-line); border-radius: 14px; background: var(--df-card); overflow: hidden; }
        .quick-slots-details > summary { cursor: pointer; padding: 12px 14px; background: var(--df-section); color: #1d3557; font-weight: 900; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
        .quick-slots-details > summary::-webkit-details-marker { display: none; }
        .quick-slots-details > summary:after { content: '▾'; color: var(--df-muted); font-size: 14px; }
        .quick-slots-details[open] > summary:after { content: '▴'; }
        .quick-slots-inner { padding: 12px; }
        .date-chip-list { display: flex; flex-direction: column; gap: 10px; }
        .date-slot-group { background: var(--df-card); border: 1px solid var(--df-line); border-radius: 14px; padding: 12px; }
        .date-slot-title { font-weight: 900; color: #1d3557; margin-bottom: 0; cursor: pointer; list-style: none; }
        .date-slot-title::-webkit-details-marker { display: none; }
        .date-slot-group[open] .date-slot-title { margin-bottom: 8px; }
        .calendar-link-note { font-size: 13px; color: var(--df-muted); margin-left: 4px; }

        .opponent-summary { font-size: 18px; }
            .slot-form { width: 100%; justify-content: space-between; }
        }


        /* Zielansicht: klare Spielkarten mit Gegner / Zeitraum / Status */
        .game-card {
            background: linear-gradient(180deg, #fbfdff 0%, var(--df-card) 100%);
            border: 1px solid var(--df-line);
            border-radius: 20px;
            padding: 18px;
            box-shadow: 0 5px 18px rgba(31, 56, 94, .045);
        }
        .game-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 14px;
        }
        .game-card-header-scolia {
            justify-content: flex-end;
        }
        .game-title-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
            min-width: 0;
        }
        .game-title {
            font-size: 20px;
            margin: 0;
        }
        .mode-badge {
            display: inline-flex;
            align-items: center;
            padding: 5px 9px;
            border-radius: 999px;
            background: var(--df-pill-bg);
            color: var(--df-label);
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }
        .game-subtitle {
            color: var(--df-muted);
            font-size: 13px;
            font-weight: 700;
        }
        .game-main-grid {
            display: grid;
            grid-template-columns: minmax(260px, 1.15fr) minmax(230px, .9fr) minmax(310px, 1.2fr);
            gap: 14px;
            align-items: stretch;
        }
        .info-tile {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 16px;
            padding: 14px;
            min-width: 0;
        }
        .tile-label {
            color: var(--df-muted);
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 7px;
        }
        .opponent-head {
            align-items: center;
            gap: 10px;
            white-space: normal;
        }
        .opponent-link {
            font-size: 23px;
            line-height: 1.1;
        }
        .calendar-under-link {
            align-self: center;
            padding-top: 2px;
        }
        .period-tile {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #eefaf2;
            color: #11613c;
            border-color: #c7efd5;
        }
        .period-tile.warn {
            background: var(--df-warn-bg);
            color: var(--df-warn-fg);
            border-color: #ffe4a8;
        }
        .period-tile.danger {
            background: var(--df-err-bg);
            color: var(--df-err-fg);
            border-color: #f6c5c5;
        }
        .period-tile .tile-label {
            color: currentColor;
            opacity: .72;
        }
        .period-value {
            font-size: 20px;
            line-height: 1.25;
        }
        .status-tile {
            background: #fbfdff;
        }
        .compact-status-row {
            margin-top: 0;
            align-items: flex-start;
        }
        .compact-status-row .pill,
        .compact-status-row .inline-pill-form {
            margin-bottom: 0;
        }
        .game-action-area {
            margin-top: 14px;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }
        .quick-slots {
            margin-top: 0;
            border-top: 0;
            padding-top: 0;
        }
        .quick-slots-details > summary {
            min-height: 48px;
        }
        .quick-slots-details > summary span {
            color: #1d3557;
        }
        .scolia-box {
            margin-top: 0;
            border-top: 0;
            padding-top: 0;
            width: 50%;
            min-width: 420px;
        }
        .scolia-box-header {
            width: 330px;
            min-width: 300px;
            flex: 0 0 330px;
        }
        .scolia-box-header .quick-slots-details > summary {
            min-height: 42px;
            padding: 10px 12px;
        }
        .scolia-box-header .quick-slots-inner {
            padding: 10px;
        }
        @media (max-width: 1050px) {
            .game-main-grid { grid-template-columns: 1fr; }
            .game-card-header { flex-direction: column; }
            .scolia-box, .scolia-box-header { width: 100%; min-width: 0; flex-basis: auto; }
        }



/* ---- my_appointments.php ehemaliges lokales CSS, zentralisiert ---- */
* { box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%);
            color: var(--df-text);
            margin: 0;
            padding: 24px;
            min-height: 100vh;
        }
        .main-container {
            max-width: 1180px;
            margin: 0 auto;
        }
        .hero {
            background: linear-gradient(135deg, var(--df-card) 0%, var(--df-section) 100%);
            border: 1px solid var(--df-line);
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(29, 53, 87, .06);
            padding: 26px 28px;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
        }
        .hero h1 {
            margin: 0 0 10px 0;
            font-size: 33px;
            color: var(--df-heading);
        }
        .hero p {
            margin: 0;
            color: var(--df-muted);
            font-size: 16px;
            line-height: 1.55;
            max-width: 760px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border-radius: 12px;
            font-weight: 800;
            text-decoration: none;
            border: 1px solid transparent;
            transition: .16s ease;
            white-space: nowrap;
        }
        .btn-main {
            background: var(--df-blue);
            color: var(--df-card);
        }
        .btn-main:hover { background: #2058ca; }
        .btn-soft {
            background: var(--df-card);
            color: #44576b;
            border-color: var(--df-line);
        }
        .btn-soft:hover { background: var(--df-section); }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        .stat-card {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 18px;
            padding: 18px 18px 16px;
            box-shadow: 0 4px 16px rgba(31, 56, 94, .04);
        }
        .stat-label {
            color: var(--df-muted);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .stat-value {
            margin-top: 8px;
            font-size: 34px;
            font-weight: 900;
            color: #1e3654;
            line-height: 1;
        }
        .stat-help {
            margin-top: 10px;
            color: var(--df-muted);
            font-size: 14px;
            line-height: 1.45;
        }
        .section-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
            gap: 18px;
            margin-top: 20px;
            align-items: start;
        }
        .section-full {
            margin-top: 20px;
        }
        .panel {
            background: var(--df-card);
            border: 1px solid var(--df-line);
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(31, 56, 94, .04);
            padding: 22px;
        }
        .panel h2 {
            margin: 0 0 6px 0;
            font-size: 24px;
            color: #1d3557;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .panel-sub {
            color: var(--df-muted);
            margin: 0 0 18px 0;
            line-height: 1.5;
        }
        .appointment-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .appointment-card {
            background: #fbfdff;
            border: 1px solid var(--df-line);
            border-radius: 16px;
            padding: 14px 16px;
        }
        .appointment-card.past {
            background: var(--df-section);
            opacity: .86;
        }
        .appointment-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }
        .appointment-title {
            font-weight: 900;
            color: #1d3557;
            font-size: 17px;
            line-height: 1.25;
        }
        .appointment-meta-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }
        .info-box {
            min-width: 0;
            border: 1px solid var(--df-line);
            border-radius: 12px;
            background: var(--df-card);
            padding: 9px 10px;
        }
        .info-box.date,
        .info-box.time {
            background: #effaf3;
            border-color: #bde8c8;
        }
        .info-label {
            display: block;
            color: var(--df-muted);
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 2px;
        }
        .info-value {
            display: block;
            color: #102b4c;
            font-weight: 900;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .note-box {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            align-items: flex-start;
            background: var(--df-section);
            border: 1px solid var(--df-line);
            border-radius: 12px;
            color: #456078;
            padding: 10px 12px;
            font-size: 14px;
            line-height: 1.45;
            font-weight: 700;
        }
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            background: var(--df-pill-bg);
            color: var(--df-label);
            white-space: nowrap;
        }
        .pill.ok { background: var(--df-ok-bg); color: var(--df-ok-fg); }
        .pill.warn { background: var(--df-warn-bg); color: var(--df-warn-fg); }
        .pill.neutral { background: #eef1f5; color: #607282; }
        .category-group {
            border: 1px solid var(--df-line);
            border-radius: 16px;
            background: #fbfdff;
            padding: 12px;
            margin-bottom: 12px;
        }
        .category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #1d3557;
            font-size: 16px;
            font-weight: 900;
            margin-bottom: 10px;
        }
        .empty {
            padding: 16px;
            border-radius: 16px;
            background: #fbfdff;
            border: 1px dashed #d7e2f0;
            color: var(--df-muted);
            line-height: 1.55;
        }
        .pagination {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        .pagination-info {
            color: var(--df-muted);
            font-weight: 800;
        }
        @media (max-width: 980px) {
            .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .section-grid { grid-template-columns: 1fr; }
            .appointment-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 640px) {
            body { padding: 14px; }
            .hero { padding: 20px 18px; flex-direction: column; }
            .hero h1 { font-size: 28px; }
            .hero-actions { justify-content: flex-start; }
            .stats-grid { grid-template-columns: 1fr; }
            .appointment-meta-grid { grid-template-columns: 1fr; }
            .appointment-title-row { flex-direction: column; align-items: flex-start; }
            .btn { width: 100%; justify-content: center; }
        }

/* Spielerbereich: finale Theme-Overrides für lokale Altklassen -------- */
html[data-theme-area="app"] body {
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%);
    color: var(--df-text);
}
html[data-theme-area="app"] .hero,
html[data-theme-area="app"] .card,
html[data-theme-area="app"] .section-card,
html[data-theme-area="app"] .stat-card,
html[data-theme-area="app"] .appointment-card,
html[data-theme-area="app"] .game-card,
html[data-theme-area="app"] .tournament-item,
html[data-theme-area="app"] .request-card,
html[data-theme-area="app"] .profile-card,
html[data-theme-area="app"] .theme-card,
html[data-theme-area="app"] .form-card,
html[data-theme-area="app"] .quick-card,
html[data-theme-area="app"] .compact-info-line,
html[data-theme-area="app"] .pass-card,
html[data-theme-area="app"] .staff-card {
    background: var(--df-card);
    color: var(--df-text);
    border-color: var(--df-line);
}
html[data-theme-area="app"] .hero h1,
html[data-theme-area="app"] h1,
html[data-theme-area="app"] h2,
html[data-theme-area="app"] h3,
html[data-theme-area="app"] .section-title,
html[data-theme-area="app"] .card-title,
html[data-theme-area="app"] .appointment-title,
html[data-theme-area="app"] .game-title {
    color: var(--df-heading);
}
html[data-theme-area="app"] .hero p,
html[data-theme-area="app"] .muted,
html[data-theme-area="app"] .hint,
html[data-theme-area="app"] .help,
html[data-theme-area="app"] .appointment-meta,
html[data-theme-area="app"] .game-meta,
html[data-theme-area="app"] .card-text {
    color: var(--df-muted);
}
html[data-theme-area="app"] input,
html[data-theme-area="app"] select,
html[data-theme-area="app"] textarea {
    background: var(--df-input);
    color: var(--df-text);
    border-color: var(--df-line-2);
}
html[data-theme-area="app"] input[readonly],
html[data-theme-area="app"] textarea[readonly] {
    background: var(--df-input-readonly);
    color: var(--df-input-readonly-text);
}
html[data-theme-area="app"] table,
html[data-theme-area="app"] th,
html[data-theme-area="app"] td {
    border-color: var(--df-line);
}
html[data-theme-area="app"] th { color: var(--df-label); }
html[data-theme-area="app"] .btn-main,
html[data-theme-area="app"] .btn-primary,
html[data-theme-area="app"] button[type="submit"] {
    background: var(--df-blue);
    border-color: var(--df-blue);
    color: #fff;
}
html[data-theme-area="app"] .btn-main:hover,
html[data-theme-area="app"] .btn-primary:hover,
html[data-theme-area="app"] button[type="submit"]:hover {
    background: var(--df-blue-dark);
    border-color: var(--df-blue-dark);
    color: #fff;
}
html[data-theme-area="app"] .btn-soft,
html[data-theme-area="app"] .btn-secondary {
    background: var(--df-section);
    color: var(--df-text);
    border-color: var(--df-line-2);
}
html[data-theme-area="app"] .btn-soft:hover,
html[data-theme-area="app"] .btn-secondary:hover {
    border-color: var(--df-blue);
    color: var(--df-heading);
}
html[data-theme-area="app"] .success,
html[data-theme-area="app"] .alert-success,
html[data-theme-area="app"] .message-success {
    background: var(--df-ok-bg); color: var(--df-ok-fg); border-color: var(--df-ok-line);
}
html[data-theme-area="app"] .error,
html[data-theme-area="app"] .alert-error,
html[data-theme-area="app"] .message-error {
    background: var(--df-err-bg); color: var(--df-err-fg); border-color: var(--df-err-line);
}
html[data-theme-area="app"] .warning,
html[data-theme-area="app"] .alert-warning,
html[data-theme-area="app"] .message-warning {
    background: var(--df-warn-bg); color: var(--df-warn-fg); border-color: var(--df-warn-line);
}
html[data-theme-area="app"] .gc-password-page .container {
    max-width: 560px;
}
html[data-theme-area="app"] .gc-password-page .card {
    padding: 24px;
    border-radius: 18px;
    box-shadow: var(--df-shadow);
}
html[data-theme-area="app"] .gc-password-page label {
    color: var(--df-label);
    font-weight: 800;
}
html[data-theme-area="app"] .gc-password-page input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--df-line-2);
    border-radius: 10px;
    margin-top: 6px;
}
html[data-theme-area="app"] .gc-password-page .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}


/* Schnellzugriffe im Spieler-Dashboard: bessere Lesbarkeit im Darkmode */
html[data-theme="dark"][data-theme-area="app"] .quick-card {
    background: linear-gradient(180deg, #161e28 0%, #141b24 100%);
    border: 1px solid #243445;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
html[data-theme="dark"][data-theme-area="app"] .quick-card:hover {
    background: linear-gradient(180deg, #1a2430 0%, #16202a 100%);
    border-color: #33506f;
}
html[data-theme="dark"][data-theme-area="app"] .quick-icon {
    color: #4d86ff;
}
html[data-theme="dark"][data-theme-area="app"] .quick-title {
    color: #c6d5e6;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] .quick-card {
        background: linear-gradient(180deg, #161e28 0%, #141b24 100%);
        border: 1px solid #243445;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }
    html[data-theme="system"][data-theme-area="app"] .quick-card:hover {
        background: linear-gradient(180deg, #1a2430 0%, #16202a 100%);
        border-color: #33506f;
    }
    html[data-theme="system"][data-theme-area="app"] .quick-icon {
        color: #4d86ff;
    }
    html[data-theme="system"][data-theme-area="app"] .quick-title {
        color: #c6d5e6;
    }
}


/* Offene Spiele: Status- und Zeitraum-Kacheln im Darkmode lesbar halten */
html[data-theme="dark"][data-theme-area="app"] .status-tile,
html[data-theme="dark"][data-theme-area="app"] .info-tile.status-tile {
    background: #111821;
    color: var(--df-text);
    border-color: var(--df-line-2);
}
html[data-theme="dark"][data-theme-area="app"] .period-tile {
    background: #102418;
    color: #9ce6a5;
    border-color: #2b6b3c;
}
html[data-theme="dark"][data-theme-area="app"] .period-tile.warn {
    background: #3d3013;
    color: #ffd166;
    border-color: #7a5c16;
}
html[data-theme="dark"][data-theme-area="app"] .period-tile.danger {
    background: #2a1315;
    color: #ff9a9a;
    border-color: #7a343a;
}
html[data-theme="dark"][data-theme-area="app"] .status-tile .tile-label,
html[data-theme="dark"][data-theme-area="app"] .period-tile .tile-label {
    color: currentColor;
    opacity: .82;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] .status-tile,
    html[data-theme="system"][data-theme-area="app"] .info-tile.status-tile {
        background: #111821;
        color: var(--df-text);
        border-color: var(--df-line-2);
    }
    html[data-theme="system"][data-theme-area="app"] .period-tile {
        background: #102418;
        color: #9ce6a5;
        border-color: #2b6b3c;
    }
    html[data-theme="system"][data-theme-area="app"] .period-tile.warn {
        background: #3d3013;
        color: #ffd166;
        border-color: #7a5c16;
    }
    html[data-theme="system"][data-theme-area="app"] .period-tile.danger {
        background: #2a1315;
        color: #ff9a9a;
        border-color: #7a343a;
    }
    html[data-theme="system"][data-theme-area="app"] .status-tile .tile-label,
    html[data-theme="system"][data-theme-area="app"] .period-tile .tile-label {
        color: currentColor;
        opacity: .82;
    }
}

/* Spielerbereich: Darkmode-Lesbarkeitsfix für open_games.php und my_appointments.php
   Gehört in /assets/css/theme.css, nicht in admin_theme.css. */
html[data-theme="dark"][data-theme-area="app"] {
    --df-app-title-soft: #c9d8e8;
    --df-app-link-soft: #9ec8ff;
    --df-app-link-strong: #b7d8ff;
    --df-app-field: #111821;
    --df-app-field-2: #162231;
    --df-app-field-3: #1a2834;
    --df-app-value: #dbe7f3;
}

html[data-theme="dark"][data-theme-area="app"] .game-card,
html[data-theme="dark"][data-theme-area="app"] .appointment-card,
html[data-theme="dark"][data-theme-area="app"] .category-group,
html[data-theme="dark"][data-theme-area="app"] .info-tile,
html[data-theme="dark"][data-theme-area="app"] .info-box,
html[data-theme="dark"][data-theme-area="app"] .mini-box,
html[data-theme="dark"][data-theme-area="app"] .date-slot-group,
html[data-theme="dark"][data-theme-area="app"] .quick-slots-details,
html[data-theme="dark"][data-theme-area="app"] .date-details,
html[data-theme="dark"][data-theme-area="app"] .slot-form,
html[data-theme="dark"][data-theme-area="app"] .empty,
html[data-theme="dark"][data-theme-area="app"] .notice,
html[data-theme="dark"][data-theme-area="app"] .note-box {
    background: var(--df-app-field) !important;
    border-color: var(--df-line-2) !important;
    color: var(--df-text) !important;
}

html[data-theme="dark"][data-theme-area="app"] .game-card {
    background: linear-gradient(180deg, #171d24 0%, #121820 100%) !important;
}

html[data-theme="dark"][data-theme-area="app"] .appointment-card.past {
    background: #121820 !important;
    opacity: .92;
}

html[data-theme="dark"][data-theme-area="app"] .quick-slots-details > summary,
html[data-theme="dark"][data-theme-area="app"] .date-details summary {
    background: var(--df-section) !important;
    color: var(--df-app-title-soft) !important;
}

html[data-theme="dark"][data-theme-area="app"] .quick-slots-details > summary span {
    color: var(--df-app-title-soft) !important;
}

html[data-theme="dark"][data-theme-area="app"] .game-tournament-title,
html[data-theme="dark"][data-theme-area="app"] .game-tournament-title span,
html[data-theme="dark"][data-theme-area="app"] .game-round-title,
html[data-theme="dark"][data-theme-area="app"] .game-title,
html[data-theme="dark"][data-theme-area="app"] .tournament-heading h3,
html[data-theme="dark"][data-theme-area="app"] .quick-slots h4,
html[data-theme="dark"][data-theme-area="app"] .date-slot-title,
html[data-theme="dark"][data-theme-area="app"] .mini-box h4,
html[data-theme="dark"][data-theme-area="app"] .scolia-label,
html[data-theme="dark"][data-theme-area="app"] .panel h2,
html[data-theme="dark"][data-theme-area="app"] .category-header,
html[data-theme="dark"][data-theme-area="app"] .appointment-title,
html[data-theme="dark"][data-theme-area="app"] .stat-value {
    color: var(--df-app-title-soft) !important;
}

html[data-theme="dark"][data-theme-area="app"] .opponent-link,
html[data-theme="dark"][data-theme-area="app"] .opponent-summary,
html[data-theme="dark"][data-theme-area="app"] .calendar-under-link,
html[data-theme="dark"][data-theme-area="app"] .game-card a:not(.btn):not(.button),
html[data-theme="dark"][data-theme-area="app"] .appointment-card a:not(.btn):not(.button) {
    color: var(--df-app-link-soft) !important;
}

html[data-theme="dark"][data-theme-area="app"] .opponent-link:hover,
html[data-theme="dark"][data-theme-area="app"] .opponent-summary:hover,
html[data-theme="dark"][data-theme-area="app"] .calendar-under-link:hover,
html[data-theme="dark"][data-theme-area="app"] .game-card a:not(.btn):not(.button):hover,
html[data-theme="dark"][data-theme-area="app"] .appointment-card a:not(.btn):not(.button):hover {
    color: var(--df-app-link-strong) !important;
}

html[data-theme="dark"][data-theme-area="app"] .info-label,
html[data-theme="dark"][data-theme-area="app"] .tile-label,
html[data-theme="dark"][data-theme-area="app"] .calendar-link-note,
html[data-theme="dark"][data-theme-area="app"] .note-box,
html[data-theme="dark"][data-theme-area="app"] .panel-sub,
html[data-theme="dark"][data-theme-area="app"] .appointment-card .muted {
    color: var(--df-label) !important;
}

html[data-theme="dark"][data-theme-area="app"] .info-value,
html[data-theme="dark"][data-theme-area="app"] .note-box,
html[data-theme="dark"][data-theme-area="app"] .slot-time,
html[data-theme="dark"][data-theme-area="app"] .scolia-input,
html[data-theme="dark"][data-theme-area="app"] .filter-field select {
    color: var(--df-app-value) !important;
}

html[data-theme="dark"][data-theme-area="app"] .info-box.date,
html[data-theme="dark"][data-theme-area="app"] .info-box.time,
html[data-theme="dark"][data-theme-area="app"] .period-tile:not(.warn):not(.danger),
html[data-theme="dark"][data-theme-area="app"] .period-box:not(.warn):not(.danger),
html[data-theme="dark"][data-theme-area="app"] .index-info-box.period.appointment {
    background: var(--df-ok-bg) !important;
    border-color: var(--df-ok-line) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme="dark"][data-theme-area="app"] .info-box.date .info-label,
html[data-theme="dark"][data-theme-area="app"] .info-box.time .info-label,
html[data-theme="dark"][data-theme-area="app"] .info-box.date .info-value,
html[data-theme="dark"][data-theme-area="app"] .info-box.time .info-value,
html[data-theme="dark"][data-theme-area="app"] .period-tile .tile-label,
html[data-theme="dark"][data-theme-area="app"] .period-tile .period-value {
    color: currentColor !important;
}

html[data-theme="dark"][data-theme-area="app"] .scolia-input,
html[data-theme="dark"][data-theme-area="app"] .filter-field select,
html[data-theme="dark"][data-theme-area="app"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"][data-theme-area="app"] select,
html[data-theme="dark"][data-theme-area="app"] textarea {
    background: var(--df-input) !important;
    border-color: var(--df-line-2) !important;
    color: var(--df-text) !important;
}

html[data-theme="dark"][data-theme-area="app"] .tournament-image,
html[data-theme="dark"][data-theme-area="app"] .game-tournament-image,
html[data-theme="dark"][data-theme-area="app"] .opponent-avatar,
html[data-theme="dark"][data-theme-area="app"] .opponent-avatar-fallback {
    background: var(--df-photo-bg) !important;
    border-color: var(--df-line-2) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] {
        --df-app-title-soft: #c9d8e8;
        --df-app-link-soft: #9ec8ff;
        --df-app-link-strong: #b7d8ff;
        --df-app-field: #111821;
        --df-app-field-2: #162231;
        --df-app-field-3: #1a2834;
        --df-app-value: #dbe7f3;
    }

    html[data-theme="system"][data-theme-area="app"] .game-card,
    html[data-theme="system"][data-theme-area="app"] .appointment-card,
    html[data-theme="system"][data-theme-area="app"] .category-group,
    html[data-theme="system"][data-theme-area="app"] .info-tile,
    html[data-theme="system"][data-theme-area="app"] .info-box,
    html[data-theme="system"][data-theme-area="app"] .mini-box,
    html[data-theme="system"][data-theme-area="app"] .date-slot-group,
    html[data-theme="system"][data-theme-area="app"] .quick-slots-details,
    html[data-theme="system"][data-theme-area="app"] .date-details,
    html[data-theme="system"][data-theme-area="app"] .slot-form,
    html[data-theme="system"][data-theme-area="app"] .empty,
    html[data-theme="system"][data-theme-area="app"] .notice,
    html[data-theme="system"][data-theme-area="app"] .note-box {
        background: var(--df-app-field) !important;
        border-color: var(--df-line-2) !important;
        color: var(--df-text) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .game-card {
        background: linear-gradient(180deg, #171d24 0%, #121820 100%) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .appointment-card.past {
        background: #121820 !important;
        opacity: .92;
    }

    html[data-theme="system"][data-theme-area="app"] .quick-slots-details > summary,
    html[data-theme="system"][data-theme-area="app"] .date-details summary {
        background: var(--df-section) !important;
        color: var(--df-app-title-soft) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .quick-slots-details > summary span {
        color: var(--df-app-title-soft) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .game-tournament-title,
    html[data-theme="system"][data-theme-area="app"] .game-tournament-title span,
    html[data-theme="system"][data-theme-area="app"] .game-round-title,
    html[data-theme="system"][data-theme-area="app"] .game-title,
    html[data-theme="system"][data-theme-area="app"] .tournament-heading h3,
    html[data-theme="system"][data-theme-area="app"] .quick-slots h4,
    html[data-theme="system"][data-theme-area="app"] .date-slot-title,
    html[data-theme="system"][data-theme-area="app"] .mini-box h4,
    html[data-theme="system"][data-theme-area="app"] .scolia-label,
    html[data-theme="system"][data-theme-area="app"] .panel h2,
    html[data-theme="system"][data-theme-area="app"] .category-header,
    html[data-theme="system"][data-theme-area="app"] .appointment-title,
    html[data-theme="system"][data-theme-area="app"] .stat-value {
        color: var(--df-app-title-soft) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .opponent-link,
    html[data-theme="system"][data-theme-area="app"] .opponent-summary,
    html[data-theme="system"][data-theme-area="app"] .calendar-under-link,
    html[data-theme="system"][data-theme-area="app"] .game-card a:not(.btn):not(.button),
    html[data-theme="system"][data-theme-area="app"] .appointment-card a:not(.btn):not(.button) {
        color: var(--df-app-link-soft) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .opponent-link:hover,
    html[data-theme="system"][data-theme-area="app"] .opponent-summary:hover,
    html[data-theme="system"][data-theme-area="app"] .calendar-under-link:hover,
    html[data-theme="system"][data-theme-area="app"] .game-card a:not(.btn):not(.button):hover,
    html[data-theme="system"][data-theme-area="app"] .appointment-card a:not(.btn):not(.button):hover {
        color: var(--df-app-link-strong) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .info-label,
    html[data-theme="system"][data-theme-area="app"] .tile-label,
    html[data-theme="system"][data-theme-area="app"] .calendar-link-note,
    html[data-theme="system"][data-theme-area="app"] .note-box,
    html[data-theme="system"][data-theme-area="app"] .panel-sub,
    html[data-theme="system"][data-theme-area="app"] .appointment-card .muted {
        color: var(--df-label) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .info-value,
    html[data-theme="system"][data-theme-area="app"] .note-box,
    html[data-theme="system"][data-theme-area="app"] .slot-time,
    html[data-theme="system"][data-theme-area="app"] .scolia-input,
    html[data-theme="system"][data-theme-area="app"] .filter-field select {
        color: var(--df-app-value) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .info-box.date,
    html[data-theme="system"][data-theme-area="app"] .info-box.time,
    html[data-theme="system"][data-theme-area="app"] .period-tile:not(.warn):not(.danger),
    html[data-theme="system"][data-theme-area="app"] .period-box:not(.warn):not(.danger),
    html[data-theme="system"][data-theme-area="app"] .index-info-box.period.appointment {
        background: var(--df-ok-bg) !important;
        border-color: var(--df-ok-line) !important;
        color: var(--df-ok-fg) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .info-box.date .info-label,
    html[data-theme="system"][data-theme-area="app"] .info-box.time .info-label,
    html[data-theme="system"][data-theme-area="app"] .info-box.date .info-value,
    html[data-theme="system"][data-theme-area="app"] .info-box.time .info-value,
    html[data-theme="system"][data-theme-area="app"] .period-tile .tile-label,
    html[data-theme="system"][data-theme-area="app"] .period-tile .period-value {
        color: currentColor !important;
    }

    html[data-theme="system"][data-theme-area="app"] .scolia-input,
    html[data-theme="system"][data-theme-area="app"] .filter-field select,
    html[data-theme="system"][data-theme-area="app"] input:not([type="checkbox"]):not([type="radio"]),
    html[data-theme="system"][data-theme-area="app"] select,
    html[data-theme="system"][data-theme-area="app"] textarea {
        background: var(--df-input) !important;
        border-color: var(--df-line-2) !important;
        color: var(--df-text) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .tournament-image,
    html[data-theme="system"][data-theme-area="app"] .game-tournament-image,
    html[data-theme="system"][data-theme-area="app"] .opponent-avatar,
    html[data-theme="system"][data-theme-area="app"] .opponent-avatar-fallback {
        background: var(--df-photo-bg) !important;
        border-color: var(--df-line-2) !important;
    }
}

/* Paket 2: Termine/Kalender im Spielerbereich an theme.css angleichen
   Betrifft nur data-theme-area="app" und die hier angebundenen Termin-/Kalenderseiten. */
html[data-theme-area="app"] body.gc-appointments-overview-page,
html[data-theme-area="app"] body.gc-appointments-table-page,
html[data-theme-area="app"] body.gc-calendar-page,
html[data-theme-area="app"] body.gc-calendar-user-page,
html[data-theme-area="app"] body.gc-appointment-form-page,
html[data-theme-area="app"] body.gc-rescheduling-page {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    html[data-theme-area="app"]:not([data-theme="light"]) {
        --df-bg: #0f1318;
        --df-card: #171d24;
        --df-section: #121820;
        --df-section-2: #10161d;
        --df-text: #e8eef5;
        --df-heading: #f4f8fb;
        --df-muted: #a9b5c2;
        --df-muted-2: #b5c0cc;
        --df-label: #9fb7cf;
        --df-line: #2a3440;
        --df-line-2: #354454;
        --df-blue: #007acc;
        --df-blue-dark: #005f9e;
        --df-secondary: #334155;
        --df-secondary-hover: #475569;
        --df-input: #0f151c;
        --df-input-readonly: #111821;
        --df-input-readonly-text: #aeb8c4;
        --df-pill-bg: #10161d;
        --df-pill-text: #d8e2eb;
        --df-ok-bg: #102418;
        --df-ok-fg: #7ee08b;
        --df-ok-line: #2b6b3c;
        --df-err-bg: #2a1315;
        --df-err-fg: #ff8a8a;
        --df-err-line: #6b2b31;
        --df-warn-bg: #3d3013;
        --df-warn-fg: #ffd166;
        --df-warn-line: #6b531a;
        --df-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        color-scheme: dark;
    }

    html[data-theme-area="app"] body.gc-appointments-overview-page,
    html[data-theme-area="app"] body.gc-appointments-table-page,
    html[data-theme-area="app"] body.gc-calendar-page,
    html[data-theme-area="app"] body.gc-calendar-user-page,
    html[data-theme-area="app"] body.gc-appointment-form-page,
    html[data-theme-area="app"] body.gc-rescheduling-page {
        background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme="dark"][data-theme-area="app"] body.gc-appointments-overview-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-appointments-table-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-calendar-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-calendar-user-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-appointment-form-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-rescheduling-page {
    background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
}

html[data-theme-area="app"] body.gc-appointments-table-page .container-custom,
html[data-theme-area="app"] body.gc-calendar-user-page .calendar-container,
html[data-theme-area="app"] body.gc-calendar-page > .container,
html[data-theme-area="app"] body.gc-rescheduling-page > .container,
html[data-theme-area="app"] body.gc-appointment-form-page .container-custom,
html[data-theme-area="app"] body.gc-appointment-form-page .container[style] {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--df-shadow) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page > h2,
html[data-theme-area="app"] body.gc-appointments-table-page h1,
html[data-theme-area="app"] body.gc-appointments-table-page h2,
html[data-theme-area="app"] body.gc-calendar-page h1,
html[data-theme-area="app"] body.gc-calendar-page h2,
html[data-theme-area="app"] body.gc-calendar-user-page h1,
html[data-theme-area="app"] body.gc-calendar-user-page h2,
html[data-theme-area="app"] body.gc-appointment-form-page h1,
html[data-theme-area="app"] body.gc-appointment-form-page h2,
html[data-theme-area="app"] body.gc-appointment-form-page h3,
html[data-theme-area="app"] body.gc-rescheduling-page h1,
html[data-theme-area="app"] body.gc-rescheduling-page h2,
html[data-theme-area="app"] body.gc-rescheduling-page h3 {
    color: var(--df-heading) !important;
    font-weight: 900;
}

html[data-theme-area="app"] body.gc-appointments-overview-page label,
html[data-theme-area="app"] body.gc-appointments-table-page label,
html[data-theme-area="app"] body.gc-calendar-user-page label,
html[data-theme-area="app"] body.gc-appointment-form-page label,
html[data-theme-area="app"] body.gc-rescheduling-page label {
    color: var(--df-label) !important;
    font-weight: 800;
}

html[data-theme-area="app"] body.gc-appointments-overview-page form,
html[data-theme-area="app"] body.gc-appointments-table-page form,
html[data-theme-area="app"] body.gc-calendar-user-page form,
html[data-theme-area="app"] body.gc-appointment-form-page form,
html[data-theme-area="app"] body.gc-rescheduling-page form {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page select,
html[data-theme-area="app"] body.gc-appointments-table-page .form-select,
html[data-theme-area="app"] body.gc-calendar-user-page .form-select,
html[data-theme-area="app"] body.gc-appointment-form-page .form-control,
html[data-theme-area="app"] body.gc-appointment-form-page .form-select,
html[data-theme-area="app"] body.gc-rescheduling-page .form-control,
html[data-theme-area="app"] body.gc-rescheduling-page textarea,
html[data-theme-area="app"] body.gc-rescheduling-page input,
html[data-theme-area="app"] body.gc-rescheduling-page select {
    background: var(--df-input) !important;
    color: var(--df-text) !important;
    border-color: var(--df-line-2) !important;
    border-radius: 10px;
    color-scheme: inherit;
}

html[data-theme-area="app"] body.gc-appointments-overview-page button,
html[data-theme-area="app"] body.gc-appointments-table-page .btn,
html[data-theme-area="app"] body.gc-calendar-page .btn,
html[data-theme-area="app"] body.gc-calendar-user-page .btn,
html[data-theme-area="app"] body.gc-appointment-form-page .btn,
html[data-theme-area="app"] body.gc-rescheduling-page .btn {
    border-radius: 10px;
    font-weight: 800;
}

html[data-theme-area="app"] body.gc-appointments-overview-page button,
html[data-theme-area="app"] body.gc-appointments-table-page .btn-primary,
html[data-theme-area="app"] body.gc-calendar-page .btn-primary,
html[data-theme-area="app"] body.gc-calendar-user-page .btn-primary,
html[data-theme-area="app"] body.gc-appointment-form-page .btn-primary,
html[data-theme-area="app"] body.gc-appointment-form-page .btn-success,
html[data-theme-area="app"] body.gc-rescheduling-page .btn-primary,
html[data-theme-area="app"] body.gc-rescheduling-page .btn-success {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-appointments-table-page .btn-secondary,
html[data-theme-area="app"] body.gc-calendar-page .btn-secondary,
html[data-theme-area="app"] body.gc-calendar-user-page .btn-secondary,
html[data-theme-area="app"] body.gc-appointment-form-page .btn-secondary,
html[data-theme-area="app"] body.gc-rescheduling-page .btn-secondary {
    background: var(--df-secondary) !important;
    border-color: var(--df-secondary) !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .btn-outline-primary {
    color: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .btn-outline-primary:hover {
    background: var(--df-blue) !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .btn-outline-danger {
    color: var(--df-err-fg) !important;
    border-color: var(--df-err-line) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .btn-outline-danger:hover {
    background: var(--df-err-bg) !important;
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page .appointment,
html[data-theme-area="app"] body.gc-appointment-form-page details,
html[data-theme-area="app"] body.gc-rescheduling-page .edit-form {
    background: var(--df-section-2) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page .appointment {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page .date,
html[data-theme-area="app"] body.gc-appointments-overview-page .time,
html[data-theme-area="app"] body.gc-appointments-overview-page .players,
html[data-theme-area="app"] body.gc-appointments-overview-page .title {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page .date {
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page .players {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-appointments-overview-page a {
    color: var(--df-blue) !important;
    font-weight: 800;
}

html[data-theme-area="app"] body.gc-appointments-overview-page p,
html[data-theme-area="app"] body.gc-appointments-table-page p,
html[data-theme-area="app"] body.gc-calendar-user-page .text-muted,
html[data-theme-area="app"] body.gc-appointment-form-page p,
html[data-theme-area="app"] body.gc-rescheduling-page .text-muted {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-appointments-table-page .table,
html[data-theme-area="app"] body.gc-appointments-table-page .table-bordered,
html[data-theme-area="app"] body.gc-appointments-table-page .table-striped {
    --bs-table-bg: var(--df-card);
    --bs-table-color: var(--df-text);
    --bs-table-striped-bg: var(--df-section-2);
    --bs-table-striped-color: var(--df-text);
    --bs-table-border-color: var(--df-line);
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-appointments-table-page .table th,
html[data-theme-area="app"] body.gc-appointments-table-page .table td {
    background-color: transparent !important;
    color: var(--df-text) !important;
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-appointments-table-page .table thead th {
    background: var(--df-section) !important;
    color: var(--df-label) !important;
    font-weight: 900;
}

html[data-theme-area="app"] body.gc-appointments-table-page .alert-info,
html[data-theme-area="app"] body.gc-calendar-user-page .alert-warning,
html[data-theme-area="app"] body.gc-appointment-form-page .alert-warning,
html[data-theme-area="app"] body.gc-rescheduling-page .alert {
    border-radius: 12px;
    font-weight: 800;
}

html[data-theme-area="app"] body.gc-appointments-table-page .alert-info {
    background: var(--df-section-2) !important;
    color: var(--df-muted) !important;
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-calendar-user-page .alert-warning,
html[data-theme-area="app"] body.gc-appointment-form-page .alert-warning {
    background: var(--df-warn-bg) !important;
    color: var(--df-warn-fg) !important;
    border-color: var(--df-warn-line) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .alert-success {
    background: var(--df-ok-bg) !important;
    color: var(--df-ok-fg) !important;
    border-color: var(--df-ok-line) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .alert-danger {
    background: var(--df-err-bg) !important;
    color: var(--df-err-fg) !important;
    border-color: var(--df-err-line) !important;
}

html[data-theme-area="app"] body.gc-calendar-page #calendar,
html[data-theme-area="app"] body.gc-calendar-user-page #calendar {
    background: var(--df-section-2) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 14px !important;
    padding: 10px;
}

html[data-theme-area="app"] body.gc-calendar-page .fc,
html[data-theme-area="app"] body.gc-calendar-user-page .fc {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc-theme-standard .fc-scrollgrid,
html[data-theme-area="app"] body.gc-calendar-page .fc-theme-standard td,
html[data-theme-area="app"] body.gc-calendar-page .fc-theme-standard th,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-theme-standard .fc-scrollgrid,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-theme-standard td,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-theme-standard th {
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc-col-header-cell a,
html[data-theme-area="app"] body.gc-calendar-page .fc-daygrid-day-number,
html[data-theme-area="app"] body.gc-calendar-page .fc-timegrid-axis-cushion,
html[data-theme-area="app"] body.gc-calendar-page .fc-timegrid-slot-label-cushion,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-col-header-cell a,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-daygrid-day-number,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-timegrid-axis-cushion,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-timegrid-slot-label-cushion {
    color: var(--df-text) !important;
    text-decoration: none !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc .fc-button,
html[data-theme-area="app"] body.gc-calendar-user-page .fc .fc-button {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc .fc-button:hover,
html[data-theme-area="app"] body.gc-calendar-page .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-theme-area="app"] body.gc-calendar-user-page .fc .fc-button:hover,
html[data-theme-area="app"] body.gc-calendar-user-page .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc .fc-button:disabled,
html[data-theme-area="app"] body.gc-calendar-user-page .fc .fc-button:disabled {
    opacity: .65 !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc-timegrid-slot,
html[data-theme-area="app"] body.gc-calendar-user-page .fc-timegrid-slot {
    background: transparent !important;
}

html[data-theme-area="app"] body.gc-calendar-page .fc .fc-highlight,
html[data-theme-area="app"] body.gc-calendar-user-page .fc .fc-highlight {
    background: color-mix(in srgb, var(--df-blue) 18%, transparent) !important;
}

html[data-theme-area="app"] body.gc-calendar-page .modal-content,
html[data-theme-area="app"] body.gc-calendar-user-page .modal-content {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 16px !important;
}

html[data-theme-area="app"] body.gc-calendar-page .modal-header,
html[data-theme-area="app"] body.gc-calendar-page .modal-footer,
html[data-theme-area="app"] body.gc-calendar-user-page .modal-header,
html[data-theme-area="app"] body.gc-calendar-user-page .modal-footer {
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-calendar-page .btn-close,
html[data-theme-area="app"] body.gc-calendar-user-page .btn-close {
    filter: none;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-calendar-page .btn-close,
html[data-theme="dark"][data-theme-area="app"] body.gc-calendar-user-page .btn-close {
    filter: invert(1) grayscale(100%);
}

@media (prefers-color-scheme: dark) {
    html[data-theme-area="app"]:not([data-theme="light"]) body.gc-calendar-page .btn-close,
    html[data-theme-area="app"]:not([data-theme="light"]) body.gc-calendar-user-page .btn-close {
        filter: invert(1) grayscale(100%);
    }
}

html[data-theme-area="app"] body.gc-appointment-form-page .mb-2,
html[data-theme-area="app"] body.gc-appointment-form-page li,
html[data-theme-area="app"] body.gc-rescheduling-page .reschedule-list li {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-appointment-form-page details {
    margin: 12px 0;
    padding: 0;
    overflow: hidden;
}

html[data-theme-area="app"] body.gc-appointment-form-page summary {
    cursor: pointer;
    padding: 12px 14px;
    background: var(--df-section) !important;
    color: var(--df-heading) !important;
    border-bottom: 1px solid var(--df-line);
    font-weight: 900;
}

html[data-theme-area="app"] body.gc-appointment-form-page details ul {
    margin: 0;
    padding: 12px 14px 12px 34px;
}

html[data-theme-area="app"] body.gc-appointment-form-page details li {
    margin: 8px 0;
}

html[data-theme-area="app"] body.gc-rescheduling-page .reschedule-list {
    margin: 0;
}

html[data-theme-area="app"] body.gc-rescheduling-page .reschedule-list li {
    border-bottom-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .reschedule-list strong {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-rescheduling-page .edit-form label {
    display: block;
}

/* Index: offene Spiele - Bewerb/Gegner im Darkmode dezenter
   Hauptüberschriften bleiben weiß, Detailwerte werden farblich abgestuft. */
html[data-theme="dark"][data-theme-area="app"] .hero h1,
html[data-theme="dark"][data-theme-area="app"] .games-block-title,
html[data-theme="dark"][data-theme-area="app"] .panel h2 {
    color: var(--df-heading) !important;
}

html[data-theme="dark"][data-theme-area="app"] .index-games .index-game-title,
html[data-theme="dark"][data-theme-area="app"] .index-games .index-game-tournament {
    color: #9fb7cf !important;
}

html[data-theme="dark"][data-theme-area="app"] .index-games .index-title-sep {
    color: #718296 !important;
}

html[data-theme="dark"][data-theme-area="app"] .index-games .index-info-box:not(.period) .index-info-label {
    color: #879db4 !important;
}

html[data-theme="dark"][data-theme-area="app"] .index-games .index-opponent-name {
    color: #c2d2e3 !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] .hero h1,
    html[data-theme="system"][data-theme-area="app"] .games-block-title,
    html[data-theme="system"][data-theme-area="app"] .panel h2 {
        color: var(--df-heading) !important;
    }

    html[data-theme="system"][data-theme-area="app"] .index-games .index-game-title,
    html[data-theme="system"][data-theme-area="app"] .index-games .index-game-tournament {
        color: #9fb7cf !important;
    }

    html[data-theme="system"][data-theme-area="app"] .index-games .index-title-sep {
        color: #718296 !important;
    }

    html[data-theme="system"][data-theme-area="app"] .index-games .index-info-box:not(.period) .index-info-label {
        color: #879db4 !important;
    }

    html[data-theme="system"][data-theme-area="app"] .index-games .index-opponent-name {
        color: #c2d2e3 !important;
    }
}

/* Turnieranmeldung: Theme-Anbindung für tournaments.php
   Nur Darstellung/Farben. Keine Logik, Sortierung oder Selektion. */
html[data-theme-area="app"] body.gc-tournaments-page {
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page {
    background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page {
        background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme-area="app"] body.gc-tournaments-page .wrap {
    max-width: 1180px;
}

html[data-theme-area="app"] body.gc-tournaments-page .hero,
html[data-theme-area="app"] body.gc-tournaments-page .card,
html[data-theme-area="app"] body.gc-tournaments-page .past-row,
html[data-theme-area="app"] body.gc-tournaments-page .empty-state {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    box-shadow: var(--df-shadow) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .hero {
    background: linear-gradient(135deg, var(--df-card) 0%, var(--df-section) 100%) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .hero h1,
html[data-theme-area="app"] body.gc-tournaments-page .section-title,
html[data-theme-area="app"] body.gc-tournaments-page .participants h3 {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .hero p,
html[data-theme-area="app"] body.gc-tournaments-page .desc,
html[data-theme-area="app"] body.gc-tournaments-page .info,
html[data-theme-area="app"] body.gc-tournaments-page .muted,
html[data-theme-area="app"] body.gc-tournaments-page .past-sub,
html[data-theme-area="app"] body.gc-tournaments-page .empty-state {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .name,
html[data-theme-area="app"] body.gc-tournaments-page .past-title {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .thumb,
html[data-theme-area="app"] body.gc-tournaments-page .past-thumb,
html[data-theme-area="app"] body.gc-tournaments-page .thumb.empty {
    background: var(--df-photo-bg) !important;
    border: 1px solid var(--df-line) !important;
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .badge,
html[data-theme-area="app"] body.gc-tournaments-page .pill,
html[data-theme-area="app"] body.gc-tournaments-page .name-pill,
html[data-theme-area="app"] body.gc-tournaments-page .status-row .pill[style] {
    background: var(--df-pill-bg) !important;
    color: var(--df-label) !important;
    border: 1px solid var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .badge.green,
html[data-theme-area="app"] body.gc-tournaments-page .season.ok,
html[data-theme-area="app"] body.gc-tournaments-page .msg.ok {
    background: var(--df-ok-bg) !important;
    color: var(--df-ok-fg) !important;
    border-color: var(--df-ok-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .badge.orange,
html[data-theme-area="app"] body.gc-tournaments-page .season.warn,
html[data-theme-area="app"] body.gc-tournaments-page .msg.warn {
    background: var(--df-warn-bg) !important;
    color: var(--df-warn-fg) !important;
    border-color: var(--df-warn-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .badge.red,
html[data-theme-area="app"] body.gc-tournaments-page .season.bad,
html[data-theme-area="app"] body.gc-tournaments-page .msg.error {
    background: var(--df-err-bg) !important;
    color: var(--df-err-fg) !important;
    border-color: var(--df-err-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .fact {
    background: var(--df-section) !important;
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .fact .label {
    color: var(--df-label) !important;
    font-weight: 900;
}

html[data-theme-area="app"] body.gc-tournaments-page .fact .value {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .participants,
html[data-theme-area="app"] body.gc-tournaments-page .past-detail {
    border-color: var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .past-row-header:hover {
    background: var(--df-section) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .chev {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn {
    border: 1px solid transparent !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn-primary {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn-primary:hover {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn-back,
html[data-theme-area="app"] body.gc-tournaments-page .btn-muted {
    background: var(--df-secondary) !important;
    border-color: var(--df-secondary) !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn-back:hover,
html[data-theme-area="app"] body.gc-tournaments-page .btn-muted:hover {
    background: var(--df-secondary-hover) !important;
    border-color: var(--df-secondary-hover) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .btn-danger {
    background: var(--df-err-bg) !important;
    border-color: var(--df-err-line) !important;
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .toggle-link {
    color: var(--df-blue) !important;
}

html[data-theme-area="app"] body.gc-tournaments-page .toggle-link:hover {
    color: var(--df-blue-dark) !important;
    text-decoration: underline;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .section-title,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .hero h1,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .participants h3 {
    color: var(--df-heading) !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .name,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .past-title {
    color: #c2d2e3 !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .desc,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .past-sub,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .info,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .muted {
    color: #a9b5c2 !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .fact .value,
html[data-theme="dark"][data-theme-area="app"] body.gc-tournaments-page .name-pill {
    color: #d8e2eb !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .section-title,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .hero h1,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .participants h3 {
        color: var(--df-heading) !important;
    }

    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .name,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .past-title {
        color: #c2d2e3 !important;
    }

    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .desc,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .past-sub,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .info,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .muted {
        color: #a9b5c2 !important;
    }

    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .fact .value,
    html[data-theme="system"][data-theme-area="app"] body.gc-tournaments-page .name-pill {
        color: #d8e2eb !important;
    }
}

/* Paket 3: Verfügbarkeiten / Blockzeiten im Spielerbereich ---------------
   Nur Theme-/CSS-Abdeckung, keine Funktionslogik. */
html[data-theme-area="app"] body.gc-availability-page {
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
    margin: 0 !important;
    min-height: 100vh !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-availability-page {
    background: radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-availability-page {
        background: radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme-area="app"] body.gc-availability-page > .container,
html[data-theme-area="app"] body.gc-availability-page > .container-custom {
    max-width: 650px !important;
    margin: 40px auto !important;
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--df-shadow) !important;
    padding: 28px 30px 36px !important;
}

html[data-theme-area="app"] body.gc-edit-availability-page > .container-custom {
    max-width: 560px !important;
}

html[data-theme-area="app"] body.gc-availability-page h1,
html[data-theme-area="app"] body.gc-availability-page h2,
html[data-theme-area="app"] body.gc-availability-page h3 {
    color: var(--df-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -.01em;
}

html[data-theme-area="app"] body.gc-availability-page h2 + h2,
html[data-theme-area="app"] body.gc-availability-page ul + h2,
html[data-theme-area="app"] body.gc-availability-page .add-avail-form + h2,
html[data-theme-area="app"] body.gc-availability-page .add-block-form + h2 {
    margin-top: 24px !important;
}

html[data-theme-area="app"] body.gc-availability-page .note,
html[data-theme-area="app"] body.gc-availability-page .form-text,
html[data-theme-area="app"] body.gc-availability-page small,
html[data-theme-area="app"] body.gc-availability-page .text-muted {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-availability-page label,
html[data-theme-area="app"] body.gc-availability-page .form-label {
    color: var(--df-label) !important;
    font-weight: 800 !important;
}

html[data-theme-area="app"] body.gc-availability-page input[type="text"],
html[data-theme-area="app"] body.gc-availability-page input[type="date"],
html[data-theme-area="app"] body.gc-availability-page input[type="time"],
html[data-theme-area="app"] body.gc-availability-page input[type="email"],
html[data-theme-area="app"] body.gc-availability-page select,
html[data-theme-area="app"] body.gc-availability-page textarea,
html[data-theme-area="app"] body.gc-availability-page .form-control,
html[data-theme-area="app"] body.gc-availability-page .form-select,
html[data-theme-area="app"] body.gc-availability-page .flatpickr-input[readonly] {
    background: var(--df-input) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line-2) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color-scheme: inherit !important;
}

html[data-theme-area="app"] body.gc-availability-page input:focus,
html[data-theme-area="app"] body.gc-availability-page select:focus,
html[data-theme-area="app"] body.gc-availability-page textarea:focus,
html[data-theme-area="app"] body.gc-availability-page .form-control:focus,
html[data-theme-area="app"] body.gc-availability-page .form-select:focus {
    border-color: var(--df-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-blue) 22%, transparent) !important;
    outline: none !important;
}

html[data-theme-area="app"] body.gc-availability-page input::placeholder,
html[data-theme-area="app"] body.gc-availability-page textarea::placeholder {
    color: var(--df-muted) !important;
    opacity: .85 !important;
}

html[data-theme-area="app"] body.gc-availability-page .add-avail-form,
html[data-theme-area="app"] body.gc-availability-page .add-block-form {
    background: var(--df-section) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 14px !important;
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-availability-page .row {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-availability-page ul.avail-list,
html[data-theme-area="app"] body.gc-availability-page ul.unavail-list {
    padding: 0 !important;
    list-style: none !important;
}

html[data-theme-area="app"] body.gc-availability-page ul.avail-list li,
html[data-theme-area="app"] body.gc-availability-page ul.unavail-list li {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 11px 14px !important;
    font-weight: 800 !important;
    gap: 12px !important;
}

html[data-theme-area="app"] body.gc-availability-page ul.avail-list li {
    background: var(--df-ok-bg) !important;
    border: 1px solid var(--df-ok-line) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-availability-page ul.unavail-list li {
    background: var(--df-err-bg) !important;
    border: 1px solid var(--df-err-line) !important;
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-availability-page .unavail-desc {
    color: var(--df-err-fg) !important;
    opacity: .88 !important;
}

html[data-theme-area="app"] body.gc-availability-page .avail-delete button,
html[data-theme-area="app"] body.gc-availability-page .unavail-delete button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 6px !important;
    text-decoration: underline !important;
    font-weight: 900 !important;
}

html[data-theme-area="app"] body.gc-availability-page .avail-delete button {
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-availability-page .unavail-delete button {
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-availability-page .avail-delete button:hover,
html[data-theme-area="app"] body.gc-availability-page .unavail-delete button:hover {
    filter: brightness(1.12) !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn,
html[data-theme-area="app"] body.gc-availability-page button[type="submit"] {
    border-radius: 10px !important;
    font-weight: 900 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn-primary,
html[data-theme-area="app"] body.gc-availability-page .btn-success,
html[data-theme-area="app"] body.gc-availability-page button[type="submit"] {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
    color: #ffffff !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn-primary:hover,
html[data-theme-area="app"] body.gc-availability-page .btn-success:hover,
html[data-theme-area="app"] body.gc-availability-page button[type="submit"]:hover {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
    color: #ffffff !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn-secondary {
    background: var(--df-section) !important;
    border-color: var(--df-line-2) !important;
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn-secondary:hover {
    border-color: var(--df-blue) !important;
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-availability-page .btn-row {
    flex-wrap: wrap !important;
}

html[data-theme-area="app"] body.gc-availability-page p[style*="color:green"],
html[data-theme-area="app"] body.gc-availability-page p[style*="color: green"] {
    color: var(--df-ok-fg) !important;
    background: var(--df-ok-bg) !important;
    border: 1px solid var(--df-ok-line) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    font-weight: 800 !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-availability-page .btn-secondary,
html[data-theme="dark"][data-theme-area="app"] body.gc-availability-page .add-avail-form,
html[data-theme="dark"][data-theme-area="app"] body.gc-availability-page .add-block-form {
    background: #111821 !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-availability-page .btn-secondary,
    html[data-theme="system"][data-theme-area="app"] body.gc-availability-page .add-avail-form,
    html[data-theme="system"][data-theme-area="app"] body.gc-availability-page .add-block-form {
        background: #111821 !important;
    }
}

/* Flatpickr wird direkt an <body> gehängt, deshalb nicht an Seitenklasse binden. */
html[data-theme="dark"][data-theme-area="app"] .flatpickr-calendar,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-months,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-weekdays,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-current-month,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-innerContainer,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-rContainer,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-days,
html[data-theme="dark"][data-theme-area="app"] .dayContainer {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border-color: var(--df-line) !important;
}

html[data-theme="dark"][data-theme-area="app"] .flatpickr-calendar {
    border: 1px solid var(--df-line-2) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.36) !important;
}

html[data-theme="dark"][data-theme-area="app"] .flatpickr-day,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-weekday,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--df-text) !important;
}

html[data-theme="dark"][data-theme-area="app"] .flatpickr-day:hover,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-day.selected,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-day.startRange,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-day.endRange {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
    color: #fff !important;
}

html[data-theme="dark"][data-theme-area="app"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"][data-theme-area="app"] .flatpickr-day.nextMonthDay {
    color: var(--df-muted) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] .flatpickr-calendar,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-months,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-weekdays,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-current-month,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-innerContainer,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-rContainer,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-days,
    html[data-theme="system"][data-theme-area="app"] .dayContainer {
        background: var(--df-card) !important;
        color: var(--df-text) !important;
        border-color: var(--df-line) !important;
    }
    html[data-theme="system"][data-theme-area="app"] .flatpickr-calendar {
        border: 1px solid var(--df-line-2) !important;
        box-shadow: 0 18px 50px rgba(0,0,0,.36) !important;
    }
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-weekday,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-current-month input.cur-year,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-current-month .flatpickr-monthDropdown-months {
        color: var(--df-text) !important;
    }
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day:hover,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day.selected,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day.startRange,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day.endRange {
        background: var(--df-blue) !important;
        border-color: var(--df-blue) !important;
        color: #fff !important;
    }
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day.prevMonthDay,
    html[data-theme="system"][data-theme-area="app"] .flatpickr-day.nextMonthDay {
        color: var(--df-muted) !important;
    }
}

@media (max-width: 640px) {
    html[data-theme-area="app"] body.gc-availability-page {
        padding: 14px !important;
    }
    html[data-theme-area="app"] body.gc-availability-page > .container,
    html[data-theme-area="app"] body.gc-availability-page > .container-custom {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 18px 16px 22px !important;
    }
    html[data-theme-area="app"] body.gc-availability-page .btn,
    html[data-theme-area="app"] body.gc-availability-page button[type="submit"] {
        width: 100% !important;
        justify-content: center !important;
    }
    html[data-theme-area="app"] body.gc-availability-page ul.avail-list li,
    html[data-theme-area="app"] body.gc-availability-page ul.unavail-list li {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    html[data-theme-area="app"] body.gc-availability-page .avail-delete,
    html[data-theme-area="app"] body.gc-availability-page .unavail-delete {
        margin-left: 0 !important;
    }
}

/* Paket 4: Mitarbeiterseiten im offenen Bereich (nur Theme/CSS) -------- */
html[data-theme-area="app"] body.gc-staff-open-games-page,
html[data-theme-area="app"] body.gc-staff-appointments-page {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
    margin: 0;
    min-height: 100vh;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-staff-open-games-page,
html[data-theme="dark"][data-theme-area="app"] body.gc-staff-appointments-page {
    background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-staff-open-games-page,
    html[data-theme="system"][data-theme-area="app"] body.gc-staff-appointments-page {
        background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme-area="app"] body.gc-staff-open-games-page .wrap {
    max-width: 1280px;
}

html[data-theme-area="app"] body.gc-staff-appointments-page .wrap {
    max-width: 1150px;
    background: var(--df-card) !important;
    border: 1px solid var(--df-line) !important;
    color: var(--df-text) !important;
    box-shadow: var(--df-shadow) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .card,
html[data-theme-area="app"] body.gc-staff-appointments-page .card {
    background: var(--df-card) !important;
    border: 1px solid var(--df-line) !important;
    color: var(--df-text) !important;
    box-shadow: var(--df-shadow) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page h1,
html[data-theme-area="app"] body.gc-staff-open-games-page h2,
html[data-theme-area="app"] body.gc-staff-appointments-page h1,
html[data-theme-area="app"] body.gc-staff-appointments-page h2 {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .muted,
html[data-theme-area="app"] body.gc-staff-appointments-page .muted,
html[data-theme-area="app"] body.gc-staff-appointments-page .note {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page label,
html[data-theme-area="app"] body.gc-staff-appointments-page label {
    color: var(--df-label) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page select,
html[data-theme-area="app"] body.gc-staff-appointments-page select {
    background: var(--df-input) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line-2) !important;
    color-scheme: inherit;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn,
html[data-theme-area="app"] body.gc-staff-appointments-page .btn {
    background: var(--df-blue) !important;
    border: 1px solid var(--df-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn:hover,
html[data-theme-area="app"] body.gc-staff-appointments-page .btn:hover {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-secondary,
html[data-theme-area="app"] body.gc-staff-appointments-page .btn-secondary {
    background: var(--df-secondary) !important;
    border-color: var(--df-secondary) !important;
    color: #fff !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-secondary:hover,
html[data-theme-area="app"] body.gc-staff-appointments-page .btn-secondary:hover {
    background: var(--df-secondary-hover) !important;
    border-color: var(--df-secondary-hover) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-win-left {
    background: var(--df-ok-bg) !important;
    border-color: var(--df-ok-line) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-win-left:hover {
    filter: brightness(1.08);
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-win-right {
    background: var(--df-warn-bg) !important;
    border-color: var(--df-warn-line) !important;
    color: var(--df-warn-fg) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-win-right:hover {
    filter: brightness(1.06);
}

html[data-theme-area="app"] body.gc-staff-open-games-page .btn-disabled,
html[data-theme-area="app"] body.gc-staff-open-games-page .btn:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    filter: grayscale(.2) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page table,
html[data-theme-area="app"] body.gc-staff-appointments-page table {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border-collapse: separate;
}

html[data-theme-area="app"] body.gc-staff-open-games-page th,
html[data-theme-area="app"] body.gc-staff-open-games-page td,
html[data-theme-area="app"] body.gc-staff-appointments-page th,
html[data-theme-area="app"] body.gc-staff-appointments-page td {
    border-bottom-color: var(--df-line) !important;
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page th,
html[data-theme-area="app"] body.gc-staff-appointments-page th {
    background: var(--df-section) !important;
    color: var(--df-label) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page tbody tr:hover td,
html[data-theme-area="app"] body.gc-staff-appointments-page tbody tr:hover td {
    background: color-mix(in srgb, var(--df-section) 88%, var(--df-blue)) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page td strong,
html[data-theme-area="app"] body.gc-staff-appointments-page td strong,
html[data-theme-area="app"] body.gc-staff-open-games-page .player {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .vs {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .mono,
html[data-theme-area="app"] body.gc-staff-appointments-page .mono {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .pill {
    background: var(--df-pill-bg) !important;
    border: 1px solid var(--df-line) !important;
    color: var(--df-label) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .alert,
html[data-theme-area="app"] body.gc-staff-appointments-page .alert {
    border: 1px solid var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .alert-info,
html[data-theme-area="app"] body.gc-staff-appointments-page .alert-info {
    background: var(--df-pill-bg) !important;
    border-color: var(--df-line-2) !important;
    color: var(--df-label) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .alert-ok,
html[data-theme-area="app"] body.gc-staff-appointments-page .alert-ok {
    background: var(--df-ok-bg) !important;
    border-color: var(--df-ok-line) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-staff-open-games-page .alert-error,
html[data-theme-area="app"] body.gc-staff-appointments-page .alert-error {
    background: var(--df-err-bg) !important;
    border-color: var(--df-err-line) !important;
    color: var(--df-err-fg) !important;
}

@media (max-width: 900px) {
    html[data-theme-area="app"] body.gc-staff-open-games-page tr {
        border-color: var(--df-line) !important;
        background: var(--df-card) !important;
    }
    html[data-theme-area="app"] body.gc-staff-open-games-page td::before {
        color: var(--df-label) !important;
    }
}
/* Loginseite im Spielerbereich ------------------------------------------------
   Nur Theme-/CSS-Abdeckung, keine Login-Logik. */
html[data-theme-area="app"] body.gc-login-page {
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-login-page {
    background: radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-login-page {
        background: radial-gradient(circle at 18% 0%, rgba(73,201,91,.10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme-area="app"] body.gc-login-page .login-container {
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--df-shadow) !important;
    padding: 36px 38px 32px !important;
    max-width: 390px !important;
    width: min(94vw, 390px) !important;
}

html[data-theme-area="app"] body.gc-login-page h2 {
    color: var(--df-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 24px !important;
    text-align: center !important;
}

html[data-theme-area="app"] body.gc-login-page .login-form label {
    color: var(--df-label) !important;
    font-weight: 800 !important;
    margin: 12px 0 6px 2px !important;
}

html[data-theme-area="app"] body.gc-login-page .login-form input[type="text"],
html[data-theme-area="app"] body.gc-login-page .login-form input[type="password"] {
    width: 100% !important;
    background: var(--df-input) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line-2) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font: inherit !important;
    font-size: 1.02rem !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
    color-scheme: inherit !important;
}

html[data-theme-area="app"] body.gc-login-page .login-form input[type="text"]:focus,
html[data-theme-area="app"] body.gc-login-page .login-form input[type="password"]:focus {
    outline: none !important;
    border-color: var(--df-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-blue) 22%, transparent) !important;
}

html[data-theme-area="app"] body.gc-login-page .login-form button[type="submit"] {
    width: 100% !important;
    background: var(--df-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--df-blue) !important;
    border-radius: 11px !important;
    padding: 12px 0 !important;
    font: inherit !important;
    font-size: 1.06rem !important;
    font-weight: 900 !important;
    margin-top: 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-login-page .login-form button[type="submit"]:hover,
html[data-theme-area="app"] body.gc-login-page .login-form button[type="submit"]:focus-visible {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
    color: #ffffff !important;
}

html[data-theme-area="app"] body.gc-login-page .error {
    color: var(--df-err-fg) !important;
    background: var(--df-err-bg) !important;
    border: 1px solid var(--df-err-line) !important;
    border-radius: 12px !important;
    padding: 11px 12px !important;
    margin: 12px 0 0 !important;
    text-align: center !important;
    font-weight: 800 !important;
}

html[data-theme-area="app"] body.gc-login-page .small-note {
    color: var(--df-muted) !important;
    text-align: center !important;
    margin-top: 18px !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
}

@media (max-width: 520px) {
    html[data-theme-area="app"] body.gc-login-page {
        padding: 14px !important;
        align-items: flex-start !important;
    }
    html[data-theme-area="app"] body.gc-login-page .login-container {
        margin-top: 24px !important;
        padding: 26px 22px 24px !important;
        width: 100% !important;
    }
}

/* Paket Ergänzung: manage_requests.php im allgemeinen Spielerbereich */
html[data-theme-area="app"] body.gc-manage-requests-page {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-bg) 100%) !important;
    color: var(--df-text) !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

html[data-theme="dark"][data-theme-area="app"] body.gc-manage-requests-page {
    background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-theme-area="app"] body.gc-manage-requests-page {
        background: radial-gradient(circle at 18% 0%, rgba(73, 201, 91, .10), transparent 30%), var(--df-bg) !important;
    }
}

html[data-theme-area="app"] body.gc-manage-requests-page .card {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 22px !important;
    background: var(--df-card) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--df-shadow) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page h1,
html[data-theme-area="app"] body.gc-manage-requests-page h2 {
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page h1 {
    margin: 0 0 16px !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page h2 {
    margin: 28px 0 14px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .toplink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    float: right !important;
    background: var(--df-section) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line-2) !important;
    border-radius: 12px !important;
    padding: 9px 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .toplink:hover,
html[data-theme-area="app"] body.gc-manage-requests-page .toplink:focus-visible {
    background: var(--df-blue) !important;
    border-color: var(--df-blue) !important;
    color: #ffffff !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .section {
    margin-top: 18px !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .item,
html[data-theme-area="app"] body.gc-manage-requests-page .empty {
    background: var(--df-section-2) !important;
    color: var(--df-text) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .item {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .item.change {
    background: color-mix(in srgb, var(--df-section-2) 86%, var(--df-blue)) !important;
    border-left: 5px solid var(--df-blue) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .item.rejected {
    opacity: .82 !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .title {
    color: var(--df-heading) !important;
    font-weight: 900 !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .meta,
html[data-theme-area="app"] body.gc-manage-requests-page .mini-list li {
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .meta b,
html[data-theme-area="app"] body.gc-manage-requests-page .mini-list b {
    color: var(--df-label) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .muted {
    color: var(--df-muted) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .empty {
    color: var(--df-muted) !important;
    border-style: dashed !important;
    padding: 13px 15px !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .inline-form {
    display: inline-flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--df-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--df-blue) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font: inherit !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn:hover,
html[data-theme-area="app"] body.gc-manage-requests-page .btn:focus-visible {
    background: var(--df-blue-dark) !important;
    border-color: var(--df-blue-dark) !important;
    color: #ffffff !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-success {
    background: var(--df-ok-bg) !important;
    border-color: var(--df-ok-line) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-success:hover,
html[data-theme-area="app"] body.gc-manage-requests-page .btn-success:focus-visible {
    filter: brightness(1.08) !important;
    color: var(--df-ok-fg) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-danger {
    background: var(--df-err-bg) !important;
    border-color: var(--df-err-line) !important;
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-danger:hover,
html[data-theme-area="app"] body.gc-manage-requests-page .btn-danger:focus-visible {
    filter: brightness(1.08) !important;
    color: var(--df-err-fg) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-secondary {
    background: var(--df-section) !important;
    border-color: var(--df-line-2) !important;
    color: var(--df-text) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .btn-secondary:hover,
html[data-theme-area="app"] body.gc-manage-requests-page .btn-secondary:focus-visible {
    border-color: var(--df-blue) !important;
    color: var(--df-heading) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .mini-list {
    margin: 0 !important;
    padding-left: 18px !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .mini-list li {
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .alert {
    border-radius: 12px !important;
    padding: 11px 13px !important;
    margin: 0 0 16px !important;
    font-weight: 800 !important;
    border: 1px solid var(--df-line) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .alert-success {
    background: var(--df-ok-bg) !important;
    color: var(--df-ok-fg) !important;
    border-color: var(--df-ok-line) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .alert-danger {
    background: var(--df-err-bg) !important;
    color: var(--df-err-fg) !important;
    border-color: var(--df-err-line) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .alert-warning {
    background: var(--df-warn-bg) !important;
    color: var(--df-warn-fg) !important;
    border-color: var(--df-warn-line) !important;
}

html[data-theme-area="app"] body.gc-manage-requests-page .hr {
    background: var(--df-line) !important;
}

@media (max-width: 700px) {
    html[data-theme-area="app"] body.gc-manage-requests-page {
        padding: 12px !important;
    }
    html[data-theme-area="app"] body.gc-manage-requests-page .card {
        padding: 16px !important;
    }
    html[data-theme-area="app"] body.gc-manage-requests-page .toplink {
        float: none !important;
        margin-bottom: 12px !important;
    }
    html[data-theme-area="app"] body.gc-manage-requests-page .inline-form {
        display: flex !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    html[data-theme-area="app"] body.gc-manage-requests-page .btn {
        flex: 1 1 auto !important;
    }
}