/* ==========================================================================
   Sales Administration System
   Enterprise Form
   File        : form.css
   Description : Enterprise Form Component
   Dependency  : theme.css
   ========================================================================== */


/* ==========================================================================
   FORM SECTION
   ========================================================================== */

.form-section {
    margin-bottom: 2rem;
}

    .form-section:last-child {
        margin-bottom: 0;
    }


/* ==========================================================================
   FORM CARD
   ========================================================================== */

.form-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #FFF;
    box-shadow: var(--card-shadow);
}

    .form-card .card-body {
        padding: 1.5rem;
    }


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.form-section-description {
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--text-secondary);
}


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

.form-group {
    margin-bottom: 1.25rem;
}

    .form-group:last-child {
        margin-bottom: 0;
    }


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

.form-label {
    display: inline-block;
    margin-bottom: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-primary);
}

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


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

.form-control,
.form-select {
    height: var(--input-height);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: .90rem;
    transition: all var(--transition-fast);
}

    .form-control::placeholder {
        color: var(--input-placeholder);
    }

    .form-control:hover,
    .form-select:hover {
        border-color: #ADB5BD;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--input-focus-border);
        box-shadow: var(--input-focus-shadow);
    }


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

textarea.form-control {
    min-height: 120px;
    height: auto;
    resize: vertical;
}


/* ==========================================================================
   READONLY
   ========================================================================== */

.form-control[readonly],
.form-select[readonly] {
    background: #F8F9FA;
}


/* ==========================================================================
   DISABLED
   ========================================================================== */

.form-control:disabled,
.form-select:disabled {
    background: #F3F4F6;
    opacity: 1;
    cursor: not-allowed;
}


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

.input-group > .form-control {
    z-index: auto;
}

.input-group-text {
    background: #F8F9FA;
    border-color: var(--input-border);
}


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

.is-valid {
    border-color: var(--color-success) !important;
}

.is-invalid {
    border-color: var(--color-danger) !important;
}

.valid-feedback {
    color: var(--color-success);
    font-size: .80rem;
    margin-top: .30rem;
}

.invalid-feedback {
    color: var(--color-danger);
    font-size: .80rem;
    margin-top: .30rem;
}


/* ==========================================================================
   HELPER TEXT
   ========================================================================== */

.form-text {
    margin-top: .30rem;
    color: var(--text-secondary);
    font-size: .80rem;
}


/* ==========================================================================
   CHECKBOX
   ========================================================================== */

.form-check {
    min-height: 1.75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
    margin: 0;
}


/* ==========================================================================
   SWITCH
   ========================================================================== */

.form-switch {
    padding-left: 2.8rem;
}

    .form-switch .form-check-input {
        width: 2.4rem;
        height: 1.25rem;
    }


/* ==========================================================================
   RADIO
   ========================================================================== */

.form-check-inline {
    margin-right: 1.5rem;
}


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

.form-control[type=file] {
    padding-top: .35rem;
}


/* ==========================================================================
   SEARCH BOX
   ========================================================================== */

.form-search {
    position: relative;
}

    .form-search i {
        position: absolute;
        top: 50%;
        left: .85rem;
        transform: translateY(-50%);
        color: var(--text-secondary);
    }

    .form-search .form-control {
        padding-left: 2.5rem;
    }


/* ==========================================================================
   LOOKUP
   ========================================================================== */

.lookup-group {
    display: flex;
    gap: .5rem;
}

    .lookup-group .form-control {
        flex: 1;
    }


/* ==========================================================================
   INLINE FORM
   ========================================================================== */

.form-inline {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

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


/* ==========================================================================
   FILTER FORM
   ========================================================================== */

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 1rem;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.form-grid {
    display: grid;
    gap: 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);
}


/* ==========================================================================
   ACTION
   ========================================================================== */

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}


/* ==========================================================================
   STICKY ACTION
   ========================================================================== */

.form-actions-sticky {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 1rem;
    z-index: var(--z-sticky);
    border-top: 1px solid var(--border-color);
}


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.form-divider {
    margin: 2rem 0;
    border-top: 1px solid var(--border-color);
}


/* ==========================================================================
   REQUIRED LEGEND
   ========================================================================== */

.required-legend {
    color: var(--text-secondary);
    font-size: .80rem;
}

    .required-legend span {
        color: var(--color-danger);
    }


/* ==========================================================================
   LOADING
   ========================================================================== */

.form-loading {
    pointer-events: none;
    opacity: .65;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:992px) {

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

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

@media (max-width:768px) {

    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
    }

    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .lookup-group {
        flex-direction: column;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

        .form-actions .btn {
            width: 100%;
        }
}