/**
 * Forms Dark Mode Support
 * Comprehensive dark mode styles for dynamic forms
 */

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

/* Dark mode: Form container */
.dark .dynamic-form-container {
    background: rgb(17, 24, 39);
    color: rgb(243, 244, 246);
    min-height: fit-content;
    height: auto;
}

/* Dark mode: Field library & canvas */
.dark .field-library,
.dark .form-canvas,
.dark .field-properties,
.dark .form-preview-wrapper {
    background: rgb(31, 41, 55);
    color: rgb(243, 244, 246);
}

.dark .canvas-header {
    border-bottom-color: rgb(55, 65, 81);
}

/* Dark mode: Input fields */
.dark .form-input,
.dark .form-select,
.dark .form-textarea {
    background: rgb(55, 65, 81);
    color: rgb(243, 244, 246);
    border-color: rgb(75, 85, 99);
}

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
    border-color: #667eea;
    background: rgb(55, 65, 81);
}

.dark .form-input::placeholder,
.dark .form-select::placeholder,
.dark .form-textarea::placeholder {
    color: rgb(156, 163, 175);
}

/* Dark mode: Field items */
.dark .field-item {
    background: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
}

.dark .field-item:hover {
    border-color: #667eea;
    background: rgb(55, 65, 81);
}

.dark .field-item.selected {
    background: rgba(102, 126, 234, 0.15);
}

/* Dark mode: Drop zone */
.dark .drop-zone {
    background: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
}

.dark .drop-zone:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.dark .drop-zone.drag-over {
    background: rgba(102, 126, 234, 0.2);
}

/* Dark mode: Empty state */
.dark .empty-state {
    color: rgb(156, 163, 175);
}

/* Dark mode: File upload */
.dark .file-item {
    background: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
}

.dark .file-icon {
    background: rgb(75, 85, 99);
}

.dark .file-name {
    color: rgb(243, 244, 246);
}

.dark .file-meta {
    color: rgb(156, 163, 175);
}

/* Dark mode: Progress indicator */
.dark .step-number {
    background: rgb(75, 85, 99);
    color: rgb(156, 163, 175);
}

.dark .step-number.bg-primary-600 {
    background: #667eea !important;
    color: white !important;
}

.dark .step-number.bg-green-500 {
    background: #10b981 !important;
    color: white !important;
}

/* Dark mode: Buttons */
.dark .btn-secondary {
    background: rgb(55, 65, 81);
    color: rgb(243, 244, 246);
}

.dark .btn-secondary:hover {
    background: rgb(75, 85, 99);
}

/* Dark mode: Error states */
.dark .form-input.error,
.dark .form-select.error,
.dark .form-textarea.error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.dark .field-error-message,
.dark .file-upload-error {
    background: rgba(239, 68, 68, 0.15);
    border-left-color: #ef4444;
    color: rgb(252, 165, 165);
}

.dark .field-error-message p {
    color: rgb(252, 165, 165);
}

/* Dark mode: Status badges */
.dark .file-status-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: rgb(167, 243, 208);
}

.dark .file-status-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: rgb(252, 165, 165);
}

/* Dark mode: Progress bar */
.dark .progress-bar {
    background: rgb(75, 85, 99);
}

/* Dark mode: Step tabs */
.dark .step-tab {
    background: rgb(55, 65, 81);
    color: rgb(243, 244, 246);
}

.dark .step-tab:hover {
    background: rgb(75, 85, 99);
}

/* Dark mode: Borders */
.dark .border-t {
    border-top-color: rgb(55, 65, 81);
}

/* Dark mode: Text colors */
.dark .text-gray-500 {
    color: rgb(156, 163, 175);
}

.dark .text-gray-600 {
    color: rgb(209, 213, 219);
}

.dark .text-gray-700 {
    color: rgb(229, 231, 235);
}

.dark .text-gray-900 {
    color: rgb(243, 244, 246);
}

/* Dark mode: File remove button */
.dark .file-remove-btn {
    background: rgba(239, 68, 68, 0.2);
}

.dark .file-remove-btn:hover:not(:disabled) {
    background: #ef4444;
    color: white;
}

/* Dark mode: Required badge */
.dark .required-badge {
    background: rgba(251, 191, 36, 0.2);
    color: rgb(252, 211, 77);
}

/* Dark mode: Agreement field */
.dark .agreement-field {
    background: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
}