/* ── BioAttend Styles ── */
:root {
  --bg: #000000;
  --bg2: #09090b;
  --bg3: #18181b;
  --blue: #94a3b8;
  --blue2: #f4f4f5;
  --blue-dark: #27272a;
  --cyan: #ffffff;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.12);
  --text: #f4f4f5;
  --text2: #a1a1aa;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #d4d4d8;
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0,0,0,0.8);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* Background */
.bg-grid{
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none;z-index:0;
  animation:grid-drift 30s linear infinite;
}
@keyframes grid-drift{0%{background-position:0 0,0 0}100%{background-position:50px 50px,50px 50px}}
.bg-glow{position:fixed;border-radius:50%;filter:blur(140px);pointer-events:none;z-index:0}
.glow-1{width:700px;height:700px;background:rgba(255,255,255,0.03);top:-250px;right:-200px;animation:glow-drift-1 12s ease-in-out infinite alternate}
.glow-2{width:600px;height:600px;background:rgba(255,255,255,0.02);bottom:-250px;left:-200px;animation:glow-drift-2 15s ease-in-out infinite alternate}
@keyframes glow-drift-1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,80px) scale(1.2)}}
@keyframes glow-drift-2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(80px,-60px) scale(1.15)}}
.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0}

/* Screens */
.screen{display:none;position:relative;z-index:1;min-height:100vh}
.screen.active{display:flex}

/* Glass Card */
.glass-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:border-color .3s, box-shadow .3s, transform .25s;
}
.glass-card:hover{
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 8px 40px rgba(255,255,255,0.08);
}

/* ── LOGIN ── */
#login-screen{align-items:center;justify-content:center;padding:20px}
.login-container{width:100%;max-width:480px;display:flex;flex-direction:column;gap:16px}

/* Role Tabs */
.role-tabs{display:flex;gap:6px;margin-bottom:4px}
.role-tab{flex:1;padding:9px 10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:9px;color:var(--text2);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s;text-align:center;white-space:nowrap}
.role-tab:hover{border-color:var(--blue);color:var(--blue)}
.role-tab.active{background:rgba(255,255,255,0.1);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(255,255,255,0.1)}
.role-hint{font-size:.78rem;color:var(--text2);padding:6px 10px;background:var(--glass);border-radius:8px;border:1px solid var(--glass-border);text-align:center}

/* ── Employee Scan Entry Button ── */
.emp-scan-entry-btn{
  position:relative;overflow:hidden;
  width:100%;padding:22px 24px;
  background:linear-gradient(135deg,#ffffff,#d4d4d8);border:1px solid rgba(255,255,255,0.8);
  border:none;border-radius:16px;
  display:flex;align-items:center;gap:16px;
  cursor:pointer;transition:.25s;
  box-shadow:0 0 40px rgba(255,255,255,0.15),0 4px 20px rgba(0,0,0,0.5);
  animation:pulse-btn 2.5s ease-in-out infinite;
}
.emp-scan-entry-btn:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,255,255,0.25),0 8px 30px rgba(0,0,0,0.6)}
.emp-scan-entry-btn:active{transform:translateY(0)}
.eseb-icon{font-size:2.2rem;color:#000;line-height:1;flex-shrink:0}
.eseb-text{text-align:left}
.eseb-title{font-size:1.2rem;font-weight:900;color:#000;letter-spacing:.02em}
.eseb-sub{font-size:.75rem;color:rgba(0,0,0,.6);margin-top:3px;font-weight:500}

/* ── Admin/Manager collapsible login ── */
.admin-login-collapse{display:flex;flex-direction:column;gap:0}
.admin-toggle-btn{
  width:100%;padding:11px 16px;
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:10px;color:var(--text2);
  font-family:inherit;font-size:.83rem;font-weight:600;
  cursor:pointer;transition:.2s;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.admin-toggle-btn:hover{border-color:var(--blue);color:var(--blue)}
.admin-toggle-arrow{font-size:.7rem;transition:transform .25s;display:inline-block}
.admin-login-panel{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s;
  opacity:0;
}
.admin-login-panel.open{max-height:400px;opacity:1}
.admin-login-panel .login-card{margin-top:8px;border-radius:12px;padding:22px 20px;gap:12px}

.logo-wrap{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:8px}
.logo-ring{width:80px;height:80px;flex-shrink:0}
.logo-svg{width:100%;height:100%;filter:drop-shadow(0 0 16px rgba(255,255,255,0.2))}
.logo-svg{animation:spin-slow 20s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* RobinBosky logo on login page */
.rb-logo-wrap{width:90px;height:90px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 28px rgba(255,255,255,0.1),0 4px 16px rgba(0,0,0,0.6);overflow:hidden;border:2px solid rgba(255,255,255,0.15)}
.rb-logo-img{width:82px;height:82px;object-fit:contain;border-radius:50%}
.rb-brand{background:linear-gradient(135deg,#e02020,#1a3cdb)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}

.brand-name{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand-sub{font-size:.8rem;color:var(--text2);letter-spacing:.1em;text-transform:uppercase}
.login-card,.kiosk-card{padding:28px;display:flex;flex-direction:column;gap:14px}
.login-title{font-size:1.3rem;font-weight:700;color:var(--text)}
.login-subtitle{font-size:.85rem;color:var(--text2)}
.login-hint{font-size:.75rem;color:var(--text2);text-align:center}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.8rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.05em}
.input-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.9rem;color:var(--blue);pointer-events:none}
/* ── Global dark select override — covers ALL <select> in the app —— */
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,0.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: inherit;
  font-size: .9rem;
  padding: 11px 36px 11px 13px !important;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
select:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1), 0 0 20px rgba(255,255,255,0.05) !important;
  background-color: rgba(255,255,255,0.06) !important;
}
select option {
  background: #09090b !important;
  color: #f4f4f5 !important;
  padding: 10px 14px;
  font-size: .88rem;
}
select option:hover, select option:checked {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
/* ── Base input styles (non-select) ── */
.form-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-size:.9rem;font-family:inherit;outline:none;transition:.2s}
.form-input:not(select){padding:11px 14px 11px 38px}
.form-input:not(select):not(.input-wrap .form-input){padding:11px 14px}
select.form-input { padding: 11px 36px 11px 13px !important; }
select.form-input.select-with-icon { padding-left: 40px !important; }
.form-input:not(select):focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(255,255,255,0.08)}
.form-input::placeholder{color:var(--text2)}

/* ── Premium .form-select (custom wrap variant) ── */
.form-select{
  width:100%;padding:12px 40px 12px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;color:var(--text);
  font-size:.9rem;font-family:inherit;
  outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:.25s;
}
.form-select:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.05);
  background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04));
}
.form-select option{
  background:#09090b !important;color:#f4f4f5;padding:10px;
}
.select-arrow{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:.85rem;color:var(--cyan);pointer-events:none;
  transition:transform .2s;
}
.select-wrap:focus-within .select-arrow{transform:translateY(-50%) rotate(180deg);}

.error-msg{color:var(--red);font-size:.82rem;text-align:center}
.kiosk-title{font-size:1rem;font-weight:700}
.kiosk-subtitle{font-size:.82rem;color:var(--text2)}

