/* =========================================================================
 * design-patterns.css — Unified design-pattern stylesheet
 *
 * One file, many patterns. Each pattern is bracketed by clearly marked
 * BEGIN/END banners and references its authoritative spec under
 * docs/design/<pattern>.md (Methodology B — see docs/design/README.md).
 *
 * WHEN ADDING A NEW PATTERN
 *   1. Append a new section to the bottom of this file using the banner
 *      template below — do NOT add a new top-level CSS file under
 *      wwwroot/css/. Keeping every pattern in this single stylesheet is
 *      a deliberate choice so Views/Shared/_Layout.cshtml does not grow
 *      a new <link> per pattern.
 *   2. Write the spec at docs/design/<pattern>.md.
 *   3. Add an entry to the index in docs/design/README.md.
 *
 * BANNER TEMPLATE
 *   ====================================================================
 *   BEGIN: <Pattern Name> — v<n>
 *   Spec: docs/design/<pattern-slug>.md
 *   ====================================================================
 *   <CSS rules>
 *   ==== END: <Pattern Name> ====
 *
 * Per Methodology B, the spec at docs/design/<pattern>.md is the
 * authoritative source of truth. If a section here diverges from its
 * spec, the spec is correct — sync the section to it.
 *
 * Section order is alphabetical by pattern name; future patterns should
 * be inserted to maintain that ordering.
 * ========================================================================= */


/* =========================================================================
 * BEGIN: Blue Ledger Section - v1
 * Spec: docs/design/blue-ledger-section.md
 *
 * Bounded operational form sections with a visible blue-tinted frame and
 * a quiet header band. Use for long data-entry pages where section
 * boundaries need to stay visible while preserving LM Ops density.
 * ========================================================================= */

