@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/tajawal/Tajawal-Black.ttf") format("truetype");
}

:root {
    --brand-primary: #f36b21;
    --brand-primary-strong: #d85f16;
    --brand-primary-soft: #fff4e8;
    --brand-primary-gradient: linear-gradient(135deg, #f36b21 0%, #f59a5a 100%);
    --brand-ink: #282225;
    --brand-ink-soft: #6a6265;
    --brand-border: rgba(40, 34, 37, 0.10);
    --brand-border-strong: rgba(40, 34, 37, 0.14);
    --brand-shadow: 0 16px 40px rgba(40, 34, 37, 0.08);
    --brand-shadow-strong: 0 24px 70px rgba(40, 34, 37, 0.10);
    --brand-radius: 1.5rem;
    --brand-radius-pill: 999px;
    --brand-bg: #f7fbfb;
    --brand-bg-gradient:
        radial-gradient(circle at top left, rgba(243, 107, 33, 0.09), transparent 26%),
        radial-gradient(circle at bottom right, rgba(243, 107, 33, 0.06), transparent 24%),
        linear-gradient(180deg, #fbfdfd 0%, #f6fbfb 100%);
    --brand-input-bg: #eef3fb;
    --brand-success-bg: #ecfdf3;
    --brand-success-text: #027a48;
    --brand-success-border: #abefc6;
    --brand-danger-bg: #fff1f1;
    --brand-danger-text: #b42318;
    --brand-danger-border: #ffc9c9;
    --basma-font-family: "Tajawal", "Cairo", "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee),
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) *,
.basma-login-page,
.basma-login-page *,
.basma-standalone-page,
.basma-standalone-page * {
    font-family: var(--basma-font-family) !important;
    letter-spacing: 0 !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee).fi-body,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-body {
    background: var(--brand-bg) !important;
    color: var(--brand-ink) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) a,
.basma-login-page a,
.basma-standalone-page a {
    color: var(--brand-primary);
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-topbar,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-sidebar,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-header,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-modal-window,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-dropdown-panel,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-section,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-ta,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-simple-main,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-card {
    border-radius: var(--brand-radius) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-btn-color-primary,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-btn.fi-color-primary,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) button.fi-btn.fi-color-primary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-btn-color-primary:hover,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-btn.fi-color-primary:hover,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) button.fi-btn.fi-color-primary:hover {
    background: var(--brand-primary-strong) !important;
    border-color: var(--brand-primary-strong) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-input-wrp,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-select-input,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-textarea,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-input,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-fo-field-wrp .fi-input-wrp {
    border-radius: 18px !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-input,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-select-input,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-textarea {
    background: #fff !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-input:focus,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-select-input:focus,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-textarea:focus {
    box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.14) !important;
    border-color: var(--brand-primary) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-section {
    border: 1px solid var(--brand-border) !important;
    box-shadow: var(--brand-shadow) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-header-heading,
.fi-simple-header-heading,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) h1,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) h2,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) h3,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) h4,
.basma-login-page h1,
.basma-login-page h2,
.basma-login-page h3,
.basma-login-page h4,
.basma-standalone-page h1,
.basma-standalone-page h2,
.basma-standalone-page h3,
.basma-standalone-page h4 {
    color: var(--brand-ink) !important;
    font-weight: 800 !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-sidebar-item-active .fi-sidebar-item-button,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-sidebar-item-button:hover {
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary-strong) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-sidebar-item-active .fi-icon,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-sidebar-item-button:hover .fi-icon {
    color: var(--brand-primary-strong) !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-badge {
    border-radius: 999px !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-ta-table {
    font-size: 14px !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full {
    max-width: none !important;
    width: 100% !important;
}

:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full .fi-page,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full .fi-page-content,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full form,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full .fi-section,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full .fi-section-content,
:where(.fi-panel-admin, .fi-panel-app, .fi-panel-employee) .fi-main.fi-width-full .fi-fo-component-ctn {
    width: 100% !important;
    max-width: none !important;
}

.basma-login-page,
.basma-standalone-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--brand-bg-gradient);
    color: var(--brand-ink);
}

.basma-login-card,
.basma-standalone-card {
    width: min(100%, 460px);
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 2rem;
    box-shadow: var(--brand-shadow-strong);
    padding: 36px;
    position: relative;
    overflow: hidden;
}

.basma-standalone-card {
    width: min(100%, 720px);
    text-align: center;
    padding: 56px 36px;
}

.basma-standalone-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 5px;
    background: var(--brand-primary-gradient);
}

.basma-login-logo { text-align: center; margin-bottom: 18px; }
.basma-login-logo img { max-height: 72px; max-width: 260px; object-fit: contain; }

.basma-login-title {
    text-align: center;
    margin: 0 0 8px;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.3;
}

.basma-login-subtitle {
    text-align: center;
    margin: 0 0 28px;
    color: var(--brand-ink-soft);
    font-size: 17px;
    line-height: 1.8;
}

.basma-field-label {
    display: block;
    margin: 16px 6px 8px;
    font-weight: 800;
    font-size: 17px;
    color: var(--brand-ink);
}

.basma-input {
    width: 100%;
    height: 58px;
    border: 1px solid #dce7e7;
    background: var(--brand-input-bg);
    border-radius: var(--brand-radius-pill);
    padding: 0 22px;
    font-size: 18px;
    outline: none;
    color: var(--brand-ink);
}

.basma-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(243, 107, 33, 0.14);
}

.basma-password-wrap { position: relative; }
.basma-password-wrap .basma-input { padding-left: 60px; }

.basma-password-toggle {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-ink-soft);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.basma-password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.basma-primary-button {
    width: 100%;
    height: 58px;
    border: 0;
    border-radius: var(--brand-radius-pill);
    background: var(--brand-primary);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    margin-top: 24px;
    cursor: pointer;
}

.basma-primary-button:hover { background: var(--brand-primary-strong); }

.basma-alert {
    margin-bottom: 16px;
    border-radius: 16px;
    padding: 12px 14px;
    text-align: center;
    font-weight: 800;
}

.basma-alert--error {
    background: var(--brand-danger-bg);
    color: var(--brand-danger-text);
    border: 1px solid var(--brand-danger-border);
}

.basma-alert--success {
    background: var(--brand-success-bg);
    color: var(--brand-success-text);
    border: 1px solid var(--brand-success-border);
}

.basma-links {
    text-align: center;
    margin-top: 16px;
}

.basma-links a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 900;
}

