/* ── Brand color overrides (Pico v2 CSS custom properties) ───────────────── */
:root {
  --pico-primary:         #1a56db;
  --pico-primary-hover:   #1648c0;
  --pico-primary-focus:   rgba(26, 86, 219, 0.25);
  --pico-primary-inverse: #fff;

  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-muted:   #6B7280;
  --color-border:  #E5E7EB;
  --color-bg-soft: #F9FAFB;

  --header-height:  60px;
  --border-radius:  8px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:      0 20px 60px rgba(0,0,0,0.18);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--color-bg-soft); }

/* ── Site header ─────────────────────────────────────────────────────────── */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow:    var(--shadow-sm);
  height:        var(--header-height);
}

.site-nav {
  display:     flex;
  align-items: center;
  height:      var(--header-height);
  gap:         0.5rem;
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

/* Pico puts margin on nav ul — reset */
.site-nav ul {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.nav-links  { flex: 1; justify-content: flex-start; margin-left: 1rem; }
.nav-actions { gap: 0.5rem; }

.brand-link { display: flex; align-items: center; text-decoration: none; }
.brand-logo  { display: block; height: 32px; width: auto; flex-shrink: 0; }

.nav-link {
  display:       block;
  padding:       0.4rem 0.75rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  color:         #374151;
  font-size:     0.9rem;
  transition:    background 0.15s, color 0.15s;
  white-space:   nowrap;
}
.nav-link:hover,
.nav-link.active {
  background: #EFF6FF;
  color:      var(--pico-primary);
}
.nav-logout { color: var(--color-muted); font-size: 0.875rem; }
.nav-logout:hover { background: #FEF2F2; color: var(--color-danger); }

/* Nav dropdown (Pico details/summary pattern) */
.nav-dropdown {
  position:   relative;
  /* Kill Pico v2 block-level spacing on <details> so it stays in the flex row */
  display:    flex;
  align-items: center;
  padding:    0;
  margin:     0;
  border:     none;
  background: transparent;
}
.nav-dropdown > summary {
  list-style: none;
  cursor:     pointer;
  /* Stop Pico adding margin-bottom to <summary> */
  margin:     0;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] > summary::after {
  content: '';
  position: fixed;
  inset:    0;
  z-index:  -1;
}
.nav-dropdown ul {
  position:   absolute;
  top:        calc(100% + 0.25rem);
  left:       0;
  min-width:  160px;
  background: #fff;
  border:     1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  flex-direction: column;
  padding:    0.25rem;
  z-index:    200;
}
.nav-dropdown ul li a {
  display:       block;
  padding:       0.5rem 0.75rem;
  border-radius: 4px;
  color:         #374151;
  text-decoration: none;
  font-size:     0.875rem;
}
.nav-dropdown ul li a:hover { background: var(--color-bg-soft); }

/* ── Quick-add button ────────────────────────────────────────────────────── */
.btn-quick-add {
  background:    var(--pico-primary) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: var(--border-radius) !important;
  padding:       0.4rem 1rem !important;
  font-size:     0.875rem !important;
  font-weight:   600 !important;
  line-height:   1.4 !important;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s;
  /* Prevent Pico from inflating the button height outside the header */
  margin:        0 !important;
}
.btn-quick-add:hover { background: var(--pico-primary-hover) !important; }

/* ── Main content ────────────────────────────────────────────────────────── */
.main-content {
  padding-top:    1.5rem;
  padding-bottom: 2rem;
  min-height:     calc(100vh - var(--header-height));
}

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

.login-card {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow:    var(--shadow-md);
  padding:       2.5rem 2rem;
  width:         100%;
  max-width:     420px;
}

.login-brand {
  text-align:    center;
  margin-bottom: 1.5rem;
}

.login-heading {
  text-align:    center;
  font-size:     1.2rem;
  font-weight:   600;
  margin-bottom: 1.5rem;
  color:         #111827;
}

.login-error {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  background:    #FEF2F2;
  color:         #B91C1C;
  border:        1px solid #FECACA;
  border-radius: var(--border-radius);
  padding:       0.75rem 1rem;
  font-size:     0.875rem;
  margin-bottom: 1.25rem;
}

.login-card form label {
  display:       block;
  font-size:     0.875rem;
  font-weight:   500;
  margin-bottom: 0.25rem;
  color:         #374151;
}

.login-card form input {
  width:         100%;
  margin-bottom: 1rem;
}

.login-btn {
  width:       100%;
  margin-top:  0.5rem;
  font-weight: 600;
}

/* ── Hero (landing page) ─────────────────────────────────────────────────── */
.hero {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         4rem 1rem;
  gap:             1.5rem;
}
.hero hgroup h1 { font-size: 2rem; margin-bottom: 0.25rem; }
.hero hgroup p  { color: var(--color-muted); font-size: 1.1rem; }
.hero-btn       { min-width: 160px; }

/* ── Error page ──────────────────────────────────────────────────────────── */
.error-page {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         4rem 1rem;
  gap:             1rem;
}
.error-page hgroup h1 { font-size: 4rem; margin-bottom: 0; color: var(--color-muted); }

/* ── Toast notifications ─────────────────────────────────────────────────── */
#toast-container {
  position:       fixed;
  bottom:         1.5rem;
  right:          1.5rem;
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  pointer-events: none;
}
.toast {
  background:     #1F2937;
  color:          #fff;
  padding:        0.75rem 1.25rem;
  border-radius:  var(--border-radius);
  font-size:      0.875rem;
  box-shadow:     var(--shadow-md);
  max-width:      320px;
  pointer-events: auto;
  animation:      toastIn 0.2s ease;
}
.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); color: #1F2937; }
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.45);
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  animation:       fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background:    #fff;
  border-radius: var(--border-radius);
  padding:       2rem;
  width:         100%;
  max-width:     580px;
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    var(--shadow-lg);
}
.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.5rem;
}
.modal-header h2 { margin: 0; font-size: 1.25rem; }
.modal-close {
  background:  none;
  border:      none;
  font-size:   1.5rem;
  cursor:      pointer;
  color:       var(--color-muted);
  line-height: 1;
  padding:     0.25rem 0.5rem;
  border-radius: 4px;
}
.modal-close:hover { background: var(--color-bg-soft); color: #111; }

/* ── Form layout ─────────────────────────────────────────────────────────── */
.form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}
.form-grid .col-span-2 { grid-column: 1 / -1; }

