/* ==========================================================
   NAFA PHASE 3 — MOBILE FIRST PWA
   Objectif : smartphone uniquement, zéro chevauchement, Mes affaires lisible,
   Coffre-fort Premium propre. Ne modifie pas Firebase/Auth/Gemini.
   ========================================================== */

:root{
  --nafa-top-safe: env(safe-area-inset-top, 0px);
  --nafa-bottom-safe: env(safe-area-inset-bottom, 0px);
  --nafa-bottom-nav-h: 76px;
}

html,body{overscroll-behavior:none;touch-action:manipulation;}
body{min-height:100dvh;}

/* Shell smartphone : la zone de contenu ne passe jamais sous la nav */
.body,.content{
  max-width:100vw!important;
  overflow-x:hidden!important;
}
.content{
  padding-bottom:calc(var(--nafa-bottom-nav-h) + var(--nafa-bottom-safe) + 18px)!important;
}

/* Bottom nav stable iPhone/Android */
.bot-nav,.bottom-nav{
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:3000!important;
  min-height:calc(var(--nafa-bottom-nav-h) + var(--nafa-bottom-safe))!important;
  padding-bottom:max(12px,var(--nafa-bottom-safe))!important;
  transform:translateZ(0);
}

/* Hiérarchie des fenêtres : une fiche au-dessus du contenu, modales au-dessus, onboarding au-dessus */
.item-detail-view,.item-edit-view{
  position:fixed!important;
  inset:0!important;
  z-index:4200!important;
  height:100dvh!important;
  max-height:100dvh!important;
  background:var(--sur,#fff)!important;
  padding-bottom:0!important;
}
.item-detail-view:not(.on),.item-edit-view:not(.on){display:none!important;}
.item-detail-view.on,.item-edit-view.on{display:flex!important;}

.fp-header{
  padding-top:calc(12px + var(--nafa-top-safe))!important;
  min-height:calc(58px + var(--nafa-top-safe))!important;
  z-index:2!important;
}
.item-scroll-content,.edit-scroll-content{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding-bottom:24px!important;
}
.item-actions,.edit-actions{
  flex-shrink:0!important;
  position:relative!important;
  z-index:3!important;
  padding-bottom:calc(14px + var(--nafa-bottom-safe))!important;
  background:var(--sur,#fff)!important;
  box-shadow:0 -10px 30px rgba(17,22,51,.08)!important;
}

.overlay,.nf-modal-ov{
  z-index:9000!important;
  padding:calc(10px + var(--nafa-top-safe)) 10px calc(16px + var(--nafa-bottom-safe))!important;
  align-items:flex-end!important;
  overflow:hidden!important;
}
.modal,.nf-modal{
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100dvh - var(--nafa-top-safe) - var(--nafa-bottom-safe) - 28px)!important;
  border-radius:24px 24px 0 0!important;
  margin:0!important;
}
#modal-body,.nf-modal-body{
  max-height:calc(100dvh - var(--nafa-top-safe) - var(--nafa-bottom-safe) - 112px)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding-bottom:calc(32px + var(--nafa-bottom-safe))!important;
}
.modal-x,.nf-modal-x{
  width:40px!important;height:40px!important;
  top:10px!important;right:10px!important;
  z-index:5!important;
}

/* Mes affaires : lecture smartphone, regroupée par foyer puis type */
#v-inv .sgrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
#v-inv .frow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
#v-inv .fsrch,#v-inv .fsel{
  width:100%!important;
  min-height:46px!important;
  font-size:16px!important;
  border-radius:16px!important;
}
.inv-toolbar-note{
  margin:10px 0 12px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:rgba(64,145,108,.10)!important;
  color:#244b39!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.inv-profile-section{
  border-radius:22px!important;
  margin:0 0 14px!important;
  padding:13px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(17,22,51,.08)!important;
  box-shadow:0 12px 32px rgba(17,22,51,.07)!important;
}
.inv-profile-head{
  position:sticky!important;
  top:0!important;
  z-index:1!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(10px)!important;
  border-radius:16px!important;
  padding:8px!important;
  margin:-4px -4px 12px!important;
}
.inv-profile-title{font-size:16px!important;}
.inv-profile-sub{white-space:normal!important;line-height:1.25!important;}
.inv-profile-value{flex-shrink:0!important;}
.inv-type-section{margin-top:14px!important;}
.inv-type-head{padding:0 2px 8px!important;border-bottom:1px dashed rgba(17,22,51,.10)!important;}
.inv-type-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.card{
  border-radius:18px!important;
  overflow:hidden!important;
  min-width:0!important;
}
.card-img,.card-ph{
  height:118px!important;
  border-radius:16px 16px 0 0!important;
}
.card-body{padding:9px!important;}
.card-name{
  font-size:12.5px!important;
  line-height:1.2!important;
  min-height:30px!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.card-foot{gap:6px!important;align-items:flex-end!important;}
.card-price{font-size:12px!important;white-space:nowrap!important;}
.card-quick-btn{width:34px!important;height:34px!important;}
.card-quick-menu{z-index:8!important;right:6px!important;top:44px!important;}

/* Coffre-fort Premium : écran smartphone */
.vault-page{padding-bottom:calc(var(--nafa-bottom-nav-h) + var(--nafa-bottom-safe) + 14px)!important;}
.vault-hero{border-radius:24px!important;padding:20px!important;margin:0 0 14px!important;}
.vault-title{font-size:25px!important;line-height:1.05!important;}
.vault-sub{font-size:13px!important;line-height:1.55!important;}
.vault-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
.vault-actions .btn{width:100%!important;justify-content:center!important;min-height:44px!important;}
.vault-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
.vault-layout{grid-template-columns:1fr!important;gap:12px!important;}
.vault-panel{border-radius:22px!important;padding:13px!important;}
.vault-item{border-radius:18px!important;align-items:flex-start!important;}
.vault-item-img{width:54px!important;height:54px!important;}
.vault-item-name{white-space:normal!important;line-height:1.25!important;}
.vault-edit-form{grid-template-columns:1fr!important;}

/* Production mobile : gros boutons, zones cliquables au pouce */
.btn,button,input,select,textarea{touch-action:manipulation;}
.btn,button{min-height:40px;}
input,select,textarea{font-size:16px!important;}

@media(min-width:769px){
  /* Desktop secondaire : on garde le rendu existant autant que possible */
  .item-detail-view,.item-edit-view{left:auto!important;right:auto!important;max-width:480px!important;margin:auto!important;border-radius:28px!important;box-shadow:0 24px 70px rgba(17,22,51,.25)!important;}
}