/* ═══════════════════════════════════════════════════════
   OPUS CRM — Visual Design
   Font: Plus Jakarta Sans (modern, legible, professional)
   Brand: #1666b0 primary · #eceff6 page bg · #1d62b9→#5ca0e6 gradient
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:       #1666b0;
  --primary-dk:    #0e4c8a;
  --primary-lt:    #4078c0;
  --primary-pale:  #e8f1fb;
  --grad-a:        #1d62b9;
  --grad-b:        #5ca0e6;

  --bg-page:       #eceff6;
  --bg-card:       #ffffff;
  --bg-alt:        #f2f6fc;
  --bg-hover:      #dce9f9;
  --bg-highlight:  #d9e8ff;

  --text-head:     #0f172a;
  --text-body:     #1e293b;
  --text-sec:      #475569;
  --text-muted:    #94a3b8;

  --border:        #e5e7eb;
  --border-dk:     #d1d9e3;

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 1px 4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.09), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);

  --sidebar-bg:     #162d4e;
  --sidebar-border: rgba(255,255,255,0.09);
  --sidebar-text:   rgba(255,255,255,0.62);
  --sidebar-bright: #ffffff;
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-active: var(--primary);

  --font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
}

/* ── Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

#root { height: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App shell ─────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────── */
#sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.25s ease, width 0.2s ease, min-width 0.2s ease;
  scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }

/* Brand / logo area — gradient header */
.sidebar-brand {
  padding: 1.35rem 1.6rem 1.15rem;
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.sidebar-brand-icon {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sidebar-brand-text strong {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sidebar-brand-text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
  white-space: nowrap;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.6rem;
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--sidebar-bright);
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;                  /* clip the name on narrow bars */
}
/* Truncate sidebar text instead of wrapping — wrapping mid-animation made the
   bar height twitch as the name went from 2 lines back to 1. */
#sidebar .nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebar .nav-link { overflow: hidden; }
.sidebar-user i {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
}

/* Nav section label */
.nav-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  padding: 1rem 1.6rem 0.35rem;
}

#sidebar .nav-link {
  color: var(--sidebar-text);
  padding: 0.6rem 1.6rem;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

#sidebar .nav-link i {
  width: 16px;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.8;
  flex-shrink: 0;
}

#sidebar .nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-bright);
  text-decoration: none;
}
#sidebar .nav-link:hover i { opacity: 1; }

#sidebar .nav-link.active {
  background: rgba(22,102,176,0.35);
  color: #fff;
}
#sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--grad-b);
  border-radius: 0 3px 3px 0;
}
#sidebar .nav-link.active i { opacity: 1; }

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem 0;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer .nav-link {
  font-size: 0.875rem;
  padding: 0.5rem 1.6rem;
}

/* ── Sidebar collapse toggle (small chevron in the brand row) ─── */
.sidebar-brand { position: relative; }     /* anchor for the toggle */
.sidebar-toggle {
  margin-left: auto;            /* push to the right edge of the brand row */
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  padding: 0.25rem 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,0.12); }
/* In collapsed mode the bar is just a column of icons — hide the chevron
   entirely. The whole sidebar is the expand affordance. */
#sidebar.collapsed .sidebar-toggle { display: none; }
/* And make the whole collapsed bar feel clickable. */
#sidebar.collapsed { cursor: pointer; }
#sidebar.collapsed .nav-link { cursor: pointer; }

/* ── Collapsed mode ──────────────────────────────────────
   Strategy: keep every interior element at its expanded position. Icons sit at
   their original padding-left, all paddings unchanged, section-labels still
   occupy their box. We just shrink the bar's width and hide the text content.
   The right portion of each row (text + the bar past 64px) gets clipped by
   overflow-x: hidden on the sidebar. Nothing inside reflows on toggle, so the
   width transition is the only thing the browser has to animate. */
#sidebar          { overflow-x: hidden; }
#sidebar.collapsed { width: 64px; min-width: 64px; }
#sidebar.collapsed .nav-text,
#sidebar.collapsed .sidebar-brand-text { display: none; }
#sidebar.collapsed .nav-section-label { visibility: hidden; }
/* Brand row holds just the 30px handshake icon in collapsed mode — center it
   in the narrowed bar instead of leaving it anchored to the padding-left. */
#sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* ── Main content ──────────────────────────────────────── */
#main-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}

/* Page fade-in */
.page-container {
  padding: 1.75rem 2rem;
  animation: pageIn 0.2s ease both;
}

/* List pages (Deals/Contacts/Institutions): pin the header + filter bar and
   let only the table scroll. Detail pages and the dashboard fall back to the
   default natural-flow layout above. */
.page-container:has(.data-table-wrapper) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-container:has(.data-table-wrapper) .data-table-wrapper {
  flex: 1;
  min-height: 0;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile overlay ────────────────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
  backdrop-filter: blur(2px);
}

@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    width: 240px;
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }
  .page-container { padding: 1rem 1rem 2rem; }
}

/* ── Mobile topbar ─────────────────────────────────────── */
#topbar {
  display: none;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  color: #fff;
  padding: 0.75rem 1rem;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
#topbar span { font-weight: 600; font-size: 1rem; }
#topbar .btn { color: #fff; border: none; background: none; padding: 0; }
@media (max-width: 767px) { #topbar { display: flex; } }

/* ── Login page ────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: 1rem;
}

.login-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.login-card-header {
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  padding: 2rem 2rem 2rem;
  text-align: center;
}

.login-card-header .brand-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.75rem;
  backdrop-filter: blur(4px);
}

.login-card-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
}

.login-card-header p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-card-body {
  padding: 1.75rem 2rem 2rem;
}

.login-card-body .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sec);
  margin-bottom: 0.35rem;
}

.login-card-body .form-control {
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.6rem 1rem;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-head);
  background: var(--bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.login-card-body .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22,102,176,0.12);
  outline: none;
}

.login-card-body .sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

/* ── Page header ───────────────────────────────────────── */
.page-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.page-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-head);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-header h2 i {
  color: var(--primary);
  font-size: 1.15rem;
}

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item a { color: var(--primary); font-weight: 500; }
.breadcrumb-item.active { color: var(--text-sec); }

/* Back arrow on detail pages — sits to the left of the breadcrumb. */
.back-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.back-row .breadcrumb { margin-bottom: 0; }
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.back-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-pale); }
.back-btn i { font-size: 0.875rem; }

/* ── Filter bar ────────────────────────────────────────── */
.filter-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: stretch;
  box-shadow: var(--shadow-xs);
}
.filter-bar-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.filter-bar-top .chip-quick { flex: 1; }
.filter-bar-top #f-count { margin-left: 0; }

.filter-bar input,
.filter-bar select {
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.38rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-body);
  background: var(--bg-alt);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--primary);
  background: var(--bg-card);
}
.filter-bar input[type="text"] { min-width: 190px; }
.filter-bar input::placeholder { color: var(--text-muted); }

.filter-bar .ms-auto { margin-left: auto; }

#f-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ── Data table ────────────────────────────────────────── */
.data-table-wrapper {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

.data-table {
  margin: 0;
  font-size: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  /* Threshold for "give up wrapping, start scrolling". Above this viewport
     width the auto-layout shrinks columns and wraps text normally; below it,
     the wrapper's overflow:auto produces a horizontal scrollbar. */
  min-width: 1000px;
}

.data-table thead th {
  background: var(--bg-alt);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1.5px solid var(--border-dk);
  white-space: nowrap;
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:hover td { color: var(--text-head); }

.data-table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* First column — primary identifier — bold */
.data-table td:first-child { font-weight: 600; color: var(--text-head); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--r-sm);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(22,102,176,0.25);
}
.btn-primary:hover {
  background: var(--primary-dk);
  border-color: var(--primary-dk);
  box-shadow: 0 4px 10px rgba(22,102,176,0.3);
  color: #fff;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--text-sec);
  border-color: var(--border-dk);
  background: var(--bg-card);
}
.btn-outline-secondary:hover {
  background: var(--bg-alt);
  color: var(--text-head);
  border-color: var(--border-dk);
}

.btn-outline-danger {
  color: #dc2626;
  border-color: #fca5a5;
  background: transparent;
}
.btn-outline-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #dc2626;
}

.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
}

.w-100 {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: var(--r-md);
}

