/* transactions screens — area-specific components only; tokens only (see docs/UI.md). */
/* Every area stylesheet loads on every page: keep class names specific to the component. */

/* --- Document preview: an uploaded proof shown in a wide dialog ------------------------------ */
.document-preview-dialog {
  max-width: var(--container-5xl);
}
.document-preview-frame {
  width: 100%;
  height: 75dvh;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--background);
}

/* === project (worksheet, tasks, feedback, complaints) === */
/* A field message shown only once its form has been submitted (form.was-validated) and the control is invalid. */
.field-error-if-invalid {
  display: none;
}
.was-validated :invalid ~ .field-error-if-invalid {
  display: block;
}
.field.has-error .select2-container .select2-selection {
  border-color: var(--destructive);
}
/* Read-only quoted text (a submitted comment, earlier remarks) in a muted, scrollable well. */
.quote-box {
  max-height: calc(var(--spacing) * 30);
  overflow-y: auto;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: var(--text-control);
  color: var(--foreground);
}
/* Grid rows grouped by day (worksheet approval): alternate days are tinted, each day ends on a
   stronger rule, and rows in a processed salary period are muted. Classes come from getRowClass. */
.ag-row.date-group-odd {
  background-color: color-mix(in srgb, var(--muted) 50%, var(--card));
}
.ag-row.date-group-last-row {
  border-bottom-color: var(--border-strong);
}
.ag-row.salary-done-row {
  color: var(--muted-foreground);
}

/* === exit process === */
/* Numbered instructions on the exit formalities form (base.css strips list markers). */
.exit-instructions {
  padding-left: calc(var(--spacing) * 5);
  list-style: decimal;
  font-size: var(--text-control);
  line-height: var(--leading-relaxed);
}
.exit-instructions > li + li {
  margin-top: calc(var(--spacing) * 1);
}

/* === kpi / performance === */
/* 9-box talent matrix: an axis-label column plus three columns of boxes; boxes are shaded by
   their head count (data-heat 0-3, set by script) and the selected box carries aria-pressed. */
.nine-box {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 2);
}
.nine-box-axis {
  align-self: center;
  color: var(--muted-foreground);
}
.nine-box-cell {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: left;
  transition: background-color var(--default-transition-duration), border-color var(--default-transition-duration);
}
.nine-box-cell[data-heat="1"] { background: color-mix(in srgb, var(--seq-500) 10%, var(--card)); }
.nine-box-cell[data-heat="2"] { background: color-mix(in srgb, var(--seq-500) 22%, var(--card)); }
.nine-box-cell[data-heat="3"] { background: color-mix(in srgb, var(--seq-500) 36%, var(--card)); }
.nine-box-cell:hover {
  border-color: var(--border-strong);
}
.nine-box-cell:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.nine-box-cell[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.nine-box-head {
  display: flex;
  align-self: stretch;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
}
.nine-box-count {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Ranking tiers 1-6, best to worst: one color each, shared by the bar and its legend. */
:is(.tier-bar, .tier-legend) [data-tier="1"] { --tier-color: var(--chart-1); }
:is(.tier-bar, .tier-legend) [data-tier="2"] { --tier-color: color-mix(in srgb, var(--chart-1) 65%, var(--card)); }
:is(.tier-bar, .tier-legend) [data-tier="3"] { --tier-color: color-mix(in srgb, var(--chart-1) 35%, var(--card)); }
:is(.tier-bar, .tier-legend) [data-tier="4"] { --tier-color: var(--chart-muted); }
:is(.tier-bar, .tier-legend) [data-tier="5"] { --tier-color: var(--status-warning); }
:is(.tier-bar, .tier-legend) [data-tier="6"] { --tier-color: var(--status-critical); }
.tier-bar {
  display: flex;
  height: calc(var(--spacing) * 3);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--muted);
}
.tier-bar > [data-tier] {
  background: var(--tier-color);
}
.tier-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 64), 1fr));
  gap: calc(var(--spacing) * 3);
}
.tier-legend-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: var(--text-control);
}
.tier-legend-item > .legend-swatch {
  margin-top: calc(var(--spacing) * 1);
  background: var(--tier-color);
}

/* Star rating (1-5): read-only icons in tables, buttons in the calibration dialog. */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
  color: var(--border-strong);
}
.star-rating .is-on,
.star-rating .is-on .icon {
  color: var(--chart-4);
  fill: currentColor;
}
.star-rating .star-icon {
  display: inline-flex;
  padding: calc(var(--spacing) * 0.5);
  border-radius: var(--radius-sm);
}
.star-rating .star-icon .icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.star-rating .star-icon:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Scorecard tables (performance matrix, KPI evaluation): inline score and remark inputs,
   wrapping description columns and a totals footer. */
.scorecard-table .score-input {
  width: calc(var(--spacing) * 22);
  text-align: right;
}
.scorecard-table .remark-input {
  min-width: calc(var(--spacing) * 48);
}
.scorecard-table .input[readonly],
.scorecard-table .input:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
}
.scorecard-table .scorecard-category {
  min-width: calc(var(--spacing) * 60);
  white-space: normal;
}
.scorecard-table .scorecard-metric {
  min-width: calc(var(--spacing) * 48);
  white-space: normal;
}
.scorecard-table tfoot td {
  border-top: 1px solid var(--line);
  background: var(--background);
  font-weight: var(--font-weight-semibold);
}
/* A nested log under a scorecard row (target progress entries). */
.scorecard-table .scorecard-subrow > td {
  padding-top: 0;
  background: var(--background);
}

/* === tds === */

/* === leave === */
/* A label beside its control on one line, for a single picker in the page header
   (e.g. the financial year on leave requests). */
.field.field-inline {
  flex-direction: row;
  align-items: center;
}
.field.field-inline > .label {
  white-space: nowrap;
}