/* ===========================================================================
   MANIFEST WORKFLOW

   Styles for the guided manifest upload only. Nothing here redefines an
   existing rule: every selector is new, so styles.css stays as it was and the
   screens that were already working cannot shift. Colours and spacing come from
   the variables styles.css already publishes, so this matches the rest of the
   portal rather than copying its values.
   =========================================================================== */

/* --- sidebar flyout ------------------------------------------------------ */

/* The group takes the grid cell the Uploads link used to sit in, so the
   sidebar's spacing is unchanged; the link inside still fills it. */
.mw-nav-group { position: relative; }

/* The sidebar scrolls, and a scrolling box clips whatever tries to leave it.
   Rather than change that rule, the flyout is moved onto the page and placed
   against the Uploads link by hand. */
.mw-flyout {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 212px;
  padding: 7px;
  background: #241f1d;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* Opened by hover, by keyboard focus and by a tap, all through .is-open. */
.mw-flyout.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* A bridge across the gap, so the flyout does not vanish on the way to it. */
.mw-flyout::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 12px;
  height: 100%;
}

.mw-subitem {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 12px;
  color: #aaa29a;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9px;
  transition: color .18s ease, background .18s ease;
}

.mw-subitem svg { width: 18px; }
.mw-subitem:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.mw-subitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mw-subitem.is-current { color: #fff; background: rgba(255, 255, 255, .1); }

/* The back button sits beside the title rather than above it. */
.mw-title-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* --- the stepper --------------------------------------------------------- */

/* Eight equal tracks across the page. Each is at least as wide as its own
   label and shares out whatever room is left, so the steps sit evenly spaced
   instead of bunching at the left and leaving the right half of the row empty.
   When the page is too narrow for all eight, the row scrolls sideways rather
   than wrapping into a ragged second line. */
.mw-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
}

.mw-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px 14px 8px 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mw-steps li span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: var(--muted);
  font-size: .7rem;
  background: #f2efec;
  border-radius: 50%;
}

.mw-steps li.is-current { color: var(--accent-deep); border-color: var(--accent); }
.mw-steps li.is-current span { color: #fff; background: var(--accent-deep); }
.mw-steps li.is-done { color: var(--ink); }
.mw-steps li.is-done span { color: #fff; background: #9db89b; }

/* --- the read-back panel ------------------------------------------------- */

.mw-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.mw-picker { display: grid; gap: 6px; min-width: 220px; }
.mw-picker select { max-width: 340px; }

.mw-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}

.mw-error { color: var(--accent-deep); font-weight: 600; }

#mw-preview th,
#mw-preview td {
  max-width: 220px;
  overflow-wrap: anywhere;
}

.mw-more { color: var(--muted); font-style: italic; }

.mw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.mw-footer-note { color: #4f4943; font-size: .9rem; line-height: 1.5; }

/* --- the forms and the mapped table -------------------------------------- */

.mw-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}

.mw-field { display: grid; gap: 6px; align-content: start; }
.mw-field select, .mw-field input { width: 100%; }
.mw-hint { margin: 2px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }

/* A row that is short of something the file should have carried: a warm tint
   across the whole row and a short, rounded rose mark at its start. This used
   to be a solid 3px bar in the brand red down the full height of the row,
   which on a manifest where most rows are flagged read as an alarm. */
.mw-flagged { background: #fff7f9; }
.mw-flagged > td:first-child { position: relative; }
.mw-flagged > td:first-child::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  background: #eeb5c5;
  border-radius: 0 3px 3px 0;
}

/* A required field the file did not carry. The renderer writes the bare word
   into the cell, which repeated down a column read as red clutter; it is drawn
   here as a quiet pill with a small dot instead.
   The word itself stays in the cell at zero size, so a screen reader still
   reads it once: the pill is generated content with empty alt text (the second
   content line). The first content line is the fallback for a browser that
   does not know that syntax, which would otherwise drop the pill and leave the
   cell blank. */
/* Scoped by id because the step tables set their own cell font size by id,
   which would otherwise outrank the zero size here. */
