/* ─────────────────────────────────────────────────────────────────────────
   Abakos Admin — Design System v3
   Enterprise calm. References: Linear typographic rigor, HubSpot Service
   Hub IA, Pipedrive 2024 pipeline-first density, Notion table legibility.
   Light default + dark toggle. See layout.js for the theme-toggle script.

   v3 shifts away from the v2 "HubSpot-warm × Linear-violet" toward a
   quieter, more enterprise feel: cooler tinted neutrals (was warm stone),
   softer shadows tinted toward bg (not pure black), larger base radius
   (8px not 6px), gentler focus rings, and more restrained accent use
   (reserved for active state + primary actions + emphasis, not chrome).
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Light theme tokens ───────────────────────────────────────────────── */
:root,
:root[data-theme="light"]{
  /* Surfaces — cool, slightly indigo-tinted neutrals (was warm stone).
     The tint is 0.5–1% chroma toward the accent so the whole canvas
     reads as a cohesive system, not a beige template. */
  --bg:            #F7F8FA;   /* canvas */
  --surface:       #FFFFFF;   /* cards, modals */
  --surface-2:     #F2F3F6;   /* recessed surfaces, table headers, inputs */
  --surface-3:     #E9EBEF;   /* deepest recess */

  /* Borders — hairlines, less visible than v2 */
  --border:        #E4E6EB;   /* default 1px */
  --border-strong: #D1D5DB;   /* dividers, inputs at rest */
  --border-soft:   #EEF0F4;   /* row separators */

  /* Text — strong at top, falls off quickly */
  --text:          #15171C;   /* primary */
  --text-secondary:#4A4F5A;
  --text-tertiary: #7B8090;
  --text-muted:    #A5AAB5;

  /* Accent — Linear indigo, used sparingly */
  --accent:        #635BFF;
  --accent-hover:  #524BE8;
  --accent-active: #3E37C9;
  --accent-soft:   #EFF0FF;   /* hover bg, soft fills */
  --accent-soft-2: #E0E2FF;   /* selected nav, active chips */
  --on-accent:     #FFFFFF;

  /* Semantic */
  --pos:           #16A34A;
  --pos-soft:      #E8F6EE;
  --neg:           #DC2626;
  --neg-soft:      #FCEAEA;
  --warn:          #B45309;
  --warn-soft:     #FBF1DC;
  --info:          #0369A1;
  --info-soft:     #E3F0F9;

  /* Status pills — softer surrounds, calmer dot colors */
  --st-new:        #6B7280;
  --st-new-soft:   #F1F2F5;
  --st-contacted:  #2563EB;
  --st-contacted-soft: #E5EDFB;
  --st-qualified:  #7C3AED;
  --st-qualified-soft: #EFEAFB;
  --st-won:        #16A34A;
  --st-won-soft:   #E8F6EE;
  --st-lost:       #6B7280;
  --st-lost-soft:  #F1F2F5;

  /* Shadows — tinted toward background (warm-cool grey), barely there.
     Most cards should rely on border alone; shadow is reserved for
     elevated surfaces (modals, popovers, hover). */
  --shadow-xs: 0 1px 0 rgba(20, 22, 28, 0.03);
  --shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow:    0 1px 3px rgba(20, 22, 28, 0.04), 0 1px 2px rgba(20, 22, 28, 0.03);
  --shadow-md: 0 4px 10px rgba(20, 22, 28, 0.05), 0 1px 3px rgba(20, 22, 28, 0.03);
  --shadow-lg: 0 12px 28px rgba(20, 22, 28, 0.07), 0 4px 10px rgba(20, 22, 28, 0.04);
  --shadow-focus: 0 0 0 3px rgba(99, 91, 255, 0.13);

  /* Radii — gentler default (8px > 6px) so cards feel softer */
  --r-sm:   4px;
  --r:      8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 999px;

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fast:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur:        180ms;
  --dur-slow:   320ms;

  --font-sans: 'General Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'General Sans', system-ui, sans-serif;

  /* Legacy aliases — existing views still reference these. */
  --bg-0: var(--bg);
  --bg-1: var(--surface);
  --bg-2: var(--surface-2);
  --text-pri: var(--text);
  --text-sec: var(--text-secondary);
  --text-tert: var(--text-tertiary);
}

/* ── Dark theme tokens ────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  /* Surfaces — cool, near-black with a hint of indigo */
  --bg:            #0C0D10;
  --surface:       #16171B;
  --surface-2:     #1F2026;
  --surface-3:     #292A31;

  --border:        #25272D;
  --border-strong: #353841;
  --border-soft:   #1B1C21;

  --text:          #F4F4F6;
  --text-secondary:#A4A8B3;
  --text-tertiary: #6E7280;
  --text-muted:    #4E5159;

  --accent:        #8B85FF;
  --accent-hover:  #9F99FF;
  --accent-active: #BAB5FF;
  --accent-soft:   rgba(139, 133, 255, 0.10);
  --accent-soft-2: rgba(139, 133, 255, 0.18);
  --on-accent:     #0C0D10;

  --pos:           #4ADE80;
  --pos-soft:      rgba(74, 222, 128, 0.12);
  --neg:           #F87171;
  --neg-soft:      rgba(248, 113, 113, 0.13);
  --warn:          #FBBF24;
  --warn-soft:     rgba(251, 191, 36, 0.13);
  --info:          #38BDF8;
  --info-soft:     rgba(56, 189, 248, 0.13);

  --st-new:        #9CA3AF;
  --st-new-soft:   rgba(156, 163, 175, 0.14);
  --st-contacted:  #60A5FA;
  --st-contacted-soft: rgba(96, 165, 250, 0.14);
  --st-qualified:  #A78BFA;
  --st-qualified-soft: rgba(167, 139, 250, 0.14);
  --st-won:        #4ADE80;
  --st-won-soft:   rgba(74, 222, 128, 0.14);
  --st-lost:       #71717A;
  --st-lost-soft:  rgba(113, 113, 122, 0.14);

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5),  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6),  0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(139, 133, 255, 0.20);
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{height:100%;color-scheme: light dark;}
body{
  font-family:var(--font-sans);
  font-feature-settings: 'cv11' on, 'ss01' on, 'ss02' on;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:var(--accent);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;color:inherit}
::selection{background:var(--accent-soft-2);color:var(--text)}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  letter-spacing:-0.011em;
  color:var(--text);
  margin:0 0 12px;
  line-height:1.25;
  font-weight:600;
}
h1{font-size:26px;letter-spacing:-0.02em}
h2{font-size:18px;letter-spacing:-0.012em}
h3{font-size:15px;letter-spacing:-0.005em}
p{margin:0 0 12px}

.section-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--text-tertiary);
  text-transform:uppercase;
  margin-bottom:10px;
  font-weight:500;
}

