/* Imagilire Libre - Mode Sombre CSS */
/* Ce fichier gère l'apparence du mode sombre pour l'application */

/* Variables CSS pour le mode sombre */
body.dark-mode {
    /* Couleurs de base */
    --primary-color: #4ECACC;
    --secondary-color: #FFC850;
    --accent-color: #FF7759;
    --text-color: #E4E4E7;
    --background-color: #18181B;
    --container-bg: #27272A;
    --border-color: #3F3F46;
    --success-color: #4ADE80;
    --error-color: #EF4444;
    
    /* Couleurs spécifiques au mode sombre */
    --dark-surface: #1F1F23;
    --dark-elevated: #2D2D31;
    --dark-hover: #38383D;
    --dark-text-muted: #A1A1AA;
    --dark-border-subtle: #52525B;
}

/* Styles de base pour le mode sombre */
body.dark-mode {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Header */
body.dark-mode header {
    background-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mobile-optimized-header {
    background-color: var(--dark-elevated);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mobile-header-content {
    color: var(--text-color);
}

body.dark-mode .mobile-header-title {
    color: var(--text-color);
}

body.dark-mode .mobile-header-subtitle {
    color: var(--dark-text-muted);
}

body.dark-mode .mobile-header-action-btn {
    background-color: var(--dark-surface);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .mobile-header-action-btn:hover {
    background-color: var(--dark-hover);
}

body.dark-mode .mobile-scroll-progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Containers et sections */
body.dark-mode .section-ocr,
body.dark-mode .section-text,
body.dark-mode .section-result,
body.dark-mode .pdf-import-container {
    background-color: var(--container-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

body.dark-mode h2 {
    color: var(--primary-color);
    border-bottom-color: var(--border-color);
}

/* Zones de texte et champs de saisie */
body.dark-mode .text-container,
body.dark-mode .result-container {
    background-color: var(--dark-surface);
    border-color: var(--border-color);
}

body.dark-mode #extractedText {
    background-color: var(--dark-surface);
    color: var(--text-color);
}

body.dark-mode #extractedText::placeholder {
    color: var(--dark-text-muted);
}

/* Boutons */
body.dark-mode .btn.primary-btn {
    background-color: var(--primary-color);
    color: #1F1F23;
}

body.dark-mode .btn.primary-btn:hover {
    background-color: #5DD5D7;
}

body.dark-mode .btn.secondary-btn {
    background-color: var(--dark-elevated);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .btn.secondary-btn:hover {
    background-color: var(--dark-hover);
}

body.dark-mode #processSyllabes {
    background-color: var(--secondary-color);
    color: #1F1F23;
}

body.dark-mode #processSyllabes:hover {
    background-color: #FFD470;
}

body.dark-mode #listenText {
    background-color: #4ADE80;
    color: #1F1F23;
}

body.dark-mode #listenText:hover {
    background-color: #5FE995;
}

body.dark-mode #listenText.active {
    background-color: var(--error-color);
    color: white;
}

body.dark-mode #listenText.active.paused {
    background-color: #F59E0B;
    color: #1F1F23;
}

body.dark-mode #listenText.active.paused:hover {
    background-color: #FBBF24;
}

