/* =========================================================
   GLOBAL FONT STANDARDIZATION: ARIAL
   Applies Arial as the official font style to the whole system.
   Uses Helvetica/sans-serif only as fallback fonts.
   ========================================================= */
:root{
  --system-font: Arial, Helvetica, sans-serif;
}

html, body, button, input, select, textarea, table, th, td, a, p, span, label, small, div, section, aside, main, header, footer, nav{
  font-family: var(--system-font) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title, .scanner-title, .brand-title, .card-title, .section-title, .stat-title, .login-title{
  font-family: var(--system-font) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
}

button, .btn, .nav-link, .badge, .status-pill, .stat-label{
  font-family: var(--system-font) !important;
  font-weight: 700;
}

input, select, textarea{
  font-family: var(--system-font) !important;
  font-weight: 500;
}

table, th, td{
  font-family: var(--system-font) !important;
}

th{
  font-weight: 700;
  letter-spacing: 0.01em;
}

td{
  font-weight: 500;
}

/* =========================================================
   QR Library Attendance System
   Full Blue + Yellow Material Design Theme
   Applies to login, scanner, admin dashboard, forms, tables.
   ========================================================= */
:root{
  --primary:#0d47a1;
  --primary-2:#1565c0;
  --primary-3:#1e88e5;
  --primary-dark:#061a38;
  --primary-deep:#020b1f;
  --accent:#ffc107;
  --accent-2:#ffca28;
  --accent-dark:#ffb300;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --surface:#ffffff;
  --surface-soft:#f4f8ff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe7ff;
  --shadow:0 18px 45px rgba(4,18,48,.16);
  --shadow-heavy:0 28px 80px rgba(1,10,35,.32);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--system-font);
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,193,7,.16), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(30,136,229,.16), transparent 28%),
    linear-gradient(135deg,#eef5ff 0%, #f8fbff 48%, #fff9df 100%);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

/* ---------- Common Controls ---------- */
.input,select,textarea,.login-form input,.login-form select{
  width:100%;
  min-height:46px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#fff;
  color:var(--text);
  outline:none;
  font-size:15px;
  transition:.2s ease;
}
.input:focus,select:focus,textarea:focus,.login-form input:focus{
  border-color:var(--primary-3);
  box-shadow:0 0 0 4px rgba(30,136,229,.15);
}
label{font-weight:800;color:#1e293b;display:block;margin-bottom:7px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:12px 18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#09204a;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(255,193,7,.25);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn.secondary{background:#e8f1ff;color:var(--primary);box-shadow:none;border:1px solid #cfe0ff}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 10px 24px rgba(239,68,68,.22)}
.btn.small{padding:8px 12px;min-height:36px;border-radius:10px;font-size:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.alert{padding:13px 15px;border-radius:16px;margin:12px 0;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.alert.success,.success{background:#ecfdf5;color:#065f46;border-color:#bbf7d0}

/* ---------- Admin Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:270px;
  position:fixed;
  inset:0 auto 0 0;
  padding:24px 20px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,193,7,.22), transparent 25%),
    linear-gradient(180deg,#071f55 0%, #082a6c 52%, #061a38 100%);
  box-shadow:12px 0 34px rgba(6,26,56,.22);
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:13px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand .logo{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  color:var(--accent);font-size:28px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,193,7,.45);
}
.brand strong{display:block;font-size:18px}.brand span{display:block;color:#cfe0ff;font-size:13px;margin-top:2px}
.sidebar nav{display:grid;gap:8px}
.sidebar a{
  padding:13px 15px;
  border-radius:15px;
  color:#eaf2ff;
  font-weight:800;
  display:flex;
  align-items:center;
  transition:.2s ease;
}
.sidebar a:hover{
  color:#071f55;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transform:translateX(3px);
  box-shadow:0 12px 25px rgba(255,193,7,.18);
}
.userbox{
  margin-top:22px;
  padding:15px;
  border-radius:18px;
  color:#dbeafe;
  font-size:13px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
}
.userbox b{color:#fff}.userbox small{color:var(--accent)}
.main{margin-left:270px;width:calc(100% - 270px);padding:30px}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  padding:22px 24px;
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,193,7,.22), transparent 30%),
    linear-gradient(135deg,#082a6c,#0d47a1 56%, #1565c0);
  box-shadow:var(--shadow);
}
.topbar h1{margin:0;font-size:30px;letter-spacing:-.4px}.topbar p{margin:5px 0 0;color:#dbeafe}
.cards{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px}
.card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(13,71,161,.10);
  border-radius:var(--radius);
  padding:21px;
  box-shadow:var(--shadow);
}
.card h2,.card h3{margin-top:0;color:#082a6c}.stat{position:relative;overflow:hidden}.stat::before{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,193,7,.18)}
.stat b{font-size:38px;line-height:1;display:block;color:var(--primary);margin-top:10px}.stat span{color:var(--muted);font-weight:800}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid #e3edff}
.table{width:100%;border-collapse:collapse;background:#fff;overflow:hidden}
.table th,.table td{padding:13px 14px;border-bottom:1px solid #edf2ff;text-align:left;white-space:nowrap}
.table th{background:linear-gradient(180deg,#edf5ff,#e5efff);color:#082a6c;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.table tr:hover td{background:#fffbea}.badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#e8f5e9;color:#15803d;font-weight:900;font-size:12px}.badge.out{background:#e8f1ff;color:#0d47a1}.badge.disabled{background:#fee2e2;color:#b91c1c}
.photo{width:54px;height:54px;border-radius:14px;object-fit:cover;background:#e5e7eb}.qr-svg svg{width:120px;height:120px}

/* ---------- Scanner Page: Blue + Yellow Material Design ---------- */
.scanner-page{
  min-height:100vh;
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:34px;
  padding:118px 54px 42px;
  background:
    linear-gradient(rgba(3,15,42,.88), rgba(3,15,42,.92)),
    radial-gradient(circle at 78% 18%, rgba(255,193,7,.16), transparent 28%),
    radial-gradient(circle at 18% 14%, rgba(30,136,229,.28), transparent 28%),
    linear-gradient(135deg,#020b1f 0%, #071f55 48%, #0d47a1 100%);
  position:relative;
  overflow-x:hidden;
}
.scanner-page::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.32;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(circle at 72% 40%, rgba(255,193,7,.18), transparent 22%);
  background-size:48px 48px,48px 48px,auto;
}
.scanner-page::after{
  content:"";
  position:fixed;left:0;bottom:0;width:270px;height:70%;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(90deg, rgba(30,136,229,.35) 0 16px, transparent 16px 28px);
  clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);
}
.scanner-topnav{
  position:fixed;left:0;right:0;top:0;z-index:5;
  height:82px;padding:0 54px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,15,42,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(30,136,229,.35);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
}
.scanner-brand{display:flex;align-items:center;gap:16px;font-size:26px;font-weight:950;letter-spacing:-.4px}.scanner-brand .book{font-size:35px;color:var(--accent);filter:drop-shadow(0 0 12px rgba(255,193,7,.28))}
.scanner-user{display:flex;align-items:center;gap:22px;color:#eef6ff;font-weight:800}.online-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(13,71,161,.35);border:1px solid rgba(100,181,246,.40)}.online-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e}.avatar-dot{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#061a38;font-weight:950}
.scanner-hero{position:relative;z-index:1;padding:0;display:flex;flex-direction:column;justify-content:flex-start;max-width:980px}.scanner-heading{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:center;margin:34px 0 26px}.scanner-icon{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,#0d47a1,#07307b);border:1px solid rgba(100,181,246,.45);box-shadow:0 20px 45px rgba(0,0,0,.26)}.scanner-title h1{margin:0;font-size:35px;letter-spacing:-.5px}.yellow-line{display:block;width:62px;height:4px;background:var(--accent);border-radius:999px;margin:12px 0 10px}.scanner-title p{margin:0;color:#e0edff;line-height:1.6;font-size:16px}
.video-wrap{position:relative;border-radius:28px;background:linear-gradient(145deg,#020712,#061021);border:1px solid rgba(180,205,255,.50);box-shadow:0 0 0 1px rgba(255,193,7,.12), inset 0 0 80px rgba(13,71,161,.22), 0 24px 58px rgba(0,0,0,.35);overflow:hidden;min-height:410px}.video-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 18%);pointer-events:none}.camera-status{position:absolute;left:24px;top:22px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(7,31,85,.85);border:1px solid rgba(100,181,246,.35);font-weight:900}.camera-status .yellow-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.camera-status b{color:var(--accent)}
#video{width:100%;height:100%;min-height:410px;display:block;object-fit:cover;background:#030712;border:0;border-radius:0}.center-camera{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:58px;color:rgba(219,234,254,.36);filter:drop-shadow(0 0 30px rgba(255,255,255,.08));pointer-events:none}.scan-corner{position:absolute;width:70px;height:70px;z-index:2}.scan-corner.top-left{left:28%;top:20%;border-left:4px solid var(--accent);border-top:4px solid var(--accent);border-radius:12px 0 0 0}.scan-corner.top-right{right:28%;top:20%;border-right:4px solid var(--accent);border-top:4px solid var(--accent);border-radius:0 12px 0 0}.scan-corner.bottom-left{left:28%;bottom:20%;border-left:4px solid var(--accent);border-bottom:4px solid var(--accent);border-radius:0 0 0 12px}.scan-corner.bottom-right{right:28%;bottom:20%;border-right:4px solid var(--accent);border-bottom:4px solid var(--accent);border-radius:0 0 12px 0}.scanner-note{margin-top:22px;display:flex;align-items:center;gap:20px;padding:21px 24px;border-radius:20px;background:rgba(13,71,161,.35);border:1px solid rgba(100,181,246,.36);color:#eaf2ff;box-shadow:0 15px 32px rgba(0,0,0,.17)}.scanner-note .info{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:3px solid #64b5f6;color:#64b5f6;font-weight:950;font-size:22px}.scanner-note .wifi{margin-left:auto;color:var(--accent);font-size:32px}
.scanner-box{position:relative;z-index:1;margin:0;padding:32px;border-radius:30px;color:#fff;background:linear-gradient(160deg,rgba(10,42,108,.92),rgba(5,22,62,.96));border:1px solid rgba(180,205,255,.28);box-shadow:var(--shadow-heavy);align-self:start;min-height:620px}.scanner-box h2{margin:0 0 10px;font-size:25px;line-height:1.3}.panel-title{display:flex;align-items:center;gap:16px;margin-bottom:26px}.panel-title .panel-logo{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#0d47a1,#1e88e5);border:1px solid rgba(255,255,255,.18);font-size:30px}.panel-title .accent-line{width:54px;height:4px;border-radius:999px;background:var(--accent);display:block;margin-top:10px}.scanner-box label{color:#fff;font-size:16px}.manual-input-wrap{display:flex;align-items:center;gap:12px;margin-top:8px;border:1px solid rgba(180,205,255,.30);border-radius:16px;background:rgba(255,255,255,.07);padding:0 15px}.manual-input-wrap span{opacity:.75;font-size:20px}.scanner-box .input{height:54px;background:transparent;border:0;color:#fff;padding-left:0;box-shadow:none}.scanner-box .input::placeholder{color:#9fb6dd}.scanner-box .input:focus{box-shadow:none}.scan-result{font-size:16px;font-weight:800;margin:22px 0;padding:20px;border-radius:18px;color:#fff;background:rgba(255,193,7,.14);border:1px solid rgba(255,193,7,.50);border-left:5px solid var(--accent);line-height:1.45}.scanner-box .actions{display:grid;grid-template-columns:1fr 150px;margin:18px 0 26px}.scanner-box .btn.secondary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#061a38;border:0;box-shadow:0 12px 26px rgba(255,193,7,.22)}.scanner-box .btn.danger{background:rgba(255,255,255,.05);border:1px solid var(--accent);color:var(--accent);box-shadow:none}.scanner-box h3{padding-top:22px;margin:0 0 16px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:10px;font-size:21px}.scanner-box h3::before{content:"◷";color:var(--accent)}.scan-log{max-height:250px;overflow:auto;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(180,205,255,.15);padding:14px;min-height:135px;color:#dbeafe}.scan-log:empty::before{content:"No scans yet\ARecent scan history will appear here.";white-space:pre;display:grid;place-items:center;text-align:center;min-height:105px;color:#b7c7e7;font-weight:800;line-height:1.8}.scan-log div{padding:11px 12px;border-radius:13px;background:rgba(255,255,255,.07);margin-bottom:8px}

/* ---------- Login Page: Blue + Yellow Material ---------- */
.login-bg{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#061a38,#0d47a1)}
.login-card{width:min(980px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-heavy)}
.login-art{padding:48px;color:#fff;background:linear-gradient(135deg,#071f55,#1565c0);position:relative}.login-art h1{font-size:42px;margin:15px 0}.login-art p{line-height:1.7}.chip{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:10px 14px;border-radius:999px}.login-form{padding:44px}
.login-blue-yellow{min-height:100vh;color:#fff;overflow-x:hidden;background:radial-gradient(circle at 12% 18%, rgba(255,193,7,.28), transparent 24%),radial-gradient(circle at 90% 20%, rgba(30,136,229,.32), transparent 25%),linear-gradient(135deg,#061a38 0%,#0d47a1 48%,#1565c0 100%)}.login-blue-yellow::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%)}.login-shell{width:min(1440px,100%);margin:0 auto;padding:24px clamp(16px,3vw,42px) 40px;position:relative;z-index:1}.login-topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 18px;border-bottom:1px solid rgba(255,255,255,.18)}.login-brand{display:flex;align-items:center;gap:14px;color:#fff}.brand-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:25px;color:var(--accent);background:rgba(255,255,255,.10);border:1px solid rgba(255,193,7,.40);box-shadow:0 0 35px rgba(255,193,7,.18)}.login-brand strong{display:block;font-size:21px;letter-spacing:.2px}.login-brand small{display:block;color:#cfe5ff;margin-top:3px}.login-status{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.20);font-weight:800}.login-status span{width:10px;height:10px;background:#37e28b;border-radius:50%;box-shadow:0 0 12px #37e28b}.login-dashboard-card{display:grid;grid-template-columns:minmax(0,1.25fr) 430px;gap:34px;align-items:stretch;margin-top:38px}.login-visual-panel,.login-panel-card{border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.06));box-shadow:0 30px 90px rgba(0,0,0,.26);backdrop-filter:blur(18px);border-radius:34px}.login-visual-panel{padding:44px;position:relative;overflow:hidden;min-height:690px}.login-visual-panel::after{content:"";position:absolute;right:-90px;top:120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,193,7,.14),transparent 68%);border:1px solid rgba(255,193,7,.14)}.scanner-icon-card{width:74px;height:74px;border-radius:23px;display:grid;place-items:center;font-size:37px;color:var(--accent);background:linear-gradient(145deg,rgba(255,193,7,.16),rgba(255,255,255,.06));border:1px solid rgba(255,193,7,.38);box-shadow:0 18px 45px rgba(0,0,0,.24)}.eyebrow{margin:26px 0 10px;color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:13px}.login-visual-panel h1{max-width:720px;margin:0;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-1.5px}.hero-copy{max-width:690px;margin:20px 0 30px;color:#dcebff;font-size:18px;line-height:1.75}.login-preview-window{height:315px;border-radius:28px;background:linear-gradient(145deg,rgba(3,10,23,.98),rgba(3,20,39,.92));border:2px solid rgba(255,193,7,.90);position:relative;box-shadow:0 0 0 7px rgba(255,193,7,.08),inset 0 0 55px rgba(30,136,229,.18)}.preview-pulse{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,193,7,.22),transparent 60%);animation:loginPulse 2.2s infinite}.camera-pill{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);font-weight:800}.camera-pill b{display:inline-block;width:9px;height:9px;border-radius:50%;background:#23e889}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.feature-row div{padding:18px;border-radius:20px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)}.feature-row b{display:block;color:var(--accent);font-size:18px}.feature-row span{display:block;color:#cfe5ff;margin-top:5px;font-size:13px}.login-panel-card{padding:34px;align-self:stretch}.login-panel-header{display:flex;gap:16px;align-items:center;margin-bottom:28px}.login-logo-circle{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#08224b;font-size:32px;box-shadow:0 18px 45px rgba(255,193,7,.25)}.login-panel-header h2{margin:0;font-size:32px}.login-panel-header p{margin:7px 0 0;color:#d4e8ff}.material-login-form label{display:block;margin:18px 0 9px;font-weight:900;color:#fff}.material-input{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);border-radius:18px;padding:0 14px;transition:.2s}.material-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 5px rgba(255,193,7,.16);background:rgba(255,255,255,.16)}.material-input span{font-size:18px;opacity:.95}.material-input input{width:100%;height:55px;border:0;outline:0;background:transparent;color:#fff;font-size:16px}.material-input input::placeholder{color:#bdd8f7}.material-login-btn{width:100%;height:58px;margin-top:24px;border:0;border-radius:18px;cursor:pointer;font-weight:950;font-size:16px;color:#08224b;background:linear-gradient(135deg,var(--accent),var(--accent-dark));box-shadow:0 20px 42px rgba(255,193,7,.25);display:flex;align-items:center;justify-content:center;gap:10px}.material-login-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}.scanner-shortcut{margin-top:14px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;background:rgba(255,255,255,.08)}.default-accounts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}.default-accounts div{padding:14px 16px;border-radius:17px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13)}.default-accounts small{display:block;color:#cfe5ff}.default-accounts strong{display:block;margin-top:5px;color:var(--accent)}.login-alert{background:rgba(255,193,7,.14);border:1px solid rgba(255,193,7,.35);color:#fff7c0}@keyframes loginPulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.75)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.25)}}

/* ---------- Responsive / Print ---------- */
@media(max-width:1100px){.scanner-page{grid-template-columns:1fr;padding:110px 22px 32px}.scanner-box{min-height:auto}.scanner-topnav{padding:0 22px}.scanner-box .actions{grid-template-columns:1fr 1fr}.cards{grid-template-columns:repeat(2,1fr)}.login-dashboard-card{grid-template-columns:1fr}.login-panel-card{order:-1}.login-visual-panel{min-height:auto}.login-preview-window{height:260px}}
@media(max-width:760px){.sidebar{position:static;width:100%;height:auto}.layout{display:block}.main{margin:0;width:100%;padding:16px}.topbar{display:block}.cards,.grid2,.form-grid{grid-template-columns:1fr}.scanner-topnav{height:auto;position:relative;padding:18px 20px;gap:15px;align-items:flex-start;flex-direction:column}.scanner-page{display:block;padding:18px}.scanner-heading{grid-template-columns:1fr}.scanner-user{gap:10px;flex-wrap:wrap}.video-wrap,#video{min-height:280px}.scan-corner.top-left{left:12%;top:18%}.scan-corner.top-right{right:12%;top:18%}.scan-corner.bottom-left{left:12%;bottom:18%}.scan-corner.bottom-right{right:12%;bottom:18%}.scanner-box{margin-top:22px}.scanner-box .actions{grid-template-columns:1fr}.login-topbar{height:auto;gap:18px;align-items:flex-start;flex-direction:column}.login-dashboard-card{margin-top:24px}.login-visual-panel,.login-panel-card{padding:24px;border-radius:26px}.feature-row{grid-template-columns:1fr}.login-preview-window{height:220px}.login-brand strong{font-size:18px}}
@media print{.sidebar,.topbar,.actions,.btn{display:none!important}.main{margin:0;width:100%;padding:0}.card{box-shadow:none;border:0}.table th,.table td{font-size:12px}}

/* =========================================================
   FINAL BLUE + GOLD MATERIAL THEME OVERRIDE
   Use this section to match the clean dashboard scanner design.
   Applies to the full scanner page and improves common system colors.
   ========================================================= */
:root{
  --bg-950:#020817;
  --bg-900:#06142f;
  --bg-850:#071b3d;
  --bg-800:#09265a;
  --blue-700:#0b4dbb;
  --blue-600:#1475df;
  --blue-500:#1e90ff;
  --blue-soft:#dbeafe;
  --gold-500:#ffc21a;
  --gold-600:#f5a400;
  --gold-soft:#fff2b8;
  --white:#ffffff;
  --glass-border:rgba(137,180,255,.22);
  --glass:rgba(15,47,105,.48);
}

body.scanner-bluegold{
  min-height:100vh !important;
  color:var(--white) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 500px !important;
  gap:44px !important;
  padding:126px 58px 48px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(30,144,255,.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,194,26,.11), transparent 24%),
    linear-gradient(135deg,#020817 0%,#061a3a 45%,#082b68 100%) !important;
  overflow-x:hidden !important;
}
body.scanner-bluegold::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 74% 48%,rgba(255,194,26,.12),transparent 24%);
  background-size:56px 56px,56px 56px,auto;
}
body.scanner-bluegold::after{
  display:none !important;
}

/* Scanner top navigation */
.scanner-bluegold .scanner-topnav{
  height:88px !important;
  padding:0 42px !important;
  background:rgba(3,16,42,.88) !important;
  backdrop-filter:blur(20px) !important;
  border-bottom:1px solid rgba(92,150,255,.22) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.28) !important;
}
.scanner-bluegold .scanner-brand{
  color:#fff !important;
  font-size:24px !important;
  font-weight:900 !important;
  letter-spacing:-.35px !important;
}
.scanner-bluegold .scanner-brand .book{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  font-size:34px !important;
  color:var(--gold-500) !important;
  text-shadow:0 0 22px rgba(255,194,26,.25);
}
.scanner-bluegold .scanner-user{
  gap:18px !important;
  color:#f5f9ff !important;
}
.scanner-bluegold .scanner-divider{
  height:34px;
  width:1px;
  background:rgba(219,234,254,.20);
}
.scanner-bluegold .online-pill{
  padding:10px 18px !important;
  background:rgba(11,41,90,.70) !important;
  border:1px solid rgba(97,165,255,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.scanner-bluegold .avatar-dot{
  width:48px !important;
  height:48px !important;
  background:transparent !important;
  border:3px solid var(--gold-500) !important;
  color:var(--gold-500) !important;
  font-size:23px !important;
}
.scanner-bluegold .welcome-text{
  line-height:1.15;
  color:#f7fbff;
}
.scanner-bluegold .welcome-text b{
  font-size:22px;
}
.scanner-bluegold .chevron{
  font-size:22px;
  opacity:.9;
}

/* Main left scanner section */
.scanner-bluegold .scanner-hero{
  max-width:none !important;
  padding-top:0 !important;
}
.scanner-bluegold .scanner-heading{
  grid-template-columns:104px 1fr !important;
  gap:26px !important;
  margin:18px 0 30px !important;
}
.scanner-bluegold .scanner-icon{
  width:104px !important;
  height:104px !important;
  border-radius:27px !important;
  font-size:52px !important;
  color:var(--gold-500) !important;
  background:linear-gradient(145deg,#0a367f,#06306f) !important;
  border:1px solid rgba(37,126,255,.48) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.scanner-bluegold .scanner-title h1{
  margin:0 0 12px !important;
  font-size:clamp(32px,3.2vw,46px) !important;
  font-weight:950 !important;
  letter-spacing:-.9px !important;
  color:#fff !important;
}
.scanner-bluegold .yellow-line{display:none !important;}
.scanner-bluegold .scanner-title p{
  max-width:740px;
  margin:0 !important;
  color:#dbe8ff !important;
  font-size:18px !important;
  line-height:1.55 !important;
}

/* Camera / scan area */
.scanner-bluegold .video-wrap{
  min-height:490px !important;
  height:clamp(430px,52vh,560px) !important;
  border-radius:26px !important;
  background:linear-gradient(135deg,#020714,#061326 72%,#071a34) !important;
  border:2px solid var(--blue-500) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 34px rgba(30,144,255,.20),
    inset 0 0 100px rgba(20,117,223,.12),
    0 30px 70px rgba(0,0,0,.30) !important;
  overflow:hidden !important;
}
.scanner-bluegold .video-wrap::before{
  background:radial-gradient(circle at 50% 50%, rgba(100,148,210,.10), transparent 22%) !important;
}
.scanner-bluegold #video{
  min-height:490px !important;
  height:100% !important;
  background:linear-gradient(135deg,#020714,#071224) !important;
}
.scanner-bluegold .camera-status{
  left:28px !important;
  top:28px !important;
  padding:11px 18px !important;
  border-radius:14px !important;
  color:#fff !important;
  background:rgba(10,38,86,.88) !important;
  border:1px solid rgba(84,145,255,.25) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
.scanner-bluegold .camera-symbol{color:var(--gold-500);font-size:17px;}
.scanner-bluegold .green-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2ee886;
  box-shadow:0 0 12px rgba(46,232,134,.8);
}
.scanner-bluegold .camera-status .yellow-dot{display:none !important;}
.scanner-bluegold .camera-status b{color:#fff !important;}
.scanner-bluegold .center-camera{
  font-size:62px !important;
  color:rgba(214,226,247,.35) !important;
}
.scanner-bluegold .scan-corner{
  width:56px !important;
  height:56px !important;
  border-color:var(--gold-500) !important;
  filter:drop-shadow(0 0 8px rgba(255,194,26,.35));
}
.scanner-bluegold .scan-corner.top-left{left:6% !important;top:20% !important;border-left:4px solid var(--gold-500) !important;border-top:4px solid var(--gold-500) !important;}
.scanner-bluegold .scan-corner.top-right{right:6% !important;top:20% !important;border-right:4px solid var(--gold-500) !important;border-top:4px solid var(--gold-500) !important;}
.scanner-bluegold .scan-corner.bottom-left{left:6% !important;bottom:8% !important;border-left:4px solid var(--gold-500) !important;border-bottom:4px solid var(--gold-500) !important;}
.scanner-bluegold .scan-corner.bottom-right{right:6% !important;bottom:8% !important;border-right:4px solid var(--gold-500) !important;border-bottom:4px solid var(--gold-500) !important;}

/* Info strip */
.scanner-bluegold .scanner-note{
  margin-top:30px !important;
  padding:22px 28px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(13,62,137,.66),rgba(8,38,87,.58)) !important;
  border:1px solid rgba(91,151,255,.26) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.18) !important;
  color:#d9e7ff !important;
}
.scanner-bluegold .scanner-note .info{
  width:52px !important;
  height:52px !important;
  flex:0 0 52px;
  border:0 !important;
  background:linear-gradient(135deg,var(--blue-500),#0b57ce) !important;
  color:#fff !important;
  font-size:28px !important;
  box-shadow:0 12px 24px rgba(30,144,255,.25);
}
.scanner-bluegold .scanner-note strong{color:#fff;font-size:18px;}
.scanner-bluegold .scanner-note .wifi{display:none !important;}

/* Right scanner card */
.scanner-bluegold .scanner-box{
  min-height:690px !important;
  padding:36px !important;
  border-radius:30px !important;
  background:linear-gradient(160deg,rgba(12,44,98,.92),rgba(6,24,59,.96)) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:0 30px 82px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  align-self:start !important;
}
.scanner-bluegold .panel-title{
  margin-bottom:30px !important;
}
.scanner-bluegold .compact-title h2,
.scanner-bluegold .scanner-box h2{
  margin:0 !important;
  color:#fff !important;
  font-size:29px !important;
  line-height:1.25 !important;
  font-weight:950 !important;
  letter-spacing:-.45px;
}
.scanner-bluegold .accent-line{
  position:relative;
  width:100% !important;
  height:3px !important;
  margin-top:18px !important;
  background:linear-gradient(90deg,var(--gold-500),rgba(255,194,26,.22)) !important;
}
.scanner-bluegold .accent-line::after{
  content:"";
  position:absolute;
  left:24%;
  top:50%;
  transform:translateY(-50%);
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 0 14px var(--gold-500);
}
.scanner-bluegold .scanner-box label{
  margin-bottom:12px !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
}
.scanner-bluegold .manual-input-wrap{
  height:58px !important;
  border-radius:17px !important;
  background:rgba(8,29,72,.66) !important;
  border:1px solid var(--blue-500) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.scanner-bluegold .manual-input-wrap span{
  color:#d7e8ff !important;
  opacity:.9 !important;
  font-size:24px !important;
}
.scanner-bluegold .scanner-box .input{
  color:#fff !important;
  font-size:18px !important;
  height:58px !important;
}
.scanner-bluegold .scanner-box .input::placeholder{color:#93a9cc !important;}
.scanner-bluegold .manual-input-wrap:focus-within{
  border-color:var(--gold-500) !important;
  box-shadow:0 0 0 4px rgba(255,194,26,.12) !important;
}
.scanner-bluegold .scan-result{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:22px 0 24px !important;
  padding:20px 22px !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,rgba(83,68,43,.72),rgba(47,42,46,.72)) !important;
  border:1px solid rgba(255,194,26,.50) !important;
  border-left:4px solid var(--gold-500) !important;
  color:#fff !important;
  font-size:17px !important;
  font-weight:800 !important;
}
.scanner-bluegold .scan-result .warn-icon{
  color:var(--gold-500);
  font-size:32px;
  line-height:1;
}
.scanner-bluegold .scan-result span{color:#dfe8f8;font-weight:500;}
.scanner-bluegold .scanner-actions,
.scanner-bluegold .scanner-box .actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  margin:22px 0 30px !important;
}
.scanner-bluegold .admin-btn,
.scanner-bluegold .scanner-box .btn.secondary{
  width:100% !important;
  min-height:58px !important;
  border-radius:17px !important;
  color:#06142f !important;
  background:linear-gradient(135deg,#ffd45a,#ffb21a) !important;
  border:0 !important;
  font-size:19px !important;
  font-weight:950 !important;
  box-shadow:0 18px 34px rgba(255,178,26,.25) !important;
}
.scanner-bluegold .logout-btn,
.scanner-bluegold .scanner-box .btn.danger{
  width:100% !important;
  min-height:58px !important;
  border-radius:17px !important;
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(137,180,255,.30) !important;
  font-size:19px !important;
  font-weight:950 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.scanner-bluegold .scanner-box h3{
  padding-top:24px !important;
  margin:0 0 18px !important;
  border-top:1px solid rgba(137,180,255,.18) !important;
  color:#fff !important;
  font-size:22px !important;
  font-weight:950 !important;
}
.scanner-bluegold .scanner-box h3::before{
  content:"◷" !important;
  color:var(--gold-500) !important;
  font-size:26px;
}
.scanner-bluegold .scanner-box h3::after{
  content:"";
  height:1px;
  flex:1;
  margin-left:10px;
  background:linear-gradient(90deg,rgba(255,194,26,.55),transparent);
}
.scanner-bluegold .scan-log{
  min-height:174px !important;
  max-height:260px !important;
  padding:16px !important;
  border-radius:17px !important;
  color:#dce9ff !important;
  background:rgba(7,28,70,.58) !important;
  border:1px solid rgba(137,180,255,.16) !important;
  box-shadow:inset 0 0 38px rgba(30,144,255,.05) !important;
}
.scanner-bluegold .scan-log:empty::before{
  content:"📄\A No recent scans yet.\A Scans will appear here." !important;
  white-space:pre !important;
  min-height:142px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  color:#aebfe0 !important;
  font-weight:700 !important;
  line-height:1.75 !important;
}
.scanner-bluegold .scan-log .alert{
  margin:0 0 10px !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(137,180,255,.18) !important;
}
.scanner-bluegold .scan-log .alert.success{
  background:rgba(34,197,94,.12) !important;
  color:#d7ffe8 !important;
  border-color:rgba(34,197,94,.30) !important;
}

/* Apply cleaner blue/gold color language to admin pages too */
.sidebar{
  background:linear-gradient(180deg,#06142f 0%,#08265a 55%,#020817 100%) !important;
}
.sidebar a:hover,
.sidebar a.active{
  background:linear-gradient(135deg,#ffd45a,#ffb21a) !important;
  color:#06142f !important;
}
.topbar{
  background:linear-gradient(135deg,#06142f,#0b3478 58%,#0d47a1) !important;
}
.card{
  border-color:rgba(11,77,187,.12) !important;
  box-shadow:0 18px 44px rgba(6,20,47,.12) !important;
}
.card h2,.card h3,.table th{color:#08265a !important;}
.btn:not(.danger):not(.secondary){
  background:linear-gradient(135deg,#ffd45a,#ffb21a) !important;
  color:#06142f !important;
}
.btn.secondary{
  background:#e9f2ff !important;
  color:#0b4dbb !important;
  border:1px solid #bdd7ff !important;
}

@media(max-width:1180px){
  body.scanner-bluegold{
    grid-template-columns:1fr !important;
    padding:116px 24px 36px !important;
  }
  .scanner-bluegold .scanner-box{min-height:auto !important;}
}
@media(max-width:760px){
  body.scanner-bluegold{
    display:block !important;
    padding:18px !important;
  }
  .scanner-bluegold .scanner-topnav{
    position:relative !important;
    height:auto !important;
    padding:18px !important;
    border-radius:22px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }
  .scanner-bluegold .scanner-heading{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin:26px 0 22px !important;
  }
  .scanner-bluegold .video-wrap,
  .scanner-bluegold #video{
    min-height:320px !important;
    height:320px !important;
  }
  .scanner-bluegold .scanner-box{
    margin-top:24px !important;
    padding:24px !important;
  }
  .scanner-bluegold .scanner-title h1{font-size:32px !important;}
  .scanner-bluegold .scanner-title p{font-size:15px !important;}
}


/* Scanner page cleanup: icon-only top header and no Admin Dashboard button */
.scanner-bluegold .scanner-brand-icon-only {
    width: 54px;
    justify-content: center;
    gap: 0;
}
.scanner-bluegold .scanner-brand-icon-only .book {
    margin-right: 0;
}
.scanner-bluegold .scanner-actions-single {
    display: block;
}
.scanner-bluegold .scanner-actions-single .logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
}

/* =========================================================
   FINAL FULL SCANNER DASHBOARD THEME
   Dark Blue + Yellow/Gold Material Design
   Used for the full scanner page and matching system colors.
   ========================================================= */
:root{
  --blue-950:#020817;
  --blue-925:#031024;
  --blue-900:#061a38;
  --blue-850:#08224b;
  --blue-800:#0a2d63;
  --blue-700:#0d47a1;
  --blue-500:#0d8bff;
  --gold:#ffc107;
  --gold-2:#ffcf33;
  --cyan:#22d3ee;
  --green:#22c55e;
  --pink:#ec4899;
  --red:#ef4444;
  --white:#ffffff;
  --slate:#b9c8df;
  --line:rgba(30,144,255,.38);
  --glass:rgba(8,34,75,.68);
  --glass-2:rgba(6,26,56,.88);
}

body.scanner-dashboard-theme{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:#fff;
  font-family:var(--system-font);
  background:
    radial-gradient(circle at 22% 15%, rgba(13,71,161,.35), transparent 30%),
    radial-gradient(circle at 80% 55%, rgba(0,137,255,.13), transparent 34%),
    linear-gradient(135deg,var(--blue-950),var(--blue-900) 42%,#031b3b 100%);
}
body.scanner-dashboard-theme::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 40%, black, transparent 74%);
}
body.scanner-dashboard-theme.no-top-header{
  display:block;
  padding:20px;
}
.scanner-dashboard-theme .scanner-topnav{display:none!important;}
.scanner-shell{
  width:min(1880px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:480px minmax(0,1fr);
  gap:22px;
  min-height:calc(100vh - 40px);
}
.scan-panel,.attendance-panel{
  position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(10,45,99,.52),rgba(3,16,36,.88)),
    radial-gradient(circle at 40% 10%, rgba(13,139,255,.16), transparent 45%);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
}
.scan-panel{
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.scan-panel-head{
  display:flex;
  align-items:center;
  gap:18px;
}
.brand-icon-grid{
  width:74px;height:74px;border-radius:14px;
  display:grid;place-items:center;
  color:var(--gold);
  font-size:42px;font-weight:900;line-height:1;
  background:linear-gradient(145deg,#073b8f,#08265a);
  border:1px solid rgba(13,139,255,.55);
  box-shadow:0 12px 32px rgba(13,139,255,.18);
}
.scan-panel-head h1{margin:0;color:#fff;font-size:29px;letter-spacing:-.5px;line-height:1.08;font-weight:950;}
.scan-panel-head p{margin:8px 0 0;color:#d4e2f7;font-size:16px;}
.camera-pill{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background:linear-gradient(180deg,rgba(13,71,161,.55),rgba(8,34,75,.88));
  border:1px solid rgba(13,139,255,.42);
  box-shadow:0 10px 28px rgba(0,0,0,.22), inset 0 0 30px rgba(13,139,255,.08);
}
.camera-pill i{width:11px;height:11px;background:#21e687;border-radius:50%;box-shadow:0 0 18px rgba(33,230,135,.95);}
.camera-frame{
  position:relative;
  height:470px;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(67,91,132,.20), transparent 18%),
    linear-gradient(145deg,#020815,#061326 65%,#031021);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 85px rgba(13,139,255,.09),0 18px 38px rgba(0,0,0,.26);
}
.camera-frame video{width:100%;height:100%;object-fit:cover;opacity:.75;}
.center-camera{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:52px;opacity:.42;filter:drop-shadow(0 0 28px rgba(13,139,255,.22));
}
.scan-corner{position:absolute;width:52px;height:52px;border-color:var(--gold);filter:drop-shadow(0 0 8px rgba(255,193,7,.72));}
.scan-corner.top-left{left:34px;top:34px;border-left:5px solid var(--gold);border-top:5px solid var(--gold);border-radius:10px 0 0 0;}
.scan-corner.top-right{right:34px;top:34px;border-right:5px solid var(--gold);border-top:5px solid var(--gold);border-radius:0 10px 0 0;}
.scan-corner.bottom-left{left:34px;bottom:34px;border-left:5px solid var(--gold);border-bottom:5px solid var(--gold);border-radius:0 0 0 10px;}
.scan-corner.bottom-right{right:34px;bottom:34px;border-right:5px solid var(--gold);border-bottom:5px solid var(--gold);border-radius:0 0 10px 0;}
.offline-note{
  margin-top:auto;
  display:flex;align-items:center;gap:20px;
  padding:25px 24px;
  border-radius:15px;
  color:#dce9fb;
  border:1px solid rgba(13,139,255,.32);
  background:linear-gradient(145deg,rgba(13,71,161,.34),rgba(8,34,75,.58));
}
.offline-note .info{
  width:48px;height:48px;flex:0 0 48px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;font-size:28px;font-weight:950;
  background:linear-gradient(135deg,#0d8bff,#0d47a1);
  box-shadow:0 12px 24px rgba(13,139,255,.25);
}
.offline-note strong{display:block;color:#fff;margin-bottom:6px;font-size:17px;}
.attendance-panel{
  padding:28px 28px 18px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.section-title-row h2,.entry-card h3,.live-update-card h3,.recent-card h3{
  display:flex;align-items:center;gap:12px;
  margin:0;color:#fff;font-size:24px;font-weight:950;letter-spacing:-.3px;
}
.section-title-row h2 span,.entry-card h3 span,.live-update-card h3 span,.recent-card h3 span{
  width:5px;height:28px;border-radius:8px;background:var(--gold);box-shadow:0 0 12px rgba(255,193,7,.58);
}
.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:15px;}
.metric-card{
  min-height:180px;
  padding:20px;
  border-radius:14px;
  display:flex;align-items:flex-start;gap:16px;
  background:linear-gradient(160deg,rgba(10,45,99,.74),rgba(5,22,50,.76));
  border:1px solid rgba(13,139,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 35px rgba(0,0,0,.18);
}
.metric-icon{
  width:66px;height:66px;flex:0 0 66px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:34px;
  background:rgba(13,139,255,.18);
  border:2px solid #0d8bff;
  box-shadow:0 0 28px rgba(13,139,255,.18);
}
.metric-card.female .metric-icon{border-color:var(--pink);background:rgba(236,72,153,.18)}
.metric-card.visits .metric-icon{border-color:var(--gold);background:rgba(255,193,7,.16)}
.metric-card.patron .metric-icon{border-color:var(--green);background:rgba(34,197,94,.16)}
.metric-card.course .metric-icon{border-color:var(--cyan);background:rgba(34,211,238,.16)}
.metric-card h3{margin:0 0 10px;color:#fff;font-size:16px;font-weight:900;}
.metric-card strong{display:block;font-size:40px;line-height:1;color:#fff;font-weight:950;letter-spacing:-1px;margin-bottom:14px;}
.metric-card p{margin:0;color:#e3e9f5;font-size:15px;line-height:1.42;}
.metric-card.course p,.metric-card.patron p{font-size:14px;line-height:1.35;}
.entry-update-grid{display:grid;grid-template-columns:.9fr 1.35fr;gap:15px;}
.entry-card,.live-update-card,.recent-card{
  border:1px solid rgba(13,139,255,.32);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(7,31,68,.66),rgba(4,19,43,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.entry-card,.live-update-card{padding:18px;}
.entry-input-wrap{
  margin:18px 0 14px;
  height:58px;
  display:flex;align-items:center;gap:12px;
  padding:0 18px;
  border-radius:11px;
  background:rgba(2,8,23,.42);
  border:1px solid #0d8bff;
  box-shadow:0 0 0 3px rgba(13,139,255,.07);
}
.entry-input-wrap input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#fff;font-size:17px;}
.entry-input-wrap input::placeholder{color:#b9c8df;}
.entry-input-wrap span{font-size:24px;color:#dbe8ff;}
.submit-entry{
  width:100%;height:60px;border:0;border-radius:11px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#061a38;font-size:19px;font-weight:950;cursor:pointer;
  box-shadow:0 16px 30px rgba(255,193,7,.24);
}
.submit-entry:hover{filter:brightness(1.04);transform:translateY(-1px);}
.live-result{
  min-height:132px;
  margin-top:18px;
  border-radius:14px;
  display:flex;align-items:center;gap:20px;
  padding:24px;
  border:2px solid var(--gold);
  background:linear-gradient(145deg,rgba(11,32,57,.82),rgba(8,24,44,.92));
  box-shadow:0 0 30px rgba(255,193,7,.10), inset 0 0 48px rgba(255,193,7,.04);
}
.result-icon{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font-size:36px;font-weight:950;}
.live-result b{display:block;color:var(--gold);font-size:18px;font-weight:950;text-transform:uppercase;margin-bottom:7px;}
.live-result strong{display:block;color:#fff;font-size:25px;font-weight:950;margin-bottom:8px;}
.live-result small{color:#cbd8ec;font-size:16px;}
.live-result.error{border-color:#ef4444}.live-result.error b{color:#fca5a5}.live-result.error .result-icon{border-color:#ef4444;color:#ef4444}
.recent-card{padding:16px 0 10px;overflow:hidden;}
.recent-card h3{padding:0 22px 12px;}
.recent-table-wrap{overflow:auto;max-height:390px;border-top:1px solid rgba(13,139,255,.25);}
.recent-table{width:100%;border-collapse:collapse;color:#eaf2ff;min-width:920px;}
.recent-table th,.recent-table td{padding:13px 16px;border-bottom:1px solid rgba(94,144,205,.20);text-align:left;white-space:nowrap;}
.recent-table th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#c0cee4;font-weight:800;background:rgba(2,8,23,.18);}
.recent-table td{font-size:15px;color:#f3f7ff;}
.recent-table td:first-child{display:flex;align-items:center;gap:12px;}
.avatar-initial{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:50%;color:#ffd54a;border:2px solid var(--gold);font-size:12px;font-weight:950;background:rgba(255,193,7,.10);}
.action-badge{display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:8px 10px;border-radius:6px;font-size:13px;font-weight:950;color:#fff;}
.action-badge.in{background:linear-gradient(135deg,#166534,#15803d)}
.action-badge.out{background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.empty-row{text-align:center!important;color:#b9c8df!important;padding:30px!important;}
#scanLog{display:none!important;}

/* Make the rest of the system match the blue/gold scanner theme */
.layout{background:linear-gradient(135deg,var(--blue-950),var(--blue-900));color:#eaf2ff;}
.sidebar{background:linear-gradient(180deg,var(--blue-925),var(--blue-800));border-right:1px solid rgba(13,139,255,.25);}
.sidebar a:hover{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#061a38;}
.main{background:linear-gradient(135deg,var(--blue-950),var(--blue-900));min-height:100vh;}
.topbar,.card{background:linear-gradient(145deg,rgba(10,45,99,.88),rgba(4,19,43,.88));border:1px solid rgba(13,139,255,.24);color:#fff;box-shadow:0 18px 48px rgba(0,0,0,.25);}
.topbar h1,.card h2,.card h3{color:#fff}.topbar p,.card p{color:#cbd8ec;}
.table-wrap{border-color:rgba(13,139,255,.28)}
.table{background:#061a38;color:#eaf2ff}.table th{background:#08224b;color:#fff}.table td{border-color:rgba(94,144,205,.22)}.table tr:hover td{background:rgba(13,71,161,.22)}

@media(max-width:1300px){
  .scanner-shell{grid-template-columns:1fr;}
  .scan-panel{min-height:auto}.camera-frame{height:420px}.stat-grid{grid-template-columns:repeat(2,1fr)}.entry-update-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  body.scanner-dashboard-theme.no-top-header{padding:12px}.scan-panel,.attendance-panel{padding:18px}.stat-grid{grid-template-columns:1fr}.scan-panel-head h1{font-size:24px}.camera-frame{height:330px}.metric-card{min-height:auto}.recent-table{min-width:860px;}
}


/* =========================================================
   CLEAN SMART QR LOGIN THEME
   Matches the provided blue + gold mockup and keeps the same
   color system for the rest of the project.
   ========================================================= */
body.login-blue-yellow{
  min-height:100vh;
  color:#fff;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(30,144,255,.12), transparent 22%),
    radial-gradient(circle at 72% 24%, rgba(255,194,26,.10), transparent 18%),
    linear-gradient(135deg,#020817 0%,#04183b 40%,#07245c 100%);
}
body.login-blue-yellow::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.25;
}
.simple-login-shell{
  width:min(1440px,100%);
  margin:0 auto;
  padding:58px 38px;
  position:relative;
  z-index:1;
}
.clean-login{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) 520px;
  gap:40px;
  align-items:stretch;
}
.clean-visual-panel,
.clean-panel-card{
  border-radius:34px;
  border:1px solid rgba(132,176,255,.18);
  background:linear-gradient(160deg,rgba(8,34,82,.80),rgba(4,21,58,.92));
  box-shadow:0 30px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
}
.clean-visual-panel{
  min-height:760px;
  padding:72px 58px 50px;
  position:relative;
  overflow:hidden;
}
.clean-visual-panel::after{
  content:"";
  position:absolute;
  right:48px;
  top:70px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,194,26,.06), transparent 65%);
  border:1px solid rgba(255,194,26,.08);
  box-shadow:0 0 0 56px rgba(255,194,26,.02),0 0 0 112px rgba(255,194,26,.015);
}
.clean-visual-panel h1{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0;
  font-size:clamp(58px,5vw,82px);
  line-height:.98;
  letter-spacing:-2px;
  color:#fff;
  font-weight:800;
}
.clean-visual-panel h1 span{color:var(--gold-500);}
.compact-copy{
  position:relative;
  z-index:1;
  max-width:550px;
  margin:24px 0 38px;
  color:#d9e6ff;
  font-size:18px;
  line-height:1.7;
}
.compact-preview{
  height:360px;
  max-width:730px;
  border-radius:28px;
  background:linear-gradient(135deg,#020713,#07142b 75%,#091d38);
  border:2px solid rgba(255,194,26,.75);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 0 72px rgba(30,144,255,.10), 0 18px 40px rgba(0,0,0,.28);
}
.compact-preview .scan-corner{
  width:62px;
  height:62px;
  filter:drop-shadow(0 0 10px rgba(255,194,26,.30));
}
.compact-preview .scan-corner.top-left{left:6%;top:14%;}
.compact-preview .scan-corner.top-right{right:6%;top:14%;}
.compact-preview .scan-corner.bottom-left{left:6%;bottom:14%;}
.compact-preview .scan-corner.bottom-right{right:6%;bottom:14%;}
.preview-qr-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:68px;
  color:rgba(100,148,210,.45);
  text-shadow:0 0 28px rgba(30,144,255,.12);
}
.compact-preview .camera-pill{
  bottom:28px;
  background:rgba(10,33,76,.92);
  border:1px solid rgba(95,146,240,.25);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.20);
}
.compact-preview .camera-pill .cam-icon{color:var(--gold-500);}
.compact-preview .camera-pill b{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2ce68b;
  display:inline-block;
  box-shadow:0 0 12px rgba(44,230,139,.7);
}
.clean-panel-card{
  padding:44px 40px;
  min-height:760px;
  display:flex;
  flex-direction:column;
}
.compact-login-header{margin-bottom:28px;}
.compact-login-header .login-logo-circle{
  width:82px;
  height:82px;
  border-radius:50%;
  font-size:36px;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:#08224b;
}
.compact-login-header h2{
  margin:0;
  font-size:34px;
  color:#fff;
  letter-spacing:-.6px;
}
.compact-login-header p{margin:8px 0 0;color:#d7e8ff;font-size:16px;line-height:1.5;}
.compact-alert{
  border-radius:18px;
  padding:16px 18px;
  margin:0 0 18px;
  background:rgba(255,193,7,.10);
  border:1px solid rgba(255,193,7,.38);
  color:#ffd969;
  font-weight:700;
}
.clean-material-form{margin-top:8px;}
.clean-material-form label{
  margin:18px 0 10px;
  color:#fff;
  font-weight:700;
  font-size:15px;
}
.clean-input{
  border:1px solid rgba(125,165,235,.30);
  background:rgba(255,255,255,.92);
  border-radius:18px;
  padding:0 18px;
}
.clean-input:focus-within{
  border-color:rgba(255,194,26,.85);
  box-shadow:0 0 0 5px rgba(255,194,26,.14);
  background:#fff;
}
.clean-input span,
.clean-input em{
  color:#7a89aa;
  font-style:normal;
  font-size:18px;
}
.clean-input input{
  height:72px;
  color:#0f172a;
  font-size:16px;
}
.clean-input input::placeholder{color:#7585a5;}
.clean-login-btn{
  height:72px;
  margin-top:34px;
  border-radius:20px;
  font-size:18px;
  font-weight:800;
}
.clean-scanner-shortcut{
  margin-top:18px;
  height:70px;
  border-radius:20px;
  color:#fff;
  border:1px solid rgba(86,146,246,.45);
  background:rgba(6,31,75,.55);
  font-size:17px;
}
.clean-scanner-shortcut:hover{
  background:rgba(9,39,92,.82);
}

/* ensure full scanner page keeps the same navy / gold palette */
body.scanner-dashboard-theme{
  background:
    radial-gradient(circle at 18% 12%, rgba(30,144,255,.18), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,194,26,.10), transparent 24%),
    linear-gradient(135deg,#020817 0%,#061a3a 45%,#082b68 100%) !important;
}
.scanner-dashboard-theme .scan-panel,
.scanner-dashboard-theme .attendance-panel,
.scanner-dashboard-theme .entry-card,
.scanner-dashboard-theme .live-update-card,
.scanner-dashboard-theme .recent-card,
.scanner-dashboard-theme .metric-card{
  box-shadow:0 22px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

@media (max-width:1100px){
  .simple-login-shell{padding:22px;}
  .clean-login{grid-template-columns:1fr;gap:24px;}
  .clean-panel-card{min-height:auto;order:2;}
  .clean-visual-panel{min-height:auto;padding:38px 28px 28px;}
  .clean-visual-panel h1{font-size:clamp(42px,11vw,62px);}
  .compact-preview{height:280px;}
}


/* =========================================================
   CLEAN ADMIN DASHBOARD THEME
   Applies the same clean navy + gold material design to all
   admin pages: dashboard, patrons, attendance, reports,
   users, settings, and bulk upload.
   ========================================================= */

body:not(.login-blue-yellow):not(.scanner-dashboard-theme):not(.scanner-page){
  background:
    radial-gradient(circle at 18% 12%, rgba(30,144,255,.14), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,194,26,.09), transparent 24%),
    linear-gradient(135deg,#020817 0%,#061a3a 45%,#082b68 100%) !important;
  color:#eef6ff;
}

body:not(.login-blue-yellow):not(.scanner-dashboard-theme):not(.scanner-page)::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.55;
}

/* Admin layout shell */
.layout{
  background:transparent !important;
}

.sidebar{
  background:
    radial-gradient(circle at 20% 8%, rgba(255,194,26,.14), transparent 26%),
    linear-gradient(180deg,rgba(5,24,62,.96),rgba(3,14,38,.98)) !important;
  border-right:1px solid rgba(132,176,255,.18);
  box-shadow:18px 0 50px rgba(0,0,0,.28);
}

.brand{
  border-bottom:1px solid rgba(132,176,255,.18) !important;
}

.brand .logo{
  color:var(--gold-500) !important;
  background:linear-gradient(145deg,rgba(12,55,132,.9),rgba(7,31,83,.95)) !important;
  border:1px solid rgba(255,194,26,.48) !important;
  box-shadow:0 0 24px rgba(255,194,26,.14);
}

.brand strong{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
}

.brand span{
  color:#bcd4ff !important;
}

.sidebar a{
  color:#dceaff !important;
  border:1px solid transparent;
  font-weight:800;
}

.sidebar a:hover,
.sidebar a.active{
  color:#06142f !important;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600)) !important;
  border-color:rgba(255,194,26,.25);
  box-shadow:0 14px 28px rgba(255,194,26,.16);
  transform:translateX(4px);
}

.userbox{
  background:rgba(10,47,108,.48) !important;
  border:1px solid rgba(132,176,255,.18) !important;
  color:#dceaff !important;
}

.userbox b{color:#fff !important;}
.userbox small{color:var(--gold-500) !important;}

/* Main content */
.main{
  background:transparent !important;
}

.topbar{
  color:#fff !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,194,26,.13), transparent 26%),
    linear-gradient(145deg,rgba(10,44,106,.78),rgba(5,22,62,.92)) !important;
  border:1px solid rgba(132,176,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px);
}

.topbar h1{
  color:#fff !important;
  font-weight:900;
  letter-spacing:-.04em;
}

.topbar p{
  color:#d8e8ff !important;
}

/* Cards and panels */
.card,
.stat,
.login-card,
.table-wrap{
  color:#eef6ff;
  background:linear-gradient(160deg,rgba(10,44,106,.72),rgba(5,22,62,.92)) !important;
  border:1px solid rgba(132,176,255,.18) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.card h2,
.card h3,
.card h4,
.card-title,
.section-title{
  color:#fff !important;
  font-weight:900;
  letter-spacing:-.02em;
}

.card h2::before,
.card h3::before{
  content:"";
  display:inline-block;
  width:5px;
  height:26px;
  margin-right:10px;
  vertical-align:-5px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-600));
}

.stat::before{
  background:radial-gradient(circle, rgba(255,194,26,.14), transparent 68%) !important;
}

.stat span{
  color:#c7dcff !important;
}

.stat b{
  color:#fff !important;
  text-shadow:0 0 24px rgba(30,144,255,.18);
}

/* Forms */
label{
  color:#f8fbff !important;
  font-weight:800;
}

.input,
select,
textarea,
.login-form input,
.login-form select{
  background:rgba(255,255,255,.92) !important;
  color:#0f172a !important;
  border:1px solid rgba(132,176,255,.30) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

.input:focus,
select:focus,
textarea:focus,
.login-form input:focus{
  border-color:rgba(255,194,26,.90) !important;
  box-shadow:0 0 0 5px rgba(255,194,26,.14) !important;
}

.input::placeholder,
textarea::placeholder{
  color:#7384a4;
}

/* Buttons */
.btn{
  color:#06142f !important;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600)) !important;
  box-shadow:0 16px 34px rgba(255,194,26,.20) !important;
  font-weight:900;
}

.btn.secondary{
  color:#fff !important;
  background:rgba(10,47,108,.55) !important;
  border:1px solid rgba(132,176,255,.24) !important;
  box-shadow:none !important;
}

.btn.secondary:hover{
  background:rgba(15,64,142,.72) !important;
}

.btn.danger{
  color:#fff !important;
  background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
  box-shadow:0 14px 28px rgba(239,68,68,.18) !important;
}

/* Tables */
.table-wrap{
  overflow:hidden;
  border-radius:20px !important;
}

.table{
  background:transparent !important;
  color:#eaf2ff !important;
}

.table th{
  background:linear-gradient(135deg,rgba(13,71,161,.72),rgba(8,39,91,.88)) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(132,176,255,.22) !important;
  font-weight:900;
}

.table td{
  color:#eaf2ff !important;
  border-bottom:1px solid rgba(132,176,255,.13) !important;
  background:rgba(4,21,58,.35);
}

.table tr:hover td{
  background:rgba(255,194,26,.08) !important;
}

/* Badges and alerts */
.badge{
  color:#d1fae5 !important;
  background:rgba(34,197,94,.20) !important;
  border:1px solid rgba(34,197,94,.30);
}

.badge.out{
  color:#bfdbfe !important;
  background:rgba(30,144,255,.18) !important;
  border:1px solid rgba(30,144,255,.26);
}

.badge.disabled{
  color:#fecaca !important;
  background:rgba(239,68,68,.18) !important;
  border:1px solid rgba(239,68,68,.26);
}

.alert{
  color:#ffd969 !important;
  background:rgba(255,193,7,.10) !important;
  border:1px solid rgba(255,193,7,.38) !important;
}

.alert.success,
.success{
  color:#bbf7d0 !important;
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.30) !important;
}

/* QR/photo display */
.photo{
  border:1px solid rgba(132,176,255,.22);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.qr-svg{
  background:#fff;
  border-radius:18px;
  padding:12px;
  display:inline-block;
}

/* Import and report pages */
.card ul,
.card ol,
.card p{
  color:#dceaff;
}

.card a:not(.btn){
  color:var(--gold-500);
  font-weight:800;
}

hr{
  border:0;
  border-top:1px solid rgba(132,176,255,.16);
}

/* Admin responsive */
@media(max-width:760px){
  .sidebar{
    border-right:0;
    border-bottom:1px solid rgba(132,176,255,.18);
  }

  .main{
    padding:16px !important;
  }

  .topbar{
    border-radius:20px;
  }
}


/* =========================================================
   SCANNER TOP-RIGHT LOGOUT BUTTON
   Adds a clean logout button to the full scanner dashboard.
   ========================================================= */
.attendance-panel{
  position:relative;
}

.scanner-top-logout{
  position:absolute;
  top:22px;
  right:24px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  color:#06142f !important;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  border:1px solid rgba(255,194,26,.55);
  box-shadow:0 14px 30px rgba(255,194,26,.18), inset 0 1px 0 rgba(255,255,255,.28);
  transition:.2s ease;
}

.scanner-top-logout:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 18px 38px rgba(255,194,26,.24), inset 0 1px 0 rgba(255,255,255,.30);
}

.scanner-top-logout:active{
  transform:translateY(0);
}

.section-title-row{
  padding-right:130px;
}

@media(max-width:900px){
  .scanner-top-logout{
    position:static;
    margin:0 0 16px auto;
    width:max-content;
    display:flex;
  }

  .section-title-row{
    padding-right:0;
  }
}


/* =========================================================
   LOGIN MESSAGE UPDATE
   Invalid username/password text is no longer displayed on login page.
   Successful login messages appear as clean green/blue banners.
   ========================================================= */
.login-success-banner,
.scanner-login-success{
  margin:0 0 18px;
  padding:14px 18px;
  border-radius:16px;
  color:#d1fae5 !important;
  background:rgba(34,197,94,.14) !important;
  border:1px solid rgba(34,197,94,.34) !important;
  font-weight:800;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.scanner-login-success{
  position:relative;
  z-index:20;
  margin-bottom:18px;
}


/* =========================================================
   FINAL LOGIN ALERT REMOVAL
   Hides invalid username/password text on the login page.
   ========================================================= */
body.login-blue-yellow .login-alert,
body.login-blue-yellow .compact-alert{
  display:none !important;
}


/* =========================================================
   LOGIN CLEANUP: REMOVED EXTRA TEXT AND SCANNER LINK
   This keeps the login page cleaner after removing:
   - Open QR Scanner Page
   - Choose Admin or Scanner account to continue.
   - Manage patrons description line
   ========================================================= */
.clean-visual-panel h1{
  margin-bottom:34px !important;
}

.compact-login-header{
  margin-bottom:46px !important;
}

.compact-login-header p,
.clean-scanner-shortcut{
  display:none !important;
}

.clean-panel-card{
  justify-content:flex-start;
}

.clean-material-form{
  margin-top:18px !important;
}


/* =========================================================
   USERS PAGE ENABLE / DISABLE ACTION STYLE
   Adds clean Enable and Disable button styling.
   ========================================================= */
.user-action-buttons{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.btn.enable{
  color:#052e16 !important;
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  box-shadow:0 12px 24px rgba(34,197,94,.18) !important;
}

.btn.enable:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.disabled-action{
  opacity:.45;
  cursor:not-allowed !important;
  color:#cbd5e1 !important;
  background:rgba(148,163,184,.18) !important;
  border:1px solid rgba(203,213,225,.20) !important;
  box-shadow:none !important;
}

.user-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid transparent;
}

.user-status.active{
  color:#bbf7d0;
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.30);
}

.user-status.inactive{
  color:#fecaca;
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.26);
}


/* =========================================================
   EMERALD GOLD LIBRARY THEME
   Clean library-friendly palette applied throughout the system.
   Theme colors are based on the approved final mockup:
   deep emerald, soft green glass panels, cream text, and muted gold.
   ========================================================= */
:root{
  --emerald-950:#061815;
  --emerald-900:#0b241f;
  --emerald-850:#0f3029;
  --emerald-800:#123b33;
  --emerald-700:#16483e;
  --emerald-650:#1b5448;
  --emerald-600:#1f6253;
  --cream:#f7f3e8;
  --cream-soft:#d9e7df;
  --cream-muted:#b7c9c1;
  --gold:#d6a84f;
  --gold-2:#f0c76a;
  --gold-dark:#a87a28;
  --green:#2ecc71;
  --green-dark:#179a50;
  --red:#e74c3c;
  --red-dark:#be2f27;
  --cyan:#20c7bd;
  --pink:#e0528d;
  --line:rgba(247,243,232,.16);
  --line-strong:rgba(214,168,79,.38);
  --glass-green:rgba(20,72,62,.68);
  --glass-green-soft:rgba(31,98,83,.46);
  --shadow-green:0 26px 70px rgba(0,0,0,.30);
}

/* ---------- Global Emerald Theme ---------- */
body:not(.login-blue-yellow):not(.scanner-dashboard-theme):not(.scanner-page),
body.login-blue-yellow,
body.scanner-dashboard-theme,
body.scanner-page{
  background:
    radial-gradient(circle at 14% 10%, rgba(46,204,113,.13), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(214,168,79,.12), transparent 24%),
    linear-gradient(135deg,var(--emerald-950) 0%, var(--emerald-900) 44%, var(--emerald-800) 100%) !important;
  color:var(--cream) !important;
}

body:not(.login-blue-yellow):not(.scanner-dashboard-theme):not(.scanner-page)::before,
body.login-blue-yellow::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(247,243,232,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(247,243,232,.018) 1px,transparent 1px);
  background-size:52px 52px;
  opacity:.5;
}

/* ---------- Common Cards / Panels ---------- */
.card,
.stat,
.topbar,
.login-visual-panel,
.login-panel-card,
.clean-visual-panel,
.clean-panel-card,
.table-wrap,
.scan-panel,
.attendance-panel,
.metric-card,
.entry-card,
.live-update-card,
.recent-card,
.offline-note,
.scanner-note,
.scanner-box{
  background:linear-gradient(160deg,rgba(22,72,62,.72),rgba(8,33,29,.92)) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-green), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color:var(--cream) !important;
}

.card h1,.card h2,.card h3,
.topbar h1,
.section-title-row h2,
.entry-card h3,
.live-update-card h3,
.recent-card h3,
.scan-panel h1,
.login-panel-header h2,
.clean-visual-panel h1{
  color:var(--cream) !important;
  font-weight:900;
  letter-spacing:-.035em;
}

.card p,
.topbar p,
.scan-panel p,
.metric-card p,
.offline-note,
.login-panel-header p{
  color:var(--cream-soft) !important;
}

/* Section gold bars */
.card h2::before,
.card h3::before,
.section-title-row h2 span,
.entry-card h3 span,
.live-update-card h3 span,
.recent-card h3 span{
  background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important;
  box-shadow:0 0 18px rgba(214,168,79,.25);
}

/* ---------- Sidebar / Admin ---------- */
.sidebar{
  background:
    radial-gradient(circle at 20% 8%, rgba(214,168,79,.15), transparent 26%),
    linear-gradient(180deg,rgba(13,45,39,.98),rgba(5,24,21,.99)) !important;
  border-right:1px solid var(--line) !important;
  box-shadow:18px 0 50px rgba(0,0,0,.28) !important;
}

.brand{
  border-bottom:1px solid var(--line) !important;
}

.brand .logo,
.brand-icon,
.brand-icon-grid,
.scanner-icon-card,
.panel-logo{
  color:var(--gold-2) !important;
  background:linear-gradient(145deg,rgba(31,98,83,.92),rgba(12,48,41,.96)) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:0 0 26px rgba(214,168,79,.16) !important;
}

.brand strong{color:var(--cream) !important;}
.brand span{color:var(--cream-muted) !important;}

.sidebar a{
  color:var(--cream-soft) !important;
}

.sidebar a:hover,
.sidebar a.active{
  color:var(--emerald-950) !important;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;
  box-shadow:0 14px 28px rgba(214,168,79,.18) !important;
}

.userbox{
  background:rgba(31,98,83,.36) !important;
  border:1px solid var(--line) !important;
  color:var(--cream-soft) !important;
}

.userbox b{color:var(--cream) !important;}
.userbox small{color:var(--gold-2) !important;}

/* ---------- Forms ---------- */
label{
  color:var(--cream) !important;
}

.input,
select,
textarea,
.login-form input,
.login-form select,
.entry-input-wrap,
.material-input,
.clean-input{
  background:rgba(5,24,21,.62) !important;
  color:var(--cream) !important;
  border:1px solid rgba(247,243,232,.18) !important;
}

.input:focus,
select:focus,
textarea:focus,
.login-form input:focus,
.entry-input-wrap:focus-within,
.material-input:focus-within,
.clean-input:focus-within{
  border-color:var(--gold-2) !important;
  box-shadow:0 0 0 4px rgba(214,168,79,.15) !important;
}

.input::placeholder,
textarea::placeholder,
.entry-input-wrap input::placeholder,
.material-input input::placeholder,
.clean-input input::placeholder{
  color:rgba(247,243,232,.58) !important;
}

.material-input input,
.clean-input input,
.entry-input-wrap input{
  color:var(--cream) !important;
}

.material-input span,
.clean-input span,
.clean-input em,
.entry-input-wrap span{
  color:var(--gold-2) !important;
}

/* ---------- Buttons ---------- */
.btn,
.submit-entry,
.material-login-btn,
.clean-login-btn{
  color:var(--emerald-950) !important;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;
  box-shadow:0 16px 34px rgba(214,168,79,.22) !important;
  border:0 !important;
}

.btn:hover,
.submit-entry:hover,
.material-login-btn:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.btn.secondary,
.scanner-shortcut,
.clean-scanner-shortcut{
  color:var(--cream) !important;
  background:rgba(31,98,83,.35) !important;
  border:1px solid var(--line) !important;
}

.btn.danger,
.scanner-top-logout{
  color:#fff !important;
  background:linear-gradient(135deg,var(--red),var(--red-dark)) !important;
  border:1px solid rgba(231,76,60,.35) !important;
  box-shadow:0 16px 32px rgba(231,76,60,.20) !important;
}

.btn.enable{
  color:#052e16 !important;
  background:linear-gradient(135deg,var(--green),#7ee6a7) !important;
}

/* ---------- Login Page Emerald ---------- */
.clean-visual-panel h1 span,
.login-visual-panel h1 span{
  color:var(--gold-2) !important;
}

.clean-visual-panel::after,
.login-visual-panel::after{
  background:radial-gradient(circle,rgba(214,168,79,.08),transparent 65%) !important;
  border-color:rgba(214,168,79,.10) !important;
}

.compact-preview,
.login-preview-window,
.camera-frame,
.video-wrap{
  background:linear-gradient(135deg,#03110f,#0a211d 75%,#103c34) !important;
  border-color:var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(247,243,232,.05),
    inset 0 0 72px rgba(46,204,113,.12),
    0 24px 56px rgba(0,0,0,.32) !important;
}

.preview-qr-icon,
.center-camera{
  color:rgba(247,243,232,.22) !important;
}

.camera-pill,
.camera-status{
  color:var(--cream) !important;
  background:rgba(31,98,83,.58) !important;
  border:1px solid rgba(247,243,232,.16) !important;
}

.camera-pill b,
.green-dot,
.online-dot{
  background:var(--green) !important;
  box-shadow:0 0 14px rgba(46,204,113,.78) !important;
}

/* ---------- Full Scanner Dashboard ---------- */
.scanner-shell{
  gap:18px !important;
}

.scan-panel,
.attendance-panel{
  border-radius:24px !important;
}

.scan-panel-head h1{
  font-size:27px !important;
}

.camera-frame{
  min-height:400px !important;
}

.scan-helper-text{
  position:absolute;
  left:50%;
  top:56%;
  transform:translate(-50%,-50%);
  color:rgba(247,243,232,.76);
  text-align:center;
  line-height:1.45;
  font-size:16px;
  pointer-events:none;
}

.scan-corner{
  border-color:var(--gold-2) !important;
  filter:drop-shadow(0 0 9px rgba(214,168,79,.36)) !important;
}

.offline-note .info{
  background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;
  color:var(--emerald-950) !important;
}

.section-title-row{
  border-bottom:1px solid var(--line) !important;
}

.scanner-login-success,
.login-success-banner{
  color:var(--cream) !important;
  background:rgba(46,204,113,.12) !important;
  border:1px solid rgba(46,204,113,.34) !important;
}

/* Stat metric cards */
.metric-card{
  background:linear-gradient(160deg,rgba(31,98,83,.48),rgba(9,36,31,.82)) !important;
  border:1px solid var(--line) !important;
}

.metric-card h3{
  color:var(--cream) !important;
}

.metric-card strong{
  color:var(--cream) !important;
}

.metric-card.male .metric-icon{border-color:#4ade80 !important;color:#4ade80 !important;}
.metric-card.female .metric-icon{border-color:var(--pink) !important;color:var(--pink) !important;}
.metric-card.visits .metric-icon{border-color:var(--gold-2) !important;color:var(--gold-2) !important;}
.metric-card.patron .metric-icon{border-color:var(--green) !important;color:var(--green) !important;}
.metric-card.course .metric-icon{border-color:var(--cyan) !important;color:var(--cyan) !important;}

/* Live update result */
.live-result{
  border-color:var(--line-strong) !important;
  background:linear-gradient(145deg,rgba(8,33,29,.88),rgba(12,56,48,.74)) !important;
}

.live-result .result-icon{
  border-color:var(--green) !important;
  color:var(--green) !important;
}

.live-result b{
  color:#71f39e !important;
}

.live-result strong{
  color:var(--cream) !important;
}

.live-result small{
  color:var(--cream-muted) !important;
}

.live-result.error,
#result.error{
  border-color:rgba(231,76,60,.72) !important;
}

.live-result.error .result-icon,
#result.error .result-icon{
  border-color:var(--red) !important;
  color:var(--red) !important;
}

.live-result.error b,
#result.error b{
  color:#ffb4ac !important;
}

/* Recent scans table */
.recent-table,
.table{
  background:transparent !important;
  color:var(--cream) !important;
}

.recent-table th,
.table th{
  background:rgba(6,24,21,.72) !important;
  color:var(--cream) !important;
  border-bottom:1px solid var(--line) !important;
}

.recent-table td,
.table td{
  color:var(--cream-soft) !important;
  border-bottom:1px solid rgba(247,243,232,.10) !important;
  background:rgba(6,24,21,.30) !important;
}

.recent-table tr:hover td,
.table tr:hover td{
  background:rgba(214,168,79,.07) !important;
}

.avatar-initial{
  border-color:var(--gold-2) !important;
  color:var(--gold-2) !important;
}

.action-badge.in,
.badge{
  color:#fff !important;
  background:linear-gradient(135deg,var(--green),var(--green-dark)) !important;
}

.action-badge.out,
.badge.out{
  color:#fff !important;
  background:linear-gradient(135deg,var(--red),var(--red-dark)) !important;
}

/* User status badges */
.user-status.active{
  color:#d1fae5 !important;
  background:rgba(46,204,113,.15) !important;
  border-color:rgba(46,204,113,.32) !important;
}

.user-status.inactive{
  color:#ffd2cd !important;
  background:rgba(231,76,60,.14) !important;
  border-color:rgba(231,76,60,.28) !important;
}

/* Scrollbar */
.recent-table-wrap::-webkit-scrollbar,
.scan-log::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.recent-table-wrap::-webkit-scrollbar-thumb,
.scan-log::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:rgba(214,168,79,.55);
  border-radius:999px;
}

.recent-table-wrap::-webkit-scrollbar-track,
.scan-log::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:rgba(6,24,21,.55);
}

/* Responsive polish */
@media(max-width:900px){
  .scan-helper-text{
    font-size:14px;
  }
}


/* =========================================================
   EMERALD CLOCK DASHBOARD THEME OVERRIDES
   Matches the approved mockup with:
   - Bigger analog clock below scanner frame
   - Larger manual Patron ID / QR Code section
   - QR display icon inside input box
   - Same emerald-gold palette across the full scanner page
   ========================================================= */
body.scanner-dashboard-theme .scanner-shell{
  grid-template-columns:392px minmax(0,1fr);
  gap:20px;
}
body.scanner-dashboard-theme .scan-panel{
  padding:18px 18px 16px;
  gap:18px;
}
body.scanner-dashboard-theme .scan-panel-head{
  gap:16px;
}
body.scanner-dashboard-theme .brand-icon-grid{
  width:62px;
  height:62px;
  font-size:34px;
}
body.scanner-dashboard-theme .scan-panel-head h1{
  font-size:25px;
}
body.scanner-dashboard-theme .scan-panel-head p{
  font-size:14px;
  margin-top:6px;
}
body.scanner-dashboard-theme .camera-pill{display:none;}
body.scanner-dashboard-theme .camera-frame{
  height:412px;
  border-radius:18px;
}
body.scanner-dashboard-theme .scan-helper-text{
  top:50%;
  font-size:15px;
  line-height:1.4;
}
body.scanner-dashboard-theme .analog-clock-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2px 0 2px;
}
body.scanner-dashboard-theme .analog-clock{
  position:relative;
  width:254px;
  height:254px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(56,189,120,.10), transparent 34%),
    linear-gradient(145deg, #0a2721, #08211d 55%, #0c322a 100%);
  border:7px solid var(--gold-2);
  box-shadow:
    0 0 0 5px rgba(247,243,232,.05),
    inset 0 0 36px rgba(214,168,79,.10),
    0 24px 40px rgba(0,0,0,.28),
    0 0 28px rgba(214,168,79,.12);
}
body.scanner-dashboard-theme .analog-clock::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:1px solid rgba(214,168,79,.18);
}
body.scanner-dashboard-theme .analog-clock::after{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:1px dashed rgba(247,243,232,.12);
}
body.scanner-dashboard-theme .clock-mark{
  position:absolute;
  color:var(--gold-2);
  font-size:17px;
  font-weight:800;
  line-height:1;
  text-shadow:0 0 10px rgba(214,168,79,.18);
}
body.scanner-dashboard-theme .mark-12{top:20px;left:50%;transform:translateX(-50%);}
body.scanner-dashboard-theme .mark-3{top:50%;right:16px;transform:translateY(-50%);}
body.scanner-dashboard-theme .mark-6{bottom:16px;left:50%;transform:translateX(-50%);}
body.scanner-dashboard-theme .mark-9{top:50%;left:18px;transform:translateY(-50%);}
body.scanner-dashboard-theme .clock-hand{
  position:absolute;
  left:50%;
  bottom:50%;
  transform-origin:50% 100%;
  border-radius:999px;
  box-shadow:0 0 10px rgba(214,168,79,.22);
}
body.scanner-dashboard-theme .clock-hand.hour{
  width:6px;
  height:62px;
  margin-left:-3px;
  background:linear-gradient(180deg, #f6df9c, #e2b958);
}
body.scanner-dashboard-theme .clock-hand.minute{
  width:4px;
  height:90px;
  margin-left:-2px;
  background:linear-gradient(180deg, #f6df9c, #e2b958);
}
body.scanner-dashboard-theme .clock-hand.second{
  width:2px;
  height:106px;
  margin-left:-1px;
  background:linear-gradient(180deg, #fbe7aa, #d6a84f);
}
body.scanner-dashboard-theme .clock-center{
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 4px rgba(10,39,33,.85), 0 0 12px rgba(214,168,79,.35);
}
body.scanner-dashboard-theme .offline-note{
  margin-top:auto;
  padding:18px 18px;
  gap:16px;
}
body.scanner-dashboard-theme .offline-note strong{
  font-size:15px;
}
body.scanner-dashboard-theme .attendance-panel{
  padding:18px 20px 16px;
  gap:16px;
}
body.scanner-dashboard-theme .scanner-top-logout{
  top:14px;
  right:16px;
  min-height:38px;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
}
body.scanner-dashboard-theme .scanner-login-success{
  margin-bottom:6px;
}
body.scanner-dashboard-theme .section-title-row h2{
  font-size:21px;
}
body.scanner-dashboard-theme .stat-grid{
  gap:14px;
}
body.scanner-dashboard-theme .metric-card{
  min-height:132px;
  padding:16px;
}
body.scanner-dashboard-theme .metric-card strong{
  font-size:28px;
  margin-bottom:8px;
}
body.scanner-dashboard-theme .metric-card h3{
  font-size:14px;
  margin-bottom:8px;
}
body.scanner-dashboard-theme .metric-card p{
  font-size:13px;
}
body.scanner-dashboard-theme .metric-icon{
  width:54px;
  height:54px;
  flex-basis:54px;
  font-size:28px;
}
body.scanner-dashboard-theme .entry-update-grid{
  grid-template-columns:1.02fr 1.18fr;
  gap:14px;
}
body.scanner-dashboard-theme .entry-card,
body.scanner-dashboard-theme .live-update-card{
  padding:18px;
  min-height:226px;
}
body.scanner-dashboard-theme .entry-card h3,
body.scanner-dashboard-theme .live-update-card h3,
body.scanner-dashboard-theme .recent-card h3{
  font-size:19px;
}
body.scanner-dashboard-theme .entry-input-wrap{
  height:96px;
  margin:16px 0 14px;
  padding:0 22px;
  border-radius:16px;
  background:rgba(6,24,21,.46) !important;
  border:1px solid rgba(214,168,79,.72) !important;
  box-shadow:0 0 0 3px rgba(214,168,79,.08);
}
body.scanner-dashboard-theme .entry-input-wrap input{
  font-size:20px;
  letter-spacing:-.02em;
}
body.scanner-dashboard-theme .qr-mini-icon{
  width:60px;
  height:60px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:6px;
  position:relative;
  flex:0 0 60px;
}
body.scanner-dashboard-theme .qr-mini-icon i,
body.scanner-dashboard-theme .qr-mini-icon b{
  display:block;
  box-sizing:border-box;
}
body.scanner-dashboard-theme .qr-mini-icon i{
  border:4px solid var(--gold-2);
  border-radius:4px;
}
body.scanner-dashboard-theme .qr-mini-icon b{
  position:absolute;
  right:2px;
  bottom:2px;
  width:18px;
  height:18px;
  background:
    linear-gradient(90deg,var(--gold-2) 33%,transparent 33% 66%,var(--gold-2) 66%),
    linear-gradient(var(--gold-2) 33%,transparent 33% 66%,var(--gold-2) 66%);
  opacity:.95;
}
body.scanner-dashboard-theme .submit-entry{
  height:56px;
  font-size:17px;
  border-radius:14px;
}
body.scanner-dashboard-theme .live-result{
  min-height:168px;
  margin-top:16px;
  border-radius:16px;
  padding:22px;
}
body.scanner-dashboard-theme .result-icon{
  width:72px;
  height:72px;
  flex-basis:72px;
  font-size:32px;
}
body.scanner-dashboard-theme .live-result b{font-size:16px;}
body.scanner-dashboard-theme .live-result strong{font-size:20px; line-height:1.3; display:block; margin-top:6px;}
body.scanner-dashboard-theme .live-result small{font-size:12px; margin-top:10px; display:block;}
body.scanner-dashboard-theme .recent-card{
  padding:14px 0 0;
}
body.scanner-dashboard-theme .recent-card h3{
  padding:0 18px 12px;
}
body.scanner-dashboard-theme .recent-table-wrap{
  max-height:262px;
}
body.scanner-dashboard-theme .recent-table th,
body.scanner-dashboard-theme .recent-table td{
  padding:14px 18px;
}
body.scanner-dashboard-theme .recent-table th{
  font-size:12px;
}
body.scanner-dashboard-theme .recent-table td{
  font-size:13px;
}
body.scanner-dashboard-theme .avatar-initial{
  width:34px;
  height:34px;
  margin-right:10px;
}

/* Apply same emerald-gold accents to admin/login cards throughout the system */
.topbar,
.card,
.table-wrap,
.login-visual-panel,
.login-panel-card,
.clean-visual-panel,
.clean-panel-card,
.stat,
.chart-box,
.userbox{
  background:linear-gradient(160deg,rgba(16,61,52,.72),rgba(8,33,29,.92)) !important;
  border:1px solid rgba(247,243,232,.12) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.btn,
.material-login-btn,
.clean-login-btn{
  border-radius:14px !important;
}
.btn.danger{
  background:linear-gradient(135deg,#e74c3c,#d3392b) !important;
}
@media(max-width:1250px){
  body.scanner-dashboard-theme .scanner-shell{
    grid-template-columns:1fr;
  }
  body.scanner-dashboard-theme .analog-clock{
    width:220px;
    height:220px;
  }
}
@media(max-width:760px){
  body.scanner-dashboard-theme .entry-update-grid,
  body.scanner-dashboard-theme .stat-grid{
    grid-template-columns:1fr;
  }
  body.scanner-dashboard-theme .camera-frame{
    height:360px;
  }
  body.scanner-dashboard-theme .analog-clock{
    width:190px;
    height:190px;
  }
  body.scanner-dashboard-theme .entry-input-wrap{
    height:84px;
  }
}


/* =========================================================
   FINAL SCANNER LAYOUT REVISION
   Request:
   - Bigger Manual Patron ID or QR Code card
   - Larger input box with clearer QR icon
   - Recent Scans moved lower and extended to bottom
   - Remove lower supported-browser text/card
   ========================================================= */

body.scanner-dashboard-theme .scanner-shell{
  align-items:stretch;
}

body.scanner-dashboard-theme .scan-panel{
  min-height:calc(100vh - 40px);
}

body.scanner-dashboard-theme .offline-note{
  display:none !important;
}

body.scanner-dashboard-theme .analog-clock-wrap{
  margin-top:8px;
  margin-bottom:0;
  flex:1 0 auto;
  align-items:flex-start;
  padding-top:12px;
}

/* Make the main dashboard behave like a full-height layout */
body.scanner-dashboard-theme .attendance-panel{
  min-height:calc(100vh - 40px);
  display:grid !important;
  grid-template-rows:auto auto auto 1fr;
  gap:16px;
  overflow:hidden;
}

/* Bigger and cleaner manual + update row */
body.scanner-dashboard-theme .entry-update-grid{
  grid-template-columns:1.02fr 1.18fr !important;
  gap:16px !important;
}

body.scanner-dashboard-theme .entry-card,
body.scanner-dashboard-theme .live-update-card{
  min-height:270px !important;
  padding:22px !important;
  border-radius:18px !important;
}

body.scanner-dashboard-theme .entry-card h3,
body.scanner-dashboard-theme .live-update-card h3{
  font-size:21px !important;
  margin-bottom:16px !important;
}

body.scanner-dashboard-theme .entry-input-wrap{
  height:116px !important;
  padding:0 28px !important;
  margin:18px 0 16px !important;
  border-radius:18px !important;
  border:1.5px solid rgba(240,199,106,.82) !important;
  background:linear-gradient(145deg,rgba(6,24,21,.64),rgba(12,50,42,.62)) !important;
  box-shadow:
    0 0 0 4px rgba(214,168,79,.09),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.scanner-dashboard-theme .entry-input-wrap input{
  font-size:22px !important;
  font-weight:600 !important;
  color:var(--cream) !important;
}

body.scanner-dashboard-theme .entry-input-wrap input::placeholder{
  color:rgba(247,243,232,.62) !important;
}

body.scanner-dashboard-theme .qr-mini-icon{
  width:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
  gap:7px !important;
  filter:drop-shadow(0 0 10px rgba(214,168,79,.18));
}

body.scanner-dashboard-theme .qr-mini-icon i{
  border:5px solid var(--gold-2) !important;
  border-radius:5px !important;
}

body.scanner-dashboard-theme .qr-mini-icon b{
  width:24px !important;
  height:24px !important;
  right:0 !important;
  bottom:0 !important;
}

body.scanner-dashboard-theme .submit-entry{
  height:64px !important;
  border-radius:16px !important;
  font-size:19px !important;
  font-weight:950 !important;
  letter-spacing:.01em;
}

/* Latest attendance update enlarged to match manual card */
body.scanner-dashboard-theme .live-result{
  min-height:182px !important;
  margin-top:18px !important;
  padding:28px !important;
  border-radius:18px !important;
}

body.scanner-dashboard-theme .result-icon{
  width:78px !important;
  height:78px !important;
  flex-basis:78px !important;
  font-size:36px !important;
}

body.scanner-dashboard-theme .live-result b{
  font-size:16px !important;
  letter-spacing:.02em;
}

body.scanner-dashboard-theme .live-result strong{
  font-size:22px !important;
  line-height:1.32 !important;
}

body.scanner-dashboard-theme .live-result small{
  font-size:13px !important;
}

/* Recent scans: push lower and extend to dashboard bottom */
body.scanner-dashboard-theme .recent-card{
  min-height:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  padding:16px 0 0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

body.scanner-dashboard-theme .recent-card h3{
  padding:0 22px 14px !important;
  font-size:21px !important;
  flex:0 0 auto;
}

body.scanner-dashboard-theme .recent-table-wrap{
  flex:1 1 auto !important;
  max-height:none !important;
  min-height:360px !important;
  overflow:auto !important;
  border-top:1px solid rgba(214,168,79,.26) !important;
}

body.scanner-dashboard-theme .recent-table{
  width:100% !important;
}

body.scanner-dashboard-theme .recent-table th{
  position:fixed;
  top:0;
  z-index:2;
  padding:14px 20px !important;
  font-size:12px !important;
  letter-spacing:.06em;
}

body.scanner-dashboard-theme .recent-table td{
  padding:16px 20px !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

body.scanner-dashboard-theme .action-badge{
  min-width:82px;
  text-align:center;
  padding:8px 12px !important;
  border-radius:7px !important;
}

/* Keep the left side balanced now that the lower note is removed */
body.scanner-dashboard-theme .camera-frame{
  height:420px !important;
}

body.scanner-dashboard-theme .analog-clock{
  width:270px !important;
  height:270px !important;
}

/* Tablet/mobile refinements */
@media(max-width:1250px){
  body.scanner-dashboard-theme .attendance-panel{
    display:flex !important;
    min-height:auto;
    overflow:visible;
  }
  body.scanner-dashboard-theme .recent-table-wrap{
    max-height:460px !important;
  }
}

@media(max-width:760px){
  body.scanner-dashboard-theme .entry-card,
  body.scanner-dashboard-theme .live-update-card{
    min-height:auto !important;
  }
  body.scanner-dashboard-theme .entry-input-wrap{
    height:96px !important;
    padding:0 20px !important;
  }
  body.scanner-dashboard-theme .entry-input-wrap input{
    font-size:18px !important;
  }
  body.scanner-dashboard-theme .qr-mini-icon{
    width:58px !important;
    height:58px !important;
    flex-basis:58px !important;
  }
  body.scanner-dashboard-theme .recent-table-wrap{
    min-height:300px !important;
  }
}


/* =========================================================
   FINAL 12-NUMBER ANALOG CLOCK + 4-ROW RECENT SCANS UPDATE
   - Bigger entry text and input box
   - Cleaner QR icon at right side
   - Recent Scans shows 4 rows first, then scrolls
   - Bigger analog clock with numbers 1 to 12
   ========================================================= */

body.scanner-dashboard-theme .scan-panel{
  min-height:calc(100vh - 40px);
  overflow:hidden;
}

body.scanner-dashboard-theme .offline-note{
  display:none !important;
}

/* Bigger analog clock below QR scanner */
body.scanner-dashboard-theme .analog-clock-wrap{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  margin-top:12px !important;
  padding-top:8px !important;
}

body.scanner-dashboard-theme .analog-clock{
  position:relative !important;
  width:320px !important;
  height:320px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(46,204,113,.12), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(214,168,79,.08), transparent 58%),
    linear-gradient(145deg, #09231f, #0a2f27 55%, #073027 100%) !important;
  border:8px solid var(--gold-2) !important;
  box-shadow:
    0 0 0 5px rgba(247,243,232,.05),
    inset 0 0 44px rgba(214,168,79,.13),
    0 28px 48px rgba(0,0,0,.32),
    0 0 34px rgba(214,168,79,.15) !important;
}

body.scanner-dashboard-theme .analog-clock::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:50%;
  border:1px solid rgba(214,168,79,.24);
}

body.scanner-dashboard-theme .analog-clock::after{
  content:"";
  position:absolute;
  inset:28px;
  border-radius:50%;
  border:1px dashed rgba(240,199,106,.22);
}

/* Hide old 12/3/6/9 mark classes if still present */
body.scanner-dashboard-theme .clock-mark{
  display:none !important;
}

/* Numbers 1 to 12 around the analog clock face */
body.scanner-dashboard-theme .clock-number{
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  margin:-16px 0 0 -16px;
  display:grid;
  place-items:center;
  color:var(--gold-2) !important;
  font-size:18px;
  font-weight:950;
  line-height:1;
  text-shadow:0 0 12px rgba(214,168,79,.28);
  z-index:3;
}

body.scanner-dashboard-theme .clock-number.n12{transform:rotate(0deg) translateY(-132px) rotate(0deg);}
body.scanner-dashboard-theme .clock-number.n1{transform:rotate(30deg) translateY(-132px) rotate(-30deg);}
body.scanner-dashboard-theme .clock-number.n2{transform:rotate(60deg) translateY(-132px) rotate(-60deg);}
body.scanner-dashboard-theme .clock-number.n3{transform:rotate(90deg) translateY(-132px) rotate(-90deg);}
body.scanner-dashboard-theme .clock-number.n4{transform:rotate(120deg) translateY(-132px) rotate(-120deg);}
body.scanner-dashboard-theme .clock-number.n5{transform:rotate(150deg) translateY(-132px) rotate(-150deg);}
body.scanner-dashboard-theme .clock-number.n6{transform:rotate(180deg) translateY(-132px) rotate(-180deg);}
body.scanner-dashboard-theme .clock-number.n7{transform:rotate(210deg) translateY(-132px) rotate(-210deg);}
body.scanner-dashboard-theme .clock-number.n8{transform:rotate(240deg) translateY(-132px) rotate(-240deg);}
body.scanner-dashboard-theme .clock-number.n9{transform:rotate(270deg) translateY(-132px) rotate(-270deg);}
body.scanner-dashboard-theme .clock-number.n10{transform:rotate(300deg) translateY(-132px) rotate(-300deg);}
body.scanner-dashboard-theme .clock-number.n11{transform:rotate(330deg) translateY(-132px) rotate(-330deg);}

body.scanner-dashboard-theme .clock-hand{
  position:absolute !important;
  left:50% !important;
  bottom:50% !important;
  transform-origin:50% 100% !important;
  border-radius:999px !important;
  z-index:4;
  box-shadow:0 0 12px rgba(214,168,79,.25) !important;
}

body.scanner-dashboard-theme .clock-hand.hour{
  width:8px !important;
  height:80px !important;
  margin-left:-4px !important;
  background:linear-gradient(180deg, #fff0bb, #d6a84f) !important;
}

body.scanner-dashboard-theme .clock-hand.minute{
  width:5px !important;
  height:112px !important;
  margin-left:-2.5px !important;
  background:linear-gradient(180deg, #fff0bb, #d6a84f) !important;
}

body.scanner-dashboard-theme .clock-hand.second{
  width:2px !important;
  height:126px !important;
  margin-left:-1px !important;
  background:linear-gradient(180deg, #f0c76a, #b8822b) !important;
}

body.scanner-dashboard-theme .clock-center{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:18px !important;
  height:18px !important;
  margin:-9px 0 0 -9px !important;
  border-radius:50% !important;
  z-index:5;
  background:var(--gold-2) !important;
  box-shadow:0 0 0 5px rgba(10,39,33,.88), 0 0 14px rgba(214,168,79,.42) !important;
}

/* Bigger, clearer Manual Patron ID / QR Code entry section */
body.scanner-dashboard-theme .entry-card{
  min-height:290px !important;
  padding:24px !important;
}

body.scanner-dashboard-theme .entry-card h3{
  font-size:23px !important;
  margin-bottom:18px !important;
}

body.scanner-dashboard-theme .entry-input-wrap{
  height:128px !important;
  padding:0 30px !important;
  margin:20px 0 18px !important;
  border-radius:20px !important;
  border:1.5px solid rgba(240,199,106,.88) !important;
  background:linear-gradient(145deg,rgba(6,24,21,.70),rgba(12,50,42,.66)) !important;
  box-shadow:
    0 0 0 4px rgba(214,168,79,.10),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 32px rgba(0,0,0,.12) !important;
}

body.scanner-dashboard-theme .entry-input-wrap input{
  font-size:26px !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
  color:var(--cream) !important;
}

body.scanner-dashboard-theme .entry-input-wrap input::placeholder{
  color:rgba(247,243,232,.70) !important;
}

body.scanner-dashboard-theme .qr-mini-icon{
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  gap:8px !important;
  filter:drop-shadow(0 0 12px rgba(214,168,79,.22)) !important;
}

body.scanner-dashboard-theme .qr-mini-icon i{
  border:5px solid var(--gold-2) !important;
  border-radius:6px !important;
}

body.scanner-dashboard-theme .qr-mini-icon b{
  width:28px !important;
  height:28px !important;
  right:0 !important;
  bottom:0 !important;
}

body.scanner-dashboard-theme .submit-entry{
  height:68px !important;
  border-radius:18px !important;
  font-size:20px !important;
  font-weight:950 !important;
}

/* Balance the latest update card with the larger manual entry card */
body.scanner-dashboard-theme .live-update-card{
  min-height:290px !important;
  padding:24px !important;
}

body.scanner-dashboard-theme .live-update-card h3{
  font-size:23px !important;
  margin-bottom:18px !important;
}

body.scanner-dashboard-theme .live-result{
  min-height:196px !important;
  margin-top:20px !important;
}

/* Recent Scans: exactly around 4 visible rows with vertical scrolling for more */
body.scanner-dashboard-theme .recent-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body.scanner-dashboard-theme .recent-card h3{
  flex:0 0 auto !important;
}

body.scanner-dashboard-theme .recent-table-wrap{
  flex:0 0 auto !important;
  max-height:292px !important;
  min-height:292px !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
  border-top:1px solid rgba(214,168,79,.26) !important;
}

body.scanner-dashboard-theme .recent-table th{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  padding:13px 20px !important;
}

body.scanner-dashboard-theme .recent-table td{
  padding:15px 20px !important;
  font-size:14px !important;
}

/* Responsive clock and entry sizing */
@media(max-width:1250px){
  body.scanner-dashboard-theme .analog-clock{
    width:280px !important;
    height:280px !important;
  }
  body.scanner-dashboard-theme .clock-number.n12{transform:rotate(0deg) translateY(-114px) rotate(0deg);}
  body.scanner-dashboard-theme .clock-number.n1{transform:rotate(30deg) translateY(-114px) rotate(-30deg);}
  body.scanner-dashboard-theme .clock-number.n2{transform:rotate(60deg) translateY(-114px) rotate(-60deg);}
  body.scanner-dashboard-theme .clock-number.n3{transform:rotate(90deg) translateY(-114px) rotate(-90deg);}
  body.scanner-dashboard-theme .clock-number.n4{transform:rotate(120deg) translateY(-114px) rotate(-120deg);}
  body.scanner-dashboard-theme .clock-number.n5{transform:rotate(150deg) translateY(-114px) rotate(-150deg);}
  body.scanner-dashboard-theme .clock-number.n6{transform:rotate(180deg) translateY(-114px) rotate(-180deg);}
  body.scanner-dashboard-theme .clock-number.n7{transform:rotate(210deg) translateY(-114px) rotate(-210deg);}
  body.scanner-dashboard-theme .clock-number.n8{transform:rotate(240deg) translateY(-114px) rotate(-240deg);}
  body.scanner-dashboard-theme .clock-number.n9{transform:rotate(270deg) translateY(-114px) rotate(-270deg);}
  body.scanner-dashboard-theme .clock-number.n10{transform:rotate(300deg) translateY(-114px) rotate(-300deg);}
  body.scanner-dashboard-theme .clock-number.n11{transform:rotate(330deg) translateY(-114px) rotate(-330deg);}
}

@media(max-width:760px){
  body.scanner-dashboard-theme .analog-clock{
    width:230px !important;
    height:230px !important;
  }
  body.scanner-dashboard-theme .entry-input-wrap{
    height:104px !important;
    padding:0 22px !important;
  }
  body.scanner-dashboard-theme .entry-input-wrap input{
    font-size:20px !important;
  }
  body.scanner-dashboard-theme .qr-mini-icon{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
  }
  body.scanner-dashboard-theme .recent-table-wrap{
    max-height:278px !important;
    min-height:278px !important;
  }
}


/* =========================================================
   VECTOR DASHBOARD METRIC ICONS
   Replaces emoji metric icons with clean inline SVG icons.
   ========================================================= */
body.scanner-dashboard-theme .metric-icon{
  color:var(--gold-2);
  overflow:hidden;
}

body.scanner-dashboard-theme .metric-svg{
  width:36px;
  height:36px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.08));
}

body.scanner-dashboard-theme .metric-card.male .metric-icon{
  color:#34d399 !important;
  border-color:#34d399 !important;
  background:rgba(52,211,153,.14) !important;
}

body.scanner-dashboard-theme .metric-card.female .metric-icon{
  color:#f472b6 !important;
  border-color:#f472b6 !important;
  background:rgba(244,114,182,.14) !important;
}

body.scanner-dashboard-theme .metric-card.visits .metric-icon{
  color:var(--gold-2) !important;
  border-color:var(--gold-2) !important;
  background:rgba(240,199,106,.14) !important;
}

body.scanner-dashboard-theme .metric-card.patron .metric-icon{
  color:#22c55e !important;
  border-color:#22c55e !important;
  background:rgba(34,197,94,.14) !important;
}

body.scanner-dashboard-theme .metric-card.course .metric-icon{
  color:#22d3ee !important;
  border-color:#22d3ee !important;
  background:rgba(34,211,238,.14) !important;
}

body.scanner-dashboard-theme .metric-card.male .metric-svg,
body.scanner-dashboard-theme .metric-card.female .metric-svg,
body.scanner-dashboard-theme .metric-card.patron .metric-svg,
body.scanner-dashboard-theme .metric-card.course .metric-svg,
body.scanner-dashboard-theme .metric-card.visits .metric-svg{
  stroke:currentColor !important;
}

@media(max-width:760px){
  body.scanner-dashboard-theme .metric-svg{
    width:32px;
    height:32px;
  }
}


/* =========================================================
   NON-REPETITIVE USER COUNT REPORT
   Emerald gold printable report design.
   ========================================================= */
.unique-summary-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr));
  gap:16px;
  margin:18px 0;
}

.unique-summary-card{
  min-height:128px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(16,61,52,.78),rgba(8,33,29,.94));
  border:1px solid rgba(214,168,79,.24);
  box-shadow:0 18px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
  color:var(--cream, #f7f3e8);
}

.unique-summary-card span{
  display:block;
  color:var(--cream-soft, #d9e7df);
  font-size:13px;
  font-weight:800;
  min-height:34px;
}

.unique-summary-card strong{
  display:block;
  color:var(--gold-2, #f0c76a);
  font-size:34px;
  line-height:1;
  margin:10px 0 8px;
  font-weight:950;
}

.unique-summary-card small{
  color:var(--cream-muted, #b7c9c1);
  font-weight:600;
}

.report-filter-card{
  margin-bottom:18px;
}

.report-action-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.report-table-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.report-table-title h2{
  margin:0 0 5px;
}

.report-table-title p{
  margin:0;
  color:var(--cream-soft, #d9e7df);
}

.report-table-title strong{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(214,168,79,.13);
  border:1px solid rgba(214,168,79,.28);
  color:var(--gold-2, #f0c76a);
  white-space:nowrap;
}

.unique-report-table-wrap{
  max-height:560px;
  overflow:auto;
  border-radius:16px;
}

.unique-report-table th{
  position:fixed;
  top:0;
  z-index:2;
}

.unique-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:7px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold, #d6a84f),var(--gold-2, #f0c76a));
  color:var(--emerald-950, #061815);
  font-weight:950;
}

@media(max-width:1200px){
  .unique-summary-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){
  .unique-summary-grid{
    grid-template-columns:1fr;
  }
  .report-table-title{
    flex-direction:column;
  }
}

@media print{
  .sidebar,
  .topbar .actions,
  .report-filter-card,
  .btn,
  .actions{
    display:none !important;
  }

  .layout{
    display:block !important;
  }

  .main{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  body{
    background:#fff !important;
    color:#000 !important;
  }

  .card,
  .unique-summary-card{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
    border:1px solid #999 !important;
  }

  .unique-summary-card strong,
  .report-table-title strong{
    color:#000 !important;
  }

  table,
  th,
  td{
    color:#000 !important;
    background:#fff !important;
    border:1px solid #777 !important;
  }
}


/* =========================================================
   DOWNLOAD QR CODE / QR ID CARD BUTTONS
   Emerald-gold action buttons for Patrons page.
   ========================================================= */
.patron-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  min-width:320px;
}

.btn.qr-download{
  color:#061815 !important;
  background:linear-gradient(135deg,#34d399,#22c55e) !important;
  box-shadow:0 12px 24px rgba(34,197,94,.18) !important;
}

.btn.qr-card-download{
  color:#061815 !important;
  background:linear-gradient(135deg,var(--gold,#d6a84f),var(--gold-2,#f0c76a)) !important;
  box-shadow:0 12px 24px rgba(214,168,79,.18) !important;
}

.btn.qr-download:hover,
.btn.qr-card-download:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

@media(max-width:900px){
  .patron-actions{
    min-width:220px;
  }
}


/* =========================================================
   BULK QR PRINT FEATURE
   A4 portrait layout: 30 QR codes per page, 3 columns x 10 rows.
   ========================================================= */
.bulk-title-row,
.bulk-print-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.bulk-title-row p,
.bulk-print-toolbar span{
  display:block;
  margin-top:6px;
  color:var(--cream-soft,#d9e7df);
}

.bulk-patron-table-wrap{
  max-height:430px;
  overflow:auto;
  border-radius:16px;
}

.bulk-patron-table th{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
}

.bulk-check{
  width:20px;
  height:20px;
  accent-color:var(--gold,#d6a84f);
}

.bulk-print-toolbar{
  margin:18px 0;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(16,61,52,.78),rgba(8,33,29,.94));
  border:1px solid rgba(214,168,79,.24);
  box-shadow:0 18px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
  color:var(--cream,#f7f3e8);
}

.bulk-a4-print-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.a4-page{
  width:210mm;
  min-height:297mm;
  padding:8mm;
  box-sizing:border-box;
  background:#fff;
  color:#000;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(10, 1fr);
  gap:2.4mm;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  page-break-after:always;
}

.a4-page:last-child{
  page-break-after:auto;
}

.bulk-qr-item{
  border:1px solid #0b2f28;
  border-radius:2.5mm;
  padding:2.2mm 2mm;
  box-sizing:border-box;
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:#fff;
}

.bulk-name{
  width:100%;
  color:#0b2f28;
  font-family:var(--system-font);
  font-size:8.8pt;
  line-height:1.06;
  min-height:18pt;
  font-weight:900;
  text-transform:uppercase;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.bulk-code{
  margin:1.2mm 0 1.2mm;
  color:#111;
  font-family:var(--system-font);
  font-size:7.8pt;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.bulk-qr-item img{
  width:25mm;
  height:25mm;
  object-fit:contain;
  display:block;
}

.empty-print-slot{
  border:1px dashed #ddd;
  background:#fff;
}

/* A4 print settings */
@page{
  size:A4 portrait;
  margin:8mm;
}

@media print{
  html,
  body{
    width:210mm;
    min-height:297mm;
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
  }

  .bulk-screen-only,
  .sidebar,
  .topbar,
  .actions,
  .btn,
  footer{
    display:none !important;
  }

  .layout,
  .bulk-qr-layout,
  .main{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .bulk-a4-print-area{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  .a4-page{
    width:194mm !important;
    height:281mm !important;
    min-height:281mm !important;
    padding:0 !important;
    margin:0 auto !important;
    box-shadow:none !important;
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    grid-template-rows:repeat(10, 1fr) !important;
    gap:2.2mm !important;
    page-break-after:always !important;
    break-after:page !important;
  }

  .a4-page:last-child{
    page-break-after:auto !important;
    break-after:auto !important;
  }

  .bulk-qr-item{
    border:1px solid #111 !important;
    border-radius:2mm !important;
    padding:2mm 1.8mm !important;
    color:#000 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .bulk-name{
    color:#000 !important;
    font-size:8.4pt !important;
  }

  .bulk-code{
    color:#000 !important;
    font-size:7.4pt !important;
  }

  .bulk-qr-item img{
    width:24mm !important;
    height:24mm !important;
  }

  .empty-print-slot{
    visibility:hidden !important;
  }
}


/* =========================================================
   BULK QR PRINT FINAL UPDATE: 15 QR CODES PER A4 PAGE
   Print output only shows Full Name, Patron ID / QR Code, and QR Code.
   Layout: A4 portrait, 3 columns x 5 rows.
   ========================================================= */
.bulk-a4-print-area .a4-page{
  grid-template-columns:repeat(3, 1fr) !important;
  grid-template-rows:repeat(5, 1fr) !important;
  gap:4mm !important;
}

.bulk-a4-print-area .bulk-qr-item{
  justify-content:center !important;
  padding:4mm 3mm !important;
}

.bulk-a4-print-area .bulk-name{
  font-size:10.5pt !important;
  min-height:23pt !important;
  margin-bottom:1.5mm !important;
}

.bulk-a4-print-area .bulk-code{
  font-size:9.5pt !important;
  margin:1mm 0 2.5mm !important;
}

.bulk-a4-print-area .bulk-qr-item img{
  width:34mm !important;
  height:34mm !important;
}

/* A4 print settings for exactly 15 QR codes per page */
@page{
  size:A4 portrait;
  margin:8mm;
}

@media print{
  /* Hide everything first to prevent search, selection table, sidebar,
     browser-layout text, buttons, and instructions from printing. */
  body *{
    visibility:hidden !important;
  }

  html,
  body{
    width:210mm !important;
    min-height:297mm !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  .bulk-a4-print-area,
  .bulk-a4-print-area *,
  .a4-page,
  .a4-page *{
    visibility:visible !important;
  }

  .bulk-a4-print-area{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .bulk-screen-only,
  .sidebar,
  .topbar,
  .actions,
  .btn,
  .card:not(.bulk-a4-print-area),
  .bulk-patron-table-wrap,
  .bulk-title-row,
  .bulk-print-toolbar,
  form,
  nav,
  footer{
    display:none !important;
    visibility:hidden !important;
  }

  .layout,
  .bulk-qr-layout,
  .main{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .a4-page{
    width:194mm !important;
    height:281mm !important;
    min-height:281mm !important;
    margin:0 auto !important;
    padding:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    grid-template-rows:repeat(5, 1fr) !important;
    gap:4mm !important;
    page-break-after:always !important;
    break-after:page !important;
  }

  .a4-page:last-child{
    page-break-after:auto !important;
    break-after:auto !important;
  }

  .bulk-qr-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border:1px solid #111 !important;
    border-radius:2.5mm !important;
    padding:4mm 3mm !important;
    color:#000 !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .bulk-name{
    display:block !important;
    width:100% !important;
    color:#000 !important;
    font-family:var(--system-font) !important;
    font-size:10.2pt !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-transform:uppercase !important;
    margin:0 0 1.5mm !important;
    min-height:22pt !important;
    overflow:hidden !important;
  }

  .bulk-code{
    display:block !important;
    max-width:100% !important;
    color:#000 !important;
    font-family:var(--system-font) !important;
    font-size:9.2pt !important;
    font-weight:900 !important;
    line-height:1 !important;
    margin:0 0 2.5mm !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .bulk-qr-item img{
    display:block !important;
    width:34mm !important;
    height:34mm !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  .empty-print-slot{
    visibility:hidden !important;
    border:0 !important;
  }
}


/* =========================================================
   BULK QR PRINT FINAL UPDATE: 20 QR CODES PER A4 PAGE
   Print output only shows Full Name, Patron ID / QR Code, and QR Code.
   Layout: A4 portrait, 4 columns x 5 rows.
   ========================================================= */
.bulk-a4-print-area .a4-page{
  grid-template-columns:repeat(4, 1fr) !important;
  grid-template-rows:repeat(5, 1fr) !important;
  gap:3mm !important;
}

.bulk-a4-print-area .bulk-qr-item{
  justify-content:center !important;
  padding:3mm 2mm !important;
}

.bulk-a4-print-area .bulk-name{
  font-size:8.6pt !important;
  min-height:20pt !important;
  margin-bottom:1mm !important;
}

.bulk-a4-print-area .bulk-code{
  font-size:8pt !important;
  margin:1mm 0 1.8mm !important;
}

.bulk-a4-print-area .bulk-qr-item img{
  width:31mm !important;
  height:31mm !important;
}

/* A4 print settings for exactly 20 QR codes per page */
@page{
  size:A4 portrait;
  margin:8mm;
}

@media print{
  /* Hide all screen-only elements and print only QR labels */
  body *{
    visibility:hidden !important;
  }

  html,
  body{
    width:210mm !important;
    min-height:297mm !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  .bulk-a4-print-area,
  .bulk-a4-print-area *,
  .a4-page,
  .a4-page *{
    visibility:visible !important;
  }

  .bulk-a4-print-area{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .bulk-screen-only,
  .sidebar,
  .topbar,
  .actions,
  .btn,
  .card:not(.bulk-a4-print-area),
  .bulk-patron-table-wrap,
  .bulk-title-row,
  .bulk-print-toolbar,
  form,
  nav,
  footer{
    display:none !important;
    visibility:hidden !important;
  }

  .layout,
  .bulk-qr-layout,
  .main{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  .a4-page{
    width:194mm !important;
    height:281mm !important;
    min-height:281mm !important;
    margin:0 auto !important;
    padding:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    grid-template-rows:repeat(5, 1fr) !important;
    gap:3mm !important;
    page-break-after:always !important;
    break-after:page !important;
  }

  .a4-page:last-child{
    page-break-after:auto !important;
    break-after:auto !important;
  }

  .bulk-qr-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border:1px solid #111 !important;
    border-radius:2.2mm !important;
    padding:3mm 2mm !important;
    color:#000 !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .bulk-name{
    display:block !important;
    width:100% !important;
    color:#000 !important;
    font-family:var(--system-font) !important;
    font-size:8.2pt !important;
    font-weight:900 !important;
    line-height:1.08 !important;
    text-transform:uppercase !important;
    margin:0 0 1mm !important;
    min-height:19pt !important;
    overflow:hidden !important;
  }

  .bulk-code{
    display:block !important;
    max-width:100% !important;
    color:#000 !important;
    font-family:var(--system-font) !important;
    font-size:7.8pt !important;
    font-weight:900 !important;
    line-height:1 !important;
    margin:0 0 1.8mm !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .bulk-qr-item img{
    display:block !important;
    width:31mm !important;
    height:31mm !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  .empty-print-slot{
    visibility:hidden !important;
    border:0 !important;
  }
}


/* =========================================================
   AUTOMATED EXCEL ATTENDANCE REPORT
   Emerald-gold style for the report generator page.
   ========================================================= */
.report-action-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.topbar .actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media(max-width:760px){
  .topbar .actions{
    width:100%;
  }
  .topbar .actions .btn{
    width:100%;
    text-align:center;
  }
}


/* =========================================================
   WPU UNIVERSITY LIBRARY EMERALD DASHBOARD DESIGN
   Applies uploaded dashboard style to scanner and login page.
   ========================================================= */
:root{
  --wpu-emerald-bg:#062721;
  --wpu-emerald-deep:#031915;
  --wpu-emerald-card:#0b3a31;
  --wpu-emerald-card-2:#0e4a3d;
  --wpu-emerald-line:rgba(128, 203, 183, .20);
  --wpu-gold:#f2c15c;
  --wpu-gold-2:#ffd36f;
  --wpu-cream:#f8f2e6;
}

body.scanner-dashboard-theme{
  background:
    radial-gradient(circle at 18% 12%, rgba(15,151,111,.22), transparent 34%),
    radial-gradient(circle at 76% 26%, rgba(6,90,72,.26), transparent 34%),
    linear-gradient(135deg,#031815 0%,#062721 44%,#0a3a31 100%) !important;
  color:var(--wpu-cream) !important;
}

body.scanner-dashboard-theme::before{
  opacity:.10 !important;
  background:
    linear-gradient(rgba(242,193,92,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(242,193,92,.05) 1px, transparent 1px) !important;
  background-size:54px 54px !important;
}

body.scanner-dashboard-theme .scanner-shell{
  width:min(1920px,100%) !important;
  min-height:100vh;
  padding:14px !important;
  gap:18px !important;
}

body.scanner-dashboard-theme .scan-panel,
body.scanner-dashboard-theme .attendance-panel,
body.scanner-dashboard-theme .metric-card,
body.scanner-dashboard-theme .manual-card,
body.scanner-dashboard-theme .latest-card,
body.scanner-dashboard-theme .recent-card{
  background:
    radial-gradient(circle at 50% 0%, rgba(18,95,78,.60), transparent 56%),
    linear-gradient(160deg,rgba(12,67,56,.88),rgba(5,31,27,.96)) !important;
  border:1px solid rgba(128,203,183,.22) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.scanner-dashboard-theme .scan-panel{
  padding:26px 22px 16px !important;
  gap:18px !important;
}

.wpu-scanner-brand{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-height:122px;
}

.wpu-brand-logo{
  width:118px !important;
  height:118px !important;
  object-fit:contain !important;
  border-radius:50% !important;
  background:#fff !important;
  padding:4px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
  flex:0 0 auto !important;
}

.brand-kicker{
  display:block;
  color:var(--wpu-cream);
  font-weight:800;
  font-size:22px;
  line-height:1.05;
  margin-bottom:6px;
}

body.scanner-dashboard-theme .scan-panel-head h1{
  color:#fff !important;
  font-size:34px !important;
  line-height:.98 !important;
  letter-spacing:-.05em !important;
  margin:0 !important;
}

body.scanner-dashboard-theme .scan-panel-head p{
  color:#f7ead4 !important;
  font-size:16px !important;
  margin-top:9px !important;
}

body.scanner-dashboard-theme .brand-icon-grid{
  display:none !important;
}

body.scanner-dashboard-theme .camera-frame{
  height:400px !important;
  border-radius:18px !important;
  border:1.5px solid var(--wpu-gold) !important;
  background:
    linear-gradient(110deg,rgba(10,67,80,.32),transparent 36%),
    #020d13 !important;
}

body.scanner-dashboard-theme .scan-helper-text{
  color:#e6eee9 !important;
  font-size:16px !important;
}

body.scanner-dashboard-theme .scan-corner{
  border-color:var(--wpu-gold-2) !important;
  filter:drop-shadow(0 0 8px rgba(242,193,92,.52));
}

body.scanner-dashboard-theme .analog-clock-wrap{
  padding:0 !important;
  margin-top:2px !important;
}

body.scanner-dashboard-theme .analog-clock{
  width:300px !important;
  height:300px !important;
  border-width:8px !important;
  border-color:var(--wpu-gold-2) !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(15,151,111,.12), transparent 46%),
    linear-gradient(145deg,#092f29,#06231f 58%,#0c3b32 100%) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 0 42px rgba(242,193,92,.10) !important;
}

body.scanner-dashboard-theme .clock-number{
  color:var(--wpu-gold-2) !important;
  font-weight:950 !important;
  font-size:19px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}

body.scanner-dashboard-theme .clock-hand{
  background:var(--wpu-gold-2) !important;
  box-shadow:0 0 10px rgba(242,193,92,.35);
}

body.scanner-dashboard-theme .clock-hand.second{
  background:#f5b443 !important;
}

body.scanner-dashboard-theme .clock-center{
  background:var(--wpu-gold-2) !important;
  border-color:#101f1b !important;
}

body.scanner-dashboard-theme .section-title-row h2,
body.scanner-dashboard-theme .manual-card h2,
body.scanner-dashboard-theme .latest-card h2,
body.scanner-dashboard-theme .recent-card h2{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}

body.scanner-dashboard-theme .section-title-row h2 span,
body.scanner-dashboard-theme .manual-card h2::before,
body.scanner-dashboard-theme .latest-card h2::before,
body.scanner-dashboard-theme .recent-card h2::before{
  background:linear-gradient(180deg,var(--wpu-gold-2),#efa72e) !important;
}

body.scanner-dashboard-theme .qr-input-wrap,
body.scanner-dashboard-theme .scan-result{
  border-color:rgba(242,193,92,.64) !important;
  background:rgba(5,35,30,.74) !important;
}

body.scanner-dashboard-theme .manual-input{
  color:#fff !important;
}

body.scanner-dashboard-theme .manual-input::placeholder{
  color:rgba(248,242,230,.72) !important;
}

body.scanner-dashboard-theme .submit-scan{
  background:linear-gradient(135deg,var(--wpu-gold),var(--wpu-gold-2)) !important;
  color:#071c18 !important;
  border:0 !important;
  font-weight:950 !important;
}

body.scanner-dashboard-theme .scanner-top-logout{
  background:linear-gradient(135deg,#ef4444,#dc2626) !important;
  color:#fff !important;
  border:0 !important;
}

body.scanner-dashboard-theme .recent-table thead th,
body.scanner-dashboard-theme .table thead th{
  background:rgba(4,24,21,.80) !important;
  color:#fff !important;
  border-color:rgba(128,203,183,.14) !important;
}

body.scanner-dashboard-theme .recent-table td,
body.scanner-dashboard-theme .table td{
  color:#f6fbf7 !important;
  border-color:rgba(128,203,183,.12) !important;
}

body.scanner-dashboard-theme .metric-icon{
  background:rgba(3,24,21,.35) !important;
}

body.scanner-dashboard-theme .metric-card h3,
body.scanner-dashboard-theme .metric-card p{
  color:#f6ead9 !important;
}

/* Login page WPU design */
body.login-blue-yellow{
  background:
    radial-gradient(circle at 18% 16%, rgba(15,151,111,.22), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(242,193,92,.16), transparent 26%),
    linear-gradient(135deg,#031815 0%,#062721 50%,#0b3a31 100%) !important;
}

.clean-visual-panel,
.clean-panel-card{
  background:
    radial-gradient(circle at 50% 0%, rgba(18,95,78,.60), transparent 56%),
    linear-gradient(160deg,rgba(12,67,56,.88),rgba(5,31,27,.96)) !important;
  border:1px solid rgba(128,203,183,.22) !important;
}

.login-wpu-brand{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:34px;
}

.login-wpu-logo{
  width:116px;
  height:116px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:5px;
  box-shadow:0 14px 36px rgba(0,0,0,.25);
}

.login-wpu-brand span{
  display:block;
  color:var(--wpu-cream);
  font-size:24px;
  font-weight:800;
  margin-bottom:8px;
}

.login-wpu-brand h1{
  margin:0;
  color:#fff;
  font-size:46px;
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:950;
}

.login-wpu-brand h1 b{
  font-weight:950;
}

.login-wpu-brand p{
  margin:12px 0 0;
  color:#f6ead9;
  font-size:17px;
  font-weight:600;
}

.login-form-logo{
  width:62px;
  height:62px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:4px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.clean-panel-card h2{
  color:#fff !important;
}

.clean-input{
  border-color:rgba(242,193,92,.35) !important;
  background:rgba(5,35,30,.74) !important;
}

.clean-input input{
  color:#fff !important;
}

.clean-input input::placeholder{
  color:rgba(248,242,230,.62) !important;
}

.clean-login-btn{
  background:linear-gradient(135deg,var(--wpu-gold),var(--wpu-gold-2)) !important;
  color:#071c18 !important;
  font-weight:950 !important;
}

/* Responsive adjustments */
@media(max-width:1100px){
  .wpu-brand-logo{width:82px !important;height:82px !important;}
  body.scanner-dashboard-theme .scan-panel-head h1{font-size:28px !important;}
  .brand-kicker{font-size:18px;}
  body.scanner-dashboard-theme .analog-clock{width:240px !important;height:240px !important;}
}


/* =========================================================
   PATRON PHOTO DISPLAY ON TIME-IN / TIME-OUT
   Shows patron uploaded photo; WPU logo is used as default avatar.
   ========================================================= */
body.scanner-dashboard-theme .live-result{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

body.scanner-dashboard-theme .result-icon{
  display:none !important;
}

body.scanner-dashboard-theme .result-photo{
  width:86px !important;
  height:86px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  background:#fff !important;
  padding:4px !important;
  border:3px solid #22c55e !important;
  box-shadow:0 12px 32px rgba(0,0,0,.32), 0 0 0 6px rgba(34,197,94,.12) !important;
  flex:0 0 auto !important;
}

body.scanner-dashboard-theme .live-result.error .result-photo{
  border-color:#ef4444 !important;
  box-shadow:0 12px 32px rgba(0,0,0,.32), 0 0 0 6px rgba(239,68,68,.12) !important;
}

body.scanner-dashboard-theme .patron-photo-wrap{
  display:inline-flex !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:12px !important;
  background:#fff !important;
  border:2px solid var(--wpu-gold-2, #ffd36f) !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  box-shadow:0 6px 18px rgba(0,0,0,.20) !important;
}

body.scanner-dashboard-theme .patron-photo-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

body.scanner-dashboard-theme .recent-table td:first-child{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

body.scanner-dashboard-theme .recent-table td:first-child b{
  display:inline-block !important;
}


/* =========================================================
   REFINED PATRON PHOTO + LOGIN SAMPLE DESIGN
   Smaller patron photos and login style adapted from uploaded sample.
   ========================================================= */
body.scanner-dashboard-theme .live-result{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

body.scanner-dashboard-theme .result-icon{
  display:none !important;
}

body.scanner-dashboard-theme .result-photo{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  min-height:64px !important;
  max-height:64px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  background:#fff !important;
  padding:3px !important;
  border:2px solid #22c55e !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 0 5px rgba(34,197,94,.10) !important;
  flex:0 0 64px !important;
}

body.scanner-dashboard-theme .live-result.error .result-photo{
  border-color:#ef4444 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 0 5px rgba(239,68,68,.10) !important;
}

body.scanner-dashboard-theme .patron-photo-wrap{
  display:inline-flex !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  border-radius:50% !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:12px !important;
  background:#fff !important;
  border:2px solid var(--wpu-gold-2, #ffd36f) !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  box-shadow:0 6px 16px rgba(0,0,0,.20) !important;
  flex:0 0 42px !important;
}

body.scanner-dashboard-theme .patron-photo-thumb{
  width:100% !important;
  height:100% !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:cover !important;
  display:block !important;
}

body.scanner-dashboard-theme .recent-table td:first-child{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  min-width:260px !important;
}

body.scanner-dashboard-theme .recent-table tr{
  height:58px !important;
}

body.scanner-dashboard-theme .recent-table td{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

body.scanner-dashboard-theme .recent-table td:first-child b{
  display:inline-block !important;
  white-space:nowrap !important;
}

/* Login page adapted from the uploaded sample */
body.login-blue-yellow{
  background:
    radial-gradient(circle at 18% 16%, rgba(15,151,111,.24), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(242,193,92,.12), transparent 26%),
    linear-gradient(135deg,#031815 0%,#062721 50%,#0b3a31 100%) !important;
}

.simple-login-shell{
  padding:58px 72px !important;
}

.clean-login{
  grid-template-columns:minmax(0,1.18fr) 560px !important;
  gap:34px !important;
}

.clean-visual-panel,
.clean-panel-card{
  border-radius:30px !important;
  border:1.5px solid rgba(242,193,92,.42) !important;
  background:
    radial-gradient(circle at 72% 34%, rgba(242,193,92,.10), transparent 28%),
    radial-gradient(circle at 24% 12%, rgba(15,151,111,.35), transparent 30%),
    linear-gradient(160deg,rgba(12,67,56,.88),rgba(5,31,27,.96)) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(255,211,111,.10) !important;
}

.wpu-login-visual{
  padding:90px 70px 64px !important;
}

.sample-login-brand{
  gap:34px !important;
  margin-bottom:42px !important;
}

.sample-login-brand .login-wpu-logo{
  width:150px !important;
  height:150px !important;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.32));
}

.sample-login-brand span{
  color:#f7c85f !important;
  font-size:30px !important;
  letter-spacing:-.02em !important;
}

.sample-login-brand h1{
  font-size:58px !important;
  line-height:.96 !important;
  color:#fff !important;
}

.sample-login-brand i{
  display:block;
  width:62px;
  height:3px;
  background:linear-gradient(90deg,#ffd36f,#f2c15c);
  border-radius:99px;
  margin:24px 0 0;
  box-shadow:0 0 18px rgba(242,193,92,.50);
}

.sample-login-brand p{
  font-size:22px !important;
  color:#fff7e8 !important;
  margin-top:18px !important;
}

.sample-preview-window{
  min-height:330px !important;
  border-radius:28px !important;
  border:1.5px solid rgba(242,193,92,.38) !important;
  background:rgba(9,45,39,.62) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.22) !important;
}

.clean-panel-card{
  padding:70px 56px !important;
}

.compact-login-header{
  align-items:center !important;
  gap:22px !important;
  margin-bottom:42px !important;
}

.login-form-logo{
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  background:#fff !important;
}

.clean-panel-card h2{
  color:#fff !important;
  font-size:34px !important;
  letter-spacing:-.04em !important;
}

.login-title-line{
  display:block;
  width:46px;
  height:3px;
  background:#ffd36f;
  border-radius:99px;
  margin-top:12px;
}

.clean-material-form label{
  color:#f7ead4 !important;
  font-size:18px !important;
  margin-bottom:12px !important;
}

.clean-material-form label::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  background:#ffd36f;
  border-radius:50%;
  margin-right:12px;
  box-shadow:0 0 14px rgba(255,211,111,.60);
}

.clean-input{
  height:76px !important;
  border-radius:18px !important;
  border:1.5px solid rgba(221,245,234,.28) !important;
  background:rgba(5,35,30,.70) !important;
  overflow:hidden !important;
}

.clean-input span{
  color:#ffd36f !important;
  min-width:66px !important;
  border-right:1px solid rgba(221,245,234,.16) !important;
  display:grid !important;
  place-items:center !important;
  height:100% !important;
}

.clean-input input{
  color:#fff !important;
  font-size:23px !important;
}

.clean-input input::placeholder{
  color:rgba(248,242,230,.60) !important;
}

.sample-login-button{
  height:86px !important;
  border-radius:18px !important;
  margin-top:30px !important;
  background:linear-gradient(135deg,#d6a84f,#ffd977 52%,#f0c76a) !important;
  color:#071c18 !important;
  font-size:22px !important;
  font-weight:900 !important;
  box-shadow:0 20px 46px rgba(214,168,79,.24), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.sample-login-button span{
  font-size:30px !important;
  margin-left:16px !important;
}

@media(max-width:1050px){
  .simple-login-shell{padding:30px 20px !important;}
  .clean-login{grid-template-columns:1fr !important;}
  .wpu-login-visual{padding:48px 34px !important;}
  .sample-login-brand .login-wpu-logo{width:105px !important;height:105px !important;}
  .sample-login-brand h1{font-size:42px !important;}
}


/* =========================================================
   EXACT WPU UNIVERSITY LIBRARY LOGIN DESIGN
   Adapted from uploaded reference image.
   ========================================================= */
body.wpu-login-page{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  font-family:var(--system-font);
  color:#fff;
  background:
    radial-gradient(circle at 22% 18%, rgba(35,156,122,.34), transparent 30%),
    radial-gradient(circle at 78% 16%, rgba(242,193,92,.13), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.40), transparent 48%),
    linear-gradient(135deg,#031815 0%,#062721 50%,#0b3a31 100%);
}
body.wpu-login-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.22;
}
.wpu-login-shell{
  position:relative;
  z-index:1;
  width:min(1720px,calc(100vw - 92px));
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(620px,1.25fr) 610px;
  gap:34px;
  align-items:center;
  padding:56px 0;
}
.wpu-login-left,
.wpu-login-card{
  min-height:820px;
  border-radius:30px;
  border:2px solid rgba(242,193,92,.42);
  background:
    radial-gradient(circle at 72% 36%, rgba(242,193,92,.095), transparent 31%),
    radial-gradient(circle at 24% 12%, rgba(23,143,108,.42), transparent 32%),
    linear-gradient(160deg,rgba(12,67,56,.84),rgba(5,31,27,.96));
  box-shadow:
    0 34px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,211,111,.08);
  position:relative;
  overflow:hidden;
}
.wpu-login-left::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(242,193,92,.16);
  border-radius:50%;
  right:34px;
  top:80px;
  box-shadow:0 0 0 70px rgba(242,193,92,.055), 0 0 0 150px rgba(242,193,92,.035);
  pointer-events:none;
}
.wpu-login-left::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:70px;
  top:34px;
  opacity:.20;
  background-image:radial-gradient(rgba(255,255,255,.42) 1px,transparent 1px);
  background-size:18px 18px;
}
.wpu-login-left{
  padding:90px 72px 66px;
}
.wpu-login-hero{
  display:flex;
  align-items:center;
  gap:40px;
  position:relative;
  z-index:2;
}
.wpu-login-seal-large{
  width:158px;
  height:158px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:5px;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.34));
  flex:0 0 auto;
}
.wpu-login-kicker{
  display:block;
  color:#f7c85f;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:18px;
  text-shadow:0 8px 24px rgba(0,0,0,.26);
}
.wpu-login-title-block h1{
  margin:0;
  color:#fff;
  font-size:64px;
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:950;
  text-shadow:0 10px 28px rgba(0,0,0,.34);
}
.wpu-gold-rule{
  display:block;
  width:64px;
  height:3px;
  margin:30px 0 18px;
  border-radius:99px;
  background:linear-gradient(90deg,#ffe28d,#f2c15c);
  box-shadow:0 0 18px rgba(242,193,92,.55);
}
.wpu-login-title-block p{
  margin:0;
  color:#fff7e8;
  font-size:23px;
  font-weight:500;
  letter-spacing:-.015em;
}
.wpu-camera-preview{
  position:relative;
  z-index:2;
  height:395px;
  margin:72px 0 0;
  border-radius:30px;
  border:1.6px solid rgba(233,220,170,.34);
  background:linear-gradient(145deg,rgba(13,62,54,.62),rgba(5,34,30,.76));
  box-shadow:0 26px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.wpu-scan-corner{
  position:absolute;
  width:74px;
  height:74px;
  border-color:#ffd36f;
  filter:drop-shadow(0 0 8px rgba(255,211,111,.44));
}
.wpu-scan-corner.tl{left:44px;top:42px;border-left:6px solid #ffd36f;border-top:6px solid #ffd36f;border-radius:8px 0 0 0;}
.wpu-scan-corner.tr{right:44px;top:42px;border-right:6px solid #ffd36f;border-top:6px solid #ffd36f;border-radius:0 8px 0 0;}
.wpu-scan-corner.bl{left:44px;bottom:42px;border-left:6px solid #ffd36f;border-bottom:6px solid #ffd36f;border-radius:0 0 0 8px;}
.wpu-scan-corner.br{right:44px;bottom:42px;border-right:6px solid #ffd36f;border-bottom:6px solid #ffd36f;border-radius:0 0 8px 0;}
.wpu-command-icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:92px;
  color:rgba(224,239,231,.25);
  font-weight:200;
}
.wpu-camera-pill{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  height:62px;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:16px;
  border-radius:999px;
  color:#fff;
  background:rgba(12,88,70,.76);
  border:1px solid rgba(115,220,178,.24);
  box-shadow:0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
  font-size:22px;
  font-weight:700;
  white-space:nowrap;
}
.wpu-camera-pill span{
  color:#d9f6ea;
}
.wpu-camera-pill b{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#3ee68d;
  box-shadow:0 0 16px rgba(62,230,141,.70);
}

/* Right login card */
.wpu-login-card{
  padding:78px 48px;
}
.wpu-login-card-head{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:58px;
}
.wpu-login-seal-small{
  width:92px;
  height:92px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:4px;
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.wpu-login-card h2{
  margin:0;
  color:#fff;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
  text-shadow:0 10px 28px rgba(0,0,0,.28);
}
.wpu-card-title-line{
  display:block;
  width:48px;
  height:3px;
  margin-top:18px;
  border-radius:99px;
  background:#ffd36f;
  box-shadow:0 0 18px rgba(255,211,111,.54);
}
.wpu-login-form label{
  display:block;
  color:#f7ead4;
  font-size:22px;
  font-weight:500;
  margin:0 0 14px;
}
.wpu-login-form > label::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-right:13px;
  transform:translateY(-2px);
  background:#ffd36f;
  box-shadow:0 0 16px rgba(255,211,111,.70);
}
.wpu-field{
  height:82px;
  display:flex;
  align-items:center;
  margin-bottom:42px;
  border-radius:18px;
  border:1.6px solid rgba(221,245,234,.28);
  background:rgba(3,29,26,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.wpu-field-icon{
  width:74px;
  height:100%;
  display:grid;
  place-items:center;
  color:#ffd36f;
  font-size:30px;
  border-right:1px solid rgba(221,245,234,.13);
  flex:0 0 auto;
}
.wpu-field input{
  min-width:0;
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:24px;
  padding:0 24px;
}
.wpu-field input::placeholder{
  color:rgba(248,242,230,.55);
}
.wpu-eye{
  width:76px;
  height:100%;
  border:0;
  background:transparent;
  color:#ffd36f;
  font-size:27px;
  cursor:pointer;
}
.wpu-login-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:-4px 0 42px;
  color:#fff7e8;
  font-size:19px;
}
.wpu-check{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin:0 !important;
  color:#fff7e8 !important;
  cursor:pointer;
}
.wpu-check::before{display:none !important;}
.wpu-check input{display:none;}
.wpu-check span{
  width:25px;
  height:25px;
  border-radius:6px;
  display:inline-block;
  border:2px solid #45c690;
  background:rgba(6,75,60,.62);
  position:relative;
}
.wpu-check span::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#8cffc3;
  font-size:16px;
  font-weight:900;
}
.wpu-forgot{
  color:#ffd36f;
  cursor:default;
}
.wpu-login-btn{
  width:100%;
  height:92px;
  border:0;
  border-radius:18px;
  cursor:pointer;
  background:linear-gradient(135deg,#d6a84f,#ffd977 52%,#f0c76a);
  color:#071c18;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow:0 18px 42px rgba(214,168,79,.28), inset 0 1px 0 rgba(255,255,255,.48);
}
.wpu-login-btn span{
  font-size:34px;
  margin-left:22px;
  vertical-align:-2px;
}
.wpu-secure{
  margin-top:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:rgba(248,242,230,.70);
  font-size:17px;
}
.wpu-secure::before,
.wpu-secure::after{
  content:"";
  height:1px;
  width:150px;
  background:rgba(221,245,234,.18);
}
.wpu-secure i{
  width:28px;
  height:28px;
  border:2px solid #ffd36f;
  border-radius:9px 9px 11px 11px;
  position:relative;
}
.wpu-secure i::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffd36f;
  font-size:14px;
  font-weight:900;
}
@media(max-width:1240px){
  .wpu-login-shell{
    grid-template-columns:1fr;
    width:min(900px,calc(100vw - 40px));
  }
  .wpu-login-left,.wpu-login-card{min-height:auto;}
}
@media(max-width:720px){
  .wpu-login-shell{padding:24px 0;}
  .wpu-login-left{padding:42px 28px;}
  .wpu-login-hero{flex-direction:column;text-align:center;gap:22px;}
  .wpu-login-title-block h1{font-size:42px;}
  .wpu-login-kicker{font-size:24px;}
  .wpu-gold-rule{margin-left:auto;margin-right:auto;}
  .wpu-camera-preview{height:280px;margin-top:38px;}
  .wpu-login-card{padding:42px 28px;}
  .wpu-login-card-head{flex-direction:column;text-align:center;gap:18px;}
  .wpu-card-title-line{margin-left:auto;margin-right:auto;}
  .wpu-login-options{flex-direction:column;gap:18px;align-items:flex-start;}
  .wpu-secure::before,.wpu-secure::after{width:60px;}
}


/* =========================================================
   ENLARGED LATEST ATTENDANCE UPDATE PHOTO + CARD
   Makes the latest attendance update image bigger and uses more box space.
   ========================================================= */
body.scanner-dashboard-theme .entry-update-grid{
  grid-template-columns: 1fr 1.28fr !important;
  align-items: stretch !important;
}

body.scanner-dashboard-theme .live-update-card{
  min-height: 320px !important;
  padding: 22px !important;
}

body.scanner-dashboard-theme .live-update-card h3{
  margin-bottom: 18px !important;
}

body.scanner-dashboard-theme .live-result,
body.scanner-dashboard-theme #result.live-result{
  min-height: 200px !important;
  height: calc(100% - 62px) !important;
  padding: 28px 32px !important;
  border-radius: 22px !important;
  gap: 24px !important;
  align-items: center !important;
}

body.scanner-dashboard-theme .result-photo{
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  flex: 0 0 112px !important;
  padding: 4px !important;
  border-width: 3px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.30), 0 0 0 6px rgba(34,197,94,.12) !important;
}

body.scanner-dashboard-theme .live-result > div{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.scanner-dashboard-theme .live-result b{
  font-size: 20px !important;
  letter-spacing: .01em !important;
  margin-bottom: 10px !important;
}

body.scanner-dashboard-theme .live-result strong{
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

body.scanner-dashboard-theme .live-result small{
  display: block !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}

@media (max-width: 1280px){
  body.scanner-dashboard-theme .entry-update-grid{
    grid-template-columns: 1fr !important;
  }
  body.scanner-dashboard-theme .live-update-card{
    min-height: auto !important;
  }
  body.scanner-dashboard-theme .live-result,
  body.scanner-dashboard-theme #result.live-result{
    min-height: 180px !important;
    height: auto !important;
  }
}


/* =========================================================
   LATEST ATTENDANCE UPDATE - SEPARATED LARGE PHOTO LAYOUT
   Picture is separated from the name/details area.
   ========================================================= */
body.scanner-dashboard-theme .entry-update-grid{
  grid-template-columns: 1fr 1.35fr !important;
  align-items: stretch !important;
}

body.scanner-dashboard-theme .live-update-card{
  min-height: 330px !important;
  padding: 22px !important;
}

body.scanner-dashboard-theme .latest-split-result,
body.scanner-dashboard-theme #result.live-result{
  min-height: 218px !important;
  height: calc(100% - 62px) !important;
  padding: 26px 34px !important;
  border-radius: 22px !important;
  display: grid !important;
  grid-template-columns: 170px 1fr !important;
  align-items: center !important;
  gap: 34px !important;
  border: 1.8px solid rgba(242,193,92,.62) !important;
  background:
    radial-gradient(circle at 22% 48%, rgba(34,197,94,.13), transparent 32%),
    linear-gradient(145deg,rgba(8,33,29,.94),rgba(12,56,48,.78)) !important;
  box-shadow: inset 0 0 46px rgba(242,193,92,.035), 0 16px 40px rgba(0,0,0,.22) !important;
}

body.scanner-dashboard-theme .latest-photo-area{
  height: 170px !important;
  width: 170px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(34,197,94,.20), transparent 62%),
    rgba(5,24,21,.35) !important;
  border: 1px solid rgba(34,197,94,.24) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.26), inset 0 0 28px rgba(34,197,94,.08) !important;
}

body.scanner-dashboard-theme .result-photo.large-latest-photo,
body.scanner-dashboard-theme .result-photo{
  width: 142px !important;
  height: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  min-height: 142px !important;
  max-height: 142px !important;
  flex: 0 0 142px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #fff !important;
  padding: 4px !important;
  border: 4px solid #22c55e !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.30), 0 0 0 7px rgba(34,197,94,.14) !important;
}

body.scanner-dashboard-theme .live-result.error .result-photo{
  border-color:#ef4444 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.30), 0 0 0 7px rgba(239,68,68,.14) !important;
}

body.scanner-dashboard-theme .latest-details-area{
  min-height: 160px !important;
  padding-left: 34px !important;
  border-left: 2px solid rgba(242,193,92,.46) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

body.scanner-dashboard-theme .latest-details-area b{
  display:block !important;
  color:#54f28d !important;
  font-size:19px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  margin-bottom:14px !important;
}

body.scanner-dashboard-theme .latest-details-area strong{
  display:block !important;
  color:var(--cream,#f8f2e6) !important;
  font-size:30px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
  margin-bottom:16px !important;
}

body.scanner-dashboard-theme .latest-meta-line{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:8px !important;
}

body.scanner-dashboard-theme .latest-meta-line .meta-icon{
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:var(--wpu-gold-2,#ffd36f) !important;
  border:1.5px solid var(--wpu-gold-2,#ffd36f) !important;
  font-size:14px !important;
  flex:0 0 30px !important;
}

body.scanner-dashboard-theme .latest-meta-line small{
  display:block !important;
  color:rgba(248,242,230,.86) !important;
  font-size:18px !important;
  line-height:1.35 !important;
}

body.scanner-dashboard-theme .recent-table .patron-photo-wrap{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  min-height:42px !important;
  max-height:42px !important;
}

body.scanner-dashboard-theme .recent-table .patron-photo-thumb{
  width:100% !important;
  height:100% !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:cover !important;
}

@media(max-width:1300px){
  body.scanner-dashboard-theme .entry-update-grid{
    grid-template-columns:1fr !important;
  }
  body.scanner-dashboard-theme .latest-split-result,
  body.scanner-dashboard-theme #result.live-result{
    height:auto !important;
  }
}

@media(max-width:760px){
  body.scanner-dashboard-theme .latest-split-result,
  body.scanner-dashboard-theme #result.live-result{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }
  body.scanner-dashboard-theme .latest-photo-area{
    margin:0 auto !important;
  }
  body.scanner-dashboard-theme .latest-details-area{
    border-left:0 !important;
    border-top:2px solid rgba(242,193,92,.36) !important;
    padding-left:0 !important;
    padding-top:22px !important;
    align-items:center !important;
  }
}

/* Collapsible Admin Sidebar Submenus */
.sidebar .admin-nav{
  display:grid !important;
  gap:8px !important;
}

.sidebar .nav-group{
  display:block;
}

.sidebar .nav-toggle{
  width:100%;
  border:0;
  cursor:pointer;
  padding:13px 15px;
  border-radius:15px;
  color:var(--cream-soft, #eaf2ff) !important;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  font-family:inherit;
  font-size:inherit;
  text-align:left;
  transition:.2s ease;
}

.sidebar .nav-toggle:hover,
.sidebar .nav-group.open > .nav-toggle{
  color:var(--emerald-950, #06221a) !important;
  background:linear-gradient(135deg,var(--gold, #ffc43d),var(--gold-2, #d6a84f)) !important;
  box-shadow:0 14px 28px rgba(214,168,79,.18) !important;
  transform:translateX(3px);
}

.sidebar .nav-chevron{
  font-size:15px;
  line-height:1;
  transition:transform .2s ease;
}

.sidebar .nav-group.open .nav-chevron{
  transform:rotate(180deg);
}

.sidebar .nav-submenu{
  display:grid;
  gap:5px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 0 0 13px;
  margin:0;
  border-left:1px solid rgba(214,168,79,.30);
  transition:max-height .25s ease, opacity .2s ease, margin .2s ease, padding-top .2s ease, padding-bottom .2s ease;
}

.sidebar .nav-group.open .nav-submenu{
  max-height:560px;
  opacity:1;
  margin:7px 0 4px 8px;
  padding-top:4px;
  padding-bottom:4px;
}

.sidebar .nav-submenu a{
  min-height:36px;
  padding:9px 12px !important;
  border-radius:12px !important;
  font-size:14px;
  font-weight:750 !important;
  background:rgba(255,255,255,.025);
}

.sidebar .nav-submenu a:hover,
.sidebar .nav-submenu a.active{
  transform:translateX(2px) !important;
}

.sidebar .nav-single.active{
  color:var(--emerald-950, #06221a) !important;
  background:linear-gradient(135deg,var(--gold, #ffc43d),var(--gold-2, #d6a84f)) !important;
  box-shadow:0 14px 28px rgba(214,168,79,.18) !important;
}


/* =========================================================
   WHOLE SYSTEM FONT STANDARD - ARIAL
   Main font: Arial
   Headings: Arial Bold
   Table text: Arial Regular
   Buttons: Arial Bold
   ========================================================= */
:root{
  --system-font: Arial, Helvetica, sans-serif;
}
html, body,
.app, .layout, .admin-layout, .admin-content, .sidebar, .topbar,
.scanner-shell, .scanner-page, .scanner-dashboard,
button, input, select, textarea, table, th, td,
a, p, span, label, small, div, section, aside, main, header, footer, nav,
.card, .panel, .modal, .dropdown, .form-control, .btn{
  font-family: var(--system-font) !important;
}
h1, h2, h3, h4, h5, h6,
.page-title, .dashboard-title, .section-title, .card-title, .brand-title,
.sidebar-title, .scanner-brand-title, .scanner-title, .latest-name,
.wpu-login-title-block h1, .wpu-login-card h2{
  font-family: var(--system-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
}
.sidebar a, .sidebar button, .nav-link, .submenu-toggle,
button, .btn, .gold-btn, .submit-entry-btn, .wpu-login-btn,
.badge, .status-pill, .action-badge{
  font-family: var(--system-font) !important;
  font-weight: 700 !important;
}
table, .table, .recent-table, .recent-scans-table{
  font-family: var(--system-font) !important;
}
th, .table th{
  font-family: var(--system-font) !important;
  font-weight: 700 !important;
}
td, .table td{
  font-family: var(--system-font) !important;
  font-weight: 500 !important;
}
input, select, textarea, .form-control{
  font-family: var(--system-font) !important;
  font-weight: 500 !important;
}
.stat-card, .metric-card, .summary-card, .latest-details, .patron-detail{
  font-family: var(--system-font) !important;
}


/* =========================================================
   LOGIN PAGE INTERACTIVE CONTROLS / LIVE STATUS
   ========================================================= */
.wpu-role-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:-8px 0 22px;
}
.wpu-role-btn{
  height:68px;
  border-radius:16px;
  border:1.6px solid rgba(221,245,234,.18);
  background:rgba(3,29,26,.44);
  color:#dceae3;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.wpu-role-btn:hover{border-color:rgba(255,211,111,.45);transform:translateY(-1px)}
.wpu-role-btn.active{
  background:linear-gradient(135deg,#d6a84f,#ffd977 52%,#f0c76a);
  color:#07201a;
  border-color:#f4ce70;
  box-shadow:0 14px 34px rgba(214,168,79,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
.wpu-inline-alert{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  margin:0 0 20px;
  border-radius:16px;
  border:1px solid;
  font-size:17px;
  font-weight:600;
}
.wpu-inline-alert.error,.wpu-inline-alert.warning{background:rgba(126,18,18,.16);border-color:rgba(244,121,103,.58);color:#ffb7aa}
.wpu-inline-alert.success{background:rgba(21,117,63,.18);border-color:rgba(102,236,160,.42);color:#cff5dd}
.wpu-inline-alert.info{background:rgba(143,110,22,.18);border-color:rgba(255,211,111,.35);color:#ffe6a1}
.wpu-inline-alert-icon{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;font-weight:900;flex:0 0 auto;
}
.wpu-forgot{text-decoration:none;color:#ffd36f;cursor:pointer}
.wpu-forgot:hover{text-decoration:underline}
.wpu-role-redirect-note{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:rgba(248,242,230,.78);
  font-size:16px;
  flex-wrap:wrap;
}
.wpu-role-redirect-note i{
  width:1px;height:20px;background:rgba(221,245,234,.22);
}
.wpu-login-footer-row{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.wpu-login-datetime{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-radius:14px;
  background:rgba(3,29,26,.34);
  border:1px solid rgba(221,245,234,.12);
  color:#eff7f2;
  font-size:18px;
}
.wpu-login-datetime strong{font-weight:700;color:#fff}
.wpu-login-datetime .sep{width:1px;height:22px;background:rgba(221,245,234,.22);display:inline-block;margin:0 6px}
.wpu-ready-badge{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(12,88,70,.62);
  border:1px solid rgba(115,220,178,.24);
  color:#e5fff4;
  font-weight:700;
}
.wpu-ready-badge b,
.wpu-inline-status b{width:11px;height:11px;border-radius:50%;background:#3ee68d;box-shadow:0 0 16px rgba(62,230,141,.70);display:inline-block}
.wpu-security-note{
  margin-top:18px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(248,242,230,.78);
  font-size:16px;
  line-height:1.5;
}
.wpu-security-note p{margin:0}
.wpu-login-status-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding-top:22px;
  margin-top:16px;
  border-top:1px solid rgba(221,245,234,.16);
}
.wpu-inline-status{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#d5efe4;
  font-size:18px;
  font-weight:700;
}
.wpu-inline-status .icon{font-size:24px;line-height:1}
.wpu-inline-status.ok{color:#72f0b0}
.wpu-inline-status.offline{color:#e8f3ee}
.wpu-inline-status.online{color:#72f0b0}
.wpu-eye.showing{color:#8cffc3}
@media(max-width:720px){
  .wpu-role-switch{grid-template-columns:1fr}
  .wpu-role-redirect-note{align-items:flex-start;justify-content:flex-start}
  .wpu-role-redirect-note i{display:none}
  .wpu-login-footer-row{align-items:flex-start}
  .wpu-login-datetime{font-size:15px}
  .wpu-login-status-row{flex-direction:column;gap:10px}
}

/* ===== Admin Attendance Style Enhancements v15 ===== */
.attendance-admin-page .topbar p{max-width:760px}
.summary-grid.attendance-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:16px;margin-bottom:20px}
.attendance-mini-stat{padding:18px 20px!important}
.attendance-mini-stat span{display:block;font-size:14px;font-weight:800;color:#64748b}
.attendance-mini-stat b{font-size:34px!important;margin-top:8px!important}
.attendance-filter-card,.attendance-table-card{margin-bottom:18px}
.card-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.card-head-row h2{margin:0 0 6px}.card-head-row p{margin:0;color:#64748b}
.attendance-filter-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}
.attendance-filter-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.attendance-table-wrap{border-radius:18px;overflow:auto}
.enhanced-admin-table th:nth-child(1){min-width:130px}
.enhanced-admin-table th:nth-child(2){min-width:220px}
.enhanced-admin-table th:nth-child(5){min-width:180px}
.enhanced-admin-table th:nth-child(10){min-width:170px}
.enhanced-admin-table th:nth-child(11){min-width:140px}
.enhanced-admin-table td b{color:#082a6c}
@media (max-width: 1280px){
  .summary-grid.attendance-summary-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
}
@media (max-width: 820px){
  .summary-grid.attendance-summary-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
  .attendance-filter-grid{grid-template-columns:1fr}
}


/* ===== Attendance admin final polish v17 ===== */
.summary-grid.attendance-summary-grid{
  grid-template-columns:repeat(5,minmax(150px,1fr)) !important;
}
.attendance-admin-page .topbar{
  align-items:flex-start;
}
.attendance-mini-stat{
  min-height:118px;
}
.attendance-table-card{
  padding:20px !important;
}
.attendance-filter-card{
  padding:20px !important;
}
@media (max-width:1280px){
  .summary-grid.attendance-summary-grid{
    grid-template-columns:repeat(3,minmax(150px,1fr)) !important;
  }
}
@media (max-width:820px){
  .summary-grid.attendance-summary-grid{
    grid-template-columns:repeat(2,minmax(150px,1fr)) !important;
  }
}


/* ===== Login Scanner Station selector v22 ===== */
.wpu-scanner-station-field{
  margin-top: 14px;
}
.wpu-scanner-station-field label{
  color:#ffffff !important;
  font-weight:900 !important;
  margin-bottom:9px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.wpu-scanner-station-field label::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffd35a;
  box-shadow:0 0 10px rgba(255,211,90,.7);
}
.wpu-select-field{
  position:relative;
  overflow:hidden;
}
.wpu-select-field select{
  width:100%;
  height:100%;
  min-height:54px;
  border:0;
  outline:0;
  padding:0 48px 0 64px;
  appearance:none;
  -webkit-appearance:none;
  background:rgba(3,34,26,.66);
  color:#fff;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}
.wpu-select-field select option{
  color:#0b2c21;
  background:#f7fbf8;
  font-weight:700;
}
.wpu-select-arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:#ffd35a;
  font-size:22px;
  pointer-events:none;
  font-weight:1000;
}
.wpu-select-field .wpu-field-icon{
  z-index:2;
}


/* ===== Developer credits and report footers ===== */
.wpu-developer-credit{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:700;
  text-align:center;
  letter-spacing:.2px;
}
.dashboard-credit-footer{
  margin-top:24px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(7,67,49,.94), rgba(10,94,67,.9));
  border:1px solid rgba(241,198,91,.38);
  color:#fff;
  text-align:center;
  font-weight:800;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}
.dashboard-credit-footer span{
  color:#f7d36b;
}
.report-credit-footer{
  margin-top:22px;
  padding-top:10px;
  border-top:1px solid #999;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#333;
}
@media print{
  .dashboard-credit-footer{box-shadow:none;background:#fff;color:#111;border:1px solid #111}
  .dashboard-credit-footer span{color:#111}
}


/* Login page refinement v50 */
.wpu-login-title-block .wpu-hero-subtitle{margin:0 0 12px;color:#f7c85f;font-size:24px;font-weight:700;letter-spacing:-.01em}
.wpu-login-title-block .wpu-hero-desc{margin:0;max-width:620px;color:#f0f7f3;font-size:18px;line-height:1.55;font-weight:400}
.wpu-hero-features{display:flex;gap:18px;flex-wrap:wrap;margin:36px 0 24px;position:relative;z-index:2}
.wpu-hero-chip{display:flex;align-items:center;gap:12px;padding:16px 24px;border-radius:16px;background:rgba(8,46,40,.52);border:1px solid rgba(255,211,111,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.wpu-hero-chip span{font-size:26px;color:#ffd36f}
.wpu-hero-chip strong{font-size:17px;color:#fff;font-weight:700;white-space:nowrap}
.wpu-command-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:inherit}
.wpu-qr-center{font-size:92px;color:rgba(224,239,231,.22);font-weight:200;line-height:1}
.wpu-command-icon p{margin:0;color:#e6efe9;font-size:18px;font-weight:400}
.wpu-login-card-subtitle{margin:8px 0 0;color:#e4efe8;font-size:15px;line-height:1.4}
.wpu-auth-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 12px;color:#dcefe5;font-size:15px;font-weight:600}
.wpu-auth-note span{font-size:16px}
.wpu-role-redirect-note{margin-top:14px}
.wpu-security-note p{margin:0;font-size:14px}
@media (max-width: 1200px){.wpu-login-shell{grid-template-columns:1fr}.wpu-login-card{min-height:auto}.wpu-login-left{min-height:auto}}
@media (max-width: 760px){.wpu-login-shell{width:min(100vw - 26px,100%);padding:18px 0}.wpu-login-left,.wpu-login-card{padding:28px 18px;border-radius:22px}.wpu-login-hero{flex-direction:column;align-items:flex-start;gap:18px}.wpu-login-title-block h1{font-size:46px}.wpu-login-kicker{font-size:24px}.wpu-login-title-block .wpu-hero-subtitle{font-size:20px}.wpu-login-title-block .wpu-hero-desc{font-size:16px}.wpu-camera-preview{height:300px;margin-top:28px}.wpu-camera-pill{height:52px;font-size:17px;padding:0 18px}.wpu-login-form label{font-size:18px}.wpu-field{height:68px;margin-bottom:24px}.wpu-login-card h2{font-size:30px}.wpu-login-card-head{margin-bottom:28px;gap:18px}.wpu-login-seal-small{width:72px;height:72px}.wpu-hero-chip{padding:12px 16px}}


/* =========================================================
   V41 - Admin dashboard movable gold active bubble/highlight
   Applies to chart filters, report tabs, button groups, and sidebar active items.
   ========================================================= */
.dashboard-toggle,
.filter-toggle,
.report-toggle,
.tab-toggle,
.trend-toggle{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px !important;
  border:1px solid rgba(255,211,77,.45) !important;
  border-radius:999px !important;
  background:rgba(0,40,30,.65) !important;
  overflow:hidden !important;
}
.dashboard-toggle button, .dashboard-toggle a,
.filter-toggle button, .filter-toggle a,
.report-toggle button, .report-toggle a,
.tab-toggle button, .tab-toggle a,
.trend-toggle button, .trend-toggle a{
  position:relative !important;
  z-index:2 !important;
  border:0 !important;
  outline:0 !important;
  cursor:pointer !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#ffffff !important;
  font-weight:800 !important;
  line-height:1 !important;
  transition:color .24s ease, transform .24s ease !important;
}
.dashboard-toggle button.active, .dashboard-toggle a.active,
.filter-toggle button.active, .filter-toggle a.active,
.report-toggle button.active, .report-toggle a.active,
.tab-toggle button.active, .tab-toggle a.active,
.trend-toggle button.active, .trend-toggle a.active{
  color:#062a1f !important;
  background:transparent !important;
  box-shadow:none !important;
}
.dashboard-toggle button:hover, .dashboard-toggle a:hover,
.filter-toggle button:hover, .filter-toggle a:hover,
.report-toggle button:hover, .report-toggle a:hover,
.tab-toggle button:hover, .tab-toggle a:hover,
.trend-toggle button:hover, .trend-toggle a:hover{
  color:#ffd34d !important;
}
.dashboard-toggle button.active:hover, .dashboard-toggle a.active:hover,
.filter-toggle button.active:hover, .filter-toggle a.active:hover,
.report-toggle button.active:hover, .report-toggle a.active:hover,
.tab-toggle button.active:hover, .tab-toggle a.active:hover,
.trend-toggle button.active:hover, .trend-toggle a.active:hover{
  color:#062a1f !important;
}
.dashboard-active-indicator{
  position:absolute;
  z-index:1;
  top:6px;
  left:6px;
  height:calc(100% - 12px);
  width:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ffd34d,#f5b921);
  box-shadow:0 8px 22px rgba(255,211,77,.28);
  transition:left .25s ease, width .25s ease, opacity .2s ease;
  opacity:0;
  pointer-events:none;
}
.dashboard-active-indicator.is-visible{opacity:1}
.report-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.report-actions .btn.active,
.actions .btn.active,
.quick-actions .qa.active{
  background:linear-gradient(135deg,#ffd34d,#f5b921) !important;
  color:#062a1f !important;
  border-color:rgba(255,211,77,.65) !important;
  box-shadow:0 10px 24px rgba(255,211,77,.25) !important;
}
.report-actions .btn:not(.active):hover,
.actions .btn:not(.active):hover{
  box-shadow:0 8px 20px rgba(255,211,77,.16) !important;
}
.sidebar .admin-nav a.active,
.sidebar .nav-submenu a.active,
.sidebar .nav-single.active,
.sidebar .nav-group.has-active > .nav-toggle,
.sidebar .nav-toggle.active{
  color:#062a1f !important;
  background:linear-gradient(135deg,#ffd34d,#d6a84f) !important;
  box-shadow:0 14px 28px rgba(214,168,79,.20) !important;
}
.sidebar .nav-group.open:not(.has-active) > .nav-toggle{
  color:#eaf2ff !important;
  background:rgba(255,255,255,.065) !important;
  box-shadow:none !important;
  transform:none !important;
}
.sidebar .nav-group.open:not(.has-active) > .nav-toggle:hover{
  color:#062a1f !important;
  background:linear-gradient(135deg,#ffd34d,#d6a84f) !important;
}
.sidebar .admin-nav a,
.sidebar .nav-toggle{
  transition:background .25s ease, color .25s ease, transform .22s ease, box-shadow .25s ease !important;
}
@media(max-width:720px){
  .dashboard-toggle, .filter-toggle, .report-toggle, .tab-toggle, .trend-toggle{
    width:100% !important;
  }
  .dashboard-toggle button, .dashboard-toggle a,
  .filter-toggle button, .filter-toggle a,
  .report-toggle button, .report-toggle a,
  .tab-toggle button, .tab-toggle a,
  .trend-toggle button, .trend-toggle a{
    flex:1 1 auto !important;
    text-align:center !important;
    padding:10px 12px !important;
  }
}

/* V43 - Global Smart Search with Live Suggestions */
.global-smart-search{position:relative;z-index:40}
.nav-global-search{padding:0 14px 14px;margin:-2px 0 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.global-search-wrap{position:relative;flex:1;min-width:240px}
.global-search-input{width:100%;box-sizing:border-box}
.nav-global-search .global-search-input{height:42px;border-radius:14px;border:1px solid rgba(255,211,77,.25);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font-weight:800;outline:none}
.nav-global-search .global-search-input::placeholder{color:rgba(255,255,255,.62)}
.nav-global-search .global-search-input:focus{border-color:#f7c948;box-shadow:0 0 0 3px rgba(247,201,72,.14)}
.global-search-suggestions{position:fixed;left:0;top:0;width:320px;background:#ffffff;color:#10251d;border:1px solid rgba(15,23,42,.12);box-shadow:0 18px 40px rgba(0,0,0,.24);border-radius:18px;overflow:hidden;display:none;max-height:420px;overflow-y:auto;z-index:2147483000;text-align:left}
.global-search-suggestions.is-open{display:block}
.global-search-status{padding:14px 16px;font-weight:850;color:#52635b;background:#fff}
.global-search-category{padding:9px 14px 7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:950;color:#6b5a12;background:#fff8df;border-top:1px solid rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.04)}
.global-search-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;text-decoration:none;color:#10251d;background:#fff;border-bottom:1px solid rgba(15,23,42,.06);outline:none}
.global-search-item:hover,.global-search-item.is-active{background:#fff3bf;color:#071d16}
.global-search-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(247,201,72,.22);flex:0 0 34px}
.global-search-title{font-weight:950;line-height:1.2;margin-bottom:4px}
.global-search-subtitle{font-size:12px;line-height:1.35;color:#52635b;font-weight:700}
.global-search-title mark,.global-search-subtitle mark{background:#f7c948;color:#09251c;border-radius:4px;padding:0 2px}
.dashboard-search-box .global-search-wrap{flex:1;min-width:260px}
.dashboard-search-box .global-search-suggestions{top:calc(100% + 10px)}
@media(max-width:720px){.global-search-suggestions{position:fixed;left:14px;right:14px;top:82px;max-height:70vh}.nav-global-search{padding-left:10px;padding-right:10px}.dashboard-search-box .global-search-wrap{min-width:100%}}

/* V46 - Make live search suggestions visible on sidebar and all admin search fields */
.global-smart-search .input[name="q"], .global-smart-search input[type="search"]{padding-right:42px}
.global-search-wrap{position:relative}
.global-search-suggestions{position:fixed!important;right:auto!important}
@media(max-width:720px){.global-search-suggestions{left:14px!important;right:14px!important;width:auto!important;max-height:70vh!important}}

/* V47 - One Global Smart Search in shared admin header only */
.nav-global-search,.dashboard-global-search,.dashboard-search-box{display:none!important}
.system-global-search-header{
  position:fixed;
  top:0;
  margin-left:270px;
  width:calc(100% - 270px);
  padding:18px 30px 0;
  z-index:1200;
  pointer-events:none;
  box-sizing:border-box;
}
.system-global-search-form{
  pointer-events:auto;
  max-width:820px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(6,72,52,.94),rgba(4,31,26,.94));
  border:1px solid rgba(247,201,72,.28);
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.system-global-search-icon{
  width:42px;height:42px;border-radius:16px;display:grid;place-items:center;
  background:rgba(247,201,72,.16);border:1px solid rgba(247,201,72,.30);font-size:18px;flex:0 0 auto;
}
.system-global-search-wrap{min-width:0;flex:1}
.system-global-search-input{
  height:44px;width:100%;border:0;outline:0;border-radius:16px;
  background:rgba(0,0,0,.18);color:#fff;padding:0 16px;font-weight:850;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.system-global-search-input::placeholder{color:rgba(228,255,238,.70)}
.system-global-search-input:focus{box-shadow:inset 0 0 0 2px rgba(247,201,72,.70),0 0 0 4px rgba(247,201,72,.10)}
.system-global-search-button{
  height:44px;border:0;border-radius:16px;padding:0 20px;cursor:pointer;
  color:#071d16;font-weight:950;background:linear-gradient(135deg,#ffd34d,#f7b719);
  box-shadow:0 10px 24px rgba(247,183,25,.22);flex:0 0 auto;
}
.system-global-search-button:hover{filter:brightness(1.04);transform:translateY(-1px)}
.system-global-search-form .global-search-suggestions{
  background:linear-gradient(145deg,#fffdf4,#ffffff)!important;
  border:1px solid rgba(247,201,72,.34)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
  border-radius:20px!important;
  max-height:520px!important;
}
.system-global-search-form .global-search-category{background:#fff4c4;color:#6b4b00}
.system-global-search-form .global-search-item:hover,
.system-global-search-form .global-search-item.is-active{background:#ffe894!important}
.main{padding-top:96px}
@media(max-width:760px){
  .system-global-search-header{position:relative;margin-left:0;width:100%;padding:14px 16px 0}
  .system-global-search-form{max-width:none;border-radius:20px;gap:8px}
  .system-global-search-button{display:none}
  .system-global-search-icon{width:38px;height:38px;border-radius:14px}
  .system-global-search-input{height:40px;font-size:13px}
}
@media print{.system-global-search-header{display:none!important}}

/* Global Smart Search exact destination highlight */
.search-highlight-row,
.table tr.search-highlight-row,
.enhanced-admin-table tr.search-highlight-row{
  outline:3px solid #ffd34d!important;
  box-shadow:0 0 0 4px rgba(255,211,77,.20),0 12px 30px rgba(0,0,0,.22)!important;
  background:linear-gradient(90deg,rgba(255,211,77,.24),rgba(255,211,77,.08))!important;
  animation:globalSearchPulse 1.2s ease-in-out 0s 2;
  scroll-margin-top:120px;
}
@keyframes globalSearchPulse{
  0%,100%{filter:none;}
  50%{filter:brightness(1.25);}
}


/* Final Bulk QR Print cleanup */
.bulk-qr-search-card {
    margin-top: 0;
}
.bulk-qr-search-form {
    grid-template-columns: 1fr;
}
.bulk-qr-search-card .bulk-title-row {
    margin-bottom: 12px;
}
.bulk-qr-layout .main {
    gap: 16px;
}


/* OFFICIAL ARIAL FONT SYSTEM-WIDE OVERRIDE */
:root{
  --system-font: Arial, Helvetica, sans-serif;
}
html, body, body *,
input, textarea, select, button,
table, th, td,
.card, .modal, .navbar, .sidebar, .dropdown-menu,
.ai-discussion-box, .dynamic-report-header {
  font-family: Arial, Helvetica, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.page-title, .scanner-title, .brand-title, .card-title, .section-title, .stat-title, .login-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700;
}
button, .btn, .nav-link, .badge, .status-pill {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 600;
}
@media print {
  html, body, body *, table, th, td {
    font-family: Arial, Helvetica, sans-serif !important;
  }
}