/* ============================================================
   EduMaster Pro — Stitch Design System Overlay
   ------------------------------------------------------------
   Visual refresh applied on top of existing Bootstrap/_AdminLayout
   markup. Generated from Google Stitch designs (project
   11104292255825589176) on 2026-04-07.

   Loaded after theme.min.css so its rules take precedence.
   ============================================================ */

/* -------- Design Tokens -------- */
:root {
    /* Brand */
    --stitch-primary:        #1B4F72;
    --stitch-primary-50:     #e7eeff;
    --stitch-primary-100:    #dde1ff;
    --stitch-primary-200:    #b9c3ff;
    --stitch-primary-500:    #3953bd;
    --stitch-primary-700:    #1f3ba6;
    --stitch-secondary:      #2E86C1;
    --stitch-tertiary:       #754aa1;
    --stitch-accent:         #D4AC0D;
    --stitch-success:        #27AE60;
    --stitch-warning:        #E67E22;
    --stitch-danger:         #E74C3C;

    /* Surfaces (Material 3 tonal) */
    --stitch-surface:               #f9f9ff;
    --stitch-surface-bright:        #ffffff;
    --stitch-surface-container-low: #f0f3ff;
    --stitch-surface-container:     #e7eeff;
    --stitch-surface-variant:       #d9e3f9;
    --stitch-outline:               #757684;
    --stitch-outline-variant:       #c5c5d5;
    --stitch-on-surface:            #121c2c;
    --stitch-on-surface-variant:    #444653;

    /* Brand gradient (used on auth, hero buttons, badges) */
    --stitch-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --stitch-gradient-primary: linear-gradient(135deg, #1B4F72 0%, #2E86C1 100%);
    --stitch-gradient-gold: linear-gradient(135deg, #D4AC0D 0%, #E67E22 100%);

    /* Shape */
    --stitch-radius-sm: 0.5rem;
    --stitch-radius:    0.75rem;
    --stitch-radius-lg: 1.25rem;
    --stitch-radius-xl: 1.5rem;

    /* Elevation */
    --stitch-shadow-sm: 0 1px 3px rgba(18, 28, 44, 0.06), 0 1px 2px rgba(18, 28, 44, 0.04);
    --stitch-shadow:    0 6px 18px rgba(27, 79, 114, 0.08);
    --stitch-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Type */
    --stitch-font-sans: 'Cairo', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* -------- Global Type & Surface -------- */
body,
html {
    font-family: var(--stitch-font-sans) !important;
    background: var(--stitch-surface) !important;
    color: var(--stitch-on-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-header-title,
.card-title {
    font-family: var(--stitch-font-sans) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Material Symbols utility for any view that opts in */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* -------- Cards -------- */
.card {
    border: none !important;
    border-radius: var(--stitch-radius-lg) !important;
    box-shadow: var(--stitch-shadow) !important;
    background: var(--stitch-surface-bright);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    box-shadow: 0 10px 28px rgba(27, 79, 114, 0.12) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--stitch-outline-variant) !important;
    padding: 1.1rem 1.4rem;
}

.card-body {
    padding: 1.4rem;
}

/* KPI / metric cards */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger {
    color: #fff;
    border: none !important;
}
.card.bg-primary  { background: var(--stitch-gradient-primary) !important; }
.card.bg-success  { background: linear-gradient(135deg, #27AE60 0%, #1e8449 100%) !important; }
.card.bg-info     { background: linear-gradient(135deg, #2E86C1 0%, #21618c 100%) !important; }
.card.bg-warning  { background: var(--stitch-gradient-gold) !important; }
.card.bg-danger   { background: linear-gradient(135deg, #E74C3C 0%, #b03a2e 100%) !important; }

/* -------- Buttons -------- */
.btn {
    border-radius: var(--stitch-radius) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--stitch-gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(27, 79, 114, 0.25);
}
.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(27, 79, 114, 0.32);
}

.btn-outline-primary {
    border: 2px solid var(--stitch-primary) !important;
    color: var(--stitch-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--stitch-primary) !important;
    color: #fff !important;
}

.btn-sm  { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.btn-lg  { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* -------- Inputs -------- */
.form-control,
.form-select {
    border-radius: var(--stitch-radius) !important;
    border: 1.5px solid var(--stitch-outline-variant) !important;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    background: var(--stitch-surface-container-low);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--stitch-primary) !important;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(27, 79, 114, 0.10) !important;
}
.form-control-sm,
.form-select-sm {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}
.form-label {
    font-weight: 600;
    color: var(--stitch-on-surface-variant);
    margin-bottom: 0.4rem;
}

/* -------- Badges -------- */
.badge {
    border-radius: 999px !important;
    padding: 0.42em 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge.bg-primary   { background: var(--stitch-primary) !important; }
.badge.bg-secondary { background: var(--stitch-tertiary) !important; }
.badge.bg-success   { background: var(--stitch-success) !important; }
.badge.bg-warning   { background: var(--stitch-warning) !important; color: #fff; }
.badge.bg-danger    { background: var(--stitch-danger) !important; }
.badge.bg-info      { background: var(--stitch-secondary) !important; }

/* -------- Tables -------- */
.table {
    background: transparent;
}
.table thead th {
    background: var(--stitch-surface-container-low);
    border-bottom: 1px solid var(--stitch-outline-variant) !important;
    color: var(--stitch-on-surface-variant);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 1rem;
}
.table tbody td {
    padding: 0.85rem 1rem;
    border-color: var(--stitch-outline-variant) !important;
    vertical-align: middle;
}
.table-hover tbody tr:hover {
    background: var(--stitch-surface-container-low) !important;
}

/* -------- Sidebar (NXL Admin layout) -------- */
.nxl-navigation {
    background: linear-gradient(180deg, #1B4F72 0%, #143959 100%) !important;
}
.nxl-navigation .nxl-link {
    color: rgba(255, 255, 255, 0.82) !important;
    border-radius: var(--stitch-radius);
    margin: 2px 8px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nxl-navigation .nxl-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    transform: translateX(-2px);
}
.nxl-navigation .nxl-item.active > .nxl-link,
.nxl-navigation .nxl-link.active {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--stitch-accent);
}
.nxl-navigation .nxl-caption {
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    padding: 1.2rem 1.4rem 0.6rem;
}

/* -------- Page Header -------- */
.page-header {
    padding: 1.4rem 0 1.2rem;
    margin-bottom: 1rem;
}
.page-header-title {
    color: var(--stitch-primary) !important;
    font-weight: 800;
}
.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}
.breadcrumb-item a { color: var(--stitch-secondary); }
.breadcrumb-item.active { color: var(--stitch-on-surface-variant); }

/* -------- Auth Pages (Login / 2FA / Forgot) -------- */
.stitch-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--stitch-gradient);
    position: relative;
    overflow: hidden;
}
.stitch-auth-shell::before,
.stitch-auth-shell::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    filter: blur(60px);
    pointer-events: none;
}
.stitch-auth-shell::before {
    width: 24rem; height: 24rem; top: -4rem; right: -4rem;
}
.stitch-auth-shell::after {
    width: 32rem; height: 32rem; bottom: -6rem; left: -6rem;
}
.stitch-auth-card {
    background: #fff;
    border-radius: var(--stitch-radius-xl);
    box-shadow: var(--stitch-shadow-lg);
    padding: 3.5rem 2.5rem 2.5rem;
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 2;
}
.stitch-auth-logo {
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 6rem;
    background: #fff;
    border-radius: 50%;
    padding: 0.5rem;
    box-shadow: var(--stitch-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.stitch-auth-logo > div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--stitch-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
}
.stitch-gradient-text {
    background: var(--stitch-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* -------- Modals -------- */
.modal-content {
    border: none !important;
    border-radius: var(--stitch-radius-lg) !important;
    box-shadow: var(--stitch-shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--stitch-outline-variant) !important;
    padding: 1.2rem 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--stitch-outline-variant) !important;
    padding: 1rem 1.5rem;
}

/* -------- Alerts -------- */
.alert {
    border: none !important;
    border-radius: var(--stitch-radius) !important;
    padding: 0.95rem 1.15rem;
    border-right: 4px solid transparent !important;
}
.alert-info    { background: #e7f1ff; color: #1f3ba6; border-right-color: var(--stitch-secondary) !important; }
.alert-success { background: #d4f5e0; color: #1e8449; border-right-color: var(--stitch-success) !important; }
.alert-warning { background: #fef0d9; color: #9c5208; border-right-color: var(--stitch-warning) !important; }
.alert-danger  { background: #fde2e0; color: #93000a; border-right-color: var(--stitch-danger) !important; }

/* -------- Tabs / Pills -------- */
.nav-tabs {
    border-bottom: 1px solid var(--stitch-outline-variant);
}
.nav-tabs .nav-link {
    border: none !important;
    color: var(--stitch-on-surface-variant);
    font-weight: 600;
    padding: 0.85rem 1.2rem;
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
}
.nav-tabs .nav-link.active {
    color: var(--stitch-primary);
    border-bottom-color: var(--stitch-primary) !important;
    background: transparent !important;
}

/* -------- Switches -------- */
.form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    background-color: var(--stitch-outline-variant);
    border: none;
    cursor: pointer;
}
.form-switch .form-check-input:checked {
    background-color: var(--stitch-primary);
}
.form-switch.form-switch-lg .form-check-input {
    width: 3.2em;
    height: 1.7em;
}

/* -------- Select2 (used widely) -------- */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--stitch-radius) !important;
    border: 1.5px solid var(--stitch-outline-variant) !important;
    background: var(--stitch-surface-container-low) !important;
    min-height: 44px;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--stitch-primary) !important;
    box-shadow: 0 0 0 4px rgba(27, 79, 114, 0.10) !important;
}

/* -------- Utility helpers -------- */
.stitch-floating-orb {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}
.stitch-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* -------- RTL fine-tuning -------- */
[dir="rtl"] .nxl-navigation .nxl-link:hover {
    transform: translateX(2px);
}
[dir="rtl"] .alert {
    border-right: none !important;
    border-left: 4px solid transparent !important;
}
[dir="rtl"] .alert-info    { border-left-color: var(--stitch-secondary) !important; }
[dir="rtl"] .alert-success { border-left-color: var(--stitch-success) !important; }
[dir="rtl"] .alert-warning { border-left-color: var(--stitch-warning) !important; }
[dir="rtl"] .alert-danger  { border-left-color: var(--stitch-danger) !important; }

/* -------- Print -------- */
@media print {
    .nxl-navigation, .nxl-header, .page-header-right { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* === Stitch Shell Enhancements (header/sidebar/footer) === */
/* Refined look for the admin layout chrome — sidebar, top header, and footer.
   Derived from Stitch references: Admin Dashboard Sidebar Concept & Admin Top
   Header Bar (project 11104292255825589176). These rules retouch the existing
   NXL markup without requiring any .cshtml changes. */

/* ---------- Sidebar ---------- */
.nxl-navigation {
    background: var(--stitch-gradient) !important;
    background-attachment: fixed !important;
    border: 0 !important;
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        4px 0 24px rgba(31, 59, 166, 0.12) !important;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
    color: #ffffff !important;
}

[dir="rtl"] .nxl-navigation {
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        -4px 0 24px rgba(31, 59, 166, 0.12) !important;
}

.nxl-navigation::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(0, 0, 0, 0.18), transparent 60%);
    z-index: 0;
}

.nxl-navigation .navbar-wrapper,
.nxl-navigation .m-header,
.nxl-navigation .navbar-content {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: 0 !important;
}

/* Brand area */
.nxl-navigation .m-header {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.nxl-navigation .m-header .b-brand,
.nxl-navigation .m-header .logo-lg,
.nxl-navigation .m-header .logo-sm {
    color: #ffffff !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    background: linear-gradient(135deg, #ffffff 0%, #e9e1ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Menu labels / captions */
.nxl-navigation .nxl-caption,
.nxl-navigation .nxl-caption *,
.nxl-navigation .nxl-caption label,
.nxl-navigation .nxl-caption span,
.nxl-navigation .nxl-menu-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    text-transform: uppercase;
    font-size: .7rem !important;
    letter-spacing: .12em;
    padding: 1rem 1.25rem .5rem !important;
}
.nxl-navigation .nxl-caption > label,
.nxl-navigation .nxl-caption > span {
    color: inherit !important;
}

/* Nav items */
.nxl-navigation .nxl-item {
    margin: .15rem 0 !important;
}
.nxl-navigation .nxl-item .nxl-link {
    color: rgba(255, 255, 255, 0.88) !important;
    margin: .25rem .75rem !important;
    padding: .7rem .85rem !important;
    border-radius: .75rem !important;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 500 !important;
    font-size: .92rem !important;
    transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease, color .2s ease !important;
    position: relative;
    border: 0 !important;
}

.nxl-navigation .nxl-item .nxl-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    transform: translateX(-2px);
}
[dir="rtl"] .nxl-navigation .nxl-item .nxl-link:hover {
    transform: translateX(2px);
}

/* High-specificity contrast fix — force readable white text on gradient sidebar */
.nxl-navigation .nxl-link,
.nxl-navigation .nxl-link *,
.nxl-navigation .nxl-link .nxl-mtext,
.nxl-navigation .nxl-link .nxl-micon,
.nxl-navigation .nxl-link .nxl-arrow,
.nxl-navigation a,
.nxl-navigation a span,
.nxl-navigation a i,
.nxl-navigation .nxl-submenu .nxl-link {
    color: #ffffff !important;
    opacity: 1 !important;
}
.nxl-navigation .nxl-caption,
.nxl-navigation .nxl-caption *,
.nxl-navigation .nxl-caption label,
.nxl-navigation .nxl-caption span,
.nxl-navigation .nxl-menu-title {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.nxl-navigation .nxl-link .nxl-mtext {
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Icon chips */
.nxl-navigation .nxl-item .nxl-link .nxl-micon,
.nxl-navigation .nxl-item .nxl-link > i:first-child,
.nxl-navigation .nxl-item .nxl-link > svg:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: .6rem;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    font-size: 1rem !important;
    transition: background-color .25s ease, transform .25s ease;
}

.nxl-navigation .nxl-item .nxl-link:hover .nxl-micon,
.nxl-navigation .nxl-item .nxl-link:hover > i:first-child,
.nxl-navigation .nxl-item .nxl-link:hover > svg:first-child {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: scale(1.05);
}

.nxl-navigation .nxl-item .nxl-link .nxl-mtext {
    color: inherit !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 500 !important;
    flex: 1;
}

/* Expand / arrow */
.nxl-navigation .nxl-item .nxl-link .nxl-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: transform .25s ease;
}
.nxl-navigation .nxl-item.active > .nxl-link .nxl-arrow,
.nxl-navigation .nxl-item.nxl-trigger > .nxl-link .nxl-arrow {
    transform: rotate(90deg);
}
[dir="rtl"] .nxl-navigation .nxl-item.active > .nxl-link .nxl-arrow,
[dir="rtl"] .nxl-navigation .nxl-item.nxl-trigger > .nxl-link .nxl-arrow {
    transform: rotate(-90deg);
}

/* Active state — white pill with accent bar */
.nxl-navigation .nxl-item.active > .nxl-link,
.nxl-navigation .nxl-item .nxl-link.active,
.nxl-navigation .nxl-item.nxl-trigger > .nxl-link {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.nxl-navigation .nxl-item.active > .nxl-link::before,
.nxl-navigation .nxl-item .nxl-link.active::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: -.75rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}
[dir="rtl"] .nxl-navigation .nxl-item.active > .nxl-link::before,
[dir="rtl"] .nxl-navigation .nxl-item .nxl-link.active::before {
    left: auto;
    right: -.75rem;
    border-radius: 4px 0 0 4px;
}

.nxl-navigation .nxl-item.active > .nxl-link .nxl-micon,
.nxl-navigation .nxl-item .nxl-link.active .nxl-micon,
.nxl-navigation .nxl-item.active > .nxl-link > i:first-child,
.nxl-navigation .nxl-item .nxl-link.active > i:first-child {
    background: rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Submenus */
.nxl-navigation .nxl-submenu {
    background: rgba(0, 0, 0, 0.14) !important;
    border-radius: .75rem !important;
    margin: .25rem .75rem !important;
    padding: .25rem 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.nxl-navigation .nxl-submenu .nxl-link {
    margin: .1rem .5rem !important;
    padding: .55rem .75rem !important;
    font-size: .86rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
}
.nxl-navigation .nxl-submenu .nxl-link::before {
    content: "•";
    opacity: .5;
    margin-inline-end: .35rem;
}
.nxl-navigation .nxl-submenu .nxl-link:hover,
.nxl-navigation .nxl-submenu .nxl-item.active > .nxl-link,
.nxl-navigation .nxl-submenu .nxl-link.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* Scrollbar inside sidebar */
.nxl-navigation .navbar-content::-webkit-scrollbar { width: 6px; }
.nxl-navigation .navbar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
}
.nxl-navigation .navbar-content::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header ---------- */
.nxl-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--stitch-outline-variant) !important;
    box-shadow: 0 1px 0 rgba(27, 79, 114, 0.04), 0 10px 30px -20px rgba(27, 79, 114, 0.25) !important;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
    min-height: 72px;
}

.nxl-header .header-wrapper {
    height: 72px;
    padding: 0 1.25rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nxl-header .header-left-items,
.nxl-header .header-right-items {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Header nav icon buttons */
.nxl-header .nxl-h-item > .nxl-head-link,
.nxl-header .nxl-h-item > a,
.nxl-header .nxl-h-item > button {
    width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: .75rem !important;
    background: var(--stitch-surface-container-low) !important;
    color: var(--stitch-on-surface) !important;
    border: 1px solid transparent !important;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    position: relative;
}
.nxl-header .nxl-h-item > .nxl-head-link:hover,
.nxl-header .nxl-h-item > a:hover,
.nxl-header .nxl-h-item > button:hover {
    background: #ffffff !important;
    border-color: var(--stitch-outline-variant) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(27, 79, 114, 0.25);
    color: var(--stitch-primary) !important;
}

/* Notification badge */
.nxl-header .nxl-h-item .badge,
.nxl-header .nxl-h-item .nxl-h-badge,
.nxl-header .nxl-h-item .notification-badge {
    background: var(--stitch-gradient) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(118, 75, 162, 0.4);
}

/* Search input in header */
.nxl-header .header-search,
.nxl-header .search-full,
.nxl-header input[type="search"],
.nxl-header .form-control[type="text"] {
    border-radius: 999px !important;
    background: var(--stitch-surface-container-low) !important;
    border: 1px solid transparent !important;
    padding: .55rem 1rem .55rem 2.5rem !important;
    font-family: 'Cairo', sans-serif !important;
    min-width: 260px;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
[dir="rtl"] .nxl-header input[type="search"],
[dir="rtl"] .nxl-header .form-control[type="text"] {
    padding: .55rem 2.5rem .55rem 1rem !important;
}
.nxl-header input[type="search"]:focus,
.nxl-header .form-control[type="text"]:focus {
    background: #ffffff !important;
    border-color: var(--stitch-primary-200) !important;
    box-shadow: 0 0 0 4px rgba(57, 83, 189, 0.12) !important;
    outline: 0;
}

/* User dropdown — gradient avatar ring */
.nxl-header .nxl-h-item.nxl-h-dropdown .user-avtar,
.nxl-header .dropdown .user-avtar,
.nxl-header .dropdown img.rounded-circle,
.nxl-header .user-name .user-avtar {
    border-radius: 50% !important;
    padding: 2px !important;
    background: var(--stitch-gradient) !important;
    box-shadow: 0 6px 18px rgba(118, 75, 162, 0.35);
}
.nxl-header .nxl-h-item.nxl-h-dropdown .user-avtar img,
.nxl-header .dropdown .user-avtar img {
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* User dropdown text */
.nxl-header .user-name,
.nxl-header .user-info {
    font-family: 'Cairo', sans-serif !important;
}
.nxl-header .user-name .fw-bold,
.nxl-header .user-info .u-name {
    color: var(--stitch-on-surface) !important;
    font-weight: 700 !important;
}
.nxl-header .user-name small,
.nxl-header .user-info .u-designation {
    color: var(--stitch-on-surface-variant) !important;
    font-size: .72rem !important;
}

/* Dropdown menus coming from header */
.nxl-header .dropdown-menu {
    border-radius: var(--stitch-radius-lg) !important;
    border: 1px solid var(--stitch-outline-variant) !important;
    box-shadow: 0 20px 48px -16px rgba(27, 79, 114, 0.25) !important;
    padding: .5rem !important;
    font-family: 'Cairo', sans-serif !important;
}
.nxl-header .dropdown-menu .dropdown-item {
    border-radius: .6rem !important;
    padding: .55rem .75rem !important;
    transition: background-color .2s ease, color .2s ease;
}
.nxl-header .dropdown-menu .dropdown-item:hover {
    background: var(--stitch-surface-container-low) !important;
    color: var(--stitch-primary) !important;
}

/* ---------- Footer ---------- */
.footer,
.nxl-footer {
    background: linear-gradient(180deg, var(--stitch-surface) 0%, var(--stitch-surface-container-low) 100%) !important;
    border-top: 1px solid var(--stitch-outline-variant) !important;
    padding: 1rem 1.25rem !important;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
    color: var(--stitch-on-surface-variant) !important;
    font-size: .85rem !important;
    position: relative;
}
.footer::before,
.nxl-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(102, 126, 234, 0.35) 20%,
        rgba(118, 75, 162, 0.35) 80%,
        transparent 100%);
    pointer-events: none;
}

.footer a,
.nxl-footer a {
    color: var(--stitch-primary) !important;
    text-decoration: none;
    font-weight: 600;
}
.footer a:hover,
.nxl-footer a:hover { text-decoration: underline; }

/* Version / status badges in the footer */
.footer .badge,
.nxl-footer .badge,
.footer .status-badge,
.nxl-footer .status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    background: #ffffff !important;
    color: var(--stitch-on-surface) !important;
    border: 1px solid var(--stitch-outline-variant) !important;
    box-shadow: 0 2px 6px rgba(27, 79, 114, 0.06);
}
.footer .badge.bg-success,
.nxl-footer .badge.bg-success {
    background: rgba(39, 174, 96, 0.12) !important;
    color: var(--stitch-success) !important;
    border-color: rgba(39, 174, 96, 0.25) !important;
}
.footer .badge.bg-success::before,
.nxl-footer .badge.bg-success::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stitch-success);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

/* RTL fine tuning for the shell */
[dir="rtl"] .footer,
[dir="rtl"] .nxl-footer { text-align: right; }

/* ---------- RTL shell positioning overrides ----------
   The base NXL theme (theme.min.css) hard-codes LTR offsets:
     .nxl-navigation { position: fixed; width: 280px; }  (implicit left:0)
     .nxl-header     { position: fixed; left: 280px; right: 0; }
     .nxl-container  { margin-left: 280px; }
   None of these have RTL counterparts in the vendor theme, so in Arabic
   mode the sidebar drifts off the right edge and the header/content
   overflow to the left. The rules below anchor the sidebar to the right,
   flip the header offsets, and swap the container margin for RTL only —
   without touching the visual (gradient / shadows) styling above. */

[dir="rtl"] .nxl-navigation {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .nxl-header {
    left: 0 !important;
    right: 280px !important;
}

[dir="rtl"] .nxl-container {
    margin-left: 0 !important;
    margin-right: 280px !important;
}

/* Minimenu (collapsed sidebar) variant — base theme shrinks sidebar to 100px */
[dir="rtl"].minimenu .nxl-header,
html[dir="rtl"].minimenu .nxl-header {
    right: 100px !important;
    left: 0 !important;
}
[dir="rtl"].minimenu .nxl-container,
html[dir="rtl"].minimenu .nxl-container {
    margin-right: 100px !important;
    margin-left: 0 !important;
}

/* Mobile: base theme slides sidebar off-screen with left:-280px.
   In RTL it must slide off to the right instead. */
@media (max-width: 1024px) {
    [dir="rtl"] .nxl-navigation {
        left: auto !important;
        right: -280px !important;
    }
    [dir="rtl"] .nxl-navigation.mob-navigation-active {
        right: 0 !important;
        left: auto !important;
    }
    [dir="rtl"] .nxl-header,
    [dir="rtl"] .nxl-container {
        right: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---------- RTL header inner alignment ----------
   The markup is:
     .header-wrapper (display:flex)
       .header-left   (toggle + hamburger)
       .header-right.ms-auto  (lang / theme / bell / avatar)
   Bootstrap's `ms-auto` maps to margin-inline-start:auto, which in RTL
   becomes margin-right:auto and pushes `.header-right` to the LEFT edge.
   rtl-fixes.css also does `margin-right:auto` on the same element, which
   compounds the issue. Force the RTL flex direction so that `.header-left`
   stays anchored at the RIGHT (start) of the bar and `.header-right` is
   pinned to the LEFT (end), matching the user's expectation that the
   action cluster lives at the visual right — which in RTL is the start
   edge, i.e. the first flex child. We flip the order so the action
   cluster becomes the first visual child in RTL. */

[dir="rtl"] .nxl-header { direction: rtl; }

[dir="rtl"] .nxl-header .header-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}

/* Neutralise the ms-auto / rtl-fixes margin-right:auto that drags the
   action cluster to the wrong side, then pin it to the start (right) in
   RTL via margin-left:auto. */
[dir="rtl"] .nxl-header .header-wrapper .header-right,
[dir="rtl"] .nxl-header .header-wrapper .header-right.ms-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
    order: 0 !important;
}

[dir="rtl"] .nxl-header .header-wrapper .header-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 1 !important;
}

/* Keep dropdown menus anchored to the action trigger in RTL */
[dir="rtl"] .nxl-header .header-wrapper .nxl-h-dropdown.dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

/* ---------- Sidebar brand (.m-header) background ----------
   Base theme.min.css paints `.m-header` with `background:#fff`, which
   shows up as a white rectangle on top of the dark gradient sidebar.
   Make it transparent so the gradient shines through, and drop the
   vendor border that clashes with the gradient edge. Applies to both
   directions. */
.nxl-navigation .m-header,
[dir="rtl"] .nxl-navigation .m-header {
    background: transparent !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Ensure the brand logo / text stays legible on the gradient */
.nxl-navigation .m-header .b-brand,
.nxl-navigation .m-header .b-brand * {
    color: #ffffff;
}

/* Sidebar brand: give logo a white pill so it stays legible on gradient bg */
.nxl-navigation .m-header .b-brand {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nxl-navigation .m-header .b-brand .logo-lg,
.nxl-navigation .m-header .b-brand img {
    max-height: 38px;
    width: auto;
    filter: none !important;
}

/* RTL: pin header dropdowns to right edge of trigger; override popper inline styles */
[dir="rtl"] .nxl-header .dropdown-menu,
[dir="rtl"] .nxl-h-item .dropdown-menu,
[dir="rtl"] .nxl-h-dropdown,
[dir="rtl"] .dropdown-menu-end {
    inset: 100% 0 auto auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}