/* ── Top nav ──────────────────────────────────────────────────────────── */
.topnav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:30;
  /* No shadow — the hairline border carries the separation. */
}
.brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--text);
  display:inline-flex;align-items:center;gap:9px;
}
.brand:hover{text-decoration:none;color:var(--text)}
.brand::before{
  content:'';display:inline-block;width:7px;height:7px;
  border-radius:2px;
  background:var(--accent);
  /* No gradient, no glow — a single tinted square. */
}
.topnav nav{display:flex;gap:4px;align-items:center}
.topnav nav a{
  color:var(--text-secondary);
  font-size:13px;font-weight:500;
  padding:7px 12px;
  border-radius:var(--r);
  position:relative;
  transition:color var(--dur-fast) var(--ease-fast), background-color var(--dur-fast) var(--ease-fast);
}
.topnav nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.topnav nav a.active{color:var(--text);font-weight:600;background:var(--surface-2)}
.topnav nav a.active::after{
  /* Quiet 2px violet keyline below the active label. */
  content:'';position:absolute;left:12px;right:12px;bottom:-13px;
  height:2px;background:var(--accent);border-radius:2px 2px 0 0;
}
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;margin-left:4px;
  border-radius:999px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  background:var(--surface-2);color:var(--text-secondary);
  border:1px solid var(--border);
}
.nav-badge--alert{background:var(--accent);color:var(--on-accent);border-color:transparent}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:var(--r);
  color:var(--text-secondary);
  margin-right:4px;
  transition:background .12s ease, color .12s ease;
}
.theme-toggle:hover{background:var(--surface-2);color:var(--text)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle svg.theme-toggle__sun{display:block}
.theme-toggle svg.theme-toggle__moon{display:none}
:root[data-theme="dark"] .theme-toggle svg.theme-toggle__sun{display:none}
:root[data-theme="dark"] .theme-toggle svg.theme-toggle__moon{display:block}

.user-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;
  border-radius:var(--r-full);
  color:var(--text);font-weight:500;font-size:13px;
  transition:background .12s ease;
}
.user-chip:hover{background:var(--surface-2);text-decoration:none;color:var(--text)}
.user-chip__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent-soft-2);
  color:var(--accent-active);
  font-size:11px;font-weight:600;letter-spacing:.02em;
}
:root[data-theme="dark"] .user-chip__avatar{
  background:var(--accent-soft-2);color:var(--accent);
}

/* Logout button next to user chip */
.topnav nav form.inline{display:inline}

/* ── Main content ─────────────────────────────────────────────────────── */
main{max-width:1300px;padding:24px 28px 80px;margin:0 auto}

/* ── Tables ───────────────────────────────────────────────────────────── */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  /* No shadow — the hairline border carries the structure. */
}
th,td{padding:13px 16px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:middle;font-size:13px}
tbody tr:last-child td{border-bottom:0}
th{
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.10em;
  color:var(--text-tertiary);text-transform:uppercase;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  padding:11px 16px;
}
th a{color:inherit;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
th a:hover{color:var(--text-secondary)}
th .sort-indicator{font-size:10px;color:var(--accent)}
tr.row-link{cursor:pointer;transition:background var(--dur-fast) var(--ease-fast)}
tr.row-link:hover td{background:var(--surface-2)}
td a{color:var(--text);font-weight:500}
td a:hover{color:var(--accent)}

/* ── Pills / status chips ─────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px 3px 8px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:500;letter-spacing:.005em;
  text-transform:capitalize;white-space:nowrap;
  background:var(--st-new-soft);color:var(--st-new);
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill-new{background:var(--st-new-soft);color:var(--st-new)}
.pill-contacted{background:var(--st-contacted-soft);color:var(--st-contacted)}
.pill-qualified{background:var(--st-qualified-soft);color:var(--st-qualified)}
.pill-won{background:var(--st-won-soft);color:var(--st-won)}
.pill-lost{background:var(--st-lost-soft);color:var(--st-lost)}

.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px 3px 8px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:500;text-transform:capitalize;
  letter-spacing:.005em;vertical-align:middle;margin-left:10px;
}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.status-pill--new{background:var(--st-new-soft);color:var(--st-new)}
.status-pill--contacted{background:var(--st-contacted-soft);color:var(--st-contacted)}
.status-pill--qualified{background:var(--st-qualified-soft);color:var(--st-qualified)}
.status-pill--won{background:var(--st-won-soft);color:var(--st-won)}
.status-pill--lost{background:var(--st-lost-soft);color:var(--st-lost)}

.inline-status{position:relative;display:inline-block;vertical-align:middle}
.inline-status .pill{cursor:pointer;border:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-fast), background var(--dur-fast) var(--ease-fast)}
.inline-status .pill:hover{border-color:var(--border-strong);background:var(--surface-2)}
.inline-status__select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.inline-status--editing .inline-status__select{opacity:1;z-index:1}

/* ── Forms ────────────────────────────────────────────────────────────── */
label{
  display:block;
  font-size:12px;font-weight:500;
  color:var(--text-secondary);
  letter-spacing:.005em;
  margin:14px 0 6px;
  text-transform:none;
}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=search],input[type=date],input[type=number],select,textarea{
  width:100%;
  padding:10px 12px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-size:13.5px;font-family:var(--font-sans);
  border-radius:var(--r);
  transition:border-color var(--dur-fast) var(--ease-fast), box-shadow var(--dur-fast) var(--ease-fast);
}
input::placeholder,textarea::placeholder{color:var(--text-tertiary);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--text-tertiary)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
textarea{resize:vertical;min-height:88px;line-height:1.55}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8480' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A8A29E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
input[type=file]{font-size:13px;color:var(--text-secondary);padding:8px;border-radius:var(--r);background:var(--surface-2)}
input[type=file]::file-selector-button{
  padding:6px 12px;background:var(--surface);
  border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:12px;font-weight:500;
  border-radius:var(--r);cursor:pointer;margin-right:10px;
  transition:background .12s ease;
}
input[type=file]::file-selector-button:hover{background:var(--surface-2)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;
  font-size:13px;font-weight:500;
  letter-spacing:-0.003em;
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  border-radius:var(--r);
  transition:background var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), box-shadow var(--dur-fast) var(--ease-fast);
  text-decoration:none;
  /* No shadow on rest — keeps the primary action calm. Hover lifts. */
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);text-decoration:none;box-shadow:var(--shadow-sm)}
.btn:active{background:var(--accent-active);border-color:var(--accent-active);box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

.btn-ghost{
  background:var(--surface);color:var(--text);
  border-color:var(--border-strong);
  box-shadow:none;
}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong);box-shadow:none}

.btn-danger{
  background:var(--surface);color:var(--neg);border-color:var(--neg);
  box-shadow:none;
}
.btn-danger:hover{background:var(--neg);color:#fff;border-color:var(--neg);box-shadow:none}

button.link,a.link{
  background:none;border:0;
  color:var(--text-secondary);
  font-size:13px;font-weight:500;padding:0;
  transition:color var(--dur-fast) var(--ease-fast);
}
button.link:hover,a.link:hover{color:var(--accent);text-decoration:none}
.link--danger{color:var(--neg)}
.link--danger:hover{color:var(--neg)}

/* ── Alerts ───────────────────────────────────────────────────────────── */
.error,.success{
  padding:11px 14px;margin:12px 0;
  border-radius:var(--r);font-size:13px;
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid;
}
.error{background:var(--neg-soft);color:var(--neg);border-color:color-mix(in oklch, var(--neg) 18%, transparent)}
.success{background:var(--pos-soft);color:var(--pos);border-color:color-mix(in oklch, var(--pos) 18%, transparent)}
.error strong,.success strong{font-weight:600}

/* ── Back link ────────────────────────────────────────────────────────── */
.back{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:500;
  color:var(--text-secondary);
  margin-bottom:14px;
  transition:color .12s ease;
}
.back:hover{color:var(--accent);text-decoration:none}

/* ── Cards & utility ──────────────────────────────────────────────────── */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px 22px;
  /* No shadow on rest. Cards rely on border + bg lift. Shadow is for
     hover/focus or elevated surfaces (modals, popovers). */
}
.muted{color:var(--text-secondary);font-size:12px}
.spacer{flex:1}
.section-tag + h1,.section-tag + h2{margin-top:0}

