/* Accessibility Styles - All accessibility-related styling */

/* CSS Variable for dynamic font scaling */
:root {
    --font-scale: 1;
}

body {
    font-size: calc(16px * var(--font-scale));
}

/* Accessibility toolbar */
.accessibility-bar {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 14px;
    min-height: 60px; /* Ensu/* Mobile responsive design for accessibility controls */
@media (max-width: 768px) {
    .accessibility-bar {
        padding: 8px 15px;
        gap: 10px;
    }
    
    .accessibility-controls {
        gap: 8px;
        justify-content: flex-start;
        width: 100%;
    }
    
    .accessibility-btn {
        padding: 4px 8px;
        font-size: 11px;
        min-width: auto;
    }
    
    .font-size-controls {
        gap: 3px;
    }
    
    /* Ensure speaker button is visible and positioned correctly on mobile */
    .accessibility-btn[onclick*="testTextToSpeech"] {
        order: 5; /* Keep consistent order */
        background: #e8f5e9 !important;
        border-color: #28a745 !important;
        color: #155724 !important;
        font-weight: 600;
    }
    
    /* Ensure voice button comes after speaker button on mobile */
    #voiceBtn {
        order: 6; /* Keep consistent order */
        background: linear-gradient(135deg, #6f42c1, #6610f2) !important;
        color: white !important;
        border-color: #6f42c1 !important;
        font-weight: 600;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .accessibility-bar {
        padding: 5px 10px;
    }
    .accessibility-bar-label {
        font-size: 12px;
        margin-right: 5px;
    }
    
    .accessibility-btn {
        padding: 3px 6px;
        font-size: 10px;
        gap: 3px;
    }
}
    overflow: visible; /* Prevent overflow hiding */
}

.accessibility-bar-label {
    font-weight: 600;
    color: #495057;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent shrinking */
}

.accessibility-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1; /* Take up remaining space */
    min-width: 0; /* Allow shrinking */
}

.accessibility-btn {
    background: white;
    border: 1px solid #dee2e6;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap; /* Prevent text wrapping */
    flex-shrink: 0; /* Prevent button shrinking */
    min-width: -webkit-fill-available; /* Support Samsung Internet 5.0+ */
    min-width: fit-content; /* Ensure button is wide enough for content */
}

.accessibility-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.accessibility-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.accessibility-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Special styling for the speaker/TTS button to make it prominent */
.accessibility-btn[onclick*="testTextToSpeech"] {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: white !important;
    border-color: #28a745 !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.accessibility-btn[onclick*="testTextToSpeech"]:hover {
    background: linear-gradient(135deg, #218838, #1e7e34) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.accessibility-btn[onclick*="testTextToSpeech"]:focus {
    outline: 3px solid #28a745;
    outline-offset: 2px;
}

/* Ensure the speaker button is always visible and positioned correctly */
.accessibility-controls .accessibility-btn[onclick*="testTextToSpeech"] {
    order: 5; /* Position after font controls */
    flex-shrink: 0;
    display: flex !important;
    visibility: visible !important;
}

/* Ensure the voice button comes right after the speaker button */
.accessibility-controls #voiceBtn {
    order: 6; /* Position right after speaker button */
    flex-shrink: 0;
    display: flex !important;
    visibility: visible !important;
}

