/*
 * "Web app" polish layer for the signed-in dashboards (admin, teacher,
 * student, parent). Loaded after the template CSS so it can restyle it:
 * rounded pill sidebar with a filled active item, tactile buttons, soft
 * cards, smoother modals/dropdowns, and a mobile bottom tab bar for parents.
 * Everything is driven by --theme-color so a school's brand colour carries through.
 */
:root {
    --app-tint: #eef3f7;
    --app-tint-2: #e2ebf2;
    --app-ink: #1f2a37;
    --app-muted: #667085;
    --app-line: #e7eaf0;
    --app-radius: 12px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
    :root {
        --app-tint: color-mix(in srgb, var(--theme-color, #22577A) 9%, #ffffff);
        --app-tint-2: color-mix(in srgb, var(--theme-color, #22577A) 15%, #ffffff);
    }
}

html { -webkit-tap-highlight-color: transparent; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-x: none;
    text-rendering: optimizeLegibility;
}
.content-wrapper { background: var(--theme-bg, #f4f6fa); animation: appFadeIn .28s ease both; }
@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
    border-radius: 10px;
    font-weight: 500;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease, opacity .2s ease;
}
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }
.btn:not(:disabled):not(.disabled):not(.is-loading):active { transform: scale(.97); }
.btn:focus, .btn.focus, .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--app-tint-2) !important;
}
.btn-theme, .btn-gradient-primary, .btn-primary {
    box-shadow: 0 2px 6px -1px rgba(16, 24, 40, .18);
}
.btn-theme:hover, .btn-gradient-primary:hover, .btn-primary:hover { filter: brightness(.93); }
.btn:disabled, .btn.disabled { opacity: .55; }
.btn-group > .btn, .input-group .btn { box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Cards, forms, tables, alerts, modals, dropdowns                     */
/* ------------------------------------------------------------------ */
.card { border: 0; border-radius: 16px; box-shadow: var(--app-shadow); }
.card .card { box-shadow: none; border: 1px solid var(--app-line); }

.form-control, .custom-select, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--theme-color, #22577A);
    box-shadow: 0 0 0 .2rem var(--app-tint-2);
}
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.table-hover tbody tr { transition: background-color .15s ease; }
.alert { border-radius: 12px; border: 0; }
.badge { font-weight: 500; }
.dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); animation: appPop .16s ease both; }
.dropdown-item { border-radius: 8px; margin: 0 6px; width: auto; transition: background-color .15s ease; }
@keyframes appPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.modal.fade .modal-dialog { transform: translateY(24px) scale(.98); transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.modal.show .modal-dialog { transform: none; }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 24, 40, .25); overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--app-line); }
.jq-toast-single { border-radius: 12px !important; box-shadow: 0 10px 30px rgba(16, 24, 40, .2); }

