/* ==========================================================================
   ONLINE ORDERING DEMO (mydevorders)

   A working miniature of the KORE.CO order app, with three live screens:
   the order board, an order's details, and the kitchen dashboard.

   Written rather than ported. mydevorders is a Flutter app
   (C:\laragon\www\mydev_order_app, "A KORE.CO Order App", v1.3.5+38), so
   there is no markup or stylesheet to lift. Everything visible here comes
   out of its source:

     lib/core/constants/colors.dart          the palette
     lib/core/services/mixins.dart:134       orderStatusColor, the status hues
     lib/features/orders/widgets/list/item/  the order card, part by part
     lib/features/orders/widgets/main/       the status tabs and filter bar
     lib/features/orders/widgets/details/    the details columns and bars
     lib/features/dashboard/widgets/kitchen/ the KPI cards and Dash palette
     lib/features/main/controllers/main.dart the nine sidebar entries

   It fills the frame rather than sitting in a device mockup: main.dart locks
   the app to landscape and this is the screen a counter tablet shows all day.

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

.mdv-demo {
  /* colors.dart: lightColorScheme plus the CustomColor statics. */
  --mdv-scaffold: #f5f3f3;
  --mdv-surface: #ffffff;
  --mdv-ink: #1e1e1e;
  --mdv-muted: #635f5f;
  --mdv-line: #eceaea;
  --mdv-hair: rgba(200, 206, 200, 0.63);
  --mdv-rail: #222121;
  --mdv-info: #1b74e4;
  --mdv-soft: #edf4fc;
  --mdv-note-bg: #fff4d6;
  --mdv-danger: #ff1100;
  --mdv-danger-soft: #f9d0ce;
  --mdv-success: #25a029;

  /* mixins.dart orderStatusColor: the Material hues, one per status. */
  --mdv-s0: #f44336;   /* declined  */
  --mdv-s1: #2196f3;   /* received  */
  --mdv-s2: #ff9800;   /* preparing */
  --mdv-s3: #009688;   /* ready     */
  --mdv-s4: #9c27b0;   /* picked up */
  --mdv-s5: #4caf50;   /* completed */
  --mdv-s6: #f44336;   /* canceled  */

  /* kitchen/style.dart: the Dash palette. */
  --mdv-accent: #3b6ff6;
  --mdv-navy: #16205a;
  --mdv-green: #16b364;
  --mdv-red: #f0384b;
  --mdv-amber: #d69528;
  --mdv-violet: #7e6be0;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mdv-ink);
  background: var(--mdv-scaffold);
  text-align: left;
  overflow: hidden;
}
.mdv-demo *,
.mdv-demo *::before,
.mdv-demo *::after { box-sizing: border-box; }
.mdv-demo,
.mdv-demo :where(button) { cursor: default; font: inherit; color: inherit; }
.mdv-demo :where(button) { background: none; border: 0; padding: 0; text-align: left; }
.mdv-demo [data-mdv] { cursor: pointer; }

/* ---------------- the icon rail ---------------- */
.mdv-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0 10px;
  background: var(--mdv-rail);
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}
.mdv-rail__logo { width: 26px; height: 26px; margin-bottom: 12px; flex: none; }
.mdv-rail__item {
  width: 40px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  transition: background 0.15s ease, color 0.15s ease;
}
.mdv-rail__item svg { width: 18px; height: 18px; }
.mdv-rail__item:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
/* sidebar.dart: selectorColor is CustomColor.info. */
.mdv-rail__item.is-on { background: var(--mdv-info); color: #fff; }
.mdv-rail__spacer { flex: 1; }
.mdv-rail__item--out { color: #ff5a4d; }

/* ---------------- the screen beside it ---------------- */
.mdv-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* main.dart draws the body on a rounded white sheet inset from the rail. */
  margin: 8px 8px 8px 0;
  border-radius: 14px;
  background: var(--mdv-scaffold);
}

/* ---------------- page header ---------------- */
.mdv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 16px 10px;
}
.mdv-head__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-head__spacer { flex: 1; }
.mdv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  padding: 7px 12px;
  border: 1px solid var(--mdv-line);
  border-radius: 9px;
  background: var(--mdv-surface);
  color: #9a9494;
  font-size: 11.5px;
}
.mdv-search svg { width: 14px; height: 14px; }
.mdv-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--mdv-line);
  border-radius: 9px;
  background: var(--mdv-surface);
  font-size: 11.5px;
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.mdv-hbtn:hover { border-color: #cfdcea; }
.mdv-hbtn svg { width: 13px; height: 13px; color: var(--mdv-muted); }
.mdv-hbtn--dark { background: var(--mdv-ink); border-color: var(--mdv-ink); color: #fff; }
.mdv-hbtn--dark svg { color: #fff; }

/* ---------------- status tabs ---------------- */
.mdv-tabs {
  display: flex;
  gap: 6px;
  flex: none;
  padding: 0 16px 10px;
  flex-wrap: wrap;
}
.mdv-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--mdv-line);
  background: var(--mdv-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mdv-muted);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mdv-tab:hover { color: var(--mdv-ink); border-color: #d8dfe7; }
.mdv-tab__n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--mdv-line);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  color: var(--mdv-muted);
}
/* The active tab takes the colour of the status it filters to. */
.mdv-tab.is-on {
  color: #fff;
  background: var(--mdv-tint, var(--mdv-ink));
  border-color: var(--mdv-tint, var(--mdv-ink));
}
.mdv-tab.is-on .mdv-tab__n { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---------------- the board ---------------- */
.mdv-board {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 14px;
}
.mdv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: 100%;
  align-content: start;
  overflow: hidden;
}
.mdv-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 46px 0;
  color: var(--mdv-muted);
  font-size: 12.5px;
}

