/* ========================================
   GLOBAL CSS VARIABLES - AL-FIKR DESIGN SYSTEM
   ======================================== */
.datatable-auto{
    width : 100% !important;
}

:root {
    /* ========================================
     COLOR PALETTE - PRIMARY COLORS (Based on #ecb43a)
     ======================================== */
    --primary-50: #fffaeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #ecb43a; /* Main brand color */
    --primary-600: #d29e2e;
    --primary-700: #b58422;
    --primary-800: #8f6816;
    --primary-900: #744e0a;
    /* ========================================
     COLOR PALETTE - SECONDARY COLORS (Based on #334155)
     ======================================== */
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155; /* Secondary brand color */
    --secondary-800: #273344;
    --secondary-900: #1b2532;
    /* ========================================
     COLOR PALETTE - BLUE COLORS
     ======================================== */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #252C40; /* Main blue brand color */
    --blue-900: #1e3a8a;
    /* ========================================
     COLOR PALETTE - GRAY COLORS
     ======================================== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    /* ========================================
     COLOR PALETTE - SEMANTIC COLORS
     ======================================== */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;
    /* ========================================
     COLOR PALETTE - NEUTRAL COLORS
     ======================================== */
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;
    /* ========================================
     COLOR PALETTE - OVERLAY COLORS
     ======================================== */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-primary: rgba(236, 180, 58, 0.1); /* Updated for primary */
    --overlay-blue: rgba(30, 58, 95, 0.1);
    /* ========================================
     TYPOGRAPHY
     ======================================== */
    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-secondary: 'Arial', sans-serif;
    --font-family-mono: 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* ========================================
     SPACING
     ======================================== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    /* ========================================
     BORDER RADIUS
     ======================================== */
    --border-radius-none: 0;
    --border-radius-sm: 0.125rem;
    --border-radius-base: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-3xl: 1.5rem;
    --border-radius-full: 9999px;
    /* ========================================
     BORDERS
     ======================================== */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;
    --border-color-light: var(--gray-200);
    --border-color-base: var(--gray-300);
    --border-color-dark: var(--gray-400);
    --border-color-primary: var(--primary-500);
    --border-color-blue: var(--blue-500);
    /* ========================================
     SHADOWS
     ======================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    /* ========================================
     TRANSITIONS
     ======================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* ========================================
     Z-INDEX
     ======================================== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    /* ========================================
     LAYOUT
     ======================================== */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    --header-height: 80px;
    --sidebar-width: 280px;
    /* ========================================
     COMPONENT SPECIFIC
     ======================================== */
    --button-padding-x: var(--spacing-4);
    --button-padding-y: var(--spacing-2);
    --input-padding-x: var(--spacing-3);
    --input-padding-y: var(--spacing-2);
    --card-padding: var(--spacing-6);
    --modal-padding: var(--spacing-6);
}

/* ========================================
   DARK THEME VARIABLES (Future Implementation)
   ======================================== */
[data-theme="dark"] {
    --primary-500: #fbbf24;
    --secondary-900: #f8fafc;
    --secondary-800: #f1f5f9;
    --secondary-700: #e2e8f0;
    --secondary-600: #cbd5e1;
    --secondary-500: #94a3b8;
    --secondary-400: #64748b;
    --secondary-300: #475569;
    --secondary-200: #334155;
    --secondary-100: #1e293b;
    --secondary-50: #0f172a;
    --white: #000000;
    --black: #ffffff;
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
@media (max-width: 640px) {
    :root {
        --container-padding: var(--spacing-3);
        --card-padding: var(--spacing-4);
        --modal-padding: var(--spacing-4);
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }
}

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */
:root {
    --primary-color: var(--primary-500); /* #ecb43a */
    --secondary-color: var(--secondary-700); /* #334155 */
    --blue: var(--blue-800);
    --danger-color: var(--danger-500);
    --success-color: var(--success-500);
    --border-radius: var(--border-radius-xl);
    --transition: var(--transition-base);
    --overlay-bg: var(--overlay-medium);
}