/* ==========================================================================
   AURORA — compact minimalist polish for login, PIN, Admin and Faculty screens
   ========================================================================== */

/* ----------------------------- Sign in card ----------------------------- */
/* Title and form share a single plane; the panorama projects this whole group. */
.login-page .login-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 36px));
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.login-page .brand-hold {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-page .brand-morph {
  width: 100%;
  height: clamp(96px, 14vw, 174px);
}

.login-page .brand-title {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.login-page .brand-hold:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 6px;
  border-radius: 12px;
}

.login-page .login-card {
  width: min(330px, calc(100vw - 36px));
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12) !important;
}

.login-page .field {
  margin-bottom: 12px;
}

.login-page .field span {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #475569;
}

.login-page .field input {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.login-page .field input:focus {
  border-color: rgba(212,175,55,0.46);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}

.login-page .signin-stack {
  margin-top: 8px;
}

.login-page .btn-cosmic {
  height: 44px;
  padding: 0;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid #dce1e9;
  color: #172033;
  box-shadow: 0 4px 12px rgba(15,23,42,0.07);
}

.login-page .btn-cosmic .cos-inner {
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.login-page .btn-cosmic .cos-inner::before,
.login-page .btn-cosmic .cos-inner::after {
  content: none;
  animation: none;
}

.login-page .btn-cosmic .cos-label,
.login-page .btn-cosmic .cos-arrow {
  color: #172033;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: none;
  filter: none;
  animation: none;
}

.login-page .btn-cosmic:hover {
  background: #ffffff;
  filter: none;
  border-color: #aeb9cc;
  box-shadow: 0 7px 18px rgba(15,23,42,0.11);
  transform: translateY(-1px);
}

.login-page .btn-cosmic:active {
  background: #ffffff;
  filter: none;
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(15,23,42,0.08);
}

.login-page .btn-cosmic:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

.login-page .btn-cosmic .cos-arrow svg {
  width: 14px;
  height: 14px;
}

/* Keep native inputs readable without mobile focus-zoom changing the camera. */
@media (max-width: 600px) {
  .login-page .field input { font-size: 16px; }
}

@media (max-height: 600px) {
  .login-page .brand-morph { height: 80px; }
  .login-page .login-wrap { gap: 12px; }
}

/* ------------------------------- PIN card ------------------------------- */
/* A single PIN box. Transparent background; silver rim, white text, gold
   caret + focus ring. No "Admin" label, no submit button — Enter submits. */
.login-page .pin-overlay[hidden],
.pin-overlay[hidden],
#pinOverlay[hidden],
.pin-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.login-page .pin-overlay.open,
.pin-overlay.open,
#pinOverlay.open {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .login-page .pin-overlay.open,
  .pin-overlay.open {
    align-items: flex-start !important;
    padding-top: 18vh !important;
  }
}

.login-page .pin-card,
.pin-card {
  display: block;
  width: 320px;
  max-width: calc(100vw - 32px);
  margin: 0 auto !important;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(234, 179, 8, 0.6);
  color: #0f172a;
  font-family: "Manrope", "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 10px;
  text-align: center;
  caret-color: #d4af37;
  box-shadow:
    0 16px 40px 0 rgba(15, 23, 42, 0.28),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative !important;
  z-index: 1000000 !important;
}

/* Chrome's password manager would repaint the field opaque; keep it glassy */
.login-page .pin-card:-webkit-autofill,
.login-page .pin-card:-webkit-autofill:hover,
.login-page .pin-card:-webkit-autofill:focus,
.pin-card:-webkit-autofill,
.pin-card:-webkit-autofill:hover,
.pin-card:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.25);
  transition: background-color 9999s ease-out 0s;
}

.login-page .pin-card::placeholder,
.pin-card::placeholder {
  color: rgba(15, 23, 42, 0.45);
  font-weight: 700;
  letter-spacing: 0.24em;
  font-size: 13px;
}

.login-page .pin-card:focus,
.pin-card:focus {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.35),
    0 16px 40px rgba(15, 23, 42, 0.18),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.login-page .pin-card.bad,
.pin-card.bad {
  border: 2px solid rgba(244, 63, 94, 0.85);
  box-shadow:
    0 0 30px rgba(244, 63, 94, 0.45),
    0 18px 44px rgba(15, 23, 42, 0.28);
}

.login-page .pin-card.shake,
.pin-card.shake { animation: pinShake 0.34s ease; }

@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  60%      { transform: translateX(6px); }
}

/* ------------------------ Admin / Faculty modern UI ----------------------- */


.shell {
  grid-template-columns: 218px minmax(0, 1fr);
}

.sidebar {
  padding: 20px 13px 16px;
  background: rgba(255,255,255,0.82);
  border-right: 1px solid rgba(226,232,240,0.76);
  box-shadow: 1px 0 22px rgba(15,23,42,0.04);
}

.side-head {
  padding-bottom: 16px;
  margin-bottom: 10px;
}

.side-mark {
  max-width: 154px;
}

.nav {
  gap: 6px;
}

.nav-item {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 650;
  color: #475569;
}

.nav-item .ni {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(248,250,252,0.9);
  border: 1px solid rgba(226,232,240,0.72);
}

.nav-item:hover {
  background: rgba(248,250,252,0.92);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(236,72,153,0.08));
  border-color: rgba(212,175,55,0.18);
  color: #a67c00;
  box-shadow: 0 10px 24px rgba(212,175,55,0.08);
}

