/* ==========================================================================
   SENIOR VICTORY COLLEGE ERP
   Blue + Orange Institutional Design System
   ========================================================================== */

:root {
    /* School brand */
    --svc-primary: #293b8f;
    --svc-primary-dark: #19285f;
    --svc-primary-deep: #111d4b;
    --svc-primary-soft: #eef1fb;

    --svc-accent: #f28b27;
    --svc-accent-dark: #d86f12;
    --svc-accent-soft: #fff2e4;

    /* Application surfaces */
    --svc-bg: #f5f7fb;
    --svc-surface: #ffffff;
    --svc-surface-soft: #f9fafc;

    /* Sidebar */
    --svc-sidebar: #24377f;
    --svc-sidebar-dark: #17265f;

    /* Text */
    --svc-text: #20283a;
    --svc-heading: #18213a;
    --svc-text-muted: #6d7585;

    /* Borders */
    --svc-border: #e1e5ee;
    --svc-border-strong: #d1d7e3;

    /* Semantic */
    --svc-success: #198754;
    --svc-warning: #d99819;
    --svc-danger: #c83d4b;
    --svc-info: #247ba0;

    /* Layout */
    --svc-sidebar-width: 278px;
    --svc-sidebar-collapsed-width: 82px;
    --svc-topbar-height: 72px;

    /* Shape */
    --svc-radius-sm: 7px;
    --svc-radius: 11px;
    --svc-radius-lg: 16px;

    /* Shadows */
    --svc-shadow-sm: 0 1px 3px rgba(30, 43, 89, 0.07);
    --svc-shadow: 0 7px 22px rgba(30, 43, 89, 0.09);
    --svc-shadow-lg: 0 18px 45px rgba(30, 43, 89, 0.14);

    --svc-transition: 0.22s ease;
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    line-height: 1.5;

    color: var(--svc-text);
    background: var(--svc-bg);
}

body.sidebar-open {
    overflow: hidden;
}

a {
    color: var(--svc-primary);
    text-decoration: none;
}

a:hover {
    color: var(--svc-accent-dark);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--svc-heading);
}

p {
    margin-top: 0;
}


/* ==========================================================================
   ERP SHELL
   ========================================================================== */

.erp-app {
    min-height: 100vh;
}

.erp-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;

    width: var(--svc-sidebar-width);

    display: flex;
    flex-direction: column;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            var(--svc-sidebar) 0%,
            var(--svc-sidebar-dark) 100%
        );

    box-shadow: 5px 0 25px rgba(20, 31, 75, 0.12);

    transition:
        width var(--svc-transition),
        transform var(--svc-transition);
}

.erp-main {
    min-height: 100vh;
    margin-left: var(--svc-sidebar-width);

    transition: margin-left var(--svc-transition);
}


/* ==========================================================================
   SCHOOL BRAND
   ========================================================================== */

.sidebar-brand {
    min-height: 102px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 15px 17px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-logo-wrap {
    width: 58px;
    height: 58px;
    min-width: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;

    overflow: hidden;

    background: #ffffff;

    border: 2px solid rgba(242, 139, 39, 0.9);
    border-radius: 50%;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}

.sidebar-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;
}

.sidebar-brand-text {
    min-width: 0;
}

.sidebar-brand-title {
    display: block;

    color: #ffffff;

    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
}

.sidebar-brand-subtitle {
    display: block;

    margin-top: 4px;

    color: var(--svc-accent);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}


/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */

.sidebar-nav {
    flex: 1;

    padding: 17px 12px 26px;

    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 10px;
}

.nav-section {
    margin-bottom: 21px;
}

.nav-section-title {
    display: block;

    margin-bottom: 7px;
    padding: 0 12px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.nav-item {
    min-height: 44px;

    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    margin: 3px 0;
    padding: 10px 12px;

    color: rgba(255, 255, 255, 0.77);

    border-radius: 8px;

    transition:
        color var(--svc-transition),
        background var(--svc-transition);
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(242, 139, 39, 0.24),
            rgba(242, 139, 39, 0.10)
        );
}

.nav-item.active::before {
    content: "";

    width: 4px;
    height: 25px;

    position: absolute;
    left: 0;

    border-radius: 0 5px 5px 0;

    background: var(--svc-accent);
}

.nav-icon {
    width: 22px;
    min-width: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-accent);

    font-size: 18px;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
    color: #ffad5c;
}

.nav-label {
    white-space: nowrap;
}


/* ==========================================================================
   SIDEBAR USER
   ========================================================================== */

.sidebar-footer {
    padding: 15px 16px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(0, 0, 0, 0.07);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar-user-avatar {
    width: 39px;
    height: 39px;
    min-width: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-accent);

    border-radius: 50%;

    font-weight: 750;
}

.sidebar-user-details {
    min-width: 0;
}

.sidebar-user-name {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;
}

.sidebar-user-role {
    display: block;

    color: rgba(255, 255, 255, 0.52);

    font-size: 11px;
}


/* ==========================================================================
   TOPBAR
   ========================================================================== */

.erp-topbar {
    height: var(--svc-topbar-height);

    position: sticky;
    top: 0;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            var(--svc-primary-dark) 0%,
            var(--svc-primary) 55%,
            #354ba0 100%
        );

    border-bottom: 3px solid var(--svc-accent);

    box-shadow: 0 3px 12px rgba(17, 29, 75, 0.15);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 9px;

    font-size: 20px;
}

.sidebar-toggle:hover {
    color: #ffffff;
    background: var(--svc-accent);

    border-color: var(--svc-accent);
}

.topbar-title {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    font-weight: 750;
}

.topbar-subtitle {
    display: block;

    margin-top: 1px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 12px;
}

.topbar-action {
    width: 40px;
    height: 40px;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
}

.topbar-action:hover {
    color: #ffffff;
    background: var(--svc-accent);

    border-color: var(--svc-accent);
}

.notification-dot {
    width: 9px;
    height: 9px;

    position: absolute;
    top: 5px;
    right: 5px;

    background: var(--svc-accent);

    border: 2px solid var(--svc-primary);
    border-radius: 50%;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;

    padding-left: 9px;
}

.topbar-avatar {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary-dark);
    background: var(--svc-accent);

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    font-weight: 750;
}

.topbar-user-name {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;
}

.topbar-user-role {
    display: block;

    color: rgba(255, 255, 255, 0.62);

    font-size: 11px;
}

.erp-topbar .btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);

    border-color: rgba(255, 255, 255, 0.22);
}

.erp-topbar .btn-secondary:hover {
    color: #ffffff;
    background: var(--svc-accent);

    border-color: var(--svc-accent);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.erp-content {
    padding: 28px;
}

.page-container {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.page-title {
    margin: 0 0 5px;

    color: var(--svc-heading);

    font-size: 25px;
    font-weight: 750;

    letter-spacing: -0.02em;
}

.page-description {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 14px;
}

.page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 12px;

    color: var(--svc-text-muted);

    font-size: 12px;
}

.breadcrumbs a {
    color: var(--svc-text-muted);
}

.breadcrumbs a:hover {
    color: var(--svc-accent-dark);
}

.breadcrumb-separator {
    opacity: 0.55;
}


/* ==========================================================================
   WELCOME BANNER
   ========================================================================== */

.welcome {
    position: relative;

    margin-bottom: 24px;
    padding: 27px 29px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            var(--svc-primary-dark) 0%,
            var(--svc-primary) 62%,
            #3c50a4 100%
        );

    border: none;
    border-radius: var(--svc-radius-lg);

    box-shadow: var(--svc-shadow);
}

.welcome::before {
    content: "";

    width: 9px;

    position: absolute;
    inset: 0 auto 0 0;

    background: var(--svc-accent);
}

.welcome::after {
    content: "";

    width: 235px;
    height: 235px;

    position: absolute;
    top: -115px;
    right: -45px;

    border: 42px solid rgba(242, 139, 39, 0.15);
    border-radius: 50%;
}

.welcome h1,
.welcome h2,
.welcome h3 {
    position: relative;
    z-index: 1;

    margin: 3px 0 8px;

    color: #ffffff;
}

.welcome p {
    position: relative;
    z-index: 1;

    max-width: 750px;
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.79);
}

.eyebrow {
    position: relative;
    z-index: 1;

    color: #ffad5c;

    font-size: 11px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    margin-bottom: 20px;

    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);
}

.card-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 15px 20px;

    border-bottom: 1px solid var(--svc-border);
}

.card-title {
    margin: 0;

    color: var(--svc-heading);

    font-size: 15px;
    font-weight: 700;
}

.card-subtitle {
    display: block;

    margin-top: 3px;

    color: var(--svc-text-muted);

    font-size: 12px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 14px 20px;

    background: #fbfcfe;

    border-top: 1px solid var(--svc-border);
}


/* ==========================================================================
   METRICS
   ========================================================================== */

.metrics,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 24px;
}

.metric,
.stat-card {
    min-height: 126px;

    position: relative;

    padding: 20px;

    overflow: hidden;

    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);

    transition:
        transform var(--svc-transition),
        border-color var(--svc-transition),
        box-shadow var(--svc-transition);
}

.metric::before,
.stat-card::before {
    content: "";

    width: 4px;

    position: absolute;
    inset: 0 auto 0 0;

    background: var(--svc-accent);
}

.metric:hover,
.stat-card:hover {
    transform: translateY(-2px);

    border-color: #d2d8e8;

    box-shadow: var(--svc-shadow);
}

.metric span,
.stat-label {
    display: block;

    margin-bottom: 7px;

    color: var(--svc-text-muted);

    font-size: 12px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric strong,
.stat-value {
    display: block;

    color: var(--svc-primary-dark);

    font-size: 28px;
    font-weight: 760;
    line-height: 1.15;
}

.stat-meta {
    margin-top: 9px;

    color: var(--svc-text-muted);

    font-size: 12px;
}

.stat-icon {
    width: 45px;
    height: 45px;

    position: absolute;
    top: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 11px;

    font-size: 20px;
}


/* ==========================================================================
   MODULE CARDS
   ========================================================================== */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

    gap: 18px;
}

.module-card {
    min-height: 175px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    position: relative;

    padding: 20px;

    overflow: hidden;

    color: var(--svc-text);
    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);

    transition:
        transform var(--svc-transition),
        border-color var(--svc-transition),
        box-shadow var(--svc-transition);
}

.module-card::after {
    content: "";

    width: 45px;
    height: 4px;

    position: absolute;
    left: 20px;
    bottom: 0;

    background: var(--svc-accent);

    border-radius: 5px 5px 0 0;
}

.module-card:hover {
    transform: translateY(-3px);

    color: var(--svc-text);

    border-color: #cdd4e5;

    box-shadow: var(--svc-shadow);
}

.module-card strong {
    color: var(--svc-primary-dark);

    font-size: 16px;
}

.module-card > span:nth-child(2) {
    flex: 1;

    color: var(--svc-text-muted);

    font-size: 13px;
}

.card-action {
    color: var(--svc-primary);

    font-size: 13px;
    font-weight: 700;
}

