/* FPT Modern Theme - Styled to Match FPT Metals Website
   Keeping original layout structure, updating colors, fonts, and adding new sections */

/* Poppins Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* Base Typography - Use Poppins */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

h1 {
    font-weight: 400;
}

/* Modern Color Updates - Deep Blues */
#topBar {
    /* Hide the empty top bar to remove extra space */
    display: none !important;
}

.header,
.top-bar {
    background-color: #1a3a5f !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the entire menu bar strip matches (legacy CSS sets inner header to a different blue) */
#inner-header,
#container .header #inner-header,
.navWrap,
.contain-to-grid,
.top-bar-section,
.top-bar-section ul,
.top-bar-section ul li,
.top-bar-section ul li > a {
    background-color: #1a3a5f !important;
}

.footer {
    background-color: #0f2538 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove gaps and expand blue areas to full width */
#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#content,
#inner-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inner-wrap,
.off-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

/* Expand rows to full width within blue sections */
#topBar .row,
.header .row,
.footer .row,
.footer-content .row,
.footer-bottom .row {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* Header Styling */
#titleBar {
    background-color: #f5f7fa !important;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.siteLogo {
    text-align: center;
}

.siteLogo img {
    max-height: 60px;
    width: auto;
    margin: 0 auto;
}

/* Remove/Hide the blue headerSquare border */
.headerSquare {
    display: none !important;
}

#container .header #inner-header .headerSquare {
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    width: 0 !important;
}

#titleBar .row {
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
}

#titleBar .columns {
    float: none;
    display: inline-block;
    text-align: center;
}

.siteLogo img {
    /* Make the FPT logo prominent while keeping it responsive */
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive tuning */
@media (max-width: 640px) {
    .siteLogo img {
        max-height: 65px;
    }
}

@media (min-width: 1024px) {
    .siteLogo img {
        max-height: 90px;
    }
}

.certification-image {
    max-height: 50px;
    width: auto;
}

.contactInfo h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #6a6a6a;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contactInfo p,
#container #titleBar .contactInfo p,
.contactInfo .textwidget p,
#enhancedtextwidget-7 p {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000 !important;
    margin: 0;
}

.contactInfo .foundicon-phone {
    color: #ff8c00;
    margin-right: 0.5rem;
}

/* Navigation Styling */
.top-bar-section ul li a {
    color: #ffffff !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.25rem !important;
    transition: background-color 0.3s ease;
}

.top-bar-section ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.top-bar-section ul li.active > a {
    background-color: #ff8c00 !important;
    color: #ffffff !important;
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section {
    /* Full-bleed section (removes white gutters caused by Foundation .row/.columns layout) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
}

.hero-image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

/* ============================================
   Welcome Section
   ============================================ */
.welcome-section {
    background-color: #1a4a5f;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%);
    /* Full-bleed section (removes white gutters caused by Foundation .row/.columns layout) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 2rem 2rem 1.5rem 2rem;
    text-align: center;
    color: #ffffff;
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.welcome-tagline {
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    color: #ff8c00;
    margin-bottom: 0.75rem;
}

.welcome-description {
    font-size: 0.95rem;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto 1rem;
    line-height: 1.6;
}

.welcome-cta {
    margin-top: 1rem;
}

.sign-in-button {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
}

.sign-in-button:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a3a5f;
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.1rem;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ============================================
   Authenticated User Section
   ============================================ */
.authenticated-section {
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 0 !important;
}

.authenticated-section .row {
    max-width: 100%;
    margin: 0 auto;
}

.authenticated-section .section-heading {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.authenticated-section .section-subheading {
    font-size: 1rem;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-align: center;
}

/* Authenticated section has white background – force black text so headings/subheadings are readable (override blanket white-on-blue) */
body #content #main .authenticated-section .section-heading,
body #content #main .authenticated-section .section-subheading,
body #content #main .authenticated-section p.section-subheading,
#main .authenticated-section .section-heading,
#main .authenticated-section .section-subheading,
#main .authenticated-section p.section-subheading {
    color: #000000 !important;
}

.authenticated-section .ferrous-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

/* ============================================
   Disclaimer Section (Above Footer)
   ============================================ */
.bordertopthick {
    border-top: none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
    background-color: #1a4a5f !important;
    padding: 1rem 2rem;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove white space between sections */
#rev_slider_4_1_wrapper {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove white space between hero banner and welcome section */
#rev_slider_4_1_wrapper + .row.mobile-spacing,
.row.mobile-spacing-no-top {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
}

#rev_slider_4_1_wrapper + .row.mobile-spacing #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: transparent !important;
}

/* Change the row wrapper background to match blue sections when it contains welcome section */
.row.mobile-spacing {
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
}

/* Ensure main content area and columns don't have white background */
#main,
#main.columns,
.row.mobile-spacing .columns {
    background-color: transparent !important;
}

.welcome-section {
    margin-top: 0 !important;
}

/* Remove white space between welcome section and disclaimer */
.welcome-section + *,
.authenticated-section + .bordertopthick,
.welcome-section ~ .bordertopthick {
    margin-top: 0 !important;
}

/* Ensure no margin on row containing main content when followed by disclaimer */
.row.mobile-spacing + .bordertopthick,
#main + .bordertopthick,
.row.mobile-spacing {
    margin-bottom: 0 !important;
}

/* Remove any margin from the row wrapper before disclaimer */
#inner-content > .row.mobile-spacing:last-of-type {
    margin-bottom: 0 !important;
}

/* Ensure disclaimer connects directly to content above */
#inner-content .bordertopthick {
    margin-top: 0 !important;
}

/* Remove any background color gaps */
#rev_slider_4_1_wrapper {
    background-color: transparent !important;
}

