/* ============================================================
   Staff panel styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.staff-body {
    background: #0F0F0F;
    color: #F5F3EE;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

.staff-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px 64px;
    gap: 32px;
}

/* ── PIN screen ─────────────────────────────────────────── */
.pin-logo {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #555;
    text-transform: uppercase;
}

.pin-heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.pin-dots {
    display: flex;
    gap: 14px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #333;
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.dot.filled {
    background: #F5F3EE;
    border-color: #F5F3EE;
}
.dot.error {
    background: #FF3333;
    border-color: #FF3333;
}

.pin-error {
    font-size: 13px;
    color: #FF4444;
    min-height: 18px;
    text-align: center;
}

.pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 12px;
    margin-top: 8px;
}

.key-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #1C1C1C;
    border: 1px solid #2C2C2C;
    color: #F5F3EE;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.key-btn:active { transform: scale(0.93); background: #2A2A2A; }
.key-btn.key-empty { background: transparent; border-color: transparent; pointer-events: none; }
.key-btn.key-del { background: transparent; border-color: #222; }

/* ── Staff panel ────────────────────────────────────────── */
.panel-header {
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-logo {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #555;
    text-transform: uppercase;
}

.logout-btn {
    background: transparent;
    border: 1px solid #2C2C2C;
    border-radius: 8px;
    color: #888;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.logout-btn:hover { border-color: #444; color: #aaa; }

/* Sold Out block */
.sold-out-block {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-soldout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 14px;
    background: #1C1C1C;
    border: 1.5px solid #2C2C2C;
    color: #F5F3EE;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    justify-content: center;
}
.btn-soldout.active {
    border-color: #FF3333;
    background: rgba(255, 51, 51, 0.1);
    color: #FF3333;
}
.btn-soldout:active { transform: scale(0.98); }

.soldout-hint {
    font-size: 12px;
    color: #555;
    text-align: center;
}

/* Table cards */
.staff-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.staff-table-card {
    background: #1C1C1C;
    border: 1px solid #2C2C2C;
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.stc-num {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #555;
}

.stc-toggle {
    width: 100%;
    padding: 11px 16px;
    border-radius: 100px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    background: #00FF66;
    color: #000;
    transition: background 0.2s, color 0.2s;
}
.stc-toggle.busy {
    background: #FF3333;
    color: #fff;
}
.stc-toggle:active { transform: scale(0.97); }

.panel-note {
    font-size: 12px;
    color: #444;
    text-align: center;
    max-width: 360px;
}