/* =====================================================

   SBAMS — STUDENT BILLING AND ASSESSMENT MANAGEMENT

   Main stylesheet

   Theme: Navy Blue, Gold, and White

   ===================================================== */



/* ---------- 1. GLOBAL RESET ---------- */



:root {

    --navy: #102f59;

    --navy-dark: #0b2342;

    --navy-light: #194878;

    --gold: #ffbf2f;

    --gold-dark: #e9a914;

    --white: #ffffff;

    --background: #f3f5f9;

    --text: #172b45;

    --muted: #718096;

    --border: #dbe3ee;

    --success: #168653;

    --danger: #c93636;

    --shadow: 0 20px 55px rgba(15, 39, 70, 0.10);

    --radius: 16px;

}



* {

    box-sizing: border-box;

}



html {

    min-height: 100%;

    scroll-behavior: smooth;

}



body {

    margin: 0;

    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--text);

    background: var(--background);

    font-size: 14px;

    line-height: 1.6;

}



button,

input,

select,

textarea {

    font: inherit;

}



button {

    cursor: pointer;

}



button:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



img {

    max-width: 100%;

}



a {

    color: var(--navy);

    text-decoration: none;

}



a:hover {

    color: var(--gold-dark);

}



.app-shell,
.app-layout {

    display: flex;

    width: 100%;

    min-height: 100vh;

    background: var(--background);

}



.main,
.main-content {

    flex: 1 1 auto;

    min-width: 0;

    padding: 30px;

    background: var(--background);

}



.sidebar {

    position: sticky;

    top: 0;

    display: flex;

    flex-direction: column;

    flex: 0 0 250px;

    width: 250px;

    min-height: 100vh;

    padding: 24px 16px;

    color: var(--white);

    background: var(--navy-dark);

}



.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 4px 6px 10px;

    color: var(--white);

}



.brand img {

    display: block;

    width: 42px;

    height: 42px;

    object-fit: contain;

    border-radius: 12px;

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

}



.brand span {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.brand b {

    color: var(--white);

    font-size: 17px;

    font-weight: 800;

}



.brand small {

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

    font-size: 10px;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}



.nav-label {

    margin: 18px 8px 8px;

    color: rgba(214, 228, 245, 0.8);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}



.nav-link {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 42px;

    padding: 10px 12px;

    color: #dfeaf7;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    transition: background 0.2s ease, color 0.2s ease;

}



.nav-link:hover,
.nav-link.active {

    color: var(--white);

    background: #1c4778;

}



.sidebar-bottom {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 16px;

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

}



.avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    color: var(--navy-dark);

    background: var(--gold);

    border-radius: 50%;

    font-weight: 800;

}



.user-mini {

    flex: 1;

    min-width: 0;

    color: var(--white);

}



.user-mini b,
.user-mini small {

    display: block;

    color: inherit;

}



.user-mini b {

    overflow-wrap: anywhere;

    font-size: 12px;

}



.user-mini small {

    opacity: 0.75;

    font-size: 10px;

    text-transform: capitalize;

}



.logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    color: var(--white);

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

    border-radius: 50%;

}



.logout:hover {

    color: var(--white);

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

}



.top-user {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    color: var(--navy-dark);

    background: rgba(16, 47, 89, 0.05);

    border: 1px solid rgba(16, 47, 89, 0.08);

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

}



.status-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    background: var(--success);

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(22, 134, 83, 0.12);

}



.content {

    width: 100%;

}



h1,

h2,

h3,

h4,

p {

    margin-top: 0;

}



h1,

h2,

h3,

h4 {

    line-height: 1.25;

    color: var(--navy-dark);

}



::selection {

    color: var(--navy-dark);

    background: #ffe29a;

}



:focus-visible {

    outline: 3px solid rgba(255, 191, 47, 0.8);

    outline-offset: 3px;

}



/* ---------- 2. LOGIN PAGE ---------- */



.login-page {

    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    isolation: isolate;

    background: var(--background);

}



/*

   Full-width navy background.

   The diagonal stays below the introductory content.

   Do not use a negative z-index on this element.

*/