/* Ensure no padding/margin on inner content wrapper */
#inner-content {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
}

/* Remove any default row spacing that creates gaps */
#inner-content > .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure content area background matches blue sections */
#content {
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
}

.bordertopthick .row,
.bordertopthick .col-lg-12 {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.orbit-bullets-container {
    color: #ffffff;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* ============================================
   Footer Styling
   ============================================ */
.footer {
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%);
    color: #ffffff;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    min-height: auto;
    clear: both;
}

.footerBottom {
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
    background-color: #1a4a5f !important;
    padding: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.footer-content {
    padding: 3rem 0 2rem;
    margin: 0 auto;
    width: 100%;
}

.footer-content .row {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
    box-sizing: border-box;
}

.footer-column {
    margin-bottom: 0;
    padding: 0;
    flex: 0 0 250px;
    text-align: left;
}

.footer-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ff8c00;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-text {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.8;
    margin: 0;
}

.footer-link {
    color: #ff8c00;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Version text in footer should NOT behave like a link */
.footer-version-text {
    color: #ff8c00;
    text-decoration: none;
}

.footer-version-text:hover {
    color: #ff8c00;
    text-decoration: none;
    cursor: default;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 2rem 1.5rem;
    margin: 0;
    clear: both;
}

.footer-links {
    margin-bottom: 1rem;
    padding: 0;
}

.footer-links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-nav-left {
    flex: 1;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-version {
    margin-left: auto;
    white-space: nowrap;
}

/* Center version text, footer columns, and authenticated-section buttons on mobile */
@media screen and (max-width: 640px) {
    .footer-version {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .footer-column {
        text-align: center;
    }

    .authenticated-section .large-12.columns {
        text-align: center;
    }

    .authenticated-section .ferrous-buttons {
        justify-content: center !important;
        align-items: center !important;
    }

    .authenticated-section .ferrous-buttons .button,
    .authenticated-section .ferrous-buttons a.button {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
}

/* Same centering for authenticated-section buttons at tablet/mobile (768px) */
@media screen and (max-width: 768px) {
    #main .authenticated-section .large-12.columns {
        text-align: center !important;
    }

    #main .authenticated-section .ferrous-buttons {
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column;
    }

    #main .authenticated-section .ferrous-buttons .button,
    #main .authenticated-section .ferrous-buttons a.button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.footer-menu li {
    margin: 0;
}

.footer-menu .footer-link {
    color: #e0e0e0;
    font-size: 1.1rem;
    text-decoration: none;
}

.footer-menu .footer-link:hover {
    color: #ff8c00;
    text-decoration: none;
}

.footer-copyright {
    text-align: center;
    padding: 1rem 2rem 2rem;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent !important;
    clear: both;
}

.footer-copyright p {
    font-size: 0.85rem;
    color: #e0e0e0;
    margin: 0;
}

/* ============================================
   Responsive Design
   ============================================ */
@media screen and (max-width: 768px) {
    .welcome-title {
        font-size: 1.75rem;
    }
    
    .welcome-tagline {
        font-size: 1.25rem;
    }
        
    .section-heading {
        font-size: 1.5rem;
    }
        
    .footer-column {
        margin-bottom: 2.5rem;
    }
    
    .footer-menu {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Button Colors - Orange by default, Red on hover */
/* Override all button styles to be orange by default, red on hover */
button,
.button,
.btn,
.btn-primary,
.button.primary,
.button.non-main-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
button[type="button"],
button[type="reset"] {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.button.primary:hover,
.button.primary:focus,
.button.non-main-button:hover,
.button.non-main-button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="button"]:hover,
button[type="button"]:focus,
button[type="reset"]:hover,
button[type="reset"]:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Ensure secondary buttons also follow the orange/red pattern */
button.secondary,
.button.secondary {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Table Header Colors - White text for better readability */
table thead {
    background-color: #1a3a5f !important;
}

/* White text for all table headers */
table thead th,
table thead td,
table thead tr th,
table thead tr td,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead tr th,
table.dataTable thead tr td,
.tablesorter-default thead th,
.tablesorter-default thead td {
    color: #ffffff !important;
}

/* Text Colors */
.text-primary {
    color: #1a3a5f !important;
}

.estimated {
    color: #dc3545;
    font-style: italic;
}

/* ============================================
   Account/Login Page - White Text on Blue Background
   ============================================ */
/* Target the h1 heading on login page - appears before row with login form */
/* Using adjacent sibling selector to target h1 before row containing #loginForm */
#main > h1:first-child {
    color: #ffffff !important;
}

/* Target all text elements within the login form */
#loginForm,
#loginForm h1,
#loginForm h2,
#loginForm h3,
#loginForm h4,
#loginForm h5,
#loginForm h6,
#loginForm p,
#loginForm label,
#loginForm .control-label,
#loginForm .form-group label,
#loginForm .checkbox label {
    color: #ffffff !important;
}

/* Target paragraph and labels in the same row/column as login form */
.row .col-md-8 p,
.row .col-md-8 label,
.row .col-md-8 .control-label {
    color: #ffffff !important;
}

/* Make validation messages visible but still distinct (light red/pink) */
#loginForm .text-danger,
#loginForm .validation-summary-errors,
#loginForm .field-validation-error,
.row .col-md-8 .text-danger {
    color: #ffcccc !important;
}

/* Keep input fields readable with dark text on light background */
#loginForm input[type="text"],
#loginForm input[type="email"],
#loginForm input[type="password"],
#loginForm input[type="checkbox"],
#loginForm select,
#loginForm textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* ============================================
   Purchase Orders, Purchase Shipments, Sales Orders, Sales Shipments
   White Text on Blue Background
   ============================================ */
/* Target all headings on these pages (in blue background area) */
#inner-content #main h1,
#content #main h1 {
    color: #ffffff !important;
}

/* Target all text in .in class divs (Dates:, Pre-Set:, Location:, etc.) */
#inner-content .mobile-spacing .in,
#inner-content .mobile-spacing .in *:not(input):not(select):not(button):not(.btn),
#content .mobile-spacing .in,
#content .mobile-spacing .in *:not(input):not(select):not(button):not(.btn) {
    color: #ffffff !important;
}

/* Override .text-gray to be white instead of gray (only in blue background area) */
#inner-content .mobile-spacing .text-gray,
#content .mobile-spacing .text-gray {
    color: #ffffff !important;
}

/* Target small text (disclaimers) */
#inner-content .mobile-spacing .text-sm,
#inner-content .mobile-spacing .text-sm *:not(.estimated),
#content .mobile-spacing .text-sm,
#content .mobile-spacing .text-sm *:not(.estimated) {
    color: #ffffff !important;
}

/* Table headers in mobile-spacing – dark background, white text */
#inner-content .mobile-spacing table thead,
#inner-content .mobile-spacing table thead th,
#inner-content .mobile-spacing table thead td,
#content .mobile-spacing table thead,
#content .mobile-spacing table thead th,
#content .mobile-spacing table thead td {
    color: #ffffff !important;
    background-color: #1a3a5f !important;
}

