/* ==========================================================================
   Dorado brand tokens — pixel-sampled from the official logo mark
   (a green → indigo gradient chevron "D"). Adjust these variables only —
   every other rule below derives from them.
   ========================================================================== */
:root {
  --brand-teal: #4CE987;
  --brand-teal-light: #7BF0A8;
  --brand-navy: #3D5C99;
  --brand-navy-dark: #2C4373;
  --brand-gradient: linear-gradient(160deg, var(--brand-teal) 0%, var(--brand-navy) 100%);
  --sidebar-w: 260px;
}

body { background:#f5f6f8; }
.card { border:none; box-shadow:0 1px 3px rgba(0,0,0,.08); border-radius:10px; }
.kpi-value { font-size:1.6rem; font-weight:700; }
.kpi-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:#6c757d; }
.stepper { list-style:none; padding:0; margin:0; }
.stepper li { display:flex; align-items:center; padding:10px 14px; border-radius:8px; margin-bottom:6px; }
.stepper li.done { background:#e6f4ea; color:#1e7e34; }
.stepper li.next { background:#fff3cd; color:#856404; font-weight:600; }
.stepper li.pending { background:#f1f1f1; color:#888; }
.step-badge { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:10px; font-size:.8rem; font-weight:700; background:#fff; border:2px solid currentColor; }

/* Horizontal step stepper (Pricing -> ... -> Completed, or a compact
   2-step Operations/TDR voyage stepper) — numbered circles connected by a
   line, matching the storyboard mockup. Used on the pricing/booking/voyage
   detail pages. Compact modifier (.stepper-compact) keeps a short stepper
   (e.g. 2 steps) from stretching across the full page width. */
/* NOTE: these elements also carry the plain .stepper class (for the base
   list-style/padding/margin reset), whose li rules default to a row
   layout with a solid background per state (see above) — every property
   that matters for the horizontal look is explicitly re-declared below so
   nothing from the vertical variant bleeds through onto this one. */
.stepper-horizontal { display:flex; flex-wrap:nowrap; align-items:flex-start; overflow-x:auto; padding:4px 2px; }
.stepper-horizontal li {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  flex:1 1 0; min-width:64px; text-align:center; padding:8px 4px 2px; margin-bottom:0;
  border-radius:8px; background:transparent; color:#888; position:relative;
}
.stepper-horizontal li .step-badge { margin:0 auto 4px; display:flex; position:relative; z-index:1; background:#fff; }
.stepper-horizontal li:not(:first-child)::before {
  content:''; position:absolute; top:21px; left:-50%; width:100%; height:2px; background:#dcdfe4; z-index:0;
}
.stepper-horizontal li.done { background:transparent; color:#1e7e34; }
.stepper-horizontal li.done .step-badge { background:#1e7e34; color:#fff; border-color:#1e7e34; }
.stepper-horizontal li.done:not(:first-child)::before { background:#1e7e34; }
.stepper-horizontal li.next { background:transparent; color:#3D5C99; font-weight:600; }
.stepper-horizontal li.next .step-badge { border-color:#3D5C99; }
.stepper-horizontal li.pending { background:transparent; }
.stepper-horizontal li.pending .step-badge { border-color:#ccc; }
.stepper-horizontal li .step-label { font-size:.72rem; line-height:1.15; }
.stepper-compact { max-width:360px; }
.stepper-compact li { min-width:100px; flex:0 1 140px; }
.doc-status-MISSING { background:#f1f1f1; color:#888; }
.doc-status-UPLOADED { background:#fff3cd; color:#856404; }
.doc-status-APPROVED { background:#e6f4ea; color:#1e7e34; }
.doc-status-REJECTED { background:#f8d7da; color:#842029; }
.special-panel-RF { border-left:4px solid #4dabf7; }
.special-panel-Flexi { border-left:4px solid #9775fa; }
.special-panel-FR { border-left:4px solid #ff922b; }
.special-panel-DG { border-left:4px solid #ff6b6b; }
.special-panel-ISO_Tank { border-left:4px solid #20c997; }
.special-panel-OT { border-left:4px solid #adb5bd; }
.table-sm td, .table-sm th { padding:.4rem .6rem; }
.flag-open { border-left:4px solid #dc3545; }
.btn-brand { background:var(--brand-gradient); border:none; color:#fff; }
.btn-brand:hover { filter:brightness(1.08); color:#fff; }
.text-brand-teal { color:var(--brand-navy); }
.badge-brand { background:var(--brand-gradient); color:#fff; }
a:not(.btn) { color:var(--brand-navy); }
a:not(.btn):hover { color:var(--brand-teal-light); filter:brightness(.85); }
.card h6 { color:var(--brand-navy-dark); font-weight:700; letter-spacing:.01em; }

/* ==========================================================================
   Page navigation bar — "Back to X" / related pages / "Next: Y" buttons at
   the top of every page (v1.2.2: rectangular, same corners as .btn, so the
   top bar and the page's own buttons look alike). Use .nav-crumbs as the
   wrapping row; .js-back makes a Back button return to the previous page.
   ========================================================================== */
.nav-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.nav-crumb {
  display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600;
  padding:5px 12px; border-radius:6px; background:#fff; border:1px solid #d5dae1; line-height:1.4;
  color:var(--brand-navy-dark); box-shadow:0 1px 2px rgba(0,0,0,.04); text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.nav-crumb:hover { background:#eef3f2; border-color:var(--brand-navy); color:var(--brand-navy-dark); transform:translateY(-1px); }
.nav-crumb .ic { opacity:.8; display:inline-flex; align-items:center; }
.nav-crumb .ic-end { margin-left:2px; }
.nav-crumb-next {
  background:var(--brand-gradient); border-color:transparent; color:#fff;
  margin-left:auto;
}
.nav-crumb-next:hover { color:#fff; filter:brightness(1.06); }

/* Inline-SVG icon set (sidebar nav + nav-crumb pills) — see
   templates/_icons.html. Sized/positioned via the .ic wrapper above; this
   just keeps the stroke crisp and vertically centered against the text. */
.icon-svg { display:block; flex:none; }

/* ==========================================================================
   Vertical sidebar shell
   - Brand (top) and user/log-out (bottom) stay put; only the link list
     scrolls, with a slim scrollbar — so nothing below the fold is ever
     cut off regardless of screen height or how many sections are open.
   - Sections collapse/expand (chevron), state remembered per browser.
   - Two modes: pinned (fixed open, default) and auto-hide (html.sb-unpinned):
     an icon rail that slides open over the page on hover/keyboard focus.
   ========================================================================== */
:root { --sidebar-rail-w: 72px; }

.app-shell { display:flex; min-height:100vh; }
.app-main { flex:1 1 auto; min-width:0; }

.app-sidebar {
  width:var(--sidebar-w); flex:none; position:sticky; top:0; height:100vh; z-index:1030;
  background:var(--brand-gradient); color:#eef3f2;
  display:flex; flex-direction:column; padding:18px 14px 14px;
  box-shadow:2px 0 14px rgba(0,0,0,.10);
  overflow:hidden; white-space:nowrap;
  transition:width .24s cubic-bezier(.4,0,.2,1), margin-right .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease;
}

/* ---- brand + pin ---- */
.app-sidebar .brand { display:flex; align-items:center; gap:10px; padding:4px 4px 16px 8px; flex:none; }
.app-sidebar .brand-mark { width:36px; height:auto; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.app-sidebar .brand-text { line-height:1.15; flex:1 1 auto; min-width:0; }
.app-sidebar .brand-text .name { font-weight:700; font-size:1rem; letter-spacing:.01em; color:#fff; }
.app-sidebar .brand-text .sub { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.6); overflow:hidden; text-overflow:ellipsis; }
.sb-pin {
  flex:none; width:30px; height:30px; border-radius:8px; border:1px solid transparent;
  background:rgba(255,255,255,.16); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, transform .2s ease, opacity .15s ease;
}
.sb-pin:hover { background:rgba(255,255,255,.26); }
.sb-pin:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.sb-pin[aria-pressed="false"] { background:transparent; border-color:rgba(255,255,255,.35); transform:rotate(45deg); }

/* ---- scrollable link list ---- */
.app-sidebar .sidebar-nav {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  margin:0 -8px; padding:0 8px 8px;          /* keeps the scrollbar off the links */
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
  overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.app-sidebar .sidebar-nav::-webkit-scrollbar { width:6px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.3); border-radius:6px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.5); }

/* ---- collapsible sections ---- */
.nav-section { margin-top:4px; }
.nav-section-toggle {
  display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent;
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  padding:12px 10px 6px 12px; border-radius:6px; cursor:pointer; text-align:left;
}
.nav-section-text { flex:1 1 auto; }
.nav-section-count {
  font-size:.62rem; letter-spacing:0; min-width:18px; height:16px; padding:0 5px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:opacity .18s ease, transform .18s ease;
}
.nav-chevron { display:inline-flex; transition:transform .22s cubic-bezier(.4,0,.2,1); }
.nav-section.collapsed .nav-chevron { transform:rotate(-90deg); }
.nav-section.collapsed .nav-section-count { opacity:1; transform:scale(1); }

/* grid 1fr -> 0fr gives a smooth height animation without measuring */
.nav-section-items { display:grid; grid-template-rows:1fr; transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1); }
.nav-section-inner { overflow:hidden; min-height:0; }
.nav-section.collapsed .nav-section-items { grid-template-rows:0fr; }
.nav-section.collapsed .nav-section-inner { visibility:hidden; transition:visibility 0s .24s; }

.app-sidebar .nav-section-toggle { color:rgba(255,255,255,.55); }
.app-sidebar .nav-section-toggle:hover { color:#fff; background:rgba(255,255,255,.06); }
.app-sidebar .nav-section-toggle:focus-visible { outline:2px solid rgba(255,255,255,.8); outline-offset:-2px; }
.app-sidebar .nav-section-count { background:rgba(255,255,255,.2); color:#fff; }
.app-sidebar .nav-section.has-active > .nav-section-toggle { color:rgba(255,255,255,.85); }

/* ---- links ---- */
.app-sidebar .nav-link {
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.86);
  padding:9px 12px; margin:1px 0; border-radius:8px; font-size:.88rem; font-weight:500;
  transition:background .12s ease, color .12s ease;
}
.app-sidebar .nav-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.app-sidebar .nav-link.active { background:rgba(255,255,255,.18); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 #fff; }
.app-sidebar .nav-link:focus-visible { outline:2px solid rgba(255,255,255,.8); outline-offset:-2px; }
.app-sidebar .nav-link .ic { width:16px; flex:none; opacity:.9; display:inline-flex; align-items:center; justify-content:center; }
.nav-link .ic { display:inline-flex; align-items:center; justify-content:center; width:16px; }
.nav-text { overflow:hidden; text-overflow:ellipsis; transition:opacity .18s ease; }

/* ---- footer ---- */
.app-sidebar .sidebar-footer {
  flex:none; padding-top:12px; margin-top:6px; border-top:1px solid rgba(255,255,255,.18);
}
.app-sidebar .sidebar-user { display:flex; align-items:center; gap:10px; font-size:.82rem; color:#fff; margin-bottom:10px; padding-left:4px; }
.sb-avatar {
  flex:none; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; letter-spacing:.03em;
}
.sidebar-user-text { display:flex; flex-direction:column; min-width:0; transition:opacity .18s ease; }
.sb-user-name { overflow:hidden; text-overflow:ellipsis; }
.app-sidebar .sidebar-user .role-badge {
  align-self:flex-start; margin-top:3px; font-size:.62rem; letter-spacing:.04em;
  background:rgba(255,255,255,.16); padding:1px 7px; border-radius:5px;
}
.app-sidebar .btn-logout {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-size:.8rem; padding:7px;
  border:1px solid rgba(255,255,255,.35); border-radius:8px; color:#fff; text-decoration:none;
}
.app-sidebar .btn-logout:hover { background:rgba(255,255,255,.12); color:#fff; }
.app-sidebar .btn-logout .ic { display:inline-flex; }

/* ---- auto-hide mode: icon rail that slides open over the page ---- */
html.sb-unpinned .app-sidebar { width:var(--sidebar-rail-w); padding-left:12px; padding-right:12px; transition-delay:.18s; }
html.sb-unpinned .app-sidebar:hover,
html.sb-unpinned .app-sidebar:focus-within {
  width:var(--sidebar-w);
  margin-right:calc(var(--sidebar-rail-w) - var(--sidebar-w));   /* overlay: page content doesn't shift */
  box-shadow:8px 0 32px rgba(15,30,60,.28);
  transition-delay:.06s;
}
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) :is(.brand-text, .sb-pin, .nav-text, .nav-section-text, .nav-section-count, .nav-chevron, .sidebar-user-text) {
  opacity:0; pointer-events:none;
}
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) .nav-section-toggle {
  padding:10px 0 4px; height:18px; margin:4px 8px 2px; border-radius:0;
  border-top:1px solid rgba(255,255,255,.2);
}
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) .btn-logout { border-color:transparent; }
html.sb-unpinned .app-sidebar :is(.brand-text, .sb-pin, .nav-section-text, .nav-section-count, .nav-chevron, .sidebar-user-text) {
  transition:opacity .15s ease;
}

/* no animations while the saved state is being applied on page load */
html.sb-no-anim .app-sidebar, html.sb-no-anim .app-sidebar *,
html.sb-no-anim .mobile-nav * { transition:none !important; }

@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .app-sidebar *, .mobile-nav * { transition:none !important; }
}

/* ---- mobile off-canvas copy of the same nav ---- */
.mobile-nav .nav-section-toggle { color:#6c7a8a; }
.mobile-nav .nav-section-toggle:hover { color:#1f2d3d; background:#f1f3f6; }
.mobile-nav .nav-section-count { background:#e8ecf2; color:#3d4a5c; }
.mobile-nav .nav-link { display:flex; align-items:center; gap:10px; color:#1f2d3d; border-radius:8px; }
.mobile-nav .nav-link:hover { background:#f1f3f6; }
.mobile-nav .nav-link.active { background:#e9eefb; color:var(--brand-navy-dark); font-weight:600; }

.app-topbar {
  display:none; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--brand-gradient); color:#fff;
}
.app-topbar .brand-mark { width:28px; height:auto; }

@media (max-width: 900px) {
  .app-sidebar { display:none; }
  .app-topbar { display:flex; }
}

/* ==========================================================================
   Add-record modals (Wix-style "+" popup instead of inline forms)
   ========================================================================== */
.modal-content { border:none; border-radius:12px; overflow:hidden; }
.modal-header { background:var(--brand-gradient); color:#fff; border:none; padding:16px 20px; }
.modal-header .btn-close { filter:brightness(0) invert(1); opacity:.85; }
.modal-header .modal-title { font-weight:700; }
.modal-body { padding:20px; }
.modal-footer { border-top:1px solid #eee; padding:12px 20px; }

/* ==========================================================================
   Login page — brand lockup
   ========================================================================== */
.login-shell {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--brand-gradient);
}
.login-card { width:400px; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.22); }
.login-card .brand-lockup { max-width:230px; height:auto; margin:0 auto 18px; display:block; }

/* ==========================================================================
   Operations -> Timetable module (kept inside the existing .card / badge /
   .special-panel-* visual language above — no new shell, colors, or layout
   system introduced; see docs/OPERATIONS_TIMETABLE.md).
   ========================================================================== */
.tt-voyage-bar { display:flex; flex-wrap:wrap; gap:22px 32px; align-items:center; }
.tt-voyage-bar .tt-field-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#6c757d; }
.tt-voyage-bar .tt-field-value { font-weight:700; font-size:.92rem; }
.tt-readonly-pill {
  display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; color:#6c757d; background:#f1f1f1; border-radius:6px; padding:4px 9px;
}

/* Section left-borders — same convention as .special-panel-* / .flag-open above. */
.tt-section-ARRIVAL { border-left:4px solid #4dabf7; }
.tt-section-DISCHARGE { border-left:4px solid #37b24d; }
.tt-section-LOADING { border-left:4px solid #f2994a; }
.tt-section-DEPARTURE { border-left:4px solid #9775fa; }
.tt-section-label-ARRIVAL { color:#1864ab; }
.tt-section-label-DISCHARGE { color:#1e7e34; }
.tt-section-label-LOADING { color:#a1660f; }
.tt-section-label-DEPARTURE { color:#5f3dc4; }

.tt-nil-badge { background:#fff3cd; color:#856404; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:6px; display:inline-block; }

/* Vessel status card — one class per app/timetable_logic.py status code. */
.tt-status-AWAITING_ARRIVAL { background:#f1f1f1; color:#666; }
.tt-status-AT_ANCHORAGE { background:#e7f1ff; color:#1864ab; }
.tt-status-AT_PORT { background:#eef0ff; color:#4338ca; }
.tt-status-UNDER_OPERATION { background:#e6f4ea; color:#1e7e34; }
.tt-status-AT_PORT_AFTER_OPERATION { background:#fff3cd; color:#856404; }
.tt-status-EN_ROUTE { background:#eef0ff; color:#4338ca; }
.tt-status-card { border-radius:10px; padding:14px 16px; text-align:center; }
.tt-status-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.7); border-radius:20px; padding:5px 14px; font-weight:800; font-size:.82rem; letter-spacing:.02em; }

/* Upload dropzone — plain CSS/markup, progressively enhanced by a small
   inline script (drag-over highlight only; the underlying <input
   type=file> always works with zero JS, same fallback philosophy as the
   rest of this server-rendered app). */
.tt-dropzone {
  border:1.6px dashed #c8ccd6; border-radius:12px; background:#f8f9fb;
  padding:26px 16px; text-align:center; transition:border-color .12s ease, background .12s ease;
}
.tt-dropzone.tt-dropzone-drag { border-color:var(--brand-navy); background:#eef3f2; }

/* Schedule page (v1.2.0) — keeps the app's cards/buttons, adds only the
   timeline, tiles, file badge and SVG flags. */
.sch-drop.is-drag { border-color:var(--brand-navy); background:#eef3f2; }
.sch-tile { background:#f5f7fa; border-radius:8px; padding:8px 10px; height:100%; }
.sch-file-ext { width:44px; height:52px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff; background:#6c757d; flex:0 0 auto; }
.sch-file-xls { background:#1d7a45; } .sch-file-pdf { background:#c62828; }
.flag-svg { border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:0 0 auto; vertical-align:middle; }
.sch-timeline { list-style:none; display:flex; justify-content:space-between; padding:0; margin:0; }
.sch-timeline li { flex:1 1 0; text-align:center; position:relative; padding-top:2px; }
.sch-timeline li:not(:first-child)::before { content:''; position:absolute; top:17px; left:-50%; width:100%; height:2px; background:#cfd6e0; z-index:0; }
.sch-timeline li.sch-tl-done:not(:first-child)::before, .sch-timeline li.sch-tl-current:not(:first-child)::before { background:#3D5C99; }
.sch-tl-dot { width:32px; height:32px; border-radius:50%; border:2px solid #cfd6e0; background:#fff; display:inline-flex;
  align-items:center; justify-content:center; position:relative; z-index:1; color:#3D5C99; }
.sch-tl-port .sch-tl-dot { background:#e7edff; border-color:#e7edff; }
.sch-tl-done .sch-tl-dot { border-color:#1e7e34; } .sch-tl-event.sch-tl-done .sch-tl-dot { background:#1e7e34; }
.sch-tl-current .sch-tl-dot { border-color:#3D5C99; box-shadow:0 0 0 3px rgba(61,92,153,.15); }
.sch-tl-label { font-weight:600; font-size:.8rem; margin-top:4px; }
.sch-tl-sub { font-size:.72rem; color:#6c757d; }
.sch-tl-event.sch-tl-done .sch-tl-label, .sch-tl-event.sch-tl-done .sch-tl-sub { color:#1e7e34; }
.sch-tl-current .sch-tl-label, .sch-tl-current .sch-tl-sub { color:#3D5C99; }
[data-bs-theme="dark"] .sch-tile { background:var(--surface-2); }
[data-bs-theme="dark"] .sch-tl-dot { background:var(--surface); border-color:#4a5468; }
.tt-dropzone .tt-dropzone-icon {
  width:44px; height:44px; border-radius:50%; background:#e7edff; color:#3D5C99;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px;
}

.tt-remark-history { background:#f8f9fb; border-radius:8px; padding:8px 10px; margin-top:6px; }
.tt-remark-history .tt-remark-version { font-size:.72rem; font-weight:700; color:#6c757d; }
.tt-remark-history .tt-remark-entry + .tt-remark-entry { border-top:1px solid #e9ecef; margin-top:6px; padding-top:6px; }

.tt-email-preview { background:#fff; border:1px solid #e2e5ea; border-radius:10px; overflow:hidden; }
.tt-email-preview .tt-email-hero {
  background:var(--brand-gradient); color:#fff; padding:20px 22px;
}
.tt-email-preview table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:#6c757d; background:#f8f9fb; }
.tt-email-status-badge { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px; }
.tt-email-status-SENT { background:#e6f4ea; color:#1e7e34; }
.tt-email-status-PENDING { background:#fff3cd; color:#856404; }

/* ==========================================================================
   Operations -> Not Shifted / Container Incidents / TDR (see
   docs/OPERATIONS_NOT_SHIFTED.md, docs/OPERATIONS_CONTAINER_INCIDENTS.md,
   docs/OPERATIONS_TDR.md) — same .card / .btn-brand / .tt-dropzone visual
   language as Timetable above; only a handful of new, narrowly-scoped
   classes were needed.
   ========================================================================== */
.summary-card-row { display:flex; flex-wrap:wrap; gap:12px; }
.summary-card { flex:1 1 140px; background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.summary-card .kpi-value { font-size:1.5rem; }

.customer-group-header { background:#f8f9fb; font-weight:700; color:var(--brand-navy-dark); }
.customer-group-header td { padding:8px 12px !important; }

.row-cancelled { background:#fdecea !important; }
.row-cancelled td { color:#7a2e2a; }

.ns-status-FOLLOW_UP, .inc-status-FOLLOW_UP { background:#fff3cd; color:#856404; }
.ns-status-CANCELLED, .inc-status-CANCELLED { background:#f8d7da; color:#842029; }
.ns-status-RESOLVED, .inc-status-RESOLVED { background:#e6f4ea; color:#1e7e34; }
.ns-status-SHIFTED { background:#dbeafe; color:#1e40af; }
.status-pill { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px; display:inline-block; }

.evidence-thumb-grid { display:flex; flex-wrap:wrap; gap:8px; }
.evidence-thumb { width:76px; height:76px; border-radius:8px; overflow:hidden; border:1px solid #e2e5ea; display:flex; align-items:center; justify-content:center; background:#f8f9fb; }
.evidence-thumb img { width:100%; height:100%; object-fit:cover; }

.timeline-list { list-style:none; padding:0; margin:0; }
.timeline-list li { position:relative; padding:0 0 14px 20px; border-left:2px solid #e2e5ea; }
.timeline-list li:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline-list li::before { content:''; position:absolute; left:-5px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--brand-navy); }
.timeline-list .timeline-when { font-size:.7rem; color:#6c757d; font-weight:700; }

.incident-detail-panel { position:sticky; top:16px; }
.incident-row-selected { outline:2px solid var(--brand-navy); outline-offset:-2px; }

/* ==========================================================================
   Codes 11 — Part 1: shared page chrome, dashboard components, favorites,
   theme switch, and the dark theme.
   ========================================================================== */
:root {
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --page-bg: #f5f6f8;
  --line: #e2e5ea;
  --ink: #1f2d3d;
  --ink-muted: #6c757d;
  --heading: var(--brand-navy-dark);
  --link: var(--brand-navy);
  --accent-soft: #e9eefb;
  --chart-1: #3D5C99;
  --chart-2: #2FB675;
  --chart-grid: rgba(20, 30, 50, .08);
  --chart-ink: #5b6573;
  --sidebar-bg: var(--brand-gradient);
}
body { background:var(--page-bg); }

/* page header used by the new dashboard/report pages */
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.page-eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:2px; }
.section-label { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); }
.bg-brand { background:var(--brand-navy) !important; color:#fff; }

/* KPI tiles */
.kpi-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.kpi-tile {
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  color:inherit; text-decoration:none; transition:border-color .12s ease, box-shadow .12s ease;
}
a.kpi-tile:hover { border-color:var(--brand-navy); box-shadow:0 2px 8px rgba(0,0,0,.06); color:inherit; filter:none; }
.kpi-tile.is-selected { border-color:var(--brand-navy); box-shadow:inset 0 -3px 0 var(--brand-navy); }
.kpi-tile .kpi-value { font-size:1.35rem; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.kpi-tile .kpi-sub { font-size:.74rem; color:var(--ink-muted); margin-top:2px; }
.kpi-tile-alert { border-left:3px solid #d9534f; }

/* horizontal bars (pipeline, capacity) */
.bar-row { display:grid; grid-template-columns:120px 1fr 36px; align-items:center; gap:10px; padding:5px 0; font-size:.82rem; }
.bar-label { color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-value { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.bar-track { height:8px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.bar-fill { height:100%; background:var(--chart-1); border-radius:4px; }
.bar-fill.is-warn { background:#e8a33d; }
.bar-fill.is-danger { background:#d9534f; }

/* operations watchlist */
.watch-row { display:flex; justify-content:space-between; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit !important; font-size:.86rem; }
.watch-row:last-child { border-bottom:0; }
.watch-row:hover { background:var(--surface-2); filter:none !important; }
.watch-count { min-width:30px; text-align:center; font-weight:700; border-radius:12px; padding:1px 8px; background:var(--surface-2); border:1px solid var(--line); }
.watch-count.is-alert { background:#fdecea; color:#a52a26; border-color:#f3c2bf; }

/* My Approvals */
.prio-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#adb5bd; }
.prio-dot.prio-1 { background:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.18); }
.prio-dot.prio-2 { background:#e8a33d; }
.prio-dot.prio-3 { background:#8fa3bf; }
.empty-state { color:var(--ink-muted); }
.empty-state .ic { display:inline-flex; width:48px; height:48px; border-radius:50%; align-items:center; justify-content:center; background:#e6f4ea; color:#1e7e34; }

/* report center */
.report-card { color:inherit !important; border:1px solid var(--line); transition:border-color .12s ease, transform .12s ease; }
.report-card:hover { border-color:var(--brand-navy); transform:translateY(-1px); filter:none !important; }
.report-icon { flex:none; width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--brand-navy); }
.report-title { color:var(--heading); }
.report-meta { color:var(--ink-muted); }
.report-table td, .report-table th { white-space:nowrap; font-variant-numeric:tabular-nums; }
.report-table tfoot td { border-top:2px solid var(--line); }

/* ---- sidebar: star/favorites/badge/theme ---- */
.nav-item { position:relative; }
.nav-item .nav-link { padding-right:34px; }
.nav-fav {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:0; border-radius:6px; background:transparent; padding:0;
  display:inline-flex; align-items:center; justify-content:center; opacity:0; cursor:pointer;
  transition:opacity .12s ease, background .12s ease;
}
.nav-item:hover .nav-fav, .nav-fav:focus-visible { opacity:.8; }
.nav-fav.is-fav { opacity:.9; }
.nav-fav.is-fav svg { fill:currentColor; }
.app-sidebar .nav-fav { color:#fff; }
.app-sidebar .nav-fav:hover { background:rgba(255,255,255,.16); opacity:1; }
.app-sidebar .nav-fav.is-fav { color:#ffe08a; }
.mobile-nav .nav-fav { color:#8a94a3; opacity:.7; }
.mobile-nav .nav-fav.is-fav { color:#e0a800; }

.nav-section-head { display:flex; align-items:center; }
.nav-section-head .nav-section-toggle { flex:1 1 auto; }
.fav-add-current {
  flex:none; width:22px; height:22px; margin:8px 6px 0 2px; border-radius:6px; border:0; padding:0; line-height:1;
  font-size:1rem; font-weight:600; background:transparent; cursor:pointer;
}
.app-sidebar .fav-add-current { color:rgba(255,255,255,.7); }
.app-sidebar .fav-add-current:hover { color:#fff; background:rgba(255,255,255,.14); }
.mobile-nav .fav-add-current { color:#6c7a8a; }
.fav-tools { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:2px; opacity:0; transition:opacity .12s ease; }
.fav-item:hover .fav-tools, .fav-tools:focus-within { opacity:1; }
.fav-item .nav-link { padding-right:56px; }
.fav-tool { width:22px; height:22px; border:0; border-radius:5px; background:transparent; padding:0; font-size:.9rem; line-height:1; cursor:pointer; }
.app-sidebar .fav-tool { color:rgba(255,255,255,.8); }
.app-sidebar .fav-tool:hover { background:rgba(255,255,255,.16); color:#fff; }
.mobile-nav .fav-tool { color:#6c7a8a; }
.fav-empty { font-size:.76rem; line-height:1.4; padding:6px 12px 8px; white-space:normal; }
.app-sidebar .fav-empty { color:rgba(255,255,255,.62); }
.mobile-nav .fav-empty { color:#6c7a8a; }
.fav-empty-star { display:inline-flex; vertical-align:-2px; }

.nav-badge {
  margin-left:auto; min-width:20px; height:18px; padding:0 6px; border-radius:9px; font-size:.68rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.25); color:#fff;
}
.nav-badge.is-urgent { background:#ff6b6b; color:#fff; }
.nav-item:hover .nav-badge { margin-right:18px; }
.mobile-nav .nav-badge { background:#e8ecf2; color:#3d4a5c; }
.mobile-nav .nav-badge.is-urgent { background:#d9534f; color:#fff; }

.theme-toggle {
  display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; cursor:pointer;
  font-size:.82rem; padding:7px 10px; border-radius:8px; margin-bottom:8px; text-align:left;
}
.app-sidebar .theme-toggle { color:rgba(255,255,255,.88); }
.app-sidebar .theme-toggle:hover { background:rgba(255,255,255,.1); color:#fff; }
.theme-toggle .theme-ic { display:inline-flex; width:16px; justify-content:center; }
.theme-toggle-compact { width:auto; margin:0; padding:5px 8px; color:#fff; border:1px solid rgba(255,255,255,.5); }
.theme-toggle-compact .theme-label { display:none; }
/* show the icon/label for the mode you'd switch TO */
[data-bs-theme="light"] .theme-ic-light, [data-bs-theme="light"] .theme-label-light { display:none; }
[data-bs-theme="dark"] .theme-ic-dark, [data-bs-theme="dark"] .theme-label-dark { display:none; }
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) .theme-label { opacity:0; }

/* ==========================================================================
   Dark theme — Bootstrap 5.3 handles its own components via
   data-bs-theme="dark"; the rules below cover this app's custom surfaces.
   ========================================================================== */
[data-bs-theme="dark"] {
  --surface: #1c2230;
  --surface-2: #232a3a;
  --page-bg: #141923;
  --line: #2f3747;
  --ink: #e3e7ee;
  --ink-muted: #98a2b3;
  --heading: #dbe4f6;
  --link: #8fb0ff;
  --accent-soft: #26324d;
  --chart-1: #7d9cf0;
  --chart-2: #4fd191;
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-ink: #a7b0bf;
  --bs-body-bg: #141923;
  --bs-body-color: #e3e7ee;
  --bs-secondary-bg: #232a3a;
  --bs-tertiary-bg: #1c2230;
  --bs-border-color: #2f3747;
  --bs-card-bg: #1c2230;
  --brand-gradient: linear-gradient(160deg, #1f7a52 0%, #243a6b 100%);
}
[data-bs-theme="dark"] body { background:var(--page-bg); color:var(--ink); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .summary-card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .card h6 { color:var(--heading); }
[data-bs-theme="dark"] a:not(.btn) { color:var(--link); }
[data-bs-theme="dark"] a:not(.btn):hover { color:#b3c8ff; filter:none; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > tr > th,
[data-bs-theme="dark"] thead.table-light th { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink-muted); background:var(--surface-2); color:var(--ink-muted); border-color:var(--line); }
[data-bs-theme="dark"] .customer-group-header, [data-bs-theme="dark"] .customer-group-header td { background:var(--surface-2) !important; color:var(--heading); }
[data-bs-theme="dark"] .row-cancelled, [data-bs-theme="dark"] .row-cancelled td { background:rgba(217,83,79,.14) !important; color:#f2b8b5; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color:#d7dce5; --bs-btn-border-color:#4a5468; --bs-btn-hover-bg:#d7dce5; --bs-btn-hover-color:#141923; --bs-btn-hover-border-color:#d7dce5; --bs-btn-active-bg:#d7dce5; --bs-btn-active-color:#141923; }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg:#d7dce5; --bs-btn-color:#141923; --bs-btn-border-color:#d7dce5; --bs-btn-hover-bg:#fff; --bs-btn-hover-color:#141923; }
[data-bs-theme="dark"] .badge.bg-light { background:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line) !important; }
[data-bs-theme="dark"] .text-dark { color:var(--ink) !important; }
[data-bs-theme="dark"] .badge.text-dark { color:#141923 !important; }
[data-bs-theme="dark"] .badge.bg-light.text-dark { color:var(--ink) !important; }
[data-bs-theme="dark"] .nav-crumb { background:var(--surface); border-color:var(--line); color:var(--heading); }
[data-bs-theme="dark"] .nav-crumb:hover { background:var(--surface-2); color:#fff; }
[data-bs-theme="dark"] .nav-crumb-next { background:var(--brand-gradient); color:#fff; }
[data-bs-theme="dark"] .modal-footer { border-top-color:var(--line); }
[data-bs-theme="dark"] .tt-dropzone { background:var(--surface-2); border-color:#4a5468; }
[data-bs-theme="dark"] .tt-dropzone .tt-dropzone-icon { background:var(--accent-soft); color:var(--link); }
[data-bs-theme="dark"] .tt-remark-history, [data-bs-theme="dark"] .tt-email-preview table th { background:var(--surface-2); }
[data-bs-theme="dark"] .tt-email-preview { background:var(--surface); border-color:var(--line); }
[data-bs-theme="dark"] .timeline-list li { border-left-color:var(--line); }
[data-bs-theme="dark"] .evidence-thumb { border-color:var(--line); }
[data-bs-theme="dark"] .stepper-horizontal li .step-badge { background:var(--surface); }
[data-bs-theme="dark"] .stepper-horizontal li:not(:first-child)::before { background:#3a4356; }
[data-bs-theme="dark"] .stepper-horizontal li.done { color:#5fd08a; }
[data-bs-theme="dark"] .stepper-horizontal li.done .step-badge { background:#2f9e5a; border-color:#2f9e5a; }
[data-bs-theme="dark"] .stepper-horizontal li.done:not(:first-child)::before { background:#2f9e5a; }
[data-bs-theme="dark"] .stepper-horizontal li.next { color:#9db6ff; }
[data-bs-theme="dark"] .stepper-horizontal li.next .step-badge { border-color:#9db6ff; }
[data-bs-theme="dark"] .stepper-horizontal li.pending { color:#7c8698; }
[data-bs-theme="dark"] .stepper-horizontal li.pending .step-badge { border-color:#4a5468; }
/* pastel status pills -> tinted variants that keep contrast on dark */
[data-bs-theme="dark"] :is(.ns-status-FOLLOW_UP, .inc-status-FOLLOW_UP, .doc-status-UPLOADED, .tt-nil-badge, .tt-email-status-PENDING, .tt-status-AT_PORT_AFTER_OPERATION) { background:rgba(232,163,61,.18); color:#f3c77a; }
[data-bs-theme="dark"] :is(.ns-status-CANCELLED, .inc-status-CANCELLED, .doc-status-REJECTED) { background:rgba(217,83,79,.2); color:#f2a7a4; }
[data-bs-theme="dark"] :is(.ns-status-RESOLVED, .inc-status-RESOLVED, .doc-status-APPROVED, .tt-email-status-SENT, .tt-status-UNDER_OPERATION) { background:rgba(47,182,117,.18); color:#7fdcaa; }
[data-bs-theme="dark"] :is(.ns-status-SHIFTED, .tt-status-AT_ANCHORAGE, .tt-status-AT_PORT, .tt-status-EN_ROUTE) { background:rgba(125,156,240,.18); color:#aebfff; }
[data-bs-theme="dark"] :is(.doc-status-MISSING, .tt-status-AWAITING_ARRIVAL) { background:var(--surface-2); color:var(--ink-muted); }
[data-bs-theme="dark"] .watch-count.is-alert { background:rgba(217,83,79,.2); color:#f2a7a4; border-color:rgba(217,83,79,.4); }
[data-bs-theme="dark"] .empty-state .ic { background:rgba(47,182,117,.18); color:#7fdcaa; }
[data-bs-theme="dark"] .mobile-nav .nav-section-toggle { color:var(--ink-muted); }
[data-bs-theme="dark"] .mobile-nav .nav-section-toggle:hover, [data-bs-theme="dark"] .mobile-nav .nav-link:hover { background:var(--surface-2); color:var(--ink); }
[data-bs-theme="dark"] .mobile-nav .nav-link { color:var(--ink); }
[data-bs-theme="dark"] .mobile-nav .nav-link.active { background:var(--accent-soft); color:#fff; }
[data-bs-theme="dark"] .mobile-nav .nav-section-count, [data-bs-theme="dark"] .mobile-nav .nav-badge { background:var(--surface-2); color:var(--ink); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color:#11151e; border-color:var(--line); color:var(--ink); }
[data-bs-theme="dark"] .alert-info { --bs-alert-bg: rgba(125,156,240,.14); --bs-alert-color:#c6d4ff; --bs-alert-border-color: rgba(125,156,240,.3); }

/* fixes after visual review */
.btn .icon-svg, .nav-crumb .icon-svg { display:inline-block; vertical-align:-2px; }
a.kpi-tile:not(.btn), a.kpi-tile:not(.btn):hover { color:var(--ink); }
.bar-row { grid-template-columns:136px 1fr 36px; }
[data-bs-theme="dark"] .app-sidebar .nav-link { color:rgba(255,255,255,.86); }
[data-bs-theme="dark"] .app-sidebar .nav-link:hover,
[data-bs-theme="dark"] .app-sidebar .nav-link.active { color:#fff; }
[data-bs-theme="dark"] .app-sidebar .btn-logout { color:#fff; }
[data-bs-theme="dark"] .app-sidebar a:not(.btn):hover { filter:none; }
/* the login card keeps the light look in both themes (the logo artwork has dark lettering) */
[data-bs-theme="dark"] .login-card[data-bs-theme="light"] { background:#fff; color:#212529; }
[data-bs-theme="dark"] .login-card[data-bs-theme="light"] .form-control { background-color:#fff; color:#212529; border-color:#dee2e6; }
[data-bs-theme="dark"] .login-card[data-bs-theme="light"] a:not(.btn) { color:var(--brand-navy); }
.mobile-nav .nav-badge { margin-right:24px; }
.rate-chip { font-size:.78rem; padding:3px 9px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); }
.converter-result { border-top:1px solid var(--line); padding-top:10px; }
/* capacity cards (New Pricing, Booking Reservation) */
.capacity-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.cap-card { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface); }
.cap-card.is-over { border-color:#d9534f; box-shadow:inset 3px 0 0 #d9534f; }
.cap-title { font-weight:700; color:var(--heading); font-size:.85rem; }
.cap-value { font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.cap-sub { font-size:.74rem; color:var(--ink-muted); }
@media (max-width: 700px) { .capacity-cards { grid-template-columns:1fr; } }
.stepper-flow { counter-reset:none; }
.stepper-flow .step-link { display:flex; flex-direction:column; align-items:center; color:inherit !important; text-decoration:none; }
.stepper-flow .step-link:hover .step-badge { box-shadow:0 0 0 3px rgba(61,92,153,.18); }
.stepper-flow li.done .step-badge { font-size:.78rem; }

/* ---------------------------------------------------- User & Access ---- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 72px; }
.perm-group-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.perm-list { padding: 6px 0; }
.perm-row { padding: 6px 14px; }
.perm-row:hover { background: rgba(127,127,127,.06); }
.perm-label { display: block; font-size: .88rem; }
.perm-meta { display: flex; gap: 6px; align-items: center; font-size: .72rem; color: var(--bs-secondary-color); }
.perm-meta code { font-size: .7rem; color: inherit; }
.perm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.perm-dot-default { background: #0d9488; }
.access-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 10px 14px;
  background: var(--surface, #fff); border-top: 1px solid var(--line, #e5e7eb); box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
@media (max-width: 576px) { .perm-grid { grid-template-columns: 1fr; } }
/* inline icons inside text (Email Settings / User & Access) */
.small .icon-svg, td .icon-svg, .form-text .icon-svg, .alert .icon-svg { display: inline-block; vertical-align: -2px; }

/* ================================================= Invoice document === */
.inv-doc { --inv-navy:#1f2f4d; --inv-teal:#0f9d84; --inv-line:#dde2ea; --inv-soft:#f4f7fa; --inv-ink:#172033; --inv-muted:#5b6678;
  background:#fff; color:var(--inv-ink); border-radius:12px; box-shadow:0 6px 24px rgba(20,35,60,.08); padding:34px 38px;
  font-size:.86rem; line-height:1.45; max-width:900px; margin:0 auto; }
.inv-head { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.inv-logo { height:46px; width:auto; display:block; margin-bottom:8px; }
.inv-company { color:var(--inv-muted); font-size:.78rem; line-height:1.5; }
.inv-company b { color:var(--inv-ink); font-size:.86rem; }
.inv-title-block { text-align:right; min-width:260px; }
.inv-title { font-size:1.75rem; font-weight:800; color:var(--inv-navy); letter-spacing:.04em; margin-bottom:6px; }
.inv-meta { margin-left:auto; font-size:.82rem; border-collapse:collapse; }
.inv-meta th { color:var(--inv-muted); font-weight:600; text-align:left; padding:3px 14px 3px 0; white-space:nowrap; }
.inv-meta td { text-align:right; padding:3px 0; border-bottom:1px solid var(--inv-line); min-width:130px; }
.inv-meta tr:last-child td { border-bottom:0; }
.inv-rule { height:3px; background:linear-gradient(90deg, var(--inv-teal), var(--inv-navy)); border-radius:2px; margin:18px 0 16px; }
.inv-parties, .inv-extra { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.inv-box { border:1px solid var(--inv-line); border-radius:8px; padding:10px 12px; }
.inv-label { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--inv-muted); margin-bottom:4px; }
.inv-label.mt { margin-top:10px; }
.inv-strong { font-weight:700; font-size:.95rem; }
.inv-muted { color:var(--inv-muted); }
.inv-kv { font-size:.82rem; } .inv-kv th { color:var(--inv-muted); font-weight:500; padding:1px 12px 1px 0; white-space:nowrap; }
.inv-items { width:100%; border-collapse:collapse; margin-bottom:14px; }
.inv-items thead th { background:var(--inv-navy); color:#fff; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 10px; font-weight:700; }
.inv-items thead th:first-child { border-top-left-radius:6px; } .inv-items thead th:last-child { border-top-right-radius:6px; }
.inv-items td { padding:7px 10px; border-bottom:1px solid var(--inv-line); vertical-align:top; }
.inv-items tbody tr:nth-child(even) td { background:var(--inv-soft); }
.inv-doc .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.inv-bottom { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; }
.inv-notes { flex:1 1 300px; font-size:.84rem; }
.inv-totals { border-collapse:collapse; min-width:300px; font-size:.86rem; }
.inv-totals thead th { font-size:.7rem; color:var(--inv-muted); padding:2px 10px; }
.inv-totals th { text-align:left; font-weight:500; padding:5px 10px; white-space:nowrap; }
.inv-totals td { padding:5px 10px; }
.inv-totals .inv-total th, .inv-totals .inv-total td { border-top:2px solid var(--inv-navy); font-weight:800; font-size:.95rem; }
.inv-totals .inv-due th, .inv-totals .inv-due td { background:#e7f6f2; border-top:2px solid var(--inv-teal); font-weight:800; color:#0b6b5a; }
.inv-extra .pre { white-space:pre-line; }
.inv-terms { border-top:1px solid var(--inv-line); padding-top:10px; margin-top:6px; }
.inv-terms p { font-size:.72rem; color:#3b4557; margin:0 0 4px; text-align:justify; }
.inv-sign { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:34px; font-size:.74rem; color:var(--inv-muted); text-align:center; }
.inv-sign-line { border-top:1px solid #8a93a3; margin-bottom:6px; }
.inv-footer { margin-top:18px; padding-top:8px; border-top:1px solid var(--inv-line); font-size:.7rem; color:var(--inv-muted); text-align:center; }
.inv-status { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.72rem; font-weight:700; background:#e5e7eb; color:#374151; }
.inv-status-paid { background:#dcfce7; color:#166534; } .inv-status-partially_paid { background:#fef3c7; color:#92400e; }
.inv-status-sent, .inv-status-issued { background:#dbeafe; color:#1e40af; }
.inv-status-void { background:#fee2e2; color:#991b1b; text-decoration:line-through; }   /* v6.04 */
.inv-row-void td { color:var(--bs-secondary-color) !important; }
.inv-row-void td a:first-child { text-decoration:line-through; }
@media (max-width: 700px) { .inv-doc { padding:20px 16px; } .inv-parties, .inv-extra, .inv-sign { grid-template-columns:1fr; } .inv-title-block { text-align:left; } .inv-meta { margin-left:0; } }
/* the invoice stays a white paper document in dark mode, like a PDF */
[data-bs-theme=dark] .inv-doc { box-shadow:0 6px 24px rgba(0,0,0,.35); }

.inv-print-bar { position:sticky; top:0; z-index:5; display:flex; gap:8px; justify-content:center; padding:10px; background:#eef2f6; border-bottom:1px solid #d7dde5; }
body.inv-print-body { background:#e9edf2; margin:0; font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
body.inv-print-body .inv-doc { margin:18px auto; }
@page { size:A4; margin:12mm; }
@media print {
  .inv-print-bar, .no-print, .app-sidebar, .app-topbar, .sidebar, nav.sidebar-nav { display:none !important; }
  body, body.inv-print-body { background:#fff !important; }
  .inv-doc { box-shadow:none !important; border-radius:0; padding:0; max-width:none; margin:0 !important; }
  .inv-items thead th, .inv-rule, .inv-totals .inv-due td, .inv-totals .inv-due th, .inv-items tbody tr:nth-child(even) td { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .inv-terms, .inv-sign { break-inside:avoid; }
}

/* v1.2.2 — icon chip on KPI / capacity cards (CBF: Units, TEU, Weight, Voyage Rate) */
.kpi-ic { display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px;
  border-radius:8px; background:rgba(61,92,153,.10); color:var(--brand-navy); }
.kpi-ic-sm { width:26px; height:26px; border-radius:6px; }
.kpi-card-ic { display:flex; flex-direction:row; align-items:center; gap:12px; }
.kpi-card-ic .kpi-ic { width:42px; height:42px; border-radius:10px; }
[data-bs-theme="dark"] .kpi-ic { background:rgba(123,240,168,.12); color:var(--brand-teal-light); }
/* Cargo Manifest list — long files scroll inside the card, header stays visible */
.cm-table-wrap { max-height:70vh; overflow:auto; }
.cm-table thead th { position:sticky; top:0; z-index:1; }
.cm-table td { white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; }
/* the "Next: …" button keeps white text (a:not(.btn) would turn it navy) */
a.nav-crumb-next, a.nav-crumb-next:hover, a.nav-crumb-next:focus { color:#fff; }
.nav-crumb-next { text-shadow:0 1px 1px rgba(0,0,0,.18); }
/* icons inside headings / labels sit on the text line (not above it) */
h1 .icon-svg, h2 .icon-svg, h3 .icon-svg, h4 .icon-svg, h5 .icon-svg, h6 .icon-svg, label .icon-svg, .badge .icon-svg { display:inline-block; vertical-align:-2px; }
h1 .ic, h2 .ic, h3 .ic, h4 .ic, h5 .ic, h6 .ic { display:inline-flex; align-items:center; vertical-align:middle; }
/* a page's own button row under its title (voyage page) */
.page-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 14px; }
.page-actions .ms-auto { margin-left:auto; }

/* v6.03 — container numbers as compact chips (Invoicing) */
.cntr-chips { display:flex; flex-wrap:wrap; gap:4px; max-height:260px; overflow:auto; }
.cntr-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.76rem; padding:1px 6px;
  border:1px solid #dfe3ea; border-radius:4px; background:#f4f6f9; color:#2b3445; white-space:nowrap; }
[data-bs-theme="dark"] .cntr-chip { background:var(--surface-2); border-color:var(--line); color:var(--ink); }


/* v6.03 — dashboard SVG charts (app/charts.py). Colours validated for each
   mode (light on #fff, dark on the dark card surface). */
:root { --viz-s1:#3D5C99; --viz-s2:#1baf7a; --viz-grid:#e8ebf0; --viz-axis:#c9ced8; --viz-ink:#3a4354; --viz-muted:#6b7385; }
[data-bs-theme="dark"] { --viz-s1:#3987e5; --viz-s2:#199e70; --viz-grid:rgba(255,255,255,.07); --viz-axis:#3a4356; --viz-ink:#dbe1ea; --viz-muted:#9aa4b5; }
svg.viz { width:100%; height:auto; display:block; overflow:visible; }
.viz .viz-grid { stroke:var(--viz-grid); stroke-width:1; }
.viz .viz-axis { stroke:var(--viz-axis); stroke-width:1; }
.viz .viz-tick, .viz .viz-cat { fill:var(--viz-muted); font-size:11px; font-family:inherit; }
.viz .viz-val { fill:var(--viz-ink); font-size:10.5px; font-weight:600; font-family:inherit; }
.viz .viz-val-2 { fill:var(--viz-muted); font-weight:500; }
.viz .viz-bar.viz-s1 { fill:var(--viz-s1); }
.viz .viz-bar.viz-s2 { fill:var(--viz-s2); }
.viz .viz-hit { fill:transparent; }
.viz .viz-hit:hover { fill:rgba(127,127,127,.08); }
.viz-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.78rem; color:var(--viz-muted); margin-bottom:4px; }
.viz-legend span { display:inline-flex; align-items:center; gap:6px; }
.viz-key { display:inline-block; width:10px; height:10px; border-radius:3px; }
.viz-key.viz-s1 { background:var(--viz-s1); }
.viz-key.viz-s2 { background:var(--viz-s2); }
.dash-filters .form-label { color:var(--viz-muted); }

/* ==========================================================================
   v6.03 — dark mode: every light-only surface gets a dark counterpart
   (Bootstrap's table-* row colours, bg-light / bg-white blocks, pills,
   inline light panels, section labels that were too dark to read).
   ========================================================================== */
[data-bs-theme="dark"] .bg-light:not(.badge), [data-bs-theme="dark"] .bg-white { background-color:var(--surface-2) !important; color:var(--ink); }
[data-bs-theme="dark"] .form-control.bg-light { background-color:#11151e !important; }
[data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-warning > td, [data-bs-theme="dark"] .table-warning > th {
  --bs-table-bg: rgba(232,163,61,.14); --bs-table-color: #f3d39b; --bs-table-striped-bg: rgba(232,163,61,.18); --bs-table-hover-bg: rgba(232,163,61,.2);
  --bs-table-border-color: rgba(232,163,61,.28); color:#f3d39b; }
[data-bs-theme="dark"] .table-success, [data-bs-theme="dark"] .table-success > td, [data-bs-theme="dark"] .table-success > th {
  --bs-table-bg: rgba(47,182,117,.14); --bs-table-color: #a6e8c4; --bs-table-border-color: rgba(47,182,117,.28); color:#a6e8c4; }
[data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-danger > td, [data-bs-theme="dark"] .table-danger > th {
  --bs-table-bg: rgba(217,83,79,.16); --bs-table-color: #f5b7b4; --bs-table-border-color: rgba(217,83,79,.3); color:#f5b7b4; }
[data-bs-theme="dark"] .table-info, [data-bs-theme="dark"] .table-info > td, [data-bs-theme="dark"] .table-info > th {
  --bs-table-bg: rgba(125,156,240,.14); --bs-table-color: #c6d4ff; --bs-table-border-color: rgba(125,156,240,.28); color:#c6d4ff; }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(255,255,255,.04); color:var(--ink); }
[data-bs-theme="dark"] .tt-readonly-pill { background:var(--surface-2); color:var(--ink-muted); }
[data-bs-theme="dark"] .tt-section-label-ARRIVAL { color:#8cc4ff; }
[data-bs-theme="dark"] .tt-section-label-DISCHARGE { color:#7fdcaa; }
[data-bs-theme="dark"] .tt-section-label-LOADING { color:#f3c77a; }
[data-bs-theme="dark"] .tt-section-label-DEPARTURE { color:#c3b1ff; }
[data-bs-theme="dark"] .tt-status-pill { background:rgba(0,0,0,.25); color:inherit; }
[data-bs-theme="dark"] .tt-voyage-bar .tt-field-label, [data-bs-theme="dark"] .kpi-label, [data-bs-theme="dark"] .timeline-list .timeline-when,
[data-bs-theme="dark"] .tt-remark-history .tt-remark-version { color:var(--ink-muted); }
[data-bs-theme="dark"] .text-brand-teal { color:var(--link); }
[data-bs-theme="dark"] .sch-tl-port .sch-tl-dot { background:var(--accent-soft); border-color:var(--accent-soft); color:var(--link); }
[data-bs-theme="dark"] .sch-tl-current .sch-tl-label, [data-bs-theme="dark"] .sch-tl-current .sch-tl-sub { color:#9db6ff; }
[data-bs-theme="dark"] .sch-tl-event.sch-tl-done .sch-tl-label, [data-bs-theme="dark"] .sch-tl-event.sch-tl-done .sch-tl-sub { color:#7fdcaa; }
[data-bs-theme="dark"] .sch-tl-sub { color:var(--ink-muted); }
[data-bs-theme="dark"] .sch-timeline li:not(:first-child)::before { background:#3a4356; }
[data-bs-theme="dark"] .sch-timeline li.sch-tl-done:not(:first-child)::before, [data-bs-theme="dark"] .sch-timeline li.sch-tl-current:not(:first-child)::before { background:#5a7fd6; }
[data-bs-theme="dark"] .sch-drop.is-drag, [data-bs-theme="dark"] .tt-dropzone.tt-dropzone-drag { background:var(--accent-soft); }
[data-bs-theme="dark"] .card h4, [data-bs-theme="dark"] .card h5, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4 { color:var(--heading); }
[data-bs-theme="dark"] .text-muted { color:var(--ink-muted) !important; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color:var(--line) !important; }
[data-bs-theme="dark"] .breadcrumb-item.active { color:var(--ink-muted); }
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color:var(--ink-muted); }
[data-bs-theme="dark"] .form-check-input { background-color:#11151e; border-color:#4a5468; }
[data-bs-theme="dark"] .form-check-input:checked { background-color:#3987e5; border-color:#3987e5; }
[data-bs-theme="dark"] .form-control::placeholder { color:#6f7888; }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color:#1a1f2b; color:var(--ink-muted); }
[data-bs-theme="dark"] .input-group-text { background:var(--surface-2); border-color:var(--line); color:var(--ink-muted); }
[data-bs-theme="dark"] .dropdown-menu { background:var(--surface); border-color:var(--line); }
[data-bs-theme="dark"] .list-group-item { background:var(--surface); color:var(--ink); border-color:var(--line); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { background:var(--surface); color:var(--ink); border-color:var(--line) var(--line) var(--surface); }
[data-bs-theme="dark"] .nav-tabs { border-color:var(--line); }
[data-bs-theme="dark"] .pagination { --bs-pagination-bg:var(--surface); --bs-pagination-border-color:var(--line); --bs-pagination-color:var(--link);
  --bs-pagination-disabled-bg:var(--surface); --bs-pagination-active-bg:#3D5C99; --bs-pagination-active-border-color:#3D5C99; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: rgba(232,163,61,.14); --bs-alert-color:#f3d39b; --bs-alert-border-color: rgba(232,163,61,.3); }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: rgba(47,182,117,.14); --bs-alert-color:#a6e8c4; --bs-alert-border-color: rgba(47,182,117,.3); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: rgba(217,83,79,.16); --bs-alert-color:#f5b7b4; --bs-alert-border-color: rgba(217,83,79,.32); }
[data-bs-theme="dark"] .alert-secondary { --bs-alert-bg: var(--surface-2); --bs-alert-color:var(--ink); --bs-alert-border-color: var(--line); }
[data-bs-theme="dark"] .alert a:not(.btn) { color:inherit; text-decoration:underline; }
[data-bs-theme="dark"] .light-panel { background:var(--surface-2) !important; color:var(--ink); }
[data-bs-theme="dark"] .modal-body, [data-bs-theme="dark"] .modal-footer { color:var(--ink); }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color:#c3c9d4; --bs-btn-border-color:#4a5468; --bs-btn-hover-bg:#2a3242; --bs-btn-hover-color:#fff; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg:var(--surface-2); --bs-btn-color:var(--ink); --bs-btn-border-color:var(--line); }
[data-bs-theme="dark"] code { color:#f0a8c8; }
[data-bs-theme="dark"] .kpi-tile { background:var(--surface); border-color:var(--line); }
[data-bs-theme="dark"] .card .table, [data-bs-theme="dark"] .card .table td { color:var(--ink); }
[data-bs-theme="dark"] summary { color:var(--ink-muted); }

/* ==========================================================================
   v6.03 — phones / narrow screens: wide forms and tables scroll inside
   their card instead of stretching the page (the top bar stayed narrower
   than the form).
   ========================================================================== */
html, body { max-width:100%; }
.app-main { min-width:0; max-width:100%; overflow-x:clip; }
@media (max-width: 900px) {
  .app-main > .container-fluid, .app-main > main, .app-main .content { padding-left:12px !important; padding-right:12px !important; }
  .app-topbar { position:sticky; top:0; z-index:1020; width:100%; }
  .card { max-width:100%; }
  .card > table, .card > .table, form > table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table { font-size:.82rem; }
  .table-responsive, .card .table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .page-head { align-items:flex-start; }
  .page-head > div { min-width:0; }
  .nav-crumbs { gap:6px; }
  .nav-crumb { padding:4px 9px; font-size:.76rem; }
  .nav-crumb-next { margin-left:0; }
  .stepper-horizontal li { min-width:58px; }
  .kpi-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .row > [class*="col-"] { min-width:0; }
  input, select, textarea { max-width:100%; }
  .form-control, .form-select { min-width:0; }
  .d-flex.gap-2, .d-flex.gap-3 { flex-wrap:wrap; }
  .modal-dialog { margin:.5rem; }
  .inv-doc { overflow-x:auto; }
  .table td > .form-control, .table td > .form-select, .table td > input, .table td > select { min-width:84px; }
  .table td textarea.form-control { min-width:150px; }
  .tt-voyage-bar { gap:12px 20px; }
  pre, .text-break { overflow-wrap:anywhere; }
}
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns:1fr; }
  h4, .h4 { font-size:1.15rem; }
}

/* ------------------------------------------------------------------ v6.04
   Customer Statement (Reports -> Customer Statement) */
.row-link { cursor:pointer; }
.row-link:hover > td { background:var(--bs-tertiary-bg); }
.kpi-tile-accent { border-left:3px solid #0f9d84; }
.stmt-badge-open { background:#fef3c7; color:#92400e; font-weight:600; }
.stmt-aging-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--bs-tertiary-bg); gap:2px; }
.stmt-aging-legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:.82rem; }
.stmt-aging-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.stmt-age-nd { background:#10b981; } .stmt-age-a1 { background:#f59e0b; } .stmt-age-a2 { background:#f97316; }
.stmt-age-a3 { background:#ef4444; } .stmt-age-a4 { background:#991b1b; }
.stmt-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.74rem; font-weight:600; white-space:nowrap; color:#fff; }
.stmt-chip.stmt-age-nd, .stmt-chip.stmt-age-a1 { color:#1f2937; }
.stmt-chip-inv { background:#dbeafe; color:#1e40af; } .stmt-chip-pay { background:#dcfce7; color:#166534; }
.stmt-row-opening td, .stmt-row-closing td { background:var(--bs-tertiary-bg) !important; }
.stmt-table td, .stmt-table th { white-space:nowrap; }
.stmt-table td.small.text-muted { white-space:normal; min-width:160px; }
[data-bs-theme="dark"] .stmt-chip-inv { background:rgba(59,130,246,.22); color:#bfdbfe; }
[data-bs-theme="dark"] .stmt-chip-pay { background:rgba(16,185,129,.22); color:#a7f3d0; }
[data-bs-theme="dark"] .stmt-badge-open { background:rgba(245,158,11,.22); color:#fde68a; }
@media print {
  .stmt-doc .card { box-shadow:none !important; border:1px solid #d9dee6 !important; }
  .stmt-doc .table-responsive { overflow:visible !important; }
  .stmt-table td, .stmt-table th { white-space:normal; }
  .stmt-aging-bar, .stmt-age, .stmt-chip { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* v6.04 — phones: the page itself never pans sideways (wide tables scroll
   inside their card), so the sticky top bar can't slide off; no rubber-band
   bounce of the whole page under the top bar. */
@media (max-width: 900px) {
  html { overflow-x:clip; overscroll-behavior-y:none; }
  body { overflow-x:clip; }
  .app-topbar { top:0; box-shadow:0 1px 6px rgba(0,0,0,.12); }
  .table-responsive, .card > table { overscroll-behavior-x:contain; }
}

/* v6.04 — charts: phone version (rows) below 576px, columns above */
.viz-compact { display:none; }
@media (max-width: 575.98px) {
  .viz-wide { display:none; }
  .viz-compact { display:block; }
  .viz-compact .viz .viz-cat, .viz-compact .viz .viz-val { font-size:11px; }
}

/* ==========================================================================
   v6.04 — dark mode readability pass (measured: every text colour against
   its real background, all pages, WCAG 4.5:1 for normal text). Bootstrap's
   .text-danger / .text-success / .text-primary and the outline buttons keep
   their light-mode colours in dark mode (~3.5:1 on our dark cards) — lifted
   here once, so every page benefits.
   ========================================================================== */
[data-bs-theme="dark"] .text-danger { color:#ff8f99 !important; }
[data-bs-theme="dark"] .text-success { color:#5fd394 !important; }
[data-bs-theme="dark"] .text-primary { color:#8fb0ff !important; }
[data-bs-theme="dark"] .text-warning { color:#ffd46b !important; }
[data-bs-theme="dark"] .text-info { color:#7fdcf0 !important; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color:#ff8f99; --bs-btn-disabled-color:#ff8f99; --bs-btn-disabled-border-color:#e5626e; --bs-btn-border-color:#e5626e; --bs-btn-hover-bg:#c8323f; --bs-btn-hover-border-color:#c8323f; --bs-btn-hover-color:#fff; --bs-btn-active-bg:#b02a37; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color:#8fb0ff; --bs-btn-border-color:#6f93e8; --bs-btn-hover-bg:#3d5c99; --bs-btn-hover-border-color:#3d5c99; --bs-btn-hover-color:#fff; --bs-btn-active-bg:#34508a; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color:#5fd394; --bs-btn-border-color:#3fb877; --bs-btn-hover-bg:#198754; --bs-btn-hover-color:#fff; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color:#ffd46b; --bs-btn-border-color:#e6b84a; }
[data-bs-theme="dark"] .stepper-horizontal li.done .step-badge { background:#1f7a46; border-color:#1f7a46; }
[data-bs-theme="dark"] .stepper-horizontal li.pending,
[data-bs-theme="dark"] .stepper-horizontal li.pending .step-label { color:#a3adbf; }
[data-bs-theme="dark"] .page-item.active .page-link { color:#fff; }
[data-bs-theme="dark"] .alert .text-success, [data-bs-theme="dark"] [style*="success-bg-subtle"] .text-success { color:#7ee2a8 !important; }
.stmt-chip.stmt-age-a2 { color:#1f2937; }
/* (the invoice paper .inv-doc stays white in dark mode — its pills keep the light colours) */
[data-bs-theme="dark"] .inv-status-paid:not(.inv-doc *) { background:rgba(47,182,117,.2); color:#7fdcaa; }
[data-bs-theme="dark"] .inv-status-partially_paid:not(.inv-doc *) { background:rgba(232,163,61,.2); color:#f3c77a; }
[data-bs-theme="dark"] .inv-status-sent:not(.inv-doc *), [data-bs-theme="dark"] .inv-status-issued:not(.inv-doc *) { background:rgba(59,130,246,.22); color:#a9c6ff; }
[data-bs-theme="dark"] .inv-status-overdue:not(.inv-doc *) { background:rgba(217,83,79,.22); color:#f2a7a4; }
[data-bs-theme="dark"] .inv-status-void:not(.inv-doc *) { background:rgba(217,83,79,.18); color:#f2a7a4; }
[data-bs-theme="dark"] .inv-status-draft:not(.inv-doc *) { background:rgba(255,255,255,.08); color:#c5cdd9; }
/* v6.04 — All Voyages summary cards are links (Total = all voyages) */
a.summary-card-link { cursor:pointer; transition:box-shadow .12s ease, border-color .12s ease; border:1px solid transparent; }
a.summary-card-link:hover { box-shadow:0 2px 10px rgba(0,0,0,.12); border-color:var(--brand-navy); }
a.summary-card-link.is-selected { border-color:var(--brand-navy); box-shadow:inset 0 -3px 0 var(--brand-navy); }
[data-bs-theme="dark"] a.summary-card-link:hover, [data-bs-theme="dark"] a.summary-card-link.is-selected { border-color:#8fb0ff; }
[data-bs-theme="dark"] a.summary-card-link.is-selected { box-shadow:inset 0 -3px 0 #8fb0ff; }

/* ==========================================================================
   v6.05
   ========================================================================== */
/* notification bell */
.nb-wrap { position:relative; flex:none; }
.nb-sidebar { margin-left:auto; }
.nb-bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:8px; border:0; background:rgba(255,255,255,.16); color:#fff; }
.nb-bell:hover { background:rgba(255,255,255,.28); }
.nb-count { position:absolute; top:-5px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#e5484d; color:#fff; font-size:.7rem; font-weight:700; line-height:18px; text-align:center; }
.nb-panel { position:absolute; top:40px; left:0; width:340px; max-width:calc(100vw - 24px); z-index:1060; background:var(--surface);
  color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.18); overflow:hidden; }
.nb-topbar .nb-panel { left:auto; right:-60px; }
.nb-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); }
.nb-list { max-height:min(60vh, 420px); overflow:auto; }
.nb-item { display:flex; gap:10px; padding:10px 14px; color:inherit; text-decoration:none; border-bottom:1px solid var(--line); font-size:.85rem; }
.nb-item:hover { background:var(--surface-2); color:inherit; }
.nb-item.is-unread { background:rgba(61,92,153,.07); }
.nb-item b { display:block; }
.nb-msg { display:block; color:var(--ink-muted); }
.nb-at { display:block; color:var(--ink-muted); font-size:.75rem; margin-top:2px; }
.nb-dot { flex:none; width:10px; height:10px; border-radius:50%; margin-top:5px; background:#94a3b8; }
.nb-payment_confirmed, .nb-cbf_change_approved { background:#16a34a; } .nb-payment_rejected, .nb-cbf_change_rejected { background:#dc2626; }
.nb-payment_correction, .nb-claim_submitted, .nb-cbf_change_requested { background:#f59e0b; }
.nb-all { display:block; text-align:center; padding:9px; font-size:.85rem; font-weight:600; }
.app-sidebar.is-collapsed .nb-wrap, .app-sidebar.collapsed .nb-wrap { display:none; }

/* toasts, "new data" banner, idle dialog */
.live-toasts { position:fixed; top:14px; right:14px; z-index:1080; display:flex; flex-direction:column; gap:8px; width:min(360px, calc(100vw - 28px)); }
.live-toast { display:block; padding:12px 14px; border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none;
  border:1px solid var(--line); border-left:4px solid var(--brand-navy); box-shadow:0 10px 28px rgba(15,23,42,.18); font-size:.85rem;
  transition:opacity .35s ease, transform .35s ease; }
.live-toast:hover { color:var(--ink); }
.live-toast div { color:var(--ink-muted); margin-top:2px; }
.live-toast-note { border-left-color:#16a34a; } .live-toast-info { border-left-color:#0ea5e9; }
.live-toast.is-out { opacity:0; transform:translateY(-6px); }
.live-banner { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:1070; display:flex; gap:12px; align-items:center;
  padding:8px 10px 8px 16px; border-radius:999px; background:#1f2d3d; color:#fff; font-size:.85rem; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.idle-warn { position:fixed; inset:0; z-index:1090; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.45); padding:16px; }
.idle-warn[hidden] { display:none; }
.idle-card { width:min(360px, 100%); padding:18px; border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 18px 40px rgba(0,0,0,.25); }

/* payment claims */
.claim-badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap; }
.claim-pending_finance_verification { background:#fef3c7; color:#92400e; }
.claim-confirmed { background:#dcfce7; color:#166534; }
.claim-rejected { background:#fee2e2; color:#991b1b; }
.claim-correction_requested { background:#dbeafe; color:#1e40af; }
.pay-tl { position:relative; padding:8px 0 10px 16px; border-left:3px solid var(--line); margin-left:4px; }
.pay-tl + .pay-tl { margin-top:4px; }
.pay-tl-confirmed { border-left-color:#16a34a; } .pay-tl-rejected { border-left-color:#dc2626; }
.pay-tl-pending_finance_verification { border-left-color:#f59e0b; } .pay-tl-correction_requested { border-left-color:#2563eb; }
.pay-tl-focus { background:rgba(61,92,153,.06); border-radius:0 8px 8px 0; }
.pay-remarks { background:var(--surface-2); border-radius:6px; padding:4px 8px; }
.pv-totals { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); }
.pv-section-title { font-weight:700; font-size:.9rem; margin-bottom:6px; }
.pv-kv th { color:var(--ink-muted); font-weight:500; width:42%; }
.pv-receipt { border:1px solid var(--line); border-radius:10px; padding:10px; }
.pv-drop { position:relative; }
.pv-drop-input { position:absolute; width:1px; height:1px; opacity:0; }
.pv-drop-label { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:16px 10px; border:2px dashed var(--line);
  border-radius:10px; cursor:pointer; font-size:.85rem; color:var(--ink-muted); }
.pv-drop.is-over .pv-drop-label, .pv-drop-label:hover { border-color:var(--brand-navy); color:var(--ink); }
.pv-doc { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--line); }
.pv-history { list-style:none; padding-left:0; } .pv-history li { padding:4px 0; border-bottom:1px dashed var(--line); }
.min-w-0 { min-width:0; }
.note-row { display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.note-row:hover { background:var(--surface-2); color:inherit; }
.note-row.is-unread { background:rgba(61,92,153,.06); }
.note-ic { flex:none; display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; background:var(--surface-2); }
[data-bs-theme="dark"] .claim-pending_finance_verification { background:rgba(245,158,11,.2); color:#fcd34d; }
[data-bs-theme="dark"] .claim-confirmed { background:rgba(22,163,74,.22); color:#86efac; }
[data-bs-theme="dark"] .claim-rejected { background:rgba(220,38,38,.22); color:#fca5a5; }
[data-bs-theme="dark"] .claim-correction_requested { background:rgba(37,99,235,.25); color:#bfdbfe; }
[data-bs-theme="dark"] .nb-item.is-unread, [data-bs-theme="dark"] .note-row.is-unread { background:rgba(143,176,255,.08); }
[data-bs-theme="dark"] .live-banner { background:#e5e9f0; color:#111827; }

/* sticky table headers (item 3): the list scrolls inside its card, the header stays */
.table-sticky { max-height:calc(100vh - 210px); overflow:auto; overscroll-behavior:contain; }
.table-sticky > table > thead > tr > th { position:sticky; top:0; z-index:3; background:var(--bs-tertiary-bg);
  box-shadow:inset 0 -1px 0 var(--line); }
[data-bs-theme="dark"] .table-sticky > table > thead > tr > th { background:#1b2232; }
@media (max-width: 900px) { .table-sticky { max-height:calc(100vh - 150px); } }
@media print { .table-sticky { max-height:none !important; overflow:visible !important; }
  .table-sticky > table > thead > tr > th { position:static !important; } }

/* phones: KPI tiles two per row again (item 1) */
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .kpi-tile { padding:10px 11px; }
  .kpi-tile .kpi-label { font-size:.68rem; letter-spacing:.02em; line-height:1.25; }
  .kpi-tile .kpi-value { font-size:1.12rem; overflow-wrap:anywhere; }
  .kpi-tile .kpi-sub { font-size:.7rem; line-height:1.3; }
  .pv-totals .fs-5 { font-size:1rem !important; }
}
.issuer-row { border-top:1px solid var(--line); padding:10px 0; }
.issuer-row > summary { cursor:pointer; list-style:none; }
.issuer-row > summary::-webkit-details-marker { display:none; }
.issuer-logo { width:56px; height:40px; object-fit:contain; border-radius:6px; background:#fff; border:1px solid var(--line); padding:3px; flex:none; }
.issuer-logo-empty { display:inline-flex; align-items:center; justify-content:center; color:var(--ink-muted); }
.inv-locked .form-control, .inv-locked .form-select { background:var(--surface-2); }

/* ==========================================================================
   ERP v1.00 — vessel context bar, Fleet Overview, Companies, pick lists.
   Uses the theme variables (--surface, --line, --ink …) so light / dark
   follow automatically; the dark-only tweaks are at the end of this block.
   ========================================================================== */
.ctx-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:7px 16px; min-height:44px;
  background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1010;
}
.ctx-switch {
  display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:5px 12px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:.86rem; line-height:1.3;
}
.ctx-switch:hover, .ctx-switch[aria-expanded="true"] { border-color:var(--brand-navy); }
.ctx-switch:focus-visible { outline:2px solid var(--brand-navy); outline-offset:2px; }
.ctx-switch .ic { display:inline-flex; color:var(--brand-navy); }
.ctx-eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.ctx-value { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; }
.ctx-menu { min-width:260px; max-width:92vw; padding-top:8px; }
.ctx-list { max-height:min(52vh, 420px); overflow-y:auto; }
.ctx-menu .dropdown-item { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.86rem; }
.ctx-menu .dropdown-item.active, .ctx-menu .dropdown-item:active { background:var(--brand-navy); color:#fff; }
.ctx-menu .dropdown-item.is-inactive:not(.active) { color:var(--ink-muted); }
.ctx-n { font-size:.72rem; color:var(--ink-muted); }
.ctx-menu .dropdown-item.active .ctx-n { color:rgba(255,255,255,.8); }
.ctx-link { font-size:.8rem; font-weight:600; text-decoration:none; }
.ctx-company {
  margin-left:auto; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); border:1px solid var(--line); border-radius:6px; padding:2px 8px; white-space:nowrap;
}

.fleet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.fleet-card {
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; transition:border-color .12s ease, box-shadow .12s ease;
}
.fleet-card:hover { border-color:var(--brand-navy); box-shadow:0 3px 12px rgba(0,0,0,.07); }
.fleet-card.is-context { border-color:var(--brand-navy); box-shadow:inset 0 3px 0 var(--brand-navy); }
.fleet-card.is-inactive { opacity:.72; }
.fleet-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 14px 8px; }
.fleet-card-title { min-width:0; }
.fleet-name { font-size:1.05rem; font-weight:700; text-decoration:none; color:var(--heading) !important; overflow-wrap:anywhere; }
.fleet-meta { font-size:.76rem; color:var(--ink-muted); }
.fleet-card-badges { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.fleet-card-body { padding:0 14px 10px; display:flex; flex-direction:column; gap:10px; flex:1; }
.fleet-voyage { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.fleet-voyage-line { display:flex; justify-content:space-between; gap:10px; font-weight:600; font-size:.9rem; }
.fleet-voyage-line span { color:var(--ink-muted); font-weight:500; white-space:nowrap; }
.fleet-util { font-size:.74rem; color:var(--ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.fleet-facts { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.78rem; color:var(--ink-muted); }
.fleet-facts b { color:var(--ink); font-variant-numeric:tabular-nums; }
.fleet-laters { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; border-top:1px dashed var(--line); padding-top:8px; }
.fleet-laters-wide { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); border-top:0; padding-top:0; }
.fleet-later { display:flex; justify-content:space-between; gap:8px; font-size:.74rem; color:var(--ink-muted); cursor:help; }
.fleet-later-val { font-weight:600; }
.fleet-card-foot { display:flex; justify-content:space-between; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--surface-2); }
.fleet-table td { vertical-align:middle; }

.company-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.company-card {
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  text-decoration:none; color:var(--ink) !important; transition:border-color .12s ease, box-shadow .12s ease;
}
.company-card:hover { border-color:var(--brand-navy); box-shadow:0 3px 12px rgba(0,0,0,.07); filter:none !important; }
.company-card.is-inactive { opacity:.7; }
.company-code { font-size:.7rem; font-weight:700; letter-spacing:.09em; color:var(--ink-muted); }
.company-name { font-size:1.05rem; font-weight:700; color:var(--heading); }
.company-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px 12px; margin:12px 0 6px; }
.company-facts dt { font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); }
.company-facts dd { margin:0; font-size:.86rem; font-weight:600; }

.pick-list { border:1px solid var(--line); border-radius:8px; max-height:300px; overflow-y:auto; background:var(--surface); }
.pick-list-cols { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); max-height:360px; }
.pick-item { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:.84rem; cursor:pointer; border-bottom:1px solid var(--line); margin:0; }
.pick-item:hover { background:var(--surface-2); }
.pick-item .form-check-input { margin:0; flex:none; }
.pick-item.is-inactive { color:var(--ink-muted); }
.team-row { display:block; padding:10px 16px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink) !important; }
.team-row:hover { background:var(--surface-2); filter:none !important; }
.team-row.is-current { box-shadow:inset 3px 0 0 var(--brand-navy); background:var(--accent-soft); }
.team-row.is-inactive { opacity:.7; }

@media (max-width: 900px) {
  .ctx-bar { top:52px; padding:6px 12px; gap:10px; }
  .ctx-company { display:none; }
  .ctx-value { max-width:52vw; }
  .fleet-grid, .company-grid { grid-template-columns:1fr; }
  .company-facts { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ctx-link { font-size:.76rem; }
  .fleet-card-foot { flex-wrap:wrap; }
  .fleet-card-foot .btn, .fleet-card-foot form, .fleet-card-foot form .btn { flex:1; width:100%; }
}
@media print { .ctx-bar { display:none !important; } }

[data-bs-theme="dark"] .ctx-switch .ic { color:var(--brand-teal-light); }
[data-bs-theme="dark"] .ctx-menu .dropdown-item.active { background:var(--brand-navy); }
[data-bs-theme="dark"] .fleet-card:hover, [data-bs-theme="dark"] .company-card:hover { border-color:var(--brand-teal-light); }
[data-bs-theme="dark"] .fleet-card.is-context { border-color:var(--brand-teal-light); box-shadow:inset 0 3px 0 var(--brand-teal-light); }
[data-bs-theme="dark"] .team-row.is-current { box-shadow:inset 3px 0 0 var(--brand-teal-light); }
.fleet-laters-wide { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.fleet-laters-wide .fleet-later-val { white-space:nowrap; }

/* ERP v1.01 — approvals: status badges, chain timeline (colour + text, never colour alone) */
.apr-st { font-weight:600; border:1px solid transparent; }
.apr-st-draft { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.apr-st-pending { background:#fff4d6; color:#7a5200; border-color:#f0d58a; }
.apr-st-approved { background:#dcf5e7; color:#11603a; border-color:#a9dfc2; }
.apr-st-rejected { background:#fdecea; color:#9c2420; border-color:#f3c2bf; }
.apr-st-correction { background:#e9eefb; color:#2c4373; border-color:#c3d0ee; }
.apr-st-cancelled { background:var(--surface-2); color:var(--ink-muted); border-color:var(--line); }
.apr-chain { list-style:none; margin:0; padding:0; }
.apr-step { position:relative; display:flex; gap:12px; padding:0 0 14px 0; }
.apr-step:last-child { padding-bottom:0; }
.apr-step::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line); }
.apr-step:last-child::before { display:none; }
.apr-dot { flex:none; width:14px; height:14px; margin-top:4px; border-radius:50%; background:var(--surface); border:2px solid var(--line); position:relative; z-index:1; }
.apr-step-approved .apr-dot { background:#2fb675; border-color:#2fb675; }
.apr-step-rejected .apr-dot { background:#d9534f; border-color:#d9534f; }
.apr-step-correction .apr-dot { background:var(--brand-navy); border-color:var(--brand-navy); }
.apr-step-waiting .apr-dot { border-color:#e8a33d; box-shadow:0 0 0 3px rgba(232,163,61,.22); }
.apr-step-title { font-weight:600; font-size:.9rem; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.apr-step-skipped .apr-step-title, .apr-step-next .apr-step-title { color:var(--ink-muted); }
.apr-reason, .apr-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.apr-reason { font-size:.84rem; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:6px 8px; margin-top:4px; }
.apr-decide { border-color:var(--brand-navy); box-shadow:inset 0 3px 0 var(--brand-navy); }
.apr-mini { margin:10px 0 0; padding-left:20px; font-size:.84rem; }
.apr-steps .js-ref[hidden] { display:none; }
[data-bs-theme="dark"] .apr-st-pending { background:#4a3a10; color:#ffe2a1; border-color:#6b5520; }
[data-bs-theme="dark"] .apr-st-approved { background:#12402a; color:#b6f0d0; border-color:#1f6444; }
[data-bs-theme="dark"] .apr-st-rejected { background:#4d1b19; color:#ffc9c6; border-color:#7a2b28; }
[data-bs-theme="dark"] .apr-st-correction { background:#22335c; color:#d3def8; border-color:#34498a; }
[data-bs-theme="dark"] .apr-decide { border-color:var(--brand-teal-light); box-shadow:inset 0 3px 0 var(--brand-teal-light); }

/* ERP v1.02 — certificates and attached files */
.cert-st { font-weight:600; border:1px solid transparent; }
.cert-st-expired { background:#fdecea; color:#9c2420; border-color:#f3c2bf; }
.cert-st-due_30 { background:#fff4d6; color:#7a5200; border-color:#f0d58a; }
.cert-st-due_soon { background:#e9eefb; color:#2c4373; border-color:#c3d0ee; }
.cert-st-valid, .cert-st-no_expiry { background:#dcf5e7; color:#11603a; border-color:#a9dfc2; }
.cert-st-superseded { background:var(--surface-2); color:var(--ink-muted); border-color:var(--line); }
.cert-flag { font-weight:700; }
.cert-flag-bad { color:#b3261e; }
.cert-flag-warn { color:#8a5a00; }
.fleet-fact-link { text-decoration:none; cursor:pointer; }
.fleet-fact-link:hover .fleet-later-label { text-decoration:underline; }
.doc-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.86rem; overflow-wrap:anywhere; }
[data-bs-theme="dark"] .cert-st-expired { background:#4d1b19; color:#ffc9c6; border-color:#7a2b28; }
[data-bs-theme="dark"] .cert-st-due_30 { background:#4a3a10; color:#ffe2a1; border-color:#6b5520; }
[data-bs-theme="dark"] .cert-st-due_soon { background:#22335c; color:#d3def8; border-color:#34498a; }
[data-bs-theme="dark"] .cert-st-valid, [data-bs-theme="dark"] .cert-st-no_expiry { background:#12402a; color:#b6f0d0; border-color:#1f6444; }
[data-bs-theme="dark"] .cert-flag-bad { color:#ff9d97; }
[data-bs-theme="dark"] .cert-flag-warn { color:#ffd27a; }

/* ERP v1.03 — contracts */
.ct-st { font-weight:600; border:1px solid transparent; }
.ct-st-draft, .ct-st-terminated { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.ct-st-pending, .ct-st-expiring { background:#fff4d6; color:#7a5200; border-color:#f0d58a; }
.ct-st-active { background:#dcf5e7; color:#11603a; border-color:#a9dfc2; }
.ct-st-expired, .ct-st-rejected { background:#fdecea; color:#9c2420; border-color:#f3c2bf; }
.ct-schedule { max-height:420px; overflow-y:auto; }
[data-bs-theme="dark"] .ct-st-pending, [data-bs-theme="dark"] .ct-st-expiring { background:#4a3a10; color:#ffe2a1; border-color:#6b5520; }
[data-bs-theme="dark"] .ct-st-active { background:#12402a; color:#b6f0d0; border-color:#1f6444; }
[data-bs-theme="dark"] .ct-st-expired, [data-bs-theme="dark"] .ct-st-rejected { background:#4d1b19; color:#ffc9c6; border-color:#7a2b28; }

/* ERP v1.10 — general ledger */
.gl-num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.gl-heading td { background:var(--surface-2); font-weight:700; font-size:.82rem; letter-spacing:.02em; }
.gl-st { font-weight:600; border:1px solid transparent; }
.gl-st-draft, .gl-st-cancelled { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.gl-st-pending { background:#fff4d6; color:#7a5200; border-color:#f0d58a; }
.gl-st-posted { background:#dcf5e7; color:#11603a; border-color:#a9dfc2; }
.gl-st-rejected { background:#fdecea; color:#9c2420; border-color:#f3c2bf; }
.gl-lines td { padding:3px 4px; }
.gl-lines .gl-need { border-color:#e8a33d; box-shadow:0 0 0 2px rgba(232,163,61,.25); }
[data-bs-theme="dark"] .gl-st-pending { background:#4a3a10; color:#ffe2a1; border-color:#6b5520; }
[data-bs-theme="dark"] .gl-st-posted { background:#12402a; color:#b6f0d0; border-color:#1f6444; }
[data-bs-theme="dark"] .gl-st-rejected { background:#4d1b19; color:#ffc9c6; border-color:#7a2b28; }

/* ERP v1.15 — P&L reports */
.pl-table .pl-label { min-width:260px; position:sticky; left:0; background:var(--surface); z-index:1; }
.pl-table thead .pl-label { background:var(--surface-2); }
.pl-table .pl-section td { font-weight:700; border-top:1px solid var(--line); }
.pl-table .pl-result td { font-weight:800; background:var(--surface-2); }
.pl-table .pl-result .pl-label { background:var(--surface-2); }
.pl-table .pl-perday td { font-size:.8rem; color:var(--muted, #6b7280); font-style:italic; }
.pl-table .pl-group .pl-label { padding-left:1.4rem; }
.pl-link { color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
.pl-link:hover { color:var(--brand-navy, #1d3a6b); }

/* ERP v1.16 — budgets */
.bg-grid input.form-control { min-width:86px; padding:2px 6px; }
.bg-bar { display:inline-block; width:60px; height:6px; border-radius:3px; background:var(--surface-2); margin-right:6px; vertical-align:middle; overflow:hidden; }
.bg-bar span { display:block; height:100%; background:#3a9a6a; }
.bg-bar span.over { background:#c9443f; }

/* ERP v1.20 — crew assignment status (word + colour, never colour alone) */
.crew-st { border:1px solid transparent; font-weight:600; }
.crew-st-onboard { background:#dcf5e7; color:#11603a; border-color:#a9dfc2; }
.crew-st-planned { background:#e9eefb; color:#2c4373; border-color:#c3d0ee; }
.crew-st-signed_off, .crew-st-cancelled { background:var(--surface-2); color:var(--ink-muted); border-color:var(--line); }
[data-bs-theme="dark"] .crew-st-onboard { background:#12402a; color:#b6f0d0; border-color:#1f6444; }
[data-bs-theme="dark"] .crew-st-planned { background:#22335c; color:#d3def8; border-color:#34498a; }

/* ERP v1.62 — global search box in the sidebar */
.nav-search { position:relative; display:flex; align-items:center; gap:.45rem; margin:.1rem 0 .7rem; padding:.35rem .6rem;
  border-radius:.55rem; background:rgba(255,255,255,.14); color:rgba(255,255,255,.9); }
.nav-search:focus-within { background:rgba(255,255,255,.24); }
.nav-search .ic { display:flex; flex:0 0 auto; }
.nav-search-input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; color:#fff; font-size:.88rem; }
.nav-search-input::placeholder { color:rgba(255,255,255,.7); }
.mobile-nav .nav-search { background:var(--bs-tertiary-bg); color:var(--bs-body-color); }
.mobile-nav .nav-search-input { color:var(--bs-body-color); }
.mobile-nav .nav-search-input::placeholder { color:var(--bs-secondary-color); }
.nav-search-menu { position:absolute; left:0; right:-14rem; top:calc(100% + 4px); z-index:1080; background:var(--bs-body-bg); color:var(--bs-body-color);
  border:1px solid var(--bs-border-color); border-radius:.5rem; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18); max-height:70vh; overflow:auto; }
.mobile-nav .nav-search-menu { right:0; }
.nav-search-menu a { display:block; padding:.4rem .7rem; color:inherit; text-decoration:none; border-bottom:1px solid var(--bs-border-color-translucent); }
.nav-search-menu a:hover, .nav-search-menu a.is-active { background:var(--bs-tertiary-bg); }
.nav-search-menu .k { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--bs-secondary-color); }
.nav-search-menu .s { font-size:.78rem; color:var(--bs-secondary-color); }
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) .nav-search { background:transparent; padding-left:.35rem; }
html.sb-unpinned .app-sidebar:not(:hover):not(:focus-within) .nav-search-input { opacity:0; width:0; }

/* ==========================================================================
   ERP v1.66 — Dorado design system: semantic tones, badges, empty states.
   Six tones, one meaning each, in both themes (app/ui.py maps every status to one).
   Use the macros in templates/_ui.html; /help/ui-kit shows them all.
   ========================================================================== */
:root {
  --dz-ok: #157347;      --dz-ok-bg: #e3f4ea;      --dz-ok-line: #b6e2c6;
  --dz-info: #2c5aa0;    --dz-info-bg: #e7eefb;    --dz-info-line: #c3d3f1;
  --dz-warn: #8a5a00;    --dz-warn-bg: #fff3d6;    --dz-warn-line: #f6dc9c;
  --dz-bad: #b02a37;     --dz-bad-bg: #fbe7e9;     --dz-bad-line: #f1bcc2;
  --dz-muted: #5c6670;   --dz-muted-bg: #eef0f3;   --dz-muted-line: #d9dde3;
  --dz-radius: 10px;     --dz-radius-sm: 6px;      --dz-gap: 12px;
}
[data-bs-theme="dark"] {
  --dz-ok: #7fdca4;      --dz-ok-bg: rgba(46,160,90,.18);    --dz-ok-line: rgba(46,160,90,.35);
  --dz-info: #9dbcf2;    --dz-info-bg: rgba(80,130,220,.18); --dz-info-line: rgba(80,130,220,.35);
  --dz-warn: #f3c969;    --dz-warn-bg: rgba(230,170,40,.16); --dz-warn-line: rgba(230,170,40,.35);
  --dz-bad: #f19aa4;     --dz-bad-bg: rgba(220,70,90,.18);   --dz-bad-line: rgba(220,70,90,.38);
  --dz-muted: #a9b2bd;   --dz-muted-bg: rgba(160,170,185,.14); --dz-muted-line: rgba(160,170,185,.28);
}
.dz-badge { display:inline-block; padding:.22em .55em; font-size:.75em; font-weight:600; line-height:1.15; border-radius:999px;
  border:1px solid transparent; white-space:nowrap; vertical-align:baseline; }
.dz-ok { color:var(--dz-ok); background:var(--dz-ok-bg); border-color:var(--dz-ok-line); }
.dz-info { color:var(--dz-info); background:var(--dz-info-bg); border-color:var(--dz-info-line); }
.dz-warn { color:var(--dz-warn); background:var(--dz-warn-bg); border-color:var(--dz-warn-line); }
.dz-bad { color:var(--dz-bad); background:var(--dz-bad-bg); border-color:var(--dz-bad-line); }
.dz-muted { color:var(--dz-muted); background:var(--dz-muted-bg); border-color:var(--dz-muted-line); }
.dz-brand { color:#fff; background:var(--brand-gradient); }
.dz-empty { text-align:center; padding:28px 16px; border:1px dashed var(--line); border-radius:var(--dz-radius); background:var(--surface); }
.dz-empty-title { font-weight:600; }
.dz-empty-text { font-size:.875rem; color:var(--ink-muted); margin-top:4px; }
.dz-kpi-ok .kpi-value { color:var(--dz-ok); }
.dz-kpi-warn .kpi-value { color:var(--dz-warn); }
.dz-kpi-bad .kpi-value { color:var(--dz-bad); }
.dz-swatch { width:100%; height:44px; border-radius:var(--dz-radius-sm); border:1px solid var(--line); }
/* consistency in the dark theme for the older light badges used across the pages */
[data-bs-theme="dark"] .badge.bg-light, [data-bs-theme="dark"] .badge.text-bg-light { background:var(--surface-2) !important; color:var(--ink) !important; }
[data-bs-theme="dark"] .badge.bg-light.text-dark { color:var(--ink) !important; }