/* Voice-to-text mic button wrapper */
.field-with-mic {
  position: relative;
}
.field-with-mic input,
.field-with-mic textarea {
  padding-right: 2.75rem;
}
.mic-btn {
  position:      absolute;
  right:         0.5rem;
  top:           50%;
  transform:     translateY(-50%);
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--color-muted);
  font-size:     1.1rem;
  padding:       0.25rem;
  border-radius: 4px;
  line-height:   1;
  min-height:    auto;
  margin:        0;
}
.mic-btn:hover  { color: var(--pico-primary); }
.mic-btn.active { color: var(--color-danger); }
/* Textareas: anchor mic to top-right instead of vertical centre */
.field-with-mic.for-textarea .mic-btn {
  top:       0.6rem;
  transform: none;
}

/* ── Tag badges ──────────────────────────────────────────────────────────── */
.tag {
  display:        inline-flex;
  align-items:    center;
  gap:            0.25rem;
  padding:        0.15rem 0.55rem;
  border-radius:  9999px;
  font-size:      0.72rem;
  font-weight:    600;
  color:          #fff;
  white-space:    nowrap;
  text-transform: lowercase;
}

/* ── Contact type badge ──────────────────────────────────────────────────── */
.type-badge {
  display:       inline-block;
  padding:       0.15rem 0.55rem;
  border-radius: 4px;
  font-size:     0.75rem;
  font-weight:   600;
  background:    #EFF6FF;
  color:         var(--pico-primary);
  white-space:   nowrap;
}

/* ── Stage badge ─────────────────────────────────────────────────────────── */
.stage-badge {
  display:       inline-block;
  padding:       0.15rem 0.55rem;
  border-radius: 4px;
  font-size:     0.72rem;
  font-weight:   600;
  background:    #F3F4F6;
  color:         #374151;
}