/* Table body/data cells – black text on white/light so grid data is readable */
#inner-content .mobile-spacing table tbody td,
#inner-content .mobile-spacing table tbody td a,
#inner-content .mobile-spacing table tbody td *:not(input):not(select):not(button):not(.btn):not(.estimated),
#content .mobile-spacing table tbody td,
#content .mobile-spacing table tbody td a,
#content .mobile-spacing table tbody td *:not(input):not(select):not(button):not(.btn):not(.estimated) {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Data grid links – black by default */
#inner-content .mobile-spacing table tbody td a,
#inner-content .mobile-spacing table td a.purchaseorderlink,
#inner-content .mobile-spacing table td a.salesorderlink,
#content .mobile-spacing table tbody td a,
#content .mobile-spacing table td a.purchaseorderlink,
#content .mobile-spacing table td a.salesorderlink {
    color: #000000 !important;
}

/* Data grid links on hover */
#inner-content .mobile-spacing table tbody td a:hover,
#inner-content .mobile-spacing table td a.purchaseorderlink:hover,
#inner-content .mobile-spacing table td a.salesorderlink:hover,
#content .mobile-spacing table tbody td a:hover,
#content .mobile-spacing table td a.purchaseorderlink:hover,
#content .mobile-spacing table td a.salesorderlink:hover {
    color: #0066cc !important;
    text-decoration: underline;
}

