/* =====================================================================
   G-SMaRT Integrated Cooperative System - look and feel (no build step; loads after Bootstrap 5.3)
   Same palette as before: dark bar #212529, blue #0d6efd, page #f5f6f8.
   Surfaces get depth: raised cards and buttons, inset fields, pressed states.
   ===================================================================== */

:root {
  --sidebar-w: 272px;
  --bar-h: 56px;
  --page: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --ink: #1f2933;
  --ink-soft: #4b5563;
  --muted: #6c757d;
  --line: #dfe3e9;
  --line-soft: #ebeef2;
  --blue: #0d6efd;
  --blue-deep: #0b5ed7;
  --blue-tint: #e7f0ff;
  --radius: 10px;
  --radius-sm: 7px;
  --raise-1: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(15, 23, 42, .07), 0 8px 18px -12px rgba(15, 23, 42, .22);
  --raise-2: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(15, 23, 42, .08), 0 18px 32px -18px rgba(15, 23, 42, .32);
  --inset: inset 0 1px 2px rgba(15, 23, 42, .07);
  --bs-body-color: #1f2933;
  --bs-border-color: #dfe3e9;
  --bs-link-color: #0b5ed7;
  --bs-link-hover-color: #0a4fb8;
}

html { scroll-padding-top: calc(var(--bar-h) + 12px); }
body {
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .btn:hover, .nav-link, .nav-link:hover, .dropdown-item, .dropdown-item:hover, .menu-link, .menu-link:hover, .navbar-brand, .navbar-brand:hover { text-decoration: none; }
::selection { background: #cfe2ff; }
:focus-visible { outline: 2px solid rgba(13, 110, 253, .55); outline-offset: 1px; }

/* ------------------------------------------------------------------ top bar */
.navbar.app-bar {
  min-height: var(--bar-h);
  background: linear-gradient(180deg, #2c3136 0%, #212529 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 1px 0 #111417, 0 6px 16px -8px rgba(0, 0, 0, .55);
  z-index: 1030;
}
.app-bar .navbar-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; letter-spacing: .005em; margin-right: .25rem; }
.brand-tile {
  width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font-size: .95rem; color: #fff;
  background: linear-gradient(180deg, #3d8bfd, #0b5ed7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 2px 5px rgba(0, 0, 0, .45);
}
.app-bar .company { color: #aeb6bf; font-size: .82rem; padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.app-search { position: relative; }
.app-search .bi { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #8b949e; font-size: .85rem; pointer-events: none; }
.app-search .form-control {
  width: 340px; padding-left: 2rem; border-radius: 8px; color: #e9ecef;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.app-search .form-control::placeholder { color: #98a2ad; }
.app-search .form-control:focus { background: #fff; color: var(--ink); border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .3); }
.app-bar .btn-user {
  color: #e9ecef; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 1px 2px rgba(0, 0, 0, .4);
}
.app-bar .btn-user:hover, .app-bar .btn-user.show { background: rgba(255, 255, 255, .14); color: #fff; }

/* ------------------------------------------------------------------ shell and side menu */
.app-shell { min-height: calc(100vh - var(--bar-h)); }
.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: linear-gradient(180deg, #fcfcfd, #f7f8fa) !important; border-right: 1px solid var(--line) !important; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); overflow-y: auto; box-shadow: 1px 0 0 #fff inset, 6px 0 14px -12px rgba(15, 23, 42, .18); }
}
.sidebar { scrollbar-width: thin; scrollbar-color: #cfd5dd transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #cfd5dd; border-radius: 8px; border: 2px solid #f7f8fa; }
.main-area { min-width: 0; }

.sidebar .accordion-item { border-color: var(--line-soft); }
.sidebar .accordion-button {
  font-size: .88rem; font-weight: 600; color: #2b333d; background: transparent; padding: .6rem .9rem; gap: .6rem; box-shadow: none;
}
.sidebar .accordion-button:hover { background: #eef1f5; }
.sidebar .accordion-button:focus { box-shadow: none; }
.sidebar .accordion-button:not(.collapsed) { color: var(--blue-deep); background: transparent; box-shadow: none; }
.sidebar .accordion-button::after { width: .8rem; height: .8rem; background-size: .8rem; opacity: .55; }
.menu-ico {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; display: inline-grid; place-items: center; font-size: .85rem; color: #56616e;
  background: linear-gradient(180deg, #fff, #eef1f5); border: 1px solid #dde2e8;
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(15, 23, 42, .1);
}
.accordion-button:not(.collapsed) .menu-ico { color: #fff; border-color: #0a58ca; background: linear-gradient(180deg, #3d8bfd, #0b5ed7); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 4px rgba(11, 94, 215, .35); }
.menu-link {
  display: block; margin: 1px .5rem; padding: .3rem .6rem .3rem 2.35rem; border-radius: 7px; color: #38424d; font-size: .845rem; line-height: 1.3;
  border-left: 3px solid transparent;
}
.menu-link:hover { background: #eceff3; color: #111827; }
.menu-link.active { background: var(--blue-tint); color: var(--blue-deep); font-weight: 600; border-left-color: var(--blue); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(13, 110, 253, .12); }
.menu-group { padding: .6rem 1rem .2rem 1.35rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8a94a0; }
.menu-sub { padding: .45rem 1rem .1rem 2.9rem; font-size: .72rem; color: #8a94a0; }
.menu-reports summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem; }
.menu-reports summary::-webkit-details-marker { display: none; }
.menu-reports summary::before { content: ""; width: 0; height: 0; border-left: 5px solid #8a94a0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; }
.menu-reports[open] summary::before { transform: rotate(90deg); }
.menu-reports summary:hover { color: var(--blue-deep); }

/* ------------------------------------------------------------------ page bar (title + actions) */
.page-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  margin-bottom: 1rem; padding: .55rem .9rem; min-height: 50px;
  background: linear-gradient(180deg, #ffffff, #f9fafb); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--raise-1);
}
.page-bar h1 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.005em; margin: 0; color: #18212b; }
.page-bar .page-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.page-bar .page-actions form { margin: 0; }

/* ------------------------------------------------------------------ cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--raise-1); }
.card > .card-header {
  background: linear-gradient(180deg, #ffffff, #f6f7f9); border-bottom: 1px solid var(--line); padding: .6rem .95rem;
  font-weight: 600; font-size: .9rem; color: #1b2430; border-radius: var(--radius) var(--radius) 0 0;
}
.card > .card-body { padding: .95rem; }
.card > .table-responsive:last-child, .card > .table:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.card > .table-responsive:first-child, .card > .table:first-child { border-radius: var(--radius); }
.card > .table-responsive { overflow-x: auto; }
.card > .table { overflow: hidden; }
.card.border-primary { border-color: #9ec5fe !important; }
.card.border-info { border-color: #9eeaf9 !important; }
.card.border-warning { border-color: #ffda6a !important; }
.card.border-danger { border-color: #f1aeb5 !important; }
.list-group-item { border-color: var(--line-soft); }

/* dashboard figures */
.kpi { position: relative; overflow: hidden; border-left: 4px solid var(--blue); box-shadow: var(--raise-2); transition: transform .12s ease, box-shadow .12s ease; }
.kpi:hover { transform: translateY(-2px); }
.kpi::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(13, 110, 253, .1), rgba(13, 110, 253, 0) 70%); }
.kpi .value { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ buttons: raised, pressed when clicked */
.btn { border-radius: var(--radius-sm); font-weight: 500; transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.btn-sm { padding: .3rem .65rem; font-size: .82rem; }
.btn-lg { border-radius: 9px; }
.btn:active, .btn.active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary, .btn-info, .btn-dark {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 -1px 0 rgba(0, 0, 0, .14) inset, 0 1px 2px rgba(15, 23, 42, .22), 0 3px 6px -3px rgba(15, 23, 42, .3);
}
.btn-primary { border-color: #0a58ca; }
.btn-success { border-color: #146c43; }
.btn-danger { border-color: #b02a37; }
.btn-warning { border-color: #d39e00; }
.btn-secondary { border-color: #565e64; }
.btn-primary:active, .btn-success:active, .btn-danger:active, .btn-warning:active, .btn-secondary:active, .btn-info:active, .btn-dark:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28) !important;
}
[class*="btn-outline-"], .btn-light {
  background-color: #fff; background-image: linear-gradient(180deg, #ffffff, #f3f5f8);
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(15, 23, 42, .1), 0 2px 0 -1px rgba(15, 23, 42, .08);
}
.btn-outline-secondary { color: #3f4954; border-color: #c9d0d9; }
.btn-outline-secondary:hover { background-image: none; background-color: #eef1f5; color: #111827; border-color: #b9c2cd; }
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .btn-outline-dark:hover { background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); }
[class*="btn-outline-"]:active { box-shadow: inset 0 2px 4px rgba(15, 23, 42, .2) !important; }
/* a button reached with the keyboard keeps its own colours (Bootstrap turns the text white on the white face) */
.btn-outline-secondary:focus-visible:not(:hover) { color: #111827; background-image: none; background-color: #eef1f5; }
.btn-outline-primary:focus-visible:not(:hover) { color: #0b5ed7; }
.btn-outline-success:focus-visible:not(:hover) { color: #157347; }
.btn-outline-danger:focus-visible:not(:hover) { color: #b02a37; }
.btn-outline-warning:focus-visible:not(:hover) { color: #9a6700; }
.btn-outline-info:focus-visible:not(:hover) { color: #087990; }
.btn-outline-dark:focus-visible:not(:hover) { color: #212529; }
.btn-link { box-shadow: none !important; background: none !important; }
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .5; }
.btn .bi { margin-right: .15rem; }
.btn-group > .btn { box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }

/* ------------------------------------------------------------------ fields: slightly sunk into the surface */
.form-label { font-size: .76rem; font-weight: 600; margin-bottom: .2rem; color: #55606c; letter-spacing: .005em; }
.form-control, .form-select { border-color: #cbd2db; border-radius: var(--radius-sm); box-shadow: var(--inset); color: var(--ink); }
.form-control-sm, .form-select-sm { border-radius: 6px; font-size: .85rem; }
.form-control:hover, .form-select:hover { border-color: #b3bcc8; }
.form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: var(--inset), 0 0 0 .2rem rgba(13, 110, 253, .18); }
.form-control::placeholder { color: #9aa3ad; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #f1f3f6; box-shadow: none; }
.form-check-input { border-color: #aeb8c4; box-shadow: var(--inset); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue-deep); box-shadow: 0 1px 2px rgba(13, 110, 253, .4); }
.form-text { color: #7a8591; font-size: .78rem; }
.input-group-text { background: linear-gradient(180deg, #fbfcfd, #eef1f5); border-color: #cbd2db; color: #46515d; font-size: .85rem; }
fieldset:disabled .card { opacity: .97; }
form.filters, .filters { --bs-gutter-y: .5rem; }

/* ------------------------------------------------------------------ tables */
.table { --bs-table-border-color: var(--line-soft); --bs-table-hover-bg: #f3f7ff; --bs-table-active-bg: #eaf2ff; color: var(--ink); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .5rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .38rem .42rem; }
.table-sm > :not(caption) > * > *:first-child { padding-left: .8rem; }
.table-sm > :not(caption) > * > *:last-child { padding-right: .8rem; }
.table-sm td, .table-sm th { vertical-align: middle; }
.table thead th {
  background: linear-gradient(180deg, #f8f9fb, #f0f2f5); color: #4a5561; font-size: .76rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
  border-bottom: 1px solid #d5dbe3; box-shadow: 0 1px 0 #fff inset;
}
.table thead.sticky-top th { position: sticky; top: 0; z-index: 2; }
.table tfoot td, .table tfoot th { background: #f7f9fc; border-top: 2px solid #d5dbe3; }
.grid-totals td { background: #f4f7fb !important; border-top: 2px solid #cfd6df !important; font-variant-numeric: tabular-nums; }
.table-hover > tbody > tr { transition: background-color .08s ease; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg { color: #b02a37; }
.table-primary { --bs-table-bg: #dbe9ff; --bs-table-border-color: #c3d9fb; }
tr.cav-row { cursor: pointer; }
tr.cav-first > td { border-top: 1px solid #d5dbe3; }

/* editable line grids */
.line-grid { margin-bottom: .5rem; }
.line-grid input, .line-grid select { min-width: 64px; }
.line-grid input[type=checkbox], .line-grid input[type=radio] { min-width: 0; }
.line-grid > tbody > tr > td { padding: .2rem .25rem; border-bottom-color: transparent; }
.line-grid > tbody > tr:hover > td { background: #f6f9ff; }
.line-grid .col-item { min-width: 170px; }
.line-grid .col-desc { min-width: 150px; }
.line-grid .col-num { width: 118px; }
.line-grid .col-sm { width: 84px; }
.line-grid .col-class { min-width: 140px; }
.line-grid .col-disc { min-width: 140px; }
.grid-acts { white-space: nowrap; width: 1%; text-align: right; }
.grid-acts .btn-link { line-height: 1; padding: .3rem .2rem !important; }
.grid-acts .btn-link + .btn-link { margin-left: .15rem; }
.grid-ins { color: #6b7684; }
.grid-ins:hover, .grid-ins:focus-visible { color: #0b5ed7; }
.grid-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
tr.row-new > td { animation: rowNew 1.2s ease-out; }
@keyframes rowNew { from { background: #e7f0ff; } to { background: transparent; } }
@media (max-width: 575.98px) {
  .grid-add .btn { flex: 1 1 auto; }
  .grid-acts .btn-link { padding: .45rem .35rem !important; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { tr.row-new > td { animation: none; } }
/* Transfer Inventory on a phone: the item across the line, the quantity on hand and the quantity to move under it */
@media (max-width: 575.98px) {
  #trTable thead { display: none; }
  #trTable, #trTable tbody { display: block; width: 100%; }
  #trTable tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: .35rem .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
  #trTable td { display: block; border: 0; padding: 0; }
  #trTable td:first-child { grid-column: 1 / -1; }
  #trTable td.tr-avail { text-align: left; font-size: .82rem; color: var(--ink-soft); }
  #trTable td.tr-avail:not(:empty)::before { content: 'On hand: '; color: var(--muted); }
}
.totals-box { min-width: 270px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--raise-1); background: #fff; }
.totals-box td { padding: .32rem .7rem; }
.totals-box tr:last-child td { background: linear-gradient(180deg, #f8fafc, #eef2f7); border-top: 2px solid #cfd6df; border-bottom: 0; }
.card-body > .totals-box, .card .totals-box { box-shadow: none; }
.card-body > .totals-box:not(.ms-auto) { min-width: 0; width: 100%; }

/* reports */
.report-table td, .report-table th { padding: .3rem .5rem; }
.report-table tr.group-row td { background: #eef2f7; font-weight: 650; color: #1b2430; border-top: 1px solid #d9dfe7; }
.report-table tr.subtotal-row td { font-weight: 600; border-top: 1px solid #98a2ae; background: #fafbfc; }
.report-table tr.total-row td { font-weight: 700; border-top: 2px solid #2b333d; border-bottom: 3px double #2b333d; background: #f7f9fb; }
.report-table tr.indent-1 td:first-child { padding-left: 1.5rem; }
.report-table tr.indent-2 td:first-child { padding-left: 2.5rem; }
.report-head { text-align: center; margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft); }
.report-head .company { font-weight: 600; font-size: .95rem; color: #46515d; }
.report-head .title { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; color: #111827; }
.bar { height: 16px; border-radius: 4px; background: linear-gradient(180deg, #3d8bfd, #0b5ed7); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 2px rgba(11, 94, 215, .35); }

/* ------------------------------------------------------------------ labels, alerts, tabs, menus, dialogs */
/* status words are plain coloured text, not capsules */
.badge {
  display: inline; padding: 0; border-radius: 0; background: none !important; font-size: .8rem; font-weight: 650; letter-spacing: .01em;
  color: #55606c !important; white-space: nowrap;
}
.badge.text-bg-primary, .badge.bg-primary { color: #0b5ed7 !important; }
.badge.text-bg-success, .badge.bg-success { color: #157347 !important; }
.badge.text-bg-danger, .badge.bg-danger { color: #b02a37 !important; }
.badge.text-bg-warning, .badge.bg-warning { color: #9a6700 !important; }
.badge.text-bg-info, .badge.bg-info { color: #087990 !important; }
.badge.text-bg-dark, .badge.bg-dark { color: #212529 !important; }
.badge.text-bg-light, .badge.text-bg-secondary, .badge.bg-secondary { color: #6c757d !important; }

.alert { border-radius: 9px; border-width: 1px 1px 1px 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); padding: .65rem .9rem; }
.alert-dismissible { padding-right: 2.75rem; }
.alert-dismissible .btn-close { padding: .85rem .9rem; }
.alert-light { background: #fff; }

.nav-tabs { border-bottom: 1px solid var(--line); gap: .15rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; color: #4b5563; font-weight: 500; padding: .45rem .8rem; }
.nav-tabs .nav-link:hover { background: #eceff3; color: #111827; border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--blue-deep); background: transparent; border-bottom-color: var(--blue); font-weight: 600; }
.tab-content.card { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

.dropdown-menu { border: 1px solid var(--line); border-radius: 10px; padding: .35rem; box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 36px -14px rgba(15, 23, 42, .35); font-size: .88rem; }
.dropdown-item { border-radius: 6px; padding: .35rem .65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: #eef3fb; }
.dropdown-item .bi { width: 1.1rem; display: inline-block; color: #6c757d; }

.modal-content { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -25px rgba(15, 23, 42, .55), 0 4px 12px rgba(15, 23, 42, .12); }
.modal-header { background: linear-gradient(180deg, #fff, #f6f7f9); border-radius: 14px 14px 0 0; padding: .8rem 1rem; }
.modal-title { font-size: 1rem; font-weight: 650; }
.modal-footer { background: #fafbfc; border-radius: 0 0 14px 14px; padding: .65rem 1rem; }
.offcanvas-lg .offcanvas-header { border-bottom: 1px solid var(--line); }

details > summary { cursor: pointer; }
.approval-box summary { cursor: pointer; color: #55606c; }
.diff-old { background: #fde2e1; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.diff-new { background: #d9f2df; border-radius: 3px; padding: 0 2px; }
.tree-module > summary { font-weight: 600; }
.override-flag { background: #fff3cd !important; }

/* bottom bar of long forms: stays in reach while scrolling */
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -.25rem; padding: .7rem .75rem;
  background: rgba(245, 246, 248, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 14px -12px rgba(15, 23, 42, .25);
}

/* ------------------------------------------------------------------ log in */
.login-bg { background: radial-gradient(1200px 600px at 15% -10%, #3a6b9c 0%, rgba(58, 107, 156, 0) 60%), linear-gradient(135deg, #1f2d3d, #2f5d8a); min-height: 100vh; }
.login-card { border: 0; border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -20px rgba(8, 15, 26, .65), 0 8px 18px rgba(8, 15, 26, .25); }
.login-card .brand-tile { width: 44px; height: 44px; border-radius: 12px; font-size: 1.35rem; }
.login-card .form-control { padding: .6rem .75rem; }
.login-card .btn { padding: .6rem; font-weight: 600; }

/* ------------------------------------------------------------------ point of sale */
.pos-shell { background: #1e2530; min-height: 100vh; color: #eee; }
.pos-shell .card { background: #fff; color: #222; }
.pos-cart { max-height: 55vh; overflow-y: auto; }
.pos-total { font-size: 2.3rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #111827; }
.pos-key { font-size: 1.05rem; }
.tender-name { width: 138px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 500; }
#scan.form-control-lg { border-radius: 10px; font-size: 1.05rem; box-shadow: var(--inset), 0 0 0 0 transparent; }
.bt-note { max-width: 420px; }
.receipt {
  font-family: "Courier New", monospace; max-width: 320px; margin: 0 auto; background: #fff; padding: 14px 12px; font-size: .8rem; color: #111;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 16px 30px -18px rgba(15, 23, 42, .45); border-radius: 3px;
}

/* ------------------------------------------------------------------ printed documents */
.doc { background: #fff; max-width: 900px; margin: 0 auto; padding: 36px 40px; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 22px 40px -24px rgba(15, 23, 42, .4); }
.doc h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.doc .table thead th { background: #f3f5f8; }
.journal-print tfoot td { font-weight: 700; border-top: 2px solid #2b333d !important; border-bottom: 3px double #2b333d !important; background: #fff !important; }
.signatures .sig-label { color: #55606c; }
.signatures .sig-line { border-bottom: 1px solid #2b333d; min-height: 2.6rem; padding-bottom: .2rem; display: flex; align-items: flex-end; justify-content: center; text-align: center; font-weight: 600; }
body.bare { background: #eceff3; }

/* ------------------------------------------------------------------ tablets and phones
   The window itself never slides sideways: a table too wide for the screen is swiped inside its own
   box (app.js puts one round every table that has not got one). Everything else stacks, and every
   box, button and row is big enough to hit with a fingertip. */
html { -webkit-text-size-adjust: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 1199.98px) {
  .app-search .form-control { width: 220px; }
}

@media (max-width: 991.98px) {
  .page-bar { padding: .5rem .7rem; }
  .app-bar .navbar-brand { font-size: .96rem; }
  .main-area { min-width: 0; }
}

@media (max-width: 767.98px) {
  /* a box with text under 16px makes the phone zoom the page in when it is tapped */
  .form-control, .form-select, .form-control-sm, .form-select-sm, .combo-input { font-size: 16px; }
  .form-control-lg, .form-select-lg { font-size: 1.05rem; }
  .form-label { font-size: .78rem; }

  /* room for a fingertip */
  .btn:not(.btn-link):not(.btn-close) { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { padding: .4rem .7rem; font-size: .85rem; }
  .form-check-input { width: 1.15em; height: 1.15em; margin-top: .15em; }
  .table-sm > :not(caption) > * > * { padding: .45rem .5rem; }
  .menu-link { padding-top: .45rem; padding-bottom: .45rem; }
  .dropdown-item { padding: .5rem .7rem; }

  .main-area { padding: .75rem !important; }
  .card > .card-body { padding: .8rem; }
  .page-bar { flex-direction: column; align-items: stretch; margin-bottom: .75rem; }
  .page-bar .page-actions { gap: .35rem; }
  .page-bar .page-actions > form { flex: 1 1 100%; }
  .page-bar .page-actions .form-select { width: 100%; }

  /* totals, receipts and printed documents fill the screen instead of sitting in a fixed-width column */
  .totals-box, .card-body > .totals-box, .card .totals-box { min-width: 0; width: 100%; margin-left: 0 !important; }
  .doc { padding: 18px 14px; }
  .report-head.has-logo { flex-direction: column; gap: .5rem; text-align: center; }

  /* tabs and long lists swipe rather than wrap into a stack of stubs */
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }

  .modal-dialog { margin: .6rem; }
  .class-confirm .modal-footer { flex-wrap: wrap; }
  .class-confirm .modal-footer .btn { flex: 1 1 auto; }
  .sticky-actions { margin: 0 -.75rem; padding: .6rem .75rem; flex-wrap: wrap; }
  .sticky-actions .form-control { max-width: none !important; }

  /* columns still out of sight: the edge of the table is shaded, so it is clear it can be swiped */
  .table-responsive.has-more { box-shadow: inset -14px 0 12px -12px rgba(15, 23, 42, .4); }
  .pos-cart .table-responsive.has-more { box-shadow: none; }   /* the cart fits: nothing to swipe to */

  /* a long list of page numbers wraps onto another line instead of pushing the page sideways */
  .pagination { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  .pagination .page-link { padding: .35rem .55rem; font-size: .85rem; }

  .combo-list { font-size: .95rem; }
  .combo-opt { padding: .5rem .6rem; }
  .kpi .value { font-size: 1.3rem; }
  .pos-total { font-size: 1.9rem; }
  .tender-name { width: 104px; }
  .logo-targets { max-height: 320px; }
  .item-search-grid { max-height: 60vh; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .reminder-item { flex-direction: column; gap: .15rem; }
  .reminder-item .text-end { text-align: left !important; }
}

@media (max-width: 575.98px) {
  .page-bar h1 { font-size: 1.05rem; }
  .page-bar .page-actions > .btn, .page-bar .page-actions > a.btn { flex: 1 1 auto; }
  .app-bar .company { display: none; }
}

@media print {
  .no-print, .navbar, .sidebar, .btn, form.filters, .alert, .page-bar .page-actions { display: none !important; }
  .table-responsive { overflow: visible !important; }
  body, body.bare { background: #fff; font-size: 11px; }
  .main-area { padding: 0 !important; }
  .card, .page-bar, .doc, .receipt { border: none; box-shadow: none; background: #fff; }
  .page-bar { padding: 0; min-height: 0; }
  .doc { padding: 0; max-width: none; }
  .table thead th { background: #fff !important; box-shadow: none; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------ small fixes */
.table td a { white-space: nowrap; }
.table td.wrap-link a, .list-group-item a { white-space: normal; }
.table-tight > :not(caption) > * > * { padding-left: .3rem; padding-right: .3rem; }
.table-tight thead th, .table-tight td .badge { white-space: normal; }
.table-tight thead th { vertical-align: bottom; line-height: 1.2; }
.card.card-body > [data-add-row], .card-body > [data-add-row], .tab-pane > [data-add-row] { align-self: flex-start; width: auto; }
.quick-group { display: grid; grid-template-columns: 150px 1fr; gap: .35rem .75rem; align-items: start; padding: .45rem 0; border-top: 1px solid var(--line-soft); }
.quick-group:first-child { border-top: 0; padding-top: 0; }
.quick-group .quick-name { font-size: .78rem; font-weight: 650; color: #55606c; padding-top: .3rem; }
.quick-group .quick-links { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 575.98px) { .quick-group { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ saving without a class */
.class-confirm .modal-dialog { max-width: 480px; }
.class-confirm .modal-header { align-items: center; gap: .7rem; }
.class-confirm-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 1rem; color: #8a5a00;
  background: linear-gradient(180deg, #fff6dc, #ffe9b0); border: 1px solid #f0d48a; box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(120, 80, 0, .18);
}
.class-confirm .modal-footer { justify-content: space-between; gap: .5rem; flex-wrap: nowrap; }
.class-confirm .modal-footer .btn { white-space: nowrap; }
select.class-missing { border-color: #e0a100; box-shadow: var(--inset), 0 0 0 .2rem rgba(255, 193, 7, .22); }
/* stock below zero: Yes / No before saving */
.neg-stock-confirm .modal-dialog { max-width: 540px; }
.neg-stock-confirm .neg-ico { color: #a3361f; background: linear-gradient(180deg, #ffece6, #ffd6c9); border-color: #f2b4a2; }
.neg-stock-confirm .neg-stock-list { max-height: 40vh; overflow: auto; }
.neg-stock-confirm .neg-stock-list th { position: sticky; top: 0; }
.neg-stock-confirm .modal-footer .btn { min-width: 96px; }
.neg-stock-alert ul { padding-left: 1.1rem; }

/* POS entry line: quantity first, then the item */
.pos-entry { display: grid; grid-template-columns: 120px 1fr; gap: .6rem; align-items: start; }
.pos-entry .form-label { display: block; line-height: 1.2; }
.pos-entry .form-label { margin-bottom: .2rem; }
.pos-entry .form-control { height: 46px; }
.pos-entry-qty .form-control { font-weight: 650; font-variant-numeric: tabular-nums; }
#posForm .btn-group > .btn { font-size: .84rem; padding: .42rem .3rem; white-space: nowrap; }
.pos-site-name { font-size: .84rem; color: #55606c; white-space: nowrap; align-self: center; }
.pos-default-grid { max-height: 460px; overflow-y: auto; }
.pos-default-grid thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, #f8f9fb, #f0f2f5); }
/* on a phone the three columns will not fit side by side, so each user becomes a small block of their own */
@media (max-width: 575.98px) {
  .pos-default-grid table, .pos-default-grid tbody, .pos-default-grid tr, .pos-default-grid td { display: block; width: auto; }
  .pos-default-grid thead { display: none; }
  .pos-default-grid tbody tr { padding: .55rem .15rem; border-bottom: 1px solid var(--line-soft); }
  .pos-default-grid tbody tr:last-child { border-bottom: 0; }
  .pos-default-grid td { border: 0; padding: .15rem 0; }
  .pos-default-grid td[data-label]::before {
    content: attr(data-label); display: block; font-size: .72rem; font-weight: 650; color: #55606c; margin-bottom: .1rem;
  }
}
@media (max-width: 575.98px) { .pos-entry { grid-template-columns: 88px 1fr; } }

/* the cart: how wide each column is on a full-size screen */
#cartTable .c-qty { width: 90px; }
#cartTable .c-uom { width: 80px; }
#cartTable .c-price { width: 120px; }
#cartTable .c-disc { width: 150px; }

/* ------------------------------------------------------------------ the cart on a phone held upright
   On a narrow screen the discount box and its % / Amt picker sat side by side and took more room than
   any other column, which squeezed the quantity and the price down to nothing and pushed the amount off
   the edge. Here every column is given a share of the width, the discount box and its picker are stacked
   one above the other, and the type is sized so the figures are read without swiping anything.
   The unit column only appears when a line in the cart is actually sold in one.
   (The boxes are smaller than the 16px that stops an iPhone zooming in when a box is tapped: a till or a
   counter phone is what this screen is for, and the figures have to be readable at a glance.) */
@media (max-width: 575.98px) {
  .pos-cart .table-responsive, .pos-cart { overflow-x: hidden; }
  #cartTable { table-layout: fixed; width: 100%; }
  #cartTable > thead > tr > th, #cartTable > tbody > tr > td { padding: .3rem .2rem; }
  #cartTable > thead > tr > th:first-child, #cartTable > tbody > tr > td:first-child { padding-left: .45rem; }
  #cartTable input, #cartTable select { width: 100%; max-width: 100%; min-width: 0; font-size: .8rem; padding-left: .25rem; padding-right: .25rem; }
  #cartTable thead th { font-size: .66rem; letter-spacing: 0; white-space: nowrap; }
  /* the heading is shortened rather than wrapped in half */
  #cartTable thead th.c-disc { font-size: 0; }
  #cartTable thead th.c-disc::after { content: "Disc."; font-size: .66rem; font-weight: 650; }
  #cartTable .num { font-size: .78rem; }
  #cartTable td:first-child .fw-semibold { font-size: .82rem; line-height: 1.15; }
  #cartTable td:first-child .small { font-size: .68rem; line-height: 1.15; }

  /* the discount: the figure on top, what it means underneath */
  #cartTable td:nth-child(5) .input-group { flex-direction: column; flex-wrap: nowrap; }
  #cartTable td:nth-child(5) .input-group > .form-control,
  #cartTable td:nth-child(5) .input-group > .form-select {
    width: 100% !important; flex: 0 0 auto; border-radius: 6px !important; font-size: .72rem; padding: .15rem .2rem;
  }
  #cartTable td:nth-child(5) .input-group > .form-select { margin-top: 2px; background-position: right .2rem center; background-size: 9px 6px; padding-right: .85rem; }
  #cartTable td:nth-child(3) .form-select { background-position: right .15rem center; background-size: 9px 6px; padding-right: .7rem; padding-left: .2rem; }

  /* the unit column is only there when something in the cart is sold by the unit */
  #cartTable > thead > tr > th:nth-child(3), #cartTable > tbody > tr > td:nth-child(3) { display: none; }
  #cartTable.has-uom > thead > tr > th:nth-child(3), #cartTable.has-uom > tbody > tr > td:nth-child(3) { display: table-cell; }

  #cartTable > thead > tr > th:nth-child(1) { width: 27%; }
  #cartTable > thead > tr > th:nth-child(2) { width: 13%; }
  #cartTable > thead > tr > th:nth-child(4) { width: 19%; }
  #cartTable > thead > tr > th:nth-child(5) { width: 17%; }
  #cartTable > thead > tr > th:nth-child(6) { width: 19%; }
  #cartTable > thead > tr > th:nth-child(7) { width: 5%; }
  #cartTable.has-uom > thead > tr > th:nth-child(1) { width: 20%; }
  #cartTable.has-uom > thead > tr > th:nth-child(2) { width: 12%; }
  #cartTable.has-uom > thead > tr > th:nth-child(3) { width: 12%; }
  #cartTable.has-uom > thead > tr > th:nth-child(4) { width: 17%; }
  #cartTable.has-uom > thead > tr > th:nth-child(5) { width: 15%; }
  #cartTable.has-uom > thead > tr > th:nth-child(6) { width: 19%; }
  #cartTable.has-uom > thead > tr > th:nth-child(7) { width: 5%; }
  #cartTable td:last-child .btn { min-height: 0; padding: 0; width: auto; }
  #cartTable td:last-child .bi { font-size: .82rem; }
}

/* the narrowest phones still in use: the same layout, a shade tighter */
@media (max-width: 409.98px) {
  #cartTable > thead > tr > th, #cartTable > tbody > tr > td { padding: .28rem .12rem; }
  #cartTable .num, #cartTable input, #cartTable select { font-size: .72rem; }
  #cartTable td:nth-child(5) .input-group > .form-control,
  #cartTable td:nth-child(5) .input-group > .form-select { font-size: .68rem; }
  #cartTable td:first-child .fw-semibold { font-size: .76rem; }
}

/* the matching items, drawn under the item box so they drop down on a phone as well as on a till */
.pos-entry { position: relative; }
/* Placed and sized by the register against the part of the window the on-screen keyboard is not
   covering, so the products stay in view when the phone is held on its side and the keyboard is up. */
.scan-list {
  position: fixed; z-index: 1080; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid #c5ccd6; border-radius: 10px; padding: .25rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 36px -14px rgba(15, 23, 42, .38);
}
.scan-opt { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .45rem .6rem; border-radius: 7px; cursor: pointer; line-height: 1.25; }
.scan-opt:hover, .scan-opt.is-hi { background: var(--blue-tint); }
.scan-opt .scan-text { min-width: 0; }
.scan-opt .scan-name { display: block; font-weight: 600; color: var(--ink); }
.scan-opt .scan-sub { display: block; font-size: .76rem; color: #7a8591; }
.scan-opt .scan-price { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; color: #2b333d; }
.scan-opt mark { background: #ffe9a8; padding: 0; border-radius: 2px; color: inherit; }
.scan-none { padding: .5rem .6rem; color: #7a8591; }
@media (max-width: 767.98px) {
  .scan-opt { padding: .6rem; }
  .scan-opt .scan-name { font-size: .95rem; }
}

/* The phone on its side, keyboard up: barely any height left. The entry row is made compact and the
   type in the list is brought down a step, so several products can be read at once in what is left. */
@media (max-height: 560px) {
  /* the page is brought up to the entry row itself, not to a gap below the bar */
  html { scroll-padding-top: 6px; }
  /* while the item box is being typed in, the top bar scrolls away with the page instead of staying
     pinned, which is most of the room the products need. It comes straight back on leaving the box. */
  body.entry-focus .navbar.app-bar { position: static; }
  .pos-entry { gap: .45rem; }
  .pos-entry .form-label { font-size: .7rem; margin-bottom: .1rem; line-height: 1.1; }
  .pos-entry .form-control { height: 38px; }
  #scan.form-control-lg, .pos-entry-qty .form-control { font-size: .95rem; }
  /* one product to a line, its code beside its name, so as many as possible can be read at a glance */
  .scan-opt { padding: .26rem .5rem; line-height: 1.2; }
  .scan-opt .scan-name, .scan-opt .scan-sub { display: inline; }
  .scan-opt .scan-name { font-size: .84rem; }
  .scan-opt .scan-sub { font-size: .7rem; margin-left: .4rem; }
  .scan-opt .scan-price { font-size: .82rem; }
  .scan-none { padding: .35rem .5rem; font-size: .82rem; }
  .combo-opt { padding: .3rem .5rem; }
  .page-bar { margin-bottom: .6rem; }
}

/* company block of print-outs and reports, with the optional logo */
.doc-company { display: flex; align-items: center; gap: .9rem; align-self: flex-start; }
.doc-logo { max-height: 64px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
.report-head.has-logo { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.report-head .report-logo { max-height: 58px; max-width: 160px; object-fit: contain; }
.receipt .receipt-logo { display: block; margin: 0 auto 6px; max-height: 54px; max-width: 70%; object-fit: contain; filter: grayscale(1); }

/* ------------------------------------------------------------------ searchable drop-downs (select[data-combo]) */
.combo { position: relative; }
.combo-src { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; opacity: 0; pointer-events: none; left: 0; bottom: 0; padding: 0 !important; border: 0 !important; }
.combo-input {
  padding-right: 1.7rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 14px 10px;
}
.combo-list {
  position: fixed; z-index: 1080; overflow-y: auto; background: #fff; border: 1px solid #c5ccd6; border-radius: 9px; padding: .25rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 36px -14px rgba(15, 23, 42, .38); font-size: .86rem;
}
.combo-opt { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; line-height: 1.3; }
.combo-opt.is-hi { background: #e8f0fe; }
.combo-opt.is-current { font-weight: 600; }
.combo-opt mark { background: #ffe9a8; padding: 0; border-radius: 2px; color: inherit; }
.combo-tail { color: #7a8591; white-space: nowrap; font-variant-numeric: tabular-nums; }
.combo-clear { color: #7a8591; font-style: italic; }
.combo-none { padding: .45rem .55rem; color: #7a8591; }


/* ------------------------------------------------------------------ asset maintenance */
.line-free > tbody > tr > td { padding: .2rem .2rem; border-bottom-color: transparent; vertical-align: middle; }
.line-free > tbody > tr > td:first-child { padding-left: .1rem; }
.line-free > thead > tr > th:first-child, .line-free > tfoot > tr > td:first-child { padding-left: .4rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.photo-tile { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: var(--ink); font-size: .74rem; min-width: 0; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #eef1f5; box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 6px 12px -8px rgba(15, 23, 42, .35); }
.photo-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #55606c; }
.photo-tile:hover img { border-color: #9db8e8; }

/* preventive maintenance */
.pm-state { font-weight: 650; font-size: .8rem; white-space: nowrap; }
.pm-state.overdue { color: #b42318; }
.pm-state.due { color: #b25e00; }
.pm-state.upcoming { color: #46515d; }
.pm-state.done { color: #7a8591; }
tr.pm-overdue > td:first-child { box-shadow: inset 3px 0 0 #d92d20; }
tr.pm-due > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.bell-btn { position: relative; color: #d6dbe1; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); border-radius: 8px; width: 34px; height: 31px; display: inline-grid; place-items: center; text-decoration: none; }
.bell-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.bell-btn .bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d92d20; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #212529; }
.bell-btn.is-quiet { opacity: .55; }
.reminder-list { max-height: 46vh; overflow-y: auto; }
.reminder-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line-soft); }
.reminder-item:first-child { border-top: 0; }

/* company logo settings */
.logo-preview { display: grid; place-items: center; min-height: 120px; padding: 1rem; border: 1px dashed #c5ccd6; border-radius: 10px; background: #fff; box-shadow: var(--inset); }
.logo-preview img { max-width: 100%; max-height: 110px; object-fit: contain; }
.logo-targets { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--inset); }
.logo-group + .logo-group { border-top: 1px solid var(--line-soft); }
.logo-group-head { display: flex; justify-content: space-between; align-items: center; padding: .4rem .75rem; background: linear-gradient(180deg, #f8f9fb, #f0f2f5); font-weight: 650; font-size: .82rem; position: sticky; top: 0; z-index: 1; }
.logo-group-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .1rem .75rem; padding: .45rem .75rem .6rem; font-size: .84rem; }
.line-free input, .line-free select { min-width: 0; padding-left: .4rem; padding-right: .4rem; }
.line-free input[type=date] { padding-right: .15rem; font-size: .8rem; }

/* budgets and forecasts */
.budget-grid th.num { min-width: 78px; }
.budget-grid .budget-cell { min-width: 72px; padding-left: .25rem; padding-right: .25rem; }
.budget-grid tbody td { padding-top: .15rem; padding-bottom: .15rem; }

/* set item prices and levels */
.price-grid th.num { min-width: 96px; }
.price-grid tbody td { padding-top: .15rem; padding-bottom: .15rem; }
.price-grid input.num { text-align: right; }

/* customized reports: the Customize panel choices */
.report-head .subtitle { font-size: .9rem; color: #46515d; margin-top: .1rem; }
.report-table.rt-tight td, .report-table.rt-tight th { padding: .12rem .4rem; }
.report-table.rt-roomy td, .report-table.rt-roomy th { padding: .55rem .7rem; }
.report-table.rt-grid td, .report-table.rt-grid th { border-right: 1px solid var(--line-soft); }
.report-table.rt-grid td:last-child, .report-table.rt-grid th:last-child { border-right: 0; }
.report-table.rt-font-small { font-size: .78rem; }
.report-table.rt-font-large { font-size: 1rem; }
.sign-lines { page-break-inside: avoid; }
.sign-lines .sign-line { border-bottom: 1px solid #333; height: 2.4rem; margin-bottom: .2rem; }
#rptCols tbody tr { cursor: default; }
#rptCols tbody tr[draggable="true"] { background: #eef2f7; }

@media print {
  body.print-landscape { width: 100%; }
  .report-table.rt-font-small { font-size: 9px; }
  .report-table.rt-font-large { font-size: 13px; }
}


/* searching for items: one choice per transaction */
.item-search-grid { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--inset); }
.item-search-grid thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, #f8f9fb, #f0f2f5); }
.item-search-grid tbody td { padding-top: .3rem; padding-bottom: .3rem; }
.item-search-grid tr.is-different td:first-child { font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.item-search-grid .form-check-input { margin: 0; }
/* on a phone the two choices will not sit beside the name, so each transaction becomes a block of its own */
@media (max-width: 575.98px) {
  .item-search-grid table, .item-search-grid tbody, .item-search-grid tr, .item-search-grid td { display: block; width: auto; }
  .item-search-grid thead { display: none; }
  .item-search-grid tbody tr { padding: .5rem .15rem; border-bottom: 1px solid var(--line-soft); }
  .item-search-grid tbody tr:last-child { border-bottom: 0; }
  .item-search-grid td { border: 0; padding: .1rem 0; text-align: left !important; }
  .item-search-grid td[data-label] {
    display: flex; align-items: center; gap: .5rem; padding: .25rem .1rem .25rem .6rem;
  }
  .item-search-grid td[data-label]::after { content: attr(data-label); font-size: .82rem; color: #38424d; }
  .item-search-grid tr.is-different td:first-child { box-shadow: inset 3px 0 0 var(--blue); padding-left: .5rem; }
}

/* ------------------------------------------------------------------ Find */
.bell-btn.find-btn { width: auto; padding: 0 .6rem; gap: .35rem; display: inline-flex; align-items: center; font-size: .84rem; }
.bell-btn.find-btn .find-btn-text { font-weight: 500; }
@media (max-width: 575.98px) { .bell-btn.find-btn { padding: 0; width: 34px; justify-content: center; } .bell-btn.find-btn .find-btn-text { display: none; } }

.find-tabs { border-bottom: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.find-tabs .nav-link { background: transparent; }
.find-tabs .nav-link.active { background: var(--surface); border: 1px solid var(--line); border-bottom-color: var(--surface); border-radius: 8px 8px 0 0; }
.find-card { border-top-left-radius: 0; }

/* Advanced: the filter list, the editor of the one picked, and the current choices */
.find-adv { display: grid; grid-template-columns: minmax(200px, 250px) minmax(260px, 1fr) minmax(260px, 1fr); gap: 1rem; }
.find-col { min-width: 0; }
.find-col-head { font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: #6c757d; margin-bottom: .4rem; }
.find-filters {
  max-height: 330px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--inset); padding: .2rem;
}
.find-filter {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: 0; background: none;
  padding: .32rem .5rem; border-radius: 6px; font-size: .86rem; color: var(--ink); line-height: 1.25;
}
.find-filter:hover { background: #eef1f5; }
.find-filter.is-active { background: var(--blue-tint); color: var(--blue-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.find-filter-mark { color: #157347; visibility: hidden; font-size: .95rem; }
.find-filter.is-set .find-filter-mark { visibility: visible; }
.find-filter.is-set { font-weight: 600; }
.find-col-edit {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; background: linear-gradient(180deg, #fcfdfe, #f7f8fa);
  box-shadow: 0 1px 0 #fff inset;
}
.find-editor-title { font-weight: 650; font-size: .95rem; margin-bottom: .15rem; }
.find-pick {
  max-height: 232px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--inset); padding: .15rem;
}
.find-pick-row { display: flex; align-items: flex-start; gap: .45rem; padding: .28rem .45rem; border-radius: 5px; font-size: .85rem; cursor: pointer; margin: 0; line-height: 1.3; }
.find-pick-row:hover { background: #f1f4f8; }
.find-pick-row .form-check-input { margin-top: .12rem; flex: 0 0 auto; }
.find-pick-row:has(input:checked) { background: var(--blue-tint); }
.find-choices { font-size: .85rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.find-choices thead th { font-size: .7rem; }
.find-choices tbody tr { cursor: pointer; }
.find-choices td:nth-child(2) { color: #38424d; }

/* results */
.find-grid tbody tr.find-row { cursor: pointer; }
.find-grid tbody tr.find-row:focus { outline: none; }
.find-grid tbody tr.is-picked > td { background: var(--blue-tint) !important; }
.find-grid tbody tr.is-picked > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.find-grid tbody tr.is-void > td { color: #8a94a0; }
.find-grid .find-void { color: #b02a37; font-weight: 650; font-size: .76rem; margin-left: .25rem; }
.find-grid td.find-wrap { white-space: normal; min-width: 8rem; }
.find-grid td.find-memo { max-width: 22rem; }
.find-grid thead a:hover { text-decoration: none; color: var(--blue-deep) !important; }

@media (max-width: 1199.98px) {
  .find-adv { grid-template-columns: minmax(190px, 230px) 1fr; }
  .find-col-choices { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .find-adv { grid-template-columns: 1fr; gap: .75rem; }
  .find-filters { max-height: 200px; }
  .find-pick { max-height: 45vh; }
  .find-filter, .find-pick-row { padding-top: .45rem; padding-bottom: .45rem; }
}
/* on a phone each transaction found is one block: date, type, number and amount on top, the name under
   them, then the account and the memo, so nothing has to be swiped into view */
@media (max-width: 575.98px) {
  .find-grid thead { display: none; }
  .find-grid, .find-grid tbody { display: block; width: 100%; }
  .find-grid tr.find-row {
    display: grid; grid-template-columns: auto auto 1fr auto; column-gap: .55rem; row-gap: .1rem; align-items: baseline;
    padding: .6rem .8rem; border-bottom: 1px solid var(--line-soft);
  }
  .find-grid tr.find-row > td { display: block; border: 0; padding: 0 !important; background: none !important; min-width: 0; max-width: none; }
  .find-grid tr.find-row > td:nth-child(1) { grid-column: 1; grid-row: 1; color: #55606c; font-size: .82rem; }
  .find-grid tr.find-row > td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: .82rem; }
  .find-grid tr.find-row > td:nth-child(3) { grid-column: 3; grid-row: 1; font-size: .82rem; }
  .find-grid tr.find-row > td:nth-child(7) { grid-column: 4; grid-row: 1; font-weight: 650; }
  .find-grid tr.find-row > td:nth-child(4) { grid-column: 1 / -1; font-weight: 600; }
  .find-grid tr.find-row > td:nth-child(5), .find-grid tr.find-row > td:nth-child(6) { grid-column: 1 / -1; font-size: .78rem; color: #6c757d; }
  .find-grid tr.find-row > td:empty { display: none; }
  .find-grid tr.find-row.is-picked { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
  .find-grid tr.find-row.is-picked > td:first-child { box-shadow: none; }
  .find-grid tr:not(.find-row) > td { display: block; }
}
.find-sort { display: none; width: auto; }
@media (max-width: 575.98px) { .find-sort { display: block; flex: 1 1 100%; } }

/* ------------------------------------------------------------------ designed reports
   Every choice of the Design panel is a class or a CSS variable on #rptDoc, so a change can be
   shown on the report the moment it is picked. */
.rpt-doc {
  --rh-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --rc-font: var(--rh-font); --rb-font: var(--rh-font);
  --rt-size: 1.3rem; --rco-size: .95rem; --rc-size: .76rem; --rh-color: #111827;
}
.rpt-doc .report-head { font-family: var(--rh-font); }
.rpt-doc .report-head .company { font-size: var(--rco-size); color: var(--rh-color); opacity: .82; }
.rpt-doc .report-head .title { font-size: var(--rt-size); color: var(--rh-color); }
.rpt-doc .report-head .subtitle { color: var(--rh-color); opacity: .78; }
.rpt-doc .report-head .company-line, .rpt-doc .report-head .head-lines { font-size: .82rem; color: #46515d; }
.rpt-doc .report-head .basis { color: #55606c; margin-top: .15rem; }
.rpt-doc.rt-upper .report-head .title { text-transform: uppercase; letter-spacing: .03em; }
.rpt-doc.rh-norule .report-head { border-bottom: 0; padding-bottom: 0; }
.rpt-doc.rh-align-left .report-head { text-align: left; }
.rpt-doc.rh-align-right .report-head { text-align: right; }
.rpt-doc.rh-align-left .report-head.has-logo { justify-content: flex-start; }
.rpt-doc.rh-align-right .report-head.has-logo { justify-content: flex-start; flex-direction: row-reverse; }
.rpt-doc.rh-align-center .report-head.has-logo .report-head-text { text-align: left; }

.rpt-doc .report-table { font-family: var(--rb-font); }
.rpt-doc .report-table thead th { font-family: var(--rc-font); font-size: var(--rc-size); }
.rpt-doc.rc-light .report-table thead th { font-weight: 500; }
.rpt-doc.rc-upper .report-table thead th { text-transform: uppercase; letter-spacing: .05em; }
.rpt-doc.rc-wrap .report-table thead th { white-space: normal; vertical-align: bottom; }
.rpt-doc.rc-shade-none .report-table thead th { background: none; box-shadow: none; }
.rpt-doc.rc-shade-dark .report-table thead th { background: linear-gradient(180deg, #353c45, #2b333d); color: #fff; border-bottom-color: #1f2429; box-shadow: none; }
.rpt-doc.rc-shade-blue .report-table thead th { background: linear-gradient(180deg, #2b7bf1, #0b5ed7); color: #fff; border-bottom-color: #0a4fb8; box-shadow: none; }
.rpt-doc.rc-shade-dark .report-table thead th a, .rpt-doc.rc-shade-blue .report-table thead th a { color: #fff !important; }
.rpt-doc.rc-align-left .report-table thead th { text-align: left !important; }
.rpt-doc.rc-align-center .report-table thead th { text-align: center !important; }
.rpt-doc.rt-box .report-table { border: 1px solid #2b333d; }
.rpt-doc.rt-plain-groups .report-table tr.group-row td { background: none; }
.rpt-doc.rt-total-single .report-table tr.total-row td { border-bottom: 0; }
.rpt-doc.rt-total-bold .report-table tr.total-row td { border-top: 0; border-bottom: 0; background: none; }
.rpt-doc.rt-total-shaded .report-table tr.total-row td { border-top: 0; border-bottom: 0; background: #e5ebf3; }

/* one column at a time: width and lining up */
.report-table .rcw-narrow { width: 1%; white-space: nowrap; }
.report-table .rcw-normal { min-width: 8rem; }
.report-table .rcw-wide { min-width: 16rem; white-space: normal; }
.report-table td.rcw-wide a { white-space: normal; }
.report-table .rca-left { text-align: left !important; }
.report-table .rca-center { text-align: center !important; }
.report-table .rca-right { text-align: right !important; }

/* the foot */
.rpt-doc .report-foot { margin-top: .9rem; font-size: .82rem; color: #38424d; font-family: var(--rb-font); }
.rpt-doc.rf-rule .report-foot { border-top: 1px solid #c3cad4; padding-top: .5rem; }
.rpt-doc.rf-rule .report-foot[hidden] + .report-printed { border-top: 1px solid #c3cad4; padding-top: .5rem; }
.rpt-doc.rf-align-center .report-foot, .rpt-doc.rf-align-center .report-printed { text-align: center; }
.rpt-doc.rf-align-right .report-foot, .rpt-doc.rf-align-right .report-printed { text-align: right; }
.sign-lines .sign-name { font-weight: 600; font-size: .86rem; margin-top: .15rem; }

/* taking a row out, while the Design panel is open */
.rpt-rowhide { display: none; }
.rpt-doc.designing .rpt-rowhide {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .35rem; padding: 0; vertical-align: -3px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #6c757d; font-size: .72rem; opacity: .45;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .08); cursor: pointer;
}
.rpt-doc.designing tr:hover .rpt-rowhide, .rpt-doc.designing .rpt-rowhide:focus { opacity: 1; }
.rpt-doc.designing .rpt-rowhide:hover { color: #b02a37; border-color: #e3a2a9; }
.report-table tr.rpt-row-out > td { opacity: .38; text-decoration: line-through; }

/* phones and small tablets: a report swipes sideways inside its own box, so each row keeps to one line and
   stays easy to follow across; only long free text (memos, descriptions) wraps, in a column wide enough to read */
@media screen and (max-width: 991.98px) {
  .report-table td, .report-table th { white-space: nowrap; }
  .report-table td.rc-long { white-space: normal; min-width: 15rem; }
  .report-table td.rc-long a, .report-table td.rcw-wide { white-space: normal; }
}
.report-table tr.rpt-row-out .rpt-rowhide { opacity: 1; color: #b02a37; border-color: #e3a2a9; text-decoration: none; }

/* the Design panel */
.rpt-designer { border-color: #c9d6ea; box-shadow: var(--raise-2); }
.rpt-designer-head { padding-bottom: 0; background: linear-gradient(180deg, #fbfcfe, #f1f4f9) !important; }
.rpt-designer-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rpt-designer-tabs::-webkit-scrollbar { display: none; }
.rpt-designer-tabs .nav-link { white-space: nowrap; font-size: .84rem; padding: .45rem .75rem; }
.rpt-designer-tabs .nav-link.active { background: var(--surface); border: 1px solid var(--line); border-bottom-color: var(--surface); }
.rpt-designer .tab-content { min-height: 180px; }
.rd-cols-box { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rd-cols thead th { position: sticky; top: 0; z-index: 1; }
.rd-cols td { vertical-align: middle; }
.rd-cols .rd-head { min-width: 150px; }
.rd-cols .rd-w, .rd-cols .rd-a { min-width: 96px; }
.rd-cols .rd-move .btn { width: 22px; }
.rd-cols tr.is-dragging { opacity: .4; }
.rd-cols tr.rd-related { background: #fbfcfe; }
.rd-cols tr.rd-related .rd-col-name { color: #3b4a5e; }
.rd-cols tr.rd-related.is-on { background: #f0f6ff; }
.rd-cols tr.rd-related .rd-col-from { font-size: .72rem; }
.rd-cols tr.rd-related td:first-child { box-shadow: inset 3px 0 0 #c9d6ea; }
.rd-cols tr.rd-related.is-on td:first-child { box-shadow: inset 3px 0 0 var(--brand, #0b5ed7); }
.rd-cols tr.rd-miss { display: none; }
.rd-cols tr.rd-flash td { animation: rdFlash 1.5s ease-out; }
@keyframes rdFlash { 0% { background: #dbe8ff; } 100% { background: transparent; } }
.rd-cols-tools .rd-cols-find { width: 240px; max-width: 100%; }
.rd-cols-tools .rd-cols-jump { font-size: .8rem; }
.rd-grip-cell { width: 1%; cursor: grab; }
.rd-sub { font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: #6c757d; margin: .15rem 0 .4rem; }
.rd-rowlist { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 210px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--inset); }
.rd-rowlist:empty { display: none; }
.rd-rowlist li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem .6rem; border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.rd-rowlist li:last-child { border-bottom: 0; }
.rd-rowlist li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-designer-foot { position: sticky; bottom: 0; z-index: 3; background: rgba(248, 249, 251, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rd-pending { color: #9a6700; font-weight: 600; }

@media (max-width: 767.98px) {
  .rd-cols .rd-head { min-width: 120px; }
  .rpt-designer .tab-content { min-height: 0; }
}

@media print {
  .rpt-rowhide { display: none !important; }
  /* shading chosen on the Design panel prints (the plain light grey still prints white, as before) */
  .rpt-doc.rc-shade-dark .report-table thead th { background: #2b333d !important; color: #fff !important; }
  .rpt-doc.rc-shade-blue .report-table thead th { background: #0b5ed7 !important; color: #fff !important; }
  .rpt-doc.rt-box .report-table { border: 1px solid #2b333d !important; }
  .rpt-doc .report-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rpt-doc.rt-total-shaded .report-table tr.total-row td, .rpt-doc .report-table tr.group-row td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* a long row of page numbers (the audit trail of a busy company) wraps instead of pushing the page sideways, at any width */
.pagination { flex-wrap: wrap; row-gap: .25rem; }

/* ------------------------------------------------------------------ several companies: log-in, join page, company and platform pages */
.login-join { font-size: .86rem; color: var(--muted); text-align: center; }
.join-wrap { max-width: 560px; padding-top: 7vh; padding-bottom: 4vh; }
.join-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }
.join-code::placeholder { letter-spacing: .04em; text-transform: none; font-family: inherit; font-size: .95rem; }
.join-done { text-align: center; padding: .5rem 0 1rem; }
.join-done > .bi { font-size: 2.4rem; color: var(--blue); display: block; margin-bottom: .4rem; }
.join-done p { color: var(--ink-soft); }

.platform-strip {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 1rem; font-size: .84rem;
  background: linear-gradient(180deg, #fff8e1, #fdf0c4); color: #6b4e00; border-bottom: 1px solid #ecd48a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 3px 8px -6px rgba(107, 78, 0, .45);
  position: sticky; top: var(--bar-h); z-index: 1020;
}
.platform-strip a { margin-left: auto; font-weight: 600; color: #6b4e00; }

.code-card { border-left: 4px solid var(--blue); box-shadow: var(--raise-2); }
.code-big, .mc-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.9rem; font-weight: 700; letter-spacing: .14em;
  color: #0b3d91; line-height: 1.2; margin: .15rem 0 .25rem;
}
.mc-code { font-size: 1.35rem; }
.code-inline { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .06em; color: #0b3d91; }
.mc-fact-label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.mc-fact { height: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff, #f8fafc); box-shadow: var(--raise-1); }
.mc-fact-value { font-size: 1.2rem; font-weight: 650; margin: .15rem 0; }
.mc-done { border-left: 4px solid var(--bs-success); box-shadow: var(--raise-2); }
.mc-steps li { margin-bottom: .35rem; }
.company-facts dt { font-weight: 500; color: var(--muted); }
.company-facts dd { margin-bottom: .35rem; overflow-wrap: anywhere; }

.tab-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.nav-link.active .tab-count { color: var(--blue-deep); }
.company-users td { vertical-align: middle; }
.user-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .84rem; white-space: nowrap; }
.user-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .25); }
.us-active { color: #198754; }
.us-pending { color: #b35c00; }
.us-inactive, .us-rejected { color: #6c757d; }
.us-locked { color: #b02a37; }
.co-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; }
.co-state::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .25); }
.co-active { color: #198754; }
.co-inactive { color: #6c757d; }
.co-provisioning { color: #b35c00; }
.co-failed { color: #b02a37; }
.company-headline { font-size: .95rem; }

.user-tally .tally {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .25rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f6f8fb); box-shadow: var(--raise-1); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.user-tally .tally:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--raise-2); }
.tally-n { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tally-l { font-size: .74rem; color: var(--muted); }

.platform-link { display: flex; align-items: center; gap: .55rem; }
.platform-link .bi { width: 1.1rem; text-align: center; color: #6c757d; }
.platform-link.active .bi { color: var(--blue); }
.platform .menu-group { padding-top: .5rem; }

@media (max-width: 767.98px) {
  /* the user and company lists swipe sideways in their own box: each person stays on one line */
  .company-users td, .platform-companies td, .import-preview td { white-space: nowrap; }
}
@media (max-width: 575.98px) {
  .code-big { font-size: 1.45rem; letter-spacing: .1em; }
  .platform-strip { font-size: .8rem; }
  .platform-strip a { margin-left: 0; }
  .join-wrap { padding-top: 3vh; }
  .user-tally .col { flex: 0 0 33.333%; }
}

/* ------------------------------------------------------------------ Import from CSV: a checked file, ready to import */
.import-ready {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem;
  padding: .7rem .9rem; border: 1px solid #b7dfc5; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f3fbf6, #e8f6ee); box-shadow: var(--raise-1);
}
.import-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .6rem; font-size: .86rem; color: var(--ink-soft); }
.import-facts .n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.import-preview td { vertical-align: middle; }

/* ------------------------------------------------------------------ Help: the User's Manual (manual.php) */
.page-actions .help-btn { color: #475467; }
.help-btn .bi { margin-right: .3rem; }
@media (max-width: 575.98px) {
  .help-btn .help-btn-text { display: none; }
  .help-btn .bi { margin-right: 0; }
  /* on a phone the Help button sits beside the title instead of filling a row of its own */
  .page-bar { position: relative; }
  .page-bar .page-actions > .help-btn { position: absolute; top: .55rem; right: .6rem; flex: none; width: 38px; padding: 0; }
  .page-bar:has(.page-actions > .help-btn) h1 { padding-right: 2.9rem; min-height: 38px; display: flex; align-items: center; }
  .page-bar .page-actions:not(:has(> :not(.help-btn))) { display: contents; }
  /* the filter boxes of reports and lists take the full width of a phone (the buttons keep their size) */
  form.filters .row > .col-auto:has(select, .combo, input.form-control:not([type=checkbox]):not([type=radio])) { flex: 1 1 100%; max-width: 100%; }
  form.filters .row > .col-auto select, form.filters .row > .col-auto input.form-control, form.filters .row > .col-auto .combo { width: 100%; max-width: none !important; }
}
.login-help { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line-soft); text-align: center; font-size: .84rem; }
.login-help .bi { margin-right: .25rem; }

/* ------------------------------------------------------------------ Set Item Prices: the price levels panel */
.level-grid .col-xl-2dot4 { flex: 0 0 auto; width: 50%; }
@media (min-width: 768px) { .level-grid .col-xl-2dot4 { width: 33.3333%; } }
@media (min-width: 1200px) { .level-grid .col-xl-2dot4 { width: 20%; } }
.level-box { padding: .6rem .7rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--raise-1); height: 100%; }
.level-box.is-off { opacity: .7; background: #f3f4f6; }
.level-no { font-size: .72rem; font-weight: 600; color: #8a94a0; margin-bottom: .25rem; }

/* ------------------------------------------------------------------ processing order: totals of inputs and outputs */
.table tr.total-row td { font-weight: 650; border-top: 2px solid #c8cfd8; background: var(--surface-2); }
.doc .proc-variance td { padding: .15rem .6rem; }

/* ------------------------------------------------------------------ incremental search on the Customer, Vendor and Inventory Centers */
.live-search { position: relative; }
.live-search .bi-search { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #98a2ad; font-size: .8rem; pointer-events: none; }
.live-search .form-control { padding-left: 1.8rem; }
.live-count { font-size: .74rem; color: var(--muted); }
.live-count + .live-count { text-align: right; }
@media (max-width: 575.98px) { .live-count + .live-count { display: none; } }
.list-group-item.live-first, tr.live-first > td { box-shadow: inset 3px 0 0 var(--blue); }
.center-list .list-group-item { padding: .45rem .9rem; }
.site-strip { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid #cfe0fb; border-left: 4px solid var(--blue); border-radius: var(--radius-sm); background: #f1f6ff; font-size: .86rem; box-shadow: var(--raise-1); }
.site-strip a { margin-left: auto; white-space: nowrap; }
.live-hide { display: none !important; }

/* ------------------------------------------------------------------ supervisor approval: by password or by one-time code */
.approval-required { color: #9a6700; font-weight: 600; }
.approval-ways { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: .6rem .75rem .7rem; box-shadow: var(--raise-1); max-width: 640px; }
.approval-tabs { display: flex; gap: .35rem; margin-bottom: .6rem; flex-wrap: wrap; }
.approval-tab { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: var(--radius-sm); padding: .2rem .7rem; font-size: .8rem; box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(15, 23, 42, .06); }
.approval-tab .bi { margin-right: .25rem; }
.approval-tab.is-on { background: var(--blue-tint); border-color: #b6d0f7; color: var(--blue-deep); font-weight: 600; }
.approval-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; font-size: 1rem; width: 11.5em; max-width: 100%; }
.approval-code::placeholder { letter-spacing: .06em; font-size: .9rem; }

/* ------------------------------------------------------------------ Approval Codes */
.code-card { border-color: #b6d0f7; background: linear-gradient(180deg, #f7faff, #eef4fe); }
.code-big { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2.1rem; font-weight: 700; letter-spacing: .18em; color: var(--blue-deep); margin: .35rem 0; text-shadow: 0 1px 0 #fff; }
.code-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; font-weight: 600; color: #18212b; }
.code-mono.is-done { font-weight: 500; color: var(--muted); text-decoration: line-through; }
.code-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.code-stat { display: flex; flex-direction: column; padding: .55rem .8rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--raise-1); color: var(--ink-soft); font-size: .8rem; }
.code-stat:hover { text-decoration: none; border-color: #c9d6ea; }
.code-stat.is-on { background: var(--blue-tint); }
.code-stat-n { font-size: 1.25rem; font-weight: 700; color: #18212b; line-height: 1.1; }
.code-stat.state-open { border-left-color: #198754; } .code-stat.state-used { border-left-color: #0d6efd; } .code-stat.state-expired { border-left-color: #adb5bd; } .code-stat.state-cancelled { border-left-color: #dc3545; }
.code-state { font-weight: 600; } .code-state.state-open { color: #157347; } .code-state.state-used { color: #0b5ed7; } .code-state.state-expired { color: #6c757d; } .code-state.state-cancelled { color: #b02a37; }
@media (max-width: 575.98px) { .code-stats { grid-template-columns: repeat(2, 1fr); } .code-big { font-size: 1.6rem; } .code-list td, .code-list th { white-space: nowrap; } }

/* ------------------------------------------------------------------ Category List */
.cat-list td, .cat-list th { white-space: nowrap; }
.cat-list tfoot td { border-top: 1px solid var(--line); background: var(--surface-2); }

/* ------------------------------------------------------------------ reports: losses and slow stock */
.rpt-doc tr.income-loss > td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.rpt-doc tr.aged-stock > td:first-child { box-shadow: inset 3px 0 0 #e0a106; }

/* ------------------------------------------------------------------ shifts: the float, a shift's details and its correction */
.shift-sum tr.shift-float td { border-top: 1px solid #cbd2db; font-weight: 600; }
.shift-sum td.num { white-space: normal; overflow-wrap: anywhere; }
.shift-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .65rem 1rem; }
.shift-facts > div { display: flex; flex-direction: column; min-width: 0; }
.shift-facts span { font-size: .74rem; color: var(--muted); }
.shift-facts strong { font-weight: 600; overflow-wrap: anywhere; }
.shift-preview { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.shift-preview > div { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--inset); display: flex; flex-direction: column; }
.shift-preview span { font-size: .74rem; color: var(--muted); }
.shift-preview strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.shift-preview strong.neg { color: #b02a37; }

/* ------------------------------------------------------------------ Adjust Quantity/Value on Hand: Per Item / Per Batch */
.adj-entry { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--raise-1); }
.adj-entry-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.adj-entry-switch .btn { min-width: 11rem; }
.adj-entry-hint { flex: 1 1 260px; }
.adj-lines th { white-space: nowrap; font-size: .76rem; }
.adj-lines .adj-col-item { min-width: 260px; }
.adj-lines td input { min-width: 90px; }
.adj-lines td select.adj-uom { min-width: 112px; }
.adj-lines tr.is-changed > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.adj-lines tr.is-dup > td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.adj-lines .adj-onhand, .adj-lines .adj-curval { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.adj-item-form.adj-mode-qty .adj-v, .adj-item-form.adj-mode-qty .adj-v-note { display: none; }
.adj-item-form.adj-mode-value .adj-q { display: none; }
.adj-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; background: var(--surface-2); }
.adj-foot .adj-memo { flex: 1 1 320px; max-width: 560px; }
.adj-totals { display: grid; grid-template-columns: auto auto; gap: .2rem 1.25rem; align-items: baseline; }
.adj-totals > div { display: contents; }
.adj-totals span { font-size: .82rem; color: var(--ink-soft); text-align: right; }
.adj-totals strong { font-variant-numeric: tabular-nums; text-align: right; min-width: 7rem; }
.adj-totals strong.neg { color: #b02a37; }
.adj-find-box { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.adj-find-box thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
#adjFindList tr.adj-find-off { display: none; }
/* the reason box with "Edit reasons", the list of reasons, the category picker, values worked out for the user */
.adj-reason-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.adj-reason-edit { font-size: .74rem; text-decoration: none; white-space: nowrap; }
.reason-list { display: grid; gap: .35rem; }
.reason-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: .35rem; align-items: center; }
.reason-row .btn-link { padding: .3rem .35rem !important; line-height: 1; color: var(--ink-soft); }
.reason-row .btn-link:hover { color: var(--blue); }
.reason-row .btn-link.text-danger { color: #b02a37 !important; }
.reason-row:first-child [data-move="-1"], .reason-row:last-child [data-move="1"] { visibility: hidden; }
.adj-cat-pick { display: flex; align-items: center; gap: .4rem; flex: 0 1 460px; min-width: 0; }
.adj-cat-label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.adj-cat-pick .adj-cat-drop { flex: 1 1 auto; min-width: 150px; }
.adj-cat-pick .btn { white-space: nowrap; }
.adj-find-cat { min-width: 180px; max-width: 260px; }
/* a drop-down list of check boxes (multi_check_field) */
.multi-check { position: relative; }
.multi-check-btn { display: block; width: 100%; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: var(--surface); }
.multi-check-btn.has-picks { color: var(--ink); font-weight: 600; }
.multi-check-btn.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .15); }
.multi-check-menu { min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); padding: 0; border-radius: var(--radius-sm); box-shadow: var(--raise-2); overflow: hidden; }
.multi-check-tools { display: flex; flex-direction: column; gap: .4rem; padding: .55rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.multi-check-links { display: flex; gap: 1rem; }
.multi-check-links .btn-link { font-size: .8rem; text-decoration: none; }
.multi-check-list { max-height: 260px; overflow-y: auto; padding: .3rem 0; }
.multi-check-item { display: flex; align-items: center; gap: .55rem; padding: .38rem .8rem; margin: 0; cursor: pointer; font-size: .86rem; }
.multi-check-item:hover { background: var(--blue-tint); }
.multi-check-item .form-check-input { margin: 0; flex: 0 0 auto; }
.multi-check-item[hidden] { display: none; }
.multi-check-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
input.is-auto { color: var(--ink-soft); font-style: italic; background-color: #f7f9fc; }
.mem-col-name { min-width: 170px; }
.mem-list td:last-child { white-space: nowrap; }
/* the list of memorized transactions to load: one small block per entry on a phone */
.mem-load-list td { vertical-align: middle; }
@media (max-width: 575.98px) {
  .mem-load-list thead { display: none; }
  .mem-load-list, .mem-load-list tbody { display: block; width: 100%; }
  .mem-load-list tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; padding: .55rem .1rem; border-bottom: 1px solid var(--line-soft); }
  .mem-load-list > tbody > tr > td { display: block; border: 0; padding: 0; background: none; box-shadow: none; }
  .mem-load-list td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mem-load-list td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-soft); }
  .mem-load-list td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .mem-load-list td:nth-child(4) { grid-column: 1; grid-row: 3; color: var(--muted); }
  .mem-load-list td:nth-child(4):not(:empty)::before { content: 'Last entered '; }
  .mem-load-list td:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}
.adj-net { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adj-batch tr.is-changed > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.adj-batch-card .adj-foot { align-items: center; }

/* on a phone each line of the Per Item grid is a small card of its own */
@media (max-width: 767.98px) {
  .adj-entry-switch { width: 100%; }
  .adj-entry-switch .btn { min-width: 0; flex: 1 1 50%; }
  .adj-lines-wrap { overflow: visible; }
  .adj-lines thead { display: none; }
  .adj-lines, .adj-lines tbody, .adj-lines tr, .adj-lines td { display: block; width: 100%; }
  .adj-lines tr.adj-line { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .6rem; padding: .45rem .6rem .25rem; background: var(--surface); box-shadow: var(--raise-1); }
  .adj-lines td { border: 0; padding: .2rem 0; }
  .adj-lines td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); }
  .adj-lines td.num { text-align: left; }
  .adj-lines td.adj-x { position: absolute; top: .3rem; right: .5rem; width: auto; }
  .adj-lines td[data-label="Item"] { padding-right: 4.4rem; }
  .adj-lines td.adj-x .btn-link { padding: .25rem .35rem !important; }
  .adj-lines td[data-label="Qty on hand"], .adj-lines td[data-label="New quantity"], .adj-lines td[data-label="Qty difference"], .adj-lines td[data-label="U/M"],
  .adj-lines td[data-label="Current value"], .adj-lines td[data-label="New value"], .adj-lines td[data-label="Net adjustment"] { display: inline-block; width: 48%; vertical-align: top; }
  .adj-cat-pick { flex: 1 1 100%; flex-wrap: wrap; }
  .adj-cat-pick .adj-cat-drop { flex: 1 1 160px; }
  .multi-check-item { padding: .55rem .9rem; }
  .adj-item-form.adj-mode-qty .adj-lines td.adj-v, .adj-item-form.adj-mode-value .adj-lines td.adj-q { display: none; }
  .adj-lines .adj-col-item { min-width: 0; }
  .adj-totals { width: 100%; }
  .shift-preview { grid-template-columns: 1fr 1fr; }
}
.shift-list { font-size: .84rem; }
.shift-list td.num, .shift-list th.num { white-space: nowrap; }
.shift-list th { font-size: .72rem; }
/* the approval boxes sit in narrow cards too (an X-reading box): their two fields go one under the other there */
.approval-ways { container-type: inline-size; }
@container (max-width: 380px) {
  .approval-ways .row > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ---- Edit Bill Payment */
.bp-edit-head { display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding: .1rem 0 .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line-soft); }
.bp-edit-head > div { display: flex; flex-direction: column; min-width: 0; }
.bp-edit-k { font-size: .74rem; color: var(--muted); }
.bp-edit-head strong { font-size: .98rem; color: var(--ink); }
.bp-edit-cardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; background: var(--surface-2); }
.bp-edit-table .bp-c-tick { width: 2.2rem; }
.bp-edit-table tr.bp-on > td { background: rgba(13, 110, 253, .035); }
@media (max-width: 575.98px) {
  .bp-edit-head { gap: .5rem 1.25rem; }
  .bp-edit-table thead { display: none; }
  .bp-edit-table, .bp-edit-table tbody, .bp-edit-table tfoot { display: block; width: 100%; }
  .bp-edit-table tbody tr { display: grid; grid-template-columns: 2rem 1fr 1fr; gap: .2rem .6rem; padding: .6rem .5rem; border-bottom: 1px solid var(--line-soft); }
  .bp-edit-table tbody tr > td { display: block; border: 0; padding: 0; background: none !important; text-align: left; }
  .bp-edit-table tbody td:nth-child(1) { grid-row: 1 / span 4; }
  .bp-edit-table tbody td:nth-child(2) { grid-column: 3; grid-row: 1; text-align: right; font-size: .8rem; }
  .bp-edit-table tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .bp-edit-table tbody td:nth-child(4)::before { content: "Bill "; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:nth-child(5)::before { content: "Left "; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:nth-child(6) { display: none; }
  .bp-edit-table tbody td:nth-child(7)::before { content: "Discount"; display: block; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:nth-child(8)::before { content: "Amount paid"; display: block; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:nth-child(7) input, .bp-edit-table tbody td:nth-child(8) input { width: 100% !important; margin: 0 !important; }
  .bp-edit-table tbody tr td[colspan] { grid-column: 1 / -1; grid-row: auto; text-align: center; }
  .bp-edit-table tfoot tr { display: flex; justify-content: space-between; padding: .6rem .5rem; }
  .bp-edit-table tfoot td { border: 0; padding: 0; }
}

/* ---- switching between the companies a user has access to (CompanyAccess) */
.company-switch { margin-left: .35rem; min-width: 0; }
.app-bar .company-switch-btn {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 300px; color: #dfe4ea; font-size: .82rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 1px 2px rgba(0, 0, 0, .4);
}
.app-bar .company-switch-btn:hover, .app-bar .company-switch-btn.show { background: rgba(255, 255, 255, .14); color: #fff; }
.company-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.company-switch-menu { min-width: 260px; max-width: min(360px, calc(100vw - 24px)); padding: .35rem 0; border-radius: var(--radius-sm); box-shadow: var(--raise-2); }
.company-switch-menu form { margin: 0; }
.company-switch-head { padding: .3rem .9rem .4rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
.company-switch-item { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .9rem; white-space: normal; }
.company-switch-item > i { font-size: 1rem; color: var(--blue-deep); margin-top: .05rem; }
.company-switch-item > span { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--ink); }
.company-switch-item small { font-weight: 400; color: var(--muted); font-size: .76rem; }
.company-switch-item.is-now, .company-switch-item:disabled { opacity: 1; background: var(--blue-tint); }
.company-strip {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 1rem; font-size: .84rem;
  background: linear-gradient(180deg, #eef5ff, #e2edff); color: #133d7a; border-bottom: 1px solid #bcd3f5;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 3px 8px -6px rgba(19, 61, 122, .45);
  position: sticky; top: var(--bar-h); z-index: 1020;
}
.company-strip form { margin: 0 0 0 auto; }
.company-strip .btn-link { font-weight: 600; color: #133d7a; font-size: .84rem; text-decoration: none; }
@media (max-width: 575.98px) {
  .app-bar .company-switch-btn { max-width: 52px; padding: .25rem .5rem; }
  .company-switch { position: static; }
  .company-switch-menu { left: 12px !important; right: 12px !important; top: calc(100% + 4px) !important; max-width: none; min-width: 0; }
  .company-switch-name { display: none; }
  .company-strip { font-size: .8rem; }
  .company-strip form { margin-left: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .app-bar .company-switch-btn { max-width: 190px; }
}
/* users of another company on the user lists */
.user-from { font-size: .76rem; color: var(--muted); }
.link-card .link-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line-soft); }
.link-card .link-row:first-of-type { border-top: 0; }

/* ---- Item List: the search narrows the list as you type */
.item-list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.item-list-search { flex: 1 1 320px; max-width: 460px; margin: 0; }
.item-list-cat { width: auto; min-width: 180px; max-width: 240px; }
.item-list-count { margin-left: auto; white-space: nowrap; }
.item-active-locked .form-check-input:disabled { opacity: .75; }
.item-active-locked .form-check-input:disabled ~ .form-check-label { opacity: 1; color: var(--ink); }
@media (max-width: 575.98px) {
  .item-list-search { flex-basis: 100%; max-width: none; }
  .item-list-cat { flex: 1 1 auto; max-width: none; }
  .item-list-count { margin-left: 0; }
}

/* ---- the drop-down of check boxes: group headings */
.multi-check-group { padding: .5rem .8rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); border-top: 1px solid var(--line-soft); }
.multi-check-group:first-child { border-top: 0; }
.multi-check-group[hidden] { display: none; }
.rpt-col-picker .multi-check-btn { min-width: 200px; max-width: 280px; }
.rpt-col-picker .multi-check-menu { max-width: min(380px, calc(100vw - 32px)); }
.rpt-col-picker .multi-check-list { max-height: 340px; }

/* ---- Shifts, Cash Drops & Readings: the list and its filter */
.shift-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; background: var(--surface-2); }
.shift-filter { border-bottom: 1px solid var(--line-soft); background: var(--surface); padding: .75rem 1rem; }
.shift-list tfoot td { border-top: 2px solid var(--line); background: var(--surface-2); }
.shift-pager { background: var(--surface-2); }

/* ---- Make Deposits / Edit Deposit */
.dep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.dep-table tr.dep-in > td { background: rgba(13, 110, 253, .035); }
.dep-table td { vertical-align: middle; }
.dep-totals-sep { display: inline-block; width: 1.25rem; }
@media (max-width: 767.98px) {
  .dep-totals { text-align: left; }
  .dep-totals-sep { display: block; height: .25rem; }
  .dep-other td { min-width: 130px; }
}

/* =====================================================================
   v24: edit forms of receipts / transfers / adjustments / builds, withholding taxes, BIR Form 2307,
   BIR Reports, advances to suppliers
   ===================================================================== */

/* ---- the facts at the top of an edit form */
.edit-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem 1.25rem; }
.edit-facts > div { display: flex; flex-direction: column; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff, var(--surface-2)); box-shadow: var(--raise-1); }
.edit-facts span { font-size: .74rem; color: var(--muted); }
.edit-facts strong { font-weight: 600; overflow-wrap: anywhere; }
.adj-edit-note { max-width: 70rem; }

/* ---- the Withholding cell (Pay Bills, Edit Bill Payment, Receive Payments) */
.wht-pick { position: relative; min-width: 128px; }
.wht-btn { display: flex; align-items: center; gap: .35rem; width: 100%; min-height: calc(1.5em + .5rem + 2px); text-align: right; cursor: pointer; background: var(--surface); box-shadow: var(--inset); padding-right: .45rem; }
.wht-btn:hover { border-color: #b6c2d1; }
.wht-btn:disabled { cursor: not-allowed; background: var(--surface-2); }
.wht-btn .wht-sum { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.wht-btn .wht-rates { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.wht-btn .bi { font-size: .72rem; color: var(--muted); }
.wht-pick.has-wht .wht-btn { border-color: #9ec5fe; background: #f6f9ff; }
.wht-menu { width: 330px; max-width: calc(100vw - 24px); padding: 0; border-radius: var(--radius-sm); box-shadow: var(--raise-2); overflow: hidden; font-size: .86rem; }
.wht-menu-head { padding: .55rem .8rem; font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.wht-base { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-soft); }
.wht-base input { width: 130px; }
.wht-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border-bottom: 1px solid var(--line-soft); }
.wht-row.is-on { background: rgba(13, 110, 253, .04); }
.wht-type { display: flex; align-items: flex-start; gap: .5rem; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
.wht-type .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.wht-type-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wht-type-name small { color: var(--muted); font-size: .74rem; }
.wht-amt { width: 104px; flex: 0 0 auto; }
.wht-menu-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; background: var(--surface-2); }
.wht-menu-foot strong { font-variant-numeric: tabular-nums; }
.wht-menu-note { padding: 0 .8rem .55rem; background: var(--surface-2); font-size: .74rem; color: var(--muted); }
.pb-table td, .pay-wht { vertical-align: middle; }
.pb-table .pb-in { width: 92px; margin-left: auto; }
.pb-table .pb-amt { width: 108px; }
.pb-table .pb-wht { min-width: 128px; }
.pb-table .wht-pick { min-width: 118px; }
.pb-table th { white-space: normal; }
#applyTable .pay-wht { min-width: 140px; }
@media (max-width: 575.98px) {
  .bp-edit-table tbody td.pb-wht::before { content: "Withholding"; display: block; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:last-child::before { content: "Amount paid"; display: block; color: var(--muted); font-size: .74rem; }
  .bp-edit-table tbody td:last-child input { width: 100% !important; margin: 0 !important; }
  .wht-amt { width: 92px; }
}

/* ---- Withholding Tax Table */
.wht-agent-switch { max-width: 44rem; }
.wht-agent-switch .form-check-input { margin-top: .3rem; }
.wht-table td { vertical-align: middle; }
.wht-guide ul { padding-left: 1.1rem; }
.wht-guide li { margin-bottom: .2rem; }
@media (max-width: 767.98px) {
  .wht-table thead { display: none; }
  .wht-table, .wht-table tbody { display: block; width: 100%; }
  .wht-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .7rem .75rem; border-bottom: 1px solid var(--line-soft); }
  .wht-table tbody td { display: block; border: 0; padding: 0; text-align: left; }
  .wht-table tbody td[data-label]:not([data-label="Type"]):not([data-label="Rate"])::before { content: attr(data-label) ": "; color: var(--muted); font-size: .74rem; }
  .wht-table tbody td[data-label="Type"] { grid-column: 1; }
  .wht-table tbody td[data-label="Rate"] { grid-column: 2; grid-row: 1; font-size: 1.05rem; }
  .wht-table tbody td:not([data-label="Type"]):not([data-label="Rate"]) { grid-column: 1 / -1; }
  .wht-table tbody td:last-child { text-align: right; padding-top: .3rem; }
  .wht-table tbody td[colspan] { grid-column: 1 / -1; text-align: center; }
}

/* ---- BIR Reports: the lines to sign and the worksheet note */
.bir-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem; font-size: .78rem; color: var(--muted); }
.bir-sign > div span { display: block; height: 1.6rem; border-bottom: 1px solid #9aa4b1; margin-bottom: .25rem; }
.bir-foot-note { margin-top: 1rem; padding-top: .5rem; border-top: 1px dashed var(--line); font-size: .72rem; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 575.98px) { .bir-sign { grid-template-columns: 1fr; gap: .75rem; } }

/* ---- BIR Form 2307 */
.f2307-list { max-height: 70vh; overflow: auto; }
.f2307-list .list-group-item.active .f2307-list-sub { color: rgba(255, 255, 255, .85); }
.f2307-list-sub { color: var(--muted); }
.f2307-preview { overflow-x: auto; padding: .25rem; }
.f2307 { --f-line: #1f2933; background: #fff; color: #111; border: 1.5px solid var(--f-line); max-width: 860px; min-width: 640px; margin: 0 auto 1rem; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 11px; line-height: 1.3; box-shadow: var(--raise-2); }
.f2307 b { display: inline-block; min-width: 1.4em; font-weight: 700; }
.f2307 small { font-size: 9px; color: #333; }
.f2307-top { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: .35rem .5rem; border-bottom: 1px solid var(--f-line); }
.f2307-bir { font-size: 9px; }
.f2307-gov { text-align: center; font-size: 11px; }
.f2307-titlebar { display: grid; grid-template-columns: 1.1fr 2fr 1fr; align-items: stretch; border-bottom: 1.5px solid var(--f-line); }
.f2307-titlebar > div { padding: .35rem .5rem; }
.f2307-formno { border-right: 1px solid var(--f-line); font-size: 10px; }
.f2307-formno strong { display: block; font-size: 26px; line-height: 1; letter-spacing: .02em; }
.f2307-formno span { font-size: 9px; }
.f2307-formname { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 17px; font-weight: 700; }
.f2307-code { border-left: 1px solid var(--f-line); display: flex; align-items: flex-end; justify-content: center; font-size: 9px; font-family: "Courier New", monospace; }
.f2307-hint { padding: .2rem .5rem; font-size: 9px; border-bottom: 1px solid var(--f-line); }
.f2307-line { padding: .3rem .5rem; border-bottom: 1px solid var(--f-line); }
.f2307-field .f2307-val { min-height: 1.3em; margin-top: .15rem; padding: .1rem .35rem; border: 1px solid #8b949e; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.f2307-split { display: grid; grid-template-columns: 1fr 140px; gap: .5rem; }
.f2307-part { padding: .25rem .5rem; background: #1f2933; color: #fff; font-weight: 700; text-align: center; font-size: 11px; letter-spacing: .02em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.f2307-boxes { display: inline-flex; vertical-align: middle; }
.f2307-boxes span { display: inline-block; width: 15px; height: 17px; border: 1px solid #555; margin-left: -1px; text-align: center; font-family: "Courier New", monospace; font-size: 12px; font-weight: 700; line-height: 15px; }
.f2307 i { font-style: normal; padding: 0 .2rem; }
.f2307-tablewrap { padding: 0; }
.f2307-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.f2307-table th, .f2307-table td { border: 1px solid var(--f-line); padding: .25rem .3rem; }
.f2307-table thead th { text-align: center; font-weight: 700; background: #f1f3f5; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.f2307-table thead th small { display: block; font-weight: 400; }
.f2307-table .w-desc { width: 31%; }
.f2307-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f2307-table td.c { text-align: center; }
.f2307-table tr.f2307-sec td { font-weight: 700; background: #f8f9fa; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.f2307-table tr.f2307-blank td { height: 1.45em; }
.f2307-table tr.f2307-total td { font-weight: 700; }
.f2307-decl { padding: .4rem .5rem; font-size: 9.5px; border-bottom: 1px solid var(--f-line); text-align: justify; }
.f2307-sign { padding: .6rem .5rem .25rem; text-align: center; }
.f2307-signname { min-height: 1.4em; border-bottom: 1px solid #333; margin: 0 12%; font-weight: 700; text-transform: uppercase; }
.f2307-signcap { font-size: 9px; padding-top: .15rem; }
.f2307-agent { display: grid; grid-template-columns: 2fr 1fr 1fr; border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); font-size: 9px; }
.f2307-agent > div { padding: .25rem .5rem 1rem; }
.f2307-agent > div + div { border-left: 1px solid var(--f-line); }
.f2307-conf { padding: .3rem .5rem 0; font-weight: 700; }
.f2307-foot { padding: .3rem .5rem; font-size: 8.5px; color: #444; }
@media print {
  .f2307-body .f2307 { box-shadow: none; max-width: none; min-width: 0; margin: 0 0 0; page-break-after: always; break-after: page; }
  .f2307-body .f2307:last-child { page-break-after: auto; break-after: auto; }
  @page { size: auto; margin: 10mm; }
}

/* ---- Advances to Suppliers */
.adv-form .edit-facts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pb-hint { font-size: .72rem; color: var(--muted); text-align: right; white-space: nowrap; margin-top: .1rem; }
.pb-table .pb-vendor { min-width: 120px; }

/* ---- Report column bands (IN / OUT over their columns, Inventory Movement Detailed Report) */
#rptTable thead tr.rpt-band-row th { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding-top: .35rem; padding-bottom: .3rem; border-bottom: 0; }
#rptTable thead tr.rpt-band-row th.rpt-band { color: var(--blue-deep); background: linear-gradient(180deg, #f3f7ff, #e9f0fd); box-shadow: inset 0 -2px 0 rgba(11, 94, 215, .28); }
#rptTable thead tr.rpt-band-row th.rpt-band + th.rpt-band { border-left: 2px solid var(--surface); }
#rptTable thead tr.rpt-band-row th.rpt-band-empty { background: transparent; box-shadow: none; }
@media print { #rptTable thead tr.rpt-band-row th.rpt-band { background: #fff !important; box-shadow: inset 0 -1px 0 #555; color: #111; } }
#rptTable.rpt-banded thead tr:not(.rpt-band-row) th { white-space: normal; vertical-align: bottom; line-height: 1.2; min-width: 4.6rem; }
#rptTable.rpt-banded thead tr:not(.rpt-band-row) th:nth-child(2) { min-width: 9rem; }

/* =====================================================================
   Cooperative screens (members, savings, loans, teller, distribution)
   Same palette and the same raised surfaces as the rest of the system.
   ===================================================================== */

/* ---- member picker: a search box with a list under it */
.member-pick { position: relative; }
.member-pick > .bi-search { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #8a95a1; font-size: .8rem; pointer-events: none; z-index: 1; }
.member-pick > input[type=search] { padding-left: 1.85rem; }
.member-pick-list {
  position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); max-height: 340px; overflow-y: auto; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: .3rem; box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 36px -14px rgba(15, 23, 42, .35);
}
.mp-opt { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .4rem .55rem; border-radius: 7px; cursor: pointer; }
.mp-opt:hover, .mp-opt.is-hi { background: #eef3fb; }
.mp-none { padding: .5rem .6rem; color: var(--muted); font-size: .85rem; }

/* ---- the member panel */
.member-card {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; align-items: center; padding: .85rem .95rem;
  background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--raise-1);
}
.member-photo {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(180deg, #3d8bfd, #0b5ed7); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 6px rgba(11, 94, 215, .35);
}
.member-photo.is-blank { letter-spacing: .02em; }
.member-card-name { font-weight: 650; font-size: 1.02rem; line-height: 1.25; }
.member-card-sub { font-size: .8rem; color: var(--ink-soft); }
.member-card-figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .35rem; }
.member-card-figs > div {
  padding: .45rem .6rem; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(15, 23, 42, .06);
}
.member-card-figs span { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; }
.member-card-figs strong { font-variant-numeric: tabular-nums; font-size: .95rem; }
.member-flag { margin-top: .3rem; font-size: .8rem; color: #8a5a00; }
.member-flag.is-hold { color: #b02a37; font-weight: 600; }
@media (max-width: 575.98px) { .member-card-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- label / value pairs */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem 1rem; margin: 0; }
.kv > div { min-width: 0; }
.kv dt { font-size: .72rem; font-weight: 600; color: var(--muted); margin: 0; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv.kv-1 { grid-template-columns: 1fr; }
.voucher-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.voucher-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---- figure tiles (centers, dashboard) */
.coop-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.coop-tile {
  position: relative; padding: .7rem .85rem; border-radius: var(--radius); background: linear-gradient(180deg, #ffffff, #f7f9fc);
  border: 1px solid var(--line); box-shadow: var(--raise-2); overflow: hidden;
}
.coop-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #3d8bfd, #0b5ed7); }
.coop-tile.is-warn::before { background: linear-gradient(180deg, #ffcd39, #d39e00); }
.coop-tile.is-bad::before { background: linear-gradient(180deg, #e35d6a, #b02a37); }
.coop-tile.is-ok::before { background: linear-gradient(180deg, #4fbf86, #157347); }
.coop-tile .t-label { font-size: .72rem; font-weight: 650; color: var(--muted); }
.coop-tile .t-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.coop-tile .t-sub { font-size: .75rem; color: var(--ink-soft); }
.coop-tile a { color: inherit; }

/* ---- amortization preview */
.sched-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.sched-sum > div { padding: .45rem .6rem; border-radius: 8px; background: #f8fafc; border: 1px solid var(--line-soft); box-shadow: var(--inset); }
.sched-sum span { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); }
.sched-sum strong { font-variant-numeric: tabular-nums; }
.sched-sum small { display: block; font-size: .72rem; color: var(--ink-soft); }
.sched-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.sched-wrap thead th { position: sticky; top: 0; z-index: 1; }

/* ---- official receipt builder */
.or-items td { vertical-align: top; }
.or-dues { color: var(--ink-soft); margin-top: .15rem; }
.or-dues label { cursor: pointer; }
.or-dues .form-check-input { margin-top: 0; vertical-align: -2px; }
.or-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.or-total > div { padding: .5rem .7rem; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: var(--raise-1); }
.or-total span { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); }
.or-total strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .or-total { grid-template-columns: 1fr; } }

/* ---- eligibility and other check lists */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.check-list li:last-child { border-bottom: 0; }
.check-list .bi-check-circle-fill { color: #157347; }
.check-list .bi-x-circle-fill { color: #b02a37; }
.check-list small { display: block; color: var(--ink-soft); }

/* ---- history / timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 .7rem .6rem; }
.timeline li::before { content: ""; position: absolute; left: -1.38rem; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 2px rgba(15, 23, 42, .2); }
.timeline .when { font-size: .75rem; color: var(--muted); }

/* ---- cash count */
.denoms td { padding-top: .2rem !important; padding-bottom: .2rem !important; }
.denoms input { max-width: 110px; margin-left: auto; text-align: right; }

/* ---- the step strip of a loan application */
.app-steps { display: flex; gap: .3rem; margin-bottom: 1rem; overflow-x: auto; }
.app-steps > span { flex: 1 1 0; min-width: 5.5rem; padding: .45rem .1rem 0; border-top: 4px solid #dde2e8; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.app-steps > span.is-done { border-top-color: #3aa76d; color: #2b333d; }
.app-steps > span.is-now { border-top-color: #0b5ed7; color: #0b5ed7; }
.app-steps > span.is-stop { border-top-color: #b02a37; color: #b02a37; }

/* ---- printed cooperative documents */
.coop-doc { position: relative; }
.coop-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .6rem; border-bottom: 2px solid #2b333d; }
.coop-doc-title { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; }
.coop-doc .doc-table thead th { background: #fff; border-bottom: 1px solid #2b333d; }
.coop-doc .doc-table tfoot td { border-top: 1px solid #2b333d; background: #fff; }
.copy-mark { position: absolute; right: 0; top: -1.2rem; font-size: .75rem; font-weight: 700; color: #b02a37; letter-spacing: .06em; }
.void-mark { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 5rem; font-weight: 900; color: rgba(176, 42, 55, .18); letter-spacing: .2em; pointer-events: none; }
.doc-clause { text-align: justify; font-size: .86rem; line-height: 1.5; }
.doc-clause p { margin-bottom: .6rem; }
.cert-frame { border: 3px double #2b333d; padding: 1.4rem 1.6rem; }
.cert-amount { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.id-card { width: 3.375in; height: 2.125in; border: 1px solid #2b333d; border-radius: 10px; padding: .18in; display: grid; grid-template-columns: 0.9in 1fr; gap: .12in; font-size: 9pt; overflow: hidden; }
.id-card img, .id-card .member-photo { width: .9in; height: 1.1in; border-radius: 6px; object-fit: cover; }
.id-card .id-name { font-weight: 800; font-size: 10.5pt; line-height: 1.15; }
@media print {
  .copy-mark { top: 0; }
  .coop-doc { font-size: 11px; }
  .page-break { page-break-after: always; break-after: page; }
}

/* ---- passbook printing: lines placed by the passbook type's measurements (twips) */
.pb-page { position: relative; background: #fff; }
.pb-line { position: absolute; white-space: nowrap; font-family: "Courier New", Courier, monospace; }
.pb-cell { position: absolute; }
.pb-screen-frame { border: 1px dashed #b9c2cd; border-radius: 6px; margin: 0 auto 1rem; box-shadow: var(--raise-1); }
@media print { .pb-screen-frame { border: 0; box-shadow: none; margin: 0; } }
/* one sheet for each passbook page: nothing spills onto a second sheet */
.pb-sheet { overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.pb-sheet + .pb-sheet { break-before: page; page-break-before: always; }
@media print { body.pb-print .pb-sheet { margin: 0; } }

/* ---- the printer pages (passbook, slip validation): a short note on the screen, only the lines on paper */
.sheet-hint { display: flex; gap: .65rem; align-items: flex-start; max-width: 56rem; margin: 0 auto 1rem; padding: .7rem .9rem; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--raise-1); }
.sheet-hint > .bi { color: var(--blue-deep); font-size: 1.1rem; line-height: 1.2; }
.slip-sheet { background: #fff; font-family: "Courier New", Courier, monospace; color: #000; max-width: 56rem; margin: 0 auto; box-shadow: var(--raise-1); border: 1px dashed #b9c2cd; }
.slip-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.slip-preview { overflow-x: auto; }
.slip-preview-paper { width: 480px; height: 210px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--raise-1);
  background-image: repeating-linear-gradient(0deg, transparent 0 29px, #f1f3f6 29px 30px); }
.slip-preview-text { font-family: "Courier New", Courier, monospace; color: #1f2933; white-space: pre; overflow: hidden; height: 100%; box-sizing: border-box; }
@media print {
  .slip-sheet { max-width: none; margin: 0; box-shadow: none; border: 0; }
}

/* ---- small screens */
@media (max-width: 575.98px) {
  .kv { grid-template-columns: 1fr 1fr; }
  .coop-tiles { grid-template-columns: 1fr 1fr; }
  .coop-tile .t-value { font-size: 1.05rem; }
}
.card.coop-tabbed { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

/* ---- cooperative alerts on the dashboard */
.coop-alerts .list-group-item { border-left: 3px solid transparent; font-size: .88rem; }
.coop-alerts .list-group-item.is-bad { border-left-color: #b02a37; }
.coop-alerts .list-group-item.is-warn { border-left-color: #e0a100; }
.coop-alerts .list-group-item.is-info { border-left-color: #6ea8fe; }
.coop-alerts a { color: inherit; text-decoration: none; }
.coop-alerts a:hover { color: var(--bs-primary); }

/* ---- how a loan payment splits (loan collection) */
.alloc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .4rem; }
.alloc-split:empty { display: none; }
.alloc-split > div { padding: .4rem .6rem; border-radius: 8px; background: #f6f8fb; border: 1px solid var(--line); }
.alloc-split span { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); }
.alloc-split strong { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Version 27: parties, lines of business, and the phone pass
   ===================================================================== */

/* ---- top bar: one row on a phone (the brand shortens to G-SMaRT, the user button to its icon) */
.app-bar .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-bar .brand-a { letter-spacing: .01em; }
.app-bar .brand-b { font-weight: 500; color: #d7dde4; }
@media (max-width: 1199.98px) { .app-bar .brand-b { display: none; } }
@media (max-width: 767.98px) {
  .navbar.app-bar { flex-wrap: nowrap; gap: .5rem; padding-left: .6rem !important; padding-right: .6rem !important; }
  .navbar.app-bar > div { min-width: 0; }
  .app-bar .navbar-brand { margin-right: 0; font-size: .95rem; gap: .45rem; }
  .app-bar .btn-user .user-name { display: none; }
  .app-bar .btn-user { padding-left: .55rem; padding-right: .55rem; }
  .app-bar .gap-2 { gap: .35rem !important; }
}

/* ---- tables that turn into cards on a phone: <table class="stack-sm">, each cell with data-label */
@media (max-width: 575.98px) {
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm > tbody, table.stack-sm > tfoot { display: block; width: 100%; }
  table.stack-sm > tbody > tr, table.stack-sm > tfoot > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .9rem; padding: .6rem .85rem;
    border-bottom: 1px solid var(--line-soft);
  }
  table.stack-sm > tbody > tr > td, table.stack-sm > tfoot > tr > td {
    display: block; border: 0; padding: 0 !important; min-width: 0; overflow-wrap: anywhere; background: transparent;
  }
  table.stack-sm td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 650; color: var(--muted); letter-spacing: .01em; }
  table.stack-sm td.num { text-align: left; white-space: normal; }
  table.stack-sm td:not([data-label]), table.stack-sm td[colspan] { grid-column: 1 / -1; }
  table.stack-sm td.text-end { text-align: left !important; }
  table.stack-sm tr.subtotal-row, table.stack-sm tr.party-group-row { background: var(--surface-2); }
  .card > .table-responsive > table.stack-sm { min-width: 0; }
  /* the interest accruals of a time deposit: an empty column is left out of the card; the payable beside its label */
  table.td-accruals.stack-sm > tbody > tr > td:empty, table.td-accruals.stack-sm > tfoot > tr > td:empty { display: none; }
  table.td-accruals.stack-sm > tfoot > tr { grid-template-columns: minmax(0, 1fr) auto; }
  table.td-accruals.stack-sm > tfoot > tr > td[colspan] { grid-column: auto; }
}

/* ---- Party Center */
.party-center .center-list .list-group-item { line-height: 1.3; }
.party-center .center-list .list-group-item.active .opacity-75 { opacity: .9 !important; }
@media (min-width: 992px) {
  .party-center .center-list { max-height: calc(100vh - var(--bar-h) - 230px); overflow-y: auto; scrollbar-width: thin; }
  .party-center .center-pick > .card { position: sticky; top: calc(var(--bar-h) + 16px); }
}
@media (max-width: 991.98px) {
  .party-center .center-list { max-height: 52vh; overflow-y: auto; }
  .party-center.has-pick .center-pick .card-body { border-bottom: 1px solid var(--line-soft); }
}
.party-facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.party-position.coop-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.party-position .coop-tile .t-value { font-size: 1.1rem; }
.min-w-0 { min-width: 0; }

/* ---- Identity Review: the two records side by side */
.review-side { height: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--inset); }
.review-pair .card-header { font-size: .86rem; }

/* ---- the party on customer, supplier and other-name forms */
.party-note { padding: .35rem .6rem; border-left: 3px solid var(--blue); background: var(--blue-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: .25rem; }
.party-note a { font-weight: 600; }

/* ---- Consolidated Party Statement */
.party-statement .party-side-title { padding-bottom: .3rem; border-bottom: 2px solid var(--line); font-weight: 650; color: #1b2430; }
.party-statement .party-group-row td { background: var(--surface-2); }
.party-statement .subtotal-row td { font-weight: 600; border-top: 1px solid #98a2ae; }
.party-statement .party-section .card-header { font-weight: 500; }
.party-summary .t-sub { margin-top: .2rem; line-height: 1.35; }
.party-roles-print td { padding: .15rem .4rem; }
@media print {
  .party-statement .card { break-inside: avoid; border: 1px solid #bbb; }
  .party-statement .coop-tile { box-shadow: none; border: 1px solid #bbb; }
  .party-statement .coop-tile::before { display: none; }
  .party-statement a { color: inherit; }
}

/* ---- phones: wider breathing room for page actions, lists and filters */
@media (max-width: 575.98px) {
  .filters > [class*="col-"] { flex: 1 1 100%; max-width: 100%; }
  .filters > .col-6, .filters > [class*="col-6"] { flex: 1 1 calc(50% - .5rem); max-width: calc(50% - .25rem); }
  .center-list { max-height: 52vh; overflow-y: auto; }
  .page-bar .page-actions .btn-group { flex: 1 1 100%; }
  .card > .card-header { padding: .55rem .8rem; }
  .list-group-item { padding-left: .8rem; padding-right: .8rem; }
  .doc h2 { font-size: 1.15rem; }
}

/* ---- phones: report tables keep their figures readable. The first column (account or name)
   wraps instead of pushing the amounts behind a sideways swipe, and on wider reports it stays
   pinned at the left edge while the amount columns scroll under it. */
@media screen and (max-width: 575.98px) {
  .report-table td:first-child:not([colspan]),
  .report-table td:first-child:not([colspan]) a { white-space: normal; overflow-wrap: anywhere; }
  .report-table th:first-child:nth-last-child(-n+3) { white-space: normal; }
  .report-table td:first-child:nth-last-child(-n+3):not([colspan]) { min-width: 9rem; }
  .report-table td:first-child:not(:nth-last-child(-n+3)):not([colspan]),
  .report-table th:first-child:not(:nth-last-child(-n+3)) {
    position: sticky; left: 0; z-index: 1; min-width: 8.5rem; max-width: 11rem;
  }
  .report-table tbody td:first-child:not(:nth-last-child(-n+3)):not([colspan]) { box-shadow: inset -1px 0 0 var(--line); }
  .report-table td.num, .report-table td.text-end { padding-left: .35rem; }
}
.pb-screen-frame { max-width: 100%; height: auto; } /* the passbook preview shrinks to the screen (its viewBox keeps the proportions) */

/* ---- journal entry changes (Chart of Accounts > Journal Entry Changes) */
.je-req-status { font-weight: 600; color: var(--ink); }
.je-req-status::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05rem; background: var(--muted); }
.je-req-status.is-pending::before { background: #d97706; }
.je-req-status.is-approved::before { background: #15803d; }
.je-req-status.is-rejected::before { background: #b91c1c; }
div.je-req-status { font-size: .95rem; }
.je-diff-side { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); height: 100%; }
.je-diff-title { padding: .5rem .75rem; font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.je-diff-side.is-after .je-diff-title { background: var(--blue-tint); color: var(--blue-deep); }
.je-diff-side .table td, .je-diff-side .table th { padding-left: .6rem; padding-right: .6rem; }
.je-diff-side td.je-acct { min-width: 11rem; }
.je-changed { background: #fff4d6 !important; box-shadow: inset 0 -2px 0 #f0b429; }
.je-diff-key .je-changed { padding: 0 .3rem; border-radius: 3px; }
.je-new { font-weight: 600; background: #fff4d6; }
.je-history > summary { cursor: pointer; list-style: none; }
.je-history > summary::-webkit-details-marker { display: none; }
.je-history > summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: .75rem; margin-right: .45rem; display: inline-block; transition: transform .15s; }
.je-history[open] > summary::before { transform: rotate(90deg); }
.je-approval-note { font-size: .8rem; color: var(--muted); }

/* ---- the class box of the batch deduction, and other narrow class selects in a form row */
.batch-class { min-width: 220px; }


/* =====================================================================
   Savings & Deposits: Savings Account Center, Savings Transaction Center, Savings Account Transaction and the
   Time Deposit Center (the layout of the cooperative's former desktop program, in the system's look)
   ===================================================================== */

/* ---- the toolbar of a center: icon and word, the actions on the selected row */
.sv-toolbar {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--raise-1);
  padding: .35rem; margin-bottom: .75rem;
}
.sv-tools { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; min-width: 0; }
.sv-tool {
  display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .65rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink); font-size: .84rem; font-weight: 550; line-height: 1.2; white-space: nowrap;
}
.sv-tool > i { font-size: 1.02rem; color: var(--blue-deep); }
.sv-tool:hover:not(:disabled):not(.disabled) { background: var(--surface-2); border-color: var(--line); text-decoration: none; color: var(--ink); }
.sv-tool:active:not(:disabled):not(.disabled) { box-shadow: var(--inset); background: #eef1f5; }
.sv-tool:disabled, .sv-tool.disabled { opacity: .42; cursor: default; pointer-events: none; }
.sv-tool.is-primary { background: var(--blue); color: #fff; border-color: var(--blue-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 2px rgba(15, 23, 42, .2); }
.sv-tool.is-primary > i { color: #fff; }
.sv-tool.is-primary:hover:not(:disabled) { background: var(--blue-deep); color: #fff; }
.sv-tool-sep { width: 1px; align-self: stretch; background: var(--line); margin: .2rem .2rem; }
.sv-toolbar .sv-tool-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sv-toolbar .sv-search { position: relative; min-width: 16rem; }
@media (min-width: 768px) {
  /* a search box alone at the end gives way to the buttons before it drops to a line of its own */
  .sv-toolbar .sv-tool-end:has(> .sv-search:only-child) { flex: 1 1 0; min-width: 11.5rem; justify-content: flex-end; }
  .sv-toolbar .sv-tool-end:has(> .sv-search:only-child) > .sv-search { flex: 1 1 auto; min-width: 0; max-width: 20rem; }
}
@media (min-width: 992px) and (max-width: 1599.98px) {
  /* a laptop screen: the buttons a little closer, so the search box stays on their line */
  .sv-tools { gap: .1rem; }
  .sv-tool { padding: .38rem .48rem; gap: .32rem; }
  .sv-toolbar .sv-tool-end:has(> .sv-search:only-child) { min-width: 9.5rem; }
}
.sv-toolbar .sv-search > .bi { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #8a95a1; pointer-events: none; }
.sv-toolbar .sv-search > input { padding-left: 1.85rem; }
.sv-toolbar .form-label { margin: 0 .35rem 0 0; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.sv-range { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sv-range[hidden] { display: none; }
form.is-loading .sv-search > .bi { animation: sv-pulse .8s ease-in-out infinite alternate; }
@keyframes sv-pulse { from { opacity: .35; } to { opacity: 1; } }

/* ---- the grid of a center: compact rows, one selected row, sticky heading */
.sv-grid-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--raise-1); overflow: auto; max-height: calc(100vh - 15rem); min-height: 12rem; }
.sv-grid { margin: 0; font-size: .84rem; --bs-table-bg: transparent; }
.sv-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--ink-soft); font-size: .76rem; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); padding: .5rem .6rem; }
.sv-grid td { padding: .38rem .6rem; vertical-align: middle; border-color: var(--line-soft); white-space: nowrap; }
.sv-grid td.wrap { white-space: normal; min-width: 10rem; }
.sv-grid tbody tr[data-row] { cursor: default; outline: none; }
.sv-grid tbody tr[data-row]:hover > td { background: #f4f7fb; }
.sv-grid tbody tr[data-row].is-selected > td { background: var(--blue-tint); box-shadow: inset 0 1px 0 #c5dafc, inset 0 -1px 0 #c5dafc; }
.sv-grid tbody tr[data-row].is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--blue), inset 0 1px 0 #c5dafc, inset 0 -1px 0 #c5dafc; }
.sv-grid tbody tr[data-row]:focus-visible > td { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .45); }
.sv-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-grid .neg { color: #b42318; }
.sv-grid tr.is-void > td { color: #98a2b3; text-decoration: line-through; }
.sv-grid .sv-more { border: 0; background: transparent; color: var(--ink-soft); padding: .1rem .4rem; border-radius: 6px; line-height: 1; }
.sv-grid .sv-more:hover { background: #e9edf2; color: var(--ink); }
.sv-grid-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .45rem .75rem; font-size: .8rem; color: var(--ink-soft); }
.sv-totals { display: inline-flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.sv-status { font-weight: 650; font-size: .76rem; letter-spacing: .02em; }
.sv-status.is-active { color: #15803d; }
.sv-status.is-pending, .sv-status.is-dormant { color: #b45309; }
.sv-status.is-closed { color: #6c757d; }

/* ---- the right-click menu of a row */
.sv-menu {
  position: fixed; z-index: 1080; min-width: 15.5rem; max-width: calc(100vw - 16px); padding: .3rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .12);
}
.sv-menu[hidden] { display: none; }
.sv-menu-title { padding: .35rem .6rem .4rem; font-size: .76rem; color: var(--muted); border-bottom: 1px solid var(--line-soft); margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .42rem .6rem; border-radius: 6px; font-size: .85rem; color: var(--ink); }
.sv-menu button > i { width: 1.1rem; color: var(--blue-deep); }
.sv-menu button:hover:not(:disabled), .sv-menu button:focus-visible { background: var(--blue-tint); outline: none; }
.sv-menu button:disabled { color: #a3acb7; }
.sv-menu button:disabled > i { color: #c4cad2; }
.sv-menu hr { margin: .25rem .2rem; border-color: var(--line-soft); opacity: 1; }
.sv-menu button.is-danger > i { color: #b42318; }

/* ---- the Savings Account Transaction form: framed groups like the paper form */
.sv-head { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.sv-head .sv-acct { display: flex; align-items: center; gap: .5rem; flex: 1 1 22rem; min-width: 0; }
.sv-head .sv-acct label { font-size: 1.02rem; font-weight: 600; margin: 0; white-space: nowrap; }
.sv-head .sv-acct .member-pick { flex: 1 1 auto; max-width: 30rem; }
.sv-head .sv-acct input[type=search] { font-size: 1.05rem; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sv-state { margin-left: auto; font-size: 1.45rem; font-weight: 800; font-style: italic; letter-spacing: .04em; color: #15803d; }
.sv-state.is-pending, .sv-state.is-dormant { color: #b45309; }
.sv-state.is-closed { color: #6c757d; }
.sv-state.is-none { color: #98a2b3; font-weight: 600; font-style: normal; font-size: .95rem; letter-spacing: 0; }
.sv-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .85rem .85rem; margin: 0 0 .9rem; background: var(--surface); position: relative; }
.sv-group > legend { float: none; width: auto; font-size: .78rem; font-weight: 650; color: var(--ink-soft); padding: 0 .4rem; margin: 0 0 .35rem -.2rem; letter-spacing: .01em; }
.sv-group.is-off { background: var(--surface-2); }
.sv-group.is-off > legend { color: #9aa4af; }
.sv-field .form-control[readonly], .sv-ro { background: var(--surface-2); box-shadow: none; }
.sv-field.is-locked .form-control { color: var(--ink); }
.sv-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sv-big { font-size: 1.05rem; }
.sv-side { font-size: .78rem; color: var(--ink-soft); min-height: 1.1rem; }
.sv-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.sv-checks .form-check { margin: 0; }
.sv-cheques.is-off { opacity: .55; }
.sv-cheques table { margin: 0; }
.sv-cheques td, .sv-cheques th { padding: .25rem .35rem; }
.sv-cheques th { font-size: .74rem; font-weight: 650; color: var(--ink-soft); background: var(--surface-2); }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--line); }
.sv-teller { font-size: 1.05rem; font-weight: 700; }
.sv-teller span { font-weight: 600; color: var(--ink-soft); margin-right: .35rem; }
.sv-statusbar { display: flex; flex-wrap: wrap; gap: 0; font-size: .76rem; color: var(--ink-soft); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.sv-statusbar > div { padding: .35rem .75rem; border-right: 1px solid var(--line); }
.sv-statusbar > div:first-child { flex: 1 1 auto; }
.sv-statusbar > div:last-child { border-right: 0; }
.sv-recent td, .sv-recent th { white-space: nowrap; }

/* ---- the machine validation printed on the deposit / withdrawal slip, as it looks on the slip */
.sv-slip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; font-family: "Courier New", Courier, monospace; font-size: .95rem; box-shadow: var(--inset); overflow-x: auto; }
.sv-slip .sv-slip-line { display: flex; gap: 2.2rem; white-space: nowrap; line-height: 1.7; }

@media (max-width: 767.98px) {
  /* one column, never wrapped: a wrapped column would take the width of the widest row and widen the page */
  .sv-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .35rem; }
  .sv-tools { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .1rem; }
  .sv-toolbar .sv-tool-end { margin-left: 0; width: 100%; }
  .sv-toolbar .sv-search { min-width: 0; flex: 1 1 100%; }
  .sv-toolbar .sv-tool-end > * { flex: 1 1 auto; }
  .sv-tool { padding: .4rem .55rem; }
  .sv-grid-wrap { max-height: none; }
  /* the grids fit a phone: headings may wrap, narrower cells, the amounts stay in view */
  .sv-grid { font-size: .8rem; }
  .sv-grid thead th { white-space: normal; padding: .45rem .4rem; vertical-align: bottom; }
  .sv-grid td { padding: .38rem .4rem; }
  .sv-grid td.wrap { min-width: 6.5rem; }
  .sv-head .sv-acct input[type=search]::placeholder { font-weight: 400; font-size: .92rem; letter-spacing: 0; }
  .sv-head { position: relative; }
  .sv-head .sv-acct { flex-wrap: wrap; flex-basis: 100%; }
  .sv-head .sv-acct label { flex: 1 1 100%; }
  .sv-head .sv-acct .member-pick { max-width: none; flex: 1 1 0; min-width: 0; }
  /* the account state beside the "Account no" label */
  .sv-state { position: absolute; top: .85rem; right: 1rem; margin-left: 0; font-size: 1.05rem; line-height: 1.5rem; }
  .sv-state.is-none { position: static; }
  .sv-statusbar > div { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media print {
  .sv-toolbar, .sv-menu, .sv-more { display: none !important; }
  .sv-grid-wrap { max-height: none; overflow: visible; box-shadow: none; border: 0; }
  .sv-grid thead th { position: static; }
}

/* ---- Loan Collection Form, in the layout of the former program: OR Entry, Open Loans, Amortization Due Details &
   Payments, the buttons, and the Loan Collections list */
.lc-form > .card-body { padding: 1rem 1rem .5rem; }
.lc-kv { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); align-items: center; gap: .45rem .75rem; }
.lc-kv > label { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.lc-kv-right { grid-template-columns: 8rem minmax(0, 1fr); }
.lc-kv .sv-field { margin: 0; }
.lc-orno { max-width: 13rem; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lc-pick input[type=search] { font-weight: 600; }
.lc-cash > .form-control, .lc-cash > .form-select { width: 100%; }
.lc-cheques .table-responsive { max-height: 9.25rem; overflow-y: auto; }
.lc-cheques td input { min-width: 6.25rem; }
.lc-cheques td:last-child, .lc-cheques th:last-child { width: 1.75rem; }
.lc-empty { padding: .9rem 1rem; text-align: center; font-size: .85rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.lc-loans-wrap { min-height: 0; max-height: 14rem; box-shadow: none; }
.lc-loans tbody tr[data-loan] { cursor: pointer; outline: none; }
.lc-loans tbody tr[data-loan]:hover > td { background: #f4f7fb; }
.lc-loans tbody tr[data-loan].is-selected > td { background: var(--blue-tint); box-shadow: inset 0 1px 0 #c5dafc, inset 0 -1px 0 #c5dafc; }
.lc-loans tbody tr[data-loan].is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--blue), inset 0 1px 0 #c5dafc, inset 0 -1px 0 #c5dafc; }
.lc-loans tbody tr[data-loan]:focus-visible > td { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .45); }
.lc-radio { display: inline-block; width: .85rem; height: .85rem; margin-right: .5rem; vertical-align: -.1rem; border: 1.5px solid #9aa4af; border-radius: 50%; background: #fff; }
.lc-loans tr.is-selected .lc-radio { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 2.5px #fff; }
.lc-view-btn { padding: .15rem .55rem; font-size: .78rem; white-space: nowrap; }
.lc-caption { margin-left: .35rem; font-weight: 500; color: var(--ink); }
.lc-amort-layout { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 1.1rem; align-items: start; }
.lc-amort-wrap { min-width: 0; }
.lc-amort { width: calc(100% + 1rem); margin: -.35rem -.5rem 0; border-collapse: separate; border-spacing: .5rem .35rem; table-layout: fixed; }
.lc-amort thead th { padding: 0 .1rem; font-size: .78rem; font-weight: 650; color: var(--ink-soft); text-align: right; }
.lc-amort thead th:first-child { width: 8.75rem; }
.lc-amort tbody th { font-size: .82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.lc-amort .lc-count input { font-weight: 500; color: var(--ink-soft); }
.lc-paid, .lc-paid[readonly] { background: #fffbea; border-color: #eadba8; }
.lc-paid.is-edit { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12); }
.lc-order { margin-top: .45rem; font-size: .76rem; color: var(--muted); }
.lc-amort-side { display: flex; flex-direction: column; gap: .6rem; padding-left: 1.1rem; border-left: 1px solid var(--line-soft); }
.lc-last .form-label { margin-bottom: .2rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.lc-ov-btn[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-deep); }
.lc-payoff { font-size: .85rem; }
.lc-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto auto; gap: 1rem 1.25rem; align-items: start; padding: .2rem 0 .5rem; }
.lc-memo .form-label { margin-bottom: .2rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.lc-checks { padding-top: 1.35rem; }
.lc-checks .form-check { margin-bottom: .35rem; }
.lc-side-btns { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.35rem; }
.lc-side-btns .btn { white-space: nowrap; }
.lc-main-btns { display: flex; gap: .6rem; padding-top: 1.35rem; }
.lc-big { min-width: 7.5rem; padding: .7rem 1.4rem; font-size: 1.05rem; font-weight: 650; }
.lc-filter { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 16rem) auto; gap: .6rem 1rem; align-items: end; margin-bottom: .75rem; }
.lc-filter .form-label { margin-bottom: .2rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.lc-f-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.lc-filter .sv-search { position: relative; }
.lc-filter .sv-search > .bi { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #8a95a1; pointer-events: none; }
.lc-filter .sv-search > input { padding-left: 1.85rem; }
.lc-coll-wrap { min-height: 8rem; max-height: 24rem; box-shadow: none; }
.lc-coll-foot { position: sticky; bottom: 0; background: var(--surface-2); border-top: 1px solid var(--line); }
.lc-list-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-top: .75rem; }
.lc-class { display: flex; align-items: center; gap: .6rem; flex: 0 1 24rem; min-width: 0; }
.lc-class .form-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.lc-class select { min-width: 0; }
.lc-list-btns { display: flex; gap: .5rem; }
.lc-list-btns .btn { min-width: 6.5rem; }
#lcStatus.is-bad { color: #b42318; font-weight: 600; }
#lcStatus.is-warn { color: #b45309; font-weight: 600; }
#lcStatus.is-ok { color: #166534; }
.lc-view-head { margin-bottom: .75rem; }
.lc-view-table { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lc-view-table tr.is-late > td { background: #fff4f2; }
#lcPrintModal .list-group-item.disabled { color: #98a2b3; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .lc-kv-right { grid-template-columns: 8.75rem minmax(0, 1fr) 8rem minmax(0, 1fr); }
}
@media (max-width: 1199.98px) {
  .lc-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lc-checks, .lc-side-btns, .lc-main-btns { padding-top: 0; }
  .lc-side-btns { flex-direction: row; flex-wrap: wrap; align-self: end; }
  .lc-main-btns { justify-content: flex-end; align-self: end; }
}
@media (max-width: 991.98px) {
  .lc-amort-layout { grid-template-columns: minmax(0, 1fr); }
  .lc-amort-side { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .75rem 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .lc-last { flex: 1 1 11rem; }
  .lc-payoff { flex: 1 1 100%; }
  .lc-filter { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .lc-form > .card-body { padding: .75rem .75rem .25rem; }
  .lc-kv, .lc-kv-right { grid-template-columns: 7rem minmax(0, 1fr); gap: .4rem .6rem; }
  .lc-kv > label { font-size: .78rem; }
  .lc-orno { max-width: none; }
  .lc-actions { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .lc-side-btns .btn { flex: 1 1 0; }
  .lc-main-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .lc-big { min-width: 0; width: 100%; }
  .lc-amort { width: calc(100% + .6rem); margin: -.3rem -.3rem 0; border-spacing: .3rem .3rem; }
  .lc-amort thead th:first-child { width: 5.6rem; }
  .lc-amort tbody th { font-size: .72rem; line-height: 1.15; white-space: normal; }
  .lc-amort input { padding-left: .3rem; padding-right: .3rem; font-size: .78rem; }
  .lc-view-btn > span { display: none; }
  .lc-view-btn { padding: .2rem .5rem; }
  .lc-filter { grid-template-columns: minmax(0, 1fr); }
  .lc-class { flex: 1 1 100%; }
  .lc-list-btns { width: 100%; }
  .lc-list-btns .btn { flex: 1 1 0; min-width: 0; }
  .lc-f-go .btn { width: 100%; }
  .lc-caption { display: block; margin: .1rem 0 0; font-size: .76rem; }
  .lc-loans td.wrap { min-width: 0; }
}
@media (max-width: 575.98px) {
  /* the amortization figures: the label of each row above its three boxes, so the amounts keep their width */
  .lc-amort, .lc-amort thead, .lc-amort tbody { display: block; width: 100%; margin: 0; }
  .lc-amort tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem .35rem; margin-bottom: .45rem; }
  .lc-amort thead tr { margin-bottom: .2rem; }
  .lc-amort thead th:first-child { display: none; }
  .lc-amort tbody th { grid-column: 1 / -1; font-size: .76rem; }
  .lc-amort td { display: block; padding: 0; }
  .lc-amort input { font-size: .82rem; }
}

/* =====================================================================
   Loans > Loan Release: the Loan Release Form of the former program (left: the borrower and the payment details;
   right: the release date, the net proceeds, the release type and the co-makers; under them the Loan Charges grid
   and the document buttons), and the Cash / Check Voucher of a loan release (print)
   ===================================================================== */
.lr-card { overflow: hidden; }
.lr-title { padding: .8rem 1.1rem; font-size: 1.12rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--line); background: linear-gradient(#fff, var(--surface-2)); }
.lr-title-sub { display: block; margin-top: .1rem; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.lr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.6rem; padding: 1rem 1.1rem .25rem; }
.lr-col { min-width: 0; }
.lr-kv { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr); align-items: center; gap: .45rem .75rem; }
.lr-kv > label { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.lr-pair { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.lr-pair > label { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.lr-pair > .form-control, .lr-pair > .form-select { flex: 1 1 0; min-width: 0; }
.lr-term > .form-control { flex: 0 1 6.5rem; }
.lr-sub { font-size: .8rem; font-weight: 650; color: var(--ink-soft); }
.lr-inst { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; padding: .5rem .7rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.lr-inst .lr-sub { flex: 1 1 100%; }
.lr-inst .form-check { margin: 0; }
.lr-note { margin-top: .4rem; font-size: .76rem; color: var(--muted); }
.lr-net .lr-kv { grid-template-columns: 9.25rem minmax(0, 1fr); }
.lr-net-big { display: block; margin-top: .6rem; padding: .55rem .9rem; font-size: 1.9rem; font-weight: 750; line-height: 1.2; text-align: center; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--inset); transition: opacity .15s; }
.lr-net-big.is-bad { color: #b42318; }
.lr-net-sub { min-height: 1rem; margin-top: .3rem; font-size: .76rem; color: var(--muted); text-align: center; }
.lr-form.is-loading .lr-net-big, .lr-form.is-loading #lrTotal { opacity: .45; }
.lr-type-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; }
.lr-type-row .form-check { margin: 0; }
.lr-inline-label { margin: 0 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.lr-cheque { flex: 0 1 11rem; min-width: 8rem; font-variant-numeric: tabular-nums; }
.lr-list { list-style: none; margin: 0; padding: .45rem .65rem; min-height: 4.25rem; max-height: 7.5rem; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--inset); font-size: .85rem; }
.lr-list li { padding: .12rem 0; }
.lr-charges { padding: .35rem 1.1rem .9rem; }
.lr-charges-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.lr-grid-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--inset); max-height: 19rem; overflow: auto; }
.lr-grid { margin: 0; font-size: .85rem; --bs-table-bg: transparent; }
.lr-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-soft); font-size: .76rem; font-weight: 650; border-bottom: 1px solid var(--line); padding: .45rem .6rem; white-space: nowrap; }
.lr-grid td { padding: .35rem .6rem; vertical-align: top; border-color: var(--line-soft); }
.lr-grid td:first-child { min-width: 13rem; }
.lr-grid td[data-ch-acct] { padding-top: .55rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.lr-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.lr-grid .lr-rate { width: 6.25rem; margin-left: auto; }
.lr-grid [data-ch-amount] { width: 8.5rem; margin-left: auto; }
.lr-grid .lr-x { width: 2rem; text-align: center; padding-top: .5rem; }
.lr-basis { margin-top: .15rem; font-size: .72rem; color: var(--muted); }
.lr-grid tr.is-bad .lr-basis { color: #b42318; font-weight: 600; }
.lr-totals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .55rem; }
.lr-tot { display: flex; align-items: baseline; gap: .75rem; }
.lr-tot span { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.lr-tot output { min-width: 8.5rem; padding: .3rem .6rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lr-more { padding: .75rem 1.1rem; border-top: 1px solid var(--line-soft); }
.lr-renew { font-size: .86rem; padding: .5rem .7rem; background: #fffbea; border: 1px solid #eadba8; border-radius: var(--radius-sm); margin-bottom: .5rem; }
.lr-facts .coop-kv { margin: 0; }
.lr-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: .85rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.lr-docs { display: flex; flex-wrap: wrap; gap: .4rem; }
.lr-docs .btn { white-space: nowrap; }
.lr-release { min-width: 11rem; margin-left: auto; padding: .65rem 1.4rem; font-size: 1.02rem; font-weight: 650; }

@media (max-width: 991.98px) {
  .lr-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .lr-body { padding: .8rem .75rem .25rem; }
  .lr-kv, .lr-net .lr-kv { grid-template-columns: 7.25rem minmax(0, 1fr); gap: .4rem .6rem; }
  .lr-kv > label { font-size: .78rem; }
  .lr-net-big { font-size: 1.6rem; }
  .lr-inline-label { margin-left: 0; }
  .lr-cheque { flex: 1 1 8rem; }
  .lr-charges, .lr-more { padding-left: .75rem; padding-right: .75rem; }
  .lr-grid td:first-child { min-width: 9.5rem; }
  .lr-grid .lr-rate { width: 4.75rem; }
  .lr-grid [data-ch-amount] { width: 6.75rem; }
  .lr-totals { justify-content: stretch; }
  .lr-tot { flex: 1 1 100%; justify-content: space-between; }
  .lr-foot { padding: .75rem; }
  .lr-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lr-docs .btn, .lr-docs .btn-group { width: 100%; }
  .lr-docs .btn-group > .btn { width: 100%; }
  .lr-release { width: 100%; }
  .lr-term > .form-control { flex: 0 0 4.25rem; }
  .lr-term > .form-select { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
  /* the deductions as cards: the charge on its own line, its rate and amount under it */
  .lr-grid-wrap { max-height: none; overflow: visible; }
  .lr-grid thead { display: none; }
  .lr-grid, .lr-grid tbody { display: block; }
  .lr-grid tr[data-ch] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem; gap: .35rem .5rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); }
  .lr-grid tr[data-ch] > td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  .lr-grid tr[data-ch] > td:first-child { grid-column: 1 / -1; }
  .lr-grid tr[data-ch] > td[data-ch-acct] { display: none; }
  .lr-grid .lr-rate, .lr-grid [data-ch-amount] { width: 100%; }
  .lr-grid .lr-x { grid-column: 3; grid-row: 2; padding-top: .3rem !important; }
  .lr-grid tr[data-ch] > td.num::before { display: block; font-size: .7rem; font-weight: 600; color: var(--ink-soft); text-align: left; margin-bottom: .1rem; }
  .lr-grid tr[data-ch] > td:nth-child(3)::before { content: "Rate/Amount"; }
  .lr-grid tr[data-ch] > td:nth-child(4)::before { content: "Calculated Amount"; }
  .lr-grid tr[data-ch]:has(> td.lr-x) > td:nth-child(3), .lr-grid tr[data-ch]:has(> td.lr-x) > td:nth-child(4) { align-self: end; }
}

/* ---- the Cash Voucher / Check Voucher of a loan release, as the former program printed it */
.lv-doc { position: relative; font-size: .86rem; color: #111; }
.lv-head { text-align: center; line-height: 1.35; margin-bottom: 1.1rem; }
.lv-logo { margin-bottom: .35rem; }
.lv-logo img { max-height: 58px; max-width: 160px; }
.lv-coop { font-size: 1.32rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.lv-title { margin-top: .85rem; font-size: 1.32rem; font-weight: 800; }
.lv-class { font-size: .88rem; }
.lv-gap { display: inline-block; width: 1.5rem; }
.lv-void { margin-top: .3rem; font-weight: 800; letter-spacing: .2em; color: #b42318; }
.lv-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem 3rem; margin-bottom: 1rem; }
.lv-f { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: end; gap: .5rem; }
.lv-f > span { font-weight: 700; }
.lv-f > b { font-weight: 500; border-bottom: 1px solid #111; padding: 0 .35rem .1rem; min-height: 1.35rem; }
.lv-fields .lv-f:nth-child(even) { grid-template-columns: 5.75rem minmax(0, 1fr); }
.lv-lines { width: 100%; border-collapse: collapse; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.lv-lines thead th { font-weight: 700; padding: .35rem .4rem; border-top: 1px solid #111; border-bottom: 1px solid #111; white-space: nowrap; }
.lv-lines td { padding: .18rem .4rem; vertical-align: top; }
.lv-lines tbody tr:last-child td { padding-bottom: .45rem; }
.lv-lines .num { text-align: right; white-space: nowrap; }
.lv-lines .lv-id { width: 6.5rem; text-align: center; }
.lv-lines .lv-sl { width: 6rem; }
.lv-lines .lv-memo { max-width: 15rem; }
.lv-lines tfoot td { border-top: 2.5px double #111; padding-top: .35rem; font-weight: 700; }
.lv-lines .lv-tot-label { text-align: right; }
.lv-lines .lv-tot-m { visibility: hidden; }
.lv-ref { font-size: .76rem; color: #444; margin-bottom: 1.6rem; }
.lv-sigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 2rem; }
.lv-sig { display: flex; flex-direction: column; gap: 1.6rem; }
.lv-sig > span { font-weight: 700; }
.lv-sig > b { font-weight: 500; border-bottom: 1px solid #111; min-height: 1.35rem; text-align: center; }
.lv-sig.lv-date { justify-content: flex-end; gap: .15rem; text-align: center; }
.lv-sig.lv-date > span { font-weight: 400; font-style: italic; font-size: .78rem; }
@media (max-width: 575.98px) {
  .lv-fields { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .lv-fields .lv-f:nth-child(even) { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .lv-doc .lv-lines { font-size: .74rem; }
  .lv-lines .lv-sl, .lv-lines .lv-memo { display: none; }
  .lv-lines .lv-tot-m { visibility: visible; }
  .lv-sigs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
}
@media print {
  .lv-doc { font-size: 10.5pt; }
  .lv-lines .lv-sl, .lv-lines .lv-memo { display: table-cell !important; }
  .lv-lines .lv-tot-m { visibility: hidden !important; }
  .lv-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lv-sigs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---- the Loan Release Statement, as the former program printed it: no schedule, the amortization due each year */
.lrs { font-size: .9rem; color: #111; }
.lrs-head { text-align: center; line-height: 1.35; margin-bottom: 1.1rem; }
.lrs-coop { font-size: 1.32rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.lrs-title { margin-top: .5rem; font-size: 1.2rem; font-weight: 800; }
.lrs-info { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .2rem 2.5rem; margin-bottom: .6rem; }
.lrs-col > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .5rem; padding: .16rem 0; }
.lrs-col b { font-weight: 500; }
.lrs-right > div { grid-template-columns: 8rem minmax(0, 1fr); }
.lrs-right b { text-align: right; font-variant-numeric: tabular-nums; }
.lrs-box { border: 1.5px solid #111; margin-bottom: 1.4rem; }
.lrs-amounts { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lrs-amounts th, .lrs-amounts td { padding: .2rem .9rem; }
.lrs-amounts thead th { font-weight: 700; padding-top: .55rem; }
.lrs-amounts .num { text-align: right; width: 12rem; padding-right: 9rem; }
.lrs-strong td:first-child { font-weight: 700; }
.lrs-less { padding-left: 2.2rem !important; }
.lrs-item { padding-left: 4.4rem !important; }
.lrs-net td { padding-bottom: .6rem; }
.lrs-net .num span { display: inline-block; min-width: 9rem; padding-top: .2rem; border-top: 3px double #111; }
.lrs-sep { padding: 0 .9rem .45rem; font-size: .78rem; }
.lrs-amort { border-top: 1.5px solid #111; padding: .5rem .9rem .65rem; overflow-x: auto; }
.lrs-amort table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lrs-amort th, .lrs-amort td { padding: .2rem .75rem; white-space: nowrap; }
.lrs-amort thead th:first-child { text-align: left; padding-left: 0; padding-right: 2rem; }
.lrs-amort thead th.num span { display: inline-block; min-width: 7rem; text-align: center; border-bottom: 1px solid #111; }
.lrs-amort tbody th { text-align: right; padding-right: 2rem; }
.lrs-amort td.num { text-align: right; min-width: 7.5rem; }
.lrs-yt td span { display: inline-block; min-width: 7rem; border-top: 1px solid #111; padding-top: .1rem; }
.lrs-sigs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; }
.lrs-sig { display: flex; flex-direction: column; }
.lrs-sig > span { font-weight: 700; margin-bottom: 2.1rem; }
.lrs-sig > b { font-weight: 500; text-align: center; border-top: 1px solid #111; padding-top: .15rem; max-width: 18rem; min-height: 1.4rem; }
.lrs-sig:nth-child(2) > b { margin-left: auto; width: 100%; }
.lrs-received > b { max-width: 17rem; min-height: 0; margin-bottom: .15rem; }
.lrs-received > em { font-style: normal; font-weight: 700; max-width: 17rem; }
.lrs-ref { margin-top: 1.5rem; font-size: .72rem; color: #555; }
@media (max-width: 575.98px) {
  .lrs-info { grid-template-columns: minmax(0, 1fr); }
  .lrs-col > div, .lrs-right > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .lrs-right b { text-align: left; }
  .lrs-amounts .num { padding-right: .9rem; width: auto; }
  .lrs-item { padding-left: 1.6rem !important; }
  .lrs-less { padding-left: .9rem !important; }
  .lrs-sigs { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .lrs-info { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; }
  .lrs-sigs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lrs-amounts .num { padding-right: 9rem !important; width: 12rem !important; }
}

/* ---- Loan Accounts Center: the grid of the former program, and its Loan Ledger Form, Internal Ledger Form and
   schedule (dialogs, and printed) */
.la-grid tr.is-closed > td { color: #6b7280; }
.la-grid thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.la-grid td { padding-left: .5rem; padding-right: .5rem; }
.la-grid td.wrap { min-width: 9rem; }
.la-modal .modal-body { min-height: 16rem; background: var(--surface-2); }
.la-modal .modal-footer { justify-content: flex-end; gap: .5rem; }
.la-views { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; font-size: .86rem; }
.la-views .form-check { margin: 0; }
.la-loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }
[data-row-load][aria-busy="true"] > :not(.la-loading) { opacity: .55; transition: opacity .15s; }
.la-head { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.la-no { padding: .3rem 1.75rem; font-size: 1.25rem; font-weight: 750; letter-spacing: .02em; font-variant-numeric: tabular-nums; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--inset); }
.la-facts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .35rem 2.5rem; width: 100%; }
.la-f { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; gap: .5rem; font-size: .85rem; }
.la-f > span { font-weight: 600; color: var(--ink-soft); }
.la-f > b { font-weight: 600; padding: .22rem .5rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; min-height: 1.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--inset); overflow: auto; max-height: calc(100vh - 21rem); min-height: 9rem; }
.la-table { margin: 0; font-size: .83rem; font-variant-numeric: tabular-nums; --bs-table-bg: transparent; }
.la-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-soft); font-size: .75rem; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); padding: .45rem .55rem; }
.la-table thead tr.la-groups th { top: 0; text-align: center; border-bottom: 0; border-left: 1px solid var(--line); padding-bottom: .1rem; }
.la-table thead tr.la-groups th:first-child { border-left: 0; }
.la-internal thead tr:nth-child(2) th { top: 1.65rem; }
.la-internal td:nth-child(3), .la-internal td:nth-child(6), .la-internal td:nth-child(9),
.la-internal thead tr:nth-child(2) th:nth-child(3), .la-internal thead tr:nth-child(2) th:nth-child(6), .la-internal thead tr:nth-child(2) th:nth-child(9) { border-left: 1px solid var(--line-soft); }
.la-table td { padding: .3rem .55rem; border-color: var(--line-soft); white-space: nowrap; }
.la-table td.la-memo { white-space: normal; min-width: 12rem; }
.la-table .num { text-align: right; }
.la-table .neg { color: #b42318; }
.la-table tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--line); }
.la-table .la-tot { text-align: right; }
.la-table tr.is-computed > td { font-style: italic; background: #fffbea; }
.la-table tr.is-late > td { background: #fff4f2; }
.la-note { font-size: .72rem; color: var(--muted); font-style: normal; white-space: normal; }
.la-foot-note { margin-top: .6rem; font-size: .76rem; color: var(--ink-soft); }
.la-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.5rem; margin-top: .65rem; font-size: .84rem; }
.la-sum > div { display: flex; align-items: baseline; gap: .5rem; }
.la-sum span { color: var(--ink-soft); }
.la-sum b { font-variant-numeric: tabular-nums; }
.la-sum-total b { font-size: 1rem; }
.la-print-head { text-align: center; line-height: 1.35; margin-bottom: .9rem; }
.la-print-coop { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; }
.la-print-title { margin-top: .4rem; font-size: 1.12rem; font-weight: 800; }
.la-print { max-width: 1100px; }
.la-print .la-table-wrap { max-height: none; overflow: visible; box-shadow: none; }
.la-print .la-table thead th, .la-print .la-table tfoot td { position: static; }
.la-print .la-table tr.is-computed > td { background: transparent; }
@media (max-width: 767.98px) {
  .la-facts { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .la-f { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .la-table-wrap { max-height: none; }
  .la-modal .modal-footer { justify-content: space-between; }
  .la-views { width: 100%; }
  .la-sum { justify-content: stretch; }
  .la-sum > div { flex: 1 1 100%; justify-content: space-between; }
}
@media print {
  .la-print .la-table { font-size: 8.5pt; }
  .la-print .la-table td, .la-print .la-table th { padding: .15rem .3rem; }
  .la-print .la-facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
  .la-print .la-f > b { border: 0; border-bottom: 1px solid #111; border-radius: 0; }
}

/* ------------------------------------------------------------------ version 34: editable grids, credit investigation */
.coop-grid td > .form-control, .coop-grid td > .form-select { min-width: 6.5rem; }
.coop-grid td[data-type="number"] > .form-control { min-width: 4.5rem; }
.coop-grid td[data-type="money"] > .form-control { min-width: 7.5rem; }
.coop-grid td[data-type="date"] > .form-control { min-width: 8.75rem; }
.coop-grid td[data-type="check"] { text-align: center; }
.ci-carry { display: flex; gap: .7rem; align-items: flex-start; }
.ci-carry > .bi { font-size: 1.15rem; line-height: 1.2; }
@media (max-width: 575.98px) {
  /* a grid row becomes a small card with each label above its box */
  .coop-grid thead { display: none; }
  .coop-grid, .coop-grid tbody, .coop-grid tr, .coop-grid td { display: block; width: 100%; }
  .coop-grid tr { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--raise-1); padding: .55rem 2.4rem .35rem .65rem; margin-bottom: .6rem; }
  .coop-grid td { border: 0 !important; padding: 0 0 .35rem !important; }
  .coop-grid td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); margin-bottom: .12rem; }
  .coop-grid td > .form-control, .coop-grid td > .form-select { min-width: 0 !important; width: 100%; }
  .coop-grid td[data-type="check"] { text-align: left; }
  .coop-grid td.grid-acts { position: absolute; top: .15rem; right: .15rem; width: auto !important; padding: 0 !important; }
  .table-responsive:has(> .coop-grid) { overflow: visible; }
  .coop-grid tr { width: auto; }
  .table-responsive > .coop-grid { margin-bottom: .4rem; }
}

/* ------------------------------------------------------------------ version 34: Passbook Types (setup and design) */
.pbt { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pbt-side { position: sticky; top: calc(var(--bar-h) + 12px); }
.pbt-list tbody tr { cursor: pointer; }
.pbt-list tbody tr.is-current > td { background: var(--blue-tint); }
.pbt-list tbody tr.is-current > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.pbt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: .85rem; align-items: start; }
.pbt-box { border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--raise-1); padding: .45rem .7rem .6rem; margin: 0; min-width: 0; }
.pbt-box > legend { float: none; width: auto; font-size: .8rem; font-weight: 700; color: var(--ink-soft); padding: 0 .3rem; margin: 0 0 .1rem -.3rem; }
.pbt-row { display: grid; grid-template-columns: minmax(5.5rem, 42%) minmax(0, 1fr); align-items: center; gap: .45rem; margin-top: .35rem; }
.pbt-row > label { font-size: .8rem; color: var(--ink-soft); margin: 0; }
.pbt-margins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.pbt-margins .pbt-row { grid-template-columns: 2.6rem minmax(0, 1fr); }
.pbt-margins .pbt-body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.pbt-margins .pbt-body > legend { grid-column: 1 / -1; }
.pbt-margins .pbt-body .pbt-row { grid-template-columns: minmax(7.5rem, 50%) minmax(0, 1fr); }
.pbt-rule { grid-column: 1 / -1; margin-top: .55rem; padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--blue-tint); color: #123a73; font-size: .78rem; line-height: 1.4; }
.pbt-note { margin-top: .55rem; font-size: .74rem; font-style: italic; color: var(--muted); }
.pbt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pbd-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pbd-tabs { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); box-shadow: var(--inset); margin-left: auto; }
.pbd-tab { border: 0; background: transparent; border-radius: 7px; padding: .28rem .75rem; font-size: .84rem; color: var(--ink-soft); font-weight: 600; }
.pbd-tab.is-on { background: var(--surface); color: var(--blue-deep); box-shadow: var(--raise-1); }
.pbd-tab .pbd-count { font-weight: 500; color: var(--muted); margin-left: .15rem; }
.pbd-stage-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: repeating-linear-gradient(45deg, #eef1f5 0 6px, #f4f6f9 6px 12px); padding: .5rem .5rem .75rem; margin-bottom: .9rem; box-shadow: var(--inset); }
.pbd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: 0 .2rem .45rem; }
.pbd-zoom { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.pbd-zoom input { width: 8rem; }
.pbd-stage { overflow: auto; outline: none; border-radius: 6px; max-height: 72vh; }
.pbd-stage:focus-visible { box-shadow: 0 0 0 3px rgba(13, 110, 253, .25); }
.pbd-paper-wrap { display: flex; align-items: flex-start; width: max-content; margin: 0 auto; }
.pbd-gutter { position: relative; width: 26px; flex: none; }
.pbd-gnum { position: absolute; right: 5px; color: #8a95a1; font-variant-numeric: tabular-nums; line-height: 1; }
.pbd-gnum.is-skip { color: #c2410c; }
.pbd-paper { position: relative; flex: none; background: #fff; border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 3px 8px rgba(15, 23, 42, .12), 0 22px 40px -24px rgba(15, 23, 42, .45); overflow: hidden;
  font-family: "Courier New", Courier, monospace; color: #1f2933; }
.pbd-stage.is-sans .pbd-paper { font-family: Arial, Helvetica, sans-serif; }
.pbd-paper.is-cover { background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }
.pbd-guide { position: absolute; left: 0; right: 0; border-top: 1px solid #eef1f5; pointer-events: none; }
.pbd-guide.is-skip { background: repeating-linear-gradient(135deg, rgba(234, 88, 12, .08) 0 6px, rgba(234, 88, 12, .02) 6px 12px); border-top-color: rgba(234, 88, 12, .35); color: #c2410c;
  font: 600 10px/1 system-ui, sans-serif; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.pbd-item { position: absolute; white-space: nowrap; padding: 0 1px; border-radius: 2px; color: #9aa4af; }
.pbd-item.is-live { color: #1f2933; cursor: grab; outline: 1px dashed rgba(13, 110, 253, .35); outline-offset: 1px; background: rgba(231, 240, 255, .45); touch-action: none; }
.pbd-item.is-live:hover { outline-color: rgba(13, 110, 253, .8); }
.pbd-item.is-sel { outline: 2px solid var(--blue); background: rgba(231, 240, 255, .9); z-index: 2; }
.pbd-item.is-empty { color: #8a95a1; font-style: italic; }
.pbd-origin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; cursor: move; z-index: 3; touch-action: none; }
.pbd-origin::before, .pbd-origin::after { content: ""; position: absolute; background: var(--blue); border-radius: 1px; }
.pbd-origin::before { left: 8px; top: 0; width: 2px; height: 18px; }
.pbd-origin::after { top: 8px; left: 0; height: 2px; width: 18px; }
.pbd-warn { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: .3rem .5rem; border-radius: 6px; background: #fff4f2; color: #b42318; font: 600 11px/1.3 system-ui, sans-serif; }
.pbd-items th { white-space: nowrap; font-size: .78rem; }
.pbd-items td { min-width: 5.6rem; }
.pbd-items td:first-child { min-width: 13rem; }
.pbd-items td[data-label="Align"] { min-width: 6.2rem; }
.pbd-items td[data-label="Format"] { min-width: 8.4rem; }
.pbd-items td[data-label="Size (pt)"] { min-width: 5rem; }
.pbd-items tr.is-sel > td { background: var(--blue-tint); }
.pbd-items tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
@media (max-width: 1399.98px) {
  .pbt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pbt-grid .pbt-margins { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1599.98px) {
  /* the list of types above the setup, so the design has the whole width */
  .pbt { grid-template-columns: minmax(0, 1fr); }
  .pbt-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: .5rem 1rem; align-items: start; }
  .pbt-side > p { margin-top: 0 !important; }
}
@media (max-width: 767.98px) { .pbt-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .pbt-grid { grid-template-columns: minmax(0, 1fr); }
  .pbt-margins { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pbt-margins .pbt-body { grid-template-columns: minmax(0, 1fr); }
  .pbd-tabs { margin-left: 0; width: 100%; }
  .pbd-tab { flex: 1 1 0; padding: .3rem .3rem; }
  .pbd-zoom { margin-left: 0; }
  /* the fields of a part as small cards, each label above its box */
  .pbd-items thead { display: none; }
  .pbd-items, .pbd-items tbody, .pbd-items tr { display: block; width: 100%; }
  .pbd-items tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--raise-1); padding: .55rem 2.3rem .5rem .6rem; margin-bottom: .55rem; }
  .pbd-items td { display: block; border: 0 !important; padding: 0 !important; min-width: 0 !important; }
  .pbd-items td:first-child { grid-column: 1 / -1; }
  .pbd-items td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--muted); margin-bottom: .1rem; }
  .pbd-items td.grid-acts { position: absolute; top: .2rem; right: .2rem; width: auto; }
  .pbd-sec .table-responsive { overflow: visible; }
  .pbd-items tr { width: auto; }
}
@media (max-width: 575.98px) {
  .pbt-margins { grid-template-columns: minmax(0, 1fr); }
  .pbd-items tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ version 34: Passbook Printing */
.pb-page.pb-sans .pb-line { font-family: Arial, Helvetica, sans-serif; }
.pbp-open { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--raise-1); }
.pbp-kind { display: inline-flex; gap: .2rem; flex-wrap: wrap; padding: .2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); box-shadow: var(--inset); }
.pbp-kind .btn { border: 0 !important; background: transparent !important; color: var(--ink-soft) !important; box-shadow: none !important; font-weight: 600; border-radius: 7px !important; }
.pbp-kind .btn-check:checked + .btn { background: var(--surface) !important; color: var(--blue-deep) !important; box-shadow: var(--raise-1) !important; }
.pbp-kind .btn-check:focus-visible + .btn { outline: 2px solid rgba(13, 110, 253, .45); outline-offset: 1px; }
.pbp-acct { flex: 1 1 14rem; max-width: 22rem; }
.pbp-head { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--raise-2); }
.pbp-who { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.pbp-no { font: 700 1.15rem/1.1 "Courier New", Courier, monospace; letter-spacing: .04em; padding: .45rem .7rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--inset); white-space: nowrap; }
.pbp-figs { display: grid; grid-template-columns: repeat(4, auto); gap: .3rem 1.4rem; }
.pbp-figs > div { display: flex; flex-direction: column; min-width: 0; }
.pbp-figs span { font-size: .72rem; color: var(--muted); }
.pbp-figs b { font-size: .92rem; font-weight: 700; white-space: nowrap; }
.pbp-lines td, .pbp-lines th { white-space: nowrap; }
.pbp-steps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.pbp-preview { overflow: auto; padding: .75rem; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #eef1f5 0 6px, #f4f6f9 6px 12px); border: 1px solid var(--line); box-shadow: var(--inset); }
.pbp-preview .pb-page { max-width: none; margin: 0 auto; }
.pbp-done { display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--raise-1); color: #146c43; }
@media (max-width: 991.98px) { .pbp-figs { grid-template-columns: repeat(2, minmax(0, auto)); } }
@media (max-width: 575.98px) {
  .pbp-acct { max-width: none; }
  .pbp-go, .pbp-go .btn { width: 100%; }
  .pbp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pbp-figs b { white-space: normal; }
  .pbp-steps > *, .pbp-steps .btn { width: 100%; }
}

/* ------------------------------------------------------------------ version 35: Loan Application Center, delete */
.app-center-table .app-del-cell { width: 1%; white-space: nowrap; }
.app-del-btn { display: inline-flex; align-items: center; gap: .3rem; }
.app-end-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--raise-1); }
.app-del-head { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; margin-bottom: .85rem; border: 1px solid #f1c9cd; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff 0%, #fdf3f4 100%); box-shadow: var(--raise-1); }
.app-del-head > .bi { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 9px; font-size: 1.1rem; color: #b02a37; background: #fff; border: 1px solid #f1c9cd; box-shadow: var(--inset); }
.app-del-head strong { font-size: 1.02rem; letter-spacing: .01em; }
@media (max-width: 575.98px) {
  /* each application a card: its Delete button on the right of the first row */
  .app-center-table > tbody > tr { position: relative; }
  .app-center-table td.app-del-cell { position: absolute; top: .55rem; right: .7rem; width: auto; }
  .app-center-table td[data-label="Application"] { padding-right: 6rem !important; }
  .app-del-btn span { display: none; }
  .app-end-actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ version 35: the form cleared after printing */
.sv-prev { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid var(--line); border-left: 4px solid #198754;
  border-radius: var(--radius); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--raise-1); }
.sv-prev > .bi { color: #198754; font-size: 1.25rem; }
.sv-prev > div { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 575.98px) { .sv-prev .btn { width: 100%; } }

/* ------------------------------------------------------------------ version 35: passbook run (several pages in one printing) */
.pb-run-note { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .8rem; margin-bottom: .75rem; font-size: .86rem; border: 1px solid #cfe0fb;
  border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff 0%, var(--blue-tint) 100%); box-shadow: var(--raise-1); }
.pb-run-note > .bi { color: var(--blue-deep); font-size: 1.15rem; line-height: 1.2; }
.pb-run-pages { list-style: none; padding: 0; margin: 0 0 .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--inset); }
.pb-run-pages li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .42rem .7rem; font-size: .86rem; background: var(--surface); }
.pb-run-pages li + li { border-top: 1px solid var(--line-soft); }
.pb-run-pg { font-weight: 700; }
.pb-run-confirm { margin-top: .85rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--inset); transition: box-shadow .2s, border-color .2s; }
.pb-run-confirm.is-ready { border-color: #86b7fe; background: var(--surface); box-shadow: 0 0 0 3px rgba(13, 110, 253, .14), var(--raise-2); }
.pb-run-upto { display: grid; gap: .3rem; padding: .55rem .7rem; margin-bottom: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pb-run-again { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.pbp-page-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .5rem .85rem; font-size: .86rem; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card > .pbp-page-head:first-of-type { border-top: 0; }
.pbp-run { border-top: 1px solid var(--line); }
.pbp-preview-cap { max-width: 100%; margin: .25rem auto .35rem; font-size: .8rem; font-weight: 650; color: var(--ink-soft); text-align: center; }
@media (max-width: 575.98px) {
  .pb-run-pages li { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .pb-run-pages li > span:last-child { grid-column: 2; }
  .pb-run-box > .btn, .pb-run-confirm .btn-success, .pb-run-confirm .btn-outline-secondary { width: 100%; }
}

/* the print window of a run: every page on the screen, only the one printing on paper */
.pb-run { max-width: 56rem; margin: 0 auto; }
.pb-run-page { margin-bottom: 1.25rem; }
.pb-run-cap { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin: 0 auto .45rem; font-size: .86rem; }
.pb-run-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; font-weight: 700; font-size: .8rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--raise-1); }
.pb-run-state { margin-left: auto; font-size: .8rem; color: var(--muted); }
.pb-run-page.is-now .pb-run-num { color: #fff; background: linear-gradient(180deg, #3d8bfd, var(--blue-deep)); border-color: var(--blue-deep); }
.pb-run-page.is-now .pb-run-state { color: var(--blue-deep); font-weight: 650; }
.pb-run-page.is-done .pb-run-num { color: #fff; background: linear-gradient(180deg, #2fa36b, #198754); border-color: #198754; }
.pb-run-page.is-done .pb-run-state { color: #198754; font-weight: 650; }
.pb-turn { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.pb-turn[hidden] { display: none; }
.pb-turn-card { width: min(30rem, 100%); padding: 1.4rem 1.4rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 10px rgba(15, 23, 42, .12), 0 28px 60px -20px rgba(15, 23, 42, .5); }
.pb-turn-icon { display: inline-flex; align-items: center; gap: .15rem; padding: .55rem .7rem; margin-bottom: .8rem; border-radius: 11px; font-size: 1.5rem; color: var(--blue-deep);
  background: linear-gradient(180deg, #fff 0%, var(--blue-tint) 100%); border: 1px solid #cfe0fb; box-shadow: var(--raise-1); }
.pb-turn-icon .bi + .bi { font-size: 1.1rem; }
.pb-turn-title { font-size: 1.35rem; font-weight: 750; margin: 0 0 .45rem; color: var(--ink); }
.pb-turn-text { margin: 0 0 .55rem; color: var(--ink-soft); }
.pb-turn-step { font-size: .84rem; color: #198754; font-weight: 600; margin-bottom: 1rem; }
.pb-turn-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.pb-turn-acts .btn-primary { flex: 1 1 12rem; padding: .6rem 1rem; font-weight: 650; }
.pb-turn-foot { margin-top: .85rem; }
@media (max-width: 575.98px) { .pb-turn-acts .btn { width: 100%; } }
@media print {
  body.pb-running .pb-run-page:not(.is-printing) { display: none !important; }
  .pb-run, .pb-run-page { max-width: none; margin: 0; }
}

/* ------------------------------------------------------------------ version 36: account types, statements by type */
.report-table tr.indent-3 td:first-child { padding-left: 3.5rem; }
.report-table tr.indent-4 td:first-child { padding-left: 4.5rem; }
.report-table tr.indent-5 td:first-child { padding-left: 5.5rem; }
.report-table tr.type-head td { color: #1b2430; }
.report-table tr.acct-total td { font-weight: 600; border-top: 1px dashed #b8c1cc; }
@media (max-width: 575.98px) {
  .report-table tr.indent-3 td:first-child { padding-left: 2.1rem; }
  .report-table tr.indent-4 td:first-child { padding-left: 2.6rem; }
  .report-table tr.indent-5 td:first-child { padding-left: 3.1rem; }
}
/* the Chart of Accounts: a main account followed by its sub-accounts */
.coa-sys, .acty-sys { font-size: .74rem; font-weight: 600; color: var(--muted); margin-left: .25rem; }
.coa-list tr.coa-main td { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.coa-list tr.coa-sub td { font-size: .92em; }
@media (max-width: 575.98px) {
  .coa-list td a { white-space: normal; }
  .coa-list tr.coa-main td { background: transparent; }
  .coa-list tr.coa-main { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
  .coa-list td[data-label="With SL"]:empty { display: none !important; }
  .coa-list td.coa-acts { grid-column: 1 / -1; display: flex !important; gap: .6rem; flex-wrap: wrap; padding-top: .2rem !important; }
  .coa-list td.coa-acts:empty { display: none !important; }
  .coa-list tr.coa-sub { padding-left: 1.4rem; }
  .coa-list td[data-label="Name"].ps-4 { padding-left: 0 !important; }
}
/* the account form: what the type chosen means */
.acct-type-note, .acty-base-note, .acty-where { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; }
.acct-type-note:empty, .acty-base-note:empty, .acty-where:empty { display: none; }
.acct-type-note, .acty-where { padding: .6rem .8rem; border: 1px solid #cfe0fb; border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff 0%, var(--blue-tint) 100%); box-shadow: var(--raise-1); }
.acct-type-note > .bi, .acty-where > .bi { color: var(--blue-deep); font-size: 1.05rem; line-height: 1.2; }
.acty-base-note { color: var(--ink-soft); }
/* Account Types */
.acty-intro { max-width: 62rem; color: var(--ink-soft); font-size: .9rem; margin-bottom: 1rem; }
.acty-flow { display: inline-flex; gap: .2rem; flex-wrap: wrap; padding: .2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); box-shadow: var(--inset); }
.acty-flow .btn { border: 0 !important; background: transparent !important; color: var(--ink-soft) !important; box-shadow: none !important; font-weight: 600; border-radius: 7px !important; }
.acty-flow .btn-check:checked + .btn { background: var(--surface) !important; color: var(--blue-deep) !important; box-shadow: var(--raise-1) !important; }
.acty-flow .btn-check:focus-visible + .btn { outline: 2px solid rgba(13, 110, 253, .45); outline-offset: 1px; }
.acty-list { max-height: 22rem; overflow: auto; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.acty-item { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 1rem; margin: 0; font-size: .88rem; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.acty-item:last-child { border-bottom: 0; }
.acty-item:hover { background: var(--surface-2); }
.acty-item.is-sub { padding-left: 2.2rem; }
.acty-item .form-check-input { margin-top: .2rem; flex: none; }
.acty-item[hidden] { display: none; }
.acty-move { border-top: 0; }
.acty-move select { max-width: 18rem; }
.acty-cf-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); font-size: .86rem; }
.acty-cf-row:last-of-type { border-bottom: 0; }
.acty-cf-k { font-weight: 650; color: var(--ink); }
.acty-how li + li { margin-top: .35rem; }
@media (max-width: 575.98px) {
  .acty-flow { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .acty-cf-row { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .acty-move select { max-width: none; flex: 1 1 100%; }
  .acty-move .btn, .acty-add .btn-primary { width: 100%; }
  .acty-table td.text-end { text-align: left !important; }
}
/* a phone: a row of a stacked table is one card, so the hover and striping tint the card, not each cell apart */
@media (max-width: 575.98px) {
  table.stack-sm.table-hover > tbody > tr:hover > * { --bs-table-bg-state: initial; }
  table.stack-sm.table-hover > tbody > tr:hover { background: var(--surface-2); }
}

/* ------------------------------------------------------------------ version 37: loan finder, adjustment passbook, ISC / PR review */
/* the loan finder (Loan Statement of Account, Loan Adjustments) */
.loan-pick-col { min-width: min(100%, 22rem); }
.loan-pick { position: relative; }
.loan-pick > .bi-search { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #8a95a1; font-size: .8rem; pointer-events: none; z-index: 1; }
.loan-pick > input[type=search] { padding-left: 1.85rem; min-width: 18rem; }
.loan-pick-list {
  position: absolute; z-index: 1060; left: 0; top: calc(100% + 4px); width: max(100%, 30rem); max-width: calc(100vw - 2rem); max-height: 360px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .3rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 36px -14px rgba(15, 23, 42, .35);
}
.lp-head { padding: .3rem .55rem .35rem; font-size: .72rem; font-weight: 650; color: var(--muted); border-bottom: 1px solid var(--line-soft); margin-bottom: .2rem; }
.lp-opt { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .42rem .55rem; border-radius: 7px; cursor: pointer; }
.lp-opt:hover, .lp-opt.is-hi { background: #eef3fb; }
.lp-main { min-width: 0; }
.lp-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lp-sub { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .78rem; color: var(--ink-soft); }
.lp-no { font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.lp-bal { text-align: right; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.lp-bal-k { font-size: .68rem; font-weight: 500; color: var(--muted); }
.lp-none { padding: .55rem .6rem; color: var(--muted); font-size: .85rem; }
.loan-pick-list mark { padding: 0; background: #fff2b3; color: inherit; border-radius: 2px; }
/* Loan Adjustments: the grid of the three balances and Print to Passbook beside the button */
.la-grid th[scope=row] { font-weight: 600; color: var(--ink); vertical-align: middle; }
.la-grid td { vertical-align: middle; }
.la-grid select { min-width: 6.9rem; padding-right: 1.7rem; background-position: right .45rem center; }
.la-grid input { min-width: 5.5rem; }
.la-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: .35rem; }
.la-submit .form-check { padding-top: .1rem; }
@media (max-width: 575.98px) {
  .loan-pick > input[type=search] { min-width: 0; }
  .loan-pick-col { min-width: 0; flex: 1 1 100%; }
  .loan-pick-list { width: 100%; max-width: none; }
  .lp-opt { align-items: flex-start; }
  .la-grid thead { display: none; }
  .la-grid, .la-grid tbody { display: block; width: 100%; }
  .la-grid tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
  .la-grid tr > * { display: block; border: 0; padding: 0 !important; }
  .la-grid th[scope=row] { grid-column: 1 / -1; font-size: .95rem; }
  .la-grid td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 650; color: var(--muted); }
  .la-grid td.num { text-align: left; }
  .la-grid td[data-label="Amount"] { grid-column: 1 / -1; }
  .la-submit .btn { flex: 1 1 100%; }
  .la-submit .form-check { order: -1; }
}
/* Interest on Share Capital / Patronage Refund: the computation for review */
.dist-review-note { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid #cfe0fb; border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, var(--blue-tint) 100%); box-shadow: var(--raise-1); font-size: .9rem; color: var(--ink-soft); }
.dist-review-note > .bi { color: var(--blue-deep); font-size: 1.3rem; line-height: 1.1; }
.dist-review-note strong { color: var(--ink); }
.dist-compute-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dist-review-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.dist-review-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .85rem; font-weight: 400; }
.dist-review-tools input[type=search] { width: 15rem; }
.dist-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 1rem; background: #fff6f6; border-bottom: 1px solid #f3d1d4; box-shadow: var(--inset), 0 6px 12px -10px rgba(15, 23, 42, .35);
  position: sticky; top: var(--bar-h); z-index: 6; }
.dist-bulk[hidden] { display: none; }
.dist-bulk select { width: auto; max-width: 18rem; }
.dist-bulk input[name=reason] { flex: 1 1 12rem; min-width: 0; }
.dist-bulk-n { font-weight: 650; font-size: .85rem; color: #8a2430; min-width: 5rem; }
.dist-table .dist-chk { width: 2rem; }
.dist-table tr.dist-removed > td { color: var(--muted); background: var(--surface-2); }
.dist-table tr.dist-removed a { color: var(--muted); }
.dist-table tr.dist-has-obl:not(.dist-removed) > td:first-child { box-shadow: inset 3px 0 0 #e35d6a; }
.dist-table .dist-why { color: #8a2430; }
.dist-table .dist-obl { line-height: 1.35; min-width: 11rem; }
.dist-form-row > td { background: var(--surface-2); }
.dist-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem 0; }
.dist-inline select { width: auto; max-width: 18rem; }
.dist-inline input[name=reason] { flex: 1 1 12rem; min-width: 0; }
.dist-inline .dist-adj { width: 9rem; }
.dist-table tr[hidden] { display: none; }
@media (max-width: 575.98px) {
  .dist-review-tools, .dist-review-tools input[type=search] { width: 100%; }
  .dist-bulk select, .dist-inline select, .dist-inline .dist-adj { max-width: none; width: 100%; }
  .dist-bulk .btn, .dist-inline .btn { width: 100%; }
  .dist-table tbody tr { position: relative; }
  .dist-table td.dist-chk { position: absolute; top: .6rem; right: .85rem; }
  .dist-table td.dist-chk .form-check-input { width: 1.25rem; height: 1.25rem; }
  .dist-table td[data-label="Member"] { padding-right: 2rem !important; }
  .dist-table td[data-label="Adjustment"]:empty, .dist-table td[data-label="Computed"]:empty { display: none; }
  .dist-table tr.dist-has-obl:not(.dist-removed) > td:first-child { box-shadow: none; }
  .dist-table tr.dist-has-obl:not(.dist-removed) { box-shadow: inset 3px 0 0 #e35d6a; }
  .dist-table tr.dist-removed { background: var(--surface-2); }
  .dist-table .dist-obl { grid-column: 1 / -1; min-width: 0; }
  .dist-table td.dist-acts { text-align: left !important; }
  .dist-form-row > td { display: block; }
  .dist-batches td[data-label]:empty { display: none; }
  .dist-compute-bar .small { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ version 38: ISC / PR basis details, totals, deleting a computation */
/* the basis of a member: pointed at, focused or tapped, it shows how it is worked out */
.dist-table .dist-basis {
  appearance: none; border: 0; background: transparent; padding: .05rem .2rem; margin: -.05rem -.2rem; font: inherit; color: inherit; cursor: help;
  border-radius: 4px; text-decoration: underline dashed #8fb0e6; text-decoration-thickness: 1px; text-underline-offset: 3px; font-variant-numeric: tabular-nums;
  transition: background-color .12s ease, color .12s ease;
}
.dist-table .dist-basis:hover, .dist-table .dist-basis[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue-deep); text-decoration-color: var(--blue); }
.dist-table .dist-basis:focus-visible { outline: 2px solid rgba(13, 110, 253, .45); outline-offset: 1px; }
.dist-table tr.dist-removed .dist-basis { color: var(--muted); }
.dist-pop {
  position: fixed; z-index: 1075; display: flex; flex-direction: column; min-width: 0; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 5px rgba(15, 23, 42, .08), 0 26px 52px -18px rgba(15, 23, 42, .42);
  animation: distPopIn .14s ease-out;
}
.dist-pop[hidden] { display: none; }
.dist-pop::before {
  content: ""; position: absolute; top: -7px; left: calc(var(--caret-x, 50%) - 7px); width: 13px; height: 13px; transform: rotate(45deg);
  background: #fbfcfd; border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-top-left-radius: 3px;
}
.dist-pop.is-up::before { top: auto; bottom: -7px; transform: rotate(225deg); background: var(--surface); }
@keyframes distPopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dist-pop-grip { display: none; }
.dist-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .85rem; border-bottom: 1px solid var(--line-soft);
  border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #fbfcfd 0%, var(--surface-2) 100%); position: relative;
}
.dist-pop-title { font-weight: 650; font-size: .9rem; color: var(--ink); }
.dist-pop-head .btn-close { font-size: .7rem; padding: .35rem; }
.dist-pop-body { padding: .7rem .85rem .85rem; overflow: auto; min-height: 0; font-size: .84rem; color: var(--ink-soft); overscroll-behavior: contain; outline: 0; }
.dist-pop-wait { display: flex; align-items: center; gap: .5rem; color: var(--muted); padding: .35rem 0; }
.db-who { color: var(--ink); }
.db-who strong { font-weight: 650; }
.db-who span { color: var(--muted); font-size: .78rem; margin-left: .25rem; }
.db-sub { color: var(--muted); font-size: .78rem; line-height: 1.4; margin: .1rem 0 .55rem; }
.db-muted { color: var(--muted); }
.db-scroll { max-height: 15.5rem; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: var(--inset); }
.db-table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.db-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 650; font-size: .72rem; padding: .32rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.db-table td { padding: .28rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table .num { text-align: right; white-space: nowrap; }
.db-table tfoot td { position: sticky; bottom: 0; background: #f1f4f8; border-top: 1px solid var(--line); border-bottom: 0; font-weight: 650; }
.db-move { font-size: .72rem; line-height: 1.25; }
.db-in { color: #157347; }
.db-out { color: #b02a37; }
.db-docs td:first-child { width: 6.2rem; color: var(--ink-soft); }
.db-group + .db-group { margin-top: .6rem; }
.db-group-head { display: flex; justify-content: space-between; gap: .75rem; font-weight: 650; color: var(--ink); font-size: .8rem; padding: 0 .1rem .3rem; }
.db-group-head .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-result {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .9rem; margin-top: .6rem; padding: .5rem .7rem;
  border: 1px solid #cfe0fb; border-radius: 8px; background: linear-gradient(180deg, #fff 0%, var(--blue-tint) 100%); box-shadow: var(--raise-1);
  font-variant-numeric: tabular-nums;
}
.db-result > span:first-child { font-weight: 650; color: var(--ink); }
.db-result > span:last-child { margin-left: auto; text-align: right; color: var(--ink-soft); }
.db-result strong { color: var(--blue-deep); font-size: .95rem; }
.db-warn { margin-top: .55rem; padding: .45rem .6rem; border: 1px solid #f1d9a6; border-radius: 8px; background: #fff8e8; color: #6f4a00; font-size: .78rem; line-height: 1.4; }
.db-calc { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.db-calc > div { display: flex; justify-content: space-between; align-items: baseline; gap: .2rem .9rem; padding: .12rem 0; }
.db-calc > div > span:first-child { color: var(--muted); flex: none; min-width: 5.5rem; }
.db-calc > div > span:last-child { text-align: right; color: var(--ink-soft); }
.db-calc strong { color: var(--ink); }
.db-calc > .db-how { display: block; padding: 0 0 .2rem; font-size: .74rem; color: var(--muted); text-align: right; }
.db-calc .db-net { margin-top: .2rem; padding-top: .3rem; border-top: 1px solid var(--line-soft); font-size: .9rem; }
.db-calc .db-net > span:first-child { color: var(--ink); font-weight: 650; }
.dist-pop-shade { position: fixed; inset: 0; z-index: 1074; background: rgba(15, 23, 42, .4); animation: distShade .16s ease-out; }
.dist-pop-shade[hidden] { display: none; }
@keyframes distShade { from { opacity: 0; } to { opacity: 1; } }
/* a phone: the details open as a sheet from the bottom */
.dist-pop.is-sheet {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 84vh; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0); animation: distSheetIn .2s ease-out;
}
.dist-pop.is-sheet::before { display: none; }
.dist-pop.is-sheet .dist-pop-grip { display: block; width: 2.6rem; height: 4px; margin: .45rem auto 0; border-radius: 2px; background: #cfd5dd; }
.dist-pop.is-sheet .dist-pop-head { border-radius: 0; background: var(--surface); padding-top: .4rem; }
.dist-pop.is-sheet .dist-pop-title { font-size: 1rem; }
.dist-pop.is-sheet .dist-pop-head .btn-close { font-size: .85rem; padding: .55rem; }
.dist-pop.is-sheet .dist-pop-body { font-size: .88rem; padding-bottom: 1.1rem; }
.dist-pop.is-sheet .db-scroll { max-height: none; }
@keyframes distSheetIn { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
body.dist-pop-open { overflow: hidden; }
/* the totals under the members: those on the list, those removed, those shown by the search */
.dist-table > tfoot > tr > td { font-variant-numeric: tabular-nums; border-bottom-width: 0; }
.dist-table tr.dist-total { --bs-table-bg: #eef2f7; }
.dist-table tr.dist-total > td { border-top: 2px solid #c9d1dc; font-weight: 700; color: var(--ink); padding-top: .55rem; padding-bottom: .55rem; }
.dist-table tr.dist-total-ex { --bs-table-bg: var(--surface-2); }
.dist-table tr.dist-total-ex > td { color: var(--muted); border-top: 1px solid var(--line-soft); }
.dist-table tr.dist-total-shown { --bs-table-bg: var(--blue-tint); }
.dist-table tr.dist-total-shown > td { color: var(--blue-deep); font-weight: 650; border-top: 1px solid #cfe0fb; }
.dist-table tr.dist-total-shown[hidden] { display: none; }
.dist-foot-k .small { font-weight: 500; color: var(--muted); }
.dist-table tr.dist-total-shown .dist-foot-k .small { color: #4f74b3; }
/* Distribution Batches: Delete beside a batch not yet posted */
.dist-batches .dist-del-cell { width: 1%; white-space: nowrap; }
.dist-batches .dist-del-btn { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.dist-batches .dist-del-btn:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  .dist-foot td.dist-chk, .dist-foot td:empty { display: none !important; }
  .dist-table > tfoot > tr { border-bottom: 1px solid var(--line); }
  .dist-table tr.dist-total { background: #eef2f7; box-shadow: inset 0 2px 0 #c9d1dc; }
  .dist-table tr.dist-total-ex { background: var(--surface-2); }
  .dist-table tr.dist-total-shown { background: var(--blue-tint); }
  .dist-table > tfoot > tr > td { border-top: 0 !important; }
  .dist-table .dist-basis { padding: .15rem .3rem; margin: -.15rem -.3rem; }
  .dist-batches td.dist-del-cell { width: auto; text-align: left !important; border-top: 1px dashed var(--line-soft) !important; padding-top: .35rem !important; margin-top: .15rem; }
  .dist-batches td.dist-del-cell:empty { display: none; }
  .dist-batches .dist-del-btn { padding: .2rem 0 !important; }
}

/* ------------------------------------------------------------------ version 39: CSV uploads reviewed in a grid, holds, batch transactions */
/* the file step */
.csvr-step .card-body { display: flex; flex-direction: column; gap: .35rem; }
.csvr-step-foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.csvr-cols { display: grid; gap: .1rem; margin: 0; }
.csvr-cols > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: .1rem .75rem; padding: .32rem 0; border-bottom: 1px solid var(--line-soft); }
.csvr-cols > div:last-child { border-bottom: 0; }
.csvr-cols dt { font-family: var(--bs-font-monospace); font-size: .78rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.csvr-cols dt strong { font-weight: 700; color: var(--blue-deep); }
.csvr-cols dd { margin: 0; color: var(--ink-soft); }
.csvr-cols dd span { display: block; color: var(--muted); font-size: .76rem; }
/* the full template's columns, by group */
.csvr-more-cols > summary { font-weight: 600; color: var(--blue-deep); cursor: pointer; }
.csvr-cols-group { margin: .9rem 0 .15rem; padding-bottom: .25rem; border-bottom: 2px solid var(--line); font-weight: 600; font-size: .82rem; color: var(--ink); }
/* the review */
.csvr-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.csvr-file { display: flex; gap: .7rem; align-items: flex-start; }
.csvr-file > .bi { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 9px; font-size: 1.15rem; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid #cfe0fb; box-shadow: var(--inset); }
.csvr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--raise-1); overflow: hidden; }
.csvr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem .85rem; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }
.csvr-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.1rem; font-size: .86rem; color: var(--ink-soft); }
.csvr-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.csvr-count.is-bad, .csvr-count.is-bad strong { color: #b02a37; }
.csvr-count.is-edit, .csvr-count.is-edit strong { color: var(--blue-deep); }
.csvr-count.is-muted { color: var(--muted); }
.csvr-count[hidden] { display: none; }
.csvr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .85rem; }
.csvr-tools input[type=search] { width: 14rem; }
.csvr-scroll { overflow: auto; max-height: calc(100vh - 17rem); min-height: 12rem; }
.csvr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.csvr-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 650; font-size: .74rem; text-align: left; white-space: nowrap;
  padding: .45rem .4rem; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); }
.csvr-req { color: #b02a37; }
.csvr-table td { padding: .28rem .3rem; vertical-align: top; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.csvr-table .form-control, .csvr-table .form-select { min-height: 0; padding: .22rem .45rem; font-size: .83rem; border-color: #d9dee5; box-shadow: none; }
.csvr-table .form-select { padding-right: 1.6rem; background-position: right .4rem center; }
.csvr-table .form-control:focus, .csvr-table .form-select:focus { border-color: #86b2f5; box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .15); }
.csvr-c-xs { min-width: 4.6rem; width: 4.6rem; }
.csvr-c-sm { min-width: 7.6rem; }
.csvr-c-md { min-width: 10rem; }
.csvr-c-lg { min-width: 14rem; }
.csvr-no { width: 3.6rem; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; padding-left: .7rem !important; padding-top: .45rem !important; }
.csvr-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; background: #c4cbd4; vertical-align: .05rem; }
.csvr-rec.is-ok .csvr-dot { background: #20a464; box-shadow: 0 0 0 3px rgba(32, 164, 100, .14); }
.csvr-rec.is-bad .csvr-dot { background: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
.csvr-rec.is-edited .csvr-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(13, 110, 253, .14); }
/* a row with a problem: red, so it stands out to be corrected or removed */
.csvr-rec.is-bad .csvr-main > td, .csvr-rec.is-bad .csvr-msg > td, .csvr-rec.is-bad .csvr-more > td { background: #fdecee !important; }
.csvr-rec.is-bad .csvr-main > td:first-child, .csvr-rec.is-bad .csvr-msg > td:first-child, .csvr-rec.is-bad .csvr-more > td:first-child { box-shadow: inset 4px 0 0 #dc3545; }
.csvr-rec.is-bad .csvr-no { color: #b02a37; font-weight: 700; }
.csvr-rec.is-bad .csvr-err { font-weight: 600; }
.csvr-rec.is-bad + .csvr-rec.is-bad .csvr-main > td { border-top: 1px solid #f5c2c7; }
.csvr-rec.is-edited .csvr-main > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.csvr-act { width: 1%; white-space: nowrap; text-align: right; }
.csvr-btn { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); }
.csvr-btn:hover, .csvr-btn.is-on { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.csvr-btn.is-danger:hover { background: #fff1f2; border-color: #f3c5ca; color: #b02a37; }
.csvr-btn:focus-visible { outline: 2px solid rgba(13, 110, 253, .45); outline-offset: 1px; }
.csvr-msg > td { padding-top: 0 !important; padding-bottom: .45rem !important; font-size: .79rem; line-height: 1.4; }
/* the checker at work */
.csvr-checking { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.csvr-checking[hidden] { display: none; }
.csvr-general[hidden] { display: none; }
.csvr-info { color: var(--ink-soft); }
.csvr-info strong { color: var(--ink); }
.csvr-err { color: #b02a37; }
.csvr-note { color: #8a5a00; }
.csvr-more > td { background: var(--surface-2) !important; }
.csvr-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem .75rem; padding: .3rem 0 .4rem; }
.csvr-more-grid label { display: grid; gap: .15rem; font-size: .74rem; font-weight: 650; color: var(--muted); }
.csvr-rec[hidden], .csvr-none[hidden] { display: none; }
.csvr-none td { padding: 1.5rem; text-align: center; color: var(--muted); }
.csvr-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .9rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, .4), var(--raise-1); }
.csvr-actions-msg { font-size: .86rem; }
.csvr-table .form-control.is-invalid, .csvr-table .form-select.is-invalid { border-color: #e35d6a; background-color: #fff8f8; box-shadow: 0 0 0 .14rem rgba(227, 93, 106, .14); }
.csvr-table .form-control.is-invalid { background-image: none; padding-right: .5rem; }
.csvr-table .form-select.is-invalid { --bs-form-select-bg-icon: none; padding-right: 1.6rem; }
/* a wide grid scrolls sideways: the messages and the other columns of a row stay in view, wrapped to the box */
.csvr-msg > td > div, .csvr-more-grid { position: sticky; left: .4rem; max-width: calc(var(--csvr-vw, 100vw) - 5.2rem); }
.csvr-actions-btns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 575.98px) {
  .csvr-cols > div { grid-template-columns: minmax(0, 1fr); }
  .csvr-tools, .csvr-tools input[type=search] { width: 100%; }
  .csvr-scroll { max-height: none; overflow: visible; }
  .csvr-table, .csvr-table > tbody { display: block; width: 100%; }
  .csvr-table thead { display: none; }
  .csvr-table > tbody.csvr-rec { border-bottom: 1px solid var(--line); padding: .55rem .75rem .35rem; }
  .csvr-table > tbody.csvr-rec.is-bad { background: #fdecee; box-shadow: inset 4px 0 0 #dc3545; }
  .csvr-table > tbody.csvr-rec.is-bad > tr > td { background: transparent !important; box-shadow: none !important; }
  .csvr-table > tbody.csvr-rec.is-edited { box-shadow: inset 3px 0 0 var(--blue); }
  .csvr-table tr.csvr-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .6rem; position: relative; }
  .csvr-table tr.csvr-main > td { display: block; padding: 0 !important; border: 0; background: transparent !important; box-shadow: none !important; min-width: 0; width: auto; }
  .csvr-table tr.csvr-main > td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 650; color: var(--muted); margin-bottom: .1rem; }
  .csvr-table td.csvr-no { grid-column: 1 / -1; font-weight: 650; }
  .csvr-table td.csvr-no::before { content: "Line "; }
  .csvr-table td.csvr-act { position: absolute; top: -.2rem; right: 0; }
  .csvr-table td.csvr-c-lg { grid-column: 1 / -1; }
  .csvr-table tr.csvr-msg, .csvr-table tr.csvr-more { display: block; }
  .csvr-table tr.csvr-msg > td, .csvr-table tr.csvr-more > td { display: block; padding: .35rem 0 0 !important; border: 0; background: transparent !important; }
  .csvr-table tr.csvr-msg > td:first-child, .csvr-table tr.csvr-more > td:first-child { display: none; }
  .csvr-table tr.csvr-more[hidden] { display: none; }
  .csvr-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csvr-actions { margin-left: -.25rem; margin-right: -.25rem; }
  .csvr-actions-btns { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; }
  .csvr-actions-btns .btn { white-space: normal; line-height: 1.2; padding-left: .55rem; padding-right: .55rem; }
  .csvr-actions-msg { font-size: .8rem; }
  .csvr-so { display: none; }
}
/* Savings Account Center: Hold / Unhold */
.sv-held { font-size: .72rem; font-weight: 600; color: #8a5a00; white-space: nowrap; }
.sv-held .bi { font-size: .66rem; }
.sv-hold-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.sv-hold-tiles > div { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); box-shadow: var(--raise-1); }
.sv-hold-tiles span { display: block; font-size: .68rem; font-weight: 650; color: var(--muted); }
.sv-hold-tiles strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.sv-holds { display: grid; gap: .4rem; }
.sv-hold { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .2rem .7rem; align-items: start; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  background: var(--surface); box-shadow: var(--raise-1); }
.sv-hold:has(input:checked) { border-color: #86b2f5; background: var(--blue-tint); }
.sv-hold .form-check-input { margin: .2rem 0 0; }
.sv-hold-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv-hold-why { font-size: .84rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sv-hold-why span { display: block; font-size: .72rem; color: var(--muted); }
@media (max-width: 575.98px) {
  .sv-hold-tiles { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--raise-1); }
  .sv-hold-tiles > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .4rem .65rem; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--line); }
  .sv-hold-tiles > div:last-child { border-bottom: 0; }
  .sv-hold-tiles span { font-size: .78rem; }
  .sv-hold { grid-template-columns: auto minmax(0, 1fr); }
  .sv-hold-why { grid-column: 2; }
}

/* ---- the joint account / institution member form (the format of the former program) */
.member-head .jplaque { text-align: right; line-height: 1.2; padding-bottom: .1rem; }
.jplaque-id { font-size: .78rem; color: var(--muted); }
.jplaque-id strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.jplaque-state { font-size: 1.05rem; font-weight: 800; letter-spacing: .03em; color: var(--ink-soft); }
.jplaque-type { font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; color: var(--blue-deep); }
.jform { display: grid; gap: .9rem; }
.jbox {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .95rem .95rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--raise-1);
}
.jbox-title { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 650; color: var(--ink); margin-bottom: .6rem; }
.jbox-title .bi { color: var(--blue); font-size: .95rem; }
.jbox-sub { font-size: .78rem; font-weight: 650; color: var(--ink-soft); margin-bottom: .3rem; }
.jbox-hint { font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.jbox .jname { font-size: 1rem; font-weight: 600; }
.jbox .table-responsive { margin-bottom: .35rem; }
.jbox .coop-grid { background: var(--surface); border-radius: var(--radius-sm); }
.jstatus { padding-top: .3rem; }
.jsig { max-height: 72px; max-width: 100%; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: #fff; padding: .2rem; }
.pb-get .btn { white-space: nowrap; }
@media (max-width: 767.98px) {
  .member-head .jplaque { text-align: left; padding-top: .35rem; }
  .jbox { padding: .75rem .7rem .8rem; }
  .pb-get { flex-wrap: wrap; }
  .pb-get > .form-control { flex: 1 1 100%; border-radius: var(--radius-sm) !important; }
  .pb-get > .btn { flex: 1 1 100%; margin: .4rem 0 0 !important; border-radius: var(--radius-sm) !important; }
}
/* the contact list of the joint form sits in half the width: narrower boxes */
.jbox #gJContacts td, .jbox #gJContacts th { padding-left: .25rem; padding-right: .25rem; }
.jbox #gJContacts td > .form-select { min-width: 5.6rem; }
.jbox #gJContacts td > .form-control { min-width: 3.4rem; }
.jbox #gJContacts td[data-label="Number"] > .form-control { min-width: 6.2rem; }

/* Company, Security & Closing Date > Water Billing (version 46): Printed or Pre-Printed, as two choices on one line */
.settings-radio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color, #e5e7eb); }
.settings-radio-row:last-of-type { border-bottom: 0; }
.settings-radio-opts { display: inline-flex; flex-wrap: wrap; gap: 4px 4px; }
.settings-radio-opts .form-check-inline { margin-right: 14px; }
/* the Manage button beside an Address sub-group box (assets/js/subgroup_manager.js) */
.sgm-manage { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; border: 0; background: transparent; color: var(--bs-primary, #1d4ed8); font-size: .78rem; font-weight: 600; padding: 2px 0; cursor: pointer; }
.sgm-manage:hover { text-decoration: underline; }