/* ═══════════════════════════════════════════════════════════════════════════
   SBF Phone Max — Dialog System
   iOS-style alert — light & dark theme aware
   CEF/Chromium compatible (no color-mix)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.sbf-dialog-overlay {
    position: absolute;
    inset: 0;
    z-index: 1950; /* Über Apps/Lock-Screen, unter Status Bar (2000) und Dynamic Island (2500) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sbf-dialog-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ── Dialog Box — Dark (default) ─────────────────────────────────────────── */
.sbf-dialog {
    width: calc(100% - 48px);
    max-width: 264px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(40, 40, 44, 0.82);
    backdrop-filter: blur(48px) saturate(200%);
    -webkit-backdrop-filter: blur(48px) saturate(200%);
    box-shadow:
        inset 0 0 0 1px          rgba(255, 255, 255, 0.12),
        inset 1.8px 2px 0 -2px   rgba(255, 255, 255, 0.40),
        inset -2px -2px 0 -2px   rgba(255, 255, 255, 0.14),
        0 8px 40px 0             rgba(0, 0, 0, 0.50),
        0 2px 10px 0             rgba(0, 0, 0, 0.30);
    transform: scale(0.88) translateY(8px);
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dialog Box — Light ──────────────────────────────────────────────────── */
.sbf-dialog.theme-light {
    background: rgba(242, 242, 247, 0.96);
    backdrop-filter: blur(48px) saturate(160%);
    -webkit-backdrop-filter: blur(48px) saturate(160%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 8px 40px 0    rgba(0, 0, 0, 0.22),
        0 2px 10px 0    rgba(0, 0, 0, 0.12);
}

.sbf-dialog-overlay.visible .sbf-dialog {
    transform: scale(1) translateY(0);
}

/* ── Content Area ────────────────────────────────────────────────────────── */
.sbf-dialog-content {
    padding: 18px 16px 14px;
    text-align: center;
}

/* Dark mode text */
.sbf-dialog-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.sbf-dialog-message {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    line-height: 1.45;
}

/* Light mode text */
.sbf-dialog.theme-light .sbf-dialog-title {
    color: rgba(0, 0, 0, 0.90);
}

.sbf-dialog.theme-light .sbf-dialog-message {
    color: rgba(60, 60, 67, 0.70);
}

/* ── Dividers (ausgeblendet — ersetzt durch padding + gap) ───────────────── */
.sbf-dialog-divider-h {
    display: none;
}

.sbf-dialog-divider-v {
    display: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sbf-dialog-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 4px 12px 14px;
}

.sbf-dialog-buttons.stacked {
    flex-direction: column;
    gap: 6px;
    padding: 4px 12px 14px;
}

/* ── Button Base — Dark (liquid glass pill) ──────────────────────────────── */
.sbf-dialog-btn {
    flex: 1;
    padding: 11px 8px;
    border-radius: 99em;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    color: #007AFF;
    background: rgba(187, 187, 188, 0.18);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px        rgba(255, 255, 255, 0.20),
        inset 1px 1px 0 -1px   rgba(255, 255, 255, 0.70),
        inset -1px -1px 0 -1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 4px 0     rgba(0, 0, 0, 0.10),
        0 2px 8px 0            rgba(0, 0, 0, 0.12);
    transition: background 0.14s ease, box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sbf-dialog-btn:hover {
    background: rgba(187, 187, 188, 0.28);
}

.sbf-dialog-btn:active {
    background: rgba(187, 187, 188, 0.36);
    box-shadow:
        inset 0 0 0 1px    rgba(255, 255, 255, 0.10),
        inset 0 2px 6px 0  rgba(0, 0, 0, 0.18),
        0 1px 4px 0        rgba(0, 0, 0, 0.08);
}

/* ── Button Styles — Dark ────────────────────────────────────────────────── */

/* bold / default = blau gefüllt */
.sbf-dialog-btn.bold,
.sbf-dialog-btn.default {
    background: rgba(0, 122, 255, 0.88);
    color: #ffffff;
}

.sbf-dialog-btn.bold:hover,
.sbf-dialog-btn.default:hover {
    background: rgba(0, 122, 255, 1);
}

.sbf-dialog-btn.bold:active,
.sbf-dialog-btn.default:active {
    background: rgba(0, 82, 210, 0.92);
}

/* destructive = roter Text, glass */
.sbf-dialog-btn.destructive {
    color: #FF453A;
}

/* cancel = blauer Text, glass, normal weight */
.sbf-dialog-btn.cancel {
    color: #007AFF;
    font-weight: 400;
}

/* ── Button Base — Light ─────────────────────────────────────────────────── */
.sbf-dialog.theme-light .sbf-dialog-btn {
    background: rgba(118, 118, 128, 0.14);
    box-shadow:
        inset 0 0 0 1px        rgba(0, 0, 0, 0.06),
        inset 1px 2px 0 -1px   rgba(255, 255, 255, 0.90),
        inset -1px -1px 0 -1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 4px 0     rgba(0, 0, 0, 0.06),
        0 2px 8px 0            rgba(0, 0, 0, 0.08);
}

.sbf-dialog.theme-light .sbf-dialog-btn:hover {
    background: rgba(118, 118, 128, 0.22);
}

.sbf-dialog.theme-light .sbf-dialog-btn:active {
    background: rgba(118, 118, 128, 0.30);
}

/* bold / default = blau gefüllt (light) */
.sbf-dialog.theme-light .sbf-dialog-btn.bold,
.sbf-dialog.theme-light .sbf-dialog-btn.default {
    background: rgba(0, 122, 255, 0.90);
    color: #ffffff;
}

.sbf-dialog.theme-light .sbf-dialog-btn.bold:hover,
.sbf-dialog.theme-light .sbf-dialog-btn.default:hover {
    background: rgba(0, 122, 255, 1);
}

/* destructive (light) = dunkleres Rot */
.sbf-dialog.theme-light .sbf-dialog-btn.destructive {
    color: #FF3B30;
}

/* cancel (light) = blauer Text */
.sbf-dialog.theme-light .sbf-dialog-btn.cancel {
    color: #007AFF;
}

/* ── Disabled Button (z.B. required-Input leer) ──────────────────────────── */
.sbf-dialog-btn.disabled {
    opacity: 0.42;
    pointer-events: none;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Input Dialog (showInputDialog) — Liquid-Glass-Textfeld, theme-aware
   ═══════════════════════════════════════════════════════════════════════════ */

.sbf-dialog-input-wrap {
    margin-top: 12px;
}

/* ── Input Base — Dark (default) ─────────────────────────────────────────── */
.sbf-dialog-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: none;
    outline: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 0 1px   rgba(255, 255, 255, 0.14),
        inset 0 1px 3px 0 rgba(0, 0, 0, 0.30);
    transition: background 0.16s ease, box-shadow 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.sbf-dialog-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 400;
}

.sbf-dialog-input:focus {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 0 0 1px   rgba(10, 132, 255, 0.70),
        inset 0 1px 3px 0 rgba(0, 0, 0, 0.20);
}

/* ── Input Base — Light ──────────────────────────────────────────────────── */
.sbf-dialog.theme-light .sbf-dialog-input {
    color: rgba(0, 0, 0, 0.90);
    background: rgba(118, 118, 128, 0.10);
    box-shadow:
        inset 0 0 0 1px   rgba(0, 0, 0, 0.10),
        inset 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.sbf-dialog.theme-light .sbf-dialog-input::placeholder {
    color: rgba(60, 60, 67, 0.40);
}

.sbf-dialog.theme-light .sbf-dialog-input:focus {
    background: rgba(118, 118, 128, 0.16);
    box-shadow:
        inset 0 0 0 1px   rgba(0, 122, 255, 0.70),
        inset 0 1px 3px 0 rgba(0, 0, 0, 0.06);
}