/* ============================================================
   app.css — component layer built on tokens.css.
   Loaded AFTER Bootstrap so it can override stock components.
   ============================================================ */

/* ---- 1. Bootstrap variable bridge --------------------------
   Remap Bootstrap's theme colors onto our tokens so EVERY stock
   component (.btn, .bg-*, .text-bg-*, badges, alerts) inherits
   the palette automatically. */
:root {
  --bs-primary:        #4f46e5;  --bs-primary-rgb: 79,70,229;
  --bs-secondary:      #64748b;  --bs-secondary-rgb: 100,116,139;
  --bs-success:        #16a34a;  --bs-success-rgb: 22,163,74;
  --bs-info:           #0891b2;  --bs-info-rgb: 8,145,178;
  --bs-warning:        #d97706;  --bs-warning-rgb: 217,119,6;
  --bs-danger:         #dc2626;  --bs-danger-rgb: 220,38,38;

  --bs-body-bg:        var(--color-bg);
  --bs-body-color:     var(--color-text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-border-color:   var(--color-border);
  --bs-border-radius:  var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-link-color:     var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-link-color-rgb: 79,70,229;
}

/* ---- 2. Base ----------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
}
h1,h2,h3,h4,h5,h6 { color: var(--color-text-strong); font-weight: 600; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code, .font-monospace { font-family: var(--font-mono); }
code {
  background: var(--color-surface-2);
  color: var(--color-primary-hover);
  padding: .1em .35em; border-radius: var(--radius-sm);
  font-size: .9em;
}
hr { border-color: var(--color-border); opacity: 1; }
/* Selection must set colour as well as background: with colour unset, every
   selected run keeps its own, and the greyest table text stayed invisible. */
::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }

/* ---- 3. App shell ------------------------------------------ */
.app-shell { display: flex; min-height: 100vh; }
.app-main {
  flex: 1 1 auto; min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
}
.app-content {
  flex: 1 1 auto;
  width: 100%; max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

/* ---- 4. Sidebar -------------------------------------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  z-index: 1040;
  transition: transform .2s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-strong); font-weight: 700; font-size: var(--text-lg);
  flex: 0 0 auto;
}
.sidebar-brand:hover { text-decoration: none; color: var(--color-text-strong); }
.sidebar-brand .brand-mark {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: 0 0 auto;
}
.sidebar-nav {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-5);
}
.nav-section { margin-top: var(--space-4); }
.nav-section:first-child { margin-top: var(--space-1); }
.nav-section-title {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.sidebar .nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-text); font-size: var(--text-base); font-weight: 500;
  line-height: 1.4;
}
.sidebar .nav-link:hover { background: var(--color-surface-2); text-decoration: none; color: var(--color-text-strong); }
.sidebar .nav-link .bi { font-size: 1.05rem; color: var(--color-text-muted); width: 1.2em; text-align: center; }
.sidebar .nav-link.is-active { background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 600; }
.sidebar .nav-link.is-active .bi { color: var(--color-primary); }
.sidebar-footer { flex: 0 0 auto; border-top: 1px solid var(--color-border); padding: var(--space-3); }
.sidebar-footer .nav-link { color: var(--color-text-muted); }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  z-index: 1039; opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

/* ---- 5. Topbar --------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
}
.topbar-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-strong); margin: 0; }
.topbar-spacer { flex: 1 1 auto; }
.sidebar-toggle {
  display: none; border: 0; background: transparent;
  font-size: 1.4rem; color: var(--color-text); line-height: 1;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--color-surface-2); }
.topbar-user .dropdown-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 4px var(--space-3);
  color: var(--color-text); font-size: var(--text-sm); font-weight: 500;
}
.topbar-user .dropdown-toggle:hover { background: var(--color-surface-2); }
.topbar-user .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600;
}

/* ---- 6. Page header ---------------------------------------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-header__title { margin: 0; font-size: var(--text-2xl); font-weight: 700; }
.page-header__subtitle { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- 7. Cards / surfaces ----------------------------------- */
.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-cap-bg: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.card-header { border-bottom: 1px solid var(--color-border); font-weight: 600; }

/* ---- 8. KPI / stat tiles ----------------------------------- */
.kpi-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--space-5);
}
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kpi-accent, var(--color-primary));
}
.kpi__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.kpi__label .bi { color: var(--kpi-accent, var(--color-primary)); font-size: 1rem; }
.kpi__value { font-size: var(--text-3xl); font-weight: 700; color: var(--color-text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }
.kpi--primary { --kpi-accent: var(--color-primary); }
.kpi--success { --kpi-accent: var(--color-success); }
.kpi--info    { --kpi-accent: var(--color-info); }
.kpi--warning { --kpi-accent: var(--color-warning); }
.kpi--danger  { --kpi-accent: var(--color-danger); }

/* ---- 9. Data table ----------------------------------------- */
.data-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table .table-scroll { overflow-x: auto; }
.data-table table { margin: 0; width: 100%; color: var(--color-text); font-size: var(--text-sm); }
.data-table thead th {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
  padding: var(--space-3) var(--space-4);
  position: sticky; top: 0; z-index: 1;
}
.data-table tbody td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); vertical-align: middle; }
.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:hover td { background: var(--color-surface-2); }
.data-table tfoot th { padding: var(--space-3) var(--space-4); border-top: 2px solid var(--color-border-strong); font-weight: 600; background: var(--color-surface-2); }
.data-table .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--color-surface); }

