/* --------------------------------------------------------------------------
   STATUS within a portcall
   -------------------------------------------------------------------------- */
.portcall-status-workspace { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr); gap: 8px; align-items: start; }
.portcall-status-workspace > .status-checklist-layout { grid-column: 1 / -1; }
.portcall-edit-tab-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 8px;
    align-items: start;
}
.portcall-edit-tab-layout > .tab-group {
    width: 100%;
    min-width: 0;
}
.portcall-edit-tab-layout__ordinary .section-header { text-transform: none; }
.portcall-edit-tab-layout__status > .section-wrapper {
    background: #d7dae1;
}
.status-checklist-palette {
    min-width: 0;
    padding: 6px;
    background: #c2cfd7;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
}
.status-checklist-accordion, .template-sidebar-accordion, .palette-accordion { display: grid; gap: 3px; }
.status-checklist-category, .palette-accordion__item, .template-palette-panel {
    overflow: hidden;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
}
.status-checklist-category > summary,
.palette-accordion__item > summary,
.template-palette-panel__summary {
    min-height: 29px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    color: #34475f;
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 800;
    list-style: none;
}
.status-checklist-category > summary::-webkit-details-marker,
.palette-accordion__item > summary::-webkit-details-marker,
.template-palette-panel__summary::-webkit-details-marker { display: none; }
.status-checklist-category[open] > summary { background: #e7e7ff; color: #6c7b87; border-bottom: 1px solid var(--sb-border); }
.palette-accordion__item[open] > summary,
.template-palette-panel[open] > summary { background: #edf4f8; color: #244f70; border-bottom: 1px solid var(--sb-border); }
.status-checklist-category:hover > summary { background: #e0e4f8; }
.status-checklist-items, .palette-accordion__content, .template-palette-panel__content { display: grid; gap: 3px; padding: 4px 5px; }
.status-checklist-add, .mask-field-button, .template-include-button, .public-tag-button {
    width: 100%;
    min-height: 27px;
    padding: 4px 6px;
    justify-content: flex-start;
    text-align: left;
    background: #fff;
    border: 1px solid #d1d9e1;
    color: #3d4d61;
    font-size: .78rem;
    white-space: normal;
}
.status-checklist-add:hover, .mask-field-button:hover, .template-include-button:hover, .public-tag-button:hover { background: var(--sb-primary-soft); border-color: #9cc2df; color: #235a82; }
.status-checklist-add:hover { background: #e0e4f8; }
.mask-field-button__marker { color: #8a98a8; font-weight: 500; }
.mask-field-button:hover .mask-field-button__marker { color: #5f7890; }
.status-checklist-layout { min-width: 0; }
.status-checklist-section + .status-checklist-section { margin-top: 7px; }
.status-checklist-section > h3 { margin: 0 0 4px; color: #516176; font-size: .78rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.status-checklist-section .section-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}
.status-checklist-section .status-checklist-card,
.status-fixed-layout .section-grid--mask-row > .status-checklist-card {
    grid-column: 1;
    width: 100%;
}
.status-fixed-layout .section-grid--mask-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.status-fixed-layout .section-grid--mask-row > .status-checklist-card { flex: none; }
.status-fixed-layout .mask-grid-spacer { display: none; }
.status-checklist-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.status-checklist-card__heading .sub-block-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.status-checklist-card__title { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.status-checklist-card__title:hover,
.status-checklist-card__title:focus-visible { background: #dbe9f3; color: #223247; }
.status-checklist-card--locked .status-checklist-card__title:hover,
.status-checklist-card--locked .status-checklist-card__title:focus-visible { background: #d1eecf; color: #245b34; }
.status-checklist-card__actions { display: flex; align-items: center; gap: 3px; }
.status-checklist-remove,
.status-checklist-complete {
    flex: 0 0 auto;
    width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    line-height: 1;
}
.status-checklist-remove { border-color: #d89a9a; color: var(--sb-danger); font-size: 1rem; }
.status-checklist-remove:hover { background: var(--sb-danger-soft); border-color: #c46b6b; color: var(--sb-danger-hover); }
.status-checklist-complete { border-color: #9abca9; color: var(--sb-success); }
.status-checklist-complete:hover, .status-checklist-complete.is-complete { background: var(--sb-success-soft); border-color: #79ad8f; color: var(--sb-success-hover); }
.status-checklist-card--locked { background: #ddeadd; }
.status-checklist-field-control--readonly select,
.status-checklist-field-control--readonly input,
.status-checklist-field-control--readonly textarea {
    background: #f3f6f9;
    color: var(--sb-text-soft);
    border-color: var(--sb-border);
}
.status-checklist-card--locked .status-checklist-field-control--readonly select:disabled {
    background: #dceddb !important;
    border-color: #aaaaaa !important;
}
.status-checklist-card__separator { margin: 5px 0; border: 0; border-top: 1px solid var(--sb-border); }
.status-checklist-card__separator--colored { border-top-width: 3px; border-top-color: var(--mask-border); }
.status-checklist-card--collapsed .status-checklist-card__body { display: none; }
.status-checklist-card__field-row {
    display: grid;
    grid-template-columns: minmax(150px, 15fr) minmax(135px, 15fr) minmax(0, 70fr);
    align-items: center;
    gap: 5px;
    margin: 0 0 5px;
}
.status-checklist-card__field-row--has-action {
    grid-template-columns: minmax(150px, 30%) minmax(135px, 1fr) var(--sb-control-h);
}
/* Keep the label and value widths; the note gives up space for the action. */
.status-checklist-card__field-row--has-action.status-checklist-card__field-row--has-note-control {
    grid-template-columns: minmax(150px, 15%) minmax(135px, 15%) var(--sb-control-h) minmax(0, 1fr);
    grid-template-areas: "label control action note";
}
.status-checklist-card__field-row--has-action.status-checklist-card__field-row--has-note-control > label {
    grid-area: label;
}
.status-checklist-card__field-row--has-action.status-checklist-card__field-row--has-note-control > .field-control {
    grid-area: control;
}
.status-checklist-card__field-row--has-action.status-checklist-card__field-row--has-note-control > .mask-field-action {
    grid-area: action;
}
.status-checklist-card__field-row--has-action.status-checklist-card__field-row--has-note-control > .field-note-control {
    grid-area: note;
}
.mask-field-action { flex: 0 0 var(--sb-control-h); width: var(--sb-control-h); height: var(--sb-control-h); min-height: var(--sb-control-h); padding: 0; font-size: 1rem; line-height: 1; }
.mask-field-action-icon { display: block; width: 18px; height: 18px; margin: auto; }
.mask-temporary-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.mask-temporary-toolbar > [data-temporary-tab-actions] { flex: 1 1 auto; min-width: 0; }
.mask-temporary-toolbar .actions-bar { margin: 0; }
.mask-temporary-panel .mask-action-mail .panel { padding: 8px; }
.mask-temporary-panel .mask-action-mail .form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mask-temporary-panel .mask-action-mail .field { min-width: 0; }
.mask-temporary-panel .mask-action-mail .col-md-6,
.mask-temporary-panel .mask-action-mail .col-md-3 { grid-column: span 12; }
.status-checklist-card__field-row > label,
.status-checklist-card__field-row > .field-control,
.status-checklist-card__field-row > .field-note-control { min-width: 0; margin: 0; }
.status-checklist-card__field-row > .field-control > :is(input, select, textarea),
.status-checklist-card__field-row > .field-note-control > .field-note-input { width: 100%; min-width: 0; }
.status-checklist-card__field-row > .field-note-control .field-note-input { background: #eeeeee !important; border-color: var(--sb-border); color: var(--sb-text); }
.status-checklist-card__field-row--has-note > .field-note-control .field-note-input { background: #fff8cc !important; border-color: #d7be5e; color: #59480a; }
.status-checklist-empty { min-height: 110px; padding: 18px; display: grid; place-content: center; border: 1px dashed #b9c4ce; border-radius: var(--sb-radius); text-align: center; color: var(--sb-text-soft); }
.status-structure-form { display: none; }
.status-fixed-layout { margin-bottom: 7px; }
.portcall-status-workspace--after-fixed { padding-top: 7px; border-top: 1px solid var(--sb-border); }

/* --------------------------------------------------------------------------
   Global STATUS board
   -------------------------------------------------------------------------- */
.status-controls { margin-bottom: 7px; }
#status-search {
    height: var(--sb-control-h);
    padding: 2px 0 2px 3px;
}
.status-controls__form { display: grid; grid-template-columns: minmax(220px, 2fr) auto minmax(160px, .8fr) auto; align-items: end; gap: 7px; }
.status-controls__form .field { margin: 0; }
.status-controls__accordion-actions { display: flex; align-items: end; gap: 5px; white-space: nowrap; }
.status-grid-wrap {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 260px;
    height: calc(100dvh - 132px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    overscroll-behavior: contain;
}
.status-grid__sticky-underlay {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    width: 100%;
    height: var(--status-sticky-height, 0px);
    margin-bottom: calc(-1 * var(--status-sticky-height, 0px));
    background: #fff;
    pointer-events: none;
}
.status-grid { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.status-grid__label-column { width: 220px; }
.status-grid__ship-column { width: 112px; }
.status-grid th, .status-grid td {
    padding: 3px 5px;
    border-right: 1px solid #dfe5eb;
    border-bottom: 1px solid #dfe5eb;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
    font-size: .78rem;
    line-height: 1.15;
}
.status-grid tr > *:last-child { border-right: 0; }
.status-grid__label { background: #e4e8ec; color: #405064; text-align: left !important; font-weight: 800; }
.status-grid__ship-header th { background: #dce3e9; }
.status-grid__ship-header td { background: #fff; color: #26384f; font-weight: 750; }
.status-grid__ship-header[data-sticky-row] th,
.status-grid__ship-header[data-sticky-row] td { z-index: 30 !important; background-clip: border-box; box-shadow: inset 0 -1px 0 #c9d1d9; }
.status-grid tbody tr:not([data-sticky-row]) > th,
.status-grid tbody tr:not([data-sticky-row]) > td { position: relative; z-index: 0; }
.status-grid__ship-link { color: #255c84; font-weight: 850; }
.status-grid__ship-id-link { display: inline-flex; align-items: center; }
.status-grid__section-divider > th,
.status-grid__section-divider > td {
    padding: 3px 5px;
    background: #a9bfd7 !important;
    color: #263242;
    border-color: #91a7bf;
    font-weight: 850;
}
.status-grid__section-divider > th { text-align: left !important; }
.status-grid__section-divider .status-grid__block-section { font-weight: inherit; }
.status-grid__section-divider-fill { border-right: 0 !important; }
.status-grid__block > th.status-grid__label,
.status-grid__block > td.status-grid__block-fill {
    padding: 3px 5px;
    background: #cfd7e0 !important;
    color: #263242;
    border-color: #929ea9;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.status-grid__block-fill { border-right: 0 !important; }
.status-grid__section-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 8px);
    min-height: 22px;
    margin: 0 4px;
    padding: 0 2px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: 1.15;
    letter-spacing: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}
.status-grid__section-toggle::before {
    content: "▾";
    width: 1.05em;
    flex: 0 0 1.05em;
    color: #3b4652;
    font-size: .92em;
}
.status-grid__section-toggle:hover { background: #d9e1ea; color: #263242; }
.status-grid__section-toggle[aria-expanded="false"]::before { content: "▸"; }
.status-grid__section-toggle:focus-visible { outline: 2px solid #566473; outline-offset: 1px; }
.status-grid__summary-squares {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    margin-inline: 0 auto;
    visibility: hidden;
}
.status-grid__block.is-collapsed .status-grid__summary-squares { visibility: visible; }
.status-grid__summary-square {
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 20px;
    border: 1px solid #929ea9;
    border-radius: 2px;
}
.status-grid__summary-square--plain { background: #fff; border-color: #c9d1d9; }
.status-grid__summary-square--missing { background: #c40000; border-color: #a90000; }
.status-grid__block-section { font-weight: 400; }
.status-grid__block-subsection { font-weight: 850; }
.status-grid__field-row[hidden] { display: none; }

/* Only the grey colspan section bars are forced to uppercase on STATUS.
   Every other label keeps the exact case defined in MASK. */
.status-grid__ship-header > th.status-grid__label,
.status-grid__field-row > th.status-grid__label,
.status-grid__no-status,
.status-value { text-transform: none; }
.status-grid__field-row:hover > th, .status-grid__field-row:hover > td { box-shadow: inset 0 0 0 999px rgba(31, 94, 139, .12); }
.status-grid__empty-column { background: #fbfcfd; color: transparent; }
.status-grid__no-status { padding: 10px; color: var(--sb-text-soft); text-align: left; }
.status-cell--absent { background: #e4e8ec !important; color: transparent; }
.status-cell--completed { background: #c3f7d6 !important; color: transparent; border-color: #b9d9c5 !important; }
.status-cell--absent .status-value,
.status-cell--completed .status-value { visibility: hidden; }
/* STATUS matrix uses stronger colours than the edit form so values remain
   distinguishable on bright/high-luminance displays.  Edit-form palette stays unchanged. */
.status-cell.mask-value--green  { --mask-bg:#78c98e; --mask-fg:#143f25; --mask-border:#4eaa68; }
.status-cell.mask-value--red    { --mask-bg:#ef8b8b; --mask-fg:#5d1717; --mask-border:#d45e5e; }
.status-cell.mask-value--yellow { --mask-bg:#f1d85d; --mask-fg:#4f4100; --mask-border:#c9ad2f; }
.status-cell.mask-value--orange { --mask-bg:#f6b207; --mask-fg:#4d3600; --mask-border:#c99000; }
.status-cell.mask-value--blue   { --mask-bg:#78addb; --mask-fg:#153c5d; --mask-border:#4c87ba; }
.status-cell.mask-value--gray   { --mask-bg:#b8c0c8; --mask-fg:#303840; --mask-border:#929ca6; }
.status-cell.mask-value--violet { --mask-bg:#b79bd8; --mask-fg:#45285f; --mask-border:#9471bd; }
.status-cell.mask-value--purple { --mask-bg:#a78bd3; --mask-fg:#382255; --mask-border:#8063b4; }
.status-cell.mask-value--apricot{ --mask-bg:#e5ad87; --mask-fg:#59341f; --mask-border:#c98257; }
.status-cell.mask-value--azure  { --mask-bg:#7fc5e4; --mask-fg:#174b64; --mask-border:#4da1c6; }
.status-cell[class*="mask-value--"] { background: var(--mask-bg); color: var(--mask-fg); border-color: var(--mask-border); }
.status-value { display: block; width: 100%; min-height: 18px; padding: 2px 3px; border-radius: 3px; font-weight: 700; }
.status-cell[class*="mask-value--"] .status-value { background: transparent; color: inherit; font-weight: 850; }
.status-cell--missing .status-value { color: #c40000; font-weight: 900; }