/*--------------------------------------------------------------
# The v2 interface's look for the whole site (body.shell-v2, set by _Layout when UiShellService says the
# request gets v2). It is a layer over site.css, not a replacement: the same header partial and the same pages,
# restyled to match the landing page (landing.css): a header that melts into the page, the page's own
# outline Login button, bare icon buttons, a slim footer strip and no topbar. Nothing here may touch a page's
# own layout; the Admin pages (_AdminLayout) never load it.
--------------------------------------------------------------*/

/* The landing page's sea behind every page: a sky that fades from white to a soft blue, with the waves drawn
   once (img/v2-waves.svg) or moved by v2-waves.js. Fixed to the window, so a long page scrolls over it, and kept
   light all the way down so a page's own text stays readable wherever it falls. A white veil over the top
   (.v2-sea-fade) keeps the sky white down to a little below the header, so the header melts into it with no
   seam, and the waves come in under that. The dashboard's photo and its white veil give way to it. */
/* The scene: day, sunset or night (v2-scene.js sets html[data-v2-scene]; the hours are 06-14, 14-19 and 19-06 by the
   visitor's clock unless the footer cogwheel picks one). A scene is only values for the tokens below, which the sea, the
   waves, the header and the footer read, so a new theme is one more block of them. The sky's colours and the waves' are
   registered, so the browser can fade from one scene to the next (the page jumps where it cannot). Phase 1 changes what
   sits on the sky; the panels stay light cards on every scene. */
