/*
 * SchoolManagement.app — interface design system
 * --------------------------------------------------------------
 * Loaded after Bootstrap 5.3 by every layout (admin, platform,
 * parent portal, auth). It re-themes Bootstrap through its CSS
 * variables, then adds the app shell and a few product components.
 *
 * Palette is taken from the logo: vermilion cap + graphite building.
 * Type: Anek Latin (Ek Type) — variable weight and width; headings
 * use the narrower width, body text the normal width.
 */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
    /* brand */
    --sm-red-50: #fdf1ee;
    --sm-red-100: #fbdcd5;
    --sm-red-200: #f6b6a8;
    --sm-red-500: #e2412b;   /* logo vermilion: marks, large accents */
    --sm-red-600: #cf3a22;   /* buttons with white text (4.9:1) */
    --sm-red-700: #b42d1c;   /* links and red text on white */

    /* graphite (logo building) */
    --sm-graphite-950: #18181c;
    --sm-graphite-900: #1f1f24;
    --sm-graphite-800: #2a2a30;
    --sm-graphite-700: #3a3a42;
    --sm-graphite-500: #4a4a52;

    /* neutrals */
    --sm-ink: #1c1c21;
    --sm-ink-2: #3d3d45;
    --sm-muted: #6b6b75;
    --sm-faint: #9a9aa3;
    --sm-line: #e6e4e0;
    --sm-line-strong: #d4d1cb;
    --sm-paper: #f5f4f2;
    --sm-paper-2: #efeeeb;
    --sm-surface: #ffffff;

    /* status — every fee/payment state maps to exactly one of these */
    --sm-green: #18794e;  --sm-green-bg: #e6f4ec;  --sm-green-line: #b8e0c9;
    --sm-amber: #9a5300;  --sm-amber-bg: #fdf1dc;  --sm-amber-line: #f3d39a;
    --sm-red: #b42d1c;    --sm-red-bg: #fce9e6;    --sm-red-line: #f5c2b8;
    --sm-blue: #2459c9;   --sm-blue-bg: #e8effc;   --sm-blue-line: #bdd0f5;
    --sm-violet: #6741c2; --sm-violet-bg: #efeafb; --sm-violet-line: #d4c7f3;
    --sm-grey: #4d4d57;   --sm-grey-bg: #eeedea;   --sm-grey-line: #d9d7d2;

    /* type */
    --sm-font: "Anek Latin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sm-narrow: 88%;
    --sm-text-xs: 0.75rem;     /* 12 */
    --sm-text-sm: 0.8125rem;   /* 13 */
    --sm-text-base: 0.9375rem; /* 15 */
    --sm-text-md: 1.0625rem;   /* 17 */
    --sm-text-lg: 1.25rem;     /* 20 */
    --sm-text-xl: 1.625rem;    /* 26 */
    --sm-text-2xl: 2.125rem;   /* 34 */

    /* shape */
    --sm-r-sm: 6px;
    --sm-r: 8px;
    --sm-r-lg: 12px;
    --sm-r-xl: 16px;
    --sm-shadow-pop: 0 12px 32px -10px rgba(28, 28, 33, .22), 0 2px 6px rgba(28, 28, 33, .06);
    --sm-shadow-card: 0 1px 2px rgba(28, 28, 33, .04);
    --sm-focus: 0 0 0 3px rgba(226, 65, 43, .28);

    /* shell */
    --sm-sidebar-w: 260px;
    --sm-topbar-h: 60px;
    --sm-gutter: 28px;

    /* legacy names still referenced inline by some views */
    --primary-color: var(--sm-red-600);
    --primary-dark: var(--sm-red-700);
    --secondary-color: var(--sm-muted);
    --success-color: var(--sm-green);
    --info-color: var(--sm-blue);
    --warning-color: var(--sm-amber);
    --danger-color: var(--sm-red);
    --light-color: var(--sm-paper);
    --dark-color: var(--sm-ink-2);
    --body-bg: var(--sm-paper);
    --sidebar-width: var(--sm-sidebar-w);
    --navbar-height: var(--sm-topbar-h);
    --card-border-radius: var(--sm-r-lg);

    /* Bootstrap re-theme */
    --bs-font-sans-serif: var(--sm-font);
    --bs-body-font-family: var(--sm-font);
    --bs-body-font-size: var(--sm-text-base);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--sm-ink);
    --bs-body-color-rgb: 28, 28, 33;
    --bs-body-bg: var(--sm-paper);
    --bs-emphasis-color: var(--sm-ink);
    --bs-secondary-color: var(--sm-muted);
    --bs-tertiary-bg: var(--sm-paper);
    --bs-heading-color: var(--sm-ink);
    --bs-border-color: var(--sm-line);
    --bs-border-color-translucent: rgba(28, 28, 33, .1);
    --bs-border-radius: var(--sm-r);
    --bs-border-radius-sm: var(--sm-r-sm);
    --bs-border-radius-lg: var(--sm-r-lg);
    --bs-border-radius-xl: var(--sm-r-xl);
    --bs-link-color: var(--sm-red-700);
    --bs-link-color-rgb: 180, 45, 28;
    --bs-link-hover-color: #8f2214;
    --bs-link-hover-color-rgb: 143, 34, 20;
    --bs-primary: var(--sm-red-600);
    --bs-primary-rgb: 207, 58, 34;
    --bs-secondary: var(--sm-graphite-500);
    --bs-secondary-rgb: 74, 74, 82;
    --bs-success: var(--sm-green);
    --bs-success-rgb: 24, 121, 78;
    --bs-info: var(--sm-blue);
    --bs-info-rgb: 36, 89, 201;
    --bs-warning: #d88a07;
    --bs-warning-rgb: 216, 138, 7;
    --bs-danger: var(--sm-red);
    --bs-danger-rgb: 180, 45, 28;
    --bs-light: var(--sm-paper);
    --bs-light-rgb: 245, 244, 242;
    --bs-dark: var(--sm-graphite-900);
    --bs-dark-rgb: 31, 31, 36;
    --bs-primary-text-emphasis: var(--sm-red-700);
    --bs-primary-bg-subtle: var(--sm-red-50);
    --bs-primary-border-subtle: var(--sm-red-200);
    --bs-success-text-emphasis: var(--sm-green);
    --bs-success-bg-subtle: var(--sm-green-bg);
    --bs-success-border-subtle: var(--sm-green-line);
    --bs-warning-text-emphasis: var(--sm-amber);
    --bs-warning-bg-subtle: var(--sm-amber-bg);
    --bs-warning-border-subtle: var(--sm-amber-line);
    --bs-danger-text-emphasis: var(--sm-red);
    --bs-danger-bg-subtle: var(--sm-red-bg);
    --bs-danger-border-subtle: var(--sm-red-line);
    --bs-info-text-emphasis: var(--sm-blue);
    --bs-info-bg-subtle: var(--sm-blue-bg);
    --bs-info-border-subtle: var(--sm-blue-line);
    --bs-focus-ring-color: rgba(226, 65, 43, .28);
    --bs-form-valid-color: var(--sm-green);
    --bs-form-valid-border-color: var(--sm-green);
    --bs-form-invalid-color: var(--sm-red);
    --bs-form-invalid-border-color: var(--sm-red);
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sm-font);
    font-size: var(--sm-text-base);
    line-height: 1.5;
    color: var(--sm-ink);
    background: var(--sm-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sm-font);
    font-stretch: var(--sm-narrow);
    font-weight: 650;
    color: var(--sm-ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
h1, .h1 { font-size: var(--sm-text-2xl); }
h2, .h2 { font-size: var(--sm-text-xl); }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: var(--sm-text-lg); }
h5, .h5 { font-size: var(--sm-text-md); }
h6, .h6 { font-size: var(--sm-text-base); }

