/* ── Nocturne design system — promoted from the Dashboard-only rollout to
 * the whole app. Shared classes below (.card, .btn-primary, .stage-badge,
 * etc.) are what every plugin already uses, so retheming them here is what
 * carries the new look across the entire menu without editing every
 * plugin's markup. See design_handoff_crm_prototype/README.md. ── */
:root {
  --n-bg: #161826;
  --n-bg-raised: #1b1e2e;
  --n-bg-sunken: #101018;
  --n-border: #2a2d42;
  --n-border-soft: #23253a;
  --n-text: #e9e9ed;
  --n-text-muted: #9a9ab0;
  --n-text-faint: #6b6b82;
  --n-accent: #9184d9;
  --n-accent-soft: rgba(145, 132, 217, 0.14);
  --n-accent-border: rgba(145, 132, 217, 0.35);
  --n-accent-text: #c3bbee;
  --n-radius-md: 8px;
  --n-radius-sm: 6px;
  --n-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --n-shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
}

body {
  background: var(--n-bg) !important;
  color: var(--n-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4B5563; }

/* ── Mobile scroll quality ────────────────────────────────────────────────
 * Fixes common mobile scroll jank:
 *   - `-webkit-overflow-scrolling: touch` re-enables momentum on iOS 13+
 *     (Safari dropped it as default after iOS 13 but it's still needed for
 *     nested scroll containers within flex layouts).
 *   - `overscroll-behavior: contain` prevents the parent page from scrolling
 *     when a child container hits its top/bottom edge (eliminates the
 *     "bounce" or chain-scroll that looks janky on iOS Safari).
 *   - `contain: strict` tells the browser this element's layout/paint is
 *     independent — large scroll regions don't force a full-page reflow.
 *   - `will-change: transform` promotes to its own GPU layer so scrolling
 *     doesn't trigger paint on the rest of the page.
 *   - `touch-action: manipulation` on inputs kills the 300ms double-tap
 *     zoom delay so the reply box feels instant.
 *   - `text-size-adjust: 100%` prevents iOS Safari from inflating font
 *     sizes inside form controls (otherwise the reply input balloons).
 */
/* Only apply mobile-scroll hardening to VERTICAL scroll containers.
 * `contain: strict` includes `contain: size`, which makes the element
 * size itself independent of its children — that breaks the layout of
 * any horizontal scroll container (e.g. the customer-detail tab bar
 * uses `overflow-x-auto scroll-touch` and the buttons got squashed to
 * 16px tall / text truncated). Scoping to vertical overflow keeps the
 * iOS momentum + GPU layer benefits for scrolling lists without
 * collateral damage on horizontal scrollers.
 *
 * 2026-08-13: same collateral damage, different shape — content-sized
 * popovers (search-suggestion dropdowns using `max-h-* overflow-y-auto`
 * so they shrink-to-fit until the list is long enough to scroll) also
 * got `contain: size` from this rule, which makes height sizing ignore
 * the element's children entirely. That collapsed the box to ~2px tall
 * regardless of how many suggestions it held (Retail Sales' and Record
 * Payment's customer-search dropdowns both silently broken this way —
 * not a z-index/stacking issue, the box just never had any visible
 * height to paint into). `.dropdown-scroll` opts a popover out, the same
 * way `.overflow-x-auto` already opts horizontal scrollers out — add it
 * to any future absolutely-positioned, content-sized suggestion list.
 */
.scroll-touch:not(.overflow-x-auto),
.overflow-y-auto:not(.dropdown-scroll),
.overflow-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  contain: strict;
  will-change: transform;
  transform: translateZ(0);   /* force GPU layer */
}

input[type="text"],
input[type="search"],
textarea,
.input {
  touch-action: manipulation;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Hide iOS Safari's tap highlight (the gray flash on every tap) inside
 * interactive controls — looks janky during fast scrolling. */
button,
[role="button"],
.btn-primary,
.btn-secondary {
  -webkit-tap-highlight-color: transparent;
}

/* When the user taps a conversation row and the chat pane slides in,
 * the chat pane itself becomes the scroll container — same hardening. */
#wa-msgs,
#wa-conv-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  contain: strict;
  will-change: transform;
  transform: translateZ(0);
}

/* Stage/priority tags — Nocturne's "single accent, used sparingly" rule:
 * only the two "hot" states (Lead/Quoted stages, High/Urgent priority) get
 * the accent color; mid-pipeline states are outlined; Lost/Low are neutral. */
.stage-badge {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium capitalize;
  border: 1px solid transparent;
}
.stage-lead, .stage-quoted {
  background: var(--n-accent-soft); border-color: var(--n-accent-border); color: var(--n-accent-text);
}
.stage-showroom, .stage-showroom_visit, .stage-showroom_visited, .stage-site_visit, .stage-installation, .stage-completed, .stage-service_ticket {
  background: transparent; border-color: var(--n-border); color: var(--n-text-muted);
}
.stage-lost {
  background: var(--n-bg-sunken); border-color: var(--n-border-soft); color: var(--n-text-faint);
}

.priority-urgent, .priority-high {
  background: var(--n-accent-soft); border: 1px solid var(--n-accent-border); color: var(--n-accent-text);
}
.priority-medium {
  background: transparent; border: 1px solid var(--n-border); color: var(--n-text-muted);
}
.priority-low {
  background: var(--n-bg-sunken); border: 1px solid var(--n-border-soft); color: var(--n-text-faint);
}

.card {
  background: var(--n-bg-raised);
  border-radius: var(--n-radius-md);
  border: 1px solid var(--n-border-soft);
  box-shadow: var(--n-shadow-sm);
  padding: 1.25rem;
}

/* Primary buttons are outlined, never filled, per the Nocturne system. */
.btn-primary {
  background: var(--n-accent-soft);
  border: 1px solid var(--n-accent-border);
  color: var(--n-accent-text);
  padding: 0.5rem 1rem;
  border-radius: var(--n-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn-primary:hover { background: rgba(145, 132, 217, 0.24); border-color: var(--n-accent); }

.btn-secondary {
  background: var(--n-bg-sunken);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  padding: 0.5rem 1rem;
  border-radius: var(--n-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--n-border-soft); color: var(--n-text); }

.input {
  width: 100%;
  background: var(--n-bg-sunken);
  color: var(--n-text);
  border-radius: var(--n-radius-sm);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--n-border);
  font-size: 0.875rem;
}
.input:focus { border-color: var(--n-accent); outline: none; }
.label { display: block; color: var(--n-text-faint); font-size: 0.75rem; margin-bottom: 0.25rem; }

/* Desktop default: the mobile-only top bar (.mobile-topbar, md:hidden) isn't
 * rendered here at all, so no need to reserve space for it — this used to
 * be a fixed inline "100dvh - 56px" on the shell regardless of screen size,
 * shrinking the desktop chat view by that same 56px for nothing. The mobile
 * override (which really does need the reservation) lives in responsive.css. */
.wa-inbox-shell { height: calc(100dvh - 1rem) !important; }

.kanban-col {
  @apply flex-shrink-0 w-[220px] p-3;
  background: var(--n-bg-raised);
  border-radius: var(--n-radius-md);
  border: 1px solid var(--n-border-soft);
}
.kanban-card {
  @apply p-3 mb-2;
  cursor: pointer;
  background: var(--n-bg-sunken);
  border-radius: var(--n-radius-sm);
  border: 1px solid var(--n-border);
  transition: border-color .15s ease, background .15s ease;
}
.kanban-card:hover { border-color: var(--n-accent-border); background: var(--n-border-soft); }