/* ==========================================================================
   Form-Group Overrides — Match rcl-eservice-fe styling
   Scoped to .form-group descendants to avoid side effects
   ========================================================================== */

/* 1a. Label styling */
.form-group > label {
    display: block;
    font-size: 1rem;              /* 16px — matches FMInput text-base */
    font-weight: 500;             /* medium — matches FMInput inline fontWeight:500 */
    color: #111827;               /* gray-900 — matches text-gray-900 */
    line-height: 1.5rem;          /* 24px — matches leading-6 */
    margin-bottom: 0.5rem;        /* 8px — matches mb-[0.5rem] */
}

/* 1b. Input and select styling (overrides .form-control) */
.form-group .form-control {
    width: 100%;
    height: 43px;                 /* fixed height */
    border-radius: 10px;          /* matches rounded-[10px] */
    border: 1px solid #D9D9D9;    /* matches border-[#D9D9D9] */
    padding: 0.625rem 1rem;       /* py-2.5 px-4 = 10px 16px */
    font-size: 0.875rem;          /* 14px — matches text-sm */
    color: #111827;               /* gray-900 — matches text-gray-900 */
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

/* 1c. Placeholder styling */
.form-group .form-control::placeholder {
    color: #d1d5db;               /* gray-300 — matches placeholder:text-gray-300 */
}

/* 1d. Focus state */
.form-group .form-control:focus {
    border-color: #9ca3af;        /* gray-400 — matches focus:border-gray-400 */
    box-shadow: none;             /* removes Bootstrap blue box-shadow */
    outline: none;
}

/* 1e. Disabled state */
.form-group .form-control:disabled,
.form-group .form-control[readonly] {
    background-color: #F2F2F2;    /* matches disabled:bg-[#F2F2F2] */
    cursor: not-allowed;          /* matches disabled:cursor-not-allowed */
}

.form-group .form-control:disabled::placeholder {
    color: #999999;               /* matches disabled:placeholder:text-[#999999] */
}

/* 1f. Native select height correction */
.form-group select.form-control {
    height: 43px;                 /* fixed height — matches form-control */
    appearance: auto;             /* keep native dropdown arrow */
}

/* 1h. Custom-select styling — match form-control */
.custom-select {
    height: 43px;                 /* fixed height — matches form-control */
    border-radius: 10px;          /* matches form-control rounded-[10px] */
    border: 1px solid #D9D9D9;    /* matches form-control border */
    padding: 0.625rem 1rem;       /* matches form-control padding */
    font-size: 0.875rem;          /* matches form-control text-sm */
    color: #111827;               /* matches form-control color */
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.custom-select:focus {
    border-color: #9ca3af;        /* matches form-control focus */
    box-shadow: none;
    outline: none;
}

/* 1j. Custom-file — match form-control height & border */
.form-group .custom-file {
    height: 43px;
}

.form-group .custom-file-input {
    height: 43px;
}

.form-group .custom-file-label {
    height: 43px;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #111827;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-group .custom-file-label::after {
    height: 41px;
    border-radius: 0 10px 10px 0;
    padding: 0.625rem 1rem;
    line-height: 1.4;
}

.form-group .custom-file-input:focus ~ .custom-file-label {
    border-color: #9ca3af;
    box-shadow: none;
}

/* 1i. Form-group spacing */
.form-group {
    margin-bottom: 0.75rem;       /* 12px — matches eBookingShippingDetails inline style */
}

/* ==========================================================================
   Datepicker (gj-datepicker) Overrides — Match form-control styling
   ========================================================================== */

/* 2a. Wrapper — own the border & radius so children stay flush */
.form-group .gj-datepicker.input-group {
    height: 43px;                 /* matches form-control height */
    border-radius: 10px;          /* matches rounded-[10px] */
    border: 1px solid #D9D9D9;    /* matches border-[#D9D9D9] */
    flex-wrap: nowrap;            /* prevent Bootstrap wrapping */
}

/* 2b. Inner input — fill wrapper, no own border */
.form-group .gj-datepicker.input-group .form-control {
    height: 100% !important;      /* override .height30 !important */
    min-height: unset !important;  /* override .height30 min-height !important */
    border: none;                 /* wrapper owns the border */
    border-radius: 10px 0 0 10px; /* left side rounded */
    font-size: 0.875rem !important; /* override .height30 12px !important */
    padding: 0.625rem 1rem;      /* matches form-control padding */
    color: #111827;
}

/* 2c. Append container — fill height */
.form-group .gj-datepicker.input-group .input-group-append {
    height: 100%;
}

/* 2d. Calendar button — flush inside wrapper */
.form-group .gj-datepicker.input-group .input-group-append .btn {
    height: 100%;
    border: none;
    border-left: 1px solid #D9D9D9;
    border-radius: 0 10px 10px 0; /* right side rounded */
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

/* 2e. Focus state — highlight wrapper border */
.form-group .gj-datepicker.input-group:focus-within {
    border-color: #9ca3af;        /* matches focus:border-gray-400 */
}

/* ==========================================================================
   Select2 Overrides — Match form-control styling
   ========================================================================== */

/* 3a. Force Select2 container to fill form-group width */
.form-group .select2-container {
    width: 100% !important;       /* override inline style & select2.min.css */
}

.form-group .select2-container--default .select2-selection--single {
    height: 43px;                 /* matches form-control height */
    border-radius: 10px;          /* matches rounded-[10px] */
    border: 1px solid #D9D9D9;    /* matches border-[#D9D9D9] */
    padding: 0.625rem 1rem;       /* matches form-control padding */    
    color: #111827;               /* matches text-gray-900 */
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827;               /* matches text-gray-900 */
    line-height: normal;          /* reset to align with padding */
    padding-left: 0;              /* already padded by parent */
    padding-right: 0;
}

.form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;                 /* fill parent so centering works */
    right: 8px;
    top: 0;                       /* override select2 default top:1px */
    display: flex;
    align-items: center;
}

.form-group .select2-container--default.select2-container--open .select2-selection--single,
.form-group .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #9ca3af;        /* matches focus:border-gray-400 */
    box-shadow: none;
    outline: none;
}

/* ==========================================================================
   Equipment & Commodity Table — Select2 inside table cells
   Scoped to .equipCommTable to avoid side effects on form-group selects
   ========================================================================== */

/* 4a. Select2 inside equipment/commodity table cells */
.equipCommTable .select2-container {
    width: 100% !important;       /* fill table cell */
}

.equipCommTable .select2-container--default .select2-selection--single {
    height: 36px;                 /* compact height for table rows */
    border-radius: 6px;
    border: 1px solid #D9D9D9;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #111827;
    background-color: #fff;
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.equipCommTable .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827;
    line-height: 26px;            /* vertically center text */
    padding-left: 0;
    padding-right: 20px;         /* room for arrow */
    font-size: 0.8rem;
}

.equipCommTable .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right: 4px;
}

