/* Komponen bersama non-legacy.
   Gaya tombol, panel, dan tabel panel admin berasal dari base.css serta components.css
   agar tampilannya sama dengan desain prototipe. File ini hanya memuat:
   1. ikon SVG bersama,
   2. focus ring aksesibilitas,
   3. penyesuaian tombol khusus halaman authentication (login, ubah profil, ubah password). */

.ui-icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-error { display:block; margin:0; color:#d92d35; font-size:11px; font-weight:600; line-height:1.4; }.field-error.hidden { display:none; }
.required-mark { color:#ef2b2d !important; font-size:14px; font-weight:800; line-height:1; }
input.is-invalid,select.is-invalid,textarea.is-invalid { border-color:#e64047 !important; background:#fffafb; }.account-settings-form input.is-invalid,.login-form-shell input.is-invalid { outline:3px solid rgba(230,64,71,.12); }.form-field.has-error { color:inherit; }
.password-control { position:relative; display:block; width:100%; }.password-control input { width:100%; box-sizing:border-box; padding-right:46px !important; }.password-toggle { position:absolute; top:50%; right:7px; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:#697586; cursor:pointer; transform:translateY(-50%); }.password-toggle:hover { color:var(--orange); background:var(--orange-soft); }.password-toggle:focus-visible { outline:3px solid color-mix(in srgb, var(--orange) 35%, transparent); outline-offset:1px; }.password-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn.is-loading { cursor:wait; }.ui-button-spinner { width:15px; height:15px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ui-button-spin .7s linear infinite; }@keyframes ui-button-spin { to { transform:rotate(360deg); } }

.searchable-select{position:relative;width:100%}.native-searchable-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.searchable-select__trigger{width:100%;min-height:42px;padding:10px 36px 10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);font:400 12px var(--font-body);text-align:left;position:relative}.searchable-select:has(.native-searchable-select.is-invalid) .searchable-select__trigger{border-color:#e64047;background:#fffafb}.searchable-select__trigger:after{content:'⌄';position:absolute;right:12px;color:var(--muted);font-weight:700}.searchable-select__trigger:focus-visible{outline:3px solid color-mix(in srgb,var(--orange) 35%,transparent);outline-offset:1px}.searchable-select__menu{position:absolute;z-index:2100;top:calc(100% + 5px);left:0;right:0;padding:8px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 14px 32px rgba(21,35,57,.16)}.searchable-select__search{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:7px;outline:0;font-size:12px}.searchable-select__search:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}.searchable-select__options{max-height:180px;overflow:auto;margin-top:6px}.searchable-select__option{width:100%;padding:9px 10px;border:0;border-radius:6px;background:#fff;color:var(--navy);font:400 12px var(--font-body);text-align:left}.searchable-select__option:hover,.searchable-select__option[aria-selected="true"]{background:var(--orange-soft);color:var(--orange)}.searchable-select__option:disabled{cursor:not-allowed;color:#9ba3af;background:#f3f4f6}.searchable-select__option:disabled:hover{color:#9ba3af;background:#f3f4f6}
.searchable-select__search[hidden]{display:none}.searchable-select__menu:has(.searchable-select__search[hidden]) .searchable-select__options{margin-top:0}
.searchable-select__options{display:grid;grid-template-columns:minmax(0,1fr)}
.searchable-select__option{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere}

.ui-toast-region { position:fixed; z-index:5000; top:20px; right:20px; display:grid; gap:10px; width:min(390px,calc(100vw - 32px)); pointer-events:none; }
.ui-toast { display:grid; grid-template-columns:34px minmax(0,1fr) 28px; align-items:center; gap:10px; padding:12px; border:1px solid #bce5cd; border-radius:10px; background:#fff; box-shadow:0 14px 32px rgba(21,35,57,.16); color:#126c43; pointer-events:auto; animation:ui-toast-in 180ms ease-out; }
.ui-toast.is-info { border-color:#bdd7fb; color:#245fa9; }.ui-toast.is-error { border-color:#f5c2c7; color:#c7353c; }.ui-toast.is-leaving { animation:ui-toast-out 180ms ease-in forwards; }
.ui-toast__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#e9f7ef; }.ui-toast.is-info .ui-toast__icon { background:#eaf3ff; }.ui-toast.is-error .ui-toast__icon { background:#fff0f1; }.ui-toast__icon .ui-icon { width:18px; height:18px; stroke-width:2.2; }
.ui-toast p { margin:0; color:inherit; font-size:13px; font-weight:600; line-height:1.4; }.ui-toast__close { width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }.ui-toast__close:hover { background:rgba(20,35,55,.07); }.ui-toast__close .ui-icon { width:16px; height:16px; }
.ui-confirm-dialog{width:min(430px,calc(100vw - 32px));padding:30px;text-align:center}.ui-confirm-dialog__icon{width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:#fff3e9;color:var(--orange)}.ui-confirm-dialog__icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ui-confirm-dialog h2{margin:0 0 8px}.ui-confirm-dialog>p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.ui-confirm-dialog__actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.ui-confirm-dialog__actions .btn{min-width:120px}.ui-confirm-dialog.is-danger .ui-confirm-dialog__icon{background:#fff0f1;color:#d92d35}.ui-confirm-dialog.is-danger .ui-confirm-dialog__accept{background:#d92d35;box-shadow:0 7px 18px rgba(217,45,53,.2)}@media(max-width:480px){.ui-confirm-dialog{padding:25px 20px}.ui-confirm-dialog__actions{flex-direction:column-reverse}.ui-confirm-dialog__actions .btn{width:100%}}
@keyframes ui-toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }@keyframes ui-toast-out { to { opacity:0; transform:translateY(-8px); } }@media(max-width:720px) { .ui-toast-region { top:76px; right:16px; } }

.btn:focus-visible,
.icon-button:focus-visible,
.kebab-button:focus-visible,
.sidebar button:focus-visible,
.sidebar a:focus-visible,
.header-popover button:focus-visible,
.action-dropdown button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--orange) 35%, transparent);
  outline-offset: 2px;
}

body.auth-page .btn,
.account-settings-page .btn {
  appearance: none;
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.6875rem 1.125rem;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5625rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.auth-page .btn-primary,
.account-settings-page .btn-primary {
  border-color: var(--orange);
}

body.auth-page .btn-outline,
.account-settings-page .btn-outline {
  border-color: var(--line);
}

body.auth-page .btn:hover:not(:disabled),
.account-settings-page .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

body.auth-page .btn-outline:hover:not(:disabled),
.account-settings-page .btn-outline:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

body.auth-page .btn:disabled,
.account-settings-page .btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

/* Gaya daftar dokumen: editor, pratinjau, dan draft cetak memakai markup yang sama. */
ol[data-list-style], ul[data-list-style] { margin: .65em 0; padding-left: 2em; }
ol[data-list-style="decimal"] { list-style-type: decimal; }
ol[data-list-style="upper-alpha"] { list-style-type: upper-alpha; }
ol[data-list-style="lower-alpha"] { list-style-type: lower-alpha; }
ol[data-list-style="lower-roman"] { list-style-type: lower-roman; }
ul[data-list-style="disc"] { list-style-type: disc; }
ul[data-list-style="dash"] { list-style: none; }
ul[data-list-style="dash"] > li { position: relative; }
ul[data-list-style="dash"] > li::before { content: "-"; position: absolute; left: -1.35em; }