encoach_frontend_new_v2/src/index.css

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

@layer base {
  :root {
    --background: 30 15% 97%;
    --foreground: 240 20% 13%;

    --card: 0 0% 100%;
    --card-foreground: 240 20% 13%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 20% 13%;

    --primary: 8 50% 54%;
    --primary-foreground: 0 0% 100%;

    --secondary: 30 12% 94%;
    --secondary-foreground: 240 20% 13%;

    --muted: 30 10% 93%;
    --muted-foreground: 240 10% 46%;

    --accent: 42 40% 92%;
    --accent-foreground: 42 40% 28%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 60% 42%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --info: 220 70% 52%;
    --info-foreground: 0 0% 100%;

    --border: 30 10% 90%;
    --input: 30 10% 90%;
    --ring: 8 50% 54%;

    --radius: 0.625rem;

    --sidebar-background: 240 20% 16%;
    --sidebar-foreground: 240 10% 90%;
    --sidebar-primary: 8 50% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 18% 22%;
    --sidebar-accent-foreground: 8 40% 78%;
    --sidebar-border: 240 18% 20%;
    --sidebar-ring: 8 50% 58%;

    /* Chart palette — used by Recharts via hsl(var(--chart-N)). Kept on the
       warm/cool axis so pairs read well together when stacked. */
    --chart-1: 8 50% 54%;
    --chart-2: 220 70% 52%;
    --chart-3: 152 60% 42%;
    --chart-4: 38 92% 50%;
    --chart-5: 280 55% 55%;
  }

  .dark {
    --background: 240 22% 7%;
    --foreground: 30 12% 95%;

    --card: 240 20% 11%;
    --card-foreground: 30 12% 95%;

    --popover: 240 20% 11%;
    --popover-foreground: 30 12% 95%;

    --primary: 8 52% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 240 18% 16%;
    --secondary-foreground: 30 12% 95%;

    --muted: 240 18% 16%;
    --muted-foreground: 240 8% 58%;

    --accent: 42 35% 20%;
    --accent-foreground: 42 40% 72%;

    --destructive: 0 62% 40%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 45% 35%;
    --success-foreground: 0 0% 100%;

    --warning: 38 70% 45%;
    --warning-foreground: 0 0% 100%;

    --info: 220 55% 42%;
    --info-foreground: 0 0% 100%;

    --border: 240 18% 18%;
    --input: 240 18% 18%;
    --ring: 8 52% 50%;

    --sidebar-background: 240 22% 9%;
    --sidebar-foreground: 240 10% 88%;
    --sidebar-primary: 8 50% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 18% 15%;
    --sidebar-accent-foreground: 8 40% 75%;
    --sidebar-border: 240 18% 13%;
    --sidebar-ring: 8 50% 55%;

    --chart-1: 8 52% 62%;
    --chart-2: 220 65% 65%;
    --chart-3: 152 50% 55%;
    --chart-4: 38 75% 60%;
    --chart-5: 280 55% 68%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', system-ui, sans-serif;
  }

  code, pre {
    font-family: 'JetBrains Mono', monospace;
  }
}

/* -------------------------------------------------------------------------
 * RTL / Arabic support
 *
 * `tailwindcss-rtl` handles the bulk of the work: physical margin / padding /
 * position / border / rounded / text-align / space-x utilities are mirrored
 * automatically when `html[dir="rtl"]` is active.
 *
 * Below we cover the things Tailwind can't: the webfont (Inter has weak
 * Arabic glyphs, so swap in Cairo), recharts tooltips/axes which have their
 * own DOM, and a few icons that should NOT mirror (arrows used as pure
 * visual affordance e.g. ChevronRight in a dropdown).
 * ------------------------------------------------------------------------- */

html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

html[dir="rtl"] code,
html[dir="rtl"] pre {
  font-family: 'JetBrains Mono', monospace;
}

html[dir="rtl"] .recharts-wrapper,
html[dir="rtl"] .recharts-legend-wrapper {
  direction: ltr;
}

/* Breadcrumb and submenu chevrons: always pointing "forward" in reading
   direction. Lucide's ChevronRight is ">" which is forward in LTR, but in
   RTL the same arrow must become "<". We flip via CSS so no component has
   to know about direction. */
html[dir="rtl"] nav[aria-label="breadcrumb"] li[role="presentation"] > svg,
html[dir="rtl"] [data-radix-menu-content] [role="menuitem"] > svg:last-child,
html[dir="rtl"] [data-radix-popper-content-wrapper] [role="menuitem"] > svg:last-child {
  transform: rotate(180deg);
}

/* Numbers, percentages, emails, URLs, dates should stay LTR-isolated even
   when embedded in Arabic paragraphs, otherwise slashes / percent signs /
   dashes drift to the wrong side and the value becomes unreadable.
   <bdi> already gives us this per-element; the helper classes below are
   for places where adding a wrapper element is awkward. */
.ltr-nums,
.dir-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Pure-number cells & badges align to the end (right in LTR, left in RTL)
   but the digits themselves still read left-to-right. */
html[dir="rtl"] .numeric {
  text-align: end;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Some lucide icons are pure affordances (play, external-link, send) and
   should NOT be mirrored even if tailwindcss-rtl would otherwise flip the
   button that contains them. Authors opt-in with data-no-flip. */
html[dir="rtl"] [data-no-flip] {
  transform: none !important;
}

/* Keep code snippets, identifiers, and file paths readable in RTL. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] [data-monospace] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* Scrollbars inside horizontally-scrollable tables already flip naturally
   in RTL, but the shadow Radix portals (dropdowns, tooltips, dialogs) use
   `right-0` / `left-0` positioning computed in JS. For safety, make sure
   they inherit the document direction. */
html[dir="rtl"] [data-radix-popper-content-wrapper] {
  direction: rtl;
}

/* Inputs with dir="ltr" (email, password, URL) override but keep the
   placeholder aligned to the visual start (right in RTL, left in LTR). */
html[dir="rtl"] input[dir="ltr"]::placeholder,
html[dir="rtl"] textarea[dir="ltr"]::placeholder {
  text-align: right;
}