/* =========================================================================
   SAEM Face Attendance — design system v2
   -------------------------------------------------------------------------
   Same brand identity as before (slate blue #395466 + powder blue #B6D0E2
   + pale blue-grey #E7EDF1), rebuilt with a sharper type system, layered
   depth, calmer surfaces and orchestrated page-load motion.

   Structure
     01  Tokens
     02  Reset & base
     03  Motion
     04  Buttons
     05  Forms
     06  Cards, sections, stats
     07  Tables
     08  Badges, chips, meters
     09  Alerts & empty states
     10  Admin shell (sidebar, topbar, page)
     11  Auth / login
     12  Punch kiosk
     13  Responsive
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   01  Tokens
   ========================================================================== */
:root {
  /* --- brand (unchanged) --- */
  --primary: #395466;
  --primary-dark: #26404F;
  --primary-deep: #1A2E3A;
  --primary-light: #4E7086;
  --tint: #B6D0E2;
  --tint-soft: #E7EDF1;

  /* --- surfaces --- */
  --page-bg: #F1F5F8;
  --panel: #FFFFFF;
  --panel-sunken: #F7FAFC;
  --line: #E1E9EF;
  --line-strong: #CBD9E3;

  /* --- ink --- */
  --ink: #16252E;
  --ink-soft: #41586A;
  --muted: #6B8496;
  --faint: #9AB0BF;

  /* --- semantics --- */
  --info: #3F86BC;
  --info-tint: #E4F0F9;
  --success: #1E7A4A;
  --success-tint: #DEF1E7;
  --warn: #B4761B;
  --warn-tint: #FBF0DC;
  --danger: #C42B28;
  --danger-tint: #FBE4E3;

  /* --- geometry --- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* legacy aliases kept so older inline styles keep working */
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);

  /* --- elevation: layered, low-opacity, brand-tinted --- */
  --e-1: 0 1px 2px rgba(22, 37, 46, .05), 0 1px 1px rgba(22, 37, 46, .04);
  --e-2: 0 1px 2px rgba(22, 37, 46, .05), 0 4px 12px -2px rgba(22, 37, 46, .07);
  --e-3: 0 2px 4px rgba(22, 37, 46, .05), 0 12px 28px -6px rgba(22, 37, 46, .13);
  --e-4: 0 24px 60px -12px rgba(14, 25, 32, .34);
  --ring: 0 0 0 3px rgba(63, 134, 188, .28);
  --shadow-card: var(--e-2);
  --shadow-pop: var(--e-3);

  /* --- type --- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI Semibold', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* --- texture --- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  --sidebar-w: 254px;
  --gutter: 34px;
  --page-max: 1240px;   /* content column width, centred in .main */
}

/* ==========================================================================
   02  Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win over the display values components set (e.g. .btn) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.021em;
  line-height: 1.15;
}
h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.15rem); font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.014em; }
h3 { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.008em; }

p { margin: 0 0 .8rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

a { color: var(--info); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--tint-soft);
  color: var(--primary-dark);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.mono, td.mono, th.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

::selection { background: var(--tint); color: var(--primary-deep); }

:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

.lead { font-size: 1rem; color: var(--ink-soft); max-width: 68ch; }
.hint { font-size: .82rem; color: var(--muted); }
.u-nowrap { white-space: nowrap; }
.u-right { text-align: right; }

/* Slim, brand-tinted scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   03  Motion — one orchestrated entrance, not scattered micro-fidgets
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Nav links slide but never fade — navigation must never be invisible,
   not even during the stagger delay. */
