/* White Whale console skin — matches ui-spec mock (console-light/dark)
 * Injected via nginx; playground + API keys nav untouched.
 */
:root {
  --ww-accent: #2a7ea8;
  --ww-cta: #152033;
  --ww-bg: #f6f7f9;
  --ww-surface: #ffffff;
  --ww-ink: #101820;
  --ww-muted: #6b7785;
  --ww-line: rgba(16, 24, 32, 0.10);
  --ww-sidebar: #fbfcfd;
  --ww-hover: rgba(16, 24, 32, 0.04);
  --sidebar-width: 15rem !important; /* 240px mock */
}

.dark,
html.dark,
[data-theme="dark"] {
  --ww-accent: #7ec4df;
  --ww-bg: #070b12;
  --ww-surface: #0e1624;
  --ww-ink: #f3f7fb;
  --ww-muted: #8e9eae;
  --ww-line: rgba(210, 230, 245, 0.12);
  --ww-sidebar: #0a101a;
  --ww-hover: rgba(255, 255, 255, 0.04);
}

/* ===== Sidebar: wider + airier ===== */
[data-slot="sidebar"],
[data-sidebar="sidebar"],
div[class*="group"][data-variant] {
  --sidebar-width: 15rem !important;
}

[data-slot="sidebar"] {
  background: var(--ww-sidebar) !important;
  border-right: 1px solid var(--ww-line) !important;
}

[data-slot="sidebar-inner"] {
  padding: 1rem 0.85rem !important;
}

[data-slot="sidebar-content"] {
  gap: 0.35rem !important;
}

[data-slot="sidebar-group"] {
  padding: 0.35rem 0.15rem !important;
}

[data-slot="sidebar-menu"] {
  gap: 0.35rem !important;
}

[data-slot="sidebar"] [data-slot="sidebar-menu-button"],
[data-sidebar="menu-button"] {
  min-height: 2.65rem !important;
  margin-block: 0.1rem !important;
  border-radius: 0.65rem !important; /* ~10px mock */
  padding-inline: 0.9rem !important;
  padding-block: 0.65rem !important;
  color: var(--ww-muted) !important;
  font-size: 0.84375rem !important; /* 13.5px */
}

[data-slot="sidebar"] [data-slot="sidebar-menu-button"]:hover,
[data-sidebar="menu-button"]:hover {
  background: var(--ww-hover) !important;
  color: var(--ww-ink) !important;
}

/* Accent active item */
[data-slot="sidebar"] [data-active="true"],
[data-slot="sidebar"] [data-slot="sidebar-menu-button"][data-active="true"],
[data-sidebar="menu-button"][data-active="true"] {
  background: rgba(42, 126, 168, 0.10) !important;
  color: var(--ww-accent) !important;
  font-weight: 600 !important;
}

.dark [data-slot="sidebar"] [data-active="true"],
html.dark [data-slot="sidebar"] [data-active="true"],
.dark [data-sidebar="menu-button"][data-active="true"],
html.dark [data-sidebar="menu-button"][data-active="true"] {
  background: rgba(126, 196, 223, 0.12) !important;
  color: var(--ww-accent) !important;
}

/* ===== Main canvas ===== */
[data-slot="sidebar-inset"],
main {
  background: var(--ww-bg) !important;
}

/* Overview / page top whitespace */
[data-slot="sidebar-inset"] > div > div.shrink-0,
main > div.shrink-0 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.1rem !important;
  padding-inline: 1.75rem !important;
}

[data-slot="sidebar-inset"] > div > div.min-h-0,
main > div.min-h-0.flex-1 {
  padding-inline: 1.75rem !important;
  padding-top: 0.85rem !important;
  padding-bottom: 1.75rem !important;
}

[data-slot="sidebar-inset"] h1,
[data-slot="sidebar-inset"] h2,
main h1,
main h2.truncate {
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--ww-ink);
}

[data-slot="sidebar-inset"] .text-muted-foreground,
main .text-muted-foreground {
  color: var(--ww-muted) !important;
}

/* ===== Cards: 14px radius, fine borders ===== */
.bg-card,
[class*="rounded-2xl"].border,
[class*="rounded-xl"].border,
[class*="rounded-lg"].border.bg-card,
[data-slot="sidebar-inset"] [class*="rounded-"].border {
  border-radius: 14px !important;
  border: 1px solid var(--ww-line) !important;
  box-shadow: none !important;
}

.bg-card {
  background: var(--ww-surface) !important;
}

.dark .bg-card,
html.dark .bg-card {
  background: var(--ww-surface) !important;
  border-color: var(--ww-line) !important;
}

/* Grid gap airiness (summary + lower panels) */
[data-slot="sidebar-inset"] .grid,
main .grid {
  gap: 0.875rem !important; /* 14px mock */
}

/* Soften chart bars toward accent */
[data-slot="sidebar-inset"] .recharts-rectangle,
main .recharts-bar-rectangle {
  /* leave charts alone structurally */
}