/* ==========================================================================
   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; }
@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; }