/* SAP Brand Colors and Theme Variables */
:root {
    /* Primary Brand Colors */
    --sap-charcoal: #465362;
    --sap-beaver: #AF8C6E;
    --sap-blue: #5B85AA;

    /* Extended Palette */
    --sap-light-gray: #f9fafb;
    --sap-border: #e5e7eb;
    --sap-border-light: #d1d5db;
    --sap-text-secondary: #6b7280;

    /* Brand-Coherent Danger Red (Dusty Rose Red) */
    --sap-danger-red: #A85656;
    --sap-danger-red-light: rgba(168, 86, 86, 0.1);

    /* Semantic Colors Using Brand Palette */
    --sap-primary: var(--sap-blue);
    --sap-secondary: var(--sap-beaver);
    --sap-success: var(--sap-blue);
    --sap-info: var(--sap-beaver);
    --sap-warning: var(--sap-beaver);
    --sap-danger: var(--sap-danger-red);
    --sap-dark: var(--sap-charcoal);

    /* Light Variations for Backgrounds */
    --sap-primary-light: rgba(91, 133, 170, 0.1);
    --sap-secondary-light: rgba(175, 140, 110, 0.1);
    --sap-success-light: rgba(91, 133, 170, 0.1);
    --sap-info-light: rgba(175, 140, 110, 0.1);
    --sap-warning-light: rgba(175, 140, 110, 0.15);
    --sap-danger-light: var(--sap-danger-red-light);

    /* Bootstrap Override Variables */
    --bs-primary: var(--sap-primary);
    --bs-secondary: var(--sap-secondary);
    --bs-success: var(--sap-success);
    --bs-info: var(--sap-info);
    --bs-warning: var(--sap-warning);
    --bs-danger: var(--sap-danger);
    --bs-dark: var(--sap-dark);
}

/* Base Typography - Using Georgia Pro as primary per brand guidelines */
body {
    background: var(--sap-light-gray);
    font-family: Georgia, 'Georgia Pro', serif;
    color: var(--sap-charcoal);
}

.container {
    max-width: 900px;
    margin: 50px auto;
    background: white;
    padding: 10px 60px 50px 60px;
    border: 1px solid var(--sap-border);
    /* No shadow for cleaner form experience */
}

/* Responsive padding for smaller screens */
@media (max-width: 768px) {
    .container {
        padding: 10px 30px 40px 30px;
        margin: 30px auto;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 10px 20px 30px 20px;
        margin: 20px auto;
    }
}

/* Logo and Header Styling */
.logo {
    text-align: center;
    margin-bottom: 10px;
}

.logo img {
    max-width: 200px;
    height: auto;
}

/* Headers continue using Georgia Pro as primary font */
h1, h2, h3 {
    font-family: Georgia, 'Georgia Pro', serif;
    color: var(--sap-charcoal);
}

/* Success message */
.success-message {
    display: none;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--sap-text-secondary);
}

/* Button Styling with SAP Brand Colors */
.btn-primary {
    background: var(--sap-blue);
    border: 1px solid var(--sap-blue);
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    transition: background-color 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
    background: #4a7090;
    border-color: #4a7090;
}

.btn-primary:focus {
    background: var(--sap-blue);
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.25);
}

.btn-primary:disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--sap-border-light);
    color: var(--sap-charcoal);
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.15s ease;
}

.btn-secondary:hover {
    background: var(--sap-light-gray);
    border-color: var(--sap-beaver);
    color: var(--sap-charcoal);
}

.btn-danger {
    background: var(--sap-danger);
    border: 1px solid var(--sap-danger);
    color: white;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 400;
}

.btn-danger:hover {
    border-color: #8B4444;
    background: #8B4444;
    color: white;
}

/* Form Controls with SAP styling - Using Antic as secondary font for UI elements */
.form-control {
    border: 1px solid var(--sap-border-light);
    font-size: 14px;
    color: var(--sap-charcoal);
    font-family: 'Antic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-control:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15);
}

/* Normalize Choices.js dropdowns */
.choices__inner {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    border: 1px solid var(--sap-border-light);
    font-family: 'Antic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.choices__inner:focus-within {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15);
}

/* Prevent height expansion after selection */
.choices__list--single {
    padding: 0;
}

.choices__list--single .choices__item {
    padding: 0;
    line-height: 1.5;
    color: var(--sap-charcoal);
}

