/* Modern Theme for Church Youth Management */
:root {
    --primary: #4e73df;
    --primary-dark: #224abe;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --light: #f8f9fc;
    --dark: #5a5c69;
    --sidebar-bg: #ffffff;
    --sidebar-bg-gradient: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --sidebar-text: #1c1e21;
    --sidebar-text-muted: #65676b;
    --sidebar-group-text: #65676b;
    --sidebar-hover-bg: #f0f2f5;
    --sidebar-hover-text: #050505;
    --sidebar-active-bg: #e7f3ff;
    --sidebar-active-text: #0866ff;
    --sidebar-icon-bg: rgba(100, 116, 139, 0.09);
    --sidebar-icon-text: #526174;
    --sidebar-active-border: rgba(8, 102, 255, 0.22);
    --sidebar-active-shadow: 0 7px 18px rgba(8, 102, 255, 0.11);
    --sidebar-header-bg: rgba(0, 0, 0, 0.015);
    --sidebar-border: #e4e6eb;
    --sidebar-logo-border: #e4e6eb;
    --card-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
    --border-radius: 0.5rem;
    --transition-fast: 160ms ease;
}

/* Dashboard lower workspace refresh 2026-09-04 */
body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 2rem 0 .85rem;
    padding: 0 .15rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading--compact {
    margin-top: 1.6rem;
}