.nav-item.active .ni {
  background: #ffffff;
  color: #d4af37;
  border-color: rgba(212,175,55,0.20);
}

.nav-item.active::before {
  display: none;
}

.content {
  padding: 24px 30px 42px;
}

.view {
  gap: 16px;
}

.sec-head h2 {
  font-size: 20px;
  letter-spacing: -0.035em;
}

.panel,
.glass.card,
.card,
.event-card,
.stat {
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  border: 1px solid rgba(226,232,240,0.82);
  box-shadow: 0 10px 28px rgba(15,23,42,0.045), inset 0 1px 0 #fff;
}

.lift:hover {
  transform: translateY(-2px);
  border-color: rgba(212,175,55,0.24);
  box-shadow: 0 16px 38px rgba(15,23,42,0.075);
}

.bento {
  gap: 14px;
}

.hero-cell {
  padding: 22px;
}

.hero-num {
  font-size: clamp(38px, 5vw, 50px);
}

.metric-num {
  font-size: 28px;
}

.metric-ico {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(212,175,55,0.11), rgba(236,72,153,0.09));
  border-color: rgba(212,175,55,0.14);
}

.btn-grad {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d4af37, #e0b94a 55%, #ec4899);
  box-shadow: 0 10px 20px rgba(212,175,55,0.20);
}

