/* requests_home.css */

.request-container {
    background-color: var(--bg-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    /* REMOVED: width: max-content; */ /* This was causing the container to expand excessively */
    max-width: 1300px; /* Set a consistent max-width, matching the overall content width */
    width: 100%; /* Take full available width up to max-width */
    margin: auto; /* Center the container horizontally */
    /* margin is handled in requests_common.css for fixed navbar */
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    padding-left: var(--spacing-xl); /* Added horizontal padding */
    padding-right: var(--spacing-xl); /* Added horizontal padding */
    /* MODIFIED: Added var(--spacing-md) for padding below the navbar */
    margin-top: calc(70px + var(--spacing-md));
}

/* Adjust the main Select2 styling for top-level dropdowns (e.g., Project ID) */
.form-group .select2-container--default .select2-selection--single,
.form-group .select2-container--default .select2-selection--multiple /* Added for consistency if multi-select used in form-group */ {
    height: 40px; /* Match the height set for regular inputs */
    padding: 0 12px; /* Adjust vertical padding as Select2 has its own internal structure */
    display: flex; /* Use flexbox for vertical centering of content */
    align-items: center; /* Vertically center content */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    border-radius: var(--border-radius); /* Consistent border-radius with native inputs */
    border: 1px solid var(--border-color); /* Consistent border with native inputs */
    background-color: var(--input-bg); /* Consistent background with native inputs */
}

/* Adjust the rendered text within Select2 for vertical alignment */
.form-group .select2-container--default .select2-selection__rendered {
    line-height: normal; /* Reset line-height to normal to allow flexbox to control vertical alignment */
    padding: 0; /* Remove default Select2 padding if any */
    height: 100%; /* Take full height of its parent selection element */
    display: flex; /* Ensure the rendered content is also a flex container */
    align-items: center; /* Vertically align text */
    color: var(--text-color); /* Inherit text color */
    font-size: 1rem; /* Match base input font size */
}

/* Adjust Select2 arrow to be vertically centered */
.form-group .select2-container--default .select2-selection__arrow {
    height: 100%; /* Ensure arrow container takes full height */
    display: flex; /* Use flexbox to center arrow icon */
    align-items: center; /* Vertically center the arrow icon */
}
.request-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.request-header .header-logo {
    max-width: 150px;
    margin-bottom: var(--spacing-md);
}

.request-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

body.dark-theme .request-header h1 {
    color: var(--primary-color); /* Keeping blue for heading in dark mode */
}

.request-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.form-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
}

body.dark-theme .form-section {
    background-color: var(--bg-dark-surface); /* Changed to use general dark surface variable */
    border-color: var(--border-color); /* Changed to use general border color */
}

.form-section h2 {
    font-size: 2rem; /* Increased from 1.8rem */
    color: var(--primary-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
}

body.dark-theme .form-section h2 {
    color: var(--primary-light); /* Adjusted for better contrast in dark theme, using primary-light */
    border-color: var(--primary-dark);
}

.section-description {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

/* Apply table-layout: fixed to tables for better column width control */
#boqItemsTable,
#serviceMaterialTable {
    /* REMOVED: table-layout: fixed; */ /* This was causing issues with content overflow */
    width: 100%; /* Start with 100% width, allow overflow if content dictates */
    min-width: fit-content; /* Allow content to dictate min width, then enable scroll */
}


/* Specific table actions column width */
/* Applied to both tables now */
#boqItemsTable th:last-child,
#serviceMaterialTable th:last-child {
    width: 90px; /* Adjusted from 100px */
    text-align: center;
}

#boqItemsTable td:last-child,
#serviceMaterialTable td:last-child {
    text-align: center; /* Center content of action cells */
}