a { color: var(--sm-red-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: #8f2214; }
:focus-visible { outline: 2px solid var(--sm-red-500); outline-offset: 2px; }
::selection { background: var(--sm-red-100); }

small, .small { font-size: var(--sm-text-sm); }
.text-muted, .text-secondary { color: var(--sm-muted) !important; }
.text-body-secondary { color: var(--sm-muted) !important; }
hr { border-color: var(--sm-line); opacity: 1; }
code { color: var(--sm-ink-2); background: var(--sm-paper-2); padding: 1px 6px; border-radius: 4px; font-size: .85em; }
.tabular, .table td, .sm-stat-value, .amount { font-variant-numeric: tabular-nums; }

/* text/bg colour utilities follow the palette */
.text-primary { color: var(--sm-red-700) !important; }
.text-success { color: var(--sm-green) !important; }
.text-warning { color: var(--sm-amber) !important; }
.text-danger { color: var(--sm-red) !important; }
.text-info { color: var(--sm-blue) !important; }
.text-dark { color: var(--sm-ink) !important; }
.text-red { color: var(--sm-red-700) !important; }
.bg-red { background-color: var(--sm-red-600) !important; }
.bg-light { background-color: var(--sm-paper) !important; }
.bg-gradient-primary { background: var(--sm-red-600) !important; }
.border-primary { border-color: var(--sm-red-500) !important; }

/* legacy SB-Admin helpers used across older views */
.text-gray-900, .text-gray-800 { color: var(--sm-ink) !important; }
.text-gray-700, .text-gray-600 { color: var(--sm-ink-2) !important; }
.text-gray-500, .text-gray-400 { color: var(--sm-muted) !important; }
.text-gray-300 { color: var(--sm-faint) !important; }
.text-xs { font-size: var(--sm-text-xs) !important; }
.font-weight-bold { font-weight: 650 !important; }
.font-weight-normal { font-weight: 400 !important; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.mr-1 { margin-right: .25rem !important; } .mr-2 { margin-right: .5rem !important; } .mr-3 { margin-right: 1rem !important; }
.ml-1 { margin-left: .25rem !important; } .ml-2 { margin-left: .5rem !important; } .ml-3 { margin-left: 1rem !important; }
.border-left-primary, .border-left-success, .border-left-info, .border-left-warning, .border-left-danger { border-left: 0 !important; }
.text-white-50 { color: rgba(255, 255, 255, .6) !important; }
.btn .text-white-50 { color: inherit !important; opacity: .8; }

/* ------------------------------------------------------------------
   3. App shell — sidebar + topbar + main (admin & platform)
   ------------------------------------------------------------------ */
.sm-shell { min-height: 100vh; }

.sm-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--sm-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--sm-graphite-900);
    color: #c9c9d0;
    border-right: 1px solid var(--sm-graphite-950);
    transition: transform .22s ease;
}
.sm-sidebar-head {
    display: flex; align-items: center; gap: .75rem;
    padding: 16px 18px 14px;
    min-height: 72px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sm-logo-tile {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    background: #fff; display: grid; place-items: center; overflow: hidden;
}
.sm-logo-tile img { width: 32px; height: 32px; object-fit: contain; }
.sm-sidebar-org { min-width: 0; line-height: 1.2; }
.sm-sidebar-org strong {
    display: block; color: #fff; font-weight: 600; font-size: .95rem;
    font-stretch: var(--sm-narrow);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-sidebar-org span { color: #9c9ca6; font-size: var(--sm-text-xs); }
.sm-sidebar-org .sm-role-chip {
    display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px;
    background: rgba(226, 65, 43, .18); color: #ff9c8a; font-weight: 600;
}

.sm-nav { flex: 1; overflow-y: auto; padding: 10px 10px 18px; scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }
.sm-nav-group { margin-top: 16px; }
.sm-nav-group:first-child { margin-top: 4px; }
.sm-nav-label {
    padding: 0 10px 6px; font-size: var(--sm-text-xs); font-weight: 600;
    color: #85858f; letter-spacing: .01em;
}
.sm-nav a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: 38px; padding: 7px 10px; margin: 1px 0;
    border-radius: var(--sm-r);
    color: #c4c4cc; font-size: .925rem; font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.sm-nav a i { width: 18px; text-align: center; font-size: .9rem; color: #8b8b95; transition: color .12s ease; }
.sm-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sm-nav a:hover i { color: #c9c9d0; }
.sm-nav a.active { background: rgba(255, 255, 255, .09); color: #fff; }
.sm-nav a.active i { color: #ff7a63; }
.sm-nav a.active::before {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--sm-red-500);
}
.sm-nav a:focus-visible { outline: 2px solid #ff7a63; outline-offset: -2px; }
.sm-nav-count {
    margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px;
    background: var(--sm-red-500); color: #fff; font-size: var(--sm-text-xs); font-weight: 650;
    text-align: center; font-variant-numeric: tabular-nums;
}

.sm-sidebar-support { padding: 8px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.sm-sidebar-support a {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: var(--sm-r);
    color: #c6c6ce; text-decoration: none;
}
.sm-sidebar-support a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sm-sidebar-support i { margin-top: 2px; color: #25d366; font-size: 1rem; }
.sm-sidebar-support strong { display: block; font-size: .875rem; font-weight: 600; font-style: normal; color: inherit; }
.sm-sidebar-support em { display: block; font-size: 11px; font-style: normal; color: #9c9ca6; }
.sm-sidebar-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .06);
}
.sm-sidebar-foot .sm-who { min-width: 0; flex: 1; line-height: 1.25; }
.sm-sidebar-foot .sm-who strong { display: block; color: #fff; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-sidebar-foot .sm-who span { color: #9c9ca6; font-size: var(--sm-text-xs); }
.sm-icon-btn-dark {
    width: 34px; height: 34px; border-radius: var(--sm-r); display: grid; place-items: center;
    color: #a9a9b2; background: transparent; border: 0;
}
.sm-icon-btn-dark:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.sm-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--sm-topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 var(--sm-gutter);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--sm-line);
}
.sm-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; color: var(--sm-muted); }
.sm-crumbs a { color: var(--sm-muted); }
.sm-crumbs a:hover { color: var(--sm-ink); }
.sm-crumbs .sep { color: var(--sm-faint); font-size: .7rem; }
.sm-crumbs .current { color: var(--sm-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sm-support-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--sm-line); border-radius: var(--sm-r);
    background: var(--sm-paper); color: var(--sm-ink-2);
    font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.sm-support-chip i { color: #128c7e; font-size: 1rem; }
.sm-support-chip:hover { background: #fff; border-color: var(--sm-line-strong, var(--sm-line)); color: var(--sm-ink); text-decoration: none; }
.ob-top .sm-support-chip { background: #fff; }
.sm-icon-btn {
    position: relative;
    width: 38px; height: 38px; border-radius: var(--sm-r);
    display: inline-grid; place-items: center;
    color: var(--sm-ink-2); background: transparent; border: 1px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}
.sm-icon-btn > i { font-size: 1.05rem; }
.sm-icon-btn:hover { background: var(--sm-paper); border-color: var(--sm-line); color: var(--sm-ink); }
.sm-icon-btn .sm-dot {
    position: absolute; top: 1px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
    background: var(--sm-red-500); color: #fff; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid #fff; font-variant-numeric: tabular-nums;
}
.sm-menu-btn { display: none; }
.sm-user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px; border-radius: 99px; border: 1px solid var(--sm-line);
    background: #fff; color: var(--sm-ink); font-weight: 500; font-size: .9rem;
}
.sm-user-btn:hover { border-color: var(--sm-line-strong); }
.sm-user-btn::after { display: none; }

.sm-avatar {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--sm-red-100); color: var(--sm-red-700);
    font-weight: 650; font-size: .8rem; letter-spacing: .02em;
}
.sm-avatar.lg { width: 48px; height: 48px; font-size: 1.05rem; }
.sm-avatar.xl { width: 72px; height: 72px; font-size: 1.5rem; }
.sm-avatar.dark { background: var(--sm-graphite-700); color: #fff; }

.sm-main {
    margin-left: var(--sm-sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
.sm-content {
    flex: 1;
    width: 100%;
    max-width: 1600px;
    padding: 24px var(--sm-gutter) 48px;
}
.sm-content > .container-fluid,
.sm-content > div > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

.sm-scrim { display: none; }

.sm-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px var(--sm-gutter);
    background: var(--sm-amber-bg); color: var(--sm-amber);
    border-bottom: 1px solid var(--sm-amber-line); font-size: .9rem; font-weight: 500;
}
.sm-banner .btn { margin-left: auto; }

@media (max-width: 991.98px) {
    :root { --sm-gutter: 16px; }
    .sm-sidebar { transform: translateX(-100%); box-shadow: none; }
    .sm-shell.nav-open .sm-sidebar { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
    .sm-shell.nav-open .sm-scrim {
        display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(24, 24, 28, .45);
    }
    .sm-main { margin-left: 0; }
    .sm-menu-btn { display: inline-grid; margin-left: -6px; }
    .sm-user-btn .sm-user-name { display: none; }
    .sm-content { padding-top: 18px; }
}
@media (max-width: 575.98px) {
    .sm-crumbs .crumb-parent, .sm-crumbs .sep { display: none; }
}

/* ------------------------------------------------------------------
   4. Page header — styles both the new .sm-page-head and the legacy
      "d-sm-flex ... mb-4 > h1.h3" header used across older views
   ------------------------------------------------------------------ */
.sm-page-head,
.sm-content .d-sm-flex.align-items-center.justify-content-between.mb-4 {
    display: flex !important; align-items: flex-end !important; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 16px;
    margin-bottom: 22px !important;
}
.sm-page-head h1,
.sm-content .d-sm-flex.align-items-center.justify-content-between.mb-4 > h1,
.sm-content .d-sm-flex.align-items-center.justify-content-between.mb-4 > .h3 {
    margin: 0; font-size: 1.75rem; font-weight: 650; font-stretch: var(--sm-narrow); color: var(--sm-ink);
}
.sm-page-head p { margin: 4px 0 0; color: var(--sm-muted); }
.sm-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-content .d-sm-flex.align-items-center.justify-content-between.mb-4 .d-none.d-sm-inline-block { display: inline-flex !important; }

/* ------------------------------------------------------------------
   5. Cards
   ------------------------------------------------------------------ */
.card {
    --bs-card-border-color: var(--sm-line);
    --bs-card-border-radius: var(--sm-r-lg);
    --bs-card-inner-border-radius: calc(var(--sm-r-lg) - 1px);
    --bs-card-cap-bg: var(--sm-surface);
    --bs-card-cap-padding-y: 14px;
    --bs-card-cap-padding-x: 20px;
    --bs-card-spacer-y: 20px;
    --bs-card-spacer-x: 20px;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-r-lg);
    background: var(--sm-surface);
    box-shadow: var(--sm-shadow-card);
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--sm-shadow-card) !important; }
.card.border-0 { border: 1px solid var(--sm-line) !important; }
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--sm-surface);
    border-bottom: 1px solid var(--sm-line);
    min-height: 54px;
}
.card-header:first-child { border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.card-header .card-title {
    margin: 0; font-size: 1.02rem; font-weight: 650; font-stretch: var(--sm-narrow); color: var(--sm-ink) !important;
}
.card-header.bg-primary, .card-header.bg-danger, .card-header.bg-success, .card-header.bg-info,
.card-header.bg-warning, .card-header.bg-dark, .card-header.bg-secondary, .card-header.bg-gradient-primary {
    background: var(--sm-surface) !important; color: var(--sm-ink) !important;
}
.card-header.bg-gradient-primary *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-primary *:not(.btn):not(.badge):not(.btn *) ,
.card-header.bg-danger *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-success *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-info *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-dark *:not(.btn):not(.badge):not(.btn *) { color: var(--sm-ink) !important; }
.card-header.bg-light { background: var(--sm-paper) !important; }
.card-header .text-white, .card-header.text-white { color: var(--sm-ink) !important; }
.card-title { font-weight: 650; font-stretch: var(--sm-narrow); }
.card-footer { background: var(--sm-paper); border-top: 1px solid var(--sm-line); padding: 12px 20px; }
.card-footer:last-child { border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
.card > .table-responsive:last-child .table, .card > .card-body.p-0 .table { margin-bottom: 0; }

/* ------------------------------------------------------------------
   6. Stat tiles (dashboards)
   ------------------------------------------------------------------ */
.sm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.sm-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px; min-height: 104px;
    background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg);
    color: var(--sm-ink); text-decoration: none; box-shadow: var(--sm-shadow-card);
}
a.sm-stat:hover { border-color: var(--sm-line-strong); color: var(--sm-ink); }
.sm-stat-label { display: flex; align-items: center; gap: 8px; color: var(--sm-muted); font-size: .875rem; font-weight: 500; }
.sm-stat-label i { font-size: .85rem; color: var(--sm-faint); }
.sm-stat-value { font-size: 1.85rem; font-weight: 650; font-stretch: var(--sm-narrow); line-height: 1.1; letter-spacing: -0.01em; }
.sm-stat-foot { margin-top: auto; font-size: var(--sm-text-sm); color: var(--sm-muted); }
.sm-stat.is-alert .sm-stat-value { color: var(--sm-red-700); }
.sm-stat.is-good .sm-stat-value { color: var(--sm-green); }
.sm-meter { display: block; height: 6px; border-radius: 99px; background: var(--sm-paper-2); overflow: hidden; margin-top: 8px; }
.sm-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--sm-green); }
.sm-meter.warn > span { background: #d88a07; }
.sm-meter.over > span { background: var(--sm-red-500); }

/* legacy stat cards on older pages */
.stat-card, .stats-card { border-left: 1px solid var(--sm-line) !important; }
.stat-card .card-title, .summary-title { text-transform: none !important; color: var(--sm-muted) !important; font-size: .85rem !important; font-weight: 500 !important; letter-spacing: 0; }
.stat-card .card-text, .summary-value { font-size: 1.5rem; font-weight: 650; font-stretch: var(--sm-narrow); color: var(--sm-ink); }
.stat-card .icon, .summary-icon { color: var(--sm-faint) !important; }

/* ------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------ */
.btn {
    --bs-btn-font-family: var(--sm-font);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .9rem;
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 7px;
    --bs-btn-border-radius: var(--sm-r);
    --bs-btn-focus-box-shadow: var(--sm-focus);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px;
    letter-spacing: .005em;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn i.me-1, .btn i.me-2, .btn i.mr-1, .btn i.mr-2, .btn .fa-sm.me-1 { margin-right: 0 !important; }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; --bs-btn-font-size: .825rem; --bs-btn-border-radius: var(--sm-r-sm); min-height: 30px; gap: 5px; }
.btn-lg { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 10px; --bs-btn-font-size: 1rem; min-height: 46px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sm-red-600); --bs-btn-border-color: var(--sm-red-600);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-red-700); --bs-btn-hover-border-color: var(--sm-red-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #9e2717; --bs-btn-active-border-color: #9e2717;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #e39a8c; --bs-btn-disabled-border-color: #e39a8c;
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sm-red); --bs-btn-border-color: var(--sm-red);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #962415; --bs-btn-hover-border-color: #962415;
    --bs-btn-active-bg: #7f1e11; --bs-btn-active-border-color: #7f1e11;
    --bs-btn-disabled-bg: #dc9a90; --bs-btn-disabled-border-color: #dc9a90;
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sm-green); --bs-btn-border-color: var(--sm-green);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #12613e; --bs-btn-hover-border-color: #12613e;
    --bs-btn-active-bg: #0e4e32; --bs-btn-active-border-color: #0e4e32;
    --bs-btn-disabled-bg: #8fc2aa; --bs-btn-disabled-border-color: #8fc2aa;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sm-blue); --bs-btn-border-color: var(--sm-blue);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1c47a3; --bs-btn-hover-border-color: #1c47a3;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #163a85; --bs-btn-active-border-color: #163a85;
}
.btn-warning {
    --bs-btn-color: #4a2a00; --bs-btn-bg: #f5b544; --bs-btn-border-color: #f5b544;
    --bs-btn-hover-color: #3b2100; --bs-btn-hover-bg: #eba52b; --bs-btn-hover-border-color: #eba52b;
    --bs-btn-active-color: #3b2100; --bs-btn-active-bg: #d99418; --bs-btn-active-border-color: #d99418;
}
.btn-secondary, .btn-light {
    --bs-btn-color: var(--sm-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sm-line-strong);
    --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-bg: var(--sm-paper); --bs-btn-hover-border-color: #c2bfb8;
    --bs-btn-active-color: var(--sm-ink); --bs-btn-active-bg: var(--sm-paper-2); --bs-btn-active-border-color: #c2bfb8;
    --bs-btn-disabled-color: var(--sm-faint); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--sm-line);
}
.btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sm-graphite-900); --bs-btn-border-color: var(--sm-graphite-900);
    --bs-btn-hover-bg: var(--sm-graphite-700); --bs-btn-hover-border-color: var(--sm-graphite-700);
}
.btn-outline-primary {
    --bs-btn-color: var(--sm-red-700); --bs-btn-border-color: var(--sm-red-200); --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--sm-red-700); --bs-btn-hover-bg: var(--sm-red-50); --bs-btn-hover-border-color: var(--sm-red-500);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sm-red-600); --bs-btn-active-border-color: var(--sm-red-600);
    color: var(--bs-btn-color) !important; border-color: var(--bs-btn-border-color) !important;
}
.btn-outline-primary:hover { color: var(--sm-red-700) !important; background: var(--sm-red-50) !important; border-color: var(--sm-red-500) !important; }
.btn-check:checked + .btn-outline-primary, .btn-outline-primary.active { color: #fff !important; background: var(--sm-red-600) !important; border-color: var(--sm-red-600) !important; }
.btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--sm-ink-2); --bs-btn-border-color: var(--sm-line-strong); --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-bg: var(--sm-paper); --bs-btn-hover-border-color: #c2bfb8;
    --bs-btn-active-color: var(--sm-ink); --bs-btn-active-bg: var(--sm-paper-2); --bs-btn-active-border-color: #c2bfb8;
}
.btn-outline-success { --bs-btn-color: var(--sm-green); --bs-btn-border-color: var(--sm-green-line); --bs-btn-hover-bg: var(--sm-green-bg); --bs-btn-hover-color: var(--sm-green); --bs-btn-hover-border-color: var(--sm-green); --bs-btn-active-bg: var(--sm-green); --bs-btn-active-border-color: var(--sm-green); }
.btn-outline-danger { --bs-btn-color: var(--sm-red); --bs-btn-border-color: var(--sm-red-line); --bs-btn-hover-bg: var(--sm-red-bg); --bs-btn-hover-color: var(--sm-red); --bs-btn-hover-border-color: var(--sm-red); --bs-btn-active-bg: var(--sm-red); --bs-btn-active-border-color: var(--sm-red); }
.btn-outline-info { --bs-btn-color: var(--sm-blue); --bs-btn-border-color: var(--sm-blue-line); --bs-btn-hover-bg: var(--sm-blue-bg); --bs-btn-hover-color: var(--sm-blue); --bs-btn-hover-border-color: var(--sm-blue); --bs-btn-active-bg: var(--sm-blue); --bs-btn-active-border-color: var(--sm-blue); }
.btn-outline-warning { --bs-btn-color: var(--sm-amber); --bs-btn-border-color: var(--sm-amber-line); --bs-btn-hover-bg: var(--sm-amber-bg); --bs-btn-hover-color: var(--sm-amber); --bs-btn-hover-border-color: #d88a07; --bs-btn-active-bg: #d88a07; --bs-btn-active-border-color: #d88a07; }
.btn-link { --bs-btn-color: var(--sm-red-700); --bs-btn-hover-color: #8f2214; text-decoration: none; }
.btn.shadow-sm, .btn.shadow { box-shadow: none !important; }

/* Row actions inside tables become quiet tinted icon buttons, so the
   data — not the buttons — carries the table. */
.table td .btn-sm, .table td .btn-group-sm > .btn, .table td .btn.btn-xs {
    --bs-btn-padding-x: 8px; min-height: 30px; min-width: 30px;
    border-width: 1px;
}
.table td .btn-sm.btn-primary, .table td .btn-group-sm > .btn-primary { --bs-btn-color: var(--sm-red-700); --bs-btn-bg: var(--sm-red-50); --bs-btn-border-color: var(--sm-red-100); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-red-600); --bs-btn-hover-border-color: var(--sm-red-600); }
.table td .btn-sm.btn-danger, .table td .btn-group-sm > .btn-danger { --bs-btn-color: var(--sm-red); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sm-red-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-red); --bs-btn-hover-border-color: var(--sm-red); }
.table td .btn-sm.btn-info, .table td .btn-group-sm > .btn-info { --bs-btn-color: var(--sm-blue); --bs-btn-bg: var(--sm-blue-bg); --bs-btn-border-color: var(--sm-blue-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-blue); --bs-btn-hover-border-color: var(--sm-blue); }
.table td .btn-sm.btn-success, .table td .btn-group-sm > .btn-success { --bs-btn-color: var(--sm-green); --bs-btn-bg: var(--sm-green-bg); --bs-btn-border-color: var(--sm-green-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-green); --bs-btn-hover-border-color: var(--sm-green); }
.table td .btn-sm.btn-warning, .table td .btn-group-sm > .btn-warning { --bs-btn-color: var(--sm-amber); --bs-btn-bg: var(--sm-amber-bg); --bs-btn-border-color: var(--sm-amber-line); --bs-btn-hover-color: #3b2100; --bs-btn-hover-bg: #f5b544; --bs-btn-hover-border-color: #f5b544; }
.table td .btn-sm.btn-secondary, .table td .btn-group-sm > .btn-secondary { --bs-btn-color: var(--sm-ink-2); }

/* legacy action button classes */
.action-buttons, .action-btn-container, .student-actions { display: flex !important; flex-direction: row !important; gap: 6px; flex-wrap: nowrap; }
.min-w-0 { min-width: 0; }
.action-btn {
    width: 32px; height: 32px; display: inline-grid !important; place-items: center; border-radius: var(--sm-r-sm);
    border: 1px solid var(--sm-line-strong); background: #fff; color: var(--sm-ink-2); transition: all .12s ease;
}
.action-btn:hover { background: var(--sm-paper); color: var(--sm-ink); transform: none; box-shadow: none; }
.action-btn-view { color: var(--sm-blue); border-color: var(--sm-blue-line); background: var(--sm-blue-bg); }
.action-btn-edit { color: var(--sm-red-700); border-color: var(--sm-red-100); background: var(--sm-red-50); }
.action-btn-delete { color: var(--sm-red); border-color: var(--sm-red-line); background: #fff; }
.action-btn-view:hover { background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); }
.action-btn-edit:hover { background: var(--sm-red-600); color: #fff; border-color: var(--sm-red-600); }
.action-btn-delete:hover { background: var(--sm-red); color: #fff; border-color: var(--sm-red); }
.export-btn, .promote-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px;
    border-radius: var(--sm-r); font-weight: 600; font-size: .9rem; text-decoration: none;
    background: #fff; color: var(--sm-ink); border: 1px solid var(--sm-line-strong);
}
.export-btn:hover, .promote-btn:hover { background: var(--sm-paper); color: var(--sm-ink); transform: none; }
.export-btn i { color: var(--sm-green); }
.promote-btn i { color: var(--sm-blue); }
.history-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px !important;
    border-radius: var(--sm-r) !important; background: #fff !important; color: var(--sm-ink) !important;
    border: 1px solid var(--sm-line-strong) !important; box-shadow: none !important; font-size: .9rem !important;
}
.history-btn:hover { background: var(--sm-paper) !important; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--sm-muted); font-weight: 600; }
.back-btn:hover { color: var(--sm-ink); }

