/* =====================================================================
 * StepUp Academy ERP — application theme (Bootstrap 5.3 companion)
 * Sidebar shell · tables · forms · badges · empty/loading states
 * ===================================================================== */

:root {
  /* ===== StepUp Academy — Core brand palette ===== */
  /* Primary navy/indigo */
  --sua-primary: #132a4c;
  --sua-primary-2: #1a3c66;
  --sua-primary-3: #254c7e;
  --sua-primary-light: #e7eef8;

  /* Accent (calm deep magenta-magenta accent for CTAs) */
  --sua-accent: #1670f5;
  --sua-accent-2: #0d5ed7;
  --sua-accent-light: #e7f0ff;

  /* Secondary / actionable teal */
  --sua-teal: #0f8b8d;
  --sua-teal-light: #e3f4f4;

  /* Gradients for expressive cards */
  --g-grad-a: linear-gradient(135deg, #132a4c 0%, #1a4a86 100%);
  --g-grad-b: linear-gradient(135deg, #1a4a86 0%, #2c6fd9 100%);
  --g-grad-c: linear-gradient(135deg, #2c6fd9 0%, #6ec0ff 100%);
  --g-grad-d: linear-gradient(135deg, #0f8b8d 0%, #36b9ba 100%);
  --g-grad-e: linear-gradient(135deg, #ff9a56 0%, #ffc75c 100%);
  --g-grad-f: linear-gradient(135deg, #e84a6f 0%, #ff7b9c 100%);
  --g-grad-g: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);

  /* Surfaces */
  --sua-bg: #f3f7fc;
  --sua-surface: #ffffff;
  --sua-card: #ffffff;
  --sua-sidebar-bg: linear-gradient(180deg, #10284b 0%, #0b2141 100%);
  --sua-sidebar-w: 264px;
  --sua-sidebar-mini-w: 70px;

  /* Text */
  --sua-text: #10264a;
  --sua-text-muted: #617795;
  --sua-border: #e1eaf5;
  --sua-border-strong: #cbd8e9;

  /* Semantic */
  --sua-success: #0d8a69;
  --sua-success-light: #e3f5ef;
  --sua-warning: #d0830f;
  --sua-warning-light: #fdf0d6;
  --sua-danger: #c0392b;
  --sua-danger-light: #fbe1dd;
  --sua-info: #1a4a86;
  --sua-info-light: #e7eef8;

  /* Radius / shadow */
  --sua-radius: 12px;
  --sua-radius-sm: 8px;
  --sua-radius-lg: 18px;
  --sua-shadow-sm: 0 1px 3px rgba(19,42,76,.06), 0 1px 2px rgba(19,42,76,.04);
  --sua-shadow: 0 6px 18px rgba(19,42,76,.08);
  --sua-shadow-lg: 0 12px 32px rgba(19,42,76,.14);

  /* Sidebar width */
  --sua-meta: var(--sua-sidebar-w, 264px);
}

body { background: var(--sua-bg); color: var(--sua-text); min-height: 100vh; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 { color: var(--sua-text); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }
.text-balance { text-wrap: balance; }
.text-shadow-soft { text-shadow: 0 1px 2px rgba(19,42,76,.08); }

/* ===== Links ===== */
a { color: var(--sua-primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
a.text-accent { color: var(--sua-accent); }
a.text-accent:hover { color: var(--sua-accent-2); }

/* ===== Utility ===== */
.shadow-card { box-shadow: var(--sua-shadow); }
.shadow-card-lg { box-shadow: var(--sua-shadow-lg); }
.border-soft { border-color: var(--sua-border) !important; }
.radius-card { border-radius: var(--sua-radius); }
.radius-lg { border-radius: var(--sua-radius-lg); }
.radius-sm { border-radius: var(--sua-radius-sm); }
.background-surface { background-color: var(--sua-surface); }
.text-muted { color: var(--sua-text-muted) !important; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Sidebar ---------- */
.sua-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sua-sidebar-w);
  background: var(--sua-sidebar-bg);
  color: #eef3fb; overflow-y: auto; z-index: 1030;
  transition: width .2s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sua-sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.1rem; color: #fff; font-weight: 700; font-size: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sua-sidebar .brand .brand-mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--sua-accent);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.sua-sidebar .nav-group-title {
  padding: .9rem .8rem .3rem; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  font-weight: 600;
}
.sua-sidebar .nav-link-sua {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .9rem;
  color: rgba(255,255,255,.82); border-radius: 10px; font-size: .92rem;
  border-left: 3px solid transparent;
  position: relative;
}
.sua-sidebar .nav-link-sua:hover {
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none;
  transform: translateX(2px);
}
.sua-sidebar .nav-link-sua.active {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-left-color: var(--sua-accent);
  font-weight: 600;
}
.sua-sidebar .nav-link-sua.active::after {
  content: '';
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 18px; background: var(--sua-accent);
  border-radius: 4px;
}
.sua-sidebar .nav-link-sua i {
  font-size: 1.1rem; width: 1.35rem; text-align: center;
  color: var(--sua-accent);
}
.sua-sidebar .nav-link-sua.active i { color: #fff; }

/* mini sidebar (desktop collapse) */
body.sua-mini .sua-sidebar { width: var(--sua-sidebar-mini-w); }
body.sua-mini .sua-sidebar .nav-label,
body.sua-mini .sua-sidebar .nav-group-title,
body.sua-mini .sua-sidebar .brand-text,
body.sua-mini .sua-sidebar .sidebar-search { display: none; }
body.sua-mini .sua-sidebar .nav-link-sua { justify-content: center; padding: .6rem 0; }
body.sua-mini .sua-main { margin-left: var(--sua-sidebar-mini-w); }
body.sua-mini .sua-topbar { left: var(--sua-sidebar-mini-w); }

.sua-main { margin-left: var(--sua-sidebar-w); transition: margin-left .2s ease; min-height: 100vh; }
.sua-topbar {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sua-border);
  padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  box-shadow: var(--sua-shadow-sm);
}
.sua-content { padding: 1.25rem; max-width: 1600px; }

/* ===== Data table scope (header + toolbar + body) ===== */
.data-table {
  border: 1px solid var(--sua-border);
  border-radius: var(--sua-radius);
  background: var(--sua-card);
  box-shadow: var(--sua-shadow-sm);
  overflow: hidden;
}
.data-table th, .data-table td { padding: .75rem .8rem; }
.data-table thead th {
  background: var(--sua-primary-light); color: var(--sua-primary);
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
  border-bottom: 1px solid var(--sua-border-strong);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--sua-border);
  transition: background .12s ease;
}
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: #f6f9fd; }
.data-table-striped tbody tr:nth-child(even) { background: rgba(19,42,76,.025); }
.data-table-striped tbody tr:hover { background: var(--sua-primary-light); }

/* ===== Search bar (global / table search) ===== */
.search-input {
  background: var(--sua-card); border: 1px solid var(--sua-border-strong);
  border-radius: 10px; padding: .45rem .75rem; width: 100%; max-width: 280px;
  box-shadow: var(--sua-shadow-sm); transition: box-shadow .15s, border-color .15s;
}
.search-input:focus {
  border-color: var(--sua-primary); box-shadow: 0 0 0 .2rem rgba(19,42,76,.1);
  outline: 0;
}
.search-input::placeholder { color: var(--sua-text-muted); }

/* ===== Empty state ===== */
.empty-state-card {
  background: var(--sua-card); border: 1px dashed var(--sua-border-strong);
  border-radius: var(--sua-radius); padding: 2.5rem 1rem; text-align: center;
  color: var(--sua-text-muted);
}
.empty-state-card i { font-size: 2.6rem; opacity: .4; margin-bottom: .5rem; }

/* ===== Intro text block (page lead paragraph) ===== */
.lead-block { font-size: 1.05rem; color: var(--sua-text); font-weight: 400; line-height: 1.6; }

.sua-page-title { font-size: 1.25rem; font-weight: 700; color: var(--sua-text); margin: 0; }

.sidebar-search input {
  width: calc(100% - 2rem); margin: .6rem 1rem; padding: .4rem .7rem;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; font-size: .85rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
.sidebar-search input::placeholder { color: rgba(255,255,255,.6); }

@media (max-width: 991.98px) {
  .sua-sidebar { transform: translateX(-100%); width: var(--sua-sidebar-w) !important; }
  .sua-sidebar.show { transform: translateX(0); }
  .sua-main { margin-left: 0 !important; }
  body.sua-mini .sua-sidebar .nav-label,
  body.sua-mini .sua-sidebar .nav-group-title,
  body.sua-mini .sua-sidebar .brand-text,
  body.sua-mini .sua-sidebar .sidebar-search { display: initial; }
  .sua-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1025; }
}

/* ---------- Cards / stats ---------- */
.sua-card {
  background: var(--sua-card);
  border: 1px solid var(--sua-border);
  border-radius: var(--sua-radius);
  box-shadow: var(--sua-shadow-sm);
  transition: box-shadow .18s ease;
}
.sua-card:hover { box-shadow: var(--sua-shadow); }
.sua-card .card-header { background: transparent; border-bottom: 1px solid var(--sua-border); font-weight: 600; }

/* Stat-card (kpi widget) */
.stat-card {
  border-radius: var(--sua-radius);
  border: 0;
  box-shadow: var(--sua-shadow);
  overflow: hidden;
}
.stat-card .stat-icon {
  width: 54px; height: 54px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
}
.stat-card .stat-value { font-size: 1.55rem; font-weight: 800; color: var(--sua-text); }

/* ---------- Tables ---------- */
.table-sua thead th {
  background: var(--sua-primary-light); color: var(--sua-primary); font-weight: 700;
  font-size: .84rem; letter-spacing: .01em; white-space: nowrap;
  border-bottom: 2px solid var(--sua-border-strong) !important;
  padding: .85rem .7rem;
}
.table-sua td { vertical-align: middle; font-size: .92rem; padding: .7rem .7rem; }
.table-sua tbody tr:hover { background: var(--sua-primary-light); }
.table-sua tbody tr:hover td { color: var(--sua-text); }
.table-responsive-wrap {
  border: 1px solid var(--sua-border); border-radius: var(--sua-radius);
  background: var(--sua-surface); overflow: hidden;
  box-shadow: var(--sua-shadow-sm);
}
.table-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .7rem .8rem; border-bottom: 1px solid var(--sua-border); background: var(--sua-surface);
}
.table-toolbar .form-control, .table-toolbar .form-select { max-width: 260px; }

/* ---------- Forms ---------- */
.form-section-title {
  font-size: .95rem; font-weight: 700; color: var(--sua-primary); margin: 1.1rem 0 .5rem;
  display: flex; align-items: center; gap: .4rem;
}
.required-mark { color: var(--sua-danger); }
.input-group-text { background: #f2f6fb; border: 1px solid var(--sua-border); }

.form-label { font-weight: 500; font-size: .85rem; color: var(--sua-text); }
.form-check-input { border-color: var(--sua-border-strong); }
.form-check-input:checked { background-color: var(--sua-primary); border-color: var(--sua-primary); }

/* ---------- Badges & misc ---------- */
.badge-soft { font-weight: 600; padding: .38em .75em; }
.qr-wrap { text-align: center; }
.qr-box { display: inline-block; background: var(--sua-surface); padding: 4px; border-radius: 6px; }
.qr-caption { display: block; font-size: .68rem; color: var(--sua-text-muted); }
.inst-logo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sua-primary); color: #fff; font-weight: 800; border-radius: 10px;
  width: 48px; height: 48px;
}

/* ---------- States ---------- */
.empty-state { text-align: center; color: var(--sua-text-muted); padding: 2.5rem 1rem; }
.empty-state i { font-size: 2.4rem; opacity: .5; }
.loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.6);
  z-index: 2000; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.loading-overlay.show { display: flex; }

/* ---------- Buttons (custom) ---------- */
.btn-primary { background: var(--sua-accent); border-color: var(--sua-accent); color: #fff; }
.btn-primary:hover { background: var(--sua-accent-2); border-color: var(--sua-accent-2); color: #fff; }
.btn-outline-primary { border-color: var(--sua-primary); color: var(--sua-primary); }
.btn-outline-primary:hover { background: var(--sua-primary); border-color: var(--sua-primary); color: #fff; }
.btn-outline-accent { border-color: var(--sua-accent); color: var(--sua-accent); }
.btn-outline-accent:hover { background: var(--sua-accent); border-color: var(--sua-accent); color: #fff; }

/* ---------- Notifications / flash ---------- */
.sua-flash { position: fixed; top: 12px; right: 12px; z-index: 2050; min-width: 260px; max-width: 380px; }

/* ---------- Login / auth ---------- */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d3b66 0%, #14508c 60%, #1c6bb5 100%); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; box-shadow: 0 18px 60px rgba(3,20,38,.35); }
.demo-box { background: #fff8e8; border: 1px dashed #e0b253; border-radius: 10px; }

/* ---------- Public portal ---------- */
.public-nav {
  background: rgba(255,255,255,.98); backdrop-filter: blur(6px);
  box-shadow: var(--sua-shadow-sm);
  border-bottom: 1px solid var(--sua-border);
}
.public-hero {
  background: linear-gradient(135deg, #132a4c 0%, #1a4a86 55%, #2c6fd9 100%);
  background-size: cover; background-position: center; color: #fff;
  position: relative; min-height: 380px; display: flex; align-items: center;
  overflow: hidden;
}
.public-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 15%, rgba(255,215,100,.25), transparent 55%),
              radial-gradient(circle at 85% 85%, rgba(124,58,237,.22), transparent 45%);
  pointer-events: none;
}
.public-hero .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) { .public-hero { padding-top: 3.2rem; padding-bottom: 3.2rem; } }
.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040; width: 56px; height: 56px;
  border-radius: 50%; background: var(--g-grad-e); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.7rem; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.tier-card {
  border: 0; border-radius: var(--sua-radius); box-shadow: var(--sua-shadow);
  height: 100%; background: rgba(255,255,255,.96);
}
.tier-card .tier-num {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--g-grad-a); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Dark mode ---------- */
[data-bs-theme="dark"] {
  --sua-bg: #111216;
  --sua-surface: #181a1e;
  --sua-primary: #7eb8e8;
  --sua-primary-2: #5a9bd5;
  --sua-primary-light: #1f2733;
  --sua-card: #181a1e;
  --sua-sidebar-bg: #0c0e11;
  --sua-text: #e6eaf2;
  --sua-text-muted: #a3adc2;
  --sua-border: #2c3138;
  --sua-border-strong: #3a4148;
  --sua-primary-light: #1a2330;
}
[data-bs-theme="dark"] body { background: var(--sua-bg); color: var(--sua-text); }
[data-bs-theme="dark"] .sua-topbar {
  background: rgba(24,26,30,.98); border-bottom-color: var(--sua-border);
}
[data-bs-theme="dark"] .sua-page-title { color: var(--sua-text); }
[data-bs-theme="dark"] .sua-card,
[data-bs-theme="dark"] .card {
  background: var(--sua-card); border-color: var(--sua-border); color: var(--sua-text);
}
[data-bs-theme="dark"] .card-header { background: var(--sua-surface); border-bottom-color: var(--sua-border); }
[data-bs-theme="dark"] .stat-card { box-shadow: var(--sua-shadow-sm); }
[data-bs-theme="dark"] .table { color: var(--sua-text); }
[data-bs-theme="dark"] .table-sua thead th {
  background: var(--sua-primary-light); color: var(--sua-primary); border-bottom-color: var(--sua-border-strong);
}
[data-bs-theme="dark"] .table-sua tbody tr:hover { background: var(--sua-primary-light); }
[data-bs-theme="dark"] .table-responsive-wrap { background: var(--sua-card); border-color: var(--sua-border); }
[data-bs-theme="dark"] .table-toolbar { background: var(--sua-card); border-bottom-color: var(--sua-border); }
[data-bs-theme="dark"] .list-group-item { background: var(--sua-card); border-color: var(--sua-border); color: var(--sua-text); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: var(--sua-surface); border-color: var(--sua-border-strong); color: var(--sua-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background: var(--sua-surface); border-color: var(--sua-primary); color: var(--sua-text);
  box-shadow: 0 0 0 .2rem rgba(126,184,232,.22);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .form-label { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] label { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .input-group-text { background: var(--sua-surface); border-color: var(--sua-border); color: var(--sua-text-muted); }
[data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--sua-border-strong); color: var(--sua-text-muted); }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: var(--sua-primary-light); border-color: var(--sua-primary); color: var(--sua-primary); }
[data-bs-theme="dark"] .btn-outline-primary { border-color: var(--sua-primary); color: var(--sua-primary); }
[data-bs-theme="dark"] .btn-outline-primary:hover { background: var(--sua-primary); border-color: var(--sua-primary); color: var(--sua-text); }
[data-bs-theme="dark"] .btn-primary { background: var(--sua-accent); border-color: var(--sua-accent); color: var(--sua-surface); }
[data-bs-theme="dark"] .btn-primary:hover { background: var(--sua-accent-2); border-color: var(--sua-accent-2); color: var(--sua-surface); }
[data-bs-theme="dark"] .btn-outline-light { border-color: var(--sua-border); color: var(--sua-text-muted); }
[data-bs-theme="dark"] .dropdown-menu { background: var(--sua-surface); border-color: var(--sua-border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--sua-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background: var(--sua-primary-light); color: var(--sua-text); }
[data-bs-theme="dark"] .dropdown-header { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--sua-border); }
[data-bs-theme="dark"] ..text-muted { color: var(--sua-text-muted) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--sua-text) !important; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--sua-text); }
[data-bs-theme="dark"] .sua-content { color: var(--sua-text); }
[data-bs-theme="dark"] .breadcrumb-item { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--sua-primary); }
[data-bs-theme="dark"] .breadcrumb-item a { color: var(--sua-primary); }
[data-bs-theme="dark"] .badge.bg-light { background: var(--sua-primary-light) !important; color: var(--sua-text) !important; }
[data-bs-theme="dark"] .alert { border-color: var(--sua-border); }
[data-bs-theme="dark"] .alert-danger { background: #3a1b1f; border-color: #5f2a30; color: #f6c8c8; }
[data-bs-theme="dark"] .alert-warning { background: #3a2f1a; border-color: #6f4f1a; color: #ffe3a3; }
[data-bs-theme="dark"] .alert-success { background: #10241b; border-color: #146c43; color: #a3cfbb; }
[data-bs-theme="dark"] .alert-info { background: #0d2b3e; border-color: #087990; color: #9edcff; }
[data-bs-theme="dark"] .form-text { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .text-body-secondary { color: var(--sua-text-muted) !important; }
[data-bs-theme="dark"] .recent-list li { border-bottom-color: var(--sua-border); }
[data-bs-theme="dark"] .recent-list .meta { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .sidebar-search input {
  background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.15); color: #fff;
}
[data-bs-theme="dark"] .sidebar-search input::placeholder { color: rgba(255,255,255,.55); }
[data-bs-theme="dark"] .qr-box { background: var(--sua-card); }
[data-bs-theme="dark"] a { color: var(--sua-primary); }
[data-bs-theme="dark"] a:hover { color: var(--sua-primary-2); }
[data-bs-theme="dark"] .empty-state { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .loading-overlay { background: rgba(0,0,0,.55); }
[data-bs-theme="dark"] .nav-link { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .nav-link:hover { color: var(--sua-text); }
[data-bs-theme="dark"] .modal-content { background: var(--sua-surface); color: var(--sua-text); }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--sua-border); }
[data-bs-theme="dark"] .offcanvas { background: var(--sua-surface); color: var(--sua-text); }
[data-bs-theme="dark"] .page-link { background: var(--sua-primary-light); border-color: var(--sua-border); color: var(--sua-primary); }
[data-bs-theme="dark"] .page-link:hover { background: var(--sua-primary); color: var(--sua-text); }
[data-bs-theme="dark"] .pagination .page-item.active .page-link { background: var(--sua-primary-2); border-color: var(--sua-primary-2); color: #fff; }
[data-bs-theme="dark"] .sua-flash .toast { background: var(--sua-card); color: var(--sua-text); }
[data-bs-theme="dark"] code { color: #f1aeb5; }
[data-bs-theme="dark"] pre { background: var(--sua-primary-light); color: var(--sua-text); }
[data-bs-theme="dark"] hr { border-color: var(--sua-border); }
[data-bs-theme="dark"] ::placeholder { color: var(--sua-text-muted); }
[data-bs-theme="dark"] .form-check-input { background-color: var(--sua-surface); border-color: var(--sua-border-strong); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--sua-primary-2); border-color: var(--sua-primary-2); }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--sua-primary-light); }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--sua-border) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--sua-primary-light) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--sua-card) !important; }
[data-bs-theme="dark"] .btn-light { background: var(--sua-primary-light); border-color: var(--sua-border); color: var(--sua-text); }
[data-bs-theme="dark"] .demo-box { background: #3a2f1a; border-color: #6f4f1a; }
[data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .table th { border-color: var(--sua-border); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; }
[data-bs-theme="dark"] .sua-topbar .btn-outline-secondary { border-color: var(--sua-border-strong); color: var(--sua-text-muted); }
[data-bs-theme="dark"] .sua-topbar .btn-outline-primary { border-color: var(--sua-primary); color: var(--sua-primary); }
[data-bs-theme="dark"] .form-select option { background: var(--sua-surface); color: var(--sua-text); }

[data-bs-theme="dark"] .text-accent { color: var(--sua-accent); }
[data-bs-theme="dark"] .btn-outline-accent { border-color: var(--sua-accent); color: var(--sua-accent); }
[data-bs-theme="dark"] .btn-outline-accent:hover { background: var(--sua-accent); color: var(--sua-text); }

@media print {
  .sua-sidebar, .sua-topbar, .whatsapp-float, .no-print, .sua-flash { display: none !important; }
  .sua-main { margin-left: 0 !important; }
}

/* =====================================================================
 * Reference-aligned School ERP UI refinement (2026)
 * Shared across every ERP module through the common application shell.
 * ===================================================================== */
:root {
  --sua-primary: #10284b;
  --sua-primary-2: #174477;
  --sua-primary-3: #245d9b;
  --sua-primary-light: #e8f1ff;
  --sua-accent: #1670f5;
  --sua-accent-2: #0d5ed7;
  --sua-accent-light: #e7f0ff;
  --sua-teal: #12a875;
  --sua-teal-light: #e2f7ef;
  --sua-bg: #f3f7fc;
  --sua-surface: #fff;
  --sua-card: #fff;
  --sua-sidebar-bg: linear-gradient(180deg, #10284b 0%, #0b2141 100%);
  --sua-text: #10264a;
  --sua-text-muted: #617795;
  --sua-border: #e1eaf5;
  --sua-border-strong: #cbd8e9;
  --sua-radius: 12px;
  --sua-radius-sm: 9px;
  --sua-radius-lg: 16px;
  --sua-shadow-sm: 0 1px 3px rgba(16,40,75,.045), 0 1px 2px rgba(16,40,75,.035);
  --sua-shadow: 0 4px 14px rgba(16,40,75,.055);
  --sua-shadow-lg: 0 12px 28px rgba(16,40,75,.10);
}

html, body { font-family: var(--font-bangla); }
body { background: var(--sua-bg); color: var(--sua-text); }
.sua-sidebar { background: var(--sua-sidebar-bg); }
.sua-sidebar .brand { min-height: 68px; }
.sua-sidebar .brand .brand-mark { background: #1670f5; border-radius: 12px; }
.sua-sidebar .nav-link-sua { min-height: 40px; margin: 2px 8px; padding: .58rem .78rem; border: 0; border-radius: 9px; transition: background .16s ease, color .16s ease; }
.sua-sidebar .nav-link-sua:hover { background: rgba(255,255,255,.09); transform: none; }
.sua-sidebar .nav-link-sua i { color: #a9c8f7; }
.sua-sidebar .nav-link-sua.active { background: #1670f5; color: #fff; box-shadow: 0 4px 10px rgba(22,112,245,.22); }
.sua-sidebar .nav-link-sua.active::after { display: none; }
.sua-sidebar .nav-link-sua.active i { color: #fff; }
.sua-sidebar .nav-group-title { padding-left: 1rem; }
.sua-main { min-width: 0; }
.sua-topbar { min-height: 62px; padding: .65rem 1.25rem; box-shadow: 0 1px 4px rgba(16,40,75,.035); }
.sua-page-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--sua-text); }
.sua-content { padding: 1.25rem; }
.card, .sua-card, .table-responsive-wrap, .stat-card { border-color: var(--sua-border); border-radius: var(--sua-radius); box-shadow: var(--sua-shadow-sm); }
.card { overflow: hidden; }
.card-header { background: #fff; color: var(--sua-text); border-bottom-color: var(--sua-border); font-weight: 650; }
.card:hover, .sua-card:hover { box-shadow: var(--sua-shadow); }
.table-responsive-wrap { box-shadow: none; }
.table-toolbar { background: #f8faff; }
.table-sua thead th { background: #f3f7fc; color: #355174; font-weight: 650; }
.table-sua tbody tr:hover > * { background-color: #f5f9ff; }
.form-control, .form-select, .input-group-text { min-height: 40px; border-color: var(--sua-border-strong); border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: #80b3ff; box-shadow: 0 0 0 .2rem rgba(22,112,245,.13); }
.form-label { color: #304968; font-weight: 600; }
.btn { border-radius: 8px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn-primary { background: #1670f5; border-color: #1670f5; box-shadow: 0 2px 5px rgba(22,112,245,.12); }
.btn-primary:hover, .btn-primary:focus-visible { background: #0d5ed7; border-color: #0d5ed7; }
.btn-outline-primary { color: #1670f5; border-color: #b8d3ff; }
.btn-outline-primary:hover { color: #fff; background: #1670f5; border-color: #1670f5; }
.btn-outline-secondary { border-color: var(--sua-border-strong); }
.dropdown-menu, .modal-content, .offcanvas { border-color: var(--sua-border); border-radius: 12px; box-shadow: var(--sua-shadow-lg); }
.dropdown-item { padding: .55rem .9rem; }
.badge { font-weight: 600; letter-spacing: .01em; }
.breadcrumb { --bs-breadcrumb-divider: '›'; }
.breadcrumb-item, .breadcrumb-item a { color: var(--sua-text-muted); }
.breadcrumb-item.active { color: var(--sua-text); }
:focus-visible { outline: 3px solid rgba(22,112,245,.42); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .sua-content { padding: 1rem; }
  .sua-topbar { padding: .6rem .85rem; gap: .5rem; }
  .sua-page-title { font-size: 1.1rem; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
}
@media (max-width: 575.98px) {
  .sua-content { padding: .75rem; }
  .sua-topbar { padding: .55rem .7rem; }
  .sua-page-title { font-size: 1rem; }
  .kpi-row { grid-template-columns: minmax(0, 1fr); }
  .page_actions, .sua-content .d-flex.justify-content-between { align-items: stretch !important; }
  .sua-content .table-toolbar { align-items: stretch; }
  .sua-content .table-toolbar .form-control, .sua-content .table-toolbar .form-select { max-width: 100%; }
}

[data-bs-theme="dark"] .card-header { background: var(--sua-surface); }
[data-bs-theme="dark"] .table-toolbar { background: var(--sua-surface); }
[data-bs-theme="dark"] .table-sua thead th { background: var(--sua-primary-light); color: var(--sua-text); }
[data-bs-theme="dark"] .sua-sidebar { background: #0b1c33; }
[data-bs-theme="dark"] .sua-sidebar .nav-link-sua.active { background: #1670f5; color: #fff; }