/* ProNet v6.0 — interface mobile responsive */
:root{--mobile-gap:12px}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
*{box-sizing:border-box}

@media (max-width:900px){
  html,body{width:100%;min-width:0!important}
  body{overflow-x:hidden!important}

  /* Espace client / admin : plus de colonne fixe ordinateur */
  #dash,#adminDash{width:100%!important;min-width:0!important;max-width:100vw!important}
  #dash>aside,#adminDash>aside,.adminAside{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;
    z-index:60!important;width:100%!important;min-width:0!important;max-width:100%!important;
    height:auto!important;min-height:0!important;padding:8px 10px!important;
    display:flex!important;align-items:center!important;gap:8px!important;
    border-right:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    overflow:visible!important
  }
  #dash>aside .brand,#adminDash>aside .brand,.adminAside .brand{
    flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;
    margin:0!important;padding:0!important
  }
  #dash>aside .brand strong,#adminDash>aside .brand strong,.adminAside .brand strong{font-size:13px!important;white-space:nowrap}
  #dash>aside .brandLogoIcon,#adminDash>aside .brandLogoIcon,.adminAside .brandLogoIcon{
    width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:9px!important
  }
  #dash>aside nav,#adminDash>aside nav,.adminAside nav{
    flex:1 1 auto!important;display:flex!important;align-items:center!important;gap:6px!important;
    overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;
    padding:2px 0!important;margin:0!important;scrollbar-width:none
  }
  #dash>aside nav::-webkit-scrollbar,#adminDash>aside nav::-webkit-scrollbar,.adminAside nav::-webkit-scrollbar{display:none}
  #dash>aside nav a,#adminDash>aside nav a,.adminAside nav a{
    flex:0 0 auto!important;width:auto!important;min-width:0!important;margin:0!important;
    padding:7px 9px!important;border-radius:9px!important;font-size:10px!important;line-height:1.2!important
  }
  #dash>aside .logout,#adminDash>aside .logout,.adminAside .logout{
    flex:0 0 auto!important;width:auto!important;margin:0!important;padding:7px 9px!important;font-size:0!important
  }
  #dash>aside .logout::after,#adminDash>aside .logout::after,.adminAside .logout::after{content:'↪';font-size:16px!important}

  .workspace,.adminWorkspace{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:12px!important
  }
  .adminWorkspace{padding-top:12px!important}

  .toplinks{display:flex!important;gap:7px!important;overflow-x:auto!important;white-space:nowrap!important;margin:0 0 10px!important;scrollbar-width:none}
  .toplinks::-webkit-scrollbar{display:none}
  .toplinks button{flex:0 0 auto!important;padding:8px 10px!important;font-size:10px!important}

  .overview,.mainGrid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important}
  .wallet,.purge,.subscriptionCard,.activity,.mainGrid>div{width:100%!important;min-width:0!important;max-width:100%!important}
  .wallet,.purge,.activity{padding:14px!important}

  .user{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
  .user #userName{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:58vw!important}
  .notificationButton{margin-left:0!important;width:auto!important;padding:7px 9px!important;font-size:10px!important}
  .balance{font-size:34px!important;line-height:1.1!important}
  .actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
  .actions button{flex:1 1 120px!important;min-width:0!important;padding:9px 8px!important;font-size:10px!important}
  .counts{display:flex!important;gap:7px!important;flex-wrap:wrap!important}

  .mainGrid header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important}
  .mainGrid header h2{font-size:17px!important;margin:0!important}
  #addRouterBtn{width:100%!important;padding:10px!important}
  .search{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Cartes MikroTik : aucune largeur fixe */
  .router,.routerRow,.details{width:100%!important;max-width:100%!important;min-width:0!important}
  .routerRow{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;padding:10px!important}
  .routerName{flex:1 1 100%!important;min-width:0!important;font-size:14px!important;overflow-wrap:anywhere}
  .routerRow .tag,.routerRow .security,.routerRow .green,.routerRow .pending,.routerRow .version{font-size:9px!important}
  .routerRow button{padding:7px 8px!important;font-size:9px!important;width:auto!important}
  .routerRow .detailBtn{margin-left:auto!important}
  .details{padding:10px!important;overflow:hidden!important}
  .details>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .details>div>button{width:100%!important;min-width:0!important;margin:0!important;padding:9px 5px!important;font-size:9px!important;white-space:normal!important;line-height:1.25!important}

  /* Modales adaptées à la hauteur et largeur du téléphone */
  .modal{padding:10px!important;overflow-y:auto!important;align-items:flex-start!important}
  .modal>form,.modal>.panel,.modal>.auditScreen,.modal .commercialPanel,.modal .commercialForm{
    width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;min-width:0!important;
    max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;overflow-x:hidden!important;
    margin:auto!important;padding:16px!important;border-radius:16px!important
  }
  .modal input,.modal select,.modal textarea,.modal button{max-width:100%!important}
  .modal input,.modal select,.modal textarea{font-size:16px!important} /* évite le zoom auto Android/iOS */
  .formButtons,.documentActions{display:flex!important;gap:8px!important;flex-direction:column!important}
  .formButtons button,.documentActions button{width:100%!important}
  .choice{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}

  /* Admin */
  .adminTop{display:flex!important;flex-direction:column!important;gap:10px!important}
  .adminTop h1{font-size:23px!important;line-height:1.15!important}
  .adminTopActions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .adminTopActions button{width:100%!important;min-width:0!important;padding:9px 6px!important;font-size:9px!important;white-space:normal!important}
  .adminStats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .adminStats>div{padding:12px!important}
  .adminStats strong{font-size:24px!important}
  .sectionHead{gap:8px!important;padding:13px!important;flex-wrap:wrap!important}
  .sectionHead h2{font-size:17px!important}
  .tableWrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{font-size:10px!important}
  th,td{padding:9px 8px!important}
  .paymentSettingsForm{padding:12px!important}
  .paymentSettingCard{padding:12px!important}

  /* Page d’accueil */
  .hero{width:100%!important;max-width:100vw!important;min-height:100dvh!important;padding:24px 16px!important;text-align:center!important}
  .hero .brandMark{width:74px!important;height:74px!important;border-radius:18px!important}
  .hero h1{font-size:clamp(31px,10vw,48px)!important;line-height:1.05!important}
  .hero p{max-width:100%!important}
  .hero>div:not(.mark){display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important;max-width:360px!important}
  .hero>div:not(.mark)>button{width:100%!important;margin:0!important}
}

