/* =========================================================
   BKSchoolLAA
   MAIN SCHOOL DESIGN SYSTEM
========================================================= */

:root {
    --school-primary: #183b66;
    --school-primary-dark: #102b4b;
    --school-primary-soft: #edf3f8;
    --school-secondary: #2f6fa8;
    --school-accent: #d6a84b;
    --school-bg: #f4f7fb;
    --school-surface: #ffffff;
    --school-border: #dfe7f1;
    --school-text: #182433;
    --school-muted: #6c7a89;
    --school-danger: #b93b46;
    --school-success: #257a55;
    --school-warning: #b78021;
    --school-shadow: 0 18px 50px rgba(26, 50, 80, .08);
    --school-radius-sm: 10px;
    --school-radius: 15px;
    --school-radius-lg: 22px;
    --school-container: 1540px;
    --school-header-height: 76px;
}


/* =========================================================
   RESET
========================================================= */

html {
    position: relative;
    min-height: 100%;
    font-size: 17px;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    direction: rtl;
    background: linear-gradient( 180deg, #f8fafc 0%, var(--school-bg) 100% );
    color: var(--school-text);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.school-container {
    width: min( var(--school-container), calc(100% - 38px) );
    margin-inline: auto;
}


/* =========================================================
   TOP SECURITY BAR
========================================================= */

.school-topbar {
    min-height: 34px;
    display: flex;
    align-items: center;
    background: linear-gradient( 90deg, #102b4b, #163d68 );
    color: rgba(255, 255, 255, .80);
    font-size: .72rem;
}

.school-topbar-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.school-topbar-right,
.school-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.school-topbar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.school-topbar i {
    color: #e0b85f;
}

.school-topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .20);
}


/* =========================================================
   HEADER
========================================================= */

.school-header {
    position: relative;
    z-index: 1000;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--school-border);
    box-shadow: 0 6px 24px rgba(23, 48, 76, .055);
}

.school-navbar {
    min-height: var(--school-header-height);
}

.school-navbar-inner {
    min-height: var(--school-header-height);
    display: flex;
    align-items: center;
    gap: 28px;
}


/* =========================================================
   BRAND
========================================================= */

