/* BrandScout - Refined design tokens
 * Palantir/Gotham-flavored investigative calm, on Dataprovider 2025 palette.
 * Light theme, but with serious depth and measured chroma.
 */

:root {
  /* Dataprovider 2026 brand core - matches dataprovider.com palette */
  --dp-navy: #0F1030;         /* Near-black navy - headings, dark buttons */
  --dp-navy-2: #1A1C4A;       /* Navy-2 - hover state */
  --dp-blue: #2B3AE4;         /* Primary royal blue - CTAs, links, accents */
  --dp-blue-2: #1F2BC0;       /* Hover / pressed blue */
  --dp-blue-soft: #E8EAFB;    /* Soft blue wash */
  --dp-bg: #F1F0FB;           /* Page background - pale lavender-blue */
  --dp-bg-2: #E8E7F6;         /* Slightly deeper bg wash */
  --dp-cta: #F5C518;          /* Yellow - primary call-to-action */
  --dp-cta-hover: #E0B312;
  --dp-gradient: linear-gradient(135deg, #2B3AE4 0%, #4A58F0 100%);

  /* Neutral scale - cool gray, very slight blue tint */
  --n-0: #FFFFFF;
  --n-25: #FAFAFC;
  --n-50: #F5F5F9;
  --n-75: #EEEEF4;
  --n-100: #E2E2EC;
  --n-150: #CFCFDE;
  --n-200: #B6B6CA;
  --n-300: #8F8FA9;
  --n-400: #656580;
  --n-500: #494963;
  --n-600: #33334C;
  --n-700: #22223A;
  --n-800: #16162C;
  --n-900: #0F1030;

  /* Status - investigative */
  --s-ok:  #2BB26B;
  --s-ok-bg: #E3F5EA;
  --s-info: #2B3AE4;
  --s-info-bg: #E8EAFB;
  --s-warn: #D28A00;
  --s-warn-bg: #FFF4D6;
  --s-crit: #E5484D;
  --s-crit-bg: #FBE5E6;
  --s-ghost: #8F8FA9;

  /* Agent track colors - restrained, only blue / teal / muted warm */
  --t-portfolio: #2B3AE4;
  --t-brand:     #2B3AE4;
  --t-peer:      #12A3A3;
  --t-ssl:       #2BB26B;
  --t-dns:       #5A6AEA;
  --t-security:  #E5484D;
  --t-web:       #C28B0B;
  --t-threat:    #B45A23;
  --t-cyber:     #E5484D;

  /* Semantic surfaces */
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --surface-3: var(--n-50);
  --surface-ink: var(--n-800);
  --surface-subtle-ink: var(--n-500);
  --border: var(--n-100);
  --border-strong: var(--n-150);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Shadows - subtle, cool, layered */
  --shadow-xs: 0 1px 0 rgba(26, 13, 59, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 13, 59, 0.05), 0 1px 0 rgba(26, 13, 59, 0.03);
  --shadow-md: 0 4px 12px rgba(26, 13, 59, 0.06), 0 1px 2px rgba(26, 13, 59, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 13, 59, 0.08), 0 2px 6px rgba(26, 13, 59, 0.04);
  --shadow-glow: 0 0 0 3px rgba(43, 58, 228, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--dp-bg);
  color: var(--surface-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* App shell */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
  background: var(--n-900);
  color: var(--n-100);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid #000;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand .mark {
  width: 30px; height: 30px;
  background: var(--dp-cta);
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--dp-navy);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
}
.sidebar-brand .wordmark {
  display: flex; flex-direction: column;
}
.sidebar-brand .wordmark .name {
  font-weight: 700; font-size: 14px; color: var(--n-0);
  letter-spacing: -0.01em;
}
.sidebar-brand .wordmark .by {
  font-size: 10px; color: var(--n-400);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 2px;
}

.sidebar-section {
  padding: 16px 12px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--n-400);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--n-200);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--n-0);
}
.nav-item.active {
  background: var(--dp-blue-soft);
  color: var(--dp-navy);
  box-shadow: inset 2px 0 0 var(--dp-blue);
  font-weight: 600;
}
.nav-item .icon { width: 16px; height: 16px; flex: none; opacity: 0.8; }
.nav-item .count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--n-400);
  background: var(--n-75);
  padding: 1px 6px;
  border-radius: 10px;
}
.nav-item.active .count { color: var(--dp-blue); background: var(--n-0); }

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--n-400);
}
.sidebar-footer .you {
  display: flex; align-items: center; gap: 10px;
  padding: 6px;
  border-radius: 6px;
  color: var(--n-100);
}
.sidebar-footer .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--dp-blue);
  color: white; font-weight: 600; font-size: 11px;
  display: grid; place-items: center;
}
.sidebar-footer .env {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--n-400);
}
.sidebar-footer .env .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s-ok); box-shadow: 0 0 0 2px rgba(31, 168, 103, 0.2); }

