/* Component layer — built on tokens.css. Utility-friendly but themeable. */
body{background:var(--c-bg);color:var(--c-ink);
  background-image:radial-gradient(1200px 600px at 100% -10%,var(--c-bg-grad-1),transparent),
                   radial-gradient(900px 500px at -10% 110%,var(--c-bg-grad-2),transparent);}
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow);}
.hairline{border-color:var(--c-border);}
.text-muted{color:var(--c-muted);}
.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:.65rem;padding:.55rem 1rem;font-weight:600;font-size:.875rem;transition:.15s;cursor:pointer;}
.btn-primary{background:var(--c-primary);color:var(--c-primary-fg);} .btn-primary:hover{background:var(--c-primary-600);}
.btn-ghost{background:var(--c-surface-2);color:var(--c-ink);} .btn-ghost:hover{filter:brightness(.97);}
.btn-accent{background:var(--c-accent);color:#1a1206;}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;}
.badge-primary{background:var(--c-primary-soft);color:var(--c-primary-600);}
.badge-success{background:var(--c-success-soft);color:var(--c-success);}
.badge-warning{background:var(--c-warning-soft);color:var(--c-warning);}
.badge-danger{background:var(--c-danger-soft);color:var(--c-danger);}
.badge-info{background:var(--c-info-soft);color:var(--c-info);}
.badge-muted{background:var(--c-surface-2);color:var(--c-muted);}
/* Colorful financial stat tile */
.stat{position:relative;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent,var(--c-primary));}
.stat .stat-ico{width:2.1rem;height:2.1rem;border-radius:.6rem;display:grid;place-items:center;font-size:1rem;
  background:color-mix(in srgb,var(--accent,var(--c-primary)) 16%,transparent);color:var(--accent,var(--c-primary));}
.stat-value{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.stat-label{font-size:.72rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em;}
/* App shell */
.sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--c-primary) 10%,var(--c-surface)),var(--c-surface));border-right:1px solid var(--c-border);}
.navlink{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:.6rem;color:var(--c-ink);font-size:.9rem;}
.navlink:hover{background:var(--c-surface-2);}
.navlink.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.brandmark{background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:#fff;}
.topbar{background:color-mix(in srgb,var(--c-surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border);}
.tabbar{background:color-mix(in srgb,var(--c-surface) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--c-border);padding-bottom:env(safe-area-inset-bottom);}
.tabitem{color:var(--c-muted);} .tabitem.active{color:var(--c-primary-600);}
/* Inputs */
.field{width:100%;background:var(--c-surface);border:1px solid var(--c-border);border-radius:.6rem;padding:.6rem .8rem;color:var(--c-ink);font-size:.9rem;}
.field:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 22%,transparent);}
input,select,textarea{color-scheme:light dark;}
/* Tabs (client hub) */
.tabbtn{padding:.4rem .8rem;border-radius:.55rem;font-size:.85rem;color:var(--c-muted);white-space:nowrap;}
.tabbtn.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
/* Data table */
.tbl{width:100%;font-size:.875rem;} .tbl th{color:var(--c-muted);font-weight:500;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;}
.tbl td,.tbl th{padding:.55rem .4rem;border-bottom:1px solid var(--c-border);}
.tbl tr:last-child td{border-bottom:0;}
.gradient-hero{background:linear-gradient(120deg,var(--c-primary),color-mix(in srgb,var(--c-accent) 70%,var(--c-primary)));color:#fff;}
.money{font-variant-numeric:tabular-nums;}
a{color:inherit}

/* ---- Nav sections & active states ---- */
.navsec{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);opacity:.75;padding:0 .75rem .35rem;}
.navlink{position:relative;gap:.65rem;margin:1px 0;color:var(--c-muted);font-weight:500;}
.navlink svg{flex:0 0 auto;opacity:.9;}
.navlink:hover{background:var(--c-surface-2);color:var(--c-ink);}
.navlink.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.navlink.active svg{opacity:1;}
.navlink.active::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);height:60%;width:3px;border-radius:3px;background:var(--c-primary);}
.sidebar{padding-right:.9rem;}
/* section divider subtlety */
.navsec + a, nav > div + div{margin-top:.15rem;}
nav > div:not(:first-child){border-top:1px solid color-mix(in srgb,var(--c-border) 60%,transparent);padding-top:.7rem;}