@property --v2-sky-0 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --v2-sky-1 { syntax: "<color>"; inherits: true; initial-value: #f0f7fd; }
@property --v2-sky-2 { syntax: "<color>"; inherits: true; initial-value: #dcebf7; }
@property --v2-sky-3 { syntax: "<color>"; inherits: true; initial-value: #c3dbed; }
@property --v2-sky-4 { syntax: "<color>"; inherits: true; initial-value: #aecbe2; }
@property --v2-band-0 { syntax: "<color>"; inherits: true; initial-value: rgba(30, 53, 83, 0); }
@property --v2-band-1 { syntax: "<color>"; inherits: true; initial-value: rgba(30, 53, 83, 0.78); }
@property --v2-glow { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0); }@property --v2-ink { syntax: "<color>"; inherits: true; initial-value: #172b45; }
@property --v2-wave-a { syntax: "<color>"; inherits: true; initial-value: #558ec4; }
@property --v2-wave-b { syntax: "<color>"; inherits: true; initial-value: #75cad0; }
@property --v2-wave-line { syntax: "<color>"; inherits: true; initial-value: #7badcc; }
@property --v2-wave-edge { syntax: "<color>"; inherits: true; initial-value: #83bdcf; }
@property --v2-wave-a-o { syntax: "<number>"; inherits: true; initial-value: 0.07; }
@property --v2-wave-b-o { syntax: "<number>"; inherits: true; initial-value: 0.16; }
@property --v2-footer-solid { syntax: "<color>"; inherits: true; initial-value: #1e3553; }

body.shell-v2 {
    --v2-sky-0: #ffffff;
    --v2-sky-1: #f0f7fd;
    --v2-sky-2: #dcebf7;
    --v2-sky-3: #c3dbed;
    --v2-sky-4: #aecbe2;
    --v2-band-0: rgba(30, 53, 83, 0);
    --v2-band-1: rgba(30, 53, 83, 0.78);
    --v2-glow: rgba(255, 255, 255, 0);
    --v2-ink: #172b45;
    --v2-title: var(--alma-blue, #304f7f);
    --v2-wave-a: #558ec4;
    --v2-wave-b: #75cad0;
    --v2-wave-line: #7badcc;
    --v2-wave-edge: #83bdcf;
    --v2-wave-a-o: 0.07;
    --v2-wave-b-o: 0.16;
    /* The footer strip's own ground where the sea is a plain colour (a phone's Create / Edit form, below): the band's
       deep end (--v2-band-1) made solid, so the strip's light text reads as it does on the band. */
    --v2-footer-solid: #1e3553;
    /* What the still picture (img/v2-waves.svg: blue lines and swells) is turned into when the waves do not move. */
    --v2-still-filter: none;
    --v2-logo-filter: none;
    /* The header logo's night colours (_HeaderLogo.cshtml's silver copy, faded in by the night scene below): white at the
       top of the letters to a light cool grey at their foot ("B" in v2_NIGHT_MOCKUP.html section 13, 2026-10-14) */
    --v2-logo-night-0: #ffffff;
    --v2-logo-night-1: #e6eaef;
    --v2-logo-night-2: #e0e5eb;
    --v2-logo-night-3: #aab4c0;
    transition: --v2-sky-0 1.8s ease, --v2-sky-1 1.8s ease, --v2-sky-2 1.8s ease, --v2-sky-3 1.8s ease, --v2-sky-4 1.8s ease,
        --v2-band-0 1.8s ease, --v2-band-1 1.8s ease, --v2-glow 1.8s ease, --v2-ink 1.8s ease, --v2-wave-a 1.8s ease,
        --v2-wave-b 1.8s ease, --v2-wave-line 1.8s ease, --v2-wave-edge 1.8s ease, --v2-wave-a-o 1.8s ease,
        --v2-wave-b-o 1.8s ease, --v2-footer-solid 1.8s ease;
}

/* Sunset: a peach horizon under a dusk sky, warm waves. The top stays light enough for the dark header text. */
html[data-v2-scene="sunset"] body.shell-v2 {
    --v2-sky-0: #fff8ef;
    --v2-sky-1: #fde7d0;
    --v2-sky-2: #f6c9a6;
    --v2-sky-3: #e5a98f;
    --v2-sky-4: #b98aa5;
    --v2-band-0: rgba(66, 40, 74, 0);
    --v2-band-1: rgba(66, 40, 74, 0.8);
    --v2-glow: rgba(255, 176, 96, 0.5);
    --v2-ink: #3a2740;
    --v2-title: #4a2f55;
    --v2-wave-a: #e0764f;
    --v2-wave-b: #f3a95d;
    --v2-wave-line: #e9a27e;
    --v2-wave-edge: #f0b27c;
    --v2-wave-a-o: 0.1;
    --v2-wave-b-o: 0.22;
    --v2-footer-solid: #42284a;
    --v2-still-filter: hue-rotate(185deg) saturate(1.5);
}

/* Night: a navy sky, moonlit waves; the header and what sits straight on the sky turn light. */
html[data-v2-scene="night"] body.shell-v2 {
    --v2-sky-0: #0d1a2f;
    --v2-sky-1: #12233d;
    --v2-sky-2: #182f50;
    --v2-sky-3: #1d3a60;
    --v2-sky-4: #1a3352;
    --v2-band-0: rgba(5, 12, 24, 0);
    --v2-band-1: rgba(5, 12, 24, 0.85);
    --v2-glow: rgba(120, 160, 230, 0.16);
    --v2-ink: #dbe8f8;
    --v2-title: #dbe8f8;
    --v2-wave-a: #6f9ce0;
    --v2-wave-b: #8fc4ee;
    --v2-wave-line: #9ec0f0;
    --v2-wave-edge: #a9cdf4;
    --v2-wave-a-o: 0.12;
    --v2-wave-b-o: 0.26;
    --v2-footer-solid: #050c18;
        --v2-still-filter: brightness(1.6) saturate(1.2);
}

body.shell-v2 {
    --v2-header: 72px;
    /* The v2 panel: the card every page's content sits on (the grids' card, the Create / Edit / Details cards).
       Translucent white over the waves, a small radius, a hairline shadow. */
    --v2-panel-bg: rgba(255, 255, 255, 0.7);
    --v2-panel-radius: 5px;
    --v2-panel-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    /* The grids' card is raised a little more than the other panels (2026-10-13: its top edge was all but lost against
       the pale sky): a bright bevel along its top inside, a faint shade along its bottom inside, a hairline rim all round
       so its top edge reads, and the panel's drop shadow a little deeper. The debossed look (v2-deboss.css) keeps its
       own copy, so either can change without the other. */
    --v2-grid-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(48, 79, 127, 0.08),
        0 0 0 1px rgba(48, 79, 127, 0.08),
        0 -1px 3px rgba(48, 79, 127, 0.07),
        0 4px 10px -3px rgba(23, 43, 69, 0.24),
        0 1px 3px -1px rgba(0, 0, 0, 0.22);
}

/* .v2-panel is the panel's own name. The older cards that views still carry (the Create / Edit / Details forms'
   .wms-form-shadow, the Jobs / Invoices / TaxInvoices .boxshadowdiv, the Exports / Persons .form-card) take the same look
   here without their views changing, so the classic interface keeps its own. On a phone a form is not a card (site.css
   drops .wms-form-shadow's), so the older cards stay flat there. */
body.shell-v2 .v2-panel {
    background: var(--v2-panel-bg);
    border-radius: var(--v2-panel-radius);
    box-shadow: var(--v2-panel-shadow);
}

@media (min-width: 577px) {
    body.shell-v2 .container-responsive .wms-form-shadow,
    body.shell-v2 .container-responsive .boxshadowdiv,
    body.shell-v2 .container-responsive .form-card {
        background: var(--v2-panel-bg);
        border: 0;
        border-radius: var(--v2-panel-radius);
        box-shadow: var(--v2-panel-shadow);
    }
}

/* The Orders / Exports Details pages' record card and sections (.detail-card, .detail-section) are padded cards at every width. */
body.shell-v2 .detail-card,
body.shell-v2 .detail-section {
    background: var(--v2-panel-bg);
    border: 0;
    border-radius: var(--v2-panel-radius);
    box-shadow: var(--v2-panel-shadow);
}

/* .page-card (components.css §8): from md up, the grid card's edge (.v2-card-root::before, below), 14px outside the
   container on each side, with its content back on the container's edge, under the title. A .row inside keeps that edge
   (its -12px margin and its columns' 12px padding cancel). Below md the grids are a list of cards on the container's
   edge, and a .page-card sits there too. */
@media (min-width: 768px) {
    /* The Orders / Exports Details record card and its sections (.detail-page > .detail-card / .detail-section) the same
       way (the user, 2026-10-12: "Details cards edges need to match the grid"). */
    body.shell-v2 .page-card,
    body.shell-v2 .detail-page > :is(.detail-card, .detail-section) {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Orders' sections side by side (.detail-sections, a two-column grid): the grid takes the edge, its sections the
       same 14px inset, so the outer edges meet the grid card's and the left column's content stays under the title. */
    body.shell-v2 .detail-page > .detail-sections {
        margin-left: -14px;
        margin-right: -14px;
    }

        body.shell-v2 .detail-page > .detail-sections > .detail-section {
            padding-left: 14px;
            padding-right: 14px;
        }

    /* Clients / Suppliers / Vessels Details: the record card and its map (.detail-pair), and a section that opens under
       them (.detail-collapse), on the same edge; the record card's content under the title. The map card keeps its
       own thin frame. */
    body.shell-v2 .detail-page > :is(.detail-pair, .detail-collapse) {
        margin-left: -14px;
        margin-right: -14px;
    }

        body.shell-v2 .detail-page > .detail-pair > .detail-card:not(.detail-map-card),
        body.shell-v2 .detail-page > .detail-collapse > .detail-section {
            padding-left: 14px;
            padding-right: 14px;
        }

    /* A left-aligned page header (grids, Details, full-width forms) on the cards' edge too: the title's icon starts where
       the card and the logo do, its buttons end where the card does (the user, 2026-10-12, once the icons came back; it
       replaced the indented title). A centred form's header stays centred over its form. */
    body.shell-v2 .page-header:not(.wms-centerdiv.has-page-header .page-header) {
        margin-left: -14px;
        margin-right: -14px;
    }

    /* The Customs declaration form (Create / Edit) and the Calculators: their tab row and their tab panel (the panel is the
       card there) on the same edge, the panel's content back on the container's edge. */
    body.shell-v2 .customs-form > .d-flex:has(> #customsTabs),
    body.shell-v2 .customs-form > .tab-content,
    body.shell-v2 #calculatorsTab,
    body.shell-v2 #calculatorsTabContent {
        margin-left: -14px;
        margin-right: -14px;
    }

    body.shell-v2 .customs-form > .tab-content,
    body.shell-v2 #calculatorsTabContent {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* A card that pads its own content (a Bootstrap .card with its header and body, a .wms-form-shadow with its p-*) on the
       cards' edge: only its margin moves (.page-card also re-pads). A card that is itself a .row (Clients / Persons /
       Suppliers Details) the same way: its columns pad the content. */
    body.shell-v2 .page-bleed,
    body.shell-v2 .row.page-card-row {
        margin-left: -14px;
        margin-right: -14px;
    }

    /* A row of cards in columns (Vessels / Imports Details): the outer cards' edges on the cards' edge, past the row's
       own gutter. */
    body.shell-v2 .row.page-cards-row {
        margin-left: calc(-14px - var(--bs-gutter-x) * .5);
        margin-right: calc(-14px - var(--bs-gutter-x) * .5);
    }

    /* The header's logo and icons on the same edge as the cards (the user, 2026-10-12). */
    body.shell-v2 #header > .container > .logo-slot {
        margin-left: -14px;
    }

    body.shell-v2 #header > .container > .nav-icons {
        margin-right: -14px;
    }
}

@media (max-width: 768px) {
    body.shell-v2 {
        --v2-header: 60px;
    }
}

body.shell-v2 .v2-sea {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--v2-sky-0) 0%, var(--v2-sky-1) 14%, var(--v2-sky-2) 46%, var(--v2-sky-3) 78%, var(--v2-sky-4) 100%);
}

/* The sun low on the horizon at sunset, a pale moon glow at night (--v2-glow is clear by day), behind the waves. */
body.shell-v2 .v2-sea::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 45% at 78% 62%, var(--v2-glow), rgba(0, 0, 0, 0) 70%);
}

body.shell-v2 .v2-sea-waves {
    position: absolute;
    inset: 0;
    background: url("../img/v2-waves.svg") 0 0 / 100% 100% no-repeat;
    /* The still picture is blue; sunset and night recolour it. (The moving waves take their colours from the tokens, below.) */
    filter: var(--v2-still-filter);
    transition: filter 1.8s ease;
}

body.shell-v2 .v2-sea.is-animated .v2-sea-waves {
    background: none;
    filter: none;
}

/* v2-waves.js draws the moving sea without colours of its own: they come from the scene's tokens. */
body.shell-v2 .v2-sea-waves .v2-stop-a {
    stop-color: var(--v2-wave-a);
    stop-opacity: var(--v2-wave-a-o);
}

body.shell-v2 .v2-sea-waves .v2-stop-b {
    stop-color: var(--v2-wave-b);
    stop-opacity: var(--v2-wave-b-o);
}

body.shell-v2 .v2-sea-waves .v2-currents {
    stroke: var(--v2-wave-line);
}

body.shell-v2 .v2-sea-waves .v2-swell {
    stroke: var(--v2-wave-edge);
}

body.shell-v2 .v2-sea-waves > svg {
    display: block;
    width: 100%;
    height: 100%;
}

body.shell-v2 .v2-sea-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--v2-sky-0) 0, var(--v2-sky-0) calc(var(--v2-header) + 36px), transparent calc(var(--v2-header) + 280px));
}

body.shell-v2 .dash-hero {
    background: none;
}

    body.shell-v2 .dash-hero::before {
        display: none;
    }

@media print {
    body.shell-v2 .v2-sea {
        display: none;
    }
}

/* White ground for what would otherwise be see-through on the waves: the outline buttons (their fill is
   transparent, a white page was behind them), the pager's links and its "..." gap, and a grid's rows. The outline
   classes with a role (components.css §3) have their own fill. */
body.shell-v2 .btn[class*="btn-outline-"]:not(.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-outline-success) {
    --bs-btn-bg: #fff;
    --bs-btn-disabled-bg: #fff;
}

/* The grids' pager has its own strip (components.css, "The pager's look"); this is for any other pagination. */
body.shell-v2 .pagination:not(.grid-pager .pagination, .grid-pager-mobile .pagination) .page-link:not(.active):not(.pagination-active-page) {
    background-color: #fff;
}

/* Every page but the dashboard sits closer to the header: 48px from the logo's bottom edge to the top of the page's
   own heading (the header is 72px with a 22px logo; 60px and 18px on a phone). */
body.shell-v2 .container-responsive {
    padding-top: 14px;
    /* site.css leaves 100px (60px on a phone) under a page for the classic footer; v2's is a slim strip. */
    padding-bottom: 24px;
}

@media (max-width: 768px) {
    body.shell-v2 .container-responsive {
        padding-top: 10px;
        padding-bottom: 20px;
    }
}

/* A grid page (v2-grid.js marks the body .v2-grid-page, the table's frame .v2-scroll and the element holding the
   toolbar, rows and pager .v2-card-root): the page fits the window and only the rows scroll. The column headings
   stay put, the toolbar above and the pager and footer below never move, and nothing slides under the header.
   The toolbar, the table and the pager sit on one white card with rounded corners and a thin pale rim, drawn
   behind them (v2-grid.js sets where it starts and how tall it is), so nothing transparent shows the waves
   through it, and the rows that scroll past the headings never show in a gap above them. */
body.shell-v2.v2-grid-page .container-responsive {
    padding-bottom: 22px;
    /* site.css animates the container's padding; the fit must measure the end state, not the middle of it. */
    transition: none;
}

body.shell-v2 .v2-card-root {
    position: relative;
}

    body.shell-v2 .v2-card-root::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: -14px;
        right: -14px;
        top: var(--v2-card-top, 0);
        height: var(--v2-card-h, 0);
        /* Raised (--v2-grid-card-shadow, above), and a touch brighter over the toolbar (fading out above the column
           headings), as if lit from above. */
        background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40px), var(--v2-panel-bg);
        border-radius: var(--v2-panel-radius);
        box-shadow: var(--v2-grid-card-shadow);
        pointer-events: none;
    }