.login-background {

    position: absolute;

    inset: 0 0 auto;

    height: 700px;

    z-index: -1;

    pointer-events: none;

    background: linear-gradient(

        125deg,

        var(--navy-dark) 0%,

        var(--navy) 55%,

        var(--navy-light) 100%

    );

    clip-path: polygon(

        0 0,

        100% 0,

        100% 54%,

        0 100%

    );

}



.login-wrap {

    position: relative;

    z-index: 1;

    width: min(1020px, calc(100% - 64px));

    min-height: 100vh;

    margin: 0 auto;

    padding: 64px 0;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);

    align-items: center;

    gap: clamp(36px, 5vw, 72px);

}



/* ---------- 3. LOGIN INTRODUCTION ---------- */



.login-intro {

    position: relative;

    z-index: 2;

    align-self: center;

    min-width: 0;

    color: var(--white);

    padding: 10px 0 30px;

}



.login-intro > img {

    display: block;

    width: 112px;

    height: 112px;

    padding: 7px;

    object-fit: contain;

    object-position: center;

    margin: 0 0 18px;

    background: #ffffff;

    border: 1px solid rgba(255, 191, 47, 0.75);

    border-radius: 18px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);

}



.eyebrow {

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.5;

}



.login-intro h1 {

    max-width: 540px;

    margin: 0 0 18px;

    color: var(--white);

    font-size: clamp(34px, 4vw, 49px);

    font-weight: 800;

    letter-spacing: -1.5px;

    line-height: 1.12;

    overflow-wrap: break-word;

}



.login-intro h1 span {

    color: var(--gold);

}



.login-intro > p {

    max-width: 410px;

    margin: 0 0 26px;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.9;

}



.login-points {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    margin-top: 24px;

}



.login-points span {

    display: block;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.8;

    opacity: 1;

}



.login-points span::first-letter {

    color: var(--gold);

}



/* ---------- 4. LOGIN CARD ---------- */



.login-card {

    position: relative;

    z-index: 3;

    width: 100%;

    min-width: 0;

    padding: 32px;

    color: var(--text);

    background: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.card-top {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 28px;

}



.mini-mark {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    color: var(--navy-dark);

    background: #f2b323;

    border-radius: 12px;

    font-size: 23px;

    font-weight: 900;

}



.card-top h2 {

    margin: 0 0 3px;

    color: var(--navy-dark);

    font-size: 22px;

    font-weight: 800;

}



.card-top p {

    margin: 0;

    color: var(--muted);

    font-size: 11px;

}



/* ---------- 5. FORM ELEMENTS ---------- */



.login-card form,

.modal form {

    width: 100%;

}



label {

    display: block;

    margin: 0 0 7px;

    color: #243c5b;

    font-size: 11px;

    font-weight: 700;

}



input,

select,

textarea {

    display: block;

    width: 100%;

    min-width: 0;

    min-height: 43px;

    padding: 11px 12px;

    color: var(--text);

    background: var(--white);

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

    border-radius: 7px;

    outline: none;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



input::placeholder,

textarea::placeholder {

    color: #8491a3;

    opacity: 1;

}



input:focus,

select:focus,

textarea:focus {

    border-color: #5684c0;

    box-shadow: 0 0 0 3px rgba(55, 110, 180, 0.13);

}



.login-card form > input,

.modal form > input {

    margin-bottom: 15px;

}



textarea {

    min-height: 100px;

    resize: vertical;

}



/* ---------- 6. CAPTCHA ---------- */



.captcha-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    align-items: end;

    margin: 2px 0 24px;

}



.captcha-row > div {

    min-width: 0;

}



.captcha-code {

    display: flex;

    min-height: 43px;

    align-items: center;

    justify-content: center;

    padding: 8px;

    color: var(--navy);

    background: #f1f5fa;

    border: 1px dashed #b6c8e0;

    border-radius: 7px;

    font-size: 19px;

    font-weight: 900;

    letter-spacing: 4px;

    overflow-wrap: anywhere;

    user-select: none;

}



.captcha-input input {

    min-width: 0;

}



/* ---------- 7. BUTTONS ---------- */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 43px;

    padding: 11px 18px;

    border: 1px solid transparent;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 800;

    text-align: center;

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        transform 0.2s ease,

        box-shadow 0.2s ease;

}



