/* Flex host for the app container (toolbar on top, stacked views below) */
#main {
    display        : flex;
    flex           : 1 1 100%;
    flex-direction : row;
    min-height     : 0;
}

/* Outer app container: no gap between the toolbar and the views stacked below it. Slim the toolbar
   buttons via the Bryntum button-height var. */
.app-container {
    --b-button-height       : 2.5em;
    /* Slims both toolbars (this one and the berth scheduler's own tbar) by ~25% */
    --toolbar-padding-block : 0.3em;

    gap                     : 0;
}

/* The top app toolbar, with a divider from the body below */
.app-toolbar {
    /* Faint neutral tint so the global toolbar reads as slightly elevated above the views below */
    min-block-size                     : 0;
    background                         : var(--b-neutral-95);
    border-block-end                   : 1px solid var(--b-grid-header-border-color);

    --b-button-group-padded-background : transparent;

    .b-toolbar-content {
        padding-block : var(--toolbar-padding-block);
    }

    /* Port label (anchor icon + port name) — single-port demo, no picker */

    .port-label {
        display     : flex;
        align-items : center;
        /* 0.45em at 1.15em font ≈ 0.52em — tighter than the original 0.55em for toolbar consistency, but gives the anchor logo room to breathe */
        gap         : 0.45em;
        font-weight : 500;
        font-size   : 1.15em;
        white-space : nowrap;

        .fa-anchor {
            opacity : 0.8;
        }
    }

    /* Date-nav group (‹ date ›): tight internal gap so the arrows hug the date as one control */

    .date-nav {
        gap : 0.25em;
    }

    /* Date navigation display */

    .date-display {
        font-weight : 600;
        font-size   : 0.95em;
        white-space : nowrap;
        opacity     : 0.8;
    }
}

/* View-switch (Ships/Cranes): roomier "padded" buttons, and the demo's own line-art ship/crane
   glyphs as icons (rendered via CSS mask so `currentColor` tints them to match the theme). */
.view-switch {
    .b-button {
        padding-block  : 0.35em;
        padding-inline : 1.1em;
    }

    .b-button-icon {
        display               : inline-block;
        width                 : 1.15em;
        height                : 1.15em;
        background-color      : currentColor;
        mask-repeat           : no-repeat;
        mask-position         : center;
        mask-size             : contain;
        -webkit-mask-repeat   : no-repeat;
        -webkit-mask-position : center;
        -webkit-mask-size     : contain;

        &::before {
            content : none;
        }
    }

    .icon-ship {
        mask-image         : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.189V14'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76'/%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3C/svg%3E");
        -webkit-mask-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.189V14'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76'/%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3C/svg%3E");
    }

    .icon-crane {
        mask-image         : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0.5 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='16.5' width='12.5' height='5' rx='2.5'/%3E%3Ccircle cx='5.25' cy='19' r='0.9' fill='black'/%3E%3Ccircle cx='8.25' cy='19' r='0.9' fill='black'/%3E%3Ccircle cx='11.25' cy='19' r='0.9' fill='black'/%3E%3Crect x='3.5' y='9.5' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10 10 20.5 3.5'/%3E%3Cpath d='M20.5 3.5V7'/%3E%3Cpath d='M20.5 7a1.2 1.2 0 1 0 0 2.4'/%3E%3C/svg%3E");
        -webkit-mask-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0.5 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='16.5' width='12.5' height='5' rx='2.5'/%3E%3Ccircle cx='5.25' cy='19' r='0.9' fill='black'/%3E%3Ccircle cx='8.25' cy='19' r='0.9' fill='black'/%3E%3Ccircle cx='11.25' cy='19' r='0.9' fill='black'/%3E%3Crect x='3.5' y='9.5' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10 10 20.5 3.5'/%3E%3Cpath d='M20.5 3.5V7'/%3E%3Cpath d='M20.5 7a1.2 1.2 0 1 0 0 2.4'/%3E%3C/svg%3E");
    }
}

/* Headerless dock panel hosting the segmented toggle + the two lists. Collapse (animated) is driven
   by the scheduler toolbar's panel toggle. A 1px inline-start border separates it from the body. */
.dock-strip-panel {
    --b-panel-padding   : 0;

    border-inline-start : 1px solid var(--b-grid-header-border-color);

    /* No header, so suppress the built-in collapse revealer strip — the toolbar button is the only
       expand affordance, and the panel should collapse fully to 0 width. */

    &.b-collapsed .b-panel-collapse-revealer {
        display : none;
    }
}