#new-manifest-view td.mw-missing { font-size: 0; }
#new-manifest-view td.mw-missing::before {
  content: "Missing";
  content: "Missing" / "";
  display: inline-block;
  padding: 3px 10px 3px 18px;
  color: #a33a57;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
  white-space: nowrap;
  background: radial-gradient(circle at 9px 50%, #d0587a 2.5px, transparent 3px), #fbe9ee;
  border: 1px solid #f4d3dc;
  border-radius: 999px;
}

/* A column filled in a later step: waiting, not wrong. */
.mw-later { color: #b6afa6; }

#mw-mapped th, #mw-mapped td { white-space: nowrap; }
#mw-mapped td { font-size: .82rem; }

/* --- the review tables --------------------------------------------------- */

.mw-raw { max-width: 360px; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.mw-wide { min-width: 260px; }
.mw-code { width: 160px; }
.mw-cell { height: 34px; border-color: var(--line); }
.mw-cell.mw-bad { border-color: var(--accent-deep); }

.mw-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
}
.mw-badge.mw-high { color: #2f6b45; background: #e8f3ec; }
.mw-badge.mw-medium { color: #8a6314; background: #fbf1dc; }
.mw-badge.mw-low { color: var(--accent-deep); background: #fdeaf0; }

.mw-take { max-width: 100%; text-align: left; overflow-wrap: anywhere; }

.mw-remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  cursor: pointer;
}
.mw-remember input { margin-top: 2px; accent-color: var(--accent-deep); }

/* --- the settings card --------------------------------------------------- */

.mw-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-reference-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#mw-final th, #mw-final td { white-space: nowrap; }
#mw-final td { font-size: .82rem; }
.mw-add { min-height: 32px; padding: 0 12px; font-size: .74rem; }

/* --- the review tables, sizing -------------------------------------------
   These seven tables take their header, padding and row rule from the shared
   .table-shell rule in styles.css. What is left here is how wide each column
   should be, and which of them hold a figure. */

/* A trailing column that is empty until a row needs flagging. Left to itself
   it was sized by the longest badge and stole width from the columns beside
   it, so it is held to the badge and no wider. */
#mw-traffic th:last-child, #mw-consignee th:last-child, #mw-value th:last-child { width: 160px; }

#mw-desc th:nth-child(3) { width: 200px; }
#mw-desc th:nth-child(4) { width: 130px; }
#mw-consignee th:nth-child(3) { width: 150px; }
#mw-value th:nth-child(4) { width: 150px; }
#mw-value td:nth-child(4) { font-variant-numeric: tabular-nums; text-align: right; }

/* A code is short, and a traffic code split over two lines is unreadable. */
#mw-traffic td:nth-child(2), #mw-consignee td:nth-child(3),
#mw-consignee td:nth-child(4) { white-space: nowrap; }

/* Both of these are built from the manifest's own column list, so they are as
   wide as the sheet is. They scroll sideways in their shell rather than
   squeezing thirty columns into the card. */
#mw-mapped, #mw-final { table-layout: auto; }
#mw-final td { font-variant-numeric: tabular-nums; }

/* The suggestion the engine offers, which the operator clicks to take. It had
   no rule of its own, so it drew as the browser's default grey button in the
   middle of a table of chips and plain text. */
.mw-take {
  padding: 5px 11px;
  color: var(--accent-deep);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #edd1da;
  border-radius: 8px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.mw-take:hover { color: #fff; background: var(--accent-deep); border-color: var(--accent-deep); }
.mw-take:focus-visible { outline: 3px solid rgba(217,76,114,.24); outline-offset: 2px; }

/* --- the step pages ------------------------------------------------------
   Everything below is scoped to #new-manifest-view. The Uploads sheet uses the
   same summary, table and back-button markup inside a full-height workbench,
   and keeps the look it has there. */

/* The summary figures. In the workbench they are a flat strip across the top
   of the view; here they stand above a card, so they are drawn as cards of
   their own. auto-fit also mends the five-figure Export step, whose fifth
   figure used to leave a hole in a three-column grid. */
#new-manifest-view .sheet-summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  background: transparent;
  border: 0;
}
#new-manifest-view .sheet-summary div {
  padding: 20px 24px 18px;
  background: var(--paper);
  border: 1px solid #ebe6df;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 36, 30, .04), 0 10px 26px rgba(43, 36, 30, .06);
}
#new-manifest-view .sheet-summary span {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* Lighter than the body text, but only to the point where it still clears
   4.5:1 on the card: the softness comes mostly from size and weight. */
#new-manifest-view .sheet-summary strong {
  margin-top: 8px;
  color: #77716a;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .09em;
}

/* A full 44px target, as a touch screen needs. */
#new-manifest-view .back-button {
  min-height: 44px;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  color: #5c5650;
  font-size: .84rem;
  background: #fff;
  border-color: #e2dcd4;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(43, 36, 30, .05);
}
#new-manifest-view .back-button svg { width: 18px; height: 18px; }
/* Restated, because the scoped rule above outranks the shared hover. */
#new-manifest-view .back-button:hover { color: var(--accent-deep); background: #fff9fa; border-color: #dcc7cf; }

/* The card's own padding for what sits inside it. The note, the pickers, the
   field grid, the remember line and the footer are children of the card
   directly, and with nothing to inset them their text ran into the card edge.
   They are named one by one so the upload card, which has its own layout, is
   left alone. 32px matches the card heading above them. */
#new-manifest-view .workspace > .mw-note,
#new-manifest-view .workspace > .mw-pickers,
#new-manifest-view .workspace > .mw-fields,
#new-manifest-view .workspace > .mw-remember { padding-inline: 32px; }
#new-manifest-view .workspace > .mw-note { margin: 0; padding-block: 18px; }
#new-manifest-view .workspace > .mw-note:empty { display: none; }
/* An empty note is hidden, and it was the only thing holding the form below it
   off the card heading; the form takes that space back itself. */
#new-manifest-view .workspace > .mw-note:empty + .mw-fields,
#new-manifest-view .workspace > .mw-note:empty + .mw-pickers { padding-top: 22px; }
#new-manifest-view .workspace > .mw-footer {
  margin: 0;
  padding: 18px 32px 22px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* The tables: a deeper header band, so it separates from the rows, and more
   room above and below every row. */
#new-manifest-view .table-shell > table > thead > tr > th {
  padding-top: 16px;
  padding-bottom: 16px;
  background: #efebe5;
  border-bottom-color: #ddd5cb;
}
#new-manifest-view .table-shell > table > tbody > tr > td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* A column with nothing in it yet: the dash only marks the gap, so it should
   not compete with the figures beside it. Scoped to cells, because the same
   class greys out a taken suggestion on the Description step, which still has
   to be readable. */