@keyframes slideIn { from { transform: translateX(-12px); } to { transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.86); } }
@keyframes sweep { 0% { transform: translateY(-110%); } 100% { transform: translateY(210%); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .62s cubic-bezier(.16, .84, .34, 1) both; animation-delay: var(--d, 0s); }

  .page > * { animation: rise .62s cubic-bezier(.16, .84, .34, 1) both; }
  .page > *:nth-child(1) { animation-delay: .02s; }
  .page > *:nth-child(2) { animation-delay: .08s; }
  .page > *:nth-child(3) { animation-delay: .14s; }
  .page > *:nth-child(4) { animation-delay: .20s; }
  .page > *:nth-child(5) { animation-delay: .26s; }
  .page > *:nth-child(n+6) { animation-delay: .30s; }

  .grid--stats > * { animation: rise .6s cubic-bezier(.16, .84, .34, 1) both; }
  .grid--stats > *:nth-child(1) { animation-delay: .10s; }
  .grid--stats > *:nth-child(2) { animation-delay: .16s; }
  .grid--stats > *:nth-child(3) { animation-delay: .22s; }
  .grid--stats > *:nth-child(4) { animation-delay: .28s; }
  .grid--stats > *:nth-child(5) { animation-delay: .34s; }
  .grid--stats > *:nth-child(n+6) { animation-delay: .40s; }

  .sidebar nav a { animation: slideIn .5s cubic-bezier(.16, .84, .34, 1) both; }
  .sidebar nav a:nth-of-type(1) { animation-delay: .04s; }
  .sidebar nav a:nth-of-type(2) { animation-delay: .08s; }
  .sidebar nav a:nth-of-type(3) { animation-delay: .12s; }
  .sidebar nav a:nth-of-type(4) { animation-delay: .16s; }
  .sidebar nav a:nth-of-type(5) { animation-delay: .20s; }
  .sidebar nav a:nth-of-type(6) { animation-delay: .24s; }
  .sidebar nav a:nth-of-type(7) { animation-delay: .28s; }
  .sidebar nav a:nth-of-type(n+8) { animation-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   04  Buttons
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--primary-dark);
  --btn-bd: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .87rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  padding: 10px 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .12s cubic-bezier(.16,.84,.34,1), filter .16s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn i { font-size: .88em; }

.btn-primary {
  --btn-bg: linear-gradient(178deg, var(--primary-light) -30%, var(--primary) 55%, var(--primary-dark) 100%);
  --btn-fg: #fff;
  --btn-bd: var(--primary-dark);
  box-shadow: var(--e-2), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover {
  --btn-bg: linear-gradient(178deg, var(--primary) -30%, var(--primary-dark) 60%, var(--primary-deep) 100%);
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-ghost { --btn-bg: var(--panel); --btn-bd: var(--line-strong); --btn-fg: var(--primary-dark); box-shadow: var(--e-1); }
.btn-ghost:hover { --btn-bd: var(--primary-light); --btn-bg: var(--tint-soft); }

.btn-subtle { --btn-bg: var(--tint-soft); --btn-bd: transparent; --btn-fg: var(--primary-dark); }
.btn-subtle:hover { --btn-bg: var(--tint); }

.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: #A82320; box-shadow: var(--e-1); }
.btn-danger:hover { --btn-bg: #A82320; --btn-bd: #8E1D1B; }

.btn-quiet-danger { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--muted); }
.btn-quiet-danger:hover { --btn-bg: var(--danger-tint); --btn-fg: var(--danger); }

.btn-sm { padding: 6px 12px; font-size: .79rem; border-radius: var(--r-xs); gap: 6px; }
.btn-lg { padding: 13px 24px; font-size: .95rem; border-radius: var(--r-md); }
.btn-icon { padding: 0; width: 32px; height: 32px; border-radius: var(--r-xs); }
.btn-block { width: 100%; }

.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Row-level action cluster inside tables */
.actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.actions form { display: inline-flex; margin: 0; }

/* ==========================================================================
   05  Forms
   ========================================================================== */
label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -0.003em;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: inset 0 1px 2px rgba(22, 37, 46, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: var(--ring);
}
input[readonly] {
  background: var(--panel-sunken);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: .85rem;
}
input[type="date"], input[type="number"] { font-family: var(--font-mono); font-size: .86rem; letter-spacing: -0.02em; }

/* Custom select chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B8496' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

/* File input */
input[type="file"] {
  padding: 7px 10px;
  font-size: .82rem;
  background: var(--panel-sunken);
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  color: var(--primary-dark);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  padding: 6px 12px;
  margin-right: 11px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--tint-soft); border-color: var(--primary-light); }

.field { margin-bottom: 16px; }
.field__hint { margin-top: 6px; font-size: .77rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }

/* Inline filter bar */
.filter-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filter-bar .field { margin-bottom: 0; }
.filter-bar__spacer { flex: 1 1 auto; }

/* Icon-adorned inputs (login) */
.field-icon { position: relative; }
.field-icon i.field-icon__left {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: .85rem; pointer-events: none;
  transition: color .15s ease; z-index: 1;
}
.field-icon input { padding-left: 38px; }
.field-icon:focus-within i.field-icon__left { color: var(--info); }
.field-icon button.toggle-pw {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--faint); cursor: pointer;
  padding: 7px 9px; font-size: .85rem; border-radius: var(--r-xs);
  transition: color .15s ease, background-color .15s ease;
}
.field-icon button.toggle-pw:hover { color: var(--primary-dark); background: var(--tint-soft); }
.field-icon input[type="password"], .field-icon input[type="text"].pw-visible { padding-right: 40px; }

/* ==========================================================================
   06  Cards, sections, stats
   ========================================================================== */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  padding: 24px 26px;
}
.card + .card, .card + .grid, .grid + .card { margin-top: 18px; }
.card--flush { padding: 0; overflow: hidden; }
.card--sunken { background: var(--panel-sunken); box-shadow: none; }
.card--accent { border-left: 3px solid var(--tint); }

