@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-almarai: 'Almarai', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* Tag/Badge color tokens */
  --color-tag-background-success-light: var(--tag-background-success-light);
  --color-tag-border-success-light: var(--tag-border-success-light);
  --color-tag-text-success: var(--tag-text-success);
  --color-tag-background-info-light: var(--tag-background-info-light);
  --color-tag-border-info-light: var(--tag-border-info-light);
  --color-tag-text-info: var(--tag-text-info);
  --color-tag-background-warning-light: var(--tag-background-warning-light);
  --color-tag-border-warning-light: var(--tag-border-warning-light);
  --color-tag-text-warning: var(--tag-text-warning);
  --color-tag-background-neutral-light: var(--tag-background-neutral-light);
  --color-tag-border-neutral-light: var(--tag-border-neutral-light);
  --color-tag-text-neutral: var(--tag-text-neutral);
  --color-tag-background-secondary-light: var(--tag-background-secondary-light);
  --color-tag-border-secondary-light: var(--tag-border-secondary-light);
  --color-tag-text-secondary: var(--tag-text-secondary);

  /* Functional color aliases */
  --color-success: var(--tag-text-success);
  --color-info: var(--tag-text-info);
  --color-warning: var(--tag-text-warning);
  --color-neutral: var(--tag-text-neutral);

  /* Semantic background tokens */
  --color-background-neutral-50: var(--background-neutral-50);
  --color-background-neutral-100: var(--background-neutral-100);
}

:root {
  --radius: 0.75rem;

  /* Base colors - Light gray background like the design */
  --background: oklch(0.99 0.002 264);
  --foreground: oklch(0.2 0.01 264);

  /* Card colors - White cards */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.01 264);

  /* Popover colors */
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.01 264);

  /* Primary - Bright Green from Figma (#1b8354) */
  --primary: #1b8354;
  --primary-foreground: oklch(1 0 0);

  /* Secondary - Dark Green from Figma (#14573a) */
  --secondary: #14573a;
  --secondary-foreground: oklch(1 0 0);

  /* Muted - Subtle gray */
  --muted: oklch(0.96 0.002 264);
  --muted-foreground: oklch(0.55 0.01 264);

  /* Accent - Success Green (bright green from cards) */
  --accent: oklch(0.65 0.19 145);
  --accent-foreground: oklch(1 0 0);

  /* Destructive - Red for errors */
  --destructive: oklch(0.55 0.22 27);
  --destructive-foreground: oklch(1 0 0);

  /* Borders and inputs */
  --border: oklch(0.92 0.002 264);
  --input: #9da4ae;
  --ring: oklch(0.31 0.09 162);

  /* Chart colors - DYNAMICALLY GENERATED from dashboard settings
     These are DEFAULT/FALLBACK values only.
     The SettingsProvider dynamically overrides these based on:
     - dashboard_primary_color (used for chart-1)
     - dashboard_secondary_color (used for chart-3)
     - chart-2, chart-4, chart-5 are derived with brightness/hue adjustments
     See: contexts/settings-context.tsx -> generateChartColors()
  */
  --chart-1: oklch(0.65 0.19 145); /* Primary/Success (overridden dynamically) */
  --chart-2: oklch(0.55 0.18 40);  /* Warm accent (overridden dynamically) */
  --chart-3: oklch(0.6 0.15 275);  /* Secondary (overridden dynamically) */
  --chart-4: oklch(0.6 0.15 230);  /* Cool accent (overridden dynamically) */
  --chart-5: oklch(0.7 0.12 162);  /* Light variant (overridden dynamically) */

  /* Sidebar - Dark forest green (from design) */
  --sidebar: oklch(0.25 0.08 162);
  --sidebar-foreground: oklch(0.95 0.02 162);
  --sidebar-primary: oklch(0.65 0.19 145);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.32 0.1 162);
  --sidebar-accent-foreground: oklch(0.95 0.02 162);
  --sidebar-border: oklch(0.3 0.08 162);
  --sidebar-ring: oklch(0.65 0.19 145);

  /* Tag/Badge tokens - Light mode (Figma colors) */
  --tag-background-success-light: #ecfdf3;
  --tag-border-success-light: #abefc6;
  --tag-text-success: #085d3a;

  --tag-background-info-light: #eff8ff;
  --tag-border-info-light: #b2ddff;
  --tag-text-info: #1849a9;

  --tag-background-warning-light: #fffaeb;
  --tag-border-warning-light: #fedf89;
  --tag-text-warning: #93370d;

  --tag-background-neutral-light: #f9fafb;
  --tag-border-neutral-light: #e5e7eb;
  --tag-text-neutral: #1f2a37;

  --tag-background-secondary-light: oklch(0.95 0.05 275);
  --tag-border-secondary-light: oklch(0.85 0.1 275);
  --tag-text-secondary: oklch(0.4 0.15 275);

  /* Semantic background tokens */
  --background-neutral-50: oklch(0.98 0.002 264);
  --background-neutral-100: oklch(0.96 0.002 264);
}