.btn.primary {

    color: var(--white);

    background: var(--navy);

    box-shadow: 0 4px 10px rgba(16, 47, 89, 0.12);

}



.btn.primary:hover {

    background: var(--navy-dark);

    box-shadow: 0 6px 16px rgba(16, 47, 89, 0.2);

    transform: translateY(-1px);

}



.btn.full {

    width: 100%;

}



.btn.secondary {

    color: var(--navy);

    background: var(--white);

    border-color: var(--border);

}



.btn.secondary:hover {

    background: #f4f7fb;

    border-color: #b7c8dd;

}



.btn.gold {

    color: var(--navy-dark);

    background: var(--gold);

}



.btn.gold:hover {

    background: var(--gold-dark);

}



.text-button {

    display: inline;

    padding: 0;

    color: #064b96;

    background: transparent;

    border: 0;

    font-size: inherit;

    font-weight: 800;

}



.text-button:hover {

    color: var(--gold-dark);

    text-decoration: underline;

}



/* ---------- 8. LOGIN FOOTER ---------- */



.login-bottom {

    margin-top: 22px;

    color: #687c97;

    font-size: 11px;

    text-align: center;

}

.demo-access {

    display: grid;

    gap: 4px;

    margin-top: 18px;

    padding: 12px 14px;

    color: #243c5b;

    background: #f3f6fa;

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

    border-radius: 8px;

    font-size: 11px;

}

.demo-access strong {

    color: var(--navy-dark);

    font-size: 12px;

}

.demo-access small {

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;

}

.security-note {

    margin-top: 20px;

    padding-top: 15px;

    color: #8493a8;

    border-top: 1px solid #e8edf4;

    font-size: 10px;

    text-align: center;

}



/* ---------- 9. ALERT MESSAGES ---------- */



.alert {

    margin: 0 0 18px;

    padding: 11px 13px;

    border: 1px solid transparent;

    border-radius: 7px;

    font-size: 12px;

    line-height: 1.6;

    overflow-wrap: anywhere;

}



.alert.error {

    color: #9e2626;

    background: #fff0f0;

    border-color: #f4cccc;

}



.alert.success {

    color: #126b42;

    background: #eaf8f0;

    border-color: #c5ead4;

}



.alert.warning {

    color: #875c0a;

    background: #fff8e5;

    border-color: #f4e0a8;

}



.alert.info {

    color: #174a7e;

    background: #edf5ff;

    border-color: #d1e4fa;

}



/* ---------- 10. REGISTRATION MODAL ---------- */



.modal-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    overflow-y: auto;

    background: rgba(7, 23, 44, 0.68);

    backdrop-filter: blur(4px);

}



.modal-backdrop.active,

.modal-backdrop.show {

    display: flex;

}



.modal {

    position: relative;

    width: min(100%, 440px);

    max-height: calc(100vh - 40px);

    padding: 30px;

    overflow-y: auto;

    color: var(--text);

    background: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: var(--radius);

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.24);

    animation: modal-appear 0.2s ease-out;

}



.modal h2 {

    margin: 0 0 8px;

    color: var(--navy-dark);

    font-size: 25px;

    font-weight: 800;

}



.modal .eyebrow {

    margin-bottom: 10px;

}



.modal .muted {

    margin-bottom: 22px;

    color: var(--muted);

    font-size: 12px;

}



.modal-close {

    position: absolute;

    top: 12px;

    right: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    padding: 0;

    color: #65758b;

    background: #f2f5f9;

    border: 0;

    border-radius: 50%;

    font-size: 23px;

    line-height: 1;

}



.modal-close:hover {

    color: var(--navy);

    background: #e6edf5;

}



