:root {
    --app-primary: #0b63ce;
    --app-primary-dark: #074b9d;
    --app-accent: #ff8a1f;
    --app-bg: #f4f7fb;
}
* { font-family: 'Kanit', sans-serif; }
[hidden] { display: none !important; }
body { background: var(--app-bg); color: #243247; min-height: 100vh; }
.app-navbar { background: linear-gradient(135deg, var(--app-primary-dark), var(--app-primary)); }
.hero-card { border: 0; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1rem 3rem rgba(20, 52, 92, .12); }
.hero-panel { background: linear-gradient(135deg, #0754b4, #1485e8); color: #fff; min-height: 100%; }
.card { border: 0; border-radius: 1rem; box-shadow: 0 .45rem 1.5rem rgba(30, 60, 100, .07); }
.form-control, .form-select { border-radius: .75rem; padding: .72rem .9rem; border-color: #d9e2ef; }
.form-control:focus, .form-select:focus { border-color: #79b7f4; box-shadow: 0 0 0 .22rem rgba(13, 110, 253, .12); }
.btn { border-radius: .72rem; }
.btn-primary { background: var(--app-primary); border-color: var(--app-primary); }
.stat-card .icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .9rem; background: #eaf4ff; color: var(--app-primary); font-size: 1.35rem; }
.table thead th { white-space: nowrap; color: #53657c; font-weight: 500; background: #f7f9fc; }
.photo-preview { width: 120px; height: 150px; object-fit: cover; border-radius: .9rem; border: 4px solid #fff; box-shadow: 0 .3rem 1rem rgba(0,0,0,.12); background: #eef2f7; }
.login-tabs .nav-link { border-radius: .75rem; color: #5b6b80; }
.login-tabs .nav-link.active { background: #eaf4ff; color: var(--app-primary); font-weight: 600; }
.required::after { content: ' *'; color: #dc3545; }
@media (max-width: 767.98px) { .hero-panel { min-height: auto; } .table-responsive { border-radius: .8rem; } }

.place-items-center { place-items: center; }

.upload-preview-panel { position: relative; display: inline-block; }
.upload-preview-badge {
    position: absolute;
    left: 50%;
    bottom: -.6rem;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: #eaf4ff;
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 500;
    box-shadow: 0 .15rem .5rem rgba(30, 60, 100, .12);
}
.upload-file-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid #b9e4c8;
    border-radius: .8rem;
    background: #f0fff5;
}
.min-w-0 { min-width: 0; }

/* Login page */
.login-card {
    border: 0;
    border-radius: 1.5rem;
    box-shadow: 0 1rem 3rem rgba(20, 52, 92, .12);
}
.login-heading-icon {
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #eaf4ff, #d9ecff);
    color: var(--app-primary);
    font-size: 2rem;
}
.password-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.password-input-group .password-toggle {
    min-width: 3.25rem;
    border-color: #d9e2ef;
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
    background: #fff;
    color: #607086;
}
.password-input-group .password-toggle:hover,
.password-input-group .password-toggle:focus {
    background: #f3f7fc;
    color: var(--app-primary);
    border-color: #79b7f4;
}
@media (max-width: 575.98px) {
    .login-card { border-radius: 1.1rem; }
    .login-heading h1 { font-size: 1.55rem; }
}

/* Student profile photo */
.student-photo-display {
    display: flex;
    justify-content: center;
    align-items: center;
}
.student-profile-photo {
    width: 220px;
    height: 275px;
    max-width: 100%;
    border-radius: 1.1rem;
    border-width: 5px;
    box-shadow: 0 .65rem 1.8rem rgba(30, 60, 100, .18);
}
@media (max-width: 575.98px) {
    .student-profile-photo {
        width: 190px;
        height: 238px;
    }
}


/* Student list admin */
.student-table-modern tbody tr td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
}
.student-photo-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: .4rem;
}
.student-photo-link:hover .student-list-photo,
.student-photo-link:focus .student-list-photo {
    transform: translateY(-2px);
    box-shadow: 0 .8rem 1.6rem rgba(11, 99, 206, .18);
    border-color: #bfdcff;
}
.student-list-photo {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: .9rem;
    border: 2px solid #eef3f9;
    background: linear-gradient(135deg, #f5f8fc, #ebf1f8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #7c91aa;
    transition: all .2s ease;
}
.student-photo-id {
    font-size: .86rem;
    font-weight: 600;
    color: #35506d;
    line-height: 1.2;
}
.student-level-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--app-primary);
    font-weight: 500;
    font-size: .92rem;
}
.student-action-group {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.student-action-btn {
    width: 2.55rem;
    height: 2.55rem;
    border: 0;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 .35rem 1rem rgba(30, 60, 100, .12);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.student-action-btn:hover,
.student-action-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.2rem rgba(30, 60, 100, .18);
}
.student-action-btn i {
    font-size: 1rem;
}
.student-action-btn.action-edit {
    background: linear-gradient(135deg, #eef5ff, #d9e9ff);
    color: #0b63ce;
}
.student-action-btn.action-delete {
    background: linear-gradient(135deg, #fff0f2, #ffdfe5);
    color: #dc3545;
}
.pagination-wrap {
    background: linear-gradient(180deg, rgba(247, 249, 252, .55), rgba(255, 255, 255, .9));
}
.pagination-modern .page-link {
    min-width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    border: 1px solid #dbe5f0;
    color: #42607d;
    font-weight: 500;
    background: #fff;
    box-shadow: 0 .2rem .6rem rgba(30, 60, 100, .06);
}
.pagination-modern .page-item.active .page-link {
    background: linear-gradient(135deg, #0b63ce, #2f8cff);
    border-color: #0b63ce;
    color: #fff;
    box-shadow: 0 .5rem 1rem rgba(11, 99, 206, .22);
}
.pagination-modern .page-item.disabled .page-link {
    background: #f3f6fa;
    color: #9aaabd;
    border-color: #e0e8f1;
    box-shadow: none;
}
.pagination-modern .page-link:hover {
    color: var(--app-primary);
    background: #f3f8ff;
    border-color: #bfdcff;
}
.page-ellipsis {
    pointer-events: none;
}
@media (max-width: 767.98px) {
    .student-list-photo {
        width: 90px;
        height: 72px;
    }
    .student-table-modern tbody tr td {
        padding-top: .85rem;
        padding-bottom: .85rem;
    }
}


/* Student form photo preview */
.student-form-photo-card {
    background: linear-gradient(180deg, #fbfdff, #f5f8fc);
    border: 1px solid #e6edf5;
    border-radius: 1.2rem;
    padding: 1.15rem;
}
.student-form-photo-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #243247;
    margin-bottom: .85rem;
}
.student-form-photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
    border-radius: 1rem;
    background: linear-gradient(135deg, #eef3f9, #f9fbfd);
    border: 2px dashed #d8e3ef;
    overflow: hidden;
}
.student-form-photo-img {
    width: 100%;
    max-width: 235px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: .95rem;
    box-shadow: 0 .85rem 1.8rem rgba(30, 60, 100, .16);
}
.student-form-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #71839a;
    text-align: center;
    padding: 1.5rem;
}
.student-form-photo-placeholder i {
    font-size: 4rem;
    color: #8ba2bb;
}
.student-form-file-info {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: .9rem;
    border: 1px solid #b9e4c8;
    background: #f0fff5;
}
@media (max-width: 991.98px) {
    .student-form-photo-frame {
        min-height: 280px;
    }
    .student-form-photo-img {
        max-width: 210px;
    }
}


/* Admin dashboard charts */
.stat-card-modern {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(218, 229, 241, .75);
    border-radius: 1.25rem;
    box-shadow: 0 .65rem 1.7rem rgba(23, 43, 77, .055);
}
.stat-card-modern .icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
}
.stat-card-modern .stat-decor-circle {
    position: absolute;
    right: -1.2rem;
    bottom: -1.6rem;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    opacity: .42;
}
.summary-primary .icon { background: #eaf2ff; color: #2f80ed; }
.summary-primary .stat-decor-circle { background: #dce9ff; }
.summary-success .icon { background: #e8f8ef; color: #22a866; }
.summary-success .stat-decor-circle { background: #d4f1df; }
.summary-warning .icon { background: #fff4dc; color: #df9417; }
.summary-warning .stat-decor-circle { background: #ffebc3; }
.summary-ready .icon { background: #e8fbf1; color: #1f9d64; }
.summary-ready .stat-decor-circle { background: #cef3de; }
.summary-pending .icon { background: #fff0db; color: #d78309; }
.summary-pending .stat-decor-circle { background: #ffe1b8; }

.dashboard-chart-card {
    border: 1px solid rgba(218, 229, 241, .78);
    border-radius: 1.45rem;
    box-shadow: 0 .75rem 2rem rgba(23, 43, 77, .065);
    overflow: hidden;
}
.dashboard-overview-card {
    background:
        radial-gradient(circle at 93% 18%, rgba(47, 128, 237, .08), transparent 20rem),
        #fff;
}
.dashboard-faculty-card {
    background:
        radial-gradient(circle at 96% 10%, rgba(34, 181, 115, .06), transparent 20rem),
        #fff;
}
.dashboard-chart-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.dashboard-chart-heading h2 {
    color: #172b46;
    font-weight: 600;
}
.dashboard-chart-badge {
    display: inline-flex;
    align-items: center;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: #edf9f2;
    color: #188554;
    font-size: .86rem;
    font-weight: 500;
}
.chart-holder {
    position: relative;
    width: 100%;
}
.chart-holder-doughnut {
    min-height: 330px;
    max-width: 430px;
    margin-inline: auto;
}
.chart-holder-faculty {
    height: max(620px, calc(var(--faculty-count) * 118px));
    min-height: 620px;
    max-height: 1100px;
}
.overview-metric-list {
    display: grid;
    gap: 1rem;
}
.overview-metric {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e5edf5;
    border-radius: 1.1rem;
    background: rgba(255,255,255,.9);
    box-shadow: 0 .35rem 1rem rgba(30, 60, 100, .045);
}
.overview-metric .metric-icon {
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .95rem;
    font-size: 1.25rem;
}
.overview-metric .metric-content {
    min-width: 0;
    flex: 1;
}
.overview-metric .metric-label {
    color: #63768c;
    font-size: .9rem;
}
.overview-metric .metric-value {
    margin-top: .1rem;
    color: #162942;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
}
.overview-metric .metric-value span {
    color: #71839a;
    font-size: .85rem;
    font-weight: 400;
}
.metric-track {
    height: .42rem;
    margin-top: .65rem;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}
.metric-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.metric-primary .metric-icon { background: #edf4ff; color: #2f80ed; }
.metric-primary .metric-track span { background: linear-gradient(90deg, #2f80ed, #64a7ff); }
.metric-success .metric-icon { background: #eaf8f0; color: #22a866; }
.metric-success .metric-track span { background: linear-gradient(90deg, #22b573, #65d39c); }
.metric-warning .metric-icon { background: #fff4dc; color: #df9417; }
.metric-warning .metric-track span { background: linear-gradient(90deg, #f6c445, #ffdc7a); }
.metric-ready .metric-icon { background: #e8fbf1; color: #1f9d64; }
.metric-ready .metric-track span { background: linear-gradient(90deg, #22b573, #4bd18f); }
.metric-pending .metric-icon { background: #fff0db; color: #d78309; }
.metric-pending .metric-track span { background: linear-gradient(90deg, #efb73f, #f6c445); }
.chart-legend-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    color: #61748a;
    font-size: .88rem;
}
.chart-legend-inline span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.chart-legend-pills span {
    padding: .48rem .75rem;
    border: 1px solid #e3ebf4;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 .2rem .65rem rgba(30, 60, 100, .05);
    color: #435a73;
    font-weight: 500;
}
.legend-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot.total { background: #3b82f6; }
.legend-dot.uploaded { background: #22b573; }
.legend-dot.not-uploaded { background: #f6c445; }

@media (max-width: 991.98px) {
    .chart-holder-doughnut { min-height: 300px; }
    .chart-holder-faculty {
        min-width: 760px;
        height: max(620px, calc(var(--faculty-count) * 112px));
    }
    .dashboard-faculty-card .card-body {
        overflow-x: auto;
    }
}
@media (max-width: 575.98px) {
    .dashboard-chart-card .card-body { padding: 1.25rem !important; }
    .chart-holder-doughnut { min-height: 270px; }
    .dashboard-chart-badge { width: 100%; justify-content: center; }
    .overview-metric { padding: .85rem; }
    .overview-metric .metric-icon { width: 2.8rem; height: 2.8rem; }
    .overview-metric .metric-value { font-size: 1.35rem; }
}


/* Bulk student selection and status update */
.student-bulk-toolbar {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fbfdff, #f3f8ff);
    border-radius: 1rem 1rem 0 0;
}
.student-bulk-toolbar .form-check-input,
.student-select-checkbox,
.student-row-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    border-color: #9eb4cc;
}
.student-bulk-toolbar .form-check-input:checked,
.student-select-checkbox:checked,
.student-row-checkbox:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.selected-student-count {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #6a7e94;
    font-size: .9rem;
    font-weight: 500;
}
.selected-student-count.is-active {
    background: #e6f2ff;
    color: var(--app-primary);
}
.bulk-status-button {
    color: #3d2b00;
    border: 0;
    font-weight: 600;
    padding-inline: 1.15rem;
    box-shadow: 0 .35rem .9rem rgba(217, 151, 0, .16);
}
.bulk-status-button:disabled {
    opacity: .52;
    box-shadow: none;
}
.student-table-modern tr[data-student-row] {
    transition: background-color .18s ease, box-shadow .18s ease;
}
.student-table-modern tr[data-student-row].student-row-selected > td {
    background: #eef7ff !important;
}
.student-table-modern tr[data-student-row].student-row-selected {
    box-shadow: inset 4px 0 0 var(--app-primary);
}
@media (max-width: 767.98px) {
    .student-bulk-toolbar {
        align-items: stretch;
    }
    .student-bulk-toolbar > * {
        width: 100%;
    }
    .bulk-status-button {
        width: 100%;
    }
}


/* Public registration and login secondary actions */
.login-secondary-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    line-height: 1.25;
}
.public-register-card {
    overflow: hidden;
}
.register-photo-preview-frame {
    width: min(100%, 260px);
    min-height: 300px;
    border-radius: 1rem;
    border: 2px dashed #d8e3ef;
    background: linear-gradient(135deg, #f8fbff, #eef3f9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .9rem;
}
.register-photo-preview-image {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: .9rem;
    box-shadow: 0 .75rem 1.6rem rgba(30, 60, 100, .18);
}
.register-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6f8298;
    padding: 1rem;
}
.register-photo-placeholder i {
    font-size: 3.8rem;
    color: #8ba2bb;
}
@media (max-width: 575.98px) {
    .register-photo-preview-frame {
        width: 100%;
        min-height: 260px;
    }
    .register-photo-preview-image {
        max-width: 190px;
    }
}


/* Public registration required photo layout */
.public-register-photo-card {
    position: sticky;
    top: 1rem;
    padding: 1.1rem;
    border: 1px solid #e1eaf4;
    border-radius: 1.15rem;
    background: linear-gradient(180deg, #fbfdff, #f4f8fc);
}
.public-register-photo-card .register-photo-preview-frame {
    width: 100%;
    min-height: 330px;
}
.public-register-photo-card .register-photo-preview-image {
    max-width: 240px;
}
.public-register-card .card-footer {
    border-radius: 0 0 1rem 1rem;
}
#registerSubmitButton:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
@media (max-width: 991.98px) {
    .public-register-photo-card {
        position: static;
    }
    .public-register-photo-card .register-photo-preview-frame {
        min-height: 280px;
    }
}


/* Public status search */
.status-result-card {
    background: linear-gradient(135deg, #f8fbff, #f3f7fb) !important;
    border-color: #d7e2ee !important;
}
#statusSearchForm .btn {
    min-height: 3rem;
}
@media (min-width: 992px) {
    #statusSearchForm .form-control {
        min-height: 3rem;
    }
}


.student-status-note {
    max-width: 220px;
    color: #5f7187;
    font-size: .78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.swal2-popup #bulkStatusNote {
    resize: vertical;
    min-height: 105px;
}


/* Summary report note column */
.report-summary-table th,
.report-summary-table td {
    vertical-align: middle;
}
.report-note-cell {
    max-width: 420px;
    white-space: normal;
    line-height: 1.55;
}
.report-note-text {
    display: inline-block;
    padding: .45rem .7rem;
    border-radius: .65rem;
    background: #f3f7fc;
    color: #435a73;
    overflow-wrap: anywhere;
}

/* Login page with office logo and staff action in title bar */
.login-card-with-logo {
    overflow: hidden;
}
.login-office-logo {
    display: block;
    width: min(100%, 230px);
    max-height: 72px;
    object-fit: contain;
}
.login-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #e2eaf4;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
}
.login-titlebar h1 {
    color: #162942;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
}
.staff-login-button {
    position: static;
    flex-shrink: 0;
    border-radius: .85rem;
    font-weight: 500;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgba(30, 60, 100, .08);
}
.student-login-heading {
    display: flex;
    justify-content: center;
}
.student-login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: .65rem 1.2rem;
    border-radius: .85rem;
    background: #eaf4ff;
    color: var(--app-primary);
    font-weight: 600;
}
.staff-login-modal {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgba(22, 41, 69, .22);
}
@media (max-width: 767.98px) {
    .login-office-logo {
        width: min(100%, 185px);
        max-height: 60px;
    }
    .login-titlebar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .staff-login-button {
        width: 100%;
    }
    .student-login-badge {
        width: 100%;
        min-width: 0;
    }
}


/* Premium public login page */
.public-login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(11, 99, 206, .11), transparent 24rem),
        radial-gradient(circle at 92% 88%, rgba(21, 165, 125, .09), transparent 23rem),
        linear-gradient(135deg, #f5f8fc 0%, #eef4fb 52%, #f8fbff 100%);
}
.public-login-page .app-navbar {
    display: none;
}
.public-login-page main.container {
    max-width: 100%;
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
}
.public-login-page footer {
    padding-top: 1rem !important;
    color: #71839a !important;
}
.login-page-shell {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: .5rem 1rem 1rem;
    overflow: hidden;
}
.login-background-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}
.login-background-shape-one {
    width: 260px;
    height: 260px;
    left: -130px;
    top: 4%;
    background: rgba(11, 99, 206, .06);
}
.login-background-shape-two {
    width: 320px;
    height: 320px;
    right: -170px;
    bottom: 2%;
    background: rgba(22, 163, 74, .05);
}
.login-card-premium {
    overflow: hidden;
    border: 1px solid rgba(208, 221, 237, .9);
    border-radius: 1.65rem;
    box-shadow: 0 1.3rem 3.5rem rgba(24, 55, 94, .14);
}
.login-brandbar {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5edf6;
    background:
        linear-gradient(120deg, rgba(255,255,255,.98), rgba(239,246,255,.98)),
        #fff;
}
.login-office-logo {
    display: block;
    width: 100px;
    height: 80px;
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
}
.login-brand-copy {
    min-width: 0;
}
.login-eyebrow {
    color: var(--app-primary);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: .2rem;
}
.login-brand-copy h1 {
    margin: 0;
    color: #132a46;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}
.login-brand-copy p {
    margin: .35rem 0 0;
    color: #6b7e94;
    font-size: .95rem;
}
.staff-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .7rem 1rem;
    border: 1px solid #bed7f5;
    border-radius: .9rem;
    color: #0b63ce;
    background: rgba(255,255,255,.94);
    font-weight: 500;
    box-shadow: 0 .35rem 1rem rgba(30, 60, 100, .08);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.staff-login-button:hover,
.staff-login-button:focus {
    color: #fff;
    border-color: var(--app-primary);
    background: var(--app-primary);
    transform: translateY(-2px);
    box-shadow: 0 .65rem 1.25rem rgba(11, 99, 206, .22);
}

.staff-login-button-bottom {
    min-height: 52px;
    border-color: #c9d9eb;
    color: #36526e;
    background: linear-gradient(135deg, #f8fbff, #edf4fb);
    box-shadow: 0 .45rem 1.15rem rgba(30, 60, 100, .08);
}
.staff-login-button-bottom:hover,
.staff-login-button-bottom:focus {
    color: #fff;
    border-color: #365f8f;
    background: linear-gradient(135deg, #254f7f, #3e78b8);
}
.login-staff-divider {
    margin-top: 1.45rem;
    margin-bottom: 1rem;
}

.login-card-body {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
.student-login-heading {
    display: flex;
    justify-content: center;
}
.student-login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: .72rem 1.25rem;
    border: 1px solid #d6e7fb;
    border-radius: 999px;
    background: linear-gradient(135deg, #eef6ff, #e4f0ff);
    color: #0b63ce;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.login-student-form .form-label,
.staff-login-modal .form-label {
    color: #26384d;
    font-weight: 500;
}
.login-input-wrap {
    position: relative;
}
.login-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #7a8da3;
    font-size: 1.05rem;
    pointer-events: none;
}
.login-input-wrap .login-form-control {
    padding-left: 3rem;
}
.login-form-control {
    min-height: 52px;
    border-color: #cfdaea;
    border-radius: .9rem;
    background: #fbfdff;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.login-form-control:focus {
    background: #fff;
    border-color: #65a8ee;
    box-shadow: 0 0 0 .25rem rgba(11, 99, 206, .11);
}
.login-password-group .login-input-prefix {
    min-width: 48px;
    justify-content: center;
    border-color: #cfdaea;
    border-radius: .9rem 0 0 .9rem;
    background: #f4f8fd;
    color: #74879d;
}
.login-password-group .login-form-control {
    border-radius: 0;
}
.login-password-group .password-toggle {
    min-width: 52px;
    border: 1px solid #cfdaea;
    border-left: 0;
    border-radius: 0 .9rem .9rem 0;
    background: #fff;
    color: #65798f;
}
.login-password-group .password-toggle:hover,
.login-password-group .password-toggle:focus {
    color: var(--app-primary);
    background: #f2f7fd;
}
.login-help-text {
    margin-top: .55rem;
    color: #6f8298;
}
.login-submit-button {
    min-height: 52px;
    border: 0;
    border-radius: .95rem;
    background: linear-gradient(135deg, #0758bd, #147ce0);
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 .65rem 1.35rem rgba(11, 99, 206, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.login-submit-button:hover,
.login-submit-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 .85rem 1.6rem rgba(11, 99, 206, .28);
}
.login-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.7rem 0 1.2rem;
    color: #8495a9;
    font-size: .82rem;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e8f1;
}
.login-action-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 82px;
    height: 100%;
    padding: .9rem 1rem;
    border: 1px solid #dce7f3;
    border-radius: 1rem;
    background: #fff;
    color: #243b57;
    text-decoration: none;
    box-shadow: 0 .3rem 1rem rgba(30, 60, 100, .055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.login-action-card:hover,
.login-action-card:focus {
    color: #1e3b5c;
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.4rem rgba(30, 60, 100, .12);
}
.login-action-status:hover { border-color: #78aff0; }
.login-action-register:hover { border-color: #75c9a0; }
.login-action-icon {
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    font-size: 1.1rem;
}
.login-action-status .login-action-icon {
    background: #eaf3ff;
    color: #0b63ce;
}
.login-action-register .login-action-icon {
    background: #eaf9f0;
    color: #168650;
}
.login-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.login-action-copy strong {
    font-weight: 600;
}
.login-action-copy small {
    color: #74879d;
    line-height: 1.35;
}
.login-action-arrow {
    margin-left: auto;
    color: #92a2b5;
}
.login-security-note {
    margin-top: 1rem;
    text-align: center;
    color: #70839a;
    font-size: .82rem;
}
.staff-login-modal {
    overflow: hidden;
    border: 0;
    border-radius: 1.35rem;
    box-shadow: 0 1.5rem 4rem rgba(22, 41, 69, .24);
}
.staff-modal-header {
    padding: 1.35rem 1.5rem 1rem;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
}
.staff-modal-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    color: #0b63ce;
    background: #deedff;
    font-size: 1.2rem;
}
@media (max-width: 767.98px) {
    .public-login-page main.container {
        padding: 1rem 0 !important;
    }
    .login-page-shell {
        padding: .25rem .75rem .75rem;
    }
    .login-card-premium {
        border-radius: 1.25rem;
    }
    .login-brandbar {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: .85rem;
        padding: 1rem;
    }
    .login-office-logo {
        width: 100px;
        height: 80px;
    }
    .staff-login-button-bottom {
        width: 100%;
    }
    .login-brand-copy h1 {
        font-size: 1.35rem;
    }
    .login-brand-copy p {
        font-size: .84rem;
    }
    .student-login-badge {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 420px) {
    .login-brandbar {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .login-office-logo {
        margin: 0 auto;
    }
    .login-brand-copy h1 {
        font-size: 1.3rem;
    }
}


/* User management */
.user-summary-card {
    border: 1px solid rgba(218, 229, 241, .8);
    border-radius: 1.15rem;
}
.user-summary-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 1.35rem;
}
.user-summary-all { background: #eaf2ff; color: #2f80ed; }
.user-summary-active { background: #e8f8ef; color: #1f9d64; }
.user-summary-inactive { background: #f1f3f6; color: #64748b; }
.user-management-table tbody td { padding-top: .9rem; padding-bottom: .9rem; }
.user-avatar {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: linear-gradient(135deg, #eaf2ff, #d8e8ff);
    color: #1769d2;
    font-size: 1.15rem;
    flex: 0 0 auto;
}
.student-action-btn.action-disabled {
    background: #f1f4f8;
    color: #a0aec0;
    box-shadow: none;
    cursor: not-allowed;
}
.user-form-card { border-radius: 1.35rem; }
.user-form-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f5f9ff, #eef5ff);
    border: 1px solid #e0ebf8;
}
.user-form-avatar {
    width: 3.7rem;
    height: 3.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: #dfeeff;
    color: #0b63ce;
    font-size: 1.5rem;
    flex: 0 0 auto;
}


/* Student search filters */
.student-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(165px, 1fr)) minmax(190px, .95fr) 76px;
    gap: 1rem;
    align-items: stretch;
}
.student-filter-grid .form-control,
.student-filter-grid .form-select,
.student-filter-search-button {
    min-height: 50px;
}
.upload-date-filter-field {
    position: relative;
}
.upload-date-filter-field .form-control {
    padding-left: 2.65rem;
}
.upload-date-filter-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6f8298;
    pointer-events: none;
    z-index: 2;
}
.student-filter-search-text {
    display: none;
    margin-left: .35rem;
}
@media (max-width: 1599.98px) {
    .student-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .student-filter-grid > div:first-child {
        grid-column: span 2;
    }
    .student-filter-search-text {
        display: inline;
    }
}
@media (max-width: 991.98px) {
    .student-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .student-filter-grid > div:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575.98px) {
    .student-filter-grid {
        grid-template-columns: 1fr;
    }
    .student-filter-grid > div:first-child {
        grid-column: auto;
    }
}


/* Easier student search form */
.student-search-card {
    border: 1px solid rgba(218, 229, 241, .8);
    border-radius: 1.35rem;
    box-shadow: 0 .65rem 1.7rem rgba(23, 43, 77, .055);
    overflow: hidden;
}
.student-search-card .form-label {
    color: #2e425b;
    margin-bottom: .45rem;
}
.student-search-card .form-control,
.student-search-card .form-select,
.student-search-card .btn {
    min-height: 50px;
    border-radius: .9rem;
}
.student-filter-input-group {
    position: relative;
}
.student-filter-input-group .form-control {
    padding-left: 2.8rem;
}
.student-filter-leading-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6d8199;
    pointer-events: none;
    z-index: 3;
}
.student-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.student-search-card .form-select:disabled {
    background-color: #eef2f7;
    color: #7a8ca1;
    opacity: 1;
}
@media (max-width: 575.98px) {
    .student-search-card .card-body {
        padding: 1rem !important;
    }
    .student-filter-actions .btn {
        width: 100%;
    }
}