/* cache-bust: 1775193274 */
/* ============================================================
   bizlumoAI Pro — Enterprise Dark Theme
   Font: Plus Jakarta Sans + Space Mono
   ============================================================ */

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

:root {
  --bg:         #060810;
  --surface:    #0b0f1a;
  --surface-2:  #101525;
  --surface-3:  #161d2e;
  --border:     #1e2a40;
  --border-2:   #263554;
  --blue:       #4f8eff;
  --blue-dim:   #2d5ccc;
  --blue-glow:  rgba(79,142,255,0.18);
  --green:      #00d97e;
  --green-glow: rgba(0,217,126,0.15);
  --red:        #ff4f6a;
  --red-glow:   rgba(255,79,106,0.15);
  --amber:      #ffb020;
  --purple:     #a855f7;
  --text:       #c8d8f0;
  --text-2:     #7a95b8;
  --text-3:     #3d5570;
  --font:       'Plus Jakarta Sans', sans-serif;
  --mono:       'Space Mono', monospace;
  --r:          10px;
  --r-lg:       16px;
  --r-xl:       22px;
  color-scheme: dark; /* native browser controls (date picker, scrollbar, select) use dark style */
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Background ── */
.app-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.bg-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
}
.orb1 { width: 500px; height: 500px; background: rgba(79,142,255,0.06); top: -10%; left: -5%; }
.orb2 { width: 400px; height: 400px; background: rgba(0,217,126,0.05); bottom: 0; right: -5%; }
.orb3 { width: 300px; height: 300px; background: rgba(168,85,247,0.04); top: 40%; left: 50%; }
.grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(79,142,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(79,142,255,0.025) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ── Navbar ── */
/* ══════════════════════════════════════════════════════════
   NAVBAR — Desktop + Mobile Drawer
   ══════════════════════════════════════════════════════════ */
/* ── NAVBAR — unified desktop + mobile ─────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 400;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 20px; height: 58px; gap: 12px;
  background: rgba(6,8,16,0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nav-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: #fff; flex-shrink: 0;
}
.brand-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; overflow: hidden;
}
.brand-icon:has(img) { background: transparent; }
.brand-icon img { width: 32px; height: 32px; object-fit: contain; border-radius: 9px; }
.brand-name {
  font-size: .95rem; font-weight: 700;
  color: #fff; white-space: nowrap;
}
.nav-page-title {
  font-size: .82rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-page-title::before { content: '/'; margin-right: 8px; color: var(--border); }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}
.nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-2); text-decoration: none;
  padding: 6px 12px; border-radius: 8px;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
  background: none; border: none; cursor: pointer; font-family: var(--font);
}
.nav-btn:hover   { color: #fff; background: var(--surface-2); }
.nav-btn.active  { color: var(--blue); background: var(--blue-glow); }
.nav-admin-btn   { color: var(--amber) !important; }
.nav-danger      { color: var(--red) !important; }
.nav-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.nav-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1a5fa8);
  color: #fff; font-size: .75rem; font-weight: 800;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.nav-avatar:active { transform: scale(0.92); }
.nav-center { display: none; }
.nav-time   { display: none; }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dd-btn   { gap: 4px; }
.nav-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 8px; min-width: 220px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); z-index: 500;
  animation: ddFadeIn .15s ease;
}
@keyframes ddFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.nav-dd-menu.open { display: block; }
.dd-section { padding: 2px 0; }
.dd-label {
  font-size: .67rem; font-weight: 700; letter-spacing: .07em;
  color: var(--muted); text-transform: uppercase;
  padding: 4px 12px 6px; display: block;
}
.nav-dd-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px; color: var(--text-2);
  text-decoration: none; font-size: 0.84rem; font-weight: 500;
  transition: all 0.12s; white-space: nowrap;
}
.nav-dd-menu a:hover, .nav-dd-menu a.dd-active { color: #fff; background: var(--surface-3); }
.nav-dd-menu a.dd-active { color: var(--blue); }
.dd-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* Right actions */
.nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 4px; }
.nav-user-badge {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--green); background: var(--green-glow);
  border: 1px solid rgba(0,217,126,0.25);
  padding: 4px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.nav-user-emp { color: #60a5fa; background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.25); }
.nav-logout-btn { padding: 5px 10px !important; font-size: .78rem !important; }

/* Hamburger button */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.ham-bar {
  display: block; width: 100%; height: 2px;
  background: var(--text-2); border-radius: 2px;
  transition: all 0.25s;
}
.nav-hamburger.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer overlay ── */
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.nav-overlay.open { display: block; }

/* ── Mobile drawer panel ── */
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 500;
  width: min(300px, 88vw);
  background: var(--surface-1); border-left: 1px solid var(--border-2);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-inner { padding: 16px 12px 32px; display: flex; flex-direction: column; }

.nd-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.nd-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(79,142,255,.15); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.nd-name  { font-size: .9rem; font-weight: 700; color: #fff; }
.nd-role  { font-size: .72rem; color: var(--muted); margin-top: 1px; }

.nd-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding: 14px 12px 4px;
}
.nd-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text-2); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nd-link span { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nd-link:hover  { background: var(--surface-2); color: #fff; }
.nd-link.nd-active { background: var(--blue-glow); color: var(--blue); }
.nd-divider { height: 1px; background: var(--border); margin: 10px 12px; }
.nd-logout  { color: var(--red) !important; }
.nd-logout:hover { background: rgba(255,79,106,.1) !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* Tablet (≤900px) — hide some nav items */
@media (max-width: 900px) {
  .nav-time     { display: none; }
  .nav-center   { display: none; }
  .nav-user-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}

/* Mobile (≤700px) — bottom nav, minimal top bar */
@media (max-width: 700px) {
  .navbar        { padding: 0 14px; height: 52px; }
  .nav-links     { display: none !important; }
  .nav-page-title{ display: none !important; }
  .nav-desktop-only { display: none !important; }
  .nav-user-badge { display: none !important; }
  .nav-logout-btn { display: none !important; }
  .nav-hamburger  { display: flex; }
  .main           { padding: 16px 12px 80px; }

  /* ── Bottom Navigation Bar ── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(6,8,16,0.97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 400;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: var(--text-3);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .01em;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mob-nav-item.active { color: var(--blue); }
  .mob-nav-item svg { transition: transform .15s; }
  .mob-nav-item.active svg { transform: scale(1.1); }
  .mob-nav-item .mob-badge {
    position: absolute;
    top: 8px; right: calc(50% - 16px);
    background: var(--red);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* ── Mobile home page ── */
  .home-hero {
    padding: 0 0 24px;
    min-height: unset;
  }
  .hero-badge {
    font-size: .68rem;
    padding: 6px 14px;
    margin-bottom: 20px;
  }
  .hero-h1 {
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .hero-p {
    font-size: .9rem;
    margin-bottom: 24px;
  }
  .hero-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
  }
  .hero-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    text-decoration: none;
    background: var(--surface-1);
    border: 1px solid var(--border);
    transition: background .15s, border-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-card:active { transform: scale(0.98); }
  .hero-card.hero-card-accent {
    background: linear-gradient(135deg, rgba(14,134,212,.15), rgba(14,134,212,.05));
    border-color: rgba(14,134,212,.3);
  }
  .hc-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .hc-body { flex: 1; }
  .hc-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
  .hc-desc  { font-size: .82rem; color: var(--text-2); }
  .hc-arrow {
    color: var(--text-3);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-left: auto;
  }
  .hero-stats {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .hs-item { text-align: center; }
  .hs-item span { font-size: 1.4rem; font-weight: 800; color: var(--blue); display: block; }
  .hs-item label { font-size: .72rem; color: var(--text-3); margin-top: 2px; display: block; }
  .hs-sep { width: 1px; height: 36px; background: var(--border); }
}

/* Hide bottom nav on desktop */
@media (min-width: 701px) {
  .mobile-bottom-nav { display: none; }
}

/* Small mobile (≤400px) */
@media (max-width: 400px) {
  .brand-name   { display: none; }
}

/* ── Main ── */
.main {
  position: relative; z-index: 1;
  max-width: 1200px; width: 100%;
  margin: 0 auto; padding: 40px 24px 80px;
  flex: 1;
}

/* ════════════════ HOME ════════════════ */
.home-hero { text-align: center; padding: 20px 0; }
.hero-badge {
  display: inline-block;
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--blue); background: var(--blue-glow);
  border: 1px solid rgba(79,142,255,0.3);
  padding: 6px 18px; border-radius: 100px;
  margin-bottom: 28px; letter-spacing: 0.04em;
}
.hero-h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800; letter-spacing: -0.04em;
  color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.grad-text {
  background: linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-p {
  font-size: 1rem; color: var(--text-2); max-width: 520px;
  margin: 0 auto 48px; line-height: 1.7;
}
.hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 820px; margin: 0 auto 48px;
}
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px 24px;
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: left;
}
.hero-card:hover {
  border-color: var(--border-2); transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.hero-card-accent {
  border-color: rgba(79,142,255,0.3);
  background: linear-gradient(135deg, rgba(79,142,255,0.06), var(--surface));
}
.hc-icon { width:52px;height:52px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--blue);transition:background .2s,border-color .2s; }
.hero-card:hover .hc-icon { background:var(--blue-glow);border-color:rgba(79,142,255,.4); }
.hero-card-accent .hc-icon { background:var(--blue-glow);border-color:rgba(79,142,255,.3); }
.hc-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
.hc-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
.hc-arrow { font-size: 1.2rem; color: var(--blue); margin-top: 8px; }
.hero-stats {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 32px; gap: 32px;
}
.hs-item { text-align: center; }
.hs-item span { font-size: 2rem; font-weight: 800; color: #fff; display: block; }
.hs-item label { font-size: 0.75rem; color: var(--text-2); font-family: var(--mono); }
.hs-sep { width: 1px; height: 40px; background: var(--border); }

/* ════════════════ REGISTER / ATTENDANCE PAGE LAYOUT ════════════════ */
.page-layout {
  display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start;
}
.page-header { margin-bottom: 24px; }
.page-header h2 { font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.page-header p  { font-size: 0.85rem; color: var(--text-2); margin-top: 4px; }

/* ── Form Card ── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 0; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.03em; }
.form-group input, .form-group select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px; border-radius: 8px;
  font-family: var(--font); font-size: 0.88rem;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(--blue-dim); }
.form-group input::placeholder { color: var(--text-3); }
.req { color: var(--red); }

.face-status-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin: 16px 0;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-2);
}
.fss-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3); flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.fss-dot.captured { background: var(--green); box-shadow: 0 0 8px var(--green); }
.fss-dot.working  { background: var(--blue);  box-shadow: 0 0 8px var(--blue); animation: blink 1s infinite; }

.result-toast {
  margin-top: 16px; padding: 14px 18px;
  border-radius: 10px; font-size: 0.85rem;
  display: none;
}
.result-toast.success { display: block; background: var(--green-glow); border: 1px solid rgba(0,217,126,0.3); color: var(--green); }
.result-toast.error   { display: block; background: var(--red-glow);   border: 1px solid rgba(255,79,106,0.3); color: var(--red); }

/* ── Camera Panel ── */
.cam-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.cam-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cam-label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.status-pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 100px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-2);
}
.sp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  transition: background 0.3s, box-shadow 0.3s;
}
.sp-dot.ready   { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sp-dot.error   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.sp-dot.working { background: var(--blue);  box-shadow: 0 0 6px var(--blue); animation: blink 1s infinite; }

.cam-wrap {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: #000; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-2); margin-bottom: 14px;
}
#video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transform: scaleX(-1) !important;  /* mirror — selfie view */
}
#overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  /* No CSS flip here — drawFaceBox mirrors coordinates in JS to match #video scaleX(-1) */
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 10px var(--blue); opacity: 0; z-index: 4;
  pointer-events: none;
}
.scan-line.active { opacity: 1; animation: sweep 2s ease-in-out infinite; }
@keyframes sweep { 0%{top:8%} 50%{top:88%} 100%{top:8%} }
.cam-corners { position: absolute; inset: 12px; pointer-events: none; z-index: 3; }
.cc {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--blue); border-style: solid; opacity: 0.7;
}
.cc.tl { top:0;left:0;   border-width:2px 0 0 2px; }
.cc.tr { top:0;right:0;  border-width:2px 2px 0 0; }
.cc.bl { bottom:0;left:0;  border-width:0 0 2px 2px; }
.cc.br { bottom:0;right:0; border-width:0 2px 2px 0; }