/* Card head: title left, actions right */
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.card--flush .card__head { padding: 22px 26px 0; margin-bottom: 0; }
.card__head-text { min-width: 0; }
.card__head-text p { margin: 6px 0 0; font-size: .85rem; color: var(--muted); max-width: 64ch; }
.card__head-actions { display: flex; gap: 9px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.card__head h2 { display: flex; align-items: center; }

/* Numbered step marker for multi-step flows */
.step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  background: var(--primary); color: #fff;
  margin-right: 11px;
  box-shadow: var(--e-1);
}
.step--done { background: var(--success); }
.step--idle { background: var(--tint); color: var(--primary-dark); }

.grid { display: grid; gap: 18px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- Stat tile --- */
.stat {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 20px 18px;
  box-shadow: var(--e-1);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s cubic-bezier(.16,.84,.34,1), border-color .22s ease;
}
.stat::after {
  content: '';
  position: absolute; right: -34px; bottom: -50px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 208, 226, .34), transparent 68%);
  pointer-events: none;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--e-3); border-color: var(--line-strong); }
.stat > * { position: relative; z-index: 1; }

.stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat__icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--tint-soft); color: var(--primary);
  font-size: .82rem; flex-shrink: 0;
  border: 1px solid var(--line);
}
.stat__icon--info { background: var(--info-tint); color: var(--info); border-color: #CDE5F4; }
.stat__icon--good { background: var(--success-tint); color: var(--success); border-color: #C6E5D3; }
.stat__icon--warn { background: var(--warn-tint); color: var(--warn); border-color: #F0E1C4; }
.stat__icon--bad  { background: var(--danger-tint); color: var(--danger); border-color: #F4D2D1; }

.stat__label {
  font-size: .69rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
}
.stat__value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.045em;
  margin-top: 14px;
  color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
}
.stat__value.accent { color: var(--info); }
.stat__value.good { color: var(--success); }
.stat__value.bad { color: var(--danger); }
.stat__value small {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500; letter-spacing: 0;
  color: var(--faint); margin-left: 4px;
}
.stat__foot { margin-top: 9px; font-size: .755rem; color: var(--muted); }

/* Thin progress rail */
.rail { height: 5px; border-radius: 99px; background: var(--tint-soft); overflow: hidden; margin-top: 12px; }
.rail > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary-light), var(--primary)); }
.rail--good > span { background: linear-gradient(90deg, #35A268, var(--success)); }
.rail--bad > span { background: linear-gradient(90deg, #E05B57, var(--danger)); }

/* Key/value rows */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: baseline; margin: 0; }
.kv dt { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.kv dd { margin: 0; font-size: .9rem; color: var(--ink); }

/* ==========================================================================
   07  Tables
   ========================================================================== */
.table-wrap { width: 100%; overflow-x: auto; }
.card--flush .table-wrap { border-top: 1px solid var(--line); margin-top: 20px; }

table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-sunken);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 11px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
tbody td {
  padding: 13px 16px;
  font-size: .875rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .13s ease; }
tbody tr:hover td { background: var(--tint-soft); }

/* Name cell with initials avatar */
.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: .73rem; font-weight: 700; letter-spacing: 0;
  color: var(--primary-dark);
  background: linear-gradient(150deg, var(--tint), var(--tint-soft));
  border: 1px solid var(--line);
  text-transform: uppercase;
}
.who > span:not(.avatar):not(.thumb) { min-width: 0; }
.who__name { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.who__sub { display: block; font-size: .755rem; color: var(--muted); line-height: 1.35; }

/* ==========================================================================
   08  Badges, chips, meters
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: .71rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}
.badge i { font-size: .82em; }
.badge-good { background: var(--success-tint); color: var(--success); border-color: #C6E5D3; }
.badge-bad { background: var(--danger-tint); color: var(--danger); border-color: #F4D2D1; }
.badge-warn { background: var(--warn-tint); color: var(--warn); border-color: #F0E1C4; }
.badge-info { background: var(--info-tint); color: var(--info); border-color: #CDE5F4; }
.badge-neutral { background: var(--tint); color: var(--primary-dark); border-color: #A2C2D8; }
.badge-quiet { background: var(--panel-sunken); color: var(--muted); border-color: var(--line); }

/* Filter chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .79rem; font-weight: 600;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:hover { text-decoration: none; border-color: var(--primary-light); background: var(--tint-soft); color: var(--primary-dark); }
.chip.is-active { background: var(--primary); border-color: var(--primary-dark); color: #fff; box-shadow: var(--e-2); }
.chip.is-active:hover { background: var(--primary-dark); color: #fff; }
.chip__count {
  font-family: var(--font-mono); font-size: .69rem; font-weight: 500;
  background: rgba(22,37,46,.07);
  padding: 1px 7px; border-radius: 99px;
}
.chip.is-active .chip__count { background: rgba(255,255,255,.2); }

/* Stock quantity stepper */
.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--e-1);
  height: 32px;
}
.stepper form { display: flex; margin: 0; }
.stepper button {
  border: 0; background: var(--panel); cursor: pointer;
  width: 30px; color: var(--muted); font-size: .78rem;
  transition: background-color .14s ease, color .14s ease;
}
.stepper button:hover { background: var(--tint-soft); color: var(--primary-dark); }
.stepper__value {
  min-width: 46px; padding: 0 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .83rem; font-weight: 700;
  color: var(--ink);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--panel-sunken);
}
.stepper__value.is-low { color: var(--danger); background: var(--danger-tint); }

