/* Mode sombre automatique et manuel */

/* Variables pour le mode sombre */
:root {
    --dark-bg-primary: #000000;
    --dark-bg-secondary: #1c1c1e;
    --dark-bg-tertiary: #2c2c2e;
    --dark-bg-hover: #3a3a3c;
    
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #a8a8a8;
    --dark-text-muted: #6c6c70;
    
    --dark-border-color: #38383a;
    --dark-border-hover: #48484a;
    
    --dark-glass-bg: rgba(0, 0, 0, 0.3);
    --dark-glass-border: rgba(255, 255, 255, 0.1);
    
    --dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --dark-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Mode sombre automatique basé sur les préférences système */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--dark-bg-primary);
        --bg-secondary: var(--dark-bg-secondary);
        --bg-tertiary: var(--dark-bg-tertiary);
        --bg-hover: var(--dark-bg-hover);
        
        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-muted: var(--dark-text-muted);
        
        --border-color: var(--dark-border-color);
        --border-hover: var(--dark-border-hover);
        
        --glass-bg: var(--dark-glass-bg);
        --glass-border: var(--dark-glass-border);
        
        --shadow-sm: var(--dark-shadow-sm);
        --shadow-md: var(--dark-shadow-md);
        --shadow-lg: var(--dark-shadow-lg);
    }
    
    /* Ajustements spécifiques pour le mode sombre */
    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
    
    /* Images avec transparence */
    img {
        opacity: 0.9;
    }
    
    /* Liens */
    a {
        color: var(--text-primary);
    }
    
    a:hover {
        color: var(--primary-color);
    }
    
    /* Boutons */
    .btn {
        border-color: var(--border-color);
    }
    
    .btn-secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    .btn-secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-hover);
    }
    
    /* Inputs */
    input, textarea, select {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    input:focus, textarea:focus, select:focus {
        background: var(--bg-primary);
        border-color: var(--primary-color);
    }
    
    /* Modales */
    .modal-content {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }
    
    .modal-header {
        background: var(--bg-tertiary);
        border-bottom-color: var(--border-color);
    }
    
    /* Navigation */
    .mobile-header {
        background: var(--dark-glass-bg);
        border-bottom-color: var(--border-color);
    }
    
    .mobile-bottom-nav {
        background: var(--dark-glass-bg);
        border-top-color: var(--border-color);
    }
    
    /* Posts */
    .mobile-post {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }
    
    .mobile-post-header,
    .mobile-post-stats {
        border-color: var(--border-color);
    }
    
    /* Stories */
    .mobile-stories {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }
    
    /* Notifications */
    .in-app-notification {
        background: var(--dark-glass-bg);
        border-color: var(--border-color);
    }
    
    .toast-notification {
        background: var(--dark-glass-bg);
        border-color: var(--border-color);
    }
}

/* Mode sombre manuel */
[data-theme="dark"] {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --bg-hover: var(--dark-bg-hover);
    
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    
    --border-color: var(--dark-border-color);
    --border-hover: var(--dark-border-hover);
    
    --glass-bg: var(--dark-glass-bg);
    --glass-border: var(--dark-glass-border);
    
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
}

[data-theme="dark"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] a {
    color: var(--text-primary);
}

