/* ============================================================
   CrewCast theme — "Hume Smart Home" overlay on top of Bootstrap.
   Loaded after Bootstrap + custom.css, before pulse.css.
   Restyles the Bootstrap utility classes already used across all
   83 templates so the existing markup picks up the new look
   without per-page edits.
   ============================================================ */

:root {
  /* Surfaces */
  --hume-bg: #0a0c10;
  --hume-surface: #14171d;
  --hume-surface-2: #1a1e26;
  --hume-surface-3: #1f242e;
  --hume-border: #22262e;
  --hume-border-strong: #2c313b;

  /* Text */
  --hume-text: #e8eaf0;
  --hume-muted: #8b91a0;
  --hume-dim: #5b6170;

  /* Accent (warm orange) */
  --hume-accent: #f97316;
  --hume-accent-2: #fb923c;
  --hume-accent-soft: rgba(249, 115, 22, 0.18);
  --hume-accent-glow: rgba(249, 115, 22, 0.32);

  /* Semantic (kept distinct so status pills still read correctly) */
  --hume-success: #34d399;
  --hume-success-soft: rgba(52, 211, 153, 0.16);
  --hume-info: #60a5fa;
  --hume-info-soft: rgba(96, 165, 250, 0.16);
  --hume-warning: #fbbf24;
  --hume-warning-soft: rgba(251, 191, 36, 0.16);
  --hume-danger: #f87171;
  --hume-danger-soft: rgba(248, 113, 113, 0.18);
  --hume-secondary-soft: rgba(139, 145, 160, 0.14);

  --hume-radius: 22px;
  --hume-radius-sm: 14px;
  --hume-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  --hume-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ── Bootstrap 5.3 dark-theme token overrides ───────────────
   Bootstrap utility classes (bg-body, text-body, .table, etc.) resolve
   through these CSS variables at [data-bs-theme="dark"]. Re-pointing
   them here means components we haven't individually restyled still
   pick up the Hume palette instead of stock BS dark. */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--hume-bg);
  --bs-body-color: var(--hume-text);
  --bs-body-color-rgb: 232, 234, 240;
  --bs-secondary-color: var(--hume-muted);
  --bs-tertiary-color: var(--hume-dim);
  --bs-border-color: var(--hume-border);
  --bs-border-color-translucent: var(--hume-border);
  --bs-emphasis-color: var(--hume-text);
  --bs-link-color: var(--hume-accent);
  --bs-link-hover-color: var(--hume-accent-2);
  --bs-link-color-rgb: 249, 115, 22;
  --bs-primary: var(--hume-accent);
  --bs-primary-rgb: 249, 115, 22;
}

/* ── Canvas ─────────────────────────────────────────────── */
html, body {
  background: var(--hume-bg) !important;
  color: var(--hume-text);
}

main.container,
main {
  color: var(--hume-text);
}

/* Subtle ambient backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(249, 115, 22, 0.06), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(96, 165, 250, 0.04), transparent 60%);
  z-index: -1;
}

a { color: var(--hume-accent); }
a:hover { color: var(--hume-accent-2); }

/* Selection */
::selection { background: var(--hume-accent-soft); color: var(--hume-text); }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar.bg-dark,
.navbar-dark.bg-dark {
  background: rgba(14, 16, 20, 0.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hume-border);
  padding-top: 8px;
  padding-bottom: 8px;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--hume-muted);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 2px;
  transition: color 0.18s ease, background 0.18s ease;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--hume-text);
  background: var(--hume-surface-2);
}
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--hume-accent);
  background: var(--hume-accent-soft);
}
.navbar-dark .navbar-brand img {
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.15));
}

.dropdown-menu {
  background: var(--hume-surface);
  border: 1px solid var(--hume-border);
  border-radius: var(--hume-radius-sm);
  box-shadow: var(--hume-shadow-lg);
  padding: 6px;
}
.dropdown-menu .dropdown-item {
  color: var(--hume-text);
  border-radius: 8px;
  padding: 8px 12px;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--hume-surface-2);
  color: var(--hume-text);
}
.dropdown-menu .dropdown-divider { border-color: var(--hume-border); }
.dropdown-menu .dropdown-item-text { color: var(--hume-muted); }
.dropdown-menu .dropdown-item.text-warning { color: var(--hume-warning) !important; }