/* ── Detail card ───────────────────────────────────────── */
.detail-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 0;
  margin-bottom: 1.15rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.detail-card h5 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-weight: 700;
  margin: 0;
  padding: 1rem 1.6rem;
  background: var(--bg-alt);
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* inner content area */
.detail-card > .row {
  padding: 1.25rem 1.6rem;
  margin-left: 0;
  margin-right: 0;
}
.detail-card > #interactions-list {
  padding: 1.15rem 1.6rem;
}
.detail-card > table {
  margin: 0;
}
.detail-card > p,
.detail-card #contacts-section > p,
.detail-card #inst-section > p {
  padding: 1rem 1.6rem;
  margin: 0;
}

/* Interactions header — d-flex wrapper containing h5 */
.detail-card > .d-flex.justify-content-between {
  padding: 1rem 1.6rem;
  background: var(--bg-alt);
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 0;
  align-items: center;
}
.detail-card > .d-flex.justify-content-between h5 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
/* mb-3 inside detail-card interactions header should not add space since border handles it */
.detail-card > .d-flex.justify-content-between.mb-3 {
  margin-bottom: 0 !important;
}

/* ── Collapsible card titles ───────────────────────────── */
.detail-card-toggle {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.detail-card-toggle .chevron {
  font-size: 0.7em;
  transition: transform 0.18s ease;
}
.detail-card.collapsed .detail-card-toggle .chevron {
  transform: rotate(-90deg);
}
.detail-card.collapsed > *:not(:first-child) {
  display: none;
}
.detail-card.collapsed > h5,
.detail-card.collapsed > .d-flex.justify-content-between {
  border-bottom: none;
}

/* ── Detail fields ─────────────────────────────────────── */
.detail-field {
  display: flex;
  flex-direction: column;
}

.detail-field label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

/* Disabled — read state: clean, prominent value */
.detail-field .form-control:disabled,
.detail-field .form-select:disabled {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-head);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.3rem 0;
  cursor: default;
  box-shadow: none;
  font-family: var(--font);
  pointer-events: none;
}

/* Also pass clicks through disabled controls in related tables */
.detail-card td .form-select:disabled,
.detail-card td .form-control:disabled {
  pointer-events: none;
}

/* Editable state */
.detail-field .form-control:not(:disabled),
.detail-field .form-select:not(:disabled) {
  background: var(--bg-card);
  border: 1.5px solid var(--border-dk);
  border-radius: var(--r-sm);
  color: var(--text-head);
  font-size: 1rem;
  font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.detail-field .form-control:not(:disabled):focus,
.detail-field .form-select:not(:disabled):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22,102,176,0.1);
  outline: none;
}

textarea.form-control {
  resize: none;
  overflow: hidden;
  field-sizing: content;
  min-height: 2.5rem;
}

/* ── Status badges ─────────────────────────────────────── */
.status-badge {
  display: inline;
  padding: 0.22em 0.75em;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* When the label wraps, give each line its own pill shape rather than one
     stretched bounding box with rectangular sides on the middle lines. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.9;
}
/* Deals list table — the Last status column needs a touch more weight. */
#deals-body .status-badge { font-size: 0.9rem; }

