/* =====================================================================
   ROLL CALL — WORLD-CLASS DESIGN SYSTEM
   =====================================================================
   A meticulously crafted, high-trust attendance interface.
   Bright cyan-teal from the brand image on warm paper by day.
   Deep teal-on-charcoal by night.
   Fraunces for brand moments. System UI for speed and clarity.
   
   This stylesheet is intentionally comprehensive (2000+ lines).
   Every interactive element, state, breakpoint, and edge case is covered.
   Use as external stylesheet or paste inside <style> for true inline.
   
   Color system rebuilt from the reference image:
   center ≈ #01BCE9 · edge #025A70 · mean #027B9A
   Aligned with Tailwind cyan / teal / sky scales.
   ===================================================================== */

/* =====================================================================
   1. FONT FACES
   ===================================================================== */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-Variable.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpaceMono';
  src: url('assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpaceMono';
  src: url('assets/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   2. CSS CUSTOM PROPERTIES — LIGHT THEME (DEFAULT)
   ===================================================================== */
:root {
  /* Core surfaces — bold cyan-teal from the brand image for the page
     itself; every card/box stays crisp white so it clearly stands out
     against that page color instead of blending into it.
     Reference: center #01BCE9 · edge #025A70 · mean #027B9A
     Tailwind: cyan-300 bg, cyan-600/700 accent, cyan-50–200 surfaces */
  --bg: #38BDF8;
  --surface: #FFFFFF;
  --surface-2: #ECFEFF;
  --surface-3: #CFFAFE;
  --surface-4: #A5F3FC;
  --surface-elevated: #FFFFFF;

  /* Text hierarchy — deep teal-ink for readability on cyan */
  --text: #0C4A6E;
  --text-secondary: #164E63;
  --muted: #0E7490;
  --muted-2: #0891B2;
  --placeholder: #67A8B8;

  /* Borders & dividers */
  --border: #A5F3FC;
  --border-strong: #67E8F9;
  --border-subtle: #CFFAFE;
  --divider: #BAE6FD;

  /* Brand / Accent — deep cyan matching image edges (Tailwind cyan-600/700) */
  --accent: #0891B2;
  --accent-strong: #0E7490;
  --accent-hover: #06B6D4;
  --accent-active: #155E75;
  --accent-ink: #F0FDFA;
  --accent-soft: #CFFAFE;
  --accent-softer: #ECFEFF;
  --accent-glow: rgba(8, 145, 178, 0.22);

  /* Secondary warm accent (rose for contrast) */
  --accent-2: #E11D48;
  --accent-2-strong: #BE123C;
  --accent-2-soft: #FFE4E6;
  --accent-2-softer: #FFF1F2;

  /* Status colors */
  --present: #059669;
  --present-bg: #D1FAE5;
  --present-border: #A7F3D0;
  --absent: #E11D48;
  --absent-bg: #FFE4E6;
  --absent-border: #FECDD3;
  --permission: #D97706;
  --permission-bg: #FEF3C7;
  --permission-border: #FDE68A;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --info: #0284C7;
  --info-bg: #E0F2FE;
  --success: #059669;
  --danger: #E11D48;

  /* Focus & interaction */
  --focus-ring: #0891B2;
  --focus-ring-offset: 2px;
  --focus-glow: 0 0 0 3px var(--accent-soft);

  /* Brand gradient — cyan → teal → soft rose */
  --brand-gradient: linear-gradient(135deg, #0E7490 0%, #0891B2 40%, #06B6D4 70%, #E11D48 100%);
  --brand-gradient-soft: linear-gradient(135deg, #CFFAFE 0%, #FFE4E6 100%);
  --brand-gradient-text: linear-gradient(135deg, #0E7490 0%, #06B6D4 100%);

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(24, 22, 12, 0.04);
  --shadow-sm: 0 1px 3px rgba(24, 22, 12, 0.06), 0 1px 2px rgba(24, 22, 12, 0.04);
  --shadow: 0 2px 6px rgba(24, 22, 12, 0.06), 0 10px 24px rgba(24, 22, 12, 0.06);
  --shadow-md: 0 4px 12px rgba(24, 22, 12, 0.08), 0 12px 28px rgba(24, 22, 12, 0.07);
  --shadow-lg: 0 12px 32px rgba(24, 22, 12, 0.12), 0 4px 10px rgba(24, 22, 12, 0.07);
  --shadow-xl: 0 20px 48px rgba(24, 22, 12, 0.14), 0 8px 16px rgba(24, 22, 12, 0.08);
  --shadow-inner: inset 0 1px 3px rgba(24, 22, 12, 0.06);
  --shadow-focus: 0 0 0 3px var(--accent-soft);
  --shadow-accent: 0 4px 14px rgba(8, 145, 178, 0.28);

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-mono: 'SpaceMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* Layout */
  --header-height: 64px;
  --side-nav-width: 220px;
  --side-nav-collapsed: 72px;
  --max-content: 1200px;
  --max-narrow: 480px;

  color-scheme: light;
}

/* =====================================================================
   3. DARK THEME
   ===================================================================== */
[data-theme="dark"] {
  /* Deep teal-navy backgrounds derived from image edges / Tailwind teal-950 */
  --bg: #042F2E;
  --surface: #0B3A3B;
  --surface-2: #0F4C4D;
  --surface-3: #134E4A;
  --surface-4: #115E59;
  --surface-elevated: #0D3D3E;

  --text: #ECFEFF;
  --text-secondary: #CFFAFE;
  --muted: #67E8F9;
  --muted-2: #22D3EE;
  --placeholder: #5EEAD4;

  --border: #134E4A;
  --border-strong: #0F766E;
  --border-subtle: #0B3A3B;
  --divider: #134E4A;

  --accent: #22D3EE;
  --accent-strong: #67E8F9;
  --accent-hover: #67E8F9;
  --accent-active: #06B6D4;
  --accent-ink: #042F2E;
  --accent-soft: #0F766E;
  --accent-softer: #115E59;
  --accent-glow: rgba(34, 211, 238, 0.28);

  --accent-2: #FB7185;
  --accent-2-strong: #FDA4AF;
  --accent-2-soft: #4C0519;
  --accent-2-softer: #3F0A1A;

  --present: #34D399;
  --present-bg: #064E3B;
  --present-border: #065F46;
  --absent: #FB7185;
  --absent-bg: #4C0519;
  --absent-border: #881337;
  --permission: #FBBF24;
  --permission-bg: #451A03;
  --permission-border: #78350F;
  --warning: #FBBF24;
  --warning-bg: #451A03;
  --info: #38BDF8;
  --info-bg: #0C4A6E;
  --success: #34D399;
  --danger: #FB7185;

  --focus-ring: #67E8F9;
  --focus-glow: 0 0 0 3px var(--accent-soft);

  --brand-gradient: linear-gradient(135deg, #0E7490 0%, #22D3EE 50%, #FB7185 100%);
  --brand-gradient-soft: linear-gradient(135deg, #0F766E 0%, #4C0519 100%);
  --brand-gradient-text: linear-gradient(135deg, #67E8F9 0%, #FB7185 100%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-accent: 0 4px 16px rgba(34, 211, 238, 0.3);

  color-scheme: dark;
}

/* =====================================================================
   4. CSS RESET & BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-normal) var(--ease-out);
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}

p {
  max-width: 65ch;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-out);
}

/* =====================================================================
   5. UTILITY CLASSES — LAYOUT
   ===================================================================== */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.fixed { position: fixed; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* =====================================================================
   6. UTILITY CLASSES — SPACING
   ===================================================================== */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* =====================================================================
   7. TYPOGRAPHY UTILITIES
   ===================================================================== */
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.text-accent { color: var(--accent); }
.text-accent-strong { color: var(--accent-strong); }
.text-present { color: var(--present); }
.text-absent { color: var(--absent); }
.text-permission { color: var(--permission); }

.small {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
}

/* =====================================================================
   8. FOCUS & ACCESSIBILITY
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-glow);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --text: #000000;
    --bg: #FFFFFF;
  }
  [data-theme="dark"] {
    --border: #FFFFFF;
    --text: #FFFFFF;
    --bg: #000000;
  }
}

/* =====================================================================
   9. BUTTONS — COMPLETE SYSTEM
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    letter-spacing var(--duration-fast) var(--ease-out),
    filter var(--duration-normal) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Shine sweep on hover — portfolio polish */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.btn:hover:not(:disabled)::before {
  transform: translateX(120%);
}

.btn > * {
  position: relative;
  z-index: 2;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.15);
}

/* Primary */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow:
    var(--shadow-sm),
    var(--shadow-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow:
    var(--shadow-md),
    0 8px 24px rgba(8, 145, 178, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:active:not(:disabled) {
  background: var(--accent-active);
  border-color: var(--accent-active);
  box-shadow: var(--shadow-sm);
}

/* Secondary / Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:active:not(:disabled) {
  background: var(--surface-3);
}

/* Soft accent */
.btn-soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: transparent;
  box-shadow: none;
}

.btn-soft:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}

/* Danger */
.btn-danger {
  background: var(--absent);
  color: #fff;
  border-color: var(--absent);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
}

.btn-danger:hover:not(:disabled) {
  background: #be123c;
  border-color: #be123c;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.35);
}

/* Outline accent */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline:hover:not(:disabled) {
  background: var(--accent-soft);
}

/* Size variants */
.btn-sm {
  padding: 7px 14px;
  font-size: var(--text-xs);
  border-radius: var(--radius-xs);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--text-base);
  border-radius: var(--radius);
}

.btn-xl {
  padding: 16px 32px;
  font-size: var(--text-lg);
  border-radius: var(--radius-md);
}

.btn-icon {
  padding: 10px;
  width: 40px;
  height: 40px;
}

.btn-icon.btn-sm {
  padding: 6px;
  width: 32px;
  height: 32px;
}

/* Full width */
.btn-block {
  display: flex;
  width: 100%;
}

/* Loading state */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  color: var(--accent-ink);
}

.btn-ghost.is-loading::after,
.btn-soft.is-loading::after,
.btn-outline.is-loading::after {
  color: var(--accent);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   10. FORM CONTROLS
   ===================================================================== */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

label > span.small {
  display: block;
  font-weight: 400;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 1rem; /* Prevent iOS zoom */
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-glow);
  background: var(--surface);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* Select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.form-error {
  color: var(--absent);
  font-size: var(--text-sm);
  min-height: 1.3em;
  margin: -2px 0 var(--space-2);
  font-weight: 500;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-4);
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

/* Search input */
input[type="search"] {
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

[data-theme="dark"] input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
}

/* =====================================================================
   11. CARDS
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
  transition:
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card-elevated {
  box-shadow: var(--shadow-lg);
}

.card-flat {
  box-shadow: none;
  border-color: var(--border-subtle);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow:
    var(--shadow-lg),
    0 12px 32px rgba(8, 145, 178, 0.12);
}

.card-interactive:active {
  transform: translateY(-1px);
  transition-duration: 100ms;
}

/* =====================================================================
   12. TABLES
   ===================================================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  /* Belt-and-braces: never let this box be asked to grow past its parent
     no matter how many day-columns are inside it — the days scroll
     *inside* this box, this box itself does not grow. */
  width: 100%;
  max-width: 100%;
}



.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.report-table {
  white-space: nowrap;
}

/* A one-column-per-day table is meant to be browsed by sliding it sideways
   with a finger on a phone, not by shrinking the whole page to squeeze it
   in — this caption just makes that swipeable behavior obvious. Browsers
   without :has() support simply skip it; nothing breaks either way. */
@media (max-width: 640px) {
  .table-wrap:has(.report-table)::before {
    content: "↔ swipe sideways to see more days";
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
  }
}

.data-table th,
.data-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr.is-selected {
  background: var(--accent-soft);
}

/* =====================================================================
   13. AVATARS
   ===================================================================== */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  display: block;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.avatar-sm {
  width: 26px;
  height: 26px;
}

.avatar-md {
  width: 44px;
  height: 44px;
}

.avatar-lg {
  width: 56px;
  height: 56px;
}

.avatar-xl {
  width: 80px;
  height: 80px;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--present-border);
}

/* =====================================================================
   14. STATUS PILLS & BADGES
   ===================================================================== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-pill.yes,
.status-pill.present {
  background: var(--present-bg);
  color: var(--present);
  border: 1px solid var(--present-border);
}

.status-pill.no,
.status-pill.absent {
  background: var(--absent-bg);
  color: var(--absent);
  border: 1px solid var(--absent-border);
}

.status-pill.permission {
  background: var(--permission-bg);
  color: var(--permission);
  border: 1px solid var(--permission-border);
}

.status-pill.muted {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-ink);
}

.badge-soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* =====================================================================
   15. MEMBER NAME CELL
   ===================================================================== */
.member-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.member-name-cell .name {
  font-weight: 600;
  color: var(--text);
}

.member-name-cell .meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* =====================================================================
   16. THEME TOGGLE, LANG TOGGLE, HELP TOGGLE
   ===================================================================== */
.theme-toggle,
.lang-toggle,
.help-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover,
.lang-toggle:hover,
.help-toggle:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.theme-toggle:active,
.lang-toggle:active,
.help-toggle:active {
  transform: scale(0.97);
}

.offline-badge {
  background: var(--permission-bg);
  color: var(--permission);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--permission-border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.offline-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =====================================================================
   17. AUTH / LANDING PAGE
   ===================================================================== */
.auth-page {
  min-height: 100vh;
  padding: 0 0 var(--space-8);
  background: #38BDF8;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}

.landing-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.brand-logo-link,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.brand-logo-img {
  display: inline-block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  border-radius: 10px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Organization directory */
.org-directory {
  padding: var(--space-6);
}

.view-head {
  margin-bottom: var(--space-5);
}

.view-head h1 {
  margin-bottom: var(--space-2);
}

.view-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.org-search-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.org-search-field {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.org-code-field {
  flex: 0 1 220px;
}

.org-code-field input {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
  min-height: 60px;
}

.org-grid[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.org-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}

.org-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.org-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.org-card:hover::before {
  opacity: 1;
}

.org-card:active {
  transform: translateY(-1px);
}

.org-card img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.org-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.3;
}

.org-card-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  width: fit-content;
}

.org-card-tap-hint {
  font-size: 0.68rem;
  color: var(--accent-2);
  font-weight: 700;
  margin-top: 2px;
}

/* Auth shell & tabs */
.auth-shell {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-5);
  background: var(--surface-2);
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.auth-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.auth-tab:hover:not(.is-active) {
  color: var(--text);
}

/* auth-form: hidden by default, shown when JS adds is-active */
.auth-form {
  display: none;
}

.auth-form.is-active {
  display: block;
  animation: fadeSlideIn 0.25s var(--ease-out);
}

/* inline "Don't have an account?" switch link */
.auth-switch-hint {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: none;
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-switch-btn:hover {
  color: var(--accent-hover);
}

.auth-panel {
  display: none;
}

.auth-panel.is-active {
  display: block;
  animation: fadeSlideIn 0.25s var(--ease-out);
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================================
   18. APP SHELL (DASHBOARD)
   ===================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-height);
}

/* The brand block (logo + org name/heading) must be allowed to shrink and
   truncate — without this, a long organization name has nowhere to go and
   pushes the Help/language/theme/sign-out buttons off the edge of the
   screen on a phone, which is what made the whole topbar feel broken on
   mobile. */
.topbar .brand-logo-link {
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-org-logo {
  flex-shrink: 0;
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.topbar-brand-text .brand-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scrolling ticker for org heading */
.org-heading-ticker {
  display: block;
  overflow: hidden;
  max-width: 320px;
  white-space: nowrap;
}

.org-heading-inner {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-serif);
  white-space: nowrap;
  animation: headingTicker 14s linear infinite;
  padding-right: 60px;
}

@keyframes headingTicker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Legacy .org-heading (kept for safety) */
.org-heading {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.user-chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--side-nav-width) 1fr;
  min-height: calc(100vh - var(--header-height));
  /* A grid column defaults to "min-width: auto", which sizes itself to fit
     the widest thing inside it — including a 30/31-column report table
     that isn't supposed to be full width, it's supposed to scroll inside
     its own box. Without this, that table quietly forces the whole grid
     (and so the whole page) wider than the phone's screen, and the browser
     zooms the entire page out to fit it — which is exactly why Members and
     Reports looked "shrunk" until pinching to zoom back in. min-width: 0
     lets the column — and the table's own scroll box inside it — actually
     do the clipping/scrolling instead. */
  min-width: 0;
}

/* Side navigation */
.side-nav {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-ico {
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Views container */
.views {
  padding: var(--space-5) var(--space-6);
  max-width: var(--max-content);
  width: 100%;
  /* Same grid-blowout fix as .app-shell above — this is the actual grid
     item, so it's the one that needs min-width: 0 to stop a wide table
     inside it from stretching the whole page on mobile. */
  min-width: 0;
}

.view {
  display: none;
  animation: fadeSlideIn 0.22s var(--ease-out);
}

.view.is-active {
  display: block;
}

/* =====================================================================
   19. EMPTY STATES
   ===================================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  max-width: 420px;
  margin: 0 auto;
}

.empty-state h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.empty-state p {
  color: var(--muted);
  margin-bottom: var(--space-5);
  max-width: none;
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

/* =====================================================================
   20. SCAN VIEW
   ===================================================================== */
.scan-time-bar {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  padding: 0 4px;
  margin-bottom: var(--space-3);
}

.sound-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.sound-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.sound-toggle.is-on {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Video / camera area */
.camera-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #042F2E;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  max-width: 640px;
  margin: 0 auto;
}

.camera-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The overlay canvas (face box, guide oval, name tag) is drawn in the exact
   same pixel space as the video frame, then stretched to sit right on top
   of it — it must be absolutely positioned or it just pushes the video
   down and gets clipped by overflow:hidden, which silently hid every
   drawing this app made on it. */
.camera-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Smaller, squarer camera for face enrollment — a tighter frame makes it
   easier for both the person and the detector to center a face fast. */
.camera-wrap.small {
  max-width: 340px;
  aspect-ratio: 1 / 1;
}

/* Live text/color feedback while capturing an enrollment angle or scanning */
.capture-status {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  min-height: 1.3em;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.capture-status.is-good { color: var(--present); }
.capture-status.is-bad { color: var(--absent); }
.capture-status.is-info { color: var(--accent-strong); }

.enroll-shots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
}

.shot-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--border-strong);
  transition: all var(--duration-normal) var(--ease-spring);
}

.shot-dot.done {
  background: var(--present);
  border-color: var(--present);
  transform: scale(1.2);
  box-shadow: 0 0 0 3px var(--present-bg);
}

/* Bright flash confirming a successful match / capture */
.scan-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--present);
  opacity: 0;
}

.scan-flash.flash {
  animation: scanFlashPulse 0.45s var(--ease-out);
}

@keyframes scanFlashPulse {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}

.last-match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 auto var(--space-4);
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  min-height: 30px;
}

.last-match-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--present);
  flex-shrink: 0;
}

.live-tally {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.tally.present { color: var(--present); }
.tally.absent { color: var(--muted); }

/* =====================================================================
   SCAN PAGE — two-column layout + loading overlay + member rows
   ===================================================================== */

/* Attendance tab menu bar */
.att-menu {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-5);
  background: var(--surface-2);
  width: fit-content;
  gap: 2px;
}

.att-menu-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 9px 24px;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.att-menu-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.att-view {
  display: none;
}

.att-view.is-active {
  display: block;
}
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 768px) {
  .scan-layout {
    grid-template-columns: 1fr;
  }
}

.scan-camera-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Members column */
.scan-members-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-height: 75vh;
  overflow-y: auto;
}