/* ── Cards ──────────────────────────────────────────────── */
.card,
.card.bg-dark {
  background: var(--hume-surface) !important;
  border: 1px solid var(--hume-border) !important;
  border-radius: var(--hume-radius) !important;
  color: var(--hume-text);
  box-shadow: var(--hume-shadow);
  overflow: hidden;
  position: relative;
}

/* Soft top glow on cards */
.card::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  width: 220px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }

/* Color-coded card border accents are reduced to a thin top stripe so the
   card itself stays charcoal */
.card.border-primary { border-color: var(--hume-border) !important; }
.card.border-primary::after,
.card.border-info::after,
.card.border-success::after,
.card.border-warning::after,
.card.border-danger::after,
.card.border-secondary::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}
.card.border-primary::after { background: linear-gradient(90deg, transparent, var(--hume-accent), transparent); }
.card.border-info::after    { background: linear-gradient(90deg, transparent, var(--hume-info), transparent); }
.card.border-success::after { background: linear-gradient(90deg, transparent, var(--hume-success), transparent); }
.card.border-warning::after { background: linear-gradient(90deg, transparent, var(--hume-warning), transparent); }
.card.border-danger::after  { background: linear-gradient(90deg, transparent, var(--hume-danger), transparent); }
.card.border-secondary::after { background: linear-gradient(90deg, transparent, var(--hume-muted), transparent); opacity: 0.4; }

.card-header,
.card-header.bg-transparent,
.card-header.border-info,
.card-header.border-primary {
  background: transparent !important;
  border-bottom: 1px solid var(--hume-border) !important;
  color: var(--hume-text);
  padding: 14px 20px;
  font-weight: 600;
}
.card-header h5,
.card-header h4,
.card-header h3 {
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.card-body { padding: 20px; }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--hume-border);
  color: var(--hume-muted);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 18px;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.06s ease,
              box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }

.btn-sm  { padding: 4px 12px; font-size: 0.82rem; }
.btn-xs  { padding: 2px 8px;  font-size: 0.75rem; border-radius: 999px; }
.btn-lg  { padding: 12px 24px; font-size: 1rem; }

/* Primary → warm orange pill.
   !important needed because Bootstrap 5.3 dark theme drives button colour
   through --bs-btn-bg / --bs-btn-color CSS variables scoped at
   [data-bs-theme="dark"], which beats plain `.btn-primary` rules. */
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg: var(--hume-accent);
  --bs-btn-border-color: var(--hume-accent);
  --bs-btn-color: #1a0d04;
  --bs-btn-hover-bg: var(--hume-accent-2);
  --bs-btn-hover-border-color: var(--hume-accent-2);
  --bs-btn-hover-color: #1a0d04;
  --bs-btn-active-bg: var(--hume-accent-2);
  --bs-btn-active-border-color: var(--hume-accent-2);
  --bs-btn-active-color: #1a0d04;
  --bs-btn-disabled-bg: var(--hume-accent);
  --bs-btn-disabled-border-color: var(--hume-accent);
  --bs-btn-disabled-color: #1a0d04;
  background-color: var(--hume-accent) !important;
  border-color: var(--hume-accent) !important;
  color: #1a0d04 !important;
  box-shadow: 0 6px 16px var(--hume-accent-glow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--hume-accent-2) !important;
  border-color: var(--hume-accent-2) !important;
  color: #1a0d04 !important;
  box-shadow: 0 8px 22px var(--hume-accent-glow);
}
.btn-primary:disabled, .btn-primary.disabled {
  opacity: 0.55;
  box-shadow: none;
}

/* Add the trailing ››› chevron to large primary actions automatically.
   Smaller buttons keep clean labels so toolbars don't get noisy. */
.btn-primary.btn-lg::after,
.btn-success.btn-lg::after,
.btn-pill::after {
  content: " \203A\203A\203A";
  font-weight: 700;
  margin-left: 10px;
  letter-spacing: 1px;
  opacity: 0.85;
}

/* Other semantic buttons → keep semantic color but as pills.
   Same !important pattern as .btn-primary to beat Bootstrap dark-theme
   CSS-variable defaults. */