/* Segmented Cranes / At-anchor toggle in the panel's toolbar */
.dock-toggle-bar {
    --b-toolbar-background : transparent;

    padding                : 0.7em;
    border-block-end       : 1px solid var(--b-neutral-90);

    .dock-toggle {
        flex  : 1;
        width : 100%;

        /* The inner flex content element must fill the group, else the flex:1 buttons only grow
           within its natural (content) width and leave empty space on the right */

        .b-button-group-content {
            width : 100%;
            gap   : 0.5em;
        }

        .b-button {
            flex           : 1;
            font-size      : 0.85em;
            padding-block  : 0.8em;
            padding-inline : 1.5em;
            /* Individually rounded (buttonGroup normally strips inner corners for a segmented look) */
            border-radius  : 0.5em;

            /* Segmented labels must never truncate — let the panel/button carry the full text */

            .b-button-label {
                overflow      : visible;
                text-overflow : clip;
                white-space   : nowrap;
            }
        }

        /* Count badge (waiting-ship tally) on the "At anchor" tab — a circle tinted from the
           button's current text color, so it reads on both the pressed and unpressed states. */

        .tab-count {
            display             : inline-flex;
            align-items         : center;
            justify-content     : center;
            min-width           : 1.6em;
            height              : 1.6em;
            margin-inline-start : 0.5em;
            padding             : 0 0.4em;
            border-radius       : 1em;
            font-size           : 0.8em;
            font-weight         : 500;
            line-height         : 1;
            background          : color-mix(in srgb, currentColor 22%, transparent);
        }
    }
}

/* ── Shared crane glyph tile ──────────────────────────────────────────────────────────────────
   One tinted line-art tile, reused by the crane list, vessel tooltip, event badge, drag proxy and
   the crane-schedule column. Each surface adds `.crane-glyph` and only sets the size/radius/tint
   custom properties below (the badge also sets --crane-tile-color for readability on event bars).
   --crane-color carries the crane's palette hue (set inline from record.color). */
.crane-glyph {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    flex            : 0 0 auto;
    width           : var(--crane-tile-size, 2em);
    height          : var(--crane-tile-size, 2em);
    border-radius   : var(--crane-tile-radius, 0.5em);
    color           : var(--crane-tile-color, var(--crane-color, currentColor));
    background      : color-mix(in srgb, var(--crane-color, var(--b-neutral-50)) var(--crane-tile-tint, 16%), transparent);

    svg {
        display : block;
        width   : var(--crane-glyph-size, 1em);
        height  : var(--crane-glyph-size, 1em);
    }
}

/* ── Crane side panel list (Cranes tab) ── */
.crane-list {
    /* Item content: tinted glyph tile + name (fills) */

    .b-list-item-content {
        display     : flex;
        align-items : center;
        gap         : 0.85em;
    }

    .crane-tile {
        /* One fixed neutral color for the idle-fleet icons (per-crane colors read as status) */
        --crane-color       : var(--b-neutral-50);
        --crane-tile-size   : 2.4em;
        --crane-tile-radius : 0.6em;
        --crane-tile-tint   : 18%;
        --crane-glyph-size  : 1.3em;
    }

    .crane-name {
        flex          : 1;
        min-width     : 0;
        font-weight   : 500;
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
    }

    /* Items are drag handles with a subtle hover (theme-safe tint, not a fixed neutral shade) */

    .b-list-item {
        cursor  : grab;
        padding : 0.4em 0.9em;

        &:hover {
            background : var(--b-neutral-95);
        }
    }
}

/* Drag proxy: the glyph tile made solid (opaque tint over the panel bg) with a lift shadow for the
   "picked up" feel. pointer-events:none so it never intercepts the hit-test — otherwise the drop
   target under the cursor resolves to the proxy, not the vessel event, and the drop reads invalid. */
