/* Shared component classes. Lifted out of per-page <style> blocks. */

* { font-family: 'Inter', sans-serif; }

[x-cloak] { display: none !important; }

/* Focus ring — consistent across all interactive elements. We override
   the browser default with a softer brand-tinted ring and only show it
   for keyboard navigation (`:focus-visible`). */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgb(var(--brand));
  outline-offset: 2px;
  border-radius: 6px;
}
.sidebar-link:focus-visible { outline-offset: 0; outline-color: #fff; }

/* ----------------------------------------------------------------- Sidebar */
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  color: #94a3b8; transition: all .15s; cursor: pointer; text-decoration: none;
}
.sidebar-link:hover { background: #1e293b; color: #e2e8f0; }
.sidebar-link.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-section-title {
  font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0 12px; margin-bottom: 8px;
}

/* --------------------------------------------------------------------- KPI */
.kpi-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 20px; transition: all .2s;
  position: relative; overflow: hidden;
}
.kpi-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,.08);
  transform: translateY(-2px); border-color: #cbd5e1;
}

/* ------------------------------------------------------------- Chart cards */
.chart-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 24px; transition: box-shadow .15s;
}
.chart-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.04); }
.chart-container { position: relative; width: 100%; }

/* ---------------------------------------------------------------- Badges */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; letter-spacing: .3px;
}

/* ----------------------------------------------------------------- Tabs */
.tab-btn {
  padding: 10px 4px; font-size: 13px; font-weight: 600;
  color: #64748b; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .15s;
}
.tab-btn:hover { color: #0f172a; }
.tab-btn.active { color: #1d4ed8; border-bottom-color: #1d4ed8; }

/* ----------------------------------------------------------------- Tags */
.tag-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eff6ff; color: #1d4ed8;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 100px;
  border: 1px solid #bfdbfe;
}
.tag-pill button { color: #93c5fd; line-height: 1; }
.tag-pill button:hover { color: #1d4ed8; }

/* ------------------------------------------------------- Contact rows */
.contact-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff;
  transition: all .15s;
}
.contact-row:hover {
  border-color: #bfdbfe;
  box-shadow: 0 2px 8px rgba(59,130,246,.08);
}
.contact-type-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
}
.add-row-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px;
  border: 1.5px dashed #cbd5e1; border-radius: 10px;
  color: #64748b; font-size: 12px; font-weight: 600;
  background: transparent; transition: all .15s;
}
.add-row-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

/* ------------------------------------------------------- Modal backdrop */
.modal-backdrop { backdrop-filter: blur(4px); }

/* ------------------------------------------------ Pulse dot (live indicator) */
.pulse-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 100%; background: #10b981; position: relative;
}
.pulse-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 100%; border: 2px solid #10b981;
  animation: pulse 1.6s infinite; opacity: 0;
}
@keyframes pulse {
  0%   { transform: scale(0.8); opacity: .6; }
  100% { transform: scale(2);   opacity: 0;  }
}