/* Panneau de paramètres */
body.dark-mode .settings-backdrop.active {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .settings-panel {
    background-color: var(--container-bg);
    box-shadow: -2px 0 18px rgba(0, 0, 0, 0.5);
}

body.dark-mode .settings-header {
    background-color: var(--dark-elevated);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .settings-content {
    background-color: var(--container-bg);
}

body.dark-mode .settings-option label {
    color: var(--text-color);
}

body.dark-mode .settings-option select {
    background-color: var(--dark-surface);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .settings-description {
    color: var(--dark-text-muted);
}

body.dark-mode .close-settings-btn {
    color: var(--text-color);
}

body.dark-mode .close-settings-btn:hover {
    color: var(--primary-color);
}

/* Toggle switch en mode sombre */
body.dark-mode .toggle-slider {
    background: #52525B;
}

body.dark-mode input:checked + .toggle-slider {
    background: var(--primary-color);
}

/* FAB Settings Icon */
body.dark-mode .settings-icon {
    background-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .settings-icon:hover {
    background-color: var(--accent-color);
}

/* Footer */
body.dark-mode footer {
    background-color: var(--dark-elevated);
    color: var(--dark-text-muted);
    border-top-color: var(--border-color);
}

body.dark-mode footer a {
    color: var(--primary-color);
}

body.dark-mode footer a:hover {
    color: var(--secondary-color);
}

/* Liens */
body.dark-mode .help-link,
body.dark-mode .feedback-link,
body.dark-mode a.iubenda-cs-preferences-link {
    color: var(--primary-color);
}

body.dark-mode .help-link:hover,
body.dark-mode .feedback-link:hover,
body.dark-mode a.iubenda-cs-preferences-link:hover {
    color: var(--secondary-color);
}

/* Placeholder */
body.dark-mode .placeholder {
    color: var(--dark-text-muted);
}

/* Styles des syllabes pour le mode sombre */
body.dark-mode .syllabe-1 {
    color: #60A5FA;
}

body.dark-mode .syllabe-2 {
    color: #F87171;
}

body.dark-mode .syllabe-3 {
    color: #4ADE80;
}

body.dark-mode .syllabe-4 {
    color: #C084FC;
}

/* Couleurs personnalisées pour syllabes en mode sombre */
body.dark-mode .custom-color-1 {
    color: #FF7759;
}

body.dark-mode .custom-color-2 {
    color: #FFC850;
}

body.dark-mode .custom-color-3 {
    color: #4ECACC;
}

/* Lettres muettes en mode sombre */
body.dark-mode .lettre-muette {
    color: #71717A;
    opacity: 0.8;
}

/* Digrammes en mode sombre */
body.dark-mode .digramme {
    text-decoration-color: var(--primary-color);
}

/* PDF Import Module en mode sombre */
body.dark-mode .pdf-upload-zone {
    background-color: var(--dark-surface);
    border-color: var(--border-color);
}

body.dark-mode .pdf-upload-zone:hover {
    background-color: var(--dark-hover);
    border-color: var(--primary-color);
}

body.dark-mode .pdf-upload-text,
body.dark-mode .pdf-upload-hint {
    color: var(--text-color);
}

body.dark-mode .pdf-upload-icon i {
    color: var(--primary-color);
}

body.dark-mode .format-badge {
    background-color: var(--dark-elevated);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .pdf-preview-container {
    background-color: var(--dark-surface);
    border-color: var(--border-color);
}

body.dark-mode .pdf-preview-title {
    color: var(--text-color);
}

body.dark-mode .pdf-preview-title i {
    color: var(--primary-color);
}

body.dark-mode .stats-title {
    color: var(--text-color);
}

body.dark-mode .stats-title i {
    color: var(--primary-color);
}

body.dark-mode .pdf-import-container h2 i {
    color: var(--secondary-color);
}

body.dark-mode .pdf-file-info {
    background-color: var(--dark-elevated);
    border-color: var(--border-color);
}

body.dark-mode .pdf-file-name {
    color: var(--text-color);
}

body.dark-mode .pdf-file-size {
    color: var(--dark-text-muted);
}

body.dark-mode .pdf-file-remove {
    background-color: var(--error-color);
}

body.dark-mode .pdf-progress-bar {
    background-color: var(--dark-surface);
}

body.dark-mode .pdf-progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

body.dark-mode .pdf-extraction-stats {
    background-color: var(--dark-elevated);
    border-color: var(--border-color);
}

body.dark-mode .stat-value {
    color: var(--primary-color);
}

body.dark-mode .stat-label {
    color: var(--dark-text-muted);
}

body.dark-mode .extraction-method-badge {
    background-color: var(--dark-surface);
    color: var(--text-color);
}

body.dark-mode .extraction-method-badge i {
    color: var(--primary-color);
}

body.dark-mode .pdf-message {
    background-color: var(--dark-elevated);
    border-left-color: var(--primary-color);
}

body.dark-mode .pdf-message.success {
    border-left-color: var(--success-color);
    background-color: rgba(74, 222, 128, 0.1);
}

body.dark-mode .pdf-message.error {
    border-left-color: var(--error-color);
    background-color: rgba(239, 68, 68, 0.1);
}

body.dark-mode .pdf-message.warning {
    border-left-color: var(--secondary-color);
    background-color: rgba(255, 200, 80, 0.1);
}

body.dark-mode .pdf-message-icon {
    color: var(--primary-color);
}

body.dark-mode .pdf-message.success .pdf-message-icon {
    color: var(--success-color);
}

body.dark-mode .pdf-message.error .pdf-message-icon {
    color: var(--error-color);
}

body.dark-mode .pdf-message.warning .pdf-message-icon {
    color: var(--secondary-color);
}

body.dark-mode .pdf-message-text {
    color: var(--text-color);
}

body.dark-mode .pdf-file-icon {
    color: var(--primary-color);
}

body.dark-mode .pdf-page-info {
    color: var(--text-color);
}

body.dark-mode .pdf-extract-btn {
    background-color: var(--primary-color);
    color: #1F1F23;
}

body.dark-mode .pdf-extract-btn:hover {
    background-color: #5DD5D7;
}

body.dark-mode .pdf-extract-btn:disabled {
    background-color: var(--dark-hover);
    color: var(--dark-text-muted);
}

body.dark-mode .pdf-extract-btn i,
body.dark-mode .camera-btn i {
    color: inherit;
}

body.dark-mode .camera-btn {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e5a821 100%);
    color: #1F1F23;
}

body.dark-mode .camera-btn:hover {
    background: linear-gradient(135deg, #FFD470 0%, var(--secondary-color) 100%);
}

body.dark-mode .format-badge i {
    color: var(--primary-color);
}

body.dark-mode .pdf-page-nav {
    background-color: var(--primary-color);
    color: #1F1F23;
}

body.dark-mode .pdf-page-nav:hover:not(:disabled) {
    background-color: #5DD5D7;
}

body.dark-mode .pdf-page-nav:disabled {
    opacity: 0.4;
    background-color: var(--dark-hover);
    color: var(--dark-text-muted);
}

body.dark-mode .pdf-preview-content {
    background-color: var(--dark-surface);
}

body.dark-mode .pdf-preview-loading {
    color: var(--dark-text-muted);
}

body.dark-mode .stat-item {
    background-color: var(--dark-surface);
    border: 1px solid var(--border-color);
}

/* Boutons principaux avec icônes */
body.dark-mode #processSyllabes i,
body.dark-mode #clearText i,
body.dark-mode #copyResult i,
body.dark-mode #printResult i,
body.dark-mode #listenText i {
    color: inherit;
}

/* Notifications en mode sombre */
body.dark-mode .notification {
    background-color: var(--dark-elevated);
    border-color: var(--border-color);
    color: var(--text-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .notification.success {
    border-left-color: var(--success-color);
}

body.dark-mode .notification.error {
    border-left-color: var(--error-color);
}

body.dark-mode .notification.info {
    border-left-color: var(--primary-color);
}

/* Camera interface en mode sombre */
body.dark-mode .camera-interface {
    background-color: var(--dark-surface);
}

body.dark-mode .camera-controls {
    background-color: var(--container-bg);
    border-top-color: var(--border-color);
}

body.dark-mode .camera-btn {
    background-color: var(--primary-color);
    color: #1F1F23;
}

body.dark-mode .camera-btn:hover {
    background-color: #5DD5D7;
}

/* Progress indicator en mode sombre */
body.dark-mode .syllabification-indicator {
    background-color: var(--dark-elevated);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .indicator-badge {
    background-color: var(--dark-surface);
}

body.dark-mode .indicator-badge.processing {
    background-color: var(--primary-color);
    color: #1F1F23;
}

body.dark-mode .indicator-badge.completed {
    background-color: var(--success-color);
    color: #1F1F23;
}

body.dark-mode .indicator-progress-bar {
    background-color: var(--dark-surface);
}

body.dark-mode .indicator-progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Voice selector en mode sombre */
body.dark-mode .voice-select {
    background-color: var(--dark-surface);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .voice-select option {
    background-color: var(--dark-surface);
    color: var(--text-color);
}

body.dark-mode .voice-select optgroup {
    background-color: var(--dark-elevated);
    color: var(--text-color);
}

body.dark-mode .preview-voice-btn {
    background-color: var(--primary-color);
}

body.dark-mode .preview-voice-btn:hover:not(:disabled) {
    background-color: var(--secondary-color);
}

body.dark-mode .preview-voice-btn.playing {
    background-color: var(--error-color);
}

/* Speech rate slider en mode sombre */
body.dark-mode .speech-rate-slider {
    background: linear-gradient(to right, #52525B 0%, var(--primary-color) 50%, #52525B 100%);
}

body.dark-mode .speech-rate-value {
    color: var(--primary-color);
}

body.dark-mode .speech-rate-mark-recommended {
    color: var(--primary-color);
}

/* Footer promo en mode sombre */
body.dark-mode .footer-promo {
    background-color: var(--dark-elevated);
    border-color: var(--border-color);
}

body.dark-mode .footer-promo-title {
    color: var(--text-color);
}

body.dark-mode .footer-promo-description {
    color: var(--dark-text-muted);
}

/* OCR Enhanced en mode sombre */
body.dark-mode .ocr-progress-overlay {
    background-color: rgba(24, 24, 27, 0.95);
}

body.dark-mode .ocr-progress-container {
    background-color: var(--container-bg);
    border-color: var(--border-color);
}

body.dark-mode .ocr-status-message {
    color: var(--text-color);
}

body.dark-mode .ocr-quality-indicator {
    background-color: var(--dark-elevated);
    color: var(--text-color);
}

/* Mobile FAB en mode sombre */
body.dark-mode .fab-container {
    background-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .fab-container:hover {
    background-color: var(--accent-color);
}

/* Image preview en mode sombre */
body.dark-mode #imagePreview {
    border-color: var(--border-color);
    background-color: var(--dark-surface);
}

body.dark-mode .preview-container {
    background-color: var(--dark-surface);
}

/* Progress bar en mode sombre */
body.dark-mode .progress-bar {
    background-color: var(--dark-surface);
}

body.dark-mode .progress {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Status message en mode sombre */
body.dark-mode .status-message {
    color: var(--text-color);
}

/* Amélioration du contraste pour l'accessibilité */
body.dark-mode .btn:focus {
    outline-color: rgba(78, 202, 204, 0.6);
}

body.dark-mode .toggle-switch input:focus-visible + .toggle-slider {
    outline-color: rgba(78, 202, 204, 0.6);
}

/* Scrollbars personnalisées en mode sombre (WebKit) */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-surface);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-text-muted);
}

/* Transitions pour un changement fluide */
body,
.section-ocr,
.section-text,
.section-result,
.pdf-import-container,
.text-container,
.result-container,
.settings-panel,
.btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Support du thème système - Les styles sont appliqués via la classe .dark-mode par le JS */

/* Animation de transition mode sombre */
@keyframes darkModeTransition {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

body.dark-mode-transitioning {
    animation: darkModeTransition 0.3s ease;
}