:root {
    --app-sidebar-width: 270px;
    --app-topbar-height: 70px;
}

html,
body.app-shell {
    min-height: 100%;
}

body.app-shell {
    overflow-x: hidden;
    margin: 0;
    color: var(--app-text);
    background: var(--app-background);
}

.app-shell .sidebar {
    position: fixed;
    z-index: 1040;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: var(--app-sidebar-width);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #c6d4e5 transparent;
    scrollbar-width: thin;
    padding: 0;
    color: var(--app-text);
    border-right: 1px solid var(--app-border);
    background: #fff;
    box-shadow: 8px 0 26px rgba(15, 61, 120, .08);
    transition: transform .28s ease;
}

.app-shell .sidebar::-webkit-scrollbar {
    width: 5px;
}

.app-shell .sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c6d4e5;
}

.sidebar-brand {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--app-topbar-height);
    padding: 12px 18px;
    color: var(--app-heading);
    border-bottom: 1px solid var(--app-border);
    background: #fff;
    text-decoration: none;
}

.sidebar-brand:hover {
    color: var(--app-heading);
}

.sidebar-brand-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--app-primary-light), var(--app-primary-dark));
    box-shadow: 0 7px 16px rgba(9, 105, 243, .2);
    font-size: 18px;
}

.sidebar-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

.sidebar-brand-fallback {
    line-height: 1;
}

.sidebar-brand-copy {
    min-width: 0;
}

