/*
 * 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;
    }
}

/* Class page header selectors: Popper aligns the menu with the toggle (right of
   the narrow textbox), so the year list appears beside the box. Pin it under the
   whole group instead. !important beats Popper's inline transform. */
.btn-group.year-select-dd .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    transform: none !important;
}