@import url("document_tool_base.css");

/* Form earnings/deductions tables — keep readable on narrow screens */
.sal-slip-page .items-table {
  table-layout: fixed;
  min-width: 0;
}

.sal-slip-page .items-table td:first-child {
  width: 62%;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--tool-form-input-size, 0.6875rem);
  color: var(--doc-ink);
  line-height: 1.4;
  padding-right: 8px;
}

.sal-slip-page .items-table td:last-child {
  width: 38%;
}

.sal-slip-page .items-table .earn-amt,
.sal-slip-page .items-table .ded-amt {
  min-width: 0;
}

/* Preview: stack header like other document tools */
.sal-slip-page .preview-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.sal-slip-page .preview-header .text-end {
  text-align: left;
  padding-top: 8px;
  border-top: 1px solid var(--doc-line);
}

.sal-slip-page .preview-notes {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Match preview footnotes to form typography */
.sal-slip-page .preview-pane .amount-words {
  font-size: var(--tool-form-input-size, 0.6875rem) !important;
  line-height: 1.45 !important;
  color: var(--doc-muted);
}

.sal-slip-page .preview-pane .amount-words strong {
  color: var(--doc-ink);
  font-size: inherit;
}

.sal-slip-page .preview-pane .preview-notes {
  font-size: var(--tool-form-label-size, 0.625rem) !important;
  line-height: 1.5 !important;
  color: var(--doc-muted);
}

.sal-slip-page .tool-foot {
  font-size: var(--tool-form-label-size, 0.625rem) !important;
  line-height: 1.45 !important;
}

.sal-slip-page .tool-foot strong {
  font-size: inherit;
}

@container doc-preview-pane (min-width: 560px) {
  .sal-slip-page .preview-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .sal-slip-page .preview-header .text-end {
    text-align: right;
    padding-top: 0;
    border-top: 0;
  }
}

@container doc-preview-pane (max-width: 520px) {
  .sal-slip-page .preview-header {
    flex-direction: column;
    align-items: stretch;
  }

  .sal-slip-page .preview-header .text-end {
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid var(--doc-line);
  }
}

@media print {
  .sal-slip-page .doc-preview {
    overflow: visible;
  }
}