
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

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

/* ── Tailwind v4: CSS var bridge ─────────────────────────────────────────── */
@theme inline {
  --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-ring:                   var(--ring);
  --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);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs:  var(--shadow-xs);
  --shadow-sm:  var(--shadow-sm);
  --shadow:     var(--shadow);
  --shadow-md:  var(--shadow-md);
  --shadow-lg:  var(--shadow-lg);
  --shadow-xl:  var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up:   accordion-up   0.2s ease-out;
  --font-heading:             var(--font-sans);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Clean, modern, Vercel-inspired with Canifa amber accent
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── Page background: very subtle warm off-white ── */
  --background:         oklch(0.975 0.004 80);
  --foreground:         oklch(0.145 0.012 260);

  /* ── Card: pure white with faint shadow-based depth ── */
  --card:               oklch(1.000 0.000 0);
  --card-foreground:    oklch(0.145 0.012 260);

  /* ── Popover ── */
  --popover:            oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.145 0.012 260);

  /* ── Primary: Canifa Amber-Gold ── */
  --primary:            oklch(0.680 0.165 55);   /* rich amber */
  --primary-foreground: oklch(0.980 0.005 80);

  /* ── Secondary ── */
  --secondary:          oklch(0.960 0.006 248);
  --secondary-foreground: oklch(0.280 0.010 260);

  /* ── Muted: subtle grey fill ── */
  --muted:              oklch(0.960 0.004 240);
  --muted-foreground:   oklch(0.520 0.012 258);

  /* ── Accent: very light amber tint ── */
  --accent:             oklch(0.955 0.018 80);
  --accent-foreground:  oklch(0.220 0.015 60);

  /* ── Destructive: strong red ── */
  --destructive:        oklch(0.577 0.245 27.3);
  --destructive-foreground: oklch(0.980 0.005 0);

  /* ── Structural ── */
  --border:             oklch(0.912 0.006 248);
  --input:              oklch(0.912 0.006 248);
  --ring:               oklch(0.680 0.165 55);

  /* ── Radius ── */
  --radius: 0.625rem;

  /* ── Shadows (softer, more depth) ── */
  --shadow-2xs: 0 1px 2px 0 hsl(215 16% 47% / 0.06);
  --shadow-xs:  0 1px 3px 0 hsl(215 16% 47% / 0.08), 0 1px 2px -1px hsl(215 16% 47% / 0.05);
  --shadow-sm:  0 1px 4px 0 hsl(215 16% 47% / 0.1),  0 1px 3px -1px hsl(215 16% 47% / 0.06);
  --shadow:     0 2px 8px -2px hsl(215 16% 47% / 0.1),  0 1px 3px -1px hsl(215 16% 47% / 0.08);
  --shadow-md:  0 4px 12px -2px hsl(215 16% 47% / 0.1), 0 2px 6px -2px  hsl(215 16% 47% / 0.08);
  --shadow-lg:  0 8px 24px -4px hsl(215 16% 47% / 0.12), 0 4px 10px -3px hsl(215 16% 47% / 0.08);
  --shadow-xl:  0 16px 40px -6px hsl(215 16% 47% / 0.14), 0 8px 16px -5px hsl(215 16% 47% / 0.08);
  --shadow-2xl: 0 30px 60px -12px hsl(215 16% 47% / 0.22);

  /* ── Fonts ── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* ── Sidebar (dark, handled by DashboardLayout inline styles) ── */
  --sidebar:                     oklch(0.100 0.008 260);
  --sidebar-foreground:          oklch(0.920 0.006 248);
  --sidebar-primary:             oklch(0.680 0.165 55);
  --sidebar-primary-foreground:  oklch(0.980 0.005 80);
  --sidebar-accent:              oklch(0.180 0.010 260);
  --sidebar-accent-foreground:   oklch(0.920 0.006 248);
  --sidebar-border:              oklch(0.200 0.010 260);
  --sidebar-ring:                oklch(0.680 0.165 55);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE LAYER
   ══════════════════════════════════════════════════════════════════════════ */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  html, body, #app {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  /* ── Scrollbar: thinner, matches brand ── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: oklch(0.850 0.006 248);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.680 0.165 55);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT UTILITIES — used across all pages
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Page wrapper standard ── */
  .page-container {
    @apply p-6 lg:p-8 max-w-[1300px] space-y-6;
  }

  /* ── Section divider with label ── */
  .section-label {
    @apply text-[10px] font-bold uppercase tracking-[0.12em] text-muted-foreground;
  }

  /* ── Premium stat number ── */
  .stat-number {
    @apply text-3xl font-black tabular-nums leading-none tracking-tight text-foreground;
  }

  /* ── Status dot (live pulse) ── */
  .status-dot-live::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: pulse-ring 2s ease-in-out infinite;
    margin-right: 6px;
  }

  /* ── Card hover lift ── */
  .card-hover {
    @apply transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 hover:border-primary/20;
  }

  /* ── Glass card ── */
  .card-glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 4px 24px -4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--reka-accordion-content-height); opacity: 1; }
}
@keyframes accordion-up {
  from { height: var(--reka-accordion-content-height); opacity: 1; }
  to   { height: 0; opacity: 0; }
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.1); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Tailwind utility overrides ── */
.animate-fade-in-up  { animation: fade-in-up  0.4s ease-out both; }
.animate-fade-in     { animation: fade-in     0.3s ease-out both; }

/* ── Table improvements ── */
table { @apply w-full; }
thead tr { @apply border-b border-border bg-muted/40; }
thead th {
  @apply px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-muted-foreground;
}
tbody tr {
  @apply border-b border-border/50 transition-colors hover:bg-muted/30;
}
tbody td { @apply px-4 py-3 text-sm text-foreground; }

/* ── Input focus ring ── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px oklch(0.680 0.165 55 / 0.4);
}

/* ── Badge size fix ── */
.badge-xs { @apply text-[9px] px-1.5 py-0.5 leading-none font-bold uppercase tracking-wider rounded-full; }

/* ── Fade transition for toasts / alerts ── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s, transform 0.25s; }
.fade-enter-from { opacity: 0; transform: translateY(6px); }
.fade-leave-to   { opacity: 0; transform: translateY(-4px); }

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