/* ------------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------------ */
.form-label, label.form-label, .col-form-label {
    font-weight: 600; font-size: .875rem; color: var(--sm-ink-2); margin-bottom: 6px;
}
.form-control, .form-select {
    min-height: 40px; height: auto;
    padding: 8px 12px;
    font-size: .9375rem; font-family: var(--sm-font);
    color: var(--sm-ink);
    background-color: #fff;
    border: 1px solid var(--sm-line-strong);
    border-radius: var(--sm-r);
    box-shadow: inset 0 1px 1px rgba(28, 28, 33, .03);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-select { padding-right: 36px; }
textarea.form-control { min-height: 84px; }
.form-control-sm, .form-select-sm { min-height: 32px; padding: 4px 10px; font-size: .85rem; border-radius: var(--sm-r-sm); }
.form-control-lg, .form-select-lg { min-height: 48px; font-size: 1rem; }
.form-control::placeholder { color: var(--sm-faint); }
.form-control:hover, .form-select:hover { border-color: #c2bfb8; }
.form-control:focus, .form-select:focus {
    border-color: var(--sm-red-500); box-shadow: var(--sm-focus); outline: 0;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--sm-paper); color: var(--sm-ink-2); border-color: var(--sm-line);
}
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid { border-color: var(--sm-red); }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus { box-shadow: 0 0 0 3px rgba(180, 45, 28, .2); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--sm-green-line); }
.invalid-feedback { color: var(--sm-red); font-size: var(--sm-text-sm); }
.form-text { color: var(--sm-muted); font-size: var(--sm-text-sm); }
.input-group-text {
    background: var(--sm-paper); border: 1px solid var(--sm-line-strong); color: var(--sm-muted);
    font-size: .9rem; border-radius: var(--sm-r);
}
.input-group-text.bg-primary, .input-group-text.bg-danger, .input-group-text.bg-success {
    background: var(--sm-paper) !important; color: var(--sm-muted) !important;
}
.input-group > .form-control:focus { z-index: 5; }
.form-check-input { border-color: #bab6ae; width: 1.1em; height: 1.1em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--sm-red-600); border-color: var(--sm-red-600); }
.form-check-input:focus { box-shadow: var(--sm-focus); border-color: var(--sm-red-500); }
.form-switch .form-check-input { width: 2.2em; }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e2412b'/%3e%3c/svg%3e"); }
.form-check-label { color: var(--sm-ink-2); }
.form-floating > .form-control, .form-floating > .form-select { min-height: 56px; height: 56px; }
.form-floating > label { color: var(--sm-muted); }
.required-field::after, .required::after { content: " *"; color: var(--sm-red); }
.form-group { margin-bottom: 1rem; }
fieldset legend { font-size: 1rem; font-weight: 650; font-stretch: var(--sm-narrow); }

/* Section titles inside long forms */
h5.section-header, .section-header, .exam-section-title {
    position: relative; margin: 4px 0 16px !important; padding: 0 0 10px !important;
    font-size: 1.05rem !important; font-weight: 650 !important; font-stretch: var(--sm-narrow);
    color: var(--sm-ink) !important; border: 0 !important; border-bottom: 1px solid var(--sm-line) !important;
}
h5.section-header::after, .section-header::after { display: none !important; }

/* ------------------------------------------------------------------
   9. Tables + DataTables
   ------------------------------------------------------------------ */
.table {
    --bs-table-color: var(--sm-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sm-line);
    --bs-table-striped-bg: #faf9f8;
    --bs-table-hover-bg: #f8f7f5;
    --bs-table-active-bg: var(--sm-paper);
    font-size: .9rem;
    margin-bottom: 0;
    color: var(--sm-ink);
}
.table > :not(caption) > * > * { padding: 11px 12px; border-bottom-color: var(--sm-line); vertical-align: middle; }
.table thead th, .table > thead > tr > th {
    background: var(--sm-paper) !important;
    color: var(--sm-muted) !important;
    font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: .005em;
    border-bottom: 1px solid var(--sm-line) !important;
    white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--sm-r); }
