/* Onglets pleine largeur + thème par actif (phase 10.C) */

:root {
    --page-accent: #6366f1;
    --page-accent-strong: #4f46e5;
    --page-accent-soft: rgba(99, 102, 241, 0.18);
    --page-accent-glow: rgba(99, 102, 241, 0.45);
    --page-watermark: none;
    /* Couleurs par onglet (utilisées par .pressed pour rendre la couleur de la cible) */
    --tab-global: #8b5cf6;
    --tab-btc: #f7931a;
    --tab-eth: #4f7cff;
    --tab-sol: #14f195;
}

body.theme-global {
    --page-accent: #8b5cf6;
    --page-accent-strong: #7c3aed;
    --page-accent-soft: rgba(139, 92, 246, 0.20);
    --page-accent-glow: rgba(139, 92, 246, 0.5);
    --page-watermark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='28' fill='none' stroke='%23ffffff' stroke-width='2.5'/><ellipse cx='32' cy='32' rx='12' ry='28' fill='none' stroke='%23ffffff' stroke-width='2.5'/><line x1='4' y1='32' x2='60' y2='32' stroke='%23ffffff' stroke-width='2.5'/></svg>");
}

body.theme-btc {
    --page-accent: #f7931a;
    --page-accent-strong: #d97706;
    --page-accent-soft: rgba(247, 147, 26, 0.20);
    --page-accent-glow: rgba(247, 147, 26, 0.5);
    --page-watermark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%23f7931a'/><text x='32' y='44' font-family='Arial,sans-serif' font-size='40' font-weight='bold' text-anchor='middle' fill='white'>%E2%82%BF</text></svg>");
}

body.theme-eth {
    --page-accent: #4f7cff;
    --page-accent-strong: #3b5fea;
    --page-accent-soft: rgba(79, 124, 255, 0.22);
    --page-accent-glow: rgba(79, 124, 255, 0.55);
    --page-watermark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 417'><polygon fill='%23ffffff' points='127.9,0 125.2,9.5 125.2,285.2 127.9,287.9 255.9,212.3'/><polygon fill='%23ffffff' fill-opacity='0.7' points='127.9,0 0,212.3 127.9,287.9 127.9,154.2'/><polygon fill='%23ffffff' points='127.9,312.2 126.4,314.1 126.4,412.3 127.9,416.9 255.9,236.6'/><polygon fill='%23ffffff' fill-opacity='0.7' points='127.9,416.9 127.9,312.2 0,236.6'/></svg>");
}

body.theme-sol {
    --page-accent: #14f195;
    --page-accent-strong: #0bb677;
    --page-accent-soft: rgba(20, 241, 149, 0.20);
    --page-accent-glow: rgba(153, 69, 255, 0.55);
    --page-watermark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 397 311'><defs><linearGradient id='g1' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2300ffa3'/><stop offset='1' stop-color='%23dc1fff'/></linearGradient></defs><path fill='url(%23g1)' d='M64 237 c2 -2 5 -3 8 -3 h318 c5 0 8 6 4 10 l-58 58 c-2 2 -5 3 -8 3 H10 c-5 0 -8 -6 -4 -10 z'/><path fill='url(%23g1)' d='M64 8 c2 -2 5 -3 8 -3 h318 c5 0 8 6 4 10 l-58 58 c-2 2 -5 3 -8 3 H10 c-5 0 -8 -6 -4 -10 z'/><path fill='url(%23g1)' d='M334 122 c-2 -2 -5 -3 -8 -3 H8 c-5 0 -8 6 -4 10 l58 58 c2 2 5 3 8 3 h318 c5 0 8 -6 4 -10 z'/></svg>");
}

/* Logo en arrière-plan fixe — visibilité augmentée, plus de dégradé.
   Sur iOS Safari, `position: fixed` sur un pseudo-élément peut "glisser"
   avec la barre d'URL si le parent est en `position: relative`. On retire
   donc `position: relative` du body et on utilise des positions absolues
   plus une couche GPU dédiée pour figer le watermark. */
body[class*="theme-"] {
    background-color: var(--bg-primary);
}

