/* HR Forms. Kept out of app.css, which is already past 5,000 lines.
   Colours come from the tokens app.css defines, so this file inherits both
   themes without repeating either palette. */

/* Page frame. app.css deliberately gives .panel no padding — every page picks its
   own — and it styles the heading row as .panel-heading, so without these the text
   sits flush against the panel border and the heading's action stacks under it. */

.forms-page > .page-header,
.forms-page > .panel,
.forms-page > .form-builder,
.forms-page > .form-anonymous-note,
.forms-page > .form-lock-notice {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}
.forms-page > .panel,
.forms-page .form-builder > .panel {
  margin-bottom: 16px;
  padding: 20px;
}
.forms-page > .panel:last-child,
.forms-page .form-builder > .panel:last-child { margin-bottom: 0; }

.page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.form-card-list { display: grid; gap: 12px; }

.form-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.form-card.answered { opacity: .72; }
.form-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.form-card h3 { margin: 0 0 4px; font-size: 1rem; }
.form-card-description { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.form-card > footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-card > footer .button { margin-left: auto; }

.form-pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.form-pill-draft { color: var(--ink-2); background: var(--sheet-2); }
.form-pill-open { color: var(--positive); background: var(--positive-soft); }
.form-pill-due { color: var(--warn); background: var(--warn-soft); }
.form-pill-overdue { color: var(--flag); background: var(--flag-soft); }
.form-pill-closed { color: var(--ink-3); background: var(--sheet-2); }

.form-anonymous-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
}

.form-anonymous-note,
.form-lock-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--sheet-2);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.55;
}

/* A panel heading on these pages can carry a line of explanation under the
   title; app.css flattens every margin in a heading, so it needs its own. */
.forms-page .panel-heading > div > p:not(.eyebrow) {
  margin: 6px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}

/* Composer */

.form-composer { display: grid; gap: 16px; }
.form-composer > .panel-heading { margin-bottom: 0; }
.form-composer-fields { display: grid; gap: 14px; }

.form-composer-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-composer-section h3 { margin: 0; font-size: .875rem; }
.form-composer-list { display: grid; gap: 12px; }
.form-composer-list:empty { display: none; }
.form-composer-empty { margin: 0; color: var(--muted); font-size: .8125rem; }

.form-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-composer-actions .button { min-width: 150px; }

/* Managed list */

.form-managed-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(160px, .8fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.form-managed-row:first-of-type { border-top: 0; }
.form-managed-main h3 { margin: 0 0 3px; font-size: .875rem; }
.form-managed-main p { margin: 0; color: var(--muted); font-size: .8125rem; }
.form-managed-progress small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.form-managed-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.form-progress-track {
  display: block;
  height: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--sheet-2);
  overflow: hidden;
}
.form-progress-track > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* Builder */

.form-builder { display: grid; gap: 16px; }
.form-builder .panel { display: grid; gap: 14px; }
.form-builder .panel > .button { justify-self: start; }