.status-cold     { background: #e0f2fe; color: #0369a1; }
.status-neutral  { background: #fef9c3; color: #854d0e; }
.status-hot      { background: #ffedd5; color: #c2410c; }
.status-closing  { background: #dcfce7; color: #15803d; }
.status-done     { background: #d1fae5; color: #065f46; }
.status-lost     { background: #fee2e2; color: #991b1b; }
.status-other    { background: var(--bg-alt); color: var(--text-sec); }

/* ── Sub-deal nav ──────────────────────────────────────── */
.sub-deal-nav {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.sub-deal-nav .btn { font-size: 0.875rem; }
.sub-deal-nav .text-muted {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Interaction cards ─────────────────────────────────── */
#interactions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.interaction-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-card);
  transition: box-shadow 0.15s;
}
.interaction-card:hover { box-shadow: var(--shadow-md); }

/* ── Interaction cards ──────────────────────────────────────
   Option A: header (row 1) and footer (row 3) are scaled down so the comment
   (row 2) reads as the protagonist. Revert this whole block to the previous
   sizes if the typographic emphasis turns out to be too quiet. */
.int-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: center;
  padding: 0.4rem 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-sec);
}

.int-date {
  font-weight: 600;
  color: var(--text-head);
  font-size: 0.75rem;
}

.int-comments {
  color: var(--text-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.int-comments em.text-muted { font-size: 0.875rem; }

.int-footer {
  font-size: 0.75rem;
  color: var(--text-sec);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  align-items: center;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}
.int-footer i { color: var(--text-muted); }

/* ── Pill tags ─────────────────────────────────────────── */
.pill {
  display: inline-block;
  background: var(--primary-pale);
  color: var(--primary);
  border-radius: var(--r-pill);
  padding: 0.15em 0.65em;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 1px;
}

/* Variant for contact↔institution links: institution name as the main label,
   position + purchase power as a smaller muted second line when present. */
.pill.pill-inst {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  padding: 0.25em 0.7em;
  vertical-align: top;
  font-size: 0.9rem;
  margin: 3px;
}
.pill.pill-inst .pill-meta {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* ── Related tables ────────────────────────────────────── */
.related-table {
  font-size: 1rem;
  margin: 0;
}
.related-table th {
  font-weight: 700;
  color: var(--text-sec);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1.5px solid var(--border);
  padding: 0.5rem 0.75rem;
  background: var(--bg-alt);
}
.related-table td {
  vertical-align: middle;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
}
.related-table tbody tr:last-child td { border-bottom: none; }
.related-table tbody tr {
  cursor: default;
  transition: background 0.12s;
}
.related-table tbody tr:hover { background: var(--bg-hover); }

.link-cell {
  color: var(--primary);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
}
.link-cell:hover { text-decoration: underline; }

/* ── Loading spinner ───────────────────────────────────── */
.loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.spinner-border { color: var(--primary) !important; }

/* ── Bootstrap overrides ───────────────────────────────── */
.alert-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
  border-radius: var(--r-md);
  font-size: 1rem;
}

.badge.bg-secondary {
  background: var(--bg-alt) !important;
  color: var(--text-sec) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
}

.badge.bg-success {
  background: #d1fae5 !important;
  color: #065f46 !important;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 0.25em 0.6em;
}

.text-danger { color: #dc2626 !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }

/* Grid spacing */
.g-3 { --bs-gutter-y: 1rem; --bs-gutter-x: 1rem; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.15rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.me-1 { margin-right: 0.3rem !important; }
.me-2 { margin-right: 0.625rem !important; }
.ms-auto { margin-left: auto !important; }
.ms-1 { margin-left: 0.3rem !important; }
.gap-1 { gap: 0.3rem !important; }
.gap-2 { gap: 0.625rem !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-column { flex-direction: column !important; }

.small { font-size: 0.875rem !important; }
.fw-semibold { font-weight: 600 !important; }

/* ── Link modal ────────────────────────────────────────── */
.link-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.link-modal {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.link-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: var(--bg-alt);
  border-bottom: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-head);
  flex-shrink: 0;
}

.link-modal-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.2rem;
  transition: color 0.15s;
}
.link-modal-close:hover { color: var(--text-head); }

.link-modal-body {
  padding: 1rem 1.2rem;
  overflow-y: auto;
  flex: 1;
}

.lm-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
}

.lm-item {
  padding: 0.625rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  transition: background 0.12s;
}
.lm-item:last-child { border-bottom: none; }
.lm-item:hover { background: var(--bg-hover); }
.lm-item strong { color: var(--text-head); }

/* ── Scrollbar styling ─────────────────────────────────── */
#main-content::-webkit-scrollbar { width: 5px; }
#main-content::-webkit-scrollbar-track { background: transparent; }
#main-content::-webkit-scrollbar-thumb {
  background: var(--border-dk);
  border-radius: 10px;
}
#main-content::-webkit-scrollbar-thumb:hover { background: var(--primary-lt); }

/* ── Dashboard ─────────────────────────────────────────── */
.dash-period-banner {
  background: var(--primary-pale);
  border: 1px solid var(--border);
  color: var(--text-head);
  padding: 0.625rem 1rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  font-weight: 500;
}

.dash-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sec);
  margin: 1.6rem 0 0.6rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-sec);
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-head);
  line-height: 1.2;
}
.kpi-sub { font-size: 0.875rem; color: var(--text-sec); }

.dash-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.dash-top-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1rem;
  box-shadow: var(--shadow-xs);
}
.dash-top-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-head);
  margin-bottom: 0.6rem;
}
.dash-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 32px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 1rem;
}
.dash-top-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-body);
}
.dash-top-bar {
  height: 6px;
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.dash-top-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}
.dash-top-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-head);
}

