/* Shared, opt-in records template: heading, filters, action strip, grid, footer.
   Keep page-specific rules in finance-page.css; legacy records do not opt in. */
.workspace-records {
  --toolbar-bg: var(--workspace-navy, #142735);
  --input-bg: #fff;
  --records-ink: #243c4c;
  --records-muted: #607686;
  --records-surface: #fff;
  --records-alternate: #f1f5f7;
  --records-head: #d2e5f2;
  --records-line: #dbe5ed;
  --records-hover: #e6f3f8;
  --records-summary: #e7f2e3;
  --records-summary-ink: #315839;
  --records-navy: var(--workspace-navy, #142735);
  --records-accent: #1685b5;
  color: var(--records-ink);
  font-size: 14px;
}
html[data-theme="dark"] .workspace-records {
  --records-ink: #dfebf2;
  --records-muted: #a4bbca;
  --records-surface: #172d3c;
  --records-alternate: #1b3445;
  --records-head: #234659;
  --records-line: #34505f;
  --records-hover: #254959;
  --records-summary: #1b3b36;
  --records-summary-ink: #bce4c9;
  --records-accent: #40c7ec;
}
.workspace-records.financial-page-card {
  display: block;
  width: 100%; min-width: 0; max-width: 100%;
  padding: 0; margin: 0;
  border: 1px solid var(--records-line); border-radius: 5px;
  box-shadow: none; background: var(--records-surface);
  overflow: visible;
}
.workspace-records .records-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 49px; padding: 9px 12px;
  background: var(--records-navy); color: #fff;
  border-bottom: 1px solid #38505f;
  border-radius: 4px 4px 0 0;
}
.workspace-records .records-heading h2 {margin: 0; color: inherit; font-size: 19px; font-weight: 700; line-height: 1.5;}
.workspace-records .records-heading-title {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0;}
.workspace-records .records-eyebrow {order: 1; padding-inline-start: 10px; border-inline-start: 1px solid #486272; font-size: 11px; color: #a9c5d5;}
.workspace-records .financial-panel {margin: 0; overflow: visible;}
.workspace-records .toolbar.records-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 6px 12px;
  margin: 0 !important; border: 0; border-radius: 0;
  background: var(--records-navy); color: #fff; overflow: visible;
}
.workspace-records .records-filters {margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; width: 100%;}
.workspace-records .records-filters[open] {grid-column: 1 / -1;}
.workspace-records .records-filters[open] + .records-actions {grid-column: 1 / -1; justify-content: flex-end;}
.workspace-records .records-filters > summary {
  display: flex; align-items: center; gap: 6px; list-style: none;
  padding: 5px 0; width: max-content; min-height: 32px; font-size: 12px;
  color: #d6e5ef; cursor: pointer; border: 0; background: transparent; float: none;
}
.workspace-records .records-filters > summary::-webkit-details-marker {display: none;}
.workspace-records .records-filters > summary::after {display: none;}
.workspace-records .records-filter-chevron {transition: transform .16s; margin-inline-start: 5px;}
.workspace-records .records-filters[open] .records-filter-chevron {transform: rotate(180deg);}
.workspace-records .records-filters:not([open]) > .filters {display: none !important;}
.workspace-records .records-filters .filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: end; gap: 9px; width: 100%; padding: 5px 0 8px; margin: 0;
  background: transparent; border: 0; min-width: 0;
}
.workspace-records .records-filters .field {display: grid; gap: 5px; min-width: 0;}
.workspace-records .records-filters label {font-size: 11px; color: #c6d8e3; font-weight: 500;}
.workspace-records .records-toolbar .records-filters :is(input, select) {
  width: 100%; min-width: 0; min-height: 38px; height: 38px;
  padding: 6px 10px; font-family: inherit; font-size: 12px;
  border: 1px solid #c6d4de; border-radius: 5px;
  background: #fff; color: #243c4c; box-shadow: none;
}
.workspace-records .records-filters input::placeholder {color: #72818c;}
.workspace-records .finance-filter-summary {color: #a5d6e9; font-size: 11px; font-weight: 400;}
.workspace-records .records-actions {display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; min-width: 0; min-height: 32px;}
.workspace-records .records-actions > .actions {display: flex; flex-wrap: wrap; gap: 5px; padding-inline-start: 7px; margin-inline-start: 2px; border-inline-start: 1px solid #476071;}
.workspace-records .records-icon {display: inline-block; width: 17px; height: 17px; flex: 0 0 17px; vertical-align: middle;}
.workspace-records .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 11px; font-family: inherit; font-size: 12px;
  line-height: 1.5; font-weight: 600; border: 1px solid var(--records-line);
  border-radius: 4px; background: var(--records-surface); color: var(--records-ink);
  box-shadow: none; text-decoration: none;
}
.workspace-records .records-actions .btn {background: #223e50; color: #edf7fc; border-color: #577180;}
.workspace-records .btn.primary, .workspace-records .records-actions .btn.primary {background: #1182b2; border-color: #36abd3; color: #fff;}
.workspace-records .records-actions .btn:hover {background: #2a5066;}
.workspace-records .records-actions .btn.primary:hover {background: #0c6c97;}
.workspace-records .records-actions .records-add {background: #069798; border-color: #25c3be; color: #fff; order: -1;}
.workspace-records .records-actions .btn.records-icon-button {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px;
  padding: 5px; gap: 0; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: #e3f2f9; flex: 0 0 32px;
}
.workspace-records .records-icon-button .records-icon {width: 20px; height: 20px; flex-basis: 20px;}
.workspace-records .records-actions .btn.records-icon-button:hover,
.workspace-records .records-actions .btn.records-icon-button:focus-visible {background: #2b4e62; border-color: #66889b; color: #fff;}
.workspace-records .records-actions .btn.records-icon-button.records-add {color: #65e3eb; border-color: #3c788a; background: #1c3b4b;}
.workspace-records .records-action-label {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.workspace-records .btn:disabled {opacity: .45; cursor: not-allowed;}
.workspace-records :is(button, input, select, summary, a):focus-visible {outline: 2px solid #05a7d6; outline-offset: 3px;}
.workspace-records .finance-note {margin: 0; padding: 8px 12px; font-size: 12px; color: var(--records-muted); border-bottom: 1px solid var(--records-line);}
.workspace-records .finance-note:empty {display: none;}
.workspace-records .finance-summary-fold .finance-note {border: 0; background: var(--records-surface);}
.workspace-records .table-panel {margin-top: 0 !important; border: 0; border-radius: 0; padding: 0; box-shadow: none; overflow: visible; background: var(--records-surface);}
.workspace-records .finance-table-wrap {width: 100%; max-width: 100%; min-width: 0; border: 0; border-radius: 0; overflow: auto; scrollbar-width: thin;}
.workspace-records .records-table-meta {position: sticky; inset-inline-start: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; width: 100%; color: var(--records-muted); background: var(--records-surface); font-size: 11px; border-bottom: 1px solid var(--records-line);}
.workspace-records .table-h-scroll {max-width: 100%; border: 0; border-radius: 0; margin: 0; padding: 0;}
.workspace-records .finance-table {border-collapse: separate; border-spacing: 0; width: 100%; table-layout: auto; margin: 0; color: var(--records-ink);}
.workspace-records .finance-table :is(th, td) {
  padding: 10px 11px; font-size: 12px; line-height: 1.65; font-weight: 400;
  text-align: right; vertical-align: middle; border: 0;
  border-bottom: 1px solid var(--records-line); border-inline-end: 1px solid var(--records-line);
  background: var(--records-surface); color: var(--records-ink);
}
.workspace-records .finance-table th {padding-block: 10px; background: var(--records-head); color: var(--records-ink); font-size: 12px; font-weight: 700; white-space: nowrap;}
.workspace-records .finance-table td {word-break: normal; overflow-wrap: normal;}
.workspace-records .finance-table tbody tr:nth-child(even) > td {background: var(--records-alternate);}
.workspace-records .finance-table tbody tr:hover > td {background: var(--records-hover);}
.workspace-records .finance-table td.wrap {min-width: 150px; max-width: 250px; white-space: normal; overflow-wrap: anywhere;}
.workspace-records .finance-table .dropdown .trigger {font-size: 12px; min-width: 76px; min-height: 32px; border: 1px solid #a9becd; border-radius: 4px; padding: 5px 9px; background: var(--records-surface); color: var(--records-ink);}
.workspace-records .finance-table .dropdown .menu {background: var(--records-surface); border-color: var(--records-line); color: var(--records-ink);}
.workspace-records .finance-table .dropdown .menu button {color: var(--records-ink); font-size: 13px; min-height: 36px;}
.workspace-records .finance-table .dropdown .menu button.danger {color: #ce3947;}
.workspace-records .finance-table .dropdown .menu button:hover {background: var(--records-hover);}
.workspace-records .finance-summary-fold {margin: 0; border: 0; border-bottom: 1px solid var(--records-line); border-radius: 0; background: var(--records-summary); color: var(--records-summary-ink);}
.workspace-records .finance-summary-fold > summary {padding: 9px 12px; min-height: 42px; gap: 10px; justify-content: flex-start;}
.workspace-records .finance-summary-fold > summary::after {margin-inline-start: auto; border: 0; background: transparent;}
.workspace-records .finance-summary-head-copy h3 {font-size: 12px; font-weight: 600;}
.workspace-records .finance-summary-chip {min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 11px; font-weight: 400;}
.workspace-records .finance-summary-fold .finance-grid {gap: 10px; padding: 10px 12px;}
.workspace-records .total-box {border: 1px solid var(--records-line); border-radius: 4px; box-shadow: none; padding: 12px; background: var(--records-surface); color: var(--records-ink);}
.workspace-records .total-box .muted {color: var(--records-muted);}
.workspace-records .finance-pager {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 12px; margin: 0; background: var(--records-surface); color: var(--records-muted); font-size: 12px;
}
.workspace-records .finance-pager .pager-actions {display: flex; align-items: center; gap: 0; margin-inline-start: auto;}
.workspace-records .finance-pager .btn {border-radius: 0; min-width: 68px;}
.workspace-records .records-page-position {display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; background: #257ead; color: #fff; font-variant-numeric: tabular-nums;}
.workspace-records .finance-page-size-field {display: flex; flex-direction: row; align-items: center; gap: 7px;}
.workspace-records .finance-page-size-field label {font-size: 11px; color: var(--records-muted); white-space: nowrap;}
.workspace-records .finance-page-size-field select {min-width: 65px; width: 72px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--records-line); border-radius: 4px; background: var(--records-surface); color: var(--records-ink); font: inherit;}
.workspace-records .finance-action-card {margin: 0 !important; padding: 12px; border: 0; border-bottom: 1px solid var(--records-line); border-radius: 0; background: var(--records-surface); box-shadow: none;}
.workspace-records .finance-action-copy h3 {font-size: 15px;}
.workspace-records .finance-action-copy p {font-size: 12px;}
.workspace-records .finance-open-btn {min-height: 36px; width: auto;}
.workspace-records .fde-table .fde-person {min-width: 95px; max-width: 150px;}
.workspace-records .fde-table .fde-timestamp {font-variant-numeric: tabular-nums; font-size: 12px;}
.workspace-records .fde-table .fde-timestamp small {font-size: 11px; color: var(--records-muted);}
.workspace-records .fde-table .fde-no-modification {color: var(--records-muted); font-size: 11px;}
body.workspace-shell .finance-modal {
  border-radius: 7px;
  border: 1px solid var(--workspace-border);
  background: var(--workspace-surface);
  color: var(--workspace-text);
  box-shadow: 0 18px 70px #08162245;
}
body.workspace-shell .finance-modal .modal-header {
  padding: 13px 16px;
  background: var(--workspace-navy);
  color: #fff;
  border-bottom: 1px solid #375667;
}
body.workspace-shell .finance-modal .modal-header h3 {color: #fff; font-size: 18px; font-weight: 600;}
body.workspace-shell .finance-modal .modal-header :is(.close, .modal-subtitle) {color: #c8dde8;}
body.workspace-shell .finance-modal .modal-header .close {width: 34px; height: 34px; border: 1px solid #577383; border-radius: 4px;}
body.workspace-shell .finance-modal :is(input, select, textarea) {
  min-height: 42px; border: 1px solid var(--workspace-border); border-radius: 4px;
  background: var(--workspace-surface); color: var(--workspace-text); font-size: 13px;
}
body.workspace-shell .finance-modal .field label {font-size: 12px; font-weight: 600; color: var(--workspace-text);}
body.workspace-shell .finance-modal .finance-modal-note {padding: 10px 12px; border: 1px solid var(--workspace-border); border-radius: 4px; background: var(--workspace-bg); color: var(--workspace-muted); font-size: 12px;}
body.workspace-shell .finance-modal .finance-modal-actions {padding-top: 12px; border-top: 1px solid var(--workspace-border);}
body.workspace-shell .finance-modal .btn {min-height: 40px; padding: 8px 16px; border-radius: 4px; font-size: 13px;}
body.workspace-shell .finance-modal .btn.primary {background: #1182b2; border-color: #1182b2; color: #fff;}
@media (min-width: 769px) {
  .workspace-records .fde-table {min-width: 1380px; table-layout: auto;}
  .workspace-records .fde-table :is(th, td):first-child {min-width: 55px; white-space: nowrap; text-align: center;}
  .workspace-records .fde-table :is(th, td):nth-child(2), .workspace-records .fde-table :is(th, td):nth-child(3) {min-width: 120px; max-width: 170px; white-space: normal;}
  .workspace-records .fde-table :is(th, td):nth-child(4) {min-width: 110px; white-space: nowrap; font-variant-numeric: tabular-nums;}
  .workspace-records .fde-table :is(th, td):nth-child(5) {min-width: 70px; white-space: nowrap;}
  .workspace-records .fde-table th:last-child, .workspace-records .fde-table td:last-child {position: sticky; inset-inline-end: 0; z-index: 2; box-shadow: 2px 0 3px #1427350c;}
  .workspace-records .fde-table th:last-child {z-index: 3;}
  .workspace-records .fde-table td:last-child:has(.dropdown.open),
  .workspace-records .fde-table td:last-child:has(.dropdown:hover),
  .workspace-records .fde-table td:last-child:focus-within {z-index: 10;}
}
@media (max-width: 768px) {
  .workspace-records .records-heading {min-height: 48px; padding: 9px 10px;}
  .workspace-records .records-heading h2 {font-size: 17px;}
  .workspace-records .records-eyebrow {font-size: 10px;}
  .workspace-records .toolbar.records-toolbar {gap: 4px 6px; padding: 5px 8px;}
  .workspace-records .records-filters > summary {min-height: 44px; width: max-content; max-width: 100%; flex-wrap: wrap; font-size: 11px; gap: 4px;}
  .workspace-records .records-filters .filters {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .workspace-records .records-filters :is(input, select) {min-height: 42px; height: 42px; font-size: 13px;}
  .workspace-records .records-actions {gap: 2px;}
  .workspace-records .records-actions > .actions {margin-inline-start: 2px; padding-inline-start: 3px; gap: 2px;}
  .workspace-records .records-actions .btn.records-icon-button {width: 40px; height: 42px; min-width: 40px; min-height: 42px; max-width: 40px; flex-basis: 40px; padding: 9px;}
  .workspace-records .finance-pager {align-items: center; flex-direction: row; justify-content: center;}
  .workspace-records .finance-pager > .muted {width: 100%; text-align: center;}
  .workspace-records .finance-pager .pager-actions {margin: 0; width: auto;}
  .workspace-records .finance-pager .btn, .workspace-records .records-page-position {min-height: 42px;}
  .workspace-records .fde-table, .workspace-records .fde-table tbody {display: block; width: 100%; min-width: 0;}
  .workspace-records .fde-table thead {display: none;}
  .workspace-records .fde-table tbody tr {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px; border: 1px solid var(--records-line); border-radius: 5px; overflow: visible;}
  .workspace-records .fde-table tbody td {display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: none; min-height: 56px; padding: 9px; white-space: normal; overflow-wrap: anywhere; text-align: right;}
  .workspace-records .fde-table tbody td::before {content: attr(data-label); display: block; color: var(--records-muted); font-size: 10px; font-weight: 500;}
  .workspace-records .fde-table tbody td:last-child {grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 0;}
  .workspace-records .fde-table tbody td[colspan] {grid-column: 1 / -1; min-height: 90px; align-items: center; justify-content: center;}
  .workspace-records .fde-table .fde-person {min-width: 0; max-width: 100%;}
  .workspace-records .fde-table .dropdown .trigger {min-height: 40px;}
}
@media (prefers-reduced-motion: reduce) {.workspace-records * {scroll-behavior: auto; transition: none;}}
@media print {
  .workspace-records .records-toolbar, .workspace-records .finance-pager {display: none;}
  .workspace-records .finance-table th:last-child, .workspace-records .finance-table td:last-child {position: static;}
}