/* ═══════════════════════════════════════════════════════════
   organizer.css — Weekly Route Organizer board
   Full-screen drag-and-drop board (assets/js/route-organizer.js).
   Uses the app design tokens set at runtime by theme.js, so it
   follows light/dark automatically.
   ═══════════════════════════════════════════════════════════ */

/* Full-screen overlay. Sits above page content + sidebar (--z-sidebar:150)
   but BELOW the base modal (--z-modal:200) so the reused route-day-change
   email preview modal renders on top of the board at submit time. */
.ro-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}
.ro-overlay.hidden { display: none; }

/* ── Header bar ────────────────────────────────────────── */
.ro-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}
.ro-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.ro-title small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}
.ro-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ro-pending-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.ro-pending-count.none { color: var(--text-muted); background: transparent; }
.ro-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.ro-close:hover { background: var(--accent-light); color: var(--text); }

/* ── Effective-date picker ─────────────────────────────── */
.ro-eff {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ro-eff-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ro-eff-date {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

/* ── Hint strip ────────────────────────────────────────── */
.ro-hint {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ro-hint strong { color: var(--text); }

/* ── Board ─────────────────────────────────────────────── */
.ro-board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.ro-col {
  flex: 1 0 200px;
  min-width: 200px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ro-col-head {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 14px;
}
.ro-col-head .ro-col-date { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.ro-col-head .ro-col-count { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.ro-col-head-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Whole-day drag handle — grab it to swap this day's route with another. */
.ro-col-grip {
  cursor: grab;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -2px;
  padding: 2px 3px;
  margin-left: -3px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.ro-col-grip:hover { color: var(--accent); background: var(--accent-light); }
.ro-col-grip:active { cursor: grabbing; }
/* The column being dragged for a swap dims to signal it's in flight. */
.ro-col.ro-col-dragging { opacity: 0.4; }
.ro-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Drop-target affordances */
.ro-col.ro-drop-ok   { outline: 2px dashed var(--accent); outline-offset: -3px; }
.ro-col.ro-drop-ok .ro-col-body { background: var(--accent-light); }
.ro-col.ro-no-route  { opacity: 0.6; }

/* Insertion line while reordering — where the dragged card would land. */
.ro-card.ro-drop-before::before,
.ro-card.ro-drop-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  z-index: 1;
}
.ro-card.ro-drop-before::before { top: -5px; }
.ro-card.ro-drop-after::after   { bottom: -5px; }
.ro-col-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4) var(--space-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* Column badge for a future-dated (scheduled) reorder on this day's route. */
.ro-col-sched {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 var(--space-2);
  padding: 4px var(--space-2);
  background: var(--accent-light);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
}
.ro-col-sched-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Cards ─────────────────────────────────────────────── */
.ro-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: grab;
  position: relative;
  user-select: none;
  transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}
.ro-card:active { cursor: grabbing; }
.ro-card:hover { border-color: var(--accent); }
.ro-card.ro-dragging { opacity: 0.5; }
.ro-card.ro-lift { box-shadow: var(--shadow); transform: translateY(-1px); }

/* A card that first appears during an animated re-render pops in gently
   (FLIP animates cards that already existed; this covers brand-new ones). */
@keyframes ro-card-enter {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.ro-card.ro-enter { animation: ro-card-enter 0.24s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .ro-card.ro-enter { animation: none; }
}

/* Selected (tap-to-move fallback for touch) */
.ro-card.ro-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.ro-card-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.25;
}
/* Tri-state "notified of day changes?" badge (🔔 yes / 🔕 no). */
.ro-card-name .ro-notif { font-size: 12px; flex-shrink: 0; line-height: 1; }
.ro-card-name .ro-notif-on   { opacity: 1; }
.ro-card-name .ro-notif-off,
.ro-card-name .ro-notif-none { opacity: 0.45; filter: grayscale(1); }
.ro-card-name .ro-check { font-size: 14px; flex-shrink: 0; color: var(--text-muted); line-height: 1; }
.ro-card.ro-selected .ro-check { color: var(--accent); }
.ro-card-addr {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
  word-break: break-word;
}

/* "Moved" ribbon + per-card undo */
.ro-card.ro-moved { border-color: var(--accent); border-style: dashed; }
.ro-card-moved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
}
.ro-moved-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ro-undo-btn {
  font-size: 11px;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Scheduled (pending future permanent move) — locked card w/ Cancel */
.ro-card.ro-scheduled {
  border-style: dashed;
  border-color: var(--text-muted);
  opacity: 0.9;
  cursor: default;
}
.ro-card.ro-scheduled:hover { border-color: var(--text-muted); }
.ro-sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
}
.ro-sched-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ro-cancel-btn {
  font-size: 11px;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* When a card is selected for tap-move, columns other than its own get a
   tap target overlay hint. */
.ro-board.ro-selecting .ro-col:not(.ro-src-col):not(.ro-no-route) .ro-col-head {
  color: var(--accent);
  cursor: pointer;
}
.ro-board.ro-selecting .ro-col:not(.ro-src-col):not(.ro-no-route) .ro-col-body { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   Clone a week — read-only week browser + "needs placing" tray
   ═══════════════════════════════════════════════════════════ */

/* The browse header + diff strip live in the DOM next to the normal header and
   are swapped in by .ro-preview-mode, so toggling modes destroys no listeners. */
.ro-pv-header,
.ro-pv-diff { display: none; }
.ro-overlay.ro-preview-mode .ro-header,
.ro-overlay.ro-preview-mode .ro-hint,
.ro-overlay.ro-preview-mode .ro-tray { display: none; }
.ro-overlay.ro-preview-mode .ro-pv-header,
.ro-overlay.ro-preview-mode .ro-pv-diff { display: flex; }

.ro-pv-header {
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}
.ro-pv-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.ro-pv-arrow {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 4px 11px;
  cursor: pointer;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ro-pv-arrow:hover { background: var(--accent-light); border-color: var(--accent); }
.ro-pv-week {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.ro-pv-jump {
  font: inherit;
  font-size: 12px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
}
.ro-pv-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Diff summary — recomputed on every week you page to. */
.ro-pv-diff {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
}
.ro-pv-diff-label { color: var(--text-muted); margin-right: 2px; }
.ro-dp {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--accent-light);
  color: var(--accent);
}
.ro-dp.mv   { background: var(--warning-light); color: var(--warning); }
.ro-dp.nw   { background: var(--success-light); color: var(--success); }
.ro-dp.dr,
.ro-dp.nc   { background: transparent; color: var(--text-muted); box-shadow: 0 0 0 1px var(--border) inset; }
.ro-dp.same { background: transparent; color: var(--text-muted); }

/* Preview cards are read-only: no drag, no select, no data-id. */
.ro-card.ro-pv-card {
  cursor: default;
  border-left-width: 3px;
}
.ro-card.ro-pv-card:hover { border-color: var(--border); border-left-color: inherit; }
.ro-pv-tag {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
/* Would change day if cloned — the cards that make the diff count real. */
.ro-card.ro-pv-move {
  border-left-color: var(--warning);
  background: var(--warning-light);
}
.ro-card.ro-pv-move .ro-pv-tag { color: var(--warning); }
/* In that week, gone now (or its day no longer has a route). */
.ro-card.ro-pv-drop {
  opacity: 0.6;
  border-style: dashed;
}
.ro-card.ro-pv-drop .ro-card-name { text-decoration: line-through; }
/* Can't be cloned: one-time visit, or locked by a pending scheduled move. */
.ro-card.ro-pv-onetime,
.ro-card.ro-pv-locked {
  border-left-color: var(--text-muted);
  border-style: dashed;
  opacity: 0.75;
}

/* ── "Needs placing" tray ─────────────────────────────────
   New pools a clone couldn't place. Submit stays blocked until it's empty, so
   a pool can never silently fall off the week. */
.ro-tray {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--success);
  background: var(--success-light);
}
.ro-tray.hidden { display: none; }
.ro-tray-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.ro-tray-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.ro-tray-row .ro-card {
  flex: 0 0 200px;
  max-width: 200px;
  background: var(--card);
  border-color: var(--success);
}
/* Unplaced pools block Submit — make the pill read as a stop sign, not a tally. */
.ro-pending-count.blocked {
  color: var(--danger);
  background: transparent;
  box-shadow: 0 0 0 1px var(--danger) inset;
}

/* Dark-mode: cards use --bg which flips; keep hover subtle */
[data-dark="1"] .ro-card { background: rgba(255,255,255,0.03); }
[data-dark="1"] .ro-close:hover { background: rgba(255,255,255,0.08); }
[data-dark="1"] .ro-tray-row .ro-card { background: rgba(255,255,255,0.06); }

/* ── Narrow screens (phones/tablets) ──────────────────────
   Columns stay in a horizontally-scrollable row but shrink so ~1.5 columns
   are visible, hinting the row scrolls. */
@media (max-width: 640px) {
  .ro-board { gap: var(--space-2); padding: var(--space-2); }
  .ro-col { flex: 0 0 78vw; min-width: 78vw; max-width: 78vw; }
  .ro-header { padding: var(--space-2) var(--space-3); }
  .ro-title { font-size: 15px; }
  .ro-pv-header { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .ro-pv-week { font-size: 13px; }
  .ro-pv-actions { width: 100%; justify-content: flex-end; }
  .ro-pv-diff { padding: var(--space-2) var(--space-3); }
  .ro-tray { padding: var(--space-2) var(--space-3); }
  .ro-tray-row .ro-card { flex: 0 0 68vw; max-width: 68vw; }
}