/* =============================================================================
   RealEstate.WebAdmin — design system
   - Layout patterns inspired by the Ynex Blazor admin theme
   - Color palette inherited from RealEstate.WebApp (Nerf / RE/MAX brand)
   - Typography: Jost (same as the public website)
   - Icons: RemixIcon outline variants (ri-*-line)
   ========================================================================== */

:root {
  /* SCB brand palette (mirrors the new SCB website: arena bg, warm-black structure,
     jade = action/green, dorado = detail/gold). Admin stays English; brand + colours only. */
  --color-accent-1: #1F7A57;            /* jade — primary action (buttons, active) */
  --color-accent-1-hover: #175E43;      /* jade-d */
  --color-accent-1-soft: rgba(31, 122, 87, 0.09);
  --color-accent-2: #EFE9DE;            /* arena-2 — soft surface */
  --color-gold: #C2A056;                /* dorado — detail/accent */
  --color-gold-strong: #A6883F;         /* dorado-d */
  --color-dark-1: #1A1714;              /* noir — sidebar/structure */
  --color-dark-2: #26221D;              /* noir-2 */
  --color-dark-3: #141110;              /* deepest */
  --color-dark-5: #3A332B;              /* warm hover on dark */
  --color-border: #E7E1D4;             /* warm light border */
  --color-border-strong: #D8CFBE;
  --color-bg: #F7F3EC;                  /* arena */
  --color-surface: #FFFFFF;             /* blanco */
  --color-text: #211D18;               /* tinta */
  --color-text-muted: #7C7468;         /* gris */
  --color-text-subtle: #A69E90;

  /* Shell metrics */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --header-height: 60px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   Bootstrap overrides (just enough to follow the brand)
   ========================================================================== */
.btn {
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Never show Bootstrap's blue focus/active ring on a click. Keyboard focus keeps a brand-coloured
   outline only (focus-visible), so mouse clicks stay clean. Applies to every admin button. */
.btn:focus,
.btn:active,
.btn-icon:focus,
.btn-icon:active {
  box-shadow: none !important;
  outline: none;
}
.btn:focus-visible,
.btn-icon:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}
/* Native file input ("Choose File") — no blue focus ring either. */
input[type="file"]:focus,
input[type="file"]:focus-visible {
  outline: none;
  box-shadow: none;
}
.import-row__file::file-selector-button:focus {
  outline: none;
}
.btn-primary {
  /* Drive Bootstrap 5.3's own state selectors via its CSS variables so hover / :active /
     :focus never fall back to Bootstrap's blue. Bootstrap's active selector
     (.btn:first-child:active, specificity 0,3,0) outranks a plain .btn-primary:active
     override, so setting the variables is the only reliable fix. */
  --bs-btn-bg: var(--color-accent-1);
  --bs-btn-border-color: var(--color-accent-1);
  --bs-btn-hover-bg: var(--color-accent-1-hover);
  --bs-btn-hover-border-color: var(--color-accent-1-hover);
  --bs-btn-active-bg: var(--color-accent-1-hover);
  --bs-btn-active-border-color: var(--color-accent-1-hover);
  --bs-btn-disabled-bg: var(--color-accent-1);
  --bs-btn-disabled-border-color: var(--color-accent-1);
  --bs-btn-focus-shadow-rgb: 31, 122, 87;
  --bs-btn-active-shadow: none;
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--color-accent-1-hover);
  border-color: var(--color-accent-1-hover);
  color: #fff;
}
/* Disabled primary keeps the brand jade (faded) — never Bootstrap's blue. */
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
  opacity: 0.45;
}

/* In-flight form-submit feedback. Applied by the global submit listener
   in App.razor — replaces the button content with a centered spinner so
   the button width stays stable (no layout jump) and double-clicks are
   blocked via pointer-events: none. */
.btn.is-loading {
  pointer-events: none;
  position: relative;
}
.btn.is-loading > * {
  visibility: hidden;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: page-loader-spin 0.7s linear infinite;
}

.form-control {
  font-family: inherit;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border-color: var(--color-border-strong);
  padding: 0.5rem 0.75rem;
}
.form-control:focus {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 0 0.2rem var(--color-accent-1-soft);
}

.form-check-input:checked {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
}
.form-check-input:focus {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 0 0.25rem var(--color-accent-1-soft);
}

.alert-danger {
  background: var(--color-accent-1-soft);
  border-color: var(--color-accent-1);
  color: var(--color-accent-1-hover);
}

/* =============================================================================
   Snackbar / Toast — fixed-position stack used by ToastHost (interactive
   pages) and by Login (static SSR via CSS-only auto-dismiss). The .snackbar
   class is the single visual contract; variants colour the left rail and
   the icon.
   ========================================================================== */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* Above the modal overlay (.confirm-overlay z-index 1090) so validation toasts are never hidden. */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  pointer-events: none;          /* clicks fall through gaps */
}