.table thead th:last-child { border-top-right-radius: var(--sm-r); }
.table.table-bordered { border: 1px solid var(--sm-line); border-radius: var(--sm-r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
.table.table-bordered > tbody > tr:last-child > * { border-bottom-width: 0; }
.table-light, .table-light > th, .table-light > td, thead.table-light th, thead.table-dark th, .table-dark th {
    --bs-table-bg: var(--sm-paper); --bs-table-color: var(--sm-muted); background: var(--sm-paper) !important; color: var(--sm-muted) !important;
}
.table tfoot td, .table tfoot th { background: var(--sm-paper); font-weight: 650; }
.table-responsive { border-radius: var(--sm-r); -webkit-overflow-scrolling: touch; }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }
.table img.img-thumbnail, .table .rounded-circle { border-radius: 50% !important; }
.table .img-thumbnail { padding: 0; border: 1px solid var(--sm-line); }

div.dataTables_wrapper { font-size: .9rem; }
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label { color: var(--sm-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
div.dataTables_wrapper div.dataTables_length select { min-height: 34px; width: auto; display: inline-block; padding: 4px 30px 4px 10px; }
div.dataTables_wrapper div.dataTables_filter input {
    min-height: 36px; width: 240px; margin-left: 0 !important; padding: 6px 12px 6px 34px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
}
div.dataTables_wrapper div.dataTables_info { color: var(--sm-muted); padding-top: 14px !important; font-size: .85rem; }
div.dataTables_wrapper div.dataTables_paginate { padding-top: 10px; }
div.dataTables_wrapper > .row:first-child { margin-bottom: 10px; row-gap: 10px; }
div.dataTables_wrapper > .row { --bs-gutter-x: 0; }
table.dataTable { margin-top: 4px !important; margin-bottom: 4px !important; border-collapse: separate !important; }
table.dataTable > thead .sorting::before, table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before, table.dataTable > thead .sorting_desc::after { opacity: .25; font-size: .7em; }
table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_desc::after { opacity: .9; color: var(--sm-red-500); }
table.dataTable td.dataTables_empty { padding: 36px 12px !important; color: var(--sm-muted); }
div.dt-buttons .btn { min-height: 34px; }

.pagination { --bs-pagination-color: var(--sm-ink-2); --bs-pagination-border-color: var(--sm-line); --bs-pagination-hover-bg: var(--sm-paper); --bs-pagination-hover-color: var(--sm-ink); --bs-pagination-hover-border-color: var(--sm-line-strong); --bs-pagination-focus-box-shadow: var(--sm-focus); --bs-pagination-active-bg: var(--sm-graphite-900); --bs-pagination-active-border-color: var(--sm-graphite-900); --bs-pagination-disabled-color: var(--sm-faint); --bs-pagination-font-size: .875rem; gap: 4px; flex-wrap: wrap; }
.pagination .page-link { border-radius: var(--sm-r-sm) !important; min-width: 34px; text-align: center; }
.dataTables_paginate .paginate_button { padding: 0 !important; border: 0 !important; background: none !important; }

/* ------------------------------------------------------------------
   10. Badges & status
   ------------------------------------------------------------------ */
.badge {
    --bs-badge-font-weight: 600; --bs-badge-font-size: .75rem; --bs-badge-padding-x: 8px; --bs-badge-padding-y: 3px;
    --bs-badge-border-radius: 99px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid transparent; letter-spacing: .01em; line-height: 1.3; vertical-align: middle;
    font-family: var(--sm-font); text-transform: none;
}
.badge.bg-success, .badge.text-bg-success { background: var(--sm-green-bg) !important; color: var(--sm-green) !important; border-color: var(--sm-green-line); }
.badge.bg-warning, .badge.text-bg-warning { background: var(--sm-amber-bg) !important; color: var(--sm-amber) !important; border-color: var(--sm-amber-line); }
.badge.bg-danger, .badge.text-bg-danger, .badge.bg-red { background: var(--sm-red-bg) !important; color: var(--sm-red) !important; border-color: var(--sm-red-line); }
.badge.bg-info, .badge.text-bg-info { background: var(--sm-blue-bg) !important; color: var(--sm-blue) !important; border-color: var(--sm-blue-line); }
.badge.bg-primary, .badge.text-bg-primary { background: var(--sm-red-50) !important; color: var(--sm-red-700) !important; border-color: var(--sm-red-100); }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--sm-grey-bg) !important; color: var(--sm-grey) !important; border-color: var(--sm-grey-line); }
.badge.text-dark { color: inherit !important; }
.badge.rounded-pill { border-radius: 99px; }
.sm-icon-btn .badge, .nav-link .badge.position-absolute { border: 2px solid #fff; }

/* One status vocabulary for fees & payments: paid · pending · unpaid · rejected */
.sm-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px 2px 8px; border-radius: 99px; border: 1px solid;
    font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.sm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sm-status.paid, .sm-status.active, .sm-status.approved { color: var(--sm-green); background: var(--sm-green-bg); border-color: var(--sm-green-line); }
.sm-status.pending, .sm-status.trialing, .sm-status.past_due { color: var(--sm-amber); background: var(--sm-amber-bg); border-color: var(--sm-amber-line); }
.sm-status.unpaid, .sm-status.overdue, .sm-status.failed, .sm-status.suspended { color: var(--sm-red); background: var(--sm-red-bg); border-color: var(--sm-red-line); }
.sm-status.rejected, .sm-status.inactive, .sm-status.canceled, .sm-status.expired, .sm-status.refunded { color: var(--sm-grey); background: var(--sm-grey-bg); border-color: var(--sm-grey-line); }

.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; }
.status-active { color: var(--sm-green); background: var(--sm-green-bg); border-color: var(--sm-green-line); }
.status-inactive { color: var(--sm-grey); background: var(--sm-grey-bg); border-color: var(--sm-grey-line); }
.badge-yes { background: var(--sm-green-bg); color: var(--sm-green); border: 1px solid var(--sm-green-line); }
.badge-no { background: var(--sm-grey-bg); color: var(--sm-grey); border: 1px solid var(--sm-grey-line); }
.promotion-badge { border-radius: 99px !important; padding: 2px 9px !important; font-weight: 600 !important; border: 1px solid; }
.promotion-badge-promoted { color: var(--sm-green) !important; background: var(--sm-green-bg) !important; border-color: var(--sm-green-line); }
.promotion-badge-not-promoted { color: var(--sm-grey) !important; background: var(--sm-grey-bg) !important; border-color: var(--sm-grey-line); }
.payment-badge { display: inline-flex; align-items: center; padding: 2px 9px !important; border-radius: 99px !important; font-size: .78rem !important; font-weight: 600; text-transform: capitalize; border: 1px solid; }
.payment-badge.cash { background: var(--sm-green-bg) !important; color: var(--sm-green) !important; border-color: var(--sm-green-line); }
.payment-badge.bank_transfer, .payment-badge.online { background: var(--sm-blue-bg) !important; color: var(--sm-blue) !important; border-color: var(--sm-blue-line); }
.payment-badge.upi { background: var(--sm-violet-bg) !important; color: var(--sm-violet) !important; border-color: var(--sm-violet-line); }
.payment-badge.cheque, .payment-badge.check { background: var(--sm-amber-bg) !important; color: var(--sm-amber) !important; border-color: var(--sm-amber-line); }
.payment-badge.other { background: var(--sm-grey-bg) !important; color: var(--sm-grey) !important; border-color: var(--sm-grey-line); }

/* ------------------------------------------------------------------
   11. Alerts, toasts, modals, dropdowns, misc Bootstrap components
   ------------------------------------------------------------------ */
.alert {
    --bs-alert-border-radius: var(--sm-r);
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; border: 1px solid; font-size: .9rem; font-weight: 500;
}
.alert > i:first-child { margin-top: 3px; margin-right: 0 !important; }
.alert.alert-dismissible { padding-right: 44px; }
.alert .btn-close { padding: 14px; }
.alert-success { background: var(--sm-green-bg); color: #10583a; border-color: var(--sm-green-line); }
.alert-danger { background: var(--sm-red-bg); color: #8f2214; border-color: var(--sm-red-line); }
.alert-warning { background: var(--sm-amber-bg); color: #7a4200; border-color: var(--sm-amber-line); }
.alert-info { background: var(--sm-blue-bg); color: #1c47a3; border-color: var(--sm-blue-line); }
.alert-primary { background: var(--sm-red-50); color: var(--sm-red-700); border-color: var(--sm-red-100); }
.alert-secondary, .alert-light { background: var(--sm-paper); color: var(--sm-ink-2); border-color: var(--sm-line); }
.alert ul { margin-bottom: 0; }
.alert-heading { color: inherit; font-size: 1rem; }
.sm-flash { display: grid; gap: 8px; margin-bottom: 18px; }
.sm-flash .alert { margin: 0; }

.modal { --bs-modal-border-radius: var(--sm-r-xl); --bs-modal-inner-border-radius: calc(var(--sm-r-xl) - 1px); --bs-modal-header-border-color: var(--sm-line); --bs-modal-footer-border-color: var(--sm-line); --bs-modal-header-padding: 16px 20px; --bs-modal-padding: 20px; }
.modal-content { border: 0; box-shadow: var(--sm-shadow-pop); }
.modal-header { border-bottom: 1px solid var(--sm-line) !important; }
.modal-header.bg-primary, .modal-header.bg-danger, .modal-header.bg-success, .modal-header.bg-info, .modal-header.bg-warning { background: #fff !important; color: var(--sm-ink) !important; }
.modal-header.bg-primary .btn-close-white, .modal-header.bg-danger .btn-close-white, .modal-header.bg-success .btn-close-white, .modal-header.bg-info .btn-close-white { filter: none; }
.modal-header.text-white, .modal-header .text-white { color: var(--sm-ink) !important; }
.modal-title { font-size: 1.1rem; font-weight: 650; font-stretch: var(--sm-narrow); }
.modal-footer { border-top: 1px solid var(--sm-line) !important; background: var(--sm-paper); border-radius: 0 0 var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius); }
.modal-backdrop { --bs-backdrop-bg: #18181c; --bs-backdrop-opacity: .45; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--sm-line); --bs-dropdown-border-radius: var(--sm-r-lg);
    --bs-dropdown-link-hover-bg: var(--sm-paper); --bs-dropdown-link-active-bg: var(--sm-red-50); --bs-dropdown-link-active-color: var(--sm-red-700);
    --bs-dropdown-font-size: .9rem; --bs-dropdown-item-padding-y: 7px; --bs-dropdown-item-padding-x: 12px;
    padding: 6px; box-shadow: var(--sm-shadow-pop); border: 1px solid var(--sm-line);
}
.dropdown-item { border-radius: var(--sm-r-sm); display: flex; align-items: center; gap: 10px; color: var(--sm-ink); }
.dropdown-item i { width: 16px; text-align: center; color: var(--sm-muted); }
.dropdown-header { font-size: var(--sm-text-xs); color: var(--sm-muted); font-weight: 600; padding: 6px 12px; }
.dropdown-divider { border-color: var(--sm-line); margin: 6px 0; }

.nav-tabs { --bs-nav-tabs-border-color: var(--sm-line); --bs-nav-tabs-link-active-color: var(--sm-ink); --bs-nav-tabs-link-active-border-color: transparent transparent var(--sm-red-500); --bs-nav-tabs-link-hover-border-color: transparent; gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--sm-muted); font-weight: 600; padding: 10px 12px; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { color: var(--sm-ink); }
.nav-tabs .nav-link.active { border-bottom-color: var(--sm-red-500); color: var(--sm-ink); background: transparent; }
.nav-pills { --bs-nav-pills-border-radius: 99px; --bs-nav-pills-link-active-bg: var(--sm-graphite-900); --bs-nav-pills-link-active-color: #fff; }
.nav-pills .nav-link { color: var(--sm-ink-2); font-weight: 600; }

.list-group { --bs-list-group-border-color: var(--sm-line); --bs-list-group-action-hover-bg: var(--sm-paper); --bs-list-group-active-bg: var(--sm-red-50); --bs-list-group-active-color: var(--sm-red-700); --bs-list-group-active-border-color: var(--sm-red-100); }
.list-group-item { padding: 11px 16px; }
.progress { --bs-progress-height: 8px; --bs-progress-bg: var(--sm-paper-2); --bs-progress-border-radius: 99px; --bs-progress-bar-bg: var(--sm-red-500); }
.progress-bar.bg-success { background-color: var(--sm-green) !important; }
.progress-bar.bg-warning { background-color: #d88a07 !important; }
.progress-bar.bg-danger { background-color: var(--sm-red-500) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--sm-faint); --bs-breadcrumb-item-active-color: var(--sm-ink); font-size: .875rem; margin-bottom: 8px; }
.breadcrumb a { color: var(--sm-muted); }
.tooltip { --bs-tooltip-bg: var(--sm-graphite-900); --bs-tooltip-border-radius: var(--sm-r-sm); --bs-tooltip-font-size: .8rem; font-family: var(--sm-font); }
.tooltip-inner { background-color: var(--sm-graphite-900) !important; }
.popover { --bs-popover-border-color: var(--sm-line); --bs-popover-border-radius: var(--sm-r-lg); box-shadow: var(--sm-shadow-pop); font-family: var(--sm-font); }
.toast { --bs-toast-border-radius: var(--sm-r-lg); box-shadow: var(--sm-shadow-pop) !important; border: 1px solid var(--sm-line); font-family: var(--sm-font); }
.img-thumbnail { border-color: var(--sm-line); border-radius: var(--sm-r); }
.shadow { box-shadow: var(--sm-shadow-card) !important; }
.shadow-lg { box-shadow: var(--sm-shadow-pop) !important; }
.rounded { border-radius: var(--sm-r) !important; }
.bg-white.rounded.shadow-sm, .bg-white.shadow-sm { border: 1px solid var(--sm-line); box-shadow: none !important; }
.spinner-border { --bs-spinner-border-width: .16em; }

/* ------------------------------------------------------------------
   12. Product components
   ------------------------------------------------------------------ */
/* detail lists: label / value pairs */
.sm-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0; margin: 0; }
.sm-dl dt, .sm-dl dd { padding: 9px 0; border-bottom: 1px solid var(--sm-line); margin: 0; }
.sm-dl dt { color: var(--sm-muted); font-weight: 500; font-size: .875rem; }
.sm-dl dd { color: var(--sm-ink); font-weight: 500; }
.sm-dl > :nth-last-child(-n+2) { border-bottom: 0; }
.info-label, .profile-info-label { color: var(--sm-muted) !important; font-weight: 500 !important; font-size: .85rem; }

/* empty states */
.sm-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--sm-muted); }
.sm-empty i { font-size: 1.4rem; color: var(--sm-faint); margin-bottom: 4px; }
.sm-empty strong { color: var(--sm-ink); font-weight: 600; font-size: 1rem; }
.sm-empty .btn { margin-top: 8px; }

/* simple row list (recent activity) */
.sm-rows { list-style: none; margin: 0; padding: 0; }
.sm-rows li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--sm-line); }
.sm-rows li:last-child { border-bottom: 0; }
.sm-rows .grow { flex: 1; min-width: 0; }
.sm-rows .title { font-weight: 600; color: var(--sm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sm-rows .meta { font-size: var(--sm-text-sm); color: var(--sm-muted); }
.sm-rows .amount { font-weight: 650; white-space: nowrap; }

/* first-run setup checklist (a real sequence, so it is numbered) */
.sm-setup { list-style: none; counter-reset: setup; margin: 0; padding: 0; display: grid; gap: 14px; }
.sm-setup li { counter-increment: setup; position: relative; padding-left: 42px; display: grid; gap: 2px; justify-items: start; }
.sm-setup li::before {
    content: counter(setup); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 650; font-size: .85rem;
    background: var(--sm-paper); border: 1px solid var(--sm-line-strong); color: var(--sm-ink-2);
}
.sm-setup li.done::before { content: "✓"; background: var(--sm-green-bg); border-color: var(--sm-green-line); color: var(--sm-green); }
.sm-setup li.done strong { color: var(--sm-muted); text-decoration: line-through; text-decoration-color: var(--sm-faint); }
.sm-setup strong { font-weight: 600; }
.sm-setup span { color: var(--sm-muted); font-size: .9rem; }
.sm-setup .btn { margin-top: 6px; }

/* quick actions grid */
.sm-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sm-quick a {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--sm-r-lg);
    border: 1px solid var(--sm-line); background: #fff; color: var(--sm-ink); font-weight: 600; font-size: .9rem;
}
.sm-quick a:hover { border-color: var(--sm-line-strong); background: var(--sm-paper); color: var(--sm-ink); }
.sm-quick a i { width: 30px; height: 30px; border-radius: var(--sm-r); display: grid; place-items: center; background: var(--sm-red-50); color: var(--sm-red-700); font-size: .85rem; }

/* filter bar */
.filter-section, .sm-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 14px 16px; margin-bottom: 18px;
    background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg); box-shadow: none;
}
.filter-section .filter-item { flex: 1; min-width: 180px; }
.filter-label, .filter-title { font-weight: 600 !important; font-size: .85rem; color: var(--sm-ink-2) !important; margin-bottom: 6px; }
.actions-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-card { border-radius: var(--sm-r-lg) !important; }

