/* ---------------------------------------------------------------------------
   AI Scheduling Studio - the sheet.

   The direction is a plotted schedule, not a dashboard: one sheet of drafting
   paper with hairline rules running edge to edge across both panes, so a row
   can be tracked from its ID to its bar without the eye crossing a border.

   Colour is data here, never decoration. The palette is a draughtsman's:
   black ink, red lead for the critical path, blue lead for baseline and
   selection, yellow trace for what-if overlays. If a hue appears it means
   something - which is also why the chrome is achromatic.

   The canvas renderers read these same custom properties, so the chart and the
   grid can never drift apart on colour or row height.
--------------------------------------------------------------------------- */

:root {
  --paper:      #FCFCFA;   /* vellum, barely warm */
  --paper-sunk: #F2F2EE;   /* header bands, weekend shading */
  --ink:        #14161A;
  --ink-soft:   #5B6068;
  --ink-faint:  #8E939B;
  --rule:       #DCDDD8;   /* hairline */
  --rule-firm:  #C2C4BE;

  --red-lead:   #C2362B;   /* critical */
  --blue-lead:  #2F5C8F;   /* selection, baseline */
  --trace:      #D9A22B;   /* levelled / what-if overlay */
  --green:      #3E7A52;   /* complete */

  /* Chart series. Validated for CVD separation and >=3:1 contrast against
     this surface - the UI blue is too low-chroma to carry a series, so the
     charts get their own steps on the same hues. Dark has its own values
     below: its lightness band (L .48-.67) is narrower than light's, so a
     flipped palette would fail. */
  --chart-a:    #1B5FB0;   /* planned */
  --chart-b:    #B0761A;   /* levelled / what-if */

  --row-h: 26px;
  --head-h: 46px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", var(--sans);
}

:root[data-theme="dark"] {
  --paper:      #15171B;
  --paper-sunk: #1D2025;
  --ink:        #E8E9E6;
  --ink-soft:   #9BA1A9;
  --ink-faint:  #6B7178;
  --rule:       #2A2E34;
  --rule-firm:  #3A3F46;
  --red-lead:   #E4685C;
  --blue-lead:  #6BA3E0;
  --trace:      #E5B948;
  --green:      #5FA678;
  --chart-a:    #4488CE;
  --chart-b:    #B0851F;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* --- app frame ---------------------------------------------------------- */

.app { display: flex; flex-direction: column; height: 100%; }

.toolbar {
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--rule-firm);
  background: var(--paper);
  flex: none;
}

.brand {
  font: 600 14px/1 var(--cond);
  letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.brand svg { display: block; }

.doc-name {
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  border: 1px solid transparent; border-radius: 3px;
  padding: 5px 7px; margin-left: 2px; min-width: 120px;
  background: none;
}
.doc-name:hover { border-color: var(--rule); }
.doc-name:focus { outline: none; border-color: var(--blue-lead); background: var(--paper-sunk); }

.spacer { flex: 1; }

.btn {
  font: 500 12px/1 var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--paper-sunk); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--blue-lead); outline-offset: 1px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--rule); }

.group { display: flex; gap: 4px; align-items: center; }
.group.tight { gap: 0; }
.group.tight .btn { border-radius: 0; margin-left: -1px; }
.group.tight .btn:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.group.tight .btn:last-child  { border-radius: 0 3px 3px 0; }

kbd {
  font: 500 10px/1 var(--mono);
  color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 2px 4px;
}

/* --- the sheet ---------------------------------------------------------- */

.sheet { flex: 1; display: flex; min-height: 0; position: relative; }

.pane-grid {
  flex: none; width: var(--grid-w, 520px);
  display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--rule-firm);
}
.pane-chart { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* column headers and the timescale share one band, so the two panes line up */
.head {
  height: var(--head-h); flex: none;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-firm);
  position: relative; overflow: hidden;
}

.cols { display: flex; height: 100%; align-items: flex-end; }
.col-h {
  font: 500 10px/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px 7px; flex: none;
  border-left: 1px solid var(--rule);
  height: 100%; display: flex; align-items: flex-end;
  user-select: none;
}
.col-h:first-child { border-left: none; }
.col-h.num { justify-content: flex-end; }

/* the grid owns the vertical scrollbar; the chart follows it */
.scroll-y { flex: 1; overflow: auto; position: relative; }

.rows { position: relative; }