/* ── Activity timeline ───────────────────────────────────────────────────── */
.timeline {
  position:    relative;
  padding-left: 2rem;
}
.timeline::before {
  content:    '';
  position:   absolute;
  left:       0.6rem;
  top:        0.5rem;
  bottom:     0.5rem;
  width:      2px;
  background: var(--color-border);
}
.timeline-item {
  position:      relative;
  margin-bottom: 1rem;
  padding:       1rem 1.25rem;
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow:    var(--shadow-sm);
}
.timeline-item::before {
  content:      '';
  position:     absolute;
  left:         -1.65rem;
  top:          1.1rem;
  width:        10px;
  height:       10px;
  border-radius: 50%;
  background:   var(--pico-primary);
  border:       2px solid var(--color-bg-soft);
  box-shadow:   0 0 0 2px var(--pico-primary);
}
.timeline-item.type-system::before  { background: var(--color-muted); box-shadow: 0 0 0 2px var(--color-muted); }
.timeline-item.type-call::before    { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success); }
.timeline-item.type-email::before   { background: #6366F1; box-shadow: 0 0 0 2px #6366F1; }

.timeline-meta {
  font-size:     0.78rem;
  color:         var(--color-muted);
  margin-bottom: 0.35rem;
  display:       flex;
  gap:           0.75rem;
  align-items:   center;
}
.timeline-subject { font-weight: 600; margin-bottom: 0.25rem; }
.timeline-body    { font-size: 0.9rem; white-space: pre-wrap; }

/* ── Data table ──────────────────────────────────────────────────────────── */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9rem;
}
.data-table th {
  text-align:    left;
  padding:       0.65rem 1rem;
  border-bottom: 2px solid var(--color-border);
  font-size:     0.78rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:         var(--color-muted);
  background:    var(--color-bg-soft);
}
.data-table td {
  padding:       0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: #F0F7FF; }
.data-table a { color: var(--pico-primary); text-decoration: none; font-weight: 500; }
.data-table a:hover { text-decoration: underline; }

/* ── Section header (used across detail pages) ───────────────────────────── */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
  padding-bottom:  0.5rem;
  border-bottom:   1px solid var(--color-border);
}
.section-header h3 { margin: 0; font-size: 1rem; }

/* ── HTMX loading indicator ──────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-muted  { color: var(--color-muted); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.font-semibold { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.gap-sm { gap: 0.5rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ── Contacts: filter bar ────────────────────────────────────────────────── */
.filter-bar {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       1rem;
  margin-bottom: 1rem;
}

.filter-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.5rem;
  align-items: center;
}

.filter-search { flex: 1 1 220px; }
.filter-search input { margin: 0; width: 100%; }

.filter-row select { margin: 0; flex: 0 1 auto; font-size: 0.875rem; }

.save-view-row {
  margin-top:  0.75rem;
  padding-top: 0.75rem;
  border-top:  1px solid var(--color-border);
}

.save-view-details summary { list-style: none; }
.save-view-details summary::-webkit-details-marker { display: none; }
.save-view-toggle {
  font-size:   0.8rem;
  font-weight: 500;
  color:       var(--pico-primary);
  cursor:      pointer;
  display:     inline-block;
}

.save-view-form {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
  margin-top:  0.5rem;
}
.save-view-form input  { margin: 0; flex: 1 1 180px; }
.save-view-form button { margin: 0; white-space: nowrap; }