/* Buttons */
.btn-primary,.btn-secondary,.btn-danger,.btn-scan{position:relative;overflow:hidden;padding:12px 22px;border:none;border-radius:10px;font-family:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  box-shadow:0 4px 20px rgba(255,255,255,0.1);
  animation:btn-silver-pulse 3s ease-in-out infinite;
}
@keyframes btn-silver-pulse{0%,100%{box-shadow:0 4px 20px rgba(255,255,255,0.1)}50%{box-shadow:0 4px 32px rgba(255,255,255,0.15),0 0 0 4px rgba(255,255,255,0.02)}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(255,255,255,0.15);background:linear-gradient(135deg,var(--blue),var(--blue2))}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.15);color:var(--text)}
.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 16px rgba(255,255,255,0.1)}
.btn-danger{background:rgba(244,63,94,0.15);border:1px solid rgba(244,63,94,0.3);color:var(--red)}
.btn-glow{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent 60%);
  pointer-events:none;
  animation:shimmer 2.5s linear infinite;
  background-size:200% 100%;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.btn-scan{background:linear-gradient(135deg,#ffffff,#d4d4d8);border:1px solid rgba(255,255,255,0.8);color:#09090b;font-size:1rem;padding:14px 32px;border-radius:40px;font-weight:800;box-shadow:0 0 30px rgba(255,255,255,0.15);animation:pulse-btn 2s ease-in-out infinite}
@keyframes pulse-btn{0%,100%{box-shadow:0 0 30px rgba(255,255,255,0.15)}50%{box-shadow:0 0 50px rgba(255,255,255,0.25)}}
.scan-icon{font-size:1.2rem}
.full-width{width:100%}
.hidden{display:none!important}

/* ── KIOSK ── */
#kiosk-screen{flex-direction:column;background:var(--bg)}
.kiosk-container{display:flex;flex-direction:column;height:100vh;max-width:800px;margin:0 auto;padding:16px;gap:16px}
.kiosk-header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.back-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--blue);padding:8px 16px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.85rem}
.kiosk-brand{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kiosk-time{display:block;font-size:1.8rem;font-weight:700;text-align:center;font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.kiosk-date{font-size:.85rem;color:var(--text2)}
.kiosk-body{display:flex;flex:1;gap:20px;align-items:flex-start}
.cam-section{flex:1}

/* Camera Frame */
.cam-frame{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--glass-border);background:#000;aspect-ratio:4/3;max-width:420px;margin:0 auto}
.cam-frame video{width:100%;height:100%;object-fit:cover;display:block}
.cam-corners .corner{position:absolute;width:20px;height:20px;border-color:var(--cyan);border-style:solid}
.corner.tl{top:10px;left:10px;border-width:2px 0 0 2px}
.corner.tr{top:10px;right:10px;border-width:2px 2px 0 0}
.corner.bl{bottom:10px;left:10px;border-width:0 0 2px 2px}
.corner.br{bottom:10px;right:10px;border-width:0 2px 2px 0}
.scan-ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scan 2.5s ease-in-out infinite;z-index:3}
@keyframes scan{0%{top:10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:90%;opacity:0}}
.cam-status{text-align:center;font-size:.85rem;color:var(--text2);margin-top:10px;padding:8px;border-radius:8px;background:var(--glass)}
.kiosk-result-area{flex:1;display:flex;flex-direction:column;gap:16px;padding-top:8px}
.kiosk-result{padding:20px;border-radius:var(--radius);text-align:center;font-weight:600}
.kiosk-result.success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:var(--green)}
.kiosk-result.error{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.3);color:var(--red)}
.inst-item{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--glass-border)}
.inst-icon{font-size:1.2rem}

/* ── DASHBOARD ── */
#dashboard-screen{display:none;flex-direction:column}
#dashboard-screen.active{display:flex}
.sidebar{display:none}
.sidebar-logo{display:flex;align-items:center;gap:12px;padding:0 20px 24px;border-bottom:1px solid var(--glass-border)}
.sidebar-brand{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-brand-sub{font-size:.7rem;color:var(--text2)}
.nav-list{list-style:none;padding:16px 0;flex:1}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;
  cursor:pointer;transition:.25s;
  border-left:3px solid transparent;
  color:var(--text2);font-size:.9rem;
  position:relative;
}
.nav-item::after{
  content:'';
  position:absolute;
  inset:0;left:3px;
  background:linear-gradient(90deg,rgba(255,255,255,0.04),transparent);
  opacity:0;transition:.25s;
}
.nav-item:hover{background:rgba(255,255,255,0.03);color:var(--text);border-left-color:var(--blue)}
.nav-item:hover::after{opacity:1}
.nav-item.active{
  background:linear-gradient(90deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  color:var(--cyan);
  border-left-color:var(--cyan);
  box-shadow:inset 0 0 20px rgba(255,255,255,0.02);
}
.nav-icon{font-size:1.1rem}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--glass-border)}
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.user-name{font-weight:600;font-size:.85rem}
.user-role{font-size:.75rem;color:var(--text2)}
.logout-btn{width:100%;padding:8px;background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.2);border-radius:8px;color:var(--red);cursor:pointer;font-family:inherit;font-size:.82rem;transition:.2s}
.logout-btn:hover{background:rgba(244,63,94,0.2)}
.main-content{margin-left:0;flex:1;padding:0;min-height:100vh;width:100%}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--glass-border);background:rgba(10,15,30,0.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.menu-btn{background:none;border:none;color:var(--text2);font-size:1.3rem;cursor:pointer;display:none}
.topbar-title{font-weight:700;font-size:1.1rem;flex:1}
.topbar-time{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--cyan)}
.tab-content{display:none;padding:24px;animation:fadeIn .4s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  padding:20px;display:flex;align-items:center;gap:16px;
  transition:.3s;
  animation:card-slide-up .5s ease both;
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.04),transparent 60%);
  opacity:0;transition:.3s;
}
.stat-card:hover::before{opacity:1}
.stat-card:hover{border-color:rgba(255,255,255,0.25);transform:translateY(-4px);box-shadow:0 12px 40px rgba(255,255,255,0.06)}
.stat-card:nth-child(1){animation-delay:.05s}
.stat-card:nth-child(2){animation-delay:.1s}
.stat-card:nth-child(3){animation-delay:.15s}
.stat-card:nth-child(4){animation-delay:.2s}
@keyframes card-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.stat-icon{font-size:1.8rem;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.stat-icon.blue{background:rgba(255,255,255,0.08);box-shadow:0 0 20px rgba(255,255,255,0.08)}
.stat-icon.green{background:rgba(34,197,94,0.15)}
.stat-icon.red{background:rgba(244,63,94,0.15)}
.stat-icon.purple{background:rgba(167,139,250,0.15)}
.stat-value{font-size:1.8rem;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.stat-label{font-size:.78rem;color:var(--text2);margin-top:2px}
.stat-trend{margin-left:auto;font-size:1.2rem}
.stat-trend.up{color:var(--green)}
.stat-trend.down{color:var(--red)}
.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.chart-card,.today-card{padding:20px}
.card-title{font-size:.95rem;font-weight:700;margin-bottom:16px;color:var(--text)}
.card-sub{font-size:.8rem;color:var(--text2);margin-bottom:12px}
.today-list{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}
.today-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;background:var(--glass);font-size:.85rem}
.today-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.today-name{font-weight:600}
.today-time{font-size:.75rem;color:var(--text2)}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600}
.badge-in{background:rgba(34,197,94,0.15);color:var(--green)}
.badge-out{background:rgba(255,255,255,0.08);color:var(--blue)}
.badge-present{background:rgba(34,197,94,0.15);color:var(--green)}
.badge-absent{background:rgba(244,63,94,0.15);color:var(--red)}
.badge-half{background:rgba(245,158,11,0.15);color:#f59e0b}

/* Scan Tab */
.scan-admin-container{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.scan-cam-wrap,.scan-results-wrap{padding:20px}
.admin-cam{max-width:100%}
.scan-controls{display:flex;gap:10px;margin-top:14px}
.scan-result-log{min-height:300px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.scan-result-item{padding:12px;border-radius:10px;font-size:.85rem}
.scan-result-item.match{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2)}
.scan-result-item.nomatch{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.2)}
.result-name{font-weight:700;font-size:1rem}
.result-action{color:var(--text2);font-size:.8rem}

/* Register Tab */
.register-container{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.register-cam-card,.register-form-card{padding:20px}
.reg-cam{max-width:100%;height:240px;overflow:hidden}
.reg-cam video{width:100%;height:100%;object-fit:cover}
.capture-controls{display:flex;gap:10px;margin-top:12px}
.photo-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.photo-thumb{width:60px;height:60px;border-radius:6px;object-fit:cover;border:2px solid var(--glass-border)}
.capture-count{font-size:.8rem;color:var(--text2);margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.reg-status{padding:12px;border-radius:8px;text-align:center;font-size:.85rem}
.reg-status.success{background:rgba(34,197,94,0.1);color:var(--green);border:1px solid rgba(34,197,94,0.2)}
.reg-status.error{background:rgba(244,63,94,0.1);color:var(--red);border:1px solid rgba(244,63,94,0.2)}

/* Employees */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:1.2rem;font-weight:700}
.section-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-input{padding:10px 14px;min-width:220px}
.employees-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.emp-card{padding:20px;border-radius:var(--radius);display:flex;flex-direction:column;gap:10px;transition:.2s}
.emp-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.emp-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;margin:0 auto 4px}
.emp-name{font-weight:700;text-align:center;font-size:1rem}
.emp-id{font-size:.75rem;color:var(--text2);text-align:center}
.emp-dept{font-size:.8rem;color:var(--blue);text-align:center}
.emp-role{font-size:.8rem;color:var(--text2);text-align:center}
.emp-actions{display:flex;gap:8px;justify-content:center;margin-top:6px}
.btn-edit{padding:6px 14px;font-size:.75rem;font-family:inherit;font-weight:600;border-radius:8px;cursor:pointer;transition:.2s;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:var(--cyan)}
.btn-edit:hover{background:rgba(255,255,255,0.12);border-color:var(--cyan)}

/* Attendance Table */
.manual-att-card{padding:16px;margin-bottom:16px}
.manual-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.manual-form .form-input{flex:1;min-width:140px;padding:10px 14px}
.table-wrap{padding:0;overflow-x:auto}
.att-table{width:100%;border-collapse:collapse;font-size:.85rem}
.att-table th{padding:12px 16px;text-align:left;font-size:.75rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.03)}
.att-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text2)}
.att-table tr:hover td{background:var(--glass)}

