/* ===================================================================
   WyfoldShipping, Bulk Cargo Tracker

   The look, second pass.

   Will named four sites he likes on 1 September: uni-tankers.com ("I
   like this clean and straight forward"), scorpiotankers.com ("quiet
   without being too much"), feadship.nl ("will no doubt be impressive")
   and edmiston.com ("like the look of it"). He also sent his own
   dashboard picture on 28 July.

   The first pass kept the restraint of those sites and lost their
   presence, so it came out plain. What gives them presence is three
   things, and this pass does all three:

   1. Bold uppercase type with wide letter spacing. It is exactly what
      his own wordmark does, WYFOLD over SHIPPING, so the headings use
      Montserrat set the same way.
   2. Solid blocks of deep navy. The bar, the table headings and the
      port rail carry it, and the page stays light so a ledger read all
      day is easy on the eye.
   3. Real contrast between large and small type, and between the
      page and white cards that sit on it with a soft shadow.

   From his dashboard picture: vessel names in bold, Import and Export
   as outlined pills, and status as a coloured dot with its name.

   The card and form structure follows Leon's Daveng portal, recoloured
   for Wyfold. Every colour is a token below, so a darker theme like
   his dashboard picture is a change of values rather than a rewrite.

   Still meant to be done again properly once his designer delivers.
   =================================================================== */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../lib/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../lib/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Deep navy, the brand colour. The bar, table headings and rail. --- */
    --wf-navy:          #0f1b33;
    --wf-navy-mid:      #16284a;
    --wf-navy-soft:     #1f3358;
    --wf-navy-ink:      #14223f;

    /* --- The one accent, teal from his dashboard picture. --- */
    --wf-teal:          #14707b;
    --wf-teal-deep:     #0e565f;
    --wf-teal-bright:   #1f9aa8;
    --wf-teal-glow:     #4fc3d0;

    /* --- Ink, lines and ground. --- */
    --wf-text:          #1d2433;
    --wf-text-muted:    #637083;
    --wf-text-faint:    #97a1b0;
    --wf-line:          #e3e8f0;
    --wf-line-soft:     #eef2f7;
    --wf-surface:       #ffffff;
    --wf-canvas:        #f3f6fa;

    /* --- Soft tints for pills and notes. --- */
    --wf-tint-teal:     #e4f3f5;
    --wf-tint-amber:    #fdf1e3;
    --wf-tint-violet:   #efecfb;
    --wf-tint-green:    #e7f5ec;
    --wf-tint-red:      #fdecec;
    --wf-tint-slate:    #eef1f5;

    --wf-amber:         #c46a1c;
    --wf-violet:        #6b5bc4;
    --wf-green:         #2f8a55;
    --wf-slate:         #6b7686;
    --wf-danger:        #c9302c;

    /* --- Shape and depth. --- */
    --wf-radius:        10px;
    --wf-radius-sm:     6px;
    --wf-radius-pill:   999px;
    --wf-shadow:        0 1px 2px rgba(15, 27, 51, 0.05), 0 4px 16px rgba(15, 27, 51, 0.07);
    --wf-shadow-hover:  0 2px 4px rgba(15, 27, 51, 0.06), 0 12px 28px rgba(15, 27, 51, 0.13);
    --wf-shadow-lg:     0 18px 50px rgba(15, 27, 51, 0.22);

    /* --- Type. --- */
    --wf-font-head:     'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
    --wf-font-body:     'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

    /* --- The names the rest of this file already uses, kept pointing at the new
           values so the dashboard, rail and import styles below carry on working. --- */
    --accent:           var(--wf-teal);
    --accent-dark:      var(--wf-teal-deep);
    --accent-bright:    var(--wf-teal-glow);
    --accent-soft:      var(--wf-tint-teal);
    --navy:             var(--wf-navy);
    --navy-soft:        var(--wf-navy-soft);
    --ink:              var(--wf-text);
    --ink-soft:         var(--wf-text-muted);
    --ink-faint:        var(--wf-text-faint);
    --line:             var(--wf-line);
    --page:             var(--wf-canvas);

    /* --- Bootstrap follows the theme. --- */
    --bs-body-bg:       var(--wf-canvas);
    --bs-body-color:    var(--wf-text);
    --bs-border-color:  var(--wf-line);
    --bs-primary:       var(--wf-teal);
    --bs-link-color:    var(--wf-teal);
}

/* --- Base --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    margin-bottom: 64px;
    font-family: var(--wf-font-body);
    background-color: var(--wf-canvas);
    color: var(--wf-text);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--wf-teal);
}

a:hover {
    color: var(--wf-teal-deep);
}

/* --- The bar --- */
/* Deep navy with a faint lift towards the right, which is the solid colour block the
   reference sites lead with. */
