/* myve.fr — Recharge UI polish mobile V1 — 2026-09-19
   Purely visual overrides for Recharge V2. No business logic. */

/* Keep Recharge V2 geometry predictable before the mobile rules kick in. */
.rechargePeriodOverviewV2,
.rechargePeriodOverviewV2 *,
.rechargePeriodTabsV2,
.rechargePeriodTabsV2 *,
.rechargePeriodKpisV2,
.rechargePeriodKpisV2 *{box-sizing:border-box}

@media (max-width: 720px){
  /* Give the page breathing room and keep the fixed bottom navigation from
     visually eating the last graph/cards. */
  .rechargeUxPage{
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    overflow:visible !important;
  }

  /* Main analysis card: lighter edge, cleaner radius, no clipped content. */
  .rechargePeriodOverviewV2.card,
  .rechargePeriodOverviewV2{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:18px 14px 16px !important;
    overflow:visible !important;
    border-radius:22px !important;
    border:1px solid rgba(118,198,238,.13) !important;
    background:linear-gradient(180deg,rgba(12,37,55,.72),rgba(7,27,42,.58)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.12) !important;
  }

  .rechargePeriodOverviewV2 .rechargeSectionHead{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin:0 2px 14px !important;
    padding:0 !important;
  }
  .rechargePeriodOverviewV2 .rechargeSectionHead>div{min-width:0}
  .rechargePeriodOverviewV2 .rechargeSectionHead .small{
    margin-bottom:4px !important;
    line-height:1.2 !important;
    letter-spacing:.08em !important;
    opacity:.72 !important;
  }
  .rechargePeriodOverviewV2 .rechargeSectionHead h2{
    margin:0 !important;
    line-height:1.05 !important;
    font-size:clamp(1.72rem,8vw,2.12rem) !important;
    letter-spacing:-.025em !important;
  }
  .rechargePeriodOverviewV2 .rechargeEstimateTag{
    flex:0 0 auto !important;
    align-self:flex-start !important;
    margin:0 !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    font-size:.68rem !important;
    line-height:1 !important;
    border:1px solid rgba(118,198,238,.13) !important;
    background:rgba(255,255,255,.025) !important;
    opacity:.78 !important;
  }

  /* Period selector: one soft container, active state does the visual work. */
  .rechargePeriodTabsV2{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    margin:0 0 16px !important;
    padding:6px !important;
    border-radius:18px !important;
    border:1px solid rgba(118,198,238,.10) !important;
    background:rgba(2,16,29,.38) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
  .rechargePeriodTabsV2 .rechargePeriodButton{
    min-width:0 !important;
    min-height:50px !important;
    padding:10px 8px !important;
    margin:0 !important;
    border-radius:14px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:.95rem !important;
  }
  .rechargePeriodTabsV2 .rechargePeriodButton.active{
    border-color:rgba(69,193,250,.38) !important;
    background:linear-gradient(180deg,rgba(40,118,164,.28),rgba(29,86,126,.22)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  /* KPI cards: remove the heavy nested-box effect. */
  .rechargePeriodKpisV2{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    margin:0 !important;
  }
  .rechargePeriodKpisV2>div{
    min-height:128px !important;
    padding:15px 14px !important;
    gap:6px !important;
    border-radius:17px !important;
    border:1px solid rgba(255,255,255,.055) !important;
    background:rgba(255,255,255,.024) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  }
  .rechargePeriodKpisV2>div:last-child{
    grid-column:1 / -1 !important;
    min-height:108px !important;
  }
  .rechargePeriodKpisV2>div>span{
    font-size:1.15rem !important;
    opacity:.68 !important;
  }
  .rechargePeriodKpisV2 small{
    font-size:.82rem !important;
    line-height:1.25 !important;
    opacity:.68 !important;
  }
  .rechargePeriodKpisV2 strong{
    margin-top:auto !important;
    font-size:1.38rem !important;
    line-height:1.08 !important;
    letter-spacing:-.015em !important;
  }

  /* Quality/tariff rows should look like supporting info, not extra cards. */
  .rechargeTariffBreakdownV2{
    grid-template-columns:1fr !important;
    gap:6px !important;
    margin-top:12px !important;
  }
  .rechargeTariffBreakdownV2>div{
    border-radius:12px !important;
    padding:9px 11px !important;
    border-color:rgba(65,135,255,.10) !important;
    background:rgba(25,105,255,.035) !important;
  }
  .rechargeQualityNoteV2{
    display:grid !important;
    gap:6px !important;
    margin-top:10px !important;
  }
  .rechargeQualityNoteV2 span{
    padding:8px 10px !important;
    border-radius:11px !important;
    border-color:rgba(255,255,255,.045) !important;
    background:rgba(255,255,255,.018) !important;
    line-height:1.35 !important;
  }

  .rechargeMethodV2{
    margin-top:12px !important;
    padding:12px 13px !important;
    border-radius:14px !important;
    border-color:rgba(255,255,255,.05) !important;
    background:rgba(255,255,255,.016) !important;
  }

  /* Session list follows the same lighter-edge treatment. */
  .rechargeSessionCard,
  .rechargeSessionCardV2{
    border-color:rgba(255,255,255,.055) !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }

  /* Small screens: preserve the two-column overview while avoiding clipped text. */
  .rechargePeriodKpisV2 em{white-space:nowrap}

  /* Floating control: smaller and safely above the fixed mobile navigation. */
  .backToTopBtn{
    right:10px !important;
    bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    min-height:44px !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    opacity:.88 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  }
}

@media (max-width: 390px){
  .rechargePeriodOverviewV2.card,
  .rechargePeriodOverviewV2{padding:16px 11px 14px !important;border-radius:19px !important}
  .rechargePeriodOverviewV2 .rechargeSectionHead{margin-left:1px !important;margin-right:1px !important}
  .rechargePeriodOverviewV2 .rechargeEstimateTag{padding:6px 8px !important;font-size:.63rem !important}
  .rechargePeriodKpisV2{gap:7px !important}
  .rechargePeriodKpisV2>div{padding:13px 11px !important;min-height:122px !important}
  .rechargePeriodKpisV2 strong{font-size:1.25rem !important}
}