/* NU Driver Panel typography */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'),
        url('/fonts/Inter/Inter-VariableFont_slnt,wght.ttf') format('truetype'),
        url('/fonts/Inter/InterVariable.woff2') format('woff2'),
        url('/fonts/Inter/Inter-Regular.woff2') format('woff2'),
        url('/fonts/Inter/Inter-Regular.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-Regular.ttf') format('truetype'),
        url('/fonts/Almarai/Almarai-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-Bold.ttf') format('truetype'),
        url('/fonts/Almarai/Almarai-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-ExtraBold.ttf') format('truetype'),
        url('/fonts/Almarai/Almarai-ExtraBold.woff2') format('woff2');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

html,
body,
.fi-body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html[lang="ar"],
html[dir="rtl"],
html[lang="ar"] body,
html[dir="rtl"] body,
html[lang="ar"] .fi-body,
html[dir="rtl"] .fi-body {
    font-family: 'Almarai', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

:root {
    --nu-navy: #1c3144;
    --nu-navy-2: #152435;
    --nu-blue: #2097d3;
    --nu-blue-dark: #0f82bd;
    --nu-soft: #f3f8fd;
    --nu-line: #dfe8f2;
    --nu-text: #17212f;
}

html,
body {
    background: radial-gradient(circle at 0% 0%, #eaf5fb 0, #f8fbff 36%, #eef4f9 100%) !important;
}

.fi-sidebar {
    background: linear-gradient(180deg, var(--nu-navy) 0%, var(--nu-navy-2) 100%) !important;
    color: #f8fafc !important;
    border-inline-end: 0 !important;
    box-shadow: 12px 0 38px rgba(15, 35, 55, .18);
}

.fi-sidebar .fi-logo,
.fi-sidebar-header,
.fi-sidebar-nav-groups,
.fi-sidebar-nav {
    color: #f8fafc !important;
}

.fi-sidebar-item a,
.fi-sidebar-item button {
    border-radius: 16px !important;
    margin-inline: .65rem !important;
    min-height: 46px !important;
    transition: all .2s ease !important;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover {
    background: rgba(255, 255, 255, .11) !important;
    transform: translateX(-1px);
}

.fi-sidebar-item.fi-active a,
.fi-sidebar-item-active a,
.fi-sidebar-item a[aria-current="page"] {
    background: rgba(32, 151, 211, .95) !important;
    color: #fff !important;
}

.fi-sidebar-item-icon,
.fi-sidebar svg {
    color: currentColor !important;
}



.fi-main {
    background: transparent !important;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-in-entry-wrp,
.fi-fo-field-wrp {
    border-radius: 22px !important;
}

.fi-ta-ctn,
.fi-section,
.fi-wi-stats-overview-stat {
    box-shadow: 0 18px 55px rgba(25, 49, 68, .08) !important;
    border: 1px solid rgba(207, 219, 232, .82) !important;
}

.fi-btn-color-primary {
    background: var(--nu-blue) !important;
}

.fi-btn-color-primary:hover {
    background: var(--nu-blue-dark) !important;
}

.nu-sidebar-footer {
    margin: 18px 14px 20px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    color: #eaf5fb;
    display: grid;
    gap: 4px;
}

.nu-sidebar-footer strong {
    font-size: 14px;
    letter-spacing: .02em;
}

.nu-sidebar-footer span {
    color: #aac6d9;
    font-size: 12px;
}

/* Full-screen custom Filament login page */
.nu-login-stage {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(460px, 1.15fr);
    gap: 36px;
    align-items: stretch;
    padding: 54px 8vw;
    background: radial-gradient(circle at top left, #e8f4fb 0, #f8fbff 40%, #edf4fa 100%);
    color: var(--nu-text);
    overflow: auto;
}

.nu-login-card,
.nu-login-hero {
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(22, 43, 64, .12);
}

.nu-login-card {
    background: #fff;
    padding: min(54px, 6vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(210, 223, 237, .9);
}

.nu-login-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #eef5fb;
    font-size: 28px;
    margin-inline-start: auto;
    margin-bottom: 22px;
}

.nu-login-title-wrap {
    text-align: end;
    margin-bottom: 34px;
}

html[dir="ltr"] .nu-login-title-wrap,
html[dir="ltr"] .nu-login-card .fi-fo-field-wrp-label,
html[dir="ltr"] .nu-login-bottom {
    text-align: start;
}

.nu-login-title-wrap h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.035em;
    color: #17212f;
}

.nu-login-title-wrap p {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 21px);
    color: #778596;
    font-weight: 600;
}

.nu-login-form {
    display: grid;
    gap: 18px;
}

.nu-login-card .fi-input-wrp {
    min-height: 58px;
    border-radius: 14px !important;
    border-color: #dce6ef !important;
    box-shadow: none !important;
}

.nu-login-card .fi-input {
    font-size: 17px !important;
}

.nu-login-card .fi-fo-field-wrp-label {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1c2633 !important;
    justify-content: flex-end;
}

.nu-login-submit {
    min-height: 56px !important;
    border-radius: 14px !important;
    width: 100% !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    background: var(--nu-blue) !important;
}

.nu-login-divider {
    height: 1px;
    background: #dce6ef;
    margin: 34px 0 24px;
}

.nu-login-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: #7d8898;
    font-weight: 800;
    text-align: end;
}

.nu-login-lang {
    display: inline-flex;
    gap: 8px;
    background: #eef5fb;
    padding: 6px;
    border-radius: 999px;
}

.nu-login-lang a {
    min-width: 42px;
    text-align: center;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #607080;
    text-decoration: none;
}

.nu-login-lang a.active {
    background: var(--nu-blue);
    color: #fff;
}

.nu-login-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1d3144 0%, #17283a 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: min(72px, 7vw);
}

.nu-login-hero::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 999px;
    background: rgba(32, 151, 211, .15);
    left: -145px;
    bottom: -180px;
}

