/* =========================================================
   Vidya School ERP — UI Theme
   ========================================================= */
:root {
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-3: #db2777;
  --brand-rgb: 79,70,229;
  --brand-dark: #3730a3;
  --brand-soft: color-mix(in srgb, var(--brand) 11%, white);
  --brand-ink: var(--brand-dark);
  --success: #059669; --success-soft: #ecfdf5;
  --warning: #d97706; --warning-soft: #fffbeb;
  --danger: #dc2626;  --danger-soft: #fef2f2;
  --info: #0284c7;    --info-soft: #f0f9ff;
  --wa: #25d366;

  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e6e9f2;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;

  --side-base: #0f1535;
  --side-bg: var(--side-base);
  --side-text: #aab2d5;
  --side-hover: rgba(255,255,255,.06);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.12);
  --shadow-lg: 0 20px 50px -20px rgba(30,27,75,.35);
  --sidebar-w: 264px;

  --bs-body-font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-border-color: var(--border);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
}
[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #121a31;
  --surface-2: #0f1629;
  --border: #243052;
  --text: #e6e9f5;
  --text-2: #a3aed0;
  --muted: #6b7699;
  --brand-soft: rgba(var(--brand-rgb),.18);
  --brand-ink: color-mix(in srgb, var(--brand) 55%, white);
  --brand-ink: #a5b4fc;
  --success-soft: rgba(16,185,129,.14);
  --warning-soft: rgba(245,158,11,.14);
  --danger-soft: rgba(239,68,68,.14);
  --info-soft: rgba(14,165,233,.14);
  --side-bg: color-mix(in srgb, var(--side-base) 70%, black);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-bg: var(--surface-2);
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--bs-body-font-family); font-size: 14.5px; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
.text-muted { color: var(--text-2) !important; }
.small, small { font-size: .82em; }
::selection { background: rgba(var(--brand-rgb),.2); }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040;
  background: radial-gradient(1200px 400px at -20% -10%, color-mix(in srgb, var(--brand-2) 40%, transparent), transparent 60%), var(--side-bg);
  display: flex; flex-direction: column; color: var(--side-text);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; color: #fff; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 20px -6px rgba(var(--brand-rgb),.7); flex-shrink: 0; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong { font-size: 14.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-text small { color: color-mix(in srgb, var(--brand-2) 35%, #a5acd0); font-size: 11.5px; margin-top: 2px; }
.side-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--brand-2) 30%, #6b7394); font-weight: 700; padding: 16px 12px 6px; }
.nav-link-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--side-text);
  font-weight: 500; font-size: 14px; transition: background .15s, color .15s; position: relative; margin-bottom: 2px; }
