/* ============================================
   Andres Automotive - Form Components
   Global reusable form styles
   Fixed colors - no theme switching
   All values use CSS variables from aa-variables.css
   ============================================ */

/* ========================================
   Base Form Styles
   ======================================== */

.aa-form {
    width: 100%;
}

.aa-form-group {
    margin-bottom: var(--aa-spacing-4);
}

.aa-form-label {
    display: block;
    margin-bottom: var(--aa-spacing-2);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-sm);
}

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

/* ========================================
   Form Controls
   ======================================== */

.aa-form-control {
    display: block;
    width: 100%;
    height: var(--aa-input-height);
    padding: var(--aa-input-padding-y) var(--aa-input-padding-x);
    font-size: var(--aa-font-size-base);
    line-height: var(--aa-line-height-base);
    color: var(--aa-text-primary);
    background-color: var(--aa-bg-light);
    border: var(--aa-input-border-width) solid var(--aa-input-border-color);
    border-radius: var(--aa-input-border-radius);
    transition: var(--aa-transition-all);
}

.aa-form-control:focus {
    outline: none;
    border-color: var(--aa-input-focus-border-color);
    box-shadow: var(--aa-input-focus-shadow);
}

.aa-form-control::placeholder {
    color: var(--aa-text-muted);
    opacity: 1;
}

.aa-form-control:disabled,
.aa-form-control[readonly] {
    background-color: var(--aa-gray-100);
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   Form Control Sizes
   ======================================== */

.aa-form-control-sm {
    height: var(--aa-input-height-sm);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
}

.aa-form-control-lg {
    height: var(--aa-input-height-lg);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    font-size: var(--aa-font-size-lg);
}

/* ========================================
   Textarea
   ======================================== */

.aa-form-textarea {
    min-height: var(--aa-spacing-24);
    resize: vertical;
}

/* ========================================
   Form Validation States
   ======================================== */

.aa-form-control-valid {
    border-color: var(--aa-success);
}

.aa-form-control-valid:focus {
    border-color: var(--aa-success);
    box-shadow: 0 0 0 var(--aa-spacing-1) rgba(22, 163, 74, 0.25);
}

.aa-form-control-invalid {
    border-color: var(--aa-danger);
}

.aa-form-control-invalid:focus {
    border-color: var(--aa-danger);
    box-shadow: 0 0 0 var(--aa-spacing-1) rgba(220, 38, 38, 0.25);
}

/* ========================================
   Form Feedback
   ======================================== */

.aa-form-feedback {
    display: block;
    margin-top: var(--aa-spacing-1);
    font-size: var(--aa-font-size-sm);
}

.aa-form-feedback-valid {
    color: var(--aa-success);
}

.aa-form-feedback-invalid {
    color: var(--aa-danger);
}

/* ========================================
   Form Help Text
   ======================================== */

.aa-form-help {
    display: block;
    margin-top: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-muted);
}

/* ========================================
   Checkboxes and Radios
   ======================================== */

.aa-form-check {
    display: flex;
    align-items: center;
    margin-bottom: var(--aa-spacing-2);
}

.aa-form-check-input {
    width: var(--aa-spacing-5);
    height: var(--aa-spacing-5);
    margin-right: var(--aa-spacing-2);
    cursor: pointer;
    accent-color: var(--aa-primary);
}

.aa-form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: var(--aa-font-weight-normal);
    color: var(--aa-text-primary);
}

/* ========================================
   Input Groups
   ======================================== */

.aa-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.aa-input-group-text {
    display: flex;
    align-items: center;
    padding: var(--aa-input-padding-y) var(--aa-input-padding-x);
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-normal);
    line-height: var(--aa-line-height-base);
    color: var(--aa-text-primary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--aa-gray-100);
    border: var(--aa-input-border-width) solid var(--aa-input-border-color);
}

.aa-input-group > .aa-form-control {
    flex: 1 1 auto;
}

.aa-input-group > .aa-input-group-text:first-child {
    border-right: none;
    border-radius: var(--aa-input-border-radius) 0 0 var(--aa-input-border-radius);
}

.aa-input-group > .aa-form-control:not(:first-child) {
    border-left: none;
    border-radius: 0 var(--aa-input-border-radius) var(--aa-input-border-radius) 0;
}

/* ========================================
   Select Dropdown
   ======================================== */

.aa-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230a1a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--aa-spacing-3) center;
    background-size: var(--aa-spacing-4);
    padding-right: calc(var(--aa-spacing-3) * 3);
}

/* ========================================
   Form Layouts
   ======================================== */

.aa-form-inline {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
}

.aa-form-inline .aa-form-group {
    margin-bottom: 0;
}

.aa-form-grid {
    display: grid;
    gap: var(--aa-spacing-4);
}

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

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

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