.basma-app-footer {
    width: 100%;
    max-width: 100%;
    margin: 32px auto 0;
    padding: 18px 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    direction: rtl;
    text-align: center;
    color: var(--brand-ink-soft);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 500;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.basma-app-footer a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 700;
}

/* Admin login must match the current company/employee system language. */
.basma-login-page--admin {
    --brand-primary: #f36b21;
    --brand-primary-strong: #c24e14;
    --brand-primary-soft: #fff7ed;
    --brand-ink: #10263f;
    --brand-ink-soft: #64748b;
    --brand-border: #dce7f0;
    --brand-input-bg: #fffaf7;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 34px;
    background:
        radial-gradient(circle at 12% 16%, rgba(243, 107, 33, .08) 0, rgba(243, 107, 33, 0) 280px),
        linear-gradient(180deg, #eef4f8 0%, #f7fafc 100%) !important;
}

.basma-login-page--admin .basma-login-card {
    position: relative;
    width: min(100%, 560px);
    padding: 38px 38px 30px;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(243, 107, 33, .075) 0%, rgba(255, 255, 255, .98) 44%, rgba(247, 250, 252, .98) 100%);
    box-shadow: 0 18px 44px rgba(16, 38, 63, .10);
}

.basma-login-page--admin .basma-login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.basma-login-page--admin .basma-login-logo img {
    max-height: 58px;
    max-width: 220px;
}

.basma-login-page--admin .basma-login-title {
    margin-top: 0;
    color: var(--brand-ink);
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0;
}

