/*
 * The Enterprise build's skin: deep navy panels with a soft top light, a blue
 * glow on the chosen screen, and colour only where it carries meaning (the
 * figure icons and the state words). Light theme: white panels on cool grey.
 * Tailwind's slate and indigo are already this build's palette
 * (tailwind.config.cjs); this sheet adds what a utility class cannot.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('vendor/fonts/plus-jakarta-sans/PlusJakartaSans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('vendor/fonts/jetbrains-mono/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ui-accent: #2f6bff;
  --ui-accent-2: #2559e0;
  --ui-glow: rgba(47, 107, 255, 0.55);
  --ui-page: #070c1c;
  --ui-side: #0a1128;
  --ui-card-top: #101b3a;
  --ui-card-bottom: #0c1531;
  --ui-line: rgba(99, 140, 255, 0.15);
  --ui-hover: rgba(99, 140, 255, 0.09);
  --ui-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 30px -22px rgba(0, 0, 0, 0.9);
}
html.light {
  --ui-page: #f3f6fb;
  --ui-side: #ffffff;
  --ui-card-top: #ffffff;
  --ui-card-bottom: #ffffff;
  --ui-line: #e1e7f0;
  --ui-hover: rgba(47, 107, 255, 0.07);
  --ui-shadow: 0 1px 2px rgba(15, 26, 46, 0.04), 0 8px 20px -14px rgba(15, 26, 46, 0.2);
}

body { font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
#app > main, body.bg-slate-950 { background: var(--ui-page); }
html:not(.light) #app > main {
  background: radial-gradient(1100px 520px at 85% -12%, rgba(47, 107, 255, 0.16), transparent 62%), var(--ui-page);
}

/* The sidebar and header. */
.ui-sidebar { background: var(--ui-side) !important; border-color: var(--ui-line) !important; }
.ui-header { background: rgba(10, 17, 40, 0.72) !important; border-color: var(--ui-line) !important; backdrop-filter: blur(10px); }
html.light .ui-header { background: rgba(255, 255, 255, 0.9) !important; }
.ui-nav-group { letter-spacing: 0.1em; }
.ui-nav-link { position: relative; }
.ui-nav-link:not(.ui-nav-active):hover { background: var(--ui-hover); }
.ui-nav-active {
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)) !important;
  box-shadow: 0 10px 22px -12px var(--ui-glow);
}
.ui-find { background: rgba(99, 140, 255, 0.06) !important; border-color: var(--ui-line) !important; }
html.light .ui-find { background: #f5f7fb !important; }
.ui-find:focus-within { border-color: var(--ui-accent) !important; }

/* Panels: one surface everywhere, so every screen reads as one product. */
.ui-card {
  background: linear-gradient(180deg, var(--ui-card-top), var(--ui-card-bottom)) !important;
  border-color: var(--ui-line) !important;
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
}
.ui-kpi { padding: 16px; }
.ui-kpi.metric-tile:hover { border-color: rgba(79, 134, 255, 0.55); }
.ui-kpi-value { letter-spacing: -0.02em; font-weight: 800; }

/* Figure icons: a colour each, lit from the top left. */
.ui-kpi-icon { box-shadow: 0 8px 16px -8px var(--ui-tone-glow, rgba(0, 0, 0, 0.5)); }
.ui-tone-blue   { background: linear-gradient(135deg, #2f6bff, #4f86ff); --ui-tone-glow: rgba(47, 107, 255, 0.8); }
.ui-tone-green  { background: linear-gradient(135deg, #16a34a, #22c55e); --ui-tone-glow: rgba(34, 197, 94, 0.7); }
.ui-tone-cyan   { background: linear-gradient(135deg, #0891b2, #06b6d4); --ui-tone-glow: rgba(6, 182, 212, 0.7); }
.ui-tone-violet { background: linear-gradient(135deg, #7c3aed, #8b5cf6); --ui-tone-glow: rgba(139, 92, 246, 0.7); }
.ui-tone-amber  { background: linear-gradient(135deg, #d97706, #f59e0b); --ui-tone-glow: rgba(245, 158, 11, 0.7); }
.ui-tone-rose   { background: linear-gradient(135deg, #dc2626, #ef4444); --ui-tone-glow: rgba(239, 68, 68, 0.7); }
.ui-tone-teal   { background: linear-gradient(135deg, #0d9488, #14b8a6); --ui-tone-glow: rgba(20, 184, 166, 0.7); }
.ui-tone-slate  { background: linear-gradient(135deg, #475569, #64748b); --ui-tone-glow: rgba(100, 116, 139, 0.6); }
html.light .ui-kpi-icon { box-shadow: 0 6px 12px -8px var(--ui-tone-glow, rgba(0, 0, 0, 0.4)); }

.ui-quick:hover { background: var(--ui-hover); }

/* Primary buttons in the build's blue, with a little depth. */
.bg-indigo-600 { background-image: linear-gradient(180deg, #3b76ff, #2f6bff); }
.hover\:bg-indigo-500:hover { background-image: linear-gradient(180deg, #5a8dff, #4f86ff); }

/* Tables: column headings small and spaced, rows divided by the panel line. */
.ui-view table thead th { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.ui-view table tbody tr:hover { background: var(--ui-hover); }

::-webkit-scrollbar-track { background: var(--ui-page); }
::-webkit-scrollbar-thumb { background: #2a3a68; }
html.light ::-webkit-scrollbar-thumb { background: #c4cddb; }