.navbar-portal {
    background: linear-gradient(100deg, var(--wf-navy) 0%, var(--wf-navy-mid) 100%);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 58px;
    box-shadow: 0 2px 14px rgba(15, 27, 51, 0.18);
}

.navbar-portal-brand {
    color: #ffffff !important;
    font-family: var(--wf-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 12px 20px 12px 0;
}

.navbar-portal-brand:hover {
    color: var(--wf-teal-glow) !important;
}

.navbar-portal-link {
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: var(--wf-font-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 20px 14px !important;
    white-space: nowrap;
    position: relative;
}

.navbar-portal-link:hover,
.navbar-portal-link:focus {
    color: #ffffff !important;
}

/* A teal rule under the link you point at, rather than a filled box. */
.navbar-portal-link::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--wf-teal-glow);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.navbar-portal-link:hover::before,
.navbar-portal-link:focus::before {
    transform: scaleX(1);
}

.navbar-portal .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-portal .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-portal-dropdown {
    background-color: var(--wf-navy);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--wf-radius-sm);
    box-shadow: var(--wf-shadow-lg);
    min-width: 190px;
    padding: 6px 0;
    margin-top: 0 !important;
}

.navbar-portal-dropdown-item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.85rem;
    padding: 9px 18px;
}

.navbar-portal-dropdown-item:hover,
.navbar-portal-dropdown-item:focus {
    color: #ffffff !important;
    background-color: rgba(79, 195, 208, 0.12);
}

.navbar-portal-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.12);
}

.navbar-brand {
    white-space: normal;
    display: flex;
    align-items: center;
}

/* --- Headings --- */
/* The page heading is set like his wordmark: bold, uppercase and widely spaced, and
   large enough to anchor the page. */
h4 {
    font-family: var(--wf-font-head);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wf-navy);
    margin-bottom: 0.5rem;
}

h5 {
    font-family: var(--wf-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wf-navy);
}

h6 {
    font-family: var(--wf-font-head);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wf-navy);
}

/* Under the page heading, a short teal rule rather than a line across the page. Only the
   rule straight after a page heading gets this. A rule used anywhere else to divide one
   part of a page from the next stays a plain, faint line. */
main hr {
    border: 0;
    border-top: 1px solid var(--wf-line);
    opacity: 1;
    margin: 1.4rem 0;
}

main h4 + hr {
    border-top: 0;
    height: 2px;
    width: 44px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wf-teal-bright), var(--wf-teal-glow));
    margin: 0 0 1.6rem 0;
}

/* A small spaced label above a heading, as the reference sites do. */
.wf-eyebrow {
    display: block;
    font-family: var(--wf-font-head);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wf-teal);
    margin-bottom: 4px;
}

/* --- Focus --- */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--wf-teal-bright);
    box-shadow: 0 0 0 0.2rem rgba(31, 154, 168, 0.18);
    outline: none;
}

/* --- Buttons --- */
/* One primary button per page, teal with a soft glow that lifts when you point at it. */
.btn {
    border-radius: var(--wf-radius-sm);
    font-weight: 600;
    transition: all 0.18s ease;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 7px 15px;
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--wf-teal-bright), var(--wf-teal));
    border: none;
    box-shadow: 0 2px 8px rgba(20, 112, 123, 0.28);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--wf-teal), var(--wf-teal-deep));
    box-shadow: 0 4px 14px rgba(20, 112, 123, 0.36);
    transform: translateY(-1px);
}

.btn-secondary {
    color: var(--wf-text);
    background: var(--wf-surface);
    border: 1px solid var(--wf-line);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: var(--wf-teal-deep);
    background: var(--wf-tint-teal);
    border-color: rgba(20, 112, 123, 0.35);
}

.btn-danger {
    color: #ffffff;
    background: var(--wf-danger);
    border: 1px solid var(--wf-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    color: #ffffff;
    background: #a52622;
    border-color: #a52622;
}

/* --- Form controls --- */
.form-control,
.form-select {
    border-color: var(--wf-line);
    border-radius: var(--wf-radius-sm);
    font-size: 0.875rem;
    color: var(--wf-text);
    background-color: var(--wf-surface);
}

.form-label,
.col-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wf-text);
}

.form-check-input:checked {
    background-color: var(--wf-teal);
    border-color: var(--wf-teal);
}

.form-text {
    color: var(--wf-text-muted);
    font-size: 0.78rem;
}