.crane-drag-proxy {
    --crane-tile-size   : 34px;
    --crane-tile-radius : 20%;
    --crane-glyph-size  : 18px;
    pointer-events      : none;
    background          : color-mix(in srgb, var(--crane-color, var(--b-neutral-50)) 24%, var(--b-panel-background));
    box-shadow          : 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* ── At-anchor side panel list (At anchor tab) ──────────────────────────────────────────────────
   Each waiting vessel is a card: an accent edge (its palette color), a ship glyph + name row, a
   carrier · dimensions spec line, and ETA + status chips. Whole card is a drag handle (AnchoredDrag). */
.anchored-list {
    padding : 0.5em;

    .b-list-item {
        cursor           : grab;
        padding          : 0;
        margin-block-end : 0.5em;
        border-radius    : 0.6em;
        overflow         : hidden;
        background       : var(--b-neutral-95);
        border           : 1px solid var(--b-neutral-90);
        transition       : background 0.15s, border-color 0.15s;

        &:hover {
            background   : var(--b-neutral-90);
            border-color : var(--b-neutral-80);
        }
    }

    .b-list-item-content {
        display : flex;
        gap     : 0;
    }

    /* Leading accent edge, tinted per-ship inline */

    .anchored-accent {
        flex       : 0 0 4px;
        align-self : stretch;
    }

    .anchored-body {
        flex           : 1;
        min-width      : 0;
        display        : flex;
        flex-direction : column;
        gap            : 0.4em;
        padding        : 0.65em 0.8em;
    }

    .anchored-head {
        display     : flex;
        align-items : center;
        gap         : 0.5em;
    }

    .anchored-photo {
        display         : inline-flex;
        align-items     : center;
        justify-content : center;
        flex            : 0 0 auto;
        width           : 2.4em;
        height          : 2.4em;
        border-radius   : 0.5em;
        overflow        : hidden;
        background      : color-mix(in srgb, var(--b-primary) 18%, transparent);

        img {
            width      : 100%;
            height     : 100%;
            object-fit : cover;
            display    : block;
        }

        svg {
            width  : 1em;
            height : 1em;
        }
    }

    .anchored-name {
        flex          : 1;
        min-width     : 0;
        font-weight   : 600;
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
    }

    .anchored-grip {
        opacity   : 0.35;
        font-size : 0.85em;
    }

    .anchored-spec {
        font-size     : 0.78em;
        opacity       : 0.7;
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
    }

    .anchored-chips {
        display : flex;
        gap     : 0.4em;
    }

    .anchored-chip {
        display       : inline-flex;
        align-items   : center;
        gap           : 0.35em;
        font-size     : 0.72em;
        font-weight   : 500;
        padding       : 0.2em 0.55em;
        border-radius : 1em;
        background    : var(--b-neutral-95);
    }

    .anchored-chip-eta {
        color      : var(--b-primary);
        background : color-mix(in srgb, var(--b-primary) 14%, transparent);
    }
}

/* Ghost drop-preview for a scheduling drag, filled live by AnchoredDrag#updateGhost. pointer-events:none
   keeps DragHelper's dropTargetSelector check — it reads event.target — on the schedule underneath. */
.anchored-drag-proxy {
    /* --accent = ship color (set inline). --ghost derives from it here so `.b-invalid` can flip it. */
    --ghost        : var(--accent, var(--b-primary));

    width          : 17em;
    /* width AND height are set inline from the vessel's bollard footprint and its call duration, so
       padding/border must stay inside that box for the ghost to match what the drop reserves. */
    box-sizing     : border-box;
    overflow       : hidden;
    padding        : 1em 1.1em;
    display        : flex;
    flex-direction : column;
    gap            : 0.7em;
    pointer-events : none;
    border         : 2px dashed color-mix(in srgb, var(--ghost) 60%, transparent);
    border-radius  : 0.7em;
    color          : var(--b-widget-color);
    background     : repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 9px,
        color-mix(in srgb, var(--ghost) 9%, transparent) 9px,
        color-mix(in srgb, var(--ghost) 9%, transparent) 18px
    ),
    color-mix(in srgb, var(--b-panel-background) 90%, transparent);

    .ghost-title {
        display     : flex;
        align-items : center;
        gap         : 0.5em;
        font-weight : 700;
        font-size   : 1.05em;
        color       : color-mix(in srgb, var(--ghost) 75%, var(--b-widget-color));
    }

    .ghost-icon svg {
        display : block;
        width   : 1.15em;
        height  : 1.15em;
    }

    /* Fit / overlap validity pill */

    .ghost-fit {
        display       : inline-flex;
        align-items   : center;
        gap           : 0.45em;
        align-self    : flex-start;
        font-size     : 0.85em;
        font-weight   : 600;
        padding       : 0.3em 0.7em;
        border-radius : 1em;
        color         : var(--b-color-green);
        background    : color-mix(in srgb, var(--b-color-green) 16%, transparent);
    }

    .ghost-schedule {
        display        : flex;
        flex-direction : column;
        gap            : 0.25em;
        font-size      : 0.85em;
    }

    .ghost-row {
        display     : flex;
        align-items : baseline;
        gap         : 0.6em;
    }

    .ghost-row-label {
        width   : 2.4em;
        opacity : 0.65;
    }

    .ghost-row-time {
        font-weight : 600;
    }

    .ghost-row-note {
        opacity   : 0.5;
        font-size : 0.9em;
    }

    .ghost-hint {
        font-size : 0.75em;
        opacity   : 0.5;
    }

    /* Invalid drop — red ghost + red fit pill */

    &.b-invalid {
        --ghost : var(--b-color-red);

        .ghost-fit {
            color      : var(--b-color-red);
            background : color-mix(in srgb, var(--b-color-red) 16%, transparent);
        }
    }
}

