/* =============================================================================
   1. GLOBAL OVERRIDES
   Source: theme-overrides.min.css
   ============================================================================= */

a:not(.btn):hover {
    text-decoration: none !important;
}

.breadcrumb>li a {
    padding: 2px 0;
}

.navbar-nav>li>a {
    line-height: 10px;
    padding: 10px;
}


/* =============================================================================
   2. TYPOGRAPHY

   [PTB OVERRIDE] portalbasictheme sets p to 20px and color #000 — override to 16px.
   ============================================================================= */

/* [PTB OVERRIDE] p font-size: portalbasictheme sets 20px */
p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
    font-size: 16px !important;
}

/* [PTB OVERRIDE] links inside crmEntityFormView — sectionPrimaryColor sets color #000 */
.crmEntityFormView p,
.crmEntityFormView a:not(.btn) {
    color: #14558f !important;
}

p,
a.register-auth-link {
    color: #14558f;
}

label,
.smallText {
    font-weight: normal;
    color: #141414;
    font-size: 16px;
    font-family: 'Noto Sans VF';
    margin-bottom: 8px;
}

/* Smaller helper text (e.g. "Don't see your Awarding Authority?") */
p.smallerText {
    font-size: 14px !important;
    color: #141414 !important;
}

.instructions-label {
    font-weight: bold;
}


/* =============================================================================
   3. LAYOUT UTILITIES

   [PTB OVERRIDE] portalbasictheme sets .columnBlockLayout margin 15px / padding 15px
   ============================================================================= */

.columnBlockLayout {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding: 5px !important;
}

/* =============================================
   Consolidate Page Inline Styles
   ============================================= */

/* Shared section block layout (used on both outer row divs) */
.section-block-layout {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  margin: 0px;
}

/* Section block layout with no min-height (breadcrumb row variant) */
.section-block-layout--no-min-height {
  min-height: auto;
}

