/* =======================================================================
   Barantum — Input Design System (GLOBAL)
   Berlaku ke SEMUA form di aplikasi. Reskin Bootstrap .form-control +
   vue-multiselect (markup dirender library, jadi di-override, bukan di-rename).
   Patokan `body ` dipakai supaya rule ini MENANG atas CSS bawaan library/base
   tanpa tergantung urutan load. Sumber desain & state matrix:
   adesign/input-design-system.html
   ======================================================================= */

:root{
  --bf-bg:#fff; --bf-bg-muted:#F5F7FA; --bf-bg-readonly:#F8FAFC;
  --bf-border:#DDE3ED; --bf-border-strong:#C3CCDA;
  --bf-primary:#1B6FBE; --bf-primary-soft:#E7F1FB; --bf-primary-dark:#134E8E;
  --bf-ink:#18233A; --bf-ink-muted:#6B7A99; --bf-ink-placeholder:#A3ADBE;
  --bf-danger:#E5484D; --bf-danger-soft:#FDECEC;
  --bf-radius:8px; --bf-h:40px; --bf-fs:13.5px; --bf-fs-label:11.5px; --bf-fs-sub:12px;
  --bf-focus-ring:0 0 0 3px rgba(27,111,190,.18);
  --bf-danger-ring:0 0 0 3px rgba(229,72,77,.15);
}

/* ---------------------------------------------------------------------
   LABEL ROW — tarik penanda wajib ke SAMPING label (bukan ujung kolom)
   Markup produksi: <div class="d-flex ... justify-content-between w-100 mb-50">
                      <label class="m-0">Label</label>
                      <small class="required text-danger">Diperlukan</small>
   --------------------------------------------------------------------- */
/* Tarik penanda wajib ke SAMPING label (bukan ujung kolom). Markup produksi
   tidak seragam (…w-100, …w-100 mb-50, …col-gap-4 mb-50, marker pakai
   required text-danger [+font-italic mb-25/ml-50]). Signature label-row yg
   andal = baris .d-flex.justify-content-between yang MEMUAT .required.
   :has() menjaga hanya baris berlabel-wajib yg kena, bukan footer/widget. */
body .d-flex.justify-content-between:has(.required),
body .d-flex.justify-content-between:has(.brtm-form-req){
  justify-content:flex-start !important; gap:5px;
}
/* fallback utk baris label yg mb-50 (browser tanpa :has tetap kebagian) */
body .d-flex.justify-content-between.w-100.mb-50{
  justify-content:flex-start !important; gap:5px; align-items:center;
}
body label.m-0{
  font-size:12.5px; font-weight:600; color:var(--bf-ink);
}
/* badge "Diperlukan" -> asterisk merah nempel setelah label */
body small.required{
  font-size:0 !important;          /* sembunyikan teks "Diperlukan" */
  margin:0 !important; padding:0; line-height:1;   /* !important menetralkan ml-50/mb-25 varian */
}
body small.required::after{
  content:"*"; font-size:15px; font-weight:700; font-style:normal;
  color:var(--bf-danger);
}
/* kalau validation_multi > 1 (mis. required + email) -> tetap 1 asterisk */
body small.required ~ small.required{ display:none; }

/* ---------------------------------------------------------------------
   CLASS BERSIH label-row (port dari prototype adesign/input-design-system.html).
   Dipakai form yg SUDAH dirombak markup-nya ke <div class="brtm-form-labelrow">.
   Marker WAJIB nempel kiri (bukan di-dorong justify-content-between).
   --------------------------------------------------------------------- */