@keyframes modal-appear {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ---------- 11. GENERAL APPLICATION LAYOUT ---------- */



.app-layout {

    display: flex;

    min-height: 100vh;

    background: var(--background);

}



.sidebar {

    position: sticky;

    top: 0;

    display: flex;

    flex-direction: column;

    flex: 0 0 250px;

    width: 250px;

    height: 100vh;

    padding: 24px 16px;

    overflow-y: auto;

    color: var(--white);

    background: var(--navy-dark);

}



.sidebar img {

    display: block;

    width: 68px;

    height: 68px;

    margin: 0 auto 12px;

    object-fit: contain;

}



.sidebar h2,

.sidebar .brand-name {

    margin: 0 0 28px;

    color: var(--white);

    font-size: 17px;

    font-weight: 800;

    text-align: center;

}



.sidebar nav {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.sidebar nav a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    color: #d8e4f2;

    border-radius: 7px;

    font-size: 13px;

    transition: background 0.2s ease;

}



.sidebar nav a:hover,

.sidebar nav a.active {

    color: var(--white);

    background: #1c4778;

}



.sidebar nav a.active {

    box-shadow: inset 3px 0 var(--gold);

}



.main-content {

    flex: 1;

    min-width: 0;

    padding: 30px;

}



.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 26px;

}



.topbar h1,

.page-title {

    margin: 0;

    color: var(--navy-dark);

    font-size: clamp(23px, 3vw, 30px);

    font-weight: 800;

}



.page-subtitle {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 13px;

}



/* ---------- 11A. SYSTEM LAYOUT & DASHBOARD SURFACES ---------- */



body {

    background: linear-gradient(180deg, #f3f5f9 0%, #eef3f8 100%);

}



.app-shell {

    display: flex;

    align-items: stretch;

    min-height: 100vh;

}



.main {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    min-width: 0;

    padding: 28px 28px 32px;

}



.main > .content {

    display: flex;

    flex-direction: column;

    gap: 22px;

    width: 100%;

    max-width: 1400px;

}



.page-actions,
.welcome-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 8px;

}



.page-actions h2,
.welcome-row h2 {

    margin: 0 0 8px;

    color: var(--navy-dark);

    font-size: clamp(24px, 2.6vw, 32px);

    line-height: 1.2;

}



.page-actions p,
.welcome-row p,
.panel-heading p,
.page-subtitle {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

}



.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 24px;

    padding: 10px 0 0;

}



.topbar .eyebrow {

    margin-bottom: 10px;

}



.two-col-layout {

    display: grid;

    grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);

    gap: 22px;

    align-items: start;

}



.dashboard-grid {

    display: grid;

    grid-template-columns: minmax(0, 2fr) minmax(250px, 0.85fr);

    gap: 22px;

    align-items: stretch;

}



.chart-panel,
.quick-panel,
.form-panel,
.table-panel {

    min-width: 0;

}



.panel-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;

}



.panel-heading h3 {

    margin: 0;

    color: var(--navy-dark);

    font-size: 18px;

    font-weight: 800;

}



.tag,
.total-chip,
.count-badge,
.status-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.tag,
.total-chip {

    color: var(--navy);

    background: rgba(16, 47, 89, 0.08);

}



.count-badge {

    min-width: 28px;

    color: var(--navy-dark);

    background: rgba(255, 191, 47, 0.15);

}



.status-pill {

    color: var(--navy-dark);

    background: rgba(16, 47, 89, 0.08);

}



.status-pill.active {

    color: #0f6d4c;

    background: rgba(22, 134, 83, 0.12);

}



.status-pill.inactive {

    color: #8a5d08;

    background: rgba(255, 191, 47, 0.16);

}



.status-pill.graduated {

    color: #3959a8;

    background: rgba(94, 123, 255, 0.12);

}



.link {

    color: var(--navy);

    font-size: 12px;

    font-weight: 700;

}



.link:hover {

    color: var(--gold-dark);

}



.chart-bars {

    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    align-items: end;

    gap: 14px;

    min-height: 210px;

    padding-top: 14px;

}



.bar-column {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    min-width: 0;

}



.bar-value {

    color: var(--navy-dark);

    font-size: 10px;

    font-weight: 700;

}



