/*
 * The Meridian build's skin: a calm, corporate console. Light by default:
 * white panels on soft grey, flat and precise, with an ink sidebar that stays
 * dark in both themes, and one petrol accent. Dark theme: graphite, not navy.
 * 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: 'IBM Plex Sans';
  src: url('vendor/fonts/ibm-plex-sans/IBMPlexSans-latin.woff2') format('woff2');
  font-weight: 100 700;
  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: #0e7490;
  --ui-page: #0e1114;
  --ui-card: #171b20;
  --ui-line: #262c33;
  --ui-hover: rgba(255, 255, 255, 0.04);
  --ui-shadow: none;
  /* The sidebar is ink in both themes. */
  --ui-ink: #12171d;
  --ui-ink-2: #1b2129;
  --ui-ink-line: #262d36;
  --ui-ink-text: #c3cad3;
  --ui-ink-muted: #8a939f;
}
html.light {
  --ui-page: #f4f5f7;
  --ui-card: #ffffff;
  --ui-line: #e1e4e8;
  --ui-hover: rgba(14, 116, 144, 0.05);
  --ui-shadow: 0 1px 2px rgba(17, 20, 24, 0.05);
}

body { -webkit-font-smoothing: antialiased; }
#app > main, body.bg-slate-950 { background: var(--ui-page); }

/* The ink sidebar: these outrank the light theme's own colours. */
html .ui-sidebar { background: var(--ui-ink) !important; border-color: var(--ui-ink-line) !important; }
html .ui-sidebar .border-slate-800 { border-color: var(--ui-ink-line) !important; }
html .ui-sidebar .bg-slate-950\/60 { background-color: #0e1216 !important; }
html .ui-sidebar .bg-slate-900\/90 { background-color: var(--ui-ink-2) !important; }
html .ui-sidebar h1,
html .ui-sidebar .text-slate-100,
html .ui-sidebar .text-slate-200 { color: #f1f3f5; }
html .ui-sidebar .text-slate-400 { color: var(--ui-ink-text); }
html .ui-sidebar .text-slate-500 { color: var(--ui-ink-muted); }
html .ui-sidebar .text-indigo-400 { color: #67c6dd; }
html .ui-sidebar .hover\:text-slate-200:hover { color: #ffffff; }
html .ui-sidebar .ui-find { background: var(--ui-ink-2) !important; border-color: var(--ui-ink-line) !important; }
html .ui-sidebar .ui-find input { color: #f1f3f5; }
html.light .ui-sidebar .brand-logo { background: transparent !important; padding: 0; }
.ui-find:focus-within { border-color: #22a6c7 !important; }
.ui-nav-group { letter-spacing: 0.12em; }
.ui-nav-link { position: relative; border-radius: 6px; }
.ui-nav-link:not(.ui-nav-active):hover { background: rgba(255, 255, 255, 0.05); }
.ui-nav-active { background: rgba(34, 166, 199, 0.16) !important; }
.ui-nav-active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: #22a6c7;
}

.ui-header { background: var(--ui-card) !important; border-color: var(--ui-line) !important; }

/* Panels: flat, hairline, square-ish. */
.ui-card { background: var(--ui-card) !important; border-color: var(--ui-line) !important; border-radius: 10px; box-shadow: var(--ui-shadow); }
.ui-kpi { padding: 16px; }
.ui-kpi.metric-tile:hover { border-color: #22a6c7; }
.ui-kpi-value { letter-spacing: -0.01em; font-weight: 600; }

/* Figure icons: solid and quiet; the figure is the point. */
.ui-kpi-icon { border-radius: 8px; }
.ui-tone-blue   { background: #0e7490; }
.ui-tone-green  { background: #15803d; }
.ui-tone-cyan   { background: #0369a1; }
.ui-tone-violet { background: #5b4bb7; }
.ui-tone-amber  { background: #b45309; }
.ui-tone-rose   { background: #b91c1c; }
.ui-tone-teal   { background: #0f766e; }
.ui-tone-slate  { background: #4b525c; }

.ui-quick { border-radius: 8px; }
.ui-quick:hover { background: var(--ui-hover); }

/* Tables: a ruled ledger, column headings small and spaced. */
.ui-view table thead th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ui-view table tbody tr:hover { background: var(--ui-hover); }

::-webkit-scrollbar-track { background: var(--ui-page); }
::-webkit-scrollbar-thumb { background: #353c45; }
html.light ::-webkit-scrollbar-thumb { background: #c6cbd2; }