.data-table--flat thead th { position: static; }

/* Lead tables (dashboard + project leads): fixed layout makes the table
   width independent of the data — columns no longer balloon to fit the
   widest cell across thousands of rows; overflow is ellipsised instead. */
.table-leads { table-layout: fixed; width: 100%; min-width: 1080px; }
.table-leads th, .table-leads td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-leads th:nth-child(1), .table-leads td:nth-child(1) { width: 11%; } /* Name */
.table-leads th:nth-child(2), .table-leads td:nth-child(2) { width: 13%; } /* Email */
.table-leads th:nth-child(3), .table-leads td:nth-child(3) { width: 9%; }  /* Phone */
.table-leads th:nth-child(4), .table-leads td:nth-child(4) { width: 13%; } /* Message */
.table-leads th:nth-child(5), .table-leads td:nth-child(5) { width: 12%; } /* URL */
.table-leads th:nth-child(6), .table-leads td:nth-child(6) { width: 14%; } /* Status */
.table-leads th:nth-child(7), .table-leads td:nth-child(7) { width: 9%; }  /* Comment */
.table-leads th:nth-child(8), .table-leads td:nth-child(8) { width: 10%; } /* Created */
.table-leads th:nth-child(9), .table-leads td:nth-child(9) { width: 9%; }  /* Actions */
/* The status badge and the action buttons must never be clipped. */
.table-leads td:nth-child(6), .table-leads td:nth-child(9) { overflow: visible; }
.table-leads .phone-state { font-size: 0.75rem; }

/* Dashboard variant: no Actions column (the name is the edit link), so eight
   columns instead of nine. table-layout is fixed and these widths are
   POSITIONAL, so they must re-sum to 100% every time a column is added or
   removed — otherwise every column silently squeezes. Must come after the
   base rules: same specificity, so source order decides. The status badge
   stays in column 6, so the base overflow:visible rule still fits.
   /project/<domain> keeps its own nine-column set. */
.table-leads--no-actions th:nth-child(1), .table-leads--no-actions td:nth-child(1) { width: 13%; } /* Name */
.table-leads--no-actions th:nth-child(2), .table-leads--no-actions td:nth-child(2) { width: 15%; } /* Email */
.table-leads--no-actions th:nth-child(3), .table-leads--no-actions td:nth-child(3) { width: 10%; } /* Phone */
.table-leads--no-actions th:nth-child(4), .table-leads--no-actions td:nth-child(4) { width: 16%; } /* Message */
.table-leads--no-actions th:nth-child(5), .table-leads--no-actions td:nth-child(5) { width: 13%; } /* URL */
.table-leads--no-actions th:nth-child(6), .table-leads--no-actions td:nth-child(6) { width: 14%; } /* Status */
.table-leads--no-actions th:nth-child(7), .table-leads--no-actions td:nth-child(7) { width: 10%; } /* Comment */
.table-leads--no-actions th:nth-child(8), .table-leads--no-actions td:nth-child(8) { width: 9%;  } /* Created */

