/* =====================================================================
   PREDORIA CRM — the phone

   Loaded last, so everything here is a deliberate override of the desktop
   rules rather than a new component. Three things separate a website that
   happens to fit on a phone from something that feels like an app:

     · nothing ever scrolls sideways unless it was meant to;
     · you can hit what you aim at, first time;
     · the notch, the home bar and Safari's chrome never sit on content.

   Everything is scoped to a width or to `pointer:coarse`, so a desktop
   browser at 1440px is untouched.
   ===================================================================== */

/* ---------------------------------------------------------------- basics */

html {
  -webkit-text-size-adjust: 100%;   /* landscape must not inflate the type */
}

@media (pointer:coarse), (max-width:560px) {
  /* Kill the grey flash and the 300ms wait for a double-tap that will
     never come. */
  a, button, .btn, .nav-link, .subtab, .convo, .task-row, .kcard {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* A thumb is about 9mm across. Anything under ~38px is a coin toss. */
  .btn        { min-height: 38px; }
  .btn-sm     { min-height: 34px; }
  .nav-link   { padding-top: 9px; padding-bottom: 9px; }
  .subtab     { padding-top: 11px; padding-bottom: 11px; }
  .table td.actions .btn { min-height: 32px; }

  /* iOS zooms the whole page in when a focused field is under 16px, and
     never zooms back out. Bigger text is the only fix that works. */
  .input, .select, .textarea,
  .form-row input, .form-row select, .form-row textarea {
    font-size: 16px;
    min-height: 42px;
  }
  .textarea, .form-row textarea { min-height: 88px; }

  /* A scroller inside the page should not drag the page with it once it
     reaches its end. */
  .table-scroll, .kanban, .subtabs, .chat-convos, .chat-msgs, .qbell-list {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
  }
}

/* ------------------------------------------------------- notch and home bar
   `viewport-fit=cover` (set in the layout) lets the app paint under the
   status bar and the home indicator. That is what makes an installed PWA
   look full-screen — but only if we then keep content out of those strips. */

@media (max-width:820px) {
  .topbar  { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .sidebar { padding-top: env(safe-area-inset-top, 0px); }
  .content { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* The drawer should never cover the whole screen — a strip of the page
     behind it is what tells you it is a drawer. */
  .sidebar { width: min(280px, 84vw); }
}

/* Installed, there is no browser chrome to scroll away, so the strips are
   permanent and every fixed thing has to sit inside them. */
@media (display-mode:standalone) {
  .chat-composer,
  .pwa-card,
  .toast-stack { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------- chat
   The one-pane phone layout was already here; what was missing is the
   instruction that the pane may be *narrower* than its contents. A grid
   track defaults to min-content, so the filter chips — which never wrap —
   were quietly stretching the conversation list past the screen edge and
   taking the whole page sideways with it. */

@media (max-width:760px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-list, .chat-thread { min-width: 0; }

  /* Chips scroll on their own instead of setting the width of the app. */
  .chat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chat-chips::-webkit-scrollbar { display: none; }

  .chat-search .input { min-width: 0; }
}

/* --------------------------------------------------------------- toolbars
   Filter rows are built for a desk: four controls side by side. Below
   560px they stack, full width, in the order they are read. */

@media (max-width:560px) {
  .clients-filters {
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  .clients-filters .input,
  .clients-filters .select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .clients-filters .btn { flex: 1 1 auto; }

  .clients-toolbar { flex-wrap: wrap; }

  .toolbar { gap: 8px; }
  .toolbar > form { width: 100%; }
  .toolbar .input, .toolbar .select { width: 100%; }

  /* Anything anchored to the topbar becomes a sheet pinned to the screen
     rather than a small panel hanging off a 30px button. */
  .qbell-panel {
    position: fixed;
    top: calc(54px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }

  /* Dialogs must fit the phone, whatever they contain. */
  .ngate-card, .chat-modal, .modal-card {
    max-width: calc(100vw - 24px);
    min-width: 0;
  }

  /* One column of the pipeline at a time, and it stops where you let go. */
  .kanban {
    grid-auto-columns: min(265px, 82vw);
    scroll-snap-type: x proximity;
  }
  .kcol { scroll-snap-align: start; }
}