/* ===========================================================================
   ccam-mobile.css — platform-wide mobile layer
   ---------------------------------------------------------------------------
   EVERY rule in this file lives inside a max-width media query. Nothing here
   can affect desktop, by construction. That is deliberate: the platform's
   desktop layout is the tested one, and a mobile pass must not put it at risk.

   Load this LAST, after ccam-shell.css / ccam-type.css and after any page's
   own <style> block, so it wins on specificity ties without needing !important
   everywhere.

   Breakpoints:
     900px — tablet / small laptop: side panels narrow, grids loosen
     760px — the platform's existing mobile breakpoint (several pages already
             use it; matching it avoids a second, conflicting boundary)
     480px — small phones
   ======================================================================== */


/* ===========================================================================
   TABLET  ≤900px
   ======================================================================== */
@media (max-width: 900px) {

  /* Fixed 460px side panels leave under 100px of content on a small laptop. */
  .detail-panel { width: min(460px, 92vw); }

  /* Deal/record list columns that are fixed at 320px+ */
  .dd-list { width: 260px; min-width: 240px; }
}


/* ===========================================================================
   MOBILE  ≤760px
   ======================================================================== */
@media (max-width: 760px) {

  /* --- 1. Stop horizontal page scroll ------------------------------------
     One overflowing element makes the WHOLE page scroll sideways, which is
     the single most common reason a desktop layout "feels broken" on a
     phone. Clip at the root and let individual regions scroll instead. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Long unbroken strings — file names, addresses, IDs, URLs — are a common
     overflow source and cannot wrap without this. */
  body { overflow-wrap: break-word; }


  /* --- 2. Side panels become full-screen sheets --------------------------
     A 460px drawer on a 390px screen is wider than the viewport. Full-width
     is both simpler and the platform convention on phones. */
  .detail-panel {
    /* !important because four pages define panel widths in a <style> block in
       the BODY, which comes after this file in document order and would win
       every specificity tie. This layer exists to override; on layout-critical
       properties it has to actually win. */
    width: 100vw !important; max-width: 100vw !important;
    left: 0; right: 0; border-left: none;
  }

  /* --- 3. Tables scroll inside their own box, not the page ---------------
     Tables are the hardest thing to make responsive and the platform has 20
     of them. Rewriting each into cards is per-page work; containing them so
     they scroll horizontally WITHIN their wrapper is the safe universal fix
     and keeps every column readable and comparable.
     -webkit-overflow-scrolling gives iOS momentum scrolling. */
  .table-wrap, .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Hints that there is more to the right, rather than the content just
       appearing cut off. */
    background:
      linear-gradient(to right, var(--bg, #fff) 30%, transparent),
      linear-gradient(to left,  var(--bg, #fff) 30%, transparent) 100% 0;
    background-size: 28px 100%, 28px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
  }
  .table-wrap table, .tbl-wrap table { min-width: 620px; }

  /* Sticky headers cost more than they give on a short screen. */
  .table-wrap thead th, .tbl-wrap thead th { position: static; }


  /* --- 4. Multi-column grids collapse ------------------------------------
     .g2/.g3/.g4 are the platform's column grids; at phone width any of them
     produces columns too narrow to read. */
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }

  /* Metric tiles keep two across — they are short, and one per row makes the
     dashboard an endless scroll. */
  .met-grid, .dd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Document folders: one per row, full width. */
  .dd-folder-grid { grid-template-columns: 1fr !important; }


  /* --- 5. Touch targets --------------------------------------------------
     The platform's buttons are sized for a mouse. 44px is the Apple HIG
     minimum and roughly the width of an adult fingertip; below it, taps land
     on the wrong control. min-height rather than height so nothing that is
     already taller gets shrunk. */
  .btn, button, .nav-item, .tab, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  .btn.sm, .btn.xs { min-height: 38px; }   /* dense rows: still thumb-safe */

  input[type="checkbox"], input[type="radio"] {
    min-width: 22px; width: 22px; height: 22px;
  }

  /* Icon-only controls that would otherwise be ~16px. */
  .dd-x, .dd-folder-act, .rm {
    min-width: 38px; min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Hover-to-reveal controls are unreachable on touch — there is no hover.
     Anything that hides itself until hover must be permanently visible. */
  .dd-note-meta .dd-x, .dd-folder-act, .dd-file-move { opacity: 1 !important; }


  /* --- 6. Forms ----------------------------------------------------------
     iOS Safari zooms the viewport when focusing an input whose font-size is
     below 16px, and does NOT zoom back out afterwards. Every form control on
     the platform is 12-13px, so this affects all of them. 16px is the only
     value that prevents it. */
  input, select, textarea { font-size: 16px !important; }

  /* Full-width fields; side-by-side inputs are unusable at this width. */
  .fld, .fld input, .fld select, .fld textarea { width: 100%; box-sizing: border-box; }

  /* Date inputs have intrinsic width in WebKit and overflow their container. */
  input[type="date"] { min-width: 0; max-width: 100%; }


  /* --- 7. Readability ----------------------------------------------------
     465 occurrences of type at 11px or below across the platform. Fine on a
     27" monitor at arm's length, not on a phone. Floor the smallest text
     without touching the type scale itself. */
  .cnt, .met-lbl, .dd-kpi-lbl, .by, .when, small, .muted, .sub {
    font-size: 12px;
  }

  /* Tabular numbers stay monospaced but stop being tiny. */
  .mono { font-size: 12.5px; }


  /* --- 8. Spacing --------------------------------------------------------
     Desktop padding wastes a third of a phone screen. */
  .card, .card-surface, .dd-sec-bd, .panel { padding: 12px !important; }
  .dd-main { padding: 12px 12px 72px !important; }

  /* Bottom breathing room so the last row is not under the home indicator. */
  main, .dd-main, .content { padding-bottom: env(safe-area-inset-bottom, 0px); }


  /* --- 9. Things that simply do not belong on a phone --------------------- */
  /* The sidebar resize grip is a mouse affordance with no touch equivalent. */
  .ccam-nav-grip { display: none !important; }
  /* Drag handles for reordering: touch drag conflicts with page scroll. */
  .nav-drag-handle { display: none !important; }
  /* Keyboard shortcut hints. */
  .kbd, .shortcut-hint { display: none !important; }


  /* --- 10. Toasts and overlays ------------------------------------------- */
  .ccam-toast {
    right: 12px !important; left: 12px !important; bottom: 12px !important;
    max-width: none !important; text-align: center;
  }
  .modal, .modal-backdrop > * {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; border-radius: 12px 12px 0 0;
  }
  .modal-backdrop { align-items: flex-end; padding: 0; }
}


/* ===========================================================================
   SMALL PHONES  ≤480px
   ======================================================================== */
@media (max-width: 480px) {

  /* Even metric tiles go single-column here. */
  .met-grid, .dd-kpis { grid-template-columns: 1fr !important; }

  /* Step/stage trackers are horizontal rows of 5+ boxes; they wrap rather
     than shrink each box below readability. */
  .steps, .stage-row, .dd-steps { flex-wrap: wrap; }
  .steps > *, .stage-row > *, .dd-steps > * { flex: 1 1 45%; }

  /* Page chrome. */
  .topbar { padding: 0 12px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }
  h3 { font-size: 14px; }
}


/* ===========================================================================
   TOUCH DEVICES — regardless of width
   A large tablet can be wide AND touch-only, so these key off pointer type
   rather than screen size.
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Any hover-revealed control is invisible-and-unreachable without a hover
     state. Reveal them all. */
  .dd-folder-act, .dd-note-meta .dd-x, .dd-file-move, .nav-drag-handle {
    opacity: 1;
  }
  /* Remove hover-only affordances that stick after a tap on touch. */
  .dd-file:hover, .dd-note:hover, tr:hover { background: transparent; }
}


/* ===========================================================================
   PRINT — unrelated to mobile, but the same "not the desktop screen" family.
   Reports are generated into popups and printed; the app chrome should not
   appear on paper.
   ======================================================================== */
@media print {
  .main-nav, .ccam-nav-grip, .topbar, .ccam-toast,
  .dd-folders-toggle, .btn, .dd-x { display: none !important; }
  body { margin: 0; }
  .table-wrap, .tbl-wrap { overflow: visible !important; }
}