/* ==========================================================================
   The dialogs of the schedule family — Features/Schedule/Components/ScheduleTemplateDialog.razor
   and the two dialogs that follow it (P10 investment, P11 dependencies).

   This is the **frame sheet of the family** the comment of `wwwroot/index.html:41-45` already
   announces: it must be linked there by the integrator, after the sheets of the shared pieces and
   before `dialogs.css`, so the frame of a dialog still wins over the screen that opened it. It is
   nobody's else to link: `index.html` is a shared file.

   Every value is the one measured in the origin — `PLANNING-SCHEDULE-UI.md` §1.6 and §2.3 (`I-54`),
   read off `TemplateSelectorModal.tsx:171-268` — and every colour is a token: the family's block in
   `tokens.css` owns the palette and this sheet declares no token of its own (`DEC-W75`). The origin's
   classes are Tailwind utilities and its palette is Tailwind's; the translation is one of **values and
   roles**, not of class names (`PLANNING-SCHEDULE-UI.md` §8, E-10): `blue-700` of a chosen task is the
   product's own blue, `green-600` of a task already in the schedule is the success role, and the grey
   steps of an included chapter are the muted text role. Where a measured number has no token yet, the
   rule carries the number with the line that measures it, so the owner's pass (`DEC-W84`) can turn it
   into one.

   The frame itself — the layer, the backdrop, the surface, the title and the note — is `dialogs.css`,
   which is the sheet of `Components/Dialogs/DialogHost`, a shared piece. Nothing here declares or
   re-styles a class of that sheet (`ARTEFACT-SCREEN-TEMPLATE.md` §0.8), and that includes the width of
   a dialog: the three modals of this family measure 896, 672 and 512 px (§1.6) and the width is a
   parameter of the host (`DialogHost.MaxWidth`), declared by each dialog in its own code-behind and
   written on the surface it owns. The `:has()` rule that raised the cap of this dialog from here is
   gone with it: a sheet of a family that reaches a class of a shared piece is exactly what §0.8
   forbids, and it was also the reason the host had no width to give.
   ========================================================================== */

/* ---- The content: 16px between the two columns and the foot, measured `space-y-4` ---------- */
.schedule-template {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---- The two columns: equal width, 16px apart, measured `grid-cols-2 gap-4` ---------------- */
/* No breakpoint, and that is the measurement: the origin's whole section has not one `@media` nor a
   `sm:`/`md:` class (§1.7). A narrow window squeezes the two columns, and the dialog is never wider
   than the window because the host gives it `width: 100%`. */
.schedule-template__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
}

/* ---- One column: a rounded panel that scrolls inside itself, measured `rounded-xl border
   max-h-[420px] overflow-y-auto p-2` ------------------------------------------------------------------ */
.schedule-template__column {
  max-height: 420px;
  padding: var(--space-xs);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

/* ---- What a column is called: `Template (35)` / `Your schedule (3 to add · 5 in schedule)`,
    measured `text-[10px] font-bold uppercase tracking-wide text-gray-400` ---------------------------- */
.schedule-template__heading {
  margin: 0;
  padding: 0 var(--space-2xs) var(--space-2xs);
  color: var(--color-text-subtle);
  font-size: var(--schedule-font-tiny);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

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

.schedule-template__item {
  margin: 0;
}

/* ---- A row of the template: the whole row is the toggle, measured `flex items-center gap-1.5 py-1
    px-1 rounded hover:bg-blue-50/60 cursor-pointer`, with the indent written inline by the component
    (8 + nivel × 16, §1.6) because it is a value computed from the row ------------------------------- */
.schedule-template__offer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: var(--space-2xs) var(--space-2xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}

.schedule-template__offer:hover:not(:disabled) {
  background: var(--schedule-row-selected);
}

/* A row the schedule already holds is not offered again and does not pretend it can be: the origin's
   handler returns without doing anything (`TemplateSelectorModal.tsx:125`) and the markup says so. */
.schedule-template__offer:disabled {
  cursor: default;
}

.schedule-template__offer--chosen .schedule-template__name {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-semibold);
}

/* ---- A row of what would be created: the arrows, the mark, the name and the state ----------- */
.schedule-template__choice {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-sm);
}

.schedule-template__choice:hover {
  background: var(--schedule-row-selected);
}

/* A chapter below a root of what would be created: the indent per depth is written inline by the
   component, the origin writing one step of it as `ml-6` (24px, §1.6). */
.schedule-template__choice--branch {
  font-size: var(--schedule-font-compact);
}

/* ---- The two arrows that reorder the top-level tasks, measured `text-gray-300 hover:text-blue-600
    disabled:opacity-20 text-[9px] leading-none` ----------------------------------------------------- */