/* ---- Tab bar (mobile) ---- */
.tabitem{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;color:var(--c-muted);position:relative;}
.tabitem.active{color:var(--c-primary-600);}
.tabitem.active::after{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:3px;background:var(--c-primary);}
.tab-fab{background:var(--c-primary);color:var(--c-primary-fg);width:2.6rem;height:2.6rem;border-radius:1rem;display:grid;place-items:center;margin-top:-1rem;box-shadow:var(--shadow);}

/* ---- Mobile drawer ---- */
.drawer-overlay{position:fixed;inset:0;background:rgba(2,6,15,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;backdrop-filter:blur(2px);}
.drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;transform:translateX(-102%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:50;overflow-y:auto;padding:1rem;box-shadow:var(--shadow);}
html.drawer-open .drawer{transform:translateX(0);}
html.drawer-open .drawer-overlay{opacity:1;pointer-events:auto;}

/* ---- Utilities ---- */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;}
.no-scrollbar::-webkit-scrollbar{display:none;height:0;}
html,body{max-width:100%;overflow-x:hidden;}
.theme-dot{width:1.35rem;height:1.35rem;border-radius:999px;border:2px solid var(--c-border);cursor:pointer;transition:transform .1s;}
.theme-dot:hover{transform:scale(1.12);}
.theme-dot.sel{outline:2px solid var(--c-primary);outline-offset:2px;border-color:transparent;}

/* ---- Form field contrast across ALL themes ---- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea{
  background:var(--c-surface); color:var(--c-ink);
  border:1px solid var(--c-border); border-radius:.6rem;
}
input::placeholder, textarea::placeholder{color:var(--c-muted);opacity:.8;}
select option{background:var(--c-surface);color:var(--c-ink);}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 22%,transparent);}
label{color:var(--c-ink);}
.chip{padding:.35rem .8rem;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-muted);white-space:nowrap;font-weight:500;}
.chip:hover{color:var(--c-ink);}
.chip-on{background:var(--c-primary-soft);border-color:transparent;color:var(--c-primary-600);font-weight:600;}
.btn svg{flex:0 0 auto;}

/* =========================================================================
   Tabs — one continuous strip
   The wrapper carries fade masks at whichever edge still has content, so a
   scrollable strip announces itself instead of looking like it simply ends.
   ========================================================================= */
.tabs-wrap{position:relative;}
.tabs-scroll{display:flex;gap:.25rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:.9rem;padding:.3rem;}
.tabs-scroll::-webkit-scrollbar{display:none;height:0;}
.tabs-wrap::before,.tabs-wrap::after{content:"";position:absolute;top:.3rem;bottom:.3rem;width:2rem;
  pointer-events:none;opacity:0;transition:opacity .18s;border-radius:.9rem;z-index:1;}
.tabs-wrap::before{left:1px;background:linear-gradient(90deg,var(--c-surface),transparent);}
.tabs-wrap::after{right:1px;background:linear-gradient(270deg,var(--c-surface),transparent);}
.tabs-wrap.has-left::before,.tabs-wrap.has-right::after{opacity:1;}
.tabbtn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:.65rem;
  font-size:.85rem;font-weight:500;color:var(--c-muted);white-space:nowrap;flex:0 0 auto;
  border:0;background:transparent;cursor:pointer;transition:background .15s,color .15s;
  scroll-margin-inline:1.5rem;}
.tabbtn:hover{background:var(--c-surface-2);color:var(--c-ink);}
.tabbtn.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.tabbtn:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px;}
.tabbtn .tabcount{font-size:.68rem;font-weight:700;padding:0 .35rem;border-radius:999px;
  background:color-mix(in srgb,currentColor 15%,transparent);}
.tabpanel[hidden]{display:none!important;}
.tabpanel{animation:tabfade .18s ease-out;}
@keyframes tabfade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* =========================================================================
   Avatars — always something, never a broken image
   ========================================================================= */
.avatar{display:grid;place-items:center;border-radius:999px;overflow:hidden;flex:0 0 auto;
  background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:700;
  border:1px solid var(--c-border);}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-xs{width:1.75rem;height:1.75rem;font-size:.62rem;}
.avatar-sm{width:2.25rem;height:2.25rem;font-size:.72rem;}
.avatar-md{width:3rem;height:3rem;font-size:.9rem;}
.avatar-lg{width:4.5rem;height:4.5rem;font-size:1.25rem;}
.avatar-xl{width:6rem;height:6rem;font-size:1.7rem;}
.avatar-ph{color:var(--c-muted);background:var(--c-surface-2);}
.avatar-ring{box-shadow:0 0 0 3px var(--c-surface),0 0 0 5px var(--c-primary-soft);}

