/* ============================================================================
   Design tokens. Change once here; everything cascades.
   The product name is just a CSS var so we can rebrand without code hunting.
   ============================================================================ */

:root {
  /* Surfaces */
  --color-bg:            #f6f7f9;
  --color-surface:       #ffffff;
  --color-surface-alt:   #fafbfc;
  --color-border:        #e3e6ea;
  --color-border-strong: #c9ced6;

  /* Text */
  --color-text:          #1a1d20;
  --color-text-muted:    #6b7280;
  --color-text-subtle:   #9ca3af;

  /* Action */
  --color-primary:        #1f2937;
  --color-primary-hover:  #111827;
  --color-primary-active: #0b1018;
  --color-primary-on:     #ffffff;

  /* Status */
  --color-error:    #b91c1c;
  --color-error-bg: #fef2f2;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius / shadows */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);

  /* Layout */
  --content-max: 1200px;
}

/* ============================================================================
   Reset + base
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
input  { font: inherit; }
a      { color: inherit; }

/* Browsers ship `[hidden] { display: none }` as a user-agent rule, but
   any class we set `display: flex/grid` on (e.g. .field) overrides it.
   Bump the [hidden] rule to !important so the attribute always wins. */
[hidden] { display: none !important; }

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Login page
   ============================================================================ */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-10) var(--space-8) var(--space-8);
}

.login-brand {
  text-align: center;
  margin-bottom: var(--space-8);
}

.login-brand__wordmark {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.login-brand__subtitle {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field__input {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
}

/* Force caps display as the user types (e.g. the client Name field).
   Visual only — the value is upper-cased authoritatively on the server. */
.field__input--upper {
  text-transform: uppercase;
}

.field__input:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  user-select: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-on);
  border-color: var(--color-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--color-primary-active);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-alt);
}

.btn--block {
  width: 100%;
}

.btn--danger {
  color: var(--color-error);
  border-color: transparent;
}

.btn--danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  border-color: #fecaca;
  color: var(--color-error);
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid transparent;
}

.alert--error {
  color: var(--color-error);
  background: var(--color-error-bg);
  border-color: #fecaca;
}

.alert[hidden] { display: none; }

.login-footer {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-text-subtle);
  font-size: 12px;
}

/* ============================================================================
   Application shell — persistent SPA layout
   Grid: topbar full-width on top, sidebar on the left, content fills the rest.
   ============================================================================ */

.shell {
  display: grid;
  grid-template-areas:
    "topbar  topbar"
    "sidebar content";
  grid-template-rows: auto 1fr;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* Hide the shell until /me resolves so users bounced to /login don't see
   a flash of authenticated chrome. */
[data-auth-state="pending"] { visibility: hidden; }

/* ----- Topbar ----- */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 1;
}

.topbar__brand {
  font-size: 15px;
  font-weight: 600;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 13px;
}

.topbar__user-name {
  color: var(--color-text);
}

/* ----- Sidebar ----- */

