/**
 * Theme CSS - Light and Dark mode support
 */

/* =============================================
   FOND NAVAL - Peinture de bataille navale
   ============================================= */

/* Fond avec peinture de bataille navale (Turner - Battle of Trafalgar) */
html:has(body.naval-bg) {
    background: #0c1445;
}

body.naval-bg {
    position: relative;
    background: transparent;
    min-height: 100vh;
}

/* Image de fond - Bataille de Trafalgar (Turner, domaine public) */
body.naval-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url("../images/battleship.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.5;
    filter: saturate(1) brightness(1);
}

/* Overlay bleu pour harmoniser avec le theme */
body.naval-bg::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(12, 20, 69, 0.2) 0%, rgba(30, 64, 175, 0.1) 50%, rgba(25, 118, 210, 0.2) 100%);
    pointer-events: none;
}

/* Contenu au-dessus du fond */
body.naval-bg > nav,
body.naval-bg > main,
body.naval-bg > .container,
body.naval-bg > div:not([class*="fixed"]):not([class*="absolute"]) {
    position: relative;
    z-index: 2;
}

/* Mode sombre - ajuster l'opacite */
html.dark:has(body.naval-bg) {
    background: #0f172a;
}

html.dark body.naval-bg::before {
    opacity: 0.1;
    filter: saturate(0.5);
}

html.dark body.naval-bg::after {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.8) 100%);
}

/* Variables CSS pour le theme clair (defaut) */
:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-gradient-from: #1e3a8a;
    --bg-gradient-via: #1e40af;
    --bg-gradient-to: #1e3a8a;

    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;

    --border-color: #e5e7eb;
    --border-focus: #3b82f6;

    --card-bg: #ffffff;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --input-bg: #ffffff;
    --input-border: #d1d5db;

    --btn-primary-bg: #3b82f6;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-text: #374151;

    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    --board-bg: #e0d4b8;
    --board-cell-light: #f5e6c8;
    --board-cell-dark: #c9b896;
}

/* Variables CSS pour le theme sombre */
html.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-gradient-from: #0f172a;
    --bg-gradient-via: #1e293b;
    --bg-gradient-to: #0f172a;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;

    --border-color: #475569;
    --border-focus: #60a5fa;

    --card-bg: #1e293b;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);

    --input-bg: #334155;
    --input-border: #475569;

    --btn-primary-bg: #2563eb;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #475569;
    --btn-secondary-text: #e2e8f0;

    --board-bg: #3d3a32;
    --board-cell-light: #5c5647;
    --board-cell-dark: #4a453c;
}

/* Application des variables aux elements communs */
body.themed {
    background: linear-gradient(135deg, var(--bg-gradient-from), var(--bg-gradient-via), var(--bg-gradient-to));
    color: var(--text-primary);
}

.themed .card,
.themed .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
}

.themed .text-gray-800,
.themed .text-gray-900 {
    color: var(--text-primary) !important;
}

.themed .text-gray-600,
.themed .text-gray-700 {
    color: var(--text-secondary) !important;
}

.themed .text-gray-500,
.themed .text-gray-400 {
    color: var(--text-muted) !important;
}

.themed .border-gray-200,
.themed .border-gray-300 {
    border-color: var(--border-color) !important;
}

.themed .bg-gray-50,
.themed .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

.themed input,
.themed textarea,
.themed select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.themed input:focus,
.themed textarea:focus,
.themed select:focus {
    border-color: var(--border-focus);
}

/* Navigation en mode sombre */
html.dark nav {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

/* Plateau de jeu en mode sombre */
html.dark .board-cell.light-cell {
    background-color: var(--board-cell-light);
}

html.dark .board-cell.dark-cell {
    background-color: var(--board-cell-dark);
}

/* Transitions douces */
body,
.card,
.bg-white,
nav,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Panneaux et cartes colorées en mode sombre */
html.dark .bg-blue-50,
html.dark .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

html.dark .bg-yellow-50 {
    background-color: rgba(146, 64, 14, 0.3) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(5, 150, 105, 0.2) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(185, 28, 28, 0.2) !important;
}

/* Textes colorés en mode sombre - améliorer la lisibilité */
html.dark .text-blue-900,
html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-yellow-900,
html.dark .text-yellow-800 {
    color: #fcd34d !important;
}

html.dark .text-green-900,
html.dark .text-green-800 {
    color: #6ee7b7 !important;
}

html.dark .text-red-900,
html.dark .text-red-800 {
    color: #fca5a5 !important;
}

/* Instructions et textes sur fonds colorés */
html.dark .bg-blue-50 .text-gray-700,
html.dark .bg-yellow-50 .text-gray-700,
html.dark .bg-green-50 .text-gray-700,
html.dark .bg-red-50 .text-gray-700 {
    color: #e2e8f0 !important;
}

/* Bordures colorées en mode sombre */
html.dark .border-yellow-300 {
    border-color: #fbbf24 !important;
}

html.dark .border-green-300 {
    border-color: #34d399 !important;
}

html.dark .border-red-300 {
    border-color: #f87171 !important;
}

html.dark .border-blue-300 {
    border-color: #60a5fa !important;
}

/* Labels de cases du plateau en mode sombre */
html.dark .cell-label {
    color: #94a3b8 !important;
}

/* Récapitulatif des forces en mode sombre */
html.dark .text-xs .text-gray-600 {
    color: #94a3b8 !important;
}

/* Panneaux de statistiques */
html.dark .bg-blue-50 span[style*="color: #1f2937"] {
    color: #e2e8f0 !important;
}

html.dark .bg-blue-50 span[style*="color: #1e3a8a"] {
    color: #93c5fd !important;
}

/* Légende du plateau en mode sombre */
html.dark .bg-gray-50 {
    background-color: var(--bg-tertiary) !important;
}

html.dark .bg-gray-50 div {
    color: var(--text-secondary) !important;
}

/* Zone de statut en mode sombre */
html.dark #status-content {
    color: var(--text-primary);
}

