/* ==========================================================================
   ProjectManagementPro.ClientWASM — the schedule table (P3)

   The sheet of the table panel of the schedule: nine columns, the tree, the selection, the two inline editors,
   the drag, the trailing spacer and the empty state. Every visual value is a token of `tokens.css` — the family
   measured in `PLANNING-SCHEDULE-UI.md` §1.3.1 and frozen in `DEC-W74`/`DEC-W75` — and this sheet declares no
   token of its own.

   Five numbers are measured values that `tokens.css` does not carry, and each one is written where it is used
   with the measurement it comes from: the 3px of the selection's left border, the 2px of the insertion line, the
   4px of the name column's handle, the 12px of the grip's mark and the two letter spacings of the header and the
   spacer. They are reported as tokens the family is missing.

   The layout is flex and not a `<table>`: the origin drew the panel as flex rows (`TablePanel.tsx:302-604`) and
   three of the states this piece must show — the dragged row's scale, the row's own left border and the insertion
   line over the row's edge — are states of a row box, which a table row does not give.
   ========================================================================== */

.schedule-table {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
}

/* The element that scrolls: across, because the columns keep their measured widths, and down, because the rows
   are what the diagram follows. */
.schedule-table__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ---- The header, 50px and sticky at the top of the viewport ------------------------------- */

.schedule-table__header {
  position: sticky;
  top: 0;
  z-index: var(--schedule-layer-sticky);
  display: flex;
  align-items: center;
  height: var(--schedule-header-height);
  background: var(--color-surface-muted);
  border-bottom: var(--border-width) solid var(--color-border-strong);
  font-size: var(--font-size-sm);
  /* Measured: `tracking-wide`, the 0.025em step of the origin's own scale. */
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ---- The nine columns, each one with the width §1.3.1 measures ---------------------------- */

.schedule-table__cell {
  display: flex;
  align-items: center;
  /* A column never shrinks: the panel is narrower than the content more often than not, and what the origin did
     with its own minimum width is what a fixed basis does here. */
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 0 var(--space-2xs);
  overflow: hidden;
  border-right: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}

.schedule-table__header .schedule-table__cell {
  border-right-color: var(--color-border-strong);
}

.schedule-table__cell--grip {
  justify-content: center;
  width: var(--schedule-column-grip);
  padding: 0;
}

.schedule-table__cell--id {
  justify-content: center;
  width: var(--schedule-column-id);
}

.schedule-table__cell--wbs {
  justify-content: center;
  width: var(--schedule-column-wbs);
}

/* The width the name column opens with. While the handle is dragged, the state's own width arrives as the one
   computed value the markup writes in line and wins over this declaration; these two tokens are what the sheet
   falls back to, and what the visual pass reads to know the measured 180px and the 100px floor. */
.schedule-table__cell--name {
  position: relative;
  width: var(--schedule-column-name);
  min-width: var(--schedule-column-name-min);
  padding-left: 0;
}

.schedule-table__cell--amount {
  justify-content: flex-end;
  width: var(--schedule-column-reference);
}

.schedule-table__cell--date {
  justify-content: center;
  width: var(--schedule-column-date);
}

.schedule-table__cell--duration {
  justify-content: center;
  width: var(--schedule-column-duration);
}

.schedule-table__cell--responsible {
  width: var(--schedule-column-reference);
}

.schedule-table__cell--predecessors {
  justify-content: center;
  width: var(--schedule-column-reference);
}

.schedule-table__cell--actions {
  justify-content: center;
  gap: var(--space-3xs);
  width: var(--schedule-column-action);
  padding: 0;
  border-right: 0;
}

/* The header's own `Name`, which the origin indents by 24px (`pl-6`), and the 4px handle at its right edge. */
.schedule-table__label {
  padding-left: var(--space-lg);
}

.schedule-table__resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  transition: background var(--schedule-transition) ease-in-out;
}

.schedule-table__resize:hover {
  background: var(--color-primary);
}

/* ---- The row, 24px, with its seven states ------------------------------------------------- */

.schedule-table__row {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--schedule-row-height);
  border-bottom: var(--border-width) solid var(--color-border);
  /* Measured: the selection adds 3px of blue at the left edge; the transparent border of a row at rest keeps
     every column where the header put it. */
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--schedule-transition) ease-in-out, opacity var(--schedule-transition) ease-in-out,
    transform var(--schedule-transition) ease-in-out;
}