/* Reports */

/* Report overview card responsive styling */
.report-overview-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .report-overview-card {
    padding: 16px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
}

.reports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:20px}
.report-card{padding:28px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;transition:.2s}
.report-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.report-icon{font-size:2.5rem}
.report-card h3{font-weight:700}
.report-card p{font-size:.82rem;color:var(--text2)}
.report-output{padding:24px;margin-top:16px}
.report-output table{width:100%;border-collapse:collapse;font-size:.85rem}
.report-output th{padding:10px 14px;text-align:left;color:var(--blue);font-size:.75rem;border-bottom:1px solid var(--glass-border)}
.report-output td{padding:10px 14px;color:var(--text2);border-bottom:1px solid rgba(255,255,255,0.04)}

/* Body scroll lock when modal open */
body.modal-open{overflow:hidden}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,7,18,0.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:20px;
  animation:fadeIn .2s ease;
}
.modal-card{
  width:100%;max-width:680px;
  max-height:90vh;
  overflow-y:auto;
  border-radius:18px;
  padding:28px 32px;
  display:flex;flex-direction:column;gap:18px;
  animation:modal-pop .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 24px 80px rgba(0,0,0,0.7),0 0 0 1px var(--glass-border);
}
@keyframes modal-pop{
  from{transform:scale(.88) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.modal-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--glass-border);
}
.modal-title{
  font-size:1.1rem;font-weight:800;color:var(--text);
  background:linear-gradient(135deg,var(--cyan),var(--blue2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.modal-sub{font-size:.78rem;color:var(--text2);margin-top:4px}
.modal-close-btn{
  width:32px;height:32px;border-radius:50%;
  background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.25);
  color:var(--red);font-size:.9rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:.2s;line-height:1;font-family:inherit;
}
.modal-close-btn:hover{background:rgba(244,63,94,0.25);border-color:var(--red)}
.modal-footer{
  display:flex;gap:10px;justify-content:flex-end;
  padding-top:14px;border-top:1px solid var(--glass-border);
}

/* Toast */
.toast{position:fixed;bottom:28px;right:28px;padding:14px 24px;border-radius:12px;font-size:.88rem;font-weight:600;z-index:9999;animation:slideIn .3s ease;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));color:#fff;box-shadow:var(--shadow)}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Chart */
canvas{width:100%;max-height:220px;display:block}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--blue-dark);border-radius:10px}

/* ── Scan Station ── */
.scan-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.scan-page-title{font-size:1.25rem;font-weight:800;color:var(--text)}
.scan-page-sub{font-size:.83rem;color:var(--text2);margin-top:4px}
.scan-live-clock{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700;color:var(--cyan);text-shadow:0 0 20px rgba(255,255,255,0.2);letter-spacing:.05em}

.scan-station-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start}

/* Camera card */
.scan-cam-card{padding:18px;display:flex;flex-direction:column;gap:14px}
.scan-cam-label{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.scan-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.scan-station-cam{max-width:100%;aspect-ratio:4/3;height:auto}
.face-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3}
.face-guide-svg{width:55%;height:55%;animation:guide-pulse 3s ease-in-out infinite}
@keyframes guide-pulse{0%,100%{opacity:.6}50%{opacity:1}}