/* ---------------------------------------------------- Notes timeline (B1) */
.note-row { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #f1f5f9; }
.note-row:first-child { border-top: 0; }
.note-row.note-pinned {
  background: linear-gradient(90deg, rgba(254, 249, 195, .55), transparent 70%);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
}
.note-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.note-body { flex: 1; min-width: 0; }
.note-meta { font-size: 11px; color: #94a3b8; }
.note-text {
  font-size: 13px; color: #334155; line-height: 1.55;
  margin-top: 4px; white-space: pre-wrap; word-wrap: break-word;
}
.note-composer {
  border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; padding: 12px;
}
.note-composer textarea {
  width: 100%; resize: none; min-height: 64px;
  background: transparent; outline: none;
  font-size: 13px; color: #0f172a;
}
.note-composer:focus-within {
  border-color: #93c5fd; background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.mention-pill {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: rgb(var(--brand-tint));
  color: rgb(var(--brand-deep));
  font-weight: 600;
  font-size: 0.94em;
}

/* ---------------------------------------------------- Activity feed (B2) */
.activity-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 10px;
  transition: background .15s;
}
.activity-row:hover { background: #f8fafc; }
.activity-icon {
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------ Quick-jump (B6) */
.qj-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15,23,42,.45); backdrop-filter: blur(4px);
}
.qj-modal {
  position: fixed; left: 50%; top: 18vh;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-pop);
  z-index: 91; overflow: hidden;
}
.qj-input {
  width: 100%; padding: 18px 20px;
  font-size: 15px; outline: none; border: 0;
  border-bottom: 1px solid #e2e8f0;
}
.qj-results { max-height: 56vh; overflow-y: auto; padding: 8px 0; }
.qj-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #94a3b8;
  padding: 10px 20px 4px;
}
.qj-result {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 20px; cursor: pointer; font-size: 13.5px;
  color: #1e293b;
}
.qj-result:hover, .qj-result.qj-active { background: #eff6ff; color: #1d4ed8; }
.qj-result .qj-kind {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
}
.qj-empty {
  padding: 28px 20px; text-align: center;
  color: #94a3b8; font-size: 13px;
}
.qj-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  font-size: 11.5px; color: #64748b; cursor: pointer;
  transition: all .15s;
}
.qj-hint:hover { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.qj-hint kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 700; color: #475569;
  padding: 1px 5px; border-radius: 4px;
  background: #fff; border: 1px solid #e2e8f0;
}

/* --------------------------------------------- Recently viewed sidebar */
.recently-viewed-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12.5px; color: #cbd5e1; text-decoration: none;
  transition: background .15s;
}
.recently-viewed-row:hover { background: #1e293b; color: #fff; }
.recently-viewed-row .rv-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #475569; flex-shrink: 0;
}

/* ---------------------------------------------------- Mobile (UI-4) */
/* The sidebar is permanently visible on desktop. Below 1024px it collapses
   into a slide-out drawer toggled from a hamburger in the topbar. */
