/* web/css/planner.css — Planner dashboard styling, matching the Planner
   Dashboard mockups. Reuses design tokens from styles.css where the mockup's
   colour happens to match this app's existing palette; hardcodes the
   mockup's own colours (phase colours, KPI icon tints, status pills)
   elsewhere, since those are specific to the Planner's own visual language. */

/* --------------------------------------------------- Full-height layout
   The Planner fills the content area: toolbar on top, then the side panel and
   board share all remaining height, each scrolling on its own. The page
   itself does not scroll (except on very short windows, see min-height). */
.content:has(> #planner.active) { display: flex; flex-direction: column; padding: 16px 20px; }
#planner.section.active {
  display: flex; flex-direction: column;
  flex: 1; min-height: 480px; margin-bottom: 0;
  --planner-rail-w: 260px;
}

/* Focus mode: hide the app menu, top header and attention banner. */
body.planner-focus:has(#planner.active) .sidebar,
body.planner-focus:has(#planner.active) .header,
body.planner-focus:has(#planner.active) #view-action-banner { display: none !important; }
body.planner-focus .content:has(> #planner.active) { padding: 8px 12px; }

.planner-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.planner-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.planner-btn-group { display: inline-flex; }
.planner-btn-group > button { border-radius: 0; margin-left: -1px; }
.planner-btn-group > button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.planner-btn-group > button:last-child { border-radius: 0 8px 8px 0; }
.planner-zoom .is-active, .planner-icon-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.planner-zoom .is-active:hover, .planner-icon-btn.is-active:hover { background: var(--accent-light); }
.planner-jump-wrap { position: relative; display: inline-flex; }
/* Native date picker anchored under the range label; opened via showPicker(). */
.planner-jump-date { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; opacity: 0; border: 0; padding: 0; pointer-events: none; }

.planner-icon-btn, .planner-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface);
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.planner-icon-btn { width: 34px; padding: 0; justify-content: center; }
.planner-icon-btn:hover, .planner-pill-btn:hover { background: var(--surface-alt); }
.planner-range-btn { font-weight: 600; white-space: nowrap; }
.planner-count-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; box-sizing: border-box;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.planner-count-badge[hidden] { display: none; }

/* Dropdown popovers (Filters, Legend, View). Labels are forced to the light
   surface's text colour: the global dark-mode label rule would otherwise
   paint them light-on-light. */
.planner-popover-wrap { position: relative; }
.planner-popover {
  position: absolute; top: 40px; right: 0; z-index: 30;
  background: var(--surface); color: var(--primary);
  border: 1px solid var(--outline-variant); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 230px; max-height: 70vh; overflow-y: auto;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.planner-popover[hidden] { display: none; }
.planner-popover .planner-legend-group-title { margin: 6px 0 0; }
.planner-popover .planner-legend-group-title:first-child { margin-top: 0; }
.planner-check, .dark-mode .planner-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--primary); cursor: pointer; white-space: nowrap; }
.planner-check input { cursor: pointer; margin: 0; }
.planner-popover-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--outline-variant); }
.planner-filter-select { padding-left: 10px; }

.planner-autoplan-split { position: relative; display: flex; }
.planner-autoplan-main, .planner-autoplan-caret {
  height: 34px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.planner-autoplan-main { padding: 0 16px; border-radius: 8px 0 0 8px; }
.planner-autoplan-caret { padding: 0 10px; border-radius: 0 8px 8px 0; border-left: 1px solid rgba(255,255,255,.25); }
.planner-autoplan-main:hover, .planner-autoplan-caret:hover { background: var(--accent-light); }
.planner-autoplan-menu {
  position: absolute; top: 44px; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 220px; overflow: hidden;
}
.planner-autoplan-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: none;
  background: none; font-size: 13px; color: var(--primary); cursor: pointer;
}
.planner-autoplan-menu button:hover { background: var(--surface-alt); }

