/* App-specific styles for Mehali Orders. Tokens only — no raw colours or off-scale spacing. */
.mu-root [hidden] { display: none !important; }
/* the Mehali top band: solid accent, white text, same on every app */
.mu-nav { background: var(--mu-accent); border-bottom: 0; color: var(--mu-text-on-accent); }
.mu-nav .mu-nav-title, .mu-nav .mu-footnote, .mu-nav .mu-secondary { color: var(--mu-text-on-accent); }
.mu-nav .mu-btn { background: var(--mu-bg-elevated); color: var(--mu-accent); border-color: transparent; }
.mu-nav .mu-btn:hover { background: var(--mu-bg-inset); }
.mu-nav .mu-badge { background: var(--mu-bg-elevated); color: var(--mu-accent); }
.mk-brand { color: var(--mu-text-on-accent); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--mu-space-3); }
/* the Mehali wordmark, drawn white out of the band exactly as in GST Desk */
.mk-brand-mark { display: block; width: 116px; height: 29px; background: var(--mu-text-on-accent);
  -webkit-mask: url("logo-mark.png") no-repeat center / contain; mask: url("logo-mark.png") no-repeat center / contain; }
.mk-nav-divider { width: var(--mu-hairline); height: 24px; background: var(--mu-text-on-accent); opacity: 0.5; flex: none; }
.mk-login-mark { display: block; width: 132px; height: 33px; background: var(--mu-accent);
  -webkit-mask: url("logo-mark.png") no-repeat left / contain; mask: url("logo-mark.png") no-repeat left / contain; }
.mu-nav .mu-nav-title { font-size: var(--mu-size-headline); }
.mk-role-chip { white-space: nowrap; }
.mk-party { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; font-weight: var(--mu-weight-regular); }
/* the Setup / Menu button and its dropdown */
.mk-menu-wrap { position: relative; }
.mk-menu-btn { display: inline-flex; align-items: center; gap: var(--mu-space-2); }
.mk-burger { font-size: 15px; line-height: 1; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mu-red); display: inline-block; margin-left: 2px; }
.mk-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--mu-bg-elevated); color: var(--mu-text);
  border: var(--mu-hairline) solid var(--mu-border); border-radius: var(--mu-radius-lg); box-shadow: var(--mu-shadow-popover);
  padding: var(--mu-space-2); z-index: 60; display: flex; flex-direction: column; }
.mk-menu-head { padding: var(--mu-space-2) var(--mu-space-3); display: flex; flex-direction: column; }
.mk-menu .mu-divider { margin: var(--mu-space-2) 0; }
.mk-menu-item { display: flex; align-items: center; gap: var(--mu-space-2); padding: var(--mu-space-2) var(--mu-space-3); border-radius: var(--mu-radius-md);
  color: var(--mu-text); text-decoration: none; font-size: var(--mu-size-subhead); }
