:root{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
#nukiThemeToggle{position:fixed;right:16px;bottom:16px;z-index:9999;width:44px;height:44px;border-radius:50%;border:1px solid #d2d6dc;background:#fff;color:#222;font-size:21px;cursor:pointer;box-shadow:0 4px 18px #0003}
html[data-theme="dark"] #nukiThemeToggle{background:#252b34;color:#fff;border-color:#46505d}
html[data-theme="dark"] body{background:#111318!important;color:#e7ebef!important}
html[data-theme="dark"] [class$="-card"],html[data-theme="dark"] [class*="-card "],html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .modal-content{background:#1b1f26!important;color:#e7ebef!important;border-color:#353d49!important}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:#12161c!important;color:#f1f3f5!important;border-color:#414a57!important}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] label{color:#f1f3f5!important}
html[data-theme="dark"] .subtitle,html[data-theme="dark"] .info,html[data-theme="dark"] .device-type,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .door-option-description,html[data-theme="dark"] .guest-error-message,html[data-theme="dark"] .guest-error-hint{color:#aeb7c3!important}
html[data-theme="dark"] .button-secondary,html[data-theme="dark"] .button-link,html[data-theme="dark"] .anchor-button{background:#252b34!important;color:#eef1f4!important;border-color:#414a57!important}
.guest-locked{text-align:center;padding:18px 5px}
.guest-lock-icon{font-size:40px;margin-bottom:14px}
.guest-lock-title{margin-top:18px;font-size:20px;font-weight:700;color:#9d2727}
.guest-lock-text{margin-top:10px;line-height:1.5;color:#666}
html[data-theme="dark"] .guest-lock-title{color:#ff9da6}
html[data-theme="dark"] .guest-lock-text{color:#aeb7c3}


/* ======================================================
   DARK MODE V2 – Dashboard / dynamische Oberflächen
   ====================================================== */

html[data-theme="dark"] {
    --nuki-bg: #111318;
    --nuki-surface: #1b1f26;
    --nuki-surface-2: #222730;
    --nuki-border: #37404c;
    --nuki-text: #edf0f3;
    --nuki-muted: #aeb7c3;
}


html[data-theme="dark"] body,
html[data-theme="dark"] main {
    background: var(--nuki-bg) !important;
    color: var(--nuki-text) !important;
}


html[data-theme="dark"] :is(
    .dashboard,
    .dashboard-grid,
    .dashboard-section,
    .section,
    .section-card,
    .content-card,
    .form-card,
    .create-card,
    .device-card,
    .grant-card,
    .status-card,
    .stat-card,
    .live-card,
    .live-section,
    .history-card,
    .modal,
    .modal-content,
    .modal-body,
    .card,
    .panel,
    .box,
    .tile,
    .widget
) {
    background: var(--nuki-surface) !important;
    color: var(--nuki-text) !important;
    border-color: var(--nuki-border) !important;
}


html[data-theme="dark"] :is(
    .device-row,
    .grant-row,
    .history-item,
    .live-item,
    .form-row,
    .field-group,
    .door-option
) {
    background-color: var(--nuki-surface-2) !important;
    border-color: var(--nuki-border) !important;
}


html[data-theme="dark"] :is(
    p,
    span,
    small,
    div
) {
    border-color: var(--nuki-border);
}


html[data-theme="dark"] :is(
    .muted,
    .secondary,
    .description,
    .device-type,
    .grant-meta,
    .grant-options,
    .history-meta,
    .live-meta,
    .copy-status
) {
    color: var(--nuki-muted) !important;
}


html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"] {
    background: var(--nuki-surface) !important;
    color: var(--nuki-text) !important;
}


html[data-theme="dark"] hr {
    border-color: var(--nuki-border) !important;
}


html[data-theme="dark"] ::placeholder {
    color: #77818e !important;
}


/* Statusfarben bewusst erhalten */

html[data-theme="dark"] :is(
    .simulation-warning,
    .error,
    .success,
    .success-box,
    .badge,
    .status-badge
) {
    border-color: inherit;
}

/* DARK MODE V3 */
html[data-theme="dark"] .nuki-auto-dark-surface {
    background: #1b1f26 !important;
    background-color: #1b1f26 !important;
    color: #edf0f3 !important;
    border-color: #37404c !important;
}

html[data-theme="dark"] .nuki-auto-dark-surface input,
html[data-theme="dark"] .nuki-auto-dark-surface textarea,
html[data-theme="dark"] .nuki-auto-dark-surface select {
    background: #12161c !important;
    color: #edf0f3 !important;
    border-color: #414a57 !important;
}

html[data-theme="dark"] .nuki-auto-dark-surface hr {
    border-color: #37404c !important;
}


/* ======================================================
   COMPACT UI V1
   ====================================================== */

body {
    font-size: 14px;
}


/* vertikale Abstände */

main,
.dashboard,
.dashboard-content {
    gap: 16px !important;
}

section,
.dashboard-section {
    margin-bottom: 20px !important;
}


/* Karten */

.device-card,
.grant-card,
.status-card,
.stat-card,
.card,
.panel,
.section-card,
.content-card,
.form-card,
.live-card,
.history-card,
.modal-content {
    padding: 16px !important;
}

.grant-card,
.device-card {
    margin-bottom: 10px !important;
}


/* Überschriften */

h1 {
    font-size: 26px !important;
}

h2 {
    font-size: 19px !important;
}

h3 {
    font-size: 16px !important;
}

.section-title,
.eyebrow {
    margin-bottom: 8px !important;
}


/* Admin-Buttons kompakter, aber gut klickbar */

button,
.button-primary,
.button-secondary,
.button-enable,
.button-danger,
.button-link,
.anchor-button,
.event-all-button {
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    border-radius: 8px !important;
}


/* Formulare */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
}

textarea {
    min-height: 70px !important;
}


/* Reihen / Listen */

.live-item,
.history-item,
.event-browser-row {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.device-row,
.grant-row,
.form-row {
    gap: 10px !important;
}


/* Modals etwas kompakter */

.modal-content,
.event-browser {
    border-radius: 14px !important;
}

.event-browser-header {
    padding: 16px 18px !important;
}

.event-browser-filters {
    padding: 12px 18px !important;
}

.event-browser-list {
    padding: 8px 18px 18px !important;
}


/* Gastseite:
   Öffnungsbuttons bewusst groß lassen */

.guest-card .door-cooldown-button,
.guest-card .action-button {
    min-height: 52px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
}


/* Mobile */

@media (max-width: 720px) {

    body {
        font-size: 14px;
    }

    .device-card,
    .grant-card,
    .card,
    .panel,
    .modal-content {
        padding: 13px !important;
    }

    button,
    .button-primary,
    .button-secondary,
    .button-enable,
    .button-danger,
    .button-link,
    .anchor-button {
        min-height: 40px !important;
    }
}

/* Gastlink-Dialog: Buttons exakt ausrichten */
#modal-content .button-primary,
#modal-content .button-secondary,
#modal-content .button-link,
#modal-content .anchor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}


/* Trusted MFA */
.mfa-trust-option {
    display:flex !important;
    align-items:center;
    gap:10px;
    margin:18px 0 0;
    font-size:14px;
    cursor:pointer;
}

.mfa-trust-option input {
    width:18px !important;
    height:18px !important;
    min-height:0 !important;
}

.mfa-device-forget {
    position:fixed;
    right:72px;
    bottom:16px;
    z-index:9998;
}

.mfa-device-forget button {
    min-height:40px !important;
    padding:0 12px !important;
    border-radius:20px !important;
    border:1px solid #d5d8dc;
    background:#fff;
    color:#333;
    font-size:12px !important;
    cursor:pointer;
}

html[data-theme="dark"]
.mfa-device-forget button {
    background:#252b34 !important;
    color:#eef1f4 !important;
    border-color:#414a57 !important;
}


/* ======================================================
   UNIFIED ROUND BUTTONS
   ====================================================== */

button:not(#nukiThemeToggle),
.button-primary,
.button-secondary,
.button-enable,
.button-danger,
.button-link,
.anchor-button,
.event-all-button {
    border-radius: 999px !important;
}

/* Theme bleibt kreisförmig */
#nukiThemeToggle {
    border-radius: 50% !important;
}


/* GUEST FEATURES V1 */

.nuki-compact-status {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:8px;
    margin:0 0 16px;
}

.compact-status-item {
    padding:10px 13px;
    border:1px solid #e1e4e8;
    border-radius:14px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:13px;
}

.compact-status-item span {
    color:#6b7280;
}

.compact-status-item strong {
    white-space:nowrap;
}

html[data-theme="dark"]
.compact-status-item {
    background:#1b1f26;
    border-color:#37404c;
}

html[data-theme="dark"]
.compact-status-item span {
    color:#aeb7c3;
}

[id^="grant-"].guest-page-active {
    box-shadow:
        0 0 0 2px
        rgba(35,160,90,.55) !important;
}

.guest-countdown {
    margin-top:16px;
    padding-top:13px;
    border-top:1px solid #e3e5e8;
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:14px;
}

.guest-countdown-label {
    color:#777;
}

html[data-theme="dark"]
.guest-countdown {
    border-color:#37404c;
}

html[data-theme="dark"]
.guest-countdown-label {
    color:#aeb7c3;
}

.guest-qr-overlay {
    position:fixed;
    inset:0;
    z-index:30000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#0009;
}

.guest-qr-overlay.open {
    display:flex;
}

.guest-qr-dialog {
    width:min(340px,100%);
    padding:20px;
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 25px 70px #0007;
}

.guest-qr-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.guest-qr-head button {
    width:36px;
    height:36px;
    padding:0 !important;
    font-size:22px !important;
}

.guest-qr-dialog canvas {
    max-width:100%;
    background:#fff;
    border-radius:12px;
    padding:8px;
}

.guest-qr-hint {
    margin-top:12px;
    color:#777;
    font-size:12px;
}

html[data-theme="dark"]
.guest-qr-dialog {
    background:#1b1f26;
    color:#edf0f3;
}

@media(max-width:720px) {
    .nuki-compact-status {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}