/*--------------------------------------------------------------
# v3's night: the slate night over the blue one (v3-night-base.css). Once "Night v2", a per-role option.
#
# The user's picks from docs/mockups/v2_NIGHT_MOCKUP.html (2026-10-14), over the blue night (v3-night-base.css):
#   Headings C (slate)        Grid text B (calm blue)     Buttons C (slate)        Badges B (tinted)
#   Pager, menus, tabs C      Modals B (calm blue)        Alerts B (soft tint)
#   Unchanged (A): body text, text links, card labels, input fields, icons, the cards, the sky.
# Each block below is that option's rule from the mockup, moved under this file's prefix; change a value here and in
# the mockup together, so the mockup keeps showing what the app does.
#
# For everyone since 2026-10-30. _Layout adds
# .v3-night to the body and loads this file after v3-night-base.css. Every rule sits under
# html[data-v3-scene="night"] body.shell-v3.v3-night: one class more than night's own, so it wins over the blue night
# without !important (except where night's own rule is important), and day and sunset never read it.
--------------------------------------------------------------*/

/* ---------- Tokens: headings (C), grid text (B), buttons (C), menus (C) ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night {
    /* Page titles (and .text-alma): the light blue, the blue night's own title colour (the user, 2026-10-14: the slate
       #c3ccd8 was picked first, then Add New's #304f7f was too dim on the night sky) */
    --n-title: #8cb4f0;

    /* The grids: light column headings, blue links, the row's other data a pale blue-grey */
    --n-th: #dfe8f5;
    --n-cell: #b4c0d0;
    --n-cell-link: #8cb4f0;

    /* Buttons: slate for Filters, the menu tier, Cancel and btn-light; the primary (Add New, Edit, Save) keeps the AL-MA
       blue. Each border is its fill, so no button wears night's midnight rim. Danger, success, warning and admin are
       night's own. */
    --btn-primary-bg: #304f7f; --btn-primary-fg: #fff; --btn-primary-bd: #304f7f; --btn-primary-bg-h: #3e6db5; --btn-primary-bd-h: #3e6db5; --btn-primary-bg-a: #29446d; --btn-primary-bd-a: #29446d;
    --btn-neutral-bg: #2c3442; --btn-neutral-fg: #d3d9e1; --btn-neutral-bd: #2c3442; --btn-neutral-bg-h: #374050; --btn-neutral-fg-h: #fff; --btn-neutral-bd-h: #374050; --btn-neutral-bg-a: #414b5d; --btn-neutral-bd-a: #414b5d;
    --btn-filter-bg: #262d38; --btn-filter-fg: #e3e8ee; --btn-filter-bd: #262d38; --btn-filter-bg-h: #303845; --btn-filter-bd-h: #303845; --btn-filter-bg-a: #20262f; --btn-filter-bd-a: #20262f;
    --btn-cancel-bg: #232933; --btn-cancel-fg: #b9c2ce; --btn-cancel-bd: #232933; --btn-cancel-bg-h: #2d343f; --btn-cancel-fg-h: #fff; --btn-cancel-bd-h: #2d343f; --btn-cancel-bg-a: #373f4c; --btn-cancel-bd-a: #373f4c;
    --btn-light-bg: #2c3442; --btn-light-fg: #d3d9e1; --btn-light-bd: #2c3442; --btn-light-bg-h: #374050; --btn-light-fg-h: #fff; --btn-light-bd-h: #374050; --btn-light-bg-a: #414b5d; --btn-light-bd-a: #414b5d;

    /* The dropdown cards: a slate hover and section heading */
    --v3-drop-hover: #2c3442;
    --v3-drop-head: #8f99a6;
}

/* ---------- Headings (C: slate) ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.page-header-title, .text-alma, .dash-greeting, .detail-title, .modal-title, .alma-landing *) {
    color: #d0d7e1;
}

/* A record's title on its Details page */
html[data-v3-scene="night"] body.shell-v3.v3-night .detail-title {
    color: #e1e6ed;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .mm-scope {
    --mm-ink: #e1e6ed;
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.card-header, .custom-panel-header) {
    color: #aeb8c6;
}

