/* PGRI shared form system. Loaded after public/admin themes. */
:root {
    --form-height: 44px;
    --form-radius: 10px;
    --form-border: #cbd5e1;
    --form-border-focus: #1a4a9e;
    --form-focus-ring: rgba(26, 74, 158, .16);
    --form-surface: #fff;
    --form-muted-surface: #f8fafc;
}

.form__group { min-width: 0; }
.form { min-width: 0; }
.form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form__group > label { min-height: 1.35em; }
.form__group > input:not([type="checkbox"]):not([type="radio"]),
.form__group > select,
.form__group > textarea,
.form-control,
.input-inline,
.input-search,
.field__input,
.password-field__control input,
.user-table input,
.user-table select {
    width: 100%;
    min-height: var(--form-height);
    box-sizing: border-box;
    padding: .68rem .85rem;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background: var(--form-muted-surface);
    color: var(--ink, #1d2634);
    font: inherit;
    line-height: 1.35;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form__group > textarea { min-height: 120px; resize: vertical; }
.form__group > select,
.form-control[type="select"],
.input-inline[type="select"],
.user-table select {
    appearance: none;
    padding-right: 2.5rem;
    background-color: var(--form-muted-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right .8rem center;
    background-repeat: no-repeat;
}
.form__group > input:focus,
.form__group > select:focus,
.form__group > textarea:focus,
.form-control:focus,
.input-inline:focus,
.input-search:focus,
.field__input:focus,
.password-field__control input:focus,
.user-table input:focus,
.user-table select:focus {
    outline: none;
    border-color: var(--form-border-focus);
    background: var(--form-surface);
    box-shadow: 0 0 0 4px var(--form-focus-ring);
}
.form__group > input::placeholder,
.form__group > textarea::placeholder,
.form-control::placeholder,
.input-inline::placeholder,
.input-search::placeholder,
.field__input::placeholder,
.password-field__control input::placeholder,
.user-table input::placeholder { color: #94a3b8; }

.form__group.is-invalid > input,
.form__group.is-invalid > select,
.form__group.is-invalid > textarea,
.form__group > input[aria-invalid="true"],
.form__group > select[aria-invalid="true"],
.form__group > textarea[aria-invalid="true"] {
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .1);
}
.form__hint, .form__error { display: block; margin-top: .4rem; font-size: .78rem; line-height: 1.45; }
.form__hint { color: var(--muted, #64748b); }
.form__error { color: #c8102e; font-weight: 650; }

.checkbox { min-height: 32px; }
.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
    width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
    accent-color: #123b82;
}
.form__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form__actions .btn, .btn { min-height: var(--form-height); justify-content: center; }
.form__actions .btn { padding-inline: 1.05rem; }
.field__toggle, .password-field__toggle { min-height: 34px; border-radius: 8px; }
.field__input { padding-left: 2.7em; padding-right: 3.1em; }
.password-field__control input { padding-left: 2.6em; padding-right: 6.8em; }
.btn:focus-visible, .checkbox:focus-within { outline: 3px solid #c9a227; outline-offset: 2px; }
.btn[disabled], button[disabled] { cursor: not-allowed; opacity: .62; }
.form__group > input:disabled, .form__group > select:disabled, .form__group > textarea:disabled, .form-control:disabled, .input-inline:disabled, .user-table input:disabled, .user-table select:disabled { cursor: not-allowed; opacity: .65; background: #eef2f7; }

@media (max-width: 720px) {
    .form__row { grid-template-columns: 1fr !important; gap: 0; }
    .form__actions { align-items: stretch; }
    .form__actions .btn { flex: 1 1 100%; }
    .table-wrap .user-table { min-width: 0; }
    .user-table, .user-table tbody, .user-table tr, .user-table td { display: block; width: 100%; }
    .user-table thead { display: none; }
    .user-table tr { padding: 14px 12px; border-bottom: 1px solid var(--form-border); }
    .user-table tbody tr:last-child { border-bottom: 0; }
    .user-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border: 0; }
    .user-table td::before { content: attr(data-label); color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .user-table td[data-label="Aksi"] { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--form-border); }
    .user-table td[data-label="Aksi"]::before { display: none; }
    .user-table td:first-child form { display: grid; gap: 8px; }
    .user-table input, .user-table select { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .form__group > input, .form__group > select, .form__group > textarea, .form-control, .input-inline, .input-search, .btn { transition: none; }
}