.scan-status-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);border-radius:10px;font-size:.84rem;color:var(--text2)}
.scan-status-dot{width:10px;height:10px;border-radius:50%;background:var(--text2);flex-shrink:0;transition:.3s}
.scan-status-dot.ready{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.scan-status-dot.success{background:var(--green);box-shadow:0 0 8px var(--green)}
.scan-status-dot.error{background:var(--red);box-shadow:0 0 8px var(--red)}
.scan-status-dot.scanning{background:var(--blue);box-shadow:0 0 8px var(--blue);animation:blink .5s ease-in-out infinite}

.scan-btn-row{display:flex;gap:10px;align-items:stretch}
.btn-scan-station{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;background:linear-gradient(135deg,#ffffff,#d4d4d8);border:1px solid rgba(255,255,255,0.8);color:#09090b;font-family:inherit;font-size:1rem;font-weight:800;border-radius:12px;cursor:pointer;transition:.2s;box-shadow:0 0 24px rgba(255,255,255,0.18)}
.btn-scan-station:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(255,255,255,0.3)}
.btn-scan-station:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-scan-icon{font-size:1.3rem}
.btn-auto-toggle{padding:12px 16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;color:var(--text2);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-auto-toggle:hover{border-color:var(--blue);color:var(--blue)}
.btn-auto-toggle.active{background:rgba(255,255,255,0.08);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(255,255,255,0.1)}

/* Right column */
.scan-right-col{display:flex;flex-direction:column;gap:16px}

/* Result card */
.scan-result-card{padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;animation:pop-in .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.scan-result-card.check-in{border-color:rgba(34,197,94,0.5);background:rgba(34,197,94,0.06)}
.scan-result-card.check-out{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04)}
.scan-result-card.fail{border-color:rgba(244,63,94,0.4);background:rgba(244,63,94,0.06)}
.src-icon{font-size:3rem;line-height:1}
.src-name{font-size:1.5rem;font-weight:800;color:var(--text)}
.src-dept{font-size:.82rem;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.src-action{font-size:1rem;font-weight:700;margin-top:4px}
.src-action.in{color:var(--green)}
.src-action.out{color:#ffffff;text-shadow:0 0 8px rgba(255,255,255,0.25)}
.src-action.fail{color:var(--red)}
.src-time{font-family:'JetBrains Mono',monospace;font-size:1.3rem;color:var(--cyan)}
.src-conf{font-size:.75rem;color:var(--text2)}

/* Idle card */
.scan-idle-card{padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.idle-icon{font-size:2.8rem;opacity:.5}
.idle-title{font-size:1rem;font-weight:700;color:var(--text2)}
.idle-sub{font-size:.8rem;color:var(--text2);opacity:.7}
.idle-tips{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:8px;text-align:left;width:100%}
.idle-tips li{font-size:.8rem;color:var(--text2);padding:6px 10px;border-radius:8px;background:var(--glass)}

/* Today's log */
.todays-log{padding:16px}
.todays-log-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.log-count{font-size:.75rem;color:var(--text2);background:var(--glass);padding:3px 10px;border-radius:20px}
.scan-today-log{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.log-empty{text-align:center;color:var(--text2);font-size:.82rem;padding:20px 0}
.log-entry{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--glass);border-radius:9px;font-size:.83rem}
.log-entry-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.log-entry-name{font-weight:600;color:var(--text);flex:1}
.log-entry-meta{font-size:.72rem;color:var(--text2)}
.log-entry-badge{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:20px}
.log-entry-badge.in{background:rgba(34,197,94,0.15);color:var(--green)}
.log-entry-badge.out{background:rgba(255,255,255,0.08);color:var(--blue)}

/* ── PAYROLL SECTION ── */
.payroll-section{padding:24px;margin-bottom:20px}
.payroll-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.payroll-section-title{font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.payroll-section-sub{font-size:.78rem;color:var(--text2);margin-top:4px}
.payroll-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.payroll-filters .form-input{padding:10px 12px;min-width:130px}
.payroll-output{overflow-x:auto}
.payroll-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:4px}
.payroll-table th{padding:12px 14px;text-align:left;font-size:.72rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.03);white-space:nowrap}
.payroll-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text2)}
.payroll-table tr:hover td{background:var(--glass)}
.payroll-table td.name-cell{color:var(--text);font-weight:600}
.payroll-table td.salary-cell{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--cyan)}
.payroll-table td.net-cell{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:700;color:var(--green)}
.payroll-table td.penalty-cell{color:var(--red)}
.payroll-table td.zero-cell{color:var(--text2);opacity:.5}
.payroll-summary-bar{display:flex;gap:20px;flex-wrap:wrap;padding:14px 0 18px;border-bottom:1px solid var(--glass-border);margin-bottom:16px}
.payroll-sum-item{display:flex;flex-direction:column;gap:4px;min-width:120px}
.payroll-sum-label{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.payroll-sum-value{font-size:1.2rem;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.payroll-sum-value.red{color:var(--red)}
.payroll-sum-value.green{color:var(--green)}
.payroll-late-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;background:rgba(244,63,94,0.12);color:var(--red);border:1px solid rgba(244,63,94,0.2)}

/* Salary badge on employee card */
.emp-salary-badge{display:inline-block;margin-top:2px;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;font-family:'JetBrains Mono',monospace;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:var(--cyan)}

/* ── MONTHLY CALENDAR ── */
.cal-card{padding:24px;margin-top:20px}
.cal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cal-title-block{}
.cal-title{font-size:1rem;font-weight:800;color:var(--text)}
.cal-sub{font-size:.75rem;color:var(--text2);margin-top:3px}
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-month-label{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--cyan);min-width:160px;text-align:center}
.cal-nav-btn{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);color:var(--blue);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;font-family:inherit}
.cal-nav-btn:hover{background:rgba(255,255,255,0.06);border-color:var(--blue)}
.cal-today-btn{padding:6px 14px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.15);color:var(--blue);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.cal-today-btn:hover{background:rgba(255,255,255,0.08);border-color:var(--blue)}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)}
.cal-leg-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text2)}
.cal-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-full{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,0.5)}
.dot-half{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,0.4)}
.dot-absent{background:var(--red);box-shadow:0 0 6px rgba(244,63,94,0.3)}
.dot-weekend{background:rgba(148,163,184,0.3);border:1px solid rgba(148,163,184,0.3)}
.cal-grid-wrap{overflow-x:auto}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-weekdays span{text-align:center;font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;padding:4px 0}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{min-height:68px;border-radius:10px;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.18s;position:relative;border:1px solid transparent}
.cal-day:hover{background:rgba(255,255,255,0.04);border-color:var(--glass-border)}
.cal-day.empty{cursor:default;pointer-events:none}
.cal-day.today{border-color:var(--cyan)!important;background:rgba(255,255,255,0.05)}
.cal-day.today .cal-day-num{color:var(--cyan);font-weight:800}
.cal-day.weekend .cal-day-num{color:var(--text2);opacity:.6}
.cal-day.selected{background:rgba(255,255,255,0.08);border-color:var(--blue)}
.cal-day-num{font-size:.85rem;font-weight:600;color:var(--text);line-height:1}
.cal-day-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-day-count{font-size:.65rem;color:var(--text2);font-weight:600;margin-top:auto}
.cal-day-bar{position:absolute;bottom:4px;left:8px;right:8px;height:3px;border-radius:2px;opacity:.7}
.cal-day.status-full .cal-day-bar{background:var(--green)}
.cal-day.status-half .cal-day-bar{background:#f59e0b}
.cal-day.status-absent .cal-day-bar{background:transparent}
.cal-day.status-full{background:rgba(34,197,94,0.04)}
.cal-day.status-half{background:rgba(245,158,11,0.05)}
.cal-day.future{opacity:.35;cursor:default;pointer-events:none}
/* Day detail popup */
.cal-day-detail{margin-top:14px;padding:16px 20px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.02);animation:fadeIn .2s ease}
.cal-detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-detail-date{font-size:.95rem;font-weight:700;color:var(--text)}
.cal-detail-badge{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px}
.cal-detail-badge.full{background:rgba(34,197,94,0.15);color:var(--green)}
.cal-detail-badge.half{background:rgba(245,158,11,0.15);color:#f59e0b}
.cal-detail-badge.absent{background:rgba(244,63,94,0.12);color:var(--red)}
.cal-detail-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.cal-detail-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--glass);border-radius:8px;font-size:.82rem}
.cal-detail-name{flex:1;font-weight:600;color:var(--text)}
.cal-detail-time{font-size:.75rem;color:var(--text2)}
.cal-detail-status{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}
.cal-detail-empty{text-align:center;color:var(--text2);font-size:.82rem;padding:12px}

/* Payroll section (already added, keeping gap) */
@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid,.register-container,.scan-admin-container{grid-template-columns:1fr}
  .scan-station-grid{grid-template-columns:1fr}
  .reports-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .main-content{margin-left:0}
  .menu-btn{display:block}
  .kiosk-body{flex-direction:column}
  /* Attendance section actions */
  .section-actions{flex-wrap:wrap;gap:8px}
  .section-actions .form-input,.section-actions input[type=date]{flex:1;min-width:120px}
}

/* ── EMPLOYEE FACE SCAN SCREEN ── */
#employee-screen{flex-direction:column;background:var(--bg);overflow-y:auto}
#employee-screen.active{display:flex}
.emp-kiosk-wrap{display:flex;flex-direction:column;min-height:100vh;max-width:1100px;margin:0 auto;width:100%;padding:16px 20px;gap:20px}

/* Header */
.emp-kiosk-header{display:flex;align-items:center;gap:16px;padding:14px 20px;background:rgba(10,15,30,0.85);border:1px solid var(--glass-border);border-radius:14px;backdrop-filter:blur(20px);flex-wrap:wrap}
.emp-kiosk-brand{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.emp-kiosk-greeting{flex:1;display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:500;color:var(--text2);flex-wrap:wrap}
.emp-name-badge{background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;font-size:1.1rem}
.emp-kiosk-clock-wrap{text-align:right}
.emp-kiosk-time{font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--cyan);text-shadow:0 0 16px rgba(255,255,255,0.2)}
.emp-kiosk-date{font-size:.75rem;color:var(--text2);margin-top:2px}
.emp-logout-btn{padding:9px 18px;background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.25);border-radius:10px;color:var(--red);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.emp-logout-btn:hover{background:rgba(244,63,94,0.2);border-color:var(--red)}

/* Body layout */
.emp-kiosk-body{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start;flex:1}
.emp-cam-col,.emp-result-col{display:flex;flex-direction:column;gap:16px}
.emp-cam-card{padding:18px;display:flex;flex-direction:column;gap:14px}
.emp-cam-frame{max-width:100%;aspect-ratio:4/3;height:auto}

