@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
    --nqta-primary: #0B1F2A;       /* Dark Navy - Sidebar & Main Headings */
    --nqta-accent: #0F6D6A;        /* Petrol Blue / Saudi Green - CTA & Action Buttons */
    --nqta-accent-hover: #0b4d4a;  /* Hover */
    --nqta-secondary: #2E2E2E;     /* Charcoal Gray - Texts */
    --nqta-white: #FFFFFF;         /* Pure White - Interior Background */
    --nqta-border: #E5E7EB;        /* Subtle Border */
    --nqta-sidebar-bg: #0B1F2A;    /* Dark Navy for Sidebar */
    --nqta-sidebar-active: #0F6D6A;/* Active Item in Sidebar */
    --font-tajawal: 'Tajawal', sans-serif;
}

/* Force RTL & Typography */
html, body, [dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
    font-family: var(--font-tajawal) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    font-family: var(--font-tajawal) !important;
}

/* Pure White Background for Platform Inside */
body, 
.fi-layout, 
.fi-main-ctn, 
.fi-page,
main.fi-main {
    background-color: #ffffff !important;
}

/* -------------------------------------------
   SIDEBAR STYLING - DEEP SAUDI NAVY & RTL
------------------------------------------- */
aside.fi-sidebar,
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-nav-groups,
.fi-sidebar-header,
.fi-sidebar-footer,
.fi-sidebar-nav-group,
[class*="fi-sidebar-nav"] {
    background-color: #0B1F2A !important;
}

aside.fi-sidebar {
    background-color: #0B1F2A !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    box-shadow: -4px 0 25px rgba(11, 31, 42, 0.15) !important;
}

/* Sidebar Brand / Header */
.fi-sidebar-header {
    background-color: #081720 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.25rem 1.5rem !important;
}

.fi-sidebar-header-heading {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.5px !important;
}

/* Sidebar Navigation Items */
.fi-sidebar-item {
    margin: 0.25rem 0.65rem !important;
}

.fi-sidebar-item-button,
.fi-sidebar-item a,
.fi-sidebar-item button,
.fi-sidebar-item-label,
.fi-sidebar-item span {
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    padding: 0.6rem 0.95rem !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover span,
.fi-sidebar-item a:hover span {
    color: #ffffff !important;
}

/* Active Sidebar Item - Saudi Green */
.fi-sidebar-item-active,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active a,
li.fi-sidebar-item-active > a,
.fi-sidebar-item-active button {
    background-color: #0F6D6A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(15, 109, 106, 0.35) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active span,
.fi-sidebar-item-active svg,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item svg {
    color: #94A3B8 !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-label span {
    color: #64748B !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem 0.25rem !important;
}

/* Topbar / Header inside */
.fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Auth / Login Page */
.fi-simple-layout {
    background-color: #F8FAFC !important;
    background-image: 
        radial-gradient(at 100% 0%, rgba(15, 109, 106, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(11, 31, 42, 0.06) 0px, transparent 50%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fi-simple-main-ctn {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 2rem 1.5rem !important;
}

.fi-simple-main {
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px -15px rgba(11, 31, 42, 0.1), 0 0 0 1px rgba(11, 31, 42, 0.02) !important;
    padding: 2.75rem 2.25rem !important;
}

.fi-simple-header {
    text-align: center !important;
    margin-bottom: 2rem !important;
}

.fi-simple-header-heading {
    color: var(--nqta-primary) !important;
    font-weight: 900 !important;
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
}

.fi-simple-header-subheading {
    color: #64748B !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Form Inputs & Controls */
.fi-fo-field-wrp-label {
    color: var(--nqta-secondary) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.35rem !important;
}

.fi-input, .fi-select-input {
    background-color: #ffffff !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
    color: var(--nqta-secondary) !important;
    transition: all 0.2s ease !important;
}

.fi-input:focus, .fi-select-input:focus {
    border-color: var(--nqta-accent) !important;
    box-shadow: 0 0 0 4px rgba(15, 109, 106, 0.12) !important;
    outline: none !important;
}

/* Primary Action Buttons */
.fi-btn-primary, 
button[type="submit"], 
.fi-ac-action[color="primary"],
.fi-ac-action[color="success"] {
    background-color: var(--nqta-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 109, 106, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.fi-btn-primary:hover, 
button[type="submit"]:hover, 
.fi-ac-action[color="primary"]:hover {
    background-color: var(--nqta-accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(15, 109, 106, 0.35) !important;
}

/* Tables Styling */
.fi-ta-ctn {
    background-color: #ffffff !important;
    border: 1px solid var(--nqta-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
}

.fi-ta-header-cell {
    background-color: #F8FAFC !important;
    color: var(--nqta-primary) !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--nqta-border) !important;
}

.fi-ta-row {
    transition: background-color 0.15s ease !important;
}

.fi-ta-row:hover {
    background-color: #F8FAFC !important;
}

/* Section Cards & Panels */
.fi-section {
    background-color: #ffffff !important;
    border: 1px solid var(--nqta-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.fi-section-header-heading {
    color: var(--nqta-primary) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
}