/* =========================================================
   AdminMind Chrome — source unique de vérité
   Navigation basse + racine Family
   ========================================================= */

/* --- Navigation basse --- */
.nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(100%,480px)!important;
  max-width:480px!important;
  height:auto!important;
  min-height:86px!important;
  margin:0!important;
  padding:8px 8px max(14px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  -webkit-transform:translateX(-50%)!important;
  z-index:1100!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:2px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid rgba(202,208,222,.76)!important;
  border-bottom:0!important;
  border-radius:27px 27px 0 0!important;
  background:rgba(252,253,255,.97)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.15)!important;
  backdrop-filter:blur(20px) saturate(1.15)!important;
  box-shadow:0 -8px 26px rgba(28,38,66,.09)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

.nav button{
  border:0!important;
  background:transparent!important;
  color:#8e93a2!important;
  border-radius:18px!important;
  min-width:0!important;
  min-height:58px!important;
  padding:7px 3px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-size:10.5px!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

.nav button span{
  font-size:20px!important;
  line-height:1!important;
}

.nav button.active{
  color:#684fe0!important;
  font-weight:850!important;
  background:linear-gradient(145deg,rgba(112,87,255,.14),rgba(112,87,255,.07))!important;
  box-shadow:inset 0 0 0 1px rgba(115,87,255,.12)!important;
}

html[data-theme="dark"] .nav{
  background:rgba(14,18,27,.97)!important;
  border-color:rgba(57,67,88,.82)!important;
  box-shadow:0 -10px 30px rgba(0,0,0,.24)!important;
}

html[data-theme="dark"] .nav button.active{
  color:#cbbfff!important;
  background:linear-gradient(145deg,rgba(124,96,232,.22),rgba(78,64,137,.14))!important;
}

/* Le contenu se termine toujours au-dessus de la navigation. */
main{
  padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
}

/* Les feuilles mobiles utilisent toutes la même réserve basse que la navigation.
   Une seule règle = pas de recouvrement écran par écran. */
@media(max-width:767px){
  :root{
    /* Repli CSS ; la valeur exacte est ensuite mesurée par le script de stabilité. */
    --am-mobile-nav-reserve:calc(80px + max(14px,env(safe-area-inset-bottom)));
    --am-mobile-sheet-top:max(12px,env(safe-area-inset-top));
  }

  /* Toutes les feuilles secondaires partagent la même limite basse.
     Family reste un véritable écran racine et conserve sa propre réserve. */
  .sheetWrap:not(#familySheet),
  .modalWrap{
    top:0!important;
    bottom:var(--am-mobile-nav-reserve)!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .sheetWrap:not(#familySheet)>.sheet,
  .modalWrap>.modal{
    max-height:calc(var(--am-vvh,100dvh) - var(--am-mobile-sheet-top) - var(--am-mobile-nav-reserve))!important;
    min-height:0!important;
    padding-bottom:28px!important;
    scroll-padding-bottom:28px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    box-sizing:border-box!important;
  }

  #documentActionSheet .docInlineViewer{max-height:none!important;}
  #detailContent{padding-bottom:18px!important;}
  #detailContent .permanentDelete{margin-bottom:12px!important;}
  html[data-theme="dark"] #detailModal{background:#0e121c!important;}
}

/* --- Family racine : traité comme un écran, pas comme un popup --- */
body.drop-overlay-open:has(#familySheet.show)>.nav{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#familySheet.familyRootWrap{
  align-items:stretch!important;
  background:var(--bg)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
  z-index:220!important;
}

#familySheet .familyRootSheet{
  width:min(100%,480px)!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  padding:0 16px calc(112px + env(safe-area-inset-bottom))!important;
  border-radius:0!important;
  background:var(--bg)!important;
  box-shadow:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
}

/* Header intégré au flux : aucun contenu ne passe dessous. */
.familyRootHeader{
  position:sticky!important;
  top:0!important;
  z-index:40!important;
  min-height:calc(64px + env(safe-area-inset-top))!important;
  margin:0 -16px 14px!important;
  padding:max(8px,env(safe-area-inset-top)) 16px 8px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 48px!important;
  align-items:end!important;
  gap:8px!important;
  background:rgba(251,252,255,.98)!important;
  border-bottom:1px solid rgba(218,222,233,.96)!important;
  box-shadow:0 5px 16px rgba(34,45,72,.035)!important;
}

.familyRootHeaderTitle{
  align-self:center!important;
  text-align:center!important;
  color:var(--text)!important;
  font-size:17px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.familyRootHeaderBtn{
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:1px solid var(--border)!important;
  border-radius:15px!important;
  background:var(--surface)!important;
  color:var(--purple)!important;
  display:grid!important;
  place-items:center!important;
  font-size:24px!important;
  font-weight:800!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}

.familyRootHeaderAdd{
  justify-self:end!important;
}

html[data-theme="dark"] #familySheet.familyRootWrap,
html[data-theme="dark"] #familySheet .familyRootSheet{
  background:#0d111a!important;
}

html[data-theme="dark"] .familyRootHeader{
  background:rgba(14,18,27,.98)!important;
  border-bottom-color:#293144!important;
  box-shadow:0 7px 18px rgba(0,0,0,.17)!important;
}

html[data-theme="dark"] .familyRootHeaderBtn{
  background:#171b24!important;
  border-color:#303746!important;
  color:#cbbfff!important;
}

/* iPad : garde une vraie barre flottante adaptée au grand écran. */
@media(min-width:768px){
  .nav{
    width:min(calc(100vw - 48px),760px)!important;
    max-width:760px!important;
    bottom:18px!important;
    border-bottom:1px solid rgba(202,208,222,.76)!important;
    border-radius:24px!important;
  }
  #familySheet .familyRootSheet{
    width:min(100%,760px)!important;
    padding-bottom:126px!important;
  }
}