/* ==========================================================================
   09  Alerts & empty states
   ========================================================================== */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-size: .86rem;
  line-height: 1.55;
  border: 1px solid transparent;
  margin-bottom: 18px;
}
.alert i { margin-top: 4px; font-size: .88rem; flex-shrink: 0; }
.alert-good { background: var(--success-tint); color: #15603A; border-color: #C6E5D3; }
.alert-bad { background: var(--danger-tint); color: #9E2320; border-color: #F4D2D1; }
.alert-warn { background: var(--warn-tint); color: #8C5B12; border-color: #F0E1C4; }
.alert-info { background: var(--info-tint); color: #245F8B; border-color: #CDE5F4; }
.alert b, .alert strong { font-weight: 700; }
.alert code { background: rgba(255,255,255,.5); border-color: rgba(0,0,0,.06); color: inherit; }

/* login keeps its class name, picks up alert styling */
.auth-error {
  background: var(--danger-tint);
  color: #9E2320;
  border: 1px solid #F4D2D1;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: .83rem;
  line-height: 1.5;
  margin-bottom: 18px;
  text-align: left;
}

.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty__icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--tint-soft); color: var(--faint);
  font-size: 1.15rem;
  border: 1px solid var(--line);
}
.empty h3 { color: var(--ink-soft); margin-bottom: 6px; }
.empty p { font-size: .86rem; color: var(--muted); max-width: 46ch; margin: 0 auto; }
td .empty { padding: 42px 20px; }

/* ==========================================================================
   10  Admin shell
   ========================================================================== */
.admin-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Sidebar --- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  color: #E6EEF3;
  background:
    linear-gradient(168deg, rgba(57, 84, 102, .90) 0%, rgba(26, 46, 58, .97) 62%, rgba(18, 32, 41, .99) 100%),
    url('/SAEM_face_attendance_system/assets/auth-background.svg') center/cover no-repeat,
    var(--primary-deep);
  border-right: 1px solid rgba(255, 255, 255, .07);
  z-index: 40;
}
.sidebar::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sidebar > * { position: relative; }

/* The real SAEM mark is a wide wordmark, so it is shown as artwork at its
   own aspect ratio — never cropped into a rounded plate — with the tagline
   carrying the product name underneath. */
.sidebar__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 2px 10px 0;
  margin-bottom: 26px;
  text-decoration: none;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__brand-logo {
  display: block;
  width: 118px; height: auto;
  border-radius: 0;
}
.sidebar__brand .tagline {
  font-size: .645rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #8AA7BA;
}

.sidebar__scroll { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.nav-group {
  font-size: .615rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: #6C8698;
  padding: 0 14px;
  margin: 20px 0 8px;
}
.nav-group:first-child { margin-top: 0; }

.sidebar nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  color: #C3D6E1;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.sidebar nav a i {
  width: 17px; text-align: center;
  color: #85A2B6; font-size: .9rem;
  transition: color .16s ease;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.sidebar nav a:hover i { color: var(--tint); }

.sidebar nav a.active {
  background: linear-gradient(94deg, rgba(182, 208, 226, .97), rgba(182, 208, 226, .8));
  color: var(--primary-deep);
  font-weight: 650;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
}
.sidebar nav a.active i { color: var(--primary); }
.sidebar nav a.active::before {
  content: '';
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--tint);
}

.sidebar__footer {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
}
.user-chip__avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .73rem; font-weight: 700;
  color: var(--primary-deep);
  background: var(--tint);
  text-transform: uppercase;
}
.user-chip__text { min-width: 0; flex: 1; }
.user-chip__name {
  font-size: .81rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.user-chip__role { font-size: .645rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #85A2B6; }
.user-chip__out {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: #9CB6C7; border-radius: var(--r-xs);
  font-size: .85rem; text-decoration: none; flex-shrink: 0;
  transition: color .15s ease, background-color .15s ease;
}
.user-chip__out:hover { color: #fff; background: rgba(255,255,255,.11); text-decoration: none; }

.sidebar__scrim { display: none; }

/* --- Main column --- */
.main { min-width: 0; display: flex; flex-direction: column; }

/* --- Topbar / status strip --- */
.status-strip {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  /* Matches the centred page column, so the status pill and clock line up
     with the content below instead of hugging the window edges. */
  padding-block: 10px;
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  min-height: 58px;
  background: rgba(241, 245, 248, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.status-strip__toggle {
  display: none;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-xs); width: 34px; height: 34px;
  color: var(--primary-dark); cursor: pointer; font-size: .9rem;
  flex-shrink: 0; padding: 0;
}

.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 6px 14px 6px 11px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--e-1);
}
.status-pill.is-alert { background: var(--danger-tint); border-color: #F4D2D1; }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-tint);
  flex-shrink: 0;
}
.status-pill.is-alert .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(196, 43, 40, .16); }
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: breathe 2.6s ease-in-out infinite; }
}