.scan-members-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Each member row in the scan panel */
.scan-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.scan-member-row:last-child {
  border-bottom: none;
}

.scan-member-row.scan-member-present {
  background: var(--present-bg);
}

.scan-member-row.scan-member-permission {
  background: var(--permission-bg);
}

.scan-member-avatar {
  flex-shrink: 0;
}

.scan-member-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-perm-btn {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 3px 8px;
}

/* Loading overlay on the camera while first detection runs */
.scan-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}

.scan-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Flip camera button — bottom-right corner of camera wrap */
.flip-camera-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 11;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.flip-camera-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: rotate(180deg);
}

/* Torch / flash button — bottom-left corner */
.torch-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 11;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 19px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--duration-fast) var(--ease-out);
}

.torch-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.torch-btn.torch-on {
  background: rgba(255, 220, 50, 0.85);
  color: #333;
}

/* Screen flash overlay for front camera — brief white burst */
.screen-flash-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #ffffff;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: none;
}

/* Stays lit until the torch button is tapped again */
.screen-flash-overlay:not(.hidden) {
  opacity: 0.9;
  animation: none;
}

@keyframes flashBurst {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* =====================================================================
   MOBILE — horizontal scroll nav bars
   ===================================================================== */
@media (max-width: 640px) {
  /* Landing header actions scroll horizontally on phones */
  .header-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .header-actions::-webkit-scrollbar { display: none; }

  /* Dashboard topbar user area scrolls horizontally */
  .topbar-user {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar-user::-webkit-scrollbar { display: none; }

  /* Attendance menu scrolls horizontally */
  .att-menu {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .att-menu::-webkit-scrollbar { display: none; }
}

.camera-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color 0.3s ease;
}

.camera-overlay.is-match {
  border-color: var(--present);
  box-shadow: inset 0 0 30px rgba(8, 145, 178, 0.35);
}

.camera-overlay.is-no-match {
  border-color: var(--absent);
}

.scan-status {
  text-align: center;
  padding: var(--space-4);
  font-weight: 600;
  font-size: 1.05rem;
}

.scan-status.matched {
  color: var(--present);
}

.scan-status.not-matched {
  color: var(--absent);
}

/* Recent scans list */
.recent-scans {
  display: grid;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
}

.recent-scan-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: fadeSlideIn 0.3s var(--ease-out);
}

/* =====================================================================
   21. SUBTABS
   ===================================================================== */
.subtabs {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-5);
  background: var(--surface-2);
  width: fit-content;
  flex-wrap: wrap;
  gap: 2px;
}

