/* ============================================================
   MES B2B — fixes.css
   Text contrast + visibility fixes across entire site
   Load AFTER main.css in header.php
   ============================================================ */

/* ─── 1. GLOBAL: ensure dark text is always readable ─────────*/
body {
    color: #2d3748;
}

/* All headings on white/light backgrounds — force dark */
h1, h2, h3, h4, h5, h6 {
    color: #1a2744;
}

p, li, td, th, label, span, div {
    /* Don't override — but ensure inherited colour is visible */
}

/* ─── 2. PRODUCT CARDS ────────────────────────────────────── */
.product-card {
    background: #ffffff;
}
.product-card .card-body {
    background: #ffffff;
}
.product-card .product-name {
    color: #1a2744 !important;
    font-weight: 600;
}
.product-card .product-sku {
    color: #718096 !important;
}
.product-card .product-price {
    color: #e8521a !important;
    font-weight: 700;
}
.product-card .product-moq {
    color: #718096 !important;
}
.product-card .card-footer {
    background: #f9fafb !important;
}

/* ─── 3. HOME PAGE HERO ───────────────────────────────────── */
.hero-section {
    color: #ffffff;
}
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.hero-section span {
    color: inherit;
}
.hero-section .hero-tagline {
    color: #ffffff !important;
}
.hero-section .hero-sub {
    color: rgba(255,255,255,0.88) !important;
}

/* ─── 4. STATS BAR ────────────────────────────────────────── */
.stats-bar {
    color: #ffffff;
}
.stats-bar .stat-number,
.stats-bar .stat-label {
    color: #ffffff !important;
}

/* ─── 5. SECTION TITLES ───────────────────────────────────── */
.section-title {
    color: #1a2744 !important;
}
.section-title .accent {
    color: #e8521a !important;
}

/* ─── 6. PAGE HEADER (navy bg) ───────────────────────────── */
.page-header {
    background: #1a2744;
}
.page-header h1,
.page-header p,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item.active {
    color: #ffffff !important;
}
.page-header .breadcrumb-item a {
    color: rgba(255,255,255,0.75) !important;
}
.page-header .breadcrumb-item a:hover {
    color: #ffffff !important;
}

/* ─── 7. MES CARD ─────────────────────────────────────────── */
.mes-card {
    background: #ffffff;
}
.mes-card .mes-card-header {
    background: #1a2744;
    color: #ffffff !important;
}
.mes-card .mes-card-header * {
    color: #ffffff !important;
}
.mes-card .mes-card-body {
    background: #ffffff;
    color: #2d3748;
}

/* CMS content inside card */
.cms-content {
    color: #2d3748 !important;
    font-size: 15px;
    line-height: 1.8;
}
.cms-content h1, .cms-content h2,
.cms-content h3, .cms-content h4 {
    color: #1a2744 !important;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.cms-content p {
    color: #2d3748 !important;
    margin-bottom: 1em;
}
.cms-content li {
    color: #2d3748 !important;
    margin-bottom: 0.3em;
}
.cms-content a {
    color: #e8521a !important;
}
.cms-content strong {
    color: #1a2744 !important;
}

/* ─── 8. TABLES ───────────────────────────────────────────── */
.mes-table thead th {
    background: #1a2744 !important;
    color: #ffffff !important;
}
.mes-table tbody td {
    color: #2d3748 !important;
    background: #ffffff;
}
.mes-table tbody tr:hover td {
    background: #f4f6f8 !important;
    color: #1a2744 !important;
}

/* ─── 9. SIDEBAR NAVIGATION ───────────────────────────────── */
.sidebar-nav {
    background: #ffffff;
}
.sidebar-nav .nav-header {
    background: #1a2744;
    color: #ffffff !important;
}
.sidebar-nav .nav-link {
    color: #2d3748 !important;
    background: #ffffff;
}
.sidebar-nav .nav-link:hover {
    background: #f4f6f8 !important;
    color: #1a2744 !important;
}
.sidebar-nav .nav-link.active {
    background: rgba(26,39,68,0.06) !important;
    color: #1a2744 !important;
    font-weight: 600;
}
.sidebar-nav .nav-link .bi {
    color: #718096;
}
.sidebar-nav .nav-link.active .bi {
    color: #e8521a !important;
}

/* ─── 10. CUSTOMER DASHBOARD ──────────────────────────────── */
.dash-stat-card {
    background: #ffffff;
}
.dash-stat-number {
    color: #1a2744 !important;
}
.dash-stat-label {
    color: #718096 !important;
}