/* ── Crane schedule (cranes = resource rows, ship events on their assigned crane) ── */
.crane-schedule {
    /* Resource cell hosts the stacked utilization card (head row + progress bar) */

    .crane-resource-cell {
        display     : flex;
        align-items : center;
    }

    .crane-res {
        flex                  : 1;
        min-width             : 0;
        display               : grid;
        gap                   : 0.5em;
        grid-template-columns : auto 1fr;
    }

    .crane-res-tile {
        --crane-tile-size   : 2.2em;
        --crane-tile-radius : 0.5em;
        --crane-tile-tint   : 16%;
        --crane-glyph-size  : 1.2em;
        grid-column         : 1;
        grid-row            : 1 / 3;
    }

    .crane-res-name {
        flex          : 1;
        min-width     : 0;
        font-weight   : 500;
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
        grid-column   : 2;
    }

    /* Utilization row under the name, left-aligned with the name's left edge (indented past the
       icon): a short fixed-width bar followed immediately by the % label. */

    .crane-util-pct {
        font-size   : 0.82em;
        font-weight : 600;
        opacity     : 0.75;
        grid-column : 2;
        display     : none;
    }

    /* Progress bar: a short fixed-width muted track with a tinted fill (blue → orange when loaded) */

    .crane-util-track {
        flex          : 0 0 70px;
        height        : 5px;
        border-radius : 3px;
        overflow      : hidden;
        background    : var(--b-neutral-90);
        grid-column   : 2;
    }

    .crane-util-fill {
        height        : 100%;
        border-radius : 3px;
        background    : var(--b-primary);
        transition    : width 0.25s ease;

        &.is-high {
            background : var(--b-color-orange);
        }
    }

    /* Card-style event bar: ship glyph + name + berth chip + call window */

    .b-sch-event {
        border-radius : 0.5em;
        padding-block : 0.4em;
    }

    .crane-event {
        display     : flex;
        align-items : center;
        gap         : 0.6em;
        height      : 100%;
        overflow    : hidden;
    }

    /* Ship glyph in a soft tinted disc */

    .crane-event-icon {
        display         : inline-flex;
        align-items     : center;
        justify-content : center;
        flex            : 0 0 auto;
        width           : 2.5em;
        height          : 2.5em;
        border-radius   : 50%;
        background      : color-mix(in srgb, var(--b-primary) 22%, transparent);

        svg {
            width  : 1.6em;
            height : 1.6em;
        }
    }

    .crane-event-body {
        display        : flex;
        flex-direction : column;
        gap            : 0.25em;
        min-width      : 0;
    }

    .crane-event-name {
        font-weight   : 600;
        font-size     : 1.05em;
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
    }

    .crane-event-meta {
        display     : flex;
        align-items : center;
        gap         : 0.5em;
        font-size   : 0.85em;
    }

    /* Berth chip */

    .crane-event-berth {
        padding-block  : 0.05em;
        padding-inline : 0.5em;
        border-radius  : 0.75em;
        font-weight    : 600;
        background     : color-mix(in srgb, currentColor 15%, transparent);
        white-space    : nowrap;
    }

    .crane-event-time {
        display     : inline-flex;
        align-items : center;
        gap         : 0.35em;
        opacity     : 0.8;
        white-space : nowrap;

        .fa {
            font-size : 0.9em;
        }
    }
}

/* Critical: allow events to overflow their assigned column so vessels can
   span multiple bollard columns based on their LOA */
