/* ── RoomFlow OS v25 — Login view, PIN keypad ── */

/* DND mode — hide staff UI before Firebase loads */
html.dnd-mode #loginView,
html.dnd-mode #appView { display: none !important; }
html.dnd-mode #dndGuestPage.hidden { display: flex !important; }

#loginView {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--bg);
}

.login-card {
    width: 100%; max-width: 380px;
    background: var(--surface);
    border-radius: var(--r); padding: 40px 36px;
    box-shadow: var(--sh2); border: 1px solid var(--border);
    animation: fadeUp .36s var(--ease);
}
.login-logo-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px }
.login-logo-icon { font-size: 2.6rem; margin-bottom: 5px; line-height: 1 }
.login-logo-text { font-family: var(--fd); font-size: 1.35rem; font-weight: 800; letter-spacing: 2px; color: var(--text) }
.login-tagline {
    text-align: center; font-family: var(--fd); font-size: .64rem;
    color: var(--text-3); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 28px;
}
.login-mode-toggle {
    display: flex; gap: 3px; margin-bottom: 20px;
    background: var(--surface2); padding: 3px; border-radius: var(--rs);
    border: 1px solid var(--border);
}
.login-mode-btn {
    flex: 1; padding: 8px; border-radius: var(--rx); border: none; background: none;
    font-family: var(--fd); font-size: .79rem; font-weight: 600; color: var(--text-3);
    cursor: pointer; transition: all .16s;
}
.login-mode-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--sh0) }

.login-field {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--rs);
    background: var(--surface2); margin-bottom: 9px;
    transition: border-color .16s,box-shadow .16s;
}
.login-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-g);
}
.login-field-icon { font-size: .96rem; flex-shrink: 0 }
.login-input {
    flex: 1; border: none; background: none; color: var(--text);
    font-family: var(--fd); font-size: .9rem; outline: none; font-weight: 500;
}
.login-error { color: var(--prio); font-size: .77rem; font-weight: 600; text-align: center; min-height: 19px; margin-bottom: 5px }

.login-btn {
    width: 100%; padding: 13px; border-radius: var(--rs); border: none;
    background: var(--accent); color: #fff;
    font-family: var(--fd); font-size: .93rem; font-weight: 700;
    cursor: pointer; transition: all .16s; margin-top: 4px;
    box-shadow: 0 4px 16px var(--accent-g); letter-spacing: .2px;
}
.login-btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-g) }
.login-btn:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* PIN display */
.pin-display { display: flex; justify-content: center; gap: 13px; margin-bottom: 22px }
.pin-dot {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1.5px solid var(--border2); background: transparent; transition: all .16s;
}
.pin-dot.filled {
    background: var(--accent); border-color: var(--accent); transform: scale(1.1);
    box-shadow: 0 0 10px var(--accent-g);
}

/* PIN keypad */
.pin-keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 248px; margin: 0 auto }
.pin-key {
    aspect-ratio: 1; border-radius: var(--rs); border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-family: var(--fd);
    font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: all .13s;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sh0);
}
.pin-key:hover { background: var(--surface3); box-shadow: var(--sh1) }
.pin-key:active { background: var(--accent-s); border-color: var(--accent); animation: pinBounce .18s ease; box-shadow: 0 0 0 2px var(--accent-g) }
.pin-key.del { font-size: .95rem; color: var(--text-2) }
.pin-key.empty { background: none; border-color: transparent; pointer-events: none; box-shadow: none }