.bar-track {

    display: flex;

    align-items: end;

    width: 100%;

    min-height: 150px;

    padding: 8px 4px;

    background: linear-gradient(180deg, rgba(20, 60, 110, 0.04), rgba(20, 60, 110, 0.01));

    border-radius: 12px;

}



.bar-fill {

    display: block;

    width: 100%;

    min-height: 12px;

    background: linear-gradient(180deg, #f1bd3c 0%, #d29412 100%);

    border-radius: 10px 10px 6px 6px;

    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.08);

}



.bar-label {

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

}



.chart-foot {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px solid #edf2f8;

    color: var(--muted);

    font-size: 12px;

}



.legend-dot {

    display: inline-block;

    width: 9px;

    height: 9px;

    margin-right: 6px;

    background: var(--gold);

    border-radius: 50%;

}



.quick-panel {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.quick-action {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 14px 14px 12px;

    color: var(--text);

    background: linear-gradient(180deg, #fbfcff, #f5f7fb);

    border: 1px solid #ebf0f7;

    border-radius: 12px;

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.quick-action:hover {

    transform: translateY(-1px);

    border-color: rgba(16, 47, 89, 0.22);

    box-shadow: 0 10px 24px rgba(16, 47, 89, 0.06);

}



.quick-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    color: var(--navy-dark);

    background: rgba(255, 191, 47, 0.2);

    border-radius: 12px;

    font-size: 18px;

    font-weight: 900;

}



.quick-action span,
.quick-action b,
.quick-action small,
.quick-action strong {

    color: inherit;

}



.quick-action > span:nth-child(2) {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;

}



.quick-action b {

    margin: 0 0 3px;

    font-size: 14px;

}



.quick-action small {

    color: var(--muted);

    font-size: 11px;

}



.quick-action strong {

    color: var(--navy-dark);

    font-size: 18px;

}



.field {

    min-width: 0;

}



.field.full-field {

    grid-column: 1 / -1;

}



.field label,
.form-grid label,
.filter-bar label,
.search-bar label {

    display: block;

    margin-bottom: 7px;

    color: #233b60;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.02em;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px 18px;

}



.form-buttons {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 12px;

    border-top: 1px solid #edf2f9;

}



.filter-bar,
.search-bar {

    display: flex;

    align-items: end;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 18px;

}



.filter-bar > input,
.filter-bar > select,
.search-bar > input,
.search-bar > select {

    flex: 1 1 160px;

    min-width: 0;

}



.multi-filter {

    display: grid;

    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(120px, 0.65fr)) minmax(120px, 0.8fr) auto;

    gap: 12px;

}



.help-text,
.cell-sub,
.muted {

    display: block;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

}



.actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}



.action-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding: 6px 10px;

    color: var(--navy);

    background: rgba(16, 47, 89, 0.05);

    border: 1px solid rgba(16, 47, 89, 0.08);

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

}



.action-link:hover {

    color: var(--navy-dark);

    background: rgba(16, 47, 89, 0.1);

}



.danger-link {

    color: #a93030;

    background: rgba(201, 54, 54, 0.06);

    border-color: rgba(201, 54, 54, 0.12);

}



.danger-link:hover {

    color: #9f1f1f;

    background: rgba(201, 54, 54, 0.1);

}



.empty-cell {

    color: var(--muted);

    text-align: center;

}



.total-chip {

    color: var(--navy-dark);

    background: rgba(255, 191, 47, 0.14);

}



.footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 20px;

    padding-top: 18px;

    color: var(--muted);

    font-size: 12px;

    border-top: 1px solid #e6edf6;

}



.footer span {

    color: var(--muted);

}



/* ---------- 12. DASHBOARD STATISTICS ---------- */



.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 25px;

}



.stat-card {

    min-width: 0;

    padding: 21px;

    background: var(--white);

    border: 1px solid #e7ecf3;

    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(20, 45, 75, 0.04);

}



.stat-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    margin-bottom: 14px;

    border-radius: 12px;

    font-size: 18px;

    font-weight: 900;

}



