/* ============================================
   DYNAMIC THEME CSS
   Generated: 2025-12-11 15:20:22   
   DO NOT EDIT THIS FILE DIRECTLY
   Use Admin Panel: /admin/customize.php
   ============================================ */

/* ========== Font Face Declarations ========== */
@font-face {
    font-family: 'ArbFONTS-4_F4';
    src: url('../fonts/ArbFONTS-4_F4.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArbFONTS-4_F5';
    src: url('../fonts/ArbFONTS-4_F5.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

/* ========== CSS Variables ========== */
.elementor-kit-23,
:root {
    /* System Colors */
    --e-global-color-primary: #2F826A;
    --e-global-color-primary-dark: #203D60;
    --e-global-color-secondary: #297059;
    --e-global-color-text: #297059;
    --e-global-color-accent: #F0F9F7;
    
    /* Custom Colors */
    --e-global-color-5d90913: #1C3D33;
    --e-global-color-91b1d6a: #F9FAFB;
    --e-global-color-617de0a: #F1F5F9;
    --e-global-color-413d0ff: #FFFFFF;
    --e-global-color-4bae575: #62AD9C;
    --e-global-color-eca7023: #1A3351;
    --e-global-color-ce46a44: #1A202C;
    --e-global-color-ce46111: #1a3351;
    --red-color-dc3545: #dc3545;
    
    /* Green Scale */
    --e-global-color-71ce13e: #123530;
    --e-global-color-002e096: #1A4D40;
    --e-global-color-80964e9: #25685A;
    --e-global-color-257248e: #2F826A;
    --e-global-color-32d8d03: #3A9B80;
    --e-global-color-4af5a07: #4FB5A0;
    --e-global-color-745aa59: #7DCAB9;
    --e-global-color-1a9d6a9: #A6DCD0;
    --e-global-color-866ca0a: #D0EDE7;
    --e-global-color-1912ad3: #EDF7F4;
    --e-global-color-1912a75: #def0ed;
    
    /* Typography */
    --e-global-typography-primary-font-family: "ArbFONTS-BR";
    --e-global-typography-secondary-font-family: "ArbFONTS-BR";
    --e-global-typography-text-font-family: "ArbFONTS-BR";
    --e-global-typography-heading-font-family: "ArbFONTS-riyad-bank-Bold";
    --e-global-typography-body-font-family: "ArbFONTS-riyad-bank-Regular";
    --base-font-size: 16px;
    --primary-font-size: 18px;
    --heading-font-size: 24px;
    
    /* Style Settings */
    --border-radius: 8px;
    --button-radius: 12px;
    
    /* Header specific colors */
    --header-primary-color: #2F826A;
    --header-text-color: #1A202C;
    --header-hover-bg: #2F826A;

    /* Dashboard Card Colors */
    --card-total-bg: #E3F2FD;
    --card-total-text: #1976D2;
    
    --card-pending-bg: #FFF3E0;
    --card-pending-text: #F57C00;
    
    --card-approved-bg: #E8F5E9;
    --card-approved-text: #2E7D32;
    
    --card-rejected-bg: #FFEBEE;
    --card-rejected-text: #C62828;
    
    --card-review-bg: #F3E5F5;
    --card-review-text: #7B1FA2;

}

/* ========== Base Typography ========== */
body {
    font-family: var(--e-global-typography-text-font-family), Arial, sans-serif !important;
    font-size: var(--base-font-size);
    line-height: 1.6;
    color: var(--e-global-color-text);
    background-color: var(--e-global-color-413d0ff);
}


/* ========== Header Styles (Dynamic) ========== */
.header-logo-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease-in-out;
}

.header-logo-link:hover {
    opacity: 0.85;
    color: inherit;
}

.user-dropdown .dropdown-toggle {
    color: var(--header-text-color) !important;
    font-weight: 500;
    border: none;
    background: none;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease-in-out;
}

.user-dropdown .dropdown-toggle:hover,
.user-dropdown .dropdown-toggle:focus {
    background-color: var(--header-hover-bg) !important;
    color: #ffffff !important;
    outline-offset: 2px;
    border-radius: 12px;
}

.user-dropdown .dropdown-toggle::after {
    display: none;
}

.user-dropdown .dropdown-menu {
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 200px;
}

.user-dropdown .dropdown-item {
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #ffffff;
    border-radius: var(--border-radius);
}
.notification-item:hover{
    background-color: rgba(255, 255, 255, 0.1)!important;
    color: #ffffff!important;
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: -2px;
}

.user-dropdown .dropdown-item:hover,
.user-dropdown .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: -2px;
}



.user-dropdown .dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

.user-dropdown .logout-btn {
    color: #ffffff !important;
}

.user-dropdown .logout-btn:hover,
.user-dropdown .logout-btn:focus {
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff6b6b !important;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 0.5rem 0;
}

.position-relative{
            display: flex;
            align-items: center;
            border-radius: var(--border-radius);
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--e-global-color-413d0ff);
            transition: all 0.3s ease;
            color: var(--header-text-color) !important;
        }

