/* attendance-payroll screens — area-specific components only; tokens only (see docs/UI.md). */

/* Two controls in one field, e.g. a short code and its name. */
.input-pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: calc(var(--spacing) * 2);
  align-items: center;
}
.input-pair > * {
  min-width: 0;
}

/* A compact pay-head table (earnings, deductions, payment days) inside a flush card. */
.breakdown-table th {
  height: auto;
  padding-block: calc(var(--spacing) * 2);
}
.breakdown-table td {
  padding-block: calc(var(--spacing) * 1);
}
.breakdown-table .breakdown-divider td {
  border-top: 1px solid var(--line);
}
.breakdown-table tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--background);
  font-weight: var(--font-weight-semibold);
}

/* A value inside a table cell: read-only ones read as text, editable ones keep a field border. */
.cell-input {
  width: 100%;
  min-width: 0;
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font-size: var(--text-control);
  font-variant-numeric: tabular-nums;
}
.cell-input[readonly] {
  cursor: default;
}
.cell-input:not([readonly]) {
  border-color: var(--input);
  background: var(--card);
}
.cell-input:focus-visible {
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow: var(--focus-ring-field);
  outline: none;
}

/* A long checksum or reference shown in full: mono, and it wraps anywhere. */
.hash-value {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* Month matrix (shift roster, muster): one row per employee, one narrow column per day.
   The first column stays put while the days scroll sideways inside .table-wrap. */
.month-matrix th,
.month-matrix td {
  padding: calc(var(--spacing) * 1);
  text-align: center;
  white-space: nowrap;
}
.month-matrix th:first-child,
.month-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-raised);
  min-width: calc(var(--spacing) * 56);
  padding-left: calc(var(--spacing) * 5);
  border-right: 1px solid var(--line);
  background: var(--card);
  text-align: left;
}
.month-matrix thead th:first-child {
  background: var(--background);
}
.month-matrix .num {
  padding-inline: calc(var(--spacing) * 2);
  text-align: right;
}
.month-matrix .table-sub .icon {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}

/* One day in a month matrix: a short code (shift, WO, P, A…) tinted by its state.
   Plain = planned default; .is-set = saved; .is-auto = auto-detected; .is-off = weekly off. */
.day-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 6);
  padding: 0 calc(var(--spacing) * 1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
button.day-cell {
  cursor: pointer;
}
button.day-cell:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}
button.day-cell:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.day-cell.is-set {
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--foreground);
}
.day-cell.is-auto {
  border: 1px solid transparent;
  background: var(--info-soft);
  color: var(--info);
}
.day-cell.is-off {
  border: 1px solid transparent;
  background: var(--muted);
  color: var(--muted-foreground);
}

/* A bordered, scrolling list of checkbox options (label.option) inside a form field. */
.picker-list {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--spacing) * 55);
  overflow-y: auto;
  padding: calc(var(--spacing) * 1);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
}
.picker-list:empty::before {
  content: "Nothing to choose from";
  padding: calc(var(--spacing) * 2);
  color: var(--muted-foreground);
  font-size: var(--text-control);
}

/* The matching row in an evaluation table (e.g. the detected shift). */
.table tbody tr.row-match td {
  background: var(--accent);
}

/* A long list of choice chips (e.g. generated dates) that scrolls inside its form. */
.choice-scroll {
  max-height: calc(var(--spacing) * 56);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0.5);
}
/* Read-only cell values line up with the column heading. */
.cell-input[readonly] {
  padding-inline: 0;
}

/* select2 4.1 places a tag's remove button absolutely at its left edge; give the tag text room for it.
   (The inline-search height fix now lives in vendor.css.) */
.field .select2-container .select2-selection--multiple .select2-selection__choice {
  padding-left: calc(var(--spacing) * 5);
}