/* ---------------- the order card ---------------- */
.mdv-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 11px;
  background: var(--mdv-surface);
  border: 1px solid var(--mdv-line);
  overflow: hidden;
}
/* banner.dart: a gradient from the status colour to the same at 70%. */
.mdv-card__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 13px;
  color: #fff;
  background: linear-gradient(90deg, var(--mdv-tint), color-mix(in srgb, var(--mdv-tint) 70%, transparent));
  position: relative;
}
/* overdue_alert.dart: the hazard stripe an overdue prep run wears. */
.mdv-card__banner.is-late::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg, #1e1e1e 0 6px, var(--mdv-s2) 6px 12px
  );
}
.mdv-card__who { flex: 1; min-width: 0; }
.mdv-card__status { display: block; font-size: 10.5px; }
.mdv-card__name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdv-card__right { text-align: right; flex: none; }
.mdv-card__num { display: block; font-size: 12px; font-weight: 700; }
.mdv-card__pay { display: block; font-size: 10px; opacity: 0.85; }
.mdv-card__inlbl { display: block; font-size: 10px; opacity: 0.85; }
.mdv-card__in { display: block; font-size: 13px; font-weight: 800; }

.mdv-card__info { flex: none; padding: 9px 13px; display: grid; gap: 3px; }
.mdv-info-row { display: flex; align-items: baseline; gap: 10px; font-size: 11px; }
.mdv-info-row b { font-weight: 600; color: var(--mdv-ink); }
.mdv-info-row span { margin-left: auto; color: var(--mdv-muted); text-align: right; }

.mdv-card__items { flex: 1; min-height: 0; padding: 0 13px; overflow: hidden; }
.mdv-items__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--mdv-line);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mdv-muted);
}
.mdv-items__count { font-weight: 600; letter-spacing: 0; text-transform: none; }
.mdv-items__ready { margin-left: auto; letter-spacing: 0; text-transform: none; color: var(--mdv-s3); }
.mdv-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--mdv-line);
  font-size: 12px;
}
.mdv-item:last-child { border-bottom: 0; }
/* qty_pill.dart */
.mdv-qty {
  flex: none;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--mdv-line);
  border-radius: 6px;
  background: #fafafa;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: var(--mdv-muted);
}
.mdv-item__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdv-item__price { flex: none; font-weight: 700; }

/* step_button.dart: the swipe pill, accented with the NEXT status colour. */
.mdv-step {
  display: flex;
  align-items: center;
  flex: none;
  margin: 10px 13px;
  border-radius: 9px;
  background: var(--mdv-next);
  color: #fff;
  overflow: hidden;
}
.mdv-step__thumb {
  flex: none;
  width: 30px;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: 3px;
  border-radius: 7px;
  background: var(--mdv-surface);
  color: var(--mdv-next);
}
.mdv-step__thumb svg { width: 13px; height: 13px; }
.mdv-step__label {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mdv-step__chev { flex: none; padding-right: 12px; opacity: 0.6; font-weight: 800; letter-spacing: -2px; }

.mdv-card__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: none;
  border-top: 1px solid var(--mdv-line);
}
.mdv-card__foot button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  font-size: 11.5px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.mdv-card__foot button + button { border-left: 1px solid var(--mdv-line); }
.mdv-card__foot button:hover { background: #fafafa; }
.mdv-card__foot svg { width: 13px; height: 13px; color: var(--mdv-muted); }

/* ---------------- order details ---------------- */
.mdv-dtl { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mdv-dtl__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mdv-line);
  background: var(--mdv-surface);
}
.mdv-dtl__num { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.mdv-dtl__chip {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--mdv-tint);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.mdv-dtl__cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 12px;
  padding: 12px 16px;
  overflow: hidden;
}
.mdv-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--mdv-line);
  border-radius: 11px;
  background: var(--mdv-surface);
  overflow: hidden;
}
.mdv-panel + .mdv-panel { margin-top: 10px; }
.mdv-panel__t {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mdv-muted);
  margin-bottom: 8px;
}
.mdv-dtl__left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mdv-rows { display: grid; gap: 6px; }
.mdv-row { display: flex; align-items: baseline; gap: 12px; font-size: 11.5px; }
.mdv-row > span:first-child { color: var(--mdv-muted); }
.mdv-row > span:last-child { margin-left: auto; text-align: right; font-weight: 600; }
.mdv-row__pill {
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--mdv-tint);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.mdv-note {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--mdv-note-bg);
  font-size: 11px;
  line-height: 1.5;
  color: #4a3f1c;
}

