/* Desktop / browser PC — smartphone layout unchanged below 900px */

@media (min-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body:has(.gw-login:not(.hidden)) {
    overflow: auto;
    height: auto;
  }

  body {
    background: var(--bg2);
  }

  /* ---- App shell: sidebar fissa + solo main scrollabile ---- */
  .phone {
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    box-shadow: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rolebar rolebar"
      "nav main";
  }

  .phone > .rolebar {
    grid-area: rolebar;
  }

  .phone > .nav {
    grid-area: nav;
  }

  .phone > main,
  .phone > #admin-main,
  .phone > .app-main {
    grid-area: main;
  }

  .phone .rolebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
  }

  .phone .rolebar .brand {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
  }

  .phone .rolebar .seg {
    flex: none;
    width: min(380px, 40vw);
  }

  .phone .nav {
    position: relative;
    top: auto;
    align-self: stretch;
    height: 100%;
    min-height: 100%;
    max-height: none;
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    border-right: 1px solid var(--border);
    background: var(--card2);
    padding: 16px 10px;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .phone .nav button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 14px;
    font-size: 0.88rem;
    border-radius: 10px;
    width: 100%;
  }

  .phone .nav button.active {
    background: rgba(62, 207, 142, 0.14);
  }

  .phone .nav button svg {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .phone main,
  .phone #admin-main,
  .phone .app-main {
    padding: 24px 32px 40px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Colonna contenuto: alert + main impilati */
  #admin-app .admin-content {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }

  #admin-app #booking-alert {
    display: none !important;
  }

  #admin-app #admin-main {
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 24px 32px 40px;
  }

  /* ---- Login centrato su PC ---- */
  .gw-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }

  .gw-login .login-phone {
    max-width: 440px;
    width: 100%;
    min-height: auto;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
  }

  .gw-login .login-phone .rolebar {
    display: block;
    border-radius: 20px 20px 0 0;
  }

  .gw-login .login-phone .rolebar .brand {
    margin-bottom: 8px;
  }

  .gw-login .login-phone main {
    padding: 14px 20px 28px;
    max-width: none;
  }

  /* ---- Griglie contenuto ---- */
  .phone main .stats,
  .phone #admin-main .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .phone main .view.active .topline .nm,
  .phone #admin-main .view.active .topline .nm {
    font-size: 1.35rem;
  }

  /* Home socio: card abbonamento + stats affiancati */
  #app-main .view.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
  }

  #app-main .view.active > .topline,
  #app-main .view.active > h2.sec,
  #app-main .view.active > .empty,
  #app-main .view.active > .chips,
  #app-main .view.active > .hint,
  #app-main .view.active > .card:not(.member) {
    grid-column: 1 / -1;
  }

  #app-main .view.active > .card.member {
    grid-column: 1;
  }

  #app-main .view.active > .stats {
    grid-column: 2;
    align-self: stretch;
  }

  /* Dashboard admin */
  #admin-main .view.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
  }

  #admin-main .view.active > .topline,
  #admin-main .view.active > h2.sec,
  #admin-main .view.active > .empty,
  #admin-main .view.active > .alert,
  #admin-main .view.active > .search,
  #admin-main .view.active > .cal,
  #admin-main .view.active > .card,
  #admin-main .view.active > #sociList {
    grid-column: 1 / -1;
  }

  #admin-main .view.active > .stats {
    grid-column: 1 / -1;
  }

  /* Sessioni in due colonne dentro le card */
  .phone main .card:has(.session:nth-child(2)),
  .phone #admin-main .card:has(.session:nth-child(2)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .phone main .card:has(.session) .session,
  .phone #admin-main .card:has(.session) .session {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .phone main .card:has(.session) .session:nth-child(2n),
  .phone #admin-main .card:has(.session) .session:nth-child(2n) {
    border-right: 0;
  }

  .phone main .card:has(.session) .session:nth-last-child(-n + 2),
  .phone #admin-main .card:has(.session) .session:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .phone main .card:has(.session):has(.session:nth-child(odd):last-child) .session:last-child,
  .phone #admin-main .card:has(.session):has(.session:nth-child(odd):last-child) .session:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }

  /* Lista soci: griglia */
  #sociList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
  }

  #sociList .listitem {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
  }

  /* Chips giorni: no scroll forzato */
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Calendario più ampio */
  .cal {
    gap: 10px;
    max-width: 640px;
  }

  .cal .cd {
    font-size: 0.9rem;
  }

  /* Overlay / dialog su desktop: centrati, scroll interno, sfondo bloccato */
  .sheet-bg.open,
  #confirm-modal:not(.hidden),
  .modal:not(.hidden) {
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px;
  }

  .sheet-bg .sheet,
  .sheet-bg .modal-content,
  .modal .modal-content {
    border-radius: 20px;
    width: 100%;
    max-width: min(720px, 94vw);
    margin: auto;
    animation: desktopSheetIn 0.2s ease;
    padding: 20px 22px 18px;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #admin-tool-sheet.sheet-wide.open .sheet,
  #admin-tool-sheet.sheet-wide.open #admin-tool-sheet-inner.sheet {
    max-height: none;
    overflow: visible;
  }

  #admin-tool-sheet .sheet,
  #admin-tool-sheet-inner.sheet {
    max-width: min(780px, 94vw);
  }

  #admin-tool-sheet.sheet-wide .sheet,
  #admin-tool-sheet.sheet-wide #admin-tool-sheet-inner.sheet {
    max-width: min(960px, 96vw);
    max-height: none;
    overflow: visible;
    margin: 32px auto;
  }

  #admin-tool-sheet:not(.sheet-wide) .tool-panel-scroll {
    max-height: min(62vh, 560px);
  }

  #tab-sessions #session-form .form-row:nth-of-type(1) {
    grid-template-columns: 1.4fr 1fr 0.9fr 0.6fr;
  }
  #tab-sessions #session-form .form-row:nth-of-type(3) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .week-grid {
    grid-template-columns: 48px repeat(7, minmax(100px, 1fr));
    min-width: 820px;
  }
  .week-grid-cell,
  .week-grid-cell-empty {
    min-height: 52px;
  }

  #client-card-modal .client-card,
  #client-card-modal .modal-content {
    max-width: min(680px, 94vw);
  }

  #confirm-modal .modal-content {
    max-width: min(440px, 92vw);
    max-height: none;
  }

  #modal.sheet-bg .sheet {
    max-width: min(480px, 92vw);
  }

  @keyframes desktopSheetIn {
    from {
      opacity: 0;
      transform: scale(0.97) translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .slots {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    display: grid;
  }

  .slot {
    min-width: 0;
  }

  /* Toast */
  .toast {
    bottom: 32px;
  }

  /* PIN modal */
  #pin-modal .card {
    max-width: 440px;
  }
}

/* Schermi molto larghi */
@media (min-width: 1280px) {
  .phone main,
  .phone #admin-main,
  .phone .app-main {
    padding: 28px 48px 48px;
    max-width: 1200px;
  }

  #sociList {
    grid-template-columns: 1fr 1fr 1fr;
  }
}