body[class*="theme-"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-image: var(--page-watermark);
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: min(70vw, 540px);
    opacity: 0.16;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    pointer-events: none;
    z-index: 0;
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body[class*="theme-"] > * {
    position: relative;
    z-index: 1;
}

body[class*="theme-"] .card-highlight {
    border: 1px solid var(--page-accent);
    box-shadow: 0 0 0 1px var(--page-accent-soft), 0 8px 24px var(--page-accent-soft);
}

/* Override des couleurs orange par défaut → couleur de l'actif courant.
   Les boutons filter-btn / period-btn sont stylés dans style.css via
   var(--page-accent) directement, pas besoin de les redéfinir ici. */
body[class*="theme-"] .section h2,
body[class*="theme-"] .section h3 {
    color: var(--page-accent);
}

/* Badge mode simulation */
.badge-sim {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    border-radius: 4px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

/* ============= Onglets pleine largeur ============= */

.asset-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.asset-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    border-bottom: 4px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    position: relative;
    /* Couleur de la cible : disponible en CSS via var(--tab-color) calculée à partir
       du data-page-id — défini par défaut ; surchargé par les sélecteurs ci-dessous. */
    --tab-color: var(--text-muted);
}

.asset-nav-tab[data-page-id="global"] { --tab-color: var(--tab-global); }
.asset-nav-tab[data-page-id="btc"] { --tab-color: var(--tab-btc); }
.asset-nav-tab[data-page-id="eth"] { --tab-color: var(--tab-eth); }
.asset-nav-tab[data-page-id="sol"] { --tab-color: var(--tab-sol); }

.asset-nav-tab i {
    font-size: 1.3rem;
    transition: transform 0.15s;
    color: var(--tab-color);
}

/* Logo image (Solana, etc.) — dimensions calées sur l'icône FA pour aligner */
.asset-nav-tab .tab-logo {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.asset-nav-tab.active .tab-logo {
    transform: scale(1.05);
}

.asset-nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* État "actif chargé" : fond pleine couleur de l'onglet */
.asset-nav-tab.active {
    color: var(--tab-color);
    border-bottom-color: var(--tab-color);
    background: color-mix(in srgb, var(--tab-color) 18%, transparent);
}

.asset-nav-tab.active i {
    transform: scale(1.05);
    color: var(--tab-color);
}

/* État "pressed" / "loading" — couleur PLEINE de la cible (pas de la page courante)
   Cliqué + arrivée sur la page = même état tant que les données ne sont pas chargées */
.asset-nav-tab.pressed,
.asset-nav-tab.active.loading {
    background: var(--tab-color) !important;
    color: white !important;
    border-bottom-color: white !important;
}
.asset-nav-tab.pressed i,
.asset-nav-tab.active.loading i {
    color: white !important;
}

/* ============= Header de page ============= */

.page-header {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--page-accent);
    box-shadow: 0 4px 24px var(--page-accent-soft);
}

.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Marge horizontale minimale : juste un filet pour ne pas que les
       icônes touchent le bord. Marge verticale réduite aussi pour ne
       pas avoir un header trop épais. */
    padding: 8px 4px;
    gap: 8px;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.page-logo {
    font-size: 1.85rem;
    color: var(--page-accent);
    flex-shrink: 0;
}

/* Variante image (logos officiels d'actifs) — taille calée sur l'icône FA */
img.page-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: contain;
    background: transparent;
}

.page-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.page-header-right .icon-refresh-btn {
    border: 1px solid var(--page-accent-soft);
    color: var(--text-secondary);
}

.page-header-right .icon-refresh-btn:hover {
    color: var(--page-accent);
    border-color: var(--page-accent);
    background: var(--page-accent-soft);
}

/* Spinner du bouton refresh quand fetch en cours */
.icon-refresh-btn.is-loading i {
    animation: refresh-spin 0.8s linear infinite;
}

@keyframes refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============= Cartes "split" pour Global ============= */

.split-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.split-card .split-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.split-card .split-list .split-key {
    text-align: left;
    color: var(--text-muted);
}

.split-card .split-list .split-val {
    text-align: right;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Donut interactif pour allocation */
.alloc-donut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.alloc-donut-container canvas {
    max-width: min(85vw, 320px);
    width: 100%;
    height: auto;
}

.alloc-help {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

.alloc-save-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============= Anti-overflow horizontal mobile ============= */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.cards .card {
    min-width: 0;
}

.card-value, .card-sub, .split-val {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 480px) {
    .page-logo {
        font-size: 1.5rem;
    }
    img.page-logo {
        width: 1.7rem;
        height: 1.7rem;
    }
    .asset-nav-tab span.nav-label {
        font-size: 0.68rem;
    }
    .container {
        padding: 0 12px;
    }
    /* Mobile : marge identique au desktop (déjà minimale). */
    .page-header-inner {
        padding: 6px 3px;
    }
}