/* The card's two dividing rules: under the toolbar and over the pager (v2-grid.js sets where, from the card's top). */
body.shell-v2 .v2-card-root::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -14px;
    right: -14px;
    top: var(--v2-card-top, 0);
    height: var(--v2-card-h, 0);
    background: linear-gradient(rgba(48, 79, 127, 0.18), rgba(48, 79, 127, 0.18)) 0 var(--v2-rule-2, -10px) / 100% 1px no-repeat;
    pointer-events: none;
}

body.shell-v2 .v2-scroll {
    overflow: auto;
    overscroll-behavior: contain;
    /* Jobs' own frame leaves room for the table's outline with negative margins; the card does that now. */
    margin: 0;
    padding: 0;
}

    /* The grid's scrollbar: no track, no arrows, a thin glassy blue thumb set off from the rows. site.css sets
   scrollbar-color on everything, which would switch the ::-webkit-scrollbar rules off, so it is reset here for
   browsers that have them (Firefox gets a thin, trackless bar instead). The bar starts under the column headings:
   v2-grid.js sets --v2-head-h to their height, and a button at the start of the track takes up that much room. */
body.shell-v2 .v2-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d9d9d9 transparent;
    /* The bar's room is kept when there is no bar, so the table does not narrow when a page needs one. */
    scrollbar-gutter: stable;
    /* The frame reaches 4px further into the card's right padding (its content keeps its width: the padding takes the 4px
       back), which moves the bar 4px to the right. */
    margin-right: -4px;
    padding-right: 4px;
}