/* Pièces capturées - fond en mode sombre */
html.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.3) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(6, 78, 59, 0.3) !important;
}

/* Groupes de pièces capturées en mode sombre */
html.dark .captured-type-group .text-gray-700 {
    color: var(--text-secondary) !important;
}

html.dark .bg-red-200 {
    background-color: rgba(185, 28, 28, 0.4) !important;
    color: #fca5a5 !important;
}

html.dark .bg-green-200 {
    background-color: rgba(6, 95, 70, 0.4) !important;
    color: #6ee7b7 !important;
}

/* Section chat en mode sombre */
html.dark #chat-messages {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Messages de l'adversaire en mode sombre (bg-gray-300) */
html.dark #chat-messages .bg-gray-300 {
    background-color: #475569 !important;
}

html.dark #chat-messages .bg-gray-300 .text-gray-900,
html.dark #chat-messages .bg-gray-300 .text-gray-800 {
    color: #f1f5f9 !important;
}

/* Conseils en mode sombre */
html.dark .text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

/* Panneau de statistiques - classes réutilisables */
.stats-panel {
    background-color: rgba(239, 246, 255, 1);
}

.stats-title {
    color: #1e3a8a;
}

.stats-label {
    color: #1f2937;
}

.stats-value {
    color: #1e3a8a;
}

html.dark .stats-panel {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

html.dark .stats-title {
    color: #93c5fd !important;
}

html.dark .stats-label {
    color: #e2e8f0 !important;
}

html.dark .stats-value {
    color: #93c5fd !important;
}

/* Animation de clignotement pour le chronomètre */
@keyframes timerPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

#timer-display[style*="animation"] {
    animation: timerPulse 0.5s ease-in-out infinite !important;
}

/* Mode sombre pour le chronomètre */
html.dark #setup-timer.bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.3) !important;
    border-color: #3b82f6 !important;
}

html.dark #setup-timer.bg-yellow-100 {
    background-color: rgba(146, 64, 14, 0.3) !important;
    border-color: #fbbf24 !important;
}

html.dark #setup-timer.bg-red-100 {
    background-color: rgba(185, 28, 28, 0.3) !important;
    border-color: #f87171 !important;
}

html.dark #timer-display.text-blue-800 {
    color: #93c5fd !important;
}

html.dark #timer-display.text-yellow-800 {
    color: #fcd34d !important;
}

html.dark #timer-display.text-red-600 {
    color: #fca5a5 !important;
}

/* Mode sombre pour le chronomètre de tour */
html.dark #turn-timer-container.bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.3) !important;
    border-color: #3b82f6 !important;
}

html.dark #turn-timer-container.bg-yellow-100 {
    background-color: rgba(146, 64, 14, 0.3) !important;
    border-color: #fbbf24 !important;
}

html.dark #turn-timer-container.bg-red-100 {
    background-color: rgba(185, 28, 28, 0.3) !important;
    border-color: #f87171 !important;
}

html.dark #turn-timer.text-blue-800 {
    color: #93c5fd !important;
}

html.dark #turn-timer.text-yellow-800 {
    color: #fcd34d !important;
}

html.dark #turn-timer.text-red-600 {
    color: #fca5a5 !important;
}

/* Indicateur de tour en mode sombre */
html.dark .turn-indicator {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

html.dark .turn-indicator.bg-green-100 {
    background-color: rgba(6, 78, 59, 0.4) !important;
    border-color: #10b981 !important;
}

html.dark .turn-indicator .text-gray-900 {
    color: var(--text-primary) !important;
}

html.dark .turn-indicator .text-gray-700 {
    color: var(--text-secondary) !important;
}

/* Légende du plateau en mode sombre */
html.dark .board-legend {
    background-color: var(--bg-tertiary) !important;
}

html.dark .board-legend .text-gray-800 {
    color: var(--text-secondary) !important;
}

html.dark .board-legend .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .board-legend .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .board-legend .text-green-700 {
    color: #6ee7b7 !important;
}

html.dark .board-legend .text-yellow-700 {
    color: #fcd34d !important;
}

/* Titres des sections en mode sombre */
html.dark .text-red-800 {
    color: #fca5a5 !important;
}

html.dark .text-green-800 {
    color: #6ee7b7 !important;
}

/* Conseils en mode sombre */
html.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

html.dark .text-gray-700 {
    color: var(--text-secondary) !important;
}

/* Desactivation des animations si preference utilisateur */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.no-animations * {
    animation: none !important;
    transition: none !important;
}