.text-danger {
    color: var(--wf-danger) !important;
    font-size: 0.8rem;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Cards --- */
/* A white card that sits on the page with a soft shadow and no border. The heading is
   small, bold and spaced, with a short teal bar in front of it. */
.wf-card,
.card {
    background: var(--wf-surface);
    border: none;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}

.wf-card {
    padding: 24px;
    margin-bottom: 16px;
}

.wf-card-heading {
    font-family: var(--wf-font-head);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wf-navy);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wf-line);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-card-heading::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--wf-teal-glow), var(--wf-teal));
    border-radius: var(--wf-radius-pill);
    flex-shrink: 0;
}

/* One field: label, box, message, then any help line. */
.wf-field {
    margin-bottom: 16px;
}

.wf-field > .form-label {
    margin-bottom: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wf-text-muted);
}

.wf-field .form-text {
    margin-top: 5px;
}

/* The bar under the cards with Save and Cancel on the left and Delete on the right. */
.wf-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: var(--wf-surface);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}

.wf-capture {
    padding-bottom: 32px;
}

/* A line of plain fact inside a card: a muted label on the left, the value on the right. */
.wf-rows {
    margin: 0;
}

.wf-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--wf-line-soft);
    font-size: 0.875rem;
}

.wf-row:last-child {
    border-bottom: none;
}

.wf-row-label {
    color: var(--wf-text-muted);
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.wf-row-value {
    font-weight: 600;
    color: var(--wf-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.wf-row-value.is-empty {
    color: var(--wf-text-faint);
    font-weight: 400;
}

.wf-muted {
    color: var(--wf-text-muted);
    font-size: 0.82rem;
}

/* --- Pills and status --- */
/* Import and Export as outlined pills, the way his dashboard picture shows them. */
.wf-pill {
    display: inline-block;
    font-family: var(--wf-font-head);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 8px;
    border-radius: var(--wf-radius-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
}

.wf-pill.is-import  { color: var(--wf-teal);   background: var(--wf-tint-teal); }
.wf-pill.is-export  { color: var(--wf-amber);  background: var(--wf-tint-amber); }
.wf-pill.is-coastal { color: var(--wf-violet); background: var(--wf-tint-violet); }
.wf-pill.is-other   { color: var(--wf-slate);  background: var(--wf-tint-slate); }

/* Status as a coloured dot and its name. */
.wf-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wf-font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-text);
    white-space: nowrap;
}

.wf-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-slate);
    flex-shrink: 0;
}

.wf-status.is-fixed::before  { background: var(--wf-green); box-shadow: 0 0 0 3px rgba(47, 138, 85, 0.16); }
.wf-status.is-subs::before   { background: var(--wf-amber); box-shadow: 0 0 0 3px rgba(196, 106, 28, 0.16); }
.wf-status.is-cargo::before  { background: var(--wf-violet); }
.wf-status.is-failed::before { background: var(--wf-danger); }
.wf-status.is-failed         { color: var(--wf-text-muted); }

/* --- Tables --- */
/* A table never scrolls sideways. It takes the width of the page and fits its columns
   to it, cutting a long value with dots instead of pushing the table wider. The whole
   of every value is one click away in the detail box. Sideways scroll bars inside a
   table were what made the ledger hard to use. */
.table-wrapper,
.table-responsive {
    background: var(--wf-surface);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}

.table {
    font-size: 0.85rem;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    width: 100%;
}

.table.table-fit {
    table-layout: fixed;
}

/* The heading stays at the top of the window while you scroll the page, and the table
   has no scrolling box of its own. */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(90deg, var(--wf-navy) 0%, var(--wf-navy-mid) 100%);
    color: #ffffff;
    font-family: var(--wf-font-head);
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    padding: 11px 12px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table thead tr:first-child th:first-child { border-top-left-radius: var(--wf-radius); }
.table thead tr:first-child th:last-child  { border-top-right-radius: var(--wf-radius); }

.table thead th a {
    color: #ffffff;
    text-decoration: none;
}

.table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--wf-line-soft);
    border-bottom: none;
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--wf-surface);
}

.table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--wf-radius); }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--wf-radius); }

.table tbody td.cell-clip {
    max-width: 220px;
}

.table tbody td.cell-wrap {
    white-space: normal;
}

/* Figures line up down the column. */
.table td.cell-num,
.table th.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The vessel is what the eye looks for, so it is in bold. */
.table td.cell-vessel {
    font-weight: 700;
    color: var(--wf-navy);
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--wf-surface);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--wf-tint-teal) !important;
    color: var(--wf-text);
}

/* A row you can open. The whole row is the target, so it says so when you point at it. */
.table tbody tr.is-openable {
    cursor: pointer;
}

.table tbody tr.is-openable:hover > td {
    background-color: var(--wf-tint-teal) !important;
}

.table tbody tr.is-openable:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--wf-teal-bright);
}

.table tbody tr.is-openable:focus-visible > td {
    background-color: var(--wf-tint-teal) !important;
    outline: none;
}