.blue-ledger-section {
    --blue-ledger-section-surface: oklch(99% 0.004 250);
    --blue-ledger-section-header: oklch(96.5% 0.018 252);
    --blue-ledger-section-border: oklch(84% 0.035 255);
    --blue-ledger-section-accent: var(--bs-primary, #0d6efd);
    --blue-ledger-section-ink: oklch(28% 0.016 255);
    --blue-ledger-section-muted: oklch(47% 0.018 255);

    background: var(--blue-ledger-section-surface);
    border: 2px solid var(--blue-ledger-section-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px oklch(24% 0.02 255 / 0.06);
    overflow: hidden;
    padding: 16px;
}

.blue-ledger-section > h5,
.blue-ledger-section > .blue-ledger-section__header {
    background: var(--blue-ledger-section-header);
    border-bottom: 2px solid var(--blue-ledger-section-accent);
    margin: -16px -16px 16px;
    padding: 12px 16px;
}

.blue-ledger-section > h5,
.blue-ledger-section > .blue-ledger-section__header h5 {
    border-bottom: 0;
    color: var(--blue-ledger-section-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blue-ledger-section > .blue-ledger-section__header .text-muted,
.blue-ledger-section > .blue-ledger-section__header .manual-payment-note {
    color: var(--blue-ledger-section-muted) !important;
}

.blue-ledger-section > .blue-ledger-section__header .badge.text-bg-secondary {
    background-color: oklch(46% 0.02 255) !important;
    color: oklch(98% 0.004 250) !important;
}

@media (max-width: 575.98px) {
    .blue-ledger-section {
        padding: 12px;
    }

    .blue-ledger-section > h5,
    .blue-ledger-section > .blue-ledger-section__header {
        margin: -12px -12px 14px;
        padding: 11px 12px;
    }
}

/* ==== END: Blue Ledger Section ==== */


/* =========================================================================
 * BEGIN: Click to Copy — v2
 * Spec: docs/design/click-to-copy.md
 *
 * A site-wide cell-level click-to-copy interaction. Two opt-ins:
 *   • Table-level: add `click-to-copy-cells` to the <table>; every
 *     <tbody>/<tfoot> cell becomes a copy target (<thead> excluded).
 *   • Cell-level (v2, row-click-safe): add `click-to-copy-cell` to a
 *     single <td>. Identical visuals, but the click is stopped before it
 *     reaches an enclosing clickable row, so it can live inside a
 *     `clickable-row` without also triggering the row's action.
 *
 *   • On hover: a "click to copy" hint appears at 80% opacity and is
 *     transparent to clicks (pointer-events: none).
 *   • On click: the hover hint hides and a "copied to clipboard..."
 *     indicator appears instantly, then fades over 300ms.
 *   • The full cell area is the click target, not just the text.
 *
 * The companion JS lives in wwwroot/js/design-patterns.js (Click to Copy
 * section) and handles clipboard write + the transient
 * data-copy-state="copied" attribute that triggers the fade animation.
 * ========================================================================= */

/* Establish the cell as a positioning context for the absolutely-
   positioned hover hint and copied-feedback pseudo-elements. Force the
   standard arrow pointer instead of the browser's default text-selection
   I-beam over table cells — the cell is now a click target, not a
   selectable text region. The hover hint (not the cursor) is the
   discoverability cue for the copy interaction. */
.click-to-copy-cells tbody td,
.click-to-copy-cells tfoot td {
    position: relative;
    cursor: default;
}

/* ---- Hover hint: "click to copy" ----
   ::before is the hover hint. It is centered horizontally and anchored
   so it straddles the cell's top edge — most of the hint sits above the
   cell border but its bottom dips ~10px into the cell, visually tying
   it to the current cell rather than the row above. It fades in on
   hover and is fully transparent to clicks so it never intercepts the
   user's tap. The 70% opacity is readable but soft enough that it does
   not dominate the cell content. */
.click-to-copy-cells tbody td::before,
.click-to-copy-cells tfoot td::before {
    content: "click to copy";
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-in;
    z-index: 20;
}

/* Suppress the hint while the copied feedback is showing — otherwise
   they would visually fight for the same anchor point. */
.click-to-copy-cells tbody td:hover:not([data-copy-state="copied"])::before,
.click-to-copy-cells tfoot td:hover:not([data-copy-state="copied"])::before {
    opacity: 0.7;
}

/* ---- Copied feedback: "copied to clipboard..." ----
   ::after is the post-click confirmation. It is hidden by default and
   reveals when the JS sets data-copy-state="copied" on the cell, then
   fades from opacity 0.7 → 0 over 600ms via the keyframes below. JS
   clears the attribute after ~650ms so the cell returns to its idle
   state. */
.click-to-copy-cells tbody td::after,
.click-to-copy-cells tfoot td::after {
    content: "copied to clipboard...";
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #198754;          /* bootstrap success green */
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 21;
}

.click-to-copy-cells tbody td[data-copy-state="copied"]::after,
.click-to-copy-cells tfoot td[data-copy-state="copied"]::after {
    animation: ctc-copied-fade 600ms ease-in forwards;
}

@keyframes ctc-copied-fade {
    from { opacity: 0.7; }
    to   { opacity: 0; }
}

/* ---- Cell-level, row-click-safe variant (v2) ----
   Same visuals as the table-level pattern, applied to one opted-in <td>
   via the `click-to-copy-cell` class. Use inside a clickable row: the
   companion JS stops the click in the capture phase so the row's own
   handler (e.g. opening a modal) does not also fire. */
td.click-to-copy-cell {
    position: relative;
    cursor: default;
}

td.click-to-copy-cell::before {
    content: "click to copy";
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-in;
    z-index: 20;
}

td.click-to-copy-cell:hover:not([data-copy-state="copied"])::before {
    opacity: 0.7;
}

td.click-to-copy-cell::after {
    content: "copied to clipboard...";
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #198754;          /* bootstrap success green */
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 21;
}

td.click-to-copy-cell[data-copy-state="copied"]::after {
    animation: ctc-copied-fade 600ms ease-in forwards;
}

/* ==== END: Click to Copy ==== */


/* =========================================================================
 * BEGIN: Standard Modal — v3
 * Spec: docs/design/standard-modal.md
 * ========================================================================= */

/* ---------- Size variants ---------- */

.standard-modal--xl .modal-dialog { max-width: 95vw; width: 95vw; }
.standard-modal--lg .modal-dialog { max-width: 90vw; width: 90vw; }
.standard-modal--md .modal-dialog { max-width: 75vw; width: 75vw; }

@media (min-width: 768px) {
    .standard-modal--viewport-contained > .modal-dialog > .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    .standard-modal--viewport-contained > .modal-dialog > .modal-content > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
}

/* Keep parent Standard Modals above Bootstrap's generated body backdrop when
   modal markup is rendered from page partials. */
.standard-modal.show {
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
}

.standard-modal.show:not(.standard-modal-child) {
    z-index: 1060;
}

.standard-modal.show .modal-dialog {
    position: relative;
    z-index: 1;
}

.standard-modal:focus {
    outline: 0;
}

/* ---------- Header (blue titlebar) ---------- */

.standard-modal .modal-header {
    background-color: #0d6efd;
    color: white;
    padding: 0.75rem 1rem;
    border-bottom: none;
    position: relative;
    /* Allow header-actions cluster to use absolute centering on desktop. */
}

.standard-modal .modal-header .modal-title {
    color: white;
    margin: 0;
}

.standard-modal .modal-header .btn-close {
    /* White-on-blue: invert Bootstrap's default dark X icon */
    filter: brightness(0) invert(1);
}

/* ---------- Centered header action cluster (desktop) ---------- */

.standard-modal-header-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.75rem;
}

.standard-modal-header-action-btn {
    background-color: white;
    border: none;
    padding: 0.4rem 1rem;
    font-weight: 500;
    color: #0d6efd;
    font-size: 0.8rem;
    transition: background-color 0.2s, color 0.2s;
}

.standard-modal-header-action-btn:hover {
    background-color: #f8f9fa;
    color: #0b5ed7;
}

/* ---------- Mobile adaptations (< 768px) ---------- */

@media (max-width: 767.98px) {
    /* Full-width modal on phones — Bootstrap defaults to a small centered
       dialog; override so all three size variants use the full screen. */
    .standard-modal--xl .modal-dialog,
    .standard-modal--lg .modal-dialog,
    .standard-modal--md .modal-dialog {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
    }

    .standard-modal .modal-content {
        border-radius: 0;
        min-height: 100vh; /* avoid awkward floating short modals */
    }

    /* Stack the header: title row on top, actions row beneath, close X
       remains pinned to the top-right corner of the title row. */
    .standard-modal .modal-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .standard-modal-header-actions {
        position: static;
        transform: none;
        flex: 1 0 100%;
        order: 2;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .standard-modal-header-action-btn {
        font-size: 0.85rem;
        min-height: 38px; /* approachable tap target */
        padding: 0.5rem 0.85rem;
    }

    .standard-modal .modal-header .btn-close {
        margin-left: auto;
        order: 1;
    }
}

/* ---------- Child modal (Level 2 of the 2-level cap) ---------- */

/* Bootstrap defaults: modal z-index 1055, backdrop 1050.
   For a Standard Modal child layered over a parent, we shift the child up
   so it sits above the parent's backdrop and renders its own backdrop in
   between. */

.standard-modal-child {
    z-index: 1070;
}

.standard-modal-child-backdrop {
    z-index: 1065;
}

/* ---------- Unsaved-Close-Confirmation overlay ---------- */

.standard-modal-unsaved-close-confirmation {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 20;
}

.standard-modal-unsaved-close-confirmation__scrim {
    position: absolute;
    inset: 0;
    background: rgba(33, 37, 41, 0.45);
    border-radius: inherit;
}

.standard-modal-unsaved-close-confirmation__dialog {
    position: relative;
    width: min(100%, 430px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.standard-modal-unsaved-close-confirmation__confirm-btn {
    background-color: darkred;
    border-color: darkred;
    color: #fff;
}

.standard-modal-unsaved-close-confirmation__confirm-btn:hover,
.standard-modal-unsaved-close-confirmation__confirm-btn:focus {
    background-color: #6f0000;
    border-color: #6f0000;
    color: #fff;
}

/* ==== END: Standard Modal ==== */


/* =========================================================================
 * BEGIN: Standard Pagination - v1
 * Spec: docs/design/standard-pagination.md
 * ========================================================================= */

.standard-pagination {
    align-items: center;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
}

.standard-pagination__summary {
    color: #495057;
    flex: 1 1 auto;
}

.standard-pagination__nav {
    flex: 0 0 auto;
}

.standard-pagination .pagination {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .standard-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .standard-pagination__nav {
        max-width: 100%;
    }

    .standard-pagination .pagination {
        justify-content: flex-start;
    }
}

/* ==== END: Standard Pagination ==== */


/* =========================================================================
 * BEGIN: Standard Table Sticky — v1
 * Spec: docs/design/standard-table-sticky.md
 * ========================================================================= */

/* ---------- Sortable + sticky header ---------- */

.standard-table-sticky {
    margin-bottom: 0;
}

.standard-table-sticky thead th {
    background: #0d6efd;
    color: white;
    font-weight: 600;
    border: none;
    vertical-align: middle;
    padding: 12px 8px;
    font-size: 0.85rem;

    /* Page-viewport sticky (bounded by the table's containing block) */
    position: sticky;
    top: 0;
    z-index: 10;

    /* Subtle separation from rows while pinned */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.standard-table-sticky th.sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 25px;
}

.standard-table-sticky th.sortable:hover {
    color: #e9ecef; /* light grey — readable on the blue background */
}

.standard-table-sticky th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    opacity: 0.3;
}

.standard-table-sticky th.sortable.sorted-asc::after {
    content: '↑';
    opacity: 1;
}

.standard-table-sticky th.sortable.sorted-desc::after {
    content: '↓';
    opacity: 1;
}

/* ---------- Body cells ---------- */

.standard-table-sticky tbody td {
    vertical-align: middle;
    padding: 10px 8px;
    font-size: 0.85rem;
}

/* ---------- Footer (totals / summary row[s]) ---------- */

/* <tfoot> is the canonical home for totals, subtotals, and other column-
   summary calculations. The footer pins to the bottom of the viewport so
   it remains visible while scrolling and is never overlapped by the
   sticky header (the two pin to opposite edges and never collide). */

.standard-table-sticky tfoot th,
.standard-table-sticky tfoot td {
    background: #e7f1ff;        /* very pale tint of header blue */
    color: #212529;
    font-weight: 600;            /* matches header weight */
    font-size: 0.85rem;
    padding: 10px 8px;
    vertical-align: middle;
    border: none;

    /* Pin to the bottom of the viewport (bounded by the table's containing
       block — same model as the header pinning to the top). */
    position: sticky;
    bottom: 0;
    z-index: 10;

    /* 2px blue accent above the footer (inset, not a border, so it does
       NOT compound with the last <tbody> row's bottom border) plus an
       upward shadow for separation from rows above when pinned. */
    box-shadow:
        inset 0 2px 0 #0d6efd,
        0 -2px 4px rgba(0, 0, 0, 0.15);
}

/* ---------- Shape B — Card wrapper (opt-in) ---------- */

.standard-table-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* overflow MUST stay visible so the sticky header pins to the page
       viewport rather than to this wrapper. Tradeoff: rounded corners do
       not clip child rows. */
    overflow: visible;
}

/* ---------- Shape C — Scroll-contained wrapper (opt-in, rare) ---------- */

.standard-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh; /* required so vertical sticky has a scroll range */
}

/* ==== END: Standard Table Sticky ==== */


/* =========================================================================
 * BEGIN: Stacked Date — v1
 * Spec: docs/design/stacked-date.md
 * ========================================================================= */

.stacked-date {
    display: inline-block;
    white-space: nowrap;
}

.stacked-date__date,
.stacked-date__time {
    display: block;
    line-height: 1.25;
}

.stacked-date__time {
    color: #495057;
    font-size: 0.78rem;
}

/* ==== END: Stacked Date ==== */


/* =========================================================================
 * BEGIN: Tooltips (Purple) — v1
 * Spec: docs/design/tooltips.md
 *
 * Site-wide skin for Bootstrap tooltips: white card with a purple border
 * and a purple titlebar. Activated by adding a tooltip class to the
 * tooltip's outer element via the `customClass` Bootstrap Tooltip option.
 * ========================================================================= */

/* Custom tooltip structure with purple theme */
.tooltip-purple .tooltip-inner {
    background-color: white;
    padding: 0;
    border: 2px solid #5a2d82;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-align: left;
    max-width: 350px;
}

/* Wider variant (40% wider than standard 350px = 490px) */
.tooltip-purple-wide .tooltip-inner {
    max-width: 490px;
}

.tooltip-purple-title {
    background-color: #5a2d82;
    color: white;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
}

.tooltip-purple-body {
    background-color: white;
    color: #212529;
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.tooltip-purple-body-line {
    margin-bottom: 4px;
}

.tooltip-purple-body-line:last-child {
    margin-bottom: 0;
}

.tooltip-purple-notes {
    font-style: italic;
    color: #6c757d;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e9ecef;
}

/* Override Bootstrap tooltip arrow to match purple theme */
.tooltip-purple.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #5a2d82;
}

.tooltip-purple.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #5a2d82;
}

.tooltip-purple.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #5a2d82;
}

.tooltip-purple.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #5a2d82;
}

