/*--------------------------------------------------------------
# The night scene's surfaces (v2 interface only; _Layout loads this after v2.css).
#
# v2.css turns html[data-v2-scene] into the sky, the waves and the header. This file is the other half of a dark mode:
# the cards, tables, fields, modals and menus that sit on the sky. It is only values and overrides under
# html[data-v2-scene="night"] body.shell-v2, so day and sunset (light cards) never read it, and a later theme can
# do the same under its own attribute. Colours come from the tokens below; to change the night's look, change them.
#
#   --n-surface   a card (translucent, so the sea still shows a little)     --n-raised  a row / field / tab on a card
#   --n-solid     a surface that must not show the sea (modals, menus)      --n-head    a table's column headings
#   --n-text      body text     --n-muted   secondary text     --n-line   rules and borders     --n-link  links
#
# Written from the stylesheets, not yet seen on every page: where an area's own CSS paints a white box that is not
# listed here, it stays white at night and wants one more rule below.
--------------------------------------------------------------*/
html[data-v2-scene="night"] body.shell-v2 {
    --n-surface: rgba(17, 31, 52, 0.86);
    --n-raised: #1a2d4a;
    --n-solid: #14243d;
    --n-head: #1d3153;
    --n-field: #0f1d33;
    --n-text: #dbe5f3;
    --n-muted: #9fb1c9;
    --n-edge: #3c4251;   /* dark muted blue-gray ink: every border and divider */
    --n-line: var(--n-edge);
    --n-link: #7fb2ff;
    --n-label: #8aa6cf;  /* a label (dt): a soft blue */
    --n-data: #d3deee;   /* its data (dd): a pale grey-blue, not white */
    --n-title: #8cb4f0;  /* page titles: the link blue */
    --n-th: #b9d3f8;     /* a grid's column headings */
    --n-cell-link: #8cb4f0; /* a link in a grid's row */
    --n-cell: #8196b5;   /* a grid's data that is not a link: the link's blue, muted */
    --n-blue: #6f9ce0;

    color-scheme: dark;
    color: var(--n-text);

    /* The panel every page's content sits on, and the other cards that take its look. */
    --v2-panel-bg: var(--n-surface);
    --v2-panel-shadow: rgba(0, 0, 0, 0.45) 0px 2px 6px -1px, rgba(0, 0, 0, 0.5) 0px 1px 3px -1px;
    --v2-customs-bg: var(--n-surface);

    /* Bootstrap's own variables, so its components (and every .text-* / border utility) follow. */
    --bs-body-color: var(--n-text);
    --bs-body-bg: #0d1a2f;
    --bs-border-color: var(--n-line);
    --bs-secondary-color: var(--n-muted);
    --bs-link-color: var(--n-link);
    --bs-emphasis-color: #fff;

    /* components.css's form fields. */
    --field-label-color: var(--n-muted);
    --field-border: var(--n-edge);
    --field-focus: #5b8fe6;
    --field-readonly-bg: #16273f;
    --field-chosen-bg: #14352a;
    --field-chosen-border: #2f7a58;
    --field-chosen-check: #4cc38a;
    --field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8c7dd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --alma-surface: var(--n-raised);
    --alma-line: var(--n-line);
    --alma-muted: var(--n-muted);
    --alma-table-head: var(--n-head);
}

/* ---------- Text ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.page-header-title, .text-alma, .dash-greeting) {
    color: #eaf1fb;
}

/* A page's title (and the AL-MA blue text utility, a dark blue that vanishes here) takes a soft blue, on a card or on the sky. */
html[data-v2-scene="night"] body.shell-v2 :is(.page-header-title, .text-alma) {
    color: var(--n-title) !important;
}

/* The page title's text in the header logo's silver: the logo's own gradient (v2.css --v2-logo-night-0..3, white at the top
   of the letters to a cool grey at their foot), clipped to the glyphs; its icon keeps the blue above (the user's pick,
   "D + G" of v2_TITLE_COLOUR_MOCKUP.html, 2026-10-15). A child with a fill of its own (a badge, a link) is not clipped:
   it takes its own colour back. Both night themes. */