#new-manifest-view td.mw-later { color: #d0c9c0; }

/* Step 3: Pieces, Weight Lbs and Value, set right so the figures line up. */
#mw-mapped th:nth-child(5), #mw-mapped td:nth-child(5),
#mw-mapped th:nth-child(6), #mw-mapped td:nth-child(6),
#mw-mapped th:nth-child(8), #mw-mapped td:nth-child(8) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Step 3 is sixteen columns wide, every one set to nowrap, so it was far wider
   than the card. Consignee and Desc are the two free-text columns: they now
   wrap at a set width, which takes a few hundred pixels off the table. */
#mw-mapped td:nth-child(10), #mw-mapped td:nth-child(13) {
  width: 180px;
  min-width: 150px;
  white-space: normal;
}

/* The other step tables cap their height inline at 58vh; these two did not.
   On a long manifest that put the sideways scrollbar at the bottom of the
   table, below the fold, so the right-hand columns simply looked cut off -
   there was nothing in view to say the table went on. Capped, the scrollbar
   stays on screen and the header stays pinned while the rows scroll. */
#mw-read .table-shell, #mw-preview-pane .table-shell { max-height: 58vh; }

@media (max-width: 680px) {
  #new-manifest-view .sheet-summary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
  #new-manifest-view .sheet-summary div { padding: 16px 18px 14px; border-radius: 12px; }
  #new-manifest-view .sheet-summary span { font-size: 1.7rem; }
  #new-manifest-view .workspace > .mw-note,
  #new-manifest-view .workspace > .mw-pickers,
  #new-manifest-view .workspace > .mw-fields,
  #new-manifest-view .workspace > .mw-remember { padding-inline: 22px; }
  #new-manifest-view .workspace > .mw-footer { padding: 16px 22px 18px; }
}