.dash-lists-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 720px) { .dash-lists-grid { grid-template-columns: 1fr; } }
.dash-list-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--text-head);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.dash-list-body {
  max-height: 320px;
  overflow-y: auto;
}
.dash-list-item, .dash-action-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text-body);
  text-decoration: none;
  transition: background 0.12s;
}
.dash-action-item {
  grid-template-columns: 78px auto 1fr auto auto;
}
.dash-list-item:last-child, .dash-action-item:last-child { border-bottom: none; }
.dash-list-item:hover, .dash-action-item:hover { background: var(--bg-hover); }
.dash-list-label {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.dash-list-inst, .dash-action-what, .dash-action-who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-sec);
}
.dash-list-amount, .dash-action-date, .dash-list-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-sec);
  font-size: 0.875rem;
  white-space: nowrap;
}
.dash-action-date { font-weight: 600; color: var(--text-head); }

.dash-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1100px) { .dash-row-2 { grid-template-columns: 1fr; } }

.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1rem;
  box-shadow: var(--shadow-xs);
}
.dash-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-head);
  margin-bottom: 0.6rem;
}
.dash-cal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}
.dash-cal-week {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-cal-week-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-head);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.dash-cal-week-body {
  flex: 1;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-card);
}
.dash-cal-week-body .dash-action-item {
  grid-template-columns: 64px 1fr auto;
  padding: 0.4rem 0.625rem;
  font-size: 0.875rem;
}
.dash-cal-week-body .dash-list-inst,
.dash-cal-week-body .dash-action-who { display: none; }

