@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  :root {
    --font-family: 'Cairo', 'Tajawal', sans-serif;
    --radius: 0.75rem;
    /* Increased radius for modern look */

    /* Base Colors */
    --background: 210 40% 98%;
    /* Slate-50 */
    --foreground: 222 47% 11%;
    /* Slate-900 */

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 222 47% 11%;
    /* Deep Slate #0F172A */
    --primary-foreground: 210 40% 98%;

    --secondary: 358 75% 48%;
    /* Tata Red #D61F26 */
    --secondary-foreground: 0 0% 100%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222 47% 11%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222 47% 11%;

    --chart-1: 222 47% 11%;
    --chart-2: 358 75% 48%;
    --chart-3: 210 40% 96.1%;
    --chart-4: 215.4 16.3% 46.9%;
    --chart-5: 222 47% 11%;

    /* Brand Variables - Premium Slate/Red Theme */
    --brand-primary: #0F172A;
    /* Deep Slate */
    --brand-secondary: #D61F26;
    /* Tata Red */
    --brand-accent: #E2E8F0;
    /* Slate 200 */

    --brand-primary-rgb: 15 23 42;
    --brand-secondary-rgb: 214 31 38;

    /* Slate Scale */
    --brand-primary-50: #F8FAFC;
    --brand-primary-100: #F1F5F9;
    --brand-primary-200: #E2E8F0;
    --brand-primary-300: #CBD5E1;
    --brand-primary-400: #94A3B8;
    --brand-primary-500: #64748B;
    --brand-primary-600: #475569;
    --brand-primary-700: #334155;
    --brand-primary-800: #1E293B;
    --brand-primary-900: #0F172A;
    /* Main Primary */

    --brand-primary-50-rgb: 248 250 252;
    --brand-primary-100-rgb: 241 245 249;
    --brand-primary-200-rgb: 226 232 240;
    --brand-primary-300-rgb: 203 213 225;
    --brand-primary-400-rgb: 148 163 184;
    --brand-primary-500-rgb: 100 116 139;
    --brand-primary-600-rgb: 71 85 105;
    --brand-primary-700-rgb: 51 65 85;
    --brand-primary-800-rgb: 30 41 59;
    --brand-primary-900-rgb: 15 23 42;

    /* Red Scale */
    --brand-secondary-50: #FEF2F2;
    --brand-secondary-100: #FEE2E2;
    --brand-secondary-200: #FECACA;
    --brand-secondary-300: #FCA5A5;
    --brand-secondary-400: #F87171;
    --brand-secondary-500: #EF4444;
    --brand-secondary-600: #DC2626;
    --brand-secondary-700: #B91C1C;
    --brand-secondary-800: #991B1B;
    --brand-secondary-900: #7F1D1D;

    --brand-secondary-50-rgb: 254 242 242;
    --brand-secondary-100-rgb: 254 226 226;
    --brand-secondary-200-rgb: 254 202 202;
    --brand-secondary-300-rgb: 252 165 165;
    --brand-secondary-400-rgb: 248 113 113;
    --brand-secondary-500-rgb: 239 68 68;
    --brand-secondary-600-rgb: 220 38 38;
    --brand-secondary-700-rgb: 185 28 28;
    --brand-secondary-800-rgb: 153 27 27;
    --brand-secondary-900-rgb: 127 29 29;
  }

  .dark {
    --background: 0 0% 12%;
    --foreground: 0 0% 100%;
    --card: 0 0% 14%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 14%;
    --popover-foreground: 0 0% 100%;
    --primary: 358 66% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 73% 24%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 93%;
    --accent: 0 0% 38%;
    --accent-foreground: 0 0% 100%;
    --destructive: 358 66% 50%;
    --border: 0 0% 25%;
    --input: 0 0% 30%;
    --ring: 358 66% 55%;
    --chart-1: 358 66% 55%;
    --chart-2: 222 73% 24%;
    --chart-3: 0 0% 79%;
    --chart-4: 0 0% 60%;
    --chart-5: 0 0% 93%;
    --sidebar: 0 0% 14%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 358 66% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 20%;
    --sidebar-accent-foreground: 0 0% 93%;
    --sidebar-border: 0 0% 25%;
    --sidebar-ring: 358 66% 55%;
  }
}