.school-brand-main {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

    .school-brand-main:hover {
        text-decoration: none;
    }

.school-brand-logo {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient( 145deg, var(--school-primary), var(--school-secondary) );
    color: #fff;
    font-size: 21px;
    box-shadow: 0 9px 23px rgba(24, 59, 102, .17);
}

.school-brand-copy {
    display: block;
}

    .school-brand-copy strong {
        display: block;
        margin: 0;
        color: var(--school-primary-dark);
        font-size: .98rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .school-brand-copy small {
        display: block;
        margin-top: 3px;
        color: #7c8997;
        font-size: .67rem;
        white-space: nowrap;
    }


/* =========================================================
   NAVIGATION CONTAINER
========================================================= */

.school-navbar-collapse {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}


/* =========================================================
   MAIN MENU
========================================================= */

.school-main-menu {
    display: flex;
    align-items: center;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .school-main-menu li {
        margin: 0;
        padding: 0;
    }

    .school-main-menu a {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border-radius: 10px;
        color: #47586b;
        text-decoration: none;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
    }

        .school-main-menu a i {
            color: #8190a0;
            font-size: .9rem;
            transition: color .18s ease;
        }

        .school-main-menu a:hover {
            color: var(--school-primary);
            background: rgba(47, 111, 168, .065);
        }

            .school-main-menu a:hover i {
                color: var(--school-secondary);
            }


/* =========================================================
   NAVBAR ACCOUNT
========================================================= */

.school-navbar-account {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}


/* =========================================================
   LOGIN PARTIAL
========================================================= */

.school-navbar-user {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.school-auth-actions {
    display: flex;
    align-items: center;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.school-login-link {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 19px;
    border-radius: 11px;
    background: linear-gradient( 135deg, var(--school-primary), var(--school-secondary) );
    color: #fff;
    text-decoration: none;
    font-size: .79rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(24, 59, 102, .15);
}

    .school-login-link:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 11px 27px rgba(24, 59, 102, .21);
    }


/* =========================================================
   LOGGED USER BUTTON
========================================================= */

.school-user-dropdown {
    position: relative;
}

.school-user-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 11px;
    border: 1px solid var(--school-border);
    border-radius: 13px;
    background: #fff;
    color: var(--school-text);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .school-user-button:hover {
        border-color: #cdd9e5;
        box-shadow: 0 8px 22px rgba(24, 59, 102, .07);
    }

    .school-user-button::after {
        display: none;
    }

.school-user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient( 135deg, rgba(24, 59, 102, .10), rgba(47, 111, 168, .10) );
    color: var(--school-primary);
    font-size: 16px;
}

.school-user-info {
    min-width: 90px;
    text-align: right;
    line-height: 1.3;
}

    .school-user-info small {
        display: block;
        margin-bottom: 2px;
        color: var(--school-muted);
        font-size: .61rem;
    }

    .school-user-info strong {
        display: block;
        max-width: 155px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--school-text);
        font-size: .74rem;
        font-weight: 800;
    }

.school-user-chevron {
    margin-inline-start: 3px;
    color: #8996a4;
    font-size: .7rem;
}


/* =========================================================
   USER DROPDOWN
========================================================= */

.school-user-menu {
    width: 285px;
    min-width: 285px;
    margin-top: 10px !important;
    padding: 9px;
    direction: rtl;
    border: 1px solid var(--school-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(22, 43, 68, .14);
}

.school-user-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
}

    .school-user-menu-head > span {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: var(--school-primary-soft);
        color: var(--school-primary);
    }

    .school-user-menu-head strong {
        display: block;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--school-text);
        font-size: .78rem;
    }

    .school-user-menu-head small {
        display: block;
        max-width: 190px;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--school-muted);
        font-size: .65rem;
    }

.school-user-menu .dropdown-divider {
    margin: 5px 0;
    border-color: #edf1f5;
}

.school-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 9px;
    color: #4b5c6d;
    font-size: .76rem;
    font-weight: 650;
    text-align: right;
}

    .school-user-menu .dropdown-item i {
        width: 21px;
        color: #81909f;
        text-align: center;
    }

    .school-user-menu .dropdown-item:hover {
        color: var(--school-primary);
        background: rgba(47, 111, 168, .06);
    }

.school-logout-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: right;
}

    .school-logout-link:hover {
        color: var(--school-danger) !important;
        background: rgba(185, 59, 70, .06) !important;
    }


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.school-navbar-toggle {
    width: 43px;
    height: 41px;
    display: none;
    place-items: center;
    margin-inline-start: auto;
    padding: 0;
    border: 1px solid var(--school-border);
    border-radius: 11px;
    background: #fff;
    color: var(--school-primary);
    font-size: 21px;
    cursor: pointer;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.school-main {
    flex: 1 0 auto;
    width: 100%;
    min-height: 500px;
}


/* =========================================================
   FOOTER
========================================================= */

.school-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--school-border);
    background: #fff;
}

.school-footer-main {
    min-height: 125px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 0;
}

.school-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.school-footer-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--school-primary-soft);
    color: var(--school-primary);
    font-size: 20px;
}

.school-footer-brand strong {
    display: block;
    color: var(--school-primary-dark);
    font-size: .82rem;
}

.school-footer-brand p {
    max-width: 480px;
    margin: 5px 0 0;
    color: var(--school-muted);
    line-height: 1.7;
    font-size: .7rem;
}

.school-footer-security {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

    .school-footer-security span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border: 1px solid #e5ebf1;
        border-radius: 9px;
        background: #fafbfd;
        color: #6f7d8a;
        font-size: .68rem;
    }

    .school-footer-security i {
        color: var(--school-success);
    }

.school-footer-bottom {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #edf1f5;
    color: #8793a0;
    font-size: .66rem;
}


