/* ===================== Shalavya design system ===================== */
/* Corporate palette taken from the Shalavya logo: deep navy ink, logo blue as the primary, orange as the accent.
   Every colour used across the app is a variable here, so the palette can be changed in one place. */
:root {
  --navy: #061a3a; --navy-2: #0a2550; --navy-3: #0f2f63;
  --brand: #0b4a9b; --brand-600: #083b7d; --brand-700: #062d61; --brand-50: #eff4fb; --brand-100: #dce7f5;
  --accent: #f26b1d; --accent-600: #d85a0f; --accent-50: #fff3ea; --accent-100: #ffe1cc;
  --ink: #0f1f3d; --ink-2: #33415c; --muted: #66758c; --line: #e2e7ee; --line-2: #eef1f5;
  --bg: #f3f5f9; --surface: #ffffff; --surface-2: #f8fafc;
  --sb-bg: #061a3a; --sb-bg-2: rgba(255, 255, 255, .06); --sb-fg: #c3cddd; --sb-muted: #7d8ca5; --sb-active: #ffffff; --sb-hover: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .08);
  --sb-w: 256px; --radius: 8px; --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(6, 26, 58, .06), 0 1px 3px rgba(6, 26, 58, .04); --shadow: 0 4px 14px rgba(6, 26, 58, .08);
  --shadow-lg: 0 14px 34px rgba(6, 26, 58, .14);
  --thead-grad: #f1f4f8; --thead-ink: #33415c;
  --font-head: 'Poppins', 'Inter', system-ui, sans-serif;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-primary: #0b4a9b; --bs-primary-rgb: 11, 74, 155; --bs-link-color: #0b4a9b; --bs-link-color-rgb: 11, 74, 155; --bs-link-hover-color: #083b7d;
  --bs-border-color: #e2e7ee; --bs-body-color: #0f1f3d; --bs-secondary-color: #66758c; --bs-border-radius: 6px;
}
[data-bs-theme="dark"] {
  --brand: #4d8fe0; --brand-600: #6fa6ea; --brand-700: #93bdf1;
  --ink: #e5ebf3; --ink-2: #c4cedc; --muted: #8e9bb0; --line: #24324a; --line-2: #1b2639;
  --bg: #08111f; --surface: #0f1a2c; --surface-2: #0c1625; --brand-50: rgba(77, 143, 224, .12); --brand-100: rgba(77, 143, 224, .24);
  --accent-50: rgba(242, 107, 29, .14); --accent-100: rgba(242, 107, 29, .26);
  --sb-bg: #050e1d; --sb-line: rgba(255, 255, 255, .06);
  --bs-border-color: #24324a; --bs-body-color: #e5ebf3; --bs-body-bg: #08111f;
  --bs-primary-rgb: 77, 143, 224; --bs-link-color: #6fa6ea; --bs-link-color-rgb: 111, 166, 234; --bs-link-hover-color: #93bdf1;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 14px 34px rgba(0, 0, 0, .5);
  --thead-grad: #132037; --thead-ink: #c4cedc;
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--bs-body-font-family); font-size: .9rem; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); text-decoration: underline; }
.min-w-0 { min-width: 0; }
.tiny { font-size: .72rem; }
.fw-medium { font-weight: 500; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }
.text-accent { color: var(--accent) !important; }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #bf4f0c; --bs-btn-active-border-color: #bf4f0c; --bs-btn-focus-shadow-rgb: 242, 107, 29; }