.equipCommTable .select2-container--default.select2-container--open .select2-selection--single,
.equipCommTable .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #9ca3af;
    box-shadow: none;
    outline: none;
}

/* 4b. Disabled Select2 in table */
.equipCommTable .select2-container--disabled .select2-selection--single {
    background-color: #F2F2F2;
    cursor: not-allowed;
}

/* ==========================================================================
   Equipment & Commodity Table — Input-group polish inside table cells
   ========================================================================== */

/* 5a. Input-group wrapper — unified border, compact height */
.equipCommTable .input-group.kg {
    flex-wrap: nowrap;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    overflow: hidden;
    height: 36px;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out;
}

/* 5b. Input inside input-group — no own border */
.equipCommTable .input-group.kg .form-control {
    border: none;
    box-shadow: none;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    font-size: 0.8rem;
    color: #111827;
    padding: 4px 8px;
    background-color: transparent;
}

.equipCommTable .input-group.kg .form-control:focus {
    box-shadow: none;
    outline: none;
}

/* 5c. Append unit label — flush, subtle background */
.equipCommTable .input-group.kg .input-group-append {
    display: flex;
    align-items: center;
}

.equipCommTable .input-group.kg .input-group-append .input-group-text {
    border: none;
    border-left: 1px solid #D9D9D9;
    border-radius: 0;
    background-color: #f8f9fa;
    font-size: 0.75rem;
    color: #6b7280;
    padding: 4px 8px;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* 5d. Search icon inside input-group — vertically centered */
.equipCommTable .input-group.kg > span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px;
    cursor: pointer;
}

/* 5e. Focus state — highlight wrapper border */
.equipCommTable .input-group.kg:focus-within {
    border-color: #9ca3af;
}

/* ==========================================================================
   6. Additional Email Recipient — dynamic row styling
   ========================================================================== */
.additional-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.additional-email-remove {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

.additional-email-remove:hover {
    color: #ef4444;
}