/**
 * StoryCraft - Secondary Pages Theming
 * Styles communs pour les pages secondaires (conte-du-soir, image-creator, journal-magique)
 * Ces styles utilisent les variables CSS des thèmes pour une cohérence visuelle
 * @version 1.1 - WCAG AA contrast improvements
 */

/* === GLOBAL CONTRAST IMPROVEMENTS === */
/* Make secondary text more readable across all themes */

/* === RESET DES COULEURS HARDCODÉES === */
/* Force l'utilisation des variables CSS des thèmes */

/* Container principal - utilise les couleurs du thème */
.page-container,
.bedtime-container,
.image-creator-container,
.journal-container {
    background: var(--background-primary);
    color: var(--text-primary);
    min-height: 100vh;
    font-family: var(--font-family), "Comic Sans MS", cursive, sans-serif;
}

/* Cards et conteneurs de contenu - fond SOLIDE pour meilleur contraste */
.page-card,
.story-card,
.creator-card,
.journal-book,
.entry-form,
.stellie-response,
.story-display,
.sleep-sounds,
.image-card,
.stellie-mood-selector,
.entries-list,
.entry-card {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: var(--shadow-light);
}

/* Titres - couleur primaire avec bon contraste */
.page-title,
.magic-title,
.journal-title,
.bedtime-title,
.section-title {
    color: var(--primary-color) !important;
    text-shadow: none; /* Remove shadow for cleaner look */
    font-weight: 700;
}

/* Sous-titres - utiliser text-secondary amélioré */
.page-subtitle,
.magic-subtitle,
.bedtime-subtitle,
.mood-title,
.entry-date,
.story-meta,
.helper-text {
    color: var(--text-secondary) !important;
    font-weight: 500; /* slightly bolder for readability */
}

/* Inputs et textareas */
.page-input,
.input-magic,
.bedtime-input,
.entry-input,
.journal-input {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

.page-input:focus,
.input-magic:focus,
.bedtime-input:focus,
.entry-input:focus,
.journal-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb, 214, 77, 122), 0.2) !important;
    background: var(--background-secondary) !important;
}

