/**
 * Form & UI controls — ISP Billing brand (#1e5aa8)
 * Load setelah app.css — override token & komponen form global.
 */

:root {
    /* ─── Input / select / textarea ─── */
    --control-font-size: 0.9375rem;
    --control-line-height: 1.3333;
    --control-label-size: 0.8125rem;
    --control-label-weight: 600;
    --control-label-gap: 6px;
    --control-pad-y: 11px;
    --control-pad-x: 12px;
    --control-min-h: 40px;
    --control-radius: 6px;
    --control-border: #ccd0d5;
    --control-border-hover: #bcc0c4;
    --control-bg: #ffffff;
    --control-bg-muted: #f0f2f5;
    --control-text: #050505;
    --control-placeholder: #65676b;
    --control-focus-border: #1e5aa8;
    --control-focus-ring: rgba(30, 90, 168, 0.2);
    --control-disabled-bg: #f0f2f5;
    --control-disabled-text: #bcc0c4;
    --control-error-border: #fa383e;
    --control-error-ring: rgba(250, 56, 62, 0.15);
    --control-icon-size: 20px;
    --control-icon-inset: 12px;
    --control-pad-left-icon: calc(var(--control-icon-inset) + var(--control-icon-size) + 8px);
    --control-pad-right-toggle: 44px;

    /* ─── Tombol FB ─── */
    --btn-font-size: 0.9375rem;
    --btn-font-weight: 600;
    --btn-min-h: 36px;
    --btn-pad-x: 16px;
    --btn-pad-y: 0;
    --btn-radius: 6px;
    --btn-gap: 8px;
    --btn-primary-bg: #1e5aa8;
    --btn-primary-hover: #164578;
    --btn-primary-active: #164578;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #e4e6eb;
    --btn-secondary-hover: #d8dadf;
    --btn-secondary-text: #050505;
    --btn-ghost-bg: transparent;
    --btn-ghost-text: #1e5aa8;
    --btn-ghost-hover: #f0f2f5;
    --btn-disabled-opacity: 0.55;

    /* ─── Form layout ─── */
    --form-gap-row: 16px;
    --form-gap-col: 20px;
    --form-actions-gap: 10px;
    --fieldset-border: transparent;
    --fieldset-bg: transparent;
    --fieldset-pad: 0;
    --fieldset-radius: 8px;

    /* ─── Checkbox grouped list (Settings FB) ─── */
    --fb-check-size: 18px;
    --fb-check-border: #64676b;
    --fb-check-border-hover: #050505;
    --fb-check-bg: #ffffff;
    --fb-check-blue: #1e5aa8;
    --fb-check-blue-hover: #164578;
    --fb-check-ring: rgba(30, 90, 168, 0.25);
    --fb-check-text: #050505;
    --fb-check-muted: #65676b;
    --fb-check-row-pad-y: 12px;
    --fb-check-row-pad-x: 16px;
    --fb-check-row-min-h: 48px;
    --fb-check-group-border: #ced0d4;
    --fb-check-divider: #e4e6eb;
    --fb-check-hover: transparent;
    --fb-check-list-hover: transparent;
    --fb-check-font: 0.9375rem;
    --fb-check-line: 1.3333;
}

/* ═══════════════════════════════════════════════════════════
   Label & field wrapper
   ═══════════════════════════════════════════════════════════ */

label:not(.auth-field-label):not(.setup-checkbox):not(.dev-config-checkbox):not(.checkbox-row):not(.isp-pg-activate):not(.isp-pg-card--pickable):not(.card.isp-pg-card--pickable):not(.sidebar-smart__search):not(.isp-fin__field) {
    display: block;
    margin-bottom: 0;
    font-weight: var(--control-label-weight);
    font-size: var(--control-label-size);
    color: var(--control-placeholder);
    line-height: 1.3333;
}

.field-block,
.setup-field {
    display: flex;
    flex-direction: column;
    gap: var(--control-label-gap);
    min-width: 0;
    max-width: 100%;
}

.field-block label:not(.auth-field-label),
.setup-field label:not(.auth-field-label) {
    margin-bottom: 0;
}

