/* Both rows use the same gap so the four header buttons share two columns. */
.af-host-app .top .housebar{gap:6px!important}
@media(max-width:420px){
  body.af-host-app[data-af-section="home"] .housebar{right:11px}
}

/* R3 desktop. Le regole compatte esistenti restano attive sotto 1024 px. */
@media (min-width:1024px){
  .af-host-app .app{
    max-width:none;
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    border:0;
    box-shadow:none;
  }
  .af-host-app .top{
    grid-column:1/-1;
    grid-row:1;
    border-radius:0;
    padding-inline:24px!important;
  }
  body.af-host-app[data-af-section="home"] .housebar{right:24px}
  .af-host-app .slides{
    grid-column:2;
    grid-row:2;
    min-width:0;
    width:100%;
    height:100%;
    overflow-x:hidden;
  }
  .af-host-app .screen{
    flex:0 0 100%;
    min-width:100%;
    padding:22px 28px 36px;
    scrollbar-width:thin;
    scrollbar-color:#9dbbe0 transparent;
  }
  .af-host-app .screen::-webkit-scrollbar{display:block;width:8px}
  .af-host-app .screen::-webkit-scrollbar-thumb{background:#9dbbe0;border-radius:8px}
  .af-host-app .screen::before{max-width:none!important}

  /* Gli stessi collegamenti diventano un menu laterale, sempre accessibile. */
  .af-host-app .bottom{
    grid-column:1;
    grid-row:2;
    position:relative;
    inset:auto;
    width:auto;
    height:100%;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:22px 12px;
    border:0;
    border-right:1px solid var(--af-line);
    border-radius:0;
    background:rgba(255,255,255,.94);
    box-shadow:none;
    overflow-y:auto;
  }
  .af-host-app .bottom .nav{
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
    min-height:52px;
    padding:12px 14px;
    font-size:14px!important;
    border-radius:15px;
  }
  .af-host-app .bottom .nav span{margin:0;width:24px;text-align:center}

  /* Un riepilogo a sinistra, soggiorni e lavoro da svolgere a destra. */
  .af-host-app #home{
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(0,1.55fr);
    grid-template-rows:repeat(4,max-content);
    grid-template-areas:"tools tools" "property pilot" "finance pilot" "setup pilot";
    gap:18px;
    align-items:start;
    align-content:start;
    padding-top:18px;
  }
  .af-host-app #home>.afHomeTools{grid-area:tools;margin:0}
  .af-host-app #home>.afPropertyCard{grid-area:property;margin:0}
  .af-host-app #home>.afPilotPanel{grid-area:pilot;margin:0}
  .af-host-app #home>.afFinancialPanel{grid-area:finance;margin:0}
  .af-host-app #home>#launchStartCard{grid-area:setup;margin:0}
  .af-host-app #home>#cleaningHomeSwipeWrap{grid-column:1/-1}
  .af-host-app .afHomePanel{padding:20px}

  /* Calendario e riepiloghi sfruttano lo spazio senza ingrandire i caratteri. */
  .af-host-app #book-cal .calgrid{gap:10px}
  .af-host-app #book-cal .day{min-height:92px;padding:12px}
  .af-host-app #money-net>.grid2,.af-host-app #money-stats>.grid2{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .af-host-app #book-add.active{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px;
  }
  .af-host-app #book-add>h3,.af-host-app #book-add>.btn{grid-column:1/-1}
  .af-host-app #book-add>.btn{justify-self:start;min-width:220px}

  /* Finestre operative più ampie; conferme e accesso mantengono la loro misura. */
  .af-host-app #settingsOverlay>.sheet,
  .af-host-app #propertyManagerOverlay>.sheet,
  .af-host-app #cleaningShareOverlay>.sheet,
  .af-host-app .afBookingDetailSheet,
  .af-host-app .af360Card{width:min(900px,calc(100vw - 64px))}
  .af-host-app #afOperationsOverlay>.sheet{width:min(1120px,calc(100vw - 64px))}
  .af-host-app .afStayHistoryOverlay .afStayHistorySheet{
    width:min(1200px,calc(100vw - 64px))!important;
    max-width:none!important;
  }
  .af-host-app .ag-dialog{width:min(1000px,calc(100vw - 64px))}
  .af-host-app .aft-dialog{width:min(900px,calc(100vw - 64px))}
  .af-host-app .afYearGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .af-host-app .toast{bottom:24px}
}

/* Un portatile stretto conserva due colonne con margini più contenuti. */
@media (min-width:1024px) and (max-width:1199px){
  .af-host-app .app{grid-template-columns:164px minmax(0,1fr)}
  .af-host-app .screen{padding-inline:18px}
  .af-host-app #home{grid-template-columns:minmax(260px,.9fr) minmax(0,1.3fr);gap:14px}
  .af-host-app .afHomePanel{padding:16px}
  .af-host-app .bottom .nav{padding-inline:10px}
}