/*--------------------------------------------------------------
# The site's modals: every Bootstrap modal under _Layout (.modal) and its pieces (.mm-*), first written for the
# dashboard's reading windows (an AL-MA post, the release notes) and since 2026-11-02 every window's. The four kinds
# (a quick view, a form, a confirm, a tool window) are under "The four kinds of modal" below.
#
#   <div class="modal fade">
#     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
#       <div class="modal-content">
#         <div class="modal-header">
#           <div class="mm-heading">
#             <div class="mm-meta"><span class="mm-chip">Section</span><span class="mm-date">Date</span></div>
#             <h2 class="modal-title">Title</h2>
#           </div>
#           <button type="button" class="mm-close" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
#         </div>
#         <div class="modal-body mm-prose">…</div>
#         <div class="modal-footer">…</div>
#
# The window is the scene's glass (v3.css §7 paints it: --glass-modal*, tokens.css); the page behind dimmed and
# blurred (or only dimmed: Admin → Interface "Dim only"); the dialog rising a little as it opens (still for reduced
# motion). _Layout loads this file on every page. The sizes are set with two classes (.modal .modal-dialog),
# which outrank Bootstrap's plain .modal-dialog whatever the load order.
--------------------------------------------------------------*/
/* .mm-scope: a page (a Details page) that uses the same pieces outside a modal (chips, facts,
   notes, tables, totals, the title row) gets the same values. */
.modal,
.mm-scope {
    --mm-ink: #172b45;
    --mm-blue: #304f7f;
    --mm-accent: #106eea;
    --mm-muted: #6b7686;
    --mm-line: rgba(48, 79, 127, 0.12);
    --mm-pad: 28px;
}

/* ---------- The page behind ----------
   Dimmed in the site's ink and a little blurred while a modal is open. modal.js keeps
   the state on the body (mm-backdrop, mm-opening, mm-closing, mm-switching), set before Bootstrap
   adds or removes its backdrop, so the dim never shows Bootstrap's black. It has no transition,
   only animations: Bootstrap reads a transition's length and waits for it before showing or
   removing the dialog, so the dim and the dialog would move one after the other. While a modal
   gives way to another (mm-switching) neither animation runs, and the dim holds. */
/* Opacity stays 1: a backdrop-filter is painted through its element's opacity, so a backdrop at
   0.45 opacity shows only 45% of its blur and the glass is lost. The tint's own alpha dims the page
   instead, and the fades animate that alpha and the blur's radius.
   --mm-dim and --mm-blur: blurred and lightly dimmed (the sign-in window's own backdrop, landing.css); "Dim only"
   (body.v3-modal-dim) and Fast Mode (fast.css) dim deeper with no blur, the dialog then nearly solid (v3.css §7). */
body {
    --mm-dim: rgba(15, 28, 46, 0.22);
    --mm-blur: blur(6px);
}

body.v3-modal-dim {
    --mm-dim: rgba(15, 28, 46, 0.42);
    --mm-blur: none;
}

html[data-v3-scene="night"] body.v3-modal-dim {
    --mm-dim: rgba(3, 7, 14, 0.55);
}

body.mm-backdrop > .modal-backdrop {
    background-color: var(--mm-dim);
    opacity: 1;
    -webkit-backdrop-filter: var(--mm-blur);
    backdrop-filter: var(--mm-blur);
    transition: none;
}

body.mm-opening > .modal-backdrop {
    animation: mm-dim-in 0.25s ease-out both;
}

body.mm-closing > .modal-backdrop {
    animation: mm-dim-out 0.2s ease-in forwards;
}

