/* ========================================
   Accessibility Colors - WCAG 2.1 AA Compliant
   ======================================== */

/* IO Blue Colors - Optimized for contrast */
.bg-io-blue { background-color: #1e3a8a !important; } /* Darker blue for better contrast */
.text-io-blue { color: #1e3a8a !important; }
.border-io-blue { border-color: #1e3a8a !important; }

.bg-io-blue-dark { background-color: #1e293b !important; } /* Even darker for text */
.text-io-blue-dark { color: #1e293b !important; }

.bg-io-blue-light { background-color: #3b82f6 !important; } /* Lighter for backgrounds */
.text-io-blue-light { color: #3b82f6 !important; }

/* IO Orange Colors - Enhanced contrast */
.bg-io-orange { background-color: #ea580c !important; } /* Darker orange for better contrast */
.text-io-orange { color: #ea580c !important; }
.border-io-orange { border-color: #ea580c !important; }

.bg-io-orange-dark { background-color: #c2410c !important; }
.text-io-orange-dark { color: #c2410c !important; }

.bg-io-orange-light { background-color: #fb923c !important; }
.text-io-orange-light { color: #fb923c !important; }

/* IO Grey Colors - Optimized for readability */
.bg-io-grey-50 { background-color: #f8fafc !important; }
.bg-io-grey-100 { background-color: #f1f5f9 !important; }
.bg-io-grey-200 { background-color: #e2e8f0 !important; }
.bg-io-grey-300 { background-color: #cbd5e1 !important; }
.bg-io-grey-400 { background-color: #94a3b8 !important; }
.bg-io-grey-500 { background-color: #64748b !important; }
.bg-io-grey-600 { background-color: #475569 !important; }
.bg-io-grey-700 { background-color: #334155 !important; }
.bg-io-grey-800 { background-color: #1e293b !important; }
.bg-io-grey-900 { background-color: #0f172a !important; }

/* IO White Color */
.bg-io-white { background-color: #ffffff !important; }
.text-io-white { color: #ffffff !important; }

/* IO Text Colors - High contrast */
.text-io-text { color: #0f172a !important; } /* Very dark for maximum contrast */
.text-io-text-secondary { color: #475569 !important; } /* Dark grey for secondary text */
.text-io-text-muted { color: #64748b !important; } /* Medium grey for muted text */

/* Status Colors - WCAG AA Compliant */
.bg-io-success { background-color: #059669 !important; } /* Darker green */
.text-io-success { color: #059669 !important; }

.bg-io-warning { background-color: #d97706 !important; } /* Darker amber */
.text-io-warning { color: #d97706 !important; }

.bg-io-error { background-color: #dc2626 !important; } /* Darker red */
.text-io-error { color: #dc2626 !important; }

.bg-io-info { background-color: #2563eb !important; } /* Darker blue */
.text-io-info { color: #2563eb !important; }

/* Opacity variants with better contrast */
.bg-io-orange\/10 { background-color: rgba(234, 88, 12, 0.1) !important; }
.border-io-orange\/20 { border-color: rgba(234, 88, 12, 0.2) !important; }
.text-white\/90 { color: rgba(255, 255, 255, 0.95) !important; } /* Higher opacity */
.text-white\/80 { color: rgba(255, 255, 255, 0.9) !important; } /* Higher opacity */

/* Hover States with better contrast */
.hover\:bg-io-white:hover { background-color: #ffffff !important; }
.hover\:text-io-blue:hover { color: #1e3a8a !important; }
.hover\:text-io-blue-dark:hover { color: #1e293b !important; }
.hover\:text-io-orange:hover { color: #ea580c !important; }

/* Button States - Enhanced contrast */
.btn-primary {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
}

.btn-primary:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

.btn-secondary:hover {
    background-color: #c2410c !important;
    color: #ffffff !important;
}

.btn-outline {
    background-color: transparent !important;
    color: #1e3a8a !important;
    border-color: #1e3a8a !important;
}

.btn-outline:hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

/* Focus States for Accessibility */
*:focus {
    outline: 3px solid #3b82f6 !important; /* Bright blue for focus */
    outline-offset: 2px;
}

.btn:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .bg-io-blue { background-color: #000000 !important; }
    .text-io-blue { color: #000000 !important; }
    .bg-io-orange { background-color: #ff0000 !important; }
    .text-io-orange { color: #ff0000 !important; }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up {
        animation: none !important;
    }
    
    .w-16.h-2.bg-io-blue.rounded-full > div,
    .w-16.h-2.bg-io-orange.rounded-full > div,
    .w-16.h-2.bg-red-600.rounded-full > div,
    .w-16.h-2.bg-green-600.rounded-full > div {
        animation: none !important;
    }
}

/* Print Styles - High Contrast */
@media print {
    .bg-io-blue { background-color: #000000 !important; }
    .text-io-blue { color: #000000 !important; }
    .bg-io-orange { background-color: #000000 !important; }
    .text-io-orange { color: #000000 !important; }
    .bg-io-grey-50 { background-color: #ffffff !important; }
    .text-io-text-secondary { color: #000000 !important; }
}

/* ========================================
   Force Colors - Correction Blanc sur Blanc
   ======================================== */

/* Force bg-white to use io-white */
.bg-white { background-color: #ffffff !important; }

/* Force text colors for better contrast */
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

/* Force specific text colors in diagrams */
.text-io-text { color: #0f172a !important; }
.text-io-text-secondary { color: #475569 !important; }
.text-io-text-muted { color: #64748b !important; }

/* Force background colors */
.bg-io-white { background-color: #ffffff !important; }
.bg-io-grey-50 { background-color: #f8fafc !important; }
.bg-io-grey-200 { background-color: #e2e8f0 !important; }

/* Force border colors */
.border-io-grey-200 { border-color: #e2e8f0 !important; }

/* Force shadow colors */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }

/* Force rounded corners */
.rounded-lg { border-radius: 0.5rem !important; }

/* Force padding */
.p-8 { padding: 2rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-4 { padding: 1rem !important; }
.p-2 { padding: 0.5rem !important; }

/* Force margins */
.mb-8 { margin-bottom: 2rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mt-6 { margin-top: 1.5rem !important; }

/* Force spacing */
.space-y-6 > * + * { margin-top: 1.5rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-x-4 > * + * { margin-left: 1rem !important; }
.space-x-2 > * + * { margin-left: 0.5rem !important; }

/* Force flexbox */
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }

/* Force grid */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Force responsive grid */
@media (min-width: 768px) {
    .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Force text sizes */
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }

/* Force font weights */
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }

/* Force gaps */
.gap-6 { gap: 1.5rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-2 { gap: 0.5rem !important; }

/* Force widths and heights */
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }
.w-10 { width: 2.5rem !important; }
.h-10 { height: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }
.w-16 { width: 4rem !important; }
.h-2 { height: 0.5rem !important; }

/* Force mx-auto */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Force mr-3 */
.mr-3 { margin-right: 0.75rem !important; }
.mr-2 { margin-left: 0.5rem !important; }

/* ========================================
   Force White Text on Blue Background
   ======================================== */

/* Force white text in SIOTH Platform section */
.bg-gradient-to-r .text-sm.font-medium {
    color: #ffffff !important;
}

.bg-gradient-to-r .text-xs.font-medium {
    color: #ffffff !important;
}

.bg-gradient-to-r .text-lg.font-semibold {
    color: #ffffff !important;
}

/* Force white text in white/10 backgrounds */
.bg-white\/10 .text-sm.font-medium {
    color: #ffffff !important;
}

.bg-white\/10 .text-xs.font-medium {
    color: #ffffff !important;
}

/* Force white text for all text in blue gradient sections */
.bg-gradient-to-r.from-io-blue.to-io-blue-dark * {
    color: #ffffff !important;
}

/* Specific overrides for better readability */
.bg-gradient-to-r.from-io-blue.to-io-blue-dark h4 {
    color: #ffffff !important;
}

.bg-gradient-to-r.from-io-blue.to-io-blue-dark span {
    color: #ffffff !important;
}

.bg-gradient-to-r.from-io-blue.to-io-blue-dark p {
    color: #ffffff !important;
}

/* Force orange icons to be visible */
.text-io-orange {
    color: #ea580c !important;
}

/* Force white icons */
.text-white {
    color: #ffffff !important;
}

/* ========================================
   Gradient Classes - Correction Section Manquante
   ======================================== */

/* Gradient backgrounds */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.from-io-blue {
    --tw-gradient-from: #1e3a8a !important;
    --tw-gradient-to: rgba(30, 58, 138, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-io-blue-dark {
    --tw-gradient-to: #1e293b !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Force gradient background */
.bg-gradient-to-r.from-io-blue.to-io-blue-dark {
    background: linear-gradient(to right, #1e3a8a, #1e293b) !important;
}

/* Force white/10 backgrounds */
.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Force rounded corners */
.rounded-lg {
    border-radius: 0.5rem !important;
}

/* Force padding */
.p-6 {
    padding: 1.5rem !important;
}

.p-4 {
    padding: 1rem !important;
}

/* Force margins */
.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

/* Force grid */
.grid {
    display: grid !important;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.gap-4 {
    gap: 1rem !important;
}

/* Force responsive grid */
@media (min-width: 768px) {
    .md\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Force text colors */
.text-white {
    color: #ffffff !important;
}

.text-io-orange {
    color: #ea580c !important;
}

/* Force font weights */
.font-semibold {
    font-weight: 600 !important;
}

.font-medium {
    font-weight: 500 !important;
}

/* Force text sizes */
.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

/* Force flexbox */
.flex {
    display: flex !important;
}

.items-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

/* Force widths and heights */
.w-8 {
    width: 2rem !important;
}

.h-8 {
    height: 2rem !important;
}

.w-12 {
    width: 3rem !important;
}

.h-12 {
    height: 3rem !important;
}

/* Force margins */
.mr-3 {
    margin-right: 0.75rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}