/* ──────────────────────────────────────────────────────────────────────
   Admission • design system
   Layered ON TOP of wwwroot/css/main.css (Vali Admin + Bootstrap 5).
   Anything generic enough to be used elsewhere lives at the top.
   ────────────────────────────────────────────────────────────────────── */

/* ── Web fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
    /* Brand palette: deep teal-green. Used sparingly. */
    --adm-brand-50:  #e8f3f1;
    --adm-brand-100: #c3e0db;
    --adm-brand-200: #94c7be;
    --adm-brand-300: #5fa99c;
    --adm-brand-400: #2f8e7d;
    --adm-brand-500: #0d7a6e; /* primary */
    --adm-brand-600: #086a5e;
    --adm-brand-700: #04574d;
    --adm-brand-800: #02443c;
    --adm-brand-900: #013029;

    /* Greys: warm, not cold. Easier on the eye in long sessions. */
    --adm-grey-25:  #fafaf9;
    --adm-grey-50:  #f5f5f4;
    --adm-grey-100: #ececeb;
    --adm-grey-200: #d9d9d6;
    --adm-grey-300: #bfbfbb;
    --adm-grey-400: #8a8a86;
    --adm-grey-500: #6b6b67;
    --adm-grey-600: #50504c;
    --adm-grey-700: #3a3a37;
    --adm-grey-800: #25251f; /* near-black for headings */
    --adm-grey-900: #161613;

    /* Status colors */
    --adm-success: #19895a;
    --adm-success-bg: #e6f3ed;
    --adm-warn:    #b86b00;
    --adm-warn-bg: #fef2e0;
    --adm-danger:  #b3261e;
    --adm-danger-bg: #fbe9e7;
    --adm-info:    #1f6fb8;
    --adm-info-bg: #e6f0f9;

    /* Surfaces & borders */
    --adm-surface:        #ffffff;
    --adm-surface-muted:  var(--adm-grey-50);
    --adm-border:         var(--adm-grey-100);
    --adm-border-strong:  var(--adm-grey-200);

    /* Type scale */
    --adm-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --adm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Spacing scale (kept small — Bootstrap covers the rest) */
    --adm-radius-sm: 6px;
    --adm-radius:    10px;
    --adm-radius-lg: 14px;

    /* Elevation */
    --adm-shadow-1: 0 1px 2px rgba(20, 20, 18, 0.04), 0 1px 1px rgba(20, 20, 18, 0.04);
    --adm-shadow-2: 0 4px 14px rgba(20, 20, 18, 0.06), 0 2px 4px rgba(20, 20, 18, 0.04);
    --adm-shadow-3: 0 20px 40px -8px rgba(20, 20, 18, 0.12), 0 8px 16px -4px rgba(20, 20, 18, 0.06);

    /* Shell metrics */
    --adm-sidebar-w: 248px;
    --adm-topbar-h: 60px;
}

/* ── Reset & base typography ───────────────────────────────────────── */
html, body {
    font-family: var(--adm-font-sans) !important;
    color: var(--adm-grey-800) !important;
    background: var(--adm-surface-muted) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01' on, 'cv11' on;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--adm-font-sans);
    color: var(--adm-grey-800);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

h1, .h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }

/* Display style (page hero numbers, big stats) */
.adm-display {
    font-family: var(--adm-font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}

a {
    color: var(--adm-brand-600);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover { color: var(--adm-brand-700); }

hr { border-color: var(--adm-border); opacity: 1; }

/* ── App shell ─────────────────────────────────────────────────────── */
body.app.sidebar-mini {
    background: var(--adm-surface-muted) !important;
}

/* Topbar */
.app-header {
    background: var(--adm-surface) !important;
    border-bottom: 1px solid var(--adm-border) !important;
    box-shadow: var(--adm-shadow-1);
    height: var(--adm-topbar-h) !important;
}

.app-header__logo {
    background: transparent !important;
    color: var(--adm-grey-800) !important;
    font-family: var(--adm-font-display) !important;
    font-weight: 600;
    font-size: 1.25rem !important;
    letter-spacing: -0.015em;
    border: 0 !important;
    height: var(--adm-topbar-h) !important;
    line-height: var(--adm-topbar-h) !important;
    padding: 0 1.5rem;
    width: var(--adm-sidebar-w) !important;
    position: relative;
}
.app-header__logo::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--adm-brand-500);
    margin-right: 0.55rem;
    transform: translateY(-2px);
}