.font-size-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.font-size-display {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

/* Match selected accessibility buttons to Export data button color */
.accessibility-bar .font-size-controls .accessibility-btn,
.accessibility-bar #contrastBtn,
.accessibility-bar #motionBtn,
.accessibility-bar #focusBtn,
.accessibility-bar .accessibility-btn[onclick*="showAccessibilityHelp"] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.accessibility-bar .font-size-controls .accessibility-btn:hover,
.accessibility-bar #contrastBtn:hover,
.accessibility-bar #motionBtn:hover,
.accessibility-bar #focusBtn:hover,
.accessibility-bar .accessibility-btn[onclick*="showAccessibilityHelp"]:hover {
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

/* Font size scaling is now handled by CSS variable --font-scale */
/* See body { font-size: calc(16px * var(--font-scale)); } at the top */

/* High contrast mode */
body.high-contrast {
    background: black !important;
    color: white !important;
}

body.high-contrast .container {
    background: black !important;
    color: white !important;
    border: 2px solid white;
}

body.high-contrast .header {
    background: black !important;
    color: yellow !important;
}

body.high-contrast .add-medication,
body.high-contrast .export-import-section,
body.high-contrast .accessibility-bar {
    background: black !important;
    color: white !important;
    border-color: white !important;
}

body.high-contrast .medication-card,
body.high-contrast .stat-card {
    background: black !important;
    color: white !important;
    border: 2px solid white !important;
}

body.high-contrast .form-group input,
body.high-contrast .form-group textarea,
body.high-contrast .form-group select,
body.high-contrast .search-input {
    background: black !important;
    color: white !important;
    border: 2px solid white !important;
}

body.high-contrast .btn,
body.high-contrast .export-btn,
body.high-contrast .import-btn,
body.high-contrast .delete-btn {
    background: white !important;
    color: black !important;
    border: 2px solid white !important;
}

body.high-contrast .btn:hover,
body.high-contrast .export-btn:hover,
body.high-contrast .import-btn:hover {
    background: yellow !important;
    color: black !important;
}

body.high-contrast .modal-content {
    background: black !important;
    color: white !important;
    border: 2px solid white !important;
}

body.high-contrast .accessibility-btn {
    background: black !important;
    border-color: white !important;
    color: white !important;
}

body.high-contrast .accessibility-btn:hover {
    background: white !important;
    color: black !important;
}

body.high-contrast .accessibility-btn.active {
    background: yellow !important;
    color: black !important;
    border-color: yellow !important;
}

/* Reduced motion */
body.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

body.reduced-motion .notification {
    animation: none !important;
    transform: none !important;
}

body.reduced-motion .medication-card:hover {
    transform: none !important;
}

body.reduced-motion .btn:hover,
body.reduced-motion .export-btn:hover,
body.reduced-motion .import-btn:hover {
    transform: none !important;
}

/* Focus indicators for better visibility */
body.enhanced-focus *:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 0, 0.3) !important;
}

body.enhanced-focus .accessibility-btn:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 0, 0.3) !important;
}