@media (max-width: 1023px) {
  /* Sidebar slides in from the left on top of the page */
  body > div > aside[data-partial="sidebar"] {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 32px rgba(15, 23, 42, .25);
  }
  body.sidebar-open > div > aside[data-partial="sidebar"] {
    transform: translateX(0);
  }
  body.sidebar-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 55;
  }

  /* Topbar gets a hamburger on the far left and tighter spacing */
  header[data-partial="topbar"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Page-level chrome that should stack on mobile */
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .stack-mobile > * { width: 100% !important; }

  /* The two-column profile layout collapses */
  .profile-cols { flex-direction: column !important; }
  .profile-cols > .profile-rail { width: 100% !important; border-left: 0 !important; border-top: 1px solid rgb(var(--border)); }

  /* Settings tabs as horizontal scroll on mobile */
  .settings-tabs-mobile {
    display: flex; gap: 4px; overflow-x: auto;
    border-bottom: 1px solid rgb(var(--border));
    padding-bottom: 4px;
  }
  .settings-tabs-mobile .settings-tab { flex-shrink: 0; }

  /* List-row grids — make them looser */
  .grid-mobile-stack {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Hide labels in topbar buttons that overflow */
  .topbar-text-hide-sm { display: none !important; }

  /* Profile hero: smaller avatar + stacked title row */
  .profile-hero { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .profile-hero > .profile-hero-actions { width: 100%; justify-content: flex-start !important; flex-wrap: wrap; }

  /* Notification dropdown — must fit inside the viewport */
  header[data-partial="topbar"] .relative > .absolute,
  header[data-partial="topbar"] [class*="w-[380px]"] {
    width: calc(100vw - 24px) !important;
    max-width: 380px;
    right: 8px !important;
  }
}

/* ---------------------------------------------------- Mobile (UI-4b)
   Tighter pass at common phone widths. Reduces page-frame padding,
   wraps bulk bars, hides non-essential table columns, and keeps the
   topbar from crowding. The 1023px rule above handles the sidebar
   drawer; this one handles the body. */
@media (max-width: 767px) {
  /* Cut horizontal page padding everywhere. Tailwind utilities are
     overridden with !important since they have high specificity. */
  .px-8 { padding-left: 1rem !important;  padding-right: 1rem !important;  }
  .px-7 { padding-left: 1rem !important;  padding-right: 1rem !important;  }
  .px-6 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .py-6 { padding-top: 1rem !important;   padding-bottom: 1rem !important; }
  .py-5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }

  /* Section cards inside profile / dashboard pages — shrink interior pad */
  .rounded-2xl.p-6,
  .rounded-2xl.p-7 { padding: 1rem !important; }
  .rounded-xl.p-6  { padding: 1rem !important; }
  .chart-card     { padding: 14px !important; }
  .report-card    { padding: 14px !important; }
  .stat-card      { padding: 12px !important; }
  .stat-mini      { padding: 10px 12px !important; }

  /* Headline shrinks */
  .text-2xl { font-size: 1.25rem !important; }   /* 24 → 20 */
  .text-xl  { font-size: 1.125rem !important; }  /* 20 → 18 */
  .text-3xl { font-size: 1.5rem !important; }    /* used in profile-hero avatar text */

  /* Bulk action bar wraps + horizontal scroll fallback */
  .bulk-bar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    padding: 10px 12px !important;
  }
  .bulk-bar > button { font-size: 12px; padding: 4px 8px !important; }

  /* Topbar action buttons get a tighter gap so all four fit */
  header[data-partial="topbar"] > .flex.items-center.gap-3 { gap: 6px !important; }
  /* Hide the keyboard hint in search button */
  .qj-hint kbd { display: none !important; }
  .qj-hint    { padding: 6px 10px !important; }

  /* Page headers — title row stacks above the action buttons */
  .page-header-stack { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .page-header-stack > * { width: 100% !important; }

  /* Catch-all for the recurring "page header" pattern: a white banner
     under the topbar that pairs a title block with an action-button cluster.
     We stack the two when their parent uses justify-between on small screens. */
  .bg-white.border-b.border-slate-200 > div.flex.items-center.justify-between:not(.no-stack) {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  /* Inside those headers, the right-side button cluster wraps and gets a
     bit more breathing room. */
  .bg-white.border-b.border-slate-200 > div.flex.items-center.justify-between > .flex.items-center.gap-2,
  .bg-white.border-b.border-slate-200 > div.flex.items-center.justify-between > .flex.items-center.gap-3 {
    flex-wrap: wrap;
  }

  /* Modals — full width with small inset so they don't crash the viewport */
  .modal-backdrop > div,
  .fixed.inset-0 > div[class*="max-w-"] {
    max-width: calc(100vw - 24px) !important;
  }

  /* Form grids: any "grid-cols-2" inside a modal collapses to one column */
  .fixed.inset-0 .grid.grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Quick-jump search modal */
  .qj-modal { width: calc(100vw - 24px) !important; max-width: 560px; }

  /* Filter chips strip — horizontal scroll if it overflows */
  .filter-chip-row { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; scrollbar-width: thin; }
  .filter-chip-row > * { flex-shrink: 0; }

  /* Profile cover banner — half-height on phones so the hero is reachable */
  .profile-cover { height: 120px !important; }

  /* The two profile hero stat rows can wrap into multiple lines without
     crowding when the avatar/title stack on mobile. */
  .profile-hero h1 { font-size: 1.375rem !important; line-height: 1.15 !important; }

  /* TABLE PATTERN — any element marked as `.table-rows-12` gets the
     12-column grid replaced with a single-column "card stack" on mobile.
     Each cell becomes a labeled row inside the card. The HTML needs to
     opt in by adding `data-mlabel="…"` on each cell. */
  .table-rows-12 {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    row-gap: 4px !important;
  }
  .table-rows-12 > [class*="col-span-"] { grid-column: span 1 / span 1 !important; }
  .table-rows-12 > [class*="col-span-"][data-mhide] { display: none !important; }
  .table-rows-12 > [class*="col-span-"][data-mlabel]::before {
    content: attr(data-mlabel);
    display: inline-block;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: rgb(var(--ink-300));
    margin-right: 8px; min-width: 80px;
  }
  /* Table headers can hide on mobile entirely — the card layout has
     its own per-row labels. */
  .table-header-row { display: none !important; }
}

/* Extra-narrow phones (≤ 380px) — shave a bit more */
@media (max-width: 380px) {
  .px-8, .px-7 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .text-2xl { font-size: 1.125rem !important; }
  .qj-hint span { display: none !important; }
  .qj-hint { padding: 6px 8px !important; }
  /* Profile cover banner is smaller so it doesn't dominate. */
  .profile-cover { height: 96px !important; }
}

/* Hamburger button — hidden on desktop, visible on mobile */
.hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgb(var(--border));
  background: #fff;
  color: rgb(var(--ink-700));
  margin-right: 8px;
  cursor: pointer;
}
.hamburger:hover { background: rgb(var(--surface)); }
@media (max-width: 1023px) { .hamburger { display: inline-flex; } }

/* ---------------------------------------------------- Toast (UI-2) */
.toaster {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 95;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
  background: rgb(var(--ink-900));
  color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  min-width: 220px; max-width: 360px;
}
.toast.toast-success { background: rgb(var(--success)); }
.toast.toast-error   { background: rgb(var(--danger)); }
.toast.toast-info    { background: rgb(var(--brand-deep)); }
.toast .toast-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------- Designed empty states */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
}
.empty-state .empty-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgb(var(--brand-tint));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.empty-state .empty-icon svg { color: rgb(var(--brand)); }
.empty-state .empty-title {
  font-size: 14px; font-weight: 700; color: rgb(var(--ink-900));
}
.empty-state .empty-sub {
  font-size: 12.5px; color: rgb(var(--ink-500));
  margin-top: 4px; max-width: 320px;
}
.empty-state .empty-cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-deep)));
  color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer; border: 0;
}
.empty-state .empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}