.nav-link-item i { font-size: 17px; width: 20px; text-align: center; opacity: .9; }
.nav-link-item:hover { background: var(--side-hover); color: #fff; }
.nav-link-item.active { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 8px 22px -10px rgba(var(--brand-rgb),.9); }
.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.sidebar-backdrop { display: none; }

/* ---------- Main ---------- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.topbar-title p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: grid; place-items: center; font-size: 18px; transition: .15s; }
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); line-height: 1.15; }
.user-chip strong { font-size: 13px; } .user-chip small { color: var(--text-2); font-size: 11px; }
.content { padding: 26px 28px 40px; flex: 1; }
.app-footer { display: flex; justify-content: space-between; padding: 16px 28px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border); }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 1035; backdrop-filter: blur(2px); }
  .main { margin-left: 0; }
  .topbar { padding: 12px 16px; }
  .content { padding: 18px 16px 32px; }
  .app-footer { padding: 14px 16px; flex-direction: column; gap: 4px; }
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 16px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-header h5, .card-title { font-size: 15.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.card-header .sub { color: var(--text-2); font-size: 12.5px; }
.card-body { padding: 20px; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 14px 20px; }

.stat { position: relative; overflow: hidden; padding: 20px; display: flex; gap: 16px; align-items: flex-start; height: 100%; }
.stat .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.stat .lbl { color: var(--text-2); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; }
.stat .meta { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: currentColor; opacity: .04; }
.tone-brand .ic { background: var(--brand-soft); color: var(--brand); }
.tone-success .ic { background: var(--success-soft); color: var(--success); }
.tone-warning .ic { background: var(--warning-soft); color: var(--warning); }
.tone-danger .ic { background: var(--danger-soft); color: var(--danger); }
.tone-info .ic { background: var(--info-soft); color: var(--info); }
.tone-brand { color: var(--brand); } .tone-success { color: var(--success); } .tone-warning { color: var(--warning); } .tone-danger { color: var(--danger); } .tone-info { color: var(--info); }
.stat .num, .stat .lbl, .stat .meta { color: inherit; }
.stat .lbl, .stat .meta { color: var(--text-2); }
.stat .num { color: var(--text); }

.hero { border-radius: 20px; padding: 26px 28px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(600px 200px at 100% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(120deg, var(--brand-dark), var(--brand) 35%, var(--brand-2) 70%, var(--brand-3)); background-size: 200% 200%; box-shadow: var(--shadow-lg); }
.hero h2 { font-weight: 800; letter-spacing: -.02em; margin: 0; font-size: 24px; }
.hero p { margin: 6px 0 0; opacity: .88; }
.hero .hero-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Buttons & forms ---------- */
.btn { border-radius: 11px; font-weight: 600; font-size: 14px; padding: .55rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s; }
.btn-sm { padding: .36rem .7rem; font-size: 12.8px; border-radius: 9px; }
.btn-lg { padding: .75rem 1.3rem; font-size: 15px; border-radius: 13px; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 0; box-shadow: 0 8px 20px -10px rgba(var(--brand-rgb),.9); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); transform: translateY(-1px); }
.btn-light { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-light:hover { background: var(--surface-2); border-color: #cbd2e6; color: var(--text); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); border: 0; }
.btn-soft:hover { background: var(--brand); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-wa { background: var(--wa); color: #fff; border: 0; }
.btn-wa:hover { background: #1ebe5b; color: #fff; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.form-label { font-weight: 600; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.form-label .req { color: var(--danger); }
.form-control, .form-select { border-radius: 11px; border-color: var(--border); padding: .6rem .85rem; font-size: 14px; background-color: var(--surface); color: var(--text); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14); background-color: var(--surface); color: var(--text); }
.form-control-sm, .form-select-sm { padding: .38rem .65rem; font-size: 13px; border-radius: 9px; }
.input-group-text { background: var(--surface-2); border-color: var(--border); color: var(--text-2); border-radius: 11px; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.form-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.form-section > .fs-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.form-section > .fs-head .num { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 800; display: grid; place-items: center; }
.form-section > .fs-head h6 { margin: 0; font-weight: 700; font-size: 15px; }
.form-section > .fs-head small { color: var(--text-2); }
.form-section > .fs-body { padding: 20px; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); margin: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--border); vertical-align: middle; }
.table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 700; background: var(--surface-2); white-space: nowrap; border-bottom: 1px solid var(--border); }
.table-sm > :not(caption) > * > * { padding: .5rem .7rem; }
.table-wrap { overflow-x: auto; }
.table tbody tr:last-child td { border-bottom: 0; }
.row-inactive td { opacity: .55; }
.person { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.person .nm { font-weight: 700; color: var(--text); line-height: 1.25; }
.person .sub { font-size: 12px; color: var(--text-2); }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; color: hsl(var(--h,240) 60% 38%); background: hsl(var(--h,240) 80% 92%); object-fit: cover; flex-shrink: 0; letter-spacing: .02em; }
[data-theme="dark"] .avatar { background: hsl(var(--h,240) 40% 22%); color: hsl(var(--h,240) 80% 80%); }
.avatar-sm { width: 34px; height: 34px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 14px; }
.avatar-lg { width: 88px; height: 88px; font-size: 28px; }
.avatar-xl { width: 120px; height: 120px; font-size: 38px; }

/* ---------- Badges ---------- */
.badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.8px; font-weight: 700; }
.badge-soft.success { background: var(--success-soft); color: var(--success); }
.badge-soft.warning { background: var(--warning-soft); color: var(--warning); }
.badge-soft.danger { background: var(--danger-soft); color: var(--danger); }
.badge-soft.info { background: var(--info-soft); color: var(--info); }
.badge-soft.primary { background: var(--brand-soft); color: var(--brand-ink); }
.badge-soft.muted { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.badge-soft .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.grade-pill { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: 12.5px; }
.grade-pill.success { background: var(--success-soft); color: var(--success); }
.grade-pill.primary { background: var(--brand-soft); color: var(--brand-ink); }
.grade-pill.info { background: var(--info-soft); color: var(--info); }
.grade-pill.warning { background: var(--warning-soft); color: var(--warning); }
.grade-pill.danger { background: var(--danger-soft); color: var(--danger); }
.grade-pill.muted { background: var(--surface-2); color: var(--muted); }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 36px; }
.chip-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.chip-tabs a { padding: 6px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.chip-tabs a.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

.progress { height: 8px; border-radius: 99px; background: var(--surface-2); }
.progress-bar { border-radius: 99px; }

.empty { text-align: center; padding: 50px 20px; color: var(--text-2); }
.empty i { font-size: 44px; color: var(--muted); display: block; margin-bottom: 10px; }

.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--text-2); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
@media (max-width: 575px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

.nav-pills-x { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.nav-pills-x .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-2); font-weight: 600; padding: 10px 14px; white-space: nowrap; background: none; }
.nav-pills-x .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Marks grid ---------- */
.marks-grid input { width: 74px; text-align: center; font-weight: 700; padding: .35rem .3rem; }
.marks-grid input.is-invalid { background: var(--danger-soft); }
.marks-grid input.absent { background: var(--warning-soft); color: var(--warning); }
.marks-grid th.sticky, .marks-grid td.sticky { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.marks-grid thead th.sticky { background: var(--surface-2); }

/* ---------- Attendance ---------- */
.att-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.att-toggle input { display: none; }
.att-toggle label { padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text-2); }
.att-toggle input[value="P"]:checked + label { background: var(--success); color: #fff; }
.att-toggle input[value="A"]:checked + label { background: var(--danger); color: #fff; }
.att-toggle input[value="L"]:checked + label { background: var(--warning); color: #fff; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art { position: relative; overflow: hidden; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(800px 400px at 0% 0%, color-mix(in srgb, var(--brand-3) 50%, transparent), transparent 60%), radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--brand-2) 45%, transparent), transparent 60%), linear-gradient(135deg, var(--side-base), var(--brand-dark) 55%, var(--brand-2)); }
.auth-art h1 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.auth-art .feat { display: flex; gap: 12px; align-items: center; margin-top: 14px; opacity: .92; }
.auth-art .feat i { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 18px; }
.auth-art .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-weight: 800; letter-spacing: -.02em; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); padding: 5px; border-radius: 14px; }
.role-switch a { text-align: center; padding: 10px; border-radius: 10px; font-weight: 700; color: var(--text-2); font-size: 14px; }
.role-switch a.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* ---------- Landing ---------- */
.landing { min-height: 100vh; background:
  radial-gradient(900px 500px at 10% -10%, rgba(var(--brand-rgb),.18), transparent 60%),
  radial-gradient(800px 500px at 110% 10%, rgba(14,165,233,.14), transparent 60%), var(--bg); }
.land-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.land-hero h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.grad-text { background: linear-gradient(120deg, var(--brand), var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-card { display: block; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); transition: .2s; height: 100%; }
.portal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text); border-color: transparent; }
.portal-card .pi { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; color: #fff; margin-bottom: 16px; }

/* ---------- Result card ---------- */
.result-sheet { background: var(--surface); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); }
.result-head { padding: 22px 26px; color: #fff; background: linear-gradient(120deg, var(--brand-dark), var(--brand-2)); display: flex; gap: 16px; align-items: center; }
.result-head img { width: 58px; height: 58px; border-radius: 14px; background: #fff; object-fit: contain; padding: 4px; }
.result-head h3 { margin: 0; font-weight: 800; font-size: 20px; }
.result-head p { margin: 2px 0 0; opacity: .85; font-size: 13px; }
.score-ring { --p: 0; --c: var(--brand); width: 144px; height: 144px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); position: relative; }
.score-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.score-ring > div { position: relative; text-align: center; line-height: 1.1; }
.score-ring strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; display: block; }
.score-ring span { font-size: 12px; color: var(--text-2); font-weight: 600; }

/* ---------- ID card ---------- */
.idc {
  width: 340px; height: 540px; border-radius: 22px; overflow: hidden; position: relative; background: #fff; color: #0f172a;
  box-shadow: 0 30px 60px -25px rgba(30,27,75,.55), 0 0 0 1px rgba(15,23,42,.06); font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.idc-top { position: relative; height: 196px; padding: 18px 18px 0; color: #fff; text-align: center;
  background: radial-gradient(260px 140px at 90% 0%, rgba(255,255,255,.22), transparent 70%), linear-gradient(140deg, var(--brand-dark) 0%, var(--brand-2) 55%, var(--brand-3) 120%); }
.idc-top::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 120px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.idc-school { display: flex; align-items: center; gap: 10px; justify-content: center; position: relative; z-index: 1; }
.idc-school img, .idc-school .lg { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; padding: 3px; display: grid; place-items: center; color: #4f46e5; font-size: 20px; }
.idc-school h4 { font-size: 15.5px; font-weight: 800; margin: 0; line-height: 1.15; text-align: left; letter-spacing: -.01em; }
.idc-school small { display: block; font-size: 9.5px; opacity: .85; font-weight: 500; letter-spacing: .02em; }
.idc-tag { position: relative; z-index: 1; display: inline-block; margin-top: 12px; padding: 4px 14px; border-radius: 99px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.idc-photo { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 3; width: 118px; height: 118px; border-radius: 50%; padding: 5px;
  background: conic-gradient(from 200deg, #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1); }
.idc-photo > * { width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: #eef2ff; display: grid; place-items: center; font-size: 36px; font-weight: 800; color: #4f46e5; }
.idc-body { flex: 1; padding: 50px 22px 0; text-align: center; position: relative; z-index: 2; }
.idc-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.idc-class { display: inline-flex; gap: 6px; margin-top: 6px; }
.idc-class span { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #f1f5f9; color: var(--brand-dark); }
.idc-class span.r { background: #fdf2f8; color: #be185d; }
.idc-info { margin-top: 14px; text-align: left; font-size: 11.5px; display: grid; grid-template-columns: 92px 1fr; gap: 5px 8px; }
.idc-info dt { color: #64748b; font-weight: 600; }
.idc-info dd { margin: 0; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-foot { display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 18px 12px; gap: 8px; }
.idc-foot .sign { text-align: center; font-size: 9.5px; color: #64748b; font-weight: 600; }
.idc-foot .sign img { height: 26px; display: block; margin: 0 auto 2px; }
.idc-foot .sign .ln { width: 90px; border-top: 1.5px solid #cbd5e1; margin: 22px auto 3px; }
.idc-foot .qr { width: 58px; height: 58px; border-radius: 8px; border: 1px solid #e2e8f0; padding: 3px; background: #fff; }
.idc-bottom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(90deg, var(--brand-dark), var(--brand-2), var(--brand-3)); color: #fff; font-size: 9.5px; text-align: center; padding: 7px 10px; font-weight: 600; letter-spacing: .02em; }
.idc-blood { position: absolute; right: 16px; top: 206px; z-index: 4; background: #fef2f2; color: #dc2626; font-weight: 800; font-size: 11px; padding: 4px 8px; border-radius: 8px; border: 1px solid #fecaca; }
.idc-blood i { font-size: 10px; }

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .app-footer, .no-print, .swal2-container { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  body, html { background: #fff !important; }
  .card, .result-sheet { box-shadow: none !important; border-color: #ddd !important; }
  .idc { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
  a { color: inherit !important; }
  [data-theme="dark"] { --bg:#fff; --surface:#fff; --surface-2:#f8fafc; --text:#0f172a; --text-2:#475569; --border:#e2e8f0; }
}

/* SweetAlert polish */
.swal2-popup { border-radius: 20px !important; font-family: var(--bs-body-font-family) !important; padding: 1.6em 1.4em !important; }
.swal2-title { font-size: 1.35em !important; font-weight: 800 !important; }
.swal2-styled { border-radius: 11px !important; font-weight: 700 !important; padding: .6em 1.4em !important; }
.swal2-toast { border-radius: 14px !important; box-shadow: 0 16px 40px -12px rgba(15,23,42,.35) !important; }
[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--text) !important; }

.dropdown-menu { border-radius: 14px; padding: 6px; background: var(--surface); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); }
.dropdown-item { border-radius: 9px; padding: 8px 12px; font-weight: 500; }
.modal-content { border-radius: 20px; border: 0; background: var(--surface); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chart-box { position: relative; height: 290px; }
.chart-box.sm { height: 230px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.photo-drop { border: 2px dashed var(--border); border-radius: 18px; padding: 18px; text-align: center; cursor: pointer; transition: .15s; background: var(--surface-2); }
.photo-drop:hover { border-color: var(--brand); }
.photo-drop img, .photo-drop .ph { width: 120px; height: 140px; border-radius: 14px; object-fit: cover; margin: 0 auto 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 40px; }
.fw-800 { font-weight: 800; }
.letter-tight { letter-spacing: -.02em; }
.cursor-pointer { cursor: pointer; }

/* =========================================================
   COLOR THEMES  (html[data-color="..."])
   ========================================================= */
[data-color="ocean"]   { --brand:#2563eb; --brand-2:#0ea5e9; --brand-3:#06b6d4; --brand-rgb:37,99,235;  --brand-dark:#1e40af; --side-base:#0a1733; }
[data-color="emerald"] { --brand:#059669; --brand-2:#10b981; --brand-3:#84cc16; --brand-rgb:5,150,105;  --brand-dark:#065f46; --side-base:#051f19; }
[data-color="teal"]    { --brand:#0d9488; --brand-2:#06b6d4; --brand-3:#3b82f6; --brand-rgb:13,148,136; --brand-dark:#115e59; --side-base:#052326; }
[data-color="rose"]    { --brand:#e11d48; --brand-2:#ec4899; --brand-3:#f97316; --brand-rgb:225,29,72; --brand-dark:#9f1239; --side-base:#2a0914; }
[data-color="sunset"]  { --brand:#ea580c; --brand-2:#f59e0b; --brand-3:#e11d48; --brand-rgb:234,88,12; --brand-dark:#9a3412; --side-base:#261005; }
[data-color="grape"]   { --brand:#9333ea; --brand-2:#c026d3; --brand-3:#6366f1; --brand-rgb:147,51,234; --brand-dark:#6b21a8; --side-base:#1a0930; }
[data-color="crimson"] { --brand:#dc2626; --brand-2:#9f1239; --brand-3:#f59e0b; --brand-rgb:220,38,38; --brand-dark:#991b1b; --side-base:#230808; }
[data-color="slate"]   { --brand:#334155; --brand-2:#64748b; --brand-3:#0ea5e9; --brand-rgb:51,65,85;  --brand-dark:#1e293b; --side-base:#0b1120; }
[data-color="gold"]    { --brand:#b45309; --brand-2:#eab308; --brand-3:#f97316; --brand-rgb:180,83,9;  --brand-dark:#78350f; --side-base:#1c1404; }
[data-color="slate"][data-theme="dark"] { --brand:#64748b; --brand-2:#94a3b8; --brand-rgb:100,116,139; }

/* Theme picker */
.theme-menu { width: 290px; padding: 14px !important; }
.theme-menu h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); font-weight: 800; margin: 0 0 10px; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.swatch { width: 100%; aspect-ratio: 1; border-radius: 14px; border: 0; cursor: pointer; position: relative; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.swatch:hover { transform: translateY(-3px) scale(1.08); }
.swatch.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.swatch.on::after { content: "\F26E"; font-family: bootstrap-icons; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; }
.swatch-name { font-size: 10px; text-align: center; color: var(--text-2); margin-top: 3px; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; border-radius: 9px; padding: 7px 4px; font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.seg button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 6px 2px; }

/* =========================================================
   MOTION & MICRO-INTERACTIONS
   ========================================================= */
:root { --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1); }
html { scroll-behavior: smooth; }
body, .card, .sidebar, .topbar, .form-control, .form-select, .btn, .nav-link-item, .list-row { transition: background-color .35s var(--ease), border-color .35s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }

/* Page enter — staggered */
.m-in { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s var(--ease), transform .6s var(--ease) !important; transition-delay: calc(var(--i, 0) * 55ms) !important; }
.m-in.in { opacity: 1; transform: none; }
@keyframes mIn { to { opacity: 1; transform: none; } }
.m-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.m-reveal.in { opacity: 1; transform: none; }
.m-row { opacity: 0; transform: translateX(-8px); animation: mRow .45s var(--ease) forwards; animation-delay: calc(var(--r, 0) * 22ms + 150ms); }
@keyframes mRow { to { opacity: 1; transform: none; } }

/* Cards: lift + mouse spotlight */
.card { position: relative; }
.card.stat, .portal-card { will-change: transform; }
.card.stat:hover, .portal-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(var(--brand-rgb), .45), var(--shadow); border-color: rgba(var(--brand-rgb), .25); }
.stat .ic { transition: transform .45s var(--spring); }
.stat:hover .ic { transform: rotate(-8deg) scale(1.12); }
.tilt { transform-style: preserve-3d; transition: transform .25s var(--ease); }

/* Hero animated gradient + floating blobs */
.hero { animation: heroShift 14s ease-in-out infinite; }
@keyframes heroShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(8px); opacity: .35; pointer-events: none; }
.hero::before { width: 220px; height: 220px; right: 8%; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 65%); animation: float1 9s ease-in-out infinite; }
.hero::after { width: 160px; height: 160px; left: 40%; bottom: -80px; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 65%); animation: float2 11s ease-in-out infinite; }
.hero > * { position: relative; z-index: 1; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 25px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -20px); } }
.auth-art .orb { animation: float1 12s ease-in-out infinite; }
.auth-art .orb + .orb { animation: float2 14s ease-in-out infinite; }
.auth-card { animation: mIn .8s var(--ease) both; }

/* Buttons: lift, shine sweep, ripple, press */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:active { transform: scale(.97); }
.btn-primary::after, .btn-wa::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn-primary:hover::after, .btn-wa:hover::after { left: 130%; }
.btn-light:hover, .btn-soft:hover { transform: translateY(-1px); }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .25; pointer-events: none; animation: ripple .6s var(--ease); z-index: 0; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.icon-btn { transition: transform .3s var(--spring), color .2s, border-color .2s; }
.icon-btn:hover { transform: translateY(-2px) rotate(-6deg); }

/* Sidebar motion */
.nav-link-item { overflow: hidden; }
.nav-link-item i { transition: transform .35s var(--spring); }
.nav-link-item:hover { transform: translateX(4px); }
.nav-link-item:hover i { transform: scale(1.18) rotate(-6deg); }
.nav-link-item.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: #fff; box-shadow: 0 0 12px #fff; animation: barIn .5s var(--spring); }
@keyframes barIn { from { transform: scaleY(0); } }
.sidebar .side-nav .nav-link-item { opacity: 0; animation: mRow .4s var(--ease) forwards; animation-delay: calc(var(--n, 0) * 25ms); }
.brand-mark { transition: transform .5s var(--spring); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); }

/* Topbar gets shadow on scroll */
.topbar.scrolled { box-shadow: 0 10px 30px -18px rgba(15,23,42,.35); }

/* Tables & lists */
.table tbody tr { transition: background-color .2s, transform .2s var(--ease); }
.table-hover tbody tr:hover { transform: translateX(2px); }
.list-row { transition: background-color .2s, transform .25s var(--ease); }
.list-row:hover { background: var(--surface-2); transform: translateX(3px); }
.avatar { transition: transform .35s var(--spring), box-shadow .3s; }
tr:hover .avatar, .list-row:hover .avatar, .person:hover .avatar { transform: scale(1.1) rotate(-3deg); box-shadow: 0 6px 16px -6px rgba(var(--brand-rgb), .6); }
.badge-soft, .grade-pill { transition: transform .25s var(--spring); }
.badge-soft:hover, .grade-pill:hover { transform: scale(1.08); }
.progress-bar { transition: width 1.1s var(--ease) !important; }
.chip-tabs a { transition: all .25s var(--ease); }
.form-control:focus, .form-select:focus { transform: translateY(-1px); }

/* Top loading bar */
#navBar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3)); box-shadow: 0 0 12px rgba(var(--brand-rgb), .7); transition: width .4s var(--ease), opacity .3s; }
body.leaving .content { opacity: .35; transform: translateY(6px); transition: opacity .25s, transform .25s; }

/* Inactive rows: fade content but keep action buttons clear */
.row-inactive td { opacity: 1; }
.row-inactive td:not(:last-child) { opacity: .55; }
.btn-activate { background: var(--success-soft); color: var(--success); border: 1px solid rgba(5,150,105,.25); }
.btn-activate:hover { background: var(--success); color: #fff; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .m-in, .m-reveal, .m-row, .sidebar .side-nav .nav-link-item, .fade-in { opacity: 1 !important; transform: none !important; }
}
@media print { #navBar { display: none !important; } .m-in, .m-reveal, .m-row { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------- Timetable ---------- */
.tt-grid th, .tt-grid td { min-width: 150px; vertical-align: top; border-right: 1px solid var(--border); }
.tt-grid .tt-time { min-width: 86px; width: 86px; position: sticky; left: 0; background: var(--surface); z-index: 2; }
.tt-grid thead .tt-time { background: var(--surface-2); }
.tt-grid .tt-today { background: rgba(var(--brand-rgb), .045); }
.tt-card { position: relative; border-radius: 12px; padding: 9px 11px; margin-bottom: 6px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-left: 4px solid var(--c); transition: transform .25s var(--spring), box-shadow .25s; }
.tt-card:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 22px -12px var(--c); }
.tt-card.live { box-shadow: 0 0 0 2px var(--c), 0 10px 24px -10px var(--c); animation: ttPulse 2s ease-in-out infinite; }
@keyframes ttPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent), 0 10px 24px -10px var(--c); } }
.tt-sub { font-weight: 800; font-size: 13px; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.tt-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.tt-live { font-size: 9.5px; color: var(--success); font-weight: 800; letter-spacing: .05em; }
.tt-act { position: absolute; top: 5px; right: 5px; display: none; gap: 3px; }
.tt-card:hover .tt-act { display: flex; }
.tt-act .btn-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.tt-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.day-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick input { display: none; }
.day-pick label { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s var(--ease); }
.day-pick input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), .9); }
@media print { .tt-act { display: none !important; } .tt-grid .tt-time { position: static; } }

/* =========================================================
   HOVER EFFECTS
   ========================================================= */
.card:hover { background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--brand-rgb), .08), transparent 50%); border-color: rgba(var(--brand-rgb), .22); }
.card:not(.stat):hover { box-shadow: 0 18px 40px -26px rgba(var(--brand-rgb), .55), var(--shadow); }
.list-row:hover { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--brand-rgb), .1), transparent 60%); }
.tt-card:hover { background-image: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%); }
.table-hover tbody tr:hover > * { background-color: rgba(var(--brand-rgb), .045) !important; }
.table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.btn-light:hover { border-color: rgba(var(--brand-rgb), .35); color: var(--brand); box-shadow: 0 8px 18px -12px rgba(var(--brand-rgb), .7); }
.btn-primary:hover { box-shadow: 0 14px 28px -12px rgba(var(--brand-rgb), .95); }
.btn i { transition: transform .35s var(--spring); }
.btn:hover i { transform: scale(1.15) rotate(-8deg); }
.form-control:hover, .form-select:hover { border-color: rgba(var(--brand-rgb), .4); }
.chip-tabs a:not(.active):hover { color: var(--brand); background: rgba(var(--brand-rgb), .07); }
.dropdown-item { transition: background .2s, transform .2s var(--ease), color .2s; }
.dropdown-item:hover { transform: translateX(4px); color: var(--brand); }
.user-chip:hover { border-color: rgba(var(--brand-rgb), .4); box-shadow: 0 8px 20px -14px rgba(var(--brand-rgb), .8); }
.person:hover .nm { color: var(--brand); }
.person .nm { transition: color .2s; }
.swatch:hover { box-shadow: 0 10px 18px -8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35); }
.hero .btn-light:hover { transform: translateY(-2px); }
.idc:hover { box-shadow: 0 40px 70px -25px rgba(var(--brand-rgb), .55), 0 0 0 1px rgba(15,23,42,.06); }
.mode-card:hover, .photo-drop:hover { transform: translateY(-2px); }
.photo-drop, .mode-card { transition: transform .3s var(--ease), border-color .2s, box-shadow .3s; }
.icon-btn:hover { box-shadow: 0 8px 18px -10px rgba(var(--brand-rgb), .8); }
a.text-body:hover, .kv dd a:hover { color: var(--brand) !important; }
.table td.text-end, .table th.text-end { white-space: nowrap; }

/* ---- Leave / Regularize ---- */
.mode-card { border: 2px solid var(--border); border-radius: 14px; cursor: pointer; display: block; background: var(--surface); height: 100%; }
.mode-card input { display: none; }
.mode-card:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: 0 8px 22px -14px rgba(var(--brand-rgb), .9); }
.nav-link-item .nav-badge { margin-left: auto; font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(239,68,68,.2); animation: navPulse 2s infinite; }
@keyframes navPulse { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* ---- Dashboard: celebrations ---- */
.celeb-today { position: relative; overflow: hidden; margin: 12px 14px; padding: 16px; border-radius: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: #fff; isolation: isolate; }
.celeb-today.is-bday { background: linear-gradient(120deg, #ec4899, #f97316 55%, #facc15); box-shadow: 0 14px 30px -16px rgba(236,72,153,.9); }
.celeb-today.is-anniv { background: linear-gradient(120deg, rgb(var(--brand-rgb)), #8b5cf6 55%, #06b6d4); box-shadow: 0 14px 30px -16px rgba(var(--brand-rgb),.9); }
.celeb-today::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.14); z-index: -1; }
.celeb-today .ct-photo { position: relative; }
.celeb-today .ct-photo .avatar { width: 62px; height: 62px; font-size: 20px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.celeb-today .ct-emoji { position: absolute; right: -8px; bottom: -6px; font-size: 24px; animation: ctBounce 1.6s ease-in-out infinite; }
.celeb-today .ct-body { flex: 1; min-width: 150px; }
.celeb-today .ct-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 99px; }
.celeb-today .ct-name { font-size: 18px; font-weight: 800; margin-top: 4px; line-height: 1.2; }
.celeb-today .ct-sub { font-size: 12.5px; opacity: .9; }
.celeb-today .ct-btn { background: #fff; color: #16a34a; font-weight: 700; border-radius: 99px; }
.celeb-today .ct-btn:hover { background: #f0fdf4; color: #15803d; }
.celeb-today .confetti { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.celeb-today .confetti i { position: absolute; top: -10px; left: calc(var(--i) * 7.2%); width: 6px; height: 10px; border-radius: 2px; background: hsl(calc(var(--i) * 47) 95% 75%); opacity: .85; animation: ctFall calc(3s + var(--i) * .25s) linear infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes ctFall { to { transform: translateY(170px) rotate(540deg); } }
@keyframes ctBounce { 50% { transform: translateY(-5px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .celeb-today .confetti i, .celeb-today .ct-emoji { animation: none; } }

/* ---- Dashboard: staff today tabs ---- */
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px !important; }
.st-tabs button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.st-tabs button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.st-tabs em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--surface); color: var(--text); font-size: 11px; display: inline-grid; place-items: center; }
.st-tabs em.bad { background: #ef4444; color: #fff; } .st-tabs em.ok { background: #10b981; color: #fff; }
.st-tabs button.active em:not(.bad):not(.ok) { background: rgba(255,255,255,.25); color: #fff; }
.staff-today .tab-content { max-height: 360px; overflow-y: auto; }

/* ---- Dashboard: absent students ---- */
.abs-sum { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.abs-big { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 22px; background: var(--danger-soft); color: var(--danger); }
.abs-big .n { font-size: 34px; font-weight: 800; line-height: 1; } .abs-big .l { font-size: 12px; font-weight: 700; }
.abs-mini { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); flex: 1; } .abs-mini b { font-size: 16px; margin-right: 4px; }
.abs-ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#10b981 calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-content: center; text-align: center; position: relative; }
.abs-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.abs-ring span, .abs-ring small { position: relative; } .abs-ring span { font-weight: 800; font-size: 17px; line-height: 1; } .abs-ring small { font-size: 10px; color: var(--text-2); }
.absent-card tfoot td { border-top: 2px solid var(--border); }

/* ---- Notifications ---- */
.notif-btn { position: relative; }
.notif-btn .bi-bell-fill { animation: bellRing 3.5s ease-in-out infinite; transform-origin: 50% 0; display: inline-block; }
@keyframes bellRing { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(14deg); } 93% { transform: rotate(-12deg); } 96% { transform: rotate(8deg); } }
.notif-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.notif-menu { width: min(380px, calc(100vw - 24px)); border-radius: 18px !important; overflow: hidden; background: var(--surface); }
.notif-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.notif-head b { font-size: 15px; }
.notif-body { max-height: min(460px, 65vh); overflow-y: auto; }
.notif-sec { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 16px 4px; }
.notif-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 16px; color: var(--text); text-decoration: none; position: relative; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.notif-item:hover { background: var(--surface-2); color: var(--text); }
.notif-item.unread { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.notif-item.unread::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.notif-item.big { padding: 14px 18px; }
.ni-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.ni-ic.t-primary { background: var(--brand-soft); color: var(--brand); } .ni-ic.t-success { background: var(--success-soft); color: var(--success); }
.ni-ic.t-warning { background: var(--warning-soft); color: var(--warning); } .ni-ic.t-danger { background: var(--danger-soft); color: var(--danger); }
.ni-ic.t-info { background: var(--info-soft); color: var(--info); } .ni-ic.t-muted { background: var(--surface-2); color: var(--text-2); }
.ni-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ni-txt b { font-size: 13.2px; font-weight: 700; line-height: 1.3; }
.ni-txt small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ni-txt em { font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ni-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex-shrink: 0; }
.notif-item.live .ni-ic { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.notif-foot { display: block; text-align: center; padding: 11px; font-weight: 700; font-size: 13px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---- Employee of the Month ---- */
.eom-card { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center;
  background: radial-gradient(120% 140% at 0% 0%, #fde68a 0%, #f59e0b 42%, #b45309 100%); color: #422006; box-shadow: 0 20px 40px -22px rgba(180,83,9,.9); isolation: isolate; }
.eom-card.none { background: linear-gradient(120deg, var(--surface-2), var(--surface)); color: var(--text); box-shadow: var(--shadow-sm); border: 1px dashed var(--border); }
.eom-shine { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size: 250% 100%; animation: eomShine 5s ease-in-out infinite; }
.eom-card.none .eom-shine { display: none; }
@keyframes eomShine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -80% 0; } }
.eom-card::after { content: "🏆"; position: absolute; right: -10px; bottom: -30px; font-size: 150px; opacity: .13; z-index: -1; transform: rotate(-12deg); }
.eom-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(66,32,6,.88); color: #fde68a; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; }
.eom-card.none .eom-badge { background: var(--brand); color: #fff; }
.eom-month { font-weight: 800; font-size: 13px; margin-top: 6px; opacity: .8; }
.eom-who { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.eom-photo { position: relative; }
.eom-photo .avatar { width: 78px; height: 78px; border: 4px solid #fff7ed; box-shadow: 0 10px 24px -10px rgba(66,32,6,.7); font-size: 24px; }
.eom-crown { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 26px; animation: ctBounce 2s ease-in-out infinite; }
.eom-name { font-size: 24px; font-weight: 800; line-height: 1.15; }
.eom-sub { font-size: 13px; font-weight: 600; opacity: .8; }
.eom-why { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.4); padding: 3px 10px; border-radius: 99px; }
.eom-stats { display: grid; grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 10px; }
.eom-stats > div { background: rgba(255,255,255,.35); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.5); border-radius: 16px; padding: 12px 10px; text-align: center; }
.eom-stats b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; } .eom-stats b small { font-size: 12px; }
.eom-stats span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.eom-runners { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(66,32,6,.18); }
.eom-card.none .eom-runners { border-color: var(--border); }
.eom-runners > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
.eom-run { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.35); padding: 3px 10px 3px 3px; border-radius: 99px; font-weight: 700; }
.eom-recalc { background: rgba(255,255,255,.4); border: 0; border-radius: 10px; font-weight: 700; color: inherit; }
@media (max-width: 991px) { .eom-card { grid-template-columns: 1fr; } .eom-stats { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .eom-shine, .eom-crown { animation: none; } }

/* ---- Student attendance strip ---- */
.att-strip { display: grid; grid-template-columns: repeat(14, minmax(44px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.as-day { border-radius: 14px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface-2); color: var(--muted); border: 2px solid transparent; transition: transform .25s var(--spring); }
.as-day:hover { transform: translateY(-3px); }
.as-day small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; } .as-day b { font-size: 17px; line-height: 1; }
.as-day span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.as-day.p { background: var(--success-soft); color: var(--success); } .as-day.p span { background: var(--success); color: #fff; }
.as-day.a { background: var(--danger-soft); color: var(--danger); } .as-day.a span { background: var(--danger); color: #fff; }
.as-day.l { background: var(--warning-soft); color: var(--warning); } .as-day.l span { background: var(--warning); color: #fff; }
.as-day.h { background: var(--info-soft); color: var(--info); }
.as-day.today { border-color: var(--brand); }
@media (max-width: 767px) { .att-strip { grid-template-columns: repeat(7, 1fr); } }

/* ---- Holiday banner ---- */
.hol-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--info-soft); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
.hol-banner.today { background: linear-gradient(110deg, #0ea5e9, #22c55e); color: #fff; border: 0; box-shadow: 0 14px 30px -18px rgba(14,165,233,.9); }
.hol-banner .hb-ic { font-size: 28px; line-height: 1; }
.hol-banner b { display: block; font-size: 15px; } .hol-banner small { opacity: .85; font-weight: 600; }

/* ---- Attendance Log ---- */
.al-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
.al-tabs a { padding: 8px 14px; font-weight: 700; font-size: 12.5px; color: var(--brand); border-right: 1px solid var(--border); letter-spacing: .03em; }
.al-tabs a:last-child { border-right: 0; } .al-tabs a.active { background: var(--brand); color: #fff; } .al-tabs a:not(.active):hover { background: var(--brand-soft); }
.al-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--border); }
.al-stats > div { padding: 14px 18px; border-right: 1px solid var(--border); } .al-stats > div:last-child { border-right: 0; }
.al-stats b { display: block; font-size: 20px; font-weight: 800; } .al-stats span { font-size: 11.5px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 991px) { .al-stats { grid-template-columns: repeat(3, 1fr); } .al-stats > div:nth-child(3) { border-right: 0; } .al-stats > div:nth-child(-n+3) { border-bottom: 1px solid var(--border); } }
.al-table td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.al-table tr.is-off td { background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.al-table tr.is-leave td { background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); }
.al-table tr.is-abs td { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.al-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; }
.al-badge.off { background: #d6c7a1; color: #5b4a1f; } .al-badge.hol { background: var(--info-soft); color: var(--info); }
.al-badge.leave { background: #8b5cf6; color: #fff; } .al-badge.half { background: var(--info); color: #fff; } .al-badge.abs { background: var(--danger); color: #fff; }
.al-badge.pend { background: var(--warning-soft); color: var(--warning); } .al-badge.today { background: var(--brand); color: #fff; }
.al-visual { position: relative; height: 26px; min-width: 240px; }
.al-visual .ticks { position: absolute; inset: 6px 0 8px; background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100% / 24)); opacity: .9; }
.al-visual .mk { position: absolute; bottom: 0; width: 0; height: 0; transform: translateX(-5px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid color-mix(in srgb, var(--brand) 55%, var(--muted)); }
.al-visual .bar { position: absolute; top: 8px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #22d3ee, #38bdf8); box-shadow: 0 2px 8px -3px rgba(14,165,233,.7); transition: transform .2s; }
.al-visual .bar.late { background: linear-gradient(90deg, #f59e0b, #38bdf8 35%); }
.al-visual .bar.open { background: repeating-linear-gradient(45deg, #f87171 0 5px, #fecaca 5px 10px); }
.al-visual .bar.live { background: linear-gradient(90deg, #22c55e, #86efac); animation: alPulse 1.8s ease-in-out infinite; }
@keyframes alPulse { 50% { opacity: .55; } }
tr:hover .al-visual .bar { transform: scaleY(1.25); }
.al-ring { --p: 0; display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 4px; background: conic-gradient(#38bdf8 calc(var(--p) * 1%), var(--surface-2) 0); box-shadow: inset 0 0 0 2px color-mix(in srgb, #38bdf8 35%, transparent); }
.al-arr { font-weight: 700; font-size: 13px; } .al-arr.ok { color: var(--success); } .al-arr.late { color: var(--warning); }
.al-log { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 19px; display: inline-grid; place-items: center; }
.al-log:hover { background: var(--surface-2); } .al-log.ok { color: var(--success); } .al-log.mid { color: var(--info); } .al-log.warn { color: var(--warning); animation: bellRing 3.5s infinite; }
.al-pop { width: 290px; border-radius: 16px !important; overflow: hidden; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg, 0 20px 40px -20px rgba(0,0,0,.4)); background: var(--surface); }
.al-pop .ap-head { padding: 14px 16px; background: linear-gradient(135deg, rgb(var(--brand-rgb)), var(--brand-2, #8b5cf6)); color: #fff; font-size: 13.5px; }
.al-pop .ap-act { display: flex; gap: 10px; align-items: center; padding: 11px 16px; font-weight: 700; font-size: 13.5px; color: var(--brand); border-bottom: 1px solid var(--border); }
.al-pop .ap-act:hover { background: var(--brand-soft); }
.al-pop .ap-note { padding: 11px 16px; font-size: 13px; background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.al-pop .ap-times { padding: 12px 16px; background: var(--surface-2); }
.al-pop .ap-times .in, .al-pop .ap-times .out { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; margin-right: 16px; }
.al-pop .ap-times .in i { color: var(--success); } .al-pop .ap-times .out i { color: var(--danger); }
.al-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 18px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--border); }
.al-legend .lg { display: inline-block; width: 22px; height: 8px; border-radius: 99px; vertical-align: 1px; margin-right: 4px; }
.al-legend .lg.bar { background: linear-gradient(90deg, #22d3ee, #38bdf8); } .al-legend .lg.late { background: linear-gradient(90deg, #f59e0b, #38bdf8); }
.al-legend .lg.open { background: repeating-linear-gradient(45deg, #f87171 0 5px, #fecaca 5px 10px); }
.al-legend .lg.mk { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--muted); }
#alPopBox { position: fixed; z-index: 1080; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
#alPopBox.in { opacity: 1; transform: none; }
#alPopBox .al-pop { display: block; }
.al-log.open { background: var(--brand-soft); color: var(--brand); }
.al-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.al-filter .af-f label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-bottom: 3px; }
.al-filter .af-f .form-control, .al-filter .af-f .form-select { min-width: 140px; }
.af-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.af-quick a { padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.af-quick a.active, .af-quick a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.celeb-today.is-stu { background: linear-gradient(120deg, #06b6d4, #3b82f6 55%, #a855f7); box-shadow: 0 14px 30px -16px rgba(59,130,246,.9); }
.celeb-card .celeb-body { max-height: 560px; overflow-y: auto; }
.tt-shift-note { margin: 10px 16px; padding: 8px 12px; border-radius: 10px; background: var(--info-soft); color: var(--info); font-size: 12.5px; font-weight: 600; }
.ct-card .ct-phone { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink, var(--brand)); font-weight: 800; font-size: 17px; letter-spacing: .03em; }
.ct-card .ct-phone:hover { background: var(--brand); color: #fff; }

/* =========================================================
   RESPONSIVE v2 — Desktop sizing + Mobile "app" experience
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; line-height: 1.5; }
img { max-width: 100%; }

/* ---- Desktop: fluid typography & sizes ---- */
.topbar-title h1 { font-size: clamp(18px, .55vw + 12px, 22px); }
.stat .num { font-size: clamp(20px, .9vw + 11px, 27px); }
.card-header h5, .card-title { font-size: clamp(14.5px, .15vw + 13px, 16px); }
.table { font-size: 13.8px; }
.table > thead th { font-size: 11.2px; letter-spacing: .05em; }
@media (min-width: 992px) and (max-width: 1279.98px) {
  :root { --sidebar-w: 236px; }
  body { font-size: 14px; }
  .content { padding: 22px 22px 36px; }
  .topbar { padding: 12px 22px; }
  .card-body { padding: 18px; }
  .stat { padding: 16px; gap: 12px; } .stat .ic { width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
  .nav-link-item { padding: 9px 11px; font-size: 13.5px; }
}
@media (min-width: 1600px) {
  body { font-size: 15px; }
  .content, .topbar, .app-footer { padding-left: max(32px, calc((100% - 1640px) / 2)); padding-right: max(32px, calc((100% - 1640px) / 2)); }
}
/* Laptop screens me lambi subtitle ek line me */
.topbar-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Mobile app shell (< 992px) ---- */
.bottom-nav { display: none; }
.tb-brand { display: none; }
@media (max-width: 991.98px) {
  :root { --bn-h: 64px; }
  body { font-size: 14.5px; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; gap: 10px; min-height: 56px; }
  .topbar-title h1 { font-size: 17.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-title p { font-size: 11.5px; margin-top: 1px; }
  .topbar-right { gap: 6px; }
  .topbar .icon-btn { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
  .user-chip { padding: 3px; border-radius: 12px; } .user-chip .bi-chevron-down { display: none; }
  .tb-brand { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; color: #fff; font-size: 18px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), .8); overflow: hidden; }
  .tb-brand img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
  .content { padding: 14px 12px calc(var(--bn-h) + 24px + env(safe-area-inset-bottom)); }
  .app-footer { display: none; }

  /* Bottom navigation */
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    height: calc(var(--bn-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -18px rgba(15,23,42,.35); }
  .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em; border-radius: 14px; position: relative; -webkit-user-select: none; user-select: none; }
  .bn-item .bn-ic { position: relative; width: 44px; height: 30px; display: grid; place-items: center; border-radius: 99px; font-size: 20px; transition: background .2s, color .2s, transform .2s; }
  .bn-item.active { color: var(--brand); } .bn-item.active .bn-ic { background: var(--brand-soft); }
  .bn-item:active .bn-ic { transform: scale(.9); }
  .bn-fab .bn-ic { width: 52px; height: 52px; margin-top: -26px; border-radius: 18px; color: #fff; font-size: 22px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 22px -8px rgba(var(--brand-rgb), .85), 0 0 0 5px var(--bg); }
  .bn-fab.active .bn-ic { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
  .bn-fab { color: var(--text-2); }
  .bn-badge { position: absolute; top: -2px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 10px; font-style: normal; display: grid; place-items: center; border: 2px solid var(--surface); }
  [data-theme="dark"] .bottom-nav { background: color-mix(in srgb, var(--surface) 88%, transparent); }

  /* Sidebar = bottom "More" drawer ki tarah side se */
  .sidebar { width: min(86vw, 320px); border-radius: 0 22px 22px 0; box-shadow: 20px 0 50px -20px rgba(0,0,0,.5); padding-top: env(safe-area-inset-top); }
  .side-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .nav-link-item { padding: 11px 12px; font-size: 14.5px; }

  /* Cards & stats — compact */
  .card { border-radius: 16px; }
  .card-header { padding: 12px 14px; gap: 8px; }
  .card-header h5 { font-size: 15px; }
  .card-body { padding: 14px; }
  .card-footer { padding: 12px 14px; }
  .row.g-4 { --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; }
  .row.g-3 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
  .mb-4 { margin-bottom: 1rem !important; }
  .stat { padding: 13px; gap: 10px; flex-direction: column; }
  .stat .ic { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
  .stat .lbl { font-size: 10.5px; letter-spacing: .03em; }
  .stat .num { font-size: clamp(18px, 5.2vw, 22px); margin-top: 2px; word-break: break-word; }
  .stat .meta { font-size: 11.5px; }
  .hero { padding: 18px !important; border-radius: 20px !important; }
  .hero h2 { font-size: 20px !important; }
  .hero p { font-size: 13px; }
  .hero .d-flex.gap-2 { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px; width: calc(100% + 36px); }
  .hero .d-flex.gap-2::-webkit-scrollbar { display: none; }
  .hero .btn { white-space: nowrap; flex: 0 0 auto !important; }

  /* Tables: sideways swipe, sticky pehla column, halka fade */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  .table-wrap::-webkit-scrollbar { display: none; }
  .table { font-size: 13px; }
  .table > :not(caption) > * > * { padding: 10px 10px; }
  .table > thead th { font-size: 10.5px; white-space: nowrap; }
  .person .nm { font-size: 13.5px; } .person .sub { font-size: 11.5px; }

  /* Tabs / chips: ek line, swipe */
  .chip-tabs, .al-tabs, .st-tabs, .af-quick { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .chip-tabs::-webkit-scrollbar, .al-tabs::-webkit-scrollbar, .st-tabs::-webkit-scrollbar, .af-quick::-webkit-scrollbar { display: none; }
  .chip-tabs a, .al-tabs a, .st-tabs button, .af-quick a { white-space: nowrap; flex-shrink: 0; }
  .al-tabs { margin-left: 0 !important; width: 100%; }

  /* Forms: 16px taaki iPhone zoom na kare, bada touch area */
  .form-control, .form-select { font-size: 16px; min-height: 44px; border-radius: 12px; }
  .form-control-sm, .form-select-sm { font-size: 15px; min-height: 38px; }
  .btn { min-height: 40px; border-radius: 12px; }
  .btn-sm { min-height: 34px; }
  .btn-icon.btn-sm { min-width: 34px; }
  .list-row { padding: 11px 14px; }

  /* Modals: neeche se khulne wali "bottom sheet" */
  .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
  .modal.fade .modal-dialog { transform: translateY(40px); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .modal.show .modal-dialog { transform: none; }
  .modal-content { border-radius: 22px 22px 0 0 !important; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); border: 0; width: 100%; }
  .modal-content::before { content: ""; display: block; width: 42px; height: 5px; border-radius: 99px; background: var(--border); margin: 8px auto 0; flex-shrink: 0; }
  .modal-header, .modal-footer { padding: 12px 16px; } .modal-body { padding: 14px 16px; }
  .modal-footer { position: sticky; bottom: 0; background: var(--surface); }
  .modal-footer .btn { flex: 1; }

  /* Popups / dropdowns */
  .notif-menu { position: fixed !important; inset: calc(58px + env(safe-area-inset-top)) 8px auto 8px !important; transform: none !important; width: auto !important; }
  .notif-body { max-height: calc(100vh - 200px); }
  .swal2-popup { width: calc(100vw - 32px) !important; border-radius: 20px !important; font-size: 15px !important; }
  #alPopBox { left: 8px !important; right: 8px; } #alPopBox .al-pop { width: auto; }

  /* Page-specific tweaks */
  .al-stats { grid-template-columns: repeat(3, 1fr); } .al-stats > div { padding: 10px 12px; } .al-stats b { font-size: 16px; } .al-stats span { font-size: 10px; }
  .al-filter { padding: 10px 12px; gap: 8px; } .al-filter .af-f { flex: 1 1 45%; } .al-filter .af-f .form-control, .al-filter .af-f .form-select { min-width: 0; width: 100%; }
  .eom-card { padding: 16px; border-radius: 20px; gap: 12px; } .eom-name { font-size: 20px; } .eom-photo .avatar { width: 62px; height: 62px; }
  .eom-stats b { font-size: 18px; }
  .celeb-today { margin: 10px 12px; padding: 14px; } .celeb-today .ct-name { font-size: 16px; }
  .abs-big { width: 76px; height: 76px; } .abs-big .n { font-size: 28px; } .abs-ring { width: 70px; height: 70px; }
  .timing-now .tn-time { font-size: 24px; }
  .tt-grid { font-size: 12px; } .tt-card { padding: 6px 8px; }
  .hol-banner { padding: 12px 14px; } .hol-banner .hb-ic { font-size: 24px; }
  .att-strip { gap: 6px; }
  .kv { font-size: 13.5px; }
}
@media (max-width: 575.98px) {
  .al-stats { grid-template-columns: repeat(2, 1fr); }
  .al-stats > div { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); }
  .al-stats > div:nth-child(2n) { border-right: 0 !important; }
  .eom-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .d-flex.flex-wrap.gap-2 > .btn { flex: 1 1 auto; }
}

/* Touch devices: hover wale effects band (fast + jank-free) */
@media (hover: none) {
  .card:hover, .list-row:hover, .mode-card:hover, .photo-drop:hover, .badge-soft:hover, tr:hover .avatar, .list-row:hover .avatar { transform: none !important; }
  .card:hover, .list-row:hover, .tt-card:hover { background-image: none; }
  .hero { animation: none; }
}
/* Tap feedback */
@media (max-width: 991.98px) {
  a.list-row:active, .btn:active, .nav-link-item:active { opacity: .75; }
  .m-in { transition-duration: .35s !important; }
}
.table-wrap { position: relative; }
@media (max-width: 991.98px) {
  .table-wrap.can-scroll { background: linear-gradient(to left, rgba(15,23,42,.08), transparent 18px) right / 18px 100% no-repeat; }
}
@media (max-width: 575.98px) {
  .att-table .avatar { display: none; }
  .att-table td, .att-table th { padding-left: 8px !important; padding-right: 8px !important; }
  .att-toggle label { padding: 9px 13px; font-size: 14px; }
  .att-table .nm { font-size: 13.5px; line-height: 1.25; }
}

/* ---- Language picker ---- */
.lang-pick .icon-btn { position: relative; }
.lang-badge { position: absolute; bottom: -4px; right: -4px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; line-height: 1; border: 2px solid var(--surface); }
.lang-menu { min-width: 190px; border-radius: 14px !important; padding: 6px; }
.lang-menu .dropdown-item { border-radius: 10px; padding: 8px 10px; font-weight: 600; }
.lang-menu .dropdown-item.active { background: var(--brand-soft); color: var(--brand-ink); }
.lang-code { width: 30px; height: 24px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
/* Hindi: Devanagari ko thodi zyada line-height chahiye, uppercase letter-spacing nahi */
html[data-lang="hi"] body { line-height: 1.6; }
html[data-lang="hi"] .stat .lbl, html[data-lang="hi"] .nav-group, html[data-lang="hi"] .table > thead th, html[data-lang="hi"] .notif-sec { letter-spacing: 0; text-transform: none; }
html[data-lang="hi"] body * { letter-spacing: 0 !important; }

/* QA fixes: students/fees */
.hero-actions { min-width: 0; max-width: 100%; }
@media (max-width: 575.98px) {
  .hero { padding: 20px 16px; }
  .hero h2 { font-size: 20px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
}

/* QA fixes: staff */
/* Dashboard hero buttons: mobile par horizontal scroll me kat jaate the (Collect Fee / WhatsApp) — ab wrap hote hain */
@media (max-width: 991.98px) {
  .hero .hero-actions.d-flex.gap-2 { flex-wrap: wrap !important; overflow: visible; margin: 0; padding: 0; width: 100%; }
  .hero .hero-actions .btn { flex: 1 1 auto !important; white-space: nowrap; }
}
@media (max-width: 575.98px) {
  .hero .hero-actions .btn { flex: 1 1 calc(50% - 8px) !important; justify-content: center; }
}
.ap-note .bi-lock { opacity: .7; }

/* ---------- Single login page (Admin / Teacher / Student) ---------- */
.login-roles{display:flex;gap:8px;flex-wrap:wrap}
.login-roles span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--bs-tertiary-bg,#f1f5f9);color:var(--bs-secondary-color,#64748b)}
.demo-logins{border:1px dashed var(--bs-border-color,#e2e8f0);border-radius:16px;padding:14px}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.demo-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 25%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent);color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;min-width:0}
.demo-tile i{font-size:1.4rem;color:var(--c)}
.demo-tile b{font-size:.85rem}
.demo-tile code{font-size:.72rem;color:var(--c);background:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.demo-tile.busy{opacity:.6;pointer-events:none}
@media (max-width:360px){.demo-grid{gap:6px}.demo-tile{padding:10px 4px}}