.form-question-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet-2);
}
.form-question-card > header { display: flex; align-items: center; gap: 10px; }
.form-question-card > header .text-button { margin-left: auto; }
/* The card is a grid, so a bare button would stretch the full column. */
.form-question-card > .button,
.form-question-card > .text-button { justify-self: start; }
.form-question-type {
  padding: .16rem .5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.form-required-badge { color: var(--danger); font-size: .75rem; font-weight: 600; }
.form-required-star { margin-left: 4px; color: var(--danger); }

.form-option-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.form-option-list li { display: flex; align-items: center; gap: 10px; }
.form-option-list input { flex: 1 1 auto; }

.form-question-add,
.form-recipient-add {
  display: grid;
  align-items: end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-question-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
/* Two label/button pairs, one per row — not the question row's three columns. */
.form-recipient-add { grid-template-columns: minmax(0, 1fr) auto; }

.form-recipient-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.form-recipient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.form-recipient span { display: flex; flex-direction: column; }
.form-recipient small { color: var(--muted); font-size: .75rem; }

/* Answering */

.form-answer-sheet { display: grid; gap: 16px; }
.form-answer-actions .button { min-width: 170px; }
.form-answer-block {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet-2);
  transition: border-color .14s ease, background-color .14s ease;
}
.form-answer-block.missing {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.form-answer-block h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: .875rem; }
.form-answer-block p { margin: 0; color: var(--muted); font-size: .8125rem; }
.form-answer-number {
  flex: 0 0 auto;
  min-width: 22px;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.form-answer-options { display: grid; gap: 6px; }
.form-answer-actions { display: flex; justify-content: flex-end; }

.form-rating { display: flex; gap: 8px; }
.form-rating label { position: relative; }
.form-rating input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.form-rating span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .14s ease, border-color .14s ease;
}
.form-rating input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.form-rating input:focus-visible + span { box-shadow: var(--focus); }

/* Results */

.form-result-question { padding: 16px 0; border-top: 1px solid var(--line); }
.form-result-question:first-of-type { border-top: 0; padding-top: 0; }
.form-result-question > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.form-result-question h3 { margin: 0; font-size: .875rem; }
.form-result-average { margin: 0 0 10px; font-size: .8125rem; }
.form-result-average strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }

.form-result-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.form-result-bar {
  display: grid;
  grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
}
.form-result-label { overflow-wrap: anywhere; }
.form-result-track {
  display: block;
  height: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--sheet-2);
  overflow: hidden;
}
.form-result-track > i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.form-result-count {
  color: var(--muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.form-result-text { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.form-result-text li {
  padding: 8px 12px;
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--sheet-2);
  font-size: .8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.form-roster { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.form-roster li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.form-roster small { color: var(--muted); font-size: .75rem; }

.table-scroll { overflow-x: auto; }
.form-answer-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.form-answer-table th,
.form-answer-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  text-align: left;
  vertical-align: top;
}
.form-answer-table th {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* The bell entry for a form waiting on an answer. */
.notification-item.kind-form .notification-icon { background: var(--accent-soft); }

@media (max-width: 900px) {
  .form-composer-actions { justify-content: stretch; }
  .form-composer-actions .button { flex: 1 1 auto; }
  .forms-page > .panel,
  .forms-page .form-builder > .panel { padding: 16px; }
  .form-managed-row { grid-template-columns: 1fr; gap: 10px; }
  .form-managed-actions { justify-content: flex-start; }
  .form-question-add,
  .form-recipient-add { grid-template-columns: 1fr; }
  .form-result-bar { grid-template-columns: 1fr auto; }
  .form-result-track { grid-column: 1 / -1; }
  .form-card > footer .button { margin-left: 0; width: 100%; }
}

/* The status pills and the bell icon now read the same tokens in both themes, so
   these blocks carry no second palette. They are kept only because the selectors
   are part of this file's contract; they are safe to delete in one pass. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .form-pill-draft { color: var(--ink-2); background: var(--sheet-2); }
  html:not([data-theme="light"]) .form-pill-open { color: var(--positive); background: var(--positive-soft); }
  html:not([data-theme="light"]) .form-pill-due { color: var(--warn); background: var(--warn-soft); }
  html:not([data-theme="light"]) .form-pill-overdue { color: var(--flag); background: var(--flag-soft); }
  html:not([data-theme="light"]) .form-pill-closed { color: var(--ink-3); background: var(--sheet-2); }
  html:not([data-theme="light"]) .notification-item.kind-form .notification-icon { background: var(--accent-soft); }
}
html[data-theme="dark"] .form-pill-draft { color: var(--ink-2); background: var(--sheet-2); }
html[data-theme="dark"] .form-pill-open { color: var(--positive); background: var(--positive-soft); }
html[data-theme="dark"] .form-pill-due { color: var(--warn); background: var(--warn-soft); }
html[data-theme="dark"] .form-pill-overdue { color: var(--flag); background: var(--flag-soft); }
html[data-theme="dark"] .form-pill-closed { color: var(--ink-3); background: var(--sheet-2); }
html[data-theme="dark"] .notification-item.kind-form .notification-icon { background: var(--accent-soft); }