/* Today info card */
.emp-today-card{padding:20px}
.emp-today-info{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.emp-today-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--glass);border-radius:10px}
.emp-today-label{font-size:.8rem;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.emp-today-val{font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--cyan)}

@media(max-width:820px){
  .emp-kiosk-body{grid-template-columns:1fr}
  .emp-kiosk-header{gap:10px}
  .emp-kiosk-time{font-size:1.1rem}
}

/* ────────────────────────────────────────────
   REDESIGNED KIOSK SCREEN
   ──────────────────────────────────────────── */

/* Login page kiosk card */
.kiosk-card-icon{font-size:2.4rem;text-align:center;margin-bottom:4px}
.btn-kiosk-open{
  width:100%;padding:13px 20px;
  background:linear-gradient(135deg,var(--cyan),var(--blue2));
  color:#000;font-family:inherit;font-weight:800;font-size:.95rem;
  border:none;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 0 24px rgba(255,255,255,0.18);transition:.2s;
}
.btn-kiosk-open:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,255,255,0.3)}

/* Full-screen kiosk wrapper */
#kiosk-screen{flex-direction:column;position:relative}
.kiosk-full{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);padding:0;overflow:hidden}

/* Top bar */
.kiosk-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(10,10,12,0.95);border-bottom:1px solid var(--glass-border);backdrop-filter:blur(16px);gap:12px;flex-wrap:wrap}
.kiosk-back-btn{padding:8px 16px;background:var(--glass);border:1px solid var(--glass-border);color:var(--blue);border-radius:9px;cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;transition:.2s}
.kiosk-back-btn:hover{border-color:var(--blue);background:rgba(255,255,255,0.05)}
.kiosk-brand-row{display:flex;align-items:center;gap:10px}
.kiosk-brand-name{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kiosk-brand-tag{font-size:.72rem;color:var(--text2);text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:20px}
.kiosk-clock-block{text-align:right}
.kiosk-time{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;color:var(--cyan);text-shadow:0 0 16px rgba(255,255,255,0.2)}
.kiosk-date{font-size:.73rem;color:var(--text2);margin-top:2px}

/* Main layout — camera is the dominant, near-full-screen element */
.kiosk-main{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:14px 20px;overflow-y:auto}

/* Camera card */
.kiosk-cam-col{display:flex;flex-direction:column;gap:0;width:100%;max-width:1000px}
.kiosk-cam-card{padding:18px;display:flex;flex-direction:column;gap:14px}
.kiosk-cam-label{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.kiosk-live-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 1.2s ease-in-out infinite;flex-shrink:0}
.kiosk-cam-frame{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--glass-border);background:#000;width:min(94vw,900px);height:min(48vh,620px);margin:0 auto}
.kiosk-cam-frame video{width:100%;height:100%;object-fit:cover;display:block}
.kiosk-scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scan 2.5s ease-in-out infinite;z-index:3}
.kiosk-face-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.kiosk-guide-svg{width:70%;height:70%;animation:guide-pulse 3s ease-in-out infinite}

/* Status bar */
.kiosk-status-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);border-radius:10px;font-size:.84rem;color:var(--text2)}
.kiosk-status-dot{width:10px;height:10px;border-radius:50%;background:var(--text2);flex-shrink:0;transition:.3s}
.kiosk-status-dot.success{background:var(--green);box-shadow:0 0 8px var(--green)}
.kiosk-status-dot.error{background:var(--red);box-shadow:0 0 8px var(--red)}
.kiosk-status-dot.scanning{background:var(--blue);box-shadow:0 0 8px var(--blue);animation:blink .5s ease-in-out infinite}

/* Buttons */
.kiosk-btn-row{display:flex;gap:10px;align-items:stretch}
.btn-kiosk-scan{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;background:linear-gradient(135deg,#ffffff,#d4d4d8);border:1px solid rgba(255,255,255,0.8);color:#09090b;font-family:inherit;font-size:1rem;font-weight:800;border-radius:12px;cursor:pointer;transition:.2s;box-shadow:0 0 24px rgba(255,255,255,0.18)}
.btn-kiosk-scan:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,255,255,0.3)}
.btn-kiosk-scan:disabled{opacity:.5;cursor:not-allowed;transform:none}
.kiosk-scan-icon{font-size:1.3rem}
.btn-kiosk-auto{padding:12px 16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;color:var(--text2);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-kiosk-auto:hover{border-color:var(--blue);color:var(--blue)}
.btn-kiosk-auto.active{background:rgba(255,255,255,0.08);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(255,255,255,0.1)}

/* Compact toggle row — replaces the always-visible info column */
.kiosk-toggle-row{display:flex;gap:10px}
.kiosk-toggle-btn{flex:1;padding:9px 12px;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;color:var(--text2);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.kiosk-toggle-btn:hover{border-color:var(--blue);color:var(--blue)}
#kiosk-today-count-badge{background:rgba(255,255,255,0.1);color:var(--text);border-radius:20px;padding:1px 7px;font-size:.72rem;font-weight:700}

/* Right info drawer — hidden off-screen by default, slides in when opened via the toggle buttons */
.kiosk-drawer-backdrop{position:fixed;inset:0;background:rgba(3,7,18,0.55);backdrop-filter:blur(2px);z-index:149;opacity:0;pointer-events:none;transition:opacity .25s ease}
.kiosk-drawer-backdrop.open{opacity:1;pointer-events:auto}
.kiosk-info-col{position:fixed;top:0;right:0;height:100vh;width:min(380px,88vw);background:rgba(10,10,12,0.98);backdrop-filter:blur(24px);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;gap:16px;padding:20px 16px;overflow-y:auto;z-index:150;transform:translateX(100%);transition:transform .3s ease;box-shadow:-20px 0 60px rgba(0,0,0,0.4)}
.kiosk-instructions-card,.kiosk-today-card{display:none}
.kiosk-info-col.open{transform:translateX(0)}
.kiosk-info-col.open .kiosk-instructions-card.active,
.kiosk-info-col.open .kiosk-today-card.active{display:block}
.kiosk-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kiosk-panel-close{width:28px;height:28px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);color:var(--text2);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kiosk-panel-close:hover{border-color:var(--red);color:var(--red)}

/* Instructions card */
.kiosk-instructions-card{padding:20px}
.kiosk-inst-title{font-size:.85rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}
.kiosk-inst-list{display:flex;flex-direction:column;gap:12px}
.kiosk-inst-item{display:flex;align-items:flex-start;gap:14px}
.kiosk-inst-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.kiosk-inst-head{font-size:.85rem;font-weight:600;color:var(--text)}
.kiosk-inst-sub{font-size:.75rem;color:var(--text2);margin-top:2px}

/* Today's log card */
.kiosk-today-card{padding:18px}
.kiosk-today-title{font-size:.85rem;font-weight:700;color:var(--text)}
.kiosk-today-log{display:flex;flex-direction:column;gap:7px;max-height:220px;overflow-y:auto}
.kiosk-today-empty{text-align:center;color:var(--text2);font-size:.8rem;padding:16px 0;opacity:.7}
.kiosk-today-count{font-size:.72rem;color:var(--text2);text-align:right;margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-border)}
.kiosk-today-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--glass);border-radius:9px;font-size:.82rem}
.kiosk-today-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.kiosk-today-info{flex:1;min-width:0}
.kiosk-today-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kiosk-today-meta{font-size:.72rem;color:var(--text2);margin-top:1px}
.kiosk-today-badge{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0}
.kiosk-today-badge.in{background:rgba(34,197,94,0.15);color:var(--green)}
.kiosk-today-badge.out{background:rgba(255,255,255,0.08);color:var(--blue)}

/* ────────────── KIOSK POPUP OVERLAY ────────────── */
.kiosk-popup{
  position:absolute;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,7,18,0.75);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.kiosk-popup.show{opacity:1;pointer-events:auto}