/* --- Sorting --- */
.table.sortable thead th {
    cursor: pointer;
    user-select: none;
    padding-right: 24px;
}

.table.sortable thead th:hover {
    background: var(--wf-navy-soft);
}

.sortable th::after {
    content: '\2195';
    position: absolute;
    right: 9px;
    opacity: 0.4;
    font-size: 0.7rem;
}

.sortable th.sort-asc::after {
    content: '\2191';
    opacity: 1;
    color: var(--wf-teal-glow);
}

.sortable th.sort-desc::after {
    content: '\2193';
    opacity: 1;
    color: var(--wf-teal-glow);
}

.table.sortable thead th.no-sort {
    cursor: default;
    padding-right: 12px;
}

.sortable th.no-sort::after {
    content: '';
}

/* --- Row actions --- */
.table-action-link {
    color: var(--wf-teal);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.table-action-link:hover {
    color: var(--wf-teal-deep);
    text-decoration: underline;
}

.table-action-delete {
    color: var(--wf-danger);
}

.table-action-delete:hover {
    color: #a52622;
}

.action-icon {
    width: 18px;
    height: 18px;
    margin: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.action-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* --- Layout helpers --- */
.border-top {
    border-top: 1px solid var(--wf-line);
}

.border-bottom {
    border-bottom: 1px solid var(--wf-line);
}

.box-shadow {
    box-shadow: var(--wf-shadow);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 64px;
    font-size: 0.78rem;
    color: var(--wf-text-faint);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff;
    background-color: var(--wf-teal);
}

.alert {
    font-size: 0.9rem;
    border-radius: var(--wf-radius-sm);
}

.login-container {
    max-width: 400px;
    margin: 0 auto;
}

/* --- Modals --- */
.modal-content {
    border: none;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--wf-line);
    padding: 16px 22px;
}

.modal-title {
    font-family: var(--wf-font-head);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wf-navy);
}

.modal-footer {
    border-top: 1px solid var(--wf-line);
    padding: 12px 22px;
}

/* --- Capturing a fixture --- */

/* Will's shorthand, shown back to him in grey so he can see it was understood. */
.shorthand-marker {
    color: #8a9099;
    font-style: italic;
}

.form-control.is-shorthand {
    color: #8a9099;
    font-style: italic;
}

/* The card that appears when a fixture might already be in the ledger. Amber, with an
   amber bar on the heading, so it reads as a question to answer rather than an error. */
.wf-card.wf-card-warn {
    background: #fffaf2;
    box-shadow: 0 0 0 1px #f1dcbb, var(--wf-shadow);
}

.wf-card.wf-card-warn .wf-card-heading {
    color: #8a4b10;
    border-bottom-color: #f1dcbb;
}

.wf-card.wf-card-warn .wf-card-heading::before {
    background: linear-gradient(180deg, #f0a24a, var(--wf-amber));
}

/* A table sitting inside a card: no second shadow, just a hairline edge. */
.table-wrapper.wf-table-inset {
    box-shadow: 0 0 0 1px var(--wf-line);
}

/* A plain warning under a date box. It never blocks a save. */
.date-warning {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 8px 10px;
    border-left: 3px solid var(--wf-amber);
    border-radius: var(--wf-radius-sm);
    background: var(--wf-tint-amber);
    color: #8a4b10;
    font-size: 0.8rem;
}

/* Comments carry the corrections that matter, so they wrap in full rather than
   being cut off. */
.comments-cell {
    min-width: 180px;
}

/* --- The four grade colours ---
   Used on the dashboard grade filter, the port rail chips and the ledger grade
   column, and nowhere else. They are set here once so they can be changed in one
   place. Each one has to hold its own against white and against the dark port
   rail panel. */
:root {
    --grade-cpp: #1f9aa8;
    --grade-dpp: #d97828;
    --grade-chems: #7b6ad0;
    --grade-veg: #3d9a63;
    --grade-other: #98a0aa;

    /* The same four, lifted for the dark port rail panel. */
    --grade-cpp-on-dark: #4ecdd9;
    --grade-dpp-on-dark: #f0a45c;
    --grade-chems-on-dark: #a99af0;
    --grade-veg-on-dark: #6fc98f;
}

.grade-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
    background-color: var(--grade-other);
}

.grade-dot.grade-cpp { background-color: var(--grade-cpp); }
.grade-dot.grade-dpp { background-color: var(--grade-dpp); }
.grade-dot.grade-chems { background-color: var(--grade-chems); }
.grade-dot.grade-veg { background-color: var(--grade-veg); }
.grade-dot.grade-other { background-color: var(--grade-other); }

/* --- Dashboard --- */

