/* ─────────────────────────────────────────────────────────────────────────
   DIAL3D CRM brand overlay
   Applied as a runtime overlay on top of Twenty.
   The goal: identifiable DIAL3D presence without a full rebuild.
   Real component-level changes ship in the custom Twenty image.
   ───────────────────────────────────────────────────────────────────────── */

/* Load brand fonts (Twenty already loads Inter + DM Mono; we add ours) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --d3-ink:        #2A2E2D;
  --d3-ink-2:      #353837;
  --d3-ink-3:      #424746;
  --d3-warm:       #FAF8F5;
  --d3-warm-2:     #ECE7DF;
  --d3-muted:      rgba(250,248,245,0.58);
  --d3-muted-2:    rgba(250,248,245,0.38);
  --d3-border:     rgba(250,248,245,0.10);
  --d3-surface:    rgba(250,248,245,0.04);
  --d3-surface-2:  rgba(250,248,245,0.06);
  --d3-grad-red:   #ED1E29;
  --d3-grad-mid:   #4935BC;
  --d3-grad-blue:  #1E7BD6;
  --d3-ok:         #5BD09B;
  --d3-warn:       #F5B643;
  --d3-danger:     #ED1E29;

  /* Override Twenty's likely theme variables (they use emotion themes; these
     hit anything still using CSS custom props). */
  --primary-color: var(--d3-warm) !important;
  --background-default: var(--d3-ink) !important;
  --background-primary: var(--d3-ink) !important;
}

/* ── Typography ────────────────────────────────────────────────────────── */
html, body,
button, input, select, textarea,
[class*="emotion-"], [class*="css-"] {
  font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
[class*="Heading"], [class*="heading"],
[class*="Title"], [class*="title"] {
  font-family: 'Sora', -apple-system, system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

code, pre, kbd, samp,
[class*="Mono"], [class*="mono"],
[class*="Code"], [class*="code"] {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
}

/* ── Force dark by default (light variant gets warm-white) ─────────────── */
html, body {
  background: var(--d3-ink) !important;
  color: var(--d3-warm) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

html.dark, html.dark body { background: var(--d3-ink) !important; color: var(--d3-warm) !important; }
html.light, html.light body { background: var(--d3-warm) !important; color: var(--d3-ink) !important; }

/* ── Surfaces, borders, dividers ───────────────────────────────────────── */
html.dark *,
html *:not(.light *) {
  border-color: var(--d3-border) !important;
}

/* Common Twenty patterns: cards, panels, modals */
[class*="Card"], [class*="card"],
[class*="Panel"], [class*="panel"],
[class*="Modal"], [class*="modal"],
[class*="Dialog"], [class*="dialog"],
[class*="Sheet"], [class*="sheet"] {
  background-color: var(--d3-surface) !important;
  border-color: var(--d3-border) !important;
}

/* Nav rails and sidebars: deeper surface for hierarchy */
[class*="NavigationDrawer"], [class*="navigation-drawer"],
[class*="Sidebar"], [class*="sidebar"],
nav, aside {
  background-color: var(--d3-ink-2) !important;
  border-right: 1px solid var(--d3-border) !important;
}

/* Top app bar gets the warm tint so it reads as primary chrome */
header, [role="banner"], [class*="TopBar"], [class*="top-bar"], [class*="AppBar"] {
  background-color: var(--d3-ink-2) !important;
  border-bottom: 1px solid var(--d3-border) !important;
}

/* ── Density / "Salesforce-y" sizing ───────────────────────────────────── */
/* Larger nav width for hierarchy clarity */
[class*="NavigationDrawer"], [class*="navigation-drawer"] {
  min-width: 240px !important;
  padding: 16px 12px !important;
}

/* Nav items get more breathing room */
[class*="NavigationDrawerItem"], [class*="navigation-drawer-item"],
nav a, aside a {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

[class*="NavigationDrawerItem"]:hover, [class*="navigation-drawer-item"]:hover {
  background-color: var(--d3-surface-2) !important;
}

/* Data tables: denser rows, more like Salesforce list view */
table, [role="table"] {
  font-size: 13px !important;
}
th, [role="columnheader"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--d3-muted) !important;
  padding: 10px 12px !important;
}
td, [role="cell"] {
  padding: 12px !important;
  border-bottom: 1px solid var(--d3-border) !important;
}

/* Inputs / form controls: bigger touch targets */
input, select, textarea,
[class*="Input"], [class*="input"],
[class*="TextField"], [class*="text-field"] {
  background-color: var(--d3-surface) !important;
  border: 1px solid var(--d3-border) !important;
  border-radius: 8px !important;
  color: var(--d3-warm) !important;
  padding: 10px 12px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(250,248,245,0.35) !important;
  box-shadow: 0 0 0 3px rgba(250,248,245,0.08) !important;
}

/* Buttons */
button, [role="button"], [class*="Button"], [class*="button"] {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s ease !important;
}

/* Primary button = warm white on dark (high contrast, signature DIAL3D) */
button[class*="primary"], [class*="ButtonPrimary"], [class*="button-primary"],
button[type="submit"]:not([class*="ghost"]):not([class*="text"]) {
  background-color: var(--d3-warm) !important;
  color: var(--d3-ink) !important;
  border: none !important;
}
button[class*="primary"]:hover, [class*="ButtonPrimary"]:hover {
  background-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}

/* Links and clickable accents stay readable */
a, [class*="Link"]:not([class*="Linked"]):not([class*="LinkedIn"]) {
  color: var(--d3-warm) !important;
  text-decoration: none !important;
}
a:hover { color: #ffffff !important; }

/* ── Badges, chips, tags ───────────────────────────────────────────────── */
[class*="Chip"], [class*="chip"],
[class*="Badge"], [class*="badge"],
[class*="Tag"]:not([class*="Tagline"]) {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--d3-border) !important;
}

/* ── Scrollbars (dark) ─────────────────────────────────────────────────── */
* { scrollbar-color: var(--d3-border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--d3-border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(250,248,245,0.18); }

/* ── Logo size in top-bar — the lockup is wide, so size it appropriately ─ */
img[src*="twenty-logo"], img[alt*="Twenty" i], img[alt*="logo" i] {
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ── Selection highlight ───────────────────────────────────────────────── */
::selection { background: var(--d3-grad-mid); color: var(--d3-warm); }