.btn-success, .btn.btn-success {
  background-color: var(--hume-success) !important;
  border-color: var(--hume-success) !important;
  color: #052e1c !important;
}
.btn-success:hover, .btn.btn-success:hover {
  background-color: #6ee7b7 !important; border-color: #6ee7b7 !important; color: #052e1c !important;
}
.btn-info, .btn.btn-info {
  background-color: var(--hume-info) !important;
  border-color: var(--hume-info) !important;
  color: #0a1a30 !important;
}
.btn-info:hover, .btn.btn-info:hover {
  background-color: #93c5fd !important; border-color: #93c5fd !important; color: #0a1a30 !important;
}
.btn-warning, .btn.btn-warning {
  background-color: var(--hume-warning) !important;
  border-color: var(--hume-warning) !important;
  color: #2a1a02 !important;
}
.btn-warning:hover, .btn.btn-warning:hover {
  background-color: #fcd34d !important; border-color: #fcd34d !important; color: #2a1a02 !important;
}
.btn-danger, .btn.btn-danger {
  background-color: var(--hume-danger) !important;
  border-color: var(--hume-danger) !important;
  color: #2a0606 !important;
}
.btn-danger:hover, .btn.btn-danger:hover {
  background-color: #fca5a5 !important; border-color: #fca5a5 !important; color: #2a0606 !important;
}

.btn-secondary, .btn.btn-secondary {
  background-color: var(--hume-surface-3) !important;
  border-color: var(--hume-border-strong) !important;
  color: var(--hume-text) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover {
  background-color: #262b36 !important;
  border-color: var(--hume-border-strong) !important;
  color: var(--hume-text) !important;
}

.btn-light, .btn.btn-light {
  background-color: var(--hume-text) !important;
  border-color: var(--hume-text) !important;
  color: #0a0c10 !important;
}
.btn-light:hover, .btn.btn-light:hover {
  background-color: #ffffff !important; border-color: #ffffff !important; color: #0a0c10 !important;
}

.btn-dark, .btn.btn-dark {
  background-color: var(--hume-surface) !important;
  border-color: var(--hume-border-strong) !important;
  color: var(--hume-text) !important;
}

/* Outline buttons → ghost pills */
.btn-outline-primary, .btn.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--hume-accent) !important;
  color: var(--hume-accent) !important;
}
.btn-outline-primary:hover, .btn.btn-outline-primary:hover,
.btn-outline-primary:focus, .btn.btn-outline-primary:focus {
  background-color: var(--hume-accent-soft) !important;
  color: var(--hume-accent) !important;
}

.btn-outline-info, .btn.btn-outline-info {
  background-color: transparent !important;
  border: 1px solid var(--hume-info) !important;
  color: var(--hume-info) !important;
}
.btn-outline-info:hover, .btn.btn-outline-info:hover {
  background-color: var(--hume-info-soft) !important; color: var(--hume-info) !important;
}

.btn-outline-success, .btn.btn-outline-success {
  background-color: transparent !important;
  border: 1px solid var(--hume-success) !important;
  color: var(--hume-success) !important;
}
.btn-outline-success:hover, .btn.btn-outline-success:hover {
  background-color: var(--hume-success-soft) !important; color: var(--hume-success) !important;
}

.btn-outline-warning, .btn.btn-outline-warning {
  background-color: transparent !important;
  border: 1px solid var(--hume-warning) !important;
  color: var(--hume-warning) !important;
}
.btn-outline-warning:hover, .btn.btn-outline-warning:hover {
  background-color: var(--hume-warning-soft) !important; color: var(--hume-warning) !important;
}

.btn-outline-danger, .btn.btn-outline-danger {
  background-color: transparent !important;
  border: 1px solid var(--hume-danger) !important;
  color: var(--hume-danger) !important;
}
.btn-outline-danger:hover, .btn.btn-outline-danger:hover {
  background-color: var(--hume-danger-soft) !important; color: var(--hume-danger) !important;
}

.btn-outline-secondary, .btn.btn-outline-secondary {
  background-color: transparent !important;
  border: 1px solid var(--hume-border-strong) !important;
  color: var(--hume-muted) !important;
}
.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover {
  background-color: var(--hume-surface-3) !important;
  color: var(--hume-text) !important;
}