/* On a phone three cards side by side leave each label about sixty pixels, so
   "Need attention" ran out of its card. They stack instead, as short rows with
   the figure first. */
@media (max-width: 480px) {
  #new-manifest-view .sheet-summary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #new-manifest-view .sheet-summary div { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
  #new-manifest-view .sheet-summary span { min-width: 2.5ch; font-size: 1.5rem; }
  #new-manifest-view .sheet-summary strong { margin-top: 0; }
  #new-manifest-view .workspace > .mw-note,
  #new-manifest-view .workspace > .mw-pickers,
  #new-manifest-view .workspace > .mw-fields,
  #new-manifest-view .workspace > .mw-remember { padding-inline: 16px; }
  #new-manifest-view .workspace > .mw-footer { padding: 14px 16px 16px; }
}

/* --- Master Data ---------------------------------------------------------
   The screen for the books the builder suggests from. It reuses the shared
   table chrome, the review badges, the suggestion chip and the save bar; what
   is here is its toolbar, its column widths and its feedback. */

/* How many rows each book holds, inside its tab. */
.md-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 1px 7px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  background: #f0ebe5;
  border-radius: 999px;
}
.md-count:empty { display: none; }
.tab-btn.is-current .md-count { color: var(--accent-deep); background: #fbe9ee; }

/* The chip turns amber while something on the book needs a look. */
#master-data-view .status-chip.is-warn { color: #8a5f12; }
#master-data-view .status-chip.is-warn i { background: #d9a03f; box-shadow: 0 0 0 4px rgba(217, 160, 63, .16); }

.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
}
.md-search { flex: 1 1 260px; max-width: 380px; }
.md-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.md-input, .md-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.md-select {
  padding-right: 34px;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 11px center / 14px;
  cursor: pointer;
}
.md-input:hover, .md-select:hover { border-color: #c9c1b9; }
.md-input:focus, .md-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 76, 114, .12); }

