/* ==========================================================================
   ConciseCiv Team Hub — iPad / touch layer                    ipad.css
   --------------------------------------------------------------------------
   Loaded LAST in every protected page's <head>, i.e. AFTER the page's own
   inline <style> block, so equal-specificity rules here win.

   Nothing in this file changes the desktop experience. Every rule is gated
   behind either a touch-pointer query (pointer: coarse) or a viewport width
   that only a tablet / split-view window hits. The one exception is the
   text-size-adjust guard, which is a no-op on desktop browsers.

   Why this file exists: the app's existing responsive rules stop at
   max-width 800px (phone). An iPad in portrait is 820-834px CSS wide and an
   iPad in landscape is 1180-1366px, so BOTH iPad orientations previously fell
   through to the desktop layout. See ipad.js for the runtime half of the fix.
   ========================================================================== */

/* ── 1. iOS page behaviour (harmless everywhere) ────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;      /* stop Safari inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* no grey flash on tap */
}

/* Body class added by ipad.js when the primary pointer is a finger/pencil. */
body.cc-touch {
  -webkit-touch-callout: none;         /* no "Copy / Look Up" sheet on long-press */
}

/* While a touch drag is in flight nothing should scroll or select. */
body.cc-dragging {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 2. Touch targets ───────────────────────────────────────────────────────
   Apple's minimum comfortable target is 44pt. The app's buttons are 30-34px
   tall, which is fine with a mouse and fiddly with a finger. Grown only for
   coarse pointers so the desktop UI keeps its density.                      */

@media (pointer: coarse) {

  .btn,
  .home-btn,
  .back-btn,
  .palette-btn,
  button:not(.btn-sm):not([class*="icon"]) {
    min-height: 44px;
    touch-action: manipulation;        /* kills the 300ms double-tap-zoom delay */
  }

  /* Dense toolbars keep a smaller — but still reachable — target. */
  .btn-sm {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    touch-action: manipulation;
  }

  /* Icon-only controls: keep the glyph, grow the hit area. */
  .btn[class*="icon"],
  button[class*="icon"],
  .row-handle,
  .col-handle,
  .drag-handle {
    min-width: 40px;
    min-height: 40px;
    touch-action: manipulation;
  }

  /* Form controls at 16px — anything smaller makes Safari zoom the whole page
     on focus, which is the single most disorienting thing about using the app
     on an iPad today. */
  .input,
  .select,
  .text-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
    touch-action: manipulation;
  }

  .input,
  .select,
  .text-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select {
    min-height: 44px;
  }

  /* Tick boxes big enough to hit without aiming. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    touch-action: manipulation;
  }

  /* Anything the page reveals on :hover is unreachable with a finger. ipad.js
     re-emits those rules without the :hover; these two are the common static
     cases it cannot see. */
  body.cc-touch [class*="row-actions"],
  body.cc-touch [class*="item-actions"],
  body.cc-touch [class*="hover-only"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Native-feeling momentum inside any scroller. */
  .modal,
  .cc-scroll-x,
  [class*="scroll"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Modals must never grow taller than the visible viewport — with the
     on-screen keyboard up there is very little of it left. */
  .modal {
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
  }

  /* Sticky action bars sit above the home indicator. */
  .modal-actions {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  /* Pencil / finger draws on markup overlays instead of scrolling the page.
     (markup-engine.js already sets this inline; belt and braces for any other
     canvas the app draws on.) */
  canvas {
    touch-action: none;
  }
}

/* ── 3. iPad portrait and split view (≤ 900px) ──────────────────────────────
   The app's own phone rules are lifted into this range at runtime by ipad.js;
   what follows is the chrome those rules never covered.                     */

@media (max-width: 900px) {

  .wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Page headers stop fighting for one line. */
  header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* The user chip is the first thing to overflow a portrait header. */
  .user-info .user-details {
    max-width: 40vw;
  }

  .user-info .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Two-pane editors (document body + 260/320/340px side rail) stack. The
     rail keeps its order so the toolbar stays above the content it acts on. */
  .layout,
  .editor-layout,
  .split {
    grid-template-columns: 1fr !important;
  }

  /* A side rail that was sticky at the top of a column becomes a normal block
     once stacked — otherwise it pins over the content. */
  .side,
  .sidebar,
  .side-rail,
  .rail {
    position: static !important;
    top: auto !important;
  }

  /* Dialogs go near-full-width rather than a 480px column in a 820px page. */
  .modal {
    width: auto;
    max-width: min(92vw, 640px);
  }
}

/* ── 4. iPad landscape (901-1200px) ─────────────────────────────────────────
   Wide enough for the desktop layout; just short of the 1240px the widest
   pages assume, so trim the gutters instead of stacking anything.           */

@media (min-width: 901px) and (max-width: 1200px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── 5. Horizontal scrollers (wrapper injected by ipad.js) ──────────────── */

.cc-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

.cc-scroll-x > table {
  min-width: max-content;
}

/* ── 6. Touch drag-and-drop shim visuals (see ipad.js) ──────────────────── */

.cc-drag-ghost {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 12px 32px rgba(10, 21, 56, 0.28);
  border-radius: 10px;
  transform-origin: top left;
  will-change: transform;
}

.cc-drag-source {
  opacity: 0.35;
}

.cc-drop-target {
  outline: 2px dashed var(--royal, #1E2D8C);
  outline-offset: 2px;
}

/* ── 7. Print is untouched ──────────────────────────────────────────────── */

@media print {
  .cc-drag-ghost { display: none !important; }
  .cc-scroll-x { overflow: visible !important; }
}