/* Adjust input styles within table cells for better fit */
#boqItemsTable td input[type="text"],
#boqItemsTable td input[type="number"],
#boqItemsTable td select, /* Added select here */
#serviceMaterialTable td input[type="text"],
#serviceMaterialTable td input[type="number"],
#serviceMaterialTable td select {
    width: calc(100% - 2px); /* Slightly less than 100% to account for border without breaking flexbox */
    margin: 0; /* Remove default input margins within table cells */
    padding: 8px 10px; /* Slightly reduce padding for table inputs */
    font-size: 0.95rem; /* Slightly smaller font for table inputs */
    box-sizing: border-box; /* Important for padding/border calculation */
    vertical-align: middle; /* Align inputs/selects vertically in the middle */
}

/* Flexible widths for descriptive columns, fixed for others */
#boqItemsTable th:first-child, /* ID for Direct, Main Item for Indirect */
#boqItemsTable td:first-child {
    min-width: 60px; /* Keep a minimum width */
}

#boqItemsTable th:nth-child(2), /* Description for Direct, Sub Item for Indirect */
#boqItemsTable td:nth-child(2) {
    width: auto; /* Allow content to dictate width */
    min-width: 180px; /* Keep a reasonable minimum */
}

/* Repeat for other specific width declarations in #boqItemsTable and #serviceMaterialTable */
/* For example, for quantity, unit, unit price, total price, you might still want a min-width */
#boqItemsTable th:nth-child(3), /* Quantity */
#boqItemsTable td:nth-child(3) {
    min-width: 70px; /* Sufficient for typical quantities */
}
#boqItemsTable th:nth-child(4), /* Unit */
#boqItemsTable td:nth-child(4) {
    min-width: 50px; /* Sufficient for short units */
}
#boqItemsTable th:nth-child(5), /* Unit Price */
#boqItemsTable td:nth-child(5) {
    min-width: 100px; /* Sufficient for unit prices */
}
#boqItemsTable th:nth-child(6), /* Total Price */
#boqItemsTable td:nth-child(6) {
    min-width: 110px; /* Sufficient for total prices with currency */
}


/* Specific widths for Service/Material table columns */
#serviceMaterialTable th:first-child,
#serviceMaterialTable td:first-child {
    min-width: 80px; /* Type column */
}

#serviceMaterialTable th:nth-child(2),
#serviceMaterialTable td:nth-child(2) {
    min-width: 100px; /* Type ID column */
}

#serviceMaterialTable th:nth-child(3),
#serviceMaterialTable td:nth-child(3) {
    width: auto; /* Description column */
    min-width: 160px; /* Adjusted from 180px */
}

#serviceMaterialTable th:nth-child(4),
#serviceMaterialTable td:nth-child(4) {
    min-width: 80px; /* Quantity column, increased slightly */
}

/* New width for Service/Material Unit column (5th column now) */
#serviceMaterialTable th:nth-child(5),
#serviceMaterialTable td:nth-child(5) {
    min-width: 80px; /* Unit column, increased slightly */
}

#serviceMaterialTable th:nth-child(6),
#serviceMaterialTable td:nth-child(6) {
    width: auto; /* BOQ Item column, allow content to dictate width */
    min-width: 120px;
}

/* Actions in table cells */
.table-action-buttons {
    display: flex; /* Use flexbox for centering children */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Ensure it takes full height of the cell */
}

.table-action-buttons .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    margin: 0; /* Remove specific margins, flexbox handles spacing */
}

/* Style for the white delete action button */
/* Overrides btn-danger for this specific button */
.table-action-buttons .remove-row-btn {
    background-color: #ffffff; /* Explicitly white background */
    color: var(--danger-color); /* Red icon/text in light theme */
    border: 1px solid var(--border-color); /* Use general border color */
}

.table-action-buttons .remove-row-btn:hover {
    background-color: #f0f0f0; /* Slightly grey on hover in light theme */
    color: var(--danger-dark); /* Darker red icon/text on hover in light theme */
    border-color: var(--danger-dark);
}

