/* ==========================================================================
   css/styles.css - SmartLift
   Système de Thémisation Pur (AMOLED Black / Pure White)
   ========================================================================== */

:root {
    --radius-card: 1.5rem;
    --radius-btn: 0.75rem;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    background-color: var(--color-bg-main) !important;
    color: var(--color-text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   🌙 THÈME SOMBRE : NOIR PUR (AMOLED)
   ========================================================================== */
:root, [data-theme="dark"] {
    color-scheme: dark;

    --color-bg-main: #000000;       /* Noir pur (Fond) */
    --color-bg-nav: rgba(0, 0, 0, 0.9);
    --color-bg-card: #000000;       /* Noir pur (Cartes) */
    --color-bg-input: #000000;      /* Noir pur (Inputs) */
    
    --color-border: #27272a;        /* Bordure grise pour séparer (zinc-800) */

    --color-text-main: #ffffff;     /* Blanc pur */
    --color-text-muted: #a1a1aa;    /* Gris clair */

    --color-accent-emerald: #10b981;
    --color-accent-blue: #3b82f6;
}

/* ==========================================================================
   ☀️ THÈME CLAIR : BLANC PUR
   ========================================================================== */
[data-theme="light"] {
    color-scheme: light;

    --color-bg-main: #ffffff;       /* Blanc pur (Fond) */
    --color-bg-nav: rgba(255, 255, 255, 0.9);
    --color-bg-card: #ffffff;       /* Blanc pur (Cartes) */
    --color-bg-input: #ffffff;      /* Blanc pur (Inputs) */
    
    --color-border: #e2e8f0;        /* Bordure grise très claire (slate-200) */

    --color-text-main: #000000;     /* Noir pur */
    --color-text-muted: #64748b;    /* Gris moyen */

    --color-accent-emerald: #059669;
    --color-accent-blue: #2563eb;
}

/* ==========================================================================
   APPLICATION UNIVERSELLE
   ========================================================================== */

/* 1. Header & Navigation */
header, nav {
    background-color: var(--color-bg-nav) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: blur(12px);
}

header h1 {
    background-image: linear-gradient(to right, var(--color-text-main), var(--color-text-muted)) !important;
}

nav button svg, nav button span {
    color: var(--color-text-main) !important;
}

/* 2. Forcer toutes les cartes Tailwind à utiliser nos variables pures */
.bg-zinc-900,
.bg-zinc-900\/80,
.bg-zinc-900\/50,
.bg-zinc-900\/60,
.bg-zinc-900\/40,
.bg-zinc-950,
.bg-zinc-950\/80,
.bg-zinc-950\/50,
.bg-black,
#recovery-heatmap,
.exo-block,
#active-workout .flex,
#active-cardio .bg-zinc-900\/80,
#active-special .bg-zinc-900\/80 {
    background-color: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-card);
    box-shadow: none !important; /* On enlève les ombres, on utilise les bordures */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 3. Formulaires et Inputs */
input, select, textarea {
    background-color: var(--color-bg-input) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
    box-shadow: none !important;
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.6;
}

/* 4. Textes */
h1, h2, h3, h4, .text-white { color: var(--color-text-main) !important; }
p, .text-zinc-300, .text-zinc-400 { color: var(--color-text-muted) !important; }
.text-zinc-500, .text-zinc-600 { color: var(--color-text-muted) !important; opacity: 0.8; }

/* 5. Boutons secondaires */
.bg-zinc-800 {
    background-color: var(--color-bg-input) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-main) !important;
}
.bg-zinc-800:hover {
    border-color: var(--color-text-muted) !important;
}

/* Boutons d'action principaux (Google, etc) */
.bg-white {
    background-color: var(--color-text-main) !important;
    color: var(--color-bg-main) !important;
    border: 1px solid var(--color-border) !important;
}

/* 6. Couleurs d'accentuation (Vert, Bleu, etc.) */
.text-emerald-400 { color: var(--color-accent-emerald) !important; }
.text-blue-400 { color: var(--color-accent-blue) !important; }

.border-emerald-500\/30 { border-color: rgba(5, 150, 105, 0.4) !important; }
.bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.08) !important; }

.border-blue-500\/30 { border-color: rgba(37, 99, 235, 0.4) !important; }
.bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.08) !important; }