.dark {
  /* Base colors - Dark background */
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);

  /* Card colors - Slightly lighter than background */
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);

  /* Popover colors */
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);

  /* Primary - Professional green */
  --primary: #1b8354;
  --primary-foreground: oklch(0.986 0.031 120.757);

  /* Secondary - Dark gray */
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);

  /* Muted - Dark gray */
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);

  /* Accent - Dark gray matching secondary */
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);

  /* Destructive - Red for errors */
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);

  /* Borders and inputs - Subtle white with opacity */
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: #1b8354;

  /* Chart colors - Green theme variants */
  --chart-1: oklch(0.871 0.15 154.449);
  --chart-2: oklch(0.723 0.219 149.579);
  --chart-3: oklch(0.627 0.194 149.214);
  --chart-4: oklch(0.527 0.154 150.069);
  --chart-5: oklch(0.448 0.119 151.328);

  /* Sidebar - Matching card color */
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: #1b8354;
  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: #1b8354;

  /* Tag/Badge tokens - Dark mode */
  --tag-background-success-light: oklch(0.25 0.08 145);
  --tag-border-success-light: oklch(0.35 0.1 145);
  --tag-text-success: oklch(0.75 0.15 145);

  --tag-background-info-light: oklch(0.25 0.06 230);
  --tag-border-info-light: oklch(0.35 0.08 230);
  --tag-text-info: oklch(0.75 0.12 230);

  --tag-background-warning-light: oklch(0.25 0.08 85);
  --tag-border-warning-light: oklch(0.35 0.12 85);
  --tag-text-warning: oklch(0.75 0.15 85);

  --tag-background-neutral-light: oklch(0.3 0.01 264);
  --tag-border-neutral-light: oklch(0.4 0.01 264);
  --tag-text-neutral: oklch(0.75 0.01 264);

  --tag-background-secondary-light: oklch(0.25 0.08 275);
  --tag-border-secondary-light: oklch(0.35 0.1 275);
  --tag-text-secondary: oklch(0.75 0.15 275);

  /* Semantic background tokens */
  --background-neutral-50: oklch(0.22 0.015 264);
  --background-neutral-100: oklch(0.25 0.015 264);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

  html[lang="ar"] body {
    font-family: var(--font-almarai), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  html[lang="en"] body {
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Modern minimal scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.75 0.005 264 / 30%) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: oklch(0.75 0.005 264 / 30%);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.65 0.005 264 / 50%);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark mode scrollbar */
.dark {
  scrollbar-color: oklch(0.45 0.005 264 / 35%) transparent;
}

.dark ::-webkit-scrollbar-thumb {
  background: oklch(0.45 0.005 264 / 35%);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: oklch(0.55 0.005 264 / 50%);
}