/* =========================================================
   BOOTSTRAP / FORMS
========================================================= */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .18rem rgba(47, 111, 168, .13);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1101px) {

    /*
       Bootstrap .collapse يخفي العنصر عندما لا يحتوي show.
       في Desktop يجب أن تبقى القائمة ظاهرة دائماً.
    */

    #schoolMainNav.collapse {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
    }

    #schoolMainNav.collapsing {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        transition: none !important;
    }

    .school-navbar-inner {
        flex-wrap: nowrap;
    }

    .school-navbar-collapse {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        min-width: 0;
    }

    .school-main-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .school-main-menu li {
            width: auto;
        }

        .school-main-menu a {
            width: auto;
        }

    .school-navbar-account {
        display: flex;
        margin-inline-start: auto;
    }

    .school-navbar-toggle {
        display: none !important;
    }
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 1100px) {

    .school-navbar-inner {
        min-height: 68px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .school-navbar-toggle {
        display: grid !important;
        place-items: center;
        margin-inline-start: auto;
    }

    #schoolMainNav.school-navbar-collapse {
        flex: 0 0 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 0 14px;
        border-top: 1px solid #edf1f5;
    }

    #schoolMainNav.collapse:not(.show) {
        display: none !important;
    }

    #schoolMainNav.collapse.show {
        display: flex !important;
    }

    #schoolMainNav.collapsing {
        display: flex !important;
        height: 0;
        overflow: hidden;
    }

    .school-main-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

        .school-main-menu li {
            width: 100%;
        }

        .school-main-menu a {
            width: 100%;
            min-height: 44px;
            justify-content: flex-start;
            padding: 0 14px;
            border-radius: 9px;
        }

    .school-navbar-account {
        width: 100%;
        margin-inline-start: 0;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--school-border);
    }

    .school-navbar-user,
    .school-navbar-user > li,
    .school-auth-actions {
        width: 100%;
    }

    .school-login-link,
    .school-user-button {
        width: 100%;
    }

    .school-user-menu {
        width: 100%;
        min-width: 100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    html {
        font-size: 16px;
    }

    .school-container {
        width: calc(100% - 20px);
    }

    .school-topbar-left {
        display: none;
    }

    .school-topbar-inner {
        justify-content: center;
    }

    .school-navbar {
        min-height: 66px;
    }

    .school-navbar-inner {
        min-height: 66px;
        gap: 10px;
    }

    .school-brand-main {
        gap: 9px;
    }

    .school-brand-logo {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        border-radius: 12px;
    }

    .school-brand-copy strong {
        font-size: .9rem;
    }

    .school-brand-copy small {
        display: none;
    }

    .school-navbar-toggle {
        width: 42px;
        height: 40px;
    }

    .school-footer-main {
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 0;
    }

    .school-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 14px 0;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .school-container {
        width: calc(100% - 14px);
    }

    .school-brand-copy strong {
        font-size: .84rem;
    }

    .school-navbar-toggle {
        width: 39px;
        height: 38px;
    }

    .school-main-menu a {
        font-size: .76rem;
    }
}


/* =========================================================
   LARGE / 2K
========================================================= */

@media (min-width: 2200px) {

    :root {
        --school-container: 1900px;
    }

    html {
        font-size: 17px;
    }
}


/* =========================================================
   4K / 8K
========================================================= */

@media (min-width: 3500px) {

    :root {
        --school-container: 2600px;
    }

    html {
        font-size: 19px;
    }
}
/* =========================================================
   HOME WELCOME PAGE
========================================================= */

