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

/* Read-only value shown in a control-sized box, e.g. a date/time format preview. */
.format-preview {
  display: flex;
  align-items: center;
  min-height: calc(var(--spacing) * 9);
  padding: 0 calc(var(--spacing) * 3);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-control);
  white-space: nowrap;
}

/* A select locked in edit mode (pointer events are turned off by the page script). */
.readonly-select {
  background: var(--muted);
  color: var(--muted-foreground);
}

/* A table inside a form section that scrolls past a fixed height. */
.scroll-panel {
  max-height: calc(var(--spacing) * 64);
  overflow-y: auto;
}

/* Collapsible employee row on the KPI setup page: a full-width header button over a body. */
.kpi-employee-toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  width: 100%;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.kpi-employee-toggle:hover {
  background: var(--muted);
}
.kpi-employee-chevron {
  color: var(--muted-foreground);
  transition: transform var(--default-transition-duration);
}
.kpi-employee-toggle:not(.collapsed) .kpi-employee-chevron {
  transform: rotate(180deg);
}
.kpi-employee-body {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
}