/* Ensure tooltip has full opacity */
.tooltip-purple {
    opacity: 1 !important;
}

.tooltip-purple .tooltip-inner {
    opacity: 1 !important;
}

/* ==== END: Tooltips (Purple) ==== */


/* =========================================================================
 * BEGIN: Original Document Viewer — v1
 * Spec: docs/design/original-document-viewer.md
 * ========================================================================= */

.original-document-viewer-backdrop {
    align-items: center;
    background: rgba(20, 27, 34, .62);
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 1085;
}

.original-document-viewer-backdrop.show {
    display: flex;
}

.original-document-viewer-modal {
    background: var(--bs-body-bg, #fdfefe);
    border-radius: 8px;
    box-shadow: 0 10px 42px rgba(20, 27, 34, .32);
    display: flex;
    flex-direction: column;
    height: 95vh;
    overflow: hidden;
    width: min(92vw, 1280px);
}

.original-document-viewer-header {
    align-items: center;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex: 0 0 auto;
    gap: .75rem;
    padding: .6rem 1rem;
}

.original-document-viewer-title {
    color: #212529;
    flex: 1 1 auto;
    font-size: .9rem;
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.original-document-viewer-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .35rem;
}

.original-document-viewer-popout {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    white-space: nowrap;
}

.original-document-viewer-close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #6c757d;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 2rem;
}

