/* Electrical Compliance customer portal mobile layout.
   Keep this scoped to .portal-shell / .portal-auth so internal TradePath screens are untouched. */

.portal-shell,
.portal-shell * {
  box-sizing: border-box;
}

.portal-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.portal-shell > main,
.portal-shell > main > div {
  min-width: 0;
}

.portal-card {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.portal-card img {
  max-width: 100%;
}

@media (max-width: 860px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body:has(.portal-shell) {
    background: #f6f8fb !important;
  }

  #root:has(.portal-shell) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f6f8fb !important;
  }

  .portal-shell {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: #f6f8fb !important;
  }

  .portal-side {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 10px 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.16);
  }

  .portal-side > div:first-child {
    padding: 3px 5px 9px !important;
    min-width: 0 !important;
  }

  .portal-side > div:first-child > div:first-child {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  .portal-side > div:first-child > div:nth-child(2) {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
  }

  .portal-side > div:first-child > div:nth-child(3) {
    margin-top: 2px !important;
    max-width: calc(100vw - 30px) !important;
    font-size: 10px !important;
  }

  .portal-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 0 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .portal-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-nav button {
    flex: 0 0 auto !important;
    min-width: auto !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .portal-nav button span {
    width: 17px !important;
  }

  /* The sidebar already carries the portal identity/navigation on phones.
     Hide the duplicate white header and desktop account footer. */
  .portal-side > div:last-child,
  .portal-mobile-head {
    display: none !important;
  }

  .portal-shell > main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #f6f8fb !important;
  }

  .portal-shell > main > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 12px calc(34px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .portal-shell > main > div:last-child > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .portal-shell main h2 {
    font-size: 21px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em;
  }

  .portal-shell main .portal-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 13px !important;
    padding: 12px !important;
  }

  .portal-shell main .portal-card > * {
    min-width: 0;
    max-width: 100%;
  }

  .portal-shell main [style*="display: flex"] {
    min-width: 0 !important;
  }

  .portal-shell main [style*="display: grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Dashboard groups should fill the phone rather than preserving desktop card widths. */
  .portal-shell main [style*="minmax(230px"],
  .portal-shell main [style*="minmax(290px"],
  .portal-shell main [style*="minmax(220px"],
  .portal-shell main [style*="minmax(250px"],
  .portal-shell main [style*="minmax(210px"] {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .portal-shell main [style*="minmax(145px"] {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .portal-shell main [style*="repeat(3, 1fr)"],
  .portal-shell main [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }

  .portal-shell main select,
  .portal-shell main input,
  .portal-shell main textarea {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .portal-shell main select {
    min-height: 44px !important;
  }

  .portal-shell main button {
    max-width: 100%;
  }

  .portal-card [style*="font-size: 16px"] {
    overflow-wrap: anywhere;
  }

  .portal-auth {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 520px) {
  .portal-shell > main > div:last-child {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .portal-shell main [style*="minmax(145px"] {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .portal-shell main [style*="justify-content: space-between"] {
    min-width: 0 !important;
  }

  .portal-shell main .portal-card button {
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  .portal-shell main [style*="minmax(145px"] {
    grid-template-columns: minmax(0,1fr) !important;
  }
}