/* ===== Main view ===== */
.view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--dp-bg);
}

/* Topbar - consistent across views */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: none;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  margin-right: 6px;
  border-right: 1px solid var(--border);
  height: 52px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.12s;
}
.topbar-brand:hover { opacity: 0.85; }
.topbar-brand .brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  position: relative;
  flex: none;
}
.topbar-brand .brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.topbar-brand .brand-lock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  gap: 2px;
}
.topbar-brand .brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.018em;
  color: var(--dp-navy);
}
.topbar-brand .brand-by {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-400);
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 52px;
}
.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 52px;
  font-size: 13px;
  font-weight: 500;
  color: var(--n-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s;
}
.topbar-nav a:hover { color: var(--n-900); }
.topbar-nav a.active {
  color: var(--n-900);
  border-bottom-color: var(--dp-blue);
  font-weight: 600;
}
.topbar-nav .icon { width: 14px; height: 14px; }
/* "Admin" scope pill on the Configuration nav link. Makes it unambiguous
   that this area is restricted to registry editors. */
.nav-admin-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--s-crit, #B91C1C);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar .crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--n-500);
}
.topbar .crumb .sep { color: var(--n-200); }
.topbar .crumb .current { color: var(--n-800); font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--n-500);
  border: 1px solid var(--border-strong);
  background: var(--n-25);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--n-700);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { background: var(--n-25); border-color: var(--n-200); color: var(--n-900); }
.btn:active { transform: translateY(0.5px); }
.btn.primary {
  background: var(--dp-navy);
  border-color: var(--dp-navy);
  color: white;
}
.btn.primary:hover { background: var(--n-900); border-color: var(--n-900); color: white; }
.btn.cta {
  background: var(--dp-cta);
  border-color: var(--dp-cta);
  color: var(--dp-navy);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(245, 197, 24, 0.35);
}
.btn.cta:hover {
  background: var(--dp-cta-hover);
  border-color: var(--dp-cta-hover);
  color: var(--dp-navy);
}
.btn.cta-yellow {
  background: var(--dp-cta);
  border-color: var(--dp-cta);
  color: var(--dp-navy);
  font-weight: 600;
}
.btn.cta-yellow:hover { background: var(--dp-cta-hover); border-color: var(--dp-cta-hover); color: var(--dp-navy); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--n-500);
}
.btn.ghost:hover { background: var(--n-50); color: var(--n-900); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn.lg { padding: 10px 16px; font-size: 14px; }
.btn .icon { width: 14px; height: 14px; }

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pill.ok    { background: var(--s-ok-bg);   color: var(--s-ok); }
.pill.info  { background: var(--s-info-bg); color: var(--s-info); }
.pill.warn  { background: var(--s-warn-bg); color: var(--s-warn); }
.pill.crit  { background: var(--s-crit-bg); color: var(--s-crit); }
.pill.ghost { background: var(--n-75);      color: var(--n-500); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Card primitive */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }

/* Section label */
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dp-blue);
}

/* Input */
.input {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus {
  border-color: var(--dp-blue);
  box-shadow: var(--shadow-glow);
}

/* Scrollbar (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--n-150); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-200); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Mono */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Utility animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.3s var(--ease-out) both; }
.slide-up { animation: slideUp 0.3s var(--ease-out) both; }
.spin { animation: spin 1s linear infinite; }