/* Bisro for wholesalers: an industrial, ledger-board page (slate and amber, no photo). Headline row over a due-date
   board with a "today" slider and the reminder Bisro writes; a part-payment ledger; owed vs owing. */
.wh-hero { padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px) }
.wh-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5vw; align-items: end; margin-bottom: 34px }
.wh-hero .h-xl { font-size: clamp(36px, 4.4vw, 64px); max-width: 14ch } .wh-head .lead { margin-top: 0 }
.wh-hero .kick::before { background: #F59E0B }

.bd { border-radius: 18px; padding: 18px; background: #1E2732; color: #E6EBF1; box-shadow: 0 50px 90px -60px rgba(10,20,30,.7) }
.bd-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 4px 4px 16px } .bd-top .tag { margin: 0; background: #F59E0B; color: #2A1A00 }
.bd-day { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: #AAB6C4 } .bd-day b { font: 800 22px/1 var(--font); color: #fff }
.bd-top input { width: 100%; accent-color: #F59E0B; height: 28px; cursor: pointer }
.bd-sum { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 13.5px; font-weight: 700; color: #C9D4DF } .bd-sum.bad { background: rgba(239,68,68,.18); color: #FCA5A5 }
.bd-t { width: 100%; border-collapse: collapse; font-size: 15.5px }
.bd-t thead th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8C9AAA; padding: 8px 14px 10px 0; border-bottom: 1.5px solid #3A4757 }
.bd-t .num { text-align: right }
.bd-t tbody th, .bd-t td { padding: 12px 14px 12px 0; border-bottom: 1px solid #2E3A48; text-align: left; font-weight: 400 }
.bd-t tbody th b { display: block; color: #fff } .bd-t tbody th small { color: #8C9AAA; font-size: 13px }
.bd-t td.num { text-align: right }
.st { display: inline-block; white-space: nowrap; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(16,185,129,.15); color: #6EE7B7 }
.bd-t tr.today .st { background: rgba(245,158,11,.18); color: #FCD34D } .bd-t tr.over .st { background: rgba(239,68,68,.2); color: #FCA5A5 }
.bd-t tr.over th b { color: #FECACA }
.bd-msg { margin-top: 14px; padding: 14px 16px; border-radius: 12px 12px 4px 12px; background: #D9FDD3; color: #111B21 } .bd-msg[hidden] { display: none }
.bd-msg small { display: block; font-size: 12px; font-weight: 700; color: #3E5A3E; margin-bottom: 4px } .bd-msg p { margin: 0; font-size: 15px }
.bd .eg { color: #8C9AAA; margin: 12px 4px 0 }

/* payments in pieces */
.wh-pieces { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6vw; align-items: center }
.wh-link a { color: var(--link); font-weight: 700; text-decoration: none } .wh-link a:hover { text-decoration: underline }
.pc-led { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink) }
.pc-led li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 96px 96px; gap: 10px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15.5px }
.pc-led li span:first-child { color: var(--faint) } .pc-led li b { text-align: right } .pc-led li.due b:not(.pc-bal) { color: var(--red) } .pc-led li.ok b:not(.pc-bal) { color: #0B7A5B }
.pc-bal { color: var(--ink) } .pc-led li:last-child { border-bottom: 2px solid var(--ink) } .pc-led li:last-child .pc-bal { font-size: 18px }

/* owed and owing */
.wh-both { background: linear-gradient(180deg, var(--bg), #F2F4F7 25%, #F2F4F7 75%, var(--bg)) }
.bo-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 30px }
.bo-c { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--border); border-top: 5px solid var(--c) }
.bo-in { --c: #0B7A5B } .bo-out { --c: var(--red) }
.bo-c small { display: block; font-weight: 700; color: var(--muted) } .bo-c b { display: block; font: 800 clamp(30px, 3vw, 42px)/1.15 var(--font); margin: 6px 0; color: var(--c) }
.bo-c p { margin: 0 0 12px; color: var(--muted) } .bo-c a { color: var(--link); font-weight: 700; text-decoration: none } .bo-c a:hover { text-decoration: underline }

@media (max-width: 980px) {
  .wh-hero { padding-top: 104px } .wh-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px }
  .bd { padding: 12px } .bd-top { grid-template-columns: auto minmax(0, 1fr); gap: 10px } .bd-top input { grid-column: 1 / -1; grid-row: 2 } .bd-sum { grid-column: 1 / -1 }
  .bd-t { font-size: 13.5px } .bd-t thead th:nth-child(3), .bd-t td:nth-child(3) { display: none } .st { font-size: 11px; padding: 3px 7px } .bd-t tbody th, .bd-t td { padding-right: 8px }
  .wh-pieces { grid-template-columns: minmax(0, 1fr); gap: 24px } .pc-led li { grid-template-columns: 50px minmax(0, 1fr) 76px 76px; font-size: 13.5px; gap: 6px }
  .bo-two { grid-template-columns: minmax(0, 1fr) }
}