/* Keep estimated pricing in red italics (already styled) */
.estimated {
    color: #dc3545 !important;
    font-style: italic;
}

/* Keep input fields readable with dark text on light background */
#inner-content .mobile-spacing input[type="text"],
#inner-content .mobile-spacing input[type="email"],
#inner-content .mobile-spacing input[type="date"],
#inner-content .mobile-spacing select,
#inner-content .mobile-spacing textarea,
#content .mobile-spacing input[type="text"],
#content .mobile-spacing input[type="email"],
#content .mobile-spacing input[type="date"],
#content .mobile-spacing select,
#content .mobile-spacing textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Target labels and other text elements */
#inner-content .mobile-spacing label,
#inner-content .mobile-spacing .col-lg-12,
#inner-content .mobile-spacing .col-lg-12 *:not(input):not(select):not(textarea):not(button):not(.btn):not(.estimated),
#content .mobile-spacing label,
#content .mobile-spacing .col-lg-12,
#content .mobile-spacing .col-lg-12 *:not(input):not(select):not(textarea):not(button):not(.btn):not(.estimated) {
    color: #ffffff !important;
}

/* Target orbit-bullets-container text (disclaimer sections) */
#inner-content .orbit-bullets-container,
#inner-content .orbit-bullets-container *:not(.estimated),
#content .orbit-bullets-container,
#content .orbit-bullets-container *:not(.estimated) {
    color: #ffffff !important;
}

/* ============================================
   BLANKET: Force white text everywhere in #content #main (PO, PS, SO, SS pages)
   Overrides style.css and any dark/gray text. Use highest specificity.
   ============================================ */
body #content #main,
body #content #main h1,
body #content #main h2,
body #content #main h3,
body #content #main h4,
body #content #main h5,
body #content #main h6,
body #content #main p,
body #content #main span:not(.estimated),
body #content #main div,
body #content #main label,
body #content #main .in,
body #content #main .text-gray,
body #content #main .text-sm,
body #content #main .col-lg-12,
body #content #main table thead,
body #content #main table thead th,
body #content #main table thead td,
body #content #main .orbit-bullets-container,
body #content #main .mobile-spacing,
body #content #main .table-responsive {
    color: #ffffff !important;
}

body #content #main table td a:hover,
body #content #main table td a.purchaseorderlink:hover,
body #content #main table td a.salesorderlink:hover {
    color: #ffcccc !important;
    text-decoration: underline;
}

/* Keep form controls readable */
body #content #main input[type="text"],
body #content #main input[type="email"],
body #content #main input[type="date"],
body #content #main input[type="number"],
body #content #main select,
body #content #main textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* DataTables search/filter on order screens: white text on blue so it's readable */
body #content #main .dataTables_wrapper .dataTables_filter label,
body #inner-content .dataTables_wrapper .dataTables_filter label,
#content #main .dataTables_wrapper .dataTables_filter label {
    color: #ffffff !important;
}
body #content #main .dataTables_wrapper .dataTables_filter input,
body #inner-content .dataTables_wrapper .dataTables_filter input,
#content #main .dataTables_wrapper .dataTables_filter input {
    color: #ffffff !important;
    background-color: #1a3a5f !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
