/* Form Styles */

/* Form Group */
.form-group {
    margin-bottom: var(--spacing-xl);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-medium);
    font-size: var(--font-base);
    color: var(--color-text);
}

/* Input Fields */
.form-control,
.form-group input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    transition: var(--transition-base);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
}

.form-control:focus,
.form-group input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Readonly Input */
.form-control[readonly],
input[readonly] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* Small Input */
.form-control-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-sm);
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    width: var(--icon-md);
    height: var(--icon-md);
    cursor: pointer;
    accent-color: var(--color-primary);
    margin: 0;
}

/* Select */
select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%236c757d" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: var(--spacing-3xl);
}

/* Textarea */
textarea {
    min-height: 100px;
    resize: vertical;
}

/* Input with Icon */
.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-left: 36px;
}

.input-with-icon .input-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Error State */
.form-control.error,
.form-group input.error {
    border-color: var(--color-danger);
}

.form-control.error:focus,
.form-group input.error:focus {
    box-shadow: 0 0 0 3px var(--color-danger-light);
}

.form-error {
    color: var(--color-danger);
    font-size: var(--font-sm);
    margin-top: var(--spacing-xs);
}

/* Success State */
.form-control.success {
    border-color: var(--color-success);
}

.form-control.success:focus {
    box-shadow: 0 0 0 3px var(--color-success-light);
}