/* app-mobile.css — rendu « vraie application » sur téléphone (≤ 768 px).
   Chargée après caserne.css. La barre d'onglets du bas est définie dans caserne.css. */

/* ── Calendrier FullCalendar aux couleurs du site (toutes tailles) ── */
.fc { font-family: var(--cs-body); --fc-border-color: var(--cs-border); --fc-today-bg-color: #FFF7E0; }
.fc .fc-toolbar-title { font-family: var(--cs-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cs-navy); }
.fc .fc-button { background: #fff; border: 1.5px solid var(--cs-input); color: var(--cs-navy); font-weight: 700; border-radius: 12px; box-shadow: none !important; text-transform: none; min-width: 44px; height: 44px; font-size: 1rem; }
.fc .fc-button:hover { background: var(--cs-bg); color: var(--cs-navy); border-color: var(--cs-navy); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--cs-navy); border-color: var(--cs-navy); color: #fff; }
.fc .fc-prev-button, .fc .fc-next-button { font-size: 1.7rem; line-height: 1; padding: 0 .7rem; }
.fc .fc-button-group { gap: 6px; }
.fc .fc-button-group > .fc-button { border-radius: 12px !important; margin: 0 !important; }
.fc .fc-list { border: 0; }
.fc .fc-list-day-cushion { background: var(--cs-bg); font-weight: 700; }
.fc .fc-list-empty { background: var(--cs-bg); color: var(--cs-muted); font-size: .95rem; }

@media (max-width: 768px) {
  :root { --app-tabbar: calc(60px + env(safe-area-inset-bottom)); }

  /* ── Base : rien ne doit jamais dépasser la largeur de l'écran ── */
  html, body { max-width: 100%; overflow-x: clip; }
  body { font-size: 16px; }
  .app-main, .cs-main, .cs-header, .cs-subnav { width: 100%; max-width: 100%; box-sizing: border-box; }
  .app-main > *, .cs-main > *, .grid > *, .grid-layout > * { min-width: 0; max-width: 100%; }
  /* Leaflet dessine ses calques (canvas/svg/tuiles) hors de leur conteneur : ne jamais les borner */
  .leaflet-container canvas, .leaflet-container svg, .leaflet-container img { max-width: none !important; }
  .app-main, .cs-main { padding: 12px 12px 20px !important; }
  .cs-header__bar { padding: 10px 12px; }
  .cs-logo { width: 38px; height: 38px; }
  .cs-icon-btn { width: 42px; height: 42px; border-radius: 12px; }
  .panel, .card, .tile, .quick-panel { border-radius: 16px; }
  .cs-subnav { box-shadow: 0 1px 0 var(--cs-border); }
  .cs-subnav a { padding: 14px 14px 11px; font-size: 15px; }
  #toastContainer { bottom: calc(var(--app-tabbar) + 12px) !important; }

  /* ── Accueil ── */
  .dash { gap: 16px; }
  .dash-hello { font-size: 30px; }
  .dash-row { gap: 12px; }
  .tour { flex-basis: 100%; padding: 18px; border-radius: 18px; }
  .tour .cs-btn { align-self: stretch; min-height: 52px; font-size: 1.15rem; }
  .tour-num.big { font-size: 42px; }
  .tour-stats { gap: 18px; }
  .card { flex-basis: 100%; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 112px; }
  .tile .bi-chevron-right { display: none; }
  .tile-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--cs-navy); color: #fff; font-size: 22px; }
  .tile-label { font-size: 15px; line-height: 1.2; }
  .tile-desc { font-size: 12px; }
  .tile:active, .task:active { transform: scale(.98); }

  /* ── Ma tournée ── */
  body.page-me .app-main { padding: 8px 8px 12px !important; }
  body.page-me .inner-topbar { padding: .35rem .6rem; margin-bottom: .5rem; border-radius: 12px; box-shadow: none; }
  body.page-me .inner-topbar-title, body.page-me #weatherWidget { display: none !important; }
  body.page-me .inner-topbar-actions { width: 100%; justify-content: space-between; }
  body.page-me .grid { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
  body.page-me .grid > *, body.page-me section.panel > * { min-width: 0; max-width: 100%; }
  body.page-me #map, body.page-me #mapExtras, body.page-me .legend { width: 100%; max-width: 100%; box-sizing: border-box; }
  body.page-me .inner-topbar { flex-wrap: wrap; max-width: 100%; }

  /* Indicateurs : bandeau horizontal */
  body.page-me .panel.modern-aside { padding: .6rem; border-radius: 16px; }
  body.page-me .modern-aside .section-title { display: none; }
  body.page-me .kpis { display: flex; overflow-x: auto; gap: .5rem; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -.1rem; padding: 0 .1rem; }
  body.page-me .kpis::-webkit-scrollbar { display: none; }
  body.page-me .kpi { flex: 0 0 auto; min-width: 112px; padding: .5rem .6rem; scroll-snap-align: start; }
  body.page-me .kpi-icon { width: 32px; height: 32px; }
  body.page-me .kpi .val { font-size: 1.2rem; }
  body.page-me #btnAsideMore { min-height: 40px; }

  /* Carte + recherche */
  body.page-me section.panel { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
  body.page-me section.panel .section-title { display: none; }
  body.page-me .search-wrap { margin: 0 !important; }
  body.page-me #houseSearch { height: 48px; border-radius: 999px; padding-left: 2.6rem; border: 1.5px solid var(--cs-input); box-shadow: var(--shadow-sm); }
  body.page-me .search-wrap .search-icon { left: 1rem; font-size: 1rem; }
  body.page-me #map {
    height: calc(100dvh - 330px); min-height: 320px;
    border-radius: 18px; border: 0; box-shadow: var(--shadow-md);
  }
  body.page-me .house-info-bar { border-radius: 12px; }

  /* Boutons d'action flottants sur la carte */
  body.page-me #mapExtras { margin-top: .5rem !important; display: block !important; }
  body.page-me #mapExtras > .d-flex.flex-wrap.gap-2 {
    position: fixed; right: 12px; bottom: calc(var(--app-tabbar) + 12px); z-index: 1150;
    flex-direction: column; flex-wrap: nowrap !important; gap: 10px !important;
  }
  body.page-me #mapExtras .btn-geo {
    width: 54px; height: 54px; min-height: 54px; padding: 0; justify-content: center; border-radius: 50%;
    font-size: 1.35rem; box-shadow: 0 6px 18px rgba(20, 33, 61, .28);
  }
  body.page-me #mapExtras .btn-geo-secondary { background: #fff; border: 0; }
  body.page-me .map-action-label { display: none !important; }
  /* Légende : bandeau horizontal discret */
  body.page-me .legend { border-radius: 12px; padding: .4rem .6rem; box-shadow: none; }
  body.page-me .legend-title { display: none; }
  body.page-me .legend-items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.page-me .legend-item { white-space: nowrap; flex: 0 0 auto; }

  /* Saisie rapide = tiroir en bas d'écran */
  body.page-me .quick-panel {
    position: fixed; left: 0; right: 0; bottom: var(--app-tabbar); z-index: 1200; margin: 0;
    border: 0; border-radius: 22px 22px 0 0; max-height: 60dvh; overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, .25); overscroll-behavior: contain;
  }
  body.page-me .quick-header { position: sticky; top: 0; z-index: 1; padding-top: 1.2rem; }
  body.page-me .quick-header::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 42px; height: 4px;
    margin-left: -21px; border-radius: 4px; background: rgba(255, 255, 255, .35);
  }
  body.page-me .quick-note-input { font-size: 16px; min-height: 72px; }
  body.page-me .quick-status-grid { gap: .6rem; padding: .75rem .875rem .5rem; }
  body.page-me .q-btn { min-height: 72px; font-size: .8rem; border-radius: 14px; }
  body.page-me .q-btn .q-icon { font-size: 1.6rem; }
  body.page-me .quick-name-input { height: 50px; }
  body.page-me .quick-amount-input { width: 120px; height: 50px; font-size: 1.15rem; }
  body.page-me .quick-calendars-input { height: 50px; width: 72px; }
  body.page-me .amt-chip { min-height: 44px; padding: .4rem .9rem; font-size: .9rem; }
  body.page-me .quick-actions { position: sticky; bottom: 0; padding: .7rem .875rem; }
  body.page-me .quick-save-btn { min-height: 52px; font-size: 1.05rem; border-radius: 14px; }
  body.page-me .quick-details-link { padding: .6rem .4rem; font-size: .85rem; }
  body.page-me .quick-delete-btn { min-height: 44px; min-width: 44px; }

  /* Fiche détaillée = grand tiroir */
  body.page-me #editor {
    position: fixed; left: 0; right: 0; bottom: var(--app-tabbar); z-index: 1250; margin: 0 !important;
    max-height: 88dvh; overflow-y: auto; border-radius: 22px 22px 0 0 !important; border: 0;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, .3); overscroll-behavior: contain;
  }
  body.page-me #editor .card-body > .d-flex.mb-3 { position: sticky; top: 0; z-index: 2; }
  body.page-me #editor .editor-actions { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px rgba(20, 33, 61, .08); }
  body.page-me #editor .editor-actions .btn { flex: 1 1 100%; }

  /* Modale de suppression : feuille du bas */
  .modal-mask { align-items: flex-end; padding: 0; }
  .modal-window { max-width: none; border-radius: 22px 22px 0 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .modal-window .btn { min-height: 48px; flex: 1; }

  /* Autres pages (admin, matériel, comptes…) */
  .users-grid, .grid-layout { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  table { font-size: 14px; }
  .table-responsive, .panel table { max-width: 100%; }
  .modal-dialog { margin: 0; }
}