@supports selector(::-webkit-scrollbar) {
    body.shell-v2 .v2-scroll {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

        body.shell-v2 .v2-scroll::-webkit-scrollbar {
            width: 16px;
            height: 16px;
            background: transparent;
        }

        body.shell-v2 .v2-scroll::-webkit-scrollbar-track,
        body.shell-v2 .v2-scroll::-webkit-scrollbar-corner {
            background: transparent;
        }

        body.shell-v2 .v2-scroll::-webkit-scrollbar-button {
            display: none;
        }

        body.shell-v2 .v2-scroll::-webkit-scrollbar-button:vertical:start:decrement {
            display: block;
            width: 0;
            height: calc(var(--v2-head-h, 0px) + 8px);
        }

        body.shell-v2 .v2-scroll::-webkit-scrollbar-button:vertical:end:increment {
            display: block;
            width: 0;
            height: 14px;
        }

        /* The thumb is the 4px left after a transparent margin: 11px on the rows' side, 1px on the card's. */
        body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb {
            background: #d9d9d9;
            background-clip: padding-box;
            border: solid transparent;
            border-width: 0 1px 0 11px;
            /* A pill: border-radius is the outer one and the transparent borders (11px and 1px) eat into it, so each side asks for its
            border plus the 2px that is left, half the thumb. */
            border-radius: 13px 3px 3px 13px / 2px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            min-height: 36px;
        }

        body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:hover,
        body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:active {
            background: #c4c4c4;
            background-clip: padding-box;
        }

        /* The horizontal bar (a wide table): the same thumb on its side. */
        body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:horizontal {
            background: #d9d9d9;
            background-clip: padding-box;
            border-width: 11px 0 1px 0;
            border-radius: 2px / 13px 13px 3px 3px;
            min-height: 0;
            min-width: 36px;
        }
}

/* The grid's toolbar ends 16px short of the container's edge, so its search box ends where the rows do (the frame's 16px
   bar gutter, less the 4px it reaches into the card's padding, plus that 4px of padding back), with or without a column
   picker; the picker reaches from there (after the toolbar's gap) to the card's edge, 26px, over the scrollbar. */
body.shell-v2.v2-grid-page .grid-toolbar {
    margin-right: 16px;
}

body.shell-v2.v2-grid-page .grid-toolbar-tools:has(> .dropdown > .dropdown-toggle) {
    margin-right: -30px;
}

/* The column picker: three dots, upright like the Menu's three-dots-vertical, no button around them and no caret, in the
   middle of the space between the search box and the card's edge (the same room each side). Flat dots in the scene's
   colour, darker on hover; v2-deboss.css presses them into the card instead. */
body.shell-v2.v2-grid-page {
    --v2-dot: rgba(48, 79, 127, 0.45);
    --v2-dot-hover: rgba(48, 79, 127, 0.95);
}

html[data-v2-scene="sunset"] body.shell-v2.v2-grid-page {
    --v2-dot: rgba(91, 58, 102, 0.45);
    --v2-dot-hover: rgba(91, 58, 102, 0.95);
}

html[data-v2-scene="night"] body.shell-v2.v2-grid-page {
    --v2-dot: rgba(160, 190, 235, 0.45);
    --v2-dot-hover: rgba(140, 180, 240, 1);
}

body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle {
    position: relative;
    width: 26px;
    min-width: 0;
    height: var(--grid-control-h, 31px);
    margin: 0;
    padding: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
}

    /* The three dots: the button's ::before (top), its icon emptied of its glyph (middle) and the caret's ::after (bottom). */
    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle::before,
    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle > .bi,
    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle::after {
        content: "";
        position: absolute;
        left: 9px;
        top: calc(50% - 2px);
        display: block;
        width: 4px;
        height: 4px;
        margin: 0;
        border: 0;
        border-radius: 50%;
        font-size: 0;
        background: var(--v2-dot);
        box-shadow: none;
    }

    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle::before {
        top: calc(50% - 8px);
    }

    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle::after {
        top: calc(50% + 4px);
    }

        body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle > .bi::before {
            content: none;
        }

    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle:is(:hover, :focus-visible, .show) {
        border-color: transparent;
        background: none;
        box-shadow: none;
        --v2-dot: var(--v2-dot-hover);
    }

    body.shell-v2.v2-grid-page .grid-toolbar-tools > .dropdown > .btn.dropdown-toggle:focus-visible {
        outline: 2px solid var(--v2-dot-hover);
        outline-offset: -2px;
    }

/* ---------- Dropdown cards ---------- */
/* Every Bootstrap dropdown (a grid's Menu, a column picker, a row's actions, Print, Export…) is a small raised card: frosted,
   lit along its top inside, a soft shadow under it, its items rounded tints inside it, a heading in small capitals over a
   hairline. The dashboard's menus (.dash-menu) and the pager's sizes keep their own looks. Night's colours: v2-night.css. */
body.shell-v2 {
    --v2-drop-bg: rgba(255, 255, 255, 0.94);
    --v2-drop-sheen: rgba(255, 255, 255, 0.7);
    --v2-drop-edge: rgba(48, 79, 127, 0.16);
    --v2-drop-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 14px 32px -10px rgba(23, 43, 69, 0.38),
        0 3px 8px -2px rgba(23, 43, 69, 0.14);
    --v2-drop-ink: #172b45;
    --v2-drop-icon: #304f7f;
    --v2-drop-hover: rgba(48, 79, 127, 0.08);
    --v2-drop-hover-ink: #304f7f;
    --v2-drop-head: #6b7c93;
    --v2-drop-line: rgba(48, 79, 127, 0.12);
}

html[data-v2-scene="sunset"] body.shell-v2 {
    --v2-drop-hover: rgba(122, 70, 92, 0.09);
    --v2-drop-head: #84697a;
    --v2-drop-line: rgba(122, 70, 92, 0.13);
}

body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) {
    padding: 6px;
    border: 1px solid var(--v2-drop-edge);
    border-radius: 10px;
    background: linear-gradient(var(--v2-drop-sheen), rgba(255, 255, 255, 0) 28px), var(--v2-drop-bg);
    box-shadow: var(--v2-drop-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--v2-drop-ink);
}

    body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item {
        border-radius: 6px;
        padding: 6px 10px;
        color: var(--v2-drop-ink);
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item:is(:hover, :focus-visible) {
            background: var(--v2-drop-hover);
            color: var(--v2-drop-hover-ink);
        }

        body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item:is(.active, :active) {
            background: var(--alma-blue, #304f7f);
            color: #fff;
        }

        body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item > .bi {
            color: var(--v2-drop-icon);
        }

        body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item:is(.active, :active) > .bi {
            color: inherit;
        }

    body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-header {
        margin: 0 4px 4px;
        padding: 3px 6px 6px;
        border-bottom: 1px solid var(--v2-drop-line);
        color: var(--v2-drop-head);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    body.shell-v2 .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-divider {
        margin: 5px 4px;
        border-top-color: var(--v2-drop-line);
        opacity: 1;
    }

/* A column picker's choices are labels (a checkbox and the column's name): rows like the items, the whole row clickable.
   Compact (2026-10-14: it stood 551px tall on Orders): 13px text in 23px rows, a tighter heading and edge, and as wide as
   its longest name (Bootstrap's 10rem minimum held it wider). The views' p-3 gives way to this padding. */
body.shell-v2 .grid-toolbar-tools .dropdown-menu {
    min-width: 0;
    padding: 4px !important;
}

    /* (Spelled like the dropdown cards' heading rule above, so it outranks it.) */
    body.shell-v2 .grid-toolbar-tools .dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-header {
        margin: 0 2px 3px;
        padding: 2px 6px 4px;
        font-size: 0.64rem;
    }

    body.shell-v2 .grid-toolbar-tools .dropdown-menu > li > label {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 3px 8px;
        border-radius: 5px;
        font-size: 0.8125rem;
        line-height: 1.3;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        body.shell-v2 .grid-toolbar-tools .dropdown-menu > li > label:hover {
            background: var(--v2-drop-hover);
        }

        body.shell-v2 .grid-toolbar-tools .dropdown-menu > li > label > input {
            margin: 0;
        }

/* The card is the table's frame now. */
    body.shell-v2 .v2-scroll .table_custom {
        box-shadow: none;
        outline: 0;
    }

    body.shell-v2 .v2-scroll thead {
        border-bottom: 0;
    }

        body.shell-v2 .v2-scroll thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            /* Frosted, so the rows scrolling under the headings do not show through. */
            background-color: rgba(255, 255, 255, 0.94);
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
            box-shadow: inset 0 -2px 0 #304f7f;
        }

    /* Near-white headings stand out on the card, which takes the sky's colour (strongly at sunset). By day and at sunset
       they are painted with what the card shows instead: its veil over the sky and the sun's glow, fixed to the viewport
       like .v2-sea, so each heading is the colour behind it and solid. (The waves are left out: they are faint.) iOS
       Safari ignores a fixed background and would squeeze the whole sky into the heading, so it keeps the flat
       colours (a warm one at sunset, below). Night has its own solid headings (v2-night.css). */
    @supports not (-webkit-touch-callout: none) {
        html:not([data-v2-scene="night"]) body.shell-v2 .v2-scroll thead th {
            background:
                linear-gradient(var(--v2-panel-bg), var(--v2-panel-bg)) fixed,
                radial-gradient(ellipse 55% 45% at 78% 62%, var(--v2-glow), rgba(0, 0, 0, 0) 70%) fixed,
                linear-gradient(180deg, var(--v2-sky-0) 0%, var(--v2-sky-1) 14%, var(--v2-sky-2) 46%, var(--v2-sky-3) 78%, var(--v2-sky-4) 100%) fixed;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }

    html[data-v2-scene="sunset"] body.shell-v2 .v2-scroll thead th {
        background-color: rgba(255, 240, 226, 0.95);
    }

    /* The headings' band has the card's rounded ends, so it is not a hard box while a scene change fades the sky. */
    body.shell-v2 .v2-scroll thead th:first-child {
        border-radius: var(--v2-panel-radius) 0 0 var(--v2-panel-radius);
    }

    body.shell-v2 .v2-scroll thead th:last-child {
        border-radius: 0 var(--v2-panel-radius) var(--v2-panel-radius) 0;
    }

    /* The card is translucent now: the table and its headings let it show through. */
    body.shell-v2 .v2-scroll .table,
    body.shell-v2 .v2-scroll .table_custom,
    body.shell-v2 .v2-scroll .thead_custom {
        background-color: transparent;
    }

/* The row-number column has no "#" heading and no rule down its right side (some grids draw one with .border-end,
   which is !important). v2-grid.js marks the column in grids that do not use .grid-col-no. */
body.shell-v2 th.grid-col-no,
body.shell-v2 th.v2-col-no {
    font-size: 0;
}

body.shell-v2 .grid-col-no,
body.shell-v2 .v2-col-no {
    border-right: 0 !important;
    border-inline-end: 0 !important;
}

/* The column headings are white like the rows under them. */
body.shell-v2 .thead_custom {
    background-color: #fff;
}

/* The grids' rows are see-through (the old pages were white behind them): give a table a white ground, so the
   waves never show through the text. */
body.shell-v2 .table,
body.shell-v2 .table_custom {
    background-color: #fff;
}

/* ...except on a card of its own (the Jobs' tinted charge cards, the form and Details panels), where the table lets
   the card's colour show. */
body.shell-v2 :is(.job-panel, .v2-panel, .wms-form-shadow, .boxshadowdiv, .form-card, .detail-card, .detail-section) :is(.table, .table_custom, .thead_custom) {
    background-color: transparent;
}

/* A table on a card of its own (the AES / 507 live lists) has no frame of its own either: the card is the frame, as it is
   under .v2-scroll. */
body.shell-v2 :is(.wms-form-shadow, .boxshadowdiv, .form-card) .table_custom {
    box-shadow: none;
    outline: 0;
}

/* The header: no border, no shadow. */
/* The header: no border, no shadow while the page is at the top; v2-header.js adds .is-scrolled once it has scrolled, and
   a soft shadow fades in under it, as content passes beneath. */
body.shell-v2 #header {
    background: var(--v2-sky-0);
    box-shadow: 0 0 0 0 rgba(23, 43, 69, 0);
    border-bottom: 0;
    transition: box-shadow 0.25s ease;
}

body.shell-v2 #header.is-scrolled {
    box-shadow: 0 6px 16px -8px rgba(23, 43, 69, 0.3);
}

/* The wordmark (_HeaderLogo.cshtml): its blue copy by day and at sunset; at night its silver copy fades in over it with the
   sky (1.8s), and the blue one goes once the silver covers it, so no blue fringe stays at the letters' edges. Back to day,
   the blue is there at once and the silver fades out over it. --v2-logo-filter is a hook for a scene that wants more
   (none sets one now). Only the height (the phone sizes, site.css) and the filter transition: "all" made the logo start
   transitions of its own on top of the scene's. */
body.shell-v2 #header .logo-wrap .logo-img {
    filter: var(--v2-logo-filter);
    transition: filter 1.8s ease, height 0.3s ease-in-out;
}

body.shell-v2 #header .logo-img .logo-night {
    opacity: 0;
    transition: opacity 1.8s ease;
}

