/* L'appli n'est affichée que lorsque l'écran « app » est demandé (connexion confirmée).
   Plus forte que toute autre règle : rien ne s'affiche sous l'écran de connexion, même sur téléphone. */
body:not([data-ecran="app"]) #app-screen { display: none !important; }

/* ============================================================
   Escrime Stuff — menu latéral regroupé par familles
   S'ajoute à styles.css et mobile.css sans les modifier
   (chargé juste après mobile.css).
   ============================================================ */

/* L'ancienne rangée d'onglets est vidée par menu.js : on la masque */
body.menu-v2 .sidebar-head .tab-switch { display: none !important; }

/* ---------- Le menu ---------- */
.menu-nav {
  background: var(--brand-navy);
  color: rgba(255,255,255,.72);
  width: 228px;
  flex-shrink: 0;
  transition: width .18s ease;
}
.menu-inner {
  position: sticky; top: 0;
  max-height: 100vh; overflow-y: auto;
  padding: 10px 12px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.menu-groupe[hidden] { display: none; }
.menu-titre {
  font-family: 'Spectral', serif; font-style: italic; font-weight: 600;
  font-size: 13.5px; color: rgba(255,255,255,.45);
  padding: 16px 12px 5px; white-space: nowrap;
}

/* Les onglets (on garde la classe tab-btn d'origine, restylée ici) */
.menu-nav .tab-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 1px 0; padding: 8px 12px;
  background: transparent; border: none; border-radius: 6px; box-shadow: none;
  color: rgba(255,255,255,.74); font-size: 13.5px; font-weight: 500; text-align: left;
  white-space: nowrap; position: relative;
}
.menu-nav .tab-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu-nav .tab-btn.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
/* L'onglet actif est marqué par la lame inclinée du logo */
.menu-nav .tab-btn.active::before {
  content: ''; position: absolute; left: -6px; top: 50%;
  width: 5px; height: 20px; margin-top: -10px;
  background: #fff; transform: skewX(-12deg);
}
.menu-nav .tab-btn:focus-visible,
.menu-replier:focus-visible,
.menu-burger:focus-visible { outline: 2px solid #9DB8EC; outline-offset: 1px; }

.menu-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.menu-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu-badge {
  flex: none; min-width: 19px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.menu-badge[hidden] { display: none; }

/* Bouton Réduire / Déployer */
.menu-replier {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 18px; padding: 10px 12px 4px;
  background: transparent; border: none; border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45); font-size: 12.5px; text-align: left; white-space: nowrap;
}
.menu-replier:hover { color: #fff; }
.menu-replier .menu-ico { transition: transform .18s ease; }

/* Bouton ☰ et voile : seulement sur téléphone */
.menu-burger, .menu-voile { display: none; }

/* ---------- Ordinateur ---------- */
@media (min-width: 901px){
  #app-screen .app-body { display: grid; grid-template-columns: auto 280px minmax(0, 1fr); }
  #app-screen .menu-nav { grid-column: 1; grid-row: 1 / -1; }
  #app-screen .sidebar  { grid-column: 2; grid-row: 1; width: auto; }
  #app-screen .main     { grid-column: 3; grid-row: 1; min-width: 0; }

  /* Onglets sans liste (Accueil, Trésorerie, Statistiques…) :
     pas de colonne vide, les boutons d'export passent au-dessus du contenu */
  #app-screen .app-body.sans-liste { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; }
  #app-screen .app-body.sans-liste .sidebar {
    grid-column: 2; grid-row: 1;
    padding: 0; border-right: none; background: transparent;
  }
  #app-screen .app-body.sans-liste .sidebar-head { padding: 0; }
  #app-screen .app-body.sans-liste .head-actions { justify-content: flex-end; padding: 18px 34px 0; }
  #app-screen .app-body.sans-liste .head-actions .btn-new { flex: none; }
  #app-screen .app-body.sans-liste #side-list,
  #app-screen .app-body.sans-liste .search-box { display: none !important; }
  #app-screen .app-body.sans-liste .main { grid-column: 2; grid-row: 2; }

  /* Menu réduit : icônes seules */
  .menu-nav.mini { width: 66px; }
  .menu-nav.mini .menu-lbl,
  .menu-nav.mini .menu-titre { display: none; }
  .menu-nav.mini .menu-groupe:not([hidden]) ~ .menu-groupe:not([hidden]) {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1);
  }
  .menu-nav.mini .tab-btn { justify-content: center; padding: 10px 0; }
  .menu-nav.mini .menu-badge {
    position: absolute; top: 5px; right: 8px;
    min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0;
  }
  .menu-nav.mini .menu-replier { justify-content: center; padding: 12px 0 4px; }
  .menu-nav.mini .menu-replier .menu-ico { transform: rotate(180deg); }
}

/* ---------- Téléphone et tablette : menu coulissant ---------- */
@media (max-width: 900px){
  .menu-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 2px; padding: 0;
    background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; color: #fff;
  }
  .menu-burger .menu-ico { width: 22px; height: 22px; }

  .menu-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(290px, 84vw);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  .menu-inner {
    max-height: none; height: 100%;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  body.menu-ouvert .menu-nav { transform: none; box-shadow: 6px 0 24px rgba(0,0,0,.25); }
  body.menu-ouvert { overflow: hidden; }

  .menu-voile { position: fixed; inset: 0; z-index: 55; background: rgba(14,25,48,.45); }
  body.menu-ouvert .menu-voile { display: block; }

  .menu-nav .tab-btn { padding: 11px 12px !important; font-size: 15px; min-height: 44px; }
  .menu-replier { display: none; }
}

@media (prefers-reduced-motion: reduce){
  .menu-nav, .menu-replier .menu-ico { transition: none; }
}