/* ═══════════════════════════════════════════════════════════════════════════
   scheduler.css — Project Scheduler module
   Styles for the hub, accordion rows, PSGantt chart, modals, sparkline,
   and billing tables. Never alters style.css or handbook.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PSGantt bespoke chart ──────────────────────────────────────────────── */

/* Outer flex: sticky label column + scrollable chart */
.psg-outer {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--g100);
  border-radius: var(--rsm);
  overflow: hidden;
  background: var(--w);
}

/* Left task-name column */
.psg-label-col {
  flex-shrink: 0;
  width: 200px;
  background: var(--w);
  border-right: 1px solid var(--g100);
  overflow: hidden;
}
.psg-label-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--g100);
  background: var(--ow);
  box-sizing: border-box;
}
.psg-label-row {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  color: var(--g700);
  border-bottom: 1px solid var(--g50);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background .1s;
}
.psg-label-row:hover { background: var(--g50); }

/* Right scrollable area */
.psg-chart-wrap { flex: 1; overflow-x: auto; overflow-y: hidden; }
.psg-svg { display: block; }

/* Grid */
.psg-col-even   { fill: var(--w); }
.psg-col-odd    { fill: #fcfcfa; }
.psg-col-line   { stroke: #b0b0a8; stroke-width: 0.5; }
.psg-week-line  { stroke: #b0b0a8; stroke-width: 0.5; stroke-dasharray: 3,3; }
.psg-row-line   { display: none; }

/* Header */
.psg-hdr-bg   { fill: var(--ow); }
.psg-hdr-line { stroke: var(--g200); stroke-width: 1; }
.psg-hdr-div  { stroke: var(--g200); stroke-width: 1; }
.psg-hdr-top  {
  fill: var(--g900); font-family: var(--f);
  font-size: 11px; font-weight: 600;
}
.psg-hdr-bot  { fill: var(--g500); font-family: var(--f); font-size: 11px; }

/* Today highlight */
.psg-today-bg   { fill: rgba(250,166,26,.07); }
.psg-today-line { stroke: rgba(250,166,26,.55); stroke-width: 1.5; stroke-dasharray: 4,3; }

/* Bars */
.psg-bar-group            { cursor: pointer; }
.psg-bar                  { fill: var(--or); opacity: .82; transition: opacity .12s, filter .12s; }
.psg-bar-group:hover .psg-bar,
.psg-bar-group.psg-selected .psg-bar { opacity: 1; filter: brightness(1.08); }
.psg-bar-label            { fill: var(--w); font-family: var(--f); font-size: 11px; font-weight: 500; pointer-events: none; user-select: none; }
.psg-handle               { fill: rgba(0,0,0,.18); cursor: ew-resize; transition: fill .1s; }
.psg-handle:hover         { fill: rgba(0,0,0,.34); }

/* Baseline ghost bar — thin grey rect below each current bar */
.psg-baseline-bar { fill: var(--g300); pointer-events: none; }

/* Connect dot — shown on bar hover; drag to wire a dependency */
.psg-conn-dot {
  fill: var(--w);
  stroke: var(--or);
  stroke-width: 2;
  cursor: crosshair;
  opacity: 0;
  transition: opacity .15s;
}
.psg-bar-group:hover .psg-conn-dot             { opacity: 1; }
/* While a connect-drag is in progress, dim all dots as potential targets */
.psg-svg.psg-connecting .psg-conn-dot          { opacity: .35; }
.psg-svg.psg-connecting .psg-bar-group:hover .psg-conn-dot { opacity: 1; }

/* Live connecting line */
.psg-conn-line {
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-dasharray: 5,3;
  pointer-events: none;
}

/* Dependency arrows */
.psg-arrow          { fill: none; stroke: var(--g400); stroke-width: 1.5; marker-end: url(#psg-arrow-head); transition: stroke .12s; }
.psg-arrowhead-fill { fill: var(--g400); }
/* Invisible wide stroke for easy click targeting */
.psg-arrow-hit      { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
/* Highlight arrow red on hover to signal it's deletable */
.psg-arrow-g:hover .psg-arrow { stroke: var(--rtx); }

/* Empty state */
.psg-empty { padding: 20px; color: var(--g400); font-size: 13px; }

/* ── Panel overrides ────────────────────────────────────────────────────── */
/* Allow the scheduler panel to fill width; Gantt scrolls horizontally     */
#panel-project-scheduler {
  max-width: 100%;
  padding: 0;
}
.ps-hub-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 24px 0;
}

/* ── Hub toolbar ────────────────────────────────────────────────────────── */
.ps-hub-toolbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ps-hub-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -.02em;
  margin: 0;
}
.ps-hub-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ps-archive-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--g600);
  cursor: pointer;
  user-select: none;
}
.ps-archive-label input[type="checkbox"] {
  accent-color: var(--or);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.ps-import-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 16px;
}

/* ── Schedule list ──────────────────────────────────────────────────────── */
.ps-schedule-list {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-schedule-list .empty {
  color: var(--g400);
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

/* ── Schedule row (accordion) ───────────────────────────────────────────── */
.ps-row {
  background: var(--w);
  border: 1px solid var(--g100);
  border-radius: var(--rmd);
  box-shadow: var(--ss);
  overflow: hidden;
  transition: box-shadow .15s;
}
.ps-row.ps-expanded-row { box-shadow: var(--sm); border-color: var(--g200); }
.ps-row.ps-archived { opacity: .7; }

.ps-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.ps-row-header:hover { background: var(--g50); }

.ps-row-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g400);
  transition: transform .2s ease;
}
.ps-row-chevron svg { display: block; }
.ps-expanded-row .ps-row-chevron { transform: rotate(90deg); }

.ps-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g900);
  min-width: 0;
  flex: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-row-client {
  font-size: 12px;
  color: var(--g600);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-row-range {
  font-size: 12px;
  color: var(--g600);
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ps-row-meta-item {
  font-size: 11.5px;
  color: var(--g400);
  white-space: nowrap;
}
.ps-row-meta-item strong {
  color: var(--g700, var(--g600));
  font-weight: 600;
}
.ps-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ps-archive-btn {
  font-family: var(--f);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border: 1.5px solid var(--g200);
  border-radius: var(--rsm);
  background: transparent;
  color: var(--g400);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.ps-archive-btn:hover {
  border-color: var(--g400);
  color: var(--g600);
  background: var(--g50);
}

/* ── Status chips ───────────────────────────────────────────────────────── */
.ps-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-chip-none    { background: var(--g100); color: var(--g600); }
.ps-chip-on-track { background: var(--gbg); color: var(--gtx); }
.ps-chip-delayed  { background: var(--rbg); color: var(--rtx); }

/* ── Expanded body ──────────────────────────────────────────────────────── */
.ps-row-body {
  border-top: 1px solid var(--g100);
}
.ps-expanded-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--g100);
  background: var(--ow);
}
.ps-imported-from {
  font-size: 12px;
  color: var(--g500, var(--g400));
}
.ps-imported-from strong { color: var(--g700, var(--g600)); font-weight: 600; }
.ps-expanded-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-save-btn {
  font-size: 13px;
  padding: 7px 18px;
}
.ps-save-btn.ps-dirty { background: var(--ord); }

/* ── View mode toggle ───────────────────────────────────────────────────── */
.ps-view-toggle {
  display: flex;
  gap: 0;
  padding: 12px 20px 0;
  border-radius: var(--rmd);
  flex-wrap: nowrap;
  width: fit-content;
}
.ps-view-btn {
  font-family: var(--f);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border: 1.5px solid var(--g200);
  background: transparent;
  color: var(--g600);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ps-view-btn:first-child { border-radius: var(--rsm) 0 0 var(--rsm); }
.ps-view-btn:last-child  { border-radius: 0 var(--rsm) var(--rsm) 0; border-left: none; }
.ps-view-btn:not(:first-child):not(:last-child) { border-left: none; }
.ps-view-btn.ps-view-active {
  background: var(--or);
  border-color: var(--or);
  color: var(--w);
}

/* ── Gantt wrapper ──────────────────────────────────────────────────────── */
.ps-gantt-wrap {
  padding: 16px 20px 0;
}

/* ── Section headings ───────────────────────────────────────────────────── */
.ps-section {
  padding: 0 20px;
}
.ps-section + .ps-section {
  border-top: 1px solid var(--g100);
}
/* Tighten the my-divider margin inside expanded sections */
.ps-section .my-divider {
  margin-top: 12px;
  margin-bottom: 14px;
}

/* ── Two-column sections grid ───────────────────────────────────────────── */
.ps-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;      /* breathing room between gantt scrollbar and sections */
  padding-bottom: 24px;
  border-top: 1px solid var(--g100);
}
/* Suppress inherited sibling top-border; vertical rule separates columns */
.ps-sections-grid > .ps-section + .ps-section {
  border-top: none;
  border-left: 1px solid var(--g100);
}
/* In grid context chart and table fill the column — remove centering caps */
.ps-sections-grid .ps-sparkline-wrap {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.ps-sections-grid .ps-tbl-wrap {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── Sparkline chart ────────────────────────────────────────────────────── */
.ps-sparkline-wrap {
  max-width: 700px;
  margin: 0 auto 14px;
}
.ps-sparkline-svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.ps-spark-line-hrs { stroke: var(--or); stroke-width: 2; fill: none; }
.ps-spark-dot-hrs  { fill: var(--or); }
.ps-spark-axis-label { font-family: var(--f); font-size: 10px; fill: var(--g400); }

/* ── Tables (weekly & monthly) ──────────────────────────────────────────── */
/* Tables use portal's .tblcard + .mtbl classes. Scope overrides here.      */
.ps-tbl-wrap {
  max-width: 580px;
  margin: 0 auto 16px;
}
.ps-tbl-wrap .mtbl {
  table-layout: auto;
}
.ps-tbl-wrap .mtbl .ps-tbl-total td {
  font-weight: 700;
  border-top: 1.5px solid var(--g200);
  background: none;
}
/* Highlight the current week / month row */
.mtbl tbody tr.ps-tbl-current td {
  background: rgba(250,166,26,.09);
  font-weight: 600;
  color: var(--g900);
}

/* ── PM selector (in expanded toolbar) ─────────────────────────────────── */
.ps-pm-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.ps-pm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--g600);
  white-space: nowrap;
}
.ps-pm-select {
  font-family: var(--f);
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--rsm);
  color: var(--g900);
  background: var(--w);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  min-width: 140px;
}
.ps-pm-select:focus { border-color: var(--or); }