/* grouped tables (states/projects → cars) */
.group-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.group-header__title { font-weight: 600; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px; }
.group-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* row status tint — subtle left border, keeps text readable */
.row-status { box-shadow: inset 3px 0 0 var(--row-accent, transparent); }
.row-status--new                { --row-accent: var(--status-new-fg); }
.row-status--no-answer          { --row-accent: var(--status-no-answer-fg); }
.row-status--not-interested     { --row-accent: var(--status-not-interested-fg); }
.row-status--comes-to-our-place { --row-accent: var(--status-comes-to-our-place-fg); }
.row-status--in-progress        { --row-accent: var(--status-in-progress-fg); }
.row-status--sold               { --row-accent: var(--status-sold-fg); }
.row-status--repeated           { --row-accent: var(--status-repeated-fg); }

/* ---- 10. Status badges (one source of truth) --------------- */
.badge-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge-status--new                { color: var(--status-new-fg);                background: var(--status-new-bg); }
.badge-status--no-answer          { color: var(--status-no-answer-fg);          background: var(--status-no-answer-bg); }
.badge-status--not-interested     { color: var(--status-not-interested-fg);     background: var(--status-not-interested-bg); }
.badge-status--comes-to-our-place { color: var(--status-comes-to-our-place-fg); background: var(--status-comes-to-our-place-bg); }
.badge-status--in-progress        { color: var(--status-in-progress-fg);        background: var(--status-in-progress-bg); }
.badge-status--sold               { color: var(--status-sold-fg);               background: var(--status-sold-bg); }
.badge-status--repeated           { color: var(--status-repeated-fg);           background: var(--status-repeated-bg); }

/* soft pill variants for generic counters (reports) */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.pill--primary { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.pill--success { color: var(--color-success); background: var(--color-success-soft); }
.pill--info    { color: var(--color-info);    background: var(--color-info-soft); }
.pill--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.pill--danger  { color: var(--color-danger);  background: var(--color-danger-soft); }
.pill--muted   { color: var(--color-text-muted); background: var(--color-surface-2); }

/* ---- 11. Buttons (re-skin via --bs-btn-* custom props) ----- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--radius-md); --bs-btn-font-size: var(--text-base); }
.btn-sm { --bs-btn-font-size: var(--text-sm); --bs-btn-border-radius: var(--radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active); --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-success {
  --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534;
  --bs-btn-disabled-bg: var(--color-success); --bs-btn-disabled-border-color: var(--color-success);
}
.btn-danger {
  --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c;
}
.btn-secondary {
  --bs-btn-bg: var(--color-text-muted); --bs-btn-border-color: var(--color-text-muted);
  --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569;
}
.btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-border-strong); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--color-text-muted); --bs-btn-border-color: var(--color-border-strong); --bs-btn-hover-bg: var(--color-surface-2); --bs-btn-hover-color: var(--color-text-strong); --bs-btn-hover-border-color: var(--color-border-strong); }
.btn-outline-danger { --bs-btn-color: var(--color-danger); --bs-btn-border-color: var(--color-border-strong); --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); --bs-btn-hover-color: #fff; }

/* ---- 12. Forms --------------------------------------------- */
.form-label { font-weight: 500; font-size: var(--text-sm); color: var(--color-text-strong); margin-bottom: var(--space-1); }
.form-control, .form-select {
  border-color: var(--color-border-strong); border-radius: var(--radius-md);
  font-size: var(--text-base); color: var(--color-text); background-color: var(--color-surface);
}
.form-control::placeholder { color: var(--color-text-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary); box-shadow: var(--focus-ring);
}
.form-text { color: var(--color-text-muted); font-size: var(--text-xs); }
.input-group-text { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text-muted); }