/* ---------------------------------------------------- Career timeline (UI-1) */
.career-step {
  display: flex; gap: 14px; position: relative;
  padding-bottom: 22px;
}
.career-step:last-child { padding-bottom: 0; }
.career-step::before {
  content: ''; position: absolute;
  left: 18px; top: 36px; bottom: -2px;
  width: 2px; background: #e2e8f0;
}
.career-step:last-child::before { display: none; }
.career-dot {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px;
  flex-shrink: 0; z-index: 1;
  border: 3px solid #fff;
}
.career-body {
  flex: 1; min-width: 0;
  padding-top: 6px;
}
.career-body .career-role {
  font-size: 13px; font-weight: 600; color: #0f172a;
}
.career-body .career-company {
  font-size: 12px; font-weight: 500; color: #3b82f6;
  text-decoration: none; transition: color .15s;
}
.career-body .career-company:hover { color: #1d4ed8; text-decoration: underline; }
.career-body .career-dates {
  font-size: 11px; color: #94a3b8; margin-top: 2px;
}
.career-current-pill {
  display: inline-block; margin-left: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px;
  background: #dcfce7; color: #15803d;
  text-transform: uppercase;
}

/* ---------------------------------------------------- Activity timeline (UI-1) */
.timeline-row {
  display: flex; gap: 14px; padding-bottom: 18px;
  position: relative;
}
.timeline-row:last-child { padding-bottom: 0; }
.timeline-row::before {
  content: ''; position: absolute;
  left: 17px; top: 38px; bottom: -2px;
  width: 2px; background: #f1f5f9;
}
.timeline-row:last-child::before { display: none; }
.timeline-icon {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
}
.timeline-card {
  flex: 1; min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.timeline-card .tl-headline {
  font-size: 13px; color: #334155; line-height: 1.45;
}
.timeline-card .tl-meta {
  font-size: 11.5px; color: #94a3b8; margin-top: 4px;
}

/* ---------------------------------------------------- Bulk select bar */
.bulk-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 12px;
  background: rgb(var(--brand-tint));
  border: 1px solid rgb(var(--brand-soft));
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.bulk-bar .bulk-count {
  font-size: 13px; font-weight: 700; color: rgb(var(--brand-deep));
}
.bulk-bar button {
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgb(var(--border));
  background: #fff; color: rgb(var(--ink-700));
  transition: all .15s;
}
.bulk-bar button:hover { background: rgb(var(--surface)); }
.bulk-bar button.bulk-danger {
  border-color: rgb(var(--danger) / .35);
  color: rgb(var(--danger));
}
.bulk-bar button.bulk-danger:hover {
  background: rgb(var(--danger-soft));
}
.bulk-checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid rgb(var(--border));
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; flex-shrink: 0; cursor: pointer;
  transition: all .12s;
}
.bulk-checkbox:hover { border-color: rgb(var(--brand)); }
.bulk-checkbox.checked {
  background: rgb(var(--brand));
  border-color: rgb(var(--brand));
}
.bulk-checkbox.checked::after {
  content: ''; width: 4px; height: 8px;
  border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ---------------------------------------------------- Files (A2) */
.dropzone-mini {
  border: 2px dashed rgb(var(--border));
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  background: rgb(var(--surface));
  transition: all .15s;
}
.dropzone-mini:hover, .dropzone-mini.dragging {
  border-color: rgb(var(--brand));
  background: rgb(var(--brand-tint));
}

/* ---------------------------------------------------- Print (B6)
   When the user prints a profile we hide the chrome (sidebar, topbar,
   action buttons, modals) and let the content reflow full-width. We
   also force light mode so dark-theme users get a sensible printout. */
@media print {
  /* Force light mode for printing — dark backgrounds eat ink and look bad */
  :root[data-theme="dark"] body { background: #fff !important; color: #0f172a !important; }
  :root[data-theme="dark"] * { background-color: transparent !important; color: inherit !important; border-color: #e2e8f0 !important; }

  /* Hide chrome */
  aside[data-partial="sidebar"],
  header[data-partial="topbar"],
  [data-partial="quick-jump"],
  [data-partial="toaster"],
  [data-partial="shortcuts"],
  .hamburger,
  .qj-hint,
  button[class*="empty-cta"] { display: none !important; }

  /* Hide action buttons on profile pages (Edit, Star, hover-revealed icons) */
  .profile-hero-actions,
  .add-row-btn,
  .bulk-bar { display: none !important; }

  /* Take the whole width back */
  body { background: #fff !important; }
  body > div.flex.h-screen { display: block !important; height: auto !important; }
  div.flex.h-screen > div.flex.flex-col { display: block !important; }
  div.profile-cols { display: block !important; }
  div.profile-rail {
    width: 100% !important;
    border-left: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 0 !important;
    page-break-inside: avoid;
  }
  div.flex-1.overflow-y-auto { overflow: visible !important; padding: 16px 0 !important; }

  /* Avoid splitting cards across pages where possible */
  .chart-card, .stat-card, .panel, .case-card, .deal-card, .note-row, .timeline-row {
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  /* Cleaner links */
  a { color: #1e40af !important; text-decoration: none !important; }
}

/* ---------------------------------------------------- Profile cover banner
   Soft, desaturated header used at the top of person + company profiles.
   The entity's brand gradient is applied as a low-opacity tint over a
   neutral surface — gives each record its own colour identity without the
   palette feeling shouty. */
.profile-cover {
  position: relative;
  height: 168px;
  overflow: hidden;
  /* Soft neutral base. The brand-color tint sits on top via ::before. */
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  isolation: isolate;
}
/* Brand-tint layer — the entity's gradient softened to ~28% saturation and
   bumped in brightness so the result reads as a pale wash. */
.profile-cover::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--cover-grad, linear-gradient(135deg, #3b82f6, #1d4ed8));
  filter: saturate(0.30) brightness(1.18);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
/* Top-right glow orb — soft white halo, very low contrast */
.profile-cover::after {
  content: "";
  position: absolute;
  inset: -110px -80px auto auto;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 1;
}
/* A second, off-center orb for depth — sits inside the banner via inline
   element so we don't run out of pseudo-elements. */
.profile-cover-orb {
  position: absolute;
  bottom: -90px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
}
/* Overlay layer — barely-there grid + soft white wash at the bottom edge
   so the avatar/page transition feels seamless instead of cliffed. */
.profile-cover-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255,255,255,.50) 100%);
}

/* Dark theme — keep the soft feel but flip the bottom wash and darken
   the neutral base so the brand tint still reads. */
:root[data-theme="dark"] .profile-cover {
  background: linear-gradient(180deg, rgb(30 41 59) 0%, rgb(15 23 42) 100%);
}
:root[data-theme="dark"] .profile-cover::before {
  filter: saturate(0.45) brightness(0.85);
  opacity: 0.55;
}
:root[data-theme="dark"] .profile-cover::after {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 65%);
}
:root[data-theme="dark"] .profile-cover-orb {
  background: radial-gradient(circle at 70% 70%, rgba(255,255,255,.10), rgba(255,255,255,0) 65%);
}
:root[data-theme="dark"] .profile-cover-overlay {
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(15,23,42,.55) 100%);
}

/* ---------------------------------------------------- Custom fields (B5) */
.cf-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  padding: 8px 0; align-items: center;
  font-size: 13px;
}
.cf-row .cf-label { color: #64748b; font-weight: 500; }
.cf-row .cf-value { color: #0f172a; font-weight: 500; }
.cf-empty { color: #94a3b8; font-style: italic; }

/* Normalize the value column so every custom-field control aligns to a
   consistent width regardless of its type. Single-line controls cap at
   ~320px; wider controls (radio groups, multi-select chips, textareas)
   are free to take up to the parent's full envelope. */
.cf-row > div                   { max-width: 480px; }
.cf-row > div input,
.cf-row > div select            { width: 100%; max-width: 320px; }
.cf-row > div textarea          { width: 100%; }
.cf-row .cf-radio-group,
.cf-row .cf-multi-group         { max-width: 480px; }
/* Don't squeeze the small wrapper divs that pair an input with a unit
   prefix/suffix (currency $, percent %, mailto link, phone dial code). */
.cf-row > div > .flex           { max-width: 360px; }
/* Toggle button shouldn't stretch — it's a fixed-size pill. */
.cf-row > div .switch           { width: 36px !important; max-width: 36px; }

/* ─────────────────────────────────────────────────────────────────
   Print stylesheet — strips chrome (sidebar, topbar, action buttons,
   tab navigation, edit controls) from profile/case pages so a clean
   one-page contact sheet prints. Add `.print-hide` to anything page-
   specific you also want suppressed. */
@media print {
  aside[data-partial="sidebar"],
  header[data-partial="topbar"],
  [data-partial="quick-jump"],
  [data-partial="toaster"],
  [data-partial="shortcuts"],
  .print-hide,
  .profile-hero-actions,
  .qj-hint,
  button:not(.print-keep) { display: none !important; }

  html, body { background: #fff !important; color: #0f172a !important; }
  .flex.h-screen { display: block !important; height: auto !important; }
  .flex-1.overflow-hidden,
  .flex-1.overflow-y-auto { overflow: visible !important; }
  .bg-sidebar, .bg-surface { background: #fff !important; }
  .profile-cover { display: none; }
  .profile-rail { width: auto !important; border-left: 0 !important; }
  .profile-cols { display: block !important; }
  .stat-card, .chart-card, .rounded-2xl { box-shadow: none !important; page-break-inside: avoid; }
  a { color: #0f172a !important; text-decoration: none !important; }
  a[href]:after { content: ""; }
}