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

/* --- fnf-pip-adhoc ------------------------------------------------------------------ */

/* A select sitting in a .filter-bar next to the search box (status filter). */
.filter-bar > .filter-select {
  flex: 0 0 auto;
  width: auto;
  min-width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 8.5);
}

/* --- vault-story-inout: document vault, employee story, personal in-out report -------------------- */

/* A filter row's trailing button, aligned with the inputs beside it. */
.vault-filter-action {
  justify-content: flex-end;
}

/* Letter form beside its live preview. */
.vault-letter-layout {
  display: grid;
  gap: calc(var(--spacing) * 6);
  align-items: start;
}
@media (min-width: 1024px) {
  .vault-letter-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Server-rendered letter shown as a sheet of paper (stays white in dark mode via .light). */
.vault-letter-paper {
  max-height: calc(var(--spacing) * 160);
  overflow-y: auto;
  padding: calc(var(--spacing) * 6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
}

/* Signature drawing surface. */
.vault-signature-pad {
  display: flex;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.vault-signature-pad canvas {
  touch-action: none;
  cursor: crosshair;
}

/* Employee story: a profile screen opened in its own tab. */
.story-report {
  max-width: calc(var(--spacing) * 320);
  margin: 0 auto;
}
.story-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 5);
}
.story-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.story-score {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.story-score-value {
  padding-left: calc(var(--spacing) * 4);
  border-left: 1px solid var(--border);
}
.story-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Selectable card in a grid of choices (e.g. a report's data domain). */
.option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--default-transition-duration), background-color var(--default-transition-duration);
}
.option-card:hover {
  border-color: var(--border-strong);
}
.option-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.option-card.selected {
  border-color: var(--brand);
  background: var(--accent);
}
.option-card-icon {
  color: var(--muted-foreground);
}
.option-card.selected .option-card-icon {
  color: var(--brand-ink);
}
.option-card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.option-card-description {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

/* Scrolling list of pickable rows (field picker, selected columns). */
.pick-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.5);
  max-height: calc(var(--spacing) * 120);
  overflow-y: auto;
}
.pick-group {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2.5) calc(var(--spacing) * 1);
  color: var(--muted-foreground);
}
.pick-group:first-child {
  padding-top: 0;
}
.pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  min-height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 2.5);
  border-radius: var(--radius-md);
  font-size: var(--text-control);
  text-align: left;
  color: var(--foreground);
  cursor: pointer;
}
.pick-item:hover {
  background: var(--muted);
}
.pick-item > .icon {
  flex: none;
  color: var(--muted-foreground);
}
.pick-item.in-use {
  color: var(--muted-foreground);
}
.pick-item.in-use > .icon {
  color: var(--brand-ink);
}

/* One selected report column: name · heading · aggregate · remove. */
.column-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) calc(var(--spacing) * 32) auto;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1.5) 0;
  border-bottom: 1px solid var(--line);
}
.column-row:last-child {
  border-bottom: 0;
}
.column-row-name {
  overflow: hidden;
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* One filter condition: field · operator · value · remove. */
.condition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
@media (max-width: 640px) {
  .column-row,
  .condition-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* A results table that scrolls inside the viewport instead of growing the page. */
.preview-scroll {
  max-height: calc(100dvh - var(--spacing) * 90);
  overflow: auto;
}

/* --- bonus-expense-appraisal: bonus forms, expense claims, appraisal, employee advances -------- */

/* A secondary dialog action kept apart from Cancel/Save, at the start of the footer. */
@media (min-width: 640px) {
  .dialog-footer > .dialog-footer-start {
    margin-right: auto;
  }
}

/* A grid shown inside a dialog: hairline frame, no card. */
.dialog-grid {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Editable line items (a table whose cells are inputs). */
.expense-lines td {
  vertical-align: middle;
}
.expense-lines .input {
  min-width: calc(var(--spacing) * 28);
  height: calc(var(--spacing) * 8);
}
.expense-lines input[type="file"].input {
  min-width: calc(var(--spacing) * 52);
  height: auto;
}
.expense-lines tfoot td {
  border-top: 1px solid var(--line);
}

/* --- Code + lookup pair: a short code input beside the select it keeps in sync ------------ */
.code-lookup {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 24) minmax(0, 1fr);
  gap: calc(var(--spacing) * 2);
}

/* --- Codes typed in capitals (TAN, GSTIN, PAN) --------------------------------------------- */
/* A worksheet page inside the report layout's canvas (screen only; centered, readable width). */
.worksheet {
  width: 100%;
  max-width: var(--container-6xl);
  margin-left: auto;
  margin-right: auto;
}
/* Three key/value pairs per row. */
.dl.dl-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A short table that scrolls inside its card instead of growing it. */
.table-scroll-sm {
  max-height: calc(var(--spacing) * 60);
  overflow-y: auto;
}

.worksheet {
  max-width: var(--content-max);
}
.vault-filter-action {
  align-items: flex-start;
}