.row {
  display: flex; height: var(--row-h); align-items: center;
  border-bottom: 1px solid var(--rule);
  position: absolute; left: 0; right: 0;
  contain: layout paint;
}
.row.sel { background: color-mix(in srgb, var(--blue-lead) 10%, transparent); }
.row.sel .cell { border-left-color: color-mix(in srgb, var(--blue-lead) 22%, var(--rule)); }

.cell {
  padding: 0 8px; flex: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  border-left: 1px solid var(--rule);
  height: 100%; display: flex; align-items: center;
}
.cell:first-child { border-left: none; }
.cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11px; }
.cell.id  { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.cell.crit { color: var(--red-lead); }
.cell.editing {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blue-lead);
  overflow: visible; text-overflow: clip; outline: none;
}

.row.wbs { font-weight: 600; }
.row.wbs .cell { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* --- chart -------------------------------------------------------------- */

.chart-canvas, .scale-canvas { display: block; position: absolute; top: 0; left: 0; }

/* --- status bar --------------------------------------------------------- */

.status {
  height: 26px; flex: none;
  display: flex; align-items: center;
  border-top: 1px solid var(--rule-firm);
  background: var(--paper-sunk);
  font: 400 11px/1 var(--sans); color: var(--ink-soft);
  padding: 0 12px;
}
.status b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.status .item { padding: 0 12px; border-left: 1px solid var(--rule); }
.status .item:first-child { padding-left: 0; border-left: none; }
.status .item.warn, .status .item.warn b { color: var(--red-lead); }

/* --- empty state / drop target ------------------------------------------ */

.empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--paper); z-index: 5; text-align: center;
}
.empty h1 { font: 600 22px/1.2 var(--cond); letter-spacing: .01em; margin: 0; }
.empty p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.empty .hint { font-size: 12px; color: var(--ink-faint); }
.drop-lit { box-shadow: inset 0 0 0 2px var(--blue-lead); }

/* --- toast -------------------------------------------------------------- */

.toast {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font: 400 12px/1.4 var(--sans);
  padding: 9px 14px; border-radius: 4px;
  max-width: 60ch; z-index: 20;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.toast.err { background: var(--red-lead); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .16s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translate(-50%, 5px); } }
}

/* --- splitter ----------------------------------------------------------- */

.splitter {
  position: absolute; top: 0; bottom: 0; width: 7px; margin-left: -4px;
  cursor: col-resize; z-index: 6;
}
.splitter:hover { background: color-mix(in srgb, var(--blue-lead) 20%, transparent); }


/* --- resource panel ------------------------------------------------------ */

.res {
  flex: none; height: var(--res-h, 210px);
  display: flex; min-height: 0;
  border-top: 1px solid var(--rule-firm);
  background: var(--paper);
}
.res[hidden] { display: none; }

.res-list {
  flex: none; width: var(--grid-w, 606px);
  border-right: 1px solid var(--rule-firm);
  display: flex; flex-direction: column; min-width: 0;
}

.res-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; flex: none;
  border-bottom: 1px solid var(--rule);
  font: 500 10px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

.res-rows { flex: 1; overflow: auto; }

.res-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 28px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.res-row:hover { background: var(--paper-sunk); }
.res-row[aria-selected="true"] { background: color-mix(in srgb, var(--chart-a) 12%, transparent); }
.res-row .swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--chart-a); flex: none; }
.res-row[aria-selected="true"] .swatch { box-shadow: 0 0 0 2px color-mix(in srgb, var(--chart-a) 35%, transparent); }
.res-row .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.res-row .rpeak { font: 400 11px/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.res-row.over .rpeak { color: var(--red-lead); font-weight: 500; }

.res-row input.lim {
  width: 54px; flex: none; text-align: right;
  font: 400 11px/1 var(--mono); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 3px 5px;
}
.res-row input.lim:focus { outline: none; border-color: var(--chart-a); }
.res-row input.lim::placeholder { color: var(--ink-faint); }

.res-charts { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.res-charts canvas { display: block; position: absolute; left: 0; }

.res-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-faint); font-size: 12px; text-align: center; padding: 0 20px;
}

.res-tip {
  position: absolute; z-index: 12; pointer-events: none;
  background: var(--ink); color: var(--paper);
  font: 400 11px/1.45 var(--sans);
  padding: 6px 8px; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 4px 14px rgb(0 0 0 / .2);
}
.res-tip b { font-family: var(--mono); font-weight: 500; }
.res-tip .over { color: #FF9A8E; }

/* levelling banner */
.level-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 32px; flex: none;
  background: color-mix(in srgb, var(--trace) 16%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--trace) 40%, var(--rule));
  font-size: 12px;
}
.level-bar[hidden] { display: none; }
.level-bar .spacer { flex: 1; }
.level-bar b { font-variant-numeric: tabular-nums; }