.choices__button {
    padding: 0 8px;
    margin: 0 0 0 4px;
}

/* Select dropdown arrow */
select.form-control {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23465362' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Labels with SAP colors - Using Antic as secondary font for form labels */
label {
    font-weight: 400;
    color: var(--sap-charcoal);
    font-family: 'Antic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Compact DataGrid styling with brand colors */
.table.datagrid-table.table-bordered {
    font-size: 13px;
    border: 1px solid var(--sap-border) !important;
}

.table.datagrid-table.table-bordered th,
.table.datagrid-table.table-bordered td {
    padding: 6px 10px;
    vertical-align: middle;
    border: 1px solid var(--sap-border) !important;
    border-width: 1px !important;
    color: var(--sap-charcoal);
}

.table.datagrid-table.table-bordered th {
    font-weight: 500;
    font-size: 13px;
    background-color: var(--sap-light-gray);
    color: var(--sap-charcoal);
}

.table.datagrid-table.table-bordered .form-control {
    padding: 4px 8px;
    font-size: 13px;
    min-height: 32px;
}

.table.datagrid-table.table-bordered textarea.form-control {
    min-height: 32px;
    padding: 4px 8px;
}

.table.datagrid-table.table-bordered .choices {
    font-size: 13px;
}

.table.datagrid-table.table-bordered .choices .form-control {
    min-height: 32px;
    padding: 4px 8px;
}

.table.datagrid-table.table-bordered .formio-button-remove-row,
.table.datagrid-table.table-bordered .formio-drag-button {
    padding: 4px 8px;
    font-size: 12px;
}

.table.datagrid-table.table-bordered .formio-button-add-row {
    padding: 6px 16px;
    font-size: 13px;
    background: var(--sap-blue);
    border-color: var(--sap-blue);
}

.table.datagrid-table.table-bordered .formio-button-add-row:hover {
    background: #4a7090;
    border-color: #4a7090;
}

/* Reusable DataGrid column size classes */
.col-small {
    width: 90px;
    max-width: 90px;
}

.col-medium {
    width: 130px;
    max-width: 130px;
}

.col-big {
    width: 35%;
    min-width: 250px;
}

/* Make cells respect their custom widths */
.table.datagrid-table.table-bordered td[class*="col-"],
.table.datagrid-table.table-bordered th[class*="col-"] {
    white-space: nowrap;
    overflow: visible;
}

/* Big columns should wrap text */
.table.datagrid-table.table-bordered .col-big {
    white-space: normal;
}

/* Better dropdown arrows with SAP color */
.table.datagrid-table.table-bordered select.form-control {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23465362' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Hide asterisks from dropdown option text in DataGrid */
.table.datagrid-table.table-bordered select option {
    color: inherit;
}

.table.datagrid-table.table-bordered select option::before,
.table.datagrid-table.table-bordered select option::after {
    content: none !important;
    display: none !important;
}

/* Hide required field labels in DataGrid */
.table.datagrid-table label.field-required,
.table.datagrid-table .control-label--hidden {
    display: none !important;
}

/* Elegant delete button with subtle hover */
.formio-button-remove-row {
    background: transparent;
    border: 1px solid var(--sap-border);
    color: var(--sap-text-secondary) !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 3px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.formio-button-remove-row:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

.formio-button-remove-row * {
    display: none !important;
}

.formio-button-remove-row::after {
    content: "×";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    display: block !important;
}

/* Hide Form.io's "Submission Complete" message */
[ref="buttonMessageContainer"] {
    display: none !important;
}

/* Hide checkmark icon on submit button success state */
.btn.submit-success::before,
.btn.submit-success .fa-check,
.btn.submit-success .glyphicon-ok {
    display: none !important;
}

/* Wizard Navigation with SAP colors */
.pagination[role="tablist"] {
    display: flex;
    gap: 3px;
    margin-bottom: 24px;
    background: var(--sap-light-gray);
    padding: 4px;
    border-radius: 7px;
}

.pagination[role="tablist"] .page-item {
    flex: 1;
    transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination[role="tablist"] .page-item.active {
    flex: 2;
}

.pagination[role="tablist"] .page-link {
    width: 100%;
    text-align: center;
    padding: 10px 10px;
    font-size: 13px;
    line-height: 1.3;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--sap-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 5px;
    font-family: 'Antic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pagination[role="tablist"] .page-link:hover:not(.active .page-link) {
    background: white;
    color: var(--sap-charcoal);
}

.pagination[role="tablist"] .page-item.active .page-link {
    background: white;
    color: var(--sap-charcoal);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    border: 1px solid var(--sap-border);
}

/* Mobile */
@media (max-width: 768px) {
    .pagination[role="tablist"] {
        flex-direction: column;
        gap: 8px;
    }

    .pagination[role="tablist"] .page-item,
    .pagination[role="tablist"] .page-item.active {
        flex: none;
    }

    .pagination[role="tablist"] .page-link {
        text-align: left;
        padding: 14px 18px;
        white-space: normal;
        min-height: auto;
        border-radius: 4px;
    }
}

/* Light background for code blocks and displays */
.bg-light {
    background-color: var(--sap-light-gray) !important;
}

/* Radio buttons with SAP styling */
.form-check-input:checked {
    background-color: var(--sap-blue);
    border-color: var(--sap-blue);
}

.form-check-input:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15);
}

/* Completely disable invalid styling for radio buttons and checkboxes */
.form-check-input.is-invalid,
.form-check-input.is-invalid:checked,
.form-check-input.is-invalid:focus,
.form-radio .form-check-input.is-invalid,
.radio .form-check-input.is-invalid {
    border-color: #dee2e6 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-right: 0 !important;
}

.form-check-input.is-invalid:checked,
.form-radio .form-check-input.is-invalid:checked,
.radio .form-check-input.is-invalid:checked {
    background-color: var(--sap-blue) !important;
    border-color: var(--sap-blue) !important;
}

.form-check-input.is-invalid:focus,
.form-radio .form-check-input.is-invalid:focus,
.radio .form-check-input.is-invalid:focus {
    border-color: var(--sap-blue) !important;
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15) !important;
}

/* Hide invalid feedback for radio buttons */
.form-radio .invalid-feedback,
.radio .invalid-feedback,
.form-check .invalid-feedback {
    display: none !important;
}

/* Remove invalid styling from radio button wrappers */
.form-check.is-invalid,
.form-radio.is-invalid,
.radio.is-invalid,
div[class*="radio"].is-invalid,
div[class*="form-check"].is-invalid {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Test data selector with brand styling */
#testDataSelector label {
    color: var(--sap-charcoal);
    font-family: 'Antic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#testDataSelector select {
    border-color: var(--sap-border-light);
    color: var(--sap-charcoal);
}

#testDataSelector select:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15);
}

/* ============================================= */
/* Bootstrap Component Theme Overrides           */
/* ============================================= */

/* Alert Components */
.alert-primary {
    background-color: var(--sap-primary-light);
    border-color: var(--sap-primary);
    color: var(--sap-primary);
}

.alert-secondary {
    background-color: var(--sap-secondary-light);
    border-color: var(--sap-secondary);
    color: var(--sap-secondary);
}

.alert-success {
    background-color: var(--sap-success-light);
    border-color: var(--sap-success);
    color: var(--sap-success);
}

.alert-info {
    background-color: var(--sap-info-light);
    border-color: var(--sap-info);
    color: var(--sap-charcoal);
}

.alert-warning {
    background-color: var(--sap-warning-light);
    border-color: var(--sap-warning);
    color: var(--sap-charcoal);
}

.alert-danger {
    background-color: var(--sap-danger-light);
    border-color: var(--sap-danger);
    color: var(--sap-danger);
}

/* Badge Components */
.badge.bg-primary {
    background-color: var(--sap-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--sap-secondary) !important;
}

.badge.bg-success {
    background-color: var(--sap-success) !important;
}

.badge.bg-info {
    background-color: var(--sap-info) !important;
    color: white !important;
}

.badge.bg-warning {
    background-color: var(--sap-warning) !important;
    color: white !important;
}

.badge.bg-danger {
    background-color: var(--sap-danger) !important;
}

/* Text Color Utilities */
.text-primary {
    color: var(--sap-primary) !important;
}

.text-secondary {
    color: var(--sap-secondary) !important;
}

.text-success {
    color: var(--sap-success) !important;
}

.text-info {
    color: var(--sap-info) !important;
}

.text-warning {
    color: var(--sap-warning) !important;
}

.text-danger {
    color: var(--sap-danger) !important;
}

/* Background Color Utilities */
.bg-primary {
    background-color: var(--sap-primary) !important;
}

.bg-secondary {
    background-color: var(--sap-secondary) !important;
}

.bg-success {
    background-color: var(--sap-success) !important;
}

.bg-info {
    background-color: var(--sap-info) !important;
}

.bg-warning {
    background-color: var(--sap-warning) !important;
}

.bg-danger {
    background-color: var(--sap-danger) !important;
}

/* Border Color Utilities */
.border-primary {
    border-color: var(--sap-primary) !important;
}

.border-secondary {
    border-color: var(--sap-secondary) !important;
}

.border-success {
    border-color: var(--sap-success) !important;
}

.border-info {
    border-color: var(--sap-info) !important;
}

.border-warning {
    border-color: var(--sap-warning) !important;
}

.border-danger {
    border-color: var(--sap-danger) !important;
}

/* ============================================= */
/* Custom Utility Classes for JavaScript         */
/* ============================================= */

/* Notification Styles (for JS-generated notifications) */
.sap-notification {
    background: var(--sap-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
}

.sap-notification.success {
    background: var(--sap-success);
}

.sap-notification.error {
    background: var(--sap-danger);
}

.sap-notification.info {
    background: var(--sap-info);
}

.sap-notification.warning {
    background: var(--sap-warning);
}

/* Modal Styles */
.modal-content {
    border-color: var(--sap-border);
}

.modal-header {
    border-bottom-color: var(--sap-border);
}

.modal-footer {
    border-top-color: var(--sap-border);
}

/* Card Components */
.card {
    border-color: var(--sap-border);
}

.card-header {
    background-color: var(--sap-light-gray);
    border-bottom-color: var(--sap-border);
}

/* List Group */
.list-group-item {
    border-color: var(--sap-border);
}

.list-group-item.active {
    background-color: var(--sap-primary);
    border-color: var(--sap-primary);
}

/* Progress Bars */
.progress {
    background-color: var(--sap-light-gray);
}

.progress-bar {
    background-color: var(--sap-primary);
}

.progress-bar.bg-success {
    background-color: var(--sap-success) !important;
}

.progress-bar.bg-info {
    background-color: var(--sap-info) !important;
}

.progress-bar.bg-warning {
    background-color: var(--sap-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--sap-danger) !important;
}

/* Spinners */
.spinner-border,
.spinner-grow {
    color: var(--sap-primary);
}

.text-primary .spinner-border,
.text-primary .spinner-grow {
    color: var(--sap-primary) !important;
}

/* Nav Components */
.nav-link {
    color: var(--sap-charcoal);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--sap-primary);
}

.nav-link.active {
    color: var(--sap-primary);
}

.nav-tabs .nav-link.active {
    border-color: var(--sap-border) var(--sap-border) white;
}

.nav-tabs {
    border-bottom-color: var(--sap-border);
}

/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sap-text-secondary);
}

