/* /Components/Pages/Agents/AgentNominationSlotCard.razor.rz.scp.css */
[b-lkptqqarcx] .slot-card {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--pf-border);
    border-left: 4px solid transparent;
    color: var(--pf-text);
    background: var(--pf-surface-1);
    box-shadow: 0 1px 4px rgba(18, 48, 75, 0.08);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

[b-lkptqqarcx] .slot-card:hover {
    background-color: var(--pf-surface-2) !important;
    box-shadow: 0 6px 16px rgba(18, 48, 75, 0.14);
    border-color: var(--pf-border-strong);
    transform: translateY(-1px);
}

[b-lkptqqarcx] .permanent-slot {
    background-color: var(--pf-slot-permanent-bg);
    border-left-color: var(--pf-slot-permanent-border);
}

[b-lkptqqarcx] .terminal-slot {
    background-color: var(--pf-slot-terminal-bg);
    border-left-color: var(--pf-slot-terminal-border);
}

[b-lkptqqarcx] .opportunistic-slot {
    background-color: var(--pf-slot-opportunistic-bg);
    border-left-color: var(--pf-slot-opportunistic-border);
}

[b-lkptqqarcx] .priority-slot {
    background-color: var(--pf-slot-priority-bg);
    border-left-color: var(--pf-slot-priority-border);
}

[b-lkptqqarcx] .reserved-slot {
    background-color: var(--pf-slot-reserved-bg);
    border-left-color: var(--pf-slot-reserved-border);
}

/* A typed card's background is the frozen palette, which is declared identical
   in light and dark — so the card stays light in dark mode and its ink has to
   stay dark with it. Without this, --pf-text goes pale and the whole card reads
   blank. Same reasoning as .pf-slot-grid__row in portflow.css. */
[b-lkptqqarcx] .permanent-slot,
[b-lkptqqarcx] .terminal-slot,
[b-lkptqqarcx] .opportunistic-slot,
[b-lkptqqarcx] .priority-slot,
[b-lkptqqarcx] .reserved-slot {
    color: var(--pf-slot-fg);
}

[b-lkptqqarcx] .permanent-slot .agent-slot-card,
[b-lkptqqarcx] .terminal-slot .agent-slot-card,
[b-lkptqqarcx] .opportunistic-slot .agent-slot-card,
[b-lkptqqarcx] .priority-slot .agent-slot-card,
[b-lkptqqarcx] .reserved-slot .agent-slot-card,
[b-lkptqqarcx] .permanent-slot .agent-slot-card__cell,
[b-lkptqqarcx] .terminal-slot .agent-slot-card__cell,
[b-lkptqqarcx] .opportunistic-slot .agent-slot-card__cell,
[b-lkptqqarcx] .priority-slot .agent-slot-card__cell,
[b-lkptqqarcx] .reserved-slot .agent-slot-card__cell,
[b-lkptqqarcx] .permanent-slot .agent-slot-card__mobile-label,
[b-lkptqqarcx] .terminal-slot .agent-slot-card__mobile-label,
[b-lkptqqarcx] .opportunistic-slot .agent-slot-card__mobile-label,
[b-lkptqqarcx] .priority-slot .agent-slot-card__mobile-label,
[b-lkptqqarcx] .reserved-slot .agent-slot-card__mobile-label,
[b-lkptqqarcx] .permanent-slot .agent-slot-card__bi,
[b-lkptqqarcx] .terminal-slot .agent-slot-card__bi,
[b-lkptqqarcx] .opportunistic-slot .agent-slot-card__bi,
[b-lkptqqarcx] .priority-slot .agent-slot-card__bi,
[b-lkptqqarcx] .reserved-slot .agent-slot-card__bi {
    color: var(--pf-slot-fg);
}

/* Hover must not repaint a typed card's frozen background. */
[b-lkptqqarcx] .slot-card.permanent-slot:hover    { background-color: var(--pf-slot-permanent-hover) !important; }
[b-lkptqqarcx] .slot-card.terminal-slot:hover     { background-color: var(--pf-slot-terminal-hover) !important; }
[b-lkptqqarcx] .slot-card.opportunistic-slot:hover{ background-color: var(--pf-slot-opportunistic-hover) !important; }
[b-lkptqqarcx] .slot-card.priority-slot:hover     { background-color: var(--pf-slot-priority-hover) !important; }
[b-lkptqqarcx] .slot-card.reserved-slot:hover     { background-color: var(--pf-slot-reserved-hover) !important; }

[b-lkptqqarcx] .agent-slot-card__content {
    padding: 16px;
}

[b-lkptqqarcx] .agent-slot-card {
    color: var(--pf-text);
}

[b-lkptqqarcx] .agent-slot-card__row {
    display: grid;
    grid-template-columns: 1fr .9fr 1.3fr 1fr 1.2fr 1.25fr 1fr 1.1fr .9fr 1.15fr 1.05fr 1.15fr;
    gap: .75rem;
    align-items: center;
    font-size: .85rem;
}

[b-lkptqqarcx] .agent-slot-card__cell {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pf-text);
}

[b-lkptqqarcx] .agent-slot-card__icon {
    height: 1rem;
    width: auto;
    vertical-align: text-bottom;
    margin-right: .2rem;
}

[b-lkptqqarcx] .agent-slot-card__bi {
    color: var(--pf-text-muted);
    margin-right: .2rem;
}

[b-lkptqqarcx] .text-primary-emphasis,
[b-lkptqqarcx] .text-body-tertiary {
    color: var(--pf-text) !important;
}

[b-lkptqqarcx] .badge.text-bg-warning {
    color: #3f2f00 !important;
    background-color: #ffe082 !important;
}

[b-lkptqqarcx] .agent-slot-card__action {
    justify-self: end;
}

[b-lkptqqarcx] .agent-slot-card__status-badge {
    margin-left: .35rem;
    vertical-align: middle;
}

[b-lkptqqarcx] .agent-slot-card__cell--action {
    display: flex;
    justify-content: flex-end;
}