.dash-head {
    margin-bottom: 18px;
}

.dash-window {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.dash-empty {
    background-color: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    padding: 20px 22px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.region-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #e3e6ea;
    margin-bottom: 18px;
    overflow-x: auto;
}

.region-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 10px 2px;
    color: var(--wf-text-muted);
    text-decoration: none;
    font-family: var(--wf-font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.region-tab:hover {
    color: var(--wf-navy);
}

.region-tab.is-on {
    color: var(--wf-navy);
    font-weight: 700;
    border-bottom-color: var(--wf-teal-bright);
}

.region-tab-count {
    background-color: #eef1f4;
    color: #566270;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.74rem;
    font-weight: 600;
}

.region-tab.is-on .region-tab-count {
    background-color: #d9f1f4;
    color: #15707a;
}

.dash-note {
    font-size: 0.82rem;
    color: #8a4b10;
    background-color: var(--wf-tint-amber);
    border: none;
    border-left: 3px solid var(--wf-amber);
    border-radius: var(--wf-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.dash-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-bottom: 20px;
}

.dash-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dash-filter-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #98a0aa;
    margin-right: 2px;
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--wf-radius-pill);
    font-size: 0.78rem;
    color: var(--wf-text-muted);
    text-decoration: none;
    background-color: var(--wf-surface);
    box-shadow: 0 0 0 1px var(--wf-line);
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.dash-chip:hover {
    background-color: #e4e8ec;
    color: var(--wf-navy);
}

.dash-chip.is-on {
    background: linear-gradient(135deg, var(--wf-navy-mid), var(--wf-navy));
    box-shadow: none;
    color: #ffffff;
    font-weight: 600;
}

.stat-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.stat-tile {
    flex: 1 1 180px;
    min-width: 170px;
    background-color: var(--wf-surface);
    border: none;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

/* A thin teal line across the top of each figure, the one touch of colour on it. */
.stat-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wf-teal-bright), var(--wf-teal-glow));
}

.stat-label {
    font-family: var(--wf-font-head);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wf-text-muted);
}

.stat-figure {
    font-family: var(--wf-font-head);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--wf-navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-unit {
    font-size: 0.78rem;
    font-weight: 400;
    color: #98a0aa;
    margin-left: 6px;
}

.stat-under {
    font-size: 0.76rem;
    color: #8a9099;
}

/* --- The port rail ---
   This panel keeps the dark background from the prototype Will sent on 28 July,
   because that is the picture he already has in his head. Everything else on the
   page stays white. The rail scrolls sideways inside its own box, so the page
   itself never scrolls sideways even on a phone. */
.rail-panel {
    background: linear-gradient(160deg, var(--wf-navy-mid) 0%, var(--wf-navy) 60%);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow-hover);
    padding: 20px 22px 22px 22px;
    margin-top: 22px;
    color: #e8ecf2;
}

.rail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.rail-title {
    margin: 0;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rail-key {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.rail-key-item {
    font-size: 0.72rem;
    color: #aab4c2;
    white-space: nowrap;
}

.rail-key-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
}

.rail-key-dot.grade-cpp { background-color: var(--grade-cpp-on-dark); }
.rail-key-dot.grade-dpp { background-color: var(--grade-dpp-on-dark); }
.rail-key-dot.grade-chems { background-color: var(--grade-chems-on-dark); }
.rail-key-dot.grade-veg { background-color: var(--grade-veg-on-dark); }
.rail-key-dot.grade-other { background-color: var(--grade-other); }

.rail-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 2px 0;
}

.rail-track {
    display: flex;
    align-items: stretch;
    min-width: min-content;
}

/* No horizontal padding on the port itself, so each stop's dashed border meets its
   neighbour and the line runs unbroken across the whole panel, as it does in the
   prototype. The breathing room goes on the chips and the name instead. */
.rail-port {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 168px;
}

/* Exports sit above the line, imports and coastal below it. Both sides are the
   same height so every port name lines up on one dashed line across the panel. */
.rail-above,
.rail-below {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 108px;
    padding-left: 10px;
    padding-right: 10px;
}

.rail-above {
    justify-content: flex-end;
    padding-bottom: 8px;
}

.rail-below {
    justify-content: flex-start;
    padding-top: 8px;
}

/* The dashed line runs along the whole panel, through every port stop. */
.rail-stop {
    border-top: 1px dashed #56637a;
    padding-top: 8px;
    text-align: center;
}

