/*
 * SiMS Rocker Compatibility CSS
 * Maps Tabler/Minia-specific classes used by _v2 content pages
 * onto Rocker (Rukada Admin) equivalents so existing pages work
 * with the horizontal Rocker theme.
 */

/* Tabler bg-*-lt → light tinted backgrounds */
.bg-blue-lt, .bg-primary-lt { background-color: rgba(51, 102, 255, 0.1) !important; }
.bg-azure-lt { background-color: rgba(45, 153, 235, 0.1) !important; }
.bg-indigo-lt { background-color: rgba(66, 102, 184, 0.1) !important; }
.bg-purple-lt { background-color: rgba(124, 77, 255, 0.1) !important; }
.bg-pink-lt { background-color: rgba(233, 30, 99, 0.1) !important; }
.bg-red-lt, .bg-danger-lt { background-color: rgba(243, 24, 48, 0.1) !important; }
.bg-orange-lt { background-color: rgba(255, 102, 0, 0.1) !important; }
.bg-yellow-lt, .bg-warning-lt { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-lime-lt { background-color: rgba(196, 217, 22, 0.1) !important; }
.bg-green-lt, .bg-success-lt { background-color: rgba(40, 187, 73, 0.1) !important; }
.bg-teal-lt { background-color: rgba(32, 174, 170, 0.1) !important; }
.bg-cyan-lt, .bg-info-lt { background-color: rgba(45, 153, 235, 0.1) !important; }
.bg-gray-lt, .bg-secondary-lt { background-color: rgba(108, 117, 125, 0.1) !important; }
.bg-dark-lt { background-color: rgba(33, 37, 41, 0.1) !important; }
.bg-muted-lt { background-color: rgba(108, 117, 125, 0.1) !important; }

/* Tabler text-*-lt → lighter text colors */
.text-blue-lt { color: rgba(51, 102, 255, 0.8) !important; }
.text-red-lt { color: rgba(243, 24, 48, 0.8) !important; }
.text-green-lt { color: rgba(40, 187, 73, 0.8) !important; }
.text-yellow-lt { color: rgba(255, 193, 7, 0.8) !important; }

/* Tabler card-actions */
.card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.card-header:has(.card-actions) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card-header .card-actions .btn-group,
.card-header .card-actions .btn {
    flex-shrink: 0;
}

/* Tabler card-title in header */
.card-header .card-title {
    margin-bottom: 0;
}

/* Tabler nav-link-icon / nav-link-title (legacy menu spans) */
.nav-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
}
.nav-title {
    display: inline;
}

/* Tabler page-wrapper / page-body / page-header */
.page-wrapper {
    min-height: 100vh;
}
.page-body {
    padding: 0;
}
.page-header {
    padding: 1rem 0;
}

/* Tabler container-xl */
.container-xl {
    max-width: 100%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Tabler btn-list */
.btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Tabler avatar */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e9ecef;
}
.avatar-sm { width: 1.5rem; height: 1.5rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; }
.avatar-lg { width: 3rem; height: 3rem; }

/* Tabler form-selectgroup */
.form-selectgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Tabler badge variations */
.badge.bg-warning { background-color: #ffab00 !important; }
.badge.bg-info { background-color: #808282 !important; }

/* Tabler text-muted small */
.text-text-muted {
    color: #6c757d !important;
}

/* Tabler caps */
.caps {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

/* Tabler progress-sm */
.progress-sm {
    height: 0.375rem;
}

/* Tabler page-title / page-pretitle */
.page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #343a40;
}
.page-pretitle {
    font-size: 0.75rem;
    color: #6c757d;
}
.breadcrumb-sm {
    font-size: 0.75rem;
}

/* Tabler footer */
.footer {
    padding: 1rem 0;
    color: #6c757d;
}
.footer-transparent {
    background: transparent;
    border: none;
}

/* Tabler row-deck / row-cards */
.row-deck {
    display: flex;
    flex-wrap: wrap;
}
.row-cards > .col > .card,
.row-cards > [class*="col-"] > .card {
    height: 100%;
}

/* Tabler navbar-brand-image */
.navbar-brand-image {
    max-height: 2rem;
}
.navbar-brand-autodark .navbar-brand-image {
    filter: none;
}

/* Tabler form-help */
.form-help {
    display: inline-block;
    margin-left: 0.25rem;
    color: #6c757d;
    font-size: 0.75rem;
}

/* Tabler dropdown-menu-arrow */
.dropdown-menu-arrow::before {
    content: none;
}

/* Tabler form-label */
.form-label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
}

/* SiMS fixed topbar + primary menu (Rocker horizontal) */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
}