.sidebar {
  grid-area: sidebar;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__item {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 100ms ease, color 100ms ease;
}

.nav__item:hover {
  background: var(--color-surface-alt);
}

.nav__item--active,
.nav__item--active:hover {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.nav__item--nested {
  padding-left: var(--space-6);
}

.nav__group {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav__group-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.nav__group-chevron {
  transition: transform 120ms ease;
  font-size: 12px;
}

.nav__group--collapsed .nav__group-chevron {
  transform: rotate(-90deg);
}

.nav__group-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__group--collapsed .nav__group-items {
  display: none;
}

/* ----- Content — router target ----- */

.content {
  grid-area: content;
  padding: var(--space-8);
  overflow-y: auto;
}

/* ============================================================================
   View — shared chrome for view modules rendered into .content
   ============================================================================ */

.view {
  max-width: var(--content-max);
  margin: 0 auto;
}

.view__header {
  margin-bottom: var(--space-6);
}

.view__title {
  margin: 0 0 var(--space-2);
  font-size: 24px;
  font-weight: 600;
}

.view__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.view__placeholder {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.view__placeholder p {
  margin: 0 0 var(--space-2);
}

.view__placeholder p:last-child {
  margin-bottom: 0;
}

.view__placeholder code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.view__placeholder a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================================================
   Modal overlay — used by the 401 re-auth flow (see shell.js / api.js)
   ============================================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.modal--open {
  display: block;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.modal__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.2);
  padding: var(--space-8);
}

.modal__title {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  font-weight: 600;
}

.modal__subtitle {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: 13px;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Login modal sits ABOVE any view-spawned form modal (otherwise the 401
   interceptor's modal would render below a form the user was filling). */
#login-modal { z-index: 200; }

/* Form-modal sizing: slightly larger than the login modal so multi-field
   forms breathe. The .modal__body wraps the caller's bodyHtml. */
.modal__card--form {
  max-width: 520px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

/* Wide variant — used by the activity Edit modal so the form column and
   the updates thread can sit side-by-side without crowding either. */
.modal__card--wide {
  max-width: 880px;
}

/* Spawned-from context banner — shown at the top of the Edit modal body
   when this activity has a spawned_by_activity_id. Click jumps back to
   the parent in the timeline (if it's visible) and flashes the row. */
.spawned-from-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: 8px 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #4c1d95;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 120ms ease;
}
.spawned-from-banner:hover { background: #ede9fe; }

.spawned-from-banner__arrow {
  font-size: 16px;
  line-height: 1;
  color: #6d28d9;
}

.spawned-from-banner__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 11px;
  color: #6d28d9;
}

.spawned-from-banner__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Edit Activity modal — two-column layout: form on left, updates thread
   on right. The updates aside has its own internal scroll so a long
   thread doesn't push the form fields off the modal. Collapses to a
   single column on narrow viewports. */
.edit-activity__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.edit-activity__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.edit-activity__updates {
  min-width: 0;
}

@media (max-width: 720px) {
  .edit-activity__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Address sub-form: visually separated from the entity fields by a faint
   rule, with a 3-column City/State/ZIP row. */
.addr-fieldset {
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  border: none;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.addr-legend {
  padding: 0;
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.addr-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: var(--space-2);
}

.addr-hint {
  margin: 4px 0 0;
}

/* Google Places web component overrides — keep visual style consistent
   with our other inputs. */
gmp-place-autocomplete {
  width: 100%;
  display: block;
}

/* ============================================================================
   Button size variant (topbar sign-out, modal actions)
   ============================================================================ */

.btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* ============================================================================
   Utilities (used by view modules)
   ============================================================================ */

.muted { color: var(--color-text-muted); }
.small { font-size: 12px; }

.dot {
  display: inline-block;
  margin: 0 var(--space-2);
  color: var(--color-text-subtle);
}

.crumb-sep {
  margin: 0 6px;
  color: var(--color-text-subtle);
  font-weight: 400;
}

.state-chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* State table column: narrow, centered, doesn't grow with row content. */
.results-table th.col-state,
.results-table td.col-state {
  width: 70px;
  text-align: center;
  white-space: nowrap;
}

.role-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.status-pill--qualified { background: #eef4fb; color: #1e40af; border-color: #bfdbfe; }
.status-pill--active    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill--dead      { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }

/* ============================================================================
   Clients landing — search bar + results
   ============================================================================ */

.view__header--withbar { margin-bottom: var(--space-4); }

/* Row variant: title left, action(s) right. */
.view__header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* textareas reuse .field__input styling but need a sensible default height
   and resize control. */
textarea.field__input {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

.search-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 720px;
}

.search-bar__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.search-bar__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
}

.search-bar__mode {
  padding: 10px 12px;
  font-size: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: none;
}

.search-bar__mode:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
}

.results-region {
  margin-top: var(--space-4);
}

.results-heading {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.results-empty {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

.results-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.results-table thead th {
  text-align: left;
  padding: 10px 16px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.results-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.results-table tbody tr:last-child td {
  border-bottom: none;
}

.results-table tbody tr:hover {
  background: var(--color-surface-alt);
}

.cell-link {
  display: inline-block;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.cell-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================================================
   Client detail — full-page route, modal-styled in the content area
   ============================================================================ */

/* Fill the content area; the SPA shell topbar + sidebar still frame the page. */
.detail {
  position: relative;
  min-height: 100%;
  margin: calc(var(--space-8) * -1);  /* counteract .content padding */
  padding: var(--space-8);
  display: grid;
  place-items: start center;
}

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.detail__card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px - var(--space-8) * 2);
  overflow: hidden;
}

.detail__card--loading,
.detail__card--error {
  min-height: auto;
  padding: var(--space-8);
}

.detail__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.detail__close {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-md);
}

.detail__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.detail__title-wrap {
  text-align: center;
}

.detail__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.detail__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.detail__actions {
  min-width: 100px; /* balances the close link visually */
}

.detail__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  min-height: 0;  /* allow children to overflow-scroll independently */
}

/* ----- Master pane ----- */

.detail__master {
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  background: var(--color-surface-alt);
}

.master-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.master-item {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 100ms ease, color 100ms ease;
}

.master-item:hover {
  background: var(--color-surface);
}

.master-item--active,
.master-item--active:hover {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.master-item__name {
  font-size: 13px;
  font-weight: 500;
}

.master-item__sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.master-item--active .master-item__sub {
  color: rgba(255, 255, 255, 0.7);
}

.master-empty {
  padding: var(--space-3);
  font-size: 12px;
  color: var(--color-text-subtle);
  font-style: italic;
}

.master-add {
  margin-top: var(--space-3);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}

.master-add:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-text);
}

/* ----- Detail pane ----- */

.detail__content {
  padding: var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.panel__title {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.panel__count {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 13px;
}

/* Key-value pairs for the Information panel */
.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px var(--space-4);
  margin: 0;
  font-size: 13px;
}

.kv dt {
  color: var(--color-text-muted);
  font-weight: 500;
}

.kv dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}

.error-message {
  margin: var(--space-6) 0;
  text-align: center;
  color: var(--color-error);
  font-size: 14px;
}

/* Inline edit form inside the Information panel */
.panel-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panel-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ============================================================================
   Tabs (detail-view right pane)
   ============================================================================ */

.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 var(--space-4);
}

.tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-3);
  margin-bottom: -1px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover { color: var(--color-text); }

.tab--active {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.tab__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.tab--active .tab__count {
  background: var(--color-primary);
  color: #fff;
}

.tab-pane { /* visibility handled via [hidden] */ }

/* ============================================================================
   Tab toolbar (filter chips + Add button)
   ============================================================================ */

.tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.filter-chip:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.filter-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

.filter-chip--active:hover {
  color: #fff;
}

/* ============================================================================
   Data table (Contacts / Addresses rolled-up views)
   ============================================================================ */

/* Scrollable wrapper so wide tables get a horizontal scrollbar instead
   of clipping the rightmost columns when the right pane is narrow. */
.data-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.data-table tbody td {
  padding: var(--space-3);
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: var(--color-surface-alt);
}

.data-table .col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.data-table .small {
  font-size: 12px;
}

/* Highlight when arriving via ?contact=<id> deep link. Row filtering
   driven by .filter-chip clicks happens in JS (toggles [hidden]) since
   CSS attribute selectors can't compare two attributes. */
.data-table tbody tr.contact--highlighted td {
  background: #fef9c3;
}

/* ============================================================================
   Scope pill — small link in the Scope column showing which entity
   owns this row
   ============================================================================ */

.scope-pill {
  display: inline-block;
  padding: 2px 10px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.scope-pill:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
}

/* ============================================================================
   role-chip primary variant — used for "Primary for" cells
   ============================================================================ */

.role-chip--primary {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
  font-weight: 500;
}

/* ============================================================================
   Contact form (Add Contact / Edit Contact modals)
   ============================================================================ */

/* Two-up field rows for first/last name and email/phone */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.roles-fieldset,
.links-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
}

.roles-legend,
.links-legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.role-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.role-check:hover {
  background: var(--color-surface-alt);
}

.role-check input:checked + span {
  font-weight: 500;
  color: var(--color-text);
}

/* Edit-mode links list */
.links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.links-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.links-row__entity {
  font-weight: 500;
  color: var(--color-text);
}

.links-row__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* × button inside a role-chip */
.role-chip__remove {
  appearance: none;
  background: transparent;
  border: none;
  margin-left: 4px;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.role-chip__remove:hover {
  opacity: 1;
  color: var(--color-error);
}

.role-chip__remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.links-add-wrap {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

.links-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Inline link inside an error alert (e.g. "View existing Jane Mitchell"
   on an email-conflict 409). The error alert is already coloured; the
   link just needs to stand out via underline + chevron-like spacing. */
.error-link {
  display: inline-block;
  margin-left: var(--space-2);
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.error-link:hover {
  text-decoration: none;
}

/* ============================================================================
   Address form (roles grid with per-row Primary toggle)
   ============================================================================ */

.addr-roles-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
}

.addr-roles-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.addr-role {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.addr-role__type,
.addr-role__primary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}

.addr-role__primary--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.addr-role__primary--disabled .role-chip--primary {
  filter: grayscale(1);
}

/* Modal danger zone — the "Delete this address" button at the bottom
   of the edit modal, visually separated from the field block. */
.modal-danger-zone {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================
   Activities v2 — minimal chronological card feed (per-client tab).
   The earlier Pulse Strip / Open & Upcoming board / History feed / inline
   detail expansion were removed in favor of one dense card list. See
   client-detail.js + activity-form.js for the markup these classes target.
   ============================================================================ */

/* ----- Extra-small button (used inside cards) ----- */
.btn--xs {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.4;
}

/* ----- Activities tab toolbar (Add button + filter chips) ----- */
.act-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.act-toolbar__add { position: relative; }

.type-picker-wrap {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
}

.type-picker {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.type-picker__item {
  appearance: none;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.type-picker__item:hover { background: var(--color-surface-alt); }

.type-picker__icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

/* ----- Empty state ----- */
.act-empty {
  padding: var(--space-6);
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.act-empty p { margin: 0 0 6px; }
.act-empty p:last-child { margin-bottom: 0; }

/* ----- Vertical timeline (the new feed shape) -----
   Each row is a 3-column grid: [date stack] [rail+dot] [content].
   The rail line is drawn by each row's rail cell ::before and extends
   into the rows above/below so the line reads as continuous through
   the whole timeline. The dot is the rail cell's ::after, colored by
   a status modifier on the row. */

.act-timeline {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
}

.act-row {
  display: grid;
  grid-template-columns: 64px 28px 1fr;
  padding: var(--space-3) 0;
  font-size: 13px;
  transition: background 120ms ease;
}

.act-row + .act-row {
  border-top: 1px solid var(--color-border);
}

.act-row:hover {
  background: var(--color-surface-alt);
}

/* Flash pulse when navigating to a follow-up row via the in-card link.
   JS adds .act-row--flash for 1500ms, the keyframe fades a soft amber
   wash in and back out so the eye catches the scroll-jumped destination. */
@keyframes act-row-flash {
  0%   { background: transparent; }
  20%  { background: #fef3c7; }
  100% { background: transparent; }
}

.act-row--flash {
  animation: act-row-flash 1500ms ease-out;
}

/* Date stack on the far left — two short lines (day + year). */
.act-row__date {
  grid-column: 1;
  text-align: right;
  padding: 2px 14px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.act-row__date-day {
  font-weight: 600;
  color: var(--color-text);
  font-size: 12px;
}

.act-row__date-year {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Rail column — vertical line + colored dot. */
.act-row__rail {
  grid-column: 2;
  position: relative;
}

.act-row__rail::before {
  /* the line */
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: var(--color-border);
  transform: translateX(-1px);
}

.act-row__rail::after {
  /* the dot */
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-subtle);
  border: 2px solid var(--color-surface);
  box-sizing: content-box;
  transform: translateX(-50%);
}

.act-row:hover .act-row__rail::after {
  border-color: var(--color-surface-alt);
}

/* Cap the rail at the first/last row so it doesn't bleed past the feed. */
.act-row:first-child .act-row__rail::before { top: 14px; }
.act-row:last-child  .act-row__rail::before { bottom: auto; height: 14px; }

/* Dot colors by status (same accent colors used in modals + status pills). */
.act-row--note         .act-row__rail::after { background: #9ca3af; }
.act-row--tentative    .act-row__rail::after { background: #d97706; }
.act-row--confirmed    .act-row__rail::after { background: #2563eb; }
.act-row--rescheduled  .act-row__rail::after { background: #8b5cf6; }
.act-row--completed    .act-row__rail::after { background: #16a34a; }
.act-row--cancelled    .act-row__rail::after { background: #dc2626; }
.act-row--no_show      .act-row__rail::after { background: #dc2626; }
.act-row--mine         .act-row__rail::after { background: #d97706; }
.act-row--theirs       .act-row__rail::after { background: #2563eb; }
.act-row--none         .act-row__rail::after { background: #9ca3af; }
.act-row--open         .act-row__rail::after { background: #d97706; }

/* Content column — flows naturally, no card chrome. */
.act-row__content {
  grid-column: 3;
  min-width: 0;
  padding: 0 var(--space-3) 0 var(--space-2);
}

.act-row__status {
  margin: 0 0 4px;
}

.act-row__title {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.act-row__body {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
}

.act-row__followup {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 2px 8px;
  background: var(--color-surface-alt);
  border-radius: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.act-row__followup:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.act-row__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.act-row__meta { min-width: 0; }
.act-row__author { font-weight: 500; color: var(--color-text); }

.act-row__updates {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.act-row:hover .act-row__updates { background: var(--color-surface-alt); }

.act-row__scope {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-text-subtle);
}
.act-row__scope:hover { color: var(--color-text); }

.act-row__edit {
  opacity: 0.55;
  transition: opacity 120ms ease;
  flex-shrink: 0;
}
.act-row:hover .act-row__edit,
.act-row__edit:focus-visible { opacity: 1; }

/* ----- Status text on the card header (top-left) ----- */
.status-inline {
  display: inline-block;
  font-weight: 600;
  font-size: 12px;
  text-transform: capitalize;
  color: var(--color-text-muted);
}

.status-inline--done       { color: #047857; }
.status-inline--completed  { color: #047857; }
.status-inline--mine       { color: #b45309; }
.status-inline--theirs     { color: #1d4ed8; }
.status-inline--confirmed  { color: #1d4ed8; }
.status-inline--tentative  { color: #b45309; }
.status-inline--cancelled  { color: #b91c1c; }
.status-inline--no_show    { color: #b91c1c; }
.status-inline--rescheduled{ color: #5b21b6; }

/* ----- Updates section inside the Edit modal ----- */
.updates-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.updates-section__legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.updates-section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.updates-section__empty { margin: 0; }

.update-row {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.update-row__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.update-row__actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.update-row__content {
  white-space: pre-wrap;
  line-height: 1.4;
  color: var(--color-text);
}

.update-row__edit { display: flex; flex-direction: column; gap: 6px; }
.update-row__edit-actions { display: flex; justify-content: flex-end; gap: 4px; }

.updates-section__composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.updates-section__composer-actions {
  display: flex;
  justify-content: flex-end;
}

/* ----- "Mark completed" checkbox inside Edit Task form ----- */
.completed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 0;
}

/* (Old .followup-badge styles removed — the timeline-row layout uses
 *  .act-row__followup, a smaller inline chip in the row's content cell.)
 */

/* ----- Activity create + completion + update forms ----- */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.field__input--inline { display: inline-block; width: auto; }

.preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.no-fixed-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.direction-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.direction-legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.direction-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
  cursor: pointer;
}

.direction-option__label { font-weight: 500; color: var(--color-text); }

/* Compact meeting-location picker. Two rows:
   row 1 — quick-pick dropdown + Edit button
   row 2 — one or two line summary of the current selection */
.location-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.location-fieldset__legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0;
  margin: 0 0 4px;
}
.location-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.location-compact__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.location-compact__select {
  flex: 1;
  min-width: 0;
}
.location-compact__summary {
  margin: 0;
  padding: 4px 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Contenteditable mention editor — drop-in replacement for the textarea.
   Looks and behaves like a textarea, but renders @-chips inline as the
   user types. The hidden <textarea> sibling carries the markup value
   for form submission. */
.mention-editor {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  cursor: text;
}
.mention-editor:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.mention-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}
/* The chips inside the editor render the same as read-only chips but
   need a hair of vertical lift so they line up with surrounding text. */
.mention-editor .mention-chip {
  user-select: all;       /* select-as-unit so backspace removes whole */
  vertical-align: baseline;
}

/* @-mention picker — floating list under the textarea showing matched
   contacts + internal users. Items are keyboard-navigable via the
   textarea's keydown handler. */
.mention-picker {
  display: none;
  z-index: 300; /* above stacked form modals */
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.15);
  padding: 4px 0;
}
.mention-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.mention-picker__item:hover,
.mention-picker__item--selected {
  background: var(--color-surface-alt);
}
.mention-picker__kind {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex: 0 0 auto;
}
.mention-picker__kind--user    { background: #ede9fe; color: #5b21b6; }
.mention-picker__kind--contact { background: #dbeafe; color: #1e40af; }
.mention-picker__name {
  font-weight: 500;
  color: var(--color-text);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker__sub {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.mention-picker__empty {
  padding: 8px 12px;
}

/* Display-side mention chip — replaces raw @[Name](kind:UUID) markup
   in notes / updates on read. Subtle pill, kind-coded color. */
.mention-chip {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.95em;
  line-height: 1.3;
}
.mention-chip--contact { background: #dbeafe; color: #1e40af; }
.mention-chip--user    { background: #ede9fe; color: #5b21b6; }

/* Spawn-a-follow-up fieldset shown under the meeting_status select or
   task `completed` checkbox during a transition to done. Initial state
   is hidden via the [hidden] attribute; client-detail.js toggles it. */
.spawn-fieldset {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fffbeb;
}

.spawn-fieldset[hidden] { display: none; }

.spawn-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.spawn-body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spawn-body[hidden] { display: none; }

/* ============================================================================
   Global Activities dashboard (views/activities.js)
   Two-column agenda + Mine|Everyone toggle + pulse strip. Mirrors the
   per-client timeline's status language (.status-inline--* colors) on the
   row's left accent so status reads identically across both surfaces.
   ========================================================================= */

.activities {
  max-width: var(--content-max);
  margin: 0 auto;
}

.activities__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.activities__toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.activities__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.activities__add { position: relative; }

/* Segmented Mine|Everyone control. */
.seg {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.seg__btn {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 6px 14px;
  cursor: pointer;
}

.seg__btn + .seg__btn { border-left: 1px solid var(--color-border); }
.seg__btn:hover { background: var(--color-surface-alt); }

.seg__btn--active {
  background: var(--color-primary);
  color: var(--color-primary-on);
}
.seg__btn--active:hover { background: var(--color-primary-hover); }

.activities__loading,
.activities__error {
  padding: var(--space-8);
  text-align: center;
}
.activities__error { color: var(--color-error); }

/* ----- Time-range control + tabs ----- */
.activities__controls {
  margin-bottom: var(--space-3);
}

/* The range selector reuses the .seg segmented look; let it wrap on narrow
   viewports so all four ranges stay reachable. */
.seg--range { flex-wrap: wrap; }

.activities__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 8px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab:hover { color: var(--color-text); }
.tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* ----- Tab panel (single-column list) ----- */
.agenda-panel { max-width: 760px; }

.agenda__empty {
  padding: var(--space-4) 0;
}

.agenda-group {
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
}

.agenda-group__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.agenda-group--urgent .agenda-group__title { color: var(--color-error); }

.agenda-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.agenda-group--urgent .agenda-group__count {
  background: var(--color-error-bg);
  border-color: #fca5a5;
  color: var(--color-error);
}

.agenda-group__rows {
  display: flex;
  flex-direction: column;
}

/* Completed-in-range sub-section: shown, but de-emphasized. */
.agenda-group--done { opacity: 0.75; }
.agenda-group__title--done { color: var(--color-text-muted); }

/* ----- Day sub-grouping (multi-day ranges only) -----
   A light per-day header so a full week is scannable. Subordinate to the
   group title (We owe / They owe / Done), so it's smaller + muted. */
.agenda-day + .agenda-day { margin-top: var(--space-3); }

.agenda-day__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 3px 0 5px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}

.agenda-day__rows {
  display: flex;
  flex-direction: column;
}

/* ----- Agenda row ----- */
.agenda-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 10px 8px 8px;
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.agenda-row + .agenda-row { border-top: 1px solid var(--color-border); }
.agenda-row:hover { background: var(--color-surface-alt); }
.agenda-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Left-accent color by status — same palette as .status-inline--*. */
.agenda-row--mine,
.agenda-row--tentative   { border-left-color: #b45309; }
.agenda-row--theirs,
.agenda-row--confirmed    { border-left-color: #1d4ed8; }
.agenda-row--completed,
.agenda-row--done         { border-left-color: #047857; }
.agenda-row--cancelled,
.agenda-row--no_show      { border-left-color: #b91c1c; }
.agenda-row--rescheduled  { border-left-color: #5b21b6; }
.agenda-row--note         { border-left-color: var(--color-border-strong); }
.agenda-row--open         { border-left-color: var(--color-border-strong); }

.agenda-row__date {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-text-muted);
}
.agenda-row__date-d { font-weight: 600; color: var(--color-text); }

.agenda-row__body { min-width: 0; }

.agenda-row__subject {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-row__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.agenda-row__client {
  color: var(--color-text-muted);
  text-decoration: none;
}
.agenda-row__client:hover { color: var(--color-text); text-decoration: underline; }

.agenda-row__sep { color: var(--color-text-subtle); }

.agenda-row__owner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

/* ----- Row field actions (Call / Take me there) ----- */
.agenda-row__tail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agenda-row__action {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.agenda-row__action:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.agenda-row__action--call:hover { border-color: #047857; color: #047857; }
.agenda-row__action--dir:hover  { border-color: #1d4ed8; color: #1d4ed8; }

/* ----- Global "+ Add" client typeahead ----- */
.ga-client-pick { position: relative; }

.ga-client-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

.ga-client-results__item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ga-client-results__item:hover { background: var(--color-surface-alt); }
.ga-client-results__name { font-weight: 500; }
.ga-client-results__empty { padding: 8px 10px; }

.ga-chosen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ga-chosen__label { text-transform: uppercase; letter-spacing: 0.04em; }
.ga-chosen__name { flex: 1 1 auto; }

@media (max-width: 720px) {
  .agenda-panel { max-width: none; }
  .activities__tabs { overflow-x: auto; }
}