/* 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; */
    max-width: 1300px;
    width: 100%;
    margin: auto;
    /* 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);
    padding-right: var(--spacing-xl);
    /* MODIFIED: Added var(--spacing-md) for padding below the navbar */
    margin-top: calc(70px + var(--spacing-md));
}

/* Style for input fields with an adjacent button */
.input-with-button {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.input-with-button input {
    flex-grow: 1;
}

/* Style for the verification message */
#email-verification-message,
#code-verification-message {
    font-size: 0.9em;
    padding-left: var(--spacing-xs);
    color: var(--text-muted);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.full-width-grid {
    grid-column: 1 / -1;
    /* Make this item span all columns in the grid */
}

/* 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 {
    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 */
}


/* New CSS to blur form fields and center the verification code input */
.blur-overlay {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
    pointer-events: none;
    user-select: none;
}

/* Hide verification message when form is enabled */
.unverified-message {
    display: none !important;
}

.verified-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9em;
    color: var(--success-color);
    font-weight: bold;
}