/* Topbar was removed - Rocker still offsets the navbar 60px down and pads
   .page-wrapper 120px to reserve space for it. Pin the menu to the very top
   of the screen and drop the reserved space so content flows under the menu. */
@media screen and (min-width: 992px) {
    .primary-menu .navbar {
        position: sticky;
        top: 0;
    }
}

.page-wrapper {
    margin-top: 0;
}

/* Mirror Rocker menu pattern onto the SiMS menu control markup
   (spans nav-icon/nav-title render identically to parent-icon/menu-title
   inside the flex nav-link; size matched to Rocker's 20px icons) */
.primary-menu .navbar .navbar-nav a .nav-icon {
    font-size: 20px;
}

/* Rocker hides the Bootstrap caret on menu toggles and uses a
   boxicons chevron instead (dropdown-toggle-nocaret + dropy-icon) */
#nav a.dropdown-toggle::after {
    content: "\e9ac";
    font-family: boxicons !important;
    border: 0;
    vertical-align: middle;
}

/* Code-behind sets plain "dropend" on nested menu items - keep them positioned */
#nav li.dropend {
    position: relative;
}

/* Choices.js select restyle to blend with Rocker */
.choices__inner {
    border-radius: 0.25rem;
    border: 1px solid #e5e9f2;
    font-size: 0.875rem;
    min-height: calc(1.5em + 0.9rem + 2px);
    padding: 0.45rem 0.9rem;
}
.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0.45rem;
}

/* Dark mode support on form controls (login page uses data-bs-theme=dark) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e9ecef;
}

/* Modal polish */
.modal-content {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-header {
    border-bottom: 1px solid #eff2f7;
}
.modal-footer {
    border-top: 1px solid #eff2f7;
}

/* Tabler table-sm */
.table-sm > :not(caption) > * > * {
    padding: 0.3rem 0.5rem;
}

/* Legacy dropdown-submenu class set from menu code-behind */
.dropdown-menu .dropdown-submenu {
    position: relative;
}
.dropdown-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Print styles */
@media print {
    .topbar, .primary-menu, .page-footer, .d-print-none, #offcanvasNavbar {
        display: none !important;
    }
}

/* ============================================================
   SiMS brand recolor — primary green #95c33d / secondary grey #808282
   Overrides rocker + bootstrap-extended static blues (loads last)
   ============================================================ */

:root {
    --bs-primary: #95c33d;
    --bs-primary-rgb: 149, 195, 61;
    --bs-secondary: #808282;
    --bs-secondary-rgb: 128, 130, 130;
    --bs-link-color: #6f9a1e;
    --bs-link-color-rgb: 111, 154, 30;
    --bs-link-hover-color: #5c821a;
    --bs-link-hover-color-rgb: 92, 130, 26;
    --bs-primary-text-emphasis: #55731c;
    --bs-primary-bg-subtle: #eef5dd;
    --bs-primary-border-subtle: #cfe4a3;
    --bs-secondary-text-emphasis: #4d4f4f;
    --bs-secondary-bg-subtle: #e9eaea;
    --bs-secondary-border-subtle: #d3d5d5;
}

[data-bs-theme=dark] {
    --bs-link-color: #a3d05a;
    --bs-link-color-rgb: 163, 208, 90;
    --bs-link-hover-color: #b4dd77;
    --bs-link-hover-color-rgb: 180, 221, 119;
}

a { color: #6f9a1e; }
a:hover { color: #5c821a; }
.btn-link { color: #6f9a1e; }

/* Buttons — primary green */
.btn-primary {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
    --bs-btn-color: #fff;
    --bs-btn-bg: #95c33d;
    --bs-btn-border-color: #95c33d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #86b234;
    --bs-btn-hover-border-color: #7ea82f;
    --bs-btn-focus-shadow-rgb: 149, 195, 61;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7ea72f;
    --bs-btn-active-border-color: #77a02c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #95c33d;
    --bs-btn-disabled-border-color: #95c33d;
}
.btn-primary:hover {
    color: #fff;
    background-color: #86b234;
    border-color: #7ea82f;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #86b234;
    border-color: #7ea82f;
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .5);
}
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary,
.btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #7ea72f;
    border-color: #77a02c;
}
.btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .5);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
}