.breadcrumb-item.active {
    color: var(--sap-text-secondary);
}

/* Dropdown */
.dropdown-menu {
    border-color: var(--sap-border);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--sap-light-gray);
    color: var(--sap-primary);
}

.dropdown-divider {
    border-top-color: var(--sap-border);
}

/* Table */
.table {
    border-color: var(--sap-border);
}

.table-bordered th,
.table-bordered td {
    border-color: var(--sap-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--sap-light-gray);
}

.table-hover tbody tr:hover {
    background-color: var(--sap-light-gray);
}

/* Utility Classes for SweetAlert and other JS libraries */
.swal2-popup {
    font-family: Georgia, 'Georgia Pro', serif !important;
}

.swal2-confirm {
    background-color: var(--sap-primary) !important;
}

.swal2-cancel {
    background-color: var(--sap-charcoal) !important;
}

/* Custom success/error states for inline styles */
.sap-success-text {
    color: var(--sap-success) !important;
}

.sap-error-text {
    color: var(--sap-danger) !important;
}

.sap-success-bg {
    background-color: var(--sap-success-light) !important;
}

.sap-error-bg {
    background-color: var(--sap-danger-light) !important;
}

/* Utility border styles */
.sap-border-success {
    border-color: var(--sap-success) !important;
}

