/* ============================================================
   Fuse CRM — mobile
   ============================================================

   Loaded last, after app.css and any per-page stylesheet, so it can
   correct all of them from one place. Nothing here applies above 760px,
   so the desktop layout is untouched.

   Three things were actually broken on a phone:

   1. The navigation. .topbar nav is a flex row with no wrap and eleven
      links in it. Everything past Follow-ups ran off the side of the
      screen with nothing to scroll, so Allocate, Numbers, Team, Import
      and Admin were unreachable. That is fixed with a menu button.

   2. Tables. Fifteen of them have no scrolling container, so a wide grid
      pushed the whole page sideways and the body scrolled instead of the
      table. Every table in a panel now scrolls inside itself.

   3. Inputs under 16px. iOS zooms the page when you focus one, and does
      not zoom back out, which leaves you stranded at 1.4x with the nav
      off screen. Every input is 16px on mobile for that reason alone.
   ============================================================ */

/* ---- the menu button is desktop-hidden ---- */
.navtoggle{display:none}

@media (max-width: 760px) {

  /* ============ NAVIGATION ============ */
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:8px;
    padding-top:calc(10px + env(safe-area-inset-top, 0px))}
  .brand{font-size:19px}

  .navtoggle{
    display:inline-flex;align-items:center;gap:7px;margin-left:auto;
    background:var(--brand-lift);border:1px solid rgba(255,255,255,.28);
    color:#fff;border-radius:9px;padding:8px 13px;font:inherit;font-size:14px;
    font-weight:600;cursor:pointer;min-height:40px}
  .navtoggle .bars{display:inline-block;width:15px;height:2px;background:#fff;
    position:relative;border-radius:2px}
  .navtoggle .bars::before,.navtoggle .bars::after{content:'';position:absolute;
    left:0;width:15px;height:2px;background:#fff;border-radius:2px}
  .navtoggle .bars::before{top:-5px}
  .navtoggle .bars::after{top:5px}
  .navtoggle .count{background:var(--brand-pink);color:#fff;border-radius:999px;
    font-size:11px;font-weight:700;padding:1px 7px;min-width:18px;text-align:center}

  .topbar-right{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0}
  .topbar nav{
    display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;
    border-top:1px solid rgba(255,255,255,.16);margin-top:8px;padding-top:6px}
  .topbar nav.open{display:flex}
  /* A tap target you can hit while holding a phone in one hand. */
  .topbar nav .navlink{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.08);
    font-size:16px;display:flex;align-items:center;gap:8px;min-height:44px}
  .topbar nav .navlink:last-of-type{border-bottom:none}
  .topbar nav .who{padding:12px 4px;font-size:13px;opacity:.75}

  /* The workspace switcher matters more on mobile, not less: it is how you
     tell which business you are about to write an email as. */
  .ws-switch{order:2;width:100%;margin-top:4px}
  .ws-switch select{flex:1 1 auto;min-height:40px;font-size:16px}
  .ws-label{display:none}

  /* ============ TABLES ============ */
  /* Most of these have no scrolling container in the markup, which cannot
     be added from CSS, so the table itself becomes the scroller. */
  .panel table,
  .rp-table, .mc-table, .type-table, .relp-table, .imp-table, .alloc-table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;white-space:nowrap}
  .panel table thead, .panel table tbody{display:table;width:100%;min-width:max-content}
  .rp-table td, .rp-table th, .mc-table td, .mc-table th,
  .type-table td, .type-table th{padding:7px 8px}

  /* Freezing a column on a 390px screen leaves nothing to scroll. */
  .svc-grid-table .c, .svc-grid-table .co,
  .svc-grid-table th.c, .svc-grid-table th.co{position:static;box-shadow:none}
  .grid-scroll{max-height:none}

  /* A note or a description must wrap rather than force the row wide. */
  .type-table .small, .rp-table .sub, .mc-table .small{white-space:normal;min-width:180px}

  /* ============ ACTION BARS ============ */
  /* Each page's own sheet already unsticks its bar at 900px, so that is
     not repeated here. What is left is making the controls in them big
     enough to hit, and letting the hints take a line of their own. */
  .hunt-bar, .svc-bar, .alloc-bar{padding:10px 12px}
  .hunt-bar select, .svc-bar select, .alloc-bar select,
  .hunt-bar .btn, .svc-bar .btn, .alloc-bar .btn{min-height:40px}
  .hunt-bar .spacer, .svc-bar .spacer{display:none}
  .hb-hint, .sel-count{flex:1 1 100%}

  /* ============ FORMS ============ */
  /* 16px is not a style choice. Below it, iOS zooms in on focus and does
     not zoom back out, leaving the page stranded and the nav off screen. */
  input[type=text], input[type=search], input[type=email], input[type=number],
  input[type=date], input[type=password], select, textarea{
    font-size:16px !important; max-width:100%}
  .btn{min-height:42px;padding-left:15px;padding-right:15px}
  .btn.sm{min-height:36px}

  /* ============ LAYOUT ============ */
  .wrap{padding-left:12px;padding-right:12px}
  .panel{padding:14px 15px}
  /* .rp-two and .ld-two already collapse at 900px in their own sheets. */
  .ld-side{order:2}
  .rp-band, .hunt-sum, .day-stats{gap:7px}
  .rp-fig, .hs, .ds{flex:1 1 calc(50% - 4px)}

  /* Filter bars: one control per row beats six squeezed onto three. */
  .hunt-filters label, .svc-filters label, .alloc-filters label{flex:1 1 100%}
  .hunt-filters select, .hunt-filters input[type=search],
  .svc-filters select, .svc-filters input[type=search]{width:100%}

  /* ============ MY DAY ============ */
  /* myday.css already stacks the card and the list, moves the list below
     and caps it, at its own 900px breakpoint. Repeating any of that here
     would be a second rule owning the same layout, which is how the Team
     day toggle ended up unable to turn off. Only what it does not cover:
     the number is the one thing you tap, so it goes up rather than down. */
  /* myday.css drops this to 21px at 900px. On a phone the number is the
     one thing you tap, so it goes back up rather than down. */
  .tel{font-size:27px}
  .cc-name{font-size:21px;line-height:1.25}

  /* ============ THE REST ============ */
  .ah-form{flex-direction:column;align-items:stretch}
  .ah-why{flex:1 1 auto}
  .crumbs{flex-direction:column;align-items:flex-start;gap:4px}
  .ah-days{width:100%;overflow-x:auto;padding-bottom:4px}
  .weekbar{gap:7px}
  .wb-track{flex:1 1 100%;order:9}
}

/* A phone held upright with the keyboard open has very little height, so
   nothing may claim a fixed slice of it. */
@media (max-width: 760px) and (max-height: 520px) {
  .topbar{position:static}
  .day-list{max-height:200px}
}