.pbp-port-berth-planner {

    --b-sch-event-padding-inline    : 0;
    --b-column-lines-tick-color     : rgba(128, 128, 128, 0.06);
    --b-column-lines-major-color    : rgba(128, 128, 128, 0.1);
    --b-column-lines-resource-color : rgba(128, 128, 128, 0.08);

    .b-top-toolbar {
        min-block-size : 0;

        .b-toolbar-content {
            padding-block : var(--toolbar-padding-block);
        }
    }

    /* Compact button */

    .compact-btn {
        .b-button-inner {
            gap : 0.4em;
        }
    }

    .b-grid-splitter {
        background : var(--b-grid-header-border-color);
    }

    .b-sch-event-wrap {
        /* Declared here, not on the demo root: `eventColor` works by redefining --b-primary on this
           wrap (.b-color-<name>), and a custom property resolves against the element it is declared
           on — so putting these at the root would freeze the theme accent and lose per-vessel colour.

           --vessel-bar is the vessel's accent pulled toward the surface, so the bar reads as a wash of
           that accent in either theme (pale over a light surface, deep over a dark one). --vessel-ink
           pulls it toward the surface's *opposite* instead, so text, milestone dots and badges stay
           legible on that bar without a per-theme override. */
        --vessel-bar : color-mix(in srgb, var(--b-primary) 65%, var(--b-neutral-100));
        --vessel-ink : color-mix(in srgb, var(--b-primary) 70%, var(--b-opposite));

        overflow     : visible !important;
        z-index      : 5;
    }

    .b-sch-event {
        overflow      : visible !important;
        border-radius : 0.25em;
        font-size     : 0.75em;
        line-height   : 1.3;
        background    : color-mix(in srgb, var(--vessel-bar) 30%, transparent);
        border        : none;
        border-top    : 3px solid var(--vessel-ink);
        color         : var(--b-neutral-10);

        &:hover {
            background : color-mix(in srgb, var(--vessel-bar) 38%, transparent);
        }
    }

    /* Invalid drop — overlap detected */

    .b-sch-event-wrap.b-drag-invalid {
        cursor : not-allowed;

        .b-sch-event {
            background       : color-mix(in srgb, var(--b-color-red) 25%, transparent) !important;
            border-top-color : var(--b-color-red) !important;
        }
    }

    .b-sch-event-wrap.b-active .b-sch-event,
    .b-sch-event-wrap.b-selected .b-sch-event {
        background   : color-mix(in srgb, var(--vessel-bar) 45%, transparent) !important;
        border-color : color-mix(in srgb, var(--b-primary) 40%, transparent) !important;
        outline      : none !important;
        box-shadow   : none !important;
    }

    /* Crane-drag hover: a discrete ring on the vessel bar the crane will land on — green when it can
       take the crane, red when it already has it / is at the cap. Subtle (thin, low-opacity) so it
       reads as a hint, not a selection. !important beats the active/selected box-shadow:none above. */

    .b-sch-event.crane-drop-target {
        box-shadow : inset 0 0 0 1.5px color-mix(in srgb, var(--b-color-green) 55%, transparent) !important;
    }

    .b-sch-event.crane-drop-invalid {
        box-shadow : inset 0 0 0 1.5px color-mix(in srgb, var(--b-color-red) 55%, transparent) !important;

        /* Scope the not-allowed cursor to an active DragHelper drag (body gains b-drag-helper-active),
           so it can never persist past the drag even if the class briefly lingers on the bar. */

        body.b-drag-helper-active & {
            cursor : not-allowed;
        }
    }

    /* Time axis labels */

    .b-vertical-time-axis-column {
        .b-sch-header-text {
            font-size   : 0.75em;
            font-weight : 400;
        }

        .b-sch-header-time-axis-cell:not(.b-current-tick) .b-sch-header-text {
            color      : var(--b-neutral-50);
            transition : color 0.2s;
        }

        .b-current-tick .b-sch-header-text {
            font-weight : 600;
        }

        /* Accent time-axis labels spanned by a hovered/selected/dragged/edited event */

        .b-sch-header-time-axis-cell.time-active .b-sch-header-text {
            color       : var(--b-primary);
            font-weight : 600;
        }

        /* Overlapping (invalid) position — turn red like the bollard strip */

        .b-sch-header-time-axis-cell.time-invalid .b-sch-header-text {
            color       : var(--b-color-red);
            font-weight : 600;
        }
    }

    /* Time axis tick cells: dimmed by default, current tick inherits feature styling */

    .b-sch-header-time-axis-cell:not(.b-current-tick) {
        color      : var(--b-neutral-50);
        transition : background 0.15s, color 0.15s;
    }

    /* Berth group headers */

    .b-group-header {
        font-weight    : 700;
        font-size      : 0.85em;
        letter-spacing : 0.03em;
    }

    /* Current time line */

    .b-sch-current-time {
        --b-current-time-color      : color-mix(in srgb, var(--b-color-teal) 50%, transparent);
        --b-time-range-line-width   : 1px;
        --b-time-range-line-opacity : 0.7;
        z-index                     : 10;
    }

    .b-time-ranges-header-canvas .b-sch-current-time {
        display : none !important;
    }

    /* Dot on the current time line */

    .b-timeline-sub-grid .b-sch-current-time::after {
        content            : '';
        position           : absolute;
        inset-inline-start : 0;
        inset-block-start  : -4px;
        width              : 8px;
        height             : 8px;
        border-radius      : 50%;
        background         : color-mix(in srgb, var(--b-color-teal) 80%, var(--b-neutral-100));
    }

    .b-resource-header {
        max-height : 5em;

        .b-resource-header-cell {
            border-inline-color : transparent;
        }

        /* Dim non-highlighted bollard columns when any highlighting (valid or invalid) is active */

        &:has(.bollard-active),
        &:has(.bollard-invalid) {
            .b-resource-header-cell:not(.bollard-active):not(.bollard-invalid) {
                color : var(--b-neutral-50);

                .bollard-dot {
                    opacity : 0.25;
                }
            }
        }

        /* Subtle "pre-active" hover on a bollard column header — only when nothing is highlighted */

        &:not(:has(.bollard-active)):not(:has(.bollard-invalid)) {
            .b-resource-header-cell:hover {
                .bollard-dot {
                    background : color-mix(in srgb, var(--b-primary) 70%, transparent);
                }

                .bollard-header span {
                    color : color-mix(in srgb, var(--b-neutral-50) 55%, var(--b-primary));
                }
            }
        }
    }

    /* ── Vessel event content ── */

    .vessel-event {
        --text-color : color-mix(in srgb, var(--b-primary), var(--b-opposite) 30%);

        .b-sch-event-content {
            flex-direction : column;
            align-items    : flex-start;
            line-height    : 1.2;
        }

        .vessel-header {
            display          : flex;
            align-items      : flex-start;
            justify-content  : space-between;
            gap              : 1em;
            width            : 100%;
            margin-block-end : 0.3em;
        }

        .vessel-name {
            display     : flex;
            align-items : center;
            gap         : 0.3em;
            font-weight : 500;
            font-size   : 1.2em;
            color       : var(--text-color);
        }

        .vessel-icon {
            flex-shrink       : 0;
            width             : 1.4em;
            height            : 1.4em;
            margin-inline-end : 0.25em;
            vertical-align    : -0.1em;
            opacity           : 0.7;
        }

        .vessel-stats {
            display             : flex;
            flex-direction      : column;
            align-items         : flex-end;
            gap                 : 0.15em;
            margin-inline-start : auto;
            font-size           : 0.9em;
            line-height         : 1.3;
            color               : var(--vessel-ink);
            opacity             : 0.75;
            letter-spacing      : 0.02em;
            white-space         : nowrap;
            flex-shrink         : 0;
        }
    }

    /* ── Schedule timeline inside events ── */

    .schedule-list {
        display              : flex;
        flex-direction       : column;
        gap                  : 0.6em;
        margin-block-start   : auto;
        padding-inline-start : 0.2em;
    }

    .schedule-row {
        display     : flex;
        align-items : center;
        gap         : 0.5em;
        padding     : 0.15em 0.3em;
    }

    .schedule-dot {
        --dot-color   : var(--vessel-ink);
        width         : 6px;
        height        : 6px;
        box-sizing    : border-box;
        border-radius : 50%;
        background    : var(--dot-color);
        flex-shrink   : 0;
    }

    /* Cargo-work milestones (ETS/ETC) render HOLLOW (a ring), distinguishing the work window from the
       solid berth-window dots (ETA/ETB/ETD) — two different classes of event on the call timeline. */

    .schedule-dot-hollow {
        background : transparent;
        border     : 1.5px solid var(--dot-color);
    }

    .schedule-label {
        font-weight : 500;
        color       : var(--text-color);
        width       : 2.5em;
        flex-shrink : 0;
        translate   : 0 1px;
    }

    .schedule-time {
        font-weight : 500;
        color       : var(--text-color);
        translate   : 0 1px;
    }

    /* Voyage + IMO pill badges */

    .vessel-tags {
        display            : flex;
        justify-content    : flex-end;
        gap                : 0.35em;
        margin-block-start : 0.3em;
        color              : var(--vessel-ink);
    }

    .vessel-tag {
        display         : inline-flex;
        align-items     : center;
        justify-content : center;
        font-size       : 0.95em;
        font-weight     : 600;
        padding         : 0.2em 0.6em;
        border-radius   : 0.25em;
        background      : color-mix(in srgb, currentColor 20%, transparent);
        letter-spacing  : 0.03em;
    }

    /* ── Assigned cranes badge — pinned to the event's bottom-right corner ── */

    .vessel-cranes {
        position         : absolute;
        /* Align with the card content: flush to the content's right edge (like the stats), and a
           matching 1em up from the bottom (same as the content's block padding / schedule row). */
        inset-block-end  : 1em;
        inset-inline-end : 0;
        display          : flex;
        align-items      : center;
        gap              : 0.3em;
        z-index          : 2;
        pointer-events   : none;

        /* Each assigned crane is a glyph tile matching the vessel-tag badges above it: the event's accent
           color + a `currentColor 20%` fill (so the pills read as part of the card, not the crane's own hue). */

        .crane-icon {
            --crane-tile-size   : 1.9em;
            --crane-tile-radius : 20%;
            --crane-glyph-size  : 1em;

            color               : var(--vessel-ink);
            background          : color-mix(in srgb, currentColor 20%, transparent);
        }
    }

    /* ── Bollard header styling ── */

    .bollard-header {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        gap            : 0.4em;
        padding        : 0.4em 0 0.25em;

        span {
            font-size   : 0.75em;
            font-weight : 400;
            color       : var(--b-neutral-50);
            transition  : color 0.15s;
        }
    }

    .bollard-dot {
        width         : 0.45em;
        height        : 0.45em;
        border-radius : 50%;
        background    : color-mix(in srgb, var(--b-primary) 40%, transparent);
        transition    : background 0.15s, opacity 0.15s;
    }

    /* Active bollard — cell has the class, light up dot + number inside */

    .bollard-active {
        .bollard-dot {
            background : var(--b-primary);
        }

        .bollard-header span {
            color : inherit;
        }
    }

    /* Invalid bollard — overlapping drop target, light up dot + number in red */

    .bollard-invalid {
        .bollard-dot {
            background : var(--b-color-red);
        }

        .bollard-header span {
            color : var(--b-color-red);
        }
    }

    /* Toggle horizontal tick lines off (vertical mode: tick lines are horizontal) */

    &.pbp-hide-tick-lines {
        .b-column-line:not(.b-resource-column-line),
        .b-column-line-major {
            display : none !important;
        }
    }

    /* Hide the per-event call timeline */

    &.pbp-hide-vessel-info {
        .schedule-list {
            display : none;
        }
    }
}