body.shell-v2 #header .logo-img .logo-day {
    opacity: 1;
    transition: opacity 0s;
}

html[data-v2-scene="night"] body.shell-v2 #header .logo-img .logo-night {
    opacity: 1;
}

html[data-v2-scene="night"] body.shell-v2 #header .logo-img .logo-day {
    opacity: 0;
    transition: opacity 0s linear 1.8s;
}

/* A page's title sitting straight on the sky takes the scene's title colour (blue by day); one on a card keeps its blue. */
body.shell-v2 .page-header-title:not(:is(.v2-panel, .wms-form-shadow, .boxshadowdiv, .form-card, .detail-card, .detail-section) *) {
    color: var(--v2-title);
}

/* Login: an outline button, like the landing page's. */
body.shell-v2 .btn-login {
    height: 40px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--v2-ink) 35%, transparent);
    border-radius: 5px;
    background: none;
    color: var(--v2-ink);
    font: 14px Arial, Helvetica, sans-serif;
}

    body.shell-v2 .btn-login:hover {
        background: color-mix(in srgb, var(--v2-ink) 8%, transparent);
        border-color: var(--v2-ink);
        color: var(--v2-ink);
    }

/* The menu button (three lines) and the round icons (quick links, bell) are bare until the pointer is on one: then
   an Alma-blue circle with a white icon. A quick link stays lit on the page it belongs to (.is-active). */
body.shell-v2 .menu-toggle {
    background: none;
    border: 0;
    color: var(--v2-ink);
    font-size: 28px;
    line-height: 1;
}

    body.shell-v2 .menu-toggle:hover {
        background: var(--alma-blue, #304f7f);
        color: #fff;
    }

/* Hover and "this page": the plain Alma blue circle and white icon. */
body.shell-v2 .icon-button .icon-link,
body.shell-v2 .icon-button #notifBell {
    background: none;
    border: 0;
    color: var(--v2-ink);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    body.shell-v2 .icon-button .icon-link:hover,
    body.shell-v2 .icon-button #notifBell:hover,
    body.shell-v2 .icon-button.is-active .icon-link {
        background: var(--alma-blue, #304f7f);
        color: #fff;
    }

@media screen and (max-width: 768px) {
    body.shell-v2 .btn-login {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }

    body.shell-v2 .menu-toggle {
        font-size: 26px;
    }
}

/* The dashboard's hero fills the window below the header: there is no 28px topbar above it now. */
body.shell-v2 .dash-hero {
    --dash-top: 72px;
}

@media (max-width: 768px) {
    body.shell-v2 .dash-hero {
        --dash-top: 60px;
    }
}

/* The footer strip (_FooterV2): no background of its own, in a pale blue that reads against the deep water the
   sea turns to along the bottom of the window (.v2-sea::after). */
body.shell-v2 .v2-sea::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    background: linear-gradient(180deg, var(--v2-band-0), var(--v2-band-1));
}

/* A short page still ends with the footer at the bottom of the window: the content is at least a window tall
   less the header (72px, 60px on a phone) and the strip (about 44px). */
body.shell-v2 > .container-responsive {
    min-height: calc(100vh - 72px - 46px);
}

@media (max-width: 768px) {
    body.shell-v2 > .container-responsive {
        min-height: calc(100vh - 60px - 46px);
    }
}

body.shell-v2 #footer.footer-v2 {
    background: none;
    border-top: 0;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #dcebf7;
}

body.shell-v2 .footer-v2-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    max-width: 90%;
    margin: 0 auto;
    padding: 11px 0;
}

    /* The strip's own links: not those in the bell's notifications panel, which sits inside the footer here and keeps
       its own colours (notifications-panel.css) on its light glass. */
    body.shell-v2 .footer-v2-inner a:where(:not(.notif-panel a)) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #dcebf7;
        white-space: nowrap;
    }

        body.shell-v2 .footer-v2-inner a:where(:not(.notif-panel a)):hover {
            color: #fff;
        }

        body.shell-v2 .footer-v2-inner a:where(:not(.notif-panel a)) i {
            font-size: 15px;
            color: #00e5ff;
        }

    body.shell-v2 .footer-v2-inner .lang-switch {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        white-space: nowrap;
    }

        body.shell-v2 .footer-v2-inner .lang-switch button {
            padding: 0 2px;
            border: 0;
            background: none;
            font-weight: 700;
            color: #00e5ff;
            text-decoration: underline dotted;
            text-underline-offset: 4px;
            cursor: pointer;
        }

    /* Who is signed in, across from the terms. */
    body.shell-v2 .footer-v2-inner .footer-user {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
        min-width: 0;
    }

        body.shell-v2 .footer-v2-inner .footer-user a {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.shell-v2 .footer-v2-inner .footer-user b {
            font-weight: 600;
            color: #00e5ff;
            white-space: nowrap;
        }

/* A phone's strip (the site's phone width, 768px and under) keeps only the language switch, at the left, and who is
   signed in, at the right. */
@media (max-width: 768px) {
    body.shell-v2 .footer-v2-inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 12px;
    }

        body.shell-v2 .footer-v2-inner > a {
            display: none;
        }

        body.shell-v2 .footer-v2-inner .footer-user {
            margin-left: auto;
            min-width: 0;
        }
}

/* A Create / Edit form on a very small phone (the user, 2026-10-13): no card and no sea. The page is the header's colour
   (--v2-sky-0) from top to bottom, so it reads as one plain sheet: the waves, the sun / moon glow, the white veil and the
   dark band along the bottom go, and the form's card loses its ground, edges and shadow (the element stays, so the night
   scene's text colours still reach its content). The footer, which read on that band, gets a solid strip of its own.
   v2-waves.js stops drawing the waves here, so the cogwheel's play / pause item goes too. Above 400px (a phone turned
   on its side) the card and the sea come back. */
@media (max-width: 399.98px) {
    body.shell-v2:has(.form-card) .v2-sea {
        background: var(--v2-sky-0);
    }

        body.shell-v2:has(.form-card) .v2-sea::before,
        body.shell-v2:has(.form-card) .v2-sea::after,
        body.shell-v2:has(.form-card) .v2-sea > :is(.v2-sea-waves, .v2-sea-fade) {
            display: none;
        }

    body.shell-v2 .form-card {
        margin-inline: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    body.shell-v2:has(.form-card) #footer.footer-v2 {
        background: var(--v2-footer-solid);
    }

    body.shell-v2:has(.form-card) #footer-waves {
        display: none;
    }
}

/* The back-to-top button: a round one, floating just above the footer strip (about 46px high), 10px lower than it was. On a
   phone the strip holds the language switch, the user and the bell and cogwheel in one row, so it stays higher there to
   be clear of them. */
body.shell-v2 .back-to-top {
    bottom: 48px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    body.shell-v2 .back-to-top {
        bottom: 58px;
    }
}

