/* =============================================================================
   CustomerDataCollector - MudBlazor Input Field Overrides
   Ensures proper contrast for input fields in both light and dark modes
   ============================================================================= */

/* =============================================================================
   Light Mode: MudBlazor Input Improvements
   ============================================================================= */

/* Input field borders - more visible */
.sh-input-card .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.sh-input-card .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.4) !important;
}

.sh-input-card .mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: #6f3dff !important;
}

/* Input labels - darker for better readability */
.sh-input-card .mud-input-label {
    color: rgba(0, 0, 0, 0.75) !important;
    font-weight: 500 !important;
}

.sh-input-card .mud-input-label-outlined.mud-input-label-inputcontrol {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* Input text - dark color */
.sh-input-card .mud-input {
    color: #1a1a2e !important;
}

.sh-input-card .mud-input > input,
.sh-input-card .mud-input > textarea {
    color: #1a1a2e !important;
}

/* Placeholder text */
.sh-input-card .mud-input > input::placeholder,
.sh-input-card .mud-input > textarea::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* Adornment icons */
.sh-input-card .mud-input-adornment {
    color: rgba(0, 0, 0, 0.6) !important;
}

.sh-input-card .mud-input-adornment .mud-icon-root {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Select fields */
.sh-input-card .mud-select .mud-input {
    color: #1a1a2e !important;
}

.sh-input-card .mud-select-input {
    color: #1a1a2e !important;
}

/* Numeric fields */
.sh-input-card .mud-input-control input[type="number"] {
    color: #1a1a2e !important;
}

/* =============================================================================
   Dark Mode: MudBlazor Input Improvements
   ============================================================================= */

/* Input field borders */
.mud-theme-dark .sh-input-card .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mud-theme-dark .sh-input-card .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.mud-theme-dark .sh-input-card .mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: #a78bfa !important;
}

/* Input labels */
.mud-theme-dark .sh-input-card .mud-input-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mud-theme-dark .sh-input-card .mud-input-label-outlined.mud-input-label-inputcontrol {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Input text */
.mud-theme-dark .sh-input-card .mud-input {
    color: #f1f5f9 !important;
}

.mud-theme-dark .sh-input-card .mud-input > input,
.mud-theme-dark .sh-input-card .mud-input > textarea {
    color: #f1f5f9 !important;
}

/* Placeholder text */
.mud-theme-dark .sh-input-card .mud-input > input::placeholder,
.mud-theme-dark .sh-input-card .mud-input > textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Adornment icons */
.mud-theme-dark .sh-input-card .mud-input-adornment {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-theme-dark .sh-input-card .mud-input-adornment .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Select fields */
.mud-theme-dark .sh-input-card .mud-select .mud-input {
    color: #f1f5f9 !important;
}

.mud-theme-dark .sh-input-card .mud-select-input {
    color: #f1f5f9 !important;
}

/* Numeric fields */
.mud-theme-dark .sh-input-card .mud-input-control input[type="number"] {
    color: #f1f5f9 !important;
}

/* =============================================================================
   Form Section Headers - Ensure proper colors
   ============================================================================= */

/* Light mode headers already defined in scoped CSS */

/* Dark mode form section overrides */
.mud-theme-dark .sh-form-section-title {
    color: #f1f5f9 !important;
}

.mud-theme-dark .sh-form-section-subtitle {
    color: #94a3b8 !important;
}

.mud-theme-dark .sh-form-section-icon {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.1) 100%) !important;
    color: #a78bfa !important;
}

/* =============================================================================
   Renovation Card Inputs (inside .sh-renovation-body)
   ============================================================================= */

/* Light mode */
.sh-renovation-body .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.sh-renovation-body .mud-input-label {
    color: rgba(0, 0, 0, 0.75) !important;
}

.sh-renovation-body .mud-input {
    color: #1a1a2e !important;
}

.sh-renovation-body .mud-input > input,
.sh-renovation-body .mud-input > textarea {
    color: #1a1a2e !important;
}

.sh-renovation-body .mud-input-adornment .mud-icon-root {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Dark mode */
.mud-theme-dark .sh-renovation-body .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mud-theme-dark .sh-renovation-body .mud-input-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mud-theme-dark .sh-renovation-body .mud-input {
    color: #f1f5f9 !important;
}

.mud-theme-dark .sh-renovation-body .mud-input > input,
.mud-theme-dark .sh-renovation-body .mud-input > textarea {
    color: #f1f5f9 !important;
}

.mud-theme-dark .sh-renovation-body .mud-input-adornment .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}