/* Visa Expert — custom components on top of Vuexy.
   File ini dimuat SEMUA layout (app, public, guest) — beda dari
   `public/assets/app.css` yang hanya dimuat layout dashboard. Apa pun yang
   dipakai halaman publik/login WAJIB di sini, bukan di app.css. */
:root{ --ve-primary:#7367f0; --ve-muted:#a5a3ae; --ve-head:#5d586c; }

/* ===== Skala teks kecil =====================================================
   Body Vuexy = 0.9375rem (15px). Bootstrap cuma menyediakan .fs-1…6 (heading)
   & .small, tak ada apa pun di bawah body — makanya sebelum ini tiap view
   nulis font-size sendiri dan tumbuh jadi 21 nilai berbeda (11px, 11.5px,
   12px, 12.5px, 13px, 13.5px …) untuk peran yang sama.

   Lima langkah ini adalah SATU-SATUNYA ukuran teks kecil yang boleh dipakai.
   Jangan tulis style="font-size:…" lagi di view; kalau butuh langkah baru,
   tambahkan di sini dulu supaya tetap satu skala.

   Peran:
     fs-md    label form, teks tabel biasa
     fs-sm    subteks & keterangan (paling sering)
     fs-xs    meta kecil, teks dalam badge/chip
     fs-xxs   caption, hint
     fs-micro label uppercase mikro

   Pengecualian yang sengaja TETAP inline: PDF (dompdf), body email, dan
   <x-invoice-status-badge> — ketiganya tak bisa membaca stylesheet ini.
   ------------------------------------------------------------------------- */
.fs-md    { font-size: 0.875rem  !important; } /* 14px */
.fs-sm    { font-size: 0.8125rem !important; } /* 13px */
.fs-xs    { font-size: 0.75rem   !important; } /* 12px */
.fs-xxs   { font-size: 0.6875rem !important; } /* 11px */
.fs-micro { font-size: 0.625rem  !important; } /* 10px */

/* Ikon besar di empty state / halaman "tidak ditemukan". Vuexy berhenti di
   .icon-xl (2rem/32px), sedangkan ilustrasi empty state butuh lebih besar —
   ini langkah tambahannya. Untuk ikon ukuran normal PAKAI kelas Vuexy
   (.icon-xs … .icon-xl), jangan style="font-size:…". */
.icon-empty { font-size: 2.5rem !important; } /* 40px */

/* stepper */
.ve-stepper{display:flex; align-items:center; margin:4px 0;}
.ve-stepper .st{display:flex; flex-direction:column; align-items:center; flex:1; position:relative;}
.ve-stepper .st .cir{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#ecedef; color:var(--ve-muted); font-size:18px; z-index:2; border:3px solid #fff;}
.ve-stepper .st.done .cir{background:var(--ve-primary); color:#fff;}
.ve-stepper .st.cur .cir{background:#fff; color:var(--ve-primary); border:2px solid var(--ve-primary);}
.ve-stepper .st .tl{font-size:12.5px; margin-top:7px; color:var(--ve-muted); font-weight:500;}
.ve-stepper .st.done .tl,.ve-stepper .st.cur .tl{color:var(--ve-head);}
.ve-stepper .bar{position:absolute; top:19px; left:-50%; width:100%; height:3px; background:#eceef1; z-index:1;}
.ve-stepper .st.done .bar,.ve-stepper .st.cur .bar{background:var(--ve-primary);}
.ve-stepper .st:first-child .bar{display:none;}
.ve-stepper .st.clk{cursor:pointer;}
.ve-stepper .st.clk:hover .cir{box-shadow:0 0 0 4px rgba(115,103,240,.15);}

/* expandable caret */
.cico{transition:transform .15s; cursor:pointer;} .cico.open{transform:rotate(90deg);}
tr.ve-member{background:#fbfbfd; cursor:pointer;} tr.ve-member:hover{background:#faf9fc;}
.docprog{display:flex; align-items:center; gap:8px;}
.docprog .p{width:96px; height:6px;}
.docprog .n{font-size:12px; color:var(--ve-muted); min-width:36px;}
.spon{font-size:11px; color:var(--ve-muted);}

/* doc groups (master visa) */
.doc-group{border:1px solid #ecebf0; border-radius:8px; margin-bottom:14px;}
.doc-group .dg-h{display:flex; justify-content:space-between; align-items:center; padding:11px 14px; background:#faf9fc; border-bottom:1px solid #f0eff3; flex-wrap:wrap; gap:8px;}
.doc-group .dg-h b{color:var(--ve-head);}
.doc-group .dg-b{padding:8px 14px 12px;}
.doc-item{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f6f5f8; font-size:13.5px;}
.doc-item:last-child{border-bottom:0;} .doc-item .di-n{flex:1;}
.condbuilder{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:#f0eefc; border:1px dashed var(--ve-primary); border-radius:8px; padding:10px 12px; margin:2px 0 12px;}

/* questionnaire builder */
.qrow{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid #ecebf0; border-radius:8px; margin-bottom:10px; background:#fff;}
.qrow .grip{color:var(--ve-muted); cursor:grab; font-size:18px;}
.qrow .qlabel{font-weight:600; color:var(--ve-head); font-size:14px;}
.qrow .qmeta{font-size:12px; color:var(--ve-muted);}
.modechip{border:1px solid var(--ve-primary); color:var(--ve-primary); border-radius:20px; padding:3px 12px; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; margin-right:6px;}
.modechip.off{border-color:#d7d5de; color:var(--ve-muted);}

/* biodata */
.photo-box{width:84px; height:84px; border-radius:10px; background:#e7e5ff; color:var(--ve-primary); display:grid; place-items:center; font-size:28px; font-weight:700; flex-shrink:0;}
.biodata .r{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #f5f4f7; font-size:13.5px;}
.biodata .r:last-child{border-bottom:0;}
.biodata .k{color:var(--ve-muted);} .biodata .v{color:var(--ve-head); font-weight:600; text-align:right;}

/* calendar */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal .dow{text-align:center; font-size:12px; font-weight:600; color:var(--ve-muted); padding:6px 0; text-transform:uppercase;}
.cal .cell{min-height:88px; border:1px solid #f0eff3; border-radius:8px; padding:6px; font-size:12px;}
.cal .cell .dn{font-weight:600; color:var(--ve-head);}
.cal .cell.off{background:#fbfafc; color:var(--ve-muted);}
.cal .ev{border-radius:4px; padding:2px 6px; margin-top:4px; font-size:11px; font-weight:500;}

.clickrow{cursor:pointer;} .clickrow:hover{background:#faf9fc;}

/* select2 — visual pakai tema Vuexy (vendor/libs/select2/select2.css). Di sini hanya
   aturan fungsional + samakan ukuran dengan input -sm di sekitarnya. */
.select2-container{width:100%!important;}
/* Dropdown di-render di dalam wrapper (dropdownParent) dalam modal — angkat di atas
   modal Vuexy (--bs-modal-zindex:1090). */
.select2-container--open{z-index:1100;}
/* Ukuran -sm (wrapper .ve-select2-sm) — samakan tinggi & font dengan .form-select-sm. */
.ve-select2-sm .select2-container--default .select2-selection--single{--bs-select-height:calc(1.53em + .43rem + 2px);font-size:.8125rem;}
.ve-select2-sm .select2-container--default .select2-selection--single .select2-selection__rendered{padding-inline-start:.75rem;}
.ve-select2-sm .select2-dropdown{font-size:.8125rem;}