/* ---- 13. Timeline (lead page) ------------------------------ */
.timeline { display: flex; flex-direction: column; gap: var(--space-3); max-height: clamp(480px, 72vh, 1000px); overflow-y: auto; padding-right: var(--space-1); }
.timeline-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.timeline-item--note { border-left-color: var(--color-text-faint); background: var(--color-surface-2); }
.timeline-item--in   { border-left-color: var(--color-primary); }
.timeline-item--out  { border-left-color: var(--color-success); }
.timeline-item__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.timeline-item__channel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.timeline-item__time { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.timeline-item__body { margin: 0; white-space: pre-line; color: var(--color-text); }
.timeline-item__subject { font-weight: 600; color: var(--color-text-strong); margin-bottom: 2px; }

/* ---- 14. Empty state --------------------------------------- */
.empty-state {
  text-align: center; padding: var(--space-8) var(--space-5);
  background: var(--color-surface); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg); color: var(--color-text-muted);
}
.empty-state .bi { font-size: 2.5rem; color: var(--color-text-faint); display: block; margin-bottom: var(--space-3); }
.empty-state__title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-strong); margin-bottom: var(--space-2); }
.empty-state p { margin: 0 auto var(--space-3); max-width: 460px; }

/* ---- 15. Alerts / flash ------------------------------------ */
.alert { border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--text-sm); }
.alert-info { background: var(--color-info-soft); border-color: #a5e3ef; color: #0e5e6e; }
.alert-success { background: var(--color-success-soft); border-color: #a7e3bd; color: #14532d; }
.alert-danger { background: var(--color-danger-soft); border-color: #f3b4b4; color: #7f1d1d; }
.alert-warning { background: var(--color-warning-soft); border-color: #f1d18a; color: #78440a; }

/* ---- 16. Nav tabs ------------------------------------------ */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--color-border);
  --bs-nav-tabs-link-active-color: var(--color-primary-hover);
  --bs-nav-tabs-link-active-border-color: var(--color-border) var(--color-border) var(--color-surface);
  --bs-nav-link-color: var(--color-text-muted);
  --bs-nav-link-hover-color: var(--color-text-strong);
  font-weight: 500;
}
.nav-tabs .nav-link.active { font-weight: 600; }

/* ---- 16b. Pagination --------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.pagination {
  --bs-pagination-color: var(--color-text);
  --bs-pagination-hover-color: var(--color-primary-hover);
  --bs-pagination-hover-bg: var(--color-surface-2);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-focus-box-shadow: var(--focus-ring);
  --bs-pagination-focus-color: var(--color-primary-hover);
}

/* ---- 16c. Status filter chips ------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-bar__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-right: var(--space-1); }
.filter-bar--divided { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid transparent;                 /* keeps size identical to the active state */
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.2;
  font-family: inherit; cursor: pointer;         /* also used as <button> on the lead page */
}
.filter-chip:hover { background: var(--color-surface-3); color: var(--color-text-strong); text-decoration: none; }
.filter-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--color-text-faint)); flex: 0 0 auto; }
.filter-chip--all::before { display: none; }
.filter-chip__count { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* Active = SOLID fill in the status colour + white text; the leading dot
   becomes a checkmark. High contrast, and the check means it doesn't rely
   on colour alone. */
.filter-chip.is-active {
  border-color: transparent;
  background: var(--chip-solid, var(--color-primary));
  color: #fff;
  font-weight: 600;
}
.filter-chip.is-active:hover { color: #fff; filter: brightness(0.93); }
.filter-chip.is-active::before {
  content: "\2713";           /* ✓ replaces the dot */
  width: auto; height: auto; border-radius: 0; background: none;
  font-size: 0.85em; font-weight: 700; line-height: 1; color: #fff;
}
.filter-chip.is-active .filter-chip__count { color: #fff; opacity: .8; }
.filter-chip--all.is-active { background: var(--color-primary); color: #fff; }
.filter-chip--all.is-active::before {
  display: inline-block; content: "\2713";
  width: auto; height: auto; border-radius: 0; background: none;
  font-size: 0.85em; font-weight: 700; color: #fff;
}
/* per-status: coloured dot when inactive; solid status-colour fill when active */
.filter-chip--new                { --chip-color: var(--status-new-fg); }
.filter-chip--new.is-active                { --chip-solid: var(--status-new-fg); }
.filter-chip--no-answer          { --chip-color: var(--status-no-answer-fg); }
.filter-chip--no-answer.is-active          { --chip-solid: var(--status-no-answer-fg); }
.filter-chip--not-interested     { --chip-color: var(--status-not-interested-fg); }
.filter-chip--not-interested.is-active     { --chip-solid: var(--status-not-interested-fg); }
.filter-chip--comes-to-our-place { --chip-color: var(--status-comes-to-our-place-fg); }
.filter-chip--comes-to-our-place.is-active { --chip-solid: var(--status-comes-to-our-place-fg); }
.filter-chip--in-progress        { --chip-color: var(--status-in-progress-fg); }
.filter-chip--in-progress.is-active        { --chip-solid: var(--status-in-progress-fg); }
.filter-chip--sold               { --chip-color: var(--status-sold-fg); }
.filter-chip--sold.is-active               { --chip-solid: var(--status-sold-fg); }
.filter-chip--repeated           { --chip-color: var(--status-repeated-fg); }
.filter-chip--repeated.is-active           { --chip-solid: var(--status-repeated-fg); }

/* ---- 17. Pre / code blocks (api docs) ---------------------- */
pre {
  background: #0f172a; color: #e2e8f0; padding: var(--space-4);
  border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm);
}
pre code { background: transparent; color: inherit; padding: 0; }

/* ---- 18. Accessibility & motion ---------------------------- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- 19. Responsive: collapse sidebar to drawer ------------ */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; align-items: center; }
  .app-content { padding: var(--space-4); }
}

/* ---- 20b. Auth layout (login / register) ------------------- */
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); background: radial-gradient(120% 120% at 50% 0%, #eef2ff 0%, var(--color-bg) 55%); }
.auth-card-wrap { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); font-size: var(--text-xl); color: var(--color-text-strong); }
.auth-brand:hover { text-decoration: none; color: var(--color-text-strong); }
.auth-card-wrap .card { box-shadow: var(--shadow-md); }