@layer base {
  html {
    font-family: var(--font-family, system-ui, -apple-system, sans-serif);
  }

  * {
    @apply border-border outline-ring/50;
  }

  body {
    font-family: var(--font-family, system-ui, -apple-system, sans-serif);
    @apply bg-background text-foreground;
  }
}

@layer base {

  /* Map legacy blue utility classes to the dynamic brand palette */
  .bg-blue-50 {
    background-color: var(--brand-primary-50, #eef1f6) !important;
  }

  .bg-blue-100 {
    background-color: var(--brand-primary-100, #e1e6ef) !important;
  }

  .bg-blue-200 {
    background-color: var(--brand-primary-200, #c7d1e0) !important;
  }

  .bg-blue-300 {
    background-color: var(--brand-primary-300, #a4b4c9) !important;
  }

  .bg-blue-400 {
    background-color: var(--brand-primary-400, #798fb0) !important;
  }

  .bg-blue-500 {
    background-color: var(--brand-primary-500, #0A1A3F) !important;
  }

  .bg-blue-600 {
    background-color: var(--brand-primary-600, #081432) !important;
  }

  .bg-blue-700 {
    background-color: var(--brand-primary-700, #061028) !important;
  }

  .bg-blue-800 {
    background-color: var(--brand-primary-800, #050c1f) !important;
  }

  .bg-blue-900 {
    background-color: var(--brand-primary-900, #030815) !important;
  }

  .text-blue-50 {
    color: var(--brand-primary-50, #eef1f6) !important;
  }

  .text-blue-100 {
    color: var(--brand-primary-100, #e1e6ef) !important;
  }

  .text-blue-200 {
    color: var(--brand-primary-200, #c7d1e0) !important;
  }

  .text-blue-300 {
    color: var(--brand-primary-300, #a4b4c9) !important;
  }

  .text-blue-400 {
    color: var(--brand-primary-400, #798fb0) !important;
  }

  .text-blue-500 {
    color: var(--brand-primary-500, #0A1A3F) !important;
  }

  .text-blue-600 {
    color: var(--brand-primary-600, #081432) !important;
  }

  .text-blue-700 {
    color: var(--brand-primary-700, #061028) !important;
  }

  .text-blue-800 {
    color: var(--brand-primary-800, #050c1f) !important;
  }

  .text-blue-900 {
    color: var(--brand-primary-900, #030815) !important;
  }

  .border-blue-50 {
    border-color: var(--brand-primary-50, #eef1f6) !important;
  }

  .border-blue-100 {
    border-color: var(--brand-primary-100, #e1e6ef) !important;
  }

  .border-blue-200 {
    border-color: var(--brand-primary-200, #c7d1e0) !important;
  }

  .border-blue-300 {
    border-color: var(--brand-primary-300, #a4b4c9) !important;
  }

  .border-blue-400 {
    border-color: var(--brand-primary-400, #798fb0) !important;
  }

  .border-blue-500 {
    border-color: var(--brand-primary-500, #0A1A3F) !important;
  }

  .border-blue-600 {
    border-color: var(--brand-primary-600, #081432) !important;
  }

  .border-blue-700 {
    border-color: var(--brand-primary-700, #061028) !important;
  }

  .border-blue-800 {
    border-color: var(--brand-primary-800, #050c1f) !important;
  }

  .border-blue-900 {
    border-color: var(--brand-primary-900, #030815) !important;
  }

  .ring-blue-200 {
    --tw-ring-color: rgb(var(--brand-primary-200-rgb, 225 230 239)) !important;
  }

  .ring-blue-500 {
    --tw-ring-color: rgb(var(--brand-primary-500-rgb, 10 26 63)) !important;
  }

  .from-blue-50 {
    --tw-gradient-from: rgb(var(--brand-primary-50-rgb, 238 241 246)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-50-rgb, 238 241 246) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-100 {
    --tw-gradient-from: rgb(var(--brand-primary-100-rgb, 225 230 239)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-100-rgb, 225 230 239) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-200 {
    --tw-gradient-from: rgb(var(--brand-primary-200-rgb, 199 209 224)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-200-rgb, 199 209 224) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-300 {
    --tw-gradient-from: rgb(var(--brand-primary-300-rgb, 164 180 201)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-300-rgb, 164 180 201) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-400 {
    --tw-gradient-from: rgb(var(--brand-primary-400-rgb, 121 143 176)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-400-rgb, 121 143 176) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-500 {
    --tw-gradient-from: rgb(var(--brand-primary-500-rgb, 10 26 63)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-500-rgb, 10 26 63) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-600 {
    --tw-gradient-from: rgb(var(--brand-primary-600-rgb, 8 20 50)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-600-rgb, 8 20 50) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-700 {
    --tw-gradient-from: rgb(var(--brand-primary-700-rgb, 6 16 40)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-700-rgb, 6 16 40) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-800 {
    --tw-gradient-from: rgb(var(--brand-primary-800-rgb, 5 12 31)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-800-rgb, 5 12 31) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .from-blue-900 {
    --tw-gradient-from: rgb(var(--brand-primary-900-rgb, 3 8 21)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--brand-primary-900-rgb, 3 8 21) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  .to-blue-50 {
    --tw-gradient-to: rgb(var(--brand-primary-50-rgb, 238 241 246)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-100 {
    --tw-gradient-to: rgb(var(--brand-primary-100-rgb, 225 230 239)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-200 {
    --tw-gradient-to: rgb(var(--brand-primary-200-rgb, 199 209 224)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-300 {
    --tw-gradient-to: rgb(var(--brand-primary-300-rgb, 164 180 201)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-400 {
    --tw-gradient-to: rgb(var(--brand-primary-400-rgb, 121 143 176)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-500 {
    --tw-gradient-to: rgb(var(--brand-primary-500-rgb, 10 26 63)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-600 {
    --tw-gradient-to: rgb(var(--brand-primary-600-rgb, 8 20 50)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-700 {
    --tw-gradient-to: rgb(var(--brand-primary-700-rgb, 6 16 40)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-800 {
    --tw-gradient-to: rgb(var(--brand-primary-800-rgb, 5 12 31)) var(--tw-gradient-to-position) !important;
  }

  .to-blue-900 {
    --tw-gradient-to: rgb(var(--brand-primary-900-rgb, 3 8 21)) var(--tw-gradient-to-position) !important;
  }

  .via-blue-50 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-50-rgb, 238 241 246)), var(--tw-gradient-to) !important;
  }

  .via-blue-100 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-100-rgb, 225 230 239)), var(--tw-gradient-to) !important;
  }

  .via-blue-200 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-200-rgb, 199 209 224)), var(--tw-gradient-to) !important;
  }

  .via-blue-300 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-300-rgb, 164 180 201)), var(--tw-gradient-to) !important;
  }

  .via-blue-400 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-400-rgb, 121 143 176)), var(--tw-gradient-to) !important;
  }

  .via-blue-500 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-500-rgb, 10 26 63)), var(--tw-gradient-to) !important;
  }

  .via-blue-600 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-600-rgb, 8 20 50)), var(--tw-gradient-to) !important;
  }

  .via-blue-700 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-700-rgb, 6 16 40)), var(--tw-gradient-to) !important;
  }

  .via-blue-800 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-800-rgb, 5 12 31)), var(--tw-gradient-to) !important;
  }

  .via-blue-900 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary-900-rgb, 3 8 21)), var(--tw-gradient-to) !important;
  }
}

@layer utilities {
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .text-balance {
    text-wrap: balance;
  }
}

@layer components {

  /* Admin-wide visual system to lift internal pages without touching public UI */
  .admin-surface {
    --admin-primary: rgb(var(--brand-primary-rgb, 10 26 63));
    --admin-secondary: rgb(var(--brand-secondary-rgb, 193 39 45));
    --admin-accent: rgb(var(--brand-accent-rgb, 201 201 201));
    --admin-danger: rgb(var(--brand-secondary-rgb, 193 39 45));

    /* Glassmorphism variables */
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  }

  .admin-surface [data-slot='card'] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
  }

  /* ... Admin surface styles kept for later if needed ... */
}