/* ---------- Buttons & forms ---------- */
/* One size scale for every control: body text is .9rem, so buttons and inputs match it instead of the browser default 1rem */
.btn { --bs-btn-font-size: .875rem; border-radius: 6px; font-weight: 500; }
.btn:not(.btn-sm):not(.btn-lg) { padding: .45rem 1rem; }
.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; }
.btn-lg { --bs-btn-font-size: .95rem; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.25rem; }
.btn > .bi { vertical-align: -.1em; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-active-bg: var(--brand-700); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-100); --bs-btn-active-color: var(--brand-600); }
.btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #cbd5e1; --bs-btn-active-bg: var(--line-2); --bs-btn-active-color: var(--ink); }
.btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--line-2); --bs-btn-color: var(--ink-2); }
.btn-success { --bs-btn-bg: #22b35b; --bs-btn-border-color: #22b35b; --bs-btn-hover-bg: #1b964b; --bs-btn-hover-border-color: #1b964b; }
.btn-danger { --bs-btn-bg: #ed3a3a; --bs-btn-border-color: #ed3a3a; --bs-btn-hover-bg: #d42525; --bs-btn-hover-border-color: #d42525; }
.btn-outline-success { --bs-btn-color: #15803d; --bs-btn-border-color: #bbf7d0; --bs-btn-hover-bg: #f0fdf4; --bs-btn-hover-color: #166534; --bs-btn-hover-border-color: #86efac; }
.btn-outline-danger { --bs-btn-border-color: #fecaca; --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-color: #b91c1c; --bs-btn-hover-border-color: #fca5a5; }
.btn-link { text-decoration: none; }
.btn .spinner-border { width: .9rem; height: .9rem; border-width: .15em; }
.form-control, .form-select { border-color: var(--line); border-radius: 6px; min-height: 40px; color: var(--ink); font-size: .875rem; }
.form-control::placeholder { color: #94a0b3; }
.form-control-sm, .form-select-sm { min-height: 32px; font-size: .8rem; }
.form-control-lg, .form-select-lg { font-size: 1rem; }
.form-control[type=file] { padding-top: 0; padding-bottom: 0; line-height: 38px; }
.form-control[type=file]::file-selector-button { height: 38px; margin-top: 0; margin-bottom: 0; background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.input-group-text { font-size: .875rem; }
.ts-control, .ts-dropdown { font-size: .875rem; }
textarea.form-control { min-height: 80px; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: #8db4e8; box-shadow: 0 0 0 .2rem rgba(11, 74, 155, .15); }
.form-label { font-weight: 500; font-size: .84rem; color: var(--ink); margin-bottom: .4rem; }
.form-text { font-size: .76rem; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-control { border-radius: var(--radius-sm); border-color: var(--line); }
.ts-wrapper.focus .ts-control { border-color: #8db4e8; box-shadow: 0 0 0 .2rem rgba(11, 74, 155, .15); }

/* ---------- Soft status badges ---------- */
.badge { font-weight: 500; letter-spacing: .01em; border-radius: 4px; padding: .35em .6em; }
.badge.text-bg-success { background: #e1ffed !important; color: #1f9d55 !important; }
.badge.text-bg-danger { background: #ffecec !important; color: #e62d2d !important; }
.badge.text-bg-warning { background: #fff6dc !important; color: #c98a00 !important; }
.badge.text-bg-info { background: #ddf3ff !important; color: #1d8fe1 !important; }
.badge.text-bg-primary { background: var(--brand-100) !important; color: var(--brand-700) !important; }
.badge.text-bg-secondary { background: #f1f5f9 !important; color: #475569 !important; }
.badge.text-bg-dark { background: #e2e8f0 !important; color: #0f172a !important; }
.badge.text-bg-light { background: var(--line-2) !important; color: var(--ink-2) !important; }
[data-bs-theme="dark"] .badge.text-bg-success { background: rgba(22, 163, 74, .2) !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge.text-bg-danger { background: rgba(220, 38, 38, .2) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.text-bg-warning { background: rgba(217, 119, 6, .2) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.text-bg-info { background: rgba(2, 132, 199, .2) !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .badge.text-bg-primary { background: rgba(11, 74, 155, .25) !important; color: #8db4e8 !important; }
[data-bs-theme="dark"] .badge.text-bg-secondary, [data-bs-theme="dark"] .badge.text-bg-dark { background: #1e293b !important; color: #cbd5e1 !important; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sb-w); flex-shrink: 0; background: var(--sb-bg); color: var(--sb-fg); position: fixed; inset: 0 auto 0 0; z-index: 1040;
  display: flex; flex-direction: column; transition: transform .2s ease, width .2s ease; }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 40% at 0% 0%, rgba(11, 74, 155, .45), transparent 70%); }
.sidebar > * { position: relative; }
.sidebar-top { padding: 0 14px 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; height: 64px; margin: 0 -14px 12px; padding: 0 20px; border-bottom: 1px solid var(--sb-line); }
.brand-logo { height: 38px; width: auto; max-width: 100%; }
.brand-icon { display: none; width: 36px; height: 36px; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--navy)); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.menu-search { position: relative; }
.menu-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sb-muted); font-size: .8rem; }
.menu-search input { width: 100%; background: var(--sb-bg-2); border: 1px solid var(--sb-line); color: #fff; border-radius: 6px; padding: 7px 10px 7px 31px; font-size: .8rem; outline: none; }
.menu-search input:focus { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .09); }
.menu-search input::placeholder { color: var(--sb-muted); }
.menu { flex: 1; overflow-y: auto; padding: 0 0 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.menu-section { font-size: .66rem; color: var(--sb-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 18px 24px 6px; }
.menu-head, .menu-link.top { position: relative; width: calc(100% - 20px); margin: 1px 10px; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--sb-fg);
  padding: 8px 12px 8px 14px; font-size: .85rem; text-align: left; text-decoration: none !important; font-weight: 400; border-radius: 6px; }
.menu-head > i:first-child, .menu-link.top > i { font-size: 1rem; width: 18px; text-align: center; color: var(--sb-muted); }
.menu-head:hover, .menu-link.top:hover { color: #fff; background: var(--sb-hover); }
.menu-head:hover > i:first-child, .menu-link.top:hover > i { color: #fff; }
.menu-head span { flex: 1; }
.menu-head .caret { font-size: .65rem; transition: transform .2s; opacity: .6; }
.menu-group.open > .menu-head { color: #fff; font-weight: 500; }
.menu-group.open > .menu-head > i:first-child { color: #fff; }
.menu-group.open > .menu-head .caret { transform: rotate(90deg); }
.menu-group.has-active > .menu-head > i:first-child { color: var(--accent); }
.menu-link.top.active { color: #fff !important; background: var(--brand) !important; font-weight: 500; box-shadow: 0 6px 16px -8px rgba(11, 74, 155, .9); }
.menu-link.top.active > i { color: #fff; }
.menu-items { display: none; margin: 2px 10px 6px 27px; padding: 0 0 0 12px; border-left: 1px solid var(--sb-line); }
.menu-group.open .menu-items, .menu.searching .menu-items { display: block; }
.menu-items .menu-link { display: block; padding: 6px 10px; margin: 1px 0; border-radius: 6px; color: var(--sb-fg); font-size: .8rem; text-decoration: none !important; position: relative; }
.menu-items .menu-link:hover { color: #fff; background: var(--sb-hover); }
.menu-items .menu-link.active { color: #fff !important; font-weight: 500; background: var(--sb-hover) !important; }
.menu-items .menu-link.active::before { content: ""; position: absolute; left: -13px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
.menu-sub { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-muted); padding: 8px 10px 3px; font-weight: 600; }
.sb-powered { display: flex; align-items: center; gap: 8px; padding: 0 20px 14px; font-size: .68rem; color: var(--sb-muted); }
.sb-powered img { height: 18px; width: auto; }
/* Minimise / expand button on the sidebar edge */
.sidebar > .sb-toggle { position: absolute; z-index: 2; top: 20px; right: -13px; width: 26px; height: 26px; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: .75rem; box-shadow: var(--shadow); transition: background .15s, color .15s, transform .2s; }
.sidebar > .sb-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.sidebar > .sb-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar > .sb-toggle i { transition: transform .2s; }
.sb-mini .sidebar > .sb-toggle i { transform: rotate(180deg); }
/* Simple / Full menu switch at the foot of the sidebar */
.sb-mode { margin: 6px 12px 12px; }
.sb-mode button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03); color: var(--sb-fg); font-size: .82rem; text-align: left; transition: background .15s, border-color .15s, color .15s; }
.sb-mode button:hover { color: #fff; background: var(--sb-hover); border-color: rgba(255, 255, 255, .3); }
.sb-mode i { font-size: 1rem; color: #ffb27f; }
.sb-mode span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sb-mode small { font-size: .68rem; color: var(--sb-muted); }
.sb-mini .sb-mode { margin: 6px 10px 12px; }
.sb-mini .sb-mode button { justify-content: center; padding: 9px 0; }
.sb-mini .sb-mode span { display: none; }
.main { flex: 1; margin-left: var(--sb-w); min-width: 0; display: flex; flex-direction: column; transition: margin .2s ease; }
/* Collapsed (icon-only) sidebar */
.sb-mini { --sb-w: 72px; }
.sb-mini .brand-logo, .sb-mini .sb-powered, .sb-mini .menu-search, .sb-mini .menu-section, .sb-mini .menu-head span, .sb-mini .menu-head .caret, .sb-mini .menu-link.top span, .sb-mini .menu-items { display: none !important; }
.sb-mini .brand-icon { display: block; }
.sb-mini .menu-head, .sb-mini .menu-link.top { justify-content: center; padding: 9px 0; }
.sb-mini .brand { justify-content: center; padding: 0; margin-bottom: 8px; }

.topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 10px; padding: 10px 24px; height: 64px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-ctx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; padding-right: 16px; margin-right: 6px; border-right: 1px solid var(--line); }
.topbar-ctx b { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.topbar-ctx small { font-size: .7rem; color: var(--muted); }
.global-search { display: flex; align-items: center; gap: 10px; min-width: 0; width: min(420px, 100%); padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--muted); font-size: .85rem; text-align: left; }
.global-search:hover { border-color: var(--brand-100); background: var(--surface); }
.global-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; font-size: .68rem; padding: 1px 6px; border-radius: 5px; font-family: inherit; }
.icon-btn { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--ink-2); font-size: 1.1rem; text-decoration: none !important; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.dot-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.user-btn { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.user-btn:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #0b4a9b, #061a3a); flex-shrink: 0; }
.notif-menu { width: 340px; max-width: 92vw; border-radius: var(--radius); overflow: hidden; }
.notif-item { white-space: normal; padding: .6rem 1rem; border-bottom: 1px solid var(--line-2); }
.notif-item.unread { background: var(--brand-50); }
.content { padding: 24px 28px 32px; flex: 1; width: 100%; max-width: 1600px; }
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 28px; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface); }
.footer-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
/* Full Shalavya logo: dark-text version on light theme, white-text version on dark theme */
.shalavya-logo { display: inline-block; max-width: 100%; }
.logo-theme-dark { display: none !important; }
[data-bs-theme="dark"] .logo-theme-light { display: none !important; }
[data-bs-theme="dark"] .logo-theme-dark { display: inline-block !important; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.page-title { font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; margin: 0; letter-spacing: -.015em; color: var(--ink); }
.page-sub { color: var(--muted); margin: 4px 0 0; font-size: .86rem; }
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs span:nth-child(even) { opacity: .5; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
[data-bs-theme="dark"] .card { border: 1px solid var(--line); }
.card-header { background: transparent; border-bottom: 1px solid var(--line-2); font-weight: 600; padding: 1rem 1.25rem; font-size: .95rem; color: var(--ink); }
.card-body { padding: 1.25rem; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--line); }
.card > .table-responsive:last-child, .card > .table:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.list-group-item { border-color: var(--line-2); background: transparent; }

/* ---------- Stat tiles ---------- */
.stat-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); height: 100%; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s, transform .15s; }
.stat-card.is-link:hover { border-color: var(--brand-100); box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.stat-label { color: var(--muted); font-size: .78rem; font-weight: 500; }
.stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-sub { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.stat-go { position: absolute; right: 12px; top: 12px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.stat-card.is-link:hover .stat-go { opacity: 1; }
.tone-primary { background: #e2ecf8; color: var(--brand-600); } .tone-success { background: #dcfce7; color: #15803d; } .tone-danger { background: #fee2e2; color: #b91c1c; }
.tone-warning { background: #fef3c7; color: #b45309; } .tone-info { background: #e0f2fe; color: #0369a1; } .tone-secondary { background: #f1f5f9; color: #475569; }
[data-bs-theme="dark"] .tone-primary { background: rgba(77, 143, 224, .18); color: #8db4e8; } [data-bs-theme="dark"] .tone-success { background: rgba(22, 163, 74, .2); color: #86efac; }
[data-bs-theme="dark"] .tone-danger { background: rgba(220, 38, 38, .2); color: #fca5a5; } [data-bs-theme="dark"] .tone-warning { background: rgba(217, 119, 6, .2); color: #fcd34d; }
[data-bs-theme="dark"] .tone-info { background: rgba(2, 132, 199, .2); color: #7dd3fc; } [data-bs-theme="dark"] .tone-secondary { background: #1e293b; color: #cbd5e1; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: var(--line-2); }
.table > thead { background: var(--thead-grad); border-bottom: 1px solid var(--line); }
.table > thead > tr > th { background: transparent; color: var(--thead-ink); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; border-bottom: 0; padding-top: .8rem; padding-bottom: .8rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--brand-50); }
.table a { font-weight: 500; }
.table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
.data-table td { vertical-align: middle; white-space: nowrap; }
.data-table td.wrap { white-space: normal; }
.cell-title { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cell-title .avatar { width: 30px; height: 30px; font-size: .7rem; }
.cell-title img.thumb { width: 30px; height: 30px; border-radius: 50%; }
.cell-title a { color: var(--ink); font-weight: 600; }
.cell-title a:hover { color: var(--brand); }
.sticky-head thead th { position: sticky; top: 64px; z-index: 2; background: #eef3f9; }
[data-bs-theme="dark"] .sticky-head thead th { background: #16233a; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-actions .btn { padding: .25rem .5rem; }
.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

/* Wide tables: a soft shadow appears on whichever side has more columns to scroll to */
.table-responsive { background: linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(6, 26, 58, .16), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(6, 26, 58, .16), transparent) right center / 14px 100% no-repeat scroll; scrollbar-width: thin; }
[data-bs-theme="dark"] .table-responsive { background-image: linear-gradient(to right, var(--surface) 30%, transparent), linear-gradient(to left, var(--surface) 30%, transparent), radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .5), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), transparent); }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toolbar .search { position: relative; flex: 1 1 240px; max-width: 360px; }
.toolbar .search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 32px; }
.filter-panel { padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: .76rem; font-weight: 500; border: 1px solid var(--brand-100); }
.chip a { color: inherit; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; text-decoration: none !important; }
.chip a:hover { background: var(--brand-100); }
[data-bs-theme="dark"] .chip { color: #8db4e8; }

/* ---------- Forms (CRUD) ---------- */
.form-section { padding: 20px; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: 0; }
.form-section-title { font-size: .95rem; font-weight: 600; margin-bottom: 2px; }
.form-section-sub { color: var(--muted); font-size: .8rem; margin-bottom: 14px; }
.form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.req { color: #dc2626; }

/* ---------- Detail view ---------- */
.record-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; }
.record-hero .hero-avatar { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--brand), #3a78c9); flex-shrink: 0; object-fit: cover; }
.record-hero h2 { font-size: 1.2rem; margin: 0; }
.record-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; }
.kv > div { padding: 9px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 12px; }
.kv dt { flex: 0 0 42%; color: var(--muted); font-weight: 400; font-size: .82rem; }
.kv dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nav-tabs { border-bottom-color: var(--line); gap: 2px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; padding: .6rem .9rem; white-space: nowrap; }
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav-tabs .nav-link.active { color: var(--brand); background: none; border-bottom-color: var(--brand); }
.nav-tabs .count { font-size: .68rem; background: var(--line-2); color: var(--muted); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.nav-pills .nav-link.active { background: var(--brand); }

/* ---------- Empty states, palette, toasts, confirm ---------- */
.empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: var(--brand-50); color: var(--brand); }
.empty-state h6 { color: var(--ink); margin-bottom: 4px; }
.empty-state p { font-size: .85rem; max-width: 440px; margin: 0 auto 14px; }
.palette { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-input i { color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: 0; background: none; font-size: 1rem; color: var(--ink); }
.pal-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; padding: 10px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none !important; }
.pal-item i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pal-item small { color: var(--muted); margin-left: auto; }
.pal-item.sel, .pal-item:hover { background: var(--brand-50); color: var(--ink); }
.pal-item.sel i { color: var(--brand); border-color: var(--brand-100); }
.toast { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); background: var(--surface); }
.toast .toast-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.confirm-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 1.5rem; background: var(--brand-50); color: var(--brand); }
.confirm-icon.danger { background: #fee2e2; color: #dc2626; }
.modal-content { border-radius: 14px; border-color: var(--line); }
.alert { border-radius: 10px; border-width: 1px; }
.dropdown-menu { border-color: var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: .35rem; }
.dropdown-item { border-radius: 6px; padding: .45rem .75rem; font-size: .86rem; }
.pagination { --bs-pagination-border-radius: 8px; --bs-pagination-color: var(--ink-2); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-border-color: var(--line); gap: 4px; }
.pagination .page-link { border-radius: 8px !important; min-width: 32px; text-align: center; }
.progress { background: var(--line-2); border-radius: 999px; }
.progress-bar { background-color: var(--brand); border-radius: 999px; }

/* ---------- Module specific ---------- */
.detail-grid dt, .detail-grid dd { padding: .35rem 0; border-bottom: 1px dashed var(--line); margin: 0; }
.tt-grid td, .tt-grid th { min-width: 110px; font-size: .8rem; vertical-align: top; }
.tt-cell { border-radius: 8px; padding: .35rem .5rem; background: var(--brand-50); border-left: 3px solid var(--brand); min-height: 44px; }
.tt-cell .sub { font-weight: 600; }
.tt-cell.conflict { background: #fee2e2; border-left-color: #dc2626; }
.tt-break { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, .03) 6px, rgba(0, 0, 0, .03) 12px); text-align: center; color: var(--muted); }
.att-grid .btn-check + .btn { min-width: 38px; font-weight: 600; }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { min-width: 260px; max-width: 290px; flex: 1 0 260px; background: var(--line-2); border-radius: 12px; padding: 10px; }
.kanban-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem; font-size: .83rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.kanban-card:hover { box-shadow: var(--shadow); text-decoration: none !important; }
.profile-photo { width: 104px; height: 104px; object-fit: cover; border-radius: 50%; border: 4px solid var(--surface); box-shadow: var(--shadow); }
.profile-initial { width: 104px; height: 104px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #3a78c9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 600; flex-shrink: 0; }
.risk-High { border-left: 4px solid #dc2626 !important; } .risk-Medium { border-left: 4px solid #f59e0b !important; } .risk-Low { border-left: 4px solid #facc15 !important; }
#map { height: 520px; border-radius: 10px; }
.chart-box { position: relative; }

/* ---------- Responsive ---------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: 280px; }
  .sidebar.show { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; }
  .main { margin-left: 0 !important; }
  .content { padding: 16px 14px 28px; }
  .topbar { padding: 8px 12px; gap: 6px; }
  .global-search { width: auto; flex: 1; }
  .sticky-head thead th { position: static; }
}
@media (max-width: 575.98px) {
  body { font-size: .88rem; }
  .page-title { font-size: 1.15rem; }
  .page-actions { margin-left: 0; width: 100%; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .stat-value { font-size: 1.1rem; }
  .kv { grid-template-columns: 1fr; }
  .user-btn { padding: 3px; border: 0; }
  .form-section { padding: 16px; }
  .toolbar .search { max-width: none; }
  .chat-msg { max-width: 92%; }
}
@media print {
  .sidebar, .topbar, .footer, .no-print, .btn, .page-actions, .toolbar, .filter-panel, .crumbs { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 0; }
  body { background: #fff; }
}

/* ---------- Responsive top bar ---------- */
.topbar-logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 4px; }
.topbar-logo .tl-mark { display: none; width: 34px; height: 34px; }
@media (max-width: 991.98px) {
  .topbar { gap: 8px; }
  /* Search becomes an icon button that still opens the full search palette */
  .topbar .global-search { flex: 0 0 38px; width: 38px; min-width: 0; height: 38px; padding: 0; margin-left: auto; justify-content: center; border-radius: 8px; }
  .topbar .global-search span, .topbar .global-search kbd { display: none !important; }
  .topbar > .ms-auto { margin-left: 0 !important; }
}
@media (max-width: 767.98px) {
  .topbar .global-search i { font-size: 1rem; color: var(--ink-2); }
}
@media (max-width: 575.98px) {
  .topbar { padding: 8px 10px; gap: 4px; height: 58px; }
  .topbar .icon-btn { width: 36px; height: 36px; font-size: 1.05rem; }
  .topbar .global-search { flex-basis: 36px; width: 36px; height: 36px; }
  .topbar .avatar { width: 32px; height: 32px; }
  .topbar .user-btn { padding: 2px; border: 0; }
  .sticky-head thead th { top: 58px; }
}
@media (max-width: 379.98px) {
  .topbar-logo .tl-full { display: none !important; }
  .topbar-logo .tl-mark { display: block; }
}
/* ---------- Management dashboard ---------- */
.dash-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #fecaca; background: #fef2f2; border-radius: var(--radius); font-size: .86rem; }
.dash-banner-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #fee2e2; color: #b91c1c; flex-shrink: 0; }
[data-bs-theme="dark"] .dash-banner { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); }
[data-bs-theme="dark"] .dash-banner-icon { background: rgba(220, 38, 38, .2); color: #fca5a5; }
.kpi { display: flex; flex-direction: column; height: 100%; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: var(--ink); transition: box-shadow .15s, border-color .15s, transform .15s; }
a.kpi:hover { color: var(--ink); text-decoration: none; border-color: var(--brand-100); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.kpi-label { color: var(--muted); font-size: .8rem; font-weight: 500; }
.kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 12px; font-variant-numeric: tabular-nums; }
.kpi-meta { color: var(--muted); font-size: .76rem; margin-top: 6px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 1px; font-weight: 600; font-size: .72rem; padding: 1px 6px; border-radius: 999px; margin-right: 2px; }
.kpi-delta.up { background: #dcfce7; color: #15803d; } .kpi-delta.down { background: #fee2e2; color: #b91c1c; } .kpi-delta.flat { background: var(--line-2); color: var(--muted); }
[data-bs-theme="dark"] .kpi-delta.up { background: rgba(22, 163, 74, .2); color: #86efac; } [data-bs-theme="dark"] .kpi-delta.down { background: rgba(220, 38, 38, .2); color: #fca5a5; }
.kpi-spark { margin-top: auto; padding-top: 10px; }
.kpi-progress { height: 6px; background: var(--line-2); }
.kpi-split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; }
.bg-boys { background: #3b82f6; } .bg-girls { background: #ec4899; }
.ops-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ops-item { display: flex; gap: 10px; padding: 14px 16px; color: var(--ink); border-left: 1px solid var(--line-2); }
.ops-item:first-child { border-left: 0; }
.ops-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ops-item > i { color: var(--muted); font-size: 1.05rem; margin-top: 1px; }
.ops-label { color: var(--muted); font-size: .72rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-value { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ops-value small { font-size: .75rem; color: var(--muted); font-weight: 500; }
.ops-sub { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-list { display: flex; flex-direction: column; }
.attn-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.attn-item:last-child { border-bottom: 0; }
a.attn-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.attn-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.attn-title { font-weight: 500; font-size: .84rem; }
.attn-sub { color: var(--muted); font-size: .72rem; }
.attn-count { white-space: nowrap; font-weight: 700; font-size: .8rem; min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.sev-danger { background: #fee2e2; color: #b91c1c; } .sev-warning { background: #fef3c7; color: #b45309; } .sev-info { background: #e0f2fe; color: #0369a1; }
[data-bs-theme="dark"] .sev-danger { background: rgba(220, 38, 38, .2); color: #fca5a5; } [data-bs-theme="dark"] .sev-warning { background: rgba(217, 119, 6, .2); color: #fcd34d; } [data-bs-theme="dark"] .sev-info { background: rgba(2, 132, 199, .2); color: #7dd3fc; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bar-row .progress { height: 8px; background: var(--line-2); }
.bar-label { width: 72px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-val { width: 46px; text-align: right; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.funnel-label { width: 70px; font-size: .8rem; color: var(--ink-2); }
.funnel-track { flex: 1; }
.funnel-bar { height: 22px; border-radius: 6px; background: var(--brand); }
.funnel-val { width: 40px; text-align: right; font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }
.date-block { width: 44px; flex-shrink: 0; text-align: center; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); line-height: 1.1; }
.date-block span { display: block; background: var(--c); color: #fff; font-size: .62rem; font-weight: 600; text-transform: uppercase; padding: 2px 0; }
.date-block b { display: block; font-size: 1rem; padding: 3px 0; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { position: relative; padding: 0 0 14px 20px; }
.activity li:last-child { padding-bottom: 0; }
.activity li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.activity li::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 2px; background: var(--line-2); }
.activity li:last-child::after { display: none; }
.activity li.act-create::before { background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; } .activity li.act-delete::before { background: #dc2626; box-shadow: 0 0 0 3px #fee2e2; }
@media (max-width: 1399.98px) { .ops-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ops-item:nth-child(4n+1) { border-left: 0; } .ops-item:nth-child(n+5) { border-top: 1px solid var(--line-2); } }
@media (max-width: 767.98px) { .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-item { border-left: 0; border-top: 1px solid var(--line-2); } .ops-item:nth-child(-n+2) { border-top: 0; } .ops-item:nth-child(even) { border-left: 1px solid var(--line-2); } .kpi-value { font-size: 1.45rem; } }

/* ---------- Sign-in extras: CAPTCHA, reset steps, password meter ---------- */
.auth-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 24px; font-size: .76rem; color: var(--muted); }
.auth-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 3px solid var(--line); }
.auth-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 600; background: var(--line-2); color: var(--muted); flex-shrink: 0; }
.auth-steps li.current { border-color: var(--brand); color: var(--ink); font-weight: 500; }
.auth-steps li.current span { background: var(--brand); color: #fff; }
.auth-steps li.done { border-color: #22b35b; }
.auth-steps li.done span { background: #e1ffed; color: #1f9d55; }
.otp-input { letter-spacing: .6em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter span { height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.pw-rules { list-style: none; padding: 0; color: var(--muted); }
.pw-rules li::before { content: "\F28A"; font-family: bootstrap-icons; margin-right: 6px; font-size: .7rem; vertical-align: 1px; }
.pw-rules li.ok { color: #1f9d55; }
.pw-rules li.ok::before { content: "\F26A"; }

/* ---------- Sign-in screens ---------- */
.login-page { background: var(--surface); }
.login-wrap { display: flex; min-height: 100vh; }
.login-art { position: relative; overflow: hidden; flex: 0 0 50%; max-width: 760px; flex-direction: column; justify-content: space-between; gap: 32px; padding: 44px 56px; color: #fff;
  background: linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 55%, #04122a 100%); }
.login-art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%); }
.login-art::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), transparent 60%); }
.login-art > * { position: relative; z-index: 1; }
.art-logo { height: 52px; width: auto; }
.auth-logo { object-fit: cover; border-radius: 10px; background: #fff; }
.art-main { max-width: 540px; margin: auto 0; }
.art-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #ffb27f; }
.art-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.art-title { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; margin: 16px 0 14px; }
.art-title span { color: #9cc2f5; }
.art-lead { font-size: 1rem; color: rgba(255, 255, 255, .72); margin-bottom: 30px; max-width: 470px; }
.art-portals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; overflow: hidden; }
.art-portals li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 16px; background: rgba(6, 26, 58, .82); }
.art-portals i { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #ffb27f; font-size: 1rem; }
.art-portals b { font-size: .86rem; font-weight: 600; }
.art-portals span { font-size: .74rem; color: rgba(255, 255, 255, .6); }
.login-form { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 22px 28px; background: var(--surface); }
.login-topbar { display: flex; align-items: center; min-height: 40px; gap: 10px; }
.login-mobile-logo { height: 34px; width: auto; }
.login-card { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }
.login-foot { text-align: center; font-size: .75rem; color: var(--muted); padding-top: 8px; }
.login-foot a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.login-foot a:hover { color: var(--brand); }
.login-foot .powered { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; text-decoration: none; }
.auth-head { margin-bottom: 26px; }
.auth-head h2 { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.auth-head p { color: var(--muted); margin: 0; font-size: .92rem; }
.auth-icon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 1.35rem; background: var(--brand-50); color: var(--brand); margin-bottom: 18px; border: 1px solid var(--brand-100); }
.auth-alert { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; padding: 10px 14px; border-radius: 8px; border: 0; }
.auth-alert i { margin-top: 1px; }
.alert-danger.auth-alert { background: #fff1f1; color: #b42318; }
.alert-success.auth-alert { background: #ecfdf3; color: #067647; }
.alert-info.auth-alert { background: var(--brand-50); color: var(--brand-600); }
[data-bs-theme="dark"] .alert-danger.auth-alert { background: rgba(220, 38, 38, .15); color: #fca5a5; }
[data-bs-theme="dark"] .alert-success.auth-alert { background: rgba(22, 163, 74, .15); color: #86efac; }
.login-card .form-label { font-weight: 500; font-size: .85rem; }
.login-card .form-control { min-height: 46px; font-size: .95rem; }
.field-icon { position: relative; }
.field-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 1rem; z-index: 3; }
.field-icon > .form-control { padding-left: 42px; }
.field-icon > .form-control.has-action { padding-right: 46px; }
.field-icon > .form-control.is-invalid { background-image: none; padding-right: 46px; }
.field-action { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: var(--muted); border-radius: 6px; z-index: 3; }
.field-action:hover { color: var(--brand); background: var(--brand-50); }
.caps-hint { font-size: .76rem; color: #b54708; margin-top: 6px; }
.auth-submit { min-height: 48px; font-size: 1rem; font-weight: 600; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; margin: 20px 0 14px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-back { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; font-size: .86rem; font-weight: 500; color: var(--muted); }
.auth-back:hover { color: var(--brand); text-decoration: none; }
.demo-panel { margin-top: 24px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-2); }
.demo-panel summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: .85rem; font-weight: 500; }
.demo-panel summary::-webkit-details-marker { display: none; }
.demo-panel summary > i:first-child { color: var(--accent); }
.demo-panel summary small { color: var(--muted); font-weight: 400; }
.demo-panel[open] summary .bi-chevron-down { transform: rotate(180deg); }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px; }
.demo-role { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-size: .76rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); text-align: left; white-space: nowrap; overflow: hidden; }
.demo-role i { color: var(--brand); }
.demo-role:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.demo-note { font-size: .72rem; color: var(--muted); margin: 10px 14px 12px; }
.captcha-row { display: flex; flex-wrap: wrap; gap: 8px; }
.captcha-box { display: flex; align-items: stretch; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #f0f5fb; }
.captcha-img { width: 150px; height: 46px; display: block; user-select: none; }
.captcha-refresh { width: 40px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1rem; }
.captcha-refresh:hover { color: var(--brand); background: var(--brand-50); }
.captcha-refresh .spin { display: inline-block; animation: spin .5s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.captcha-input { flex: 1 1 120px; min-width: 120px; text-transform: uppercase; letter-spacing: .3em; font-weight: 600; text-align: center; }
.captcha-input::placeholder { letter-spacing: normal; font-weight: 400; text-transform: none; }
@media (max-width: 1199.98px) { .login-art { padding: 36px 40px; flex-basis: 46%; } .art-title { font-size: 2rem; } .art-portals { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .login-form { padding: 14px 16px; } .login-card { padding: 20px 0; } .auth-head h2 { font-size: 1.45rem; } .demo-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shared header for the public forms (online admission, payment, verification) */
.pub-head { background: var(--navy); color: #fff; border-bottom: 3px solid var(--accent); }
.pub-head .container { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.pub-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: rgba(255, 255, 255, .2); }
.pub-head h1 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; margin: 0; }
.pub-head p { margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .65); }
.pub-head a { color: rgba(255, 255, 255, .8); font-size: .82rem; }
.pub-head a:hover { color: #fff; }

/* ---------- Public homepage ---------- */
.auth-home { align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; color: var(--muted); }
.auth-home:hover { color: var(--brand); text-decoration: none; }
.site { background: var(--surface); font-size: 1rem; }
html:has(.site) { scroll-behavior: smooth; scroll-padding-top: 84px; }
.site h1, .site h2, .site h3 { font-family: var(--font-head); }
.site-skip { position: absolute; left: 12px; top: 12px; z-index: 2000; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 6px; }
.site-top { background: var(--navy); color: rgba(255, 255, 255, .72); font-size: .78rem; }
.site-top .container-xl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-height: 38px; }
.site-top a { color: rgba(255, 255, 255, .72); }
.site-top a:hover { color: #fff; text-decoration: none; }
.site-top i { color: var(--accent); margin-right: 6px; }
.site-nav { position: sticky; top: 0; z-index: 1030; background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-nav.scrolled { box-shadow: 0 8px 24px -16px rgba(6, 26, 58, .4); }
.site-nav nav { min-height: 76px; flex-wrap: wrap; }
.site-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none !important; min-width: 0; }
.site-brand span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.site-brand b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand small { font-size: .72rem; color: var(--muted); }
.site-brand:hover { color: var(--ink); }
.brand-sep { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; }
.site-menu { flex: 1; align-items: center; gap: 12px; }
.site-links { display: flex; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
.site-links a { position: relative; display: block; padding: 8px 14px; color: var(--ink-2); font-weight: 500; font-size: .9rem; }
.site-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; }
.site-links a:hover { color: var(--brand); text-decoration: none; }
.site-links a:hover::after { transform: scaleX(1); }
.site-actions { display: flex; align-items: center; gap: 8px; }

.site-hero { position: relative; overflow: hidden; padding: 84px 0 130px; color: #fff; background: linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 60%, #04122a 100%); }
.site-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 75% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 75% 30%, #000 0%, transparent 70%); }
.site-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(11, 74, 155, .55), transparent 70%); pointer-events: none; }
.site-hero .container-xl { position: relative; z-index: 1; }
.site-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; margin: 20px 0 18px; }
.site-hero .lead { font-size: 1.1rem; color: rgba(255, 255, 255, .74); max-width: 580px; }
.site-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: .82rem; font-weight: 500; }
.site-pill:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .14); }
.site-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(242, 107, 29, .25); }
.btn-ghost-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .35); --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: #e8eef7; --bs-btn-active-color: var(--navy); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.hero-trust i { color: #7fb0f0; margin-right: 6px; }
.hero-panel { position: relative; background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55); overflow: hidden; }
.hero-panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.hero-panel-head div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hero-panel-head b { font-size: .95rem; }
.hero-panel-head small { color: var(--muted); font-size: .76rem; }
.hero-panel-head .badge { margin-left: auto; }
.hero-panel ul { list-style: none; margin: 0; padding: 8px; }
.hero-panel li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; }
.hero-panel li:hover { background: var(--surface-2); }
.hero-panel li > i { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; background: var(--brand-50); color: var(--brand); }
.hero-panel li div { display: flex; flex-direction: column; line-height: 1.3; }
.hero-panel li b { font-size: .9rem; font-weight: 600; }
.hero-panel li small { color: var(--muted); font-size: .78rem; }
.hero-panel-foot { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: .82rem; }
.hero-panel-foot b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-panel-foot small { color: var(--muted); }

.site-statbar { position: relative; z-index: 2; margin-top: -64px; }
.site-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.site-stats > div { padding: 24px 28px; border-left: 1px solid var(--line-2); }
.site-stats > div:first-child { border-left: 0; }
.site-stats dt { font-family: var(--font-head); font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; color: var(--brand); line-height: 1.1; font-variant-numeric: tabular-nums; }
.site-stats dd { margin: 4px 0 0; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.site-stats > div:nth-child(2) dt { color: var(--accent); }

.date-block { width: 44px; flex-shrink: 0; text-align: center; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); line-height: 1.1; background: var(--surface); }
.site-section { padding: 96px 0; }
.site-alt { background: var(--bg); }
.site-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.site-head.text-start { margin-left: 0; }
.site-head h2, .site-h2 { font-size: clamp(1.65rem, 2.8vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 12px 0 12px; line-height: 1.2; }
.site-head p { color: var(--muted); font-size: 1.04rem; margin: 0; }
.site-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.site-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.site-card { position: relative; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; transition: box-shadow .2s, border-color .2s; }
.site-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 10px 10px 0 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.site-card:hover { border-color: var(--brand-100); box-shadow: 0 18px 40px -22px rgba(6, 26, 58, .35); }
.site-card:hover::after { transform: scaleX(1); }
.site-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 18px 0 8px; }
.site-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.site-card-icon { width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; background: var(--brand-50); color: var(--brand); }
.site-card:nth-child(even) .site-card-icon, .col-sm-6:nth-child(even) .site-card-icon { background: var(--accent-50); color: var(--accent); }
.site-alt .site-card { border-color: transparent; box-shadow: var(--shadow-sm); }
.stage-list { display: grid; gap: 14px; }
.stage { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; padding: 18px 20px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--brand); }
.stage:nth-child(even) { border-left-color: var(--accent); }
.stage-name b { display: block; font-family: var(--font-head); font-size: .98rem; font-weight: 600; color: var(--ink); }
.stage-name small { color: var(--muted); font-size: .78rem; }
.stage-classes { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-classes span { padding: 6px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--ink-2); }
.site-quote { margin-top: 30px; padding: 24px 26px; border-radius: 10px; background: var(--navy); color: #fff; position: relative; }
.site-quote > i { font-size: 2rem; color: var(--accent); line-height: 1; }
.site-quote p { font-size: 1rem; color: rgba(255, 255, 255, .85); margin: 6px 0 14px; }
.site-quote b { display: block; font-size: .9rem; }
.site-quote small { color: rgba(255, 255, 255, .6); }
.site-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.site-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.site-steps li { position: relative; text-align: center; padding: 0 8px; }
.site-steps span { position: relative; width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  background: var(--surface); color: var(--brand); border: 2px solid var(--brand); }
.site-steps li:last-child span { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-steps h3 { font-size: 1rem; font-weight: 600; margin: 18px 0 6px; color: var(--ink); }
.site-steps p { font-size: .88rem; color: var(--muted); margin: 0; }
.news-card { position: relative; background: var(--surface); border-radius: 10px; padding: 20px 22px 20px 26px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--brand); }
.news-meta { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.news-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.news-card p { font-size: .9rem; color: var(--muted); margin: 0; }
.event-card-head { padding: 18px 22px; border-bottom: 1px solid var(--line-2); font-weight: 600; font-family: var(--font-head); display: flex; align-items: center; gap: 8px; }
.event-card-head i { color: var(--accent); }
.event-list { list-style: none; margin: 0; padding: 8px 12px 12px; }
.event-list li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 8px; }
.event-list li:hover { background: var(--surface-2); }
.event-list li div:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.event-list small { color: var(--muted); font-size: .8rem; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.contact-list li > i { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 1.15rem; flex-shrink: 0; }
.contact-list div { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.contact-list b { font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.contact-list span, .contact-list div > a:first-of-type { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.contact-list div > span + a { font-size: .82rem; color: var(--brand); font-weight: 500; }
.campus { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.campus i { color: var(--brand); }
.campus div { display: flex; flex-direction: column; line-height: 1.3; }
.campus small { color: var(--muted); }
.enquiry { padding: 32px; border-top: 3px solid var(--accent); box-shadow: 0 24px 60px -30px rgba(6, 26, 58, .35); }
.enquiry::after { display: none; }
.enquiry .form-control, .enquiry .form-select { min-height: 44px; }
.enquiry textarea.form-control { min-height: 96px; }
.powered-by { display: inline-flex !important; align-items: center; gap: 10px; }

@media (max-width: 991.98px) {
  .site-menu.show, .site-menu.collapsing { flex-basis: 100%; }
  .site-menu { padding-bottom: 14px; }
  .site-menu.show { display: flex; flex-direction: column; align-items: stretch; }
  .site-links { flex-direction: column; margin: 8px 0; }
  .site-links a::after { display: none; }
  .site-actions { flex-wrap: wrap; }
  .site-steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .site-steps::before { display: none; }
  .site-section { padding: 68px 0; }
  .site-hero { padding: 56px 0 110px; }
  .site-stats > div:nth-child(3) { border-left: 0; }
  .site-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .stage { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 575.98px) {
  .site-stats { grid-template-columns: 1fr 1fr; }
  .site-stats > div { padding: 18px; }
  .site-stats > div:nth-child(odd) { border-left: 0; }
  .site-stats dt { font-size: 1.45rem; }
  .enquiry { padding: 22px; }
  .site-brand small { display: none; }
  .site-nav .site-brand > span, .site-nav .brand-sep { display: none; }
  .site-top .container-xl > span:not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html:has(.site) { scroll-behavior: auto; } .site-card::after { transition: none; } }

/* ---------- Product landing page ---------- */
.site-hero h1 .hl { color: #9cc2f5; }
.hero-trust i { color: #7fe0a6; }
/* Hero product mockup */
.mock { position: relative; margin: 40px 10px 40px 20px; background: var(--surface); border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); color: var(--ink); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #e2e7ee; }
.mock-bar span:first-child { background: #ff6159; } .mock-bar span:nth-child(2) { background: #ffbd2e; } .mock-bar span:nth-child(3) { background: #28c941; }
.mock-bar em { margin-left: 10px; font-style: normal; font-size: .72rem; color: var(--muted); }
.mock-body { display: flex; min-height: 300px; }
.mock-side { width: 52px; background: var(--navy); border-bottom-left-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
.mock-side i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.mock-side i.on { background: var(--accent); }
.mock-main { flex: 1; padding: 16px; display: grid; gap: 12px; min-width: 0; background: var(--bg); border-bottom-right-radius: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-kpis > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.25; }
.mock-kpis small { font-size: .66rem; color: var(--muted); }
.mock-kpis b { font-family: var(--font-head); font-size: 1.1rem; }
.mock-kpis .up { font-size: .64rem; color: #16a34a; font-weight: 600; }
.mock-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.mock-chart small { font-size: .68rem; color: var(--muted); }
.mock-chart .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 8px; }
.mock-chart .bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--brand-100); }
.mock-chart .bars i.hi { background: var(--brand); }
.mock-rows { display: grid; gap: 6px; }
.mock-rows > div { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .74rem; }
.mock-rows i { color: var(--accent); }
.mock-rows span { flex: 1; }
.mock-rows b { font-size: .66rem; color: var(--brand); }
.mock-float { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border-radius: 10px; padding: 10px 14px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .45); }
.mock-float > i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.mock-float div { display: flex; flex-direction: column; line-height: 1.25; }
.mock-float small { font-size: .66rem; color: var(--muted); }
.mock-float b { font-size: .8rem; }
.mock-float-1 { left: -36px; bottom: -26px; animation: floaty 6s ease-in-out infinite; }
.mock-float-1 > i { background: var(--accent-50); color: var(--accent); }
.mock-float-2 { right: -24px; top: -30px; animation: floaty 6s ease-in-out -3s infinite; }
.mock-float-2 > i { background: #dcfce7; color: #16a34a; }
[data-bs-theme="dark"] .mock-float-2 > i { background: rgba(22, 163, 74, .2); }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mock-float { animation: none; } }
/* Module cloud */
.module-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; padding: 26px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); }
.module-cloud-title { flex-basis: 100%; text-align: center; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.module-cloud > span:not(.module-cloud-title) { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; font-weight: 500; color: var(--ink-2); }
.module-cloud i { color: var(--brand); }
/* Portals */
.portal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.portal-card { background: var(--surface); border-radius: 10px; padding: 24px 20px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--brand); }
.portal-card:nth-child(even) { border-top-color: var(--accent); }
.portal-icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; background: var(--brand-50); color: var(--brand); }
.portal-card:nth-child(even) .portal-icon { background: var(--accent-50); color: var(--accent); }
.portal-card h3 { font-size: 1.05rem; font-weight: 600; margin: 16px 0 6px; color: var(--ink); }
.portal-card p { font-size: .86rem; color: var(--muted); margin-bottom: 14px; }
.portal-card ul { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.portal-card li { display: flex; gap: 8px; font-size: .84rem; color: var(--ink-2); }
.portal-card li i { color: #16a34a; }
/* Check list */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.check-list li { display: flex; gap: 14px; }
.check-list li > i { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--brand-50); color: var(--brand); font-size: 1.1rem; }
.check-list div { display: flex; flex-direction: column; justify-content: center; line-height: 1.4; }
.check-list b { font-weight: 600; color: var(--ink); }
.check-list span { font-size: .88rem; color: var(--muted); }
.check-list.compact { gap: 12px; margin: 26px 0; }
.check-list.compact li > i { width: 34px; height: 34px; font-size: .95rem; }
.check-list.compact b { font-weight: 500; font-size: .92rem; }
/* AI chat mockup */
.ai-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 30px 60px -30px rgba(6, 26, 58, .35); display: flex; flex-direction: column; gap: 12px; }
.ai-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.ai-chat-head div { display: flex; flex-direction: column; line-height: 1.25; }
.ai-chat-head small { color: #16a34a; font-size: .74rem; }
.ai-dot { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--navy)); }
.ai-msg { max-width: 86%; padding: 11px 14px; border-radius: 12px; font-size: .88rem; line-height: 1.5; }
.ai-msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 4px; }
.ai-msg.bot > b:first-child { display: block; color: var(--ink); margin-bottom: 2px; }
/* Benefits */
.benefit { height: 100%; padding: 26px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-sm); }
.benefit > i { font-size: 1.6rem; color: var(--accent); }
.benefit h3 { font-size: 1.02rem; font-weight: 600; margin: 14px 0 8px; color: var(--ink); }
.benefit p { font-size: .88rem; color: var(--muted); margin: 0; }
/* Security band */
.sec-band { padding: 96px 0; color: rgba(255, 255, 255, .72); background: linear-gradient(160deg, var(--navy-3), var(--navy) 60%, #04122a); position: relative; overflow: hidden; }
.sec-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 20% 50%, #000, transparent 70%); }
.sec-band .container-xl { position: relative; }
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sec-grid > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.sec-grid i { grid-row: span 2; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: rgba(242, 107, 29, .15); color: #ffa66b; font-size: 1.1rem; }
.sec-grid b { color: #fff; font-size: .92rem; font-weight: 600; }
.sec-grid span { font-size: .8rem; }
/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.faq details[open] { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { margin-left: auto; color: var(--brand); transition: transform .2s; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--muted); font-size: .92rem; }
/* Demo form */
.demo-section { background: linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%); }
.demo-lead { color: var(--muted); font-size: 1.04rem; }
.demo-contact { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.demo-contact span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.demo-contact a { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.demo-contact a i { color: var(--accent); margin-right: 8px; }
.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-chips label { cursor: pointer; }
.interest-chips input { position: absolute; opacity: 0; pointer-events: none; }
.interest-chips span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: .82rem; font-weight: 500; color: var(--ink-2); transition: all .15s; }
.interest-chips input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.interest-chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.success-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: #dcfce7; color: #16a34a; }
@media (max-width: 1199.98px) { .portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .portal-grid { grid-template-columns: 1fr 1fr; } .sec-grid { grid-template-columns: 1fr; } .sec-band { padding: 68px 0; } }
@media (max-width: 479.98px) { .portal-grid { grid-template-columns: 1fr; } }

/* WhatsApp chat links */
.demo-contact a.wa-link, .site-foot a.wa-link { color: #128c4b; }
.demo-contact a.wa-link i { color: #25d366; }
[data-bs-theme="dark"] .demo-contact a.wa-link { color: #7fe0a6; }
/* Floating WhatsApp chat card: white card, green icon with a soft pulse, navy text */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 1040; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 18px 40px -14px rgba(6, 26, 58, .45), 0 2px 6px rgba(6, 26, 58, .08);
  text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.wa-float:hover { color: var(--ink); transform: translateY(-3px); border-color: rgba(37, 211, 102, .5); box-shadow: 0 22px 46px -14px rgba(6, 26, 58, .5), 0 0 0 4px rgba(37, 211, 102, .12); }
.wa-icon { position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.4rem;
  background: linear-gradient(145deg, #2fe077, #128c4b); box-shadow: 0 6px 14px -4px rgba(18, 140, 75, .6); }
.wa-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
.wa-text { display: flex; flex-direction: column; line-height: 1.25; }
.wa-text small { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); }
.wa-text b { font-size: .9rem; font-weight: 600; font-family: var(--font-head); }
.wa-online { width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .2); }
.wa-go { font-size: .8rem; color: var(--muted); margin-left: 2px; transition: transform .2s, color .2s; }
.wa-float:hover .wa-go { color: #128c4b; transform: translate(2px, -2px); }
/* Leave room at the foot of the page so the card never covers footer links */
@media (prefers-reduced-motion: reduce) { .wa-icon::after { animation: none; display: none; } }
@media (max-width: 575.98px) {
  .wa-float { right: 16px; bottom: 16px; padding: 0; border: 0; background: none; box-shadow: none; }
  .wa-float:hover { box-shadow: none; }
  .wa-text, .wa-go { display: none; }
  .wa-icon { width: 56px; height: 56px; font-size: 1.6rem; box-shadow: 0 12px 26px -8px rgba(18, 140, 75, .7); }
}
/* Ownership credit (Design Hosts) */
.owner-link { font-weight: 600; text-decoration: none; }
.owner-link:hover { text-decoration: underline; }
.footer-owner { margin-left: 4px; }
.login-foot a.owner-link { color: var(--ink-2); text-decoration: none; }

/* App footer: "Powered by" badge */
.powered-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 16px 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface-2); line-height: 1.2; }
.pb-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.pb-owner { font-size: .72rem; color: var(--muted); }
.pb-owner .owner-link { color: var(--brand); }
.pb-owner .owner-link i { font-size: .62rem; margin-left: 3px; vertical-align: 1px; transition: transform .15s; display: inline-block; }
.pb-owner .owner-link:hover i { transform: translate(1px, -1px); }
@media (max-width: 575.98px) { .footer { flex-direction: column; align-items: stretch; text-align: center; } .powered-badge { margin: 0 auto !important; align-items: center; } }

/* ---------- Website footer ---------- */
.site-foot { position: relative; overflow: hidden; padding: 0 0 110px; color: rgba(255, 255, 255, .66); background: var(--navy); }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, #ff9a5c 30%, var(--brand) 70%, #3a78c9 100%); }
.site-foot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 0% 0%, rgba(11, 74, 155, .35), transparent 70%), radial-gradient(500px 260px at 100% 100%, rgba(242, 107, 29, .08), transparent 70%); }
.site-foot .container-xl { position: relative; z-index: 1; }
.site-foot a { text-decoration: none; }
/* CTA card */
.sf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 64px; padding: 34px 38px; border-radius: 14px;
  background: linear-gradient(110deg, rgba(11, 74, 155, .55), rgba(11, 74, 155, .15)); border: 1px solid rgba(255, 255, 255, .1); }
.sf-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #ffb27f; }
.sf-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.sf-cta h2 { font-family: var(--font-head); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 10px 0 6px; }
.sf-cta p { margin: 0; color: rgba(255, 255, 255, .72); }
.sf-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Main area */
.sf-main { padding: 56px 0 40px; }
.sf-logo { display: inline-block; }
.sf-about { margin: 18px 0 22px; max-width: 420px; font-size: .92rem; line-height: 1.65; }
.sf-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 360px; }
.sf-contact a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: #fff; font-size: .88rem; font-weight: 500; transition: background .15s, border-color .15s; }
.sf-contact a:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff; }
.sf-contact a > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.sf-contact small { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }
.sf-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(242, 107, 29, .14); color: #ffa66b; }
.sf-ic-wa { background: rgba(37, 211, 102, .14); color: #4ade80; }
.sf-h { position: relative; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin: 4px 0 20px; padding-bottom: 12px; }
.sf-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.sf-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sf-links a { position: relative; display: inline-flex; align-items: center; color: rgba(255, 255, 255, .66); font-size: .9rem; transition: color .15s, padding .2s; }
.sf-links a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transition: width .2s; }
.sf-links a:hover { color: #fff; padding-left: 16px; }
.sf-links a:hover::before { width: 10px; }
.sf-ext { font-size: .7rem; margin-left: 5px; }
.sf-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; padding-top: 24px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.sf-trust span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: .8rem; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sf-trust i { color: #7fb0f0; }
/* Bottom bar */
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; }
.sf-copy { color: rgba(255, 255, 255, .6); }
.sf-bottom-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sf-totop { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .14); }
.sf-totop i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); font-size: .85rem; transition: background .15s, border-color .15s, transform .2s; }
.sf-totop:hover { color: #fff; }
.sf-totop:hover i { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.sf-owner { color: rgba(255, 255, 255, .72); }
.sf-owner .owner-link { color: #ffb27f; }
.sf-owner .owner-link:hover { color: #fff; }
[data-bs-theme="dark"] .site-foot, [data-bs-theme="dark"] .site-top { background: #030c1c; }
@media (max-width: 991.98px) { .sf-cta { padding: 28px 24px; } .sf-main { padding: 44px 0 32px; } }
@media (max-width: 767.98px) {
  .site-foot { padding-bottom: 96px; }
  .sf-cta-actions, .sf-cta-actions .btn { width: 100%; }
  .sf-bottom, .sf-bottom-right { flex-direction: column; align-items: flex-start; }
  .sf-totop { padding-right: 0; border-right: 0; }
}

/* Top header: campus · academic year chip */
.ctx-chip { align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: .82rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.ctx-chip > i { color: var(--brand); font-size: .9rem; }
.ctx-chip > i.bi-calendar3 { color: var(--accent); }
.ctx-chip form { margin: 0; }
.ctx-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.ctx-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366758c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right center / 10px;
  padding: 0 18px 0 0; font: inherit; color: var(--ink); cursor: pointer; outline: none; }
.ctx-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.ctx-select option { color: #0f1f3d; }

/* Top header: AI Insights icon and menu */
.icon-btn-ai { color: var(--brand); }
.icon-btn-ai:hover, .icon-btn-ai.active, .icon-btn-ai[aria-expanded="true"] { color: var(--brand); background: var(--brand-50); border-color: var(--brand-100); }
.ai-menu { width: 320px; max-width: 92vw; padding: 6px; }
.ai-menu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.ai-menu-head > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), #ff9a5c); }
.ai-menu-head div { display: flex; flex-direction: column; line-height: 1.25; }
.ai-menu-head b { font-size: .9rem; } .ai-menu-head small { font-size: .72rem; color: var(--muted); }
.ai-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; white-space: normal; }
.ai-item > i { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: .95rem; }
.ai-item span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ai-item b { font-weight: 500; font-size: .86rem; color: var(--ink); }
.ai-item small { font-size: .72rem; color: var(--muted); }
.ai-item:hover > i, .ai-item.active > i { background: var(--brand); color: #fff; }
.ai-item.active { background: var(--brand-50); }
/* Top header: Collect fee icon (same size as the other header icons, accent tint so it is easy to find) */
.icon-btn-fee { color: var(--accent); }
.icon-btn-fee:hover, .icon-btn-fee.active { color: var(--accent-600); background: var(--accent-50); border-color: var(--accent-100); }

/* Top header: keep the account button on one line */
.user-btn .fw-semibold, .user-btn .tiny { white-space: nowrap; }
@media (min-width: 992px) { .topbar .global-search { flex: 0 1 380px; min-width: 180px; } }
@media (max-width: 1199.98px) { .user-btn > span.d-md-flex, .user-btn > .bi-chevron-down { display: none !important; } .user-btn { padding: 3px; } }


/* ---------- AI assistant (Ask Shalavya) ---------- */
.as-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.as-chat { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 540px; overflow: hidden; }
.as-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.as-head b { display: block; font-size: .95rem; }
.as-head small { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }
.as-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.as-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); border: 1px solid var(--brand-100); }
.as-avatar img { width: 30px; height: 30px; }
.as-avatar.sm { width: 32px; height: 32px; border-radius: 9px; }
.as-avatar.sm img { width: 22px; height: 22px; }
.as-head-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.as-head-actions form { margin: 0; }
.as-switch { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; }
.as-switch input { position: absolute; opacity: 0; }
.as-switch span { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s; }
.as-switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.as-switch input:checked + span { background: var(--accent); }
.as-switch input:checked + span::after { transform: translateX(14px); }
.as-switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Conversation */
.as-log { flex: 1; overflow-y: auto; padding: 22px 22px 10px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); scroll-behavior: smooth; }
.as-row { display: flex; align-items: flex-end; gap: 10px; max-width: 82%; animation: asIn .25s ease-out; }
.as-row.me { align-self: flex-end; }
.as-row.bot { align-self: flex-start; position: relative; }
@keyframes asIn { from { opacity: 0; transform: translateY(6px); } }
.as-bubble { padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.as-row.me .as-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.as-row.bot .as-bubble { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.as-bubble p { margin: 0 0 6px; } .as-bubble p:last-child { margin-bottom: 0; }
.as-bubble ul, .as-bubble ol { margin: 4px 0 6px; padding-left: 20px; }
.as-bubble li { margin: 2px 0; }
.as-bubble li::marker { color: var(--accent); }
.as-row.error .as-bubble { background: #fff5f5; border-color: #fecaca; color: #b42318; }
[data-bs-theme="dark"] .as-row.error .as-bubble { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .3); color: #fca5a5; }
.as-bubble a.as-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 6px 12px; border-radius: 8px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-weight: 600; font-size: .84rem; text-decoration: none; transition: background .15s, color .15s; }
.as-bubble a.as-link:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.as-bubble li a.as-link, .as-bubble p a.as-link:not(:only-child) { padding: 0; border: 0; background: none; margin: 0; text-decoration: underline; font-size: inherit; }
.as-bubble li a.as-link:hover, .as-bubble p a.as-link:not(:only-child):hover { background: none; color: var(--brand-600); }
.as-retry { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 600; text-decoration: underline; }
.as-copy { align-self: flex-start; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); opacity: 0; transition: opacity .15s; }
.as-row:hover .as-copy, .as-copy:focus-visible { opacity: 1; }
.as-copy:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.as-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: asDot 1.2s infinite; }
.as-typing i:nth-child(2) { animation-delay: .15s; } .as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes asDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* Welcome */
.as-welcome { margin: auto; max-width: 640px; text-align: center; padding: 10px 0 20px; }
.as-welcome[hidden] { display: none; }
.as-welcome-ic { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--accent), #ff9a5c); box-shadow: 0 14px 30px -12px rgba(242, 107, 29, .7); }
.as-welcome h2 { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; margin: 0 0 8px; }
.as-welcome p { color: var(--muted); margin: 0 auto 24px; max-width: 520px; }
.as-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; text-align: left; }
.as-topic { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.as-topic:hover { border-color: var(--brand-100); box-shadow: var(--shadow); transform: translateY(-2px); }
.as-topic > span { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.as-topic b { font-size: .88rem; }
.as-topic small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Composer */
.as-composer { padding: 12px 18px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.as-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.as-chips[hidden] { display: none; }
.as-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: .78rem; font-weight: 500; }
.as-chip:hover { border-color: var(--brand-100); color: var(--brand); background: var(--brand-50); }
.as-chip i { color: var(--brand); }
.as-input { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.as-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.as-input textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; color: var(--ink); font-size: .92rem; line-height: 1.5; padding: 7px 0; max-height: 160px; }
.as-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font-size: 1.1rem; transition: background .15s, opacity .15s; }
.as-send:hover:not(:disabled) { background: var(--brand-600); }
.as-send:disabled { opacity: .4; cursor: not-allowed; }
.as-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: .7rem; color: var(--muted); }
.as-foot kbd { font-size: .62rem; }
.as-foot .warn { color: #b45309; font-weight: 600; }
/* Side panel */
.as-side { display: grid; gap: 16px; }
.as-card { padding: 16px; }
.as-card-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.as-child { display: flex; align-items: center; gap: 12px; }
.as-child .avatar { width: 40px; height: 40px; font-size: .85rem; }
.as-child b { display: block; } .as-child small { color: var(--muted); font-size: .78rem; }
.as-note { display: flex; gap: 6px; margin: 12px 0 0; font-size: .74rem; color: var(--muted); }
.as-list { list-style: none; padding: 0; margin: 0 -6px; display: grid; gap: 2px; }
.as-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 6px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: .86rem; text-align: left; }
.as-list button:hover { background: var(--brand-50); }
.as-list button > span { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: .85rem; }
.as-list .bi-chevron-right { font-size: .7rem; color: var(--muted); }
.as-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .8rem; color: var(--ink-2); }
@media (max-width: 1199.98px) { .as-layout { grid-template-columns: 1fr; } .as-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 575.98px) {
  .as-chat { height: calc(100vh - 150px); min-height: 480px; }
  .as-log { padding: 14px 12px 8px; } .as-row { max-width: 94%; }
  .as-head { padding: 12px; flex-wrap: wrap; } .as-head-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .as-composer { padding: 10px 12px; } .as-foot span:first-child { display: none; }
  .as-topics { grid-template-columns: 1fr 1fr; } .as-topic small { display: none; }
}

/* ---------- Payment gateway (School Setup) ---------- */
.pg-status { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.pg-status b { font-size: .95rem; } .pg-status p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); }
.pg-status-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; }
.pg-success { border-left: 4px solid #16a34a; } .pg-success .pg-status-ic { background: #dcfce7; color: #15803d; }
.pg-warning { border-left: 4px solid #d97706; } .pg-warning .pg-status-ic { background: #fef3c7; color: #b45309; }
.pg-info { border-left: 4px solid var(--brand); } .pg-info .pg-status-ic { background: var(--brand-50); color: var(--brand); }
.pg-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-option { cursor: pointer; margin: 0; }
.pg-option input { position: absolute; opacity: 0; }
.pg-option-body { display: flex; gap: 14px; height: 100%; padding: 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.pg-option-body > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.pg-option-body b { font-size: .92rem; } .pg-option-body small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.pg-option-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 1.1rem; }
.pg-option-ic.rz { color: #0c2451; }
.pg-option:hover .pg-option-body { border-color: var(--brand-100); }
.pg-option input:checked + .pg-option-body { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-50); }
.pg-option input:checked + .pg-option-body .pg-option-ic { background: var(--brand); color: #fff; }
.pg-option input:focus-visible + .pg-option-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.pg-dim .card-body { opacity: .55; }
.pg-dim .card-header::after { content: "Only used when Razorpay is selected"; margin-left: 10px; font-size: .74rem; font-weight: 400; color: var(--muted); }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .84rem; color: var(--ink-2); }
@media (max-width: 767.98px) { .pg-options { grid-template-columns: 1fr; } .pg-status { flex-wrap: wrap; } .pg-status .btn { margin-left: 0 !important; } }
/* ---------- System Configuration ---------- */
.set-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.set-search { position: relative; }
.set-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
.set-search input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .86rem; outline: none; }
.set-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.set-nav nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.set-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none !important; position: relative; }
.set-link > i { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: .95rem; }
.set-link span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.set-link b { font-weight: 500; font-size: .86rem; color: var(--ink); }
.set-link small { font-size: .71rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-link:hover { background: var(--surface-2); }
.set-link.active { background: var(--brand-50); }
.set-link.active::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--brand); }
.set-link.active > i { background: var(--brand); color: #fff; }
.set-link.active b { font-weight: 600; }
.set-err-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #dc2626; color: #fff; font-size: .7rem; font-style: normal; font-weight: 700; display: grid; place-items: center; }
.set-related { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.set-related-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px 4px; }
.set-related a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; color: var(--ink); font-size: .84rem; text-decoration: none !important; }
.set-related a:hover { background: var(--surface-2); }
.set-related a > i:first-child { color: var(--brand); }
.set-related span { display: flex; flex-direction: column; line-height: 1.25; }
.set-related small { font-size: .7rem; color: var(--muted); }
.set-related .bi-chevron-right { font-size: .7rem; color: var(--muted); }
.set-main { min-width: 0; display: grid; gap: 16px; }
.set-section[hidden] { display: none; }
.set-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.set-head h2 { font-size: 1.1rem; font-weight: 600; margin: 0; font-family: var(--font-head); }
.set-head p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.set-head-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 1.15rem; }
.set-note { display: flex; align-items: center; gap: 8px; margin: 16px 24px 0; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); }
.set-note i { color: var(--brand); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 32px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line-2); }
.set-row:last-child { border-bottom: 0; }
.set-row[hidden] { display: none; }
.set-label label { display: block; font-weight: 500; font-size: .88rem; color: var(--ink); margin: 0; }
.set-label small { display: block; margin-top: 3px; font-size: .77rem; color: var(--muted); line-height: 1.45; }
.set-control { min-width: 0; }
.set-control .form-control, .set-control .form-select { max-width: 460px; }
.set-narrow { max-width: 240px; }
.set-narrow .form-control { max-width: none; }
.set-switch { width: 2.6em !important; height: 1.4em; cursor: pointer; }
.form-switch.m-0 { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.form-switch.m-0 .form-check-input { margin: 0; float: none; }
.set-switch-text { font-size: .84rem; font-weight: 500; color: var(--muted); }
.set-switch:checked + .set-switch-text { color: #15803d; }
.set-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.set-logo { display: flex; align-items: center; gap: 14px; }
.set-logo-preview { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 1.4rem; }
.set-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.set-row.has-error { background: #fff7f7; }
[data-bs-theme="dark"] .set-row.has-error { background: rgba(220, 38, 38, .08); }
.set-error { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: .78rem; font-weight: 500; color: #b91c1c; }
[data-bs-theme="dark"] .set-error { color: #fca5a5; }
.set-empty { padding: 40px; text-align: center; color: var(--muted); }
.set-empty i { display: block; font-size: 1.6rem; margin-bottom: 6px; }
.set-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.set-dirty { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.set-dirty i { color: #16a34a; }
.set-savebar.is-dirty { border-color: #fcd34d; }
.set-savebar.is-dirty .set-dirty { color: var(--ink); font-weight: 500; }
.set-savebar.is-dirty .set-dirty i { color: #d97706; }
@media (max-width: 1199.98px) { .set-layout { grid-template-columns: 240px minmax(0, 1fr); } .set-link small { display: none; } }
@media (max-width: 991.98px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; }
  .set-nav nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .set-link { flex-shrink: 0; }
  .set-link.active::before { display: none; }
  .set-related { display: none; }
  .set-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .set-head { padding: 16px; }
  .set-note { margin: 14px 16px 0; }
  .set-savebar { bottom: 8px; }
  .set-savebar .btn-light { display: none; }
}

/* ---------- Collect fee ---------- */
.fc-search { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; }
.fc-search-ic { color: var(--muted); font-size: 1.05rem; margin-left: 4px; }
.fc-search .ts-control { border: 0 !important; box-shadow: none !important; font-size: .95rem; }
.fc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; background: #f0fdf4; }
[data-bs-theme="dark"] .fc-done { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .35); }
.fc-done-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #16a34a; color: #fff; font-size: 1.3rem; }
.fc-done b { display: block; font-size: 1rem; } .fc-done small { color: var(--muted); }
.fc-done-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fc-student { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; }
.fc-avatar { width: 52px; height: 52px; font-size: 1.05rem; }
.fc-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.fc-name:hover { color: var(--brand); }
.fc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: .82rem; color: var(--muted); }
.fc-meta i { margin-right: 5px; }
.fc-figs { display: flex; gap: 0; margin-left: auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fc-figs > div { padding: 8px 16px; border-left: 1px solid var(--line); text-align: right; }
.fc-figs > div:first-child { border-left: 0; background: var(--surface-2); }
.fc-figs small { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.fc-figs b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fc-figs > div:first-child b { font-size: 1.35rem; }
.fc-dues { display: grid; }
.fc-due { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 150px; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-2); cursor: pointer; margin: 0; transition: background .15s; }
.fc-due:hover { background: var(--surface-2); }
.fc-due.is-overdue { box-shadow: inset 3px 0 0 #dc2626; }
.fc-due.is-picked { background: var(--brand-50); }
.fc-due .fc-pick { width: 1.2em; height: 1.2em; margin: 0; }
.fc-due-main { display: flex; flex-direction: column; min-width: 0; }
.fc-due-main b { font-size: .92rem; color: var(--ink); }
.fc-due-main > small { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-due-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: .76rem; color: var(--muted); }
.fc-due-tags a { font-family: var(--bs-font-monospace); font-size: .74rem; }
.fc-due-amt { text-align: right; }
.fc-due-amt small { display: block; font-size: .7rem; color: var(--muted); }
.fc-due-amt b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.fc-due-pay .form-control { text-align: right; }
.fc-paid { border-top: 1px solid var(--line-2); }
.fc-paid summary { display: flex; align-items: center; gap: 8px; padding: 12px 18px; cursor: pointer; list-style: none; font-size: .85rem; font-weight: 500; color: var(--muted); }
.fc-paid summary::-webkit-details-marker { display: none; }
.fc-paid summary i { transition: transform .2s; font-size: .75rem; }
.fc-paid[open] summary i { transform: rotate(90deg); }
.fc-paid-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px dashed var(--line-2); font-size: .86rem; }
.fc-paid-row span:first-child { display: flex; flex-direction: column; } .fc-paid-row small { color: var(--muted); font-size: .74rem; }
.fc-side { position: sticky; top: 84px; }
.fc-pay { border-top: 3px solid #16a34a; }
.fc-amount .form-control { font-size: 1.5rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fc-amount .input-group-text { font-size: 1.2rem; }
.fc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fc-hint { margin-top: 8px; font-size: .76rem; color: var(--muted); }
.fc-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.fc-mode { margin: 0; cursor: pointer; }
.fc-mode input { position: absolute; opacity: 0; }
.fc-mode span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 8px; font-size: .76rem; font-weight: 500; color: var(--ink-2); text-align: center; transition: all .15s; }
.fc-mode span i { font-size: 1.05rem; color: var(--muted); }
.fc-mode:hover span { border-color: var(--brand-100); }
.fc-mode input:checked + span { border-color: var(--brand); background: var(--brand-50); color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }
.fc-mode input:checked + span i { color: var(--brand); }
.fc-mode input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.fc-fields { display: grid; gap: 10px; margin-top: 12px; }
.fc-more summary { cursor: pointer; font-size: .8rem; color: var(--brand); list-style: none; }
.fc-more summary::-webkit-details-marker { display: none; }
.fc-more summary::before { content: "+ "; }
.fc-more[open] summary::before { content: "– "; }
.fc-after { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); }
.fc-after b { color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.fc-warn { display: flex; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .78rem; }
[data-bs-theme="dark"] .fc-warn { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .35); color: #fcd34d; }
.fc-adjust > summary { display: flex; align-items: center; cursor: pointer; list-style: none; border-bottom: 0; }
.fc-adjust > summary::-webkit-details-marker { display: none; }
.fc-adjust[open] > summary { border-bottom: 1px solid var(--line-2); }
.fc-adjust[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.fc-links { display: grid; gap: 2px; }
.fc-links a { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 6px; font-size: .85rem; color: var(--ink); text-decoration: none; }
.fc-links a:hover { background: var(--surface-2); }
.fc-links i { color: var(--brand); }
@media (max-width: 1199.98px) { .fc-side { position: static; } }
@media (max-width: 767.98px) {
  .fc-figs { width: 100%; margin-left: 0; } .fc-figs > div { flex: 1; text-align: left; padding: 8px 10px; }
  .fc-due { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .fc-due-amt { grid-column: 2; text-align: left; } .fc-due-amt small { display: inline; margin-right: 6px; }
  .fc-due-pay { grid-column: 2; }
  .fc-done-actions { margin-left: 0; width: 100%; } .fc-done-actions .btn { flex: 1; }
}

/* ---------- Fees due (outstanding) ---------- */
.od-summary { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.od-total { display: flex; flex-direction: column; justify-content: center; padding: 20px 24px; min-width: 240px; border-right: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) 0 0 var(--radius); }
.od-total small { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.od-total b { font-family: var(--font-head); font-size: 1.75rem; color: #dc2626; line-height: 1.2; font-variant-numeric: tabular-nums; }
.od-total span { font-size: .82rem; color: var(--muted); }
.od-ageing { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.od-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-2); gap: 2px; }
.od-buckets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.od-bucket { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none !important; transition: border-color .15s, background .15s, box-shadow .15s; }
.od-bucket:hover { border-color: var(--brand-100); background: var(--surface-2); color: var(--ink); }
.od-bucket.active { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 2px var(--brand-50); }
.od-bucket span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.od-bucket small { font-size: .74rem; color: var(--muted); }
.od-bucket b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.od-bucket em { font-style: normal; font-size: .72rem; color: var(--muted); }
.od-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.od-info { background: #38bdf8; } .od-warning { background: #f59e0b; } .od-orange { background: #f97316; } .od-danger { background: #dc2626; }
.od-days { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #fff; }
.od-days.od-info { background: #0284c7; }
.od-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.od-filters .form-select { width: auto; }
.od-search { position: relative; flex: 1 1 260px; }
.od-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.od-search .form-control { padding-left: 34px; }
.od-min { width: 170px; }
.od-table td { padding-top: .65rem; padding-bottom: .65rem; }
.od-table .cell-title { min-width: 200px; }
.od-wa i { color: #16a34a; }
.od-bulk { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border-radius: 0 0 var(--radius) var(--radius); }
.od-bulk span { margin-right: auto; font-size: .84rem; color: var(--muted); }
@media (max-width: 991.98px) {
  .od-total { border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; width: 100%; }
  .od-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-filters .form-select, .od-min { flex: 1 1 160px; width: auto; }
}

/* ---------- Class timetables ---------- */
.tt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tt-filter .list-tabs { margin: 0; }
.tt-filter-search { position: relative; margin-left: auto; width: min(280px, 100%); }
.tt-filter-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .8rem; }
.tt-filter-search input { padding-left: 30px; }
#ttList .tt-row { cursor: pointer; }
#ttList .tt-row[hidden] { display: none; }
.tt-why { cursor: help; }
.tt-jump { width: auto; min-width: 150px; }
.tt-toolbar { position: sticky; top: 72px; z-index: 6; box-shadow: var(--shadow); }
.tt-steps { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0 0; padding-left: 18px; font-size: .78rem; color: var(--muted); }
.tt-steps b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 991.98px) { .tt-toolbar { top: 64px; } .tt-filter-search { margin-left: 0; width: 100%; } }

/* ---------- Report cards ---------- */
.rc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand); background: var(--brand-50); }
.rc-cta-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 1.1rem; }
.rc-cta b { display: block; } .rc-cta small { color: var(--muted); }
#rcList .rc-srow { cursor: pointer; } #rcList .rc-srow[hidden] { display: none; }
.rc-phrases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.rc-phrases > span { font-size: .74rem; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.rc-phrases small { font-size: .72rem; color: var(--muted); margin-left: auto; }
.rc-phrase { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 3px 10px; font-size: .75rem; }
.rc-phrase:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.rc-table textarea.rc-rem { resize: none; min-height: 32px; overflow: hidden; }
.rc-len { font-size: .66rem; color: var(--muted); text-align: right; min-height: .9em; }
.rc-table tr.rc-fail > td { background: #fff7f7; }
[data-bs-theme="dark"] .rc-table tr.rc-fail > td { background: rgba(220, 38, 38, .07); }
.rc-medal { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; }
.rc-m1 { background: linear-gradient(135deg, #f5c542, #d4a017); } .rc-m2 { background: linear-gradient(135deg, #c8cfd8, #98a2b0); } .rc-m3 { background: linear-gradient(135deg, #e0a070, #b87333); }
.rc-bar { position: sticky; bottom: 0; z-index: 4; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -6px 16px -12px rgba(6, 26, 58, .35); }

/* Attendance quick entry */
.att-quick { padding: 14px 16px; }
.att-quick-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.att-quick-head b { display: block; font-size: .92rem; } .att-quick-head small { color: var(--muted); font-size: .78rem; }
.att-quick-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-50); color: var(--accent); flex-shrink: 0; }
.att-quick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.att-quick-row .form-select { width: 140px; }
.att-quick-row .form-control { flex: 1 1 220px; font-size: 1rem; letter-spacing: .02em; }
.att-quick-msg { font-size: .8rem; margin-top: 6px; min-height: 1em; }
.att-quick-msg.ok { color: #15803d; } .att-quick-msg.warn span { color: #b45309; }
.att-exceptions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.att-ex-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: 2px; }
.att-ex { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 8px; border-radius: 999px; border: 1px solid; font-size: .78rem; font-weight: 500; background: var(--surface); }
.att-ex b { font-size: .72rem; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .06); }
.att-ex i { opacity: .6; } .att-ex:hover i { opacity: 1; }
.att-ex-danger { color: #b91c1c; border-color: #fecaca; } .att-ex-warning { color: #b45309; border-color: #fde68a; } .att-ex-info { color: #0369a1; border-color: #bae6fd; } .att-ex-secondary { color: var(--ink-2); border-color: var(--line); }

/* ---------- Send a message ---------- */
.cm-step { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.cm-step > span { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; }
.cm-step b { display: block; font-size: .98rem; } .cm-step small { color: var(--muted); font-size: .78rem; }
.cm-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cm-ch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cm-tile { margin: 0; cursor: pointer; }
.cm-tile input { position: absolute; opacity: 0; }
.cm-tile > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; position: relative; }
.cm-tile i { font-size: 1.15rem; color: var(--muted); margin-bottom: 4px; }
.cm-tile b { font-size: .88rem; color: var(--ink); } .cm-tile small { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.cm-tile:hover > span { border-color: var(--brand-100); }
.cm-tile input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 2px var(--brand-50); }
.cm-tile input:checked + span i { color: var(--brand); }
.cm-tile input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cm-chtile input:checked + span::after { content: "\F26E"; font-family: bootstrap-icons; position: absolute; top: 8px; right: 10px; color: var(--brand); font-size: 1rem; }
.cm-chtile .bi-whatsapp { color: #16a34a !important; }
.cm-off { font-style: normal; font-size: .66rem; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 1px 6px; align-self: flex-start; margin-top: 4px; }
.cm-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; font-size: .74rem; color: var(--muted); }
.cm-ph button { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 2px 10px; font-size: .74rem; }
.cm-ph button:hover { border-color: var(--brand); color: var(--brand); }
.cm-meta { display: flex; gap: 16px; margin-top: 6px; font-size: .76rem; color: var(--muted); }
.cm-opts { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: .86rem; }
.cm-side { position: sticky; top: 84px; }
.cm-phone { padding: 18px 14px; border-radius: 16px; background: linear-gradient(180deg, #e7f0e5, #dfe9dc); }
[data-bs-theme="dark"] .cm-phone { background: #0b1a14; }
.cm-bubble { max-width: 92%; padding: 10px 12px 6px; border-radius: 4px 12px 12px 12px; background: #fff; color: #111; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-bs-theme="dark"] .cm-bubble { background: #1f2c33; color: #e9edef; }
.cm-bubble b { display: block; margin-bottom: 2px; }
.cm-bubble small { display: block; text-align: right; font-size: .66rem; color: #667781; margin-top: 4px; }
.cm-sum { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; }
.cm-sum > i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 1.1rem; }
.cm-sum small { color: var(--muted); }
@media (max-width: 1199.98px) { .cm-side { position: static; } }
@media (max-width: 767.98px) { .cm-aud { grid-template-columns: 1fr 1fr; } .cm-ch { grid-template-columns: 1fr 1fr; } }

/* ---------- Reports ---------- */
.rp-search { position: relative; display: flex; flex-direction: row; align-items: center; padding: 6px 14px; }
.rp-search > i { color: var(--muted); font-size: 1.05rem; }
.rp-search input { border: 0; box-shadow: none !important; font-size: 1rem; }
.rp-count { white-space: nowrap; font-size: .8rem; color: var(--muted); }
.rp-export { padding: 14px 18px; }
.rp-export-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rp-export-head b { display: block; } .rp-export-head small { color: var(--muted); font-size: .8rem; }
.rp-ic, .rp-gic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.rp-gic { width: 30px; height: 30px; font-size: .9rem; }
.rp-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rp-export-row .form-control { width: auto; }
.rp-list { display: grid; padding: 4px; }
.rp-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none !important; }
.rp-item[hidden] { display: none; }
.rp-item:hover { background: var(--brand-50); color: var(--ink); }
.rp-item > i:first-child { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--brand); border: 1px solid var(--line); }
.rp-item span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.rp-item b { font-weight: 500; font-size: .88rem; } .rp-item small { font-size: .76rem; color: var(--muted); }
.rp-go { color: var(--muted); font-size: .75rem; opacity: 0; transition: opacity .15s; }
.rp-item:hover .rp-go { opacity: 1; }
.rp-dl { font-style: normal; font-size: .7rem; font-weight: 600; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.rp-group[hidden] { display: none; }

/* Merit list: how-it-works steps */
.mr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.mr-steps > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 14px 18px; border-left: 1px solid var(--line-2); }
.mr-steps > div:first-child { border-left: 0; }
.mr-steps span { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; }
.mr-steps b { font-size: .9rem; } .mr-steps small { font-size: .76rem; color: var(--muted); }
@media (max-width: 767.98px) { .mr-steps { grid-template-columns: 1fr; } .mr-steps > div { border-left: 0; border-top: 1px solid var(--line-2); } .mr-steps > div:first-child { border-top: 0; } }

/* Collect fee: "collect next" list and phone fixes */
.fc-next { display: grid; padding: 4px; }
.fc-next-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none !important; }
.fc-next-row:hover { background: var(--brand-50); color: var(--ink); }
.fc-next-row b { font-size: .88rem; } .fc-next-row small { font-size: .74rem; color: var(--muted); }
@media (max-width: 767.98px) {
  .fc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-figs > div { padding: 8px; } .fc-figs b { font-size: .92rem !important; } .fc-figs small { font-size: .62rem; }
}
/* ---------- Role permissions ---------- */
.pm-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.pm-roles { position: sticky; top: 84px; overflow: hidden; }
.pm-roles-head { padding: 12px 16px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.pm-roles nav { display: grid; padding: 6px; max-height: calc(100vh - 170px); overflow-y: auto; }
.pm-role { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none !important; position: relative; }
.pm-role:hover { background: var(--surface-2); color: var(--ink); }
.pm-role.active { background: var(--brand-50); }
.pm-role.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.pm-role span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.pm-role b { font-weight: 500; font-size: .86rem; } .pm-role.active b { font-weight: 600; color: var(--brand); }
.pm-role small { font-size: .7rem; color: var(--muted); }
.pm-role em { font-style: normal; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.pm-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; }
.pm-head h2 { font-family: var(--font-head); font-size: 1.2rem; margin: 0; } .pm-head p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.pm-search { position: relative; margin-left: auto; width: min(280px, 100%); }
.pm-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .8rem; }
.pm-search input { padding-left: 30px; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .76rem; color: var(--muted); }
.pm-legend b { color: var(--ink-2); }
.pm-mod[hidden] { display: none; }
.pm-mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.pm-mod-head > i { color: var(--brand); }
.pm-count { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pm-count.none { background: var(--line-2); color: var(--muted); } .pm-count.part { background: #fef3c7; color: #92400e; } .pm-count.full { background: #dcfce7; color: #15803d; }
.pm-mod-head .btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pm-table th:first-child { width: 46%; }
.pm-table td:first-child { font-size: .86rem; }
.pm-table tr[hidden] { display: none; }
.pm-sub td { font-size: .66rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface-2); }
.pm-tag { margin-left: 6px; font-size: .64rem; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.pm-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.pm-bar > span { margin-right: auto; display: inline-flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--muted); }
.pm-bar > span i { color: #16a34a; }
.pm-bar.is-dirty { border-color: #fcd34d; } .pm-bar.is-dirty > span { color: var(--ink); font-weight: 500; } .pm-bar.is-dirty > span i { color: #d97706; }
@media (max-width: 991.98px) { .pm-layout { grid-template-columns: 1fr; } .pm-roles { position: static; } .pm-roles nav { display: flex; overflow-x: auto; max-height: none; } .pm-role { flex-shrink: 0; } .pm-search { margin-left: 0; width: 100%; } }

/* ---------- Principal dashboard ---------- */
.ops-strip.ops-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-split-text { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line-2); margin-top: auto !important; }
.kpi-split-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-split-text i { margin-right: 2px; }
.bar-label-wide { width: 118px; }
.toppers { list-style: none; margin: 0; padding: 6px 0; }
.toppers li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.toppers li + li { border-top: 1px solid var(--line-2); }
.toppers .avatar { width: 34px; height: 34px; }
.toppers b { font-variant-numeric: tabular-nums; }
.rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--line-2); color: var(--muted); flex-shrink: 0; }
.rank-1 { background: #fef3c7; color: #b45309; } .rank-2 { background: #e5e7eb; color: #374151; } .rank-3 { background: #fde2cf; color: #9a3412; }
[data-bs-theme="dark"] .rank-1 { background: rgba(245, 158, 11, .2); color: #fcd34d; } [data-bs-theme="dark"] .rank-2 { background: #2a2f45; color: #e5e7eb; } [data-bs-theme="dark"] .rank-3 { background: rgba(234, 88, 12, .2); color: #fdba74; }
.stars { color: #f59e0b; font-size: .78rem; letter-spacing: 1px; white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 12px 18px 12px 34px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 2px; background: var(--line-2); }
.timeline li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.timeline li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--surface); border: 2px solid #cbd5e1; }
.timeline li.is-current::before { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.timeline li.is-current a { color: var(--brand) !important; }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: "\F127"; font-family: bootstrap-icons; font-size: .65rem; margin-left: 6px; opacity: .35; }
th.sortable[data-dir="asc"]::after { content: "\F148"; opacity: .9; }
th.sortable[data-dir="desc"]::after { content: "\F128"; opacity: .9; }
.sticky-top-head thead th { position: sticky; top: 0; z-index: 2; background: #eef3f9; }
[data-bs-theme="dark"] .sticky-top-head thead th { background: #16233a; }
@media (max-width: 1399.98px) { .ops-strip.ops-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ops-strip.ops-6 .ops-item:nth-child(3n+1) { border-left: 0; } .ops-strip.ops-6 .ops-item:nth-child(n+4) { border-top: 1px solid var(--line-2); } }
@media (max-width: 767.98px) { .ops-strip.ops-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .kpi, .card { break-inside: avoid; } .page-actions form { display: none; } }

/* ---------- Security dashboard ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin: 0 6px 1px 0; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: livePulse 2s infinite; vertical-align: middle; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.campus-status { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid; }
.campus-status .cs-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; }
.campus-status.is-ok { background: #f0fdf4; border-color: #bbf7d0; } .campus-status.is-ok .cs-icon { background: #dcfce7; color: #15803d; }
.campus-status.is-watch { background: #fffbeb; border-color: #fde68a; } .campus-status.is-watch .cs-icon { background: #fef3c7; color: #b45309; }
.campus-status.is-alert { background: #fef2f2; border-color: #fecaca; } .campus-status.is-alert .cs-icon { background: #fee2e2; color: #b91c1c; }
[data-bs-theme="dark"] .campus-status.is-ok { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .3); }
[data-bs-theme="dark"] .campus-status.is-watch { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .3); }
[data-bs-theme="dark"] .campus-status.is-alert { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); }
[data-bs-theme="dark"] .campus-status .cs-icon { background: rgba(255, 255, 255, .06); }
.headcount { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); margin-top: auto !important; }
.headcount span { display: flex; flex-direction: column; font-size: .72rem; color: var(--muted); }
.headcount b { font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.row-alert > * { background: #fff5f5 !important; }
[data-bs-theme="dark"] .row-alert > * { background: rgba(220, 38, 38, .08) !important; }
.feed { list-style: none; margin: 0; padding: 6px 0; }
.feed li { display: flex; align-items: center; gap: 12px; padding: 9px 18px; }
.feed li + li { border-top: 1px solid var(--line-2); }
.feed-dir { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; }
.feed-dir.in { background: #dcfce7; color: #15803d; } .feed-dir.out { background: #ffe4e6; color: #be123c; }
[data-bs-theme="dark"] .feed-dir.in { background: rgba(22, 163, 74, .2); color: #86efac; } [data-bs-theme="dark"] .feed-dir.out { background: rgba(225, 29, 72, .2); color: #fda4af; }
.plate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; background: #fef9c3; color: #1f2937; border: 1px solid #eab308; white-space: nowrap; }
.emg-modal .modal-header { gap: 14px; align-items: flex-start; border-bottom-color: var(--line-2); }
.emg-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #fee2e2; color: #b91c1c; font-size: 1.2rem; }
.emg-templates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.emg-tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 500; }
.emg-tpl i { font-size: 1.2rem; color: #dc2626; }
.emg-tpl:hover, .emg-tpl.active { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
[data-bs-theme="dark"] .emg-tpl:hover, [data-bs-theme="dark"] .emg-tpl.active { background: rgba(220, 38, 38, .12); color: #fca5a5; }
@media (max-width: 575.98px) { .emg-templates { grid-template-columns: repeat(2, 1fr); } }
/* Confirmation opened from inside another dialog (e.g. emergency alert): sit above it and dim it */
body:has(.modal.show:not(#confirmModal)) #confirmModal.show { z-index: 1065; background: rgba(15, 23, 42, .45); }

/* ---------- Messages (inbox) ---------- */
.mx { display: grid; grid-template-columns: 360px 1fr; height: calc(100vh - 210px); min-height: 520px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
[data-bs-theme="dark"] .mx { border: 1px solid var(--line); }
.mx-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-2); }
.mx-list-head { padding: 14px 14px 0; border-bottom: 1px solid var(--line-2); }
.mx-search { position: relative; }
.mx-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
.mx-search input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: .86rem; outline: none; }
.mx-search input:focus { border-color: #8db4e8; background: var(--surface); box-shadow: 0 0 0 .2rem rgba(11, 74, 155, .12); }
.mx-tabs { display: flex; gap: 18px; margin-top: 10px; }
.mx-tabs button { border: 0; background: none; padding: 8px 0 10px; font-size: .84rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mx-tabs button span { font-size: .7rem; background: var(--line-2); color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.mx-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.mx-tabs button.active span { background: var(--brand-50); color: var(--brand); }
.mx-threads { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.mx-thread { position: relative; display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none !important; }
.mx-thread:hover { background: var(--surface-2); color: var(--ink); }
.mx-thread.active { background: var(--brand-50); }
.mx-thread.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.mx-thread .avatar { width: 40px; height: 40px; font-size: .8rem; }
.avatar.tone-primary, .avatar.tone-success, .avatar.tone-info, .avatar.tone-warning, .avatar.tone-secondary { background-image: none; }
.mx-name { font-size: .88rem; font-weight: 600; }
.mx-thread time { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.mx-subject { font-size: .8rem; color: var(--ink-2); }
.mx-preview { font-size: .78rem; color: var(--muted); }
.mx-preview span { color: var(--ink-2); }
.mx-thread.unread .mx-name, .mx-thread.unread .mx-subject { font-weight: 700; color: var(--ink); }
.mx-thread.unread time { color: var(--brand); font-weight: 600; }
.mx-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.mx-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: .7rem; color: var(--ink-2); max-width: 100%; }
.mx-none { padding: 20px; }
.mx-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-2); }
.mx-pane-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.mx-pane-head .avatar { width: 40px; height: 40px; }
.mx-back { display: none; color: var(--ink); font-size: 1.2rem; }
.mx-body { flex: 1; overflow-y: auto; padding: 18px 24px; scrollbar-width: thin; }
.mx-day { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mx-day::before, .mx-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mx-msg { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.mx-msg.me { justify-content: flex-end; }
.mx-msg .avatar { width: 30px; height: 30px; font-size: .66rem; }
.mx-bubble { max-width: min(72%, 620px); padding: 10px 14px 6px; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.mx-msg.them .mx-bubble { background: var(--surface); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.mx-msg.me .mx-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.mx-text { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.mx-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .68rem; opacity: .7; margin-top: 3px; }
.mx-meta .read { color: #a7f3d0; opacity: 1; }
.mx-msg.them .mx-meta .read { color: var(--brand); }
.mx-att { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: .8rem; max-width: 320px; text-decoration: none !important; }
.mx-msg.them .mx-att { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.mx-msg.me .mx-att { background: rgba(255, 255, 255, .16); color: #fff; }
.mx-att > i:first-child { font-size: 1.2rem; }
.mx-reply { padding: 12px 18px 14px; background: var(--surface); border-top: 1px solid var(--line-2); }
.mx-reply-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mx-reply-row:focus-within { border-color: #8db4e8; box-shadow: 0 0 0 .2rem rgba(11, 74, 155, .12); }
.mx-reply textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font-size: .9rem; line-height: 1.5; padding: 7px 4px; max-height: 160px; }
.mx-send { width: 40px; height: 40px; padding: 0 !important; border-radius: 10px; display: grid; place-items: center; }
.mx-file { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 4px 6px 4px 10px; margin-bottom: 8px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); font-size: .78rem; }
.mx-file button { border: 0; background: none; color: inherit; padding: 0 2px; }
.mx-compose { flex: 1; overflow-y: auto; padding: 22px 24px; background: var(--surface); }
.mx-empty { flex: 1; display: grid; place-items: center; }
@media (max-width: 991.98px) {
  .mx { grid-template-columns: 1fr; height: calc(100dvh - 250px); min-height: 440px; }
  .mx.has-open .mx-list { display: none; }
  .mx:not(.has-open) .mx-pane { display: none; }
  .mx-back { display: inline-flex; }
  .mx-body { padding: 14px; }
  .mx-bubble { max-width: 85%; }
}

/* ---------- Notification centre ---------- */
.mx-tabs a { padding: 8px 0 10px; font-size: .84rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none !important; }
.mx-tabs a span { font-size: .7rem; background: var(--line-2); color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.mx-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.mx-tabs a.active span { background: var(--brand-50); color: var(--brand); }
.nc { overflow: hidden; }
.nc-head { padding: 6px 20px 0; border-bottom: 1px solid var(--line-2); }
.nc-cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 14px; scrollbar-width: none; }
.nc-cats::-webkit-scrollbar { display: none; }
.nc-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; background: var(--surface); text-decoration: none !important; }
.nc-cat span { font-size: .7rem; color: var(--muted); }
.nc-cat:hover { border-color: #8db4e8; color: var(--brand); }
.nc-cat.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.nc-cat.active i, .nc-cat.active span { color: #fff !important; opacity: .9; }
.nc-group { padding: 14px 20px 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.nc-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); transition: background .15s; }
.nc-item:hover { background: var(--surface-2); }
.nc-item.unread { background: color-mix(in srgb, var(--brand-50) 55%, var(--surface)); }
.nc-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.nc-item.emergency { background: #fef2f2; }
.nc-item.emergency::before { background: #dc2626; }
[data-bs-theme="dark"] .nc-item.emergency { background: rgba(220, 38, 38, .08); }
.nc-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; }
.nc-main { flex: 1; min-width: 0; color: var(--ink); text-decoration: none !important; }
.nc-main:hover { color: var(--ink); }
.nc-main:hover .nc-title { color: var(--brand); }
.nc-title { font-size: .9rem; font-weight: 500; }
.nc-item.unread .nc-title { font-weight: 700; }
.nc-type { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--line-2); padding: 1px 7px; border-radius: 4px; }
.nc-body { font-size: .84rem; color: var(--muted); margin-top: 3px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-time { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: .74rem; color: var(--muted); }
.nc-open { color: var(--brand); font-weight: 500; opacity: 0; transition: opacity .15s; }
.nc-item:hover .nc-open, .nc-main:focus-visible .nc-open { opacity: 1; }
.nc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.nc-actions .icon-btn { width: 32px; height: 32px; font-size: .95rem; }
@media (max-width: 575.98px) { .nc-head { padding: 4px 14px 0; } .nc-item { padding: 12px 14px; gap: 12px; } .nc-group { padding: 12px 14px 6px; } .nc-icon { width: 36px; height: 36px; } }

/* ---------- Help & support (my requests) ---------- */
.tk { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none !important; transition: background .15s; }
.tk:hover { background: var(--surface-2); color: var(--ink); }
.tk:hover .tk-subject { color: var(--brand); }
.tk-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; }
.tk-subject { font-weight: 600; font-size: .95rem; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--muted); margin-top: 3px; }
.tk-meta i { font-size: .7rem; }
.tk-steps { display: flex; list-style: none; padding: 0; margin: 12px 0 0; max-width: 520px; }
.tk-steps li { flex: 1; position: relative; padding-top: 12px; font-size: .7rem; color: var(--muted); }
.tk-steps li::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 3px; background: var(--line); }
.tk-steps li:first-child::before { border-radius: 2px 0 0 2px; } .tk-steps li:last-child::before { border-radius: 0 2px 2px 0; }
.tk-steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.tk-steps li.done::before, .tk-steps li.done::after { background: #22b35b; border-color: #22b35b; }
.tk-steps li.current { color: var(--ink); font-weight: 600; }
.tk-steps li.current::after { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.tk-reply { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--brand-100); font-size: .8rem; color: var(--ink-2); }
.tk:hover .tk-reply { background: var(--surface); }
.tk-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .76rem; }
.tk-open { color: var(--brand); font-weight: 500; opacity: 0; transition: opacity .15s; }
.tk:hover .tk-open, .tk:focus-visible .tk-open { opacity: 1; }
.tk-rate { color: #b45309; font-weight: 600; }
.tk-rate i { color: #f59e0b; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg label { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--surface); line-height: 1.25; }
.seg label b { font-size: .84rem; font-weight: 600; }
.seg label small { font-size: .7rem; color: var(--muted); }
.seg label:hover { border-color: #8db4e8; }
.seg .btn-check:checked + label { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand) inset; }
.seg .btn-check:checked + label b { color: var(--brand); }
.seg .btn-check:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
#prHigh:checked + label { border-color: #ef4444; background: #fef2f2; box-shadow: 0 0 0 1px #ef4444 inset; } #prHigh:checked + label b { color: #dc2626; }
[data-bs-theme="dark"] #prHigh:checked + label { background: rgba(220, 38, 38, .12); }
.tk-sla { font-size: .78rem; color: var(--brand-600); background: var(--brand-50); padding: 6px 10px; border-radius: 6px; }
@media (max-width: 575.98px) { .tk { padding: 14px; gap: 12px; } .tk-icon { width: 36px; height: 36px; } }

/* ---------- Find a student ---------- */
.ss-card { padding: 18px 20px 14px; }
.ss-input { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ss-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(11, 74, 155, .12); }
.ss-input > i { color: var(--muted); font-size: 1.15rem; }
.ss-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1.05rem; color: var(--ink); padding: 8px 0; }
.ss-input .btn { min-height: 42px; padding-inline: 20px; }
.ss-clear { border: 0; background: var(--line-2); color: var(--muted); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; }
.ss-clear:hover { color: var(--ink); }
.ss-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ss-filters .form-select { width: auto; min-width: 140px; min-height: 34px; }
.ss-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); font-size: .86rem; }
.ss-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s; }
.ss-row:hover, .ss-row.sel { background: var(--surface-2); }
.ss-row.sel { box-shadow: inset 3px 0 0 var(--brand); }
.ss-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: .9rem; }
.ss-main { flex: 1; }
.ss-name { font-weight: 600; font-size: .98rem; color: var(--ink); }
.ss-name:hover { color: var(--brand); text-decoration: none; }
.ss-meta { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.ss-meta i { margin-right: 5px; font-size: .75rem; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ss-tags:empty { display: none; }
.ss-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.ss-row mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }
[data-bs-theme="dark"] .ss-row mark { background: rgba(250, 204, 21, .35); }
.ss-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ss-actions .icon-btn { width: 34px; height: 34px; font-size: .95rem; }
.ss-browse { padding: 20px; }
.ss-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin-bottom: 12px; }
.ss-h span { text-transform: none; letter-spacing: 0; font-size: .8rem; margin-left: 6px; }
.ss-recent { margin-bottom: 24px; }
.ss-recent-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none !important; }
.ss-recent-item:hover { border-color: #8db4e8; background: var(--brand-50); color: var(--ink); }
.ss-recent-item .avatar { width: 30px; height: 30px; font-size: .7rem; }
.ss-recent-item span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.ss-recent-item b { font-size: .82rem; } .ss-recent-item small { font-size: .7rem; color: var(--muted); }
.ss-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ss-class { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none !important; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ss-class:hover { border-color: #8db4e8; transform: translateY(-1px); box-shadow: var(--shadow); color: var(--ink); }
.ss-class span { order: -1; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.ss-class b { font-size: 1.45rem; font-weight: 800; color: var(--brand); line-height: 1.2; }
.ss-class small { font-size: .74rem; color: var(--muted); }
.ss-tips { display: flex; gap: 12px; margin-top: 24px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); font-size: .82rem; color: var(--ink-2); }
.ss-tips > i { color: #f59e0b; font-size: 1.1rem; }
@media (max-width: 767.98px) {
  .ss-card { padding: 14px; }
  .ss-input .btn { display: none; }
  .ss-filters .form-select { flex: 1 1 45%; min-width: 0; }
  .ss-row { flex-wrap: wrap; padding: 12px 14px; gap: 12px; }
  .ss-main { flex-basis: calc(100% - 64px); }
  .ss-actions { width: 100%; justify-content: flex-end; }
  .ss-bar { padding: 10px 14px; flex-wrap: wrap; }
}

/* Screen-reader-only text inside a scrolling table (e.g. the "Actions" header) must be positioned within the
   scroll box; otherwise it is placed relative to the page and makes the whole page scroll sideways on phones. */
.table-responsive { position: relative; }

/* ---------- Record lists: status tabs, clickable rows, density, column chooser ---------- */
.list-tabs { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.list-tabs::-webkit-scrollbar { display: none; }
.list-tabs a { padding: 12px 0 11px; font-size: .86rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.list-tabs a span { font-size: .7rem; background: var(--line-2); color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.list-tabs a:hover { color: var(--ink); }
.list-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.list-tabs a.active span { background: var(--brand-50); color: var(--brand); }
.data-table tbody tr[data-href] { cursor: pointer; }
.data-table tbody tr.is-selected > * { --bs-table-bg-state: var(--brand-50); }
.table-compact > :not(caption) > * > * { padding-top: .35rem; padding-bottom: .35rem; }
.table-compact .cell-title .avatar, .table-compact .cell-title img.thumb { width: 24px; height: 24px; font-size: .6rem; }
.table-compact .cell-title .tiny { display: none; }
.col-menu { min-width: 220px; max-height: 360px; overflow-y: auto; }
.col-menu .dropdown-item { cursor: pointer; border-radius: 6px; }
.mini-bar { display: inline-block; width: 48px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; vertical-align: middle; }
.mini-bar > span { display: block; height: 100%; border-radius: 3px; }

/* ---------- Parents list ---------- */
.kid-chip { display: inline-flex; align-items: center; gap: 4px; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: .76rem; font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.kid-chip span { color: var(--muted); font-weight: 400; font-size: .7rem; }
.kid-chip:hover { background: var(--brand-100); }
.kid-chip.is-inactive { background: var(--line-2); color: var(--muted); }

/* ---------- Sibling report ---------- */
.fam { padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.fam.needs { background: color-mix(in srgb, #fffbeb 60%, var(--surface)); }
[data-bs-theme="dark"] .fam.needs { background: rgba(217, 119, 6, .06); }
.fam-head { display: flex; align-items: center; gap: 12px; }
.fam-kids { margin: 10px 0 0 44px; display: grid; gap: 6px; }
.fam-kid { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); flex-wrap: wrap; }
.kid-order { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--brand-50); color: var(--brand); flex-shrink: 0; }
@media (max-width: 575.98px) { .fam { padding: 12px 14px; } .fam-kids { margin-left: 0; } }

/* ---------- Student status (TC / alumni) ---------- */
.st-panel { position: sticky; bottom: 0; z-index: 5; padding: 14px 16px; background: var(--surface); border-top: 2px solid var(--brand); box-shadow: 0 -8px 24px -12px rgba(6, 26, 58, .25); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- Club page ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; }
.pick { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin: 0; }
.pick:hover { border-color: #8db4e8; }
.pick.on { border-color: var(--brand); background: var(--brand-50); }
.pick .form-check-input { margin-top: 3px; flex-shrink: 0; }
.pick span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pick b { font-size: .86rem; font-weight: 600; }
.pick small { font-size: .72rem; color: var(--muted); }
.role-lead { border-color: #fbbf24; background-color: #fffbeb; font-weight: 600; }
[data-bs-theme="dark"] .role-lead { background-color: rgba(245, 158, 11, .12); }

/* ---------- Student documents ---------- */
.doc-file { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: .72rem; font-weight: 600; text-decoration: none !important; background: var(--surface); }
.doc-file:hover { border-color: #8db4e8; color: var(--brand); }
.doc-file img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.doc-file i { width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.2rem; background: var(--surface-2); border-radius: 6px; }

/* ---------- ID card preview (card styles come from idcard.css) ---------- */
.id-preview { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px 20px; background: var(--surface-2); padding-top: 16px; }
.id-preview .idcard { outline: none; box-shadow: 0 6px 18px -6px rgba(6, 26, 58, .35); zoom: 1.15; }
.photo-todo { max-height: 260px; overflow-y: auto; }

/* ---------- Admissions pipeline ---------- */
.funnel-strip { display: flex; align-items: center; gap: 8px; padding: 10px 16px; overflow-x: auto; }
.funnel-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .8rem; white-space: nowrap; text-decoration: none !important; }
.funnel-step:hover { border-color: #8db4e8; color: var(--brand); }
.funnel-n { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: .72rem; padding: 0 6px; }
.pipeline .kanban-col { background: var(--surface-2); border: 1px solid var(--line-2); min-width: 210px; flex: 1 1 0; max-width: none; }
.kcol-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; padding: 2px 4px 10px; }
.kcol-head i { color: var(--brand); }
.kcol-n { margin-left: auto; min-width: 24px; text-align: center; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.kcol-empty { text-align: center; color: var(--muted); font-size: .78rem; padding: 18px 0; border: 1px dashed var(--line); border-radius: 10px; }
.pcard { position: relative; }
.pcard.is-stale { border-left: 3px solid #f59e0b; }
.pcard-menu { width: 28px; height: 28px; font-size: .9rem; margin: -2px -4px 0 0; }
.pcard-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .72rem; color: var(--muted); }
.pcard-foot i { margin-right: 3px; }
.pmove { max-height: 360px; overflow-y: auto; font-size: .84rem; }
.pmove form { margin: 0; }
.pmove .is-next { font-weight: 600; color: var(--brand); background: var(--brand-50); }

/* ---------- Small icon buttons (contact actions in lists) ---------- */
.icon-btn.icon-btn-sm { width: 30px; height: 30px; font-size: .88rem; border-radius: 8px; border-color: var(--line); }

/* ---------- Merit list ---------- */
.print-only { display: none; }
.merit-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; font-weight: 700; font-size: .85rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.merit-rank.top-1 { background: #fef3c7; color: #92400e; }
.merit-rank.top-2 { background: #e5e7eb; color: #374151; }
.merit-rank.top-3 { background: #fde6d4; color: #9a3412; }
.merit-table tr.merit-in > td { background: rgba(22, 163, 74, .06); }
.merit-table tr.merit-in > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.merit-table tr.merit-offered .merit-score { color: var(--bs-secondary-color); }
.merit-table tr.merit-cutoff > td { padding: 0; border-bottom: 0; background: transparent; }
.merit-table tr.merit-cutoff span { display: block; margin: -1px 0 0; padding: 4px 12px; border-top: 2px dashed #16a34a; color: #15803d; font-size: .75rem; font-weight: 600; }
.merit-score { font-size: 1rem; min-width: 42px; }
.merit-formula b { color: var(--bs-body-color); }
[data-bs-theme="dark"] .merit-rank.top-1 { background: rgba(245, 158, 11, .2); color: #fcd34d; }
[data-bs-theme="dark"] .merit-rank.top-2 { background: rgba(156, 163, 175, .2); color: #e5e7eb; }
[data-bs-theme="dark"] .merit-rank.top-3 { background: rgba(234, 88, 12, .2); color: #fdba74; }
[data-bs-theme="dark"] .merit-table tr.merit-cutoff span { color: #4ade80; border-color: #4ade80; }
@media print {
  .print-only { display: block !important; }
  body:has(.merit-print-head) .page-head { display: none !important; }
  .merit-print-head { border-bottom: 2px solid var(--brand); padding-bottom: 8px; margin-bottom: 12px; }
  .merit-table tr.merit-in > td { background: #f0fdf4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .merit-table a { color: inherit; text-decoration: none; }
  .card-header .badge { display: none; }
}

/* ---------- Entrance test score sheet ---------- */
.print-only-cell { display: none; }
.test-facts > div { min-width: 0; }
@media print {
  body:has(.score-sheet) .page-head { display: none !important; }
  .score-sheet .print-only-cell { display: table-cell !important; width: 150px; }
  .score-sheet td { padding-top: 12px; padding-bottom: 12px; }
  .score-sheet .input-group-text, .score-sheet .form-control { border: 0; background: transparent; padding: 0; box-shadow: none; }
  .score-sheet .input-group { width: auto; flex-wrap: nowrap; }
  .score-sheet .form-control { flex: none; width: 3.5em; text-align: right; margin-right: 4px; border-bottom: 1px solid #999; border-radius: 0; }
  .score-sheet input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
}

/* ---------- Attendance marking ---------- */
.reg-tile { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: var(--radius); color: var(--bs-body-color); text-decoration: none; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.reg-tile:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(11, 74, 155, .1); color: var(--bs-body-color); }
.reg-tile:not(.is-done) { border-left: 3px solid #f59e0b; }
.reg-tile.is-done { border-left: 3px solid #16a34a; }
.reg-cta { color: var(--brand); font-weight: 600; font-size: .85rem; }
.att-pill { display: flex; flex-direction: column; min-width: 78px; padding: 6px 12px; border-radius: 10px; background: var(--bs-tertiary-bg); line-height: 1.2; }
.att-pill span { font-size: .7rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.att-pill b { font-size: 1.15rem; }
.att-pill.tone-success b { color: #16a34a; } .att-pill.tone-danger b { color: #dc2626; } .att-pill.tone-warning b { color: #d97706; } .att-pill.tone-info b { color: #0891b2; }
.att-summary { position: sticky; top: 70px; z-index: 5; }
.att-grid tbody tr { outline: none; }
.att-grid tbody tr:focus-visible > td { background: rgba(11, 74, 155, .07); }
.att-grid tbody tr[data-st="Absent"] > td { background: rgba(220, 38, 38, .05); }
.att-grid tbody tr[data-st="Absent"] > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.att-grid tbody tr[data-st="Late"] > td:first-child, .att-grid tbody tr[data-st="Half Day"] > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.att-seg .btn { min-width: 40px; }
/* Status buttons: full words on wide screens, letters on narrow ones and in card view */
.att-seg .att-long { display: none; }
@media (min-width: 1400px) { #attSheet:not(.att-cards) .att-seg .att-short { display: none; } #attSheet:not(.att-cards) .att-seg .att-long { display: inline; } #attSheet:not(.att-cards) .att-seg .btn { min-width: 64px; font-size: .78rem; } }
.att-savebar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 16px; margin: 0 0 8px; background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: var(--radius); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
@media (max-width: 575.98px) { .att-grid th:first-child, .att-grid td:first-child, .att-grid td .avatar { display: none; } .att-grid td, .att-grid th { padding-left: 8px; padding-right: 8px; } .att-grid tbody tr[data-st="Absent"] > td:nth-child(2) { box-shadow: inset 3px 0 0 #dc2626; }
  .att-summary { position: static; } .att-pill { min-width: 64px; padding: 4px 8px; } .att-grid .att-seg .btn-check + .btn { min-width: 30px; padding: 4px 3px; font-size: .78rem; } .att-grid td:nth-child(2) { white-space: normal; min-width: 0; } .att-grid td, .att-grid th { padding-left: 6px; padding-right: 6px; } }

/* ---------- Absentees ---------- */
.abs-strip { display: flex; gap: 3px; }
.abs-strip span, .abs-legend i { width: 9px; height: 18px; border-radius: 3px; background: var(--bs-border-color); display: inline-block; }
.abs-legend i { height: 10px; margin-right: 5px; vertical-align: -1px; }
.abs-strip .s-present, .abs-legend .s-present, .abs-strip .s-excused { background: #86efac; }
.abs-strip .s-absent, .abs-legend .s-absent { background: #dc2626; }
.abs-strip .s-late, .abs-strip .s-halfday, .abs-legend .s-late { background: #f59e0b; }
.abs-strip .s-none, .abs-legend .s-none { background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); }
[data-bs-theme="dark"] .abs-strip .s-present, [data-bs-theme="dark"] .abs-legend .s-present { background: #15803d; }
.chronic-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; color: var(--bs-body-color); text-decoration: none; }
.chronic-item:hover { border-color: #dc2626; color: var(--bs-body-color); }
@media print { .abs-strip span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body:has(.abs-table) .page-head { display: none !important; } }

/* ---------- Staff attendance ---------- */
.stf-seg .btn { min-width: 38px; font-weight: 600; }
.stf-grid tbody tr[data-st="Absent"] > td { background: rgba(220, 38, 38, .05); }
.stf-grid tbody tr[data-st="Absent"] > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.stf-grid tbody tr[data-st="Late"] > td:first-child, .stf-grid tbody tr[data-st="Half Day"] > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.stf-grid tbody tr[data-st=""] > td:first-child { box-shadow: inset 3px 0 0 var(--bs-border-color); }
.stf-grid input[type=time] { min-width: 100px; }

/* ---------- Attendance: period strip, card view, print ---------- */
.period-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.period-chip { flex: none; display: flex; flex-direction: column; min-width: 104px; padding: 7px 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--surface); color: var(--bs-body-color); text-decoration: none; line-height: 1.25; }
.period-chip:hover { border-color: var(--brand); color: var(--bs-body-color); }
.period-chip .pc-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.period-chip .pc-name .bi { font-size: .75rem; color: var(--bs-secondary-color); }
.period-chip.is-done .pc-name .bi { color: #16a34a; }
.period-chip .pc-sub { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.period-chip.active { border-color: var(--brand); background: rgba(11, 74, 155, .07); box-shadow: inset 0 -2px 0 var(--brand); }
.att-pill small { display: block; margin-top: 1px; }
.att-hint-cards { display: none; }
#attSheet.att-cards .att-hint-cards { display: inline; } #attSheet.att-cards .att-hint-list { display: none; }
#attSheet.att-cards thead { display: none; }
#attSheet.att-cards table, #attSheet.att-cards tbody { display: block; }
#attSheet.att-cards tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px; }
#attSheet.att-cards tbody tr { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bs-border-color); border-radius: 12px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
#attSheet.att-cards tbody tr > td { display: block; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
#attSheet.att-cards tbody tr > td:first-child, #attSheet.att-cards tbody tr > td:last-child { display: none !important; }
#attSheet.att-cards tbody tr[data-st="Present"] { border-color: #86efac; background: rgba(22, 163, 74, .05); }
#attSheet.att-cards tbody tr[data-st="Absent"] { border-color: #fca5a5; background: rgba(220, 38, 38, .07); }
#attSheet.att-cards tbody tr[data-st="Late"], #attSheet.att-cards tbody tr[data-st="Half Day"] { border-color: #fcd34d; background: rgba(245, 158, 11, .07); }
#attSheet.att-cards tbody tr[data-st="Excused"] { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); }
#attSheet.att-cards .att-seg { width: 100%; } #attSheet.att-cards .att-seg .btn { flex: 1; min-width: 0; }
#attSheet.att-cards tbody tr input[data-mirror] { display: block !important; }
@media print {
  .att-grid .att-seg .btn-check:not(:checked) + .btn { display: none; }
  .att-grid .att-seg .btn-check:checked + .btn { display: inline-block !important; border: 0; background: transparent !important; color: #000 !important; font-weight: 700; padding: 0; }
  .att-grid input::placeholder { color: transparent; }
  .att-grid input[type=text], .att-grid input:not([type]) { border: 0; padding: 0; background: transparent; }
  .att-grid .avatar { display: none; }
  body:has(#attSheet) .page-head, .att-summary { display: none !important; }
  .att-grid td, .att-grid th { padding-top: 5px; padding-bottom: 5px; }
}
.lv-avatar { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--brand), #3a78c9); flex-shrink: 0; object-fit: cover; }
.lv-bal-mine { padding: 8px 10px; margin: 0 -10px; border-radius: 8px; background: rgba(11, 74, 155, .06); }

/* ---------- Leave form ---------- */
.lvf-step { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; }
.lvf-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: rgba(11, 74, 155, .1); color: var(--brand); }
.lvf-type { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.lvf-type:hover { border-color: #3a78c9; }
button.lvf-type { background: transparent; color: inherit; }
button.lvf-type:disabled { opacity: .5; cursor: not-allowed; }
.lvf-type.active, .btn-check:checked + .lvf-type { border-color: var(--brand); background: rgba(11, 74, 155, .06); box-shadow: inset 0 0 0 1px var(--brand); }
.btn-check:focus-visible + .lvf-type { outline: 2px solid var(--brand); outline-offset: 2px; }
.lvf-bal:empty { display: none; } .lvf-bal { color: var(--bs-secondary-color); }
.lvf-summary { position: sticky; top: 76px; }

/* ---------- Monthly staff register ---------- */
.reg-table { font-size: .78rem; border-collapse: separate; border-spacing: 0; }
.reg-table th, .reg-table td { text-align: center; vertical-align: middle; padding: 4px 2px; white-space: nowrap; }
.reg-table .reg-name { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; min-width: 190px; max-width: 220px; padding-left: 12px; border-right: 1px solid var(--bs-border-color); }
.reg-table thead .reg-name { z-index: 3; }
.reg-day { min-width: 28px; font-weight: 600; } .reg-day span { display: block; font-size: .62rem; font-weight: 400; opacity: .7; }
.reg-cell { font-weight: 700; font-size: .7rem; min-width: 28px; }
.reg-cell.c-p { color: #15803d; } .reg-cell.c-l { color: #b45309; background: rgba(245, 158, 11, .12); } .reg-cell.c-h { color: #0e7490; background: rgba(8, 145, 178, .1); }
.reg-cell.c-a { color: #fff; background: #dc2626; } .reg-cell.c-lv { color: #475569; background: rgba(100, 116, 139, .14); } .reg-cell.c-lv.is-unpaid { box-shadow: inset 0 -2px 0 #dc2626; }
.reg-table .is-off { background: repeating-linear-gradient(135deg, var(--bs-tertiary-bg), var(--bs-tertiary-bg) 3px, transparent 3px, transparent 6px); color: var(--bs-secondary-color); }
.reg-cell.is-missing { color: #d97706; }
.reg-tot { min-width: 34px; font-weight: 600; border-left: 1px solid var(--bs-border-color); }
.reg-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; text-align: center; line-height: 12px; }
.reg-key.c-p { background: #86efac; } .reg-key.c-l { background: #fcd34d; } .reg-key.c-h { background: #67e8f9; } .reg-key.c-a { background: #dc2626; } .reg-key.c-lv { background: #cbd5e1; }
.reg-key.is-off { border: 1px solid var(--bs-border-color); } .reg-key.is-missing { color: #d97706; font-weight: 700; }
@media print { .reg-wrap { overflow: visible !important; } .reg-table { font-size: 7pt; } .reg-table .reg-name { position: static; min-width: 120px; } .reg-cell, .reg-table .is-off { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: landscape; } body:has(.reg-table) .page-head { display: none !important; } }
.sa-day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .68rem; color: var(--bs-secondary-color); flex: 1; }
.sa-day b { display: block; width: 100%; height: 18px; border-radius: 4px; border: 1px solid var(--bs-border-color); }
.sa-day.is-current { color: var(--bs-body-color); font-weight: 600; } .sa-day.is-current b { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- Late entry / early exit form ---------- */
.ex-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-type-card, .ex-person { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: 12px; cursor: pointer; height: 100%; transition: border-color .15s, background .15s; }
.ex-type-card > i { font-size: 1.4rem; } .ex-type-card span, .ex-person span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ex-type-card small, .ex-person small { color: var(--bs-secondary-color); font-size: .75rem; }
.ex-type-card.ex-warning > i { color: #d97706; } .ex-type-card.ex-info > i { color: #0891b2; }
.ex-person > i { font-size: 1.2rem; color: var(--brand); }
.btn-check:checked + .ex-type-card, .btn-check:checked + .ex-person { border-color: var(--brand); background: rgba(11, 74, 155, .06); box-shadow: inset 0 0 0 1px var(--brand); }
.btn-check:focus-visible + .ex-type-card, .btn-check:focus-visible + .ex-person { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 575.98px) { .ex-type { grid-template-columns: 1fr; } }
#exTime.is-invalid { background-image: none; padding-right: .75rem; }
.btn-check:checked + .period-chip { border-color: var(--brand); background: rgba(11, 74, 155, .07); box-shadow: inset 0 -2px 0 var(--brand); }
.btn-check:focus-visible + .period-chip { outline: 2px solid var(--brand); outline-offset: 2px; }
label.period-chip { cursor: pointer; }
.dev-setup:target { box-shadow: 0 0 0 3px rgba(11, 74, 155, .35); scroll-margin-top: 90px; }
.alert-row-serious > td:not([rowspan]) { background: rgba(220, 38, 38, .05); }
@media print { .alert-sheet { break-after: page; border: 0; } .alert-sheet:last-child { break-after: auto; } body:has(.alert-sheet) .page-head { display: none !important; } .alert-sheet .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Medical record form ---------- */
.mr-types { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-type { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--bs-border-color); border-radius: 999px; cursor: pointer; font-size: .85rem; }
.mr-type:hover { border-color: #3a78c9; }
.btn-check:checked + .mr-type { border-color: var(--brand); background: rgba(11, 74, 155, .08); color: var(--brand); font-weight: 600; }
.btn-check:focus-visible + .mr-type { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-check:checked + .mr-sev.mrs-warning { border-color: #d97706; background: rgba(245, 158, 11, .08); box-shadow: inset 0 0 0 1px #d97706; }
.btn-check:checked + .mr-sev.mrs-danger { border-color: #dc2626; background: rgba(220, 38, 38, .06); box-shadow: inset 0 0 0 1px #dc2626; }
.mr-preview { padding: 10px 12px; border: 1px dashed var(--bs-border-color); border-radius: 10px; }
.vs-alert { padding: 8px 10px; border: 1px solid var(--bs-border-color); border-radius: 10px; margin-bottom: 6px; font-size: .85rem; }
.vs-alert.is-allergy { border-color: #fca5a5; background: rgba(220, 38, 38, .05); }
/* Health reports */
.section-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); }
@media print { .section-title { break-after: avoid; } .table-responsive[style*="max-height"] { max-height: none !important; overflow: visible !important; } .sticky-top { position: static !important; } }
/* Class health alert sheets */
.as-emergency { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 8px 16px; font-size: .8rem; background: rgba(220, 38, 38, .06); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.as-em-lead { font-weight: 600; color: #dc2626; }
.as-em-note { flex-basis: 100%; color: var(--muted); font-size: .75rem; }
.as-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--line-2); color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.as-student { vertical-align: top; border-left: 3px solid transparent; }
.as-student.as-life { border-left-color: #dc2626; }
.as-table > tbody > tr > td { vertical-align: top; }
.as-table > tbody > tr:not(.as-last) > td:not([rowspan]) { border-bottom-style: dashed; }
.as-plan { white-space: normal; line-height: 1.45; }
.as-signoff { padding: 14px 16px 4px; }
@media print {
  .as-emergency, .as-student.as-life, .alert-row-serious > td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .as-table tr { break-inside: avoid; }
  .as-table a[href^="tel:"] { color: inherit; text-decoration: none; }
}
/* Health checkup form */
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hc-chip { padding: 5px 12px; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: .85rem; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.hc-chip:hover { border-color: #3a78c9; }
.btn-check:checked + .hc-chip { background: #198754; border-color: #198754; color: #fff; }
.btn-check:checked + .hc-chip.hc-warn { background: #f59e0b; border-color: #f59e0b; color: #1b1b1b; }
.btn-check:checked + .hc-chip.hc-bad { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-check:focus-visible + .hc-chip { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-bmi { padding: 8px 12px; border-radius: 10px; background: var(--line-2); }
.hc-bmi-ok { background: rgba(25, 135, 84, .1); } .hc-bmi-ok #hcBmiB { color: #198754; }
.hc-bmi-warn { background: rgba(245, 158, 11, .14); } .hc-bmi-warn #hcBmiB { color: #b45309; }
.hc-prev { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .8rem; } .hc-prev span { color: var(--muted); } .hc-prev b { font-weight: 500; }
.cs-table .form-control-sm, .cs-table .form-select-sm { min-width: 74px; }
.cs-table tr.cs-filled > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.cs-foot { position: sticky; bottom: 0; background: var(--bs-body-bg); padding: 10px 0; z-index: 2; }
.cs-table tr.cs-changed > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.cs-table tr.cs-filled:not(.cs-changed) > td:first-child { box-shadow: inset 3px 0 0 #19875480; }
.cs-table td { vertical-align: top; } .cs-table td > .form-control-sm, .cs-table td > .form-select-sm { margin-top: 1px; }
.cs-delta { min-height: 1em; margin-top: 2px; white-space: nowrap; }
@media print {
  .cs-table .form-control-sm, .cs-table .form-select-sm { border: 1px solid #999 !important; background-image: none !important; min-height: 24px; box-shadow: none !important; }
  .cs-table thead th { background: none !important; } .cs-table [data-flags], .cs-delta { font-size: .7rem; }
}
.cs-table [data-h], .cs-table [data-w] { width: 76px; min-width: 76px; } .cs-table [data-v] { min-width: 78px; }
.cs-table [data-d] { min-width: 118px; } .cs-table [data-he] { min-width: 110px; } .cs-table [data-bp] { width: 84px; min-width: 84px; }
.cs-table [data-h], .cs-table [data-w] { width: 66px; min-width: 66px; } .cs-table [data-v] { min-width: 70px; }
.cs-table [data-d] { min-width: 108px; } .cs-table [data-he] { min-width: 102px; } .cs-table [data-bp] { width: 76px; min-width: 76px; }
.cs-table > :not(caption) > * > * { padding-left: 6px; padding-right: 6px; }
/* Vaccinations */
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); text-decoration: none; background: var(--bs-body-bg); }
.vx-chip:hover { border-color: #3a78c9; color: var(--ink); }
.vx-suggest { padding: 10px 12px; border-radius: 10px; background: rgba(11, 74, 155, .06); border: 1px dashed rgba(11, 74, 155, .35); }
.vx-hist { padding: 6px 0; border-bottom: 1px dashed var(--line); } .vx-hist:last-child { border-bottom: 0; }
/* Medical staff availability strip */
.ms-week { display: inline-flex; gap: 3px; }
.ms-week span { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: .66rem; font-weight: 600; background: var(--line-2); color: var(--muted); }
.ms-week span.on { background: rgba(25, 135, 84, .15); color: #198754; }
.ms-week span.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.ms-week span.gap { background: rgba(220, 38, 38, .12); color: #dc2626; }
.ms-daypick { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-daypick label { min-width: 54px; text-align: center; padding: 8px 10px; border: 1px solid var(--bs-border-color); border-radius: 10px; cursor: pointer; font-weight: 500; user-select: none; }
.ms-daypick label:hover { border-color: #3a78c9; }
.ms-daypick .btn-check:checked + label { background: #198754; border-color: #198754; color: #fff; }
.ms-daypick .btn-check:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.ms-daypick.disabled label { opacity: .45; cursor: not-allowed; }
/* Import wizard */
.imp-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.imp-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--line-2); color: var(--muted); font-size: .85rem; font-weight: 500; }
.imp-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-body-bg); font-size: .75rem; }
.imp-steps li.current { background: rgba(11, 74, 155, .1); color: var(--brand); } .imp-steps li.current span { background: var(--brand); color: #fff; }
.imp-steps li.done { color: #198754; } .imp-steps li.done span { background: #198754; color: #fff; }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var(--bs-border-color); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.imp-drop:hover, .imp-drop.over { border-color: var(--brand); background: rgba(11, 74, 155, .04); }
.imp-drop.has-file { border-style: solid; border-color: #198754; background: rgba(25, 135, 84, .05); }
.imp-table tr.imp-bad > td { background: rgba(220, 38, 38, .04); }
/* Hostel occupancy board */
.ho-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.ho-tab { display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 10px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bs-body-bg); color: var(--ink); text-decoration: none; }
.ho-tab:hover { border-color: #3a78c9; color: var(--ink); }
.ho-tab.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: rgba(11, 74, 155, .04); }
.ho-tab-bar, .ho-room-bar { display: block; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.ho-tab-bar span, .ho-room-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.ho-room-bar { margin: 0; border-radius: 0; height: 3px; }
.ho-bed { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); min-height: 50px; transition: opacity .15s, box-shadow .15s; }
.ho-bed-no { width: 24px; height: 24px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--line-2); color: var(--ink-2); }
.ho-occ { background: rgba(11, 74, 155, .04); } .ho-occ .ho-bed-no { background: var(--brand); color: #fff; }
.ho-free { border-style: dashed; border-color: rgba(25, 135, 84, .45); } .ho-free .ho-bed-no { background: rgba(25, 135, 84, .15); color: #198754; }
.ho-maint { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(108, 117, 125, .07) 8px 16px); } .ho-maint .ho-bed-no { background: #adb5bd; color: #fff; }
.ho-isout { border-color: rgba(245, 158, 11, .6); } .ho-isout .ho-bed-no { background: #f59e0b; }
.ho-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 600; background: var(--line-2); color: var(--ink-2); }
.ho-allocate { flex-grow: 1; text-align: left; border: 0; background: none; color: #198754; font-size: .85rem; font-weight: 500; padding: 4px 0; }
.ho-allocate:hover { text-decoration: underline; }
.ho-dim { opacity: .28; } .ho-hit { box-shadow: 0 0 0 2px var(--brand); }
.ho-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.ho-legend .lg.occ { background: var(--brand); } .ho-legend .lg.free { background: rgba(25, 135, 84, .5); } .ho-legend .lg.maint { background: #adb5bd; } .ho-legend .lg.out { background: #f59e0b; }
@media print {
  .ho-room { break-inside: avoid; } .ho-room-col { width: 33.33% !important; }
  .ho-bed, .ho-bed-no { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ho-dim { opacity: 1; }
  .ho-room-col[hidden], .ho-floor[hidden] { display: block !important; }
}
.ho-room .card-body { grid-template-columns: minmax(0, 1fr); } .ho-bed { min-width: 0; }
/* Hostel roll call */
.rc-week { display: flex; align-items: flex-end; gap: 6px; }
.rc-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 3px; border-radius: 8px; }
.rc-day.cur { background: rgba(11, 74, 155, .07); }
.rc-dot { width: 22px; height: 16px; border-radius: 5px; display: grid; place-items: center; font-size: .62rem; font-weight: 700; text-decoration: none; }
.rc-dot.ok { background: rgba(25, 135, 84, .55); } .rc-dot.ab { background: #dc2626; color: #fff; } .rc-dot.none { background: var(--line-2); border: 1px dashed var(--bs-border-color); }
.rc-dot.sel { box-shadow: 0 0 0 2px var(--brand); }
.rc-room + .rc-room { border-top: 2px solid var(--line); }
.rc-row:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.rc-row.rc-absent > td { background: rgba(220, 38, 38, .05); }
.rc-row.rc-onleave > td, .rc-row.rc-outing > td { background: rgba(13, 202, 240, .05); }
.rc-foot { position: sticky; bottom: 0; background: var(--bs-body-bg); padding: 10px 0; z-index: 2; }
.rc-box { display: inline-block; width: 18px; height: 18px; border: 1.5px solid #555; border-radius: 3px; }
@media print { .rc-table .print-only-cell { display: table-cell !important; } .rc-table .print-only-cell:last-of-type { width: 30%; } .rc-row > td { background: none !important; } .rc-row[hidden], .rc-room[hidden] { display: table-row-group !important; } }
/* Hostel allocation form: bed picker */
.al-room { border: 1px solid var(--line); border-radius: 12px; padding: 10px; height: 100%; }
.al-bed { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--bs-body-bg); line-height: 1.15; color: var(--ink-2); }
.al-bed.free { border-style: dashed; border-color: rgba(25, 135, 84, .55); color: #198754; }
.al-bed.free:hover { background: rgba(25, 135, 84, .07); }
.al-bed.occ { background: rgba(11, 74, 155, .07); color: var(--brand); cursor: not-allowed; }
.al-bed.maint { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(108, 117, 125, .1) 6px 12px); cursor: not-allowed; }
.al-bed.mine { border-color: var(--brand); color: var(--brand); }
.al-bed.sel { background: #198754; border-color: #198754; border-style: solid; color: #fff; box-shadow: 0 0 0 3px rgba(25, 135, 84, .25); }
.al-bed:disabled { opacity: .75; }
.al-bed:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Hostel complaint form */
.cp-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-hostel { background: var(--bs-body-bg); }
.cp-hostel.active { border-color: var(--brand); background: rgba(11, 74, 155, .06); box-shadow: inset 0 0 0 1px var(--brand); }
.btn-check:checked + .cp-pri-urgent { border-color: #dc2626; background: rgba(220, 38, 38, .06); box-shadow: inset 0 0 0 1px #dc2626; }
.btn-check:checked + .cp-pri-high { border-color: #f59e0b; background: rgba(245, 158, 11, .08); box-shadow: inset 0 0 0 1px #f59e0b; }
/* Hostel form: room plan preview */
.hs-grid { display: grid; gap: 10px; max-height: 320px; overflow: auto; padding: 10px; border: 1px dashed var(--bs-border-color); border-radius: 10px; }
.hs-room { display: inline-flex; flex-direction: column; align-items: center; min-width: 54px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bs-body-bg); font-weight: 600; font-size: .8rem; line-height: 1.15; }
.hs-room small { font-weight: 400; font-size: .66rem; color: var(--muted); }
.hs-room.ac { border-color: rgba(13, 202, 240, .6); background: rgba(13, 202, 240, .07); }
/* Hostel rooms list: bed tiles */
.hr-bed { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px; border-radius: 6px; font-size: .72rem; font-weight: 700; border: 1px solid var(--line); }
.hr-occupied { background: var(--brand); border-color: var(--brand); color: #fff; }
.hr-available { border-style: dashed; border-color: rgba(25, 135, 84, .6); color: #198754; }
.hr-maintenance { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(108, 117, 125, .15) 5px 10px); color: var(--muted); }
/* Hostel room form: bed preview */
.rm-bed { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; padding: 5px 8px; border-radius: 9px; border: 1px solid var(--line); font-weight: 700; font-size: .85rem; line-height: 1.1; }
.rm-bed small { font-weight: 400; font-size: .65rem; }
.rm-bed.occ { background: var(--brand); border-color: var(--brand); color: #fff; }
.rm-bed.keep { border-style: dashed; border-color: rgba(25, 135, 84, .6); color: #198754; }
.rm-bed.add { background: rgba(25, 135, 84, .1); border-color: #198754; color: #198754; }
.rm-bed.maint { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .6); color: #b45309; }
.rm-bed.me { border: 2px solid var(--bs-primary, #4f46e5); color: var(--bs-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.rm-bed.del { text-decoration: line-through; color: #dc2626; border-color: rgba(220, 38, 38, .5); background: rgba(220, 38, 38, .05); }

/* Hostel attendance form: resident picker */
.ha-list .list-group-item.active { background: rgba(11, 74, 155, .08); color: inherit; border-color: rgba(11, 74, 155, .35); box-shadow: inset 3px 0 0 var(--brand); z-index: 2; }

/* Mess menu: veg / non-veg marks (the familiar square-and-dot food symbol) and the week grid */
.mm-dot { display: inline-block; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px; margin-right: 5px; vertical-align: -1px; position: relative; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mm-dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.mm-dot.veg { color: #16a34a; }
.mm-dot.nonveg { color: #b91c1c; }
.mm-week th, .mm-week td { min-width: 150px; }
.mm-week th:first-child { min-width: 100px; }
.mm-week tr.mm-today > * { background: rgba(11, 74, 155, .06); }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .mm-sheet { border: 0 !important; box-shadow: none !important; }
  .mm-break { break-before: page; }
  .mm-print tr.mm-today > * { background: none; }
  body:has(.mm-sheet) .page-head { display: none !important; }
}
.btn.active .mm-dot, .btn:active .mm-dot { color: #fff; }
.mm-week a.mm-edit { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; }
.mm-week a.mm-edit:hover, .mm-today-card a.mm-edit:hover { border-bottom-color: currentColor; }
.mm-today-card { border-color: var(--brand) !important; background: rgba(11, 74, 155, .05); }
.mm-sheet a.mm-edit { color: inherit; text-decoration: none; }
.pg-sort { cursor: pointer; white-space: nowrap; }
.pg-sort:hover { text-decoration: underline; }
.pg-sort[aria-sort="ascending"]::after { content: " \25B2"; font-size: .6rem; }
.pg-sort[aria-sort="descending"]::after { content: " \25BC"; font-size: .6rem; }

/* Exam analysis heat map */
.hm-table td, .hm-table th { white-space: nowrap; }
.hm-0 { background: rgba(220, 53, 69, .18) !important; }
.hm-1 { background: rgba(253, 126, 20, .16) !important; }
.hm-2 { background: rgba(255, 193, 7, .14) !important; }
.hm-3 { background: rgba(32, 201, 151, .14) !important; }
.hm-4 { background: rgba(25, 135, 84, .22) !important; }
.hm-key { display: inline-block; padding: 1px 6px; border-radius: 4px; margin-left: 3px; }
@media print { .hm-table td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Homework form: due-date load strip */
.hw-load { overflow-x: auto; padding-bottom: 2px; }
.hw-day { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 3px 0; border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bs-body-bg); font-size: .7rem; line-height: 1.15; color: inherit; }
.hw-day b { font-size: .85rem; }
.hw-day i { font-style: normal; font-weight: 700; min-height: .9rem; color: var(--brand); }
.hw-day.sun { opacity: .6; }
.hw-day.heavy { background: rgba(220, 53, 69, .1); border-color: rgba(220, 53, 69, .5); }
.hw-day.heavy i { color: #dc3545; }
.hw-day.sel { border: 2px solid var(--brand); box-shadow: 0 0 0 2px rgba(11, 74, 155, .15); }

/* Lesson plans: plan detail dots */
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-border-color); display: inline-block; }
.lp-dot.on { background: var(--brand); }

/* Syllabus coverage bar with the expected-pace marker */
.sy-bar { position: relative; height: 10px; border-radius: 6px; background: var(--bs-secondary-bg); overflow: visible; }
.sy-fill { height: 100%; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sy-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #212529; border-radius: 1px; }
[data-bs-theme="dark"] .sy-pace { background: #f8f9fa; }

/* Subject allocation: weekly load per class */
.cs-load { width: 92px; }