/* SyncTeach dashboard foundation */
:root {
    --st-ink: #18213c;
    --st-muted: #7d879e;
    --st-surface: #ffffff;
    --st-page: #f5f7fc;
    --st-primary: #635bff;
    --st-secondary: #27c5d9;
    --st-sidebar: #171b38;
    --st-sidebar-deep: #101329;
    --st-border: #e8ebf4;
    --st-shadow: 0 14px 45px rgba(34, 42, 78, .09);
}
body.vertical-layout { background: var(--st-page); color: var(--st-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.header-navbar { height: 72px; background: rgba(255,255,255,.94) !important; box-shadow: 0 1px 0 rgba(24,33,60,.06) !important; backdrop-filter: blur(14px); }
.header-navbar .navbar-header { height: 72px; background: linear-gradient(145deg,#242a5a,#171b38) !important; }
.header-navbar .navbar-container { min-height: 72px; }
.header-navbar .nav-link { color: #5f6780 !important; }
.header-navbar .user-name { color: var(--st-ink); font-weight: 700; }
.logo-container .brand-logo { height: 38px; max-width: 150px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
.main-menu { width: 260px !important; top: 72px; height: calc(100% - 72px); background: linear-gradient(180deg,var(--st-sidebar),var(--st-sidebar-deep)) !important; box-shadow: 10px 0 30px rgba(18,23,49,.13) !important; border: 0 !important; }
.main-menu .main-menu-content { padding: 8px 12px 28px; }
.dashboard-side-brand { display: flex; align-items: center; gap: 11px; margin: 18px 14px 13px; padding: 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.055); color: #fff; }
.dashboard-side-brand img { width: 34px; height: 34px; object-fit: contain; }
.dashboard-side-brand strong { display: block; font-size: 14px; letter-spacing: .01em; }
.dashboard-side-brand small { color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.main-menu .main-menu-header { height: auto; padding: 0 14px 12px; }
.main-menu .menu-search { height: 38px; border: 0; border-radius: 11px; background: rgba(255,255,255,.08); color: #fff; padding-left: 15px; transition: background .2s ease, box-shadow .2s ease; }
.main-menu .menu-search::placeholder { color: rgba(255,255,255,.48); }
.main-menu .menu-search:focus { background: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(99,91,255,.25); }
.main-menu .navigation > li > a { color: rgba(235,239,255,.72); border-radius: 11px; margin: 2px 0; padding: 10px 12px; transition: transform .18s ease, background .18s ease, color .18s ease; }
.main-menu .navigation > li > a i { color: #aeb5e6; width: 22px; transition: color .18s ease; }
.main-menu .navigation > li > a:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(3px); }
.main-menu .navigation > li.active > a, .main-menu .navigation > li.open > a { color: #fff; background: linear-gradient(100deg,rgba(99,91,255,.92),rgba(64,190,219,.78)); box-shadow: 0 8px 22px rgba(71,94,231,.28); }
.main-menu .navigation > li.active > a i, .main-menu .navigation > li.open > a i { color: #fff; }
.main-menu .navigation .navigation-header { color: #7f89b8 !important; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 21px 12px 7px; text-transform: uppercase; }
.main-menu .navigation .menu-content { background: rgba(0,0,0,.12); border-radius: 10px; margin: 3px 0 5px; padding: 4px; }
.main-menu .navigation .menu-content > li > a { color: rgba(235,239,255,.65); border-radius: 8px; }

/* Sidebar accordion navigation */
.main-menu .navigation { padding: 0 0 20px; background: transparent !important; }
.main-menu .navigation > li { margin: 4px 0; }
.main-menu .navigation > li.navigation-header { margin: 3px 0 8px; padding: 8px 12px 5px; }
.main-menu .navigation > li > a {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 11px;
    position: relative;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 650;
}
.main-menu .navigation > li > a > i {
    top: 0 !important;
    float: none !important;
    flex: 0 0 22px;
    margin: 0 !important;
    font-size: 17px;
    text-align: center;
}
.main-menu .navigation > li > a > .menu-title { flex: 1; min-width: 0; }
.main-menu .navigation > li.has-sub > a { padding-inline-end: 38px; }
.main-menu .navigation > li.has-sub > a::after {
    content: "\ea0b";
    display: inline-block;
    position: absolute;
    top: 50% !important;
    right: 14px !important;
    color: rgba(220,225,255,.45);
    font-family: "icomoon";
    font-size: 13px;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform .2s ease, color .2s ease !important;
}
.main-menu .navigation > li.has-sub.open > a::after {
    color: #fff;
    transform: translateY(-50%) rotate(90deg) !important;
}
.main-menu .navigation > li.has-sub.open > a,
.main-menu .navigation > li.has-sub.active > a {
    border-color: rgba(139,147,255,.2);
    color: #fff;
    background: rgba(105,97,255,.14) !important;
    box-shadow: inset 3px 0 0 #7a72ff, 0 8px 20px rgba(5,8,26,.12) !important;
}
.main-menu .navigation > li.has-sub.open > a > i,
.main-menu .navigation > li.has-sub.active > a > i { color: #b9c0ff; }
.main-menu .navigation > li.has-sub > .menu-content {
    margin: 5px 0 9px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px;
    background: rgba(5,8,27,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.main-menu .navigation .menu-content > li { margin: 2px 0; background: transparent !important; }
.main-menu .navigation .menu-content > li > a {
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 8px 10px !important;
    color: rgba(226,231,255,.67);
    font-size: 12px;
    font-weight: 550;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.main-menu .navigation .menu-content > li > a > i {
    top: 0;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0;
    border-radius: 8px;
    color: #8992c8;
    background: rgba(255,255,255,.055);
    font-size: 12px;
    line-height: 25px;
    text-align: center;
}
.main-menu .navigation .menu-content > li > a:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    transform: translateX(2px);
}
.main-menu .navigation .menu-content > li.active > a {
    color: #fff !important;
    background: linear-gradient(105deg,rgba(99,91,255,.78),rgba(39,197,217,.4)) !important;
    box-shadow: 0 7px 16px rgba(34,44,118,.2);
}
.main-menu .navigation .menu-content > li.active > a > i { color: #fff; background: rgba(255,255,255,.14); }
.main-menu .navigation a:focus-visible { outline: 2px solid #67d7e5; outline-offset: 2px; }
.main-menu .ps-scrollbar-y-rail { right: 2px !important; }
.main-menu .ps-scrollbar-y { background: rgba(159,168,229,.5) !important; }

html[data-textdirection="rtl"] .main-menu .navigation > li.has-sub > a::after { right: auto !important; left: 14px !important; }
html[data-textdirection="rtl"] .main-menu .navigation > li.has-sub.open > a,
html[data-textdirection="rtl"] .main-menu .navigation > li.has-sub.active > a { box-shadow: inset -3px 0 0 #7a72ff, 0 8px 20px rgba(5,8,26,.12) !important; }
html[data-textdirection="rtl"] .main-menu .navigation .menu-content > li > a:hover { transform: translateX(-2px); }

@media (min-width: 992px) {
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li { margin: 5px 0; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a { min-height: 44px; gap: 0; padding: 10px !important; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li.has-sub > a::after { display: none; }
}

body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > span.menu-title {
    border-radius: 0 10px 0 0;
    color: #fff;
    background: #202650;
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: none;
    box-shadow: 14px 12px 30px rgba(4,7,24,.28);
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-popout {
    padding: 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0 0 12px 12px;
    background: #171b38;
    box-shadow: 14px 18px 34px rgba(4,7,24,.32);
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-popout > li > a {
    border-radius: 8px;
    color: rgba(232,235,255,.72);
    font-size: 12px;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-popout > li.active > a,
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-popout > li > a:hover {
    color: #fff;
    background: rgba(99,91,255,.34);
}

@media (min-width: 768px) and (max-width: 991px) {
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-content { left: 72px; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content > ul.menu-content { right: 72px; left: auto; }
}

@media (max-width: 767px) {
    .main-menu .navigation > li > a { min-height: 48px; font-size: 13px; }
    .main-menu .navigation .menu-content > li > a { min-height: 43px; font-size: 12.5px; }
}
body.vertical-layout.menu-expanded .content, body.vertical-layout.menu-expanded .footer { margin-left: 260px; }
body.vertical-layout.menu-expanded .navbar-container { margin-left: 260px; }
.content { transition: margin .25s ease; }
.content-wrapper { padding: 28px 30px; animation: st-fade-up .38s ease both; }
.content-header-title { color: var(--st-ink); font-weight: 800; letter-spacing: -.025em; }
.breadcrumb { background: transparent; padding: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--st-muted); }
.card { border: 1px solid var(--st-border); border-radius: 17px; box-shadow: var(--st-shadow); overflow: hidden; }
.card .card-header { border-bottom: 1px solid var(--st-border); background: rgba(255,255,255,.72); padding: 18px 20px; }
.card .card-title { color: var(--st-ink); font-weight: 750; }
.card:hover { box-shadow: 0 18px 48px rgba(34,42,78,.12); }
.btn { border-radius: 10px; font-weight: 650; transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { border: 0; background: linear-gradient(135deg,var(--st-primary),#7c72ff); box-shadow: 0 8px 18px rgba(99,91,255,.23); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg,#534bfa,#7167f8); }
.form-control, .custom-select { border-color: #dfe4f0; border-radius: 10px; min-height: 41px; }
.form-control:focus, .custom-select:focus { border-color: #938eff; box-shadow: 0 0 0 3px rgba(99,91,255,.13); }
.table thead th { border-top: 0; border-bottom: 1px solid var(--st-border); color: #6b7591; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.table tbody tr { transition: background .18s ease; }
.table tbody tr:hover { background: #f7f8ff; }
@keyframes st-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 991px) { .content-wrapper { padding: 22px 16px; } .header-navbar .navbar-header { background: linear-gradient(145deg,#242a5a,#171b38) !important; } .main-menu { width: 260px !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .content, html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .footer { margin-left: 0; margin-right: 260px; }
html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .navbar-container { margin-left: 0; margin-right: 260px; }
html[data-textdirection="rtl"] .main-menu .navigation > li > a:hover { transform: translateX(-3px); }

/* Keep the legacy navbar rail exactly aligned with the redesigned sidebar. */
@media (min-width: 992px) {
    .header-navbar .navbar-header { width: 260px !important; min-width: 260px; flex: 0 0 260px; }
}
@media (max-width: 991px) {
    .header-navbar .navbar-header { width: 100% !important; min-width: 0; flex: auto; }
}

/* Legacy menu toggle uses .menu-collapsed; keep the modern shell in sync. */
@media (min-width: 992px) {
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu { width: 60px !important; }
    body.vertical-layout.vertical-menu.menu-collapsed .header-navbar .navbar-header { width: 60px !important; min-width: 60px; flex-basis: 60px; }
    body.vertical-layout.vertical-menu.menu-collapsed .navbar-container { margin-left: 60px !important; }
    body.vertical-layout.vertical-menu.menu-collapsed .content,
    body.vertical-layout.vertical-menu.menu-collapsed .footer { margin-left: 60px !important; }
    body.vertical-layout.vertical-menu.menu-collapsed .dashboard-side-brand,
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu-header { display: none; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content { padding: 12px 7px; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a { padding: 11px 12px; text-align: center; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a i { margin: 0; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .navbar-container { margin-left: 0 !important; margin-right: 60px !important; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .content,
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .footer { margin-left: 0 !important; margin-right: 60px !important; }
}

/* Dashboard home */
.dashboard-home { max-width: 1600px; margin: 0 auto; }
.dashboard-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; min-height: 162px; margin-bottom: 22px; padding: 29px 34px; border-radius: 20px; color: #fff; background: linear-gradient(125deg,#20275b 0%,#5145c8 55%,#35bfd1 140%); box-shadow: 0 18px 42px rgba(60,67,180,.25); }
.dashboard-hero::after { content: ""; position: absolute; width: 270px; height: 270px; border: 36px solid rgba(255,255,255,.08); border-radius: 50%; right: -95px; top: -105px; }
.dashboard-eyebrow { margin: 0 0 7px; color: #8d98ff; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.dashboard-hero .dashboard-eyebrow { color: rgba(255,255,255,.64); }
.dashboard-hero h1 { position: relative; z-index: 1; margin: 0; font-size: 29px; font-weight: 800; letter-spacing: -.035em; }
.dashboard-hero-copy { position: relative; z-index: 1; margin: 7px 0 0; color: rgba(255,255,255,.74); }
.dashboard-hero-orb { position: relative; z-index: 1; display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.13); font-size: 31px; transform: rotate(-5deg); }
.dashboard-filter-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding: 17px 22px; border: 1px solid var(--st-border); border-radius: 17px; background: #fff; box-shadow: var(--st-shadow); }
.dashboard-filter-heading { display: flex; align-items: center; gap: 12px; min-width: 245px; }
.dashboard-filter-heading h2, .dashboard-section-heading h2 { margin: 0; color: var(--st-ink); font-size: 18px; font-weight: 780; }
.dashboard-filter-heading p, .dashboard-chart-heading p { margin: 3px 0 0; color: var(--st-muted); font-size: 12px; }
.dashboard-filter-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #6258f8; background: #f0efff; font-size: 19px; }
.dashboard-filter-form { display: flex; align-items: flex-end; flex: 1; gap: 12px; }
.dashboard-filter-form .form-group { flex: 1; margin: 0; }
.dashboard-filter-form label { margin-bottom: 5px; color: #67718d; font-size: 11px; font-weight: 700; }
.dashboard-filter-form .btn { height: 41px; white-space: nowrap; }
.dashboard-reset { padding: 10px 5px; color: #69748f; font-size: 12px; font-weight: 700; }
.dashboard-section { margin: 34px 0; }
.dashboard-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.dashboard-section-heading > span { color: var(--st-muted); font-size: 12px; }
.dashboard-stat-grid > div { margin-bottom: 18px; }
.dashboard-metric-card { position: relative; display: flex; min-height: 144px; align-items: flex-start; justify-content: space-between; overflow: hidden; padding: 20px; border: 1px solid var(--st-border); border-radius: 17px; background: #fff; box-shadow: var(--st-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.dashboard-metric-card::after { content: ""; position: absolute; right: -25px; bottom: -43px; width: 105px; height: 105px; border-radius: 50%; background: var(--metric-wash,#eff0ff); }
.dashboard-metric-card:hover { transform: translateY(-4px); box-shadow: 0 21px 42px rgba(34,42,78,.15); }
.dashboard-metric-card strong { display: block; margin: 9px 0 3px; color: var(--st-ink); font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.metric-label { color: #53607b; font-size: 12px; font-weight: 760; }
.dashboard-metric-card small { color: #98a1b6; font-size: 11px; }
.metric-icon { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--metric-color,#635bff); background: var(--metric-wash,#eff0ff); font-size: 20px; }
.metric-0 { --metric-color:#635bff; --metric-wash:#efeeff; } .metric-1 { --metric-color:#13a7bd; --metric-wash:#e8fafd; } .metric-2 { --metric-color:#ec7c34; --metric-wash:#fff2e8; } .metric-3 { --metric-color:#e45380; --metric-wash:#ffedf3; } .metric-4 { --metric-color:#46a66b; --metric-wash:#ecf9f0; } .metric-financial { --metric-color:#b37a12; --metric-wash:#fff8e7; }
.dashboard-chart-card { padding: 21px; border: 1px solid var(--st-border); border-radius: 17px; background: #fff; box-shadow: var(--st-shadow); }
.dashboard-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.dashboard-chart-heading h3 { margin: 0; color: var(--st-ink); font-size: 15px; font-weight: 770; }
.dashboard-chart-canvas { height: 250px; }
.chart-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; } .chart-dot-primary { background:#635bff; box-shadow:0 0 0 5px #efeeff; } .chart-dot-cyan { background:#27c5d9; box-shadow:0 0 0 5px #e8fafd; }
@media (max-width: 991px) { .dashboard-filter-card { display:block; } .dashboard-filter-heading { margin-bottom: 16px; } }
@media (max-width: 600px) { .dashboard-hero { min-height: 140px; padding: 24px; } .dashboard-hero h1 { font-size: 23px; } .dashboard-hero-orb { display:none; } .dashboard-filter-form { flex-wrap:wrap; } .dashboard-filter-form .form-group { flex-basis: calc(50% - 6px); } .dashboard-filter-form .btn { flex:1; } }

/* Dashboard quick create */
.dashboard-quick-create { margin: 26px 0 30px; }
.quick-create-heading { align-items: flex-start; }
.quick-create-heading h2 { margin-bottom: 5px; }
.quick-create-heading > div > p:last-child { max-width: 650px; margin: 0; color: var(--st-muted); font-size: 12px; }
.quick-create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; }
.quick-create-action {
    --quick-accent: #635bff;
    --quick-wash: #efeeff;
    display: flex;
    min-width: 0;
    min-height: 176px;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--st-border);
    border-radius: 17px;
    color: var(--st-ink);
    background: #fff;
    box-shadow: 0 10px 28px rgba(34,42,78,.065);
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.quick-create-action::after { content: ''; position: absolute; right: -32px; bottom: -48px; width: 110px; height: 110px; border-radius: 50%; background: var(--quick-wash); transition: transform .25s ease; }
.quick-create-action:hover, .quick-create-action:focus { border-color: color-mix(in srgb, var(--quick-accent) 35%, #fff); outline: 0; box-shadow: 0 17px 38px rgba(34,42,78,.12); transform: translateY(-3px); }
.quick-create-action:hover::after, .quick-create-action:focus::after { transform: scale(1.13); }
.quick-create-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--quick-accent) 24%, transparent); outline-offset: 2px; }
.quick-create-icon { display: grid; width: 42px; height: 42px; place-items: center; position: relative; z-index: 1; margin-bottom: 14px; border-radius: 13px; color: var(--quick-accent); background: var(--quick-wash); font-size: 19px; }
.quick-create-copy { display: block; position: relative; z-index: 1; }
.quick-create-copy strong { display: block; margin-bottom: 5px; color: var(--st-ink); font-size: 14px; font-weight: 800; }
.quick-create-copy small { display: block; color: var(--st-muted); font-size: 11px; line-height: 1.48; }
.quick-create-open { display: flex; align-items: center; gap: 5px; position: relative; z-index: 1; margin-top: auto; padding-top: 13px; color: var(--quick-accent); font-size: 10px; font-weight: 800; letter-spacing: .035em; }
.quick-create-open i { font-size: 10px; transition: transform .18s ease; }
.quick-create-action:hover .quick-create-open i { transform: translateX(3px); }
.quick-create-chapter { --quick-accent: #2477d4; --quick-wash: #eaf4ff; }
.quick-create-lesson { --quick-accent: #159578; --quick-wash: #e5f8f1; }
.quick-create-exam { --quick-accent: #c97818; --quick-wash: #fff2df; }
.quick-create-homework { --quick-accent: #c34e76; --quick-wash: #ffedf3; }
.quick-create-board { --quick-accent: #7551bd; --quick-wash: #f2edff; }

.quick-create-modal .modal-dialog { display: flex; min-height: calc(100vh - 60px); max-width: 680px; align-items: center; margin: 30px auto; }
.quick-create-modal .modal-content { width: 100%; border-radius: 21px; overflow: hidden; }
.quick-create-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; background: linear-gradient(135deg,#f9f9ff,#f1f5ff); }
.quick-create-modal-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.quick-create-modal-heading small { display: block; margin-bottom: 2px; color: #8790a8; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.quick-create-modal-heading h3 { margin: 0; color: var(--st-ink); font-size: 19px; font-weight: 820; }
.quick-create-modal-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,var(--st-primary),#438bd9); box-shadow: 0 9px 20px rgba(82,87,210,.22); font-size: 19px; }
.quick-create-modal .close { margin: 0; padding: 9px; color: #6e7893; opacity: .7; }
.quick-create-modal .modal-body { padding: 23px 24px 19px; background: #fff; }
.quick-create-modal-description { margin: 0 0 17px; color: var(--st-muted); font-size: 12px; line-height: 1.6; }
.quick-create-progress { display: flex; align-items: center; margin-bottom: 19px; }
.quick-create-progress span { display: none; width: 25px; height: 25px; place-items: center; position: relative; border: 2px solid #e2e6f1; border-radius: 50%; color: transparent; background: #fff; font-size: 9px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.quick-create-progress span.is-visible { display: grid; }
.quick-create-progress span.is-visible:not(:last-child) { margin-right: 32px; }
.quick-create-progress span.is-visible:not(:last-child)::after { content: ''; position: absolute; left: 23px; width: 34px; height: 2px; background: #e6e9f2; }
.quick-create-progress span.is-complete { border-color: #36b898; color: #fff; background: #36b898; }
.quick-create-progress span.is-complete::after { background: #85d8c4 !important; }
.quick-create-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.quick-create-field { display: none; min-width: 0; }
.quick-create-field.is-visible { display: block; }
.quick-create-field label { display: block; margin-bottom: 6px; color: #53607b; font-size: 11px; font-weight: 750; }
.quick-create-select-wrap { position: relative; }
.quick-create-field select { width: 100%; height: 44px; padding-right: 35px; border-color: #dfe4f0; background-color: #fff; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease; }
.quick-create-field select:focus { border-color: #8880ff; box-shadow: 0 0 0 3px rgba(99,91,255,.1); }
.quick-create-field select:disabled { color: #a5adbf; background-color: #f7f8fb; cursor: not-allowed; }
.quick-create-field.is-complete select { border-color: rgba(54,184,152,.48); background-color: #fbfffd; }
.quick-create-select-status { display: none; position: absolute; top: 50%; right: 13px; width: 15px; height: 15px; margin-top: -7px; border: 2px solid #d9ddeb; border-top-color: var(--st-primary); border-radius: 50%; animation: quick-create-spin .7s linear infinite; pointer-events: none; }
.quick-create-field.is-loading .quick-create-select-status { display: block; }
.quick-create-feedback { min-height: 18px; margin-top: 12px; color: var(--st-muted); font-size: 11px; }
.quick-create-feedback.is-error { color: #bd3f55; }
.quick-create-feedback.is-empty { color: #a26a19; }
.quick-create-feedback.is-loading { color: #635bff; }
.quick-create-modal .modal-footer { padding: 15px 22px; background: #fafbfe; }
.quick-create-modal .modal-footer .btn { min-width: 120px; }
.quick-create-modal .modal-footer .btn-primary { min-width: 180px; }
.quick-create-modal .modal-footer .btn-primary:disabled { border: 0; background: #bcc2d1; box-shadow: none; cursor: not-allowed; transform: none; }
.quick-create-modal.is-form-step .modal-dialog { max-width: 1080px; }
.quick-create-modal.is-form-step .modal-body { padding: 0; }
.quick-create-form-step { position: relative; height: min(76vh, 820px); min-height: 520px; background: #f5f6fa; }
.quick-create-form-step iframe { width: 100%; height: 100%; border: 0; background: #f5f6fa; }
.quick-create-form-loading { display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; inset: 0; z-index: 2; color: var(--st-muted); background: #fff; font-size: 12px; font-weight: 700; }
.quick-create-form-loading[hidden] { display: none; }
.quick-create-form-loading span { width: 19px; height: 19px; border: 2px solid #dddff1; border-top-color: var(--st-primary); border-radius: 50%; animation: quick-create-spin .7s linear infinite; }

body.dashboard-quick-create-embedded { padding-top: 0 !important; background: #f5f6fa; }
body.dashboard-quick-create-embedded > .header-navbar,
body.dashboard-quick-create-embedded > .main-menu,
body.dashboard-quick-create-embedded > .dashboard-menu-scrim { display: none !important; }
body.dashboard-quick-create-embedded .app-content,
body.dashboard-quick-create-embedded .content { min-height: 100%; margin: 0 !important; padding: 0 !important; }
body.dashboard-quick-create-embedded .content-wrapper { padding: 18px !important; }
body.dashboard-quick-create-embedded .content-header { display: none; }
body.dashboard-quick-create-embedded .content-body > .row > [class*="col-md-"] { width: 100%; max-width: 100%; }
body.dashboard-quick-create-embedded .card { margin-bottom: 0; border: 0; box-shadow: none; }
@keyframes quick-create-spin { to { transform: rotate(360deg); } }

html[data-textdirection="rtl"] .quick-create-action { text-align: right; }
html[data-textdirection="rtl"] .quick-create-action::after { right: auto; left: -32px; }
html[data-textdirection="rtl"] .quick-create-open i { transform: rotate(180deg); }
html[data-textdirection="rtl"] .quick-create-action:hover .quick-create-open i { transform: rotate(180deg) translateX(3px); }
html[data-textdirection="rtl"] .quick-create-progress span.is-visible:not(:last-child) { margin-right: 0; margin-left: 32px; }
html[data-textdirection="rtl"] .quick-create-progress span.is-visible:not(:last-child)::after { left: auto; right: 23px; }
html[data-textdirection="rtl"] .quick-create-field select { padding-right: 12px; padding-left: 35px; }
html[data-textdirection="rtl"] .quick-create-select-status { right: auto; left: 13px; }

@media (max-width: 1199px) { .quick-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quick-create-action { min-height: 160px; } }
@media (max-width: 767px) {
    .dashboard-quick-create { margin: 21px 0 25px; }
    .quick-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .quick-create-action { min-height: 155px; padding: 14px; border-radius: 15px; }
    .quick-create-open { display: none; }
    .quick-create-modal .modal-dialog { min-height: calc(100vh - 24px); margin: 12px; }
    .quick-create-modal .modal-header { padding: 17px; }
    .quick-create-modal .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; padding: 18px 17px 14px; }
    .quick-create-fields { grid-template-columns: 1fr; gap: 11px; }
    .quick-create-progress { justify-content: center; }
    .quick-create-modal .modal-footer { display: flex; padding: 13px 17px; }
    .quick-create-modal .modal-footer .btn { flex: 1; min-width: 0; margin: 0 3px; }
    .quick-create-modal.is-form-step .modal-body { max-height: none; overflow: hidden; }
    .quick-create-form-step { height: calc(100vh - 116px); min-height: 0; }
    body.dashboard-quick-create-embedded .content-wrapper { padding: 12px !important; }
}
@media (max-width: 420px) { .quick-create-grid { grid-template-columns: 1fr; } .quick-create-action { min-height: 132px; } .quick-create-copy small { max-width: 260px; } }

/* Shared CRUD experience */
.content-header { align-items: center; min-height: 54px; margin-bottom: 10px; }
.content-header-title { font-size: 25px; line-height: 1.15; }
.content-header-left p { color: var(--st-muted); font-size: 12px; }
.content-header-right .breadcrumb { justify-content: flex-end; font-size: 12px; }
.content-body > .card, .content-body > section > .card { margin-bottom: 20px; }
.content-body > .card > .card-header, .content-body > section > .card > .card-header { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.card-body, .card-block { background: var(--st-surface); }
.card-dashboard { padding: 20px !important; }
.table-responsive { border-radius: 12px; }
.table { margin-bottom: 0; }
.table thead th { padding: 14px 12px; white-space: nowrap; }
.table tbody td, .table tbody th { padding: 13px 12px; vertical-align: middle; color: #4e5a75; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table .btn-sm { padding: 6px 9px; font-size: 11px; }
.pagination { gap: 5px; margin: 18px 0 0; }
.pagination .page-item .page-link { display: grid; min-width: 34px; height: 34px; place-items: center; border: 1px solid var(--st-border); border-radius: 9px; color: #68738f; background: #fff; }
.pagination .page-item.active .page-link { border-color: var(--st-primary); color: #fff; background: var(--st-primary); box-shadow: 0 6px 14px rgba(99,91,255,.2); }
.alert { border: 0; border-radius: 12px; box-shadow: 0 8px 25px rgba(34,42,78,.06); }
.modal-content { border: 0; border-radius: 17px; box-shadow: 0 24px 70px rgba(18,23,49,.2); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--st-border); background: #fafaff; }
.modal-footer { border-top: 1px solid var(--st-border); }
.select2-container--default .select2-selection--single { height: 41px; border: 1px solid #dfe4f0; border-radius: 10px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 39px; color: #4e5a75; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 39px; }
.form-group > label { color: #53607b; font-size: 12px; font-weight: 700; }
.form-actions { border-top: 1px solid var(--st-border); padding-top: 18px; }
.empty-state, .table .text-center { color: var(--st-muted); }
@media (max-width: 767px) { .content-header { align-items: flex-start; } .content-header-right .breadcrumb { justify-content: flex-start; } .content-header-title { font-size: 21px; } .card-dashboard { padding: 14px !important; } .content-body > .card > .card-header { display: block; } }

/* Students: compact filters and clearer row actions */
.student-filter-card { border: 1px solid var(--st-border); }
.student-filter-card .card-block { padding: 18px 20px !important; }
.student-filter-card .form-group { margin-bottom: 14px; }
.student-filter-card .btn { min-width: 94px; margin-right: 6px; }
.student-action-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-bottom: 14px !important; }
.student-action-bar .btn { margin: 0 !important; border-radius: 10px; }
.student-table-wrap { overflow-x: auto; border: 1px solid var(--st-border); }
.student-table-wrap .table { min-width: 1450px; }
.student-table-wrap thead th { background: #f8f9fd; color: #66718b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.student-table-wrap tbody tr { transition: background .2s ease; }
.student-table-wrap tbody tr:hover { background: #fafaff; }
.student-status-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.student-status-badge::before { content: ''; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.student-status-badge.is-active { color: #14866d; background: #e6f8f2; }
.student-status-badge.is-inactive { color: #9a6a20; background: #fff3df; }
.student-row-actions { min-width: 190px; }
.student-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.student-actions .btn { border-radius: 8px; }
@media (max-width: 767px) { .student-filter-card .card-block { padding: 14px !important; } .student-action-bar { align-items: stretch; } .student-action-bar .btn { flex: 1 1 auto; } }

/* Teachers: focused controls and compact data table */
.teacher-control-panel { padding-top: 20px !important; }
.teacher-action-row { align-items: center; }
.teacher-filter-row { padding: 14px 0 4px; border-top: 1px solid var(--st-border); }
.teacher-filter-row .form-control { min-height: 41px; }
.teacher-table-wrap { overflow-x: auto; border: 1px solid var(--st-border); border-radius: 12px; }
.teacher-table-wrap .table { min-width: 1050px; }
.teacher-table-wrap thead th { background: #f8f9fd; color: #66718b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.teacher-table-wrap tbody tr { transition: background .2s ease; }
.teacher-table-wrap tbody tr:hover { background: #fafaff; }
.teacher-table-wrap .badge { border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 700; }
.teacher-status-cell, .teacher-row-actions { min-width: 110px; }
.teacher-actions { display: flex; gap: 5px; white-space: nowrap; }
.teacher-actions .btn { border-radius: 8px; }

/* Courses and lessons: consistent filter and catalog surfaces */
.course-filter-card .card-block, .lesson-filter-card .card-body { padding: 20px !important; }
.course-filter-card .form-group, .lesson-filter-card .form-group { margin-bottom: 14px; }
.course-table-wrap, .lesson-table-wrap { overflow-x: auto; border: 1px solid var(--st-border); border-radius: 12px; }
.course-table-wrap .table { min-width: 1120px; }
.lesson-table-wrap .table { min-width: 1180px; }
.course-table-wrap thead th, .lesson-table-wrap thead th { background: #f8f9fd; color: #66718b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.course-table-wrap tbody tr, .lesson-table-wrap tbody tr { transition: background .2s ease; }
.course-table-wrap tbody tr:hover, .lesson-table-wrap tbody tr:hover { background: #fafaff; }
.course-table-wrap tbody td:last-child, .lesson-table-wrap tbody td:last-child { white-space: nowrap; }
.lesson-table-wrap img { border-radius: 8px; object-fit: cover; border: 1px solid var(--st-border); }

/* Detail pages: polished information presentation */
.show-page .content-body > section > .row > [class*="col-"] > .card { overflow: hidden; border: 1px solid var(--st-border); }
.show-page .content-body > section > .row > [class*="col-"] > .card > .card-header { min-height: 72px; padding: 16px 22px; background: linear-gradient(135deg, #fafaff 0%, #f3f5ff 100%); }
.show-page .content-body > section > .row > [class*="col-"] > .card > .card-header .card-title { color: var(--st-ink); font-size: 18px; font-weight: 800; }
.show-page .heading-elements .btn { border-radius: 9px; margin-left: 5px; }
.show-page .card-block { padding: 24px !important; }
.show-page .table-responsive { border: 1px solid var(--st-border); border-radius: 13px; overflow: hidden; }
.show-page .table { margin: 0; }
.show-page .table th { width: 220px; background: #f8f9fd; color: #5e6983; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.show-page .table td { color: var(--st-ink); font-weight: 600; }
.show-page .table tr { border-bottom: 1px solid var(--st-border); }
.show-page .table tr:last-child { border-bottom: 0; }
.show-page .table td, .show-page .table th { padding: 15px 18px; }
.show-page .badge { border-radius: 999px; padding: 6px 10px; }
@media (max-width: 767px) { .show-page .card-block { padding: 14px !important; } .show-page .table th { width: 140px; } .show-page .content-body > section > .row > [class*="col-"] > .card > .card-header { padding: 14px; } }

/* Branded authentication experience */
.login-page { min-height: 100vh; background: radial-gradient(circle at 10% 10%, rgba(99,91,255,.18), transparent 35%), linear-gradient(135deg, #111936 0%, #242b57 55%, #635bff 140%); }
.login-page .app-content, .login-page .content-wrapper, .login-page .content-body, .login-page section { min-height: 100vh; }
.login-page section { display: flex; align-items: center; justify-content: center; padding: 42px 18px; }
.login-panel-wrap { display: flex; align-items: stretch; max-width: 980px; padding: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 80px rgba(8,14,45,.35); }
.login-intro { position: relative; width: 46%; padding: 52px 42px; align-items: flex-end; color: #fff; overflow: hidden; background: linear-gradient(155deg, #635bff 0%, #3b82f6 100%); }
.login-intro small { letter-spacing: .16em; font-weight: 800; opacity: .78; }
.login-intro h1 { margin: 12px 0 16px; color: #fff; font-size: 34px; line-height: 1.12; font-weight: 800; }
.login-intro p { max-width: 280px; color: rgba(255,255,255,.78); line-height: 1.7; }
.login-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.13); }
.login-orb-one { width: 230px; height: 230px; top: -90px; right: -80px; }
.login-orb-two { width: 150px; height: 150px; bottom: -60px; left: -40px; }
.login-card { width: 54%; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff; }
.login-card .card-header { padding: 38px 42px 16px; }
.login-card .card-body .card-block { padding: 20px 42px 34px !important; }
.login-card .card-footer { display: none; }
.login-card .card-title img { max-width: 170px; max-height: 70px; object-fit: contain; }
.login-card .card-subtitle { margin-top: 14px; font-weight: 700; color: var(--st-ink) !important; }
.login-card .form-control { height: 48px; border-radius: 11px; border-color: #dfe4f0; }
.login-card .form-control:focus { border-color: var(--st-primary); box-shadow: 0 0 0 3px rgba(99,91,255,.12); }
.login-card .btn-primary { height: 48px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #635bff, #3b82f6); box-shadow: 0 10px 20px rgba(99,91,255,.22); }
@media (max-width: 767px) { .login-panel-wrap { max-width: 470px; } .login-card { width: 100%; } .login-card .card-header { padding: 30px 24px 10px; } .login-card .card-body .card-block { padding: 18px 24px 28px !important; } }

/* Settings: organized configuration workspace */
.settings-page-card { border: 1px solid var(--st-border); overflow: hidden; }
.settings-page-card > .card-header { min-height: 72px; padding: 18px 24px; background: linear-gradient(135deg, #fafaff, #f2f4ff); }
.settings-page-card > .card-header .card-title { color: var(--st-ink); font-size: 19px; font-weight: 800; }
.settings-page-card .card-body { padding: 28px !important; }
.settings-section-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 15px !important; color: var(--st-ink); font-size: 15px; font-weight: 800; }
.settings-section-title::before { content: ''; width: 7px; height: 22px; border-radius: 8px; background: linear-gradient(180deg, var(--st-primary), var(--st-cyan)); }
.settings-field { margin: 0 0 13px !important; padding: 15px 8px; border: 1px solid var(--st-border); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.settings-field:hover { border-color: rgba(99,91,255,.35); box-shadow: 0 7px 18px rgba(31,38,75,.05); }
.settings-page-card hr { border-color: var(--st-border); margin: 20px 0; }
.settings-feature-toggle { width: 19px; height: 19px; accent-color: var(--st-primary); vertical-align: middle; margin-right: 6px; }
.settings-field label { color: var(--st-ink); }
.settings-page-card .form-actions { margin-top: 24px; }
.settings-page-card .form-actions .btn { min-width: 150px; border-radius: 10px; }
.settings-page-card img { padding: 8px; border: 1px solid var(--st-border); border-radius: 12px; background: #fafaff; }
@media (max-width: 767px) { .settings-page-card .card-body { padding: 15px !important; } .settings-field { padding: 12px 4px; } }

/* Final shared polish for secondary dashboard modules */
.polished-page .content-header { margin-bottom: 18px; }
.polished-page .card { border: 1px solid var(--st-border); overflow: hidden; }
.polished-page .card-header { min-height: 62px; padding: 16px 20px; background: linear-gradient(135deg, #fafaff, #f5f6fc); }
.polished-page .card-header .card-title { color: var(--st-ink); font-weight: 800; }
.polished-page .card-block, .polished-page .card-body { padding: 20px !important; }
.polished-page .table-responsive { border: 1px solid var(--st-border); border-radius: 12px; overflow-x: auto; }
.polished-page .table thead th { background: #f8f9fd; color: #66718b; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.polished-page .table tbody tr { transition: background .2s ease; }
.polished-page .table tbody tr:hover { background: #fafaff; }
.polished-page .form-control { border-radius: 10px; border-color: #dfe4f0; min-height: 41px; }
.polished-page .form-control:focus { border-color: var(--st-primary); box-shadow: 0 0 0 3px rgba(99,91,255,.1); }
.polished-page .btn { border-radius: 9px; }
.polished-page .alert { margin-bottom: 18px; }
@media (max-width: 767px) { .polished-page .card-block, .polished-page .card-body { padding: 14px !important; } }

/* RTL shell alignment: keep the content canvas full width beside the sidebar */
html[data-textdirection="rtl"] body.vertical-layout .app-content,
html[data-textdirection="rtl"] body.vertical-layout .content,
html[data-textdirection="rtl"] body.vertical-layout .footer { box-sizing: border-box; width: auto; }
html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .app-content { margin-left: 0; margin-right: 260px; }
html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .app-content { margin-left: 0 !important; margin-right: 60px !important; }
html[data-textdirection="rtl"] body.vertical-layout .content-wrapper { width: 100%; max-width: none; }
html[data-textdirection="rtl"] body.vertical-layout .header-navbar .navbar-container { width: auto; }
@media (max-width: 991px) {
    html[data-textdirection="rtl"] body.vertical-layout .app-content,
    html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .app-content { margin-right: 0; margin-left: 0; }
}

/* Final RTL correction: the legacy .content ancestor must not keep an LTR margin. */
html[data-textdirection="rtl"] body.vertical-layout .content,
html[data-textdirection="rtl"] body.vertical-layout .app-content { margin-left: 0 !important; }
html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .content,
html[data-textdirection="rtl"] body.vertical-layout.menu-expanded .app-content { margin-right: 260px !important; }
html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .content,
html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-collapsed .app-content { margin-right: 60px !important; }
@media (max-width: 991px) {
    html[data-textdirection="rtl"] body.vertical-layout .content,
    html[data-textdirection="rtl"] body.vertical-layout .app-content { margin-left: 0 !important; margin-right: 0 !important; }
}

/* RTL sidebar anchoring */
@media (min-width: 992px) {
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .main-menu,
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-flipped .main-menu { left: auto !important; right: 0 !important; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .header-navbar .navbar-header { float: right !important; }
}
/* Question-bank import results use the Bootstrap 4 alpha custom-control markup
   shipped with this dashboard theme. Keep the selector easy to see and give
   the whole result card a clear selected state. */
.board-question-selector {
    flex: 0 0 auto;
    min-height: 1.5rem;
    padding-top: 0.1rem;
    white-space: nowrap;
}

.board-question-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.board-question-card.board-question-card-selected {
    border-color: #37bc9b !important;
    background-color: rgba(55, 188, 155, 0.06);
    box-shadow: 0 0 0 1px rgba(55, 188, 155, 0.2);
}

/* Responsive dashboard shell -------------------------------------------------
   Robust's original tablet rules use a 60px rail, while the custom shell was
   forcing a 260px sidebar and removing the content offset. Keep one explicit
   contract for desktop, tablet and phone so the header, menu and canvas agree. */
body.fixed-navbar { padding-top: 72px; }
.header-navbar .navbar-wrapper { min-height: 72px; }
.header-navbar .navbar-header { padding: 0 12px; }
.header-navbar .navbar-header .navbar-nav { height: 72px; }
.logo-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.logo-container .navbar-brand1 { display: flex; height: 72px; align-items: center; justify-content: center; padding: 8px; }
.dashboard-menu-scrim { display: none; position: fixed; inset: 72px 0 0; z-index: 999; padding: 0; border: 0; background: rgba(10, 15, 35, .45); opacity: 0; cursor: default; backdrop-filter: blur(2px); transition: opacity .2s ease; }

/* Small laptops and landscape tablets need breathing room around controls. */
@media (max-width: 1199px) {
    .content-wrapper { padding: 24px 20px; }
    .dashboard-filter-card { display: block; }
    .dashboard-filter-heading { margin-bottom: 16px; }
    .content-body > .card > .card-header,
    .content-body > section > .card > .card-header { flex-wrap: wrap; gap: 10px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Tablet: persistent compact rail with an overlay expansion. */
@media (min-width: 768px) and (max-width: 991px) {
    body.vertical-layout.vertical-menu .header-navbar .navbar-header {
        width: 72px !important;
        min-width: 72px;
        padding: 0 8px;
    }
    .header-navbar .navbar-container { min-height: 72px; }
    .logo-container { position: static; transform: none; width: 100%; }
    .logo-container .navbar-brand1 { width: 100%; padding: 9px 0; }
    .logo-container .brand-logo { width: 44px; height: 44px; max-width: 44px; }

    body.vertical-layout.vertical-menu .main-menu {
        width: 72px !important;
        top: 72px;
        height: calc(100% - 72px);
        transition: width .25s ease, transform .25s ease;
    }
    body.vertical-layout.vertical-menu .content,
    body.vertical-layout.vertical-menu .app-content,
    body.vertical-layout.vertical-menu .footer { margin-left: 72px !important; }
    body.vertical-layout.vertical-menu .header-navbar .navbar-container { margin-left: 72px !important; }
    body.vertical-layout.vertical-menu .dashboard-side-brand,
    body.vertical-layout.vertical-menu .main-menu-header { display: none; }
    body.vertical-layout.vertical-menu .main-menu .main-menu-content { padding: 12px 8px 24px; }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a {
        min-height: 46px;
        padding: 13px 12px;
        text-align: center;
    }
    body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a > i {
        width: auto;
        margin: 0;
        font-size: 20px;
    }

    body.vertical-layout.vertical-menu.menu-expanded .main-menu { width: 280px !important; }
    body.vertical-layout.vertical-menu.menu-expanded .dashboard-side-brand { display: flex; }
    body.vertical-layout.vertical-menu.menu-expanded .main-menu-header { display: block !important; }
    body.vertical-layout.vertical-menu.menu-expanded .main-menu .main-menu-content { padding: 8px 12px 28px; }
    body.vertical-layout.vertical-menu.menu-expanded .dashboard-menu-scrim { display: block; opacity: 1; }

    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .content,
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .app-content,
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .footer { margin-right: 72px !important; margin-left: 0 !important; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .header-navbar .navbar-container { margin-right: 72px !important; margin-left: 0 !important; }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .main-menu { right: 0 !important; left: auto !important; }
}

/* Phones: full off-canvas navigation and a compact two-row header. */
@media (max-width: 767px) {
    body.vertical-layout { overflow-x: hidden; }
    .header-navbar { height: 72px; }
    .header-navbar .navbar-header {
        width: 100% !important;
        height: 72px;
        padding: 0 12px;
    }
    .header-navbar .navbar-header .navbar-nav { display: flex; width: 100%; align-items: center; justify-content: space-between; }
    .header-navbar .navbar-header .nav-item { float: none !important; }
    .header-navbar .navbar-header .nav-link { display: grid; min-width: 44px; height: 44px; place-items: center; padding: 0 !important; border-radius: 11px; }
    .logo-container { position: static; flex: 1; transform: none; text-align: center; }
    .logo-container .navbar-brand1 { width: max-content; max-width: 180px; margin: 0 auto; }
    .logo-container .brand-logo { width: auto; height: 42px; max-width: 150px; }
    .header-navbar.navbar-with-menu .navbar-container {
        position: absolute;
        top: 72px;
        left: 0;
        width: 100% !important;
        min-height: 0;
        padding: 0 12px;
        background: transparent !important;
    }
    #navbar-mobile.in,
    #navbar-mobile.collapsing {
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 0 12px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(24, 33, 60, .1);
    }
    #navbar-mobile .navbar-nav { display: flex; align-items: center; }
    #navbar-mobile .navbar-nav.float-xs-right { justify-content: flex-end; }

    body.vertical-layout.vertical-menu .main-menu {
        width: min(280px, 86vw) !important;
        top: 72px;
        height: calc(100% - 72px);
        transform: translate3d(-100%, 0, 0);
        transition: transform .25s ease;
    }
    body.vertical-layout.vertical-menu.menu-open .main-menu { transform: translate3d(0, 0, 0); }
    body.vertical-layout.vertical-menu .content,
    body.vertical-layout.vertical-menu .app-content,
    body.vertical-layout.vertical-menu .footer,
    body.vertical-layout.vertical-menu .header-navbar .navbar-container { margin-left: 0 !important; margin-right: 0 !important; }
    body.vertical-layout.vertical-menu.menu-open .dashboard-menu-scrim { display: block; opacity: 1; }

    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu .main-menu {
        right: 0 !important;
        left: auto !important;
        transform: translate3d(100%, 0, 0);
    }
    html[data-textdirection="rtl"] body.vertical-layout.vertical-menu.menu-open .main-menu { transform: translate3d(0, 0, 0); }

    .content-wrapper { padding: 18px 12px; }
    .dashboard-hero { min-height: 136px; margin-bottom: 18px; padding: 22px 20px; border-radius: 16px; }
    .dashboard-hero h1 { font-size: clamp(21px, 6vw, 25px); line-height: 1.2; }
    .dashboard-hero-copy { max-width: 88%; font-size: 12px; }
    .dashboard-hero-orb { display: none; }
    .dashboard-filter-card { margin-bottom: 24px; padding: 16px; border-radius: 15px; }
    .dashboard-filter-heading { min-width: 0; }
    .dashboard-filter-form { flex-wrap: wrap; gap: 10px; }
    .dashboard-filter-form .form-group { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .dashboard-filter-form .form-control { width: 100%; }
    .dashboard-filter-form .btn { flex: 1 1 auto; }
    .dashboard-section { margin: 26px 0; }
    .dashboard-section-heading { align-items: flex-start; gap: 8px; }
    .dashboard-section-heading > span { padding-top: 3px; text-align: right; }
    .dashboard-stat-grid > div { margin-bottom: 12px; }
    .dashboard-metric-card { min-height: 126px; padding: 17px; }
    .dashboard-metric-card strong { font-size: 25px; }
    .dashboard-chart-card { margin-bottom: 16px; padding: 17px; }
    .dashboard-chart-canvas { height: 220px; }
    .card { border-radius: 14px; }
    .content-header { display: block; }
    .content-header-right { width: 100%; }
    .content-body > .card > .card-header,
    .content-body > section > .card > .card-header { align-items: flex-start; padding: 14px 15px; }
    .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .form-actions .btn { flex: 1 1 auto; margin: 0 !important; }
    .modal-dialog { margin: 12px; }
}

@media (max-width: 479px) {
    .dashboard-filter-form .form-group { flex-basis: 100%; }
    .dashboard-filter-form .btn,
    .dashboard-reset { width: 100%; text-align: center; }
    .dashboard-section-heading { display: block; }
    .dashboard-section-heading > span { display: block; margin-top: 5px; text-align: left; }
    html[data-textdirection="rtl"] .dashboard-section-heading > span { text-align: right; }
    .dashboard-chart-canvas { height: 200px; }
}