/* Customs Create / Edit: the tab strip over one panel. The panel is the Create / Edit card, but denser (92% white) as it
   carries a whole declaration; the open tab takes the same white so it reads as part of the panel, and the thin
   rule between them is not needed. */
body.shell-v2 .customs-form .tab-content {
    --v2-customs-bg: rgba(255, 255, 255, 0.92);
    background: var(--v2-customs-bg);
    border: 0 !important;
    border-radius: var(--v2-panel-radius);
    box-shadow: var(--v2-panel-shadow);
    /* 16px all round; the markup's px-2 / pt-2 are !important. */
    padding: 1rem !important;
}

body.shell-v2 .customs-form > .border-top {
    border-top: 0 !important;
}

body.shell-v2 .customs-form .nav-tabs .nav-link {
    border-color: transparent;
}

body.shell-v2 .customs-form .nav-tabs .nav-link.active {
    /* Solid, so the panel's shadow under the tab (it is raised above the panel) cannot show through; 92% white over the
       pale top of the page comes to this colour. */
    background: #fbfdfe;
    border-color: transparent;
    border-radius: var(--v2-panel-radius) var(--v2-panel-radius) 0 0;
    /* Shadow on the top and the sides only. The tab used to be clipped (clip-path) so none fell below it, but a clip is not
       snapped to whole pixels: with the tab's bottom on a fraction of one, its last row was half clipped and showed a grey
       hairline. Each is lifted by its blur's worth so its lower edge sits 4px inside the tab: nothing reaches below it. */
    box-shadow: 0 -2px 4px -2px rgba(50, 50, 93, 0.14), -2px -2px 4px -2px rgba(50, 50, 93, 0.14), 2px -2px 4px -2px rgba(50, 50, 93, 0.14);
    /* Bootstrap pulls the tab 1px over the panel (margin-bottom: -1px) to hide its own rule; with none, the panel's top edge
       and its hairline shadow were drawn across the tab's last pixel row, a line under it that came and went with the zoom. */
    margin-bottom: 0;
    /* Above the panel: the panel's shadow reaches 3px up and was drawn across the tab's last pixel rows, a hairline under it. */
    position: relative;
    z-index: 1;
}

/* Customs Create / Edit, the Items tab: the Declaration tab's fields run flush with the panel, while this tab pushed
   its own (the pill row and the items' container px-2, each item p-2), so its fields sat 16px further in. Same insets. */
body.shell-v2 .customs-form #goods-pane > .d-flex {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}

body.shell-v2 .customs-form #goods-pane #goodsItemPills {
    margin-left: 0 !important;
}

body.shell-v2 .customs-form #goods-items {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.shell-v2 .customs-form .goods-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The item pills and the Add / Remove Item buttons are .btn-sm size. */
body.shell-v2 .customs-form #goodsItemPills .btn,
body.shell-v2 .customs-form #remove-current-btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* A document row's delete button: a 40px square, centred on the row. */
/* (site.css makes the column a flex box and the button 85% high with a 5px left margin; the wrapper inside would shrink
   to the button, and a percentage width then has nothing to measure.) */
body.shell-v2 .customs-form .document-row .d-grid {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

body.shell-v2 .customs-form .document-row .d-grid > .btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto;
    padding: 0;
    margin: 0 !important;
    margin-left: 5px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The Declaration tab's first row carries a -5px top margin that took 5px off the panel's padding. */
body.shell-v2 .customs-form #header-pane > .row:first-child {
    margin-top: calc(var(--bs-gutter-y) * -1) !important;
}

/* The item's right-hand column pulled its rows 10px past the column (margin-right: -10px, inline) to make up for the
   padding v2 took off above: they run flush with the panel's padding like everything else. */
body.shell-v2 .customs-form .goods-item .col-md-3 > .row {
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
}

/* The item's field rows: no padding under the floating fields (it is on some columns and on the HS Code's group, which
   threw the rows out of line); the gap between rows is set on the rows instead, the Declaration tab's 19px (the
   padding it has there, 10px, plus the 9px every row already has). The third row (packages, quantity, marks, and the
   statistical value beside them) is set further apart, and so are the documents below. */
body.shell-v2 .customs-form .goods-item .form-floating {
    padding-bottom: 0;
}

body.shell-v2 .customs-form .goods-item .col-md-9 > .row + .row,
body.shell-v2 .customs-form .goods-item .col-md-3 > .row + .row {
    margin-top: 5px !important;
}

body.shell-v2 .customs-form .goods-item .col-md-9 > .row:last-child,
body.shell-v2 .customs-form .goods-item .col-md-3 > .row:last-child {
    margin-top: 10px !important;
}

body.shell-v2 .customs-form .goods-item > .row > .docs-section {
    margin-top: 1.5rem !important;
}

body.shell-v2 .customs-form .document-row {
    margin-bottom: 0 !important;
}

/* The second rule: the first row added in the page goes into the #docs-N holder after the server-rendered rows, so it
   is no sibling of theirs and the first rule misses it. */
body.shell-v2 .customs-form .document-row + .document-row,
body.shell-v2 .customs-form .document-row + div > .document-row:first-child {
    margin-top: 10px;
}

/* The HS Code search is an icon inside the field's right edge (the button keeps its click, with no box of its own),
   and the field keeps the rounded corners of the fields around it. */
body.shell-v2 .customs-form .goods-item .input-group {
    position: relative;
}

body.shell-v2 .customs-form .goods-item .input-group > .form-control {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    padding-right: 2.5rem;
}

body.shell-v2 .customs-form .goods-item .input-group > .btn {
    position: absolute;
    /* A 32px circle, centred in the field's right edge; only its colours change on hover, so it never moves. */
    top: calc((var(--field-h, 58px) - 32px) / 2);
    right: 6px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    /* !important: Bootstrap squares the left corners of any group child after the first with a more specific rule. */
    border-radius: 50% !important;
    background: transparent;
    color: #6c757d;
    margin: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    body.shell-v2 .customs-form .goods-item .input-group > .btn:hover,
    body.shell-v2 .customs-form .goods-item .input-group > .btn:focus-visible {
        background:#304f7f;
        color: #ffffff;
        
    }

/* The footer's tools, after the role: the bell with its unread count, and the settings cogwheel (_FooterV2). */
body.shell-v2 .footer-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

body.shell-v2 .footer-v2-inner .footer-user + .footer-tools {
    margin-left: -8px;
}

body.shell-v2 .footer-cog,
body.shell-v2 .footer-bell {
    position: relative;
    display: inline-flex;
}

/* The bell: a small pill, the bell and (while anything is unread) its count. site.css and admin.css dress #notifBell as
   a round header button, so it starts from nothing here. */
body.shell-v2 #footer #notifBell {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #dcebf7;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    body.shell-v2 #footer #notifBell:hover,
    body.shell-v2 #footer #notifBell:focus-visible {
        background: rgba(255, 255, 255, 0.28);
        color: #fff;
    }

    body.shell-v2 #footer #notifBell i {
        font-size: 13px;
    }

    /* The count (notifications.js shows it only while something is unread; 99+ past ninety-nine). */
    body.shell-v2 #footer #notifBadge {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        min-width: 16px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e5484d;
        color: #fff;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 16px;
        text-align: center;
    }