/* Inner container with stretch alignment */
.container-flex-stretch {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Container with no padding (used in breadcrumb row) */
.container-no-padding {
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

/* Main content column (lg-8 equivalent) */
.column-block-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

/* Full-width header column (lg-12 equivalent) */
.column-block-full {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

/* Sidebar column — narrow (lg-2 equivalent, e.g. AA sidebar) */
.column-block-sidebar {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

/* Sidebar column — wide (lg-4 equivalent, e.g. Requestor summary sidebar) */
.column-block-sidebar--wide {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

/* Content width wrapper */
.content-inner {
  width: 95%;
}

/* Instructions paragraph — NOTE: original had invalid "bottom-margin", corrected to margin-bottom */
.smallText {
  margin-bottom: 8px;
}

/* Required field asterisk */
.required-indicator {
  color: rgb(255, 0, 0);
}


/* =============================================================================
   4. FORM — GENERAL STRUCTURE

   ============================================================================= */

.form-control {
    border: 1px solid #949494;
    border-radius: 0rem !important;
}

/* [PTB OVERRIDE] portalbasictheme sets .crmEntityFormView label { background:#fff; color:#000 } */
.crmEntityFormView label,
.crmEntityFormView label.field-label {
    background-color: transparent !important;
    color: #141414 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-family: 'Noto Sans VF', 'Noto Sans', sans-serif !important;
}

/* [PTB OVERRIDE] portalbasictheme sets border: 1px solid #f2f2f2 on .crmEntityFormView */
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
    border: 0px solid #f2f2f2 !important;
}

.crmEntityFormView .cell {
    padding: 0 8px 10px;
}

.crmEntityFormView .form-control-cell .cell {
    padding: 0 8px 10px;
}

/* Table layout */
.crmEntityFormView table.section {
    width: 100%;
    table-layout: fixed;
}

/* Form actions row */
.crmEntityFormView .actions {
    border-top: none;
    margin: 20px 0;
    padding: 0;
    align-content: center;
}

/* Multi-selector input field */
.crmEntityFormView .text.form-control .form-control.form-select.picklist .cell {
    border: 1px solid #949494;
    border-radius: 8px;
    padding: 0 8px 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/* 
    FORMS CONT. 
    STEP INDICATOR
    TABLE LAYOUT CONFIGURATION, SHOW/HIDE WHEN EMPTY
*/

/* Hide default progress indicator */
.progress-indicator {
    display: none !important;
}

/* Custom Step Indicator - Matching Power Pages Style */
.custom-step-indicator {
    text-align: left;
    font-size: 20px;
    font-weight: normal;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0066cc;
    color: white;
    font-weight: 600;
    font-size: 20px;
}

.step-text {
    color: #333;
    font-size: 20px;
    font-weight: normal;
}

.step-text.bold {
    font-weight: 600;
}

.step-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #d1d1d1;
    color: #666;
    font-weight: 600;
    font-size: 20px;
}

.step-separator {
    color: #333;
    font-size: 20px;
    margin: 0 4px;
}

.step-title {
    color: #333;
    font-size: 20px;
    font-weight: normal;
    margin-left: 4px;
}

/* Screen Reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Style headings with CSS instead of <b> tags */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.ma__colored-heading {
    font-weight: 600;
}

/* Fix color contrast for table header links */
.view-grid table thead th a,
.view-grid table thead th a:link,
.view-grid table thead th a:visited,
.entity-grid table thead th a,
.entity-grid table thead th a:link,
.entity-grid table thead th a:visited,
.modal-lookup table thead th a,
.modal-lookup table thead th a:link,
.modal-lookup table thead th a:visited {
    color: #0056b3 !important;
    font-weight: 600;
}

.view-grid table thead th a:hover,
.view-grid table thead th a:focus,
.entity-grid table thead th a:hover,
.entity-grid table thead th a:focus,
.modal-lookup table thead th a:hover,
.modal-lookup table thead th a:focus {
    color: #003d82 !important;
    text-decoration: underline;
}

/* Ensure the sort icons also have good contrast */
.view-grid table thead th .fa,
.entity-grid table thead th .fa,
.modal-lookup table thead th .fa {
    color: #0056b3 !important;
}

/* Fix button hover contrast - keep original blue */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="submit"]:active,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:focus,
input[type="submit"].btn-primary:active,
#NextButton:hover,
#NextButton:focus,
input[value="Next"]:hover,
input[value="Next"]:focus {
    background-color: #004a99 !important;
    border-color: #004a99 !important;
    color: #ffffff !important;
}

/* Fix pagination horizontal scrollbar */
.modal-lookup .pagination,
.entity-grid .pagination,
.view-grid .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
    justify-content: center !important;
}

.modal-lookup .view-pagination,
.entity-grid .view-pagination,
.view-grid .view-pagination {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Make pagination items wrap instead of scroll */
.modal-lookup .pagination .page-item,
.entity-grid .pagination .page-item,
.view-grid .pagination .page-item {
    margin: 2px !important;
}

/* ===== PROJECT TYPES TABLE - HIDE WHEN EMPTY ===== */

/* Hide "no records" message in Project Types table */
#sg_projecttypes .view-empty {
    display: none !important;
}

/* Hide the "no records" row when table is empty */
#sg_projecttypes table tbody tr td[colspan] {
    display: none !important;
}

/* Hide table headers when there are no data rows */
#sg_projecttypes table:not(:has(tr[data-entity='eol_projecttype'])) thead {
    display: none !important;
}

/* Hide the entire table body when empty */
#sg_projecttypes table:not(:has(tr[data-entity='eol_projecttype'])) tbody {
    display: none !important;
}

/* Hide the entire table when empty */
#sg_projecttypes table:not(:has(tr[data-entity='eol_projecttype'])) {
    display: none !important;
}

/* Hide the toolbar divider line in Project Types table when empty */
#sg_projecttypes .view-toolbar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove focus outline from Select Project Types button */
#sg_projecttypes button:focus,
#sg_projecttypes .btn:focus,
button[onclick*="ProjectType"]:focus {
    /* outline: none !important; MPP-432*/
    box-shadow: none !important;
}

/* ===== TOWNS TABLE - HIDE WHEN EMPTY ===== */

/* Hide "no records" message in Towns table */
#sg_towns .view-empty {
    display: none !important;
}

/* Hide the entire Towns table when there are no data rows */
#sg_towns table:not(:has(tr[data-entity='eol_town'])) {
    display: none !important;
}

