/* Import Cairo font for Arabic */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

:root {
  --font-size: 18px;
  --text-2xl: 1.5rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #002f43; /* Updated to brand dark blue */
  --primary-foreground: #ffffff;
  --secondary: #e6eef1; /* brand-50 */
  --secondary-foreground: #002f43;
  --muted: #f3f7f9;
  --muted-foreground: #6699ab; /* brand-300 */
  --accent: #e6eef1;
  --accent-foreground: #002f43;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: #ffffff;
  --sidebar-foreground: #002f43;
  --sidebar-primary: #002f43;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e6eef1;
  --sidebar-accent-foreground: #002f43;
  --sidebar-border: #ccdde3;
  --sidebar-ring: #002f43;
  
  /* Brand colors - Dark Blue (0, 47, 67) */
  --brand-50: #e6eef1;
  --brand-100: #ccdde3;
  --brand-200: #99bbc7;
  --brand-300: #6699ab;
  --brand-400: #33778f;
  --brand-500: #002f43;
  --brand-600: #00263a;
  --brand-700: #001d2c;
  --brand-800: #00131d;
  --brand-900: #000a0f;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/* Map CSS variables to Tailwind color format */
:root {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  
  /* Override orange with brand color */
  --color-orange-50: var(--brand-50);
  --color-orange-100: var(--brand-100);
  --color-orange-200: var(--brand-200);
  --color-orange-300: var(--brand-300);
  --color-orange-400: var(--brand-400);
  --color-orange-500: var(--brand-500);
  --color-orange-600: var(--brand-600);
  --color-orange-700: var(--brand-700);
  --color-orange-800: var(--brand-800);
  --color-orange-900: var(--brand-900);
}

/* Base styles */
* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
:where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    label {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }
  }

