/* ============================================================
   Pms-Hotels — Mobile / responsive layer
   ------------------------------------------------------------
   Standard UI su telefono/tablet. Dipende da pms-tokens.css.
   ============================================================ */

@media (max-width: 900px) {

  /* ---- Safe area ---- */
  .app-body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* ---- Nav: scroll orizzontale (niente hamburger invasivo) ---- */
  .main-nav {
    height: auto;
    min-height: var(--nav-height);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0;
    padding: 0 8px;
  }

  .nav-brand {
    margin-right: 8px;
    padding: 0;
    height: auto;
    align-self: stretch;
  }

  .nav-brand__mark {
    min-height: var(--nav-height);
    padding: 0 12px;
    font-size: var(--font-size-base);
  }

  .nav-item,
  .nav-dropdown__toggle {
    height: var(--nav-height);
    min-height: var(--touch-min);
    padding: 0 12px;
    font-size: var(--font-size-base);
  }

  .nav-icon {
    display: none;
  }

  .main-nav .nav-dropdown__menu {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(70vh, 420px);
    overflow: auto;
  }

  /* ---- Page shell ---- */
  .page-container,
  .page-body-scroll {
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }

  .calendar-topbar,
  .toolbar,
  .filter-panel,
  .pms-actions-bar,
  .client-form-actions.pms-actions-bar,
  .reservation-form-actions {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    min-height: var(--toolbar-height);
  }

  .toolbar .btn,
  .pms-actions-bar .btn,
  .filter-actions .btn,
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
  }

  /* ---- Forms: stack label sopra campo ---- */
  .form-edit-table,
  .form-edit-table tbody,
  .form-edit-table tr {
    display: block;
    width: 100%;
  }

  .form-edit-table th,
  .form-edit-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

  .form-edit-table th {
    padding: 8px 0 2px;
    width: 100%;
    max-width: none;
  }

  .form-edit-table td {
    padding: 0 0 10px;
  }

  .form-edit-table .form-section {
    margin-top: 8px;
  }

  .form-edit-table input.res-stay-date,
  .form-edit-table input.res-guests__name-input {
    width: 100%;
    min-width: 0;
  }

  .form-edit-table input[type="text"],
  .form-edit-table input[type="number"],
  .form-edit-table input[type="email"],
  .form-edit-table input[type="date"],
  .form-edit-table input[type="tel"],
  .form-edit-table input[type="password"],
  .form-edit-table select,
  .form-edit-table textarea,
  .ac-wrap {
    width: 100% !important;
    max-width: 100%;
  }

  /* ---- Tabelle lista: scroll orizzontale ---- */
  .file-table-wrap,
  .data-table-wrap,
  .table-scroll,
  .page-body-scroll--x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table,
  .file-table {
    min-width: 640px;
  }

  /* ---- Filtri ---- */
  .filter-panel,
  .filter-panel--list {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-field {
    width: 100%;
  }

  .filter-field input,
  .filter-field select {
    width: 100%;
  }

  /* ---- Popup / azioni sticky ---- */
  .client-form-sticky-top,
  .form-header + .pms-actions-bar,
  .pms-actions-bar.client-form-actions {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .pms-actions-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* ---- Reservation control ---- */
  .reservation-control-toolbar,
  .reservation-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .reservation-tabs .tab,
  .reservation-tabs button {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* ---- Touch ---- */
  .btn,
  .btn-delete-toolbar,
  button.nav-item {
    min-height: 36px;
  }

  input,
  select,
  textarea {
    font-size: max(16px, var(--font-size-base)); /* evita zoom iOS */
  }
}

@media (max-width: 480px) {
  .nav-brand {
    max-width: none;
  }

  .nav-brand__mark {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-topbar h1,
  .form-header {
    font-size: var(--font-size-lg);
  }

  .btn,
  .toolbar .btn,
  .pms-actions-bar .btn {
    flex: 1 1 auto;
  }
}

/* Suggerimento installa app (solo browser mobile, non in standalone) */
.pms-install-tip {
  position: sticky;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #1e3a5f;
  color: #fff;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.pms-install-tip[hidden] { display: none !important; }
.pms-install-tip__text { flex: 1; }
.pms-install-tip__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pms-install-tip { display: none !important; }
}