.mk-menu-item:hover, .mk-menu-item:focus-visible { background: var(--mu-bg-inset); outline: none; }
.mk-tabbar {
  position: sticky; top: 48px; z-index: 40;
  background: var(--mu-bg-grouped);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.mk-tabbar .mu-tabs { border-bottom: 0; padding-inline: var(--mu-gutter); min-width: max-content; }
.mk-tabbar .mu-tab { text-decoration: none; display: inline-flex; align-items: center; }
.mk-tab-alert { margin-left: var(--mu-space-1); height: 18px; padding-inline: var(--mu-space-2); }
.mk-page { padding-block: var(--mu-space-8); }
/* team trial strip */
.mk-trial { display: flex; flex-wrap: wrap; gap: var(--mu-space-3); align-items: center; justify-content: center;
  padding: var(--mu-space-2) var(--mu-gutter); font-size: var(--mu-size-footnote); color: var(--mu-text);
  background: color-mix(in srgb, var(--mu-orange) 16%, var(--mu-bg)); border-bottom: var(--mu-hairline) solid var(--mu-separator); }
.mk-trial-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mu-space-4); }
.mk-trial-role { display: flex; flex-direction: column; gap: var(--mu-space-2); padding: var(--mu-space-5); text-decoration: none; color: inherit; }
.mk-trial-role:hover { border-color: var(--mu-accent); }
.mk-actions { display: flex; flex-wrap: wrap; gap: var(--mu-space-3); justify-content: flex-end; align-items: center; }
.mk-row-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: var(--mu-space-3); width: 100%; }
.mk-list-sub { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.mk-alert { border-color: var(--mu-accent); background: var(--mu-accent-subtle); }
.mk-error { border-color: var(--mu-red); }
.mk-trail { display: flex; flex-direction: column; gap: var(--mu-space-2); }
.mk-trail-step { display: flex; align-items: baseline; gap: var(--mu-space-3); font-size: var(--mu-size-subhead); flex-wrap: wrap; }
.mk-trail-step .mu-badge { flex: none; min-width: 120px; justify-content: center; }
.mk-drop { border: 2px dashed var(--mu-border); border-radius: var(--mu-radius-lg); padding: var(--mu-space-6) var(--mu-space-4); text-align: center; }
.mk-fit td, .mk-fit th { white-space: normal; padding-inline: var(--mu-space-2); }
.mk-fit .mu-badge { white-space: nowrap; }
.mk-toast-auto { animation: mu-rise var(--mu-dur) var(--mu-ease-out); }
.mk-login { min-height: calc(100vh - 48px); display: flex; align-items: center; justify-content: center; padding: var(--mu-space-6); }
.mk-login .mu-card { width: 100%; max-width: 400px; }

/* order lines: fixed columns so the entry boxes sit exactly under the headings */
.mk-lines { table-layout: fixed; width: 100%; }
/* column widths follow what the entry boxes need: selects get room for their longest word plus the chevron */
.mk-c-quality { width: 15%; } .mk-c-gsm { width: 7%; } .mk-c-size { width: 17%; } .mk-c-grain { width: 8%; }
.mk-c-pack { width: 11%; } .mk-c-reel { width: 15%; } .mk-c-kg { width: 8%; } .mk-c-remark { width: auto; } .mk-c-act { width: 140px; }
.mk-lines td, .mk-lines th { padding-inline: calc(var(--mu-space-2) * 2); overflow-wrap: anywhere; }
.mk-lines tr.mk-entry td { padding-inline: var(--mu-space-2); }
.mk-lines .mk-act, .mk-lines th:last-child { padding-inline: var(--mu-space-2); }
.mk-lines td { white-space: normal; vertical-align: top; }
.mk-lines .mk-act { text-align: right; white-space: nowrap; }
.mk-lines .mk-remark-m { display: none; }
.mk-lines tfoot td { font-weight: var(--mu-weight-semibold); border-top: var(--mu-hairline) solid var(--mu-separator); }
.mk-lines .mk-del { color: var(--mu-red); background: transparent; border: 0; cursor: pointer; padding: var(--mu-space-1); display: inline-flex; align-items: center; border-radius: var(--mu-radius-sm); }
.mk-lines .mk-del:hover, .mk-lines .mk-del:focus-visible { background: var(--mu-bg-inset); outline: none; }
.mk-lines td:last-child { text-align: right; white-space: nowrap; }

.mk-lines .mk-remark { font-size: var(--mu-size-caption); color: var(--mu-text-secondary); display: block; }

/* the entry row: a real table row, so every box is under its heading */
.mk-lines tr.mk-entry td { background: var(--mu-bg-inset); padding-block: var(--mu-space-2); vertical-align: middle; }
.mk-entry .mu-input, .mk-entry .mu-select { height: var(--mu-control-md); font-size: 14px; padding-inline: var(--mu-space-2); width: 100%; max-width: none; min-width: 0; }
.mk-entry .mu-select { padding-right: 26px; background-position: right 8px center; text-overflow: ellipsis; }
.mk-entry .mu-input { text-align: right; }
.mk-entry .mk-remark-in { text-align: left; }
.mk-entry .mk-add { height: var(--mu-control-md); padding-inline: var(--mu-space-3); white-space: nowrap; }
.mk-entry .mk-grain { width: 100%; height: var(--mu-control-md); font-size: 14px; justify-content: center; }
.mk-entry .mk-grain:disabled { opacity: 0.5; }

.mk-entry .mk-clear { color: var(--mu-red); margin-left: var(--mu-space-1); }
.mk-entry .mk-entry-actions { display: flex; align-items: center; justify-content: flex-end; }
/* New Order header: one row on a desktop, stacked on a phone */
.mk-order-head { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.6fr) minmax(140px, 0.7fr); gap: var(--mu-space-4); align-items: start; padding-block: var(--mu-space-4); }
.mk-order-head .mu-field { min-width: 0; }
@media (max-width: 900px) { .mk-order-head { grid-template-columns: 1fr; } }
.mk-size-entry { display: flex; align-items: center; gap: var(--mu-space-1); }
.mk-entry .mk-size-entry .mu-input { flex: 1 1 56px; min-width: 52px; width: auto; }
.mk-reel-entry { display: flex; align-items: center; gap: var(--mu-space-1); }
.mk-entry .mk-reel-entry .mu-input { flex: 0 0 62px; width: 62px; min-width: 0; }
.mk-entry .mk-reel-entry .mu-select { flex: 1 1 80px; width: auto; min-width: 80px; }
/* production plan */
.mu-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--mu-space-3); }
.mk-pick .mu-input { height: var(--mu-control-md); font-size: var(--mu-size-footnote); }
.mk-pick td { vertical-align: top; }
.mu-segmented label.mu-segment { cursor: pointer; }
.mk-entry-actions { display: flex; gap: var(--mu-space-1); align-items: center; margin-left: auto; }
.mk-kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--mu-space-1) var(--mu-space-3); font-size: var(--mu-size-subhead); }
.mk-kv dt { color: var(--mu-text-secondary); }
.mk-kv dd { margin: 0; }
.mk-reason { display: none; }
.mk-reason.is-open { display: flex; }
/* tick-box multi-select used by the Excel filters in My Business */
.mk-multi { position: relative; }
.mk-multi-sum { list-style: none; cursor: pointer; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-multi-sum::-webkit-details-marker { display: none; }
.mk-multi-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow: auto;
  background: var(--mu-bg-elevated); border: var(--mu-hairline) solid var(--mu-border); border-radius: var(--mu-radius-md); box-shadow: var(--mu-shadow-lg); padding: var(--mu-space-2); display: flex; flex-direction: column; gap: var(--mu-space-1); }