/* ── Vessel Tooltip ── */
.pbp-vessel-tooltip {
    --vt-bg         : var(--b-panel-background);
    --vt-text       : var(--b-widget-color);
    --vt-secondary  : color-mix(in srgb, var(--vt-text) 55%, transparent);
    --vt-muted      : color-mix(in srgb, var(--vt-text) 35%, transparent);
    --vt-border     : color-mix(in srgb, var(--vt-text) 8%, transparent);
    --vt-accent     : var(--b-color-orange);
    --vt-accent-bg  : color-mix(in srgb, var(--vt-accent) 8%, transparent);
    --vt-accent-bdr : color-mix(in srgb, var(--vt-accent) 15%, transparent);

    width           : 20em;
    border-radius   : 0.75em;

    .b-panel-body-wrap {
        padding : 0;
    }

    .b-panel-content {
        padding : 0;
        gap     : 0;
        display : block;
    }
}

/* Hero image */
.vt-hero {
    position : relative;
    height   : 9em;
    overflow : hidden;

    img {
        width      : 100%;
        height     : 100%;
        object-fit : cover;
    }
}

.vt-hero-overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(to top, var(--vt-bg), color-mix(in srgb, var(--vt-bg) 40%, transparent), transparent);
}

.vt-hero-content {
    position        : absolute;
    inset-block-end : 0.75em;
    inset-inline    : 1em;
}

