/* Theme overrides: add custom styles here */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");

html[dir="rtl"] body,
body.layout-mode-rtl,
body.layout-mode-rtl button,
body.layout-mode-rtl input,
body.layout-mode-rtl select,
body.layout-mode-rtl textarea {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

.font-arabic {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

body.layout-mode-rtl {
    direction: rtl;
    text-align: right;
}

body.layout-mode-rtl .main-wrapper {
    direction: rtl;
}

body.layout-mode-rtl .header {
    direction: rtl;
}

body.layout-mode-rtl .header .header-left {
    float: right;
    border-right: 0;
    border-left: 1px solid #E9EDF4;
}

body.layout-mode-rtl .header .header-user {
    margin-left: 0;
    margin-right: auto;
}

body.layout-mode-rtl .header .user-menu {
    flex-direction: row-reverse;
}

body.layout-mode-rtl .header.school-shell-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    left: 0;
    right: var(--school-shell-sidebar);
    width: calc(100% - var(--school-shell-sidebar));
    padding: 0 1rem;
}

body.layout-mode-rtl .school-shell-mobile {
    margin-inline-end: 0.25rem;
    margin-inline-start: 0;
}

body.layout-mode-rtl .school-shell-toggle-wrap {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

body.layout-mode-rtl .school-shell-breadcrumb {
    order: 2;
    margin-inline-end: 0;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1f2a5a;
    white-space: nowrap;
}

body.layout-mode-rtl .school-shell-search {
    order: 3;
    margin-inline: 0;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

body.layout-mode-rtl .school-shell-search form {
    flex-direction: row-reverse;
}

body.layout-mode-rtl .school-shell-actions {
    order: 4;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: auto;
}

body.layout-mode-rtl .school-shell-actions .dropdown-menu,
body.layout-mode-rtl .school-shell-topbar .dropdown-menu {
    text-align: right;
}

body.layout-mode-rtl .school-shell-profile__button {
    flex-direction: row;
    direction: rtl;
    white-space: nowrap;
}

body.layout-mode-rtl .school-shell-icon-btn {
    flex-direction: row-reverse;
}

body.layout-mode-rtl .school-shell-profile__meta {
    text-align: right;
}

body.layout-mode-rtl #notification_item,
body.layout-mode-rtl .school-shell-profile,
body.layout-mode-rtl .mobile-user-menu {
    position: relative;
}

body.layout-mode-rtl #notification_item .notification-dropdown {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 24px);
}

body.layout-mode-rtl .school-shell-profile__button .ti-chevron-down {
    margin-inline-start: 0;
    margin-inline-end: 0.35rem;
}

body.layout-mode-rtl .school-shell-profile__button strong,
body.layout-mode-rtl .school-shell-profile__button small {
    text-align: right;
}

body.layout-mode-rtl .sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid #E9EDF4;
}

body.layout-mode-rtl .sidebar.school-shell-sidebar--rtl {
    direction: rtl;
    text-align: right;
}

body.layout-mode-rtl .page-wrapper {
    margin: 0 252px 0 0;
}

body.layout-mode-rtl .page-wrapper .content {
    text-align: right;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li > a,
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a,
body.layout-mode-rtl .sidebar .sidebar-menu > ul li .submenu > a {
    flex-direction: row;
    justify-content: flex-start;
    text-align: right;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li > ul > li > a,
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li > ul > li.submenu > a {
    padding-left: 11px;
    padding-right: 11px;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li .submenu > ul li a {
    padding: 0 42px 0 12px;
    flex-direction: row;
    justify-content: flex-start;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li > a i,
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li svg,
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a i {
    margin: 0;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li > a span,
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a span {
    margin: 0;
}

body.layout-mode-rtl .sidebar .sidebar-menu a span:not(.menu-arrow) {
    text-align: right;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
    margin-left: 0;
    margin-right: 8px;
}

body.layout-mode-rtl .sidebar .submenu-hdr {
    flex-direction: row;
}

body.layout-mode-rtl .sidebar .sidebar-menu .menu-arrow {
    right: auto;
    left: 10px;
    margin-left: 0;
    margin-right: auto;
}

body.layout-mode-rtl .sidebar .sidebar-menu .menu-arrow::before {
    transform: rotate(135deg);
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul > li .submenu > ul li a {
    padding-left: 8px;
    padding-right: 40px;
}

body.layout-mode-rtl .sidebar .sidebar-menu > ul li .submenu > ul li a:before {
    left: auto;
    right: 28px;
}

body.layout-mode-rtl .sidebar .sidebar-menu .submenu-open .submenu ul li a {
    margin-left: 0;
    margin-right: 25px;
    padding-left: 10px;
    padding-right: 26px;
}

body.layout-mode-rtl .sidebar .sidebar-menu .submenu-open .submenu ul li a::after {
    left: auto;
    right: 0;
}

body.layout-mode-rtl .sidebar-school-card,
body.layout-mode-rtl .school-shell-year,
body.layout-mode-rtl .school-shell-sidebar-footer {
    direction: rtl;
    text-align: right;
}

body.layout-mode-rtl .school-shell-year > a {
    flex-direction: row;
    justify-content: flex-start;
}

body.layout-mode-rtl .school-shell-year__icon {
    margin-inline-end: 0;
    margin-inline-start: 0.75rem;
}

body.layout-mode-rtl .school-shell-year__label {
    flex: 1 1 auto;
    text-align: right;
}

body.layout-mode-rtl .school-shell-year__chevron {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

body.layout-mode-rtl .school-shell-year__menu {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    min-width: 100%;
    text-align: right;
}

body.layout-mode-rtl .school-shell-sidebar--rtl {
    direction: rtl;
}

body.layout-mode-rtl .school-shell-collapse,
body.layout-mode-rtl .school-shell-help {
    flex-direction: row-reverse;
}

body.layout-mode-rtl .sidebar-school-card .d-flex {
    align-items: center;
    text-align: right;
    direction: rtl;
    flex-direction: row;
    justify-content: flex-start;
}

body.layout-mode-rtl .sidebar-school-card .d-flex > span {
    margin-right: 0.75rem;
    margin-left: 0;
}

body.layout-mode-rtl .sidebar-school-card .school-shell-sidebar-brand__logo {
    order: 1;
}

body.layout-mode-rtl .sidebar-school-card .school-shell-sidebar-brand__text {
    order: 2;
}

.smart-calendar-wrap {
    border: 1px solid #e8ebf1;
    border-radius: 10px;
}

.smart-calendar-table th,
.smart-calendar-table td {
    min-width: 170px;
    vertical-align: top;
    background-color: #fff;
}

.smart-calendar-table .smart-time-col {
    min-width: 160px;
    background: #f8f9fb;
}

.smart-cell-empty {
    background: #fcfdff;
}

.smart-cell-filled {
    background: #f5f9ff;
}

.smart-event {
    border-left: 4px solid #3d7ff9;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08);
}

.smart-event-locked {
    border-left-color: #f59f00;
    background: #fff9e8;
}

.smart-event-subject {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
}

.smart-event-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.iti { width: 100%; }

#teacher_phone_input,
.student-phone-input,
.student-parent-phone-input,
.parent-family-phone-input,
.iti #teacher_phone_input,
.iti .student-phone-input,
.iti .student-parent-phone-input,
.iti .parent-family-phone-input,
body.layout-mode-rtl .iti #teacher_phone_input,
body.layout-mode-rtl .iti .student-phone-input,
body.layout-mode-rtl .iti .student-parent-phone-input,
body.layout-mode-rtl .iti .parent-family-phone-input {
    direction: ltr;
    text-align: left;
}

body.layout-mode-rtl .iti {
    direction: ltr;
}

body.layout-mode-rtl .iti__country-list {
    direction: ltr;
    text-align: left;
}

body.layout-mode-rtl .iti__selected-country,
body.layout-mode-rtl .iti__selected-flag {
    direction: ltr;
}

body.layout-mode-rtl .iti--allow-dropdown input#teacher_phone_input,
body.layout-mode-rtl .iti--separate-dial-code input#teacher_phone_input,
body.layout-mode-rtl .iti--allow-dropdown input.student-phone-input,
body.layout-mode-rtl .iti--separate-dial-code input.student-phone-input,
body.layout-mode-rtl .iti--allow-dropdown input.student-parent-phone-input,
body.layout-mode-rtl .iti--separate-dial-code input.student-parent-phone-input,
body.layout-mode-rtl .iti--allow-dropdown input.parent-family-phone-input,
body.layout-mode-rtl .iti--separate-dial-code input.parent-family-phone-input {
    padding-left: 52px;
    padding-right: 12px;
}
.table-row-summary__avatar-image {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid rgba(var(--ct-primary-rgb), 0.15);
    background: #fff;
}

.table-row-summary__name {
    font-weight: 600;
    color: #1f2a5a;
}

.table-row-summary__meta {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: #6c757d;
}

.table-row-collapse-toggle {
    border-radius: 12px;
}

.table-row-details {
    padding: 1rem 1.25rem;
    background: rgba(var(--ct-primary-rgb), 0.04);
    border-radius: 14px;
}

.table-row-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
}

.table-row-details__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin-bottom: 0.3rem;
}

.table-row-details__value {
    color: #1f2a5a;
    word-break: break-word;
}

.smart-schedule-toolbar,
.smart-schedule-card,
.smart-schedule-calendar-card,
.smart-schedule-side-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.smart-schedule-toolbar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.smart-schedule-toolbar__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.smart-schedule-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.smart-schedule-toolbar__secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.smart-schedule-toolbar__generate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 520px;
}

.smart-schedule-toolbar__generate .form-select {
    min-width: 240px;
    flex: 1 1 240px;
}

.smart-schedule-toolbar__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    margin: 0;
}

.smart-schedule-toolbar__button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.smart-schedule-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
    letter-spacing: 0.04em;
}

.smart-schedule-view-switch {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.35rem;
    background: #eef2ff;
    border-radius: 999px;
}

.smart-schedule-view-switch .form-check {
    margin: 0;
}

.smart-schedule-view-switch .form-check-label {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: 0.2s ease;
}

.smart-schedule-view-switch .form-check-input {
    display: none;
}

.smart-schedule-view-switch .form-check-input:checked + .form-check-label {
    background: #3157d5;
    color: #fff;
    box-shadow: 0 8px 20px rgba(49, 87, 213, 0.25);
}

.smart-schedule-stat {
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 1rem 1.1rem;
    height: 100%;
}

.smart-schedule-stat__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.smart-schedule-stat__value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

.smart-schedule-calendar-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.smart-schedule-scope {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.smart-schedule-scope__title {
    margin: 0;
    font-weight: 800;
    color: #0f172a;
}

.smart-schedule-scope__meta {
    color: #64748b;
    font-size: 0.9rem;
}

.smart-schedule-grid-wrap {
    overflow-x: auto;
}

.smart-schedule-grid {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.smart-schedule-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eff6ff;
    color: #1e3a8a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.smart-schedule-grid th,
.smart-schedule-grid td {
    border: 1px solid rgba(148, 163, 184, 0.18);
    vertical-align: top;
    padding: 0.48rem;
}

.smart-schedule-grid__period {
    width: 128px;
    min-width: 128px;
    background: #f8fafc;
}

.smart-schedule-grid__cell {
    min-width: 112px;
    background: #fff;
}

.smart-schedule-grid__cell.is-empty {
    background: #f8fafc;
}

.smart-schedule-grid__cell.is-conflict {
    background: #fff1f2;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.2);
}

.smart-schedule-period-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
}

.smart-schedule-period-time {
    font-size: 0.76rem;
    color: #64748b;
}

.smart-schedule-event-list {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.smart-schedule-event {
    border-radius: 8px;
    padding: 0.5rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.07);
}

.smart-schedule-event.is-manual {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-color: rgba(34, 211, 238, 0.35);
}

.smart-schedule-event.is-locked {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.1);
}

.smart-schedule-event.is-conflict {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-color: rgba(225, 29, 72, 0.35);
}

.smart-schedule-event--clickable {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.smart-schedule-event--clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

.smart-schedule-event__subject {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.12rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.smart-schedule-event__meta {
    overflow: hidden;
    font-size: 0.74rem;
    color: #475569;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-schedule-event__badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.34rem;
}

.smart-schedule-event__badges .badge {
    padding: 0.18rem 0.34rem;
    font-size: 0.68rem;
}

.smart-schedule-event__empty {
    color: #94a3b8;
    font-size: 0.78rem;
}

.smart-schedule-side-card .card-header,
.smart-schedule-calendar-card .card-header,
.smart-schedule-card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 0.9rem;
}

.smart-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.smart-schedule-list__item {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    padding: 0.85rem 0.95rem;
    background: #fff;
}

.smart-schedule-list__item strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #0f172a;
}

.smart-schedule-list__item small {
    color: #64748b;
}

.smart-schedule-recognition-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
}

.smart-schedule-settings-hero {
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 55%, #ffffff 100%);
    border: 1px solid rgba(49, 87, 213, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.smart-schedule-settings-checklist {
    display: grid;
    gap: 0.85rem;
}

.smart-schedule-settings-step {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
}

.smart-schedule-settings-step__number {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3157d5;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.smart-schedule-settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: #fff;
}

.smart-schedule-row--active {
    animation: smart-schedule-row-pulse 1.6s ease;
}

@keyframes smart-schedule-row-pulse {
    0%,
    100% {
        background-color: transparent;
    }

    30%,
    70% {
        background-color: rgba(49, 87, 213, 0.08);
    }
}

@media (max-width: 991.98px) {
    .smart-schedule-grid {
        min-width: 650px;
    }

    .smart-schedule-toolbar__secondary {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-schedule-toolbar__generate,
    .smart-schedule-toolbar__button-group {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .page-wrapper {
        transition: margin-left 0.5s ease !important;
    }
}

.sidebar,
[data-sidebar=dark] .sidebar {
    background: #003ca6 !important;
    border-color: #002d7a !important;
}

.header .header-left {
    background: #003ca6 !important;
    border-color: #002d7a !important;
}
.header .header-left #toggle_btn i,
.header .header-left #toggle_btn .ti {
    color: #fff !important;
}
.header #mobile_btn .bar-icon span {
    background-color: #fff !important;
}

.sidebar .sidebar-menu .border.bg-white {
    background: #002d7a !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.sidebar .sidebar-menu .border.bg-white span,
.sidebar .sidebar-menu .border.bg-white .text-dark {
    color: #fff !important;
}

.mini-sidebar .sidebar-school-card {
    display: none !important;
}
.mini-sidebar.expand-menu .sidebar-school-card {
    display: block !important;
}

.sidebar .sidebar-menu > ul > li .submenu-hdr,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr {
    color: rgba(255,255,255,0.45) !important;
}
.sidebar .sidebar-menu > ul > li .submenu-hdr::after,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
    background: rgba(255,255,255,0.15) !important;
}

.sidebar .sidebar-menu > ul > li > a i,
.sidebar .sidebar-menu > ul > li > a .ti,
.sidebar .sidebar-menu > ul > li > a span:not(.menu-arrow) {
    color: rgba(255,255,255,0.85) !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
    background: #002d7a !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
    color: rgba(255,255,255,0.72) !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a i {
    background: #002d7a !important;
    color: rgba(255,255,255,0.72) !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li.active a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a:hover,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a.active,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a i,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
    color: #111827 !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
    background: #fff !important;
    border-radius: 6px !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a::before {
    background: #002d7a !important;
}

/* 2026 school shell redesign */
:root {
    --school-shell-sidebar: 260px;
    --edugate-navy: #203060;
    --edugate-blue: #256b9f;
    --edugate-cyan: #30a8e0;
    --edugate-cyan-dark: #258fc5;
    --edugate-cyan-soft: #eaf7fd;
    --school-shell-blue-950: var(--edugate-navy);
    --school-shell-blue-900: #234877;
    --school-shell-blue-800: var(--edugate-blue);
    --school-shell-indigo: var(--edugate-cyan);
    --school-shell-ink: #16254f;
    --school-shell-muted: #687590;
    --school-shell-border: #dce7ef;
    --school-shell-bg: #f6fafd;
    --bs-primary: var(--edugate-blue);
    --bs-primary-rgb: 37, 107, 159;
}

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

.main-wrapper {
    background: var(--school-shell-bg);
}

.sidebar,
[data-sidebar=dark] .sidebar {
    width: var(--school-shell-sidebar) !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    background: linear-gradient(180deg, var(--edugate-navy) 0%, #234f7d 52%, #267eae 100%) !important;
    border: 0 !important;
    border-radius: 0 16px 16px 0;
    box-shadow: 14px 0 36px rgba(32, 48, 96, 0.18);
    padding: 0;
}

.sidebar .sidebar-inner,
.sidebar .slimScrollDiv,
.sidebar .sidebar-menu {
    width: 100% !important;
}

.sidebar .sidebar-inner {
    height: 100%;
}

.sidebar .sidebar-menu {
    padding: 20px 18px 16px;
}

.sidebar .sidebar-menu > ul:first-child {
    margin: 0;
}

.sidebar-school-card {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.sidebar-school-card img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px;
}

.sidebar-school-card strong,
.sidebar-school-card small {
    display: block;
    color: #fff;
    line-height: 1.25;
}

.sidebar-school-card strong {
    max-width: 166px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-school-card small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.school-shell-year {
    margin-bottom: 18px;
}

.school-shell-year > a {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.school-shell-year__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
}

.school-shell-year__label {
    min-width: 0;
}

.school-shell-year small,
.school-shell-year strong {
    display: block;
    line-height: 1.25;
}

.school-shell-year small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

.school-shell-year strong {
    margin-top: 2px;
    color: #fff;
    font-size: 14px;
}

.sidebar .submenu-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 7px;
    padding: 0;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar .submenu-hdr::after {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12) !important;
    content: "";
}

.sidebar .sidebar-menu > ul > li,
.sidebar .sidebar-menu > ul > li ul li {
    margin: 0;
}

.sidebar .sidebar-menu > ul > li > ul,
.sidebar .sidebar-menu > ul > li .submenu > ul {
    margin: 0;
    padding: 0;
}

.sidebar .sidebar-menu > ul > li > ul > li > a,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 3px 0;
    padding: 0 11px;
    color: rgba(255, 255, 255, 0.88) !important;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar .sidebar-menu a i,
.sidebar .sidebar-menu a .ti {
    width: 19px;
    min-width: 19px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px;
    line-height: 1;
}

.sidebar .sidebar-menu a span:not(.menu-arrow) {
    color: inherit !important;
}

.sidebar .sidebar-menu > ul > li > ul > li > a:hover,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a:hover,
.sidebar .sidebar-menu > ul > li > ul > li > a.active,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .sidebar-menu > ul > li > ul > li > a.active,
.sidebar .sidebar-menu > ul li .submenu > a.active,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop {
    background: linear-gradient(135deg, var(--edugate-blue) 0%, var(--edugate-cyan) 100%) !important;
    box-shadow: 0 12px 28px rgba(38, 139, 190, 0.3);
}

.sidebar .sidebar-menu .menu-arrow {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.82);
}

.sidebar .sidebar-menu > ul > li .submenu > ul li a {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px 0 42px;
    color: rgba(255, 255, 255, 0.78) !important;
    border-radius: 10px;
    font-size: 13px;
}

.sidebar .sidebar-menu > ul > li > ul > li > a::before,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a::before {
    display: none !important;
    content: none !important;
}

.sidebar .sidebar-menu > ul > li .submenu > ul li a::before {
    width: 5px;
    height: 5px;
    min-width: 5px;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    content: "";
}

.sidebar .sidebar-menu > ul > li .submenu > ul li a.active,
.sidebar .sidebar-menu > ul > li .submenu > ul li a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li.active a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a i,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a:hover,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a.active,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
    color: #fff !important;
}

[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
    background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .sidebar-menu > ul > li .submenu > ul li a.active::before,
.sidebar .sidebar-menu > ul > li .submenu > ul li a:hover::before {
    background: #fff !important;
}

.school-shell-sidebar-footer {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.school-shell-collapse,
.school-shell-help {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.school-shell-collapse {
    min-height: 40px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.04);
}

.school-shell-help {
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.school-shell-help strong,
.school-shell-help small {
    display: block;
    color: #fff;
    line-height: 1.25;
}

.school-shell-help small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
}

.header.school-shell-topbar {
    left: var(--school-shell-sidebar);
    width: calc(100% - var(--school-shell-sidebar));
    height: 84px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 30px;
    background: var(--school-shell-bg);
    border: 0;
    box-shadow: none;
}

.school-shell-toggle-wrap {
    width: auto !important;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

.header .header-left.school-shell-toggle-wrap {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
}

.header .header-left.school-shell-toggle-wrap #toggle_btn,
.header .header-left.school-shell-toggle-wrap #toggle_btn i,
.header .header-left.school-shell-toggle-wrap #toggle_btn .ti {
    color: #263764 !important;
}

.school-shell-menu-btn,
.school-shell-icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #263764;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(19, 43, 82, 0.04);
}

.school-shell-menu-btn i,
.school-shell-icon-btn i {
    font-size: 19px;
}

.school-shell-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 176px;
    color: var(--school-shell-muted);
    font-size: 14px;
    white-space: nowrap;
}

.school-shell-breadcrumb strong {
    color: var(--school-shell-ink);
    font-weight: 800;
}

.school-shell-search {
    flex: 1 1 440px;
    display: flex;
    justify-content: center;
}

.school-shell-search form {
    width: min(520px, 100%);
    height: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    background: #fff;
    border-bottom: 1px solid var(--school-shell-border);
    box-shadow: 0 12px 34px rgba(31, 48, 84, 0.04);
}

.school-shell-search i {
    color: #55709c;
    font-size: 21px;
}

.school-shell-search input {
    flex: 1;
    min-width: 0;
    color: var(--school-shell-ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.school-shell-search input::placeholder {
    color: #7482a8;
}

.school-shell-search kbd {
    padding: 4px 8px;
    color: #64708d;
    background: #f7f9fd;
    border: 1px solid #dbe3f1;
    border-radius: 8px;
    box-shadow: none;
    font-size: 12px;
}

.school-shell-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.school-account-switcher {
    margin-inline-end: auto;
    position: relative;
}

.school-account-switcher__button {
    min-width: 220px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    color: #13234f;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--school-shell-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(21, 38, 76, 0.05);
}

.school-account-switcher__button:hover,
.school-account-switcher__button:focus {
    color: #13234f;
    border-color: #bfcdf5;
    box-shadow: 0 16px 34px rgba(49, 70, 220, 0.1);
}

.school-account-switcher__button-icon,
.school-account-switcher__item-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4353ee;
    background: #eef4ff;
    border-radius: 6px;
}

.school-account-switcher__button-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
    text-align: start;
}

.school-account-switcher__button-text small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.school-account-switcher__button-text strong {
    max-width: 190px;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-account-switcher__chevron {
    color: #64748b;
    font-size: 16px;
}

.school-account-switcher__menu {
    width: 330px;
    min-width: 330px;
    max-height: min(560px, calc(100vh - 110px));
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 6px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22), 0 5px 12px rgba(15, 23, 42, 0.08) !important;
}

.school-account-switcher__header {
    margin-bottom: 4px;
    padding: 8px 10px 9px;
    border-bottom: 1px solid #eef2f7;
}

.school-account-switcher__header span,
.school-account-switcher__header small {
    display: block;
}

.school-account-switcher__header span {
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}

.school-account-switcher__header small {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    word-break: break-all;
}

.school-account-switcher__item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    color: #263764;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: start;
}

.school-account-switcher__item:hover,
.school-account-switcher__item:focus {
    color: #263764;
    background: #f3f6fb;
}

.school-account-switcher__item-icon {
    border-radius: 0;
}

.school-account-switcher__item.is-active {
    position: relative;
    background: #eee;
}

.school-account-switcher__item.is-active .school-account-switcher__item-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.school-account-switcher__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-account-switcher__current {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: #0f9f4d;
    background: #dcfce7;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .school-account-switcher__menu {
        width: min(330px, calc(100vw - 24px));
        min-width: min(330px, calc(100vw - 24px));
    }

    .school-account-switcher__button {
        min-width: 0;
        max-width: 220px;
    }
}

.section-responsible-topbar .school-account-switcher__button {
    min-height: 44px;
    padding: 5px 10px;
    background: #fff;
    border-color: #e5eaf3;
    border-radius: 12px;
    box-shadow: none;
}

.section-responsible-topbar .school-account-switcher__button-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 10px;
}

.section-responsible-topbar .school-account-switcher__menu {
    padding: 7px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16);
}

.section-responsible-topbar .school-account-switcher__item {
    margin: 2px 0;
    border: 0 !important;
    border-radius: 11px;
    box-shadow: none !important;
}

.header.coordinator-topbar {
    height: 84px;
    display: flex;
    align-items: center;
    gap: 14px;
    left: var(--school-shell-sidebar);
    right: 0;
    width: calc(100% - var(--school-shell-sidebar));
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(21, 38, 76, 0.04);
}

body:has(.coordinator-topbar) .page-wrapper {
    padding-top: 84px;
}

.coordinator-topbar .header-left {
    display: none;
}

.coordinator-topbar .mobile_btn {
    position: static;
    flex: 0 0 auto;
    margin: 0;
}

.coordinator-topbar .header-user,
.coordinator-topbar__user {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

.coordinator-topbar__menu {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.coordinator-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.coordinator-topbar__actions > .dropdown,
.coordinator-topbar__actions #notification_item {
    flex: 0 0 auto;
}

.coordinator-topbar__language > a,
.coordinator-topbar__profile > a,
.coordinator-topbar #notification_popup {
    min-height: 42px;
    border: 1px solid #dfe6f3 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(21, 38, 76, 0.04);
}

.coordinator-topbar__profile .avatar {
    width: 34px;
    height: 34px;
}

body.layout-mode-rtl .coordinator-topbar .user-menu {
    flex-direction: row !important;
}

body.layout-mode-rtl .header.coordinator-topbar {
    left: 0;
    right: var(--school-shell-sidebar);
    width: calc(100% - var(--school-shell-sidebar));
}

body.layout-mode-rtl .coordinator-topbar .dropdown-menu {
    text-align: right;
}

body.layout-mode-rtl .coordinator-topbar__actions {
    flex-direction: row;
}

body.layout-mode-rtl .coordinator-topbar__profile .btn {
    flex-direction: row-reverse;
}

@media (max-width: 767.98px) {
    .coordinator-topbar__profile span:not(.avatar) {
        display: none !important;
    }
}

.school-shell-quick-add {
    min-width: 160px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #fff;
    background: linear-gradient(135deg, #5362ff 0%, #3145dd 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(49, 70, 220, 0.25);
    font-weight: 800;
}

.school-shell-quick-add:hover,
.school-shell-quick-add:focus {
    color: #fff;
}

.school-shell-topbar #notification_item {
    padding: 0 !important;
}

.school-shell-topbar #notification_popup,
.school-shell-topbar .btn-icon.bg-white {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #263764 !important;
    background: #fff !important;
    border: 1px solid var(--school-shell-border) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(19, 43, 82, 0.04);
}

.school-shell-topbar #notification_popup i,
.school-shell-topbar .btn-icon.bg-white i {
    font-size: 18px;
}

.notification-status-dot,
.school-shell-dot {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #ff4564;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.notification-status-dot {
    width: 12px;
    min-width: 12px;
    height: 12px;
}

.school-shell-profile__button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--school-shell-ink);
    background: transparent;
    border: 0;
}