[data-theme="dark"] a:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .btn {
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--bg-primary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mobile-header {
    background: var(--dark-glass-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mobile-bottom-nav {
    background: var(--dark-glass-bg);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .mobile-post {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .mobile-post-header,
[data-theme="dark"] .mobile-post-stats {
    border-color: var(--border-color);
}

[data-theme="dark"] .mobile-stories {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .in-app-notification {
    background: var(--dark-glass-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .toast-notification {
    background: var(--dark-glass-bg);
    border-color: var(--border-color);
}

/* Mode clair forcé */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f1f3f4;
    
    --text-primary: #1a1a1a;
    --text-secondary: #8e8e8e;
    --text-muted: #c7c7cc;
    
    --border-color: #e1e5e9;
    --border-hover: #c7c7cc;
    
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Bouton de basculement du thème */
.theme-toggle {
    position: fixed;
    bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 20px);
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.theme-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

.theme-toggle .icon {
    font-size: 20px;
    color: var(--text-primary);
    transition: var(--transition);
}

.theme-toggle:hover .icon {
    transform: rotate(180deg);
}

/* Animation de transition entre les thèmes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Indicateur de thème */
.theme-indicator {
    position: fixed;
    top: calc(var(--mobile-header-height) + var(--mobile-safe-area-top) + 10px);
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    z-index: 1000;
    opacity: 0.7;
    transition: var(--transition);
}

.theme-indicator.dark {
    background: #ffd700;
}

.theme-indicator.light {
    background: #87ceeb;
}

/* Styles pour les éléments spécifiques au mode sombre */
.dark-mode-only {
    display: none;
}

.light-mode-only {
    display: block;
}

[data-theme="dark"] .dark-mode-only {
    display: block;
}

[data-theme="dark"] .light-mode-only {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .dark-mode-only {
        display: block;
    }
    
    .light-mode-only {
        display: none;
    }
}

/* Ajustements pour les images en mode sombre */
[data-theme="dark"] img,
@media (prefers-color-scheme: dark) {
    img {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* Ajustements pour les vidéos en mode sombre */
[data-theme="dark"] video,
@media (prefers-color-scheme: dark) {
    video {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* Ajustements pour les iframes en mode sombre */
[data-theme="dark"] iframe,
@media (prefers-color-scheme: dark) {
    iframe {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* Styles pour les éléments de formulaire en mode sombre */
[data-theme="dark"] .form-control,
@media (prefers-color-scheme: dark) {
    .form-control {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    .form-control:focus {
        background: var(--bg-primary);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
    }
    
    .form-control::placeholder {
        color: var(--text-muted);
    }
}

/* Styles pour les cartes en mode sombre */
[data-theme="dark"] .card,
@media (prefers-color-scheme: dark) {
    .card {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        box-shadow: var(--shadow-md);
    }
    
    .card-header {
        background: var(--bg-tertiary);
        border-bottom-color: var(--border-color);
    }
    
    .card-footer {
        background: var(--bg-tertiary);
        border-top-color: var(--border-color);
    }
}

/* Styles pour les tables en mode sombre */
[data-theme="dark"] table,
@media (prefers-color-scheme: dark) {
    table {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    th {
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    td {
        border-color: var(--border-color);
    }
    
    tr:nth-child(even) {
        background: var(--bg-tertiary);
    }
}

/* Styles pour les listes en mode sombre */
[data-theme="dark"] ul,
[data-theme="dark"] ol,
@media (prefers-color-scheme: dark) {
    ul, ol {
        color: var(--text-primary);
    }
    
    li {
        color: var(--text-primary);
    }
}

/* Styles pour les citations en mode sombre */
[data-theme="dark"] blockquote,
@media (prefers-color-scheme: dark) {
    blockquote {
        background: var(--bg-tertiary);
        border-left-color: var(--primary-color);
        color: var(--text-primary);
    }
}

/* Styles pour le code en mode sombre */
[data-theme="dark"] code,
[data-theme="dark"] pre,
@media (prefers-color-scheme: dark) {
    code {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    pre {
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
}

/* Responsive pour le bouton de thème */
@media (max-width: 768px) {
    .theme-toggle {
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 10px);
        right: 10px;
        width: 45px;
        height: 45px;
    }
    
    .theme-toggle .icon {
        font-size: 18px;
    }
}

/* Animation de transition pour le changement de thème */
.theme-transition {
    transition: all 0.3s ease-in-out;
}

/* Styles pour les éléments qui ne doivent pas changer en mode sombre */
.no-theme-change {
    filter: none !important;
}

/* Styles pour les éléments qui doivent être inversés en mode sombre */
.theme-invert {
    filter: invert(1);
}

[data-theme="dark"] .theme-invert,
@media (prefers-color-scheme: dark) {
    .theme-invert {
        filter: invert(1);
    }
}