/**
 * Form Component
 * ==============
 * Naming: input-field, select-field, textarea-field, field-wrapper, field-label
 * NO form-control, NO form-group, NO form-select, NO Bootstrap naming
 * 
 * Uses CSS custom properties from variables.css with hardcoded fallbacks
 * Includes dark theme overrides via [data-theme="dark"]
 * 
 * Requirements: 5.3, 5.4, 6.2, 6.3
 */

/* === FIELD WRAPPER === */

.field-wrapper {
    margin-bottom: var(--space-4, 1rem);
    position: relative;
}

.field-wrapper:last-child {
    margin-bottom: 0;
}

/* === FIELD LABEL === */

.field-label {
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    line-height: var(--leading-tight, 1.25);
    color: var(--color-text, #1f2937);
}

.field-label.required::after {
    content: " *";
    color: var(--color-danger, #ef4444);
    font-weight: var(--weight-bold, 700);
}

/* === BASE INPUT STYLES === */

.input-field,
.select-field,
.textarea-field {
    display: block;
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-text, #1f2937);
    background-color: var(--color-bg-input, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: all var(--transition-speed, 250ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-field:focus,
.select-field:focus,
.textarea-field:focus {
    outline: none;
    border-color: var(--color-border-focus, #6366f1);
    box-shadow: 0 0 0 0.2rem var(--color-accent-muted, rgba(99, 102, 241, 0.25));
    background-color: var(--color-bg-input, #ffffff);
}

.input-field:hover:not(:disabled):not(:focus),
.select-field:hover:not(:disabled):not(:focus),
.textarea-field:hover:not(:disabled):not(:focus) {
    border-color: var(--color-text-muted, #9ca3af);
}

.input-field::placeholder,
.textarea-field::placeholder {
    color: var(--color-text-muted, #9ca3af);
    opacity: 1;
}

.input-field:disabled,
.select-field:disabled,
.textarea-field:disabled {
    background-color: var(--color-bg-tertiary, #f3f4f6);
    border-color: var(--color-border-subtle, #f3f4f6);
    color: var(--color-text-muted, #9ca3af);
    cursor: not-allowed;
    opacity: 0.7;
}

.input-field:read-only,
.textarea-field:read-only {
    background-color: var(--color-bg-secondary, #f9fafb);
    border-color: var(--color-border-subtle, #f3f4f6);
    cursor: default;
}

/* === TEXTAREA SPECIFIC === */

.textarea-field {
    resize: vertical;
    min-height: 120px;
    line-height: var(--leading-relaxed, 1.75);
}

.textarea-field.resize-none {
    resize: none;
}

.textarea-field.resize-horizontal {
    resize: horizontal;
}

.textarea-field.resize-both {
    resize: both;
}

/* === SELECT SPECIFIC === */

.select-field {
    padding-right: var(--space-10, 2.5rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-3, 0.75rem) center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    cursor: pointer;
}

.select-field[multiple] {
    background-image: none;
    padding-right: var(--space-4, 1rem);
    height: auto;
    min-height: 120px;
}

/* === FIELD ERROR === */

.field-error {
    display: block;
    margin-top: var(--space-1, 0.25rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-danger, #ef4444);
}

/* === FIELD HINT === */

.field-hint {
    display: block;
    margin-top: var(--space-1, 0.25rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-text-muted, #9ca3af);
}

/* === VALIDATION STATES === */

.input-field.is-valid,
.select-field.is-valid,
.textarea-field.is-valid {
    border-color: var(--color-success, #10b981);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310b981'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3, 0.75rem) center;
    background-size: 1rem 1rem;
    padding-right: var(--space-10, 2.5rem);
}

.input-field.is-valid:focus,
.select-field.is-valid:focus,
.textarea-field.is-valid:focus {
    border-color: var(--color-success, #10b981);
    box-shadow: 0 0 0 3px var(--color-success-bg, rgba(16, 185, 129, 0.12));
}

.input-field.is-invalid,
.select-field.is-invalid,
.textarea-field.is-invalid {
    border-color: var(--color-danger, #ef4444);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3, 0.75rem) center;
    background-size: 1rem 1rem;
    padding-right: var(--space-10, 2.5rem);
}

.input-field.is-invalid:focus,
.select-field.is-invalid:focus,
.textarea-field.is-invalid:focus {
    border-color: var(--color-danger, #ef4444);
    box-shadow: 0 0 0 3px var(--color-danger-bg, rgba(239, 68, 68, 0.12));
}

/* === SIZE VARIANTS === */

.input-field-small,
.select-field-small,
.textarea-field-small {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    border-radius: var(--radius-md, 6px);
}

.select-field-small {
    padding-right: var(--space-8, 2rem);
}

.input-field-large,
.select-field-large,
.textarea-field-large {
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-size: var(--text-lg, 1.125rem);
    border-radius: var(--radius-xl, 12px);
}

.select-field-large {
    padding-right: var(--space-12, 3rem);
}

/* === CHECKBOX AND RADIO === */

.toggle-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.toggle-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--color-bg-input, #ffffff);
    cursor: pointer;
    transition: border-color var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
    appearance: none;
}

.toggle-input[type="radio"] {
    border-radius: var(--radius-full, 9999px);
}

.toggle-input:checked {
    background-color: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
}

.toggle-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
}

.toggle-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

.toggle-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-muted, rgba(99, 102, 241, 0.15));
}

.toggle-input:hover:not(:disabled):not(:checked) {
    border-color: var(--color-text-muted, #9ca3af);
}

.toggle-input:disabled {
    background-color: var(--color-bg-tertiary, #f3f4f6);
    border-color: var(--color-border-subtle, #f3f4f6);
    cursor: not-allowed;
    opacity: 0.7;
}

.toggle-label {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-text, #1f2937);
    cursor: pointer;
}

.toggle-input:disabled + .toggle-label {
    color: var(--color-text-muted, #9ca3af);
    cursor: not-allowed;
}

/* === INPUT GROUP === */

.input-group {
    display: flex;
    width: 100%;
    position: relative;
}

.input-group .input-field {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-radius: 0;
    border-right: none;
}

.input-group .input-field:first-child {
    border-top-left-radius: var(--radius-lg, 8px);
    border-bottom-left-radius: var(--radius-lg, 8px);
}

.input-group .input-field:last-child {
    border-top-right-radius: var(--radius-lg, 8px);
    border-bottom-right-radius: var(--radius-lg, 8px);
    border-right: 1px solid var(--color-border, #e5e7eb);
}

.input-group .input-field:focus {
    z-index: 2;
    border-right: 1px solid var(--color-border-focus, #6366f1);
}

.input-addon {
    display: flex;
    align-items: center;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-normal, 400);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-text-secondary, #6b7280);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-bg-secondary, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
}

.input-addon:first-child {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-addon:last-child {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* === FORM GRID LAYOUT === */

.form-grid {
    display: grid;
    gap: var(--space-4, 1rem);
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === FILE INPUT === */

.file-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(2.75rem + 2px);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    height: calc(2.75rem + 2px);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-normal, 400);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-text-secondary, #6b7280);
    background-color: var(--color-bg-input, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: border-color var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-secondary, #6b7280);
    content: "Browse";
    background-color: var(--color-bg-secondary, #f9fafb);
    border-left: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0 var(--radius-lg, 8px) var(--radius-lg, 8px) 0;
    transition: background-color var(--transition-fast, 150ms ease);
}

.file-wrapper:hover .file-label {
    border-color: var(--color-text-muted, #9ca3af);
}

.file-wrapper:hover .file-label::after {
    background-color: var(--color-bg-hover, #e5e7eb);
}

/* === FLOATING LABELS === */

.field-floating {
    position: relative;
}

.field-floating > .input-field,
.field-floating > .select-field {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: var(--space-5, 1.25rem) var(--space-4, 1rem) var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.field-floating > .field-label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: var(--space-4, 1rem) var(--space-4, 1rem);
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
    color: var(--color-text-muted, #9ca3af);
    font-size: var(--text-base, 1rem);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.field-floating > .input-field:focus ~ .field-label,
.field-floating > .input-field:not(:placeholder-shown) ~ .field-label,
.field-floating > .select-field ~ .field-label {
    opacity: 0.85;
    transform: scale(0.85) translateY(-0.65rem) translateX(0.1rem);
    color: var(--color-primary, #6366f1);
}

.field-floating > .input-field:focus ~ .field-label {
    color: var(--color-primary, #6366f1);
}

/* === ACCESSIBILITY === */

.input-field:focus-visible,
.select-field:focus-visible,
.textarea-field:focus-visible,
.toggle-input:focus-visible {
    outline: 2px solid var(--color-primary, #6366f1);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .input-field,
    .select-field,
    .textarea-field,
    .toggle-input,
    .file-label {
        transition: none;
    }
}

/* === DARK THEME OVERRIDES === */

[data-theme="dark"] .field-label {
    color: var(--color-text, #f9fafb);
}

[data-theme="dark"] .input-field,
[data-theme="dark"] .select-field,
[data-theme="dark"] .textarea-field {
    background-color: var(--color-bg-input, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text, #f9fafb);
}

[data-theme="dark"] .input-field::placeholder,
[data-theme="dark"] .textarea-field::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

[data-theme="dark"] .input-field:focus,
[data-theme="dark"] .select-field:focus,
[data-theme="dark"] .textarea-field:focus {
    background-color: var(--color-bg-input, #1f2937);
    border-color: var(--color-border-focus, #6366f1);
}

[data-theme="dark"] .input-field:disabled,
[data-theme="dark"] .select-field:disabled,
[data-theme="dark"] .textarea-field:disabled {
    background-color: var(--color-bg-tertiary, #374151);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .input-field:read-only,
[data-theme="dark"] .textarea-field:read-only {
    background-color: var(--color-bg-secondary, #1f2937);
}

[data-theme="dark"] .field-hint {
    color: var(--color-text-muted, #9ca3af);
}

[data-theme="dark"] .toggle-label {
    color: var(--color-text, #f9fafb);
}

[data-theme="dark"] .toggle-input {
    background-color: var(--color-bg-input, #1f2937);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .toggle-input:disabled {
    background-color: var(--color-bg-tertiary, #374151);
}

[data-theme="dark"] .input-addon {
    background-color: var(--color-bg-secondary, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text-secondary, #d1d5db);
}

[data-theme="dark"] .file-label {
    background-color: var(--color-bg-input, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text-secondary, #d1d5db);
}

[data-theme="dark"] .file-label::after {
    background-color: var(--color-bg-secondary, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text-secondary, #d1d5db);
}

[data-theme="dark"] .file-wrapper:hover .file-label::after {
    background-color: var(--color-bg-hover, #374151);
}

[data-theme="dark"] .select-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] .field-floating > .field-label {
    color: var(--color-text-muted, #9ca3af);
}

[data-theme="dark"] .field-floating > .input-field:focus ~ .field-label,
[data-theme="dark"] .field-floating > .input-field:not(:placeholder-shown) ~ .field-label {
    color: var(--color-primary, #6366f1);
}