/* =============================================================================
 * app.css — small polish layer on top of Tailwind (loaded via Play CDN).
 * Keep it thin: Tailwind utilities do the heavy lifting in the markup.
 * ========================================================================== */

/* Smooth, modern scrollbars (Notion/Trello feel) */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); background-clip: padding-box; }

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

/* Kanban board: horizontal scroll on small screens, columns keep width */
.board-scroll { scroll-snap-type: x proximity; }
.board-col { scroll-snap-align: start; }

/* Drag states for SortableJS */
.drag-ghost { opacity: .4; }
.drag-active { transform: rotate(2deg); box-shadow: 0 12px 30px rgba(0,0,0,.18); }

/* Card lift on hover */
.lead-card { transition: box-shadow .15s ease, transform .15s ease; }
.lead-card:hover { box-shadow: 0 6px 18px rgba(2,6,23,.10); }

/* Slide-over drawer transitions handled by Alpine x-transition;
   this keeps the backdrop above content */
.drawer-backdrop { backdrop-filter: blur(2px); }

/* Nav active pill */
.nav-item.active { background: rgb(238 242 255); color: rgb(67 56 202); }
.dark .nav-item.active { background: rgb(30 41 59); color: rgb(165 180 252); }

/* =============================================================================
 * Unified date & time picker (one popover serves every date field — see the
 * `dt*` section in store.js and the #dt-picker markup in app.html).
 * Accent is a CSS variable so a field can tint the picker to its stage colour
 * without generating Tailwind classes at runtime.
 * ========================================================================== */
.dt-pop {
  --dt-accent: #4f46e5; --dt-accent-soft: rgba(79, 70, 229, .12);
  width: min(20rem, calc(100vw - 1rem));
}
.dt-pop[data-accent="violet"]  { --dt-accent: #7c3aed; --dt-accent-soft: rgba(124, 58, 237, .12); }
.dt-pop[data-accent="orange"]  { --dt-accent: #ea580c; --dt-accent-soft: rgba(234, 88, 12, .12); }
.dt-pop[data-accent="emerald"] { --dt-accent: #059669; --dt-accent-soft: rgba(5, 150, 105, .12); }
.dt-pop[data-accent="rose"]    { --dt-accent: #e11d48; --dt-accent-soft: rgba(225, 29, 72, .12); }

/* month grid */
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-dow { font-size: .6875rem; font-weight: 600; text-transform: uppercase; color: rgb(148 163 184); height: 1.75rem; display: grid; place-items: center; }
.dt-day {
  height: 2.25rem; border-radius: .625rem; font-size: .8125rem; font-weight: 600;
  color: rgb(51 65 85); transition: background-color .12s ease, color .12s ease;
}
.dark .dt-day { color: rgb(226 232 240); }
.dt-day:hover { background: var(--dt-accent-soft); }
.dt-day.is-out { color: rgb(148 163 184); font-weight: 500; opacity: .55; }
.dt-day.is-today { box-shadow: inset 0 0 0 1.5px var(--dt-accent); }
.dt-day.is-sel { background: var(--dt-accent); color: #fff; box-shadow: none; }

/* Compact badge that opens the picker — used where a full-width field button
 * would crowd a toolbar (e.g. the analytics custom range). */
.dt-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; padding: .375rem .625rem; border-radius: .5rem;
  border: 1px solid rgb(226 232 240); color: rgb(71 85 105);
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.dark .dt-badge { border-color: rgb(51 65 85); color: rgb(203 213 225); }
.dt-badge:hover { border-color: #4f46e5; color: #4f46e5; background: rgba(79, 70, 229, .08); }
.dt-badge i { color: rgb(148 163 184); }
.dt-badge:hover i { color: inherit; }

/* quick chips + AM/PM segments */
.dt-chip {
  font-size: .75rem; font-weight: 600; padding: .25rem .625rem; border-radius: .5rem;
  border: 1px solid rgb(226 232 240); color: rgb(100 116 139); transition: all .12s ease;
}
.dark .dt-chip { border-color: rgb(51 65 85); }
.dt-chip:hover { border-color: var(--dt-accent); color: var(--dt-accent); background: var(--dt-accent-soft); }
.dt-seg { padding: .5rem .75rem; font-size: .75rem; font-weight: 600; color: rgb(100 116 139); }
.dt-seg.is-on { background: var(--dt-accent); color: #fff; }
.dt-done { background: var(--dt-accent); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}