.sidebar-brand-title {
    display: block;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand-subtitle {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sidebar-scroll {
    position: static;
    width: 100%;
    height: auto;
    flex: none;
    min-height: 0;
    overflow: visible;
    padding: 15px 11px 24px;
    scrollbar-color: #c6d4e5 transparent;
    scrollbar-width: thin;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c6d4e5;
}

.sidebar-section-label {
    padding: 11px 13px 7px;
    color: #7b8ba0;
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-shell .sidebar .nav-link,
.app-shell .sidebar .sidebar-menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 2px 0;
    padding: 10px 13px;
    color: #111827;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: .87rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.app-shell .sidebar .nav-link:hover,
.app-shell .sidebar .sidebar-menu-toggle:hover,
.app-shell .sidebar .sidebar-menu-toggle[aria-expanded="true"] {
    color: var(--app-primary-dark);
    background: var(--app-primary-soft);
}

.app-shell .sidebar .nav-link:hover {
    transform: translateX(2px);
}

.app-shell .sidebar .nav-link.active {
    color: var(--app-primary-dark);
    background: linear-gradient(90deg, #e7f2ff, #f4f9ff);
    box-shadow: inset 0 0 0 1px #c9e0ff;
}

.app-shell .sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -11px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--app-primary);
}

.app-shell .sidebar .nav-link > i:first-child,
.app-shell .sidebar .sidebar-menu-toggle .menu-label > i:first-child {
    flex: 0 0 22px;
    width: 22px;
    margin-right: 10px;
    color: var(--app-primary);
    text-align: center;
}

.app-shell .sidebar .nav-link.active > i:first-child,
.app-shell .sidebar .sidebar-menu-toggle[aria-expanded="true"] .menu-label > i:first-child {
    color: currentColor;
}

.menu-label {
    display: flex;
    align-items: center;
    min-width: 0;
}

.menu-chevron {
    margin-left: auto;
    color: #7b8ba0;
    font-size: .68rem;
    transition: transform .2s ease;
}

.sidebar-menu-toggle[aria-expanded="true"] .menu-chevron {
    transform: rotate(180deg);
}

.sidebar-submenu {
    position: relative;
    margin: 3px 0 7px;
    padding-left: 12px;
}

.sidebar-submenu::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 5px;
    left: 22px;
    width: 1px;
    background: #d8e4f1;
}

.app-shell .sidebar .sidebar-submenu .nav-link {
    min-height: 38px;
    padding: 8px 10px 8px 28px;
    font-size: .8rem;
}

.app-shell .sidebar .sidebar-submenu .nav-link > i:first-child {
    flex-basis: 18px;
    width: 18px;
    margin-right: 8px;
    font-size: .76rem;
}

.app-shell .sidebar .sidebar-menu-toggle.active-parent,
.app-shell .sidebar .sidebar-menu-toggle[aria-expanded="true"] {
    color: var(--app-heading);
    border: 1px solid #ffc168;
    background: #fffaf2;
    box-shadow: 0 5px 13px rgba(247, 144, 9, .08);
}

.app-shell .sidebar .sidebar-submenu .nav-link.active {
    color: var(--app-primary-dark);
    background: #eef2f7;
    box-shadow: none;
}

.app-shell .sidebar .sidebar-submenu .nav-link.active::before {
    display: none;
}

.menu-category-students .menu-label > i,
#studentMenu .nav-link > i { color: #1677ff !important; }

.menu-category-teachers .menu-label > i,
#teacherMenu .nav-link > i { color: #00a870 !important; }

.menu-category-fees .menu-label > i,
#feeMenu .nav-link > i { color: #c77800 !important; }

.menu-category-reports .menu-label > i,
#reportsMenu .nav-link > i { color: #6f42c1 !important; }

.menu-category-settings .menu-label > i,
#settingsMenu .nav-link > i { color: #e84c88 !important; }

.app-shell .sidebar > .sidebar-scroll > .nav-link:nth-of-type(1) > i { color: #1677ff; }
.app-shell .sidebar > .sidebar-scroll > .nav-link:nth-of-type(2) > i { color: #f79009; }

.app-shell .content-wrapper {
    min-height: 100vh;
    margin-left: var(--app-sidebar-width);
    transition: margin-left .28s ease;
}

.app-shell .topbar {
    position: sticky;
    z-index: 1025;
    top: 0;
    min-height: var(--app-topbar-height);
    margin: 0 !important;
    color: #fff;
    border: 0 !important;
    background: linear-gradient(105deg, var(--app-primary-dark), var(--app-primary), var(--app-primary-light));
    box-shadow: 0 6px 18px rgba(8, 63, 145, .16);
}

.app-shell .topbar .container-fluid {
    min-height: var(--app-topbar-height);
    padding-right: clamp(14px, 2.4vw, 30px);
    padding-left: clamp(14px, 2.4vw, 30px);
}

.app-shell .topbar .navbar-brand {
    overflow: hidden;
    max-width: min(55vw, 620px);
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    transition: background .18s ease, transform .18s ease;
}

.app-shell .icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.app-shell .user-info {
    display: flex;
    align-items: center;
    gap: 9px;
}

.app-shell .avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    font-size: .8rem;
    font-weight: 750;
}

.app-shell .user-name {
    overflow: hidden;
    max-width: 230px;
    color: rgba(255, 255, 255, .9);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: clamp(18px, 2.4vw, 32px);
}

.app-shell .card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.app-shell .card-header {
    padding: 14px 18px;
    color: var(--app-primary-deep);
    border-bottom: 1px solid var(--app-border);
    background: linear-gradient(90deg, #faf9ff, #fff);
    font-weight: 700;
}

.app-shell .form-control,
.app-shell .form-select {
    border-color: #ddd7ec;
    border-radius: 10px;
    box-shadow: none;
}

.app-shell .form-control:focus,
.app-shell .form-select:focus {
    border-color: var(--app-primary-light);
    box-shadow: 0 0 0 4px rgba(9, 105, 243, .12);
}

.app-shell .btn {
    border-radius: 9px;
    font-weight: 600;
}

.app-shell .btn-primary {
    color: #fff;
    border-color: var(--app-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark));
    box-shadow: 0 7px 16px rgba(9, 105, 243, .17);
}

.app-shell .btn-primary:hover,
.app-shell .btn-primary:focus {
    color: #fff;
    border-color: var(--app-primary-dark);
    background: linear-gradient(135deg, var(--app-primary), #0647aa);
}

.app-shell .btn-info {
    color: var(--app-primary-dark);
    border-color: #d8d0f5;
    background: var(--app-primary-soft);
}

.app-shell .btn-info:hover,
.app-shell .btn-info:focus {
    color: var(--app-primary-deep);
    border-color: #c7bbf1;
    background: #e9e4ff;
}

.app-shell .btn-warning {
    color: #fff;
    border-color: #7d56dc;
    background: #7d56dc;
}

.app-shell .btn-secondary {
    color: #565061;
    border-color: #ded9e8;
    background: #f3f1f6;
}

.app-shell .text-primary {
    color: var(--app-primary) !important;
}

.app-shell .table:not(.fee-table) thead th {
    color: var(--app-primary-deep);
    border-bottom-color: #dcd5ee;
    background: var(--app-primary-soft);
    vertical-align: middle;
}

.app-shell .table:not(.fee-table) tbody tr:hover > * {
    background-color: #f8f6ff;
}

.app-shell a:not(.nav-link):not(.navbar-brand):not(.sidebar-brand):not(.btn):not(.fee-btn) {
    color: var(--app-primary);
}

.app-shell .overlay {
    position: fixed;
    z-index: 1035;
    inset: 0;
    display: block;
    visibility: hidden;
    background: rgba(5, 24, 52, .5);
    opacity: 0;
    transition: visibility .25s ease, opacity .25s ease;
}

body.sidebar-collapsed .sidebar {
    transform: translateX(calc(-1 * var(--app-sidebar-width)));
}

body.sidebar-collapsed .content-wrapper {
    margin-left: 0;
}

.app-shell.no-sidebar .content-wrapper {
    margin-left: 0;
}

/* Shared components for pages that use the application shell. */
.app-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.app-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--app-primary);
    border-radius: 11px;
    background: var(--app-primary-soft);
}

.app-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 16px;
    color: #fff;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark));
    box-shadow: 0 8px 18px rgba(9, 105, 243, .2);
    font-weight: 650;
    text-decoration: none;
}

