/* =============================================================================
 * app.css — behaviour-specific styling that the design system does not cover:
 * the scrollbars, the drag states, the date picker's internals.
 *
 * All of it reads tokens from theme.css. Nothing here introduces a colour, a
 * radius or a size of its own.
 * ========================================================================== */

/* Scrollbars, quiet enough to disappear until used. */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--rgb-ash-400) / .5) transparent; }
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--rgb-ash-400) / .45); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--rgb-ash-400) / .7); background-clip: padding-box; }

/* No flash of unstyled content before Alpine paints. */
[x-cloak] { display: none !important; }

/* Full-height panes (board, messages). `dvh` is what keeps the bottom of the
 * pane clear of a phone's collapsing URL bar — `vh` measures the tallest the
 * viewport ever gets, so the last cards end up under the browser chrome. The
 * `vh` line stays as the fallback for engines without `dvh`. */
.dvh-shell { height: calc(100vh - var(--shell-offset, 0px)); height: calc(100dvh - var(--shell-offset, 0px)); }

/* Kanban: horizontal scroll on small screens, columns keep their width. */
.board-scroll { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.board-col { scroll-snap-align: start; }
/* While a card is in flight the snap fights our per-frame edge scroll — see
 * startAutoScroll() in app.js. */
.board-scroll.is-dragging { scroll-snap-type: none; }

/* Drag states. The dragged card is the one thing on the board that genuinely
 * floats, so it is the one thing that gets the shadow. */
.drag-ghost { opacity: .35; }
.drag-active { box-shadow: var(--shadow-overlay); }

.lead-card { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
/* Hover is a value shift, not a glow. */
.lead-card:hover { background: var(--bg-hover); border-color: var(--line-strong); }
/* Touch only: holding a card to pick it up must not raise the text-selection
 * callout. Pointer devices keep the card's text selectable. */
@media (hover: none) {
  .lead-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* =============================================================================
 * Date and time picker — one popover serves every date field in the app (see
 * the `dt*` section in store.js and #dt-picker in app.html).
 *
 * It used to tint itself per field: violet for a retarget date, emerald for a
 * payment, orange for a follow-up. Five accents for one control, none of which
 * told you anything. It is one control, so it is one colour.
 * ========================================================================== */
.dt-pop { width: min(19rem, calc(100vw - 1rem)); }

.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.dt-dow {
  font-size: var(--t-micro); font-weight: 600; color: var(--fg-3);
  height: 22px; display: grid; place-items: center;
}
.dt-day {
  height: 30px; border-radius: var(--r-ctl);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); font-weight: 500; color: var(--fg);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dt-day:hover { background: var(--bg-hover); }
.dt-day.is-out { color: var(--fg-3); opacity: .7; }
/* Today is a ring; the selected day is filled. Both can be true at once, and
 * the fill has to win, so it clears the ring. */
.dt-day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.dt-day.is-sel { background: var(--accent); color: var(--accent-fg); font-weight: 600; box-shadow: none; }

/* Compact badge that opens the picker — used where a full-width field button
 * would crowd a toolbar (the analytics range, the leads date window). */
.dt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--pad-tight);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--bg-surface); color: var(--fg-2);
  font-size: var(--t-body); font-weight: 500; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.dt-badge:hover { background: var(--bg-hover); color: var(--fg); }
.dt-badge i { color: var(--fg-4); }

/* Quick offsets ("Today", "+30 days") and the AM/PM pair. */
.dt-chip {
  font-size: var(--t-meta); font-weight: 500; height: 24px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--fg-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.dt-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dt-seg {
  padding: 0 10px; height: 28px; font-size: var(--t-meta); font-weight: 500;
  color: var(--fg-2); background: var(--bg-surface); white-space: nowrap;
}
.dt-seg.is-on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }

/* Time row: clock · hour · ":" · minute · AM/PM.
 *
 * It was a flex row of `.field`s, and `.field` is `width: 100%` — so both
 * selects asked for the whole row and the AM/PM pair, last in line, was
 * squeezed to a sliver that spilled out of the popover on narrow laptops and
 * on every phone. A grid settles it the other way round: AM/PM and the two
 * glyphs are sized by their content first, and the selects split whatever is
 * left. The pair reads the same at 320px as it does at 1440px. */
.dt-time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center; gap: 6px;
}
.dt-time > .field { width: 100%; min-width: 0; }
.dt-ap {
  display: inline-flex; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden;
}
.dt-done { background: var(--accent); color: var(--accent-fg); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}