@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-heading: var(--font-sans);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

/* ─── Light theme ─────────────────────────────────────────────────────────── */

:root {
  /* Base — subtle blue-gray tint so cards (white) float above the page */
  --background:            oklch(0.973 0.004 247.858);
  --foreground:            oklch(0.141 0.006 264.0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.141 0.006 264.0);
  --popover:               oklch(1 0 0);
  --popover-foreground:    oklch(0.141 0.006 264.0);

  /* Primary — dark charcoal for buttons / key UI */
  --primary:               oklch(0.205 0 0);
  --primary-foreground:    oklch(0.985 0 0);

  /* Secondary / muted — very light blue-gray */
  --secondary:             oklch(0.958 0.005 247.858);
  --secondary-foreground:  oklch(0.205 0 0);
  --muted:                 oklch(0.958 0.005 247.858);
  --muted-foreground:      oklch(0.520 0.010 264.0);

  /* Accent — soft blue highlight */
  --accent:                oklch(0.942 0.016 264.376);
  --accent-foreground:     oklch(0.205 0 0);

  --destructive:           oklch(0.577 0.245 27.325);

  /* Borders + inputs */
  --border:                oklch(0.904 0.006 264.0);
  --input:                 oklch(0.904 0.006 264.0);

  /* Focus ring — blue, matching the brand accent */
  --ring:                  oklch(0.488 0.243 264.376);

  /* ── Colorful chart palette (light) ── */
  --chart-1:               oklch(0.546 0.215 264.376);   /* blue      */
  --chart-2:               oklch(0.527 0.154 150.069);   /* emerald   */
  --chart-3:               oklch(0.625 0.162 41.500);    /* orange    */
  --chart-4:               oklch(0.591 0.224 296.400);   /* violet    */
  --chart-5:               oklch(0.577 0.245  27.325);   /* red       */

  /* ── Semantic line colors for charts (light) ── */
  --chart-line-1:          oklch(0.527 0.154 150.069);   /* green  — MSK / RX */
  --chart-line-2:          oklch(0.546 0.215 264.376);   /* blue   — SPB / TX */
  --chart-line-3:          oklch(0.625 0.162  41.500);   /* orange — FRA      */
  --chart-line-4:          oklch(0.591 0.224 296.400);   /* violet — AMS      */
  --chart-rx:              oklch(0.527 0.154 150.069);
  --chart-tx:              oklch(0.546 0.215 264.376);

  --radius: 0.625rem;

  /* ── Sidebar — intentionally dark even in light mode ── */
  --sidebar:                   oklch(0.152 0.010 264.376);
  --sidebar-foreground:        oklch(0.920 0 0);
  --sidebar-primary:           oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent:            oklch(0.240 0.012 264.376);
  --sidebar-accent-foreground: oklch(0.950 0 0);
  --sidebar-border:            oklch(1 0 0 / 8%);
  --sidebar-ring:              oklch(0.488 0.243 264.376);

  /* ── Status ── */
  --status-online:      oklch(0.527 0.154 150.069);
  --status-offline:     oklch(0.577 0.245  27.325);
  --status-degraded:    oklch(0.666 0.179  58.318);
  /* badge variants — foreground text + translucent fill */
  --status-online-fg:   oklch(0.437 0.149 150.069);   /* emerald-700 */
  --status-online-bg:   oklch(0.527 0.154 150.069 / 0.10);
  --status-offline-fg:  oklch(0.505 0.213  27.325);   /* red-700 */
  --status-offline-bg:  oklch(0.577 0.245  27.325 / 0.10);
  --status-degraded-fg: oklch(0.555 0.163  58.318);   /* amber-700 */
  --status-degraded-bg: oklch(0.666 0.179  58.318 / 0.10);
}

/* ─── Dark theme ──────────────────────────────────────────────────────────── */