html {
  font-size: var(--font-size);
}

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Better mobile touch targets */
@media (max-width: 768px) {
  button, a, input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Override: Keep checkboxes at their intended size (don't force 44px) */
  input[type="checkbox"] {
    min-height: 0;
    min-width: 0;
  }
  
  /* Reduce font size slightly on mobile for better fit */
  :root {
    --font-size: 16px;
  }
}

/* Font families */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Arabic font */
body.rtl {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Font family for Arabic */
.font-cairo {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Brand color utilities */
.text-brand-50 { color: var(--brand-50); }
.text-brand-100 { color: var(--brand-100); }
.text-brand-200 { color: var(--brand-200); }
.text-brand-300 { color: var(--brand-300); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.text-brand-900 { color: var(--brand-900); }

.bg-brand-50 { background-color: var(--brand-50); }
.bg-brand-100 { background-color: var(--brand-100); }
.bg-brand-200 { background-color: var(--brand-200); }
.bg-brand-300 { background-color: var(--brand-300); }
.bg-brand-400 { background-color: var(--brand-400); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }
.bg-brand-900 { background-color: var(--brand-900); }

.hover\:bg-brand-200:hover { background-color: var(--brand-200); }
.dark .hover\:bg-brand-200:hover { background-color: var(--brand-200); }

/* Primary color opacity utilities - Tailwind uses / for opacity */
.bg-primary\/10 { background-color: rgba(0, 47, 67, 0.1); }
.bg-primary\/5 { background-color: rgba(0, 47, 67, 0.05); }
.bg-primary\/20 { background-color: rgba(0, 47, 67, 0.2); }
.bg-primary\/30 { background-color: rgba(0, 47, 67, 0.3); }
.bg-primary\/50 { background-color: rgba(0, 47, 67, 0.5); }

.dark .bg-primary\/10 { background-color: rgba(255, 255, 255, 0.1); }
.dark .bg-primary\/5 { background-color: rgba(255, 255, 255, 0.05); }
.dark .bg-primary\/20 { background-color: rgba(255, 255, 255, 0.2); }
.dark .bg-primary\/30 { background-color: rgba(255, 255, 255, 0.3); }
.dark .bg-primary\/50 { background-color: rgba(255, 255, 255, 0.5); }

/* RTL specific adjustments */
[dir="rtl"] {
  direction: rtl;
}

[dir="ltr"] {
  direction: ltr;
}

/* RTL text alignment */
[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* RTL padding and margin adjustments for specific utilities */
[dir="rtl"] .pl-1 { padding-right: 0.25rem; padding-left: 0; }
[dir="rtl"] .pr-1 { padding-left: 0.25rem; padding-right: 0; }
[dir="rtl"] .pl-2 { padding-right: 0.5rem; padding-left: 0; }
[dir="rtl"] .pr-2 { padding-left: 0.5rem; padding-right: 0; }
[dir="rtl"] .pl-3 { padding-right: 0.75rem; padding-left: 0; }
[dir="rtl"] .pr-3 { padding-left: 0.75rem; padding-right: 0; }
[dir="rtl"] .pl-4 { padding-right: 1rem; padding-left: 0; }
[dir="rtl"] .pr-4 { padding-left: 1rem; padding-right: 0; }
[dir="rtl"] .pl-6 { padding-right: 1.5rem; padding-left: 0; }
[dir="rtl"] .pr-6 { padding-left: 1.5rem; padding-right: 0; }

[dir="rtl"] .ml-1 { margin-right: 0.25rem; margin-left: 0; }
[dir="rtl"] .mr-1 { margin-left: 0.25rem; margin-right: 0; }
[dir="rtl"] .ml-2 { margin-right: 0.5rem; margin-left: 0; }
[dir="rtl"] .mr-2 { margin-left: 0.5rem; margin-right: 0; }
[dir="rtl"] .ml-3 { margin-right: 0.75rem; margin-left: 0; }
[dir="rtl"] .mr-3 { margin-left: 0.75rem; margin-right: 0; }
[dir="rtl"] .ml-4 { margin-right: 1rem; margin-left: 0; }
[dir="rtl"] .mr-4 { margin-left: 1rem; margin-right: 0; }

/* RTL border radius */
[dir="rtl"] .rounded-l { border-radius: 0 0.25rem 0.25rem 0; }
[dir="rtl"] .rounded-r { border-radius: 0.25rem 0 0 0.25rem; }
[dir="rtl"] .rounded-tl { border-top-right-radius: 0.25rem; border-top-left-radius: 0; }
[dir="rtl"] .rounded-tr { border-top-left-radius: 0.25rem; border-top-right-radius: 0; }
[dir="rtl"] .rounded-bl { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0; }
[dir="rtl"] .rounded-br { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0; }

/* RTL positioning */
[dir="rtl"] .left-0 { right: 0; left: auto; }
[dir="rtl"] .right-0 { left: 0; right: auto; }
[dir="rtl"] .left-4 { right: 1rem; left: auto; }
[dir="rtl"] .right-4 { left: 1rem; right: auto; }

/* RTL transforms */
[dir="rtl"] .transform.scale-x-neg {
  transform: scaleX(1);
}

/* Better Arabic number rendering */
body.rtl input[type="number"],
body.rtl input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* Improved Cairo font rendering */
body.rtl {
  font-feature-settings: 'ss01' on, 'ss02' on;
  letter-spacing: 0.01em;
}

/* Utility classes for components that need RTL awareness */
/* Use these classes on components that should adapt to RTL */

/* Gap utilities - these work automatically with flex-direction changes */
[dir="rtl"] .gap-x-1 { column-gap: 0.25rem; }
[dir="rtl"] .gap-x-2 { column-gap: 0.5rem; }
[dir="rtl"] .gap-x-3 { column-gap: 0.75rem; }
[dir="rtl"] .gap-x-4 { column-gap: 1rem; }

/* Space utilities - reverse for RTL */
[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { 
  --tw-space-x-reverse: 1;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { 
  --tw-space-x-reverse: 1;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { 
  --tw-space-x-reverse: 1;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Custom utility for RTL-aware flex layouts */
.rtl-flex-row {
  display: flex;
  flex-direction: row;
}

[dir="rtl"] .rtl-flex-row {
  flex-direction: row-reverse;
}

/* Dropdown and absolute positioning adjustments */
[dir="rtl"] .rtl-dropdown-right {
  left: 0 !important;
  right: auto !important;
}

[dir="ltr"] .rtl-dropdown-right {
  right: 0 !important;
  left: auto !important;
}