.page-input::placeholder,
.input-magic::placeholder,
.bedtime-input::placeholder,
.entry-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* Boutons style page - WCAG AA compliant */
/* Utiliser des couleurs solides au lieu de gradients pour meilleur contraste */
.page-btn,
.magic-button,
.bedtime-btn,
.journal-btn {
    background: var(--primary-color) !important;
    color: var(--text-on-color, white) !important;
    border: 2px solid var(--primary-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-btn:hover,
.magic-button:hover,
.bedtime-btn:hover,
.journal-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 85%, black) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.page-btn.secondary,
.bedtime-btn.secondary,
.journal-btn.stellie-response {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.page-btn.secondary:hover,
.bedtime-btn.secondary:hover {
    background: color-mix(in srgb, var(--secondary-color) 85%, black) !important;
}

/* Prompt chips - couleur solide */
.prompt-chip,
.idea-chip {
    background: var(--secondary-color) !important;
    color: var(--text-on-color, white) !important;
    border: 2px solid transparent !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-weight: 500;
}

.prompt-chip:hover,
.idea-chip:hover {
    background: color-mix(in srgb, var(--secondary-color) 85%, black) !important;
    border-color: var(--primary-color) !important;
}

/* Boutons de style/mood non sélectionnés */
.style-btn,
.mood-btn {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    border: 3px solid var(--border-color) !important;
}

.style-btn:hover,
.mood-btn:hover {
    border-color: var(--primary-color) !important;
    background: var(--background-secondary) !important;
}

.style-btn.active,
.mood-btn.selected {
    background: var(--primary-color) !important;
    color: var(--text-on-color, white) !important;
    border-color: var(--primary-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Sound buttons */
.sound-btn {
    background: var(--background-card) !important;
    border: 2px solid var(--secondary-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

.sound-btn:hover,
.sound-btn.active {
    background: var(--secondary-color) !important;
    color: var(--text-on-color, white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Mode cards (conte du soir) - couleur solide pour meilleur contraste */
.mode-card {
    background: var(--secondary-color) !important;
    color: var(--text-on-color, white) !important;
    border: 3px solid transparent !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.mode-card:hover {
    background: color-mix(in srgb, var(--secondary-color) 90%, black) !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-medium);
}

.mode-card.selected {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb, 214, 77, 122), 0.5) !important;
}

/* Réponses Stellie */
.stellie-response,
.stellie-bedtime-response {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%) !important;
    color: white !important;
}

/* Loading states */
.dreamy-loading,
.page-loading {
    background: var(--secondary-color) !important;
    color: white !important;
}

/* Journal entries */
.journal-entry,
.entry-item {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.journal-entry:hover,
.entry-item:hover {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-light);
}

/* Date badges */
.journal-date,
.entry-date {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

/* Image cards */
.image-card {
    background: var(--background-card) !important;
    border-color: var(--primary-color) !important;
}

.image-card:hover {
    box-shadow: var(--shadow-medium);
}

.image-description {
    color: var(--text-primary) !important;
}

/* Gallery container */
.gallery-container {
    background: transparent;
}

/* Messages et texte */
.goodnight-message,
.page-message {
    color: var(--text-primary) !important;
}

/* Bouton retour */
.back-btn,
.back-link {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.back-btn:hover,
.back-link:hover {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* Story content / text display */
.story-content,
.story-text,
.entry-content {
    color: var(--text-primary) !important;
    line-height: 1.8;
}

/* === DARK THEME OVERRIDES === */
/* Assure la lisibilité sur thèmes sombres */

[data-theme] .page-container,
[data-theme] .bedtime-container,
[data-theme] .image-creator-container,
[data-theme] .journal-container,
.night-mode .page-container,
.night-mode .bedtime-container,
.night-mode .image-creator-container,
.night-mode .journal-container {
    background: var(--background-primary);
}

[data-theme] .story-card,
[data-theme] .creator-card,
[data-theme] .journal-book,
[data-theme] .entry-form,
[data-theme] .image-card,
.night-mode .story-card,
.night-mode .creator-card,
.night-mode .journal-book,
.night-mode .entry-form,
.night-mode .image-card {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
}

/* Header de page */
[data-theme] .page-header,
.night-mode .page-header {
    background: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Fix pour les pseudo-éléments avec couleurs hardcodées */
[data-theme] .journal-book::before,
.night-mode .journal-book::before {
    background: var(--primary-color) !important;
    opacity: 0.5;
}

[data-theme] .story-display::before,
.night-mode .story-display::before {
    color: var(--text-primary);
}

/* === MODAL FIXES === */
/* Correctif pour les modales avec fond blanc */

.modal,
.modal-content,
.settings-modal,
.stellie-settings-modal,
.achievement-modal,
.confirm-modal {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modal-header {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--fun-orange, var(--accent-color)) 100%
    ) !important;
    color: white !important;
    border-bottom-color: var(--border-color) !important;
}

.modal-body {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    background: var(--background-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* Settings modal specifics */
.settings-tabs {
    background: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
}

.tab-btn {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

.tab-btn:hover {
    color: var(--text-primary) !important;
    background: var(--background-card) !important;
}

.tab-btn.active {
    color: var(--primary-color) !important;
    background: var(--background-card) !important;
}

.tab-content {
    background: var(--background-card) !important;
}

/* Settings groups */
.setting-group label {
    color: var(--text-primary) !important;
}

.setting-help {
    color: var(--text-secondary) !important;
}

/* Stellie settings panel */
.stellie-setup-panel,
.stellie-settings-panel {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Prompt templates buttons */
.btn-template,
.prompt-template-btn {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.btn-template:hover,
.prompt-template-btn:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* === FORM ELEMENTS FIXES === */
/* Champs de formulaire dans les modales et pages secondaires */

.setting-input,
.setting-textarea,
.setting-select,
.modal input,
.modal textarea,
.modal select {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.setting-input:focus,
.setting-textarea:focus,
.setting-select:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 214, 77, 122), 0.2) !important;
}

.setting-input::placeholder,
.setting-textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* Sliders */
.setting-slider {
    background: var(--background-secondary) !important;
}

.slider-value {
    background: var(--background-secondary) !important;
    color: var(--primary-color) !important;
}

/* Checkboxes et switches */
.setting-checkbox {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
}

.setting-checkbox label {
    color: var(--text-primary) !important;
}

.switch {
    background: var(--background-secondary) !important;
}

/* === ANIMATIONS PRÉSERVÉES === */
/* On garde les animations mais avec les couleurs du thème */

@keyframes softGlow {
    0%,
    100% {
        text-shadow:
            0 0 10px var(--primary-color),
            0 0 20px var(--primary-color);
    }
    50% {
        text-shadow:
            0 0 20px var(--primary-color),
            0 0 40px var(--primary-color);
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .page-container,
    .bedtime-container,
    .image-creator-container,
    .journal-container {
        padding: var(--spacing-md);
        padding-top: 80px;
    }

    .story-card,
    .creator-card,
    .journal-book {
        padding: var(--spacing-lg);
        margin: var(--spacing-md) 0;
    }
}

/* === ADDITIONAL FIXES === */
/* Ensure all text elements inherit theme colors */

.sleep-sounds h4,
.entry-form h4,
.creator-card h3,
.story-card h3 {
    color: var(--text-primary) !important;
}

.sound-description,
.help-text,
.meta-text {
    color: var(--text-secondary) !important;
    font-size: 0.9rem;
}

/* Stellie elements */
.stellie-avatar,
.stellie-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

/* Theme selector in secondary pages */
.page-header .theme-selector {
    position: relative;
}

.page-header .theme-btn {
    background: var(--background-card);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-header .theme-btn:hover {
    border-color: var(--primary-color);
    background: var(--background-secondary);
}

.page-header .theme-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--background-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    box-shadow: var(--shadow-medium);
    display: none;
    z-index: 1100;
}

.page-header .theme-dropdown.show {
    display: block;
}

.page-header .theme-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-header .theme-option:hover {
    background: var(--background-secondary);
    color: var(--primary-color);
}