/* ── Companies list stats / filters ──────────────────────────────────── */
.stat-strip,.stat-bar{
  display:grid;grid-template-columns:repeat(6, 1fr);gap:10px;
  margin:18px 0 28px;
}
.stat-pill{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  transition:border-color var(--dur-fast) var(--ease-fast), background var(--dur-fast) var(--ease-fast);
}
.stat-pill:hover{border-color:var(--border-strong);background:var(--surface)}
.stat-pill__num{
  display:block;font-family:var(--font-display);
  font-size:22px;font-weight:600;letter-spacing:-0.02em;
  color:var(--text);line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.stat-pill__label{
  display:block;margin-top:6px;
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.10em;
  color:var(--text-tertiary);text-transform:uppercase;
}
.stat-pill--active{border-color:var(--accent);background:var(--accent-soft)}
.stat-pill--active .stat-pill__num{color:var(--accent-active)}
:root[data-theme="dark"] .stat-pill--active .stat-pill__num{color:var(--accent)}

.toolbar,.filter-bar{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  display:grid;grid-template-columns:repeat(3, 1fr);gap:14px 18px;
  margin-bottom:18px;
}
.toolbar label,.filter-bar label,.filter-label{
  display:block;
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--text-tertiary);font-weight:500;
}
.filter-group{display:flex;flex-direction:column}
.filter-actions{display:flex;gap:8px;align-items:center;margin:0 0 18px;flex-wrap:wrap}
.filter-actions .spacer{flex:1}

.multi-count{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft-2);color:var(--accent-active);
  font-size:10px;font-weight:600;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;margin-left:6px;
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
}
:root[data-theme="dark"] .multi-count{color:var(--accent)}
.filter-multi{position:relative}

.row-chip{
  display:inline-flex;align-items:center;
  padding:2px 8px;background:var(--surface-2);color:var(--text-secondary);
  border-radius:var(--r-sm);font-size:11px;font-weight:500;white-space:nowrap;
}

.csv-toggle{margin:0 0 12px}
.csv-toggle summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:12px;padding:6px 10px;border-radius:var(--r);transition:background .12s ease;list-style:none}
.csv-toggle summary::-webkit-details-marker{display:none}
.csv-toggle summary::before{content:'▸';transition:transform .12s ease;color:var(--text-tertiary)}
.csv-toggle[open] summary::before{transform:rotate(90deg)}
.csv-toggle summary:hover{background:var(--surface-2);color:var(--text)}
.csv-panel{margin-top:10px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md)}

.bulk-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:10px 14px;
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);z-index:40;
  /* JS adds .bulk-bar--visible when 1+ row is selected */
}
.bulk-bar.bulk-bar--visible{display:flex}
.bulk-bar__count{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-secondary);text-transform:uppercase}

.pagination{display:flex;gap:4px;align-items:center;margin-top:18px;justify-content:flex-end}
.pagination a,.pagination span.page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 10px;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast);
}
.pagination a:hover{background:var(--surface-2);color:var(--text);text-decoration:none;border-color:var(--border-strong)}
.pagination .current,.pagination span.page-btn.current{background:var(--accent-soft);color:var(--accent-active);border-color:var(--accent-soft-2);font-weight:600}
:root[data-theme="dark"] .pagination .current,
:root[data-theme="dark"] .pagination span.page-btn.current{color:var(--accent)}
.pagination .disabled{opacity:.4;pointer-events:none}

/* ── Company detail ──────────────────────────────────────────────────── */
.identity-strip{
  display:flex;flex-wrap:wrap;gap:24px;
  font-size:12px;color:var(--text-tertiary);
  margin:10px 0 20px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.identity-strip strong{
  display:block;font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-tertiary);margin-bottom:3px;
}
.identity-strip .strip-val{color:var(--text);font-weight:500;font-family:var(--font-mono);font-size:12px}

.facts-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
  margin:20px 0 28px;
}
.fact-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.fact-block__head{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;color:var(--text-tertiary);
  text-transform:uppercase;font-weight:500;
  margin:0;padding-bottom:8px;border-bottom:1px solid var(--border-soft);
}
.fact-block__body{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.fact-block__body dt{color:var(--text-tertiary);font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;padding-top:3px}
.fact-block__body dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.fact-block__empty{font-size:12px;color:var(--text-muted);font-style:italic}
.fact-block__address{white-space:pre-line;font-size:13px;color:var(--text)}
.fact-block__amount{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.fact-block__amount-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.10em;font-weight:500}
.fact-block__bizstatus{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.10em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full);font-weight:600}
.fact-block__bizstatus--operational{background:var(--pos-soft);color:var(--pos)}
.fact-block__bizstatus--closed{background:var(--neg-soft);color:var(--neg)}

.fact-chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);
  font-size:9.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  padding:2px 7px;
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-tertiary);
  margin-left:8px;vertical-align:middle;
}
.fact-chip--places{background:var(--warn-soft);color:var(--warn)}
.fact-chip--gemini{background:var(--st-qualified-soft);color:var(--st-qualified)}
.fact-chip--manual{background:var(--st-contacted-soft);color:var(--st-contacted)}
.fact-chip--neg{background:var(--neg-soft);color:var(--neg)}
.fact-chip--warn{background:var(--warn-soft);color:var(--warn)}

.split{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;margin-top:8px}
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:18px}
  .facts-grid{grid-template-columns:repeat(2, 1fr)}
  .stat-strip{grid-template-columns:repeat(3, 1fr)}
  .dash-kpis{grid-template-columns:repeat(2, 1fr)}
}

.research-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px 18px;margin-top:20px;
}
.research-section__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.research-section--empty{background:var(--surface-2);border-color:var(--border-soft)}