.md-note { margin: 0; padding: 14px 32px 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.md-note:empty { display: none; }

/* Fifty rows to a page, so the shell scrolls inside the card with its header
   pinned instead of pushing the save bar a page down. */
#master-data-view .md-shell { max-height: 62vh; margin-top: 14px; border-top: 1px solid var(--line); }
#md-table { min-width: 980px; }
#md-table .md-col-code { width: 150px; }
#md-table .md-col-suggest { width: 240px; }
#md-table .md-col-status { width: 160px; }
#md-table .md-col-remove { width: 52px; }
/* A row number runs to four digits on the customer book. */
#md-table .col-num { width: 64px; padding-inline: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The name and the description are what a row is about. An input has no width
   of its own to hold a column open, so without this the three narrow fields
   beside it squeezed the name down to a dozen characters. */
#md-table .md-td-name .md-cell, #md-table .md-td-description .md-cell { min-width: 220px; }

/* The fields read as fields: a quiet border at rest, rather than the bare
   text the manifest sheet uses. An edited field is marked until it is saved. */
#md-table .md-cell { background: #fff; border-color: #e2dcd4; }
#md-table .md-cell.is-changed:not(.mw-bad):not(:focus) { background: #fffaf0; border-color: #e3c58a; }
#md-table .md-cell::placeholder { color: #b8b1a8; }

.md-suggestion { display: grid; justify-items: start; gap: 4px; }
.md-suggestion + .md-suggestion { margin-top: 8px; }
.md-reason { color: var(--muted); font-size: .72rem; line-height: 1.35; }
/* A code that disagrees with its neighbours is for review, not a gap: amber,
   and never touched by "Accept all". */
.md-suggestion.is-review .md-use { color: #8a5f12; border-color: #ecd9b2; }
.md-suggestion.is-review .md-use:hover { color: #fff; background: #a87516; border-color: #a87516; }

.md-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-badge.md-badge-edited { color: #8a5f12; background: #fbf1dc; }
.mw-badge.md-badge-new { color: #27596f; background: #ddeef5; }
.md-none { color: #d0c9c0; }

.md-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #a8a097;
  font-size: 1.15rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.md-remove:hover { color: var(--accent-deep); background: #fff4f7; border-color: #f1d3dc; }
.md-remove:focus-visible { outline: 3px solid rgba(217, 76, 114, .24); outline-offset: 2px; }

.md-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 32px;
  color: var(--muted);
  font-size: .8rem;
  border-top: 1px solid var(--line);
}
.md-pager-buttons { display: flex; gap: 8px; }
.md-pager-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.md-page-size { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.md-select.md-select-sm { width: auto; height: 32px; padding: 0 30px 0 10px; font-size: .8rem; background-position: right 9px center; }

/* The save bar says when there is something to save, and while it has and the
   foot of the card is out of sight, it floats at the bottom of the window,
   centred on the page beside the sidebar. (It cannot simply be sticky: the
   dashboard clips sideways overflow, and that stops sticky from working.) */
#master-data-view .md-save-bar.is-dirty { background: #fffaf0; }
#master-data-view .md-save-bar.is-dirty #md-dirty { color: #8a5f12; font-weight: 700; }
#master-data-view .md-save-bar.is-dirty.is-offscreen {
  position: fixed;
  bottom: 18px;
  left: calc(248px + (100vw - 248px) / 2);
  z-index: 60;
  width: min(760px, calc(100vw - 296px));
  border: 1px solid #ecd9b2;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 21, 19, .18);
  transform: translateX(-50%);
  animation: md-bar-in .2s var(--ease);
}
@keyframes md-bar-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { #master-data-view .md-save-bar.is-dirty.is-offscreen { animation: none; } }
@media (max-width: 900px) {
  #master-data-view .md-save-bar.is-dirty.is-offscreen {
    left: calc(78px + (100vw - 78px) / 2);
    width: min(680px, calc(100vw - 110px));
  }
}

/* A disabled button here means "nothing to do", not "busy": the shared rule
   shows a wait cursor, and the save button had no disabled look at all. */
#master-data-view .secondary-button:disabled { cursor: not-allowed; }
#master-data-view .save-data-button:disabled,
#master-data-view .save-data-button:disabled:hover {
  background: var(--accent-deep);
  opacity: .45;
  transform: none;
  cursor: not-allowed;
}

/* The line that points at the template, under the toolbar. */
.md-hint { margin: 0; padding: 12px 32px 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.md-hint a { color: var(--accent-deep); font-weight: 700; text-underline-offset: 2px; }
.md-hint a:hover { color: var(--accent); }
.md-hint strong { color: var(--ink); font-weight: 600; }

/* What a file would do, shown before anything changes. */
.md-import {
  margin: 14px 32px 0;
  padding: 18px 20px;
  background: #fffaf3;
  border: 1px solid #ecd9b2;
  border-radius: 12px;
}
.md-import-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.md-import-head h3 { margin: 2px 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.md-import-head .section-label { margin: 0; }
.md-import-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#master-data-view .md-import-actions .save-data-button { min-height: 38px; }

.md-import-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.md-stat {
  padding: 6px 12px;
  color: var(--muted);
  font-size: .78rem;
  background: #fff;
  border: 1px solid #ece6de;
  border-radius: 999px;
}
.md-stat strong { color: var(--ink); font-size: .86rem; }
.md-stat.is-new { color: #27596f; background: #eef6fa; border-color: #cfe4ee; }
.md-stat.is-new strong { color: #27596f; }
.md-stat.is-change { color: #8a5f12; background: #fdf6e8; border-color: #f0dfba; }
.md-stat.is-change strong { color: #8a5f12; }
.md-stat.is-skip { color: #a33a57; background: #fdf0f3; border-color: #f4d3dc; }
.md-stat.is-skip strong { color: #a33a57; }

.md-import-list { margin-top: 14px; }
.md-import-list p { margin: 0 0 6px; color: var(--ink); font-size: .78rem; font-weight: 700; }
.md-import-list ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.md-import-list li { color: #4f4943; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.md-import-list li span { display: inline-block; min-width: 64px; margin-right: 6px; color: var(--muted); font-weight: 600; }
.md-import-list.is-skip li span { color: #a33a57; }
.md-import-list .md-more { color: var(--muted); font-style: italic; }
.md-import-empty { margin: 12px 0 0; color: var(--muted); font-size: .82rem; }

@media (max-width: 680px) {
  .md-hint { padding-inline: 22px; }
  .md-import { margin-inline: 22px; padding: 16px; }
  .md-import-actions { width: 100%; }
  #master-data-view .md-import-actions .secondary-button,
  #master-data-view .md-import-actions .save-data-button { flex: 1 1 0; width: auto; }
}

@media (max-width: 480px) {
  .md-hint { padding-inline: 16px; }
  .md-import { margin-inline: 16px; }
}

.md-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 80;
  max-width: min(440px, calc(100vw - 32px));
  margin: 0;
  padding: 13px 18px 13px 44px;
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.45;
  background: #2f5a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(23, 21, 19, .22);
  animation: md-toast-in .22s var(--ease);
}
.md-toast.is-error {
  background: #9d2f4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}
@keyframes md-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .md-toast { animation: none; } }

@media (max-width: 680px) {
  .md-toolbar { padding: 14px 22px; }
  .md-search { max-width: none; flex-basis: 100%; }
  .md-toolbar-actions { margin-left: 0; width: 100%; }
  .md-note, .md-pager { padding-inline: 22px; }
  /* The shared phone rule gives every secondary button a 150px flex basis,
     which in this column-stacked bar would make it 150px tall. */
  #master-data-view .md-save-bar .secondary-button { flex: 0 0 auto; }
  /* Below the 68px bar the sidebar becomes on a phone. */
  .md-toast { top: 80px; right: 16px; left: 16px; max-width: none; }
  /* Floating, the bar keeps one row on a phone rather than the stacked
     full-width buttons the card's foot uses there. */
  #master-data-view .md-save-bar.is-dirty.is-offscreen {
    left: 50%;
    bottom: 12px;
    width: calc(100vw - 24px);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }
  #master-data-view .md-save-bar.is-dirty.is-offscreen #md-dirty { flex: 1 1 100%; }
  #master-data-view .md-save-bar.is-dirty.is-offscreen .secondary-button,
  #master-data-view .md-save-bar.is-dirty.is-offscreen .save-data-button { flex: 1 1 0; width: auto; }
}

@media (max-width: 480px) {
  .md-toolbar { padding-inline: 16px; }
  .md-note, .md-pager { padding-inline: 16px; }
}

/* --- narrow screens ------------------------------------------------------ */

/* The sidebar collapses to icons, then to a scrolling strip. The flyout follows
   the link in both, and the group keeps the shape its neighbours have. */
@media (max-width: 1080px) {
  .mw-nav-group { display: flex; justify-content: center; }
}

/* On a narrow screen the sidebar is a strip across the top, so the flyout drops
   below the link instead of beside it. */
@media (max-width: 860px) {
  .mw-nav-group { flex: 0 0 auto; }
  .mw-flyout { transform: translateY(-6px); }
  .mw-flyout.is-open { transform: translateY(0); }
}

@media (max-width: 680px) {
  .mw-reference { align-items: flex-start; }
  .mw-reference-actions { width: 100%; }
  .mw-pickers { gap: 12px; }
  .mw-picker { min-width: 0; flex: 1 1 100%; }
  .mw-footer .secondary-button, .mw-footer .save-data-button { flex: 1 1 160px; }
}

/* The bridge only matters where there is a pointer to drag across it. */
@media (hover: none) {
  .mw-flyout::before { display: none; }
}