/* =========================================================================
   Milvus Marketing & Client Portal — Mobile responsive overrides
   Loaded after milvus.css / me-portal.css. Fixes horizontal overflow,
   touch targets, shell padding, and safe areas for marketing + /me.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════
   1. SHELL PADDING — tighter on narrow viewports
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .m-shell {
    padding: 0 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. TOUCH TARGETS — minimum 44px on coarse pointers
   ═══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .m-btn-sm {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .m-nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .m-nav-locale {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .m-nav-cta {
    min-height: 44px;
    padding: 10px 16px;
  }

  .me-subnav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. HORIZONTAL OVERFLOW PREVENTION
   ═══════════════════════════════════════════════════════════════ */
html {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .m-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .m-footer-inner {
    grid-template-columns: 1fr;
  }
  .m-footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. CLIENT PORTAL — bottom navigation bar for mobile
   ═══════════════════════════════════════════════════════════════ */
.mp-bottom-nav {
  display: none;
}

@media (max-width: 720px) {
  .mp-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--mp-paper, #fff);
    border-top: 1px solid var(--mp-hairline, rgba(30,58,95,0.10));
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
  }

  .mp-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    min-width: 64px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
    color: var(--mp-ink-soft, #4A5B78);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 120ms ease;
    border-radius: 8px;
  }

  .mp-bottom-nav-item.is-active {
    color: var(--mp-ink-2, #11233F);
  }

  .mp-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
  }

  .mp-bottom-nav-item.is-active svg {
    stroke-width: 2;
  }

  /* Add padding to page bottom so content doesn't hide behind the nav */
  .me-portal .mp-shell {
    padding-bottom: 72px;
  }

  /* Hide desktop subnav on mobile — replaced by bottom nav */
  .me-portal .mp-subnav {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. CLIENT PORTAL — payment table responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .me-portal .mp-pay-outstanding {
    padding: 20px 18px;
  }
  .me-portal .mp-pay-outstanding-amount {
    font-size: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. CLIENT PORTAL — document rows touch targets
   ═══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .me-portal .mp-doc-row {
    min-height: 44px;
    padding: 16px 0;
  }
  .me-portal .mp-notif-row {
    min-height: 44px;
    padding: 18px 4px;
  }
  .me-portal .mp-chip-toggle {
    min-height: 44px;
    padding: 0 18px;
  }
  .me-portal .mp-pill--sm {
    min-height: 44px;
    padding: 0 18px;
  }
  .me-portal .mp-insp-remove {
    width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. SAFE AREAS — iPhone notch / home indicator
   ═══════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .m-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. IMAGE / CARD CROPPING — prevent overflow
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .m-card {
    padding: 18px;
  }
  .m-card img {
    border-radius: 12px;
  }
}