.module-card:hover .card-action {
    color: var(--svc-accent-dark);
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.table-responsive {
    width: 100%;

    overflow-x: auto;
}

table {
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}

thead {
    background: #f5f7fc;
}

th {
    padding: 12px 14px;

    color: #586177;

    border-bottom: 1px solid var(--svc-border);

    font-size: 11px;
    font-weight: 750;
    text-align: left;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    white-space: nowrap;
}

td {
    padding: 13px 14px;

    color: var(--svc-text);

    border-bottom: 1px solid #edf0f5;

    vertical-align: middle;
}

tbody tr {
    transition: background var(--svc-transition);
}

tbody tr:hover {
    background: #fafbfe;
}

tbody tr:last-child td {
    border-bottom: 0;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

label {
    display: block;

    margin-bottom: 6px;

    color: #3c455a;

    font-size: 13px;
    font-weight: 650;
}

input,
select,
textarea {
    width: 100%;

    padding: 10px 12px;

    color: var(--svc-text);
    background: #ffffff;

    border: 1px solid #ccd3df;
    border-radius: var(--svc-radius-sm);

    outline: none;

    transition:
        border-color var(--svc-transition),
        box-shadow var(--svc-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--svc-primary);

    box-shadow: 0 0 0 3px rgba(41, 59, 143, 0.11);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

.form-group,
form p {
    margin-bottom: 16px;
}

.helptext {
    display: block;

    margin-top: 5px;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.errorlist {
    margin: 5px 0;
    padding: 0;

    color: var(--svc-danger);

    list-style: none;

    font-size: 12px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

button,
.btn {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 15px;

    color: #ffffff;
    background: var(--svc-primary);

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;

    transition:
        background var(--svc-transition),
        border-color var(--svc-transition),
        transform var(--svc-transition);
}

button:hover,
.btn:hover {
    color: #ffffff;
    background: var(--svc-primary-dark);
}

.btn-accent,
.btn-gold {
    color: #ffffff;
    background: var(--svc-accent);
}

.btn-accent:hover,
.btn-gold:hover {
    color: #ffffff;
    background: var(--svc-accent-dark);
}

.btn-secondary {
    color: var(--svc-primary);
    background: #ffffff;

    border-color: var(--svc-border);
}

.btn-secondary:hover {
    color: var(--svc-primary-dark);
    background: var(--svc-primary-soft);

    border-color: #cbd2e5;
}

.btn-danger {
    background: var(--svc-danger);
}

.btn-danger:hover {
    background: #aa2d3a;
}

.btn-sm {
    min-height: 32px;

    padding: 5px 10px;

    font-size: 12px;
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.badge-primary {
    color: var(--svc-primary-dark);
    background: var(--svc-primary-soft);
}

.badge-accent {
    color: #9b4d08;
    background: var(--svc-accent-soft);
}

.badge-success {
    color: #12683f;
    background: #e4f5ec;
}

.badge-warning {
    color: #855d0d;
    background: #fff3d7;
}

.badge-danger {
    color: #9d2935;
    background: #fde8ea;
}

.badge-info {
    color: #1b617d;
    background: #e5f3f8;
}

.badge-neutral {
    color: #56606e;
    background: #edf0f4;
}


/* ==========================================================================
   MESSAGES
   ========================================================================== */

.messages {
    margin: 0 0 20px;
    padding: 0;

    list-style: none;
}

.alert,
.messages li {
    margin-bottom: 10px;
    padding: 12px 15px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 13px;
}

.alert-success,
.messages .success {
    color: #17683f;
    background: #e9f7ef;
    border-color: #c9ead7;
}

.alert-warning,
.messages .warning {
    color: #805b14;
    background: #fff7e5;
    border-color: #f1dfb5;
}

.alert-danger,
.messages .error {
    color: #922d38;
    background: #fdecef;
    border-color: #f3ccd1;
}

.alert-info,
.messages .info {
    color: #29427f;
    background: var(--svc-primary-soft);
    border-color: #d5dcef;
}


/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.empty-state {
    padding: 45px 20px;

    text-align: center;
}

.empty-state-icon {
    margin-bottom: 12px;

    color: #a8afbd;

    font-size: 38px;
}

.empty-state h3 {
    margin-bottom: 6px;
}

.empty-state p {
    max-width: 500px;

    margin: 0 auto 16px;

    color: var(--svc-text-muted);
}


/* ==========================================================================
   MOBILE OVERLAY
   ========================================================================== */

.sidebar-overlay {
    display: none;

    position: fixed;
    inset: 0;
    z-index: 950;

    background: rgba(14, 23, 54, 0.55);
}


/* ==========================================================================
   COLLAPSED SIDEBAR
   ========================================================================== */

body.sidebar-collapsed .erp-sidebar {
    width: var(--svc-sidebar-collapsed-width);
}

body.sidebar-collapsed .erp-main {
    margin-left: var(--svc-sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar-brand {
    justify-content: center;

    padding-left: 10px;
    padding-right: 10px;
}

body.sidebar-collapsed .sidebar-logo-wrap {
    width: 49px;
    height: 49px;
    min-width: 49px;
}

body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-user-details {
    display: none;
}

body.sidebar-collapsed .nav-item {
    justify-content: center;

    padding-left: 8px;
    padding-right: 8px;
}

body.sidebar-collapsed .sidebar-user {
    justify-content: center;
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(242, 139, 39, 0.52);
    outline-offset: 2px;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .metrics,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {
    .erp-sidebar {
        width: var(--svc-sidebar-width);

        transform: translateX(-100%);
    }

    .erp-main,
    body.sidebar-collapsed .erp-main {
        margin-left: 0;
    }

    body.sidebar-open .erp-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    body.sidebar-collapsed .erp-sidebar {
        width: var(--svc-sidebar-width);
    }

    body.sidebar-collapsed .sidebar-brand {
        justify-content: flex-start;

        padding-left: 17px;
        padding-right: 17px;
    }

    body.sidebar-collapsed .sidebar-logo-wrap {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .nav-section-title,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .sidebar-user-details {
        display: block;
    }

    body.sidebar-collapsed .nav-item {
        justify-content: flex-start;

        padding-left: 12px;
        padding-right: 12px;
    }

    body.sidebar-collapsed .sidebar-user {
        justify-content: flex-start;
    }

    .erp-topbar {
        padding: 0 18px;
    }

    .erp-content {
        padding: 22px 18px;
    }
}


@media (max-width: 650px) {
    .erp-topbar {
        height: 64px;

        padding: 0 13px;
    }

    .topbar-subtitle,
    .topbar-user-details {
        display: none;
    }

    .topbar-title {
        font-size: 15px;
    }

    .topbar-right {
        gap: 7px;
    }

    .erp-content {
        padding: 17px 12px 30px;
    }

    .page-header {
        flex-direction: column;
    }

    .page-title {
        font-size: 22px;
    }

    .metrics,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .welcome {
        padding: 22px 20px;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }

    table {
        min-width: 650px;
    }

    .table-responsive,
    .card {
        overflow-x: auto;
    }
}

/* ==========================================================================
   ERP DASHBOARD
   ========================================================================== */

.dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
}

.academic-session {
    min-width: 225px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 10px 14px;

    color: var(--svc-text-muted);

    font-size: 12px;
}

.academic-session-label {
    margin-bottom: 3px;

    color: var(--svc-text-muted);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.academic-session strong {
    color: var(--svc-primary-dark);

    font-size: 14px;
}


/* Welcome */

.dashboard-welcome {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding-top: 23px;
    padding-bottom: 23px;
}

.welcome-content {
    position: relative;
    z-index: 2;
}

.dashboard-welcome h1 {
    margin-bottom: 7px;

    font-size: 28px;
}

.welcome-session {
    min-width: 190px;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    padding: 15px 18px;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.welcome-session span {
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.63);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.welcome-session strong {
    color: #ffffff;

    font-size: 17px;
}

.welcome-session small {
    margin-top: 3px;

    color: #ffb266;

    font-size: 12px;
}


/* Sections */

.dashboard-section {
    margin-top: 30px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 15px;
}

.section-heading h2 {
    margin: 2px 0 0;

    font-size: 18px;
    font-weight: 750;
}

.section-kicker {
    color: var(--svc-accent-dark);

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.section-note {
    color: var(--svc-text-muted);

    font-size: 12px;
}


/* KPI cards */

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.dashboard-kpi {
    min-height: 125px;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);

    transition:
        transform var(--svc-transition),
        box-shadow var(--svc-transition),
        border-color var(--svc-transition);
}

.dashboard-kpi:hover {
    transform: translateY(-2px);

    border-color: #ccd3e5;

    box-shadow: var(--svc-shadow);
}

.kpi-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.kpi-icon-orange {
    background: var(--svc-accent);
}

.kpi-content {
    min-width: 0;
}

.kpi-label {
    display: block;

    margin-bottom: 4px;

    color: var(--svc-text-muted);

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kpi-value {
    display: block;

    color: var(--svc-primary-dark);

    font-size: 27px;
    font-weight: 780;
    line-height: 1.15;
}

.kpi-value-text {
    padding-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 17px;

    white-space: nowrap;
}

.kpi-meta {
    display: block;

    margin-top: 7px;

    color: var(--svc-text-muted);

    font-size: 11px;
}


/* Workspace module cards */

.erp-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.erp-module-card {
    min-height: 190px;

    display: flex;
    flex-direction: column;

    position: relative;

    overflow: hidden;

    color: var(--svc-text);
    background: #ffffff;

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);

    transition:
        transform var(--svc-transition),
        box-shadow var(--svc-transition),
        border-color var(--svc-transition);
}

.erp-module-card::before {
    content: "";

    height: 3px;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    background:
        linear-gradient(
            90deg,
            var(--svc-primary),
            var(--svc-accent)
        );
}

.erp-module-card:hover {
    transform: translateY(-3px);

    color: var(--svc-text);

    border-color: #cdd4e5;

    box-shadow: var(--svc-shadow);
}

.module-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 18px 5px;
}

.module-letter {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 9px;

    font-size: 14px;
    font-weight: 800;
}

.module-arrow {
    color: #a0a7b5;

    font-size: 18px;

    transition:
        color var(--svc-transition),
        transform var(--svc-transition);
}

.erp-module-card:hover .module-arrow {
    color: var(--svc-accent);

    transform: translateX(3px);
}

.module-card-content {
    flex: 1;

    padding: 10px 18px 15px;
}

.module-card-content h3 {
    margin: 0 0 7px;

    color: var(--svc-primary-dark);

    font-size: 15px;
}

.module-card-content p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 12px;
    line-height: 1.55;
}

.module-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 18px;

    color: var(--svc-primary);

    background: #fafbfe;

    border-top: 1px solid #edf0f5;

    font-size: 11px;
    font-weight: 700;
}

.erp-module-card:hover .module-card-footer {
    color: var(--svc-accent-dark);
}


/* Bottom information cards */

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 30px;
}

.dashboard-info-card {
    margin-bottom: 0;
}

.info-row {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 10px 0;

    border-bottom: 1px solid #edf0f5;
}

.info-row:first-child {
    padding-top: 0;
}

.info-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.info-row span {
    color: var(--svc-text-muted);

    font-size: 12px;
}

.info-row strong {
    color: var(--svc-heading);

    font-size: 12px;
    text-align: right;
}

.status-active {
    color: var(--svc-success) !important;
}


/* Dashboard responsive */

@media (max-width: 1200px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 750px) {
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .academic-session {
        min-width: 0;

        align-items: flex-start;

        padding: 0;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .welcome-session {
        width: 100%;
        min-width: 0;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .dashboard-kpis,
    .erp-module-grid,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADMISSIONS MANAGEMENT
   ========================================================================== */

.module-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
}

.module-page-header .page-title {
    margin-top: 4px;
}


/* Admissions summary */

.admissions-summary {
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 20px;
    padding: 18px 21px;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.admissions-summary::after {
    content: "";

    width: 170px;
    height: 170px;

    position: absolute;
    right: -60px;
    top: -75px;

    border: 28px solid rgba(242, 139, 39, 0.13);
    border-radius: 50%;
}

.admissions-summary-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 2;

    color: #ffffff;
    background: var(--svc-accent);

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;
}

.admissions-summary-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
}

.admissions-summary-label {
    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admissions-summary-content strong {
    margin: 1px 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.15;
}

.admissions-summary-meta {
    color: rgba(255, 255, 255, 0.67);

    font-size: 11px;
}

.admissions-summary-session {
    position: relative;
    z-index: 2;

    margin-left: auto;
    margin-right: 12px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.admissions-summary-session span {
    color: rgba(255, 255, 255, 0.57);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.admissions-summary-session strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 13px;
}


/* Register */

.admissions-register {
    overflow: hidden;
}

.admissions-register-header {
    padding-top: 17px;
    padding-bottom: 17px;
}

.record-count {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    color: var(--svc-primary-dark);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}


/* Filter bar */

.admissions-filter-panel {
    padding: 16px 20px;

    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);
}

.admissions-filter-form {
    display: grid;
    grid-template-columns:
        minmax(250px, 2fr)
        minmax(170px, 1fr)
        minmax(170px, 1fr)
        auto;

    align-items: end;
    gap: 12px;
}

.filter-field label {
    margin-bottom: 5px;

    color: #596277;

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-field input,
.filter-field select {
    min-height: 40px;

    padding-top: 8px;
    padding-bottom: 8px;

    background: #ffffff;
}

.filter-search input {
    padding-left: 13px;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.filter-actions .btn {
    min-height: 40px;
}


/* Admissions table */

.erp-data-table {
    min-width: 900px;
}

.erp-data-table th:first-child,
.erp-data-table td:first-child {
    padding-left: 20px;
}

.erp-data-table th:last-child,
.erp-data-table td:last-child {
    padding-right: 20px;
}

.reference-link {
    color: var(--svc-primary);

    font-weight: 750;
}

.reference-link:hover {
    color: var(--svc-accent-dark);
}

.applicant-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.applicant-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.applicant-cell strong {
    display: block;

    color: var(--svc-heading);

    font-size: 12px;
}

.date-primary {
    display: block;

    color: var(--svc-text);

    font-size: 12px;
}

.date-secondary {
    display: block;

    margin-top: 2px;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.text-muted {
    color: var(--svc-text-muted);
}


/* Status badges */

.status-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 750;

    white-space: nowrap;
}

.status-draft {
    color: #596273;
    background: #edf0f4;
}

.status-submitted {
    color: #23508c;
    background: #e8f0fb;
}

.status-under_review {
    color: #77540d;
    background: #fff3d5;
}

.status-recommended {
    color: #694390;
    background: #f0e8f8;
}

.status-waitlisted {
    color: #98540b;
    background: #fff0df;
}

.status-offered {
    color: #12683f;
    background: #e4f5ec;
}

.status-accepted {
    color: #12683f;
    background: #daf2e5;
}

.status-declined {
    color: #9c303a;
    background: #fde8ea;
}

.status-enrolled {
    color: #ffffff;
    background: var(--svc-primary);
}


/* Table actions */

.table-action-heading,
.table-action-cell {
    text-align: right;
}

.table-action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--svc-primary);

    font-size: 11px;
    font-weight: 750;
}

.table-action-link:hover {
    color: var(--svc-accent-dark);
}


/* Empty state */

.admissions-empty-state {
    min-height: 285px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    text-align: center;
}

.empty-state-mark {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border: 1px solid #dbe0ef;
    border-radius: 14px;

    font-size: 13px;
    font-weight: 800;
}

.admissions-empty-state h3 {
    margin: 0 0 6px;

    font-size: 16px;
}

.admissions-empty-state p {
    max-width: 440px;

    margin: 0 0 17px;

    color: var(--svc-text-muted);

    font-size: 12px;
}


/* Pagination */

.erp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 14px 20px;

    background: #fafbfe;

    border-top: 1px solid var(--svc-border);
}

.pagination-summary {
    color: var(--svc-text-muted);

    font-size: 11px;
}

.pagination-summary strong {
    color: var(--svc-heading);
}

.pagination-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pagination-current {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 7px;

    font-size: 11px;
    font-weight: 750;
}


/* Responsive admissions */

@media (max-width: 1050px) {
    .admissions-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {
    .module-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        width: 100%;
    }

    .admissions-summary-session {
        display: none;
    }

    .admissions-filter-form {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        width: 100%;
    }

    .filter-actions .btn {
        flex: 1;
    }

    .erp-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   ADMISSION APPLICATION DETAIL
   ========================================================================== */

.admission-detail-header {
    margin-bottom: 20px;
}


/* Alerts */

.erp-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-bottom: 18px;
    padding: 13px 16px;

    border: 1px solid #dfe4ed;
    border-radius: 9px;

    font-size: 12px;
}

.erp-alert strong {
    white-space: nowrap;
}

.erp-alert-danger {
    color: #8d2932;
    background: #fff1f2;
    border-color: #f3c8cd;
}

.erp-alert-warning {
    color: #75510c;
    background: #fff8e8;
    border-color: #efdba7;
}

.erp-alert-info {
    color: #244e88;
    background: #eef5ff;
    border-color: #ccdcf2;
}


/* Applicant profile */

.applicant-profile-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 18px;
    padding: 22px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.applicant-profile-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.applicant-profile-avatar {
    width: 62px;
    height: 62px;
    min-width: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-accent);

    border: 3px solid rgba(255,255,255,.2);
    border-radius: 50%;

    font-size: 18px;
    font-weight: 800;
}

.profile-eyebrow {
    color: rgba(255,255,255,.62);

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .09em;
}

.applicant-profile-main h2 {
    margin: 2px 0;

    color: #ffffff;

    font-size: 22px;
}

.profile-reference {
    color: rgba(255,255,255,.72);

    font-size: 11px;
}

.applicant-profile-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 12px;
}

.applicant-profile-meta > div {
    padding: 10px 13px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
}

.applicant-profile-meta > div > span {
    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.58);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.applicant-profile-meta > div > strong {
    color: #ffffff;

    font-size: 11px;
}


/* Information cards */

.admission-detail-grid,
.admission-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 18px;
}

.detail-panel,
.admission-section-card {
    margin-bottom: 18px;
}

.admission-detail-grid .detail-panel,
.admission-two-column .admission-section-card {
    margin-bottom: 0;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px 25px;
}

.detail-info-item span {
    display: block;

    margin-bottom: 4px;

    color: var(--svc-text-muted);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.detail-info-item strong {
    color: var(--svc-heading);

    font-size: 12px;
}

.detail-info-full {
    grid-column: 1 / -1;
}


/* Workflow */

.admission-workflow-card {
    margin-bottom: 18px;
}

.admission-workflow {
    display: flex;
    align-items: center;

    padding: 22px 20px;
}

.workflow-item {
    min-width: 90px;

    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-number {
    width: 31px;
    height: 31px;
    min-width: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #747d8e;
    background: #edf0f5;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.workflow-item strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.workflow-item small {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 9px;
}

.workflow-complete .workflow-number {
    color: #ffffff;
    background: var(--svc-primary);
}

.workflow-complete small {
    color: #18764a;
}

.workflow-connector {
    height: 2px;
    min-width: 20px;
    flex: 1;

    margin: 0 8px;

    background: #e0e4ec;
}


/* Documents */

.document-checklist {
    border: 1px solid var(--svc-border);
    border-radius: 8px;

    overflow: hidden;
}

.document-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 13px;

    border-bottom: 1px solid #edf0f5;
}

.document-row:last-child {
    border-bottom: 0;
}

.document-status-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #747d8d;
    background: #eef1f5;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;
}

.document-status-icon.document-ok {
    color: #ffffff;
    background: #198754;
}

.document-main strong {
    display: block;

    color: var(--svc-heading);

    font-size: 12px;
}

.document-main span,
.document-main small {
    display: block;

    margin-top: 2px;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.document-state {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-review-form {
    grid-column: 2 / -1;

    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 7px;

    padding-top: 8px;
}

.document-review-form input {
    min-height: 35px;
}


/* Forms */

.erp-form p {
    margin: 0 0 13px;
}

.erp-form label {
    display: block;

    margin-bottom: 5px;

    color: #525d70;

    font-size: 10px;
    font-weight: 700;
}

.erp-form input:not([type="checkbox"]),
.erp-form select,
.erp-form textarea {
    width: 100%;

    min-height: 40px;

    padding: 8px 10px;

    background: #ffffff;

    border: 1px solid #d5dbe6;
    border-radius: 7px;
}

.erp-form textarea {
    min-height: 95px;

    resize: vertical;
}

.erp-form input:focus,
.erp-form select:focus,
.erp-form textarea:focus {
    border-color: var(--svc-primary);

    outline: 3px solid rgba(47,65,153,.09);
}

.form-section-heading {
    margin-bottom: 13px;
}

.form-section-heading h4 {
    margin: 0 0 3px;

    color: var(--svc-heading);

    font-size: 13px;
}

.form-section-heading p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.subsection-divider {
    height: 1px;

    margin: 20px 0;

    background: #edf0f5;
}


/* Inline notices */

.inline-notice {
    margin: 12px 0;
    padding: 11px 13px;

    color: #536071;
    background: #f5f7fa;

    border-left: 3px solid var(--svc-primary);
    border-radius: 5px;

    font-size: 11px;
}

.inline-notice-danger {
    color: #8b3037;
    background: #fff1f2;

    border-left-color: #b63d49;
}

.inline-notice-warning {
    color: #75520e;
    background: #fff8e7;

    border-left-color: var(--svc-accent);
}


/* Assessment / interview */

.requirement-pill {
    padding: 4px 8px;

    color: #8a560d;
    background: #fff1dc;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 750;
}

.requirement-pill.optional {
    color: #596273;
    background: #edf0f4;
}

.evaluation-record {
    margin-bottom: 10px;
    padding: 12px;

    background: #fafbfc;

    border: 1px solid #e6e9ef;
    border-radius: 7px;
}

.evaluation-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.evaluation-record-header strong {
    color: var(--svc-heading);

    font-size: 12px;
}

.evaluation-record-header span {
    color: var(--svc-primary);

    font-size: 11px;
    font-weight: 750;
}

.evaluation-record p {
    margin: 5px 0 0;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.mini-empty-state {
    padding: 22px;

    color: var(--svc-text-muted);
    background: #fafbfc;

    border: 1px dashed #d8dde6;
    border-radius: 7px;

    font-size: 11px;
    text-align: center;
}


/* Finance */

.finance-clearance-record {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.finance-clearance-record > div {
    padding: 12px;

    background: #fafbfc;

    border: 1px solid #e7eaf0;
    border-radius: 7px;
}

.finance-clearance-record span {
    display: block;

    margin-bottom: 3px;

    color: var(--svc-text-muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.finance-clearance-record strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.finance-clearance-basis {
    grid-column: 1 / -1;
}


/* Details/history */

.erp-details {
    margin-top: 16px;

    border-top: 1px solid #edf0f5;
}

.erp-details summary {
    padding: 13px 0;

    color: var(--svc-primary);

    cursor: pointer;

    font-size: 11px;
    font-weight: 700;
}

.details-content {
    padding-bottom: 10px;
}

.history-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.history-list li {
    padding: 9px 0;

    border-bottom: 1px solid #edf0f5;
}

.history-list li:last-child {
    border-bottom: 0;
}

.history-list strong,
.history-list span {
    display: block;

    font-size: 10px;
}

.history-list span {
    margin-top: 2px;

    color: var(--svc-text-muted);
}

.history-active {
    color: #18764a !important;
}

.history-withdrawn {
    color: #a0353f !important;
}


/* Decisions */

.decision-card {
    border-top: 3px solid var(--svc-accent);
}

.decision-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;

    gap: 14px;
}

.consent-box {
    margin: 15px 0;
    padding: 15px;

    background: #fafbfc;

    border: 1px solid #e3e7ee;
    border-radius: 8px;
}

.erp-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 10px !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}

.erp-checkbox input {
    width: auto;

    margin-top: 2px;
}

.form-help {
    margin: 10px 0 0;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.decision-history {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.decision-history-item {
    padding: 13px;

    background: #fafbfc;

    border: 1px solid #e6e9ef;
    border-radius: 7px;
}

.decision-history-item > span {
    display: block;

    margin-bottom: 4px;

    color: var(--svc-text-muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.decision-history-item strong {
    display: block;

    color: var(--svc-heading);

    font-size: 11px;
}

.decision-history-item small {
    display: block;

    margin-top: 3px;

    color: var(--svc-text-muted);

    font-size: 9px;
}

.decision-history-item p {
    margin: 7px 0 0;

    color: var(--svc-text-muted);

    font-size: 10px;
}


/* Final enrolment */

.enrolment-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 18px;
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--svc-border);
    border-left: 4px solid var(--svc-accent);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);
}

.enrolment-action-panel h3 {
    margin: 3px 0;

    color: var(--svc-heading);

    font-size: 16px;
}

.enrolment-action-panel p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.enrol-button {
    min-width: 185px;
}

.enrolment-blocked {
    padding: 8px 12px;

    color: #8c5c12;
    background: #fff4df;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 700;
}


/* Danger button */

.btn-danger {
    color: #ffffff;
    background: #a93640;

    border-color: #a93640;
}

.btn-danger:hover {
    color: #ffffff;
    background: #8d2932;

    border-color: #8d2932;
}


/* Responsive */

@media (max-width: 1100px) {
    .applicant-profile-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .applicant-profile-meta {
        width: 100%;
    }

    .admission-workflow {
        overflow-x: auto;
    }

    .workflow-connector {
        min-width: 30px;
    }
}


@media (max-width: 800px) {
    .admission-detail-grid,
    .admission-two-column,
    .decision-history {
        grid-template-columns: 1fr;
    }

    .detail-info-grid,
    .finance-clearance-record,
    .decision-form-grid {
        grid-template-columns: 1fr;
    }

    .finance-clearance-basis,
    .detail-info-full {
        grid-column: auto;
    }

    .applicant-profile-meta {
        grid-template-columns: 1fr;
    }

    .document-row {
        grid-template-columns: auto 1fr;
    }

    .document-state {
        grid-column: 2;
    }

    .document-review-form {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .enrolment-action-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .enrol-button {
        width: 100%;
    }
}

/* ==========================================================================
   NEW ADMISSION APPLICATION
   ========================================================================== */

.application-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, .75fr);
    gap: 18px;

    align-items: start;
}

.application-form-card {
    overflow: hidden;
}

.application-form-step {
    padding: 5px 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .05em;
}


/* Form grid */

.admission-application-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.application-field {
    min-width: 0;
}

.application-field-wide {
    grid-column: 1 / -1;
}

.application-field label {
    display: block;

    margin-bottom: 5px;

    color: #515c70;

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.required-mark {
    margin-left: 2px;

    color: var(--svc-accent);
}

.application-field input:not([type="checkbox"]):not([type="radio"]),
.application-field select,
.application-field textarea {
    width: 100%;
    min-height: 42px;

    padding: 9px 11px;

    color: var(--svc-text);
    background: #ffffff;

    border: 1px solid #d4dae5;
    border-radius: 7px;

    font: inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.application-field textarea {
    min-height: 95px;
    resize: vertical;
}

.application-field input:focus,
.application-field select:focus,
.application-field textarea:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47, 65, 153, .09);
}

.application-field select {
    cursor: pointer;
}

.field-help {
    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.45;
}

.field-errors {
    margin-top: 5px;
}

.field-errors span {
    display: block;

    color: #a3303a;

    font-size: 10px;
    font-weight: 650;
}


/* Submit area */

.application-submit-area {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 5px;
    padding: 16px;

    background: #fafbfc;

    border: 1px solid #e4e8ef;
    border-radius: 8px;
}

.application-submit-area strong {
    display: block;

    color: var(--svc-heading);

    font-size: 12px;
}

.application-submit-area p {
    margin: 3px 0 0;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.application-submit-button {
    min-width: 160px;
}


/* Right column */

.application-help-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.application-help-card {
    position: relative;
    overflow: hidden;

    padding: 20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.application-help-card::after {
    content: "";

    width: 115px;
    height: 115px;

    position: absolute;
    right: -50px;
    bottom: -55px;

    border: 20px solid rgba(242, 139, 39, .14);
    border-radius: 50%;
}

.application-help-icon {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    color: #ffffff;
    background: var(--svc-accent);

    border-radius: 9px;

    font-size: 10px;
    font-weight: 800;
}

.application-help-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 6px;

    color: #ffffff;

    font-size: 15px;
}

.application-help-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    line-height: 1.6;
}


/* Application guide */

.application-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 11px 0;

    border-bottom: 1px solid #edf0f5;
}

.application-guide-step:first-child {
    padding-top: 0;
}

.application-guide-step:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.application-guide-step > span {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.application-guide-step strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.application-guide-step p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.45;
}


/* Security / accuracy note */

.application-security-note {
    padding: 14px;

    color: #76510d;
    background: #fff8e8;

    border: 1px solid #f0ddb0;
    border-left: 3px solid var(--svc-accent);
    border-radius: 7px;
}

.application-security-note strong {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
}

.application-security-note p {
    margin: 0;

    font-size: 9px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 950px) {
    .application-form-layout {
        grid-template-columns: 1fr;
    }

    .application-help-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .application-security-note {
        grid-column: 1 / -1;
    }
}


@media (max-width: 650px) {
    .admission-application-form {
        grid-template-columns: 1fr;
    }

    .application-field-wide {
        grid-column: auto;
    }

    .application-submit-area {
        align-items: stretch;
        flex-direction: column;
    }

    .application-submit-button {
        width: 100%;
    }

    .application-help-column {
        display: flex;
    }
}

/* ==========================================================================
   ADMISSION APPLICATION SUCCESS
   ========================================================================== */

.admission-success-page {
    max-width: 920px;

    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(230px, .65fr);
    gap: 18px;

    margin: 25px auto 0;

    align-items: start;
}

.admission-success-card {
    padding: 34px;

    background: #ffffff;

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);

    text-align: center;
}

.success-check {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 16px;

    color: #ffffff;
    background: #198754;

    border-radius: 50%;

    box-shadow: 0 8px 22px rgba(25, 135, 84, .18);

    font-size: 25px;
    font-weight: 800;
}

.admission-success-card h1 {
    margin: 5px 0 8px;

    color: var(--svc-primary-dark);

    font-size: 24px;
}

.success-intro {
    max-width: 540px;

    margin: 0 auto 22px;

    color: var(--svc-text-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* Reference */

.application-reference-box {
    position: relative;
    overflow: hidden;

    margin: 20px 0 25px;
    padding: 20px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: 10px;
}

.application-reference-box::after {
    content: "";

    width: 120px;
    height: 120px;

    position: absolute;
    right: -45px;
    top: -55px;

    border: 20px solid rgba(242, 139, 39, .14);
    border-radius: 50%;
}

.application-reference-box > span {
    display: block;

    position: relative;
    z-index: 2;

    color: rgba(255,255,255,.63);

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.application-reference-box > strong {
    display: block;

    position: relative;
    z-index: 2;

    margin: 5px 0 7px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: .04em;
}

.application-reference-box p {
    max-width: 470px;

    position: relative;
    z-index: 2;

    margin: 0 auto;

    color: rgba(255,255,255,.7);

    font-size: 10px;
    line-height: 1.5;
}


/* Next steps */

.success-next-section {
    text-align: left;
}

.success-next-section h3 {
    margin: 0 0 11px;

    color: var(--svc-heading);

    font-size: 13px;
}

.success-steps {
    border: 1px solid #e5e8ee;
    border-radius: 8px;

    overflow: hidden;
}

.success-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 12px 14px;

    background: #fafbfc;

    border-bottom: 1px solid #e8ebf0;
}

.success-step:last-child {
    border-bottom: 0;
}

.success-step > span {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.success-step strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.success-step p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.45;
}


/* Actions */

.success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 22px;
}


/* Side panel */

.success-help-card {
    position: relative;
    overflow: hidden;

    padding: 22px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.success-help-mark {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    color: #ffffff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;
}

.success-help-card h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 15px;
}

.success-help-card p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 10px;
    line-height: 1.6;
}

.success-help-card > strong {
    display: block;

    margin-bottom: 5px;

    color: #ffb86f;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.success-help-divider {
    height: 1px;

    margin: 16px 0;

    background: rgba(255,255,255,.13);
}


/* Responsive */

@media (max-width: 800px) {
    .admission-success-page {
        grid-template-columns: 1fr;

        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    .admission-success-card {
        padding: 24px 18px;
    }

    .success-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .success-actions .btn {
        width: 100%;
    }

    .application-reference-box > strong {
        font-size: 20px;
    }
}

/* ==========================================================================
   ASSESSMENT MODULE
   ========================================================================== */

.assessment-summary-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    margin-bottom: 18px;
    padding: 19px 21px;

    color: #ffffff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.assessment-summary-icon {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;
}

.assessment-summary-copy > span {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.6);

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.assessment-summary-copy h3 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 15px;
}

.assessment-summary-copy p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 10px;
}

.assessment-summary-stat {
    min-width: 130px;

    padding: 10px 15px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
}

.assessment-summary-stat span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.assessment-summary-stat strong {
    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 20px;
}


/* Register */

.assessment-register-card {
    margin-bottom: 17px;

    overflow: hidden;
}

.assessment-table-wrap {
    overflow-x: auto;
}

.assessment-table {
    margin: 0;
}

.assessment-table tbody tr {
    transition: background .15s ease;
}

.assessment-table tbody tr:hover {
    background: #fafbfe;
}

.assessment-class-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.assessment-class-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;
}

.assessment-class-cell strong {
    display: block;

    color: var(--svc-heading);

    font-size: 11px;
}

.assessment-class-cell span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.assessment-term {
    color: #596274;

    font-size: 10px;
}

.assessment-subject {
    color: var(--svc-heading);

    font-size: 11px;
}

.assessment-component-link {
    color: var(--svc-primary);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.assessment-component-link:hover {
    color: var(--svc-accent-dark);

    text-decoration: underline;
}


/* Assessment status */

.assessment-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    color: #5d6676;
    background: #edf0f4;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .03em;
}

/*
   These support common assessment workflow values.
   Unknown statuses simply retain the neutral style above.
*/

.assessment-status-draft {
    color: #596273;
    background: #edf0f4;
}

.assessment-status-open,
.assessment-status-in_progress {
    color: #27588f;
    background: #e9f2fd;
}

.assessment-status-submitted {
    color: #89560e;
    background: #fff1d9;
}

.assessment-status-approved,
.assessment-status-published {
    color: #176a43;
    background: #e4f5ec;
}

.assessment-status-returned,
.assessment-status-rejected {
    color: #963641;
    background: #fde9eb;
}


/* Empty state */

.assessment-empty-state {
    padding: 48px 25px;

    text-align: center;
}

.assessment-empty-icon {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 11px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;
}

.assessment-empty-state h3 {
    margin: 0 0 5px;

    color: var(--svc-heading);

    font-size: 14px;
}

.assessment-empty-state p {
    max-width: 430px;

    margin: 0 auto;

    color: var(--svc-text-muted);

    font-size: 10px;
    line-height: 1.55;
}


/* Workflow explanation */

.assessment-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.assessment-info-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 13px;

    background: #ffffff;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.assessment-info-number {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.assessment-info-card strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.assessment-info-card p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 850px) {
    .assessment-summary-banner {
        grid-template-columns: auto 1fr;
    }

    .assessment-summary-stat {
        grid-column: 1 / -1;

        width: 100%;
    }

    .assessment-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .assessment-summary-banner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .assessment-summary-icon {
        margin: auto;
    }
}

/* ==========================================================================
   ASSESSMENT SCORE SHEET
   ========================================================================== */

.assessment-sheet-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 15px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.assessment-sheet-banner-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.assessment-sheet-icon {
    width: 49px;
    height: 49px;
    min-width: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.assessment-sheet-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.assessment-sheet-banner-main h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.assessment-sheet-banner-main p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 10px;
}

.assessment-sheet-meta {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.assessment-sheet-meta > div {
    min-width: 80px;

    padding: 8px 10px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 7px;
}

.assessment-sheet-meta > div > span {
    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,.55);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.assessment-sheet-meta > div > strong {
    color: #fff;

    font-size: 10px;
}


/* Mode notice */

.assessment-mode-notice {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 15px;
    padding: 11px 14px;

    color: #4f596a;
    background: #f7f8fa;

    border: 1px solid #e2e6ed;
    border-left: 3px solid #8993a5;
    border-radius: 7px;
}

.assessment-mode-edit {
    color: #245384;
    background: #f2f7fd;

    border-left-color: var(--svc-primary);
}

.assessment-mode-review {
    color: #7b550f;
    background: #fff9ec;

    border-left-color: var(--svc-accent);
}

.assessment-mode-symbol {
    width: 31px;
    height: 31px;
    min-width: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 7px;

    font-size: 13px;
    font-weight: 800;
}

.assessment-mode-review .assessment-mode-symbol {
    background: var(--svc-accent);
}

.assessment-mode-notice strong {
    display: block;

    font-size: 10px;
}

.assessment-mode-notice p {
    margin: 2px 0 0;

    font-size: 9px;
}


/* Score sheet */

.score-sheet-card {
    margin-bottom: 16px;

    overflow: hidden;
}

.score-sheet-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-sheet-header-meta > span {
    padding: 5px 8px;

    color: var(--svc-text-muted);
    background: #f5f7fa;

    border-radius: 5px;

    font-size: 8px;
}

.score-sheet-header-meta strong {
    margin-left: 3px;

    color: var(--svc-primary);

    font-size: 10px;
}

.score-table-wrap {
    overflow-x: auto;
}

.score-entry-table {
    margin: 0;
}

.score-number-column {
    width: 45px;
}

.score-input-column {
    width: 210px;
}

.score-weight-column {
    width: 150px;
}

.score-row-number {
    color: #8a92a0;

    font-size: 9px;
    font-weight: 700;
}

.score-student-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.score-student-avatar {
    width: 31px;
    height: 31px;
    min-width: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.score-student-cell strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.score-student-cell span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Score input */

.score-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-input {
    width: 90px !important;
    height: 35px;

    padding: 5px 8px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #cfd6e2;
    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;

    text-align: right;
}

.score-input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.09);
}

.score-input-wrap span,
.score-maximum {
    color: var(--svc-text-muted);

    font-size: 9px;
}

.score-readonly {
    color: var(--svc-heading);

    font-size: 11px;
}

.weighted-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;

    padding: 4px 7px;

    color: #176a43;
    background: #e6f5ed;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 750;
}

.score-missing {
    display: inline-flex;

    padding: 4px 7px;

    color: #983742;
    background: #fdebed;

    border-radius: 5px;

    font-size: 8px;
    font-weight: 700;
}

.score-empty {
    color: #a4aab5;
}


/* Save bar */

.score-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 13px 16px;

    background: #fafbfc;

    border-top: 1px solid #e6e9ef;
}

.score-save-bar strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.score-save-bar p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Teacher submission */

.assessment-submit-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 16px;
    padding: 17px 19px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-left: 4px solid var(--svc-accent);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);
}

