/* E-Arsip UI layer: form, alert, konfirmasi. Hanya tampilan, tidak mengubah alur bisnis. */

/* ---------- Form ---------- */
.form-section { border: 0; }
.form-section + .form-section { margin-top: 1rem; }
.form-section .card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); padding: .9rem 1.25rem; }
.form-section-title { display: flex; align-items: center; gap: .65rem; font-weight: 600; margin: 0; }
.form-section-num {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-primary); color: #fff; font-size: .8rem; font-weight: 700;
}
.form-section-sub { font-weight: 400; font-size: .8rem; color: var(--bs-secondary-color); margin: 0; }

.form-label .req { color: var(--bs-danger); margin-left: .15rem; font-weight: 700; }
.form-label .opt { color: var(--bs-secondary-color); font-weight: 400; font-size: .75rem; margin-left: .3rem; }
.form-hint { font-size: .78rem; color: var(--bs-secondary-color); margin-top: .3rem; display: flex; gap: .35rem; align-items: flex-start; }
.form-hint i { margin-top: .1rem; }
.form-control.is-invalid ~ .form-hint, .form-select.is-invalid ~ .form-hint { display: none; }
.form-counter { float: right; font-size: .75rem; color: var(--bs-secondary-color); }
.form-counter.near { color: var(--bs-warning-text-emphasis); }

.form-summary { border-left: 4px solid var(--bs-danger); }
.form-summary ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.form-summary a { color: inherit; text-decoration: underline; }

/* Info box tentang jenis arsip terpilih */
.type-info { border: 1px dashed var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); border-radius: .5rem; padding: .75rem 1rem; font-size: .85rem; }
.type-info .chip { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; margin: .15rem .25rem 0 0; }

/* Pilihan visibilitas / kerahasiaan */
.choice-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem 1rem; height: 100%; transition: border-color .15s, background .15s; }
.choice-card:hover { border-color: var(--bs-primary); }
.choice-card .form-check-input:checked ~ .form-check-label .choice-title { color: var(--bs-primary); }
.choice-card:has(.form-check-input:checked) { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.choice-title { font-weight: 600; display: block; }
.choice-desc { font-size: .78rem; color: var(--bs-secondary-color); display: block; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 1.75rem 1rem;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  background: var(--bs-tertiary-bg);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.dropzone.is-invalid { border-color: var(--bs-danger); }
.dropzone i.dz-icon { font-size: 2rem; color: var(--bs-primary); }
.dropzone input[type=file] { display: none; }
.file-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .4rem; background: var(--bs-body-bg); }
.file-list li.bad { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.file-list .fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.file-list .fmeta { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.file-list .ferr { font-size: .75rem; color: var(--bs-danger); }

.link-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.link-row .url { flex: 2 1 0; }
.link-row .name { flex: 1 1 0; }

/* Panel aksi simpan */
.action-bar { position: sticky; bottom: 0; z-index: 5; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: .85rem 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; border-radius: .5rem; }
.action-help { font-size: .78rem; color: var(--bs-secondary-color); flex: 1 1 100%; }
.action-help b { color: var(--bs-body-color); }

/* Alur status */
.flow-steps { display: flex; gap: .25rem; flex-wrap: wrap; font-size: .78rem; align-items: center; }
.flow-steps .step { padding: .15rem .6rem; border-radius: 999px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.flow-steps .step.on { background: var(--bs-primary); color: #fff; }
.flow-steps .sep { color: var(--bs-secondary-color); }

/* Tombol loading */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn .spinner-border { width: 1em; height: 1em; border-width: .15em; margin-right: .4rem; vertical-align: -.125em; }

/* ---------- Alert ---------- */
.app-alert { display: flex; gap: .75rem; align-items: flex-start; border-radius: .6rem; padding: .85rem 1rem; }
.app-alert > i { font-size: 1.25rem; line-height: 1.3; }
.app-alert .app-alert-title { font-weight: 600; margin-bottom: .1rem; }
.app-alert .app-alert-body { flex: 1 1 auto; min-width: 0; }
.app-alert ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* ---------- Modal konfirmasi ---------- */
.confirm-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .75rem; }
.confirm-icon.danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.confirm-icon.warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.confirm-icon.success { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.confirm-icon.primary { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* ---------- Kewajiban arsip ---------- */
.ob-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1rem 1.1rem; height: 100%; display: flex; flex-direction: column; gap: .5rem; background: var(--bs-body-bg); }
.ob-card.done { border-color: var(--bs-success-border-subtle); background: var(--bs-success-bg-subtle); }
.ob-card.todo { border-left: 4px solid var(--bs-warning); }

/* Password */
.pw-meter { height: .3rem; border-radius: 999px; background: var(--bs-secondary-bg); overflow: hidden; margin-top: .4rem; }
.pw-meter > span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }

@media (max-width: 575.98px) {
  .link-row { flex-direction: column; }
  .action-bar .btn { flex: 1 1 100%; }
}