/* ─── 11. FOOTER ──────────────────────────────────────────── */
.site-footer {
    background: #111b33;
    color: rgba(255,255,255,0.75);
}
.site-footer h5 {
    color: #ffffff !important;
}
.site-footer p,
.site-footer li,
.site-footer span {
    color: rgba(255,255,255,0.72);
}
.site-footer a {
    color: rgba(255,255,255,0.72) !important;
}
.site-footer a:hover {
    color: #e8521a !important;
}
.footer-bottom {
    color: rgba(255,255,255,0.5) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom a {
    color: rgba(255,255,255,0.6) !important;
}
.footer-bottom a:hover {
    color: #e8521a !important;
}
.cert-badge {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* ─── 12. BUTTONS ─────────────────────────────────────────── */
.btn-primary-mes,
.btn-primary-mes:visited {
    background: #1a2744;
    color: #ffffff !important;
}
.btn-primary-mes:hover {
    background: #253356;
    color: #ffffff !important;
}
.btn-orange,
.btn-orange:visited {
    background: #e8521a;
    color: #ffffff !important;
}
.btn-orange:hover {
    background: #c9420d;
    color: #ffffff !important;
}
.btn-outline-mes {
    background: transparent;
    color: #1a2744 !important;
    border: 1.5px solid #1a2744;
}
.btn-outline-mes:hover {
    background: #1a2744 !important;
    color: #ffffff !important;
}

/* ─── 13. NAVBAR ──────────────────────────────────────────── */
.navbar-mes .nav-link {
    color: rgba(255,255,255,0.85) !important;
}
.navbar-mes .nav-link:hover,
.navbar-mes .nav-link.active {
    color: #ffffff !important;
}
.navbar-mes .dropdown-menu .dropdown-item {
    color: #2d3748 !important;
}
.navbar-mes .dropdown-menu .dropdown-item:hover {
    background: #f4f6f8;
    color: #1a2744 !important;
}

/* ─── 14. TOPBAR ──────────────────────────────────────────── */
.topbar {
    background: #111b33;
    color: rgba(255,255,255,0.75);
}
.topbar a {
    color: rgba(255,255,255,0.75) !important;
}
.topbar a:hover {
    color: #e8521a !important;
}

/* ─── 15. ORDER STATUS BADGES ─────────────────────────────── */
.badge.bg-success  { color: #ffffff !important; }
.badge.bg-warning  { color: #1a2744 !important; }
.badge.bg-danger   { color: #ffffff !important; }
.badge.bg-primary  { color: #ffffff !important; }
.badge.bg-secondary{ color: #ffffff !important; }
.badge.bg-info     { color: #ffffff !important; }
.badge.bg-dark     { color: #ffffff !important; }

/* ─── 16. FORMS ───────────────────────────────────────────── */
.mes-form .form-label {
    color: #4a5568 !important;
    font-weight: 600;
}
.mes-form .form-control,
.mes-form .form-select {
    color: #2d3748 !important;
    background: #ffffff !important;
    border-color: #dce1e9;
}
.mes-form .form-control::placeholder {
    color: #a0aec0 !important;
}
.mes-form .form-control:focus,
.mes-form .form-select:focus {
    color: #1a2744 !important;
    border-color: #1a2744;
    box-shadow: 0 0 0 3px rgba(26,39,68,0.1);
}

/* ─── 17. ALERTS ──────────────────────────────────────────── */
.alert-success {
    background: #f0fff4;
    color: #276749 !important;
    border-color: #c6f6d5;
}
.alert-danger {
    background: #fff5f5;
    color: #9b2c2c !important;
    border-color: #fed7d7;
}
.alert-warning {
    background: #fffff0;
    color: #7b6002 !important;
    border-color: #fefcbf;
}
.alert-info {
    background: #ebf8ff;
    color: #2c5282 !important;
    border-color: #bee3f8;
}
.alert-success *, .alert-danger *,
.alert-warning *, .alert-info * {
    color: inherit !important;
}

/* ─── 18. HOME SECTORS & FEATURES ────────────────────────── */
/* Sector hover cards */
.hero-section div[onmouseover] h5,
.hero-section div[onmouseover] p {
    transition: color 0.2s;
}

/* Feature cards on home */
.feature-card h6 {
    color: #1a2744 !important;
}
.feature-card p {
    color: #718096 !important;
}

/* ─── 19. PRODUCT DETAIL PAGE ─────────────────────────────── */
.tab-content {
    background: #ffffff;
    color: #2d3748;
}
.tab-content h1, .tab-content h2,
.tab-content h3, .tab-content h4 {
    color: #1a2744 !important;
}
.tab-content p, .tab-content li {
    color: #4a5568 !important;
}

/* Spec table */
.tab-content table td {
    color: #2d3748 !important;
}
.tab-content table td:first-child {
    color: #1a2744 !important;
    background: #f4f6f8;
}

/* ─── 20. ORDER TIMELINE ──────────────────────────────────── */
.step-label {
    color: #718096 !important;
}
.timeline-step.done .step-label,
.timeline-step.active .step-label {
    color: #2d3748 !important;
    font-weight: 600;
}
.step-circle {
    background: #ffffff;
    border-color: #dce1e9;
    color: #718096;
}
.timeline-step.done .step-circle {
    background: #2d7d46 !important;
    border-color: #2d7d46 !important;
    color: #ffffff !important;
}
.timeline-step.active .step-circle {
    background: #e8521a !important;
    border-color: #e8521a !important;
    color: #ffffff !important;
}

/* ─── 21. ABOUT US PAGE — fix text on dark sections ─────── */
.ab-section.bg-dark h1,
.ab-section.bg-dark h2,
.ab-section.bg-dark h3,
.ab-section.bg-dark h4,
.ab-section.bg-dark p,
.ab-section.bg-dark li,
.ab-section.bg-dark span {
    color: inherit;
}
.ab-section.bg-white .ab-title,
.ab-section.bg-light .ab-title {
    color: #1a2744 !important;
}
.ab-section.bg-white .ab-body,
.ab-section.bg-light .ab-body {
    color: #4a5568 !important;
}
.ab-section.bg-dark .ab-body {
    color: rgba(255,255,255,0.82) !important;
}
.tl-content h4 {
    color: #1a2744 !important;
}
.tl-content p {
    color: #718096 !important;
}
.cap-card h4 {
    color: #1a2744 !important;
}
.cap-card p {
    color: #718096 !important;
}
.reg-card h5 {
    color: #1a2744 !important;
}
.fin-table tbody td {
    color: #2d3748 !important;
}

/* ─── 22. CART PAGE ───────────────────────────────────────── */
.cart-item {
    background: #ffffff;
}
.cart-item div[style*="font-family"] {
    color: #1a2744 !important;
}

/* ─── 23. SEARCH PAGE ─────────────────────────────────────── */
.search-result-title {
    color: #1a2744 !important;
}

/* ─── 24. PAGINATION ──────────────────────────────────────── */
.page-link {
    color: #1a2744 !important;
}
.page-item.active .page-link {
    background: #1a2744 !important;
    border-color: #1a2744 !important;
    color: #ffffff !important;
}

/* ─── 25. CONTACT PAGE ────────────────────────────────────── */
.contact-info-label {
    color: #718096 !important;
    font-size: 11px;
}
.contact-info-value {
    color: #1a2744 !important;
}

/* ─── UTILITY: force white text on all dark bg elements ──── */
[style*="background:#1a2744"] h1,
[style*="background:#1a2744"] h2,
[style*="background:#1a2744"] h3,
[style*="background:#1a2744"] h4,
[style*="background:#1a2744"] p,
[style*="background:#1a2744"] span,
[style*="background:#1a2744"] a,
[style*="background: #1a2744"] * {
    color: #ffffff !important;
}

[style*="background:var(--navy)"] *,
[style*="background: var(--navy)"] * {
    color: #ffffff;
}

/* ─── UTILITY: ensure light bg sections have dark text ───── */
[style*="background:#fff"] p,
[style*="background:#fff"] li,
[style*="background:#ffffff"] p,
[style*="background:#f4f6f8"] p {
    color: #4a5568;
}

[style*="background:#fff"] h1,
[style*="background:#fff"] h2,
[style*="background:#fff"] h3,
[style*="background:#fff"] h4,
[style*="background:#ffffff"] h2,
[style*="background:#ffffff"] h3 {
    color: #1a2744 !important;
}

/* ─── RESPONSIVE FIXES ────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-section .hero-tagline {
        color: #ffffff !important;
    }
    .page-header h1 {
        font-size: 22px !important;
    }
}