/* ── Contacts: saved view chips ──────────────────────────────────────────── */
.saved-views-bar {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.4rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.saved-view-chip {
  display:       flex;
  align-items:   center;
  background:    #EFF6FF;
  border:        1px solid #BFDBFE;
  border-radius: 9999px;
  overflow:      hidden;
  font-size:     0.8rem;
}

.saved-view-link {
  padding:         0.2rem 0.65rem;
  color:           var(--pico-primary);
  text-decoration: none;
  font-weight:     500;
}
.saved-view-link:hover { text-decoration: underline; }

.saved-view-delete {
  background:  none;
  border:      none;
  border-left: 1px solid #BFDBFE;
  padding:     0.2rem 0.45rem;
  cursor:      pointer;
  color:       var(--color-muted);
  font-size:   0.95rem;
  line-height: 1;
}
.saved-view-delete:hover { color: var(--color-danger); }

/* ── Contacts: results & table ───────────────────────────────────────────── */
.results-meta   { margin-bottom: 0.6rem; }

.table-scroll {
  overflow-x:    auto;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.loan-badge {
  display:       inline-block;
  background:    #ECFDF5;
  color:         var(--color-success);
  font-size:     0.7rem;
  font-weight:   600;
  padding:       0.1rem 0.4rem;
  border-radius: 4px;
}

.tag-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.25rem;
}

/* ── Contacts: pagination ────────────────────────────────────────────────── */
.pagination {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.25rem;
  justify-content: center;
  margin-top:      1rem;
}

.page-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       2rem;
  height:          2rem;
  padding:         0 0.5rem;
  border-radius:   4px;
  text-decoration: none;
  font-size:       0.875rem;
  color:           #374151;
  background:      #fff;
  border:          1px solid var(--color-border);
  transition:      all 0.15s;
  white-space:     nowrap;
}
.page-btn:hover           { border-color: var(--pico-primary); color: var(--pico-primary); }
.page-btn.active          { background: var(--pico-primary); color: #fff; border-color: var(--pico-primary); }
.page-ellipsis            { display: inline-flex; align-items: center; padding: 0 0.2rem; color: var(--color-muted); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--color-muted);
}
.empty-state a { color: var(--pico-primary); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       1.25rem 1.5rem;
  margin-bottom: 1rem;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.back-link {
  display:         inline-flex;
  align-items:     center;
  color:           var(--color-muted);
  text-decoration: none;
  font-size:       0.875rem;
}
.back-link:hover { color: var(--pico-primary); }

/* ── Contact identity (show page) ────────────────────────────────────────── */
.contact-identity { margin-bottom: 1.25rem; }
.contact-name     { font-size: 1.75rem; margin: 0 0 0.5rem; }
.contact-badges   { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.unsub-badge {
  display:       inline-block;
  padding:       0.15rem 0.55rem;
  border-radius: 4px;
  font-size:     0.72rem;
  font-weight:   600;
  background:    #FEF2F2;
  color:         var(--color-danger);
  border:        1px solid #FECACA;
}

/* ── Contact action buttons ──────────────────────────────────────────────── */
.contact-actions { display: flex; gap: 0.5rem; align-items: center; }
.action-btn { font-size: 0.875rem; padding: 0.4rem 0.9rem; }

.danger-btn {
  background:    none;
  border:        1px solid var(--color-danger);
  color:         var(--color-danger);
  border-radius: var(--border-radius);
  padding:       0.4rem 0.9rem;
  font-size:     0.875rem;
  cursor:        pointer;
  transition:    all 0.15s;
}
.danger-btn:hover { background: var(--color-danger); color: #fff; }

/* ── Info grid (contact detail) ──────────────────────────────────────────── */
.info-card  { }
.info-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-item  { }
.info-item.col-span-2 { grid-column: 1 / -1; }
.info-label {
  display:        block;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-muted);
  margin-bottom:  0.2rem;
}
.info-value { font-size: 0.9rem; color: #1F2937; }
.info-value a { color: var(--pico-primary); text-decoration: none; }
.info-value a:hover { text-decoration: underline; }

/* ── Form sections (edit page) ───────────────────────────────────────────── */
.form-section       { }
.form-section-title {
  font-size:     1rem;
  font-weight:   600;
  margin:        0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  color:         #374151;
}

/* ── Form error banner ───────────────────────────────────────────────────── */
.form-error-banner {
  background:    #FEF2F2;
  color:         #B91C1C;
  border:        1px solid #FECACA;
  border-radius: var(--border-radius);
  padding:       0.75rem 1rem;
  font-size:     0.875rem;
  margin-bottom: 1rem;
}

/* ── Inline field error ──────────────────────────────────────────────────── */
.field-error {
  color:      var(--color-danger);
  font-size:  0.8rem;
  margin:     0.2rem 0 0;
}

/* ── Required star ───────────────────────────────────────────────────────── */
.required-star { color: var(--color-danger); margin-left: 0.1rem; }

/* ── Checkbox label ──────────────────────────────────────────────────────── */
.checkbox-label {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.9rem;
  cursor:      pointer;
}
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }

/* ── Form actions ────────────────────────────────────────────────────────── */
.form-actions {
  display:         flex;
  gap:             0.75rem;
  justify-content: flex-end;
  margin-top:      1.5rem;
  padding-top:     1rem;
  border-top:      1px solid var(--color-border);
}
.form-actions button,
.form-actions a[role="button"] { margin: 0; }

.form-actions-row {
  display:     flex;
  gap:         0.75rem;
  align-items: center;
  margin-bottom: 2rem;
}
.form-actions-row button,
.form-actions-row a[role="button"] { margin: 0; }

/* ── Wide modal (quick-add) ──────────────────────────────────────────────── */
.modal-wide { max-width: 640px; }

/* ── Tags: interactive assignment (contact detail) ───────────────────────── */
.tag-list-interactive { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.tag-removable {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  padding-right: 0.3rem;
}
.tag-remove-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  border:        none;
  background:    rgba(0,0,0,0.2);
  color:         #fff;
  font-size:     0.7rem;
  line-height:   1;
  cursor:        pointer;
  padding:       0;
  min-height:    auto;
  margin:        0;
  transition:    background 0.15s;
}
.tag-remove-btn:hover { background: rgba(0,0,0,0.4); }

/* Tag add form */
.tag-add-form {
  display:    flex;
  gap:        0.5rem;
  align-items: center;
  margin-top: 0;
}
.tag-add-form select { margin: 0; font-size: 0.875rem; }
.tag-add-form button { margin: 0; padding: 0.4rem 0.9rem; white-space: nowrap; }

/* Make list-view tag anchors look like tag spans */
a.tag {
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
}
a.tag:hover { opacity: 0.85; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }

/* ── Tags: management page ───────────────────────────────────────────────── */
.tag-manage-list { display: flex; flex-direction: column; gap: 0; }
.tag-manage-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.6rem 0;
  border-bottom:   1px solid var(--color-border);
}
.tag-manage-row:last-child { border-bottom: none; }

/* Color picker + swatches */
.color-picker-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.color-swatches { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.color-swatch {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  border:        2px solid transparent;
  cursor:        pointer;
  padding:       0;
  min-height:    auto;
  transition:    transform 0.1s, border-color 0.1s;
}
.color-swatch:hover { transform: scale(1.2); border-color: rgba(0,0,0,0.25); }

/* ── Notes & timeline additions ──────────────────────────────────────────── */
.timeline-item.type-note {
  border-left: 3px solid var(--color-warning);
}
.timeline-item.type-note::before {
  background: var(--color-warning);
  box-shadow: 0 0 0 2px var(--color-warning);
}

.note-label {
  display:       inline-block;
  padding:       0.1rem 0.4rem;
  background:    #FEF9C3;
  color:         #854D0E;
  border-radius: 3px;
  font-size:     0.7rem;
  font-weight:   600;
}
.activity-type-label {
  display:       inline-block;
  padding:       0.1rem 0.4rem;
  background:    #F3F4F6;
  color:         #374151;
  border-radius: 3px;
  font-size:     0.7rem;
  font-weight:   600;
  text-transform: capitalize;
}

.note-actions-inline {
  display:     flex;
  gap:         0.25rem;
  margin-left: auto;
}

/* Small inline action buttons (pin, unpin, delete within timeline) */
button.btn-sm {
  display:     inline-flex;
  align-items: center;
  padding:     0.15rem 0.55rem;
  font-size:   0.72rem;
  font-weight: 600;
  border-radius: 4px;
  cursor:      pointer;
  border:      1px solid var(--color-border);
  background:  #fff;
  color:       var(--color-muted);
  min-height:  auto;
  line-height: 1.5;
  margin:      0;
  transition:  color 0.15s, border-color 0.15s, background 0.15s;
}
button.btn-sm:hover {
  background:   var(--color-bg-soft);
  color:        var(--pico-primary);
  border-color: var(--pico-primary);
}
button.btn-sm.danger           { color: var(--color-danger); }
button.btn-sm.danger:hover     { background: #FEF2F2; border-color: var(--color-danger); }

/* Medium inline button — between btn-sm and full Pico button */
button.btn-md {
  display:       inline-flex;
  align-items:   center;
  padding:       0.4rem 1rem;
  font-size:     0.875rem;
  font-weight:   500;
  border-radius: 6px;
  cursor:        pointer;
  border:        1px solid var(--color-border);
  background:    #fff;
  color:         #374151;
  min-height:    auto;
  line-height:   1.5;
  margin:        0;
  transition:    color 0.15s, border-color 0.15s, background 0.15s;
}
button.btn-md:hover {
  background:   var(--color-bg-soft);
  border-color: #9CA3AF;
}
button.btn-md.primary {
  background:   var(--pico-primary);
  color:        #fff;
  border-color: var(--pico-primary);
}
button.btn-md.primary:hover {
  background:   var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
}

.note-submit-row { margin-top: 0.5rem; }

/* Pinned notes section */
.pinned-notes-list { display: flex; flex-direction: column; gap: 0; }
.pinned-note {
  padding:       0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.pinned-note:first-child { padding-top: 0; }
.pinned-note:last-child  { border-bottom: none; padding-bottom: 0; }

.note-body {
  margin:       0 0 0.5rem;
  white-space:  pre-wrap;
  font-size:    0.9rem;
}
.note-actions {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
}

/* ── Loan cards (contact detail) ─────────────────────────────────────────── */
.loans-list { display: flex; flex-direction: column; gap: 0; }

.loan-card {
  padding:       1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.loan-card:first-child { padding-top: 0; }
.loan-card:last-child  { border-bottom: none; padding-bottom: 0; }

.loan-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             0.75rem;
  margin-bottom:   0.4rem;
}
.loan-card-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.loan-amount-display {
  font-size:   1.15rem;
  font-weight: 700;
  color:       #111827;
}
.loan-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.5rem 1rem;
  font-size:   0.85rem;
  color:       var(--color-muted);
  margin-bottom: 0.35rem;
}
.loan-card-meta span::before { content: ''; }

.loan-address {
  font-size:     0.875rem;
  color:         #374151;
  margin:        0.3rem 0;
}
.loan-card-equity {
  display:   flex;
  gap:       1.5rem;
  font-size: 0.85rem;
  color:     var(--color-muted);
  margin-top: 0.35rem;
}
.loan-card-equity strong { color: #111827; }

.loan-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Loan commissions (within loan card) ─────────────────────────────────── */
.loan-commissions {
  margin-top:  0.75rem;
  padding-top: 0.6rem;
  border-top:  1px solid var(--color-border);
}

.commission-section-label {
  font-size:     0.7rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-muted);
  margin:         0 0 0.5rem;
}

.commission-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.4rem 0.75rem;
  align-items: center;
  padding:     0.35rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size:   0.875rem;
}
.commission-row:last-of-type { border-bottom: none; }

.commission-amount  { font-weight: 600; color: #111827; }
.commission-split   { color: var(--color-muted); font-size: 0.82rem; }
.commission-paid    { color: var(--color-success); font-size: 0.82rem; font-weight: 500; }
.commission-unpaid  { color: var(--color-warning); font-size: 0.82rem; font-weight: 500; }

.commission-add-link {
  display:         inline-block;
  margin-top:      0.6rem;
  color:           var(--pico-primary);
  text-decoration: none;
  font-weight:     500;
}
.commission-add-link:hover { text-decoration: underline; }

/* ── Referral section (contact detail) ───────────────────────────────────── */
.ref-section {
  margin-bottom: 1rem;
}
.ref-section:last-of-type { margin-bottom: 0; }

.ref-section-label {
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-muted);
  margin:         0 0 0.4rem;
}

.ref-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.4rem 0.75rem;
  align-items: center;
  padding:     0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size:   0.9rem;
}
.ref-row:last-child { border-bottom: none; }

.ref-name {
  font-weight:     600;
  color:           var(--pico-primary);
  text-decoration: none;
}
.ref-name:hover { text-decoration: underline; }

.ref-split {
  font-size:  0.8rem;
  color:      var(--color-muted);
  background: #F3F4F6;
  padding:    0.1rem 0.4rem;
  border-radius: 4px;
}

.ref-add-form  { margin-top: 1rem; }
.ref-add-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.4rem;
  align-items: center;
}
.ref-add-row select,
.ref-add-row input  { margin: 0; }
.ref-add-row button { margin: 0; }