/* icon tiles (legacy .icon-circle) */
.icon-circle {
    width: 40px; height: 40px; border-radius: var(--sm-r); display: grid; place-items: center;
    box-shadow: none; flex: none;
}
.icon-circle.bg-primary, .icon-circle.bg-danger { background: var(--sm-red-50) !important; color: var(--sm-red-700) !important; }
.icon-circle.bg-success { background: var(--sm-green-bg) !important; color: var(--sm-green) !important; }
.icon-circle.bg-info { background: var(--sm-blue-bg) !important; color: var(--sm-blue) !important; }
.icon-circle.bg-warning { background: var(--sm-amber-bg) !important; color: var(--sm-amber) !important; }
.icon-circle i, .icon-circle .text-white { color: inherit !important; }
.avatar-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }

/* The perforated tear line — borrowed from the fee receipt books
   school offices still keep. Used where something *is* a bill or receipt. */
.sm-perf {
    position: relative; height: 0; margin: 0 -1px;
    border-top: 2px dashed var(--sm-line-strong);
}
.sm-perf::before, .sm-perf::after {
    content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sm-paper); border: 1px solid var(--sm-line);
}
.sm-perf::before { left: -10px; clip-path: inset(0 0 0 50%); }
.sm-perf::after { right: -10px; clip-path: inset(0 50% 0 0); }