/* ------------------------------------------------------------------ */
/* Sidebar: rounded pill items, filled active state                    */
/* ------------------------------------------------------------------ */
.sidebar { padding: .6rem 0 1.25rem; border-right: 1px solid var(--app-line); }
.sidebar .nav .nav-item {
    padding: 0 .85rem !important;
    margin: 2px 0;
    background: transparent !important;
}
.sidebar .nav .nav-item:hover { background: transparent !important; }
.sidebar .nav .nav-item .nav-link {
    padding: .72rem .9rem !important;
    border-radius: 12px;
    color: #475467;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.sidebar .nav .nav-item .nav-link:active { transform: scale(.985); }
.sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-left: 0 !important;
    width: 28px;
    text-align: left;
    color: #98a2b3;
    transition: color .18s ease;
}
.sidebar .nav .nav-item .nav-link .menu-title { font-size: .875rem; line-height: 1.25; }
.sidebar .nav .nav-item .nav-link i.menu-arrow { color: #98a2b3; font-size: 1.25rem !important; }

/* hover */
.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) > .nav-link {
    background: var(--app-tint);
    color: var(--theme-color, #22577A);
}
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-icon { color: var(--theme-color, #22577A); }

/* active: a direct page link is a solid brand-colour pill */
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link,
.sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link {
    background: var(--theme-color, #22577A);
    color: #fff;
    box-shadow: 0 8px 16px -8px var(--theme-color, #22577A);
}
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link .menu-title,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i.menu-icon,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i.menu-arrow {
    color: #fff;
}
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link .menu-title { font-weight: 600; }

/* ...a group that only contains the active page gets the soft tint instead */
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link[data-toggle="collapse"],
.sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link[data-toggle="collapse"] {
    background: var(--app-tint);
    color: var(--theme-color, #22577A);
    box-shadow: none;
}
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link[data-toggle="collapse"] .menu-title,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link[data-toggle="collapse"] i {
    color: var(--theme-color, #22577A);
}

/* sub menu */
.sidebar .nav.sub-menu { margin: .1rem 0 .5rem; padding: 0 0 0 .35rem; }
.sidebar .nav.sub-menu .nav-item { padding: 0 !important; margin: 1px 0; }
.sidebar .nav.sub-menu .nav-item .nav-link {
    padding: .55rem .85rem .55rem 2.6rem !important;
    border-radius: 10px;
    color: #667085;
    font-size: .8125rem;
}
.sidebar .nav.sub-menu .nav-item .nav-link:before {
    content: "" !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd2dc;
    left: 1.15rem;
    font-size: 0;
    transition: background-color .18s ease, transform .18s ease;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover { background: var(--app-tint); color: var(--theme-color, #22577A); }
.sidebar .nav.sub-menu .nav-item .nav-link:hover:before { background: var(--theme-color, #22577A); }
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    background: var(--app-tint-2);
    color: var(--theme-color, #22577A);
    font-weight: 600;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active:before { background: var(--theme-color, #22577A); transform: scale(1.25); }

/* main categories (views/layouts/sidebar-category.blade.php): category > module > page */
.sidebar .nav.sub-menu.group-modules { padding-left: .25rem; }
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    padding: .6rem .8rem !important;
    color: #475467;
    font-weight: 500;
}
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link:before { display: none; content: none !important; }
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link i.menu-icon {
    flex: none;
    width: 22px;
    margin: 0 !important;
    font-size: .95rem;
    color: #98a2b3;
}
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link .menu-title { font-size: .8125rem; }
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link i.menu-arrow { font-size: 1.1rem !important; }
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link:hover i.menu-icon,
.sidebar .nav.sub-menu.group-modules > .nav-item.is-current > .nav-link i.menu-icon,
.sidebar .nav.sub-menu.group-modules > .nav-item > .nav-link.active i.menu-icon { color: var(--theme-color, #22577A); }
.sidebar .nav.sub-menu.group-modules > .nav-item.is-current > .nav-link { color: var(--theme-color, #22577A); font-weight: 600; }
/* pages of a module (third level) */
.sidebar .nav.sub-menu.group-modules .sub-menu { margin: 0 0 .25rem; padding: 0 0 0 1.1rem; }
.sidebar .nav.sub-menu.group-modules .sub-menu .nav-item .nav-link { padding: .45rem .8rem .45rem 1.9rem !important; font-size: .78rem; }
.sidebar .nav.sub-menu.group-modules .sub-menu .nav-item .nav-link:before { left: .8rem; }
/* a category that holds the active page */
.sidebar .nav:not(.sub-menu) > .nav-item.nav-group.is-current > .nav-link .menu-title { font-weight: 600; }

/* collapsed (icon only) sidebar: modules inside a category stay inside its flyout, opened by click */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse .collapse {
        position: static; left: auto; width: auto; padding: 0; background: transparent; display: none;
    }
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse .collapse.show { display: block; }
}

/* collapsed (icon only) sidebar: keep the pill centred */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav .nav-item { padding: 0 .5rem !important; }
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link { padding: .75rem 0 !important; }
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon { margin: 0 auto !important; width: auto; text-align: center; }
}

/* menu search box */
.sidebar .sidebar-search .form-control { border-radius: 12px; background: #f4f6fa; border-color: transparent !important; }
.sidebar .sidebar-search .form-control:focus { background: #fff; border-color: var(--theme-color, #22577A) !important; }

/* ------------------------------------------------------------------ */
/* Mobile: app-style layout                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .sidebar-offcanvas { box-shadow: 0 0 40px rgba(16, 24, 40, .25); }
    .content-wrapper { padding: 1.1rem .9rem; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 32px; }
    body.has-tabbar .main-panel { padding-bottom: calc(68px + var(--app-safe-bottom)); }
    body.has-tabbar .footer { display: none; }
}

/* modals become bottom sheets on phones */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
    .modal.fade .modal-dialog { transform: translateY(100%); }
    .modal.show .modal-dialog { transform: none; }
    .modal-content { width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; }
    .modal-body { overflow-y: auto; }
}

/* Parent bottom tab bar */
.app-tabbar { display: none; }
@media (max-width: 991.98px) {
    .app-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--app-line);
        padding: 6px 6px calc(6px + var(--app-safe-bottom));
        box-shadow: 0 -6px 24px rgba(16, 24, 40, .06);
    }
    .app-tabbar a, .app-tabbar button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: #98a2b3;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none;
        border-radius: 12px;
        transition: color .18s ease, background-color .18s ease, transform .12s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .app-tabbar a i, .app-tabbar button i { font-size: 20px; line-height: 1; }
    .app-tabbar a:active, .app-tabbar button:active { transform: scale(.94); }
    .app-tabbar a.active { color: var(--theme-color, #22577A); background: var(--app-tint); }
    .app-tabbar a.active i { transform: translateY(-1px); }
}

/* Install-app banner */
.app-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--app-safe-bottom));
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .22);
    animation: appPop .25s ease both;
    max-width: 460px;
    margin: 0 auto;
}
.app-install-text { flex: 1; font-size: 13px; color: var(--app-ink); line-height: 1.35; }
.app-install-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: #98a2b3; padding: 0 4px; }
@media (max-width: 991.98px) {
    body.has-tabbar .app-install { bottom: calc(76px + var(--app-safe-bottom)); }
}
@media (min-width: 992px) {
    .app-install { left: auto; right: 24px; bottom: 24px; }
}