.contacts-section{margin-top:20px}
.contacts-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.contact-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:10px;
  transition:border-color var(--dur-fast) var(--ease-fast), background var(--dur-fast) var(--ease-fast);
}
.contact-card:hover{border-color:var(--border-strong);background:var(--surface)}
.contact-card--primary{
  border-color:var(--accent-soft-2);
  background:linear-gradient(0deg, var(--accent-soft) 0%, var(--accent-soft) 100%), var(--surface);
}
:root[data-theme="dark"] .contact-card--primary{
  background:var(--accent-soft);
}
.contact-card--new{border-style:dashed;background:var(--surface-2);display:none}
.contact-card--new.open{display:block}
.contact-card__head{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.contact-card__name{font-weight:600;font-size:14px;color:var(--text)}
.contact-card__title{font-size:12px;color:var(--text-tertiary);font-style:italic;margin-bottom:6px}
.contact-card__fields{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.contact-card__fields dt{color:var(--text-tertiary);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding-top:3px}
.contact-card__fields dd{margin:0;color:var(--text)}
.contact-card__actions{margin-top:10px;display:flex;gap:12px;align-items:center}
.contact-card__edit{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.contact-card__edit.open{display:block}
.contact-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.contact-edit-grid .full{grid-column:1/-1}

.contact-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);
  font-size:9.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-tertiary);
}
.contact-badge--primary{background:var(--accent-soft-2);color:var(--accent-active)}
:root[data-theme="dark"] .contact-badge--primary{color:var(--accent)}
.contact-badge--enriched{background:var(--accent-soft);color:var(--accent)}

.dial-btn,.email-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r);
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border-soft);
  font-size:12.5px;font-weight:500;font-family:var(--font-mono);
  transition:background var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast);
}
.dial-btn:hover,.email-btn:hover{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent-active)}
:root[data-theme="dark"] .dial-btn:hover,
:root[data-theme="dark"] .email-btn:hover{color:var(--accent)}
.email-btn{font-family:var(--font-sans);font-size:12px}

.note-card{
  background:var(--surface);border:1px solid var(--border);
  padding:12px 14px;margin-bottom:8px;border-radius:var(--r-md);
  font-size:13px;line-height:1.55;
}
.note-card .meta{font-size:11px;color:var(--text-tertiary);margin-bottom:5px}

.company-task{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin-bottom:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);font-size:13px;
  transition:border-color var(--dur-fast) var(--ease-fast);
}
.company-task:hover{border-color:var(--border-strong)}
.company-task--done{color:var(--text-tertiary);text-decoration:line-through;background:var(--surface-2)}

/* The task checkbox itself — works in any context (.company-task on the
   company detail page, in a table cell on /admin/tasks). */
.task-checkbox{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  border-radius:4px;
  color:var(--accent);
  font-size:12px;font-weight:700;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
  padding:0;
  flex:0 0 18px;
}
.task-checkbox:hover{border-color:var(--accent)}
.company-task--done .task-checkbox,
.task-row--done .task-checkbox{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}

/* Completed-row strikethrough + dim on the /admin/tasks table */
.task-row--done td:not(:first-child):not(:last-child){
  color:var(--text-tertiary);
  text-decoration:line-through;
  text-decoration-color:var(--text-muted);
}
.task-row--done a{color:var(--text-tertiary)}

/* Due-date label (today, future) + overdue (red) variants */
.task-due{
  display:inline-flex;align-items:center;
  font-size:12px;color:var(--text-secondary);
  padding:2px 8px;border-radius:var(--r-sm);
  background:var(--surface-2);
}
.task-due--overdue{background:var(--neg-soft);color:var(--neg);font-weight:500}

/* ── Calls section + audio card ──────────────────────────────────────── */
.calls-region{display:flex;flex-direction:column;gap:8px}
.call-card{background:var(--surface);border:1px solid var(--border);padding:12px 14px;border-radius:var(--r-md);box-shadow:var(--shadow-xs)}
.call-card__head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.call-card__when{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.call-card__dur{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.call-card__status{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-full);margin-left:auto;font-weight:600;background:var(--surface-2);color:var(--text-secondary)}
.call-card__status--completed{background:var(--pos-soft);color:var(--pos)}
.call-card__status--failed,.call-card__status--no-answer,.call-card__status--busy{background:var(--neg-soft);color:var(--neg)}
.call-card__status--ringing,.call-card__status--answered{background:var(--warn-soft);color:var(--warn)}
.call-card__meta{font-size:12px;color:var(--text-tertiary);margin-bottom:6px}
.call-card__summary{font-size:13px;color:var(--text);line-height:1.55;padding:10px 12px;background:var(--accent-soft);border-left:3px solid var(--accent);margin:6px 0 8px;border-radius:0 var(--r) var(--r) 0}
.call-card__transcript{margin-top:6px}
.call-card__transcript summary{cursor:pointer;font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);padding:4px 0}
.call-card__transcript pre{font-family:var(--font-mono);font-size:11.5px;line-height:1.55;color:var(--text-secondary);background:var(--surface-2);padding:10px 12px;margin-top:6px;white-space:pre-wrap;word-wrap:break-word;border:1px solid var(--border);border-radius:var(--r);max-height:320px;overflow:auto}
.call-card__audio{display:block;width:100%;margin-top:10px;height:36px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}

/* Telnyx in-call strip — fixed to the bottom-center of the viewport when a
   call is active. Built dynamically by public/admin-calls.js. Slides up
   from -100px → 0 when .call-strip--visible is applied. */