/* 7. Ajustements Modal & CRM */
#history-modal div, #partner-nutrition-modal, #coach-visbody-modal div, #daily-checkin-modal div {
    background-color: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}

/* Fix du slider en clair */
[data-theme="light"] input[type="range"] { background: transparent; }
[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track { background: #e2e8f0; border-radius: 1rem; height: 8px; }

nav {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

nav button {
    pointer-events: auto !important;
    position: relative;
    z-index: 10000 !important;
}

/* ==========================================================================
   BARRE DE NAVIGATION MOBILE ET ZONE SÛRE iOS
   --------------------------------------------------------------------------
   Depuis le passage à `viewport-fit=cover`, la page occupe tout l'écran, y
   compris sous la barre d'accueil de l'iPhone. `env(safe-area-inset-bottom)`
   renvoie alors une vraie valeur (~34 pt) et la barre de navigation grandit
   d'autant.

   Le corps de page (`pb-24`) et le chrono flottant (`bottom-24`) utilisaient
   une marge fixe de 96 px, désormais insuffisante : le chrono passait derrière
   la barre. Tout est maintenant calé sur --nav-height, mesurée au pixel près
   par mesurerNav() dans js/ui.js.
   ========================================================================== */

:root {
    /* ⬅️ LE SEUL RÉGLAGE À TOUCHER pour changer l'épaisseur de la barre.
       2.875rem = 46 px : icône 23 px + libellé 9 px, centrés.
       Descendre sous 2.75rem colle le texte à l'icône. */
    --nav-content-height: 2.875rem;

    /* Marge sous les icônes.
       iOS annonce 34 pt de zone sûre en bas, alors que le trait d'accueil
       n'occupe réellement qu'une douzaine de points. Appliquer les 34 pt
       laissait un bandeau noir visible sous la barre, comme si elle flottait.
       On en retire 14 : les icônes descendent, le trait reste dégagé.
       Sur un appareil sans trait d'accueil, env() vaut 0 et le max() garantit
       8 px de respiration. */
    --nav-safe-bottom: max(calc(env(safe-area-inset-bottom, 0px) - 14px), 8px);

    /* Hauteur totale. Remplacée par la mesure réelle de mesurerNav()
       (js/ui.js) dès le chargement. */
    --nav-height: calc(var(--nav-content-height) + var(--nav-safe-bottom));
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(var(--nav-height) + 1.25rem) !important;
        /* La page occupe toujours au moins un écran. Sans ça, un onglet court
           comme Historique laisse la hauteur du document s'effondrer, et le
           passage depuis un onglet long provoque un saut de défilement. */
        min-height: 100dvh;
    }

    #floating-timer {
        bottom: calc(var(--nav-height) + 0.75rem) !important;
        /* Sur un petit écran, le chrono ne doit jamais dépasser du cadre */
        max-height: calc(100dvh - var(--nav-height) - 6rem);
        overflow-y: auto;
    }

    /* Remplace la classe pb-safe, qui appliquait les 34 pt complets. */
    nav {
        padding-bottom: var(--nav-safe-bottom) !important;
    }

    /* Hauteur imposée plutôt que déduite d'une pile de marges : c'est ce qui
       rend le réglage ci-dessus réellement prévisible. */
    nav > div {
        height: var(--nav-content-height);
        padding: 0 !important;
        align-items: center;
    }

    nav button {
        gap: 0 !important;
        justify-content: center;
    }

    nav button svg {
        width: 23px;
        height: 23px;
        margin-bottom: 1px !important;
    }

    /* Libellés conservés : 9 px suffisent à les rendre lisibles sans peser
       sur la hauteur. C'est la graisse et l'espacement des lettres qui
       portent la lisibilité à cette taille, pas le corps. */
    nav button span {
        display: block;
        margin-top: 0 !important;
        font-size: 9px;
        line-height: 10px;
        letter-spacing: 0.04em;
    }

    /* L'en-tête garde la marge haute qui dégage la barre d'état, mais sa
       marge basse de 16 px n'avait aucune utilité. */
    header {
        padding-bottom: 0.5rem !important;
    }
}

/* Sur écran large la navigation est latérale : plus de marge basse. */
@media (min-width: 768px) {
    :root {
        --nav-height: 0px;
    }
}