.exam-table {
    border: 1px solid #000;
    border-collapse: collapse;
}

:root {
    --school-ink: #17202a;
    --school-muted: #6b7280;
    --school-line: #e5e7eb;
    --school-blue: #2563eb;
    --school-teal: #0f766e;
    --school-gold: #b7791f;
    --school-red: #dc2626;
    --school-surface: #ffffff;
    --school-canvas: #f4f7fb;
}

body {
    background: var(--school-canvas);
    color: var(--school-ink);
}

.school-topbar.navbar-dark {
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

.school-brand {
    color: #fff;
    gap: .75rem;
}

.school-brand:hover {
    color: #fff;
    text-decoration: none;
}

.school-brand-mark {
    align-items: center;
    background: #f8fafc;
    border-radius: 8px;
    color: #111827;
    display: inline-flex;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.school-brand-text {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.topbar-context,
.quick-top-link {
    color: rgba(255, 255, 255, .78) !important;
}

.quick-top-link {
    border-radius: 8px;
    margin-right: .25rem;
    transition: background-color .18s ease, transform .18s ease;
}

.quick-top-link:hover {
    background: rgba(255, 255, 255, .09);
    transform: translateY(-1px);
}

.sidebar-dark {
    background: #111827;
}

.sidebar-dark .nav-sidebar > .nav-item > .nav-link {
    border-radius: 8px;
    margin: 2px 10px;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateX(2px);
}

.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active {
    background: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

.nav-item-header {
    color: rgba(255, 255, 255, .48);
    font-weight: 700;
    letter-spacing: 0;
    margin-top: .75rem;
}

.finance-soon {
    cursor: default;
    opacity: .62;
}

.school-page-header {
    border: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.school-page-header .page-title h4 {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.page-title-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 8px;
    color: var(--school-blue);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.session-chip {
    background: #f8fafc;
    border: 1px solid var(--school-line);
    border-radius: 8px;
}

.content {
    padding-top: 1.25rem;
}

.card {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.card-header {
    border-bottom-color: var(--school-line);
}

.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: box-shadow .18s ease, transform .18s ease;
}

.btn:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

.dashboard-hero {
    align-items: center;
    background: linear-gradient(135deg, #1f2937 0%, #0f766e 100%);
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.dashboard-hero h2 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: .25rem 0 .35rem;
}

.dashboard-hero p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 680px;
}

.dashboard-kicker {
    color: #bfdbfe;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.metric-card {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 112px;
    overflow: hidden;
}

.metric-card span {
    color: rgba(255, 255, 255, .82);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin: .2rem 0 0;
}

.metric-card > i {
    font-size: 2.5rem;
    opacity: .75;
}

.metric-blue { background: #2563eb; }
.metric-red { background: #dc2626; }
.metric-green { background: #0f766e; }
.metric-gold { background: #b7791f; }

.workflow-card,
.action-panel a {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    color: var(--school-ink);
    display: block;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.workflow-card:hover,
.action-panel a:hover {
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .12);
    color: var(--school-blue);
    text-decoration: none;
    transform: translateY(-2px);
}

.workflow-card i {
    color: var(--school-blue);
    display: block;
    font-size: 1.6rem;
    margin-bottom: .6rem;
}

.workflow-card span,
.action-panel h5 {
    display: block;
    font-weight: 800;
}

.workflow-card small {
    color: var(--school-muted);
}

.finance-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-grid div {
    background: #f8fafc;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    padding: .9rem;
}

.finance-grid span {
    color: var(--school-muted);
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-grid strong {
    display: block;
    font-size: 1.35rem;
    margin-top: .25rem;
}

.finance-roadmap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.finance-roadmap span {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    font-weight: 700;
    padding: .45rem .65rem;
}

.action-panel a {
    margin-bottom: .55rem;
}

.action-panel a i {
    color: var(--school-teal);
    margin-right: .55rem;
}

.table tbody tr {
    transition: background-color .16s ease;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.app-form label {
    color: #374151;
    font-size: .78rem;
    letter-spacing: 0;
}

.modern-form {
    --form-accent: var(--school-blue);
    --form-accent-soft: #eff6ff;
    --form-field-bg: #f9fafb;
    --form-field-border: #d8dee8;
}

body[class*="route-finance"] .modern-form {
    --form-accent: var(--school-teal);
    --form-accent-soft: #ecfdf5;
}

body[class*="route-payments"] .modern-form {
    --form-accent: #7c3aed;
    --form-accent-soft: #f5f3ff;
}

body[class*="route-marks"] .modern-form,
body[class*="route-exams"] .modern-form {
    --form-accent: var(--school-gold);
    --form-accent-soft: #fffbeb;
}

body[class*="route-pins"] .modern-form {
    --form-accent: var(--school-red);
    --form-accent-soft: #fef2f2;
}

.modern-form fieldset,
.modern-form .form-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #edf1f7;
    border-radius: 8px;
    margin-bottom: 1.1rem;
    padding: 1rem 1rem .2rem;
}

.modern-form fieldset:last-child,
.modern-form .form-section:last-child {
    margin-bottom: 0;
}

.modern-form legend,
.wizard-form > h6 {
    color: var(--school-ink);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .9rem;
}

.modern-form label,
.modern-form .col-form-label,
.app-form label {
    color: #344054;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .35rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.modern-form .text-danger {
    margin-left: .15rem;
}

.modern-form .form-group {
    margin-bottom: 1rem;
}

.modern-form .row {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.modern-form .row > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
}

.form-control,
.select2-selection--single,
.select2-selection--multiple {
    background-color: #fff;
    border-color: #d8dee8;
    border-radius: 8px !important;
    box-shadow: none;
    color: var(--school-ink);
    min-height: 44px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.modern-form .form-control,
.modern-form .select2-selection--single,
.modern-form .select2-selection--multiple {
    background: var(--form-field-bg);
    border-width: 1px;
    padding-left: .85rem;
    padding-right: .85rem;
}

.modern-form textarea.form-control {
    line-height: 1.5;
    min-height: 112px;
    resize: vertical;
}

.modern-form .form-control:hover,
.modern-form .select2-selection--single:hover,
.modern-form .select2-selection--multiple:hover {
    background: #fff;
    border-color: #b8c3d6;
}

.form-control:focus,
.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
    background: #fff;
    border-color: var(--form-accent, var(--school-blue));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.form-control::placeholder {
    color: #98a2b3;
}

.form-control:disabled,
.form-control[readonly],
.select2-container--disabled .select2-selection--single {
    background: #eef2f7;
    color: #667085;
    opacity: 1;
}

.select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: .85rem;
    padding-right: 2rem;
}

.select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.select2-container {
    max-width: 100%;
    width: 100% !important;
}

.select2-dropdown {
    border-color: #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.select2-results__option {
    padding: .6rem .85rem;
}

.select2-results__option[aria-selected=true],
.select2-results__option--highlighted[aria-selected] {
    background: var(--form-accent, var(--school-blue));
    color: #fff;
}

.select2-selection--multiple {
    padding: .2rem .35rem;
}

.select2-selection--multiple .select2-selection__choice {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    color: #075985;
    font-weight: 700;
    margin-top: .25rem;
}

.uniform-uploader,
.form-input-styled {
    max-width: 100%;
}

.uniform-uploader {
    border-radius: 8px;
}

.form-text {
    color: var(--school-muted) !important;
    font-size: .78rem;
}

.modern-form .input-group {
    align-items: stretch;
    flex-wrap: nowrap;
}

.modern-form .input-group .form-control {
    min-width: 0;
}

.modern-form .btn-primary,
.modern-form .btn-success {
    border-color: var(--form-accent);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.modern-form .form-actions {
    align-items: center;
    background: linear-gradient(135deg, var(--form-accent-soft), #ffffff);
    border: 1px solid var(--school-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: .7rem;
    padding: .85rem;
}

.modern-form .form-actions .btn {
    margin-left: 0 !important;
}

.modal-modern-form .modal-body {
    background: #fbfdff;
}

.modal-modern-form .modal-footer {
    background: #f8fafc;
}

.card > form.modern-form,
.tab-pane > form.modern-form {
    padding: 1.25rem;
}

.tab-content > .tab-pane > form.modern-form {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    margin-top: 1rem;
}

.nav-tabs-highlight .nav-link {
    border-radius: 8px 8px 0 0;
    font-weight: 700;
}

.steps {
    background: #f8fafc;
    border-bottom: 1px solid var(--school-line);
    padding: .75rem 1rem 0;
}

.steps ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.steps .current a,
.steps .current a:hover,
.steps .done a {
    background: var(--school-blue);
    border-radius: 8px;
    color: #fff;
}

.steps a {
    border-radius: 8px;
}

.actions {
    background: #f8fafc;
    border-top: 1px solid var(--school-line);
    padding: 1rem;
}

.actions ul {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.actions a,
.actions a:hover {
    border-radius: 8px;
    font-weight: 700;
}

.login-cover {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .86), rgba(15, 118, 110, .76)),
        url("../../logo.png") center 18% / 220px no-repeat,
        #111827;
}

.login-form {
    max-width: 430px;
    width: 100%;
}

.login-form .card {
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .32);
    overflow: hidden;
}

.login-form .card-body {
    padding: 2rem;
}

.login-form img {
    box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}

.auth-screen {
    background: #f4f7fb;
}

.auth-screen main .card {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.auth-screen main .card-header {
    background: #fff;
    border-bottom: 1px solid var(--school-line);
    color: var(--school-ink);
    font-weight: 800;
}

.auth-screen main form label {
    color: #344054;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.form-grid .form-group {
    margin-bottom: .85rem;
}

.form-action-slot {
    padding-top: .45rem;
}

.table-wrapper {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    overflow-x: auto;
}

.table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--school-line);
    color: #374151;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.mark-entry-table .table {
    margin-bottom: 0;
}

.mark-entry-table input.form-control {
    min-width: 78px;
}

.mark-submit-panel {
    background: #f8fafc;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    margin: 1rem 0 0;
    padding: 1rem;
}

.mark-submit-panel .form-control {
    margin-bottom: .8rem;
}

.profile-tile {
    align-items: center;
    background: #fff;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.profile-tile:hover {
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .1);
    transform: translateY(-2px);
}

.profile-tile img {
    border-radius: 50%;
    height: 58px;
    object-fit: cover;
    width: 58px;
}

.profile-tile strong,
.profile-tile span {
    display: block;
}

.profile-tile span {
    color: var(--school-muted);
}

.dataTables_wrapper {
    max-width: 100%;
}

.table-responsive,
.dataTables_scroll,
.dataTables_scrollBody {
    border-radius: 8px;
}

.table td,
.table th {
    vertical-align: middle;
}

.school-calendar-card .card-header {
    align-items: center;
    background: #fff;
}

.school-calendar {
    background: #fff;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    padding: 1rem;
}

.school-calendar .fc-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.school-calendar .fc-toolbar h2 {
    color: var(--school-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.school-calendar .fc-button {
    background: #f8fafc;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    box-shadow: none;
    color: var(--school-ink);
    font-weight: 700;
    height: auto;
    padding: .45rem .75rem;
    text-shadow: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.school-calendar .fc-button:hover,
.school-calendar .fc-state-active {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #fff;
    transform: translateY(-1px);
}

.school-calendar .fc-day-header {
    background: #f8fafc;
    color: #374151;
    font-size: .75rem;
    font-weight: 800;
    padding: .75rem .35rem;
    text-transform: uppercase;
}

.school-calendar .fc-day-number {
    color: var(--school-ink);
    font-weight: 800;
    padding: .45rem;
}

.school-calendar .fc-today {
    background: #eff6ff;
}

.school-calendar .fc-event {
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    padding: .2rem .4rem;
}

.school-calendar .fc-more {
    color: var(--school-blue);
    font-weight: 800;
}

#school-event-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

#school-event-modal .modal-header {
    border-bottom-color: var(--school-line);
}

#school-event-modal .modal-footer {
    border-top-color: var(--school-line);
}

@media (max-width: 991.98px) {
    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-hero-actions {
        justify-content: flex-start;
    }

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

    .content {
        padding: 1rem;
    }

    .card > form.modern-form,
    .tab-pane > form.modern-form,
    .card-body {
        padding: 1rem;
    }

    .modern-form fieldset,
    .modern-form .form-section {
        padding: .85rem .85rem .1rem;
    }
}

@media (max-width: 575.98px) {
    .school-brand-text {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-hero h2 {
        font-size: 1.25rem;
    }

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

    .modern-form .form-group.row {
        display: block;
    }

    .modern-form .form-group.row > label,
    .modern-form .form-group.row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .modern-form .form-actions,
    .actions ul {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .modern-form .form-actions .btn,
    .actions a,
    .login-form .btn {
        display: block;
        width: 100%;
    }

    .steps {
        overflow-x: auto;
        padding-bottom: .5rem;
    }

    .steps ul {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .login-form .card-body {
        padding: 1.35rem;
    }
}

/* Broad interface polish */
.content-wrapper {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 28rem),
        var(--school-canvas);
}

.content {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content > .card,
.content > .row,
.content > form,
.content > .dashboard-hero,
.content > .table-responsive {
    width: 100%;
}

.content > .card {
    margin-left: auto;
    margin-right: auto;
}

.content > .card > .card-body > .row > [class*="col-md-6"]:only-child,
.content > .card > .card-body > .row > [class*="col-md-7"]:only-child,
.content > .card > .card-body > .row > [class*="col-md-8"]:only-child,
.content > .card > .card-body > .row > [class*="col-md-9"]:only-child,
.content > .card > .card-body > .row > [class*="col-md-10"]:only-child {
    flex: 0 0 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
}

.content > .card > .card-body > .row > [class*="offset-md-"]:only-child {
    margin-left: auto !important;
    margin-right: auto !important;
}

.content > .card > .card-body > .row > [class*="col-md-12"]:only-child,
.content > .card > .card-body > .row > [class*="col-12"]:only-child {
    max-width: 100%;
}

.content > .card > .card-body > .row > [class*="col-md-6"]:only-child form,
.content > .card > .card-body > .row > [class*="col-md-7"]:only-child form,
.content > .card > .card-body > .row > [class*="col-md-8"]:only-child form,
.content > .card > .card-body > .row > [class*="col-md-9"]:only-child form,
.content > .card > .card-body > .row > [class*="col-md-10"]:only-child form {
    width: 100%;
}

@media (min-width: 1400px) {
    .content {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .content > .card > .card-body > .row > [class*="col-md-6"]:only-child,
    .content > .card > .card-body > .row > [class*="col-md-7"]:only-child,
    .content > .card > .card-body > .row > [class*="col-md-8"]:only-child,
    .content > .card > .card-body > .row > [class*="col-md-9"]:only-child,
    .content > .card > .card-body > .row > [class*="col-md-10"]:only-child {
        max-width: 1120px;
    }
}

.card {
    overflow: hidden;
}

.card-header {
    background: #fff;
}

.card-title {
    color: #111827;
    font-weight: 800;
    letter-spacing: 0;
}

.card-body > .row:last-child,
.card-body > form:last-child,
.card-body > .table-responsive:last-child {
    margin-bottom: 0;
}

.alert {
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.badge {
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0;
    padding: .35rem .55rem;
}

.dropdown-menu {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.dropdown-item {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-height: 38px;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: #eff6ff;
    color: var(--school-blue);
}

.nav-tabs {
    border-bottom-color: var(--school-line);
    gap: .25rem;
}

.nav-tabs .nav-link {
    color: #475467;
}

.nav-tabs .nav-link.active {
    color: var(--school-blue);
    font-weight: 800;
}

.table {
    color: #1f2937;
}

.table-responsive {
    border: 1px solid var(--school-line);
    background: #fff;
}

.table-responsive .table {
    margin-bottom: 0;
}

.datatable-header,
.datatable-footer {
    background: #fbfdff;
    border-color: var(--school-line);
    padding: .85rem 1rem;
}

.dataTables_filter input,
.dataTables_length select {
    border: 1px solid #d8dee8;
    border-radius: 8px;
    min-height: 38px;
}

.page-header-content {
    background: #fff;
}

.page-title h4 {
    color: #111827;
    font-weight: 800;
}

.sidebar-user .card-body {
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.form-check-label {
    color: #344054;
    font-weight: 700;
}

.form-control-sm {
    min-height: 34px;
}

fieldset {
    min-width: 0;
}

legend {
    color: #111827;
    font-size: .95rem;
    font-weight: 800;
}

.btn-light {
    background: #fff;
    border-color: #d8dee8;
    color: #344054;
}

.btn-light:hover {
    background: #f8fafc;
    color: #111827;
}

.btn-danger {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-primary {
    background: #2563eb;
    border-color: #2563eb;
}

.btn-success {
    background: #0f766e;
    border-color: #0f766e;
}

.modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--school-line);
}

.list-icons-item {
    border-radius: 6px;
}

.list-icons-item:hover {
    background: #eff6ff;
    color: var(--school-blue);
}

@keyframes schoolFadeRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-page-enter {
    animation: schoolFadeRise .28s ease-out both;
}

.card,
.workflow-card,
.profile-tile,
.school-client-card,
.student-report-toolbar,
.empty-state {
    animation: schoolFadeRise .22s ease-out both;
}

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

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.select2-selection:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .26);
    outline-offset: 2px;
}

.content .table-responsive,
.content .table-wrapper {
    max-width: 100%;
}

.content .table-responsive > .table,
.content .table-wrapper > .table,
.dataTables_wrapper .table {
    min-width: 780px;
}

.table td img.rounded-circle {
    object-fit: cover;
}

.empty-state {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #475467;
    display: flex;
    gap: .85rem;
    padding: 1.2rem;
}

.empty-state i {
    align-items: center;
    background: #eff6ff;
    border-radius: 8px;
    color: var(--school-blue);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 1.35rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.empty-state strong {
    color: #111827;
    display: block;
    font-weight: 800;
}

.school-client-card {
    border: 1px solid var(--school-line) !important;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.school-client-card:hover {
    border-color: #bfdbfe !important;
    box-shadow: 0 18px 40px rgba(37, 99, 235, .12);
    transform: translateY(-2px);
}

.school-client-card .card-header {
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

.school-card-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}

.school-card-summary .badge,
.subscription-pill {
    align-items: center;
    display: inline-flex;
    min-height: 28px;
}

.subscription-pill {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 800;
    padding: .35rem .55rem;
    text-transform: uppercase;
}

.subscription-pill.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.subscription-pill.is-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.school-switch-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.student-family-hero {
    align-items: center;
    background: linear-gradient(135deg, #111827, #0f766e);
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.student-family-hero h5 {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0;
    margin: .15rem 0;
}

.student-family-hero p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.student-family-hero .badge {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.child-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 1rem;
}

.child-card {
    background: #fff;
    border: 1px solid var(--school-line);
    border-radius: 8px;
    display: flex;
    gap: .9rem;
    padding: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.child-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .1);
    transform: translateY(-2px);
}

.child-card img {
    border-radius: 50%;
    flex: 0 0 58px;
    height: 58px;
    object-fit: cover;
    width: 58px;
}

.child-card strong,
.child-card span {
    display: block;
}

.child-card strong {
    color: #111827;
    font-weight: 800;
}

.child-card span {
    color: var(--school-muted);
    font-size: .86rem;
}

.child-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .7rem;
}

.student-report-toolbar {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid var(--school-line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    margin-bottom: 1rem;
    padding: 1rem;
}

.student-report-toolbar h4 {
    color: #111827;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .35rem;
}

.student-report-toolbar .student-report-meta {
    color: var(--school-muted);
    font-size: .86rem;
}

.student-report-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.modal-list-button {
    border: 1px solid var(--school-line);
    border-radius: 8px;
    margin-bottom: .45rem;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.modal-list-button:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .09);
    transform: translateY(-1px);
}

.modal-body-scroll {
    max-height: 68vh;
    overflow-y: auto;
}

.context-navigation {
    align-items: center;
    display: flex;
}

.context-navigation .btn {
    border: 1px solid var(--school-line);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.dataTables_wrapper,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody {
    overflow: visible !important;
}

.dataTables_wrapper .dropdown-menu,
.table .dropdown-menu {
    z-index: 2050;
}

@media (min-width: 768px) {
    table.table-responsive,
    .dataTables_wrapper .table-responsive {
        display: table;
        overflow: visible !important;
    }
}

@media (max-width: 767.98px) {
    .student-family-hero,
    .student-report-toolbar .row {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-report-actions,
    .school-switch-actions {
        justify-content: flex-start;
        margin-top: .75rem;
    }

    .student-report-actions .btn,
    .school-switch-actions .btn {
        width: 100%;
    }
}