.vt-vessel-name {
    font-size   : 1.05em;
    font-weight : 600;
    color       : var(--vt-text);
    line-height : 1.3;
}

.vt-badges {
    display            : flex;
    align-items        : center;
    gap                : 0.5em;
    margin-block-start : 0.35em;
}

.vt-badge {
    font-size     : 0.625em;
    padding       : 0.15em 0.5em;
    border-radius : 9999px;
    border        : 1px solid var(--vt-accent-bdr);
    background    : var(--vt-accent-bg);
    color         : var(--vt-accent);
}

.vt-callsign {
    font-size : 0.625em;
    color     : var(--vt-secondary);
}

/* Stats grid */
.vt-stats {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 0.75em;
    padding               : 1em 1em 0.75em;
}

.vt-stat-label {
    font-size        : 0.5625em;
    text-transform   : uppercase;
    letter-spacing   : 0.12em;
    color            : var(--vt-secondary);
    margin-block-end : 0.15em;
}

.vt-stat-value {
    font-size   : 0.75em;
    font-weight : 500;
    color       : var(--vt-text);
}

/* Route */
.vt-route {
    display     : flex;
    align-items : center;
    gap         : 0.625em;
    padding     : 0.75em 1em;
}

.vt-route-icon {
    width          : 0.875em;
    height         : 0.875em;
    flex-shrink    : 0;
    display        : inline-flex;
    vertical-align : middle;

    svg {
        width  : 100%;
        height : 100%;
        color  : var(--vt-secondary);
    }
}