.assessment-submit-panel h3 {
    margin: 2px 0 3px;

    color: var(--svc-heading);

    font-size: 13px;
}

.assessment-submit-panel p {
    max-width: 600px;

    margin: 0;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* Academic review */

.assessment-review-card {
    margin-bottom: 18px;

    border-top: 3px solid var(--svc-accent);
}

.review-guidance {
    margin-bottom: 16px;
    padding: 11px 13px;

    color: #555f70;
    background: #f7f8fa;

    border-radius: 7px;
}

.review-guidance strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.review-guidance p {
    margin: 2px 0 0;

    font-size: 9px;
}

.review-publish-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 13px;

    background: #f6fbf8;

    border: 1px solid #dbece2;
    border-radius: 7px;
}

.review-publish-section strong {
    display: block;

    color: #176a43;

    font-size: 10px;
}

.review-publish-section p {
    margin: 2px 0 0;

    color: #68746d;

    font-size: 9px;
}

.review-divider {
    position: relative;

    margin: 17px 0;

    text-align: center;
}

.review-divider::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background: #e5e8ed;
}

.review-divider span {
    position: relative;

    padding: 0 9px;

    color: #9aa1ad;
    background: #fff;

    font-size: 8px;
    font-weight: 700;
}

.review-return-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;

    align-items: end;
}

.review-return-section label {
    grid-column: 1 / -1;

    color: #535e70;

    font-size: 9px;
    font-weight: 700;
}

.review-return-section input {
    width: 100%;
    min-height: 38px;

    padding: 7px 10px;

    border: 1px solid #d4dae4;
    border-radius: 6px;
}

.review-return-section input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}


/* Responsive */

@media (max-width: 1050px) {
    .assessment-sheet-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .assessment-sheet-meta {
        width: 100%;

        flex-wrap: wrap;
    }

    .assessment-sheet-meta > div {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .score-sheet-header-meta {
        display: none;
    }

    .score-save-bar,
    .assessment-submit-panel,
    .review-publish-section {
        align-items: stretch;
        flex-direction: column;
    }

    .review-return-section {
        grid-template-columns: 1fr;
    }

    .review-return-section label {
        grid-column: auto;
    }
}

/* ==========================================================================
   PARENT PORTAL - PUBLISHED RESULTS
   ========================================================================== */

.parent-results-student-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.parent-results-student-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.parent-results-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border: 3px solid rgba(255,255,255,.15);
    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;
}

.parent-results-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.parent-results-student-main h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 17px;
}

.parent-results-student-main p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 10px;
}


/* Summary */

.parent-results-summary {
    display: flex;
    gap: 8px;
}

.parent-results-summary > div {
    min-width: 115px;

    padding: 9px 13px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.parent-results-summary span {
    display: block;

    color: rgba(255,255,255,.57);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-results-summary strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 17px;
}


/* Terminal report cards */

.parent-terminal-reports {
    margin-bottom: 16px;
}

.terminal-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.terminal-report-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px;

    color: inherit;
    background: #fafbfc;

    border: 1px solid #e3e7ed;
    border-radius: 8px;

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.terminal-report-item:hover {
    transform: translateY(-1px);

    border-color: #cdd5e5;

    box-shadow: 0 5px 14px rgba(24, 40, 95, .07);
}

.terminal-report-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 8px;

    font-size: 9px;
    font-weight: 800;
}

.terminal-report-copy {
    flex: 1;
}

.terminal-report-copy > span {
    display: block;

    margin-bottom: 1px;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.terminal-report-copy strong {
    display: block;

    color: var(--svc-heading);

    font-size: 11px;
}

.terminal-report-copy p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.terminal-report-arrow {
    color: var(--svc-accent);

    font-size: 17px;
    font-weight: 700;
}


/* Subject results */

.parent-subject-results {
    margin-bottom: 16px;

    overflow: hidden;
}

.parent-results-table-wrap {
    overflow-x: auto;
}

.parent-results-table {
    margin: 0;
}

.parent-result-number {
    width: 40px;

    color: #9299a5;

    font-size: 9px;
    font-weight: 700;
}

.parent-result-term {
    color: #566174;

    font-size: 10px;
}

.parent-result-subject {
    display: flex;
    align-items: center;
    gap: 8px;
}

.parent-result-subject-icon {
    width: 29px;
    height: 29px;
    min-width: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 9px;
    font-weight: 800;
}

.parent-result-subject strong {
    color: var(--svc-heading);

    font-size: 10px;
}

.parent-result-total-heading {
    text-align: center !important;
}

.parent-result-total-cell {
    text-align: center;
}

.parent-result-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 47px;

    padding: 5px 8px;

    color: var(--svc-primary-dark);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 11px;
    font-weight: 800;
}

.parent-result-out-of {
    margin-left: 3px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Empty state */

.parent-results-empty {
    padding: 35px 20px;

    text-align: center;
}

.parent-results-empty-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 10px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;
}

.parent-results-empty h3 {
    margin: 0 0 4px;

    color: var(--svc-heading);

    font-size: 12px;
}

.parent-results-empty p {
    max-width: 430px;

    margin: auto;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* Information note */

.parent-results-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 12px 14px;

    color: #5c6574;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.parent-results-note-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.parent-results-note strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.parent-results-note p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 800px) {
    .parent-results-student-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-results-summary {
        width: 100%;
    }

    .parent-results-summary > div {
        flex: 1;
    }

    .terminal-report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .parent-results-summary {
        flex-direction: column;
    }

    .parent-results-student-main {
        align-items: flex-start;
    }
}

/* ==========================================================================
   ENTRANCE ATTENDANCE / CAMPUS PRESENCE
   ========================================================================== */

.entrance-date-badge {
    min-width: 135px;

    padding: 8px 12px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-radius: 7px;

    box-shadow: var(--svc-shadow-sm);
}

.entrance-date-badge span {
    display: block;

    margin-bottom: 2px;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.entrance-date-badge strong {
    color: var(--svc-heading);

    font-size: 10px;
}


/* Campus presence hero */

.campus-presence-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    margin-bottom: 13px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.campus-presence-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.campus-presence-icon {
    width: 49px;
    height: 49px;
    min-width: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.campus-presence-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.campus-presence-main h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.campus-presence-main p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}


/* Presence stats */

.campus-presence-stats {
    display: flex;
    gap: 8px;
}

.campus-stat {
    min-width: 105px;

    padding: 9px 12px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.campus-stat-present {
    background: rgba(242,139,39,.14);

    border-color: rgba(242,139,39,.28);
}

.campus-stat span {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.campus-stat strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 18px;
}


/* Safety notice */

.campus-safety-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 15px;
    padding: 10px 13px;

    color: #77520f;
    background: #fff9eb;

    border: 1px solid #efdfb6;
    border-left: 3px solid var(--svc-accent);
    border-radius: 7px;
}

.campus-safety-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.campus-safety-notice strong {
    display: block;

    font-size: 9px;
}

.campus-safety-notice p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Main dashboard area */

.entrance-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(245px, .65fr);
    gap: 15px;

    margin-bottom: 16px;

    align-items: stretch;
}

.security-desk-card {
    margin: 0;
}


/* Manual check-in form */

.security-checkin-form {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr);
    gap: 14px;
}

.security-form-field label {
    display: block;

    margin-bottom: 5px;

    color: #505b6d;

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.security-form-field input,
.security-form-field select {
    width: 100%;
    min-height: 40px;

    padding: 8px 10px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d2d8e2;
    border-radius: 6px;

    font: inherit;
}

.security-form-field input:focus,
.security-form-field select:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}

.security-form-field > span {
    display: block;

    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.security-submit {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;

    padding-top: 4px;
}

.security-desk-badge {
    padding: 4px 8px;

    color: #77510c;
    background: var(--svc-accent-soft);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}


/* Information panel */

.entrance-information-card {
    padding: 18px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.entrance-information-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 8px;

    font-size: 9px;
    font-weight: 800;
}

.entrance-information-card > span {
    color: rgba(255,255,255,.55);

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.entrance-information-card > h3 {
    margin: 2px 0 4px;

    color: #fff;

    font-size: 13px;
}

.entrance-information-card > p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 8px;
    line-height: 1.5;
}

.entrance-information-divider {
    height: 1px;

    margin: 13px 0;

    background: rgba(255,255,255,.12);
}

.entrance-information-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 9px;
}

.entrance-information-item > span {
    width: 23px;
    height: 23px;
    min-width: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: rgba(255,255,255,.1);

    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.entrance-information-item strong {
    display: block;

    color: #fff;

    font-size: 8px;
}

.entrance-information-item p {
    margin: 1px 0 0;

    color: rgba(255,255,255,.6);

    font-size: 7px;
}


/* Class presence */

.campus-class-card {
    overflow: hidden;
}

.campus-class-table-wrap {
    overflow-x: auto;
}

.campus-class-table {
    margin: 0;
}

.campus-class-number {
    width: 40px;

    color: #9199a6;

    font-size: 9px;
    font-weight: 700;
}

.campus-class-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campus-class-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 9px;
    font-weight: 800;
}

.campus-class-name strong {
    color: var(--svc-heading);

    font-size: 10px;
}

.campus-present-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;

    padding: 4px 7px;

    color: #176a43;
    background: #e6f5ed;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 800;
}

.campus-enrolled-count {
    color: var(--svc-heading);

    font-size: 10px;
    font-weight: 700;
}

.campus-presence-ratio strong {
    color: var(--svc-primary);

    font-size: 10px;
}

.campus-presence-ratio span {
    margin-left: 3px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Responsive */

@media (max-width: 950px) {
    .campus-presence-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .campus-presence-stats {
        width: 100%;
    }

    .campus-stat {
        flex: 1;
    }

    .entrance-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .security-checkin-form {
        grid-template-columns: 1fr;
    }

    .security-submit {
        grid-column: auto;
    }

    .security-submit .btn {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .campus-presence-stats {
        flex-direction: column;
    }
}

/* ==========================================================================
   DAILY / CLASS ATTENDANCE
   ========================================================================== */

.attendance-term-badge {
    min-width: 145px;

    padding: 8px 12px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-radius: 7px;

    box-shadow: var(--svc-shadow-sm);
}

.attendance-term-badge span {
    display: block;

    margin-bottom: 2px;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.attendance-term-badge strong {
    color: var(--svc-heading);

    font-size: 10px;
}


/* Attendance banner */

.daily-attendance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 13px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.daily-attendance-banner-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.daily-attendance-banner-icon {
    width: 49px;
    height: 49px;
    min-width: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.daily-attendance-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.daily-attendance-banner h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.daily-attendance-banner p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.daily-attendance-count {
    min-width: 125px;

    padding: 9px 14px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.daily-attendance-count span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.daily-attendance-count strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 19px;
}


/* Current term notices */

.attendance-term-notice,
.attendance-term-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 15px;
    padding: 10px 13px;

    border-radius: 7px;
}

.attendance-term-notice {
    color: #286145;
    background: #f0f9f4;

    border: 1px solid #d7ebdf;
    border-left: 3px solid #299263;
}

.attendance-term-warning {
    color: #79520d;
    background: #fff8e8;

    border: 1px solid #efdfb5;
    border-left: 3px solid var(--svc-accent);
}

.attendance-term-notice-icon,
.attendance-term-warning-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.attendance-term-notice-icon {
    background: #299263;
}

.attendance-term-warning-icon {
    background: var(--svc-accent);
}

.attendance-term-notice strong,
.attendance-term-warning strong {
    font-size: 9px;
}

.attendance-term-notice p,
.attendance-term-warning p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Register section */

.attendance-register-card {
    margin-bottom: 15px;
}

.class-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.class-register-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    padding: 14px;

    color: inherit;
    background: #fafbfc;

    border: 1px solid #e1e6ed;
    border-radius: 8px;

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.class-register-card:hover {
    transform: translateY(-1px);

    background: #fff;

    border-color: #cbd4e4;

    box-shadow: 0 5px 15px rgba(24,40,95,.07);
}

.class-register-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
}

.class-register-copy > span {
    display: block;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.class-register-copy strong {
    display: block;

    margin-top: 1px;

    color: var(--svc-heading);

    font-size: 12px;
}

.class-register-copy p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.class-register-action {
    text-align: right;
}

.class-register-action span {
    display: block;

    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 700;
}

.class-register-action strong {
    color: var(--svc-accent);

    font-size: 17px;
}


/* Empty */

.attendance-empty-state {
    padding: 38px 20px;

    text-align: center;
}

.attendance-empty-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 10px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;
}

.attendance-empty-state h3 {
    margin: 0 0 4px;

    color: var(--svc-heading);

    font-size: 12px;
}

.attendance-empty-state p {
    max-width: 440px;

    margin: auto;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* Workflow */

.daily-attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 11px;
}

.daily-attendance-info-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 12px 13px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.daily-attendance-info-card > span {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.daily-attendance-info-card strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.daily-attendance-info-card p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 800px) {
    .daily-attendance-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .daily-attendance-count {
        width: 100%;
    }

    .class-register-grid {
        grid-template-columns: 1fr;
    }

    .daily-attendance-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .class-register-card {
        grid-template-columns: auto 1fr;
    }

    .class-register-action {
        grid-column: 1 / -1;

        padding-left: 53px;

        text-align: left;
    }
}

/* ==========================================================================
   CLASS ATTENDANCE REGISTER
   ========================================================================== */

.attendance-register-error {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 14px;

    color: #923641;
    background: #fff1f2;

    border: 1px solid #f0d1d5;
    border-left: 3px solid #bd4450;
    border-radius: 7px;
}

.attendance-register-error-icon {
    width: 29px;
    height: 29px;
    min-width: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #bd4450;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.attendance-register-error strong {
    display: block;

    font-size: 10px;
}

.attendance-register-error p {
    margin: 2px 0 0;

    font-size: 9px;
}


/* Register banner */

.class-attendance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 14px;
    padding: 18px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.class-attendance-banner-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.class-attendance-icon {
    width: 49px;
    height: 49px;
    min-width: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 12px;
    font-weight: 800;
}

.class-attendance-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.class-attendance-banner h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.class-attendance-banner p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.class-attendance-banner-meta {
    display: flex;
    gap: 8px;
}

.class-attendance-banner-meta > div {
    min-width: 110px;

    padding: 8px 11px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.class-attendance-banner-meta span {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.57);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.class-attendance-banner-meta strong {
    color: #fff;

    font-size: 10px;
}


/* Date selector */

.attendance-date-card {
    margin-bottom: 14px;
}

.attendance-date-form {
    display: flex;
    align-items: end;
    gap: 9px;
}

.attendance-date-field {
    width: 220px;
}

.attendance-date-field label {
    display: block;

    margin-bottom: 5px;

    color: #525d6f;

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.attendance-date-field input {
    width: 100%;
    min-height: 38px;

    padding: 7px 9px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d3d9e3;
    border-radius: 6px;

    font: inherit;
}

.attendance-date-field input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}


/* Register sheet */

.class-register-sheet {
    margin-bottom: 14px;

    overflow: hidden;
}

.register-header-summary {
    padding: 4px 8px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 8px;
    font-weight: 750;
}

.attendance-table-wrap {
    overflow-x: auto;
}

.class-attendance-table {
    margin: 0;
}

.attendance-number-column {
    width: 42px;
}

.attendance-status-column {
    width: 230px;
}

.attendance-row-number {
    color: #939ba8;

    font-size: 9px;
    font-weight: 700;
}


/* Student */

.attendance-student-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.attendance-student-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.attendance-student-cell strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.attendance-student-cell span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.attendance-admission-number {
    color: #596375;

    font-size: 9px;
    font-weight: 650;
}


/* Status selector */

.attendance-status-select {
    width: 100%;
    min-width: 160px;
    min-height: 36px;

    padding: 6px 9px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #cfd6e1;
    border-radius: 6px;

    font-size: 9px;
    font-weight: 650;

    cursor: pointer;
}

.attendance-status-select:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}


/* Save register */

.attendance-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 13px 16px;

    background: #fafbfc;

    border-top: 1px solid #e4e8ee;
}

.attendance-save-message {
    display: flex;
    align-items: center;
    gap: 9px;
}

.attendance-save-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;
}

.attendance-save-message strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.attendance-save-message p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.attendance-save-button {
    min-width: 125px;
}


/* Footer note */

.attendance-register-footer {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 13px;

    color: #5c6574;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.attendance-register-footer-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.attendance-register-footer strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.attendance-register-footer p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 800px) {
    .class-attendance-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .class-attendance-banner-meta {
        width: 100%;
    }

    .class-attendance-banner-meta > div {
        flex: 1;
    }
}

@media (max-width: 650px) {
    .attendance-date-form {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-date-field {
        width: 100%;
    }

    .attendance-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-save-button {
        width: 100%;
    }
}

/* ==========================================================================
   PARENT PORTAL MESSAGING
   ========================================================================== */

.parent-message-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 13px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.parent-message-banner-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.parent-message-banner-icon {
    width: 49px;
    height: 49px;
    min-width: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.parent-message-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.parent-message-banner h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.parent-message-banner p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.parent-message-channel {
    min-width: 125px;

    padding: 9px 13px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.parent-message-channel span {
    display: block;

    color: rgba(255,255,255,.57);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-message-channel strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 10px;
}


/* Portal-only notice */

.portal-message-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 15px;
    padding: 10px 13px;

    color: #315985;
    background: #f2f7fd;

    border: 1px solid #d9e5f3;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.portal-message-notice-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.portal-message-notice strong {
    display: block;

    font-size: 9px;
}

.portal-message-notice p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Feedback */

.portal-message-feedback {
    margin-bottom: 14px;
}

.portal-feedback-item {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 6px;
    padding: 9px 12px;

    color: #246245;
    background: #eef9f3;

    border: 1px solid #d6ebdf;
    border-radius: 6px;
}

.portal-feedback-item > span {
    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #299263;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.portal-feedback-item p {
    margin: 0;

    font-size: 9px;
}


/* Main layout */

.parent-message-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(250px, .65fr);
    gap: 15px;

    align-items: start;
}

.parent-message-form-card {
    margin: 0;
}


/* Form */

.parent-message-field {
    margin-bottom: 13px;
}

.parent-message-field > label {
    display: block;

    margin-bottom: 5px;

    color: #505b6d;

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.required-marker {
    color: #bd4450;
}

.parent-message-control input,
.parent-message-control select,
.parent-message-control textarea {
    width: 100%;
    max-width: 100%;

    padding: 8px 10px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d1d8e3;
    border-radius: 6px;

    font: inherit;
}

.parent-message-control input,
.parent-message-control select {
    min-height: 39px;
}

.parent-message-control textarea {
    min-height: 135px;

    resize: vertical;

    line-height: 1.5;
}

.parent-message-control input:focus,
.parent-message-control select:focus,
.parent-message-control textarea:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}

.parent-message-help {
    display: block;

    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.parent-message-errors {
    margin-top: 4px;
}

.parent-message-errors span {
    display: block;

    color: #b23c48;

    font-size: 8px;
    font-weight: 650;
}

.form-error-summary {
    margin-bottom: 13px;
    padding: 9px 11px;

    color: #983b46;
    background: #fff1f2;

    border: 1px solid #efd3d6;
    border-radius: 6px;
}

.form-error-summary p {
    margin: 0;

    font-size: 9px;
}


/* Submit */

.parent-message-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 17px -16px -16px;
    padding: 13px 16px;

    background: #fafbfc;

    border-top: 1px solid #e4e8ee;
}

.parent-message-submit strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.parent-message-submit p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Guide panel */

.parent-message-guide {
    padding: 18px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.parent-message-guide-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 9px;

    font-size: 8px;
    font-weight: 800;
}

.parent-message-guide > span {
    color: rgba(255,255,255,.55);

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.parent-message-guide > h3 {
    margin: 2px 0 4px;

    color: #fff;

    font-size: 13px;
}

.parent-message-guide > p {
    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 8px;
    line-height: 1.5;
}

.parent-message-guide-divider {
    height: 1px;

    margin: 13px 0;

    background: rgba(255,255,255,.12);
}

.parent-message-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 10px;
}

.parent-message-guide-step > span {
    width: 24px;
    height: 24px;
    min-width: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: rgba(255,255,255,.1);

    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.parent-message-guide-step strong {
    display: block;

    color: #fff;

    font-size: 8px;
}

.parent-message-guide-step p {
    margin: 1px 0 0;

    color: rgba(255,255,255,.59);

    font-size: 7px;
    line-height: 1.45;
}

.parent-message-guide-note {
    margin-top: 15px;
    padding: 9px 10px;

    background: rgba(242,139,39,.13);

    border: 1px solid rgba(242,139,39,.23);
    border-radius: 6px;
}

.parent-message-guide-note strong {
    display: block;

    color: #fff;

    font-size: 8px;
}

.parent-message-guide-note p {
    margin: 2px 0 0;

    color: rgba(255,255,255,.65);

    font-size: 7px;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 900px) {
    .parent-message-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .parent-message-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-message-channel {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .parent-message-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .parent-message-submit .btn {
        width: 100%;
    }
}

/* ==========================================================================
   FINANCE - STUDENT BILL DETAIL
   ========================================================================== */

.finance-bill-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 13px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.finance-bill-banner-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.finance-student-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border: 3px solid rgba(255,255,255,.14);
    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;
}

.finance-bill-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.finance-bill-banner h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.finance-bill-banner p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.finance-bill-balance {
    min-width: 160px;

    padding: 10px 14px;

    text-align: right;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.finance-bill-balance span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.finance-bill-balance strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 17px;
}


/* Summary */

.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 11px;

    margin-bottom: 15px;
}

.finance-summary-card {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 14px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-radius: 8px;

    box-shadow: var(--svc-shadow-sm);
}

.finance-summary-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 8px;

    font-size: 9px;
    font-weight: 800;
}

.finance-summary-paid {
    background: #299263;
}

.finance-summary-outstanding {
    background: var(--svc-accent);
}

.finance-summary-card span {
    display: block;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.finance-summary-card strong {
    display: block;

    margin-top: 2px;

    color: var(--svc-heading);

    font-size: 13px;
}

.finance-summary-balance-card {
    border-bottom: 2px solid var(--svc-accent);
}


/* Bill items */

.finance-bill-items-card,
.finance-payment-card,
.finance-history-card {
    margin-bottom: 15px;

    overflow: hidden;
}

.finance-table-wrap {
    overflow-x: auto;
}

.finance-bill-table,
.finance-payment-table {
    margin: 0;
}

.finance-row-number {
    width: 42px;

    color: #939aa6;

    font-size: 9px;
    font-weight: 700;
}

.finance-fee-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-fee-icon {
    width: 29px;
    height: 29px;
    min-width: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 8px;
    font-weight: 800;
}

.finance-fee-cell strong {
    color: var(--svc-heading);

    font-size: 10px;
}

.finance-amount-heading,
.finance-amount-cell {
    text-align: right !important;
}

.finance-amount-cell {
    color: var(--svc-heading);

    font-size: 10px;
    font-weight: 700;
}

.finance-bill-table tfoot td {
    padding: 10px 12px;

    color: var(--svc-heading);
    background: #f7f8fb;

    border-top: 2px solid #dfe4ec;

    font-size: 10px;
    font-weight: 800;
}

.finance-total-cell {
    text-align: right;

    color: var(--svc-primary) !important;
}


/* Verification badge */

.finance-pending-badge {
    padding: 4px 8px;

    color: #80560d;
    background: var(--svc-accent-soft);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}


/* Maker-checker notice */

.finance-control-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-bottom: 15px;
    padding: 10px 12px;

    color: #725116;
    background: #fff9eb;

    border: 1px solid #efdfb8;
    border-left: 3px solid var(--svc-accent);
    border-radius: 6px;
}

.finance-control-notice-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.finance-control-notice strong {
    display: block;

    font-size: 9px;
}

.finance-control-notice p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Payment form */

