/* Loan management reference layout; all values come from existing loan records. */
.loans-reference { --loan-ref-ink:#16263e; --loan-ref-muted:#7b8ba3; --loan-ref-line:#e1e9f2; --loan-ref-teal:#008f94; display:grid; gap:14px; min-width:0; color:var(--loan-ref-ink); }
.loans-reference *, .loans-reference *::before, .loans-reference *::after { box-sizing:border-box; }
.loans-reference .loan-ref-breadcrumb { display:flex; align-items:center; gap:8px; margin:0 0 7px; color:var(--loan-ref-muted); font-size:11px; font-weight:650; }
.loans-reference .loan-ref-breadcrumb > span { color:#b3c0d1; }
.loans-reference .ops-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; }
.loans-reference .ops-title-row h1 { margin:0; font-size:26px; line-height:1.25; letter-spacing:-.7px; }
.loans-reference .ops-title-row p { margin:6px 0 0; color:var(--loan-ref-muted); font-size:12px; line-height:1.5; }
.loans-reference .ops-title-row .toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.loans-reference .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:33px; padding:6px 12px; border:1px solid var(--loan-ref-line); border-radius:7px; background:#fff; color:#37475f; font:inherit; font-size:11px; font-weight:700; line-height:1.3; white-space:nowrap; box-shadow:none; cursor:pointer; }
.loans-reference .btn .icon, .loans-reference .btn svg { width:14px; height:14px; flex-shrink:0; }
.loans-reference .btn.primary { border-color:#008b91; background:linear-gradient(125deg,#00999c,#00858b); color:#fff; }
.loans-reference .btn:hover:not(:disabled) { border-color:#8bc9cb; background:#f0fafa; }
.loans-reference .btn.primary:hover:not(:disabled) { background:#007f85; }
.loans-reference button:focus-visible, .loans-reference select:focus-visible, .loans-reference input:focus-visible, .loans-reference summary:focus-visible { outline:2px solid #009398; outline-offset:3px; }
.loans-reference button:disabled { opacity:.42; cursor:default; }
.loans-reference .loan-ref-layout { display:grid; grid-template-columns:minmax(0,1fr) 262px; align-items:start; gap:12px; min-width:0; }
.loans-reference .loan-ref-main { display:grid; gap:12px; min-width:0; }
.loans-reference .loan-ref-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; min-width:0; }
.loans-reference .loan-ref-kpi { display:flex; align-items:flex-start; gap:12px; min-width:0; min-height:104px; padding:17px 15px; border:1px solid var(--loan-ref-line); border-radius:9px; background:#fff; }
.loans-reference .loan-ref-kpi.coins { border-left:3px solid #008f94; background:linear-gradient(115deg,#f0fbfa,#f7fcfc); }
.loans-reference .loan-ref-kpi > div { min-width:0; }
.loans-reference .loan-ref-kpi h2 { margin:0 0 7px; color:#7787a0; font-size:11px; line-height:1.35; font-weight:750; }
.loans-reference .loan-ref-kpi strong { display:block; font-size:clamp(18px,1.52vw,24px); font-weight:850; letter-spacing:-.6px; line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums; }
.loans-reference .loan-ref-kpi p { margin:7px 0 0; color:var(--loan-ref-muted); font-size:10px; line-height:1.4; }
.loans-reference .loan-ref-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:#eaf0fb; color:#607da7; }
.loans-reference .loan-ref-icon svg { display:block; width:22px; height:22px; }
.loans-reference .loan-ref-icon.coins { background:#dcf5f3; color:#008d91; }
.loans-reference .loan-ref-icon.interest { background:#fff4dc; color:#e99708; }
.loans-reference .loan-ref-icon.document { background:#eaf0ff; color:#537bd0; }
.loans-reference .loan-ref-forecasts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:15px 0; border:1px solid var(--loan-ref-line); border-radius:9px; background:#fff; }
.loans-reference .loan-ref-forecasts article { display:flex; align-items:center; gap:10px; min-width:0; padding:0 15px; }
.loans-reference .loan-ref-forecasts article + article { border-left:1px solid #e8eef5; }
.loans-reference .loan-ref-forecasts article > div { min-width:0; }
.loans-reference .loan-ref-forecasts .loan-ref-icon { width:35px; height:35px; flex-basis:35px; }
.loans-reference .loan-ref-forecasts .loan-ref-icon svg { width:18px; height:18px; }
.loans-reference .loan-ref-forecasts span:not(.loan-ref-icon) { display:block; margin-bottom:5px; color:var(--loan-ref-muted); font-size:10px; line-height:1.3; white-space:nowrap; }
.loans-reference .loan-ref-forecasts strong { display:block; font-size:16px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.loans-reference .loan-ref-overdue { color:#e64359; }
.loans-reference .loan-ref-card { min-width:0; padding:15px; border:1px solid var(--loan-ref-line); border-radius:9px; background:#fff; }
.loans-reference .loan-ref-card h2 { margin:0; font-size:14px; line-height:1.4; font-weight:800; }
.loans-reference .loan-ref-list { padding:12px 13px 10px; }
.loans-reference .loan-ref-list-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.loans-reference .loan-ref-list-heading > div { display:flex; align-items:center; gap:10px; }
.loans-reference .loan-ref-list-heading h2 { font-size:17px; letter-spacing:-.4px; }
.loans-reference .loan-ref-count { padding:3px 9px; border-radius:12px; background:#eef2f7; color:#6a7a92; font-size:10px; font-weight:700; }
.loans-reference .loan-ref-list-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; border-bottom:1px solid #e3ebf3; }
.loans-reference .loan-ref-tabs { display:flex; align-items:stretch; gap:2px; min-width:0; }
.loans-reference .loan-ref-tabs > button { min-height:36px; padding:8px 17px; border:0; border-bottom:2px solid transparent; border-radius:3px 3px 0 0; background:transparent; color:#7c8ba2; font:inherit; font-size:10.5px; line-height:1.3; font-weight:700; cursor:pointer; white-space:nowrap; }
.loans-reference .loan-ref-tabs > button.active { border-bottom-color:#008f94; color:#008e93; }
.loans-reference .loan-ref-search { position:relative; display:block; width:min(240px,42%); min-width:160px; margin-bottom:3px; }
.loans-reference .loan-ref-search > .icon { position:absolute; left:10px; top:50%; width:14px; height:14px; transform:translateY(-50%); color:#8393ab; pointer-events:none; }
.loans-reference .loan-ref-search .icon svg { width:14px; height:14px; }
.loans-reference .loan-ref-search input { display:block; width:100%; min-width:0; height:32px; min-height:32px; padding:0 10px 0 30px; border:1px solid var(--loan-ref-line); border-radius:6px; background:#fff; color:var(--loan-ref-ink); font:inherit; font-size:11px; box-shadow:none; }
.loans-reference .loan-ref-search input::placeholder { color:#8797ae; }
.loans-reference .loan-ref-table-wrap { width:100%; max-width:100%; overflow:auto; border:1px solid #e3ebf4; border-radius:7px; }
.loans-reference .loan-ref-table { width:100%; min-width:680px; table-layout:fixed; margin:0; border-collapse:collapse; font-size:10px; font-variant-numeric:tabular-nums; }
.loans-reference .loan-ref-table thead th { padding:11px 10px; border:0; background:#f5f8fc; color:#7d8da5; font-size:9px; line-height:1.35; font-weight:700; white-space:nowrap; text-align:left; }
.loans-reference .loan-ref-table tbody td { height:55px; padding:9px 10px; border:0; border-top:1px solid #e8eef5; background:#fff; color:#37485f; line-height:1.4; vertical-align:middle; }
.loans-reference .loan-ref-table tbody tr:hover td { background:#f7fcfc; }
.loans-reference .loan-ref-table tbody tr.is-selected td { background:#edf9f8; }
.loans-reference .loan-ref-table tbody tr.is-selected td:first-child { box-shadow:inset 3px 0 #008f94; }
.loans-reference .loan-ref-table .num { padding-right:8px; text-align:right; font-size:10px; white-space:nowrap; }
.loans-reference .loan-ref-table th.num { font-size:9px; }
.loans-reference .loan-ref-table .loan-ref-outstanding { color:#26364e; font-weight:800; }
.loans-reference .loan-ref-table .link-button { display:block; max-width:100%; min-width:0; margin:0; padding:0; overflow:hidden; font-size:10px; line-height:1.4; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.loans-reference .loan-ref-number { color:#008d91; font-weight:750; }
.loans-reference .loan-ref-lender { color:#33445b; font-weight:750; }
.loans-reference .is-selected .loan-ref-lender { color:#00868b; }
.loans-reference .loan-ref-secondary { display:block; max-width:100%; margin-top:3px; overflow:hidden; color:#8090a8; font-size:9px; line-height:1.3; white-space:nowrap; text-overflow:ellipsis; }
.loans-reference .loan-ref-due { color:#8493aa; font-size:9px; white-space:nowrap; }
.loans-reference .loan-ref-status { display:inline-block; max-width:100%; padding:4px 7px; border:1px solid #c5eedb; border-radius:12px; background:#eafbf2; color:#269563; font-size:9px; line-height:1.2; font-weight:650; white-space:nowrap; }
.loans-reference .loan-ref-status.partially_repaid { border-color:#ffdf9b; background:#fff8e7; color:#d99021; }
.loans-reference .loan-ref-status.repaid, .loans-reference .loan-ref-status.draft { border-color:#e6ebf2; background:#edf1f6; color:#7d8ba0; }
.loans-reference .loan-ref-status.overdue, .loans-reference .loan-ref-status.cancelled { border-color:#ffd5db; background:#fff0f2; color:#df4c63; }
.loans-reference .loan-ref-row-actions { display:flex; align-items:center; gap:6px; }
.loans-reference .loan-ref-repay-button { min-height:31px; padding:5px 9px; border-color:#8dc8ca; color:#008d93; font-size:10px; }
.loans-reference .loan-ref-repay-button.is-repaid { border-color:#d3dce7; color:#6b7b94; }
.loans-reference .loan-ref-menu { position:relative; flex:0 0 20px; margin-left:auto; }
.loans-reference .loan-ref-menu > summary { display:flex; align-items:center; justify-content:center; min-height:28px; padding:0; border:0; color:#7e90aa; font-size:14px; line-height:1; font-weight:900; cursor:pointer; list-style:none; }
.loans-reference .loan-ref-menu > summary::-webkit-details-marker { display:none; }
.loans-reference .loan-ref-menu > div { display:grid; gap:3px; width:132px; padding:7px; border:1px solid var(--loan-ref-line); border-radius:8px; background:#fff; box-shadow:0 7px 20px #19344f16; }
.loans-reference .loan-ref-menu:not([open]) > div { display:none; }
.loans-reference .loan-ref-menu[open] { flex:1 0 132px; }
.loans-reference .loan-ref-menu > div > button { display:block; width:100%; padding:7px; border:0; border-radius:5px; background:transparent; color:#426079; font:inherit; font-size:10px; text-align:left; cursor:pointer; }
.loans-reference .loan-ref-menu > div > button:hover { background:#eef7f7; }
.loans-reference .loan-ref-menu > div > button.danger { color:#df4c63; }
.loans-reference .loan-ref-empty { padding:25px 10px; }
.loans-reference .loan-ref-list-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:10px; color:#8493aa; font-size:10px; }
.loans-reference .loan-ref-pagination { display:flex; align-items:center; gap:6px; }
.loans-reference .loan-ref-pagination select { min-width:76px; min-height:29px; padding:4px 8px; border:1px solid var(--loan-ref-line); border-radius:6px; background:#fff; color:#34465f; font:inherit; font-size:10px; }
.loans-reference .loan-ref-page-arrow { width:24px; min-height:28px; padding:0; border:0; font-size:21px; color:#879ab6; }
.loans-reference .loan-ref-page { min-width:27px; min-height:28px; padding:4px 7px; border:0; border-radius:7px; background:transparent; color:#7b8ca4; font:inherit; font-size:10px; cursor:pointer; }
.loans-reference .loan-ref-page.active { color:#fff; background:linear-gradient(135deg,#00a2a5,#00898e); }
.loans-reference .loan-ref-aside { display:grid; align-content:start; gap:12px; min-width:0; }
.loans-reference .loan-ref-selection { padding:16px 15px 11px; }
.loans-reference .loan-ref-aside-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.loans-reference .loan-ref-aside-heading h2 { font-size:13px; }
.loans-reference .loan-ref-close { display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:3px; border:0; border-radius:5px; background:transparent; color:#8b9ab0; cursor:pointer; }
.loans-reference .loan-ref-close .icon, .loans-reference .loan-ref-close svg { display:block; width:15px; height:15px; }
.loans-reference .loan-ref-selected-title { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:18px; }
.loans-reference .loan-ref-selected-title h3 { min-width:0; margin:0; font-size:21px; line-height:1.25; letter-spacing:-.5px; overflow-wrap:anywhere; }
.loans-reference .loan-ref-selected-number { margin:4px 0 16px; color:#7f8fa7; font-size:11px; font-weight:650; }
.loans-reference .loan-ref-selected-balance { display:grid; gap:8px; margin-bottom:13px; padding:16px; border-radius:8px; background:linear-gradient(120deg,#e8f8f6,#eefafa); }
.loans-reference .loan-ref-selected-balance > span { color:#008b90; font-size:11px; font-weight:750; }
.loans-reference .loan-ref-selected-balance > strong { color:#15283f; font-size:24px; line-height:1.1; letter-spacing:-.65px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.loans-reference .loan-ref-detail-lines { display:grid; gap:0; margin:0; }
.loans-reference .loan-ref-detail-lines > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #edf1f7; font-size:11px; line-height:1.3; }
.loans-reference .loan-ref-detail-lines > div:last-child { border-bottom:0; }
.loans-reference .loan-ref-detail-lines dt { flex-shrink:0; color:#8998ae; }
.loans-reference .loan-ref-detail-lines dd { min-width:0; margin:0; color:#35465f; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.loans-reference .loan-ref-repay { width:100%; margin-top:16px; min-height:38px; }
.loans-reference .loan-ref-contract-link { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:33px; margin-top:3px; padding:4px; border:0; background:transparent; color:#069198; font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
.loans-reference .loan-ref-selection-empty, .loans-reference .loan-ref-schedule-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; min-height:166px; color:#8b9bb2; text-align:center; }
.loans-reference .loan-ref-selection-empty > p, .loans-reference .loan-ref-schedule-empty > p { margin:0; color:#8797af; font-size:11px; line-height:1.5; }
.loans-reference .loan-ref-schedule { min-height:214px; padding:17px 15px; }
.loans-reference .loan-ref-schedule-empty .loan-ref-icon { width:42px; height:42px; border-radius:0; background:transparent; color:#8396b3; }
.loans-reference .loan-ref-schedule-empty .loan-ref-icon svg { width:33px; height:33px; }
.loans-reference .loan-ref-text-button { display:flex; gap:3px; align-items:center; padding:2px; border:0; background:transparent; color:#008f94; font:inherit; font-size:10px; font-weight:650; cursor:pointer; }
.loans-reference .loan-ref-schedule-list { display:grid; gap:0; max-height:400px; margin-top:12px; overflow:auto; }
.loans-reference .loan-ref-schedule-row { display:grid; grid-template-columns:1fr auto; gap:4px 9px; width:100%; padding:10px 0; border:0; border-bottom:1px solid #edf1f6; background:transparent; color:#4d637f; font:inherit; font-size:10px; text-align:left; cursor:pointer; }
.loans-reference .loan-ref-schedule-row strong { font-weight:650; }
.loans-reference .loan-ref-schedule-row small { grid-column:1 / -1; color:#8797ae; font-size:9px; }
.loans-reference .loan-ref-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:801px) {
  .loans-reference .loan-ref-table-wrap:has(.loan-ref-menu[open]) { overflow:visible; }
  .loans-reference .loan-ref-menu[open] { flex:0 0 20px; }
  .loans-reference .loan-ref-menu > div { position:absolute; top:100%; right:0; z-index:8; }
}
@media (max-width:1180px) {
  .loans-reference .loan-ref-layout { grid-template-columns:minmax(0,1fr) 240px; }
  .loans-reference .loan-ref-kpi { gap:9px; padding:14px 11px; }
  .loans-reference .loan-ref-kpi .loan-ref-icon { width:35px; height:35px; flex-basis:35px; }
  .loans-reference .loan-ref-kpi strong { font-size:18px; }
  .loans-reference .loan-ref-forecasts article { gap:7px; padding:0 10px; }
  .loans-reference .loan-ref-forecasts .loan-ref-icon { width:29px; height:29px; flex-basis:29px; }
  .loans-reference .loan-ref-forecasts span:not(.loan-ref-icon) { font-size:9px; }
  .loans-reference .loan-ref-tabs > button { padding:8px 12px; }
  .loans-reference .loan-ref-search { width:42%; }
}
@media (max-width:1000px) {
  .loans-reference .loan-ref-layout { grid-template-columns:minmax(0,1fr); }
  .loans-reference .loan-ref-aside { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .loans-reference .loan-ref-selected-balance > strong { font-size:23px; }
}
@media (max-width:800px) {
  body.mw-mobile #app #main .loans-reference { display:grid; gap:12px; min-width:0; }
  .loans-reference .ops-title-row { align-items:flex-start; gap:10px; }
  .loans-reference .ops-title-row h1 { font-size:23px; }
  .loans-reference .ops-title-row p { max-width:225px; font-size:11px; }
  .loans-reference .ops-title-row .toolbar { justify-content:flex-end; }
  .loans-reference .loan-ref-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .loans-reference .loan-ref-kpi:first-child { grid-column:1 / -1; }
  .loans-reference .loan-ref-kpi { min-height:94px; }
  .loans-reference .loan-ref-kpi strong { font-size:19px; }
  .loans-reference .loan-ref-kpi:first-child strong { font-size:25px; }
  .loans-reference .loan-ref-forecasts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 0; padding:14px 0; }
  .loans-reference .loan-ref-forecasts article:nth-child(3) { border-left:0; }
  .loans-reference .loan-ref-list-toolbar { gap:7px; }
  .loans-reference .loan-ref-search { order:-1; width:100%; }
  .loans-reference .loan-ref-aside { grid-template-columns:minmax(0,1fr); }
  .loans-reference .loan-ref-list-heading h2 { font-size:16px; }
  .loans-reference .loan-ref-list-footer { align-items:flex-start; }
  .loans-reference .loan-ref-pagination { gap:4px; }
}