/* ---------- Grid text (B: calm blue): the row hover and a row's link under the pointer ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night .table {
    --bs-table-hover-bg: rgba(140, 180, 240, 0.10);
}

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

/* ---------- Badges (B: tinted): a faint fill of the colour with the colour as text. Night's are important, so these are
   too. Exports' link badges (.badge-transparent) and .badge-static keep night's look. ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(.bg-success, .text-bg-success) {
    background-color: rgba(67, 178, 126, 0.18) !important;
    color: #5cc795 !important;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(.bg-warning, .text-bg-warning) {
    background-color: rgba(186, 150, 69, 0.2) !important;
    color: #d4b062 !important;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(.bg-danger, .text-bg-danger) {
    background-color: rgba(255, 139, 130, 0.16) !important;
    color: #ff8b82 !important;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(.bg-info, .text-bg-info) {
    background-color: rgba(99, 199, 230, 0.16) !important;
    color: #7fd3ec !important;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(.bg-secondary, .text-bg-secondary, .bg-dark, .text-bg-dark, .badge-dark) {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: #c9d1dc !important;
}

/* A badge without a colour (site.css's blue: the pager's page count and the like) and a primary one */
html[data-v3-scene="night"] body.shell-v3.v3-night .badge:is(:not([class*="bg-"], .badge-dark, .badge-transparent, .badge-static), .bg-primary, .text-bg-primary) {
    background-color: rgba(140, 180, 240, 0.16) !important;
    color: #b5d2ff !important;
}

/* An Index's filter badge beside its title (the warning / success / info ones are already tints) */
html[data-v3-scene="night"] body.shell-v3.v3-night .page-header-badge:not(.is-warning, .is-success, .is-info) {
    background-color: rgba(140, 180, 240, 0.14);
    color: #b5d2ff;
}

/* ---------- Pager, menus and tabs (C: slate) ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(.grid-pager, .grid-pager-mobile) {
    --pager-face: #262d38;
    --pager-face-label: #222833;
    --pager-edge: rgba(255, 255, 255, 0.08);
    --pager-divider: rgba(255, 255, 255, 0.06);
    --pager-ink: #d3d9e1;
    --pager-muted: #8f99a6;
    --pager-hover: #303845;
    --pager-active-face: #304f7f;
    --pager-active-ink: #fff;
}

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

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

html[data-v3-scene="night"] body.shell-v3.v3-night .grid-pager-size .btn-outline-secondary {
    --bs-btn-hover-bg: #303845;
    --bs-btn-hover-border-color: #303845;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dropdown-menu {
    --bs-dropdown-link-hover-bg: #2c3442;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .nav-tabs .nav-link:not(.active) {
    color: #8f99a6;
}

/* ---------- Modals (B: calm blue): night's surfaces, a thin soft line on top, no footer band, quieter chips and pills ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern {
    --mm-ink: #f2f6fb;
    --mm-muted: #9aa8bb;
    --mm-line: rgba(255, 255, 255, 0.08);
    --pill-primary-bg: #3a66a6;
    --pill-primary-bg-h: #4a78bb;
    --pill-quiet-bg: rgba(255, 255, 255, 0.06);
    --pill-quiet-fg: #d6e2f2;
    --pill-quiet-bg-h: rgba(255, 255, 255, 0.11);
    --pill-quiet-fg-h: #fff;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .modal-title:not(.text-danger) {
    color: var(--mm-ink);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .modal-content::before {
    height: 2px;
    /* A brighter spot at the centre, fading out on either side. */
    background: linear-gradient(90deg, rgba(58, 102, 166, 0) 0%, #3a66a6 25%, #6f9ad8 50%, #3a66a6 75%, rgba(58, 102, 166, 0) 100%);
}