.status-strip__readout {
  font-family: var(--font-mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-pill.is-alert .status-strip__readout { color: #9E2320; }
.status-strip__readout b { font-weight: 700; color: var(--primary-dark); }
.status-pill.is-alert .status-strip__readout b { color: #8E1D1B; }
.status-strip__readout a { color: inherit; text-decoration: underline; font-weight: 700; }

.status-strip__clock {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .735rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-strip__clock i { color: var(--faint); font-size: .8rem; }
.status-strip__clock #topbar-time { font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.status-strip__sep { color: var(--line-strong); }

/* --- Page canvas --- */
/* Centred rather than pinned left: on a wide monitor a left-aligned column
   leaves a dead band down the right-hand side. */
.page {
  padding: 34px var(--gutter) 72px;
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
  flex: 1;
}

.page__header { margin-bottom: 26px; }
.page__header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.page__header .eyebrow { margin-bottom: 9px; display: block; }
.page__header h1 { margin-bottom: 0; }
.page__header h1::after {
  content: '';
  display: block;
  width: 46px; height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--tint));
}
.page__lead { margin: 14px 0 0; max-width: 70ch; font-size: .95rem; color: var(--ink-soft); }
.page__actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* ==========================================================================
   11  Auth / login
   ========================================================================== */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
  /* Layers, top to bottom: brand glow, dark scrim, illustration, base colour.
     The artwork is a light illustration (mean luminance 228/255, 79% of it
     near-white) going onto a dark page. Fading it with `opacity` would lift
     the whole background toward grey and lose the deep slate; putting it
     UNDER an ~86% scrim keeps the brand colour and lets the illustration
     read as texture instead. The base colour is the fallback if the image
     ever fails to load.
     Only the page behind the card — the sign-in card and the brand panel
     both paint their own opaque backgrounds, so nothing bleeds through. */
  background:
    radial-gradient(1000px 620px at 15% 0%, rgba(78, 112, 134, .42), transparent 62%),
    linear-gradient(rgba(26, 46, 58, .86), rgba(18, 32, 41, .90)),
    url('/SAEM_face_attendance_system/assets/login-background.jpg') center / cover no-repeat,
    var(--primary-deep);
}
.auth-layout {
  width: 100%;
  max-width: 1000px;
  min-height: 588px;
  display: flex;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-4);
  border: 1px solid rgba(255, 255, 255, .09);
}

.auth-brand-panel {
  flex: 1.15;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 42px;
  color: #E6EEF3;
  background:
    linear-gradient(186deg, rgba(26, 46, 58, .38) 0%, rgba(17, 29, 36, .86) 100%),
    url('/SAEM_face_attendance_system/assets/auth-background.svg') center/cover no-repeat,
    var(--primary-deep);
}
.auth-brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .06; mix-blend-mode: overlay; pointer-events: none;
}
.auth-brand-panel > * { position: relative; }