/* Dark theme overrides for the white delete action button */
body.dark-theme .table-action-buttons .remove-row-btn {
    background-color: #ffffff; /* Explicitly white background in dark theme */
    color: var(--danger-dark-surface); /* Dark red icon/text in dark theme */
    border: 1px solid var(--border-color); /* Use general dark border color */
}

body.dark-theme .table-action-buttons .remove-row-btn:hover {
    background-color: #f0f0f0; /* Slightly grey on hover in dark theme */
    color: var(--danger-color); /* Orange-red icon/text on hover in dark theme */
    border-color: var(--danger-color);
}


/* Style for disabled delete button */
.btn-delete-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none; /* Disable click events */
}


/* Form Actions (Submit/Reset) */
.form-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .request-container {
        padding: var(--spacing-md);
        margin: var(--spacing-md);
        /* MODIFIED: Adjusted for fixed navbar on smaller screens */
        margin-top: calc(70px + var(--spacing-md));
    }

    .request-header h1 {
        font-size: 2rem;
    }

    .form-section {
        padding: var(--spacing-md);
    }

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

    .btn {
        width: 100%; /* Full width buttons on small screens */
        margin-bottom: var(--spacing-sm);
    }

    /* Adjust table inputs on very small screens if necessary */
    #boqItemsTable td input,
    #serviceMaterialTable td input,
    #serviceMaterialTable td select {
        font-size: 0.9rem;
        padding: 6px 8px;
    }
}

.remove-row-btn .fas.fa-trash {
    margin-right: 0;
}

.form-row {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    gap: var(--spacing-md); /* Space between form groups */
    margin-bottom: var(--spacing-md); /* Space below the row */
}

.form-row .form-group {
    flex: 1 1 calc(50% - var(--spacing-md) / 2); /* Distribute space for two columns, accounting for gap */
    min-width: 250px; /* Minimum width for each input field before wrapping */
    margin-bottom: 0; /* Remove default bottom margin from form-group when inside form-row */
}

/* Responsive adjustments for form-row */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* Stack fields vertically on smaller screens */
    }

    .form-row .form-group {
        flex: 1 1 100%; /* Take full width on small screens */
    }
}

/* Removed old .searchable-dropdown-container and its input styling */

/* Adjust width of Select2 elements within table cells */
/* Select2 generates .select2-container, .select2-selection */
#boqItemsTable td .select2-container,
#serviceMaterialTable td .select2-container /* Apply to both tables for consistency */
 {
    width: 100% !important; /* Force full width within table cell */
}

/* Uniform Dropdown Styling: Adjust Select2 elements within table cells */
#boqItemsTable td .select2-container .select2-selection--single,
#serviceMaterialTable td .select2-container .select2-selection--single { /* Apply to both tables for consistency */
    height: 40px; /* Make uniform with other form-group selects */
    padding: 0 12px; /* Make uniform with other form-group selects */
    display: flex; /* Ensure flex is used for vertical centering of content */
    align-items: center; /* Vertically center content */
    box-sizing: border-box; /* Crucial for consistent sizing */
    line-height: normal; /* Reset line-height to normal */
    border-radius: var(--border-radius); /* Consistent border-radius with native inputs */
    border: 1px solid var(--border-color); /* Consistent border with native inputs */
    background-color: var(--input-bg); /* Consistent background with native inputs */
}

/* Apply the same Select2 styling to multi-select types like 'export' modal, if it ever appears in tables. */
/* While this specific request is for single-select dropdowns in requests_home tables,
   it's good practice to ensure consistency if multi-select were to be used. */
