/* Tier 1: Styled native elements for progressive enhancement */
/* Activation markers:
   - .jsgui-enhance: opt-in activation for a native element.
   - .jsgui-no-enhance: opt-out activation for a native element or subtree.
   - .jsgui-form: activates supported native inputs within the form scope.
   - .jsgui-input / .jsgui-select / .jsgui-button / .jsgui-checkbox / .jsgui-radio:
     styling hooks for native controls without activation. */

:root {
    --jsgui-font-family: inherit;
    --jsgui-input-font-size: 14px;
    --jsgui-input-padding: 8px 12px;
    --jsgui-input-border: 1px solid #c5c5c5;
    --jsgui-input-radius: 4px;
    --jsgui-input-bg: #ffffff;
    --jsgui-input-color: #222222;
    --jsgui-focus-color: #1c6fb8;
    --jsgui-focus-ring: rgba(28, 111, 184, 0.25);
    --jsgui-input-disabled-bg: #f2f2f2;
    --jsgui-input-disabled-color: #9a9a9a;
    --jsgui-error-color: #c0392b;
    --jsgui-success-color: #2e8b57;
    --jsgui-button-font-size: 14px;
    --jsgui-button-padding: 8px 16px;
    --jsgui-button-border: 1px solid #c5c5c5;
    --jsgui-button-radius: 4px;
    --jsgui-button-bg: #f5f5f5;
    --jsgui-button-color: #222222;
    --jsgui-button-hover-bg: #e9e9e9;
    --jsgui-button-active-bg: #dedede;
    --jsgui-accent-color: #1c6fb8;
}

input.jsgui-input,
input.jsgui-enhance,
textarea.jsgui-input,
textarea.jsgui-enhance,
.jsgui-form input[type="text"],
.jsgui-form input[type="email"],
.jsgui-form input[type="password"],
.jsgui-form input[type="tel"],
.jsgui-form input[type="url"],
.jsgui-form input[type="number"],
.jsgui-form textarea {
    box-sizing: border-box;
    font-family: var(--jsgui-font-family, inherit);
    font-size: var(--jsgui-input-font-size, 14px);
    padding: var(--jsgui-input-padding, 8px 12px);
    border: var(--jsgui-input-border, 1px solid #c5c5c5);
    border-radius: var(--jsgui-input-radius, 4px);
    background: var(--jsgui-input-bg, #ffffff);
    color: var(--jsgui-input-color, #222222);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.jsgui-input:focus,
input.jsgui-enhance:focus,
textarea.jsgui-input:focus,
textarea.jsgui-enhance:focus,
.jsgui-form input:focus,
.jsgui-form textarea:focus,
.jsgui-form select:focus {
    outline: none;
    border-color: var(--jsgui-focus-color, #1c6fb8);
    box-shadow: 0 0 0 3px var(--jsgui-focus-ring, rgba(28, 111, 184, 0.25));
}

input.jsgui-input:disabled,
input.jsgui-enhance:disabled,
textarea.jsgui-input:disabled,
textarea.jsgui-enhance:disabled,
.jsgui-form input:disabled,
.jsgui-form textarea:disabled,
.jsgui-form select:disabled {
    background: var(--jsgui-input-disabled-bg, #f2f2f2);
    color: var(--jsgui-input-disabled-color, #9a9a9a);
    cursor: not-allowed;
}

input.jsgui-invalid,
textarea.jsgui-invalid,
select.jsgui-invalid,
.jsgui-form input:invalid,
.jsgui-form textarea:invalid,
.jsgui-form select:invalid {
    border-color: var(--jsgui-error-color, #c0392b);
}

input.jsgui-valid,
textarea.jsgui-valid,
select.jsgui-valid,
.jsgui-form input.valid,
.jsgui-form textarea.valid,
.jsgui-form select.valid {
    border-color: var(--jsgui-success-color, #2e8b57);
}

button.jsgui-button,
.jsgui-form button {
    font-family: var(--jsgui-font-family, inherit);
    font-size: var(--jsgui-button-font-size, 14px);
    padding: var(--jsgui-button-padding, 8px 16px);
    border: var(--jsgui-button-border, 1px solid #c5c5c5);
    border-radius: var(--jsgui-button-radius, 4px);
    background: var(--jsgui-button-bg, #f5f5f5);
    color: var(--jsgui-button-color, #222222);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

button.jsgui-button:hover,
.jsgui-form button:hover {
    background: var(--jsgui-button-hover-bg, #e9e9e9);
}

button.jsgui-button:active,
.jsgui-form button:active {
    background: var(--jsgui-button-active-bg, #dedede);
}

select.jsgui-select,
.jsgui-form select {
    appearance: none;
    font-family: var(--jsgui-font-family, inherit);
    font-size: var(--jsgui-input-font-size, 14px);
    padding: var(--jsgui-input-padding, 8px 12px);
    padding-right: 32px;
    border: var(--jsgui-input-border, 1px solid #c5c5c5);
    border-radius: var(--jsgui-input-radius, 4px);
    background-color: var(--jsgui-input-bg, #ffffff);
}

input[type="checkbox"].jsgui-checkbox,
input[type="radio"].jsgui-radio,
.jsgui-form input[type="checkbox"],
.jsgui-form input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--jsgui-accent-color, #1c6fb8);
}