/* ── Placeholder sections ────────────────────────────────────────────────── */
.placeholder-section { opacity: 0.7; }

/* ── Dashboard: stat cards ───────────────────────────────────────────────── */
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.stat-card {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       1.25rem 1.5rem;
  display:       flex;
  flex-direction: column;
  gap:           0.25rem;
}
.stat-card-accent { border-top: 3px solid var(--pico-primary); }
.stat-card-green  { border-top: 3px solid var(--color-success); }

.stat-number {
  font-size:   2rem;
  font-weight: 700;
  color:       #111827;
  line-height: 1;
}
.stat-label {
  font-size:  0.8rem;
  color:      var(--color-muted);
  font-weight: 500;
}
.stat-sub {
  font-size:  0.75rem;
  color:      var(--color-warning);
  font-weight: 600;
}

/* ── Dashboard: main 2-column grid ──────────────────────────────────────── */
.dashboard-main-grid {
  display:               grid;
  grid-template-columns: 1fr 360px;
  gap:                   1.5rem;
  align-items:           start;
}

.dashboard-left  { display: flex; flex-direction: column; gap: 0; }
.dashboard-right { }

/* Sub-grid for island + source side by side */
.dashboard-sub-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-top:            0;
}

/* ── Dashboard: breakdown rows ───────────────────────────────────────────── */
.breakdown-list { display: flex; flex-direction: column; gap: 0.1rem; }