.subtab {
  background: none;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.subtab:hover:not(.is-active) {
  color: var(--text);
}

.subtab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   22. SESSION CARDS & LISTS
   ===================================================================== */
.session-list {
  display: grid;
  gap: var(--space-3);
}

.session-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.session-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.session-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.session-card-info h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-family: var(--font-serif);
}

.session-card-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.session-card-reason {
  font-style: italic;
  margin-bottom: 2px;
}

.session-card-counts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 6px;
}

.session-detail-expanded {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.session-member-row:last-child {
  border-bottom: none;
}

.session-member-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-member-time {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.session-member-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.day-header-btn {
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.day-header-btn:hover {
  text-decoration: underline;
  background: var(--accent-soft);
}

/* =====================================================================
   23. MODALS
   ===================================================================== */
/* NOTE: visibility is controlled by the .hidden utility class (display:none),
   toggled directly by app.js (classList.add/remove("hidden")). This rule used
   to ALSO require an ".is-open" class for opacity/visibility, but app.js never
   set that class — so every modal (Add member, org sign-in, session/day detail)
   stayed invisible (opacity:0 / visibility:hidden) even after ".hidden" was
   removed. That was the "Add member button doesn't work" bug. Fixed by making
   the base state visible; ".hidden" (display:none !important) is the only
   thing that hides it, and still wins here since it's used everywhere. */
.modal-backdrop,
[id$="Modal"] {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 47, 46, 0.6);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

.modal-backdrop.hidden,
[id$="Modal"].hidden {
  opacity: 0;
  visibility: hidden;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform var(--duration-normal) var(--ease-out);
}

.modal-backdrop.is-open .modal-card,
[id$="Modal"].is-open .modal-card {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.modal-header h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.modal-close:hover {
  color: var(--text);
  background: var(--surface-2);
}

#sessionDetailModal .modal-card,
#dayDetailModal .modal-card {
  max-width: 560px;
}

.session-detail-list,
.day-detail-list {
  max-height: 50vh;
  overflow-y: auto;
}

.session-detail-row,
.day-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.session-detail-row:last-child,
.day-detail-row:last-child {
  border-bottom: none;
}

.session-detail-row .avatar,
.day-detail-row .avatar {
  width: 40px;
  height: 40px;
}

.session-detail-meta {
  flex: 1;
  min-width: 0;
}

.session-detail-meta .small {
  display: block;
}

/* Help modal specific */
#helpModal {
  background: rgba(4, 47, 46, 0.5);
  backdrop-filter: blur(6px) saturate(1.2);
}

.help-card {
  max-width: 620px;
}

.help-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: var(--space-3) 0 var(--space-4);
  padding-right: 4px;
}

.help-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.help-item:last-child {
  border-bottom: none;
}

.help-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-strong);
}