/* Buttons — outline primary green */
.btn-outline-primary {
    color: #86b234;
    border-color: #95c33d;
    --bs-btn-color: #86b234;
    --bs-btn-border-color: #95c33d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #95c33d;
    --bs-btn-hover-border-color: #95c33d;
    --bs-btn-focus-shadow-rgb: 149, 195, 61;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #86b234;
    --bs-btn-active-border-color: #86b234;
    --bs-btn-disabled-color: #95c33d;
    --bs-btn-disabled-border-color: #95c33d;
    --bs-btn-gradient: none;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    color: #fff;
    background-color: #86b234;
    border-color: #86b234;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #95c33d;
    background-color: transparent;
    border-color: #95c33d;
}

/* Buttons — info mapped to brand green */
.btn-info {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
    --bs-btn-color: #fff;
    --bs-btn-bg: #95c33d;
    --bs-btn-border-color: #95c33d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #86b234;
    --bs-btn-hover-border-color: #7ea82f;
    --bs-btn-focus-shadow-rgb: 149, 195, 61;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7ea72f;
    --bs-btn-active-border-color: #77a02c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #95c33d;
    --bs-btn-disabled-border-color: #95c33d;
}
.btn-info:hover {
    color: #fff;
    background-color: #86b234;
    border-color: #7ea82f;
}
.btn-check:focus + .btn-info, .btn-info:focus {
    color: #fff;
    background-color: #86b234;
    border-color: #7ea82f;
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .5);
}
.btn-check:active + .btn-info, .btn-check:checked + .btn-info,
.btn-info.active, .btn-info:active, .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #7ea72f;
    border-color: #77a02c;
}
.btn-info.disabled, .btn-info:disabled {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
}
.btn-outline-info {
    color: #86b234;
    border-color: #95c33d;
    --bs-btn-color: #86b234;
    --bs-btn-border-color: #95c33d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #95c33d;
    --bs-btn-hover-border-color: #95c33d;
    --bs-btn-focus-shadow-rgb: 149, 195, 61;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #86b234;
    --bs-btn-active-border-color: #86b234;
    --bs-btn-disabled-color: #95c33d;
    --bs-btn-disabled-border-color: #95c33d;
}

/* Buttons — secondary grey */
.btn-secondary {
    color: #fff;
    background-color: #808282;
    border-color: #808282;
    --bs-btn-color: #fff;
    --bs-btn-bg: #808282;
    --bs-btn-border-color: #808282;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6d6f6f;
    --bs-btn-hover-border-color: #676969;
    --bs-btn-focus-shadow-rgb: 128, 130, 130;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #676969;
    --bs-btn-active-border-color: #616363;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #808282;
    --bs-btn-disabled-border-color: #808282;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #6d6f6f;
    border-color: #676969;
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
    color: #fff;
    background-color: #6d6f6f;
    border-color: #676969;
    box-shadow: 0 0 0 .25rem rgba(128, 130, 130, .5);
}
.btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary,
.btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #676969;
    border-color: #616363;
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #808282;
    border-color: #808282;
}
.btn-outline-secondary {
    color: #808282;
    border-color: #808282;
    --bs-btn-color: #808282;
    --bs-btn-border-color: #808282;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #808282;
    --bs-btn-hover-border-color: #808282;
    --bs-btn-focus-shadow-rgb: 128, 130, 130;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #808282;
    --bs-btn-active-border-color: #808282;
    --bs-btn-disabled-color: #808282;
    --bs-btn-disabled-border-color: #808282;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #808282;
    border-color: #808282;
}

/* Form controls */
.form-control:focus, .form-select:focus {
    border-color: #b7d983;
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .25);
}
.form-check-input:checked {
    background-color: #95c33d;
    border-color: #95c33d;
}
.form-check-input[type=checkbox]:indeterminate {
    background-color: #95c33d;
    border-color: #95c33d;
}
.form-check-input:focus {
    border-color: #b7d983;
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .25);
}