.brtm-form-labelrow{ display:flex; align-items:center; justify-content:flex-start; gap:4px; margin-bottom:6px; flex-wrap:wrap; }
.brtm-form-label{
  font-size:var(--bf-fs-label); font-weight:600 !important; color:var(--text-2) !important;
  line-height:1.2; margin:0; display:inline-flex; align-items:center; gap:5px; text-transform:uppercase !important; 
}
.brtm-form-label .bi, .brtm-form-label .bx{ font-size:12px; color:var(--bf-ink-muted); }
/* penanda WAJIB = asterisk merah, pengganti kata "Diperlukan" */
.brtm-form-req{ color:var(--bf-danger); font-weight:700; font-size:15px; line-height:1; font-style:normal; margin-left:-1px; }
.brtm-form-req ~ .brtm-form-req{ display:none; }        /* validation_multi>1 -> tetap 1 asterisk */
/* penanda OPSIONAL = teks abu halus */
.brtm-form-opt{ font-size:var(--bf-fs-sub); font-weight:450; color:var(--bf-ink-placeholder); line-height:1; margin-left:3px; }
/* sub-label / helper (di bawah input) */
.brtm-form-sub{ font-size:var(--bf-fs-sub); color:var(--bf-ink-muted); margin-top:5px; line-height:1.4; }
/* pesan error (di bawah input); tampil saat wrapper .is-error */
.brtm-form-msg{ display:none; align-items:center; gap:5px; font-size:var(--bf-fs-sub); color:var(--bf-danger); margin-top:5px; line-height:1.4; }
.is-error .brtm-form-msg{ display:flex; }
/* tooltip info di label (ikon i + bubble; hover & focus keyboard) */
.brtm-form-tip{ position:relative; display:inline-flex; align-items:center; outline:none; }
.brtm-form-tip__ic{ font-size:12px; color:var(--bf-ink-placeholder); cursor:help; transition:color .12s ease; }
.brtm-form-tip:hover .brtm-form-tip__ic, .brtm-form-tip:focus-visible .brtm-form-tip__ic{ color:var(--bf-primary); }
.brtm-form-tip__bubble{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(3px);
  background:#0D1F3C; color:#fff; font-size:11px; font-weight:450; line-height:1.5; text-align:left;
  padding:8px 11px; border-radius:7px; width:max-content; max-width:230px; white-space:normal;
  box-shadow:0 6px 22px rgba(13,31,60,.28); z-index:40; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .14s ease, transform .14s ease;
}
.brtm-form-tip__bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#0D1F3C; }
.brtm-form-tip:hover .brtm-form-tip__bubble, .brtm-form-tip:focus-within .brtm-form-tip__bubble, .brtm-form-tip:focus-visible .brtm-form-tip__bubble{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------------
   TEXT / TEXTAREA / NATIVE CONTROL (.form-control)
   --------------------------------------------------------------------- */
body .form-control{
  height:var(--bf-h); padding:8px 12px; font-size:var(--bf-fs);
  color:var(--bf-ink); background-color:var(--bf-bg);
  border:1px solid var(--bf-border); border-radius:var(--bf-radius);
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body textarea.form-control{ height:auto; min-height:84px; padding-top:9px; resize:vertical; }
body .form-control::placeholder{ color:var(--bf-ink-placeholder); }
body .form-control:hover{ border-color:var(--bf-border-strong); }
body .form-control:focus{ border-color:var(--bf-primary); box-shadow:var(--bf-focus-ring); outline:0; }
body .form-control:disabled,
body .form-control[disabled]{ background-color:var(--bf-bg-muted); color:var(--bf-ink-placeholder); }
body .form-control[readonly]{ background-color:var(--bf-bg-readonly); color:var(--bf-ink-muted); }

/* ---------------------------------------------------------------------
   CLASS BERSIH (dipakai komponen yang SUDAH dirombak markup-nya, mis.
   text.vue). Tidak butuh prefix `body ` karena .brtm-form-* milik sendiri.
   Nanti kalau semua komponen sudah migrasi, blok `body .form-control`
   di atas bisa dihapus.
   --------------------------------------------------------------------- */
.brtm-field{ width:100%; }
.brtm-form-control{
  display:block; width:100%; height:var(--bf-h); padding:8px 12px;
  font-size:var(--bf-fs); color:var(--bf-ink); background-color:var(--bf-bg);
  border:1px solid var(--bf-border); border-radius:var(--bf-radius); box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.brtm-form-control::placeholder{ color:var(--bf-ink-placeholder); }
.brtm-form-control:hover{ border-color:var(--bf-border-strong); }
.brtm-form-control:focus{ border-color:var(--bf-primary); box-shadow:var(--bf-focus-ring); outline:0; }
.brtm-form-control:disabled,
.brtm-form-control[disabled]{ background-color:var(--bf-bg-muted); color:var(--bf-ink-placeholder); }
.brtm-form-control[readonly]{ background-color:var(--bf-bg-readonly); color:var(--bf-ink-muted); }
textarea.brtm-form-control{ height:auto; min-height:84px; padding-top:9px; resize:vertical; }
/* modifier -lg (dipertahankan utk email.vue): sedikit lebih tinggi & besar */
.brtm-form-control-lg{ height:48px; padding:10px 14px; font-size:14.5px; }

/* select native fallback (yg belum pakai vue-multiselect) */
body .custom-select,
body select.form-control{
  height:var(--bf-h); border:1px solid var(--bf-border); border-radius:var(--bf-radius);
  font-size:var(--bf-fs); color:var(--bf-ink);
}
body .custom-select:focus,
body select.form-control:focus{ border-color:var(--bf-primary); box-shadow:var(--bf-focus-ring); }

/* ---------------------------------------------------------------------
   VUE-MULTISELECT (reskin di atas markup asli, global)
   --------------------------------------------------------------------- */
body .multiselect{ min-height:var(--bf-h); color:var(--bf-ink); font-size:var(--bf-fs); }
body .multiselect__tags{
  min-height:var(--bf-h); padding:8px 36px 4px 12px;
  border:1px solid var(--bf-border); border-radius:var(--bf-radius);
  background:var(--bf-bg); font-size:var(--bf-fs);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body .multiselect:hover .multiselect__tags{ border-color:var(--bf-border-strong); }
body .multiselect--active .multiselect__tags{
  border-color:var(--bf-primary); box-shadow:var(--bf-focus-ring); border-radius:var(--bf-radius);
}
body .multiselect__single,
body .multiselect__input{
  font-size:var(--bf-fs); line-height:22px; color:var(--bf-ink);
  padding-left:0; margin-bottom:0; min-height:0; background:transparent;
}
body .multiselect__placeholder{
  color:var(--bf-ink-placeholder); font-size:var(--bf-fs);
  padding-top:0; margin-bottom:0; padding-left:0; line-height:22px;
}
body .multiselect__select{ height:calc(var(--bf-h) - 2px); width:34px; }
body .multiselect__select::before{ border-color:var(--bf-ink-muted) transparent transparent; }
body .multiselect--active .multiselect__select::before{ border-top-color:var(--bf-primary); }
body .multiselect__tag{
  background:var(--bf-primary-soft); color:var(--bf-primary-dark);
  border-radius:6px; padding:4px 24px 4px 9px; margin:0 6px 4px 0;
  font-size:12px; font-weight:550;
}
body .multiselect__tag-icon::after{ color:var(--bf-primary-dark); }
body .multiselect__tag-icon:hover{ background:transparent; }
body .multiselect__tag-icon:hover::after{ color:var(--bf-danger); }
body .multiselect{ position:relative; }
body .multiselect__content-wrapper{
  /* FIX: barantum-component.css memaksa `position:static !important` → menu dropdown
     jadi in-flow & mendorong field lain ke bawah. Kembalikan ke overlay (absolute). */
  position:absolute !important; z-index:1060; width:100%;
  border:1px solid var(--bf-border); border-radius:var(--bf-radius); border-top:1px solid var(--bf-border);
  margin-top:4px; max-height:220px; box-shadow:0 8px 28px rgba(27,111,190,.16);
}
body .multiselect__option{ padding:9px 12px; min-height:0; font-size:var(--bf-fs); color:var(--bf-ink); }
body .multiselect__option--highlight{ background:var(--bf-primary-soft); color:var(--bf-ink); }
body .multiselect__option--highlight::after{ background:transparent; color:var(--bf-ink-muted); font-size:11px; }
body .multiselect__option--selected{ background:var(--bf-primary); color:#fff; font-weight:600; }
body .multiselect__option--selected::after{ background:transparent; color:rgba(255,255,255,.85); }
body .multiselect__option--selected.multiselect__option--highlight{ background:var(--bf-danger-soft); color:var(--bf-danger); }
body .multiselect__option--selected.multiselect__option--highlight::after{ background:transparent; color:var(--bf-danger); }
body .multiselect--disabled{ opacity:1; background:transparent; }
body .multiselect--disabled .multiselect__tags{ background:var(--bf-bg-muted); }
body .multiselect--disabled .multiselect__single{ color:var(--bf-ink-placeholder); }
body .multiselect--disabled .multiselect__select{ background:transparent; }


body .ag-filter-form .multiselect__content-wrapper{
  position: static !important;
  max-height: none;
  overflow: visible;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   VUE-SELECT (.vs__*) — dipakai country/provinces/regencies/district/
   villages/relatedto*/autocomplete. Library pakai CSS var --vs-*, jadi
   cukup set variabelnya (di .v-select biar override :root default library).
   --------------------------------------------------------------------- */
body .v-select{
  --vs-border-color:var(--bf-border);
  --vs-border-radius:var(--bf-radius);
  --vs-controls-color:var(--bf-ink-muted);
  --vs-line-height:1.6;
  --vs-font-size:var(--bf-fs);
  --vs-search-input-color:var(--bf-ink);
  --vs-search-input-placeholder-color:var(--bf-ink-placeholder);
  --vs-dropdown-bg:#fff;
  --vs-dropdown-color:var(--bf-ink);
  --vs-dropdown-option-color:var(--bf-ink);
  --vs-dropdown-option-padding:9px 12px;
  --vs-dropdown-option--active-bg:var(--bf-primary-soft);
  --vs-dropdown-option--active-color:var(--bf-ink);
  --vs-dropdown-box-shadow:0 8px 28px rgba(27,111,190,.16);
  --vs-selected-bg:var(--bf-primary-soft);
  --vs-selected-color:var(--bf-ink);
  --vs-disabled-bg:var(--bf-bg-muted);
}
body .v-select .vs__dropdown-toggle{ min-height:var(--bf-h); padding:0 4px; align-items:center; background:#fff; }
body .v-select.vs--disabled .vs__dropdown-toggle{ background:var(--bf-bg-muted); }
body .v-select.vs--open .vs__dropdown-toggle,
body .v-select .vs__dropdown-toggle:focus-within{
  border-color:var(--bf-primary) !important; box-shadow:var(--bf-focus-ring); border-radius:var(--bf-radius);
}
body .v-select .vs__dropdown-menu{ margin-top:4px; border-top-style:solid; border-radius:var(--bf-radius); padding:5px; }
body .v-select .vs__dropdown-option{ border-radius:6px; }
body .v-select .vs__search,
body .v-select .vs__search:focus{ font-size:var(--bf-fs); margin:0; padding:5px 7px; }
body .v-select .vs__selected{ font-size:var(--bf-fs); margin:0 2px; }
body .v-select .vs__actions .bx-chevron-down{ color:var(--bf-ink-muted); font-size:18px; transition:color .15s ease; }
body .v-select.vs--open .vs__actions .bx-chevron-down{ color:var(--bf-primary); }

/* ---------------------------------------------------------------------
   RADIO & CHECKBOX — kotak/lingkaran custom via appearance:none (tanpa
   ubah markup). Scoped ke wrapper .radio / .checkbox biar toggle/switch
   lain tidak ikut terpengaruh.
   --------------------------------------------------------------------- */
body .radio input[type=radio],
body .checkbox input[type=checkbox]{
  appearance:none; -webkit-appearance:none; margin:0 8px 0 0;
  width:18px; height:18px; flex:none; cursor:pointer; vertical-align:middle;
  border:1.5px solid var(--bf-border-strong); border-radius:5px; background:#fff;
  position:relative; transition:all .12s ease;
}
body .radio input[type=radio]{ border-radius:50%; }
body .radio input[type=radio]:hover,
body .checkbox input[type=checkbox]:hover{ border-color:var(--bf-primary); }
body .checkbox input[type=checkbox]:checked{ background:var(--bf-primary); border-color:var(--bf-primary); }
body .checkbox input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
body .radio input[type=radio]:checked{ border-color:var(--bf-primary); }
body .radio input[type=radio]:checked::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:var(--bf-primary);
}
body .radio input[type=radio]:disabled,
body .checkbox input[type=checkbox]:disabled{ opacity:.5; cursor:not-allowed; }