/* ------------------------------------------------------ KPI chip strip */
/* 360px basis: when the toolbar can't spare that, the chips wrap onto their own line. */
.planner-summary { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 360px; justify-content: center; min-width: 0; container-type: inline-size; }
/* Not enough room for every label: resource chips drop theirs (the tooltip still has it). */
@container (max-width: 820px) { .planner-chip-label { display: none; } }
.planner-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 4px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 15px;
  font-size: 12px; color: var(--secondary); white-space: nowrap;
}
.planner-chip b { color: var(--primary); font-size: 13px; }
.planner-chip-of { margin-left: -4px; }
.planner-chip-label { margin-left: 2px; }
.planner-chip-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.planner-chip-icon svg { width: 13px; height: 13px; }
.planner-chip-icon.tint-blue   { background: #dbeafe; color: #2563eb; }
.planner-chip-icon.tint-purple { background: #ede9fe; color: #7c3aed; }
.planner-chip-icon.tint-green  { background: #dcfce7; color: #16a34a; }
.planner-chip-icon.tint-orange { background: #ffedd5; color: #ea580c; }
.planner-chip-icon.tint-red    { background: #fee2e2; color: #dc2626; }
.planner-chip-alert { cursor: pointer; font-family: inherit; }
.planner-chip-alert:hover { border-color: var(--accent); }
.planner-chip-alert.has-alert b { color: #dc2626; }

/* -------------------------------------------------------------- Body grid */
.planner-body { display: flex; gap: 12px; align-items: stretch; flex: 1; min-height: 0; position: relative; }
.planner-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.planner-panel {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-card);
  padding: 12px;
  flex: 1 1 0;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

/* Collapsed side panel: a slim strip of vertical tabs; a tab opens the panels
   as a drawer over the board (is-peek). While a drag starts from the drawer
   it goes see-through so the board's drop targets underneath stay reachable. */
.planner-sidebar-tabs { display: none; }
.sidebar-collapsed .planner-sidebar { width: 36px; }
.sidebar-collapsed .planner-sidebar > .planner-panel { display: none; }
.sidebar-collapsed .planner-sidebar-tabs { display: flex; flex-direction: column; gap: 6px; }
.planner-sidebar-tabs button {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 12px 0; width: 36px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer;
}
.planner-sidebar-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.sidebar-collapsed .planner-sidebar.is-peek {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 25;
  width: 300px; box-shadow: 8px 0 24px rgba(0,0,0,.2); border-radius: var(--radius-card);
  background: var(--surface-alt); padding: 8px; box-sizing: border-box;
}
.sidebar-collapsed .planner-sidebar.is-peek > .planner-panel { display: flex; }
.sidebar-collapsed .planner-sidebar.is-peek > .planner-sidebar-tabs { display: none; }
.planner-sidebar.is-drag-through { opacity: .3; pointer-events: none; }
.planner-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.planner-panel-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); margin: 0; }
.planner-search-row { position: relative; margin-bottom: 10px; }
.planner-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--secondary); pointer-events: none; }
.planner-search {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--primary);
  font-size: 13px;
}
.planner-unplanned, .planner-resources { overflow-y: auto; flex: 1; }
.planner-empty { color: var(--secondary); font-size: 13px; }

/* Unplanned project cards */
.planner-unplanned-project {
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--secondary);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.planner-unplanned-project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.planner-unplanned-project-name { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.planner-unplanned-project-name:hover { text-decoration: underline; }
.planner-unplanned-project-client { font-size: 11px; color: var(--secondary); }
.planner-phase-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  cursor: grab;
  font-size: 12px;
  color: var(--primary);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.planner-phase-row:hover { background: var(--surface-alt); }
.planner-phase-row.is-dragging { opacity: .35; }
.planner-phase-chip { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.planner-phase-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-phase-row-duration { color: var(--secondary); font-size: 11px; white-space: nowrap; }
.planner-phase-row-workers { display: flex; align-items: center; gap: 3px; color: var(--secondary); font-size: 11px; white-space: nowrap; }
.planner-show-more { display: block; margin: 6px 2px 2px; font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; }
.planner-show-more:hover { text-decoration: underline; }

/* Resources panel: collapsible role groups */
.planner-resource-group { margin-bottom: 4px; }
.planner-resource-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.planner-resource-group-header .chev { transition: transform 150ms; color: var(--secondary); }
.planner-resource-group.is-open .planner-resource-group-header .chev { transform: rotate(90deg); }
.planner-resource-group-body { display: none; padding-left: 4px; }
.planner-resource-group.is-open .planner-resource-group-body { display: block; }
.planner-resource-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 14px; font-size: 12.5px;
  cursor: grab; border-radius: 6px; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.planner-resource-row:hover { background: var(--surface-alt); }
.planner-resource-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-container);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  color: var(--primary); flex-shrink: 0; position: relative;
}
.planner-resource-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); }
.planner-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.planner-resource-avatar .planner-dot { position: absolute; bottom: -1px; right: -1px; border: 2px solid var(--surface); }

