/* Accessibility & Contrast-Safe CSS
 * WCAG 2.1 AA Compliant Color Tokens
 * Minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text
 */

:root {
    /* Contrast-Safe Color Tokens - Reference theme variables with fallbacks */
    /* Dark text for light backgrounds */
    --text-on-light: var(--theme-text-primary, #212529);
    --text-on-light-muted: var(--theme-text-secondary, #495057);
    
    /* Light text for dark backgrounds */
    --text-on-dark: var(--theme-text-light, #ffffff);
    --text-on-dark-muted: var(--theme-neutral-light, #e9ecef);
    
    /* Contrast-safe button text */
    --text-on-primary: var(--theme-text-on-primary, #ffffff);
    --text-on-success: var(--theme-text-on-primary, #ffffff);
    --text-on-danger: var(--theme-text-on-primary, #ffffff);
    --text-on-warning: var(--theme-text-primary, #212529); /* Dark text on yellow/orange */
    --text-on-info: var(--theme-text-on-primary, #ffffff);
    --text-on-secondary: var(--theme-text-on-secondary, #ffffff);
    --text-on-light-btn: var(--theme-text-primary, #212529);
    --text-on-dark-btn: var(--theme-text-light, #ffffff);
    
    /* Safe background/foreground pairs */
    --hero-bg-dark: linear-gradient(135deg, var(--theme-secondary-dark, #1B5E20) 0%, var(--theme-secondary, #2E7D32) 100%);
    --hero-text: var(--theme-text-light, #ffffff);
    --hero-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    
    /* Card contrast tokens */
    --card-bg-light: var(--theme-card-bg, #ffffff);
    --card-text-light: var(--theme-text-primary, #212529);
    --card-bg-dark: var(--theme-card-dark-bg, #2d3748);
    --card-text-dark: var(--theme-card-dark-text, #f7fafc);
    
    /* Badge contrast-safe pairs (aligned with theme colors) */
    --badge-success-bg: var(--theme-success, #2E7D32);
    --badge-success-text: var(--theme-text-on-primary, #ffffff);
    --badge-warning-bg: var(--theme-warning, #F57C00);
    --badge-warning-text: var(--theme-text-on-primary, #ffffff);
    --badge-danger-bg: var(--theme-danger, #C62828);
    --badge-danger-text: var(--theme-text-on-primary, #ffffff);
    --badge-info-bg: var(--theme-info, #1565C0);
    --badge-info-text: var(--theme-text-on-primary, #ffffff);
    --badge-primary-bg: var(--theme-badge-primary-bg, #5C7050);
    --badge-primary-text: var(--theme-text-on-primary, #ffffff);
    --badge-secondary-bg: var(--theme-badge-secondary-bg, #6B4423);
    --badge-secondary-text: var(--theme-text-on-primary, #ffffff);
    --badge-light-bg: var(--theme-surface-secondary, #f8f9fa);
    --badge-light-text: var(--theme-text-primary, #212529);
    --badge-dark-bg: var(--theme-neutral-dark, #212529);
    --badge-dark-text: var(--theme-text-light, #ffffff);
}

/* ================================================
   FONT AWESOME ICON FIX
   The Replit dark theme overrides i::before with body font,
   which breaks Font Awesome icons. This restores the correct
   font-family and weight for the ::before pseudo-elements.
   ================================================ */
.fa-solid::before, .fas::before, .fa::before,
i.fa-solid::before, i.fas::before, i.fa::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.fa-regular::before, .far::before,
i.fa-regular::before, i.far::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fa-brands::before, .fab::before,
i.fa-brands::before, i.fab::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* ================================================
   CONTRAST-SAFE HERO SECTIONS
   ================================================ */

/* Ensure hero sections always have readable text */
.market-hero,
.dept-hero,
.hero-section,
[class*="-hero"] {
    text-shadow: var(--hero-text-shadow);
}

.market-hero *,
.dept-hero *,
.hero-section *,
[class*="-hero"] * {
    color: var(--hero-text);
}

/* Override any muted/secondary text in heroes */
.market-hero .text-muted,
.dept-hero .text-muted,
.hero-section .text-muted,
[class*="-hero"] .text-muted {
    color: var(--text-on-dark-muted) !important;
}

/* ================================================
   BUTTON CONTRAST FIXES
   ================================================ */

/* Ensure .btn-light has dark text */
.btn-light {
    color: var(--text-on-light-btn) !important;
    background-color: var(--theme-surface-secondary, #f8f9fa);
    border-color: var(--theme-surface-secondary, #f8f9fa);
}

.btn-light:hover,
.btn-light:focus {
    color: var(--text-on-light-btn) !important;
    background-color: var(--theme-surface-hover, #e2e6ea);
    border-color: var(--theme-border-light, #dae0e5);
}

/* Ensure .btn-outline-light on dark backgrounds is visible */
.market-hero .btn-outline-light,
.dept-hero .btn-outline-light,
[class*="-hero"] .btn-outline-light {
    color: var(--theme-text-light, #ffffff);
    border-color: rgba(255, 255, 255, 0.8);
}

.market-hero .btn-outline-light:hover,
.dept-hero .btn-outline-light:hover,
[class*="-hero"] .btn-outline-light:hover {
    color: var(--theme-text-primary, #212529);
    background-color: var(--theme-text-light, #ffffff);
    border-color: var(--theme-text-light, #ffffff);
}

/* Warning buttons need dark text */
.btn-warning {
    color: var(--text-on-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    color: var(--text-on-warning) !important;
}

/* ================================================
   BADGE CONTRAST FIXES
   ================================================ */

/* Dark theme colors use white text for proper contrast */
.badge.bg-primary,
.badge-primary {
    color: var(--badge-primary-text) !important;
}

.badge.bg-secondary,
.badge-secondary {
    color: var(--badge-secondary-text) !important;
}

.badge.bg-success,
.badge-success {
    color: var(--badge-success-text) !important;
}

.badge.bg-danger,
.badge-danger {
    color: var(--badge-danger-text) !important;
}

.badge.bg-warning,
.badge-warning {
    color: var(--badge-warning-text) !important;
}

.badge.bg-info,
.badge-info {
    color: var(--badge-info-text) !important;
}

.badge.bg-light {
    color: var(--badge-light-text) !important;
}

.badge.bg-dark {
    color: var(--badge-dark-text) !important;
}

/* ================================================
   CARD CONTRAST SAFETY
   ================================================ */

/* Cards on white/light backgrounds */
.card {
    color: var(--card-text-light);
}

.card .card-title,
.card .card-text,
.card .card-body {
    color: inherit;
}

/* Cards with colored backgrounds need white text */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-dark,
.card.bg-secondary {
    color: var(--theme-text-light, #ffffff);
}

.card.bg-primary *,
.card.bg-success *,
.card.bg-danger *,
.card.bg-dark *,
.card.bg-secondary * {
    color: inherit;
}

/* Cards with light colored backgrounds need dark text */
.card.bg-warning,
.card.bg-info,
.card.bg-light {
    color: var(--theme-text-primary, #212529);
}

.card.bg-warning *,
.card.bg-info *,
.card.bg-light * {
    color: inherit;
}

/* ================================================
   LINK CONTRAST ON VARIOUS BACKGROUNDS
   ================================================ */

/* Links on dark backgrounds */
.bg-dark a:not(.btn),
.bg-primary a:not(.btn),
.bg-success a:not(.btn),
.bg-danger a:not(.btn),
.bg-secondary a:not(.btn),
.market-hero a:not(.btn),
.dept-hero a:not(.btn),
[class*="-hero"] a:not(.btn) {
    color: var(--theme-info-light, #8ecae6);
    text-decoration: underline;
}

.bg-dark a:not(.btn):hover,
.bg-primary a:not(.btn):hover,
.bg-success a:not(.btn):hover,
.bg-danger a:not(.btn):hover,
.bg-secondary a:not(.btn):hover,
.market-hero a:not(.btn):hover,
.dept-hero a:not(.btn):hover,
[class*="-hero"] a:not(.btn):hover {
    color: var(--theme-text-light, #ffffff);
}

/* ================================================
   FORM ELEMENT CONTRAST
   ================================================ */

/* Ensure placeholder text has sufficient contrast */
::placeholder {
    color: var(--theme-input-placeholder, #6c757d) !important;
    opacity: 1;
}

/* Labels should be clearly visible */
.form-label {
    color: var(--text-on-light);
    font-weight: 500;
}

/* ================================================
   TABLE CONTRAST
   ================================================ */

/* Ensure table headers are visible */
.table th {
    color: var(--text-on-light);
    font-weight: 600;
}

.table td {
    color: var(--text-on-light-muted);
}

/* Dark table variants */
.table-dark th,
.table-dark td {
    color: var(--text-on-dark);
}

/* ================================================
   ALERT CONTRAST FIXES
   ================================================ */

.alert-warning {
    color: var(--theme-warning-text, #664d03);
    background-color: var(--theme-warning-light, #fff3cd);
}

.alert-info {
    color: var(--theme-info-text, #055160);
    background-color: var(--theme-info-light, #cff4fc);
}

.alert-light {
    color: var(--theme-text-secondary, #41464b);
    background-color: var(--theme-surface-primary, #fefefe);
}

/* ================================================
   NAVIGATION CONTRAST
   ================================================ */

/* Breadcrumb visibility */
.breadcrumb-item a {
    color: var(--theme-link, #6B4423);
}

.breadcrumb-item.active {
    color: var(--theme-text-secondary, #6c757d);
}

/* ================================================
   FOCUS STATES (Accessibility)
   ================================================ */

/* High-visibility focus rings */
:focus-visible {
    outline: 3px solid var(--theme-input-focus-border, #5C7050);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: 0 0 0 3px rgba(92, 112, 80, 0.5);
}

/* ================================================
   UTILITY CLASSES FOR MANUAL OVERRIDES
   ================================================ */

/* Force dark text */
.text-contrast-dark {
    color: var(--theme-text-dark, #212529) !important;
}

/* Force light text */
.text-contrast-light {
    color: var(--theme-text-light, #ffffff) !important;
}

/* Safe text on any green background */
.text-on-green {
    color: var(--theme-text-light, #ffffff) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Safe text on any light background */
.text-on-light-bg {
    color: var(--theme-text-primary, #212529) !important;
    text-shadow: none;
}