/* =========================================================================
   Profile / console furniture
   ========================================================================= */
.profile-cover{height:7rem;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(120deg,var(--c-primary),color-mix(in srgb,var(--c-accent) 65%,var(--c-primary)));
  background-size:cover;background-position:center;}
.meta-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--c-border);font-size:.875rem;}
.meta-row:last-child{border-bottom:0;}
.meta-row dt{color:var(--c-muted);flex:0 0 auto;}
.meta-row dd{text-align:right;font-weight:500;word-break:break-word;}
.lock-pill{display:inline-flex;align-items:center;gap:.25rem;font-size:.65rem;font-weight:600;
  padding:.1rem .45rem;border-radius:999px;background:var(--c-surface-2);color:var(--c-muted);}
.section-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:.5rem;
  /* Flex, because Tailwind's reset makes an svg display:block — a heading with an
     icon in it stacked the icon above its own text on every card in the app. */
  display:flex;align-items:center;gap:.4rem;}
.section-title svg{flex:0 0 auto;}
.empty{padding:1.75rem 1rem;text-align:center;color:var(--c-muted);font-size:.875rem;}
.empty svg{margin:0 auto .5rem;opacity:.45;}
.kv-grid{display:grid;gap:.75rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.kv-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);}
.kv-value{font-size:.9rem;font-weight:500;word-break:break-word;}
.callout{border-radius:.85rem;padding:.85rem 1rem;font-size:.85rem;border:1px solid;
  display:flex;gap:.6rem;align-items:flex-start;}
.callout svg{flex:0 0 auto;margin-top:.1rem;}
.callout-warning{background:var(--c-warning-soft);border-color:color-mix(in srgb,var(--c-warning) 35%,transparent);color:var(--c-warning);}
.callout-danger{background:var(--c-danger-soft);border-color:color-mix(in srgb,var(--c-danger) 35%,transparent);color:var(--c-danger);}
.callout-info{background:var(--c-info-soft);border-color:color-mix(in srgb,var(--c-info) 35%,transparent);color:var(--c-info);}
.callout-success{background:var(--c-success-soft);border-color:color-mix(in srgb,var(--c-success) 35%,transparent);color:var(--c-success);}
.callout strong{color:var(--c-ink);}
.callout-warning strong,.callout-danger strong,.callout-info strong,.callout-success strong{color:inherit;}

/* Toggle switch for feature flags */
.switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  width:2.6rem;height:1.5rem;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--c-surface-2);
  border:1px solid var(--c-border);transition:.18s;}
.switch .thumb{position:absolute;top:.2rem;left:.2rem;width:1.05rem;height:1.05rem;border-radius:999px;
  background:var(--c-muted);transition:.18s;}
.switch input:checked ~ .track{background:var(--c-primary-soft);border-color:var(--c-primary);}
.switch input:checked ~ .thumb{transform:translateX(1.05rem);background:var(--c-primary);}
.switch input:focus-visible ~ .track{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 25%,transparent);}

/* Forms */
.form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.form-label{display:block;font-size:.8rem;}
.form-label > span:first-child{display:block;color:var(--c-muted);margin-bottom:.25rem;font-weight:500;}
.form-help{font-size:.72rem;color:var(--c-muted);margin-top:.2rem;line-height:1.35;}
.form-error{font-size:.72rem;color:var(--c-danger);margin-top:.2rem;}
.check-row{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .7rem;border-radius:.7rem;
  background:var(--c-surface-2);font-size:.85rem;}
.check-row input[type=checkbox]{width:1.05rem;height:1.05rem;margin-top:.1rem;accent-color:var(--c-primary);flex:0 0 auto;}
.code-block{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;
  letter-spacing:.08em;background:var(--c-surface-2);border:1px dashed var(--c-border);
  border-radius:.6rem;padding:.55rem .7rem;text-align:center;}
.qr-frame{background:#fff;border-radius:.9rem;padding:.75rem;display:inline-block;line-height:0;
  border:1px solid var(--c-border);}
.qr-frame svg{width:180px;height:180px;display:block;}

/* Timeline */
.timeline{position:relative;padding-left:1.15rem;}
.timeline::before{content:"";position:absolute;left:.3rem;top:.35rem;bottom:.35rem;width:2px;
  background:var(--c-border);border-radius:2px;}