.table-wrap {
  border-radius: 18px;
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .content {
    height: auto;
    padding: 18px;
  }

  .bento,
  .bento .span-2,
  .bento .span-3 {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

/* ---------------------------- sign-in role switch --------------------------- */
/* Same form for everyone; the switch only decides which console opens. Admin
   keeps its hidden four-tap door on the wordmark. */
.login-page .role-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.login-page .role-opt {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  font: 600 12px/1 var(--font-sans, inherit);
  letter-spacing: 0.02em;
  color: #64748b;
  padding: 9px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.login-page .role-opt:hover { color: #0f172a; }

.login-page .role-opt.on {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}

/* ---------------------------- sidebar collapse --------------------------- */
.sidebar.collapsed {
  width: 68px !important;
  min-width: 68px !important;
  padding: 16px 8px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sidebar.collapsed .side-mark {
  display: none !important;
}
.sidebar.collapsed .nav-item span:not(.ni) {
  display: none !important;
}
.sidebar.collapsed .nav-item {
  justify-content: center !important;
  padding: 10px 0 !important;
  width: 100% !important;
}
.sidebar.collapsed .logout-action span {
  display: none !important;
}
.sidebar.collapsed .logout-action {
  justify-content: center !important;
  padding: 10px 0 !important;
}
.shell.sidebar-collapsed {
  grid-template-columns: 68px 1fr !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sidebar-toggle-btn:hover {
  opacity: 0.85 !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* -------------------- Calendar & Line Chart Polish -------------------- */
/* The calendar reads the console palette instead of carrying its own hard-coded
   sky blue, so it can no longer drift away from the surrounding theme. */
.cal-card {
  background: #ffffff !important;
  border: 1px solid var(--line, #e9ebef) !important;
  border-radius: var(--r, 14px) !important;
  box-shadow: 0 1px 2px rgba(31, 37, 48, 0.04) !important;
}
.btn-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line, #e9ebef);
  color: var(--text-muted, #6b7484);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.btn-cal-nav:hover {
  background: var(--accent-pale, #f7eccd);
  color: var(--accent, #b8912a);
  border-color: var(--accent-soft, #e8d290);
}
#view-dash .cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#view-dash .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
#view-dash .cal-dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle, #98a2b2);
  padding: 4px 0 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#view-dash .cal-dow.sun {
  color: var(--text-subtle, #98a2b2);
  opacity: 0.7;
}
#view-dash .cal-d {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1f2530);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  background: transparent;
}
#view-dash .cal-d:hover {
  background: var(--line-subtle, #f2f3f6);
  color: var(--text, #1f2530);
}
#view-dash .cal-d.has {
  background: var(--accent-pale, #f7eccd);
  color: var(--accent, #b8912a);
  font-weight: 700;
}
/* User specifically requested: DO NOT highlight today in calendar! */
#view-dash .cal-d.today {
  border: none;
}
#view-dash .cal-d.selected {
  background: var(--accent, #b8912a) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(184, 145, 42, 0.32) !important;
}
#view-dash .cal-d.in-range {
  background: var(--accent-pale, #f7eccd) !important;
  color: var(--accent, #b8912a) !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
#view-dash .cal-d.range-start {
  background: var(--accent, #b8912a) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#view-dash .cal-d.range-end {
  background: var(--accent, #b8912a) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
#view-dash .cal-d.range-anchor {
  outline: 2px solid var(--accent, #b8912a) !important;
  outline-offset: 1px;
}
#view-dash .cal-d.preview-range {
  background: var(--accent-pale, #f7eccd) !important;
  color: var(--accent, #b8912a) !important;
  outline: 1px dashed var(--accent-soft, #e8d290) !important;
}
#view-dash .cal-d .dot {
  position: absolute;
  bottom: 2.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #b8912a);
}
#view-dash .cal-d.selected .dot,
#view-dash .cal-d.range-start .dot,
#view-dash .cal-d.range-end .dot {
  background: #ffffff;
}
#view-dash .cal-d.in-range .dot {
  background: var(--accent, #b8912a);
}
.cal-slicer-btn {
  transition: all 0.15s ease;
}
.cal-slicer-btn:hover {
  background: var(--line-subtle, #f2f3f6) !important;
  color: var(--text, #1f2530) !important;
}
.cal-slicer-btn.active {
  background: var(--accent, #b8912a) !important;
  color: #ffffff !important;
}
.cal-dot-leg {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.cal-has-leg {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Minimalist Soft Delete button */
.btn-minimal-del {
  transition: all 0.15s ease;
}
.btn-minimal-del:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Line Chart styling */
#trendChart {
  position: relative;
  width: 100%;
}
#trendChart .chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}
#trendChart .chart-box {
  position: relative;
  width: 100%;
  height: 190px;
  padding-left: 36px;
  box-sizing: border-box;
}
#trendChart svg.chart {
  width: 100%;
  height: 100%;
  display: block;
}
#trendChart .gl {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
#trendChart .chart-y {
  position: absolute;
  left: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#trendChart .chart-x {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px 0 36px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
}

/* Top bar clock - Attached cleanly to separate top corner, small, borderless, soft style */
.top-bar-time {
  position: fixed !important;
  top: 8px !important;
  right: 12px !important;
  z-index: 99999 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: auto !important;
}
.top-bar-time .stb-date {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.01em !important;
}
.top-bar-time .stb-time {
  color: #8a6508 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* Day attendance table */
#dayAttTable {
  width: 100%;
  border-collapse: collapse;
}
#dayAttTable th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#dayAttTable td {
  padding: 11px 14px;
  font-size: 12.5px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
#dayAttTable tr:hover td {
  background: #f8fafc;
}

/* ---------------------------- Custom switch toggle --------------------------- */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 24px;
}
.switch-toggle .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch-toggle input:checked + .slider {
  background-color: #a67c00; /* Purple-600 */
}
.switch-toggle input:checked + .slider:before {
  transform: translateX(20px);
}

/* ==========================================================================
   NEURAL FACE SCANNER — Full screen futuristic scanning interface
   ========================================================================== */
.neural-scanner-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #09090b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30px 20px;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.scanner-header {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 12px;
}

.scanner-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b; /* Gold accent */
}

.scanner-lang-selector {
  display: flex;
  gap: 8px;
}

.scanner-lang-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.scanner-lang-btn.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #000;
}

.scanner-viewport-container {
  position: relative;
  width: min(290px, 70vw);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  overflow: hidden;
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.scanner-viewport-container.verified {
  border-color: #10b981; /* Green success */
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.3);
}

.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror */
}

.scanner-laser-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to bottom, transparent, #f59e0b, transparent);
  box-shadow: 0 0 15px #f59e0b;
  opacity: 0.8;
  animation: scanLaser 3s infinite ease-in-out;
  pointer-events: none;
}

.scanner-viewport-container.verified .scanner-laser-line {
  background: linear-gradient(to bottom, transparent, #10b981, transparent);
  box-shadow: 0 0 15px #10b981;
}

@keyframes scanLaser {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

.scanner-status-hold {
  text-align: center;
  margin-top: 16px;
}

.scanner-status-main {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.scanner-status-sub {
  font-size: 13px;
  opacity: 0.6;
  margin-top: 4px;
}

.scanner-reference-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 20px;
}

.ref-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ref-card.checking {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.04);
}

.ref-card.matched {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

.ref-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
}

.ref-card.matched .ref-img {
  border-color: #10b981;
}

.ref-match-pct {
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  color: #94a3b8;
  font-family: monospace;
}

.ref-card.matched .ref-match-pct {
  color: #10b981;
}

.ref-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #f59e0b;
  opacity: 0.6;
  animation: refScan 2s infinite ease-in-out;
}

@keyframes refScan {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

.scanner-footer-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.2s ease;
}

.scanner-footer-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* ==========================================================================
   GOLDEN CHECK-IN / CHECK-OUT SYSTEM BUTTONS
   ========================================================================== */
.btn-gold-action {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: none;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-gold-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn-gold-action:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-silver-action {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: none;
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.2);
  transition: all 0.2s ease;
}

.btn-silver-action:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-silver-action:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-expired-action {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-disabled-grey {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #64748b !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ============================================================================
   Top Bar Date & Time - Pinned to Corner, Small, Borderless, Soft Style (Desktop Only)
   ========================================================================== */
@media (min-width: 861px) {
  #topBarTime,
  .top-bar-time {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 3px 9px !important;
    margin: 0 !important;
    outline: none !important;
    pointer-events: auto !important;
  }
  #roleBadge,
  #topBarTime #roleBadge,
  .top-bar-time #roleBadge {
    background: rgba(224, 231, 255, 0.65) !important;
    border: none !important;
    color: #a67c00 !important;
    padding: 1.5px 7px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  #stbDate,
  #topBarTime .stb-date,
  .top-bar-time .stb-date {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.01em !important;
  }
  #stbTime,
  #topBarTime .stb-time,
  .top-bar-time .stb-time {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
    color: #8a6508 !important;
    letter-spacing: 0.02em !important;
    background-color: transparent !important;
  }

  #topBarTime span:not(#roleBadge):not(#stbDate):not(#stbTime),
  .top-bar-time span:not(#roleBadge):not(#stbDate):not(#stbTime) {
    color: #cbd5e1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
}

/* ============================================================================
   Glassy Transparent Controls for Students Filter Bar
   ========================================================================== */
.glass-filter-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04) !important;
}
.glass-btn {
  transition: all 0.18s ease;
  user-select: none;
}
.glass-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #e8cf8a !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(232, 207, 138, 0.15) !important;
}
.glass-btn.active {
  background: #b8860b !important;
  color: #ffffff !important;
  border-color: #b8860b !important;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25) !important;
}
.glass-input, .glass-select {
  transition: all 0.18s ease;
}
.glass-input:focus, .glass-select:focus {
  background: #ffffff !important;
  border-color: #b8860b !important;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15) !important;
}

/* ============================================================================
   Delete Student: Simple Trash Icon Only with Low Opacity
   ========================================================================== */
.btn-del-trash-only {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  opacity: 0.35 !important;
  color: #64748b !important;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 6px !important;
}
.btn-del-trash-only:hover {
  opacity: 0.95 !important;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  transform: scale(1.1) !important;
}

/* ============================================================================
   Event Detail: Full Page Top Map & Attendance Analytics Layout
   ========================================================================== */
.event-top-map-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
  margin-bottom: 20px;
  background: #f8fafc;
}
.event-top-map-wrap .leaflet-container {
  width: 100%;
  height: 100%;
}
.event-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.embed-map-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
  height: 160px;
  border: 1px solid #e2e8f0;
}
.embed-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Gold designed VIEW button */
.btn-gold-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 3px 12px rgba(217, 119, 6, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-gold-view:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.48), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1.5px) scale(1.02);
}

.btn-gold-view:active {
  transform: translateY(0.5px) scale(0.98);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
}

/* Mobile top brand bar and mobile logout button are hidden on desktop */
.mobile-top-bar,
.mobile-corner-logout-btn {
  display: none;
}

/* ==========================================================================
   Mobile Ergonomics & Responsive Experience Optimization (< 860px)
   ========================================================================== */
@media (max-width: 860px) {
  #gradCursorArrow,
  .gradient-cursor-arrow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html, body, *, *::before, *::after, button, a, input, select, textarea, [role="button"] {
    cursor: auto !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .shell {
    grid-template-columns: 100% !important;
    width: 100% !important;
    padding-bottom: 74px !important;
  }

  /* Independent Mobile Bottom Footer Menu */
  .sidebar,
  .sidebar.glass,
  .shell.sidebar-collapsed .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 max(8px, env(safe-area-inset-bottom)) 0 !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .sidebar .side-head {
    display: none !important;
  }

  .sidebar-toggle-btn {
    display: none !important;
  }

  /* Horizontal Scrollable Menu with Independent Floating Box Icons */
  .sidebar .nav,
  .sidebar .side-nav,
  .nav {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 8px !important;
    padding: 6px 14px 10px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav::-webkit-scrollbar,
  .sidebar .side-nav::-webkit-scrollbar,
  .nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Independent Floating Box-Icon Navigation Buttons */
  .sidebar .nav-item,
  .nav-item {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    min-height: 52px !important;
    height: auto !important;
    min-width: 52px !important;
    max-width: 66px !important;
    flex: 0 0 auto !important;
    border-radius: 13px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    color: #64748b !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sidebar .nav-item:hover,
  .sidebar .nav-item:focus {
    background: rgba(197, 160, 40, 0.08) !important;
    color: #1c1b19 !important;
    transform: translateY(-1px) !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sidebar .nav-item:active {
    transform: scale(0.96) !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sidebar .nav-item.active {
    background: rgba(197, 160, 40, 0.12) !important;
    color: #b28f1e !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sidebar .nav-item .ni {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transition: all 0.16s ease !important;
  }

  .sidebar .nav-item .ni svg,
  .nav-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.7 !important;
    stroke: #6b6760 !important;
    transition: stroke 0.16s ease !important;
  }

  .sidebar .nav-item.active .ni {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .sidebar .nav-item.active .ni svg,
  .nav-item.active svg {
    stroke: #b28f1e !important;
  }

  .sidebar .nav-item > span:not(.ni) {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: #6b6760 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 58px !important;
    transition: color 0.16s ease, font-weight 0.16s ease !important;
  }

  .sidebar .nav-item.active > span:not(.ni) {
    color: #b28f1e !important;
    font-weight: 700 !important;
  }

  /* Hide sidebar footer container on mobile */
  .sidebar .side-foot {
    display: none !important;
  }

  /* Mobile Top Corner Low-Opacity Small Grey Button.
     Right 12 put this 32px button across 12..44, overlapping the corner theme
     toggle (8..32). It never won the cascade while minimal-2027.css was loaded
     too, but any page loading only this sheet would have shown the two stacked,
     so it now matches the aligned geometry used everywhere else. */
  .mobile-corner-logout-btn {
    display: flex !important;
    position: fixed !important;
    top: 4px !important;
    right: 38px !important;
    z-index: 999999 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(241, 245, 249, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(203, 213, 225, 0.45) !important;
    color: #64748b !important;
    opacity: 0.65 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
  }

  .mobile-corner-logout-btn:hover,
  .mobile-corner-logout-btn:active,
  .mobile-corner-logout-btn:focus {
    opacity: 1 !important;
    background: rgba(241, 245, 249, 0.95) !important;
    color: #334155 !important;
    border-color: rgba(148, 163, 184, 0.6) !important;
  }

  .mobile-corner-logout-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #64748b !important;
    stroke-width: 2 !important;
  }

  .mobile-corner-logout-btn:hover svg,
  .mobile-corner-logout-btn:active svg {
    stroke: #334155 !important;
  }

  /* Hide timer, role badge, logo, top brand bar, and bottom logout completely on mobile devices */
  .mobile-top-bar,
  .mobile-top-logo,
  .mobile-top-title,
  #topBarTime,
  .top-bar-time,
  #roleBadge,
  .role-badge,
  #stbDate,
  .stb-date,
  #stbTime,
  .stb-time,
  .side-foot,
  .sidebar .side-foot,
  .side-foot .logout-action,
  .sidebar .logout-action,
  .side-user,
  .user-info,
  #logoutBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Content area — clean minimalist mobile viewport */
  .content {
    padding: 12px 12px 88px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ultra Clean Minimalist Panels & Cards */
  .panel, .card, .event-card, .kpi-strip .k {
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 12px -2px rgba(15, 23, 42, 0.04) !important;
  }

  .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .tb-search {
    width: 100% !important;
  }

  .tb-search input {
    border-radius: 12px !important;
    height: 42px !important;
    font-size: 13.5px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  }

  .tb-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sec-head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .sec-head h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
  }

  /* Modern KPI Strips on Mobile */
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .kpi-strip .k {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .kpi-strip .k b {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  .kpi-strip .k span {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  /* Tables with smooth touch scrolling */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
  }

  table.att-table, table.table, table {
    min-width: 560px !important;
  }

  /* Floating Bottom Navigation Bar on Mobile */
  .sidebar nav, .side-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sidebar nav button.nav-item {
    flex: 0 0 auto !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .sidebar nav button.nav-item.active {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #0f172a !important;
    border-color: #d4a017 !important;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4) !important;
  }

  .sidebar nav button.nav-item.active svg {
    stroke: #0f172a !important;
    color: #0f172a !important;
  }

  /* Modals on Mobile */
  .modal-dialog, .modal-box, .modal, .modal.glass, .modal.glass.wide {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-grid .field[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  .modal-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }

  .modal-actions button {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
  }

  /* Bento and Dashboard Grids on Mobile */
  .bento {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .bento .hero-cell, .bento .span-2, .bento .span-3, .bento .span-4 {
    grid-column: span 1 !important;
  }

  #view-dash > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Student Portal Mobile Checkin */
  .student-checkin-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .checkin-btn-group {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .checkin-btn-group button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }

  /* Face camera scanner mobile frame */
  .face-cam-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Neural Scanner Reticle Responsive */
  .neural-reticle-wrap {
    width: min(260px, 72vw) !important;
    height: min(260px, 72vw) !important;
  }

  /* Filter toolbars wrap cleanly */
  .glass-filter-bar, .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .glass-filter-bar input, .glass-filter-bar select {
    width: 100% !important;
    min-height: 38px !important;
  }

  /* Event cards on mobile */
  .event-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .event-card {
    padding: 14px 12px !important;
  }

  .modern-minimal-event-card {
    padding: 14px 14px !important;
  }

  /* Gender switch buttons touch target */
  .gender-switch-container {
    width: 100% !important;
  }
}

/* Minimalist Soft Gradient Glassmorphic Event Card */
.modern-minimal-event-card {
  position: relative;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-minimal-event-card:hover {
  transform: translateY(-2px);
  box-shadow: none !important;
  border-color: rgba(147, 197, 253, 0.9) !important;
}

.modern-minimal-event-card:active {
  transform: translateY(0);
}

/* Extra small screens (<= 480px) */
@media (max-width: 480px) {
  .stb-date {
    display: none !important;
  }

  .modal-head h3 {
    font-size: 15px !important;
  }
}






/* ============================================================================
   EVENTS ATTENDANCE — minimalist roster
   ========================================================================== */

/* The roster is no longer boxed in a card of its own; the console chrome around
   it is layer enough. */
.att-fullwindow-view .att-roster-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* ------------------------------ roster header ----------------------------- */
.att-roster-header-min {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-subtle, #f2f3f6);
}
.att-roster-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text, #1f2530);
}
.att-roster-search-input {
  flex: 1;
  min-width: 170px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line, #e9ebef);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text, #1f2530);
  font-size: 12px;
}
.att-roster-search-input:focus {
  outline: none;
  border-color: var(--accent, #b8912a);
}
.att-roster-select {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line, #e9ebef);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text, #1f2530);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.att-roster-select:focus {
  outline: none;
  border-color: var(--accent, #b8912a);
}

/* the two page actions, parked quietly in the corner */
.att-corner-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.att-corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted, #6b7484);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.att-corner-btn:hover {
  opacity: 1;
  color: var(--accent, #b8912a);
}
.att-corner-btn svg { width: 15px; height: 15px; }

/* --------------------------------- table --------------------------------- */
.att-th {
  cursor: pointer;
  user-select: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle, #98a2b2);
  white-space: nowrap;
}
.att-th-right { text-align: right !important; }
.att-th .sort-arrow {
  margin-left: 5px;
  font-size: 10px;
  color: var(--line-strong, #dfe3e9);
}
.att-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #1f2530);
  white-space: nowrap;
}
.att-dist {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle, #98a2b2);
}

/* ------------------------------ footer + pager ---------------------------- */
.att-roster-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-subtle, #f2f3f6);
}
.att-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.att-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line, #e9ebef);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-muted, #6b7484);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.att-page-btn:hover:not(:disabled) {
  color: var(--accent, #b8912a);
  border-color: var(--accent-soft, #e8d290);
  background: var(--accent-pale, #f7eccd);
}
.att-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.att-page-info {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #6b7484);
}

/* ------------- bulk "delete selected": a quiet red dustbin ----------------- */
.bulk-del-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.04);
  color: #dc2626;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.bulk-del-btn:hover {
  opacity: 1;
  background: rgba(220, 38, 38, 0.09);
}
.bulk-del-btn svg { width: 14px; height: 14px; }
.bulk-del-count {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------ bare "nothing live" notice ---------------------- */
.tracker-empty-bare {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.tracker-empty-bare h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-subtle, #98a2b2);
}

/* ============================================================================
   Soft Gold Accent for Timeline Range Switcher Buttons (24hr, 7d, 14d, Monthly)
   ============================================================================ */
.chart-range-picker {
  display: inline-flex !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
}

.chart-range-picker .cr-btn,
.dash-range .cr-btn,
#adminChartRangePicker .cr-btn,
#facChartRangePicker .cr-btn,
#stuChartRangePicker .cr-btn,
#view-dash .cr-btn {
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  background: transparent;
  color: #475569;
  transition: all 0.18s ease !important;
}

.chart-range-picker .cr-btn:hover:not(.active),
#view-dash .cr-btn:hover:not(.active) {
  color: #b45309 !important;
  background: rgba(217, 119, 6, 0.08) !important;
}

.chart-range-picker .cr-btn.active,
.dash-range .cr-btn.active,
#adminChartRangePicker .cr-btn.active,
#facChartRangePicker .cr-btn.active,
#stuChartRangePicker .cr-btn.active,
#view-dash .cr-btn.active {
  background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.32) !important;
}

/* ============================================================================
   Universal Mobile Viewport Hiding for Top Corner Time & Role Badge
   ============================================================================ */
@media screen and (max-width: 900px) {
  #topBarTime,
  .top-bar-time,
  #roleBadge,
  .role-badge,
  #stbDate,
  .stb-date,
  #stbTime,
  .stb-time {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* ============================================================================
   CLEAN MODERN FULLSCREEN FACE BIOMETRIC CAMERA & RECOGNITION SCANNER
   ============================================================================ */
.clean-face-scanner-overlay,
.fullscreen-face-scanner,
#neuralScannerOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #070a13;
  overflow: hidden;
  display: none !important;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clean-face-scanner-overlay.active,
.fullscreen-face-scanner.active,
#neuralScannerOverlay.active {
  display: flex !important;
  animation: fsFadeIn 0.25s ease-out;
}

@keyframes fsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fs-camera-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scaleX(-1) !important;
  z-index: 1 !important;
  background: #070a13 !important;
}

.fs-camera-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.fs-camera-hud {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  background: radial-gradient(circle at center, transparent 35%, rgba(7, 10, 19, 0.75) 100%) !important;
}

.fs-hud-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  pointer-events: auto !important;
}

.fs-hud-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.fs-live-badge {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  letter-spacing: 0.06em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: fit-content !important;
}

.fs-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981 !important;
  animation: fsPulseLive 1.8s infinite ease-in-out !important;
}

@keyframes fsPulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.fs-session-info {
  display: flex !important;
  flex-direction: column !important;
}

.fs-session-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

.fs-session-sub {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important;
}

.fs-hud-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fs-score-pill {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 8px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.25s ease !important;
}

.fs-score-pill.verified {
  border-color: #10b981 !important;
  box-shadow: 0 10px 35px -5px rgba(16, 185, 129, 0.4) !important;
}

.fs-score-lbl {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em !important;
}

.fs-score-val {
  font-size: 26px !important;
  font-weight: 900 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #f59e0b !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
  transition: color 0.2s ease !important;
}

.fs-score-val.verified {
  color: #34d399 !important;
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.65) !important;
}

.fs-hud-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.fs-ref-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
  padding: 4px 14px 4px 4px !important;
  pointer-events: auto !important;
}

.fs-ref-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #e8cf8a !important;
  background: #1e293b !important;
}

.fs-ref-meta {
  display: flex !important;
  flex-direction: column !important;
}

.fs-ref-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.fs-ref-status {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #e8cf8a !important;
}

.fs-btn-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  transition: all 0.2s ease !important;
}

.fs-btn-close:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  transform: scale(1.05);
}

.fs-center-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  pointer-events: none !important;
  position: relative !important;
}

.fs-scan-frame {
  position: relative !important;
  width: min(82vw, 330px) !important;
  height: min(72vh, 410px) !important;
  border-radius: 44px !important;
  box-shadow: 0 0 0 9999px rgba(5, 8, 15, 0.52) !important;
  border: 2px dashed rgba(255, 255, 255, 0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
  transition: all 0.35s ease !important;
}

.fs-scan-frame.verified {
  border-color: #10b981 !important;
  border-style: solid !important;
  box-shadow: 0 0 0 9999px rgba(5, 8, 15, 0.52), 0 0 60px rgba(16, 185, 129, 0.5) !important;
}

.fs-corner {
  position: absolute !important;
  width: 34px !important;
  height: 34px !important;
  border-color: #e8cf8a !important;
  border-style: solid !important;
  pointer-events: none !important;
  transition: border-color 0.3s ease !important;
}

.fs-corner-tl {
  top: -3px !important;
  left: -3px !important;
  border-width: 4px 0 0 4px !important;
  border-top-left-radius: 22px !important;
}

.fs-corner-tr {
  top: -3px !important;
  right: -3px !important;
  border-width: 4px 4px 0 0 !important;
  border-top-right-radius: 22px !important;
}

.fs-corner-bl {
  bottom: -3px !important;
  left: -3px !important;
  border-width: 0 0 4px 4px !important;
  border-bottom-left-radius: 22px !important;
}

.fs-corner-br {
  bottom: -3px !important;
  right: -3px !important;
  border-width: 0 4px 4px 0 !important;
  border-bottom-right-radius: 22px !important;
}

.fs-scan-frame.verified .fs-corner {
  border-color: #10b981 !important;
}

.fs-oval-guide {
  position: absolute !important;
  top: 14% !important;
  bottom: 22% !important;
  left: 12% !important;
  right: 12% !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(232, 207, 138, 0.35) !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

.fs-scan-frame.verified .fs-oval-guide {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

.fs-laser-line {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 207, 138, 0.95), transparent) !important;
  box-shadow: 0 0 16px #e8cf8a !important;
  animation: fsLaserScan 2.4s infinite ease-in-out !important;
  pointer-events: none !important;
}

.fs-scan-frame.verified .fs-laser-line {
  display: none !important;
}

@keyframes fsLaserScan {
  0% { top: 12%; opacity: 0.3; }
  50% { top: 84%; opacity: 0.95; }
  100% { top: 12%; opacity: 0.3; }
}

.fs-target-score {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.fs-target-score.verified {
  background: rgba(6, 78, 59, 0.9) !important;
  border-color: #34d399 !important;
  color: #6ee7b7 !important;
}

.fs-hud-bottombar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.fs-status-pill {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
  pointer-events: auto !important;
  transition: all 0.25s ease !important;
}

.fs-status-pill.verified {
  background: rgba(6, 78, 59, 0.92) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
  box-shadow: 0 10px 35px -5px rgba(16, 185, 129, 0.4) !important;
}

.fs-meter-card {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 10px 20px !important;
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.fs-meter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.fs-meter-track {
  width: 100% !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.fs-meter-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #f59e0b, #10b981) !important;
  border-radius: 999px !important;
  transition: width 0.2s ease !important;
}

.fs-success-overlay,
#scannerSuccessBanner {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: none !important;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 19, 0.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.fs-success-overlay.active,
#scannerSuccessBanner.active {
  display: flex !important;
  animation: fsFadeIn 0.3s ease-out;
}

/* A refused check-in is not a celebration: the card says so in its own colour,
   because "verified" styling on a write that did not happen is the whole reason
   a refused check-in looked identical to a recorded one. */
.fs-success-overlay.scan-failed .fs-success-card,
#scannerSuccessBanner.scan-failed .fs-success-card {
  border-color: rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 50px rgba(251, 191, 36, 0.22) !important;
}
.fs-success-overlay.scan-failed .fs-success-checkmark,
#scannerSuccessBanner.scan-failed .fs-success-checkmark {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #1f2937 !important;
}

.fs-success-card {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  border-radius: 28px !important;
  padding: 36px 32px !important;
  text-align: center !important;
  max-width: 420px !important;
  width: 90% !important;
  /* the close button is placed against this card, not the viewport */
  position: relative !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 50px rgba(16, 185, 129, 0.25) !important;
  animation: fsScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dismissing the success card. Sits inside the card's top-right corner so it is
   reachable without scrolling, and is large enough to be a real touch target on a
   phone. Without it the only exits were the two labelled buttons, and the automatic
   return can be throttled away by a backgrounded tab. */
.fs-success-x {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.28) !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e2e8f0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  -webkit-tap-highlight-color: transparent;
}

.fs-success-x:hover,
.fs-success-x:focus-visible {
  background: rgba(226, 232, 240, 0.16) !important;
  color: #ffffff !important;
  outline: none !important;
}

@keyframes fsScaleUp {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.fs-success-checkmark {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px auto !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.5) !important;
}

.fs-success-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.01em !important;
}

.fs-success-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #e8cf8a !important;
  margin-bottom: 16px !important;
}

.fs-success-badge-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin-bottom: 14px !important;
}

.fs-success-score {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  margin-bottom: 4px !important;
}

.fs-success-msg {
  font-size: 13.5px !important;
  color: #f8fafc !important;
  font-weight: 500 !important;
}

.fs-success-return {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.clean-scanner-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.clean-laser-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #e8cf8a, #f59e0b, #e8cf8a, transparent);
  box-shadow: 0 0 12px #e8cf8a;
  z-index: 4;
  pointer-events: none;
  animation: cleanLaserMove 2.6s infinite ease-in-out;
}

@keyframes cleanLaserMove {
  0% { top: 6%; opacity: 0.2; }
  50% { top: 92%; opacity: 0.95; }
  100% { top: 6%; opacity: 0.2; }
}

.hud-oval-guide {
  position: absolute;
  width: 170px;
  height: 210px;
  border: 1.5px dashed rgba(245, 158, 11, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.hud-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #e8cf8a;
  z-index: 4;
  pointer-events: none;
}
.hud-corner.top-left { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.hud-corner.top-right { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.hud-corner.bottom-left { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 16px; right: 16px; border-left: none; border-top: none; }

.scanner-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  transition: all 0.2s ease;
}

.scanner-status-badge.verified {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

.scanner-trilingual-hints {
  margin-top: 6px;
  font-size: 11.5px;
  color: #94a3b8;
  text-align: center;
  min-height: 18px;
}

.scanner-meter-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.scanner-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);
  border-radius: 10px;
  transition: width 0.25s ease-out;
}

.clean-5faces-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin-top: 14px;
}

.clean-ref-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease;
}

.clean-ref-card.match-active {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
}

.clean-ref-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.clean-ref-card.match-active .clean-ref-thumb {
  border-color: #10b981;
}

.clean-ref-label {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

.clean-ref-score {
  font-size: 10px;
  font-weight: 800;
  font-family: monospace;
  color: #f59e0b;
  margin-top: 2px;
}

.clean-ref-card.match-active .clean-ref-score {
  color: #10b981;
}

.clean-success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
  animation: fadeInScanner 0.25s ease-out;
}

.clean-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
}

