/* Setup pages part 2 (D-SET, design/brand/proposed/setup/ frames 5, 6, 7, 9, approved): Stock items,
   Departments & job titles, Shift codes, Tags, Headcount rules. Tokens only: the variables come from
   tokens.css at the top of application.css, which loads first. Kept in its own file while part 1 (PR 235)
   changes application.css; fold the two into one section once both are merged. Pakcu appears only in
   the page header and the empty guide, never in a form, a list or a dialog. */
.setw-page { display: grid; gap: var(--g-space-24); }
.setw-page > * { min-width: 0; }
.setw-page > .card + .card { margin-top: 0; }
.setw-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-24); align-items: start; }
.setw-two > * { min-width: 0; }
.setw-two > .card + .card { margin-top: 0; }
.setw-card { display: grid; gap: var(--g-space-16); }
.setw-card > * { min-width: 0; margin: 0; }
.setw-card h2 { margin: 0; }
.setw-card .sub { margin: 0; }
.setw-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); }
.setw-head h2, .setw-head h3 { margin: 0; overflow-wrap: anywhere; }

/* One row of a list: what it is and its facts on the left, its buttons on the right. */
.setw-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-16); align-items: center; padding: var(--g-space-16); border: 1px solid var(--g-color-line); border-radius: var(--g-radius-input); background: var(--g-color-white); }
.setw-record--off { background: var(--g-color-ivory); }
.setw-record > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.setw-record p { margin: var(--g-space-4) 0 0; font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.setw-record .chip { font-size: var(--g-font-size-caption); }
.setw-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-8); align-items: center; justify-content: flex-end; }
.setw-actions form { margin: 0; }
.setw-tree { display: grid; gap: var(--g-space-12); border-left: var(--g-space-4) solid var(--g-color-mint); padding-left: var(--g-space-16); }
.setw-tree > * { min-width: 0; }

/* This outlet's stock: one ivory block per item, the tick on its own line, par and area side by side. */
.setw-item { display: grid; gap: var(--g-space-8); padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.setw-item h3 { margin: 0; overflow-wrap: anywhere; }
.setw-checkline { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); font-weight: 400; }
.setw-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g-space-16); }
.setw-fields > * { min-width: 0; }
.setw-fields--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); }
.setw-fields .field { margin-bottom: var(--g-space-16); }
.setw-wide { grid-column: 1 / -1; }
.setw-form .btn--primary, .setw-card form > .btn--primary { width: 100%; }
.setw-form-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-12); align-items: center; }
.setw-form-actions .btn--primary { width: auto; }
.setw-tags { border: 0; margin: 0 0 var(--g-space-16); padding: 0; }
.setw-tags legend { font-size: var(--g-font-size-small); font-weight: 700; margin-bottom: var(--g-space-8); padding: 0; }
.setw-tags__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: 0 var(--g-space-12); }
.setw-paste textarea { width: 100%; }

/* Messages a save leaves: "Saving…" on mint, trouble on the error surface. Empty takes no room. */
.setw-status { margin: 0; padding: var(--g-space-12); border-radius: var(--g-radius-input); background: var(--g-color-mint); color: var(--g-color-navy); font-size: var(--g-font-size-small); }
.setw-status:empty { display: none; }
.setw-status--trouble { background: var(--g-color-error-surface); color: var(--g-color-error); }

/* The empty guide: the only place inside the page body Pakcu may stand. */
.setw-empty { display: flex; align-items: center; gap: var(--g-space-24); padding: var(--g-space-24); border-radius: var(--g-radius-card); background: var(--g-color-mint); }
.setw-empty > * { min-width: 0; }
.setw-empty h3 { margin: 0 0 var(--g-space-8); font-size: var(--g-font-size-heading-small); }
.setw-empty p { margin: 0 0 var(--g-space-16); }
.setw-empty__art { width: calc(var(--g-space-48) * 3); max-width: 100%; height: auto; object-fit: contain; flex-shrink: 0; }

/* The add and edit dialog: wider than the base dialog, scrolls inside itself, Close top right. */
dialog.setw-dialog { max-width: calc(var(--g-size-phone) * 1.6); max-height: 90dvh; overflow: auto; }
.setw-dialog h2 { font-size: var(--g-font-size-heading); margin: 0 0 var(--g-space-16); padding-inline-end: calc(var(--g-size-touch) * 2); overflow-wrap: anywhere; }
.setw-dialog__close { float: right; margin: 0 0 var(--g-space-8) var(--g-space-8); }
.setw-dialog .setw-status { margin-top: var(--g-space-12); }
.setw-form-card { max-width: calc(var(--g-size-phone) * 1.6); }

@media (max-width: 390px) {
  .setw-record { grid-template-columns: minmax(0, 1fr); }
  .setw-actions { justify-content: flex-start; }
  .setw-fields, .setw-fields--four { grid-template-columns: minmax(0, 1fr); }
  .setw-head .btn { width: 100%; }
  .setw-empty { flex-direction: column; align-items: flex-start; padding: var(--g-space-16); }
  dialog.setw-dialog { padding: var(--g-space-16); }
}