.finance-payment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.finance-payment-field > label {
    display: block;

    margin-bottom: 5px;

    color: #505b6d;

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.finance-payment-control input,
.finance-payment-control select,
.finance-payment-control textarea {
    width: 100%;
    max-width: 100%;

    padding: 8px 10px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d1d8e3;
    border-radius: 6px;

    font: inherit;
}

.finance-payment-control input,
.finance-payment-control select {
    min-height: 39px;
}

.finance-payment-control textarea {
    min-height: 85px;

    resize: vertical;
}

.finance-payment-control input:focus,
.finance-payment-control select:focus,
.finance-payment-control textarea:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}

.finance-field-help {
    display: block;

    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.finance-field-errors {
    margin-top: 4px;
}

.finance-field-errors span {
    display: block;

    color: #b23c48;

    font-size: 8px;
    font-weight: 650;
}

.finance-payment-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 17px;
    padding-top: 13px;

    border-top: 1px solid #e4e8ee;
}

.finance-payment-submit strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.finance-payment-submit p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Payment history */

.finance-payment-amount {
    color: var(--svc-heading);

    font-size: 10px;
}

.finance-reference {
    color: #5d6675;

    font-size: 9px;
}

.finance-payment-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}

.finance-payment-status-pending {
    color: #7a5511;
    background: #fff1d5;
}

.finance-payment-status-confirmed {
    color: #176a43;
    background: #e5f5ec;
}

.finance-payment-status-rejected {
    color: #963943;
    background: #fdebed;
}

.finance-payment-status-reversed {
    color: #5e6675;
    background: #eceff3;
}

.finance-review-heading {
    min-width: 190px;
}

.finance-review-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.finance-review-actions form {
    margin: 0;
}

.finance-confirm-btn,
.finance-reject-btn,
.finance-reverse-btn {
    padding: 6px 9px;

    font-size: 8px;
}

.finance-confirm-btn {
    color: #fff;
    background: #299263;
}

.finance-confirm-btn:hover {
    background: #227c54;
}

.finance-reject-btn {
    color: #fff;
    background: #b84550;
}

.finance-reject-btn:hover {
    background: #9f3943;
}

.finance-reversal-form {
    display: flex;
    align-items: center;
    gap: 5px;

    margin: 0;
}

.finance-reversal-form input {
    min-width: 145px;
    min-height: 31px;

    padding: 5px 7px;

    border: 1px solid #d2d8e1;
    border-radius: 5px;

    font-size: 8px;
}

.finance-reversal-form input:focus {
    border-color: var(--svc-primary);

    outline: none;
}

.finance-reverse-btn {
    color: #fff;
    background: #697384;
}

.finance-reverse-btn:hover {
    background: #555f70;
}

.finance-no-action {
    color: #a0a7b1;
}


/* Empty state */

.finance-empty-state {
    padding: 34px 20px;

    text-align: center;
}

.finance-empty-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 9px;

    font-size: 9px;
    font-weight: 800;
}

.finance-empty-state h3 {
    margin: 0 0 3px;

    color: var(--svc-heading);

    font-size: 11px;
}

.finance-empty-state p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Integrity note */

.finance-integrity-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 13px;

    color: #526071;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.finance-integrity-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.finance-integrity-note strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.finance-integrity-note p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 850px) {
    .finance-bill-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .finance-bill-balance {
        width: 100%;

        text-align: left;
    }

    .finance-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .finance-payment-fields {
        grid-template-columns: 1fr;
    }

    .finance-payment-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-payment-submit .btn {
        width: 100%;
    }
}

/* ==========================================================================
   FINANCE - STUDENT BILLING WORKSPACE
   ========================================================================== */

.billing-workspace-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 13px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.billing-workspace-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.billing-workspace-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;
}

.billing-workspace-eyebrow {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.billing-workspace-main h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 16px;
}

.billing-workspace-main p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.billing-workspace-stat {
    min-width: 125px;

    padding: 9px 13px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.billing-workspace-stat span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.billing-workspace-stat strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 19px;
}


/* Billing information notice */

.billing-rule-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 15px;
    padding: 10px 13px;

    color: #315985;
    background: #f2f7fd;

    border: 1px solid #d9e5f3;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.billing-rule-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.billing-rule-notice strong {
    display: block;

    font-size: 9px;
}

.billing-rule-notice p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Billing register */

.student-billing-card {
    margin-bottom: 15px;

    overflow: hidden;
}

.student-billing-table-wrap {
    overflow-x: auto;
}

.student-billing-table {
    margin: 0;
}

.billing-row-number {
    width: 42px;

    color: #929aa7;

    font-size: 9px;
    font-weight: 700;
}


/* Student */

.billing-student-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.billing-student-avatar {
    width: 33px;
    height: 33px;
    min-width: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.billing-student-cell strong {
    display: block;

    color: var(--svc-heading);

    font-size: 10px;
}

.billing-student-cell span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Class */

.billing-class-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 5px;

    font-size: 8px;
    font-weight: 700;
}

.billing-year {
    color: #555f70;

    font-size: 9px;
}


/* Term selector */

.billing-term-select {
    min-width: 135px;
    min-height: 34px;

    padding: 6px 8px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d0d7e2;
    border-radius: 6px;

    font-size: 9px;

    cursor: pointer;
}

.billing-term-select:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(47,65,153,.08);
}


/* Action */

.billing-open-button {
    white-space: nowrap;

    padding: 7px 11px;

    color: #fff;
    background: var(--svc-primary);

    font-size: 8px;
}

.billing-open-button:hover {
    color: #fff;
    background: var(--svc-primary-dark);
}


/* Empty */

.billing-empty-state {
    padding: 40px 20px;

    text-align: center;
}

.billing-empty-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 10px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;
}

.billing-empty-state h3 {
    margin: 0 0 4px;

    color: var(--svc-heading);

    font-size: 12px;
}

.billing-empty-state p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Workflow */

.billing-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 11px;
}

.billing-workflow-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 12px 13px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.billing-workflow-card > span {
    width: 27px;
    height: 27px;
    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.billing-workflow-card strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.billing-workflow-card p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 800px) {
    .billing-workspace-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-workspace-stat {
        width: 100%;
    }

    .billing-workflow-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PARENT PORTAL - CHILD PROFILE
   ========================================================================== */

.parent-child-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 14px;
    padding: 19px 21px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow);
}

.parent-child-profile {
    display: flex;
    align-items: center;
    gap: 13px;
}

.parent-child-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border: 3px solid rgba(255,255,255,.14);
    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

.parent-child-eyebrow {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.parent-child-profile h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 17px;
}

.parent-child-profile p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.parent-child-profile p strong {
    color: #fff;
}

.parent-child-access {
    min-width: 125px;

    padding: 9px 13px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.parent-child-access span {
    display: block;

    color: rgba(255,255,255,.57);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-child-access strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 10px;
}


/* Published results */

.parent-child-results-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 14px;
    padding: 14px 16px;

    background: #fff;

    border: 1px solid var(--svc-border);
    border-left: 3px solid var(--svc-accent);
    border-radius: 8px;

    box-shadow: var(--svc-shadow-sm);
}

.parent-child-results-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.parent-child-results-icon {
    width: 39px;
    height: 39px;
    min-width: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 800;
}

.parent-child-results-main span {
    display: block;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-child-results-main h3 {
    margin: 1px 0;

    color: var(--svc-heading);

    font-size: 11px;
}

.parent-child-results-main p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Sections */

.parent-child-content-grid {
    display: grid;
    gap: 14px;

    margin-bottom: 14px;
}

.parent-child-section {
    margin: 0;

    overflow: hidden;
}

.parent-section-badge {
    padding: 4px 8px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}

.parent-finance-badge {
    color: #9a5c10;
    background: var(--svc-accent-soft);
}


/* Tables */

.parent-child-table-wrap {
    overflow-x: auto;
}

.parent-attendance-table,
.parent-finance-table {
    margin: 0;
}


/* Attendance */

.parent-attendance-date {
    display: flex;
    align-items: center;
    gap: 9px;
}

.parent-attendance-calendar {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;
}

.parent-attendance-date strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.parent-attendance-date span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 7px;
}

.parent-attendance-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    color: #536071;
    background: #eef1f5;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}


/*
   These selectors only apply where the backend's status values
   actually match these common values. The displayed text still
   comes from get_status_display.
*/

.parent-attendance-status-present {
    color: #176a43;
    background: #e5f5ec;
}

.parent-attendance-status-absent {
    color: #963943;
    background: #fdebed;
}

.parent-attendance-status-late {
    color: #80560d;
    background: #fff1d5;
}

.parent-attendance-status-excused {
    color: #365d8d;
    background: #e9f1fb;
}


/* Finance */

.parent-bill-term {
    color: var(--svc-heading);

    font-size: 9px;
}

.parent-bill-amount {
    color: #566171;

    font-size: 9px;
    font-weight: 650;
}

.parent-bill-paid {
    color: #24724e;

    font-size: 9px;
    font-weight: 700;
}

.parent-bill-balance {
    color: var(--svc-primary);

    font-size: 10px;
}


/* Empty states */

.parent-child-empty {
    padding: 34px 20px;

    text-align: center;
}

.parent-child-empty-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 9px;

    font-size: 9px;
    font-weight: 800;
}

.parent-child-empty h3 {
    margin: 0 0 3px;

    color: var(--svc-heading);

    font-size: 11px;
}

.parent-child-empty p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Information */

.parent-child-information {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 13px;

    color: #536071;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.parent-child-information-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.parent-child-information strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.parent-child-information p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* Responsive */

@media (max-width: 750px) {

    .parent-child-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-child-access {
        width: 100%;

        text-align: left;
    }

    .parent-child-results-card {
        align-items: stretch;
        flex-direction: column;
    }

    .parent-child-results-card .btn {
        width: 100%;
    }
}

/* ==========================================================================
   PARENT PORTAL DASHBOARD
   ========================================================================== */

.parent-dashboard-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 15px;
    padding: 20px 22px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.parent-dashboard-banner-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.parent-dashboard-banner-icon {
    width: 51px;
    height: 51px;
    min-width: 51px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;
}

.parent-dashboard-eyebrow {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.parent-dashboard-banner h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 17px;
}

.parent-dashboard-banner p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 9px;
}

.parent-dashboard-stat {
    min-width: 125px;

    padding: 9px 13px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
}

.parent-dashboard-stat span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-dashboard-stat strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 19px;
}


/* ==========================================================================
   LINKED CHILDREN
   ========================================================================== */

.parent-dashboard-children {
    margin-bottom: 15px;
}

.parent-children-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.parent-child-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    padding: 14px;

    color: inherit;
    background: #fafbfc;

    border: 1px solid #e1e6ed;
    border-radius: 8px;

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.parent-child-card:hover {
    transform: translateY(-1px);

    color: inherit;
    background: #fff;

    border-color: #cbd4e4;

    box-shadow: 0 5px 15px rgba(24,40,95,.07);
}

.parent-child-card-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border: 3px solid var(--svc-primary-soft);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.parent-child-card-copy > span {
    display: block;

    color: var(--svc-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.parent-child-card-copy strong {
    display: block;

    margin-top: 1px;

    color: var(--svc-heading);

    font-size: 11px;
}

.parent-child-card-copy p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.parent-child-card-action {
    text-align: right;
}

.parent-child-card-action span {
    display: block;

    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 700;
}

.parent-child-card-action strong {
    color: var(--svc-accent);

    font-size: 17px;
}


/* ==========================================================================
   SCHOOL MESSAGES
   ========================================================================== */

.parent-messages-card {
    margin-bottom: 15px;

    overflow: hidden;
}

.parent-message-list {
    background: #fff;
}

.parent-inbox-message {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;

    padding: 15px 17px;

    border-bottom: 1px solid #e7eaf0;
}

.parent-inbox-message:last-child {
    border-bottom: 0;
}

.parent-inbox-message-unread {
    background: #fbfcff;

    border-left: 3px solid var(--svc-accent);
}

.parent-message-status-column {
    padding-top: 1px;
}

.parent-message-envelope {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 8px;

    font-size: 9px;
    font-weight: 800;
}

.parent-inbox-message-unread .parent-message-envelope {
    color: #fff;
    background: var(--svc-accent);
}

.parent-message-content {
    min-width: 0;
}

.parent-message-heading-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.parent-message-heading h3 {
    margin: 0;

    color: var(--svc-heading);

    font-size: 11px;
}

.parent-unread-badge {
    display: inline-flex;

    padding: 3px 6px;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 999px;

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.parent-message-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 3px;

    color: var(--svc-text-muted);

    font-size: 7px;
}

.parent-message-meta strong {
    color: var(--svc-primary);
}

.parent-message-meta-divider {
    color: #bbc1ca;
}

.parent-message-body {
    margin-top: 9px;

    color: #566171;

    font-size: 9px;
    line-height: 1.6;
}

.parent-message-actions {
    margin-top: 10px;
}

.parent-message-actions form {
    margin: 0;
}

.parent-mark-read-button {
    padding: 6px 9px;

    color: #fff;
    background: var(--svc-primary);

    font-size: 8px;
}

.parent-mark-read-button:hover {
    color: #fff;
    background: var(--svc-primary-dark);
}

.parent-message-read-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 9px;

    color: #687282;

    font-size: 7px;
    font-weight: 650;
}

.parent-message-read-state span {
    color: #299263;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.parent-dashboard-empty {
    padding: 38px 20px;

    text-align: center;
}

.parent-dashboard-empty-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 10px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 8px;
    font-weight: 800;
}

.parent-dashboard-empty h3 {
    margin: 0 0 4px;

    color: var(--svc-heading);

    font-size: 12px;
}

.parent-dashboard-empty p {
    max-width: 480px;

    margin: auto;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* ==========================================================================
   SECURITY / ACCESS NOTICE
   ========================================================================== */

.parent-dashboard-security {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 13px;

    color: #526071;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.parent-dashboard-security-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #299263;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.parent-dashboard-security strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.parent-dashboard-security p {
    margin: 2px 0 0;

    font-size: 8px;
    line-height: 1.5;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 800px) {

    .parent-dashboard-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-dashboard-stat {
        width: 100%;
    }

    .parent-children-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .parent-child-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .parent-child-card-action {
        grid-column: 1 / -1;

        padding-left: 55px;

        text-align: left;
    }

    .parent-inbox-message {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SENIOR VICTORY COLLEGE - STAFF LOGIN
   ========================================================================== */

.svc-login-page {
    min-height: calc(100vh - var(--svc-topbar-height, 60px));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(41,59,143,.06),
            transparent 28%
        ),
        #f3f5f9;
}

.svc-login-shell {
    width: 100%;
    max-width: 850px;
    min-height: 500px;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e0e5ed;
    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(17,29,75,.11);
}


/* ==========================================================================
   BRAND PANEL
   ========================================================================== */

.svc-login-brand {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 35px 31px 24px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--svc-primary-deep),
            var(--svc-primary-dark) 45%,
            var(--svc-primary)
        );

    overflow: hidden;
}

.svc-login-brand::before {
    content: "";

    position: absolute;
    width: 230px;
    height: 230px;

    right: -100px;
    top: -100px;

    border: 35px solid rgba(255,255,255,.025);
    border-radius: 50%;
}

.svc-login-brand::after {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    left: -100px;
    bottom: -100px;

    background: rgba(242,139,39,.07);

    border-radius: 50%;
}

.svc-login-brand-content,
.svc-login-brand-footer {
    position: relative;
    z-index: 2;
}

.svc-login-logo-box {
    width: 73px;
    height: 73px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    background: #fff;

    border-radius: 13px;

    box-shadow:
        0 8px 22px rgba(0,0,0,.14);
}

.svc-login-logo {
    width: 60px;
    height: 60px;

    object-fit: contain;
}

.svc-login-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--svc-accent);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .11em;
}

.svc-login-brand h1 {
    max-width: 290px;

    margin: 0;

    color: #fff;

    font-size: 23px;
    line-height: 1.15;
}

.svc-login-brand-text {
    max-width: 300px;

    margin: 10px 0 0;

    color: rgba(255,255,255,.67);

    font-size: 9px;
    line-height: 1.6;
}

.svc-login-divider {
    width: 45px;
    height: 3px;

    margin: 22px 0 18px;

    background: var(--svc-accent);

    border-radius: 10px;
}


/* Features */

.svc-login-feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 13px;
}

.svc-login-feature > span {
    width: 22px;
    height: 22px;
    min-width: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: rgba(255,255,255,.09);

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.svc-login-feature strong {
    display: block;

    color: #fff;

    font-size: 8px;
}

.svc-login-feature p {
    margin: 2px 0 0;

    color: rgba(255,255,255,.55);

    font-size: 7px;
    line-height: 1.45;
}

.svc-login-brand-footer {
    padding-top: 20px;

    color: rgba(255,255,255,.38);

    font-size: 7px;

    text-transform: uppercase;
    letter-spacing: .06em;
}


/* ==========================================================================
   FORM PANEL
   ========================================================================== */

.svc-login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 42px 48px 24px;

    background: #fff;
}

.svc-login-form-wrap {
    width: 100%;
    max-width: 340px;

    margin: auto;
}

.svc-login-mobile-logo {
    display: none;
}

.svc-login-heading {
    margin-bottom: 24px;
}

.svc-login-heading > span {
    display: block;

    margin-bottom: 4px;

    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.svc-login-heading h2 {
    margin: 0;

    color: var(--svc-heading);

    font-size: 22px;
}

.svc-login-heading p {
    margin: 5px 0 0;

    color: var(--svc-text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* Login errors */

.svc-login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 16px;
    padding: 9px 10px;

    color: #913c46;
    background: #fff1f2;

    border: 1px solid #efd3d6;
    border-radius: 6px;
}

.svc-login-error-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #b84550;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.svc-login-error strong {
    display: block;

    font-size: 8px;
}

.svc-login-error p {
    margin: 1px 0 0;

    font-size: 7px;
}

.svc-login-form-errors {
    margin-bottom: 12px;
    padding: 8px 10px;

    color: #913c46;
    background: #fff1f2;

    border-radius: 6px;
}

.svc-login-form-errors p {
    margin: 0;

    font-size: 8px;
}


/* Fields */

.svc-login-field {
    margin-bottom: 15px;
}

.svc-login-field > label {
    display: block;

    margin-bottom: 5px;

    color: #4e596a;

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.svc-login-input-wrap {
    position: relative;
}

.svc-login-input-icon {
    position: absolute;

    left: 11px;
    top: 50%;

    transform: translateY(-50%);

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 5px;

    font-size: 7px;
    font-weight: 800;

    pointer-events: none;
}

.svc-login-input-wrap input {
    width: 100%;
    height: 43px;

    padding: 8px 11px 8px 43px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #cfd6e1;
    border-radius: 7px;

    font-size: 10px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.svc-login-input-wrap input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(41,59,143,.08);
}

.svc-login-field-errors {
    margin-top: 4px;
}

.svc-login-field-errors span {
    display: block;

    color: #b23c48;

    font-size: 7px;
}


/* Sign in */

.svc-login-button {
    width: 100%;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 19px;
    padding: 0 15px;

    color: #fff;
    background:
        linear-gradient(
            90deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border: 0;
    border-radius: 7px;

    cursor: pointer;

    font-size: 9px;
    font-weight: 750;

    box-shadow:
        0 5px 12px rgba(41,59,143,.17);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.svc-login-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(41,59,143,.22);
}

.svc-login-button strong {
    color: var(--svc-accent);

    font-size: 15px;
}


/* Help */

.svc-login-help {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 18px;
    padding: 9px 10px;

    background: #f7f9fc;

    border: 1px solid #e3e7ee;
    border-radius: 6px;
}

.svc-login-help-icon {
    width: 21px;
    height: 21px;
    min-width: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.svc-login-help p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 7px;
    line-height: 1.5;
}


/* Footer */

.svc-login-form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding-top: 25px;

    color: #9ba2ad;

    font-size: 7px;
}

.svc-login-footer-dot {
    color: var(--svc-accent);
}


/* ==========================================================================
   LOGIN RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {

    .svc-login-page {
        padding: 18px;
    }

    .svc-login-shell {
        max-width: 470px;

        grid-template-columns: 1fr;
    }

    .svc-login-brand {
        display: none;
    }

    .svc-login-form-panel {
        min-height: 500px;

        padding: 32px;
    }

    .svc-login-mobile-logo {
        display: block;

        margin-bottom: 20px;
    }

    .svc-login-mobile-logo img {
        width: 65px;
        height: 65px;

        object-fit: contain;
    }
}

@media (max-width: 480px) {

    .svc-login-page {
        padding: 0;

        background: #fff;
    }

    .svc-login-shell {
        min-height: 100vh;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .svc-login-form-panel {
        padding: 28px 22px;
    }
}

/* ==========================================================================
   PARENT PORTAL - TERMINAL REPORT CARD
   ========================================================================== */

.svc-report-card {
    max-width: 1050px;

    margin: 0 auto 15px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #dce2eb;
    border-radius: 10px;

    box-shadow:
        0 7px 24px rgba(17,29,75,.07);
}


/* Report header */

.svc-report-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;

    padding: 22px 25px 18px;
}

.svc-report-logo-wrap {
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #e0e5ec;
    border-radius: 10px;
}

.svc-report-logo {
    width: 59px;
    height: 59px;

    object-fit: contain;
}

.svc-report-school-label {
    display: block;

    margin-bottom: 2px;

    color: var(--svc-accent);

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .09em;
}

.svc-report-school h1 {
    margin: 0;

    color: var(--svc-primary-dark);

    font-size: 19px;
}

.svc-report-school h2 {
    margin: 2px 0 0;

    color: #626d7d;

    font-size: 10px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.svc-report-status {
    min-width: 110px;

    padding: 8px 11px;

    text-align: center;

    background: #edf8f2;

    border: 1px solid #d5eadf;
    border-radius: 7px;
}

.svc-report-status span {
    display: block;

    color: #688071;

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.svc-report-status strong {
    display: block;

    margin-top: 1px;

    color: #24724e;

    font-size: 9px;
}


/* School colours */

.svc-report-accent-line {
    height: 4px;

    background: var(--svc-primary);
}

.svc-report-accent-line span {
    display: block;

    width: 28%;
    height: 100%;

    background: var(--svc-accent);
}


/* Student information */

.svc-report-student {
    display: grid;
    grid-template-columns:
        auto minmax(170px, 1.5fr)
        repeat(3, minmax(120px, 1fr));

    align-items: center;
    gap: 13px;

    padding: 15px 24px;

    background: #f7f8fc;

    border-bottom: 1px solid #e4e8ef;
}

.svc-report-student-avatar {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.svc-report-student-main span,
.svc-report-detail span {
    display: block;

    margin-bottom: 2px;

    color: #89919d;

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.svc-report-student-main strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.svc-report-detail strong {
    color: #4d5868;

    font-size: 9px;
}


/* Sections */

.svc-report-section {
    padding: 18px 24px 0;
}

.svc-report-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;
}

.svc-report-section-heading span {
    display: block;

    color: var(--svc-accent);

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.svc-report-section-heading h3 {
    margin: 1px 0 0;

    color: var(--svc-heading);

    font-size: 11px;
}

.svc-report-section-count {
    padding: 4px 7px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 700;
}


/* Results */

.svc-report-table-wrap {
    overflow-x: auto;
}

.svc-report-results {
    width: 100%;

    border-collapse: collapse;

    font-size: 9px;
}

.svc-report-results th {
    padding: 8px 9px;

    color: #687283;
    background: #f5f7fa;

    border: 1px solid #e1e5eb;

    text-align: left;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.svc-report-results td {
    padding: 8px 9px;

    color: #566171;

    border: 1px solid #e5e8ed;
}

.svc-report-row-number {
    width: 35px;

    color: #9aa1ab !important;

    text-align: center;
}

.svc-report-subject {
    color: var(--svc-heading);

    font-size: 9px;
}

.svc-report-score-column,
.svc-report-score {
    width: 100px;

    text-align: center !important;
}

.svc-report-score {
    color: var(--svc-heading) !important;

    font-weight: 750;
}

.svc-report-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;

    padding: 4px 7px;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 5px;

    font-size: 8px;
    font-weight: 800;
}

.svc-report-description {
    color: #667181 !important;
}


/* Grade scale */

.svc-report-grade-scale {
    margin: 10px 24px 0;
    padding: 8px 10px;

    color: #606b7b;
    background: #f8f9fb;

    border: 1px solid #e4e8ee;
    border-left: 3px solid var(--svc-accent);
    border-radius: 5px;

    font-size: 8px;
}

.svc-report-grade-scale strong {
    margin-right: 6px;

    color: var(--svc-heading);
}


/* Attendance */

.svc-report-attendance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 8px;
}

.svc-report-attendance-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px;

    background: #fafbfc;

    border: 1px solid #e3e7ed;
    border-radius: 7px;
}

.svc-report-attendance-symbol {
    width: 28px;
    height: 28px;
    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 7px;
    font-weight: 800;
}

.svc-report-attendance-item div > span {
    display: block;

    color: #8a929e;

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
}

.svc-report-attendance-item strong {
    display: block;

    margin-top: 1px;

    color: var(--svc-heading);

    font-size: 13px;
}


/* Remarks */

.svc-report-remarks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.svc-report-remark {
    min-height: 105px;

    padding: 12px;

    background: #fafbfc;

    border: 1px solid #e1e5ec;
    border-radius: 7px;
}

.svc-report-remark-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svc-report-remark-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 7px;

    font-size: 7px;
    font-weight: 800;
}

.svc-report-head-icon {
    background: var(--svc-accent);
}

.svc-report-remark-heading span {
    display: block;

    color: #8a929e;

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
}

.svc-report-remark-heading strong {
    display: block;

    color: var(--svc-heading);

    font-size: 8px;
}

.svc-report-remark > p {
    margin: 10px 0 0;

    color: #586373;

    font-size: 8px;
    line-height: 1.6;
}


/* Footer */

.svc-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 20px;
    padding: 12px 24px;

    background: var(--svc-primary-dark);
}

.svc-report-footer > div:last-child {
    text-align: right;
}

.svc-report-footer span {
    display: block;

    color: rgba(255,255,255,.5);

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.svc-report-footer strong {
    display: block;

    margin-top: 1px;

    color: #fff;

    font-size: 8px;
}


/* Download panel */

.svc-report-download-panel {
    max-width: 1050px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin: 0 auto;
    padding: 12px 14px;

    background: #fff;

    border: 1px solid #e0e5ec;
    border-radius: 8px;
}

.svc-report-download-main {
    display: flex;
    align-items: center;
    gap: 9px;
}

.svc-report-download-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 7px;

    font-size: 7px;
    font-weight: 800;
}

.svc-report-download-main strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.svc-report-download-main p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 7px;
}


