@import url("../assets/vendor/fonts/cairo/400.css");
@import url("../assets/vendor/fonts/cairo/500.css");
@import url("../assets/vendor/fonts/cairo/600.css");
@import url("../assets/vendor/fonts/cairo/700.css");
@import url("../assets/vendor/fonts/cairo/800.css");
@import url("../assets/vendor/fonts/inter/400.css");
@import url("../assets/vendor/fonts/inter/500.css");
@import url("../assets/vendor/fonts/inter/600.css");
@import url("../assets/vendor/fonts/inter/700.css");

:root {
    --edu-primary: #087f8c;
    --edu-primary-dark: #06616b;
    --edu-primary-soft: #e7f5f5;
    --edu-text: #263442;
    --edu-muted: #657482;
    --edu-border: #dfe7ec;
    --edu-bg: #f4f7f9;
    --edu-surface: #ffffff;
    --edu-blue: #306bd5;
    --edu-green: #16825d;
    --edu-red: #c44351;
    --edu-amber: #a4670b;
    --edu-sidebar: 248px;
    --edu-header: 68px;
    --first-color: var(--edu-primary);
    --first-color-light: #b7dcdc;
    --body-font: 'Inter', 'Cairo', sans-serif;
}

body.edu-app {
    --primary-color: var(--edu-primary);
    --secondary-color: var(--edu-text);
    --success-color: var(--edu-green);
    --danger-color: var(--edu-red);
    --info-color: var(--edu-blue);
    --primary-gradient: var(--edu-primary);
    --gradient-primary: var(--edu-primary);
    --secondary-gradient: var(--edu-blue);
    --gradient-secondary: var(--edu-blue);
    --success-gradient: var(--edu-green);
    --gradient-success: var(--edu-green);
    --warning-gradient: #e3b154;
    --gradient-warning: #e3b154;
    --danger-gradient: var(--edu-red);
    --gradient-danger: var(--edu-red);
    --info-gradient: var(--edu-blue);
    --gradient-info: var(--edu-blue);
    --border-radius: 8px;
    --card-shadow: 0 2px 4px rgba(31, 52, 64, .025);
    margin: 0;
    padding: var(--edu-header) 0 32px !important;
    min-height: 100vh;
    background: var(--edu-bg);
    color: var(--edu-text);
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.65;
    text-align: start;
    letter-spacing: 0;
}
html[lang="ar"] body.edu-app { --body-font: 'Cairo', 'Inter', sans-serif; }
.edu-app *, .edu-app *::before, .edu-app *::after { box-sizing: border-box; letter-spacing: 0; }
.edu-app h1, .edu-app h2, .edu-app h3, .edu-app h4, .edu-app h5, .edu-app h6 { color: var(--edu-text); font-weight: 700; line-height: 1.5; }
.edu-app h1 { font-size: 26px; }
.edu-app h2 { font-size: 22px; }
.edu-app h3, .edu-app h4, .edu-app .h4 { font-size: 20px; }
.edu-app h5 { font-size: 16px; }
.edu-app h6 { font-size: 14px; }
.edu-app a { color: var(--edu-primary); text-decoration: none; }
.edu-app a:hover { color: var(--edu-primary-dark); }
.edu-app :focus-visible { outline: 3px solid #58bfc9; outline-offset: 3px; }
.edu-app button, .edu-app input, .edu-app select, .edu-app textarea { font: inherit; }
.edu-app img { max-width: 100%; }
.edu-app p { text-align: inherit; }
.edu-app > .container-fluid { padding-inline: 28px; margin-inline: 0; background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.edu-app > .container-fluid.pt-5 { padding-top: 0 !important; }
.edu-app > .container-fluid.my-2 { margin-top: 0 !important; }
.edu-app > .container-fluid.main-container { margin-top: 0; padding-top: 0; }

/* Logical positioning uses the same layout for Arabic and English. */
body.edu-app .header, body.edu-app #header {
    position: fixed !important;
    inset: 0 0 auto 0;
    width: auto;
    height: var(--edu-header);
    padding: 0 28px !important;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--edu-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 1030 !important;
    transition: none;
}
.edu-app .header-start, .edu-app .header-end { display: flex; align-items: center; gap: 16px; min-width: 0; }
.edu-app .header-brand { color: var(--edu-muted); display: flex; gap: 9px; align-items: center; font-size: 13px; }
.edu-app .header-brand i { color: var(--edu-primary); font-size: 18px; }
.edu-app .header-date { font-size: 12px; color: var(--edu-muted); white-space: nowrap; }
.edu-app .header_toggle, .edu-app .profile-trigger {
    background: transparent;
    color: var(--edu-text);
    border: 1px solid var(--edu-border);
    border-radius: 6px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.edu-app .header_toggle:hover, .edu-app .profile-trigger:hover { background: var(--edu-primary-soft); }
.edu-app .header_toggle i { font-size: 23px; }
.edu-app .profile-trigger { border: 0; gap: 10px; padding-inline: 4px; }
.edu-app .profile-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--edu-primary-soft); color: var(--edu-primary-dark); font-weight: 700; }
.edu-app .profile-name { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; }