@media (max-width:520px){
  .workspace,.adminWorkspace{padding:9px!important}
  #dash>aside,#adminDash>aside,.adminAside{padding:7px!important}
  #dash>aside .brand strong,#adminDash>aside .brand strong,.adminAside .brand strong{display:none!important}
  #dash>aside nav a,#adminDash>aside nav a,.adminAside nav a{font-size:9px!important;padding:7px!important}
  .adminStats{grid-template-columns:1fr 1fr!important}
  .adminStats>div{padding:10px!important}
  .adminStats small{font-size:9px!important}
  .adminStats strong{font-size:21px!important}
  .details>div{grid-template-columns:1fr!important}
  .planList,.paymentSettingsGrid,.documentGrid,.adminPlanGrid{grid-template-columns:1fr!important}
  .notificationItem{grid-template-columns:26px minmax(0,1fr)!important}
  .notificationItem button{grid-column:2!important;width:100%!important}
  .documentLine,.documentTotal{align-items:flex-start!important;flex-direction:column!important;gap:4px!important}
  .subscriptionState strong{font-size:17px!important}
  .subscriptionState p{font-size:11px!important;line-height:1.4!important}
  .activity h3{font-size:16px!important}
}

/* Safe-area pour téléphones avec encoche/barre système */
@supports(padding:max(0px)){
  @media(max-width:900px){
    #dash>aside,#adminDash>aside,.adminAside{padding-top:max(7px,env(safe-area-inset-top))!important}
    .workspace,.adminWorkspace{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  }
}