/* ============================================================
   WOOFER2 — THÈME PREMIUM
   Inspiré du badge 🔥 : flamme orange, violet, doré, shimmer
   À activer via : body.premium-theme
   ============================================================ */

/* ── Variables du thème ── */
body.premium-theme {
    --pm-gold:    #ff9f43;
    --pm-violet:  #9f7aea;
    --pm-blue:    #38bdf8;
    --pm-fire:    #ff6a00;
    --pm-bg:      rgba(14, 10, 28, 0.97);
    --pm-border:  rgba(159, 122, 234, 0.45);
    --pm-glow:    rgba(255, 159, 67, 0.18);
    --pm-shimmer: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 80, 0.07) 40%,
        rgba(159, 122, 234, 0.10) 60%,
        transparent 100%
    );
}

/* ============================================================
   FOND DASHBOARD — particules dorées subtiles (pseudo-élément)
   ============================================================ */
body.premium-theme #dashboard-screen:not(.hidden)::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 30% at 20% 10%, rgba(255,120,0,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 25% at 80% 85%, rgba(159,122,234,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 40% 20% at 55% 50%, rgba(56,189,248,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 55% 10% at 50% 100%, rgba(200,80,30,0.45) 0%, rgba(140,50,160,0.20) 55%, transparent 100%);
    animation: premiumAurora 8s ease-in-out infinite alternate;
}
/* Neutraliser complètement l'aurora quand le dashboard est caché */
body.premium-theme #dashboard-screen.hidden::after {
    content: none;
    display: none;
}
@keyframes premiumAurora {
    0%   { opacity: 0.7; transform: scale(1) translateY(0); }
    100% { opacity: 1;   transform: scale(1.04) translateY(-12px); }
}

/* ============================================================
   STATS CARDS
   ============================================================ */
body.premium-theme .dash-stat {
    background: linear-gradient(135deg,
        rgba(159,122,234,0.18) 0%,
        rgba(255,159,67,0.12) 100%
    ) !important;
    border: 1px solid rgba(255,159,67,0.3) !important;
    box-shadow:
        0 4px 20px rgba(159,122,234,0.15),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    position: relative;
    overflow: hidden;
}
body.premium-theme .dash-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pm-shimmer);
    animation: pmShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
body.premium-theme .dash-stat-val {
    background: linear-gradient(90deg, var(--pm-gold), var(--pm-violet)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================================
   BOUTON CRÉER UNE CARTE
   ============================================================ */
body.premium-theme .dash-btn-create {
    background: linear-gradient(135deg,
        rgba(159,122,234,0.20) 0%,
        rgba(255,159,67,0.15) 100%
    ) !important;
    border: 1px solid rgba(255,159,67,0.45) !important;
    box-shadow:
        0 4px 28px rgba(255,120,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body.premium-theme .dash-btn-create-icon {
    background: linear-gradient(135deg, var(--pm-fire), var(--pm-violet)) !important;
    filter: drop-shadow(0 4px 10px rgba(255,120,0,0.55)) !important;
}

/* ============================================================
   CARTES DE MAP
   ============================================================ */
body.premium-theme .dash-carte {
    background: linear-gradient(160deg,
        rgba(20,14,40,0.85) 0%,
        rgba(15,10,30,0.90) 100%
    ) !important;
    border: 1px solid rgba(255,159,67,0.28) !important;
    box-shadow:
        0 4px 24px rgba(159,122,234,0.18),
        inset 0 0 0 1px rgba(255,200,80,0.06) !important;
}
body.premium-theme .dash-carte::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,159,67,0.7),
        rgba(159,122,234,0.6),
        transparent
    );
    animation: pmShimmer 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: 18px 18px 0 0;
}
body.premium-theme .dash-carte-role {
    background: linear-gradient(135deg,
        rgba(255,159,67,0.18),
        rgba(159,122,234,0.18)
    ) !important;
    border: 1px solid rgba(255,159,67,0.35) !important;
    color: var(--pm-gold) !important;
}

/* ============================================================
   BOTTOM SHEETS (action, input, confirm)
   ============================================================ */
body.premium-theme #dash-action-sheet,
body.premium-theme #dash-input-sheet,
body.premium-theme #dash-confirm-sheet {
    background: linear-gradient(160deg,
        rgba(16,10,32,0.98) 0%,
        rgba(12,8,24,0.99) 100%
    ) !important;
    border-top: 1px solid var(--pm-border) !important;
    /* position: relative et overflow: hidden supprimés —
       ils créaient un contexte d'empilement qui faisait
       apparaître les sheets en permanence par-dessus le contenu */
}
/* Shadow uniquement quand ouvert */
body.premium-theme #dash-action-sheet.open,
body.premium-theme #dash-input-sheet.open,
body.premium-theme #dash-confirm-sheet.open {
    box-shadow: 0 -8px 48px rgba(159,122,234,0.22) !important;
}
/* Ligne shimmer en haut des sheets — UNIQUEMENT quand ouvert */
body.premium-theme #dash-action-sheet.open::before,
body.premium-theme #dash-input-sheet.open::before,
body.premium-theme #dash-confirm-sheet.open::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--pm-gold) 30%,
        var(--pm-violet) 70%,
        transparent
    );
    animation: pmShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