.field-block--full {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════
   Input, select, textarea
   ═══════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input),
select,
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0;
    min-height: var(--control-min-h);
    padding: var(--control-pad-y) var(--control-pad-x);
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    font: inherit;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
    color: var(--control-text);
    background-color: var(--control-bg);
    box-shadow: none;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.field-block > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input),
.field-block > select,
.field-block > textarea,
.setup-field > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input),
.setup-field > select,
.setup-field > textarea {
    margin-top: 0;
    flex-shrink: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input),
select {
    height: auto;
    min-height: var(--control-min-h);
    line-height: 1.35;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-color: var(--control-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%2365676B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

@media (hover: hover) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input):hover,
    select:hover,
    textarea:hover {
        border-color: var(--control-border-hover);
    }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
    border-color: var(--control-focus-border);
    color: var(--control-text);
    box-shadow: 0 0 0 2px var(--control-focus-ring);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):disabled,
textarea:disabled {
    background-color: var(--control-disabled-bg);
    color: var(--control-disabled-text);
    cursor: not-allowed;
    border-color: var(--control-border);
}

select:disabled {
    background-color: var(--control-disabled-bg);
    color: var(--control-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):read-only,
textarea:read-only {
    background-color: var(--control-bg-muted);
    cursor: default;
}

input::placeholder,
textarea::placeholder {
    color: var(--control-placeholder);
    opacity: 1;
}

textarea {
    height: auto;
    min-height: 96px;
    padding: 10px var(--control-pad-x);
    resize: vertical;
}

input[type="file"] {
    width: 100%;
    font-size: var(--control-font-size);
    color: var(--control-text);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--btn-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: background 0.12s ease;
}

@media (hover: hover) {
    input[type="file"]::file-selector-button:hover {
        background: var(--btn-secondary-hover);
    }
}

/* Error / invalid */
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.auth-input.is-invalid,
.field-block.is-invalid input,
.field-block.is-invalid select,
.field-block.is-invalid textarea {
    border-color: var(--control-error-border);
    box-shadow: 0 0 0 2px var(--control-error-ring);
}

.field-hint,
.setup-field-hint,
.field-help,
.field-help-meaning {
    display: block;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--control-placeholder);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.field-help p {
    margin: 4px 0 0;
}

.field-help p:first-child {
    margin-top: 0;
}

.field-help-meaning {
    font-weight: 500;
}

/* Auth inputs */
.auth-input,
.auth-captcha-input {
    margin-top: 0;
}

.auth-input-wrap .auth-input {
    margin-top: 0;
    padding: var(--control-pad-y) var(--control-pad-x);
    padding-left: var(--control-pad-left-icon);
}

.auth-input-wrap--password .auth-input {
    padding-right: var(--control-pad-right-toggle);
}

/* ═══════════════════════════════════════════════════════════
   Checkbox Facebook — kotak persegi 18×18, flex (bukan grid)
   ═══════════════════════════════════════════════════════════ */

.dev-config-checkbox,
.setup-checkbox.dev-config-checkbox,
label.checkbox-row,
.checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    box-sizing: border-box;
}