body.shell-v2 .footer-cog-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #dcebf7;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    body.shell-v2 .footer-cog-btn:hover,
    body.shell-v2 .footer-cog-btn:focus-visible,
    body.shell-v2 .footer-cog-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.28);
        color: #fff;
    }

    body.shell-v2 .footer-cog-btn i {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    body.shell-v2 .footer-cog-btn:hover i {
        transform: rotate(60deg);
    }

/* The cogwheel menu, in the bell panel look: it rests on the cogwheel (v2-footer.js sets where) with an arrow down to it. */
body.shell-v2 .footer-menu {
    position: fixed;
    z-index: 2000;
    right: 10px;
    bottom: 60px;
    min-width: 230px;
    max-width: calc(100vw - 20px);
    margin-bottom: 10px;
    border: 1px solid rgba(48, 79, 127, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(12, 7, 74, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.8rem;
    color: #333;
}

    body.shell-v2 .footer-menu[hidden] {
        display: none;
    }

    body.shell-v2 .footer-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: var(--footer-menu-arrow-x, calc(100% - 20px));
        border: 7px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.92);
        transform: translateX(-50%);
    }

body.shell-v2 .footer-menu-head {
    padding: 6px 12px;
    border-radius: 9px 9px 0 0;
    background: var(--alma-panel-head);
    box-shadow: var(--alma-panel-head-edge);
    color: #fff;
    font-size: 0.77rem;
    font-weight: 600;
}

body.shell-v2 .footer-menu-body {
    padding: 4px 0;
}

body.shell-v2 .footer-menu-item {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    color: #172b45;
    font-size: 0.8rem;
    cursor: pointer;
}

    body.shell-v2 .footer-menu-item[hidden] {
        display: none;
    }

    body.shell-v2 .footer-menu-item:hover,
    body.shell-v2 .footer-menu-item:focus-visible {
        background: #304f7f14;
        color: #304f7f;
    }

    body.shell-v2 .footer-menu-item i {
        width: 16px;
        text-align: center;
    }

/* The settings menu's Switch to classic look is a link: the footer strip's link look (light text, cyan icon) must not reach it. */
body.shell-v2 .footer-v2-inner .footer-menu-item {
    color: #172b45;
    white-space: normal;
}

    body.shell-v2 .footer-v2-inner .footer-menu-item:hover,
    body.shell-v2 .footer-v2-inner .footer-menu-item:focus-visible {
        color: #304f7f;
    }

    body.shell-v2 .footer-v2-inner .footer-menu-item i {
        font-size: inherit;
        color: inherit;
    }

/* Cargo Tracking: the Track buttons are AL-MA blue (the page uses Bootstrap primary), and the list of supported airlines
   sits on a panel. */
body.shell-v2 .btn-track {
    --bs-btn-bg: var(--alma-blue, #304f7f);
    --bs-btn-border-color: var(--alma-blue, #304f7f);
    --bs-btn-hover-bg: var(--alma-blue-hover, #3a5f96);
    --bs-btn-hover-border-color: var(--alma-blue-hover, #3a5f96);
    --bs-btn-focus-shadow-rgb: 48, 79, 127;
    --bs-btn-active-bg: #29446d;
    --bs-btn-active-border-color: #29446d;
    --bs-btn-disabled-bg: var(--alma-blue, #304f7f);
    --bs-btn-disabled-border-color: var(--alma-blue, #304f7f);
}

body.shell-v2 .cargo-airlines {
    padding: 1.25rem 1.5rem 0.75rem;
    transition: opacity 0.15s ease;
}

/* The courier column takes the rest of the row (the numbers need the room, not the labels and buttons). Stacked under the
   air freight form on a narrow window it gets room above its heading, clear of the Track button over it. */
@media (min-width: 768px) {
    body.shell-v2 .cargo-couriers {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    body.shell-v2 .cargo-couriers {
        margin-top: 2rem;
    }
}

/* Tools / Calculators: the same tab strip over one panel as Customs Create / Edit (92% white panel, the open tab joined to
   it). The panes carry their own 1rem margin, so the panel adds none. */
body.shell-v2 #calculatorsTab {
    border-bottom: 0;
}

    body.shell-v2 #calculatorsTab .nav-link {
        border-color: transparent;
    }

        body.shell-v2 #calculatorsTab .nav-link.active {
            /* Solid, so the panel's shadow under the tab (it is raised above the panel) cannot show through; 92% white over the
       pale top of the page comes to this colour. */
    background: #fbfdfe;
            border-color: transparent;
            border-radius: var(--v2-panel-radius) var(--v2-panel-radius) 0 0;
            /* Shadow on the top and the sides only. The tab used to be clipped (clip-path) so none fell below it, but a clip is not
       snapped to whole pixels: with the tab's bottom on a fraction of one, its last row was half clipped and showed a grey
       hairline. Each is lifted by its blur's worth so its lower edge sits 4px inside the tab: nothing reaches below it. */
    box-shadow: 0 -2px 4px -2px rgba(50, 50, 93, 0.14), -2px -2px 4px -2px rgba(50, 50, 93, 0.14), 2px -2px 4px -2px rgba(50, 50, 93, 0.14);
            margin-bottom: 0;
            /* Above the panel: the panel's shadow reaches 3px up and was drawn across the tab's last pixel rows, a hairline under it. */
            position: relative;
            z-index: 1;
        }

body.shell-v2 #calculatorsTabContent {
    background: rgba(255, 255, 255, 0.92);
    border: 0 !important;
    border-radius: var(--v2-panel-radius);
    box-shadow: var(--v2-panel-shadow);
    padding: 0 !important;
    /* The panes margins (m-3) stay inside the panel: left alone they collapse through its top and bottom, which left a gap
       over the panel and none under the last field. */
    display: flow-root;
}

/* With the first tab open the panel's top-left corner is square: the tab above it starts at the same edge, and the
   panel's rounded corner left a small wedge of background showing under the tab's bottom-left. */
body.shell-v2 #calculatorsTab:has(> li:first-child .nav-link.active) + #calculatorsTabContent {
    border-top-left-radius: 0;
}

/* A page that ends with a table (User Manager, and the like): Bootstrap's 1rem under every .table came on top of the
   page's own bottom padding, 40px to the footer in all. A table with nothing after it (scripts aside) loses that margin. */
body.shell-v2 .container-responsive > table.table:not(:has(~ :is(div, form, section, p, a, button, table, ul, ol, h2, h3, h4, h5, nav))) {
    margin-bottom: 0;
}

/* Persons grid: the name is the row's main fact and the table has room, so it is cut much later than the 24ch the other
   columns share (and a shade under that on a narrow window). */
body.shell-v2 .orders-table-truncate.person-name {
    max-width: 48ch;
}

@media (max-width: 991.98px) {
    body.shell-v2 .orders-table-truncate.person-name {
        max-width: 20ch;
    }
}

/* Customs Exchange Rates: the open month in the sidebar list is AL-MA blue, not Bootstrap primary. */
body.shell-v2 #pdfList {
    --bs-list-group-active-bg: var(--alma-blue, #304f7f);
    --bs-list-group-active-border-color: var(--alma-blue, #304f7f);
}

body.shell-v2 #pdfList .list-group-item.active {
    background-color: var(--alma-blue, #304f7f);
    border-color: var(--alma-blue, #304f7f);
}

/* Both panels compact: the months a small type, tight rows; the rates table a small type. */
body.shell-v2 #pdfList .btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
}

/* The PDF icon is the Documents red (buttons-b.css's --doc-pdf); on the open month the night red, readable on the blue. */
body.shell-v2 #pdfList .pdf-icon-btn {
    color: var(--doc-pdf, #c0392b);
}

html[data-v2-scene="night"] body.shell-v2 #pdfList .pdf-icon-btn {
    color: var(--doc-pdf, #ff8b82);
}

body.shell-v2 #pdfList .list-group-item.active .pdf-icon-btn {
    color: #ff8b82;
}

/* The rates table: a rounded card with an AL-MA blue heading row, like the open month. The table's own outer edge is
   hidden (the wrap draws it), so the corners are not doubled. The id outranks the night theme's thead rules. */
body.shell-v2 .rates-table-wrap,
body.shell-v2 #pdfFrame {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

body.shell-v2 #ratesTable {
    border-style: hidden;
    font-size: 0.85rem;
}

body.shell-v2 #ratesTable > thead > tr > th {
    --bs-table-bg: var(--alma-blue, #304f7f);
    --bs-table-color: #fff;
    background-color: var(--alma-blue, #304f7f);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
    white-space: nowrap;
    /* The heading row stays in view while the rates scroll under it. */
    position: sticky;
    top: 0;
    z-index: 1;
}

body.shell-v2 .rates-table-wrap {
    overflow: auto;
}

/* The quick converter above the table: amount, code, the euros; the picked currency's name and rate under them. */
body.shell-v2 .rates-converter {
    flex: none;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background-color: #fff;
}

body.shell-v2 #tableContainer > .rates-converter {
    margin-bottom: 0.5rem;
}

body.shell-v2 .rates-converter .rates-converter-code {
    flex: 0 0 auto;
    width: 5.5rem;
}

body.shell-v2 .rates-converter-hint {
    min-height: 1.2em;
    margin-top: 0.25rem;
    font-size: 0.78rem;
}

html[data-v2-scene="night"] body.shell-v2 .rates-converter {
    background-color: var(--n-solid);
}

html[data-v2-scene="night"] body.shell-v2 :is(.rates-converter, .rates-table-wrap, #pdfFrame) {
    border-color: var(--n-line);
}

/* From md up both panels are a fixed share of the screen, so the footer shows; each scrolls inside itself. The months'
   list scrolls above its Load More; the right side's converter stays put above the scrolling table, and a PDF fills it. */
@media (min-width: 768px) {
    body.shell-v2 .rates-panel {
        display: flex;
        flex-direction: column;
        height: max(320px, 62vh);
    }

    body.shell-v2 .rates-sidebar #pdfList {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    body.shell-v2 .rates-sidebar #loadMoreRates {
        flex: none;
    }

    body.shell-v2 .rates-panel > #tableContainer,
    body.shell-v2 .rates-panel > #pdfContainer {
        flex: 1 1 auto;
        min-height: 0;
    }

    body.shell-v2 #tableContainer > .rates-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
    }

    body.shell-v2 #pdfFrame {
        display: block;
        height: 100%;
    }
}

