/* Staff Attendance - Frontend Terminal v2.1 */

.sa-terminal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 20px 0;
    font-family: -apple-system, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* ── KEYPAD TERMINAL ──────────────────────────────────────────────── */
.sa-terminal {
    background: linear-gradient(160deg, #12122a 0%, #1a1a3e 100%);
    border-radius: 22px;
    padding: 26px 22px 18px;
    width: 320px;
    flex-shrink: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(124,131,253,0.15);
    box-sizing: border-box;
}

.sa-terminal-header { text-align: center; margin-bottom: 18px; }
.sa-logo { font-size: 34px; margin-bottom: 5px; line-height: 1; }
.sa-terminal-header h2 {
    color: #d0d4ff; margin: 0 0 8px;
    font-size: 16px; font-weight: 700; letter-spacing: 0.3px;
}
.sa-clock {
    font-size: 38px; font-weight: 800; color: #7c83fd;
    letter-spacing: 2px; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(124,131,253,0.35);
}
.sa-date { font-size: 12px; color: #888; margin-top: 3px; }

/* PIN dots */
.sa-pin-display { text-align: center; margin-bottom: 16px; }
.sa-pin-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 7px; }
.sa-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: #252545; border: 2px solid #3a3a6a;
    transition: all 0.2s; display: inline-block;
}
.sa-dot.filled {
    background: #7c83fd; border-color: #a0a5ff;
    box-shadow: 0 0 10px #7c83fd88; transform: scale(1.2);
}
.sa-pin-label { color: #666; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Keypad */
.sa-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.sa-key {
    background: #1c1c40; color: #d0d4ff;
    border: 1px solid #2a2a60; border-radius: 13px;
    padding: 15px 8px; font-size: 21px; font-weight: 700;
    cursor: pointer; transition: all 0.12s; text-align: center;
    user-select: none; width: 100%;
}
.sa-key:hover { background: #7c83fd; border-color: #7c83fd; color: #fff; transform: translateY(-1px); }
.sa-key:active { transform: scale(0.93); }
.sa-key-clear { background: #2a1515; border-color: #5a2a2a; color: #ff8080; }
.sa-key-clear:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
.sa-key-submit { background: #152a15; border-color: #2a5a2a; color: #86efac; }
.sa-key-submit:hover { background: #22c55e; border-color: #22c55e; color: #fff; }

/* Message box */
.sa-message {
    text-align: center; padding: 11px 12px; border-radius: 11px;
    font-size: 13px; font-weight: 600; min-height: 42px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; line-height: 1.5;
}
.sa-message.success { background: #0f2d1a; color: #86efac; border: 1px solid #22c55e55; }
.sa-message.error   { background: #2d0f0f; color: #fca5a5; border: 1px solid #ef444455; }
.sa-message.info    { background: #0f1e2d; color: #93c5fd; border: 1px solid #3b82f655; }

/* Sound bar */
.sa-sound-bar {
    display: flex; align-items: center; gap: 9px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #1e1e40;
}
.sa-sound-label { font-size: 12px; color: #888; flex-shrink: 0; }
.sa-toggle-switch { position: relative; width: 38px; height: 20px; flex-shrink: 0; }
.sa-toggle-switch input { opacity: 0; width: 0; height: 0; }
.sa-toggle-slider {
    position: absolute; top:0; left:0; right:0; bottom:0;
    background: #2a2a50; border-radius: 20px; cursor: pointer; transition: .2s;
}
.sa-toggle-slider:before {
    content: ''; position: absolute; width: 14px; height: 14px;
    left: 3px; bottom: 3px; background: #666; border-radius: 50%; transition: .2s;
}
.sa-toggle-switch input:checked + .sa-toggle-slider { background: #7c83fd; }
.sa-toggle-switch input:checked + .sa-toggle-slider:before { transform: translateX(18px); background: #fff; }
#sa-sound-type {
    flex: 1; background: #1c1c40; border: 1px solid #2a2a60;
    color: #d0d4ff; border-radius: 7px; padding: 3px 7px; font-size: 12px; cursor: pointer;
}

/* ── RIGHT PANEL ──────────────────────────────────────────────────── */
.sa-staff-panel {
    flex: 1;
    min-width: 260px;
    background: linear-gradient(160deg, #0d1117 0%, #161b2e 100%);
    border-radius: 22px;
    padding: 20px 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    border: 1px solid rgba(124,131,253,0.1);
    color: #fff;
    max-height: 580px;
    overflow-y: auto;
    box-sizing: border-box;
}

.sa-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #1e2040;
}
.sa-panel-header h3 { margin: 0; font-size: 14px; color: #d0d4ff; font-weight: 700; }
.sa-active-count {
    background: #22c55e22; color: #86efac; border: 1px solid #22c55e44;
    border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600;
}

.sa-staff-cards { display: flex; flex-direction: column; gap: 11px; }
.sa-no-staff {
    text-align: center; color: #444; padding: 30px 15px;
    font-size: 13px; line-height: 2;
}

/* Staff Card */
.sa-staff-card {
    background: linear-gradient(135deg, #1a1f35 0%, #12172a 100%);
    border: 1px solid #252a45; border-radius: 15px; padding: 13px 14px;
    animation: saSlideIn 0.35s cubic-bezier(.34,1.4,.64,1);
    position: relative; overflow: hidden;
}
.sa-staff-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: linear-gradient(180deg, #7c83fd, #22c55e); border-radius: 3px 0 0 3px;
}
@keyframes saSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sa-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.sa-card-name { font-size: 14px; font-weight: 700; color: #e0e4ff; }
.sa-card-empid { font-size: 11px; color: #555; margin-top: 2px; }
.sa-working-badge {
    background: #22c55e22; color: #86efac; border: 1px solid #22c55e44;
    border-radius: 20px; padding: 2px 9px; font-size: 10px; font-weight: 600;
    white-space: nowrap; animation: saPulse 2.5s infinite;
}
@keyframes saPulse { 0%,100%{opacity:1} 50%{opacity:0.55} }

.sa-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sa-card-stat { background: #0d1020; border-radius: 9px; padding: 7px 9px; }
.sa-card-stat-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.sa-card-stat-val { font-size: 13px; font-weight: 700; color: #c0c8ff; }
.sa-shift-end-time { color: #f87171 !important; }

.sa-card-salary-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 9px; padding-top: 9px; border-top: 1px solid #1e2440;
}
.sa-salary-live-label { font-size: 10px; color: #666; }
.sa-salary-live-val {
    font-size: 20px; font-weight: 800; color: #fbbf24;
    text-shadow: 0 0 12px rgba(251,191,36,0.25);
    font-variant-numeric: tabular-nums;
}
.sa-shift-end-info { font-size: 10px; color: #555; margin-top: 2px; }
.sa-shift-end-info span { color: #f87171; font-weight: 600; }

/* ── PUNCH OUT OVERLAY ────────────────────────────────────────────── */
.sa-punchout-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}
.sa-punchout-card {
    background: linear-gradient(160deg, #1a1f38, #0d1020);
    border: 1px solid #7c83fd44; border-radius: 26px;
    padding: 36px 32px 28px; text-align: center; max-width: 380px; width: 90%;
    animation: saPopIn 0.4s cubic-bezier(.34,1.4,.64,1);
    box-shadow: 0 36px 70px rgba(0,0,0,0.65), 0 0 50px rgba(124,131,253,0.08);
}
@keyframes saPopIn { from{opacity:0;transform:scale(0.72)} to{opacity:1;transform:scale(1)} }
.sa-punchout-icon { font-size: 52px; margin-bottom: 10px; display: inline-block; animation: saWave 1s ease; }
@keyframes saWave { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(18deg)} }
.sa-punchout-card h3 { color: #e0e4ff; font-size: 22px; margin: 0 0 5px; }
.sa-punchout-bye { color: #7c83fd; font-size: 13px; margin-bottom: 22px; }
.sa-punchout-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.sa-po-stat { background: #0d1020; border-radius: 13px; padding: 12px 11px; border: 1px solid #1e2440; }
.sa-po-val { font-size: 16px; font-weight: 800; color: #c0c8ff; font-variant-numeric: tabular-nums; }
.sa-po-lbl { font-size: 10px; color: #555; margin-top: 3px; }
.sa-po-salary-stat { grid-column: 1 / -1; background: linear-gradient(135deg,#2a200a,#1a1500); border-color: #fbbf2433; }
.sa-po-salary-stat .sa-po-val { font-size: 28px; color: #fbbf24; text-shadow: 0 0 18px rgba(251,191,36,0.35); }
.sa-punchout-dismiss { font-size: 11px; color: #444; }

/* Scrollbar */
.sa-staff-panel::-webkit-scrollbar { width: 3px; }
.sa-staff-panel::-webkit-scrollbar-thumb { background: #2a2a50; border-radius: 3px; }

/* ── MOBILE ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .sa-terminal-wrapper { flex-direction: column; }
    .sa-terminal { width: 100%; }
    .sa-staff-panel { width: 100%; min-width: unset; max-height: 400px; }
    .sa-key { padding: 13px 6px; font-size: 18px; }
}