.help-item p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: none;
}

/* Org login modal */
#orgLoginModal .modal-card {
  max-width: 380px;
}

#orgLoginModal .org-login-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}

#orgLoginModal .org-login-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* =====================================================================
   24. PUBLISHER PAGE
   ===================================================================== */
.publisher-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-card .stat-num {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-strong);
  display: block;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}

.publisher-orgs {
  display: grid;
  gap: var(--space-3);
}

.publisher-org-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.publisher-org-card:hover {
  border-color: var(--border-strong);
}

.publisher-org-card img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.publisher-org-meta {
  flex: 1;
  min-width: 200px;
}

.publisher-org-counts {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}

/* =====================================================================
   25. REPORTS
   ===================================================================== */
.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  align-items: flex-end;
}

.report-controls label {
  margin-bottom: 0;
}

.next-month-row {
  margin-top: var(--space-4);
}

/* =====================================================================
   26. TOASTS / NOTIFICATIONS
   ===================================================================== */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
  width: 100%;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  pointer-events: auto;
  animation: toastIn 0.35s var(--ease-spring);
}

.toast.is-leaving {
  animation: toastOut 0.25s var(--ease-out) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

.toast-success {
  border-left: 4px solid var(--present);
}

.toast-error {
  border-left: 4px solid var(--absent);
}

.toast-info {
  border-left: 4px solid var(--info);
}

/* =====================================================================
   27. LOADING SKELETONS
   ===================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 22px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* =====================================================================
   28. SCROLLBARS
   ===================================================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* =====================================================================
   29. RESPONSIVE — LARGE DESKTOP
   ===================================================================== */
@media (min-width: 1400px) {
  .landing-shell {
    max-width: 1280px;
  }

  .views {
    padding: var(--space-6) var(--space-8);
  }
}

/* =====================================================================
   30. RESPONSIVE — TABLET (≤1024px)
   ===================================================================== */
@media (max-width: 1024px) {
  .landing-shell {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .auth-shell {
    position: static;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: var(--space-2) var(--space-2);
    border-right: none;
    border-top: 1px solid var(--border);
    z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: auto;
    gap: 0;
  }

  .nav-item {
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    font-size: 0.7rem;
    min-width: 64px;
    text-align: center;
  }

  .nav-item.is-active {
    box-shadow: none;
    background: var(--accent-soft);
  }

  .nav-ico {
    font-size: 1.25rem;
  }

  .views {
    padding: var(--space-4) var(--space-4) 90px;
  }

  .topbar {
    padding: var(--space-3) var(--space-4);
  }
}

/* =====================================================================
   31. RESPONSIVE — MOBILE (≤640px)
   ===================================================================== */
@media (max-width: 640px) {
  :root {
    --header-height: 56px;
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  .landing-header {
    padding: var(--space-3) var(--space-4);
  }

  .landing-shell {
    padding: var(--space-4) var(--space-3) 0;
  }

  .org-directory {
    padding: var(--space-4);
  }

  .org-search-row {
    flex-direction: column;
  }

  .org-code-field {
    flex: 1 1 auto;
  }

  .org-grid {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: var(--space-5);
    border-radius: var(--radius);
  }

  .header-actions {
    gap: var(--space-1);
  }

  .topbar {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .topbar-brand-text .brand-name {
    font-size: 1.1rem;
  }

  .org-heading {
    font-size: 0.72rem;
  }

  .topbar-user {
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
  }

  .offline-badge {
    padding: 5px 10px;
    font-size: 0.7rem;
  }

  .theme-toggle,
  .lang-toggle,
  .help-toggle {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .user-chip {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .view-head-row {
    flex-direction: column;
    align-items: stretch;
  }

  .session-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .publisher-org-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal-card {
    padding: var(--space-5);
    max-height: 85vh;
  }

  .subtabs {
    width: 100%;
    overflow-x: auto;
  }

  .btn {
    padding: 12px 18px;
  }

  .camera-wrap {
    border-radius: var(--radius);
    max-width: 100%;
  }

  .camera-wrap.small {
    max-width: 260px;
  }

  .last-match {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 10px;
  }

  .live-tally {
    gap: var(--space-3);
    font-size: 0.85rem;
  }

  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: 80px;
    max-width: none;
  }
}

/* =====================================================================
   32. RESPONSIVE — SMALL MOBILE (≤400px)
   ===================================================================== */
@media (max-width: 400px) {
  .brand-name {
    font-size: 1.2rem;
  }

  .topbar-brand-text .brand-name {
    font-size: 1rem;
  }

  .org-heading {
    display: none;
  }

  .offline-badge {
    padding: 4px 8px;
    font-size: 0.65rem;
  }

  .theme-toggle,
  .lang-toggle,
  .help-toggle {
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .nav-item {
    min-width: 56px;
    padding: 6px 6px;
    font-size: 0.65rem;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }

  .stat-card .stat-num {
    font-size: 1.5rem;
  }
}

/* =====================================================================
   33. PRINT STYLES
   ===================================================================== */
@media print {
  body * {
    visibility: hidden;
  }

  #reportPrintArea,
  #reportPrintArea * {
    visibility: visible;
  }

  #reportPrintArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .data-table {
    font-size: 11px;
  }

  .data-table th,
  .data-table td {
    padding: 6px 8px;
  }

  .btn,
  .side-nav,
  .topbar,
  .theme-toggle,
  .lang-toggle,
  .help-toggle {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .card,
  .table-wrap {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* =====================================================================
   34. MICRO-INTERACTIONS & ANIMATIONS
   ===================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s var(--ease-out);
}

.animate-slide-up {
  animation: slideUp 0.35s var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn 0.3s var(--ease-spring);
}

/* Match success flash */
.match-flash {
  animation: matchPulse 0.6s var(--ease-out);
}

@keyframes matchPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(8, 145, 178, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(8, 145, 178, 0);
  }
}

/* =====================================================================
   35. ADDITIONAL COMPONENT POLISH
   ===================================================================== */

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* Tooltip */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--divider);
  margin: var(--space-5) 0;
  border: none;
}

/* Section title */
.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 650;
  margin-bottom: var(--space-4);
  color: var(--text);
}

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.chip-accent {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--present-border);
}

/* Floating action button */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: var(--z-sticky);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
}