.sap-border-error {
    border-color: var(--sap-danger) !important;
}

/* Custom class for test status (replacing inline green color) */
.test-success {
    color: var(--sap-success);
    font-weight: bold;
}

/* ============================================= */
/* Form.io Component Overrides                   */
/* ============================================= */

/* Form.io Error States - Minimalist approach */
/* Simple text color change for error messages */
.formio-error-wrapper,
.formio-error-wrapper .help-block,
.formio-errors .help-block,
.has-error .help-block,
.form-text.error {
    color: var(--sap-danger) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Error wrapper with subtle brand-colored background */
.formio-error-wrapper:not(:empty) {
    background-color: var(--sap-danger-light) !important;
    border-radius: 4px;
    padding: 8px 12px !important;
    margin-top: 0.5rem;
}

/* Form.io Warning States - Minimalist approach */
/* Simple text color for warning messages */
.formio-warning-wrapper,
.formio-warning-wrapper .help-block,
.formio-warning .help-block,
.has-warning .help-block,
.form-text.warning {
    color: var(--sap-warning) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Warning wrapper with subtle brand-colored background */
.formio-warning-wrapper:not(:empty) {
    background-color: var(--sap-warning-light) !important;
    border-radius: 4px;
    padding: 8px 12px !important;
    margin-top: 0.5rem;
}

/* Has Error Field Styling - Only when has-error class is present */
.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--sap-danger) !important;
    box-shadow: 0 0 0 2px rgba(168, 86, 86, 0.15) !important;
}