/* Pipeline funnel */
.dash-funnel { display: flex; flex-direction: column; gap: 0.4rem; }
.dash-funnel-row {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}
.dash-funnel-label { font-weight: 600; color: var(--text-head); }
.dash-funnel-bar {
  height: 18px;
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.dash-funnel-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}
.dash-funnel-foot {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.dash-funnel-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
}
.dash-funnel-pill.won  { background: #d1f7dd; color: #186a3b; }
.dash-funnel-pill.lost { background: #fde3e3; color: #8a1f1f; }

/* Recent activity feed */
.dash-activity { display: flex; flex-direction: column; }
.dash-activity-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-body);
  transition: background 0.12s;
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-item:hover { background: var(--bg-hover); }
.dash-activity-time {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-sec);
  font-weight: 600;
}
.dash-activity-line {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
}
.dash-activity-sub {
  font-size: 0.875rem;
  color: var(--text-sec);
  margin-top: 0.15rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.dash-activity-comment {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

/* Help system */
.help-toggle-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sec);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.help-toggle-btn:hover { background: var(--bg-hover); }
.help-toggle-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.help-mode-on [data-help] {
  outline: 1px dashed rgba(22, 102, 176, 0.4);
  outline-offset: 2px;
  cursor: help;
}
.help-tooltip {
  position: absolute;
  background: #0f172a;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 300px;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(15,23,42,0.25);
  pointer-events: none;
  white-space: pre-wrap;
}

/* ── Filter chips ────────────────────────────────────────── */
.chip-row { display:flex; flex-wrap:wrap; gap:0.5rem 0.875rem; align-items:center; flex:1; }

.chip {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.32rem 0.75rem;
  background:var(--bg-alt); color:var(--text-body);
  border:1.5px solid var(--border); border-radius:var(--r-pill);
  font-size:0.875rem; cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
}
.chip:hover { background:var(--bg-card); border-color:var(--primary); }
.chip-label { font-weight:600; }
.chip-op    { color:var(--text-muted); }
.chip-val   { color:var(--primary); font-weight:500; }
.chip-empty { border-style:dashed; color:var(--text-muted); }
.chip-negated { background:rgba(220, 53, 69, 0.08); border-color:rgba(220, 53, 69, 0.35); }
.chip-bang { font-weight:700; color:rgb(180, 30, 50); margin-right:0.15rem; }
.chip-quick { min-width:200px; }

.chip-wrap { display:inline-flex; align-items:center; position:relative; }
.chip-wrap[data-pinned] { cursor:grab; }
.chip-wrap[data-pinned]:active { cursor:grabbing; }
.chip-wrap.chip-dragging { opacity:0.45; }
.chip-wrap.chip-drop-target-left  > .chip { box-shadow:-3px 0 0 var(--primary); }
.chip-wrap.chip-drop-target-right > .chip { box-shadow: 3px 0 0 var(--primary); }
.chip-badge {
  position:absolute; top:-7px; right:-7px;
  width:18px; height:18px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgb(220, 53, 69); color:#fff;
  border:1.5px solid #fff; border-radius:50%;
  font-size:0.625rem; line-height:1; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
  z-index:2;
}
.chip-badge:hover { background:rgb(180, 30, 50); }
/* Make the icon fill the badge and flex-center its glyph so the FA ::before
   character (which has font-metric whitespace below it) sits true center. */
.chip-badge i {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; line-height:1;
}

/* Clear badge — blue circle with white × glyph. */
.chip-badge.chip-clear { background:var(--primary); }
.chip-badge.chip-clear:hover { background:var(--primary); filter:brightness(0.88); }
.chip-badge.chip-clear i { font-size:0.875rem; }

/* In remove mode, chips lose their hover affordance and pointer cursor —
   only the trash badge is interactive. */
.chip-row.remove-mode .chip { cursor:default; }
.chip-row.remove-mode .chip:hover {
  background:var(--bg-alt);
  border-color:var(--border);
}
.chip-row.remove-mode .chip-wrap[data-pinned] { cursor:default; }

/* ── Multi-select checkbox list inside chip editor ─── */
.chip-multi-list {
  flex:1; max-height:360px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:0.25rem 0.4rem; background:var(--bg-alt);
}
/* Higher-specificity selectors to override the generic .chip-pop-row label/input
   rules above, which were stretching the checkbox via flex:1 and shrinking text. */
.chip-multi-list .chip-multi-row {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.18rem 0.25rem; font-size:0.875rem; cursor:pointer;
  color:var(--text-body); min-width:0; width:100%;
}
.chip-multi-list .chip-multi-row:hover { background:var(--bg-card); border-radius:var(--r-sm); }
.chip-multi-list input.chip-val-input {
  flex:0 0 auto; margin:0; padding:0;
  width:14px; height:14px;
}
.chip-multi-list .chip-multi-row span { flex:1; min-width:0; }

/* ── Range editor (numeric/date chips) ─── */
.chip-range-row { display:flex; align-items:center; gap:0.4rem; flex:1; }
.chip-range-row .chip-val-input { flex:1; min-width:0; }
.chip-range-row .chip-val-input:disabled {
  background:var(--bg-alt); color:var(--text-muted); cursor:not-allowed;
}
.chip-range-link {
  background:transparent;
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:0.18rem 0.5rem;
  cursor:pointer;
  color:var(--text-muted);
  font-weight:700;
  font-size:0.875rem;
  line-height:1;
  min-width:1.8rem;
  text-align:center;
  transition:color 0.15s, border-color 0.15s, background 0.15s;
}
.chip-range-link:hover { color:var(--primary); border-color:var(--primary); }
.chip-range-link.locked {
  color:#fff;
  background:var(--primary);
  border-color:var(--primary);
}

.btn-add-filter, .btn-remove-filters, .btn-clear-filters, .btn-view-toggle {
  background:transparent; border:1.5px dashed var(--border); color:var(--text-muted);
  border-radius:var(--r-pill); padding:0.32rem 0.875rem; font-size:0.875rem; cursor:pointer;
}
.btn-add-filter:hover    { color:var(--primary); border-color:var(--primary); }
.btn-clear-filters:hover { color:var(--primary); border-color:var(--primary); }
.btn-view-toggle:hover   { color:var(--primary); border-color:var(--primary); }
.btn-remove-filters:hover { color:rgb(180, 30, 50); border-color:rgb(180, 30, 50); }
.btn-remove-filters.active {
  color:#fff; background:rgb(180, 30, 50);
  border-color:rgb(180, 30, 50); border-style:solid;
}
/* Extra breathing room between the bulk-action buttons and Remove filters. */
.btn-remove-filters { margin-left: 1rem; }

/* ── Popovers ──────────────────────────────────────────── */
.chip-popover, .picker-popover {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:0.6rem; z-index:1000; min-width:240px;
}
.chip-pop-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.chip-pop-row label { font-size:0.875rem; color:var(--text-muted); min-width:36px; }
.chip-pop-row select, .chip-pop-row input { font-size:0.875rem; padding:0.3rem 0.5rem;
  border:1px solid var(--border); border-radius:var(--r-sm); flex:1; }
.chip-remove { color:rgb(180, 30, 50); font-size:0.875rem; }

.picker-popover { min-width:280px; max-height:400px; overflow-y:auto; }
.picker-head { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.5rem; }
.picker-search { padding:0.35rem 0.6rem; border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:0.875rem; }
.picker-pin { font-size:0.875rem; color:var(--text-muted); display:flex; gap:0.35rem; }
.picker-restore {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  background:transparent; color:var(--text-muted);
  border:1.5px dashed var(--border); border-radius:var(--r-pill);
  padding:0.32rem 0.7rem; font-size:0.875rem; cursor:pointer;
}
.picker-restore:hover { color:var(--primary); border-color:var(--primary); }
.picker-section-title {
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-muted); padding:0.35rem 0.2rem 0.15rem; font-weight:600;
}
.picker-row {
  padding:0.3rem 0.5rem; border-radius:var(--r-sm); cursor:pointer; font-size:0.875rem;
}
.picker-row:hover { background:var(--bg-alt); }