.fab:active {
  transform: scale(0.96);
}

@media (max-width: 1024px) {
  .fab {
    bottom: 90px;
  }
}

/* =====================================================================
   35b. LANDING PAGE — TOP MENU BAR (Attendance system list / Registration)
   ===================================================================== */
.landing-menu {
  display: flex;
  gap: var(--space-2);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) 0;
}

.landing-menu-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.landing-menu-item:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.landing-menu-item.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-accent);
}

.landing-menu-ico {
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .landing-menu {
    padding: var(--space-3) var(--space-3) 0;
    gap: var(--space-1);
  }
  .landing-menu-item {
    padding: 12px 8px;
    font-size: 0.8rem;
    flex-direction: column;
    gap: 4px;
  }
}

/* Landing sections toggled by the menu bar (org directory vs. auth panel) */
.landing-section {
  display: none;
}
.landing-section.is-active {
  display: block;
}
.landing-shell {
  display: block;
}
.landing-shell .landing-section.org-section.is-active {
  display: grid;
  grid-template-columns: 1fr;
}
.landing-shell .landing-section.auth-section.is-active {
  display: flex;
  justify-content: center;
}
.landing-shell .auth-section .auth-shell {
  position: static;
  width: 100%;
  max-width: 480px;
}

/* Organization picker on the generic sign-in form (disambiguates full name) */
.org-select-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =====================================================================
   36. ETHIOPIAN CALENDAR SPECIFIC
   ===================================================================== */