[b-lkptqqarcx] .agent-slot-card__mobile-label {
    display: none;
    color: var(--pf-text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: .35rem;
}

@media (max-width: 991.98px) {
    [b-lkptqqarcx] .agent-slot-card__row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    [b-lkptqqarcx] .agent-slot-card__cell {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    [b-lkptqqarcx] .agent-slot-card__mobile-label {
        display: inline;
    }

    [b-lkptqqarcx] .agent-slot-card__cell--action {
        justify-content: flex-start;
    }

    [b-lkptqqarcx] .agent-slot-card__action {
        width: 100%;
    }
}
/* /Components/Pages/Agents/Agents_Dashboard.razor.rz.scp.css */
/* Panel chrome (the .agd-panel container, its header band, and the neutral
   greys/borders inside the card grids and decision strip) now runs on the
   shared --pf-* tokens, so it follows light/dark like the rest of the app.
   Header family per modifier: --status is danger, --weather is info,
   --allocated is success, the base header is brand.

   Everything else in this file — the 3D gradient buttons (.agd-btn-action,
   .agd-row-btn--*), the title banner (.agd-banner, a page-level identity
   band rather than a panel), the status pills (.agd-pill--*), the risk
   badges (.agd-risk-badge--*), the decision-card approve/reject accents, and
   the pastel-blue berth sub-header (.agd-alloc-berth-header) — is left
   hardcoded on purpose: those carry their own brand/status identity rather
   than being interchangeable panel chrome, and converting them is out of
   scope here. */

/* ── Agents Dashboard — 3D look & feel (recipe from VisualBerthPlanner) ── */

.agd-shell[b-7jxjp1id44] {
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 1.5rem;
}

/* ── Title banner (signature slate gradient) ───────────────────────── */
.agd-banner[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.1rem;
    margin-bottom: .85rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 40%, #1a3550 70%, #12304b 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -1px 0 rgba(0,0,0,0.25),
                0 4px 10px rgba(0,0,0,0.28);
    color: #fff;
}

.agd-banner__title[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.agd-banner__icon[b-7jxjp1id44] {
    filter: brightness(0) invert(1);
}

.agd-banner__controls[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.agd-banner__port[b-7jxjp1id44] {
    font-weight: 700;
    color: #d7e7f5;
}

/* ── Primary 3D action button (mirrors .vbp-btn-action) ────────────── */
.agd-btn-action[b-7jxjp1id44] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 1rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #1a4a72 0%, #12304b 100%);
    box-shadow: 0 3px 0 #0a1f33, 0 1px 4px rgba(18,48,75,.35);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s, background .12s;
}

.agd-btn-action:hover:not(:disabled)[b-7jxjp1id44] {
    background: linear-gradient(180deg, #2a5a82 0%, #22405b 100%);
    transform: translateY(-1px);
}

.agd-btn-action:active:not(:disabled)[b-7jxjp1id44] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0a1f33;
}

.agd-btn-action:disabled[b-7jxjp1id44] {
    opacity: .7;
    cursor: not-allowed;
}

/* ── Panels ─────────────────────────────────────────────────────────── */
.agd-panels-row[b-7jxjp1id44] {
    display: grid;
    gap: .85rem;
    margin-bottom: .85rem;
}

/* Row 1: Port Status + Weather side by side, stretched to equal height. */
.agd-panels-row--top[b-7jxjp1id44] {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

@media (max-width: 700px) {
    .agd-panels-row--top[b-7jxjp1id44] {
        grid-template-columns: 1fr;
    }
}

.agd-panel[b-7jxjp1id44] {
    display: flex;
    flex-direction: column;
    background: var(--pf-panel-bg);
    color: var(--pf-text);
    border: 1px solid var(--pf-panel-border);
    border-radius: 12px;
    box-shadow: var(--pf-panel-shadow);
    overflow: hidden;
}

.agd-panel--inport[b-7jxjp1id44] {
    margin-bottom: .85rem;
}

.agd-panel--allocated[b-7jxjp1id44] {
    margin-bottom: 1rem;
}

/* Standard panel header band: token bg/fg, family accent on top. Layout
   (padding, font-size, gap) is unchanged from the original 3D recipe. */
.agd-panel__header[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .9rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: var(--pf-font-head);
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    border-bottom: 1px solid var(--pf-border);
    box-shadow: none;
    --pf-fam: var(--pf-fam-brand);
}

/* Per the task's mapping: status -> danger, weather -> info, allocated -> success. */
.agd-panel__header--status[b-7jxjp1id44] {
    --pf-fam: var(--pf-fam-danger);
}

.agd-panel__header--weather[b-7jxjp1id44] {
    --pf-fam: var(--pf-fam-info);
}

.agd-panel__header--allocated[b-7jxjp1id44] {
    --pf-fam: var(--pf-fam-success);
}

.agd-panel__badge[b-7jxjp1id44] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 .4rem;
    margin-left: .35rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--pf-text);
    background: var(--pf-surface-1);
    border-radius: 50px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}

.agd-panel__body[b-7jxjp1id44] {
    flex: 1;
    padding: .5rem .6rem;
    background: var(--pf-surface-0);
    overflow-x: auto;
}

.agd-panel__body--flush[b-7jxjp1id44] {
    padding: .35rem;
}

/* ── Card grids (Vessels In Port + Allocated Vessels) ───────────────── */
/* Column templates shared by each panel's header strip and card data rows. */
.agd-panel--allocated[b-7jxjp1id44] {
    --agd-alloc-cols: .7fr 1.9fr 1.5fr 1fr 1.5fr .6fr 1.1fr 1.1fr;
}

/* In-port grid: 9 columns — data plus a trailing Action column so the
   buttons live on the same row. Template is inlined (no CSS variable) so
   the grid always spans the full panel width. */

.agd-alloc-header[b-7jxjp1id44] {
    display: grid;
    grid-template-columns: var(--agd-alloc-cols);
    gap: .5rem;
    padding: .4rem .6rem;
    margin-bottom: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pf-text);
    background: var(--pf-surface-1);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
}

.agd-alloc-header--inport[b-7jxjp1id44] {
    grid-template-columns: .8fr 1.4fr 1fr 1.3fr .8fr 1.1fr 1.1fr 1fr 1.7fr;
}

/* Berth heading — pastel blue with the 3D inset recipe, dark legible text. */
.agd-alloc-berth-header[b-7jxjp1id44] {
    padding: .42rem .6rem;
    margin: .4rem 0 .3rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #12304b;
    background: linear-gradient(180deg, #e3f0fa 0%, #cfe3f4 55%, #b9d4ea 100%);
    border: 1px solid #a5c6e0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -1px 0 rgba(18,48,75,0.15),
                0 2px 4px rgba(18,48,75,0.12);
    border-radius: 6px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* One card per slot: data row on top, tinted action strip below. */
.agd-alloc-card[b-7jxjp1id44] {
    background: var(--pf-card-bg);
    color: var(--pf-text);
    border: 1px solid var(--pf-card-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .3rem;
    box-shadow: 0 1px 3px rgba(18,48,75,0.06);
    transition: box-shadow .12s;
}

.agd-alloc-card:hover[b-7jxjp1id44] {
    box-shadow: 0 3px 8px rgba(18,48,75,0.12);
}

.agd-alloc-card__data[b-7jxjp1id44] {
    display: grid;
    grid-template-columns: var(--agd-alloc-cols);
    gap: .5rem;
    align-items: center;
    padding: .32rem .6rem;
    font-size: .78rem;
    line-height: 1.25;
}

.agd-alloc-card__data--inport[b-7jxjp1id44] {
    grid-template-columns: .8fr 1.4fr 1fr 1.3fr .8fr 1.1fr 1.1fr 1fr 1.7fr;
}

/* "Berth open" filler stretches across the remaining columns. */
.agd-alloc-cell--span[b-7jxjp1id44] {
    grid-column: 2 / -1;
}

/* Action buttons inside the data row, aligned to the right edge. */
.agd-alloc-cell--actions[b-7jxjp1id44] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

.agd-alloc-card__actions[b-7jxjp1id44] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem .6rem .3rem;
    border-top: 1px solid var(--pf-border-subtle);
}

/* Alternating card colour — the whole card (both rows), not the strip. */
.agd-alloc-card--alt[b-7jxjp1id44] {
    background: var(--pf-surface-2);
}

.agd-alloc-cell[b-7jxjp1id44] {
    min-width: 0;
}

/* Field labels shown only when the grid collapses on smaller screens. */
.agd-alloc-label[b-7jxjp1id44] {
    display: none;
    color: var(--pf-text);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: .35rem;
}

@media (max-width: 1199.98px) {
    .agd-alloc-header[b-7jxjp1id44] {
        display: none;
    }

    .agd-alloc-card__data[b-7jxjp1id44] {
        grid-template-columns: 1fr 1fr;
        gap: .25rem .75rem;
    }

    .agd-alloc-label[b-7jxjp1id44] {
        display: inline;
    }

    .agd-alloc-cell--actions[b-7jxjp1id44] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 700px) {
    .agd-alloc-card__data[b-7jxjp1id44] {
        grid-template-columns: 1fr;
    }

    .agd-alloc-cell--span[b-7jxjp1id44] {
        grid-column: 1 / -1;
    }
}

/* ── Compact 3D row buttons (mirrors .avp-row-btn) ─────────────────── */
.agd-row-btn[b-7jxjp1id44] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 .7rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .08s, box-shadow .08s;
}

.agd-row-btn:active:not(:disabled)[b-7jxjp1id44] {
    transform: translateY(2px);
}

.agd-row-btn:disabled[b-7jxjp1id44] {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.35);
}

/* Compact variant for the action strip below each Allocated Vessels row. */
.agd-row-btn--sm[b-7jxjp1id44] {
    height: 22px;
    padding: 0 .55rem;
    font-size: .66rem;
    border-radius: 4px;
}

.agd-row-btn--primary[b-7jxjp1id44] {
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 55%, #1a3550 100%);
    box-shadow: 0 3px 0 #0d253a, 0 1px 4px rgba(18,48,75,.30);
}

.agd-row-btn--primary:hover:not(:disabled)[b-7jxjp1id44] {
    background: linear-gradient(180deg, #5a7b94 0%, #3c5d75 55%, #2a4560 100%);
}

.agd-row-btn--primary:active:not(:disabled)[b-7jxjp1id44] {
    box-shadow: 0 1px 0 #0d253a;
}

.agd-row-btn--teal[b-7jxjp1id44] {
    background: linear-gradient(180deg, #22a3b5 0%, #0e7490 55%, #0a5a70 100%);
    box-shadow: 0 3px 0 #06414f, 0 1px 4px rgba(14,116,144,.30);
}

.agd-row-btn--teal:hover:not(:disabled)[b-7jxjp1id44] {
    background: linear-gradient(180deg, #32b3c5 0%, #1e84a0 55%, #1a6a80 100%);
}

.agd-row-btn--teal:active:not(:disabled)[b-7jxjp1id44] {
    box-shadow: 0 1px 0 #06414f;
}

.agd-row-btn--green[b-7jxjp1id44] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    box-shadow: 0 3px 0 #166534, 0 1px 4px rgba(22,163,74,.30);
}

.agd-row-btn--green:hover:not(:disabled)[b-7jxjp1id44] {
    background: linear-gradient(180deg, #34d399 0%, #22c55e 55%, #16a34a 100%);
}

.agd-row-btn--green:active:not(:disabled)[b-7jxjp1id44] {
    box-shadow: 0 1px 0 #166534;
}

.agd-row-btn--muted[b-7jxjp1id44] {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 55%, #4b5563 100%);
    box-shadow: 0 3px 0 #374151, 0 1px 4px rgba(75,85,99,.25);
}

/* ── Status / pending pills ─────────────────────────────────────────── */
.agd-pill[b-7jxjp1id44] {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 50px;
    white-space: nowrap;
}

.agd-pill--arrived[b-7jxjp1id44] {
    color: #14532d;
    background: #bbf7d0;
    border: 1px solid #4ade80;
}

.agd-pill--pending[b-7jxjp1id44] {
    color: #2f4f4f;
    background: #fff3cd;
    border: 1px solid #f0c97a;
}

.agd-pill--operator[b-7jxjp1id44] {
    color: #7c2d12;
    background: #ffedd5;
    border: 1px solid #fb923c;
}

.agd-pill--vts[b-7jxjp1id44] {
    color: #1e3a5f;
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

/* ── Risk badges (Shipping List risk rating) ────────────────────────── */
.agd-risk-badge[b-7jxjp1id44] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: .14rem .55rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    border-radius: 50px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),
                inset 0 -1px 0 rgba(0,0,0,0.2),
                0 1px 3px rgba(0,0,0,.2);
    white-space: nowrap;
}

.agd-risk-badge--red[b-7jxjp1id44] {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
    border: 1px solid #991b1b;
}

.agd-risk-badge--orange[b-7jxjp1id44] {
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 60%, #c2410c 100%);
    border: 1px solid #9a3412;
}

.agd-risk-badge--green[b-7jxjp1id44] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
    border: 1px solid #166534;
}

/* ── Recent decisions strip ─────────────────────────────────────────── */
.agd-decisions[b-7jxjp1id44] {
    margin-bottom: .85rem;
}

.agd-decisions__head[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 700;
    color: var(--pf-text-muted);
    margin-bottom: .4rem;
}

.agd-decisions__dismiss-all[b-7jxjp1id44] {
    background: none;
    border: none;
    color: var(--pf-brand);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.agd-decisions__dismiss-all:hover[b-7jxjp1id44] {
    text-decoration: underline;
}

.agd-decisions__row[b-7jxjp1id44] {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.agd-decision-card[b-7jxjp1id44] {
    position: relative;
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 300px;
    background: var(--pf-card-bg);
    color: var(--pf-text);
    border-radius: 8px;
    border: 1px solid var(--pf-card-border);
    box-shadow: 0 1px 4px rgba(18,48,75,0.08);
    padding: .55rem .7rem .5rem;
}

.agd-decision-card--approved[b-7jxjp1id44] {
    border-left: 4px solid #16a34a;
}

.agd-decision-card--rejected[b-7jxjp1id44] {
    border-left: 4px solid #dc2626;
}

.agd-decision-card__close[b-7jxjp1id44] {
    position: absolute;
    top: .3rem;
    right: .3rem;
    background: none;
    border: none;
    color: var(--pf-text-subtle);
    font-size: .68rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem;
}

.agd-decision-card__close:hover[b-7jxjp1id44] {
    color: var(--pf-text-muted);
}

.agd-decision-card__title[b-7jxjp1id44] {
    font-size: .8rem;
    font-weight: 700;
    padding-right: 1rem;
}

.agd-decision-card--approved .agd-decision-card__title[b-7jxjp1id44] {
    color: #166534;
}

.agd-decision-card--rejected .agd-decision-card__title[b-7jxjp1id44] {
    color: #991b1b;
}

.agd-decision-card__body[b-7jxjp1id44] {
    font-size: .75rem;
    color: var(--pf-text-muted);
    margin-top: .2rem;
}

.agd-decision-card__meta[b-7jxjp1id44] {
    display: flex;
    align-items: center;
    font-size: .68rem;
    color: var(--pf-text-subtle);
    margin-top: .3rem;
}

.agd-decision-card__comments[b-7jxjp1id44] {
    font-size: .7rem;
    color: var(--pf-text-subtle);
    margin-top: .25rem;
    font-style: italic;
}
/* /Components/Pages/Ais/AisDashboard.razor.rz.scp.css */
/* Panel chrome copied from the berth planner rather than shared: Blazor scoped CSS does not cross
   component boundaries, and the alternative is a global class that the planner would then be unable
   to change without touching this page too. */

/* The app's panel band, expressed through the shared tokens. Scoped CSS
   cannot reach .pf-panel__header, but custom properties inherit straight
   through the scope boundary, so the band is defined once in portflow.css
   and only the family colour is chosen here.

   Each panel type takes the family that matches what it shows: the charts
   are brand, the inbound list is info, the in-port list is success (the
   same "vessel is here" cue the frozen slot palette makes elsewhere), and
   the feed status is warning because it is the panel you look at when
   something has stopped arriving. */
.ais-panel__header[b-zwxuzzs7kt] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .62rem 14px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: var(--pf-font-head);
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    border-bottom: 1px solid var(--pf-border);
    box-shadow: none;
}

.ais-panel__header i[b-zwxuzzs7kt] {
    color: var(--pf-fam);
}

.ais-panel__header--map[b-zwxuzzs7kt] { --pf-fam: var(--pf-fam-brand); }
.ais-panel__header--inport[b-zwxuzzs7kt] { --pf-fam: var(--pf-fam-success); }
.ais-panel__header--inbound[b-zwxuzzs7kt] { --pf-fam: var(--pf-fam-info); }
.ais-panel__header--feed[b-zwxuzzs7kt] { --pf-fam: var(--pf-fam-warning); }

.ais-panel__title[b-zwxuzzs7kt] {
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ais-panel__action[b-zwxuzzs7kt] {
    border: 0;
    background: transparent;
    color: var(--pf-text-subtle);
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: var(--pf-radius-sm);
}

.ais-panel__action:hover[b-zwxuzzs7kt] {
    color: var(--pf-text);
    background: color-mix(in srgb, var(--pf-text) 8%, transparent);
}

/* Leaflet needs a laid-out height before it will draw; a percentage against an auto-height panel
   collapses to zero and the map renders as an empty grey strip. */
.ais-map[b-zwxuzzs7kt] {
    width: 100%;
    height: 100%;
    min-height: 260px;
}

.ais-table-wrap[b-zwxuzzs7kt] {
    height: 100%;
    overflow: auto;
}

.ais-table[b-zwxuzzs7kt] {
    font-size: .75rem;
}

.ais-table thead th[b-zwxuzzs7kt] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--pf-surface-1);
    color: var(--pf-brand);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .04em;
    font-weight: 650;
    white-space: nowrap;
    border-bottom: 1px solid var(--pf-border);
}

.ais-table tbody tr + tr[b-zwxuzzs7kt] {
    border-top: 1px solid var(--pf-border-subtle);
}

.ais-table td[b-zwxuzzs7kt] {
    vertical-align: middle;
}

.ais-port-select[b-zwxuzzs7kt] {
    min-width: 200px;
}

.ais-status dt[b-zwxuzzs7kt] {
    font-weight: 500;
    color: var(--pf-text-muted);
}

/* Shown over the chart when a port has no surveyed quay to draw. */
.ais-map__empty[b-zwxuzzs7kt] {
    position: absolute;
    inset: auto 12px 12px 12px;
    padding: .5rem .75rem;
    font-size: .75rem;
    color: var(--pf-text);
    background: var(--pf-surface-0);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow);
}
/* /Components/Pages/BerthingSlot/BerthSlotDivisionPanel.razor.rz.scp.css */
/* Copied from VisualBerthPlanner.razor.css when this panel was extracted. Scoped CSS binds to the
   component that OWNS the markup, so the planner's own stylesheet stopped matching these elements
   the moment they moved in here. Custom properties still inherit across the scope boundary, which
   is why every --pf-* below resolves without ::deep. */

.vbp-panel[b-faw0u534kt] {
    background: var(--pf-panel-bg);
    border: 1px solid var(--pf-panel-border);
    border-radius: var(--pf-panel-radius);
    box-shadow: var(--pf-panel-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 160px;
    height: 100%;
}

.vbp-panel__header[b-faw0u534kt] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .62rem 1rem;
    min-height: 44px;
    font-family: var(--pf-font-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    border-bottom: 1px solid var(--pf-border);
}

.vbp-panel__header--permanent[b-faw0u534kt] { --pf-fam: var(--pf-fam-brand); }
.vbp-panel__header--opportunistic[b-faw0u534kt] { --pf-fam: var(--pf-fam-success); }

.vbp-panel__badge[b-faw0u534kt] {
    background: color-mix(in srgb, var(--pf-fam) 18%, transparent);
    color: var(--pf-panel-head-fg);
    font-size: .7rem;
    border-radius: 50px;
    padding: .12rem .5rem;
    white-space: nowrap;
}

/* The cap is a variable so a dashboard cell, which is already a fixed height the planner chose,
   can let the list fill it instead of stopping short at a height meant for a fixed page. */
.vbp-panel__body[b-faw0u534kt] {
    flex: 1;
    padding: .75rem 1rem;
    overflow-y: auto;
    max-height: var(--vbp-body-max, 260px);
}

.vbp-slot-summary-list[b-faw0u534kt] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.vbp-slot-summary-row[b-faw0u534kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .6rem;
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-card-inset);
    font-size: .78rem;
}

.vbp-slot-summary-row__label[b-faw0u534kt] {
    font-weight: 600;
    color: var(--pf-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbp-slot-summary-row__count[b-faw0u534kt] {
    font-weight: 700;
    font-size: .8rem;
    border-radius: 50px;
    padding: .1rem .55rem;
    white-space: nowrap;
}

.vbp-slot-summary-row__count--permanent[b-faw0u534kt] {
    background: #e1efff;
    color: #12304b;
    border: 1px solid #78afd9;
}

.vbp-slot-summary-row__count--opportunistic[b-faw0u534kt] {
    background: #e4f4e9;
    color: #1a4731;
    border: 1px solid #5fa777;
}

/* Operator breakdown rows (nested under berth) */
.vbp-slot-summary-operator[b-faw0u534kt] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem .18rem 1.6rem;
    font-size: .73rem;
    color: #555;
}

.vbp-slot-summary-operator__icon[b-faw0u534kt] {
    font-size: .7rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.vbp-slot-summary-operator__name[b-faw0u534kt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
}

.vbp-slot-summary-operator__count[b-faw0u534kt] {
    font-size: .68rem;
    color: #6b7280;
    white-space: nowrap;
    font-style: italic;
}

/* Collapsible berth toggle row */
.vbp-berth-toggle[b-faw0u534kt] {
    cursor: pointer;
    user-select: none;
    gap: .35rem;
}

.vbp-berth-toggle:hover[b-faw0u534kt] {
    background: var(--pf-surface-2);
    border-color: #b8d0e8;
}

.vbp-berth-toggle__chevron[b-faw0u534kt] {
    font-size: .65rem;
    color: #78afd9;
    flex-shrink: 0;
    transition: transform .15s;
}

.vbp-berth-detail[b-faw0u534kt] {
    border-left: 2px solid #d0e2f0;
    margin-left: .9rem;
    padding-left: .1rem;
    margin-bottom: .25rem;
}

/* Commodity row (level 2) */
.vbp-slot-summary-commodity[b-faw0u534kt] {
    display: flex;
    align-items: center;
    gap: .32rem;
    padding: .2rem .6rem .2rem 1.1rem;
    font-size: .74rem;
    color: #374151;
}

.vbp-slot-summary-commodity__icon[b-faw0u534kt] {
    font-size: .68rem;
    color: #78afd9;
    flex-shrink: 0;
}

.vbp-slot-summary-commodity__name[b-faw0u534kt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--pf-text);
}

.vbp-slot-summary-commodity__count[b-faw0u534kt] {
    font-size: .68rem;
    color: #4b5563;
    font-weight: 700;
    background: #e1efff;
    border: 1px solid #78afd9;
    border-radius: 50px;
    padding: .05rem .4rem;
    white-space: nowrap;
}

/* Operator row nested under commodity (level 3) */
.vbp-slot-summary-operator--nested[b-faw0u534kt] {
    padding-left: 2.4rem;
}
/* /Components/Pages/BerthingSlot/SlotCard.razor.rz.scp.css */
[b-kitw4t6pv9] {
    --slot-btn-vessel-bg: #8bb3d1;
    --slot-btn-vessel-hover-bg: #7da8c8;
    --slot-btn-shipper-bg: #65c1d2;
    --slot-btn-shipper-hover-bg: #55b4c7;
    --slot-btn-edit-bg: #a3cda5;
    --slot-btn-edit-hover-bg: #93bf96;
}

[b-kitw4t6pv9] .slot-card {
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid rgba(18, 48, 75, 0.12);
    border-left: 4px solid transparent;
    color: #12304b;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    /* Was .e-card-content, supplied by SfCard. The card is plain markup now, so
       the padding is stated here — same values, so nothing shifts. */
    [b-kitw4t6pv9] .slot-card .slot-card__content {
        padding: .55rem .7rem;
    }

[b-kitw4t6pv9] .slot-card .alert {
    margin-bottom: .4rem !important;
}

[b-kitw4t6pv9] .slot-template {
    font-size: .84rem;
    line-height: 1.2;
}

    [b-kitw4t6pv9] .slot-template table {
        margin-bottom: 0;
    }

    [b-kitw4t6pv9] .slot-template table td {
        padding: .12rem .35rem .12rem 0;
        vertical-align: top;
        font-size: .8rem;
    }

    [b-kitw4t6pv9] .slot-template .btn {
        min-width: 104px !important;
        height: 26px !important;
        font-size: .74rem !important;
    }

[b-kitw4t6pv9] .slot-template .slot-btn-vessel,
[b-kitw4t6pv9] .slot-template .slot-btn-vessel:focus,
[b-kitw4t6pv9] .slot-template .slot-btn-vessel:active {
    background-color: var(--slot-btn-vessel-bg) !important;
    border-color: var(--slot-btn-vessel-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-vessel:hover {
    background-color: var(--slot-btn-vessel-hover-bg) !important;
    border-color: var(--slot-btn-vessel-hover-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-shipper,
[b-kitw4t6pv9] .slot-template .slot-btn-shipper:focus,
[b-kitw4t6pv9] .slot-template .slot-btn-shipper:active {
    background-color: var(--slot-btn-shipper-bg) !important;
    border-color: var(--slot-btn-shipper-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-shipper:hover {
    background-color: var(--slot-btn-shipper-hover-bg) !important;
    border-color: var(--slot-btn-shipper-hover-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-edit,
[b-kitw4t6pv9] .slot-template .slot-btn-edit:focus,
[b-kitw4t6pv9] .slot-template .slot-btn-edit:active {
    background-color: var(--slot-btn-edit-bg) !important;
    border-color: var(--slot-btn-edit-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-edit:hover {
    background-color: var(--slot-btn-edit-hover-bg) !important;
    border-color: var(--slot-btn-edit-hover-bg) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-template .slot-btn-vessel:disabled,
[b-kitw4t6pv9] .slot-template .slot-btn-shipper:disabled,
[b-kitw4t6pv9] .slot-template .slot-btn-edit:disabled {
    color: rgba(18, 48, 75, 0.72) !important;
    opacity: .7;
}

    [b-kitw4t6pv9] .slot-template .e-stepper {
        transform: scale(.92);
        transform-origin: left center;
    }

    [b-kitw4t6pv9] .slot-template .e-datetime-wrapper,
    [b-kitw4t6pv9] .slot-template .e-input-group,
    [b-kitw4t6pv9] .slot-template .e-control-wrapper {
        min-height: 30px;
        font-size: .78rem;
    }

[b-kitw4t6pv9] .slot-template--other .alert,
[b-kitw4t6pv9] .slot-template--first .alert {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

    [b-kitw4t6pv9] .slot-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        transform: translateY(0px);
        border-color: rgba(18, 48, 75, 0.24);
    }

[b-kitw4t6pv9] .permanent-slot {
    background-color: #e1efff;
    border-left-color: #78afd9;
}

    [b-kitw4t6pv9] .permanent-slot:hover {
        background-color: #d4e7ff;
    }

[b-kitw4t6pv9] .opportunistic-slot {
    background-color: #e4f4e9;
    border-left-color: #5fa777;
}

    [b-kitw4t6pv9] .opportunistic-slot:hover {
        background-color: #d8eedf;
    }

[b-kitw4t6pv9] .priority-slot {
    background-color: #f9e3e3;
    border-left-color: #d16a6a;
}

    [b-kitw4t6pv9] .priority-slot:hover {
        background-color: #f4d6d6;
    }

[b-kitw4t6pv9] .reserved-slot {
    background-color: #fff0df;
    border-left-color: #d89a4b;
}

[b-kitw4t6pv9] .terminal-slot {
    background-color: #94e8d2;
    border-left-color: #4da98e;
}

    [b-kitw4t6pv9] .terminal-slot:hover {
        background-color: #87dec7;
    }

    [b-kitw4t6pv9] .reserved-slot:hover {
        background-color: #ffe6c7;
    }

[b-kitw4t6pv9] .slot-in-port-first {
    background-color: #d8daef;
    border-left-color: #aab3d8;
    color: #12304b;
}

    [b-kitw4t6pv9] .slot-in-port-first:hover {
        background-color: #cdd2eb;
    }

[b-kitw4t6pv9] .slot-in-port-first .text-body-emphasis,
[b-kitw4t6pv9] .slot-in-port-first .text-body-tertiary,
[b-kitw4t6pv9] .slot-in-port-first .text-primary-emphasis,
[b-kitw4t6pv9] .slot-in-port-first .text-dark-emphasis,
[b-kitw4t6pv9] .slot-in-port-first .text-success,
[b-kitw4t6pv9] .slot-in-port-first .text-warning,
[b-kitw4t6pv9] .slot-in-port-first .form-check-label,
[b-kitw4t6pv9] .slot-in-port-first label,
[b-kitw4t6pv9] .slot-in-port-first .slot-template,
[b-kitw4t6pv9] .slot-in-port-first .slot-template b,
[b-kitw4t6pv9] .slot-in-port-first .slot-template span,
[b-kitw4t6pv9] .slot-in-port-first .slot-template div,
[b-kitw4t6pv9] .slot-in-port-first .e-badge {
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-in-port-first .text-body-tertiary,
[b-kitw4t6pv9] .slot-in-port-first .text-dark-emphasis {
    color: #425269 !important;
}

[b-kitw4t6pv9] .slot-in-port-first .text-success,
[b-kitw4t6pv9] .slot-in-port-first .text-warning,
[b-kitw4t6pv9] .slot-in-port-first .text-primary-emphasis {
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-in-port-first .e-badge {
    background-color: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(18, 48, 75, 0.18) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-in-port-first .btn {
    color: #12304b;
    border-color: rgba(18, 48, 75, 0.24);
}

[b-kitw4t6pv9] .slot-in-port-first .e-input-group,
[b-kitw4t6pv9] .slot-in-port-first .e-control-wrapper,
[b-kitw4t6pv9] .slot-in-port-first .e-datetime-wrapper {
    background-color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(18, 48, 75, 0.18) !important;
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-in-port-first .e-input-group input,
[b-kitw4t6pv9] .slot-in-port-first .e-control-wrapper input,
[b-kitw4t6pv9] .slot-in-port-first .e-datetime-wrapper input,
[b-kitw4t6pv9] .slot-in-port-first input.e-input,
[b-kitw4t6pv9] .slot-in-port-first .e-input,
[b-kitw4t6pv9] .slot-in-port-first .e-float-text,
[b-kitw4t6pv9] .slot-in-port-first .e-input-group-icon,
[b-kitw4t6pv9] .slot-in-port-first .e-date-wrapper span,
[b-kitw4t6pv9] .slot-in-port-first .e-time-wrapper span {
    color: #12304b !important;
}

[b-kitw4t6pv9] .slot-in-port-first .e-input-group input::placeholder,
[b-kitw4t6pv9] .slot-in-port-first .e-control-wrapper input::placeholder,
[b-kitw4t6pv9] .slot-in-port-first .e-datetime-wrapper input::placeholder,
[b-kitw4t6pv9] .slot-in-port-first input.e-input::placeholder {
    color: #6a7890 !important;
}

    [b-kitw4t6pv9] .slot-in-port-first .btn:hover {
        color: #12304b;
        background-color: rgba(255,255,255,.55);
        border-color: rgba(18,48,75,.24);
    }

    [b-kitw4t6pv9] .slot-in-port-first .btn:disabled {
        color: rgba(18, 48, 75, 0.62);
        border-color: rgba(18, 48, 75, 0.16);
        opacity: 0.7;
    }

[b-kitw4t6pv9] .slot-double-bank {
    border-left-color: #8b6a4f !important;
    background-color: #efe4da !important;
}

    [b-kitw4t6pv9] .slot-double-bank:hover {
        background-color: #e5d8cb !important;
    }

[b-kitw4t6pv9] .virtual-gap-slot {
    background-color: #fff8dc !important;
    border-left-color: #d4b106 !important;
}

    [b-kitw4t6pv9] .virtual-gap-slot:hover {
        background-color: #fff3c2 !important;
    }

[b-kitw4t6pv9] .virtual-gap-slot__content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: #12304b;
}

[b-kitw4t6pv9] .virtual-gap-slot__title {
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

[b-kitw4t6pv9] .virtual-gap-slot__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    font-size: .9rem;
}

[b-kitw4t6pv9] .virtual-gap-slot__actions {
    display: flex;
    justify-content: flex-end;
}

[b-kitw4t6pv9] .slot-card-banner {
    padding: .45rem .6rem;
    border-radius: 6px;
    font-size: .82rem;
    border: 1px solid rgba(18, 48, 75, 0.12);
}

[b-kitw4t6pv9] .slot-card-banner--shore-tension {
    background: rgba(120, 175, 217, 0.12);
    color: #12304b;
}

[b-kitw4t6pv9] .slot-card-banner__icon {
    color: #5b89ad;
}

[b-kitw4t6pv9] .slot-in-port-first .slot-card-banner--shore-tension {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #eef4f4;
}

[b-kitw4t6pv9] .slot-in-port-first .slot-card-banner__icon {
    color: #d6e5e5;
}

@media (max-width: 991.98px) {
    [b-kitw4t6pv9] .slot-template table,
    [b-kitw4t6pv9] .slot-template tbody,
    [b-kitw4t6pv9] .slot-template tr,
    [b-kitw4t6pv9] .slot-template td {
        display: block;
        width: 100%;
    }

    [b-kitw4t6pv9] .slot-template td {
        padding-right: 0;
    }

    [b-kitw4t6pv9] .slot-template .btn {
        min-width: 100% !important;
        margin-bottom: .25rem;
    }

    [b-kitw4t6pv9] .virtual-gap-slot__details {
        grid-template-columns: 1fr;
    }

    [b-kitw4t6pv9] .virtual-gap-slot__actions {
        justify-content: flex-start;
    }
}

/* ── Allocation deadline warning borders ──────────────────────────────────── */
/* Shipper not allocated → solid border (distinct from vessel dashed)         */
[b-kitw4t6pv9] .slot-warn-shipper-orange { border-left: 6px solid #fd7e14 !important; }
[b-kitw4t6pv9] .slot-warn-shipper-red    { border-left: 6px solid #dc3545 !important; }

/* Vessel not nominated → dashed border (visually distinct from shipper)      */
[b-kitw4t6pv9] .slot-warn-vessel-orange  { border-left: 6px dashed #e6a817 !important; }
[b-kitw4t6pv9] .slot-warn-vessel-red     { border-left: 6px dashed #c0392b !important; }

/* Both warnings present → solid border at worst severity (content shows both) */
[b-kitw4t6pv9] .slot-warn-both-orange    { border-left: 6px solid #fd7e14 !important; }
[b-kitw4t6pv9] .slot-warn-both-red       { border-left: 6px solid #dc3545 !important; }
/* Folded from SlotCard.razor's <style> block. Kept in this scoped sheet rather
   than portflow.css: these are the shift-banner colours for this card, and the
   file already owns the frozen slot palette, so its rules stay together. */
[b-kitw4t6pv9] .slot-card-banner--shift {
    background: #fff7ec;
    border-left: 4px solid #f0a350;
    border-radius: 4px;
    padding: .35rem .6rem;
    color: #8a4b00;
}

[b-kitw4t6pv9] .sl-badge-shift {
    background: #fff7ec;
    color: #b85c00;
    border: 1px solid #f0c48a;
    font-weight: 600;
}
/* /Components/Pages/BerthingSlot/SlotEditor.razor.rz.scp.css */
.se-page[b-wojjfj2d2w] {
    margin-top: 5px;
    padding-top: 5px;
}

.se-dashboard-grid[b-wojjfj2d2w] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    height: calc(100vh - 280px);
    max-height: calc(100vh - 280px);
    overflow: hidden;
}

.se-dashboard-panel[b-wojjfj2d2w] {
    min-width: 0;
}

.se-dashboard-panel--slots[b-wojjfj2d2w] {
    grid-column: 1 / span 6;
    grid-row: 1 / span 6;
}

.se-dashboard-panel--status[b-wojjfj2d2w] {
    grid-column: 7;
    grid-row: 1 / span 2;
}

.se-dashboard-panel--permanent[b-wojjfj2d2w] {
    grid-column: 7;
    grid-row: 3 / span 2;
}

.se-dashboard-panel--opportunistic[b-wojjfj2d2w] {
    grid-column: 7;
    grid-row: 5 / span 2;
}

.se-summary-card[b-wojjfj2d2w] {
    border: 1px solid rgba(18, 48, 75, 0.12);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(18, 48, 75, 0.08);
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.se-summary-card__header[b-wojjfj2d2w] {
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    padding: .75rem .9rem;
}

.permanent-slot-header[b-wojjfj2d2w] {
    background: #12304b;
}

.opportunistic-slot-header[b-wojjfj2d2w] {
    background: #2f6f46;
}

.port-status-header[b-wojjfj2d2w] {
    background: #7a4f00;
}

.se-header-badge[b-wojjfj2d2w] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-weight: 600;
}

.se-summary-card__body[b-wojjfj2d2w] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
}

.se-summary-card__body--statuses[b-wojjfj2d2w] {
    padding: .5rem;
}

.se-summary-group[b-wojjfj2d2w] {
    padding-bottom: .55rem;
    margin-bottom: .55rem;
    border-bottom: 1px solid rgba(18, 48, 75, 0.08);
}

.se-summary-group:last-child[b-wojjfj2d2w] {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.se-summary-group__heading[b-wojjfj2d2w] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 700;
    color: #12304b;
}

.se-summary-group__meta[b-wojjfj2d2w] {
    color: #6c757d;
    font-weight: 500;
    font-size: .72rem;
    white-space: nowrap;
}

.se-summary-row[b-wojjfj2d2w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: start;
    font-size: .77rem;
    margin-bottom: .18rem;
}

.se-summary-row__label[b-wojjfj2d2w] {
    color: #1f2933;
    white-space: normal;
    line-height: 1.25;
}

.se-summary-row__count[b-wojjfj2d2w] {
    font-weight: 700;
    color: #12304b;
}

.se-ps-list[b-wojjfj2d2w] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.se-ps-row[b-wojjfj2d2w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem;
    border: 1px solid var(--pf-dlg-section-border);
    border-radius: 8px;
    background: var(--pf-dlg-section-bg);
}

.se-ps-row__info[b-wojjfj2d2w] {
    min-width: 0;
    flex: 1 1 auto;
}

.se-ps-row__reason[b-wojjfj2d2w] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--pf-text);
}

.se-ps-row__description[b-wojjfj2d2w] {
    font-size: .74rem;
    color: var(--pf-text-muted);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.se-ps-row__description :last-child[b-wojjfj2d2w] {
    margin-bottom: 0;
}

.se-ps-row__time[b-wojjfj2d2w] {
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--pf-text-subtle);
}

.se-slot-card[b-wojjfj2d2w] {
    border-radius: 10px;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.se-slot-card__header[b-wojjfj2d2w] {
    background: #12304b;
    color: #fff;
    font-weight: 700;
    padding: .85rem 1rem;
}

.se-slot-card > .card-body[b-wojjfj2d2w] {
    flex: 1 1 auto;
    min-height: 0;
}

.se-slot-table-wrap[b-wojjfj2d2w] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem;
}

.se-slot-card-list[b-wojjfj2d2w] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.se-slot-card-item[b-wojjfj2d2w] {
    margin: 0;
    width: 100%;
    min-width: 0;
}

[b-wojjfj2d2w] .se-slot-entry-card {
    border-radius: 6px;
    border: 1px solid rgba(18, 48, 75, 0.12);
    border-left: 4px solid transparent;
    color: #12304b;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 4px rgba(18, 48, 75, 0.05);
}

[b-wojjfj2d2w] .se-slot-entry-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    border-color: rgba(18, 48, 75, 0.24);
}

[b-wojjfj2d2w] .se-slot-entry-card .e-card-content {
    padding: .55rem .7rem;
}

.se-slot-card-frame[b-wojjfj2d2w] {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.se-slot-card-warnings[b-wojjfj2d2w] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.se-slot-card-frame .alert[b-wojjfj2d2w],
.se-slot-card .alert[b-wojjfj2d2w],
.se-slot-card .slot-warning[b-wojjfj2d2w],
.se-slot-card .slot-notification[b-wojjfj2d2w],
.se-slot-card .slot-alert[b-wojjfj2d2w],
.se-slot-card [class*="warning"][b-wojjfj2d2w],
.se-slot-card [class*="notification"][b-wojjfj2d2w],
.se-slot-card [class*="alert"][b-wojjfj2d2w] {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    display: block;
}

.se-slot-row[b-wojjfj2d2w] {
    display: grid;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
}

.se-slot-row-1[b-wojjfj2d2w] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 6px;
}

.se-slot-row-2[b-wojjfj2d2w] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(18, 48, 75, 0.1);
    padding-top: 6px;
}

.se-slot-item[b-wojjfj2d2w] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.se-slot-item--button[b-wojjfj2d2w] {
    justify-content: center;
}

.se-slot-item--actions[b-wojjfj2d2w] {
    justify-content: flex-start;
}

.se-slot-actions[b-wojjfj2d2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.se-slot-actions .btn[b-wojjfj2d2w],
.se-slot-actions button[b-wojjfj2d2w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.se-slot-inline-label[b-wojjfj2d2w] {
    font-weight: 700;
    color: #12304b;
}

.se-slot-inline-value[b-wojjfj2d2w] {
    font-weight: 700;
}

.se-slot-item .field-value[b-wojjfj2d2w] {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-slot-field[b-wojjfj2d2w] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 140px;
}

.se-slot-field--slotno[b-wojjfj2d2w] {
    flex-basis: 150px;
}

.se-slot-field--vessel[b-wojjfj2d2w],
.se-slot-field--cargo[b-wojjfj2d2w] {
    flex-basis: 220px;
}

.se-slot-field--time[b-wojjfj2d2w],
.se-slot-field--quantity[b-wojjfj2d2w],
.se-slot-field--badge[b-wojjfj2d2w] {
    flex-basis: 120px;
}

.se-slot-field--actions[b-wojjfj2d2w] {
    flex: 0 1 auto;
    margin-left: auto;
    align-items: flex-end;
}

.se-slot-field--remarks[b-wojjfj2d2w] {
    flex: 0 1 auto;
    margin-left: auto;
    align-items: flex-end;
}

.se-slot-field__label[b-wojjfj2d2w] {
    color: #5b7083;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.1;
}

.se-slot-field__value[b-wojjfj2d2w] {
    min-width: 0;
    color: inherit;
    font-size: .84rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-icon-field[b-wojjfj2d2w] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.se-icon-field__icon-wrap[b-wojjfj2d2w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.field-icon[b-wojjfj2d2w] {
    cursor: help;
}

.field-value[b-wojjfj2d2w] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-slot-grid-icon[b-wojjfj2d2w] {
    color: #12304b;
    margin-right: .28rem;
}

.se-slot-alert[b-wojjfj2d2w] {
    font-size: .78rem;
    border-radius: 4px;
}

.se-slot-type-badge[b-wojjfj2d2w] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .2rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.slot-type-badge[b-wojjfj2d2w],
.se-slot-type-badge[b-wojjfj2d2w] {
    font-size: 0.65rem;
    padding: 1px 5px;
    line-height: 1.2;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.se-slot-type-badge.permanent-slot[b-wojjfj2d2w] {
    background-color: #d4e7ff;
    border-color: #78afd9;
    color: #12304b;
}

.se-slot-type-badge.opportunistic-slot[b-wojjfj2d2w] {
    background-color: #d8eedf;
    border-color: #5fa777;
    color: #12304b;
}

.se-slot-type-badge.priority-slot[b-wojjfj2d2w] {
    background-color: #f4d6d6;
    border-color: #d16a6a;
    color: #12304b;
}

.se-slot-type-badge.reserved-slot[b-wojjfj2d2w] {
    background-color: #ffe6c7;
    border-color: #d89a4b;
    color: #12304b;
}

.se-slot-type-badge.terminal-slot[b-wojjfj2d2w] {
    background-color: #94e8d2;
    border-color: #4da98e;
    color: #12304b;
}

.se-slot-type-badge.virtual-gap-slot[b-wojjfj2d2w] {
    background-color: #fff3c2;
    border-color: #d4b106;
    color: #12304b;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-permanent {
    background-color: #e1efff;
    border-left-color: #78afd9;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-opportunistic {
    background-color: #e4f4e9;
    border-left-color: #5fa777;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-priority {
    background-color: #f9e3e3;
    border-left-color: #d16a6a;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-reserved {
    background-color: #fff0df;
    border-left-color: #d89a4b;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-default {
    background: #fff;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport {
    background: #d8daef !important;
    border: 1px solid #aab3d8 !important;
    color: #1f2933 !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-terminal {
    background: #94e8d2 !important;
    border-left-color: #4da98e !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-row-warn-orange {
    border-left: 6px solid #fd7e14 !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-row-warn-red {
    border-left: 6px solid #dc3545 !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-doublebank,
[b-wojjfj2d2w] .se-slot-entry-card.slot-double-bank {
    border-left-color: #8b6a4f !important;
    background-color: #efe4da !important;
    box-shadow: inset 0 0 0 1px rgba(139, 106, 79, 0.35);
}

[b-wojjfj2d2w] .se-slot-entry-card.virtual-gap-slot {
    background: #fff8dc !important;
    border-color: rgba(212, 177, 6, .32) !important;
    border-left-color: #d4b106 !important;
}

.se-slot-message[b-wojjfj2d2w] {
    font-size: .72rem;
    color: #6c757d;
    line-height: 1.25;
}

.se-drag-indicator[b-wojjfj2d2w] {
    font-size: .7rem;
    color: #5c7474;
    font-weight: 500;
}

.slot-drag-over[b-wojjfj2d2w] {
    outline: 2px dashed #78afd9;
    outline-offset: 2px;
    opacity: .82;
}

[draggable="true"][b-wojjfj2d2w] {
    cursor: grab;
}

[draggable="true"]:active[b-wojjfj2d2w] {
    cursor: grabbing;
    opacity: .7;
}

.se-btn[b-wojjfj2d2w] {
    white-space: nowrap;
    font-size: .75rem;
    padding: .25rem .5rem;
}

.se-slot-remarks-btn[b-wojjfj2d2w] {
    background-color: #1f6b3a;
    border-color: #1f6b3a;
    color: #fff;
}

.se-slot-remarks-btn:hover[b-wojjfj2d2w],
.se-slot-remarks-btn:focus[b-wojjfj2d2w] {
    background-color: #18562e;
    border-color: #18562e;
    color: #fff;
}

.se-slot-history-btn[b-wojjfj2d2w],
.se-slot-action-btn[b-wojjfj2d2w],
.se-slot-remarks-btn[b-wojjfj2d2w] {
    font-weight: 600;
}

.se-slot-history-btn i[b-wojjfj2d2w],
.se-slot-action-btn i[b-wojjfj2d2w],
.se-slot-remarks-btn i[b-wojjfj2d2w] {
    line-height: 1;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .badge {
    border: 1px solid rgba(31, 41, 51, 0.16);
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .btn {
    color: #1f2933;
    border-color: rgba(31, 41, 51, 0.28);
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .btn:hover {
    color: #1f2933;
    background: rgba(255,255,255,.6);
    border-color: rgba(31,41,51,.28);
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-message,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-drag-indicator,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-grid-icon,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-item,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-inline-label,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-inline-value,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-alert,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .field-value,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport strong,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport span {
    color: #1f2933 !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .alert {
    background: rgba(255,255,255,.45);
    border-color: rgba(31,41,51,.12);
}

[b-wojjfj2d2w] .se-portstatus-rte {
    min-height: 200px;
}

[b-wojjfj2d2w] .se-portstatus-rte .e-rte-content,
[b-wojjfj2d2w] .se-portstatus-rte .e-content {
    min-height: 140px;
}

[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header-content {
    background: #12304b;
    color: #fff !important;
}

[b-wojjfj2d2w] #SlotEditorErrorDialog .e-dlg-header-content {
    background: #dc3545;
    color: #fff !important;
}

[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header,
[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header-content,
[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header-content *,
[b-wojjfj2d2w] #SlotEditorErrorDialog .e-dlg-header,
[b-wojjfj2d2w] #SlotEditorErrorDialog .e-dlg-header-content * {
    color: #fff !important;
    font-weight: 600;
}

[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
[b-wojjfj2d2w] .sloteditor-modal .e-dlg-header-content .e-dlg-closeicon-btn .e-icons,
[b-wojjfj2d2w] #SlotEditorErrorDialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
[b-wojjfj2d2w] #SlotEditorErrorDialog .e-dlg-header-content .e-dlg-closeicon-btn .e-icons {
    color: #fff !important;
    opacity: 1;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-action-btn,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-action-btn i,
[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-action-btn span {
    color: #fff !important;
}

[b-wojjfj2d2w] .se-slot-entry-card.slot-card-inport .se-slot-action-btn {
    border-color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 991.98px) {
    .se-dashboard-grid[b-wojjfj2d2w] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .se-dashboard-panel--slots[b-wojjfj2d2w],
    .se-dashboard-panel--status[b-wojjfj2d2w],
    .se-dashboard-panel--permanent[b-wojjfj2d2w],
    .se-dashboard-panel--opportunistic[b-wojjfj2d2w] {
        grid-column: 1;
        grid-row: auto;
    }

    .se-summary-card__body[b-wojjfj2d2w],
    .se-summary-card__body--statuses[b-wojjfj2d2w] {
        min-height: 220px;
    }

    .se-slot-table-wrap[b-wojjfj2d2w] {
        max-height: none;
    }

    .se-slot-row[b-wojjfj2d2w] {
        gap: 6px 10px;
    }

    .se-slot-field__value[b-wojjfj2d2w] {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .se-slot-inline-item[b-wojjfj2d2w] {
        white-space: normal;
    }

    .se-slot-action-group--inline[b-wojjfj2d2w],
    .se-slot-action-group--remarks[b-wojjfj2d2w] {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .se-slot-row[b-wojjfj2d2w] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .se-slot-field[b-wojjfj2d2w],
    .se-slot-field--actions[b-wojjfj2d2w],
    .se-slot-field--remarks[b-wojjfj2d2w] {
        margin-left: 0;
        align-items: stretch;
    }

    .se-slot-inline-item[b-wojjfj2d2w],
    .se-slot-action-group--inline[b-wojjfj2d2w],
    .se-slot-action-group--remarks[b-wojjfj2d2w] {
        margin-left: 0;
    }

    .se-slot-action-group[b-wojjfj2d2w] {
        justify-content: flex-start;
    }

    .se-slot-action-group .btn[b-wojjfj2d2w] {
        width: 100%;
    }

    .se-ps-row[b-wojjfj2d2w] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/BerthingSlot/SlotList.razor.rz.scp.css */
#berthPlanningDashboard[b-irjyhsrr63] {
    min-height: calc(100vh - 220px);
}

[b-irjyhsrr63] .bpd-panel-body--slots {
    padding: .35rem;
    height: 100%;
}

[b-irjyhsrr63] .bp-slot-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

[b-irjyhsrr63] .bp-slot-list--virtualized {
    height: 100%;
    overflow-y: auto;
}

[b-irjyhsrr63] .bp-slot-list__item {
    margin-bottom: .35rem;
}

[b-irjyhsrr63] .slot-summary-panel {
    padding: .25rem;
}

[b-irjyhsrr63] .slot-summary-card {
    padding: 0;
}

[b-irjyhsrr63] .slot-summary-card__legend {
    gap: .4rem;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__summary {
    padding: .2rem 0 .45rem;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__summary-label {
    font-size: .72rem;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__summary-count {
    font-size: .78rem;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__legend-heading {
    font-size: .8rem;
    padding-bottom: .1rem;
}

[b-irjyhsrr63] .slot-summary-card__row {
    grid-template-columns: minmax(0, 1fr) auto;
    font-size: .76rem;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__operator {
    white-space: normal;
    line-height: 1.2;
}

[b-irjyhsrr63] .slot-summary-card .to-chart-card__count {
    align-self: start;
}

@media (max-width: 1199.98px) {
    [b-irjyhsrr63] .slot-summary-panel {
        padding: .1rem;
    }
}

/* ── Drag-and-drop slot reordering ── */
[b-irjyhsrr63] .slot-drag-over {
    border-radius: 6px;
    outline: 2px dashed #78afd9;
    outline-offset: 2px;
    opacity: .82;
}

[b-irjyhsrr63] [draggable="true"] {
    cursor: grab;
}

[b-irjyhsrr63] [draggable="true"]:active {
    cursor: grabbing;
    opacity: .7;
}
/* /Components/Pages/BerthingSlot/VisualBerthPlanner.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   VisualBerthPlanner — scoped component styles
   All selectors are scoped to this component by Blazor's
   auto-generated attribute; they will NOT bleed into the
   global layout or side-menu.
   ═══════════════════════════════════════════════════════════ */

/* NOTE: the shell chrome — .vbp-shell, .vbp-breadcrumb-row, .vbp-toolbar-*,
   .vbp-port-*, .vbp-btn-action, .vbp-btn-secondary, .vbp-schedule-row — lives in
   wwwroot/css/vbp-shell.css, because CSS isolation would otherwise keep it out of
   reach of the Terminal Operator planner, which must look identical. Everything
   below is panel/dialog styling that only this page renders. */

/* ── Row 4: Dashboard Panels ─────────────────────────────── */
.vbp-panels-row[b-unuhlhsen0] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 1200px) {
    .vbp-panels-row[b-unuhlhsen0] {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .vbp-panel--notifications[b-unuhlhsen0] {
        grid-row: span 1;
    }
}

@media (max-width: 992px) {
    .vbp-panels-row[b-unuhlhsen0] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .vbp-panels-row[b-unuhlhsen0] {
        grid-template-columns: 1fr;
    }
}

/* Panel chrome, on the shared tokens.
   ------------------------------------------------------------------
   This file used to hardcode the whole treatment: white panels, a navy
   gradient header, and a per-type gradient for each of the four panels.
   That is where the app-wide panel system came from — this page was the
   one that looked right — but hardcoding it had two costs. The colours
   were theme-invariant, so the planner ignored dark mode entirely; and
   the app could only ever approximate it, never share it.

   The structure below is unchanged. Only the colour source moved: the
   band, the rule, the badge and the wells all read the same variables
   every other panel in the app reads, and each panel names its family
   instead of spelling out a gradient. Custom properties inherit through
   the scoped-CSS boundary, so no ::deep is needed. */
.vbp-panel[b-unuhlhsen0] {
    background: var(--pf-panel-bg);
    border: 1px solid var(--pf-panel-border);
    border-radius: var(--pf-panel-radius);
    box-shadow: var(--pf-panel-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.vbp-panel__header[b-unuhlhsen0] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .62rem 1rem;
    min-height: 44px;
    font-family: var(--pf-font-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    border-bottom: 1px solid var(--pf-border);
}

/* One family per panel: statuses are an exception state, permanent slots
   are the ordinary case, opportunistic ones are an opportunity taken. */
.vbp-panel__header--status[b-unuhlhsen0] { --pf-fam: var(--pf-fam-danger); }
.vbp-panel__header--permanent[b-unuhlhsen0] { --pf-fam: var(--pf-fam-brand); }
.vbp-panel__header--opportunistic[b-unuhlhsen0] { --pf-fam: var(--pf-fam-success); }

.vbp-panel__badge[b-unuhlhsen0] {
    background: color-mix(in srgb, var(--pf-fam) 18%, transparent);
    color: var(--pf-panel-head-fg);
    font-size: .7rem;
    border-radius: 50px;
    padding: .12rem .5rem;
    white-space: nowrap;
}

/* Panel body */
.vbp-panel__body[b-unuhlhsen0] {
    flex: 1;
    padding: .75rem 1rem;
    overflow-y: auto;
    max-height: 260px;
}

/* Port status list */
.vbp-ps-list[b-unuhlhsen0] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vbp-ps-row[b-unuhlhsen0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .38rem .6rem;
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-card-inset);
}

.vbp-ps-row__info[b-unuhlhsen0] {
    flex: 1;
    min-width: 0;
}

.vbp-ps-row__reason[b-unuhlhsen0] {
    font-size: .72rem;
    color: var(--pf-text-subtle);
    font-style: italic;
}

.vbp-ps-row__description[b-unuhlhsen0] {
    font-size: .72rem;
    color: var(--pf-text-muted);
    margin-top: .2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vbp-ps-row__time[b-unuhlhsen0] {
    font-size: .68rem;
    color: var(--pf-text-subtle);
    margin-top: .2rem;
}

/* Slot summary list (Permanent / Opportunistic) */
.vbp-slot-summary-list[b-unuhlhsen0] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.vbp-slot-summary-row[b-unuhlhsen0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .6rem;
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-card-inset);
    font-size: .78rem;
}

.vbp-slot-summary-row__label[b-unuhlhsen0] {
    font-weight: 600;
    color: var(--pf-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbp-slot-summary-row__count[b-unuhlhsen0] {
    font-weight: 700;
    font-size: .8rem;
    border-radius: 50px;
    padding: .1rem .55rem;
    white-space: nowrap;
}

.vbp-slot-summary-row__count--permanent[b-unuhlhsen0] {
    background: #e1efff;
    color: #12304b;
    border: 1px solid #78afd9;
}

.vbp-slot-summary-row__count--opportunistic[b-unuhlhsen0] {
    background: #e4f4e9;
    color: #1a4731;
    border: 1px solid #5fa777;
}

/* ── Port status edit button ─────────────────────────────── */
.vbp-ps-edit-btn[b-unuhlhsen0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #ffffff;
    font-size: .65rem;
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 55%, #1a3550 100%);
    box-shadow: 0 3px 0 #0d253a, 0 1px 4px rgba(18,48,75,.30);
    transition: transform .07s, box-shadow .07s;
}

.vbp-ps-edit-btn:hover[b-unuhlhsen0] {
    background: linear-gradient(180deg, #5a7b94 0%, #3c5d75 55%, #2a4560 100%);
}

.vbp-ps-edit-btn:active[b-unuhlhsen0] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0d253a;
}

/* ── Operator breakdown rows (nested under berth) ────────── */
.vbp-slot-summary-operator[b-unuhlhsen0] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem .18rem 1.6rem;
    font-size: .73rem;
    color: #555;
}

.vbp-slot-summary-operator__icon[b-unuhlhsen0] {
    font-size: .7rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.vbp-slot-summary-operator__name[b-unuhlhsen0] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
}

.vbp-slot-summary-operator__count[b-unuhlhsen0] {
    font-size: .68rem;
    color: #6b7280;
    white-space: nowrap;
    font-style: italic;
}

/* ── Collapsible berth toggle row ────────────────────────── */
.vbp-berth-toggle[b-unuhlhsen0] {
    cursor: pointer;
    user-select: none;
    gap: .35rem;
}

.vbp-berth-toggle:hover[b-unuhlhsen0] {
    background: var(--pf-surface-2);
    border-color: #b8d0e8;
}

.vbp-berth-toggle__chevron[b-unuhlhsen0] {
    font-size: .65rem;
    color: #78afd9;
    flex-shrink: 0;
    transition: transform .15s;
}

/* ── Berth detail collapsible wrapper ────────────────────── */
.vbp-berth-detail[b-unuhlhsen0] {
    border-left: 2px solid #d0e2f0;
    margin-left: .9rem;
    padding-left: .1rem;
    margin-bottom: .25rem;
}

/* ── Commodity row (level 2) ─────────────────────────────── */
.vbp-slot-summary-commodity[b-unuhlhsen0] {
    display: flex;
    align-items: center;
    gap: .32rem;
    padding: .2rem .6rem .2rem 1.1rem;
    font-size: .74rem;
    color: #374151;
}

.vbp-slot-summary-commodity__icon[b-unuhlhsen0] {
    font-size: .68rem;
    color: #78afd9;
    flex-shrink: 0;
}

.vbp-slot-summary-commodity__name[b-unuhlhsen0] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--pf-text);
}

.vbp-slot-summary-commodity__count[b-unuhlhsen0] {
    font-size: .68rem;
    color: #4b5563;
    font-weight: 700;
    background: #e1efff;
    border: 1px solid #78afd9;
    border-radius: 50px;
    padding: .05rem .4rem;
    white-space: nowrap;
}

/* ── Operator row nested under commodity (level 3) ───────── */
.vbp-slot-summary-operator--nested[b-unuhlhsen0] {
    padding-left: 2.4rem;
}

/* ═══════════════════════════════════════════════════════════
   Port Status Edit Dialog  (vbp-modal--3d)
   ═══════════════════════════════════════════════════════════ */

/* 3D gradient header */
[b-unuhlhsen0] .vbp-modal--3d .e-dlg-header-content {
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 40%, #1a3550 70%, #12304b 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 -1px 0 rgba(0,0,0,0.25),
                0 4px 10px rgba(0,0,0,0.35) !important;
    color: #fff !important;
}

[b-unuhlhsen0] .vbp-modal--3d .e-dlg-header-content .e-dlg-header,
[b-unuhlhsen0] .vbp-modal--3d .e-dlg-header-content * {
    color: #fff !important;
}

[b-unuhlhsen0] .vbp-modal--3d .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
[b-unuhlhsen0] .vbp-modal--3d .e-dlg-header-content .e-dlg-closeicon-btn .e-icons {
    color: #fff !important;
}

/* Body container — bordered card matching SelectedSlot style */
.vbp-ps-dialog-body[b-unuhlhsen0] {
    background: var(--pf-dlg-section-bg);
    border: 1px solid var(--pf-dlg-section-border);
    border-radius: 8px;
    padding: .85rem 1rem 1rem;
    margin-bottom: .5rem;
}

/* Footer — right-aligned */
.vbp-ps-dialog-footer[b-unuhlhsen0] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding-top: .35rem;
}

/* ── 3D action buttons (matching bsl-action-btn) ──────────── */
.vbp-ps-action-btn[b-unuhlhsen0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    height: 34px;
    padding: 0 1.15rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    border: none;
    transition: transform .08s, box-shadow .08s, opacity .12s;
}

.vbp-ps-action-btn:active[b-unuhlhsen0] {
    transform: translateY(2px);
}

.vbp-ps-action-btn--save[b-unuhlhsen0] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 4px 0 #166534, 0 2px 6px rgba(22,163,74,.35);
}

.vbp-ps-action-btn--save:hover[b-unuhlhsen0] {
    background: linear-gradient(180deg, #34d399 0%, #22c55e 55%, #16a34a 100%);
    color: #fff;
}

.vbp-ps-action-btn--save:active[b-unuhlhsen0] {
    box-shadow: 0 2px 0 #166534;
}

.vbp-ps-action-btn--cancel[b-unuhlhsen0] {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 55%, #374151 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 4px 0 #1f2937, 0 2px 6px rgba(75,85,99,.3);
}

.vbp-ps-action-btn--cancel:hover[b-unuhlhsen0] {
    background: linear-gradient(180deg, #7b8290 0%, #5b6573 55%, #47515f 100%);
    color: #fff;
}

.vbp-ps-action-btn--cancel:active[b-unuhlhsen0] {
    box-shadow: 0 2px 0 #1f2937;
}

/* ═══════════════════════════════════════════════════════════
   Notifications Panel
   ═══════════════════════════════════════════════════════════ */

/* Amber 3D header — distinct from Status (red) / Permanent (blue) / Opportunistic (green) */
/* Amber: notifications are the panel you look at when something needs
   a person. Same family the Marine Services tab uses for the same reason. */

/* Taller panel — at least 2 rows worth (per brief) */
.vbp-panel--notifications[b-unuhlhsen0] {
    min-height: 340px;
}


/* Header refresh button */






/* Notification list + cards */










/* Terminal operator change — informational, acknowledge only (no approve/reject). */













/* Pre-rendered card text for terminal operator change notifications. */







/* Action buttons (compact 3D) */

/* Dual-stage (Operator / VTS) nomination approval groups */












/* /Components/Pages/BerthingSlot/VisualPlannerSlotCard.razor.rz.scp.css */
[b-3iu28j3ky8] .visual-planner-slot-card {
    border-radius: 8px;
    border: 1px solid rgba(18, 48, 75, 0.12);
    padding: .65rem .75rem;
    color: #12304b;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

[b-3iu28j3ky8] .visual-planner-slot-card.terminal-slot {
    background-color: #94e8d2;
    border-left-color: #4da98e;
}

[b-3iu28j3ky8] .vp-slot-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .8rem;
}

[b-3iu28j3ky8] .vp-slot-card__row--header {
    justify-content: space-between;
}

[b-3iu28j3ky8] .vp-slot-card__slot-meta,
[b-3iu28j3ky8] .vp-slot-card__vessel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

[b-3iu28j3ky8] .vp-slot-card__label {
    font-size: .78rem;
    font-weight: 600;
    color: #486781;
}

[b-3iu28j3ky8] .vp-slot-card__lock {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8e3a1 0%, #edc84b 100%);
    border: 1px solid #c9a227;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.18);
    color: #6b4e00;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: help;
}

[b-3iu28j3ky8] .visual-planner-slot-card .alert {
    margin-bottom: 0 !important;
    font-size: .8rem;
}

[b-3iu28j3ky8] .vp-slot-card__banner {
    border-left: 4px solid rgba(18, 48, 75, 0.24);
    border-radius: 6px;
}

[b-3iu28j3ky8] .vp-slot-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
}

[b-3iu28j3ky8] .vp-slot-card__slotno {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.1;
}

[b-3iu28j3ky8] .vp-slot-card__times-host {
    flex: 1 1 460px;
    min-width: 280px;
}

[b-3iu28j3ky8] .vp-slot-card__times-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
}

[b-3iu28j3ky8] .vp-slot-card__time-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    min-width: 0;
}

[b-3iu28j3ky8] .vp-slot-card__time-item i,
[b-3iu28j3ky8] .vp-slot-card__vessel i {
    color: #486781;
}

[b-3iu28j3ky8] .vp-slot-card__time-label {
    font-weight: 700;
}

[b-3iu28j3ky8] .vp-slot-card__time-value--emphasis {
    color: #198754;
    font-weight: 700;
}

[b-3iu28j3ky8] .vp-slot-card__subline {
    font-size: .75rem;
    opacity: .78;
    margin-top: .1rem;
}

[b-3iu28j3ky8] .vp-slot-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .25rem;
}

[b-3iu28j3ky8] .vp-slot-card__header-actions {
    display: inline-flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

[b-3iu28j3ky8] .vp-slot-card__header-actions .btn {
    min-width: 2rem;
    padding: .2rem .45rem;
}

[b-3iu28j3ky8] .vp-slot-card__details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem .75rem;
    width: 100%;
}

[b-3iu28j3ky8] .vp-slot-card__detail {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    font-size: .82rem;
}

[b-3iu28j3ky8] .vp-slot-card__detail i {
    width: 1rem;
    text-align: center;
    color: #486781;
    flex: 0 0 auto;
}

[b-3iu28j3ky8] .vp-slot-card__detail span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-3iu28j3ky8] .vp-slot-card__detail--cargo {
    grid-column: 1 / -1;
}

[b-3iu28j3ky8] .vp-slot-card__detail--wide {
    grid-column: span 2;
}

[b-3iu28j3ky8] .vp-slot-card__times {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

[b-3iu28j3ky8] .vp-slot-card__time-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    border: 1px solid rgba(18, 48, 75, 0.14);
    background: rgba(255, 255, 255, 0.55);
    padding: .26rem .55rem;
    font-size: .77rem;
    color: inherit;
}

[b-3iu28j3ky8] .vp-slot-card__time-pill--button {
    cursor: pointer;
}

[b-3iu28j3ky8] .vp-slot-card__time-pill--button:disabled {
    opacity: .68;
    cursor: default;
}

[b-3iu28j3ky8] .vp-slot-card__toolbar,
[b-3iu28j3ky8] .vp-slot-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

[b-3iu28j3ky8] .vp-slot-card__edit-icon {
    padding: .2rem .5rem;
    align-self: flex-start;
}

[b-3iu28j3ky8] .vp-slot-card__switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding-left: 2.3rem;
}

[b-3iu28j3ky8] .vp-slot-card__toolbar .btn,
[b-3iu28j3ky8] .vp-slot-card__actions .btn {
    font-size: .76rem;
    padding: .22rem .55rem;
}

[b-3iu28j3ky8] .vp-slot-card__virtual {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

[b-3iu28j3ky8] .visual-planner-slot-card.slot-in-port-first .vp-slot-card__detail i,
[b-3iu28j3ky8] .visual-planner-slot-card.slot-in-port-first .vp-slot-card__time-pill,
[b-3iu28j3ky8] .visual-planner-slot-card.slot-in-port-first .vp-slot-card__subline {
    color: inherit;
}

@media (max-width: 767.98px) {
    [b-3iu28j3ky8] .vp-slot-card__details {
        grid-template-columns: 1fr;
    }

    [b-3iu28j3ky8] .vp-slot-card__header {
        flex-direction: column;
    }

    [b-3iu28j3ky8] .vp-slot-card__header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Quay fouling — obstructed by a vessel on another berth of the same quay */
.slot-card.slot-card--fouled[b-3iu28j3ky8] {
    border-left: 5px solid #dc3545 !important;
}

.vp-slot-card__fouled[b-3iu28j3ky8] {
    display: flex;
    align-items: center;
    font-size: .72rem;
    line-height: 1.15;
    color: #842029;
    background: #fde2e2;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    padding: .2rem .4rem;
    margin-bottom: .35rem;
}
/* /Components/Pages/Operations/OperationsCapture.razor.rz.scp.css */
/* Was Syncfusion Tab styling (.pf-ops-tab.e-tab and its .e-tab-* children).
   The component moved to RadzenTabs (class="pf-ops-tab" now sits on a
   <RadzenTabs>, see OperationsCapture.razor) which renders none of the
   .e-tab* markup these rules targeted, so they were dead weight and have
   been removed. No replacement rules were added — RadzenTabs is left on
   its default theme here, matching what the page already rendered. */
/* /Components/Pages/Operations/PortPerformanceEditor.razor.rz.scp.css */
.pp-shell[b-y7h8d6tojh] {
    padding: 0.75rem 0.5rem 2rem 0.5rem;
}

.pp-breadcrumb-row[b-y7h8d6tojh] {
    margin-bottom: 0.75rem;
}

.pp-port-row[b-y7h8d6tojh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem 0;
}

.pp-port-label[b-y7h8d6tojh] {
    font-weight: 600;
    color: var(--pf-text-muted);
}

.pp-port-name[b-y7h8d6tojh] {
    font-weight: 600;
    color: var(--pf-text);
}

.pp-row[b-y7h8d6tojh] {
    margin-bottom: 0.75rem;
}

.pp-panel[b-y7h8d6tojh] {
    background: var(--pf-panel-bg);
    border-radius: 8px;
    border: 1px solid var(--pf-panel-border);
    box-shadow: var(--pf-panel-shadow);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    height: 100%;
    overflow: hidden;
}

/* Standard panel header: token bg/fg with a family accent bar on top.
   .panel-header-blue/-turq/-green/-red are declared in THIS file (below)
   and scoped to this component by Blazor CSS isolation; .panel-header-turq
   also exists unscoped in portflow.css, but this file's own copy wins for
   this page. They now just pick the family via --pf-fam. */
.pp-panel__header[b-y7h8d6tojh] {
    padding: 0.55rem 0.85rem;
    font-weight: 700;
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: none;
    border-bottom: 1px solid var(--pf-border);
    --pf-fam: var(--pf-fam-brand);
}

.pp-panel__footer[b-y7h8d6tojh] {
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    color: var(--pf-text);
    border-top: 1px solid var(--pf-border);
    box-shadow: none;
}

.pp-panel__body[b-y7h8d6tojh] {
    padding: 0.6rem;
    overflow-y: auto;
    max-height: 460px;
    flex: 1 1 auto;
}

.pp-scroll[b-y7h8d6tojh] {
    scrollbar-width: thin;
}

/* Nearest family per header colour: blue -> info, turq -> teal, green -> success, red -> danger. */
.panel-header-blue[b-y7h8d6tojh] {
    --pf-fam: var(--pf-fam-info);
}

.panel-header-turq[b-y7h8d6tojh] {
    --pf-fam: var(--pf-fam-teal);
}

.panel-header-green[b-y7h8d6tojh] {
    --pf-fam: var(--pf-fam-success);
}

.panel-header-red[b-y7h8d6tojh] {
    --pf-fam: var(--pf-fam-danger);
}

.slot-card[b-y7h8d6tojh] {
    background: var(--pf-surface-2);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    color: var(--pf-text);
}

    .slot-card:hover[b-y7h8d6tojh] {
        border-color: #8FB8D6;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

    .slot-card.is-selected[b-y7h8d6tojh] {
        border-color: #1f3a5f;
        box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.25);
        background: #eef4fb;
    }

.pp-card-head[b-y7h8d6tojh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.pp-card-meta[b-y7h8d6tojh] {
    color: var(--pf-text-muted);
}

    .pp-card-meta > div[b-y7h8d6tojh] {
        line-height: 1.35;
    }

.pp-card-remarks[b-y7h8d6tojh] {
    margin-top: 0.25rem;
    color: var(--pf-text-subtle);
    font-style: italic;
}

.pp-card-actions[b-y7h8d6tojh] {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.pp-panel-actions[b-y7h8d6tojh] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}

.pp-vessel-card .badge[b-y7h8d6tojh] {
    font-size: 0.75rem;
}

.pp-move-card[b-y7h8d6tojh] {
    cursor: default;
}

.pp-shift-card[b-y7h8d6tojh],
.pp-delay-card[b-y7h8d6tojh],
.pp-op-card[b-y7h8d6tojh] {
    cursor: pointer;
}
/* /Components/Pages/PortStatus/PortStatusComponent.razor.rz.scp.css */
.psc-wrapper[b-xi2a4uc6mi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.psc-port-header[b-xi2a4uc6mi] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #12304b;
    margin-bottom: 4px;
    padding-left: 2px;
}

.psc-item[b-xi2a4uc6mi] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid #e9ecef;
}

.psc-indicator[b-xi2a4uc6mi] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}

.psc-ind-optimal[b-xi2a4uc6mi] {
    background-color: #28a745;
    box-shadow: 0 0 7px 2px rgba(40,167,69,0.5);
}

.psc-ind-closed[b-xi2a4uc6mi] {
    background-color: #dc3545;
    box-shadow: 0 0 7px 2px rgba(220,53,69,0.5);
}

.psc-ind-restricted[b-xi2a4uc6mi] {
    background-color: #ffc107;
    box-shadow: 0 0 7px 2px rgba(255,193,7,0.5);
}

.psc-ind-warning[b-xi2a4uc6mi] {
    background-color: #fd7e14;
    box-shadow: 0 0 7px 2px rgba(253,126,20,0.5);
}

.psc-text[b-xi2a4uc6mi] {
    flex: 1;
    min-width: 0;
}

.psc-label[b-xi2a4uc6mi] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.psc-details-btn[b-xi2a4uc6mi] {
    font-size: 0.75rem;
    padding: 2px 8px;
    white-space: nowrap;
}

.psc-loading[b-xi2a4uc6mi] {
    display: flex;
    align-items: center;
    padding: 6px 2px;
}

.psc-description[b-xi2a4uc6mi] {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #343a40;
}
/* /Components/Pages/Shippers/Shippers.razor.rz.scp.css */
/* ── Shell ── */
.sh-shell[b-trvshjtsd7] {
    padding: 0.75rem 0.5rem 2rem 0.5rem;
}

/* ── Breadcrumb ── */
.sh-breadcrumb-row[b-trvshjtsd7] {
    margin-bottom: 0.75rem;
}

/* ── Panel ── */
.sh-panel[b-trvshjtsd7] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dfe6ed;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sh-panel__header[b-trvshjtsd7] {
    padding: 0.55rem 0.85rem;
    font-weight: 700;
    color: #1d3550;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panel-header-blue[b-trvshjtsd7] {
    background: linear-gradient(180deg, #C9E0EE 0%, #A9CCE3 60%, #8FB8D6 100%);
}

.sh-panel__body[b-trvshjtsd7] {
    padding: 0.85rem;
}

/* ── Action bar: search + Add New on one row ── */
.sh-action-bar[b-trvshjtsd7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

/* ── Search wrapper ── */
.sh-search-wrapper[b-trvshjtsd7] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 220px;
    max-width: 400px;
    flex: 1 1 220px;
}

.sh-search-wrapper .sh-search-input[b-trvshjtsd7] {
    width: 100%;
}

.sh-search-clear[b-trvshjtsd7] {
    flex-shrink: 0;
}

/* ── Grid overrides ── */
[b-trvshjtsd7] .e-grid.grid-light-theme .e-pagerdropdown {
    display: inline-flex !important;
}

[b-trvshjtsd7] .e-grid.grid-light-theme .e-row:hover .e-rowcell {
    background-color: #eaf2fb !important;
}

[b-trvshjtsd7] .e-grid.grid-light-theme .pf-inline-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
}
/* /Components/Pages/ShippingList/Panels/TidesPanel.razor.rz.scp.css */
.tdp-body[b-ifseikzy7n] {
    font-size: .78rem;
    height: 100%;
    overflow-y: auto;
}

.tdp-list[b-ifseikzy7n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tdp-row[b-ifseikzy7n] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem .55rem;
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-card-inset);
}

.tdp-row__type[b-ifseikzy7n] {
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .04em;
    border-radius: 50px;
    padding: .08rem .45rem;
    white-space: nowrap;
}

.tdp-row__type--high[b-ifseikzy7n] {
    background: #e1efff;
    color: #12304b;
    border: 1px solid #78afd9;
}

.tdp-row__type--low[b-ifseikzy7n] {
    background: var(--pf-surface-2);
    color: var(--pf-text-muted);
    border: 1px solid var(--pf-border);
}

.tdp-row__time[b-ifseikzy7n] {
    flex: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--pf-text);
}

.tdp-row__height[b-ifseikzy7n] {
    font-variant-numeric: tabular-nums;
    color: var(--pf-text-muted);
    white-space: nowrap;
}
/* /Components/Pages/ShippingList/ShippingListPlanner.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Shipping List Planner — 3D look, aligned with the Visual Berth
   Planner and Agents Dashboard recipes (slate gradient headers,
   inset highlight + drop shadow, pressable buttons).
   NOTE: .sl-drop-indicator stays inline in the .razor file — it is a
   JS-created element and never receives the scope attribute.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Top banner ───────────────────────────────────────────────────── */
.slp-banner[b-9oygdzb0t2] {
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 40%, #1a3550 70%, #12304b 100%);
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.28);
    letter-spacing: .02em;
}

.slp-banner__badge[b-9oygdzb0t2] {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── Toolbar action buttons (pressable) ───────────────────────────── */
.slp-btn-action[b-9oygdzb0t2] {
    color: #fff;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #4a6b84 0%, #2c4d65 55%, #1a3550 100%);
    box-shadow: 0 3px 0 #0c2033, 0 2px 6px rgba(18, 48, 75, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform .08s, box-shadow .08s, opacity .12s;
}

.slp-btn-action:hover:not(:disabled)[b-9oygdzb0t2] {
    color: #fff;
    background: linear-gradient(180deg, #5a7d97 0%, #3a5d77 55%, #274361 100%);
}

.slp-btn-action:active:not(:disabled)[b-9oygdzb0t2] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0c2033;
}

.slp-btn-action:disabled[b-9oygdzb0t2] {
    opacity: .55;
    color: #fff;
}

.slp-btn-action--warn[b-9oygdzb0t2] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
    box-shadow: 0 3px 0 #78350f, 0 2px 6px rgba(217, 119, 6, 0.35);
}

.slp-btn-action--warn:hover:not(:disabled)[b-9oygdzb0t2] {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
}

.slp-btn-action--warn:active:not(:disabled)[b-9oygdzb0t2] {
    box-shadow: 0 1px 0 #78350f;
}

.slp-btn-action--success[b-9oygdzb0t2] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    box-shadow: 0 3px 0 #166534, 0 2px 6px rgba(22, 163, 74, 0.35);
}

.slp-btn-action--success:hover:not(:disabled)[b-9oygdzb0t2] {
    background: linear-gradient(180deg, #34d399 0%, #22c55e 55%, #16a34a 100%);
}

.slp-btn-action--success:active:not(:disabled)[b-9oygdzb0t2] {
    box-shadow: 0 1px 0 #166534;
}

/* ── Info-row panels (Vessels In Port / Quay Risk / Astro) ────────── */
.slp-panel[b-9oygdzb0t2] {
    border: 1px solid #dde6f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(18, 48, 75, 0.08);
    overflow: hidden;
}

/* Dead weight: every declaration here loses the tie with the global
   .card-header band rule. Left as a hook for the count/title children below. */
.slp-panel__header[b-9oygdzb0t2] {
    border-bottom: 0;
}

/* Same story as the day header: .slp-panel__header sits on a .card-header, so
   the band is light and a white-on-translucent-white count disappeared. */
.slp-panel__count[b-9oygdzb0t2] {
    background: var(--pf-brand);
    color: var(--pf-on-brand);
}

/* ── Day panel headers ─────────────────────────────────────────────
   The band is drawn by the global .card-header rule in portflow.css — these
   elements carry BOTH .card-header and .sl-day-panel-header, and the two
   selectors tie on specificity (an isolation attribute counts as a class), so
   the sheet that loads last wins and that is portflow.css.

   This block used to paint a navy gradient here and then force its children
   white with !important. The gradient lost the tie and vanished; the forced
   white text did not, because it was !important — which is why the date beside
   "Today" was white-on-white and unreadable. What is left only styles what sits
   ON the band, in tokens, so it stays legible in both themes. */
.sl-day-panel-header .text-muted[b-9oygdzb0t2] {
    color: var(--pf-text-muted) !important;
}

.sl-day-panel-header .badge[b-9oygdzb0t2] {
    background: var(--pf-brand);
    color: var(--pf-on-brand);
}

/* ── Day list / movement cards ────────────────────────────────────── */
.pf-day-list[b-9oygdzb0t2] {
    min-height: 200px;
}

/* The card ground is white, or one of the status tints below, in BOTH themes --
   those tints carry meaning and are marked DO NOT CHANGE. So the ink has to be
   pinned too: inherited --pf-text turns near-white in dark mode, which is why
   the vessel name and the movement time were invisible on a card. */
.pf-movement-card[b-9oygdzb0t2] {
    background: #fff;
    color: var(--pf-ink-on-tint);
    border: 1px solid #dde6f0;
    border-radius: 10px;
    padding: .5rem .6rem;
    cursor: grab;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(18, 48, 75, 0.1);
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.pf-movement-card:hover[b-9oygdzb0t2] {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 5px 12px rgba(18, 48, 75, 0.18);
}

.pf-movement-card.border-danger[b-9oygdzb0t2] {
    border-color: #dc3545;
}

/* Bootstrap resolves .text-muted from --bs-secondary-color, which the app maps
   to --pf-text-muted -- pale in dark mode, and unreadable on these light cards. */
.pf-movement-card .text-muted[b-9oygdzb0t2] {
    color: var(--pf-ink-on-tint-muted) !important;
}

/* Fix 3 — impossible movement (vessel does not fit) */
.pf-movement-card.pf-movement-impossible[b-9oygdzb0t2] {
    background-color: #fde2e2;
    border-color: #dc3545;
    border-width: 2px;
}

/* Fix 7 — card background colours (risk / tidal) — DO NOT CHANGE */
.pf-movement-card.ship-card--tidal[b-9oygdzb0t2] {
    background-color: #fddde6;
}

.pf-movement-card.ship-card--risk-red[b-9oygdzb0t2] {
    background-color: #f8d7da;
}

.pf-movement-card.ship-card--risk-orange[b-9oygdzb0t2] {
    background-color: #ffe5b4;
}

.pf-movement-card.ship-card--risk-green[b-9oygdzb0t2] {
    background-color: #d4edda;
}

.sl-card--no-bollards[b-9oygdzb0t2] {
    border-left: 4px solid #dc3545 !important;
}

/* Quay fouling — vessel obstructed by another berth on the same quay */
.pf-movement-card.sl-card--fouled[b-9oygdzb0t2] {
    border-left: 5px solid #dc3545 !important;
}

.sl-fouled-note[b-9oygdzb0t2] {
    font-size: .72rem;
    line-height: 1.15;
    color: #842029;
    background: #fde2e2;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    padding: .2rem .4rem;
}

/* ── Drag-and-drop states (classes toggled by JS on Blazor-rendered
      elements — scoped CSS applies) ─────────────────────────────────── */
.sl-card-dragging[b-9oygdzb0t2] {
    opacity: 0.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    outline: 2px dashed #0d6efd;
}

.pf-day-list.sl-drag-over[b-9oygdzb0t2] {
    background-color: var(--pf-brand-subtle);
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
}

/* ── Badges / labels on cards ─────────────────────────────────────── */
.sl-bollard-warning-label[b-9oygdzb0t2] {
    color: #856404;
    font-size: 0.78rem;
    font-weight: 600;
}

.sl-slot-manual-badge[b-9oygdzb0t2] {
    font-size: 0.7rem;
    color: #0d6efd;
    font-weight: 600;
    margin-left: 4px;
}

.sl-slot-stale[b-9oygdzb0t2] {
    color: #856404;
}

/* Fix 3 — manual times badge on card */
.sl-manual-times-badge[b-9oygdzb0t2] {
    font-size: .65em;
    font-weight: 600;
    padding: .15em .4em;
    border-radius: .25rem;
    background: #fd7e14;
    color: #fff;
    margin-left: .25rem;
    vertical-align: middle;
}


/* /Components/Pages/ShoreTension/ShoreTensionDeployment.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ShoreTensionDeployment — scoped component styles
   ═══════════════════════════════════════════════════════════ */

/* ── Panel headers (3D, Task 5) ────────────────────────────── */
/* Standard panel header treatment; this header carries no distinct status
   meaning across the page (every .stu-card-header on this page is the same
   navy), so it takes the base brand family. */
.stu-card-header[b-z1rojfr49s] {
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--pf-font-head);
    box-shadow: none;
    --pf-fam: var(--pf-fam-brand);
}

.stu-card-header .badge[b-z1rojfr49s] {
    padding: 2px 5px;
    margin: 0 2px;
    background: color-mix(in srgb, var(--pf-panel-head-fg) 22%, transparent) !important;
    color: var(--pf-panel-head-fg);
}

/* Pair-block card accent border */
.stu-pair-card[b-z1rojfr49s] {
    border-left: 4px solid var(--pf-brand) !important;
}

/* Sub-header inside each pair-block card; same brand family as .stu-card-header
   above (it draws no status distinction of its own, just a darker/simpler
   navy in the old palette). */
.stu-pair-header[b-z1rojfr49s] {
    color: var(--pf-panel-head-fg);
    background: var(--pf-panel-head-bg);
    border-top: 3px solid var(--pf-fam);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
    font-family: var(--pf-font-head);
    box-shadow: none;
    --pf-fam: var(--pf-fam-brand);
}

/* No colour here on purpose: this badge carries the deployment's real
   status (@GetPairStatusBadge -> bg-success/bg-warning/bg-secondary) and
   must keep that semantic colour, not the header tint. */
.stu-pair-header .badge[b-z1rojfr49s] {
    padding: 2px 5px;
    margin: 0 2px;
}

/* ── 3D buttons — shared base (Task 3) ───────────────────── */
.stu-btn[b-z1rojfr49s] {
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.stu-btn:disabled[b-z1rojfr49s] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Create Deployment — pastel blue keeps its hue but now derives from
   --pf-info via color-mix, so it tints correctly against dark mode's
   --pf-surface-0 instead of staying a fixed light-mode pastel. Ink and
   shadow follow the same idiom used for .pf-auth-notice in portflow.css. */
.stu-btn-create[b-z1rojfr49s] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-info) 18%, var(--pf-surface-0)) 0%,
        color-mix(in srgb, var(--pf-info) 26%, var(--pf-surface-0)) 60%,
        color-mix(in srgb, var(--pf-info) 34%, var(--pf-surface-0)) 100%);
    color: var(--pf-info);
    border: 1px solid color-mix(in srgb, var(--pf-info) 45%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 5px color-mix(in srgb, var(--pf-info) 22%, transparent);
}

.stu-btn-create:hover:not(:disabled)[b-z1rojfr49s] {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 4px 10px color-mix(in srgb, var(--pf-info) 30%, transparent);
    transform: translateY(-1px);
    color: var(--pf-info);
}

.stu-btn-create:active:not(:disabled)[b-z1rojfr49s] {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(0,0,0,0.10);
    filter: brightness(0.95);
}

/* Reset — pastel red, now from --pf-danger. */
.stu-btn-reset[b-z1rojfr49s] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-danger) 26%, var(--pf-surface-0)) 0%,
        color-mix(in srgb, var(--pf-danger) 36%, var(--pf-surface-0)) 60%,
        color-mix(in srgb, var(--pf-danger) 46%, var(--pf-surface-0)) 100%);
    color: var(--pf-danger);
    border: 1px solid color-mix(in srgb, var(--pf-danger) 50%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 5px color-mix(in srgb, var(--pf-danger) 22%, transparent);
}

.stu-btn-reset:hover:not(:disabled)[b-z1rojfr49s] {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 4px 10px color-mix(in srgb, var(--pf-danger) 30%, transparent);
    transform: translateY(-1px);
    color: var(--pf-danger);
}

.stu-btn-reset:active:not(:disabled)[b-z1rojfr49s] {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(0,0,0,0.10);
    filter: brightness(0.95);
}

/* Update Deployment — pastel green, now from --pf-success. */
.stu-btn-update[b-z1rojfr49s] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-success) 18%, var(--pf-surface-0)) 0%,
        color-mix(in srgb, var(--pf-success) 26%, var(--pf-surface-0)) 60%,
        color-mix(in srgb, var(--pf-success) 34%, var(--pf-surface-0)) 100%);
    color: var(--pf-success);
    border: 1px solid color-mix(in srgb, var(--pf-success) 45%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 5px color-mix(in srgb, var(--pf-success) 22%, transparent);
}

.stu-btn-update:hover:not(:disabled)[b-z1rojfr49s] {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 4px 10px color-mix(in srgb, var(--pf-success) 30%, transparent);
    transform: translateY(-1px);
    color: var(--pf-success);
}

.stu-btn-update:active:not(:disabled)[b-z1rojfr49s] {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(0,0,0,0.10);
    filter: brightness(0.95);
}

/* Save Pair Block — pastel teal, now from --pf-fam-teal (the app's teal
   family colour; there is no bare --pf-teal token). */
.stu-btn-save-pair[b-z1rojfr49s] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-fam-teal) 18%, var(--pf-surface-0)) 0%,
        color-mix(in srgb, var(--pf-fam-teal) 26%, var(--pf-surface-0)) 60%,
        color-mix(in srgb, var(--pf-fam-teal) 34%, var(--pf-surface-0)) 100%);
    color: var(--pf-fam-teal);
    border: 1px solid color-mix(in srgb, var(--pf-fam-teal) 45%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 5px color-mix(in srgb, var(--pf-fam-teal) 22%, transparent);
}

.stu-btn-save-pair:hover:not(:disabled)[b-z1rojfr49s] {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 4px 10px color-mix(in srgb, var(--pf-fam-teal) 30%, transparent);
    transform: translateY(-1px);
    color: var(--pf-fam-teal);
}

.stu-btn-save-pair:active:not(:disabled)[b-z1rojfr49s] {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(0,0,0,0.10);
    filter: brightness(0.95);
}

/* ── ACTION button in Deployment Register grid (Task 4) ─── */
/* Same pastel-green treatment as .stu-btn-update, from --pf-success. */
.btn-action-deploy[b-z1rojfr49s] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pf-success) 18%, var(--pf-surface-0)) 0%,
        color-mix(in srgb, var(--pf-success) 26%, var(--pf-surface-0)) 60%,
        color-mix(in srgb, var(--pf-success) 34%, var(--pf-surface-0)) 100%);
    color: var(--pf-success);
    border: 1px solid color-mix(in srgb, var(--pf-success) 45%, transparent);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.75rem;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 2px 4px color-mix(in srgb, var(--pf-success) 20%, transparent);
}

.btn-action-deploy:hover[b-z1rojfr49s] {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 3px 8px color-mix(in srgb, var(--pf-success) 30%, transparent);
    transform: translateY(-1px);
    color: var(--pf-success);
}

.btn-action-deploy:active[b-z1rojfr49s] {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
    filter: brightness(0.95);
}

/* Badge sizing inside deployment register grid (Task 4) */
[b-z1rojfr49s] .stu-register-grid .e-grid .badge {
    padding: 3px 6px;
}

/* ── Task 3: STATUS badge padding in Deployment Register ─── */
.deploy-register-status .badge[b-z1rojfr49s] {
    padding: 3px 6px;
}

/* ── Task 1: Deployment Status DDL — ensure text is visible on dark card ─ */
/* Was a hardcoded white-card-forces-dark-ink fix; that's exactly what
   --pf-surface-0 / --pf-text already do for both themes (same intent as
   the global .stu-status-ddl rule in portflow.css). */
[b-z1rojfr49s] .deployment-status-ddl .e-input-group,
[b-z1rojfr49s] .deployment-status-ddl .e-input-group.e-control-wrapper {
    background: var(--pf-surface-0) !important;
    border-radius: 4px !important;
}
[b-z1rojfr49s] .deployment-status-ddl input,
[b-z1rojfr49s] .deployment-status-ddl input.e-input,
[b-z1rojfr49s] .deployment-status-ddl .e-input,
[b-z1rojfr49s] .deployment-status-ddl span.e-input-value,
[b-z1rojfr49s] .deployment-status-ddl * {
    color: var(--pf-text) !important;
    background: transparent;
}
/* /Components/Pages/Vessels/VesselList.razor.rz.scp.css */
/* ── Search bar ── */
.vl-search-wrapper[b-q4kn5hyp3q] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 280px;
    max-width: 420px;
    flex: 1 1 280px;
}

.vl-search-wrapper .vl-search-input[b-q4kn5hyp3q] {
    width: 100%;
}

.vl-search-clear[b-q4kn5hyp3q] {
    flex-shrink: 0;
}

/* ── Edit / Add modal backdrop ── */
.vl-modal-backdrop[b-q4kn5hyp3q] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ── Grid restyling – matches grid-light-theme from site.css ── */
/* Ensure the page-size dropdown (PageSizes) is visible */
[b-q4kn5hyp3q] .e-grid.grid-light-theme .e-pagerdropdown {
    display: inline-flex !important;
}

/* Row hover */
[b-q4kn5hyp3q] .e-grid.grid-light-theme .e-row:hover .e-rowcell {
    background-color: #eaf2fb !important;
}

/* Compact action buttons */
[b-q4kn5hyp3q] .e-grid.grid-light-theme .pf-inline-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
}
/* /Components/Shared/SlotContextMenu.razor.rz.scp.css */
/* Sits above the dialog layer: a menu opened over a schedule inside a page must not
   be covered by anything the page already has on screen. */
.pf-ctxmenu-backdrop[b-2mrqtbb358] {
    position: fixed;
    inset: 0;
    z-index: var(--pf-z-dialog);
    background: transparent;
}

.pf-ctxmenu[b-2mrqtbb358] {
    position: fixed;
    z-index: calc(var(--pf-z-dialog) + 1);
    width: 244px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: var(--pf-space-1);
    background: var(--pf-surface-0);
    color: var(--pf-text);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow-lg);
    outline: none;
}

.pf-ctxmenu__item[b-2mrqtbb358] {
    display: flex;
    align-items: center;
    gap: var(--pf-space-2);
    width: 100%;
    height: 34px;
    padding: 0 var(--pf-space-2);
    background: transparent;
    border: 0;
    border-radius: var(--pf-radius-sm);
    color: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

    .pf-ctxmenu__item:hover:not(:disabled)[b-2mrqtbb358],
    .pf-ctxmenu__item:focus-visible[b-2mrqtbb358] {
        background: color-mix(in srgb, var(--pf-brand) 12%, transparent);
        outline: none;
    }

    .pf-ctxmenu__item:disabled[b-2mrqtbb358] {
        color: var(--pf-text-subtle);
        cursor: default;
    }

/* Separates the port call's movements from the commands above them. Not a menu item:
   nothing happens when it is clicked, and the keyboard never lands on it. */
.pf-ctxmenu__heading[b-2mrqtbb358] {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 var(--pf-space-2);
    margin-top: var(--pf-space-1);
    border-top: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf-ctxmenu__icon[b-2mrqtbb358] {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--pf-text-muted);
    font-size: 0.85rem;
}

.pf-ctxmenu__label[b-2mrqtbb358] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* A movement row: the manoeuvre on top, when it is and whether it is booked or recorded
   underneath. Split across two lines because the menu is a fixed 244px, and the time is
   exactly the half that a single line would have ellipsised away. */
.pf-ctxmenu__item--two-line[b-2mrqtbb358] {
    height: 46px;
    align-items: center;
}

.pf-ctxmenu__stack[b-2mrqtbb358] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.pf-ctxmenu__detail[b-2mrqtbb358] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pf-text-muted);
    font-size: 0.7rem;
}

.pf-ctxmenu__check[b-2mrqtbb358] {
    flex: 0 0 auto;
    color: var(--pf-success);
    font-size: 0.85rem;
}