.app-sidebar__toggle {
    color: var(--adm-grey-600) !important;
    height: var(--adm-topbar-h);
    line-height: var(--adm-topbar-h);
}
.app-sidebar__toggle:hover { background: var(--adm-grey-50); }

.app-nav__item {
    color: var(--adm-grey-600) !important;
    height: var(--adm-topbar-h);
    line-height: var(--adm-topbar-h);
    padding: 0 1rem !important;
}
.app-nav__item:hover { background: var(--adm-grey-50) !important; color: var(--adm-grey-800) !important; }

/* Sidebar */
.app-sidebar {
    background: var(--adm-surface) !important;
    border-right: 1px solid var(--adm-border);
    box-shadow: none !important;
    width: var(--adm-sidebar-w) !important;
    padding-top: 0.75rem;
}

.app-menu__item {
    color: var(--adm-grey-600) !important;
    font-weight: 500;
    padding: 0.625rem 1.25rem !important;
    margin: 0.125rem 0.75rem;
    border-radius: var(--adm-radius-sm);
    border-left: 0 !important;
    transition: background-color 120ms ease, color 120ms ease;
}
.app-menu__item:hover {
    background: var(--adm-grey-50) !important;
    color: var(--adm-grey-800) !important;
}
.app-menu__item.active,
.app-menu__item.is-active {
    background: var(--adm-brand-50) !important;
    color: var(--adm-brand-700) !important;
    border-left: 0 !important;
}
.app-menu__icon {
    color: inherit !important;
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}
.treeview-indicator { color: var(--adm-grey-400); }

.treeview-menu {
    background: transparent !important;
    padding: 0.25rem 0 0.5rem 0;
    display: none;
}
.treeview.is-expanded > .treeview-menu { display: block; }
.treeview.is-expanded > .app-menu__item .treeview-indicator {
    transform: rotate(90deg);
}
.treeview-indicator { transition: transform 150ms ease; }
.treeview-item {
    color: var(--adm-grey-500) !important;
    font-size: 0.875rem;
    padding: 0.4rem 1.5rem 0.4rem 2.75rem !important;
    border-radius: var(--adm-radius-sm);
    margin: 0.125rem 0.75rem;
}
.treeview-item:hover {
    background: var(--adm-grey-50) !important;
    color: var(--adm-grey-800) !important;
}
.treeview-item .bi-circle-fill {
    font-size: 0.4rem;
    color: var(--adm-grey-300);
    margin-right: 0.5rem;
    transform: translateY(-2px);
}

/* Main content area */
.app-content {
    padding: 1.5rem !important;
    margin-left: var(--adm-sidebar-w) !important;
    margin-top: var(--adm-topbar-h);
    background: var(--adm-surface-muted);
    min-height: calc(100vh - var(--adm-topbar-h));
}
@media (max-width: 991px) {
    .app-content {
        margin-left: 0 !important;
        padding: 1rem !important;
    }
    /* Vali's sidebar-mini behavior collapses the sidebar offscreen on mobile;
       reinforce that here in case the JS is delayed. */
    .app-sidebar {
        position: fixed;
        top: var(--adm-topbar-h);
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        z-index: 1040;
    }
    body.app.sidenav-toggled .app-sidebar { transform: translateX(0); }
    .app-sidebar__overlay {
        display: none;
        position: fixed;
        inset: var(--adm-topbar-h) 0 0 0;
        background: rgba(20, 20, 18, 0.4);
        z-index: 1039;
    }
    body.app.sidenav-toggled .app-sidebar__overlay { display: block; }
    .app-header__logo {
        width: auto !important;
        padding: 0 1rem;
    }
}