/* --- Match selected accessibility controls to Export data button color --- */
/* Buttons: A-, A, A+, Contrast, Motion, Focus, Help */
.accessibility-bar .font-size-controls .accessibility-btn,
.accessibility-bar #contrastBtn,
.accessibility-bar #motionBtn,
.accessibility-bar #focusBtn,
.accessibility-bar .accessibility-btn[onclick*="showAccessibilityHelp"] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.accessibility-bar .font-size-controls .accessibility-btn:hover,
.accessibility-bar #contrastBtn:hover,
.accessibility-bar #motionBtn:hover,
.accessibility-bar #focusBtn:hover,
.accessibility-bar .accessibility-btn[onclick*="showAccessibilityHelp"]:hover {
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

/* Make the 100% indicator visually match, as a small pill */
.accessibility-bar .font-size-display {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
}

/* Keyboard navigation improvements */
body.focus-visible *:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Screen reader announcements */
.sr-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessible color combinations */
.accessible-link {
    color: #0066cc;
    text-decoration: underline;
}

.accessible-link:hover,
.accessible-link:focus {
    color: #004499;
    text-decoration: none;
}

/* Skip navigation improvements */
.skip-navigation {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.skip-navigation:focus {
    transform: translateY(0);
}

/* ARIA live region styling */
[aria-live] {
    position: relative;
}

/* Focus management for modals */
.modal:focus-within {
    outline: none;
}

.modal-content:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Accessible form styling */
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: #dc3545;
    background-color: #f8d7da;
}

.form-group.error label {
    color: #dc3545;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Accessible table styling for future use */
.accessible-table {
    border-collapse: collapse;
    width: 100%;
}

.accessible-table th,
.accessible-table td {
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    text-align: left;
}

.accessible-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* High contrast focus indicators */
body.high-contrast *:focus {
    outline: 3px solid yellow !important;
    outline-offset: 2px !important;
}

/* Accessible tooltip styling */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}

.tooltip:hover .tooltiptext,
.tooltip:focus .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Responsive accessibility features */
@media (max-width: 768px) {
    .accessibility-bar {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .accessibility-controls {
        gap: 8px;
    }
    
    .accessibility-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .font-size-controls {
        gap: 3px;
    }
}

/* Print accessibility */
@media print {
    .accessibility-bar,
    .skip-link,
    .theme-toggle {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .container {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* Ensure all accessibility buttons have proper order */
.font-size-controls {
    order: 1; /* Font controls first */
}

.accessibility-btn[onclick*="toggleHighContrast"] {
    order: 2; /* Contrast button */
}

.accessibility-btn[onclick*="toggleReducedMotion"] {
    order: 3; /* Motion button */
}

.accessibility-btn[onclick*="toggleEnhancedFocus"] {
    order: 4; /* Focus button */
}

/* Speaker and Voice buttons already defined above with order 5 and 6 */

.accessibility-btn[onclick*="resetAccessibility"] {
    order: 7; /* Reset button */
}

.accessibility-btn[onclick*="showAccessibilityHelp"] {
    order: 8; /* Help button last */
}

/* Specific styling for speaker button by ID */
#speakerBtn {
    background: #28a745 !important;
    color: white !important;
    border: 2px solid #155724 !important;
    font-weight: bold !important;
    box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4) !important;
    animation: speakerPulse 2s infinite ease-in-out;
}

#speakerBtn:hover {
    background: #218838 !important;
    transform: translateY(-1px) scale(1.05) !important;
}

/* Subtle animation to draw attention to speaker button */
@keyframes speakerPulse {
    0%, 100% { 
        box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4);
    }
    50% { 
        box-shadow: 0 3px 12px rgba(40, 167, 69, 0.6);
    }
}

/* Debug and fallback styles for speaker button */
button[onclick*="testTextToSpeech"],
.accessibility-btn[title*="text-to-speech"] {
    background: #28a745 !important;
    color: white !important;
    border: 2px solid #155724 !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
    min-width: 80px !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

button[onclick*="testTextToSpeech"]:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
    transform: scale(1.05) !important;
}

/* Ensure parent container doesn't hide the button */
.accessibility-controls {
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Voice commands button styling */
#voiceBtn {
    background: linear-gradient(135deg, #6f42c1, #6610f2) !important;
    color: white !important;
    border-color: #6f42c1 !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
    position: relative;
}

#voiceBtn:hover {
    background: linear-gradient(135deg, #5a2d91, #520dc2) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(111, 66, 193, 0.4);
}

#voiceBtn:focus {
    outline: 3px solid #6f42c1;
    outline-offset: 2px;
}

/* Voice button when listening */
#voiceBtn.listening {
    background: #dc3545 !important;
    animation: voicePulse 1s infinite ease-in-out;
}

@keyframes voicePulse {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
        transform: scale(1.05);
    }
}

/* Specific styling for speaker button by ID */
#speakerBtn {
    background: #28a745 !important;
    color: white !important;
    border: 2px solid #155724 !important;
    font-weight: bold !important;
    box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4) !important;
    animation: speakerPulse 2s infinite ease-in-out;
}

#speakerBtn:hover {
    background: #218838 !important;
    transform: translateY(-1px) scale(1.05) !important;
}

/* Subtle animation to draw attention to speaker button */
@keyframes speakerPulse {
    0%, 100% { 
        box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4);
    }
    50% { 
        box-shadow: 0 3px 12px rgba(40, 167, 69, 0.6);
    }
}

/* Debug and fallback styles for speaker button */
button[onclick*="testTextToSpeech"],
.accessibility-btn[title*="text-to-speech"] {
    background: #28a745 !important;
    color: white !important;
    border: 2px solid #155724 !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
    min-width: 80px !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

button[onclick*="testTextToSpeech"]:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
    transform: scale(1.05) !important;
}

/* Ensure parent container doesn't hide the button */
.accessibility-controls {
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}