/* ==========================================================================
   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;
}

/* El fondo y los bordes abarcan todas las columnas, también al desplazar o estrechar el panel. */
.schedule-table__header,
.schedule-table__row {
  width: max-content;
  min-width: 100%;
}

/* ---- 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);
  /* Reserva el mismo borde de selección que las filas para alinear las columnas. */
  border-left: 3px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  /* 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);
}

/* Filas compactas con altura compartida con el Gantt. */

.schedule-table__row {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--schedule-row-height);
  flex-shrink: 0;
  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);
}

/* La celda actual conserva su estado para F2, sin contorno alrededor del valor. */
.schedule-table__cell--current {
  background: transparent;
  box-shadow: none;
}

/* 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-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
}

/* 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);
  font-weight: var(--font-weight-semibold);
}

/* ---- 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);
  flex-shrink: 0;
  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);
}