.timeline-item{position:relative;padding:.45rem 0;font-size:.85rem;}
.timeline-item::before{content:"";position:absolute;left:-1.02rem;top:.85rem;width:.55rem;height:.55rem;
  border-radius:999px;background:var(--c-muted);box-shadow:0 0 0 3px var(--c-surface);}
.timeline-item.is-alert::before{background:var(--c-danger);}
.timeline-item.is-good::before{background:var(--c-success);}

/* Table helper for wide data */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:100%;}

/* ---------------------------------------------------------------------------
   Sidebar height
   The sidebar is a flex item, so by default it stretches to the height of the
   tallest thing on the page. On a long page — the audit log especially — that
   produced a sidebar thousands of pixels tall that the reader had to scroll
   past to reach the bottom of the page. Pinning it to the viewport keeps it
   where it belongs and lets the page scroll underneath it on its own.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sidebar-fixed {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;          /* correct on mobile browsers with a collapsing bar */
    align-self: flex-start;  /* stops the flex container stretching it */
    overflow: hidden;        /* the nav inside scrolls, never the whole rail */
  }
  /* The scrollable middle of the sidebar. `min-height:0` is required: a flex
     child will not shrink below its content without it, so the overflow would
     never engage. */
  .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the nav does not scroll the page */
  }
  .sidebar-scroll::-webkit-scrollbar { width: 6px; }
  .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border); border-radius: 3px;
  }
}

/* ===========================================================================
   Lists — one system for every screen that shows many of something.
   Written once so the Loans page, the audit log and the notification inbox
   filter, count, paginate and say "nothing here" in the same way.
   ======================================================================== */
.link{color:var(--c-primary-600);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--c-primary) 40%,transparent);}
.link:hover{text-decoration-color:currentColor;}

/* --- page header --------------------------------------------------------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1rem;margin-bottom:1.1rem;}
.page-title{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;}
.page-sub{color:var(--c-muted);font-size:.875rem;margin-top:.25rem;max-width:46rem;}
.page-count{display:inline-flex;align-items:center;margin-left:.5rem;padding:.05rem .5rem;border-radius:999px;
  font-size:.75rem;font-weight:600;vertical-align:middle;background:var(--c-surface-2);color:var(--c-muted);}
.page-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}

/* --- metric strip --------------------------------------------------------- */
.metrics{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));margin-bottom:1rem;}
.metric{background:var(--c-surface);border:1px solid var(--c-border);border-radius:.9rem;padding:.8rem 1rem;
  display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.metric-label{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--c-muted);font-weight:500;}
.metric-label .tone{width:.5rem;height:.5rem;border-radius:999px;background:var(--tone,var(--c-primary));flex:0 0 auto;}
.metric-value{font-size:1.3rem;font-weight:750;letter-spacing:-.015em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metric-value small{font-size:.7rem;font-weight:500;color:var(--c-muted);margin-right:.2rem;}
.metric-sub{font-size:.72rem;color:var(--c-muted);}

/* --- toolbar: search + filters ------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.75rem;}
.searchbox{position:relative;flex:1 1 16rem;min-width:12rem;max-width:26rem;}
.searchbox svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--c-muted);pointer-events:none;}
.searchbox .field{padding-left:2.2rem;}
.toolbar .field{padding-top:.5rem;padding-bottom:.5rem;}
.seg{display:flex;gap:.25rem;padding:.2rem;border-radius:.75rem;background:var(--c-surface-2);
  overflow-x:auto;scrollbar-width:none;max-width:100%;}
.seg::-webkit-scrollbar{display:none;}
.seg a,.seg button{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;padding:.35rem .7rem;
  border-radius:.55rem;font-size:.8rem;font-weight:500;color:var(--c-muted);}
.seg a:hover,.seg button:hover{color:var(--c-ink);}
.seg .on,.seg .tabbtn.active{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600;}
.seg-count{font-size:.68rem;font-weight:700;padding:0 .35rem;border-radius:999px;background:var(--c-bg);color:var(--c-muted);}
.seg .on .seg-count,.seg .tabbtn.active .seg-count{background:var(--c-primary-soft);color:var(--c-primary-600);}
.filters-active{font-size:.78rem;color:var(--c-muted);}

/* --- the table ----------------------------------------------------------- */
.dcard{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow);}
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;}
.dtable thead th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--c-surface-2) 70%,var(--c-surface));
  text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);
  padding:.6rem .9rem;border-bottom:1px solid var(--c-border);white-space:nowrap;}
