/* Register right-panel canonical control-state contract. */
/* One state machine, one accent variable, one surface policy for every field-like control. */
.index {
    --control-state-normal: var(--control-border);
    --control-state-hover: var(--control-hover-border);
    --control-state-primary: var(--primary);
    --control-state-disabled: var(--control-border);
    --control-state-accent: var(--control-state-normal);
}

/* Canonical all-dropdown pointer/focus/open parity. */
/* STATE 1/4: NORMAL. :where() keeps state specificity flat; order is authoritative. */
.index :where(
    input.config-input:not([type="number"]),
    input.file-config-input:not([type="number"]):not([type="file"]):not(.config-secret-input),
    .file-content-textarea,
    .custom-select-search input,
    .number-input-wrapper,
    .custom-select,
    .config-native-select,
    .items-per-page-custom,
    input.file-config-input[type="file"],
    .password-input-wrapper,
    .file-upload-container,
    select.items-per-page-select,
    button.control-surface,
    .page-info.control-surface
) {
    --control-state-accent: var(--control-state-normal);
}

/* STATE 2/4: HOVER. */
.index :where(
    input.config-input:not([type="number"]):not(:disabled):hover,
    input.file-config-input:not([type="number"]):not([type="file"]):not(.config-secret-input):not(:disabled):hover,
    .file-content-textarea:not(:disabled):hover,
    .custom-select-search input:not(:disabled):hover,
    .number-input-wrapper:not(:has(:disabled)):hover,
    .custom-select:not(.active):not(:has(> .custom-select-trigger:disabled)):not(:has(> .custom-select-trigger[aria-disabled="true"])):has(> .custom-select-trigger:hover),
    .config-native-select:not(.open):not(:has(> .config-native-select-trigger:disabled)):not(:has(> .config-native-select-trigger[aria-disabled="true"])):has(> .config-native-select-trigger:hover),
    .items-per-page-custom:not(.open):not(:has(> .items-per-page-custom-trigger:disabled)):not(:has(> .items-per-page-custom-trigger[aria-disabled="true"])):has(> .items-per-page-custom-trigger:hover),
    input.file-config-input[type="file"]:not(:disabled):hover,
    .password-input-wrapper:not(:has(> .file-config-input:disabled)):hover,
    .file-upload-container:not(:has(:disabled)):hover,
    select.items-per-page-select:not(:disabled):hover,
    button.control-surface:not(:disabled):hover,
    .page-info.control-surface:hover
) {
    --control-state-accent: var(--control-state-hover);
}

/* STATE 3/4: PRIMARY. Inputs keep primary while focused; dropdown pointer focus alone does not. */
.index :where(
    input.config-input:not([type="number"]):not(:disabled):is(:focus, :focus-visible),
    input.file-config-input:not([type="number"]):not([type="file"]):not(.config-secret-input):not(:disabled):is(:focus, :focus-visible),
    .file-content-textarea:not(:disabled):is(:focus, :focus-visible),
    .custom-select-search input:not(:disabled):is(:focus, :focus-visible),
    .number-input-wrapper:not(:has(:disabled)):focus-within,
    .number-input-wrapper:not(:has(:disabled)):has(.custom-spinner-btn:active),
    .custom-select:has(> .custom-select-trigger:active),
    .config-native-select:has(> .config-native-select-trigger:active),
    .items-per-page-custom:has(> .items-per-page-custom-trigger:active),
    .custom-select:has(> .custom-select-trigger:focus-visible),
    .config-native-select:has(> .config-native-select-trigger:focus-visible),
    .items-per-page-custom:has(> .items-per-page-custom-trigger:focus-visible),
    .custom-select.active,
    .config-native-select.open,
    .items-per-page-custom.open,
    input.file-config-input[type="file"]:not(:disabled):is(:focus, :focus-visible, :active),
    .password-input-wrapper:has(> .file-config-input:is(:focus, :focus-visible)),
    .password-input-wrapper:has(.password-toggle-btn:active),
    .password-input-wrapper:has(.password-toggle-btn:focus-visible),
    .file-upload-container:has(> :is(input.file-config-input, textarea.file-content-textarea):is(:focus, :focus-visible)),
    .file-upload-container:has(.btn-upload-inline:active),
    .file-upload-container:has(.btn-upload-inline:focus-visible),
    select.items-per-page-select:not(:disabled):is(:focus-visible, :active, :open),
    button.control-surface:not(:disabled):is(:active, :focus-visible),
    .page-info.control-surface:is(:active, :focus-visible),
    .page-info.control-surface.page-selector-open
) {
    --control-state-accent: var(--control-state-primary);
}