.stat-icon.blue {

    color: #1d67c0;

    background: rgba(29, 103, 192, 0.12);

}



.stat-icon.gold {

    color: #7a5300;

    background: rgba(255, 191, 47, 0.15);

}



.stat-icon.green {

    color: #0a7452;

    background: rgba(22, 134, 83, 0.12);

}



.stat-icon.red {

    color: #a73a3a;

    background: rgba(201, 54, 54, 0.1);

}



.stat-card .stat-label {

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;

}



.stat-card .stat-value {

    display: block;

    margin-top: 9px;

    color: var(--navy-dark);

    font-size: clamp(21px, 2vw, 29px);

    font-weight: 800;

    overflow-wrap: anywhere;

}



.stat-card .stat-description,
.stat-card .stat-foot {

    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;

}



/* ---------- 13. PANELS AND CHARTS ---------- */



.panel,

.content-card {

    min-width: 0;

    margin-bottom: 22px;

    padding: 23px;

    background: var(--white);

    border: 1px solid #e7ecf3;

    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(20, 45, 75, 0.035);

}



.panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 20px;

}



.panel-header h2,

.panel h2,

.content-card h2 {

    margin: 0;

    color: var(--navy-dark);

    font-size: 17px;

    font-weight: 800;

}



.chart-container {

    position: relative;

    width: 100%;

    min-height: 240px;

}



/* ---------- 14. TABLES ---------- */



.table-wrap {

    width: 100%;

    overflow-x: auto;

    border: 1px solid #e5ebf3;

    border-radius: 9px;

}



table {

    width: 100%;

    border-collapse: collapse;

    background: var(--white);

    font-size: 12px;

}



thead {

    background: #f2f5fa;

}



th {

    padding: 13px 15px;

    color: #415774;

    font-size: 11px;

    font-weight: 800;

    text-align: left;

    white-space: nowrap;

}



td {

    padding: 13px 15px;

    color: #344761;

    border-top: 1px solid #edf1f6;

    vertical-align: middle;

}



tbody tr:hover {

    background: #f8faff;

}



td .btn {

    min-height: 32px;

    padding: 6px 10px;

    font-size: 11px;

}



/* ---------- 15. FILTERS AND SEARCH ---------- */



.filter-bar,

.search-bar {

    display: flex;

    align-items: end;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 20px;

}



.filter-bar > div,

.search-bar > div {

    flex: 1 1 150px;

    min-width: 0;

}



.filter-bar input,

.filter-bar select,

.search-bar input,

.search-bar select {

    min-height: 40px;

}



/* ---------- 16. BADGES AND STATUS ---------- */



.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 800;

    line-height: 1.5;

    white-space: nowrap;

}



.badge.success {

    color: #126b42;

    background: #e3f7ec;

}



.badge.warning {

    color: #875c0a;

    background: #fff3d0;

}



.badge.danger {

    color: #a52b2b;

    background: #ffe8e8;

}



.badge.info {

    color: #1a5188;

    background: #e4f0ff;

}



.badge.neutral {

    color: #53647a;

    background: #edf1f6;

}



/* ---------- 17. RECORD FORMS ---------- */



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.form-group {

    min-width: 0;

    margin-bottom: 16px;

}



.form-group.full-width {

    grid-column: 1 / -1;

}



.form-actions {

    display: flex;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid #e8edf4;

}



/* ---------- 18. STUDENT BILLING ---------- */



.balance-card {

    padding: 26px;

    color: var(--white);

    background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));

    border-radius: 12px;

    box-shadow: 0 10px 24px rgba(16, 47, 89, 0.12);

}



.balance-card h2 {

    margin-bottom: 8px;

    color: #e3edf9;

    font-size: 13px;

    font-weight: 600;

}



.balance-card .amount {

    color: var(--gold);

    font-size: clamp(27px, 4vw, 38px);

    font-weight: 900;

    overflow-wrap: anywhere;

}



.balance-card p {

    margin: 8px 0 0;

    color: #e3edf9;

    font-size: 12px;

}



.amount {

    font-variant-numeric: tabular-nums;

    white-space: nowrap;

}