/* Neutraliser quand fermé */
body.premium-theme #dash-action-sheet:not(.open)::before,
body.premium-theme #dash-input-sheet:not(.open)::before,
body.premium-theme #dash-confirm-sheet:not(.open)::before {
    content: none;
}
/* Lueur déco en haut — UNIQUEMENT quand le sheet est ouvert */
body.premium-theme #dash-action-sheet.open::after,
body.premium-theme #dash-input-sheet.open::after,
body.premium-theme #dash-confirm-sheet.open::after {
    content: '';
    position: absolute;
    top: -70px; left: 50%;
    transform: translateX(-50%);
    width: 280px; height: 130px;
    background: radial-gradient(ellipse,
        rgba(255,120,0,0.18) 0%,
        rgba(159,122,234,0.12) 50%,
        transparent 70%
    );
    pointer-events: none;
}
/* Neutraliser quand fermé */
body.premium-theme #dash-action-sheet:not(.open)::after,
body.premium-theme #dash-input-sheet:not(.open)::after,
body.premium-theme #dash-confirm-sheet:not(.open)::after {
    content: none;
}

/* Boutons dans les sheets */
body.premium-theme .dash-sheet-btn {
    background: rgba(159,122,234,0.08) !important;
    border: 1px solid rgba(159,122,234,0.18) !important;
    color: #f0e6ff !important;
}
body.premium-theme .dash-sheet-btn:active {
    background: rgba(255,159,67,0.12) !important;
}
body.premium-theme .dash-sheet-btn.danger {
    background: rgba(220,60,60,0.08) !important;
    border-color: rgba(220,60,60,0.22) !important;
    color: #ff8a8a !important;
}
body.premium-theme .dash-sheet-title {
    background: linear-gradient(90deg, var(--pm-gold), var(--pm-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.12em;
}

/* Handles */
body.premium-theme .dash-sheet-handle,
body.premium-theme .dash-modal-handle {
    background: linear-gradient(90deg,
        rgba(255,159,67,0.5),
        rgba(159,122,234,0.5)
    ) !important;
}

/* ============================================================
   MODAL CRÉER UNE CARTE (dash-modal)
   ============================================================ */
body.premium-theme .dash-modal-sheet {
    background: linear-gradient(160deg,
        rgba(16,10,32,0.98) 0%,
        rgba(12,8,24,0.99) 100%
    ) !important;
    border-top: 1px solid var(--pm-border) !important;
}
/* Shadow uniquement quand le modal parent est ouvert */
body.premium-theme .dash-modal.open .dash-modal-sheet {
    box-shadow: 0 -8px 48px rgba(255,120,0,0.18) !important;
}
body.premium-theme .dash-modal-btn {
    background: linear-gradient(135deg,
        var(--pm-fire) 0%,
        var(--pm-violet) 100%
    ) !important;
    filter: drop-shadow(0 6px 12px rgba(255,120,0,0.45)) !important;
}
body.premium-theme .dash-modal-input {
    background: rgba(159,122,234,0.08) !important;
    border-color: rgba(255,159,67,0.25) !important;
}
body.premium-theme .dash-modal-input:focus {
    border-color: var(--pm-gold) !important;
    background: rgba(255,159,67,0.08) !important;
}

/* ============================================================
   CHAMPS INPUT SHEET (renommer, saisie)
   ============================================================ */
body.premium-theme #dash-input-sheet-field {
    background: rgba(159,122,234,0.08) !important;
    border: 1px solid rgba(255,159,67,0.25) !important;
    color: #f8f0ff !important;
}
body.premium-theme #dash-input-sheet-field:focus {
    border-color: var(--pm-gold) !important;
}
body.premium-theme #dash-input-sheet-confirm {
    background: linear-gradient(135deg,
        var(--pm-fire) 0%,
        var(--pm-violet) 100%
    ) !important;
    filter: drop-shadow(0 5px 10px rgba(255,120,0,0.40)) !important;
}
body.premium-theme #dash-confirm-sheet-ok {
    background: linear-gradient(135deg, #c0392b, #8e0000) !important;
    filter: drop-shadow(0 5px 10px rgba(192,57,43,0.45)) !important;
}
body.premium-theme #dash-input-sheet-title,
body.premium-theme #dash-confirm-sheet-title {
    background: linear-gradient(90deg, var(--pm-gold), var(--pm-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   TOAST NOTIFICATIONS — shadow uniquement quand visible
   ============================================================ */
body.premium-theme .dash-toast.show {
    background: linear-gradient(135deg,
        rgba(20,12,36,0.97) 0%,
        rgba(14,8,28,0.99) 100%
    ) !important;
    border: 1px solid rgba(255,159,67,0.30) !important;
    box-shadow:
        0 8px 28px rgba(159,122,234,0.25),
        0 0 0 1px rgba(255,200,80,0.06) !important;
    color: #f8f0ff !important;
}
/* Quand caché : aucun shadow qui fuite */
body.premium-theme .dash-toast:not(.show) {
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* ============================================================
   ANIMATION SHIMMER (réutilisable)
   ============================================================ */
@keyframes pmShimmer {
    0%   { left: -100%; }
    50%  { left: 100%; }
    100% { left: 100%; }
}

/* ============================================================
   BANNIÈRE TRAJET EN COURS — thème premium
   ============================================================ */
body.premium-theme #dash-trip-banner {
    background: linear-gradient(160deg,
        rgba(20,14,40,0.85) 0%,
        rgba(15,10,30,0.90) 100%
    ) !important;
    border: 1px solid rgba(255,159,67,0.28) !important;
    box-shadow: 0 4px 20px rgba(159,122,234,0.15) !important;
}
body.premium-theme .trip-banner-label {
    color: var(--pm-gold) !important;
}
body.premium-theme .trip-banner-dot {
    background: var(--pm-gold) !important;
    box-shadow: 0 0 0 3px rgba(255,159,67,0.25) !important;
}
body.premium-theme .trip-banner-timer {
    color: var(--pm-gold) !important;
}
body.premium-theme .trip-banner-status.running {
    background: rgba(255,159,67,0.16) !important;
    color: var(--pm-gold) !important;
}
body.premium-theme .trip-banner-status.paused {
    background: rgba(159,122,234,0.18) !important;
    color: #d0b3ff !important;
}
body.premium-theme .trip-banner-btn-map {
    background: rgba(159,122,234,0.12) !important;
    border: 1px solid rgba(255,159,67,0.22) !important;
    color: #f0e6ff !important;
}
body.premium-theme .trip-banner-btn-map:active {
    background: rgba(255,159,67,0.14) !important;
}
body.premium-theme .trip-banner-btn-cancel {
    background: rgba(220,60,60,0.10) !important;
    border: 1px solid rgba(220,60,60,0.22) !important;
    color: #ff8a8a !important;
}

/* ============================================================
   BOUTON DÉCONNEXION — thème premium
   ============================================================ */
body.premium-theme .dash-logout-btn {
    /* Fond opaque premium — backdrop-filter retiré pour avoir une ombre propre */
    background: linear-gradient(135deg,
        rgba(40, 28, 70, 0.92) 0%,
        rgba(35, 22, 18, 0.92) 100%
    ) !important;
    border: 1px solid rgba(159,122,234,0.45) !important;
    color: rgba(255, 200, 130, 0.80) !important;
    box-shadow:
        0 4px 20px rgba(159,122,234,0.20),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    position: relative;
    overflow: hidden;
}

body.premium-theme .dash-logout-btn:active {
    box-shadow:
        0 2px 10px rgba(255,120,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Shimmer */
body.premium-theme .dash-logout-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,200,80,0.07) 40%,
        rgba(159,122,234,0.10) 60%,
        transparent
    );
    animation: pmShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

body.premium-theme .dash-logout-btn:active {
    background: linear-gradient(135deg,
        rgba(159,122,234,0.22) 0%,
        rgba(255,159,67,0.15) 100%
    ) !important;
    border-color: rgba(255,159,67,0.50) !important;
    color: rgba(255, 210, 150, 0.95) !important;
}

body.premium-theme .dash-logout-icon {
    stroke: rgba(255, 180, 100, 0.80);
}