.app-btn-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), #0647aa);
}

.shared-error {
    max-width: 720px;
    margin: clamp(30px, 8vh, 90px) auto;
    padding: clamp(28px, 5vw, 54px);
    text-align: center;
}

.shared-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    color: #fff;
    border-radius: 20px;
    background: linear-gradient(135deg, #e45868, var(--app-danger));
    box-shadow: 0 12px 24px rgba(207, 54, 72, .2);
    font-size: 1.65rem;
}

.shared-error-label {
    margin: 0 0 5px;
    color: var(--app-danger);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shared-error h1 {
    margin: 0;
    color: var(--app-primary-deep);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 750;
}

.shared-error-message {
    max-width: 560px;
    margin: 12px auto 22px;
    color: var(--app-muted);
}

.shared-error-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 22px;
    padding: 10px 14px;
    color: #5b536a;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #faf9fd;
    font-size: .8rem;
}

.shared-error-request i {
    color: var(--app-primary);
}

.app-shell :focus-visible {
    outline: 3px solid rgba(9, 105, 243, .35);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .app-shell .sidebar {
        width: min(86vw, var(--app-sidebar-width));
        transform: translateX(-105%);
    }

    .app-shell .content-wrapper,
    body.sidebar-collapsed .content-wrapper {
        margin-left: 0;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .overlay {
        visibility: visible;
        opacity: 1;
    }

    .app-content {
        padding: 18px 14px 26px;
    }
}

@media (max-width: 575.98px) {
    .app-shell .topbar .navbar-brand {
        max-width: 48vw;
        font-size: .9rem;
    }

    .app-shell .topbar .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-shell .avatar {
        width: 35px;
        height: 35px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .sidebar,
    .app-shell .content-wrapper,
    .app-shell .overlay,
    .app-shell .nav-link,
    .app-shell .icon-btn,
    .menu-chevron {
        transition: none !important;
    }
}