.basma-login-page--admin .basma-login-subtitle {
    margin: 8px 0 24px;
    color: var(--brand-ink-soft);
    font-size: 16px;
    font-weight: 800;
}

.basma-login-page--admin .basma-field-label {
    margin: 14px 0 8px;
    color: var(--brand-ink);
    font-size: 14px;
    font-weight: 900;
}

.basma-login-page--admin .basma-input {
    min-height: 50px;
    border: 2px solid rgba(243, 107, 33, .34);
    border-radius: 13px;
    background: var(--brand-input-bg);
    color: var(--brand-ink);
    font-size: 15px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(243, 107, 33, .07);
}

.basma-login-page--admin .basma-input:hover {
    border-color: rgba(243, 107, 33, .54);
    background: #fff7ed;
    box-shadow:
        inset 0 1px 0 rgba(243, 107, 33, .08),
        0 0 0 2px rgba(243, 107, 33, .10);
}

.basma-login-page--admin .basma-input:focus {
    border-color: var(--brand-primary);
    outline: none;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(243, 107, 33, .16),
        0 8px 18px rgba(16, 38, 63, .07);
}

.basma-login-page--admin .basma-password-toggle {
    color: var(--brand-ink);
    font-size: 16px;
    font-weight: 900;
}

.basma-login-page--admin .basma-primary-button {
    min-height: 48px;
    margin-top: 22px;
    border-radius: 13px;
    background: var(--brand-primary);
    box-shadow: 0 14px 26px rgba(243, 107, 33, .22);
    font-size: 16px;
    font-weight: 950;
}

.basma-login-page--admin .basma-primary-button:hover {
    background: var(--brand-primary-strong);
    transform: translateY(-1px);
}

.basma-login-page--admin .basma-links a,
.basma-login-page--admin .basma-app-footer a {
    color: var(--brand-primary-strong);
}

.basma-login-page--admin .basma-app-footer {
    justify-content: center;
    margin-top: 22px;
    color: var(--brand-ink-soft);
}

.dark body,
.dark .fi-body,
.dark .fi-main,
.dark .fi-page,
.dark .fi-main-ctn {
    background: #0b1120 !important;
    color: #e5e7eb !important;
}

.dark .fi-topbar,
.dark .fi-topbar nav,
.dark .fi-header,
.dark .fi-sidebar,
.dark .fi-sidebar-nav,
.dark .fi-sidebar-header {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: rgba(148, 163, 184, .18) !important;
}

.dark .fi-section {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important;
}

.dark .fi-section-header-heading,
.dark .fi-ta-header-heading,
.dark .fi-header-heading,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee) h1,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee) h2,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee) h3,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee) h4 {
    color: #f8fafc !important;
}

.dark .fi-section-header-description,
.dark .fi-page p,
.dark .fi-section p {
    color: #cbd5e1 !important;
}

:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee, .dark.fi-panel-admin, .dark.fi-panel-app, .dark.fi-panel-employee) .fi-sidebar-item-active .fi-sidebar-item-button,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee, .dark.fi-panel-admin, .dark.fi-panel-app, .dark.fi-panel-employee) .fi-sidebar-item-button:hover {
    background: rgba(243, 107, 33, .16) !important;
    color: #f36b21 !important;
}

:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee, .dark.fi-panel-admin, .dark.fi-panel-app, .dark.fi-panel-employee) .fi-sidebar-item-active .fi-icon,
:where(.dark .fi-panel-admin, .dark .fi-panel-app, .dark .fi-panel-employee, .dark.fi-panel-admin, .dark.fi-panel-app, .dark.fi-panel-employee) .fi-sidebar-item-button:hover .fi-icon {
    color: #f36b21 !important;
}

@media (max-width: 767px) {
    .basma-login-card,
    .basma-standalone-card {
        padding: 28px 22px;
        border-radius: 1.75rem;
    }

    .basma-login-title { font-size: 28px; }
}