/* Hide the toolbar divider line in Towns table when empty */
#sg_towns .view-toolbar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ===== COUNTIES TABLE - HIDE WHEN EMPTY ===== */

/* Hide "no records" message in Counties table */
#sg_counties .view-empty {
    display: none !important;
}

/* Hide the "no records" row when table is empty */
#sg_counties table tbody tr td[colspan] {
    display: none !important;
}

/* Hide table headers when there are no data rows */
#sg_counties table:not(:has(tr[data-entity='eol_county'])) thead {
    display: none !important;
}

/* Hide the entire table body when empty */
#sg_counties table:not(:has(tr[data-entity='eol_county'])) tbody {
    display: none !important;
}

/* Hide the entire table when empty */
#sg_counties table:not(:has(tr[data-entity='eol_county'])) {
    display: none !important;
}

/* Hide the toolbar divider line in Counties table when empty */
#sg_counties .view-toolbar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove focus outline from Select Counties button */
#sg_counties button:focus,
#sg_counties .btn:focus {
    /* outline: none !important; MPP-432*/
    box-shadow: none !important;
}

/* ===== DISTRICTS TABLE - HIDE WHEN EMPTY ===== */

/* Hide "no records" message in Districts table */
#sg_districts .view-empty {
    display: none !important;
}

/* Hide the "no records" row when table is empty */
#sg_districts table tbody tr td[colspan] {
    display: none !important;
}

/* Hide table headers when there are no data rows */
#sg_districts table:not(:has(tr[data-entity='eol_district'])) thead {
    display: none !important;
}

/* Hide the entire table body when empty */
#sg_districts table:not(:has(tr[data-entity='eol_district'])) tbody {
    display: none !important;
}

/* Hide the entire table when empty */
#sg_districts table:not(:has(tr[data-entity='eol_district'])) {
    display: none !important;
}

/* Hide the toolbar divider line in Districts table when empty */
#sg_districts .view-toolbar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove focus outline from Select Districts button */
#sg_districts button:focus,
#sg_districts .btn:focus {
    /* outline: none !important; MPP-432*/
    box-shadow: none !important;
}

/* Only hide empty tables on the SUMMARY tab */
[aria-label="Summary"] .alert-warning.alert-block,
[aria-label="Summary"] .view-empty {
    display: none !important;
}

/* Ensure data-entry tables aren't accidentally hidden by broad rules */
#sg_towns, #sg_counties, #sg_districts {
    display: block !important;
    /* Keep containers active on the entry page */
}

/* Hide the actual TABLE inside the container only if it's truly empty */
#sg_towns table:not(:has(tr[data-entity='eol_town'])),
#sg_counties table:not(:has(tr[data-entity='eol_county'])),
#sg_districts table:not(:has(tr[data-entity='eol_district'])) {
    display: none !important;
}

/* =============================================================================
   5. FORM — FOCUS & HOVER STATES

   [PTB OVERRIDE] portalbasictheme sets .form-control:focus { color: #000000 }
   and ::placeholder { color: #000000 !important }
   ============================================================================= */

/*
 * ACCESSIBILITY FIX — Part 1 #17 / Part 2 #1
 * theme.css was wiping out focus with: border-color:#fff !important; outline:0 !important
 * This restores a visible 3px #14558F focus outline on ALL interactive form fields globally,
 * meeting WCAG 2.1 SC 1.4.11 (3:1) and SC 2.4.7 (visible focus).
 * Applies to: input, textarea, select, and .form-control (covers checkboxes, radios via
 * their containers in Power Pages).
 */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    outline: 3px solid #14558F !important;
    outline-offset: 2px !important;
    border-color: #14558F !important;
    box-shadow: none !important;
}