/* Responsive */

@media (max-width: 850px) {

    .svc-report-student {
        grid-template-columns: auto 1fr 1fr;
    }

    .svc-report-attendance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .svc-report-header {
        grid-template-columns: auto 1fr;
    }

    .svc-report-status {
        grid-column: 1 / -1;

        text-align: left;
    }

    .svc-report-student {
        grid-template-columns: auto 1fr;
    }

    .svc-report-student-main {
        grid-column: 2;
    }

    .svc-report-detail {
        grid-column: 1 / -1;

        padding-top: 5px;

        border-top: 1px solid #e5e8ed;
    }

    .svc-report-remarks-grid {
        grid-template-columns: 1fr;
    }

    .svc-report-download-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .svc-report-download-panel .btn {
        width: 100%;
    }
}

@media (max-width: 450px) {

    .svc-report-attendance-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   REPORT PRINTING
   ========================================================================== */

@media print {

    .svc-report-card {
        max-width: none;

        border: 0;

        box-shadow: none;
    }

    .svc-report-download-panel,
    .module-page-header {
        display: none !important;
    }
}

/* ==========================================================================
   ACADEMIC REPORT - STAFF REVIEW & APPROVAL
   ========================================================================== */

.report-review-workflow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    max-width: 1050px;

    margin: 0 auto 14px;
    padding: 14px 16px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: 8px;

    box-shadow: var(--svc-shadow-sm);
}

.report-review-workflow-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-review-workflow-icon {
    width: 39px;
    height: 39px;
    min-width: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 800;
}

.report-review-workflow-main span {
    display: block;

    color: rgba(255,255,255,.55);

    font-size: 6px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.report-review-workflow-main h3 {
    margin: 1px 0;

    color: #fff;

    font-size: 12px;
}

.report-review-workflow-main p {
    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 8px;
}

.report-review-current-status {
    min-width: 125px;

    text-align: center;
}

.report-review-current-status > span {
    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.52);

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.report-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    background: rgba(255,255,255,.12);
    color: #fff;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}

.report-status-draft {
    color: #fff3cf;
}

.report-status-approved {
    color: #dff7e9;
}

.report-status-published {
    color: #fff;
    background: rgba(40,161,105,.35);
}


/* ==========================================================================
   APPROVAL CARD
   ========================================================================== */

.report-review-action-card {
    max-width: 1050px;

    margin: 15px auto;
    padding: 16px;

    border-left: 3px solid var(--svc-primary);
}

.report-review-action-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 14px;
}

.report-review-action-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.report-review-action-heading span {
    display: block;

    color: var(--svc-accent);

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.report-review-action-heading h3 {
    margin: 1px 0;

    color: var(--svc-heading);

    font-size: 11px;
}

.report-review-action-heading p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.report-approval-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;

    padding: 12px;

    background: #f8f9fc;

    border: 1px solid #e3e7ee;
    border-radius: 7px;
}

.report-review-field label {
    display: block;

    margin-bottom: 5px;

    color: #4f5969;

    font-size: 8px;
    font-weight: 750;
}

.report-review-field input {
    width: 100%;
    min-height: 38px;

    padding: 7px 9px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #cfd6e1;
    border-radius: 6px;

    font-size: 9px;
}

.report-review-field input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(41,59,143,.08);
}

.report-review-field small {
    display: block;

    margin-top: 4px;

    color: #89919d;

    font-size: 7px;
}

.report-approve-button {
    min-height: 38px;

    padding: 7px 13px;

    color: #fff;
    background: var(--svc-primary);
}

.report-approve-button:hover {
    color: #fff;
    background: var(--svc-primary-dark);
}


/* ==========================================================================
   PUBLICATION
   ========================================================================== */

.report-publish-card {
    max-width: 1050px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin: 15px auto;
    padding: 15px 16px;

    border-left: 3px solid var(--svc-accent);
}

.report-publish-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-publish-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.report-publish-main span {
    display: block;

    color: var(--svc-accent-dark);

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.report-publish-main h3 {
    margin: 1px 0;

    color: var(--svc-heading);

    font-size: 11px;
}

.report-publish-main p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}

.report-publish-card form {
    margin: 0;
}


/* ==========================================================================
   PUBLISHED NOTICE
   ========================================================================== */

.report-published-notice {
    max-width: 1050px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 15px auto;
    padding: 11px 13px;

    color: #32654c;
    background: #eef8f3;

    border: 1px solid #d5eadf;
    border-left: 3px solid #299263;
    border-radius: 7px;
}

.report-published-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #299263;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.report-published-notice strong {
    display: block;

    font-size: 9px;
}

.report-published-notice p {
    margin: 2px 0 0;

    font-size: 8px;
}


/* Responsive */

@media (max-width: 700px) {

    .report-review-workflow {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-review-current-status {
        text-align: left;
    }

    .report-approval-form {
        grid-template-columns: 1fr;
    }

    .report-approve-button {
        width: 100%;
    }

    .report-publish-card {
        align-items: stretch;
        flex-direction: column;
    }

    .report-publish-card button {
        width: 100%;
    }
}

/* ==========================================================================
   TERMINAL REPORTS WORKSPACE
   ========================================================================== */

.terminal-report-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 13px;
    padding: 18px 20px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow);
}

.terminal-report-banner-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.terminal-report-banner-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-accent);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;
}

.terminal-report-eyebrow {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.terminal-report-banner-main h3 {
    margin: 2px 0;

    color: #fff;

    font-size: 15px;
}

.terminal-report-banner-main p {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 8px;
}


/* Banner statistics */

.terminal-report-banner-stats {
    display: flex;
    gap: 8px;
}

.terminal-report-banner-stats > div {
    min-width: 105px;

    padding: 8px 10px;

    text-align: center;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 7px;
}

.terminal-report-banner-stats span {
    display: block;

    color: rgba(255,255,255,.54);

    font-size: 6px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.terminal-report-banner-stats strong {
    display: block;

    margin-top: 1px;

    color: #fff;

    font-size: 16px;
}


/* ==========================================================================
   WORKFLOW
   ========================================================================== */

.terminal-report-workflow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);

    align-items: center;
    gap: 7px;

    margin-bottom: 14px;
}

.terminal-report-step {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 54px;

    padding: 9px 10px;

    background: #fff;

    border: 1px solid #e0e5ed;
    border-radius: 7px;
}

.terminal-report-step > span {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.terminal-report-step strong {
    display: block;

    color: var(--svc-heading);

    font-size: 8px;
}

.terminal-report-step p {
    margin: 2px 0 0;

    color: var(--svc-text-muted);

    font-size: 7px;
    line-height: 1.35;
}

.terminal-report-step-arrow {
    color: var(--svc-accent);

    font-size: 14px;
    font-weight: 800;
}


/* ==========================================================================
   PREPARATION REGISTER
   ========================================================================== */

.terminal-report-prepare-card,
.terminal-prepared-card {
    margin-bottom: 14px;

    overflow: hidden;
}

.terminal-report-table-wrap {
    overflow-x: auto;
}

.terminal-report-table,
.terminal-prepared-table {
    margin: 0;
}

.terminal-report-number {
    width: 38px;

    color: #929aa7;

    font-size: 8px;
    font-weight: 700;
}


/* Student */

.terminal-report-student {
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-report-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.terminal-prepared-avatar {
    color: var(--svc-primary);
    background: var(--svc-primary-soft);
}

.terminal-report-student strong {
    display: block;

    color: var(--svc-heading);

    font-size: 9px;
}

.terminal-report-student span {
    display: block;

    margin-top: 1px;

    color: var(--svc-text-muted);

    font-size: 7px;
}


/* Class */

.terminal-report-class {
    display: inline-flex;

    padding: 4px 7px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 5px;

    font-size: 7px;
    font-weight: 700;
}


/* Form controls */

.terminal-report-term {
    min-width: 115px;
    min-height: 33px;

    padding: 6px 8px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d0d7e2;
    border-radius: 6px;

    font-size: 8px;
}

.terminal-report-remark-input {
    width: 100%;
    min-width: 190px;
    min-height: 33px;

    padding: 6px 8px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #d0d7e2;
    border-radius: 6px;

    font-size: 8px;
}

.terminal-report-term:focus,
.terminal-report-remark-input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(41,59,143,.07);
}

.terminal-report-prepare-button,
.terminal-report-view-button {
    white-space: nowrap;

    padding: 7px 10px;

    color: #fff;
    background: var(--svc-primary);

    font-size: 7px;
}

.terminal-report-prepare-button:hover,
.terminal-report-view-button:hover {
    color: #fff;
    background: var(--svc-primary-dark);
}


/* ==========================================================================
   PREPARED REPORT STATUS
   ========================================================================== */

.terminal-report-term-text {
    color: #566171;

    font-size: 8px;
}

.terminal-report-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    color: #596473;
    background: #edf0f4;

    border-radius: 999px;

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .03em;
}

.terminal-report-status-draft {
    color: #80560d;
    background: #fff1d5;
}

.terminal-report-status-approved {
    color: #245e89;
    background: #e8f2fa;
}

.terminal-report-status-published {
    color: #176a43;
    background: #e5f5ec;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.terminal-report-empty {
    padding: 34px 20px;

    text-align: center;
}

.terminal-report-empty-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 9px;

    font-size: 8px;
    font-weight: 800;
}

.terminal-report-empty h3 {
    margin: 0 0 3px;

    color: var(--svc-heading);

    font-size: 11px;
}

.terminal-report-empty p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* ==========================================================================
   INFORMATION
   ========================================================================== */

.terminal-report-information {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 12px;

    color: #536071;
    background: #f7f9fc;

    border: 1px solid #e1e6ef;
    border-left: 3px solid var(--svc-primary);
    border-radius: 7px;
}

.terminal-report-information-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}

.terminal-report-information strong {
    display: block;

    color: var(--svc-heading);

    font-size: 8px;
}

.terminal-report-information p {
    margin: 2px 0 0;

    font-size: 7px;
    line-height: 1.5;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {

    .terminal-report-workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terminal-report-step-arrow {
        display: none;
    }
}

@media (max-width: 750px) {

    .terminal-report-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .terminal-report-banner-stats {
        width: 100%;
    }

    .terminal-report-banner-stats > div {
        flex: 1;
    }
}

@media (max-width: 550px) {

    .terminal-report-workflow {
        grid-template-columns: 1fr;
    }

    .terminal-report-banner-stats {
        flex-direction: column;
    }
}

.svc-login-forgot {
    margin-top: 6px;

    text-align: right;
}

.svc-login-forgot a {
    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}

.svc-login-forgot a:hover {
    color: var(--svc-accent-dark);

    text-decoration: underline;
}


/* ==========================================================================
   AUTHENTICATION / PASSWORD RECOVERY
   ========================================================================== */

.svc-auth-page {
    min-height: calc(100vh - var(--svc-topbar-height, 60px));

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background: #f4f6fa;
}

.svc-auth-card {
    width: 100%;
    max-width: 440px;

    padding: 28px 32px;

    background: #fff;

    border: 1px solid #dfe4ec;
    border-top: 4px solid var(--svc-primary);
    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(17,29,75,.09);
}

.svc-auth-brand {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-bottom: 16px;
    margin-bottom: 22px;

    border-bottom: 1px solid #e7eaf0;
}

.svc-auth-logo {
    width: 43px;
    height: 43px;

    object-fit: contain;
}

.svc-auth-brand span {
    color: var(--svc-primary-dark);

    font-size: 10px;
    font-weight: 800;
}

.svc-auth-heading {
    text-align: center;

    margin-bottom: 21px;
}

.svc-auth-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 10px;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 15px;
    font-weight: 800;
}

.svc-auth-heading h1 {
    margin: 0;

    color: var(--svc-heading);

    font-size: 18px;
}

.svc-auth-heading p {
    max-width: 320px;

    margin: 6px auto 0;

    color: var(--svc-text-muted);

    font-size: 8px;
    line-height: 1.55;
}

.svc-auth-field {
    margin-bottom: 15px;
}

.svc-auth-field label {
    display: block;

    margin-bottom: 5px;

    color: #505b6b;

    font-size: 8px;
    font-weight: 750;
}

.svc-auth-field input {
    width: 100%;
    min-height: 42px;

    padding: 8px 10px;

    color: var(--svc-heading);
    background: #fff;

    border: 1px solid #ccd4df;
    border-radius: 7px;

    font-size: 9px;
}

.svc-auth-field input:focus {
    border-color: var(--svc-primary);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(41,59,143,.08);
}

.svc-auth-field-errors {
    margin-top: 4px;

    color: #b33f4a;

    font-size: 7px;
}

.svc-auth-submit {
    width: 100%;
    min-height: 42px;

    padding: 8px 12px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            var(--svc-primary-dark),
            var(--svc-primary)
        );

    border: 0;
    border-radius: 7px;

    cursor: pointer;

    font-size: 9px;
    font-weight: 750;
}

.svc-auth-submit:hover {
    background: var(--svc-primary-dark);
}

.svc-auth-security {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 16px;
    padding: 9px;

    background: #f7f9fc;

    border: 1px solid #e2e7ee;
    border-radius: 6px;
}

.svc-auth-security > span {
    width: 20px;
    height: 20px;
    min-width: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: var(--svc-primary);

    border-radius: 50%;

    font-size: 7px;
    font-weight: 800;
}

.svc-auth-security p {
    margin: 0;

    color: #687384;

    font-size: 7px;
    line-height: 1.5;
}

.svc-auth-back {
    margin-top: 18px;

    text-align: center;
}

.svc-auth-back a {
    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}

.svc-auth-back a:hover {
    color: var(--svc-accent-dark);
}

/* ==========================================================================
   PASSWORD RESET - ADDITIONAL STATES
   ========================================================================== */

.svc-auth-success-icon {
    background: #25835a;
}

.svc-auth-invalid-icon {
    background: #b74450;
}

.svc-auth-message {
    margin-bottom: 14px;
    padding: 11px 12px;

    color: #426250;
    background: #f0f8f4;

    border: 1px solid #d8eadf;
    border-left: 3px solid #25835a;
    border-radius: 6px;
}

.svc-auth-message strong {
    display: block;

    color: #286245;

    font-size: 9px;
}

.svc-auth-message p {
    margin: 3px 0 0;

    font-size: 8px;
    line-height: 1.55;
}

.svc-auth-warning {
    margin-bottom: 16px;
    padding: 11px 12px;

    color: #77454a;
    background: #fff5f5;

    border: 1px solid #efd9dc;
    border-left: 3px solid #b74450;
    border-radius: 6px;
}

.svc-auth-warning strong {
    display: block;

    font-size: 9px;
}

.svc-auth-warning p {
    margin: 3px 0 0;

    font-size: 8px;
    line-height: 1.55;
}

.svc-auth-button-link {
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.svc-auth-button-link:hover {
    color: #fff;

    text-decoration: none;
}

.svc-password-guidance {
    margin: 5px 0 16px;
    padding: 10px;

    color: #657080;
    background: #f7f9fc;

    border: 1px solid #e1e6ed;
    border-radius: 6px;
}

.svc-password-guidance > strong {
    display: block;

    margin-bottom: 3px;

    color: var(--svc-heading);

    font-size: 8px;
}

.svc-password-guidance > p {
    margin: 0 0 5px;

    font-size: 7px;
}

.svc-password-help {
    font-size: 7px;
    line-height: 1.5;
}

.svc-password-help ul {
    margin: 5px 0 0;
    padding-left: 17px;
}

.svc-password-help li {
    margin: 2px 0;
}

/* ==========================================================================
   PARENT / GUARDIAN LOGIN
   ========================================================================== */

.svc-parent-staff-switch {
    margin-top: 16px;
    padding-top: 14px;

    text-align: center;

    border-top: 1px solid #e4e8ef;
}

.svc-parent-staff-switch span {
    display: block;

    margin-bottom: 4px;

    color: var(--svc-text-muted);

    font-size: 7px;
}

.svc-parent-staff-switch a {
    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 750;

    text-decoration: none;
}

.svc-parent-staff-switch a:hover {
    color: var(--svc-accent-dark);

    text-decoration: underline;
}

/* ==========================================================================
   STUDENT MANAGEMENT
   ========================================================================== */

.student-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* --------------------------------------------------------------------------
   Page heading
   -------------------------------------------------------------------------- */

.student-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.student-eyebrow {
    margin-bottom: 6px;

    color: var(--svc-accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.student-page-header .page-title {
    margin-bottom: 5px;
}

.student-page-header .page-subtitle {
    max-width: 680px;
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 13px;
}

.student-session-card {
    min-width: 205px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 11px 15px;

    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);
}

.student-session-label {
    margin-bottom: 2px;

    color: var(--svc-text-muted);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.student-session-card strong {
    color: var(--svc-primary);

    font-size: 14px;
}


/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.student-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.student-stat-card {
    position: relative;

    min-height: 112px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px;

    overflow: hidden;

    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);

    transition:
        transform var(--svc-transition),
        box-shadow var(--svc-transition),
        border-color var(--svc-transition);
}

.student-stat-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: var(--svc-primary);
}

.student-stat-card:hover {
    transform: translateY(-2px);

    border-color: #d4daea;

    box-shadow: var(--svc-shadow);
}

.student-stat-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.student-stat-icon-primary {
    color: var(--svc-primary);
    background: var(--svc-primary-soft);
}

.student-stat-icon-success {
    color: var(--svc-success);
    background: #e8f5ee;
}

.student-stat-icon-accent {
    color: var(--svc-accent-dark);
    background: var(--svc-accent-soft);
}

.student-stat-icon-warning {
    color: #9a6911;
    background: #fff6dc;
}

.student-stat-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.student-stat-label {
    color: var(--svc-text-muted);

    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.student-stat-value {
    margin: 1px 0;

    color: var(--svc-heading);

    font-size: 25px;
    line-height: 1.15;
}

.student-stat-note {
    overflow: hidden;

    color: var(--svc-text-muted);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.student-filter-card {
    overflow: visible;
}

.student-filter-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px 0;
}

.student-filter-heading h3 {
    margin: 0 0 3px;

    font-size: 15px;
}

.student-filter-heading p {
    margin: 0;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.student-clear-filter {
    flex: 0 0 auto;

    color: var(--svc-accent-dark);

    font-size: 11px;
    font-weight: 750;
}

.student-filter-form {
    display: grid;
    grid-template-columns:
        minmax(230px, 2fr)
        minmax(145px, 0.8fr)
        minmax(180px, 1fr)
        auto;

    gap: 13px;

    align-items: end;

    padding: 17px 20px 20px;
}

.student-filter-field {
    min-width: 0;
}

.student-filter-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--svc-heading);

    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-search-control {
    position: relative;
}

.student-search-symbol {
    position: absolute;
    top: 50%;
    left: 12px;

    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 6px;

    font-size: 9px;
    font-weight: 850;

    pointer-events: none;
}

.student-search-control .form-control {
    padding-left: 44px;
}

.student-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Register
   -------------------------------------------------------------------------- */

.student-register-card {
    overflow: hidden;
}

.student-register-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px;

    background:
        linear-gradient(
            90deg,
            rgba(41, 59, 143, 0.035),
            rgba(242, 139, 39, 0.025)
        );

    border-bottom: 1px solid var(--svc-border);
}

.student-register-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.student-register-title-row h3 {
    margin: 0;

    font-size: 16px;
}

.student-count-badge {
    min-width: 25px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
}

.student-register-header p {
    margin: 3px 0 0;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.student-register-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    font-size: 10px;
}

.student-register-meta span {
    color: var(--svc-text-muted);
}

.student-register-meta strong {
    color: var(--svc-primary);

    font-size: 12px;
}

.student-table-wrap {
    width: 100%;

    overflow-x: auto;
}

.student-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
}

.student-table thead th {
    padding: 11px 16px;

    color: var(--svc-text-muted);
    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);

    font-size: 9px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.student-table tbody td {
    padding: 13px 16px;

    border-bottom: 1px solid #edf0f5;

    vertical-align: middle;

    font-size: 12px;
}

.student-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-table tbody tr {
    transition: background var(--svc-transition);
}

.student-table tbody tr:hover {
    background: #fafbff;
}


/* Student identity */

.student-identity {
    min-width: 210px;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: inherit;
}

.student-identity:hover {
    color: inherit;
}

.student-avatar {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--svc-primary),
            var(--svc-primary-dark)
        );

    border-radius: 11px;

    box-shadow: 0 4px 10px rgba(41, 59, 143, 0.16);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.student-identity-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.student-identity-text strong {
    color: var(--svc-heading);

    font-size: 12px;
}

.student-identity:hover .student-identity-text strong {
    color: var(--svc-primary);
}

.student-identity-text small {
    margin-top: 2px;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Admission / class */

.student-admission-number {
    display: inline-flex;

    padding: 5px 8px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border: 1px solid #dde2f2;
    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.student-class-name {
    color: var(--svc-heading);

    font-size: 11px;
}

.student-section,
.student-table-muted {
    color: var(--svc-text-muted);

    font-size: 11px;
}

.student-unassigned {
    display: inline-flex;

    padding: 4px 7px;

    color: #8a6115;
    background: #fff6df;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 750;
}


/* Status */

.student-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.student-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.student-status-active {
    color: #16784a;
    background: #e7f6ee;
}

.student-status-graduated {
    color: var(--svc-primary);
    background: var(--svc-primary-soft);
}

.student-status-inactive {
    color: #72798a;
    background: #eef0f4;
}


/* Profile action */

.student-action-heading,
.student-action-cell {
    text-align: right !important;
}

.student-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    color: var(--svc-primary);
    background: #ffffff;

    border: 1px solid #dce1ed;
    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;

    transition:
        color var(--svc-transition),
        background var(--svc-transition),
        border-color var(--svc-transition),
        transform var(--svc-transition);
}

.student-profile-link:hover {
    color: #ffffff;
    background: var(--svc-primary);

    border-color: var(--svc-primary);

    transform: translateX(2px);
}


/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.student-empty-state {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 45px 20px;

    text-align: center;
}

.student-empty-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border: 1px solid #dbe0ef;
    border-radius: 15px;

    font-size: 12px;
    font-weight: 850;
}

.student-empty-state h3 {
    margin: 0 0 5px;

    font-size: 16px;
}

.student-empty-state p {
    max-width: 440px;

    margin: 0 0 17px;

    color: var(--svc-text-muted);

    font-size: 11px;
}