/* ── Page header pattern ───────────────────────────────────────────── */
.adm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.adm-page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-grey-800);
    margin: 0;
    letter-spacing: -0.015em;
}
.adm-page-header__sub {
    font-size: 0.875rem;
    color: var(--adm-grey-500);
    margin-top: 0.125rem;
}
.adm-page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card, .adm-card {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius) !important;
    box-shadow: var(--adm-shadow-1);
    overflow: hidden;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--adm-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
    color: var(--adm-grey-800);
}
.card-header.bg-primary {
    /* Override Bootstrap primary so we don't get the default blue */
    background: var(--adm-surface) !important;
    color: var(--adm-grey-800) !important;
    border-bottom: 1px solid var(--adm-border) !important;
}
.card-header.bg-primary .card-title,
.card-header.bg-primary h3,
.card-header.bg-primary h5 {
    color: var(--adm-grey-800) !important;
}
.card-body {
    background: transparent !important;
    padding: 1.25rem !important;
}
.card-footer {
    background: var(--adm-surface-muted) !important;
    border-top: 1px solid var(--adm-border) !important;
}

/* Stat card — used on dashboard */
.adm-stat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}
.adm-stat__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--adm-brand-50);
    color: var(--adm-brand-600);
}
.adm-stat__icon--success { background: var(--adm-success-bg); color: var(--adm-success); }
.adm-stat__icon--warn    { background: var(--adm-warn-bg);    color: var(--adm-warn);    }
.adm-stat__icon--danger  { background: var(--adm-danger-bg);  color: var(--adm-danger);  }
.adm-stat__icon--info    { background: var(--adm-info-bg);    color: var(--adm-info);    }

.adm-stat__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adm-grey-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.25rem;
}
.adm-stat__value {
    font-family: var(--adm-font-display);
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--adm-grey-800);
    letter-spacing: -0.02em;
}
.adm-stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.adm-stat-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--adm-shadow-2);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
    font-family: var(--adm-font-sans);
    font-weight: 600;
    border-radius: var(--adm-radius-sm) !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.btn-sm { padding: 0.375rem 0.75rem !important; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem !important; font-size: 1rem; }

.btn-primary {
    background: var(--adm-brand-500) !important;
    border-color: var(--adm-brand-500) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--adm-brand-600) !important;
    border-color: var(--adm-brand-600) !important;
    box-shadow: 0 0 0 3px var(--adm-brand-100) !important;
}
.btn-outline-primary {
    color: var(--adm-brand-600) !important;
    border-color: var(--adm-brand-300) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--adm-brand-50) !important;
    color: var(--adm-brand-700) !important;
    border-color: var(--adm-brand-300) !important;
}
.btn-secondary, .btn-light {
    background: var(--adm-surface) !important;
    border-color: var(--adm-border-strong) !important;
    color: var(--adm-grey-700) !important;
}
.btn-secondary:hover, .btn-light:hover {
    background: var(--adm-grey-50) !important;
    color: var(--adm-grey-800) !important;
}
.btn-danger {
    background: var(--adm-danger) !important;
    border-color: var(--adm-danger) !important;
    color: #fff !important;
}
.btn-success {
    background: var(--adm-success) !important;
    border-color: var(--adm-success) !important;
    color: #fff !important;
}
.btn-outline-secondary {
    color: var(--adm-grey-600) !important;
    border-color: var(--adm-border-strong) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover {
    background: var(--adm-grey-50) !important;
    color: var(--adm-grey-800) !important;
}

/* Pills already used in places — keep them rounded but not balloon-shaped. */
.rounded-pill { border-radius: 999px !important; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border-strong) !important;
    border-radius: var(--adm-radius-sm) !important;
    color: var(--adm-grey-800) !important;
    font-size: 0.9375rem;
    padding: 0.5rem 0.75rem !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--adm-brand-400) !important;
    box-shadow: 0 0 0 3px var(--adm-brand-100) !important;
    outline: 0;
}
.form-control::placeholder {
    color: var(--adm-grey-400);
}
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-grey-700);
    margin-bottom: 0.375rem;
}
.form-check-input {
    border-color: var(--adm-border-strong);
    border-radius: 4px;
}
.form-check-input:checked {
    background-color: var(--adm-brand-500);
    border-color: var(--adm-brand-500);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--adm-brand-100);
    border-color: var(--adm-brand-400);
}

/* Floating-label variant: used on the public Apply / CheckStatus screens. */
.adm-field {
    position: relative;
}
.adm-field > .form-control,
.adm-field > .form-select {
    padding: 1.25rem 0.875rem 0.5rem !important;
    height: auto;
}
.adm-field > label {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    font-size: 0.9375rem;
    color: var(--adm-grey-400);
    pointer-events: none;
    transform-origin: top left;
    transition: transform 120ms ease, color 120ms ease;
}
.adm-field > .form-control:focus + label,
.adm-field > .form-control:not(:placeholder-shown) + label,
.adm-field > .form-select:focus + label {
    transform: translate(0, -0.45rem) scale(0.78);
    color: var(--adm-brand-600);
}