/* Focus ring for keyboard navigation — preserve a11y */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--hume-accent-soft) !important;
  border-color: var(--hume-accent) !important;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
}
.badge.bg-primary   { background: var(--hume-accent-soft) !important;  color: var(--hume-accent) !important; }
.badge.bg-success   { background: var(--hume-success-soft) !important; color: var(--hume-success) !important; }
.badge.bg-info      { background: var(--hume-info-soft) !important;    color: var(--hume-info) !important; }
.badge.bg-warning   { background: var(--hume-warning-soft) !important; color: var(--hume-warning) !important; }
.badge.bg-danger    { background: var(--hume-danger-soft) !important;  color: var(--hume-danger) !important; }
.badge.bg-secondary { background: var(--hume-secondary-soft) !important; color: var(--hume-muted) !important; }
.badge.bg-light     { background: var(--hume-surface-3) !important;    color: var(--hume-text) !important; }
.badge.bg-dark      { background: var(--hume-surface) !important;      color: var(--hume-text) !important; }

/* Preserve project-status semantics — these classes carry meaning on maps,
   dashboards, and reports. Used both as badges AND as bare text color on
   summary headings (e.g. agency dashboard count cards). */
.badge.status-planned     { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; }
.badge.status-in_progress { background: rgba(167, 139, 250, 0.18) !important; color: #c4b5fd !important; }
.badge.status-scheduled_next { background: var(--hume-accent-soft) !important; color: var(--hume-accent) !important; }
.badge.status-delayed     { background: var(--hume-danger-soft) !important;  color: var(--hume-danger) !important; }
.badge.status-completed   { background: var(--hume-success-soft) !important; color: var(--hume-success) !important; }

/* Bare status classes (no .badge) — used on count headings */
.status-planned        { color: #93c5fd; }
.status-in_progress    { color: #c4b5fd; }
.status-scheduled_next { color: var(--hume-accent); }
.status-delayed        { color: var(--hume-danger); }
.status-completed      { color: var(--hume-success); }

/* Role badges (used in navbar dropdown) */
.badge-contractor { background: var(--hume-accent-soft); color: var(--hume-accent); }
.badge-resident   { background: var(--hume-info-soft);   color: var(--hume-info); }
.badge-agency     { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  border: 1px solid var(--hume-border);
  border-left-width: 3px;
  border-radius: var(--hume-radius-sm);
  background: var(--hume-surface);
  color: var(--hume-text);
  padding: 14px 18px;
}
.alert-info    { border-left-color: var(--hume-info);    background: linear-gradient(90deg, var(--hume-info-soft), var(--hume-surface) 40%); color: var(--hume-text); }
.alert-success { border-left-color: var(--hume-success); background: linear-gradient(90deg, var(--hume-success-soft), var(--hume-surface) 40%); color: var(--hume-text); }
.alert-warning { border-left-color: var(--hume-warning); background: linear-gradient(90deg, var(--hume-warning-soft), var(--hume-surface) 40%); color: var(--hume-text); }
.alert-danger  { border-left-color: var(--hume-danger);  background: linear-gradient(90deg, var(--hume-danger-soft), var(--hume-surface) 40%); color: var(--hume-text); }
.alert-primary { border-left-color: var(--hume-accent);  background: linear-gradient(90deg, var(--hume-accent-soft), var(--hume-surface) 40%); color: var(--hume-text); }
.alert .btn-close { filter: invert(0.85); }
.alert-link { color: var(--hume-accent); text-decoration: none; font-weight: 600; }
.alert-link:hover { color: var(--hume-accent-2); }

/* ── Forms ──────────────────────────────────────────────── */
.form-control,
.form-select,
.input-group-text {
  background: var(--hume-surface-2);
  border: 1px solid var(--hume-border);
  color: var(--hume-text);
  border-radius: 12px;
  padding: 10px 14px;
}
.form-control::placeholder { color: var(--hume-dim); }
.form-control:focus,
.form-select:focus {
  background: var(--hume-surface-2);
  color: var(--hume-text);
}
.input-group-text {
  background: var(--hume-surface-3);
  color: var(--hume-muted);
}
.form-label { color: var(--hume-text); font-weight: 500; }
.form-text  { color: var(--hume-muted); }
.form-check-input {
  background-color: var(--hume-surface-3);
  border-color: var(--hume-border-strong);
}
.form-check-input:checked {
  background-color: var(--hume-accent);
  border-color: var(--hume-accent);
}

/* ── Modals ─────────────────────────────────────────────── */
.modal-content,
.modal-content.bg-dark {
  background: var(--hume-surface) !important;
  border: 1px solid var(--hume-border) !important;
  border-radius: var(--hume-radius) !important;
  color: var(--hume-text);
  box-shadow: var(--hume-shadow-lg);
}
.modal-header,
.modal-header.border-info,
.modal-header.border-primary,
.modal-header.border-success,
.modal-header.border-secondary {
  border-bottom: 1px solid var(--hume-border) !important;
}
.modal-footer,
.modal-footer.border-secondary,
.modal-footer.border-info {
  border-top: 1px solid var(--hume-border) !important;
}
.modal-title { font-weight: 600; letter-spacing: -0.01em; }
.btn-close.btn-close-white,
.modal .btn-close { filter: invert(1) grayscale(100%) brightness(1.3); }
.modal-backdrop.show { opacity: 0.7; }

/* ── Tables ─────────────────────────────────────────────── */
.table,
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hume-text);
  --bs-table-border-color: var(--hume-border);
  --bs-table-striped-bg: var(--hume-surface-2);
  --bs-table-hover-bg: var(--hume-surface-3);
  --bs-table-hover-color: var(--hume-text);
  color: var(--hume-text);
}
.table thead th,
.table-dark thead th {
  color: var(--hume-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hume-border) !important;
  background: transparent;
  padding: 12px 14px;
}
.table tbody td,
.table-dark tbody td {
  border-color: var(--hume-border);
  padding: 14px;
  vertical-align: middle;
}
.table.table-hover tbody tr:hover,
.table-dark.table-hover tbody tr:hover {
  background: var(--hume-surface-2);
}

/* ── Nav pills / segmented controls ─────────────────────── */
.nav-pills {
  background: var(--hume-surface-2);
  border: 1px solid var(--hume-border);
  border-radius: 999px;
  padding: 4px;
  display: inline-flex;
  gap: 2px;
}
.nav-pills .nav-link {
  color: var(--hume-muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 500;
}
.nav-pills .nav-link:hover { color: var(--hume-text); }
.nav-pills .nav-link.active {
  background: var(--hume-accent) !important;
  color: #1a0d04 !important;
  box-shadow: 0 4px 12px var(--hume-accent-glow);
}

.nav-tabs {
  border-bottom: 1px solid var(--hume-border);
}
.nav-tabs .nav-link {
  color: var(--hume-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
}
.nav-tabs .nav-link:hover { color: var(--hume-text); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--hume-accent);
  background: transparent;
  border-color: var(--hume-accent);
}

/* ── List group ─────────────────────────────────────────── */
.list-group-item {
  background: var(--hume-surface);
  border-color: var(--hume-border);
  color: var(--hume-text);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--hume-surface-2);
  color: var(--hume-text);
}

/* ── Pagination ─────────────────────────────────────────── */
.page-link {
  background: var(--hume-surface);
  border-color: var(--hume-border);
  color: var(--hume-text);
}
.page-item.active .page-link {
  background: var(--hume-accent);
  border-color: var(--hume-accent);
  color: #1a0d04;
}
.page-link:hover {
  background: var(--hume-surface-2);
  color: var(--hume-text);
  border-color: var(--hume-border);
}

/* ── Footer ─────────────────────────────────────────────── */
footer.bg-dark {
  background: var(--hume-surface) !important;
  border-top: 1px solid var(--hume-border);
  color: var(--hume-muted) !important;
}
footer h5 { color: var(--hume-text); }
footer a { color: var(--hume-muted); }
footer a:hover { color: var(--hume-accent); }

/* ── Text colour helpers ────────────────────────────────── */
.text-muted { color: var(--hume-muted) !important; }
.text-primary { color: var(--hume-accent) !important; }
.text-success { color: var(--hume-success) !important; }
.text-info    { color: var(--hume-info) !important; }
.text-warning { color: var(--hume-warning) !important; }
.text-danger  { color: var(--hume-danger) !important; }

hr { border-color: var(--hume-border); opacity: 1; }

/* ── Eyebrow / section heading pattern ──────────────────── */
.hume-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hume-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Leading-icon list row (reusable) ───────────────────── */
.hume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hume-surface-2);
  border: 1px solid transparent;
  border-radius: var(--hume-radius-sm);
  color: var(--hume-text);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.hume-row + .hume-row { margin-top: 8px; }