/* ---- 19b. Screenshots gallery (admin only) ----------------- */
.ss-projects { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ss-project { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--color-text); }
.ss-project:hover { text-decoration: none; box-shadow: var(--shadow-md); border-color: var(--color-border-strong); color: var(--color-text-strong); }
.ss-project__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: 1.25rem; margin-bottom: var(--space-2); }
.ss-project__name { font-weight: 600; color: var(--color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-project__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.ss-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.ss-cats { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ss-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; font-family: inherit; cursor: pointer; line-height: 1.2; }
.ss-cat:hover { background: var(--color-surface-2); color: var(--color-text-strong); }
.ss-cat.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ss-cat .bi { font-size: 1rem; }
/* The no-URL chip is a data-quality marker, not an activity type: warning
   colours and a separating gap keep it from reading as a fourth category. */
.ss-cat--warn { margin-left: var(--space-3); border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-soft); }
.ss-cat--warn:hover { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.ss-cat--warn.is-active { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.ss-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ss-thumb { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.ss-thumb:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ss-thumb img { display: block; width: 100%; height: 140px; object-fit: cover; background: var(--color-surface-2); }
.ss-thumb figcaption { padding: 6px var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* A run = consecutive byte-identical captures shown once. The badge carries
   how many, so a folded card can never be mistaken for a single moment. */
.ss-thumb { position: relative; }
.ss-thumb--run { border-color: var(--color-border-strong); }
.ss-run-badge {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: var(--radius-pill, 999px);
    background: rgba(15, 23, 42, .78); color: #fff;
    font-size: var(--text-xs); font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.ss-lightbox { position: fixed; inset: 0; z-index: 1080; background: rgba(15,23,42,.92); display: flex; align-items: center; justify-content: center; }
.ss-lightbox[hidden] { display: none; }
.ss-lightbox__img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); cursor: zoom-in; }
/* zoom toggle: show the screenshot at native (1:1) size, scroll within the overlay */
.ss-lightbox.is-zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.ss-lightbox.is-zoomed .ss-lightbox__img { max-width: none; max-height: none; border-radius: 0; cursor: zoom-out; }
.ss-lightbox__cap { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; z-index: 1090; pointer-events: none; }
.ss-lightbox__btn { position: fixed; z-index: 1090; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.ss-lightbox__btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.ss-lightbox__close { top: 16px; right: 16px; }
.ss-lightbox__open  { top: 16px; left: 16px; }
.ss-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ss-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---- 20. Small utilities ----------------------------------- */
.text-muted { color: var(--color-text-muted) !important; }
.text-faint { color: var(--color-text-faint) !important; }
.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); }
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.list-rows li:first-child { border-top: 0; }
.tabular { font-variant-numeric: tabular-nums; }