/* ── Badges & status pills ─────────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.badge.bg-success    { background: var(--adm-success-bg) !important; color: var(--adm-success) !important; }
.badge.bg-warning    { background: var(--adm-warn-bg)    !important; color: var(--adm-warn)    !important; }
.badge.bg-danger     { background: var(--adm-danger-bg)  !important; color: var(--adm-danger)  !important; }
.badge.bg-info       { background: var(--adm-info-bg)    !important; color: var(--adm-info)    !important; }
.badge.bg-secondary  { background: var(--adm-grey-100)   !important; color: var(--adm-grey-700) !important; }
.badge.bg-primary    { background: var(--adm-brand-50)   !important; color: var(--adm-brand-700) !important; }

/* Tag-style status pill with a tiny dot. */
.adm-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--adm-grey-100);
    color: var(--adm-grey-700);
}
.adm-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.adm-status--pending  { background: var(--adm-warn-bg);    color: var(--adm-warn); }
.adm-status--approved { background: var(--adm-success-bg); color: var(--adm-success); }
.adm-status--rejected { background: var(--adm-danger-bg);  color: var(--adm-danger); }
.adm-status--correct  { background: var(--adm-info-bg);    color: var(--adm-info); }

/* ── Tables ────────────────────────────────────────────────────────── */
.table, .table-striped {
    margin-bottom: 0 !important;
    color: var(--adm-grey-700);
    font-size: 0.9375rem;
}
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem !important;
    border-bottom-color: var(--adm-border) !important;
}
.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-grey-500);
    font-weight: 600;
    background: var(--adm-surface-muted);
    border-bottom: 1px solid var(--adm-border) !important;
    white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
}
.table tbody tr {
    transition: background-color 80ms ease;
}
.table tbody tr:hover > * {
    background-color: var(--adm-grey-25) !important;
}

/* Responsive data table: on small screens, repaint as stacked cards.
   Tables that opt into this just need class="adm-table-cards" plus
   data-label="Column Name" attributes on each <td>. */
@media (max-width: 768px) {
    .adm-table-cards thead { display: none; }
    .adm-table-cards, .adm-table-cards tbody, .adm-table-cards tr, .adm-table-cards td {
        display: block;
        width: 100%;
    }
    .adm-table-cards tr {
        background: var(--adm-surface);
        border: 1px solid var(--adm-border);
        border-radius: var(--adm-radius);
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        box-shadow: var(--adm-shadow-1);
    }
    .adm-table-cards td {
        border: 0 !important;
        padding: 0.4rem 0 !important;
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .adm-table-cards td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--adm-grey-500);
        white-space: nowrap;
    }
    .adm-table-cards td[data-label=''] { justify-content: flex-end; }
}

/* ── Alerts ────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid transparent;
    border-radius: var(--adm-radius-sm);
    padding: 0.75rem 1rem;
}
.alert-info     { background: var(--adm-info-bg);    color: var(--adm-info);    border-color: transparent; }
.alert-success  { background: var(--adm-success-bg); color: var(--adm-success); border-color: transparent; }
.alert-warning  { background: var(--adm-warn-bg);    color: var(--adm-warn);    border-color: transparent; }
.alert-danger   { background: var(--adm-danger-bg);  color: var(--adm-danger);  border-color: transparent; }

/* ── Modals ────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--adm-radius) !important;
    border: 1px solid var(--adm-border) !important;
    box-shadow: var(--adm-shadow-3) !important;
}
.modal-header, .modal-footer {
    border-color: var(--adm-border) !important;
    padding: 1rem 1.25rem !important;
}
.modal-title { font-weight: 700; color: var(--adm-grey-800); }

/* ── Pagination ────────────────────────────────────────────────────── */
.pagination { gap: 0.25rem; }
.page-link {
    color: var(--adm-grey-600) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius-sm) !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.875rem;
    font-weight: 500;
}
.page-link:hover {
    background: var(--adm-grey-50) !important;
    color: var(--adm-grey-800) !important;
}
.page-item.active .page-link {
    background: var(--adm-brand-500) !important;
    border-color: var(--adm-brand-500) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: var(--adm-grey-300) !important;
    background: var(--adm-surface) !important;
}