.call-strip{
  position:fixed;
  bottom:-120px;left:50%;transform:translateX(-50%);
  min-width:520px;max-width:calc(100vw - 32px);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  font-size:13px;
  z-index:1000;
  transition:bottom .25s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-lg);
}
.call-strip--visible{bottom:0}
.call-strip__indicator{
  width:9px;height:9px;border-radius:50%;
  background:var(--pos);
  box-shadow:0 0 0 4px rgba(22,163,74,.18);
  flex:0 0 auto;
  animation:dial-pulse 1.4s ease-in-out infinite;
}
@keyframes dial-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}
.call-strip__info{flex:1;min-width:0}
.call-strip__to{
  color:var(--text);
  font-size:14px;font-weight:600;
  letter-spacing:-0.002em;
  font-family:var(--font-mono);
  font-feature-settings:'tnum' on;
}
.call-strip__state{
  color:var(--text-tertiary);
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  margin-top:2px;
}
.call-strip__timer{
  color:var(--text);
  font-size:17px;font-family:var(--font-mono);
  font-feature-settings:'tnum' on;
  letter-spacing:.02em;
  min-width:64px;text-align:center;
  padding:0 6px;
}
.call-strip__btn{
  background:var(--surface);
  border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:11.5px;font-weight:500;
  padding:6px 14px;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.call-strip__btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.call-strip__btn--hangup{border-color:var(--neg);color:var(--neg);background:var(--surface)}
.call-strip__btn--hangup:hover{background:var(--neg);color:var(--on-accent);border-color:var(--neg)}
.call-strip__btn--muted{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.call-strip__btn--muted:hover{background:var(--warn);color:var(--on-accent);border-color:var(--warn)}

/* Mic-picker modal — shown the first time a user dials, or via the
   call-strip "Mic" button when they want to switch input device. */
.mic-picker-overlay{
  position:fixed;inset:0;
  background:rgba(20,22,28,.48);
  backdrop-filter:blur(2px);
  z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.mic-picker{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 28px;
  max-width:440px;width:100%;
  box-shadow:var(--shadow-lg);
}
.mic-picker__title{
  margin:0 0 6px;
  font-size:15px;font-weight:600;
  color:var(--text);
}
.mic-picker__sub{
  margin:0 0 18px;
  font-size:12.5px;color:var(--text-secondary);
}
.mic-picker__list{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  margin-bottom:16px;
  overflow:hidden;
}
.mic-picker__row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface);cursor:pointer;
  font-size:13px;color:var(--text);
  transition:background .08s ease;
}
.mic-picker__row + .mic-picker__row{border-top:1px solid var(--border-soft)}
.mic-picker__row:hover{background:var(--accent-soft)}
.mic-picker__row input[type=radio]{margin:0;accent-color:var(--accent)}
.mic-picker__label{flex:1;word-break:break-word;min-width:0}
.mic-picker__actions{display:flex;gap:10px;justify-content:flex-end}

/* The hidden <audio id="call-remote-audio"> element that the SDK pipes the
   far-end stream into. Hide it; we only need the audio output. */
#call-remote-audio{display:none}

/* ── Emails / threads / inbox ───────────────────────────────────────── */
.email-threads{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.email-thread{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-xs);transition:border-color .12s ease}
.email-thread:hover{border-color:var(--border-strong)}
.email-thread[open]{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.email-thread__head{display:flex;align-items:baseline;gap:14px;padding:11px 14px;cursor:pointer;list-style:none}
.email-thread__head::-webkit-details-marker{display:none}
.email-thread__head::before{
  content:'';display:inline-block;width:8px;height:8px;
  border:solid var(--text-tertiary);border-width:0 1.5px 1.5px 0;
  transform:rotate(-45deg);transition:transform .12s ease;
  flex:0 0 8px;margin-top:2px;
}
.email-thread[open]>.email-thread__head::before{transform:rotate(45deg)}
.email-thread__subj{font-size:14px;color:var(--text);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.email-thread__meta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.email-thread__count{font-size:11px;color:var(--text-tertiary);font-weight:500}
.email-thread__when{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.email-thread__unread{font-size:9px;font-weight:600;letter-spacing:.08em;padding:2px 6px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);text-transform:uppercase}
.email-thread__body{padding:8px 14px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border-soft)}

.msg-card{background:var(--surface-2);border:1px solid var(--border);padding:12px 14px;border-radius:var(--r)}
.msg-card--out{border-left:3px solid var(--accent)}
.msg-card--in{border-left:3px solid var(--border-strong)}
.msg-card__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.msg-card__dir{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text-tertiary);text-transform:uppercase}
.msg-card--out .msg-card__dir{color:var(--accent)}
.msg-card__from{font-size:12px;color:var(--text);font-weight:500;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-card__when{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);flex:0 0 auto}
.msg-card__meta{font-size:11.5px;color:var(--text-tertiary);margin-bottom:8px}
.msg-card__body{font-size:13.5px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-wrap:break-word;max-height:420px;overflow:auto}
.thread-stream .msg-card__body{max-height:none;overflow:visible}

.msg-quoted{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.msg-quoted>summary{cursor:pointer;list-style:none;font-size:11px;color:var(--text-tertiary);padding:2px 0;font-weight:500}
.msg-quoted>summary::-webkit-details-marker{display:none}
.msg-quoted>summary::before{content:'+ ';color:var(--text-tertiary)}
.msg-quoted[open]>summary::before{content:'− '}
.msg-quoted>summary:hover{color:var(--accent)}
.msg-quoted__body{margin-top:8px;padding:8px 12px;background:var(--surface-3);border-left:2px solid var(--border-strong);color:var(--text-tertiary);font-size:12px;line-height:1.6;border-radius:0 var(--r) var(--r) 0}

.inbox-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.inbox-head h1{margin:0}
.inbox-head__alias{font-size:12.5px;color:var(--text-secondary);padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface)}
.inbox-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:0;text-decoration:none;color:var(--text);cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.inbox-row:first-of-type{border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md)}
.inbox-row:last-of-type{border-bottom-left-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
.inbox-row+.inbox-row{border-top:none}
.inbox-row:hover{background:var(--accent-soft);text-decoration:none;border-color:var(--border-strong)}
.inbox-row__company{flex:0 0 220px;font-size:11.5px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-row__company--orphan{color:var(--text-muted)}
.inbox-row__subj{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.inbox-row__snippet{color:var(--text-tertiary);margin-left:8px;font-size:12.5px;font-weight:400}
.inbox-row__count{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);flex:0 0 auto}
.inbox-row__unread{font-size:9px;font-weight:600;letter-spacing:.08em;padding:2px 7px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);flex:0 0 auto;text-transform:uppercase}
.inbox-row__when{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);flex:0 0 110px;text-align:right}
.inbox-empty{padding:36px 18px;text-align:center;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-md);color:var(--text-secondary)}
.inbox-empty strong{color:var(--text)}

.thread-stream{display:flex;flex-direction:column;gap:10px;margin:18px 0 24px}
.reply-form{
  background:var(--surface);border:1px solid var(--border);
  padding:18px 20px;margin-top:24px;
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);
}
.reply-form h2{margin:0 0 14px;font-size:15px;color:var(--text);font-weight:600}
.reply-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.reply-grid label{display:flex;flex-direction:column;gap:6px;margin:0}
.reply-grid label.full{grid-column:1/-1}
.reply-grid textarea{min-height:140px}

.email-thread__open{font-size:11px;font-weight:500;color:var(--text-tertiary);padding:2px 8px;border:1px solid var(--border);border-radius:var(--r-sm);text-decoration:none}
.email-thread__open:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}

.email-thread__reply{margin-top:10px;border-top:1px dashed var(--border)}
.email-thread__reply-toggle{cursor:pointer;list-style:none;padding:10px 4px;font-size:12px;color:var(--text-secondary);font-weight:500}
.email-thread__reply-toggle:hover{color:var(--accent)}
.email-thread__reply-toggle::-webkit-details-marker{display:none}
.email-thread__reply-toggle::before{content:'+ ';color:var(--text-tertiary)}
.email-thread__reply[open] .email-thread__reply-toggle::before{content:'− '}
.email-thread__reply .reply-form{margin-top:8px;background:transparent;border:none;padding:0;box-shadow:none}

.thread-company-chip{font-size:11px;font-weight:500;color:var(--text-secondary);padding:3px 10px;border:1px solid var(--border);border-radius:var(--r-full);text-decoration:none;background:var(--surface)}
.thread-company-chip:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}