body #content #main .dataTables_wrapper .dataTables_filter input::placeholder,
body #inner-content .dataTables_wrapper .dataTables_filter input::placeholder,
#content #main .dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Buttons in main content: default state = white/light background + BLACK text so label is visible */
body #content #main .btn,
body #content #main .btn-primary,
body #content #main input[type="button"],
body #content #main input[type="submit"],
body #content #main button[type="button"],
body #content #main button[type="submit"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #ccc !important;
}

/* DataTables export buttons in #exportbar – black text on white so labels (Export, etc.) are visible */
body #content #main #exportbar .dt-button,
body #content #main #exportbar button.dt-button,
body #content #main #exportbar .dt-buttons .dt-button,
body #content #main #exportbar .dt-buttons button.dt-button,
body #content #main #exportbar button,
body #content #main #exportbar .dt-buttons button {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #666 !important;
}

body #content #main #exportbar .dt-button:hover:not(.disabled),
body #content #main #exportbar button.dt-button:hover:not(.disabled),
body #content #main #exportbar .dt-buttons .dt-button:hover:not(.disabled),
body #content #main #exportbar .dt-buttons button.dt-button:hover:not(.disabled) {
    color: #ffffff !important;
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}

/* Ensure text and img inside export buttons stay visible (black by default) */
body #content #main #exportbar .dt-button,
body #content #main #exportbar .dt-button span,
body #content #main #exportbar .dt-button img {
    color: #000000 !important;
}

/* Hover/focus: orange/red with white text */
body #content #main .btn:hover,
body #content #main .btn:focus,
body #content #main .btn-primary:hover,
body #content #main .btn-primary:focus,
body #content #main input[type="button"]:hover,
body #content #main input[type="button"]:focus,
body #content #main input[type="submit"]:hover,
body #content #main input[type="submit"]:focus,
body #content #main button[type="button"]:hover,
body #content #main button[type="button"]:focus,
body #content #main button[type="submit"]:hover,
body #content #main button[type="submit"]:focus {
    color: #ffffff !important;
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}

/* Dropdown text (select and options) – black text */
body #content #main select,
body #content #main select option {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* White / light buttons – black text */
body #content #main .btn-default,
body #content #main .btn-default:hover,
body #content #main .btn-default:focus,
body #content #main .btn-default:active,
body #content #main input[type="button"].btn-default,
body #content #main button.btn-default,
body #content #main .btn-light,
body #content #main .btn-light:hover,
body #content #main .btn-light:focus,
body #content #main .btn-light:active {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #ccc !important;
}

/* Ensure dropdowns (select-sm, mw135, etc.) keep black text */
body #content #main select.select-sm,
body #content #main select.mw135,
body #content #main select.mw135.select-sm {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Estimated pricing stays red */
body #content #main .estimated {
    color: #dc3545 !important;
    font-style: italic;
}

/* Data grid: HEADER row – dark background, white text (keeps headers visible) */
body #content #main table thead,
body #content #main table thead th,
body #content #main table thead td,
body #content #main table.dataTable thead,
body #content #main table.dataTable thead th,
body #content #main table.dataTable thead td,
body #content #main .table thead,
body #content #main .table thead th,
body #content #main .table thead td,
#content #main table thead,
#content #main table thead th,
#content #main table thead td,
#inner-content table thead,
#inner-content table thead th,
#inner-content table thead td,
#inner-content table.dataTable thead,
#inner-content table.dataTable thead th,
#inner-content table.dataTable thead td {
    color: #ffffff !important;
    background-color: #1a3a5f !important;
}

/* Data grid: BODY/DATA cells only – black text on white (do not style thead) */
body #content #main table tbody td,
body #content #main table tbody td a,
body #content #main table.dataTable tbody td,
body #content #main table.dataTable tbody td a,
body #content #main .table tbody td,
body #content #main .table tbody td a,
#content #main table tbody td,
#content #main table tbody td a,
#content #main table.dataTable tbody td,
#content #main table.dataTable tbody td a,
#inner-content table tbody td,
#inner-content table tbody td a,
#inner-content table.dataTable tbody td,
#inner-content table.dataTable tbody td a {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* FPT # column (left-hand): make order/shipment links clearly look clickable – blue, underline */
body #content #main table tbody td a.purchaseorderlink,
body #content #main table tbody td a.salesorderlink,
#content #main table tbody td a.purchaseorderlink,
#content #main table tbody td a.salesorderlink,
#inner-content table tbody td a.purchaseorderlink,
#inner-content table tbody td a.salesorderlink {
    color: #0066cc !important;
    text-decoration: underline;
    cursor: pointer;
}