.clean-success-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
  margin-bottom: 12px;
}

/* ----------------- Student Mobile Footer & Minimalist Aesthetics ----------------- */
@media (max-width: 860px) {
  #stuNav,
  .sidebar #stuNav,
  nav#stuNav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 6px 12px 10px 12px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  #stuNav .nav-item,
  .sidebar #stuNav .nav-item {
    flex: 1 1 0 !important;
    min-width: 65px !important;
    max-width: 100px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
  }

  #stuNav .nav-item .ni,
  .sidebar #stuNav .nav-item .ni {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #stuNav .nav-item .ni svg,
  .sidebar #stuNav .nav-item .ni svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #64748b !important;
  }

  #stuNav .nav-item span:not(.ni),
  .sidebar #stuNav .nav-item span:not(.ni) {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  #stuNav .nav-item.active,
  .sidebar #stuNav .nav-item.active {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #0f172a !important;
    border: 1px solid #d4a017 !important;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.38) !important;
  }

  #stuNav .nav-item.active .ni,
  .sidebar #stuNav .nav-item.active .ni {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  #stuNav .nav-item.active .ni svg,
  .sidebar #stuNav .nav-item.active .ni svg,
  #stuNav .nav-item.active svg {
    stroke: #0f172a !important;
    color: #0f172a !important;
  }

  #stuNav .nav-item.active span:not(.ni),
  .sidebar #stuNav .nav-item.active span:not(.ni) {
    color: #0f172a !important;
    font-weight: 750 !important;
  }
}

