/*
   The frame of the schedule screen: Features/Schedule/SchedulePage.razor — the only piece of the family that
   reads and writes, and the only one that mounts the three views.

   It is the sheet of the family's armazón and it declares the classes of that page and nothing else. The rules of
   each piece live in the sheet that owns it — `schedule-toolbar.css`, `schedule-table.css`, `schedule-gantt.css`,
   `schedule-wbs.css`, `schedule-cashflow.css`, `schedule-dialogs.css` — and none of them is restated or
   re-styled here. It is registered in `wwwroot/index.html` after the sheets of the pieces and before
   `dialogs.css`, which closes the cascade (DEC-W75).

   The measurements are the ones PLANNING-SCHEDULE-UI.md §1.1 measures in SchedulePage.tsx:280-323: a full-height
   column with 24px of padding, the sticky header with its 12px of separation and 8px of bottom padding, and a
   content slot that takes the rest of the height and lets the scroll live inside the panels (`min-height: 0`,
   which is what makes that possible).

   One colour has no token and is not invented. The origin draws the template action in purple
   (`SchedulePage.tsx:301-310`); this design system declares three semantic families and purple is none of them,
   so the action is drawn with the accent family, which is the one that carries a distinct secondary action.
   Nothing here declares a token: tokens.css is frozen (DEC-W75) and every value below is one already declared
   there.
*/

/* -------------------------------------------------------------------------------------------------------------
   The frame: a full-height column. The padding and the separation are the measured ones.
   ------------------------------------------------------------------------------------------------------------- */

.schedule-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: var(--layout-content-padding);
  gap: var(--space-sm);
  color: var(--color-text);
}

/*
   The sticky header: the bar on the left and the template action on the right, in one row that stays on top of
   the views. It is the origin's own arrangement (`SchedulePage.tsx:281`) and the reason the layer token exists.
*/
.schedule-page__header {
  position: sticky;
  top: 0;
  z-index: var(--schedule-layer-header);
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  background: var(--color-bg);
}

/* The action that fills part of the schedule from a template: it sits beside the bar and never shrinks. */
.schedule-page__template {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard);
}

.schedule-page__template:hover {
  background: var(--color-accent-soft);
}

.schedule-page__template:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* The drawing inside the action. Decorative: the label is the name. */
.schedule-page__glyph {
  display: block;
  flex: 0 0 auto;
}

/*
   A gesture that changed nothing: no start date for the project, a tree operation that needs one row, or a start
   date that cannot be cleared from here. It is information and not an error, so it is drawn as one.
*/
.schedule-page__notice {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

/*
   The content slot: everything below the header, and the only place a view is mounted. `min-height: 0` is what
   lets the scroll live inside the panels instead of pushing the page taller than the window.
*/
.schedule-page__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* -------------------------------------------------------------------------------------------------------------
   The five states of the slot: the load, the failed read, the empty schedule, the view, and the cash-flow view's
   own empty state. Only one of them is drawn at a time.
   ------------------------------------------------------------------------------------------------------------- */

.schedule-page__load,
.schedule-page__empty,
.schedule-page__failure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-width: 0;
  min-height: 0;
}

/* A failed read and the empty schedule both carry the way out of the state: the retry, and the action that
   creates the first task. */
.schedule-page__recovery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* -------------------------------------------------------------------------------------------------------------
   The Gantt view: the table and the diagram side by side over a draggable divider, in one framed panel.
   ------------------------------------------------------------------------------------------------------------- */