/* ---------------------------------------------------------------- Board */
.planner-board {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.planner-legend-dash { width: 16px; height: 0; border-top: 2px dashed; display: inline-block; }
.planner-legend-dash.is-holiday { border-color: #ef4444; }
.planner-legend-dash.is-weekend { border-color: var(--secondary); }
.planner-legend-dash.is-today { border-color: #16a34a; }

/* The day header is a sticky row inside the scroll box; its corner cell is
   sticky on both axes and sits above the rail. Both rows are max-content wide
   so sticky-left children stay pinned across the whole scroll range. */
.planner-board-head {
  display: flex; width: max-content; min-width: 100%;
  position: sticky; top: 0; z-index: 4;
  background: var(--surface); border-bottom: 1px solid var(--outline-variant);
}
.planner-board-corner {
  width: var(--planner-rail-w); flex-shrink: 0; position: sticky; left: 0; z-index: 5;
  background: var(--surface); border-right: 1px solid var(--outline-variant); box-sizing: border-box;
}
.planner-rail-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; }
.planner-rail-resizer:hover { background: rgba(37,99,235,.25); }
.planner-board-head-inner { position: relative; height: 44px; }
.planner-board-rows { display: flex; width: max-content; min-width: 100%; }
.planner-week-header {
  position: absolute; top: 0; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--secondary); text-transform: uppercase;
  border-right: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant);
}
.planner-day-col {
  position: absolute; top: 20px; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--secondary);
}
.planner-day-col.is-weekend { color: #ef4444; background: rgba(239,68,68,0.04); }

.planner-board-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
.planner-rail { width: var(--planner-rail-w); flex-shrink: 0; box-sizing: border-box; position: sticky; left: 0; background: var(--surface); z-index: 3; border-right: 1px solid var(--outline-variant); }
.planner-rail-project-header { padding: 10px 12px 8px; border-top: 2px solid var(--secondary-dim); box-sizing: border-box; }
.planner-rail-project:first-child .planner-rail-project-header { border-top: none; }
.planner-rail-project-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-rail-project-title a { color: var(--accent); text-decoration: none; }
.planner-collapse-btn {
  width: 18px; height: 18px; padding: 0; margin-left: -4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 4px; color: var(--secondary); cursor: pointer;
}
.planner-collapse-btn svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 150ms; }
.planner-collapse-btn.is-collapsed svg { transform: none; }
.planner-collapse-btn:hover { background: var(--surface-alt); color: var(--primary); }
.planner-rail-project-title a:hover { text-decoration: underline; }
.planner-rail-project-client { font-size: 11px; color: var(--secondary); margin-top: 2px; }
.planner-rail-project-progress { height: 4px; background: var(--surface-container); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.planner-rail-project-progress-fill { height: 100%; background: #2563eb; }
.planner-rail-role-label {
  padding: 4px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--secondary); box-sizing: border-box; display: flex; align-items: center;
}
.planner-rail-person-row {
  padding: 3px 12px 3px 20px; font-size: 12px; color: var(--primary); box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.planner-tracks { position: relative; flex: 1; }
.planner-tracks-inner { position: relative; }
.planner-project-block { border-top: 2px solid var(--secondary-dim); box-sizing: border-box; position: relative; }
.planner-project-block:first-child { border-top: none; }
.planner-header-row, .planner-role-label-row, .planner-person-track-row {
  position: relative; box-sizing: border-box;
}
.planner-weekend-col, .planner-holiday-line, .planner-today-line {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
}
.planner-weekend-col { background: rgba(239,68,68,0.03); }
.planner-holiday-line { width: 0; border-left: 2px dashed #ef4444; }
.planner-today-line { width: 0; border-left: 2px dashed #16a34a; z-index: 2; }

.planner-phase-bar {
  position: absolute;
  top: 6px;
  height: 32px;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 180ms cubic-bezier(.2,.8,.25,1);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.planner-phase-bar:hover { transform: scale(1.02); }

/* Belt-and-braces: while any planner drag is active, kill selection and the
   text/grab cursor everywhere so a fast mouse move never highlights the page. */
body.planner-dragging {
  user-select: none !important; -webkit-user-select: none !important;
  cursor: grabbing !important;
}
body.planner-dragging * { cursor: grabbing !important; }
.planner-phase-bar-label { overflow: hidden; text-overflow: ellipsis; }

.planner-dep-arrows { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.planner-dep-arrows path { fill: none; stroke: #94a3b8; stroke-width: 1.5; }

.planner-avatar-bar {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
  font-size: 10px; color: var(--primary);
  overflow: hidden; white-space: nowrap;
  cursor: pointer;
}
.planner-avatar-bar .planner-resource-avatar { width: 18px; height: 18px; font-size: 9px; }
.planner-avatar-bar-equipment { display: flex; align-items: center; gap: 4px; }
.planner-empty-slot {
  position: absolute; top: 4px; bottom: 4px;
  border: 1.5px dashed var(--outline-variant);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--secondary);
  cursor: pointer;
  background: none;
}
.planner-empty-slot:hover { border-color: var(--accent); color: var(--accent); background: rgba(37,99,235,.05); }

/* -------------------------------------------------------- Compact rows */
.planner-compact .planner-rail-project-header { padding: 6px 12px 4px; }
.planner-compact .planner-rail-project-progress { margin-top: 5px; height: 3px; }
.planner-compact .planner-phase-bar { height: 28px; }
.planner-compact .planner-rail-role-label { padding: 2px 12px; }
.planner-compact .planner-rail-person-row { padding-top: 1px; padding-bottom: 1px; }
.planner-compact .planner-avatar-bar .planner-resource-avatar { width: 14px; height: 14px; font-size: 8px; }

/* -------------------------------------------------------------- Legends */
.planner-legend-group-title { font-size: 12px; font-weight: 600; color: var(--secondary); }
.planner-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--secondary); }

/* --------------------------------------------------------- Detail panel */
.planner-detail-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 998; }
.planner-detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--surface); box-shadow: -8px 0 24px rgba(0,0,0,.15);
  z-index: 999; display: flex; flex-direction: column;
  transform: translateX(0); transition: transform 200ms ease;
}
.planner-detail-panel[hidden] { display: none; }
.planner-detail-header { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--outline-variant); }
.planner-detail-header h3 { flex: 1; margin: 0; font-size: 16px; }
.planner-detail-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.planner-detail-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.planner-detail-field { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--outline-variant); }
.planner-detail-field-label { color: var(--secondary); }
.planner-detail-field-value { color: var(--primary); font-weight: 500; text-align: right; }
.planner-detail-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--secondary); margin: 16px 0 8px; }
.planner-detail-resources { list-style: none; padding: 0; margin: 0; }
.planner-detail-resources li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--outline-variant); font-size: 13px; }
.planner-detail-resources li .planner-resource-name { flex: 1; }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; margin-left: auto; }
.btn-link:hover { text-decoration: underline; }
.btn-icon-remove { background: none; border: none; color: var(--secondary); cursor: pointer; padding: 2px; margin-left: auto; }
.btn-icon-remove:hover { color: #ef4444; }

/* ------------------------------------------------------------- Conflicts */
.planner-conflict-error { color: var(--error-text); font-size: 13px; }
.planner-conflict-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.planner-conflict-list .is-error { color: var(--error-text); }
.planner-conflict-list .is-warning { color: var(--warning-text); }

/* --------------------------------------------------------- Drag & drop */
.planner-drag-ghost {
  position: fixed; z-index: 1500; pointer-events: none;
  background: #16a34a; color: #fff; border-radius: 8px; padding: 10px 16px;
  font-size: 13px; font-weight: 600; box-shadow: 0 12px 24px rgba(0,0,0,.25);
  transform: scale(1.02); line-height: 1.5;
}
.planner-drag-ghost[hidden] { display: none; }
.planner-drag-ghost .ghost-meta { display: block; font-size: 11px; font-weight: 400; opacity: .9; }

.planner-drag-line-svg { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 1490; }
.planner-drag-line-svg[hidden] { display: none; }
.planner-drag-line-svg path { fill: none; stroke: #16a34a; stroke-width: 2; stroke-dasharray: 6 5; }

.planner-drop-zone-valid {
  position: absolute; top: 4px; bottom: 4px; z-index: 5;
  background: rgba(22,163,74,.12); border: 1.5px dashed #16a34a; border-radius: 6px;
}
.planner-drop-zone-invalid {
  position: absolute; top: 4px; bottom: 4px; z-index: 5;
  background: repeating-linear-gradient(45deg, rgba(239,68,68,.15) 0 6px, transparent 6px 12px);
  border: 1.5px dashed #ef4444; border-radius: 6px;
}

.planner-snap-tooltip {
  position: fixed; z-index: 1501;
  background: #111827; color: #fff; border-radius: 8px; padding: 8px 12px;
  font-size: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.25); max-width: 240px;
}
.planner-snap-tooltip[hidden] { display: none; }
.planner-snap-tooltip .row { display: flex; align-items: center; gap: 6px; }
.planner-snap-tooltip .row + .row { margin-top: 4px; }
.planner-snap-tooltip .ok { color: #4ade80; }

.planner-conflict-popover {
  position: fixed; z-index: 1501; width: 240px;
  background: var(--surface); color: var(--primary); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 12px 28px rgba(0,0,0,.2); border: 1px solid var(--outline-variant);
  border-left: 3px solid #ef4444;
}
.planner-conflict-popover[hidden] { display: none; }
.planner-conflict-popover .title { font-weight: 700; color: #ef4444; font-size: 13px; margin-bottom: 4px; }
.planner-conflict-popover ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }

/* --------------------------------------------------------- Undo toast */
.planner-undo-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 1600;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); color: var(--primary);
  border-radius: 10px; padding: 12px 16px; box-shadow: 0 12px 28px rgba(0,0,0,.18);
  max-width: 420px;
}
.planner-undo-toast[hidden] { display: none; }
.planner-undo-toast-icon { color: #16a34a; flex-shrink: 0; }
.planner-undo-toast-text { font-size: 13px; flex: 1; }
.planner-undo-toast-btn {
  background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer;
}
.planner-undo-toast-btn:hover { text-decoration: underline; }
.planner-undo-toast-close { background: none; border: none; color: var(--secondary); cursor: pointer; font-size: 16px; line-height: 1; }

/* --------------------------------------------------------------- Skills */
.planner-skills-checklist { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.planner-skill-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------------------------------------------------------------- Misc */
.badge-info { background: var(--info-bg); color: #1d4ed8; }

body.dark-mode .planner-day-col.is-weekend { background: rgba(239,68,68,0.08); }
body.dark-mode .planner-weekend-col { background: rgba(239,68,68,0.06); }
body.dark-mode .planner-unplanned-project { background: var(--surface-container); }
body.dark-mode .planner-resource-avatar { background: var(--dark-surface-container, #334155); }

@media (prefers-reduced-motion: reduce) {
  .planner-phase-bar, .planner-detail-panel { transition: none; }
}

@media (max-width: 1200px) {
  .planner-sidebar { width: 240px; }
  #planner.section.active { --planner-rail-w: 210px !important; }
}
@media (max-width: 900px) {
  /* Stacked layout: back to normal page scrolling with capped panel heights. */
  #planner.section.active { display: block; }
  .planner-body { flex-direction: column; }
  .planner-sidebar { width: 100%; }
  .planner-panel { max-height: 320px; }
  .planner-board { width: 100%; }
  .planner-board-scroll { max-height: 70vh; }
  .planner-sidebar-toggle { display: none; }
  .sidebar-collapsed .planner-sidebar { width: 100%; }
  .sidebar-collapsed .planner-sidebar > .planner-panel { display: flex; }
  .sidebar-collapsed .planner-sidebar-tabs { display: none; }
}

@media (max-width: 768px) {
  /* Narrow the frozen project rail so more of the timeline is visible; the
     board still scrolls horizontally for the day columns. */
  #planner.section.active { --planner-rail-w: 140px !important; }
  .planner-rail-project-header { padding: 8px; }
  .planner-rail-person-row { padding-left: 12px; }

  /* iOS Safari zoom guard. */
  .planner-search { font-size: 16px; }
}