/* --- AI drawer ----------------------------------------------------------- */

.ai {
  position: absolute; top: 0; right: 0; bottom: 0; width: 420px; z-index: 14;
  background: var(--paper); border-left: 1px solid var(--rule-firm);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgb(0 0 0 / .07);
}
.ai[hidden] { display: none; }

.ai-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none;
  border-bottom: 1px solid var(--rule);
}
.ai-head h2 {
  margin: 0; font: 600 12px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); flex: 1;
}

.ai-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }

.ai-task { display: flex; flex-direction: column; gap: 6px; }
.ai-task label { font: 500 11px/1 var(--sans); color: var(--ink-soft); }
.ai-task textarea, .ai-task input[type=text], .ai-task input[type=password], .ai-task select {
  font: 400 12px/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 7px 8px; width: 100%; resize: vertical;
}
.ai-task textarea:focus, .ai-task input:focus, .ai-task select:focus {
  outline: none; border-color: var(--chart-a);
}
.ai-task .row { display: flex; gap: 6px; }
.ai-task .row > * { flex: 1; min-width: 0; }

.ai-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }

.ai-status {
  font-size: 12px; color: var(--ink-soft);
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper-sunk);
}
.ai-status.err { color: var(--red-lead); border-color: color-mix(in srgb, var(--red-lead) 40%, var(--rule)); }
.ai-status.busy::after { content: ''; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.ai-result { border: 1px solid var(--rule-firm); border-radius: 4px; overflow: hidden; }
.ai-result .sum {
  padding: 10px; font-size: 12px; line-height: 1.55;
  border-bottom: 1px solid var(--rule); background: var(--paper-sunk);
}
.ai-result ul { margin: 0; padding: 8px 10px 8px 26px; max-height: 260px; overflow: auto; }
.ai-result li { font-size: 12px; line-height: 1.6; }
.ai-result li.bad { color: var(--red-lead); list-style: none; margin-left: -14px; }
.ai-result li.bad::before { content: '! '; font-weight: 600; }
.ai-result .foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--rule); }
.ai-result .foot .spacer { flex: 1; }

.ai-usage { font: 400 10px/1 var(--mono); color: var(--ink-faint); }


/* --- details panel ------------------------------------------------------- */

.details {
  flex: none; height: var(--dt-h, 226px);
  border-top: 1px solid var(--rule-firm);
  background: var(--paper);
  display: flex; flex-direction: column;
}
.details[hidden] { display: none; }
.details .dt-scroll { flex: 1; overflow: auto; padding: 10px 14px; }

/* P6 puts activity details in a docked bottom pane with tabs; so do we. */
.dt-tabs {
  display: flex; gap: 0; flex: none; align-items: stretch;
  border-bottom: 1px solid var(--rule); background: var(--paper-sunk);
  padding: 0 8px; overflow-x: auto;
}
.dt-tab {
  font: 500 11px/1 var(--sans); color: var(--ink-soft);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.dt-tab:hover { color: var(--ink); }
.dt-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue-lead); background: var(--paper); }
.dt-tab .n { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; margin-left: 4px; }
.dt-title {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 0 4px; font: 500 11px/1 var(--sans); color: var(--ink-soft);
}
.dt-title .code { font-family: var(--mono); color: var(--ink); }