/* the order activity trail */
.mdv-acts { display: grid; gap: 9px; }
.mdv-act { display: flex; align-items: flex-start; gap: 9px; position: relative; }
.mdv-act__dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; }
.mdv-act__body { min-width: 0; }
.mdv-act__d { display: block; font-size: 11.5px; font-weight: 600; }
.mdv-act__tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--mdv-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mdv-info);
  vertical-align: 1px;
}
.mdv-act__m { display: block; font-size: 10px; color: var(--mdv-muted); }

.mdv-lines { flex: 1; min-height: 0; overflow: hidden; }
.mdv-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mdv-line);
}
.mdv-line__q { flex: none; font-size: 12px; font-weight: 700; color: var(--mdv-muted); min-width: 22px; }
.mdv-line__body { flex: 1; min-width: 0; }
.mdv-line__t { display: block; font-size: 12.5px; font-weight: 600; }
.mdv-line__opt { display: block; font-size: 10.5px; color: var(--mdv-muted); }
.mdv-line__cmt { display: block; margin-top: 3px; font-size: 10.5px; font-style: italic; color: #7a6a34; }
.mdv-line__p { flex: none; font-size: 12.5px; font-weight: 700; }

.mdv-sum { flex: none; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--mdv-line); display: grid; gap: 4px; }
.mdv-sum__r { display: flex; font-size: 11.5px; color: var(--mdv-muted); }
.mdv-sum__r span:last-child { margin-left: auto; color: var(--mdv-ink); font-weight: 600; }
.mdv-sum__r--total { padding-top: 6px; border-top: 1px solid var(--mdv-line); font-size: 14px; font-weight: 800; color: var(--mdv-ink); }
.mdv-sum__r--total span:last-child { font-weight: 800; }

.mdv-dtl__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 16px;
  border-top: 1px solid var(--mdv-line);
  background: var(--mdv-surface);
}
.mdv-dtl__foot .mdv-hbtn--danger {
  background: var(--mdv-danger-soft);
  border-color: var(--mdv-danger-soft);
  color: #b31000;
}

/* ---------------- kitchen dashboard ---------------- */
.mdv-dash { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 16px 14px; }
.mdv-presets { display: flex; gap: 6px; flex: none; margin-bottom: 10px; flex-wrap: wrap; }
.mdv-preset {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--mdv-line);
  background: var(--mdv-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mdv-muted);
  transition: all 0.15s ease;
}
.mdv-preset:hover { color: var(--mdv-ink); border-color: #d8dfe7; }
.mdv-preset.is-on { background: var(--mdv-ink); border-color: var(--mdv-ink); color: #fff; }

.mdv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: none; margin-bottom: 10px; }
.mdv-kpi {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--mdv-line);
  border-radius: 11px;
  background: var(--mdv-surface);
}
.mdv-kpi__badge {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--mdv-g1), var(--mdv-g2));
  color: #fff;
  box-shadow: 0 8px 14px -8px var(--mdv-g2);
}
.mdv-kpi__badge svg { width: 17px; height: 17px; }
.mdv-kpi__body { min-width: 0; }
.mdv-kpi__label { display: block; font-size: 10.5px; color: var(--mdv-muted); }
.mdv-kpi__value { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.mdv-kpi__foot { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--mdv-muted); }
.mdv-kpi__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mdv-green); }

.mdv-dash__cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}
.mdv-cardp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--mdv-line);
  border-radius: 11px;
  background: var(--mdv-surface);
  overflow: hidden;
}
.mdv-cardp + .mdv-cardp { margin-top: 10px; }
.mdv-cardp__head { display: flex; align-items: center; gap: 8px; flex: none; margin-bottom: 9px; }
.mdv-cardp__t { font-size: 12.5px; font-weight: 700; }
.mdv-cardp__side { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--mdv-muted); }
.mdv-trend { font-size: 11px; font-weight: 700; color: var(--mdv-green); }
.mdv-trend--down { color: var(--mdv-red); }