.dtable thead th:first-child{border-top-left-radius:var(--radius);}
.dtable thead th:last-child{border-top-right-radius:var(--radius);}
.dtable tbody td{padding:.7rem .9rem;border-bottom:1px solid var(--c-border);vertical-align:middle;}
.dtable tbody tr:last-child td{border-bottom:0;}
.dtable tbody tr{transition:background .12s;}
.dtable tbody tr:hover{background:color-mix(in srgb,var(--c-primary) 4%,var(--c-surface));}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dtable .nowrap{white-space:nowrap;}
.dtable .sub{display:block;font-size:.75rem;color:var(--c-muted);margin-top:.1rem;}
.dtable .strong{font-weight:600;color:var(--c-ink);}
.dtable tr.is-muted td{opacity:.62;}
.dtable tr.is-alert td:first-child{box-shadow:inset 3px 0 0 var(--c-danger);}

/* a row that goes somewhere: the first link stretches over the whole row, so
   the row is one target for a mouse and still one real <a> for a keyboard */
.row-link{position:relative;}
.row-link .row-anchor::after{content:"";position:absolute;inset:0;}
.row-link .row-anchor{color:var(--c-ink);font-weight:600;}
.row-link:hover .row-anchor{color:var(--c-primary-600);}
.row-link .row-anchor:focus-visible{outline:none;}
.row-link:focus-within{background:var(--c-primary-soft);}
.row-link a:not(.row-anchor),.row-link button,.row-link form{position:relative;z-index:1;}

/* --- the same rows on a phone -------------------------------------------- */
.mlist{display:grid;gap:.5rem;}
.mrow{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:.9rem;padding:.8rem .9rem;
  display:grid;gap:.45rem;}
.mrow-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;}
.mrow-meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.75rem;color:var(--c-muted);}
.mrow-meta b{color:var(--c-ink);font-weight:600;font-variant-numeric:tabular-nums;}
.mrow.is-alert{box-shadow:inset 3px 0 0 var(--c-danger);}

/* --- small parts --------------------------------------------------------- */
.person{display:flex;align-items:center;gap:.65rem;min-width:0;}
.person-text{min-width:0;}
.person-name{font-weight:600;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.person-sub{font-size:.75rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.18rem .6rem .18rem .5rem;border-radius:999px;
  font-size:.74rem;font-weight:600;white-space:nowrap;background:var(--c-surface-2);color:var(--c-muted);
  border:1px solid color-mix(in srgb,currentColor 18%,transparent);}
.pill-dot{width:.45rem;height:.45rem;border-radius:999px;background:currentColor;flex:0 0 auto;}
.pill-success{background:var(--c-success-soft);color:var(--c-success);}
.pill-warning{background:var(--c-warning-soft);color:var(--c-warning);}
.pill-danger{background:var(--c-danger-soft);color:var(--c-danger);}
.pill-info{background:var(--c-info-soft);color:var(--c-info);}
.pill-primary{background:var(--c-primary-soft);color:var(--c-primary-600);}
.pill-muted{background:var(--c-surface-2);color:var(--c-muted);}

.tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:600;padding:.1rem .45rem;
  border-radius:.4rem;background:var(--c-surface-2);color:var(--c-muted);white-space:nowrap;}
.tag-danger{background:var(--c-danger-soft);color:var(--c-danger);}
.tag-warning{background:var(--c-warning-soft);color:var(--c-warning);}
.tag-info{background:var(--c-info-soft);color:var(--c-info);}
.tag-success{background:var(--c-success-soft);color:var(--c-success);}

.progress{height:.35rem;border-radius:999px;background:var(--c-surface-2);overflow:hidden;min-width:4rem;}
.progress > span{display:block;height:100%;border-radius:inherit;background:var(--c-primary);}
.progress.is-late > span{background:var(--c-danger);}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;letter-spacing:-.01em;}
.amount-neg{color:var(--c-danger);}
.struck{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);}

/* --- empty state ---------------------------------------------------------- */
.empty{padding:2.5rem 1rem;text-align:center;color:var(--c-muted);font-size:.875rem;}
.empty-disc{width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;margin:0 auto .75rem;
  background:var(--c-primary-soft);color:var(--c-primary-600);}
.empty-disc svg{margin:0;opacity:1;}
.empty-title{font-weight:600;color:var(--c-ink);font-size:.95rem;}
.empty-hint{font-size:.8rem;margin-top:.25rem;}