.breakdown-row {
  display:     grid;
  grid-template-columns: 9rem 1fr 2.5rem;
  gap:         0.6rem;
  align-items: center;
  padding:     0.3rem 0;
  font-size:   0.875rem;
}

.breakdown-label {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.breakdown-link {
  color:           var(--pico-primary);
  text-decoration: none;
  font-weight:     500;
}
.breakdown-link:hover { text-decoration: underline; }

.breakdown-bar-wrap {
  background:    #F3F4F6;
  border-radius: 9999px;
  height:        8px;
  overflow:      hidden;
}
.breakdown-bar {
  height:        100%;
  border-radius: 9999px;
  background:    var(--pico-primary);
  min-width:     2px;
  transition:    width 0.3s ease;
}

.breakdown-count {
  text-align:  right;
  font-weight: 600;
  color:       #374151;
  font-size:   0.82rem;
}

/* ── Dashboard: activity feed ────────────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; gap: 0; }

.activity-feed-item {
  padding:       0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-feed-item:first-child { padding-top: 0; }

.activity-feed-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             0.5rem;
  margin-bottom:   0.2rem;
}
.activity-feed-contact {
  font-weight:     600;
  color:           var(--pico-primary);
  text-decoration: none;
  font-size:       0.875rem;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}
.activity-feed-contact:hover { text-decoration: underline; }
.activity-feed-date {
  font-size:   0.72rem;
  color:       var(--color-muted);
  flex-shrink: 0;
}
.activity-feed-subject {
  font-size:   0.875rem;
  font-weight: 500;
  color:       #1F2937;
  margin:      0 0 0.15rem;
}
.activity-feed-body {
  font-size: 0.82rem;
  color:     var(--color-muted);
  margin:    0;
}

/* ── Export page ─────────────────────────────────────────────────────────── */
.export-layout {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   1.5rem;
  align-items:           start;
}

.export-filters {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1.25rem;
}
.export-filters label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; display: block; }
.export-filters input,
.export-filters select { margin: 0; }

