/* 💳 Hutang (payables.js, docs/PAYABLES.md "Layar Hutang"). Phone first: no sideways scroll at 360px, every tap target
   >= 44px, numbers big and tabular. Severity colours only where they mean something (lesson warning-colors-only-for-warnings):
   red = overdue, orange = due within 7 days, green = Lunas; credit, prepaid and advance stay neutral.
   overflow-anchor:none: the browser never moves the screen by itself here; payables.js keeps the row being read in place
   (hutKeep), the same on Chromium and on iOS Safari (which has no scroll anchoring). */
.hut { padding: 0 .55rem .8rem; min-width: 0; overflow-anchor: none; }
.hut-pad { padding: .6rem .2rem; }
.hut-hd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; }
.hut-title { padding: .2rem .2rem; }
.hut-btn { min-height: 44px; padding: .45rem .9rem; border: none; border-radius: 10px; background: var(--p); color: #fff; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.hut-btn:disabled { background: #C7CBD6; color: #fff; cursor: default; }
.hut-btn2 { min-height: 44px; margin-top: .4rem; padding: .3rem .8rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.hut-meta { font-size: .82rem; color: var(--ink2); margin: .1rem .2rem .2rem; line-height: 1.5; overflow-wrap: anywhere; }
.hut-quiet { font-size: .84rem; color: var(--muted); }
.hut-link { border: none; background: none; padding: 0 .1rem; min-height: 32px; font: inherit; color: var(--p); font-weight: 700; text-decoration: underline; cursor: pointer; }
.hut-old { display: inline-block; background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; font-weight: 800; font-size: .76rem; border-radius: 8px; padding: .1rem .45rem; margin: .2rem 0; line-height: 1.35; }
.hut-note { font-size: .85rem; border-radius: 10px; padding: .5rem .65rem; margin: .4rem 0; overflow-wrap: anywhere; line-height: 1.4; }
.hut-note-d { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }
.hut-note-w { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--warn); }
.hut-note-i { background: var(--light); color: var(--ink2); border-left: 4px solid var(--border-input); }
.hut-res { margin: .5rem 0; border: 1px solid var(--border); border-radius: 12px; padding: .55rem .65rem; background: var(--light); }
.hut-res-hd { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 800; font-size: .92rem; color: var(--ok); }
.hut-x { min-width: 44px; min-height: 44px; border: none; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.hut-stats { font-size: .85rem; color: var(--ink2); margin: .15rem 0 .3rem; overflow-wrap: anywhere; }
.hut-blk { margin-top: .4rem; }
.hut-blk-t { display: block; width: 100%; min-height: 44px; padding: 0; border: none; background: none; text-align: left; font: inherit; font-weight: 800; font-size: .86rem; color: var(--dark); cursor: pointer; }
.hut-li { font-size: .8rem; color: var(--ink2); padding: .25rem 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.hut-none { font-size: .8rem; color: var(--muted); padding: .2rem 0; }
#hut-lp .hut-blk { margin: .2rem .2rem .4rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.hut-more { display: block; width: 100%; min-height: 44px; margin-top: .5rem; border: 1px solid var(--border-input); background: var(--light); border-radius: 10px; font: inherit; font-weight: 700; font-size: .88rem; color: var(--dark); cursor: pointer; }
.hut-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .5rem 0 .45rem; }
.hut-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-width: 0; min-height: 56px; padding: .3rem .2rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; cursor: pointer; }
.hut-tab.on { background: var(--p); border-color: var(--p); color: #fff; }
.hut-tab-c { font-weight: 800; font-size: .95rem; }
.hut-tab-v { font-size: .68rem; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; word-break: break-word; font-variant-numeric: tabular-nums; max-width: 100%; }
.hut-dot { color: var(--danger); font-size: .6rem; vertical-align: middle; margin-right: .15rem; }
.hut-tab.on .hut-dot { color: #FECACA; }
.hut-sum { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--sh-sm); }
.hut-sum-l { font-size: .82rem; font-weight: 700; color: var(--ink2); }
.hut-nf { display: inline-block; font-size: .68rem; font-weight: 800; border-radius: 6px; padding: .02rem .35rem; border: 1px solid #CBD5E1; background: #F1F5F9; color: #334155; vertical-align: middle; }
.hut-big { font-size: 1.7rem; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums; line-height: 1.2; margin: .1rem 0 .3rem; overflow-wrap: anywhere; }
.hut-line { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .25rem 0; border-top: 1px solid var(--border); font-size: .9rem; color: var(--ink2); }
.hut-line b { color: var(--dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hut-line.hut-od, .hut-line.hut-od b { color: #B42318; }
.hut-line.hut-ds, .hut-line.hut-ds b { color: #B54708; }
.hut-cnt { font-weight: 700; }
.hut-empty { font-size: .95rem; color: var(--ink2); padding: .4rem 0 .1rem; }
.hut-term, .hut-term-ro { margin-top: .45rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--light); }
.hut-term-ro { font-size: .86rem; color: var(--ink2); }
.hut-term-l { display: block; font-size: .84rem; font-weight: 800; color: var(--dark); margin-bottom: .3rem; }
.hut-term-row { display: flex; gap: .4rem; align-items: stretch; }
.hut-term-row input { width: 6.5rem; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hut-hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; }
.hut-err { font-size: .86rem; font-weight: 700; color: #B42318; margin-top: .25rem; overflow-wrap: anywhere; }
.hut-err:empty, .hut-okmsg:empty { display: none; }
.hut-okmsg { font-size: .86rem; font-weight: 700; color: #05603A; margin-top: .25rem; }
.hut-lh { font-size: .8rem; font-weight: 800; color: var(--ink2); margin: .7rem .2rem .3rem; }
.hut-s { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: .35rem; min-width: 0; }
.hut-s.open { border-color: var(--border-input); box-shadow: var(--sh-sm); }
.hut-sh { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2rem; align-items: center; gap: .5rem; width: 100%; min-height: 52px; padding: .45rem .6rem; border: none; border-radius: 12px; background: none; color: var(--dark); font: inherit; text-align: left; cursor: pointer; }
.hut-sn { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.hut-sv { text-align: right; font-size: .98rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hut-chev { color: var(--muted); font-size: .85rem; text-align: center; }
.hut-tag { display: inline-block; font-size: .7rem; font-weight: 800; border-radius: 6px; padding: .02rem .35rem; border: 1px solid var(--border-input); background: var(--light); color: var(--ink2); vertical-align: middle; white-space: nowrap; }
.hut-tag-od { background: #FEF3F2; border-color: #FDA29B; color: #B42318; }
.hut-tag-ds { background: #FFFAEB; border-color: #FEC84B; color: #B54708; }
.hut-tag-ok { background: #ECFDF3; border-color: #6CE9A6; color: #05603A; }
.hut-rows { padding: 0 .6rem .5rem; }
.hut-r { border-top: 1px solid var(--border); padding: .45rem 0 .4rem .5rem; border-left: 3px solid transparent; }
.hut-r-od { border-left-color: var(--danger); }
.hut-r-ds { border-left-color: var(--warn); }
.hut-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-size: .84rem; color: var(--ink2); }
.hut-r1 b { color: var(--dark); }
.hut-inv { font-weight: 700; color: var(--dark); overflow-wrap: anywhere; }
.hut-rg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .6rem; margin-top: .3rem; }
.hut-rg > div { display: flex; flex-direction: column; min-width: 0; }
.hut-rg span { font-size: .72rem; font-weight: 700; color: var(--muted); }
.hut-rg b { font-size: .95rem; color: var(--dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hut-rg i { font-style: normal; font-size: .76rem; color: var(--ink2); }
.hut-days { font-size: .8rem; font-weight: 700; color: var(--ink2); margin-top: .2rem; }
.hut-warn { font-size: .76rem; color: var(--muted); margin-top: .15rem; overflow-wrap: anywhere; }
.hut-src { font-size: .7rem; color: var(--muted); margin-top: .15rem; }
@media (min-width: 768px) {
  .hut { padding: 0 .9rem 1rem; max-width: 1040px; }
  .hut-tabs { gap: .5rem; }
  .hut-tab-v { font-size: .82rem; }
  .hut-sum .hut-line { max-width: 560px; }
  .hut-big { font-size: 2rem; }
  .hut-rg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}