[data-theme] .icon.has-text-primary,
[data-theme] .has-text-primary {
    color: var(--primary) !important;
}

[data-theme] .icon.has-text-success,
[data-theme] .has-text-success {
    color: var(--success) !important;
}

[data-theme] .icon.has-text-info,
[data-theme] .has-text-info {
    color: var(--info) !important;
}

[data-theme] .icon.has-text-warning,
[data-theme] .has-text-warning {
    color: var(--warning) !important;
}

[data-theme] .icon.has-text-danger,
[data-theme] .has-text-danger {
    color: var(--danger) !important;
}

[data-theme] .has-text-primary-alt {
    color: var(--primary-alt) !important;
}

/* Base inputs */

[data-theme] input,
[data-theme] select,
[data-theme] textarea {
    background-color: var(--input-bg, var(--surface));
    color: var(--input-text, var(--text-primary));
    border-color: var(--input-border, var(--border));
}

    /* Focus */

    [data-theme] input:focus,
    [data-theme] select:focus,
    [data-theme] textarea:focus {
        border-color: var(--input-focus-border, var(--primary));
        box-shadow: var(--input-focus-shadow, 0 0 0 0.125em color-mix(in srgb, var(--primary) 28%, transparent));
    }

    /* Placeholder */

    [data-theme] input::placeholder,
    [data-theme] textarea::placeholder {
        color: var(--input-placeholder-color, var(--text-secondary));
    }

[data-theme] input[type="checkbox"] {
    accent-color: var(--button-info-bg, var(--info));
    outline: none;
    outline-color: color-mix(in srgb, var(--button-info-bg, var(--info)) 40%, transparent);
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

    [data-theme] input[type="checkbox"]::-moz-focus-inner {
        border: 0;
    }

[data-theme] label.checkbox input:checked + span,
[data-theme] label.checkbox.is-active span {
    color: var(--button-info-bg, var(--info));
    font-weight: 700;
}

[data-theme] input[type="checkbox"]:checked {
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--success, var(--button-info-bg, var(--info))) 22%, transparent);
    border-color: var(--success, var(--button-info-bg, var(--info)));
}

[data-theme] input[type="checkbox"]:focus,
[data-theme] input[type="checkbox"].focus,
[data-theme] input[type="checkbox"]:active {
    outline: none;
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--success, var(--button-info-bg, var(--info))) 28%, transparent);
    border-color: color-mix(in srgb, var(--success, var(--button-info-bg, var(--info))) 60%, var(--border) 40%);
    border-radius: var(--radius-sm);
}

[data-theme] .required {
    color: var(--field-required-color, var(--danger));
    font-weight: 700;
    margin-left: 0.05rem;
    line-height: 1.8;
}

/* Show required indicator via aria-required so views don't need inline spans */
[data-theme] label[aria-required="true"]::after,
label[aria-required="true"]::after {
    content: " *";
    color: var(--field-required-color, var(--danger));
    margin-left: .25rem;
    font-weight: 700;
}

/* Readonly inputs */

[data-theme] input[readonly],
[data-theme] textarea[readonly] {
    background-color: var(--surface-alt);
    color: var(--text-primary);
    border-color: var(--border);
    cursor: default;
}

    /* Disable focus effect */

    [data-theme] input[readonly]:focus,
    [data-theme] textarea[readonly]:focus {
        box-shadow: none;
        border-color: var(--border);
    }

[data-theme] input:disabled,
[data-theme] select:disabled,
[data-theme] textarea:disabled {
    background-color: var(--surface-alt);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.8;
}

[data-theme] .file-cta {
    background-color: var(--surface-alt, #f5f5f5);
    border-color: var(--border, #dbdbdb);
    color: var(--text-primary, #111827);
}

[data-theme] .file-name {
    background-color: var(--surface, #fff);
    border-color: var(--border, #dbdbdb);
    color: var(--text-secondary, #6b7280);
}

[data-theme] .file-cta:hover,
[data-theme] .file.is-hovered .file-cta,
[data-theme] .file-label:hover .file-cta {
    background-color: var(--surface, #fff);
    border-color: var(--border, #dbdbdb);
    color: var(--text-primary, #111827);
}

    [data-theme] .file-cta:hover .file-icon,
    [data-theme] .file.is-hovered .file-cta .file-icon,
    [data-theme] .file-label:hover .file-cta .file-icon,
    [data-theme] .file-cta:hover .file-label,
    [data-theme] .file.is-hovered .file-cta .file-label,
    [data-theme] .file-label:hover .file-cta .file-label {
        color: var(--text-primary, #111827);
    }