html[data-v2-scene="night"] body.shell-v2 .page-header-title {
    background-image: linear-gradient(180deg, var(--v2-logo-night-0) 0%, var(--v2-logo-night-1) 48%, var(--v2-logo-night-2) 52%, var(--v2-logo-night-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    html[data-v2-scene="night"] body.shell-v2 .page-header-title > :is(i, .bi, .bx) {
        -webkit-text-fill-color: var(--n-title);
    }

    html[data-v2-scene="night"] body.shell-v2 .page-header-title :is(.page-header-badge, .badge, a, button) {
        -webkit-text-fill-color: currentColor;
    }

html[data-v2-scene="night"] body.shell-v2 :is(.text-muted, .text-secondary, .text-body-secondary, small.text-muted) {
    color: var(--n-muted) !important;
}

html[data-v2-scene="night"] body.shell-v2 :is(.text-dark, .text-black, .text-body):not([class*="bg-"]) {
    color: var(--n-text) !important;
}

html[data-v2-scene="night"] body.shell-v2 :is(.bg-white, .bg-light) {
    background-color: var(--n-raised) !important;
    color: var(--n-text) !important;
}

/* .table-light (a heading row, an "All time" total row): Bootstrap paints it through the cells' own --bs-table-bg. */
html[data-v2-scene="night"] body.shell-v2 .table-light,
html[data-v2-scene="night"] body.shell-v2 .table > :is(.table-light, thead.table-light) {
    --bs-table-color: var(--n-th);
    --bs-table-bg: var(--n-head);
    --bs-table-border-color: var(--n-line);
    --bs-table-striped-bg: var(--n-head);
    --bs-table-striped-color: var(--n-th);
    --bs-table-hover-bg: var(--n-head);
    --bs-table-hover-color: var(--n-th);
    color: var(--n-th);
}

html[data-v2-scene="night"] body.shell-v2 :is(hr, .border, .border-top, .border-bottom, .border-start, .border-end) {
    border-color: var(--n-line) !important;
}

html[data-v2-scene="night"] body.shell-v2 hr {
    opacity: 1;
}

html[data-v2-scene="night"] body.shell-v2 a:where(:not(.btn, .page-link, .dropdown-item, .nav-link, .list-group-item, .mm-btn, .footer-menu-item, .dash-panel a)) {
    color: var(--n-link);
}

html[data-v2-scene="night"] body.shell-v2 a:where(:not(.btn, .page-link, .dash-panel a)):hover {
    color: #b5d2ff;
}

/* The grids, in three blues: the column headings (bold) lightest, a row's links in a clear blue, and the row's other data
   the same blue muted, so what opens something stands out without the rows turning busy. */
html[data-v2-scene="night"] body.shell-v2 .table_custom {
    --bs-table-color: var(--n-cell);
}

html[data-v2-scene="night"] body.shell-v2 .table_custom td {
    color: var(--n-cell);
}

html[data-v2-scene="night"] body.shell-v2 .table_custom td a:not(.btn) {
    color: var(--n-cell-link);
}

html[data-v2-scene="night"] body.shell-v2 .thead_custom a,
html[data-v2-scene="night"] body.shell-v2 .table_custom thead th {
    color: var(--n-th);
    font-weight: 700;
}

    html[data-v2-scene="night"] body.shell-v2 .table_custom td a:not(.btn):hover,
    html[data-v2-scene="night"] body.shell-v2 .thead_custom a:hover {
        color: #d3e5ff;
    }

/* An Exports Orders / Packages badge that opens something: light text and a blue rim on the card, the blue fill under the pointer. */
html[data-v2-scene="night"] body.shell-v2 .badge-transparent {
    background-color: transparent;
    color: var(--n-cell-link);
    border-color: var(--n-edge);
}

    html[data-v2-scene="night"] body.shell-v2 .badge-transparent:hover {
        background-color: #304f7f;
        border-color: #304f7f;
        color: #fff;
    }

/* ---------- Panels and cards ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.card, .custom-panel, .grid-card, .form-item, .form-option, .grid-card-chip, .orders-search-shell) {
    background-color: var(--n-raised);
    border-color: var(--n-line);
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 :is(.card-header, .card-footer, .custom-panel-header) {
    background-color: var(--n-head);
    border-color: var(--n-line);
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .grid-card-chip.is-static {
    background-color: var(--n-head);
}

html[data-v2-scene="night"] body.shell-v2 .v2-card-root::after {
    background: linear-gradient(var(--n-line), var(--n-line)) 0 var(--v2-rule-2, -10px) / 100% 1px no-repeat;
}

/* The grids' raised card (v2.css) in the dark: a faint cool bevel along its top, a dark rim, a deeper drop shadow, and
   only a breath of light over the toolbar. (The debossed look sets its own, v2-deboss.css.) */
html[data-v2-scene="night"] body.shell-v2 {
    --v2-grid-card-shadow:
        inset 0 1px 0 rgba(160, 190, 235, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(0, 0, 0, 0.28),
        0 4px 12px -3px rgba(0, 0, 0, 0.55),
        0 1px 3px -1px rgba(0, 0, 0, 0.5);
}

html[data-v2-scene="night"] body.shell-v2 .v2-card-root::before {
    background: linear-gradient(rgba(160, 190, 235, 0.04), rgba(160, 190, 235, 0) 40px), var(--v2-panel-bg);
}

/* The Details / Create / Edit cards take the grid card's raised look (2026-10-14: on a low-contrast screen their edges
   all but vanished into the night sky): the same bevel, rim and shadow (--v2-grid-card-shadow, so they follow the flat or
   the debossed look's value) and the same faint sheen over their top. The scopes are v2.css's own: the Details cards and
   sections at every width, the older cards (.wms-form-shadow, .boxshadowdiv, .form-card) from 577px up, where v2 makes
   them cards. Only these outer cards: the panels inside them (Jobs' and TaxInvoices' .job-panel, Customs Details' .card)
   keep their own look. */
html[data-v2-scene="night"] body.shell-v2 :is(.v2-panel, .detail-card, .detail-section) {
    background-image: linear-gradient(rgba(160, 190, 235, 0.04), rgba(160, 190, 235, 0) 40px);
    box-shadow: var(--v2-grid-card-shadow);
}

@media (min-width: 577px) {
    html[data-v2-scene="night"] body.shell-v2 .container-responsive :is(.wms-form-shadow, .boxshadowdiv, .form-card) {
        background-image: linear-gradient(rgba(160, 190, 235, 0.04), rgba(160, 190, 235, 0) 40px);
        box-shadow: var(--v2-grid-card-shadow);
    }
}

/* ---------- A card with a tab strip (Customs Create / Edit, Tools' calculators): one folder ----------
   The panel and its open tab are one solid colour, a touch lighter than the other cards (a whole declaration sits on it,
   and the translucent panel all but vanished into the sky). The panel's lit edge is drawn just above its top, over its dark
   rim: v2.css raises the open tab above the panel and sets it on the panel's top edge, so the tab hides that line under
   itself and carries its own lit top instead; no seam where they meet. The tabs not open are tabs too, a faint navy behind
   the panel, the panel's lit edge running across their foot. */
html[data-v2-scene="night"] body.shell-v2 {
    --n-folder: #172841;
    --n-folder-lit: rgba(160, 190, 235, 0.16);
    --n-folder-rim: rgba(0, 0, 0, 0.35);
}

html[data-v2-scene="night"] body.shell-v2 :is(.customs-form .tab-content, #calculatorsTabContent) {
    background: var(--n-folder);
    box-shadow:
        0 -1px 0 var(--n-folder-lit),
        0 0 0 1px var(--n-folder-rim),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 4px 12px -3px rgba(0, 0, 0, 0.55),
        0 1px 3px -1px rgba(0, 0, 0, 0.5);
}

html[data-v2-scene="night"] body.shell-v2 :is(.customs-form .nav-tabs .nav-link.active, #calculatorsTab .nav-link.active) {
    background: var(--n-folder);
    color: #fff;
    /* Its own lit top, and the panel's rim along its top and sides (none along its foot, where it is the panel) */
    box-shadow:
        inset 0 1px 0 var(--n-folder-lit),
        0 -1px 0 var(--n-folder-rim),
        -1px 0 0 var(--n-folder-rim),
        1px 0 0 var(--n-folder-rim);
}

html[data-v2-scene="night"] body.shell-v2 :is(.customs-form .nav-tabs .nav-link:not(.active), #calculatorsTab .nav-link:not(.active)) {
    margin-right: 2px;
    background: rgba(23, 40, 65, 0.55);
    border-color: transparent;
    border-radius: var(--v2-panel-radius) var(--v2-panel-radius) 0 0;
    color: var(--n-muted);
    box-shadow:
        inset 0 1px 0 rgba(160, 190, 235, 0.06),
        0 -1px 0 rgba(0, 0, 0, 0.22),
        -1px 0 0 rgba(0, 0, 0, 0.22),
        1px 0 0 rgba(0, 0, 0, 0.22);
}

html[data-v2-scene="night"] body.shell-v2 :is(.customs-form .nav-tabs .nav-link:not(.active), #calculatorsTab .nav-link:not(.active)):is(:hover, :focus-visible) {
    background: rgba(23, 40, 65, 0.9);
    border-color: transparent;
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .nav-tabs {
    --bs-nav-tabs-border-color: var(--n-line);
    --bs-nav-link-color: var(--n-muted);
    --bs-nav-link-hover-color: #fff;
}

/* ---------- Tables ---------- */
html[data-v2-scene="night"] body.shell-v2 .table {
    --bs-table-color: var(--n-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--n-line);
    --bs-table-striped-color: var(--n-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(111, 156, 224, 0.16);
    --bs-table-active-color: #fff;
    --bs-table-active-bg: rgba(111, 156, 224, 0.22);
    color: var(--n-text);
}

/* A table that stands on the sky and not on a card is a card of its own. */
html[data-v2-scene="night"] body.shell-v2 :is(.table, .table_custom) {
    background-color: var(--n-solid);
}

html[data-v2-scene="night"] body.shell-v2 :is(.job-panel, .v2-panel, .wms-form-shadow, .boxshadowdiv, .form-card, .detail-card, .detail-section, .v2-scroll) :is(.table, .table_custom, .thead_custom) {
    background-color: transparent;
}

html[data-v2-scene="night"] body.shell-v2 .table_custom {
    outline-color: var(--n-line);
    box-shadow: none;
}

/* The column headings are the table's own colour (they were a lighter blue): see-through on a card, which is the table. */
html[data-v2-scene="night"] body.shell-v2 :is(.thead_custom, .table > thead, .table_custom > thead) {
    background-color: transparent;
    color: var(--n-th);
    border-color: var(--n-line);
}

/* Sticky headings must hide the rows scrolling under them, so they are the card's colour, nearly solid. */
html[data-v2-scene="night"] body.shell-v2 .v2-scroll thead th {
    background-color: rgba(17, 31, 52, 0.97);
    color: var(--n-th);
}

html[data-v2-scene="night"] body.shell-v2 :is(.table tfoot tr, .table_custom tfoot tr) {
    border-bottom-color: var(--n-edge);
}

/* The XML viewers (messages sent / received, the 507 and AES XML): the tag blues and the dark text were written for a pale page,
   so the panel is a pale blue, whatever the scene. */
html[data-v2-scene="night"] body.shell-v2 :is(tr.xml-row > td, .xml-viewer-target) {
    background: #dce8f8;
    color: #1a1a1a;
}

/* ---------- Fields ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--n-field);
    border-color: var(--field-border);
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .form-select {
    --bs-form-select-bg-img: var(--field-chevron);
}

html[data-v2-scene="night"] body.shell-v2 :is(.form-control, .form-select):focus {
    background-color: var(--n-field);
    color: #fff;
    border-color: var(--field-focus);
    box-shadow: 0 0 0 0.2rem rgba(91, 143, 230, 0.28);
}

html[data-v2-scene="night"] body.shell-v2 :is(.form-control, .form-select):disabled,
html[data-v2-scene="night"] body.shell-v2 .form-control[readonly] {
    background-color: var(--field-readonly-bg);
    color: var(--n-muted);
}

html[data-v2-scene="night"] body.shell-v2 .form-control::placeholder {
    color: #6e819c;
}

html[data-v2-scene="night"] body.shell-v2 .form-floating > .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--n-text);
    box-shadow: 0 0 0 100px var(--n-field) inset;
}

html[data-v2-scene="night"] body.shell-v2 .form-check-input:not(:checked) {
    background-color: var(--n-field);
    border-color: var(--field-border);
}

html[data-v2-scene="night"] body.shell-v2 .form-floating > label::after {
    background-color: transparent;
}

/* select2 (the field, its dropdown and the search box inside it) */
html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single,
html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--multiple {
    background-color: var(--n-field);
}

html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single {
    background-image: var(--field-chevron);
}

html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--n-text);
}

html[data-v2-scene="night"] .select2-dropdown {
    background-color: #14243d;
    border-color: var(--n-edge);
    color: #dbe5f3;
}

html[data-v2-scene="night"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #0f1d33;
    border-color: var(--n-edge);
    color: #dbe5f3;
}

html[data-v2-scene="night"] .select2-container--default .select2-results__option {
    color: #dbe5f3;
}

html[data-v2-scene="night"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-v2-scene="night"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #304f7f;
    color: #fff;
}

html[data-v2-scene="night"] .select2-container--default .select2-results__option[aria-selected=true],
html[data-v2-scene="night"] .select2-container--default .select2-results__option--selected {
    background-color: #1d3153;
}

html[data-v2-scene="night"] body.shell-v2 .autocomplete-list {
    background: var(--n-solid);
    color: var(--n-text);
    border-color: var(--n-line);
}

/* ---------- Grid toolbar, pager, buttons that had a white ground ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.grid-switch, .grid-search, .grid-search-btn) {
    background-color: var(--n-field);
    border-color: var(--field-border);
    color: var(--n-text);
}

/* Outline buttons look odd on the dark, so at night each is a solid button in its own colour (no outline look). The
   outline classes that have a role (components.css §3) take their night colours from the tokens further down instead. */
html[data-v2-scene="night"] body.shell-v2 .btn[class*="btn-outline-"]:not(.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-outline-success) {
    --bs-btn-color: #e8f0fb;
    --bs-btn-bg: #34496b;
    --bs-btn-border-color: #34496b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #425c86;
    --bs-btn-hover-border-color: #425c86;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4a6892;
    --bs-btn-active-border-color: #4a6892;
    --bs-btn-disabled-color: #9fb1c9;
    --bs-btn-disabled-bg: #263650;
    --bs-btn-disabled-border-color: #263650;
}

html[data-v2-scene="night"] body.shell-v2 .btn:is(.btn-outline-alma, .btn-outline-serenity) {
    --bs-btn-bg: #304f7f;
    --bs-btn-border-color: #304f7f;
    --bs-btn-hover-bg: #3e6db5;
    --bs-btn-hover-border-color: #3e6db5;
    --bs-btn-active-bg: #4a73b2;
    --bs-btn-active-border-color: #4a73b2;
    --bs-btn-disabled-bg: #25395a;
    --bs-btn-disabled-border-color: #25395a;
}

html[data-v2-scene="night"] body.shell-v2 .btn[class*="btn-outline-"].btn-outline-warning {
    --bs-btn-bg: #8a6a12;
    --bs-btn-border-color: #8a6a12;
    --bs-btn-hover-bg: #a38018;
    --bs-btn-hover-border-color: #a38018;
    --bs-btn-active-bg: #b58e1c;
    --bs-btn-active-border-color: #b58e1c;
    --bs-btn-disabled-bg: #4a4020;
    --bs-btn-disabled-border-color: #4a4020;
}

html[data-v2-scene="night"] body.shell-v2 .btn[class*="btn-outline-"].btn-outline-info {
    --bs-btn-bg: #1a6a80;
    --bs-btn-border-color: #1a6a80;
    --bs-btn-hover-bg: #218299;
    --bs-btn-hover-border-color: #218299;
    --bs-btn-active-bg: #2796b0;
    --bs-btn-active-border-color: #2796b0;
    --bs-btn-disabled-bg: #1f3f4a;
    --bs-btn-disabled-border-color: #1f3f4a;
}

html[data-v2-scene="night"] body.shell-v2 .pagination {
    --bs-pagination-bg: var(--n-solid);
    --bs-pagination-border-color: var(--n-line);
    --bs-pagination-disabled-bg: #101e34;
    --bs-pagination-disabled-color: #5f7390;
    --bs-pagination-disabled-border-color: var(--n-line);
}

/* Any pagination but the grids' (their pager is its own strip, its night colours below). */
html[data-v2-scene="night"] body.shell-v2 .pagination:not(.grid-pager .pagination, .grid-pager-mobile .pagination) .page-link:not(.active):not(.pagination-active-page) {
    background-color: var(--n-solid);
}

/* The grids' pager at night (components.css, "The pager's look"): a flat navy strip like the menu tier's night button
   (#233a5c), light blue text, the open page filled a brighter blue so it reads on the dark card. */
html[data-v2-scene="night"] body.shell-v2 :is(.grid-pager, .grid-pager-mobile) {
    --pager-face: #1f3456;
    --pager-face-label: #1a2c4a;
    --pager-edge: rgba(143, 180, 238, 0.22);
    --pager-divider: rgba(143, 180, 238, 0.14);
    --pager-ink: #b9d3f8;
    --pager-muted: #8a9bb4;
    --pager-hover: #2a4570;
    --pager-active-face: #3f6aa8;
    --pager-active-ink: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .grid-pager .pagination {
    --bs-pagination-color: #8fb4ee;
    --bs-pagination-focus-color: #8fb4ee;
}

html[data-v2-scene="night"] body.shell-v2 .grid-pager-size .grid-pager-size-value {
    --bs-btn-color: #8fb4ee;
    --bs-btn-hover-color: #8fb4ee;
    --bs-btn-active-color: #8fb4ee;
}

html[data-v2-scene="night"] body.shell-v2 .grid-pager .badge.bg-light {
    background-color: #304f7f !important;
}

html[data-v2-scene="night"] body.shell-v2 .badge-static {
    background-color: var(--n-head);
    color: var(--n-text);
}

/* ---------- Dropdowns, lists, offcanvas, alerts ---------- */
html[data-v2-scene="night"] body.shell-v2 .dropdown-menu {
    --bs-dropdown-bg: var(--n-solid);
    --bs-dropdown-color: var(--n-text);
    --bs-dropdown-border-color: var(--n-line);
    --bs-dropdown-link-color: var(--n-text);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #264474;
    --bs-dropdown-divider-bg: var(--n-line);
}

/* The dropdown cards (v2.css): the night's solid surface, a faint cool bevel along the top, a deep shadow. */
html[data-v2-scene="night"] body.shell-v2 {
    --v2-drop-bg: var(--n-solid);
    --v2-drop-sheen: rgba(160, 190, 235, 0.05);
    --v2-drop-edge: var(--n-line);
    --v2-drop-shadow:
        inset 0 1px 0 rgba(160, 190, 235, 0.10),
        0 14px 32px -10px rgba(0, 0, 0, 0.7),
        0 3px 8px -2px rgba(0, 0, 0, 0.45);
    --v2-drop-ink: var(--n-text);
    --v2-drop-icon: #8fb4ee;
    --v2-drop-hover: #264474;
    --v2-drop-hover-ink: #fff;
    --v2-drop-head: rgba(160, 190, 235, 0.65);
    --v2-drop-line: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .list-group {
    --bs-list-group-bg: var(--n-raised);
    --bs-list-group-color: var(--n-text);
    --bs-list-group-border-color: var(--n-line);
    --bs-list-group-action-color: var(--n-text);
    --bs-list-group-action-hover-bg: #223a60;
    --bs-list-group-action-hover-color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 :is(.offcanvas, .popover) {
    --bs-offcanvas-bg: var(--n-solid);
    --bs-offcanvas-color: var(--n-text);
    --bs-popover-bg: var(--n-solid);
    --bs-popover-body-color: var(--n-text);
    --bs-popover-header-bg: var(--n-head);
    --bs-popover-header-color: #fff;
}

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

/* ---------- Modals (Bootstrap's and the modern ones) ---------- */
html[data-v2-scene="night"] body.shell-v2 .modal-content,
html[data-v2-scene="night"] body.shell-v2 .modal-modern .modal-content {
    background: var(--n-solid);
    color: var(--n-text);
    box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .modal-header,
html[data-v2-scene="night"] body.shell-v2 .modal-footer {
    border-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .modal-modern .modal-footer {
    background: #101f36;
}

html[data-v2-scene="night"] body.shell-v2 .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-facts, .mm-thumb, .mm-doc, .mm-pager-arrow) {
    background: var(--n-raised);
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-choices thead th, .mm-lookup-list thead th, .mm-results-scroll thead th) {
    background: var(--n-head);
    color: #eaf1fb;
}

/* The pager's arrows take the site's blue on hover (the pill buttons' night colours are tokens, further down). */
html[data-v2-scene="night"] body.shell-v2 .mm-pager-arrow:hover:not(:disabled),
html[data-v2-scene="night"] body.shell-v2 .mm-pager-arrow:focus-visible {
    background: #304f7f;
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .mm-chip {
    color: #dbe8f8;
}

/* ---------- The footer's cogwheel menu, the bell's panel, the quick links ---------- */
html[data-v2-scene="night"] body.shell-v2 .footer-menu {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .footer-menu::after {
    border-top-color: rgba(20, 36, 61, 0.96);
}

html[data-v2-scene="night"] body.shell-v2 .footer-menu-item,
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner .footer-menu-item {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .footer-menu-item:hover,
html[data-v2-scene="night"] body.shell-v2 .footer-menu-item:focus-visible,
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner .footer-menu-item:hover,
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner .footer-menu-item:focus-visible {
    background: rgba(111, 156, 224, 0.18);
    color: #fff;
}

html[data-v2-scene="night"] #notifPanel.notif-panel {
    --notif-blue: #8fb4ee;
    --notif-accent: #7fb2ff;
    --notif-line: rgba(150, 185, 235, 0.22);
    color: var(--n-text, #dbe5f3);
}

html[data-v2-scene="night"] #notifPanel.notif-panel::after {
    border-bottom-color: rgba(20, 36, 61, 0.96);
}

html[data-v2-scene="night"] #notifPanel .notif-count {
    background: #264474;
    color: #fff;
}

/* ---------- Details pages and the other record cards ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.detail-card, .detail-section, .form-card, .job-panel) {
    color: var(--n-text);
}

/* Scrollbars on a dark card. */
html[data-v2-scene="night"] body.shell-v2 .v2-scroll {
    scrollbar-color: #3a5278 transparent;
}

@supports selector(::-webkit-scrollbar) {
    html[data-v2-scene="night"] body.shell-v2 .v2-scroll {
        scrollbar-color: auto;
    }

    html[data-v2-scene="night"] body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb,
    html[data-v2-scene="night"] body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:horizontal {
        background-color: #3a5278;
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    html[data-v2-scene="night"] body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:hover,
    html[data-v2-scene="night"] body.shell-v2 .v2-scroll::-webkit-scrollbar-thumb:active {
        background-color: #4a6694;
        background-clip: padding-box;
    }
}

/* ---------- The modern modals' text: the site's blue and ink were written for a white page ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.modal-modern, .mm-scope) {
    /* modal-modern.css sets these on .modal-modern itself, so they are set on it here (inheriting them from the page loses). */
    --mm-ink: #e8f0fb;
    --mm-blue: #8fb4ee;
    --mm-accent: #7fb2ff;
    --mm-muted: var(--n-label);
    --mm-line: var(--n-line);
    --alma-blue: #7aa5ea;
    --alma-ink: #e8f0fb;
    --alma-accent: #7fb2ff;
    --alma-steel: #9fb1c9;
    --alma-muted: var(--n-muted);
}

html[data-v2-scene="night"] body.shell-v2 .modal-modern :is(.grid-switch-btn.is-active, .grid-search-pill, .vo-segment > button.is-active) {
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .modal-modern a:not(.btn):not(.mm-btn) {
    color: var(--n-link);
}

html[data-v2-scene="night"] body.shell-v2 .modal-modern a:not(.btn):not(.mm-btn):hover {
    color: #b5d2ff;
}

/* Text that was a dark grey, and the chips and notes' status colours, lightened for the dark. */
html[data-v2-scene="night"] body.shell-v2 :is(.mm-prose, .mm-prose blockquote, .mm-note) {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip, .mm-pill) {
    color: #b5d2ff;
    background: rgba(127, 178, 255, 0.16);
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip.is-success, .mm-state-text.is-success) {
    color: #43b27e;
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip.is-warning, .mm-state-text.is-warning, .mm-choice-count.is-full, .mm-note.is-warning, .mm-keyfig.is-warning dd i) {
    color: #BA9645;
}

/* A state chip (the quick views', and a grid card's: In Stock, Pending…) in its colour over a faint tint of it. */
html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip, .grid-card-chip).is-success {
    background-color: rgba(67, 178, 126, 0.16);
    color: #43b27e;
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip, .grid-card-chip).is-warning {
    background-color: rgba(186, 150, 69, 0.18);
    color: #BA9645;
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-chip.is-danger, .mm-error, .mm-footnote.is-error, .mm-note.is-danger, .mm-doc > i) {
    color: #ff8b82;
}

/* ---------- The dashboard's weather widget ---------- */
/* weatherwidget.io draws in an iframe of its own, light. An iframe whose colour scheme differs from the page's gets an opaque
   canvas (the white rectangle), so it keeps the normal scheme; its black text and grey icons are inverted to light, with the
   hue turned back so the sun stays yellow. */
html[data-v2-scene="night"] body.shell-v2 iframe {
    color-scheme: normal;
}

html[data-v2-scene="night"] body.shell-v2 .dash-weather-widget iframe {
    filter: invert(1) hue-rotate(180deg);
}

html[data-v2-scene="night"] body.shell-v2 .dash-weather-widget .weatherwidget-io {
    color: var(--n-text);
}

/* ---------- The bell's panel ---------- */
html[data-v2-scene="night"] #notifPanel.notif-panel {
    color: var(--n-text, #dbe5f3);
}

html[data-v2-scene="night"] #notifPanel .notif-title {
    color: #fff;
}

html[data-v2-scene="night"] #notifPanel .notif-msg {
    color: #b4c1d4;
}

html[data-v2-scene="night"] #notifPanel .notif-row.is-link:hover {
    background: rgba(127, 178, 255, 0.14);
}

/* ---------- Dashboard: the welcome line, the world clock and the cogwheel (the panels below keep their light glass) ---------- */
html[data-v2-scene="night"] body.shell-v2 .dash-hero .dash-intro {
    --dash-greeting-color: #8cb4f0;
}

html[data-v2-scene="night"] body.shell-v2 .dash-since {
    --dash-blue: #a9c7f5;
    color: #cbd8ec;
}

html[data-v2-scene="night"] body.shell-v2 :is(.dash-clock-toggle, .dash-cog) {
    background: rgba(159, 192, 245, 0.16);
}

    html[data-v2-scene="night"] body.shell-v2 :is(.dash-clock-toggle, .dash-cog):is(:hover, :focus-visible) {
        background: rgba(159, 192, 245, 0.3);
    }

html[data-v2-scene="night"] body.shell-v2 :is(.dash-clock.is-open .dash-clock-toggle, .dash-cog[aria-expanded="true"]) {
    background: #304f7f;
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .dash-clock-toggle:disabled,
html[data-v2-scene="night"] body.shell-v2 .dash-clock-toggle:disabled:hover {
    background: rgba(159, 192, 245, 0.08);
    color: rgba(169, 199, 245, 0.45);
}

html[data-v2-scene="night"] body.shell-v2 :is(.dash-clock-name, .dash-clock-day) {
    color: #9fb1c9;
}

html[data-v2-scene="night"] body.shell-v2 .dash-clock-time {
    color: #c3d1e6;
}

/* Athens' time in a brighter, more saturated blue than the greeting's, so it stands apart from the
   other cities' pale grey-blue when the clock is open. */
html[data-v2-scene="night"] body.shell-v2 .dash-clock-city.is-home .dash-clock-time {
    color: #5cadff;
}

/* ---------- Vessel Orders Overview ---------- */
html[data-v2-scene="night"] body.shell-v2 .vo-page {
    --alma-ink: #e8f0fb;
    --alma-muted: var(--n-muted);
    --vo-card-line: var(--n-line);
    --vo-progress: #7d90a8;
}

html[data-v2-scene="night"] body.shell-v2 :is(.vo-kpi, .vo-tile) {
    background: var(--n-surface);
    border-color: var(--n-line);
    box-shadow: none;
}

html[data-v2-scene="night"] body.shell-v2 .vo-kpi {
    border-top-color: var(--n-blue);
}

    html[data-v2-scene="night"] body.shell-v2 .vo-kpi.is-stock { border-top-color: var(--vo-stock); }
    html[data-v2-scene="night"] body.shell-v2 .vo-kpi.is-progress { border-top-color: var(--vo-progress); }
    html[data-v2-scene="night"] body.shell-v2 .vo-kpi.is-pending { border-top-color: var(--vo-pending); }

html[data-v2-scene="night"] body.shell-v2 .vo-tile:hover {
    border-color: rgba(127, 178, 255, 0.5);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
}

html[data-v2-scene="night"] body.shell-v2 .vo-segment {
    background: var(--n-field);
}

html[data-v2-scene="night"] body.shell-v2 .vo-segment > button:hover {
    background: rgba(127, 178, 255, 0.14);
}

html[data-v2-scene="night"] body.shell-v2 .vo-segment > button.is-active {
    background: #304f7f;
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 :is(.vo-stage, .vo-window-stage) {
    background: linear-gradient(180deg, #0f1d33 0%, #14243d 100%);
}

html[data-v2-scene="night"] body.shell-v2 .vo-stage-chip {
    background: var(--n-field);
}

html[data-v2-scene="night"] body.shell-v2 .vo-bar {
    background: rgba(255, 255, 255, 0.1);
}

html[data-v2-scene="night"] body.shell-v2 .vo-tip {
    background: #0a1424;
    color: #fff;
}

/* ---------- Pre-Alert ---------- */
/* The mode controls (prealert.css): the main part (icon and label) the deep navy, the upload a lighter shade; the
   chosen mode the AL-MA blue, so it stands clear of the others. */
html[data-v2-scene="night"] body.shell-v2 .prealert-mode {
    --pm-rim: var(--n-line);
    --pm-main: #0f1d33;
    --pm-main-hover: #16273f;
    --pm-ink: #c6d4e8;
    --pm-icon: #8cb4f0;
    --pm-up: #1b2f50;
    --pm-up-hover: #233a5c;
    --pm-up-ink: #8cb4f0;
    --pm-focus: #8cb4f0;
}

    html[data-v2-scene="night"] body.shell-v2 .prealert-mode.is-active {
        --pm-rim: #4a6ea6;
        --pm-main: #304f7f;
        --pm-main-hover: #3a5b8e;
        --pm-ink: #fff;
        --pm-icon: #fff;
        --pm-up: #264474;
        --pm-up-hover: #1c3962;
        --pm-up-ink: #fff;
    }

html[data-v2-scene="night"] body.shell-v2 :is(.basic-editor-shell, .html-preview-pane) {
    background: var(--n-field);
    border-color: var(--n-line) !important;
    box-shadow: none;
}

/* The HTML email, drawn in night colours (the user, 2026-10-15: a white email in a dark editor glared). The email's
   markup carries its colours inline (PreAlertController's builders and the view's script, one fixed palette), so each
   colour is matched by its inline text and given a night value; the white card becomes a raised navy, the navy band a
   lifted blue, the slate text the night label / data shades, the map is dimmed. What is sent is unchanged: the sun
   switch (.is-as-sent) shows it as the recipient will see it. */
html[data-v2-scene="night"] body.shell-v2 .prealert-preview-tone {
    display: inline-flex;
    background: #233a5c;
    color: #f5c45e;
}

    html[data-v2-scene="night"] body.shell-v2 .prealert-preview-tone:hover {
        background: #2c4870;
    }

    html[data-v2-scene="night"] body.shell-v2 .prealert-preview-tone[aria-pressed="true"] {
        color: #c6dbf7;
    }

html[data-v2-scene="night"] body.shell-v2 .html-preview-pane.is-as-sent {
    background: #eef2f7;
    color: #1e293b;
}

    /* The night's bold lead-in blue (Text, below: `.card-body strong`) is not the email's: its bold takes its line's colour. */
    html[data-v2-scene="night"] body.shell-v2 .editor-wrapper .html-preview-pane.is-as-sent strong {
        color: inherit;
    }

html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) {
    color: var(--n-data);
}

    /* The sections (white) a raised navy; the card round them (white too, but named) a shade deeper. */
    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) :is([style*="background:#ffffff"], [style*="background:#fff;"]) {
        background: var(--n-raised) !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) .prealert-card {
        background: #132339 !important;
        border-color: var(--n-line) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="background:#16325c"] {
        background: #264474 !important;
    }

    /* Chips and tinted boxes; the Track Shipment pill fixes its text colour with an inline !important, which no sheet
       can beat, so it keeps its light pill. */
    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) :is([style*="background:#f8fafc"], [style*="background:#f8fbff"], [style*="background:#e8eef9"]):not([style*="!important"]) {
        background: #1d3252 !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="background:#fff7ed"] {
        background: #3d321a !important;
        border-color: #7a5a22 !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) :is([style*="solid #dbe3ea"], [style*="solid #cbd5e1"], [style*="solid #c9d7f2"], [style*="solid #e2e8f0"]):not([style*="!important"]) {
        border-color: var(--n-line) !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) :is([style*="color:#0f172a"], [style*="color:#1e293b"]) {
        color: #eaf1fb !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="color:#334155"] {
        color: var(--n-data) !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="color:#475569"] {
        color: #b4c3d8 !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="color:#64748b"] {
        color: var(--n-label) !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="color:#16325c"] {
        color: var(--n-title) !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) [style*="color:#9a3412"] {
        color: #f5c45e !important;
    }

    html[data-v2-scene="night"] body.shell-v2 .html-preview-pane:not(.is-as-sent) img {
        filter: brightness(.78) saturate(.9);
    }

html[data-v2-scene="night"] body.shell-v2 .basic-email-editor {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .message-mode-hint {
    color: var(--n-muted);
}

html[data-v2-scene="night"] body.shell-v2 .drop-hint {
    background: rgba(15, 29, 51, 0.7);
    color: #b5d2ff;
    text-shadow: none;
}

html[data-v2-scene="night"] body.shell-v2 .attachment-card {
    background: var(--n-raised);
    border-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .attachment-card .filename {
    background: var(--n-head);
    color: var(--n-text);
}

/* ---------- A dark-blue rim with a glass sheen, for the panels (night) ----------
   The edge catches light at the top left and bottom right and falls to a deep blue between, in place of the pale line. The
   menus are a solid fill over a gradient border-box. */
html[data-v2-scene="night"] body.shell-v2 .footer-menu,
html[data-v2-scene="night"] #notifPanel.notif-panel,
html[data-v2-scene="night"] body.shell-v2 .dropdown-menu.dash-menu,
html[data-v2-scene="night"] body.shell-v2 .notif-toast {
    border: 1px solid transparent;
    background:
        linear-gradient(#14243d, #14243d) padding-box,
        linear-gradient(135deg, rgba(143, 180, 238, 0.7) 0%, #1e3553 28%, #16294a 62%, rgba(111, 156, 224, 0.55) 100%) border-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* The in-app toast (notifications-panel.css): the menus' dark glass, light text, and accents bright enough for the night sky. */
html[data-v2-scene="night"] body.shell-v2 .notif-toast {
    --toast-accent: #8fb4ee;
    --toast-accent-bg: rgba(143, 180, 238, 0.16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: var(--n-text);
}

    html[data-v2-scene="night"] body.shell-v2 .notif-toast.is-ok {
        --toast-accent: #6fd39b;
        --toast-accent-bg: rgba(111, 211, 155, 0.16);
    }

    html[data-v2-scene="night"] body.shell-v2 .notif-toast.is-pending {
        --toast-accent: #f7c948;
        --toast-accent-bg: rgba(247, 201, 72, 0.16);
    }

html[data-v2-scene="night"] body.shell-v2 .notif-toast-title {
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .notif-toast-sub {
    color: #b4c1d4;
}

html[data-v2-scene="night"] body.shell-v2 .notif-toast-close {
    color: var(--n-muted);
}

    html[data-v2-scene="night"] body.shell-v2 .notif-toast-close:hover,
    html[data-v2-scene="night"] body.shell-v2 .notif-toast-close:focus-visible {
        background: rgba(143, 180, 238, 0.16);
        color: #fff;
    }

/* The dashboard's panels: a plain thin dark-blue edge (the glass behind it is unchanged). */
html[data-v2-scene="night"] body.shell-v2 .dash-panel {
    border-color: #2a4a7a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ---------- Footer: one colour for the label and the links; the switch is cyan ---------- */
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner a:where(:not(.footer-menu-item, .notif-panel a)),
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner .lang-switch span {
    color: #dcebf7;
}

/* The EN / EL switch is the same cyan as the role and the icons, at night too. */
html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner .lang-switch button {
    color: #00e5ff;
}

html[data-v2-scene="night"] body.shell-v2 .footer-v2-inner a:where(:not(.footer-menu-item, .notif-panel a)):hover {
    color: #fff;
}

/* ---------- select2's default text (the chosen value and the placeholder) ---------- */
html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #8ea1bd;
}

html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #264474;
    border-color: var(--n-line);
    color: var(--n-text);
}

html[data-v2-scene="night"] .select2-container--default .select2-results__option--disabled {
    color: #6e819c;
}

/* ---------- Skeleton loaders ---------- */
html[data-v2-scene="night"] body.shell-v2 .orders-skeleton-line {
    background: linear-gradient(90deg, rgba(159, 192, 245, 0.08) 25%, rgba(159, 192, 245, 0.2) 37%, rgba(159, 192, 245, 0.08) 63%);
    background-size: 400% 100%;
}

/* ---------- Tabs (AES Notifications' office tabs, Customs, Tools) ---------- */
html[data-v2-scene="night"] body.shell-v2 .nav-tabs .nav-link {
    background: transparent;
    color: var(--n-muted);
    border-color: transparent;
}

html[data-v2-scene="night"] body.shell-v2 .nav-tabs .nav-link:hover {
    color: #fff;
    border-color: var(--n-line) var(--n-line) transparent;
}

html[data-v2-scene="night"] body.shell-v2 .nav-tabs .nav-link.active {
    background: var(--n-raised);
    color: #fff;
    border-color: var(--n-line) var(--n-line) var(--n-raised);
}

/* AES 599 Updates (Views/AesNotifications/Updates.cshtml): the tables' rounded frame in the night's rule colour; the
   Pending MRNs section keeps its amber top line over the raised cards' shadow, the amber softened. */
html[data-v2-scene="night"] body.shell-v2 .aes-frame {
    border-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .aes-section.is-pending {
    box-shadow: inset 0 3px 0 rgba(240, 173, 0, 0.75), var(--v2-grid-card-shadow);
}

html[data-v2-scene="night"] body.shell-v2 .aes-section.is-pending .aes-icon {
    color: #f5c45e;
}

/* ---------- Coloured badges keep a readable text colour (Open is amber with dark text) ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.badge.bg-warning, .badge.bg-info) {
    color: #1f2937 !important;
}

/* Success badges (Filed, Paid, In Stock…) in the night's deeper green, warning ones (Pending, Open…) in its honey, both
   with the dark ink: the day's full green and amber glared on the dark ground. */
html[data-v2-scene="night"] body.shell-v2 .badge:is(.bg-success, .text-bg-success) {
    background-color: #43b27e !important;
    color: #0f1d33 !important;
}

html[data-v2-scene="night"] body.shell-v2 .badge:is(.bg-warning, .text-bg-warning) {
    background-color: #BA9645 !important;
    color: #0f1d33 !important;
}

/* ---------- Job Create / Edit: the charge cards' row dividers ---------- */
html[data-v2-scene="night"] body.shell-v2 .job-rows-table.table-bordered thead > tr,
html[data-v2-scene="night"] body.shell-v2 .job-rows-table.table-bordered tfoot > tr {
    border-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .job-rows-table {
    --bs-table-border-color: var(--n-line);
    border-color: var(--n-line);
}

/* ---------- The main menu's profile button ---------- */
html[data-v2-scene="night"] body.shell-v2 .menu-footer .menu-round {
    background-color: #264474;
    color: #dbe8f8;
}

html[data-v2-scene="night"] body.shell-v2 .menu-footer .menu-round:hover,
html[data-v2-scene="night"] body.shell-v2 .menu-footer .menu-round:focus-visible {
    background-color: #304f7f;
    color: #fff;
}

/* ---------- The AL-MA charges card (Job Create / Edit): the sky blue, its heading too ---------- */
html[data-v2-scene="night"] body.shell-v2 .job-panel-alma {
    background-color: rgba(99, 179, 237, 0.08);
    border-color: rgba(99, 179, 237, 0.5);
}

html[data-v2-scene="night"] body.shell-v2 .job-panel-alma h5.charge-heading {
    color: #7cc0f2 !important;
}

/* ---------- The dashboard cogwheel's menu body ---------- */
html[data-v2-scene="night"] body.shell-v2 .dash-menu .dropdown-item {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .dash-menu .dropdown-item:is(:hover, :focus) {
    background: rgba(127, 178, 255, 0.16);
    color: #fff;
}

html[data-v2-scene="night"] body.shell-v2 .dash-menu .dropdown-item > .bi {
    color: #8cb4f0;
}

html[data-v2-scene="night"] body.shell-v2 .dash-menu .dropdown-header {
    color: var(--n-muted);
}

html[data-v2-scene="night"] body.shell-v2 .dash-menu .dropdown-divider {
    border-top-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .dash-panel-toggle[aria-pressed="false"] .dash-toggle-name {
    color: #8396b0;
}

html[data-v2-scene="night"] body.shell-v2 .dash-toggle-show {
    color: #7fb2ff;
}

/* ---------- Tooltips: a muted dark gray around the box and its arrow (dark mode) ---------- */
/* The arrow is drawn twice: ::before is the muted gray one, a pixel larger, and ::after the tooltip's own dark one over it. */
html[data-v2-scene="night"] .site-tooltip {
    border: 1px solid #3c4251;
}

html[data-v2-scene="night"] .site-tooltip::before {
    content: "";
    position: absolute;
    left: var(--site-tooltip-arrow-x, 50%);
    border: 6px solid transparent;
    transform: translateX(-50%);
}

html[data-v2-scene="night"] .site-tooltip[data-placement="top"]::before {
    top: 100%;
    border-top-color: #3c4251;
}

html[data-v2-scene="night"] .site-tooltip[data-placement="bottom"]::before {
    bottom: 100%;
    border-bottom-color: #3c4251;
}

html[data-v2-scene="night"] body.shell-v2 :is(.dash-last-visit-tip, .vo-tip) {
    outline: 1px solid #3c4251;
}

/* ---------- Labels and their data: two shades, never both white ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(dt, .detail-block-label, .detail-line-label, .form-label),
html[data-v2-scene="night"] body.shell-v2 dt strong {
    color: var(--n-label);
}

html[data-v2-scene="night"] body.shell-v2 :is(dd, .mm-fact dd),
html[data-v2-scene="night"] body.shell-v2 dd strong {
    color: var(--n-data);
}

/* "Label: value" lines written as a bold label then the value (Customs Details' cards and alerts). */
html[data-v2-scene="night"] body.shell-v2 :is(.card-body, .alert) strong:not(dd strong, td strong, th strong, a strong, .btn strong, [class*="text-"]) {
    color: var(--n-label);
}

/* ---------- Alerts ---------- */
html[data-v2-scene="night"] body.shell-v2 .alert {
    --bs-alert-color: var(--n-text);
    --bs-alert-bg: var(--n-raised);
    --bs-alert-border-color: var(--n-line);
}

html[data-v2-scene="night"] body.shell-v2 .alert-primary { --bs-alert-color: #9cc3ff; --bs-alert-bg: rgba(13, 110, 253, 0.16); --bs-alert-border-color: rgba(13, 110, 253, 0.45); }
html[data-v2-scene="night"] body.shell-v2 .alert-secondary { --bs-alert-color: #c3ccd6; --bs-alert-bg: rgba(108, 117, 125, 0.2); --bs-alert-border-color: rgba(108, 117, 125, 0.45); }
html[data-v2-scene="night"] body.shell-v2 .alert-success { --bs-alert-color: #8fe0b5; --bs-alert-bg: rgba(25, 135, 84, 0.18); --bs-alert-border-color: rgba(25, 135, 84, 0.5); }
html[data-v2-scene="night"] body.shell-v2 .alert-info { --bs-alert-color: #7fe0f5; --bs-alert-bg: rgba(13, 202, 240, 0.12); --bs-alert-border-color: rgba(13, 202, 240, 0.4); }
html[data-v2-scene="night"] body.shell-v2 .alert-warning { --bs-alert-color: #ffd666; --bs-alert-bg: rgba(255, 193, 7, 0.14); --bs-alert-border-color: rgba(255, 193, 7, 0.4); }
html[data-v2-scene="night"] body.shell-v2 .alert-danger { --bs-alert-color: #ff9ba3; --bs-alert-bg: rgba(220, 53, 69, 0.16); --bs-alert-border-color: rgba(220, 53, 69, 0.5); }
html[data-v2-scene="night"] body.shell-v2 .alert-dark { --bs-alert-color: var(--n-text); --bs-alert-bg: #0f1d33; --bs-alert-border-color: var(--n-line); }

/* ---------- Status text colours, lightened for the dark ---------- */
html[data-v2-scene="night"] body.shell-v2 .text-danger { color: #ff8b82 !important; }
html[data-v2-scene="night"] body.shell-v2 .text-success { color: #43b27e !important; }
html[data-v2-scene="night"] body.shell-v2 .text-warning { color: #BA9645 !important; }
html[data-v2-scene="night"] body.shell-v2 .text-warning-dark { color: #BA9645 !important; }
/* Orders' Date Out: a deeper wine red than .text-danger's, after the night Delete button */
html[data-v2-scene="night"] body.shell-v2 .order-date-out { color: #c2525d !important; }
html[data-v2-scene="night"] body.shell-v2 .text-primary { color: #8cb4f0 !important; }

/* ---------- Package photos (Order Create / Edit / Details) ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.pkg-photo-preview-btn, .package-photo-thumb-btn, .package-photo-thumb-placeholder) {
    background-color: var(--n-field);
    border-color: var(--field-border);
    color: var(--n-muted);
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-actions[data-can-manage="true"] .package-photo-thumb-trigger:hover .package-photo-thumb-placeholder {
    border-color: #7fb2ff;
    color: #7fb2ff;
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-helper-menu {
    background: var(--n-solid);
    border-color: var(--n-line);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-helper-btn {
    color: var(--n-text);
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-helper-btn:is(:hover, :focus-visible) {
    background: rgba(127, 178, 255, 0.16);
    color: #b5d2ff;
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-helper-remove:is(:hover, :focus-visible) {
    background: rgba(255, 139, 130, 0.14);
    color: #ff8b82;
}

html[data-v2-scene="night"] body.shell-v2 .package-photo-remove-inline {
    color: var(--n-muted);
}

/* ---------- The record cards on a small screen ---------- */
/* v2.css gives the older cards (.wms-form-shadow and the like) the panel look from 577px up; below it site.css's own translucent
   white showed through at night (Declaration 1804 and Customs Details). A card inside a .wms-centerdiv stays flat, as site.css has it. */
html[data-v2-scene="night"] body.shell-v2 :is(.wms-form-shadow, .boxshadowdiv, .form-card, .detail-card, .detail-section):not(.wms-centerdiv .wms-form-shadow) {
    background-color: var(--n-surface);
    color: var(--n-text);
}

/* ...but a Create / Edit form on a very small phone has no card (v2.css): its fields sit straight on the night sky. */
@media (max-width: 399.98px) {
    html[data-v2-scene="night"] body.shell-v2 .form-card:not(.wms-centerdiv .wms-form-shadow) {
        background-color: transparent;
    }
}

/* An Index's filter badge beside its title (components.css §4). */
html[data-v2-scene="night"] body.shell-v2 .page-header-badge {
    background-color: #233a5c;
    color: #b9d3f8;
}

    html[data-v2-scene="night"] body.shell-v2 .page-header-badge.is-warning {
        background-color: #3d3218;
        color: #BA9645;
    }

    html[data-v2-scene="night"] body.shell-v2 .page-header-badge.is-success {
        background-color: #173a2c;
        color: #43b27e;
    }

    html[data-v2-scene="night"] body.shell-v2 .page-header-badge.is-info {
        background-color: #1d3352;
        color: #8cb4f0;
    }

html[data-v2-scene="night"] body.shell-v2 .drop-hint {
    background: rgba(15, 29, 51, 0.75);
    color: #b5d2ff;
    text-shadow: none;
}

/* ---------- Links written as buttons or spans (the supplier's name on Order Details): the same blue as the other links ---------- */
html[data-v2-scene="night"] body.shell-v2 :is(.mm-link, .mm-link-button) {
    color: var(--n-link);
}

html[data-v2-scene="night"] body.shell-v2 :is(.mm-link, .mm-link-button):is(:hover, :focus-visible) {
    color: #b5d2ff;
}

/* ---------- The index card view (small screens): the client, the total, the MRN ---------- */
/* The cards' blue (titles, links, icons) was the site's dark blue; the quiet client link, the Jobs total and the MRN were #212529. */
html[data-v2-scene="night"] body.shell-v2 .grid-card {
    --alma-blue: #8cb4f0;
    --alma-muted: var(--n-muted);
    border-left-color: #5b8fe6;
}

html[data-v2-scene="night"] body.shell-v2 .grid-card :is(a.grid-card-text.is-quiet, .grid-card-aside.is-code, .jobs-card-total) {
    color: var(--n-data);
}

html[data-v2-scene="night"] body.shell-v2 button.grid-card-chip:is(:hover, :focus-visible) {
    background-color: #304f7f;
    border-color: #304f7f;
}

/* ---------- The main menu panel: its link rules, the quick-link row and the footer in a dark blue, darker than the panel ---------- */
html[data-v2-scene="night"] body.shell-v2 .custom-panel-body ul li a,
html[data-v2-scene="night"] body.shell-v2 .icon-row,
html[data-v2-scene="night"] body.shell-v2 .custom-panel-header,
html[data-v2-scene="night"] body.shell-v2 .menu-footer {
    border-color: #0b1626;
}

/* ---------- Scrollbars: dark blue, vertical and horizontal, the page's and every scrolling box's ---------- */
html[data-v2-scene="night"],
html[data-v2-scene="night"] * {
    scrollbar-color: #35507a #0f1d33;
}

/* A browser without scrollbar-color (an older Safari) gets the same by its own pseudo-elements. */
@supports not (scrollbar-color: auto) {
    html[data-v2-scene="night"] ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background: #0f1d33;
    }

    html[data-v2-scene="night"] ::-webkit-scrollbar-track,
    html[data-v2-scene="night"] ::-webkit-scrollbar-corner {
        background: #0f1d33;
    }

    html[data-v2-scene="night"] ::-webkit-scrollbar-thumb {
        background: #35507a;
        border: 2px solid #0f1d33;
        border-radius: 8px;
    }

    html[data-v2-scene="night"] ::-webkit-scrollbar-thumb:hover {
        background: #46669a;
    }
}

/* ---------- Buttons at night: the role tokens (tokens.css) the night changes. The solid roles (primary, add,
   danger, success, warning) keep their day fills and take the midnight-ink rim; the soft ones (style B) are darker
   tints with light text and no rim; Filters and the column picker are navy with a lighter rim. ---------- */
html[data-v2-scene="night"] body.shell-v2 {
    --btn-rim: var(--n-edge);
    --btn-filter-bg: #1b2f50;   --btn-filter-fg: #fff;    --btn-filter-bd: var(--n-edge); --btn-filter-bg-h: #27426f; --btn-filter-bd-h: #5a7db3; --btn-filter-bg-a: #14233c; --btn-filter-bd-a: var(--n-edge);
    --btn-neutral-bg: #233a5c;  --btn-neutral-fg: #b9d3f8; --btn-neutral-bd: #233a5c;    --btn-neutral-bg-h: #2c4870; --btn-neutral-fg-h: #fff; --btn-neutral-bd-h: #2c4870; --btn-neutral-bg-a: #34537f; --btn-neutral-bd-a: #34537f;
    --btn-cancel-bg: #2a3240;   --btn-cancel-fg: #c9d3e0;  --btn-cancel-bd: #2a3240;     --btn-cancel-bg-h: #343e4f;  --btn-cancel-fg-h: #fff;  --btn-cancel-bd-h: #343e4f;  --btn-cancel-bg-a: #3d4a5d;  --btn-cancel-bd-a: #3d4a5d;
    --btn-admin-bg: #362d4d;    --btn-admin-fg: #d6c9f2;  --btn-admin-bd: #362d4d;    --btn-admin-bg-h: #43385f;   --btn-admin-fg-h: #fff;    --btn-admin-bd-h: #43385f;  --btn-admin-bg-a: #504470;  --btn-admin-bd-a: #504470;
    /* Delete (solid by day) takes the soft danger's look at night: the full red glared on the dark ground */
    --btn-danger-bg: #3a1f26;   --btn-danger-fg: #ff8b82;  --btn-danger-bd: #3a1f26;     --btn-danger-bg-h: #4d252d;  --btn-danger-fg-h: #ffb3ad; --btn-danger-bd-h: #4d252d;  --btn-danger-bg-a: #5c2b34;  --btn-danger-bd-a: #5c2b34;
    --btn-danger-soft-bg: #3a1f26; --btn-danger-soft-fg: #ff8b82; --btn-danger-soft-bd: #3a1f26; --btn-danger-soft-bg-h: #4d252d; --btn-danger-soft-fg-h: #ffb3ad; --btn-danger-soft-bd-h: #4d252d; --btn-danger-soft-bg-a: #5c2b34; --btn-danger-soft-bd-a: #5c2b34;
    /* Open Job, Approve (solid by day) take the soft success's look at night, as Delete does */
    --btn-success-bg: #173a2c;  --btn-success-fg: #6fd6a3; --btn-success-bd: #173a2c;    --btn-success-bg-h: #1e4a38; --btn-success-fg-h: #9be6c1; --btn-success-bd-h: #1e4a38; --btn-success-bg-a: #255a44; --btn-success-bd-a: #255a44;
    --btn-success-soft-bg: #173a2c; --btn-success-soft-fg: #6fd6a3; --btn-success-soft-bd: #173a2c; --btn-success-soft-bg-h: #1e4a38; --btn-success-soft-fg-h: #9be6c1; --btn-success-soft-bd-h: #1e4a38; --btn-success-soft-bg-a: #255a44; --btn-success-soft-bd-a: #255a44;
    /* btn-light had no night look (N2): the raised ground with the body text */
    --btn-light-bg: var(--n-raised); --btn-light-fg: var(--n-text); --btn-light-bd: var(--n-edge); --btn-light-bg-h: #233a5c; --btn-light-fg-h: #fff; --btn-light-bd-h: var(--n-edge); --btn-light-bg-a: #2c4870; --btn-light-bd-a: var(--n-edge);

    /* The modern modals' pills: each variant its own colour (N1: they all turned plain blue) */
    --pill-primary-bg: #304f7f; --pill-primary-bg-h: #3e6db5;
    --pill-quiet-bg: rgba(140, 180, 240, 0.14); --pill-quiet-fg: #b9d3f8; --pill-quiet-bg-h: rgba(140, 180, 240, 0.24); --pill-quiet-fg-h: #fff;
    --pill-danger-bg: #a83a47;  --pill-danger-bg-h: #b8404e;
    --pill-danger-quiet-bg: rgba(255, 139, 130, 0.14); --pill-danger-quiet-fg: #ff8b82; --pill-danger-quiet-bg-h: #a83a47; --pill-danger-quiet-fg-h: #fff;
    --pill-success-bg: #1f6b49; --pill-success-bg-h: #278058;

    --grid-search-border: var(--n-edge);
}

/* The pager's page-size buttons keep their own (outline) look: light text on the dark ground. */
html[data-v2-scene="night"] body.shell-v2 .grid-pager-size .btn-outline-secondary {
    --bs-btn-color: #e8f0fb;
    --bs-btn-border-color: var(--n-edge);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #304f7f;
    --bs-btn-hover-border-color: #304f7f;
}

/* ---------- Page-load bar and quick-link ring: the bright blue (tokens.css --progress-accent), which reads on the night sky ---------- */
html[data-v2-scene="night"] body.shell-v2 .page-progress-bar {
    background: var(--progress-accent);
}

html[data-v2-scene="night"] body.shell-v2 .ql-item.is-ql-loading .icon-link::after {
    background: conic-gradient(var(--progress-accent) calc(var(--page-progress) * 1%), transparent 0);
}

/* ---------- Midnight-ink edges: every badge and checkbox rim, and every button without a role, whatever its variant or
   state. The role classes (components.css §3) take the rim from --btn-rim above, so a soft one can go without. ---------- */
html[data-v2-scene="night"] body.shell-v2 .btn:not(.btn-link, .btn-close, .btn-alma, .btn-primary, .btn-outline-primary, .btn-outline-secondary,
    .btn-alma-filter, .btn-alma-light, .btn-alma-menu, .btn-secondary, .btn-danger, .btn-outline-danger, .btn-success, .btn-outline-success, .btn-warning, .btn-light, .btn-admin),
html[data-v2-scene="night"] body.shell-v2 .badge,
html[data-v2-scene="night"] body.shell-v2 .page-link,
html[data-v2-scene="night"] body.shell-v2 .form-check-input {
    border-color: var(--n-edge) !important;
}