/* ── Sortable headers ──────────────────────────────────── */
.data-table th[data-sort-col] { user-select:none; }
.data-table th.sort-asc::after  { content:' \25B2'; font-size:0.75em; color:var(--primary); }
.data-table th.sort-desc::after { content:' \25BC'; font-size:0.75em; color:var(--primary); }

/* ── Deals aggregate block (between filter bar and table) ── */
.deals-aggregate {
  display:flex;
  width:fit-content;             /* shrink to content so the help-mode outline
                                   wraps the totals only, not the full row */
  max-width:100%;
  margin-left:auto;              /* push the shrunk block to the right edge */
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.4rem 1.6rem;
  padding:0 0.25rem 0.6rem;
  font-weight:600;
  color:var(--text-body);
  font-size:1rem;
}
.deals-aggregate:empty { display:none; }
.deals-aggregate .agg-label { color:var(--text-body); }
.deals-aggregate .agg-totals {
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0.4rem 0.7rem;             /* tighter gap between currency totals */
}
.deals-aggregate .agg-sep   { color:var(--text-muted); font-weight:400; }
.deals-aggregate .agg-part  { white-space:nowrap; }

/* Short-data table cells never wrap. Rule of thumb: apply to columns that hold
   short, comparable values (IDs, dates, amounts, phone numbers, counts) — long
   text columns (names, descriptions, addresses) should remain wrappable so the
   short columns get full priority for line space. */
.cell-nowrap { white-space:nowrap; }

/* Cells whose contents have no whitespace but can be very long — emails,
   phone numbers, tax IDs. `break-word` only breaks when wrapping is actually
   required (unlike `anywhere`, which breaks at every char and produces 2-3
   char lines). `min-width` gives the column a readable floor so other
   wider columns can't squeeze it down to a couple characters per line. */
.cell-break {
  overflow-wrap: break-word;
  min-width: 9em;
}

/* Wide free-text cell (used for the deals table "Interaction" column showing
   the latest interaction comment). Bounded width so it doesn't dominate the
   row; the inner div clamps to 3 lines with an ellipsis. Newlines in the
   comment are preserved (and count toward the 3-line limit). */
.cell-comment { max-width: 640px; }
.cell-comment > div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  overflow-wrap: anywhere;
}