.kiosk-popup.hidden{display:none}

.kiosk-popup-card{
  width:min(480px,90vw);
  padding:40px 36px 32px;
  border-radius:24px;
  border:1px solid var(--glass-border);
  background:rgba(10,10,12,0.98);
  backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 60px rgba(0,0,0,0.4);
  animation:popup-bounce .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popup-bounce{from{transform:scale(.7) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

/* States */
.kiosk-popup-card.check-in{border-color:rgba(34,197,94,0.4);box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 80px rgba(34,197,94,0.12)}
.kiosk-popup-card.check-out{border-color:rgba(255,255,255,0.4);box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 80px rgba(255,255,255,0.12)}
.kiosk-popup-card.fail{border-color:rgba(244,63,94,0.4);box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 60px rgba(244,63,94,0.1)}

/* Avatar circle */
.kiosk-popup-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue2),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;font-weight:800;color:#fff;
  box-shadow:0 0 30px rgba(255,255,255,0.1);
  margin-bottom:4px;
}
.kiosk-popup-card.check-in .kiosk-popup-avatar{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 0 30px rgba(34,197,94,0.3)}
.kiosk-popup-card.check-out .kiosk-popup-avatar{background:linear-gradient(135deg,#ffffff,#94a3b8);box-shadow:0 0 30px rgba(255,255,255,0.2);color:#000}
.kiosk-popup-card.fail .kiosk-popup-avatar{background:linear-gradient(135deg,#f43f5e,#9f1239);box-shadow:0 0 24px rgba(244,63,94,0.3)}

/* Text elements */
.kiosk-popup-greeting{font-size:.88rem;color:var(--text2);font-weight:500;letter-spacing:.03em}
.kiosk-popup-name{font-size:2rem;font-weight:900;color:var(--text);line-height:1.1;text-align:center}
.kiosk-popup-action{font-size:1.25rem;font-weight:700;margin-top:4px}
.kiosk-popup-action.in{color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,0.3)}
.kiosk-popup-action.out{color:#f4f4f5;text-shadow:0 0 12px rgba(255,255,255,0.2)}
.kiosk-popup-action.fail{color:#f87171;text-shadow:0 0 12px rgba(248,113,113,0.3)}
.kiosk-popup-time{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700;color:var(--cyan);text-shadow:0 0 16px rgba(255,255,255,0.2);margin-top:2px}
.kiosk-popup-conf{font-size:.75rem;color:var(--text2);opacity:.7}

/* Progress bar (auto-dismiss countdown) */
.kiosk-popup-bar{width:100%;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-top:16px}
.kiosk-popup-progress{height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,#22c55e,#15803d)}
.kiosk-popup-card.check-out .kiosk-popup-progress{background:linear-gradient(90deg,#ffffff,#94a3b8)}
.kiosk-popup-card.fail .kiosk-popup-progress{background:linear-gradient(90deg,var(--red),#9f1239)}
.kiosk-popup-card.time-blocked{border-color:rgba(245,158,11,0.5);box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 60px rgba(245,158,11,0.12)}
.kiosk-popup-card.time-blocked .kiosk-popup-avatar{background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 0 24px rgba(245,158,11,0.35)}
.kiosk-popup-card.time-blocked .kiosk-popup-progress{background:linear-gradient(90deg,#f59e0b,#b45309)}
.kiosk-popup-action.time-blocked{color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,0.3)}
.kiosk-popup-card.rescan{border-color:rgba(245,158,11,0.4);box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 60px rgba(245,158,11,0.1)}
.kiosk-popup-action.rescan{color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,0.3)}

@media(max-width:900px){
  .kiosk-main{grid-template-columns:1fr;padding:16px}
  .kiosk-topbar{padding:12px 16px}
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — Full system
   ═══════════════════════════════════════════════════ */

/* ── 900px breakpoint (tablet + small laptop) ── */
@media(max-width:900px){

  /* Sidebar (hidden) */
  .sidebar{display:none}

  /* Stats grid → 2 columns */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}

  /* Dashboard/Register/Scan → single column */
  .dashboard-grid,
  .register-container,
  .scan-admin-container,
  .scan-station-grid{grid-template-columns:1fr}



  /* Kiosk screen */
  .kiosk-main{grid-template-columns:1fr;padding:14px 16px;gap:14px}
  .kiosk-topbar{padding:10px 14px;gap:8px}
  .kiosk-brand-tag{display:none}
  .kiosk-time{font-size:1.2rem}
  /* Cap camera height so the Scan button + toggle row stay on-screen on tablets */
  .kiosk-cam-frame{height:min(50vh,520px)}

  /* Employee kiosk body */
  .emp-kiosk-body{grid-template-columns:1fr}
  .emp-kiosk-header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .emp-kiosk-time{font-size:1.1rem}

  /* Form rows → stacked */
  .form-row{grid-template-columns:1fr}

  /* Tables → scrollable */
  .table-wrap,.payroll-output{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .att-table,.payroll-table,.report-output table{min-width:600px}

  /* Calendar */
  .cal-day{min-height:52px;padding:5px 3px}
  .cal-day-num{font-size:.78rem}
  .cal-day-count{display:none}
}

/* ── 640px breakpoint (mobile landscape + large phones) ── */
@media(max-width:640px){

  /* Login page */
  .login-container{max-width:100%;padding:0 4px}
  .login-card{padding:20px 16px}
  .logo-wrap{gap:10px}
  .rb-logo-wrap{width:64px;height:64px}
  .rb-logo-img{width:58px;height:58px}
  .brand-name{font-size:1.5rem}
  .role-tabs{gap:4px}
  .role-tab{padding:7px 12px;font-size:.8rem}

  /* Topbar */
  .topbar{padding:12px 14px}
  .topbar-time{display:none}

  /* Stats → 2 cols compact */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px;gap:10px}
  .stat-icon{width:40px;height:40px;font-size:1.3rem}
  .stat-value{font-size:1.4rem}

  /* Tab content padding */
  .tab-content{padding:16px 12px}

  /* Employee cards → full width */
  .employees-grid{grid-template-columns:1fr}
  .emp-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:14px}
  .emp-avatar{width:44px;height:44px;font-size:1.1rem;margin:0;flex-shrink:0}
  .emp-name,.emp-id,.emp-dept,.emp-role{text-align:left}
  .emp-actions{flex-wrap:wrap;justify-content:flex-start;gap:6px;width:100%}
  .emp-actions button,.btn-edit,.btn-danger{font-size:.72rem!important;padding:5px 10px!important}

  /* Kiosk screen compact */
  .kiosk-topbar{padding:8px 12px}
  .kiosk-back-btn{padding:6px 12px;font-size:.78rem}
  .kiosk-brand-name{font-size:1rem}
  .kiosk-time{font-size:1rem}
  .kiosk-date{font-size:.65rem}
  .kiosk-main{padding:10px 12px;gap:10px}
  .kiosk-cam-card,.kiosk-today-card,.kiosk-instructions-card{padding:14px}
  /* Cap camera height so the Scan button stays on-screen without scrolling —
     70vh (desktop default) leaves no room for topbar/banner/buttons on a phone. */
  .kiosk-cam-frame{height:min(44vh,420px)}
  .btn-kiosk-scan{padding:13px 16px;font-size:.9rem}
  .kiosk-popup-card{padding:28px 20px 22px;gap:10px}
  .kiosk-popup-name{font-size:1.5rem}
  .kiosk-popup-time{font-size:1.2rem}
  .kiosk-popup-avatar{width:64px;height:64px;font-size:1.7rem}

  /* Section header → stacked */
  .section-header{flex-direction:column;align-items:flex-start;gap:10px}
  .section-actions{width:100%}
  .search-input{width:100%;min-width:0}

  /* Manual attendance form */
  .manual-form{flex-direction:column;gap:8px}
  .manual-form .form-input{width:100%}

  /* Payroll filters */
  .payroll-filters{flex-direction:column;gap:8px}
  .payroll-filters .form-input{width:100%}
  .payroll-section-header{flex-direction:column;gap:10px}

  /* Modals */
  .modal-card{padding:20px 16px;border-radius:14px}
  .modal-footer{flex-direction:column}
  .modal-footer button{width:100%}

  /* Calendar compact */
  .cal-header{flex-direction:column;gap:10px}
  .cal-nav{flex-wrap:wrap;gap:6px}
  .cal-month-label{min-width:120px;font-size:.82rem}
  .cal-legend{gap:10px}
  .cal-day{min-height:44px;border-radius:7px;padding:4px 2px}
  .cal-day-num{font-size:.72rem}
  .cal-weekdays span{font-size:.62rem}

  /* Toast — bottom center on mobile */
  .toast{right:12px;left:12px;bottom:16px;text-align:center}

  /* Employee kiosk header stacked */
  .emp-kiosk-header{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px}
  .emp-kiosk-clock-wrap{text-align:left}
  .emp-kiosk-time{font-size:1rem}
  .emp-kiosk-wrap{padding:10px 12px;gap:14px}
  .emp-today-row{flex-direction:column;align-items:flex-start;gap:4px}
  .emp-today-val{font-size:.95rem}

  /* Payroll summary bar */
  .payroll-summary-bar{gap:12px}
  .payroll-sum-item{min-width:100px}
  .payroll-sum-value{font-size:1rem}
}

/* ── 480px breakpoint (small phones) ── */
@media(max-width:480px){

  /* Login */
  #login-screen{padding:12px}
  .login-card{padding:16px 12px;gap:12px}
  .brand-name{font-size:1.25rem}
  .brand-sub{font-size:.72rem}
  .role-tab{padding:6px 10px;font-size:.75rem}
  .btn-primary{padding:11px 16px;font-size:.85rem}

  /* Stats → 1 column on tiny screens */
  .stats-grid{grid-template-columns:1fr;gap:8px}
  .stat-card{padding:12px;gap:8px}

  /* Cards */
  .glass-card{border-radius:10px}

  /* Tab padding minimal */
  .tab-content{padding:12px 8px}

  /* Kiosk popup minimal */
  .kiosk-popup-card{width:95vw;padding:22px 14px 18px}
  .kiosk-popup-name{font-size:1.25rem}
  .kiosk-popup-time{font-size:1rem}
  .kiosk-popup-action{font-size:1rem}

  /* Tables */
  .att-table th,.att-table td,
  .payroll-table th,.payroll-table td{padding:9px 10px;font-size:.78rem}


  .report-card{padding:18px}

  /* Section title */
  .section-title{font-size:1rem}

  /* Kiosk scan button full */
  .kiosk-btn-row{flex-direction:column;gap:8px}
  .btn-kiosk-auto{text-align:center}
  .scan-btn-row{flex-direction:column;gap:8px}

  /* Modal */
  .modal-card{padding:16px 12px;max-height:95vh}

  /* Kiosk topbar collapse */
  .kiosk-topbar{flex-wrap:wrap}
  .kiosk-clock-block{order:3;width:100%;text-align:left}
  .kiosk-time{font-size:.9rem}

  /* Settings cards */
  [class*="glass-card"][style*="padding:28px"]{padding:16px!important}
}

/* ── Touch-friendly tap targets ── */
@media(hover:none){
  .nav-item{min-height:48px}
  .btn-primary,.btn-secondary,.btn-danger,.btn-scan,.btn-kiosk-scan,.btn-scan-station{min-height:44px}
  .form-input, select { min-height: 44px; font-size: 16px; } /* prevents iOS zoom */

  .role-tab{min-height:40px}
}

/* ── Sidebar hamburger overlay fix ── */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:199;
  backdrop-filter:blur(2px);
  cursor:pointer;
}
@media(max-width:900px){
  .sidebar-overlay.show{display:block}
}

/* ── Settings cards full-width on mobile ── */
@media(max-width:900px){
  #tab-settings > div{max-width:100%!important}
  .payroll-section-header{flex-direction:column;gap:10px}
  .payroll-filters{flex-direction:column;gap:8px;width:100%}
  .payroll-filters .form-input,.payroll-filters button{width:100%}
}

/* ── Attendance section actions on mobile ── */
@media(max-width:640px){
  #tab-dashboard .section-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  /* Backup panel inline styles */
  #tab-reports > div:last-child > div:first-child{flex-direction:column!important;align-items:flex-start!important}
  #tab-reports > div:last-child > div:first-child > div:last-child{width:100%;flex-wrap:wrap}
  #tab-reports > div:last-child > div:last-child > div:not(#backup-log){padding:14px!important}
}

/* ── Minimal filter styles for Attendance Records ── */
#tab-dashboard .section-actions .minimal-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 155px !important;
  flex: none !important;
}

#tab-dashboard .section-actions .minimal-filter-wrap select.form-input {
  width: 100% !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 6px 24px 6px 28px !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  flex: none !important;
}

#tab-dashboard .section-actions input[type=date].form-input {
  width: 125px !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  flex: none !important;
}

#tab-dashboard .section-actions button {
  width: auto !important;
  flex: none !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ── 360px (very small phones e.g. Galaxy A series) ── */
@media(max-width:360px){
  .brand-name{font-size:1.1rem}
  .brand-sub{font-size:.68rem}
  .role-tab{padding:6px 6px;font-size:.72rem}
  .stat-value{font-size:1.2rem}
  .kiosk-popup-card{padding:18px 10px 14px}
  .kiosk-popup-name{font-size:1.1rem}
  .kiosk-popup-time{font-size:.95rem}
  .kiosk-popup-avatar{width:54px;height:54px;font-size:1.4rem}
  .topbar-title{font-size:.95rem}
  .emp-kiosk-brand span:not(svg){font-size:.9rem}
  .emp-kiosk-time{font-size:.9rem}
  .kiosk-cam-card,.emp-cam-card,.kiosk-today-card,.kiosk-instructions-card{padding:10px}
  .btn-kiosk-scan,.btn-scan-station{font-size:.82rem;padding:11px 12px}
  /* Inline kiosk button */
  #kiosk-entry-btn{padding:12px 16px!important;font-size:.88rem!important}
}

/* ══════════════════════════════════════════
   GLOBAL ANIMATION & BLUE ACCENT UPGRADE
   ══════════════════════════════════════════ */

/* Floating orbs in background */
.bg-particles::before,.bg-particles::after{
  content:'';
  position:absolute;
  border-radius:50%;
  animation:orb-float 8s ease-in-out infinite;
  filter:blur(60px);
  pointer-events:none;
}
.bg-particles::before{
  width:300px;height:300px;
  background:rgba(255,255,255,0.015);
  top:20%;left:10%;
  animation-delay:0s;
}
.bg-particles::after{
  width:200px;height:200px;
  background:rgba(255,255,255,0.01);
  bottom:25%;right:15%;
  animation-delay:4s;
}
@keyframes orb-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-40px) scale(1.1)}
}

/* Sidebar blue accent top border */
.sidebar::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue2),transparent);
  animation:border-travel 3s linear infinite;
}
@keyframes border-travel{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
  0%,100%{opacity:.7}50%{opacity:1}
}