.school-welcome-page {
    position: relative;
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 20px 55px;
    overflow: hidden;
    background: radial-gradient( circle at 15% 20%, rgba(47, 111, 168, .08), transparent 30% ), radial-gradient( circle at 85% 80%, rgba(214, 168, 75, .07), transparent 32% ), linear-gradient( 180deg, #f9fbfd 0%, #f3f6fa 100% );
}


/* =========================================================
   MAIN CARD
========================================================= */

.school-welcome-card {
    position: relative;
    width: min(1180px, 100%);
    padding: 52px 65px 42px;
    overflow: hidden;
    border: 1px solid rgba(214, 168, 75, .35);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 80px rgba(26, 50, 80, .11);
    backdrop-filter: blur(14px);
    text-align: center;
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.welcome-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.orb-one {
    width: 240px;
    height: 240px;
    top: -120px;
    right: -90px;
    background: radial-gradient( circle, rgba(47, 111, 168, .11), transparent 70% );
}

.orb-two {
    width: 280px;
    height: 280px;
    left: -140px;
    bottom: -150px;
    background: radial-gradient( circle, rgba(214, 168, 75, .10), transparent 70% );
}

.orb-three {
    width: 170px;
    height: 170px;
    left: 15%;
    top: 12%;
    background: radial-gradient( circle, rgba(24, 59, 102, .035), transparent 70% );
}


/* =========================================================
   BRAND AREA
========================================================= */

.welcome-brand-area {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   CSS LOGO
========================================================= */

.welcome-logo-wrap {
    position: relative;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
}

.welcome-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    border: 1px solid rgba(214, 168, 75, .48);
    transform: rotate(8deg);
}

    .welcome-logo-ring.ring-two {
        inset: 9px;
        transform: rotate(-7deg);
        border-color: rgba(47, 111, 168, .16);
    }

.welcome-logo-core {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 24px;
    background: linear-gradient( 145deg, #102b4b, #183b66 55%, #2f6fa8 );
    color: #fff;
    box-shadow: 0 18px 36px rgba(24, 59, 102, .22);
}

    .welcome-logo-core > i {
        margin-bottom: 4px;
        color: #f0cb78;
        font-size: 25px;
    }

.logo-short {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: 2px;
}


/* =========================================================
   BRAND LINE
========================================================= */

.welcome-brand-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 22px;
    color: #b58430;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: 3px;
}

    .welcome-brand-line span {
        width: 46px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(214, 168, 75, .75) );
    }

        .welcome-brand-line span:last-child {
            background: linear-gradient( 90deg, rgba(214, 168, 75, .75), transparent );
        }


/* =========================================================
   TITLE
========================================================= */

.welcome-title-area {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
}

.welcome-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--school-secondary);
    font-size: .78rem;
    font-weight: 800;
}

.welcome-title-area h1 {
    margin: 0;
    color: var(--school-primary-dark);
    font-size: clamp(2.1rem, 4vw, 4.1rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.6px;
}

    .welcome-title-area h1 span {
        display: block;
        color: var(--school-primary);
    }

.welcome-title-area h2 {
    margin: 14px 0 0;
    color: #31465e;
    font-size: clamp(1.05rem, 2vw, 1.55rem);
    font-weight: 700;
}

.welcome-title-area p {
    max-width: 780px;
    margin: 22px auto 0;
    color: var(--school-muted);
    font-size: .95rem;
    line-height: 2;
}


/* =========================================================
   DIVIDER
========================================================= */

.welcome-divider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px auto;
    max-width: 280px;
}

    .welcome-divider span {
        flex: 1;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(214, 168, 75, .55) );
    }

        .welcome-divider span:last-child {
            background: linear-gradient( 90deg, rgba(214, 168, 75, .55), transparent );
        }

    .welcome-divider i {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(214, 168, 75, .11);
        color: #b58430;
        font-size: 13px;
    }


/* =========================================================
   ACTIONS
========================================================= */

.welcome-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.welcome-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border-radius: 13px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
}

.welcome-btn-primary {
    color: #fff;
    background: linear-gradient( 135deg, var(--school-primary), var(--school-secondary) );
    box-shadow: 0 13px 28px rgba(24, 59, 102, .18);
}

    .welcome-btn-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(24, 59, 102, .24);
    }