@layer utilities {
  /* Trading room specific utilities */
  .stat-card {
    @apply bg-card text-card-foreground rounded-xl border border-border shadow-sm;
  }

  .stat-positive {
    @apply text-accent;
  }

  .stat-negative {
    @apply text-destructive;
  }

  .progress-bar-success {
    @apply bg-accent;
  }

  .progress-bar-warning {
    @apply bg-chart-2;
  }

  /* RTL support for Arabic */
  [dir="rtl"] {
    direction: rtl;
  }

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

/*
  IMPORTANT: Dynamic Color System

  All chart colors are dynamically generated by SettingsProvider based on:
  - dashboard_primary_color: Used for --primary, --accent, --chart-1, --sidebar-primary, --ring
  - dashboard_secondary_color: Used for --secondary, --chart-3, --sidebar, --sidebar-accent

  Chart color palette (all derived from primary/secondary):
  - chart-1: Primary color (main series, success indicators)
  - chart-2: Warm accent (derived from primary with +40° hue shift, 1.2x brightness)
  - chart-3: Secondary color (alternative series)
  - chart-4: Cool accent (derived from primary with -60° hue shift, 1.1x brightness)
  - chart-5: Light variant (derived from primary with 1.5x brightness)

  Implementation: contexts/settings-context.tsx -> generateChartColors()
  The CSS variables below are DEFAULT/FALLBACK values only.
*/

/* ─────────────────────────────────────────────────────────────────────────
   Print styles — visibility-isolation strategy
   ─────────────────────────────────────────────────────────────────────────
   Problem: window.print() prints the full dashboard page including the
   sidebar, which uses position:fixed AND a Radix Sheet portal (used on
   narrow viewports). Both bypass display:none on a wrapper div.

   Solution: hide *everything* with visibility:hidden, then restore only
   .print-report-root and its children with visibility:visible and position
   it at the top of the page. This is viewport/portal/fixed-element agnostic.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  @page {
    margin: 1.5cm;
    size: A4 portrait;
  }

  /* Step 1 – make the whole page invisible */
  body * {
    visibility: hidden !important;
  }

  /* Step 2 – restore only the report container and all its descendants */
  .print-report-root,
  .print-report-root * {
    visibility: visible !important;
  }

  /* Step 3 – pull the container out of the layout and fill the page */
  .print-report-root {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
    overflow: visible !important;
  }

  /* ── Hide interactive chrome inside the report itself ────── */

  /* Filter card and action buttons already carry print:hidden; belt-and-suspenders */
  .print-report-root .print\:hidden {
    visibility: hidden !important;
    display: none !important;
  }

  /* Buttons (except collapsible triggers we want as headers) */
  .print-report-root button {
    display: none !important;
    visibility: hidden !important;
  }

  /* Collapsible trigger rows serve as section headers in print */
  .print-report-root button[aria-expanded] {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Hide chevron icon inside triggers */
  .print-report-root button[aria-expanded] svg {
    display: none !important;
  }

  /* ── Force all Radix Collapsibles open ───────────────────── */
  /*
   * Radix sets hidden attribute + --radix-collapsible-content-height
   * inline style on closed CollapsibleContent. Targeting the CSS variable
   * overrides the hidden attribute without touching unrelated [hidden] elements.
   */
  .print-report-root [style*="--radix-collapsible-content-height"] {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    animation: none !important;
  }

  /* ── SVG / Recharts: preserve colors ────────────────────── */
  .print-report-root svg,
  .print-report-root svg * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* ── Layout fixes inside the report ─────────────────────── */
  .print-report-root .overflow-y-auto,
  .print-report-root .overflow-hidden {
    overflow: visible !important;
    height: auto !important;
  }

  /* ── Cards ───────────────────────────────────────────────── */
  .print-report-root .rounded-xl,
  .print-report-root .rounded-2xl {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── Tables ──────────────────────────────────────────────── */
  .print-report-root table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt !important;
  }

  .print-report-root th,
  .print-report-root td {
    border: 1px solid #ccc !important;
    padding: 5px 7px !important;
  }

  .print-report-root th {
    background-color: #f5f5f5 !important;
    font-weight: 600 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* ── Typography ──────────────────────────────────────────── */
  .print-report-root {
    font-size: 11pt;
    line-height: 1.4;
    color: black;
  }

  .print-report-root .text-muted-foreground {
    color: #555 !important;
  }

  .print-report-root h1,
  .print-report-root h2,
  .print-report-root h3,
  .print-report-root h4 {
    page-break-after: avoid;
  }

  /* Demographics rows: avoid splitting across pages */
  .print-report-root section[aria-label="demographics"] > * {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  /* Hero strip: keep background colour */
  .print-report-root .bg-primary {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .print-report-root a {
    text-decoration: none !important;
    color: inherit !important;
  }
}