html[dir="ltr"] .nu-login-hero::after {
    left: auto;
    right: -145px;
}

.nu-login-badge {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: var(--nu-blue);
    color: #fff;
    font-size: 38px;
    font-weight: 1000;
    letter-spacing: .08em;
    margin-bottom: 44px;
    box-shadow: 0 20px 40px rgba(32, 151, 211, .24);
}

.nu-login-hero h2 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 58px);
    line-height: 1.05;
    letter-spacing: .02em;
    font-weight: 1000;
}

.nu-login-hero p {
    color: #becbd7;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 800;
    margin: 32px 0 44px;
}

.nu-login-checks {
    display: grid;
    gap: 22px;
    color: #f5f9fc;
    font-size: clamp(17px, 1.8vw, 25px);
    font-weight: 900;
}

.nu-login-checks div {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.nu-login-checks span {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(22, 142, 84, .38);
    color: #6cf0a8;
    font-weight: 1000;
}

@media (max-width: 980px) {
    .nu-login-stage {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .nu-login-hero {
        min-height: 360px;
        order: -1;
    }
}

@media (max-width: 620px) {
    .nu-login-stage {
        padding: 14px;
        gap: 16px;
    }

    .nu-login-card {
        padding: 28px 22px;
    }

    .nu-login-bottom {
        flex-direction: column;
        align-items: stretch;
    }
}

/* v7: readability + compact login + dashboard stat cards */
.fi-header-subheading,
.fi-section-header-description,
.fi-ta-header-description,
.fi-fo-field-wrp-helper-text,
.fi-breadcrumbs-item-label {
    color: #64748b !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-textarea,
.fi-fo-field-wrp .fi-input-wrp {
    background: #ffffff !important;
    border-color: #d8e4ef !important;
    box-shadow: 0 8px 22px rgba(15, 35, 55, .04) !important;
}

.fi-input,
.fi-select-input,
.fi-textarea,
.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    -webkit-text-fill-color: #17212f !important;
}

.fi-input::placeholder,
.fi-textarea::placeholder,
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: #8a98aa !important;
    -webkit-text-fill-color: #8a98aa !important;
}

/* Dashboard cards: same dark family as sidebar with icons */
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat.nu-stat-card {
    background: linear-gradient(135deg, #0d1728 0%, #111f32 100%) !important;
    color: #f8fbff !important;
    border: 1px solid rgba(148, 190, 217, .18) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 45px rgba(12, 31, 48, .18) !important;
    overflow: hidden !important;
    position: relative !important;
}

.fi-wi-stats-overview-stat::after,
.fi-wi-stats-overview-stat.nu-stat-card::after {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    background: rgba(32, 151, 211, .11);
    inset-inline-end: -48px;
    bottom: -62px;
    pointer-events: none;
}

.fi-wi-stats-overview-stat * {
    color: inherit !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon,
.fi-wi-stats-overview-stat svg {
    color: #2097d3 !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    color: #a9bacb !important;
    font-weight: 700 !important;
}

/* Compact, balanced login screen */
.nu-login-stage {
    grid-template-columns: minmax(340px, 480px) minmax(460px, 1fr) !important;
    gap: 28px !important;
    padding: clamp(22px, 4vw, 44px) clamp(26px, 7vw, 92px) !important;
    align-items: center !important;
}

.nu-login-card,
.nu-login-hero {
    border-radius: 22px !important;
    min-height: min(680px, calc(100vh - 88px)) !important;
}

.nu-login-card {
    padding: clamp(28px, 4vw, 44px) !important;
    max-width: 480px !important;
    width: 100% !important;
    justify-self: end !important;
}

html[dir="ltr"] .nu-login-card {
    justify-self: start !important;
}

.nu-login-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    font-size: 24px !important;
    margin-bottom: 18px !important;
}

.nu-login-title-wrap {
    margin-bottom: 24px !important;
}

.nu-login-title-wrap h1 {
    font-size: clamp(28px, 3vw, 40px) !important;
    letter-spacing: -.03em !important;
}

.nu-login-title-wrap p {
    font-size: clamp(14px, 1.2vw, 18px) !important;
    line-height: 1.55 !important;
}

.nu-login-form {
    gap: 14px !important;
}

.nu-login-card .fi-fo-field-wrp-label,
.nu-login-card .fi-fo-field-wrp-label span,
.nu-login-card label {

    font-size: 14px !important;
    font-weight: 800 !important;
}

.nu-login-card .fi-input-wrp {
    min-height: 48px !important;
    border-radius: 13px !important;
    background: #fff !important;
    border-color: #d8e4ef !important;
}

.nu-login-card .fi-input,
.nu-login-card .fi-input-wrp input {
    font-size: 15px !important;

    -webkit-text-fill-color: #17212f !important;
}

.nu-login-card .fi-checkbox-input,
.nu-login-card input[type="checkbox"] {
    accent-color: #2097d3 !important;
}

.nu-login-submit {
    min-height: 50px !important;
    font-size: 15px !important;
    border-radius: 13px !important;
}

.nu-login-divider {
    margin: 24px 0 18px !important;
}

.nu-login-bottom {
    font-size: 13px !important;
}

.nu-login-hero {
    padding: clamp(38px, 5vw, 62px) !important;
}

.nu-login-badge {
    width: 82px !important;
    height: 82px !important;
    border-radius: 22px !important;
    font-size: 30px !important;
    margin-bottom: 34px !important;
}

.nu-login-hero h2 {
    font-size: clamp(34px, 4vw, 54px) !important;
}

.nu-login-hero p {
    font-size: clamp(17px, 1.7vw, 23px) !important;
    line-height: 1.55 !important;
    margin: 24px 0 34px !important;
}

.nu-login-checks {
    gap: 16px !important;
    font-size: clamp(16px, 1.55vw, 22px) !important;
}

.nu-login-checks span {
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 980px) {
    .nu-login-stage {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }

    .nu-login-card,
    .nu-login-hero {
        justify-self: center !important;
        min-height: auto !important;
        max-width: 560px !important;
    }
}

/* v8: dashboard stat container cleanup + polished login */
.fi-section:has(.nu-stat-card),
.fi-section:has(.fi-wi-stats-overview-stat.nu-stat-card) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.fi-section:has(.nu-stat-card)>.fi-section-content,
.fi-section:has(.fi-wi-stats-overview-stat.nu-stat-card)>.fi-section-content,
.fi-wi-stats-overview:not(.fi-wi-stats-overview-stat),
.fi-wi-stats-overview:not(.fi-wi-stats-overview-stat) .fi-section-content,
.fi-sc.fi-section-content:has(.nu-stat-card),
.fi-sc.fi-section-content:has(.fi-wi-stats-overview-stat.nu-stat-card) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-sc.fi-section-content:has(.nu-stat-card),
.fi-sc.fi-section-content:has(.fi-wi-stats-overview-stat.nu-stat-card) {
    gap: 1.25rem !important;
}

.fi-wi-stats-overview-stat.nu-stat-card,
.fi-wi-stats-overview-stat {
    min-height: 154px !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-content {
    position: relative !important;
    z-index: 1 !important;
    gap: 12px !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn>svg,
.fi-wi-stats-overview-stat svg.fi-icon {
    width: 42px !important;
    height: 42px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(32, 151, 211, .14) !important;
    color: #69c8f7 !important;
    box-sizing: border-box !important;
}

/* Login shell: smaller, cleaner, centered */
.nu-login-stage {
    grid-template-columns: minmax(360px, 430px) minmax(520px, 780px) !important;
    gap: clamp(20px, 2.8vw, 34px) !important;
    padding: clamp(26px, 5vw, 54px) clamp(34px, 7vw, 110px) !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    overflow: auto !important;
}

.nu-login-card,
.nu-login-hero {
    min-height: 560px !important;
    max-height: 720px !important;
    border-radius: 24px !important;
}

.nu-login-card {
    max-width: 430px !important;
    justify-self: stretch !important;
    padding: 34px 32px !important;
    box-shadow: 0 22px 70px rgba(23, 48, 71, .10) !important;
    border: 1px solid rgba(210, 224, 236, .95) !important;
}

html[dir="ltr"] .nu-login-card,
html[dir="rtl"] .nu-login-card {
    justify-self: stretch !important;
}

.nu-login-icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 20px !important;
}

.nu-login-title-wrap {
    margin-bottom: 28px !important;
}

.nu-login-title-wrap h1 {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    color: #111827 !important;
}

.nu-login-title-wrap p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #6f7d8f !important;
}

.nu-login-form {
    gap: 15px !important;
}

.nu-login-field {
    display: grid;
    gap: 8px;
}

.nu-login-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 900;
    color: #17212f;
}

.nu-login-required {
    color: #ef4444;
    font-size: 12px;
    line-height: 1;
}

.nu-login-input-wrap {
    position: relative;
}

.nu-login-input {
    width: 100%;
    height: 48px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 650;
    color: #17212f;
    outline: none;
    box-shadow: 0 8px 22px rgba(15, 35, 55, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.nu-login-input:focus {
    border-color: #2097d3;
    box-shadow: 0 0 0 4px rgba(32, 151, 211, .13), 0 12px 26px rgba(15, 35, 55, .06);
}

.nu-login-input::placeholder {
    color: #a3afbf;
}

.nu-login-password-input {
    padding-inline-end: 48px;
}

html[dir="rtl"] .nu-login-password-input {
    padding-inline-end: 15px;
    padding-inline-start: 48px;
}

.nu-login-eye {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #6b7b8f;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 999px;
}

html[dir="rtl"] .nu-login-eye {
    inset-inline-end: auto;
    inset-inline-start: 12px;
}

.nu-login-eye:hover {
    background: #eef5fb;
    color: #2097d3;
}

.nu-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 4px;
    color: #5f6f82;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.nu-login-remember input {
    width: 17px;
    height: 17px;
    accent-color: #2097d3;
}

.nu-login-error {
    color: #e11d48;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.nu-login-alert {
    border-radius: 14px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 4px;
}

.nu-login-submit {
    min-height: 48px !important;
    margin-top: 4px !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 24px rgba(32, 151, 211, .22) !important;
}

.nu-login-divider {
    margin: 26px 0 18px !important;
}

.nu-login-lang {
    flex: none !important;
}

.nu-login-hero {
    padding: clamp(38px, 4.6vw, 64px) !important;
    box-shadow: 0 24px 70px rgba(22, 43, 64, .16) !important;
}

.nu-login-badge {
    width: 84px !important;
    height: 84px !important;
    font-size: 30px !important;
    margin-bottom: 34px !important;
}

.nu-login-hero h2 {
    font-size: clamp(38px, 4.1vw, 58px) !important;
}

.nu-login-hero p {
    max-width: 620px;
    margin: 24px auto 34px !important;
    font-size: clamp(17px, 1.6vw, 22px) !important;
}

.nu-login-checks {
    gap: 16px !important;
    font-size: clamp(16px, 1.45vw, 21px) !important;
}

.nu-login-checks span {
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 1100px) {
    .nu-login-stage {
        grid-template-columns: minmax(320px, 430px) minmax(460px, 1fr) !important;
        padding: 26px !important;
    }
}

@media (max-width: 900px) {
    .nu-login-stage {
        grid-template-columns: 1fr !important;
    }

    .nu-login-card,
    .nu-login-hero {
        max-width: 560px !important;
        min-height: auto !important;
        margin-inline: auto !important;
    }

    .nu-login-hero {
        order: -1;
    }
}




.fi-fo-field .fi-fo-field-label-content:where(.dark, .dark *) {
    color: black !important;
}

.fi-header-heading:where(.dark, .dark *) {
    color: black !important;
}

.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat.nu-stat-card {
    background: linear-gradient(180deg, var(--nu-navy) 0%, var(--nu-navy-2) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 18px 38px rgba(28, 49, 68, .16) !important;
}

.fi-wi-stats-overview-stat::after,
.fi-wi-stats-overview-stat.nu-stat-card::after {
    background: rgba(32, 151, 211, .13) !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    color: #b9ccd9 !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #ffffff !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn>svg,
.fi-wi-stats-overview-stat svg.fi-icon {
    background: rgba(32, 151, 211, .18) !important;
    color: #79d0fb !important;
}


/* NU Driver Panel — dark section/table polish v10 */

:root {
    --nu-sidebar-start: #1c3144;
    --nu-sidebar-end: #152435;
    --nu-sidebar-deep: #0f1d2b;
    --nu-card: #1c3144;
    --nu-card-soft: #22384d;
    --nu-border: rgba(255, 255, 255, 0.12);
    --nu-text: #f8fafc;
    --nu-muted: #b8c4d4;
    --nu-blue: #2098d1;
}

/* Main page background stays clean */
.fi-main,
.fi-main-ctn,
.fi-page {
    background: #f4f8fb !important;
}

/* All Filament sections use sidebar palette */
.fi-section,
.fi-section-content,
.fi-ta-main,
.fi-ta-header-ctn,
.fi-ta-content-ctn,
.fi-table,
.fi-infolist,
.fi-fo-component-ctn {
    background: linear-gradient(135deg, var(--nu-sidebar-start), var(--nu-sidebar-end)) !important;
    border-color: var(--nu-border) !important;
    color: var(--nu-text) !important;
}

/* Section container spacing */
.fi-section {
    border-radius: 22px !important;
    border: 1px solid var(--nu-border) !important;
    box-shadow: 0 22px 55px rgba(15, 29, 43, 0.18) !important;
    overflow: hidden !important;
}


/* Account / welcome widget */
.fi-account-widget,
.fi-account-widget .fi-section,
.fi-account-widget .fi-section-content {
    background: linear-gradient(135deg, var(--nu-sidebar-start), var(--nu-sidebar-end)) !important;
    border-radius: 22px !important;
    color: var(--nu-text) !important;
}

.fi-account-widget .fi-section-content {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.fi-account-widget-heading {
    color: var(--nu-text) !important;
    font-weight: 800 !important;
}

.fi-account-widget-user-name {
    color: var(--nu-muted) !important;
    font-weight: 600 !important;
}

.fi-user-avatar {
    background: #070d1c !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Sign out button inside account widget */
.fi-account-widget .fi-btn,
.fi-account-widget .fi-icon-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--nu-text) !important;
    border-radius: 12px !important;
}

.fi-account-widget .fi-btn:hover,
.fi-account-widget .fi-icon-btn:hover {
    background: rgba(32, 152, 209, 0.22) !important;
    color: #ffffff !important;
}

/* Dashboard stats wrapper */
.fi-wi-stats-overview-stats-ctn,
.fi-wi-stats-overview-stats-ctn .fi-sc,
.fi-wi-stats-overview-stats-ctn .fi-section-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Stat cards same sidebar palette */
.nu-stat-card,
.fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, var(--nu-sidebar-start), var(--nu-sidebar-end)) !important;
    border: 1px solid var(--nu-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 45px rgba(15, 29, 43, 0.18) !important;
    color: var(--nu-text) !important;
}

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-value {
    color: var(--nu-text) !important;
}

.fi-wi-stats-overview-stat-description {
    color: var(--nu-muted) !important;
}

.fi-wi-stats-overview-stat .fi-icon {
    color: #50c7ff !important;
}

/* Tables */
.fi-ta-main {
    border-radius: 22px !important;
    border: 1px solid var(--nu-border) !important;
    overflow: hidden !important;
    box-shadow: 0 22px 55px rgba(15, 29, 43, 0.18) !important;
}

.fi-ta-table {
    background: transparent !important;
    color: var(--nu-text) !important;
}

.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn,
.fi-ta-cell,
.fi-ta-text,
.fi-ta-text-item {
    color: var(--nu-text) !important;
}

.fi-ta-header-cell {
    background: rgba(255, 255, 255, 0.045) !important;
    border-bottom: 1px solid var(--nu-border) !important;
}

.fi-ta-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fi-ta-row:hover {
    background: rgba(32, 152, 209, 0.12) !important;
}

.fi-ta-cell {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Table toolbar */
.fi-ta-header-toolbar {
    background: rgba(255, 255, 255, 0.035) !important;
    border-bottom: 1px solid var(--nu-border) !important;
    padding: 18px !important;
}

/* Inputs / search / select */
.fi-input-wrp,
.fi-select-input,
.fi-input {
    /* background: rgba(255, 255, 255, 0.08) !important; */
    /* border-color: rgba(255, 255, 255, 0.14) !important; */
    /* color: var(--nu-text) !important; */
    border-radius: 10px !important;
}

.fi-input::placeholder,
.fi-input-wrp input::placeholder {
    color: rgba(248, 250, 252, 0.55) !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--nu-blue) !important;
    box-shadow: 0 0 0 3px rgba(32, 152, 209, 0.2) !important;
}

.fi-input-wrp-prefix,
.fi-input-wrp-label,
.fi-input-wrp .fi-icon {
    color: var(--nu-muted) !important;
}

.fi-select-input option {
    background: var(--nu-sidebar-end) !important;
    color: var(--nu-text) !important;
}

/* Filter dropdown */
.fi-dropdown-panel,
.fi-ta-filters {
    background: linear-gradient(135deg, var(--nu-sidebar-start), var(--nu-sidebar-end)) !important;
    border: 1px solid var(--nu-border) !important;
    border-radius: 18px !important;
    color: var(--nu-text) !important;
    box-shadow: 0 22px 55px rgba(15, 29, 43, 0.35) !important;
}

.fi-ta-filters-heading,
.fi-fo-field-label,
.fi-fo-field-label-content {
    color: var(--nu-text) !important;
}

.fi-ta-filters-actions-ctn {
    border-top: 1px solid var(--nu-border) !important;
}

/* Buttons / links inside dark sections */
.fi-section .fi-link,
.fi-ta-main .fi-link {
    color: #50c7ff !important;
    font-weight: 700 !important;
}

.fi-section .fi-btn,
.fi-ta-main .fi-btn {
    border-radius: 12px !important;
}

.fi-color-primary.fi-btn,
.fi-color-primary.fi-ac-btn-action {
    background: var(--nu-blue) !important;
    color: #ffffff !important;
}

.fi-icon-btn {
    color: var(--nu-text) !important;
}

.fi-icon-btn:hover {
    background: rgba(32, 152, 209, 0.16) !important;
}

/* Badges */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.fi-ta-main .fi-badge {
    background: rgba(32, 152, 209, 0.16) !important;
    color: #9de0ff !important;
    border: 1px solid rgba(80, 199, 255, 0.24) !important;
}

/* Pagination */
.fi-pagination {
    background: rgba(255, 255, 255, 0.035) !important;
    border-top: 1px solid var(--nu-border) !important;
    color: var(--nu-muted) !important;
    padding: 16px 18px !important;
}

.fi-pagination-overview,
.fi-pagination-records-per-page-select,
.fi-pagination-records-per-page-select .fi-input-wrp-label {
    color: var(--nu-muted) !important;
}

.fi-pagination-item-btn,
.fi-pagination-next-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--nu-text) !important;
    border-radius: 12px !important;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--nu-blue) !important;
    border-color: var(--nu-blue) !important;
    color: #ffffff !important;
}