/* ── Dropdown menu ─────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius) !important;
    box-shadow: var(--adm-shadow-2);
    padding: 0.375rem;
}
.dropdown-item {
    border-radius: var(--adm-radius-sm);
    padding: 0.5rem 0.75rem;
    color: var(--adm-grey-700);
    font-size: 0.9375rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--adm-grey-50);
    color: var(--adm-grey-900);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.adm-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--adm-grey-500);
}
.adm-empty__icon {
    font-size: 2.5rem;
    color: var(--adm-grey-300);
    margin-bottom: 0.75rem;
    display: block;
}
.adm-empty__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adm-grey-700);
    margin-bottom: 0.25rem;
}

/* ── Utilities ─────────────────────────────────────────────────────── */
.text-muted, .text-secondary { color: var(--adm-grey-500) !important; }
.text-primary { color: var(--adm-brand-600) !important; }
.bg-light { background: var(--adm-surface-muted) !important; }
.shadow-sm { box-shadow: var(--adm-shadow-1) !important; }
.shadow     { box-shadow: var(--adm-shadow-2) !important; }
.border, .border-0 { border-color: var(--adm-border) !important; }

/* Spinner override (matches brand) */
.spinner-border { color: var(--adm-brand-500); }

/* ── Public-form pages (Apply / CheckStatus / Closed) ──────────────── */
/* Those views set Layout = null and use their own <body>, so we provide
   a few opt-in helpers and reset away the dark body backgrounds. */
body.adm-public {
    background: linear-gradient(180deg, var(--adm-grey-25) 0%, var(--adm-surface) 60%) fixed;
    min-height: 100vh;
}
.adm-public-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}
.adm-public-hero {
    text-align: center;
    margin-bottom: 2rem;
}
.adm-public-hero img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 0.5rem;
    box-shadow: var(--adm-shadow-2);
    margin-bottom: 0.75rem;
}
.adm-public-hero__name {
    font-family: var(--adm-font-display);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--adm-grey-800);
    letter-spacing: -0.02em;
    margin: 0;
}
.adm-public-hero__session {
    color: var(--adm-grey-500);
    font-size: 1rem;
    margin-top: 0.125rem;
}
.adm-public-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--adm-shadow-1);
}
@media (max-width: 575px) {
    .adm-public-card { padding: 1.25rem; }
}

/* JS-rendered public form: group headings + field spacing.
   The Apply page builds its fields dynamically; these rules style that output
   without needing to touch the rendering JavaScript. */
#formContainer > div > h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--adm-grey-800);
    margin-bottom: 0.25rem;
}
#formContainer > div > hr {
    margin: 0.5rem 0 1.25rem;
    border-color: var(--adm-border);
}
#formContainer .mb-3 > .form-label {
    font-weight: 500;
    color: var(--adm-grey-700);
}
#formContainer .form-control,
#formContainer .form-select {
    font-size: 1rem;
    padding: 0.625rem 0.875rem !important;
}
#formContainer img[id^='preview_'] {
    margin-top: 0.5rem;
    border-radius: var(--adm-radius-sm);
    border: 1px solid var(--adm-border);
}
#formContainer .form-text a {
    color: var(--adm-brand-600);
    font-size: 0.8125rem;
}


/* ══════════════════════════════════════════════
   admission-additions.css
   Append this to the BOTTOM of admission.css
   ══════════════════════════════════════════════ */

/* ── Sidebar brand section ─────────────────── */
.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.25rem;
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--adm-brand-600);
    border-bottom: 1px solid var(--adm-border);
    background: var(--adm-surface);
}

    .app-sidebar__brand i {
        font-size: 1.35rem;
        color: var(--adm-brand-500);
    }

/* ── Mobile sidebar overlay fix ────────────── */
@media (max-width: 991.98px) {
    .app-sidebar__overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 19;
        display: none;
    }

    .sidenav-toggled .app-sidebar__overlay {
        display: block;
    }
}

/* ── Treeview animation smoothing ──────────── */
.treeview-menu {
    transition: max-height .25s ease;
}