/* Correctif final téléphone + tablette : tailles plus compactes, tableaux ajustés, calendrier visible.
   Interface uniquement : aucune logique métier modifiée. */

@media screen and (max-width: 1024px){
  html{ font-size:14px !important; }
  body{ font-size:13px !important; line-height:1.35 !important; }

  h1,.h1{ font-size:1.35rem !important; line-height:1.2 !important; }
  h2,.h2{ font-size:1.22rem !important; line-height:1.2 !important; }
  h3,.h3{ font-size:1.1rem !important; line-height:1.2 !important; }
  h4,.h4,h5,.h5{ font-size:1rem !important; line-height:1.2 !important; }
  .fs-5{ font-size:1rem !important; }
  .small,small,.text-muted{ font-size:.78rem !important; }

  .btn{ font-size:.78rem !important; padding:.38rem .55rem !important; border-radius:.65rem !important; }
  .btn-sm{ font-size:.72rem !important; padding:.28rem .44rem !important; }
  .form-control,.form-select,.input-group-text{ font-size:.82rem !important; min-height:36px !important; }
  label,.form-label{ font-size:.78rem !important; }

  .card,.dashboard-card,.dashboard-stat-card,.planning-header-card,.planning-calendar-card,.availability-card{
    border-radius:14px !important;
  }
  .card-body,.dashboard-card,.planning-header-card,.planning-calendar-card,.availability-card{
    padding:12px !important;
  }

  /* Tous les tableaux restent lisibles sur téléphone/tablette. */
  .table-responsive,
  .availability-table-wrap,
  .admin-table-wrap,
  .logs-table-wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  table,.table{
    width:100% !important;
    max-width:none !important;
    font-size:.74rem !important;
  }
  .table th,
  .table td,
  table th,
  table td{
    font-size:.72rem !important;
    padding:.34rem .42rem !important;
    line-height:1.22 !important;
    vertical-align:middle !important;
    white-space:normal !important;
    word-break:break-word !important;
  }
  .table thead th,
  table thead th{
    font-size:.66rem !important;
    letter-spacing:.015em !important;
    white-space:nowrap !important;
  }
  .table .btn,
  table .btn{
    font-size:.68rem !important;
    padding:.24rem .38rem !important;
    line-height:1.1 !important;
  }
  .table img,
  table img,
  .profile-avatar-img,
  .user-mini-avatar{
    max-width:34px !important;
    max-height:34px !important;
    width:34px !important;
    height:34px !important;
    object-fit:cover !important;
  }

  /* Filtres masqués sur téléphone/tablette, visibles sur ordinateur. */
  .filters,
  .filter-bar,
  .filters-bar,
  .reservation-filters,
  .mes-reservations-filtres,
  .mes-reservations-filters,
  .availability-filters,
  form.filters,
  form.filter-form{
    display:none !important;
  }

  /* Badge notification mobile/tablette : compact et jamais collé à la photo. */
  .mobile-bottom-nav-facebook .mobile-notif-badge,
  .mobile-bottom-nav-facebook .badge,
  .mobile-bottom-item .badge,
  .mobile-bottom-item .notif-badge{
    position:absolute !important;
    top:4px !important;
    right:18% !important;
    min-width:15px !important;
    width:auto !important;
    height:15px !important;
    max-height:15px !important;
    padding:0 4px !important;
    border-radius:999px !important;
    font-size:9px !important;
    line-height:15px !important;
    font-weight:800 !important;
    text-align:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#dc2626 !important;
    color:#fff !important;
    border:2px solid #fff !important;
    z-index:5 !important;
    transform:none !important;
  }

  /* Calendrier FullCalendar : visible et compact sur téléphone/tablette. */
  .planning-page{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  .planning-page .planning-header-card{ order:1 !important; }
  .planning-page .planning-calendar-card,
  .planning-calendar-card,
  .calendar-card{
    order:2 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:560px !important;
    height:auto !important;
    margin:10px 0 14px !important;
    padding:8px !important;
    overflow:visible !important;
    background:#fff !important;
  }
  .planning-page .availability-card{ order:3 !important; }

  #calendar,
  #calendar.fc,
  .planning-calendar-card #calendar,
  .fc,
  .fc-media-screen{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-height:535px !important;
    height:auto !important;
    overflow:visible !important;
    background:#fff !important;
    z-index:1 !important;
  }
  .fc .fc-view-harness,
  .fc .fc-view-harness-active{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    min-height:420px !important;
    height:auto !important;
    overflow:visible !important;
  }
  .fc .fc-scroller,
  .fc .fc-scroller-liquid,
  .fc .fc-scroller-liquid-absolute{
    display:block !important;
    min-height:360px !important;
    height:auto !important;
    overflow:visible !important;
  }
  .fc .fc-toolbar.fc-header-toolbar,
  .fc .fc-toolbar.fc-footer-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    margin-bottom:9px !important;
  }
  .fc .fc-toolbar-chunk{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    width:100% !important;
  }
  .fc .fc-toolbar-title{
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .fc .fc-button,
  .fc .fc-button-primary{
    min-height:30px !important;
    padding:4px 7px !important;
    font-size:10px !important;
    border-radius:9px !important;
  }
  .fc .fc-list-table,
  .fc .fc-list-table table,
  .fc table{
    width:100% !important;
    max-width:100% !important;
    font-size:11px !important;
  }
  .fc .fc-list-event-time,
  .fc .fc-list-event-title,
  .fc .fc-event-title,
  .fc .fc-event-time{
    font-size:11px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    word-break:break-word !important;
  }
}

@media screen and (max-width: 480px){
  body{ font-size:12.5px !important; }
  .table th,.table td,table th,table td{ font-size:.68rem !important; padding:.3rem .34rem !important; }
  .fc .fc-toolbar-title{ font-size:13px !important; }
  .fc .fc-button{ font-size:9.5px !important; padding:4px 6px !important; }
  .mobile-bottom-nav-facebook .mobile-notif-badge,
  .mobile-bottom-nav-facebook .badge,
  .mobile-bottom-item .badge,
  .mobile-bottom-item .notif-badge{
    right:14% !important;
    min-width:14px !important;
    height:14px !important;
    line-height:14px !important;
    font-size:8px !important;
  }
}

/* Extension tablette : mêmes réglages que téléphone pour le menu bas et le dashboard simplifié. */
@media screen and (min-width: 769px) and (max-width: 1024px){
  body .modern-topbar .topbar-center,
  body .modern-topbar .topbar-center.d-flex,
  body .topbar-center{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .modern-topbar .topbar-right .notification-bell,
  .topbar .topbar-right .notification-bell,
  .topbar-right > a.notification-bell{
    display:none !important;
  }
  body nav.mobile-bottom-nav-facebook{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:space-around !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100vw !important;
    height:74px !important;
    margin:0 !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background:#fff !important;
    border-top:1px solid rgba(15,23,42,.14) !important;
    box-shadow:0 -12px 30px rgba(15,23,42,.15) !important;
    z-index:2147483000 !important;
    overflow:hidden !important;
  }
  body nav.mobile-bottom-nav-facebook > a.mobile-bottom-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    max-width:none !important;
    height:62px !important;
    padding:4px 2px !important;
    text-align:center !important;
    text-decoration:none !important;
    color:#64748b !important;
    border-radius:14px !important;
    overflow:visible !important;
    position:relative !important;
  }
  body nav.mobile-bottom-nav-facebook > a.mobile-bottom-item.active{
    background:#e8f3ff !important;
    color:#1877f2 !important;
  }
  body nav.mobile-bottom-nav-facebook > a.mobile-bottom-item > i{
    font-size:20px !important;
    line-height:1 !important;
    margin:0 0 3px !important;
  }
  body nav.mobile-bottom-nav-facebook > a.mobile-bottom-item > span{
    font-size:9px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body nav.mobile-bottom-nav-facebook img.bottom-nav-avatar,
  body nav.mobile-bottom-nav-facebook .bottom-nav-avatar{
    width:23px !important;
    height:23px !important;
    min-width:23px !important;
    min-height:23px !important;
    max-width:23px !important;
    max-height:23px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    border:2px solid #1877f2 !important;
    margin:0 0 3px !important;
  }
  body{ padding-bottom:94px !important; }
  body .content{ padding-bottom:118px !important; }
}


/* Correctif définitif : ne jamais masquer les conteneurs de contenu sur mobile/tablette.
   On masque uniquement les formulaires/blocs de filtres, pas la carte entière. */
@media screen and (max-width: 1024px){
  body .card,
  body .card.p-4,
  body .table-responsive,
  body table.table,
  body table{
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .table-responsive{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body table.table,
  body table{
    width:100% !important;
    min-width:720px !important;
    border-collapse:collapse !important;
  }

  /* Mes réservations : le formulaire filtre est masqué, mais la liste reste visible. */
  body .mes-reservations-filters{
    display:none !important;
  }

  body .mes-reservations-filters + .d-flex,
  body .mes-reservations-filters ~ .table-responsive{
    display:block !important;
    visibility:visible !important;
  }

  /* Planning général : ne jamais masquer la carte calendrier. */
  body .planning-calendar-card,
  body .calendar-card,
  body #calendar,
  body .fc,
  body .fc-view-harness,
  body .fc-view-harness-active{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}