/* Data grid body links – hover state for FPT # links */
body #content #main table tbody td a:hover,
body #content #main table tbody td a.purchaseorderlink:hover,
body #content #main table tbody td a.salesorderlink:hover,
#content #main table tbody td a:hover,
#content #main table tbody td a.purchaseorderlink:hover,
#content #main table tbody td a.salesorderlink:hover,
#inner-content table tbody td a.purchaseorderlink:hover,
#inner-content table tbody td a.salesorderlink:hover {
    color: #004499 !important;
    text-decoration: underline;
}

/* Drill-down modal popups (Purchase Order / Sales Order) – proper font, lighter weight, readable color */
.modal .modal-content,
.modal .modal-dialog {
    font-family: 'Poppins', sans-serif;
}

/* Modal header: main title – dark gray (easier to read), normal weight */
.modal .modal-header,
.modal .modal-header .modal-title,
.modal .modal-header h2.modal-title,
body .modal .modal-header,
body .modal .modal-header .modal-title,
body #content #main .modal .modal-header,
body #content #main .modal .modal-header .modal-title {
    color: #333333 !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif;
}
.modal .modal-header .close {
    color: #333333 !important;
    opacity: 0.8;
}

/* Modal body: section headings (Order, Details) – dark gray, normal weight */
.modal .modal-body,
.modal .modal-body h1,
.modal .modal-body h2,
.modal .modal-body h3,
.modal .modal-body h4,
.modal .modal-body h5,
.modal .modal-body h6,
body .modal .modal-body,
body .modal .modal-body h1,
body .modal .modal-body h2,
body #content #main .modal .modal-body,
body #content #main .modal .modal-body h1,
body #content #main .modal .modal-body h2 {
    color: #333333 !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif;
}
.modal .modal-body h2 {
    font-size: 1.25rem;
}

/* Modal table headers (FPT #, Effective Date, etc.) – white text on dark blue for readability */
.modal .modal-body table thead,
.modal .modal-body table thead th,
.modal .modal-body table thead td,
body .modal .modal-body table thead,
body .modal .modal-body table thead th,
body .modal .modal-body table thead td,
body #content #main .modal .modal-body table thead,
body #content #main .modal .modal-body table thead th,
body #content #main .modal .modal-body table thead td {
    color: #ffffff !important;
    background-color: #1a3a5f !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif;
}

/* Modal body table data and links */
.modal .modal-body table tbody td,
.modal .modal-body table tbody td a,
body .modal .modal-body table tbody td,
body #content #main .modal .modal-body table tbody td,
body #content #main .modal .modal-body table tbody td a {
    color: #333333 !important;
    font-family: 'Poppins', sans-serif;
}

/* Modal footer text */
.modal .modal-footer,
.modal .modal-footer .btn,
body .modal .modal-footer,
body #content #main .modal .modal-footer {
    color: #333333 !important;
    font-family: 'Poppins', sans-serif;
}

/* ============================================
   Data grid PAGINATION buttons – black text on white so numbers/Previous/Next are visible
   Use body + #content #main / #inner-content for high specificity so we beat inherited white
   ============================================ */

/* Override blanket white: force entire pagination block and all descendants to black.
   Active/current link rules below override this for the selected page. */
body #content #main .dataTables_wrapper .dataTables_paginate,
body #content #main .dataTables_wrapper .dataTables_paginate *,
body #inner-content .dataTables_wrapper .dataTables_paginate,
body #inner-content .dataTables_wrapper .dataTables_paginate *,
#content .dataTables_wrapper .dataTables_paginate,
#content .dataTables_wrapper .dataTables_paginate * {
    color: #000000 !important;
}