.hume-row:hover {
  background: var(--hume-surface-3);
  border-color: var(--hume-border);
  color: var(--hume-text);
  transform: translateX(2px);
}
.hume-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--hume-accent-soft);
  color: var(--hume-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hume-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hume-row__title { font-weight: 500; font-size: 0.94rem; }
.hume-row__sub   { font-size: 0.78rem; color: var(--hume-muted); }
.hume-row__meta  { font-size: 0.78rem; color: var(--hume-muted); flex-shrink: 0; }

/* ── Headings ───────────────────────────────────────────── */
h1, .display-5, .display-4, .display-3 { letter-spacing: -0.02em; font-weight: 300; }
.fw-bold { font-weight: 600 !important; }

/* ── Loader spinner colour update ───────────────────────── */
.loader-spinner {
  border-color: var(--hume-border) !important;
  border-top-color: var(--hume-accent) !important;
}

/* ── Keep existing message bubbles untouched (user preference) ──── */
/* custom.css's .message-bubble.sent / .received rules stay authoritative */

/* ── Messaging chrome ───────────────────────────────────── */
/* Conversation list rows used on contractor/resident messages pages.
   They start as `.list-group-item .list-group-item-action .bg-dark
   .text-light .border-secondary .conversation-link` — we promote them
   to the Hume row aesthetic while keeping their existing markup. */
.list-group-item.conversation-link,
.list-group-item-action.conversation-link {
  background: var(--hume-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hume-border) !important;
  color: var(--hume-text) !important;
  padding: 14px 18px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.list-group-item.conversation-link:hover,
.list-group-item-action.conversation-link:hover,
.list-group-item.conversation-link:focus,
.list-group-item-action.conversation-link:focus {
  background: var(--hume-surface-2) !important;
  transform: translateX(2px);
}
.list-group-item.conversation-link.active,
.list-group-item-action.conversation-link.active {
  background: var(--hume-surface-3) !important;
  border-left: 3px solid var(--hume-accent) !important;
}
.conversation-link .text-info { color: var(--hume-info) !important; }

/* contacts.html / clean_conversation conversation list */
.conversation-item {
  background: var(--hume-surface) !important;
  border-bottom: 1px solid var(--hume-border) !important;
  color: var(--hume-text) !important;
  transition: background 0.18s ease, transform 0.18s ease;
}
.conversation-item:hover {
  background: var(--hume-surface-2) !important;
  transform: translateX(2px);
}
.conversation-item.active {
  background: var(--hume-surface-3) !important;
  border-left: 3px solid var(--hume-accent) !important;
}

/* Circular send button keeps its shape but the orange pill skin from
   .btn-primary already overrides bg/color/border. Just lock the radius. */
.btn-primary.rounded-circle {
  border-radius: 50% !important;
  padding: 0;
  width: 44px;
  height: 44px;
}

/* Chat input area surface (composer) — sits at the bottom of the thread.
   The textarea itself is inline-styled to look like an SMS input
   (light bg + dark text) which matches the bubble theme; just polish
   the wrapper. */
.chat-input-area {
  background: var(--hume-surface);
  border-top: 1px solid var(--hume-border);
}

/* Messaging sidebar card (left rail) — uses .bg-dark .border-secondary */
#convoCard,
.messaging-sidebar {
  background: var(--hume-surface) !important;
}

/* ── Forms inside cards play nice with dark surface ─────── */
.card .form-control,
.card .form-select { background: var(--hume-surface-3); }

/* ── Scrollbars (subtle, dark-friendly) ─────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hume-border-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--hume-border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--hume-muted); }