.eth-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.eth-calendar-day {
  background: var(--surface);
  padding: 10px 4px;
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.eth-calendar-day:hover {
  background: var(--surface-2);
}

.eth-calendar-day.is-today {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.eth-calendar-day.is-selected {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.eth-calendar-day.is-other-month {
  color: var(--muted-2);
  opacity: 0.5;
}

.eth-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.eth-calendar-header span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 0;
}

/* =====================================================================
   37. FINAL POLISH — EDGE CASES & OVERRIDES
   ===================================================================== */

/* Prevent double-tap zoom on buttons */
button,
.btn,
.nav-item,
.auth-tab,
.subtab {
  touch-action: manipulation;
}

/* Ensure images in cards don't overflow */
.card img,
.org-card img,
.publisher-org-card img {
  max-width: 100%;
}

/* Smooth theme transition */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.card,
.btn,
input,
select,
textarea,
.side-nav,
.topbar,
.landing-header {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Selection color */
::selection {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Ensure mono font is used for codes */
.org-code,
.member-id,
.session-code {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Make sure long text doesn't break layout */
.break-word {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .side-nav {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }

  .toast-container {
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }

  @media (max-width: 1024px) {
    .views {
      padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
  }
}

/* =====================================================================
   38. EXTRA UTILITY & HELPER CLASSES (for completeness)
   ===================================================================== */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }
.select-text { user-select: text; }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-none { border: none; }

.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-accent { background: var(--accent); }
.bg-accent-soft { background: var(--accent-soft); }

.text-balance { text-wrap: balance; }

/* =====================================================================
   39. COMPONENT STATE VARIANTS (exhaustive)
   ===================================================================== */

/* Button group */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.btn-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.btn-group .btn:last-child {
  border-right: none;
}

.btn-group .btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Input group */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  margin-top: 0;
}

.input-group .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex-shrink: 0;
}

/* Floating label (modern) */
.field-float {
  position: relative;
  margin-bottom: var(--space-4);
}

.field-float input {
  padding-top: 20px;
  padding-bottom: 8px;
}

.field-float label {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 1rem;
  color: var(--placeholder);
  pointer-events: none;
  transition: all 0.15s ease;
  margin: 0;
}

.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
}



/* =====================================================================
   41. PORTFOLIO POLISH — TRANSITIONS, TEXT & MICRO-INTERACTIONS
   ===================================================================== */

/* Smoother global motion defaults */
:root {
  --duration-reveal: 520ms;
  --ease-portfolio: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page entrance */
@keyframes portfolioFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes portfolioScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.view.is-active,
.auth-panel.is-active,
.landing-section.is-active {
  animation: portfolioFadeUp var(--duration-reveal) var(--ease-portfolio);
}

/* Refined brand name */
.brand-name {
  transition:
    background-position 0.6s var(--ease-out),
    filter 0.3s var(--ease-out),
    letter-spacing 0.3s var(--ease-out);
  background-size: 200% auto;
}

.brand-name:hover {
  filter: brightness(1.08);
  letter-spacing: 0.01em;
}

/* Topbar glass refinement */
.topbar,
.landing-header {
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    backdrop-filter 0.35s ease;
}

.topbar:hover,
.landing-header:hover {
  box-shadow: var(--shadow-sm);
}

/* Nav items — portfolio understated lift */
.nav-item {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out),
    padding var(--duration-fast) var(--ease-out);
}

.nav-item:hover {
  transform: translateX(3px);
}

.nav-item.is-active {
  transform: none;
}

/* Org cards — stronger portfolio hover */
.org-card {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-portfolio),
    transform var(--duration-slow) var(--ease-portfolio),
    background-color var(--duration-normal) var(--ease-out);
}

.org-card:hover {
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-lg),
    0 16px 40px rgba(8, 145, 178, 0.14);
}

.org-card::before {
  transition:
    opacity var(--duration-normal) var(--ease-out),
    height 0.35s var(--ease-out);
}

.org-card:hover::before {
  height: 4px;
}

/* Session cards */
.session-card {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-portfolio),
    transform var(--duration-slow) var(--ease-out);
}