.rail-port-name {
    display: block;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.rail-port-count {
    display: block;
    color: #8d99ab;
    font-size: 0.7rem;
    white-space: nowrap;
}

/* A port with nothing against it is still shown, because an empty berth is worth
   seeing, but it sits back so the busy ports carry the eye. */
.rail-port.is-quiet {
    min-width: 118px;
}

.rail-port.is-quiet .rail-port-name {
    color: #8d99ab;
    font-weight: 500;
}

.rail-port.is-quiet .rail-port-count {
    color: #616e81;
}

.rail-chip {
    display: block;
    border: 1px solid;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.72rem;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease-in-out;
}

.rail-chip:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.rail-chip-qty {
    margin-left: 6px;
    opacity: 0.8;
}

.rail-chip.grade-cpp { color: var(--grade-cpp-on-dark); border-color: var(--grade-cpp-on-dark); }
.rail-chip.grade-dpp { color: var(--grade-dpp-on-dark); border-color: var(--grade-dpp-on-dark); }
.rail-chip.grade-chems { color: var(--grade-chems-on-dark); border-color: var(--grade-chems-on-dark); }
.rail-chip.grade-veg { color: var(--grade-veg-on-dark); border-color: var(--grade-veg-on-dark); }
.rail-chip.grade-other { color: #b9c2ce; border-color: #6c7889; }

.rail-chip-more {
    color: #aab4c2;
    border-color: #56637a;
    border-style: dashed;
    font-style: italic;
}

.rail-nothing {
    color: #8d99ab;
    font-size: 0.85rem;
    margin: 14px 0 4px 0;
}

.rail-footnote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #2c3546;
    font-size: 0.76rem;
    color: #8d99ab;
}

.rail-footnote div + div {
    margin-top: 4px;
}

.rail-footnote a {
    color: #4ecdd9;
}

/* --- Importing --- */

/* The three ways of bringing data in, each a card like the rest of the portal. */
.import-panel {
    background-color: var(--wf-surface);
    border: none;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    padding: 22px 22px 20px 22px;
}

.import-panel h6 {
    font-family: var(--wf-font-head);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wf-navy);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wf-line);
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-panel h6::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--wf-teal-glow), var(--wf-teal));
    border-radius: var(--wf-radius-pill);
    flex-shrink: 0;
}

.import-panel-line {
    font-size: 0.82rem;
    color: var(--wf-text-muted);
    margin-bottom: 14px;
}

.review-head {
    background-color: var(--wf-surface);
    border: none;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    padding: 14px 18px;
}

/* An import's own status on the Import page: committed, still a draft, or cancelled. */
.wf-status.is-committed::before { background: var(--wf-green); box-shadow: 0 0 0 3px rgba(47, 138, 85, 0.16); }
.wf-status.is-draft::before     { background: var(--wf-amber); box-shadow: 0 0 0 3px rgba(196, 106, 28, 0.16); }
.wf-status.is-cancelled::before { background: var(--wf-text-faint); }
.wf-status.is-cancelled         { color: var(--wf-text-muted); }

.review-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
}

.review-value {
    font-size: 0.95rem;
    font-weight: 600;
}

.review-notes {
    background-color: var(--wf-tint-teal);
    border: none;
    border-left: 3px solid var(--wf-teal-bright);
    border-radius: var(--wf-radius-sm);
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--wf-text);
}

.review-notes div + div {
    margin-top: 4px;
}

/* The review table fits the page like every other table. It shows the columns needed to
   decide on a line; every field is in the line box that opens when a line is clicked. */
.review-table td {
    vertical-align: middle;
}

.review-tick-cell {
    text-align: center;
}

/* What we found is the one column allowed two lines, because it is a sentence. Anything
   longer is cut with dots and is in full in the line box. */
.table tbody td.review-message-cell {
    white-space: normal;
    font-size: 0.78rem;
    color: var(--wf-text-muted);
    line-height: 1.35;
}