/* bill / receipt card */
.sm-bill {
    background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg);
    box-shadow: var(--sm-shadow-card); overflow: visible;
}
.sm-bill-top { padding: 16px 18px 14px; }
.sm-bill-bottom { padding: 14px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sm-bill-month { font-weight: 650; font-stretch: var(--sm-narrow); font-size: 1.1rem; }
.sm-bill-amount { font-size: 1.5rem; font-weight: 650; font-stretch: var(--sm-narrow); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sm-bill-meta { color: var(--sm-muted); font-size: var(--sm-text-sm); }

/* ------------------------------------------------------------------
   13. Third-party widgets: Select2, flatpickr, SweetAlert2
   ------------------------------------------------------------------ */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px !important; border: 1px solid var(--sm-line-strong) !important; border-radius: var(--sm-r) !important;
    font-family: var(--sm-font); font-size: .9375rem; box-shadow: none;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--sm-red-500) !important; box-shadow: var(--sm-focus) !important; }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--sm-line) !important; border-radius: var(--sm-r-lg) !important; box-shadow: var(--sm-shadow-pop) !important; font-family: var(--sm-font); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--sm-paper); color: var(--sm-ink); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] { background: var(--sm-red-50); color: var(--sm-red-700); }
.flatpickr-calendar { font-family: var(--sm-font); border-radius: var(--sm-r-lg); box-shadow: var(--sm-shadow-pop); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--sm-red-600); border-color: var(--sm-red-600); }
.swal2-popup { font-family: var(--sm-font) !important; border-radius: var(--sm-r-xl) !important; padding: 1.5rem 1.25rem 1.25rem !important; }
.swal2-title { font-stretch: var(--sm-narrow); font-weight: 650 !important; color: var(--sm-ink) !important; font-size: 1.4rem !important; }
.swal2-html-container { color: var(--sm-ink-2) !important; font-size: .98rem !important; }
.swal2-styled { border-radius: var(--sm-r) !important; font-weight: 600 !important; padding: .6em 1.2em !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--sm-red-600) !important; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--sm-ink) !important; border: 1px solid var(--sm-line-strong) !important; }
.swal2-styled.swal2-deny { background: var(--sm-graphite-700) !important; }
.swal2-icon.swal2-warning { border-color: #f3c46b !important; color: #d88a07 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--sm-green-line) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--sm-green) !important; }
.swal2-input, .swal2-textarea, .swal2-select { border-radius: var(--sm-r) !important; font-family: var(--sm-font) !important; }

/* ------------------------------------------------------------------
   14. Parent portal shell
   ------------------------------------------------------------------ */
.pp-body { background: var(--sm-paper); }
.pp-appbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--sm-line);
}
.pp-appbar-inner { display: flex; align-items: center; gap: 12px; height: 60px; }
.pp-school { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--sm-ink); }
.pp-school:hover { color: var(--sm-ink); }
.pp-school .sm-logo-tile { width: 36px; height: 36px; border: 1px solid var(--sm-line); }
.pp-school strong { display: block; font-size: .98rem; font-weight: 650; font-stretch: var(--sm-narrow); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-school span { display: block; font-size: var(--sm-text-xs); color: var(--sm-muted); }
.pp-tabs { display: flex; gap: 2px; margin-left: 28px; height: 100%; }
.pp-tabs a {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 100%;
    color: var(--sm-muted); font-weight: 600; font-size: .925rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pp-tabs a:hover { color: var(--sm-ink); }
.pp-tabs a.active { color: var(--sm-ink); border-bottom-color: var(--sm-red-500); }
.pp-tabs a i { font-size: .85rem; }
.pp-main { padding: 24px 0 56px; }
.pp-main > .container { max-width: 1080px; }
.pp-footer { border-top: 1px solid var(--sm-line); padding: 18px 0 24px; color: var(--sm-muted); font-size: .875rem; }
.pp-footer .container { max-width: 1080px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-bottomnav { display: none; }

@media (max-width: 767.98px) {
    .pp-tabs { display: none; }
    .pp-main { padding: 16px 0 96px; }
    .pp-footer { display: none; }
    .pp-bottomnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: grid; grid-template-columns: repeat(4, 1fr);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid var(--sm-line);
    }
    .pp-bottomnav a {
        display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: var(--sm-r);
        color: var(--sm-muted); font-size: 11.5px; font-weight: 600;
    }
    .pp-bottomnav a i { font-size: 1.05rem; }
    .pp-bottomnav a.active { color: var(--sm-red-700); }
    .pp-bottomnav a.active i { color: var(--sm-red-500); }
}

/* parent dashboard bits */
.pp-hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pp-hello h1 { font-size: 1.75rem; margin: 0; }
.pp-hello p { margin: 4px 0 0; color: var(--sm-muted); }
.pp-due {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    padding: 20px 22px; border-radius: var(--sm-r-lg);
    background: var(--sm-graphite-900); color: #fff; margin-bottom: 20px;
}
.pp-due .label { color: #b9b9c1; font-size: .9rem; }
.pp-due .value { font-size: 2.1rem; font-weight: 650; font-stretch: var(--sm-narrow); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-due .sub { color: #b9b9c1; font-size: .875rem; margin-top: 2px; }
.pp-due.is-clear { background: var(--sm-green-bg); color: var(--sm-ink); border: 1px solid var(--sm-green-line); }
.pp-due.is-clear .label, .pp-due.is-clear .sub { color: #2e6b4d; }
.pp-child {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg); color: var(--sm-ink);
}
.pp-child:hover { border-color: var(--sm-line-strong); color: var(--sm-ink); }
.pp-child .name { font-weight: 650; font-size: 1rem; }
.pp-child .meta { color: var(--sm-muted); font-size: var(--sm-text-sm); }
.pp-child .go { margin-left: auto; color: var(--sm-faint); }

/* ------------------------------------------------------------------
   15. Auth screens (split layout)
   ------------------------------------------------------------------ */
.auth-body { background: #fff; min-height: 100vh; }
.auth-split { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }
.auth-aside {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 36px 48px 32px;
    background: var(--sm-graphite-900); color: #d7d7dd;
}
/* the tear-off edge between the dark panel and the form */
.auth-aside::after {
    content: ""; position: absolute; top: 0; right: -9px; bottom: 0; width: 18px;
    background: radial-gradient(circle at 50% 50%, #fff 6px, transparent 6.5px) 0 0 / 18px 22px repeat-y;
}
.auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.auth-brand:hover { color: #fff; }
.auth-brand .sm-logo-tile { width: 42px; height: 42px; }
.auth-brand .sm-logo-tile img { width: 36px; height: 36px; }
.auth-brand strong { font-size: 1.05rem; font-weight: 650; font-stretch: var(--sm-narrow); letter-spacing: -0.005em; }
.auth-brand strong em { font-style: normal; color: #ff8a73; }
.auth-pitch h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 650; font-stretch: 80%; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 16px; max-width: 16ch; }
.auth-pitch p { color: #b9b9c1; font-size: 1.02rem; max-width: 40ch; margin: 0; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 42ch; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; color: #d7d7dd; font-size: .95rem; }
.auth-points i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--sm-r); background: rgba(255, 255, 255, .07); color: #ff8a73; font-size: .82rem; }
.auth-aside-foot { color: #85858f; font-size: .85rem; display: flex; gap: 16px; flex-wrap: wrap; }
.auth-aside-foot a { color: #b9b9c1; }
.auth-aside-foot a:hover { color: #fff; }

.auth-main { display: flex; flex-direction: column; padding: 28px 32px; }
.auth-main-top { display: flex; justify-content: flex-end; gap: 12px; font-size: .9rem; color: var(--sm-muted); align-items: center; min-height: 38px; }
.auth-main-top a { font-weight: 600; }
.auth-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 0; }
.auth-form { width: 100%; max-width: 400px; }
.auth-form.wide { max-width: 560px; }
.auth-form h1 { font-size: 2rem; font-weight: 650; font-stretch: 84%; letter-spacing: -0.01em; margin: 0 0 6px; }
.auth-form .lead { color: var(--sm-muted); font-size: 1rem; margin: 0 0 26px; }
.auth-form .form-control, .auth-form .form-select { min-height: 44px; }
.auth-form .btn-primary.w-100, .auth-form .btn-submit { min-height: 46px; font-size: .98rem; }
.auth-form .field { margin-bottom: 16px; }
.auth-form .field-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sm-line); color: var(--sm-muted); font-size: .92rem; display: grid; gap: 6px; }
.auth-alt a { font-weight: 600; }
.sm-input-affix { position: relative; }
.sm-input-affix .form-control { padding-right: 44px; }
.sm-input-affix .affix-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--sm-r-sm);
    color: var(--sm-muted); display: grid; place-items: center;
}
.sm-input-affix .affix-btn:hover { color: var(--sm-ink); background: var(--sm-paper); }
.sm-prefix { display: flex; align-items: stretch; }
.sm-prefix .pre {
    display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--sm-line-strong); border-right: 0;
    border-radius: var(--sm-r) 0 0 var(--sm-r); background: var(--sm-paper); color: var(--sm-muted); font-size: .9rem; white-space: nowrap;
}
.sm-prefix .form-control { border-radius: 0 var(--sm-r) var(--sm-r) 0; }
.sm-suffix { display: flex; align-items: stretch; }
.sm-suffix .form-control { border-radius: var(--sm-r) 0 0 var(--sm-r); }
.sm-suffix .post {
    display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--sm-line-strong); border-left: 0;
    border-radius: 0 var(--sm-r) var(--sm-r) 0; background: var(--sm-paper); color: var(--sm-muted); font-size: .9rem; white-space: nowrap;
}
.auth-choice { display: grid; gap: 10px; }
.auth-choice a {
    display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg);
    color: var(--sm-ink); background: #fff; transition: border-color .12s ease, background-color .12s ease;
}
.auth-choice a:hover { border-color: var(--sm-red-200); background: var(--sm-red-50); color: var(--sm-ink); }
.auth-choice a i.lead-icon { width: 42px; height: 42px; border-radius: var(--sm-r); display: grid; place-items: center; background: var(--sm-paper); color: var(--sm-red-600); flex: none; }
.auth-choice a strong { display: block; font-weight: 650; }
.auth-choice a span { color: var(--sm-muted); font-size: .9rem; }
.auth-choice a .chev { margin-left: auto; color: var(--sm-faint); }

@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-aside { padding: 18px 20px; gap: 0; flex-direction: row; align-items: center; }
    .auth-aside::after { display: none; }
    .auth-aside .auth-pitch, .auth-aside .auth-aside-foot { display: none; }
    .auth-main { padding: 16px 20px 28px; }
    .auth-main-top { justify-content: flex-start; }
    .auth-form-wrap { align-items: flex-start; padding-top: 18px; }
    .auth-form h1 { font-size: 1.7rem; }
}

/* ------------------------------------------------------------------
   16. Old auth container (kept for any page still using it)
   ------------------------------------------------------------------ */
.auth-container { max-width: 420px; width: 100%; padding: 28px; background: #fff; border-radius: var(--sm-r-xl); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); }

/* ------------------------------------------------------------------
   17. Responsive tweaks
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .sm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sm-stat { padding: 12px 14px; min-height: 0; }
    .sm-stat-value { font-size: 1.45rem; }
    .sm-stat-label { font-size: .8rem; }
    .sm-stat-label i { display: none; }
}
@media (max-width: 767.98px) {
    .card-body { padding: 16px; }
    .card-header { padding: 12px 16px; }
    .sm-page-head h1, .sm-content .d-sm-flex.align-items-center.justify-content-between.mb-4 > h1 { font-size: 1.45rem; }
    div.dataTables_wrapper div.dataTables_filter input { width: 100%; }
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { text-align: left !important; }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: flex-start !important; }
    .modal-dialog { margin: .75rem; }
    .actions-toolbar { flex-direction: column; align-items: stretch; }
    .table > :not(caption) > * > * { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
    .sm-sidebar, .sm-topbar, .pp-appbar, .pp-bottomnav, .pp-footer, .sm-banner { display: none !important; }
    .sm-main { margin-left: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; }
}

/* exam screen: field labels reuse the section-title class */
label.exam-section-title {
    display: block; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important;
    font-size: .875rem !important; color: var(--sm-ink-2) !important;
}
label.exam-section-title i { color: var(--sm-faint); }

/* ------------------------------------------------------------------
   18. Onboarding (self sign-up → four steps → plan)
   ------------------------------------------------------------------ */
.ob-body { background: var(--sm-paper); min-height: 100vh; }
.ob-top { background: #fff; border-bottom: 1px solid var(--sm-line); }
.ob-top-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 12px; }
.ob-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 64px; display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
.ob-rail { position: sticky; top: 24px; }
.ob-rail-title { font-weight: 600; color: var(--sm-muted); font-size: .9rem; margin: 0 0 12px; }
.ob-steps { list-style: none; margin: 0; padding: 0; counter-reset: ob; display: grid; gap: 4px; }
.ob-steps li { counter-increment: ob; position: relative; }
.ob-steps li > a, .ob-steps li > div { display: grid; gap: 1px; padding: 10px 12px 10px 48px; border-radius: var(--sm-r-lg); color: var(--sm-ink); position: relative; }
.ob-steps li > a:hover { background: #fff; color: var(--sm-ink); }
.ob-steps li strong { font-weight: 600; font-size: .95rem; }
.ob-steps li span { color: var(--sm-muted); font-size: .82rem; line-height: 1.35; }
.ob-steps li > *::before {
    content: counter(ob); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .82rem; font-weight: 650;
    background: #fff; border: 1px solid var(--sm-line-strong); color: var(--sm-ink-2);
}
.ob-steps li.is-current > * { background: #fff; box-shadow: inset 0 0 0 1px var(--sm-line); }
.ob-steps li.is-current > *::before { background: var(--sm-red-600); border-color: var(--sm-red-600); color: #fff; }
.ob-steps li.is-done > *::before { content: "✓"; background: var(--sm-green-bg); border-color: var(--sm-green-line); color: var(--sm-green); }
.ob-steps li.is-todo strong { color: var(--sm-muted); }
.ob-rail-note { margin: 18px 0 0; color: var(--sm-muted); font-size: .85rem; display: flex; gap: 8px; }
.ob-rail-note i { margin-top: 3px; color: var(--sm-faint); }
.ob-main { min-width: 0; max-width: 760px; }
.ob-head { margin-bottom: 18px; }
.ob-kicker { color: var(--sm-red-700); font-weight: 600; margin: 0 0 4px; font-size: .9rem; }
.ob-head h1 { font-size: 2rem; font-stretch: 84%; margin: 0 0 6px; }
.ob-head p { color: var(--sm-muted); margin: 0; max-width: 62ch; }
.ob-card { background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg); padding: 22px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sm-line); }
.ob-actions-plain { border-top: 0; padding-top: 0; }
.ob-mobile-progress { display: none; }
.ob-classes td { padding-top: 8px; padding-bottom: 8px; }
.ob-classes tr:not(.is-on):not(.is-done) input:not([type=checkbox]) { opacity: .55; }
.ob-classes tr.is-done { background: var(--sm-paper); }
.ob-classes .sm-prefix .pre { padding: 0 8px; font-size: .85rem; }
.ob-classes input[type=number] { min-width: 90px; }
.ob-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--sm-line); }
.ob-toggle:first-of-type { padding-top: 0; }
.ob-reveal { padding: 14px 0 16px; border-bottom: 1px solid var(--sm-line); }
.ob-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ob-plan { position: relative; display: block; cursor: pointer; margin: 0; }
.ob-plan input { position: absolute; opacity: 0; }
.ob-plan .box { display: grid; gap: 6px; align-content: start; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--sm-line-strong); border-radius: var(--sm-r-lg); transition: border-color .12s ease, box-shadow .12s ease; }
.ob-plan .name { font-weight: 650; font-size: 1.1rem; font-stretch: var(--sm-narrow); }
.ob-plan .price { font-size: 1.8rem; font-weight: 650; font-stretch: var(--sm-narrow); line-height: 1.1; }
.ob-plan .price small { font-size: .85rem; color: var(--sm-muted); font-weight: 500; }
.ob-plan .after { color: var(--sm-muted); font-size: .85rem; }
.ob-plan ul { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--sm-line-strong); display: grid; gap: 6px; font-size: .9rem; }
.ob-plan li { display: flex; gap: 8px; align-items: baseline; }
.ob-plan li i { color: var(--sm-green); font-size: .75rem; }
.ob-plan:hover .box { border-color: #bdb9b1; }
.ob-plan input:checked + .box { border-color: var(--sm-red-500); box-shadow: inset 0 0 0 1px var(--sm-red-500), 0 8px 24px -12px rgba(207, 58, 34, .35); }
.ob-plan input:focus-visible + .box { outline: 2px solid var(--sm-red-500); outline-offset: 2px; }
.ob-plan.is-blocked { cursor: not-allowed; }
.ob-plan.is-blocked .box { opacity: .6; background: var(--sm-paper); }
@media (max-width: 991.98px) {
    .ob-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 16px; }
    .ob-rail { display: none; }
    .ob-mobile-progress { display: grid; gap: 6px; margin-bottom: 14px; color: var(--sm-muted); font-size: .85rem; font-weight: 600; }
    .ob-head h1 { font-size: 1.6rem; }
    .ob-card { padding: 16px; }
    .ob-kicker { display: none; } /* the progress bar already says "Step n of 4" */
}
.ob-picks { display: flex; flex-wrap: wrap; gap: 6px; }
/* phones: each class becomes a small card; unticked classes collapse to one line */
@media (max-width: 575.98px) {
    .ob-classes { overflow: visible; }
    .ob-classes table, .ob-classes tbody { display: block; }
    .ob-classes thead { display: none; }
    .ob-classes tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; padding: 10px 2px; border-bottom: 1px solid var(--sm-line); }
    .ob-classes tr.is-done { padding-left: 8px; padding-right: 8px; }
    .ob-classes td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
    .ob-classes td:first-child { grid-column: 1 / -1; }
    .ob-classes td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--sm-muted); margin-bottom: 4px; }
    .ob-classes tr:not(.is-on) td:not(:first-child) { display: none; }
    .ob-classes input[type=number] { min-width: 0; }
}