.school-shell-profile__avatar {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.school-shell-profile__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 12px 28px rgba(18, 39, 77, 0.1);
}

.school-shell-profile__avatar span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 13px;
    height: 13px;
    background: #20c997;
    border: 2px solid #fff;
    border-radius: 50%;
}

.school-shell-profile__meta {
    display: block;
    min-width: 120px;
    text-align: left;
}

.school-shell-profile__meta strong,
.school-shell-profile__meta small {
    display: block;
    line-height: 1.25;
}

.school-shell-profile__meta strong {
    max-width: 160px;
    overflow: hidden;
    color: var(--school-shell-ink);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-shell-profile__meta small {
    margin-top: 3px;
    color: var(--school-shell-muted);
    font-size: 12px;
}

.page-wrapper {
    margin-left: var(--school-shell-sidebar);
    padding-top: 84px;
    background: var(--school-shell-bg);
}

.page-wrapper .content {
    padding: 22px 26px 32px;
}

.page-wrapper .content > .d-md-flex:first-child {
    align-items: center !important;
    margin-bottom: 18px !important;
}

.page-title {
    color: var(--school-shell-ink);
    font-size: 28px;
    font-weight: 850;
    letter-spacing: 0;
}

.card {
    border: 1px solid var(--school-shell-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.card-header {
    background: transparent;
    border-bottom-color: var(--school-shell-border);
}

.table thead th {
    color: var(--school-shell-ink);
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    .school-shell-breadcrumb {
        display: none;
    }

    .school-shell-search {
        justify-content: flex-start;
    }

    .school-shell-profile__meta,
    .school-shell-quick-add span {
        display: none;
    }

    .school-shell-quick-add {
        min-width: 56px;
        width: 56px;
        padding: 0;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        border-radius: 0;
        top: 0 !important;
    }

    .header.school-shell-topbar {
        left: 0;
        width: 100%;
        height: 76px;
        padding: 0 16px;
    }

    .page-wrapper {
        margin-left: 0;
        padding-top: 76px;
    }

    .school-shell-search form {
        height: 48px;
    }

    .page-wrapper .content {
        padding: 18px 16px 28px;
    }
}

@media (max-width: 767.98px) {
    .school-shell-search {
        display: none;
    }

    .school-shell-actions {
        gap: 8px;
    }

    .school-shell-icon-btn,
    .school-shell-topbar #notification_popup,
    .school-shell-topbar .btn-icon.bg-white,
    .school-shell-menu-btn {
        width: 44px;
        height: 44px;
    }
}

body.mini-sidebar .sidebar {
    width: 70px !important;
}

body.mini-sidebar .header.school-shell-topbar {
    left: 70px;
    width: calc(100% - 70px);
}

body.mini-sidebar .page-wrapper {
    margin-left: 70px;
}

body.mini-sidebar .sidebar-school-card span,
body.mini-sidebar .school-shell-year,
body.mini-sidebar .sidebar .submenu-hdr,
body.mini-sidebar .sidebar .sidebar-menu a span:not(.menu-arrow),
body.mini-sidebar .sidebar .sidebar-menu .menu-arrow {
    display: none !important;
}

body.mini-sidebar .sidebar .sidebar-menu {
    padding: 20px 10px;
}

body.mini-sidebar .sidebar-school-card img {
    width: 40px !important;
    height: 40px !important;
}

body.mini-sidebar .school-shell-sidebar-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 14px;
}

body.mini-sidebar .school-shell-collapse {
    width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.mini-sidebar .school-shell-collapse span,
body.mini-sidebar .school-shell-help {
    display: none !important;
}

body.mini-sidebar .school-shell-collapse i {
    transform: rotate(180deg);
}

body.mini-sidebar .sidebar .sidebar-menu > ul > li > ul > li > a,
body.mini-sidebar .sidebar .sidebar-menu > ul > li > ul > li.submenu > a {
    width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
}

body.mini-sidebar .sidebar .sidebar-menu > ul > li ul li a {
    width: 40px;
    height: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 0;
}

body.mini-sidebar .sidebar .sidebar-menu > ul > li ul li a::before {
    display: none !important;
    content: none !important;
}

body.mini-sidebar .sidebar .sidebar-menu > ul > li > ul,
body.mini-sidebar .sidebar .sidebar-menu > ul > li .submenu > ul {
    overflow: hidden !important;
}

body.mini-sidebar .sidebar .sidebar-menu > ul > li .submenu > ul,
body.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li .submenu > ul {
    display: none !important;
}

body.mini-sidebar .sidebar .sidebar-menu a,
body.mini-sidebar.expand-menu .sidebar .sidebar-menu a {
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.mini-sidebar.expand-menu .sidebar {
    width: 70px !important;
}

body.mini-sidebar.expand-menu .header.school-shell-topbar {
    left: 70px;
    width: calc(100% - 70px);
}

body.mini-sidebar.expand-menu .page-wrapper {
    margin-left: 70px;
}

body.mini-sidebar.expand-menu .sidebar-school-card span,
body.mini-sidebar.expand-menu .school-shell-year,
body.mini-sidebar.expand-menu .sidebar .submenu-hdr,
body.mini-sidebar.expand-menu .sidebar .sidebar-menu a span:not(.menu-arrow),
body.mini-sidebar.expand-menu .sidebar .sidebar-menu .menu-arrow,
body.mini-sidebar.expand-menu .school-shell-collapse span,
body.mini-sidebar.expand-menu .school-shell-help {
    display: none !important;
}

body.mini-sidebar.expand-menu .school-shell-sidebar-footer,
body.mini-sidebar.expand-menu .school-shell-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.mini-sidebar.expand-menu .school-shell-sidebar-footer {
    display: block !important;
}

/* People screens polish */
.people-form-page {
    display: grid;
    gap: 18px;
}

.people-form-page > form,
.people-form-page .people-form-card {
    display: grid;
    gap: 18px;
}

.people-form-page form > .card,
.people-form-page .people-form-card > form > .row,
.people-form-page .people-form-card > form > .card-body > .row,
.people-form-page .border.rounded-2 {
    background: #fff;
    border: 1px solid var(--school-shell-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.people-form-page .people-form-card > form > .row {
    margin: 0;
    padding: 22px 24px;
}

.people-form-page .people-form-card > form > .row > .col-12 {
    padding: 0;
}

.people-form-page .people-form-card > form > .row > .col-12 + .col-12 {
    margin-top: 18px;
}

.parent-form-stack {
    display: grid;
    gap: 18px;
}

.parent-form-stack > .col-12 {
    padding: 0;
}

.parent-form-main-card {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--school-shell-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.parent-form-main-card > .parent-form-section-header--flat,
.parent-form-main-card > .d-flex:first-child {
    margin: 0 !important;
    padding: 18px 20px;
    border-bottom: 1px solid #e7edf7;
}

.parent-form-main-card > .row {
    margin: 0;
    padding: 22px 24px;
}

.parent-form-main-card > .d-flex:first-child ~ * {
    margin-left: 24px;
    margin-right: 24px;
}

.parent-form-main-card > .d-flex:first-child + * {
    margin-top: 18px;
}

.parent-form-main-card > :last-child {
    margin-bottom: 24px;
}

.people-form-page .parent-student-row,
.people-form-page [data-student-row] {
    border-color: #dfe6f3 !important;
    border-radius: 12px !important;
    background: #fbfdff;
}

.parent-form-section-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.parent-form-section-header--inline {
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.parent-form-section-header--flat {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.parent-form-section-header__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    border-radius: 50%;
    font-size: 25px;
}

.parent-form-section-header__icon--blue {
    color: #246bfe;
    background: #eef3ff;
}

.parent-form-section-header__icon--purple {
    color: #8a4cf5;
    background: #f1e9ff;
}

.parent-form-section-header h4,
.parent-form-section-header p {
    margin: 0;
}

.parent-form-section-header h4 {
    color: var(--school-shell-ink);
    font-size: 17px;
    font-weight: 850;
}

.parent-form-section-header p {
    margin-top: 6px;
    color: #5d6a8d;
    font-size: 13px;
}

.people-form-page form > .card {
    overflow: hidden;
    margin-bottom: 0;
}

.people-form-page form > .card > .card-header {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: #fff !important;
    border-bottom: 1px solid #e7edf7;
}

.people-form-page form > .card > .card-body {
    padding: 22px 24px 8px;
}

.people-form-page form > .card > .card-header .avatar,
.people-form-page form > .card > .card-header span.bg-white.avatar {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #246bfe !important;
    background: #eef3ff !important;
    border: 0;
    border-radius: 50%;
    font-size: 24px;
}

.people-form-page form > .card:nth-of-type(2n) > .card-header .avatar {
    color: #8a4cf5 !important;
    background: #f1e9ff !important;
}

.people-form-page form > .card:nth-of-type(3n) > .card-header .avatar {
    color: #20a65a !important;
    background: #e8f8ee !important;
}

.people-form-page form > .card > .card-header h4 {
    color: var(--school-shell-ink) !important;
    font-size: 17px;
    font-weight: 850;
}

.people-form-page .form-control,
.people-form-page .form-select {
    min-height: 42px;
    border-color: #dfe6f3;
    border-radius: 10px;
}

.people-form-page .form-label {
    color: #13234f;
    font-weight: 700;
}

.people-form-page .form-control:focus,
.people-form-page .form-select:focus {
    border-color: #5262ff;
    box-shadow: 0 0 0 4px rgba(82, 98, 255, 0.12);
}

.people-form-page .people-form-note {
    padding: 14px 18px;
    color: #1f8f52;
    background: #f0fff6;
    border: 1px solid #bfeccb;
    border-radius: 12px;
    font-weight: 700;
}

.people-list-card,
.parents-list-card,
.students-list-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.people-list-card .card-header,
.parents-list-card .card-header,
.students-list-card .card-header {
    min-height: 76px;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #dfe6f3;
}

.people-list-card .card-body,
.parents-list-card .card-body,
.students-list-card .card-body {
    padding: 0 !important;
}

.people-list-card .datatable-shell,
.parents-list-card .datatable-shell,
.students-list-card .datatable-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.people-list-card .datatable-shell .card-body,
.parents-list-card .datatable-shell .card-body,
.students-list-card .datatable-shell .card-body {
    padding: 0 !important;
}

.people-list-card .datatable-container,
.parents-list-card .datatable-container,
.students-list-card .datatable-container {
    overflow: hidden !important;
    border: 0;
    border-radius: 0;
}

.people-list-card table.dataTable,
.parents-list-card table.dataTable,
.students-list-card table.dataTable {
    table-layout: fixed;
}

.people-list-card table.dataTable thead th,
.parents-list-card table.dataTable thead th,
.students-list-card table.dataTable thead th {
    padding: 16px 24px;
    color: var(--school-shell-ink);
    background: #f8fafc;
    border-bottom: 1px solid #dfe6f3;
    font-size: 13px;
    font-weight: 850;
    text-transform: none;
    white-space: nowrap;
}

body.layout-mode-rtl .page-wrapper .content table thead th,
body.layout-mode-rtl .page-wrapper .content table.dataTable thead th,
body.layout-mode-rtl .datatable-container table.dataTable thead th,
body.layout-mode-rtl .teachers-table-card table.dataTable thead th,
body.layout-mode-rtl .people-list-card table.dataTable thead th,
body.layout-mode-rtl .parents-list-card table.dataTable thead th,
body.layout-mode-rtl .students-list-card table.dataTable thead th {
    text-align: right !important;
}

body.layout-mode-rtl  .page-wrapper .content table thead th.text-end{
    text-align: left !important;
}

body.layout-mode-rtl .page-wrapper .content table thead th.text-center,
body.layout-mode-rtl .page-wrapper .content table thead th.col-actions,
body.layout-mode-rtl .page-wrapper .content table thead th.col-toggle,
body.layout-mode-rtl .page-wrapper .content table thead th.dt-center,
body.layout-mode-rtl .page-wrapper .content table.dataTable thead th.text-center,
body.layout-mode-rtl .page-wrapper .content table.dataTable thead th.col-actions,
body.layout-mode-rtl .page-wrapper .content table.dataTable thead th.col-toggle,
body.layout-mode-rtl .page-wrapper .content table.dataTable thead th.dt-center {
    text-align: center !important;
}

.people-list-card table.dataTable tbody td,
.parents-list-card table.dataTable tbody td,
.students-list-card table.dataTable tbody td {
    padding: 17px 24px;
    color: #263764;
    background: #fff;
    border-bottom: 1px solid #e7edf7;
    vertical-align: middle;
}

.people-list-card table.table-striped > tbody > tr:nth-of-type(odd) > *,
.parents-list-card table.table-striped > tbody > tr:nth-of-type(odd) > *,
.students-list-card table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fff;
    background: #fff;
}

.people-list-card .dataTables_length,
.people-list-card .dataTables_filter,
.parents-list-card .dataTables_length,
.parents-list-card .dataTables_filter,
.students-list-card .dataTables_length,
.students-list-card .dataTables_filter {
    padding: 14px 24px;
    color: #425078;
}

.people-list-card .table-row-collapse-toggle,
.parents-list-card .table-row-collapse-toggle,
.students-list-card .table-row-collapse-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #253864 !important;
    background: #f2f5fb !important;
    border: 0 !important;
    border-radius: 50% !important;
}

.people-list-card .school-table-action,
.parents-list-card .school-table-action,
.students-list-card .school-table-action {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #253864 !important;
    background: #f6f8fc !important;
    border-radius: 9px !important;
}

.teachers-page-shell {
    display: grid;
    gap: 0;
}

/* Shared list-table shell. Use <x-admin.table-card> for new admin and operations lists. */
.school-list-page {
    display: grid;
    gap: 0;
}

.school-list-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--school-shell-border, #dfe6f3);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.school-list-toolbar {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) auto minmax(260px, 0.9fr);
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #dfe6f3;
}

.school-list-toolbar__length,
.school-list-toolbar__filters,
.school-list-toolbar__search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.school-list-toolbar__filters { justify-content: center; }
.school-list-toolbar__search { justify-content: flex-end; }

.school-list-toolbar__length span {
    color: #425078;
    font-size: 14px;
    white-space: nowrap;
}

.school-list-control,
.school-list-search {
    min-height: 42px;
    color: #13234f;
    background: #fff;
    border: 1px solid #dfe6f3;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
}

.school-list-control { padding: 0 14px; }
.school-list-control--select { width: 86px; min-width: 86px; flex: 0 0 86px; }

.school-list-search {
    width: min(280px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.school-list-search input {
    width: 100%;
    min-width: 0;
    color: #13234f;
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 500;
}

.school-list-search input::placeholder { color: #8490ad; }
.school-list-search i { color: #6d7da4; font-size: 18px; }

.school-list-card .datatable-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.school-list-card .datatable-container {
    overflow: hidden !important;
    border: 0;
    border-radius: 0;
}

.school-list-card table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed;
}

.school-list-card table.dataTable thead th {
    padding: 16px 24px;
    color: var(--school-shell-ink, #081744);
    background: #f8fafc;
    border-bottom: 1px solid #dfe6f3;
    font-size: 13px;
    font-weight: 850;
    text-transform: none;
    white-space: nowrap;
}

.school-list-card table.dataTable tbody td {
    padding: 17px 24px;
    color: #263764;
    border-bottom: 1px solid #e7edf7;
    background: #fff;
    font-size: 14px;
    vertical-align: middle;
}

.school-list-card table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fff;
    background: #fff;
}

.school-list-card .dataTables_wrapper .dataTables_length,
.school-list-card .dataTables_wrapper .dataTables_filter { display: none !important; }

.school-list-card .dataTables_wrapper .dataTables_info,
.school-list-card .dataTables_wrapper .dataTables_paginate {
    padding: 16px 24px !important;
    border-top: 1px solid #e7edf7;
    color: #425078;
    font-size: 14px;
}

.school-list-card .dataTables_wrapper .paginate_button {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 4px !important;
    color: #263764 !important;
    background: #fff !important;
    border: 1px solid #dfe6f3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.school-list-card .dataTables_wrapper .paginate_button.current {
    color: #fff !important;
    background: #4353ee !important;
    border-color: #4353ee !important;
    box-shadow: 0 10px 20px rgba(67, 83, 238, 0.22) !important;
}

/* DataTables uses text triangles by default; draw the sort arrows with CSS so no font glyph is required. */
.datatable-container table.dataTable thead > tr > th.sorting::before,
.datatable-container table.dataTable thead > tr > th.sorting_asc::before,
.datatable-container table.dataTable thead > tr > th.sorting_desc::before,
.datatable-container table.dataTable thead > tr > td.sorting::before,
.datatable-container table.dataTable thead > tr > td.sorting_asc::before,
.datatable-container table.dataTable thead > tr > td.sorting_desc::before {
    right: 10px;
    bottom: calc(50% + 2px);
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    border-left: 4px solid transparent;
    content: "";
    font-size: 0;
}

.datatable-container table.dataTable thead > tr > th.sorting::after,
.datatable-container table.dataTable thead > tr > th.sorting_asc::after,
.datatable-container table.dataTable thead > tr > th.sorting_desc::after,
.datatable-container table.dataTable thead > tr > td.sorting::after,
.datatable-container table.dataTable thead > tr > td.sorting_asc::after,
.datatable-container table.dataTable thead > tr > td.sorting_desc::after {
    right: 10px;
    top: calc(50% + 2px);
    width: 0;
    height: 0;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    font-size: 0;
}

.teachers-table-card,
.people-list-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.teachers-table-toolbar {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) auto minmax(260px, 0.9fr);
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #dfe6f3;
}

.teachers-table-toolbar__length,
.teachers-table-toolbar__filters,
.teachers-table-toolbar__search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.teachers-table-toolbar__filters {
    justify-content: center;
}

.teachers-table-toolbar__search {
    justify-content: flex-end;
}

.teachers-table-toolbar__length span {
    color: #425078;
    font-size: 14px;
    white-space: nowrap;
}

.teachers-control,
.teachers-search {
    min-height: 42px;
    color: #13234f;
    background: #fff;
    border: 1px solid #dfe6f3;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
}

.teachers-control {
    padding: 0 14px;
}

.teachers-control--select {
    width: 86px;
    min-width: 86px;
    flex: 0 0 86px;
}

.teachers-search {
    width: min(280px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.teachers-search input {
    width: 100%;
    min-width: 0;
    color: #13234f;
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 500;
}

.teachers-search input::placeholder {
    color: #8490ad;
}

.teachers-search i {
    color: #6d7da4;
    font-size: 18px;
}

.teachers-table-card .datatable-shell,
.people-list-card .datatable-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.teachers-table-card .datatable-shell .card-body,
.people-list-card .datatable-shell .card-body {
    padding: 0 !important;
}

.teachers-table-card .datatable-container,
.people-list-card .datatable-container {
    overflow: hidden !important;
    border: 0;
    border-radius: 0;
}

.teachers-table-card table.dataTable,
.people-list-card table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed;
}

.teachers-table-card table.dataTable thead th,
.people-list-card table.dataTable thead th {
    padding: 16px 24px;
    color: var(--school-shell-ink);
    background: #f8fafc;
    border-bottom: 1px solid #dfe6f3;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.teachers-table-card table.dataTable tbody td,
.people-list-card table.dataTable tbody td {
    padding: 17px 24px;
    color: #263764;
    border-bottom: 1px solid #e7edf7;
    background: #fff;
    font-size: 14px;
    vertical-align: middle;
}

.teachers-table-card table.table-striped > tbody > tr:nth-of-type(odd) > *,
.people-list-card table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fff;
    background: #fff;
}

.teachers-table-card .dataTables_wrapper .dataTables_length,
.teachers-table-card .dataTables_wrapper .dataTables_filter,
.people-list-card .dataTables_wrapper .dataTables_length,
.people-list-card .dataTables_wrapper .dataTables_filter {
    display: none !important;
}

.teachers-table-card .dataTables_wrapper .dataTables_info,
.teachers-table-card .dataTables_wrapper .dataTables_paginate,
.people-list-card .dataTables_wrapper .dataTables_info,
.people-list-card .dataTables_wrapper .dataTables_paginate {
    padding: 16px 24px !important;
    border-top: 1px solid #e7edf7;
    color: #425078;
    font-size: 14px;
}

.teachers-table-card .dataTables_wrapper .paginate_button,
.people-list-card .dataTables_wrapper .paginate_button {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 4px !important;
    color: #263764 !important;
    background: #fff !important;
    border: 1px solid #dfe6f3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.teachers-table-card .dataTables_wrapper .paginate_button.current,
.people-list-card .dataTables_wrapper .paginate_button.current {
    color: #fff !important;
    background: #4353ee !important;
    border-color: #4353ee !important;
    box-shadow: 0 10px 20px rgba(67, 83, 238, 0.22) !important;
}

.school-table-actions {
    gap: 8px !important;
}

.school-table-action {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #253864 !important;
    border: 1px solid #e6ecf6 !important;
    border-radius: 9px !important;
    background: #f6f8fc !important;
}

.school-table-action--view {
    color: #2563eb !important;
    border-color: #dbe6ff !important;
    background: #eef4ff !important;
}

.school-table-action--edit {
    color: #16a34a !important;
    border-color: #d7f2df !important;
    background: #eefaf2 !important;
}

.school-table-action--delete {
    color: #dc2626 !important;
    border-color: #ffd5d5 !important;
    background: #fff1f1 !important;
}

.school-table-action i {
    font-size: 15px;
    line-height: 1;
}

.table-row-collapse-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #253864 !important;
    background: #f2f5fb !important;
    border: 0 !important;
    border-radius: 50% !important;
}

.table-row-collapse-toggle i {
    font-size: 16px;
    line-height: 1;
}

.school-teacher-summary {
    gap: 12px;
}

.school-teacher-summary .table-row-summary__content {
    margin-left: 0 !important;
    min-width: 0;
}

.school-teacher-summary .table-row-summary__avatar-image {
    width: 42px;
    height: 42px;
    border: 0;
}

.school-teacher-summary .table-row-summary__name {
    color: var(--school-shell-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.school-teacher-summary .table-row-summary__meta {
    margin-top: 4px;
    color: #53617f;
    font-size: 12px;
}

.school-shell-notification-dropdown {
    width: min(420px, calc(100vw - 28px));
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #dfe6f3;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(21, 38, 76, 0.16);
}

.school-shell-notification-dropdown__header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 18px 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    border-bottom: 1px solid #e7edf7;
}

.school-shell-notification-dropdown__title {
    margin: 0;
    color: #081744;
    font-size: 16px;
    font-weight: 850;
}

.school-shell-notification-dropdown__body {
    max-height: 420px;
    overflow: auto;
    padding: 8px 0;
}

.school-shell-notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    color: #13234f;
    text-decoration: none;
    border-bottom: 1px solid #eef2f8;
}

.school-shell-notification-item:hover {
    background: #f8fbff;
}

body.layout-mode-rtl .school-shell-notification-item {
    flex-direction: row-reverse;
    text-align: right;
}

body.layout-mode-rtl .school-shell-notification-dropdown__header .d-flex {
    flex-direction: row-reverse;
}

.school-shell-notification-item__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4f64f5;
    background: #eef4ff;
    border-radius: 14px;
}

.school-shell-notification-item__content {
    min-width: 0;
    flex: 1 1 auto;
}

.school-shell-notification-item__title {
    margin-bottom: 4px;
    color: #081744;
    font-size: 14px;
    font-weight: 800;
}

.school-shell-notification-item__message {
    color: #53617f;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.school-shell-notification-item__time {
    margin-top: 6px;
    color: #8a97b6;
    font-size: 12px;
}

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

    .school-list-toolbar__filters,
    .school-list-toolbar__search {
        justify-content: flex-start;
    }

    .teachers-table-toolbar {
        grid-template-columns: 1fr;
    }

    .teachers-table-toolbar__filters,
    .teachers-table-toolbar__search {
        justify-content: flex-start;
    }
}

.people-view-page .card {
    overflow: hidden;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.people-view-page .card-header {
    padding: 16px 22px;
    background: #fff !important;
    border-bottom: 1px solid #e7edf7;
}

.people-view-page .card-body {
    padding: 22px;
}

.people-view-page .avatar-xxl {
    width: 92px;
    height: 92px;
    box-shadow: 0 16px 32px rgba(21, 38, 76, 0.08);
}

.people-view-page .bg-light,
.people-view-page .rounded.bg-light {
    background: #f8fafc !important;
    border: 1px solid #e7edf7;
    border-radius: 12px !important;
}

/* Shared admin surfaces */
.page-wrapper .content > .card,
.admin-design-page > .card,
.admin-design-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.page-wrapper .content > .card > .card-header,
.admin-design-card > .card-header {
    min-height: 68px;
    padding: 16px 22px;
    background: #fff !important;
    border-bottom: 1px solid #e7edf7;
}

.page-wrapper .content > .card > .card-header h4,
.page-wrapper .content > .card > .card-header h5,
.admin-design-card > .card-header h4,
.admin-design-card > .card-header h5 {
    color: var(--school-shell-ink);
    font-weight: 850;
}

.page-wrapper .content > .card > .card-body,
.admin-design-card > .card-body {
    padding: 22px 24px;
}

.page-wrapper .content > .card > .card-body.p-0,
.page-wrapper .content > .card > .card-body.pt-0,
.page-wrapper .content > .card > .card-body.py-3 {
    padding: 0 !important;
}

.page-wrapper .content .table-responsive {
    border-radius: 0;
}

.page-wrapper .content .table:not(.dataTable) {
    margin-bottom: 0;
}

.page-wrapper .content .table:not(.dataTable) thead th {
    padding: 16px 20px;
    color: var(--school-shell-ink);
    background: #f8fafc !important;
    border-bottom: 1px solid #dfe6f3;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.page-wrapper .content .table:not(.dataTable) tbody td {
    padding: 16px 20px;
    color: #263764;
    background: #fff;
    border-bottom: 1px solid #e7edf7;
    font-size: 14px;
    vertical-align: middle;
}

.page-wrapper .content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fff;
    background: #fff;
}

.page-wrapper .content .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #fbfdff;
    background: #fbfdff;
}

.page-wrapper .content .table .btn-icon,
.page-wrapper .content .table .btn-sm.btn-light,
.page-wrapper .content .table .btn-sm.btn-outline-light,
.page-wrapper .content .table .school-table-action {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #253864 !important;
    background: #f6f8fc !important;
    border: 1px solid #e6ecf6 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.page-wrapper .content .table .btn-icon.school-table-action--view,
.page-wrapper .content .table .btn-sm.btn-light.school-table-action--view,
.page-wrapper .content .table .school-table-action.school-table-action--view {
    color: #2563eb !important;
    border-color: #dbe6ff !important;
    background: #eef4ff !important;
}

.page-wrapper .content .table .btn-icon.school-table-action--edit,
.page-wrapper .content .table .btn-sm.btn-light.school-table-action--edit,
.page-wrapper .content .table .school-table-action.school-table-action--edit {
    color: #16a34a !important;
    border-color: #d7f2df !important;
    background: #eefaf2 !important;
}

.page-wrapper .content .table .btn-icon.school-table-action--delete,
.page-wrapper .content .table .btn-sm.btn-light.school-table-action--delete,
.page-wrapper .content .table .school-table-action.school-table-action--delete {
    color: #dc2626 !important;
    border-color: #ffd5d5 !important;
    background: #fff1f1 !important;
}

.page-wrapper .content .table .btn-icon i,
.page-wrapper .content .table .school-table-action i {
    font-size: 15px;
    line-height: 1;
}

.page-wrapper .content .table .btn-sm.btn-primary,
.page-wrapper .content .table .btn-sm.btn-success,
.page-wrapper .content .table .btn-sm.btn-outline-primary,
.page-wrapper .content .table .btn-sm.btn-outline-danger {
    min-height: 32px;
    border-radius: 9px;
    font-weight: 800;
}

.page-wrapper .content .badge,
.admin-design-card .badge {
    border-radius: 9px;
    font-weight: 800;
}

.page-wrapper .content .pagination {
    gap: 8px;
}

.page-wrapper .content .page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #263764;
    border-color: #dfe6f3;
    border-radius: 10px !important;
    box-shadow: none;
}

.page-wrapper .content .page-item.active .page-link {
    color: #fff;
    background: #4353ee;
    border-color: #4353ee;
    box-shadow: 0 10px 20px rgba(67, 83, 238, 0.22);
}

.admin-lesson-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.admin-lesson-summary__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    color: #246bfe;
    background: #eef3ff;
    border-radius: 50%;
    font-size: 20px;
}

/* Keep all nested sidebar links readable when their labels wrap. */
.sidebar .sidebar-menu li.submenu > ul > li {
    margin-bottom: 3px;
}

.sidebar .sidebar-menu li.submenu > ul > li > a {
    padding: 9px 10px 9px 44px;
    line-height: 1.5;
}

.sidebar .sidebar-menu li.submenu > ul > li > a::before {
    left: 31px;
    top: 19px;
    transform: translateY(-50%);
}

.admin-lesson-summary__title {
    color: var(--school-shell-ink);
    font-weight: 850;
    line-height: 1.25;
}

.admin-lesson-summary__meta {
    margin-top: 3px;
    color: #53617f;
    font-size: 12px;
}

.page-wrapper .content form > .card,
.page-wrapper .content .card form > .card {
    overflow: hidden;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--school-shell-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 38, 76, 0.04);
}

.page-wrapper .content form > .card > .card-header,
.page-wrapper .content .card form > .card > .card-header {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 18px 20px;
    background: #fff !important;
    border-bottom: 1px solid #e7edf7;
}

.page-wrapper .content form > .card > .card-header .avatar,
.page-wrapper .content form > .card > .card-header span.bg-white.avatar,
.page-wrapper .content .card form > .card > .card-header .avatar {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #246bfe !important;
    background: #eef3ff !important;
    border: 0;
    border-radius: 50%;
}

.page-wrapper .content form > .card > .card-header h4,
.page-wrapper .content form > .card > .card-header h5,
.page-wrapper .content .card form > .card > .card-header h4,
.page-wrapper .content .card form > .card > .card-header h5 {
    color: var(--school-shell-ink) !important;
    font-size: 17px;
    font-weight: 850;
}

body.layout-mode-rtl .page-wrapper .content h1,
body.layout-mode-rtl .page-wrapper .content h2,
body.layout-mode-rtl .page-wrapper .content h3,
body.layout-mode-rtl .page-wrapper .content h4,
body.layout-mode-rtl .page-wrapper .content h5,
body.layout-mode-rtl .page-wrapper .content h6,
body.layout-mode-rtl .page-wrapper .content .card-header,
body.layout-mode-rtl .page-wrapper .content .form-label {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.layout-mode-rtl .page-wrapper .content .card-header i,
body.layout-mode-rtl .page-wrapper .content .card-header .ti {
    font-family: "tabler-icons" !important;
}

.page-wrapper .content form > .card > .card-body,
.page-wrapper .content .card form > .card > .card-body {
    padding: 22px 24px 8px;
}

.page-wrapper .content .form-control,
.page-wrapper .content .form-select {
    min-height: 42px;
    border-color: #dfe6f3;
    border-radius: 10px;
}

.page-wrapper .content .form-label {
    color: #13234f;
    font-weight: 700;
}

.page-wrapper .content .form-control:focus,
.page-wrapper .content .form-select:focus {
    border-color: #5262ff;
    box-shadow: 0 0 0 4px rgba(82, 98, 255, 0.12);
}

.page-wrapper .content .btn {
    border-radius: 9px;
    font-weight: 800;
}

.school-table-actions {
    flex-wrap: wrap;
}

.school-table-actions .school-table-action {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: #fff !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.school-table-actions .school-table-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.school-table-actions .school-table-action--view,
.school-table-actions .school-table-action.text-primary {
    color: #2563eb !important;
    background: #eef4ff !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

.school-table-actions .school-table-action--edit,
.school-table-actions .school-table-action.text-success {
    color: #16a34a !important;
    background: #eefaf2 !important;
    border-color: rgba(22, 163, 74, 0.18) !important;
}

.school-table-actions .school-table-action--delete,
.school-table-actions .school-table-action.text-danger {
    color: #dc2626 !important;
    background: #fff1f2 !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}

.school-table-actions .school-table-action--success {
    color: #0f766e !important;
    background: #ecfdf5 !important;
    border-color: rgba(13, 148, 136, 0.18) !important;
}

.school-table-actions .school-table-action--danger,
.school-table-actions .school-table-action.text-warning {
    color: #c2410c !important;
    background: #fff7ed !important;
    border-color: rgba(249, 115, 22, 0.18) !important;
}

.school-table-actions .school-table-action--dispatch,
.school-table-actions .school-table-action--join {
    color: #7c3aed !important;
    background: #f5f3ff !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
}

.school-table-actions .school-table-action--sync {
    color: #0f766e !important;
    background: #ecfdf5 !important;
    border-color: rgba(13, 148, 136, 0.18) !important;
}

.sidebar.school-shell-sidebar--rtl{
    border-radius: 16px 0px 0px 16px !important;
}

/* EDUGATE code-owned branding */
.edugate-sidebar-brand {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(18, 34, 76, 0.2);
}

.sidebar-school-card .edugate-sidebar-brand img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0 !important;
    object-fit: contain;
}

.sidebar-school-card .edugate-sidebar-brand__icon {
    display: none;
}

body.mini-sidebar:not(.expand-menu) .edugate-sidebar-brand {
    height: 48px;
    padding: 3px;
    border-radius: 12px;
}

body.mini-sidebar:not(.expand-menu) .sidebar-school-card .edugate-sidebar-brand__wordmark {
    display: none;
}

body.mini-sidebar:not(.expand-menu) .sidebar-school-card .edugate-sidebar-brand__icon {
    display: block;
}

.edugate-auth-brand {
    margin: 0 auto 24px;
}

.edugate-auth-brand img {
    width: min(100%, 310px);
    max-height: 96px;
    object-fit: contain;
}

.edugate-login-cover {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: block;
    object-fit: contain;
}

.btn-primary,
.bg-primary,
.page-wrapper .content .page-item.active .page-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--edugate-navy) 0%, var(--edugate-cyan) 100%) !important;
    border-color: var(--edugate-blue) !important;
    box-shadow: 0 8px 18px rgba(37, 107, 159, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;
    background: linear-gradient(135deg, #18274f 0%, var(--edugate-cyan-dark) 100%) !important;
    border-color: var(--edugate-navy) !important;
}

.btn-outline-primary {
    color: var(--edugate-blue) !important;
    border-color: var(--edugate-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background: var(--edugate-blue) !important;
    border-color: var(--edugate-blue) !important;
}

.text-primary,
.link-primary {
    color: var(--edugate-blue) !important;
}

.page-wrapper .content .form-control:focus,
.page-wrapper .content .form-select:focus,
.account-page .form-control:focus,
.account-page .form-select:focus {
    border-color: var(--edugate-cyan) !important;
    box-shadow: 0 0 0 4px rgba(48, 168, 224, 0.14) !important;
}

.form-check-input:checked {
    background-color: var(--edugate-blue) !important;
    border-color: var(--edugate-blue) !important;
}

/* Shared EDUGATE page banners and tabs */
.edugate-page-hero {
    color: #fff !important;
    background: linear-gradient(125deg, var(--edugate-navy) 0%, var(--edugate-blue) 58%, var(--edugate-cyan) 100%) !important;
    border: 1px solid rgba(48, 168, 224, 0.3) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 38px rgba(32, 48, 96, 0.2) !important;
}

.edugate-page-hero h1,
.edugate-page-hero h2,
.edugate-page-hero h3,
.edugate-page-hero h4,
.edugate-page-hero h5,
.edugate-page-hero h6 {
    color: #fff !important;
}

.edugate-page-hero .text-white-50,
.edugate-page-hero p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.page-wrapper .nav-pills .nav-link {
    color: var(--edugate-blue) !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    font-weight: 700;
}

.page-wrapper .nav-pills .nav-link:hover,
.page-wrapper .nav-pills .nav-link:focus {
    color: var(--edugate-navy) !important;
    background: var(--edugate-cyan-soft) !important;
    border-color: rgba(48, 168, 224, 0.24) !important;
}

.page-wrapper .nav-pills .nav-link.active,
.page-wrapper .nav-pills .show > .nav-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--edugate-navy) 0%, var(--edugate-cyan) 100%) !important;
    border-color: var(--edugate-blue) !important;
    box-shadow: 0 9px 20px rgba(37, 107, 159, 0.22) !important;
}

.page-wrapper .nav-pills .nav-link.active .badge,
.page-wrapper .nav-pills .show > .nav-link .badge {
    color: var(--edugate-blue) !important;
    background: #fff !important;
}

.page-wrapper .nav-tabs .nav-link {
    color: var(--edugate-blue) !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700;
}

.page-wrapper .nav-tabs .nav-link:hover,
.page-wrapper .nav-tabs .nav-link:focus {
    color: var(--edugate-navy) !important;
    background: var(--edugate-cyan-soft) !important;
    border-color: rgba(48, 168, 224, 0.2) !important;
}

.page-wrapper .nav-tabs .nav-link.active,
.page-wrapper .nav-tabs .nav-item.show .nav-link {
    color: var(--edugate-navy) !important;
    background: var(--edugate-cyan-soft) !important;
    border-color: rgba(48, 168, 224, 0.42) !important;
    box-shadow: inset 0 -3px 0 var(--edugate-cyan) !important;
}

.page-wrapper [class*="-tabs"] > a:hover,
.page-wrapper [class*="-tabs"] > a:focus {
    color: var(--edugate-navy) !important;
    background: var(--edugate-cyan-soft) !important;
    border-color: rgba(48, 168, 224, 0.24) !important;
}

.page-wrapper [class*="-tabs"] > a.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--edugate-navy) 0%, var(--edugate-cyan) 100%) !important;
    border-color: var(--edugate-blue) !important;
    box-shadow: 0 9px 20px rgba(37, 107, 159, 0.2) !important;
}

.page-wrapper [class*="-tabs"] > a.active > span,
.page-wrapper [class*="-tabs"] > a.active > b {
    color: var(--edugate-blue) !important;
    background: #fff !important;
}