/* MMPL Dashboard — small additions on top of the Velzon UI kit (kit files unchanged). */
.mmpl-table tbody tr { cursor: default; }
.mmpl-table tbody tr.mmpl-selected > * { box-shadow: inset 0 0 0 9999px rgba(208, 16, 24, 0.08); }
.mmpl-selection-bar {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: .5rem; padding: .5rem .75rem;
    background: var(--vz-primary-bg-subtle, #e2e5ed); border-radius: .25rem; font-size: .8125rem;
}
/* Amounts: same font as the text, digits lined up (no typewriter font) — applies to every page */
.font-monospace { font-family: inherit !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
div.dt-container div.dt-search input { margin-left: 0; }
.navbar-brand-box .logo-lg { white-space: nowrap; }

/* sortable small tables */
table.sortable th.sorted-asc::after { content: " ▲"; font-size: 9px; }
table.sortable th.sorted-desc::after { content: " ▼"; font-size: 9px; }

/* Tables: one line per row, calm header */
.table-calm > :not(caption) > * > * { padding: .45rem .5rem; vertical-align: middle; }
.mmpl-table.table-calm { font-size: .8125rem; }
.table-calm thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--vz-secondary-color, #878a99); font-weight: 600; white-space: nowrap; background: var(--vz-light, #f3f6f9); }
.table-calm td { white-space: nowrap; }
.table-calm td.wrap { white-space: normal; }
/* attention rows: thin red marker instead of a pink row */
tr.row-alert > td:first-child { box-shadow: inset 3px 0 0 #f06548; }
tr.row-warn > td:first-child { box-shadow: inset 3px 0 0 #f7b84b; }
tr.row-muted > td { color: var(--vz-secondary-color, #878a99); }

/* KPI cards */
.kpi-card .kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vz-secondary-color, #878a99); font-weight: 600; }
.kpi-card .kpi-value { font-size: clamp(1.05rem, 1.55vw, 1.6rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.kpi-card .kpi-sub { font-size: .78rem; color: var(--vz-secondary-color, #878a99); }
.kpi-card .kpi-sub .num { color: var(--vz-body-color, #212529); }
.kpi-card dl { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; margin: 0; font-size: .8rem; }
.kpi-card dt { font-weight: 400; color: var(--vz-secondary-color, #878a99); }
.kpi-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* tabs with counts */
.nav-tabs-custom .badge { font-size: .65rem; vertical-align: middle; }

/* Standard lists (components/data_table): first N columns stay visible when scrolling sideways */
.mmpl-table.table-calm { border-collapse: separate; border-spacing: 0; }
.mmpl-table.table-calm > tbody > tr > td { border-bottom: 1px solid var(--vz-border-color, #e9ebec); }
.mmpl-table tfoot th { white-space: nowrap; background: var(--vz-light, #f3f6f9); }
.sticky-cols thead th:nth-child(-n+1), .sticky-cols tbody td:nth-child(-n+1), .sticky-cols tfoot th:nth-child(-n+1) { position: sticky; left: 0; z-index: 2; background: var(--vz-secondary-bg, #fff); }
.sticky-cols thead th:nth-child(1), .sticky-cols tfoot th:nth-child(1) { background: var(--vz-light, #f3f6f9); }
.sticky-cols tbody td:nth-child(1) { box-shadow: inset -1px 0 0 var(--vz-border-color, #e9ebec); }
.sticky-cols.sticky-2 thead th:nth-child(2), .sticky-cols.sticky-2 tbody td:nth-child(2), .sticky-cols.sticky-2 tfoot th:nth-child(2) { position: sticky; z-index: 2; background: var(--vz-secondary-bg, #fff); }
.sticky-cols.sticky-2 thead th:nth-child(2), .sticky-cols.sticky-2 tfoot th:nth-child(2) { background: var(--vz-light, #f3f6f9); }
.mmpl-table tbody tr:hover > td { background-color: var(--vz-light, #f3f6f9); }
div.dt-container .dt-length, div.dt-container .dt-search { font-size: .8rem; }
/* DataTables sort arrows: less space so more columns fit */
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc { padding-right: 18px !important; }
table.dataTable thead > tr > th.text-end.dt-orderable-asc, table.dataTable thead > tr > th.text-end.dt-ordering-asc, table.dataTable thead > tr > th.text-end.dt-ordering-desc { padding-right: 18px !important; }
table.dataTable thead > tr > th span.dt-column-order { right: 4px !important; }
/* long status labels: shortened with the full text on hover */
.mmpl-table td .badge { max-width: 130px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* =====================================================================
   Mount Meru Petroleum brand colours (from the official logo):
   red #D01018 (main), deeper red #A80D14 (menu), yellow #F8C800 (the drop, accents).
   Warnings keep the kit's softer red (#f06548) so they are not confused with the brand red.
   ===================================================================== */
:root, [data-bs-theme=light] {
    --mmpl-red: #d01018; --mmpl-red-dark: #a80d14; --mmpl-red-deeper: #8c0b11; --mmpl-yellow: #f8c800;
    --vz-primary: #d01018; --vz-primary-rgb: 208, 16, 24;
    --vz-primary-text-emphasis: #8c0b11; --vz-primary-bg-subtle: #fbe7e8; --vz-primary-border-subtle: #f3b7ba;
    --vz-link-color: #a80d14; --vz-link-color-rgb: 168, 13, 20; --vz-link-hover-color: #8c0b11; --vz-link-hover-color-rgb: 140, 11, 17;
}
/* menu: deep brand red, white text, yellow marker on the active item */
html:root[data-sidebar=dark], html:root[data-sidebar=dark] .app-menu {
    --vz-vertical-menu-bg: #a80d14; --vz-vertical-menu-border: #a80d14;
    --vz-vertical-menu-item-color: rgba(255, 255, 255, .82); --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff; --vz-vertical-menu-item-active-bg: rgba(0, 0, 0, .18);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, .82); --vz-vertical-menu-sub-item-hover-color: #fff; --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: #ffd84d; --vz-twocolumn-menu-iconview-bg: #8c0b11;
}
.app-menu.navbar-menu { background: var(--vz-vertical-menu-bg) !important; border-right-color: var(--vz-vertical-menu-bg) !important; }
.navbar-menu .navbar-nav .nav-link.active { box-shadow: inset 4px 0 0 var(--mmpl-yellow); }
.navbar-menu .navbar-nav .nav-link:hover { background: rgba(0, 0, 0, .10); }
.menu-title span { letter-spacing: .06em; }
/* logo strip: white so the full-colour logo shows as it is */
.app-menu .navbar-brand-box { background: #fff; border-bottom: 3px solid var(--mmpl-yellow); }
.app-menu .navbar-brand-box .mmpl-logo img { display: inline-block; vertical-align: middle; }
.app-menu .navbar-brand-box .btn-vertical-sm-hover { color: var(--mmpl-red); }
/* buttons, tabs, badges in brand red */
.btn-primary { --vz-btn-bg: #d01018; --vz-btn-border-color: #d01018; --vz-btn-hover-bg: #a80d14; --vz-btn-hover-border-color: #a80d14;
    --vz-btn-active-bg: #8c0b11; --vz-btn-active-border-color: #8c0b11; --vz-btn-disabled-bg: #d01018; --vz-btn-disabled-border-color: #d01018;
    --vz-btn-focus-shadow-rgb: 208, 16, 24; }
.btn-soft-primary { --vz-btn-color: #a80d14; --vz-btn-bg: #fbe7e8; --vz-btn-border-color: transparent; --vz-btn-hover-color: #fff; --vz-btn-hover-bg: #d01018; --vz-btn-active-bg: #a80d14; --vz-btn-active-color: #fff; }
.btn-secondary.active, .btn-group .btn-secondary { --vz-btn-bg: #a80d14; --vz-btn-border-color: #a80d14; }
.nav-tabs-custom .nav-link.active { color: var(--mmpl-red); }
.nav-tabs-custom .nav-link::after { background: var(--mmpl-red) !important; }
.text-primary { color: var(--mmpl-red) !important; }
.bg-primary { background-color: var(--mmpl-red) !important; }
.bg-primary-subtle { background-color: #fbe7e8 !important; }
.form-check-input:checked { background-color: var(--mmpl-red); border-color: var(--mmpl-red); }
.form-control:focus, .form-select:focus { border-color: #f3b7ba; box-shadow: 0 0 0 .15rem rgba(208, 16, 24, .15); }
.page-item.active .page-link, div.dt-container .dt-paging .dt-paging-button.current { background: var(--mmpl-red) !important; border-color: var(--mmpl-red) !important; color: #fff !important; }
.progress-bar.bg-primary { background-color: var(--mmpl-red) !important; }
/* page title strip: thin yellow line like the logo strip */
.page-title-box { border-bottom: 2px solid #fdf0b3; }
/* login page: brand red background, logo on a white tile */
.auth-one-bg { background-image: none !important; background: linear-gradient(135deg, #8c0b11 0%, #d01018 70%, #e23a2f 100%) !important; }
.auth-one-bg .bg-overlay { background: none !important; opacity: 0 !important; }
.mmpl-login-logo { background: #fff; border-radius: 16px; padding: 14px 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.text-white-75 { color: rgba(255, 255, 255, .8) !important; }
/* the kit's "secondary" colour is blue; with the red brand it becomes a neutral slate grey */
:root, [data-bs-theme=light] {
    --vz-secondary: #5b6573; --vz-secondary-rgb: 91, 101, 115;
    --vz-secondary-text-emphasis: #3f4752; --vz-secondary-bg-subtle: #eef0f3; --vz-secondary-border-subtle: #d5d9df;
}
.btn-secondary { --vz-btn-bg: #5b6573; --vz-btn-border-color: #5b6573; --vz-btn-hover-bg: #4a535f; --vz-btn-hover-border-color: #4a535f; --vz-btn-active-bg: #3f4752; --vz-btn-active-border-color: #3f4752; }
.btn-soft-secondary { --vz-btn-color: #3f4752; --vz-btn-bg: #eef0f3; --vz-btn-border-color: transparent; --vz-btn-hover-color: #fff; --vz-btn-hover-bg: #5b6573; --vz-btn-active-bg: #4a535f; --vz-btn-active-color: #fff; }
.btn-ghost-secondary { --vz-btn-color: #5b6573; --vz-btn-hover-bg: #eef0f3; --vz-btn-hover-color: #3f4752; }
.text-secondary { color: #5b6573 !important; }
.bg-secondary { background-color: #5b6573 !important; }
.bg-secondary-subtle { background-color: #eef0f3 !important; }

/* Dropdowns (Choices.js): the theme pulls the list of options 16px left/right outside the dropdown box (negative margin)
   and the box clips it, cutting the first letters; the library also reserves 100px on the right of each option for a
   hidden "Press to select" hint and breaks names mid-word. Keep the options inside the box, use its full width and
   wrap long names at spaces. The list stays as wide as its field, so it never pushes the page sideways. */
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list { margin: 0; }
.choices__list--dropdown .choices__item--selectable[data-select-text],
.choices__list[aria-expanded] .choices__item--selectable[data-select-text] { padding-right: 10px; }
.choices__list--dropdown, .choices__list[aria-expanded] { word-break: normal; overflow-wrap: break-word; }
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { white-space: normal; }

/* Letter editor (public/js/letter-editor.js): toolbar + a page-like writing area in the letter's font */
.le-wrap { border: 1px solid var(--vz-border-color, #ced4da); border-radius: .25rem; background: #fff; }
.le-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--vz-border-color, #ced4da); background: var(--vz-light, #f3f6f9); position: sticky; top: 70px; z-index: 5; }
.le-btn { border: 1px solid transparent; background: transparent; border-radius: 3px; padding: 2px 7px; font-size: 16px; line-height: 1.4; color: #333; cursor: pointer; }
.le-btn:hover { background: #e2e6ea; } .le-btn.active { background: #d0d9e4; border-color: #b6c2d1; }
.le-select { font-size: 12px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 3px; background: #fff; max-width: 130px; }
.le-sep { width: 1px; height: 20px; background: #ced4da; margin: 0 4px; }
.le-edit { min-height: 380px; max-height: 70vh; overflow: auto; padding: 14px 18px; font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 11.5pt; line-height: 1.45; color: #222; outline: none; text-align: justify; }
.le-edit p { margin: 0 0 3mm; } .le-edit table { border-collapse: collapse; width: 100%; margin: 0 0 3mm; }
.le-edit td, .le-edit th { border: 1px solid #777; padding: 3px 6px; vertical-align: top; text-align: left; } .le-edit th { background: #f2f2f2; font-weight: 700; }
.le-edit blockquote { margin: 0 0 3mm 8mm; } .le-edit h3 { font-size: 13pt; font-weight: 700; margin: 2mm 0; } .le-edit h4 { font-size: 12pt; font-weight: 700; margin: 2mm 0; }
[data-bs-theme="dark"] .le-wrap, [data-bs-theme="dark"] .le-edit { background: #fff; color: #222; }

/* Meru Chat — WhatsApp-style layout: chat list, beige chat area, bubbles with tails, time inside the bubble */
.wa { --wa-bg: #efeae2; --wa-bar: #f0f2f5; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-text: #111b21; --wa-sub: #667781; --wa-line: #e9edef;
      --wa-green: #00a884; --wa-side: #ffffff; --wa-pill: #ffffff; --wa-quote: rgba(11, 20, 26, .05);
      display: flex; border-radius: .5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(11, 20, 26, .12); color: var(--wa-text); font-size: 14.2px; }
[data-bs-theme="dark"] .wa { --wa-bg: #0b141a; --wa-bar: #202c33; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-sub: #8696a0; --wa-line: #2a3942;
      --wa-side: #111b21; --wa-pill: #182229; --wa-quote: rgba(255, 255, 255, .06); }
.wa .min-w-0 { min-width: 0; }
.wa-side { width: 340px; flex-shrink: 0; flex-direction: column; background: var(--wa-side); border-right: 1px solid var(--wa-line); }
.wa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--wa-bg);
      background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.2px); background-size: 18px 18px; }
[data-bs-theme="dark"] .wa-main { background-image: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1.2px); }
.wa-bar { display: flex; align-items: center; gap: .5rem; height: 60px; padding: 0 16px; background: var(--wa-bar); flex-shrink: 0; }
.wa-actions { background: var(--wa-out); }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
      background: var(--vz-primary); color: #fff; font-weight: 600; font-size: 17px; }
.wa-avatar-me { width: 36px; height: 36px; background: #dfe5e7; color: #54656f; }
.wa-avatar-ai { background: #6c5ce7; font-size: 20px; }
.wa-name { font-size: 16px; color: var(--wa-text); }
.wa-sub, .wa-time, .wa-preview { font-size: 13px; color: var(--wa-sub); }
.wa-chatitem { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: inherit; border-bottom: 1px solid var(--wa-line); }
.wa-chatitem:hover, .wa-chatitem.active { background: var(--wa-bar); color: inherit; }
.wa-chatitem-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-disabled { opacity: .55; cursor: default; }
.wa-count { background: var(--wa-green); color: #fff; border-radius: 10px; font-size: 12px; min-width: 20px; padding: 0 6px; text-align: center; margin-left: 6px; }
.wa-search { align-items: center; gap: 6px; background: var(--wa-side); border-radius: 8px; padding: 4px 10px; color: var(--wa-sub); }
.wa-search input { border: 0; outline: 0; background: transparent; color: var(--wa-text); width: 160px; font-size: 14px; }
.wa-filter, .wa-icon { border: 0; background: transparent; color: var(--wa-sub); font-size: 20px; padding: 4px 8px; border-radius: 50%; line-height: 1; }
.wa-filter { font-size: 18px; border-radius: 16px; }
.wa-filter.on { background: var(--wa-out); color: var(--wa-text); font-size: 13px; }
.wa-body { flex: 1; overflow-y: auto; padding: 12px 6% 8px; }
.wa-center { text-align: center; margin: 10px 0; }
.wa-pill { display: inline-block; background: var(--wa-pill); color: var(--wa-sub); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-row { display: flex; margin-bottom: 2px; position: relative; }
.wa-row.tail { margin-top: 10px; }
.wa-row.out { justify-content: flex-end; }
.wa-msg { position: relative; max-width: 65%; padding: 6px 7px 8px 9px; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); line-height: 19px; word-wrap: break-word; }
.wa-row.in .wa-msg { background: var(--wa-in); }
.wa-row.out .wa-msg { background: var(--wa-out); }
.wa-row.in.tail .wa-msg { border-top-left-radius: 0; }
.wa-row.out.tail .wa-msg { border-top-right-radius: 0; }
.wa-row.in.tail .wa-msg::before { content: ""; position: absolute; top: 0; left: -8px; border-top: 0 solid transparent; border-right: 8px solid var(--wa-in); border-bottom: 13px solid transparent; }
.wa-row.out.tail .wa-msg::before { content: ""; position: absolute; top: 0; right: -8px; border-left: 8px solid var(--wa-out); border-bottom: 13px solid transparent; }
.wa-from { font-size: 12.8px; font-weight: 500; color: #06cf9c; margin-bottom: 2px; }
.wa-row.in .wa-from { color: #1fa855; }
.wa-text { white-space: pre-wrap; }
.wa-meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: var(--wa-sub); display: inline-flex; align-items: center; gap: 6px; position: relative; top: 2px; }
.wa-open { color: #027eb5; font-size: 11.5px; }
.wa-state { border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 500; }
.wa-state.wait { background: #fff3c4; color: #8a6d00; }
.wa-state.done { background: #d9fdd3; color: #0a7a3b; }
[data-bs-theme="dark"] .wa-state.wait { background: #4d3d00; color: #ffd54f; }
[data-bs-theme="dark"] .wa-state.done { background: #0b3d2c; color: #7ee2b8; }
.wa-del { border: 0; background: none; padding: 0; color: var(--wa-sub); font-size: 12px; opacity: 0; }
.wa-msg:hover .wa-del { opacity: 1; }
.wa-quote { display: flex; flex-direction: column; background: var(--wa-quote); border-left: 4px solid #06cf9c; border-radius: 6px; padding: 5px 8px; margin: -2px -3px 5px -5px; color: inherit; }
.wa-quote-from { font-size: 12.8px; font-weight: 500; color: #06cf9c; }
.wa-quote-text { font-size: 13px; color: var(--wa-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* message menu (⌄) on computers */
.wa-menu-btn { position: absolute; top: 2px; right: 3px; border: 0; border-radius: 50%; width: 24px; height: 24px; line-height: 1; font-size: 18px; color: var(--wa-sub);
      background: var(--wa-in); opacity: 0; z-index: 2; }
.wa-msg:hover .wa-menu-btn, .wa-msg.menu-open .wa-menu-btn { opacity: 1; }
.wa-menu { display: none; position: absolute; top: 26px; right: 4px; z-index: 5; min-width: 150px; background: var(--wa-side); border-radius: 6px; padding: 6px 0; box-shadow: 0 2px 8px rgba(11, 20, 26, .26); }
.wa-msg.menu-open .wa-menu { display: block; }
.wa-menu > * { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 18px; color: var(--wa-text); font-size: 14px; }
.wa-menu > *:hover { background: var(--wa-bar); color: var(--wa-text); }
/* swipe / hold / jump to */
.wa-pick { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s; }
.wa-row:has(.wa-pick.selected) { background: rgba(0, 168, 132, .15); margin-left: -6%; margin-right: -6%; padding: 0 6%; }
.wa-row.swipe-ready::after { content: "↩"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: var(--wa-sub); font-size: 18px; }
.wa-pick.flash { animation: wa-flash 1.8s ease-out; }
@keyframes wa-flash { from { box-shadow: 0 0 0 4px rgba(0, 168, 132, .45); } to { box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } }
/* typing bar */
.wa-compose { background: var(--wa-bar); padding: 8px 16px; flex-shrink: 0; }
.wa-replying { align-items: center; gap: 8px; background: var(--wa-side); border-radius: 8px 8px 0 0; padding: 6px 6px 6px 8px; margin-bottom: 4px; }
.wa-replying .wa-quote { margin: 0; }
.wa-input { flex: 1; border: 0; outline: 0; border-radius: 8px; padding: 9px 12px; resize: none; background: var(--wa-side); color: var(--wa-text); font-size: 15px; line-height: 20px; max-height: 120px; }
.wa-input:disabled { opacity: .75; }
.wa-send { border: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--wa-green); color: #fff; font-size: 18px; flex-shrink: 0; }
.wa-send:disabled { background: transparent; color: var(--wa-sub); }
@media (max-width: 991.98px) { .wa-msg { max-width: 85%; } .wa-body { padding: 10px 12px 6px; } .wa-row:has(.wa-pick.selected) { margin-left: -12px; margin-right: -12px; padding: 0 12px; } }

/* "please wait" cover for slow steps (signing) */
.wait-cover { position: fixed; inset: 0; z-index: 3000; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; }
.wait-cover[hidden] { display: none; }
[data-bs-theme="dark"] .wait-cover, [data-layout-mode="dark"] .wait-cover { background: rgba(20, 24, 28, .92); color: #e9edef; }
.wait-box { text-align: center; font-size: 15px; padding: 24px; }

/* vessel pickers: name stands out, tender reference smaller */
.v-name { font-weight: 600; color: #A80D14; }
.v-ref { font-size: .82em; color: var(--vz-secondary-color, #6c757d); }
[data-layout-mode="dark"] .v-name, [data-bs-theme="dark"] .v-name { color: #ff7b81; }
.choices__list--dropdown .choices__item--selectable.is-highlighted .v-ref { color: inherit; }
.choices select.v-hidden-select { display: block !important; position: absolute; bottom: 0; left: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* recent-months vessel lists: older vessels and their heading appear only while searching */
.v-recent-only:not(.v-searching) .choices__list--dropdown .choices__item:has(.v-old) { display: none; }
.v-recent-only:not(.v-searching) .choices__list--dropdown .choices__group[data-value="Older vessels"] { display: none; }
.v-old { display: none; }

/* ---------- dark mode: the brand colours above are for a white page; on a dark page they are lifted so text stays readable ---------- */
html:root[data-bs-theme=dark] {
    --vz-primary: #e0242c; --vz-primary-rgb: 224, 36, 44;
    --vz-primary-text-emphasis: #ff9ea2; --vz-primary-bg-subtle: rgba(208, 16, 24, .18); --vz-primary-border-subtle: rgba(208, 16, 24, .45);
    --vz-link-color: #ff8a8f; --vz-link-color-rgb: 255, 138, 143; --vz-link-hover-color: #ffb8bb; --vz-link-hover-color-rgb: 255, 184, 187;
    --vz-secondary: #8f99a8; --vz-secondary-rgb: 143, 153, 168;
    --vz-secondary-text-emphasis: #c5ccd6; --vz-secondary-bg-subtle: rgba(143, 153, 168, .14); --vz-secondary-border-subtle: rgba(143, 153, 168, .3);
    --vz-secondary-color: #9aa3b2;
}
/* menu: deep maroon instead of bright red, so it does not glare next to the dark page */
html:root[data-bs-theme=dark][data-sidebar=dark], html:root[data-bs-theme=dark][data-sidebar=dark] .app-menu {
    --vz-vertical-menu-bg: #2c0b0e; --vz-vertical-menu-border: #2c0b0e;
    --vz-vertical-menu-item-color: rgba(255, 255, 255, .78); --vz-vertical-menu-item-active-bg: rgba(208, 16, 24, .28);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, .78); --vz-vertical-menu-title-color: #e6c34a; --vz-twocolumn-menu-iconview-bg: #22090b;
}
[data-bs-theme=dark] .navbar-menu .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); }
[data-bs-theme=dark] .app-menu .navbar-brand-box { background: #1f2226; border-bottom-color: rgba(248, 200, 0, .55); }
[data-bs-theme=dark] .app-menu .navbar-brand-box .mmpl-logo img { background: #fff; border-radius: 6px; padding: 2px 6px; }
[data-bs-theme=dark] .bg-primary-subtle { background-color: rgba(208, 16, 24, .18) !important; }
[data-bs-theme=dark] .text-primary { color: #ff7a80 !important; }
[data-bs-theme=dark] .btn-soft-primary { --vz-btn-color: #ff9ea2; --vz-btn-bg: rgba(208, 16, 24, .18); }
[data-bs-theme=dark] .btn-soft-secondary { --vz-btn-color: #c5ccd6; --vz-btn-bg: rgba(255, 255, 255, .07); }
[data-bs-theme=dark] .btn-ghost-secondary { --vz-btn-color: #aab3c0; --vz-btn-hover-bg: rgba(255, 255, 255, .07); --vz-btn-hover-color: #fff; }
[data-bs-theme=dark] .text-secondary { color: #aab3c0 !important; }
[data-bs-theme=dark] .bg-secondary-subtle { background-color: rgba(143, 153, 168, .14) !important; }
[data-bs-theme=dark] .text-muted { color: #9aa3b2 !important; }
[data-bs-theme=dark] .page-title-box { border-bottom-color: rgba(248, 200, 0, .25); }
[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { border-color: rgba(208, 16, 24, .6); }
[data-bs-theme=dark] .mmpl-table tbody tr.mmpl-selected > * { box-shadow: inset 0 0 0 9999px rgba(255, 138, 143, .1); }
[data-bs-theme=dark] .kpi-card .kpi-sub .num { color: #e2e6eb; }
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link.active, [data-bs-theme=dark] .nav-tabs .nav-link.active { color: #ff9ea2; }
/* coloured table rows (current month, overdue, totals …) keep light colours in the kit: dark versions */
[data-bs-theme=dark] :is(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light) {
    --vz-table-color: #e2e6eb; --vz-table-striped-color: #e2e6eb; --vz-table-active-color: #fff; --vz-table-hover-color: #fff;
    --vz-table-border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme=dark] .table-primary { --vz-table-bg: rgba(208, 16, 24, .16); --vz-table-striped-bg: rgba(208, 16, 24, .2); --vz-table-active-bg: rgba(208, 16, 24, .24); --vz-table-hover-bg: rgba(208, 16, 24, .24); }
[data-bs-theme=dark] .table-danger { --vz-table-bg: rgba(240, 101, 72, .16); --vz-table-striped-bg: rgba(240, 101, 72, .2); --vz-table-active-bg: rgba(240, 101, 72, .24); --vz-table-hover-bg: rgba(240, 101, 72, .24); }
[data-bs-theme=dark] .table-warning { --vz-table-bg: rgba(247, 184, 75, .14); --vz-table-striped-bg: rgba(247, 184, 75, .18); --vz-table-active-bg: rgba(247, 184, 75, .22); --vz-table-hover-bg: rgba(247, 184, 75, .22); }
[data-bs-theme=dark] .table-success { --vz-table-bg: rgba(10, 179, 156, .14); --vz-table-striped-bg: rgba(10, 179, 156, .18); --vz-table-active-bg: rgba(10, 179, 156, .22); --vz-table-hover-bg: rgba(10, 179, 156, .22); }
[data-bs-theme=dark] .table-info { --vz-table-bg: rgba(41, 156, 219, .14); --vz-table-striped-bg: rgba(41, 156, 219, .18); --vz-table-active-bg: rgba(41, 156, 219, .22); --vz-table-hover-bg: rgba(41, 156, 219, .22); }
[data-bs-theme=dark] :is(.table-secondary, .table-light) { --vz-table-bg: rgba(255, 255, 255, .05); --vz-table-striped-bg: rgba(255, 255, 255, .07); --vz-table-active-bg: rgba(255, 255, 255, .09); --vz-table-hover-bg: rgba(255, 255, 255, .09); }
[data-bs-theme=dark] .alert-light { color: #c5ccd6; background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
/* collapsed menu (three lines → icons): fits the screen and scrolls by itself instead of stretching the page; the theme's
   pop-out names would be cut off by the scrolling strip, so the name shows in a small label beside the icon (mmpl.js) */
@media (min-width: 768px) {
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu { position: fixed; top: 0; bottom: 0; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu #scrollbar { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu #scrollbar::-webkit-scrollbar { display: none; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .simplebar-mask { overflow: hidden !important; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .simplebar-content-wrapper { overflow-y: auto !important; scrollbar-width: none; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .simplebar-content-wrapper::-webkit-scrollbar { display: none; }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link { width: auto; background: rgba(0, 0, 0, .18); }
    [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link span { display: none; }
}
.mmpl-menu-tip { display: none; position: fixed; z-index: 1100; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
    background: #2b2f34; color: #fff; font-size: .8125rem; padding: 5px 10px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
[data-bs-theme=dark] .mmpl-menu-tip { background: #f1f3f5; color: #1f2328; }
/* LC payments: invoice status dot — green bank invoice in, red only the supplier's, yellow none */
.lc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex: none; }
.lc-dot-bank { background: #0ab39c; }
.lc-dot-supplier { background: #f06548; }
.lc-dot-none { background: #f7b84b; }

/* Order payments: their own colour (teal), on the computer and in the phone app */
:root { --pay: #0d9488; --pay-soft: rgba(13, 148, 136, .14); }
[data-bs-theme=dark] { --pay: #2dd4bf; --pay-soft: rgba(45, 212, 191, .16); }
.pay-badge { background: var(--pay) !important; color: #fff; }
.pay-bell { color: var(--pay) !important; }
.m-badge.pay-badge { background: var(--pay); }

/* "N waiting for you" on every page: small chips, the list scrolls when there are many */
.waiting-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow-y: auto; padding-right: 4px; }
.waiting-chip { font-size: 12px; padding: 2px 9px; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Meru Chat: separate chats for Orders (blue) and Order payments (teal) */
.wa-avatar-ord { background: #2563eb; color: #fff; font-size: 20px; }
.wa-avatar-pay { background: var(--pay); color: #fff; font-size: 20px; }
.wa-count.pay-badge { background: var(--pay); }
.wa-done-by { color: var(--pay); font-weight: 500; }
.wa-threads { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--bs-border-color, #e9edef); background: var(--bs-body-bg, #fff); }
.wa-threads a { flex-shrink: 0; padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; background: rgba(0, 0, 0, .05); color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.wa-threads a.on { background: #A80D14; color: #fff; }
.wa-threads a.wa-th-orders.on { background: #2563eb; }
.wa-threads a.wa-th-payments.on { background: var(--pay); }
.wa-threads .wa-count { position: static; min-width: 18px; height: 18px; font-size: 11px; line-height: 18px; }