/* The pager: its links (pages, first / previous / next / last) are AL-MA blue, not Bootstrap primary. Their hover and the
   open page are components.css's ("The pager's look": a tint, and the page filled). LazZiya draws the page count as
   .badge.bg-dark and the record count as .badge.bg-light. */
body.shell-v2 .grid-pager .pagination,
body.shell-v2 .grid-pager-mobile .pagination {
    --bs-pagination-color: var(--alma-blue, #304f7f);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--alma-blue, #304f7f);
    --bs-pagination-hover-border-color: var(--alma-blue, #304f7f);
    --bs-pagination-focus-color: var(--alma-blue, #304f7f);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(48, 79, 127, 0.25);
    --bs-pagination-active-bg: var(--alma-blue, #304f7f);
    --bs-pagination-active-border-color: var(--alma-blue, #304f7f);
}

/* Sunset: the pager in the scene's colours, a peach tint with plum text, the open page filled plum (the sunset title's
   colour, --v2-title). */
html[data-v2-scene="sunset"] body.shell-v2 :is(.grid-pager, .grid-pager-mobile) {
    --pager-face: #fcefe6;
    --pager-face-label: #f6e2d6;
    --pager-edge: rgba(122, 70, 92, 0.22);
    --pager-divider: rgba(122, 70, 92, 0.15);
    --pager-ink: #5b3a66;
    --pager-muted: #866673;
    --pager-hover: #f6dccc;
    --pager-active-face: #5b3a66;
}

body.shell-v2 .grid-pager .badge.bg-dark {
    background-color: #6c757d !important;
    color: #fff;
}

body.shell-v2 .grid-pager .badge.bg-light {
    background-color: var(--alma-blue, #304f7f) !important;
    color: #fff !important;
}

/* At sunset the record count takes the open page's plum. */
html[data-v2-scene="sunset"] body.shell-v2 .grid-pager .badge.bg-light {
    background-color: var(--pager-active-face) !important;
}

/* v2 tables (.table_custom): no 16px under the table (Bootstrap's .table margin) and no rule under the column headings
   (the heading's own border, and the grids' navy line drawn on the sticky headings). A trial: both are easy to bring back. */
body.shell-v2 .table_custom {
    margin-bottom: 0;
}

body.shell-v2 .table_custom .thead_custom,
body.shell-v2 .table_custom thead {
    border-bottom: 0;
}

body.shell-v2 .v2-scroll thead th {
    box-shadow: none;
}

/* The same line also comes from Bootstrap on the body under the headings (a 2px border-top on every .table section after
   the first) and from the headings' own cell borders. */
body.shell-v2 .table_custom > thead + tbody {
    border-top: 0;
}

body.shell-v2 .table_custom > thead > tr > th {
    border-bottom-width: 0;
}

/* The pager's page size: the current size and its drop-down arrow (the arrow draws in the text colour) are AL-MA blue, in
   every state, not Bootstrap primary. */
body.shell-v2 .grid-pager-size .grid-pager-size-value {
    --bs-btn-color: var(--alma-blue, #304f7f);
    --bs-btn-hover-color: var(--alma-blue, #304f7f);
    --bs-btn-active-color: var(--alma-blue, #304f7f);
}

/* Wide layout (footer cogwheel, v2-footer.js; html.v2-wide is set before paint by _Layout): the header, the page and the
   footer use 95% of the window instead of 90%, for the tables of a data-heavy task. A page already full width (the dashboard)
   is not a .container and is unchanged. */
html.v2-wide body.shell-v2 .container,
html.v2-wide body.shell-v2 .footer-v2-inner {
    max-width: 95%;
}

/* The header's logo and icons and the footer's strip slide to the new width with the page, which site.css already
   animates (.container-responsive, 0.3s ease); without this they jumped while the page below glided. The class is set
   before paint on load, so a page never opens with the slide. v2-footer.js re-places what is measured off them after it. */
body.shell-v2 #header > .container,
body.shell-v2 .footer-v2-inner {
    transition: max-width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.shell-v2 #header > .container,
    body.shell-v2 .footer-v2-inner {
        transition: none;
    }
}

/* The dashboard indented from the header's edges (the user, 2026-10-14). From 1600px wide the panels end where the bell's
   button does, the one left of the menu button, and start as far in on the left: the header's icons stand 14px past its
   90% container (above) and the bell ends the menu button (40px) and the 20px before it short of that (site.css), so 60px
   in a side. Below 1600px the indent shrinks with the window, to none at 768px, where the panels meet the header's edges
   as a phone's do (dashboard.css's 16px gutters). The widest screens too (dashboard.css narrows them to 84%). The
   greeting and the panels 12px closer to the header (36px -> 24px; 28px -> 16px in the shortest windows). */
@media (min-width: 769px) {
    body.shell-v2 .dash-shell {
        --dash-indent: clamp(0px, (100vw - 768px) * 60 / 832, 60px);
        width: calc(90% + 28px - 2 * var(--dash-indent));
    }

    body.shell-v2 .dash-hero {
        padding-top: 24px;
    }
}

/* Phones: the greeting 24px under the header, not 40px (dashboard.css's phone layout). */
@media (max-width: 768px) {
    body.shell-v2 .dash-hero {
        padding-top: 12px;
    }
}

@media (min-width: 1200px) and (max-height: 739.98px) {
    body.shell-v2 .dash-hero {
        padding-top: 12px;
    }
}

/* The dashboard follows the same setting, on the header's own edges here (the indent above is the standard width's). */
@media (min-width: 769px) {
    html.v2-wide body.shell-v2 .dash-shell {
        width: calc(95% + 28px);
    }

    /* The panels slide to the new width with the header (0.3s, above), only while the setting changes (dashboard.js sets
       html.v2-wide-sliding for the slide): the indent follows the window's width, so a lasting transition would make the
       panels trail a window being dragged wider or narrower. */
    html.v2-wide-sliding body.shell-v2 .dash-shell {
        transition: width 0.3s ease;
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    html.v2-wide-sliding body.shell-v2 .dash-shell {
        transition: none;
    }
}

/* The dashboard's weather widget sits 8px further left than the classic layout puts it (its right margin is -26px there). */
body.shell-v2 .dash-weather {
    margin-right: -18px;
}