/* PM name shown in the collapsed hub row */
.ps-row-pm {
  font-size: 11.5px;
  color: var(--g400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.ps-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,20,25,.38);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ps-modal {
  background: var(--w);
  border-radius: var(--rlg);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}
.ps-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--g100);
}
.ps-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--g900);
}
.ps-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--g400);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--rsm);
}
.ps-modal-close:hover { color: var(--g900); background: var(--g50); }
.ps-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-modal-body .fr { display: flex; flex-direction: column; gap: 5px; }
.ps-modal-body label { font-size: 12.5px; font-weight: 600; color: var(--g600); }
.ps-import-select,
.ps-import-date {
  font-family: var(--f);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--rsm);
  color: var(--g900);
  background: var(--w);
  outline: none;
  transition: border-color .15s;
}
.ps-import-select:focus,
.ps-import-date:focus { border-color: var(--or); }
.ps-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--g100);
}

/* ── Toast (reuses portal pattern) ─────────────────────────────────────── */
#ps-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--g900);
  color: var(--w);
  border-radius: var(--rmd);
  padding: 10px 20px;
  font-size: 13px;
  z-index: 300;
  opacity: 0;
  transition: opacity .22s, transform .22s;
  pointer-events: none;
  white-space: nowrap;
}
#ps-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#ps-toast.ps-toast-err { background: var(--rtx); }