.dev-config-checkbox,
.setup-checkbox.dev-config-checkbox {
    width: 100%;
    min-height: var(--fb-check-row-min-h, 48px);
    margin: 0;
    padding: var(--fb-check-row-pad-y, 12px) var(--fb-check-row-pad-x, 16px);
    border: none;
    border-radius: 0;
    background: var(--fb-check-bg, #fff);
    font-size: var(--fb-check-font, 0.9375rem);
    font-weight: 400;
    line-height: var(--fb-check-line, 1.3333);
    color: var(--fb-check-text, #050505);
    transition: background 0.12s ease;
}

@media (hover: hover) {
    .dev-config-checkbox:hover,
    .setup-checkbox.dev-config-checkbox:hover {
        background: var(--fb-check-hover, #f2f3f5);
    }
}

.dev-config-checkbox:has(input:checked),
.dev-config-checkbox:has(input:focus-visible) {
    background: var(--fb-check-bg, #fff);
    box-shadow: none;
}

.dev-config-checkbox:has(input:focus-visible) {
    background: transparent;
}

.dev-config-checkbox__text,
.checkbox-row span,
.checkbox-row strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fb-check-text, #050505);
    word-break: break-word;
}

/* Kotak centang — ukuran tetap, anti-stretch */
input[type="checkbox"]:not(.auth-input):not(.auth-captcha-input),
.dev-config-checkbox input[type="checkbox"],
.setup-checkbox.dev-config-checkbox input[type="checkbox"],
.checkbox-row input[type="checkbox"],
label.checkbox-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 var(--fb-check-size, 18px);
    width: var(--fb-check-size, 18px) !important;
    height: var(--fb-check-size, 18px) !important;
    min-width: var(--fb-check-size, 18px) !important;
    min-height: var(--fb-check-size, 18px) !important;
    max-width: var(--fb-check-size, 18px) !important;
    max-height: var(--fb-check-size, 18px) !important;
    margin: 0.15em 0 0;
    padding: 0;
    border: 2px solid var(--fb-check-border, #64676b);
    border-radius: 4px;
    background-color: var(--fb-check-bg, #fff);
    background-image: none;
    background-size: 11px 9px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: top;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        transform 0.12s ease;
}

input[type="checkbox"]:checked:not(.auth-input),
.dev-config-checkbox input[type="checkbox"]:checked,
.setup-checkbox.dev-config-checkbox input[type="checkbox"]:checked,
.checkbox-row input[type="checkbox"]:checked {
    background-color: var(--fb-check-blue, #1e5aa8);
    border-color: var(--fb-check-blue, #1e5aa8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5.2 4.2 7.9 10.5 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    animation: fb-check-pop 0.14s ease-out;
}

@keyframes fb-check-pop {
    0% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

input[type="checkbox"]:focus-visible:not(.auth-input),
.dev-config-checkbox input[type="checkbox"]:focus-visible,
.checkbox-row input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fb-check-ring, rgba(30, 90, 168, 0.25));
}

@media (hover: hover) {
    input[type="checkbox"]:not(:checked):not(.auth-input):hover,
    .dev-config-checkbox input[type="checkbox"]:not(:checked):hover,
    .checkbox-row input[type="checkbox"]:not(:checked):hover {
        border-color: var(--fb-check-border-hover, #050505);
    }

    input[type="checkbox"]:checked:not(.auth-input):hover,
    .dev-config-checkbox input[type="checkbox"]:checked:hover,
    .checkbox-row input[type="checkbox"]:checked:hover {
        background-color: var(--fb-check-blue-hover, #164578);
        border-color: var(--fb-check-blue-hover, #164578);
    }
}

.dev-config-checkbox input[type="checkbox"]:disabled,
.setup-checkbox.dev-config-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.dev-config-form--locked .dev-config-checkbox,
.dev-config-form--locked .setup-checkbox.dev-config-checkbox,
fieldset:disabled .dev-config-checkbox,
fieldset:disabled .setup-checkbox.dev-config-checkbox {
    cursor: default;
    pointer-events: none;
}

@media (hover: hover) {
    .dev-config-checkbox:has(input:disabled):hover,
    .setup-checkbox.dev-config-checkbox:has(input:disabled):hover {
        background: transparent;
    }
}

input[type="radio"] {
    accent-color: var(--fb-check-blue, #1e5aa8);
    width: var(--fb-check-size, 18px);
    height: var(--fb-check-size, 18px);
    flex: 0 0 var(--fb-check-size, 18px);
    cursor: pointer;
}

/* Checkbox row — opsi dalam form (payment settings) */
label.checkbox-row,
.checkbox-row {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--control-bg);
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
}

@media (hover: hover) {
    label.checkbox-row:hover,
    .checkbox-row:hover {
        background: transparent;
        border-color: var(--control-border-hover);
    }
}

/* Checklist grouped container */
.dev-config-checklist {
    display: grid;
    gap: 0;
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid var(--fb-check-group-border, #ced0d4);
    border-radius: 8px;
    background: var(--fb-check-bg, #fff);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dev-config-checklist--solo,
.dev-config-checklist:has(> :only-child) {
    width: max-content;
    max-width: min(100%, 680px);
}

.dev-config-checklist--multi,
.dev-config-checklist:has(> :nth-child(2)) {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.dev-config-checklist--multi > .field-block + .field-block {
    border-left: 1px solid var(--fb-check-divider, #e4e6eb);
}

@media (max-width: 639px) {
    .dev-config-checklist--multi {
        grid-template-columns: 1fr;
    }

    .dev-config-checklist--multi > .field-block + .field-block {
        border-left: none;
        border-top: 1px solid var(--fb-check-divider, #e4e6eb);
    }
}

.dev-config-checklist > .field-block {
    min-width: 0;
    margin: 0;
    width: 100%;
}

.dev-config-checklist > .field-block:not(:last-child) .dev-config-checkbox {
    border-bottom: 1px solid var(--fb-check-divider, #e4e6eb);
}

.dev-config-checklist--multi > .field-block .dev-config-checkbox {
    border-bottom: none;
}

@media (max-width: 639px) {
    .dev-config-checklist--multi > .field-block:not(:last-child) .dev-config-checkbox {
        border-bottom: 1px solid var(--fb-check-divider, #e4e6eb);
    }
}

.dev-config-go-live-checklist,
.setup-go-live-checklist {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--fb-check-group-border, #ced0d4);
    border-radius: 8px;
    background: var(--fb-check-bg, #fff);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Go live — daftar URL publik */
.dev-go-live-urls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.dev-go-live-urls__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dev-go-live-urls__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fb-check-muted, #65676b);
}

.dev-go-live-urls__lead {
    margin: 0;
    max-width: 62ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fb-check-muted, #65676b);
}

.dev-go-live-urls__list {
    margin: 0;
}

.dev-go-live-urls__row {
    padding: 0;
    min-height: 0;
}

.dev-go-live-urls__row-link,
.dev-go-live-urls__row-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--fb-check-row-min-h, 48px);
    padding: var(--fb-check-row-pad-y, 12px) var(--fb-check-row-pad-x, 16px);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

.dev-go-live-urls__row-link {
    cursor: pointer;
}

@media (hover: hover) {
    .dev-go-live-urls__row-link:hover {
        background: transparent;
    }

    .dev-go-live-urls__row-link:hover .dev-go-live-urls__url {
        text-decoration: underline;
    }

    .dev-go-live-urls__row-link:hover .dev-go-live-urls__label {
        color: var(--fb-check-blue, #1e5aa8);
    }
}

.dev-go-live-urls__row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.dev-go-live-urls__label {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fb-check-text, #050505);
}

.dev-go-live-urls__url {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fb-check-blue, #1e5aa8);
    word-break: break-all;
}

.dev-go-live-urls__open {
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--fb-check-muted, #65676b);
}

.dev-go-live-urls__row--site {
    background: #f7f8fa;
}

.dev-go-live-urls__code {
    display: block;
    margin: 0;
    padding: 0;
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--fb-check-text, #050505);
    word-break: break-all;
    background: transparent;
    border: 0;
}

.dev-go-live-urls__list li::before {
    content: none;
    display: none;
}

.dev-go-live-urls__list li:not(:last-child) {
    border-bottom: 1px solid var(--fb-check-divider, #e4e6eb);
}

.dev-config-go-live-checklist--solo,
.dev-config-go-live-checklist:has(> :only-child),
.setup-go-live-checklist--solo,
.setup-go-live-checklist:has(> :only-child) {
    width: 100%;
    max-width: 100%;
}

.dev-config-go-live-checklist li,
.setup-go-live-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--fb-check-row-min-h, 48px);
    padding: var(--fb-check-row-pad-y, 12px) var(--fb-check-row-pad-x, 16px);
    font-size: var(--fb-check-font, 0.9375rem);
    line-height: var(--fb-check-line, 1.3333);
    color: var(--fb-check-muted, #65676b);
    transition: background 0.12s ease;
}

.dev-config-go-live-checklist li:not(:last-child),
.setup-go-live-checklist li:not(:last-child) {
    border-bottom: 1px solid var(--fb-check-divider, #e4e6eb);
}

@media (hover: hover) {
    .dev-config-go-live-checklist li:hover,
    .setup-go-live-checklist li:hover {
        background: transparent;
    }

    .dev-config-go-live-checklist li:hover a,
    .setup-go-live-checklist li:hover a {
        text-decoration: underline;
    }
}

.dev-config-go-live-checklist li::before,
.setup-go-live-checklist li::before {
    content: '';
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 0.35em;
    border-radius: 50%;
    background: var(--fb-check-blue, #1e5aa8);
    box-shadow: 0 0 0 2px rgba(30, 90, 168, 0.18);
}

.dev-config-go-live-checklist a,
.setup-go-live-checklist a {
    font-weight: 600;
    color: var(--fb-check-blue, #1e5aa8);
    text-decoration: none;
}

.dev-config-go-live-checklist a:hover,
.setup-go-live-checklist a:hover {
    text-decoration: underline;
}

.dev-config-stack--multi .dev-config-panel__body .dev-config-checklist,
.dev-config-stack--multi .dev-config-panel__body .dev-config-go-live-checklist,
.dev-config-stack--multi .dev-config-panel__body .setup-go-live-checklist {
    margin: 0 !important;
}

/* ─── Fluid form — lebar kontrol mengikuti parent (mobile-safe) ─── */
.dev-config-form,
.dev-config-form__fields,
fieldset.dev-config-form__fields,
.dev-config-secrets,
.dev-config-secret-field,
.setup-owner-form,
.setup-wizard__owner-form,
.setup-form--direct {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
}

.dev-config-secret-field input.dev-config-secret,
input.dev-config-secret {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .form-grid,
    .setup-page .form-grid,
    .setup-page .setup-owner-form__grid,
    .dev-config-form__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--form-gap-row);
    }

    .dev-config-checklist--solo,
    .dev-config-checklist:has(> :only-child),
    .dev-config-go-live-checklist,
    .setup-go-live-checklist {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Cegah input teks memaksa checkbox stretch */
.setup-page .field-block input[type="checkbox"],
.setup-page .setup-field input[type="checkbox"],
.dev-config-scope .setup-field input[type="checkbox"],
.app-page input[type="checkbox"],
.app-page .checkbox-row input[type="checkbox"] {
    width: var(--fb-check-size, 18px) !important;
    min-height: var(--fb-check-size, 18px) !important;
    max-height: var(--fb-check-size, 18px) !important;
}

/* ═══════════════════════════════════════════════════════════
   Tombol — gaya Facebook (flat, tanpa gradient/shadow)
   ═══════════════════════════════════════════════════════════ */

.btn,
button.btn,
a.btn,
.setup-btn,
.isp-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-min-h);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition:
        background-color var(--isp-dur, 0.22s) cubic-bezier(0.22, 1, 0.36, 1),
        border-color var(--isp-dur, 0.22s) cubic-bezier(0.22, 1, 0.36, 1),
        color var(--isp-dur, 0.22s) cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow var(--isp-dur, 0.22s) cubic-bezier(0.22, 1, 0.36, 1),
        opacity var(--isp-dur, 0.22s) cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover,
a.btn:hover {
    text-decoration: none;
}

.btn:active:not(:disabled),
.setup-btn:active:not(:disabled) {
    transform: none;
    opacity: 1;
}

.btn:disabled,
.btn[aria-disabled="true"],
.setup-btn:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary,
.setup-btn--primary,
.isp-modal__btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: transparent;
    background-image: none;
    box-shadow: none;
}

.btn-primary::after {
    display: none;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled),
    .setup-btn--primary:hover:not(:disabled),
    .isp-modal__btn--primary:hover:not(:disabled) {
        background: var(--btn-primary-hover);
        color: var(--btn-primary-text);
        filter: none;
        transform: none;
        box-shadow: none;
    }
}

.btn-primary:active:not(:disabled),
.setup-btn--primary:active:not(:disabled) {
    background: var(--btn-primary-active);
}

.btn-secondary,
.setup-btn--ghost {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: transparent;
    box-shadow: none;
}

.isp-modal__btn--ghost {
    background: #e4e6eb !important;
    background-image: none !important;
    color: #050505 !important;
    border: 1px solid #ccd0d5 !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .btn-secondary:hover:not(:disabled),
    .setup-btn--ghost:hover:not(:disabled) {
        background: var(--btn-secondary-hover);
        color: var(--btn-secondary-text);
        border-color: transparent;
    }

    .isp-modal__btn--ghost:hover:not(:disabled) {
        background: #d8dadf !important;
        color: #050505 !important;
        border-color: #ccd0d5 !important;
    }
}

.btn-ghost {
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);
    border-color: transparent;
}

@media (hover: hover) {
    .btn-ghost:hover:not(:disabled) {
        background: var(--btn-ghost-hover);
        color: var(--btn-ghost-text);
    }
}

.btn-block,
.btn--full-mobile {
    width: 100%;
}

.btn-sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.btn-lg {
    min-height: 40px;
    padding: 0 20px;
    font-size: 1rem;
    border-radius: var(--btn-radius);
}

.btn:focus-visible,
.setup-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--control-focus-ring);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--control-focus-ring);
}

/* Native submit/button in forms */
button[type="submit"]:not(.btn),
input[type="submit"]:not(.btn) {
    min-height: var(--btn-min-h);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: none;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   Form layout — grid, actions, fieldset
   ═══════════════════════════════════════════════════════════ */

.form-grid,
.setup-page .form-grid,
.setup-page .setup-owner-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--form-gap-row) var(--form-gap-col);
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dev-config-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid > .dev-config-checklist,
.form-grid > .dev-config-secrets,
.form-grid > .dev-config-go-live-checklist,
.form-grid > .setup-go-live-checklist,
.dev-config-form__grid > .dev-config-checklist,
.dev-config-form__grid > .dev-config-secrets {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.form-grid .btn,
.form-grid .field-block--full,
.form-grid > button,
.form-grid .form-actions {
    grid-column: 1 / -1;
}

.form-with-help {
    align-items: start;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-actions-gap);
    align-items: center;
    margin-top: 4px;
    padding-top: 0;
}

.form-actions .btn {
    flex: 0 1 auto;
}

fieldset {
    border: 1px solid var(--fieldset-border);
    border-radius: var(--fieldset-radius);
    background: var(--fieldset-bg);
    padding: var(--fieldset-pad);
    margin: 0;
    min-width: 0;
    box-shadow: none;
}

fieldset:disabled {
    opacity: 0.72;
    pointer-events: none;
}

legend {
    padding: 0 4px;
    font-size: var(--control-label-size);
    font-weight: var(--control-label-weight);
    color: var(--control-text);
}

fieldset.field-block {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap-row);
}

fieldset.field-block legend {
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════
   App & setup scope — konsisten di dashboard
   ═══════════════════════════════════════════════════════════ */

.app-page,
.setup-page,
.dev-config-scope {
    --control-min-h: 40px;
    --control-pad-y: 11px;
    --control-pad-x: 12px;
    --control-radius: 6px;
    --control-label-size: 0.8125rem;
    --control-label-gap: 6px;
    --form-gap-row: 14px;
    --form-gap-col: 16px;
    --fieldset-bg: transparent;
    --fieldset-border: transparent;
    --fieldset-pad: 0;
}

.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.auth-input):not(.sidebar-smart__search-input),
.app-page select,
.app-page textarea,
.setup-page .field-block input:not([type="checkbox"]):not([type="radio"]),
.setup-page .field-block select,
.setup-page .field-block textarea,
.setup-page .setup-field input:not([type="checkbox"]):not([type="radio"]),
.setup-page .setup-field select,
.setup-page .setup-field textarea,
.dev-config-scope .setup-field input:not([type="checkbox"]):not([type="radio"]),
.dev-config-scope .setup-field select,
.dev-config-scope .setup-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-color: var(--control-border);
    background-color: var(--control-bg);
    box-shadow: none;
}