/* ═══════════════════════════════════════════════
   RÉUNION 974 ONE TRADING — PWA / Mobile CSS
   iOS safe areas · Bottom nav · Touch UX
═══════════════════════════════════════════════ */

/* ── Bottom Nav Bar (mobile uniquement) ─────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-h);
  background: #0d1829;
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 200;
  /* Safe area iOS */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  transition: color .15s;
  padding: 6px 4px;
  position: relative;
  /* Touch */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

.mobile-nav-item.active { color: #e9bb4c; }
.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: #e9bb4c;
  border-radius: 0 0 4px 4px;
}

.mobile-nav-icon  { font-size: 20px; line-height: 1; }
.mobile-nav-label { font-size: 9px; font-weight: 700; letter-spacing: .01em; }

/* ── Affichage mobile ────────────────────────── */
@media (max-width: 767px) {
  .mobile-nav { display: flex; }

  /* Cacher la sidebar desktop sur mobile */
  .sidebar { display: none !important; }

  /* Le contenu principal prend toute la largeur */
  .main-content { margin-left: 0 !important; width: 100% !important; }
  .layout-wrapper { flex-direction: column; }

  /* Padding bas pour la bottom nav */
  .main-content { padding-bottom: calc(var(--mobile-nav-h) + 12px) !important; }

  /* Header topbar adapté */
  .topbar-sticky, .top-bar {
    left: 0 !important;
    width: 100% !important;
  }

  /* Scrollbars fines */
  ::-webkit-scrollbar       { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
}

/* ── Safe area iOS notch / home indicator ───── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  }
}

/* ── PWA standalone ──────────────────────────── */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
}

/* ── TABLETTE (768px–1100px) ─────────────────── */
@media (min-width: 768px) and (max-width: 1100px) {
  /* Sidebar réduite */
  .sidebar { width: 64px !important; }
  .sidebar .sidebar-header > a > div,
  .sidebar .tf-footer-logo-name,
  .sidebar .nav-item span:not(.sb-chevron),
  .sidebar .sb-section-label,
  .sidebar .sb-toggle span:not(.sb-chevron),
  .sidebar-footer .sidebar-user-name,
  .sidebar-footer .sidebar-user-plan { display: none !important; }

  /* main-content décalé */
  .main-content { margin-left: 64px !important; }
  #notif-panel  { left: 64px !important; }

  /* nav items centrés */
  .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-item.nav-sub { display: none; }

  /* KPI cards: 3 colonnes au lieu de 6 */
  .kpi-row, .krow { grid-template-columns: repeat(3, 1fr) !important; }

  /* Dashboard grille */
  .dwrap { padding: 0 12px 24px !important; }

  /* Grilles 2col → 1col */
  .grid-2 { grid-template-columns: 1fr !important; }
  .bottom-grid { grid-template-columns: 1fr !important; }
  .main-chart-row { grid-template-columns: 1fr !important; }

  /* Objectifs 3col → 1col */
  .dcard [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── LIGHT MODE — bottom nav ─────────────────── */
html.theme-light .mobile-nav {
  background: #ffffff;
  border-top-color: rgba(0,0,0,.1);
}
html.theme-light .mobile-nav-item { color: #9ca3af; }
html.theme-light .mobile-nav-item.active { color: #e9bb4c; }

/* ── Touch improvements ──────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Agrandir les zones de touch */
  .btn, button, a { min-height: 44px; }
  .nav-item { min-height: 48px; }
  /* Enlever les effets hover sur touch */
  .nav-item:hover { background: transparent; }
}