/* Dropdowns */
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: #95c33d;
}
html.semi-dark .dropdown-item.active, html.semi-dark .dropdown-item:active {
    background-color: #95c33d;
}

/* Progress + list groups */
.progress-bar { background-color: #95c33d; }
.list-group {
    --bs-list-group-active-bg: #95c33d;
    --bs-list-group-active-border-color: #95c33d;
    --bs-list-group-action-hover-bg: #eef5dd;
    --bs-list-group-action-active-bg: #e2eec9;
}
.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
}
html.dark-theme .list-group-item.active {
    color: #fff;
    background-color: #95c33d;
    border-color: #95c33d;
}
html.dark-theme .email-navigation a.list-group-item.active {
    color: #a3d05a;
    background-color: rgba(149, 195, 61, .14);
}

/* Nav pills / tabs */
.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #95c33d;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #6f9a1e;
}
html.dark-theme .nav-tabs .nav-link.active {
    color: #a3d05a;
}
.nav-primary.nav-tabs .nav-link.active {
    color: #86b234;
    border-color: #95c33d #95c33d #fff;
}
html.dark-theme .nav-primary.nav-tabs .nav-link.active {
    border-color: #95c33d #95c33d rgb(255 255 255 / 14%);
}

/* Pagination */
.pagination {
    --bs-pagination-color: #6f9a1e;
    --bs-pagination-hover-color: #5c821a;
    --bs-pagination-hover-bg: #eef5dd;
    --bs-pagination-hover-border-color: #cfe4a3;
    --bs-pagination-focus-color: #5c821a;
    --bs-pagination-focus-bg: #eef5dd;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .25);
    --bs-pagination-active-bg: #95c33d;
    --bs-pagination-active-border-color: #95c33d;
}