.original-document-viewer-close:hover,
.original-document-viewer-close:focus {
    color: #dc3545;
}

.original-document-viewer-body {
    background: #e9ecef;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.original-document-viewer-body iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

.original-document-viewer-scroll {
    height: 100%;
    overflow: auto;
    width: 100%;
}

.original-document-viewer-scroll img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.original-document-viewer-loading {
    align-items: center;
    color: #6c757d;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.original-document-viewer-backdrop--dock {
    align-items: stretch;
    background: transparent;
    display: none;
    justify-content: flex-end;
    pointer-events: none;
}

.original-document-viewer-backdrop--dock.show {
    display: block;
}

.original-document-viewer-modal--dock {
    border-left: 1px solid var(--bs-border-color, #d8dee4);
    border-radius: 0;
    bottom: 0;
    box-shadow: -8px 0 24px rgba(20, 27, 34, .18);
    height: 100vh;
    left: calc(var(--original-document-dock-split, 50%) + .75rem);
    pointer-events: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.original-document-dock-resizer {
    align-items: center;
    background: var(--bs-secondary-bg, #e9eef2);
    border: 1px solid var(--bs-border-color, #d8dee4);
    border-radius: 999px;
    cursor: col-resize;
    display: flex;
    height: 4rem;
    justify-content: center;
    left: calc(var(--original-document-dock-split, 50%) - .75rem);
    pointer-events: auto;
    position: absolute;
    touch-action: none;
    top: calc(50vh - 2rem);
    width: 1.5rem;
    z-index: 1;
}

.original-document-dock-resizer:hover,
.original-document-dock-resizer:focus-visible {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2);
    outline: 0;
}

.original-document-dock-resizer-grip {
    border-bottom: 2px solid var(--bs-secondary-color, #5f6973);
    border-top: 2px solid var(--bs-secondary-color, #5f6973);
    height: .7rem;
    width: .35rem;
}

.original-document-dock-resizer:hover .original-document-dock-resizer-grip,
.original-document-dock-resizer:focus-visible .original-document-dock-resizer-grip {
    border-color: var(--bs-body-bg, #fdfefe);
}

.original-document-dock-hint {
    align-items: center;
    background: var(--bs-primary, #0d6efd);
    border-radius: 999px;
    color: var(--bs-body-bg, #fdfefe);
    display: flex;
    font-size: .8rem;
    height: min(2.25rem, 5vh);
    justify-content: center;
    left: 50%;
    max-height: 5vh;
    max-width: 5vw;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(2.25rem, 5vw);
}

.original-document-dock-hint.show {
    animation: original-document-dock-hint-nudge .75s cubic-bezier(.16, 1, .3, 1) 2;
}

body.original-document-dock-dragging,
body.original-document-dock-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.original-document-dock-dragging .original-document-viewer-body iframe {
    pointer-events: none;
}

.modal.original-document-dock-host .modal-dialog {
    margin-left: .75rem !important;
    margin-right: auto !important;
    max-width: calc(var(--original-document-dock-split, 50%) - 1.5rem) !important;
    transition: none !important;
    width: calc(var(--original-document-dock-split, 50%) - 1.5rem) !important;
}

.modal.original-document-dock-host .ola-shipping-charge-row {
    grid-template-columns: 1fr;
}

@keyframes original-document-dock-hint-nudge {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%); }
    20% { opacity: 1; transform: translate(calc(-50% - .35rem), -50%); }
    70% { opacity: 1; transform: translate(calc(-50% + .35rem), -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .original-document-dock-hint.show {
        animation: none;
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .original-document-viewer-modal--dock {
        border-left: 0;
        left: 0;
        width: 100vw;
    }

    .original-document-dock-resizer {
        display: none;
    }

    .modal.original-document-dock-host .modal-dialog {
        visibility: hidden;
    }
}

@media (max-width: 575.98px) {
    .original-document-viewer-modal {
        border-radius: 0;
        height: 100vh;
        width: 100vw;
    }
}

/* ==== END: Original Document Viewer ==== */


/* =========================================================================
 * BEGIN: Operational Monitoring Toolbar — v1
 * Spec: docs/design/operational-monitoring-toolbar.md
 * Compact global service-status tab and reveal panel.
 * ========================================================================= */

.operational-monitoring-shell[hidden] {
    display: none !important;
}

.operational-monitoring-tab {
    align-items: center;
    background: #4f5965;
    border: 1px solid rgba(33, 37, 41, 0.18);
    border-radius: 6px 0 0 6px;
    box-shadow: 0 2px 8px rgba(33, 37, 41, 0.18);
    color: #f8fbff;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 74px;
    width: 38px;
    z-index: 1050;
}

.operational-monitoring-tab:hover,
.operational-monitoring-tab:focus {
    color: #f8fbff;
    outline: 2px solid rgba(13, 110, 253, 0.36);
    outline-offset: 2px;
}

.operational-monitoring-tab--healthy {
    background: #16734c;
}

.operational-monitoring-tab--warning {
    background: #8a4b00;
}

.operational-monitoring-tab--recovering {
    background: #2867b2;
}

.operational-monitoring-tab--error {
    background: #b42318;
}

.operational-monitoring-tab--unknown {
    background: #59616b;
}

.operational-monitoring-panel {
    background: #fbfcfe;
    border: 1px solid rgba(33, 37, 41, 0.16);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(33, 37, 41, 0.22);
    display: none;
    max-height: min(680px, calc(100vh - 136px));
    overflow: hidden;
    position: fixed;
    right: 12px;
    top: 120px;
    width: min(420px, calc(100vw - 24px));
    z-index: 1049;
}

.operational-monitoring-shell.is-open .operational-monitoring-panel {
    display: block;
}

.operational-monitoring-panel__header {
    align-items: flex-start;
    background: #f3f6f9;
    border-bottom: 1px solid rgba(33, 37, 41, 0.12);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .75rem;
}

.operational-monitoring-panel__title {
    color: #212529;
    font-weight: 700;
    line-height: 1.2;
}

.operational-monitoring-panel__subtitle {
    color: #6c757d;
    font-size: .8rem;
    margin-top: .15rem;
}

.operational-monitoring-panel__body {
    max-height: min(580px, calc(100vh - 238px));
    overflow-y: auto;
}

.operational-monitoring-row {
    border-bottom: 1px solid rgba(33, 37, 41, 0.08);
    padding: .75rem;
}

.operational-monitoring-row:last-child {
    border-bottom: 0;
}

.operational-monitoring-row__main {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
}

.operational-monitoring-row__icon {
    color: #495057;
    flex: 0 0 1.2rem;
    padding-top: .1rem;
    text-align: center;
}

.operational-monitoring-row__title {
    color: #212529;
    font-weight: 650;
    line-height: 1.25;
}

.operational-monitoring-row__message {
    color: #495057;
    font-size: .82rem;
    line-height: 1.35;
    margin-top: .2rem;
    white-space: pre-line;
}

.operational-monitoring-row__meta {
    color: #6c757d;
    font-size: .75rem;
    margin-top: .25rem;
}

.operational-monitoring-chip {
    border-radius: 999px;
    color: #f8fbff;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: .28rem .48rem;
    white-space: nowrap;
}

.operational-monitoring-chip--healthy {
    background: #16734c;
}

.operational-monitoring-chip--warning {
    background: #8a4b00;
}

.operational-monitoring-chip--recovering {
    background: #2867b2;
}

.operational-monitoring-chip--error {
    background: #b42318;
}

.operational-monitoring-chip--unknown {
    background: #59616b;
}

@media (max-width: 575.98px) {
    .operational-monitoring-tab {
        top: auto;
        bottom: 72px;
    }

    .operational-monitoring-panel {
        bottom: 70px;
        max-height: min(480px, calc(100vh - 96px));
        top: auto;
    }

    .operational-monitoring-panel__body {
        max-height: min(390px, calc(100vh - 180px));
    }
}

/* ==== END: Operational Monitoring Toolbar ==== */


/* =========================================================================
 * BEGIN: Status Toast — v1
 * Spec: docs/design/status-toast.md
 * ========================================================================= */

.lmops-toast-container {
    z-index: 1100;
}

.lmops-status-toast {
    min-width: min(360px, calc(100vw - 2rem));
}

.lmops-status-toast .toast-body {
    align-items: center;
    display: flex;
    font-weight: 600;
}

.lmops-status-toast__message {
    white-space: pre-line;
}

.lmops-status-toast__action {
    align-self: center;
    flex: 0 0 auto;
    font-weight: 700;
    margin-inline: .25rem;
    white-space: nowrap;
}

/* ==== END: Status Toast ==== */


/* =========================================================================
 * BEGIN: Testing Environment Banner - v1
 * Spec: docs/design/testing-environment-banner.md
 * ========================================================================= */

.testing-environment-banner {
    align-items: center;
    background: oklch(48% 0.19 27 / 0.69);
    border-block: 1px solid oklch(38% 0.16 26 / 0.92);
    box-shadow: 0 1px 4px oklch(20% 0.03 26 / 0.24);
    color: oklch(98% 0.006 25);
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    inset-inline: 0;
    justify-content: center;
    letter-spacing: 0.055em;
    line-height: 1;
    pointer-events: none;
    position: fixed;
    text-align: center;
    text-shadow: 0 1px 1px oklch(20% 0.03 26 / 0.32);
    text-transform: uppercase;
    user-select: none;
    width: 100%;
    z-index: 2147483000;
}

.testing-environment-banner--top {
    top: 0;
}

.testing-environment-banner--bottom {
    bottom: 0;
}

.testing-environment-banner__message {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
}

.testing-environment-banner__icon {
    font-size: 14px;
    line-height: 1;
}

@media (max-width: 480px) {
    .testing-environment-banner {
        font-size: 11px;
        letter-spacing: 0.035em;
    }
}

/* ==== END: Testing Environment Banner ==== */


/* =========================================================================
 * BEGIN: Tethered Drilldown - v1
 * Spec: docs/design/tethered-drilldown.md
 * ========================================================================= */

.tethered-drilldown__trigger {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: oklch(45% 0.16 255);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    justify-content: flex-end;
    line-height: 1.25;
    min-height: 1.75rem;
    min-width: 2rem;
    padding: .16rem .3rem;
    text-align: end;
    text-decoration: underline;
    text-decoration-color: oklch(66% 0.1 255 / 55%);
    text-underline-offset: .16em;
    transition:
        background-color 160ms cubic-bezier(.22, 1, .36, 1),
        border-color 160ms cubic-bezier(.22, 1, .36, 1),
        color 160ms cubic-bezier(.22, 1, .36, 1);
}

.tethered-drilldown__trigger:hover {
    background: oklch(96% 0.025 255);
    border-color: oklch(79% 0.08 255);
    color: oklch(39% 0.15 255);
    text-decoration-color: currentColor;
}

.tethered-drilldown__trigger:focus-visible {
    background: oklch(96% 0.025 255);
    border-color: oklch(58% 0.19 255);
    color: oklch(39% 0.15 255);
    outline: 2px solid oklch(58% 0.19 255);
    outline-offset: 2px;
    text-decoration-color: currentColor;
}

.tethered-drilldown__trigger[aria-pressed="true"] {
    background: oklch(92% 0.05 255);
    border-color: oklch(58% 0.19 255);
    color: oklch(35% 0.14 255);
    font-weight: 750;
    text-decoration-thickness: 2px;
}

.tethered-drilldown__trigger:disabled,
.tethered-drilldown__trigger[aria-disabled="true"] {
    background: transparent;
    border-color: transparent;
    color: oklch(60% 0.015 255);
    cursor: default;
    opacity: .72;
    text-decoration: none;
}

.tethered-drilldown__context {
    align-items: center;
    background: oklch(97% 0.018 255);
    border: 1px solid oklch(82% 0.06 255);
    border-radius: 6px;
    color: oklch(31% 0.02 255);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-block: .5rem;
    min-height: 2.75rem;
    padding: .55rem .7rem;
}

.tethered-drilldown__context[hidden] {
    display: none !important;
}

.tethered-drilldown__context-label {
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
}

[data-tethered-drilldown-busy="true"] .tethered-drilldown__trigger,
[data-tethered-drilldown-busy="true"] [data-tethered-drilldown-back] {
    cursor: wait;
}

@media (max-width: 575.98px) {
    .tethered-drilldown__context {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tethered-drilldown__trigger {
        transition: none;
    }
}

/* ==== END: Tethered Drilldown ==== */