/* Loans portfolio (/apps/rsm/loans/) — layout A "risk cockpit", 2026-10-21.
   Loaded after static/sales/dashboard.css (shared so-* rules) and the CSM
   page frame; same one-screen behaviour as the Collections overview: the
   main grid takes the rest of the viewport (--lno-main-h), panels scroll
   inside themselves. Below 1100px everything stacks and the page scrolls. */
.lno-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lno-seg a { padding: 4px 10px; border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lno-seg a.is-on { background: var(--brand); color: var(--on-brand, #fff); }

/* Days-past-due colours: current → over 360 days. */
.lno-age-0 { background: var(--ok); } .lno-age-1 { background: #8aa83a; } .lno-age-2 { background: var(--chart-cat-4, #eda100); }
.lno-age-3 { background: var(--chart-cat-2, #eb6834); } .lno-age-4 { background: var(--crit); } .lno-age-5 { background: #8c2a20; }
.lno-age-6 { background: #5a1913; }

.lno-dpd { display: flex; gap: 2px; height: 38px; border-radius: var(--radius-sm); overflow: hidden; }
.lno-dpd__seg { flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-2);
  color: #fff; text-decoration: none; font-size: var(--text-2xs); line-height: 1.25; white-space: nowrap; overflow: hidden; }
.lno-dpd__seg b { font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.lno-dpd__seg:hover { filter: brightness(1.1); }

.lno-main { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3); }
.lno-main > .chart-panel, .lno-side { min-height: 0; min-width: 0; }
.lno-work { overflow: hidden; }
.lno-work .so-tabs { flex: none; margin: calc(-1 * var(--space-1)) 0 var(--space-1); }
.lno-work .so-tab { padding-inline: var(--space-2); gap: 4px; white-space: nowrap; background: none; border-top: 0; border-inline-start: 0; border-inline-end: 0; cursor: pointer; font-family: inherit; }
.lno-panels { flex: 1; min-height: 0; overflow: auto; }
.lno-list[hidden] { display: none; }
.lno-row { display: flex; align-items: center; gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: inherit; text-decoration: none; }
.lno-row:last-child { border-bottom: none; }
.lno-row:hover b { color: var(--brand); }
.lno-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-strong); font-weight: 700; font-size: var(--text-xs); }
.lno-ico--crit { background: var(--crit-bg); color: var(--crit-fg); }
.lno-ico--warn { background: var(--warn-bg); color: var(--warn-fg); }
.lno-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lno-row__main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lno-row__main span { font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lno-when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lno-when--crit { color: var(--crit-fg); font-weight: 600; }
.lno-when--warn { color: var(--warn-fg); font-weight: 600; }
.lno-foot { flex: none; display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.lno-foot span { margin-inline-end: auto; }
.lno-foot a { font-weight: 600; color: var(--brand); text-decoration: none; }

.lno-side { display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; }
.lno-side > .chart-panel { flex: none; }
.lno-stack { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunken); }
.lno-stack i { display: block; flex: 1 1 0; min-width: 4px; }
.lno-s1 { background: var(--ok); } .lno-s2 { background: var(--chart-cat-4, #eda100); } .lno-s3 { background: var(--crit); }
.lno-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.lno-table th { font-size: var(--text-2xs); font-weight: 600; color: var(--text-subtle); text-align: start; padding: 4px 0; }
.lno-table td { padding: 3px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.lno-table .num { text-align: end; padding-inline-start: var(--space-2); }
.lno-trend { min-height: 0; }
.lno-cols { height: 84px; display: flex; gap: var(--space-2); align-items: stretch; }
.lno-cols div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; font-size: var(--text-2xs); color: var(--text-subtle); min-width: 0; }
.lno-cols i { display: block; width: 100%; min-height: 2px; background: var(--crit); opacity: .75; border-radius: 3px 3px 0 0; }
.lno-cols b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lno-cols span { text-transform: capitalize; }
.lno-note { margin: var(--space-1) 0 0; font-size: var(--text-2xs); color: var(--text-subtle); }
.lno-prod { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 54px minmax(0, 1fr); gap: var(--space-2); align-items: center;
  padding: 5px 0; font-size: var(--text-sm); border-top: 1px solid var(--line); }
.lno-prod:first-of-type { border-top: 0; }
.lno-prod > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lno-prod__t { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.lno-prod__t i { display: block; height: 100%; background: var(--crit); max-width: 100%; }
.lno-prod b { text-align: end; font-variant-numeric: tabular-nums; }
.lno-prod small { text-align: end; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1101px) { .lno-main { height: var(--lno-main-h, auto); } }
@media (max-width: 1100px) { .lno-main { grid-template-columns: minmax(0, 1fr); } .lno-panels { max-height: 480px; } .lno-dpd { height: auto; flex-wrap: wrap; } .lno-dpd__seg { padding-block: 6px; } }
@media (max-width: 720px) { .lno-row { flex-wrap: wrap; } .lno-row__main { flex-basis: calc(100% - 36px); } }
.lno-work .so-tabs { gap: 0; }
.lno-work .so-tabs { flex-wrap: wrap; }
.lno .rsm-life { margin-bottom: 0; }