@keyframes mm-dim-in {
    from {
        background-color: rgba(15, 28, 46, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

@keyframes mm-dim-out {
    to {
        background-color: rgba(15, 28, 46, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

/* The dialog fades as it rises (and as it sinks, closing): a little longer and softer than
   Bootstrap's 0.15s linear, matching the dim. */
.modal.fade {
    transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
    .modal .modal-dialog {
        max-width: 760px;
    }
}

/* A tool / list window (modal-xl): Bootstrap's large sizes, which the 760px above would cap. */
@media (min-width: 992px) {
    .modal .modal-dialog.modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}

/* A wide quick view (an 1804's: more facts and an invoice table of six columns), set by
   quick-view.js from the record's [data-quick-view-size="wide"]. */
@media (min-width: 992px) {
    .modal .modal-dialog.is-wide {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .modal .modal-dialog.is-wide {
        max-width: 1080px;
    }
}

.modal.fade .modal-dialog {
    transform: translateY(14px) scale(0.985);
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal .modal-content {
    overflow: hidden;
}

/* ---------- Header ---------- */
.modal .modal-header {
    align-items: flex-start;
    gap: 16px;
    padding: 22px var(--mm-pad) 16px;
    border-bottom: 1px solid var(--mm-line);
}

.mm-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.mm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
    color: var(--mm-muted);
    font-size: 0.76rem;
}

    .mm-meta:empty {
        display: none;
    }

.mm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

    .mm-chip:empty {
        display: none;
    }

.modal .modal-title {
    margin: 0;
    color: var(--mm-ink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.mm-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(48, 79, 127, 0.08);
    color: var(--mm-blue);
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .mm-close:hover,
    .mm-close:focus-visible {
        background: rgba(48, 79, 127, 0.16);
        color: var(--mm-ink);
    }

    .mm-close:focus-visible {
        outline: 2px solid var(--mm-accent);
        outline-offset: 2px;
    }

/* ---------- Body: reading typography ---------- */
/* --mm-scrollbar: the width of the body's scrollbar while it scrolls (quick-view.js measures it),
   taken off the right padding so the body's content keeps the header's and footer's right edge. */
.modal .modal-body {
    padding: 20px var(--mm-pad) 28px;
    padding-right: calc(var(--mm-pad) - var(--mm-scrollbar, 0px));
    scrollbar-width: thin;
}

.mm-prose {
    color: #2b3440;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

    .mm-prose > :first-child {
        margin-top: 0;
    }

    .mm-prose > :last-child {
        margin-bottom: 0;
    }

    .mm-prose p {
        margin: 0 0 1em;
    }

    .mm-prose h1,
    .mm-prose h2,
    .mm-prose h3,
    .mm-prose h4 {
        margin: 1.4em 0 0.5em;
        color: var(--mm-ink);
        font-weight: 700;
        line-height: 1.3;
    }

    .mm-prose h1 { font-size: 1.25rem; }
    .mm-prose h2 { font-size: 1.15rem; }
    .mm-prose h3 { font-size: 1.05rem; }
    .mm-prose h4 { font-size: 0.98rem; }

    .mm-prose a {
        color: var(--mm-accent);
        text-decoration: underline;
        text-decoration-color: rgba(16, 110, 234, 0.35);
        text-underline-offset: 2px;
    }

        .mm-prose a:hover {
            text-decoration-color: currentColor;
        }

    .mm-prose ul,
    .mm-prose ol {
        margin: 0 0 1em;
        padding-left: 1.3em;
    }

    .mm-prose li + li {
        margin-top: 0.3em;
    }

    .mm-prose img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0.6em 0 1em;
        border-radius: 12px;
    }

    .mm-prose blockquote {
        margin: 0 0 1em;
        padding: 0.5em 1em;
        border-left: 3px solid var(--mm-accent);
        border-radius: 0 10px 10px 0;
        background: rgba(16, 110, 234, 0.05);
        color: #45505e;
    }

    .mm-prose table {
        width: 100%;
        margin: 0 0 1em;
        border-collapse: collapse;
        font-size: 0.88rem;
    }

    .mm-prose th,
    .mm-prose td {
        padding: 0.45em 0.6em;
        border-bottom: 1px solid var(--mm-line);
        text-align: left;
        vertical-align: top;
    }

    .mm-prose th {
        color: var(--mm-ink);
        font-weight: 600;
    }

    .mm-prose code {
        padding: 0.1em 0.35em;
        border-radius: 5px;
        background: rgba(48, 79, 127, 0.08);
        color: var(--mm-ink);
        font-size: 0.88em;
    }

    .mm-prose hr {
        margin: 1.5em 0;
        border: 0;
        border-top: 1px solid var(--mm-line);
        opacity: 1;
    }

/* ---------- Footer ---------- */
.modal .modal-footer {
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--mm-pad);
    border-top: 1px solid var(--mm-line);
}

    /* A lone button (a help window's Close) on the right, where a footer's actions end. */
    .modal .modal-footer > .btn:only-child {
        margin-left: auto;
    }

.mm-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--mm-muted);
    font-size: 0.76rem;
}

    .mm-source::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--mm-accent);
    }

.mm-btn {
    padding: 6px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--pill-primary-bg);
    color: var(--pill-primary-fg);
    font-size: 0.84rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

    /* The pills' colours are the --pill-* tokens (tokens.css; the night's in v3-night.css). */
    .mm-btn:hover,
    .mm-btn:focus-visible {
        background: var(--pill-primary-bg-h);
        color: var(--pill-primary-fg);
    }

/* A second, quieter button (Cancel, Restore defaults), and a footer's right-hand group with an
   error that shows before its buttons. */
.mm-btn.is-quiet {
    background: var(--pill-quiet-bg);
    color: var(--pill-quiet-fg);
}

    .mm-btn.is-quiet:hover,
    .mm-btn.is-quiet:focus-visible {
        background: var(--pill-quiet-bg-h);
        color: var(--pill-quiet-fg-h);
    }

.mm-btn:disabled {
    opacity: 0.6;
}

/* A footer link whose page would be empty (a count of 0): drawn, but not a link. */
.mm-btn.is-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* The number on a footer link (Suppliers' Orders and Invoices). */
.mm-btn-count {
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(48, 79, 127, 0.14);
    color: var(--mm-ink);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.mm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.mm-error {
    flex: 1 1 100%;
    color: #b42318;
    font-size: 0.78rem;
    text-align: right;
}

    .mm-error[hidden] {
        display: none;
    }

/* ---------- Choices with a tick per column (the header's quick links) ----------
   <table class="mm-choices">: a head row of column titles (.mm-choice-col, each with a count,
   .mm-choice-count, amber when .is-full), then a tbody per group opening with a .mm-choice-group
   row; each row an icon and name, then a checkbox per column. A row that is not a choice is
   .is-fixed (its boxes ticked and disabled), a note under a name .mm-choice-note. */
.mm-choices {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .mm-choices thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0 0 8px;
        background: #fff;
        border-bottom: 1px solid var(--mm-line);
    }

    .mm-choices th[scope="row"] {
        padding: 7px 8px 7px 0;
        color: var(--mm-ink);
        font-weight: 500;
    }

        .mm-choices th[scope="row"] > i {
            display: inline-block;
            width: 1.6em;
            color: var(--mm-blue);
            text-align: center;
        }

    .mm-choices td {
        width: 92px;
        padding: 7px 0;
        text-align: center;
    }

    .mm-choices tr + tr > * {
        border-top: 1px solid rgba(48, 79, 127, 0.07);
    }

    .mm-choices .form-check-input {
        width: 1.15em;
        height: 1.15em;
        margin: 0;
        cursor: pointer;
    }

        .mm-choices .form-check-input:disabled {
            cursor: default;
        }

    .mm-choices .is-fixed th,
    .mm-choices .is-fixed .form-check-input {
        opacity: 0.6;
    }

.mm-choice-col {
    width: 92px;
    color: var(--mm-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

    .mm-choice-col > * {
        display: block;
    }

    .mm-choice-col > i {
        color: var(--mm-blue);
        font-size: 1.05rem;
    }

.mm-choice-count {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

    .mm-choice-count.is-full {
        color: #b54708;
        font-weight: 700;
    }

.mm-choices .mm-choice-group th {
    padding: 16px 0 4px;
    border-top: 0;
    color: var(--mm-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-choices tbody:first-of-type .mm-choice-group th {
    padding-top: 10px;
}

/* ---------- A record at a glance (the quick views: Views/Shared/_QuickViewShell.cshtml) ----------
   A line under the title (.mm-sub), the record's facts as a two-column grid of label over value
   (.mm-facts), a note (.mm-note), then groups of lines (.mm-group), each a compact table of a
   description (with a muted line under it) and amounts, and the totals closing the body. */
.mm-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    color: var(--mm-muted);
    font-size: 0.8rem;
}

/* The title with a reference on its right (an export's MRN and its B/L), on a line of its own
   under the chips and the close button: a .mm-title-row that is the header's own child takes the
   header's full width, so its right edge is the body's (the facts card's, the table's). */
/* The title row sits nearer the divider under it than the chips over it (measured in ink: 27px
   over it, 21px under it on a desktop; 23 / 21 on a phone). */
.modal .modal-header:has(> .mm-title-row) {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 16px;
    padding-bottom: 14px;
}

    .modal .modal-header:has(> .mm-title-row) .mm-meta {
        margin-bottom: 0;
    }

.modal-header > .mm-title-row {
    flex: 1 1 100%;
}

.mm-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 16px;
}

.mm-title-aside {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    color: var(--mm-ink);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

    .mm-title-aside[hidden] {
        display: none;
    }

/* The title row's right-hand group (an 1804's): the LRN and the header's own buttons together,
   right of the title. */
.mm-title-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

    .mm-title-right .mm-title-aside {
        margin-left: 0;
    }

.mm-title-label {
    color: var(--mm-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* The facts in two set columns (.mm-facts.is-split, each column a dl.mm-facts-col), where the
   order within each column matters: the client over its packing, the vessel over the agent. */
.mm-facts.is-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two facts a row whatever the width (a narrow dialog, where auto-fill would give one column). */
.mm-facts.is-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mm-facts-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
}

/* A table with a record per row (.mm-table.is-rows, an export's orders): from md up each column
   keeps to one line except .mm-col-wide, which takes the width left and wraps a long text; below
   md only the first column holds text (the rest are d-none d-md-table-cell) and takes the width,
   wrapping, as in any .mm-table. */
@media (min-width: 768px) {
    .mm-table.is-rows td:first-child {
        width: auto;
    }

    .mm-table.is-rows .mm-col-wide {
        width: 100%;
        white-space: normal;
    }
}

/* The row's text column when it isn't the first (a numbered table: the # first, hidden below md,
   then the PO): it wraps, and below md it takes the width, as the first column does otherwise. */
.mm-table td.mm-col-main {
    white-space: normal;
}

@media (max-width: 767.98px) {
    .mm-table td.mm-col-main {
        width: 100%;
    }
}

/* A main column kept to one line from md up, where another column takes the width (an 1804's
   supplier, the invoice's date after it); below md it wraps as the row's text. */
@media (min-width: 768px) {
    .mm-table td.mm-col-main.is-nowrap-md {
        white-space: nowrap;
    }
}

/* A PO, one per line when an order holds several. From md up one too long for the column ends in
   "…" (the tooltip has it whole); below md, where the column is the row's width, it wraps. */
.mm-po {
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .mm-po {
        max-width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.mm-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 18px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f5f7fb;
}

.mm-fact {
    min-width: 0;
}

    .mm-fact dt {
        margin: 0;
        color: var(--mm-muted);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .mm-fact dd {
        margin: 1px 0 0;
        overflow-wrap: anywhere;
        color: var(--mm-ink);
        font-size: 0.86rem;
        font-weight: 500;
    }

.mm-note {
    margin: 0 0 18px;
    padding: 8px 12px;
    border-left: 3px solid var(--mm-accent);
    border-radius: 0 8px 8px 0;
    background: rgba(16, 110, 234, 0.05);
    color: #45505e;
    font-size: 0.86rem;
    white-space: pre-line;
}

/* A note as a quiet rounded box, like the cards (an order's notes, in its quick view and on its
   page): the pale blue alone, no accent. */
.mm-note.is-rounded {
    border-left: 0;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

/* The record a dialog is about, over its facts (a delete confirm): its reference large, a second
   one under it (an export's MRN, then its B/L). */
.mm-record {
    margin: 0 0 14px;
}

.mm-record-title {
    color: var(--mm-ink);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mm-record-sub {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    color: var(--mm-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

/* A warning or a consequence (a delete confirm): the note in amber or red. They hold markup, not
   typed text, so they wrap as usual (a typed .mm-note keeps its line breaks). */
.mm-note.is-warning,
.mm-note.is-danger {
    white-space: normal;
}

.mm-note.is-warning {
    border-left-color: #f79009;
    background: rgba(247, 144, 9, 0.08);
    color: #7a2e0e;
}

.mm-note.is-danger {
    border-left-color: #d92d20;
    background: rgba(217, 45, 32, 0.06);
    color: #7a271a;
}

    .mm-note > :last-child {
        margin-bottom: 0;
    }

    .mm-note ul {
        margin: 4px 0 0;
        padding-left: 1.2em;
    }

.mm-group + .mm-group {
    margin-top: 16px;
}

.mm-group-title {
    margin: 0 0 6px;
    color: var(--mm-blue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

    .mm-table th {
        padding: 4px 8px;
        border-bottom: 1px solid var(--mm-line);
        color: var(--mm-muted);
        font-size: 0.68rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .mm-table td {
        padding: 7px 8px;
        border-bottom: 1px solid rgba(48, 79, 127, 0.07);
        vertical-align: top;
        white-space: nowrap;
    }

        .mm-table td:first-child {
            width: 100%;
            white-space: normal;
        }

    .mm-table th:first-child,
    .mm-table td:first-child {
        padding-left: 0;
    }

    .mm-table th:last-child,
    .mm-table td:last-child {
        padding-right: 0;
    }

.mm-desc {
    display: block;
    color: var(--mm-ink);
    font-weight: 500;
}

.mm-under {
    display: block;
    color: var(--mm-muted);
    font-size: 0.74rem;
}

/* How long ago, beside a date in a fact ("28-Oct-2026 · 3 days ago"). */
.mm-ago {
    color: var(--mm-muted);
    white-space: nowrap;
}

.mm-rate {
    display: block;
    color: var(--mm-muted);
    font-size: 0.7rem;
}

.mm-amount {
    color: var(--mm-ink);
    font-weight: 600;
}

/* Baseline: the grand total's larger figure would otherwise sit its label and the others high. */
.mm-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px 22px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 2px solid var(--mm-line);
    font-variant-numeric: tabular-nums;
}

    .mm-totals > div {
        display: flex;
        align-items: baseline;
        gap: 8px;
        color: var(--mm-muted);
        font-size: 0.8rem;
    }

    .mm-totals strong {
        color: var(--mm-ink);
        font-size: 0.92rem;
    }

    /* Counts on the left, the amounts on the right (an 1804's Suppliers and Invoices): the total
       marked .mm-totals-lead ends the left-hand group. */
    .mm-totals > .mm-totals-lead {
        margin-right: auto;
    }

/* On a phone the amounts after the counts (.is-stacked-phone: an 1804's Net, VAT and Total) take a
   line each on the right, rather than wrapping two to a line; the counts keep the first line. */
@media (max-width: 575.98px) {
    .mm-totals.is-stacked-phone > .mm-totals-lead ~ div {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}

    .mm-totals .mm-grand strong {
        color: var(--mm-accent);
        font-size: 1.1rem;
    }

/* ---------- More of a record (an order's quick view, Views/Orders/_OrderQuickView) ----------
   Several references in a title, one a line (.mm-title-line); a link inside the facts (.mm-link);
   a fact whose value has a small count beside it (.mm-fact-line, .mm-count: "Orders: 6", which
   filters a grid); a muted "nothing here" line (.mm-empty); totals standing alone, without a table
   over them (.mm-totals.is-plain); a group folded under its title (.mm-group-toggle); the record's
   own row in a list of its kind (tr.is-current); a state in a table cell (.mm-state-text); a
   photo's cell (td.mm-col-thumb; the tile is package-photos.css's) and the photo over the dialog
   (.mm-lightbox); the audit line. */
/* A title of several references (an order's POs) beside an aside that keeps its place (the
   Location): the title takes the room left and wraps there, a reference at a time; one reference
   longer than the room still breaks (the title's overflow-wrap). */
.mm-title-row.has-fixed-aside {
    flex-wrap: nowrap;
}

    .mm-title-row.has-fixed-aside > .modal-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mm-title-row.has-fixed-aside > .mm-title-aside {
        flex: none;
    }

.mm-title-po {
    display: inline-block;
    max-width: 100%;
}

/* With the title row on a line of its own, the heading takes the room beside the close button
   (basis 0): a long meta line wraps inside it rather than pushing the close button down. */
.modal .modal-header:has(> .mm-title-row) > .mm-heading {
    flex-basis: 0;
}

/* The state's date and its count beside the chips: "Since 22-Sep-2026 · 9 days". */
.mm-meta-line {
    white-space: nowrap;
}

.mm-meta-sep {
    margin: 0 2px;
}

/* A party's address, phone and email under its name: small, in the value's colour, an icon each. */
.mm-contact {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--mm-ink);
    font-size: 0.74rem;
    font-weight: 400;
}

    span.mm-contact {
        display: flex;
    }

    .mm-contact > .bi {
        flex: none;
        color: var(--mm-muted);
    }

.mm-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}

.mm-link {
    color: inherit;
    text-decoration: none;
}

    .mm-link:hover,
    .mm-link:focus-visible {
        color: var(--mm-accent);
        text-decoration: underline;
    }

.mm-fact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.mm-count {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(107, 118, 134, 0.12);
    color: var(--mm-muted);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}

    a.mm-count:hover,
    a.mm-count:focus-visible {
        background: rgba(16, 110, 234, 0.12);
        color: var(--mm-accent);
    }

.mm-empty {
    margin: 0;
    color: var(--mm-muted);
    font-size: 0.84rem;
}

/* A group's own total under its table (a job's Expenses): on the right, under the Total column,
   without the rule and room of the totals that close the record. */
.mm-totals.is-sub {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

.mm-totals.is-plain {
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* The title row of a folded group is its toggle: the title, a count, and a chevron that turns. */
.mm-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

    /* In the headings' face (site.css sets it on h1–h6), as the other groups' titles: here it is
       a span in a button. */
    .mm-group-toggle .mm-group-title {
        font-family: "Roboto", sans-serif;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mm-group-toggle .bi-chevron-down {
        margin-left: auto;
        font-size: 0.8rem;
        transition: transform 0.2s ease;
    }

    .mm-group-toggle:not(.collapsed) .bi-chevron-down {
        transform: rotate(180deg);
    }

    .mm-group-toggle:hover .mm-group-title,
    .mm-group-toggle:focus-visible .mm-group-title {
        color: var(--mm-accent);
    }

    .mm-group-toggle + .collapse,
    .mm-group-toggle + .collapsing {
        margin-top: 6px;
    }

.mm-table tr.is-current td {
    background: rgba(16, 110, 234, 0.06);
}

.mm-table td.mm-col-no {
    width: 1%;
    color: var(--mm-muted);
}

.mm-state-text {
    font-weight: 600;
}

    .mm-state-text.is-success {
        color: #146c43;
    }

    .mm-state-text.is-warning {
        color: #b54708;
    }

    .mm-state-text.is-muted {
        color: var(--mm-muted);
    }

    .mm-state-text.is-danger {
        color: #b42318;
    }

/* A message's direction in the XML exchange table (_MessagesModal): out is quiet, in is green */
.mm-dir.is-sent {
    color: var(--mm-muted);
}

.mm-dir.is-received {
    color: #146c43;
}

/* The XML tree viewer inside a dialog: the card's corners, the table's own width, no frame */
.modal .mm-messages tr.xml-row > td {
    padding: 0 0 10px;
    background: transparent;
}

.modal .xml-viewer-target {
    margin-top: 2px;
    border: 0;
    border-radius: 12px;
}

/* A thumbnail in a table row: its cell keeps to the photo's width, and the row its usual height. */
.mm-table td.mm-col-thumb {
    width: 1%;
    padding-top: 3px;
    padding-bottom: 3px;
}

.mm-lightbox {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: rgba(15, 28, 46, 0.94);
    cursor: zoom-out;
}

    .mm-lightbox[hidden] {
        display: none;
    }

.mm-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--mm-pad);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* The photo as large as the dialog allows, at its own shape (not stretched to a box and fitted inside it), so a frame
   drawn round it (package-photos.css) hugs the photo. The top padding leaves room for that frame. */
.mm-lightbox-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    padding: 4px var(--mm-pad) var(--mm-pad);
}

    /* 4px less each way: room for the frame, whose outer edge then sits on the padding lines. */
    .mm-lightbox-stage img {
        max-width: calc(100% - 8px);
        max-height: calc(100% - 8px);
    }

/* Who and when, closing the body: one muted line, its parts apart by a dot. The dot ends a part,
   so a part that wraps to a second line (on a phone) doesn't start it. */
.mm-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 18px 0 0;
    color: var(--mm-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

    .mm-audit > span:not(:last-child)::after {
        content: "·";
        margin: 0 8px;
    }

/* Facts whose left column holds a long block (an order's supplier with its address and contact):
   one column on a phone, where two would break the email and the address into fragments. */
@media (max-width: 575.98px) {
    .mm-facts.is-split.is-stacked-phone {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A quick view moving to another record (a PO in its stock list): the record on show dims until
   the next one arrives, rather than the dialog shrinking to a spinner and growing again. */
.modal .modal-content.is-turning .modal-body {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

/* ---------- Previous / next (a footer: .modal-footer.mm-pager) ----------
   The item before on the left and the one after on the right, each a label over its title; between
   them the two arrows and where the reader is ("3 / 10"). An end with nothing beyond it keeps its
   place, empty, so the arrows stay in the middle. */
.modal .mm-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 10px var(--mm-pad);
}

    .modal .mm-pager[hidden] {
        display: none;
    }

    .modal .mm-pager > * {
        margin: 0;
    }

.mm-pager-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--mm-ink);
    text-align: left;
    transition: background-color 0.2s ease;
}

    .mm-pager-link.is-next {
        align-items: flex-end;
        text-align: right;
    }

    .mm-pager-link:hover,
    .mm-pager-link:focus-visible {
        background: rgba(48, 79, 127, 0.07);
    }

    .mm-pager-link:disabled {
        visibility: hidden;
    }

.mm-pager-label {
    color: var(--mm-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-pager-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mm-pager-arrows {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mm-pager-arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--mm-line);
    border-radius: 50%;
    background: #fff;
    color: var(--mm-blue);
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .mm-pager-arrow:hover:not(:disabled),
    .mm-pager-arrow:focus-visible {
        border-color: var(--mm-blue);
        background: var(--mm-ink);
        color: #fff;
    }

    .mm-pager-arrow:disabled {
        opacity: 0.35;
    }

.mm-pager-count {
    min-width: 3.2em;
    color: var(--mm-muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The body, as the reader steps to another item. */
.mm-turn {
    animation: mm-turn 0.22s ease-out;
}

@keyframes mm-turn {
    from {
        opacity: 0;
        transform: translateX(calc(var(--mm-turn-from, 1) * 12px));
    }
}

/* ---------- A list of dated entries (the release notes): a quiet timeline ---------- */
.mm-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

    .mm-timeline::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 4px;
        width: 2px;
        border-radius: 1px;
        background: var(--mm-line);
    }

.mm-entry {
    position: relative;
}

    .mm-entry + .mm-entry {
        margin-top: 26px;
    }

    .mm-entry::before {
        content: "";
        position: absolute;
        top: 6px;
        left: -22px;
        width: 10px;
        height: 10px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--mm-blue);
        box-shadow: 0 0 0 1px var(--mm-line);
    }

    .mm-entry:first-child::before {
        background: var(--mm-accent);
    }

    /* A list in a note is a list of its own, not one nested in the timeline's. */
    .mm-entry ul {
        list-style: disc;
    }

.mm-entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--mm-muted);
    font-size: 0.76rem;
}

/* Two classes: the body's reading styles (.mm-prose h3) would otherwise set its margins. */
.mm-entry .mm-entry-title {
    margin: 0 0 6px;
    color: var(--mm-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Waiting for the body, or nothing to show. */
.mm-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--mm-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- A map (the Clients and Suppliers grids' address map, address-map.js) ----------
   The map runs to the body's edges, under the header's address and phone; the footer links out to
   Google Maps. The section chip on the site's blue, the record's short name beside it in the plain
   chip. The address line runs the header's full width (a row of its own under the title and the
   close button), the phone at its right end. */
.modal .mm-map-header {
    flex-wrap: wrap;
    row-gap: 0;
}

    .mm-map-header > .mm-sub {
        flex: 1 1 100%;
        align-items: center;
    }

/* The phone half as large again as the address, for reading off to dial; line-height 1 keeps it to
   the address line's height (0.8rem x 1.5 = 1.2rem x 1), so nothing around it moves. */
.mm-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--mm-ink);
    font-weight: 700;
    white-space: nowrap;
}

    .mm-phone[hidden] {
        display: none;
    }

    /* A box of its own: Bootstrap Icons drop the glyph by .125em, which would make the line taller. */
    .mm-phone > .bi {
        display: flex;
    }

.modal .mm-map-body {
    padding: 0;
}

/* Two classes: site.css's .address-map sets the details pages' 400px. */
.modal .mm-map {
    height: min(62vh, 480px);
    background: #eef2f7;
}

.mm-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mm-accent);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

    .mm-map-link:hover,
    .mm-map-link:focus-visible {
        text-decoration: underline;
    }

    .mm-map-link[hidden] {
        display: none;
    }

/* A client's quick view (Clients/_ClientQuickView): the inline map and its lazy Statistics panel
   (_ClientQuickViewStats) share one box, so opening Statistics rises up to hide the map rather than growing the
   dialog; the map keeps its own fullscreen control. Here rather than in the Clients sheet: the quick view opens from
   Persons and Vessels too (quick-view.js has the toggle). The quick view's own, shorter map. */
.mm-map.is-compact {
    height: 200px;
}

/* overflow: hidden alone leaves the corners square under Chromium's composited layers (the frosted panel's backdrop
   filter, the map's tiles): they showed past the radius (the user, 2026-10-23). clip-path cuts those too, and the
   panel has the box's corners of its own. */
.ctv-map-wrap {
    position: relative;
    height: 200px;
    border-radius: var(--alma-radius);
    overflow: hidden;
    clip-path: inset(0 round var(--alma-radius));
}

    .ctv-map-wrap .mm-map {
        height: 100%;
    }

/* Frosted glass over the map (blurred under it), tinted as the facts block above it rather than a white sheet (the
   user, 2026-10-23: too white by day and at night). Its own close sits in the corner; the section's heading above
   the box says Statistics while it is up. */
.ctv-stats-panel {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    padding: .75rem 3rem .75rem .75rem;
    border-radius: inherit;
    background: rgba(238, 243, 249, 0.80);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    transform: translateY(100%);
    transition: transform .2s ease;
}

    .ctv-stats-panel.is-open {
        transform: translateY(0);
    }

    /* Once the panel is up the map is hidden (after the slide, so it rises over the map; back at once on closing):
       its light tiles still showed as a thin arc through the panel's anti-aliased corners. */
    .ctv-map-wrap:has(> .ctv-stats-panel.is-open) > .mm-map {
        visibility: hidden;
        transition: visibility 0s .2s;
    }

html[data-v3-scene="sunset"] body.shell-v3 .ctv-stats-panel {
    background: rgba(250, 238, 228, 0.80);
}

/* At night the facts block's tone (a touch lighter than the window) and its faint ring, so the panel keeps an edge
   once the map under it is hidden */
html[data-v3-scene="night"] body.shell-v3 .ctv-stats-panel {
    background: rgba(40, 47, 58, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(14px) brightness(.7) saturate(.8);
    backdrop-filter: blur(14px) brightness(.7) saturate(.8);
}

/* The close's disc is for the white window: on the panel's tint it read as a darker hole (the user, 2026-10-23), so
   just the × at rest, a light disc under the pointer */
.ctv-stats-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: transparent;
}

    .ctv-stats-close:is(:hover, :focus-visible) {
        background: rgba(255, 255, 255, 0.55);
    }

html[data-v3-scene="night"] body.shell-v3 .ctv-stats-close:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.08);
}

/* Its count buttons write out their own margin and padding (site.css's global .btn / .badge rules retired, Phase 3) */
.ctv-stats-panel .btn {
    margin-bottom: 0;
}

.ctv-stats-panel .badge {
    margin: 0 0 0 .25rem;
    padding: 4px 8px;
}

/* ---------- The four kinds of modal (docs/archive/UI_MODERNIZATION_PLAN.md, 1.5) ----------
   Read-only quick view   closes on Esc and on a click outside (Bootstrap's default)
   Form                   data-bs-backdrop="static"; the body is .mm-form
   Confirm                .mm-compact, data-bs-backdrop="static"
   Tool / list window     modal-xl, modal-dialog-scrollable

   Chips carry a state: .mm-chip.is-success | is-warning | is-danger | is-muted | is-alma, painted as the grid cards'
   chips (v3.css §4b). */

/* A country's flag in a chip (twemoji draws it; site.css sizes .flag 20px with a lift). */
.mm-chip .flag img {
    width: 14px !important;
    height: 14px !important;
    margin: 0;
}

/* A country's flag beside a title (an agent's): as tall as the title's own text. */
.modal .modal-title .flag img {
    width: 1em !important;
    height: 1em !important;
    margin: 0 0.3em 0 0;
    vertical-align: -0.12em;
}

/* A link or a button, the same pill. */
a.mm-btn {
    display: inline-block;
    text-decoration: none;
}

/* A button's text beside its icon (.mm-btn-label); below sm only the icon shows. */
.mm-btn-label {
    margin-left: 0.25rem;
}

@media (max-width: 575.98px) {
    .mm-btn-label {
        display: none;
    }

    /* An icon-only button narrower, so a footer of six (an 1804's Delete, Convert to AES, Create
       Job, Print, Edit, Full details) keeps to one line at 360px. */
    .mm-btn:has(> .mm-btn-label) {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* A footer of many buttons (.mm-tiered, _QuickViewActions with QuickViewActionsVm.Tiered: an
   1804's; its Delete an icon throughout) gives up its labels in turn as the window narrows: tier 0
   (a link opting in, as Vessels' Orders/Exports) below xl, tier 1 (Print, Edit) below lg, tier 2
   (Create / Open Job, Full details) below md, the rest (Convert to AES) below sm as any. */
@media (max-width: 1199.98px) {
    .mm-tiered .mm-btn-label.is-tier-0 {
        display: none;
    }

    .mm-tiered .mm-btn:has(> .mm-btn-label.is-tier-0) {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 991.98px) {
    .mm-tiered .mm-btn-label.is-tier-1 {
        display: none;
    }

    .mm-tiered .mm-btn:has(> .mm-btn-label.is-tier-1) {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 767.98px) {
    .mm-tiered .mm-btn-label.is-tier-2 {
        display: none;
    }

    .mm-tiered .mm-btn:has(> .mm-btn-label.is-tier-2) {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* An icon-only button (a tiered footer's Delete): the narrower padding at every width. */
.mm-btn.is-icon {
    padding-right: 12px;
    padding-left: 12px;
}

/* A button fetching what it opens (quick-view.js, [data-quick-view-modal]). */
.mm-btn[aria-busy] {
    cursor: progress;
    opacity: 0.7;
}

.mm-btn.is-danger {
    background: var(--pill-danger-bg);
    color: var(--pill-danger-fg);
}

    .mm-btn.is-danger:hover,
    .mm-btn.is-danger:focus-visible {
        background: var(--pill-danger-bg-h);
        color: var(--pill-danger-fg);
    }

/* The quieter destructive button (a quick view's Delete goes solid, R10 in docs/archive/v2_STYLES_HOMOGENIZATION.md). */
.mm-btn.is-danger.is-quiet {
    background: var(--pill-danger-quiet-bg);
    color: var(--pill-danger-quiet-fg);
}

    .mm-btn.is-danger.is-quiet:hover,
    .mm-btn.is-danger.is-quiet:focus-visible {
        background: var(--pill-danger-quiet-bg-h);
        color: var(--pill-danger-quiet-fg-h);
    }

.mm-btn.is-success {
    background: var(--pill-success-bg);
    color: var(--pill-success-fg);
}

    .mm-btn.is-success:hover,
    .mm-btn.is-success:focus-visible {
        background: var(--pill-success-bg-h);
        color: var(--pill-success-fg);
    }

/* The AL-MA blue pill, as btn-alma: the 1804 quick view's Convert to AES and the Convert to
   AES window's confirm (the user, 2026-10-15). */
.mm-btn.is-alma,
.mm-btn[data-convert-confirm] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

    .mm-btn.is-alma:hover,
    .mm-btn.is-alma:focus-visible,
    .mm-btn[data-convert-confirm]:not(:disabled):hover,
    .mm-btn[data-convert-confirm]:not(:disabled):focus-visible {
        background: var(--btn-primary-bg-h);
        color: var(--btn-primary-fg);
    }

/* Confirm: a small dialog, its question in the body and the answer in the footer. */
@media (min-width: 576px) {
    .modal.mm-compact .modal-dialog {
        max-width: 480px;
    }
}

.modal.mm-compact .modal-footer {
    justify-content: flex-end;
}

/* A small note at the footer's left, before the buttons (the record's id on a delete confirm). */
.mm-footnote {
    margin-right: auto;
    color: var(--mm-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

    .mm-footnote:empty {
        display: none;
    }

/* Form: the fields keep the site's standard (components.css §1); the grid spaces them, so the
   10px site.css puts under every floating field and the 5px under every .btn are dropped. */
.mm-form .form-floating {
    padding-bottom: 0;
}

.mm-form .btn {
    margin-bottom: 0;
}

/* A form whose parts are stacked one under another (an order's quick edits): one gap between
   them, whatever each part is; a field grid (.row) keeps its own gutters. */
.mm-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .mm-stack > :not(.row) {
        margin-top: 0;
        margin-bottom: 0;
    }

/* A line of help under the fields, in the facts' muted colour. */
.mm-hint {
    color: var(--mm-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* A piece per row (an order's packing): its number, then its measurements as joined floating
   fields (components.css §2), on a phone with the short labels. */
.mm-pieces {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mm-pieces:empty {
        display: none;
    }

.mm-piece-no {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(48, 79, 127, 0.08);
    color: var(--mm-blue);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A panel in a form or a quick view: a quiet title over its content. */
.mm-section {
    padding: 12px 14px;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
}

    .mm-section + .mm-section {
        margin-top: 14px;
    }

    .mm-section > :last-child {
        margin-bottom: 0;
    }

/* ---------- Documents and files (an export's Documents window) ----------
   .mm-docs: the documents a record prints, one button a row (.mm-doc: an icon, the name). Then a
   .mm-group whose title row has a small icon button on its right (.mm-group-title-row,
   .mm-icon-btn), over a list of files (.mm-files: .mm-file rows, the name and its size). */
.mm-docs {
    display: grid;
    gap: 8px;
}

.mm-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    background: #fff;
    color: var(--mm-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    /* The icon (or, building, the spinner in its place) in a box of its own size, so the button
       keeps its height whichever shows. */
    .mm-doc > i {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        color: #b42318;
        font-size: 1.15rem;
        line-height: 1;
    }

    .mm-doc:hover:not(:disabled),
    .mm-doc:focus-visible {
        border-color: var(--mm-blue);
        background: rgba(48, 79, 127, 0.05);
    }

    .mm-doc:disabled {
        opacity: 0.45;
    }

    /* A document being generated: a spinner in place of its icon; the window stays open. */
    .mm-doc-spinner {
        display: none;
        flex: none;
        width: 1.1rem;
        height: 1.1rem;
        margin: 0.075rem;
        border-width: 0.15em;
        color: var(--mm-blue);
    }

    .mm-doc.is-busy {
        border-color: var(--mm-blue);
        cursor: progress;
    }

        .mm-doc.is-busy > i {
            display: none;
        }

        .mm-doc.is-busy > .mm-doc-spinner {
            display: inline-block;
        }

        .mm-doc:disabled > i {
            color: var(--mm-muted);
        }

.mm-docs-cloud {
    margin-top: 20px;
}

.mm-group-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mm-icon-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(48, 79, 127, 0.08);
    color: var(--mm-blue);
    font-size: 0.85rem;
}

    .mm-icon-btn:hover,
    .mm-icon-btn:focus-visible {
        background: rgba(48, 79, 127, 0.16);
        color: var(--mm-ink);
    }

.mm-files {
    display: flex;
    flex-direction: column;
}

.mm-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(48, 79, 127, 0.07);
    color: var(--mm-ink);
    font-size: 0.84rem;
    text-decoration: none;
}

    .mm-file:hover,
    .mm-file:focus-visible {
        background: rgba(48, 79, 127, 0.05);
        color: var(--mm-ink);
    }

.mm-file-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-file-size {
    flex: none;
    color: var(--mm-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

/* A row of actions over a window's content (the Photos window's Add Photos, its status beside it
   on the same line: "No photos uploaded yet", "Uploading…"). */
.mm-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .mm-toolbar .btn {
        flex: none;
        margin: 0;
    }

    .mm-toolbar > :not(.btn) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
    .modal {
        --mm-pad: 18px;
    }

        .modal .modal-title {
            font-size: 1.15rem;
        }

        /* The MRN and the B/L share one line on a phone. */
        .mm-title-row {
            flex-wrap: nowrap;
            gap: 10px;
        }

            .modal .mm-title-row .modal-title {
                min-width: 0;
                font-size: 1rem;
            }

        .mm-title-aside {
            flex: none;
            gap: 4px;
            font-size: 0.8rem;
        }

        /* Previous / next: the labels only; the titles would not fit. */
        .modal .mm-pager {
            gap: 8px;
        }

        .mm-pager-title {
            display: none;
        }

        .mm-choices td,
        .mm-choice-col {
            width: 64px;
        }
}

@media (prefers-reduced-motion: reduce) {
    body.mm-opening > .modal-backdrop,
    body.mm-closing > .modal-backdrop {
        animation: none;
    }

    .modal.fade,
    .modal.fade .modal-dialog,
    .mm-close,
    .mm-btn,
    .mm-pager-link,
    .mm-pager-arrow,
    .mm-group-toggle .bi-chevron-down,
    .modal .modal-content.is-turning .modal-body {
        transition: none;
    }

    .mm-turn {
        animation: none;
    }

    .modal.fade .modal-dialog {
        transform: none;
    }
}

/* ---------- Lookup windows (Job Vendors, Job Types, Customs Offices) ----------
   _Manage*Modal.cshtml with _ManageLookupsScripts.cshtml: a filter over the records, the records in a
   box of their own that scrolls under its column labels (an inactive one grey, one just added lit),
   then a section adding a new one with every field of its full Create page. */
.mm-lookup-filter {
    position: relative;
    margin-bottom: 10px;
}

    .mm-lookup-filter > .bi {
        position: absolute;
        top: 50%;
        left: 12px;
        color: var(--mm-muted);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .mm-lookup-filter .form-control {
        height: 38px;
        padding-left: 36px;
        font-size: 0.875rem;
    }

.mm-lookup-list {
    max-height: min(40vh, 340px);
    overflow: auto;
    border: 1px solid var(--mm-line);
    border-radius: 10px;
}

    .mm-lookup-list .mm-table {
        margin: 0;
    }

    /* The labels stay at the top of the box; a sticky cell's own border scrolls away, so its rule
       is a shadow. */
    .mm-lookup-list thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        box-shadow: inset 0 -1px 0 var(--mm-line);
    }

    .mm-lookup-list th:first-child,
    .mm-lookup-list td:first-child {
        padding-left: 12px;
    }

    .mm-lookup-list th:last-child,
    .mm-lookup-list td:last-child {
        padding-right: 12px;
    }

    .mm-lookup-list tr.is-inactive td {
        color: var(--mm-muted);
    }

    .mm-lookup-list tr.is-added td {
        animation: mm-lookup-added 2.4s ease-out;
    }

@keyframes mm-lookup-added {
    from {
        background-color: rgba(25, 135, 84, 0.18);
    }

    to {
        background-color: transparent;
    }
}

.mm-lookup-state {
    padding: 14px 12px;
    color: var(--mm-muted);
    font-size: 0.85rem;
    text-align: center;
}

.mm-lookup-new {
    margin-top: 14px;
}

    .mm-lookup-new .mm-group-title {
        margin-bottom: 10px;
    }

    .mm-lookup-new .mm-note {
        margin-top: 10px;
    }

/* The switches beside the fields: on the fields' line, a field high. */
.mm-lookup-switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    min-height: var(--field-h);
}

    .mm-lookup-switches .form-check {
        margin: 0;
    }

.mm-lookup-new-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* The full page's link, at the footer's left. */
a.mm-lookup-page {
    color: var(--mm-accent);
    text-decoration: none;
}

    a.mm-lookup-page:hover {
        text-decoration: underline;
    }

@media (prefers-reduced-motion: reduce) {
    .mm-lookup-list tr.is-added td {
        animation: none;
        background-color: rgba(25, 135, 84, 0.12);
    }
}

/* ---------- Search and list windows (the Orders index's Advanced Search; the 1804 index's Invoice
   Search and pending lists) ----------
   .mm-search on the modal: only the result rows scroll. Its body is a column that doesn't scroll
   itself: the form, a note, the tabs and the count keep their height, .mm-search-results takes
   what is left, and inside it the table's own box (.mm-results-scroll) scrolls, both ways (a narrow
   window scrolls the columns sideways), under its column labels, which stick to its top. */
.modal.mm-search .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .modal.mm-search .modal-body > * {
        flex: none;
    }

    .modal.mm-search .modal-body > .mm-search-results {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

/* A focus ring's width (Bootstrap's 0.25rem) clear on the left, the box drawn out by as much into the window's padding:
   a row's tick sits at the table's left edge (an .mm-table's first column has no left padding), where the box's
   overflow would clip the ring. The table itself stays in line with the fields and tabs above. */
.mm-results-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin-left: -0.25rem;
    padding-left: 0.25rem;
    overflow: auto;
    scrollbar-width: thin;
}

    /* The labels stay over the rows. A sticky cell's border would scroll away with a collapsed
       table's, so its rule is a shadow. */
    .mm-results-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 0;
        background: #fff;
        box-shadow: inset 0 -1px 0 var(--mm-line);
    }

    /* The last column clear of the box's scrollbar (an .mm-table's last column has no right padding). */
    .mm-results-scroll .mm-table th:last-child,
    .mm-results-scroll .mm-table td:last-child {
        padding-right: 8px;
    }

/* While the dialog eases to its new height (AlmaModal.resizeAround, modal.js) the rows are
   clipped rather than scrolled, so no scrollbar flashes in and out. */
.modal.mm-search.is-resizing .mm-results-scroll {
    overflow: hidden;
}

/* A row that opens its record; the terms searched for are marked. */
.mm-table.is-clickable tbody tr {
    cursor: pointer;
}

    .mm-table.is-clickable tbody tr:hover,
    .mm-table.is-clickable tbody tr:focus-visible {
        background: rgba(48, 79, 127, 0.05);
        outline: none;
    }

.mm-table mark {
    padding: 0;
    border-radius: 2px;
    background: #ffeb3b;
}

/* A row's tick (a pending list: which declarations to update or email); the column label's tick
   ticks them all. Element and class, after the table's td:first-child: the first column, it would
   otherwise take the table's width. */
.mm-table th.mm-col-check,
.mm-table td.mm-col-check {
    width: 1%;
    padding-right: 4px;
    white-space: nowrap;
}

    .mm-table .mm-col-check .form-check-input {
        margin: 0;
        vertical-align: middle;
    }

/* The checkboxes and radios of one question, a few to a row, in the window's reading size
   (Bootstrap's 1rem would outsize the fields' values): the Orders index's Excel / PDF. */
.mm-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 2px 16px;
    font-size: 0.9rem;
}

    .mm-checks .form-check {
        margin: 0;
    }

/* A question's label over its choices (Order Filter, Time Period…): the facts' label style. */
.mm-form-label {
    margin: 0 0 6px;
    color: var(--mm-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* A search's buttons, on the right under its fields. */
.mm-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* Tabs in a window (the 1804 pending lists, one a customs office): underlined in the site's blue,
   on one line that scrolls sideways when they don't fit. A tab's count is a small pill; the one
   counting what is ticked in it is the accent's (.is-picked). */
.modal .nav-tabs {
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--mm-line);
    scrollbar-width: none;
}

    .modal .nav-tabs .nav-link {
        margin-bottom: 0;
        padding: 7px 10px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: none;
        color: var(--mm-muted);
        font-size: 0.84rem;
        font-weight: 600;
        white-space: nowrap;
    }

        .modal .nav-tabs .nav-link:hover,
        .modal .nav-tabs .nav-link:focus-visible {
            color: var(--mm-ink);
        }

        .modal .nav-tabs .nav-link.active {
            border-bottom-color: var(--mm-blue);
            color: var(--mm-blue);
        }

.mm-tab-count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(48, 79, 127, 0.08);
    color: var(--mm-blue);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

    .mm-tab-count.is-picked {
        background: var(--mm-accent);
        color: #fff;
    }

/* A group in a list (a client's declarations): its name, its count and an action on one row. */
.mm-list-group + .mm-list-group {
    margin-top: 14px;
}

.mm-list-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.mm-list-group-title {
    min-width: 0;
    overflow: hidden;
    color: var(--mm-ink);
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-list-group-head .mm-btn {
    flex: none;
    margin-left: auto;
}

/* A small pill button (a group's Email Client). */
.mm-btn.is-small {
    padding: 4px 12px;
    font-size: 0.78rem;
}

/* Fields in a table's cells (the AES conversion's measures, .mm-measures): narrow columns of small
   inputs, the row's text on their line; a row breaking a rule is tinted red. */
.mm-table th.mm-col-input,
.mm-table td.mm-col-input {
    width: 6.5rem;
    min-width: 5rem;
}

.mm-table.mm-measures td {
    vertical-align: middle;
}

.mm-table.mm-measures td.mm-col-input {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mm-table tr.is-invalid td {
    background: rgba(217, 45, 32, 0.06);
}

/* A footer's error, at its left where the footnote goes. */
.mm-footnote.is-error {
    color: #b42318;
    font-size: 0.78rem;
}

/* An email's body as typed: a fixed-width font, so its padded table of MRNs lines up. */
.mm-mono {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.82rem;
}

/* ---------- Key figures (Customs' Submit to AES window) ----------
   The few figures a user must check before an irreversible step, at the header's right: a label over a
   bold value in a tinted box (.mm-keyfig, .is-wide for a long value such as a waybill, .is-warning
   when the figure disagrees with its source). Under the title on a phone. .mm-heading-sub is the
   line under a header's title (the vessel under the client). .mm-confirm-check is the tick that
   lets the window's button be pressed. */
.mm-heading-sub {
    margin-top: 2px;
    color: var(--mm-muted);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.modal .modal-header:has(> .mm-keyfigs) {
    flex-wrap: wrap;
}

.mm-keyfigs {
    display: flex;
    flex: none;
    gap: 8px;
    margin: 0;
}

.mm-keyfig {
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--mm-line);
    border-radius: 10px;
    background: rgba(48, 79, 127, 0.06);
    text-align: right;
}

    .mm-keyfig dt {
        color: var(--mm-muted);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .mm-keyfig dd {
        margin: 0;
        color: var(--mm-ink);
        font-size: 1.15rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    .mm-keyfig.is-warning {
        border-color: rgba(220, 53, 69, 0.45);
        background: rgba(220, 53, 69, 0.08);
    }

        .mm-keyfig.is-warning dd i {
            color: #b02a37;
            font-size: 0.95rem;
        }

@media (max-width: 767.98px) {
    .modal-header > .mm-keyfigs {
        flex: 1 1 100%;
        order: 3;
    }

    .mm-keyfig {
        flex: 1 1 0;
        text-align: left;
    }

        .mm-keyfig.is-wide {
            flex: 2 1 0;
        }
}

.mm-confirm-check {
    margin-top: 18px;
    padding: 12px 14px 12px 2.6rem;
    border: 1px solid var(--mm-line);
    border-radius: 10px;
}