/* Scoped focus style for crmEntityFormView text fields (kept for specificity) */
.crmEntityFormView .text.form-control:focus {
    border-color: #14558F !important;
    outline: 3px solid #14558F !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* [PTB OVERRIDE] portalbasictheme sets ::placeholder { color: #000000 !important } */
.crmEntityFormView input::placeholder,
.crmEntityFormView textarea::placeholder {
    color: #999 !important;
    font-size: 14px;
}


/* =============================================================================
   6. FORM — BUTTONS

   [PTB OVERRIDE] portalbasictheme overrides .btn-default with green styles —
   the lookup clear/search buttons inside crmEntityFormView should be neutral.
   ============================================================================= */

/* Lookup modal buttons (clear & search icon buttons)
.crmEntityFormView .btn.btn-default.clearlookupfield,
.crmEntityFormView .btn.btn-default.launchentitylookup {
    color: #535353 !important;
    background-color: #f2f2f2 !important;
    border-color: #949494 !important;
    border-radius: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    padding: 6px 10px !important;
}

.crmEntityFormView .btn.btn-default.clearlookupfield:hover,
.crmEntityFormView .btn.btn-default.launchentitylookup:hover {
    background-color: #e0e0e0 !important;
    border-color: #707070 !important;
}*/

/* Modal cancel / remove-value buttons */
.crmEntityFormView .modal-footer .btn.btn-default,
.crmEntityFormView .modal-footer .btn.btn-default.cancel,
.crmEntityFormView .modal-footer .btn.btn-default.remove-value {
    color: #535353 !important;
    background-color: #ffffff !important;
    border-color: #949494 !important;
}

/* View-search search button inside lookup modal */
.crmEntityFormView .view-search .btn.btn-default {
    color: #535353 !important;
    background-color: #f2f2f2 !important;
    border-color: #949494 !important;
    border-radius: 0px !important;
}

/* Match button heights to adjacent input field */
.crmEntityFormView .btn.btn-default.launchentitylookup,
.crmEntityFormView .btn.btn-default.clearlookupfield,
.crmEntityFormView .input-group-addon.btn {
    height: calc(1.5em + 0.75rem + 2px);
    /* matches Bootstrap .form-control height */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}


/* =============================================================================
   7. FORM — MODAL

   ============================================================================= */

/* [PTB OVERRIDE] form-close color */
.crmEntityFormView .form-close {
    color: #535353 !important;
}

.crmEntityFormView .form-close:hover,
.crmEntityFormView .form-close:focus {
    color: #141414 !important;
}


/* =============================================================================
   8. FORM — VALIDATION & HELP TEXT

   [PTB OVERRIDE] portalbasictheme sets .help-block { color: #000000 }
   ============================================================================= */

.help-block {
    color: #535353 !important;
    font-size: 13px;
}

.validation-summary.alert-danger {
    font-size: 14px;
}


/* =============================================================================
   9. FORM — RESPONSIVE

   ============================================================================= */

@media (max-width: 576px) {
    .crmEntityFormView .form-control-cell {
        display: block;
        width: 100%;
    }

    .crmEntityFormView table.section {
        table-layout: auto;
    }
}


/* =============================================================================
   10. FORM — SPECIAL FIELDS

   ============================================================================= */

/* Captcha */
.captcha-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.captcha-cell input {
    width: 200px;
    text-align: left;
}

.captcha-cell label {
    display: block;
    text-align: left;
}

.RadCaptcha img {
    height: 50px;
    width: 180px;
    display: block;
    margin-bottom: 5px;
}

.RadCaptcha .rcRefreshImage,
.RadCaptcha .rcCaptchaAudioLink {
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
}

/* Hide the auto-generated RadCaptcha label (visually) — accessible via aria */
.RadCaptcha label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.RadCaptcha input[type="text"] {
    padding: 8px;
    font-size: 14px;
    width: 100%;
    max-width: 300px;
}

/* File upload */
.file-cell {
    padding: 0px 10px 28px !important;
}

/* Checkbox layout */
.checkboxes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-item {
    flex: 0 1 auto;
}

/* Boolean radio (Also Send to Agent) */
.boolean-radio input[type="radio"] {
    margin-right: 4px;
}

.boolean-radio label {
    font-weight: normal !important;
    font-size: 16px !important;
    margin-right: 12px;
}

#loadingMessage {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.d-none {
    display: none;
}

tr.selected-row {
    background-color: #e8f4fd;
}

/* =====================================================
   BUTTON AND FORM STYLING
   ===================================================== */

/* Button disabled states - prevents interaction when form is processing */
#SearchButton:disabled, #ClearButton:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #ccc !important;
}

