/* ==========================================================================
   MORSIX WAREHOUSE DEMO

   A working miniature of the Morsix admin: the warehouse dashboard and the
   orders list, with the sidebar switching between them.

   Written rather than ported, for two reasons. The admin at
   morsix.com/en/admin is behind a login, and the local checkout at
   C:\laragon\www\Morsix is an older build whose dashboard is a workspace card
   and a carousel, not the stat grid in the current app. Neither source has the
   screens this reproduces.

   The palette is not invented: it is sampled from the product's own theme at
   morsix.com/assets/css/main.css, where #18aee3, #25313c, #18527d and #103254
   are the four most-used colours in the file.

   Everything is namespaced .mrx-* and scoped under .mrx-demo.
   ========================================================================== */

.mrx-demo {
  --mrx-navy: #103254;
  --mrx-navy-2: #18527d;
  --mrx-cyan: #18aee3;
  --mrx-ink: #25313c;
  --mrx-body: #5a6774;
  --mrx-muted: #94a1ae;
  --mrx-line: #e6eaef;
  --mrx-line-2: #f1f4f7;
  --mrx-bg: #f7f9fb;
  --mrx-green: #16a34a;
  --mrx-amber: #f59e0b;
  --mrx-red: #ef4444;
  --mrx-violet: #8b5cf6;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr) 44px;
  grid-template-rows: 42px minmax(0, 1fr);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mrx-ink);
  background: var(--mrx-bg);
  text-align: left;
  overflow: hidden;
}
.mrx-demo *,
.mrx-demo *::before,
.mrx-demo *::after {
  box-sizing: border-box;
}
/* Only what responds gets a pointer, so the cursor never promises something
   the demo cannot do. */
.mrx-demo,
.mrx-demo :where(button) {
  cursor: default;
  font: inherit;
  color: inherit;
}
.mrx-demo :where(button) {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.mrx-demo [data-mrx-nav],
.mrx-demo [data-mrx-toggle],
.mrx-demo [data-mrx-tab] {
  cursor: pointer;
}

/* ---------------- sidebar ---------------- */
.mrx-side {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mrx-navy);
  color: rgba(255, 255, 255, 0.82);
}
.mrx-side__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
}
.mrx-side__brand img { height: 24px; width: auto; }
.mrx-side__brand b {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.mrx-side__brand small {
  display: block;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.mrx-ws {
  margin: 0 12px 12px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mrx-ws__dots { display: flex; gap: 3px; margin-bottom: 5px; }
.mrx-ws__dots i { width: 4px; height: 4px; border-radius: 50%; }
.mrx-ws__dots i:nth-child(1) { background: #fc6f58; }
.mrx-ws__dots i:nth-child(2) { background: #49c3e8; }
.mrx-ws__dots i:nth-child(3) { background: #ffd160; }
.mrx-ws__name { display: block; font-size: 11.5px; font-weight: 700; color: #fff; }
.mrx-ws__sub { display: block; font-size: 8.5px; color: rgba(255, 255, 255, 0.5); }

.mrx-side__label {
  padding: 0 15px 7px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.mrx-nav { flex: 1; min-height: 0; overflow: hidden; padding: 0 8px; }
.mrx-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.15s ease, color 0.15s ease;
}
.mrx-nav__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mrx-nav__item.is-on {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-weight: 600;
}
.mrx-nav__item svg { width: 13px; height: 13px; flex: none; }
.mrx-nav__chev { margin-left: auto; transition: transform 0.2s ease; }
.mrx-nav__item[aria-expanded="true"] .mrx-nav__chev { transform: rotate(180deg); }

/* Opens on its real height, which max-height cannot animate to. */
.mrx-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.mrx-nav__sub.is-open { grid-template-rows: 1fr; }
.mrx-nav__sub > div { overflow: hidden; }
.mrx-nav__subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 9px 5px 30px;
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}
.mrx-nav__subitem::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.mrx-nav__subitem:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.mrx-nav__subitem.is-on { color: #fff; font-weight: 600; }

.mrx-me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mrx-me__av {
  width: 23px;
  height: 23px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mrx-cyan);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.mrx-me__name { display: block; font-size: 10px; font-weight: 600; color: #fff; line-height: 1.2; }
.mrx-me__mail {
  display: block;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- top bar ---------------- */
.mrx-top {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--mrx-navy);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}
.mrx-top__search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.5);
}
.mrx-top__search svg { width: 12px; height: 12px; }
.mrx-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
}
.mrx-top b { color: #fff; font-weight: 600; }

/* ---------------- main ---------------- */
.mrx-main {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
}
.mrx-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.mrx-head h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.mrx-head p { margin: 1px 0 0; font-size: 10.5px; color: var(--mrx-muted); }
.mrx-head__spacer { flex: 1; }

.mrx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--mrx-line);
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  font-weight: 500;
  color: var(--mrx-body);
  white-space: nowrap;
}
.mrx-btn svg { width: 11px; height: 11px; }
.mrx-btn--primary {
  background: var(--mrx-cyan);
  border-color: var(--mrx-cyan);
  color: #fff;
  font-weight: 600;
}

/* ---------------- stat cards ---------------- */
.mrx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mrx-stat {
  background: #fff;
  border: 1px solid var(--mrx-line);
  border-radius: 8px;
  padding: 10px 12px 9px;
}
.mrx-stat__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mrx-body);
}
.mrx-stat__label i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--mrx-line);
  font-size: 7px;
  font-style: normal;
  line-height: 8px;
  text-align: center;
  color: var(--mrx-muted);
}
.mrx-stat__val {
  display: block;
  margin: 7px 0 5px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mrx-stat__foot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mrx-muted);
}
.mrx-stat__delta { margin-left: auto; font-weight: 700; letter-spacing: 0; }
.mrx-stat__delta.up { color: var(--mrx-green); }
.mrx-stat__delta.down { color: var(--mrx-red); }

