/* =============================================================================================
   Handymans — UI refinement layer.

   Loaded AFTER styles.css and deliberately kept separate: styles.css is the inherited base from the
   leadpadia/relopadia lineage and its class vocabulary is a contract every view depends on. This
   file re-tunes that base rather than rewriting it, so nothing structural can break.

   The change that matters most is the filter bar. Measured on the live app at 1500px wide, the
   Leads toolbar was 338px tall — a THIRD of the viewport before a single lead was visible — because
   `.input, .select { width: 100% }` made each of the six filter dropdowns claim its own full-width
   row inside a flex-wrap container. That one rule was the single worst usability problem in the
   product. Everything else here is hierarchy, depth and rhythm.
   ============================================================================================= */

:root {
  /* Depth. The base theme paints every surface the same colour with a 1px border, so nothing reads
     as nearer or further away. Three explicit levels + real shadows give the eye somewhere to rest. */
  --surface-1: #14171e;   /* page-level containers            */
  --surface-2: #191d26;   /* cards, panels                    */
  --surface-3: #202531;   /* raised: inputs, hovered rows     */
  --border-soft: #232833;
  --border-strong: #333a49;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .34);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);

  /* Type scale. The base jumps 11 → 13 → 14 → 18 with no rhythm; these are the steps actually used. */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 27px;

  /* Spacing rhythm — a 4px grid, so gaps stop being ad-hoc. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;

  --radius: 11px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Pipeline colours, matching the source's own encoding so our UI reads identically to theirs:
     grey=Pending, green=Done, violet=Booked, red=Reject, amber=Cancel. */
  --pipe-pending: #8b93a3;
  --pipe-done:    #34c98e;
  --pipe-booked:  #8b5cf6;
  --pipe-reject:  #ff5d5d;
  --pipe-cancel:  #ffa24b;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

body { font-size: var(--fs-md); letter-spacing: .002em; }

/* ---------------------------------------------------------------------------------------------
   1. THE FILTER BAR — the 338px wall
   --------------------------------------------------------------------------------------------- */

/* Selects inside a toolbar size to their content instead of claiming a full row. This alone takes
   the Leads toolbar from 338px to a single ~44px line. */
.toolbar-row .select,
.toolbar .select,
.stats-filter-row .select {
  width: auto;
  min-width: 120px;
  max-width: 210px;
  flex: 0 1 auto;
}

.leads-toolbar {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.toolbar-row { gap: var(--sp-2); row-gap: var(--sp-2); }
.search-wrap { max-width: 320px; flex: 1 1 220px; }

/* A filter that is ON should be obvious at a glance — otherwise you cannot tell why the list is
   short. Any select holding a value gets an accent ring. :has() is supported everywhere we target;
   where it is not, the control simply looks normal, which is the current behaviour. */
.toolbar-row .select:not([data-empty="1"]):valid { }
.toolbar-row select.select.is-set,
.toolbar-row select.select:not(:placeholder-shown) { border-color: var(--accent); }

/* ---------------------------------------------------------------------------------------------
   2. CONTROLS — buttons, inputs, chips
   --------------------------------------------------------------------------------------------- */

.btn {
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 550;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .06s var(--ease);
}
.btn:hover { background: #262c3a; border-color: #3d4557; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); }
.btn-primary {
  background: linear-gradient(180deg, #5b95ff, #3f7ef0);
  border-color: #3f7ef0;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-primary:hover { background: linear-gradient(180deg, #6ba0ff, #4a88f5); border-color: #4a88f5; }
.btn-danger  { background: rgba(255,93,93,.14); border-color: rgba(255,93,93,.42); color: #ff8080; }
.btn-danger:hover { background: rgba(255,93,93,.22); border-color: rgba(255,93,93,.6); }
.btn-success { background: rgba(52,201,142,.14); border-color: rgba(52,201,142,.42); color: #4fd8a3; }
.btn-ghost   { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.input, .select, textarea.input {
  background: var(--surface-3);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .16);
}

.chip {
  padding: 6px 12px;
  font-size: var(--fs-sm);
  background: var(--surface-3);
  border-color: var(--border-strong);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  cursor: pointer;
  user-select: none;
}
.chip:hover { background: #262c3a; }
.chip-on { background: rgba(79,140,255,.16); border-color: rgba(79,140,255,.5); color: #a8c6ff; }

/* ---------------------------------------------------------------------------------------------
   3. SURFACES
   --------------------------------------------------------------------------------------------- */

.card, .stat, .feed-card, .system-card, .login-card {
  background: var(--surface-2);
  border-color: var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card { padding: var(--sp-4); }

.stat { padding: var(--sp-4) var(--sp-4) var(--sp-3); transition: border-color .15s var(--ease); }
.stat:hover { border-color: var(--border-strong); }
.stat-num { font-size: var(--fs-2xl); letter-spacing: -.025em; }
.stat-label { font-size: var(--fs-xs); letter-spacing: .08em; margin-top: var(--sp-1); }
.stat-sub { font-size: var(--fs-sm); margin-top: var(--sp-2); line-height: 1.4; }

/* ---------------------------------------------------------------------------------------------
   4. TABLES — the screen the owner lives in
   --------------------------------------------------------------------------------------------- */

.table-card { padding: 0; overflow: hidden; }
.table { font-size: var(--fs-md); }
.table th {
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  padding: 11px 14px;
  background: var(--surface-1);
  position: sticky;      /* the header stays put while you scan a long list */
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border-strong);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: var(--surface-3); }
.table tbody tr:last-child td { border-bottom: none; }
.table-scroll { max-height: calc(100vh - 250px); overflow: auto; }

.lead-name { font-weight: 560; }
/* Phone numbers and ids are data you compare vertically — tabular figures stop them from jittering. */
.table td:nth-child(1), .table td:nth-child(3) { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------
   5. BADGES + pipeline colour
   --------------------------------------------------------------------------------------------- */

.badge { padding: 3px 10px; font-size: var(--fs-xs); font-weight: 560; }
.badge-violet { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.42); color: #b294ff; }
.badge-amber  { background: rgba(255,162,75,.14); border-color: rgba(255,162,75,.42); color: #ffb96b; }

/* ---------------------------------------------------------------------------------------------
   6. NAVIGATION
   --------------------------------------------------------------------------------------------- */

.sidebar { background: var(--surface-1); border-right: 1px solid var(--border-soft); }
.nav-item {
  border-radius: var(--radius-sm);
  transition: background .13s var(--ease), color .13s var(--ease);
  font-size: var(--fs-md);
}
.nav-item:hover { background: var(--surface-3); }
.nav-on {
  background: linear-gradient(90deg, rgba(79,140,255,.18), rgba(79,140,255,.05));
  color: #fff;
  box-shadow: inset 2px 0 0 var(--accent);
}
.topbar {
  background: rgba(20, 23, 30, .82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-title { font-size: var(--fs-xl); font-weight: 620; letter-spacing: -.015em; }

/* ---------------------------------------------------------------------------------------------
   7. DRAWER / MODAL
   --------------------------------------------------------------------------------------------- */

.drawer { background: var(--surface-2); box-shadow: var(--shadow-lg); }
.drawer-head { border-bottom: 1px solid var(--border-soft); padding: var(--sp-4); }
.drawer-body { padding: var(--sp-4); }
.drawer-section { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-soft); }
.drawer-section:last-child { border-bottom: none; }
.drawer-section h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--sp-3); }
.modal { background: var(--surface-2); box-shadow: var(--shadow-lg); border-radius: var(--radius); }
.modal-head { padding: var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.modal-body { padding: var(--sp-4); }
.modal-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-soft); }

/* Key/value rows read far better as a two-column grid than as inline pairs. */
.kv {
  display: grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap: var(--sp-3);
  padding: 7px 0;
  align-items: baseline;
  border-bottom: 1px dashed var(--border-soft);
}
.kv:last-child { border-bottom: none; }
.kv > span { color: var(--muted); font-size: var(--fs-sm); }
.kv > strong { font-weight: 550; word-break: break-word; }

/* ---------------------------------------------------------------------------------------------
   8. EMPTY / LOADING
   --------------------------------------------------------------------------------------------- */

.empty { padding: var(--sp-6) var(--sp-4); color: var(--muted); text-align: center; }
.empty svg { opacity: .3; margin-bottom: var(--sp-3); }
.spinner-wrap { padding: var(--sp-6); }

/* ---------------------------------------------------------------------------------------------
   9. PAGINATION
   --------------------------------------------------------------------------------------------- */

.pagination { gap: var(--sp-1); margin-top: var(--sp-4); }
.page-btn {
  min-width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: background .13s var(--ease), color .13s var(--ease), border-color .13s var(--ease);
}
.page-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.page-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------------------------------
   10. MOBILE — a technician opens this on a phone
   --------------------------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .toolbar-row .select { min-width: 0; max-width: none; flex: 1 1 46%; }
  .search-wrap { max-width: none; flex: 1 1 100%; }
  .table th, .table td { padding: 10px 11px; }
  .stat-num { font-size: 23px; }
  .drawer { width: 100%; }
  .table-scroll { max-height: none; }
}

/* Respect a user who asked the OS to stop animating things. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}