/* Forms / profile readonly sections */
.fi-fo-field-label,
.fi-fo-field-label-content,
.fi-in-text,
.fi-in-entry-wrp,
.fi-in-entry-wrp-label,
.fi-in-entry-wrp-state {
    color: var(--nu-text) !important;
}

.fi-fo-field-content-col {
    color: var(--nu-text) !important;
}

/* Light page title remains visible */
.fi-header-heading {
    color: #07111f !important;
    font-weight: 900 !important;
}

.fi-breadcrumbs,
.fi-breadcrumbs-item,
.fi-breadcrumbs-item a {
    color: #6b7a90 !important;
}

.fi-topbar {
    background: var(--nu-sidebar-end) !important;
    backdrop-filter: blur(16px);
    /* border-bottom: 1px solid rgba(198, 213, 229, .72) !important; */
}

/* v11: login cards equal height + hero text start aligned */

.nu-login-stage {
    align-items: stretch !important;
}

.nu-login-card,
.nu-login-hero {
    height: min(640px, calc(100vh - 96px)) !important;
    min-height: 560px !important;
    max-height: 720px !important;
}

/* Keep login form vertically balanced */
.nu-login-card {
    justify-content: center !important;
}

/* Right card: text starts from line start instead of center */
.nu-login-hero {
    align-items: center !important;
    text-align: start !important;
}