.draft-hint{font-size:12px;font-weight:500;color:var(--text-secondary);padding:8px 12px;background:var(--accent-soft);border-radius:var(--r);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.draft-hint .link{font-size:12px;color:var(--text-secondary)}
.draft-hint .link:hover{color:var(--accent)}

.alias-sigs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.alias-sigs li{background:var(--surface);border:1px solid var(--border);padding:12px 14px;border-radius:var(--r);box-shadow:var(--shadow-xs)}
.alias-sigs__head{font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.alias-sigs__body{margin:0;font-family:var(--font-sans);font-size:13px;color:var(--text);white-space:pre-wrap;word-wrap:break-word;background:transparent;padding:0;border:0;line-height:1.6}

/* ── Kanban ──────────────────────────────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px;margin-top:16px;align-items:start}
.kanban-col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;min-height:200px}
.kanban-col__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.kanban-col__title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.kanban-col__count{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-weight:500}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;display:block;text-decoration:none;color:inherit;transition:border-color .12s ease, box-shadow .12s ease}
.kanban-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);text-decoration:none}
.kanban-card__name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.35}
.kanban-card__meta{font-size:11px;color:var(--text-tertiary);margin-bottom:4px;line-height:1.4}
.kanban-card__footer{display:flex;justify-content:space-between;font-size:11px;color:var(--text-tertiary);margin-top:6px}

/* ── Dashboard ───────────────────────────────────────────────────────── */
.dash-kpis{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px;margin:18px 0 28px}
.dash-kpi{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  transition:border-color var(--dur-fast) var(--ease-fast);
}
.dash-kpi:hover{border-color:var(--border-strong)}
.dash-kpi__num{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums}
.dash-kpi__label{display:block;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.10em;color:var(--text-tertiary);text-transform:uppercase;font-weight:500}
.dash-kpi__sub{display:block;margin-top:3px;font-size:11px;color:var(--text-tertiary)}
.dash-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px;margin-bottom:14px;
}
.dash-panel__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.dash-panel__head h2{margin:0;font-size:14px}
.dash-feed__company{color:var(--text-secondary);font-size:11.5px;text-decoration:none;font-family:var(--font-mono)}
.dash-feed__company:hover{color:var(--accent);text-decoration:none}
.dash-health__pct{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-top:8px}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:760px){
  main{padding:18px 14px 60px}
  .topnav{padding:10px 16px;flex-wrap:wrap;gap:6px}
  .topnav nav{gap:12px;font-size:12.5px}
  .stat-strip{grid-template-columns:repeat(2, 1fr)}
  .dash-kpis{grid-template-columns:repeat(2, 1fr)}
  .toolbar,.filter-bar{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr}
  .reply-grid{grid-template-columns:1fr}
  .inbox-row{flex-wrap:wrap;gap:8px}
  .inbox-row__company{flex:0 0 100%}
  .inbox-row__when{flex:0 0 auto;text-align:left}
  .kanban{grid-template-columns:1fr}
}

/* ── Multi-select dropdown (filter widgets on companies list) ────────── */
.msdd{position:relative;min-width:0}
.msdd__trigger{
  display:flex;align-items:center;gap:6px;
  width:100%;
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.msdd__trigger:hover{border-color:var(--border-strong)}
.msdd__trigger[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--shadow-focus)}
.msdd__trigger--active{border-color:var(--accent)}
.msdd__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:var(--text-secondary)}
.msdd__trigger--active .msdd__label{color:var(--text);font-weight:500}
.msdd__count{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft-2);color:var(--accent-active);
  font-size:10px;font-weight:600;
  padding:0 7px;height:18px;min-width:18px;
  border-radius:999px;margin-left:4px;
}
:root[data-theme="dark"] .msdd__count{color:var(--accent)}
.msdd__chev{font-size:10px;color:var(--text-tertiary);margin-left:auto}
.msdd__panel{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  z-index:20;
  overflow:hidden;
}
.msdd__panel[hidden]{display:none}
.msdd__search{
  width:100%;padding:9px 12px;
  background:var(--surface-2);
  border:0;border-bottom:1px solid var(--border);
  color:var(--text);font-size:13px;
  outline:none;border-radius:0;
}
.msdd__search::placeholder{color:var(--text-tertiary)}
.msdd__options{max-height:260px;overflow-y:auto;padding:4px 0}
.msdd__opt{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;
  cursor:pointer;font-size:13px;
  transition:background .08s ease;
}
.msdd__opt:hover{background:var(--surface-2)}
.msdd__opt input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--accent);
  flex:0 0 16px;
}
.msdd__opt-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.msdd__opt-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary)}
.msdd__empty{display:none;padding:14px 12px;font-size:12px;color:var(--text-tertiary);text-align:center}
.msdd__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px;border-top:1px solid var(--border-soft);
  font-size:11px;color:var(--text-tertiary);
}
.msdd__clear{color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;background:none;border:0;padding:0}
.msdd__clear:hover{color:var(--accent)}

/* ── Pagination — extra variants used by the view ────────────────────── */
.pagination .page-info{font-size:11px;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase;margin-right:auto;font-weight:500}
.pagination span.page-btn--current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pagination span.page-btn--disabled{color:var(--text-tertiary);background:var(--surface);cursor:not-allowed;opacity:.5}

/* ── ✨ enriched marker in companies list ──────────────────────────── */
.enriched-mark{font-size:12px;margin-left:6px;vertical-align:1px;opacity:.85;cursor:help;color:var(--accent)}

/* ── Company search autocomplete (companies list) ────────────────────── */
.company-search{position:relative}
.company-search-panel{
  position:absolute;
  top:calc(100% + 4px);left:0;right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  z-index:25;
  overflow:hidden;
  max-height:380px;overflow-y:auto;
  padding:4px 0;
}
.company-search-panel[hidden]{display:none}
.company-search-panel__row{
  display:flex;flex-direction:column;
  gap:3px;
  padding:8px 12px;
  text-decoration:none;
  color:var(--text);
  font-size:13px;
  border-left:2px solid transparent;
  cursor:pointer;
  transition:background .08s ease, border-color .08s ease;
}
.company-search-panel__row:hover,
.company-search-panel__row.is-active{
  background:var(--accent-soft);
  border-left-color:var(--accent);
  text-decoration:none;
}
.company-search-panel__name{font-weight:600;color:var(--text);line-height:1.3}
.company-search-panel__meta{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:11px;color:var(--text-tertiary);
}
.company-search-panel__pill{
  font-size:9.5px;font-weight:600;letter-spacing:.04em;
  padding:1px 7px;border-radius:var(--r-full);
  text-transform:capitalize;
  background:var(--st-new-soft);color:var(--st-new);
}
.company-search-panel__pill.pill-new{background:var(--st-new-soft);color:var(--st-new)}
.company-search-panel__pill.pill-contacted{background:var(--st-contacted-soft);color:var(--st-contacted)}
.company-search-panel__pill.pill-qualified{background:var(--st-qualified-soft);color:var(--st-qualified)}
.company-search-panel__pill.pill-won{background:var(--st-won-soft);color:var(--st-won)}
.company-search-panel__pill.pill-lost{background:var(--st-lost-soft);color:var(--st-lost)}
.company-search-panel__contact{color:var(--text-secondary)}
.company-search-panel__uei{font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary)}

/* ── Generic icon-only nav button (dialpad, future quick-actions) ─────── */
.nav-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:var(--r);
  color:var(--text-secondary);
  background:transparent;border:1px solid transparent;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.nav-icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.nav-icon-btn svg{width:17px;height:17px;display:block}