.table tbody td.review-message-cell {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-rownum {
    display: block;
    font-size: 0.7rem;
    color: var(--wf-text-faint);
    margin-top: 2px;
}

/* A line changed in the line box says so, so it is clear what will be posted. */
.review-changed {
    display: inline-block;
    font-family: var(--wf-font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wf-teal-deep);
    background: var(--wf-tint-teal);
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 3px;
}

.review-row.is-changed > td:first-child {
    box-shadow: inset 3px 0 0 var(--wf-teal-bright);
}

/* The top of the line box: what the import made of the line, and exactly what it read. */
.review-line-found {
    background: var(--wf-surface);
    border-radius: var(--wf-radius);
    box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.review-raw-full {
    color: var(--wf-text-muted);
    font-style: italic;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.row-status {
    font-family: var(--wf-font-head);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.row-status-new {
    color: var(--wf-green);
}

.row-status-update {
    color: #1a5fa8;
}

.row-status-duplicate {
    color: #8a6d00;
}

.row-status-could-not-read {
    color: var(--wf-danger);
}

.review-row.review-duplicate td,
.review-row.review-could-not-read td {
    background-color: #fdfaf3;
}

/* --- The PDF preview box --- */
/* Every PDF in the portal opens here first. The box is tall so a landscape page is
   readable without scrolling the box itself. */
.pdf-preview-body {
    position: relative;
    background-color: #f2f3f5;
    min-height: 60vh;
}

.pdf-preview-frame {
    width: 100%;
    height: 72vh;
    border: 0;
    display: block;
}

.pdf-preview-waiting {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

/* On a phone there is not enough height for a readable page, so the box fills the
   screen and the PDF gets all of it. */
@media (max-width: 767.98px) {
    .pdf-preview-frame {
        height: 68vh;
    }
}

/* A row action that changes data is a posted button, not a link. It is made to look
   exactly like the text links beside it so the row still reads as one line of actions. */
.table-action-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
}

.table-action-button:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.table-action-button.table-action-delete {
    color: #c9302c;
}

/* --- On a phone --- */
/* A wide table is unreadable on a phone even when it scrolls sideways: the ledger is
   13 columns, so one fixture takes three and a half screens. Below the tablet width each
   row becomes its own small card with the column name against each value. Empty values
   drop out, so a sparse fixture stays short. The markup is the same table either way. */
@media (max-width: 767.98px) {
    .table-wrapper.is-stacked {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    /* The table lets go of its fixed column widths on a phone. Without this the widths
       set for a desktop still squeeze every card into a thin strip. */
    .table-stack,
    .table-stack tbody {
        display: block;
        width: 100%;
    }

    .table-stack.table-fit {
        table-layout: auto;
    }

    .table-stack colgroup {
        display: none;
    }

    .table-stack tbody tr {
        width: 100%;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack tbody tr {
        display: block;
        background-color: #ffffff;
        border: 1px solid var(--line);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 4px 0;
    }

    /* The label sits in its own lane on the left and the value flows normally on the
       right, so a value made of more than one piece, such as the grade dot and the grade
       name, stays together instead of being pushed apart. */
    .table-stack tbody td {
        display: block;
        position: relative;
        border: 0;
        padding: 6px 12px 6px 116px;
        white-space: normal;
        text-align: right;
        min-height: 1.6em;
    }

    .table-stack tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 7px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-soft);
        text-align: left;
    }

    /* Nothing to say, so the line is not there at all. */
    .table-stack tbody td:empty {
        display: none;
    }

    /* A card is as tall as it needs to be, so nothing is cut short on a phone. */
    .table-stack tbody td.cell-clip {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    /* Two figures across rather than one, so the port rail is not a thousand pixels
       down the page. */
    .stat-tile {
        flex: 1 1 calc(50% - 7px);
        min-width: 0;
    }
}

/* The port rail is wider than the screen and scrolls sideways. A soft fade at each edge
   says so, instead of a chip that simply stops mid word. */
.rail-scroller {
    position: relative;
}

.rail-fade {
    position: relative;
}

.rail-fade::before,
.rail-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 1;
}

.rail-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--wf-navy), rgba(15, 27, 51, 0));
}

.rail-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--wf-navy), rgba(15, 27, 51, 0));
}

/* ===================================================================
   Components added with the second pass on the look
   =================================================================== */

/* --- The brand in the bar --- */
/* The shield from his logo, then WYFOLD spaced the way his wordmark is, with the name of
   the portal small underneath. */
.wf-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.wf-brand-mark {
    width: 30px;
    height: 30px;
    display: block;
    flex-shrink: 0;
}

.wf-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.wf-brand-name {
    font-family: var(--wf-font-head);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #ffffff;
}

.wf-brand-product {
    font-family: var(--wf-font-head);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wf-teal-glow);
    margin-top: 3px;
}

.wf-brand:hover .wf-brand-name {
    color: var(--wf-teal-glow);
}

/* --- The two row toolbar --- */
/* Search and every filter on the first row, the dates with print, Excel and Add on the
   second. On a desktop each row is one line and never wraps. */
.wf-toolbar {
    background: var(--wf-surface);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.wf-toolbar-row {
    display: grid;
    gap: 10px;
    align-items: end;
}

.wf-toolbar-filters {
    grid-template-columns: minmax(180px, 1.8fr) repeat(4, minmax(100px, 1fr)) repeat(2, minmax(110px, 1fr));
}

.wf-toolbar-foot {
    grid-template-columns: 1fr auto;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--wf-line-soft);
}