.schedule-template__moves {
  display: flex;
  flex-direction: row;
  margin-right: var(--space-3xs);
}

.schedule-template__move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-subtle);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}

.schedule-template__move:hover:not(:disabled) {
  color: var(--color-primary);
}

.schedule-template__move:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ---- The mark of a row: `−` chosen, `+` offered, `✓` already in the schedule and `◌`/`—` a chapter
    that is drawn because something below it was chosen (measured `text-xs shrink-0`) ---------------- */
.schedule-template__mark {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--schedule-font-compact);
}

.schedule-template__mark--chosen {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.schedule-template__mark--used {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.schedule-template__mark--included {
  color: var(--color-text-subtle);
}

/* The mark of a branch row is a step smaller in the origin (`text-[10px]` against `text-xs`). */
.schedule-template__choice--branch .schedule-template__mark {
  font-size: var(--schedule-font-tiny);
}

/* ---- The name of a row: truncating, and its colour is the state of the row ------------------ */
.schedule-template__name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-template__choice .schedule-template__name {
  flex: 1 1 auto;
}

.schedule-template__name--chosen {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-semibold);
}

.schedule-template__name--used {
  color: var(--color-success);
}

.schedule-template__name--included {
  color: var(--color-text-subtle);
  font-style: italic;
}

/* ---- `in schedule`: the pill a task the schedule already holds carries, measured `text-[9px]
    font-semibold text-green-600 bg-green-50 border border-green-200 rounded-full px-1.5 py-0.5` ----- */
.schedule-template__pill {
  flex: 0 0 auto;
  padding: var(--space-3xs) 6px;
  border: var(--border-width) solid var(--color-success-border);
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* ---- Taking one choice out, measured `text-gray-300 hover:text-red-500 text-xs opacity-0
    group-hover:opacity-100` -------------------------------------------------------------------------
   The origin reveals it on hover only, which leaves it unreachable with a keyboard: here it is revealed
   by the row's hover **and** by its own focus, so the one control that removes a choice is reachable
   without a pointer. */
.schedule-template__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-subtle);
  font-family: inherit;
  font-size: var(--schedule-font-compact);
  line-height: 1;
  opacity: 0;
  cursor: pointer;
}

.schedule-template__choice:hover .schedule-template__remove,
.schedule-template__choice:focus-within .schedule-template__remove,
.schedule-template__remove:focus-visible {
  opacity: 1;
}

.schedule-template__remove:hover:not(:disabled) {
  color: var(--color-error);
}