.session-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* Auth card */
.auth-card {
  transition:
    box-shadow var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.auth-card:hover {
  box-shadow: var(--shadow-xl);
}

/* Modal card entrance */
.modal-card {
  transition:
    transform var(--duration-slow) var(--ease-portfolio),
    opacity var(--duration-normal) var(--ease-out);
}

/* Inputs — refined focus */
input,
select,
textarea {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

input:focus,
select:focus,
textarea:focus {
  transform: translateY(-1px);
}

/* Status pills */
.status-pill {
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.status-pill:hover {
  transform: scale(1.04);
}

/* Table rows */
.data-table tbody tr {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

/* Theme / lang / help toggles */
.theme-toggle,
.lang-toggle,
.help-toggle {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    color var(--duration-normal) var(--ease-out);
}

.theme-toggle:hover,
.lang-toggle:hover,
.help-toggle:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Subtabs */
.subtab,
.auth-tab {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.subtab:hover:not(.is-active),
.auth-tab:hover:not(.is-active) {
  transform: translateY(-1px);
}

/* Stat cards */
.stat-card {
  transition:
    transform var(--duration-slow) var(--ease-portfolio),
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.stat-card .stat-num {
  transition: color var(--duration-normal) var(--ease-out), transform 0.35s var(--ease-spring);
}

.stat-card:hover .stat-num {
  transform: scale(1.06);
  color: var(--accent);
}

/* FAB */
.fab {
  transition:
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.fab:hover {
  transform: scale(1.1) rotate(4deg);
}

.fab:active {
  transform: scale(0.94);
}

/* Landing menu items */
.landing-menu-item {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out);
}

.landing-menu-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.landing-menu-item.is-active {
  transform: none;
}

/* Text hierarchy refinements */
.small,
.muted,
.muted-2 {
  transition: color var(--duration-normal) var(--ease-out);
}

.member-name-cell .name {
  transition: color var(--duration-fast) var(--ease-out);
}

.member-name-cell:hover .name {
  color: var(--accent-strong);
}

/* Link-like interactive text */
a:not(.btn):not(.nav-item):not(.brand-logo-link) {
  transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

/* Soft scroll reveal helper class (optional use) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-portfolio),
    transform var(--duration-reveal) var(--ease-portfolio);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers for lists */
.stagger-1 { transition-delay: 40ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 120ms; }
.stagger-4 { transition-delay: 160ms; }
.stagger-5 { transition-delay: 200ms; }

/* Outline button polish */
.btn-outline {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}

.btn-outline:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.18);
  transform: translateY(-2px);
}

/* Toast polish */
.toast {
  transition:
    transform var(--duration-normal) var(--ease-portfolio),
    opacity var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.toast:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* Camera wrap subtle frame glow on match */
.camera-wrap {
  transition:
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

/* Progress bar smoother */
.progress-bar-fill {
  transition: width var(--duration-slower) var(--ease-portfolio);
}

/* Selection remains accent */
::selection {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Reduced motion: keep accessibility */
@media (prefers-reduced-motion: reduce) {
  .btn::before {
    display: none;
  }
  .view.is-active,
  .auth-panel.is-active,
  .landing-section.is-active {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* =====================================================================
   36. PERSONAL ACCOUNT PAGE (index.php) — centered sign-in/create card,
   no organization directory here any more (that moved to home.php).
   ===================================================================== */
.account-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-8);
}

.account-shell .auth-card {
  width: 100%;
}

/* =====================================================================
   37. HOME PAGE (home.php) — "Attendance system list" +
   "Create attendance system" tabs. Reuses .org-directory/.org-grid/
   .org-card from the old landing page, plus a few additions below:
   stacking multiple panels on the "create" tab, a visibly different
   background between the panel and each card inside it, the favorite
   star, and a 2-columns-minimum grid on mobile.
   ===================================================================== */
.home-shell .org-section {
  gap: var(--space-6);
}

/* High-contrast panel background vs. card background, in both themes —
   the panel (the big "Attendance system list" / "Your organizations"
   box) reads as a distinctly different surface than each organization
   card sitting inside it. */
.home-panel {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}

.home-panel .org-card {
  background: var(--surface);
}

.create-org-form {
  max-width: 480px;
}

/* ---- favorite star ---- */
.org-card {
  position: relative;
}

.org-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--muted);
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.org-fav-btn:hover {
  transform: scale(1.1);
  border-color: #F0B429;
}

.org-fav-btn.is-fav {
  color: #F0B429;
  border-color: #F0B429;
  background: color-mix(in srgb, #F0B429 22%, var(--surface));
  font-size: 1.2rem;
  transform: scale(1.15);
}

/* :has() for modern browsers */
.org-card:has(.org-fav-btn.is-fav) {
  border-color: #F0B429;
  border-width: 2px;
  box-shadow: 0 0 0 2px #F0B429, 0 4px 16px rgba(240, 180, 41, 0.25);
}

/* .is-favorited fallback for all browsers */
.org-card.is-favorited {
  border-color: #F0B429 !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 2px #F0B429, 0 4px 16px rgba(240, 180, 41, 0.25) !important;
}

/* =====================================================================
   38. RESPONSIVE — at least 2 organization cards side by side on phones,
   on both the Home page and anywhere else .org-grid is used.
   ===================================================================== */
@media (max-width: 640px) {
  .org-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .home-panel {
    padding: var(--space-3);
  }

  .org-card {
    padding: var(--space-2);
    gap: 6px;
  }

  .org-card img {
    width: 36px;
    height: 36px;
  }

  .org-card-name {
    font-size: 0.82rem;
  }

  .org-card-code {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  .org-card-tap-hint {
    font-size: 0.6rem;
  }

  .org-fav-btn {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
    top: 6px;
    right: 6px;
  }

  .account-shell {
    padding: var(--space-5) var(--space-4);
  }
}

@media (max-width: 400px) {
  .org-grid {
    gap: var(--space-1);
  }

  .org-card-heading {
    display: none;
  }
}

/* =====================================================================
   GLASSMORPHISM — applied to all pages
   Cards, headers, modals and surfaces get a frosted-glass feel:
   semi-transparent background + backdrop-filter blur + soft border.
   ===================================================================== */

/* Global glass body background — gradient mesh behind everything */
body {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(8,145,178,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(6,182,212,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(14,116,144,0.15) 0%, transparent 70%);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(34,211,238,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(6,182,212,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(15,118,110,0.15) 0%, transparent 70%);
}

/* Glass cards */
.card,
.auth-card,
.modal-card,
.home-panel,
.org-card,
.session-card,
.settings-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: saturate(1.6) blur(18px) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 32px rgba(8, 145, 178, 0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .home-panel,
[data-theme="dark"] .org-card,
[data-theme="dark"] .session-card,
[data-theme="dark"] .settings-card {
  background: rgba(11, 58, 59, 0.55) !important;
  backdrop-filter: saturate(1.4) blur(18px) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(18px) !important;
  border: 1px solid rgba(34, 211, 238, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}

/* Glass topbar & landing header */
.topbar,
.landing-header {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: saturate(1.8) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .landing-header {
  background: rgba(4, 47, 46, 0.65) !important;
  backdrop-filter: saturate(1.4) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(20px) !important;
  border-bottom: 1px solid rgba(34,211,238,0.15) !important;
}

/* Glass side nav */
.side-nav {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-right: 1px solid rgba(255,255,255,0.35) !important;
}

[data-theme="dark"] .side-nav {
  background: rgba(4, 47, 46, 0.5) !important;
  border-right: 1px solid rgba(34,211,238,0.1) !important;
}

/* Glass account shell card */
.account-shell .auth-card {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: saturate(1.8) blur(24px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(24px) !important;
}

/* =====================================================================
   BIG HEADING TICKER — larger, bolder on dashboard
   ===================================================================== */
.org-heading-ticker {
  max-width: 500px;
}

.org-heading-inner {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  font-family: var(--font-serif) !important;
  letter-spacing: -0.01em;
  color: var(--accent-strong) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

[data-theme="dark"] .org-heading-inner {
  color: var(--accent-strong) !important;
  text-shadow: none;
}

/* =====================================================================
   3D BAKELITE NAV BUTTONS — all nav/menu items across every page
   ===================================================================== */

/* Dashboard side-nav items */
.nav-item {
  background: linear-gradient(180deg, #e8f4f8 0%, #b8dde8 50%, #8fc8d8 100%) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-bottom: 2px solid rgba(0,0,0,0.18) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.15) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--accent-strong) !important;
  font-weight: 700 !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  margin: 2px 4px !important;
}

.nav-item:hover:not(.is-active) {
  background: linear-gradient(180deg, #f0f8fc 0%, #c8e8f4 50%, #9fd8e8 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 8px rgba(0,0,0,0.18) !important;
}

.nav-item.is-active {
  background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%) !important;
  color: #fff !important;
  border-color: #065e75 !important;
  border-bottom-color: rgba(0,0,0,0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.1) !important;
  transform: translateY(1px) !important;
}

[data-theme="dark"] .nav-item {
  background: linear-gradient(180deg, #134e4a 0%, #0f3d3e 50%, #0b3030 100%) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .nav-item.is-active {
  background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%) !important;
  color: #042f2e !important;
}

/* Landing menu items (home.php) */
.landing-menu-item,
.att-menu-btn,
.subtab {
  background: linear-gradient(180deg, #e8f4f8 0%, #b8dde8 60%, #8fc8d8 100%) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-bottom: 2px solid rgba(0,0,0,0.15) !important;
  border-right: 2px solid rgba(0,0,0,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 2px 4px rgba(0,0,0,0.12) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--accent-strong) !important;
  font-weight: 700 !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  padding: 10px 20px !important;
  cursor: pointer;
}

.landing-menu-item:hover,
.att-menu-btn:hover,
.subtab:hover {
  background: linear-gradient(180deg, #f4fbfd 0%, #cceaf4 60%, #a8d8e8 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 8px rgba(0,0,0,0.15) !important;
}

.landing-menu-item.is-active,
.att-menu-btn.is-active,
.subtab.is-active {
  background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%) !important;
  color: #fff !important;
  border-color: #065e75 !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.08) !important;
  transform: translateY(1px) !important;
}

[data-theme="dark"] .landing-menu-item,
[data-theme="dark"] .att-menu-btn,
[data-theme="dark"] .subtab {
  background: linear-gradient(180deg, #134e4a 0%, #0b3a3b 100%) !important;
  color: var(--muted) !important;
  border-color: rgba(34,211,238,0.2) !important;
}

[data-theme="dark"] .landing-menu-item.is-active,
[data-theme="dark"] .att-menu-btn.is-active,
[data-theme="dark"] .subtab.is-active {
  background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%) !important;
  color: #042f2e !important;
}

/* Nav bars scroll horizontally on all viewports */
.landing-menu,
.att-menu,
.subtabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: var(--space-2) !important;
  padding: var(--space-2) !important;
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--radius) !important;
  margin-bottom: var(--space-5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.landing-menu::-webkit-scrollbar,
.att-menu::-webkit-scrollbar,
.subtabs::-webkit-scrollbar { display: none !important; }

/* =====================================================================
   3D BAKELITE STYLE — all topbar/header action buttons
   Applies to: help-toggle, lang-toggle, theme-toggle, user-chip,
   btn-ghost in topbar, home link button
   ===================================================================== */
.help-toggle,
.lang-toggle,
.theme-toggle,
.topbar-user .btn,
.topbar-user a.btn,
.header-actions .btn,
.header-actions a.btn,
.header-actions button {
  background: linear-gradient(180deg, #e8f4f8 0%, #b8dde8 55%, #8fc8d8 100%) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-bottom: 2px solid rgba(0,0,0,0.18) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 2px 4px rgba(0,0,0,0.15) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--accent-strong) !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  font-size: var(--text-sm) !important;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.help-toggle:hover,
.lang-toggle:hover,
.theme-toggle:hover,
.topbar-user .btn:hover,
.topbar-user a.btn:hover,
.header-actions .btn:hover,
.header-actions a.btn:hover,
.header-actions button:hover {
  background: linear-gradient(180deg, #f4fbfd 0%, #cceaf4 55%, #a0d8e8 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 8px rgba(0,0,0,0.18) !important;
}

.help-toggle:active,
.lang-toggle:active,
.theme-toggle:active,
.topbar-user .btn:active,
.topbar-user a.btn:active,
.header-actions button:active {
  background: linear-gradient(180deg, #9fd8e8 0%, #7ec8d8 100%) !important;
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 1px 1px rgba(0,0,0,0.08) !important;
}

/* Sign out / danger button keeps red but with 3D style */
.topbar-user #logoutBtn,
.header-actions #logoutBtn {
  background: linear-gradient(180deg, #fde8e8 0%, #f8b8b8 55%, #e89090 100%) !important;
  color: var(--absent) !important;
  border-bottom-color: rgba(180,0,0,0.2) !important;
}

/* Dark theme bakelite */
[data-theme="dark"] .help-toggle,
[data-theme="dark"] .lang-toggle,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .topbar-user .btn,
[data-theme="dark"] .topbar-user a.btn,
[data-theme="dark"] .header-actions .btn,
[data-theme="dark"] .header-actions a.btn,
[data-theme="dark"] .header-actions button {
  background: linear-gradient(180deg, #1a5a58 0%, #0f3d3e 55%, #082e2e 100%) !important;
  color: var(--muted) !important;
  border-color: rgba(34,211,238,0.3) !important;
  border-bottom-color: rgba(0,0,0,0.4) !important;
}

/* user-chip keep neutral pill look */
.user-chip {
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 12px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .user-chip {
  background: rgba(34,211,238,0.12) !important;
  border-color: rgba(34,211,238,0.2) !important;
}

/* =====================================================================
   RESPONSIVE TOPBAR — no overflow on small screens
   ===================================================================== */
.topbar {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.topbar-user {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--space-1);
}

.topbar-user::-webkit-scrollbar { display: none; }

.header-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--space-1);
}

.header-actions::-webkit-scrollbar { display: none; }

@media (max-width: 540px) {
  .help-toggle,
  .lang-toggle,
  .theme-toggle {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
  }

  .user-chip {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
   HOME PAGE — Glass 3D org cards with depth effect
   ===================================================================== */
.org-card {
  transform-style: preserve-3d;
  perspective: 800px;
  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out) !important;
}

.org-card:hover {
  transform: translateY(-6px) rotateX(2deg) !important;
  box-shadow:
    0 20px 48px rgba(8, 145, 178, 0.22),
    0 8px 16px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

.home-panel.card {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: saturate(1.8) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow:
    0 12px 40px rgba(8,145,178,0.15),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

[data-theme="dark"] .home-panel.card {
  background: rgba(11, 58, 59, 0.5) !important;
  border: 1px solid rgba(34,211,238,0.15) !important;
}

/* org-grid perspective container */
.org-grid {
  perspective: 1200px;
}

/* Remove emoji from landing menu icons */
.landing-menu-ico {
  display: none !important;
}


/* ---- Recognition accuracy bar (scan setup) ---- */
.accuracy-row { display: flex; align-items: center; gap: 12px; }
.accuracy-row input[type="range"] { flex: 1; min-width: 0; }
.accuracy-num { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.accuracy-num input { width: 5rem; text-align: center; }