/* OpenSquilla Web UI — Mobile overrides (<=768px) */

@media (max-width: 768px) {

  /* Prevent iOS auto-zoom on input focus */
  input, textarea, select { font-size: 16px !important; }

  /* Touch-friendly tap targets */
  .btn { min-height: 44px; min-width: 44px; }
  .btn--sm { min-height: 40px; }
  .btn--icon { min-width: 44px; min-height: 44px; }
  .chat-session-copy-btn,
  .attachment-remove,
  .sess-iconbtn,
  .cron-iconbtn {
    min-width: 40px;
    min-height: 40px;
  }
  .cron-preset {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Safe area insets for notched phones */
  .content {
    padding-top: var(--sp-3);
    padding-right: var(--sp-3);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-3));
    padding-left: var(--sp-3);
  }

  /* Toast: full-width on mobile, lifted above the chat composer when present.
     --composer-h is set on :root by the chat view; defaults to 0 elsewhere
     so non-chat views keep the original bottom alignment. */
  .toast-stack {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-3) + var(--composer-h, 0px));
    right: var(--sp-3);
    left: var(--sp-3);
  }
  .toast { max-width: 100%; }

  /* Modal: full-width bottom sheet feel */
  .modal {
    min-width: unset;
    width: calc(100vw - var(--sp-6));
    max-height: 85vh;
  }

  /* Topbar */
  .topbar {
    height: 52px;
    min-height: 52px;
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }

  /* Sidebar overlay */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 260px;
    min-width: 260px;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar.open::after {
    content: '';
    position: fixed;
    inset: 0;
    left: 260px;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .sidebar-toggle.btn { display: inline-flex; }

  .nav-item {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-md);
    min-height: 44px;
  }

  /* Stat row: 2 columns on mobile */
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .stat { padding: var(--sp-3); min-height: 84px; }
  .stat-value { font-size: var(--fs-lg); }

  /* Data table: contain to viewport width and scroll the table internally
     instead of forcing the whole page to scroll horizontally. */
  .data-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 500px; }

  /* `.content` is the right-hand pane; without `min-width: 0` a flex child
     refuses to shrink below the intrinsic width of its children, which makes
     wide tables push the entire page into horizontal scroll. */
  .main, .content { min-width: 0; }
  .content { overflow-x: hidden; }

  /* Cards */
  .card { padding: var(--sp-3); }
}