.cam-loader {
  position: absolute; inset: 0; background: rgba(6,8,16,0.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; z-index: 10;
  transition: opacity 0.4s;
}
.cam-loader.hidden { opacity: 0; pointer-events: none; }
.cam-loader p { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cam-loader small { font-family: var(--mono); font-size: 0.72rem; color: var(--text-2); }

.loader-ring {
  width: 34px; height: 34px;
  border: 3px solid var(--border-2); border-top-color: var(--blue);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.loader-ring.small { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Buttons */
.btn-capture {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); border: 1.5px solid var(--blue);
  color: var(--blue); padding: 12px; border-radius: var(--r);
  font-family: var(--font); font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-capture:not(:disabled):hover {
  background: var(--blue-glow); box-shadow: 0 0 20px var(--blue-glow); transform: translateY(-1px);
}
.btn-capture:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff; border: none;
  padding: 13px 24px; border-radius: var(--r);
  font-family: var(--font); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}
.btn-primary:not(:disabled):hover {
  background: #6aa1ff; transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(79,142,255,0.35);
}
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1.5px solid var(--blue);
  color: var(--blue); padding: 10px 20px; border-radius: var(--r);
  font-family: var(--font); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-outline:hover { background: var(--blue-glow); transform: translateY(-1px); }

.btn-danger {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red-glow); border: 1.5px solid rgba(255,79,106,0.4);
  color: var(--red); padding: 10px 20px; border-radius: var(--r);
  font-family: var(--font); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.btn-danger:hover { background: rgba(255,79,106,0.25); transform: translateY(-1px); }

.w-full { width: 100%; margin-top: 4px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ════════════════ ATTENDANCE PAGE ════════════════ */
.att-page { max-width: 560px; margin: 0 auto; }
.att-header { text-align: center; margin-bottom: 28px; }
.att-header h2 { font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.att-header p  { font-size: 0.85rem; color: var(--text-2); margin-top: 6px; }
.att-cam-wrap { margin-bottom: 20px; }
.att-cam-panel { width: 100%; }

/* Matched Employee */
.matched-emp {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-top: 12px;
}
.me-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue-glow); border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; color: var(--blue);
  flex-shrink: 0;
}
.me-name   { font-size: 0.95rem; font-weight: 700; color: #fff; }
.me-detail { font-family: var(--mono); font-size: 0.72rem; color: var(--text-2); margin-top: 2px; }
.me-badge  { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; }

/* Location card */
.loc-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 20px;
}
.loc-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--green-glow); border: 1px solid rgba(0,217,126,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--green);
  flex-shrink: 0;
}
.loc-label { font-size: 0.72rem; color: var(--text-2); font-family: var(--mono); margin-bottom: 3px; }
.loc-text  { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.loc-status { margin-left: auto; flex-shrink: 0; }

/* Attendance action buttons */
.att-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }

.btn-checkin {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green); color: #060810; border: none;
  padding: 16px; border-radius: var(--r-lg);
  font-family: var(--font); font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
}
.btn-checkin:not(:disabled):hover {
  transform: translateY(-2px); box-shadow: 0 8px 28px var(--green-glow);
}
.btn-checkin:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-checkout {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); color: var(--red);
  border: 1.5px solid rgba(255,79,106,0.4); padding: 16px; border-radius: var(--r-lg);
  font-family: var(--font); font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-checkout:not(:disabled):hover {
  background: var(--red-glow); transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--red-glow);
}
.btn-checkout:disabled { opacity: 0.35; cursor: not-allowed; }

/* Attendance result */
.att-result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  animation: fadeIn 0.4s ease;
}
.att-result.success { border-color: rgba(0,217,126,0.4); box-shadow: 0 0 24px var(--green-glow); }
.att-result.error   { border-color: rgba(255,79,106,0.4); box-shadow: 0 0 24px var(--red-glow); }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ar-icon { font-size: 2rem; flex-shrink: 0; }
.ar-msg  { font-size: 1rem; font-weight: 700; color: #fff; }
.ar-sub  { font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); margin-top: 3px; }