/* ---------- 19. PAGINATION ---------- */



.pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;

}



.pagination a,

.pagination span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 35px;

    min-height: 35px;

    padding: 6px 10px;

    color: var(--navy);

    background: var(--white);

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

    border-radius: 6px;

    font-size: 12px;

}



.pagination a:hover,

.pagination .active {

    color: var(--white);

    background: var(--navy);

    border-color: var(--navy);

}



/* ---------- 20. EMPTY STATES ---------- */



.empty-state {

    padding: 42px 20px;

    color: var(--muted);

    text-align: center;

}



.empty-state h3 {

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 17px;

}



.empty-state p {

    margin-bottom: 18px;

    font-size: 12px;

}



/* ---------- 21. PRINT STYLES ---------- */



@media print {

    @page {

        size: A4;

        margin: 15mm;

    }



    body {

        color: #111111;

        background: #ffffff;

        font-size: 11px;

    }



    .sidebar,

    .topbar,

    .no-print,

    .btn,

    .filter-bar,

    .search-bar,

    .pagination,

    .login-background {

        display: none !important;

    }



    .app-shell,
    .app-layout {

        display: block;

        min-height: auto;

        background: #ffffff;

    }



    .main,
    .main-content {

        padding: 0;

    }



    .panel,

    .content-card,

    .stat-card {

        box-shadow: none;

        break-inside: avoid;

        border: 1px solid #cccccc;

    }



    table {

        font-size: 10px;

    }



    th,

    td {

        padding: 7px;

        color: #111111;

        border-color: #cccccc;

    }



    thead {

        display: table-header-group;

        background: #eeeeee;

    }



    tr {

        break-inside: avoid;

    }



    a {

        color: #111111;

        text-decoration: none;

    }

}



/* ---------- 22. TABLET ---------- */



@media (max-width: 1024px) {

    .login-wrap {

        grid-template-columns: minmax(0, 1fr) 390px;

        gap: 35px;

        width: min(920px, calc(100% - 40px));

    }



    .login-card {

        padding: 27px;

    }



    .login-intro h1 {

        font-size: clamp(31px, 4vw, 42px);

    }



    .stats-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .sidebar {

        flex-basis: 220px;

        width: 220px;

    }



    .main-content {

        padding: 24px;

    }

}



/* ---------- 23. MOBILE ---------- */



@media (max-width: 768px) {

    .app-shell,
    .app-layout {

        flex-direction: column;

    }



    .sidebar {

        position: relative;

        top: auto;

        width: 100%;

        min-width: 0;

        min-height: auto;

        height: auto;

        flex: 0 0 auto;

        padding: 18px 12px;

    }



    .main,
    .main-content {

        width: 100%;

        padding: 18px;

    }



    .login-page {

        min-height: 100vh;

        background: var(--background);

    }



    /*

       On mobile, keep the entire upper section navy.

       Do not let the diagonal cross the feature text.

    */



    .login-background {

        height: 760px;

        background: linear-gradient(

            145deg,

            var(--navy-dark),

            var(--navy-light)

        );

        clip-path: polygon(

            0 0,

            100% 0,

            100% 86%,

            0 100%

        );

    }



    .login-wrap {

        width: min(100% - 32px, 480px);

        min-height: 100vh;

        margin: 0 auto;

        padding: 35px 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 30px;

    }



    .login-intro {

        padding: 0;

    }



    .login-intro > img {

        width: 88px;

        height: 88px;

        padding: 6px;

        margin-bottom: 16px;

    }



    .login-intro .eyebrow {

        margin-bottom: 12px;

    }



    .login-intro h1 {

        max-width: 100%;

        font-size: clamp(31px, 7vw, 42px);

        letter-spacing: -0.8px;

    }



    .login-intro > p {

        max-width: 100%;

        font-size: 13px;

    }



    .login-points {

        gap: 5px;

        margin-top: 17px;

    }



    .login-card {

        width: 100%;

        padding: 25px;

        border-radius: 14px;

    }



    .card-top {

        margin-bottom: 24px;

    }



    .card-top h2 {

        font-size: 21px;

    }



    .modal {

        padding: 25px 20px;

    }



    .main-content {

        padding: 18px;

    }



    .sidebar {

        flex-basis: 190px;

        width: 190px;

        padding: 18px 10px;

    }



    .panel,

    .content-card {

        padding: 17px;

    }

}