/* A confirm (Delete) keeps its red line, as thin as the others. */
html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern.mm-danger .modal-content::before {
    background: linear-gradient(90deg, rgba(194, 82, 93, 0) 0%, #c2525d 25%, #e8838c 50%, #c2525d 75%, rgba(194, 82, 93, 0) 100%);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .modal-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .mm-facts {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .mm-chip:not(.is-success, .is-warning, .is-danger) {
    background: rgba(140, 180, 240, 0.12);
    color: #c9dcf6;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .modal-modern .mm-fact dd {
    color: #e6ecf3;
}

/* ---------- Alerts (B: soft tint): no rim, the text a light tint of the colour, the lead-in in the same ink ---------- */
html[data-v3-scene="night"] body.shell-v3.v3-night .alert {
    --bs-alert-border-color: transparent;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .alert strong {
    color: inherit;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .alert-primary { --bs-alert-color: #c9dcf6; --bs-alert-bg: rgba(140, 180, 240, 0.12); }
html[data-v3-scene="night"] body.shell-v3.v3-night .alert-secondary { --bs-alert-color: #d3d9e1; --bs-alert-bg: rgba(255, 255, 255, 0.06); }
html[data-v3-scene="night"] body.shell-v3.v3-night .alert-success { --bs-alert-color: #a6e3c3; --bs-alert-bg: rgba(67, 178, 126, 0.14); }
html[data-v3-scene="night"] body.shell-v3.v3-night .alert-info { --bs-alert-color: #a9e2f2; --bs-alert-bg: rgba(99, 199, 230, 0.12); }
html[data-v3-scene="night"] body.shell-v3.v3-night .alert-warning { --bs-alert-color: #e8d3a0; --bs-alert-bg: rgba(186, 150, 69, 0.16); }
html[data-v3-scene="night"] body.shell-v3.v3-night .alert-danger { --bs-alert-color: #ffc2bd; --bs-alert-bg: rgba(255, 139, 130, 0.12); }

/* A modal's note (.mm-note): the same soft tint, without its bar */
html[data-v3-scene="night"] body.shell-v3.v3-night .mm-note {
    border-left-color: transparent;
    background: rgba(140, 180, 240, 0.10);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .mm-note.is-warning {
    background: rgba(186, 150, 69, 0.14);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .mm-note.is-danger {
    background: rgba(255, 139, 130, 0.12);
}

/* ---------- The dashboard (the user, 2026-10-15): dark slate glass panels ----------
   The panels were the day's white glass at night too, so this theme's tinted badges (light text on a faint fill, made for
   a dark surface) all but vanished on them. Here the panels turn a slate glass, the markets drawer the cogwheel menu's
   dark blue glass, the empty slots slate, and everything inside them is relit in the theme's slate and calm blue. The
   panel heads, the ticker and the toasts were already dark and keep their looks. */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-panel, .dash-markets) {
    --dash-blue: #8cb4f0;
    --dash-accent: #6f9ce0;
}

/* The panels: slate glass, a little lighter at the top, thin enough for the sea to show through blurred. What shows
   through is dimmed and desaturated first, so the sea's light teal low on the page (and the waves' bright bands) can't
   wash the slate out; saturate above 1 pulled its blue through and tinted the slate. */
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-panel {
    border-color: rgba(160, 172, 190, 0.2);
    background: linear-gradient(180deg, rgba(40, 47, 58, 0.74), rgba(30, 36, 46, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 20px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(18px) brightness(0.55) saturate(0.7);
    backdrop-filter: blur(18px) brightness(0.55) saturate(0.7);
}

/* The panel head's white chips (the "12 new" count, the chosen news language) keep the AL-MA blue, not the lighter
   blue above */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-count:not(.is-updated:hover), .dash-lang[aria-pressed="true"]) {
    color: #304f7f;
}

/* Rows */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-row, .dash-news-item, .dash-fleet-item, .dash-skeleton) {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-row {
    color: #c9d1dc;
}

    html[data-v3-scene="night"] body.shell-v3.v3-night .dash-row:is(:hover, :focus-visible) {
        background: rgba(140, 180, 240, 0.10);
        color: #e3e8ee;
    }

    html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-row, .dash-news-item).is-new {
        background: rgba(110, 156, 224, 0.08);
    }

    html[data-v3-scene="night"] body.shell-v3.v3-night .dash-row.is-updated {
        background: rgba(212, 176, 98, 0.08);
    }

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-new-tag {
    background: #3e6db5;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-new-tag.is-updated {
    background: #a8742a;
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-row-facts, .dash-detail-value) {
    color: #b4c0d0;
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-row-title.is-muted, .dash-row-note, .dash-row-aside, .dash-facts-arrow,
    .dash-detail-label, .dash-empty) {
    color: #8f99a6;
}

/* The skeleton's bars take the scene from tokens.css (--skel-base, --skel-hi). */

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-link-btn:hover {
    color: #b5d2ff;
}

/* The news: the section pills, the text, the language tag */
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-pill {
    background: rgba(255, 255, 255, 0.07);
    color: #c9d1dc;
}

    html[data-v3-scene="night"] body.shell-v3.v3-night .dash-pill[aria-pressed="true"] {
        background: #304f7f;
        color: #fff;
    }

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-news-summary, .dash-news-source) {
    color: #b4c0d0;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-news-meta {
    color: #8f99a6;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-news-lang {
    border-color: rgba(255, 255, 255, 0.16);
    color: #8f99a6;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-news-blog:is(:hover, :focus-visible) {
    color: #b5d2ff;
}

/* The fleet */
html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-fleet-client-filter, .dash-fleet-search) {
    background-color: #1e242e;
    border-color: #3a4250;
    color: #d3d9e1;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-fleet-item {
    color: #b4c0d0;
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-fleet-pos, .dash-fleet-voyage b) {
    color: #d3deee;
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-fleet-client, .dash-fleet-age, .dash-fleet-foot, .is-silent .dash-fleet-facts) {
    color: #8f99a6;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-fleet-voyage .is-past {
    color: #6b7480;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-fleet-pos:is(:hover, :focus-visible) {
    color: #b5d2ff;
}

/* The timetables: the status chips in the theme's tints, the day line slate */
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-status { background: rgba(255, 255, 255, 0.08); color: #c9d1dc; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-status.is-ok { background: rgba(67, 178, 126, 0.18); color: #5cc795; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-status.is-warn { background: rgba(186, 150, 69, 0.2); color: #d4b062; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-status.is-bad { background: rgba(255, 139, 130, 0.16); color: #ff8b82; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-status.is-info { background: rgba(255, 255, 255, 0.09); color: #c9d1dc; }

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-day {
    background: #2c3442;
    color: #c9d1dc;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-foot {
    color: #8f99a6;
}

    html[data-v3-scene="night"] body.shell-v3.v3-night .dash-tt-foot.is-stale {
        color: #d4b062;
    }

/* Arranging: an empty slot, a panel being moved out, the resize grip */
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-slot {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(30, 36, 46, 0.45);
    color: #aeb8c6;
}

    html[data-v3-scene="night"] body.shell-v3.v3-night .dash-slot[aria-expanded="true"] {
        background: rgba(38, 45, 56, 0.75);
    }

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-panel.is-evicting::after {
    background: rgba(30, 36, 46, 0.9);
    color: #d3d9e1;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-resize[data-resize="se"]::after {
    background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.35) 55%, transparent 55%, transparent 70%, rgba(255, 255, 255, 0.35) 70%, rgba(255, 255, 255, 0.35) 80%, transparent 80%);
}

/* The markets drawer over the ticker: the cogwheel menu's dark blue (#14243d, v3-night-base.css), as a thinner glass, so the
   panels show through, blurred */
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-markets {
    border-top-color: rgba(143, 180, 238, 0.35);
    background: rgba(20, 36, 61, 0.6);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-mk-row, .dash-mk-fx-rows .dash-mk-row:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-v3-scene="night"] body.shell-v3.v3-night :is(.dash-mk-label, .dash-mk-value) {
    color: #d3deee;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-mk-when {
    color: #8f99a6;
}

html[data-v3-scene="night"] body.shell-v3.v3-night .dash-mk-row .dash-tick-change.is-up { color: #5cc795; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-mk-row .dash-tick-change.is-down { color: #ff8b82; }
html[data-v3-scene="night"] body.shell-v3.v3-night .dash-mk-row .dash-tick-change.is-flat { color: #8f99a6; }