.nu-login-hero h2,
.nu-login-hero p,
.nu-login-checks {
    width: 100% !important;
    text-align: start !important;
}

.nu-login-hero p {
    margin-inline: 0 !important;
    max-width: 680px !important;
}

.nu-login-checks {
    justify-items: start !important;
}

.nu-login-checks div {
    justify-content: flex-start !important;
    text-align: start !important;
}

/* Keep NU badge visually clean */
.nu-login-badge {
    align-self: center !important;
}

/* Arabic direction support */
html[dir="rtl"] .nu-login-hero h2,
html[dir="rtl"] .nu-login-hero p,
html[dir="rtl"] .nu-login-checks,
html[dir="rtl"] .nu-login-checks div {
    text-align: right !important;
}

html[dir="ltr"] .nu-login-hero h2,
html[dir="ltr"] .nu-login-hero p,
html[dir="ltr"] .nu-login-checks,
html[dir="ltr"] .nu-login-checks div {
    text-align: left !important;
}

/* Mobile/tablet: allow natural height */
@media (max-width: 900px) {

    .nu-login-card,
    .nu-login-hero {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

.nu-login-title-wrap {
    text-align: start;
}


/* v12: Arabic typography boost */

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] .fi-body,
html[dir="rtl"] .fi-sidebar,
html[dir="rtl"] .fi-main,
html[dir="rtl"] .fi-topbar {
    font-family: "Almarai", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* Sidebar Arabic menu */
html[dir="rtl"] .fi-sidebar-nav-item-label {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html[dir="rtl"] .fi-sidebar-header,
html[dir="rtl"] .fi-sidebar .fi-logo,
html[dir="rtl"] .fi-sidebar-group-label {
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* Page titles */
html[dir="rtl"] .fi-header-heading {
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

/* Account widget */
html[dir="rtl"] .fi-account-widget-heading {
    font-size: 20px !important;
    font-weight: 900 !important;
}

html[dir="rtl"] .fi-account-widget-user-name {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* Dashboard stat cards */
html[dir="rtl"] .fi-wi-stats-overview-stat-label {
    font-size: 18px !important;
    font-weight: 900 !important;
}

html[dir="rtl"] .fi-wi-stats-overview-stat-value {
    font-size: 34px !important;
    font-weight: 900 !important;
}

html[dir="rtl"] .fi-wi-stats-overview-stat-description {
    font-size: 17px !important;
    font-weight: 800 !important;
}

/* Tables */
html[dir="rtl"] .fi-ta-header-cell,
html[dir="rtl"] .fi-ta-header-cell-sort-btn {
    font-size: 15px !important;
    font-weight: 900 !important;
}

html[dir="rtl"] .fi-ta-cell,
html[dir="rtl"] .fi-ta-text,
html[dir="rtl"] .fi-ta-text-item {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Forms / labels */
html[dir="rtl"] .fi-fo-field-label,
html[dir="rtl"] .fi-fo-field-label-content,
html[dir="rtl"] .fi-input,
html[dir="rtl"] .fi-select-input,
html[dir="rtl"] .fi-in-entry-wrp-label,
html[dir="rtl"] .fi-in-entry-wrp-state {
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Buttons and links */
html[dir="rtl"] .fi-btn,
html[dir="rtl"] .fi-link,
html[dir="rtl"] .fi-ac-link-action {
    font-size: 15px !important;
    font-weight: 900 !important;
}

/* Sidebar footer */
html[dir="rtl"] .nu-sidebar-footer,
html[dir="rtl"] .nu-sidebar-footer * {
    font-size: 15px !important;
    font-weight: 800 !important;
}

.fi-sidebar-item-label {
    font-weight: bold !important;
    color: white !important;
}