.welcome-btn-secondary {
    border: 1px solid var(--school-border);
    background: #fff;
    color: var(--school-primary);
}

    .welcome-btn-secondary:hover {
        color: var(--school-primary-dark);
        background: #f7f9fc;
        border-color: #ccd8e4;
    }


/* =========================================================
   MINI FEATURES
========================================================= */

.welcome-mini-features {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid #edf1f5;
}

.welcome-feature {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid #e7edf4;
    border-radius: 14px;
    background: linear-gradient( 180deg, #fff, #fbfcfe );
    text-align: right;
}

    .welcome-feature > span {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: rgba(47, 111, 168, .08);
        color: var(--school-secondary);
        font-size: 17px;
    }

    .welcome-feature strong {
        display: block;
        color: var(--school-text);
        font-size: .77rem;
    }

    .welcome-feature small {
        display: block;
        margin-top: 2px;
        color: var(--school-muted);
        font-size: .66rem;
        line-height: 1.5;
    }


/* =========================================================
   FOOTER LINE
========================================================= */

.welcome-footer-line {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 28px;
}

    .welcome-footer-line > span {
        flex: 1;
        max-width: 250px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(214, 168, 75, .4) );
    }

        .welcome-footer-line > span:last-child {
            background: linear-gradient( 90deg, rgba(214, 168, 75, .4), transparent );
        }

    .welcome-footer-line small {
        color: #9c7b49;
        font-size: .67rem;
        white-space: nowrap;
    }

    .welcome-footer-line i {
        margin-left: 5px;
        color: #c69238;
        font-size: 7px;
    }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .school-welcome-card {
        padding: 45px 35px 35px;
    }

    .welcome-mini-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .school-welcome-page {
        padding: 18px 10px 30px;
    }

    .school-welcome-card {
        padding: 32px 18px 28px;
        border-radius: 21px;
    }

    .welcome-logo-wrap {
        width: 100px;
        height: 100px;
        margin-bottom: 18px;
    }

    .welcome-logo-core {
        width: 76px;
        height: 76px;
        border-radius: 21px;
    }

    .welcome-brand-line {
        gap: 8px;
        font-size: .58rem;
        letter-spacing: 1.5px;
    }

        .welcome-brand-line span {
            width: 25px;
        }

    .welcome-title-area h1 {
        font-size: 2rem;
    }

    .welcome-title-area h2 {
        font-size: 1rem;
    }

    .welcome-title-area p {
        margin-top: 16px;
        font-size: .84rem;
        line-height: 1.85;
    }

    .welcome-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .welcome-btn {
        width: 100%;
    }

    .welcome-mini-features {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .welcome-footer-line > span {
        display: none;
    }
}


/* =========================================================
   2K / 4K / 8K
========================================================= */

@media (min-width: 2200px) {

    .school-welcome-card {
        width: min(1500px, 100%);
        padding: 70px 90px 55px;
    }

    .welcome-title-area {
        max-width: 1100px;
    }
}

@media (min-width: 3500px) {

    .school-welcome-card {
        width: min(2000px, 100%);
    }

    .welcome-logo-wrap {
        transform: scale(1.15);
        margin-bottom: 32px;
    }
}


/* =========================================================
   SCHOOL QUICK ACCESS
========================================================= */

.school-navbar-main {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}


.school-main-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}


.school-main-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 10px;
    color: #536477;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}


    .school-main-link i {
        color: #8191a3;
    }


    .school-main-link:hover {
        color: var(--school-primary);
        background: rgba(47, 111, 168, .07);
    }


        .school-main-link:hover i {
            color: var(--school-primary);
        }


/* =========================================================
   QUICK ICONS
========================================================= */

.school-quick-access {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 3px;
    scrollbar-width: none;
}


    .school-quick-access::-webkit-scrollbar {
        display: none;
    }


