/*--------------------------------------------------------------
# Modern modal (.modal-modern), first used by the landing dashboard's reading windows (an AL-MA post,
# the release notes); written to be taken up by the site's other Bootstrap modals by adding the class.
#
#   <div class="modal fade modal-modern">
#     <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>
#
# Rounded, softly shadowed, a thin line in the site's ink-to-blue across the top; the page behind
# dimmed and slightly blurred; 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-modern
# .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-modern,
.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 modern modal is open. modal-modern.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. */
body.mm-backdrop > .modal-backdrop {
    background-color: rgba(15, 28, 46, 0.45);
    opacity: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    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-modern.fade {
    transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
    .modal-modern .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-modern .modal-dialog.modal-xl {
        max-width: 800px;
    }
}

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

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

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

.modal-modern .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 70px -12px rgba(12, 7, 74, 0.35), 0 0 0 1px rgba(48, 79, 127, 0.08);
}

    /* The line across the top: the panel headers' ink running into the site's blue. */
    .modal-modern .modal-content::before {
        content: "";
        flex: none;
        height: 4px;
        background: linear-gradient(90deg, #1e3553 0%, #304f7f 45%, var(--mm-accent) 100%);
    }

/* ---------- Header ---------- */
.modal-modern .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;
    background: rgba(16, 110, 234, 0.1);
    color: #0b57c2;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

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

.modal-modern .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-modern .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-modern .modal-footer {
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--mm-pad);
    border-top: 1px solid var(--mm-line);
    background: #f7f9fc;
}

.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(--mm-ink);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

    .mm-btn:hover,
    .mm-btn:focus-visible {
        background: var(--mm-blue);
        color: #fff;
    }

/* 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: rgba(48, 79, 127, 0.08);
    color: var(--mm-blue);
}

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

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

.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;
}

.mm-choice-note {
    display: block;
    margin-left: 1.6em;
    color: var(--mm-muted);
    font-size: 0.72rem;
    font-weight: 400;
}

/* ---------- 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-modern .modal-header:has(> .mm-title-row) {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 16px;
    padding-bottom: 14px;
}

    .modal-modern .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;
    }

.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 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;
}

/* 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;
}

.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;
    }

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

/* ---------- 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-modern .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-modern .mm-pager[hidden] {
        display: none;
    }

    .modal-modern .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. */
.mm-chip.is-alma {
    background: var(--mm-blue);
    color: #fff;
}

.modal-modern .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-modern .mm-map-body {
    padding: 0;
}

/* Two classes: site.css's .address-map sets the details pages' 400px. */
.modal-modern .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;
    }

/* ---------- The four kinds of modal (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. */
.mm-chip.is-success {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.mm-chip.is-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #93370d;
}

.mm-chip.is-danger {
    background: rgba(180, 35, 24, 0.1);
    color: #b42318;
}

.mm-chip.is-muted {
    background: rgba(107, 118, 134, 0.12);
    color: var(--mm-muted);
}

/* 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 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;
    }
}

.mm-btn.is-danger {
    background: #b42318;
}

    .mm-btn.is-danger:hover,
    .mm-btn.is-danger:focus-visible {
        background: #912018;
    }

/* The quieter destructive button: a quick view's Delete, set apart on the footer's left. */
.mm-btn.is-danger.is-quiet {
    background: rgba(180, 35, 24, 0.08);
    color: #b42318;
}

    .mm-btn.is-danger.is-quiet:hover,
    .mm-btn.is-danger.is-quiet:focus-visible {
        background: #b42318;
        color: #fff;
    }

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

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

/* A destructive dialog (the Delete confirm): the line across the top in red, not the site's blue;
   its title takes text-danger. */
.modal-modern.mm-danger .modal-content::before {
    background: linear-gradient(90deg, #7a1410 0%, #b42318 45%, #f04438 100%);
}

/* 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 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-modern {
        --mm-pad: 18px;
    }

        .modal-modern .modal-content {
            border-radius: 14px;
        }

        .modal-modern .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-modern .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-modern .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-modern.fade,
    .modal-modern.fade .modal-dialog,
    .mm-close,
    .mm-btn,
    .mm-pager-link,
    .mm-pager-arrow {
        transition: none;
    }

    .mm-turn {
        animation: none;
    }

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