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

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

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

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

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo/static/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'SaudiRiyal';
    src: url('../fonts/SaudiRiyal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@theme {
  --color-primary: #1E3A8A;
  --color-primary-hover: #1A3277;
  --color-secondary: #2563EB;
  --color-accent: #C89B3C;
  --color-on-accent: #FFFFFF;
  
  --color-app-bg: #eef2f6;
  --color-app-surface: #FFFFFF;
  --color-app-border: #D9E2F2;
  --color-app-text: #0F172A;
  --color-app-muted: #64748B;
  
  --color-status-success: #10B981;
  --color-status-warning: #F59E0B;
  --color-status-danger: #DC2626;
  --color-status-info: #2563EB;
  
  --shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.10);
}

html, body {
    direction: rtl;
    /* للتبديل إلى خط تجوال، قم بحذف 'Cairo', من السطر التالي */
    font-family:  'Tajawal', Arial, sans-serif;
    background-color: var(--color-app-bg);
    color: var(--color-app-text);
    margin: 0;
    min-height: 100%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Dark Mode ──────────────────────────────────────────── */
html.dark {
    --color-primary: #1E3A8A;
    --color-primary-hover: #2548A8;
    --color-secondary: #3B82F6;
    --color-accent: #D4A843;
    --color-on-accent: #FFFFFF;

    --color-app-bg: #0F172A;
    --color-app-surface: #1E293B;
    --color-app-border: #334155;
    --color-app-text: #E2E8F0;
    --color-app-muted: #94A3B8;

    --color-status-success: #34D399;
    --color-status-warning: #FBBF24;
    --color-status-danger: #F87171;
    --color-status-info: #60A5FA;

    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* Dark mode overrides for hardcoded white backgrounds */
html.dark .bg-white {
    background-color: #1E293B !important;
}
html.dark .bg-white\/90 {
    background-color: rgba(30, 41, 59, 0.9) !important;
}
html.dark .bg-gray-50,
html.dark .bg-gray-50\/50,
html.dark .bg-gray-50\/70,
html.dark .bg-gray-50\/80 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}
html.dark .bg-gray-100,
html.dark .bg-gray-100\/50,
html.dark .bg-gray-100\/80 {
    background-color: rgba(51, 65, 85, 0.5) !important;
}
html.dark .bg-gray-200 {
    background-color: #334155 !important;
}

/* Dark text overrides */
html.dark .text-gray-700,
html.dark .text-gray-800 {
    color: #CBD5E1 !important;
}
html.dark .text-gray-500,
html.dark .text-gray-600 {
    color: #94A3B8 !important;
}

/* Dark border overrides */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

/* Dark mode inputs */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1E293B;
    border-color: #475569;
    color: #E2E8F0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748B;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--color-primary);
}

/* Dark mode table */
html.dark .odd\:bg-white:nth-child(odd) {
    background-color: #1E293B !important;
}
html.dark .even\:bg-gray-50\/70:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Dark mode shadows */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg {
    --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* Dark mode red/error backgrounds */
html.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.2) !important;
}


.font-riyal {
    font-family: "SaudiRiyal";
}


.icon-riyal::before {
    font-family: SaudiRiyal, serif;
    content: "\e800";
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.bg-status-success { background-color: var(--color-status-success); }
.bg-status-warning { background-color: var(--color-status-warning); }
.bg-status-danger { background-color: var(--color-status-danger); }
.bg-status-info { background-color: var(--color-status-info); }

.text-status-success { color: var(--color-status-success); }
.text-status-warning { color: var(--color-status-warning); }
.text-status-danger { color: var(--color-status-danger); }
.text-status-info { color: var(--color-status-info); }
.text-on-accent { color: var(--color-on-accent); }

/* Opacity utilities for badges */
.bg-status-success\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-status-warning\/10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-status-danger\/10 { background-color: rgba(220, 38, 38, 0.1); }
.bg-status-info\/10 { background-color: rgba(37, 99, 235, 0.1); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeInDown {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Themes Override ────────────────────────────────────────────────── */

/* Emerald/Green (الأخضر الزمردي) */
html[data-theme="emerald"] {
    --color-primary: #059669; /* emerald-600 */
    --color-primary-hover: #047857; /* emerald-700 */
    --color-secondary: #10B981; /* emerald-500 */
    --color-accent: #C89B3C;
}
html[data-theme="emerald"].dark {
    --color-primary: #10B981; /* emerald-500 */
    --color-primary-hover: #34D399; /* emerald-400 */
    --color-secondary: #059669;
    --color-accent: #D4A843;
}

/* Royal/Purple (البنفسجي الفاخر) */
html[data-theme="royal"] {
    --color-primary: #6D28D9; /* violet-600 */
    --color-primary-hover: #5B21B6; /* violet-700 */
    --color-secondary: #8B5CF6; /* violet-500 */
    --color-accent: #EC4899;
}
html[data-theme="royal"].dark {
    --color-primary: #8B5CF6; /* violet-500 */
    --color-primary-hover: #A78BFA; /* violet-400 */
    --color-secondary: #6D28D9;
    --color-accent: #F472B6;
}

/* Burgundy/Rose (الأحمر العنابي) */
html[data-theme="burgundy"] {
    --color-primary: #BE123C; /* rose-700 */
    --color-primary-hover: #9F1239; /* rose-800 */
    --color-secondary: #F43F5E; /* rose-500 */
    --color-accent: #EAB308;
}
html[data-theme="burgundy"].dark {
    --color-primary: #F43F5E; /* rose-500 */
    --color-primary-hover: #FB7185; /* rose-400 */
    --color-secondary: #BE123C;
    --color-accent: #FACC15;
}

/* Slate/Gold (الرمادي والذهبي) */
html[data-theme="slate"] {
    --color-primary: #334155; /* slate-700 */
    --color-primary-hover: #1e293b; /* slate-800 */
    --color-secondary: #64748B; /* slate-500 */
    --color-accent: #C89B3C;
}
html[data-theme="slate"].dark {
    --color-primary: #64748B; /* slate-500 */
    --color-primary-hover: #94A3B8; /* slate-400 */
    --color-secondary: #475569;
    --color-accent: #D4A843;
}