/* View button styling to match old submit button - maintains visual consistency */
.view-btn {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* View button hover state - provides user feedback */
.view-btn:hover:not(:disabled) {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: white !important;
}

/* View button disabled state - shown during processing */
.view-btn:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #ccc !important;
}

/* =====================================================
   TABLE STYLING AND LAYOUT
   ===================================================== */

/* Main results table styling - displays search results in a clean format */
#wageTable {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
}

/* Table cells - consistent spacing and borders */
#wageTable th, #wageTable td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

/* Table headers - distinct styling to separate from data */
#wageTable th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Alternating row colors - improves readability of large datasets */
#wageTable tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}

/* Row hover effect - helps user track which row they're viewing */
#wageTable tbody tr:hover {
    background-color: #f0f8ff;
}

/* Selected row highlighting - indicates user selection */
.selected-row {
    background-color: #e6f3ff !important;
}

/* =====================================================
   PAGINATION AND NAVIGATION
   ===================================================== */

/* Pagination controls layout - handles large result sets */
.pagination-controls {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
}

/* Pagination info text styling */
.pagination-info {
    color: #555;
}

/* =====================================================
   PDF DOWNLOAD AND FILE HANDLING
   ===================================================== */

/* PDF download link styling - matches site's link appearance */
.pdf-download-link {
    color: #007bff;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}

/* PDF download link hover state */
.pdf-download-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* =====================================================
   UI LAYOUT AND INFORMATION DISPLAY
   ===================================================== */

/* Table header with count - shows result summary and pagination */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Filter count display - shows number of matching results */
.filter-count {
    font-size: 14px;
    color: #666;
}

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

/* Spinner animation for loading states - provides user feedback during processing */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =============================================================================
   11. FORM — CALLOUT & DISCLAIMER

   ============================================================================= */

.form-disclaimer {
    font-size: 12px !important;
    text-align: center;
    color: #808080 !important;
    margin-top: 10px;
    margin-bottom: 0;
}

.ma__callout-alert__content {
    padding: 5px 10px 0px 10px;
}


/* =============================================================================
   12. FORM — TAB TITLE & PROGRESS

   ============================================================================= */

/* Hide standalone h2.tab-title elements (page-specific forms only) */
h2.tab-title {
    display: none;
}

/* Attachment label spacing */
#eol_attachment_label {
    display: block;
    margin-top: 12px;
}

/* Instructions block bottom spacing */
.instructions {
    margin-bottom: 26px;
}

/* [PTB OVERRIDE] h2 is set globally — tab-title needs its own color/size */
.crmEntityFormView .tab-title {
    font-weight: bold !important;
    font-size: 18px !important;
    color: #14558F !important;
    padding-bottom: 10px;
    border-bottom: 0px solid #eee !important;
}

div.progress-numeric {
    margin: 20px 0;
    padding: 10px;
    list-style: none;
    background: #fdfefd;
    border: solid 1px #f0f0f0;
    border-radius: 0px !important;
    font-weight: 700;
    height: fit-content;
    box-shadow: none !important;
}

div.progress-numeric span.number {
    background-color: #14558f;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 1.6em;
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    width: 40px;
}


/* =============================================================================
   13. LOOKUP MODAL — TABLE & PAGINATION

   [PTB OVERRIDE] portalbasictheme sets .table-info { color: #000000 } which
   affects the column header row in the lookup grid.
   ============================================================================= */

/* Lookup modal search input */
/* ACCESSIBILITY FIX — Part 2 #11: text was right-aligned, must be left-aligned */
.crmEntityFormView .view-search input.query.form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #949494 !important;
    font-size: 14px;
    text-align: left !important;
    line-height: 1.7 !important;
}

/* Remove fixed width on the search container so the input and button
   fill the available space naturally inside the modal */
.entitylist-search {
    width: auto !important;
}

/* Align search row cells to the bottom so input and button sit flush */
.align-top {
    vertical-align: bottom !important;
}

/* Lookup modal table */
.crmEntityFormView .entity-grid .table {
    font-size: 14px;
}

.crmEntityFormView .entity-grid .table thead th {
    background-color: #f2f2f2;
    color: #141414 !important;
    font-weight: 600;
}