/* Topbar animated blue underline */
.topbar::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 30%,var(--blue2) 70%,transparent 100%);
  background-size:200% 100%;
  animation:shimmer-line 4s linear infinite;
}
@keyframes shimmer-line{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.topbar{position:relative}

/* Stat values — count-up glow */
.stat-value{
  font-size:1.8rem;font-weight:800;
  font-family:'JetBrains Mono',monospace;
  background:linear-gradient(135deg,var(--cyan),var(--blue2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.12));
  animation:stat-glow 3s ease-in-out infinite alternate;
}
@keyframes stat-glow{
  from{filter:drop-shadow(0 0 4px rgba(255,255,255,0.08))}
  to{filter:drop-shadow(0 0 16px rgba(255,255,255,0.25))}
}

/* Employee cards staggered entrance */
.emp-card{
  animation:card-pop-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
.emp-card:nth-child(1){animation-delay:.04s}
.emp-card:nth-child(2){animation-delay:.08s}
.emp-card:nth-child(3){animation-delay:.12s}
.emp-card:nth-child(4){animation-delay:.16s}
.emp-card:nth-child(5){animation-delay:.20s}
.emp-card:nth-child(6){animation-delay:.24s}
.emp-card:nth-child(7){animation-delay:.28s}
.emp-card:nth-child(8){animation-delay:.32s}
@keyframes card-pop-in{
  from{opacity:0;transform:scale(0.88) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Employee card blue accent on hover */
.emp-card{
  transition:border-color .25s, transform .25s, box-shadow .25s;
  position:relative;overflow:hidden;
}
.emp-card::before{
  content:'';
  position:absolute;
  top:-100%;left:-100%;
  width:60%;height:60%;
  background:radial-gradient(circle,rgba(255,255,255,0.05),transparent 70%);
  transition:.4s;pointer-events:none;
}
.emp-card:hover::before{top:-10%;left:-10%}
.emp-card:hover{
  border-color:rgba(255,255,255,0.25);
  transform:translateY(-5px);
  box-shadow:0 16px 48px rgba(255,255,255,0.08);
}

/* Avatar blue ring pulse */
.emp-avatar,.today-avatar,.user-avatar{
  animation:avatar-pulse 4s ease-in-out infinite;
}
@keyframes avatar-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,0.12)}
}

/* Table row entrance */
.att-table tbody tr{
  animation:row-slide-in .3s ease both;
}
.att-table tbody tr:nth-child(1){animation-delay:.02s}
.att-table tbody tr:nth-child(2){animation-delay:.04s}
.att-table tbody tr:nth-child(3){animation-delay:.06s}
.att-table tbody tr:nth-child(4){animation-delay:.08s}
.att-table tbody tr:nth-child(5){animation-delay:.10s}
@keyframes row-slide-in{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.att-table tbody tr:hover{
  background:rgba(255,255,255,0.04);
  box-shadow:inset 3px 0 0 var(--cyan);
}

/* Form inputs — animated border on focus */
.form-input:focus,.form-select:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(255,255,255,0.15),0 0 20px rgba(255,255,255,0.05);
  background:rgba(255,255,255,0.06);
}

/* Section title blue underline */
.section-title{
  position:relative;display:inline-block;
}
.section-title::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue2),transparent);
  border-radius:2px;
  animation:underline-glow 2s ease-in-out infinite alternate;
}
@keyframes underline-glow{
  from{opacity:.6;width:60%}
  to{opacity:1;width:100%}
}