/* the bottom pane lays its sections out in columns, like P6's detail tabs */
.dt-cols { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.dt-cols > * { min-width: 210px; }
.dt-rels { flex: 1; min-width: 320px; }

.dt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dt-head .code { font: 600 13px/1 var(--mono); }
.dt-head .flag {
  font: 600 9px/1 var(--cond); letter-spacing: .08em;
  padding: 3px 6px; border-radius: 2px;
  color: var(--ink-soft); background: var(--paper-sunk);
}
.dt-head .flag.crit { color: #fff; background: var(--red-lead); }

.dt-section { margin: 0 0 12px; }
.dt-section h3 {
  margin: 0 0 6px; font: 600 10px/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 5px;
}
.dt-field { margin: 7px 0; }
.dt-field label { display: block; font: 500 10px/1.6 var(--sans); color: var(--ink-faint); }
.dt-field input, .dt-field select {
  width: 100%; font: 400 12px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 5px 7px;
}
.dt-field input:focus, .dt-field select:focus { outline: none; border-color: var(--blue-lead); }
.dt-dates { font: 400 11px/1.6 var(--mono); color: var(--ink-soft); margin-top: 4px; }
.dt-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 6px; }
.dt-kv { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.dt-kv b { font-variant-numeric: tabular-nums; }

.dt-rel {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 0; border-bottom: 1px solid var(--rule);
}
.dt-rel.crit .code { color: var(--red-lead); }
.dt-rel-who {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  border-radius: 3px; text-align: left; color: var(--ink);
}
.dt-rel-who:hover { background: var(--paper-sunk); }
.dt-rel-who .code { font: 500 10px/1.3 var(--mono); }
.dt-rel-who .nm {
  font: 400 11px/1.3 var(--sans); color: var(--ink-soft);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dt-rel-type { font: 400 10px/1 var(--mono); border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink); padding: 3px 1px; }
.dt-rel-lag {
  width: 34px; text-align: right; font: 400 10px/1 var(--mono);
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  color: var(--ink); padding: 4px 4px;
}
.dt-rel-x {
  border: none; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: 3px;
}
.dt-rel-x:hover { color: var(--red-lead); background: var(--paper-sunk); }

.dt-addrel { display: flex; gap: 4px; margin-top: 6px; }
.dt-addrel input[type=text] {
  flex: 1; min-width: 0; font: 400 11px/1.4 var(--sans);
  border: 1px solid var(--rule); border-radius: 3px; padding: 5px 6px;
  background: var(--paper); color: var(--ink);
}
.dt-addrel select { font: 400 10px/1 var(--mono); border: 1px solid var(--rule);
  border-radius: 3px; background: var(--paper); color: var(--ink); }
.dt-addrel .btn { padding: 4px 8px; }

/* --- find / filter / columns --------------------------------------------- */

.find {
  font: 400 12px/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 6px 8px; width: 150px;
}
.find:focus { outline: none; border-color: var(--blue-lead); width: 200px; }
.find::placeholder { color: var(--ink-faint); }

.btn[aria-pressed="true"].chip { background: color-mix(in srgb, var(--red-lead) 12%, var(--paper)); border-color: var(--red-lead); color: var(--red-lead); }

.col-h.sortable { cursor: pointer; }
.col-h.sortable:hover { color: var(--ink); }
.col-h .dir { margin-left: 3px; }

.colmenu {
  position: absolute; z-index: 30; top: 40px; right: 10px;
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: 6px; min-width: 160px;
}
.colmenu label {
  display: flex; gap: 8px; align-items: center;
  font: 400 12px/1 var(--sans); padding: 6px 8px; border-radius: 3px; cursor: pointer;
}
.colmenu label:hover { background: var(--paper-sunk); }

.addmenu { min-width: 180px; }


/* --- ribbon -------------------------------------------------------------- */

.ribbon { flex: none; border-bottom: 1px solid var(--rule-firm); background: var(--paper); }
.ribbon-top {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 12px; border-bottom: 1px solid var(--rule);
}
.rtabs { display: flex; gap: 2px; margin-left: 6px; }
.rtab {
  font: 500 11px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: none;
  padding: 10px 12px 9px; cursor: pointer; border-bottom: 2px solid transparent;
}
.rtab:hover { color: var(--ink); }
.rtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red-lead); }

.ribbon-body { min-height: 54px; }
.rpane { display: flex; align-items: stretch; gap: 0; padding: 0 6px; }
.rpane[hidden] { display: none; }
.rgroup {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px 3px; border-right: 1px solid var(--rule);
}
.rgroup:last-child { border-right: none; }
.rgroup-btns { display: flex; align-items: center; gap: 4px; }
.rgroup-label {
  font: 500 9px/1 var(--cond); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- variance ------------------------------------------------------------ */

.cell.late  { color: var(--red-lead); }
.cell.early { color: var(--green); }

.bl-menu { min-width: 240px; }
.bl-menu .bl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.bl-menu .bl-row:hover { background: var(--paper-sunk); }
.bl-menu .bl-row[aria-selected="true"] { background: color-mix(in srgb, var(--blue-lead) 12%, transparent); }
.bl-menu .bl-row .when { margin-left: auto; font: 400 10px/1 var(--mono); color: var(--ink-faint); }
.bl-menu .bl-row .x { color: var(--ink-faint); padding: 0 2px; }
.bl-menu .bl-row .x:hover { color: var(--red-lead); }
.bl-menu hr { border: none; border-top: 1px solid var(--rule); margin: 5px 0; }

.status .item.var b.late { color: var(--red-lead); }
.status .item.var b.early { color: var(--green); }