.vt-route-text {
    font-size     : 0.6875em;
    color         : var(--vt-secondary);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* Assigned cranes */
.vt-cranes {
    padding            : 0.75em 1em;
    border-block-start : 1px solid var(--vt-border);
}

.vt-cranes-header {
    display          : flex;
    align-items      : center;
    gap              : 0.375em;
    margin-block-end : 0.75em;
}

.vt-cranes-title {
    font-size      : 0.625em;
    text-transform : uppercase;
    letter-spacing : 0.15em;
    color          : var(--vt-secondary);
    font-weight    : 500;
}

.vt-crane-list {
    display   : flex;
    flex-wrap : wrap;
    gap       : 0.75em 1em;
}

.vt-crane {
    display     : flex;
    align-items : center;
    gap         : 0.5em;
}

.vt-crane-tile {
    /* Tint by the vessel's event accent (set on the tooltip root in onBeforeShow), not the crane's
       own color — assigned cranes share the ship's hue rather than a per-crane status color. */
    --crane-color       : var(--vt-accent, currentColor);
    --crane-tile-size   : 1.9em;
    --crane-tile-radius : 0.5em;
    --crane-tile-tint   : 16%;
    --crane-glyph-size  : 1.1em;
}

.vt-crane-name {
    font-size   : 0.75em;
    font-weight : 500;
    color       : color-mix(in srgb, var(--vt-text) 78%, transparent);
}

/* Schedule */
.vt-schedule {
    padding : 0.75em 1em 1em;
}

.vt-schedule-header {
    display          : flex;
    align-items      : center;
    gap              : 0.375em;
    margin-block-end : 0.75em;
}

.vt-schedule-icon {
    width          : 0.75em;
    height         : 0.75em;
    display        : inline-flex;
    vertical-align : middle;

    svg {
        width  : 100%;
        height : 100%;
        color  : var(--vt-secondary);
    }
}

.vt-schedule-title {
    font-size      : 0.625em;
    text-transform : uppercase;
    letter-spacing : 0.15em;
    color          : var(--vt-secondary);
    font-weight    : 500;
}

/* Timeline */
.vt-timeline {
    display              : flex;
    flex-direction       : column;
    gap                  : 0.25em;
    padding-inline-start : 0.25em;
}

.vt-timeline-row {
    display     : flex;
    align-items : center;
    gap         : 0.6em;
    padding     : 0.3em 0;

    &:not(:first-child) .vt-timeline-dot::before {
        content            : '';
        position           : absolute;
        width              : 1px;
        background         : var(--vt-border);
        inset-inline-start : calc(50% - 0.5px);
        inset-block-end    : calc(100% + 0.25em);
        height             : 0.8em;
    }
}

.vt-timeline-dot {
    width         : 0.375em;
    height        : 0.375em;
    border-radius : 50%;
    background    : var(--vt-accent);
    flex-shrink   : 0;
    position      : relative;
}

.vt-timeline-label {
    font-size      : 0.625em;
    text-transform : uppercase;
    letter-spacing : 0.08em;
    color          : var(--vt-secondary);
    min-width      : 3em;
    white-space    : nowrap;
    translate      : 0 1px;
}

.vt-timeline-value {
    font-size : 0.6875em;
    color     : color-mix(in srgb, var(--vt-text) 70%, transparent);
    translate : 0 1px;
}