@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --font-sans: var(--font-outfit);
  --font-heading: var(--font-outfit);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-popover: var(--card);
  --color-popover-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--muted);
  --color-secondary-foreground: var(--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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--primary);
  --color-sidebar: var(--card);
  --color-sidebar-active: var(--accent);
  --color-sidebar-active-foreground: var(--accent-foreground);
  --color-auth-action: var(--auth-action);
  --color-auth-muted: var(--auth-muted);
  --color-auth-cover: var(--auth-cover);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-carbon: var(--carbon);
  --color-carbon-surface: var(--carbon-surface);
  --color-plan-gold: var(--plan-gold);
  --color-plan-gold-foreground: var(--plan-gold-foreground);
  --color-plan-popular: var(--plan-popular);
  --color-plan-popular-foreground: var(--plan-popular-foreground);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
}
:root {
  --background: #fff;
  --foreground: #1c1c1e;
  --card: #fff;
  --primary: #556458;
  --primary-foreground: #fff;
  --muted: #f2f2f7;
  --muted-foreground: #8e8e93;
  --accent: #eff9f1;
  --accent-foreground: #a6c3aa;
  --border: #e5e5ea;
  --input: #d1d1d6;
  --destructive: #d92d20;
  --success: #12b76a;
  --warning: #f79009;
  --info: #0a84ff;
  --auth-action: #0a84ff;
  --auth-muted: #6e6e73;
  --auth-shadow: rgb(10 132 255 / 20%);
  --auth-cover: #2a2e2b;
  --chart-1: #027a48;
  --chart-2: #12b76a;
  --chart-3: #a6f4c5;
  --chart-4: #4e5ba6;
  --carbon: #075985;
  --carbon-surface: #f0f9ff;
  --plan-gold: #c9a227;
  --plan-gold-foreground: #1c1c1e;
  --plan-popular: #00b894;
  --plan-popular-foreground: #fff;
}
.dark {
  --background: #0c0c0d;
  --foreground: #f2f2f7;
  --card: #1c1c1e;
  --primary: #556458;
  --primary-foreground: #fff;
  --muted: #2a2a2c;
  --muted-foreground: #8e8e93;
  --accent: #a6c3aa1f;
  --accent-foreground: #a6c3aa;
  --border: #ffffff0d;
  --input: #48484a;
  --auth-muted: #d1d1d6;
  --carbon: #7dd3fc;
  --carbon-surface: #0759851a;
  --plan-gold: #c9a227;
  --plan-gold-foreground: #1c1c1e;
  --plan-popular: #00b894;
  --plan-popular-foreground: #fff;
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans text-sm antialiased;
  }
  button,
  a,
  input,
  select {
    -webkit-tap-highlight-color: transparent;
  }
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
  }
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }
}
@layer components {
  .panel {
    @apply rounded-xl border border-border bg-card;
  }
  .detail-panel {
    @apply rounded-2xl border border-input/70 bg-card shadow-sm;
  }
  .field-label {
    @apply mb-2 block text-sm font-medium;
  }
  .data-table {
    @apply w-full border-collapse text-sm;
  }
  .data-table th {
    @apply border border-border px-4 py-3 text-center text-xs font-medium text-muted-foreground;
  }
  .data-table {
    position: relative;
  }
  .data-table td {
    @apply border border-border px-4 py-4 align-middle;
  }
  .data-table tbody tr:hover {
    @apply bg-muted/30;
  }
  .data-table a {
    @apply hover:text-primary;
  }
  .metric-label {
    @apply text-xs font-medium uppercase text-muted-foreground;
  }
  .auth-panel {
    box-shadow: 0 18px 40px rgb(28 28 30 / 8%);
  }
  .chart-container .apexcharts-tooltip {
    @apply border-border! bg-popover! text-foreground!;
  }
  .chart-container .apexcharts-tooltip-title {
    @apply border-border! bg-muted!;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@layer components {
  .form-input {
    @apply h-11 w-full rounded-lg border border-input bg-card px-3 text-sm text-foreground shadow-xs placeholder:text-muted-foreground focus:border-primary focus:outline-2 focus:outline-primary/20 disabled:opacity-50;
  }
  .nav-link {
    @apply flex min-h-11 w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-foreground/75 transition-colors hover:bg-muted;
  }
  .nav-active {
    @apply bg-accent text-primary;
  }
  .page-grid {
    @apply grid gap-4 md:gap-6;
  }
  .text-link {
    @apply text-info hover:underline;
  }
}
.data-table {
  position: relative;
}
.data-table td {
  min-width: 90px;
}
.data-table th {
  background: var(--muted);
}
.data-table th:first-child,
.data-table td:first-child {
  border-left: 0;
}
.data-table th:last-child,
.data-table td:last-child {
  border-right: 0;
}
.data-table tr:last-child td {
  border-bottom: 0;
}

.usage-progress {
  appearance: none;
  border: 0;
  background: var(--muted);
}
.usage-progress::-webkit-progress-bar {
  background: var(--muted);
  border-radius: 999px;
}
.usage-progress::-webkit-progress-value {
  background: var(--info);
  border-radius: 999px;
}
.usage-progress::-moz-progress-bar {
  background: var(--info);
  border-radius: 999px;
}