/* --- pagination ----------------------------------------------------------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.9rem;
  font-size:.8rem;color:var(--c-muted);}
.pager-links{display:flex;gap:.35rem;align-items:center;}
.pager a,.pager span.pg{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
  padding:0 .6rem;border-radius:.55rem;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-ink);}
.pager a:hover{border-color:var(--c-primary);color:var(--c-primary-600);}
.pager span.pg.on{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-fg);font-weight:600;}
.pager .disabled{opacity:.4;pointer-events:none;}

/* --- the global .tbl, brought in line so un-rewritten tables match -------- */
.tbl{border-collapse:separate;border-spacing:0;}
.tbl th{font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.55rem .6rem;
  background:color-mix(in srgb,var(--c-surface-2) 60%,transparent);}
.tbl td{padding:.6rem .6rem;}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--c-primary) 4%,transparent);}

/* --- dialog --------------------------------------------------------------- */
.modal{border:0;padding:0;border-radius:1.1rem;width:min(34rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem);
  background:var(--c-surface);color:var(--c-ink);box-shadow:0 24px 64px rgba(2,6,15,.35);}
.modal::backdrop{background:rgba(2,6,15,.55);backdrop-filter:blur(2px);}
.modal[open]{animation:modal-in .16s ease-out;}
@keyframes modal-in{from{opacity:0;transform:translateY(6px) scale(.985);}to{opacity:1;transform:none;}}
.modal-body{display:grid;gap:.9rem;padding:1.2rem 1.25rem;}
.modal-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;}
.modal-title{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;}
.modal-x{padding:.3rem;border-radius:.5rem;color:var(--c-muted);}
.modal-x:hover{background:var(--c-surface-2);color:var(--c-ink);}
.modal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:.75rem .85rem;
  border-radius:.8rem;background:var(--c-surface-2);}
.modal-section{padding:.8rem .85rem;border-radius:.8rem;border:1px dashed var(--c-border);}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.35rem;}
@media (max-width:480px){.modal-summary{grid-template-columns:1fr 1fr;}}

/* --- "Already paid out?" on the new-loan form ----------------------------- */
.backdate-box{border:1px solid var(--c-border);border-radius:.9rem;padding:.9rem 1rem 1rem;
  background:color-mix(in srgb,var(--c-primary) 3%,var(--c-surface));}
.backdate-legend{display:flex;align-items:center;gap:.45rem;padding:0 .35rem;font-weight:600;font-size:.9rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;}
.rows > * + *{border-top:1px solid var(--c-border);}

.dtable td.amount-neg,.dtable .amount-neg{color:var(--c-danger);}
.toolbar .btn-ghost{background:var(--c-surface);border:1px solid var(--c-border);}
.toolbar .btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary-600);}
.dcard{overflow-x:auto;}

/* A grid or flex child will not shrink below its content by default, so one long
   borrower name (nowrap, ellipsis) pushed every card wider than a phone screen
   and cut the status pill off the right-hand edge. Let the text give way. */
.mlist{grid-template-columns:minmax(0,1fr);}
.mrow,.mrow > *{min-width:0;}
.mrow-top > :first-child{min-width:0;flex:1 1 auto;}
.mrow-top .pill,.mrow-top .tag,.mrow-top > .text-right{flex-shrink:0;}
.metrics{grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr));}
@media (max-width:640px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .metric-value{font-size:1.1rem;}
  .searchbox{max-width:none;flex-basis:100%;}
}

/* --- analytics charts ------------------------------------------------------ */
.chart-box{position:relative;height:17rem;}
.chart-box[hidden]{display:none;}
.seg [aria-pressed="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600;}

/* Dashboard "Go to" tiles: a link that reads as a destination, not a button. */
.tile{display:flex;gap:.65rem;align-items:center;padding:.7rem .8rem;border-radius:.8rem;
  border:1px solid var(--c-border);background:var(--c-surface);transition:border-color .15s,transform .15s;}
.tile:hover{border-color:var(--tone,var(--c-primary));transform:translateY(-1px);}
.tile .tile-ico{width:2.1rem;height:2.1rem;flex:0 0 auto;border-radius:.6rem;display:grid;place-items:center;
  color:var(--tone,var(--c-primary));background:color-mix(in srgb,var(--tone,var(--c-primary)) 12%,transparent);}
.tile strong{display:block;font-size:.88rem;font-weight:600;line-height:1.2;}
.tile small{display:block;font-size:.72rem;color:var(--c-muted);line-height:1.25;margin-top:.1rem;}