/* ===========================================================================
   SpamShield Mail — phone layout.

   Everything here is inside a phone media query, so the desktop UI is untouched.
   The desktop layout already collapses at Bootstrap's `lg` breakpoint, but
   collapsing is not the same as being designed for a thumb: the controls are
   `btn-sm` (~31px, under the 44px touch guideline), the primary views are buried
   behind a "Folders & views" toggle, and Compose sits at the top of a collapsed
   panel — the furthest point from where a thumb rests.

   The redesign is built around what people actually do on a phone: scan, read,
   deal with it. Primary views and Compose move to a fixed bottom bar in the thumb
   zone; the folder list stays available but stops being the way you reach the inbox.
   =========================================================================== */

@media (max-width: 767.98px) {

  :root {
    /* Height of the fixed bottom bar plus the iPhone home-indicator inset, so
       content can reserve exactly the right amount of space and no more. */
    --ss-bottombar: 58px;
    --ss-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body {
    /* Stops iOS inflating font sizes unpredictably in landscape. */
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- Top bar: brand + mailbox only ----------
     The desktop nav carries seven controls. On a phone they wrap into an unusable
     stack, and none of them are things you need mid-triage — they move into the
     "More" sheet reached from the bottom bar. */
  .navbar-ss { padding-top: .4rem; padding-bottom: .4rem; }
  .navbar-ss .ss-logo { max-height: 26px; }

  .navbar-ss .navbar-toggler {
    min-width: 44px; min-height: 44px;      /* was ~31px — below the touch target guideline */
    padding: .35rem .5rem;
  }

  /* The mailbox switcher is the one top-bar control worth keeping visible:
     with multiple domains it tells you which identity you are looking at. */
  #topNavCollapse .dropdown-toggle {
    min-height: 44px;
    max-width: 62vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---------- Main column ----------
     Reclaim the horizontal padding the desktop grid reserves for the sidebar. */
  .container-fluid > .row > main {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    /* Clear the fixed bottom bar so the last message is never trapped under it. */
    padding-bottom: calc(var(--ss-bottombar) + var(--ss-safe-bottom) + 1rem) !important;
  }

  /* The desktop sidebar column and its toggle are replaced by the bottom bar
     and the folder sheet. */
  .ss-side { display: none !important; }

  /* ---------- Message list ----------
     Three lines with a clear hierarchy: who, what, and a hint of the body.
     Rows are full-bleed and tall enough to hit reliably while moving. */
  .msg-row {
    padding: .7rem .85rem !important;
    min-height: 64px;
    gap: .6rem !important;
    border-left: 3px solid transparent;     /* unread marker rides here */
  }
  .msg-row.unread { border-left-color: var(--ss-blue, #1f6feb); background: #f7faff; }

  /* Bulk-select checkbox. A bare checkbox paints at 17px, which is less than half the
     44px touch guideline. The painted box is enlarged to 24px and the *hit* area is
     widened to a full 44px column by a transparent label stretched around it, so the
     target is thumb-sized without a 44px box being drawn on screen. */
  .msg-row .ss-check-hit {
    display: flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; margin: -.35rem -.6rem -.35rem -.5rem;
    flex: 0 0 44px; cursor: pointer;
  }
  .msg-row .form-check-input { width: 1.5rem; height: 1.5rem; margin: 0; }

  /* Sender line: prominent, truncated rather than wrapped. */
  .msg-row .fw-semibold,
  .msg-row strong { font-size: .97rem; }

  /* Preview text earns its place only if it stays to one line. */
  .msg-row .text-truncate { max-width: 100%; }
  .msg-row .small { font-size: .82rem; }

  /* Timestamps and badges shrink rather than push the subject off-screen. */
  .msg-row .text-nowrap { font-size: .75rem; }

  /* Card chrome adds nothing at this width and costs 2rem of it. */
  .card.shadow-sm { border-left: 0; border-right: 0; border-radius: 0; }

  /* ---------- Search ----------
     Search is how you find things when there is no folder tree in view, so it gets a
     full row. Sharing one with the title leaves it ~233px on a 375px screen, which
     truncates the placeholder mid-word. */
  .d-flex.justify-content-between > div.flex-grow-1 {
    flex: 1 0 100% !important;
    max-width: none !important;
    order: 3;                              /* below the title and any action buttons */
  }
  #mailboxSearch { min-height: 44px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .input-group-sm > #mailboxSearch { font-size: 16px; }
  #mailboxSearchHint { font-size: .78rem; }

  /* ---------- Message view ----------
     Full-bleed body, and actions that do not require a second hand. */
  .card-body > iframe { min-height: 55vh !important; }

  /* Action buttons wrap into a comfortable grid instead of a cramped row. */
  .ss-msg-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .ss-msg-actions .btn { min-height: 44px; width: 100%; }

  /* ---------- Bottom navigation ----------
     Fixed, thumb-reachable, and the only navigation you need for triage. */
  .ss-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--ss-navy, #0b2545);
    padding-bottom: var(--ss-safe-bottom);
    box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 -8px 24px rgba(11,37,69,.18);
  }
  .ss-bottomnav a, .ss-bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: var(--ss-bottombar);
    background: none; border: 0; text-decoration: none;
    color: rgba(255,255,255,.66); font-size: .68rem; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .ss-bottomnav a.active { color: #fff; }
  .ss-bottomnav a.active svg { stroke: var(--ss-sky, #3f92ff); }
  .ss-bottomnav svg { width: 22px; height: 22px; }

  /* Unread/spam counts, kept small so they never obscure the icon. */
  .ss-bottomnav .ss-dot {
    position: absolute; transform: translate(12px, -12px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: #e5484d; color: #fff; font-size: .62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .ss-bottomnav .ss-navitem { position: relative; }

  /* Compose is the one creative action; it reads as primary. */
  .ss-bottomnav .ss-compose-tab { color: #fff; }
  .ss-bottomnav .ss-compose-tab svg {
    background: var(--ss-blue, #1f6feb); border-radius: 999px;
    padding: 4px; width: 26px; height: 26px; stroke: #fff;
  }

  /* ---------- Folder / more sheet ----------
     Slides up from the bottom, matching the direction of travel of the tab that
     opened it. */
  .ss-sheet .offcanvas-body { padding-top: .25rem; }
  /* Bootstrap's close button is 30px; dismissing a full-height sheet needs a real target. */
  .ss-sheet .btn-close { width: 44px; height: 44px; background-size: 16px; margin-right: -.25rem; }
  .ss-sheet .nav-link { min-height: 46px; display: flex; align-items: center; justify-content: space-between; }
  .ss-sheet .btn { min-height: 44px; }

  /* Bulk-action bar has to clear the bottom nav. */
  #bulkBar { position: sticky; bottom: calc(var(--ss-bottombar) + var(--ss-safe-bottom)); z-index: 1020; }
  #bulkBar .btn { min-height: 40px; }

  /* Alerts are informational, not a wall. */
  .alert { font-size: .9rem; padding: .6rem .8rem; }

  /* ---------- Sign-in ----------
     The first screen anyone sees on a phone, and the one where a mistyped character
     costs the most. 16px inputs stop iOS zooming the page on focus, which otherwise
     leaves the form scrolled off-centre mid-typing. */
  .ss-auth .card-body { padding: 1.5rem !important; }
  .ss-auth .form-control { min-height: 46px; font-size: 16px; }
  .ss-auth .btn { min-height: 46px; font-size: 1rem; }
  .ss-auth-logo { max-width: 200px; }
}

/* Installed (home-screen) mode: no browser chrome, so the top bar is the status
   bar's neighbour and needs the notch inset itself. */
@media (display-mode: standalone) {
  .navbar-ss { padding-top: calc(.4rem + env(safe-area-inset-top, 0px)); }
}