body #content #main .dataTables_wrapper .dataTables_paginate ul.pagination li a.page-link,
body #content #main .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a.page-link,
body #inner-content .dataTables_wrapper .dataTables_paginate ul.pagination li a.page-link,
body #inner-content .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a.page-link,
#content #main .dataTables_wrapper .dataTables_paginate ul.pagination li a.page-link,
#content .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a.page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.active):not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.active):not(.disabled) a,
.dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) .page-link,
.dataTables_wrapper .dataTables_paginate .page-item:not(.active) .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li:not(.active) a.page-link,
.dataTables_paginate .paginate_button:not(.current):not(.active):not(.disabled),
.dataTables_paginate .paginate_button:not(.current):not(.active):not(.disabled) a,
.dataTables_paginate ul.pagination li:not(.active) .page-link,
.dataTables_paginate .page-item:not(.active) .page-link,
.dataTables_wrapper .dataTables_paginate a.page-link,
div.dataTables_wrapper div.dataTables_paginate a.page-link {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #666 !important;
}

/* Force pagination container and all non-active links to black (override any inherited white) */
body .dataTables_wrapper .dataTables_paginate,
body .dataTables_wrapper .dataTables_paginate ul.pagination,
body .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) {
    color: #000000 !important;
}

body .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a,
body .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) .page-link {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #666 !important;
}

/* Pagination: any a or span inside paginate that isn't in .active – black text (highest specificity) */
body #content #main .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a,
body #content #main .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a.page-link,
body #inner-content .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a,
body #inner-content .dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) a.page-link,
body .dataTables_wrapper .dataTables_paginate .pagination li:not(.active) a,
body .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.active) .page-link {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #666 !important;
}

/* Active/current page: white on blue (must override the pagination * black rule above) */
body #content #main .dataTables_wrapper .dataTables_paginate ul.pagination li.active .page-link,
body #content #main .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
body #inner-content .dataTables_wrapper .dataTables_paginate ul.pagination li.active .page-link,
body #inner-content .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.dataTables_wrapper .dataTables_paginate ul.pagination li.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a.page-link,
.dataTables_paginate .paginate_button.current a,
.dataTables_paginate .paginate_button.active a,
.dataTables_paginate .page-item.active .page-link {
    color: #ffffff !important;
    background-color: #1a3a5f !important;
    border-color: #1a3a5f !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.active):not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.active):not(.disabled) a,
.dataTables_wrapper .dataTables_paginate ul.pagination li:not(.active) .page-link:hover,
.dataTables_paginate .paginate_button:hover:not(.current):not(.active):not(.disabled) a,
.dataTables_paginate .page-item:not(.active) .page-link:hover {
    color: #ffffff !important;
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.dataTables_paginate .paginate_button.disabled a,
.dataTables_paginate .page-item.disabled .page-link {
    color: #666666 !important;
    background-color: #eeeeee !important;
    border-color: #ccc !important;
}

/* ============================================
   SITE-WIDE: Buttons in content areas – black text on white (all layouts)
   Prevents white-on-white on any page. Overrides global orange rule for content.
   ============================================ */
#inner-content .btn,
#inner-content .btn-primary,
#inner-content button,
#inner-content input[type="button"],
#inner-content input[type="submit"],
#content .btn,
#content .btn-primary,
#content button,
#content input[type="button"],
#content input[type="submit"],
#content #main .btn,
#content #main .btn-primary,
#content #main button,
#content #main input[type="button"],
#content #main input[type="submit"],
#exportbar .btn,
#exportbar button,
#exportbar .dt-button,
#exportbar .dt-buttons .dt-button,
#exportbar .dt-buttons button,
.dt-button,
button.dt-button,
.dt-buttons .dt-button {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #666 !important;
}

#inner-content .btn:hover,
#inner-content .btn:focus,
#inner-content button:hover,
#inner-content input[type="button"]:hover,
#inner-content input[type="submit"]:hover,
#content .btn:hover,
#content .btn-primary:hover,
#content button:hover,
#content input[type="button"]:hover,
#content input[type="submit"]:hover,
#content #main .btn:hover,
#content #main .btn:focus,
#content #main button:hover,
#content #main input[type="button"]:hover,
#content #main input[type="submit"]:hover,
#exportbar .dt-button:hover:not(.disabled),
#exportbar button.dt-button:hover:not(.disabled),
.dt-button:hover:not(.disabled),
button.dt-button:hover:not(.disabled) {
    color: #ffffff !important;
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}