@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

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

@layer base {
  :root {
    --font-sans: "Public Sans", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --background: 210 33% 98%;
    --foreground: 220 34% 16%;
    --card: 0 0% 100%;
    --card-foreground: 220 34% 16%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 34% 16%;
    --primary: 214 84% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 32% 95%;
    --secondary-foreground: 220 25% 24%;
    --muted: 210 26% 94%;
    --muted-foreground: 215 15% 44%;
    --accent: 207 90% 94%;
    --accent-foreground: 215 64% 26%;
    --destructive: 0 76% 48%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 22% 86%;
    --input: 214 22% 82%;
    --ring: 214 84% 45%;

    --chart-1: 214 84% 45%;
    --chart-2: 193 79% 40%;
    --chart-3: 27 92% 46%;
    --chart-4: 143 72% 38%;
    --chart-5: 0 76% 48%;

    --sidebar-background: 210 33% 97%;
    --sidebar-foreground: 220 23% 23%;
    --sidebar-primary: 214 84% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 28% 92%;
    --sidebar-accent-foreground: 220 34% 16%;
    --sidebar-border: 214 24% 84%;
    --sidebar-ring: 214 84% 45%;

    --success: 145 70% 34%;
    --warning: 32 96% 44%;
    --radius: 0.8rem;
  }

  .dark {
    --background: 222 34% 10%;
    --foreground: 210 22% 95%;
    --card: 222 33% 13%;
    --card-foreground: 210 22% 95%;
    --popover: 222 33% 13%;
    --popover-foreground: 210 22% 95%;
    --primary: 212 100% 64%;
    --primary-foreground: 222 34% 10%;
    --secondary: 222 24% 17%;
    --secondary-foreground: 210 22% 90%;
    --muted: 223 22% 16%;
    --muted-foreground: 216 14% 71%;
    --accent: 212 62% 25%;
    --accent-foreground: 210 22% 95%;
    --destructive: 0 79% 59%;
    --destructive-foreground: 0 0% 98%;
    --border: 222 18% 22%;
    --input: 222 18% 24%;
    --ring: 212 100% 64%;

    --chart-1: 212 100% 64%;
    --chart-2: 190 90% 54%;
    --chart-3: 34 90% 57%;
    --chart-4: 143 74% 47%;
    --chart-5: 0 79% 59%;

    --sidebar-background: 222 34% 11%;
    --sidebar-foreground: 213 20% 82%;
    --sidebar-primary: 212 100% 64%;
    --sidebar-primary-foreground: 222 34% 10%;
    --sidebar-accent: 222 22% 16%;
    --sidebar-accent-foreground: 210 22% 95%;
    --sidebar-border: 222 18% 22%;
    --sidebar-ring: 212 100% 64%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/40;
  }

  html,
  body,
  #root {
    min-height: 100%;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    background-image:
      radial-gradient(circle at 10% -10%, hsl(214 84% 45% / 0.08), transparent 45%),
      radial-gradient(circle at 100% 0%, hsl(193 79% 40% / 0.08), transparent 35%);
  }
}

@layer components {
  .app-shell-bg {
    background-image:
      linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background))),
      radial-gradient(circle at 80% 0%, hsl(var(--primary) / 0.07), transparent 35%);
  }

  .surface-card {
    @apply rounded-xl border border-border/90 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.06)] transition-shadow;
  }

  .surface-card-quiet {
    @apply rounded-xl border border-border/80 bg-card/75;
  }

  .chart-panel {
    @apply rounded-xl border border-border/80 bg-gradient-to-b from-card to-card/90 p-4;
  }

  .panel-head {
    @apply mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between;
  }

  .panel-title {
    @apply text-sm font-semibold tracking-tight text-foreground;
  }

  .panel-subtitle {
    @apply text-[11px] text-muted-foreground;
  }

  .data-grid-wrap {
    @apply overflow-x-auto rounded-xl border border-border/85 bg-card;
  }

  .data-grid-table {
    @apply w-full border-collapse;
  }

  .data-grid-table thead th {
    @apply whitespace-nowrap border-b border-border bg-muted/40 px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground;
  }

  .data-grid-table tbody td {
    @apply px-4 py-3 text-sm text-foreground;
  }

  .data-grid-table tbody tr {
    @apply border-b border-border/70 transition-colors;
  }

  .data-grid-table tbody tr:hover {
    @apply bg-muted/35;
  }

  .kpi-chip {
    @apply inline-flex items-center rounded-full border border-border/80 bg-muted/55 px-2.5 py-1 text-[11px] font-medium text-muted-foreground;
  }

  .page-enter {
    animation: page-enter 420ms ease-out both;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(215 16% 70%);
  border: 2px solid hsl(var(--muted));
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(215 16% 58%);
}