.document-relations {
  margin: 0 9px 8px 40px;
  padding: 5px 10px;
  border: 1px solid #d2d6de;
  border-radius: 6px;
  background: #f8fafe;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.relation-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.relation-strip > span:first-child {
  color: #51555c;
  margin-right: 4px;
}
.document-reference {
  border: 0;
  background: transparent;
  color: #2e60c6;
  padding: 2px 3px;
  text-decoration: underline;
  box-shadow: none;
  min-height: 0;
  font-size: 12px;
}
.relation-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.relation-chip small {
  color: #a22;
}
.history-stage[data-stage='quotation'] {
  --stage-color: #2225a4;
  --stage-bg: #dfe8fd;
}
.history-stage[data-stage='requisition'] {
  --stage-color: #404b62;
  --stage-bg: #e3e8f0;
}
.history-stage[data-stage='order'] {
  --stage-color: #1f39d8;
  --stage-bg: #dee9ff;
}
.history-stage[data-stage='delivery'] {
  --stage-color: #8e4300;
  --stage-bg: #ffedd5;
}
.history-stage[data-stage='receiving'] {
  --stage-color: #326097;
  --stage-bg: #e6f2ff;
}
.history-stage[data-stage='invoice'] {
  --stage-color: #7e22ce;
  --stage-bg: #f3e8ff;
}
.history-stage[data-stage='payment'] {
  --stage-color: #166534;
  --stage-bg: #dcfce7;
}
.history-stage[data-stage='advance'] {
  --stage-color: #864d10;
  --stage-bg: #fef9c3;
}
.history-stage[data-stage='return'] {
  --stage-color: #be123c;
  --stage-bg: #e7ecf4;
}
.history-stage[data-stage='transfer'] {
  --stage-color: #115e59;
  --stage-bg: #ccfbf1;
}
.history-stage[data-stage='payroll'] {
  --stage-color: #f38908;
  --stage-bg: #e9eef6;
}
.history-stage[data-stage='journal'],
.history-stage[data-stage='other'] {
  --stage-color: #2e3950;
  --stage-bg: #f3f5f8;
}
.document-relations .history-stage,
.transaction-history-panel .data-grid .history-stage,
.transaction-history-dialog .data-grid .history-stage {
  color: var(--stage-color);
  background: var(--stage-bg);
  border: 1px solid color-mix(in srgb, var(--stage-color) 25%, transparent);
  border-radius: 6px;
  padding: 4px 7px;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
}
.history-stage[data-record-status='deleted'],
.history-stage[data-record-status='reversed'] {
  text-decoration: line-through;
}
.history-stage:hover {
  filter: brightness(0.96);
  text-decoration: underline;
}
.transaction-history-button {
  font-size: 12px;
  padding: 4px 8px;
  margin-left: auto;
}
.transaction-history-dialog {
  min-width: min(1080px, 80vw);
}
.source-reference-cell {
  white-space: nowrap;
}
.lookup-record-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  text-decoration: underline;
}
.document-reference:disabled {
  color: #848890;
  text-decoration: line-through;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid th {
  height: 35px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid td {
  height: 41px;
  padding: 8px 9px;
  font-size: 15px;
  border-bottom: 1px solid #ebeff8;
  border-right: 1px dotted #d9dde5;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid tbody tr:nth-child(odd) td {
  background: #fff;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid tbody tr:nth-child(even) td {
  background: #f5f7fb;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid .report-link {
  font: inherit;
  color: inherit;
  text-decoration: none;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid td.coa-negative,
.view[data-module='glaccount'] .coa-history-grid .data-grid td.coa-negative .report-link {
  color: #ff2525;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid tbody tr:hover td {
  background: #f2f4f8;
}
.document-relations > .return-to-source {
  margin: 0;
  padding: 2px 5px;
  font-size: 12px;
  flex: none;
}
.document-navigation {
  margin: 0 9px 0 40px;
  height: 22px;
  display: flex;
  align-items: center;
}
.document-navigation > .return-to-source {
  padding: 0;
  font-size: 12px;
}
.side-tabs .transaction-history-button {
  margin: 0;
}
.transaction-history-panel {
  min-width: 0;
  max-width: 100%;
}
.transaction-history-panel .history-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.content-card > .document-relations {
  margin: 0 0 10px;
  padding: 8px;
}
.content-card:has(> .transaction-history-panel) {
  padding: 14px;
}
.transaction-page .standard-document-header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
  gap: 0 clamp(24px, 8vw, 130px);
  padding: 6px 9px 10px 40px;
}
.standard-document-header > div {
  min-width: 0;
}
.standard-document-header .field {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.standard-document-header .document-main-fields input[data-date] {
  max-width: 258px;
}
.standard-document-header .document-main-fields .field:has(input[name='transDate']) > div {
  max-width: 258px;
}
.standard-document-header .document-number-fields {
  display: flex;
  flex-direction: column;
}
.standard-document-header .process-next {
  align-self: flex-end;
  margin: 0;
  min-height: 32px;
}
@media (max-width: 850px) {
  .transaction-page .standard-document-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 10px;
  }
  .standard-document-header .document-main-fields .field,
  .standard-document-header .document-number-fields .field {
    grid-template-columns: 90px minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .document-relations {
    margin: 5px 55px 7px 8px;
  }
  .transaction-history-button {
    margin-left: 0;
  }
  .transaction-history-dialog {
    min-width: 0;
    max-width: 90vw;
  }
}

.view[data-module='glaccount'] .coa-history-grid .data-grid td,
.view[data-module='glaccount'] .coa-history-grid .data-grid td.num {
  color: #000;
}
.view[data-module='glaccount'] .coa-history-grid .data-grid td.coa-negative {
  color: #ff2525;
}
.linked-history-card {
  display:grid; width:100%; text-align:left; color:inherit; background:transparent;
  font:inherit; cursor:pointer; transition:background-color .08s;
}
.linked-history-card .history-card-number { color:#2453d7; }
.linked-history-card:hover, .linked-history-card:focus-visible { background:#d8e6fe; }
.linked-history-card:focus-visible { outline:1px solid #789ee4; outline-offset:-1px; }