pn-new-crm/src/app/globals.css

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

@layer base {
  :root {
    /* shadcn/ui variable format: H S% L% */
    --background: 0 0% 100%; /* #ffffff */
    --foreground: 224 39% 19%; /* #1e2844 */
    --card: 0 0% 100%;
    --card-foreground: 224 39% 19%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 39% 19%;
    --primary: 213 55% 56%; /* #3a7bc8 */
    --primary-foreground: 0 0% 100%;
    --secondary: 224 39% 19%; /* #1e2844 */
    --secondary-foreground: 0 0% 100%;
    --muted: 210 11% 96%; /* #f1f3f5 */
    --muted-foreground: 228 10% 49%; /* #71768a */
    --accent: 190 18% 60%; /* #83aab1 */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 65% 51%; /* #d32f2f */
    --destructive-foreground: 0 0% 100%;
    --border: 227 10% 82%; /* #cdcfd6 */
    --input: 227 10% 82%;
    --ring: 213 55% 56%; /* #3a7bc8 focus ring */
    --radius: 0.375rem;

    /* Sidebar (using dark navy) */
    --sidebar-background: 224 39% 19%;
    --sidebar-foreground: 227 10% 82%;
    --sidebar-primary: 213 55% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 224 39% 15%;
    --sidebar-accent-foreground: 227 10% 82%;
    --sidebar-border: 226 18% 34%;
    --sidebar-ring: 213 55% 56%;

    /* Chart colors for Recharts */
    --chart-1: 213 55% 56%; /* Brand blue */
    --chart-2: 224 39% 19%; /* Dark navy */
    --chart-3: 190 18% 60%; /* Teal */
    --chart-4: 254 29% 50%; /* Purple */
    --chart-5: 130 30% 76%; /* Mint */
    --chart-6: 75 30% 82%; /* Sage */
  }

  .dark {
    --background: 224 40% 12%;
    --foreground: 227 10% 91%;
    --card: 224 39% 19%;
    --card-foreground: 227 10% 91%;
    --popover: 224 39% 19%;
    --popover-foreground: 227 10% 91%;
    --primary: 213 52% 62%;
    --primary-foreground: 0 0% 100%;
    --secondary: 224 39% 22%;
    --secondary-foreground: 227 10% 82%;
    --muted: 224 39% 18%;
    --muted-foreground: 228 10% 49%;
    --accent: 190 18% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 63%;
    --destructive-foreground: 0 0% 100%;
    --border: 224 35% 28%;
    --input: 224 35% 28%;
    --ring: 213 52% 62%;

    /* Sidebar stays dark navy in both modes */
    --sidebar-background: 224 40% 10%;
    --sidebar-foreground: 227 10% 82%;
    --sidebar-primary: 213 52% 62%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 224 40% 14%;
    --sidebar-accent-foreground: 227 10% 82%;
    --sidebar-border: 226 18% 28%;
    --sidebar-ring: 213 52% 62%;

    /* Chart colors (brightened for dark mode) */
    --chart-1: 213 52% 62%;
    --chart-2: 227 10% 82%;
    --chart-3: 190 18% 55%;
    --chart-4: 254 29% 55%;
    --chart-5: 130 30% 70%;
    --chart-6: 75 30% 78%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  /* Wave watermark - subtle background texture for auth pages */
  .wave-watermark {
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 10px,
      rgba(58, 123, 200, 0.03) 10px,
      rgba(58, 123, 200, 0.03) 20px
    );
  }

  /* Focus ring */
  *:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/30;
  }
}

/* ─── Form-factor shell visibility ──────────────────────────────────────────
 * Two shells (desktop + mobile) render to the DOM on every page; CSS hides
 * the inactive one. The data-form-factor body attribute is set server-side
 * from User-Agent (see src/lib/form-factor.ts). The media-query fallback
 * handles desktop browsers resized below lg (1024px), or stripped UAs.
 *
 * IMPORTANT: only `display: none` rules are emitted - we never set a positive
 * display, because the desktop shell uses Tailwind's `flex` class which would
 * be overridden by `display: block` (same specificity, later cascade).
 */
[data-shell='mobile'] {
  display: none;
}

@media (max-width: 1023.98px) {
  [data-shell='desktop'] {
    display: none;
  }
  [data-shell='mobile'] {
    display: block;
  }
}

body[data-form-factor='mobile'] [data-shell='desktop'] {
  display: none;
}
body[data-form-factor='mobile'] [data-shell='mobile'] {
  display: block;
}

/*
 * React Query Devtools floating button collides with the bottom tab bar's
 * "More" tab on mobile. The devtools panel itself remains accessible from
 * desktop where the toggle is positioned out of the way of any UI.
 */
@media (max-width: 1023.98px) {
  .tsqd-open-btn-container,
  .tsqd-parent-container {
    display: none !important;
  }
}

/*
 * Recharts focus-ring suppression.
 *
 * Recharts SVG surfaces become keyboard-focusable when a user clicks into
 * them (the library adds tabindex on chart sectors / paths). The global
 * `*:focus-visible` rule above paints a 4px brand-blue box-shadow ring,
 * which on a chart surface reads as a stray rectangle around the plot
 * area. Hover/tooltip already handles chart interactivity, so suppress
 * the ring entirely here.
 *
 * Lives OUTSIDE `@layer base` so Tailwind's PostCSS pipeline can't drop
 * it during purge (an earlier copy inside `@layer base` was being
 * silently removed at build time, leaving the ring intact).
 */
div.recharts-wrapper:focus,
div.recharts-wrapper:focus-visible,
svg.recharts-surface:focus,
svg.recharts-surface:focus-visible,
div.recharts-responsive-container:focus,
div.recharts-responsive-container:focus-visible,
.recharts-wrapper *:focus,
.recharts-wrapper *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
}