#boqItemsTable td .select2-container .select2-selection--multiple,
#serviceMaterialTable td .select2-container .select2-selection--multiple { /* Apply to both tables for consistency */
    height: 40px; /* Make uniform with other form-group selects */
    min-height: 40px;
    padding: 0 12px; /* Make uniform with other form-group selects */
    display: flex; /* Ensure flex is used for vertical centering of content */
    align-items: center; /* Vertically center content */
    box-sizing: border-box; /* Crucial for consistent sizing */
    border-radius: var(--border-radius); /* Consistent border-radius with native inputs */
    border: 1px solid var(--border-color); /* Consistent border with native inputs */
    background-color: var(--input-bg); /* Consistent background with native inputs */
}


/* Also ensure the rendered text is correctly centered within the new height */
#boqItemsTable td .select2-container .select2-selection__rendered,
#serviceMaterialTable td .select2-container .select2-selection__rendered {
    line-height: normal; /* Reset line-height to allow flexbox to control vertical alignment */
    padding: 0; /* Remove default Select2 padding if any */
    height: 100%; /* Take full height of its parent selection element */
    display: flex; /* Ensure the rendered content is also a flex container */
    align-items: center; /* Vertically align text */
    /* Ensure text in select2 dropdowns doesn't wrap and shows ellipsis */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* This rule remains to apply to the Select2 rendered content, not the td itself */
    text-overflow: ellipsis; /* This rule remains to apply to the Select2 rendered content, not the td itself */
    padding-right: 25px; /* Add padding for the dropdown arrow */
    color: var(--text-color); /* Inherit text color */
    font-size: 0.95rem; /* Match table input font size */
}

/* And the arrow */
#boqItemsTable td .select2-container .select2-selection__arrow,
#serviceMaterialTable td .select2-container .select2-selection__arrow {
    height: 100%; /* Ensure arrow container takes full height */
    display: flex; /* Use flexbox to center arrow icon */
    align-items: center; /* Vertically center the arrow icon */
    right: 5px; /* Adjust arrow position slightly inward from right edge */
}

/* Responsive Column Widths in Tables */
/* Apply to content within td and th for text overflow and no wrapping */
#boqItemsTable th > *,
#boqItemsTable td > *,
#serviceMaterialTable th > *,
#serviceMaterialTable td > * {
    /* Removed max-width to allow content to fully expand the column */
    /* Removed overflow: hidden and text-overflow: ellipsis to allow full text display */
    white-space: nowrap; /* Keep content on a single line */
}

/* Special handling for select2 rendered text inside cells */
#boqItemsTable td .select2-selection__rendered,
#serviceMaterialTable td .select2-selection__rendered {
    /* Removed max-width */
    white-space: nowrap; /* Prevent text from wrapping */
    /* Removed overflow: hidden and text-overflow: ellipsis to allow full text display */
}


/* Styles for dark theme Select2 */
body.dark-theme .select2-container--default .select2-selection--single,
body.dark-theme .select2-container--default .select2-selection--multiple { /* Added multiple for consistency */
    background-color: var(--input-bg); /* Changed to use general input-bg variable for dark mode */
    border-color: var(--border-color); /* Changed to use general border-color variable for dark mode */
    color: var(--text-color); /* Changed to use general text-color variable for dark mode */
}

body.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__rendered { /* Added multiple for consistency */
    color: var(--text-color); /* Changed to use general text-color variable for dark mode */
}

/* This is the key change for the highlighted option text color */
body.dark-theme .select2-results__option--highlighted {
    background-color: var(--primary-dark) !important; /* This should be the orange/gold background */
    color: var(--text-black) !important; /* Force text to black for contrast on orange/gold */
}

body.dark-theme .select2-search input {
    background-color: var(--input-bg) !important; /* Changed to use general input-bg variable for dark mode */
    color: var(--text-color) !important; /* Changed to use general text-color variable for dark mode */
    border-color: var(--border-color) !important; /* Changed to use general border-color variable for dark mode */
}

body.dark-theme .select2-dropdown {
    background-color: var(--input-bg); /* Changed to use general input-bg variable for dark mode */
    border-color: var(--border-color); /* Changed to use general border-color variable for dark mode */
}