/* ── Dialpad modal ───────────────────────────────────────────────────── */
.dialpad-overlay{
  position:fixed;inset:0;
  background:rgba(20,22,28,.48);
  backdrop-filter:blur(2px);
  z-index:2500;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-fast);
}
.dialpad-overlay.is-visible{opacity:1}
.dialpad{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:336px;
  padding:20px 20px 18px;
  transform:translateY(8px);
  transition:transform var(--dur) var(--ease);
}
.dialpad-overlay.is-visible .dialpad{transform:translateY(0)}
.dialpad__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.dialpad__title{
  font-size:13px;font-weight:600;color:var(--text);
  letter-spacing:-0.005em;
}
.dialpad__close{
  width:24px;height:24px;border-radius:var(--r-sm);
  color:var(--text-tertiary);font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.dialpad__close:hover{background:var(--surface-2);color:var(--text)}
.dialpad__input-row{margin-bottom:14px}
.dialpad__input{
  width:100%;
  padding:12px 14px;
  font-size:20px;font-family:var(--font-mono);font-feature-settings:'tnum' on;
  letter-spacing:.02em;
  text-align:center;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--r);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.dialpad__input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
.dialpad__input::placeholder{color:var(--text-muted);font-size:14px;letter-spacing:0}
.dialpad__grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:14px;
}
.dialpad__key{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:13px 0 11px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-fast), border-color var(--dur-fast) var(--ease-fast), transform .04s ease;
}
.dialpad__key:hover{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.dialpad__key:active{background:var(--accent-soft-2);transform:scale(0.97)}
.dialpad__key-digit{font-size:22px;font-weight:500;color:var(--text);line-height:1;letter-spacing:-0.01em;font-family:var(--font-mono);font-feature-settings:'tnum' on}
.dialpad__key-letters{font-size:9.5px;font-weight:600;letter-spacing:.16em;color:var(--text-tertiary);margin-top:4px}
.dialpad__actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.dialpad__back{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 0;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r);color:var(--text-secondary);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.dialpad__back:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.dialpad__call{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 0;font-size:14px;font-weight:600;
  background:var(--pos);border:1px solid var(--pos);
  color:#fff;
  border-radius:var(--r);
  transition:background .12s ease, transform .04s ease;
}
.dialpad__call:hover{filter:brightness(0.95)}
.dialpad__call:active{transform:translateY(0.5px)}

/* ── Analytics (/admin/analytics) ───────────────────────────────────── */

/* Period chip row */
.period-bar{
  display:flex;flex-wrap:wrap;gap:4px;
  margin:8px 0 18px;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  width:fit-content;
}
.period-chip{
  display:inline-flex;align-items:center;
  padding:5px 12px;
  font-size:12.5px;font-weight:500;
  color:var(--text-secondary);
  text-decoration:none;
  border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-fast), color var(--dur-fast) var(--ease-fast);
}
.period-chip:hover{color:var(--text);background:var(--surface);text-decoration:none}
.period-chip.is-active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}
.period-chip.is-active:hover{background:var(--surface);color:var(--text)}
.custom-period{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  margin-bottom:14px;
}
.custom-period label{display:flex;flex-direction:column;gap:4px;margin:0}
.custom-period input[type=date]{width:auto}
.custom-period .btn{padding:9px 18px}

/* KPI strip — 4 large numbers + label + delta chip */
.kpi-strip{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
  margin:8px 0 18px;
}
.kpi{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px 14px;
  box-shadow:var(--shadow-sm);
}
.kpi__num{
  font-family:var(--font-display);
  font-size:28px;font-weight:600;
  letter-spacing:-0.02em;color:var(--text);
  line-height:1.1;
}
.kpi__label{
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--text-tertiary);text-transform:uppercase;
  margin-top:4px;
}
.kpi__delta{
  margin-top:10px;
  font-size:11.5px;
  display:flex;align-items:center;gap:6px;
}
.delta{
  display:inline-flex;align-items:center;gap:2px;
  font-weight:600;font-size:11px;letter-spacing:.02em;
  padding:1px 7px;border-radius:var(--r-full);
}
.delta--up{background:var(--pos-soft);color:var(--pos)}
.delta--down{background:var(--neg-soft);color:var(--neg)}
.delta--flat{background:var(--surface-2);color:var(--text-tertiary)}

/* Agent table */
.agent-cell{display:inline-flex;align-items:center;gap:10px}
.agent-cell__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-active) 100%);
  color:var(--on-accent);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' on}
th.num{text-align:right}

/* Status-transition funnel */
.funnel{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.funnel-row{
  display:grid;
  grid-template-columns:240px 1fr 50px;
  align-items:center;gap:14px;
  padding:6px 0;
  font-size:13px;
}
.funnel-row__label{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary)}
.funnel-row__arrow{color:var(--text-tertiary);font-family:var(--font-mono);font-size:12px}
.funnel-row__bar{
  position:relative;
  height:8px;
  background:var(--surface-2);
  border-radius:var(--r-full);
  overflow:hidden;
}
.funnel-row__fill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-active) 100%);
  border-radius:var(--r-full);
}
.funnel-row__count{text-align:right;font-family:var(--font-mono);font-feature-settings:'tnum' on;color:var(--text);font-weight:500}

@media (max-width:760px){
  .kpi-strip{grid-template-columns:repeat(2, 1fr)}
  .funnel-row{grid-template-columns:1fr 80px;gap:8px}
  .funnel-row__label{grid-column:1/-1;margin-bottom:4px}
}

/* ── Analytics: today + pipeline side-by-side ────────────────────────── */
.dash-grid{
  display:grid;grid-template-columns:1fr 2fr;gap:12px;
  margin-bottom:14px;
}
@media (max-width:880px){
  .dash-grid{grid-template-columns:1fr}
}

/* "Today" snapshot card — a tinted-accent surface that says "right now"
   without the brutalist gradient drench. The text uses the deep
   accent-active so contrast still pops. */
.today-card{
  background:var(--accent-soft);
  color:var(--accent-active);
  border:1px solid var(--accent-soft-2);
  border-radius:var(--r-md);
  padding:20px 22px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:170px;
}
:root[data-theme="dark"] .today-card{color:var(--accent)}
.today-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.today-card__title{
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  opacity:.85;
}
.today-card__date{font-size:12px;opacity:.75;color:var(--text-secondary)}
.today-card__metrics{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}
.today-card__num{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.today-card__label{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;opacity:.75;margin-top:4px;color:var(--text-secondary)}

/* Pipeline card */
.pipeline-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
}
.pipeline-card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.pipeline-card__head h2{margin:0;font-size:14px}
.pipeline-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding:10px 0 14px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:12px;
}
.pipeline-stats__num{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.02em;color:var(--text);line-height:1.1}
.pipeline-stats__unit{font-size:14px;color:var(--text-secondary);font-weight:500;margin-left:2px}
.pipeline-stats__label{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase;margin-top:4px}

/* Pipeline-by-stage bars */
.pipe{display:flex;flex-direction:column;gap:6px}
.pipe-row{
  display:grid;
  grid-template-columns:110px 1fr 50px;
  align-items:center;gap:14px;
  padding:4px 0;
  font-size:13px;
}
.pipe-row__label{display:inline-flex;align-items:center}
.pipe-row__bar{
  position:relative;height:8px;
  background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;
}
.pipe-row__fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:var(--r-full);
  background:var(--st-new);
}
.pipe-row__fill--new{background:var(--st-new)}
.pipe-row__fill--contacted{background:var(--st-contacted)}
.pipe-row__fill--qualified{background:var(--st-qualified)}
.pipe-row__fill--won{background:var(--st-won)}
.pipe-row__fill--lost{background:var(--st-lost)}
.pipe-row__count{
  text-align:right;
  font-family:var(--font-mono);font-feature-settings:'tnum' on;
  color:var(--text);font-weight:500;
}