.export-actions {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding-top: 1rem;
  border-top:  1px solid var(--color-border);
  flex-wrap:   wrap;
}

.export-count-line {
  margin:    0;
  font-size: 0.9rem;
  color:     var(--color-muted);
  flex:      1;
}

.export-download-btn {
  white-space: nowrap;
  margin:      0;
}

.export-info-card { }
.export-field-list {
  margin:     0;
  padding:    0 0 0 1.25rem;
  font-size:  0.875rem;
  color:      #374151;
}
.export-field-list li { margin-bottom: 0.5rem; }
.export-field-list li:last-child { margin-bottom: 0; }

/* ── Import page ─────────────────────────────────────────────────────────── */
.import-layout {
  display:               grid;
  grid-template-columns: 1fr 300px;
  gap:                   1.5rem;
  align-items:           start;
}
.import-info-card { }

.import-upload-form { }

.import-drop-zone {
  border:        2px dashed var(--color-border);
  border-radius: var(--border-radius);
  padding:       2.5rem 1.5rem;
  text-align:    center;
  background:    var(--color-bg-soft);
  transition:    border-color 0.2s, background 0.2s;
}
.import-drop-zone.dragover {
  border-color: var(--pico-primary);
  background:   #EFF6FF;
}
.import-drop-icon  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.import-drop-label { margin: 0 0 1rem; color: var(--color-muted); font-size: 0.9rem; }

.csv-selected-box {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  margin-top:     0.75rem;
  padding:        0.5rem 0.875rem;
  background:     #ECFDF5;
  border:         1px solid #6EE7B7;
  border-radius:  var(--border-radius);
  font-size:      0.875rem;
  color:          #065F46;
}
.csv-selected-icon { font-style: normal; font-weight: 700; color: var(--color-success); }
.csv-selected-name { font-weight: 600; word-break: break-all; }

/* ── Batch rename ────────────────────────────────────────────────────────── */
.batch-rename-row {
  display:   flex;
  gap:       0.5rem;
  flex-wrap: wrap;
}
.batch-rename-input {
  flex:      1;
  min-width: 0;
  margin:    0;
}

/* ── Import preview table ────────────────────────────────────────────────── */
.import-table-scroll {
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
}

.import-preview-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.82rem;
  white-space:     nowrap;
}

.import-header-row th {
  position:      sticky;
  top:           0;
  background:    #F9FAFB;
  border-bottom: 1px solid var(--color-border);
  padding:       0.6rem 0.75rem 0.35rem;
  font-weight:   700;
  vertical-align: bottom;
  z-index:       2;
}
.import-mapping-row th {
  position:      sticky;
  top:           2.1rem;      /* sits just below header row */
  background:    #F3F4F6;
  border-bottom: 2px solid var(--color-border);
  padding:       0.35rem 0.5rem 0.5rem;
  z-index:       2;
}

.import-col-name {
  display:       block;
  max-width:     140px;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         #374151;
  margin-bottom: 0.3rem;
}

.import-map-select {
  margin:    0;
  font-size: 0.78rem;
  padding:   0.2rem 0.35rem;
  min-width: 130px;
}