.auth-brand-panel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.auth-brand-panel__logo { display: flex; align-items: center; }
.auth-brand-panel__logo img {
  display: block;
  width: 132px; height: auto;
  border-radius: 0;
  box-shadow: none;
}

.auth-clock { text-align: right; font-size: .755rem; color: #9CB6C7; line-height: 1.45; }
.auth-clock__time {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 1.02rem; color: #fff; letter-spacing: -0.02em;
}

.auth-brand-panel__body { margin: 30px 0; }
.auth-brand-panel__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tint);
  background: rgba(182, 208, 226, .13);
  border: 1px solid rgba(182, 208, 226, .22);
  padding: 5px 13px; border-radius: var(--r-pill); margin-bottom: 20px;
}
.auth-brand-panel h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 16px;
}
.auth-brand-panel h1::after { display: none; }
.auth-brand-panel h1 .accent { color: var(--tint); }
.auth-brand-panel p { color: #A9C3D2; max-width: 42ch; font-size: .93rem; line-height: 1.65; }

.auth-brand-panel__pills { display: flex; flex-wrap: wrap; gap: 9px; }
.auth-brand-panel__pills span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .77rem; font-weight: 500; color: #DCE8EF;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.auth-brand-panel__pills span i { color: var(--tint); font-size: .82rem; }

.auth-form-panel {
  flex: 0 0 392px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  padding: 42px 38px;
}
.auth-card { width: 100%; max-width: 308px; text-align: center; }
.auth-card__icon {
  display: block;
  width: 146px; height: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto 20px;
}
.auth-card h2 { font-size: 1.42rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 10px; }
.auth-card__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .655rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); background: var(--panel-sunken);
  border: 1px solid var(--line);
  padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 28px;
}
.auth-card form { text-align: left; }
.auth-card__footer {
  margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line);
  font-size: .695rem; color: var(--faint); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; text-align: center;
}

/* ==========================================================================
   12  Punch kiosk (worker-facing, mobile-first)
   ========================================================================== */