/* ---------- 24. SMALL MOBILE ---------- */



@media (max-width: 480px) {

    .login-wrap {

        width: calc(100% - 28px);

        padding: 25px 0;

        gap: 25px;

    }



    .login-background {

        height: 700px;

    }



    .login-intro h1 {

        font-size: 32px;

    }



    .login-intro > p {

        line-height: 1.7;

    }



    .login-card {

        padding: 21px 18px;

    }



    .captcha-row {

        grid-template-columns: 1fr 1fr;

        gap: 9px;

    }



    .captcha-code {

        font-size: 16px;

        letter-spacing: 3px;

    }



    .card-top h2 {

        font-size: 19px;

    }



    .stats-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .form-grid {

        grid-template-columns: 1fr;

        gap: 0;

    }



    .form-group.full-width {

        grid-column: auto;

    }



    .topbar {

        align-items: flex-start;

        flex-direction: column;

    }



    .main-content {

        padding: 14px;

    }



    .panel,

    .content-card {

        padding: 14px;

    }



    .modal-backdrop {

        padding: 12px;

    }



    .modal {

        max-height: calc(100vh - 24px);

    }

}



/* ---------- 25. ACCESSIBILITY ---------- */



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}

/* ---------- 26. DASHBOARD SIDEBAR FIXES ---------- */
/* These rules keep dashboard navigation readable even when the PHP markup
   uses direct links or slightly different sidebar class names. */
.app-layout {
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    min-height: 100vh;
    padding: 24px 16px;
    color: #fff;
    background: var(--navy-dark);
}

.sidebar a,
.sidebar nav a,
.sidebar p,
.sidebar span,
.sidebar small,
.sidebar strong,
.sidebar label {
    color: #eaf1fa;
}

.sidebar .brand-name,
.sidebar .brand-name a,
.sidebar h2 {
    color: #fff;
}

.sidebar .brand-name strong,
.sidebar .brand-name span,
.sidebar .brand-accent {
    color: var(--gold);
}

.sidebar nav,
.sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 18px;
}

.sidebar nav a,
.sidebar .sidebar-nav a,
.sidebar > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: #d8e4f2;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: background .2s ease, color .2s ease;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar .sidebar-nav a:hover,
.sidebar .sidebar-nav a.active,
.sidebar > a:hover {
    color: #fff;
    background: #1c4778;
}

.sidebar nav a.active,
.sidebar .sidebar-nav a.active {
    box-shadow: inset 3px 0 var(--gold);
}

.sidebar img,
.sidebar .logo {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.sidebar .user-profile,
.sidebar .sidebar-user,
.sidebar .profile,
.sidebar .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 14px 4px 0;
    color: #fff;
    overflow-wrap: anywhere;
}

.sidebar .user-profile img,
.sidebar .sidebar-user img,
.sidebar .profile img,
.sidebar .user-info img {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100% - 240px);
    padding: 30px;
    overflow-x: auto;
}

.main-content > * {
    max-width: 100%;
}

/* Prevent form controls from inheriting sidebar or table text styles. */
.main-content input,
.main-content select,
.main-content textarea {
    color: var(--text);
    background-color: #fff;
}

@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        top: auto;
        width: 100%;
        min-width: 0;
        min-height: auto;
        height: auto;
        flex: 0 0 auto;
        padding: 16px;
    }

    .sidebar nav,
    .sidebar .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar nav a,
    .sidebar .sidebar-nav a,
    .sidebar > a {
        width: auto;
        flex: 1 1 140px;
    }

    .sidebar .user-profile,
    .sidebar .sidebar-user,
    .sidebar .profile,
    .sidebar .user-info {
        margin-top: 16px;
    }

    .main-content {
        width: 100%;
        padding: 18px;
    }
}