/* --------------------------------------------------------------------------
   Responsive Student Management
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {

    .student-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-filter-actions {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {

    .student-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-session-card {
        width: 100%;

        align-items: flex-start;
    }

    .student-stats-grid {
        grid-template-columns: 1fr;
    }

    .student-filter-heading {
        flex-direction: column;
    }

    .student-filter-form {
        grid-template-columns: 1fr;
    }

    .student-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .student-filter-actions .btn {
        width: 100%;
    }

    .student-register-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-register-meta {
        align-items: flex-start;
    }
}

/* ==========================================================================
   STUDENT 360 PROFILE
   ========================================================================== */

.student-profile-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.student-profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--svc-text-muted);

    font-size: 11px;
}

.student-profile-breadcrumb a {
    font-weight: 750;
}

.student-profile-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    padding: 25px 27px;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            var(--svc-primary-deep),
            var(--svc-primary),
            #354aa1
        );

    border-radius: var(--svc-radius-lg);

    box-shadow: var(--svc-shadow);
}

.student-profile-hero::after {
    content: "";

    position: absolute;
    top: -85px;
    right: -60px;

    width: 240px;
    height: 240px;

    border: 42px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;

    pointer-events: none;
}

.student-profile-main {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 17px;
}

.student-profile-avatar {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary-deep);
    background: #ffffff;

    border: 4px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);

    font-size: 19px;
    font-weight: 850;
}

.student-profile-label {
    margin-bottom: 4px;

    color: #f6b66f;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.student-profile-heading h1 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.2;
}

.student-profile-identifiers {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.student-profile-admission {
    padding: 5px 9px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;
}

.student-profile-current {
    position: relative;
    z-index: 1;

    min-width: 200px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding-left: 25px;

    color: #ffffff;

    border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.student-profile-current-label {
    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.student-profile-current strong {
    color: #ffffff;

    font-size: 18px;
}

.student-profile-current span {
    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
}

.student-profile-current small {
    margin-top: 4px;

    color: #f6b66f;

    font-size: 9px;
    font-weight: 750;
}


/* Summary */

.student-profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.student-profile-summary-card {
    display: flex;
    flex-direction: column;

    padding: 14px 16px;

    background: var(--svc-surface);

    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);

    box-shadow: var(--svc-shadow-sm);
}

.student-profile-summary-label {
    margin-bottom: 3px;

    color: var(--svc-text-muted);

    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.student-profile-summary-card strong {
    color: var(--svc-heading);

    font-size: 12px;
}


/* Main profile layout */

.student-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, 0.85fr);
    gap: 18px;

    align-items: start;
}

.student-profile-primary,
.student-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.student-profile-card {
    overflow: hidden;
}

.student-profile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    padding: 16px 18px;

    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);
}

.student-profile-section-label {
    display: block;

    margin-bottom: 2px;

    color: var(--svc-accent-dark);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.student-profile-card-header h3 {
    margin: 0;

    font-size: 14px;
}

.student-profile-card-header p {
    margin: 3px 0 0;

    color: var(--svc-text-muted);

    font-size: 10px;
}

.student-profile-card-body {
    padding: 18px;
}


/* Personal information */

.student-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;

    border: 1px solid var(--svc-border);
    border-radius: 9px;

    overflow: hidden;
}

.student-info-item {
    min-height: 67px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 12px 15px;

    border-right: 1px solid var(--svc-border);
    border-bottom: 1px solid var(--svc-border);
}

.student-info-item:nth-child(even) {
    border-right: 0;
}

.student-info-item:nth-last-child(-n+2) {
    border-bottom: 0;
}

.student-info-item span {
    margin-bottom: 3px;

    color: var(--svc-text-muted);

    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.student-info-item strong {
    color: var(--svc-heading);

    font-size: 12px;
}


/* Enrolment table */

.student-profile-table-wrap {
    overflow-x: auto;
}

.student-profile-table {
    width: 100%;
    min-width: 650px;

    border-collapse: collapse;
}

.student-profile-table th {
    padding: 10px 14px;

    color: var(--svc-text-muted);
    background: #ffffff;

    border-bottom: 1px solid var(--svc-border);

    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.student-profile-table td {
    padding: 12px 14px;

    border-bottom: 1px solid #edf0f5;

    font-size: 10px;
    vertical-align: middle;
}

.student-profile-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-current-year {
    display: inline-flex;

    margin-left: 5px;
    padding: 3px 6px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
}

.student-profile-muted {
    color: var(--svc-text-muted);
}


/* Guardians */

.student-profile-count {
    min-width: 25px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}

.student-guardian-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-guardian {
    padding: 13px;

    background: var(--svc-surface-soft);

    border: 1px solid var(--svc-border);
    border-radius: 9px;
}

.student-guardian-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.student-guardian-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--svc-primary);

    border-radius: 9px;

    font-size: 10px;
    font-weight: 850;
}

.student-guardian-heading > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.student-guardian-heading strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.student-guardian-heading span {
    color: var(--svc-text-muted);

    font-size: 9px;
}

.student-primary-guardian {
    display: inline-flex;

    margin-top: 9px;
    padding: 3px 7px;

    color: var(--svc-accent-dark);
    background: var(--svc-accent-soft);

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;
}

.student-guardian-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;

    margin-top: 11px;
    padding-top: 10px;

    border-top: 1px solid var(--svc-border);
}

.student-guardian-contact div {
    display: flex;
    flex-direction: column;
}

.student-guardian-contact span {
    color: var(--svc-text-muted);

    font-size: 8px;
    text-transform: uppercase;
}

.student-guardian-contact strong {
    overflow-wrap: anywhere;

    color: var(--svc-heading);

    font-size: 10px;
}

.student-guardian-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 10px;
}

.student-guardian-permissions span {
    padding: 3px 6px;

    color: #16784a;
    background: #e7f6ee;

    border-radius: 5px;

    font-size: 7px;
    font-weight: 750;
}


/* Record areas */

.student-record-area-list {
    display: flex;
    flex-direction: column;
}

.student-record-area {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 16px;

    border-bottom: 1px solid var(--svc-border);
}

.student-record-area:last-child {
    border-bottom: 0;
}

.student-record-area-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 850;
}

.student-record-area > div {
    display: flex;
    flex-direction: column;
}

.student-record-area strong {
    color: var(--svc-heading);

    font-size: 10px;
}

.student-record-area span:not(.student-record-area-icon) {
    color: var(--svc-text-muted);

    font-size: 8px;
}

.student-record-area-note {
    padding: 11px 16px;

    color: var(--svc-text-muted);
    background: #fafbfe;

    border-top: 1px solid var(--svc-border);

    font-size: 8px;
    line-height: 1.5;
}


/* Empty blocks */

.student-profile-empty {
    padding: 28px 18px;

    color: var(--svc-text-muted);

    font-size: 10px;
    text-align: center;
}

.student-profile-empty-small {
    padding: 18px 10px;
}


/* Responsive */

@media (max-width: 1100px) {

    .student-profile-layout {
        grid-template-columns: 1fr;
    }

    .student-profile-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .student-profile-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-profile-current {
        width: 100%;

        align-items: flex-start;

        padding: 15px 0 0;

        border-top: 1px solid rgba(255, 255, 255, 0.17);
        border-left: 0;
    }
}


@media (max-width: 650px) {

    .student-profile-main {
        align-items: flex-start;
    }

    .student-profile-avatar {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        border-radius: 14px;

        font-size: 15px;
    }

    .student-profile-heading h1 {
        font-size: 20px;
    }

    .student-profile-summary-grid {
        grid-template-columns: 1fr;
    }

    .student-info-grid {
        grid-template-columns: 1fr;
    }

    .student-info-item,
    .student-info-item:nth-child(even),
    .student-info-item:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid var(--svc-border);
    }

    .student-info-item:last-child {
        border-bottom: 0;
    }

    .student-profile-sidebar {
        display: flex;
    }
}

/* ==========================================================================
   STUDENT PROFILE - ATTENDANCE
   ========================================================================== */

.student-attendance-rate {
    min-width: 78px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.student-attendance-rate strong {
    color: var(--svc-primary);

    font-size: 19px;
    line-height: 1.1;
}

.student-attendance-rate span {
    margin-top: 2px;

    color: var(--svc-text-muted);

    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-attendance-body {
    padding: 18px;
}


/* Summary statistics */

.student-attendance-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;

    margin-bottom: 20px;
}

.student-attendance-stat {
    position: relative;

    min-height: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 11px 13px;

    overflow: hidden;

    background: var(--svc-surface-soft);

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-attendance-stat::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: var(--svc-border-strong);
}

.attendance-present::before {
    background: var(--svc-success);
}

.attendance-late::before {
    background: var(--svc-warning);
}

.attendance-absent::before {
    background: var(--svc-danger);
}

.attendance-excused::before {
    background: var(--svc-info);
}

.attendance-total::before {
    background: var(--svc-primary);
}

.student-attendance-stat-value {
    color: var(--svc-heading);

    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
}

.student-attendance-stat-label {
    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}


/* Recent attendance heading */

.student-attendance-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 10px;
}

.student-attendance-section-heading > div {
    display: flex;
    flex-direction: column;
}

.student-attendance-section-heading strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.student-attendance-section-heading > div > span {
    color: var(--svc-text-muted);

    font-size: 8px;
}

.student-attendance-register-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--svc-primary);

    font-size: 9px;
    font-weight: 800;
}

.student-attendance-register-link:hover {
    color: var(--svc-accent-dark);
}


/* Attendance table */

.student-attendance-table-wrap {
    overflow-x: auto;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-attendance-table {
    width: 100%;
    min-width: 540px;

    border-collapse: collapse;
}

.student-attendance-table th {
    padding: 9px 11px;

    color: var(--svc-text-muted);
    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);

    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-attendance-table td {
    padding: 10px 11px;

    border-bottom: 1px solid #edf0f5;

    color: var(--svc-text);

    font-size: 9px;
}

.student-attendance-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Attendance statuses */

.attendance-status {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;
}

.attendance-status-present {
    color: #16784a;
    background: #e7f6ee;
}

.attendance-status-late {
    color: #91600c;
    background: #fff4d8;
}

.attendance-status-absent {
    color: #a6323e;
    background: #fde8ea;
}

.attendance-status-excused {
    color: #17637f;
    background: #e5f3f8;
}


/* Empty attendance */

.student-attendance-empty {
    min-height: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;
}

.student-attendance-empty strong {
    margin-bottom: 4px;

    color: var(--svc-heading);

    font-size: 11px;
}

.student-attendance-empty span {
    max-width: 440px;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Responsive */

@media (max-width: 900px) {

    .student-attendance-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .student-attendance-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-attendance-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   STUDENT PROFILE - FINANCE
   ========================================================================== */

.student-finance-open-bill {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--svc-primary);

    font-size: 9px;
    font-weight: 800;
}

.student-finance-open-bill:hover {
    color: var(--svc-accent-dark);
}

.student-finance-body {
    padding: 18px;
}


/* Financial summary */

.student-finance-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-bottom: 15px;
}

.student-finance-stat {
    position: relative;

    min-height: 88px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 13px 15px;

    overflow: hidden;

    background: var(--svc-surface-soft);

    border: 1px solid var(--svc-border);
    border-radius: 9px;
}

.student-finance-stat::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: var(--svc-primary);
}

.student-finance-paid::before {
    background: var(--svc-success);
}

.student-finance-outstanding::before {
    background: var(--svc-danger);
}

.student-finance-cleared::before {
    background: var(--svc-success);
}

.student-finance-stat-label {
    margin-bottom: 3px;

    color: var(--svc-text-muted);

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-finance-stat strong {
    color: var(--svc-heading);

    font-size: 18px;
    line-height: 1.2;
}

.student-finance-stat small {
    margin-top: 4px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Bill information */

.student-finance-bill-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-bottom: 20px;

    overflow: hidden;

    background: #fafbfe;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-finance-bill-strip > div {
    display: flex;
    flex-direction: column;

    padding: 10px 13px;

    border-right: 1px solid var(--svc-border);
}

.student-finance-bill-strip > div:last-child {
    border-right: 0;
}

.student-finance-bill-strip span {
    color: var(--svc-text-muted);

    font-size: 8px;
    text-transform: uppercase;
}

.student-finance-bill-strip strong {
    margin-top: 2px;

    color: var(--svc-heading);

    font-size: 10px;
}


/* Payment section */

.student-finance-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 10px;
}

.student-finance-section-heading > div {
    display: flex;
    flex-direction: column;
}

.student-finance-section-heading strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.student-finance-section-heading > div > span {
    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Payment table */

.student-finance-table-wrap {
    overflow-x: auto;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-finance-table {
    width: 100%;
    min-width: 620px;

    border-collapse: collapse;
}

.student-finance-table th {
    padding: 9px 11px;

    color: var(--svc-text-muted);
    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);

    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-finance-table td {
    padding: 10px 11px;

    border-bottom: 1px solid #edf0f5;

    color: var(--svc-text);

    font-size: 9px;
}

.student-finance-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-payment-reference {
    color: var(--svc-primary);

    font-size: 8px;
    font-weight: 750;
}


/* Payment status */

.finance-payment-status {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-payment-confirmed {
    color: #16784a;
    background: #e7f6ee;
}

.finance-payment-pending {
    color: #91600c;
    background: #fff4d8;
}

.finance-payment-rejected {
    color: #a6323e;
    background: #fde8ea;
}

.finance-payment-reversed {
    color: #666d7c;
    background: #eef0f4;
}


/* Empty finance */

.student-finance-empty {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 27px 20px;

    text-align: center;
}

.student-finance-empty-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 850;
}

.student-finance-empty strong {
    margin-bottom: 4px;

    color: var(--svc-heading);

    font-size: 11px;
}

.student-finance-empty > span {
    max-width: 430px;

    margin-bottom: 13px;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Responsive */

@media (max-width: 750px) {

    .student-finance-summary {
        grid-template-columns: 1fr;
    }

    .student-finance-bill-strip {
        grid-template-columns: 1fr;
    }

    .student-finance-bill-strip > div {
        border-right: 0;
        border-bottom: 1px solid var(--svc-border);
    }

    .student-finance-bill-strip > div:last-child {
        border-bottom: 0;
    }

    .student-finance-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   STUDENT PROFILE - ACADEMICS
   ========================================================================== */

.student-academic-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--svc-primary);

    font-size: 9px;
    font-weight: 800;
}

.student-academic-action:hover {
    color: var(--svc-accent-dark);
}

.student-academic-body {
    padding: 18px;
}


/* Summary */

.student-academic-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-bottom: 14px;
}

.student-academic-stat {
    position: relative;

    min-height: 88px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 13px 15px;

    overflow: hidden;

    background: var(--svc-surface-soft);

    border: 1px solid var(--svc-border);
    border-radius: 9px;
}

.student-academic-stat::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: var(--svc-primary);
}

.student-academic-average::before {
    background: var(--svc-accent);
}

.student-academic-stat > span {
    color: var(--svc-text-muted);

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-academic-stat strong {
    margin-top: 2px;

    color: var(--svc-heading);

    font-size: 19px;
}

.student-academic-stat small {
    margin-top: 3px;

    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Terminal report */

.student-report-status-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 20px;
    padding: 11px 13px;

    background: #fafbfe;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-report-status-strip > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-report-status-strip > div > span {
    color: var(--svc-text-muted);

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.student-report-status-strip strong {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
}

.student-report-published {
    color: #16784a;
    background: #e7f6ee;
}

.student-report-approved {
    color: #17637f;
    background: #e5f3f8;
}

.student-report-draft {
    color: #91600c;
    background: #fff4d8;
}

.student-report-none {
    color: #666d7c;
    background: #eef0f4;
}


/* Results heading */

.student-academic-section-heading {
    margin-bottom: 10px;
}

.student-academic-section-heading > div {
    display: flex;
    flex-direction: column;
}

.student-academic-section-heading strong {
    color: var(--svc-heading);

    font-size: 11px;
}

.student-academic-section-heading span {
    color: var(--svc-text-muted);

    font-size: 8px;
}


/* Results table */

.student-academic-table-wrap {
    overflow-x: auto;

    border: 1px solid var(--svc-border);
    border-radius: 8px;
}

.student-academic-table {
    width: 100%;
    min-width: 600px;

    border-collapse: collapse;
}

.student-academic-table th {
    padding: 9px 11px;

    color: var(--svc-text-muted);
    background: #fafbfe;

    border-bottom: 1px solid var(--svc-border);

    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.student-academic-table td {
    padding: 11px;

    border-bottom: 1px solid #edf0f5;

    font-size: 9px;
    vertical-align: top;
}

.student-academic-table tbody tr:last-child td {
    border-bottom: 0;
}

.student-subject-name {
    color: var(--svc-heading);

    font-size: 10px;
}


/* Components */

.student-component-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.student-component-item {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto;
    gap: 2px 10px;

    padding-bottom: 6px;

    border-bottom: 1px dashed var(--svc-border);
}

.student-component-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.student-component-item span {
    color: var(--svc-text);

    font-size: 9px;
}

.student-component-item strong {
    color: var(--svc-heading);

    font-size: 9px;
}

.student-component-item small {
    grid-column: 1 / -1;

    color: var(--svc-text-muted);

    font-size: 7px;
}


/* Subject total */

.student-subject-total {
    display: flex;
    flex-direction: column;
}

.student-subject-total strong {
    color: var(--svc-primary);

    font-size: 15px;
}

.student-subject-total span {
    color: var(--svc-text-muted);

    font-size: 7px;
}


/* Empty state */

.student-academic-empty {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;
}

.student-academic-empty-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    color: var(--svc-primary);
    background: var(--svc-primary-soft);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 850;
}

.student-academic-empty strong {
    margin-bottom: 4px;

    color: var(--svc-heading);

    font-size: 11px;
}

.student-academic-empty span {
    max-width: 440px;

    color: var(--svc-text-muted);

    font-size: 9px;
}


/* Responsive */

@media (max-width: 750px) {

    .student-academic-summary {
        grid-template-columns: 1fr;
    }

    .student-report-status-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   STUDENT RECORD ADMINISTRATION
   ========================================================================== */

.student-profile-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--svc-primary);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.student-profile-edit-link:hover {
    color: var(--svc-accent-dark);
}


.student-edit-identity {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--svc-border);
}

.student-edit-identity > div:last-child {
    display: flex;
    flex-direction: column;
}

.student-edit-identity strong {
    color: var(--svc-heading);
    font-size: 13px;
}

.student-edit-identity span {
    margin-top: 2px;

    color: var(--svc-text-muted);
    font-size: 9px;
}


.student-edit-protected-note {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-bottom: 20px;
    padding: 12px 14px;

    background: var(--svc-primary-soft);

    border-left: 3px solid var(--svc-primary);
    border-radius: 6px;
}

.student-edit-protected-note strong {
    color: var(--svc-primary-dark);
    font-size: 9px;
}

.student-edit-protected-note span {
    color: var(--svc-text-muted);
    font-size: 8px;
    line-height: 1.6;
}


.student-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.student-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.student-edit-field label {
    color: var(--svc-heading);

    font-size: 9px;
    font-weight: 800;
}

.student-edit-field .form-control {
    width: 100%;

    padding: 10px 11px;

    color: var(--svc-text);
    background: var(--svc-surface);

    border: 1px solid var(--svc-border-strong);
    border-radius: 7px;

    font: inherit;
    font-size: 10px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.student-edit-field .form-control:focus {
    border-color: var(--svc-primary);

    box-shadow:
        0 0 0 3px rgba(41, 59, 143, 0.08);
}


.student-edit-field-errors {
    display: flex;
    flex-direction: column;
    gap: 2px;

    color: var(--svc-danger);

    font-size: 8px;
}


.student-edit-errors {
    margin-bottom: 15px;
    padding: 10px 12px;

    color: var(--svc-danger);
    background: #fff1f2;

    border: 1px solid #f1c8cd;
    border-radius: 7px;

    font-size: 9px;
}


.student-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 22px;
    padding-top: 16px;

    border-top: 1px solid var(--svc-border);
}


@media (max-width: 700px) {

    .student-edit-grid {
        grid-template-columns: 1fr;
    }

    .student-edit-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .student-edit-actions .btn {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   GUARDIAN MANAGEMENT
   ========================================================================== */

.guardian-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guardian-management-card {
    padding: 16px;
    background: var(--svc-surface);
    border: 1px solid var(--svc-border);
    border-radius: 9px;
}

.guardian-management-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guardian-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #fff;
    background: var(--svc-primary);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.guardian-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guardian-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.guardian-name-line strong {
    color: var(--svc-heading);
    font-size: 11px;
}

.guardian-heading > span {
    color: var(--svc-text-muted);
    font-size: 8px;
}

.guardian-badge {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 800;
}

.guardian-badge.primary {
    color: var(--svc-primary);
    background: var(--svc-primary-soft);
}

.guardian-contact-grid,
.guardian-account-state,
.guardian-account-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.guardian-account-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: 20px;
}

.guardian-contact-grid > div,
.guardian-account-state > div,
.guardian-account-summary > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guardian-contact-grid span,
.guardian-account-state span,
.guardian-account-summary span {
    color: var(--svc-text-muted);
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.guardian-contact-grid strong,
.guardian-account-state strong,
.guardian-account-summary strong {
    color: var(--svc-heading);
    font-size: 9px;
}

.guardian-state-good {
    color: #16794a !important;
}

.guardian-state-muted {
    color: var(--svc-text-muted) !important;
}

.guardian-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 14px;
}

.guardian-permissions span {
    padding: 4px 7px;
    color: var(--svc-text-muted);
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 800;
}

.guardian-permissions span.enabled {
    color: #16794a;
    background: #eaf7ef;
}

.guardian-warning {
    margin-top: 14px;
    padding: 9px 11px;
    color: #875a00;
    background: #fff8e5;
    border: 1px solid #eed99d;
    border-radius: 6px;
    font-size: 8px;
    line-height: 1.5;
}

.guardian-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--svc-border);
}

.guardian-link-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
}

.guardian-link-grid select.form-control {
    width: 100%;
    padding: 10px 11px;
    background: var(--svc-surface);
    border: 1px solid var(--svc-border-strong);
    border-radius: 7px;
    font-size: 10px;
}

.guardian-link-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.guardian-relationship-field {
    max-width: 420px;
    margin-bottom: 18px;
}

.guardian-relationship-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--svc-heading);
    font-size: 9px;
    font-weight: 800;
}

.guardian-relationship-field .form-control {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--svc-border-strong);
    border-radius: 7px;
    font-size: 10px;
}

.guardian-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.guardian-checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--svc-border);
    border-radius: 7px;
    cursor: pointer;
}

.guardian-checkbox-card input {
    margin-top: 2px;
}

.guardian-checkbox-card > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guardian-checkbox-card strong {
    color: var(--svc-heading);
    font-size: 9px;
}

.guardian-checkbox-card small {
    color: var(--svc-text-muted);
    font-size: 8px;
    line-height: 1.4;
}

.guardian-form-error {
    display: block;
    margin-top: 4px;
    color: var(--svc-danger);
    font-size: 8px;
}