/* Minimalist Student Page Buttons */
.stu-btn-action.btn-gold {
  background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stu-btn-action.btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4) !important;
}

.stu-btn-action.btn-gold:active {
  transform: translateY(0) scale(0.97) !important;
}


/* ============================================================================
   Modern-touch pass
   Appended, so it wins the cascade without needing a hundred more !importants.
   ========================================================================== */

/* ---- one stroke weight for the whole icon set ------------------------------

   The set was using FOURTEEN different stroke widths — 1, 1.6, 1.8, 1.9, 2, 2.2,
   2.3, 2.4, 2.5, 2.6, 2.8, 3, 3.4 — so icons sitting side by side rendered at
   visibly different weights and read as though they had been pulled from different
   sets. Most declared none at all and so fell back to the SVG default of 1, thinner
   than anything drawn next to them.

   A presentation attribute loses to ANY author CSS rule, so this single declaration
   settles every one of them at once, whichever file emitted the icon. Scoped to the
   24 grid: the donut chart's ring is 19 on a 128 grid and is deliberately left alone.
   Add data-thick to opt an icon out. */
svg[viewBox="0 0 24 24"]:not([data-thick]) {
  stroke-width: 2;
}

/* ---- tapping that feels native -------------------------------------------- */

* {
  /* the translucent grey flash the browser paints over every tap */
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
.ico-btn,
.nav-item,
select,
input[type="date"] {
  touch-action: manipulation;   /* drops the double-tap-to-zoom delay */
}

/* 18 controls sat at 30-39px, under the 44px a thumb hits reliably. The icon
   inside stops swallowing the tap so the whole target responds. */
.ico-btn {
  min-width: 44px;
  min-height: 44px;
}
.ico-btn svg {
  pointer-events: none;
}

/* ---- a focus ring that is visible without being ugly ---------------------- */

:focus-visible {
  outline: 2px solid var(--g-gold-500, #C5A028);
  outline-offset: 2px;
  border-radius: 8px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- full height without the browser-chrome trap --------------------------
   31 uses of 100vh let content slide under the mobile toolbar, because 100vh
   counts the chrome. dvh is measured against the visible area. The vh line stays
   first as the fallback for older WebViews, which ignore the second. */
html,
body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- scroll containment ---------------------------------------------------
   Stops a scroll inside a panel from dragging the page behind it, which is what
   makes a WebView feel loose.

   A table is deliberately NOT in this list. `.table-wrap` is a clipping box, not
   a scroll viewport (it has no height of its own — the rows give it its height),
   and `overscroll-behavior: contain` on such a box latches the wheel to it: the
   gesture can never chain up to `.view`, which is the element that actually
   scrolls. That is what made every list feel frozen under the pointer. */
.modal,
.modal-back,
.fs-overlay {
  overscroll-behavior: contain;
}

/* ---- glass off below tablet ------------------------------------------------
   191 backdrop-filter declarations is a great deal of GPU for a mid-range Android
   and is the main cause of scroll jank inside the APK's WebView. Under 1024px the
   surface keeps its tint and loses only the blur. The !important is a deliberate
   force to beat inline declarations in the legacy sheets — the real fix is deleting
   those at source, at which point this block can drop it. */
@media (max-width: 1023px) {
  [class*="glass"],
  .toolbar,
  .modal-back,
  .fs-success-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}