.import-preview-table td {
  padding:       0.45rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.import-row-even { background: #fff; }
.import-row-odd  { background: #F9FAFB; }
.import-row-num  {
  color:      var(--color-muted);
  font-size:  0.72rem;
  text-align: right;
  padding:    0.45rem 0.5rem !important;
  min-width:  2rem;
}
.import-more-rows {
  padding:    0.75rem 1rem !important;
  text-align: center;
  background: #F9FAFB;
}
.import-cell { color: #1F2937; }

/* ── Import results ──────────────────────────────────────────────────────── */
.import-results-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.import-result-card {
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       1.25rem 1.5rem;
  display:       flex;
  flex-direction: column;
  gap:           0.25rem;
  background:    #fff;
}
.import-result-success { border-top: 3px solid var(--color-success); }
.import-result-warn    { border-top: 3px solid var(--color-warning); }
.import-result-muted   { border-top: 3px solid var(--color-muted); }

.import-results-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
}
.import-result-contact {
  display:         inline-block;
  padding:         0.2rem 0.6rem;
  background:      #EFF6FF;
  border:          1px solid #BFDBFE;
  border-radius:   9999px;
  font-size:       0.82rem;
  color:           var(--pico-primary);
  text-decoration: none;
  font-weight:     500;
}
.import-result-contact:hover { text-decoration: underline; }

/* ── Imports list page ───────────────────────────────────────────────────── */
.imports-table .imports-actions {
  display:     flex;
  gap:         0.4rem;
  align-items: center;
  white-space: nowrap;
}

/* ── Import filter banner (contacts list) ────────────────────────────────── */
.import-filter-banner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
  margin-top:      0.5rem;
  padding:         0.5rem 0.875rem;
  background:      #EFF6FF;
  border:          1px solid #BFDBFE;
  border-radius:   var(--border-radius);
  font-size:       0.875rem;
  color:           #1E3A8A;
}
.import-filter-clear {
  color:           var(--color-muted);
  text-decoration: none;
  font-size:       0.85rem;
  flex-shrink:     0;
}
.import-filter-clear:hover { color: var(--color-danger); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links .nav-link { padding: 0.4rem 0.5rem; font-size: 0.8rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .col-span-2 { grid-column: 1; }
  .main-content { padding-top: 1rem; padding-bottom: 1rem; }
  .modal { padding: 1.25rem; }
  .data-table { font-size: 0.82rem; }
  .data-table th, .data-table td { padding: 0.5rem 0.6rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-sub-grid  { grid-template-columns: 1fr; }
  .breakdown-row { grid-template-columns: 8rem 1fr 2rem; }
  .export-layout  { grid-template-columns: 1fr; }
  .export-filters { grid-template-columns: 1fr; }
  .import-layout  { grid-template-columns: 1fr; }
  .import-results-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  /* On small phones, hide secondary nav links — quick-add + logout remain */
  .nav-links li:not(:first-child) { display: none; }
  .hero hgroup h1 { font-size: 1.5rem; }
}

/* ── Phone row (country-code select + number input) ──────────────────────── */
.phone-row {
  display:     flex;
  gap:         0.4rem;
  align-items: flex-start;
}
.phone-cc-select {
  width:       5.5rem;
  flex-shrink: 0;
  padding-left:  0.5rem;
  padding-right: 0.25rem;
  font-size:   0.875rem;
}
.phone-row input[type="tel"] {
  flex:      1;
  min-width: 0;
}

/* ── Gmail Sync ───────────────────────────────────────────────────────────── */
.gmail-settings-card { max-width: 560px; }

.gmail-status {
  display:      flex;
  align-items:  center;
  gap:          0.6rem;
  font-size:    1rem;
}
.gmail-status-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.gmail-status.connected    .gmail-status-dot { background: #22C55E; }
.gmail-status.disconnected .gmail-status-dot { background: #9CA3AF; }

.gmail-actions {
  display:   flex;
  gap:       0.75rem;
  flex-wrap: wrap;
}
.gmail-connect-btn { display: inline-block; }

.gmail-how-list {
  margin:      0;
  padding-left: 1.25rem;
  font-size:   0.9rem;
  line-height: 1.7;
}

/* Gmail sync card on contact page */
.gmail-sync-card .section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Direction badges in timeline */
.email-direction-badge {
  display:       inline-block;
  font-size:     0.7rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:       0.1rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
}
.email-direction-badge.inbound  { background: #DBEAFE; color: #1D4ED8; }
.email-direction-badge.outbound { background: #D1FAE5; color: #065F46; }

/* Alert banners */
.alert-success,
.alert-info,
.alert-error {
  padding:       0.75rem 1rem;
  border-radius: var(--border-radius, 6px);
  margin-bottom: 1rem;
  font-size:     0.9rem;
}
.alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.alert-info    { background: #E0F2FE; color: #0C4A6E; border: 1px solid #7DD3FC; }
.alert-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ── API Keys settings page ──────────────────────────────────────────────── */
.api-key-reveal {
  border: 2px solid var(--pico-primary);
  background: #EFF6FF;
}
.api-key-warning {
  font-size:   0.82rem;
  font-weight: 600;
  color:       #B45309;
}
.api-key-copy-row {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-top:  0.75rem;
  flex-wrap:   wrap;
}
.api-key-code {
  font-family:  monospace;
  font-size:    0.8rem;
  background:   #fff;
  border:       1px solid var(--color-border);
  border-radius: 4px;
  padding:      0.4rem 0.6rem;
  word-break:   break-all;
  flex:         1;
  min-width:    0;
}
.api-key-create-form { padding: 0; }
.api-key-create-row {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
  flex-wrap:   wrap;
}