.kiosk {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(760px 520px at 50% -6%, rgba(78, 112, 134, .55), transparent 66%),
    linear-gradient(170deg, var(--primary-dark) 0%, #12212A 100%);
  color: #E6EEF3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  text-align: center;
  overflow: hidden;
}
.kiosk::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .055; mix-blend-mode: overlay; pointer-events: none;
}
.kiosk > * { position: relative; z-index: 1; }

.kiosk__screen {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 380px;
}
.kiosk__screen[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kiosk__screen:not([hidden]) { animation: rise .5s cubic-bezier(.16,.84,.34,1) both; }
}

/* --- Menu screen --- */
.kiosk__logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.kiosk__logo-mark {
  display: block;
  width: min(58vw, 196px); height: auto;
  border-radius: 0;
}
.kiosk__menu-sub {
  color: var(--tint);
  font-size: .69rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 38px;
}
.kiosk__menu-buttons { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.kiosk__menu-btn {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  font-family: var(--font-display); font-weight: 650; font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: #fff; cursor: pointer; text-align: left;
  box-shadow: var(--e-4), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .14s cubic-bezier(.16,.84,.34,1), filter .16s ease, box-shadow .16s ease;
}
.kiosk__menu-btn__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  font-size: 1rem;
}
.kiosk__menu-btn__arrow { margin-left: auto; opacity: .55; font-size: .85rem; }
.kiosk__menu-btn:hover { filter: brightness(1.08); }
.kiosk__menu-btn:active { transform: scale(.978); }
.kiosk__menu-btn--in { background: linear-gradient(160deg, #2A9160, var(--success)); }
.kiosk__menu-btn--out { background: linear-gradient(160deg, var(--primary-light), var(--primary)); }

/* --- Scan screen --- */
.kiosk__brand {
  font-family: var(--font-body); font-weight: 700;
  font-size: .69rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--tint);
  background: rgba(182, 208, 226, .12);
  border: 1px solid rgba(182, 208, 226, .22);
  padding: 6px 16px; border-radius: var(--r-pill);
  margin-bottom: 30px;
}

.kiosk__viewfinder {
  width: min(74vw, 292px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  background: #101E26;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), var(--e-4), 0 0 0 14px rgba(182, 208, 226, .07);
  transition: box-shadow .3s ease;
}
.kiosk__viewfinder video {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
  display: block;
  border-radius: 50%;
}
/* Scan sweep line, clipped to the circle */
.kiosk__viewfinder__sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.kiosk__viewfinder__sweep::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(182, 208, 226, .26), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .kiosk__viewfinder__sweep::before { animation: sweep 2.8s ease-in-out infinite; }
}
/* Rotating arc ring, drawn outside the feed so it never clips it */
.kiosk__viewfinder::after {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--tint);
  border-right-color: rgba(182, 208, 226, .3);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kiosk__viewfinder::after { animation: spin 2.4s linear infinite; }
}
.kiosk__viewfinder.state-verified {
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), var(--e-4), 0 0 0 14px rgba(95, 211, 148, .16);
}
.kiosk__viewfinder.state-verified::after { border-top-color: #5FD394; border-right-color: rgba(95, 211, 148, .4); animation: none; }
.kiosk__viewfinder.state-verified .kiosk__viewfinder__sweep { display: none; }
.kiosk__viewfinder.state-denied {
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), var(--e-4), 0 0 0 14px rgba(240, 133, 125, .16);
}
.kiosk__viewfinder.state-denied::after { border-top-color: #F0857D; border-right-color: rgba(240, 133, 125, .4); animation: none; }
.kiosk__viewfinder.state-denied .kiosk__viewfinder__sweep { display: none; }

.kiosk__status {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #fff;
  margin-top: 26px;
  min-height: 1.5em;
}
.kiosk__status.state-verified { color: #5FD394; }
.kiosk__status.state-denied { color: #F0857D; }
.kiosk__detail {
  color: #A9C3D2; font-size: .89rem; line-height: 1.6;
  margin-top: 8px; max-width: 34ch;
}

.kiosk__back-link {
  margin-top: 30px; background: none; border: none; cursor: pointer;
  color: #83A0B2; font-family: var(--font-body); font-size: .84rem; font-weight: 500;
  padding: 8px 18px; border-radius: var(--r-pill);
  transition: color .15s ease, background-color .15s ease;
}
.kiosk__back-link:hover { color: #fff; background: rgba(255,255,255,.07); }

/* --- Result screen --- */
.kiosk__result-icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.7rem; color: #fff;
  background: linear-gradient(160deg, #2A9160, var(--success));
  box-shadow: var(--e-4), 0 0 0 12px rgba(30, 122, 74, .14);
  margin-bottom: 22px;
}
.kiosk__result-icon.state-error {
  background: linear-gradient(160deg, #D8514D, var(--danger));
  box-shadow: var(--e-4), 0 0 0 12px rgba(196, 43, 40, .14);
}
#screen-result .kiosk__status { margin-top: 0; font-size: 1.4rem; }
#screen-result .kiosk__detail { max-width: 36ch; }
.kiosk__result-actions { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.kiosk__result-actions .btn { min-width: 130px; }
.kiosk .btn-ghost {
  --btn-bg: rgba(255,255,255,.07);
  --btn-bd: rgba(255,255,255,.16);
  --btn-fg: #E6EEF3;
  box-shadow: none;
}
.kiosk .btn-ghost:hover { --btn-bg: rgba(255,255,255,.13); --btn-bd: rgba(255,255,255,.26); }
.kiosk .btn-primary { --btn-bd: rgba(255,255,255,.18); }

.kiosk__footer {
  margin-top: 40px;
  font-size: .73rem;
  line-height: 1.7;
  color: #6E8A9C;
  max-width: 40ch;
}
.kiosk__footer strong { color: var(--tint); font-weight: 600; }

/* ==========================================================================
   13  Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  :root { --sidebar-w: 224px; --gutter: 26px; }
}

@media (max-width: 900px) {
  :root { --gutter: 18px; }

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

  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 274px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.16, .84, .34, 1);
    box-shadow: var(--e-4);
  }
  .sidebar.is-open { transform: none; }
  .sidebar nav a { animation: none; }

  .sidebar__scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(14, 25, 32, .55);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
    z-index: 39;
  }
  .sidebar__scrim.is-open { opacity: 1; pointer-events: auto; }

  .status-strip__toggle { display: grid; place-items: center; }
  .status-strip__readout { font-size: .67rem; }

  .page { padding: 24px var(--gutter) 56px; }
  .page__header { margin-bottom: 20px; }
  .card { padding: 20px 18px; }
  .card--flush .card__head { padding: 18px 18px 0; }
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .btn { width: 100%; }
  thead th, tbody td { padding: 11px 12px; }
  /* Let wide tables scroll sideways instead of squeezing every cell
     onto three wrapped lines. */
  .table-wrap table { min-width: 580px; }

  .auth-shell {
    background:
      radial-gradient(700px 480px at 20% 0%, rgba(78, 112, 134, .38), transparent 60%),
      linear-gradient(rgba(26, 46, 58, .90), rgba(18, 32, 41, .93)),
      url('/SAEM_face_attendance_system/assets/login-background.jpg') right center / cover no-repeat,
      var(--primary-deep);
  }
  .auth-layout { flex-direction: column; min-height: 0; }
  .auth-brand-panel { padding: 26px; }
  .auth-brand-panel__body { margin: 20px 0; }
  .auth-brand-panel p, .auth-brand-panel__pills { display: none; }
  .auth-form-panel { flex: none; padding: 34px 26px; }
}

@media (max-width: 560px) {
  .status-strip__clock #topbar-date, .status-strip__sep { display: none; }
  .stat__value { font-size: 2.15rem; }
  .page__actions { width: 100%; }
  .page__actions .btn { flex: 1; }
  .kiosk__result-actions .btn { min-width: 0; flex: 1; }
}

/* Print — attendance sheets get printed */
@media print {
  .sidebar, .status-strip, .page__actions, .actions, .filter-bar, .sidebar__scrim { display: none !important; }
  .admin-shell { display: block; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .page { padding: 0; max-width: none; }
  .page > *, .grid--stats > * { animation: none !important; }
}