@media (max-width: 800px) {
    .guardian-card-grid,
    .guardian-link-grid,
    .guardian-checkbox-grid,
    .guardian-account-summary {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PARENT PORTAL ACCOUNT MANAGEMENT
   ========================================================================== */

.guardian-portal-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.guardian-portal-account-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #f8f9fb;
    border: 1px solid var(--svc-border);
    border-radius: 7px;
}

.guardian-portal-account-item span {
    color: var(--svc-text-muted);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.guardian-portal-account-item strong {
    color: var(--svc-heading);
    font-size: 10px;
}

.guardian-portal-info {
    margin-top: 16px;
    padding: 12px 14px;
    background: #eef4ff;
    border: 1px solid #cfdbf7;
    border-radius: 7px;
}

.guardian-portal-info strong {
    display: block;
    margin-bottom: 4px;
    color: var(--svc-primary);
    font-size: 9px;
}

.guardian-portal-info p {
    margin: 0;
    color: var(--svc-text);
    font-size: 8px;
    line-height: 1.55;
}

.guardian-portal-security {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.guardian-portal-security strong {
    display: block;
    margin-bottom: 4px;
    color: var(--svc-heading);
    font-size: 10px;
}

.guardian-portal-security p {
    max-width: 620px;
    margin: 0;
    color: var(--svc-text-muted);
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .guardian-portal-account-grid {
        grid-template-columns: 1fr;
    }

    .guardian-portal-security {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================================
   STUDENT ENROLMENT & CLASS PLACEMENT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-header h2 {
    margin: 0 0 6px;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
}

.page-header p {
    margin: 0;
}

.page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* --------------------------------------------------------------------------
   General muted text
   -------------------------------------------------------------------------- */

.text-muted {
    color: #6b7280;
}


/* --------------------------------------------------------------------------
   Student information grid
   -------------------------------------------------------------------------- */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detail-item {
    min-width: 0;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.detail-label {
    display: block;
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detail-item strong {
    display: block;
    color: #1f2937;
    font-size: 0.96rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   Card spacing improvements
   -------------------------------------------------------------------------- */

.card + .card {
    margin-top: 22px;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.card-header h3 {
    margin: 0;
}

.card-header p {
    margin: 5px 0 0;
}


/* --------------------------------------------------------------------------
   Enrolment history table
   -------------------------------------------------------------------------- */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

.table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    color: #334155;
    font-size: 0.91rem;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: #fafbff;
}


/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #293b8f;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.badge-success {
    background: #ecfdf3;
    color: #166534;
}


/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state {
    padding: 34px 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    text-align: center;
}

.empty-state h4 {
    margin: 0 0 7px;
    color: #1f2937;
    font-size: 1rem;
}

.empty-state p {
    max-width: 520px;
    margin: 0 auto;
    color: #64748b;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Information / error alerts
   -------------------------------------------------------------------------- */

.alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.alert-info {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.alert-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.alert strong {
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Placement form
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: #374151;
    font-size: 0.84rem;
    font-weight: 700;
}

.form-control,
.form-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    line-height: 1.3;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form-select {
    cursor: pointer;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: #293b8f;
    box-shadow: 0 0 0 3px rgba(41, 59, 143, 0.12);
}

.form-control:disabled,
.form-select:disabled {
    cursor: not-allowed;
    background: #f1f5f9;
    color: #64748b;
}

.form-text {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.field-error {
    margin-top: 6px;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Form actions
   -------------------------------------------------------------------------- */

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}


/* --------------------------------------------------------------------------
   Responsive layout
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    .detail-grid,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .detail-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .card-header {
        flex-direction: column;
    }

    .table th,
    .table td {
        padding: 12px;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

}

/* ==========================================================================
   STUDENT LIFECYCLE MANAGEMENT
   ========================================================================== */

.student-lifecycle-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.student-lifecycle-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.student-lifecycle-eyebrow,
.student-lifecycle-section-label,
.student-lifecycle-summary-label {
    display: block;
    margin-bottom: 6px;
    color: #293b8f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.student-lifecycle-header h2 {
    margin: 0;
    color: #172033;
    font-size: 1.7rem;
    line-height: 1.2;
}

.student-lifecycle-header p {
    max-width: 720px;
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.student-lifecycle-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.student-lifecycle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.student-lifecycle-btn:hover {
    transform: translateY(-1px);
}

.student-lifecycle-btn-primary {
    border-color: #293b8f;
    background: #293b8f;
    color: #ffffff;
}

.student-lifecycle-btn-primary:hover {
    background: #223278;
    border-color: #223278;
}

.student-lifecycle-btn-secondary {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.student-lifecycle-btn-secondary:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}


/* --------------------------------------------------------------------------
   Student summary
   -------------------------------------------------------------------------- */

.student-lifecycle-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.student-lifecycle-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #eef2ff;
    color: #293b8f;
    font-size: 1.1rem;
    font-weight: 800;
}

.student-lifecycle-summary-main h3 {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
}

.student-lifecycle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 9px;
}

.student-lifecycle-meta span {
    color: #64748b;
    font-size: 0.82rem;
}

.student-lifecycle-meta strong {
    margin-left: 5px;
    color: #334155;
}

.student-lifecycle-current {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.student-lifecycle-current > span {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Status badges
   -------------------------------------------------------------------------- */

.student-lifecycle-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.student-lifecycle-status-active {
    background: #dcfce7;
    color: #166534;
}

.student-lifecycle-status-inactive {
    background: #f1f5f9;
    color: #475569;
}

.student-lifecycle-status-transferred {
    background: #dbeafe;
    color: #1d4ed8;
}

.student-lifecycle-status-withdrawn {
    background: #fee2e2;
    color: #b91c1c;
}

.student-lifecycle-status-graduated {
    background: #fef3c7;
    color: #92400e;
}

.student-lifecycle-status-alumni {
    background: #ede9fe;
    color: #6d28d9;
}


/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.student-lifecycle-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-lifecycle-message {
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.86rem;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Main layout
   -------------------------------------------------------------------------- */

.student-lifecycle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 24px;
    align-items: start;
}

.student-lifecycle-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.student-lifecycle-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fbfcfe;
}

.student-lifecycle-card-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
}

.student-lifecycle-card-body {
    padding: 20px;
}


/* --------------------------------------------------------------------------
   Warning
   -------------------------------------------------------------------------- */

.student-lifecycle-warning {
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 8px;
    background: #fffbeb;
}

.student-lifecycle-warning strong {
    display: block;
    margin-bottom: 4px;
    color: #92400e;
    font-size: 0.85rem;
}

.student-lifecycle-warning p {
    margin: 0;
    color: #78350f;
    font-size: 0.82rem;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.student-lifecycle-form-group {
    margin-bottom: 18px;
}

.student-lifecycle-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.student-lifecycle-form-group .form-control,
.student-lifecycle-form-group select,
.student-lifecycle-form-group textarea,
.student-lifecycle-form-group input {
    width: 100%;
    box-sizing: border-box;
}

.student-lifecycle-form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.student-lifecycle-help {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.45;
}

.student-lifecycle-field-error {
    display: block;
    margin-top: 6px;
    color: #b91c1c;
    font-size: 0.78rem
}

/* ==========================================================================
   ACADEMIC PROGRESSION
   ========================================================================== */


/* --------------------------------------------------------------------------
   Progression overview
   -------------------------------------------------------------------------- */

.progression-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.progression-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.progression-summary-card {
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.progression-summary-label {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.progression-summary-value {
    color: #172033;
    font-size: 1.2rem;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   Progression path
   -------------------------------------------------------------------------- */

.progression-path {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progression-rule {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(140px, 1fr)
        50px
        minmax(140px, 1fr)
        auto;
    align-items: center;
    gap: 14px;

    padding: 13px 16px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #ffffff;
}

.progression-rule:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.progression-section {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.progression-class {
    color: #1e293b;
    font-weight: 800;
}

.progression-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;
    font-size: 1.2rem;
    font-weight: 800;
}

.progression-destination {
    color: #334155;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Terminal / graduation destination
   -------------------------------------------------------------------------- */

.progression-graduation {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #92400e;
    font-weight: 800;
}

.progression-terminal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    background: #fef3c7;
    color: #92400e;

    font-size: 0.7rem;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   Batch status badges
   -------------------------------------------------------------------------- */

.progression-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 82px;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;
}

.progression-status-draft {
    background: #f1f5f9;
    color: #475569;
}

.progression-status-reviewed {
    background: #dbeafe;
    color: #1d4ed8;
}

.progression-status-applied {
    background: #dcfce7;
    color: #166534;
}

.progression-status-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}


/* --------------------------------------------------------------------------
   Batch creation form
   -------------------------------------------------------------------------- */

.progression-form-card {
    max-width: 900px;
}

.progression-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.progression-form-group {
    display: flex;
    flex-direction: column;
}

.progression-form-group-full {
    grid-column: 1 / -1;
}

.progression-form-group label {
    margin-bottom: 7px;

    color: #334155;

    font-size: 0.82rem;
    font-weight: 700;
}

.progression-form-group select,
.progression-form-group input,
.progression-form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.progression-form-group textarea {
    min-height: 110px;
    resize: vertical;
}

.progression-help {
    margin-top: 6px;

    color: #64748b;

    font-size: 0.76rem;
    line-height: 1.45;
}

.progression-error {
    margin-top: 6px;

    color: #b91c1c;

    font-size: 0.78rem;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Workflow
   -------------------------------------------------------------------------- */

.progression-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.progression-workflow-step {
    position: relative;

    min-height: 115px;

    padding: 16px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;
}

.progression-workflow-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin-bottom: 10px;

    border-radius: 50%;

    background: #e0e7ff;
    color: #3730a3;

    font-size: 0.75rem;
    font-weight: 800;
}

.progression-workflow-step strong {
    display: block;

    margin-bottom: 5px;

    color: #1e293b;

    font-size: 0.88rem;
}

.progression-workflow-step p {
    margin: 0;

    color: #64748b;

    font-size: 0.77rem;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Governance notice
   -------------------------------------------------------------------------- */

.progression-governance {
    padding: 16px 18px;

    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 9px;

    background: #eff6ff;
}

.progression-governance strong {
    display: block;

    margin-bottom: 6px;

    color: #1e40af;
}

.progression-governance p {
    margin: 5px 0 0;

    color: #1e3a8a;

    font-size: 0.82rem;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    .progression-workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progression-rule {
        grid-template-columns:
            minmax(100px, 0.7fr)
            minmax(120px, 1fr)
            35px
            minmax(120px, 1fr);
    }

    .progression-rule > :last-child {
        grid-column: 2 / -1;
    }
}


@media (max-width: 700px) {

    .progression-summary,
    .progression-form-grid,
    .progression-workflow {
        grid-template-columns: 1fr;
    }

    .progression-form-group-full {
        grid-column: auto;
    }

    .progression-rule {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .progression-arrow {
        justify-content: flex-start;
        transform: rotate(90deg);
        width: 20px;
    }

    .progression-rule > :last-child {
        grid-column: auto;
    }
}

/* ==========================================================================
   ACADEMIC PROGRESSION - STUDENT DECISION
   ========================================================================== */

.progression-rule-display {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

.progression-rule-class {
    flex: 1;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.progression-rule-class .detail-label {
    display: block;
    margin-bottom: 6px;
}

.progression-rule-class strong {
    color: #172033;
    font-size: 1rem;
}

.progression-rule-arrow {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 1.8rem;
    font-weight: 700;
}

.progression-form-group {
    margin-bottom: 22px;
}

.progression-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.progression-form-group .form-control,
.progression-form-group select,
.progression-form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.progression-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.progression-form-group small {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

.progression-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.field-errors {
    margin-top: 6px;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .progression-rule-display {
        flex-direction: column;
        align-items: stretch;
    }

    .progression-rule-arrow {
        align-self: center;
        transform: rotate(90deg);
    }

    .progression-form-actions {
        flex-direction: column-reverse;
    }

    .progression-form-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   ACADEMIC SETUP MODULE
   Senior Victory College ERP
   ========================================================================== */

/* --------------------------------------------------------------------------
   Academic Setup Landing Page
   -------------------------------------------------------------------------- */

.academic-setup-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f7fbf8 0%, #eef7f1 100%);
    border: 1px solid #dcebe1;
    border-radius: 14px;
}

.academic-setup-hero-content {
    flex: 1;
}

.academic-setup-hero h3 {
    margin: 4px 0 8px;
    font-size: 22px;
    font-weight: 700;
}

.academic-setup-hero p {
    margin: 0;
    max-width: 760px;
    color: #667085;
    line-height: 1.6;
}

.academic-setup-badge {
    min-width: 92px;
    height: 92px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #146c43;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* --------------------------------------------------------------------------
   Setup Dashboard Cards
   -------------------------------------------------------------------------- */

.academic-setup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.academic-setup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.academic-setup-card:hover {
    transform: translateY(-3px);
    border-color: #b7d8c2;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

.academic-setup-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf7f0;
    color: #146c43;
    font-size: 16px;
    font-weight: 800;
}

.academic-setup-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1d2939;
}

.academic-setup-card p {
    margin: 0;
    color: #667085;
    line-height: 1.55;
    font-size: 14px;
}

.academic-setup-card-action {
    margin-top: auto;
    padding-top: 18px;
    color: #146c43;
    font-weight: 700;
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   Academic Setup Summary / Statistics
   -------------------------------------------------------------------------- */

.academic-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.academic-summary-card {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 20px;
}

.academic-summary-label {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academic-summary-value {
    display: block;
    color: #1d2939;
    font-size: 27px;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   Academic Setup Tables
   -------------------------------------------------------------------------- */

.academic-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.academic-table {
    width: 100%;
    border-collapse: collapse;
}

.academic-table th {
    padding: 13px 16px;
    background: #f8faf9;
    border-bottom: 1px solid #e4e7ec;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.academic-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #eaecf0;
    color: #344054;
    vertical-align: middle;
}

.academic-table tbody tr:hover {
    background: #fafcfb;
}

.academic-table tbody tr:last-child td {
    border-bottom: 0;
}


/* --------------------------------------------------------------------------
   Subject / Curriculum / Allocation Identity Cells
   -------------------------------------------------------------------------- */

.academic-record-title {
    display: block;
    color: #1d2939;
    font-weight: 700;
}

.academic-record-meta {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 12px;
}

.academic-class-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

.academic-status-active {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 12px;
    font-weight: 700;
}

.academic-status-inactive {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    background: #f2f4f7;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Academic Forms
   -------------------------------------------------------------------------- */

.academic-form-card {
    max-width: 900px;
}

.academic-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.academic-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.academic-form-group.full-width {
    grid-column: 1 / -1;
}

.academic-form-group label {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.academic-form-group input:not([type="checkbox"]),
.academic-form-group select,
.academic-form-group textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font: inherit;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.academic-form-group textarea {
    min-height: 110px;
    resize: vertical;
}

.academic-form-group input:focus,
.academic-form-group select:focus,
.academic-form-group textarea:focus {
    border-color: #5ca576;
    box-shadow: 0 0 0 3px rgba(20, 108, 67, 0.10);
}

.academic-form-help {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.academic-form-error {
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Checkbox Styling
   -------------------------------------------------------------------------- */

.academic-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.academic-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #146c43;
}

.academic-checkbox-row label {
    margin: 0;
    cursor: pointer;
}


/* --------------------------------------------------------------------------
   Form Actions
   -------------------------------------------------------------------------- */

.academic-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #eaecf0;
}


/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */

.academic-empty-state {
    padding: 52px 24px;
    text-align: center;
}

.academic-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf7f0;
    color: #146c43;
    font-weight: 800;
}

.academic-empty-state h3 {
    margin: 0 0 7px;
    color: #1d2939;
    font-size: 17px;
}

.academic-empty-state p {
    max-width: 540px;
    margin: 0 auto 18px;
    color: #667085;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Page Actions
   -------------------------------------------------------------------------- */

.academic-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}


/* --------------------------------------------------------------------------
   Responsive Academic Setup
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .academic-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academic-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .academic-setup-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .academic-setup-grid,
    .academic-summary-grid,
    .academic-form-grid {
        grid-template-columns: 1fr;
    }

    .academic-form-group.full-width {
        grid-column: auto;
    }

    .academic-page-actions,
    .academic-form-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .academic-page-actions .btn,
    .academic-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   ACADEMIC SETUP — FORM PAGE ENHANCEMENTS
   Complements the core Academic Setup styles above.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Form Page Hero / Configuration Banner
   -------------------------------------------------------------------------- */

.academic-form-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #243d83 0%, #304b9b 100%);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(36, 61, 131, 0.12);
}

.academic-form-hero-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ff8a1f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}

.academic-form-hero-copy {
    flex: 1;
    min-width: 0;
}

.academic-form-hero-copy > span {
    display: block;
    margin-bottom: 3px;
    color: #dbe4ff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.academic-form-hero-copy h3 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.academic-form-hero-copy p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Record State
   -------------------------------------------------------------------------- */

.academic-record-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    margin-bottom: 14px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

.academic-record-state strong {
    color: #243d83;
}


/* --------------------------------------------------------------------------
   Form Card Improvements
   -------------------------------------------------------------------------- */

.academic-form-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.academic-form-card .card-header {
    padding: 16px 18px;
    background: #fbfcfe;
    border-bottom: 1px solid #eaecf0;
}

.academic-form-card .card-body {
    padding: 20px 18px;
}

.academic-form-card .card-title {
    margin: 0;
    color: #101828;
    font-size: 15px;
    font-weight: 700;
}

.academic-form-card .card-subtitle {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   Guidance Panel
   -------------------------------------------------------------------------- */

.academic-guidance-card {
    margin-top: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.academic-guidance-header {
    padding: 15px 18px;
    background: #fbfcfe;
    border-bottom: 1px solid #eaecf0;
}

.academic-guidance-header h3 {
    margin: 0 0 3px;
    color: #101828;
    font-size: 15px;
    font-weight: 700;
}

.academic-guidance-header p {
    margin: 0;
    color: #667085;
    font-size: 12px;
}

.academic-guidance-body {
    padding: 18px;
}

.academic-guidance-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.academic-guidance-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 9px;
}

.academic-guidance-number {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243d83;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.academic-guidance-item strong {
    display: block;
    margin-bottom: 3px;
    color: #101828;
    font-size: 13px;
}

.academic-guidance-item p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Governance / Information Notice
   -------------------------------------------------------------------------- */

.academic-governance-note {
    margin-top: 14px;
    padding: 14px 16px;
    background: #fff8eb;
    border: 1px solid #fedf89;
    border-left: 4px solid #ff8a1f;
    border-radius: 8px;
}

.academic-governance-note strong {
    display: block;
    margin-bottom: 4px;
    color: #7a2e0e;
    font-size: 12px;
}

.academic-governance-note p {
    margin: 0;
    color: #854a0e;
    font-size: 12px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Form Errors
   -------------------------------------------------------------------------- */

.academic-form-errors {
    margin-bottom: 18px;
    padding: 13px 15px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-left: 4px solid #d92d20;
    border-radius: 8px;
}

.academic-form-errors strong {
    display: block;
    margin-bottom: 5px;
    color: #b42318;
    font-size: 13px;
}

.academic-form-errors ul {
    margin: 0;
    padding-left: 18px;
    color: #b42318;
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   Responsive Form Enhancements
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

    .academic-guidance-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {

    .academic-form-hero {
        align-items: flex-start;
        padding: 18px;
    }

    .academic-form-hero-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .academic-form-card {
        max-width: none;
    }
}

@media (max-width: 520px) {

    .academic-form-hero {
        flex-direction: column;
    }

    .academic-guidance-item {
        padding: 12px;
    }
}

/* ==========================================================================
   SUBJECT / ACADEMIC SETUP FORM — TEMPLATE ALIGNMENT
   ========================================================================== */


/* Main academic configuration banner */

.academic-setup-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #243d83 0%, #304b9b 100%);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(36, 61, 131, 0.12);
    color: #ffffff;
}

.academic-setup-banner-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ff8a1f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .5px;
}

.academic-setup-banner-copy {
    flex: 1;
    min-width: 0;
}

.academic-setup-banner-copy > span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .75);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.academic-setup-banner-copy h3 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.academic-setup-banner-copy p {
    margin: 0;
    max-width: 720px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.5;
}

.academic-setup-banner-status {
    min-width: 105px;
    padding: 10px 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
}

.academic-setup-banner-status span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .68);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.academic-setup-banner-status strong {
    color: #ffffff;
    font-size: 14px;
}


/* Two-column form workspace */

.academic-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 20px;
    align-items: start;
}

.academic-form-layout .academic-form-card {
    max-width: none;
    margin: 0;
}

.academic-form-layout .academic-guidance-card {
    margin-top: 0;
}


/* Form field styling used by the actual template */

.erp-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.erp-form-label {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.required-indicator {
    color: #d92d20;
}

.erp-form-group input:not([type="checkbox"]),
.erp-form-group select,
.erp-form-group textarea {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #ffffff;
    color: #101828;
    font: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.erp-form-group input:not([type="checkbox"]):focus,
.erp-form-group select:focus,
.erp-form-group textarea:focus {
    border-color: #304b9b;
    box-shadow: 0 0 0 3px rgba(48, 75, 155, .10);
}

.erp-form-help {
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}

.erp-field-errors {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #b42318;
    font-size: 11px;
    font-weight: 600;
}


/* Non-field validation errors */

.form-error-summary {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-left: 4px solid #d92d20;
    border-radius: 7px;
    color: #b42318;
    font-size: 12px;
}

.form-error-summary strong {
    display: block;
    margin-bottom: 5px;
}


/* Guidance column */

.academic-guidance-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.academic-guidance-card .academic-guidance-item {
    margin: 0;
}


/* Governance notice */

.academic-governance-note {
    margin-top: 4px;
}


/* Better button/action separation */

.academic-form-actions {
    justify-content: flex-start;
}


/* Responsive */

@media (max-width: 1050px) {
    .academic-form-layout {
        grid-template-columns: 1fr;
    }

    .academic-form-layout .academic-guidance-card {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .academic-setup-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .academic-setup-banner-status {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .academic-setup-banner {
        flex-direction: column;
    }

    .academic-setup-banner-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
}

/* ==========================================================================
   ACADEMIC SETUP — SUBJECT REGISTER
   ========================================================================== */

.academic-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.academic-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.academic-table thead th {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e4e7ec;
    color: #475467;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.academic-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #eaecf0;
    color: #344054;
    font-size: 12px;
    vertical-align: middle;
}

.academic-table tbody tr:last-child td {
    border-bottom: 0;
}

.academic-table tbody tr {
    transition: background .15s ease;
}

.academic-table tbody tr:hover {
    background: #fafbff;
}


/* Subject name */

.academic-record-title {
    display: block;
    margin-bottom: 3px;
    color: #101828;
    font-size: 13px;
    font-weight: 700;
}

.academic-record-meta {
    display: block;
    color: #98a2b3;
    font-size: 10px;
}


/* Curriculum usage */

.academic-class-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    background: #eef4ff;
    border: 1px solid #d9e4ff;
    border-radius: 999px;
    color: #304b9b;
    font-size: 10px;
    font-weight: 700;
}


/* Summary card */

.academic-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.academic-summary-card {
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-left: 3px solid #304b9b;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .035);
}

.academic-summary-label {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.academic-summary-value {
    display: block;
    color: #101828;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 800;
}


/* Register action */

.academic-table .table-action-cell {
    text-align: right;
}

.academic-table .table-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #243d83;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.academic-table .table-action-link:hover {
    color: #ff7a00;
}


/* Mobile */

@media (max-width: 720px) {

    .academic-summary-grid {
        grid-template-columns: 1fr;
    }

    .academic-table {
        min-width: 650px;
    }
}

/* ==========================================================================
   ACADEMIC SETUP — CLASS CURRICULUM
   ========================================================================== */

.academic-summary-text {
    display: block;
    color: #101828;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 750;
}

.academic-record-meta-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 6px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 700;
}

.academic-class-record {
    display: flex;
    align-items: center;
    gap: 10px;
}

.academic-class-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef4ff;
    color: #243d83;
    font-size: 12px;
    font-weight: 800;
}


/* Status pills */

.academic-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.academic-status-active {
    background: #ecfdf3;
    border: 1px solid #d1fadf;
    color: #027a48;
}

.academic-status-inactive {
    background: #f2f4f7;
    border: 1px solid #e4e7ec;
    color: #667085;
}


/* Curriculum governance */

.academic-governance-panel {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 20px;
    padding: 16px 18px;
    background: #f8faff;
    border: 1px solid #dbe4ff;
    border-left: 4px solid #304b9b;
    border-radius: 9px;
}

.academic-governance-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #304b9b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.academic-governance-panel strong {
    display: block;
    margin-bottom: 4px;
    color: #243d83;
    font-size: 12px;
}

.academic-governance-panel p {
    max-width: 900px;
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}

/* ==========================================================================
   CURRICULUM FORM
   ========================================================================== */

.academic-checkbox-panel {
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.academic-checkbox-panel .academic-checkbox-row {
    min-height: auto;
}

.academic-checkbox-panel .academic-checkbox-row label {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.academic-checkbox-panel p {
    margin: 7px 0 0 28px;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
}

/* ==========================================================================
   ACADEMIC MODULE IDENTITY BANNER
   Shared by Subjects, Curriculum and Teaching Allocations
   ========================================================================== */

.academic-module-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding: 22px 22px;
    border-radius: 13px;
    background: linear-gradient(
        135deg,
        #243f8f 0%,
        #3150a2 100%
    );
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(36, 63, 143, 0.12);
}

.academic-module-banner-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ff8a00;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.academic-module-banner-content {
    flex: 1;
    min-width: 0;
}

.academic-module-banner-kicker {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.academic-module-banner-content h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
}

.academic-module-banner-content p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.55;
}

.academic-module-banner-stat {
    min-width: 145px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
}

.academic-module-banner-stat span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.academic-module-banner-stat strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}


/* Summary cards can contain either numeric or descriptive values */

.academic-summary-text {
    display: block;
    margin-top: 5px;
    color: #101828;
    font-size: 15px;
    font-weight: 750;
}


/* Responsive module banner */

@media (max-width: 720px) {

    .academic-module-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .academic-module-banner-content {
        flex-basis: calc(100% - 80px);
    }

    .academic-module-banner-stat {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
}

/* ==========================================================================
   ACADEMIC SETUP - CONTROL CENTRE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Command Banner
   -------------------------------------------------------------------------- */

.academic-command-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px 26px;
    background: linear-gradient(135deg, #203f8f 0%, #3152a3 100%);
    border: 1px solid #294997;
    border-radius: 14px;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(31, 63, 143, 0.12);
}

.academic-command-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: #ff8a00;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.academic-command-content {
    min-width: 0;
}

.academic-command-kicker {
    display: block;
    margin-bottom: 5px;
    color: #dbe5ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academic-command-content h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 750;
}

.academic-command-content p {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.6;
}

.academic-command-side {
    min-width: 175px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    text-align: right;
}

.academic-command-side span {
    display: block;
    margin-bottom: 4px;
    color: #dbe5ff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.academic-command-side strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
}


/* --------------------------------------------------------------------------
   Summary Enhancements
   -------------------------------------------------------------------------- */

.academic-summary-note {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 11px;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Configuration Control Cards
   -------------------------------------------------------------------------- */

.academic-control-section {
    margin-bottom: 22px;
}

.academic-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: #294a9b;
    font-size: 10px;
    font-weight: 700;
}

.academic-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.academic-control-card {
    display: flex;
    flex-direction: column;
    min-height: 290px;
    padding: 20px;
    border: 1px solid #e1e5ec;
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.academic-control-card:hover {
    transform: translateY(-3px);
    border-color: #aebde1;
    box-shadow: 0 10px 26px rgba(25, 45, 95, 0.09);
}

.academic-control-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.academic-control-step {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.academic-control-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef7f1;
    color: #147548;
    font-size: 13px;
    font-weight: 800;
}

.academic-control-kicker {
    display: block;
    margin-bottom: 5px;
    color: #e87300;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.academic-control-card h3 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 17px;
}

.academic-control-card p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}

.academic-control-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.academic-control-metric span {
    color: #667085;
    font-size: 10px;
    font-weight: 650;
}

.academic-control-metric strong {
    color: #1f3f8f;
    font-size: 17px;
}

.academic-control-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 17px;
    color: #1f3f8f;
    font-size: 11px;
    font-weight: 750;
}

.academic-control-action span {
    font-size: 17px;
    transition: transform 0.18s ease;
}

.academic-control-card:hover .academic-control-action span {
    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   Workflow
   -------------------------------------------------------------------------- */

.academic-workflow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.academic-workflow-step {
    display: flex;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fafbfc;
}

.academic-workflow-number {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #233f8f;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.academic-workflow-step strong {
    display: block;
    margin-bottom: 4px;
    color: #101828;
    font-size: 11px;
}

.academic-workflow-step p {
    margin: 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.academic-workflow-arrow {
    align-self: center;
    color: #98a2b3;
    font-size: 17px;
}


/* --------------------------------------------------------------------------
   Governance
   -------------------------------------------------------------------------- */

.academic-governance-card {
    margin-top: 22px;
}

.academic-governance-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff4e8;
    color: #c45d00;
    font-size: 10px;
    font-weight: 700;
}

.academic-governance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.academic-governance-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
}

.academic-governance-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #eef7f1;
    color: #147548;
    font-size: 10px;
    font-weight: 800;
}

.academic-governance-item strong {
    display: block;
    margin-bottom: 4px;
    color: #101828;
    font-size: 11px;
}

.academic-governance-item p {
    margin: 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .academic-control-grid {
        grid-template-columns: 1fr;
    }

    .academic-control-card {
        min-height: 0;
    }

    .academic-workflow {
        grid-template-columns: 1fr;
    }

    .academic-workflow-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .academic-governance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {

    .academic-command-banner {
        grid-template-columns: 1fr;
    }

    .academic-command-side {
        width: 100%;
        text-align: left;
    }

    .academic-summary-grid {
        grid-template-columns: 1fr;
    }

    .academic-control-grid {
        padding: 12px;
    }
}

/* ==========================================================================
   ACADEMIC PROGRESSION ERP
   ========================================================================== */


/* --------------------------------------------------------------------------
   Command Banner
   -------------------------------------------------------------------------- */

.academic-command-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    margin-bottom: 22px;

    background:
        linear-gradient(
            135deg,
            #233f8f 0%,
            #304da0 100%
        );

    border-radius: 14px;
    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(35, 63, 143, 0.14);
}


.academic-command-banner-icon {
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #ff8a00;
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
}


.academic-command-banner-content {
    flex: 1;
    min-width: 0;
}


.academic-command-kicker {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}


.academic-command-banner-content h3 {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 750;
}


.academic-command-banner-content p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 13px;
    line-height: 1.6;
}


.academic-command-banner-stat {
    flex: 0 0 auto;

    min-width: 155px;

    padding: 13px 16px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    text-align: center;
}


.academic-command-banner-stat span {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.academic-command-banner-stat strong {
    display: block;

    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   Progression Summary Cards
   -------------------------------------------------------------------------- */

.academic-summary-meta {
    display: block;

    margin-top: 5px;

    color: #667085;

    font-size: 11px;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Section Cards
   -------------------------------------------------------------------------- */

.academic-section-card {
    margin-bottom: 22px;
}


.academic-section-pill {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border: 1px solid #d9e1f5;
    border-radius: 999px;

    background: #f3f6ff;
    color: #294795;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* --------------------------------------------------------------------------
   Progression Workflow
   -------------------------------------------------------------------------- */

.progression-workflow {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.progression-workflow-step {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    min-height: 105px;

    padding: 16px;

    border: 1px solid #e1e6ef;
    border-radius: 10px;

    background: #fafbfc;
}


.progression-workflow-number {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #294795;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}


.progression-workflow-step strong {
    display: block;

    margin: 2px 0 5px;

    color: #101828;

    font-size: 13px;
}


.progression-workflow-step p {
    margin: 0;

    color: #667085;

    font-size: 11px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Class Progression Structure
   -------------------------------------------------------------------------- */

.progression-path {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.progression-rule {
    display: grid;

    grid-template-columns:
        1.05fr
        1fr
        42px
        1fr
        auto;

    align-items: center;

    gap: 14px;

    padding: 13px 15px;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    background: #ffffff;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.progression-rule:hover {
    border-color: #c7d2eb;

    box-shadow:
        0 4px 14px rgba(16, 24, 40, 0.05);
}


.progression-section span,
.progression-class span,
.progression-destination span {
    display: block;

    margin-bottom: 3px;

    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.progression-section strong,
.progression-class strong,
.progression-destination strong {
    color: #101828;

    font-size: 12px;
    font-weight: 700;
}


.progression-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #294795;

    font-size: 20px;
    font-weight: 700;
}


.progression-graduation {
    color: #147a4b !important;
}


.progression-rule-status {
    display: flex;
    justify-content: flex-end;
}


.progression-terminal-badge,
.academic-status-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}


.academic-status-badge {
    background: #f1f4ff;
    color: #294795;
}


.progression-terminal-badge {
    background: #ecf8f1;
    color: #147a4b;
}


/* --------------------------------------------------------------------------
   Progression Statuses
   -------------------------------------------------------------------------- */

.progression-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
}


.progression-status-draft {
    background: #fff4e5;
    color: #b54708;
}


.progression-status-reviewed {
    background: #eef4ff;
    color: #294795;
}


.progression-status-applied {
    background: #ecfdf3;
    color: #027a48;
}


.progression-status-cancelled {
    background: #fef3f2;
    color: #b42318;
}


/* --------------------------------------------------------------------------
   Progression Governance
   -------------------------------------------------------------------------- */

.progression-governance-panel {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 18px;

    border: 1px solid #dce5f7;
    border-radius: 10px;

    background: #f7f9ff;
}


.progression-governance-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #294795;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}


.progression-governance-panel strong {
    display: block;

    margin-bottom: 6px;

    color: #101828;

    font-size: 13px;
}


.progression-governance-panel p {
    margin: 4px 0;

    color: #667085;

    font-size: 12px;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Responsive Progression Layout
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .progression-workflow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .progression-rule {
        grid-template-columns:
            1fr
            1fr
            36px
            1fr;
    }


    .progression-rule-status {
        grid-column: 1 / -1;

        justify-content: flex-start;
    }

}


@media (max-width: 720px) {

    .academic-command-banner {
        align-items: flex-start;
        flex-direction: column;
    }


    .academic-command-banner-stat {
        width: 100%;
    }


    .progression-workflow {
        grid-template-columns: 1fr;
    }


    .progression-rule {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .progression-arrow {
        justify-content: flex-start;

        transform: rotate(90deg);
    }


    .progression-rule-status {
        grid-column: auto;
    }

}

/* ==========================================================================
   PROGRESSION BATCH CREATION
   ========================================================================== */


/* --------------------------------------------------------------------------
   Creation Notice
   -------------------------------------------------------------------------- */

.progression-create-notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-bottom: 22px;
    padding: 18px 20px;

    border: 1px solid #d9e4f6;
    border-left: 4px solid #294795;
    border-radius: 10px;

    background: #f8faff;
}


.progression-create-notice-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef3ff;
    color: #294795;

    font-size: 12px;
    font-weight: 800;
}


.progression-create-notice-kicker {
    display: block;

    margin-bottom: 4px;

    color: #294795;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}


.progression-create-notice h3 {
    margin: 0 0 5px;

    color: #101828;

    font-size: 14px;
    font-weight: 750;
}


.progression-create-notice p {
    max-width: 900px;

    margin: 0;

    color: #667085;

    font-size: 12px;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Create Batch Form
   -------------------------------------------------------------------------- */

.progression-create-card {
    margin-bottom: 22px;
}


.progression-create-card .card-body {
    padding: 24px;
}


.progression-create-form-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        130px
        minmax(0, 1fr);

    align-items: start;

    gap: 18px;

    margin-bottom: 22px;
}


/* --------------------------------------------------------------------------
   Academic Year Transition
   -------------------------------------------------------------------------- */

.progression-transition-indicator {
    align-self: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 92px;

    padding: 10px;

    text-align: center;
}


.progression-transition-indicator span {
    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.progression-transition-indicator strong {
    margin: 3px 0;

    color: #294795;

    font-size: 27px;
    line-height: 1;
}


.progression-transition-indicator small {
    color: #667085;

    font-size: 10px;
}


/* --------------------------------------------------------------------------
   Source Class
   -------------------------------------------------------------------------- */

.progression-source-class-panel {
    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    align-items: start;

    gap: 15px;

    margin-bottom: 22px;
    padding: 18px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #fafbfc;
}


.progression-source-class-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef3ff;
    color: #294795;

    font-size: 12px;
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   Notes
   -------------------------------------------------------------------------- */

.progression-notes-field {
    margin-top: 4px;
}


.progression-notes-field textarea {
    min-height: 105px;
}


/* --------------------------------------------------------------------------
   Django Form Widgets
   -------------------------------------------------------------------------- */

.progression-create-card select,
.progression-create-card input[type="text"],
.progression-create-card textarea {
    width: 100%;

    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .progression-create-form-grid {
        grid-template-columns: 1fr;
    }


    .progression-transition-indicator {
        min-height: auto;

        padding: 2px 0 4px;

        align-items: flex-start;

        text-align: left;
    }


    .progression-transition-indicator strong {
        transform: rotate(90deg);

        margin-left: 8px;
    }

}


@media (max-width: 720px) {

    .progression-create-notice {
        flex-direction: column;
    }


    .progression-source-class-panel {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   PROGRESSION BATCH CONTROL CENTRE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Batch Summary
   -------------------------------------------------------------------------- */

.progression-batch-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}


/* --------------------------------------------------------------------------
   Normal Progression Route
   -------------------------------------------------------------------------- */

.progression-batch-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
    align-items: center;
    gap: 18px;

    padding: 22px;

    border: 1px solid #e1e6ef;
    border-radius: 12px;

    background: #fafbfc;
}


.progression-batch-route-class {
    padding: 17px 19px;

    border: 1px solid #dfe4ec;
    border-radius: 10px;

    background: #ffffff;
}


.progression-batch-route-class.destination {
    border-color: #cbd8f3;
    background: #f7f9ff;
}


.progression-batch-route-class span {
    display: block;

    margin-bottom: 5px;

    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.55px;
}


.progression-batch-route-class strong {
    color: #101828;

    font-size: 16px;
    font-weight: 800;
}


.progression-batch-route-arrow {
    text-align: center;
}


.progression-batch-route-arrow span {
    display: block;

    margin-bottom: 3px;

    color: #667085;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.45px;
}


.progression-batch-route-arrow strong {
    color: #294795;

    font-size: 30px;
    font-weight: 700;
}


.progression-route-note {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 12px;
    padding: 11px 14px;

    border-radius: 8px;

    background: #f6f8fc;
}


.progression-route-note strong {
    color: #344054;

    font-size: 11px;
}


.progression-route-note span {
    color: #667085;

    font-size: 11px;
}


/* --------------------------------------------------------------------------
   Student Register
   -------------------------------------------------------------------------- */

.progression-student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}


.progression-student-avatar {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef3ff;
    color: #294795;

    font-size: 10px;
    font-weight: 800;
}


.progression-student-cell strong {
    display: block;

    color: #101828;

    font-size: 12px;
}


.progression-student-cell span {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 10px;
}


.progression-admission-number {
    font-size: 11px;
    font-weight: 700;
    color: #344054;
}


.progression-target-class {
    color: #344054;
    font-size: 11px;
}


.progression-decision-reason {
    display: block;

    max-width: 260px;

    color: #667085;

    font-size: 11px;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Decision Badges
   -------------------------------------------------------------------------- */

.progression-decision-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}


.progression-decision-promote {
    background: #ecfdf3;
    color: #027a48;
}


.progression-decision-repeat {
    background: #fff4e5;
    color: #b54708;
}


.progression-decision-hold {
    background: #f2f4f7;
    color: #475467;
}


.progression-decision-stop {
    background: #fef3f2;
    color: #b42318;
}


.progression-decision-graduate {
    background: #eef4ff;
    color: #294795;
}


.progression-locked-label {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 6px;

    background: #f2f4f7;
    color: #98a2b3;

    font-size: 9px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Batch Notes
   -------------------------------------------------------------------------- */

.progression-batch-notes {
    padding: 15px 17px;

    border-left: 3px solid #294795;

    background: #f8faff;

    color: #475467;

    font-size: 12px;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Governance Workflow
   -------------------------------------------------------------------------- */

.progression-governance-workflow {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 22px;
}


.progression-governance-stage {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    min-height: 76px;

    padding: 13px;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    background: #fafbfc;
}


.progression-governance-stage-number {
    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaecf0;
    color: #667085;

    font-size: 9px;
    font-weight: 800;
}


.progression-governance-stage strong {
    display: block;

    margin: 1px 0 3px;

    color: #344054;

    font-size: 11px;
}


.progression-governance-stage p {
    margin: 0;

    color: #98a2b3;

    font-size: 10px;
    line-height: 1.4;
}


.progression-governance-stage.complete {
    border-color: #ccebd9;
    background: #f5fbf7;
}


.progression-governance-stage.complete
.progression-governance-stage-number {
    background: #147a4b;
    color: #ffffff;
}


.progression-governance-stage.active {
    border-color: #cad7f3;
}


.progression-governance-stage.active
.progression-governance-stage-number {
    background: #294795;
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Governance Actions
   -------------------------------------------------------------------------- */

.progression-governance-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    padding: 21px;

    border-radius: 11px;
}


.progression-review-action {
    border: 1px solid #d5def2;
    background: #f7f9ff;
}


.progression-apply-action {
    border: 1px solid #f1d0cc;
    background: #fff8f7;
}


.progression-governance-action-copy {
    flex: 1;
}


.progression-governance-action-kicker {
    display: block;

    margin-bottom: 5px;

    color: #294795;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}


.progression-governance-action h4 {
    margin: 0 0 6px;

    color: #101828;

    font-size: 14px;
}


.progression-governance-action p {
    max-width: 720px;

    margin: 0;

    color: #667085;

    font-size: 11px;
    line-height: 1.55;
}


.progression-governance-warning {
    display: inline-block;

    margin-top: 10px;
    padding: 7px 10px;

    border-radius: 6px;

    background: #eef3ff;
    color: #294795;

    font-size: 10px;
    font-weight: 700;
}


.progression-critical-warning {
    display: flex;
    flex-direction: column;
    gap: 3px;

    max-width: 700px;

    margin-top: 12px;
    padding: 10px 12px;

    border-left: 3px solid #b42318;

    background: #fff1f0;
}


.progression-critical-warning strong {
    color: #b42318;

    font-size: 10px;
    text-transform: uppercase;
}


.progression-critical-warning span {
    color: #7a271a;

    font-size: 10px;
    line-height: 1.5;
}


.progression-governance-action-button {
    flex: 0 0 auto;
}


.progression-apply-button {
    border-color: #b42318 !important;

    background: #b42318 !important;
    color: #ffffff !important;
}


.progression-apply-button:hover {
    background: #912018 !important;
}


/* --------------------------------------------------------------------------
   Applied Batch
   -------------------------------------------------------------------------- */

.progression-completed-panel {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 19px;

    border: 1px solid #b7e4c9;
    border-radius: 10px;

    background: #f3fbf6;
}


.progression-completed-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #147a4b;
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.progression-completed-panel span {
    display: block;

    margin-bottom: 3px;

    color: #147a4b;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.progression-completed-panel h4 {
    margin: 0 0 5px;

    color: #101828;

    font-size: 14px;
}


.progression-completed-panel p {
    margin: 0 0 5px;

    color: #475467;

    font-size: 11px;
}


.progression-completed-panel small {
    color: #667085;
    font-size: 10px;
}


/* --------------------------------------------------------------------------
   Audit Information
   -------------------------------------------------------------------------- */

.progression-audit-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.progression-audit-item {
    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    background: #fafbfc;
}


.progression-audit-item span {
    display: block;

    margin-bottom: 5px;

    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.45px;
}


.progression-audit-item strong {
    color: #344054;

    font-size: 11px;
}


/* --------------------------------------------------------------------------
   Responsive Batch Control Centre
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .progression-batch-summary-grid,
    .progression-audit-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .progression-governance-workflow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .progression-batch-route {
        grid-template-columns: 1fr;
    }


    .progression-batch-route-arrow {
        text-align: left;
    }


    .progression-batch-route-arrow strong {
        display: inline-block;
        transform: rotate(90deg);
    }


    .progression-governance-action {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 720px) {

    .progression-batch-summary-grid,
    .progression-audit-grid,
    .progression-governance-workflow {
        grid-template-columns: 1fr;
    }


    .progression-route-note {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ==========================================================================
   STUDENT PROGRESSION DECISION
   ========================================================================== */

.progression-decision-form {
    margin-top: 22px;
}

.progression-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.progression-decision-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progression-decision-field.full-width {
    grid-column: 1 / -1;
}

.progression-decision-field label {
    color: #1d2939;
    font-size: 13px;
    font-weight: 700;
}

.progression-decision-field select,
.progression-decision-field input,
.progression-decision-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cfd7e6;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font: inherit;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.progression-decision-field textarea {
    min-height: 100px;
    resize: vertical;
}

.progression-decision-field select:focus,
.progression-decision-field input:focus,
.progression-decision-field textarea:focus {
    border-color: #3155ad;
    box-shadow: 0 0 0 3px rgba(49, 85, 173, 0.10);
}

.progression-field-help {
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}


/* Decision Guidance */

.progression-decision-guidance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #eaecf0;
}

.progression-decision-guidance > div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    background: #f8faff;
    border: 1px solid #e0e7f4;
    border-radius: 9px;
}

.progression-guidance-code {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #29489c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.progression-decision-guidance strong {
    display: block;
    margin-bottom: 3px;
    color: #101828;
    font-size: 12px;
}

.progression-decision-guidance p {
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}


/* Governance Footer */

.progression-governance-strip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid #dce5f4;
    border-radius: 11px;
    background: #f8faff;
}

.progression-governance-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #29489c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.progression-governance-strip > div:last-child > span {
    display: block;
    margin-bottom: 4px;
    color: #29489c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.progression-governance-strip strong {
    display: block;
    color: #101828;
    font-size: 13px;
}

.progression-governance-strip p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}


/* Form Errors */

.progression-decision-field .field-errors,
.progression-decision-field .errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}


/* Responsive */

@media (max-width: 1050px) {

    .progression-decision-guidance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .progression-decision-grid,
    .progression-decision-guidance {
        grid-template-columns: 1fr;
    }

    .progression-decision-field.full-width {
        grid-column: auto;
    }

    .progression-governance-strip {
        flex-direction: column;
    }
}

/* ==========================================================================
   ACADEMIC SETUP - COMMAND BANNER
   ========================================================================== */

.academic-command-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px 26px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #24438f 0%,
        #3155ad 100%
    );
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(36, 67, 143, 0.14);
}

.academic-command-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ff8a00;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.academic-command-content {
    flex: 1;
    min-width: 0;
}

.academic-command-kicker {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.academic-command-content h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 750;
}

.academic-command-content p {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, 0.91);
    line-height: 1.55;
}

.academic-command-status {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
}

.academic-command-status span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.academic-command-status strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
}


/* ==========================================================================
   TEACHING ALLOCATION WORKSPACE
   ========================================================================== */

.academic-allocation-workspace {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.academic-allocation-form-card {
    min-width: 0;
}


/* ==========================================================================
   ACTIVE ALLOCATION CONTROL
   ========================================================================== */

.academic-allocation-status-control {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #dcebe1;
    border-radius: 10px;
    background: #f7fbf8;
}

.academic-allocation-status-control p {
    margin: 7px 0 0 28px;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================================
   ALLOCATION GUIDANCE
   ========================================================================== */

.academic-allocation-guidance {
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
}

.academic-allocation-guidance-header {
    padding: 20px;
    border-bottom: 1px solid #eaecf0;
}

.academic-allocation-guidance-header h3 {
    margin: 4px 0 7px;
    color: #101828;
    font-size: 17px;
}

.academic-allocation-guidance-header p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
}

.academic-guidance-step {
    display: flex;
    gap: 12px;
    padding: 17px 20px;
    border-bottom: 1px solid #eaecf0;
}

.academic-guidance-number {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #24438f;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.academic-guidance-step strong {
    display: block;
    margin-bottom: 4px;
    color: #1d2939;
    font-size: 13px;
}

.academic-guidance-step p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.academic-allocation-governance {
    padding: 18px 20px;
    background: #f8faff;
}

.academic-allocation-governance strong {
    display: block;
    margin-bottom: 7px;
    color: #24438f;
    font-size: 13px;
}

.academic-allocation-governance p {
    margin: 0 0 8px;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}

.academic-allocation-governance p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TEACHING ALLOCATION RESPONSIVE
   ========================================================================== */

@media (max-width: 1050px) {

    .academic-allocation-workspace {
        grid-template-columns: 1fr;
    }

    .academic-allocation-guidance {
        order: 2;
    }
}

@media (max-width: 720px) {

    .academic-command-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 20px;
    }

    .academic-command-status {
        width: 100%;
    }

    .academic-allocation-status-control p {
        margin-left: 0;
    }
}

/* ========================================================================
   STUDENT MANAGEMENT — REGISTER HERO
   ======================================================================== */

.student-management-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    margin-bottom: 1.35rem;
    padding: 1.6rem 1.8rem;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #263f8f 0%,
            #3156b2 100%
        );

    border-radius: 14px;

    box-shadow:
        0 10px 26px rgba(30, 55, 125, 0.10);
}


.student-management-hero-main {
    display: flex;
    align-items: center;
    gap: 1.15rem;

    min-width: 0;
}


.student-management-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 12px;

    background: #ff8a00;

    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}


.student-management-hero-kicker {
    display: block;

    margin-bottom: 0.35rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.student-management-hero h3 {
    margin: 0 0 0.4rem;

    color: #ffffff;

    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.25;
}


.student-management-hero p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 0.82rem;
    line-height: 1.55;
}


.student-management-hero-meta {
    min-width: 175px;

    padding: 0.9rem 1.1rem;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
}


.student-management-hero-meta span {
    display: block;

    margin-bottom: 0.3rem;

    color: rgba(255, 255, 255, 0.76);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.student-management-hero-meta strong {
    display: block;

    color: #ffffff;

    font-size: 1.08rem;
    font-weight: 800;
}


/* ========================================================================
   RESPONSIVE STUDENT HERO
   ======================================================================== */

@media (max-width: 850px) {

    .student-management-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-management-hero-meta {
        width: 100%;
        min-width: 0;

        text-align: left;
    }

}


@media (max-width: 560px) {

    .student-management-hero {
        padding: 1.25rem;
    }

    .student-management-hero-main {
        align-items: flex-start;
    }

    .student-management-hero-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

}