.schedule-table__row:hover {
  background: var(--color-surface-muted);
}

.schedule-table__row--selected {
  background: var(--schedule-row-selected);
  border-left-color: var(--schedule-row-selected-border);
}

/* Measured: the row being dragged fades to 0,4 and shrinks to 0,98. */
.schedule-table__row--dragged {
  opacity: 0.4;
  transform: scale(0.98);
}

/* Measured: a drop hanging from a row paints its background and a 1px ring inside it. */
.schedule-table__row--drop-child {
  background: var(--schedule-row-selected);
  box-shadow: inset 0 0 0 var(--border-width) var(--schedule-drop-target);
}

/* The cell the keyboard is on: the last of the five editable cells that was clicked, which is the one `F2` opens.
   It is drawn with the selection's own two tokens and the ring the drop target already uses, so the mark says
   «this is where the keyboard is» in the vocabulary the table already has, and the four states of a cell — value,
   container, editable and current — stay one class each. */
.schedule-table__cell--current {
  background: var(--schedule-row-selected);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--border-width) var(--schedule-row-selected-border);
}

/* Measured: a drop between two rows is a 2px line — full width above the row, inset below it, which is the
   origin's own asymmetry (`TablePanel.tsx:355`, `:557`). It is drawn over the edge instead of pushing the rows
   apart, so a drag moves nothing on screen. */
.schedule-table__row--insert-before::before,
.schedule-table__row--insert-after::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--schedule-insertion-line);
}

.schedule-table__row--insert-before::before {
  top: calc(-1 * var(--border-width));
  right: 0;
  left: 0;
}

.schedule-table__row--insert-after::after {
  right: var(--space-sm);
  bottom: calc(-1 * var(--border-width));
  left: var(--space-sm);
}

/* ---- The grip: six dots, 12px, invisible until the row has the pointer -------------------- */

.schedule-table__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-border-strong);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--schedule-transition) ease-in-out, color var(--schedule-transition) ease-in-out;
}

.schedule-table__row:hover .schedule-table__grip {
  opacity: 1;
}

.schedule-table__grip:hover {
  color: var(--color-text-muted);
}

.schedule-table__grip-mark {
  width: 12px;
  height: 12px;
}

/* ---- The values of a cell ----------------------------------------------------------------- */

.schedule-table__value {
  overflow: hidden;
  font-size: var(--schedule-font-compact);
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
}

.schedule-table__value--code {
  font-family: var(--font-family-mono);
}

/* A leaf's date, duration and responsible: the cells a double click edits. */
.schedule-table__value--editable {
  color: var(--color-text-muted);
  cursor: text;
}

/* A container's: grey italics, and no editor opens from them (`RS-14`). */
.schedule-table__value--container {
  color: var(--color-text-subtle);
  font-style: italic;
}

/* ---- The name column: one 20px step per level, the twist, and the name -------------------- */

.schedule-table__twig {
  flex: 0 0 auto;
  width: var(--schedule-name-indent);
}

.schedule-table__twist {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--schedule-column-grip);
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.schedule-table__twist-mark {
  width: 14px;
  height: 14px;
  transition: transform var(--schedule-transition) ease-in-out;
}

/* The chevron of a node whose children are shown points down, which is the origin's own rotation. */
.schedule-table__twist[aria-expanded="true"] .schedule-table__twist-mark {
  transform: rotate(90deg);
}

/* The room a leaf leaves where a container has its twist, so the names of one level start together. */
.schedule-table__twist-space {
  flex: 0 0 auto;
  width: var(--schedule-column-grip);
}

.schedule-table__name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-table__name--container {
  color: var(--color-text);
}

/* ---- The assigned amount ----------------------------------------------------------------- */

.schedule-table__amount {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--schedule-font-compact);
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
}

button.schedule-table__amount {
  cursor: pointer;
}

button.schedule-table__amount:hover {
  color: var(--color-primary);
}

/* A container's amount is bold and in the body ink; the origin put the sum of the branch there and this one
   puts the row's own published figure (`ScheduleTableCells`). */
.schedule-table__amount--container {
  color: var(--color-text);
}

.schedule-table__amount--set {
  color: var(--schedule-amount);
  font-weight: 500;
}

