/* Form Styles with Light/Dark Mode Support */

:root {
    /* Light mode colors */
    --form-bg: #ffffff;
    --form-border: #e5e7eb;
    --form-text: #1f2937;
    --form-label: #374151;
    --form-input-bg: #ffffff;
    --form-input-border: #d1d5db;
    --form-input-focus: #3b82f6;
    --form-error: #ef4444;
    --form-success: #10b981;
    --form-warning: #f59e0b;
    --form-info: #3b82f6;
    --form-disabled-bg: #f3f4f6;
    --form-disabled-text: #9ca3af;
    --form-section-bg: #f9fafb;
    --form-section-border: #e5e7eb;
    --form-required: #ef4444;
    --form-placeholder: #9ca3af;
}

[data-theme="dark"] {
    /* Dark mode colors */
    --form-bg: #1f2937;
    --form-border: #374151;
    --form-text: #f3f4f6;
    --form-label: #d1d5db;
    --form-input-bg: #111827;
    --form-input-border: #4b5563;
    --form-input-focus: #60a5fa;
    --form-error: #f87171;
    --form-success: #34d399;
    --form-warning: #fbbf24;
    --form-info: #60a5fa;
    --form-disabled-bg: #374151;
    --form-disabled-text: #6b7280;
    --form-section-bg: #111827;
    --form-section-border: #374151;
    --form-required: #f87171;
    --form-placeholder: #6b7280;
}

/* Form Grid Layout */
.form-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-6;
    background-color: var(--form-bg);
    color: var(--form-text);
}

/* Form Sections */
.form-section {
    @apply col-span-full border-b pb-2 mb-4;
    border-color: var(--form-section-border);
}

.form-section-title {
    @apply text-lg font-semibold flex items-center gap-2;
    color: var(--form-label);
}

/* Form Labels */
.form-label {
    @apply block text-sm font-medium mb-1;
    color: var(--form-label);
}

.form-label-required::after {
    content: " *";
    color: var(--form-required);
}

/* Form Inputs */
.form-input {
    @apply w-full;
}

.form-input input,
.form-input textarea,
.form-input select,
.form-input .e-textbox,
.form-input .e-input,
.form-input .e-ddl,
.form-input .e-dropdown {
    background-color: var(--form-input-bg) !important;
    border-color: var(--form-input-border) !important;
    color: var(--form-text) !important;
}

.form-input input::placeholder,
.form-input textarea::placeholder,
.form-input .e-textbox::placeholder {
    color: var(--form-placeholder) !important;
}

/* Focus states */
.form-input input:focus,
.form-input textarea:focus,
.form-input .e-textbox:focus,
.form-input .e-input-focus {
    border-color: var(--form-input-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Validation states */
.form-input-error input,
.form-input-error .e-textbox,
.form-input-error .e-input {
    border-color: var(--form-error) !important;
}

.form-input-success input,
.form-input-success .e-textbox,
.form-input-success .e-input {
    border-color: var(--form-success) !important;
}

/* Validation messages */
.validation-message {
    @apply text-xs mt-1;
    color: var(--form-error);
}

.validation-message-success {
    color: var(--form-success);
}

.validation-message-warning {
    color: var(--form-warning);
}

/* Form values (readonly display) */
.form-value {
    @apply text-sm py-2;
    color: var(--form-text);
}

.form-value-empty {
    @apply italic;
    color: var(--form-placeholder);
}

/* Checkboxes and Radio buttons */
.form-checkbox,
.form-radio {
    @apply flex items-center gap-2;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    @apply w-4 h-4;
    accent-color: var(--form-input-focus);
}

/* Disabled states */
.form-input-disabled,
.form-input-disabled input,
.form-input-disabled .e-textbox,
.form-input-disabled .e-input {
    background-color: var(--form-disabled-bg) !important;
    color: var(--form-disabled-text) !important;
    cursor: not-allowed !important;
}

/* Syncfusion specific overrides */
.e-input-group {
    background-color: var(--form-input-bg) !important;
}

.e-input-group.e-control-wrapper .e-input {
    background-color: var(--form-input-bg) !important;
    color: var(--form-text) !important;
}

.e-ddl.e-input-group {
    background-color: var(--form-input-bg) !important;
}

.e-ddl .e-input {
    background-color: var(--form-input-bg) !important;
    color: var(--form-text) !important;
}

/* Dropdown styles */
.e-dropdownbase .e-list-item {
    background-color: var(--form-input-bg);
    color: var(--form-text);
}

.e-dropdownbase .e-list-item:hover {
    background-color: var(--form-section-bg);
}

.e-dropdownbase .e-list-item.e-active {
    background-color: var(--form-input-focus);
    color: white;
}

/* Dialog styles */
.e-dialog .e-dlg-header {
    background-color: var(--form-section-bg);
    color: var(--form-text);
    border-bottom: 1px solid var(--form-border);
}

.e-dialog .e-dlg-content {
    background-color: var(--form-bg);
    color: var(--form-text);
}

.e-dialog .e-footer-content {
    background-color: var(--form-section-bg);
    border-top: 1px solid var(--form-border);
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800;
}

[data-theme="dark"] .status-active {
    @apply bg-green-900 text-green-200;
}

.status-inactive {
    @apply bg-red-100 text-red-800;
}

[data-theme="dark"] .status-inactive {
    @apply bg-red-900 text-red-200;
}

.status-info {
    @apply bg-blue-100 text-blue-800;
}

[data-theme="dark"] .status-info {
    @apply bg-blue-900 text-blue-200;
}

/* Address same notice */
.address-same-notice {
    @apply flex items-center gap-2 p-3 rounded-lg;
    background-color: var(--form-section-bg);
    border: 1px solid var(--form-border);
    color: var(--form-info);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-grid {
        @apply grid-cols-1 gap-4 p-4;
    }
    
    .col-span-2,
    .col-span-3,
    .col-span-4 {
        @apply col-span-1;
    }
}