.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.custom-table .form-control,
.custom-table .form-select {
    font-size: 14px;
}

.custom-table .form-select {
    background-color: #a20104;
    color: #fff;
}

.select2-selection__rendered {
    font-size: 14px;
}

.select2-results__options {
    font-size: 14px;
}

.custom-table th,
.custom-table td {
    border: 1px solid #ccc;
    /* customize border color */
    padding: 6px 10px;
    text-align: center;
}

.custom-table thead th,
.custom-table tfoot {
    background-color: #393939;
    /* dark header */
    color: #fff;
    font-weight: normal;
}

.custom-table.job-proceed thead th,
.custom-table.job-proceed tfoot {
    background-color: #5c5c5c;
    /* dark header */
    color: #fff;
    font-weight: normal;
}

/* Group name row */
.custom-table .group-row th {
    background-color: #a20104;
    /* Bootstrap’s "danger" red equivalent */
    color: #fff;
    text-align: center;
    font-weight: normal;
    border-top: 1px solid #ccc;
    /* remove thick border issue */
}

.reposition {
    cursor: grab;
}

.sortable-ghost {
    cursor: grabbing !important;
    opacity: 0.5 !important;
}



.custom-table.job-proceed .group-row th {
    background-color: #079cdc;
    /* Bootstrap’s "danger" red equivalent */
    color: #fff;
    text-align: center;
    font-weight: normal;
    border-top: 1px solid #ccc;
    /* remove thick border issue */
}

/* Workhour rows 
.custom-table .workhour-row {
   background-color: #f9f9f9;
} */

/* Total row */
.custom-table .total-row {
    background-color: #393939;
    font-weight: bold;
    color: #fff;
}

.custom-table.job-proceed .total-row {
    background-color: #5c5c5c;
    font-weight: bold;
    color: #fff;
}

/* Hover effect */
.custom-table tbody tr:hover {
    background-color: #f1f1f1;
}

.custom-table .total-row:hover {
    background-color: #f1f1f1;
    font-weight: bold;
    color: #393939;
}

/* Right-align text */
.text-right {
    text-align: right;
}

.glow {
    border: 2px solid #ffd700 !important;
    /* gold border */
    border-radius: 4px !important;
    color: #000 !important;
    /* temporarily switch text to black */
    background-color: #fffacd;
    /* light yellow background */
    transition: all 0.5s ease;
}

.highlight-others {
    background-color: rgb(252, 252, 134);
    /* or something softer like #fff3cd */
}

/* .select2-search {
    background-color: #a20104;
    color: #fff;
} */

/* .select2-results {
    background-color: #a20104;
    color: #fff;
} */


.group-row .selection .select2-selection {
    background-color: #a20104;
    color: #fff;
}

.group-row .selection .select2-selection__rendered {
    background-color: #a20104;
    color: #fff;
}

/* Change the caret down arrow symbol to white */
.group-row .select2-container--bootstrap-5 .select2-selection--single {
    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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}


/* really selected c50606 */
/* .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff !important;
    background-color: #c50606;
} */

/* first default selection and hover */
/* .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: #000;
    background-color: #eda2a3;
} */

.group-row .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    font-weight: 400;
    line-height: 1.5;
    color: white;
}


.is-invalid {
    border: 2px solid red !important;
    background-color: #ffe6e6;
}

/* Make native group header selects look visually like the Select2 widget
   - width matches the Select2 init (`width: '50%'`) used in JS
   - selected label centered like Select2, but dropdown options remain left-aligned
   - dark red background and white text to match group select styling
   - custom chevron icon using the same SVG as Select2 override above
*/
.group-row .group-header-select {
    width: 50% !important;
    display: inline-block;
    text-align: center;
    text-align-last: center;
    /* center the selected option text */
    background-color: #a20104;
    color: #fff;
    padding: 6px 10px 6px 2.5rem;
    /* leave space on left for chevron */
    border-radius: 4px;
    border: 1px solid #ccc;
    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='white' 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: left 0.75rem center;
    background-size: 0.75rem auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.group-row .group-header-select option {
    text-align: left;
    /* keep dropdown options left-aligned for readability */
}

/* Style native part selects (used before Select2 initializes) so they
   visually match the Select2 widget: centered selected label, left chevron,
   but keep the dropdown options left-aligned for readability. This only
   affects the native <select> when Select2 hasn't replaced it. */
select.part-select,
select[data-autocomplete="1"] {
    width: 100% !important;
    display: block;
    text-align: center;
    text-align-last: center;
    padding: 6px 10px 6px 2.5rem;
    /* space on left for chevron */
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #212529;
    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='%23212529' 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: left 0.75rem center;
    background-size: 0.75rem auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.part-select option,
select[data-autocomplete="1"] option {
    text-align: left;
    /* dropdown options remain left-aligned */
}


/* Style the closed select when it currently shows the empty placeholder.
   We toggle `has-empty-placeholder` via JS for reliable cross-browser results. */
select.part-select.has-empty-placeholder,
select[data-autocomplete="1"].has-empty-placeholder {
    color: #6c757d;
    /* muted */
    font-size: 13px;
    /* slightly smaller */
}

/* Base Pill Style */
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.status-pill::before {
    content: "•";
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
}

/* --- Status-Specific Colors --- */

/* 1. created (Light Gray/Neutral) */
.status-created {
    background-color: #f0f0f0;
    color: #666;
}

/* 2. pending_inventory_update (Orange/Warning) */
.status-pending_inventory_update {
    background-color: #fff4e6;
    color: #cc6600;
}

/* 3. inventory_updated (Light Blue/Moving Forward) */
.status-inventory_updated {
    background-color: #e6f2ff;
    color: #0066cc;
}

/* 4. pending_confirmation (Yellow/Attention Needed) */
.status-pending_confirmation {
    background-color: #E6FAFF;
    color: #007799;
}

/* 5. confirmed (Green/Success) */
.status-confirmed {
    background-color: #e6f7e6;
    color: #387038;
}

/* 6. proceeded (Darker Green/Done or Job Status) */
.status-proceeded {
    background-color: #d9f7e5;
    color: #135200;
}

.status-job_cancelled {
    background-color: #fbeaea;
    color: #9b1c1c;
}