.schedule-table__amount--invite {
  color: var(--color-text-subtle);
}

/* ---- The two actions of a row: 14px marks inside a column of 32px -------------------------- */

.schedule-table__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-border-strong);
  cursor: pointer;
  transition: color var(--schedule-transition) ease-in-out, opacity var(--schedule-transition) ease-in-out;
}

.schedule-table__action:hover {
  color: var(--color-primary);
}

/* A row that already has predecessors says so, which is the origin's own mark. */
.schedule-table__action--linked {
  color: var(--color-primary);
}

/* Deleting is a control of the row under the pointer, and not one of the table at rest. */
.schedule-table__action--delete {
  opacity: 0;
}

.schedule-table__row:hover .schedule-table__action--delete,
.schedule-table__row:focus-within .schedule-table__action--delete,
.schedule-table__action--delete:focus-visible {
  opacity: 1;
}

.schedule-table__action--delete:hover {
  color: var(--color-error);
}

.schedule-table__action:disabled {
  opacity: 0.4;
  cursor: default;
}

.schedule-table__action-mark {
  width: 14px;
  height: 14px;
}

/* ---- The trailing spacer row, drawn only when the page asked for it ------------------------ */

.schedule-table__spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--schedule-row-height);
  border-bottom: var(--border-width) solid var(--color-border);
}

.schedule-table__spacer-mark {
  font-size: var(--schedule-font-tiny);
  /* Measured: `tracking-widest`, the 0.1em step of the origin's own scale. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-border);
  user-select: none;
}

/* ---- The editor of one cell ---------------------------------------------------------------- */

.schedule-inline-editor__field {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--schedule-row-height);
  padding: 0 var(--space-2xs);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  outline: none;
  /* The origin's `ring-2 ring-blue-100`: a soft halo around the field being edited. */
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

/* A duration the server would not read: the field says so while it is typed (`F-8`). */
.schedule-inline-editor__field--invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-error-soft);
}

/* ---- The responsible editor and its floating panels ---------------------------------------- */

.schedule-responsible-editor__field {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--schedule-row-height);
  padding: 0 var(--space-2xs);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

@media (max-width: 767px) {
  .schedule-table__action {
    width: 44px;
    min-width: 44px;
  }
}

/* The amber border of a name the server answered a near match for. */
.schedule-responsible-editor__field--asking {
  border-color: var(--color-accent-border);
}

/* Both panels are fixed and placed by the browser: a row of 24px clips its own content, so a list of
   suggestions cannot live inside the cell it belongs to. The 2px under the field is the origin's own gap. */
.schedule-responsible-editor__panel,
.schedule-responsible-editor__question {
  position: fixed;
  /* Measured: the origin's panel stacks over every control of the screen (`z-[200]`). */
  z-index: var(--schedule-layer-over-control);
  margin-top: var(--space-3xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* Measured: 128px of height and 160px of width at least. */
.schedule-responsible-editor__panel {
  min-width: 160px;
  max-height: 128px;
  overflow-y: auto;
}

.schedule-responsible-editor__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-responsible-editor__item {
  margin: 0;
}

.schedule-responsible-editor__option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--schedule-font-compact);
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
}

.schedule-responsible-editor__option:hover {
  background: var(--color-primary-soft);
}

.schedule-responsible-editor__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The source of a suggestion, in the word the server published. */
.schedule-responsible-editor__source {
  font-size: var(--schedule-font-tiny);
  color: var(--color-text-subtle);
}

/* Measured: the amber card of `Did you mean "X"?` with its two answers. */
.schedule-responsible-editor__question {
  min-width: 180px;
  padding: var(--space-xs) var(--space-sm);
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}

.schedule-responsible-editor__asking {
  margin: 0 0 var(--space-2xs);
  font-size: var(--schedule-font-compact);
  color: var(--color-accent);
}

.schedule-responsible-editor__answers {
  display: flex;
  gap: var(--space-xs);
}

.schedule-responsible-editor__answer {
  padding: var(--space-3xs) var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  font-family: inherit;
  font-size: var(--schedule-font-compact);
  color: var(--color-accent);
  cursor: pointer;
}

.schedule-responsible-editor__answer:hover {
  background: var(--color-accent-border);
}

.schedule-responsible-editor__answer--keep {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.schedule-responsible-editor__answer--keep:hover {
  background: var(--color-border);
}