/* ---- What an empty column says: `Click + to add tasks`, measured `text-xs text-gray-300 text-center py-10` */
.schedule-template__empty {
  margin: 0;
  padding: var(--space-2xl) 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ---- The foot: the counter on the left and the two actions on the right, measured one row,
    `flex items-center justify-between pt-2` ---------------------------------------------------------- */
.schedule-template__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.schedule-template__status {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.schedule-template__actions {
  display: flex;
  gap: var(--space-sm);
}

/* ---- The dialog of one activity: a column of sections -------------------------------------- */

.schedule-investment {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.schedule-investment__assigned,
.schedule-investment__available,
.schedule-investment__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The heading of a section: 10px, semibold, upper case and widely tracked — the same reading the assigned amount
   of the table's header uses, because both are labels of a group of rows and not values. */
.schedule-investment__heading {
  margin: 0;
  font-size: var(--schedule-font-tiny);
  font-weight: var(--font-weight-semibold);
  /* Measured: `tracking-wide`, the 0.025em step of the origin's own scale, doubled for a 10px label. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ---- The rows the server published for this activity --------------------------------------- */

.schedule-investment__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-investment__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-success-soft);
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

/* The category, as a badge: a fixed 28px box so the descriptions of a list start on the same column whatever the
   letter is. Measured: `w-7` with a 10px bold letter (`BudgetAssignModal.tsx:139`). */
.schedule-investment__category {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 0 var(--space-3xs);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--schedule-font-tiny);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.schedule-investment__item {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
}

/* What was given to this activity: `assignedAmount`, which is the figure the table's `$Inv` cell draws with the
   same reading. */
.schedule-investment__amount {
  flex: 0 0 auto;
  color: var(--schedule-amount);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The item's own total in the list of what can be added: a reading of the item, not of the assignment, so it is
   drawn in the muted ink and never as the amount of a row. */
.schedule-investment__total {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- The three sentences of a state -------------------------------------------------------- */

.schedule-investment__empty {
  margin: 0;
  padding: var(--space-md);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  text-align: center;
}

.schedule-investment__readonly {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The declared gap of this piece: the remaining amount of an item is published by no route. It is drawn as a note
   and not as a warning — nothing is wrong with the screen — with the same left rule the dialog's own quotation
   uses, so it is read as an aside and not as a value. */
.schedule-investment__gap {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The list of items that can be added --------------------------------------------------- */

.schedule-investment__search {
  display: flex;
  flex-direction: column;
}

/* The scrolled box of the items, 256px tall (`max-h-64`, §1.6) and cut by nothing: the origin drew the first
   fifteen and left the rest unreachable (A-14), and the search above is what narrows this one. */
.schedule-investment__items {
  max-height: 256px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  list-style: none;
}

.schedule-investment__item-row {
  border-bottom: var(--border-width) solid var(--color-border);
}

.schedule-investment__item-row:last-child {
  border-bottom: 0;
}

/* One item as a button, because picking it is what opens its amount field. */
.schedule-investment__pick {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

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

/* The item whose form is open: the field belongs to it and the row says so while its panel is drawn under it. */
.schedule-investment__pick[aria-pressed="true"] {
  background: var(--color-primary-soft);
}

/* ---- The form of one item: the unit, the amount, its equivalence and the two actions -------- */

.schedule-investment__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-primary-soft);
  border-top: var(--border-width) solid var(--color-primary-border);
}

.schedule-investment__amount-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}

/* The field takes the row, with the measured 96px of the origin (`w-24`) as its floor: the origin relied on a
   placeholder for the unit and prefilled it with the remainder (D-7), and this one carries a label instead. */
.schedule-investment__amount-row .field {
  flex: 1 1 auto;
  min-width: 96px;
}

/* The `$`/`%` switch: one control carrying the unit it is on, at the height of the field it belongs to. */
.schedule-investment__unit {
  flex: 0 0 auto;
  min-width: var(--schedule-column-action);
  height: var(--control-height);
  padding: 0 var(--space-xs);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.schedule-investment__unit:hover:not(:disabled) {
  background: var(--color-surface-muted);
}

.schedule-investment__unit:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* The other reading of the same amount: a value and not a sentence, so it is set in the tabular figures of every
   money reading of the family. */
.schedule-investment__equivalence {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* This screen's own refusal, which is not the server's: nothing was sent. It is announced where the amount was
   typed, and the draft stays in the field beside it. */
.schedule-investment__refusal {
  margin: 0;
  color: var(--color-error-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.schedule-investment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* ---- The dialog of dependencies (P11) ----------------------------------------------------- */

.schedule-dependencies {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The summary strip: what the list holds, and how many links it counts. The count is not an aggregate the screen
   computes — it is the length of the list the server published. */
.schedule-dependencies__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
}

.schedule-dependencies__sentence {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.schedule-dependencies__count {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Why the dialog can offer no type: said where the control would be, and said once. */
.schedule-dependencies__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The label above the list: 11px, uppercase and tracked, exactly as the origin's own section label. */
.schedule-dependencies__heading {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--schedule-font-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* An activity with no predecessor: the dash the `Pred` column draws for such a row, in the dashed frame the
   origin drew around its own empty list. */
.schedule-dependencies__empty {
  margin: 0;
  padding: var(--space-sm);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  text-align: center;
}

.schedule-dependencies__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One incoming dependency: the predecessor, the reading of the link and the two actions of the row. */
.schedule-dependencies__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The row whose edition is open, tinted as the origin tinted it. */
.schedule-dependencies__row--editing {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
}

.schedule-dependencies__name {
  min-width: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

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

/* The reading of the link — number, short type and lag — in the size the table's `Pred` column reads it. */
.schedule-dependencies__reading {
  color: var(--color-text-muted);
  font-size: var(--schedule-font-compact);
}

.schedule-dependencies__controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
}

/* The row whose edition is open: the fields and the two actions, on the whole width of the row. */
.schedule-dependencies__editor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs) var(--space-sm);
  width: 100%;
}

/* Measured: the lag field of an edited row is 56px wide (`w-14`), and the field of a creation fills its column. */
.schedule-dependencies__lag .field__input {
  width: 56px;
}

/* ---- The form of a creation --------------------------------------------------------------- */

.schedule-dependencies__add {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* Measured: `Predecessor`, `Type` and `Lag` in three columns 8px apart (`grid-cols-3 gap-2`). */
.schedule-dependencies__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

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

  .schedule-template__remove {
    width: 44px;
    min-height: 44px;
  }

  .schedule-template__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-template__column {
    max-height: 34vh;
  }

  .schedule-investment__row,
  .schedule-investment__item-row,
  .schedule-investment__amount-row,
  .schedule-dependencies__item,
  .schedule-dependencies__editor {
    align-items: stretch;
  }

  .schedule-investment__amount-row {
    flex-direction: column;
  }

  .schedule-dependencies__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-dependencies__controls {
    width: 100%;
    margin-left: 0;
  }
}