/* Sort links in lookup table header */
/* ACCESSIBILITY FIX — Part 2 #9: hover color #8AAAC7 on #f2f2f2 fails 4.5:1 contrast.
 * Replacing with #0d3d6b (darker blue, ~7.5:1 on #f2f2f2) for both hover and focus. */
.crmEntityFormView .entity-grid .table thead th a {
    color: #14558F !important;
    text-decoration: none;
}

.crmEntityFormView .entity-grid .table thead th a:hover,
.crmEntityFormView .entity-grid .table thead th a:focus {
    color: #0d3d6b !important;
    text-decoration: underline;
}


/* =============================================================================
   15. PAGE-SPECIFIC — UPLOAD SECTION, EOL FIELDS & DOWNLOAD BUTTON

   These rules support specific form pages (e.g. wage request upload step).
   ============================================================================= */

/* Finding #39 - Replace layout table + fieldset with CSS flexbox.
   Power Pages renders the upload section inside:
     fieldset[aria-label="Main"] > table[data-name="main_section"]
   We scope to that exact table so other fieldset sections on other tabs
   are not affected. The table display values are overridden with flex so
   cells reflow as a row without any DOM moves, preserving Power Pages event
   listeners and the override-checkbox positioning in secure-upload.js.
   Stacks to a single column at 400% zoom / narrow viewports.
   The zero-cell (<td class="zero-cell">) is a Power Pages placeholder for
   the auto-generated 4th colgroup column — hide it so it doesn't appear
   as an empty block to the right of the three form fields. */
table[data-name="main_section"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
}

table[data-name="main_section"] tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
}

table[data-name="main_section"] tr {
    display: contents !important;
}

table[data-name="main_section"] td.cell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 180px !important;
    min-width: 160px !important;
    padding: 0 !important;
}

/* Hide the empty 4th column Power Pages adds via <colgroup> */
table[data-name="main_section"] td.zero-cell {
    display: none !important;
}

@media (max-width: 480px) {
    table[data-name="main_section"] td.cell {
        flex: 1 1 100% !important;
    }
}

/* Upload section 1 — read-only styling */
table.section[data-name="upload_1"] {
    --upload1-bg: #f3f4f6;
    --upload1-border: #e5e7eb;
    background: var(--upload1-bg) !important;
    border: 0px solid var(--upload1-border) !important;
}

table.section[data-name="upload_1"] .form-control.readonly,
table.section[data-name="upload_1"] .form-control[readonly],
table.section[data-name="upload_1"].form-readonly .form-control,
table.section[data-name="upload_1"] select.form-select.readonly,
table.section[data-name="upload_1"] select.form-select[readonly],
table.section[data-name="upload_1"] .picklist-cell .form-select {
    background-color: var(--upload1-bg) !important;
    border: 0px solid var(--upload1-border) !important;
    box-shadow: none !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    border-radius: .375rem !important;
    cursor: default !important;
}

table.section[data-name="upload_1"] .table-info,
table.section[data-name="upload_1"] .field-label {
    background-color: inherit !important;
}

/* EOL fields — visually locked */
#custom_eol_year_dropdown.eol-locked,
#eol_quarter.eol-locked,
#eol_year.eol-locked {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

/* EOL override checkbox wrapper */
#eol_override_wrapper {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-top: 10px !important;
    padding-bottom: 4px !important;
    margin-left: 2px;
}

#eol_override_wrapper .form-check-input {
    margin: 0;
    flex-shrink: 0;
    position: inherit;
    top: 0;
    cursor: pointer;
}

#eol_override_wrapper .form-check-label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    color: black !important;
    cursor: pointer;
}

#eol_override_wrapper.d-none {
    display: none !important;
}

/* Download button */
.download-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.download-btn .spinner-border {
    flex-shrink: 0;
}


/* =============================================================================
   16. LOOKUP MODAL — SEARCH INSTRUCTIONS
   ACCESSIBILITY FIX — Finding 14
   Visible instruction text rendered above the search input field.
   Linked to the input via aria-describedby="lookup-search-instructions".
   ============================================================================= */
.lookup-search-instructions {
    font-size: 13px !important;
    color: #535353 !important;
    margin-bottom: 6px;
    margin-top: 0;
}