/* BHB Kwitansi */
:root{ --border:#333; --muted:#666; }
*{ box-sizing:border-box; }
body{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', 'Liberation Sans', sans-serif; margin:0; background:#f3f5f7; color:#111; }
.container{ max-width: 1000px; margin: 24px auto; padding: 0 14px; }
.card{ background:#fff; border:1px solid #e7e7e7; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
h1,h2{ margin:0 0 12px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1 1 220px; min-width:220px; }
label{ display:block; font-size:12px; color:#333; margin-bottom:6px; }
input, select, textarea{ width:100%; padding:10px 10px; border:1px solid #d7d7d7; border-radius:10px; font-size:14px; background:#fff; }
textarea{ min-height: 38px; resize: vertical; }
.btn{ display:inline-flex; align-items:center; gap:8px; border:0; background:#111; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn.secondary{ background:#2f6fed; }
.btn.danger{ background:#c1121f; }
.btn.light{ background:#fff; color:#111; border:1px solid #d7d7d7; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border:1px solid #bbb; padding:8px; font-size:13px; vertical-align:top; }
.table th{ background:#f2f2f2; }
.small{ font-size:12px; color:var(--muted); }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#f0f0f0; font-size:12px; }
hr{ border:0; border-top:1px solid #eee; margin:14px 0; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.item-row{ display:grid; grid-template-columns: 1.2fr 1.2fr .7fr .2fr; gap:10px; align-items:start; margin-bottom:10px; }
.item-row .rm{ height:42px; border-radius:10px; }
@media (max-width:760px){
  .item-row{ grid-template-columns: 1fr; }
  .item-row .rm{ width:100%; }
}
.notice{ background:#fff7d6; border:1px solid #ffe28a; padding:10px 12px; border-radius:10px; color:#4b3d00; }

/* Autocomplete clickable */
.suggestions{
  position:relative;
  margin-top:6px;
  border:1px solid #e1e1e1;
  border-radius:10px;
  padding:6px;
  background:#fff;
  max-height:180px;
  overflow:auto;
}
.suggestion-item{
  width:100%;
  text-align:left;
  border:none;
  background:#f7f7f7;
  padding:8px 10px;
  border-radius:8px;
  margin:4px 0;
  cursor:pointer;
}
.suggestion-item:hover{ background:#efefef; }

/* Multi-select bulan SPP */
.spp_months{
  width:100%;
  min-height:110px;
}