/* ── Stage slide-out panel ──────────────────────────────────────────────── */
.ps-stage-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: var(--w);
  border-left: 1px solid var(--g100);
  box-shadow: -4px 0 24px rgba(0,0,0,.10);
  z-index: 151;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.ps-stage-panel.open { transform: translateX(0); }

.ps-stage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,20,25,.22);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.ps-stage-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.ps-sp-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--g100);
  flex-shrink: 0;
}
.ps-sp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--g900);
  line-height: 1.35;
}
.ps-sp-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--g400);
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--rsm);
  flex-shrink: 0;
}
.ps-sp-close:hover { color: var(--g900); background: var(--g50); }

.ps-sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-sp-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ps-sp-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ps-sp-value {
  font-size: 13.5px;
  color: var(--g900);
  font-weight: 500;
}

.ps-sp-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--g100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.ps-sp-del-btn {
  font-family: var(--f);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1.5px solid var(--rbg, #fee2e2);
  border-radius: var(--rsm);
  background: transparent;
  color: var(--rtx, #dc2626);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ps-sp-del-btn:hover { background: var(--rbg, #fee2e2); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Stack the two-column sections grid on narrower viewports */
@media (max-width: 820px) {
  .ps-sections-grid {
    grid-template-columns: 1fr;
  }
  .ps-sections-grid > .ps-section + .ps-section {
    border-left: none;
    border-top: 1px solid var(--g100);
  }
}
@media (max-width: 600px) {
  .ps-row-header { flex-wrap: wrap; }
  .ps-row-client, .ps-row-range { display: none; }
  .ps-hub-toolbar { flex-direction: column; align-items: flex-start; }
}