/* ── Activity trend chart (SVG) ──────────────────────────────────────── */
.trend-chart{width:100%;height:auto;display:block;margin-top:12px}
.trend-bar__calls{fill:var(--accent)}
.trend-bar__emails{fill:var(--accent-soft-2)}
:root[data-theme="dark"] .trend-bar__emails{fill:rgba(139,133,255,0.42)}
.trend-bar:hover .trend-bar__calls{filter:brightness(1.1)}
.trend-bar:hover .trend-bar__emails{filter:brightness(1.1)}
.trend-label{font-size:9.5px;fill:var(--text-tertiary);font-family:var(--font-mono);text-anchor:middle}
.trend-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-tertiary);margin-left:10px}
.trend-legend__sw{display:inline-block;width:10px;height:10px;border-radius:2px}
.trend-legend__sw--calls{background:var(--accent)}
.trend-legend__sw--emails{background:var(--accent-soft-2)}
:root[data-theme="dark"] .trend-legend__sw--emails{background:rgba(139,133,255,0.42)}

/* ── Account watchlists (3-up row) ───────────────────────────────────── */
.watchlists{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;
  margin-bottom:14px;
}
@media (max-width:1100px){.watchlists{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.watchlists{grid-template-columns:1fr}}
.watchlist{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.watchlist__row{
  display:flex;flex-direction:column;gap:4px;
  padding:9px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--text);text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}
.watchlist__row:hover{background:var(--accent-soft);border-color:var(--accent);text-decoration:none;color:var(--text)}
.watchlist__name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.watchlist__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--text-tertiary)}
.watchlist__empty{padding:14px 8px;color:var(--text-tertiary);font-size:13px;font-style:italic;text-align:center}

/* ── Invite-link copy-fallback card on /admin/users ──────────────────── */
.invite-link-card{
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--r-md);
  padding:12px 14px;
  margin:12px 0 0;
}
.invite-link-card__head{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--accent-active);text-transform:uppercase;
  margin-bottom:6px;
}
.invite-link-card__url{
  display:block;
  font-family:var(--font-mono);font-size:12px;
  background:var(--surface);
  padding:8px 10px;
  border-radius:var(--r);
  word-break:break-all;
  user-select:all;
  color:var(--text);
  border:1px solid var(--border);
}
:root[data-theme="dark"] .invite-link-card__head{color:var(--accent-hover)}

/* Inline filter label inside a period-bar (e.g. "Agent" before the user chips) */
.filter-label-inline{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--text-tertiary);text-transform:uppercase;
  padding:0 10px 0 6px;border-right:1px solid var(--border);
  margin-right:4px;
}
.period-bar--users{margin-top:8px}

/* Selected agent row in the leaderboard */
.agent-row--selected td{background:var(--accent-soft) !important}
.agent-row--selected:hover td{background:var(--accent-soft-2) !important}

/* Accent variant of the row chip (used for the "filtered" indicator) */
.row-chip--accent{background:var(--accent);color:var(--on-accent);font-weight:600}

/* Analytics filter row — period chips + agent dropdown side-by-side */
.filter-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:8px 0 14px;
}
.filter-row .period-bar{margin:0}
.agent-filter{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:5px 8px 5px 12px;
  box-shadow:var(--shadow-xs);
}
.agent-filter__label{
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--text-tertiary);text-transform:uppercase;
  margin:0;
}
.agent-filter__select{
  width:auto;min-width:160px;
  padding:4px 28px 4px 8px;
  border:0;background-color:transparent;
  background-position:right 4px center;
  font-size:13px;font-weight:500;color:var(--text);
  border-radius:var(--r);
  cursor:pointer;
}
.agent-filter__select:focus{box-shadow:none;background-color:var(--surface-2);outline:none}
.agent-filter__select:hover{background-color:var(--surface-2)}

/* Email rendered as an in-app compose trigger (replaces the old mailto:
   anchor on contact cards + the Web facts card). Reads as a normal text
   link but hits the [data-email-to] handler so the in-app compose modal
   opens instead of the OS mail handler. */
.email-link{
  display:inline;
  padding:0;background:transparent;border:0;
  color:var(--accent);
  font:inherit;font-size:13px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:transparent;
  transition:color .12s ease, text-decoration-color .12s ease;
}
.email-link:hover{color:var(--accent-hover);text-decoration-color:currentColor}
.email-link:focus-visible{outline:none;color:var(--accent-hover);text-decoration-color:currentColor}

/* ── Email compose modal (legacy classes from admin-google.js) ───────── */
.email-modal-overlay{
  position:fixed;inset:0;
  background:rgba(20,22,28,.48);
  backdrop-filter:blur(2px);
  z-index:2500;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-fast);
}
.email-modal-overlay--visible{display:flex;opacity:1}
.email-modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:580px;
  padding:22px 24px 20px;
  transform:translateY(8px);
  transition:transform var(--dur) var(--ease);
}
.email-modal-overlay--visible .email-modal{transform:translateY(0)}
.email-modal__title{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;letter-spacing:-0.01em;
  color:var(--text);
  margin:0 0 16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-soft);
}
.email-modal__grid{display:flex;flex-direction:column;gap:0}
.email-modal__grid label{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 14px;
  font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--text-secondary);
  text-transform:none;
}
.email-modal__grid input,
.email-modal__grid select,
.email-modal__grid textarea{
  width:100%;
}
.email-modal__grid select:disabled{
  background:var(--surface-2);
  color:var(--text);
  cursor:not-allowed;
  /* Disabled From select reads as a locked-info chip, not a dead control. */
}
.email-modal__grid textarea{min-height:160px;font-family:var(--font-sans);line-height:1.55}
.email-modal__error{
  display:none;
  background:var(--neg-soft);color:var(--neg);
  padding:9px 12px;border-radius:var(--r);
  font-size:12.5px;font-weight:500;
  margin:0 0 12px;
}
.email-modal__error.is-visible{display:block}
.email-modal__actions{
  display:flex;gap:8px;justify-content:flex-end;align-items:center;
  margin-top:8px;padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.email-modal__actions .btn-cancel,
.email-modal__actions button:not(:first-child){
  background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);
  box-shadow:none;
}
.email-modal__actions button:not(:first-child):hover{background:var(--surface-2);border-color:var(--border-strong)}

/* Macro row inside the compose modal */
.email-modal__macro-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 6px;
  font-size:12px;font-weight:500;color:var(--text-secondary);
}
.email-modal__macro-manage{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.06em;
  color:var(--text-tertiary);text-decoration:none;
  text-transform:uppercase;
}
.email-modal__macro-manage:hover{color:var(--accent);text-decoration:none}
.email-modal__macro-row select{
  background-color:var(--accent-soft);
  border-color:var(--accent-soft-2);
  color:var(--text);
}

/* Lock indicator on /admin/account when an admin has assigned a hard alias */
.assigned-alias-lock{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 12px;
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:13px;
}
.assigned-alias-lock__email{
  font-family:var(--font-mono);font-weight:600;color:var(--accent-active);
}
:root[data-theme="dark"] .assigned-alias-lock__email{color:var(--accent-hover)}