/* Rules copied verbatim from ref/swapApp/index.html, the design reference. Keep values identical to it. */
:root {
  --ink: #17242e;
  --ink-soft: #4b5a66;
  --ink-faint: #8a97a1;
  --line: #d7dde1;
  --line-soft: #e8ecee;
  --page: #f4f6f7;
  --card: #ffffff;
  --accent: #0f5c66;
  --accent-soft: #e3eef0;
  --accent-text: #0b4249;
  --amber: #a3691a;
  --amber-soft: #fbf0de;
  --red: #a3392f;
  --red-soft: #fbe9e7;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { background: var(--page); color: var(--ink); font-family: var(--sans); margin: 0; line-height: 1.5; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 40px 64px; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin: 0 0 6px; }
h1 { font-size: 24px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 32px; max-width: 700px; }
.topnav { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--line-soft); }
.topnav-inner { max-width: none; margin: 0 auto; padding: 12px 40px; }
.topnav-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topnav-row.top { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; overflow-x: auto; }
.brand { grid-column: 1; font-family: var(--sans); font-size: 16px; font-weight: 700; color: #4b2e83; background: none; border: none; cursor: pointer; padding: 0; justify-self: start; text-decoration: none; }
.nav-links { grid-column: 3; display: flex; gap: 6px; flex-wrap: nowrap; justify-self: center; }
.nav-link { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--ink-soft); cursor: pointer; white-space: nowrap; text-decoration: none; }
.nav-link:hover { background: var(--line-soft); color: var(--ink); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-link.available { color: var(--accent-text); border-color: var(--line); font-weight: 600; }
.nav-link.available.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-link.unavailable, .nav-link.unavailable:hover { color: #9aa3aa; background: #f0f2f3; border-color: transparent; cursor: not-allowed; }
.signin-widget { grid-column: 5; display: flex; align-items: center; gap: 8px; justify-self: end; }
.signin-widget span { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
section { background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px; padding: 22px 24px; margin-bottom: 20px; }
section h2 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
section .hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.sample-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--ink-faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #0c4a52; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.badge.ok { background: var(--accent-soft); color: var(--accent-text); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.info { background: #e6f0fa; color: #1b5c8c; }
.badge.danger { background: var(--red-soft); color: var(--red); }
.badge.muted { background: var(--line-soft); color: var(--ink-soft); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line-soft); }
td { white-space: nowrap; }
th { color: var(--ink-faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; white-space: normal; max-width: 70px; }
.num { font-family: var(--mono); text-align: right; }
.empty { color: var(--ink-faint); font-size: 13px; padding: 8px 0; }
.note { font-size: 12px; color: var(--ink-faint); margin-top: 14px; }

/* thePlatform only: login and first setup screens, built from the section/btn/badge rules above. */
.auth-wrap { max-width: 520px; margin: 0 auto; padding: 80px 24px; }
.step-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.step-list li { display: flex; align-items: center; gap: 10px; }

/* Reference Manage Funds rules from ref/swapApp/index.html. */
.wrap:has(.funds-page) { max-width: none; }
.db-table-scroll { overflow-x: auto; }
.btn-row { font-family: var(--sans); font-size: 12.5px; font-weight: 500; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.btn-row:hover { border-color: var(--ink-faint); }
.actions-col { min-width: 112px; }
.btn-row:disabled { opacity: 0.45; cursor: not-allowed; }
.mtable td { white-space: normal; }
#fund-list-table th, #fund-list-table td { text-align: center; }
#fund-list-table th:first-child, #fund-list-table td:first-child { text-align: left; }
#fund-list-table th.aliases-col, #fund-list-table td.aliases-col { text-align: left; }
#fund-list-table th.actions-col, #fund-list-table td.actions-col { text-align: left; }
#fund-list-table .actions-col { white-space: nowrap; }
.reference-toolbar { margin-bottom: 12px; justify-content: space-between; align-items: center; }
.reference-toolbar label { font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.reference-history-heading { justify-content: space-between; align-items: center; margin-bottom: 4px; }
.reference-history-heading h2 { margin: 0; }
.reference-classes { margin: 6px 0 4px 24px; }
/* Additions must be visibly yellow or live on Tools / Info. */
.extra-tool { background: #fff4c2; border-color: #dcc35e; }
.comparison-result { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; min-width: 0; }
.nav-link.extra-tool, .nav-link.extra-tool.active { background: #fff4c2; color: #664b00; border: 1px solid #dcc35e; }
.filter-grid { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) auto; align-items: end; gap: 16px; }
.filter-grid label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.filter-grid input { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
@media (max-width: 900px) {
  .filter-grid { grid-template-columns: 1fr; }
}
.access-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.access-flash { font-size: 13px; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent-text); }
.access-flash.error { background: var(--red-soft); color: var(--red); }
.access-table td { vertical-align: top; }
.access-sub { font-size: 11.5px; color: var(--ink-faint); }
.access-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.access-checks label, .scope-grid label { font-size: 12.5px; white-space: nowrap; }
.access-scope { margin: 0 2px 2px 0; }
.access-form { display: grid; gap: 12px; justify-items: start; }
.access-form > label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.access-form input[type=text], .access-form input[type=email] { padding: 8px 10px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--card); min-width: 260px; }
.access-form .access-wide { min-width: 480px; }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; width: 100%; }
.scope-grid fieldset { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 4px; }
.scope-grid legend { font-size: 12px; font-weight: 600; padding: 0 4px; }

/* Reference Manage Swaps identity table. */
.wrap:has(.swaps-page) { max-width: none; }
#swap-list-table th, #swap-list-table td { text-align: center; }
#swap-list-table th:first-child, #swap-list-table td:first-child { text-align: left; }
#swap-list-table .swap-name-col { width: 100px; max-width: 100px; white-space: nowrap; }
#swap-list-table td.swap-name-col { text-align: left; overflow: hidden; text-overflow: ellipsis; }
#swap-list-table .fund-name-col { max-width: none; white-space: nowrap; }
#swap-list-table .broker-name-col { width: 70px; max-width: 70px; }
#swap-list-table .bb-ticker-col { width: 80px; max-width: 80px; white-space: nowrap; }
#swap-list-table .reset-type-col { width: 120px; min-width: 120px; max-width: 120px; white-space: nowrap; }
#swap-list-table .expiry-date-col { width: 100px; max-width: 100px; white-space: nowrap; }
#swap-list-table .lockedup-percent-col { width: 90px; max-width: 90px; padding-left: 0; padding-right: 0; }
#swap-list-table td.lockedup-percent-col, #swap-list-table td.interest-percent-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#swap-list-table .lockedup-reset-col { width: 80px; max-width: 80px; padding-left: 0; padding-right: 0; }
#swap-list-table .interest-percent-col { width: 120px; max-width: 120px; padding-left: 0; padding-right: 0; }
#swap-list-table .status-col { width: 65px; max-width: 65px; }
#swap-list-table .actions-col { position: relative; white-space: nowrap; }
.actions-menu { position: absolute; top: 100%; left: 0; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); min-width: 130px; padding: 4px; margin-top: 2px; }
.actions-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 6px 10px; font-size: 13px; font-family: var(--sans); color: var(--ink); border-radius: 6px; }
.actions-menu button:disabled { opacity: .45; cursor: not-allowed; }
.swap-export-panel { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.swap-export-panel label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cpty-input { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--card); color: var(--ink); }

.nav-alert-icon { width: 18px; height: 18px; vertical-align: -4px; margin-left: 4px; color: var(--amber); }

/* Reference Swap Trades table. */
#swap-trades-table tr.lot-row { background: var(--page); font-weight: 500; }
#swap-trades-table tr.lot-row:hover { background: var(--line-soft); }
#swap-trades-table td.num { text-align: center; }
#swap-trades-table th.lot-arrow-col, #swap-trades-table td.lot-arrow-col { width: 58px; }
#swap-trades-table th.lot-date-col, #swap-trades-table td.lot-date-col { width: 153px; padding-left: 5px; padding-right: 5px; }
#swap-trades-table th.orig-qty-col, #swap-trades-table td.orig-qty-col { width: 141px; padding-left: 5px; padding-right: 5px; }
#swap-trades-table th.lot-price-col, #swap-trades-table td.lot-price-col { width: 145px; padding-left: 5px; padding-right: 5px; }
#swap-trades-table th.lot-proceeds-col, #swap-trades-table td.lot-proceeds-col { width: 189px; }
#swap-trades-table th.lot-remaining-col, #swap-trades-table td.lot-remaining-col { width: 141px; }
#swap-trades-table th, #swap-trades-table td { text-align: center; }
#swap-trades-table th.entered-by-col, #swap-trades-table td.entered-by-col,
#swap-trades-table th.entered-at-col, #swap-trades-table td.entered-at-col { text-align: left; }
#swap-trades-table th.detail-type-col, #swap-trades-table td.detail-type-col { width: 58px; }
#swap-trades-table th.detail-date-col, #swap-trades-table td.detail-date-col { width: 153px; }
#swap-trades-table th.detail-qty-col, #swap-trades-table td.detail-qty-col { width: 141px; }
#swap-trades-table th.detail-spacer-col, #swap-trades-table td.detail-spacer-col { width: 0; padding-left: 0; padding-right: 0; }
#swap-trades-table th.detail-price-col, #swap-trades-table td.detail-price-col { width: 145px; }
#swap-trades-table th.detail-proceeds-col, #swap-trades-table td.detail-proceeds-col { width: 189px; }
#swap-trades-table th.entered-by-col, #swap-trades-table td.entered-by-col { width: 115px; }
#swap-trades-table th.entered-at-col, #swap-trades-table td.entered-at-col { min-width: 150px; }
.badge.info { background: #e6f0fa; color: #1b5c8c; }
.wrap:has(.trades-page) { max-width: none; }
.trades-page form label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.trade-lot-controls { margin-top: 14px; align-items: center; }
#swap-trades-table .lot-row { cursor: pointer; }

.trade-picker-row { align-items: end; }
.trades-page form .trade-picker { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.added-control-label { font-size: 12px; color: #664b00; background: #fff4c2; border-radius: 3px; padding: 0 4px; }


.import-summary { width: 100%; border-collapse: collapse; margin: 16px 0; }
.import-summary th, .import-summary td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #d5c77a; }
.import-summary th:first-child, .import-summary td:first-child { text-align: left; overflow-wrap: anywhere; }
.import-error { color: #8a1c10; font-weight: 600; overflow-wrap: anywhere; }
.record-inventory { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; }
.record-inventory > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d5c77a; padding-bottom: 6px; }
.record-inventory dt { overflow-wrap: anywhere; }
.record-inventory dd { margin: 0; font-weight: 600; }

/* Reference Holdings table. */
#holdings-table th.price-col, #holdings-table td.price-col,
#holdings-table th.quantity-col, #holdings-table td.quantity-col,
#holdings-table th.purchase-price-col, #holdings-table td.purchase-price-col,
#holdings-table th.weight-col, #holdings-table td.weight-col { text-align: center; }
#holdings-table, #pending-new-securities-table { max-height: 65vh; overflow-y: auto; }
#holdings-table th, #pending-new-securities-table th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.wrap:has(.holdings-page) { max-width: none; }
.holdings-toolbar { align-items: center; margin-bottom: 14px; }
#holdings-controls-row { gap: 14px; align-items: center; }
#holdings-controls-row label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
#holdings-subview-toggle { gap: 8px; margin-left: auto; }
#holdings-position-count-display, #holdings-fund-assets-display { font-size: 14px; }
.holdings-class { display: inline-flex; vertical-align: top; }
.holdings-class-values { display: flex; flex-direction: column; }

/* Original remaining read-only views. */
.wrap:has(.reports-page), .wrap:has(.documents-page) { max-width: none; }
.report-controls { gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.report-controls label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.documents-page .report-controls label { flex-direction: column; align-items: flex-start; }
.report-controls select { max-width: 300px; }
.cards { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.metric { background:var(--accent-soft); border-radius:8px; padding:14px 16px; }
.metric .label { font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; }
.metric .value { font-family:var(--mono); font-size:21px; font-weight:600; color:var(--ink); }
.mtm-negative { color:#b3261e; } .mtm-positive { color:#1b5c8c; }
.margin-negative { color:#b3261e; font-weight:700; } .margin-positive { color:#1b5c8c; font-weight:700; }
.discrepancy-highlight { background:#fbd8bb; border-radius:4px; } .discrepancy-highlight-faint { background:#f8fdb9; border-radius:4px; }
.combined-row { cursor:pointer; }
.reports-page tr[hidden] { display:none; }
.reports-page th.group-header { text-align:center; border-bottom:1px solid var(--line); }
.reports-page .owner-col { max-width:220px; min-width:150px; }
.swap-data-history-scroll { max-height:65vh; overflow:auto; }
.swap-data-history-header { margin-bottom:12px; font-size:15px; }
.documents-page .filename-col { max-width:320px; overflow-wrap:anywhere; }
.dropzone { display:block; border:2px dashed var(--line); border-radius:8px; padding:26px; text-align:center; color:var(--ink-soft); }
@media (max-width:700px) { .cards { grid-template-columns:repeat(2,1fr); } }

#swap-mtm-reconciliation-table .owner-col { width:240px; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
#swap-collateral-mgmt-table th, #swap-mtm-reconciliation-table th { text-align:center; }
#swap-collateral-mgmt-table th:nth-child(2), #swap-mtm-reconciliation-table th:first-child { text-align:left; }

.alert-badge { display:inline-block; background:#b3261e; color:#fff; font-size:10px; padding:1px 5px; border-radius:9px; margin-left:5px; }