.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: var(--sap-danger) !important;
}

/* Required Field Indicators */
.field-required:after,
.formio-component-label .field-required:after {
    content: " *";
    color: var(--sap-danger) !important;
    font-weight: bold;
}

/* Invalid Input States - Only apply to explicitly invalid inputs */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.formio-component.has-error input,
.formio-component.has-error select,
.formio-component.has-error textarea {
    border-color: var(--sap-danger) !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A85656'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A85656' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus,
.formio-component.has-error input:focus,
.formio-component.has-error select:focus,
.formio-component.has-error textarea:focus {
    border-color: var(--sap-danger) !important;
    box-shadow: 0 0 0 2px rgba(168, 86, 86, 0.25) !important;
}

/* Invalid Feedback Messages */
.invalid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--sap-danger) !important;
    font-weight: 500;
}

/* Form.io Submit Button Error State */
.btn.submit-fail::before,
.formio-submit-error::before {
    content: "⚠ ";
    color: var(--sap-danger);
}

.formio-submit-error {
    background-color: var(--sap-danger) !important;
    border-color: var(--sap-danger) !important;
}

/* Form.io Alert Messages - Minimalist approach */
.formio-alert-danger,
.formio-errors.alert-danger {
    background-color: var(--sap-danger-light) !important;
    border: 1px solid var(--sap-danger) !important;
    border-left: 4px solid var(--sap-danger) !important;
    color: var(--sap-danger) !important;
}

.formio-alert-warning {
    background-color: var(--sap-warning-light) !important;
    border: 1px solid var(--sap-warning) !important;
    border-left: 4px solid var(--sap-warning) !important;
    color: var(--sap-charcoal) !important;
}

.formio-alert-info {
    background-color: var(--sap-info-light) !important;
    border-color: var(--sap-info) !important;
    color: var(--sap-charcoal) !important;
}

.formio-alert-success {
    background-color: var(--sap-success-light) !important;
    border-color: var(--sap-success) !important;
    color: var(--sap-success) !important;
}

/* Form.io Loading State */
.formio-loading {
    color: var(--sap-primary) !important;
}

.formio-loading::before {
    border-color: var(--sap-light-gray) !important;
    border-top-color: var(--sap-primary) !important;
}

/* Form.io Disabled State */
.formio-disabled-input,
.formio-component-disabled input,
.formio-component-disabled select,
.formio-component-disabled textarea {
    background-color: var(--sap-light-gray) !important;
    color: var(--sap-text-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* Form.io Focus States - Only for non-error inputs */
.formio-component:not(.has-error) input:focus,
.formio-component:not(.has-error) select:focus,
.formio-component:not(.has-error) textarea:focus {
    border-color: var(--sap-primary) !important;
    box-shadow: 0 0 0 2px rgba(91, 133, 170, 0.15) !important;
    outline: none !important;
}

/* Form.io Placeholder Text */
.formio-component input::placeholder,
.formio-component textarea::placeholder {
    color: var(--sap-text-secondary) !important;
    opacity: 0.6;
}