/* =========================================
   ACCESSIBILITY THEMES
   ========================================= */

/* --- 1. DARK MODE OVERRIDES --- */
html[data-theme="dark"] body {
    background: #111827 !important; /* gray-900 */
    color: #f3f4f6 !important; /* gray-100 */
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-blue-50 {
    background-color: #1f2937 !important; /* gray-800 */
    color: #e5e7eb !important; /* gray-200 */
    border-color: #374151 !important; /* gray-700 */
}

/* Fix Inputs in Dark Mode */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

/* Fix Headings */
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3,
html[data-theme="dark"] .text-gray-800 {
    color: #ffffff !important;
}
/* --- FIX: Colored Backgrounds in Dark Mode --- */
/* This fixes the Health "Other" box and status alerts */

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-orange-50 {
    background-color: #422006 !important; /* Very dark amber/brown */
    border-color: #b45309 !important;     /* Muted amber border */
    color: #fef3c7 !important;            /* Light cream text */
}

html[data-theme="dark"] .bg-green-50 {
    background-color: #064e3b !important; /* Very dark green */
    border-color: #059669 !important;
    color: #d1fae5 !important;
}

html[data-theme="dark"] .bg-red-50 {
    background-color: #450a0a !important; /* Very dark red */
    border-color: #b91c1c !important;
    color: #fee2e2 !important;
}

/* Ensure the label inside the amber box is readable */
html[data-theme="dark"] .bg-amber-50 label,
html[data-theme="dark"] .bg-amber-50 .text-gray-800 {
    color: #fef3c7 !important;
}



/* --- 2. HIGH CONTRAST MODE (Yellow on Black) --- */
html[data-theme="contrast"] body {
    background: #000000 !important;
    color: #FFFF00 !important; /* Bright Yellow */
}

html[data-theme="contrast"] .bg-white,
html[data-theme="contrast"] .bg-gray-50,
html[data-theme="contrast"] .bg-blue-50,
html[data-theme="contrast"] .bg-gradient-to-r,
html[data-theme="contrast"] .bg-gradient-to-br {
    background: #000000 !important;
    background-image: none !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFF00 !important;
    box-shadow: none !important;
}

/* High Contrast Texts */
html[data-theme="contrast"] h1,
html[data-theme="contrast"] h2,
html[data-theme="contrast"] h3,
html[data-theme="contrast"] p,
html[data-theme="contrast"] i,
html[data-theme="contrast"] span {
    color: #FFFF00 !important;
}

/* High Contrast Inputs */
html[data-theme="contrast"] input,
html[data-theme="contrast"] select,
html[data-theme="contrast"] textarea {
    background-color: #000000 !important;
    color: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
}

/* Buttons in High Contrast */
html[data-theme="contrast"] button,
html[data-theme="contrast"] .btn,
html[data-theme="contrast"] a.btn {
    background-color: #000000 !important;
    border: 2px solid #00FF00 !important; /* Green border for actions */
    color: #00FF00 !important;
    font-weight: bold !important;
}

/* --- 3. ACCESSIBILITY MENU UI --- */
#a11y-menu-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0072ce;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid white;
}

#a11y-menu-btn:hover, #a11y-menu-btn:focus {
    transform: scale(1.1);
    outline: 2px solid #FFFF00;
}

#a11y-panel {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 9999;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 250px;
    border: 1px solid #e5e7eb;
    display: none; /* Hidden by default */
    animation: slideUp 0.3s ease-out;
}

#a11y-panel.open { display: block; }

#a11y-panel h3 {
    font-size: 0.9rem;
    font-weight: bold;
    color: #374151;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.a11y-option {
    width: 100%;
    text-align: left;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.a11y-option:hover { background-color: #f3f4f6; }
.a11y-option.active { background-color: #eff6ff; border-color: #0072ce; color: #0072ce; font-weight: bold; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark mode fixes for the menu itself */
html[data-theme="dark"] #a11y-panel { background: #374151; border-color: #4b5563; }
html[data-theme="dark"] #a11y-panel h3 { color: white; }
html[data-theme="dark"] .a11y-option:hover { background: #4b5563; }