/* Badge blue glow */
.badge-in{
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.15);
  color:var(--text);
  box-shadow:0 0 8px rgba(255,255,255,0.1);
  animation:badge-pulse 2.5s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{box-shadow:0 0 6px rgba(255,255,255,0.06)}
  50%{box-shadow:0 0 14px rgba(255,255,255,0.15)}
}

/* Logo ring blue glow animation */
.rb-logo-wrap{
  animation:logo-glow 4s ease-in-out infinite alternate;
}
@keyframes logo-glow{
  from{box-shadow:0 0 20px rgba(255,255,255,0.15),0 4px 16px rgba(0,0,0,0.4)}
  to{box-shadow:0 0 50px rgba(255,255,255,0.3),0 4px 24px rgba(0,0,0,0.5)}
}

/* Kiosk clock cyan glow */
.kiosk-time,.topbar-time{
  animation:clock-glow 2s ease-in-out infinite alternate;
  text-shadow:0 0 20px rgba(255,255,255,0.3);
}
@keyframes clock-glow{
  from{text-shadow:0 0 10px rgba(255,255,255,0.15)}
  to{text-shadow:0 0 28px rgba(255,255,255,0.45)}
}

/* Modal card entrance */
.modal-card{
  animation:modal-drop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modal-drop{
  from{opacity:0;transform:scale(.9) translateY(-20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Register card section title blue left border */
.card-title{
  padding-left:10px;
  border-left:3px solid var(--cyan);
  background:linear-gradient(90deg,rgba(255,255,255,0.04),transparent);
  padding:6px 10px;
  border-radius:0 6px 6px 0;
}

/* Loading skeleton shimmer for cards */
@keyframes skeleton-shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}

/* Scan line on camera — more vibrant */
.scan-line{
  background:linear-gradient(90deg,transparent,var(--cyan) 40%,var(--blue2) 60%,transparent);
  height:3px;
  filter:drop-shadow(0 0 6px var(--cyan));
}

/* Sidebar logo animated gradient text */
.sidebar-brand{
  animation:gradient-shift 4s ease infinite alternate;
  background-size:200% auto;
}
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* ────────────────────────────────────────────
   SUB-TAB NAVIGATION STYLES
   ──────────────────────────────────────────── */
.sub-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  flex-wrap: wrap;
}
.sub-tab-btn {
  flex: 1;
  min-width: 140px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text2);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sub-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.sub-tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cyan);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08), inset 0 0 10px rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.sub-tab-content {
  display: none;
  animation: fadeIn .3s ease;
}
.sub-tab-content.active {
  display: block;
}

/* ── Attendance Calendar Day Styles (Sunday: Green, Holiday: Yellow) ── */
.cal-day.status-holiday {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.1) !important;
}
.cal-day.status-holiday:hover {
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
}
.cal-day.status-holiday .cal-day-num {
  color: #fbbf24 !important;
  font-weight: 700;
}
.cal-day.status-holiday .cal-day-bar {
  background: #f59e0b !important;
  box-shadow: 0 0 6px #f59e0b;
}
.cal-dot.dot-holiday, .cal-day-dot.dot-holiday {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
.status-holiday-text {
  color: #fbbf24 !important;
  font-weight: 700;
}

.cal-day.status-sunday {
  background: rgba(34, 197, 94, 0.05) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.05) !important;
}
.cal-day.status-sunday:hover {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15) !important;
}
.cal-day.status-sunday .cal-day-num {
  color: var(--green) !important;
  font-weight: 700;
}
.cal-day.status-sunday .cal-day-bar {
  background: var(--green) !important;
  box-shadow: 0 0 6px var(--green);
}

@media(max-width:768px){
  .reports-grid { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────
   HEADER NAVIGATION & LAYOUT CONSOLIDATION
   ──────────────────────────────────────────── */
.sidebar {
  display: none !important;
}
.main-content {
  margin-left: 0 !important;
}
.menu-btn {
  display: none !important;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.header-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transform: translateY(-1px);
}

.header-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--cyan);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.header-nav-item.logout-btn {
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.18);
  color: var(--red);
}

.header-nav-item.logout-btn:hover {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

/* Adjust topbar for responsiveness */
@media (max-width: 768px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 8px 12px;
  }
  .topbar > img {
    order: 1;
  }
  .topbar-title {
    order: 2;
    font-size: 1.05rem;
    margin-right: auto;
  }
  .topbar-stats {
    order: 3;
    margin-left: 0;
    margin-top: 0;
    padding: 4px 10px;
    font-size: 0.78rem;
  }
  .topbar-time {
    display: none !important;
  }
  .topbar-spacer {
    display: none !important;
  }
  .topbar-nav {
    order: 5;
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    margin-top: 4px;
  }
  .header-nav-item {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.78rem;
  }
}

/* Topbar Quick Stats Widget */
.topbar-stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(18, 18, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  margin-left: 20px;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.02), 0 4px 12px rgba(0, 0, 0, 0.2);
  user-select: none;
  flex-shrink: 0;
}

.tb-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

.tb-stat-item span {
  font-weight: 800;
  color: var(--cyan);
}

/* Specific colors for counts to make them premium */
#tb-present {
  color: var(--green) !important;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

#tb-absent {
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}