/* plan & billing */
.pb-current { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; }
.pb-current > div { padding: 20px 22px; }
.pb-current > div + div { border-left: 1px solid var(--sm-line); }
.pb-plan-name { font-size: 1.6rem; font-weight: 650; font-stretch: var(--sm-narrow); margin: 2px 0 4px; }
.pb-usage { display: grid; gap: 10px; }
.pb-usage .row-u { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: .875rem; }
.pb-usage .row-u .sm-meter { margin: 0; }
@media (max-width: 767.98px) { .pb-current { grid-template-columns: 1fr; } .pb-current > div + div { border-left: 0; border-top: 1px solid var(--sm-line); } }

/* account state banners in the admin shell */
.sm-banner.is-info { background: var(--sm-blue-bg); color: #1c47a3; border-bottom-color: var(--sm-blue-line); }
.sm-banner.is-danger { background: var(--sm-red-bg); color: #8f2214; border-bottom-color: var(--sm-red-line); }
.sm-status.trial, .sm-status.trialing { color: var(--sm-blue); background: var(--sm-blue-bg); border-color: var(--sm-blue-line); }
.sm-status.trial_expired { color: var(--sm-red); background: var(--sm-red-bg); border-color: var(--sm-red-line); }
.sm-status.onboarding { color: var(--sm-grey); background: var(--sm-grey-bg); border-color: var(--sm-grey-line); }