.mdv-chart { flex: 1; min-height: 0; }
.mdv-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mdv-chart__grid { stroke: var(--mdv-line); stroke-width: 1; }
.mdv-chart__area { fill: url(#mdvFade); }
.mdv-chart__line { fill: none; stroke: var(--mdv-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mdv-chart__dot { fill: #fff; stroke: var(--mdv-accent); stroke-width: 2; }
.mdv-chart__axis { font-size: 8.5px; fill: var(--mdv-muted); }

.mdv-dash__left,
.mdv-dash__right { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mdv-cardp--flat { flex: none; }

/* the Reviews and Fulfilment table */
.mdv-mx { display: grid; gap: 6px; }
.mdv-mx__cap,
.mdv-mx__r { display: grid; grid-template-columns: 108px 40px minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.mdv-mx__cap span {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--mdv-muted);
}
.mdv-mx__cap span:last-child { text-align: right; }
.mdv-mx__n { font-size: 11px; font-weight: 600; }
.mdv-mx__n b { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--mdv-c); }
.mdv-mx__c { font-size: 10px; font-weight: 500; color: var(--mdv-muted); }
.mdv-mx__bar { height: 5px; border-radius: 99px; background: var(--mdv-line); overflow: hidden; }
.mdv-mx__bar i { display: block; height: 100%; border-radius: 99px; background: var(--mdv-c); }
.mdv-mx__v { font-size: 12px; font-weight: 700; text-align: right; }

.mdv-lrows { display: grid; gap: 7px; }
.mdv-lrow { display: flex; align-items: center; gap: 10px; }
.mdv-lrow__icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mdv-c) 12%, transparent);
  color: var(--mdv-c);
}
.mdv-lrow__icon svg { width: 14px; height: 14px; }
.mdv-lrow__t { display: block; font-size: 11.5px; font-weight: 600; }
.mdv-lrow__s { display: block; font-size: 10px; color: var(--mdv-muted); }
.mdv-lrow__v { margin-left: auto; font-size: 12.5px; font-weight: 700; }

.mdv-rating { display: flex; align-items: center; gap: 12px; }
.mdv-rating__n { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mdv-rating__stars { color: var(--mdv-amber); font-size: 12px; letter-spacing: 1px; }
.mdv-rating__s { display: block; font-size: 10.5px; color: var(--mdv-muted); }
.mdv-srcs { display: grid; gap: 6px; margin-top: 10px; }
.mdv-src { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.mdv-src__bar { flex: 1; height: 5px; border-radius: 99px; background: var(--mdv-line); overflow: hidden; }
.mdv-src__bar i { display: block; height: 100%; border-radius: 99px; background: var(--mdv-accent); }
.mdv-src__n { flex: none; min-width: 58px; font-weight: 600; }
.mdv-src__v { flex: none; color: var(--mdv-muted); }

/* ---------------- narrow ---------------- */
/* The two-column screens keep both columns: on details the left is the
   order and the right is what was ordered, and hiding either guts the
   screen. Only the board drops to two cards across. */
@media (max-width: 1100px) {
  .mdv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Fewer columns means more rows, and rows sharing a fixed height would
       squash every card to a sliver. Let them keep their own height and let
       the board clip the overflow, the way a scrolling board does. */
    height: auto;
    grid-auto-rows: max-content;
  }
  .mdv-dtl__cols, .mdv-dash__cols { gap: 9px; }
  .mdv-mx__cap, .mdv-mx__r { grid-template-columns: 92px 34px minmax(0, 1fr) 44px; gap: 7px; }
}
@media (max-width: 900px) {
  .mdv-demo { grid-template-columns: 46px minmax(0, 1fr); font-size: 11px; }
  .mdv-rail__item { width: 34px; height: 32px; }
  .mdv-rail__item svg { width: 15px; height: 15px; }
  .mdv-grid { grid-template-columns: minmax(0, 1fr); height: auto; grid-auto-rows: max-content; }
  .mdv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdv-head { padding: 10px 11px 8px; }
  .mdv-head__title { font-size: 16px; }
  .mdv-search, .mdv-hbtn { display: none; }
  .mdv-tabs, .mdv-board, .mdv-dash { padding-left: 11px; padding-right: 11px; }
  .mdv-dtl__cols { padding: 10px 11px; }
}

/* 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="ordering"] { min-height: 760px; }
@media (max-width: 900px) {
  .kore-demo__pane[data-demo-pane="ordering"] { min-height: 620px; }
}