.mk-multi-item { font-size: var(--mu-size-subhead); padding: var(--mu-space-1) var(--mu-space-2); border-radius: var(--mu-radius-sm); white-space: nowrap; }
.mk-multi-item:hover { background: var(--mu-bg-inset); }
.mk-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--mu-space-3); align-items: end; }
.mk-stat-delta { font-size: var(--mu-size-footnote); }
@media (max-width: 734px) {
  .mk-role-chip { display: none; }
  /* phones: no Remark column (remark shows under the quality); the entry boxes stack */
  .mk-lines th.mk-remark-col, .mk-lines tbody tr:not(.mk-entry) td.mk-remark-col { display: none; }
  .mk-lines .mk-remark-m { display: block; }
  .mk-lines tr.mk-entry { display: block; }
  .mk-lines tr.mk-entry td { display: block; width: auto; padding: var(--mu-space-1) var(--mu-space-2); }
  .mk-lines tr.mk-entry .mk-entry-actions { justify-content: flex-start; padding-bottom: var(--mu-space-2); }
  .mu-nav { gap: var(--mu-space-2); }
  .mk-kv { grid-template-columns: 1fr; }
  .mk-kv dt { margin-top: var(--mu-space-2); }
}
@media print {
  .mu-nav, .mk-tabbar, .mk-actions, .mu-toast-region { display: none !important; }
}

/* masters: Apple-style switch, red when off and green when on */
.mk-switch-red input:not(:checked) + .mu-switch-track { background: var(--mu-red); }
.mk-switch-red input:checked + .mu-switch-track { background: var(--mu-green); }
.mk-confirm { display: none; }
.mk-confirm.is-open { display: flex; }