.school-quick-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e7ed;
    border-radius: 10px;
    background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
    color: #32475d;
    text-decoration: none;
    font-size: .94rem;
    box-shadow: 0 1px 2px rgba(23, 43, 70, .04);
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}


    .school-quick-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(47, 111, 168, .30);
        color: var(--school-primary);
        background: #f4f8fc;
    }


    .school-quick-btn.primary {
        border-color: rgba(47, 111, 168, .16);
        background: var(--school-primary-soft);
        color: var(--school-primary);
    }


.school-quick-separator {
    width: 1px;
    height: 24px;
    flex: 0 0 1px;
    margin: 0 4px;
    background: #e3e8ed;
}


/* الحساب يبقى آخر شيء */

.school-navbar-account {
    margin-inline-start: auto;
    flex: 0 0 auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1250px) {

    .school-main-link span {
        display: none;
    }

    .school-main-link {
        width: 38px;
        padding: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

    .school-navbar-main {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }


    .school-main-links {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .school-main-link {
        width: 100%;
        min-height: 42px;
    }


        .school-main-link span {
            display: inline;
        }


    .school-quick-access {
        width: 100%;
        padding: 7px 2px;
        border-top: 1px solid #edf1f5;
        border-bottom: 1px solid #edf1f5;
    }


    .school-quick-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .school-navbar-account {
        width: 100%;
        margin-inline-start: 0;
    }
}


\n\n /* =========================================================\n   READABILITY / ACCESSIBILITY TYPOGRAPHY UPGRADE\n   Larger, bolder text for comfortable viewing\n========================================================= */ \n\n:root {
    \n --school-font-base: 17px;
    \n --school-font-small: .88rem;
    \n --school-font-normal: 1rem;
    \n --school-font-medium: 1.06rem;
    \n --school-font-large: 1.18rem;
    \n --school-font-icon: 1.15rem;
    \n
}

\n\nbody {
    \n font-size: var(--school-font-normal);
    \n font-weight: 600;
    \n
}

\n\np, span, label, li, td, th, input, select, textarea, button, .btn, a {
    \n font-weight: 600;
    \n
}

\n\nlabel, .form-label, .school-form-label {
    \n font-size: 1rem;
    \n font-weight: 800;
    \n line-height: 1.5;
    \n
}

\n\ninput, select, textarea, \n.form-control, .form-select {
    \n min-height: 46px;
    \n font-size: 1rem;
    \n font-weight: 650;
    \n
}

    \n\ntextarea, textarea.form-control {
        \n min-height: 105px;
        \n
    }

\n\nbutton, .btn, \n.school-login-link, .welcome-btn {
    \n min-height: 46px;
    \n font-size: .98rem;
    \n font-weight: 800;
    \n
}

    \n\nbutton i, .btn i, a i {
        \n font-size: 1.08em;
        \n
    }

\n\nsmall, .small, .text-muted {
    \n font-size: .86rem;
    \n font-weight: 650;
    \n line-height: 1.55;
    \n
}

\n\nh1, h2, h3, h4, h5, h6, strong, b {
    \n font-weight: 800;
    \n
}

\n\n.school-topbar {
    \n min-height: 39px;
    \n font-size: .82rem;
    \n font-weight: 700;
    \n
}

\n\n.school-topbar-inner {
    min-height: 39px;
}

\n.school-topbar i {
    font-size: 1rem;
}

\n\n.school-brand-copy strong {
    \n font-size: 1.08rem;
    \n font-weight: 900;
    \n
}

\n.school-brand-copy small {
    \n font-size: .78rem;
    \n font-weight: 700;
    \n
}

\n\n.school-main-menu a {
    \n min-height: 46px;
    \n padding-inline: 14px;
    \n font-size: .92rem;
    \n font-weight: 800;
    \n
}

\n.school-main-menu a i {
    font-size: 1.08rem;
}

\n\n.school-login-link {
    \n min-height: 46px;
    \n font-size: .94rem;
    \n font-weight: 900;
    \n
}

\n.school-login-link i {
    font-size: 1.08rem;
}

\n\n.school-user-info small {
    \n font-size: .76rem;
    \n font-weight: 700;
    \n
}

\n.school-user-info strong {
    \n font-size: .9rem;
    \n font-weight: 900;
    \n
}

\n.school-user-chevron {
    font-size: .86rem;
}

\n.school-user-avatar {
    font-size: 19px;
}

\n\n.school-user-menu-head strong {
    \n font-size: .94rem;
    \n font-weight: 900;
    \n
}

\n.school-user-menu-head small {
    \n font-size: .78rem;
    \n font-weight: 650;
    \n
}

\n.school-user-menu .dropdown-item {
    \n min-height: 44px;
    \n font-size: .91rem;
    \n font-weight: 750;
    \n
}

    \n.school-user-menu .dropdown-item i {
        font-size: 1.08rem;
    }

\n\n.school-footer-brand strong {
    \n font-size: .98rem;
    \n font-weight: 900;
    \n
}

\n.school-footer-brand p {
    \n font-size: .84rem;
    \n font-weight: 600;
    \n
}

\n.school-footer-security span {
    \n font-size: .8rem;
    \n font-weight: 700;
    \n
}

\n.school-footer-bottom {
    \n font-size: .8rem;
    \n font-weight: 650;
    \n
}

\n\n.welcome-brand-line {
    \n font-size: .78rem;
    \n font-weight: 900;
    \n
}

\n.welcome-kicker {
    \n font-size: .95rem;
    \n font-weight: 900;
    \n
}

\n.welcome-title-area p {
    \n font-size: 1.05rem;
    \n font-weight: 600;
    \n
}

\n.welcome-btn {
    \n min-height: 56px;
    \n font-size: 1rem;
    \n font-weight: 900;
    \n
}

    \n.welcome-btn i {
        font-size: 1.15rem;
    }

\n.welcome-feature > span {
    font-size: 20px;
}

\n.welcome-feature strong {
    \n font-size: .94rem;
    \n font-weight: 900;
    \n
}

\n.welcome-feature small {
    \n font-size: .8rem;
    \n font-weight: 650;
    \n
}

\n.welcome-footer-line small {
    \n font-size: .8rem;
    \n font-weight: 700;
    \n
}

\n\n.school-main-link {
    \n min-height: 44px;
    \n font-size: .86rem;
    \n font-weight: 900;
    \n
}

\n.school-main-link i {
    font-size: 1.05rem;
}

\n.school-quick-btn {
    \n width: 42px;
    \n height: 42px;
    \n flex-basis: 42px;
    \n font-size: 1.12rem;
    \n
}

\n\n /* Bootstrap tables and common application content */ \n.table, table {
    font-size: .94rem;
}

    \n.table th, table th {
        font-weight: 800;
    }

    \n.table td, table td {
        font-weight: 600;
    }

\n.badge {
    \n font-size: .8rem;
    \n font-weight: 800;
    \n
}

\n.dropdown-item {
    font-weight: 700;
}

\n\n@media (max-width: 720px) {
    \n html {
        font-size: 16px;
    }

    \n body {
        font-size: 1rem;
    }

    \n .school-main-menu a {
        font-size: .95rem;
    }

    \n .school-brand-copy strong {
        font-size: 1rem;
    }

    \n .welcome-brand-line {
        font-size: .72rem;
    }

    \n .welcome-title-area h2 {
        font-size: 1.15rem;
    }

    \n .welcome-title-area p {
        font-size: .98rem;
    }

    \n .welcome-feature strong {
        font-size: .96rem;
    }

    \n .welcome-feature small {
        font-size: .84rem;
    }

    \n
}

\n\n@media (max-width: 420px) {
    \n html {
        font-size: 16px;
    }

    \n .school-brand-copy strong {
        font-size: .98rem;
    }

    \n .school-main-menu a {
        font-size: .94rem;
    }

    \n
}

\n\n@media (min-width: 2200px) {
    \n html {
        font-size: 19px;
    }

    \n
}

\n\n@media (min-width: 3500px) {
    \n html {
        font-size: 22px;
    }

    \n
}

\n