/* ---------------- panels ---------------- */
.mrx-row {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.mrx-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrx-panel {
  background: #fff;
  border: 1px solid var(--mrx-line);
  border-radius: 8px;
  overflow: hidden;
}
.mrx-panel__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--mrx-line-2);
  font-size: 11.5px;
  font-weight: 700;
}
.mrx-panel__body { padding: 10px 12px; }
.mrx-panel__foot {
  padding: 6px 12px 9px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrx-muted);
}

/* the orders-per-day chart */
.mrx-chart { position: relative; height: 132px; }
.mrx-chart svg { width: 100%; height: 100%; overflow: visible; }
.mrx-chart__line {
  fill: none;
  stroke: var(--mrx-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: mrxDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrxDraw { to { stroke-dashoffset: 0; } }
.mrx-chart__area { fill: url(#mrxFade); opacity: 0; animation: mrxFadeIn 0.9s 0.6s ease forwards; }
@keyframes mrxFadeIn { to { opacity: 1; } }
.mrx-chart__grid { stroke: var(--mrx-line-2); stroke-width: 1; }
.mrx-chart__axis { font-size: 7.5px; fill: var(--mrx-muted); }

/* the status legend */
.mrx-legend { display: grid; gap: 7px; }
.mrx-legend__row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; }
.mrx-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mrx-legend__n { margin-left: auto; font-weight: 700; }

/* ---------------- tabs and table ---------------- */
.mrx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--mrx-line);
  border-radius: 8px;
}
.mrx-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--mrx-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.mrx-tab:hover { background: var(--mrx-line-2); }
.mrx-tab.is-on { background: var(--mrx-cyan); color: #fff; font-weight: 600; }
.mrx-tab__n {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--mrx-line-2);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--mrx-body);
}
.mrx-tab.is-on .mrx-tab__n { background: rgba(255, 255, 255, 0.25); color: #fff; }
.mrx-tabs--pay { margin-top: 8px; }
.mrx-tabs--pay .mrx-tab.is-on { background: var(--mrx-navy-2); }

.mrx-tblwrap {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--mrx-line);
  border-radius: 8px;
  overflow: hidden;
}
.mrx-tbl { width: 100%; border-collapse: collapse; }
.mrx-tbl th {
  text-align: left;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 600;
  color: var(--mrx-muted);
  background: #fbfcfd;
  border-bottom: 1px solid var(--mrx-line);
  white-space: nowrap;
}
.mrx-tbl td {
  padding: 7px 9px;
  font-size: 10px;
  border-bottom: 1px solid var(--mrx-line-2);
  white-space: nowrap;
}
.mrx-tbl tbody tr:last-child td { border-bottom: 0; }
.mrx-tbl tbody tr:hover { background: #fbfcfd; }
.mrx-ref { color: var(--mrx-navy-2); font-weight: 600; }

.mrx-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 600;
}
.mrx-foot {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 9.5px;
  color: var(--mrx-muted);
  border-top: 1px solid var(--mrx-line-2);
}