.position-relative:hover {
            background-color: var(--header-hover-bg);
            color: var(--e-global-color-413d0ff) !important;
        }

/* ========== Buttons ========== */
.btn,
.button,
.elementor-button {
    border-radius: var(--button-radius);
    transition: all 0.3s ease;
    font-family: var(--e-global-typography-secondary-font-family), sans-serif;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
}

.btn-primary,
.elementor-button-primary {
    background: linear-gradient(135deg, var(--e-global-color-4af5a07) -50%, var(--e-global-color-80964e9) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--e-global-color-4af5a07) -50%, var(--e-global-color-80964e9) 100%);    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(47, 130, 106, 0.3);
}

.btn-secondary {
    background-color: var(--e-global-color-secondary);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--e-global-color-257248e);
}

/* ========== Cards & Containers ========== */
.card,
.box,
.panel,
.elementor-widget-container {
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.card {
    background: white;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ========== Links ========== */
a {
    color: var(--e-global-color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--e-global-color-32d8d03);
}

/* ========== Form Elements ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--e-global-color-primary);
}

/* ========== Modal Styling ========== */
.modal-content {
    background-color: var(--e-global-color-5d90913);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-close {
    filter: invert(1);
}

/* ========== Focus Indicators ========== */
.btn:focus,
.dropdown-item:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

/* ========== Utility Classes ========== */
.bg-primary { background-color: var(--e-global-color-primary); }
.bg-secondary { background-color: var(--e-global-color-secondary); }
.bg-light { background-color: var(--e-global-color-91b1d6a); }

.text-primary { color: var(--e-global-color-primary); }
.text-secondary { color: var(--e-global-color-secondary); }
.text-heading { color: var(--e-global-color-eca7023); }


/* ========== Dashboard Cards ========== */
/* Total Applications Card */
.stat-card {
    background: var(--card-total-bg) !important;
    color: var(--card-total-text) !important;
    border-radius: 12px;
    border: 1px solid var(--card-total-border) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Pending Card */  
.stat-card.pending {
    background: var(--card-pending-bg) !important;
    color: var(--card-pending-text) !important;
    border: 1px solid var(--card-pending-border) !important;
}

/* Approved Card */
.stat-card.approved {
    background: var(--card-approved-bg) !important;
    color: var(--card-approved-text) !important;
    border: 1px solid var(--card-approved-border) !important;
}

/* Rejected Card */
.stat-card.rejected {
    background: var(--card-rejected-bg) !important;
    color: var(--card-rejected-text) !important;
    border: 1px solid var(--card-rejected-border) !important;
}

/* Under Review Card */
.stat-card.under-review {
    background: var(--card-review-bg) !important;
    color: var(--card-review-text) !important;
    border: 1px solid var(--card-review-border) !important;
}


/* ========== Status Request ========== */
.status-pending {
    background: var(--card-pending-bg) !important;
    color: var(--card-pending-text) !important;
    border: 1px solid var(--card-pending-border) !important;
}

.status-under_review {
    background: var(--card-review-bg) !important;
    color: var(--card-review-text) !important;
    border: 1px solid var(--card-review-border) !important;
}

.status-approved {
    background: var(--card-approved-bg) !important;
    color: var(--card-approved-text) !important;
    border: 1px solid var(--card-approved-border) !important;
}

.status-rejected {
    background: var(--card-rejected-bg) !important;
    color: var(--card-rejected-text) !important;
    border: 1px solid var(--card-rejected-border) !important;
}


/* ========== Responsive Design ========== */
@media (max-width: 768px) {
    :root {
        --base-font-size: 14px;
    }
    
    .user-dropdown .dropdown-menu {
        min-width: 180px;
    }
}