/* ════════════════ ADMIN LOGIN ════════════════ */
.admin-login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 140px);
}
.admin-login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 40px 36px; width: 100%; max-width: 420px;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.alc-icon {
  width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 20px;
  background: var(--blue-glow); border: 1px solid rgba(79,142,255,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.admin-login-card h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.admin-login-card p  { font-size: 0.82rem; color: var(--text-2); margin-bottom: 28px; }
.admin-form { text-align: left; }
.admin-form .form-group { margin-bottom: 16px; }
.form-hint { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); margin-bottom: 16px; text-align: center; }
.form-error { font-family: var(--mono); font-size: 0.78rem; color: var(--red); margin-top: 10px; min-height: 20px; text-align: center; }
.form-error-box {
  background: var(--red-glow); border: 1px solid rgba(255,79,106,0.3);
  border-radius: 8px; padding: 10px 14px; font-family: var(--mono);
  font-size: 0.78rem; color: var(--red); margin-bottom: 16px;
}

/* ════════════════ ADMIN DASHBOARD ════════════════ */
.admin-dash { display: flex; flex-direction: column; gap: 24px; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.sc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-icon.blue  { background: linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff; box-shadow:0 4px 14px rgba(59,130,246,.45); }
.sc-icon.green { background: linear-gradient(135deg,#059669,#10b981); color:#fff; box-shadow:0 4px 14px rgba(16,185,129,.45); }
.sc-icon.red   { background: linear-gradient(135deg,#dc2626,#ef4444); color:#fff; box-shadow:0 4px 14px rgba(239,68,68,.45); }
.sc-icon.amber { background: linear-gradient(135deg,#d97706,#f59e0b); color:#fff; box-shadow:0 4px 14px rgba(245,158,11,.45); }
.sc-val   { font-size: 2rem; font-weight: 800; color: #fff; }
.sc-label { font-family: var(--mono); font-size: 0.72rem; color: var(--text-2); }

.dash-mid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }

.chart-card, .quick-actions-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
}
.cc-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  margin-bottom: 20px;
}
.cc-date { font-family: var(--mono); font-size: 0.72rem; color: var(--text-2); }

/* Bar Chart */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 100px; }
.bar-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.bar-fill {
  width: 100%; background: var(--blue-glow);
  border: 1px solid rgba(79,142,255,0.3);
  border-radius: 6px 6px 0 0; min-height: 4px;
  transition: height 0.6s ease;
}
.bar-label { font-family: var(--mono); font-size: 0.65rem; color: var(--text-3); }
.bar-val   { font-family: var(--mono); font-size: 0.65rem; color: var(--blue); }

/* Quick actions */
.qa-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  padding: 11px 14px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600; margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.qa-btn:hover { border-color: var(--border-2); background: var(--surface-3); transform: translateX(3px); }
.qa-btn .qa-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qa-icon.qi-blue   { background: linear-gradient(135deg,#1d4ed8,#3b82f6); box-shadow:0 3px 10px rgba(59,130,246,.4); }
.qa-icon.qi-green  { background: linear-gradient(135deg,#059669,#10b981); box-shadow:0 3px 10px rgba(16,185,129,.4); }
.qa-icon.qi-amber  { background: linear-gradient(135deg,#d97706,#f59e0b); box-shadow:0 3px 10px rgba(245,158,11,.4); }
.qa-icon.qi-teal   { background: linear-gradient(135deg,#0891b2,#06b6d4); box-shadow:0 3px 10px rgba(6,182,212,.4); }
.qa-icon.qi-purple { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 3px 10px rgba(168,85,247,.4); }
.qa-icon.qi-rose   { background: linear-gradient(135deg,#be185d,#ec4899); box-shadow:0 3px 10px rgba(236,72,153,.4); }
.qa-btn .qa-icon svg { color: #fff; }

/* Employee Table */
.emp-table-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.etc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.etc-header h3 { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.search-input {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: 8px;
  font-family: var(--font); font-size: 0.82rem; outline: none; width: 220px;
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: var(--blue-dim); }

.table-wrap { overflow-x: auto; }
.emp-table { width: 100%; border-collapse: collapse; }
.emp-table th {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.emp-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.85rem; vertical-align: middle;
}
.emp-table tr:last-child td { border-bottom: none; }
.emp-table tr:hover td { background: var(--surface-2); }
.tbl-loading { text-align: center; color: var(--text-2); padding: 32px !important; font-family: var(--mono); font-size: 0.82rem; }

/* Employee cell */
.emp-cell { display: flex; align-items: center; gap: 12px; }
.emp-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-glow); border: 1px solid rgba(79,142,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: var(--blue); flex-shrink: 0;
}
.emp-name   { font-size: 0.88rem; font-weight: 700; color: #fff; }
.emp-empid  { font-family: var(--mono); font-size: 0.7rem; color: var(--text-2); }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.7rem; padding: 4px 10px;
  border-radius: 100px; font-weight: 500; white-space: nowrap;
}
.badge-present { background: var(--green-glow); color: var(--green); border: 1px solid rgba(0,217,126,0.3); }
.badge-absent  { background: var(--red-glow);   color: var(--red);   border: 1px solid rgba(255,79,106,0.3); }
.badge-partial { background: rgba(255,176,32,0.12); color: var(--amber); border: 1px solid rgba(255,176,32,0.3); }

/* Action btns in table */
.tbl-actions { display: flex; gap: 6px; }
.tbl-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; border: none; font-family: var(--font); transition: opacity 0.2s;
}
.tbl-btn-view   { background: var(--blue-glow); color: var(--blue); }
.tbl-btn-delete { background: var(--red-glow);  color: var(--red);  }
.tbl-btn:hover { opacity: 0.75; }

/* ════════════════ EMPLOYEE DETAIL ════════════════ */
.emp-detail { max-width: 900px; margin: 0 auto; }
.ed-loading { text-align: center; padding: 60px 0; }
.ed-loading p { font-size: 0.9rem; color: var(--text-2); margin-top: 12px; }

.ed-profile-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 24px;
}
.ed-avatar-big {
  width: 72px; height: 72px; border-radius: 20px; flex-shrink: 0;
  background: var(--blue-glow); border: 2px solid rgba(79,142,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: var(--blue);
}
.ed-name  { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.ed-meta  { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); margin-top: 4px; }
.ed-tags  { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ed-tag {
  font-family: var(--mono); font-size: 0.7rem;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 6px; color: var(--text-2);
}
.ed-actions { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-2);
  text-decoration: none; margin-bottom: 20px;
  transition: color 0.2s;
}
.back-btn:hover { color: var(--text); }

/* Log table */
.log-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.log-card-header {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 700; color: var(--text);
}
.log-table { width: 100%; border-collapse: collapse; }
.log-table th {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-2);
  text-transform: uppercase; padding: 10px 16px;
  border-bottom: 1px solid var(--border); text-align: left;
}
.log-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text);
}
.log-table tr:last-child td { border-bottom: none; }
.log-table tr:hover td { background: var(--surface-2); }
.loc-link { color: var(--blue); text-decoration: none; font-family: var(--mono); font-size: 0.72rem; }
.loc-link:hover { text-decoration: underline; }
.no-logs { text-align: center; padding: 32px; color: var(--text-2); font-family: var(--mono); font-size: 0.82rem; }

/* ════════════════ MODAL ════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  z-index: 1000; display: flex;
  align-items: center; justify-content: center;
  padding: 16px;
  overflow: hidden;
}
/* Delete / confirm dialog box */
.modal-box-confirm {
  background: var(--surface); border: 1px solid var(--red);
  border-radius: var(--r-xl); padding: 36px 32px; max-width: 380px; width: 90%;
  text-align: center; box-shadow: 0 0 60px var(--red-glow);
  animation: popIn 0.2s ease; flex-shrink: 0;
}
@keyframes popIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal-icon { font-size: 2.5rem; margin-bottom: 14px; }
.modal-box-confirm h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.modal-box-confirm p  { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); margin-bottom: 24px; line-height: 1.6; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }

/* ════════════════ TOAST ════════════════ */
.global-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 3000;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 14px 20px;
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transform: translateY(100px); opacity: 0; pointer-events: none;
  transition: transform 0.3s, opacity 0.3s;
  max-width: 340px;
}
.global-toast.show { transform: translateY(0); opacity: 1; }
.global-toast.success { border-left-color: var(--green); color: var(--green); }
.global-toast.error   { border-left-color: var(--red); color: var(--red); }

/* ════════════════ RESPONSIVE — COMPREHENSIVE MOBILE ════════════════ */

/* ── Tablet (≤900px) ── */
@media(max-width: 900px) {
  .page-layout    { grid-template-columns: 1fr; }
  .stats-row      { grid-template-columns: repeat(2, 1fr); }
  .dash-mid       { grid-template-columns: 1fr; }
  .hero-cards     { grid-template-columns: repeat(2,1fr); }
  .emp-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .form-row       { grid-template-columns: 1fr 1fr; }
/* tablet modal width handled in HRMS modal block */
}

/* ── Mobile (≤640px) ── */
@media(max-width: 640px) {
  .main           { padding: 16px 12px 80px; }
  .page-header h2 { font-size: 1.4rem; }

  /* Home hero */
  .hero-cards     { grid-template-columns: 1fr; max-width: 100%; }
  .hero-stats     { flex-direction: column; gap: 14px; padding: 18px; }
  .hs-sep         { width: 40px; height: 1px; }
  .hero-h1        { font-size: 2.2rem; }
  .hero-p         { font-size: .92rem; }

  /* Forms */
  .form-row       { grid-template-columns: 1fr; gap: 12px; }
  .form-card      { padding: 18px 14px; }

  /* Attendance page */
  .att-actions    { grid-template-columns: 1fr; }
  .loc-card       { padding: 14px; }
  .site-status    { font-size: .82rem; padding: 10px 14px; }

  /* Stats */
  .stats-row      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card      { padding: 14px; }
  .sc-val         { font-size: 1.8rem; }

  /* Employee grid */
  .emp-grid       { grid-template-columns: 1fr !important; }
  .emp-card       { padding: 14px; }
  .emp-card-top   { gap: 10px; }
  .emp-avatar-lg  { width: 44px; height: 44px; font-size: .95rem; min-width: 44px; }

  /* Tables: horizontal scroll */
  .tbl-wrap       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table           { min-width: 560px; }
  th, td          { padding: 8px 10px; font-size: .78rem; }

  /* Worksite map */
  #sitePickerMap  { height: 220px; }
  .dash-widgets   { grid-template-columns: 1fr; }
  .dw-header      { font-size: .85rem; }

  /* Reports */
  .report-cards   { grid-template-columns: 1fr 1fr; }

  /* Employee detail */
  .ed-header      { flex-direction: column; gap: 12px; }

  /* Payroll / Payslip */
  .payslip-header { flex-direction: column; gap: 12px; }
  .ps-totals      { grid-template-columns: 1fr; }

  /* Allowances */
  .allowance-row  { flex-wrap: wrap; }
  .al-label       { width: 100%; }
  .al-amount, .al-freq { flex: 1; min-width: 80px; }

  /* Worksite map */
  #sitePickerMap  { height: 220px; }

  /* Admin worksites */
  .site-report-card { flex-direction: column; }

  /* Face camera in modal */
  #sitePickerMap, #aeVideo, #aeOverlay { max-width: 100%; }
}

/* ── Small mobile (≤400px) ── */
@media(max-width: 400px) {
  .stats-row      { grid-template-columns: 1fr; }
  .report-cards   { grid-template-columns: 1fr; }
  .hero-cards     { grid-template-columns: 1fr; }
}

/* ── Hamburger / Drawer — handled in main navbar section above ── */



/* ══════════════════════════════════════════════════════════
   HRMS ENHANCED — New Styles
   ══════════════════════════════════════════════════════════ */

/* Page Chrome */
.hrms-page { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }
.hrms-header { margin-bottom: 28px; }
.hrms-header h2 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.hrms-header p { color: var(--text-2); font-size: 0.9rem; }
.hrms-header-bar {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;
}
.hrms-header-bar h2 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.hrms-header-bar p { color: var(--text-2); font-size: 0.9rem; }

/* Filter Bar */
.filter-bar {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.filter-select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 9px 14px;
  font-family: var(--font); font-size: 0.85rem; cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--blue); }

/* Tabs */
.header-tabs { display: flex; gap: 6px; }
.tab-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 8px; padding: 8px 16px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.tab-btn:hover { color: #fff; border-color: var(--border-2); }
.tab-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* HRMS Cards Grid */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.hrms-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; transition: border-color 0.2s;
}
.hrms-card:hover { border-color: var(--border-2); }
.hrms-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.hrms-card-title { font-size: 0.95rem; font-weight: 600; color: #fff; }
.hrms-card-meta { font-size: 0.8rem; color: var(--text-2); }

/* Status Badges */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-pending { background: rgba(255,176,32,0.15); color: var(--amber); }
.badge-approved { background: rgba(0,217,126,0.12); color: var(--green); }
.badge-rejected { background: rgba(255,79,106,0.12); color: var(--red); }
.badge-active { background: rgba(0,217,126,0.12); color: var(--green); }
.badge-inactive { background: rgba(255,79,106,0.1); color: var(--red); }
.badge-generated { background: rgba(79,142,255,0.15); color: var(--blue); }
.badge-draft { background: rgba(122,149,184,0.12); color: var(--text-2); }
.badge-shortlisted { background: rgba(168,85,247,0.15); color: var(--purple); }
.badge-accepted { background: rgba(0,217,126,0.12); color: var(--green); }
.badge-open { background: rgba(0,217,126,0.12); color: var(--green); }
.badge-public { background: rgba(79,142,255,0.12); color: var(--blue); }

/* Data Tables */
.data-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.data-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.data-table th {
  padding: 12px 16px; text-align: left; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-2); }
.data-table tr:hover td.sticky-col { background: var(--surface); }
.data-table .actions { display: flex; gap: 6px; }

/* Btn Variants */
.btn-sm {
  padding: 6px 14px; border-radius: 7px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; border: none; font-family: var(--font); transition: all 0.2s;
}
.btn-approve { background: rgba(0,217,126,0.15); color: var(--green); }
.btn-approve:hover { background: var(--green); color: #000; }
.btn-reject { background: rgba(255,79,106,0.12); color: var(--red); }
.btn-reject:hover { background: var(--red); color: #fff; }
.btn-view { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-view:hover { color: #fff; border-color: var(--border-2); }
.btn-download { background: rgba(79,142,255,0.12); color: var(--blue); }
.btn-download:hover { background: var(--blue); color: #fff; }
.btn-outline {
  background: transparent; border: 1px solid var(--border-2); color: var(--text-2);
  padding: 9px 18px; border-radius: var(--r); font-family: var(--font); font-size: 0.85rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-outline:hover { color: #fff; border-color: #fff; }

/* Modal enhanced */
/* HRMS global modal box */
.modal-box {
  position: relative;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  max-width: 580px; width: calc(100vw - 32px);
  /* max-height alone is NOT a definite height for flex children.
     Use min() so short-content modals are compact, long ones scroll. */
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.65);
  animation: popIn 0.2s ease;
  overflow: hidden; /* clips children to rounded corners */
}
.modal-box.modal-lg { max-width: 800px; }

/* Sticky modal header */
.modal-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }

/* Scrollable middle — uses direct max-height because flex:1 only works
   when the parent has a definite height (max-height alone is not enough) */
.modal-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px 24px;
  /* Fallback: cap at viewport minus header (~68px) + footer (~60px) + overlay padding (32px) */
  max-height: calc(100vh - 32px - 68px - 60px);
}
.modal-inner::-webkit-scrollbar { width: 4px; }
.modal-inner::-webkit-scrollbar-track { background: transparent; }
.modal-inner::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* Sticky modal footer */
.modal-footer {
  flex-shrink: 0;
  padding: 14px 24px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.modal-close {
  flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.modal-close:hover { color: #fff; background: var(--surface-3); border-color: var(--border-2); }

/* Forms in modals */
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-form .form-group { display: flex; flex-direction: column; gap: 5px; }
.modal-form label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.modal-form input, .modal-form select, .modal-form textarea {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 9px 12px;
  font-family: var(--font); font-size: 0.875rem; transition: border-color 0.15s;
  width: 100%; box-sizing: border-box;
}
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,142,255,0.12);
}
.modal-form textarea { resize: vertical; min-height: 80px; }
.modal-form .form-hint { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.modal-actions-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Mobile: bottom sheet */
@media(max-width: 640px) {
  .modal-overlay    { padding: 0; align-items: flex-end; }
  .modal-box        { width: 100%; max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 94vh; }
  .modal-header     { padding: 16px 18px 14px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-inner      { padding: 16px 18px; max-height: calc(94vh - 68px - 60px); }
  .modal-footer     { padding: 12px 18px 24px; border-radius: 0; }
  .modal-form .form-row { grid-template-columns: 1fr; }
  .modal-actions-row { flex-direction: column; }
  .modal-actions-row button, .modal-actions-row a { width: 100%; text-align: center; }
}

/* Employee Portal Dashboard */
.emp-dash { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }
.emp-dash-greeting { margin-bottom: 28px; }
.emp-dash-greeting h2 { font-size: 1.6rem; font-weight: 800; color: #fff; }
.emp-dash-greeting p { color: var(--text-2); font-size: 0.95rem; margin-top: 4px; }
.emp-dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.emp-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; text-align: center;
  transition: border-color .2s, transform .15s;
}
.emp-stat-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.emp-stat-val { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.emp-stat-label { font-size: 0.8rem; color: var(--text-2); font-weight: 500; }
.emp-dash-main { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
.emp-dash-col { display: flex; flex-direction: column; gap: 20px; }
.emp-widget {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
  transition: border-color .2s;
}
.emp-widget:hover { border-color: var(--border-2); }
.emp-widget-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.emp-widget-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.emp-widget-link { font-size: 0.8rem; color: var(--blue); text-decoration: none; }
.emp-widget-link:hover { text-decoration: underline; }

/* Attendance row items */
.att-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.att-item:last-child { border-bottom: none; }
.att-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.att-dot.present { background: var(--green); }
.att-dot.absent { background: var(--red); }
.att-item-date { font-size: 0.83rem; color: var(--text-2); min-width: 90px; padding-top: 1px; }
.att-item-times { font-size: 0.83rem; color: var(--text); }
.att-item-loc { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.att-item-hours { font-size: 0.83rem; color: var(--text-2); font-family: var(--mono); flex-shrink: 0; }
.loc-text { font-size: 0.75rem; color: var(--text-3); }

/* Notice items */
.notice-item {
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.notice-item:last-child { border-bottom: none; }
.notice-item-title { font-size: 0.88rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.notice-item-meta { font-size: 0.78rem; color: var(--text-2); }
.notice-priority-high { border-left: 3px solid var(--red); padding-left: 12px; }
.notice-priority-normal { border-left: 3px solid var(--blue); padding-left: 12px; }
.notice-priority-low { border-left: 3px solid var(--text-3); padding-left: 12px; }

/* Holiday items */
.holiday-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.holiday-item:last-child { border-bottom: none; }
.holiday-date-badge {
  min-width: 50px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 10px;
}
.holiday-date-badge .day { font-size: 1.2rem; font-weight: 800; color: var(--blue); line-height: 1; }
.holiday-date-badge .mon { font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.holiday-name { font-size: 0.88rem; font-weight: 600; color: #fff; }

/* Leave balance pills */
.leave-balance-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lb-pill {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 18px; font-size: 0.82rem;
  display: flex; gap: 8px; align-items: center;
}
.lb-val { font-weight: 700; color: var(--blue); font-size: 1.1rem; }
.lb-label { color: var(--text-2); }

/* Reports Page */
.reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.report-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.report-card:hover { border-color: var(--blue); background: var(--surface-2); transform: translateY(-2px); }
.report-card.active { border-color: var(--blue); background: rgba(79,142,255,0.08); }
.report-card-icon { font-size: 2.2rem; margin-bottom: 10px; }
.report-card-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.report-card-desc { font-size: 0.8rem; color: var(--text-2); margin-top: 4px; }

.report-filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 20px;
}
.report-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.report-filter-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }

.export-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.btn-export {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 8px; padding: 8px 16px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.btn-export:hover { color: #fff; border-color: var(--border-2); }
.btn-export.csv:hover { color: var(--green); border-color: var(--green); }
.btn-export.xlsx:hover { color: var(--amber); border-color: var(--amber); }
.btn-export.pdf:hover { color: var(--red); border-color: var(--red); }

/* Payslip */
.payslip-modal {
  background: #fff; color: #111; padding: 20px; border-radius: 8px;
  width: 100%;
}
.payslip-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #e5e7eb; }
.payslip-company-name { font-size: 1.2rem; font-weight: 800; color: #1a1a2e; }
.payslip-company-addr { font-size: 0.78rem; color: #666; margin-top: 2px; }
.payslip-title { text-align: right; }
.payslip-title h3 { font-size: 1rem; font-weight: 700; color: #1a1a2e; }
.payslip-title p { font-size: 0.8rem; color: #666; }
.payslip-emp-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; padding: 16px; background: #f8fafc; border-radius: 8px; }
.pei-item label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #999; }
.pei-item span { display: block; font-size: 0.88rem; font-weight: 600; color: #1a1a2e; margin-top: 2px; }
.payslip-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.85rem; }
.payslip-table th { padding: 8px 12px; background: #f1f5f9; text-align: left; font-weight: 700; color: #555; font-size: 0.78rem; text-transform: uppercase; }
.payslip-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; }
.payslip-table tr.total-row td { font-weight: 700; background: #f8fafc; border-top: 2px solid #e5e7eb; }
.payslip-net { background: #1a1a2e; color: #fff; padding: 16px 20px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.payslip-net .label { font-size: 0.9rem; font-weight: 600; }
.payslip-net .amount { font-size: 1.5rem; font-weight: 800; }
.payslip-footer { text-align: center; font-size: 0.75rem; color: #999; margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 12px; }

/* Admin Dashboard additions */
.dash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dash-topbar h2 { font-size: 1.5rem; font-weight: 700; color: #fff; }
.dash-date { font-family: var(--mono); font-size: 0.85rem; color: var(--text-2); }
.dash-bottom-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; }
.dash-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.dw-header { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.dw-content { min-height: 80px; }
.dw-loading { color: var(--text-2); font-size: 0.85rem; }
.dw-empty { color: var(--text-3); font-size: 0.85rem; padding: 8px 0; }
.dw-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.dw-item:last-child { border-bottom: none; }
.dw-item-name { color: #fff; font-weight: 600; }
.dw-item-meta { color: var(--text-2); font-size: 0.78rem; margin-top: 2px; }

/* Settings */
.settings-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px;
  transition: border-color .2s;
  position: relative; overflow: hidden;
}
.settings-card:hover { border-color: var(--border-2); }
.settings-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.settings-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.settings-card-icon svg { flex-shrink: 0; }
.sci-blue   { background: linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff; box-shadow:0 3px 10px rgba(59,130,246,.4); }
.sci-green  { background: linear-gradient(135deg,#059669,#10b981); color:#fff; box-shadow:0 3px 10px rgba(16,185,129,.4); }
.sci-amber  { background: linear-gradient(135deg,#d97706,#f59e0b); color:#fff; box-shadow:0 3px 10px rgba(245,158,11,.4); }
.sci-purple { background: linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; box-shadow:0 3px 10px rgba(168,85,247,.4); }
.sci-teal   { background: linear-gradient(135deg,#0891b2,#06b6d4); color:#fff; box-shadow:0 3px 10px rgba(6,182,212,.4); }
.sci-rose   { background: linear-gradient(135deg,#be185d,#ec4899); color:#fff; box-shadow:0 3px 10px rgba(236,72,153,.4); }
.sci-red    { background: linear-gradient(135deg,#dc2626,#ef4444); color:#fff; box-shadow:0 3px 10px rgba(239,68,68,.4); }
.sci-indigo { background: linear-gradient(135deg,#4338ca,#6366f1); color:#fff; box-shadow:0 3px 10px rgba(99,102,241,.4); }
.sci-orange { background: linear-gradient(135deg,#ea580c,#f97316); color:#fff; box-shadow:0 3px 10px rgba(249,115,22,.4); }
.settings-card h3 { font-size: .95rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.settings-card-sub { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
/* Working day pills */
.wd-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; font-size: .83rem; font-weight: 600;
  color: var(--text-2); transition: all .15s;
}
.wd-pill.active { border-color: var(--blue); color: var(--blue); background: var(--blue-glow); }
.wd-pill input { display: none; }
.settings-form { display: flex; flex-direction: column; gap: 14px; }
.settings-form .form-group { display: flex; flex-direction: column; gap: 5px; }
.settings-form label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.settings-form input, .settings-form select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 10px 14px;
  font-family: var(--font); font-size: 0.87rem;
}
.settings-form input:focus, .settings-form select:focus { outline: none; border-color: var(--blue); }

/* Employees grid */
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.emp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; transition: all 0.2s;
}
.emp-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.emp-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.emp-avatar-lg {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blue-glow);
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--blue); flex-shrink: 0;
}
.emp-card-name { font-size: 0.95rem; font-weight: 700; color: #fff; }
.emp-card-id { font-size: 0.78rem; color: var(--text-2); font-family: var(--mono); margin-top: 2px; }
.emp-card-dept { font-size: 0.82rem; color: var(--text-2); }
.emp-card-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

/* sc-icon colors */
.sc-icon.purple { background: linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; box-shadow:0 4px 14px rgba(168,85,247,.45); }
.sc-icon.teal   { background: linear-gradient(135deg,#0891b2,#06b6d4); color:#fff; box-shadow:0 4px 14px rgba(6,182,212,.45); }
.sc-icon.teal { background: rgba(0,217,205,0.12); color: #00d9cd; }

/* Leave apply form */
.leave-apply-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; margin-bottom: 24px;
}
.leave-history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* Expense submit */
.expense-submit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; margin-bottom: 24px;
}

/* Summary totals */
.summary-total {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
}
.summary-total-label { font-size: 0.9rem; color: var(--text-2); font-weight: 600; }
.summary-total-val { font-size: 1.1rem; font-weight: 800; color: var(--green); }

/* @print */
@media print {
  .navbar, .app-bg, .modal-close, .btn-download, .export-bar, .btn-primary, .filter-bar { display: none !important; }
  body { background: #fff; color: #111; }
  .payslip-modal { box-shadow: none; max-width: 100%; }
}

/* Responsive */
@media (max-width: 900px) {
  .emp-dash-grid { grid-template-columns: 1fr 1fr; }
  .emp-dash-main { grid-template-columns: 1fr; }
  .dash-bottom-row { grid-template-columns: 1fr; }
  .reports-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hrms-page { padding: 16px; }
  .emp-dash-grid { grid-template-columns: 1fr 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .hrms-header-bar { flex-direction: column; gap: 12px; }
}

/* ── RBAC — Roles & Permissions ─────────────────────────── */
.rbac-legend {
  display: flex; gap: 20px; margin-bottom: 20px;
  padding: 10px 16px; background: var(--surface); border-radius: 10px;
  border: 1px solid var(--border); width: fit-content;
}
.rbac-legend-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); }
.perm-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.perm-granted { background: var(--green); box-shadow: 0 0 6px rgba(0,217,126,.5); }
.perm-denied  { background: var(--surface-2); border: 1px solid var(--border-2); }
.perm-system  { background: var(--blue); box-shadow: 0 0 6px rgba(99,102,241,.5); }

/* Role cards */
.roles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px; margin-bottom: 28px;
}
.role-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px; transition: border-color .2s;
}
.role-card:hover { border-color: var(--blue); }
.role-card.system-role { border-color: rgba(99,102,241,.3); }
.role-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.role-card-name { font-size: 1.05rem; font-weight: 700; color: #fff; }
.role-card-slug {
  font-size: .75rem; color: var(--text-3); font-family: var(--mono);
  background: var(--surface-2); padding: 3px 8px; border-radius: 6px; margin-top: 3px;
}
.role-card-meta {
  font-size: .8rem; color: var(--text-2); margin-bottom: 14px;
}
.role-card-meta span { color: var(--blue); font-weight: 600; }

/* Permission chips in role card */
.perm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; min-height: 26px; }
.perm-chip {
  font-size: .72rem; padding: 3px 10px; border-radius: 100px; font-weight: 600;
  background: rgba(99,102,241,.15); color: var(--blue); border: 1px solid rgba(99,102,241,.3);
}
.perm-chip.more {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}

/* Role card actions */
.role-card-actions { display: flex; gap: 8px; }

/* Permission matrix */
.perm-matrix-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.perm-matrix-header h3 { color: #fff; font-size: 1.1rem; font-weight: 700; }
.perm-matrix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.perm-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: all .2s; user-select: none;
}
.perm-item:hover { border-color: var(--blue); background: var(--surface-2); }
.perm-item.active { border-color: var(--green); background: rgba(0,217,126,.08); }
.perm-item.active .perm-item-icon { background: rgba(0,217,126,.2); color: var(--green); }
.perm-toggle {
  width: 42px; height: 24px; border-radius: 100px; background: var(--surface-2);
  border: 1px solid var(--border-2); position: relative; transition: background .2s; flex-shrink: 0;
}
.perm-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-3);
  transition: transform .2s, background .2s;
}
.perm-item.active .perm-toggle { background: rgba(0,217,126,.25); border-color: var(--green); }
.perm-item.active .perm-toggle::after { transform: translateX(18px); background: var(--green); }
.perm-item-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: background .2s; flex-shrink: 0;
}
.perm-item-info { flex: 1; }
.perm-item-name { font-size: .88rem; font-weight: 600; color: #fff; }
.perm-item-key  { font-size: .72rem; font-family: var(--mono); color: var(--text-3); margin-top: 1px; }

/* dd divider */
.dd-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Super admin badge on role card */
.super-admin-note {
  font-size: .78rem; color: var(--amber);
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5;
}

/* ── RBAC — Permission Overview Matrix Table ─────────────── */
.perm-overview-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
}
.perm-overview-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.perm-overview-table thead tr {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.perm-overview-table th {
  padding: 12px 14px; text-align: left; font-size: .78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2);
}
.perm-overview-table td {
  padding: 0; border-bottom: 1px solid var(--border);
}
.perm-overview-table tr:last-child td { border-bottom: none; }
.perm-overview-table tr:hover td { background: rgba(255,255,255,.02); }
.perm-group-row td { border-bottom: none !important; }

.perm-matrix-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: .78rem; font-weight: 700;
}
.perm-matrix-dot.granted {
  background: rgba(0,217,126,.15); color: var(--green);
  border: 1px solid rgba(0,217,126,.4);
}
.perm-matrix-dot.denied {
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--border);
}

/* Role permission summary bar */
.role-perm-summary {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 12px;
}
.rps-count { font-size: 1.4rem; font-weight: 800; color: var(--blue); line-height: 1; }
.rps-of { font-size: .8rem; color: var(--text-2); }
.rps-bar {
  flex: 1; height: 6px; background: var(--surface-2);
  border-radius: 100px; overflow: hidden; margin-left: 4px;
}
.rps-fill {
  height: 100%; border-radius: 100px; background: var(--blue);
  transition: width .4s ease;
}

/* Per-group coverage bars */
.role-group-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.role-group-bar  { display: flex; align-items: center; gap: 8px; }
.rgb-label       { font-size: .72rem; color: var(--text-3); width: 90px; flex-shrink: 0; }
.rgb-track       { flex: 1; height: 5px; background: var(--surface-2); border-radius: 100px; overflow: hidden; }
.rgb-fill        { height: 100%; border-radius: 100px; transition: width .3s ease; }
.rgb-pct         { font-size: .7rem; font-family: var(--mono); color: var(--text-3); width: 30px; text-align: right; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   MULTI-SITE ATTENDANCE — WORKSITE MODULE STYLES
   ══════════════════════════════════════════════════════════════ */

/* ── Attendance page: Site geofence status banner ─────────── */
.site-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px; margin: 10px 0;
  font-size: .85rem; font-weight: 500;
  border: 1px solid transparent;
  animation: fadeIn .3s ease;
}
.site-status.site-in-range {
  background: rgba(0,217,126,.1); border-color: rgba(0,217,126,.3); color: var(--green);
}
.site-status.site-out-of-range {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #ef4444;
}
.ss-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; animation: blink 1.5s ease-in-out infinite;
}
.site-status.site-in-range   .ss-dot { animation: none; }
.site-status.site-out-of-range .ss-dot { animation: blink 1s ease-in-out infinite; }
.ss-dist { margin-left: auto; font-size: .78rem; opacity: .8; font-family: var(--mono); }

/* ── Worksite admin page ────────────────────────────────────── */
.site-stat-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; min-width: 90px; gap: 4px;
  transition: transform .2s, border-color .2s;
}
.site-stat-pill:hover { transform: translateY(-2px); border-color: var(--blue); }
.site-stat-pill.active  { border-color: rgba(0,217,126,.4); background: rgba(0,217,126,.07); }
.site-stat-pill.today   { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.07); }
.site-stat-pill.total   { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.07); }
.ssp-val  { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; }
.ssp-lbl  { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

/* ── Site coverage map ────────────────────────────────────── */
.site-map-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px;
}
.site-map-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.site-map-title { font-weight: 700; color: #fff; }
.site-map-sub   { font-size: .8rem; color: var(--text-3); margin-left: auto; }
.site-map-frame { padding: 12px; }

/* ── Site table actions ───────────────────────────────────── */
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Add/Edit site modal form hints ──────────────────────── */
.modal-form .form-hint a { color: var(--blue); text-decoration: underline; }

/* ── Site report summary cards (in modal) ────────────────── */
.site-report-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; min-width: 200px; flex: 1;
}
.src-name  { font-weight: 700; color: #fff; margin-bottom: 3px; }
.src-addr  { font-size: .75rem; color: var(--text-3); margin-bottom: 8px; }
.src-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--text-2); }
.src-stats span strong { color: #fff; }

/* ── Reports: Site attendance summary cards ───────────────── */
.site-report-card.in-report {
  background: var(--surface-2); border-color: var(--border-2);
}

/* ── Attendance report: on_time / late status badges ─────── */
/* Already handled by existing .badge system — extend here */
.badge-on_time { background: rgba(0,217,126,.15); color: var(--green); border: 1px solid rgba(0,217,126,.3); }
.badge-late    { background: rgba(245,158,11,.15); color: var(--amber); border: 1px solid rgba(245,158,11,.3); }

/* ── Empty state for worksites ────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px;
  background: var(--surface); border: 1px dashed var(--border-2);
  border-radius: 16px; color: var(--text-2);
}
.empty-state h3 { margin-bottom: 8px; }

/* ── Fade-in animation for site status banner ─────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }


/* ── Admin Add Employee — Face Capture Section ────────────── */
.face-capture-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin: 12px 0;
}
.fcs-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fcs-title  { font-weight: 700; color: #fff; font-size: .9rem; }
.fcs-status { font-size: .78rem; color: var(--text-3); }

/* ── Leaflet map inside modal — override z-index issues ───── */
.leaflet-container { font-family: var(--font) !important; }
.leaflet-control-attribution { font-size: .65rem !important; }
#sitePickerMap .leaflet-control-zoom { margin: 10px !important; }

/* ── Attendance report — location link ─────────────────────── */


/* ── Employment Type Pills ──────────────────────────────── */
.emp-type-pill {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; letter-spacing: .03em;
  vertical-align: middle; margin-left: 4px;
}
.et-permanent { background: rgba(79,142,255,.15); color: var(--blue); border: 1px solid rgba(79,142,255,.3); }
.et-contract  { background: rgba(255,176,32,.15);  color: var(--amber); border: 1px solid rgba(255,176,32,.3); }
.et-hourly    { background: rgba(168,85,247,.15); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }

/* ── Employee Photo Upload ──────────────────────────────── */
.emp-photo-upload {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.epu-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--blue-glow); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: var(--blue);
  flex-shrink: 0; overflow: hidden;
}
.epu-info { display: flex; flex-direction: column; gap: 6px; }

/* ── Allowances Builder ─────────────────────────────────── */
.allowances-section {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 12px 0; background: var(--surface);
}
.als-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.als-title { font-weight: 700; font-size: .85rem; color: #fff; }
.allowances-list { display: flex; flex-direction: column; gap: 8px; }
.al-empty { font-size: .78rem; color: var(--text-3); padding: 4px 0; }
.allowance-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.allowance-row .al-label  { flex: 2; min-width: 140px; }
.allowance-row .al-amount { flex: 1; min-width: 80px; }
.allowance-row .al-freq   { flex: 1; min-width: 100px; }
.allowance-row .al-label,
.allowance-row .al-amount,
.allowance-row .al-freq {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 10px; border-radius: 6px;
  font-size: .82rem; font-family: var(--font); outline: none;
}
.allowance-row .al-label:focus,
.allowance-row .al-amount:focus,
.allowance-row .al-freq:focus { border-color: var(--blue); }
.btn-icon-danger {
  background: var(--red-glow); border: 1px solid rgba(255,79,106,.3);
  color: var(--red); border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; font-size: .85rem; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.btn-icon-danger:hover { background: rgba(255,79,106,.25); }

/* ── Employee row in table ──────────────────────────────── */
.emp-row-info { display: flex; align-items: center; gap: 10px; }
.emp-row-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-glow); display: flex; align-items: center;
  justify-content: center; font-size: .85rem; font-weight: 700;
  color: var(--blue); flex-shrink: 0;
}

/* ── Tbl-wrap for horizontal scroll on mobile ───────────── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }

/* ── Mobile viewport meta fix ───────────────────────────── */
@media (max-width: 640px) {
  .emp-photo-upload { flex-wrap: wrap; }
  .epu-avatar { width: 60px; height: 60px; font-size: 1.1rem; }
  .emp-type-pill { margin-left: 0; }
  .allowance-row { flex-direction: column; align-items: stretch; }
  .allowance-row .al-label,
  .allowance-row .al-amount,
  .allowance-row .al-freq { width: 100%; }
}

/* ── Liveness Challenge UI ───────────────────────────────── */
/* ── High-Security Passive Liveness UI ── */
.liveness-challenge {
  background: linear-gradient(135deg, rgba(10,18,36,.98), rgba(15,26,50,.98));
  border: 1.5px solid rgba(79,142,255,.3);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  margin: .6rem 0;
  box-shadow: 0 0 24px rgba(79,142,255,.12), 0 2px 12px rgba(0,0,0,.4);
  animation: lcSlideIn .22s ease;
}
.liveness-challenge.passive {
  border-color: rgba(0,217,126,.3);
  box-shadow: 0 0 24px rgba(0,217,126,.1), 0 2px 12px rgba(0,0,0,.4);
}
@keyframes lcSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.lc-header {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap;
}
.lc-badge {
  background: rgba(0,217,126,.12); color: var(--green);
  border: 1px solid rgba(0,217,126,.28); border-radius: 20px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  padding: .2rem .65rem; text-transform: uppercase; white-space: nowrap;
}
.lc-hint { font-size: .72rem; color: var(--text-3); }

/* Progress bar */
.lc-progress-wrap {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
}
.lc-progress-bar {
  flex: 1; height: 5px; background: rgba(0,217,126,.7);
  border-radius: 4px; transition: width .18s ease; width: 0%;
  box-shadow: 0 0 8px rgba(0,217,126,.4);
}
.lc-progress-label {
  font-size: .7rem; color: var(--text-3); font-family: var(--mono);
  white-space: nowrap; min-width: 60px; text-align: right;
}

/* Check badges */
.lc-checks {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .55rem;
}
.lc-check {
  font-size: .68rem; padding: .18rem .5rem; border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--text-3);
  border: 1px solid rgba(255,255,255,.08); transition: all .2s ease;
  white-space: nowrap;
}
.lc-check.done {
  background: rgba(0,217,126,.12); color: var(--green);
  border-color: rgba(0,217,126,.3);
}

/* Status line */
.lc-status { font-size: .8rem; color: var(--text-3); min-height: 1.1em; margin-top: .1rem; }
.lc-status.pass { color: var(--green); font-weight: 600; }
.lc-status.fail { color: var(--red); }


/* ══════════════════════════════════════════════════════
   COMPREHENSIVE UI/UX POLISH
   ══════════════════════════════════════════════════════ */

/* ─ Global box-sizing ─ */
*, *::before, *::after { box-sizing: border-box; }

/* ─ Employee grid ─ */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media(max-width: 640px) {
  .emp-grid { grid-template-columns: 1fr; }
}

/* ─ Employee card actions wrap on small cards ─ */
.emp-card-actions {
  display: flex; gap: 6px; margin-top: 14px;
  flex-wrap: wrap; align-items: center;
}
.emp-card-actions .btn-sm { flex-shrink: 0; }

/* ─ Tables always scroll horizontally ─ */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap         { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table       { min-width: 480px; }

/* ─ Filter bar inputs stretch to fill ─ */
.filter-bar { flex-wrap: wrap; }
.filter-bar input, .filter-bar .filter-select {
  min-width: 0; flex: 1 1 160px;
}

/* ─ HRMS page padding ─ */
@media(max-width: 700px) {
  .hrms-page { padding: 16px 14px 80px; }
  .hrms-header-bar {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .hrms-header-bar .btn-primary { align-self: stretch; text-align: center; }
}

/* ─ Form rows collapse on narrow screens ─ */
@media(max-width: 500px) {
  .form-row { grid-template-columns: 1fr; }
  .modal-form .form-row { grid-template-columns: 1fr; }
}

/* ─ Page-level stat rows ─ */
@media(max-width: 640px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 380px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* ─ Cards grid ─ */
@media(max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr; }
}

/* ─ btn-primary shouldn't hide at print ─ */
@media not print {
  .btn-primary { white-space: nowrap; }
}

/* ─ Settings grid ─ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

/* ─ Toast above everything ─ */

/* ─ Attendance cam canvas overlay ─ */
.att-cam-wrap { position: relative; display: inline-block; width: 100%; }
.att-cam-wrap canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}

/* ─ Worksite map min height on small screens ─ */
#sitePickerMap { min-height: 220px; }
@media(max-width: 500px) {
  #sitePickerMap { height: 200px !important; }
}

/* ─ Mobile: bottom sheet modal specifics ─ */
@media(max-width: 640px) {
  .modal-box.modal-lg { max-width: 100%; }
}

/* ─ Payslip modal inside inner area ─ */
.payslip-modal { min-width: 0; }

/* ─ Allowances section in modals ─ */
.allowances-section {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px;
}
.als-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.als-title { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.allowances-list { display: flex; flex-direction: column; gap: 8px; }
.al-empty { font-size: 0.8rem; color: var(--text-3); font-style: italic; }
.allowance-row {
  display: grid; grid-template-columns: 1fr 100px 100px 28px;
  gap: 8px; align-items: center;
}
.allowance-row input, .allowance-row select {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 7px 10px;
  font-family: var(--font); font-size: 0.82rem; min-width: 0;
}
@media(max-width: 500px) {
  .allowance-row { grid-template-columns: 1fr 80px 28px; }
  .allowance-row .al-freq { display: none; }
}
.btn-icon-danger {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: rgba(255,79,106,0.1); color: var(--red);
  cursor: pointer; font-size: 0.75rem; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.15s;
}
.btn-icon-danger:hover { background: var(--red); color: #fff; }

/* ─ Face/photo upload section in modals ─ */
.emp-photo-upload {
  display: flex; align-items: center; gap: 16px;
  padding: 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r);
}
.epu-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-glow); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: var(--blue);
  overflow: hidden; background-size: cover; background-position: center;
}
.epu-info { display: flex; flex-direction: column; gap: 6px; }

/* ─ face capture section ─ */
.face-capture-section {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px;
}
.fcs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fcs-title { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.fcs-status { font-size: 0.75rem; color: var(--text-3); }

/* ─ Employment type pills ─ */
.emp-type-pill {
  display: inline-block; padding: 2px 9px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
}
.et-permanent { background: rgba(99,102,241,.15); color: #818cf8; }
.et-contract  { background: rgba(251,191,36,.12); color: #fbbf24; }
.et-hourly    { background: rgba(0,217,126,.12); color: var(--green); }

/* ─ Manual attendance warning banner ─ */
.ma-warning {
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
  border-radius: 8px; padding: 10px 14px;
  font-size: 0.8rem; color: #fbbf24; line-height: 1.5;
}

/* ─ Responsive employee list: table desktop, cards mobile ─ */
.emp-table-view  { display: block; }
.emp-cards-view  { display: none; }
@media (max-width: 768px) {
  .emp-table-view { display: none; }
  .emp-cards-view { display: grid; }
}

/* ─ Settings sub-sections ─ */

/* ─ Dept features table ─ */
#deptFeaturesAdmin .data-table th,
#deptFeaturesAdmin .data-table td { padding: 6px 8px; font-size: .78rem; }

/* ─ Notice item clickable ─ */
.notice-item { transition: background .15s ease; }
.notice-item:hover { background: rgba(255,255,255,.05); border-radius: 6px; }

/* ── v20 UX Polish ─────────────────────────────────────── */

/* Check-in/out buttons: icon + text alignment */
.btn-checkin svg, .btn-checkout svg { flex-shrink: 0; }

/* Matched employee card: cleaner confidence badge */

/* Attendance result icon — larger */
.ar-icon { font-size: 2.2rem; margin-bottom: 8px; }
.ar-msg  { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ar-sub  { font-size: .82rem; color: var(--text-2); }
.att-result.success { border-color: rgba(0,217,126,.3); background: rgba(0,217,126,.04); }
.att-result.error   { border-color: rgba(255,79,106,.3); background: rgba(255,79,106,.04); }

/* Camera label with icon */
.cam-label { display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--text-2); }

/* Att-page max-width for desktop readability */

/* Employee card actions — wrap on mobile */
.emp-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }

/* Settings cards consistent */

/* Dept attendance table */
#deptFeaturesAdmin select {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: .8rem; width: 100%;
}

/* ── Complete badge colour set ─────────────────────────── */
.badge { display:inline-block; padding:3px 10px; border-radius:100px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.badge-half_day    { background:rgba(245,158,11,.15); color:var(--amber); border:1px solid rgba(245,158,11,.3); }
.badge-leave       { background:rgba(168,85,247,.15); color:var(--purple); border:1px solid rgba(168,85,247,.3); }
.badge-rejected    { background:rgba(255,79,106,.12); color:var(--red); border:1px solid rgba(255,79,106,.3); }
.badge-inactive    { background:rgba(120,130,150,.12); color:var(--text-2); border:1px solid var(--border); }
.badge-draft       { background:rgba(120,130,150,.12); color:var(--text-2); border:1px solid var(--border); }
.badge-generated   { background:rgba(79,142,255,.12); color:var(--blue); border:1px solid rgba(79,142,255,.3); }
.badge-sent        { background:rgba(0,217,126,.12); color:var(--green); border:1px solid rgba(0,217,126,.3); }
.badge-shortlisted { background:rgba(79,142,255,.12); color:var(--blue); border:1px solid rgba(79,142,255,.3); }
.badge-accepted    { background:rgba(0,217,126,.12); color:var(--green); border:1px solid rgba(0,217,126,.3); }

/* ── Smoother page transitions ─────────────────────────── */
.main > div { animation: pageIn .18s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Form focus ring ───────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(79,142,255,.12);
}

/* ── Scrollbar styling ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }


/* ── Empty state ───────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-3);
}
.empty-state svg { margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: .88rem; }

/* ── Stat card hover ───────────────────────────────────── */
.stat-card { transition: border-color .2s, transform .15s; cursor: default; }
.stat-card:hover { border-color: var(--border-2); transform: translateY(-2px); }

/* ── Settings card h3 consistent ──────────────────────── */
.settings-form .form-hint {
  font-size: .75rem; color: var(--text-3); margin-top: 5px; line-height: 1.5;
}


/* ── Admin login card — subtle gradient border ───────────── */
.admin-login-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
}

/* ── Matched employee — green border when 70%+ ───────────── */
.matched-emp {
  transition: border-color .2s, box-shadow .2s;
}
.matched-emp.confirmed {
  border-color: rgba(0,217,126,.4);
  box-shadow: 0 0 16px rgba(0,217,126,.1);
}
.matched-emp.unconfirmed {
  border-color: rgba(245,158,11,.35);
}

/* ── Data table — sticky header (opt-in via .sticky-table) ── */
.sticky-table-wrap { max-height: 480px; overflow-y: auto; }
.data-table thead th {
  background: var(--surface-2);
}

/* ── Improved checkbox styling ──────────────────────────── */
input[type="checkbox"] {
  accent-color: var(--blue);
  cursor: pointer;
}

/* ── Page header breadcrumb ─────────────────────────────── */
.hrms-header h2 { letter-spacing: -.02em; }


/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV (employee portal only)
   ══════════════════════════════════════════════════════════ */
.mob-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: rgba(11,15,26,.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-3); text-decoration: none; font-size: .65rem;
  font-weight: 600; padding: 4px 8px; border-radius: 8px;
  transition: color .15s;
  flex: 1; min-width: 0;
}
.mbn-item svg { flex-shrink: 0; }
.mbn-item span { white-space: nowrap; }
.mbn-item:hover { color: var(--blue); }
.mbn-item.mbn-active { color: #60a5fa; }
.mbn-item.mbn-active svg { stroke: #60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,.6)); }

@media (max-width: 700px) {
  .mob-bottom-nav { display: flex; }
  /* Push content above the bottom nav */
  .main { padding-bottom: 80px; }
}

/* ── Emp stat cards — colored accents ──────────────────── */
.emp-stat-card:nth-child(1) { border-left: 3px solid #10b981; }
.emp-stat-card:nth-child(2) { border-left: 3px solid #f59e0b; }
.emp-stat-card:nth-child(3) { border-left: 3px solid #3b82f6; }
.emp-stat-card:nth-child(4) { border-left: 3px solid #a855f7; }

/* ══════════════════════════════════════════════════════════
   COLORFUL ICON SYSTEM
   ══════════════════════════════════════════════════════════ */

/* Dashboard widget header icons */
.dw-header {
  display: flex; align-items: center; gap: 10px;
}
.dw-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dw-icon svg { color: #fff; }
.dw-icon-blue   { background: linear-gradient(135deg,#1d4ed8,#3b82f6); box-shadow: 0 3px 10px rgba(59,130,246,.4); }
.dw-icon-amber  { background: linear-gradient(135deg,#d97706,#f59e0b); box-shadow: 0 3px 10px rgba(245,158,11,.4); }
.dw-icon-pink   { background: linear-gradient(135deg,#be185d,#ec4899); box-shadow: 0 3px 10px rgba(236,72,153,.4); }
.dw-icon-green  { background: linear-gradient(135deg,#059669,#10b981); box-shadow: 0 3px 10px rgba(16,185,129,.4); }
.dw-icon-purple { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: 0 3px 10px rgba(168,85,247,.4); }
.dw-icon-teal   { background: linear-gradient(135deg,#0891b2,#06b6d4); box-shadow: 0 3px 10px rgba(6,182,212,.4); }

/* Stat cards — subtle gradient top border */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.stat-card:nth-child(1)::before { background: linear-gradient(90deg,#3b82f6,#06b6d4); }
.stat-card:nth-child(2)::before { background: linear-gradient(90deg,#10b981,#34d399); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg,#ef4444,#f97316); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.stat-card:nth-child(5)::before { background: linear-gradient(90deg,#a855f7,#ec4899); }
.stat-card:nth-child(6)::before { background: linear-gradient(90deg,#06b6d4,#0ea5e9); }

/* Hero card accent — stronger gradient */
.hero-card-accent {
  background: linear-gradient(135deg, rgba(29,78,216,.12), rgba(59,130,246,.04));
  border-color: rgba(59,130,246,.35);
}

/* Mobile bottom nav icons — colorful on active */
.mbn-item:nth-child(1).mbn-active svg { stroke: #60a5fa; filter: drop-shadow(0 0 5px rgba(96,165,250,.7)); }
.mbn-item:nth-child(2).mbn-active svg { stroke: #34d399; filter: drop-shadow(0 0 5px rgba(52,211,153,.7)); }
.mbn-item:nth-child(3).mbn-active svg { stroke: #fbbf24; filter: drop-shadow(0 0 5px rgba(251,191,36,.7)); }
.mbn-item:nth-child(4).mbn-active svg { stroke: #a78bfa; filter: drop-shadow(0 0 5px rgba(167,139,250,.7)); }
.mbn-item:nth-child(5).mbn-active svg { stroke: #f472b6; filter: drop-shadow(0 0 5px rgba(244,114,182,.7)); }

/* ── Weekoff / Holiday badges ───────────────────────────── */
.badge-weekoff  { background:rgba(100,116,139,.15); color:#94a3b8; border:1px solid rgba(100,116,139,.3); }
.badge-holiday  { background:rgba(16,185,129,.12);  color:#34d399; border:1px solid rgba(16,185,129,.3); }

/* ── Dept features table selects ────────────────────────── */
.dept-select {
  width: 100%; font-size: .8rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-family: var(--font);
}
.dept-select:focus { border-color: var(--blue); outline: none; }

/* ── Settings toggle switch ─────────────────────────────── */
.toggle-label {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.toggle-input { display: none; }
.toggle-track {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--border-2); position: relative;
  transition: background .2s; flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s;
}
.toggle-input:checked + .toggle-track { background: var(--blue); }
.toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

/* ── Custom file upload ─────────────────────────────────── */
.file-upload-wrap {
  position: relative;
}
.file-upload-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.file-upload-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1.5px dashed var(--border-2);
  border-radius: var(--r); padding: 10px 14px;
  font-size: .83rem; color: var(--text-2); cursor: pointer;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.file-upload-btn svg { flex-shrink: 0; color: var(--blue); }
.file-upload-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-wrap:hover .file-upload-btn {
  border-color: var(--blue); background: var(--blue-glow); color: var(--text);
}
.file-upload-wrap.has-file .file-upload-btn {
  border-color: var(--green); border-style: solid; color: var(--green);
}
.file-upload-wrap.has-file .file-upload-btn svg { color: var(--green); }

/* ── Settings form inputs — consistent sizing ────────────── */
.settings-form .form-group input[type="text"],
.settings-form .form-group input[type="email"],
.settings-form .form-group input[type="password"],
.settings-form .form-group select {
  width: 100%;
}

/* ── Allowance row with calc-type toggle ─────────────────── */
.allowance-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.allowance-row input, .allowance-row select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 7px 10px;
  font-size: .82rem; font-family: var(--font);
}
.allowance-row input:focus, .allowance-row select:focus {
  outline: none; border-color: var(--blue);
}
.allowance-row[data-item-type="deduction"] {
  border-left: 3px solid rgba(239,68,68,.35);
  padding-left: 6px;
}

/* ── Date / time inputs — calendar icon visible on dark bg ─ */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  color-scheme: dark;        /* tells browser to render native UI in dark style */
}

/* Modal-specific: full width, no overflow */
.modal-form input[type="date"],
.modal-form input[type="time"],
.modal-form input[type="datetime-local"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* do NOT use appearance:none — that hides the calendar icon */
}

/* Settings form date/time */
.settings-form input[type="date"],
.settings-form input[type="time"] {
  width: 100%;
}

/* Ensure form-row children never overflow */
.modal-form .form-row > .form-group {
  min-width: 0;
  overflow: hidden;
}

/* ── Offline Mode UI ─────────────────────────────────────── */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: .84rem;
  font-weight: 600;
  border-radius: 0;
  transition: none;
}
.offline-banner.hidden    { display: none; }
.offline-banner.offline   { background: rgba(220,38,38,.18); color: #fca5a5; border-bottom: 1px solid rgba(220,38,38,.35); }
.offline-banner.online    { background: rgba(22,163,74,.18);  color: #86efac; border-bottom: 1px solid rgba(22,163,74,.35); }

.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,176,32,.2);
  color: var(--amber);
  border: 1px solid rgba(255,176,32,.4);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
}

.offline-sync-btn {
  background: rgba(22,163,74,.2);
  color: #86efac;
  border: 1px solid rgba(22,163,74,.4);
  border-radius: 8px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}
.offline-sync-btn:hover   { background: rgba(22,163,74,.35); }
.offline-sync-btn:disabled{ opacity: .5; cursor: not-allowed; }

/* Offline result card variant */
.att-result.success .ar-icon { color: var(--green); }

/* ══════════════════════════════════════════════════════════
   NEW ADDITIONS — functional classes for new features
   ══════════════════════════════════════════════════════════ */

/* Report filter panel (replaces inline style) */
.report-filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  animation: fadeIn .2s ease;
}
.report-filter-panel-title {
  font-size: .78rem; font-weight: 700;
  color: var(--text-2); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 14px;
}
.report-filter-actions {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px;
}

/* Report summary pills */
.report-summary-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.report-summary-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 16px; min-width: 110px;
}
.rsp-val   { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.rsp-label { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.rsp-icon  { font-size: 1.2rem; flex-shrink: 0; opacity: .8; }

/* Export bar label */
.export-bar-label {
  font-size: .78rem; font-weight: 600; color: var(--text-2); margin-right: 4px;
}

/* Report results table wrapper */
.report-results-wrap {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.report-results-wrap .data-table th { position: sticky; top: 0; z-index: 2; }

/* Site report cards grid */
.site-report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 20px;
}

/* Activity log page */
.activity-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 100px;
  font-size: .7rem; font-weight: 700; font-family: var(--mono);
}

/* Admin scope checkboxes (admin users page) */
.adDept, .adSite { accent-color: var(--blue); cursor: pointer; }

/* Responsive additions */
@media (max-width: 640px) {
  .report-summary-pill { min-width: 90px; padding: 8px 12px; }
  .site-report-cards   { grid-template-columns: 1fr; }
}

/* ── Persistent offline pending badge (fixed bottom-right) ─── */
#offlinePersist {
  position: fixed;
  bottom: 72px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  pointer-events: none;
}
#offlinePersist .offline-badge,
#offlinePersist .offline-sync-btn {
  pointer-events: all;
}

/* ── Auto-mark attendance status indicator ─────────────── */
.att-auto-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  text-align: center;
  margin-top: 4px;
}
.aas-icon { font-size: 2rem; }
.aas-msg  {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════
   SIMPLE ATTENDANCE PAGE
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   SIMPLE ATTENDANCE PAGE — stable layout, no shift
   ════════════════════════════════════════════════════════ */
.att-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: 20px 16px 32px;
  gap: 0;                         /* gaps handled per-element */
}

/* ── Camera ── */
.att-simple .att-cam-wrap {
  width: 100%;
  max-width: 400px;
  flex-shrink: 0;
  margin-bottom: 14px;
}
.att-simple .cam-wrap {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--border-2);
  background: #050810;
  position: relative;
}
.att-simple #video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1) !important;
}
.att-simple #overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.att-simple .cam-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; background: rgba(5,8,16,.85);
  border-radius: 18px;
}
.att-simple .cam-loader p { font-size: .85rem; color: var(--text-2); margin: 0; }

/* ── Info panel — fixed width, rows always present ── */
.att-info-panel {
  width: 100%;
  max-width: 400px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}

/* Each row always in DOM — height never changes */
.att-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  min-height: 44px;               /* fixed row height */
  box-sizing: border-box;
}
.att-row + .att-row {
  border-top: 1px solid var(--border);
}

/* Row 1 — identity */
.att-row-identity .att-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  color: var(--text-3);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.att-row-identity.matched .att-avatar {
  background: rgba(0,217,126,.15);
  border-color: rgba(0,217,126,.5);
  color: var(--green);
}
.att-identity-info { flex: 1; min-width: 0; }
.att-emp-name {
  font-weight: 700; font-size: .95rem; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-emp-name:empty::before  { content: 'Waiting for face…'; color: var(--text-3); font-weight: 400; font-size: .85rem; }
.att-emp-dept {
  font-size: .75rem; color: var(--text-3); margin-top: 1px;
}
.att-emp-badge { flex-shrink: 0; }
.att-emp-badge .badge { font-size: .72rem; }

/* Row 2 — status */
.att-row-status {
  gap: 8px;
  font-size: .85rem; color: var(--text-2); font-weight: 500;
}
.att-row-status .sp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-2); flex-shrink: 0;
  transition: background .2s;
}
.att-row-status .sp-dot.ready   { background: var(--green); }
.att-row-status .sp-dot.working { background: var(--amber); }
.att-row-status .sp-dot.error   { background: var(--red); }
.att-row-status .sp-text        { flex: 1; }

/* Row 3 — location */
.att-row-location {
  font-size: .78rem; color: var(--text-3); gap: 7px;
}
.att-row-location svg { flex-shrink: 0; opacity: .6; }
.att-row-location #locText {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Row 4 — result */
.att-row-result {
  gap: 10px;
  font-size: .88rem;
  display: none;                  /* hidden until there's a result */
}
.att-row-result.visible { display: flex; }
.att-row-result .ar-icon { font-size: 1.4rem; flex-shrink: 0; }
.att-row-result .ar-msg  { font-weight: 700; color: #fff; flex: 1; }
.att-row-result .ar-sub  { font-size: .75rem; color: var(--text-3); }

/* Panel border states */
.att-info-panel.state-matched { border-color: rgba(0,217,126,.3); }
.att-info-panel.state-success { border-color: rgba(0,217,126,.5); background: rgba(0,217,126,.04); }
.att-info-panel.state-error   { border-color: rgba(255,79,106,.4); background: rgba(255,79,106,.04); }
.att-info-panel.state-blocked { border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.04); }

/* ════════════════════════════════════════════════════════
   KIOSK MODE — Full-screen attendance terminal
   ════════════════════════════════════════════════════════ */
.kiosk-wrap {
  position: fixed; inset: 0;
  background: #060a14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  z-index: 9000;
}

/* ── Camera ── */
.kiosk-cam-wrap {
  width: 100%;
  max-width: min(60vh, 480px);
  flex-shrink: 0;
}
.kiosk-cam {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid var(--border-2);
  background: #000;
}
.kiosk-cam video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1) !important;
}
.kiosk-cam canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.kiosk-cam .cam-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; background: rgba(6,10,20,.9);
}
.kiosk-cam .cam-loader p { color: var(--text-2); font-size: .9rem; margin: 0; }

/* ── Info panel ── */
.kiosk-panel {
  width: 100%;
  max-width: min(60vh, 480px);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kiosk-title {
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}
.kiosk-clock {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .04em;
  line-height: 1;
}

/* Identity row */
.kiosk-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,217,126,.08);
  border: 1px solid rgba(0,217,126,.25);
  border-radius: 12px;
  padding: 10px 14px;
  transition: opacity .2s;
}
.kiosk-identity.hidden { display: none; }
.kiosk-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,217,126,.2);
  border: 2px solid rgba(0,217,126,.5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem; color: var(--green);
  flex-shrink: 0;
}
.kiosk-name { font-weight: 700; font-size: 1rem; color: #fff; }
.kiosk-dept { font-size: .78rem; color: var(--text-2); margin-top: 2px; }

/* Status */
.kiosk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-2);
  font-weight: 500;
}
.kiosk-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-2); flex-shrink: 0;
  transition: background .2s;
}
.kiosk-dot.ready   { background: var(--green); box-shadow: 0 0 6px var(--green); }
.kiosk-dot.working { background: var(--amber); }
.kiosk-dot.error   { background: var(--red); }

/* Result flash card */
.kiosk-result {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity .3s;
}
.kiosk-result.hidden { display: none; }
.kiosk-result.success { background: rgba(0,217,126,.1); border: 1px solid rgba(0,217,126,.4); }
.kiosk-result.error   { background: rgba(255,79,106,.1); border: 1px solid rgba(255,79,106,.4); }
.kiosk-result.blocked { background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.35); }
.kiosk-result-icon { font-size: 2rem; flex-shrink: 0; }
.kiosk-result-msg  { font-weight: 700; font-size: .95rem; color: #fff; }
.kiosk-result-time { font-size: .78rem; color: var(--text-2); margin-top: 2px; }

/* Full-screen flash overlay */
.kiosk-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity .08s;
}
.kiosk-flash.checkin  { background: rgba(0,217,126,.25); }
.kiosk-flash.checkout { background: rgba(255,176,32,.2); }
.kiosk-flash.error    { background: rgba(255,79,106,.2); }

/* On mobile — full viewport */
@media (max-width: 520px) {
  .kiosk-cam-wrap { max-width: 100%; }
  .kiosk-panel    { max-width: 100%; border-radius: 0; }
  .kiosk-clock    { font-size: 1.6rem; }
}

/* ── Kiosk floating action button ─────────────────────── */
/* Kiosk button — in navbar header, admin only */
.nav-kiosk-btn {
  background: rgba(0,217,126,.12) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,217,126,.3) !important;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.nav-kiosk-btn:hover {
  background: rgba(0,217,126,.22) !important;
}
/* Hide on kiosk page itself */
body[data-page="kiosk"] .nav-kiosk-btn { display: none; }


/* ══════════════════════════════════════════════════════════
   LANDING PAGE — 3 states: guest / employee / admin
   ══════════════════════════════════════════════════════════ */

.landing-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 20px 32px;
  min-height: calc(100vh - 100px);
  justify-content: center;
}
/* Desktop landing — wider, horizontal cards */
@media (min-width: 701px) {
  .landing-page {
    max-width: 560px;
    padding: 64px 0 48px;
  }
  .landing-cards { gap: 14px; }
  .lc-card { padding: 20px 24px; }
  .lc-title { font-size: 1.05rem; }
  .landing-hero { padding: 24px 0 12px; }
  .landing-title { font-size: 1.8rem; }
}

/* Hero (guest only) */
.landing-hero {
  text-align: center;
  padding: 20px 0 8px;
}
.landing-logo {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin: 0 auto 20px;
  overflow: hidden;
  background: transparent;
}
.landing-logo svg {
  /* Only show gradient bg when SVG icon is used (no company logo) */
  filter: drop-shadow(0 0 12px rgba(14,134,212,.4));
}
.landing-logo img {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 18px;
  background: transparent;
}
/* JS adds .has-logo class when logo is loaded */
.landing-logo.no-logo {
  background: linear-gradient(135deg, var(--blue), #1a5fa8);
  box-shadow: 0 8px 24px rgba(14,134,212,.3);
}
.landing-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.landing-sub {
  font-size: .95rem;
  color: var(--text-2);
}
.landing-footer {
  text-align: center;
  font-size: .78rem;
  color: var(--text-3);
  letter-spacing: .04em;
  padding-top: 4px;
}

/* Greeting (logged in) */
.landing-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.lg-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lg-admin { background: rgba(14,134,212,.15); color: var(--blue); }
.lg-emp   { background: rgba(22,163,74,.15);  color: #16a34a; }
.lg-name  { font-size: 1rem; font-weight: 700; color: #fff; }
.lg-role  { font-size: .78rem; color: var(--text-3); margin-top: 2px; }

/* Cards */
.landing-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  text-decoration: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  transition: transform .12s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.lc-card:active  { transform: scale(0.97); }
.lc-primary {
  background: linear-gradient(135deg, rgba(14,134,212,.18), rgba(14,134,212,.06));
  border-color: rgba(14,134,212,.35);
}
.lc-accent {
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(22,163,74,.04));
  border-color: rgba(22,163,74,.3);
}
.lc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}
.lc-primary .lc-icon { background: rgba(14,134,212,.15); border-color: rgba(14,134,212,.2); color: var(--blue); }
.lc-accent  .lc-icon { background: rgba(22,163,74,.15);  border-color: rgba(22,163,74,.2);  color: #16a34a; }
.lc-body  { flex: 1; min-width: 0; }
.lc-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.lc-desc  { font-size: .82rem; color: var(--text-2); line-height: 1.4; }
.lc-arrow { color: var(--text-3); flex-shrink: 0; }

/* responsive rules consolidated */

/* ── Offline mode banner ── */
.offline-mode-card {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .85rem;
  color: #f59e0b;
}
.offline-mode-card svg { flex-shrink: 0; }

/* NAVBAR — see unified rules at top of file */

/* nav styles consolidated above */

/* ══════════════════════════════════════════════════════════
   PROFILE BOTTOM SHEET — Gmail / YouTube style
   ══════════════════════════════════════════════════════════ */

.profile-sheet-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.profile-sheet-overlay.open { display: block; }

.profile-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 601;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  max-width: 480px;
  margin: 0 auto;
}
.profile-sheet.open { transform: translateY(0); }

.ps-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 4px;
}
.ps-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 16px;
}
.ps-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1a5fa8);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-name { font-size: 1rem; font-weight: 700; color: #fff; }
.ps-role { font-size: .78rem; color: var(--text-3); margin-top: 2px; }

.ps-divider { height: 1px; background: var(--border); margin: 4px 0; }

.ps-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: var(--text-2);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.ps-item:active { background: var(--surface-2); }
.ps-item svg { flex-shrink: 0; }
.ps-logout { color: var(--red) !important; margin-bottom: 8px; }

/* App version label on landing */
.landing-version {
  text-align: center;
  font-size: .72rem;
  color: var(--text-3);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* ── Reports — mobile friendly ─────────────────────────── */
@media (max-width: 700px) {
  .reports-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .report-card {
    padding: 14px 10px !important;
  }
  .report-card-icon {
    font-size: 1.6rem !important;
  }
  .report-card-title {
    font-size: .82rem !important;
  }
  .report-card-desc {
    font-size: .72rem !important;
    display: none;
  }
  .report-filter-panel {
    padding: 14px !important;
  }
  .report-filter-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .export-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Brand icon — no background when company logo is set */
.brand-icon.brand-has-logo {
  background: transparent !important;
  border: none;
}

/* ── Attendance Punch Detail Popup ─────────────────────────── */
.att-punch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.att-punch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2, #1a2235);
  border-radius: 10px;
  border: 1px solid var(--border, #1e2d45);
}
.apr-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.apr-in  { background: rgba(22,163,74,.15);  color: #16a34a; border: 1px solid rgba(22,163,74,.3); }
.apr-out { background: rgba(220,38,38,.12);  color: #dc2626; border: 1px solid rgba(220,38,38,.25); }
.apr-info {
  flex: 1;
  min-width: 0;
}
.apr-time {
  font-size: .97rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--mono, monospace);
}
.apr-meta {
  font-size: .78rem;
  color: var(--text-2, #94a3b8);
  margin-top: 2px;
}
.apr-loc {
  font-size: .75rem;
  color: var(--text-2, #94a3b8);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.apr-device {
  font-size: .73rem;
  color: var(--text-3, #475569);
  margin-top: 3px;
}
.apr-photo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--border, #1e2d45);
  transition: transform .15s;
}
.apr-photo:hover { transform: scale(1.06); }

/* ── Muster period quick-select ─────────────────────────────── */
#musterCustomRange {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}