/*
 * Aurra SMS — Competitor-Inspired Full Redesign 2026
 * Loaded last to override app.css with !important cascade dominance.
 * Design DNA: Teachmint / Alma SIS / Linear — slate palette, teal accent.
 */

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGE — Surgical colour / cosmetic overrides only.
   Layout & spacing from app.css is kept intact.
   ═══════════════════════════════════════════════════════════════ */

/* Body: richer dark gradient */
.auth-body {
  background: linear-gradient(135deg, #0f172a 0%, #0d2235 50%, #0c2212 100%) !important;
}

/* ── LEFT PANEL ─────────────────────────────────────────────── */
.auth-panel,
.auth-panel-login {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 55%, #0a2a1e 100%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Teal radial glow behind content */
.auth-panel::after {
  content: '' !important;
  position: absolute !important;
  top: 30% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(ellipse, rgba(31,138,132,0.20) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Subtle diagonal grid lines */
.auth-panel::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Outer panel: align children to top, stretch to full height, remove app.css padding */
.auth-panel,
.auth-panel-login {
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.auth-panel-login {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* Inner content container fills the panel and starts from top */
.auth-panel-inner {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  padding: 2.25rem 2.5rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
}

/* Brand mark on left panel */
.auth-panel-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 0.25rem !important;
}

.auth-panel-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--aurra-primary), var(--aurra-primary-hover)) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(31,138,132,0.5) !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.03em !important;
}

.auth-panel-brand-copy strong {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.auth-panel-brand-copy small {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* Eyebrow on left panel */
.auth-panel .page-eyebrow {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5eead4 !important;
}

/* Hero title */
.auth-hero-title {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 !important;
}

/* Hero copy */
.auth-hero-copy {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.58) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Quote card */
.auth-quote-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-left: 3px solid #14b8a6 !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
}

.auth-quote-card p {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.68) !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* Benefit list — replace "+" with teal check */
.auth-benefit-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.auth-benefit-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  opacity: 0.4 !important;
  transition: opacity 0.3s !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.35 !important;
}

.auth-benefit-item.is-active {
  opacity: 1 !important;
}

.auth-benefit-check {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(20,184,166,0.18) !important;
  border: 1.5px solid #14b8a6 !important;
  color: #5eead4 !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1px !important;
}

/* ── RIGHT CARD ─────────────────────────────────────────────── */
.auth-card,
.auth-card-login {
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Inner padding container */
.auth-card-header,
.auth-card > *:not(.auth-return-overlay) {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.auth-card-header {
  padding-top: 2rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 1rem !important;
}

/* Brand mark on right card */
.auth-card-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 1.25rem !important;
}

.auth-card-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--aurra-primary), var(--aurra-primary-hover)) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(31,138,132,0.4) !important;
  flex-shrink: 0 !important;
}

.auth-card-brand-copy strong {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.auth-card-brand-copy small {
  font-size: 0.65rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* Card eyebrow */
.auth-card .page-eyebrow {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--aurra-primary) !important;
  margin-bottom: 0.3rem !important;
}

/* Login title */
.auth-login-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.2 !important;
}