/* STATE 4/4: DISABLED wins because it is declared last. */
.index :where(
    input.config-input:disabled,
    input.file-config-input:disabled,
    .file-content-textarea:disabled,
    .custom-select-search input:disabled,
    .number-input-wrapper:has(:disabled),
    .custom-select:has(> .custom-select-trigger:disabled),
    .config-native-select:has(> .config-native-select-trigger:disabled),
    .items-per-page-custom:has(> .items-per-page-custom-trigger:disabled),
    .custom-select:has(> .custom-select-trigger[aria-disabled="true"]),
    .config-native-select:has(> .config-native-select-trigger[aria-disabled="true"]),
    .items-per-page-custom:has(> .items-per-page-custom-trigger[aria-disabled="true"]),
    .password-input-wrapper:has(> .file-config-input:disabled),
    .file-upload-container:has(:disabled),
    select.items-per-page-select:disabled,
    button.control-surface:disabled
) {
    --control-state-accent: var(--control-state-disabled);
}

/* Unified visible control surface consumers. */
.index :where(
    input.config-input,
    input.file-config-input:not([type="file"]),
    .file-content-textarea,
    .custom-select-search input,
    select.items-per-page-select,
    .custom-select-trigger,
    .config-native-select-trigger,
    .items-per-page-custom-trigger
) {
    border-color: var(--control-state-accent) !important;
    background-color: var(--control-bg) !important;
    color: var(--control-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* End canonical all-dropdown parity. */

/* Number/spinner geometry lives here for Register because shared style.css explicitly excludes this page. */
.index .number-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    max-height: var(--form-control-height);
    border-radius: var(--form-control-radius);
    box-sizing: border-box;
}

.index .number-input-wrapper > :where(.config-input, .file-config-input) {
    position: relative;
    width: 100%;
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    max-height: var(--form-control-height);
    padding-right: 1.5rem;
}

.index .number-input-wrapper.control-size-wrapper {
    width: var(--header-input-width) !important;
    min-width: var(--header-input-width) !important;
    max-width: var(--header-input-width) !important;
    flex: 0 0 var(--header-input-width) !important;
    overflow: hidden;
    background-clip: padding-box;
}

.index .number-input-wrapper.control-size-wrapper > .config-input {
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-radius: inherit !important;
}

.index .custom-spinner-buttons {
    position: absolute;
    top: 0;
    right: 4px;
    bottom: 0;
    z-index: 10;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}

/* Number input and both spinner arrows inherit exactly one wrapper accent. */
.index .number-input-wrapper > :where(.config-input, .file-config-input) {
    --control-state-accent: inherit;
}

.index .custom-spinner-btn {
    width: 14px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    pointer-events: auto;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--control-state-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.index .custom-spinner-btn > svg {
    width: 8px;
    height: 8px;
    fill: none !important;
    stroke: currentColor !important;
}

.index .number-input-wrapper:has(:disabled) .custom-spinner-btn {
    cursor: not-allowed;
}

/* Dropdown chevrons consume the exact same accent as their trigger border. */
.index :where(
    .custom-select-trigger > svg,
    .config-native-select-trigger > .dropdown-trigger-arrow,
    .items-per-page-custom-trigger > .dropdown-trigger-arrow
) {
    color: var(--control-state-accent) !important;
    stroke: currentColor !important;
}

/* Dropdown popup is not a field surface; keep its opaque popup surface but share the same frame accent. */
.index :where(
    .custom-select.active .custom-select-options.show,
    .config-native-select.open .config-native-select-menu,
    .items-per-page-custom.open .items-per-page-custom-menu
) {
    background: var(--dropdown-control-surface) !important;
    background-color: var(--dropdown-control-surface) !important;
    border-left-color: var(--control-state-accent) !important;
    border-right-color: var(--control-state-accent) !important;
    border-bottom-color: var(--control-state-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}

.index .custom-select.active .custom-select-options.show .custom-select-search {
    background: var(--dropdown-control-surface) !important;
    background-color: var(--dropdown-control-surface) !important;
}

.index :where(
    .custom-select-trigger:disabled,
    .config-native-select-trigger:disabled,
    .items-per-page-custom-trigger:disabled,
    .custom-select-trigger[aria-disabled="true"],
    .config-native-select-trigger[aria-disabled="true"],
    .items-per-page-custom-trigger[aria-disabled="true"]
) {
    cursor: not-allowed;
}

/* File input consumes the same Register state accent. */
.index input.file-config-input[type="file"] {
    border-color: var(--control-state-accent) !important;
    background-color: var(--control-bg) !important;
    color: var(--control-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Password composite inherits one wrapper accent. */
.index .password-input-wrapper > .file-config-input {
    --control-state-accent: inherit;
    border-color: var(--control-state-accent) !important;
}

.index .password-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--control-state-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* File-upload composite inherits one wrapper accent. */
.index .file-upload-container > :where(
    input.file-config-input[type="file"],
    textarea.file-content-textarea
) {
    --control-state-accent: inherit;
    border-color: var(--control-state-accent) !important;
    background-color: var(--control-bg) !important;
    box-shadow: none !important;
    outline: none !important;
}

.index .file-upload-container .btn-upload-inline:not(.btn-stop):not(.btn-stopping) {
    background: var(--control-bg) !important;
    background-color: var(--control-bg) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-left: 0 !important;
    border-color: var(--control-state-accent) !important;
    color: var(--control-state-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}


/* Register option-checkbox interactions reuse the canonical hover/primary tokens.
   Idle unchecked border keeps the approved menu-text contrast. */
.index .custom-select-option-checkbox input[type="checkbox"] {
    outline: none !important;
    box-shadow: none !important;
}

.index .custom-select-option-checkbox input[type="checkbox"]:not(:checked):not(:indeterminate):not(:disabled):hover {
    border-color: var(--control-state-hover) !important;
    background-color: var(--control-bg) !important;
}

.index .custom-select-option-checkbox input[type="checkbox"]:not(:disabled):is(:active, :focus-visible) {
    border-color: var(--control-state-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.index .custom-select-option-checkbox input[type="checkbox"]:is(:checked, :indeterminate) {
    background-color: var(--control-state-primary) !important;
    border-color: var(--control-state-primary) !important;
}


@media (max-width: 560px) {
    .index .basic-config .config-group-right .number-input-wrapper,
    .index .basic-config .config-group-right .number-input-wrapper .config-input {
        height: var(--form-control-height) !important;
        min-height: var(--form-control-height) !important;
        max-height: var(--form-control-height) !important;
    }
    .index .basic-config .config-group-right .number-input-wrapper {
        display: inline-flex;
        align-items: stretch;
    }
    .index .basic-config .config-group-right .number-input-wrapper .config-input {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        line-height: 1.2;
    }
    .index .basic-config .config-group-right .custom-spinner-buttons {
        top: 2px;
        bottom: 2px;
        height: auto;
    }
    .index .basic-config .config-group-right .custom-spinner-btn {
        height: 9px;
    }
}

/* Geometry stays structural; interaction state never lives outside this file. */
.index input[type="number"]::-webkit-inner-spin-button,
.index input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    display: none !important;
}


/* Control-surface consumer; state is owned by the same 4-state machine above. */
.index :where(
    button.control-surface,
    .page-info.control-surface
) {
    border: 1px solid var(--control-state-accent) !important;
    border-color: var(--control-state-accent) !important;
    background: var(--control-bg) !important;
    background-color: var(--control-bg) !important;
    color: var(--control-text) !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.index :where(button.control-surface, .page-info.control-surface) :where(svg, path, circle, span) {
    color: inherit;
}