.dashboard-section-heading > div {
    min-width: 0;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .28rem;
    color: #0b72c9;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading h2 {
    margin: 0;
    color: #1b2c44;
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading p {
    margin: .25rem 0 0;
    color: #718096 !important;
    font-size: .86rem;
    line-height: 1.45;
}

.dashboard-section-counter,
.dashboard-section-link {
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem .8rem;
    border: 1px solid #d7e4f1;
    border-radius: .75rem;
    background: #fff;
    color: #42627f;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-section-link:hover {
    color: #0d6efd;
    border-color: #a9caec;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-section {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-section .card {
    margin-bottom: 0;
    border-radius: 1.05rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .card-header,
body.admin-redesign .main-content .dashboard-modern .dashboard-agenda-card .card-header {
    min-height: 4.3rem;
    padding: .8rem 1rem;
}

.dashboard-card-eyebrow {
    display: block;
    margin-bottom: .1rem;
    color: #8594a8;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .btn-group {
    gap: .28rem;
    padding: .25rem;
    border: 1px solid #e1e8f1;
    border-radius: .75rem;
    background: #f5f8fc;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .btn-group .btn {
    min-width: 2.4rem;
    min-height: 2.25rem;
    padding: .35rem .6rem;
    border: 0;
    border-radius: .55rem !important;
    background: transparent;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .btn-group .btn:nth-child(2) {
    background: #fff;
    box-shadow: 0 3px 10px rgba(31, 55, 82, .08);
}

.dashboard-calendar-section .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

.dashboard-calendar-section .calendar-weekday {
    padding: .2rem 0 .35rem;
    color: #8290a4;
    font-size: .75rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

body.admin-redesign .main-content .dashboard-calendar-section .calendar-day {
    position: relative;
    min-height: 5.3rem;
    padding: .48rem;
    overflow: hidden;
    border: 1px solid #e5ecf4;
    border-radius: .75rem;
    background: #fff;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

body.admin-redesign .main-content .dashboard-calendar-section .calendar-day:nth-child(7n),
body.admin-redesign .main-content .dashboard-calendar-section .calendar-day:nth-child(7n + 1) {
    background: #fbfcfe;
}

body.admin-redesign .main-content .dashboard-calendar-section .calendar-day.has-event {
    border-color: #a9cbed;
    background: #f1f7ff;
}

body.admin-redesign .main-content .dashboard-calendar-section .calendar-day.is-today {
    border-color: #0d6efd;
    background: #eaf3ff;
    box-shadow: inset 0 0 0 1px #0d6efd;
}

.dashboard-calendar-section .calendar-day.is-muted {
    opacity: .34;
}

.dashboard-calendar-section .calendar-day-number {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #33465d;
    border-radius: .55rem;
    font-size: .78rem;
    font-weight: 850;
}

.dashboard-calendar-section .calendar-day.is-today .calendar-day-number {
    color: #fff;
    background: #0d6efd;
}

.dashboard-calendar-section .calendar-event-dots {
    position: absolute;
    top: .7rem;
    right: .55rem;
    display: flex;
    gap: .16rem;
}

.dashboard-calendar-section .calendar-event-dots span {
    width: .38rem;
    height: .38rem;
    display: block;
    border-radius: 999px;
}

.dashboard-calendar-section .calendar-day-title {
    margin-top: .48rem;
    overflow: hidden;
    color: #2d5277;
    font-size: .75rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-calendar-widget].is-loading {
    opacity: .58;
    pointer-events: none;
    transition: opacity .16s ease;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-agenda-card .card-body {
    padding: .7rem !important;
    background: #f8fbff;
}

.dashboard-agenda-card .calendar-event-list {
    display: grid;
    gap: .55rem;
    max-height: 31rem;
    overflow-y: auto;
}

body.admin-redesign .main-content .dashboard-agenda-card .dashboard-agenda-item {
    padding: .8rem;
    border: 1px solid #e1e9f2 !important;
    border-radius: .9rem;
    background: #fff;
}

.dashboard-agenda-row {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
}

.dashboard-agenda-date {
    width: 3.75rem;
    min-height: 3.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .4rem .25rem;
    border: 1px solid #d7e4f1;
    border-radius: .85rem;
    background: #f3f8fe;
    box-shadow: inset 3px 0 0 var(--event-color, #0d6efd);
}

.dashboard-agenda-date strong {
    color: #20344d;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 900;
}

.dashboard-agenda-date span {
    margin-top: .3rem;
    color: #78879a;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-agenda-copy {
    min-width: 0;
}

.dashboard-agenda-title {
    overflow-wrap: anywhere;
    color: #20344d;
    font-size: .875rem;
    font-weight: 850;
    line-height: 1.35;
}

.dashboard-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .65rem;
    margin-top: .25rem;
    color: #758397;
    font-size: .75rem;
}

.dashboard-agenda-description {
    margin-top: .35rem;
    color: #53647a;
    font-size: .75rem;
    line-height: 1.45;
}

.dashboard-agenda-action .btn {
    width: 2.5rem;
    min-height: 2.5rem !important;
    padding: 0;
    border-radius: .65rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-event-create {
    margin-top: 0;
    border-radius: 1rem;
    box-shadow: none;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insights-section {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 1.05rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 1rem;
    left: 1rem;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: #0d6efd;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--quality::before {
    background: #10a88b;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--classes::before {
    background: #7857d8;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--attention::before {
    background: #e14b5a;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card .card-header h6,
body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-card .card-header h6,
body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card .card-header h6 {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.dashboard-card-icon {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 2rem;
    color: #0d6efd;
    border-radius: .6rem;
    background: #eaf3ff;
}

.dashboard-insight-card--quality .dashboard-card-icon {
    color: #0b896f;
    background: #e6f8f2;
}

.dashboard-insight-card--classes .dashboard-card-icon {
    color: #6745ca;
    background: #f0ebff;
}

.dashboard-insight-card--attention .dashboard-card-icon {
    color: #ca3345;
    background: #ffedf0;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card .card-body {
    background: linear-gradient(180deg, #fff, #fbfdff);
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--attention .card-body {
    padding: .7rem !important;
    background: #fffafa;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--attention .list-group {
    display: grid;
    gap: .5rem;
    border: 0;
    box-shadow: none;
    background: transparent;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card--attention .list-group-item {
    padding: .7rem;
    border: 1px solid #f1e2e5 !important;
    border-radius: .75rem;
    background: #fff;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-people-card,
body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-card,
body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card,
body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card {
    margin-bottom: 0;
    border-radius: 1.05rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-people-card .card-body {
    padding: .75rem !important;
    background: #f8fbff;
}

.dashboard-people-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-people-grid .list-group-item {
    min-width: 0;
    padding: .75rem !important;
    border: 1px solid #e2eaf3 !important;
    border-radius: .8rem;
    background: #fff !important;
}

.dashboard-person-avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    flex: 0 0 2.5rem;
    color: #0d6efd;
    border-radius: .75rem;
    background: #eaf3ff;
}

.dashboard-person-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-person-copy > .fw-bold {
    overflow: hidden;
    color: #253950;
    font-size: .78rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-person-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .3rem;
    color: #7a899c;
    font-size: .75rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-operations-section {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-card .card-body,
body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card .card-body {
    padding: .65rem !important;
}

.dashboard-branch-summary-table thead th,
.dashboard-assigned-classes-card thead th {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
    color: #7a8798;
    border: 0;
    background: #f7f9fc;
    font-size: .75rem;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.dashboard-branch-summary-table tbody td,
.dashboard-assigned-classes-card tbody td {
    color: #34465b;
    font-size: .78rem;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card .card-body {
    padding: .65rem !important;
    background: #fffdf7;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card .card-header,
body.admin-redesign .main-content .dashboard-modern .dashboard-people-card .card-header {
    background: #fff !important;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card .card-body > .list-group {
    display: grid;
    gap: .5rem;
    border: 0;
    box-shadow: none;
    background: transparent;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card .list-group-item {
    min-height: 3.55rem;
    padding: .65rem .7rem !important;
    border: 1px solid #eee6cf !important;
    border-radius: .75rem;
    background: #fff !important;
}

body.admin-redesign .main-content .dashboard-modern .birthday-pager {
    margin-top: .55rem;
    padding: .55rem !important;
    border: 1px solid #e3eaf2 !important;
    border-radius: .75rem;
    background: #f8fafc !important;
}

body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card tbody .btn {
    min-height: 2.25rem;
    padding: .35rem .75rem;
    font-size: .75rem;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading h2,
[data-bs-theme="dark"] .dashboard-agenda-title,
[data-bs-theme="dark"] .dashboard-agenda-date strong,
[data-bs-theme="dark"] .dashboard-person-copy > .fw-bold {
    color: #edf4ff !important;
}

[data-bs-theme="dark"] .dashboard-section-counter,
[data-bs-theme="dark"] .dashboard-section-link,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-agenda-card .card-body,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-agenda-card .dashboard-agenda-item,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-people-card .card-body,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-people-grid .list-group-item,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card .card-body,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card .card-body {
    color: #e7edf7;
    border-color: #344155 !important;
    background: #182130 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-calendar-section .calendar-day {
    color: #dbe7f5;
    border-color: #344155;
    background: #141e2c;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-calendar-section .calendar-day.has-event,
[data-bs-theme="dark"] body.admin-redesign .main-content .dashboard-calendar-section .calendar-day.is-today {
    background: #1b3048;
}

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

@media (max-width: 767.98px) {
    body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading {
        align-items: flex-start;
        gap: .75rem;
        margin: 1.35rem 0 .7rem;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading p {
        display: none;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading h2 {
        font-size: 1.08rem;
        line-height: 1.3;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-section-kicker {
        font-size: .75rem;
    }

    .dashboard-section-counter,
    .dashboard-section-link {
        min-height: 2.2rem;
        padding: .45rem .62rem;
        font-size: .75rem;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-section .card,
    body.admin-redesign .main-content .dashboard-modern .dashboard-insight-card,
    body.admin-redesign .main-content .dashboard-modern .dashboard-people-card,
    body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-card,
    body.admin-redesign .main-content .dashboard-modern .dashboard-student-birthday-card,
    body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card {
        border-radius: .9rem;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .card-body {
        padding: .65rem !important;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .card-header {
        min-height: 3.9rem;
        padding: .65rem .7rem;
    }

    .dashboard-calendar-section .calendar-grid {
        gap: .23rem;
    }

    .dashboard-calendar-section .calendar-weekday {
        padding-bottom: .15rem;
        font-size: .75rem;
    }

    body.admin-redesign .main-content .dashboard-calendar-section .calendar-day {
        min-height: 3.55rem;
        padding: .25rem;
        border-radius: .55rem;
    }

    .dashboard-calendar-section .calendar-day-number {
        width: 1.45rem;
        height: 1.45rem;
        border-radius: .42rem;
        font-size: .75rem;
    }

    .dashboard-calendar-section .calendar-event-dots {
        top: auto;
        right: 50%;
        bottom: .28rem;
        transform: translateX(50%);
    }

    .dashboard-calendar-section .calendar-event-dots span {
        width: .3rem;
        height: .3rem;
    }

    .dashboard-calendar-section .calendar-day-title {
        display: none;
    }

    .dashboard-agenda-card .calendar-event-list {
        max-height: 24rem;
    }

    .dashboard-agenda-row {
        grid-template-columns: 3.5rem minmax(0, 1fr) auto;
        gap: .65rem;
    }

    .dashboard-agenda-date {
        width: 3.5rem;
        min-height: 3.5rem;
        padding-inline: .2rem;
    }

    .dashboard-insights-section .chart-shell-line,
    .dashboard-insights-section .chart-shell-doughnut {
        height: 13.5rem;
        min-height: 13.5rem;
    }

    .dashboard-people-grid {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .dashboard-person-copy > .fw-bold {
        white-space: normal;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-card .table-responsive,
    body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card .table-responsive {
        overflow: visible;
    }

    .dashboard-branch-summary-table,
    .dashboard-branch-summary-table tbody,
    .dashboard-branch-summary-table tr,
    .dashboard-assigned-classes-card table,
    .dashboard-assigned-classes-card tbody,
    .dashboard-assigned-classes-card tbody tr {
        display: block;
        width: 100% !important;
    }

    .dashboard-branch-summary-table thead,
    .dashboard-assigned-classes-card thead {
        display: none;
    }

    .dashboard-branch-summary-table tbody,
    .dashboard-assigned-classes-card tbody {
        display: grid;
        gap: .55rem;
    }

    .dashboard-branch-summary-table tbody tr,
    .dashboard-assigned-classes-card tbody tr {
        overflow: hidden;
        border: 1px solid #e1e9f2;
        border-radius: .8rem;
        background: #fff;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-table tbody td,
    body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card tbody td {
        display: grid !important;
        grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
        align-items: center;
        gap: .5rem;
        width: 100% !important;
        padding: .55rem .65rem !important;
        border: 0;
        border-top: 1px solid #edf2f7;
        text-align: left !important;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-branch-summary-table tbody td:first-child,
    body.admin-redesign .main-content .dashboard-modern .dashboard-assigned-classes-card tbody td:first-child {
        border-top: 0;
        background: #f8fbff;
    }

    .dashboard-branch-summary-table tbody td::before,
    .dashboard-assigned-classes-card tbody td::before {
        content: attr(data-label);
        color: #7a8798;
        font-size: .75rem;
        font-weight: 850;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .dashboard-assigned-classes-card tbody td .btn {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body.admin-redesign .main-content .dashboard-modern .dashboard-section-heading {
        flex-direction: column;
    }

    .dashboard-section-counter,
    .dashboard-section-link {
        align-self: stretch;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .card-header {
        align-items: flex-start !important;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .btn-group {
        width: 100%;
    }

    body.admin-redesign .main-content .dashboard-modern .dashboard-calendar-card .btn-group .btn {
        flex: 1 1 0;
    }
}

/* Dashboard overview refresh 2026-09-04 */
.dashboard-modern {
    --dashboard-ink: #13233d;
    --dashboard-muted: #65748a;
    --dashboard-line: #dfe8f2;
    --dashboard-surface: #fff;
    --dashboard-blue: #0d6efd;
    padding: 1.15rem 0 2.5rem;
}

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: clamp(1.35rem, 2.5vw, 2.25rem);
    overflow: hidden;
    color: var(--dashboard-ink);
    border: 1px solid #d9e7f5;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 7% 5%, rgba(14, 165, 233, .16), transparent 22rem),
        radial-gradient(circle at 96% 100%, rgba(250, 204, 21, .11), transparent 19rem),
        linear-gradient(135deg, #f2f9ff 0%, #fff 56%, #fffaf0 100%);
    box-shadow: 0 14px 36px rgba(32, 75, 122, .07);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 14rem;
    height: 14rem;
    pointer-events: none;
    border: 2.1rem solid rgba(13, 110, 253, .045);
    border-radius: 50%;
}

.dashboard-hero-copy,
.dashboard-quick-actions {
    position: relative;
    z-index: 1;
}

.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #0b65bd;
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    margin: .35rem 0 .4rem;
    color: var(--dashboard-ink);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.045em;
}

.dashboard-hero p {
    max-width: 54rem;
    margin: .7rem 0 0;
    color: var(--dashboard-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.dashboard-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .65rem;
    color: #34516f;
    border: 1px solid #d3e3f1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: .75rem;
    font-weight: 750;
}

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    gap: .65rem;
}

.dashboard-quick-actions a {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .9rem;
    color: #173653;
    border: 1px solid #d7e4ef;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 7px 18px rgba(32, 75, 122, .05);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, color .16s ease;
}

.dashboard-quick-actions a:hover {
    transform: translateY(-2px);
    color: var(--dashboard-blue);
    border-color: #acccec;
}

.dashboard-quick-actions i {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    color: #0d6efd;
    border-radius: .65rem;
    background: #ebf4ff;
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.4rem;
}

.dashboard-overview-card {
    position: relative;
    min-width: 0;
    min-height: 8rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    overflow: hidden;
    color: var(--dashboard-ink);
    border: 1px solid var(--dashboard-line);
    border-radius: 1.05rem;
    background: var(--dashboard-surface);
    box-shadow: 0 8px 24px rgba(32, 75, 122, .045);
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-overview-card:hover {
    transform: translateY(-2px);
    color: var(--dashboard-ink);
    border-color: #bad0e7;
    box-shadow: 0 13px 28px rgba(32, 75, 122, .08);
}

.dashboard-overview-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    flex: 0 0 3rem;
    color: var(--tone, #0d6efd);
    border-radius: .9rem;
    background: var(--tone-soft, #eaf2ff);
    font-size: 1.05rem;
}

.dashboard-overview-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-overview-copy small {
    overflow: hidden;
    color: var(--dashboard-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-overview-copy strong {
    margin: .16rem 0 .08rem;
    color: var(--dashboard-ink);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.1;
    font-weight: 950;
}

.dashboard-overview-copy em {
    overflow: hidden;
    color: var(--dashboard-muted);
    font-size: .72rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-overview-arrow {
    align-self: end;
    color: #9aabc0;
    font-size: .72rem;
}

.dashboard-tone-primary { --tone: #0d6efd; --tone-soft: #eaf2ff; }
.dashboard-tone-info { --tone: #0b94c9; --tone-soft: #e6f7fc; }
.dashboard-tone-success { --tone: #12966f; --tone-soft: #e7f7f1; }
.dashboard-tone-warning { --tone: #c77c00; --tone-soft: #fff4db; }
.dashboard-tone-danger { --tone: #dc3545; --tone-soft: #fff0f2; }
.dashboard-tone-secondary { --tone: #697386; --tone-soft: #eef1f5; }

.dashboard-legacy-kpis {
    display: none !important;
}

.dashboard-modern .card {
    overflow: hidden;
    border: 1px solid var(--dashboard-line) !important;
    border-radius: 1.05rem;
    box-shadow: 0 8px 24px rgba(32, 75, 122, .045) !important;
}

.dashboard-modern .card-header {
    min-height: 3.65rem;
    display: flex;
    align-items: center;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e6edf5;
    background: #fff !important;
}

.dashboard-modern .card-header h6 {
    color: #244666 !important;
    font-size: .9rem;
}

.dashboard-modern .list-group-item {
    border-color: #edf2f7 !important;
}

.dashboard-announcement-section .list-group-item {
    min-height: 4.4rem;
}

.dashboard-calendar-section .calendar-day {
    border-color: #e2eaf3;
    border-radius: .7rem;
    box-shadow: none;
}

.dashboard-calendar-section .calendar-day.has-event {
    border-color: rgba(13, 110, 253, .24);
    box-shadow: none;
}

.dashboard-calendar-section .calendar-event-list {
    max-height: 34rem;
    overflow-y: auto;
}

.dashboard-insights-section .chart-shell-line,
.dashboard-insights-section .chart-shell-doughnut {
    height: 16.5rem;
}

.dashboard-insights-section .chart-shell-bar {
    max-height: 30rem;
}

.dashboard-modern .table > :not(caption) > * > * {
    padding-top: .78rem;
    padding-bottom: .78rem;
    border-color: #e8eef5;
}

.dashboard-event-create {
    overflow: hidden;
    border: 1px solid var(--dashboard-line);
    border-radius: 1.05rem;
    background: var(--dashboard-surface);
    box-shadow: 0 8px 24px rgba(32, 75, 122, .045);
}

.dashboard-event-create summary {
    min-height: 3.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    color: #244666;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 850;
    list-style: none;
}

.dashboard-event-create summary::-webkit-details-marker {
    display: none;
}

.dashboard-event-create summary::after {
    content: "\f078";
    flex: 0 0 auto;
    color: #7890a8;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform .18s ease;
}

.dashboard-event-create[open] summary::after {
    transform: rotate(180deg);
}

.dashboard-event-create summary span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.dashboard-event-create summary small {
    margin-left: auto;
    color: var(--dashboard-muted);
    font-size: .72rem;
    font-weight: 700;
}

.dashboard-event-create-body {
    padding: 1rem;
    border-top: 1px solid #e6edf5;
}

.dashboard-account-birthdays .card-body,
.dashboard-modern [data-birthday-widget] .card-body {
    background: #fff;
}

[data-bs-theme="dark"] .dashboard-modern {
    --dashboard-ink: #edf4ff;
    --dashboard-muted: #aebbd0;
    --dashboard-line: #344155;
    --dashboard-surface: #182130;
}

[data-bs-theme="dark"] .dashboard-hero {
    border-color: #344b68;
    background: linear-gradient(135deg, #172a3e, #17202e 58%, #292519);
}

[data-bs-theme="dark"] .dashboard-hero-meta span,
[data-bs-theme="dark"] .dashboard-quick-actions a,
[data-bs-theme="dark"] .dashboard-modern .card,
[data-bs-theme="dark"] .dashboard-modern .card-header,
[data-bs-theme="dark"] .dashboard-event-create,
[data-bs-theme="dark"] .dashboard-account-birthdays .card-body,
[data-bs-theme="dark"] .dashboard-modern [data-birthday-widget] .card-body {
    color: var(--dashboard-ink);
    border-color: var(--dashboard-line) !important;
    background: #182130 !important;
}

[data-bs-theme="dark"] .dashboard-modern .card-header h6,
[data-bs-theme="dark"] .dashboard-overview-copy strong,
[data-bs-theme="dark"] .dashboard-hero h1 {
    color: var(--dashboard-ink) !important;
}

@media (max-width: 1199.98px) {
    .dashboard-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .dashboard-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .dashboard-modern {
        padding-top: .65rem;
    }

    .dashboard-hero {
        gap: 1rem;
        margin-bottom: .7rem;
        padding: 1.05rem;
        border-radius: 1rem;
    }

    .dashboard-hero h1 {
        font-size: 2rem;
    }

    .dashboard-hero p {
        margin-top: .55rem;
        font-size: .875rem;
    }

    .dashboard-hero-meta {
        margin-top: .75rem;
    }

    .dashboard-hero-meta span {
        font-size: .68rem;
    }

    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .dashboard-quick-actions a {
        min-height: 2.8rem;
        padding: .55rem .65rem;
        border-radius: .75rem;
        font-size: .77rem;
    }

    .dashboard-quick-actions i {
        width: 1.7rem;
        height: 1.7rem;
        flex-basis: 1.7rem;
        border-radius: .5rem;
    }

    .dashboard-overview-grid {
        gap: .55rem;
        margin-bottom: 1rem;
    }

    .dashboard-overview-card {
        min-height: 7.1rem;
        grid-template-columns: 1fr auto;
        gap: .4rem;
        padding: .8rem;
        border-radius: .85rem;
    }

    .dashboard-overview-icon {
        width: 2.25rem;
        height: 2.25rem;
        flex-basis: 2.25rem;
        border-radius: .65rem;
        font-size: .85rem;
    }

    .dashboard-overview-copy {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .dashboard-overview-copy small {
        font-size: .63rem;
    }

    .dashboard-overview-copy strong {
        font-size: 1.35rem;
    }

    .dashboard-overview-copy em {
        display: none;
    }

    .dashboard-overview-arrow {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
    }

    .dashboard-modern .card {
        border-radius: .9rem;
    }

    .dashboard-modern .card-header {
        min-height: 3.25rem;
        padding: .7rem .8rem;
    }

    .dashboard-event-create {
        border-radius: .9rem;
    }

    .dashboard-event-create summary {
        min-height: 3.25rem;
        padding: .7rem .8rem;
    }

    .dashboard-event-create summary small {
        display: none;
    }

    .dashboard-event-create-body {
        padding: .8rem;
    }

    .dashboard-announcement-section .list-group-item {
        min-height: 0;
        padding: .75rem !important;
    }

    .dashboard-announcement-section .icon-circle {
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 2.25rem;
        margin-right: .65rem !important;
    }

    .dashboard-calendar-section {
        --bs-gutter-x: .8rem;
        --bs-gutter-y: .8rem;
    }

    .dashboard-calendar-section .card-body,
    .dashboard-insights-section .card-body {
        padding: .8rem;
    }

    .dashboard-insights-section {
        --bs-gutter-x: .8rem;
        --bs-gutter-y: .8rem;
    }

    .dashboard-insights-section .chart-shell-line,
    .dashboard-insights-section .chart-shell-doughnut {
        height: 14rem;
    }
}

@media (max-width: 380px) {
    .dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-overview-card {
        min-height: 5.4rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .dashboard-overview-copy {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Academic-year profile: modern read-only view for current and archived data. */
.academic-year-profile-page {
    --year-profile-blue: #0d6efd;
    --year-profile-cyan: #10bfe3;
    --year-profile-ink: #172033;
    --year-profile-muted: #667085;
    --year-profile-line: #dfe7f2;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.academic-year-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.45rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 15%, rgba(255, 255, 255, .2), transparent 26%),
        linear-gradient(135deg, #0d6efd 0%, #0a86dd 48%, #14c1d9 100%);
    box-shadow: 0 16px 38px rgba(13, 110, 253, .18);
    overflow: hidden;
}

.academic-year-profile-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 22px;
    font-size: 2rem;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.academic-year-profile-hero-content {
    min-width: 0;
}

.academic-year-profile-eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.academic-year-profile-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 850;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.academic-year-profile-hero p {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 850px;
    margin: .85rem 0 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.45;
}

.academic-year-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}

.academic-year-profile-badges > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 750;
    background: rgba(255, 255, 255, .14) !important;
}

.academic-year-profile-back {
    align-self: start;
    min-height: 42px;
    border: 0;
    color: #1557a6;
    font-weight: 750;
    box-shadow: 0 8px 20px rgba(6, 54, 120, .14);
}

.academic-year-profile-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}

.academic-year-profile-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    min-height: 92px;
    padding: .9rem;
    border: 1px solid var(--year-profile-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 55, 87, .07);
}

.academic-year-profile-stat-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--year-stat-color, #0d6efd);
    background: color-mix(in srgb, var(--year-stat-color, #0d6efd) 12%, white);
}

.academic-year-profile-stat > div {
    display: grid;
    min-width: 0;
}

.academic-year-profile-stat strong {
    color: var(--year-profile-ink);
    font-size: 1.45rem;
    line-height: 1.1;
}

.academic-year-profile-stat span:last-child {
    color: var(--year-profile-muted);
    font-size: .76rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.academic-year-profile-stat-primary { --year-stat-color: #0d6efd; }
.academic-year-profile-stat-cyan { --year-stat-color: #0bbbdc; }
.academic-year-profile-stat-success { --year-stat-color: #168f5b; }
.academic-year-profile-stat-warning { --year-stat-color: #d69a00; }
.academic-year-profile-stat-danger { --year-stat-color: #e1344a; }
.academic-year-profile-stat-slate { --year-stat-color: #667085; }

.academic-year-profile-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.academic-year-profile-info-card {
    min-width: 0;
    margin: 0 !important;
}

.academic-year-profile-info-card .student-profile-card-header h2 {
    margin: 0;
    font-size: 1.03rem;
}

.academic-year-profile-content {
    min-width: 0;
    border: 1px solid var(--year-profile-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(31, 55, 87, .08);
    overflow: hidden;
}

.academic-year-profile-tabs {
    padding: .8rem .8rem 0;
    border-bottom: 1px solid var(--year-profile-line);
    background: #f8faff;
}

.academic-year-profile-tabs .nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

body.admin-redesign .main-content .academic-year-profile-tabs .nav-link {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px;
    padding: .7rem .9rem !important;
    border: 1px solid transparent !important;
    border-radius: 12px 12px 0 0 !important;
    color: #536078 !important;
    font-weight: 750;
    background: transparent !important;
    box-shadow: none !important;
}

body.admin-redesign .main-content .academic-year-profile-tabs .nav-link span {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
}

.academic-year-profile-tabs .nav-link b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .4rem;
    border-radius: 999px;
    color: #445069;
    background: #e8edf5;
}

body.admin-redesign .main-content .academic-year-profile-tabs .nav-link.active {
    border-color: var(--year-profile-line) !important;
    border-bottom-color: #fff !important;
    color: var(--year-profile-blue) !important;
    background: #fff !important;
}

.academic-year-profile-tabs .nav-link.active b {
    color: #fff;
    background: var(--year-profile-blue);
}

.academic-year-profile-tab-content {
    padding: 1.15rem;
}

.academic-year-profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.academic-year-profile-section-heading h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--year-profile-ink);
    font-size: 1.12rem;
}

.academic-year-profile-section-heading h2 i {
    color: var(--year-profile-blue);
}

.academic-year-profile-section-heading p {
    margin: .25rem 0 0;
    color: var(--year-profile-muted);
    font-size: .86rem;
}

.academic-year-profile-section-heading > span {
    flex: 0 0 auto;
    padding: .4rem .7rem;
    border-radius: 999px;
    color: #0b5ac6;
    font-size: .8rem;
    font-weight: 800;
    background: #eaf3ff;
}

.academic-year-profile-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(190px, 1fr) minmax(120px, .5fr);
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid #e5ebf3;
    border-radius: 13px;
    background: #f9fbfe;
}

.academic-year-profile-filters label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.academic-year-profile-filters label > span {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #536078;
    font-size: .78rem;
    font-weight: 750;
}

.academic-year-profile-student-table-wrap {
    border: 1px solid var(--year-profile-line);
    border-radius: 13px;
    overflow: hidden;
}

.academic-year-profile-student-table {
    width: 100%;
    margin: 0;
}

.academic-year-profile-student-table thead th {
    padding: .85rem;
    border-bottom: 1px solid var(--year-profile-line);
    color: #536078;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    background: #f5f8fc;
}

.academic-year-profile-student-table thead th:first-child {
    text-align: left;
}

.academic-year-profile-student-table tbody td {
    padding: .8rem .85rem;
    border-color: #e9eef5;
    text-align: center;
}

.academic-year-profile-student-table tbody tr:hover {
    background: #f8fbff;
}

body.admin-redesign .main-content .academic-year-profile-student-name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--year-profile-blue) !important;
    font-weight: 800 !important;
    line-height: 1.35;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    background: transparent !important;
    box-shadow: none !important;
}

.academic-year-profile-class-name {
    color: #b41454;
    font-weight: 800;
}

.academic-year-profile-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .9rem;
}

.academic-year-profile-pagination > span {
    color: #5e6a80;
    font-size: .85rem;
    font-weight: 700;
}

.academic-year-profile-pagination .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
}

.academic-year-profile-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.academic-year-profile-class-card {
    display: grid;
    gap: .9rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--year-profile-line);
    border-radius: 15px;
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.academic-year-profile-class-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.academic-year-profile-class-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #0d6efd;
    background: #e9f2ff;
}

.academic-year-profile-class-card h3,
.academic-year-profile-team-card h3 {
    margin: 0;
    color: var(--year-profile-ink);
    font-size: 1rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.academic-year-profile-class-card header p {
    margin: .15rem 0 0;
    color: var(--year-profile-muted);
    font-size: .82rem;
}

.academic-year-profile-class-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.academic-year-profile-class-metrics > span {
    display: grid;
    justify-items: center;
    gap: .15rem;
    min-width: 0;
    padding: .65rem .35rem;
    border-radius: 10px;
    color: #5f6c82;
    font-size: .72rem;
    text-align: center;
    background: #f1f5fa;
}

.academic-year-profile-class-metrics i { color: #0d6efd; }
.academic-year-profile-class-metrics b { color: var(--year-profile-ink); font-size: 1rem; }

.academic-year-profile-assignees h4 {
    margin: 0 0 .55rem;
    color: #5d687c;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.academic-year-profile-assignees ol {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.academic-year-profile-assignees li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .55rem;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #fff;
}

.academic-year-profile-assignees li > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #0d6efd;
    background: #e9f2ff;
}

.academic-year-profile-assignees li > span {
    min-width: 0;
    color: #273247;
    font-size: .84rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.academic-year-profile-assignees li > em { font-style: normal; }

.academic-year-profile-muted,
.academic-year-profile-class-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0;
    color: var(--year-profile-muted);
    font-size: .82rem;
}

.academic-year-profile-class-note {
    padding: .65rem;
    border-radius: 9px;
    background: #fff8df;
}

.academic-year-profile-class-card > .btn {
    justify-self: start;
}

.academic-year-profile-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.academic-year-profile-team-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--year-profile-line);
    border-radius: 13px;
    background: #fff;
}

.academic-year-profile-team-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--year-team-color, #0d6efd);
    background: color-mix(in srgb, var(--year-team-color, #0d6efd) 12%, white);
}

.academic-year-profile-team-card p {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .25rem 0 0;
    color: var(--year-profile-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.academic-year-profile-empty {
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: 2.5rem 1rem;
    border: 1px dashed #cad5e4;
    border-radius: 14px;
    color: var(--year-profile-muted);
    text-align: center;
    background: #fafcff;
}

.academic-year-profile-empty > i {
    color: #9aa8bc;
    font-size: 2rem;
}

.academic-year-profile-empty strong { color: var(--year-profile-ink); }

@media (max-width: 1199.98px) {
    .academic-year-profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .academic-year-profile-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .academic-year-profile-page,
    .academic-year-profile-page > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .academic-year-profile-hero {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: .8rem;
        padding: 1rem;
        border-radius: 15px;
    }

    .academic-year-profile-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 1.35rem;
    }

    .academic-year-profile-hero h1 { font-size: 1.55rem; }
    .academic-year-profile-hero p { grid-column: 1 / -1; margin-top: .65rem; font-size: .84rem; }
    .academic-year-profile-badges { grid-column: 1 / -1; }
    .academic-year-profile-badges > span { font-size: .72rem; }
    .academic-year-profile-back { grid-column: 1 / -1; width: 100%; }

    .academic-year-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .academic-year-profile-stat {
        align-items: flex-start;
        min-height: 90px;
        padding: .7rem;
    }

    .academic-year-profile-stat-icon { width: 36px; height: 36px; }
    .academic-year-profile-stat strong { font-size: 1.2rem; }
    .academic-year-profile-overview,
    .academic-year-profile-class-grid,
    .academic-year-profile-team-grid { grid-template-columns: minmax(0, 1fr); }

    .academic-year-profile-info-card .student-profile-info-grid { grid-template-columns: minmax(0, 1fr); }

    .academic-year-profile-tabs { padding: .55rem .55rem 0; }
    .academic-year-profile-tabs .nav { gap: .3rem; }

    body.admin-redesign .main-content .academic-year-profile-tabs .nav-link {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        gap: .2rem;
        min-height: 72px;
        padding: .45rem .15rem !important;
        font-size: .72rem !important;
        text-align: center;
    }

    body.admin-redesign .main-content .academic-year-profile-tabs .nav-link span { text-align: center; }
    .academic-year-profile-tabs .nav-link b { min-width: 23px; height: 23px; font-size: .68rem; }
    .academic-year-profile-tab-content { padding: .7rem; }

    .academic-year-profile-section-heading { align-items: stretch; }
    .academic-year-profile-section-heading > span { align-self: flex-start; }
    .academic-year-profile-section-heading h2 { font-size: 1rem; }

    .academic-year-profile-filters { grid-template-columns: minmax(0, 1fr); padding: .7rem; }
    .academic-year-profile-page-size { display: none !important; }

    .academic-year-profile-student-table-wrap {
        border: 0;
        overflow: visible;
    }

    body.admin-redesign .main-content .academic-year-profile-student-table,
    body.admin-redesign .main-content .academic-year-profile-student-table tbody {
        display: grid !important;
        gap: .75rem;
        width: 100% !important;
        min-width: 0 !important;
    }

    .academic-year-profile-student-table thead { display: none; }

    body.admin-redesign .main-content .academic-year-profile-student-table tbody tr {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid var(--year-profile-line);
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(31, 55, 87, .06);
        overflow: hidden;
    }

    body.admin-redesign .main-content .academic-year-profile-student-table tbody tr[hidden] { display: none !important; }

    body.admin-redesign .main-content .academic-year-profile-student-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(82px, 29%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        width: 100% !important;
        min-width: 0 !important;
        padding: .72rem .8rem !important;
        border: 0;
        border-bottom: 1px solid #e9eef5;
        text-align: left !important;
        box-sizing: border-box;
    }

    .academic-year-profile-student-table tbody td:last-child { border-bottom: 0; }

    .academic-year-profile-student-table tbody td::before {
        content: attr(data-label);
        color: #677286;
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    body.admin-redesign .main-content .academic-year-profile-student-table .academic-year-profile-student-name {
        display: block !important;
        justify-self: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .academic-year-profile-student-table .badge,
    .academic-year-profile-class-name { justify-self: start; text-align: left; }

    body.admin-redesign .main-content .academic-year-profile-view-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
    }

    .academic-year-profile-pagination { justify-content: space-between; }
    .academic-year-profile-pagination .btn span { display: none; }

    .academic-year-profile-class-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .academic-year-profile-class-card > header > .badge { grid-column: 2; justify-self: start; }
    .academic-year-profile-assignees li { grid-template-columns: auto minmax(0, 1fr); }
    .academic-year-profile-assignees li > em { grid-column: 2; justify-self: start; }
    .academic-year-profile-team-card { grid-template-columns: auto minmax(0, 1fr); }
    .academic-year-profile-team-card > .badge { grid-column: 2; justify-self: start; }

    #historicalStudentModal .modal-dialog {
        width: auto;
        max-width: calc(100% - .7rem);
        height: calc(100% - .7rem);
        margin: .35rem;
    }
}

/* Unified user-role badges. Every variant reserves the same 2px inner border,
   using transparent color when no visible border is required. */
.role-badge {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.75rem !important;
    padding: 0.32rem 0.62rem !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
    white-space: nowrap;
    box-shadow: none;
}

.role-badge--superadmin {
    background: linear-gradient(135deg, #7f0000 0%, #b71c1c 38%, #e53935 68%, #f4511e 100%) !important;
    background-size: 180% 180% !important;
    border-color: #ffdf3d !important;
    box-shadow: 0 3px 10px rgba(183, 28, 28, 0.42) !important;
    text-shadow: 0 1px 2px rgba(60, 0, 0, 0.55);
    animation: role-badge-superadmin-shift 3.6s ease-in-out infinite;
}

.role-badge--huynh-truong {
    background: #c62828 !important;
    border-color: #ffdf3d !important;
}

.role-badge--du-truong {
    background: #c62828 !important;
}

.role-badge--tro-ta {
    background: #c62828 !important;
    border-color: #083b8f !important;
}

.role-badge--tro-uy {
    background: #c62828 !important;
    border-color: #c7cbd1 !important;
}

.role-badge--giao-ly-vien {
    background: #0d47a1 !important;
}

.role-badge--default {
    background: #6c757d !important;
}

.role-badge.role-badge-compact {
    min-height: 1.5rem !important;
    padding: 0.22rem 0.5rem !important;
    font-size: 0.72rem !important;
}

/* Keep every class assignment readable and consistent: the role always sits
   on its own line below the assignee name instead of wrapping unpredictably. */
.class-management-table .class-assignment-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: 0.3rem;
}

.class-management-table .class-assignment-name {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.class-management-table .class-assignment-role {
    justify-self: start;
}

.class-management-table .class-delete-form {
    min-width: 0;
}

/* Student detail is injected into an existing modal. Keep its avatar styles in
   the main stylesheet so the page CSP applies them reliably. */
.student-detail-avatar {
    width: 150px;
    height: 200px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #d9e1ec);
    border-radius: 10px;
    background: #f4f7fb;
}

.student-detail-avatar img,
.student-detail-avatar-placeholder {
    width: 100%;
    height: 100%;
}

.student-detail-avatar img {
    display: block;
    object-fit: cover;
}

.student-profile-photo-preview {
    display: block;
    width: 150px;
    height: 200px;
    object-fit: cover;
    margin-inline: auto;
    background: #f4f7fb;
}

.student-detail-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7b8794;
    background: linear-gradient(180deg, #f8fafc 0%, #e9eef5 100%);
    font-size: 4rem;
}

@keyframes role-badge-superadmin-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .role-badge--superadmin {
        animation: none;
    }
}

/* Vietnamese date/month/datetime controls. Native browser calendars follow
   the browser or operating-system locale, so these controls keep date
   selection consistently Vietnamese throughout the app. */
.vi-date-picker-input {
    cursor: pointer;
    background-color: var(--bs-body-bg, #fff) !important;
    caret-color: transparent;
}

.vi-date-picker-input.is-empty {
    color: #6c757d;
}

.vi-date-picker-popover {
    position: fixed;
    z-index: 2100;
    padding: .85rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid #cfd8e6;
    border-radius: .85rem;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .2);
}

.vi-date-picker-popover[hidden] {
    display: none !important;
}

.vi-date-picker-header,
.vi-date-picker-selects,
.vi-date-picker-footer,
.vi-date-picker-footer-actions,
.vi-date-picker-time-row label {
    display: flex;
    align-items: center;
}

.vi-date-picker-header {
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .7rem;
}

.vi-date-picker-selects {
    flex: 1;
    justify-content: center;
    gap: .4rem;
}

.vi-date-picker-month,
.vi-date-picker-year {
    min-width: 0;
    padding: .35rem .3rem;
    font-weight: 800;
    color: #1f2937;
    background: #f8fafc;
    border: 1px solid #d8e0eb;
    border-radius: .5rem;
}

.vi-date-picker-month { flex: 1; }
.vi-date-picker-year { width: 5.25rem; }

.vi-date-picker-nav {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    padding: 0;
    color: #0d6efd;
    background: #eef5ff;
    border: 1px solid #cadcf7;
    border-radius: .55rem;
}

.vi-date-picker-nav:hover,
.vi-date-picker-nav:focus-visible {
    color: #fff;
    background: #0d6efd;
    outline: none;
}

.vi-date-picker-weekdays,
.vi-date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .22rem;
}

.vi-date-picker-weekdays {
    margin-bottom: .25rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 850;
    text-align: center;
}

.vi-date-picker-day {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    color: #1f2937;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .45rem;
    font-weight: 750;
}

.vi-date-picker-day:hover:not(:disabled),
.vi-date-picker-day:focus-visible:not(:disabled) {
    color: #0d6efd;
    background: #eaf2ff;
    border-color: #adcaff;
    outline: none;
}

.vi-date-picker-day.is-outside-month { color: #a1aab8; }
.vi-date-picker-day.is-today { border-color: #0d6efd; }
.vi-date-picker-day.is-selected {
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
}
.vi-date-picker-day:disabled,
.vi-date-picker-month-button:disabled { opacity: .35; cursor: not-allowed; }

.vi-date-picker-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .2rem 0 .15rem;
}

.vi-date-picker-month-button {
    min-height: 2.45rem;
    padding: .35rem .25rem;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d8e0eb;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 800;
}

.vi-date-picker-month-button:hover:not(:disabled),
.vi-date-picker-month-button:focus-visible:not(:disabled),
.vi-date-picker-month-button.is-selected {
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
    outline: none;
}

.vi-date-picker-time-row {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid #e4e9f0;
}

.vi-date-picker-time-row label {
    justify-content: space-between;
    width: 100%;
    gap: .75rem;
    color: #475569;
    font-size: .85rem;
    font-weight: 800;
}

.vi-date-picker-time {
    width: 8.25rem;
    padding: .35rem .5rem;
    color: #1f2937;
    background: #f8fafc;
    border: 1px solid #d8e0eb;
    border-radius: .5rem;
}

.vi-date-picker-footer {
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid #e4e9f0;
}

.vi-date-picker-footer-actions { gap: .35rem; }

.vi-date-picker-footer button {
    padding: .35rem .5rem;
    color: #0d6efd;
    background: transparent;
    border: 0;
    border-radius: .4rem;
    font-weight: 800;
}

.vi-date-picker-footer button:hover,
.vi-date-picker-footer button:focus-visible {
    background: #eaf2ff;
    outline: none;
}

.vi-date-picker-done {
    color: #fff !important;
    background: #0d6efd !important;
}

@media (max-width: 575.98px) {
    .vi-date-picker-popover { padding: .7rem; }
    .vi-date-picker-day { font-size: .9rem; }
}

/* Focused fixes for the Zalo development notice and bulk student statuses. */
body.admin-redesign .main-content .development-warning {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start !important;
    gap: 0.85rem !important;
    width: 100%;
    padding: 1rem 1.15rem !important;
    text-align: left !important;
}

body.admin-redesign .main-content .development-warning__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #842029;
    font-size: 1.15rem;
}

body.admin-redesign .main-content .development-warning__content {
    min-width: 0;
    text-align: left !important;
    overflow-wrap: anywhere;
}

body.admin-redesign .main-content .bulk-study-status--success,
[data-bs-theme="dark"] body.admin-redesign .main-content .bulk-study-status--success {
    color: #fff !important;
}

body.admin-redesign .main-content .bulk-study-status--warning,
[data-bs-theme="dark"] body.admin-redesign .main-content .bulk-study-status--warning {
    color: #3d2f00 !important;
}

body.admin-redesign .main-content .bulk-study-status--danger,
body.admin-redesign .main-content .bulk-study-status--secondary,
[data-bs-theme="dark"] body.admin-redesign .main-content .bulk-study-status--danger,
[data-bs-theme="dark"] body.admin-redesign .main-content .bulk-study-status--secondary {
    color: #fff !important;
}

@media (max-width: 575.98px) {
    body.admin-redesign .main-content .development-warning {
        gap: 0.65rem !important;
        padding: 0.85rem !important;
    }

    body.admin-redesign .main-content .development-warning__icon {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 1rem;
    }
}

/* Floating page scroll controls */
.page-scroll-controls {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
    z-index: 990;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-scroll-controls.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.page-scroll-btn {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(33, 37, 41, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #f58220;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(8px);
    font-size: 1.15rem;
    line-height: 1;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.page-scroll-btn:hover,
.page-scroll-btn:focus-visible {
    background: #fff;
    border-color: rgba(245, 130, 32, 0.45);
    color: #f26f00;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    outline: none;
}

.page-scroll-btn:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
    .page-scroll-controls {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
        gap: 8px;
    }

    .page-scroll-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

body {
    background-color: #f8f9fc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #5a5c69;
    overflow-x: hidden;
    max-width: 100%;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

/* Layout */
.wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

/* Sidebar navigation refresh 2026-09-04 */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    align-self: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    background: var(--sidebar-bg-gradient);
    color: var(--sidebar-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: margin-left 0.28s ease, transform 0.28s ease;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.07);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1000;
}

#sidebar ul.components {
    margin: 0;
    padding: 14px 0 12px;
    overscroll-behavior: contain;
}

@supports (height: 100dvh) {
    #sidebar {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    position: relative;
    padding: 18px 20px 16px;
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
    text-align: center;
}

#sidebar .sidebar-brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 3px;
    color: var(--sidebar-text);
    text-align: center;
    text-decoration: none;
    border-radius: 13px;
}

#sidebar .sidebar-brand:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.24);
    outline-offset: 2px;
}

#sidebar .sidebar-brand-logo {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: block;
    margin: 0 auto 8px;
    padding: 5px;
    border: 0 !important;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain;
    box-sizing: border-box;
}

#sidebar .sidebar-brand-copy {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 2px;
    text-align: center;
}

#sidebar .sidebar-brand-handle,
#sidebar .sidebar-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .sidebar-brand-handle {
    color: var(--sidebar-text);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.2;
}

#sidebar .sidebar-brand-name {
    color: var(--sidebar-text-muted);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.25;
}

#sidebar .nav-group-title {
    display: block;
    margin: 0;
    padding: 11px 20px 6px;
    color: var(--sidebar-group-text);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

#sidebar .nav-group-title:first-child {
    padding-top: 5px;
}

#sidebar .sidebar-nav-item {
    position: relative;
    margin: 0;
}

#sidebar .sidebar-nav-link {
    position: relative;
    min-height: 44px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: calc(100% - 10px);
    margin-right: 10px;
    padding: 9px 18px;
    color: var(--sidebar-text-muted);
    border: 0;
    border-radius: 0 999px 999px 0;
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#sidebar .sidebar-nav-link:hover,
#sidebar .sidebar-nav-link:focus-visible {
    color: var(--sidebar-hover-text);
    background: var(--sidebar-hover-bg);
    transform: translateX(3px);
}

#sidebar .sidebar-nav-link:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.2);
    outline-offset: 1px;
}

#sidebar .sidebar-nav-item.active > .sidebar-nav-link {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
    box-shadow: none;
    font-weight: 700;
}

#sidebar .sidebar-nav-item.active > .sidebar-nav-link::before {
    content: none;
}

#sidebar .sidebar-nav-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: var(--sidebar-icon-text);
    border-radius: 0;
    background: transparent;
    line-height: 1;
    transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

#sidebar .sidebar-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

#sidebar .sidebar-line-icon {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

#sidebar .sidebar-nav-link:hover .sidebar-nav-icon,
#sidebar .sidebar-nav-link:focus-visible .sidebar-nav-icon {
    color: var(--sidebar-hover-text);
}

#sidebar .sidebar-nav-item.active > .sidebar-nav-link .sidebar-nav-icon {
    color: var(--sidebar-active-text);
    background: transparent;
    transform: none;
}

#sidebar .sidebar-nav-label {
    min-width: 0;
    overflow: hidden;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .sidebar-nav-item.active > .sidebar-nav-link .sidebar-nav-label {
    font-weight: 700;
}

#sidebar .sidebar-count {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: #e43b4f;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

#sidebar .sidebar-nav-external {
    width: 14px;
    height: 14px;
    color: var(--sidebar-group-text);
}

#sidebar .sidebar-nav-link.dropdown-toggle::after {
    width: 0.54rem;
    height: 0.54rem;
    margin: 0 3px 0 0;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

#sidebar .sidebar-nav-link.dropdown-toggle {
    min-height: 46px;
}

#sidebar .sidebar-nav-link.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

#sidebar .sidebar-submenu {
    position: relative;
    margin: 5px 8px 6px 18px;
    padding: 4px 0 4px 15px;
}

#sidebar .sidebar-submenu::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 1px;
    background: var(--sidebar-border);
}

#sidebar .sidebar-submenu li {
    margin: 1px 0;
}

#sidebar .sidebar-submenu-link {
    min-height: 40px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--sidebar-text-muted);
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease;
}

#sidebar .sidebar-submenu-icon {
    width: 18px;
    height: 18px;
    color: var(--sidebar-group-text);
}

#sidebar .sidebar-submenu-link:hover,
#sidebar .sidebar-submenu-link:focus-visible {
    color: var(--sidebar-hover-text);
    background: var(--sidebar-hover-bg);
}

#sidebar .sidebar-submenu-link.sidebar-current-link {
    color: var(--sidebar-active-text) !important;
    background: var(--sidebar-active-bg);
    font-weight: 600;
}

#sidebar .sidebar-submenu-link.sidebar-current-link .sidebar-submenu-icon {
    color: currentColor;
}

#sidebar .sidebar-submenu-link-danger:not(.sidebar-current-link) {
    color: #cf3649;
}

#sidebar .sidebar-system-link {
    color: var(--sidebar-text-muted);
}

body[data-sidebar-tone="dark"] {
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.82);
    --sidebar-group-text: rgba(255, 255, 255, 0.52);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.13);
    --sidebar-hover-text: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.17);
    --sidebar-active-text: #ffffff;
    --sidebar-icon-bg: rgba(255, 255, 255, 0.1);
    --sidebar-icon-text: rgba(255, 255, 255, 0.86);
    --sidebar-active-border: rgba(255, 255, 255, 0.2);
    --sidebar-active-shadow: none;
    --sidebar-header-bg: rgba(0, 0, 0, 0.08);
    --sidebar-border: transparent;
    --sidebar-logo-border: rgba(255, 255, 255, 0.28);
}

body[data-sidebar-tone="dark"] #sidebarClose {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body[data-sidebar-tone="dark"] #sidebar .sidebar-nav-item.active > .sidebar-nav-link .sidebar-nav-icon {
    color: #ffffff;
    background: transparent;
}

/* Content Area */
#content {
    width: calc(100% - 250px);
    margin-left: 250px;
    padding: 0;
    min-height: 100vh;
    transition: all 0.3s;
    min-width: 0;
    overflow-x: hidden;
}

#sidebar.active + #content {
    width: 100%;
    margin-left: 0;
}

.main-content {
    padding: 25px 14px;
    min-width: 0;
    max-width: 100%;
}

/* The layout shell and several pages both use container-fluid. Remove the
   duplicated Bootstrap gutters so the workspace can use the full viewport. */
.main-content > .container-fluid,
.main-content > .container-fluid > .container-fluid {
    --bs-gutter-x: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Topbar */
.navbar {
    padding: 0.5rem 1rem;
    background-color: #fff;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .1);
    z-index: 999;
}

/* Cards */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(58, 59, 69, .16);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e3e6f0;
    padding: 12px 20px;
    font-weight: 700;
    color: var(--primary);
}

/* Icons */
.icon-circle {
    height: 3rem;
    width: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Table Responsive Fix */
.table-responsive {
    border-radius: var(--border-radius);
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wide {
    min-width: 1100px;
}

/* Badge Soft Colors */
.badge-soft-primary {
    background: rgba(78, 115, 223, 0.1);
    color: #4e73df;
}

.badge-soft-success {
    background: rgba(28, 200, 138, 0.1);
    color: #1cc88a;
}

.badge-soft-warning {
    background: rgba(246, 194, 62, 0.1);
    color: #f6c23e;
}

.badge-soft-danger {
    background: rgba(231, 74, 59, 0.1);
    color: #e74a3b;
}

/* User Management Assignment Styles */
.assignment-branch-badge {
    background-color: #f0f7ff !important;
    color: #1e40af !important;
    border: 1px solid #dbeafe !important;
    font-weight: 600;
    padding: 0.35em 0.65em;
}

[data-bs-theme="dark"] .assignment-branch-badge {
    background-color: rgba(30, 64, 175, 0.2) !important;
    color: #bfdbfe !important;
    border-color: rgba(30, 64, 175, 0.3) !important;
}

.assignment-class-item {
    color: #212529;
    font-size: 0.85rem;
    line-height: 1.4;
}

[data-bs-theme="dark"] .assignment-class-item {
    color: #e3e6f0;
}

.assignment-role-label {
    color: #4b5563;
    font-weight: 400;
}

[data-bs-theme="dark"] .assignment-role-label {
    color: #9ca3af;
}

.assignment-empty {
    color: #6c757d !important;
    font-style: italic;
    font-weight: 400;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    #sidebar.active {
        margin-left: 0;
    }

    #sidebar .sidebar-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--sidebar-header-bg);
        backdrop-filter: blur(10px);
    }

    #sidebar ul.components {
        min-height: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #sidebar .sidebar-brand {
        padding-right: 3px;
    }

    #sidebar .sidebar-nav-link {
        min-height: 46px;
    }

    #content {
        width: 100%;
        margin-left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    #sidebarClose {
        position: absolute;
        top: 9px;
        right: 7px;
        opacity: 0.8;
        padding: 0.8rem;
        z-index: 1001;
    }

    #sidebarClose:hover {
        opacity: 1;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 0.35rem;
        padding-bottom: 0.25rem;
    }

    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
    }
}

/* Dark Mode Adjustments */
[data-bs-theme="dark"] {
    --light: #212529;
    --dark: #f8f9fc;
    --sidebar-bg-gradient: linear-gradient(180deg, #224abe 10%, #1a1e21 100%);
    --card-shadow: 0 .15rem 1.75rem 0 rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] body {
    background-color: #1a1e21;
    color: #aeb1b7;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header {
    background-color: #212529;
    border-color: #373b3e;
}

[data-bs-theme="dark"] .text-gray-800 {
    color: #e3e6f0 !important;
}

[data-bs-theme="dark"] .text-gray-600 {
    color: #aeb1b7 !important;
}

[data-bs-theme="dark"] .table {
    color: #aeb1b7;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    color: #aeb1b7;
    border-color: #373b3e;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #212529;
    color: #aeb1b7;
}

[data-bs-theme="dark"] .form-control-solid {
    background-color: #2c3034;
    border-color: #373b3e;
    color: #e3e6f0;
}

[data-bs-theme="dark"] .form-control-solid:focus {
    background-color: #2c3034;
    color: #fff;
}

/* Improved dark theme coverage */
.theme-toggle-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b86d00 !important;
    background: rgba(255, 193, 7, 0.16);
    border: 1px solid rgba(255, 193, 7, 0.28);
    box-shadow: 0 8px 18px rgba(33, 37, 41, 0.08);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    color: #8a5200 !important;
    background: rgba(255, 193, 7, 0.24);
    box-shadow: 0 10px 24px rgba(33, 37, 41, 0.14);
    transform: translateY(-1px);
}

.theme-toggle-btn i {
    font-size: 1rem;
    line-height: 1;
}

[data-bs-theme="dark"] {
    --primary: #7aa2ff;
    --primary-dark: #9bb8ff;
    --secondary: #a7b0c0;
    --success: #4dd4a3;
    --info: #5ed3e8;
    --warning: #ffd166;
    --danger: #ff7b86;
    --light: #1f2937;
    --dark: #f4f7fb;
    --card-shadow: 0 .75rem 2rem rgba(0, 0, 0, .36);
    --bs-body-bg: #111827;
    --bs-body-color: #d7dde7;
    --bs-card-bg: #1f2937;
    --bs-border-color: #374151;
    --bs-secondary-bg: #253247;
    --bs-tertiary-bg: #182231;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #content,
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .container-fluid {
    background-color: #111827;
    color: #d7dde7;
}

[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: #1f2937 !important;
    color: #d7dde7 !important;
    border-color: #374151 !important;
}

[data-bs-theme="dark"] .topbar {
    box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.28) !important;
}

[data-bs-theme="dark"] .topbar .nav-link,
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .dropdown-toggle,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-gray-800,
[data-bs-theme="dark"] .text-gray-700 {
    color: #eaf0f8 !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-gray-600,
[data-bs-theme="dark"] .text-gray-500,
[data-bs-theme="dark"] .text-gray-400,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .small {
    color: #a7b0c0 !important;
}

[data-bs-theme="dark"] .theme-toggle-btn {
    color: #facc15 !important;
    background: linear-gradient(135deg, #334155, #111827);
    border-color: #475569;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.28);
}

[data-bs-theme="dark"] .theme-toggle-btn:hover,
[data-bs-theme="dark"] .theme-toggle-btn:focus {
    color: #fde68a !important;
    background: linear-gradient(135deg, #3f4f66, #1f2937);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.36);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .filter-section,
[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .dataTables_wrapper {
    background-color: #1f2937;
    color: #d7dde7;
    border-color: #374151;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .dropdown-header,
[data-bs-theme="dark"] .accordion-header,
[data-bs-theme="dark"] .accordion-button,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead,
[data-bs-theme="dark"] tfoot {
    background-color: #182231 !important;
    color: #eaf0f8 !important;
    border-color: #374151 !important;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #253247 !important;
    color: #f4f7fb !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #d7dde7;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #253247;
    color: #f4f7fb;
}

[data-bs-theme="dark"] .dropdown-divider,
[data-bs-theme="dark"] hr {
    border-color: #374151;
}

[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table > :not(caption) > * > *,
[data-bs-theme="dark"] table.dataTable,
[data-bs-theme="dark"] table.dataTable tbody td,
[data-bs-theme="dark"] table.dataTable tbody th {
    color: #d7dde7;
    background-color: transparent;
    border-color: #374151;
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td {
    background-color: #182231 !important;
    color: #eaf0f8 !important;
    border-color: #374151 !important;
}

[data-bs-theme="dark"] .table tbody tr:hover > *,
[data-bs-theme="dark"] table.dataTable tbody tr:hover > * {
    background-color: rgba(122, 162, 255, 0.08) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, 0.035);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control-solid,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #111827 !important;
    color: #eaf0f8 !important;
    border-color: #4b5563 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #7aa2ff !important;
    box-shadow: 0 0 0 0.2rem rgba(122, 162, 255, 0.18) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #7b8798;
    opacity: 1;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-check-input:disabled {
    background-color: #253247 !important;
    color: #8b95a7 !important;
    border-color: #3b4658 !important;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #111827;
    border-color: #5b6578;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #7aa2ff;
    border-color: #7aa2ff;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.text-dark.bg-light,
[data-bs-theme="dark"] .badge.border {
    background-color: #253247 !important;
    color: #dbeafe !important;
    border-color: #4b5563 !important;
}

[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-dark {
    color: #d7dde7;
    background-color: #1f2937;
    border-color: #4b5563;
}

[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-dark:hover {
    color: #f8fafc;
    background-color: #253247;
    border-color: #7aa2ff;
}

[data-bs-theme="dark"] .alert {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(94, 211, 232, 0.12);
    color: #b9f2fb;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 209, 102, 0.14);
    color: #ffe3a3;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(77, 212, 163, 0.12);
    color: #bcf5df;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(255, 123, 134, 0.13);
    color: #ffd1d6;
}

[data-bs-theme="dark"] .page-link {
    color: #93c5fd;
    background-color: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .page-item.active .page-link {
    color: #fff;
    background-color: #2563eb;
    border-color: #2563eb;
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    color: #7b8798;
    background-color: #182231;
    border-color: #374151;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: #d7dde7 !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #d7dde7 !important;
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] .json-viewer {
    background-color: #0f172a !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow-lg {
    box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .page-scroll-btn {
    background: rgba(31, 41, 55, 0.94);
    border-color: #4b5563;
    color: #ffb86b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

[data-bs-theme="dark"] .page-scroll-btn:hover,
[data-bs-theme="dark"] .page-scroll-btn:focus {
    background: #253247;
    color: #ffd166;
}

/* Profile specific */
.profile-avatar-lg {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--bs-card-bg, #fff);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.user-avatar-sm {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* --- Optimized Table & DataTables Styles --- */

/* 1. Spacing between filter and table card */
.auto-filter-form + .card,
.filter-section + .card,
form + .card {
    margin-top: 24px;
}

/* Unified list filters: one loading treatment for AJAX and normal GET forms. */
.auto-filter-form {
    position: relative;
}

.auto-filter-form .auto-filter-js-hidden {
    display: none !important;
}

.auto-filter-status {
    position: absolute;
    right: 0.75rem;
    bottom: -1.55rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.78rem;
    font-weight: 600;
    pointer-events: none;
}

.auto-filter-status::before {
    width: 0.8rem;
    height: 0.8rem;
    content: '';
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: auto-filter-spin 0.65s linear infinite;
}

.auto-filter-form.is-filter-loading :is(.form-control, .form-select, .input-group-text) {
    cursor: progress;
}

.is-filter-loading[data-auto-filter-result],
.auto-filter-form + .is-filter-loading,
tbody.is-filter-loading,
.is-filter-loading[id$="-container"],
.is-filter-loading[id$="-body"] {
    opacity: 0.55;
    transition: opacity 0.16s ease;
}

@keyframes auto-filter-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auto-filter-status::before { animation: none; }
}

/* 2. Enhanced Table Padding and Typography */
.table {
    margin-bottom: 0;
}

.table th,
.table td {
    padding: 14px 16px !important; /* Force more breathing room */
    vertical-align: middle;
}

.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e3e6f0;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    white-space: nowrap;
    color: var(--dark);
}

[data-bs-theme="dark"] .table thead th {
    background-color: #2c3034;
    border-bottom-color: #373b3e;
    color: #e3e6f0;
}

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

.table tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.03);
}

.student-row-detail {
    cursor: pointer;
}

.student-row-detail:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: -3px;
}

.student-row-detail:active > * {
    background-color: rgba(13, 110, 253, 0.08) !important;
}

/* Account management table and detail modal */
.user-management-table {
    min-width: 880px;
}

.user-management-table th:first-child {
    width: 25%;
}

.user-management-table th:nth-child(2) {
    width: 34%;
}

.user-management-table th:last-child {
    width: 190px;
}

.user-row-detail {
    cursor: pointer;
}

.user-row-detail:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: -3px;
}

.user-row-detail:active > * {
    background-color: rgba(13, 110, 253, 0.08) !important;
}

.user-table-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-table-identity .user-avatar-sm {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid #e3e6f0;
    background: #f8f9fc;
    object-fit: cover;
    flex: 0 0 48px;
}

.user-table-name {
    line-height: 1.3;
}

.user-assignment-summary {
    display: grid;
    gap: 0.35rem;
}

.user-assignment-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #4a4d57;
    font-size: 0.875rem;
    line-height: 1.35;
}

.user-assignment-line i {
    width: 16px;
    margin-top: 2px;
    color: #6c757d;
    text-align: center;
}

.user-assignment-line.user-assignment-leader,
.user-assignment-line.user-assignment-leader i {
    color: #9a6700;
}

.user-detail-profile {
    background: #f7f8fb;
}

.user-detail-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e3e6f0;
}

.user-detail-avatar {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0.25rem 1rem rgba(31, 45, 61, 0.14);
    background: #f1f3f8;
}

.user-detail-heading {
    min-width: 0;
}

.user-detail-heading h4 {
    margin: 0 0 0.25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.user-detail-section {
    margin-top: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
}

.user-detail-section h6 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.user-detail-section-muted {
    margin-bottom: 0;
}

.user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.user-detail-item {
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #e6e9f0;
    border-radius: 6px;
    background: #fbfcfe;
    overflow-wrap: anywhere;
}

.user-detail-item-wide {
    grid-column: 1 / -1;
}

.user-detail-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-detail-assignments {
    display: grid;
    gap: 0.5rem;
}

.user-detail-assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #e8ebf1;
}

.user-detail-assignment:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .user-table-responsive {
        overflow: visible;
    }

    .user-management-table {
        display: block;
        min-width: 0;
        margin: 0;
    }

    .user-management-table thead {
        display: none;
    }

    .user-management-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .user-management-table tr.user-row-detail {
        display: block;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.06);
    }

    .user-management-table tr.user-row-detail > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.65rem 0.85rem;
        border: 0;
        border-top: 1px solid #edf0f4;
        text-align: left !important;
    }

    .user-management-table tr.user-row-detail > td::before {
        content: attr(data-label);
        flex: 0 0 84px;
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .user-management-table tr.user-row-detail > td:first-child {
        display: block;
        padding: 0.9rem;
        border-top: 0;
        background: #f8faff;
    }

    .user-management-table tr.user-row-detail > td:first-child::before {
        display: none;
    }

    .user-management-table .user-assignment-summary {
        flex: 1;
    }

    .user-management-table .action-buttons {
        flex: 1;
        flex-wrap: wrap;
    }

    .user-detail-hero {
        align-items: flex-start;
        padding: 1.1rem;
    }

    .user-detail-avatar {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .user-detail-section {
        padding: 1rem;
    }

    .user-detail-grid {
        grid-template-columns: 1fr;
    }

    .user-detail-item-wide {
        grid-column: auto;
    }

    .user-detail-assignment {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Academic-year actions: keep text readable on desktop and compact on phones. */
.academic-year-row-actions .academic-year-activate-form {
    display: flex;
    margin: 0;
}

@media (min-width: 768px) {
    body.admin-redesign .main-content .academic-year-management-table th:last-child,
    body.admin-redesign .main-content .academic-year-management-table td:last-child {
        width: 300px !important;
        min-width: 300px !important;
    }

    body.admin-redesign .main-content .academic-year-management-table .academic-year-row-actions {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: none !important;
        gap: .45rem !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    body.admin-redesign .main-content .academic-year-management-table .academic-year-row-actions :is(
        .academic-year-view-action,
        .academic-year-activate-action
    ) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 .65rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .35rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .academic-year-management-table .academic-year-edit-action {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .academic-year-row-actions .academic-year-action-label {
        display: none !important;
    }

    .academic-year-row-actions .academic-year-activate-form {
        width: 100%;
        min-width: 0;
    }
}

/* Account bulk actions, presence and import guide - 20260718 */
.user-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: #f8fafc;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.user-bulk-toolbar.has-selection {
    border-color: #f3b4ba;
    background: #fff7f8;
}

.user-bulk-summary,
.user-table-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.user-bulk-icon {
    color: #0d6efd;
}

.user-selection-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.user-selection-control .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.user-selection-control .form-check-input:disabled {
    cursor: not-allowed;
}

.user-presence-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    min-width: 116px;
}

.user-presence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.35rem 0.58rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.user-presence-badge.is-online {
    color: #087443;
    background: #e8f8ef;
}

.user-presence-badge.is-offline {
    color: #59636e;
    background: #eef1f4;
}

.user-presence-dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: currentColor;
}

.user-last-seen {
    color: #78828d;
    line-height: 1.25;
}

.import-column-guide {
    padding: 1rem;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #f8fafc;
}

.import-column-guide-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.import-column-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.import-column-item {
    min-width: 0;
    padding: 0.78rem;
    border: 1px solid #e0e6ed;
    border-radius: 7px;
    background: #fff;
}

.import-column-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.42rem;
}

.import-column-requirement {
    flex: 0 0 auto;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    color: #687380;
    background: #edf1f5;
    font-size: 0.68rem;
    font-weight: 700;
}

.import-column-requirement.is-required {
    color: #a21d2d;
    background: #fdecef;
}

.import-column-item p {
    margin: 0 0 0.5rem;
    color: #59636e;
    font-size: 0.82rem;
    line-height: 1.45;
}

.import-column-example {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.76rem;
}

.import-column-example span {
    flex: 0 0 auto;
    color: #7a8591;
}

.import-column-example code {
    min-width: 0;
    color: #1359b4;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .import-column-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .user-bulk-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 0.72rem;
    }

    .user-bulk-toolbar .btn {
        width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        padding: 0.5rem 0.75rem !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity {
        grid-template-columns: auto 48px minmax(0, 1fr) !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity > .min-w-0 {
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-name,
    body.admin-redesign .main-content .user-management-table .user-table-identity .small {
        width: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .user-presence-status {
        align-items: flex-end;
        min-width: 0;
        max-width: 66%;
        text-align: right;
    }

    .user-last-seen {
        overflow-wrap: anywhere;
    }

    .user-import-layout .input-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .user-import-layout .input-group > .form-control,
    .user-import-layout .input-group > .btn {
        width: 100% !important;
        border-radius: 6px !important;
    }

    .import-column-guide {
        padding: 0.72rem;
    }

    .import-column-guide-heading {
        flex-direction: column;
        gap: 0.6rem;
    }

    .import-column-item {
        padding: 0.7rem;
    }
}

/* Score workspace */
.score-table-scroll {
    position: relative;
    width: 100%;
    overflow: auto;
    border: 1px solid #e3e6f0;
    border-radius: 6px;
    background: #fff;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.score-entry-table,
.score-summary-table {
    width: max-content !important;
    min-width: 100%;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0;
}

.score-entry-table .score-name-cell {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    white-space: normal;
}

.score-entry-table .score-column-heading,
.score-entry-table .score-entry-cell {
    width: 118px;
    min-width: 118px;
}

.score-entry-table .score-average-cell {
    width: 108px;
    min-width: 108px;
    background: #e8f4f8;
}

.score-entry-table .score-result-cell {
    width: 126px;
    min-width: 126px;
    background: #eef8f1;
}

.score-value-input {
    min-width: 82px;
    min-height: 44px;
    font-size: 1rem;
    font-weight: 700;
    border-color: #cfd7e3;
}

.score-value-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.16);
}

.score-row-dirty > td {
    background-color: #fffaf0;
}

.score-row-dirty > .score-average-cell {
    background-color: #e3f2f7;
}

.score-row-dirty > .score-result-cell {
    background-color: #e8f6ed;
}

.score-save-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.score-summary-table .score-summary-name {
    min-width: 250px;
    max-width: 300px;
    white-space: normal;
}

.score-class-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

@media (max-width: 767.98px) {
    .score-class-actions {
        max-width: 260px;
        margin: 0 auto;
    }

    .score-class-actions .btn {
        min-height: 38px;
        min-width: 86px;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .score-class-actions .score-year-action {
        min-width: 128px;
    }
}

@media (min-width: 768px) {
    .score-entry-table .score-name-cell {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #fff;
        box-shadow: none;
    }

    .score-entry-table thead .score-name-cell {
        z-index: 5;
        background: #f8f9fa;
    }

    .score-entry-table tbody tr:hover > .score-name-cell {
        background: #f5f8ff;
    }
}

@media (max-width: 767.98px) {
    .score-page-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .score-page-header h1 {
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .score-page-actions > .btn {
        flex: 1 1 0;
    }

    .score-workspace-card {
        border: 0;
        background: transparent;
        box-shadow: none !important;
    }

    .score-workspace-body {
        padding: 0;
    }

    .score-table-scroll {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        scrollbar-gutter: auto;
    }

    .score-entry-table,
    .score-summary-table,
    .score-entry-table tbody,
    .score-summary-table tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .score-entry-table thead,
    .score-summary-table thead {
        display: none;
    }

    .score-entry-table tbody,
    .score-summary-table tbody {
        display: grid;
        gap: 12px;
    }

    .score-entry-table tbody tr,
    .score-summary-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #dfe5ee;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(34, 47, 62, 0.07);
    }

    .score-entry-table tbody td,
    .score-summary-table tbody td {
        display: flex;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 10px !important;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-right: 1px solid #e7ebf1;
        border-bottom: 1px solid #e7ebf1;
        text-align: left !important;
    }

    .score-entry-table tbody td::before,
    .score-summary-table tbody td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .score-entry-table tbody .score-name-cell,
    .score-summary-table tbody .score-summary-name {
        grid-column: 1 / -1;
        position: static;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 13px 14px !important;
        background: #f8faff;
        box-shadow: none;
        font-size: 1rem;
    }

    .score-entry-table tbody .score-name-cell::before,
    .score-summary-table tbody .score-summary-name::before {
        color: #0d6efd;
    }

    .score-entry-table .score-entry-cell {
        background: #fff;
    }

    .score-value-input {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 0.65rem 0.75rem;
        font-size: 16px;
    }

    .score-entry-table tbody .score-average-cell,
    .score-entry-table tbody .score-result-cell {
        width: auto;
        min-width: 0;
    }

    .score-save-bar {
        position: fixed;
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 20;
        padding: 10px;
        border: 1px solid #d9e2ec;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -4px 16px rgba(33, 37, 41, 0.12);
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: stretch;
    }

    #scoresForm {
        padding-bottom: 94px;
    }

    .score-save-button {
        min-height: 50px;
        width: 100%;
    }

    .score-save-status {
        text-align: center;
        font-size: 0.85rem;
    }
}

[data-bs-theme="dark"] .score-table-scroll,
[data-bs-theme="dark"] .score-entry-table tbody tr,
[data-bs-theme="dark"] .score-summary-table tbody tr {
    background: #212529;
    border-color: #373b3e;
}

[data-bs-theme="dark"] .score-entry-table .score-name-cell {
    background: #212529;
}

[data-bs-theme="dark"] .score-entry-table thead .score-name-cell,
[data-bs-theme="dark"] .score-entry-table tbody .score-name-cell,
[data-bs-theme="dark"] .score-summary-table tbody .score-summary-name {
    background: #2c3034;
}

/* Manual attendance workspace */
.attendance-table-scroll {
    position: relative;
    width: 100%;
    overflow: auto;
    border: 1px solid #e3e6f0;
    border-radius: 6px;
    background: #fff;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.attendance-entry-table,
.attendance-summary-table {
    width: max-content !important;
    min-width: 100%;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0;
}

.attendance-entry-table .attendance-index-cell,
.attendance-summary-table .attendance-index-cell {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    text-align: center;
}

.attendance-entry-table .attendance-name-cell {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    white-space: normal;
}

.attendance-entry-table .attendance-session-heading,
.attendance-entry-table .attendance-session-cell {
    width: 168px;
    min-width: 168px;
}

.attendance-status-group {
    min-height: 48px;
}

.attendance-status-group .btn {
    min-width: 44px;
    padding: 0.5rem;
}

.attendance-status-text {
    display: none;
}

.attendance-row-dirty > td {
    background-color: #fffaf0;
}

.attendance-save-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.attendance-summary-table .attendance-summary-name {
    min-width: 250px;
    max-width: 300px;
    white-space: normal;
}

@media (min-width: 768px) {
    .attendance-entry-table .attendance-index-cell {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #fff;
    }

    .attendance-entry-table .attendance-name-cell {
        position: sticky;
        left: var(--attendance-index-width, 56px);
        z-index: 3;
        background: #fff;
        box-shadow: 8px 0 12px -12px rgba(33, 37, 41, 0.65);
    }

    .attendance-entry-table thead .attendance-index-cell,
    .attendance-entry-table thead .attendance-name-cell {
        z-index: 5;
        background: #f8f9fa;
    }

    .attendance-entry-table tbody tr:hover > .attendance-index-cell,
    .attendance-entry-table tbody tr:hover > .attendance-name-cell {
        background: #f5f8ff;
    }
}

@media (max-width: 767.98px) {
    .attendance-page-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .attendance-page-header h1 {
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .attendance-page-actions > .btn {
        flex: 1 1 0;
    }

    .attendance-workspace-card {
        border: 0;
        background: transparent;
        box-shadow: none !important;
    }

    .attendance-workspace-body {
        padding: 0;
    }

    .attendance-table-scroll {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        scrollbar-gutter: auto;
    }

    .attendance-entry-table,
    .attendance-summary-table,
    .attendance-entry-table tbody,
    .attendance-summary-table tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .attendance-entry-table thead,
    .attendance-summary-table thead {
        display: none;
    }

    .attendance-entry-table tbody,
    .attendance-summary-table tbody {
        display: grid;
        gap: 12px;
    }

    .attendance-entry-table tbody tr,
    .attendance-summary-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #dfe5ee;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(34, 47, 62, 0.07);
    }

    .attendance-entry-table tbody td,
    .attendance-summary-table tbody td {
        display: flex;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 10px !important;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        border: 0;
        border-right: 1px solid #e7ebf1;
        border-bottom: 1px solid #e7ebf1;
        text-align: left !important;
    }

    .attendance-entry-table tbody td::before,
    .attendance-summary-table tbody td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .attendance-entry-table tbody .attendance-index-cell,
    .attendance-summary-table tbody .attendance-index-cell {
        display: none;
    }

    .attendance-entry-table tbody .attendance-name-cell,
    .attendance-summary-table tbody .attendance-summary-name {
        grid-column: 1 / -1;
        position: static;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 13px 14px !important;
        background: #f8faff;
        box-shadow: none;
        font-size: 1rem;
    }

    .attendance-entry-table tbody .attendance-name-cell::before,
    .attendance-summary-table tbody .attendance-summary-name::before {
        color: #0d6efd;
    }

    .attendance-entry-table tbody .attendance-session-cell {
        grid-column: 1 / -1;
        width: auto;
        min-width: 0;
        padding: 12px !important;
        background: #fff;
    }

    .attendance-status-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        min-height: 52px;
        box-shadow: none !important;
    }

    .attendance-status-group .btn {
        min-width: 0;
        min-height: 52px;
        padding: 0.45rem 0.25rem;
        border-radius: 0 !important;
        font-size: 0.82rem;
    }

    .attendance-status-group .btn:first-of-type {
        border-radius: 6px 0 0 6px !important;
    }

    .attendance-status-group .btn:last-of-type {
        border-radius: 0 6px 6px 0 !important;
    }

    .attendance-status-text {
        display: inline;
        white-space: nowrap;
    }

    .attendance-save-bar {
        position: fixed;
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 20;
        padding: 10px;
        border: 1px solid #d9e2ec;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -4px 16px rgba(33, 37, 41, 0.12);
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: stretch;
    }

    #attendanceForm {
        padding-bottom: 94px;
    }

    .attendance-save-button {
        min-height: 50px;
        width: 100%;
    }

    .attendance-save-status {
        text-align: center;
        font-size: 0.85rem;
    }
}

[data-bs-theme="dark"] .attendance-table-scroll,
[data-bs-theme="dark"] .attendance-entry-table tbody tr,
[data-bs-theme="dark"] .attendance-summary-table tbody tr {
    background: #212529;
    border-color: #373b3e;
}

[data-bs-theme="dark"] .attendance-entry-table .attendance-index-cell,
[data-bs-theme="dark"] .attendance-entry-table .attendance-name-cell {
    background: #212529;
}

[data-bs-theme="dark"] .attendance-entry-table thead .attendance-index-cell,
[data-bs-theme="dark"] .attendance-entry-table thead .attendance-name-cell,
[data-bs-theme="dark"] .attendance-entry-table tbody .attendance-name-cell,
[data-bs-theme="dark"] .attendance-summary-table tbody .attendance-summary-name {
    background: #2c3034;
}

/* 3. DataTables Control Spacing */
.dataTables_wrapper .row:first-child {
    margin-bottom: 20px;
    padding: 0 15px;
    align-items: center;
}

.dataTables_length label,
.dataTables_filter label {
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_filter input {
    margin-left: 0 !important;
    border-radius: 0.35rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d3e2;
}

.dataTables_info {
    padding-top: 1rem !important;
    font-size: 0.85rem;
}

.dataTables_paginate {
    padding-top: 1rem !important;
}

/* 4. Action Buttons Spacing */
.action-buttons,
.btn-group-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.btn-group .btn,
.action-buttons .btn {
    padding: 0.4rem 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem !important; /* Force rounded corners even if in group */
}

.btn {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

/* 5. Card bọc bảng thoáng hơn */
.table-card .card-body {
    padding: 20px 24px;
    overflow-x: auto;
}

.card {
    max-width: 100%;
}

.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper .table {
    width: 100% !important;
}

.dataTables_filter input {
    max-width: 250px;
}

/* 6. Responsive Adjustments */
@media (max-width: 768px) {
    .main-content {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    
    .table th,
    .table td {
        padding: 10px 12px !important;
        font-size: 0.9rem;
    }
    
    .dataTables_wrapper .row:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .dataTables_length, .dataTables_filter {
        width: 100%;
    }
    
    .dataTables_filter input {
        width: 100% !important;
    }
}

/* Stats Card Soft Backgrounds & Utilities */
.bg-primary-soft { background-color: rgba(78, 115, 223, 0.1) !important; }
.bg-success-soft { background-color: rgba(28, 200, 138, 0.1) !important; }
.bg-info-soft { background-color: rgba(54, 185, 204, 0.1) !important; }
.bg-warning-soft { background-color: rgba(246, 194, 62, 0.1) !important; }
.bg-danger-soft { background-color: rgba(231, 74, 59, 0.1) !important; }
.bg-secondary-soft { background-color: rgba(133, 135, 150, 0.1) !important; }

.badge-soft-info {
    background: rgba(54, 185, 204, 0.1);
    color: #36b9cc;
}

/* Page Header and Action Toolbars */
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

@media (max-width: 768px) {
    .page-header-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .page-header-actions .btn {
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

.action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dashboard-chart-card .card-body {
    min-height: 0;
    overflow: hidden;
}

.chart-shell {
    position: relative;
    width: 100%;
    height: 260px;
    min-height: 220px;
}

.chart-shell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.chart-shell-line {
    height: 280px;
}

.chart-shell-doughnut {
    height: 260px;
    max-width: 420px;
    margin: 0 auto;
}

.chart-shell-bar {
    min-height: 280px;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6c757d;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: rgba(78, 115, 223, .1);
    font-size: 1.5rem;
}

.stat-tile {
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    box-shadow: var(--card-shadow);
}

.stat-tile span,
.metric-item span {
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .02rem;
}

.stat-tile strong,
.metric-item strong {
    font-size: 1.75rem;
    line-height: 1;
}

.metric-stack {
    display: grid;
    gap: .75rem;
}

.metric-item {
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: .9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-class-picker {
    display: grid;
    gap: .65rem;
    max-height: 430px;
    overflow: auto;
}

.event-class-option {
    display: flex;
    gap: .75rem;
    align-items: center;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: .8rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.event-class-option:hover {
    border-color: var(--primary);
    background: rgba(78, 115, 223, .04);
}

.event-class-option small {
    display: block;
    color: #858796;
}

.qr-camera-frame {
    width: min(100%, 460px);
    min-height: 340px;
    border: 2px solid #198754;
    border-radius: 12px;
    overflow: hidden;
    background: #0b1720;
}

.qr-camera-frame video {
    width: 100% !important;
    max-height: 420px;
    object-fit: cover;
}

#qr-reader {
    width: 100%;
}

#qr-reader__scan_region {
    display: flex;
    justify-content: center;
}

.scan-log {
    max-height: 320px;
    overflow: auto;
}

.scan-log-item {
    border-left: 4px solid #dee2e6;
    padding: .65rem .75rem;
    margin-bottom: .5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.scan-log-item.success { border-left-color: #198754; }
.scan-log-item.warning { border-left-color: #ffc107; }
.scan-log-item.danger { border-left-color: #dc3545; }

.qr-scan-actions {
    align-items: stretch;
}

.qr-scan-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    white-space: nowrap;
}

.student-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.student-photo-card {
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: .8rem;
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: .75rem;
    align-items: center;
}

.student-photo-card img {
    width: 68px;
    height: 86px;
    border-radius: 8px;
    object-fit: cover;
    background: #f8f9fa;
}

.student-photo-card .btn {
    grid-column: 1 / -1;
}

.theme-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.theme-swatch {
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
}

.theme-swatch.active,
.theme-swatch:has(input:checked) {
    border-color: var(--primary);
    background: rgba(78, 115, 223, .06);
}

.theme-swatch input {
    display: none;
}

.theme-swatch-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
    border: 1px solid #d6dbe4;
}

.sidebar-tone-fieldset {
    margin-top: 1rem !important;
}

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

.sidebar-tone-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.sidebar-tone-option.active,
.sidebar-tone-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(78, 115, 223, .06);
    box-shadow: 0 0 0 2px rgba(78, 115, 223, .1);
}

.sidebar-tone-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sidebar-tone-option > span:last-child {
    display: grid;
    min-width: 0;
}

.sidebar-tone-option strong {
    color: #1f2937;
    font-weight: 850;
}

.sidebar-tone-option small {
    color: #64748b;
    line-height: 1.35;
}

.sidebar-tone-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 70px;
    min-height: 42px;
    padding: .35rem .5rem;
    border-radius: 8px;
    background: var(--sidebar-tone-preview-bg, #ffffff);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .2);
}

.sidebar-tone-sample-dark {
    color: #1c1e21;
}

.sidebar-tone-sample-light {
    color: #ffffff;
}

@media (max-width: 576px) {
    .sidebar-tone-grid {
        grid-template-columns: 1fr;
    }
}

body[data-density="compact"] .main-content {
    padding: 18px 10px;
}

body[data-density="compact"] .card {
    margin-bottom: 16px;
}

body[data-density="compact"] .table th,
body[data-density="compact"] .table td {
    padding: 9px 11px !important;
}

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
    transition: none !important;
    animation: none !important;
}

body[data-motion="reduced"] .btn:hover,
body[data-motion="reduced"] #sidebar ul li a:hover {
    transform: none;
}

[data-bs-theme="dark"] .metric-item,
[data-bs-theme="dark"] .event-class-option,
[data-bs-theme="dark"] .student-photo-card,
[data-bs-theme="dark"] .theme-swatch,
[data-bs-theme="dark"] .sidebar-tone-option {
    border-color: #373b3e;
}

[data-bs-theme="dark"] .scan-log-item {
    background: #2c3034;
}

@media (max-width: 576px) {
    body[data-density="compact"] .main-content {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: max(6px, env(safe-area-inset-left));
        padding-right: max(6px, env(safe-area-inset-right));
    }

    .dashboard-chart-card .card-header {
        align-items: flex-start !important;
        gap: .5rem;
    }

    .dashboard-chart-card .card-header .badge {
        white-space: normal;
        text-align: right;
    }

    .chart-shell,
    .chart-shell-line,
    .chart-shell-doughnut {
        height: 230px;
        min-height: 220px;
    }

    .chart-shell-bar {
        min-height: 380px;
    }

    .qr-camera-frame {
        min-height: 280px;
    }

    .qr-scan-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.8rem;
    }

    .qr-scan-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        width: 100%;
        gap: 0.55rem !important;
    }

    .qr-scan-action-btn {
        width: 100%;
        min-height: 46px;
        padding: 0.55rem 0.7rem;
        border-radius: 8px;
        font-size: 0.95rem;
    }

    .student-photo-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep account cards inside the mobile viewport after DataTables applies widths. */
@media (max-width: 767.98px) {
    .user-table-responsive,
    .user-table-responsive .dataTables_wrapper,
    .user-table-responsive .dataTables_scroll,
    .user-table-responsive .dataTables_scrollBody {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .user-management-table,
    .user-management-table tbody,
    .user-management-table tr.user-row-detail {
        width: 100% !important;
        max-width: 100% !important;
    }

    .user-management-table tr.user-row-detail > td:not(:first-child) {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        justify-content: initial;
        column-gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem 0.75rem !important;
        overflow: hidden;
    }

    .user-management-table tr.user-row-detail > td:not(:first-child)::before {
        width: auto;
        min-width: 0;
        max-width: 88px;
    }

    .user-management-table tr.user-row-detail > td:not(:first-child) > * {
        min-width: 0;
        max-width: 100%;
        justify-self: start;
    }

    .user-management-table tr.user-row-detail > td .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .user-management-table tr.user-row-detail > td[data-label="Thao tác"] {
        align-items: center;
    }

    .user-management-table .action-buttons {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
        width: 100%;
        max-width: none !important;
        gap: 0.4rem;
        justify-self: stretch !important;
    }

    .user-management-table .action-buttons .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0.45rem !important;
    }
}

.student-table-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.student-avatar-portrait {
    width: 48px;
    height: 64px;
    flex: 0 0 48px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #f8f9fa;
}

.student-mobile-name {
    display: none;
    min-width: 0;
    line-height: 1.3;
}

/* Student records become compact cards on phones instead of a wide table. */
@media (max-width: 767.98px) {
    .student-table-responsive,
    .student-table-responsive .dataTables_wrapper,
    .student-table-responsive .dataTables_scroll,
    .student-table-responsive .dataTables_scrollBody {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .student-management-table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0;
    }

    .student-management-table thead {
        display: none;
    }

    .student-management-table tbody {
        display: grid;
        width: 100% !important;
        gap: 0.75rem;
    }

    .student-management-table tr.student-list-row {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.06);
    }

    .student-management-table tr.student-list-row > td {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        column-gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem 0.75rem !important;
        border: 0;
        border-top: 1px solid #edf0f4;
        text-align: left !important;
        overflow: hidden;
    }

    .student-management-table tr.student-list-row > td::before {
        content: attr(data-label);
        width: auto;
        min-width: 0;
        max-width: 88px;
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .student-management-table tr.student-list-row > td > * {
        min-width: 0;
        max-width: 100%;
        justify-self: start;
    }

    .student-management-table tr.student-list-row > td:first-child {
        display: block !important;
        padding: 0.9rem !important;
        border-top: 0;
        background: #f8faff;
    }

    .student-management-table tr.student-list-row > td:first-child::before {
        display: none;
    }

    .student-management-table .student-mobile-name {
        display: block;
        overflow-wrap: anywhere;
    }

    .student-management-table tr.student-list-row > td.student-desktop-name-cell {
        display: none !important;
    }

    .student-management-table tr.student-list-row > td .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .student-management-table tr.student-list-row > td[data-label="Thao tác"] {
        align-items: center;
    }

    .student-management-table .action-buttons {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
        width: 100%;
        max-width: none !important;
        gap: 0.4rem;
        justify-self: stretch !important;
    }

    .student-management-table .action-buttons .btn,
    .student-management-table .action-buttons > .badge {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0.45rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .student-management-table tbody > tr:not(.student-list-row) {
        display: block;
        width: 100%;
    }

    .student-management-table tbody > tr:not(.student-list-row) > td {
        display: block;
        width: 100%;
    }

    #studentDetailModal .modal-dialog {
        margin: 0.5rem;
    }

    .student-detail-view {
        padding: 0.85rem !important;
        overflow-x: hidden;
    }

    .student-detail-info-table,
    .student-detail-info-table tbody,
    .student-detail-info-table tr {
        display: block;
        width: 100%;
    }

    .student-detail-info-table tr {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #edf0f4;
    }

    .student-detail-info-table tr:last-child {
        border-bottom: 0;
    }

    .student-detail-info-table td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        overflow-wrap: anywhere;
    }

    .student-history-table,
    .student-history-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .student-history-table thead {
        display: none;
    }

    .student-history-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .student-history-table tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
    }

    .student-history-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
        min-width: 0;
        padding: 0.55rem 0.65rem !important;
        border: 0;
        border-bottom: 1px solid #edf0f4;
        overflow-wrap: anywhere;
    }

    .student-history-table tbody td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .student-history-table tbody td:last-child {
        border-bottom: 0;
    }
}

/* Let data tables use the full card width on phones while controls keep padding. */
@media (max-width: 767.98px) {
    .card > .card-body:not(.p-0) > .table-responsive {
        --mobile-table-card-gutter: var(--bs-card-spacer-x, 1rem);
        width: calc(100% + var(--mobile-table-card-gutter) + var(--mobile-table-card-gutter)) !important;
        max-width: none !important;
        margin-left: calc(-1 * var(--mobile-table-card-gutter));
        margin-right: calc(-1 * var(--mobile-table-card-gutter));
        border-radius: 0;
    }

    .table-card > .card-body:not(.p-0) > .table-responsive {
        --mobile-table-card-gutter: 24px;
    }

    .card > .card-body:not(.p-0) > .table-responsive.p-2,
    .card > .card-body:not(.p-0) > .table-responsive.p-3,
    .card > .card-body:not(.p-0) > .table-responsive.p-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .card > .card-body:not(.p-0) > .table-responsive .dataTables_wrapper > .row:first-child,
    .card > .card-body:not(.p-0) > .table-responsive .dataTables_wrapper > .row:last-child {
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Class and branch management use readable cards instead of wide tables on phones. */
@media (max-width: 767.98px) {
    .management-list-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .management-list-header .h3 {
        font-size: 1.45rem;
    }

    .management-list-header > .btn,
    .management-list-header > .badge {
        margin-left: auto;
        max-width: 100%;
        white-space: normal;
    }

    .class-table-responsive,
    .branch-table-responsive,
    .class-table-responsive .dataTables_wrapper,
    .branch-table-responsive .dataTables_wrapper {
        overflow-x: visible !important;
    }

    .class-management-table,
    .branch-management-table {
        display: block;
        min-width: 0 !important;
        margin: 0;
    }

    .class-management-table thead,
    .branch-management-table thead {
        display: none;
    }

    .class-management-table tbody,
    .branch-management-table tbody {
        display: grid;
        width: 100%;
        gap: 0.75rem;
    }

    .class-management-table tr.class-list-row,
    .branch-management-table tr.branch-list-row {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.06);
    }

    .class-management-table tr.class-list-row > td,
    .branch-management-table tr.branch-list-row > td {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: start;
        gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem 0.8rem !important;
        border: 0;
        border-top: 1px solid #edf0f4;
        text-align: left !important;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .class-management-table tr.class-list-row > td::before,
    .branch-management-table tr.branch-list-row > td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .class-management-table tr.class-list-row > td.class-id-cell,
    .branch-management-table tr.branch-list-row > td.branch-id-cell {
        display: none !important;
    }

    .class-management-table tr.class-list-row > td.class-name-cell,
    .branch-management-table tr.branch-list-row > td.branch-name-cell {
        display: block !important;
        padding: 0.9rem !important;
        border-top: 0;
        background: #f8faff;
        font-size: 1rem;
    }

    .class-management-table tr.class-list-row > td.class-name-cell::before,
    .branch-management-table tr.branch-list-row > td.branch-name-cell::before {
        display: none;
    }

    .class-management-table tr.class-list-row > td > *,
    .branch-management-table tr.branch-list-row > td > * {
        min-width: 0;
        max-width: 100%;
        justify-self: start;
    }

    .class-management-table ul {
        width: 100%;
    }

    .class-management-table li {
        margin-bottom: 0.3rem;
        overflow-wrap: anywhere;
    }

    .class-management-table .badge,
    .branch-management-table .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .class-management-table .class-row-actions,
    .branch-management-table .branch-row-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        width: 100%;
        max-width: none !important;
        gap: 0.45rem;
        justify-self: stretch !important;
    }

    .class-management-table .class-row-actions .btn,
    .branch-management-table .branch-row-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .class-management-table tbody > tr:not(.class-list-row),
    .branch-management-table tbody > tr:not(.branch-list-row) {
        display: block;
        width: 100%;
    }

    .class-management-table tbody > tr:not(.class-list-row) > td,
    .branch-management-table tbody > tr:not(.branch-list-row) > td {
        display: block;
        width: 100%;
    }
}

/* Mobile action rows need a small trailing inset so the last button is not clipped. */
@media (max-width: 767.98px) {
    .user-management-table .action-buttons,
    .student-management-table .action-buttons,
    .class-management-table .class-row-actions,
    .branch-management-table .branch-row-actions,
    .table-card .action-buttons {
        grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        min-width: 0;
        justify-self: start !important;
        box-sizing: border-box;
    }

    .user-management-table .action-buttons .btn,
    .student-management-table .action-buttons .btn,
    .class-management-table .class-row-actions .btn,
    .branch-management-table .branch-row-actions .btn,
    .table-card .action-buttons .btn {
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.class-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Standalone student history and class editing controls on phones. */
@media (max-width: 767.98px) {
    .student-history-page-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .student-history-page-header > div {
        width: 100%;
    }

    .student-history-page-header > .btn {
        width: 100%;
        min-height: 44px;
    }

    .student-history-summary > .d-flex {
        align-items: flex-start !important;
    }

    .student-history-summary img {
        flex: 0 0 72px;
    }

    .student-history-table {
        min-width: 0 !important;
    }

    .class-edit-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .class-edit-header .h3 {
        width: 100%;
        font-size: 1.45rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .class-edit-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.65rem;
    }

    .class-edit-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }

    .class-edit-actions .class-edit-action-back {
        grid-column: 1 / -1;
    }
}

/* Public post management thumbnails. */
.public-post-list-item {
    display: flex !important;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.public-post-thumb {
    width: 112px !important;
    height: 84px !important;
    flex: 0 0 112px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dfe3eb;
    border-radius: 6px;
    background: #eef3f8;
    color: #8a94a6;
    font-size: 0.95rem;
}

.public-post-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 112px !important;
    max-height: 84px !important;
    object-fit: cover !important;
}

.public-post-list-copy {
    min-width: 0;
}

[data-bs-theme="dark"] .public-post-thumb {
    border-color: #34445d;
    background: #1e2938;
    color: #8fa3bd;
}

/* Internal announcements and public post management on phones. */
@media (max-width: 767.98px) {
    .announcement-page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .announcement-page-header > div:first-child {
        width: 100%;
    }

    .announcement-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.65rem !important;
    }

    .announcement-header-actions form,
    .announcement-header-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .announcement-header-actions .btn {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.6rem 0.75rem;
        white-space: nowrap;
    }

    .public-post-table-responsive {
        overflow-x: visible !important;
    }

    .public-post-management-table {
        display: block;
        min-width: 0 !important;
        padding: 0.75rem;
    }

    .public-post-management-table thead {
        display: none;
    }

    .public-post-management-table tbody {
        display: grid;
        width: 100%;
        gap: 0.75rem;
    }

    .public-post-management-table tr.public-post-row {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.06);
    }

    .public-post-management-table tr.public-post-row > td {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.65rem 0.8rem !important;
        border: 0;
        border-top: 1px solid #edf0f4;
        text-align: left !important;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .public-post-management-table tr.public-post-row > td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .public-post-management-table tr.public-post-row > td.public-post-title-cell {
        display: block !important;
        padding: 0.9rem !important;
        border-top: 0;
        background: #f8faff;
    }

    .public-post-management-table tr.public-post-row > td.public-post-title-cell::before {
        display: none;
    }

    .public-post-list-item {
        align-items: flex-start;
        gap: 0.65rem;
    }

    .public-post-thumb {
        width: 96px !important;
        height: 80px !important;
        flex-basis: 96px !important;
        border-radius: 6px;
        font-size: 0.85rem;
    }

    .public-post-thumb img {
        max-width: 96px !important;
        max-height: 80px !important;
    }

    .public-post-title,
    .public-post-excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .public-post-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 1rem;
        line-height: 1.35;
        max-height: 2.6em;
    }

    .public-post-excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-top: 0.25rem;
        line-height: 1.35;
        max-height: 2.7em;
    }

    .public-post-row-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(44px, 1fr));
        width: 100%;
        gap: 0.45rem;
    }

    .public-post-row-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Academic years and activity logs use compact cards on phones. */
@media (max-width: 767.98px) {
    .academic-year-page-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .academic-year-page-header .h3 {
        font-size: 1.45rem;
    }

    .academic-year-page-header .btn {
        margin-left: auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .academic-year-table-responsive,
    .activity-log-table-responsive,
    .academic-year-table-responsive .dataTables_wrapper,
    .activity-log-table-responsive .dataTables_wrapper {
        overflow-x: visible !important;
    }

    .academic-year-management-table,
    .activity-log-management-table {
        display: block;
        min-width: 0 !important;
        margin: 0;
    }

    .academic-year-management-table thead,
    .activity-log-management-table thead {
        display: none;
    }

    .academic-year-management-table tbody,
    .activity-log-management-table tbody {
        display: grid;
        width: 100%;
        gap: 0.75rem;
    }

    .academic-year-management-table tr.academic-year-row,
    .activity-log-management-table tr.activity-log-row {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid #dfe3eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.06);
    }

    .academic-year-management-table tr.academic-year-row > td,
    .activity-log-management-table tr.activity-log-row > td {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem 0.8rem !important;
        border: 0;
        border-top: 1px solid #edf0f4;
        text-align: left !important;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .academic-year-management-table tr.academic-year-row > td::before,
    .activity-log-management-table tr.activity-log-row > td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .academic-year-management-table tr.academic-year-row > td.academic-year-id-cell {
        display: none !important;
    }

    .academic-year-management-table tr.academic-year-row > td.academic-year-name-cell,
    .activity-log-management-table tr.activity-log-row > td.activity-log-time-cell {
        display: block !important;
        padding: 0.9rem !important;
        border-top: 0;
        background: #f8faff;
        font-size: 1rem;
        font-weight: 700;
    }

    .academic-year-management-table tr.academic-year-row > td.academic-year-name-cell::before,
    .activity-log-management-table tr.activity-log-row > td.activity-log-time-cell::before {
        display: none;
    }

    .academic-year-row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        width: calc(100% - 8px);
        gap: 0.45rem;
    }

    .academic-year-row-actions .btn,
    .activity-log-actions-cell .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }

    .academic-year-management-table .badge,
    .activity-log-management-table .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .activity-log-filter-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.85rem;
    }

    .activity-log-filter-info {
        width: 100%;
    }

    .activity-log-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.65rem !important;
    }

    .activity-log-filter-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.55rem 0.75rem;
        white-space: nowrap;
    }

    .academic-year-management-table tbody > tr:not(.academic-year-row),
    .activity-log-management-table tbody > tr:not(.activity-log-row) {
        display: block;
        width: 100%;
    }

    .academic-year-management-table tbody > tr:not(.academic-year-row) > td,
    .activity-log-management-table tbody > tr:not(.activity-log-row) > td {
        display: block;
        width: 100%;
    }
}

.report-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.report-export-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 700;
}

.report-score-table-scroll {
    width: 100%;
    overflow: auto;
    border: 1px solid #e3e6f0;
    border-radius: 6px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.report-score-table {
    min-width: 780px;
    margin-bottom: 0;
}

[data-bs-theme="dark"] .report-score-table-scroll,
[data-bs-theme="dark"] .report-score-table tbody tr {
    background: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .report-score-table tbody .report-student-name,
[data-bs-theme="dark"] .report-export-toggle {
    background: #182231;
    color: #eaf0f8;
    border-color: #374151;
}

/* Last-mile mobile overrides: keep action controls and report cards inside their boxes. */
@media (max-width: 767.98px) {
    .student-management-table tr.student-list-row > td[data-label="Thao tác"],
    .class-management-table tr.class-list-row > td[data-label="Thao tác"],
    .branch-management-table tr.branch-list-row > td[data-label="Thao tác"] {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .student-management-table .action-buttons,
    .class-management-table .class-row-actions,
    .branch-management-table .branch-row-actions {
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        justify-self: center !important;
    }

    .student-management-table .action-buttons .btn,
    .class-management-table .class-row-actions .btn,
    .branch-management-table .branch-row-actions .btn {
        min-height: 44px;
    }

    .report-page-header,
    .import-page-header,
    .student-cards-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }

    .report-page-header h1,
    .import-page-header h1,
    .student-cards-page-header h1 {
        font-size: 1.45rem;
        line-height: 1.35;
    }

    .report-page-actions,
    .student-cards-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        width: 100%;
        gap: 0.65rem !important;
    }

    .report-page-actions .btn,
    .student-cards-actions .btn,
    .import-template-btn,
    .import-upload-form .btn[type="submit"] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .report-card-header {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .report-card-header .dropdown {
        width: 100%;
    }

    .report-export-toggle {
        justify-content: center;
        width: 100%;
        border-color: #dbe4f0;
        background: #f8faff;
        text-decoration: none;
    }

    .report-score-card {
        border: 0;
        background: transparent;
        box-shadow: none !important;
    }

    .report-score-body {
        padding: 0 !important;
    }

    .card > .card-body.report-score-body > .report-score-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .report-score-table,
    .report-score-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .report-score-table thead {
        display: none !important;
    }

    .report-score-table tbody {
        display: grid !important;
        gap: 0.75rem;
    }

    .report-score-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #dfe5ee;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0.15rem 0.45rem rgba(31, 45, 61, 0.07);
    }

    .report-score-table tbody td {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.65rem 0.75rem !important;
        border: 0;
        border-right: 1px solid #e7ebf1;
        border-bottom: 1px solid #e7ebf1;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .report-score-table tbody td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .report-score-table tbody .report-score-index {
        display: none !important;
    }

    .report-score-table tbody .report-student-name {
        grid-column: 1 / -1;
        background: #f8faff;
        color: #1f2937;
        font-size: 1rem;
    }

    .report-score-table tbody .report-student-name::before {
        color: #0d6efd;
    }

    .student-card-sheet {
        justify-content: center;
    }
}

.topbar-user-menu {
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

.topbar-user-greeting {
    display: block;
    padding: 0.68rem 0.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(25, 135, 84, 0.06));
}

.topbar-user-greeting-copy {
    min-width: 0;
    line-height: 1.25;
}

.topbar-user-hello {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.topbar-user-name {
    margin-top: 0.18rem;
    color: #1f2937;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    margin-top: 0.12rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    margin-top: 0.15rem;
    padding: 0.52rem 0.65rem;
    border-radius: 7px;
    color: #1f2937;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.topbar-user-menu .dropdown-item i {
    width: 18px;
    margin-right: 0 !important;
    color: #64748b !important;
    text-align: center;
}

.topbar-user-menu .dropdown-divider {
    margin: 0.45rem -0.45rem;
}

.topbar-user-menu .dropdown-item.text-danger {
    color: #dc3545 !important;
}

.topbar-user-menu .dropdown-item.text-danger i {
    color: #dc3545 !important;
}

[data-bs-theme="dark"] .topbar-user-greeting {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(45, 212, 191, 0.08));
}

[data-bs-theme="dark"] .topbar-user-name,
[data-bs-theme="dark"] .topbar-user-menu .dropdown-item {
    color: #eaf0f8;
}

[data-bs-theme="dark"] .topbar-user-hello,
[data-bs-theme="dark"] .topbar-user-role {
    color: #a7b0c0;
}

/* Admin workspace redesign - scoped away from public pages, sidebar, and profile. */
body.admin-redesign {
    --admin-bg: #f4f7fb;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f8fbff;
    --admin-border: #dfe7f1;
    --admin-border-strong: #c9d6e5;
    --admin-text: #1f2937;
    --admin-muted: #667085;
    --admin-heading: #3f4656;
    --admin-primary: #0d6efd;
    --admin-primary-soft: #eaf2ff;
    --admin-success-soft: #eaf8f0;
    --admin-warning-soft: #fff7df;
    --admin-danger-soft: #fff0f2;
    --admin-radius: 14px;
    --admin-radius-sm: 10px;
    --admin-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    --admin-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.055);
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 28rem),
        linear-gradient(180deg, #f7faff 0%, var(--admin-bg) 34rem);
    color: var(--admin-text);
}

body.admin-redesign .main-content {
    padding: clamp(18px, 2.1vw, 34px) clamp(12px, 1.6vw, 26px) 34px;
}

body.admin-redesign .main-content > .container-fluid,
body.admin-redesign .main-content > .container-fluid > .container-fluid {
    max-width: 100%;
}

body.admin-redesign .main-content h1,
body.admin-redesign .main-content .h1,
body.admin-redesign .main-content .h2,
body.admin-redesign .main-content .h3 {
    color: var(--admin-heading);
    letter-spacing: 0;
}

body.admin-redesign .main-content h1,
body.admin-redesign .main-content .h3 {
    font-weight: 800;
}

body.admin-redesign .main-content p,
body.admin-redesign .main-content .text-muted,
body.admin-redesign .main-content .small,
body.admin-redesign .main-content small {
    color: var(--admin-muted) !important;
}

body.admin-redesign .main-content .card,
body.admin-redesign .main-content .table-card,
body.admin-redesign .main-content .filter-section,
body.admin-redesign .main-content .list-group,
body.admin-redesign .main-content .modal-content {
    border: 1px solid rgba(201, 214, 229, 0.75);
    border-radius: var(--admin-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--admin-shadow-soft);
}

body.admin-redesign .main-content .card {
    overflow: hidden;
    margin-bottom: 1.15rem;
}

body.admin-redesign .main-content .card:hover {
    transform: none;
    box-shadow: var(--admin-shadow);
}

body.admin-redesign .main-content .card-header,
body.admin-redesign .main-content .modal-header,
body.admin-redesign .main-content .card-footer,
body.admin-redesign .main-content .modal-footer {
    border-color: var(--admin-border);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-redesign .main-content .card-header {
    padding: 1rem 1.25rem;
    color: var(--admin-primary);
    font-size: 1.02rem;
    font-weight: 800;
}

body.admin-redesign .main-content .card-body {
    padding: 1.2rem;
}

body.admin-redesign .main-content .d-flex.justify-content-between.align-items-center.mb-4,
body.admin-redesign .main-content .management-list-header,
body.admin-redesign .main-content .report-page-header,
body.admin-redesign .main-content .attendance-page-header,
body.admin-redesign .main-content .student-cards-page-header,
body.admin-redesign .main-content .import-page-header,
body.admin-redesign .main-content .academic-year-page-header,
body.admin-redesign .main-content .announcement-page-header {
    gap: 0.85rem;
    margin-bottom: 1.25rem !important;
}

body.admin-redesign .main-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}

body.admin-redesign .main-content .btn-lg {
    min-height: 50px;
    border-radius: 12px;
}

body.admin-redesign .main-content .btn-primary,
body.admin-redesign .main-content .btn-info {
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.17);
}

body.admin-redesign .main-content .btn-success {
    box-shadow: 0 8px 18px rgba(25, 135, 84, 0.16);
}

body.admin-redesign .main-content .btn-danger {
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.14);
}

body.admin-redesign .main-content .btn-outline-primary,
body.admin-redesign .main-content .btn-outline-secondary,
body.admin-redesign .main-content .btn-outline-info,
body.admin-redesign .main-content .btn-outline-success,
body.admin-redesign .main-content .btn-outline-warning,
body.admin-redesign .main-content .btn-outline-danger {
    background: #fff;
}

body.admin-redesign .main-content .btn-outline-primary:hover,
body.admin-redesign .main-content .btn-outline-primary:focus,
body.admin-redesign .main-content .btn-outline-primary:active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

body.admin-redesign .main-content .btn-outline-secondary:hover,
body.admin-redesign .main-content .btn-outline-secondary:focus,
body.admin-redesign .main-content .btn-outline-secondary:active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

body.admin-redesign .main-content .btn-outline-info:hover,
body.admin-redesign .main-content .btn-outline-info:focus,
body.admin-redesign .main-content .btn-outline-info:active {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #10202a !important;
}

body.admin-redesign .main-content .btn-outline-success:hover,
body.admin-redesign .main-content .btn-outline-success:focus,
body.admin-redesign .main-content .btn-outline-success:active {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

body.admin-redesign .main-content .btn-outline-warning:hover,
body.admin-redesign .main-content .btn-outline-warning:focus,
body.admin-redesign .main-content .btn-outline-warning:active {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

body.admin-redesign .main-content .btn-outline-danger:hover,
body.admin-redesign .main-content .btn-outline-danger:focus,
body.admin-redesign .main-content .btn-outline-danger:active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

body.admin-redesign .main-content .btn-outline-primary:hover i,
body.admin-redesign .main-content .btn-outline-primary:focus i,
body.admin-redesign .main-content .btn-outline-secondary:hover i,
body.admin-redesign .main-content .btn-outline-secondary:focus i,
body.admin-redesign .main-content .btn-outline-info:hover i,
body.admin-redesign .main-content .btn-outline-info:focus i,
body.admin-redesign .main-content .btn-outline-success:hover i,
body.admin-redesign .main-content .btn-outline-success:focus i,
body.admin-redesign .main-content .btn-outline-warning:hover i,
body.admin-redesign .main-content .btn-outline-warning:focus i,
body.admin-redesign .main-content .btn-outline-danger:hover i,
body.admin-redesign .main-content .btn-outline-danger:focus i {
    color: inherit !important;
}

body.admin-redesign .main-content .form-label,
body.admin-redesign .main-content label {
    color: #2f3746;
    font-weight: 800;
    letter-spacing: 0;
}

body.admin-redesign .main-content .form-control,
body.admin-redesign .main-content .form-select,
body.admin-redesign .main-content .input-group-text,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter input,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_length select {
    min-height: 44px;
    border: 1px solid var(--admin-border-strong);
    border-radius: 10px;
    background-color: #fff;
    color: var(--admin-text);
    font-weight: 600;
    box-shadow: none;
}

body.admin-redesign .main-content textarea.form-control {
    min-height: 110px;
}

body.admin-redesign .main-content .form-control:focus,
body.admin-redesign .main-content .form-select:focus,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter input:focus {
    border-color: rgba(13, 110, 253, 0.65);
    box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.13);
}

body.admin-redesign .main-content .auto-filter-form,
body.admin-redesign .main-content .filter-form,
body.admin-redesign .main-content .filters-card,
body.admin-redesign .main-content .filter-section {
    padding: 1rem;
}

body.admin-redesign .main-content .table-responsive {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow-soft);
}

body.admin-redesign .main-content .card .table-responsive {
    box-shadow: none;
}

body.admin-redesign .main-content .table {
    margin-bottom: 0;
    color: var(--admin-text);
    vertical-align: middle;
}

body.admin-redesign .main-content .table thead th,
body.admin-redesign .main-content table.dataTable thead th {
    border-bottom: 1px solid var(--admin-border);
    background: #f7f9fc;
    color: #5b6272;
    font-weight: 800;
    white-space: nowrap;
}

body.admin-redesign .main-content .table > :not(caption) > * > * {
    border-color: #e5ebf2;
    padding: 0.8rem 0.9rem;
}

body.admin-redesign .main-content .table tbody tr:hover > * {
    background-color: rgba(13, 110, 253, 0.035);
}

body.admin-redesign .main-content .badge {
    border-radius: 999px;
    padding: 0.38rem 0.62rem;
    font-weight: 800;
    letter-spacing: 0;
}

body.admin-redesign .main-content .alert {
    border-radius: var(--admin-radius-sm);
    border-width: 1px;
    box-shadow: none;
}

body.admin-redesign .main-content .pagination {
    gap: 0.25rem;
}

body.admin-redesign .main-content .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    font-weight: 700;
}

body.admin-redesign .main-content .dataTables_wrapper > .row {
    align-items: center;
    row-gap: 0.75rem;
}

body.admin-redesign .main-content .dataTables_wrapper > .row:first-child {
    padding: 1rem 1rem 0.65rem;
}

body.admin-redesign .main-content .dataTables_wrapper > .row:last-child {
    padding: 0.85rem 1rem 1rem;
}

body.admin-redesign .main-content .dataTables_wrapper .dataTables_length,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_info,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_paginate {
    color: var(--admin-muted);
    font-weight: 600;
}

body.admin-redesign .main-content .action-buttons,
body.admin-redesign .main-content .class-row-actions,
body.admin-redesign .main-content .branch-row-actions,
body.admin-redesign .main-content .public-post-row-actions,
body.admin-redesign .main-content .academic-year-row-actions,
body.admin-redesign .main-content .table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body.admin-redesign .main-content .action-buttons .btn,
body.admin-redesign .main-content .class-row-actions .btn,
body.admin-redesign .main-content .branch-row-actions .btn,
body.admin-redesign .main-content .public-post-row-actions .btn,
body.admin-redesign .main-content .academic-year-row-actions .btn,
body.admin-redesign .main-content .table-actions .btn {
    min-width: 44px;
    min-height: 42px;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

body.admin-redesign .main-content .student-list-row,
body.admin-redesign .main-content .user-row,
body.admin-redesign .main-content .class-list-row,
body.admin-redesign .main-content .branch-list-row,
body.admin-redesign .main-content .public-post-row,
body.admin-redesign .main-content .academic-year-row,
body.admin-redesign .main-content .activity-log-row {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.admin-redesign .main-content .student-list-row:active,
body.admin-redesign .main-content .user-row:active,
body.admin-redesign .main-content .class-list-row:active,
body.admin-redesign .main-content .branch-list-row:active,
body.admin-redesign .main-content .public-post-row:active,
body.admin-redesign .main-content .academic-year-row:active,
body.admin-redesign .main-content .activity-log-row:active {
    transform: scale(0.995);
}

body.admin-redesign .main-content .student-avatar,
body.admin-redesign .main-content .user-avatar,
body.admin-redesign .main-content .avatar,
body.admin-redesign .main-content .profile-avatar {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.admin-redesign .main-content .modal-content {
    overflow: hidden;
}

body.admin-redesign .main-content .modal-header.bg-primary,
body.admin-redesign .main-content .modal-header.bg-info,
body.admin-redesign .main-content .modal-header.bg-success {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0) !important;
}

body.admin-redesign .main-content .empty-state,
body.admin-redesign .main-content .text-center.py-5 {
    border-radius: var(--admin-radius);
}

@media (min-width: 576px) {
    body.admin-redesign .main-content .card-body > .row,
    body.admin-redesign .main-content form > .row {
        row-gap: 0.9rem;
    }
}

@media (max-width: 991.98px) {
    body.admin-redesign .main-content {
        padding: 18px 10px 28px;
    }

    body.admin-redesign .main-content .d-flex.justify-content-between.align-items-center.mb-4,
    body.admin-redesign .main-content .management-list-header,
    body.admin-redesign .main-content .report-page-header,
    body.admin-redesign .main-content .attendance-page-header,
    body.admin-redesign .main-content .student-cards-page-header,
    body.admin-redesign .main-content .import-page-header,
    body.admin-redesign .main-content .academic-year-page-header,
    body.admin-redesign .main-content .announcement-page-header {
        flex-wrap: wrap;
        align-items: stretch !important;
    }

    body.admin-redesign .main-content .d-flex.justify-content-between.align-items-center.mb-4 > div,
    body.admin-redesign .main-content .report-page-actions,
    body.admin-redesign .main-content .student-cards-actions,
    body.admin-redesign .main-content .announcement-header-actions {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    body.admin-redesign {
        background:
            radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 18rem),
            #f5f7fb;
    }

    body.admin-redesign .main-content {
        padding: 14px 4px 24px !important;
    }

    body.admin-redesign .main-content > .container-fluid,
    body.admin-redesign .main-content > .container-fluid > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.admin-redesign .main-content h1,
    body.admin-redesign .main-content .h3 {
        font-size: clamp(1.45rem, 8vw, 1.95rem);
        line-height: 1.18;
    }

    body.admin-redesign .main-content .card,
    body.admin-redesign .main-content .table-card,
    body.admin-redesign .main-content .filter-section {
        border-radius: 11px;
        margin-left: 0;
        margin-right: 0;
    }

    body.admin-redesign .main-content .card-header {
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }

    body.admin-redesign .main-content .card-body {
        padding: 1rem;
    }

    body.admin-redesign .main-content .btn {
        min-height: 46px;
        border-radius: 10px;
        white-space: normal;
    }

    body.admin-redesign .main-content .btn-sm {
        min-height: 42px;
    }

    body.admin-redesign .main-content .form-control,
    body.admin-redesign .main-content .form-select,
    body.admin-redesign .main-content .input-group-text {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }

    body.admin-redesign .main-content .row {
        --bs-gutter-x: 0.85rem;
        --bs-gutter-y: 0.85rem;
    }

    body.admin-redesign .main-content .table-responsive {
        overflow-x: visible !important;
        border-radius: 11px;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) {
        display: block;
        min-width: 0 !important;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) thead {
        display: none;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody {
        display: grid;
        gap: 0.75rem;
        width: 100%;
        padding: 0.75rem;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody tr {
        display: block;
        overflow: hidden;
        width: 100%;
        border: 1px solid var(--admin-border);
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.72rem 0.85rem !important;
        border: 0;
        border-top: 1px solid #edf1f6;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td::before {
        content: attr(data-label);
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td[colspan],
    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td:not([data-label]) {
        display: block !important;
    }

    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td[colspan]::before,
    body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody td:not([data-label])::before {
        display: none;
    }

    body.admin-redesign .main-content .dataTables_wrapper > .row:first-child,
    body.admin-redesign .main-content .dataTables_wrapper > .row:last-child {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.admin-redesign .main-content .dataTables_wrapper .dataTables_length,
    body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        text-align: left;
    }

    body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter {
        grid-template-columns: auto minmax(0, 1fr);
        margin-top: 0.65rem;
    }

    body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0;
    }

    body.admin-redesign .main-content .action-buttons,
    body.admin-redesign .main-content .class-row-actions,
    body.admin-redesign .main-content .branch-row-actions,
    body.admin-redesign .main-content .public-post-row-actions,
    body.admin-redesign .main-content .academic-year-row-actions,
    body.admin-redesign .main-content .table-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        gap: 0.5rem !important;
        justify-self: center !important;
    }

    body.admin-redesign .main-content .action-buttons .btn,
    body.admin-redesign .main-content .class-row-actions .btn,
    body.admin-redesign .main-content .branch-row-actions .btn,
    body.admin-redesign .main-content .public-post-row-actions .btn,
    body.admin-redesign .main-content .academic-year-row-actions .btn,
    body.admin-redesign .main-content .table-actions .btn {
        width: 100%;
        min-width: 0 !important;
    }

    body.admin-redesign .main-content .student-management-table tr.student-list-row > td,
    body.admin-redesign .main-content .class-management-table tr.class-list-row > td,
    body.admin-redesign .main-content .branch-management-table tr.branch-list-row > td,
    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td,
    body.admin-redesign .main-content .public-post-management-table tr.public-post-row > td,
    body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row > td,
    body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row > td {
        padding-left: 0.95rem !important;
        padding-right: 0.95rem !important;
    }

    body.admin-redesign .main-content .student-management-table tr.student-list-row,
    body.admin-redesign .main-content .class-management-table tr.class-list-row,
    body.admin-redesign .main-content .branch-management-table tr.branch-list-row,
    body.admin-redesign .main-content .user-management-table tr.user-row-detail,
    body.admin-redesign .main-content .public-post-management-table tr.public-post-row,
    body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row,
    body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row {
        border-radius: 11px !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055) !important;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons,
    body.admin-redesign .main-content .class-management-table .class-row-actions,
    body.admin-redesign .main-content .branch-management-table .branch-row-actions {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 575.98px) {
    body.admin-redesign .main-content {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body.admin-redesign .main-content .card-body {
        padding: 0.85rem;
    }

    body.admin-redesign .main-content .auto-filter-form,
    body.admin-redesign .main-content .filter-section {
        padding: 0.85rem;
    }

    body.admin-redesign .main-content .d-flex.justify-content-between.align-items-center.mb-4 > .btn,
    body.admin-redesign .main-content .management-list-header > .btn,
    body.admin-redesign .main-content .report-page-actions .btn,
    body.admin-redesign .main-content .student-cards-actions .btn,
    body.admin-redesign .main-content .import-template-btn {
        width: 100%;
    }
}

[data-bs-theme="dark"] body.admin-redesign {
    --admin-bg: #0f172a;
    --admin-surface: #111c2f;
    --admin-surface-soft: #162238;
    --admin-border: #26364f;
    --admin-border-strong: #334760;
    --admin-text: #e7edf7;
    --admin-muted: #aab6c9;
    --admin-heading: #f2f6fb;
    --admin-primary-soft: rgba(96, 165, 250, 0.15);
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.13), transparent 28rem),
        linear-gradient(180deg, #0b1220 0%, var(--admin-bg) 30rem);
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card,
[data-bs-theme="dark"] body.admin-redesign .main-content .table-card,
[data-bs-theme="dark"] body.admin-redesign .main-content .filter-section,
[data-bs-theme="dark"] body.admin-redesign .main-content .table-responsive,
[data-bs-theme="dark"] body.admin-redesign .main-content .modal-content {
    background: rgba(17, 28, 47, 0.96);
    border-color: var(--admin-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.23);
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card-header,
[data-bs-theme="dark"] body.admin-redesign .main-content .modal-header,
[data-bs-theme="dark"] body.admin-redesign .main-content .card-footer,
[data-bs-theme="dark"] body.admin-redesign .main-content .modal-footer,
[data-bs-theme="dark"] body.admin-redesign .main-content .table thead th,
[data-bs-theme="dark"] body.admin-redesign .main-content table.dataTable thead th {
    background: #162238;
    border-color: var(--admin-border);
    color: #d7e3f4;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .table,
[data-bs-theme="dark"] body.admin-redesign .main-content .table > :not(caption) > * > * {
    color: var(--admin-text);
    border-color: var(--admin-border);
}

[data-bs-theme="dark"] body.admin-redesign .main-content .form-control,
[data-bs-theme="dark"] body.admin-redesign .main-content .form-select,
[data-bs-theme="dark"] body.admin-redesign .main-content .input-group-text,
[data-bs-theme="dark"] body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] body.admin-redesign .main-content .dataTables_wrapper .dataTables_length select {
    background-color: #0f1b2d;
    border-color: var(--admin-border-strong);
    color: var(--admin-text);
}

[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-primary,
[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-secondary,
[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-info,
[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-success,
[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-warning,
[data-bs-theme="dark"] body.admin-redesign .main-content .btn-outline-danger {
    background: #111c2f;
}

@media (max-width: 767.98px) {
    [data-bs-theme="dark"] body.admin-redesign .main-content table.table.admin-enhanced-table:not(.score-entry-table):not(.score-summary-table):not(.attendance-entry-table):not(.attendance-summary-table):not(.report-score-table):not(.student-management-table):not(.user-management-table):not(.class-management-table):not(.branch-management-table):not(.public-post-management-table):not(.academic-year-management-table):not(.activity-log-management-table) tbody tr,
    [data-bs-theme="dark"] body.admin-redesign .main-content .student-management-table tr.student-list-row,
    [data-bs-theme="dark"] body.admin-redesign .main-content .class-management-table tr.class-list-row,
    [data-bs-theme="dark"] body.admin-redesign .main-content .branch-management-table tr.branch-list-row,
    [data-bs-theme="dark"] body.admin-redesign .main-content .user-management-table tr.user-row-detail,
    [data-bs-theme="dark"] body.admin-redesign .main-content .public-post-management-table tr.public-post-row,
    [data-bs-theme="dark"] body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row,
    [data-bs-theme="dark"] body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row {
        background: #111c2f;
        border-color: var(--admin-border);
    }
}

/* Admin redesign compact polish - 20260713 */
body.admin-redesign .main-content {
    padding: clamp(0.9rem, 1.25vw, 1.35rem) clamp(0.45rem, 0.95vw, 0.95rem) 1.6rem !important;
}

body.admin-redesign .main-content > .container-fluid,
body.admin-redesign .main-content > .container-fluid > .container-fluid {
    padding-left: clamp(0.25rem, 0.75vw, 0.75rem) !important;
    padding-right: clamp(0.25rem, 0.75vw, 0.75rem) !important;
}

body.admin-redesign .main-content .card,
body.admin-redesign .main-content .table-card,
body.admin-redesign .main-content .filter-section,
body.admin-redesign .main-content .list-group,
body.admin-redesign .main-content .modal-content {
    border: 1px solid rgba(203, 213, 225, 0.78) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

body.admin-redesign .main-content .card:hover {
    transform: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.065) !important;
}

body.admin-redesign .main-content .card-header,
body.admin-redesign .main-content .modal-header,
body.admin-redesign .main-content .card-footer,
body.admin-redesign .main-content .modal-footer {
    padding: 0.72rem 0.95rem !important;
}

body.admin-redesign .main-content .card-body {
    padding: 0.95rem !important;
}

body.admin-redesign .main-content .btn {
    min-height: 38px;
    padding: 0.42rem 0.72rem;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.045);
}

body.admin-redesign .main-content .btn-sm {
    min-height: 34px;
    padding: 0.34rem 0.6rem;
}

body.admin-redesign .main-content .form-control,
body.admin-redesign .main-content .form-select,
body.admin-redesign .main-content .input-group-text,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter input,
body.admin-redesign .main-content .dataTables_wrapper .dataTables_length select {
    min-height: 40px;
    border-radius: 8px !important;
}

body.admin-redesign .main-content .auto-filter-form,
body.admin-redesign .main-content .filter-form,
body.admin-redesign .main-content .filters-card,
body.admin-redesign .main-content .filter-section {
    padding: 0.95rem !important;
}

body.admin-redesign .main-content .table-responsive {
    border-radius: 10px !important;
}

body.admin-redesign .main-content .table {
    margin-bottom: 0;
}

body.admin-redesign .main-content .table thead th,
body.admin-redesign .main-content table.dataTable thead th {
    padding: 0.62rem 0.72rem !important;
}

body.admin-redesign .main-content .table > :not(caption) > * > * {
    padding: 0.58rem 0.72rem !important;
}

body.admin-redesign .main-content .badge {
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
}

body.admin-redesign .main-content .dataTables_wrapper > .row:first-child,
body.admin-redesign .main-content .dataTables_wrapper > .row:last-child {
    padding: 0.72rem 0.75rem !important;
}

body.admin-redesign .main-content .dataTables_wrapper > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.admin-redesign .main-content .card.border-primary,
body.admin-redesign .main-content .card.border-info,
body.admin-redesign .main-content .card.border-success,
body.admin-redesign .main-content .card.border-warning,
body.admin-redesign .main-content .card.border-danger,
body.admin-redesign .main-content .card.border-secondary,
body.admin-redesign .main-content .card.border-dark,
body.admin-redesign .main-content .card.border-start.border-4,
body.admin-redesign .main-content .card.border-left-primary,
body.admin-redesign .main-content .card.border-left-info,
body.admin-redesign .main-content .card.border-left-success,
body.admin-redesign .main-content .card.border-left-warning,
body.admin-redesign .main-content .card.border-left-danger,
body.admin-redesign .main-content .card.border-left-secondary,
body.admin-redesign .main-content .card.border-left-dark {
    border: 1px solid rgba(203, 213, 225, 0.78) !important;
    border-left-width: 4px !important;
}

body.admin-redesign .main-content .card.border-primary,
body.admin-redesign .main-content .card.border-left-primary {
    border-left-color: #0d6efd !important;
}

body.admin-redesign .main-content .card.border-info,
body.admin-redesign .main-content .card.border-left-info {
    border-left-color: #0dcaf0 !important;
}

body.admin-redesign .main-content .card.border-success,
body.admin-redesign .main-content .card.border-left-success {
    border-left-color: #198754 !important;
}

body.admin-redesign .main-content .card.border-warning,
body.admin-redesign .main-content .card.border-left-warning {
    border-left-color: #ffc107 !important;
}

body.admin-redesign .main-content .card.border-danger,
body.admin-redesign .main-content .card.border-left-danger,
body.admin-redesign .main-content .card.border-start.border-danger {
    border-left-color: #dc3545 !important;
}

body.admin-redesign .main-content .card.border-secondary,
body.admin-redesign .main-content .card.border-left-secondary {
    border-left-color: #6c757d !important;
}

body.admin-redesign .main-content .card.border-dark,
body.admin-redesign .main-content .card.border-left-dark {
    border-left-color: #212529 !important;
}

@media (min-width: 768px) {
    body.admin-redesign .main-content .action-buttons,
    body.admin-redesign .main-content .class-row-actions,
    body.admin-redesign .main-content .branch-row-actions,
    body.admin-redesign .main-content .public-post-row-actions,
    body.admin-redesign .main-content .academic-year-row-actions,
    body.admin-redesign .main-content .table-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0.38rem !important;
        width: auto !important;
        max-width: 260px !important;
        margin: 0 !important;
    }

    body.admin-redesign .main-content .action-buttons .btn,
    body.admin-redesign .main-content .class-row-actions .btn,
    body.admin-redesign .main-content .branch-row-actions .btn,
    body.admin-redesign .main-content .public-post-row-actions .btn,
    body.admin-redesign .main-content .academic-year-row-actions .btn,
    body.admin-redesign .main-content .table-actions .btn {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px !important;
        height: 36px;
        min-height: 36px;
        padding: 0 !important;
    }

    body.admin-redesign .main-content .user-management-table {
        min-width: 760px;
    }

    body.admin-redesign .main-content .user-management-table th:last-child,
    body.admin-redesign .main-content .user-management-table td:last-child {
        width: 220px;
    }

    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td {
        vertical-align: middle;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity {
        min-height: 0;
    }

    body.admin-redesign .main-content .user-management-table .user-avatar-sm {
        width: 42px;
        height: 56px;
        border-radius: 8px;
    }
}

@media (max-width: 767.98px) {
    body.admin-redesign .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.admin-redesign .main-content > .container-fluid,
    body.admin-redesign .main-content > .container-fluid > .container-fluid {
        padding-left: 0.12rem !important;
        padding-right: 0.12rem !important;
    }

    body.admin-redesign .main-content h1,
    body.admin-redesign .main-content .h1,
    body.admin-redesign .main-content .h3 {
        margin-left: 0.45rem;
        margin-right: 0.45rem;
    }

    body.admin-redesign .main-content .card,
    body.admin-redesign .main-content .table-card,
    body.admin-redesign .main-content .filter-section,
    body.admin-redesign .main-content .list-group {
        border-radius: 9px !important;
    }

    body.admin-redesign .main-content .card-body,
    body.admin-redesign .main-content .card-header,
    body.admin-redesign .main-content .card-footer {
        padding: 0.72rem !important;
    }

    body.admin-redesign .main-content .auto-filter-form,
    body.admin-redesign .main-content .filter-form,
    body.admin-redesign .main-content .filters-card,
    body.admin-redesign .main-content .filter-section {
        padding: 0.72rem !important;
    }

    body.admin-redesign .main-content .btn {
        min-height: 38px;
        padding: 0.42rem 0.62rem;
        white-space: normal;
    }

    body.admin-redesign .main-content .student-management-table tr.student-list-row > td,
    body.admin-redesign .main-content .class-management-table tr.class-list-row > td,
    body.admin-redesign .main-content .branch-management-table tr.branch-list-row > td,
    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td,
    body.admin-redesign .main-content .public-post-management-table tr.public-post-row > td,
    body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row > td,
    body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row > td {
        grid-template-columns: minmax(86px, 30%) minmax(0, 1fr) !important;
        gap: 0.55rem !important;
        padding: 0.58rem 0.66rem !important;
    }

    body.admin-redesign .main-content .student-management-table tr.student-list-row > td:first-child,
    body.admin-redesign .main-content .class-management-table tr.class-list-row > td:first-child,
    body.admin-redesign .main-content .branch-management-table tr.branch-list-row > td:first-child,
    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td:first-child,
    body.admin-redesign .main-content .public-post-management-table tr.public-post-row > td:first-child,
    body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row > td:first-child,
    body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row > td:first-child {
        padding: 0.72rem 0.66rem !important;
    }

    body.admin-redesign .main-content .student-management-table tr.student-list-row > td[data-label="Thao tác"],
    body.admin-redesign .main-content .class-management-table tr.class-list-row > td[data-label="Thao tác"],
    body.admin-redesign .main-content .branch-management-table tr.branch-list-row > td[data-label="Thao tác"],
    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td[data-label="Thao tác"],
    body.admin-redesign .main-content .public-post-management-table tr.public-post-row > td[data-label="Thao tác"],
    body.admin-redesign .main-content .academic-year-management-table tr.academic-year-row > td[data-label="Thao tác"],
    body.admin-redesign .main-content .activity-log-management-table tr.activity-log-row > td[data-label="Thao tác"] {
        align-items: start;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons,
    body.admin-redesign .main-content .class-management-table .class-row-actions,
    body.admin-redesign .main-content .branch-management-table .branch-row-actions,
    body.admin-redesign .main-content .user-management-table .action-buttons,
    body.admin-redesign .main-content .public-post-management-table .public-post-row-actions,
    body.admin-redesign .main-content .academic-year-management-table .academic-year-row-actions,
    body.admin-redesign .main-content .activity-log-management-table .table-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)) !important;
        gap: 0.45rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: stretch !important;
        overflow: hidden;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons .btn,
    body.admin-redesign .main-content .class-management-table .class-row-actions .btn,
    body.admin-redesign .main-content .branch-management-table .branch-row-actions .btn,
    body.admin-redesign .main-content .user-management-table .action-buttons .btn,
    body.admin-redesign .main-content .public-post-management-table .public-post-row-actions .btn,
    body.admin-redesign .main-content .academic-year-management-table .academic-year-row-actions .btn,
    body.admin-redesign .main-content .activity-log-management-table .table-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    body.admin-redesign .main-content .dataTables_wrapper > .row:first-child,
    body.admin-redesign .main-content .dataTables_wrapper > .row:last-child {
        padding-left: 0.62rem !important;
        padding-right: 0.62rem !important;
    }
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card,
[data-bs-theme="dark"] body.admin-redesign .main-content .table-card,
[data-bs-theme="dark"] body.admin-redesign .main-content .filter-section,
[data-bs-theme="dark"] body.admin-redesign .main-content .list-group,
[data-bs-theme="dark"] body.admin-redesign .main-content .modal-content,
[data-bs-theme="dark"] body.admin-redesign .main-content .table-responsive {
    background: rgba(17, 28, 47, 0.96) !important;
    border-color: #26364f !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-primary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-info,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-success,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-warning,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-danger,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-secondary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-dark,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-start.border-4,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-primary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-info,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-success,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-warning,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-danger,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-secondary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-dark {
    border-color: #26364f !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-primary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-primary {
    border-left-color: #60a5fa !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-info,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-info {
    border-left-color: #22d3ee !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-success,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-success {
    border-left-color: #34d399 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-warning,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-warning {
    border-left-color: #fbbf24 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-danger,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-danger,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-start.border-danger {
    border-left-color: #fb7185 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-secondary,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-secondary {
    border-left-color: #94a3b8 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-dark,
[data-bs-theme="dark"] body.admin-redesign .main-content .card.border-left-dark {
    border-left-color: #64748b !important;
}

/* Attendance status + duplicate page-title polish - 20260715 */
body.admin-redesign .main-content .attendance-status-group .btn {
    background: #fff !important;
    border-width: 1.5px !important;
    font-weight: 800;
    color: #1f2937 !important;
    overflow: hidden;
}

body.admin-redesign .main-content .attendance-status-group .btn-outline-success {
    color: #198754 !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-outline-warning {
    color: #3f3200 !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-outline-danger {
    color: #dc3545 !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-success {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 14px rgba(25, 135, 84, 0.18) !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-warning {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #1f2937 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 6px 14px rgba(255, 193, 7, 0.2) !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 14px rgba(220, 53, 69, 0.18) !important;
}

body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn i,
body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn .attendance-status-text {
    color: inherit !important;
    opacity: 1 !important;
}

body.admin-redesign .main-content .attendance-save-status.text-success {
    color: #198754 !important;
}

body.admin-redesign .main-content :is(.attendance-page-header, .management-list-header, .report-page-header, .student-cards-page-header, .import-page-header, .academic-year-page-header, .announcement-page-header) > h1,
body.admin-redesign .main-content > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1,
body.admin-redesign .main-content > .container-fluid > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1 {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    body.admin-redesign .main-content :is(.attendance-page-header, .management-list-header, .report-page-header, .student-cards-page-header, .import-page-header, .academic-year-page-header, .announcement-page-header) > h1,
    body.admin-redesign .main-content > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1,
    body.admin-redesign .main-content > .container-fluid > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1 {
        display: none !important;
    }

    body.admin-redesign .main-content :is(.attendance-page-header, .management-list-header, .report-page-header, .student-cards-page-header, .import-page-header, .academic-year-page-header, .announcement-page-header),
    body.admin-redesign .main-content > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4,
    body.admin-redesign .main-content > .container-fluid > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 {
        justify-content: flex-end !important;
        margin-bottom: 0.85rem !important;
    }

    body.admin-redesign .main-content :is(.attendance-page-header, .management-list-header, .report-page-header, .student-cards-page-header, .import-page-header, .academic-year-page-header, .announcement-page-header):has(> h1:only-child),
    body.admin-redesign .main-content > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4:has(> h1:only-child),
    body.admin-redesign .main-content > .container-fluid > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4:has(> h1:only-child) {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    body.admin-redesign .main-content :is(.attendance-page-header, .management-list-header, .report-page-header, .student-cards-page-header, .import-page-header, .academic-year-page-header, .announcement-page-header) > h1,
    body.admin-redesign .main-content > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1,
    body.admin-redesign .main-content > .container-fluid > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 > h1 {
        font-size: clamp(1.12rem, 5.2vw, 1.42rem) !important;
        line-height: 1.18 !important;
        margin-left: 0.35rem !important;
        margin-right: 0.35rem !important;
    }

    body.admin-redesign .main-content .attendance-page-header {
        gap: 0.65rem !important;
        margin-bottom: 0.9rem !important;
    }

    body.admin-redesign .main-content .attendance-status-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.admin-redesign .main-content .attendance-status-group .btn {
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 0.45rem 0.22rem !important;
        font-size: 0.8rem !important;
        line-height: 1.12 !important;
        gap: 0.25rem !important;
    }

    body.admin-redesign .main-content .attendance-status-text {
        display: inline !important;
        white-space: normal !important;
    }
}

@media (max-width: 380px) {
    body.admin-redesign .main-content .attendance-status-group .btn {
        font-size: 0.74rem !important;
    }
}

[data-bs-theme="dark"] body.admin-redesign .main-content .attendance-status-group .btn {
    background: #111827 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-success {
    background: #20a164 !important;
    border-color: #20a164 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-warning {
    background: #facc15 !important;
    border-color: #facc15 !important;
    color: #111827 !important;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .attendance-status-group .btn-check:checked + .btn-outline-danger {
    background: #f43f5e !important;
    border-color: #f43f5e !important;
    color: #fff !important;
}

/* Single visible page title in admin pages - 20260715 */
body.admin-redesign .topbar .container-fluid {
    min-width: 0;
}

body.admin-redesign .topbar-page-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(46vw, 720px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.2;
}

body.admin-redesign .main-content :is(
    .announcement-page-header,
    .management-list-header,
    .attendance-page-header,
    .report-page-header,
    .student-cards-page-header,
    .import-page-header,
    .academic-year-page-header,
    .student-history-page-header,
    .score-page-header
) > :is(h1, div:first-child:has(> h1)),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > h1,
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:first-child:has(> h1),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:first-child:has(> .h3),
body.admin-redesign .main-content .container-fluid > .d-flex.flex-column.flex-lg-row.mb-4 > div:first-child:has(> h1),
body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 > div:first-child:has(> h1) {
    display: none !important;
}

body.admin-redesign .main-content :is(
    .announcement-page-header,
    .management-list-header,
    .attendance-page-header,
    .report-page-header,
    .student-cards-page-header,
    .import-page-header,
    .academic-year-page-header,
    .student-history-page-header,
    .score-page-header
),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4:has(> h1),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4:has(> div:first-child > h1),
body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 {
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.85rem !important;
    padding-top: 0 !important;
}

body.admin-redesign .main-content :is(
    .announcement-page-header,
    .management-list-header,
    .attendance-page-header,
    .report-page-header,
    .student-cards-page-header,
    .import-page-header,
    .academic-year-page-header,
    .student-history-page-header,
    .score-page-header
):has(> h1:only-child),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4:has(> h1:only-child) {
    display: none !important;
}

body.admin-redesign .main-content :is(
    .page-header-actions,
    .announcement-header-actions,
    .attendance-page-actions,
    .student-cards-actions,
    .report-page-actions,
    .public-post-header-actions
),
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child,
body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 > a,
body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 > .btn {
    margin-left: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

body.admin-redesign .main-content :is(
    .page-header-actions,
    .announcement-header-actions,
    .attendance-page-actions,
    .student-cards-actions,
    .report-page-actions
) .btn,
body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child .btn {
    min-height: 40px;
}

@media (max-width: 767.98px) {
    body.admin-redesign .topbar-page-title {
        max-width: 46vw;
        font-size: 0.98rem;
    }

    body.admin-redesign .main-content :is(
        .announcement-page-header,
        .management-list-header,
        .attendance-page-header,
        .report-page-header,
        .student-cards-page-header,
        .import-page-header,
        .academic-year-page-header,
        .student-history-page-header,
        .score-page-header
    ),
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4:has(> h1),
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4:has(> div:first-child > h1),
    body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 {
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-bottom: 0.65rem !important;
    }

    body.admin-redesign .main-content :is(
        .page-header-actions,
        .announcement-header-actions,
        .attendance-page-actions,
        .student-cards-actions,
        .report-page-actions
    ),
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
    }

    body.admin-redesign .main-content :is(
        .page-header-actions,
        .announcement-header-actions,
        .attendance-page-actions,
        .student-cards-actions,
        .report-page-actions
    ) .btn,
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child .btn {
        flex: 1 1 150px;
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    body.admin-redesign .topbar-page-title {
        max-width: 38vw;
        font-size: 0.92rem;
    }
}

/* Mobile compact buttons and contained list cards - 20260715 */
@media (max-width: 767.98px) {
    body.admin-redesign,
    body.admin-redesign #content,
    body.admin-redesign .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body.admin-redesign .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body.admin-redesign .main-content > .container-fluid,
    body.admin-redesign .main-content > .container-fluid > .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
    }

    body.admin-redesign .main-content .card,
    body.admin-redesign .main-content .table-card,
    body.admin-redesign .main-content .filter-section,
    body.admin-redesign .main-content .filters-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.admin-redesign .main-content .card > .card-body:not(.p-0) > .table-responsive,
    body.admin-redesign .main-content .student-table-responsive,
    body.admin-redesign .main-content .user-table-responsive,
    body.admin-redesign .main-content .class-table-responsive,
    body.admin-redesign .main-content .branch-table-responsive,
    body.admin-redesign .main-content .academic-year-table-responsive,
    body.admin-redesign .main-content .activity-log-table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        border-radius: 9px !important;
    }

    body.admin-redesign .main-content :is(
        .student-table-responsive,
        .user-table-responsive,
        .class-table-responsive,
        .branch-table-responsive,
        .academic-year-table-responsive,
        .activity-log-table-responsive
    ) :is(.dataTables_wrapper, .dataTables_scroll, .dataTables_scrollBody) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .student-management-table,
        .user-management-table,
        .class-management-table,
        .branch-management-table,
        .academic-year-management-table,
        .activity-log-management-table
    ),
    body.admin-redesign .main-content :is(
        .student-management-table,
        .user-management-table,
        .class-management-table,
        .branch-management-table,
        .academic-year-management-table,
        .activity-log-management-table
    ) tbody,
    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td {
        grid-template-columns: minmax(78px, 29%) minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding-left: 0.72rem !important;
        padding-right: 0.72rem !important;
        overflow: hidden;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td::before {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td[data-label="Thao tác"] {
        display: block !important;
        padding: 0.72rem !important;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td[data-label="Thao tác"]::before {
        display: block;
        margin-bottom: 0.5rem;
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    body.admin-redesign .main-content :is(
        .student-management-table .action-buttons,
        .user-management-table .action-buttons,
        .class-management-table .class-row-actions,
        .branch-management-table .branch-row-actions,
        .academic-year-management-table .academic-year-row-actions,
        .activity-log-management-table .table-actions
    ) {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 0.48rem !important;
        justify-self: stretch !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .student-management-table .action-buttons .btn,
        .user-management-table .action-buttons .btn,
        .class-management-table .class-row-actions .btn,
        .branch-management-table .branch-row-actions .btn,
        .academic-year-management-table .academic-year-row-actions .btn,
        .activity-log-management-table .table-actions .btn
    ) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0.35rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content .page-header-actions,
    body.admin-redesign .main-content .announcement-header-actions,
    body.admin-redesign .main-content .attendance-page-actions,
    body.admin-redesign .main-content .student-cards-actions,
    body.admin-redesign .main-content .report-page-actions,
    body.admin-redesign .main-content .public-post-header-actions,
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .page-header-actions,
        .announcement-header-actions,
        .attendance-page-actions,
        .student-cards-actions,
        .report-page-actions,
        .public-post-header-actions
    ) .btn,
    body.admin-redesign .main-content .container-fluid > :is(.d-flex, .d-sm-flex).mb-4 > div:last-child .btn {
        flex: 1 1 calc(50% - 0.5rem) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        padding: 0.48rem 0.65rem !important;
        font-size: 0.95rem !important;
        line-height: 1.18 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body.admin-redesign .main-content .page-header-actions .badge {
        flex: 1 1 100% !important;
        width: 100%;
        justify-content: center;
        min-height: 36px;
        text-align: center;
    }

    body.admin-redesign .main-content .dataTables_wrapper > .row {
        --bs-gutter-x: 0;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.admin-redesign .main-content .dataTables_wrapper .dataTables_length,
    body.admin-redesign .main-content .dataTables_wrapper .dataTables_filter {
        max-width: 100%;
        overflow: hidden;
    }

    body.admin-redesign .main-content .dataTables_wrapper .dataTables_length select {
        max-width: 86px;
    }

    body.admin-redesign .main-content .team-management-page .btn,
    body.admin-redesign .main-content .team-management-page .team-toggle-btn {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.18 !important;
        white-space: normal !important;
    }

    body.admin-redesign .main-content .team-management-page form .btn {
        width: 100%;
    }
}

/* Final mobile action/table containment hotfix - 20260715 */
@media (max-width: 767.98px) {
    body.admin-redesign .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body.admin-redesign .main-content > .container-fluid,
    body.admin-redesign .main-content > .container-fluid > .container-fluid,
    body.admin-redesign .main-content .card,
    body.admin-redesign .main-content .table-card,
    body.admin-redesign .main-content .filter-section,
    body.admin-redesign .main-content .filters-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    body.admin-redesign .main-content :is(
        .page-header-actions,
        .announcement-header-actions,
        .attendance-page-actions,
        .student-cards-actions,
        .report-page-actions,
        .public-post-header-actions
    ) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.admin-redesign .main-content :is(
        .page-header-actions,
        .announcement-header-actions,
        .attendance-page-actions,
        .student-cards-actions,
        .report-page-actions,
        .public-post-header-actions
    ) :is(.btn, .badge) {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        max-height: 44px !important;
        padding: 0.4rem 0.55rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.12 !important;
        font-size: 0.92rem !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .page-header-actions .badge {
        grid-column: 1 / -1;
        justify-self: center;
    }

    body.admin-redesign .main-content :is(
        .management-list-header,
        .student-history-page-header,
        .import-page-header,
        .academic-year-page-header
    ) > :is(.btn, a.btn, .badge) {
        min-height: 40px !important;
        height: 40px !important;
        max-height: 44px !important;
        padding: 0.4rem 0.65rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.12 !important;
        font-size: 0.92rem !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content :is(
        .student-table-responsive,
        .user-table-responsive,
        .class-table-responsive,
        .branch-table-responsive,
        .academic-year-table-responsive,
        .activity-log-table-responsive
    ) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        overscroll-behavior-x: contain;
    }

    body.admin-redesign .main-content :is(
        .student-management-table,
        .user-management-table,
        .class-management-table,
        .branch-management-table,
        .academic-year-management-table,
        .activity-log-management-table,
        .student-management-table tbody,
        .user-management-table tbody,
        .class-management-table tbody,
        .branch-management-table tbody,
        .academic-year-management-table tbody,
        .activity-log-management-table tbody,
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td {
        grid-template-columns: minmax(76px, 28%) minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td > *,
    body.admin-redesign .main-content :is(
        .student-list-row,
        .user-row-detail,
        .class-list-row,
        .branch-list-row,
        .academic-year-row,
        .activity-log-row
    ) > td::before {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.admin-redesign .main-content :is(
        .student-management-table .action-buttons,
        .user-management-table .action-buttons,
        .class-management-table .class-row-actions,
        .branch-management-table .branch-row-actions,
        .academic-year-management-table .academic-year-row-actions,
        .activity-log-management-table .table-actions
    ) {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 0.48rem !important;
        justify-self: stretch !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content :is(
        .student-management-table .action-buttons .btn,
        .user-management-table .action-buttons .btn,
        .class-management-table .class-row-actions .btn,
        .branch-management-table .branch-row-actions .btn,
        .academic-year-management-table .academic-year-row-actions .btn,
        .activity-log-management-table .table-actions .btn
    ) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0.35rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content .team-management-page :is(.btn, .team-toggle-btn) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }
}

/* Targeted action/button polish - 20260715 */
@media (min-width: 768px) {
    body.admin-redesign .main-content .student-management-table th:last-child,
    body.admin-redesign .main-content .student-management-table td:last-child {
        width: 238px !important;
        min-width: 238px !important;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.42rem !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons .btn {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }

    body.admin-redesign .main-content .student-management-table .action-buttons > .student-action-readonly {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0.45rem 0.65rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 > a.btn {
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
}

@media (max-width: 767.98px) {
    body.admin-redesign .main-content .team-management-page > .d-flex.mb-4 > a.btn {
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0.4rem 0.65rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td:first-child {
        display: block !important;
        padding: 0.82rem !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.72rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-redesign .main-content .user-management-table .user-avatar-sm {
        width: 48px !important;
        height: 64px !important;
        flex: 0 0 48px !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-name,
    body.admin-redesign .main-content .user-management-table .user-table-identity .small {
        display: block !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td[data-label="Thao tác"] {
        display: block !important;
        padding: 0.72rem !important;
        overflow: visible !important;
    }

    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td[data-label="Thao tác"]::before {
        display: block !important;
        margin-bottom: 0.5rem !important;
    }

    body.admin-redesign .main-content .user-management-table .action-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: stretch !important;
    }

    body.admin-redesign .main-content .user-management-table .action-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0.35rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Keep account identities and account actions predictable - 20260715 */
@media (min-width: 768px) {
    body.admin-redesign .main-content .user-management-table th:last-child,
    body.admin-redesign .main-content .user-management-table td:last-child {
        width: 160px !important;
        min-width: 160px !important;
    }

    body.admin-redesign .main-content .user-management-table .action-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, 38px) !important;
        justify-content: end !important;
        align-items: center !important;
        gap: 0.45rem !important;
        width: 130px !important;
        max-width: 130px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    body.admin-redesign .main-content .user-management-table .action-buttons .btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
}

@media (max-width: 767.98px) {
    body.admin-redesign .main-content .user-management-table tr.user-row-detail > td:first-child {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity {
        display: flex !important;
        align-items: center !important;
        gap: 0.8rem !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity > .min-w-0 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-name {
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity .small,
    body.admin-redesign .main-content .user-management-table .user-table-identity .text-break {
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
    }
}

/* Keep account cards readable after every global mobile table transform. */
@media (max-width: 767.98px) {
    body.admin-redesign .main-content .user-management-table .user-table-identity {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity.has-selection-control {
        grid-template-columns: auto 48px minmax(0, 1fr) !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity > .min-w-0 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        line-height: 1.3 !important;
    }

    body.admin-redesign .main-content .user-management-table .user-table-identity .small,
    body.admin-redesign .main-content .user-management-table .user-table-identity .text-break {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body.admin-redesign .main-content .user-management-table .user-selection-control {
        margin: 0 !important;
        align-self: center !important;
    }

    body.admin-redesign .main-content .user-management-table .user-presence-status {
        align-items: flex-end;
        text-align: right;
    }
}

/* Mobile touch targets: keep compact visuals while reserving a reliable
   44px hit area for row actions, checkboxes and switches. */
@media (max-width: 767.98px) {
    body.admin-redesign .main-content .btn-sm,
    body.admin-redesign .main-content .btn-group-sm > .btn {
        min-height: 44px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    body.admin-redesign .main-content :is(
        .action-buttons,
        .student-row-actions,
        .score-row-actions,
        .attendance-row-actions,
        .photo-actions,
        .permission-actions,
        .btn-group
    ) > :is(.btn, .btn-sm, form > .btn, form > .btn-sm) {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    body.admin-redesign .main-content .form-check {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0.55rem;
        min-height: 44px;
        padding-left: 0 !important;
    }

    body.admin-redesign .main-content .form-check .form-check-input {
        float: none !important;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0 !important;
    }

    body.admin-redesign .main-content .form-check.form-switch .form-check-input {
        width: 2.5rem;
    }

    body.admin-redesign .main-content .form-check .form-check-label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
.push-permission-modal {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    overflow: hidden;
}

.push-permission-icon {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 2rem;
    background: linear-gradient(135deg, #0d6efd, #16c5dc);
    box-shadow: 0 12px 30px rgba(13, 110, 253, .28);
}

.push-permission-modal .btn {
    min-height: 44px;
    min-width: 132px;
    border-radius: 10px;
    font-weight: 700;
}

.push-permission-modal .modal-body {
    max-height: min(92dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.push-install-steps {
    padding-left: 1.25rem;
}

.push-install-steps li + li {
    margin-top: .45rem;
}

@media (max-width: 575.98px) {
    #pushPermissionRequestModal .modal-dialog {
        margin: .75rem;
    }

    .push-permission-modal .btn {
        width: 100%;
    }
}

/* Frozen academic-year archive: contained mobile cards and snapshot profile. */
.academic-year-archives-page {
    min-width: 0;
    max-width: 100%;
}

.academic-year-archives-page .archive-year-tabs {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.academic-year-archives-page .archive-year-tabs .nav-item,
.academic-year-archives-page .archive-year-tabs .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.academic-year-archive-student-row {
    cursor: pointer;
}

.academic-year-archive-student-row:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .32);
    outline-offset: -3px;
}

.archive-student-name {
    display: block;
    width: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--bs-primary, #0d6efd);
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.archive-student-name:hover,
.archive-student-name:focus-visible {
    color: #084298;
    text-decoration: underline;
}

.archive-student-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
    min-width: 0;
}

.archive-student-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: max-content !important;
    max-width: 100%;
    white-space: normal;
}

.archive-student-detail {
    padding: 1.25rem;
    background: #f5f7fb;
    overflow-x: hidden;
}

.archive-student-detail-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e1e7f0;
    border-radius: 12px;
    background: #fff;
}

.archive-student-detail-heading {
    min-width: 0;
}

.archive-student-detail-heading h3,
.archive-student-detail-heading p {
    overflow-wrap: anywhere;
}

.archive-student-detail-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.archive-student-detail-section {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e1e7f0;
    border-radius: 12px;
    background: #fff;
}

.archive-student-detail-section > h4 {
    display: flex;
    align-items: center;
    margin-bottom: .85rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid #edf1f6;
}

.archive-student-detail-wide-section,
.archive-student-summary-section {
    grid-column: 1 / -1;
}

.archive-student-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.archive-student-detail-grid > div {
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid #edf1f6;
    border-radius: 9px;
    background: #fafbfd;
}

.archive-student-detail-grid dt {
    margin-bottom: .2rem;
    color: #6b7280;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.archive-student-detail-grid dd {
    min-width: 0;
    margin: 0;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.archive-student-detail-grid .archive-student-detail-wide {
    grid-column: 1 / -1;
}

.archive-team-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--archive-team-color, #6c757d);
}

.archive-student-note {
    color: #4b5563;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

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

.archive-student-summary-grid > div {
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .8rem;
    border: 1px solid #e6ebf2;
    border-radius: 9px;
    background: #fafbfd;
    text-align: center;
}

.archive-student-summary-grid span {
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
}

.archive-student-summary-grid strong {
    font-size: 1.08rem;
    overflow-wrap: anywhere;
}

.archive-student-record-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.archive-student-record-table td,
.archive-student-record-table th {
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table thead th {
        vertical-align: middle;
        text-align: center !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table thead th:nth-child(1) {
        text-align: left !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody td {
        vertical-align: middle;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody td:nth-child(2),
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody td:nth-child(3),
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody td:nth-child(4) {
        text-align: center !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table .archive-student-name {
        display: block !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table .archive-student-actions {
        justify-content: center !important;
    }
}

@media (max-width: 767.98px) {
    .academic-year-archives-page,
    .academic-year-archives-page > *,
    .academic-year-archives-page .card,
    .academic-year-archives-page .card-body,
    .academic-year-archives-page .tab-content,
    .academic-year-archives-page .tab-pane {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .academic-year-archives-page .archive-page-header {
        align-items: stretch !important;
    }

    .academic-year-archives-page .archive-page-header > div,
    .academic-year-archives-page .archive-page-header > .btn {
        width: 100%;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-tabs-card > .card-header {
        padding: .7rem .7rem 0 !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-tabs-card > .archive-tab-content {
        padding: .9rem .7rem 1rem !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-year-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .3rem;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border-bottom: 0;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-year-tabs .nav-item {
        width: 100%;
        min-width: 0;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-year-tabs .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px;
        padding: .5rem .2rem !important;
        border: 1px solid #dbe3ef !important;
        border-radius: .65rem .65rem 0 0 !important;
        font-size: .8rem !important;
        line-height: 1.15;
        text-align: center;
        white-space: normal !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-year-tabs .nav-link i {
        margin-right: 0 !important;
        font-size: .95rem;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-year-tab-label {
        min-width: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-filter-form {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 .1rem;
    }

    .academic-year-archives-page .archive-student-filter-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-table-responsive,
    body.admin-redesign .main-content .academic-year-archives-page .archive-student-table-responsive .dataTables_wrapper,
    body.admin-redesign .main-content .academic-year-archives-page .archive-student-table-responsive .dataTables_scroll,
    body.admin-redesign .main-content .academic-year-archives-page .archive-student-table-responsive .dataTables_scrollBody {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_wrapper > .row:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .65rem !important;
        width: 100% !important;
        margin: 0 0 .75rem !important;
        padding: 0 .15rem !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_wrapper > .row:first-child > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_length,
    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_filter {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_filter label {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .35rem;
        width: 100%;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_filter input {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page #archive-students .dataTables_length label {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table,
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody,
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-table tbody {
        padding: .25rem !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-row {
        overflow: hidden !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-row > td {
        grid-template-columns: minmax(78px, 29%) minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: .55rem !important;
        padding: .65rem .7rem !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-row > td::before,
    body.admin-redesign .main-content .academic-year-archives-page .academic-year-archive-student-row > td > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-status {
        width: max-content !important;
        max-width: 100% !important;
        justify-self: start !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: .45rem;
        justify-self: stretch !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: .45rem .55rem !important;
    }

    #archiveStudentDetailModal .modal-dialog {
        width: auto;
        max-width: calc(100% - .7rem);
        height: calc(100% - .7rem);
        margin: .35rem;
    }

    #archiveStudentDetailModal .modal-content {
        max-height: 100%;
    }

    #archiveStudentDetailModal .modal-header {
        padding: .75rem;
    }

    .archive-student-detail {
        padding: .65rem !important;
    }

    .archive-student-detail-hero {
        flex-direction: column;
        gap: .8rem;
        padding: .85rem;
    }

    .archive-student-detail .student-detail-avatar {
        width: 112px;
        height: 150px;
    }

    .archive-student-detail-sections,
    .archive-student-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .archive-student-detail-wide,
    .archive-student-detail-wide-section,
    .archive-student-summary-section {
        grid-column: auto !important;
    }

    .archive-student-detail-section {
        padding: .8rem;
    }

    .archive-student-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .archive-student-summary-grid > div {
        padding: .65rem .45rem;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-record-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-record-table tbody {
        padding: 0 !important;
    }

    body.admin-redesign .main-content .academic-year-archives-page .archive-student-record-table tbody td {
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        padding: .55rem .6rem !important;
    }
}

/* Public-post row actions are icon-only controls; keep all available actions on one line. */
.public-post-management-table .public-post-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    white-space: nowrap;
}

.public-post-management-table .public-post-toggle-form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

body.admin-redesign .main-content .public-post-management-table .public-post-row-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 0.45rem !important;
    overflow: visible !important;
}

body.admin-redesign .main-content .public-post-management-table .public-post-actions-cell {
    min-width: 142px;
    white-space: nowrap;
}

body.admin-redesign .main-content .public-post-management-table .public-post-row-actions .btn {
    flex: 0 0 42px;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px;
    min-height: 42px !important;
    padding: 0 !important;
}

/* Student profile details: shared visual language for active and archived records. */
.student-detail-modal-header {
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #dbe8f6;
    background:
        radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .14), transparent 35%),
        linear-gradient(135deg, #fbfdff 0%, #edf6ff 100%);
}

.student-detail-modal-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.student-detail-modal-title > div {
    min-width: 0;
}

.student-detail-modal-title .modal-title,
.student-detail-modal-title .small {
    overflow-wrap: anywhere;
}

.student-detail-modal-title .small {
    color: #64748b;
}

.student-detail-modal-icon {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd 0%, #16b9d4 100%);
    box-shadow: 0 9px 22px rgba(13, 110, 253, .22);
    font-size: 1.15rem;
}

.student-detail-modal-icon-archive {
    background: linear-gradient(135deg, #6f42c1 0%, #2563eb 100%);
    box-shadow: 0 9px 22px rgba(79, 70, 229, .22);
}

#studentDetailModal .modal-content,
#archiveStudentDetailModal .modal-content {
    overflow: hidden;
    border-radius: 20px;
}

.student-profile-detail {
    padding: 1rem;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(13, 110, 253, .08), transparent 26%),
        #f5f8fc;
}

.student-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid #dce8f6;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 8%, rgba(6, 182, 212, .17), transparent 31%),
        radial-gradient(circle at 0 100%, rgba(13, 110, 253, .11), transparent 35%),
        #fff;
    box-shadow: 0 12px 32px rgba(31, 64, 104, .09);
}

.student-profile-hero .student-detail-avatar,
.archive-student-detail-hero .student-detail-avatar {
    flex: 0 0 auto;
    border: 4px solid #fff;
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(30, 58, 91, .18);
}

.student-profile-hero-content,
.archive-student-detail-heading {
    min-width: 0;
}

.student-profile-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    max-width: 100%;
    margin-bottom: .55rem;
    padding: .32rem .65rem;
    border: 1px solid #cfe1ff;
    border-radius: 999px;
    color: #0b5ed7;
    background: #edf5ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.archive-student-eyebrow {
    color: #5b3bb7;
    border-color: #ddd2ff;
    background: #f3efff;
}

.student-profile-name {
    margin: 0 0 .65rem;
    color: #1267e8;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.student-profile-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .48rem;
}

.student-profile-badges .badge,
.student-profile-context-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 32px;
    padding: .38rem .65rem;
    border-radius: 999px;
    line-height: 1.15;
    white-space: normal;
}

.student-profile-context-badge {
    max-width: 100%;
    color: #334155;
    border: 1px solid #dbe5f1;
    background: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.student-profile-context-badge i {
    color: #0d6efd;
}

.student-profile-hero-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    max-width: 680px;
    margin: .75rem 0 0;
    color: #64748b;
    font-size: .83rem;
    line-height: 1.45;
}

.student-profile-hero-note i {
    margin-top: .18rem;
    color: #0ea5e9;
}

.student-profile-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.student-profile-card {
    --student-card-accent: #0d6efd;
    --student-card-soft: #eaf2ff;
    --student-card-icon: #0d6efd;
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e0e8f2;
    border-top: 3px solid var(--student-card-accent);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 64, 104, .07);
}

.student-profile-card-success {
    --student-card-accent: #16a36a;
    --student-card-soft: #e9f8f1;
    --student-card-icon: #118658;
}

.student-profile-card-warning {
    --student-card-accent: #f0ad00;
    --student-card-soft: #fff6d9;
    --student-card-icon: #a66c00;
}

.student-profile-card-info {
    --student-card-accent: #06a8c7;
    --student-card-soft: #e7f9fc;
    --student-card-icon: #07849c;
}

.student-profile-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-width: 0;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #edf1f6;
}

.student-profile-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--student-card-icon);
    background: var(--student-card-soft);
    font-size: 1.15rem;
}

.student-profile-card-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.student-profile-card-header p {
    margin: .16rem 0 0;
    color: #718096;
    font-size: .76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.student-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
}

.student-profile-info-item {
    min-width: 0;
    padding: .72rem .78rem;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}

.student-profile-info-item dt {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .28rem;
    color: #64748b;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.student-profile-info-item dt i {
    width: 1rem;
    color: var(--student-card-accent);
    text-align: center;
}

.student-profile-info-item dd {
    min-width: 0;
    margin: 0;
    color: #1f2937;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.student-profile-info-wide {
    grid-column: 1 / -1;
}

.student-detail-value-primary,
.student-detail-phone {
    color: #0d6efd !important;
    font-weight: 750 !important;
}

.student-detail-phone {
    text-decoration: none;
}

.student-detail-phone:hover {
    text-decoration: underline;
}

.student-detail-empty {
    color: #94a3b8;
    font-size: .88em;
    font-style: italic;
    font-weight: 500;
}

.student-profile-note {
    min-height: 112px;
    padding: .85rem;
    border: 1px dashed #b9e6ef;
    border-radius: 12px;
    color: #475569;
    background: #f6fcfd;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.student-profile-history-card {
    grid-column: 1 / -1;
}

.student-profile-history-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.student-detail-table-wrap,
.archive-student-record-table-wrap {
    overflow: hidden;
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    background: #fff;
}

.student-detail-table-wrap table,
.archive-student-record-table-wrap table {
    margin-bottom: 0;
}

/* Archived student detail keeps its data-rich layout but receives the same cards and icon language. */
.archive-student-detail {
    background:
        radial-gradient(circle at 100% 0, rgba(111, 66, 193, .08), transparent 24%),
        #f5f8fc;
}

.archive-student-detail-hero {
    overflow: hidden;
    border-color: #dfdff4;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 8%, rgba(111, 66, 193, .15), transparent 31%),
        radial-gradient(circle at 0 100%, rgba(13, 110, 253, .09), transparent 35%),
        #fff;
    box-shadow: 0 12px 32px rgba(53, 51, 105, .09);
}

.archive-student-detail-heading h3 {
    color: #4f46c7;
}

.archive-student-detail-section {
    border-color: #e0e8f2;
    border-top: 3px solid #7c6ce4;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(31, 64, 104, .07);
}

.archive-student-detail-section > h4 {
    min-width: 0;
    color: #25324a;
}

.archive-student-detail-section > h4 > i {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: .7rem !important;
    border-radius: 13px;
    background: #edf3ff;
    font-size: 1rem;
}

.archive-student-detail-section > h4 > i.text-success {
    background: #e8f8f0;
}

.archive-student-detail-section > h4 > i.text-warning {
    background: #fff5d7;
}

.archive-student-detail-section > h4 > i.text-info {
    background: #e7f9fc;
}

.archive-student-detail-grid > div {
    border-color: #e7edf5;
    border-left: 3px solid #d8e5f4;
    border-radius: 12px;
    background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}

.archive-student-detail-grid dt {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.archive-student-detail-grid dt::before {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #7c6ce4;
    content: "";
}

.archive-student-note {
    min-height: 104px;
    padding: .85rem;
    border: 1px dashed #b9e6ef;
    border-radius: 12px;
    background: #f6fcfd;
}

.archive-student-summary-grid > div {
    border-color: #e3eaf3;
    border-top: 3px solid #0d6efd;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 5px 14px rgba(31, 64, 104, .06);
}

.archive-student-summary-grid > div:nth-child(4n + 2) {
    border-top-color: #16a36a;
}

.archive-student-summary-grid > div:nth-child(4n + 3) {
    border-top-color: #f0ad00;
}

.archive-student-summary-grid > div:nth-child(4n + 4) {
    border-top-color: #7c6ce4;
}

@media (max-width: 767.98px) {
    #studentDetailModal .modal-dialog,
    #archiveStudentDetailModal .modal-dialog {
        width: auto;
        max-width: calc(100% - .7rem);
        height: calc(100% - .7rem);
        margin: .35rem;
    }

    #studentDetailModal .modal-content,
    #archiveStudentDetailModal .modal-content {
        max-height: 100%;
        border-radius: 16px;
    }

    .student-detail-modal-header {
        padding: .7rem;
    }

    .student-detail-modal-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .student-detail-modal-title .modal-title {
        font-size: .98rem;
    }

    .student-detail-modal-title .small {
        font-size: .7rem;
    }

    .student-profile-detail,
    .archive-student-detail {
        padding: .65rem !important;
    }

    .student-profile-hero,
    .archive-student-detail-hero {
        flex-direction: column;
        gap: .8rem;
        padding: .9rem;
        border-radius: 16px;
    }

    .student-profile-hero .student-detail-avatar,
    .archive-student-detail .student-detail-avatar {
        width: 112px;
        height: 150px;
        border-radius: 14px;
    }

    .student-profile-badges {
        justify-content: center;
    }

    .student-profile-hero-note {
        justify-content: center;
        text-align: left;
    }

    .student-profile-section-grid,
    .student-profile-info-grid,
    .archive-student-detail-sections,
    .archive-student-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-profile-card,
    .archive-student-detail-section {
        padding: .78rem;
        border-radius: 14px;
    }

    .student-profile-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .student-profile-info-wide,
    .student-profile-history-card {
        grid-column: auto;
    }

    .student-profile-history-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .student-profile-history-header .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }

    .archive-student-detail-section > h4 > i {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }
}

/* Account detail uses the same responsive card language as student profiles. */
.user-detail-modal-icon {
    background: linear-gradient(135deg, #6154db 0%, #0ea5e9 100%);
    box-shadow: 0 9px 22px rgba(79, 70, 229, .22);
}

#userDetailModal .modal-content {
    overflow: hidden;
    border-radius: 20px;
}

.user-profile-detail {
    padding: 1rem;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(99, 102, 241, .08), transparent 24%),
        #f5f8fc;
}

.user-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid #dfe2fa;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 6%, rgba(99, 102, 241, .17), transparent 30%),
        radial-gradient(circle at 0 100%, rgba(14, 165, 233, .11), transparent 35%),
        #fff;
    box-shadow: 0 12px 32px rgba(53, 51, 105, .09);
}

.user-profile-hero .user-detail-avatar {
    width: 150px;
    height: 200px;
    aspect-ratio: 3 / 4;
    flex: 0 0 150px;
    object-fit: cover;
    border-radius: 17px;
    border: 5px solid #fff;
    box-shadow: 0 13px 30px rgba(30, 58, 91, .2);
}

.user-profile-hero-content {
    min-width: 0;
}

.user-profile-eyebrow {
    color: #5848c5;
    border-color: #ddd7ff;
    background: #f2efff;
}

.user-profile-name {
    margin-bottom: .2rem;
    color: #4f46c7;
}

.user-profile-username {
    margin-bottom: .65rem;
    color: #64748b;
    font-size: .92rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.user-profile-hero-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .72rem 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.4;
}

.user-profile-hero-note i {
    color: #6366f1;
}

.user-profile-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.user-profile-system-card {
    --student-card-accent: #7063d9;
    --student-card-soft: #f0edff;
    --student-card-icon: #5a4cc5;
    grid-column: 1 / -1;
}

.user-detail-email {
    color: #0d6efd;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.user-detail-email:hover {
    text-decoration: underline;
}

.user-profile-scope-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .78rem .85rem;
    border: 1px solid #bfe8d5;
    border-radius: 13px;
    color: #176342;
    background: linear-gradient(135deg, #edfaf4 0%, #f6fcf9 100%);
}

.user-profile-scope-banner > i {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: #17a36a;
}

.user-profile-scope-banner div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.user-profile-scope-banner span {
    color: #527565;
    font-size: .76rem;
    line-height: 1.4;
}

.user-profile-assignment-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.user-profile-assignment-group,
.user-profile-class-block {
    min-width: 0;
    padding: .75rem .8rem;
    border: 1px solid #e5ebf3;
    border-radius: 12px;
    background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}

.user-profile-class-block {
    margin-top: .65rem;
}

.user-profile-assignment-label {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .55rem;
    color: #64748b;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.user-profile-assignment-label i {
    width: 1rem;
    color: #16a36a;
    text-align: center;
}

.user-profile-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
}

.user-profile-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: .34rem .6rem;
    border: 1px solid #cfe0f7;
    border-radius: 999px;
    color: #1267c7;
    background: #eef6ff;
    font-size: .75rem;
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.user-profile-chip-leader {
    color: #8a5d00;
    border-color: #f3d786;
    background: #fff7dc;
}

.user-detail-assignments {
    gap: .55rem;
}

.user-detail-assignment {
    min-width: 0;
    padding: .65rem .7rem;
    border: 1px solid #e5ebf3;
    border-radius: 11px;
    background: #fff;
}

.user-detail-assignment:last-child {
    padding-bottom: .65rem;
    border-bottom: 1px solid #e5ebf3;
}

.user-detail-assignment-class {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.user-detail-assignment-class > div {
    display: grid;
    min-width: 0;
}

.user-detail-assignment-class strong,
.user-detail-assignment-class span {
    overflow-wrap: anywhere;
}

.user-detail-assignment-class > div > span {
    color: #718096;
    font-size: .73rem;
}

.user-detail-assignment-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #0d6efd;
    background: #edf5ff;
}

.user-profile-empty-assignment {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: #718096;
    font-size: .82rem;
    line-height: 1.45;
}

.user-profile-empty-assignment i {
    margin-top: .15rem;
    color: #0ea5e9;
}

.user-profile-system-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    #userDetailModal .modal-dialog {
        width: auto;
        max-width: calc(100% - .7rem);
        height: calc(100% - .7rem);
        margin: .35rem;
    }

    #userDetailModal .modal-content {
        max-height: 100%;
        border-radius: 16px;
    }

    .user-profile-detail {
        padding: .65rem;
    }

    .user-profile-hero {
        flex-direction: column;
        gap: .8rem;
        padding: 1rem .85rem;
        border-radius: 16px;
    }

    .user-profile-hero .user-detail-avatar {
        width: 112px;
        height: 150px;
        flex-basis: 112px;
        border-radius: 14px;
    }

    .user-profile-hero-note {
        justify-content: center;
    }

    .user-profile-section-grid,
    .user-profile-assignment-summary,
    .user-profile-system-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-profile-system-card {
        grid-column: auto;
    }

    .user-detail-assignment {
        align-items: stretch;
        flex-direction: column;
    }

    .user-detail-assignment > .role-badge {
        align-self: flex-start;
    }
}

/* Class list: assignee and role share one row on desktop; mobile remains stacked. */
@media (min-width: 768px) {
    .class-management-table .class-assignment-item {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: .55rem;
        width: 100%;
        margin-bottom: .4rem !important;
    }

    .class-management-table .class-assignment-name {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        line-height: 1.35;
    }

    .class-management-table .class-assignment-role {
        flex: 0 0 auto;
        justify-self: auto;
        white-space: nowrap;
    }
}

/* Class quick view: open useful context from the class list without leaving it. */
.class-management-table tr.class-row-detail {
    cursor: pointer;
}

.class-management-table tr.class-row-detail:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(13, 110, 253, .42);
    outline-offset: -3px;
}

.class-detail-modal-icon {
    background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%);
    box-shadow: 0 9px 22px rgba(14, 116, 144, .24);
}

#classDetailModal .modal-content {
    overflow: hidden;
    border-radius: 20px;
}

.class-profile-detail {
    padding: 1rem;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(14, 165, 233, .1), transparent 27%),
        radial-gradient(circle at 0 100%, rgba(16, 185, 129, .08), transparent 28%),
        #f5f8fc;
}

.class-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid #d8ebf0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 91% 4%, rgba(14, 165, 233, .16), transparent 30%),
        radial-gradient(circle at 0 100%, rgba(16, 185, 129, .1), transparent 35%),
        #fff;
    box-shadow: 0 12px 32px rgba(25, 85, 99, .09);
}

.class-profile-hero-icon {
    display: inline-flex;
    flex: 0 0 84px;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border: 5px solid #fff;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%);
    box-shadow: 0 13px 30px rgba(14, 116, 144, .22);
    font-size: 2rem;
}

.class-profile-hero-content {
    min-width: 0;
}

.class-profile-eyebrow {
    color: #087767;
    border-color: #bce9e2;
    background: #ecfdf7;
}

.class-profile-name {
    margin-bottom: .6rem;
    color: #087a69;
}

.class-detail-action-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.class-detail-action-links .btn {
    min-height: 42px;
    padding-inline: 1rem;
    font-weight: 750;
}

.class-detail-action-note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .85rem;
    border: 1px solid #f2d890;
    border-radius: 12px;
    color: #825b00;
    background: #fff9e7;
    font-size: .83rem;
    line-height: 1.35;
}

.class-profile-section-grid {
    margin-top: 1rem;
}

.class-profile-info-card {
    --student-card-accent: #0983a0;
    --student-card-soft: #e7f8fc;
    --student-card-icon: #07819a;
}

.class-profile-assignment-card {
    --student-card-accent: #169b70;
    --student-card-soft: #e9f8f1;
    --student-card-icon: #118658;
}

.class-detail-students-card {
    grid-column: 1 / -1;
    --student-card-accent: #2d6cd7;
    --student-card-soft: #edf3ff;
    --student-card-icon: #2862be;
}

.class-detail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin-right: .25rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    color: #087a69;
    background: #e9f8f1;
    font-weight: 800;
}

.class-detail-assignment-list,
.class-detail-student-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.class-detail-assignment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .72rem .78rem;
    border: 1px solid #e3ebf3;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
}

.class-detail-priority,
.class-detail-student-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #118658;
    background: #e8f8f0;
    font-size: .78rem;
    font-weight: 850;
}

.class-detail-assignment-person,
.class-detail-student-name {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.class-detail-assignment-person strong,
.class-detail-student-name strong {
    color: #25324a;
    font-size: .91rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.class-detail-assignment-person span,
.class-detail-student-name > span {
    color: #718096;
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.class-detail-students-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.class-detail-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .65rem;
    border-radius: 12px;
    color: #1d5db9;
    background: #eaf2ff;
    font-size: .9rem;
    font-weight: 850;
}

.class-detail-student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.class-detail-student-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .7rem;
    border: 1px solid #e2eaf4;
    border-radius: 13px;
    background: #fff;
}

.class-detail-student-order {
    min-width: 25px;
    height: 25px;
    border-radius: 8px;
    color: #2b63bb;
    background: #edf3ff;
    font-size: .7rem;
}

.class-detail-student-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    color: #3975d0;
    background: #edf4ff;
    font-size: .88rem;
}

.class-detail-student-name > span > i,
.class-detail-student-team > i {
    margin-right: .28rem;
    color: #5f8bd1;
}

.class-detail-student-team {
    display: inline-block;
    margin-left: .45rem;
    color: #15715f;
    font-weight: 700;
}

.class-detail-student-status {
    white-space: nowrap;
    font-size: .7rem;
}

.class-detail-empty-state {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .85rem;
    border: 1px dashed #cad8e6;
    border-radius: 12px;
    color: #718096;
    background: #f8fafc;
    font-size: .84rem;
    line-height: 1.45;
}

.class-detail-empty-state > i {
    margin-top: .13rem;
    color: #4390d6;
}

@media (max-width: 767.98px) {
    #classDetailModal .modal-dialog {
        width: auto;
        max-width: calc(100% - .7rem);
        height: calc(100% - .7rem);
        margin: .35rem;
    }

    #classDetailModal .modal-content {
        max-height: 100%;
        border-radius: 16px;
    }

    .class-profile-detail {
        padding: .65rem;
    }

    .class-profile-hero {
        flex-direction: column;
        gap: .8rem;
        padding: 1rem .85rem;
        border-radius: 16px;
        text-align: center;
    }

    .class-profile-hero-icon {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
        border-radius: 21px;
        font-size: 1.65rem;
    }

    .class-profile-hero .student-profile-badges,
    .class-profile-hero .student-profile-hero-note {
        justify-content: center;
    }

    .class-detail-action-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .class-detail-action-links .btn {
        width: 100%;
        padding-inline: .55rem;
        font-size: .82rem;
    }

    .class-detail-action-note {
        grid-column: 1 / -1;
    }

    .class-profile-section-grid,
    .class-detail-student-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .class-detail-students-card {
        grid-column: auto;
    }

    .class-detail-assignment-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .class-detail-assignment-item > .role-badge,
    .class-detail-assignment-item > .role-badge-compact {
        grid-column: 2;
        justify-self: start;
    }

    .class-detail-student-item {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .class-detail-student-status {
        grid-column: 3;
        justify-self: start;
    }

    .class-detail-students-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .class-detail-count-badge {
        grid-column: 1 / -1;
        justify-self: start;
        height: 30px;
        min-width: 34px;
        border-radius: 10px;
    }
}

/* Final mobile alignment overrides for historical student names. */
@media (max-width: 767.98px) {
    body.admin-redesign .main-content .academic-year-archives-page
    .academic-year-archive-student-table .archive-student-name,
    body.admin-redesign .main-content .academic-year-profile-page
    .academic-year-profile-student-table .academic-year-profile-student-name {
        display: block !important;
        justify-self: stretch !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-shadow: none !important;
    }

    body.admin-redesign .main-content .academic-year-profile-page
    .academic-year-profile-student-table,
    body.admin-redesign .main-content .academic-year-profile-page
    .academic-year-profile-student-table tbody {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-redesign .main-content .academic-year-profile-page
    .academic-year-profile-student-table tbody tr:not([hidden]) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

body.admin-redesign .main-content .academic-year-profile-hero h1,
body.admin-redesign .main-content .academic-year-profile-hero p,
body.admin-redesign .main-content .academic-year-profile-hero .academic-year-profile-eyebrow {
    color: #fff !important;
}

body.admin-redesign .main-content .academic-year-profile-hero p {
    opacity: .94;
}

/* Class report dashboard - compact, responsive overview. */
.class-report-dashboard {
    --class-report-blue: #1268f4;
    --class-report-cyan: #08aeca;
    --class-report-green: #159763;
    --class-report-red: #df3b4f;
    --class-report-amber: #eba900;
    --class-report-text: #1b2638;
    --class-report-muted: #69758a;
    --class-report-border: #dbe4f0;
    display: block;
    width: 100%;
    min-width: 0;
}

.class-report-dashboard *,
.class-report-dashboard *::before,
.class-report-dashboard *::after {
    box-sizing: border-box;
}

.class-report-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
    min-width: 0;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 2.6vw, 2.25rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .22), transparent 27%),
        radial-gradient(circle at 56% 110%, rgba(15, 208, 225, .32), transparent 36%),
        linear-gradient(128deg, #075bd9 0%, #087ee8 52%, #08abc8 100%);
    box-shadow: 0 16px 38px rgba(17, 93, 183, .17);
}

.class-report-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -68px;
    bottom: -94px;
    width: 250px;
    height: 250px;
    border: 42px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

.class-report-hero-main {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-width: 0;
}

.class-report-hero-icon {
    display: inline-flex;
    flex: 0 0 82px;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 23px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font-size: 2rem;
    backdrop-filter: blur(10px);
}

.class-report-hero-copy {
    min-width: 0;
}

.class-report-eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.class-report-hero h2 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.75rem, 3vw, 2.65rem);
    font-weight: 850;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.class-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .9rem;
}

.class-report-meta > span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 34px;
    padding: .36rem .7rem;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 999px;
    color: #fff;
    background: rgba(3, 54, 129, .2);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.2;
}

.class-report-hero-actions {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.class-report-hero-actions > .dropdown,
.class-report-export-button {
    width: 100%;
}

.class-report-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    color: #0755bb;
    font-weight: 850;
}

.class-report-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.class-report-shortcuts > a {
    display: flex;
    min-width: 0;
    min-height: 64px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: .45rem .3rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 14px;
    color: #fff;
    background: rgba(0, 58, 135, .19);
    font-size: .73rem;
    font-weight: 780;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

.class-report-shortcuts > a:hover,
.class-report-shortcuts > a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.class-report-shortcuts > a i {
    font-size: 1rem;
}

.class-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.25rem;
}

.class-report-kpi {
    --kpi-color: var(--class-report-blue);
    --kpi-bg: #eaf2ff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    min-width: 0;
    min-height: 122px;
    padding: 1.05rem;
    border: 1px solid var(--class-report-border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(35, 57, 84, .07);
}

.class-report-kpi-success { --kpi-color: var(--class-report-green); --kpi-bg: #e9f8f2; }
.class-report-kpi-info { --kpi-color: var(--class-report-cyan); --kpi-bg: #e6f8fb; }
.class-report-kpi-danger { --kpi-color: var(--class-report-red); --kpi-bg: #fff0f2; }
.class-report-kpi-neutral { --kpi-color: #6e7b8c; --kpi-bg: #eef2f6; }

.class-report-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: var(--kpi-color);
    background: var(--kpi-bg);
    font-size: 1.25rem;
}

.class-report-kpi > div {
    display: grid;
    min-width: 0;
}

.class-report-kpi span:not(.class-report-kpi-icon) {
    color: var(--class-report-muted);
    font-size: .77rem;
    font-weight: 760;
}

.class-report-kpi strong {
    color: var(--class-report-text);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.15;
}

.class-report-kpi small {
    color: var(--kpi-color);
    font-size: .72rem;
    font-weight: 760;
}

.class-report-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem;
    min-width: 0;
}

.class-report-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--class-report-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(35, 57, 84, .065);
}

.class-report-panel-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-height: 84px;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e8edf4;
    background: linear-gradient(180deg, #fff, #fbfcfe);
}

.class-report-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.05rem;
}

.class-report-panel-icon-blue { color: var(--class-report-blue); background: #eaf2ff; }
.class-report-panel-icon-green { color: var(--class-report-green); background: #e9f8f2; }
.class-report-panel-icon-red { color: var(--class-report-red); background: #fff0f2; }

.class-report-panel-header h3 {
    margin: 0;
    color: var(--class-report-text);
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.25;
}

.class-report-panel-header p {
    margin: .12rem 0 0;
    color: var(--class-report-muted);
    font-size: .76rem;
    line-height: 1.35;
}

.class-report-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding-inline: .55rem;
    border-radius: 11px;
    color: var(--class-report-blue);
    background: #eaf2ff;
    font-size: .84rem;
    font-weight: 850;
}

.class-report-panel-count-danger {
    color: var(--class-report-red);
    background: #fff0f2;
}

.class-report-status-list {
    display: grid;
    gap: .7rem;
    padding: 1rem 1.15rem;
}

.class-report-status-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    min-width: 0;
    padding: .78rem .85rem;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fbfcfe;
}

.class-report-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--class-report-green);
}

.class-report-status-paused .class-report-status-dot { background: var(--class-report-amber); }
.class-report-status-left .class-report-status-dot { background: var(--class-report-red); }

.class-report-status-item > div {
    display: grid;
    min-width: 0;
}

.class-report-status-item strong {
    color: var(--class-report-text);
    font-size: .86rem;
    line-height: 1.25;
}

.class-report-status-item small {
    color: var(--class-report-muted);
    font-size: .7rem;
}

.class-report-status-item b {
    min-width: 34px;
    color: var(--class-report-text);
    font-size: 1.05rem;
    text-align: right;
}

.class-report-completion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 0 1.15rem 1.15rem;
}

.class-report-completion-item {
    display: grid;
    gap: .24rem;
    padding: .8rem;
    border-radius: 14px;
    color: #69758a;
    background: #f3f6fa;
}

.class-report-completion-item span {
    font-size: .72rem;
    font-weight: 750;
}

.class-report-completion-item strong {
    color: var(--class-report-text);
    font-size: 1.15rem;
}

.class-report-staff-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.class-report-staff-list > li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    min-width: 0;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #edf1f6;
}

.class-report-staff-list > li:last-child {
    border-bottom: 0;
}

.class-report-staff-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: var(--class-report-blue);
    background: #edf4ff;
    font-size: .73rem;
    font-weight: 850;
}

.class-report-staff-avatar,
.class-report-attention-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--class-report-green);
    background: #e9f8f2;
}

.class-report-staff-person {
    display: grid;
    min-width: 0;
}

.class-report-staff-person strong,
.class-report-attention-item strong {
    min-width: 0;
    color: var(--class-report-text);
    font-size: .86rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.class-report-staff-person small,
.class-report-attention-item small {
    color: var(--class-report-muted);
    font-size: .7rem;
}

.class-report-staff-list .role-badge,
.class-report-staff-list .role-badge-compact {
    max-width: 190px;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.class-report-attention-panel {
    grid-column: 1 / -1;
}

.class-report-attention-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 1rem 1.15rem 1.15rem;
}

.class-report-attention-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .85rem;
    border: 1px solid #f3cbd1;
    border-radius: 15px;
    background: #fff8f9;
}

.class-report-attention-avatar {
    color: var(--class-report-red);
    background: #ffeaed;
}

.class-report-attention-item > div {
    display: grid;
    min-width: 0;
}

.class-report-attention-item > span:last-child {
    padding: .32rem .58rem;
    border-radius: 999px;
    color: #b91f35;
    background: #ffe7ea;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.class-report-empty {
    display: flex;
    min-height: 185px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.25rem;
    color: var(--class-report-muted);
    text-align: center;
}

.class-report-empty > i {
    margin-bottom: .25rem;
    color: #98a5b7;
    font-size: 1.8rem;
}

.class-report-empty > strong {
    color: var(--class-report-text);
    font-size: .92rem;
}

.class-report-empty > span {
    font-size: .76rem;
}

.class-report-empty-success > i {
    color: var(--class-report-green);
}

[data-bs-theme="dark"] .class-report-dashboard {
    --class-report-text: #f0f5fb;
    --class-report-muted: #aeb9c9;
    --class-report-border: #354257;
}

[data-bs-theme="dark"] .class-report-kpi,
[data-bs-theme="dark"] .class-report-panel,
[data-bs-theme="dark"] .class-report-panel-header {
    background: #1d2736;
}

[data-bs-theme="dark"] .class-report-panel-header,
[data-bs-theme="dark"] .class-report-staff-list > li {
    border-color: #354257;
}

[data-bs-theme="dark"] .class-report-status-item {
    border-color: #354257;
    background: #222e3e;
}

[data-bs-theme="dark"] .class-report-completion-item {
    color: #aeb9c9;
    background: #222e3e;
}

[data-bs-theme="dark"] .class-report-attention-item {
    border-color: #713a45;
    background: #33252d;
}

@media (max-width: 1199.98px) {
    .class-report-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr);
    }

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

@media (max-width: 991.98px) {
    .class-report-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .class-report-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .class-report-attention-panel {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .class-report-dashboard > .report-page-header {
        margin-bottom: .65rem !important;
    }

    .class-report-dashboard .report-page-actions,
    .class-report-dashboard .report-page-actions .btn {
        width: 100%;
    }

    .class-report-hero {
        gap: 1.15rem;
        margin-bottom: .85rem;
        padding: 1.1rem;
        border-radius: 19px;
    }

    .class-report-hero-main {
        align-items: flex-start;
        gap: .85rem;
    }

    .class-report-hero-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
        font-size: 1.4rem;
    }

    .class-report-eyebrow {
        font-size: .69rem;
    }

    .class-report-hero h2 {
        font-size: 1.55rem;
    }

    .class-report-meta {
        gap: .42rem;
        margin-top: .65rem;
    }

    .class-report-meta > span {
        min-height: 30px;
        padding: .28rem .55rem;
        font-size: .7rem;
    }

    .class-report-export-button {
        min-height: 48px;
    }

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

    .class-report-shortcuts > a {
        min-height: 56px;
        flex-direction: row;
        gap: .45rem;
        font-size: .75rem;
    }

    .class-report-kpis {
        gap: .65rem;
        margin-bottom: .85rem;
    }

    .class-report-kpi {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: .55rem;
        min-height: 134px;
        padding: .85rem;
        border-radius: 16px;
    }

    .class-report-kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .class-report-kpi strong {
        font-size: 1.42rem;
    }

    .class-report-content-grid {
        gap: .85rem;
    }

    .class-report-panel {
        border-radius: 17px;
    }

    .class-report-panel-header {
        min-height: 76px;
        padding: .85rem;
    }

    .class-report-panel-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .class-report-status-list {
        padding: .85rem;
    }

    .class-report-completion {
        padding: 0 .85rem .85rem;
    }

    .class-report-staff-list > li {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: .62rem;
        padding: .85rem;
    }

    .class-report-staff-list .role-badge,
    .class-report-staff-list .role-badge-compact {
        grid-column: 3;
        justify-self: start;
        max-width: 100%;
    }

    .class-report-attention-list {
        grid-template-columns: minmax(0, 1fr);
        padding: .85rem;
    }

    .class-report-attention-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .class-report-attention-item > span:last-child {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 389.98px) {
    .class-report-hero-main {
        flex-direction: column;
    }

    .class-report-completion {
        grid-template-columns: minmax(0, 1fr);
    }

    .class-report-panel-header p,
    .class-report-status-item small {
        display: none;
    }
}

/* Attendance class selector: reliable touch layout on narrow screens. */
.attendance-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 0;
}

.attendance-row-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
}

.attendance-primary-action {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.attendance-primary-action.is-opening {
    pointer-events: none;
    opacity: .82;
}

@media (max-width: 767.98px) {
    body.admin-redesign .main-content #attendance-table-body .attendance-actions-cell {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: .8rem !important;
        overflow: hidden !important;
    }

    body.admin-redesign .main-content #attendance-table-body .attendance-actions-cell::before {
        display: block;
        margin-bottom: .65rem;
        text-align: left;
    }

    .attendance-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - .5rem);
        max-width: 100%;
        margin: 0 auto;
        gap: .6rem;
    }

    body.admin-redesign .main-content #attendance-table-body .attendance-row-actions .btn {
        width: 100%;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: .5rem .4rem !important;
        font-size: .82rem !important;
        line-height: 1.2;
        white-space: normal !important;
    }

    body.admin-redesign .main-content #attendance-table-body .attendance-row-actions .attendance-primary-action {
        grid-column: 1 / -1;
        min-height: 48px !important;
        font-weight: 800;
    }

    .attendance-row-actions .attendance-secondary-action:nth-child(2):last-child {
        grid-column: 1 / -1;
    }
}

/* Branch management: compact overview + rich detail popup. */
.branch-management-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.branch-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe6f2;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #f4f9ff 58%, #effcf8 100%);
    box-shadow: 0 10px 30px rgba(51, 78, 109, .08);
}

.branch-page-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.branch-page-heading-icon,
.branch-detail-modal-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #156fe8 0%, #16b7ce 100%);
    box-shadow: 0 9px 20px rgba(21, 111, 232, .2);
}

.branch-page-heading h1 {
    margin: 0 0 .22rem;
    color: #25324a;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 850;
    letter-spacing: -.025em;
}

.branch-page-heading p {
    margin: 0;
    color: #718096;
    font-size: .88rem;
}

.branch-add-button,
.branch-view-only-note {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 750;
}

.branch-view-only-note {
    padding: .6rem .85rem;
    border: 1px solid #d7e0ea;
    color: #667085;
    background: #fff;
    font-size: .82rem;
}

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

.branch-summary-item {
    --branch-summary-color: #1769da;
    --branch-summary-soft: #ebf3ff;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .82rem .9rem;
    border: 1px solid #dfe8f3;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(51, 78, 109, .055);
}

.branch-summary-item-info { --branch-summary-color: #048ca8; --branch-summary-soft: #e8f9fc; }
.branch-summary-item-student { --branch-summary-color: #7356d8; --branch-summary-soft: #f1edff; }
.branch-summary-item-success { --branch-summary-color: #12845c; --branch-summary-soft: #e8f8f1; }

.branch-summary-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--branch-summary-color);
    background: var(--branch-summary-soft);
}

.branch-summary-item > div {
    display: grid;
    min-width: 0;
}

.branch-summary-item strong {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.05;
}

.branch-summary-item > div > span {
    margin-top: .2rem;
    color: #718096;
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.25;
}

.branch-list-hint {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: -.25rem;
    padding: 0 .15rem;
    color: #64748b;
    font-size: .8rem;
}

.branch-list-hint i { margin-top: .14rem; color: #1685d2; }

.branch-table-card {
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(51, 78, 109, .07) !important;
}

.branch-table-card > .card-body { padding: .75rem; }

.branch-management-page .branch-management-table {
    width: 100% !important;
    min-width: 940px;
    margin: 0 !important;
}

.branch-management-page .branch-management-table thead th {
    padding: .76rem .7rem;
    border-bottom: 1px solid #dce6f1;
    color: #596579;
    background: #f7f9fc;
    font-size: .76rem;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.branch-management-page .branch-management-table tbody td {
    padding: .78rem .7rem;
    border-color: #e8eef5;
    color: #344054;
    vertical-align: middle;
}

.branch-management-page .branch-management-table tr.branch-row-detail {
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.branch-management-page .branch-management-table tr.branch-row-detail:hover { background: #f7fbff; }
.branch-management-page .branch-management-table tr.branch-row-detail:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(21, 111, 232, .35); outline-offset: -3px; }

.branch-name-block {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 220px;
}

.branch-name-icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #1671dc;
    background: #eaf3ff;
}

.branch-name-block > div {
    display: grid;
    min-width: 0;
    gap: .14rem;
}

.branch-name-block strong {
    font-size: .94rem;
    font-weight: 850;
    line-height: 1.25;
}

.branch-name-block > div > span {
    display: -webkit-box;
    max-width: 260px;
    overflow: hidden;
    color: #7b8798;
    font-size: .72rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.branch-scale-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .34rem;
    min-width: 170px;
}

.branch-scale-chips > span,
.branch-staff-count,
.branch-leader-list > span,
.branch-empty-value {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-width: 0;
    padding: .35rem .52rem;
    border-radius: 9px;
    font-size: .73rem;
    line-height: 1.25;
}

.branch-scale-chips > span { color: #4c6080; background: #f0f4f9; }
.branch-scale-chips i { color: #3481cf; }
.branch-scale-chips b { color: #25324a; font-weight: 850; }
.branch-staff-count { color: #166a51; background: #eaf8f2; white-space: nowrap; }
.branch-staff-count i { color: #12845c; }
.branch-staff-count b { font-weight: 850; }

.branch-leader-list {
    display: grid;
    gap: .28rem;
    min-width: 165px;
}

.branch-leader-list > span { color: #805b00; background: #fff7dc; font-weight: 700; }
.branch-leader-list i { color: #d69b00; }
.branch-empty-value { padding-left: 0; color: #8993a2; background: transparent; }

.branch-management-page .branch-row-actions {
    display: flex !important;
    flex-wrap: nowrap;
    gap: .4rem;
    width: auto !important;
}

.branch-management-page .branch-row-actions form { margin: 0; }
.branch-management-page .branch-row-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 10px; }

#branchDetailModal .modal-content { overflow: hidden; border-radius: 20px; }
.branch-detail-modal-header { background: linear-gradient(135deg, #176fe5 0%, #11b9cf 100%); }
.branch-detail-modal-icon { width: 46px; height: 46px; color: #176fe5; background: #fff; box-shadow: 0 8px 20px rgba(0, 50, 100, .2); }

.branch-profile-detail {
    padding: 1rem;
    overflow-x: hidden;
    background: radial-gradient(circle at 100% 0, rgba(22, 183, 206, .12), transparent 27%), radial-gradient(circle at 0 100%, rgba(21, 111, 232, .09), transparent 28%), #f5f8fc;
}

.branch-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid #d7e8f4;
    border-radius: 20px;
    background: radial-gradient(circle at 92% 5%, rgba(18, 183, 205, .15), transparent 31%), #fff;
    box-shadow: 0 12px 30px rgba(38, 80, 112, .08);
}

.branch-profile-hero-icon {
    display: inline-flex;
    flex: 0 0 82px;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border: 5px solid #fff;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #176fe5 0%, #11b9cf 100%);
    box-shadow: 0 12px 26px rgba(21, 111, 232, .22);
    font-size: 1.9rem;
}

.branch-profile-hero-content { min-width: 0; }
.branch-profile-eyebrow { display: inline-flex; align-items: center; gap: .38rem; margin-bottom: .4rem; padding: .28rem .55rem; border: 1px solid #b9e6ef; border-radius: 999px; color: #08758c; background: #eafafd; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .025em; }
.branch-profile-hero h2 { margin: 0 0 .48rem; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 880; letter-spacing: -.025em; }
.branch-profile-badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.branch-profile-badges > span { display: inline-flex; align-items: center; gap: .38rem; padding: .36rem .58rem; border-radius: 999px; color: #50617b; background: #f0f4f9; font-size: .75rem; font-weight: 700; }
.branch-profile-badges > span > i { color: #327fca; }
.branch-profile-hero p { max-width: 800px; margin: .62rem 0 0; color: #718096; font-size: .84rem; line-height: 1.55; }

.branch-profile-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.branch-profile-actions .btn { min-height: 42px; border-radius: 11px; font-weight: 750; }

.branch-profile-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    margin-top: .85rem;
}

.branch-profile-metrics article {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .72rem .78rem;
    border: 1px solid #dee8f2;
    border-radius: 14px;
    background: #fff;
}

.branch-metric-icon { display: inline-flex; flex: 0 0 39px; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 12px; color: #176fe5; background: #eaf3ff; }
.branch-metric-icon.metric-student { color: #7356d8; background: #f1edff; }
.branch-metric-icon.metric-staff { color: #12845c; background: #e8f8f1; }
.branch-metric-icon.metric-team { color: #d78d00; background: #fff5d9; }
.branch-profile-metrics article > div { display: grid; min-width: 0; }
.branch-profile-metrics strong { color: #25324a; font-size: 1.15rem; font-weight: 850; line-height: 1.05; }
.branch-profile-metrics article > div > span { margin-top: .15rem; color: #718096; font-size: .72rem; font-weight: 650; line-height: 1.25; }

.branch-profile-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.6fr); gap: .85rem; margin-top: .85rem; }
.branch-profile-card { min-width: 0; overflow: hidden; border: 1px solid #dfe8f2; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(45, 73, 105, .055); }
.branch-profile-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .82rem .9rem; border-bottom: 1px solid #e5ecf3; background: #f9fbfd; }
.branch-profile-card > header > span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: #176fe5; background: #eaf3ff; }
.branch-leader-card > header > span { color: #c78900; background: #fff5d8; }
.branch-profile-card header h3 { margin: 0; color: #29364c; font-size: .95rem; font-weight: 850; }
.branch-profile-card header p { margin: .12rem 0 0; color: #7b8798; font-size: .7rem; }
.branch-class-total { display: inline-flex; align-items: center; justify-content: center; min-width: 35px; height: 35px; padding: 0 .55rem; border-radius: 11px; color: #176fe5; background: #eaf3ff; font-size: .82rem; }

.branch-profile-leader-list { display: grid; gap: .55rem; padding: .75rem; }
.branch-profile-leader-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; min-width: 0; padding: .65rem; border: 1px solid #ece3c7; border-radius: 12px; background: #fffdf7; }
.branch-person-avatar { display: inline-flex; grid-row: span 2; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 12px; color: #b37d00; background: #fff1bf; }
.branch-profile-leader-list article > div { display: grid; min-width: 0; }
.branch-profile-leader-list strong { color: #29364c; font-size: .83rem; line-height: 1.3; overflow-wrap: anywhere; }
.branch-profile-leader-list article > div > span { color: #8993a2; font-size: .7rem; }
.branch-leader-badge { display: inline-flex; grid-column: 2; align-items: center; gap: .3rem; justify-self: start; padding: .25rem .48rem; border-radius: 999px; color: #805b00; background: #fff0b8; font-size: .66rem; font-weight: 800; }

.branch-profile-class-list { display: grid; gap: .6rem; padding: .75rem; }
.branch-profile-class-item { min-width: 0; padding: .68rem; border: 1px solid #e1e9f2; border-radius: 13px; background: linear-gradient(180deg, #fff 0%, #fafcfe 100%); }
.branch-profile-class-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .58rem; min-width: 0; }
.branch-class-order { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; color: #176fe5; background: #eaf3ff; font-size: .72rem; font-weight: 850; }
.branch-profile-class-heading > div { display: grid; min-width: 0; gap: .16rem; }
.branch-profile-class-heading strong { font-size: .85rem; font-weight: 850; line-height: 1.3; overflow-wrap: anywhere; }
.branch-profile-class-heading > div > span { color: #718096; font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.branch-profile-class-heading > div > span i { color: #4f8fd1; }
.branch-class-open { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #bed7f3; border-radius: 10px; color: #176fe5; background: #fff; text-decoration: none; }
.branch-class-open:hover { color: #fff; background: #176fe5; }
.branch-class-assignment-list { display: grid; gap: .35rem; margin: .58rem 0 0 2.32rem; padding: .5rem 0 0; border-top: 1px dashed #dce5ef; list-style: none; }
.branch-class-assignment-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; min-width: 0; }
.branch-class-priority { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; color: #12845c; background: #e8f8f1; font-size: .65rem; font-weight: 850; }
.branch-class-person { min-width: 0; color: #3b475a; font-size: .73rem; font-weight: 700; overflow-wrap: anywhere; }
.branch-class-no-assignment { margin: .55rem 0 0 2.32rem; padding-top: .48rem; border-top: 1px dashed #dce5ef; color: #8a94a3; font-size: .7rem; }
.branch-profile-empty { display: flex; align-items: flex-start; gap: .52rem; margin: .75rem; padding: .78rem; border: 1px dashed #cbd8e5; border-radius: 12px; color: #718096; background: #f8fafc; font-size: .78rem; line-height: 1.45; }
.branch-profile-empty i { margin-top: .12rem; color: #3f8ed4; }

@media (max-width: 991.98px) {
    .branch-summary-strip,
    .branch-profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .branch-profile-grid { grid-template-columns: 1fr; }
    .branch-management-page .branch-table-responsive { overflow-x: auto !important; }
}

@media (max-width: 767.98px) {
    .branch-management-page { gap: .75rem; }
    .branch-page-header { align-items: stretch; padding: .85rem; border-radius: 15px; }
    .branch-page-heading { align-items: flex-start; }
    .branch-page-heading-icon { width: 44px; height: 44px; border-radius: 13px; }
    .branch-page-heading p { font-size: .78rem; line-height: 1.4; }
    .branch-add-button,
    .branch-view-only-note { min-height: 40px; align-self: center; }
    .branch-summary-strip { gap: .5rem; }
    .branch-summary-item { gap: .55rem; padding: .65rem; border-radius: 13px; }
    .branch-summary-icon { flex-basis: 35px; width: 35px; height: 35px; border-radius: 11px; font-size: .83rem; }
    .branch-summary-item strong { font-size: 1.05rem; }
    .branch-summary-item > div > span { font-size: .67rem; }
    .branch-table-card > .card-body { padding: .5rem; }

    body.admin-redesign .main-content .branch-management-page .branch-table-responsive,
    body.admin-redesign .main-content .branch-management-page .branch-table-responsive .dataTables_wrapper { overflow-x: visible !important; }
    body.admin-redesign .main-content .branch-management-page .branch-management-table { display: block; width: 100% !important; min-width: 0 !important; }
    .branch-management-page .branch-management-table thead { display: none; }
    .branch-management-page .branch-management-table tbody { display: grid; gap: .65rem; width: 100%; }
    body.admin-redesign .main-content .branch-management-page .branch-management-table tr.branch-list-row { display: block; width: 100% !important; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(43, 70, 101, .055); }
    body.admin-redesign .main-content .branch-management-page .branch-management-table tr.branch-list-row > td { display: grid !important; grid-template-columns: minmax(92px, 31%) minmax(0, 1fr) !important; align-items: center; gap: .55rem; width: 100% !important; padding: .62rem .7rem !important; border: 0; border-top: 1px solid #edf1f5; overflow: hidden; }
    body.admin-redesign .main-content .branch-management-page .branch-management-table tr.branch-list-row > td::before { color: #687386; font-size: .68rem; font-weight: 800; }
    body.admin-redesign .main-content .branch-management-page .branch-management-table tr.branch-list-row > td.branch-name-cell { display: block !important; padding: .78rem !important; border-top: 0; background: #f8fbff; }
    .branch-management-page .branch-name-cell::before { display: none !important; }
    .branch-name-block { min-width: 0; }
    .branch-name-block > div > span { max-width: 100%; }
    .branch-scale-chips { min-width: 0; }
    .branch-leader-list { min-width: 0; }
    body.admin-redesign .main-content .branch-management-page .branch-management-table tr.branch-list-row > td[data-label="Thao tác"] { display: block !important; }
    .branch-management-page .branch-management-table tr.branch-list-row > td[data-label="Thao tác"]::before { margin-bottom: .45rem; }
    body.admin-redesign .main-content .branch-management-page .branch-row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
    body.admin-redesign .main-content .branch-management-page .branch-row-actions .btn { width: 100% !important; min-height: 40px !important; height: 40px !important; }

    #branchDetailModal .modal-dialog { width: auto; max-width: calc(100% - .7rem); height: calc(100% - .7rem); margin: .35rem; }
    #branchDetailModal .modal-content { max-height: 100%; border-radius: 16px; }
    .branch-profile-detail { padding: .6rem; }
    .branch-profile-hero { flex-direction: column; gap: .7rem; padding: .9rem .8rem; border-radius: 16px; text-align: center; }
    .branch-profile-hero-icon { flex-basis: 67px; width: 67px; height: 67px; border-radius: 20px; font-size: 1.55rem; }
    .branch-profile-badges,
    .branch-profile-actions { justify-content: center; }
    .branch-profile-hero p { font-size: .78rem; }
    .branch-profile-actions .btn { flex: 1 1 160px; min-width: 0; padding-inline: .6rem; font-size: .82rem; }
    .branch-profile-metrics { gap: .5rem; }
    .branch-profile-metrics article { gap: .5rem; padding: .62rem; }
    .branch-metric-icon { flex-basis: 34px; width: 34px; height: 34px; }
    .branch-profile-metrics strong { font-size: 1rem; }
    .branch-profile-card { border-radius: 14px; }
    .branch-profile-card > header { padding: .72rem; }
    .branch-profile-class-list { padding: .55rem; }
    .branch-profile-class-item { padding: .58rem; }
    .branch-profile-class-heading > div > span { line-height: 1.65; }
    .branch-class-assignment-list { margin-left: 0; }
    .branch-class-assignment-list li { grid-template-columns: auto minmax(0, 1fr); }
    .branch-class-assignment-list .role-badge { grid-column: 2; justify-self: start; }
    .branch-class-no-assignment { margin-left: 0; }
}

@media (max-width: 420px) {
    .branch-page-header { flex-direction: column; }
    .branch-add-button,
    .branch-view-only-note { width: 100%; }
    .branch-summary-item { align-items: flex-start; }
    .branch-summary-icon { display: none; }
    .branch-profile-metrics article { align-items: flex-start; }
    .branch-profile-metrics .branch-metric-icon { display: none; }
}

[data-bs-theme="dark"] .branch-page-header,
[data-bs-theme="dark"] .branch-summary-item,
[data-bs-theme="dark"] .branch-table-card,
[data-bs-theme="dark"] .branch-profile-hero,
[data-bs-theme="dark"] .branch-profile-metrics article,
[data-bs-theme="dark"] .branch-profile-card,
[data-bs-theme="dark"] .branch-profile-class-item { border-color: #344155; background: #182130; }
[data-bs-theme="dark"] .branch-page-heading h1,
[data-bs-theme="dark"] .branch-summary-item strong,
[data-bs-theme="dark"] .branch-profile-metrics strong,
[data-bs-theme="dark"] .branch-profile-card header h3,
[data-bs-theme="dark"] .branch-profile-leader-list strong { color: #edf4ff; }
[data-bs-theme="dark"] .branch-profile-detail { background: #111827; }

/* Class detail page: compact portrait roster and reliable mobile actions. */
.class-show-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.class-show-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1px solid #dbe6f2;
    border-radius: 18px;
    background: radial-gradient(circle at 94% 3%, rgba(14, 165, 233, .15), transparent 27%), linear-gradient(135deg, #fff 0%, #f3f9ff 100%);
    box-shadow: 0 10px 30px rgba(51, 78, 109, .08);
}

.class-show-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.class-show-heading-icon {
    display: inline-flex;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #176fe5 0%, #13b5cb 100%);
    box-shadow: 0 10px 22px rgba(21, 111, 232, .21);
    font-size: 1.25rem;
}

.class-show-heading > div { min-width: 0; }
.class-show-eyebrow { color: #08778e; font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.class-show-heading h1 { margin: .1rem 0 .22rem; color: #25324a; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 880; line-height: 1.2; overflow-wrap: anywhere; }
.class-show-heading p { margin: 0; color: #718096; font-size: .8rem; font-weight: 650; }

.class-show-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.class-show-header-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 11px; font-weight: 750; }

.class-show-layout {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    min-width: 0;
}

.class-show-sidebar { display: grid; gap: 1rem; min-width: 0; }

.class-show-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce6f1;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(48, 75, 105, .06);
}

.class-show-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid #e5ecf3;
    background: #f9fbfd;
}

.class-show-card > header > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #176fe5;
    background: #eaf3ff;
}

.class-show-staff-card > header > span { color: #12845c; background: #e8f8f1; }
.class-show-card header h2 { margin: 0; color: #29364c; font-size: .96rem; font-weight: 850; }
.class-show-card header p { margin: .12rem 0 0; color: #7b8798; font-size: .7rem; }

.class-show-info-list { display: grid; margin: 0; padding: .35rem .85rem; }
.class-show-info-list > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .66rem 0; border-bottom: 1px solid #edf1f5; }
.class-show-info-list > div:last-child { border-bottom: 0; }
.class-show-info-list dt { color: #718096; font-size: .71rem; font-weight: 800; text-transform: uppercase; }
.class-show-info-list dd { min-width: 0; margin: 0; color: #344054; font-size: .82rem; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.class-show-count { display: inline-flex; align-items: center; justify-content: center; min-width: 29px; min-height: 27px; padding: .2rem .48rem; border-radius: 9px; color: #176fe5; background: #eaf3ff; font-weight: 850; }

.class-show-staff-list { display: grid; gap: .5rem; margin: 0; padding: .72rem; list-style: none; }
.class-show-staff-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-width: 0; padding: .58rem; border: 1px solid #e3ebf3; border-radius: 12px; background: #fbfcfe; }
.class-show-staff-order { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; color: #12845c; background: #e8f8f1; font-size: .7rem; font-weight: 850; }
.class-show-staff-name { min-width: 0; color: #344054; font-size: .76rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
body.admin-redesign .main-content .class-show-page .class-show-staff-list .role-badge { color: #fff !important; }
.class-show-empty { display: flex; align-items: center; gap: .5rem; margin: .72rem; padding: .72rem; border: 1px dashed #cad8e6; border-radius: 12px; color: #718096; background: #f8fafc; font-size: .78rem; }

.class-show-students-card { min-width: 0; }
.class-show-card > .class-show-students-header { grid-template-columns: auto minmax(0, 1fr) minmax(240px, auto); }
.class-show-sort-form { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 0; }
.class-show-sort-form label { display: inline-flex; align-items: center; gap: .3rem; color: #687386; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.class-show-sort-form select { width: min(220px, 100%); min-height: 36px; border-radius: 9px; font-size: .75rem; }

.class-show-table-wrap,
.class-show-table-wrap .dataTables_wrapper,
.class-show-table-wrap .dataTables_scroll,
.class-show-table-wrap .dataTables_scrollBody { width: 100%; max-width: 100%; min-width: 0; }

.class-show-student-table { width: 100% !important; min-width: 650px; }
.class-show-student-table thead th { padding: .65rem .7rem !important; color: #596579 !important; background: #f7f9fc !important; font-size: .72rem; font-weight: 850; text-align: left; text-transform: uppercase; }
.class-show-student-table tbody td { padding: .65rem .7rem !important; }
.class-show-student-table th:last-child,
.class-show-student-table td:last-child { text-align: center; }

.class-show-student-identity { display: flex; align-items: center; gap: .65rem; min-width: 220px; }
.class-show-student-photo { display: block; flex: 0 0 48px; width: 48px; height: 64px; border: 1px solid #d7e0eb; border-radius: 8px; object-fit: cover; background: linear-gradient(180deg, #f8fafc 0%, #e9eef5 100%); box-shadow: none; }
.class-show-student-identity > div { display: grid; min-width: 0; gap: .18rem; }
.class-show-student-identity strong { color: #25324a; font-size: .82rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.class-show-student-identity > div > span { color: #8791a1; font-size: .66rem; }
.class-show-student-identity > div > span i { margin-right: .28rem; color: #4c8dd1; }
.class-show-birth-date { display: inline-flex; align-items: center; gap: .38rem; color: #566176; font-size: .76rem; white-space: nowrap; }
.class-show-birth-date i { color: #d88737; }

body.admin-redesign .main-content .class-show-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    max-width: 100%;
    border: 1px solid transparent;
    font-size: .7rem;
    line-height: 1.2;
    white-space: nowrap;
}
body.admin-redesign .main-content .class-show-status-active { border-color: #a7e4c7; color: #08633f !important; background: #ddf7e9 !important; }
body.admin-redesign .main-content .class-show-status-paused { border-color: #f2d482; color: #765400 !important; background: #fff4cf !important; }
body.admin-redesign .main-content .class-show-status-ended { border-color: #f3b8be; color: #a51f31 !important; background: #fde7ea !important; }
body.admin-redesign .main-content .class-show-status-transfer { border-color: #a9ddeb; color: #0b657a !important; background: #e2f7fb !important; }
body.admin-redesign .main-content .class-show-status-repeat { border-color: #bcd0f4; color: #254f98 !important; background: #eaf1ff !important; }
body.admin-redesign .main-content .class-show-status-unknown { border-color: #d7dde5; color: #596579 !important; background: #f0f3f6 !important; }

.class-show-action-cell { text-align: center; }
.class-show-view-button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-width: 104px; min-height: 38px; border-radius: 10px; font-weight: 750; }

@media (max-width: 991.98px) {
    .class-show-layout { grid-template-columns: 1fr; }
    .class-show-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .class-show-page { gap: .75rem; }
    .class-show-header { flex-direction: column; align-items: stretch; padding: .85rem; border-radius: 15px; }
    .class-show-heading { align-items: flex-start; }
    .class-show-heading-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
    .class-show-heading h1 { font-size: 1.25rem; }
    .class-show-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .class-show-header-actions .btn { width: 100%; min-width: 0; padding: .45rem .55rem; font-size: .82rem; }
    .class-show-sidebar { grid-template-columns: 1fr; gap: .75rem; }
    .class-show-card { border-radius: 14px; }
    .class-show-card > .class-show-students-header { grid-template-columns: auto minmax(0, 1fr); }
    .class-show-sort-form { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; justify-content: stretch; }
    .class-show-sort-form select { width: 100%; }
    .class-show-staff-list li { grid-template-columns: auto minmax(0, 1fr); }
    .class-show-staff-list .role-badge { grid-column: 2; justify-self: start; }

    body.admin-redesign .main-content .class-show-table-wrap,
    body.admin-redesign .main-content .class-show-table-wrap .dataTables_wrapper { overflow-x: visible !important; }
    .class-show-table-wrap .dataTables_wrapper > .row:first-child { display: grid; grid-template-columns: 1fr; gap: .45rem; padding: .6rem !important; }
    .class-show-table-wrap .dataTables_wrapper > .row:first-child > div:first-child { display: none; }
    .class-show-table-wrap .dataTables_wrapper .dataTables_filter { width: 100%; text-align: left; }
    .class-show-table-wrap .dataTables_wrapper .dataTables_filter label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; width: 100%; }
    .class-show-table-wrap .dataTables_wrapper .dataTables_filter input { width: 100% !important; min-width: 0; margin: 0 !important; }
    body.admin-redesign .main-content .class-show-student-table { display: block; width: 100% !important; min-width: 0 !important; }
    .class-show-student-table thead { display: none; }
    .class-show-student-table tbody { display: grid; gap: .65rem; width: 100%; padding: .55rem; }
    body.admin-redesign .main-content .class-show-student-table tbody tr { display: block; width: 100%; min-width: 0; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(43, 70, 101, .05); }
    body.admin-redesign .main-content .class-show-student-table tbody tr > td { display: grid !important; grid-template-columns: minmax(82px, 30%) minmax(0, 1fr); align-items: center; gap: .55rem; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: .58rem .68rem !important; border: 0; border-top: 1px solid #edf1f5; text-align: left !important; box-sizing: border-box; overflow: hidden; }
    .class-show-student-table tbody tr > td::before { content: attr(data-label); min-width: 0; color: #687386; font-size: .66rem; font-weight: 850; text-transform: uppercase; overflow-wrap: anywhere; }
    body.admin-redesign .main-content .class-show-student-table tbody tr > td.class-show-student-identity-cell { display: block !important; padding: .72rem !important; border-top: 0; background: #f8fbff; }
    .class-show-student-identity-cell::before { display: none; }
    .class-show-student-identity { min-width: 0; }
    .class-show-student-identity strong { font-size: .82rem; }
    .class-show-birth-date { min-width: 0; white-space: normal; }
    body.admin-redesign .main-content .class-show-student-table tbody tr > td > * { min-width: 0; max-width: 100%; justify-self: start; }
    body.admin-redesign .main-content .class-show-student-table tbody tr > td.class-show-action-cell { display: block !important; padding: .62rem .68rem !important; }
    .class-show-action-cell::before { display: block; margin-bottom: .45rem; }
    body.admin-redesign .main-content .class-show-view-button { width: 100% !important; max-width: 100%; min-height: 42px !important; margin: 0; }
    .class-show-table-wrap .dataTables_wrapper > .row:last-child { display: grid; grid-template-columns: 1fr; gap: .45rem; padding: .65rem !important; }
    .class-show-table-wrap .dataTables_info,
    .class-show-table-wrap .dataTables_paginate { width: 100%; text-align: center !important; }
    .class-show-table-wrap .pagination { justify-content: center !important; }
}

@media (max-width: 380px) {
    .class-show-header-actions { grid-template-columns: 1fr; }
    .class-show-student-table tbody { padding: .45rem; }
    body.admin-redesign .main-content .class-show-student-table tbody tr > td { grid-template-columns: minmax(72px, 29%) minmax(0, 1fr); padding-inline: .58rem !important; }
}

[data-bs-theme="dark"] .class-show-header,
[data-bs-theme="dark"] .class-show-card,
[data-bs-theme="dark"] .class-show-staff-list li,
[data-bs-theme="dark"] .class-show-student-table tbody tr { border-color: #344155; background: #182130; }
[data-bs-theme="dark"] .class-show-heading h1,
[data-bs-theme="dark"] .class-show-card header h2,
[data-bs-theme="dark"] .class-show-info-list dd,
[data-bs-theme="dark"] .class-show-staff-name,
[data-bs-theme="dark"] .class-show-student-identity strong { color: #edf4ff; }

@media (max-width: 767.98px) {
    html body.admin-redesign .main-content .class-show-page .class-show-table-wrap table.class-show-student-table tbody tr > td.class-show-student-identity-cell,
    html body.admin-redesign .main-content .class-show-page .class-show-table-wrap table.class-show-student-table tbody tr > td.class-show-action-cell {
        display: block !important;
        grid-template-columns: none !important;
    }

    html body.admin-redesign .main-content .class-show-page .class-show-student-identity {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center;
    }

    html body.admin-redesign .main-content .class-show-page .class-show-student-identity > div {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
    }

    html body.admin-redesign .main-content .class-show-page .class-show-student-identity strong {
        width: 100% !important;
        overflow-wrap: break-word;
        word-break: normal;
    }

    html body.admin-redesign .main-content .class-show-page .class-show-action-cell .class-show-view-button {
        display: flex !important;
        width: 100% !important;
    }
}

/* ========================================================================== 
   Shared admin UI components — page headers, filters, data surfaces, feedback
   ========================================================================== */
body.admin-redesign {
    --ui-space-1: .35rem;
    --ui-space-2: .6rem;
    --ui-space-3: .85rem;
    --ui-space-4: 1.15rem;
    --ui-space-5: 1.5rem;
    --ui-control-height: 44px;
    --ui-touch-target: 44px;
    --ui-surface-radius: 16px;
    --ui-focus-ring: 0 0 0 .22rem rgba(13, 110, 253, .16);
}

body.admin-redesign .main-content .ui-page-header {
    width: 100%;
    min-width: 0;
    margin-bottom: var(--ui-space-4) !important;
    gap: var(--ui-space-3) !important;
}

body.admin-redesign .main-content .ui-page-heading {
    min-width: 0;
}

body.admin-redesign .main-content .ui-page-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: -.018em;
}

body.admin-redesign .main-content .ui-page-heading > p {
    max-width: 70ch;
    margin-top: .35rem;
    line-height: 1.5;
}

body.admin-redesign .main-content .ui-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    min-width: 0;
}

body.admin-redesign .main-content :is(.ui-filter-panel, .ui-data-card) {
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--ui-surface-radius) !important;
    background: var(--admin-surface) !important;
    box-shadow: var(--admin-shadow-soft) !important;
}

body.admin-redesign .main-content .ui-filter-panel > :is(.card-header, .card-body) {
    padding: clamp(.85rem, 1.6vw, 1.2rem) !important;
}

body.admin-redesign .main-content .ui-filter-form {
    position: relative;
    align-items: end;
    margin-bottom: 0;
}

body.admin-redesign .main-content .ui-filter-form .form-label {
    min-height: 1.15rem;
    margin-bottom: .4rem;
    color: var(--admin-muted) !important;
    font-size: .78rem;
    font-weight: 750 !important;
    line-height: 1.2;
    letter-spacing: .015em;
}

body.admin-redesign .main-content .ui-filter-form :is(.form-control, .form-select, .input-group-text) {
    min-height: var(--ui-control-height);
    border-color: var(--admin-border-strong);
    border-radius: 11px;
    background-color: var(--admin-surface);
    color: var(--admin-text);
    font-size: .94rem;
    box-shadow: none;
}

body.admin-redesign .main-content .ui-filter-form .input-group > :is(.form-control, .form-select, .input-group-text) {
    border-radius: 0;
}

body.admin-redesign .main-content .ui-filter-form .input-group > :first-child {
    border-start-start-radius: 11px;
    border-end-start-radius: 11px;
}

body.admin-redesign .main-content .ui-filter-form .input-group > :last-child {
    border-start-end-radius: 11px;
    border-end-end-radius: 11px;
}

body.admin-redesign .main-content .ui-filter-form :is(.form-control, .form-select):focus {
    border-color: var(--admin-primary);
    box-shadow: var(--ui-focus-ring);
}

body.admin-redesign .main-content .ui-filter-status {
    position: static;
    width: 100%;
    min-height: 1.2rem;
    margin-top: .1rem;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    justify-content: flex-end;
    color: var(--admin-muted);
    font-size: .78rem;
    font-weight: 650;
}

body.admin-redesign .main-content .ui-filter-status[data-state="success"] {
    color: #14804a;
}

body.admin-redesign .main-content .ui-filter-status[data-state="error"] {
    color: #c92a3a;
}

body.admin-redesign .main-content .ui-filter-status[data-state="success"]::before {
    width: auto;
    height: auto;
    content: '\2713';
    border: 0;
    animation: none;
}

body.admin-redesign .main-content .ui-filter-status[data-state="error"]::before {
    width: auto;
    height: auto;
    content: '!';
    border: 0;
    animation: none;
}

body.admin-redesign .main-content .ui-results-region {
    transition: opacity .16s ease;
}

body.admin-redesign .main-content .ui-results-region.is-filter-loading {
    opacity: .56;
    pointer-events: none;
}

body.admin-redesign .main-content .ui-action-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

body.admin-redesign .main-content form[aria-busy="true"] :is(button, input[type="submit"])[aria-busy="true"],
body.admin-redesign .main-content :is(button, input[type="submit"])[data-app-loading="true"] {
    cursor: wait !important;
    opacity: .78;
}

body.admin-redesign .main-content .ui-empty-state {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

@media (min-width: 768px) {
    body.admin-redesign .main-content .ui-filter-form > .ui-filter-field {
        min-width: 150px;
    }
}

@media (max-width: 767.98px) {
    body.admin-redesign {
        --ui-control-height: 44px;
        --ui-surface-radius: 14px;
    }

    body.admin-redesign .main-content .ui-page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.admin-redesign .main-content .ui-page-title {
        font-size: 1.28rem;
    }

    body.admin-redesign .main-content .ui-page-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.admin-redesign .main-content .ui-page-actions > :is(.btn, .badge) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: var(--ui-touch-target) !important;
        white-space: normal;
    }

    body.admin-redesign .main-content .ui-filter-panel > :is(.card-header, .card-body) {
        padding: .8rem !important;
    }

    body.admin-redesign .main-content .ui-filter-form {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .7rem;
    }

    body.admin-redesign .main-content .ui-filter-form .form-label {
        font-size: .75rem;
    }

    body.admin-redesign .main-content .ui-filter-form :is(.form-control, .form-select) {
        width: 100%;
        min-width: 0;
        font-size: .92rem;
    }

    body.admin-redesign .main-content .ui-action-group > .btn {
        min-width: var(--ui-touch-target) !important;
        min-height: var(--ui-touch-target) !important;
    }

    body.admin-redesign .main-content .ui-filter-status {
        justify-content: flex-start;
        font-size: .75rem;
    }
}

[data-bs-theme="dark"] body.admin-redesign .main-content :is(.ui-filter-panel, .ui-data-card),
[data-bs-theme="dark"] body.admin-redesign .main-content .ui-filter-form :is(.form-control, .form-select, .input-group-text) {
    border-color: #344155 !important;
    background: #182130 !important;
    color: #edf4ff;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .ui-filter-status[data-state="success"] {
    color: #58d79a;
}

[data-bs-theme="dark"] body.admin-redesign .main-content .ui-filter-status[data-state="error"] {
    color: #ff8390;
}