/* Gemeinsame Bedienbausteine (ds-ui.js) für App, Turnierseite und Live Display.
   Farben kommen aus den Tokens der jeweiligen Seite (Markenfarbe, Hell/Dunkel). */

/* ---------- Fokus (Tastatur, Fernbedienung) und Mauszeiger auf Anzeige-Seiten ---------- */
/* :where = Spezifität 0, eigene Regeln der Seiten gehen vor. --focus setzt die Seite je Fläche (≥ 3:1, z. B. hell auf
   dunkler Kopfzeile); ohne --focus wie bisher die Hauptfarbe */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus, var(--primary, var(--accent-strong, #1f6e49)));
    outline-offset: 2px;
}
html.idle, html.idle * { cursor: none !important; }

/* ---------- Segment-Schalter (Sprache, Design und weitere Auswahl) ---------- */
.segmented {
    --ds-accent: var(--primary, var(--accent-fill, var(--accent-strong, #1f6e49)));
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border, #d0d4da);
    border-radius: 12px;
    background: var(--surface-2, #f1f3f5);
}
.segmented button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.segmented button[aria-checked="true"] {
    background: var(--ds-accent);
    color: var(--on-accent, #fff);
    font-weight: bold;
}
.segmented button:focus-visible { outline: 3px solid var(--focus, var(--ds-accent)); outline-offset: 1px; }

/* ---------- Dialog für Rückfragen und Meldungen ---------- */
.ds-dialog {
    --ds-accent: var(--primary, var(--accent-fill, var(--accent-strong, #1f6e49)));
    --ds-danger: var(--danger, #c93a3a);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border, #d0d4da);
    border-radius: 16px;
    background: var(--surface, #fff);
    color: var(--text, #1d1f23);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    font: inherit;
}
.ds-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
/* Dunkel: stärker abgedunkelt, Fläche einen Hauch heller, heller Rand - wie die Dialoge der App (app.css) */
@supports (color: light-dark(#000, #fff)) {
    .ds-dialog {
        --ds-surface: light-dark(var(--surface, #fff), color-mix(in srgb, var(--surface, #fff) 95%, #fff));
        --ds-surface-2: light-dark(var(--surface-2, #f1f3f5), color-mix(in srgb, var(--surface-2, #f1f3f5) 95%, #fff));
        background: var(--ds-surface);
        border-color: light-dark(var(--border, #d0d4da), rgba(255, 255, 255, 0.16));
    }
    .ds-dialog > * { --surface: var(--ds-surface); --surface-2: var(--ds-surface-2); }
    .ds-dialog::backdrop {
        background: light-dark(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.72));
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}
.ds-dialog-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100dvh - 34px);
    padding: 20px 20px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text, #1d1f23) 28%, transparent) transparent;
}
.ds-dialog-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    font-size: 1.2em;
}
.ds-dialog-title i { color: var(--ds-accent); }
.ds-dialog.danger .ds-dialog-title i { color: var(--ds-danger); }
.ds-dialog-text {
    margin: 0;
    line-height: 1.45;
    white-space: pre-line;          /* \n im Text = Zeilenumbruch */
    overflow-wrap: anywhere;
}
.ds-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.ds-btn {
    min-width: 96px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border, #d0d4da);
    border-radius: 10px;
    background: var(--surface-2, #f1f3f5);
    color: inherit;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}
.ds-btn:focus-visible { outline: 3px solid var(--focus, var(--ds-accent)); outline-offset: 2px; }
.ds-btn-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--on-accent, #fff); }
.ds-btn-danger { background: var(--ds-danger); border-color: var(--ds-danger); color: var(--on-danger, #fff); }   /* dunkles Rot-Hell: dunkle Schrift */
.ds-dialog.danger .ds-btn:focus-visible { outline-color: var(--ds-danger); }
@media (max-width: 380px) { .ds-dialog-actions .ds-btn { flex: 1 1 auto; } }