.snackbar {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-muted);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  pointer-events: auto;
  animation: snackbar-in 0.25s ease-out;
}
.snackbar--info    { border-left-color: #3B82F6; }
.snackbar--success { border-left-color: #16A34A; }
.snackbar--warning { border-left-color: #F59E0B; }
/* Errors are red (semantic), distinct from success/warning — not the brand jade. */
.snackbar--error   { border-left-color: #DC2626; }

.snackbar__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.snackbar--info    .snackbar__icon { color: #3B82F6; }
.snackbar--success .snackbar__icon { color: #16A34A; }
.snackbar--warning .snackbar__icon { color: #F59E0B; }
.snackbar--error   .snackbar__icon { color: #DC2626; }

.snackbar__body {
  flex: 1;
  min-width: 0;
}
.snackbar__message {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-word;
}
.snackbar__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.snackbar__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Interactive pages — ToastHost manipulates this class to play the exit
   animation before removing the node from the DOM. */
.snackbar.is-leaving {
  animation: snackbar-out 0.25s ease-in forwards;
}

/* Login page — pure CSS lifecycle since the page is static SSR.
   ONE animation with all keyframes inline. Two parallel animations
   with `forwards` on both could ghost in some browsers when the second
   one started after the first held its final state; a single timeline
   removes the ambiguity. */
.snackbar--auto-dismiss {
  animation: snackbar-cycle 5.5s ease forwards;
  pointer-events: none;
}

@keyframes snackbar-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes snackbar-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
@keyframes snackbar-cycle {
  0%    { opacity: 0; transform: translateX(20px); }
  5%    { opacity: 1; transform: translateX(0); }    /* slide-in finished at ~0.275s */
  91%   { opacity: 1; transform: translateX(0); }    /* hold until ~5.0s */
  100%  { opacity: 0; transform: translateX(20px); } /* slide-out by 5.5s */
}

/* =============================================================================
   Empty layout (login + error)
   ========================================================================== */
.empty-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-dark-1) 0%, var(--color-dark-3) 100%);
  padding: 24px;
}

.login-shell {
  width: 100%;
  max-width: 440px;
}
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.login-brand__mark {
  color: var(--color-accent-1);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.04em;
}
.login-brand__suffix {
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.login-title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 6px;
  color: var(--color-text);
}
.login-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 24px;
}
.login-form {
  display: flex;
  flex-direction: column;
}
.login-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 6px;
}
.login-input {
  position: relative;
}
.login-input__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 16px;
  pointer-events: none;
}
.login-input .form-control {
  padding-left: 40px;
}
.login-submit {
  margin-top: 28px;
  padding: 10px 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-submit i {
  font-size: 16px;
}
.login-submit__spin {
  animation: login-spin 0.9s linear infinite;
}
@keyframes login-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================================
   App shell — sidebar + header + content
   ========================================================================== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ----- Sidebar ----- */
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--color-dark-1);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Square container by design — never round the sidebar's outer corners. */
  border-radius: 0;
  transition: width 0.2s ease;
  overflow: hidden;
}
/* Used briefly by sidebar.js when reconciling the remembered collapse state after
   an enhanced navigation, so the rail doesn't animate open→closed on every load. */
.app-shell--no-anim .app-sidebar {
  transition: none !important;
}
.app-sidebar__brand {
  display: flex;
  flex-direction: column;
  height: var(--header-height);
  padding: 0 20px;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-sidebar__brand-mark {
  color: var(--color-gold);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.app-sidebar__brand-suffix {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.app-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 2px;
}
.app-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav__item:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.app-nav__item.active {
  background: var(--color-accent-1);
  color: #fff;
}
.app-nav__item.active:hover {
  background: var(--color-accent-1-hover);
}
.app-nav__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.app-nav__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed sidebar — icon-only mode */
.app-shell.is-collapsed .app-sidebar {
  width: var(--sidebar-width-collapsed);
}
.app-shell.is-collapsed .app-sidebar__brand-suffix {
  display: none;
}
.app-shell.is-collapsed .app-sidebar__brand {
  padding: 0;
  align-items: center;
  justify-content: center;
}
.app-shell.is-collapsed .app-sidebar__brand-mark {
  font-size: 16px;
}
.app-shell.is-collapsed .app-nav__item {
  justify-content: center;
  padding: 10px 0;
}
.app-shell.is-collapsed .app-nav__label {
  display: none;
}

/* ----- Main panel ----- */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;            /* prevent table overflow from pushing the sidebar */
}

/* ----- Header ----- */
.app-header {
  background: var(--color-surface);
  height: var(--header-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.app-header__toggle {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.app-header__toggle:hover {
  background: var(--color-bg);
}
.app-header__spacer { flex: 1; }
.app-header__user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.app-header__user i {
  font-size: 18px;
}
.app-header__logout {
  margin: 0;
}
.app-header__logout-btn {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.app-header__logout-btn:hover {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}

/* ----- Content ----- */
.app-content {
  padding: 24px 28px 40px;
  flex: 1;
}

.page-header {
  margin-bottom: 24px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.page-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

/* ----- Page loader ----- */
.page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  color: var(--color-text-muted);
}
.page-loader__icon {
  font-size: 36px;
  color: var(--color-accent-1);
  animation: page-loader-spin 0.9s linear infinite;
}
.page-loader__icon--inline {
  font-size: 18px;
  color: var(--color-accent-1);
  animation: page-loader-spin 0.9s linear infinite;
}
.page-loader__label {
  font-size: 13px;
  letter-spacing: 0.04em;
}
@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

/* ----- Validation message under login inputs ----- */
.login-validation {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-accent-1);
  font-weight: 500;
}

/* =============================================================================
   Dashboard
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.stat-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.stat-card__icon--neutral {
  background: rgba(24, 29, 36, 0.06);
  color: var(--color-dark-1);
}
.stat-card__icon--accent {
  background: var(--color-accent-1-soft);
  color: var(--color-accent-1);
}
.stat-card__icon--muted {
  background: rgba(107, 114, 128, 0.10);
  color: var(--color-text-muted);
}
.stat-card__body {
  display: flex;
  flex-direction: column;
}
.stat-card__label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.stat-card__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

/* =============================================================================
   Data card / table
   ========================================================================== */
.card-shell {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-shell__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: #FAFBFC;
}
/* Title inside a toolbar (e.g. the SCB Marketing panels). Resets the default
   heading margin so it sits inline with the count/actions, without an inline style. */
.card-shell__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
/* Two-row variant: row 1 = search + count, row 2 = filter dropdowns. */
.card-shell__toolbar--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.card-shell__toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Let the search field stretch across row 1 (the count keeps its
   margin-left:auto, so it stays pinned to the right). */
.card-shell__toolbar--stacked .search-input {
  max-width: none;
}
/* Filter dropdowns fill row 2 evenly so they read larger than the
   default capped width. */
.card-shell__filters {
  flex-wrap: wrap;
}
.card-shell__filters .card-shell__filter {
  flex: 1 1 0;
  min-width: 220px;
  max-width: none;
}
.search-input {
  position: relative;
  flex: 1;
  max-width: 380px;
}
.search-input__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 16px;
  pointer-events: none;
}
.search-input .form-control {
  padding-left: 36px;
}
.card-shell__filter {
  /* Auto-sized .form-select sitting between the search input and the
     count. Capped width keeps it from swallowing the toolbar on wide
     viewports; min-width ensures the longest label ("All platforms")
     never wraps. */
  width: auto;
  min-width: 180px;
  max-width: 220px;
  flex: 0 0 auto;
}
.card-shell__count {
  color: var(--color-text-muted);
  font-size: 13px;
  /* Push the count to the far right of the toolbar regardless of how
     many controls sit to its left. Without this, the count would
     bunch up against the filter select. */
  margin-left: auto;
}
/* Padded content region inside a card-shell (below the toolbar). */
.card-shell__body {
  padding: 20px;
}

/* ----- Reusable labelled field grid ----------------------------
   A responsive grid of stacked label+control "fields" — inputs share
   equal widths and align to a clean baseline instead of bunching up
   with mismatched max-widths. Actions sit on their own right-aligned
   row below. Used by the Agents add form; reuse anywhere a compact
   inline create/edit form is needed. */
.field-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.field__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.field-grid__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
/* Cap the agents form at four columns so the fields don't stretch too
   wide on large screens; auto-fit still collapses them on narrow ones. */
.field-grid--agents {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .field-grid--agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .field-grid--agents { grid-template-columns: 1fr; }
  .field-grid__actions { justify-content: stretch; }
  .field-grid__actions .btn { width: 100%; }
}

.data-table {
  margin: 0;
}
.data-table thead th {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.data-table tbody td {
  font-size: 14px;
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  font-family: inherit;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover {
  background: rgba(31, 122, 87, 0.03);
}

/* ----- Row action icon (edit link from Index to Detail) ----- */
.data-table__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.data-table__action:hover {
  background: var(--color-accent-1-soft);
  color: var(--color-accent-1);
}

/* Narrow column reserved for the row-action edit link. Defined here
   instead of an inline `style="width:60px"` attribute per the project's
   "no inline CSS in HTML" rule. */
.data-table__col--action {
  width: 60px;
}

/* ----- Platform column (Properties grid) -----
   Compact single-letter badges showing which portal a listing ships
   to: "Z" for Zap, "I" for Imovelweb. Both possible, neither possible
   (web-only). Sized to match the column width so two tokens still fit
   without wrapping. */
.platform-badge {
  display: inline-flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.platform-badge__token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-1-soft);
  color: var(--color-accent-1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
/* "P" — a Propio (agency-owned) listing. Distinct green tint from the portal tokens. */
.platform-badge__token--own {
  background: rgba(47, 110, 80, 0.14);
  color: #2f6e50;
}

/* ----- Sortable column headers ----- */
.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.data-table thead th.sortable:hover {
  background: #ECEEF1;
  color: var(--color-accent-1);
}
.data-table thead th.sortable.is-active {
  color: var(--color-accent-1);
}
.sortable__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Center-aligned and end-aligned sortable headers keep the icon next to
   the label rather than letting it drift to the opposite edge. */
.data-table thead th.sortable.text-center .sortable__inner {
  justify-content: center;
}
.data-table thead th.sortable.text-end .sortable__inner {
  justify-content: flex-end;
}
.sortable__icon {
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.data-table thead th.sortable.is-active .sortable__icon,
.data-table thead th.sortable:hover .sortable__icon {
  opacity: 1;
}

/* =============================================================================
   Detail form (single-record edit, e.g. Properties/Detail.razor)
   ========================================================================== */
.detail-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Article detail (tabbed, read-only): wider left/right margins so the tabs and
   their content sit further from the card edges. */
.detail-form.article-detail {
  padding-left: 48px;
  padding-right: 48px;
  gap: 16px;
}
@media (max-width: 575px) {
  .detail-form.article-detail {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Article detail tabs — SCB palette, never Bootstrap's default blue links.
   Inactive tabs read as muted brand text; hover darkens to full text + a faint
   underline; the SELECTED tab gets a clean gold (dorado) underline instead of the
   default boxed gray border. */
.article-detail .nav-tabs .nav-link {
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.article-detail .nav-tabs .nav-link:hover,
.article-detail .nav-tabs .nav-link:focus {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
.article-detail .nav-tabs .nav-link i {
  color: inherit;
}
.article-detail .nav-tabs .nav-link.active {
  border-color: transparent transparent var(--color-gold);
  border-bottom-width: 2px;
  color: var(--color-accent-1);
  font-weight: 600;
}
.detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-section__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.detail-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.detail-help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.detail-switches {
  /* Switches sit on a single horizontal row so the Visibility section
     reads as one compact group: Published · Show on Zap · Show on
     Imovelweb. `flex-wrap: wrap` keeps the layout sane on a narrow
     viewport (mobile / tablet split-pane) — the rows fall back to a
     stack instead of overflowing the section. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.detail-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
/* Strip Bootstrap's default .form-check padding so the wrapper takes
   only the room its switch needs — without this override the .form-check
   block would inject an extra 1.5em of left padding and push every row's
   label out of alignment with the section heading above. */
.detail-switch .form-check.form-switch {
  display: inline-flex;
  align-items: center;
  padding-left: 2.5em;
  margin: 0;
  min-height: auto;
}
.detail-switch .form-check-input {
  width: 2.5em;
  height: 1.25em;
  margin: 0;
  cursor: pointer;
}
.detail-switch__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  margin: 0;
}
/* Labelled sub-group inside the Visibility section: a muted caption column
   followed by its switches, so publication / portals / featured read as
   distinct tidy rows. Wraps on a narrow split-pane. */
.detail-subgroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.detail-subgroup__label {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}
/* Availability select — its own titled section, so it's a compact standalone
   field (the section heading is its label). */
.detail-availability__select {
  max-width: 240px;
}

/* Sold / Rented pill shown next to the property title in the grid. Sold =
   neutral/muted (the listing is "gone"), Rented = brand accent. */
.availability-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* Sold + rented share the same neutral/dark pill — deliberately NOT the
   brand red, so the "no longer available" marker doesn't read as a CTA. */
.availability-tag--sold,
.availability-tag--rented {
  background: var(--color-text);
  color: #fff;
}
.detail-actions {
  /* Split the row: the Back navigation sticks to the left edge,
     the Save primary action sticks to the right. `space-between`
     does the work because the markup already orders Back first +
     Save second in the .razor file. The `gap` still covers the
     mobile case where the row wraps to a stack. */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Right-aligned group so Back stays at the left edge while Delete + Save
   stay together on the right (Delete to the left of Save). */
.detail-actions__primary {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Page header that carries a right-aligned action (e.g. the property
   Detail "Publish to Instagram" button). The title block keeps its
   left position; the action sticks to the right edge and wraps below
   on narrow viewports. */
.page-header--actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Header actions stacked: the button row on top, the "published" marker on its own line below. */
.page-header__actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Inline "already published to Instagram" marker shown in the header. */
.ig-published-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.ig-published-badge i {
  color: #C13584; /* Instagram brand magenta */
  font-size: 16px;
}

/* =============================================================================
   Confirmation dialog (ConfirmDialog.razor) — pure-CSS overlay, no Bootstrap
   modal JS. Centered card over a dimmed backdrop.
   ========================================================================== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}
.confirm-dialog {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
  padding: 24px;
}
.confirm-dialog__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.confirm-dialog__icon {
  font-size: 22px;
  color: var(--color-accent-1);
}
.confirm-dialog__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}
.confirm-dialog__message {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* =============================================================================
   Property Detail header card (read-only) — small square cover + key facts +
   Portuguese description beside it, for quick identification.
   ========================================================================== */
.detail-cover-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}
.detail-cover-head {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.detail-cover-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.detail-cover {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md, 10px);
}
.detail-cover-info {
  flex: 1;
  min-width: 0;
}
.detail-cover-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 14px;
}
.detail-cover-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 0;
}
.detail-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: #F2F4F7;
  border-radius: 6px;
  padding: 3px 9px;
}
.detail-fact--price {
  color: #fff;
  background: var(--color-accent-1);
}
.detail-cover-desc {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
/* Read-only ZAP quality line: one compact row below the cover header, with a
   blank line of breathing room between it and the description above. */
.detail-cover-quality {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #E4E7EC);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.detail-cover-quality strong { color: var(--color-text); }
.detail-cover-quality__sep { margin: 0 8px; opacity: 0.5; }

/* =============================================================================
   Instagram preview modal (InstagramPreviewModal.razor) — two columns (square
   slider + caption) so it fits on screen without page scroll. The slider keeps
   every image mounted and cross-fades the active one (fluid, no re-fetch).
   ========================================================================== */
.ig-preview {
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
}
.ig-preview__body {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 20px;
}
.ig-preview__slider {
  position: relative;
  flex: 0 0 260px;
}
.ig-preview__viewport {
  position: relative;
  width: 260px;
  height: 260px;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ig-preview__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ig-preview__slide.is-active {
  opacity: 1;
}
.ig-preview__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.ig-preview__nav--prev { left: 8px; }
.ig-preview__nav--next { right: 8px; }
.ig-preview__nav:hover { background: rgba(0, 0, 0, 0.65); }
.ig-preview__counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}
.ig-preview__noimg {
  flex: 0 0 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  background: #FAFBFC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ig-preview__caption {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  max-height: 260px;
  overflow-y: auto;
  background: #FAFBFC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
/* Only stack vertically on true mobile widths; otherwise stay horizontal
   (square image on the left, post caption on the right). */
@media (max-width: 460px) {
  .ig-preview__body { flex-direction: column; align-items: center; }
  .ig-preview__slider,
  .ig-preview__viewport,
  .ig-preview__noimg { flex-basis: auto; width: 240px; height: 240px; }
  .ig-preview__caption { width: 100%; max-height: 150px; }
}

/* Caption preview cell on the Instagram-published list — clamp the width and
   let long text wrap rather than stretching the table. */
.ig-caption-cell {
  max-width: 360px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

/* =============================================================================
   Empty state + pagination
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  color: var(--color-text-muted);
  text-align: center;
}
.empty-state__icon {
  font-size: 40px;
  color: var(--color-text-subtle);
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: #FAFBFC;
}
.pagination-bar__btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination-bar__btn:hover:not(:disabled) {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}
.pagination-bar__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-bar__status {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* =============================================================================
   Responsive — collapse sidebar to bottom drawer on small screens
   ========================================================================== */
/* Off-canvas drawer backdrop — inert on desktop, active on mobile when the drawer is open. */
.app-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.45);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@media (max-width: 768px) {
  /* The sidebar becomes an off-canvas drawer: hidden by default, the header toggle
     (is-collapsed) slides it in; clicking the backdrop or navigating closes it. */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .app-shell.is-collapsed .app-sidebar {
    width: var(--sidebar-width);     /* full drawer, not the desktop icon-only rail */
    transform: translateX(0);
  }
  /* Undo the desktop icon-only rules so the open drawer shows full labels + brand. */
  .app-shell.is-collapsed .app-nav__label { display: inline; }
  .app-shell.is-collapsed .app-sidebar__brand-suffix { display: block; }
  .app-shell.is-collapsed .app-nav__item { justify-content: flex-start; padding: 10px 14px; }
  .app-shell.is-collapsed .app-sidebar__brand { align-items: stretch; justify-content: center; padding: 0 20px; }
  .app-shell.is-collapsed .app-sidebar__brand-mark { font-size: 20px; }

  .app-backdrop { display: block; }
  .app-shell.is-collapsed .app-backdrop { opacity: 1; pointer-events: auto; }

  .app-content { padding: 16px; }
  .app-header { padding: 0 16px; }

  /* Sign out collapses to an icon-only button on mobile to save header width. */
  .app-header__logout-text { display: none; }
  .app-header__logout-btn { padding: 6px 9px; gap: 0; }
}

/* ============================================================
   Leads list — Source + Status badges
   ============================================================
   Source badge sits between data-table cells, neutral grey
   chip. Status badge encodes pipeline state through color:
   new = blue, qualified/won = green, lost/spam/discarded =
   red, everything else = amber. Names lowercase by convention
   so the C# enum can drive the class directly via .ToLower().
*/
.badge-source {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a5a5a;
    background-color: #F1ECE6;
    border-radius: 999px;
}

.badge-status {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
    background-color: #F1ECE6;
    color: #5a5a5a;
}

/* Five-state pipeline — on-brand, no blue.
   New = neutral sand · Contacted = amber · Proposal = jade tint ·
   Won = green · Lost = red. */
.badge-status--new {
    background-color: #ECE7DE;
    color: #6A6152;
}

.badge-status--contacted {
    background-color: #FFF4DC;
    color: #8A6D11;
}

.badge-status--proposal {
    background-color: #E3F0EA;
    color: #175E43;
}

.badge-status--won {
    background-color: #DCEFDF;
    color: #1F6B2C;
}

.badge-status--lost {
    background-color: #FBE7E9;
    color: var(--color-accent-1);
}

/* .badge-priority: operator-assigned importance. High = red, Medium = amber,
   Low = neutral. Same pill shape as .badge-status. */
.badge-priority {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
    background-color: #F1ECE6;
    color: #5a5a5a;
}
.badge-priority--high {
    background-color: #FBE7E9;
    color: var(--color-accent-1);
}
.badge-priority--medium {
    background-color: #FFF4DC;
    color: #8A6D11;
}
.badge-priority--low {
    background-color: #ECE7DE;
    color: #6A6152;
}

/* .badge-type: SCB buyer classification (Compra / Inversión). Jade-tinted
   pill so it reads as the "what for" signal without competing with the
   colored status badge. */
.badge-type {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent-1-hover, #175E43);
    background-color: var(--color-accent-1-soft, #E3F0EA);
    border-radius: 999px;
}

/* .badge-archived: muted neutral pill + icon shown on an archived lead. */
.badge-archived {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7C7468;
    background-color: #ECE7DE;
    border-radius: 999px;
}

/* ------------------------------------------------------------------
   .btn-icon — borderless, icon-only action button for list/table rows.
   No border, no fill at rest (just the muted glyph); a soft square hover
   like .data-table__action. Used for the per-row actions on the Agents
   and Leads lists so table actions read as quiet icons, not loud
   bordered buttons. Also carries the shared .btn.is-loading spinner
   (SpinnerButton passes it as the CssClass), so async actions still
   show the standard spinner.
   ------------------------------------------------------------------ */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-icon + .btn-icon,
.btn-whatsapp + .btn-icon {
    margin-left: 2px;
}
.btn-icon:hover,
.btn-icon:focus-visible {
    background: var(--color-accent-1-soft);
    color: var(--color-accent-1);
}
.btn-icon--accent { color: var(--color-accent-1); }
.btn-icon--danger:hover,
.btn-icon--danger:focus-visible {
    background: #FBE7E9;
    color: var(--color-accent-1);
}
.btn-icon:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------------------------
   .seg — segmented view switcher (Leads: Board · List · Archived).
   A pill group with a raised "active" segment. Reused via LeadViewTabs.
   ------------------------------------------------------------------ */
.seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.seg__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.seg__item:hover { color: var(--color-text); }
.seg__item.is-active {
    background: var(--color-surface);
    color: var(--color-accent-1);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Leads toolbar row: view switcher on the left, optional filter + count
   pushed to the right. Sits between the page header and the board/list. */
.lead-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.lead-toolbar__spacer { flex: 1; }
.lead-toolbar__filter { width: auto; min-width: 200px; max-width: 260px; }
.lead-toolbar__count { color: var(--color-text-muted); font-size: 13px; }

/* Board column heads carry a thin top accent matching the status color
   (the base border-top lives in the .lead-board__col-head layout rule). */
.lead-board__col-head--new { border-top-color: #C9BFAD; }
.lead-board__col-head--contacted { border-top-color: #E6C566; }
.lead-board__col-head--proposal { border-top-color: #2C8A64; }
.lead-board__col-head--won { border-top-color: #3B9E4D; }
.lead-board__col-head--lost { border-top-color: var(--color-accent-1); }

/* ============================================================
   Leads list — WhatsApp action column + intent badge
   ============================================================
   .btn-whatsapp: compact icon-only link in its own (untitled)
   column at the end of each lead row. Mirrors the geometry +
   hover treatment of `.data-table__action` (the edit icon used
   on Properties / Locations) so the row-action layer feels
   coherent across feature pages — same 30x30 square with
   --radius-sm rounded corners, same 16 px icon size, same
   soft-accent hover (`--color-accent-1-soft` background +
   `--color-accent-1` icon) instead of the previous filled-red
   + white state which read as too loud for a list row.
   The at-rest color stays brand red (not muted grey like
   data-table__action) because WhatsApp is an outbound action
   that should hint at the brand connection, not blend in.
   text-decoration: none on every state — Bootstrap adds an
   underline to <a> by default and we have to clear base,
   :hover, :focus-visible, :active, :visited explicitly.
*/
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-accent-1, #AA1120);
    font-size: 16px;
    line-height: 1;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible,
.btn-whatsapp:active,
.btn-whatsapp:visited {
    background-color: var(--color-accent-1-soft);
    color: var(--color-accent-1, #AA1120);
    text-decoration: none;
}

/* .badge-intent: BOLD UPPERCASE chip for the lead's transaction
   intent (Sell / Buy / Rent). Visually stronger than the neutral
   .badge-source because intent is the operator's first triage
   signal ("what do they want?"). Stays neutral-grey background
   to avoid stealing the eye from the colored status badge. */
.badge-intent {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #232323;
    background-color: #F1ECE6;
    border-radius: 4px;
}

/* ============================================================
   Leads CRM (increment G3) — detail workspace, kanban board,
   comment timeline, agent sub-nav and add-lead panel.
   Uses only the existing admin design tokens. Scoped to the
   Leads pages so nothing else is affected.
   ============================================================ */

/* Sub-nav item (Leads → Board): a subtle left indent + smaller
   type so it reads as a child of the Leads entry above it. */
.app-nav__item--sub {
    padding-left: 34px;
    font-size: 13px;
}
.app-nav__item--sub .app-nav__icon {
    font-size: 16px;
}

/* Clickable list row → lead detail. The whole row is a target;
   the cursor + hover tint signal it, matching the table hover. */
.data-table__row--link {
    cursor: pointer;
}
.data-table__row--link:hover {
    background: var(--color-accent-1-soft);
}

/* ── Vertical form-group stack (label + control) ────────────
   Bootstrap 5 dropped .form-group, so give it consistent vertical
   rhythm and align .form-label with the .detail-label used across
   the rest of the admin forms. */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

/* ── Right-aligned action row under a form / inputs ─────────
   Standard placement for Save / Add / Create buttons that sit
   below a form block. Used across the admin so the primary
   action always lands bottom-right. */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
@media (max-width: 560px) {
    .form-actions { justify-content: stretch; }
    .form-actions .btn { width: 100%; }
}

/* ── Multi-select dropdown (checkbox panel + chips) ───────── */
.multiselect {
    position: relative;
}
.multiselect__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}
.multiselect__control {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}
.multiselect.is-open .multiselect__control {
    border-color: var(--color-accent-1);
    box-shadow: 0 0 0 0.2rem var(--color-accent-1-soft);
}
.multiselect__placeholder { color: var(--color-text-subtle); }
.multiselect__caret { color: var(--color-text-muted); flex-shrink: 0; }
.multiselect__panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 4px;
}
.multiselect__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.multiselect__opt:hover { background: var(--color-bg); }
.multiselect__opt input { accent-color: var(--color-accent-1); width: 16px; height: 16px; }
.multiselect__empty { padding: 10px; color: var(--color-text-muted); font-size: 13px; }
.multiselect__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Chips — used by the multiselect and to display group membership in tables. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: var(--color-accent-1-soft);
    color: var(--color-accent-1-hover, #175E43);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.chip--static { padding: 2px 10px; }
.chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}
.chip__x:hover { background: rgba(31, 122, 87, 0.15); }
.chip-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* CSV import row — file + target group + button on one responsive line. */
.import-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.import-row__file { max-width: 340px; }
/* Style the native file-picker button so it reads as an intentional admin control
   (matches the outline-secondary button) instead of the raw browser default. */
.import-row__file::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.import-row__file::file-selector-button:hover {
    border-color: var(--color-accent-1);
    background: var(--color-surface);
}
.import-row__group { width: auto; min-width: 200px; max-width: 240px; }

/* ── Lead detail — identity header + two-pane workspace ───── */
.lead-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.lead-head__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}
.lead-head__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lead-head__quick {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.lead-head__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
}
.lead-head__link:hover { color: var(--color-text); }
.lead-head__link--wa { color: var(--color-accent-1); font-weight: 500; }
.lead-head__link--wa:hover { color: var(--color-accent-1-hover); }

/* Two columns: main info (wider) + activity sidebar. Stacks on tablet. */
.lead-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.lead-detail__main,
.lead-detail__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 991px) {
    .lead-detail { grid-template-columns: 1fr; }
}

/* Padded section inside a card-shell; a divider separates stacked sections. */
.card-section {
    padding: 20px;
}
.card-section + .card-section {
    border-top: 1px solid var(--color-border);
}
.card-section__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
.lead-message {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
}

/* ── Activity + comment timeline ────────────────────────── */
.lead-comment-add {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lead-comment-add .form-control { width: 100%; }
.lead-timeline {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lead-timeline__item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
/* User comments get a gold rail; system events read as quiet audit lines. */
.lead-timeline__item--comment {
    border-left: 3px solid var(--color-gold);
    background: var(--color-surface);
}
.lead-timeline__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-accent-1-soft);
    color: var(--color-accent-1);
    font-size: 14px;
}
.lead-timeline__item--comment .lead-timeline__icon {
    background: rgba(194, 160, 86, 0.15);
    color: var(--color-gold-strong);
}
.lead-timeline__body { flex: 1; min-width: 0; }
.lead-timeline__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.lead-timeline__author {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}
.lead-timeline__date {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.lead-timeline__del {
    margin-left: auto;
    width: 24px;
    height: 24px;
    font-size: 14px;
}
.lead-timeline__text {
    font-size: 13px;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Kanban board ───────────────────────────────────────── */
.lead-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
}
.lead-board__col {
    flex: 0 0 260px;
    max-width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}
.lead-board__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    /* Thin top accent (colored by the --new/--contacted/... modifiers below) so the five
       lanes are scannable at a glance; bottom hairline separates the head from the cards. */
    border-top: 3px solid transparent;
    border-bottom: 1px solid var(--color-border);
}
.lead-board__col-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.lead-board__col-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-accent-1-soft);
    border-radius: 999px;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
}
.lead-board__col-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
}
.lead-board__empty {
    font-size: 12px;
    color: var(--color-text-subtle);
    text-align: center;
    padding: 10px 0;
}

/* ── Kanban card ────────────────────────────────────────── */
.lead-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lead-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.lead-card__body {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lead-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.lead-card__contact,
.lead-card__interest {
    font-size: 12px;
    word-break: break-word;
}
.lead-card__contact { color: var(--color-text-muted); }
.lead-card__interest { color: var(--color-gold-strong); }
.lead-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.lead-card__agent {
    font-size: 11px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.lead-card__status {
    width: 100%;
}

/* ── Add-lead panel ─────────────────────────────────────── */
.lead-add-dialog {
    text-align: left;
    max-width: 420px;
}
.lead-add-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 16px;
}

/* ── AI lead assistant (H3) ─────────────────────────────── */
.detail-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 12px;
}
.card-section--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.assistant-assign { min-width: 220px; }
.assistant-lead {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}
.assistant-lead--excluded { opacity: 0.5; }
.assistant-lead__pick { padding-top: 30px; }
.assistant-lead__fields { flex: 1; }
.assistant-footer { border-top: 1px solid var(--color-border); }
.assistant-footer .form-actions { margin-top: 0; }

/* ── Lead duplicate warning (add dialog + AI extractor) ── */
.lead-dupe-warning {
    border: 1px solid #E4C060;
    background: #FDF7E7;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lead-dupe-warning__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #8A6D1B;
}
.lead-dupe-warning__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    text-decoration: none;
    color: var(--color-text);
    font-size: 13px;
}
.lead-dupe-warning__item:hover { background: var(--color-accent-1-soft); }
.lead-dupe-warning__name { font-weight: 600; }
.lead-dupe-warning__meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lead-dupe-warning__reason { font-size: 11px; color: var(--color-text-muted); }
.assistant-lead__dupe {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #8A6D1B;
    background: #FDF7E7;
    border: 1px solid #E4C060;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 6px;
    text-decoration: none;
}
.assistant-lead__dupe:hover { background: #FBEFCB; }

/* ── Blocking send preloader (campaign send) ───────────── */
.scb-blocking {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 23, 20, 0.45);
    backdrop-filter: blur(2px);
}
.scb-blocking__card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 28px 40px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    max-width: 360px;
}
.scb-blocking__spin {
    font-size: 34px;
    color: var(--color-accent-1);
    display: inline-block;
    animation: scb-spin 0.9s linear infinite;
}
.scb-blocking__title {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}
.scb-blocking__sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-muted);
}
@keyframes scb-spin { to { transform: rotate(360deg); } }

/* ── Campaign editor: form + live preview, side-by-side; stacks on narrow screens ── */
.campaign-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .campaign-editor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Campaign image upload ─────────────────────────────── */
.campaign-image {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.campaign-image__thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
/* Styled async dropzone — the native <input type=file> is visually hidden; the label
   is the clickable target so it matches the rest of the admin's inputs. */
.campaign-image__upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 16px;
    cursor: pointer;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color .15s ease, background .15s ease;
}
.campaign-image__upload:hover { border-color: var(--color-accent-1); background: var(--color-surface); }
.campaign-image__upload input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
.campaign-image__upload.is-busy { opacity: 0.6; pointer-events: none; }
.campaign-image__upload span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.campaign-image__upload i { font-size: 18px; color: var(--color-text-muted); }

/* Send-method choice (SMTP vs Gmail) in the campaign send dialog. */
.send-method { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.send-method__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.send-method__opt:hover { border-color: var(--color-accent-1); background: var(--color-accent-1-soft); }
.send-method__opt i { font-size: 22px; color: var(--color-accent-1); flex: none; }
.send-method__opt span { display: flex; flex-direction: column; }
.send-method__opt strong { font-size: 14px; color: var(--color-text); }
.send-method__opt small { font-size: 12px; color: var(--color-text-muted); }
.send-method__opt:disabled { opacity: .6; cursor: default; }
.send-method__opt:disabled:hover { border-color: var(--color-border); background: var(--color-surface); }
/* The recommended "reuse this sign-in" option — highlighted like a primary action. */
.send-method__opt--primary { border-color: var(--color-accent-1); background: var(--color-accent-1-soft); }
.send-method__opt--primary strong { color: var(--color-accent-1-strong, var(--color-accent-1)); }

/* Wider confirmation dialog for the send-method / test / Gmail-account modals (the default
   420px is too cramped for the two-option layout). */
.confirm-dialog--wide { max-width: 560px; }

/* Send report — spaced summary tiles on a single row. Padding keeps the tiles
   off the card edges (the parent .card-shell has none of its own); nowrap holds
   them on one line, with overflow-x as a safety valve on very narrow viewports. */
.report-stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 40px;
    padding: 18px 22px;
    overflow-x: auto;
}
.report-stat { display: flex; flex-direction: column; gap: 4px; }
.report-stat__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}
.report-stat__value { font-size: 18px; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.report-stat__value--ok { color: #16A34A; }
.report-stat__value--bad { color: #DC2626; }

/* A shorter preview for the sent-campaign report (not the full editor height). */
.campaign-preview--compact { height: 440px; }

/* Live-preview iframe, zoomed out so the fixed-600px email fits the column comfortably.
   The frame is sized 1/scale so, once scaled, it exactly fills the .campaign-preview box. */
.campaign-preview {
    position: relative;
    width: 100%;
    height: 660px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.campaign-preview__frame {
    width: 133.34%;   /* 1 / 0.75 */
    height: 133.34%;
    border: 0;
    transform: scale(0.75);
    transform-origin: 0 0;
}

/* ── Modern async file picker (hides the native "Choose File / No file chosen")
   The native input is visually hidden inside the label; the label is a styled
   dropzone that shows the chosen file name (validated on select). */
.file-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 420px;
    margin: 0;
    padding: 11px 14px;
    cursor: pointer;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color .15s ease, background .15s ease;
}
.file-picker:hover { border-color: var(--color-accent-1); background: var(--color-surface); }
.file-picker input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
.file-picker__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-1);
    white-space: nowrap;
}
.file-picker__cta i { font-size: 17px; }
.file-picker__name {
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-picker__name--ph { color: var(--color-text-muted); }
.file-picker--has { border-style: solid; border-color: var(--color-accent-1); }

/* ── Global cross-search (header: leads · contacts · properties) ─────────────── */
.gsearch { position: relative; flex: 0 1 420px; max-width: 420px; margin-left: 8px; }
.gsearch__box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 0 12px; height: 40px; }
.gsearch__box:focus-within { border-color: #2f6e50; box-shadow: 0 0 0 3px rgba(47,110,80,.12); }
.gsearch__icon { color: #8a8a8a; font-size: 18px; }
.gsearch__input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 14px; color: inherit; }
.gsearch__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.3); padding: 6px; z-index: 1200; max-height: 68vh; overflow-y: auto; }
.gsearch__group-h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9a9a9a; padding: 9px 10px 5px; }
.gsearch__item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: #2a2a2a; }
.gsearch__item:hover { background: #f3f3f0; }
.gsearch__item > i { font-size: 18px; color: #2f6e50; flex: none; }
.gsearch__t { display: flex; flex-direction: column; min-width: 0; }
.gsearch__t small { color: #9a9a9a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch__empty { color: #9a9a9a; font-size: 13.5px; text-align: center; padding: 18px; margin: 0; }
@media (max-width: 720px) { .gsearch { display: none; } }

/* ── Property dossier options modal (Detail header) ───────────────────────── */
.dossier-modal { max-width: 460px; }
.dossier-modal__fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.dossier-modal__field { display: flex; flex-direction: column; gap: 6px; }
.dossier-modal__field > span {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.dossier-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Header action buttons collapse to icon-only on small screens (label hidden). */
@media (max-width: 640px) {
  .page-header--actions { flex-wrap: nowrap; align-items: flex-start; }
  .page-header__actions--compact { flex-wrap: nowrap; margin-left: auto; gap: 8px; }
  .page-header__actions--compact .btn-compact { padding-left: 10px; padding-right: 10px; }
  .page-header__actions--compact .btn-compact .btn__label,
  .page-header__actions--compact .ig-published-badge .btn__label { display: none; }
  .page-header__actions--compact .btn-compact i { margin: 0 !important; }
}