.wf-toolbar-dates {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.wf-toolbar-dates .wf-toolbar-field {
    width: 150px;
}

.wf-toolbar-buttons,
.wf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-toolbar-field {
    min-width: 0;
}

.wf-toolbar-field .form-control,
.wf-toolbar-field .form-select {
    width: 100%;
}

.filter-label {
    display: block;
    font-family: var(--wf-font-head);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}

/* Below a desktop width the filters fold into a tidy grid rather than one long line. */
@media (max-width: 1199.98px) {
    .wf-toolbar-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wf-toolbar-search {
        grid-column: span 4;
    }
}

@media (max-width: 767.98px) {
    .wf-toolbar-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wf-toolbar-search {
        grid-column: span 2;
    }

    .wf-toolbar-foot {
        grid-template-columns: 1fr;
    }

    .wf-toolbar-dates .wf-toolbar-field {
        width: calc(50% - 5px);
    }

    .wf-toolbar-actions {
        justify-content: flex-end;
    }
}

/* --- The fixture detail box --- */
.wf-detail-body {
    background: var(--wf-canvas);
    padding: 20px 22px;
}

.wf-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wf-detail-vessel {
    font-family: var(--wf-font-head);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--wf-navy);
    line-height: 1.15;
}

.wf-detail-route {
    margin-top: 4px;
    color: var(--wf-text-muted);
    font-size: 0.9rem;
}

.wf-detail-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
}

/* The four figures that matter most, across the top in a navy band. */
.wf-detail-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: linear-gradient(100deg, var(--wf-navy) 0%, var(--wf-navy-mid) 100%);
    border-radius: var(--wf-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.wf-detail-figure {
    padding: 14px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.wf-detail-figure:last-child {
    border-right: none;
}

.wf-detail-figure-label {
    display: block;
    font-family: var(--wf-font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wf-teal-glow);
    margin-bottom: 5px;
}

.wf-detail-figure-value {
    font-family: var(--wf-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.wf-detail-figure-value small {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

/* A card inside the detail box sits a little flatter, so the box does not stack shadow
   on shadow. */
.wf-card.wf-card-flat {
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
}

.wf-card.wf-card-flat .wf-card-heading {
    margin-bottom: 6px;
}

.wf-detail-notes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wf-line-soft);
    font-size: 0.875rem;
    white-space: pre-line;
}

.wf-detail-notes .wf-row-label {
    display: block;
    margin-bottom: 4px;
}

.wf-detail-foot {
    justify-content: space-between;
}

@media (max-width: 575.98px) {
    .wf-detail-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wf-detail-figure:nth-child(2) {
        border-right: none;
    }

    .wf-detail-figure:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wf-detail-badges {
        padding-top: 0;
    }
}

/* Will's shorthand written in help text, such as tbn or fxd. A quiet teal tag instead of
   the browser's bright pink, so the hint reads as a hint. */
code {
    font-family: var(--wf-font-head);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wf-teal-deep);
    background: var(--wf-tint-teal);
    padding: 1px 5px;
    border-radius: 4px;
}

/* A short form, such as a vessel or a charterer, sits in a narrower column so its card and
   its Save bar line up, instead of one small card stranded on a wide page. */
.wf-capture-narrow {
    max-width: 760px;
}

/* Active and inactive on a setup list, as a dot and a word like a fixture's status. */
.wf-status.is-active::before   { background: var(--wf-green); box-shadow: 0 0 0 3px rgba(47, 138, 85, 0.16); }
.wf-status.is-inactive::before { background: var(--wf-text-faint); }
.wf-status.is-inactive         { color: var(--wf-text-muted); }

/* A setup list toolbar is a single row: search and filters on the left, print, Excel and
   Add on the right. */
.wf-toolbar-single {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.wf-toolbar-single .wf-toolbar-left {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.wf-toolbar-single .wf-toolbar-search {
    width: 260px;
}

.wf-toolbar-single .wf-toolbar-select {
    width: 190px;
}

@media (max-width: 767.98px) {
    .wf-toolbar-single .wf-toolbar-search,
    .wf-toolbar-single .wf-toolbar-select {
        width: 100%;
    }

    .wf-toolbar-single .wf-toolbar-left {
        width: 100%;
    }
}

/* The port rail is a wide picture, so it does scroll sideways. Its scroll bar is dark and
   slim to sit inside the navy panel, instead of the browser's bright white bar. */
.rail-scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 195, 208, 0.45) rgba(255, 255, 255, 0.04);
}

.rail-scroller::-webkit-scrollbar {
    height: 8px;
}

.rail-scroller::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.rail-scroller::-webkit-scrollbar-thumb {
    background: rgba(79, 195, 208, 0.4);
    border-radius: 999px;
}

.rail-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 195, 208, 0.65);
}

@media (max-width: 767.98px) {
    .table-stack tbody td.review-message-cell {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .table-stack tbody td.review-tick-cell {
        text-align: right;
    }
}