body.edu-app .l-navbar, body.edu-app .l-navbar.show {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--edu-sidebar);
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #fff;
    border-inline-end: 1px solid var(--edu-border);
    z-index: 1040 !important;
    transition: transform 180ms ease;
}
html[dir="rtl"] body.edu-app .l-navbar { transform: translateX(100%) !important; }
html[dir="ltr"] body.edu-app .l-navbar { transform: translateX(-100%) !important; }
html[dir] body.edu-app .l-navbar.show { transform: translateX(0) !important; }
.edu-app #nav-bar .nav { height: 100%; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; overflow: auto; padding: 0 12px 16px; scrollbar-width: thin; scrollbar-color: #cbdcde transparent; }
.edu-app #nav-bar .nav > div { width: 100%; }
.edu-app #nav-bar .nav_logo { display: flex; gap: 11px; padding: 22px 10px; margin: 0 0 12px; border-bottom: 1px solid var(--edu-border); color: var(--edu-text); }
.edu-app .brand-mark { height: 38px; width: 38px; display: grid; place-items: center; background: var(--edu-primary); color: #fff; border-radius: 8px; flex: 0 0 38px; }
.edu-app .brand-mark i { font-size: 22px; }
.edu-app .brand-name { display: block; font-size: 20px; font-weight: 700; color: var(--edu-text); line-height: 1.3; }
.edu-app .brand-caption { display: block; font-size: 11px; color: var(--edu-muted); margin-top: 3px; }
.edu-app .nav-section { font-size: 10px; color: #798791; font-weight: 700; padding: 16px 12px 6px; margin: 0; }
.edu-app #nav-bar .nav_link {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    margin: 3px 0;
    min-height: 42px;
    color: #526370;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: start;
    transition: background 120ms ease, color 120ms ease;
}
.edu-app #nav-bar .nav_link > i:first-child { width: 20px; flex: 0 0 20px; text-align: center; font-size: 17px; opacity: .9; }
.edu-app #nav-bar .nav_name { font-size: 13px; min-width: 0; flex: 1; }
.edu-app #nav-bar .nav_link:hover { color: var(--edu-primary-dark); background: #f1f7f7; }
.edu-app #nav-bar .nav_link.active { color: var(--edu-primary-dark); background: var(--edu-primary-soft); font-weight: 700; }
.edu-app #nav-bar .active::after, .edu-app #nav-bar .active::before { content: none; }
.edu-app #nav-bar .nav_link.active::before { content: ''; position: absolute; inset-inline-start: 0; height: 20px; width: 3px; border-radius: 2px; background: var(--edu-primary); }
.edu-app .nav-utilities { border-top: 1px solid var(--edu-border); margin-top: 18px; padding-top: 10px; }
.edu-app #nav-bar .nav-logout { color: var(--edu-red); }
.edu-app #nav-bar .dropdown-arrow { margin-inline-start: auto; font-size: 16px; }
.edu-app #nav-bar .language-dropdown, .edu-app #nav-bar .dropdown-content { position: static; width: 100%; margin: 6px 0 0; padding: 4px; background: #f4f8f9; border-radius: 6px; min-width: 0; box-shadow: none; }
.edu-app #nav-bar .lang-option, .edu-app #nav-bar .dropdown-item { display: flex; gap: 10px; align-items: center; width: 100%; background: transparent; color: var(--edu-text); font-size: 12px; border: 0; padding: 9px; margin: 0; white-space: normal; cursor: pointer; border-radius: 4px; }
.edu-app #nav-bar .lang-option:hover, .edu-app #nav-bar .dropdown-item:hover { background: var(--edu-primary-soft); color: var(--edu-primary-dark); }
.edu-app .nav-backdrop { display: none; position: fixed; inset: var(--edu-header) 0 0; background: rgba(25, 44, 51, .4); border: 0; padding: 0; z-index: 1035; }
.edu-app.nav-open .nav-backdrop { display: block; }
.edu-app .page-heading { padding: 26px 28px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.edu-app .page-heading h1 { margin: 0; }
.edu-app .page-heading-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--edu-muted); margin-bottom: 4px; }
.edu-app .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.edu-app .skip-link { position: fixed; top: -80px; inset-inline-start: 16px; padding: 10px 16px; background: var(--edu-primary); color: #fff; border-radius: 6px; z-index: 1070; }
.edu-app .skip-link:focus { top: 10px; }
.edu-app.account-open { overflow: hidden; }
.edu-app #subscription-banner { position: relative !important; inset: auto !important; z-index: 1 !important; margin: 16px 28px 0; border-radius: 6px; animation: none !important; background: #fff5e3 !important; color: #805c1e !important; box-shadow: none !important; border: 1px solid #eddbb8; font-size: 12px !important; padding: 10px 14px !important; font-weight: 500 !important; }
.edu-app #subscription-banner.notice-expired { background: #fceef0 !important; color: #a83241 !important; border-color: #ebc5cb; }
.edu-app #subscription-banner.notice-info { background: #edf7fa !important; color: #285f70 !important; border-color: #cbe5ee; }
.edu-app #subscription-banner a { color: inherit !important; font-weight: 700 !important; }
.edu-app #header-toggle { position: static !important; }
body.edu-app.has-subscription-banner { padding-top: var(--edu-header) !important; }

@media (min-width: 1121px) {
    body.edu-app { padding-inline-start: var(--edu-sidebar) !important; }
    body.edu-app .header, body.edu-app #header { inset-inline-start: var(--edu-sidebar); }
    html[dir] body.edu-app .l-navbar { transform: none !important; }
    body.edu-app.sidebar-collapsed { padding-inline-start: 0 !important; }
    body.edu-app.sidebar-collapsed .header, body.edu-app.sidebar-collapsed #header { inset-inline-start: 0; }
    html[dir="rtl"] body.edu-app.sidebar-collapsed .l-navbar { transform: translateX(100%) !important; }
    html[dir="ltr"] body.edu-app.sidebar-collapsed .l-navbar { transform: translateX(-100%) !important; }
    .edu-app.nav-open .nav-backdrop { display: none; }
}
@media (max-width: 1120px) {
    body.edu-app .l-navbar { inset-block-start: var(--edu-header); height: calc(100dvh - var(--edu-header)); }
    .edu-app #nav-bar .nav_logo { padding-block: 16px; }
    body.edu-app.nav-open { overflow: hidden; }
}
@media (max-width: 767px) {
    body.edu-app { padding-bottom: 20px !important; }
    body.edu-app .header, body.edu-app #header { padding-inline: 16px !important; gap: 8px; }
    .edu-app .header-date, .edu-app .profile-name { display: none; }
    .edu-app .header-start { gap: 10px; }
    .edu-app > .container-fluid { padding-inline: 16px; }
    .edu-app .page-heading { padding: 20px 16px; flex-wrap: wrap; }
    .edu-app .page-heading h1 { font-size: 22px; }
    .edu-app .page-actions { width: 100%; }
    .edu-app #subscription-banner { margin-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .edu-app *, .edu-app *::before, .edu-app *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
    body.edu-app { padding: 0 !important; background: #fff; }
    .edu-app .header, .edu-app .l-navbar, .edu-app .nav-backdrop, .edu-app .page-actions, .edu-app #subscription-banner { display: none !important; }
    .edu-app .page-heading, .edu-app > .container-fluid { padding-inline: 0; }
}