/* Phone and small-tablet layout. The pages use inline styles from the design,
   so these rules use !important on purpose to re-flow them below 760px. */
.m-only { display: none !important; }
[hidden] { display: none !important; }
/* Screen-reader-only labels from the design: pin them so they never widen the page. */
[style*="clip: rect(0 0 0 0)"] { left: 0; top: 0; white-space: nowrap; }
div[style*="overflow-x: auto"] { position: relative; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  body { position: relative; }
  body { -webkit-text-size-adjust: 100%; }
  .m-hide { display: none !important; }
  .m-only { display: inline-flex !important; }
  /* iOS zooms into inputs under 16px; keep text inputs at 16px. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  img { max-width: 100%; }
  h1 { font-size: 26px !important; line-height: 1.15 !important; }

  /* Any fixed-minimum grid falls back to one column instead of pushing the page wider. */
  [style*="grid-template-columns: repeat(auto-fit, minmax(2"],
  [style*="grid-template-columns: repeat(auto-fill, minmax(2"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Small stat tiles: two per row. */
  [style*="minmax(180px"], [style*="minmax(140px"], [style*="minmax(160px"], [style*="minmax(150px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 1fr auto 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  [style*="display: grid"] > * { min-width: 0; }
  select { max-width: 100%; min-width: 0; }
  /* Flex children never force the page wider than the screen. */
  [style*="flex: 999"], [style*="flex: 1 1"], [style*="flex: 2 1"], [style*="flex: 0 1"] { min-width: 0 !important; max-width: 100% !important; }
  section, main, aside { min-width: 0; }
  /* Wide tables scroll sideways inside their card, not the whole page. */
  div[style*="overflow-x: auto"] { max-width: 100%; -webkit-overflow-scrolling: touch; }
  /* Chip rows scroll sideways instead of wrapping into tall stacks. */
  [role="tablist"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .m-modes, .m-sort { overflow: visible; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tablist"] > button { flex: none !important; white-space: nowrap; }
  [role="dialog"] { padding: 12px !important; align-items: flex-end !important; }
  [role="dialog"] > div { max-height: 92vh; overflow-y: auto; }
  /* The video plays in the middle of the screen, not as a bottom sheet. */
  [role="dialog"][aria-label="Kargom video"] { align-items: center !important; }

  /* ---------- public header (home, quotes, login) ---------- */
  .m-topnav { gap: 12px !important; }
  .m-topnav a { white-space: nowrap; }
  header img { height: 24px !important; }
  header > div { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---------- home ---------- */
  body[data-page="home"] section > div { padding-left: 16px !important; padding-right: 16px !important; }
  body[data-page="home"] section > div[style*="padding: 56px"] { padding-top: 28px !important; }
  .m-modes { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .m-modes > button { font-size: 13px !important; min-height: 46px !important; padding: 0 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }

  body[data-page="home"] h1 > span:first-child { font-size: 30px !important; }
  body[data-page="home"] h1 > span:last-child { font-size: 36px !important; }
  body[data-page="home"] h1 + div { gap: 12px 24px !important; }
  body[data-page="home"] div[style*="padding-bottom: 40px"] { gap: 20px !important; padding-bottom: 20px !important; }
  body[data-page="home"] img[src*="cat-parcels"] { width: 250px !important; margin: 0 auto -2px !important; }

  /* ---------- quotes ---------- */
  body[data-page="quotes"] main { padding: 14px !important; gap: 14px !important; }
  /* Results first; filters open as a sheet from the bottom. */
  .m-filterbtn { margin-left: auto; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #C9D6EA; background: #FFFFFF; color: #1F2A3C; font: 700 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .m-filters { max-width: none !important; flex: 1 1 100% !important; }
  .m-filters[data-open="false"] { display: none !important; }
  .m-filters[data-open="true"] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh; overflow-y: auto;
    background: #F4F6FA; padding: 18px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0; box-shadow: 0 -16px 40px rgba(8,14,28,.28);
  }
  .m-filterdone { position: sticky; bottom: 0; width: 100%; justify-content: center; align-items: center; min-height: 50px; border: 0; border-radius: 12px; background: #2463DB; color: #FFFFFF; font: 700 16px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .m-sort > button, .m-sort > * { padding-left: 8px !important; padding-right: 8px !important; }

  /* ---------- customer app shell (dashboard + send) ---------- */
  .m-apphead > div { padding: 10px 14px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .m-apphead > div > div { gap: 8px !important; }
  .m-apphead button[onclick], .m-apphead button { white-space: nowrap; }
  .m-apphead .chip, .m-apphead a[aria-label^="Wallet"] { font-size: 14px !important; min-height: 40px !important; gap: 6px !important; flex: none; }
  .m-apphead > div > a:first-child { flex: 0 1 auto !important; min-width: 0; }
  .m-apphead > div > a:first-child img { height: 22px !important; width: auto !important; max-width: 100%; object-fit: contain; }
  .m-apphead > div > div { margin-left: auto !important; flex: none; }

  /* Side menu becomes a sticky, swipeable tab strip under the header. */
  .m-side {
    position: sticky; top: 0; z-index: 30;
    flex: 1 1 100% !important; max-width: none !important; width: 100%;
    flex-direction: row !important; align-items: center; gap: 0 !important;
    padding: 8px 12px !important; border-right: 0 !important; border-bottom: 1px solid #E1E7EF;
    overflow-x: auto; scrollbar-width: none; box-shadow: 0 4px 12px rgba(8,14,28,.05);
  }
  .m-side::-webkit-scrollbar { display: none; }
  .m-side > span, .m-side > div, .m-side > button { display: none !important; }
  .m-side > button.m-signout { display: inline-flex !important; flex: none; margin: 0 0 0 6px !important; min-height: 38px !important; white-space: nowrap; border: 1px solid #F3B4B4 !important; border-radius: 999px !important; }
  .m-side > nav { flex-direction: row !important; gap: 6px !important; }
  .m-side > nav > button { flex: none !important; min-height: 38px !important; padding: 0 14px !important; border-radius: 999px !important; white-space: nowrap; border: 1px solid #E1E7EF !important; }
  .m-side > nav > button[aria-current="page"] { border-color: #2463DB !important; }
  /* "+ Send a parcel" leads the tab strip. */
  .m-side > a {
    display: inline-flex !important; flex: none !important; margin: 0 8px 0 0 !important;
    min-height: 38px !important; padding: 0 14px !important; border-radius: 999px !important;
    font-size: 14px !important; white-space: nowrap; box-shadow: 0 4px 12px rgba(36,99,219,.3) !important;
  }
  .m-side > a svg { width: 16px; height: 16px; }
  /* Already on the send screen: no need for the button. */
  body[data-page="send"] .m-side > a { display: none !important; }
  .m-main { padding: 16px 14px 32px !important; gap: 16px !important; }
  .m-main section { border-radius: 16px !important; }
  .m-main section[style*="padding: 22px"], .m-main section[style*="padding: 20px"] { padding: 16px !important; }

  /* Tables become stacked cards on phones: no sideways scrolling to read a shipment. */
  .m-main table { min-width: 0 !important; width: 100% !important; }
  .m-main thead { display: none !important; }
  .m-main table, .m-main tbody { display: block !important; }
  .m-main tbody > tr { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid #EEF2F7; }
  .m-main tbody > tr > td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; }
  .m-main tbody > tr > td:empty { display: none !important; }
  .m-main tbody > tr > td:last-child { margin-left: auto; }

  /* Dashboard on phones: greeting, wallet / quick quote / this month, then recent shipments, then the rest. */
  .m-main > .m-d1 { order: -3; }
  .m-main > .m-d2 { order: -2; }
  .m-main > .m-d3 { order: -1; }

  /* ---------- send a parcel ---------- */
  body[data-page="send"] .m-main { padding-bottom: 110px !important; }
  body[data-page="send"] ol, body[data-page="send"] ul { padding-left: 0 !important; }
  body[data-page="send"] li > div { min-width: 0; }
  body[data-page="send"] li [style*="display: flex"][style*="gap: 28px"],
  body[data-page="send"] li [style*="display: flex"][style*="gap: 24px"] { gap: 14px !important; }
  .m-bar {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(rgba(244,246,250,0), #F4F6FA 25%) !important;
  }
  .m-bar > div { border-radius: 16px !important; padding: 10px 10px 10px 14px !important; gap: 6px 12px !important; }
  .m-bar > div { flex-wrap: nowrap !important; align-items: center; }
  .m-bar > div > b { border-right: 0 !important; padding-right: 0 !important; flex: none; font-size: 13px !important; }
  .m-bar > div > span:not(:last-child) { display: none !important; }
  .m-bar > div > span:last-child { margin-left: auto !important; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .m-bar > div > span:last-child button { min-height: 44px !important; padding: 0 14px !important; white-space: nowrap; }
  .m-bar > div > span:last-child button.btn { flex: 1 1 auto; max-width: 220px; }

  /* ---------- admin (usable on a phone, not the main target) ---------- */
  body[data-page="admin"] aside[aria-label="Admin menu"] { flex: 1 1 100% !important; max-width: none !important; padding: 10px !important; }
  body[data-page="admin"] aside[aria-label="Admin menu"] > nav { flex-direction: row !important; overflow-x: auto; }
  body[data-page="admin"] aside[aria-label="Admin menu"] > nav > button { flex: none !important; white-space: nowrap; }
  body[data-page="admin"] main { padding: 16px 12px !important; }
}

@media (max-width: 380px) {
  .m-apphead > div { padding: 10px 10px !important; }
  .m-apphead > div > a:first-child img { height: 19px !important; }
  .m-apphead .chip > span:first-child, .m-apphead a[aria-label^="Wallet"] > span:first-child { display: none !important; }
  .m-apphead .chip { padding: 0 4px 0 10px !important; }
  .m-apphead a[aria-label^="Wallet"] { padding: 0 10px !important; }
  .m-topnav { gap: 10px !important; font-size: 13px !important; }
  .m-topnav a { padding-left: 10px !important; padding-right: 10px !important; }
  .m-loginnav { gap: 12px !important; font-size: 13px !important; }
  h1 { font-size: 24px !important; }
  .m-bar > div > b { display: none !important; }
  .m-modes > button { font-size: 12px !important; letter-spacing: -0.02em; }
  body[data-page="home"] img[src*="cat-parcels"] { width: 200px !important; }
}