.auth-login-subtitle {
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Field groups */
.auth-field-group {
  margin-bottom: 0.75rem !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

/* Input wrapper with icon */
.auth-input-wrap {
  position: relative !important;
}

.auth-input-icon {
  position: absolute !important;
  left: 0.85rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
}

.auth-input-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.auth-form-control {
  padding-left: 2.5rem !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  height: 44px !important;
  color: #0f172a !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}

.auth-form-control:focus {
  background: #fff !important;
  border-color: var(--aurra-primary) !important;
  box-shadow: 0 0 0 3px rgba(31,138,132,0.15) !important;
  outline: none !important;
}

.auth-form-control::placeholder {
  color: #b0bec5 !important;
  font-size: 0.835rem !important;
}

/* Password field toggle */
.auth-password-wrap { position: relative !important; }

.auth-password-toggle {
  position: absolute !important;
  right: 0.8rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 0.25rem !important;
  transition: color 0.15s !important;
}

.auth-password-toggle:hover { color: var(--aurra-primary) !important; }
.auth-password-toggle-icon { width: 16px !important; height: 16px !important; }

/* Caps lock warning */
.auth-caps-warning {
  position: absolute !important;
  right: 4.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #f59e0b !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  display: none !important;
}

/* Inline errors */
.auth-inline-error {
  font-size: 0.75rem !important;
  color: #dc2626 !important;
  margin-top: 0.3rem !important;
  font-weight: 500 !important;
}

.password-requirements-help {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 0.3rem !important;
  line-height: 1.4 !important;
}

/* Error alert box */
.auth-inline-alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem !important;
  margin: 0 2.75rem 1rem !important;
  font-size: 0.835rem !important;
  color: #9f1239 !important;
}

.auth-inline-alert-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── ROLE SELECTOR — pill segmented control ─────────────────── */
.auth-role-grid {
  padding: 0 2.5rem !important;
  margin-bottom: 0.85rem !important;
}

.auth-role-actions {
  display: flex !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
  margin-bottom: 0.6rem !important;
}

.auth-role-action {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 0.45rem 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  white-space: nowrap !important;
}

.auth-role-action:hover {
  color: #0f172a !important;
  background: rgba(255,255,255,0.6) !important;
}

.auth-role-action.is-active {
  background: #ffffff !important;
  color: var(--aurra-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.12), 0 0 0 1px rgba(31,138,132,0.15) !important;
}

.auth-role-helper {
  font-size: 0.72rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  padding: 0.5rem 0.75rem !important;
  background: rgba(31,138,132,0.05) !important;
  border-radius: 6px !important;
  border-left: 3px solid rgba(31,138,132,0.3) !important;
}

/* ── REMEMBER ME ROW ────────────────────────────────────────── */
.auth-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2.5rem !important;
  margin-bottom: 0.85rem !important;
}

.auth-row .form-check-label {
  font-size: 0.82rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

.auth-row .form-check-input:checked {
  background-color: var(--aurra-primary) !important;
  border-color: var(--aurra-primary) !important;
}

.auth-security-note {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-weight: 500 !important;
}

.auth-security-note::before {
  content: '🔒' !important;
  font-size: 0.65rem !important;
}

/* ── SUBMIT BUTTON ──────────────────────────────────────────── */
.auth-submit-btn,
.auth-submit-btn-aurra {
  margin: 0 2.5rem 1rem !important;
  width: calc(100% - 5rem) !important;
  background: linear-gradient(135deg, var(--aurra-primary) 0%, var(--aurra-primary-hover) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  height: 46px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(31,138,132,0.4), 0 1px 3px rgba(31,138,132,0.3) !important;
  transition: all 0.18s !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.auth-submit-btn::after {
  content: '→' !important;
  font-size: 1rem !important;
  transition: transform 0.2s !important;
}

.auth-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(31,138,132,0.45), 0 2px 6px rgba(31,138,132,0.3) !important;
  background: linear-gradient(135deg, #177870 0%, #0f7a6e 100%) !important;
}

.auth-submit-btn:hover::after { transform: translateX(3px) !important; }
.auth-submit-btn:active { transform: translateY(0) !important; }

/* Spinner inside button */
.auth-submit-spinner {
  display: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: authSpin 0.7s linear infinite !important;
}

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

/* ── FOOTER LINKS ───────────────────────────────────────────── */
.auth-links-row {
  display: flex !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  padding: 0.75rem 2.5rem 1.5rem !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 0.25rem !important;
  flex-wrap: wrap !important;
}

.auth-links-row a {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--aurra-primary) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.auth-links-row a:hover {
  color: var(--aurra-primary-hover) !important;
  text-decoration: underline !important;
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .auth-layout-login {
    grid-template-columns: 1fr !important;
  }
  .auth-panel-login {
    position: static !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 280px !important;
    overflow-y: hidden !important;
  }
  .auth-panel-inner {
    padding: 1.75rem 1.5rem !important;
    gap: 0.65rem !important;
  }
  .auth-hero-copy,
  .auth-quote-card,
  .auth-benefit-list { display: none !important; }
  .auth-hero-title { font-size: 1rem !important; }
  .auth-card-header,
  .auth-card > * { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .auth-field-group { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .auth-role-grid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .auth-row { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .auth-submit-btn { margin-left: 1.5rem !important; margin-right: 1.5rem !important; width: calc(100% - 3rem) !important; }
  .auth-inline-alert { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .auth-links-row { padding: 0.75rem 1.5rem 1.25rem !important; }
}

@media (max-width: 480px) {
  .auth-card-header,
  .auth-card > * { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .auth-field-group,
  .auth-role-grid,
  .auth-row { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .auth-submit-btn { margin-left: 1.25rem !important; margin-right: 1.25rem !important; width: calc(100% - 2.5rem) !important; }
  .auth-links-row { gap: 1rem !important; }
}
/* ══ END AUTH ══════════════════════════════════════════════════ */

/* A · ROOT TOKENS */
:root {
  --aurra-primary:      #1f8a84;
  --aurra-primary-hover:#177870;
  --aurra-bg:           #f1f5f9;
  --aurra-panel:        #ffffff;
  --aurra-line:         #e2e8f0;
  --aurra-line-soft:    #f1f5f9;
  --aurra-muted:        #64748b;
  --aurra-ink:          #0f172a;
  --aurra-ink-soft:     #475569;
  --aurra-side-deep:    #0f172a;
  --aurra-side:         #1e293b;
  --aurra-side-hover:   rgba(255,255,255,0.07);
  --aurra-side-active:  rgba(31,138,132,0.18);
  --aurra-side-text:    #94a3b8;
  --aurra-side-active-text: #5eead4;
  --aurra-teal:         #1f8a84;
  --aurra-teal-light:   #177870;
  --aurra-teal-glow:    rgba(31,138,132,0.18);
  --aurra-shadow-xs:    0 1px 2px rgba(15,23,42,0.05);
  --aurra-shadow-soft:  0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --aurra-shadow:       0 4px 6px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
  --aurra-shadow-lg:    0 10px 25px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.05);
  --aurra-shadow-xl:    0 20px 40px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
  --aurra-focus-ring:   0 0 0 3px rgba(31,138,132,0.22);
  --aurra-radius:       10px;
  --aurra-radius-sm:    6px;
  --aurra-radius-lg:    14px;
  --aurra-radius-xl:    18px;
  --aurra-font-xs:   0.72rem;
  --aurra-font-sm:   0.85rem;
  --aurra-font-base: 0.9375rem;
  --aurra-font-lg:   1.0625rem;
  --aurra-font-xl:   1.25rem;
  --aurra-font-2xl:  1.5rem;
  --aurra-font-3xl:  1.875rem;
}

/* B · APP SHELL */
body {
  background: var(--aurra-bg) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: var(--aurra-ink) !important;
  font-size: var(--aurra-font-base) !important;
  -webkit-font-smoothing: antialiased;
}
.content-shell,.main-content-area { background: var(--aurra-bg) !important; }
.main-content { padding: 1.5rem 1.75rem !important; min-height: calc(100vh - 60px); }

/* C · SIDEBAR */
.sidebar,.aurra-sidebar {
  background: var(--aurra-side-deep) !important;
  border-right: none !important;
  box-shadow: 2px 0 20px rgba(0,0,0,0.25) !important;
}
.sidebar .sidebar-brand,.sidebar-brand {
  background: var(--aurra-side-deep) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 1.25rem !important;
  height: 60px;
  display: flex !important;
  align-items: center !important;
}
.sidebar-brand-text,.sidebar .brand-name {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: #fff !important;
  letter-spacing: -0.02em;
}
.sidebar .nav-label,.sidebar .sidebar-section-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #475569 !important;
  padding: 1.1rem 1.25rem 0.35rem !important;
}
.sidebar .nav-link,.sidebar .sidebar-link {
  color: var(--aurra-side-text) !important;
  border-radius: 8px !important;
  margin: 1px 0.6rem !important;
  padding: 0.52rem 0.9rem !important;
  font-size: var(--aurra-font-sm) !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s !important;
  border-left: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.sidebar .nav-link:hover,.sidebar .sidebar-link:hover {
  background: var(--aurra-side-hover) !important;
  color: #cbd5e1 !important;
}
.sidebar .nav-link.active,.sidebar .sidebar-link.active {
  background: var(--aurra-side-active) !important;
  color: var(--aurra-side-active-text) !important;
  font-weight: 600 !important;
  border-left: 3px solid #14b8a6 !important;
  padding-left: calc(0.9rem - 3px) !important;
}
.sidebar .nav-link svg,.sidebar .nav-link i { opacity: 0.7; flex-shrink: 0; }
.sidebar .nav-link.active svg,.sidebar .nav-link.active i { opacity: 1; color: var(--aurra-side-active-text) !important; }
.sidebar .nav-link .collapse-arrow { margin-left: auto; opacity: 0.5; transition: transform 0.2s; font-size: 0.75rem; }
.sidebar .nav-link[aria-expanded="true"] .collapse-arrow { transform: rotate(180deg); opacity: 0.8; }
.sidebar .collapse .nav-link { font-size: 0.8125rem !important; padding-left: 2.5rem !important; color: #64748b !important; }
.sidebar .collapse .nav-link.active,.sidebar .collapse .nav-link:hover { color: #5eead4 !important; background: rgba(31,138,132,0.10) !important; }

/* D · TOPBAR */
.topbar,.aurra-topbar,.navbar.topbar {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--aurra-line) !important;
  box-shadow: var(--aurra-shadow-xs) !important;
  height: 60px !important;
  padding: 0 1.5rem !important;
  /* Override app.css L9676 grid → clean flexbox so ms-auto works
     and columns don't overflow on tablet-size screens */
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
/* Search wrap grows to fill remaining horizontal space */
.topbar-search-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 640px !important;
}
.topbar-search-wrap .topbar-search {
  width: 100% !important;
}
.topbar-school-name { font-size: 0.875rem !important; font-weight: 700 !important; color: var(--aurra-ink) !important; }
.topbar-icon-btn {
  background: none !important; border: 1px solid var(--aurra-line) !important;
  border-radius: 50% !important; width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--aurra-muted) !important; transition: border-color 0.15s,color 0.15s !important;
}
.topbar-icon-btn:hover { border-color: var(--aurra-teal) !important; color: var(--aurra-teal) !important; }
.topbar-avatar,.aurra-avatar {
  background: linear-gradient(135deg, var(--aurra-teal), var(--aurra-primary-hover)) !important;
  color: #fff !important; border-radius: 50% !important;
  width: 34px !important; height: 34px !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important; box-shadow: 0 2px 8px rgba(31,138,132,0.35) !important;
}

/* User button — clean, no Bootstrap border */
.topbar-user-btn {
  display: flex !important; align-items: center !important; gap: 0.55rem !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0.25rem 0.4rem !important; border-radius: 10px !important;
  cursor: pointer !important; transition: background 0.15s !important;
}
.topbar-user-btn:hover, .topbar-user-btn:focus-visible {
  background: rgba(15,148,132,0.07) !important; outline: none !important;
}
.topbar-user-btn::after { display: none !important; }
.topbar-user-copy {
  display: grid !important; line-height: 1.2 !important; text-align: left !important;
}
.topbar-user-copy strong {
  font-size: 0.8125rem !important; font-weight: 700 !important; color: var(--aurra-ink) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  max-width: 140px !important;
}
.topbar-user-copy small {
  font-size: 0.7rem !important; color: var(--aurra-muted) !important;
  font-weight: 600 !important; letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
}

/* E · CARDS */
.card,.panel-card,.form-card,.table-card,.aurra-card {
  background: var(--aurra-panel) !important;
  border: 1px solid var(--aurra-line) !important;
  border-radius: var(--aurra-radius) !important;
  box-shadow: var(--aurra-shadow-soft) !important;
  transition: box-shadow 0.2s !important;
}
.card:hover,.panel-card:hover { box-shadow: var(--aurra-shadow) !important; }
.card-header {
  background: var(--aurra-panel) !important; border-bottom: 1px solid var(--aurra-line) !important;
  padding: 1rem 1.25rem 0.875rem !important; font-weight: 600 !important;
  font-size: var(--aurra-font-base) !important; color: var(--aurra-ink) !important;
}
.card-body { padding: 1.25rem !important; }
.card-footer { background: var(--aurra-bg) !important; border-top: 1px solid var(--aurra-line) !important; padding: 0.875rem 1.25rem !important; }

/* F · TABLES */
.table,.aurra-table {
  font-size: var(--aurra-font-sm) !important;
  color: var(--aurra-ink) !important;
  --bs-table-bg: transparent !important;
  margin-bottom: 0 !important;
}
.table thead th,.aurra-table thead th {
  background: #f8fafc !important; color: #475569 !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important;
  border-bottom: 2px solid var(--aurra-line) !important; border-top: none !important;
  padding: 0.75rem 1rem !important; white-space: nowrap !important;
}
.table tbody tr { transition: background 0.12s !important; }
.table tbody tr:hover { background: rgba(31,138,132,0.04) !important; }
.table td {
  vertical-align: middle !important; padding: 0.75rem 1rem !important;
  border-color: #f1f5f9 !important; color: var(--aurra-ink-soft) !important;
}
.table td strong,.table td .fw-bold { color: var(--aurra-ink) !important; }
.table-responsive { border-radius: var(--aurra-radius) !important; border: 1px solid var(--aurra-line) !important; overflow: hidden !important; }

/* G · PAGE HEADERS */
.page-header,.aurra-page-header {
  display: flex !important; align-items: flex-start !important;
  justify-content: space-between !important; gap: 1rem !important;
  padding: 0.25rem 0 1.25rem !important; flex-wrap: wrap !important;
}
.page-eyebrow { font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--aurra-teal) !important; margin-bottom: 0.3rem !important; }
.page-title { font-size: 1.45rem !important; font-weight: 800 !important; color: var(--aurra-ink) !important; letter-spacing: -0.025em !important; line-height: 1.25 !important; margin-bottom: 0.2rem !important; }
.page-subtitle { font-size: var(--aurra-font-sm) !important; color: var(--aurra-muted) !important; }
.aurra-page-header-actions { display: flex !important; gap: 0.5rem !important; align-items: center !important; flex-shrink: 0 !important; }

/* H · BADGES */
.badge,.aurra-badge {
  font-size: 0.68rem !important; font-weight: 600 !important;
  padding: 0.28em 0.7em !important; border-radius: 999px !important;
  letter-spacing: 0.02em !important; display: inline-flex !important; align-items: center !important;
}
.badge.bg-success,.aurra-badge-success { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.badge.bg-danger,.aurra-badge-danger   { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.badge.bg-warning,.aurra-badge-warning { background: #fef9c3 !important; color: #a16207 !important; border: 1px solid #fef08a !important; }
.badge.bg-info,.aurra-badge-info       { background: #dbeafe !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.badge.bg-primary,.aurra-badge-primary { background: rgba(31,138,132,0.12) !important; color: var(--aurra-teal) !important; border: 1px solid rgba(31,138,132,0.25) !important; }
.badge.bg-secondary,.aurra-badge-neutral { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }

/* I · COMMAND STRIPS */
.aurra-command-strip,.aurra-student-command,.aurra-finance-command,.aurra-command-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0d2040 100%) !important;
  border-radius: var(--aurra-radius-lg) !important; padding: 1.75rem 2rem !important;
  color: #fff !important; position: relative !important; overflow: hidden !important;
  margin-bottom: 1.5rem !important; box-shadow: var(--aurra-shadow-lg) !important;
}
.aurra-command-strip::before,.aurra-student-command::before,.aurra-finance-command::before {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 80% 50%, rgba(31,138,132,0.22) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.aurra-command-strip h1,.aurra-command-strip .command-title { color: #fff !important; font-size: 1.5rem !important; font-weight: 800 !important; }
.aurra-command-strip .command-subtitle { color: #94a3b8 !important; font-size: var(--aurra-font-sm) !important; }
.aurra-command-strip .stat-pill {
  background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important; padding: 0.65rem 1rem !important;
}
.aurra-command-strip .stat-pill .stat-value { font-size: 1.5rem !important; font-weight: 800 !important; color: #fff !important; }
.aurra-command-strip .stat-pill .stat-label { font-size: 0.68rem !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }

/* J · FORMS */
.form-control,.form-select {
  border: 1.5px solid #cbd5e1 !important; border-radius: var(--aurra-radius-sm) !important;
  font-size: var(--aurra-font-sm) !important; color: var(--aurra-ink) !important;
  background: #fff !important; transition: border-color 0.15s,box-shadow 0.15s !important;
  padding: 0.5rem 0.85rem !important;
}
.form-control:focus,.form-select:focus {
  border-color: var(--aurra-teal) !important; box-shadow: var(--aurra-focus-ring) !important;
  background: #fff !important; outline: none !important;
}
.form-control::placeholder { color: #94a3b8 !important; }
.form-label { font-size: 0.7rem !important; font-weight: 700 !important; color: #475569 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 0.35rem !important; }

/* K · BUTTONS */
.btn { display: inline-flex !important; align-items: center !important; gap: 0.42rem !important; font-size: var(--aurra-font-sm) !important; font-weight: 600 !important; border-radius: var(--aurra-radius-sm) !important; padding: 0.5rem 1.1rem !important; transition: all 0.15s !important; }
.btn-primary { background: var(--aurra-teal) !important; border-color: var(--aurra-teal) !important; color: #fff !important; box-shadow: 0 1px 3px rgba(31,138,132,0.35) !important; }
.btn-primary:hover,.btn-primary:focus { background: #177870 !important; border-color: #177870 !important; box-shadow: 0 4px 12px rgba(31,138,132,0.4) !important; transform: translateY(-1px) !important; }
.btn-primary:active { transform: translateY(0) !important; }
.btn-outline-primary { color: var(--aurra-teal) !important; border-color: var(--aurra-teal) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--aurra-teal) !important; color: #fff !important; transform: translateY(-1px) !important; }
.btn-outline-secondary { color: #475569 !important; border-color: #cbd5e1 !important; background: #fff !important; }
.btn-outline-secondary:hover { background: #f8fafc !important; border-color: #94a3b8 !important; color: var(--aurra-ink) !important; }
.btn-sm { padding: 0.35rem 0.8rem !important; font-size: 0.78rem !important; gap: 0.35rem !important; }
.btn-lg { padding: 0.7rem 1.5rem !important; font-size: 0.9375rem !important; gap: 0.5rem !important; }
/* ── Feather SVG icon sizing inside every button ── */
.btn svg.feather, .btn svg[class*="feather"] { width: 15px !important; height: 15px !important; min-width: 15px !important; flex-shrink: 0 !important; stroke-width: 2.1 !important; vertical-align: middle; }
.btn-sm svg.feather, .btn-sm svg[class*="feather"] { width: 13px !important; height: 13px !important; min-width: 13px !important; }
.btn-lg svg.feather, .btn-lg svg[class*="feather"] { width: 17px !important; height: 17px !important; min-width: 17px !important; }

/* L · METRIC CARDS */
.metric-card,.stat-card,.aurra-metric {
  background: var(--aurra-panel) !important; border: 1px solid var(--aurra-line) !important;
  border-radius: var(--aurra-radius) !important; box-shadow: var(--aurra-shadow-soft) !important;
  padding: 0.75rem 0.9rem !important; position: relative !important; overflow: hidden !important;
  transition: box-shadow 0.2s,transform 0.2s !important;
}
.metric-card:hover,.stat-card:hover { box-shadow: var(--aurra-shadow) !important; transform: translateY(-2px) !important; }
.metric-card.accent-teal   { border-left: 4px solid var(--aurra-primary) !important; }
.metric-card.accent-blue   { border-left: 4px solid #3b82f6 !important; }
.metric-card.accent-purple { border-left: 4px solid #8b5cf6 !important; }
.metric-card.accent-amber  { border-left: 4px solid #f59e0b !important; }
.metric-card.accent-rose   { border-left: 4px solid #f43f5e !important; }
.metric-card.accent-green  { border-left: 4px solid #22c55e !important; }
.metric-card .metric-value,.stat-card .stat-number { font-size: 1.875rem !important; font-weight: 800 !important; color: var(--aurra-ink) !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; }
.metric-card .metric-label,.stat-card .stat-label { font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--aurra-muted) !important; }
.metric-card .metric-icon,.stat-card .stat-icon { width: 42px !important; height: 42px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.metric-card.metric-card-ring .metric-icon { width: 3.5rem !important; height: 3.5rem !important; border-radius: 50% !important; background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), #eef2f7 calc(var(--pct) * 1%)) !important; }
.metric-card.metric-card-ring .metric-icon svg { position: relative !important; z-index: 1 !important; width: 1.1rem !important; height: 1.1rem !important; stroke: var(--ring-color) !important; stroke-width: 2.2 !important; }

/* Chart legend pill */
.dash-legend { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--aurra-muted); font-weight: 600; }
.dash-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* M · ALERTS */
.alert { border-radius: var(--aurra-radius-sm) !important; border: 1px solid !important; font-size: var(--aurra-font-sm) !important; padding: 0.75rem 1rem !important; }
.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
.alert-danger  { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #9f1239 !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info    { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }

/* N · QUICK ACTIONS */
.dashboard-action-btn,.quick-action-card {
  background: var(--aurra-panel) !important; border: 1.5px solid var(--aurra-line) !important;
  border-radius: var(--aurra-radius) !important; padding: 1.25rem !important;
  text-align: center !important; transition: all 0.18s !important;
  cursor: pointer !important; text-decoration: none !important; display: block !important;
  color: var(--aurra-ink-soft) !important;
}
.dashboard-action-btn:hover,.quick-action-card:hover {
  border-color: var(--aurra-teal) !important;
  box-shadow: var(--aurra-shadow),0 0 0 3px var(--aurra-teal-glow) !important;
  transform: translateY(-2px) !important; color: var(--aurra-teal) !important;
}

/* O · PROGRESS */
.progress { height: 6px !important; border-radius: 999px !important; background: #e2e8f0 !important; overflow: hidden !important; }
.progress-bar { border-radius: 999px !important; }
.progress-bar.bg-success { background: #22c55e !important; }
.progress-bar.bg-danger  { background: #f43f5e !important; }
.progress-bar.bg-warning { background: #f59e0b !important; }
.progress-bar.bg-info    { background: #3b82f6 !important; }
.progress-bar.bg-primary { background: var(--aurra-teal) !important; }

/* P · SCROLLBAR */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Q · GLASS */
.aurra-glass-card {
  background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: calc(var(--aurra-radius) * 1.5) !important; backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; padding: 1rem !important;
}

/* R · EMPTY STATES */
.empty-state,.aurra-empty { text-align: center !important; padding: 3rem 1.5rem !important; color: var(--aurra-muted) !important; }
.empty-state .empty-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: var(--aurra-bg) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 1.25rem !important; font-size: 1.5rem !important; }
.empty-state h6 { font-weight: 700 !important; color: var(--aurra-ink) !important; font-size: var(--aurra-font-base) !important; margin-bottom: 0.35rem !important; }

/* S · INPUT GROUPS */
.input-group-text { background: #f8fafc !important; border: 1.5px solid #cbd5e1 !important; color: var(--aurra-muted) !important; font-size: var(--aurra-font-sm) !important; }

/* T · DROPDOWNS */
.dropdown-menu { border: 1px solid var(--aurra-line) !important; border-radius: var(--aurra-radius) !important; box-shadow: var(--aurra-shadow-lg) !important; padding: 0.4rem !important; font-size: var(--aurra-font-sm) !important; }
.dropdown-item { border-radius: 6px !important; padding: 0.45rem 0.8rem !important; color: var(--aurra-ink-soft) !important; transition: background 0.12s,color 0.12s !important; }
.dropdown-item:hover,.dropdown-item:focus { background: rgba(31,138,132,0.08) !important; color: var(--aurra-teal) !important; }
.dropdown-divider { border-color: var(--aurra-line) !important; margin: 0.3rem 0 !important; }

/* U · MODALS */
.modal-content { border: 1px solid var(--aurra-line) !important; border-radius: var(--aurra-radius-lg) !important; box-shadow: var(--aurra-shadow-xl) !important; }
.modal-header { border-bottom: 1px solid var(--aurra-line) !important; padding: 1.25rem 1.5rem !important; background: var(--aurra-panel) !important; border-radius: var(--aurra-radius-lg) var(--aurra-radius-lg) 0 0 !important; }
.modal-title { font-weight: 700 !important; font-size: var(--aurra-font-lg) !important; color: var(--aurra-ink) !important; }
.modal-body { padding: 1.5rem !important; }
.modal-footer { border-top: 1px solid var(--aurra-line) !important; padding: 1rem 1.5rem !important; background: var(--aurra-bg) !important; border-radius: 0 0 var(--aurra-radius-lg) var(--aurra-radius-lg) !important; }
.modal-backdrop { backdrop-filter: blur(4px) !important; --bs-backdrop-opacity: 0.35 !important; }

/* V · NAV TABS */
.nav-tabs { border-bottom: 2px solid var(--aurra-line) !important; gap: 0.15rem !important; }
.nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; margin-bottom: -2px !important; padding: 0.6rem 1.1rem !important; font-size: var(--aurra-font-sm) !important; font-weight: 500 !important; color: var(--aurra-muted) !important; transition: color 0.15s,border-color 0.15s !important; }
.nav-tabs .nav-link:hover { color: var(--aurra-ink) !important; border-bottom-color: #cbd5e1 !important; background: none !important; }
.nav-tabs .nav-link.active { color: var(--aurra-teal) !important; border-bottom-color: var(--aurra-teal) !important; font-weight: 600 !important; background: none !important; }
.nav-pills .nav-link { border-radius: 8px !important; font-size: var(--aurra-font-sm) !important; font-weight: 500 !important; padding: 0.45rem 1rem !important; color: var(--aurra-muted) !important; transition: all 0.15s !important; }
.nav-pills .nav-link.active { background: var(--aurra-teal) !important; color: #fff !important; }

/* W · PAGINATION */
.pagination { gap: 0.2rem !important; }
.page-item .page-link { border: 1px solid var(--aurra-line) !important; border-radius: 7px !important; color: var(--aurra-ink-soft) !important; font-size: var(--aurra-font-sm) !important; padding: 0.4rem 0.75rem !important; transition: all 0.15s !important; }
.page-item .page-link:hover { background: var(--aurra-bg) !important; border-color: var(--aurra-teal) !important; color: var(--aurra-teal) !important; }
.page-item.active .page-link { background: var(--aurra-teal) !important; border-color: var(--aurra-teal) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(31,138,132,0.35) !important; }

/* X · SELECTION */
::selection { background: rgba(31,138,132,0.18); color: var(--aurra-ink); }
*:focus-visible { outline: 2px solid var(--aurra-teal) !important; outline-offset: 2px !important; }

/* Y · ERP TILES */
.erp-tile-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 0.875rem !important; }
.erp-tile { background: var(--aurra-panel) !important; border: 1px solid var(--aurra-line) !important; border-radius: var(--aurra-radius) !important; padding: 1.1rem !important; display: flex !important; align-items: center !important; gap: 0.85rem !important; transition: all 0.18s !important; text-decoration: none !important; color: var(--aurra-ink) !important; box-shadow: var(--aurra-shadow-xs) !important; }
.erp-tile:hover { border-color: var(--aurra-teal) !important; box-shadow: var(--aurra-shadow),0 0 0 3px var(--aurra-teal-glow) !important; transform: translateY(-2px) !important; }
.erp-tile-icon { width: 40px !important; height: 40px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: rgba(31,138,132,0.1) !important; color: var(--aurra-teal) !important; }
.erp-tile-name { font-size: var(--aurra-font-sm) !important; font-weight: 600 !important; color: var(--aurra-ink) !important; }
.erp-tile-meta { font-size: 0.72rem !important; color: var(--aurra-muted) !important; }

/* Z · STATUS STRIPS */
.status-strip { display: flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.6rem 1rem !important; border-radius: var(--aurra-radius-sm) !important; font-size: var(--aurra-font-sm) !important; font-weight: 500 !important; }
.status-strip.status-ok     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.status-strip.status-warn   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.status-strip.status-danger { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.status-strip.status-info   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
hr { border-color: var(--aurra-line) !important; opacity: 1 !important; }
.section-heading { font-size: 0.78rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: var(--aurra-muted) !important; margin-bottom: 0.75rem !important; }
/* Reset uppercase cascade for h2/h3/p INSIDE section-heading wrapper containers */
.section-heading h2, .section-heading h3 { text-transform: none !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--aurra-ink) !important; letter-spacing: normal !important; margin-bottom: 0.15rem !important; }
.section-heading p.page-subtitle { text-transform: none !important; font-size: 0.8rem !important; font-weight: 400 !important; color: var(--aurra-muted) !important; letter-spacing: normal !important; }

/* DARK MODE */
body.aurra-dark {
  --aurra-bg:        #0d1117 !important;
  --aurra-panel:     #161b22 !important;
  --aurra-line:      #21262d !important;
  --aurra-line-soft: #1c2130 !important;
  --aurra-ink:       #e6edf3 !important;
  --aurra-ink-soft:  #8b949e !important;
  --aurra-muted:     #6e7681 !important;
}
body.aurra-dark .card,body.aurra-dark .panel-card,body.aurra-dark .table-card { background: #161b22 !important; border-color: #21262d !important; }
body.aurra-dark .card-header,body.aurra-dark .card-footer { background: #1c2130 !important; border-color: #21262d !important; }
body.aurra-dark .table thead th { background: #1c2130 !important; color: #8b949e !important; }
body.aurra-dark .table td,body.aurra-dark .table tbody tr { border-color: #21262d !important; color: #8b949e !important; }
body.aurra-dark .table tbody tr:hover { background: rgba(31,138,132,0.07) !important; }
body.aurra-dark .form-control,body.aurra-dark .form-select { background: #1c2130 !important; border-color: #30363d !important; color: #e6edf3 !important; }
body.aurra-dark .form-control:focus,body.aurra-dark .form-select:focus { background: #1c2130 !important; }
body.aurra-dark .modal-content { background: #161b22 !important; border-color: #30363d !important; }
body.aurra-dark .modal-header,body.aurra-dark .modal-footer { background: #1c2130 !important; border-color: #21262d !important; }
body.aurra-dark .dropdown-menu { background: #1c2130 !important; border-color: #30363d !important; }
body.aurra-dark .dropdown-item { color: #8b949e !important; }
body.aurra-dark .dropdown-item:hover { background: rgba(31,138,132,0.12) !important; color: #5eead4 !important; }
body.aurra-dark .topbar,body.aurra-dark .aurra-topbar { background: rgba(22,27,34,0.97) !important; border-bottom-color: #21262d !important; }
body.aurra-dark .progress { background: #21262d !important; }
body.aurra-dark .erp-tile { background: #161b22 !important; border-color: #21262d !important; color: #e6edf3 !important; }
body.aurra-dark .metric-card,body.aurra-dark .stat-card { background: #161b22 !important; border-color: #21262d !important; }
body.aurra-dark .input-group-text { background: #1c2130 !important; border-color: #30363d !important; color: #8b949e !important; }
body.aurra-dark .table-responsive { border-color: #21262d !important; }
body.aurra-dark .nav-tabs { border-bottom-color: #21262d !important; }
body.aurra-dark .nav-tabs .nav-link { color: #8b949e !important; }
body.aurra-dark .nav-tabs .nav-link.active { color: #5eead4 !important; border-bottom-color: #5eead4 !important; }
body.aurra-dark .badge.bg-secondary { background: #21262d !important; color: #8b949e !important; border-color: #30363d !important; }
body.aurra-dark hr { border-color: #21262d !important; }

/* RESPONSIVE */
@media (max-width: 767.98px) {
  .main-content { padding: 1rem !important; }
  .aurra-command-strip,.aurra-student-command,.aurra-finance-command { padding: 1.25rem !important; border-radius: var(--aurra-radius) !important; }
  .page-header,.aurra-page-header { flex-direction: column !important; }
  .aurra-page-header-actions { width: 100% !important; justify-content: flex-start !important; }
  .erp-tile-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-card .metric-value,.stat-card .stat-number { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
  .erp-tile-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH POLISH — Final overrides (highest specificity, last in file)
   Fixes: classroom photo, orbit rings, glass boxes, card accent bar
   ═══════════════════════════════════════════════════════════════ */

/* 1. Kill classroom background photo completely */
.auth-panel-photo {
  display: none !important;
  opacity: 0 !important;
}

/* 2. Kill the blue/green radial backdrop — our ::after glow handles it */
.auth-panel-backdrop {
  background: none !important;
  display: none !important;
}

/* 3. Kill orbit rings — they look cluttered */
.auth-panel-orbit,
.auth-panel-orbit-one,
.auth-panel-orbit-two {
  display: none !important;
}

/* 4. Remove the old blue gradient accent bar from top of right card */
.auth-card::before {
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
}

/* 5. Right card: proper lift shadow & left separator on desktop */
.auth-card,
.auth-card-login {
  box-shadow: -20px 0 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* 6. Benefit items — simple clean list rows, no glass boxes */
.auth-benefit-item {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: auto !important;
  padding: 0 !important;
  gap: 0.65rem !important;
  opacity: 0.42 !important;
  transform: none !important;
  transition: opacity 0.25s !important;
}

.auth-benefit-item.is-active {
  background: none !important;
  border: none !important;
  border-color: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}

.auth-benefit-item strong {
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.9) !important;
  line-height: 1.4 !important;
}

/* Teal checkmark dot */
.auth-benefit-check {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 50% !important;
  background: rgba(20,184,166,0.2) !important;
  border: 1.5px solid rgba(20,184,166,0.5) !important;
  color: #5eead4 !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.auth-benefit-item.is-active .auth-benefit-check {
  background: rgba(20,184,166,0.35) !important;
  border-color: #14b8a6 !important;
  box-shadow: 0 0 8px rgba(20,184,166,0.4) !important;
}

/* 7. Benefit list — tighter vertical spacing */
.auth-benefit-list {
  gap: 0.85rem !important;
}

/* 8. Role helper — compact, no heavy box */
.auth-role-helper {
  font-size: 0.72rem !important;
  color: rgba(31,138,132,0.85) !important;
  line-height: 1.4 !important;
  padding: 0.45rem 0.7rem !important;
  background: rgba(31,138,132,0.07) !important;
  border-radius: 6px !important;
  border-left: 2px solid rgba(31,138,132,0.35) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 9. Form label refinement */
.auth-field-group .form-label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 0.3rem !important;
}

/* 10. Input hover state */
.auth-form-control:hover {
  border-color: #94a3b8 !important;
}

/* 11. Help text under inputs — shorter */
.password-requirements-help {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
}

/* 12. Checkbox refinement */
.form-check-input:checked {
  background-color: var(--aurra-primary) !important;
  border-color: var(--aurra-primary) !important;
}

/* 13. Submit button gradient (beats btn-primary specificity) */
.auth-submit-btn.auth-submit-btn-aurra,
button.auth-submit-btn {
  background: linear-gradient(135deg, var(--aurra-primary) 0%, var(--aurra-primary-hover) 100%) !important;
  box-shadow: 0 2px 10px rgba(31,138,132,0.45), 0 1px 3px rgba(31,138,132,0.3) !important;
  border-radius: 8px !important;
}

.auth-submit-btn.auth-submit-btn-aurra:hover,
button.auth-submit-btn:hover {
  background: linear-gradient(135deg, #177870 0%, #0f7a6e 100%) !important;
  box-shadow: 0 6px 20px rgba(31,138,132,0.5), 0 2px 6px rgba(31,138,132,0.3) !important;
}

/* 14. Trust badge row on right card */
.auth-trust-row {
  padding: 0 2.75rem !important;
  margin-bottom: 0.5rem !important;
}

.auth-trust-pill {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  color: #64748b !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.65rem !important;
}

/* 15. Auth links row */
.auth-links-row {
  gap: 1.25rem !important;
}

/* 16. Left panel — stale padding removed; canonical rule is at top of auth section */

/* 17. Security note icon — emoji replacement with svg-like char */
.auth-security-note {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}

/* 18. Panel content — hero heading tighter */
.auth-hero-title {
  font-size: 1.55rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
}

/* 19. Scrollbar hidden on auth body */
.auth-body { overflow-x: hidden !important; }

/* 20. Auth card — perfect vertical centering */
.auth-card { overflow-y: auto !important; }

/* Mobile refinements */
@media (max-width: 991.98px) {
  .auth-trust-row { padding: 0 1.5rem !important; }
}
@media (max-width: 480px) {
  .auth-trust-row { padding: 0 1.25rem !important; }
  .auth-panel-inner { padding: 1.5rem 1.25rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN GRADIENT DASHBOARD  —  2026 refresh
   ═══════════════════════════════════════════════════════════════ */

/* 1 · Page background — soft mesh gradient */
.content-shell:has(.aurra-dashboard-shell) {
  background: linear-gradient(160deg,
    #eef9ff 0%,
    #f5f0ff 28%,
    #edfff6 58%,
    #fff8ee 100%) !important;
  padding: 0 !important;
}
.modern-dashboard.aurra-dashboard-shell {
  padding: 0.9rem 1.25rem !important;
  gap: 0.65rem !important;
}

/* 2 · Header h1 — gradient text */
.modern-dashboard-header h1 {
  background: linear-gradient(120deg, #0f172a 0%, #0d9488 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 3 · Tenant chip — richer gradient pill */
.modern-dashboard-tenant-chip {
  background: linear-gradient(135deg, #1e293b 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(13,148,136,0.3) !important;
}

/* 4 · Actions strip — frosted glass */
.actions-strip {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%,
    rgba(240,249,255,0.90) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}

/* 5 · Metric cards — tinted gradient per colour */
.metric-card.metric-card-teal {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
  border-color: #5eead4 !important;
}
.metric-card.metric-card-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #93c5fd !important;
}
.metric-card.metric-card-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #86efac !important;
}
.metric-card.metric-card-red {
  background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
  border-color: #fca5a5 !important;
}

/* 6 · Ring icon center — match card tint */
.metric-card.metric-card-ring .metric-icon::after {
  background: transparent !important;
}

/* 7 · Finance & operations panel sections */
.section-finance,
.section-operations {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.70) 0%,
    rgba(248,250,252,0.85) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════
   2026 FULL UI/UX REPAIR — All 10 Phases
   Loaded last — overrides every preceding rule in this file.
   ═══════════════════════════════════════════════════════════════ */

/* ── PHASE 1: DESIGN-SYSTEM TOKENS ──────────────────────────── */
:root {
  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  /* Transition tokens */
  --tx-fast: 150ms ease;
  --tx-base: 200ms ease;
  /* Z-index scale */
  --z-sticky: 1010;  --z-modal: 1050;  --z-toast: 1090;
  /* Unified table tokens */
  --tbl-head-bg:    #f1f5f9;
  --tbl-head-color: #334155;
  --tbl-head-size:  0.72rem;
  --tbl-hover:      rgba(13,148,136,0.05);
  --tbl-border:     #e2e8f0;
  --tbl-stripe:     rgba(248,250,252,0.75);
  /* Unified badge tokens */
  --bdg-px: 0.55rem;  --bdg-py: 0.28rem;
  --bdg-r:  6px;      --bdg-sz: 0.72rem;
  /* Content page background */
  --page-bg: linear-gradient(160deg, #f8faff 0%, #f3f0ff 30%, #edfff8 60%, #fffbf0 100%);
}

/* ── PHASE 2: COMMAND STRIP — FROSTED GLASS ─────────────────── */
/* Override the dark navy in section "I" with light frosted glass */
.aurra-command-strip,
.aurra-student-command,
.aurra-finance-command,
.aurra-command-header {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.92) 0%,
    rgba(240,249,255,0.88) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.04) !important;
  color: #0f172a !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  position: relative !important;
  overflow: hidden !important;
  /* Fix white-space gap: both sides start at top, no stretch */
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}
/* Kill the radial glow on dark (looks wrong on light bg) */
.aurra-command-strip::before,
.aurra-student-command::before,
.aurra-finance-command::before {
  background: none !important;
  display: none !important;
}
/* Module accent border — teal left bar */
.aurra-step64-student-command { border-left: 4px solid #0d9488 !important; }
.aurra-step65-finance-command  { border-left: 4px solid #3b82f6 !important; }
/* Attendance — handled generically below */

/* Text inside the strip — was white, now dark */
.aurra-command-strip h2,
.aurra-command-strip .aurra-command-strip-main h2 {
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}
.aurra-command-strip .page-eyebrow {
  color: var(--aurra-primary) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
/* Metrics inside strip */
.aurra-command-strip-metrics span,
.aurra-command-strip-metrics small,
.aurra-step64-student-command .aurra-command-strip-metrics span,
.aurra-step64-student-command .aurra-command-strip-metrics small,
.aurra-step65-finance-command .aurra-command-strip-metrics span,
.aurra-step65-finance-command .aurra-command-strip-metrics small {
  color: #64748b !important;
}
.aurra-command-strip-metrics strong,
.aurra-step64-student-command .aurra-command-strip-metrics strong,
.aurra-step65-finance-command .aurra-command-strip-metrics strong {
  color: #0f172a !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
}
/* Rail divider */
.aurra-command-strip-rail {
  border-left: 1px solid rgba(0,0,0,0.09) !important;
}
.aurra-command-strip-rail .btn-light {
  background: rgba(255,255,255,0.85) !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
/* Rail note text */
.aurra-student-rail-note strong,
.aurra-finance-rail-note strong,
.aurra-command-strip-rail > div strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}
.aurra-student-rail-note span,
.aurra-finance-rail-note span,
.aurra-command-strip-rail > div span {
  color: #64748b !important;
  font-size: 0.76rem !important;
}
/* Labels inside rail */
.aurra-student-rail-label,
.aurra-finance-rail-label {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #94a3b8 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}
/* Old stat-pills inside command strip (dark variant) */
.aurra-command-strip .stat-pill {
  background: rgba(13,148,136,0.07) !important;
  border: 1px solid rgba(13,148,136,0.15) !important;
  border-radius: 10px !important;
}
.aurra-command-strip .stat-pill .stat-value {
  color: #0f172a !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
.aurra-command-strip .stat-pill .stat-label {
  color: #64748b !important;
  font-size: 0.68rem !important;
}
/* command-title was white */
.aurra-command-strip h1,
.aurra-command-strip .command-title {
  color: #0f172a !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}
.aurra-command-strip .command-subtitle {
  color: #64748b !important;
}

/* ── PHASE 3: PAGE HEADERS — GRADIENT TEXT ───────────────────── */
.page-header,
.aurra-page-header {
  padding: 0.85rem 0 0.7rem !important;
  margin-bottom: 0.8rem !important;
  border-bottom: 1px solid var(--tbl-border) !important;
}
.page-title,
.aurra-page-header .page-title {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  background: linear-gradient(120deg, #0f172a 0%, #0d9488 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-bottom: 0.15rem !important;
}
.page-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--aurra-primary) !important;
  margin-bottom: 0.25rem !important;
}
.page-subtitle {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin-top: 0.1rem !important;
}

/* ── PHASE 4: STATS STRIPS — CARD TILES ─────────────────────── */
.aurra-step64-intake-strip,
.aurra-step65-recovery-strip,
[class*="-recovery-strip"],
[class*="-intake-strip"] {
  display: flex !important;
  gap: 0.65rem !important;
  margin-bottom: 1rem !important;
  flex-wrap: wrap !important;
}
.aurra-step64-intake-strip > a,
.aurra-step65-recovery-strip > a,
[class*="-recovery-strip"] > a,
[class*="-intake-strip"] > a {
  flex: 1 1 0 !important;
  min-width: 110px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  transition: transform var(--tx-fast), box-shadow var(--tx-fast), border-color var(--tx-fast) !important;
  display: block !important;
}
.aurra-step64-intake-strip > a:hover,
.aurra-step65-recovery-strip > a:hover,
[class*="-recovery-strip"] > a:hover,
[class*="-intake-strip"] > a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.10) !important;
  border-color: #0d9488 !important;
  text-decoration: none !important;
}
/* Text inside stat strip tiles — exclude .en/.ur language spans to preserve toggle */
.aurra-step64-intake-strip span:not(.en):not(.ur),
.aurra-step65-recovery-strip span:not(.en):not(.ur),
[class*="-recovery-strip"] span:not(.en):not(.ur),
[class*="-intake-strip"] span:not(.en):not(.ur) {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #94a3b8 !important;
  display: block !important;
  margin-bottom: 0.2rem !important;
}
.aurra-step64-intake-strip strong,
.aurra-step65-recovery-strip strong,
[class*="-recovery-strip"] strong,
[class*="-intake-strip"] strong {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.2 !important;
}
.aurra-step64-intake-strip small,
.aurra-step65-recovery-strip small,
[class*="-recovery-strip"] small,
[class*="-intake-strip"] small {
  font-size: 0.7rem !important;
  color: #64748b !important;
  display: block !important;
  margin-top: 0.15rem !important;
}

/* ── PHASE 5: UNIFIED TABLE SYSTEM ──────────────────────────── */
/* Single thead style for ALL tables across all modules */
.table thead th,
.premium-student-table thead th,
.aurra-activity-table th,
.fee-ledger-table thead th,
.aurra-erp-table thead th {
  background: var(--tbl-head-bg) !important;
  color: var(--tbl-head-color) !important;
  font-size: var(--tbl-head-size) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.65rem 0.9rem !important;
  border-bottom: 2px solid var(--tbl-border) !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-sticky) !important;
}
/* Table body rows */
.table tbody td,
.premium-student-table tbody td,
.fee-ledger-table tbody td {
  padding: 0.6rem 0.9rem !important;
  font-size: 0.825rem !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--tbl-border) !important;
  vertical-align: middle !important;
}
.table td strong, .table td .fw-bold,
.premium-student-table td strong { color: #0f172a !important; }
/* Row hover */
.table tbody tr:hover td,
.premium-student-table tbody tr:hover td {
  background: var(--tbl-hover) !important;
}
/* Even-row stripe */
.table tbody tr:nth-child(even) td,
.premium-student-table tbody tr:nth-child(even) td {
  background: var(--tbl-stripe) !important;
}
.table tbody tr:nth-child(even):hover td,
.premium-student-table tbody tr:nth-child(even):hover td {
  background: var(--tbl-hover) !important;
}
/* Scrollable wrapper with sticky headers working */
.table-responsive {
  max-height: 72vh !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border-radius: 10px !important;
  border: 1px solid var(--tbl-border) !important;
}

/* ── PHASE 6: UNIFIED BADGE SYSTEM ──────────────────────────── */
/* Unify sizing across all badge variants */
.aurra-badge,
.status-pill,
.fee-status-badge,
.aurra-table-chip,
.academic-level-badge,
.attendance-percent-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  padding: var(--bdg-py) var(--bdg-px) !important;
  border-radius: var(--bdg-r) !important;
  font-size: var(--bdg-sz) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border: none !important;
}
/* STATUS COLOURS — single source of truth */
.status-active,  .aurra-badge-success,
.fee-status-paid, .badge.bg-success {
  background: #dcfce7 !important; color: #15803d !important; border: none !important;
}
.status-warning, .aurra-badge-warning,
.fee-status-partial, .badge.bg-warning {
  background: #fef3c7 !important; color: #92400e !important; border: none !important;
}
.status-danger,  .aurra-badge-danger,
.fee-status-unpaid, .fee-status-overdue, .badge.bg-danger {
  background: #fee2e2 !important; color: #b91c1c !important; border: none !important;
}
.status-info, .aurra-badge-info, .badge.bg-info {
  background: #dbeafe !important; color: #1d4ed8 !important; border: none !important;
}
.status-neutral, .aurra-badge-neutral, .badge.bg-secondary {
  background: #f1f5f9 !important; color: #475569 !important; border: none !important;
}
/* Keep badges visually consistent with .badge override */
.badge {
  padding: var(--bdg-py) var(--bdg-px) !important;
  border-radius: var(--bdg-r) !important;
  font-size: var(--bdg-sz) !important;
  font-weight: 600 !important;
}

/* ── PHASE 7: TYPOGRAPHY & CONTRAST FIXES ───────────────────── */
/* Floor on tiny text — nothing below 11px (0.72rem at 16px base) */
.form-label, label.form-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.35rem !important;
}
/* Contrast: text-muted / text-secondary must pass 4.5:1 on white */
.text-muted, .text-secondary {
  color: #64748b !important;  /* 4.54:1 — passes WCAG AA */
}
/* Common muted descriptors */
.aurra-legend-label,
.metric-label,
.aurra-command-metric .metric-label,
.stat-label,
.dash-card-sub {
  color: #64748b !important;
  font-size: 0.72rem !important;
}
/* Fix the 0.62rem override for auth left-panel eyebrow only — keep it there
   but ensure right-card eyebrow is readable */
.auth-card .page-eyebrow {
  font-size: 0.68rem !important;
}

/* ── PHASE 8: EMPTY STATES ───────────────────────────────────── */
/* Enhanced empty state with emoji icon fallback */
.empty-state,
.aurra-empty {
  text-align: center !important;
  padding: 2.5rem 1.5rem !important;
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
}
/* Icon container */
.empty-state .empty-icon,
.aurra-empty .empty-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1rem !important;
  font-size: 1.4rem !important;
}
.empty-state h6,
.aurra-empty h6 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 0.35rem !important;
}
.empty-state p,
.aurra-empty p {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin-bottom: 0 !important;
}

/* ── PHASE 9: FORM INPUT CONSISTENCY ────────────────────────── */
.form-control,
.form-select {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.875rem !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: border-color var(--tx-fast), box-shadow var(--tx-fast) !important;
  min-height: 38px !important;
}
.form-control:focus,
.form-select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
  outline: none !important;
  background: #ffffff !important;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  border-color: #e2e8f0 !important;
}
.form-control::placeholder { color: #94a3b8 !important; }

/* ── PHASE 10: SIDEBAR & NAV POLISH ─────────────────────────── */
/* Use CSS vars throughout — remove hardcoded colors */
.sidebar .nav-link.active,
.aurra-sidebar .nav-link.active {
  border-left: 3px solid var(--aurra-primary) !important;
  background: rgba(13,148,136,0.14) !important;
  color: #5eead4 !important;
  transition: all var(--tx-base) !important;
}
.sidebar .nav-link,
.aurra-sidebar .nav-link {
  transition: background var(--tx-fast), color var(--tx-fast) !important;
}
.sidebar .collapse .nav-link.active,
.sidebar .collapse .nav-link:hover {
  color: #5eead4 !important;
  background: rgba(13,148,136,0.10) !important;
}
/* Sidebar section labels — minimum readable size */
.sidebar .nav-label,
.sidebar .sidebar-section-label {
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
}
/* Sidebar toggle arrow smooth rotation */
.sidebar .nav-link .collapse-arrow {
  transition: transform var(--tx-base) !important;
}
.sidebar .nav-link[aria-expanded="true"] .collapse-arrow {
  transform: rotate(180deg) !important;
}

/* ── CONTENT PAGE BACKGROUND (non-dashboard pages) ──────────── */
/* Give content pages the same soft gradient as dashboard */
.content-shell:not(:has(.aurra-dashboard-shell)),
.main-content-area:not(:has(.aurra-dashboard-shell)) {
  background: var(--page-bg) !important;
}
.main-content {
  background: transparent !important;
}

/* ── MOBILE RESPONSIVE PATCHES ──────────────────────────────── */
@media (max-width: 767.98px) {
  .aurra-command-strip,
  .aurra-student-command,
  .aurra-finance-command {
    flex-direction: column !important;
    padding: 1rem 1.125rem !important;
    border-radius: 10px !important;
  }
  .aurra-command-strip-rail {
    border-left: none !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-left: 0 !important;
    padding-top: 0.75rem !important;
    width: 100% !important;
    flex: none !important;
  }
  .aurra-step64-intake-strip > a,
  .aurra-step65-recovery-strip > a,
  [class*="-recovery-strip"] > a,
  [class*="-intake-strip"] > a {
    min-width: calc(50% - 0.33rem) !important;
    flex: 0 0 calc(50% - 0.33rem) !important;
  }
  .table-responsive { max-height: 60vh !important; }
  .page-title,
  .aurra-page-header .page-title { font-size: 1.2rem !important; }
}

@media (max-width: 480px) {
  .aurra-step64-intake-strip > a,
  .aurra-step65-recovery-strip > a {
    min-width: 100% !important;
    flex: 1 0 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEEP REPAIR PASS 2 — Command Strip Internals + All Modules
   Fixes: metric column stacking, module accents, rail labels,
   h1/h2 equivalence, LMS bare aside children, universal tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. COMMAND STRIP METRICS — FIX INLINE STACKING ─────────── */
/* The inner divs must stack span/strong/small vertically */
.aurra-command-strip-metrics {
  display: flex !important;
  gap: 0 !important;
  margin-top: 0.9rem !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.aurra-command-strip-metrics > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 0 1.25rem 0 0 !important;
  margin-right: 1.25rem !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  margin-bottom: 0.5rem !important;
}
.aurra-command-strip-metrics > div:last-child {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}
/* Make each text node a block so they stack properly */
.aurra-command-strip-metrics > div > span {
  display: block !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  margin-bottom: 1px !important;
}
.aurra-command-strip-metrics > div > strong {
  display: block !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}
.aurra-command-strip-metrics > div > small {
  display: block !important;
  font-size: 0.68rem !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* ── 2. h1 INSIDE COMMAND STRIP (e.g. LMS) — same as h2 ─────── */
.aurra-command-strip h1 {
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  -webkit-text-fill-color: #0f172a !important; /* override gradient from page-title */
  background: none !important;
}

/* ── 3. MODULE ACCENT BORDERS — all remaining modules ────────── */
/* Attendance family → green-teal */
.aurra-step66-attendance-command,
.aurra-step66-face-command,
.aurra-step66-biometric-command { border-left: 4px solid #10b981 !important; }

/* HR, Payroll, Accounts → violet */
.aurra-step67-hr-command,
.aurra-step67-accounts-command {
    border-left: 4px solid #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,243,255,0.88)) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255,255,255,0.8) !important;
    border-right: 1px solid rgba(255,255,255,0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.6) !important;
    color: #0f172a !important;
}
/* Fix text inside accounts command strip (was white-on-dark, now dark-on-light) */
.aurra-step67-accounts-command h2,
.aurra-step67-hr-command h2 { color: #0f172a !important; }
.aurra-step67-accounts-command .page-eyebrow,
.aurra-step67-hr-command .page-eyebrow { color: #8b5cf6 !important; }
.aurra-step67-accounts-command .page-subtitle,
.aurra-step67-hr-command p { color: #64748b !important; }
/* Inner metric tiles on light background */
.aurra-step67-accounts-command .row > [class*="col-"] > div {
    background: rgba(255,255,255,0.75) !important;
    border: 1px solid rgba(139,92,246,0.12) !important;
}
/* Text that was forced white */
.aurra-step67-accounts-command .h3,
.aurra-step67-accounts-command strong { color: #0f172a !important; }
.aurra-step67-accounts-command .small { color: #64748b !important; }
/* Mini panel aside */
.aurra-step67-accounts-command .accounts-mini-panel {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(139,92,246,0.18) !important;
}
/* Progress bar track */
.aurra-step67-accounts-command .progress {
    background: rgba(0,0,0,0.07) !important;
}

/* Exams, Results → amber */
.aurra-step68-exam-command,
.aurra-step68-result-command { border-left: 4px solid #f59e0b !important; }

/* Communications → cyan */
.aurra-step69-communications-command { border-left: 4px solid #06b6d4 !important; }

/* LMS → indigo */
.aurra-step70-lms-command { border-left: 4px solid #6366f1 !important; }

/* Teacher roster → teal (same as students) */
.aurra-teacher-roster-command { border-left: 4px solid #0d9488 !important; }

/* Inquiry, local review, generic → slate-teal */
.aurra-local-review-command { border-left: 4px solid #64748b !important; }

/* Defaulters → red-orange */
.aurra-step65-defaulter-command { border-left: 4px solid #f43f5e !important; }

/* ── 4. RAIL LABELS — universal catch with attribute selector ── */
/* Covers aurra-student-rail-label, aurra-attendance-rail-label,
   aurra-finance-rail-label, aurra-communications-rail-label,
   parent-rail-label, aurra-local-review-rail-label, etc. */
[class*="-rail-label"] {
  display: block !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #94a3b8 !important;
  margin-bottom: 0.55rem !important;
}

/* ── 5. RAIL NOTES — universal catch ─────────────────────────── */
/* Covers aurra-student-rail-note, aurra-finance-rail-note,
   aurra-attendance-rail-note, aurra-communications-rail-note, etc. */
[class*="-rail-note"] {
  margin-top: 0.65rem !important;
  padding-top: 0.65rem !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
}
[class*="-rail-note"] > strong {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 0.2rem !important;
}
[class*="-rail-note"] > span {
  display: block !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  line-height: 1.45 !important;
}

/* ── 6. LMS ASIDE BARE CHILDREN (no wrapper class) ───────────── */
/* <aside class="aurra-command-strip-rail"> has direct:
   <span>Admin workspace</span>
   <strong>All classes</strong>
   <small>Description...</small>  */
.aurra-command-strip-rail > span:not([class]) {
  display: block !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #94a3b8 !important;
  margin-bottom: 0.3rem !important;
}
.aurra-command-strip-rail > strong:not([class]) {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 0.15rem !important;
}
.aurra-command-strip-rail > small:not([class]) {
  display: block !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin-bottom: 0.6rem !important;
}

/* ── 7. COMMAND STRIP RAIL — spacing between buttons ─────────── */
.aurra-command-strip-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  flex: 0 0 200px !important;
  min-width: 0 !important;
  align-self: stretch !important;   /* match main height — no uneven sides */
  justify-content: flex-start !important;  /* buttons stay at top */
}
.aurra-command-strip-rail .btn {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 0.38rem 0.65rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}
/* Feather SVG size — override hardcoded width/height="24" attribute */
.aurra-command-strip-rail .btn svg,
.aurra-command-strip-rail .btn svg.feather {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* ── 7b. RAIL NOTE — force light theme (old app.css leaves white text) ── */
.aurra-command-strip-rail [class*="-rail-note"],
.aurra-command-strip-rail [class*="-rail-note"] * {
  color: #475569 !important;
}
.aurra-command-strip-rail [class*="-rail-note"] > strong {
  color: #0f172a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  display: block !important;
}
.aurra-command-strip-rail [class*="-rail-note"] > span {
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
  display: block !important;
}
/* Rail note — hidden inside command strip rail to keep height compact */
.aurra-command-strip-rail [class*="-rail-note"] {
  display: none !important;
}
/* Rail note standalone (outside strip) — keep visible */
[class*="-rail-note"] {
  background: rgba(0,0,0,0.03) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.65rem !important;
}
[class*="-rail-note"] > strong {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block !important;
  margin-bottom: 0.1rem !important;
}
[class*="-rail-note"] > span {
  display: block !important;
  font-size: 0.68rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

/* ── 8. COMMAND STRIP MAIN — consistent line heights ─────────── */
.aurra-command-strip-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: stretch !important;   /* fills height = no uneven corners */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;   /* content vertically centred */
}
.aurra-command-strip-main h2,
.aurra-command-strip-main h1 {
  margin-top: 0.2rem !important;
  margin-bottom: 0 !important;
}

/* ── 9. INLINE STRONG COLOUR OVERRIDES INSIDE STRIP METRICS ─── */
/* Allow inline red/amber urgency signals to show through */
.aurra-command-strip-metrics > div > strong[style*="color"] {
  /* Keep inline colour — don't override urgency indicators */
  font-size: 1.3rem !important;
  font-weight: 800 !important;
}

/* ── RAIL BUTTON ICONS — consolidated above in section 7 ────── */

/* ── 10. PAGE BACKGROUND — kill dark body gradient, light everywhere ── */
/* app.css body has: linear-gradient(#f1f5f9 0%, #1a2332 42%, #f1f5f9 100%)
   which creates a dark band at 42% showing below short pages. Override: */
body.app-body,
body {
  background: #f1f5f9 !important;
  background-image: none !important;
  min-height: 100vh !important;
}
.app-layout,
.app-main,
.main-content-area {
  background: var(--page-bg) !important;
  min-height: 100vh !important;
}
.main-content {
  background: transparent !important;
  min-height: calc(100vh - 60px) !important;
}

/* ── 10b. TABLE PADDING — tighter cells, less wasted space ──── */
.table thead th,
.aurra-table thead th,
.premium-student-table thead th,
.fee-ledger-table thead th,
.aurra-activity-table th {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
}
.table tbody td,
.aurra-table tbody td,
.premium-student-table tbody td,
.fee-ledger-table tbody td {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.8rem !important;
  vertical-align: middle !important;
}
/* Form inputs — consistent tighter padding */
.form-control,
.form-select {
  padding: 0.4rem 0.7rem !important;
  font-size: 0.83rem !important;
}
.form-label,
label.form-label {
  font-size: 0.67rem !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: 0.07em !important;
}

/* ── PAGE HEADER ACTIONS — vertical stack on right, no wrap ─── */
.aurra-page-header {
  flex-wrap: nowrap !important;   /* prevent title + actions from wrapping */
  align-items: flex-start !important;
}
.aurra-page-header > div:first-child {
  flex: 1 1 0 !important;         /* title takes all available space */
  min-width: 0 !important;
}
.aurra-page-header-actions {
  display: flex !important;
  flex-direction: column !important;  /* buttons stack vertically */
  gap: 0.35rem !important;
  align-items: stretch !important;    /* equal button widths */
  flex: 0 0 auto !important;
  min-width: 160px !important;
}
.aurra-page-header-actions .btn {
  font-size: 0.76rem !important;
  padding: 0.38rem 0.75rem !important;
  white-space: nowrap !important;
  text-align: center !important;
  justify-content: center !important;
}

/* ── 10c. CONTENT CARD PADDING + LAYOUT FIXES ───────────────── */
/* 1. content-card has 0px padding by default — add standard inner breathing room */
.content-card,
.panel-card,
.table-card,
.form-card {
  padding: 1.25rem !important;
}
/* 2. Don't force equal height on cards paired with tables — table would
      stretch to match a tall form, leaving huge empty space below rows */
.row > [class*="col"] > .content-card.h-100,
.row > [class*="col"] > section.content-card {
  height: auto !important;
}
/* 3. table-responsive — remove fixed max-height so it fits its content */
.table-responsive {
  max-height: none !important;
  overflow-y: visible !important;
  border-radius: 8px !important;
  border: 1px solid var(--tbl-border, #e2e8f0) !important;
}
/* 4. Form item gap — tighter spacing between form groups */
.d-grid.gap-3,
.d-grid[class*="gap-"] {
  row-gap: 0.75rem !important;
}
/* 5. page-eyebrow inside card — small top nudge */
.content-card > .page-eyebrow:first-child,
.content-card > div:first-child > .page-eyebrow:first-child {
  margin-bottom: 0.15rem !important;
}

/* ── 10d. COMMAND STRIP — hide entire section from all pages ─── */
/* User removed: the strip (metrics + rail) is redundant next to page cards */
.aurra-command-strip {
  display: none !important;
}

/* ── 11. RESPONSIVE — command strip wraps on mobile ─────────── */
@media (max-width: 767.98px) {
  .aurra-command-strip-metrics > div {
    padding-right: 0.85rem !important;
    margin-right: 0.85rem !important;
  }
  .aurra-command-strip-rail {
    flex: none !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .aurra-command-strip-rail .btn {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  [class*="-rail-note"] {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — specific components where global rules
   must not bleed in and override intentional colour schemes
   ══════════════════════════════════════════════════════════════ */

/* ── AUTO FACE READINESS ALERT — amber warning card ───────────── */
/* app.css has amber background + dark brown text. Our global
   .page-eyebrow { color: teal } bleeds in — fix it here. */
.auto-face-readiness-alert {
  background: #fff7ed !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 10px !important;
  color: #78350f !important;
  padding: 0.9rem 1.1rem !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.08) !important;
}
.auto-face-readiness-alert .page-eyebrow {
  color: #d97706 !important;   /* amber — not teal */
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.25rem !important;
}
.auto-face-readiness-alert strong {
  display: block !important;
  color: #78350f !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.2rem !important;
}
.auto-face-readiness-alert > div > span {
  display: block !important;
  color: #92400e !important;
  font-size: 0.76rem !important;
  line-height: 1.5 !important;
}
.auto-face-readiness-alert code {
  display: inline-block !important;
  background: #111827 !important;
  color: #d1fae5 !important;
  font-size: 0.72rem !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  letter-spacing: 0.02em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   ATTENDANCE PAGE — FULL REDESIGN 2026
   Live clock · Stats strip cards · Modern tabs · Row status
   coloring · Dark register header · Health strip glass card
   ══════════════════════════════════════════════════════════════ */

/* ── Page header layout with live clock ─────────────────── */
.att-page-header {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.9rem !important;
}
.att-page-header > div:first-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* ── Live clock widget ───────────────────────────────────── */
.att-live-clock {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%) !important;
  border-radius: 12px !important;
  padding: 0.6rem 1.05rem !important;
  min-width: 132px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(13,148,136,0.18) !important;
}
.att-live-clock::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(13,148,136,0.22) 0%, transparent 65%) !important;
  pointer-events: none !important;
}
.att-clock-pulse {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  animation: attPulse 2s ease-in-out infinite !important;
}
@keyframes attPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%       { opacity: 0.7; transform: scale(1.3); box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.att-clock-time {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  position: relative !important;
  z-index: 1 !important;
}
.att-clock-date {
  font-size: 0.59rem !important;
  color: rgba(255,255,255,0.58) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  margin-top: 0.16rem !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 640px) {
  .att-live-clock { display: none !important; }
}

/* ── Stats strip — modern KPI cards ─────────────────────── */
.aurra-step66-attendance-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.65rem !important;
  margin-bottom: 1rem !important;
}
.aurra-step66-attendance-strip a {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem 0.8rem !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.05rem !important;
  transition: transform 0.17s ease, box-shadow 0.17s ease, border-color 0.17s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
}
/* coloured top accent per card */
.aurra-step66-attendance-strip a::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  border-radius: 12px 12px 0 0 !important;
}
.aurra-step66-attendance-strip a:nth-child(1)::before { background: linear-gradient(90deg,#0d9488,#14b8a6) !important; }
.aurra-step66-attendance-strip a:nth-child(2)::before { background: linear-gradient(90deg,#10b981,#34d399) !important; }
.aurra-step66-attendance-strip a:nth-child(3)::before { background: linear-gradient(90deg,#3b82f6,#60a5fa) !important; }
.aurra-step66-attendance-strip a:nth-child(4)::before { background: linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.aurra-step66-attendance-strip a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.1) !important;
  border-color: #0d9488 !important;
}
.aurra-step66-attendance-strip span:not(.en):not(.ur) {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #94a3b8 !important;
  display: block !important;
}
.aurra-step66-attendance-strip strong {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
  display: block !important;
  font-variant-numeric: tabular-nums !important;
}
.aurra-step66-attendance-strip small {
  font-size: 0.67rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: block !important;
}
@media (max-width: 768px) {
  .aurra-step66-attendance-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Tabs — modern underline pills ──────────────────────── */
.aurra-step66-attendance-shell .nav-tabs {
  border-bottom: 2px solid #e2e8f0 !important;
  gap: 0.1rem !important;
  background: #f8fafc !important;
  padding: 0.45rem 0.65rem 0 !important;
  border-radius: 12px 12px 0 0 !important;
}
.aurra-step66-attendance-shell .nav-tabs .nav-link {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.9rem !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}
.aurra-step66-attendance-shell .nav-tabs .nav-link:hover:not(.active) {
  color: #0d9488 !important;
  background: rgba(13,148,136,0.06) !important;
}
.aurra-step66-attendance-shell .nav-tabs .nav-link.active {
  background: #fff !important;
  color: #0d9488 !important;
  border-bottom: 2px solid #0d9488 !important;
  box-shadow: 0 -1px 6px rgba(13,148,136,0.07) !important;
}
.aurra-step66-attendance-shell .nav-tabs .nav-link svg,
.aurra-step66-attendance-shell .nav-tabs .nav-link svg.feather {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

/* ── Register header — dark gradient hero bar ────────────── */
.aurra-step66-register-header {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%) !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.95rem !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(15,23,42,0.12) !important;
}
.aurra-step66-register-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(13,148,136,0.18) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.aurra-step66-register-header > * { position: relative !important; z-index: 1 !important; }
.aurra-step66-register-header .page-eyebrow { color: #5eead4 !important; }
.aurra-step66-register-header h2 { color: #fff !important; }
/* Buttons inside dark header */
.aurra-step66-register-header .btn-light,
.aurra-step66-register-header .btn-light.border {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #e2e8f0 !important;
}
.aurra-step66-register-header .btn-light:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.aurra-step66-register-header .btn-outline-primary {
  border-color: rgba(94,234,212,0.45) !important;
  color: #5eead4 !important;
}
.aurra-step66-register-header .btn-outline-primary:hover {
  background: rgba(94,234,212,0.1) !important;
}
.aurra-step66-register-header .btn-outline-secondary {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ── Student rows — live status border + soft tint ───────── */
.aurra-step66-attendance-table tbody tr {
  transition: background 0.15s ease !important;
}
.aurra-step66-attendance-table tbody tr[data-att-status] td:first-child {
  border-left: 3px solid transparent !important;
  padding-left: 0.65rem !important;
  transition: border-color 0.2s ease !important;
}
.aurra-step66-attendance-table tbody tr[data-att-status="present"]  td:first-child { border-left-color: #10b981 !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="absent"]   td:first-child { border-left-color: #ef4444 !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="late"]     td:first-child { border-left-color: #f59e0b !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="half_day"] td:first-child { border-left-color: #3b82f6 !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="leave"]    td:first-child { border-left-color: #8b5cf6 !important; }
/* Soft row tint for non-present statuses */
.aurra-step66-attendance-table tbody tr[data-att-status="absent"]   { background: rgba(239,68,68,0.03)  !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="late"]     { background: rgba(245,158,11,0.04) !important; }
.aurra-step66-attendance-table tbody tr[data-att-status="leave"]    { background: rgba(139,92,246,0.03) !important; }

/* Student avatar initials — teal gradient */
.aurra-step66-attendance-table .attendance-student-cell > span {
  background: linear-gradient(135deg, #0d9488, #059669) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

/* ── Attendance health strip — glass card ─────────────────── */
.aurra-step66-health-strip {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%) !important;
  border: 1px solid rgba(13,148,136,0.13) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.05rem !important;
  box-shadow: 0 1px 4px rgba(13,148,136,0.06) !important;
}
.aurra-step66-health-strip .attendance-health-strip {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.aurra-step66-health-strip .attendance-health-strip article { border-radius: 8px !important; }
.aurra-step66-health-strip .attendance-health-strip .is-present { background: #dcfce7 !important; }
.aurra-step66-health-strip .attendance-health-strip .is-present strong { color: #059669 !important; }
.aurra-step66-health-strip .attendance-health-strip .is-absent  { background: #fee2e2 !important; }
.aurra-step66-health-strip .attendance-health-strip .is-absent  strong { color: #dc2626 !important; }

/* ── Submit bar — glass teal ─────────────────────────────── */
.aurra-step66-submit-bar {
  background: linear-gradient(90deg, #f0fdf4, #ecfeff) !important;
  border: 1px solid rgba(13,148,136,0.14) !important;
  border-radius: 10px !important;
  padding: 0.75rem 0.95rem !important;
}

/* ── Attendance % pill in saved sheets ───────────────────── */
.attendance-percent-pill {
  display: inline-block !important;
  background: #dcfce7 !important;
  color: #059669 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.18rem 0.5rem !important;
  font-size: 0.78rem !important;
  font-variant-numeric: tabular-nums !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — FULL REDESIGN 2026
   Refined dark shell · High-contrast text · Smooth slide
   animations · Teal active glow · Polished footer
   ══════════════════════════════════════════════════════════════ */

/* ── Shell & background ──────────────────────────────────── */
.sidebar {
  background: linear-gradient(170deg,
    #0a1628 0%,
    #0f1e30 40%,
    #091521 100%) !important;
  border-right: 1px solid rgba(13,148,136,0.14) !important;
  box-shadow: 4px 0 28px rgba(0,0,0,0.32),
              inset -1px 0 0 rgba(255,255,255,0.03) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
/* Subtle teal top accent line */
.sidebar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(13,148,136,0.6) 40%, rgba(20,184,166,0.4) 70%, transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Scrollable nav area ─────────────────────────────────── */
.sidebar > .sidebar-nav {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0.6rem 0.75rem 1rem !important;
  gap: 2px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(13,148,136,0.22) transparent !important;
}
.sidebar > .sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar > .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar > .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(13,148,136,0.22);
  border-radius: 3px;
}
.sidebar > .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(13,148,136,0.45);
}

/* ── Brand block ─────────────────────────────────────────── */
.sidebar .brand-block {
  padding: 0.95rem 1rem 0.9rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  background: rgba(0,0,0,0.15) !important;
  flex-shrink: 0 !important;
  gap: 0.75rem !important;
}
.sidebar .brand-title {
  color: #f8fafc !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
.sidebar .brand-subtitle {
  color: rgba(148,163,184,0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  margin-top: 0.05rem !important;
}
.sidebar .aurra-brand-mark {
  box-shadow: 0 0 0 2px rgba(13,148,136,0.3),
              0 8px 18px rgba(0,0,0,0.35) !important;
}

/* ── Section group toggles ───────────────────────────────── */
.sidebar-group { gap: 0 !important; }
.sidebar-group-toggle {
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  color: #c4d0de !important;
  font-size: 0.81rem !important;
  font-weight: 700 !important;
  gap: 0.6rem !important;
  min-height: 38px !important;
  padding: 0.46rem 0.7rem !important;
  letter-spacing: 0.008em !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
}
.sidebar-group-toggle:hover {
  background: rgba(255,255,255,0.055) !important;
  color: #e2e8f0 !important;
}
.sidebar-group-toggle.active {
  background: rgba(13,148,136,0.13) !important;
  color: #5eead4 !important;
}
.sidebar-group-toggle .nav-icon {
  opacity: 0.65 !important;
  transition: opacity 0.18s ease !important;
  color: rgba(148,163,184,0.8) !important;
}
.sidebar-group-toggle:hover .nav-icon,
.sidebar-group-toggle.active .nav-icon {
  opacity: 1 !important;
  color: #94d8d4 !important;
}

/* ── Chevron arrow — smooth cubic-bezier ─────────────────── */
.sidebar-group-arrow {
  border-right: 2px solid currentColor !important;
  border-top: 2px solid currentColor !important;
  flex-shrink: 0 !important;
  height: 6px !important;
  width: 6px !important;
  margin-left: auto !important;
  opacity: 0.42 !important;
  transform: rotate(135deg) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease !important;
}
.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-arrow,
.sidebar-group-toggle.active[aria-expanded="true"] .sidebar-group-arrow {
  transform: rotate(-45deg) !important;
  opacity: 0.85 !important;
}
.sidebar-group-toggle.active .sidebar-group-arrow {
  opacity: 0.75 !important;
}

/* ── WhatsApp-style accordion — max-height transition ───────
   Why max-height instead of height:
   • height transition forces a layout recalc every frame → sidebar scrolls
   • max-height 0↔large value clips content without touching scrollTop
   • Bootstrap's .collapsing is killed — we run our own accordion JS
   ─────────────────────────────────────────────────────────── */

/* Default: collapsed */
.sidebar-group-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity     0.22s ease !important;
  opacity: 0 !important;
  border-left: 1.5px solid rgba(13,148,136,0.22) !important;
  margin-left: 1.1rem !important;
  padding-left: 0.6rem !important;
  gap: 1px !important;
  display: flex !important;
  flex-direction: column !important;
  will-change: max-height !important;
}
/* Expanded state (toggled by JS via class="show") */
.sidebar-group-body.show {
  max-height: 600px !important;   /* tall enough for any group */
  opacity: 1 !important;
  padding-bottom: 0.4rem !important;
}
/* Kill Bootstrap's .collapsing intermediate height twitch */
.sidebar-group-body.collapsing {
  height: auto !important;
  transition: none !important;
  display: flex !important;
}

/* ── Child nav items ─────────────────────────────────────── */
.nav-item-child {
  border-radius: 7px !important;
  color: #7f96ae !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  gap: 0.5rem !important;
  min-height: 31px !important;
  padding: 0.32rem 0.6rem !important;
  transition: background 0.16s ease, color 0.16s ease !important;
  align-items: center !important;
  display: flex !important;
}
.nav-item-child:hover {
  background: rgba(255,255,255,0.055) !important;
  color: #d1dde9 !important;
}
.nav-item-child.active {
  background: rgba(13,148,136,0.16) !important;
  color: #5eead4 !important;
  box-shadow: inset 2px 0 0 #0d9488 !important;
  font-weight: 700 !important;
}
/* Child dot indicator */
.nav-child-dot {
  background: currentColor !important;
  border-radius: 50% !important;
  width: 4px !important;
  height: 4px !important;
  flex-shrink: 0 !important;
  opacity: 0.32 !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
}
.nav-item-child:hover .nav-child-dot { opacity: 0.6 !important; }
.nav-item-child.active .nav-child-dot {
  opacity: 1 !important;
  transform: scale(1.5) !important;
  background: #14b8a6 !important;
}

/* ── Top-level items (Dashboard, Support) ────────────────── */
.sidebar .nav-item {
  border-radius: 9px !important;
  border-left: 3px solid transparent !important;
  color: #c4d0de !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  gap: 0.65rem !important;
  min-height: 40px !important;
  padding: 0.52rem 0.75rem !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
  position: relative !important;
}
/* Animated left-bar with glow */
.sidebar .nav-item::before {
  background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
  border-radius: 0 2px 2px 0 !important;
  height: calc(100% - 14px) !important;
  left: -3px !important;
  top: 7px !important;
  width: 3px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  box-shadow: 2px 0 10px rgba(13,148,136,0.5) !important;
}
.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.055) !important;
  color: #dde7f0 !important;
}
.sidebar .nav-item:hover::before { opacity: 0.45 !important; }
.sidebar .nav-item.active {
  background: rgba(13,148,136,0.16) !important;
  border-left-color: transparent !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.18) !important;
}
.sidebar .nav-item.active::before { opacity: 1 !important; }
/* Nav icons */
.sidebar .nav-item .nav-icon {
  color: rgba(148,163,184,0.75) !important;
  opacity: 1 !important;
  transition: color 0.18s ease !important;
}
.sidebar .nav-item:hover .nav-icon { color: #94a3b8 !important; }
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-icon svg { color: #5eead4 !important; }

/* Uniform icon size */
.sidebar .nav-icon { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; }
.sidebar .nav-icon svg { width: 16px !important; height: 16px !important; }

/* ── Divider ─────────────────────────────────────────────── */
.sidebar-divider {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin: 0.45rem 0.5rem !important;
}

/* ── Footer user card ────────────────────────────────────── */
.sidebar > .sidebar-footer {
  padding: 0.8rem 1rem !important;
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
.sidebar-footer-card { gap: 0.05rem !important; }
.sidebar-footer-card .fw-semibold,
.sidebar-footer-card .text-white {
  color: #f1f5f9 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sidebar-footer-card .text-uppercase.text-secondary-emphasis,
.sidebar-footer-card .small.text-uppercase {
  color: rgba(148,163,184,0.6) !important;
  font-size: 0.59rem !important;
  letter-spacing: 0.09em !important;
}
.sidebar-footer .role-chip {
  background: rgba(13,148,136,0.16) !important;
  border: 1px solid rgba(13,148,136,0.28) !important;
  color: #5eead4 !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 20px !important;
  margin-top: 0.28rem !important;
}

/* ── Mobile sidebar (offcanvas) same theme ───────────────── */
.mobile-sidebar {
  background: linear-gradient(170deg, #0a1628 0%, #0f1e30 50%, #091521 100%) !important;
}
.mobile-sidebar .sidebar-nav {
  padding: 0.6rem 0.75rem 1rem !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTO FACE ATTENDANCE TABLE — REDESIGN 2026
   Compact guidance chips · Color-coded progress bar ·
   Polished badges · Tighter row density
   ══════════════════════════════════════════════════════════════ */

/* ── Sample guidance chips — see compact block lower in file ─ */
.auto-sample-guidance span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: unset !important;
  padding: 0.1rem 0.38rem !important;
  border-radius: 4px !important;
  background: rgba(100,116,139,0.09) !important;
  border: 1px solid rgba(100,116,139,0.18) !important;
  color: #64748b !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* ── Sample health badge ─────────────────────────────────── */
.auto-sample-health {
  display: inline-flex !important;
  align-items: center !important;
  min-height: unset !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.auto-sample-health.is-ready {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid rgba(21,128,61,0.2) !important;
}
.auto-sample-health.is-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
}
.auto-sample-health.is-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
}

/* ── Sample cell layout — compact stacking ───────────────── */
.aurra-step66-attendance-table td:nth-child(3),
.aurra-table td:has(.auto-face-progress) {
  min-width: 160px !important;
  max-width: 200px !important;
}

/* ── Progress bar — red→amber→green gradient ─────────────── */
.auto-face-progress {
  width: min(160px, 100%) !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
  margin-bottom: 0.25rem !important;
}
.auto-face-progress span {
  display: block !important;
  width: calc(var(--face-progress, 0) * 1%) !important;
  height: 100% !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg,
    #ef4444 0%,
    #f59e0b 40%,
    #10b981 100%) !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 3px !important;
}
/* Empty bar — show a thin red stub so "0" is visible */
.auto-face-progress[style*="--face-progress: 0"] span {
  width: 4px !important;
  background: #ef4444 !important;
}

/* ── Small meta text in sample cell ─────────────────────── */
.auto-face-progress + small,
td small.text-secondary.fw-semibold {
  font-size: 0.65rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  display: block !important;
}

/* ── Consent pill ────────────────────────────────────────── */
.auto-consent-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: unset !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}
.auto-consent-pill.is-confirmed {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid rgba(21,128,61,0.2) !important;
}
.auto-consent-pill.is-needed {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
}

/* ── Review pill ─────────────────────────────────────────── */
.auto-review-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.2rem 0.48rem !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

/* ── Privacy reset action column — HORIZONTAL layout ─────── */
.auto-privacy-reset-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
  min-width: 0 !important;
}
.auto-privacy-reset-form .form-select-sm {
  font-size: 0.7rem !important;
  padding: 0.22rem 1.4rem 0.22rem 0.45rem !important;
  border-radius: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 130px !important;
}
.auto-privacy-reset-form .btn-sm {
  font-size: 0.68rem !important;
  padding: 0.22rem 0.55rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── Guidance chips — single line, no wrap ───────────────── */
.auto-sample-guidance {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  margin-top: 0.25rem !important;
  overflow: hidden !important;
  max-width: 200px !important;
}
.auto-sample-guidance span {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important;
}

/* ── Tighten table row density ───────────────────────────── */
.aurra-table tbody td {
  vertical-align: middle !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* ── Sample health detail small text ─────────────────────── */
td .auto-sample-health + small,
td .auto-sample-health ~ small {
  font-size: 0.63rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  margin-top: 0.15rem !important;
}

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL TOKEN NORMALIZATION — Design System Layer
   Added: 2026-05-18
   Purpose: Replace residual hardcoded values with CSS var() tokens
   sourced from aurra-tokens.css. This block is always LAST so it
   wins the cascade without needing to touch existing rules.
   ══════════════════════════════════════════════════════════════ */

/* ── Page header gradient title ──────────────────────────── */
.aurra-page-header .page-title,
.aurra-step64-page-header .page-title,
.aurra-step65-page-header .page-title,
.aurra-step66-page-header .page-title,
.aurra-step67-page-header .page-title,
.aurra-step68-page-header .page-title,
.aurra-step69-page-header .page-title {
  background: var(--header-title-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}
.page-eyebrow { color: var(--header-eyebrow-color) !important; }
.page-subtitle { color: var(--header-subtitle-color) !important; font-size: var(--header-subtitle-size) !important; }

/* ── Command strip — use token vars ──────────────────────── */
.aurra-command-strip h2,
.aurra-command-strip h1,
.aurra-command-strip .command-title {
  color: var(--cmd-ink) !important;
}
.aurra-command-strip-metrics span,
.aurra-command-strip-metrics small {
  color: var(--cmd-muted) !important;
}
.aurra-command-strip-metrics strong {
  color: var(--cmd-ink) !important;
  font-size: var(--cmd-metric-val-size) !important;
}
.aurra-command-strip-rail > span:not([class]),
.aurra-command-strip-rail [class*="-rail-note"] > span {
  color: var(--cmd-muted) !important;
}
.aurra-command-strip-rail > strong:not([class]),
.aurra-command-strip-rail [class*="-rail-note"] > strong {
  color: var(--cmd-ink) !important;
}

/* Module accent left borders */
.aurra-step64-student-command { border-left: 4px solid var(--cmd-accent-students) !important; }
.aurra-step65-finance-command  { border-left: 4px solid var(--cmd-accent-fees) !important; }
.aurra-step66-attendance-command,
.aurra-attendance-command      { border-left: 4px solid var(--cmd-accent-attendance) !important; }
.aurra-step67-hr-command,
.aurra-hr-command              { border-left: 4px solid var(--cmd-accent-hr) !important; }

/* ── Stats strip — use token vars ────────────────────────── */
[class*="-intake-strip"] a,
[class*="-recovery-strip"] a {
  background: var(--strip-card-bg) !important;
  border: 1px solid var(--strip-card-border) !important;
  border-radius: var(--strip-card-radius) !important;
  box-shadow: var(--strip-card-shadow) !important;
}
[class*="-intake-strip"] a:hover,
[class*="-recovery-strip"] a:hover {
  border-color: var(--strip-card-hover-border) !important;
  box-shadow: var(--strip-card-hover-shadow) !important;
}
[class*="-intake-strip"] span:not(.en):not(.ur),
[class*="-recovery-strip"] span:not(.en):not(.ur) {
  color: var(--ink-disabled) !important;
  font-size: var(--strip-label-size) !important;
}
[class*="-intake-strip"] strong,
[class*="-recovery-strip"] strong {
  color: var(--ink-primary) !important;
  font-size: var(--strip-value-size) !important;
}
[class*="-intake-strip"] small,
[class*="-recovery-strip"] small {
  color: var(--ink-tertiary) !important;
  font-size: var(--strip-hint-size) !important;
}

/* ── Table heads — use token vars ────────────────────────── */
.table thead th,
.aurra-table thead th,
.premium-student-table thead th,
.admission-register-table thead th {
  background: var(--tbl-head-bg) !important;
  color: var(--tbl-head-color) !important;
  font-size: var(--tbl-head-size) !important;
  font-weight: var(--tbl-head-weight) !important;
  border-bottom: 2px solid var(--tbl-border) !important;
}
.table tbody td,
.aurra-table tbody td,
.premium-student-table tbody td,
.admission-register-table tbody td {
  color: var(--tbl-cell-color) !important;
  font-size: var(--tbl-cell-size) !important;
  border-bottom: 1px solid var(--tbl-border) !important;
}
.table tbody tr:hover td,
.aurra-table tbody tr:hover td,
.premium-student-table tbody tr:hover td {
  background: var(--tbl-row-hover) !important;
}

/* ── Unified badge system — use token vars ───────────────── */
.aurra-badge,
.status-pill,
.fee-status-badge,
.aurra-table-chip {
  padding: var(--badge-py) var(--badge-px) !important;
  border-radius: var(--badge-radius) !important;
  font-size: var(--badge-size) !important;
  font-weight: var(--badge-weight) !important;
}
.status-active,  .aurra-badge-success,
.fee-status-paid,    .badge.bg-success {
  background: var(--pill-active-bg) !important;
  color: var(--pill-active-color) !important;
  border: none !important;
}
.status-warning, .aurra-badge-warning,
.fee-status-partial, .badge.bg-warning {
  background: var(--pill-warning-bg) !important;
  color: var(--pill-warning-color) !important;
  border: none !important;
}
.status-danger,  .aurra-badge-danger,
.fee-status-unpaid,  .badge.bg-danger {
  background: var(--pill-danger-bg) !important;
  color: var(--pill-danger-color) !important;
  border: none !important;
}
.status-info,    .aurra-badge-info,    .badge.bg-info {
  background: var(--pill-info-bg) !important;
  color: var(--pill-info-color) !important;
  border: none !important;
}
.status-neutral, .aurra-badge-neutral, .badge.bg-secondary {
  background: var(--pill-neutral-bg) !important;
  color: var(--pill-neutral-color) !important;
  border: none !important;
}
.status-muted {
  background: var(--pill-muted-bg) !important;
  color: var(--pill-muted-color) !important;
  border: none !important;
}

/* ── Form inputs — unified ───────────────────────────────── */
.form-control,
.form-select,
.auth-form-control {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  font-size: var(--input-size) !important;
  background: var(--input-bg) !important;
  min-height: var(--input-height) !important;
}
.form-control:focus,
.form-select:focus,
.auth-form-control:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-ring) !important;
  outline: none !important;
}
.form-control:disabled,
.form-select:disabled {
  background: var(--input-disabled-bg) !important;
  color: var(--input-disabled-color) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* ── Empty state — universal ─────────────────────────────── */
.aurra-empty-state {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
}
.aurra-empty-state-icon {
  font-size: var(--empty-icon-size) !important;
  opacity: var(--empty-icon-opacity) !important;
  margin-bottom: 0.6rem !important;
  display: block !important;
}
.aurra-empty-state-msg {
  color: var(--empty-msg-color) !important;
  font-size: var(--empty-msg-size) !important;
  font-weight: 600 !important;
}
.aurra-empty-state-hint {
  color: var(--ink-disabled) !important;
  font-size: var(--empty-hint-size) !important;
  margin-top: 0.25rem !important;
}

/* ── Metric card — universal component ───────────────────── */
.aurra-metric-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 10px !important;
  padding: 1rem 1.15rem !important;
  text-decoration: none !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
  border-top: 3px solid var(--metric-accent, var(--accent)) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}
a.aurra-metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.10) !important;
}
.aurra-metric-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--accent-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--accent) !important;
}
.aurra-metric-icon svg { width: 18px !important; height: 18px !important; }
.aurra-metric-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-disabled) !important;
  margin-bottom: 0.15rem !important;
}
.aurra-metric-value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--ink-primary) !important;
  line-height: 1.1 !important;
}
.aurra-metric-delta {
  font-size: 0.7rem !important;
  color: var(--ink-tertiary) !important;
  margin-top: 0.1rem !important;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.aurra-breadcrumb .breadcrumb-item,
.aurra-breadcrumb .breadcrumb-item a {
  font-size: 0.78rem !important;
  color: var(--ink-tertiary) !important;
}
.aurra-breadcrumb .breadcrumb-item.active {
  color: var(--ink-secondary) !important;
  font-weight: 600 !important;
}
.aurra-breadcrumb .breadcrumb-item a:hover {
  color: var(--accent) !important;
}

/* ── Transition unification ──────────────────────────────── */
.sidebar-group-arrow {
  transition: transform var(--t-spring) !important;
}
.sidebar .nav-link,
.sidebar .nav-item-child {
  transition: background var(--t-fast), color var(--t-fast) !important;
}
.btn {
  transition: background var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast) !important;
}

/* ── Sidebar group toggle active state ───────────────────── */
.sidebar-group-toggle {
  /* Prevent the toggle button height from collapsing the nav scroll */
  flex-shrink: 0 !important;
}
/* Active group toggle title color */
.sidebar-group-toggle[aria-expanded="true"] .nav-en,
.sidebar-group-toggle[aria-expanded="true"] .nav-ur {
  color: var(--sidebar-active) !important;
}
/* Active child item — teal left dot + teal text */
.nav-item-child.active {
  color: var(--sidebar-active) !important;
  background: var(--sidebar-active-bg) !important;
}
.nav-item-child.active .nav-child-dot {
  background: var(--sidebar-active) !important;
  transform: scale(1.5) !important;
}
/* Hover state for child items */
.nav-item-child:hover {
  color: var(--ink-on-dark) !important;
  background: var(--sidebar-hover-bg) !important;
}

/* ── END Universal Token Normalization ───────────────────── */

/* ════════════════════════════════════════════════════════════
   DUAL-LANGUAGE SYSTEM — permanent .en / .ur spans
   Usage: <span class="en">English</span><span class="ur">اردو</span>
   CSS controls which is visible — no JS translation needed.
   ════════════════════════════════════════════════════════════ */

/* Default: show English, hide Urdu */
.ur { display: none !important; }

/* Urdu mode: show Urdu, hide English */
.aurra-urdu .en { display: none !important; }
.aurra-urdu .ur { display: inline !important; }

/* Block-level Urdu elements (headings, paragraphs) */
.aurra-urdu .ur-block { display: block !important; }
.ur-block { display: none !important; }
.aurra-urdu .en-block { display: none !important; }

/* ── LANGUAGE SAFETY NET ──────────────────────────────────────────
   Many module CSS rules use  `.some-card span { display:block !important }`
   with specificity (0,1,1) which beats `.ur { display:none !important }`
   at (0,1,0).  This nuclear rule uses (0,2,1) which wins regardless
   of order and beats any (0,1,x) rule across the entire stylesheet. */
body:not(.aurra-urdu) .ur     { display: none   !important; }
body:not(.aurra-urdu) .ur-block { display: none  !important; }
body.aurra-urdu        .ur    { display: inline  !important; }
body.aurra-urdu        .ur-block { display: block !important; }
/* ────────────────────────────────────────────────────────────────── */

/* Urdu font on .ur spans */
.aurra-urdu .ur,
.aurra-urdu .ur-block {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
  direction: rtl;
  line-height: 2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE PAGE — AUTO FACE TAB OVERHAUL
   ─────────────────────────────────────────────────────────────
   Fixes dark-on-light clash, oversized stats, step labels,
   camera card, health panel and consent table styling.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Auto-face command panel — frosted glass (was dark navy) */
.auto-face-command {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.94) 0%,
    rgba(240,253,250,0.90) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06) !important;
  color: #0f172a !important;
}
.auto-face-command h2 {
  color: #0f172a !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}
.auto-face-command p {
  color: #64748b !important;
  font-size: 0.82rem !important;
}
.auto-face-command .page-eyebrow {
  color: #10b981 !important;
}
/* Fix buttons inside now-light face command */
.auto-face-command-actions .btn-primary {
  background: linear-gradient(135deg, #0d9488, #10b981) !important;
  border-color: #0d9488 !important;
}

/* 2. Auto health panel — keep light, enhance borders */
.auto-health-panel {
  background: linear-gradient(135deg, #f0fdf9 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(16,185,129,0.18) !important;
  border-radius: 12px !important;
}
.auto-health-panel h3 {
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.auto-health-chip.is-ready {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}
.auto-health-chip.is-attention {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}
.auto-health-chip.is-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* 3. Face decision cards — tighten oversized number (was 2rem) */
.auto-face-decision-card {
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.auto-face-decision-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 3px 10px rgba(16,185,129,0.12) !important;
}
.auto-face-decision-card strong {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
.auto-face-decision-card span,
.auto-face-decision-card small {
  font-size: 0.72rem !important;
  color: #64748b !important;
}

/* 4. Face ops cards — consistent style */
.auto-face-ops-card {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}
.auto-face-ops-card .page-eyebrow {
  color: #10b981 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.3rem !important;
  display: block !important;
}
.auto-face-ops-card strong {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
.auto-face-ops-card > span {
  font-size: 0.75rem !important;
  color: #64748b !important;
  display: block !important;
  margin-top: 0.2rem !important;
}

/* 5. Camera card — dark preview shell stays dark (correct for camera),
      but the card wrapper should match page */
.auto-camera-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
}
.auto-camera-card .page-eyebrow {
  color: #10b981 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.auto-camera-card h3 {
  color: #0f172a !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* 6. Camera status chip */
.auto-camera-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* 7. Runtime grid chips */
.auto-face-runtime-grid span {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  color: #475569 !important;
  padding: 0.5rem 0.75rem !important;
}
.auto-face-runtime-grid strong {
  color: #0f172a !important;
}

/* 8. Consent summary chips */
.auto-consent-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  padding: 0.75rem 0 !important;
}
.auto-consent-summary span {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.78rem !important;
  color: #475569 !important;
}
.auto-consent-summary strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 9. Readiness alert — amber warning polish */
.auto-face-readiness-alert {
  border-radius: 12px !important;
  border: 1px solid rgba(245,158,11,0.3) !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  padding: 1rem 1.25rem !important;
}
.auto-face-readiness-alert .page-eyebrow {
  color: #d97706 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.auto-face-readiness-alert strong {
  color: #92400e !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}
.auto-face-readiness-alert > div > span {
  color: #78350f !important;
  font-size: 0.8rem !important;
}
.auto-face-readiness-alert code {
  background: #1e1b4b !important;
  color: #a5f3fc !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

/* 10. Face-chip status badge */
.auto-face-chip-status {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 999px !important;
}
.auto-face-chip-status.is-ready {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid rgba(21,128,61,0.2) !important;
}
.auto-face-chip-status.is-blocked {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid rgba(185,28,28,0.2) !important;
}

/* 11. Face note (scope info box) */
.auto-face-note {
  background: #f0fdf9 !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
  border-radius: 8px !important;
  color: #065f46 !important;
  font-size: 0.8rem !important;
  padding: 0.6rem 0.9rem !important;
}

/* 12. Decision state panel (right of camera) */
.auto-decision-state {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.85rem 1rem !important;
}

/* 13. Sample progress bar */
.auto-face-progress {
  border-radius: 999px !important;
  background: #e2e8f0 !important;
  height: 5px !important;
  overflow: hidden !important;
  margin-bottom: 0.3rem !important;
}
.auto-face-progress span {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #0d9488, #10b981) !important;
  width: calc(var(--face-progress, 0) * 1%) !important;
  border-radius: 999px !important;
}

/* 14. Review pills */
.auto-review-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.auto-review-pill.is-marked-present { background: #dcfce7 !important; color: #15803d !important; }
.auto-review-pill.is-review-needed  { background: #fef3c7 !important; color: #92400e !important; }
.auto-review-pill.is-skipped        { background: #f1f5f9 !important; color: #64748b !important; }
.auto-review-pill.is-rejected       { background: #fee2e2 !important; color: #b91c1c !important; }
.auto-review-pill.is-dismissed      { background: #ede9fe !important; color: #6d28d9 !important; }

/* 15. Attendance page — filter panel polish */
.aurra-step66-filter-panel {
  background: #f8fafc !important;
}

/* 16. Attendance submit bar */
.aurra-step66-submit-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
}

/* 17. Attendance health strip donut */
.attendance-donut {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    #10b981 calc(var(--present, 0) * 1%),
    #e2e8f0 0%
  ) !important;
  box-shadow: inset 0 0 0 10px #fff !important;
  flex-shrink: 0 !important;
}

/* 18. Consent date tiny font fix — override inline style via parent */
.auto-consent-pill + small,
td small[style*="0.62rem"],
td small[style*="font-size"] {
  font-size: 0.72rem !important;
}

/* 19. Grid responsive breakpoints for face decision / ops */
@media (max-width: 992px) {
  .auto-face-decision-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .auto-face-ops-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 576px) {
  .auto-face-decision-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .auto-face-ops-grid { grid-template-columns: 1fr !important; }
  .auto-face-command { flex-direction: column !important; }
}

/* 20. Attendance page header accent */
.att-page-header .page-title {
  background: linear-gradient(120deg, #0f172a 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE AUTO FACE TAB — PREMIUM POLISH v2
   Health chips · Action steps · Camera buttons · Consent section
   ═══════════════════════════════════════════════════════════════ */

/* ── Health chip grid: all chips now use auto-health-chip class ── */
.auto-health-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  white-space: nowrap !important;
}
.auto-health-chip strong { font-weight: 800 !important; color: inherit !important; }

/* Color states */
.auto-health-chip.is-ready    { background:#dcfce7 !important; border-color:rgba(21,128,61,.25) !important; color:#15803d !important; }
.auto-health-chip.is-danger   { background:#fee2e2 !important; border-color:rgba(185,28,28,.25) !important; color:#b91c1c !important; }
.auto-health-chip.is-warning,
.auto-health-chip.is-attention{ background:#fef3c7 !important; border-color:rgba(217,119,6,.25)  !important; color:#92400e !important; }
.auto-health-chip.is-neutral  { background:#f1f5f9 !important; border-color:#e2e8f0 !important;              color:#475569 !important; }

/* ── Health action steps: arrow-pill style ─────────────────── */
.auto-health-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-top: 0.65rem !important;
}
.auto-health-actions > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.32rem 0.8rem !important;
  border-radius: 8px !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg,#eff6ff,#f0fdf4) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  color: #1e40af !important;
}
.auto-health-actions > span::before {
  content: "→" !important;
  font-weight: 900 !important;
  color: #3b82f6 !important;
  font-size: 0.72rem !important;
}

/* ── Camera station: uniform button heights ──────────────────── */
.auto-camera-card .btn-primary,
.auto-camera-card .btn-light.border,
.auto-camera-card .btn-outline-primary {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 1rem !important;
  border-radius: 8px !important;
}
.auto-camera-card .btn-primary {
  background: linear-gradient(135deg,#0d9488,#10b981) !important;
  border-color: #0d9488 !important;
}
.auto-camera-card .btn-outline-primary {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
}
.auto-camera-card .btn-outline-primary:hover {
  background: rgba(13,148,136,.07) !important;
}
.auto-camera-card .btn-light.border {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
.auto-camera-card .btn-light.border:hover {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
}

/* ── Camera source input — compact label style ───────────────── */
#autoCameraSource.form-control {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.85rem !important;
  background: #f8fafc !important;
}

/* ── Camera safety notice ────────────────────────────────────── */
.auto-camera-safety {
  background: #f0fdf9 !important;
  border: 1px solid rgba(16,185,129,.2) !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.9rem !important;
}
.auto-camera-safety span { font-size: 0.78rem !important; color: #065f46 !important; }
.auto-camera-safety span + span { color: #64748b !important; font-size: 0.72rem !important; }

/* ── Consent summary chips — color-coded ────────────────────── */
.auto-consent-summary { gap: 0.5rem !important; }
.auto-consent-summary > span {
  border-radius: 8px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.76rem !important;
  color: #475569 !important;
  transition: border-color 0.15s !important;
}
.auto-consent-summary > span:hover { border-color: #0d9488 !important; }
.auto-consent-summary > span strong { color: #0f172a !important; font-size: 1.05rem !important; display: block !important; line-height: 1.2 !important; }

/* ── Live Scan Feed card — "No scan yet" placeholder ────────── */
.auto-decision-state {
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  font-style: italic !important;
  border: 1.5px dashed #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  margin-top: 0.75rem !important;
}

/* ── Biometric section action buttons ────────────────────────── */
.auto-camera-card .btn-sm.btn-primary {
  padding: 0.38rem 0.95rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg,#0d9488,#10b981) !important;
  border-color: #0d9488 !important;
}
.auto-camera-card .btn-sm.btn-light.border {
  padding: 0.38rem 0.85rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
.auto-camera-card .btn-sm.btn-light.border:hover { border-color:#0d9488 !important; color:#0d9488 !important; }

/* ═══════════════════════════════════════════════════════════════
   STUDENTS PAGE — UNIFORM EXPORT / UTILITY BUTTONS
   All export, PDF, ID Card, Excel buttons share one style:
   slate border · slate text · teal on hover.
   ═══════════════════════════════════════════════════════════════ */

/* Unified small utility button (btn-outline-secondary btn-sm) */
.btn.btn-outline-secondary.btn-sm {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  background: #fff !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  padding: 0.36rem 0.85rem !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
  white-space: nowrap !important;
}
.btn.btn-outline-secondary.btn-sm:hover,
.btn.btn-outline-secondary.btn-sm:focus-visible {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: rgba(13,148,136,0.05) !important;
  box-shadow: none !important;
}

/* Primary filter button — solid teal, consistent */
.student-filter-shell .btn.btn-primary,
.aurra-step64-filter .btn.btn-primary {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #0d9488, #10b981) !important;
  border-color: #0d9488 !important;
}

/* Advanced ghost button — match filter height */
.student-filter-shell .btn.btn-light.border,
.aurra-step64-filter .btn.btn-light.border {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 1rem !important;
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  background: #fff !important;
}
.student-filter-shell .btn.btn-light.border:hover,
.aurra-step64-filter .btn.btn-light.border:hover {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: rgba(13,148,136,0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE AUTO FACE — INNER SUB-TABS
   Amber accent to match the attendance module colour token.
   ═══════════════════════════════════════════════════════════════ */

.auto-sub-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  margin-bottom: 1rem !important;
}
.auto-sub-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.55rem 1.1rem !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
.auto-sub-tab-btn.active {
  color: #d97706 !important;
  border-bottom-color: #d97706 !important;
}
.auto-sub-tab-btn:hover:not(.active) {
  color: #334155 !important;
  border-bottom-color: #cbd5e1 !important;
}
.auto-sub-tab-btn svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
.auto-sub-pane { display: none !important; }
.auto-sub-pane.active { display: block !important; }

/* Compact health strip in Live Scan sub-tab */
.auto-health-compact-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  align-items: center !important;
  padding: 0.6rem 0.85rem !important;
  background: #fffbeb !important;
  border: 1px solid rgba(217,119,6,.18) !important;
  border-radius: 8px !important;
  margin-bottom: 0.85rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   FEE MANAGEMENT — TAB LAYOUT
   Tab nav + pane show/hide. Collapse for Add Fee form.
   ═══════════════════════════════════════════════════════════════ */

.fee-mgmt-tabs {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 1.1rem !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.fee-mgmt-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.6rem 1.2rem !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
.fee-mgmt-tab-btn.active {
  color: #0d9488 !important;
  border-bottom-color: #0d9488 !important;
}
.fee-mgmt-tab-btn:hover:not(.active) {
  color: #334155 !important;
  border-bottom-color: #cbd5e1 !important;
}
.fee-mgmt-tab-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Tab panes */
.fee-tab-pane { display: none !important; }
.fee-tab-pane.active { display: block !important; }

/* Add Fee Record — collapsible panel */
.fee-add-collapse-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.15s ease !important;
}
.fee-add-collapse-header:hover { background: rgba(13,148,136,0.03) !important; }
.fee-add-collapse-header.open { border-bottom-color: #e2e8f0 !important; }
.fee-add-chevron {
  display: inline-flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  transition: transform 0.2s ease !important;
}
.fee-add-collapse-header.open .fee-add-chevron { transform: rotate(180deg) !important; }
.fee-add-collapse-body { display: none !important; padding: 1.25rem !important; }
.fee-add-collapse-body.open { display: block !important; }

/* Quick Lookup bar — compact horizontal layout */
.fee-lookup-compact {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
  padding: 0.9rem 1.25rem !important;
}
.fee-lookup-compact .fee-preview-card {
  flex: 1 1 auto !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fee-lookup-compact-label { flex-shrink: 0 !important; }

/* Fee filter bar — teal Filter button */
.aurra-step65-fee-filter .btn.btn-outline-primary {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.4rem 1rem !important;
  border-radius: 8px !important;
}
.aurra-step65-fee-filter .btn.btn-outline-primary:hover {
  background: rgba(13,148,136,0.07) !important;
}
.aurra-step65-fee-filter .btn.btn-light.border {
  font-size: 0.82rem !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  padding: 0.4rem 1rem !important;
  border-radius: 8px !important;
}

/* Collect Fee button in table — teal gradient */
.fee-ledger-table .btn.btn-sm.btn-primary {
  background: linear-gradient(135deg,#0d9488,#10b981) !important;
  border-color: #0d9488 !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  padding: 0.3rem 0.75rem !important;
}
.fee-ledger-table .btn.btn-sm.btn-outline-primary {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  font-size: 0.775rem !important;
  border-radius: 7px !important;
  padding: 0.3rem 0.75rem !important;
}
.fee-ledger-table .btn.btn-sm.btn-outline-primary:hover {
  background: rgba(13,148,136,0.07) !important;
}

/* Tab section headings */
.fee-tab-section-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--aurra-primary, #0d9488) !important;
  margin-bottom: 0.2rem !important;
}

/* Records count badge in filter bar */
.fee-records-count {
  font-size: 0.78rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL SEARCH DROPDOWN  (.gs-*)
   ══════════════════════════════════════════════════════════════════ */

#globalSearchWrap { position: relative !important; }

.gs-drop {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  min-width: 360px !important;
  max-width: 480px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.14), 0 2px 8px rgba(15,23,42,0.08) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  animation: gsSlideIn 0.12s ease !important;
}

@keyframes gsSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gs-spinner {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
}
.gs-spin {
  animation: gsSpin 0.9s linear infinite !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}
@keyframes gsSpin { to { transform: rotate(360deg); } }

.gs-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.35rem 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

.gs-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.6rem 1rem !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
  text-decoration: none !important;
}
.gs-item:hover,
.gs-item.is-active {
  background: #f1f5f9 !important;
}

.gs-item-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
}
.gs-item.is-active .gs-item-icon,
.gs-item:hover    .gs-item-icon {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

.gs-item-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.gs-item-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.gs-item-sub {
  display: block !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 1px !important;
}

.gs-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.gs-hl {
  background: #fef9c3 !important;
  color: #713f12 !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
  font-style: normal !important;
}

.gs-item-arrow {
  font-size: 0.7rem !important;
  color: #cbd5e1 !important;
  flex-shrink: 0 !important;
  transition: color 0.1s ease !important;
}
.gs-item:hover    .gs-item-arrow,
.gs-item.is-active .gs-item-arrow { color: #0d9488 !important; }

.gs-empty {
  padding: 1rem !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

.gs-footer {
  display: flex !important;
  gap: 1rem !important;
  padding: 0.45rem 1rem !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}
.gs-footer span {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMISSION FORM — Visual modernisation (A1–A6)
   Target: /students/new  and  /students/<id>/edit
   All overrides use !important to beat app.css specificity.
═══════════════════════════════════════════════════════════════════ */

/* A1 — Hero: dark navy → frosted-glass gradient */
.aurra-step64-admission-form .admission-workflow-hero {
    background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(236,252,250,0.88) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(13,148,136,0.18) !important;
    border-left: 4px solid #0d9488 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(15,23,42,0.06) !important;
    color: #0f172a !important;
}
.aurra-step64-admission-form .admission-workflow-hero .page-eyebrow {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
/* A2 — Hero h2: shrink massive clamp font to compact size */
.aurra-step64-admission-form .admission-workflow-hero h2 {
    color: #0f172a !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0.35rem 0 !important;
}
.aurra-step64-admission-form .admission-workflow-hero p {
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
}

/* A3 — Readiness tiles: dark glass → white light cards */
.aurra-step64-admission-form .admission-readiness-grid > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
    border-radius: 10px !important;
}
.aurra-step64-admission-form .admission-readiness-grid span {
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.aurra-step64-admission-form .admission-readiness-grid strong {
    color: #0f172a !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

/* A4 — Step chips: white-on-dark → teal-on-white */
.aurra-step64-admission-rail span {
    background: rgba(13,148,136,0.08) !important;
    border: 1px solid rgba(13,148,136,0.28) !important;
    color: #0d9488 !important;
    font-size: 0.72rem !important;
}

/* A5 — Page header: gradient text on "New Student Admission" title */
.aurra-page-header .page-title {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    background: linear-gradient(120deg, #0f172a 0%, #0d9488 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 0.15rem !important;
}
.aurra-page-header .page-eyebrow {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0d9488 !important;
    margin-bottom: 0.15rem !important;
}
.aurra-page-header .page-subtitle {
    font-size: 0.8rem !important;
    color: #64748b !important;
}

/* A6 — Academic track preview: flat → soft tinted card */
.admission-academic-preview {
    background: linear-gradient(135deg, #f0fdf9 0%, #f8fafc 100%) !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
}
.admission-academic-preview .page-eyebrow {
    color: #0d9488 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
}
.admission-academic-preview strong {
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}
.admission-academic-preview [data-academic-groups] span {
    background: rgba(13,148,136,0.10) !important;
    border: 1px solid rgba(13,148,136,0.22) !important;
    border-radius: 20px !important;
    color: #0f5652 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.6rem !important;
}

/* Disabled academic group select — muted look */
.form-select:disabled,
.form-select[disabled] {
    background-color: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* "Same as Phone" copy button */
.btn-whatsapp-copy {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.55rem !important;
    color: #0d9488 !important;
    background: rgba(13,148,136,0.08) !important;
    border: 1px solid rgba(13,148,136,0.25) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 150ms ease !important;
}
.btn-whatsapp-copy:hover {
    background: rgba(13,148,136,0.16) !important;
}

/* Leaving fields status-driven visibility animation */
[data-leaving-field] {
    transition: opacity 200ms ease !important;
}
[data-leaving-field][hidden] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   ADMISSION FORM — CASCADE CARD STYLING
   Step counter, colored left border per card, polished headers
   ══════════════════════════════════════════════════════════════════ */

/* Counter reset on the stack */
.admission-section-stack {
    counter-reset: admission-step !important;
}

/* Each card increments + gets a step badge via ::before on the icon */
.admission-section-stack .admission-card {
    counter-increment: admission-step !important;
    border-left: 4px solid #e2e8f0 !important;
    border-radius: 14px !important;
    transition: border-color 0.2s ease !important;
    position: relative !important;
}

/* Step number badge injected on card icon */
.admission-section-stack .admission-card .admission-card-icon::after {
    content: counter(admission-step, decimal-leading-zero) !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #0d9488 !important;
    color: #fff !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
}
.admission-section-stack .admission-card .admission-card-icon {
    position: relative !important;
}

/* Card 1 — Teal (identity) */
.admission-section-stack .admission-card:nth-child(1) {
    border-left-color: #0d9488 !important;
}
.admission-section-stack .admission-card:nth-child(1) .admission-card-icon {
    background: rgba(13,148,136,0.10) !important;
    color: #0d9488 !important;
    border: 1.5px solid rgba(13,148,136,0.25) !important;
}
.admission-section-stack .admission-card:nth-child(1) .admission-card-icon::after {
    background: #0d9488 !important;
}

/* Card 2 — Blue (guardian) */
.admission-section-stack .admission-card:nth-child(2) {
    border-left-color: #3b82f6 !important;
}
.admission-section-stack .admission-card:nth-child(2) .admission-card-icon {
    background: rgba(59,130,246,0.10) !important;
    color: #3b82f6 !important;
    border: 1.5px solid rgba(59,130,246,0.25) !important;
}
.admission-section-stack .admission-card:nth-child(2) .admission-card-icon::after {
    background: #3b82f6 !important;
}

/* Card 3 — Amber (school admin) */
.admission-section-stack .admission-card:nth-child(3) {
    border-left-color: #f59e0b !important;
}
.admission-section-stack .admission-card:nth-child(3) .admission-card-icon {
    background: rgba(245,158,11,0.10) !important;
    color: #d97706 !important;
    border: 1.5px solid rgba(245,158,11,0.25) !important;
}
.admission-section-stack .admission-card:nth-child(3) .admission-card-icon::after {
    background: #d97706 !important;
}

/* Card 4 — Violet (additional if present) */
.admission-section-stack .admission-card:nth-child(4) {
    border-left-color: #8b5cf6 !important;
}
.admission-section-stack .admission-card:nth-child(4) .admission-card-icon {
    background: rgba(139,92,246,0.10) !important;
    color: #7c3aed !important;
    border: 1.5px solid rgba(139,92,246,0.25) !important;
}
.admission-section-stack .admission-card:nth-child(4) .admission-card-icon::after {
    background: #7c3aed !important;
}

/* Card head — clean gradient title bar */
.admission-section-stack .admission-card .admission-card-head {
    padding-bottom: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.admission-section-stack .admission-card .admission-card-head h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

/* Connector line between cards (visual cascade) */
.admission-section-stack .admission-card:not(:last-child)::after {
    content: '' !important;
    display: block !important;
    width: 2px !important;
    height: 1.25rem !important;
    background: linear-gradient(to bottom, #e2e8f0, transparent) !important;
    margin: 0 auto !important;
    position: absolute !important;
    bottom: -1.25rem !important;
    left: 2rem !important;
}

/* Empty state spacing fix — override global padding:2rem to avoid double-padding with Bootstrap py-* */
.empty-state {
    padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHATBOT WIDGET — Full redesign 2026
   Replaces dark navy (#0f2554) with teal gradient brand theme.
   ═══════════════════════════════════════════════════════════════ */

/* ── Toggle button ─────────────────────────────────────────── */
.aurra-chatbot-toggle {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 28px rgba(13,148,136,0.35) !important;
    padding: 0.7rem 1.1rem 0.7rem 0.75rem !important;
    gap: 0.65rem !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.aurra-chatbot-toggle:hover,
.aurra-chatbot-toggle:focus-visible {
    background: linear-gradient(135deg, #0f9d91 0%, #0d8a80 100%) !important;
    box-shadow: 0 12px 36px rgba(13,148,136,0.45) !important;
    transform: translateY(-2px) !important;
}

/* Toggle icon bubble */
.aurra-chatbot-toggle-icon {
    background: rgba(255,255,255,0.2) !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    border-radius: 50% !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    min-width: 2.1rem !important;
}

/* Toggle text */
.aurra-chatbot-toggle-copy strong {
    font-size: 0.9rem !important;
    color: #ffffff !important;
}
.aurra-chatbot-toggle-copy small {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.72rem !important;
}

/* ── Panel ──────────────────────────────────────────────────── */
.aurra-chatbot-panel {
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(15,23,42,0.18), 0 4px 16px rgba(13,148,136,0.10) !important;
    border: 1px solid rgba(13,148,136,0.15) !important;
    overflow: hidden !important;
    width: 340px !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.aurra-chatbot-header {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    padding: 1rem 1rem 0.9rem !important;
    border-bottom: none !important;
}
.aurra-chatbot-header span {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-weight: 600 !important;
}
.aurra-chatbot-header strong {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

/* Avatar in header */
.aurra-chatbot-avatar {
    background: rgba(255,255,255,0.2) !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    border-radius: 50% !important;
}
.aurra-chatbot-avatar.is-small {
    background: #e6faf8 !important;
    border: 1.5px solid #99f6e4 !important;
}

/* Close button */
.aurra-chatbot-close {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
}
.aurra-chatbot-close:hover {
    background: rgba(255,255,255,0.28) !important;
}
.aurra-chatbot-close svg { stroke: #ffffff !important; }

/* ── Messages area ───────────────────────────────────────────── */
.aurra-chatbot-messages {
    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 100%) !important;
    padding: 1rem !important;
    gap: 0.6rem !important;
}

/* Bot bubble */
.aurra-chatbot-message.is-bot {
    background: #ffffff !important;
    border: 1px solid #d1faf5 !important;
    color: #0f172a !important;
    border-radius: 0 14px 14px 14px !important;
    box-shadow: 0 1px 4px rgba(13,148,136,0.08) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    padding: 0.65rem 0.85rem !important;
}

/* User bubble */
.aurra-chatbot-message.is-user {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    color: #ffffff !important;
    border-radius: 14px 14px 0 14px !important;
    box-shadow: 0 2px 8px rgba(13,148,136,0.25) !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.85rem !important;
}

/* ── Action buttons (inside bot messages) ───────────────────── */
.aurra-chatbot-actions {
    gap: 0.4rem !important;
    margin-top: 0.5rem !important;
}
.aurra-chatbot-actions a,
.aurra-chatbot-actions button {
    background: #f0fdfa !important;
    border: 1.5px solid #0d9488 !important;
    color: #0d9488 !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.aurra-chatbot-actions a:hover,
.aurra-chatbot-actions button:hover {
    background: #0d9488 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(13,148,136,0.28) !important;
}

/* ── Suggestions strip ───────────────────────────────────────── */
.aurra-chatbot-suggestions {
    background: #f8fffe !important;
    border-top: 1px solid #d1faf5 !important;
    padding: 0.6rem 0.75rem !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}
.aurra-chatbot-suggestions button {
    background: #ffffff !important;
    border: 1.5px solid #99f6e4 !important;
    color: #0f766e !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    transition: all 0.15s ease !important;
}
.aurra-chatbot-suggestions button:hover {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
}

/* ── Lead card ───────────────────────────────────────────────── */
.aurra-chatbot-lead-card {
    background: #f0fdfa !important;
    border: 1.5px solid #99f6e4 !important;
    border-radius: 12px !important;
    padding: 0.75rem 0.9rem !important;
}
.aurra-chatbot-lead-card strong {
    color: #0f766e !important;
    font-size: 0.78rem !important;
    display: block !important;
    margin-bottom: 0.4rem !important;
}
.aurra-chatbot-lead-card span {
    color: #0f172a !important;
    font-size: 0.77rem !important;
}

/* ── Input form ──────────────────────────────────────────────── */
.aurra-chatbot-form {
    border-top: 1px solid #d1faf5 !important;
    background: #ffffff !important;
    padding: 0.6rem 0.75rem !important;
    gap: 0.5rem !important;
}
.aurra-chatbot-form input {
    border: 1.5px solid #99f6e4 !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    padding: 0.45rem 0.9rem !important;
    background: #f0fdfa !important;
    color: #0f172a !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.aurra-chatbot-form input::placeholder { color: #94a3b8 !important; }
.aurra-chatbot-form input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
    outline: none !important;
    background: #ffffff !important;
}
.aurra-chatbot-form button {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    box-shadow: 0 2px 8px rgba(13,148,136,0.3) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.aurra-chatbot-form button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 14px rgba(13,148,136,0.4) !important;
}
.aurra-chatbot-form button svg { stroke: #ffffff !important; }

/* ── Typing indicator ────────────────────────────────────────── */
.aurra-chatbot-typing {
    background: #d1faf5 !important;
}

/* ── PHASE 11: COMPACT METRIC CARDS + STATUS COLOR VARIANTS ─── */

/* Compact variant — smaller padding & value text */
.metric-card.compact {
    padding: 0.7rem 1rem !important;
}
.metric-card.compact .metric-value,
.metric-card.compact strong.metric-value {
    font-size: 1.3rem !important;
    letter-spacing: -0.02em !important;
}
.metric-card.compact .metric-label {
    font-size: 0.68rem !important;
    margin-bottom: 0.15rem !important;
}

/* Danger / red */
.metric-card.metric-danger {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
}
.metric-card.metric-danger .metric-value,
.metric-card.metric-danger strong.metric-value { color: #b91c1c !important; }

/* Warning / amber */
.metric-card.metric-warning {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}
.metric-card.metric-warning .metric-value,
.metric-card.metric-warning strong.metric-value { color: #92400e !important; }

/* Success / green */
.metric-card.metric-success {
    border-left: 4px solid #22c55e !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}
.metric-card.metric-success .metric-value,
.metric-card.metric-success strong.metric-value { color: #15803d !important; }


/* ══════════════════════════════════════════════════════════════════════════
   PHASE 12 — DEMO PAGE (marketing/demo.html) — aurra-demo-* components
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.aurra-demo-hero {
    background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 50%, #f0f9ff 100%);
    border-bottom: 1px solid #d1fae5;
    padding: 3.5rem 0 2.5rem;
}
.aurra-demo-hero-inner { max-width: 680px; }

.aurra-demo-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0f7a45;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    margin-bottom: 1rem;
}

.aurra-demo-title {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    color: #0f172a;
    letter-spacing: -0.03em;
    margin-bottom: 0.85rem;
}

.aurra-demo-sub {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 580px;
}

/* Feature pills */
.aurra-demo-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.aurra-demo-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e3a5f;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    white-space: nowrap;
}

/* Stats strip — only shown when use_real_stats=True */
.aurra-demo-stats-strip {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 14px;
    padding: 0.9rem 1.5rem;
    width: fit-content;
    flex-wrap: wrap;
}
.aurra-demo-stat { display: flex; flex-direction: column; align-items: center; padding: 0 1.25rem; }
.aurra-demo-stat strong {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f7a45;
    letter-spacing: -0.03em;
    line-height: 1;
}
.aurra-demo-stat span { font-size: 0.72rem; color: #64748b; font-weight: 500; margin-top: 0.2rem; white-space: nowrap; }
.aurra-demo-stat-divider { width: 1px; height: 2.2rem; background: #d1fae5; flex-shrink: 0; }

/* Main body */
.aurra-demo-body { padding: 2.75rem 0 3.5rem; background: #f8fafc; }

/* Two-column grid */
.aurra-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 900px) {
    .aurra-demo-grid { grid-template-columns: 1fr; }
}

/* Left info card */
.aurra-demo-info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(15,122,69,.06);
}
.aurra-demo-info-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.9rem;
}

/* Feature list */
.aurra-demo-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.aurra-demo-feature-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
.aurra-demo-feat-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f7a45;
    margin-top: 0.1rem;
}
.aurra-demo-feat-icon svg { width: 18px; height: 18px; }
.aurra-demo-feature-list li > div strong { display: block; font-size: 0.9rem; font-weight: 700; color: #0f172a; margin-bottom: 0.15rem; }
.aurra-demo-feature-list li > div p { font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.5; }

/* Module chips */
.aurra-demo-module-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.aurra-demo-module-chips span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f8a84;
    background: #f0fdf9;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 0.25rem 0.65rem;
}

/* CTA box */
.aurra-demo-cta-box { border-top: 1px solid #e2e8f0; padding-top: 1.25rem; margin-top: 1.25rem; }
.aurra-demo-cta-box > p { font-size: 0.85rem; color: #475569; margin-bottom: 0.75rem; line-height: 1.5; }
.aurra-demo-cta-note { font-size: 0.73rem; color: #94a3b8; text-align: center; margin-top: 0.5rem; margin-bottom: 0; }

/* Right: role selector heading */
.aurra-demo-role-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 1rem;
}
.aurra-demo-role-cards { display: flex; flex-direction: column; gap: 1.1rem; }

/* Role card */
.aurra-demo-role-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    transition: box-shadow .2s, border-color .2s;
    cursor: pointer;
    display: block;
}
.aurra-demo-role-card:hover { box-shadow: 0 6px 24px rgba(15,122,69,.1); border-color: #6ee7b7; }
.aurra-demo-role-principal { border-top: 3px solid #0f7a45; }
.aurra-demo-role-teacher { border-top: 3px solid #2563eb; }

/* Role card top row */
.aurra-demo-role-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.aurra-demo-role-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aurra-demo-role-icon-teal { background: #d1fae5; color: #0f7a45; border: 1px solid #6ee7b7; }
.aurra-demo-role-icon-blue { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.aurra-demo-role-icon-purple { background: #ede9fe; color: #7c3aed; border: 1px solid #c4b5fd; }
.aurra-demo-role-name { font-size: 1rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.aurra-demo-role-type { font-size: 0.75rem; color: #64748b; font-weight: 500; margin-top: 0.1rem; }

/* Role preview bullets */
.aurra-demo-role-bullets { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.aurra-demo-role-bullets li { font-size: 0.8rem; color: #475569; padding-left: 0.9rem; position: relative; line-height: 1.4; }
.aurra-demo-role-bullets li::before { content: '\B7'; position: absolute; left: 0; color: #94a3b8; font-weight: 700; }

/* Credential rows */
.aurra-demo-creds {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.aurra-demo-cred-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.aurra-demo-cred-row > span { color: #94a3b8; font-weight: 500; min-width: 55px; flex-shrink: 0; }
.aurra-demo-cred-row code { font-family: SFMono-Regular,Consolas,monospace; font-size: 0.82rem; font-weight: 700; color: #0f172a; background: transparent; flex: 1; }

/* Copy button */
.aurra-copy-btn {
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 5px;
    line-height: 1;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.aurra-copy-btn:hover { color: #0f7a45; background: #f0fdf4; }

/* Launch button */
.aurra-demo-launch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: filter .2s, box-shadow .2s;
    letter-spacing: -0.01em;
}
.aurra-demo-launch-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.aurra-demo-launch-teal { background: linear-gradient(135deg, #0f7a45, #1f8a84); color: #fff; }
.aurra-demo-launch-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }

/* Disclaimer */
.aurra-demo-disclaimer { font-size: 0.78rem; color: #94a3b8; text-align: center; margin-top: 1.1rem; line-height: 1.55; }
.aurra-demo-disclaimer a { color: #0f7a45; text-decoration: underline; text-underline-offset: 2px; }

/* Responsive */
@media (max-width: 640px) {
    .aurra-demo-hero { padding: 2.25rem 0 1.75rem; }
    .aurra-demo-stats-strip { padding: 0.7rem 0.75rem; }
    .aurra-demo-stat { padding: 0 0.6rem; }
    .aurra-demo-stat strong { font-size: 1.15rem; }
    .aurra-demo-info-card { padding: 1.25rem; }
    .aurra-demo-role-card { padding: 1.1rem 1.1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PHASE 13 — GLOBAL UTILITY GAPS: badge subtles · dashboard widgets ·
   ops metrics · step-71 panels · portal shell · review/QA · role cards
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Badge subtle variants ─────────────────────────────────────────────── */
.aurra-badge-success-subtle {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.aurra-badge-danger-subtle {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}
.aurra-badge-warning-subtle {
    background: #fef9c3;
    color: #854d0e;
    border-color: #fde047;
}
.aurra-badge-neutral-subtle {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.aurra-badge-teal {
    background: #ccfbf1;
    color: #0f766e;
    border-color: #5eead4;
}

/* ── Dashboard widget cards ────────────────────────────────────────────── */
.aurra-widget-card {
    /* inherits panel-card; just ensures consistent inner layout */
    display: flex;
    flex-direction: column;
}

.aurra-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.aurra-widget-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

/* ── Donut chart caption + legend ──────────────────────────────────────── */
.aurra-donut-caption {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.65rem;
    letter-spacing: .03em;
}

.aurra-legend-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    text-decoration: none;
    color: #334155;
    font-size: 0.8rem;
    border-radius: 6px;
    transition: background .15s;
}
.aurra-legend-row:hover { background: #f1f5f9; color: #0f172a; }

.aurra-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aurra-legend-dot-present,
.aurra-legend-dot-green   { background: #22c55e; }
.aurra-legend-dot-absent,
.aurra-legend-dot-red     { background: #ef4444; }
.aurra-legend-dot-leave,
.aurra-legend-dot-amber,
.aurra-legend-dot-warning { background: #f59e0b; }
.aurra-legend-dot-blue    { background: #3b82f6; }
.aurra-legend-dot-teal    { background: #14b8a6; }
.aurra-legend-dot-purple  { background: #a855f7; }
.aurra-legend-dot-neutral,
.aurra-legend-dot-gray    { background: #94a3b8; }

.aurra-legend-label {
    flex: 1;
    font-size: 0.78rem;
    color: #475569;
}

.aurra-legend-bar {
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    width: 80px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.aurra-legend-bar::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--bar-value, 0%);
    background: currentColor;
    border-radius: 3px;
    transition: width .4s ease;
}
.aurra-legend-row:nth-child(1) .aurra-legend-bar::after { background: #22c55e; }
.aurra-legend-row:nth-child(2) .aurra-legend-bar::after { background: #ef4444; }
.aurra-legend-row:nth-child(3) .aurra-legend-bar::after { background: #f59e0b; }

/* ── Table utility cells ───────────────────────────────────────────────── */
.aurra-table-date {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    font-weight: 500;
}

.aurra-table-detail {
    font-size: 0.82rem;
    color: #64748b;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Kebab (three-dot) dropdown button ────────────────────────────────── */
.aurra-kebab-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 6px;
    line-height: 1;
    transition: color .15s, background .15s;
    display: inline-flex;
    align-items: center;
}
.aurra-kebab-btn:hover { color: #475569; background: #f1f5f9; }
.aurra-kebab-btn::after {
    content: '⋮';
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* ── Ops metric grid (billing, LMS, control center) ────────────────────── */
.aurra-ops-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.aurra-ops-metric {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.aurra-ops-metric span  { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #64748b; }
.aurra-ops-metric strong{ font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #0f172a; }
.aurra-ops-metric small { font-size: 0.72rem; color: #94a3b8; }

.aurra-ops-metric.is-success { border-left-color: #22c55e; background: linear-gradient(135deg,#f0fdf4,#dcfce7); }
.aurra-ops-metric.is-success strong { color: #15803d; }
.aurra-ops-metric.is-info    { border-left-color: #3b82f6; background: linear-gradient(135deg,#eff6ff,#dbeafe); }
.aurra-ops-metric.is-info strong    { color: #1d4ed8; }
.aurra-ops-metric.is-warning { border-left-color: #f59e0b; background: linear-gradient(135deg,#fffbeb,#fef3c7); }
.aurra-ops-metric.is-warning strong { color: #92400e; }
.aurra-ops-metric.is-danger  { border-left-color: #ef4444; background: linear-gradient(135deg,#fff1f2,#fee2e2); }
.aurra-ops-metric.is-danger strong  { color: #b91c1c; }
.aurra-ops-metric.is-teal    { border-left-color: #14b8a6; background: linear-gradient(135deg,#f0fdfa,#ccfbf1); }
.aurra-ops-metric.is-teal strong    { color: #0f766e; }

.aurra-ops-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 860px) { .aurra-ops-grid { grid-template-columns: 1fr; } }

.aurra-ops-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    color: #334155;
}
.aurra-ops-action:last-child { border-bottom: none; }
.aurra-ops-action strong { font-weight: 600; color: #0f172a; display: block; }
.aurra-ops-action small  { color: #94a3b8; font-size: 0.75rem; }

/* ── Step-71 generic panel tokens ──────────────────────────────────────── */
/* These are semantic aliases over panel-card; add accent spacing */
.aurra-step71-panel { /* already inherits panel-card styling */ }
.aurra-step71-table-card { /* inherits panel-card table-card */ }

.aurra-step71-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.aurra-step71-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 860px) { .aurra-step71-grid { grid-template-columns: 1fr; } }

.aurra-step71-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* ── Portal shell (parent / teacher / student portals) ─────────────────── */
.aurra-parent-portal,
.aurra-step70-portal-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 100%;
}

.aurra-portal-workbench {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aurra-parent-mobile-nav,
.aurra-step70-portal-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.aurra-parent-mobile-nav::-webkit-scrollbar,
.aurra-step70-portal-nav::-webkit-scrollbar { display: none; }
.aurra-parent-mobile-nav a,
.aurra-step70-portal-nav a {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.aurra-parent-mobile-nav a:hover,
.aurra-step70-portal-nav a:hover,
.aurra-parent-mobile-nav a.active,
.aurra-step70-portal-nav a.active {
    background: #0f7a45;
    color: #fff;
    border-color: #0f7a45;
}

.aurra-step70-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}

.aurra-step70-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.aurra-step70-table-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* ── Review / QA checklists (local_review, mobile_qa, biometric) ───────── */
.aurra-local-review-rail-label,
.aurra-local-review-rail-note {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.aurra-local-review-rail-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: #64748b; font-size: 0.75rem; }

.aurra-review-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.aurra-review-track {
    /* inherits content-card */
    border-top: 3px solid #0f7a45;
}

.aurra-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.aurra-review-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: #334155;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.aurra-review-item:last-child { border-bottom: none; }

.aurra-signoff-list {
    list-style: decimal;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #475569;
}
.aurra-signoff-list li { padding: 0.2rem 0; }

/* ── Role grid (settings/role_audit.html + users/index.html) ───────────── */
.aurra-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.aurra-role-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    transition: box-shadow .2s, border-color .2s;
}
.aurra-role-card:hover { box-shadow: 0 4px 16px rgba(15,122,69,.08); border-color: #6ee7b7; }
.aurra-role-card strong { display: block; font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.3rem; }
.aurra-role-card p { font-size: 0.8rem; color: #64748b; margin: 0; line-height: 1.5; }

/* ── Admin grade portal token (shared by parent/student/staff home) ─────── */
.aurra-admin-grade-portal { /* layout wrapper — no extra style needed beyond portal-shell */ }

/* Portal body aliases (parent / staff / student) */
.aurra-portal-parent,
.aurra-portal-staff,
.aurra-portal-student { /* inherits aurra-parent-portal */ }

/* ── Demo page column stubs ────────────────────────────────────────────── */
.aurra-demo-left  { min-width: 0; }
.aurra-demo-right { min-width: 0; }
.aurra-demo-banner {
    background: linear-gradient(90deg,#d1fae5,#f0fdf9);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 0.9rem 1.25rem;
    font-size: 0.85rem;
    color: #065f46;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* ── Metric body (used inside metric-card) ─────────────────────────────── */
.aurra-metric-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

/* ── Page header main (hero text block inside aurra-page-header) ────────── */
.aurra-page-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── WhatsApp queue metrics strip ──────────────────────────────────────── */
.aurra-wa-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ── PG-12 academic level grid (dashboard) ─────────────────────────────── */
.aurra-pg12-panel { /* inherits panel-card + widget-card */ }

.aurra-pg12-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.aurra-pg12-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
    cursor: pointer;
}
.aurra-pg12-card:hover {
    background: #f0fdf4;
    border-color: #6ee7b7;
    transform: translateY(-1px);
    text-decoration: none;
}

.aurra-pg12-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    line-height: 1.2;
}

.aurra-pg12-count {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Mini-ledger tiles (dashboard) ─────────────────────────────────────── */
.aurra-ledger-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.aurra-ledger-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.aurra-ledger-tile:hover { background: #f0fdf4; border-color: #6ee7b7; text-decoration: none; }
.aurra-ledger-tile strong { font-size: 1rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.aurra-ledger-tile span   { font-size: 0.7rem; color: #64748b; font-weight: 500; }

.aurra-ledger-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

/* ── Fast-access workspace shortcut tiles (dashboard) ──────────────────── */
.aurra-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.aurra-shortcut-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0.4rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    font-size: 0.7rem;
    font-weight: 600;
    color: #334155;
    text-align: center;
    line-height: 1.3;
}
.aurra-shortcut-tile:hover {
    background: #f0fdf4;
    border-color: #6ee7b7;
    color: #0f7a45;
    transform: translateY(-2px);
    text-decoration: none;
}
.aurra-shortcut-tile.is-locked {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
.aurra-shortcut-tile.is-locked:hover { transform: none; background: #f8fafc; border-color: #e2e8f0; }

.aurra-shortcut-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f7a45;
    flex-shrink: 0;
}
.aurra-shortcut-icon svg { width: 18px; height: 18px; }

/* ── Print utility classes ─────────────────────────────────────────────── */
@media print {
    .aurra-print-actions { display: none !important; }
}
.aurra-print-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.aurra-print-receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.aurra-print-report-card {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* ── Activity table wrapper ─────────────────────────────────────────────── */
.aurra-activity-table-wrap {
    overflow-x: auto;
    border-radius: 0 0 12px 12px;
}

/* ── Health card (hostel/transport) ─────────────────────────────────────── */
.aurra-health-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Student submission cells ───────────────────────────────────────────── */
.aurra-student-submission-cell {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
}

.aurra-student-submission-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Page-specific step alias stubs ────────────────────────────────────────
   These are semantic markers always paired with panel-card / table-card /
   content-card siblings. No extra layout needed; stubs prevent linting noise.
   ───────────────────────────────────────────────────────────────────────── */
.aurra-step64-table-card,
.aurra-step64-tabs,
.aurra-step65-alert-row,
.aurra-step65-defaulter-filter,
.aurra-step65-fee-table,
.aurra-step65-fee-table-card,
.aurra-step65-finance-panel,
.aurra-step65-ledger-summary,
.aurra-step65-metric-row,
.aurra-step65-receipt-card,
.aurra-step65-receipt-grid,
.aurra-step66-biometric-card,
.aurra-step66-biometric-table,
.aurra-step66-camera-card,
.aurra-step66-face-grid,
.aurra-step66-saved-summary,
.aurra-step66-tabs,
.aurra-step67-account-entry,
.aurra-step67-form-panel,
.aurra-step67-hr-workflow,
.aurra-step67-panel,
.aurra-step67-slip-card,
.aurra-step67-summary-card,
.aurra-step67-table-card,
.aurra-step68-academic-hero,
.aurra-step68-academic-strip,
.aurra-step68-exam-shell,
.aurra-step68-level-grid,
.aurra-step68-metric-row,
.aurra-step68-panel,
.aurra-step68-report-tabs,
.aurra-step68-subtabs,
.aurra-step68-table-card,
.aurra-step68-tabs,
.aurra-step69-document-panel,
.aurra-step69-filter-panel,
.aurra-step69-form-grid,
.aurra-step69-panel,
.aurra-step69-register-grid,
.aurra-step69-table-card,
.aurra-step70-lms-grid,
.aurra-step70-lms-metrics,
.aurra-step70-lms-panel,
.aurra-step71-settings-panel { /* semantic alias — inherits from co-applied base class */ }

/* ── Attendance page layout aliases ──────────────────────────────────────── */
.aurra-attendance-layout,
.aurra-attendance-breakdown { display: flex; flex-direction: column; gap: 1rem; }
.aurra-attendance-donut-wrap { display: flex; align-items: center; justify-content: center; }
.aurra-attendance-rail-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem; }
.aurra-attendance-rail-note  { font-size: 0.75rem; color: #64748b; margin-bottom: 0.5rem; }

/* ── Communications page aliases ─────────────────────────────────────────── */
.aurra-communications-composer { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem; }
.aurra-communications-preview  { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem; font-size: 0.82rem; color: #475569; white-space: pre-wrap; }
.aurra-communications-rail-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem; }
.aurra-communications-rail-note  { font-size: 0.75rem; color: #64748b; }

/* ── ERP panel aliases ───────────────────────────────────────────────────── */
.aurra-erp-panel      { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.aurra-erp-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.aurra-erp-panel-head { padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; font-weight: 700; font-size: 0.9rem; color: #0f172a; }
.aurra-erp-class-table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.aurra-erp-class-table { width: 100%; }
.aurra-erp-admission-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Chatbot / landing page aliases ──────────────────────────────────────── */
.aurra-landing-chatbot { /* positioned chatbot widget shell — positioned by parent */ }
.aurra-chatbot-header-main { display: flex; align-items: center; gap: 0.75rem; }
.aurra-message-row { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; align-items: flex-end; }

/* ── PHASE 11: COMPACT METRIC CARDS + STATUS COLOR VARIANTS ─────────────── */

/* Compact variant — smaller padding & value text */
.metric-card.compact {
    padding: 0.7rem 1rem !important;
}
.metric-card.compact .metric-value,
.metric-card.compact strong.metric-value {
    font-size: 1.3rem !important;
    letter-spacing: -0.02em !important;
}
.metric-card.compact .metric-label {
    font-size: 0.68rem !important;
    margin-bottom: 0.15rem !important;
}

/* Danger / red */
.metric-card.metric-danger {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
}
.metric-card.metric-danger .metric-value,
.metric-card.metric-danger strong.metric-value { color: #b91c1c !important; }

/* Warning / amber */
.metric-card.metric-warning {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}
.metric-card.metric-warning .metric-value,
.metric-card.metric-warning strong.metric-value { color: #92400e !important; }

/* Success / green */
.metric-card.metric-success {
    border-left: 4px solid #22c55e !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}
.metric-card.metric-success .metric-value,
.metric-card.metric-success strong.metric-value { color: #15803d !important; }

/* ── MOBILE SIDEBAR FIX (Phase 11 patch) ────────────────────────────────── */
/* Phase 10 added display:flex !important to .sidebar which overrides
   Bootstrap's d-none on mobile. Re-hide desktop sidebar on mobile. */
@media (max-width: 991.98px) {
    .sidebar {
        display: none !important;
    }
}

/* ── PHASE 12: BILLING PAYMENT FORM ────────────────────────────────────── */

/* Payment method radio cards */
.aurra-pay-method-card { min-width: 80px; }
.aurra-pay-method-inner {
    border-color: #e2e8f0 !important;
    background: #fff;
    user-select: none;
}
.aurra-pay-method-card:has(.aurra-pay-radio:checked) .aurra-pay-method-inner {
    border-color: #0d9488 !important;
    background: #f0fdfa !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,.18);
}
.aurra-pay-method-inner:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

/* Copy button feedback */
.aurra-copy-btn.copied {
    color: #15803d !important;
    border-color: #22c55e !important;
}

/* ── PHASE 11: COMPACT METRIC CARDS + STATUS COLOR VARIANTS ─────────────── */

/* Compact variant — smaller padding & value text */
.metric-card.compact {
    padding: 0.7rem 1rem !important;
}
.metric-card.compact .metric-value,
.metric-card.compact strong.metric-value {
    font-size: 1.3rem !important;
    letter-spacing: -0.02em !important;
}
.metric-card.compact .metric-label {
    font-size: 0.68rem !important;
    margin-bottom: 0.15rem !important;
}

/* Danger / red */
.metric-card.metric-danger {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
}
.metric-card.metric-danger .metric-value,
.metric-card.metric-danger strong.metric-value { color: #b91c1c !important; }

/* Warning / amber */
.metric-card.metric-warning {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}
.metric-card.metric-warning .metric-value,
.metric-card.metric-warning strong.metric-value { color: #92400e !important; }

/* Success / green */
.metric-card.metric-success {
    border-left: 4px solid #22c55e !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}
.metric-card.metric-success .metric-value,
.metric-card.metric-success strong.metric-value { color: #15803d !important; }

/* ── PHASE 11b: INSTANT PHOTO UPLOAD STATES ─────────────────── */
[data-photo-dropzone].is-uploading {
    opacity: 0.65;
    pointer-events: none;
    cursor: wait;
}
[data-photo-dropzone].is-uploading [data-photo-preview-box],
[data-photo-dropzone].is-uploading .passport-photo-box {
    animation: aurra-pulse 1s ease-in-out infinite;
}
@keyframes aurra-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}