/* Planning: the job board (a column per stage) and the linear workflow. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .planning .page-header .button-row { margin: 0; }
  .planning-filters { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding: var(--space-3) var(--space-4); }
  .planning-filters label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
  .planning-filters select { width: auto; }

  .planning-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--space-3);
    overflow-x: auto; padding-bottom: var(--space-3); margin-top: var(--space-4);
  }
  .planning-column {
    min-width: 0; padding: var(--space-3); border-radius: var(--radius-lg);
    background: var(--glass); border: 1px solid var(--glass-edge);
  }
  .planning-column h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-medium); }
  .planning-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-height: 3rem; }
  .planning-empty { font-size: var(--text-sm); margin: 0; }

  .planning-card {
    padding: var(--space-3); border-radius: var(--radius-md); background: var(--glass-strong); border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow-soft); cursor: grab; font-size: var(--text-sm);
  }
  .planning-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .planning-card.is-dragging { opacity: .5; }
  .planning-card header { display: flex; justify-content: space-between; gap: var(--space-2); }
  .planning-card-number { font-weight: var(--weight-medium); }
  .planning-card p { margin: var(--space-1) 0; }
  .planning-card-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--ink-soft); }
  .planning-card-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-block: var(--space-2); }
  .planning-card-progress span { display: block; height: 100%; background: var(--positive); }
  .planning-card footer { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
  .planning-flag { padding: 0 .45rem; border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--glass); border: 1px solid var(--line); }
  .planning-flag[data-flag="overdue"], .planning-flag[data-flag="possible-rework"] { color: var(--negative); border-color: currentColor; }
  .planning-flag[data-flag="due-soon"], .planning-flag[data-flag="changes-to-confirm"] { color: var(--warning); border-color: currentColor; }
  .planning-card-move { display: flex; gap: var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); opacity: 0; }
  .planning-card:hover .planning-card-move, .planning-card:focus-within .planning-card-move { opacity: 1; }

  .planning-workflow { margin-top: var(--space-4); }
  .workflow-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); }
  .workflow-row:first-child { border-top: none; }
  .workflow-job { display: flex; flex-direction: column; }
  .workflow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
  .workflow-step {
    display: flex; flex-direction: column; padding: .3rem .65rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); max-width: 11rem;
  }
  .workflow-step small { color: var(--muted); }
  .workflow-step.is-done { background: color-mix(in srgb, var(--positive) 14%, transparent); border-color: color-mix(in srgb, var(--positive) 40%, transparent); color: var(--ink); }
  .workflow-step.is-current { border-color: var(--ink); color: var(--ink); font-weight: var(--weight-medium); }
  .workflow-step form.button_to { display: block; }
  .workflow-step-button, button.workflow-step-button {
    padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; box-shadow: none; text-decoration: underline;
    text-underline-offset: 2px;
  }
  .workflow-step-button:hover { background: none; }
  .workflow-due { align-self: center; font-size: var(--text-xs); color: var(--ink-soft); margin-left: auto; }
  .workflow-due.is-late { color: var(--negative); font-weight: var(--weight-medium); }

  /* Wall screen: no menu, bigger cards, for a screen on the shop floor. */
  main.page--wall { max-width: none; }
  .page--wall .planning-card { font-size: var(--text-md); }
  .page--wall .planning-column h2 { font-size: var(--text-lg); }
  .page--wall .planning-card-move { display: none; }

  @media (max-width: 40rem) {
    .workflow-row { grid-template-columns: 1fr; }
  }
}

@layer components {
  /* The Planning panel on the home dashboard (the whole panel is a link). */
  .home-planning { display: block; text-decoration: none; color: inherit; }
  .workflow-row--compact { grid-template-columns: 9rem minmax(0, 1fr); padding-block: var(--space-2); }
  .workflow-row--compact .workflow-step { padding: .15rem .5rem; }
}

@layer components {
  .wall-link code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: var(--space-1) var(--space-2);
                    border-radius: var(--radius-sm); background: var(--glass-strong); user-select: all; }
}