/* ---------------- platform rail ----------------
   The real one, from morsix.com. Rules and colours are the product's own
   (assets/css/main.css, .platform-sidebar-*), reduced to what a 12-item rail
   needs and renamed to the demo's prefix.

   Dark theme, because that is what the app shows: --platform-sidebar-bg is
   #FFFFFF under [data-theme="light"] and #173151 under [data-theme="dark"],
   and the admin runs the dark one. Each item carries its own hover colour,
   also lifted from that file, which is why they are listed out rather than
   sharing a single highlight. */
.mrx-rail {
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #173151;
  box-shadow: 0 0 0 1px #00000005;
  overflow: visible;
}
.mrx-rail__item {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  flex: none;
  border-bottom: 1px solid rgba(164, 178, 210, 0.193);
  background: transparent;
  transition: background 0.18s ease;
}
.mrx-rail__item:hover {
  background: var(--mrx-hover-bg, rgba(255, 255, 255, 0.08));
}
/* The one you are already in: held at its hover colour and not a link. */
.mrx-rail__item.is-current {
  background: var(--mrx-hover-bg, rgba(255, 255, 255, 0.08));
  cursor: default;
}
.mrx-rail__wrap {
  position: relative;
  width: 18px;
  height: 18px;
}
.mrx-rail__wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Two marks per platform, crossfading: the product ships a separate hover
   artwork rather than recolouring the default one. */
.mrx-rail__img--hover { opacity: 0; transform: scale(0.96); }
.mrx-rail__item:hover .mrx-rail__img--default { opacity: 0; }
.mrx-rail__item:hover .mrx-rail__img--hover { opacity: 1; transform: scale(1); }
.mrx-rail__item.is-current .mrx-rail__img--default { opacity: 1; transform: scale(1); }

/* Their tooltip, which is why the rail is overflow: visible. */
.mrx-rail__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
  padding: 3px 8px;
  border-radius: 5px;
  background: #1e1e1e;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 3;
}
.mrx-rail__tip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: #1e1e1e;
}
.mrx-rail__item:hover .mrx-rail__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---------------- narrow ---------------- */
@media (max-width: 900px) {
  .mrx-demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr);
    font-size: 11px;
  }
  .mrx-side,
  .mrx-rail { display: none; }
  .mrx-top { grid-column: 1 / -1; }
  .mrx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrx-row,
  .mrx-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* The mockup is absolutely positioned, so the laptop screen has nothing to
   size to. The pane is what holds it open. */
.kore-demo__pane[data-demo-pane="morsix"] { min-height: 780px; }
@media (max-width: 900px) {
  .kore-demo__pane[data-demo-pane="morsix"] { min-height: 620px; }
}

/* ==========================================================================
   THE DATE RANGE

   The one control on the dashboard, and the one that moves everything under
   it. It replaced a "This month" button that looked like a control and was
   not, which is the thing that made the screen read as a picture.
   ========================================================================== */
.mrx-range {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--mrx-line);
  border-radius: 7px;
  background: #fff;
}
.mrx-range > svg { width: 13px; height: 13px; margin-right: 4px; color: var(--mrx-muted); }
.mrx-range__btn {
  padding: 4px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--mrx-body);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.mrx-range__btn:hover { background: var(--mrx-tint, #eef4f9); color: var(--mrx-ink); }
.mrx-range__btn.is-on {
  background: var(--mrx-blue, #18aee3);
  color: #fff;
}


/* The dashboard head is a title and two controls on one line, which is more
   than a phone window holds: the date range was landing past the right edge.
   Wrapping it puts the controls under the title instead. */
@media (max-width: 900px) {
  .mrx-head {
    flex-wrap: wrap;
  }
  .mrx-head__spacer {
    display: none;
  }
  .mrx-head > div:first-child {
    flex: 1 0 100%;
  }
}

/* The status strip across the top is four figures on one line. It fits the
   desktop canvas and runs off the edge of a phone window, and none of it is
   what the screen is about. */
@media (max-width: 900px) {
  .mrx-top__right {
    display: none;
  }
}