.schedule-page__gantt {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

/* The table panel. Its width is a share of this container and arrives as a computed value from the page: the
   200ms of the origin's own transition is the resize duration the tokens declare. */
.schedule-page__table {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  transition: width var(--schedule-resize) var(--easing-standard);
}

.schedule-page__presentation {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: var(--space-xs);
  border-bottom: var(--border-default);
  background: var(--color-surface-muted);
}

.schedule-page__activity-collection {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.schedule-cards {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-sm);
  overflow: auto;
}

.schedule-card {
  /* How deep the activity sits in the tree. The card writes it inline from its own hierarchy level;
     the declaration here is the step the sheet takes when a card carries no level at all. */
  --schedule-card-level: 0;
  margin-left: calc(var(--schedule-card-level) * var(--space-md));
  padding: var(--space-sm);
  border: var(--border-default);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.schedule-card:hover { border-color: var(--color-primary-border); }
.schedule-card--selected { border-color: var(--color-primary); background: var(--color-primary-soft); }

.schedule-card__header,
.schedule-card__identity,
.schedule-card__actions,
.schedule-card__editor-actions {
  display: flex;
  align-items: center;
}

.schedule-card__header { justify-content: space-between; gap: var(--space-sm); }
.schedule-card__identity { min-width: 0; gap: var(--space-xs); }
.schedule-card__identity h3 { margin: 0; font-size: var(--font-size-md); }
.schedule-card__type { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.schedule-card__code { padding: 2px var(--space-xs); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.schedule-card__twist,
.schedule-card__action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); cursor: pointer; }
.schedule-card__twist { width: 40px; }
.schedule-card__twist[aria-expanded="true"] .schedule-card__chevron { transform: rotate(90deg); }
.schedule-card__twist-space { width: 40px; }
.schedule-card__actions { flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.schedule-card__action:hover { background: var(--color-bg); color: var(--color-primary); }
.schedule-card__action--danger:hover { color: var(--color-error); }
.schedule-card__action:disabled { opacity: .5; cursor: default; }

.schedule-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0 36px;
}
.schedule-card__facts div { min-width: 0; }
.schedule-card__facts dt { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.schedule-card__facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--font-size-sm); }

.schedule-card__editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0 36px;
  padding-top: var(--space-sm);
  border-top: var(--border-default);
}
.schedule-card__editor label { display: grid; gap: 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.schedule-card__editor input { min-width: 0; min-height: 40px; padding: var(--space-xs); border: var(--border-default); border-radius: var(--radius-sm); color: var(--color-text); font: inherit; }
.schedule-card__editor-actions { align-self: end; gap: var(--space-xs); }
.schedule-card__save,
.schedule-card__cancel { min-height: 40px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
.schedule-card__save { border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.schedule-card__cancel { border: var(--border-default); background: var(--color-surface); color: var(--color-text); }

/*
   The divider: 6px wide, with an invisible grip around it, a visible 4×32px handle in the middle, and the
   column-resize cursor. Measured in ResizableSplitter.tsx:9-15.
*/
.schedule-page__splitter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--schedule-splitter-width);
  background: var(--color-border);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  transition: background var(--duration-fast) var(--easing-standard);
}

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

.schedule-page__splitter:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.schedule-page__splitter-grip {
  width: var(--schedule-splitter-grip-width);
  height: var(--schedule-splitter-grip-height);
  border-radius: var(--schedule-splitter-grip-width);
  background: var(--color-border-strong);
}

.schedule-page__splitter:hover .schedule-page__splitter-grip {
  background: var(--color-surface);
}

/* The diagram takes what the table leaves, and it is what the panes scroll against. */
.schedule-page__diagram {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------------------------------------------
   The other two views. Each one draws its own frame; these wrappers only give it the room to fill.
   ------------------------------------------------------------------------------------------------------------- */

.schedule-page__wbs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.schedule-page__cashflow {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--space-sm);
}

.schedule-page__mobile-gantt-tabs {
  display: none;
}

/* Tablet keeps the complete command set available by letting the header and toolbar occupy a second line. */
@media (max-width: 1199px) {
  .schedule-page__header {
    flex-wrap: wrap;
    align-items: center;
  }

  .schedule-page__header .schedule-toolbar {
    flex: 1 1 100%;
  }
}

/* On a phone Activities and Timeline take turns in the same specialist slot. */
@media (max-width: 767px) {
  .schedule-card__action {
    min-height: 44px;
  }

  .schedule-card__twist,
  .schedule-card__twist-space {
    width: 44px;
  }

  .schedule-page {
    padding: var(--space-sm);
  }

  .schedule-page__header {
    gap: var(--space-xs);
  }

  .schedule-page__template {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .schedule-page__content {
    overflow: hidden;
  }

  .schedule-page__gantt {
    display: flex;
    min-height: 18rem;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .schedule-page__mobile-gantt-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    background: var(--color-surface-muted);
    border: var(--border-default);
    border-radius: var(--radius-lg);
  }

  .schedule-page__mobile-gantt-tab {
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: var(--font-weight-semibold);
  }

  .schedule-page__mobile-gantt-tab--active {
    color: var(--color-primary-strong);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .schedule-page__table {
    width: 100% !important;
    min-height: 18rem;
    border-bottom: var(--border-default);
  }

  .schedule-page__splitter {
    display: none;
  }

  .schedule-page__diagram {
    width: 100%;
    min-height: 18rem;
  }

  .schedule-page__table--mobile-hidden,
  .schedule-page__diagram--mobile-hidden {
    display: none;
  }

  .schedule-card { margin-left: calc(var(--schedule-card-level) * var(--space-sm)); }
  .schedule-card__header { align-items: flex-start; }
  .schedule-card__actions span:not([aria-hidden]) { display: none; }
  .schedule-card__action { width: 44px; min-height: 44px; }
  .schedule-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .schedule-card__editor { grid-template-columns: 1fr; margin-left: 0; }

  .schedule-page__wbs,
  .schedule-page__cashflow {
    overflow: hidden;
  }
}