/* Alerts / tables */
.alert-primary {
    --bs-alert-color: #55731c;
    --bs-alert-bg: #eef5dd;
    --bs-alert-border-color: #cfe4a3;
}
.alert-info {
    --bs-alert-color: #4d4f4f;
    --bs-alert-bg: #e9eaea;
    --bs-alert-border-color: #d3d5d5;
}
.table-primary {
    --bs-table-bg: #eef5dd;
}
.text-info { color: #808282 !important; }

/* Rocker menu active pill */
.primary-menu .navbar .navbar-nav a.nav-link:active,
.primary-menu .navbar .navbar-nav a.nav-link:focus,
.primary-menu .navbar .navbar-nav a.nav-link.active:hover,
.primary-menu .navbar .navbar-nav a.nav-link.active {
    color: #fff;
    background-color: #95c33d;
}

/* Rocker accents */
.back-to-top { background-color: #95c33d; }
.logo-text, .toggle-icon { color: #95c33d; }
.switcher-btn { background: #95c33d; }
.invoice header { border-bottom: 1px solid #95c33d; }
.invoice .invoice-details .invoice-id { color: #95c33d; }
.invoice main .notices { border-left: 6px solid #95c33d; background: #eef5dd; }
.invoice table .total { background: #95c33d; color: #fff; }

/* Pace progress bar */
.pace .pace-progress { background: #95c33d; }
.pace .pace-progress-inner {
    box-shadow: 0 0 10px rgba(149, 195, 61, .7), 0 0 5px rgba(149, 195, 61, .7);
}
.pace .pace-activity {
    border-top-color: #95c33d;
    border-left-color: #95c33d;
}

/* Flatpickr */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: #95c33d;
    border-color: #95c33d;
    color: #fff;
}
.flatpickr-day.inRange {
    background: rgba(149, 195, 61, .15);
    border-color: rgba(149, 195, 61, 0);
    box-shadow: -5px 0 0 rgba(149, 195, 61, .15), 5px 0 0 rgba(149, 195, 61, .15);
}
.flatpickr-day.today { border-color: #95c33d; }
.flatpickr-day.today:hover {
    background: #95c33d;
    border-color: #95c33d;
    color: #fff;
}
.flatpickr-day:hover {
    background: #eef5dd;
    border-color: #eef5dd;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #95c33d; }

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #95c33d;
    color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #b7d983;
    box-shadow: 0 0 0 .25rem rgba(149, 195, 61, .25);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #95c33d;
    border-color: #86b234;
    color: #fff;
}

/* daterangepicker */
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #95c33d;
    border-color: #95c33d;
    color: #fff;
}
.daterangepicker td.in-range {
    background-color: #eef5dd;
    color: #3d4d15;
}

/* Solid brand-green badge used for student-card action icons */
.bg-green-badge {
    background-color: #95c33d !important;
    color: #fff !important;
}

/* Navigation menus (desktop dropdowns + offcanvas drawer, which share these
   selectors): wider dropdowns, long text wraps instead of overflowing, no
   bold anywhere, and text shrinks one step per menu depth */
.primary-menu .navbar .navbar-nav .dropdown-menu {
    min-width: 15rem;
}
.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 0.9rem;
}
.primary-menu .navbar .navbar-nav .dropdown-menu strong,
.primary-menu .navbar .navbar-nav .nav-link .nav-title {
    font-weight: 400;
}
.primary-menu .navbar .navbar-nav > li > a.nav-link .nav-title {
    font-size: 0.95rem;
}
.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-menu .dropdown-item {
    font-size: 0.85rem;
}
.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
    font-size: 0.8rem;
}

/* Mobile (below xl): hamburger opens the primary menu in an offcanvas drawer;
   stack the horizontal menu vertically with dropdowns expanding in-flow */
@media (max-width: 1199.98px) {
    #offcanvasNavbar .offcanvas-body {
        display: block;
        overflow-y: auto;
    }
    #offcanvasNavbar #navbar-menu {
        display: block !important;
    }
    #offcanvasNavbar #nav,
    #offcanvasNavbar #nav-right {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: 100%;
    }
    #offcanvasNavbar .navbar-nav .nav-item {
        width: 100%;
    }
    #offcanvasNavbar .navbar-nav .dropdown,
    #offcanvasNavbar .navbar-nav .dropend {
        position: static;
    }
    #offcanvasNavbar .navbar-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        animation: none;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
        padding-left: 1rem;
    }
    #offcanvasNavbar .navbar-nav .dropend > a.dropdown-toggle:after {
        transform: rotate(90deg);
    }

    /* Class page: the Class Manager sidebar stacks above the content below xl —
       move its divider from the right edge to the bottom */
    [id$='div_left_side'].col-xl-auto {
        border-right: 0 !important;
        border-bottom: 1px solid #dee2e6;
    }

    /* Class view: compact the Week/date card into one horizontal strip */
    [id$='cntrl_class_view_di'] .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    [id$='cntrl_class_view_di'] .card-body .h2 {
        font-size: 1.1rem;
        margin: 0;
    }
    [id$='cntrl_class_view_di'] .card-body .h4 {
        font-size: 1rem;
        margin: 0;
    }

    /* Squeeze tables so wide tables fit tablets without scrolling the page;
       tables still wider than the viewport scroll inside .table-responsive */
    .table {
        font-size: 0.8125rem;
    }
    .table > :not(caption) > * > * {
        padding: 0.3rem 0.4rem;
    }

    /* Long class-switcher badge: let the text wrap instead of overflowing */
    .bg-green-badge {
        white-space: normal;
    }

    /* Class list: long student names wrap instead of forcing table width */
    [id$='tbl_class_list'] .text-nowrap {
        white-space: normal !important;
    }
}

/* Very small devices: compress tables harder so columns fit without scrolling */
@media (max-width: 575.98px) {
    .table {
        font-size: 0.75rem;
    }
    .table > :not(caption) > * > * {
        padding: 0.15rem 0.25rem;
    }

    /* Class list: drop the designer's fixed column widths (they alone exceed a
       phone viewport) and size every column by content */
    [id$='tbl_class_list'] th,
    [id$='tbl_class_list'] td {
        width: auto !important;
    }

    /* Attendance entry: same width reset; with Reason/Remarks/edit hidden the
       Commit row's empty spacer cells must go so the button spans the table */
    [id$='div_entry_form'] th,
    [id$='div_entry_form'] td {
        width: auto !important;
    }
    [id$='div_entry_form'] tfoot tr td:first-child,
    [id$='div_entry_form'] tfoot tr td:last-child {
        display: none;
    }
}