/**
 * Magnetrix portal.
 *
 * Light ground, same tokens as the rest of the site. Deliberately restrained:
 * this is a working screen, not a marketing page.
 */

.mxp {
  font-family: 'Hanken Grotesk', sans-serif;
  color: #04100F;
}

/* ---- identity bar ---- */
.mxp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E4EFF0;
  flex-wrap: wrap;
}
.mxp__eyebrow {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6C8A88;
  margin-bottom: 6px;
}
.mxp__who {
  margin: 0 !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #04100F;
}
.mxp__out {
  font-size: 14px;
  color: #6C8A88;
  text-decoration: none;
  border: 1px solid #DCEAEA;
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color .18s ease, color .18s ease;
}
.mxp__out:hover { color: #00636D; border-color: #00636D; }

/* ---- totals ---- */
.mxp__totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.mxp__total {
  padding: 20px 22px;
  border: 1px solid #E4EFF0;
  border-radius: 14px;
  background: #F7FCFC;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mxp__tlabel {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C8A88;
}
.mxp__tvalue {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #0E6F76;
}

/* ---- panels ---- */
.mxp__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.mxp__panel {
  padding: 24px;
  border: 1px solid #E4EFF0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 8px 24px rgba(16,74,92,.05);
}
.mxp__ptitle {
  margin: 0 0 8px !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #04100F;
}
.mxp__pcopy {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3F5C5A;
}
.mxp__empty {
  padding: 26px 20px;
  border: 1px dashed #CFE0E1;
  border-radius: 12px;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FBFBD;
  background: #FAFDFD;
}
.mxp__note {
  margin-top: 20px;
  font-size: 13.5px;
  color: #6C8A88;
}

/* ---- signed out / no access ---- */
.mxp--gate {
  max-width: 520px;
  padding: 34px 32px;
  border: 1px solid #E4EFF0;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 10px 30px rgba(16,74,92,.06);
}
.mxp__gtitle {
  margin: 0 0 10px !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.mxp__gcopy { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: #3F5C5A; }
.mxp__gcta {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: #0E6F76;
  color: #FFFFFF !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.mxp__gcta:hover { background: #08535A; color: #FFFFFF !important; }

@media (max-width: 900px) {
  .mxp__totals { grid-template-columns: 1fr; }
  .mxp__panels { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mxp__who { font-size: 23px; }
  .mxp__bar { align-items: flex-start; }
}

/* ---- bar actions + staff switcher ---- */
.mxp__baractions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mxp__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mxp__switch label {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C8A88;
}
.mxp__switch select {
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid #DCEAEA;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  color: #04100F;
  max-width: 220px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236C8A88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}

/* ---- panels go full width once they hold rows ---- */
.mxp__panel--wide { grid-column: 1 / -1; }

/* ---- status pills ---- */
.mxp__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mxp__pill--good    { background: #E3F5EC; color: #1B7A4F; }
.mxp__pill--wait    { background: #FFF3DC; color: #9A6708; }
.mxp__pill--warn    { background: #FDE7E4; color: #B03A28; }
.mxp__pill--neutral { background: #EAF3F3; color: #3F5C5A; }
.mxp__pill--none    { background: #F2F6F6; color: #9FBFBD; }

/* ---- rows ---- */
.mxp__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.mxp__row {
  border: 1px solid #E4EFF0;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
}
.mxp__row[open] { border-color: #CFE6E7; background: #FBFEFE; }

.mxp__summary {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) 128px 22px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.mxp__row--flat .mxp__summary { cursor: default; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); }
.mxp__summary::-webkit-details-marker { display: none; }
.mxp__row:not(.mxp__row--flat) .mxp__summary:hover { background: #F7FCFC; }

.mxp__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 14.5px;
  color: #04100F;
}
.mxp__ck {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FBFBD;
}
.mxp__prod {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mxp__ref {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: #6C8A88;
}
.mxp__link { color: #0E6F76; font-size: 14px; text-decoration: underline; }

.mxp__chev {
  width: 22px;
  height: 22px;
  justify-self: end;
  background: #6C8A88;
  transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
}
.mxp__row[open] .mxp__chev { transform: rotate(180deg); }

/* ---- expanded destinations ---- */
.mxp__body {
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mxp__dest {
  padding: 16px 18px;
  border: 1px solid #E9F3F3;
  border-radius: 10px;
  background: #FFFFFF;
}
.mxp__desthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.mxp__destlabel {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.mxp__destaddr {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3F5C5A;
}
.mxp__track {
  margin: 0 0 12px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: #6C8A88;
}
.mxp__track a { color: #0E6F76; text-decoration: none; border-bottom: 1px solid rgba(14,111,118,.3); }
.mxp__track a:hover { border-bottom-color: #0E6F76; }

.mxp__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #F0F7F7;
}
.mxp__facts div { min-width: 0; }
.mxp__facts dt {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FBFBD;
  margin-bottom: 3px;
}
.mxp__facts dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: #04100F;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .mxp__summary,
  .mxp__row--flat .mxp__summary {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }
  .mxp__cell--name { grid-column: 1 / -1; }
  .mxp__chev { grid-column: 2; justify-self: end; }
}
@media (max-width: 600px) {
  .mxp__switch select { max-width: 160px; }
  .mxp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- signed-out screens: log in, forgotten password, set password ---- */
.mxp--auth {
  max-width: 460px;
  margin: 0 auto;
  padding: 36px 34px 32px;
  border: 1px solid #E4EFF0;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 10px 30px rgba(16,74,92,.06);
}
.mxp--auth .mxp__eyebrow { margin-bottom: 10px; }
.mxp--auth .mxp__gtitle { margin: 0 0 8px !important; }
.mxp--auth .mxp__gcopy { margin: 0 0 22px; }

.mxp__form { display: flex; flex-direction: column; gap: 16px; }
.mxp__field { display: flex; flex-direction: column; gap: 7px; }
.mxp__field > span {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C8A88;
}
.mxp__field input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #DCEAEA;
  border-radius: 11px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 15.5px;
  color: #04100F;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mxp__field input:focus {
  outline: none;
  border-color: #00636D;
  box-shadow: 0 0 0 3px rgba(0,99,109,.12);
}
.mxp__check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #3F5C5A;
  cursor: pointer;
}
.mxp__check input { width: 16px; height: 16px; accent-color: #00636D; }
.mxp__hint { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: #6C8A88; }

.mxp--auth .mxp__gcta { width: 100%; border: 0; cursor: pointer; }

.mxp__foot { margin: 20px 0 0; font-size: 14px; }
.mxp__foot a { color: #00636D; text-decoration: underline; text-underline-offset: 3px; }
.mxp__foot a:hover { color: #004E57; }

.mxp__msg {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.mxp__msg--bad { background: #FDE7E4; color: #8F2C1C; }
.mxp__msg--ok  { background: #E3F5EC; color: #14603E; }

@media (max-width: 600px) {
  .mxp--auth { padding: 28px 22px 26px; border-radius: 14px; }
}

/* ---- the shipment row gained a status column, so the track widens ---- */
.mxp__summary {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, .82fr)) 118px 118px 22px;
}
.mxp__row--flat .mxp__summary {
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
}

/* a sourcing note sits under its row rather than squeezing into a cell */
.mxp__note--row {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6C8A88;
}

@media (max-width: 900px) {
  .mxp__summary,
  .mxp__row--flat .mxp__summary {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }
  .mxp__cell--name { grid-column: 1 / -1; }
  .mxp__chev { grid-column: 2; justify-self: end; }
  .mxp__note--row { padding: 0 14px 14px; }
}

/* ---- the page gives the portal no container of its own ----
   The portal page uses the page-builder template, so Astra supplies no
   measure and no gutter: the dashboard was running edge to edge with the
   heading clipped against the header. It sets its own. */
.mxp:not(.mxp--auth) {
  max-width: 1200px;
  margin-inline: auto;
  padding: 56px 24px 88px;
}
.mxp--auth {
  margin-block: 84px 104px;
}

/* a little more air between the identity bar, the figures and the panels */
.mxp__totals { margin-top: 28px; }
.mxp__panels { gap: 22px; margin-top: 24px; }

@media (max-width: 900px) {
  .mxp:not(.mxp--auth) { padding: 44px 20px 68px; }
  .mxp--auth { margin-block: 56px 72px; }
}
@media (max-width: 600px) {
  .mxp:not(.mxp--auth) { padding: 32px 16px 56px; }
  .mxp--auth { margin-block: 40px 56px; margin-inline: 16px; }
  .mxp__totals { margin-top: 22px; }
  .mxp__panels { gap: 16px; margin-top: 20px; }
}