.dark {
  /* Base — blue-tinted dark for modern network terminal aesthetic */
  --background:            oklch(0.133 0.011 264.376);
  --foreground:            oklch(0.985 0 0);
  --card:                  oklch(0.191 0.011 264.376);
  --card-foreground:       oklch(0.985 0 0);
  --popover:               oklch(0.191 0.011 264.376);
  --popover-foreground:    oklch(0.985 0 0);

  /* Primary — bright white for dark backgrounds */
  --primary:               oklch(0.922 0 0);
  --primary-foreground:    oklch(0.205 0 0);

  /* Secondary / muted — dark blue-gray */
  --secondary:             oklch(0.252 0.010 264.376);
  --secondary-foreground:  oklch(0.985 0 0);
  --muted:                 oklch(0.252 0.010 264.376);
  --muted-foreground:      oklch(0.648 0.008 264.376);

  /* Accent — slightly lighter blue-tinted dark */
  --accent:                oklch(0.285 0.022 264.376);
  --accent-foreground:     oklch(0.985 0 0);

  --destructive:           oklch(0.704 0.191 22.216);

  --border:                oklch(1 0 0 / 10%);
  --input:                 oklch(1 0 0 / 15%);
  --ring:                  oklch(0.488 0.243 264.376);

  /* ── Colorful chart palette (dark — brighter for visibility) ── */
  --chart-1:               oklch(0.637 0.222 264.376);   /* bright blue    */
  --chart-2:               oklch(0.696 0.170 151.328);   /* bright emerald */
  --chart-3:               oklch(0.713 0.176  47.600);   /* bright orange  */
  --chart-4:               oklch(0.714 0.173 303.900);   /* bright violet  */
  --chart-5:               oklch(0.704 0.191  22.216);   /* bright red     */

  /* ── Semantic line colors (dark) ── */
  --chart-line-1:          oklch(0.696 0.170 151.328);   /* green  */
  --chart-line-2:          oklch(0.637 0.222 264.376);   /* blue   */
  --chart-line-3:          oklch(0.713 0.176  47.600);   /* orange */
  --chart-line-4:          oklch(0.714 0.173 303.900);   /* violet */
  --chart-rx:              oklch(0.696 0.170 151.328);
  --chart-tx:              oklch(0.637 0.222 264.376);

  /* ── Sidebar — slightly lighter than bg in dark mode ── */
  --sidebar:                   oklch(0.191 0.011 264.376);
  --sidebar-foreground:        oklch(0.985 0 0);
  --sidebar-primary:           oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent:            oklch(0.262 0.014 264.376);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border:            oklch(1 0 0 / 10%);
  --sidebar-ring:              oklch(0.488 0.243 264.376);

  /* Status — same dot colors, dark-mode-adjusted badge text */
  --status-online:      oklch(0.527 0.154 150.069);
  --status-offline:     oklch(0.577 0.245  27.325);
  --status-degraded:    oklch(0.666 0.179  58.318);
  /* badge variants — lighter fg for dark bg */
  --status-online-fg:   oklch(0.696 0.170 151.328);   /* emerald-400 */
  --status-online-bg:   oklch(0.527 0.154 150.069 / 0.12);
  --status-offline-fg:  oklch(0.704 0.191  22.216);   /* red-400 */
  --status-offline-bg:  oklch(0.577 0.245  27.325 / 0.12);
  --status-degraded-fg: oklch(0.769 0.149  70.080);   /* amber-400 */
  --status-degraded-bg: oklch(0.666 0.179  58.318 / 0.12);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
    color-scheme: light;
  }
  /* next-themes кладёт класс dark на <html> — без этого нативные контролы (select) дают светлый popup и белый текст */
  html.dark {
    color-scheme: dark;
  }

  /*
    Нативный <select>: в Chrome/Edge выпадающая часть может игнорировать тёмный фон страницы.
    Явные цвета + color-scheme выше дают читаемые пункты в светлой и тёмной теме.
  */
  select {
    background-color: var(--background);
    color: var(--foreground);
  }
  select option {
    background-color: var(--popover);
    color: var(--popover-foreground);
  }
}