/* Minimal reset (replaces Tailwind Preflight, removed 2026-07) */
*, ::before, ::after {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    line-height: inherit;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, select {
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

dialog {
    padding: 0;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}

[role="button"], button {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

/* Lovable / Seafar prototype refresh */
:root {
    /* Layout scales — use these in new or edited rules; remaining literal values migrate
       opportunistically. Radius scale reflects the values the sheet actually uses. */
    --bb-space-1: .25rem;
    --bb-space-2: .5rem;
    --bb-space-3: .75rem;
    --bb-space-4: 1rem;
    --bb-space-6: 1.5rem;
    --bb-space-8: 2rem;
    --bb-radius-sm: 12px;
    --bb-radius-md: 18px;
    --bb-radius-lg: 24px;
    --bb-radius-pill: 999px;
    --bb-font-xs: .75rem;
    --bb-font-sm: .82rem;
    --bb-font-md: .92rem;
    --bb-font-lg: 1.1rem;

    --rz-primary: #29A9A7;
    --rz-secondary: #EFF8F8;
    --rz-success: #0d9488;
    --rz-warning: #f59e0b;
    --rz-danger: #ef4444;
    --rz-base-background-color: #fafafa;
    --rz-text-color: #333333;
    --rz-input-background-color: #ffffff;
    --rz-input-color: #333333;
    --rz-input-border: 1px solid #e0e0e0;
    --rz-dropdown-item-hover-background-color: #eff8f8;
    --rz-grid-header-background-color: #f5f5f5;
    --rz-grid-cell-color: #333333;
    --blackbox-bg: #fafafa;
    --blackbox-surface: #ffffff;
    --blackbox-surface-strong: #eff8f8;
    --blackbox-border: #e0e0e0;
    --blackbox-text: #333333;
    --blackbox-muted: #666666;
    --blackbox-primary: #29A9A7;
    --blackbox-primary-dark: #0d9488;
    --blackbox-navy: #0d1f31;
    --blackbox-shadow: 0 14px 40px rgba(15, 23, 42, .08);
    --rz-series-1: #29A9A7;
    --rz-series-2: #0D9488;
    --rz-series-3: #38BDF8;
    --rz-series-4: #0D1F31;
    --rz-series-5: #F59E0B;
    --rz-series-6: #FB7185;
    --rz-series-7: #8EDBD9;
    --rz-series-8: #60A5FA;
    --rz-series-9: #14B8A6;
    --rz-series-10: #67E8F9;
    --rz-series-11: #FBBF24;
    --rz-series-12: #93C5FD;
    --rz-series-13: #5EEAD4;
    --rz-series-14: #0F766E;
    --rz-series-15: #7DD3FC;
    --rz-series-16: #334155;
    --rz-series-17: #FDBA74;
    --rz-series-18: #FDA4AF;
    --rz-series-19: #CFF8F7;
    --rz-series-20: #BFDBFE;
    --rz-series-21: #99F6E4;
    --rz-series-22: #BAE6FD;
    --rz-series-23: #FDE68A;
    --rz-series-24: #CBD5E1;
    --rz-chart-axis-color: #dbe4e8;
    --rz-chart-axis-label-color: #64748b;
    --rz-chart-tooltip-background: rgba(255,255,255,.96);
    --rz-chart-tooltip-color: #0d1f31;
    --rz-chart-tooltip-item-hover-background-color: #eff8f8;
    --rz-chart-marker-stroke: #fafafa;
    --blackbox-chart-surface: #f3f7f7;
    --blackbox-chart-surface-border: #dfe8ea;
    --blackbox-chart-axis: #d8e4e7;
    --blackbox-chart-axis-label: #64748b;
    --blackbox-chart-line: var(--blackbox-primary);
    --blackbox-chart-cursor: #fb7185;
    --blackbox-chart-marker-fill: #ffffff;
    --blackbox-chart-marker-stroke: var(--blackbox-primary-dark);
    --blackbox-chart-track-start: #38bdf8;
    --blackbox-chart-track-end: #f59e0b;
    --blackbox-chart-donut-center: #ffffff;
    --blackbox-chart-donut-text: #0d1f31;
    --blackbox-chart-legend-text: #475569;
    --blackbox-chart-legend-value: #0d1f31;
    --blackbox-chart-pill-border: rgba(13,31,49,.12);
    --blackbox-chart-pill-text: #0d1f31;
    --blackbox-chart-state-remote-fill: rgba(41,169,167,.22);
    --blackbox-chart-state-remote-border: rgba(41,169,167,.34);
    --blackbox-chart-state-remote-text: #0f766e;
    --blackbox-chart-state-local-fill: rgba(148,163,184,.18);
    --blackbox-chart-state-local-border: rgba(148,163,184,.32);
    --blackbox-chart-state-local-text: #334155;
    --blackbox-chart-state-unassigned-fill: rgba(100,116,139,.14);
    --blackbox-chart-state-unassigned-border: rgba(100,116,139,.24);
    --blackbox-chart-state-unassigned-text: #334155;
    --blackbox-chart-state-alert-fill: rgba(239,68,68,.16);
    --blackbox-chart-state-alert-border: rgba(239,68,68,.28);
    --blackbox-chart-state-alert-text: #991b1b;
    --blackbox-chart-state-inactive-fill: rgba(13,148,136,.14);
    --blackbox-chart-state-inactive-border: rgba(13,148,136,.24);
    --blackbox-chart-state-inactive-text: #115e59;
    --blackbox-chart-fill-1: rgba(41,169,167,.22);
    --blackbox-chart-fill-2: rgba(56,189,248,.18);
    --blackbox-chart-fill-3: rgba(13,148,136,.16);
    --blackbox-chart-fill-4: rgba(245,158,11,.18);
    --blackbox-chart-fill-5: rgba(251,113,133,.16);
    --blackbox-chart-fill-6: rgba(148,163,184,.18);
    /* Solid line-weight variants of the fill hues for multi-series chart strokes and legend swatches. */
    --blackbox-chart-series-1: #0d9488;
    --blackbox-chart-series-2: #0284c7;
    --blackbox-chart-series-3: #d97706;
    --blackbox-chart-series-4: #7c3aed;
    --blackbox-chart-series-5: #e11d48;
    --blackbox-chart-series-6: #64748b;
}

html,
body,
#app {
    font-family: Inter, "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    background: var(--blackbox-bg);
    color: var(--blackbox-text);
    min-height: 100%;
    margin: 0;
}

* {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.brand-subtitle, .eyebrow, small, dt {
    color: var(--blackbox-muted);
}

.candidate-refresh-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--blackbox-primary);
    border-radius: 16px;
    background: rgba(239,248,248,.08);
}

.candidate-refresh-message {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--blackbox-primary);
    font-weight: 700;
}

.candidate-refresh-message i {
    color: inherit;
}

.top-nav {
    display: flex;
    gap: 1rem;
}

.top-nav a, .inline-nav a {
    padding: .55rem .9rem;
    border-radius: var(--bb-radius-pill);
    color: var(--blackbox-muted);
}

.user-pill {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--bb-radius-pill);
    padding: .5rem .85rem;
    color: #ccfbf1;
    background: rgba(255,255,255,.05);
}

.header-user-pill strong,
.header-user-pill small {
    display: block;
}

.header-user-pill small {
    color: var(--blackbox-muted);
}

.header-action-button {
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-pill);
    padding: .5rem .95rem;
    background: rgba(255,255,255,.06);
    color: #e2f3f1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.login-card h1 {
    margin: .1rem 0;
}

.login-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.login-support-copy {
    color: #a9cbc6;
    margin: 0;
}

.hero-panel h1, .detail-header h1 {
    margin: .35rem 0;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
}

.hero-copy {
    max-width: 760px;
    color: #b7d7d3;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: .8rem;
    min-width: 390px;
}

.hero-stats div, .metric-card {
    border: 1px solid var(--blackbox-border);
    border-radius: 22px;
    background: rgba(0,0,0,.18);
    padding: 1rem;
}

.hero-stats span {
    display: block;
    font-size: 2rem;
    font-weight: 800;
}

.toolbar-grid, .incident-form-grid, .dialog-form-grid, .upload-grid, .analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

label span,
.filter-field > span,
.multi-file-picker > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--blackbox-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
}

.span-2 {
    grid-column: span 2;
}

.toolbar-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
}

.dialog-cancel-button.rz-button {
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.06) !important;
    color: #dff7f4 !important;
}

.dialog-cancel-button.rz-button:hover,
.dialog-cancel-button.rz-button:focus-visible {
    background: rgba(255,255,255,.11) !important;
    color: #ffffff !important;
}

.rz-dialog-content:has(.multi-upload-dialog) {
    overflow: hidden !important;
}

.multi-upload-dialog {
    display: grid;
    gap: 1.15rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(68vh, 680px);
    min-height: 0;
    padding-bottom: .85rem;
}

/* Single-file RCA variant: size to its content so the dialog stays short. Without this the
   action row would land in the tall minmax(0,1fr) row above and the buttons would stretch. */
.multi-upload-dialog.rca-upload-dialog {
    grid-template-rows: none;
    height: auto;
    gap: 1rem;
    padding-bottom: 0;
}

.multi-upload-dialog.rca-upload-dialog .upload-dialog-actions {
    margin-top: .5rem;
    align-items: center;
}

/* The time-shift note belongs with its inputs — tuck it up close and pull the file picker
   nearer, so two full grid gaps don't stack between the time shift and the upload. */
.multi-upload-dialog > .file-hint {
    margin-top: -.75rem;
    margin-bottom: -.55rem;
}

/* The upload tabs (VHF, camera) live inside the manage-evidence dialog and must fill their tab
   panel rather than carry their own fixed height, which stacked a second scrollbar on top of the
   dialog's. Only the file list scrolls. RCA's upload is content-sized (short) and excluded.
   Scoped to the panel that actually holds an upload form, so sibling tabs keep their own scroll. */
.manage-evidence-tabs .manage-dialog-tabs > .rz-tabview-panels > .rz-tabview-panel:has(.multi-upload-dialog:not(.rca-upload-dialog)) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.manage-evidence-tabs .multi-upload-dialog:not(.rca-upload-dialog) {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

/* VHF stacks a time-shift block beside the picker in the top row, so its grid has an extra track
   above the file list (which stays the flexible, scrolling row). */
.multi-upload-dialog.vhf-upload-dialog {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.upload-top-row {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.upload-time-shift {
    display: grid;
    gap: .75rem;
}

.upload-file-region {
    min-height: 0;
    overflow: hidden;
}

.retained-file-input {
    display: none;
}

.multi-file-picker input[type="file"]::file-selector-button {
    margin-right: .9rem;
    border: 0;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-primary);
    color: #ffffff;
    padding: .6rem .9rem;
    font: inherit;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(41,169,167,.22);
    transition: background-color .18s ease;
}

.multi-file-picker input[type="file"]::-webkit-file-upload-button {
    margin-right: .9rem;
    border: 0;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-primary);
    color: #ffffff;
    padding: .6rem .9rem;
    font: inherit;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(41,169,167,.22);
    transition: background-color .18s ease;
}

.multi-file-picker input[type="file"]:hover::file-selector-button,
.multi-file-picker input[type="file"]:focus-visible::file-selector-button {
    background: var(--blackbox-primary-dark);
}

.multi-file-picker input[type="file"]:hover::-webkit-file-upload-button,
.multi-file-picker input[type="file"]:focus-visible::-webkit-file-upload-button {
    background: var(--blackbox-primary-dark);
}

.multi-file-picker input[type="file"]:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.multi-file-picker input[type="file"]:disabled::file-selector-button,
.multi-file-picker input[type="file"]:disabled::-webkit-file-upload-button {
    cursor: not-allowed;
    opacity: .82;
    box-shadow: none;
    transform: none;
}

.upload-empty-state {
    border: 1px dashed var(--blackbox-border);
    border-radius: 20px;
    min-height: 100%;
    padding: 1.25rem;
    display: grid;
    place-items: center;
    color: var(--blackbox-muted);
    text-align: center;
}

.upload-file-list {
    display: grid;
    gap: .9rem;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.upload-file-heading, .upload-file-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.upload-file-heading strong, .upload-file-heading small {
    display: block;
}

.upload-file-heading small, .file-hint {
    color: var(--blackbox-muted);
}

.upload-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .9rem;
}

.upload-dialog-actions {
    margin-top: 1.6rem;
    padding: .35rem .15rem .85rem;
}

.readonly-upload-value {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: .6rem .75rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: rgba(255,255,255,.04);
    color: var(--blackbox-muted);
    font-weight: 700;
}

.upload-status {
    border-radius: var(--bb-radius-pill);
    padding: .25rem .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.upload-status-uploading {
    background: rgba(96,165,250,.16);
    color: #bfdbfe;
}

.upload-status-succeeded {
    background: rgba(20,184,166,.18);
    color: #99f6e4;
}

.upload-status-failed {
    background: rgba(239,68,68,.18);
    color: #fecaca;
}

.upload-error {
    margin-top: .75rem;
    color: #fecaca;
    word-break: break-word;
}

.section-heading, .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.section-heading h2, .content-card h2 {
    margin: .2rem 0 .8rem;
}

.dialog-intro {
    margin-bottom: 1.25rem;
}

.dialog-intro h2 {
    margin: .25rem 0 .35rem;
}

.dialog-intro p:not(.eyebrow), .section-copy, .file-hint {
    color: #a9cbc6;
}

.rz-dialog-wrapper {
    background: transparent !important;
    backdrop-filter: blur(6px);
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
}

.rz-dropdown-filter-container,
.rz-dropdown-filter {
    background: #071114 !important;
    color: #e2f3f1 !important;
}

.blackbox-grid tr:hover td *,
.blackbox-grid .rz-selectable tbody tr:hover td *,
.blackbox-grid .rz-datatable-data tr:hover td *,
.blackbox-grid .rz-data-row:hover td * {
    color: inherit !important;
}

.blackbox-grid .rz-paginator-page,
.blackbox-grid .rz-paginator-first,
.blackbox-grid .rz-paginator-prev,
.blackbox-grid .rz-paginator-next,
.blackbox-grid .rz-paginator-last {
    color: #c8eee9 !important;
    border-radius: var(--bb-radius-pill) !important;
}

.blackbox-grid .rz-state-active {
    background: rgba(20,184,166,.22) !important;
    color: #ffffff !important;
}

.rz-notification {
    width: min(440px, calc(100vw - 2rem)) !important;
}

.rz-notification-message,
.rz-growl-message {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    color: #dff7f4 !important;
}

.rz-notification-detail,
.rz-growl-message p {
    color: #b7d7d3 !important;
    overflow-wrap: anywhere !important;
}

.rz-notification-icon,
.rz-growl-image {
    color: #5eead4 !important;
}

.detail-header {
    margin-bottom: 1rem;
}

.evidence-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.evidence-status-banner h2 {
    margin: .2rem 0 .45rem;
}

.evidence-status-copy {
    margin: 0;
    max-width: 860px;
    color: #d9ece9;
}

.evidence-status-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
}

.evidence-status-meta span {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--bb-radius-pill);
    padding: .35rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-card {
    padding: 1.1rem;
}

dl {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .5rem .8rem;
}

dd {
    margin: 0;
}

.camera-layout-shell {
    display: grid;
    gap: 1rem;
}

.media-grid {
    display: grid;
    gap: 1rem;
}

.media-grid-regular {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-grid-secondary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.camera-header span, .camera-header small {
    display: block;
}

.camera-header small {
    color: var(--blackbox-muted);
}

.camera-header button {
    border: 0;
    color: var(--blackbox-muted);
    background: transparent;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.camera-header button:hover:not(:disabled),
.camera-header button:focus-visible:not(:disabled) {
    background: #eff8f8;
    color: #0f766e;
    box-shadow: 0 8px 18px rgba(41,169,167,.14);
    outline: 0;
}

.camera-header button:disabled {
    color: var(--blackbox-muted);
    cursor: default;
}

.icon-button i,
.timeline-icon-button i,
.vhf-channel-icon-button i {
    font-size: 1.05rem;
}

.camera-video-stack {
    position: relative;
    min-height: 220px;
    background: black;
}

.camera-panel video, .full-camera video {
    width: 100%;
    height: 220px;
    object-fit: contain;
    object-position: center;
    display: none;
    background: black;
}

.camera-panel video.is-active, .full-camera video.is-active {
    display: block;
}

.camera-panel-compact .camera-video-stack,
.camera-panel-compact .camera-empty {
    min-height: 132px;
}

.camera-frame-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: black;
}

.has-active-video .camera-frame-fallback,
.has-active-video .camera-frame-overlay {
    display: none;
}

.camera-frame-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .4rem .7rem;
    color: var(--blackbox-muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(to top, rgba(2,8,9,.82), rgba(2,8,9,0));
    text-align: right;
}

.camera-empty strong {
    display: block;
}

.camera-empty small {
    display: block;
    text-align: center;
    max-width: 32ch;
}

.camera-footage-status {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--blackbox-border);
    border-radius: 16px;
    background: radial-gradient(circle at left, rgba(20,184,166,.10), rgba(2,8,9,.6));
    color: var(--blackbox-muted);
}

.camera-footage-status strong {
    color: #dff7f4;
}

.candidate-actions {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
}

.manage-footage-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .85rem;
}

.footage-row-actions {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}

/* Color the icon-only action buttons with the theme accent in both rest and row-hover states
   (the generic grid hover rule otherwise darkens them to near-black). */
.blackbox-grid .footage-row-actions .rz-button,
.blackbox-grid .footage-row-actions .rz-button i,
.blackbox-grid tr:hover td .footage-row-actions .rz-button,
.blackbox-grid tr:hover td .footage-row-actions .rz-button i {
    color: var(--blackbox-primary) !important;
}

.footage-group-count {
    margin-left: .5rem;
    color: var(--blackbox-muted);
    font-size: .78rem;
}

/* Fixed-height, scrollable footage grid so the dialog does not grow with the number of rows. */
.manage-footage {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.multi-file-picker.is-disabled {
    pointer-events: none;
    opacity: .55;
}

.navigation-map-canvas {
    width: 100%;
    height: 220px;
    background: #081012;
}

.camera-panel-compact .navigation-map-stack,
.camera-panel-compact .navigation-map-canvas {
    min-height: 132px;
    height: 132px;
}

.navigation-map-panel .leaflet-container {
    background: #081012;
}

.navigation-map-panel .leaflet-control-attribution {
    background: rgba(2, 8, 9, .76);
    color: #cde6e2;
}

.navigation-map-panel .leaflet-control-attribution a {
    color: #7dd3fc;
}

.navigation-map-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem .85rem .85rem;
    border-top: 1px solid var(--blackbox-border);
    color: var(--blackbox-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.navigation-map-meta strong {
    color: #dff7f4;
    margin-right: .35rem;
}

.camera-empty, .empty-state {
    display: grid;
    place-items: center;
    color: var(--blackbox-muted);
}

/* Text-message empty states keep their breathing room; .camera-empty must not — it sits in a
   height-stretched grid row next to fixed-height video panels, and margin here made empty panels
   ~100px taller than video ones, stretching the video panels and padding their bottoms. */
.empty-state {
    margin: 50px;
}

.has-active-video .camera-gap-overlay {
    display: none;
}

.camera-gap-overlay strong, .camera-gap-overlay small {
    display: block;
}

.timeline-jump-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--blackbox-primary);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .18rem;
    cursor: pointer;
}

.timeline-jump-link:hover,
.timeline-jump-link:focus-visible {
    color: var(--blackbox-primary-dark);
    outline: 0;
}

.camera-frame-overlay .timeline-jump-link,
.camera-gap-overlay .timeline-jump-link {
    color: var(--blackbox-primary);
}

.camera-frame-overlay .timeline-jump-link:hover,
.camera-frame-overlay .timeline-jump-link:focus-visible,
.camera-gap-overlay .timeline-jump-link:hover,
.camera-gap-overlay .timeline-jump-link:focus-visible {
    color: var(--blackbox-primary-dark);
}

.camera-segment-list span {
    flex: 0 0 auto;
    border: 1px solid rgba(94,234,212,.22);
    border-radius: var(--bb-radius-pill);
    background: rgba(20,184,166,.08);
    color: var(--blackbox-text);
    font-size: .78rem;
}

.camera-segment-list small {
    margin-left: .35rem;
    color: var(--blackbox-muted);
}

.camera-panel-compact .camera-segment-list {
    display: none;
}

.actions-list {
    display: grid;
    gap: .8rem;
}

.action-row {
    border: 1px solid var(--blackbox-border);
    border-radius: 20px;
    background: rgba(0,0,0,.18);
    padding: 1rem;
}

.action-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.vhf-section-meta {
    color: var(--blackbox-muted);
    font-size: .82rem;
}

.vhf-channel-list {
    display: grid;
    gap: 1rem;
}

.vhf-channel {
    border: 1px solid rgba(20,184,166,.22);
    border-radius: var(--bb-radius-lg);
    background: linear-gradient(180deg, rgba(18, 28, 33, .95), rgba(7, 14, 18, .92));
    overflow: hidden;
}

.vhf-channel-muted {
    border-style: dashed;
    opacity: .76;
}

.vhf-channel-shell {
    display: grid;
    grid-template-columns: 8.75rem minmax(0, 1fr);
}

.vhf-channel-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    min-height: 132px;
    padding: 1rem;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ecfeff;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}

.vhf-channel-label-title {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .86;
}

.vhf-channel-label strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.vhf-channel-label small {
    color: rgba(236, 254, 255, .8);
}

.vhf-channel-body {
    display: grid;
    gap: .85rem;
    padding: 1rem 1.1rem;
}

.vhf-channel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.vhf-channel-status {
    display: grid;
    gap: .2rem;
}

.vhf-channel-status strong {
    font-size: .95rem;
}

.vhf-channel-status small {
    color: var(--blackbox-muted);
}

.vhf-channel-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.vhf-channel-button {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--bb-radius-pill);
    background: rgba(255,255,255,.05);
    color: var(--blackbox-text);
    padding: .5rem .85rem;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.vhf-channel-button:hover:not(:disabled) {
    border-color: rgba(20,184,166,.45);
    background: rgba(20,184,166,.12);
    transform: translateY(-1px);
}

.vhf-channel-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.vhf-channel-button.is-inactive {
    border-color: rgba(20,184,166,.38);
    background: rgba(20,184,166,.12);
    color: #ccfbf1;
}

.vhf-channel-icon-button {
    width: 2.4rem;
    justify-content: center;
    padding: .5rem !important;
}

.vhf-timeline-shell {
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: #0b1116;
    overflow: hidden;
    padding: .35rem .5rem;
}

.vhf-timeline-canvas {
    display: block;
    width: 100%;
    height: 112px;
    cursor: pointer;
}

.vhf-hidden-audio {
    display: none;
}

.vhf-timeline-scale {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: var(--blackbox-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.vhf-timeline-scale strong {
    color: #ccfbf1;
}

.vhf-chat-window {
    display: grid;
    gap: .75rem;
    padding: 0 1.1rem 1.1rem calc(8.75rem + 1.1rem);
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: .55rem;
}

.vhf-chat-bubble {
    width: 100%;
    display: grid;
    gap: .55rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--bb-radius-md);
    background: rgba(255,255,255,.04);
    color: var(--blackbox-text);
    padding: .9rem 1rem;
    text-align: left;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.vhf-chat-bubble:hover {
    border-color: rgba(20,184,166,.38);
    background: rgba(20,184,166,.08);
    transform: translateY(-1px);
}

.vhf-chat-bubble.is-active {
    border-color: rgba(20,184,166,.5);
    background: linear-gradient(180deg, rgba(20,184,166,.14), rgba(255,255,255,.04));
    box-shadow: 0 0 0 1px rgba(20,184,166,.15);
}

.vhf-chat-bubble p {
    margin: 0;
}

.vhf-chat-bubble-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--blackbox-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

blockquote {
    margin: .8rem 0;
    padding: .75rem 1rem;
    border-left: 3px solid #14b8a6;
    background: rgba(20,184,166,.10);
    border-radius: var(--bb-radius-sm);
}

.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.telemetry-card-wide {
    grid-column: span 2;
}

.metric-card span, .metric-card strong, .metric-card small {
    display: block;
}

.telemetry-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .9rem;
}

.telemetry-card-heading > div {
    display: grid;
    gap: .28rem;
}

.telemetry-card-heading span {
    color: var(--blackbox-chart-axis-label);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
}

.telemetry-card-heading strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.telemetry-card-heading small,
.telemetry-card p {
    color: var(--blackbox-muted);
    overflow-wrap: anywhere;
}

.telemetry-card-note {
    text-align: right;
    max-width: 220px;
}

.telemetry-chart {
    display: block;
    width: 100%;
}

.telemetry-state-shell,
.telemetry-line-shell,
.telemetry-position-shell {
    display: grid;
    gap: .75rem;
}

.telemetry-state-track {
    fill: var(--blackbox-chart-surface);
    stroke: var(--blackbox-chart-surface-border);
    stroke-width: 1;
}

.telemetry-state-segment.is-running {
    fill: var(--blackbox-chart-state-remote-fill);
}

.telemetry-state-segment.is-idle {
    fill: var(--blackbox-chart-state-local-fill);
}

/* Dashed reference line at value 0 for series that span both positive and negative. */
.telemetry-zero-line {
    stroke: var(--blackbox-primary);
    stroke-width: 1;
    stroke-dasharray: 5 5;
    opacity: .5;
}

.telemetry-line-path {
    fill: none;
    stroke: var(--blackbox-chart-line);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.telemetry-line-marker {
    fill: var(--blackbox-chart-marker-fill);
    stroke: var(--blackbox-chart-marker-stroke);
    stroke-width: 3;
}

.telemetry-line-hover-wrap {
    position: relative;
}

.telemetry-line-chart {
    cursor: crosshair;
}

/* Keep pointer events on the svg root so OffsetX maps cleanly to viewBox coordinates. */
.telemetry-line-chart * {
    pointer-events: none;
}

.telemetry-hover-line {
    stroke: var(--blackbox-chart-axis-label);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    opacity: .7;
}

.telemetry-hover-tooltip {
    position: absolute;
    bottom: calc(100% + .25rem);
    transform: translateX(-50%);
    padding: .3rem .6rem;
    border: 1px solid var(--blackbox-border);
    border-radius: .5rem;
    background: var(--rz-chart-tooltip-background);
    color: var(--rz-chart-tooltip-color);
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
    white-space: pre-line;
    pointer-events: none;
    z-index: 3;
}

.telemetry-position-surface {
    fill: var(--blackbox-chart-surface);
    stroke: var(--blackbox-chart-surface-border);
    stroke-width: 1;
}

.telemetry-track-path {
    fill: none;
    stroke: var(--blackbox-chart-line);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.telemetry-track-start {
    fill: var(--blackbox-chart-track-start);
    stroke: var(--blackbox-chart-marker-fill);
    stroke-width: 2;
}

.telemetry-track-end {
    fill: var(--blackbox-chart-track-end);
    stroke: var(--blackbox-chart-marker-fill);
    stroke-width: 2;
}

.telemetry-track-cursor {
    fill: var(--blackbox-chart-marker-fill);
    stroke: var(--blackbox-chart-cursor);
    stroke-width: 3;
}

.telemetry-axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--blackbox-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.telemetry-axis strong {
    color: var(--blackbox-chart-legend-value);
}

.telemetry-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.telemetry-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    color: var(--blackbox-muted);
    font-variant-numeric: tabular-nums;
}

.telemetry-legend-swatch {
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.telemetry-legend-item strong {
    color: var(--blackbox-chart-legend-value);
}

.telemetry-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bb-radius-pill);
    padding: .35rem .7rem;
    font-size: .76rem;
    font-weight: 700;
    border: 1px solid var(--blackbox-chart-pill-border);
}

.telemetry-chip-running {
    background: var(--blackbox-chart-state-remote-fill);
    color: var(--blackbox-chart-state-remote-text);
}

.telemetry-chip-idle {
    background: var(--blackbox-chart-state-local-fill);
    color: var(--blackbox-chart-state-local-text);
}

.telemetry-chip-dynamic {
    backdrop-filter: blur(8px);
}

.telemetry-position-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--blackbox-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.telemetry-position-meta strong {
    color: var(--blackbox-chart-legend-value);
    margin-right: .35rem;
}

.telemetry-card-placeholder p {
    margin-top: .75rem;
    min-height: 3rem;
}

.telemetry-empty-state {
    /*min-height: 220px;*/
}

.telemetry-empty-state-icon {
    font-size: 1.65rem;
    color: rgba(41,169,167,.42);
}

.audit-row span, .audit-row small {
    display: block;
}

.inline-loading-state {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--blackbox-muted);
}

.compact-empty-state {
    min-height: 0;
    justify-content: flex-start;
    padding: 1rem 0;
}

.compact-empty-state .telemetry-empty-state-icon {
    font-size: 1.15rem;
}

.timeline-controls.is-collapsed {
    width: auto;
    border-radius: var(--bb-radius-pill);
    padding: .45rem .55rem;
}

.timeline-control-body {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    gap: .55rem;
}

.timeline-control-group {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.timeline-control-group-playback {
    min-width: 0;
}

.timeline-control-group-scrub {
    min-width: 0;
}

.timeline-control-group-actions {
    padding-left: .65rem;
    border-left: 1px solid rgba(255,255,255,.14);
}

.timeline-control-group-tools {
    padding-left: .2rem;
}

.timeline-controls input {
    flex: 1;
    width: 100%;
}

.timeline-section-label {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blackbox-muted);
}

.timeline-controls-sidebar .timeline-control-body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
}

.timeline-controls-sidebar .timeline-control-group-playback {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 2.15rem 2.15rem 2.15rem minmax(0, 1fr);
}

.timeline-controls-sidebar .timeline-speed-meta {
    grid-column: 1 / -1;
}

.timeline-controls-sidebar .timeline-control-group-scrub {
    grid-column: 1 / -1;
    align-items: stretch;
    flex-direction: column;
}

.timeline-controls-sidebar .timeline-scrub-readout {
    min-width: 0;
    text-align: left;
}

.timeline-controls-sidebar .timeline-control-group-actions {
    grid-column: 1;
    padding-top: .55rem;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-left: 0;
}

.timeline-controls-sidebar .timeline-control-group-tools {
    grid-column: 2;
    padding-top: .55rem;
    padding-left: .45rem;
    border-top: 1px solid rgba(255,255,255,.14);
}

.sidebar-card-timeline {
    overflow: visible;
}

.timeline-action-primary {
    border-color: rgba(20,184,166,.45) !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #ffffff !important;
}

.timeline-action-primary:disabled {
    opacity: .72;
}

.timeline-actions-menu {
    position: relative;
}

.timeline-action-chevron {
    font-size: .8rem;
    opacity: .82;
}

.timeline-action-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    border-radius: var(--bb-radius-md) !important;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.timeline-action-item:hover:not(:disabled) {
    border-color: rgba(94,234,212,.35);
    background: rgba(20,184,166,.16);
    transform: translateY(-1px);
}

.timeline-action-item:disabled {
    opacity: .72;
    cursor: not-allowed;
}

.full-camera {
    position: fixed;
    inset: 2rem;
    z-index: 100;
    background: rgba(0,0,0,.94);
    border: 1px solid var(--blackbox-border);
    border-radius: 28px;
    padding: 1rem;
}

.full-camera video {
    height: calc(100vh - 9rem);
    object-fit: contain;
}

.full-camera .camera-video-stack {
    min-height: calc(100vh - 9rem);
}

.full-camera .camera-gap-overlay {
    border-radius: var(--bb-radius-md);
}

.loading-card {
    padding: 2rem;
}

.incident-loading-card {
    min-height: 14rem;
    display: grid;
    place-items: center;
    gap: .9rem;
    text-align: center;
}

.loading-spinner-small {
    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
}

@keyframes blackbox-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1500px) {
    .media-grid-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1320px) {
    .media-grid-regular {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .camera-panel-featured .camera-video-stack {
        min-height: 360px;
    }

    .camera-panel-featured video {
        height: 360px;
    }
}

@media (max-width: 1050px) {
    .hero-panel, .detail-grid {
        grid-template-columns: 1fr;
        display: block;
    }

    .hero-stats, .toolbar-grid, .incident-form-grid, .dialog-form-grid, .upload-grid, .analysis-grid, .media-grid, .telemetry-grid, .telemetry-summary-grid, .upload-top-row {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .telemetry-card-wide {
        grid-column: span 1;
    }

    .span-2 {
        grid-column: auto;
    }

    .detail-sidebar {
        position: static;
    }

    .app-header {
        flex-wrap: wrap;
        height: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .brand-logo {
        height: 30px;
    }

    .vhf-channel-shell {
        grid-template-columns: 1fr;
    }

    .vhf-channel-label {
        min-height: 0;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    }

    .vhf-chat-window {
        padding-left: 1rem;
    }

    .timeline-controls {
        width: calc(100vw - 1rem);
        bottom: .75rem;
        padding: .85rem;
        border-radius: var(--bb-radius-lg);
    }

    .timeline-controls.is-collapsed {
        width: min(520px, calc(100vw - 1rem));
        padding: .5rem .6rem;
    }

    .timeline-control-body {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .evidence-status-banner {
        flex-direction: column;
    }

    .evidence-status-meta {
        justify-content: flex-start;
    }

    .timeline-control-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .timeline-control-group-actions {
        border-left: 0;
        border-top: 1px solid var(--blackbox-border);
        padding-left: 0;
        padding-top: .75rem;
    }

    .timeline-actions-menu {
        width: 100%;
    }

    .timeline-action-trigger {
        width: 100%;
    }

    .timeline-actions-dropdown {
        left: 0;
        right: auto;
        min-width: 100%;
        width: min(100%, 22rem);
    }

    .timeline-scrub-readout {
        min-width: 0;
        text-align: left;
    }
}

.app-header {
    border-bottom: 1px solid rgba(255,255,255,.18);
    background: var(--blackbox-primary);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(41, 169, 167, .22);
    height: 72px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 30;
}

.brand-subtitle,
.app-header small,
.app-header .header-user-pill small {
    color: rgba(255,255,255,.76);
}

.brand-logo {
    filter: none;
}

.top-nav a {
    color: rgba(255,255,255,.78);
}

.top-nav a.active,
.inline-nav a.active {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}

.user-pill,
.header-action-button {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: #ffffff;
}

.header-action-button:hover,
.header-action-button:focus-visible {
    border-color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.2);
    color: #ffffff;
}

.app-main {
    width: min(1320px, 100%);
    padding-top: 1.5rem;
    margin: 0 auto;
    padding: 1.5rem 2rem 7rem;
}

.hero-panel,
.toolbar-card,
.grid-panel,
.form-card,
.content-card,
.sidebar-card,
.loading-card {
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: var(--blackbox-surface);
    box-shadow: var(--blackbox-shadow);
    backdrop-filter: none;
}

.hero-panel {
    border-color: rgba(41, 169, 167, .2);
    background: linear-gradient(135deg, #ffffff 0%, #eff8f8 100%);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
}

.hero-panel h1,
.detail-header h1,
.login-card h2 {
    color: #111827;
}

.hero-copy,
.dialog-intro p:not(.eyebrow),
.section-copy,
.file-hint,
.login-support-copy,
.evidence-status-copy,
.telemetry-card-heading small,
.telemetry-card p {
    color: var(--blackbox-muted);
}

.eyebrow {
    color: var(--blackbox-primary-dark);
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hero-stats div,
.metric-card,
.action-row {
    border-color: var(--blackbox-border);
    background: #ffffff;
}

.hero-stats span {
    color: var(--blackbox-primary-dark);
}

.toolbar-card,
.grid-panel,
.form-card,
.content-card {
    margin-top: 1rem;
    padding: 1.25rem;
}

.rz-inputtext,
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric,
.rz-datepicker,
.rz-spinner,
.rz-calendar .rz-inputtext,
.rz-dropdown-label {
    border-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #333333 !important;
}

.rz-inputtext:focus,
.rz-textarea:focus,
.rz-dropdown:focus-within,
.rz-datepicker:focus-within,
.rz-numeric:focus-within {
    border-color: rgba(41,169,167,.72) !important;
    box-shadow: 0 0 0 3px rgba(41,169,167,.16) !important;
}

.rz-placeholder,
.rz-dropdown-label.rz-placeholder {
    color: #888888 !important;
}

.rz-dropdown-trigger,
.rz-datepicker-trigger,
.rz-spinner-button {
    color: var(--blackbox-primary-dark) !important;
    background: #f8fafc !important;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel,
.rz-context-menu,
.rz-calendar {
    border-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
    border: 1px solid rgba(20,184,166,.24) !important;
    border-radius: var(--bb-radius-md) !important;
    overflow: hidden;
}

.rz-dropdown-items,
.rz-dropdown-item,
.rz-multiselect-item,
.rz-autocomplete-list-item,
.rz-calendar td,
.rz-calendar th {
    background: #ffffff !important;
    color: #333333 !important;
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-hover,
.rz-multiselect-item:hover,
.rz-autocomplete-list-item:hover,
.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
    background: #eff8f8 !important;
    color: #0f766e !important;
}

.rz-button.rz-primary,
.rz-button.rz-button-md.rz-primary,
.rz-button.rz-button-sm.rz-primary {
    background-color: var(--blackbox-primary) !important;
    border-color: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.rz-button.rz-primary:hover {
    background-color: var(--blackbox-primary-dark) !important;
    border-color: var(--blackbox-primary-dark) !important;
}

.rz-chart {
    color: var(--blackbox-text);
}

.rz-chart .rz-legend-item {
    color: var(--blackbox-text);
}

.rz-chart-tooltip-content {
    border: 1px solid var(--blackbox-border);
    backdrop-filter: blur(16px);
}

.rz-chart-tooltip-title,
.rz-chart-tooltip-item-content,
.rz-chart-tooltip-item-value {
    color: var(--blackbox-text);
}

.blackbox-grid {
    --rz-grid-header-background-color: #f5f5f5;
    --rz-grid-cell-color: #333333;
    --rz-grid-background-color: #ffffff;
}

.rz-data-grid,
.rz-datatable,
.blackbox-grid .rz-data-grid,
.blackbox-grid .rz-datatable {
    border-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 22px !important;
    overflow: hidden;
}

.blackbox-grid .rz-grid-table,
.blackbox-grid table,
.blackbox-grid .rz-datatable-data,
.blackbox-grid .rz-datatable-scrollable-body {
    background: #ffffff !important;
    color: #333333 !important;
}

.blackbox-grid .rz-column-title,
.blackbox-grid .rz-sortable-column,
.blackbox-grid .rz-sortable-column-icon,
.blackbox-grid th,
.blackbox-grid .rz-datatable-thead th {
    color: #4b5563 !important;
}

.blackbox-grid th,
.blackbox-grid .rz-datatable-thead th {
    border-bottom-color: var(--blackbox-border) !important;
    background: #f5f5f5 !important;
    border-bottom: 1px solid rgba(20,184,166,.24) !important;
    font-size: .72rem;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.blackbox-grid td,
.blackbox-grid .rz-datatable-data td {
    border-bottom-color: #eeeeee !important;
    background: #ffffff !important;
    color: #333333 !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.blackbox-grid tr:nth-child(even) td,
.blackbox-grid .rz-datatable-even td {
    background: #fcfcfc !important;
}

.blackbox-grid tr:hover td,
.blackbox-grid .rz-selectable tbody tr:hover td,
.blackbox-grid .rz-datatable-data tr:hover td,
.blackbox-grid .rz-datatable-data tr.rz-state-highlight td,
.blackbox-grid .rz-data-row:hover td {
    background: #eff8f8 !important;
    color: #111827 !important;
}

.blackbox-grid .rz-paginator,
.blackbox-grid .rz-pager {
    border-top-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bb-radius-pill);
    padding: .28rem .65rem;
    font-size: .75rem;
    font-weight: 800;
    border: 1px solid var(--blackbox-border);
    background: #f3f4f6;
    color: #374151;
}

/* Status colors are supplementary — the text label stays the primary signal. */
.status-pill.status-new {
    background: #ccfbf1;
    color: #0f766e;
    border-color: #99f6e4;
}

.status-pill.status-open {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.status-pill.status-inprogress {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.status-pill.status-resolved,
.status-pill.status-promoted {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.status-pill.status-closed {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.status-pill.status-discarded {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.action-badge {
    border: 1px solid currentColor;
    cursor: pointer;
    font: inherit;
}

.action-badge:hover,
.action-badge:focus-visible,
.inline-value-button:hover,
.inline-value-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(41,169,167,.16);
    outline: 0;
}

.text-button {
    color: var(--blackbox-primary-dark);
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

.evidence-status-banner-info {
    border-color: rgba(59, 130, 246, .25);
    background: #eff6ff;
}

.evidence-status-banner-warning {
    border-color: rgba(245, 158, 11, .3);
    background: #fffbeb;
}

.evidence-status-meta span {
    border-color: var(--blackbox-border);
    background: rgba(255,255,255,.72);
    color: #374151;
}

.detail-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.detail-sidebar-collapsed {
    width: 5rem;
}

.detail-sidebar-collapsed .sidebar-card {
    padding: .8rem;
}

.sidebar-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.detail-sidebar-collapsed .sidebar-card-heading {
    align-items: center;
    justify-content: center;
}

.detail-sidebar-collapsed .sidebar-card-heading > div {
    display: none;
}

.inline-value-button {
    border: 0;
    border-radius: var(--bb-radius-pill);
    background: #eff8f8;
    color: var(--blackbox-primary-dark);
    padding: .18rem .55rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.camera-panel,
.navigation-map-stack,
.navigation-map-canvas,
.camera-video-stack,
.camera-panel video,
.full-camera video {
    background: #0d1f31;
}

.navigation-map-panel .leaflet-pane {
    z-index: 1 !important;
}

.navigation-map-panel .leaflet-top,
.navigation-map-panel .leaflet-bottom {
    z-index: 2 !important;
}

.navigation-map-meta,
.camera-segment-list,
.camera-header {
    border-color: rgba(255,255,255,.12);
}

.navigation-map-meta strong,
.camera-header span {
    color: #f8fafc;
}

.camera-header small,
.navigation-map-meta,
.camera-empty,
.camera-gap-overlay {
    color: #cbd5e1;
}

.vhf-audio-sync-pool {
    display: none;
}

.vhf-channel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.vhf-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(41,169,167,.28);
    border-radius: var(--bb-radius-pill);
    background: #eff8f8;
    color: #0f766e;
    padding: .45rem .75rem;
    font-weight: 700;
    cursor: pointer;
}

.vhf-channel-chip small {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    min-height: 1.4rem;
    border-radius: var(--bb-radius-pill);
    background: #ffffff;
    color: #4b5563;
}

.vhf-channel-chip.is-muted {
    border-style: dashed;
    background: #f3f4f6;
    color: #6b7280;
}

/* Compact mute toggle used in the manage-VHF recordings grid. */
.vhf-mute-toggle {
    padding: .35rem .55rem;
    gap: 0;
}

.vhf-mute-toggle:disabled {
    opacity: .55;
    cursor: default;
}

/* Small "Manual" badge on manually uploaded VHF clips in the transcript stream. */
.vhf-transcript-manual-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: var(--bb-radius-pill);
    background: rgba(20,184,166,.16);
    color: #0f766e;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

.vhf-recordings-audio {
    width: 100%;
    max-width: 200px;
    height: 32px;
}

/* Tabbed Manage dialogs (camera / VHF / RCA) reuse the dashboard tab control. */
.manage-dialog-tabs {
    height: min(68vh, 680px);
    min-height: 22rem;
    display: flex;
    flex-direction: column;
}

.manage-dialog-tabs .rz-tabview-panel {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding-top: 1rem;
}

.manage-dialog-tabs .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
}

.manage-evidence-dialog {
    min-height: 0;
}

/* Leave headroom for the dialog title, footer and content padding so the tab area plus chrome fits
   within Radzen's dialog-content max-height (~80vh). At 72vh the chrome tipped it ~34px over,
   adding a second, dialog-body scrollbar beside the list's own. Long lists still scroll inside the
   section panel — that stays the single, intended scrollbar. */
.manage-evidence-tabs {
    height: min(64vh, 680px);
    min-height: 22rem;
}

.manage-evidence-tabs > .rz-tabview-nav {
    min-width: 9.5rem;
    border-right: 1px solid var(--blackbox-border);
}

.manage-evidence-tabs > .rz-tabview-nav li,
.manage-evidence-tabs > .rz-tabview-nav .rz-tabview-nav-item {
    width: 100%;
    padding: 0 !important;
}

.manage-evidence-tabs > .rz-tabview-nav li a,
.manage-evidence-tabs > .rz-tabview-nav .rz-tabview-nav-item a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: .75rem 1rem !important;
    width: 100%;
}

.manage-evidence-tabs > .rz-tabview-nav li a .rz-tabview-title,
.manage-evidence-tabs > .rz-tabview-nav .rz-tabview-nav-item a .rz-tabview-title {
    flex: 1 1 auto;
}

.manage-evidence-tabs > .rz-tabview-panels {
    min-width: 0;
    min-height: 0;
}

/* Outer panel fills the tab area as a non-scrolling flex column so the left tab rail never
   scrolls away; each section delegates its own scrolling to the body below its tab strip. */
.manage-evidence-tabs > .rz-tabview-panels > .rz-tabview-panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 0 0 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Per-section tabs fill the panel; their tab strip stays fixed while only the body scrolls. */
.manage-evidence-tabs .manage-dialog-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.manage-evidence-tabs .manage-dialog-tabs > .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.manage-evidence-tabs .manage-dialog-tabs > .rz-tabview-panels > .rz-tabview-panel {
    min-height: 0;
    padding: 1.25rem 0 1.25rem;
}

/* Inside the manage-evidence dialog, the section's own tab-panel is already the scroll container.
   The footage/recordings list must delegate to it rather than open its own inner scroller, which
   otherwise stacked a second scrollbar next to the dialog's on the "Manage" tabs but not the
   content-sized "Upload" tabs. (Standalone use of these panels keeps its own scroll.) */
.manage-evidence-tabs .manage-footage {
    height: auto;
    overflow: visible;
}

@media (max-width: 760px) {
    .manage-evidence-tabs {
        height: auto;
        min-height: 0;
    }

    .manage-evidence-tabs > .rz-tabview-nav {
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--blackbox-border);
    }

    .manage-evidence-tabs > .rz-tabview-panels > .rz-tabview-panel {
        padding: 1rem 0 0;
    }
}

.rca-document-card {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: #ffffff;
    padding: 1rem 1.15rem;
}

.rca-document-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.rca-document-heading > div {
    display: grid;
}

.vhf-transcript-stream {
    display: grid;
    gap: .75rem;
    max-height: 34rem;
    overflow-y: auto;
    padding-right: .35rem;
}

.vhf-transcript-item {
    width: 100%;
    display: grid;
    grid-template-columns: 9rem 9rem 12rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: #ffffff;
    color: #333333;
    padding: .85rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.vhf-transcript-item:hover,
.vhf-transcript-item:focus-visible {
    border-color: rgba(41,169,167,.45);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
    outline: 0;
}

.vhf-transcript-item.is-active {
    border-color: var(--blackbox-primary);
    background: #eff8f8;
}

.vhf-transcript-time {
    color: #4b5563;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.vhf-transcript-channel {
    color: #0f766e;
    font-weight: 800;
}

.vhf-transcript-language {
    color: #6b7280;
    font-size: .85rem;
}

.vhf-transcript-message {
    color: #111827;
}

.vhf-transcript-translation {
    grid-column: 4;
    margin-top: .25rem;
    border-left: 3px solid var(--blackbox-primary);
    background: rgba(41,169,167,.08);
    color: #374151;
    padding: .5rem .75rem;
}

.telemetry-grid-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.telemetry-summary-card,
.telemetry-card {
    border-color: var(--blackbox-border);
    background: #ffffff;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.08);
}

.telemetry-card-heading strong,
.telemetry-axis strong,
.telemetry-position-meta strong {
    color: var(--blackbox-chart-legend-value);
}

.telemetry-state-track,
.telemetry-position-surface {
    fill: var(--blackbox-chart-surface);
    stroke: var(--blackbox-chart-surface-border);
}

.telemetry-line-baseline {
    stroke: var(--blackbox-chart-axis);
    stroke-width: 1.5;
}

.telemetry-line-path,
.telemetry-track-path {
    stroke: var(--blackbox-chart-line);
}

.telemetry-line-marker,
.telemetry-track-cursor {
    fill: var(--blackbox-chart-marker-fill);
    stroke: var(--blackbox-chart-cursor);
}

.telemetry-cursor-line {
    stroke: var(--blackbox-chart-cursor);
    stroke-width: 2;
    stroke-linecap: round;
}

.audit-row {
    border-bottom-color: var(--blackbox-border);
    border-bottom: 1px solid var(--blackbox-border);
    padding: .7rem 0;
}

.audit-row span,
.audit-row small {
    color: var(--blackbox-muted);
}

.dialog-form-grid-single {
    grid-template-columns: 1fr;
}

.dialog-form-grid-create-incident {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.priority-wizard {
    display: grid;
    gap: 1rem;
}

.priority-wizard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.priority-wizard-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
}

.priority-wizard-copy p {
    margin: .4rem 0 0;
    color: #475569;
    line-height: 1.45;
}

.priority-wizard-step,
.priority-preview-card > span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}

.priority-preview-card {
    min-width: 11rem;
    display: grid;
    gap: .5rem;
    padding: .95rem 1rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-md);
    background: #f8fafc;
}

.priority-wizard-options {
    display: grid;
    gap: .65rem;
}

.priority-option {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .95rem;
    padding: .9rem 1rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-md);
    background: #ffffff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.priority-option:hover,
.priority-option:focus-visible {
    border-color: rgba(41,169,167,.38);
    background: #f8fafc;
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
    outline: 0;
}

.priority-option:active {
    transform: translateY(1px);
}

.priority-option.is-selected {
    border-color: rgba(41,169,167,.52);
    background: #eff8f8;
    box-shadow: 0 14px 32px rgba(41,169,167,.12);
}

.priority-option-score {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bb-radius-pill);
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 800;
}

.priority-option-copy {
    display: grid;
    gap: .22rem;
}

.priority-option-copy strong {
    color: #0f172a;
    font-size: .95rem;
}

.priority-option-copy small {
    color: #64748b;
    line-height: 1.45;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .38rem .72rem;
    border: 1px solid transparent;
    border-radius: var(--bb-radius-pill);
    font-size: .82rem;
    font-weight: 800;
}

.priority-badge-low {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #166534;
}

.priority-badge-medium {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.priority-badge-high {
    border-color: #fed7aa;
    background: #ffedd5;
    color: #c2410c;
}

.priority-badge-critical {
    border-color: #fecaca;
    background: #fee2e2;
    color: #b91c1c;
}

.priority-preview-placeholder {
    color: #475569;
    font-size: .92rem;
}

.priority-preview-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.priority-preview-inline > span {
    color: #64748b;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}

.priority-preview-inline > strong {
    display: inline-flex;
    align-items: center;
}

.dialog-intro h2 {
    color: #111827;
}

.rz-dialog-mask {
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(5px);
}

.rz-dialog {
    border-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .18) !important;
    border: 1px solid var(--blackbox-border) !important;
    border-radius: 28px !important;
    max-width: calc(100vw - 3rem) !important;
    max-height: calc(100vh - 3rem) !important;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    border-bottom-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #111827 !important;
}

.rz-dialog-content {
    color: #333333 !important;
}

.login-page-shell {
    min-height: calc(100vh - 9rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 2rem;
    align-items: center;
}

.login-hero-panel {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    border-radius: var(--bb-radius-md);
    padding: 3rem;
    background: linear-gradient(135deg, #29A9A7, #0d9488);
    color: #ffffff;
    box-shadow: 0 22px 60px rgba(41,169,167,.22);
}

.login-hero-panel .eyebrow,
.login-hero-panel .hero-copy {
    color: rgba(255,255,255,.78);
}

.login-hero-panel h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1;
}

.login-brand-mark {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--bb-radius-md);
    background: rgba(255,255,255,.16);
    color: #ffffff;
    font-weight: 900;
    font-size: 2rem;
}

.login-card {
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 2rem;
}

.login-action-primary {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    gap: .55rem;
    background: var(--blackbox-primary) !important;
    border-color: var(--blackbox-primary) !important;
    color: #ffffff;
}

.login-action-primary:hover,
.login-action-primary:focus-visible {
    background: var(--blackbox-primary-dark) !important;
}

.timeline-controls {
    z-index: 900;
    border-color: rgba(41,169,167,.24);
    background: rgba(255,255,255,.94);
    color: #333333;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
    position: fixed;
    left: 50%;
    bottom: .9rem;
    transform: translateX(-50%);
    display: grid;
    gap: .65rem;
    width: min(1040px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: .65rem .75rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-lg);
    backdrop-filter: blur(18px);
}

.timeline-controls button,
.timeline-controls select {
    border-color: var(--blackbox-border);
    background: #ffffff;
    color: #333333;
}

.timeline-action-trigger,
.timeline-action-primary {
    border-color: var(--blackbox-primary) !important;
    background: var(--blackbox-primary) !important;
}

.timeline-actions-dropdown {
    border-color: var(--blackbox-border);
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15,23,42,.16);
}

.timeline-action-item-label {
    color: #111827;
}

.timeline-scrub-readout {
    color: #0f766e;
    min-width: 7.5rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1050px) {
    .login-page-shell {
        grid-template-columns: 1fr;
    }

    .login-hero-panel {
        min-height: 0;
        padding: 2rem;
    }

    .detail-sidebar-collapsed {
        width: auto;
    }

    .vhf-transcript-item {
        grid-template-columns: 1fr;
    }

    .vhf-transcript-translation {
        grid-column: 1;
    }
}

/* Prototype alignment refinements */
.brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.brand-logo {
    height: 38px;
    display: block;
    width: auto;
}

.header-actions {
    gap: .9rem;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.header-user-status {
    color: rgba(255,255,255,.82);
    font-size: .9rem;
}

.header-user-pill {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #ffffff;
    min-width: 0;
}

.header-user-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--bb-radius-pill);
    background: rgba(255,255,255,.16);
}

.header-user-pill > div {
    display: grid;
    gap: .05rem;
}

.header-icon-action {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-grid;
    place-items: center;
    padding: 0 !important;
}

.dashboard-filters {
    margin: 0 0 1rem;
}

.dashboard-filters .toolbar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-panel {
    border-radius: 10px;
}

.dashboard-state-card {
    min-height: 14rem;
    display: grid;
    place-items: center;
    gap: .9rem;
    text-align: center;
}

.blackbox-grid .rz-data-grid,
.blackbox-grid .rz-datatable {
    border-radius: 10px !important;
}

.dialog-intro-compact {
    margin-bottom: 1.75rem;
}

.dialog-intro-compact h2 {
    margin: 0;
    color: #111827;
}

.rz-dialog-content {
    padding: 1.65rem !important;
}

.rz-datepicker-calendar .rz-state-highlight,
.rz-calendar .rz-state-highlight,
.rz-calendar .rz-state-active,
.rz-calendar td.rz-state-highlight,
.rz-calendar td.rz-state-active {
    background: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.rz-calendar .rz-button.rz-primary,
.rz-datepicker .rz-button.rz-primary {
    background: var(--blackbox-primary) !important;
    border-color: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.detail-grid-details-collapsed {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
}

.sidebar-card dl {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: .65rem 1rem;
}

.sidebar-card dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-card dd {
    color: #111827;
    font-size: .92rem;
}

/* Full-width field: label on its own row, value stacked underneath spanning the whole sidebar.
   Used for Description so long text wraps freely instead of being crammed into the value column. */
.sidebar-card dt.field-block,
.sidebar-card dd.field-block {
    grid-column: 1 / -1;
}

.sidebar-card dd.field-block {
    margin-top: -.35rem;
}

/* Editable description that reads as plain wrapping text rather than a pill. */
.description-value {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.description-value:hover,
.description-value:focus-visible {
    color: var(--blackbox-primary-dark);
    outline: 0;
}

.rca-download-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .2rem .55rem;
    border-radius: var(--bb-radius-pill);
    background: #eff8f8;
    color: var(--blackbox-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.rca-download-link:hover,
.rca-download-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(41, 169, 167, .16);
    outline: 0;
}

.rca-download-link i {
    flex: 0 0 auto;
}

/* Keep long file names on a single line and ellipsize so they never break the sidebar layout. */
.rca-download-link .rca-download-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rca-picker-icon {
    color: var(--blackbox-primary-dark);
    margin-right: .15rem;
}

.rca-empty {
    color: #6b7280;
    font-style: italic;
}

/* Linked documents — on-page grid (LinkedDocumentsPanel): images as thumbnails, other files as a
   typed icon card. */
.linked-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.document-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: var(--blackbox-surface);
    overflow: hidden;
}

.document-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--blackbox-surface-strong);
    border-bottom: 1px solid var(--blackbox-border);
    overflow: hidden;
}

.document-media.is-image {
    cursor: zoom-in;
}

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

.document-icon {
    font-size: 2.6rem;
    color: var(--blackbox-primary-dark);
}

.document-media .file-badge {
    position: absolute;
    bottom: .55rem;
    right: .55rem;
    padding: .2rem .55rem;
    border-radius: var(--bb-radius-pill);
    background: #ffffff;
    border: 1px solid var(--blackbox-border);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--blackbox-navy);
}

.document-body {
    padding: .7rem .85rem .85rem;
    display: grid;
    gap: .5rem;
}

.document-name {
    font-weight: 700;
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--blackbox-muted);
    font-size: .74rem;
}

.document-sub .dot {
    color: #c7c7c7;
}

/* Manage evidence -> Documents tab: a compact row list with download + delete. */
.documents-manage-list {
    display: grid;
    gap: .6rem;
}

.document-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-sm);
    background: #ffffff;
    padding: .7rem .85rem;
}

.document-row .rca-picker-icon {
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.document-row-main {
    display: grid;
    min-width: 0;
    flex: 1;
}

.document-row-main strong {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-row-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.camera-panel,
.navigation-map-stack,
.navigation-map-canvas,
.camera-video-stack,
.camera-panel video {
    background: #f8fafc;
}

.camera-panel {
    border-color: var(--blackbox-border);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.camera-header {
    border-color: var(--blackbox-border);
    background: #ffffff;
}

.camera-header span,
.navigation-map-meta strong {
    color: #111827;
}

.camera-header small,
.navigation-map-meta,
.camera-empty,
.camera-gap-overlay {
    color: #6b7280;
}

.camera-gap-overlay {
    background: rgba(248, 250, 252, .88);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .35rem;
    padding: 1rem;
    text-align: center;
}

.camera-video-stack,
.camera-panel video,
.full-camera video {
    background: #000000;
}

.navigation-map-stack {
    position: relative;
    z-index: 0;
}

.telemetry-category-list {
    display: grid;
    gap: 1rem;
}

.telemetry-category {
    border: 1px solid var(--blackbox-border);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.telemetry-category summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--blackbox-border);
    list-style: none;
}

.telemetry-category summary::-webkit-details-marker {
    display: none;
}

.telemetry-category summary span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

.telemetry-category summary small {
    color: var(--blackbox-muted);
    text-align: right;
}

.telemetry-category-body {
    padding: 1rem;
}

.telemetry-category-body-stacked {
    display: grid;
    gap: 1rem;
}

.operational-status-card {
    padding: 1rem 1.1rem;
}

.operational-status-shell {
    display: grid;
    gap: 1rem;
}

/* Deepen the state fills so they read well both in the donut summary charts and behind the
   white in-bar labels of the timeline. Applied to both so the two stay visually consistent. */
.operational-status-summary-grid,
.operational-status-shell {
    --blackbox-chart-state-remote-fill: rgba(13, 148, 136, .92);
    --blackbox-chart-state-local-fill: rgba(100, 116, 139, .92);
    --blackbox-chart-state-unassigned-fill: rgba(71, 85, 105, .92);
    --blackbox-chart-state-alert-fill: rgba(220, 38, 38, .92);
    --blackbox-chart-state-inactive-fill: rgba(15, 118, 110, .9);
    /* Generic palette fallback (e.g. control-mode values such as "Manual"). */
    --blackbox-chart-fill-1: rgba(13, 148, 136, .9);
    --blackbox-chart-fill-2: rgba(2, 132, 199, .9);
    --blackbox-chart-fill-3: rgba(15, 118, 110, .9);
    --blackbox-chart-fill-4: rgba(217, 119, 6, .92);
    --blackbox-chart-fill-5: rgba(225, 29, 72, .9);
    --blackbox-chart-fill-6: rgba(100, 116, 139, .9);
}

/* White labels only inside the colored timeline bars (the donut centres keep their dark text). */
.operational-status-shell {
    --blackbox-chart-pill-text: #ffffff;
}

.operational-status-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 880px) {
    .operational-status-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.operational-status-summary-card .telemetry-card-heading {
    margin-bottom: .75rem;
}

.operational-status-summary-card .telemetry-card-heading strong {
    font-size: 1.05rem;
}

.operational-status-lane {
    display: grid;
    gap: .75rem;
}

.operational-status-lane-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.operational-status-lane-header span {
    color: var(--blackbox-chart-axis-label);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.operational-status-lane-header strong {
    color: var(--blackbox-chart-legend-value);
    font-size: .94rem;
}

.operational-status-track {
    position: relative;
    min-height: 3.5rem;
    overflow: visible;
}

.operational-status-segment {
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No padding here: border-box width cannot shrink below the padding, so padding would make
       sub-1% segments render ~24px wide and bleed over their neighbours. The label carries it. */
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: .79rem;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    color: var(--blackbox-chart-pill-text);
    text-align: center;
    opacity: .92;
}

.operational-status-segment-label {
    /* Content-sized so the segment's flex centering (align-items/justify-content) centers the
       label both vertically and horizontally; max-width keeps long values ellipsized. */
    max-width: 100%;
    min-width: 0;
    padding: 0 .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* `.metric-card span { display: block }` (defined earlier) outranks the single-class segment
   rule and would blockify the bar, pushing its label to the top-left. Re-assert flex centering
   with a higher-specificity selector so the label sits dead-centre in the bar. */
.operational-status-shell .operational-status-segment {
    display: flex;
    align-items: center;
    justify-content: center;
}

.operational-status-segment.is-active {
    opacity: 1;
    box-shadow: 0 10px 24px rgba(15,23,42,.16);
    z-index: 2;
}

.operational-status-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--blackbox-chart-cursor);
    transform: translateX(-50%);
    z-index: 3;
}

.operational-status-cursor::before,
.operational-status-cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    width: .7rem;
    height: .7rem;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-chart-marker-fill);
    border: 2px solid var(--blackbox-chart-cursor);
    transform: translateX(-50%);
}

.operational-status-cursor::before {
    top: .35rem;
}

.operational-status-cursor::after {
    bottom: .35rem;
}

.operational-status-axis {
    margin-top: .1rem;
}

/* Alarms — Zabbix problems grouped by trigger (host + name) */
.alarm-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.alarm-toolbar .filter-field {
    width: min(240px, 100%);
}

.alarm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.alarm-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--blackbox-chart-surface-border);
    border-radius: var(--bb-radius-sm);
}

.alarm-severity-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bb-radius-pill);
    padding: .2rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.alarm-body {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.alarm-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.alarm-name {
    color: var(--blackbox-chart-legend-value);
    font-size: .86rem;
    font-weight: 700;
}

.alarm-host {
    color: var(--blackbox-muted);
    font-size: .76rem;
}

.alarm-count {
    color: var(--blackbox-muted);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.alarm-ongoing {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bb-radius-pill);
    padding: .1rem .45rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(220, 38, 38, .14);
    color: #b91c1c;
}

.alarm-time {
    color: var(--blackbox-muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.alarm-empty {
    margin: 30px;
}

/* Zabbix severities 0-5 */
.alarm-severity-chip.is-unclassified { background: rgba(100, 116, 139, .16); color: #475569; }
.alarm-severity-chip.is-information { background: rgba(37, 99, 235, .14); color: #1d4ed8; }
.alarm-severity-chip.is-warning { background: rgba(217, 119, 6, .16); color: #b45309; }
.alarm-severity-chip.is-average { background: rgba(234, 88, 12, .16); color: #c2410c; }
.alarm-severity-chip.is-high { background: rgba(220, 38, 38, .14); color: #b91c1c; }
.alarm-severity-chip.is-disaster { background: rgba(124, 45, 96, .18); color: #86198f; }

/* Compact status tracks — shared by "Onboard devices" and "Dome carriers" */
.status-track-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.status-track-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--blackbox-muted);
}

.status-track-swatch {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    flex: 0 0 auto;
}

.device-status-category {
    display: grid;
    gap: .5rem;
}

.device-status-category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

.device-status-category-header span {
    color: var(--blackbox-chart-axis-label);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.device-status-category-header small {
    color: var(--blackbox-muted);
    font-size: .74rem;
}

.status-track-rows {
    display: grid;
    gap: .4rem;
}

.status-track-row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
}

.status-track-name {
    color: var(--blackbox-chart-legend-value);
    font-size: .70rem;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-track {
    position: relative;
    min-height: 1.7rem;
    border-radius: 9px;
    overflow: hidden;
}

.status-track-segment {
    position: absolute;
    top: .18rem;
    bottom: .18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Padding lives on the label; on the segment it would inflate sub-1% widths (see
       .operational-status-segment). */
    padding: 0;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    color: #ffffff;
    opacity: .92;
}

/* `.metric-card span { display:block }` can outrank the single-class rule; re-assert flex centering. */
.status-track .status-track-segment {
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-track-segment-label {
    max-width: 100%;
    min-width: 0;
    padding: 0 .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-track-segment.is-active {
    opacity: 1;
    z-index: 2;
}

.status-track-segment.is-online { background: rgba(13, 148, 136, .9); }
.status-track-segment.is-offline { background: rgba(220, 38, 38, .9); }
.status-track-segment.is-error { background: rgba(220, 38, 38, .82); }
.status-track-segment.is-nodata {
    color: var(--blackbox-muted);
    background-color: rgba(100, 116, 139, .22);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(100, 116, 139, .38) 0,
        rgba(100, 116, 139, .38) 4px,
        transparent 4px,
        transparent 8px);
}

.status-track-swatch.is-online { background: rgba(13, 148, 136, .9); }
.status-track-swatch.is-offline { background: rgba(220, 38, 38, .9); }
.status-track-swatch.is-nodata {
    background-color: rgba(100, 116, 139, .22);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(100, 116, 139, .5) 0,
        rgba(100, 116, 139, .5) 3px,
        transparent 3px,
        transparent 6px);
}

.status-track-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--blackbox-chart-cursor);
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.status-track-empty {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
}

.status-track-empty-label {
    color: var(--blackbox-muted);
    font-size: .72rem;
}

/* Dome carriers — rendered inside the Connectivity section, below its charts */
.dome-carrier-block {
    display: grid;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--blackbox-chart-surface-border);
}

.dome-carrier-heading {
    margin: 0;
    color: var(--blackbox-chart-axis-label);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

@media (max-width: 720px) {
    .status-track-row {
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: .5rem;
    }

    .alarm-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .alarm-time {
        grid-column: 2;
        text-align: left;
    }
}

.telemetry-donut-layout {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.telemetry-donut {
    width: 8rem;
    height: 8rem;
    display: grid;
    place-items: center;
    border-radius: var(--bb-radius-pill);
    position: relative;
}

.telemetry-donut::after {
    content: "";
    position: absolute;
    inset: 1.8rem;
    border-radius: inherit;
    background: var(--blackbox-chart-donut-center);
    box-shadow: inset 0 0 0 1px var(--blackbox-border);
}

.telemetry-donut span {
    position: relative;
    z-index: 1;
    color: var(--blackbox-chart-donut-text);
    font-weight: 800;
}

.telemetry-donut-legend {
    display: grid;
    gap: .55rem;
}

.telemetry-donut-legend span {
    display: grid;
    grid-template-columns: .8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    color: var(--blackbox-chart-legend-text);
    font-size: .85rem;
}

.telemetry-donut-legend i {
    width: .8rem;
    height: .8rem;
    border-radius: var(--bb-radius-pill);
}

.telemetry-donut-legend strong {
    color: var(--blackbox-chart-legend-value);
}

.loading-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bb-radius-pill);
    /* Shorthand first, color longhands after — the reverse order left the ring an invisible
       near-transparent white on the light background. */
    border: 3px solid #d1f1ef;
    border-top-color: var(--blackbox-primary);
    animation: blackbox-spin .85s linear infinite;
}

.loading-progress {
    /* Only exists during WASM boot, before Blazor replaces #app's content. */
    margin: 45vh auto 0;
    width: min(18rem, 70vw);
    height: .45rem;
    border-radius: var(--bb-radius-pill);
    background: #eff8f8;
    overflow: hidden;
}

.loading-progress span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: var(--blackbox-primary);
    animation: blackbox-progress 1.15s ease-in-out infinite;
}

@keyframes blackbox-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(230%);
    }
}

/* Radzen wraps each toast in .rz-notification-item-wrapper which carries its own
   background and square corners — it pokes out behind the rounded item. Make it
   invisible so only the item shows. */
.rz-notification-item-wrapper {
    background: transparent !important;
    border-radius: 10px !important;
}

.rz-notification-item,
.rz-growl-item {
    border: 1px solid var(--blackbox-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
    overflow: hidden !important;
}

.rz-notification-summary,
.rz-growl-title {
    color: #111827 !important;
    font-weight: 800 !important;
}

.rz-notification-message,
.rz-growl-message,
.rz-notification-detail,
.rz-growl-message p {
    color: #4b5563 !important;
}

.rz-notification-success,
.rz-growl-success {
    border-left: 0 !important;
    box-shadow: inset 4px 0 0 #0d9488, 0 18px 50px rgba(15, 23, 42, .16) !important;
}

.rz-notification-info,
.rz-growl-info {
    border-left: 0 !important;
    box-shadow: inset 4px 0 0 #29A9A7, 0 18px 50px rgba(15, 23, 42, .16) !important;
}

.rz-notification-warning,
.rz-growl-warning {
    border-left: 0 !important;
    box-shadow: inset 4px 0 0 #f59e0b, 0 18px 50px rgba(15, 23, 42, .16) !important;
}

.rz-notification-error,
.rz-growl-error {
    border-left: 0 !important;
    box-shadow: inset 4px 0 0 #ef4444, 0 18px 50px rgba(15, 23, 42, .16) !important;
}

@media (max-width: 1050px) {
    .dashboard-filters .toolbar-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid-details-collapsed {
        grid-template-columns: 1fr;
    }

    .telemetry-donut-layout {
        grid-template-columns: 1fr;
    }
}

.header-user-pill {
    flex-direction: row !important;
    align-items: center !important;
    gap: .6rem !important;
    max-width: 18rem;
}

.header-user-pill strong {
    display: block;
    max-width: 14rem;
    overflow: hidden;
    color: #ffffff;
    font-size: .95rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-pill small {
    display: none !important;
}

/* ---- Handover reports (precheck / postcheck) ---- */
.handover-grid {
    align-items: start;
}

/* Handover reports live in their own category-list, so it needs the gap the inter-card
   grid gap (.85rem) would otherwise give it — below the TELEMETRY title and above the next cards. */
.handover-category-list {
    margin-top: .85rem;
    margin-bottom: .85rem;
}

.handover-card {
    display: grid;
    gap: .85rem;
    align-content: start;
}

.handover-card .telemetry-card-heading {
    margin-bottom: 0;
}

.handover-card .telemetry-card-heading strong {
    font-size: 1.05rem;
}

.handover-body {
    display: grid;
    gap: .75rem;
}

/* The shared `.metric-card span { display:block }` rule blockifies every span; re-inline the
   pieces that are meant to sit on one line. */
.handover-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: var(--bb-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.handover-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: var(--bb-radius-pill);
    flex: none;
    background: #94a3b8;
}

.handover-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.handover-meta {
    display: grid;
    gap: .3rem;
}

.handover-meta span {
    color: #1f2937;
    font-size: .85rem;
}

.handover-meta label {
    display: inline-block;
    min-width: 6.5rem;
    margin-right: .4rem;
    color: var(--blackbox-muted);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.handover-note {
    margin: 0;
    color: #374151;
    font-size: .85rem;
    line-height: 1.4;
}

.handover-late {
    color: #b45309;
}

.handover-empty {
    margin: 0;
    color: var(--blackbox-muted);
    font-size: .85rem;
}

.handover-components {
    display: grid;
    gap: .4rem;
}

.handover-component {
    border: 1px solid var(--blackbox-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
    overflow: hidden;
}

.handover-component > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    cursor: pointer;
    list-style: none;
}

.handover-component > summary::-webkit-details-marker {
    display: none;
}

.handover-component > summary span {
    display: inline-flex;
}

.handover-component-name {
    flex: 1;
    font-weight: 500;
    color: #111827;
    font-size: .8rem;
}

.handover-checks {
    list-style: none;
    margin: 0;
    padding: .25rem .65rem .6rem 1.7rem;
    display: grid;
    gap: .4rem;
}

.handover-checks li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: #374151;
}

.handover-check-name {
    font-weight: 600;
    color: #1f2937;
}

.handover-check-message {
    width: 100%;
    padding-left: 1.05rem;
    color: var(--blackbox-muted);
    font-size: .78rem;
}

.handover-remarks {
    margin: 0;
    display: grid;
    /* override the generic dl 110px first column so odd remarks (Sailing/Environmental) aren't cramped */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .6rem .9rem;
}

.handover-remarks div {
    display: grid;
    gap: .15rem;
}

.handover-remarks dt {
    color: var(--blackbox-muted);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.handover-remarks dd {
    margin: 0;
    color: #374151;
    font-size: .85rem;
    line-height: 1.4;
}

/* Status colors shared by pills and dots */
.handover-pill.is-ok { background: rgba(13, 148, 136, .14); color: #0f766e; }
.handover-pill.is-warning { background: rgba(217, 119, 6, .16); color: #b45309; }
.handover-pill.is-severe { background: rgba(234, 88, 12, .16); color: #c2410c; }
.handover-pill.is-critical { background: rgba(220, 38, 38, .14); color: #b91c1c; }
.handover-pill.is-neutral { background: rgba(100, 116, 139, .16); color: #475569; }

.handover-dot.is-ok { background: #0d9488; }
.handover-dot.is-warning { background: #d97706; }
.handover-dot.is-severe { background: #ea580c; }
.handover-dot.is-critical { background: #dc2626; }
.handover-dot.is-neutral { background: #94a3b8; }

@media (max-width: 880px) {
    .handover-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rz-dialog-titlebar {
    border-bottom: 0 !important;
    padding-bottom: 1.05rem !important;
}

.rz-dialog-content {
    padding-top: 1.15rem !important;
    max-height: calc(100vh - 10rem) !important;
    overflow-y: auto !important;
}

.timeline-controls button,
.timeline-controls select {
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.timeline-controls button:hover,
.timeline-controls button:focus-visible,
.timeline-controls select:hover,
.timeline-controls select:focus-visible {
    border-color: rgba(41,169,167,.52);
    background: #eff8f8;
    color: #0f766e;
    box-shadow: 0 8px 18px rgba(41,169,167,.14);
    outline: 0;
}

.timeline-controls button:active {
    transform: translateY(1px);
}

.timeline-controls input[type="range"] {
    height: 1.25rem;
    background: transparent;
    cursor: pointer;
    accent-color: var(--blackbox-primary);
    -webkit-appearance: none;
    appearance: none;
}

.timeline-controls input[type="range"]::-webkit-slider-runnable-track {
    height: .44rem;
    border-radius: var(--bb-radius-pill);
    background: linear-gradient(90deg, var(--blackbox-primary), #8edbd9);
    box-shadow: inset 0 0 0 1px rgba(41,169,167,.18);
}

.timeline-controls input[type="range"]::-webkit-slider-thumb {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -.36rem;
    border: 3px solid #ffffff;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-primary);
    box-shadow: 0 4px 12px rgba(41,169,167,.35);
    -webkit-appearance: none;
    appearance: none;
}

.timeline-controls input[type="range"]::-moz-range-track {
    height: .44rem;
    border-radius: var(--bb-radius-pill);
    background: linear-gradient(90deg, var(--blackbox-primary), #8edbd9);
    box-shadow: inset 0 0 0 1px rgba(41,169,167,.18);
}

.timeline-controls input[type="range"]::-moz-range-progress {
    height: .44rem;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-primary);
}

.timeline-controls input[type="range"]::-moz-range-thumb {
    width: .85rem;
    height: .85rem;
    border: 3px solid #ffffff;
    border-radius: var(--bb-radius-pill);
    background: var(--blackbox-primary);
    box-shadow: 0 4px 12px rgba(41,169,167,.35);
}

.vhf-transcript-stream {
    gap: .5rem;
    max-height: 28rem;
}

.vhf-transcript-item {
    grid-template-columns: 7.5rem 7.5rem 9rem minmax(0, 1fr);
    gap: .55rem;
    padding: .65rem .75rem;
    font-size: .88rem;
}

.vhf-transcript-time,
.vhf-transcript-channel {
    font-size: .82rem;
}

.vhf-transcript-language {
    font-size: .78rem;
}

.vhf-transcript-message {
    line-height: 1.35;
}

.vhf-transcript-translation {
    margin-top: .15rem;
    padding: .4rem .6rem;
    font-size: .82rem;
    line-height: 1.35;
}

.incident-loading-card small {
    color: #6b7280;
    font-size: .82rem;
}

.login-page-shell {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
}

.login-card {
    margin: 0 auto;
}

.telemetry-summary-grid {
    margin-top: 1rem;
}

.vhf-transcript-gap {
    margin-bottom: .85rem;
    padding: .85rem 1rem;
    border: 1px dashed rgba(41,169,167,.35);
    border-radius: var(--bb-radius-sm);
    background: #f8fcfc;
}

.vhf-transcript-gap strong,
.vhf-transcript-gap small {
    display: block;
}

.vhf-transcript-gap strong {
    color: #111827;
}

.vhf-transcript-gap small {
    margin-top: .25rem;
    color: #6b7280;
}

.vhf-transcript-gap small:has(.vhf-jump-link),
.vhf-transcript-empty small:has(.vhf-jump-link) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.dialog-cancel-button.rz-button,
.dialog-cancel-button.rz-button.rz-light {
    border: 1px solid var(--blackbox-border) !important;
    background: #ffffff !important;
    color: #374151 !important;
}

.dialog-cancel-button.rz-button:hover,
.dialog-cancel-button.rz-button:focus-visible,
.dialog-cancel-button.rz-button.rz-light:hover,
.dialog-cancel-button.rz-button.rz-light:focus-visible {
    border-color: rgba(41,169,167,.36) !important;
    background: #eff8f8 !important;
    color: #0f766e !important;
}

.upload-file-card {
    border-color: var(--blackbox-border) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
    border: 1px solid var(--blackbox-border);
    border-radius: 22px;
    padding: 1rem;
}

.timeline-controls .timeline-speed-dropdown.rz-dropdown {
    min-width: 7rem;
}

.timeline-controls .timeline-speed-dropdown .rz-dropdown-label {
    color: #333333 !important;
}

.timeline-controls .timeline-speed-dropdown .rz-dropdown-trigger {
    background: #f8fafc !important;
    color: var(--blackbox-primary-dark) !important;
}

.rz-multiselect-header {
    background: #ffffff !important;
    color: #333333 !important;
}

.rz-multiselect-header:hover {
    background: #eff8f8 !important;
    color: #0f766e !important;
}

.rz-multiselect-header .rz-chkbox-box,
.rz-multiselect-item .rz-chkbox-box {
    border: 1px solid rgba(41,169,167,.28) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.rz-multiselect-header:hover .rz-chkbox-box,
.rz-multiselect-header .rz-chkbox-box:hover,
.rz-multiselect-header .rz-chkbox-box.rz-state-hover,
.rz-multiselect-header .rz-chkbox-box.rz-state-focus,
.rz-multiselect-item:hover .rz-chkbox-box,
.rz-multiselect-item .rz-chkbox-box:hover,
.rz-multiselect-item .rz-chkbox-box.rz-state-hover,
.rz-multiselect-item .rz-chkbox-box.rz-state-focus {
    border-color: rgba(41,169,167,.52) !important;
    background: #eff8f8 !important;
}

.rz-multiselect-header .rz-chkbox-box.rz-state-active,
.rz-multiselect-header:hover .rz-chkbox-box.rz-state-active,
.rz-multiselect-header .rz-chkbox-box.rz-state-active.rz-state-hover,
.rz-multiselect-header .rz-chkbox-box.rz-state-active:hover,
.rz-multiselect-item .rz-chkbox-box.rz-state-active,
.rz-multiselect-item:hover .rz-chkbox-box.rz-state-active,
.rz-multiselect-item .rz-chkbox-box.rz-state-active.rz-state-hover,
.rz-multiselect-item .rz-chkbox-box.rz-state-active:hover {
    border-color: var(--blackbox-primary) !important;
    background: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.rz-multiselect-header .rz-chkbox-icon,
.rz-multiselect-item .rz-chkbox-icon {
    color: #ffffff !important;
}

.rz-calendar .rz-button.rz-primary,
.rz-datepicker .rz-button.rz-primary {
    background: var(--blackbox-primary) !important;
    border-color: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.rz-calendar .rz-button.rz-primary:hover,
.rz-calendar .rz-button.rz-primary:focus-visible,
.rz-datepicker .rz-button.rz-primary:hover,
.rz-datepicker .rz-button.rz-primary:focus-visible {
    background: var(--blackbox-primary-dark) !important;
    border-color: var(--blackbox-primary-dark) !important;
    color: #ffffff !important;
}

.app-main:has(.login-page-shell) {
    min-height: calc(100vh - 72px);
    padding: 0 2rem !important;
    display: grid;
    align-items: center;
    overflow: hidden;
}

.app-main:has(.detail-grid) {
    width: min(1460px, 100%);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.login-page-shell {
    min-height: 100%;
    align-content: center;
}

.login-card {
    max-width: 420px;
    display: grid;
    gap: 1rem;
}

.grid-panel > .section-heading {
    margin-bottom: .9rem;
}

.detail-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    display: grid;
    align-items: start;
}

.detail-sidebar {
    gap: .85rem;
    position: sticky;
    top: 92px;
    display: grid;
}

.detail-main .content-card {
    padding: .95rem;
}

.camera-layout-shell,
.media-grid,
.telemetry-category-list {
    gap: .85rem;
}

.camera-panel {
    min-height: 236px;
    border: 1px solid var(--blackbox-border);
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
}

.camera-panel-featured {
    min-height: 360px;
}

.camera-panel-compact {
    min-height: 168px;
}

.camera-header {
    padding: .6rem .75rem;
    gap: .75rem;
}

.camera-video-stack,
.navigation-map-stack {
    min-height: 190px;
}

.camera-panel video,
.navigation-map-canvas {
    height: 190px;
}

.camera-panel-featured .camera-video-stack {
    min-height: 340px;
}

.camera-panel-featured video {
    height: 340px;
}

.camera-panel-compact .camera-video-stack,
.camera-panel-compact .camera-empty,
.camera-panel-compact .navigation-map-stack,
.camera-panel-compact .navigation-map-canvas {
    min-height: 120px;
    height: 120px;
}

.camera-panel-compact video {
    height: 120px;
}

.camera-empty {
    min-height: 190px;
}

.camera-segment-list,
.navigation-map-meta {
    padding: .55rem .7rem .7rem;
}

.camera-segment-list {
    gap: .4rem;
    display: flex;
    overflow-x: auto;
    border-top: 1px solid var(--blackbox-border);
}

.camera-segment-list span {
    padding: .3rem .55rem;
}

.telemetry-category-body {
    padding: .85rem;
}

.telemetry-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: 1rem;
}

.vhf-channel-summary {
    gap: .45rem;
    margin-bottom: .75rem;
}

.vhf-channel-chip {
    padding: .35rem .65rem;
}

.vhf-transcript-stream {
    gap: .45rem;
    max-height: 24rem;
}

.vhf-transcript-item {
    grid-template-columns: 6.75rem 6.75rem 8.5rem minmax(0, 1fr);
    gap: .45rem;
    padding: .55rem .65rem;
    font-size: .84rem;
}

.vhf-transcript-time,
.vhf-transcript-channel {
    font-size: .78rem;
}

.vhf-transcript-language {
    font-size: .74rem;
}

.vhf-transcript-translation {
    padding: .35rem .5rem;
    font-size: .78rem;
}

.multi-file-picker {
    padding: 1rem 1rem 1.15rem;
    border: 1px solid var(--blackbox-border);
    border-radius: 16px;
    background: #ffffff;
    display: grid;
    gap: .55rem;
}

.multi-file-picker input[type="file"] {
    border-color: rgba(41,169,167,.32) !important;
    background: #f8fafc !important;
    color: #374151 !important;
    border: 1px dashed rgba(94,234,212,.42);
    border-radius: var(--bb-radius-md);
    width: 100%;
    padding: 1rem 1.05rem;
    cursor: pointer;
}

.timeline-speed-menu {
    position: relative;
    min-width: 0;
}

.timeline-speed-meta {
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.timeline-speed-trigger {
    width: 100%;
    min-width: 6.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    border: 1px solid #e0e0e0 !important;
    border-radius: var(--bb-radius-pill);
    background: #ffffff !important;
    color: #333333 !important;
    padding: .42rem .72rem;
    font-weight: 800;
}

.timeline-speed-dropdown-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + .6rem);
    min-width: 9rem;
    display: grid;
    gap: .35rem;
    padding: .45rem;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15,23,42,.16);
}

.timeline-speed-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: var(--bb-radius-sm) !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: none !important;
    text-align: left;
}

.timeline-speed-option.is-selected {
    border-color: rgba(41,169,167,.36) !important;
    background: #eff8f8 !important;
    color: #0f766e !important;
}

.timeline-speed-option i {
    font-size: .8rem;
}

.timeline-controls button,
.timeline-controls select {
    border-color: #e0e0e0 !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--bb-radius-pill);
    padding: .42rem .72rem;
}

.timeline-controls button:hover:not(:disabled),
.timeline-controls button:focus-visible:not(:disabled),
.timeline-controls select:hover,
.timeline-controls select:focus-visible {
    border-color: rgba(41,169,167,.52) !important;
    background: #eff8f8 !important;
    color: #0f766e !important;
    box-shadow: 0 8px 18px rgba(41,169,167,.14);
    outline: 0;
}

.timeline-controls .timeline-icon-button {
    border-color: transparent !important;
    background: transparent !important;
    color: #374151 !important;
    box-shadow: none !important;
}

.timeline-controls .timeline-icon-button:hover:not(:disabled),
.timeline-controls .timeline-icon-button:focus-visible:not(:disabled) {
    border-color: transparent !important;
    background: transparent !important;
    color: #0f766e !important;
    box-shadow: none !important;
}

.timeline-action-trigger {
    min-width: 7rem;
    border-color: rgba(20,184,166,.45) !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.timeline-actions-dropdown {
    border-color: #e0e0e0 !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.16) !important;
    position: absolute;
    right: 0;
    bottom: calc(100% + .7rem);
    min-width: 18rem;
    display: grid;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 22px;
    backdrop-filter: blur(18px);
}

.timeline-action-item-label {
    color: #111827;
    font-weight: 700;
}

.timeline-action-item-description {
    color: #6b7280;
    font-size: .74rem;
    line-height: 1.35;
}

.timeline-control-group-actions,
.timeline-controls-sidebar .timeline-control-group-tools {
    border-color: #e0e0e0 !important;
}

.timeline-controls-sidebar {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 1;
}

.timeline-controls-sidebar .timeline-actions-menu,
.timeline-controls-sidebar .timeline-action-trigger,
.timeline-controls-sidebar .timeline-speed-menu {
    width: 100%;
}

.timeline-controls-sidebar .timeline-actions-dropdown,
.timeline-controls-sidebar .timeline-speed-dropdown-panel {
    top: calc(100% + .5rem);
    bottom: auto;
    right: auto;
    left: 0;
    width: 100%;
    min-width: 100%;
    z-index: 60;
}

.timeline-controls-bottom.is-collapsed .timeline-control-body {
    grid-template-columns: auto auto;
    gap: .35rem;
}

.timeline-controls-bottom.is-collapsed {
    width: auto;
}

.timeline-controls-bottom.is-collapsed .timeline-speed-menu,
.timeline-controls-bottom.is-collapsed .timeline-speed-meta,
.timeline-controls-bottom.is-collapsed .timeline-control-group-scrub,
.timeline-controls-bottom.is-collapsed .timeline-control-group-actions,
.timeline-controls-bottom.is-collapsed .timeline-layout-toggle {
    display: none;
}

.timeline-controls-bottom.is-collapsed .timeline-control-group-playback,
.timeline-controls-bottom.is-collapsed .timeline-control-group-tools {
    gap: .35rem;
    padding-left: 0;
}

.rz-datepicker-popup-container,
.rz-datepicker-footer {
    --rz-secondary: var(--blackbox-primary);
    --rz-secondary-dark: var(--blackbox-primary-dark);
    --rz-secondary-darker: var(--blackbox-primary-dark);
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
}

.rz-datepicker-popup-container .rz-calendar-header .rz-button,
.rz-datepicker-popup-container .rz-calendar-prev,
.rz-datepicker-popup-container .rz-calendar-next {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--rz-datepicker-header-color) !important;
}

.rz-datepicker-popup-container .rz-calendar-prev .rzi,
.rz-datepicker-popup-container .rz-calendar-next .rzi {
    color: var(--rz-datepicker-header-color) !important;
}

.rz-datepicker-popup-container .rz-calendar-header .rz-button:hover:not(.rz-state-disabled),
.rz-datepicker-popup-container .rz-calendar-header .rz-button:focus-visible:not(.rz-state-disabled),
.rz-datepicker-popup-container .rz-calendar-prev:hover:not(.rz-state-disabled),
.rz-datepicker-popup-container .rz-calendar-prev:focus-visible:not(.rz-state-disabled),
.rz-datepicker-popup-container .rz-calendar-next:hover:not(.rz-state-disabled),
.rz-datepicker-popup-container .rz-calendar-next:focus-visible:not(.rz-state-disabled) {
    background: #eff8f8 !important;
    background-color: #eff8f8 !important;
    border-color: transparent !important;
    color: var(--blackbox-primary-dark) !important;
}

.rz-datepicker-popup-container .rz-calendar-header .rz-button:hover:not(.rz-state-disabled) .rzi,
.rz-datepicker-popup-container .rz-calendar-header .rz-button:focus-visible:not(.rz-state-disabled) .rzi,
.rz-datepicker-popup-container .rz-calendar-prev:hover:not(.rz-state-disabled) .rzi,
.rz-datepicker-popup-container .rz-calendar-prev:focus-visible:not(.rz-state-disabled) .rzi,
.rz-datepicker-popup-container .rz-calendar-next:hover:not(.rz-state-disabled) .rzi,
.rz-datepicker-popup-container .rz-calendar-next:focus-visible:not(.rz-state-disabled) .rzi {
    color: var(--blackbox-primary-dark) !important;
}

.rz-datepicker-footer .rz-button.rz-secondary,
.rz-datepicker-footer .rz-button.rz-secondary.rz-shade-default {
    background: var(--blackbox-primary) !important;
    background-color: var(--blackbox-primary) !important;
    border-color: var(--blackbox-primary) !important;
    color: #ffffff !important;
}

.rz-datepicker-footer .rz-button.rz-secondary:hover,
.rz-datepicker-footer .rz-button.rz-secondary:focus-visible,
.rz-datepicker-footer .rz-button.rz-secondary.rz-shade-dark,
.rz-datepicker-footer .rz-button.rz-secondary.rz-shade-darker {
    background: var(--blackbox-primary-dark) !important;
    background-color: var(--blackbox-primary-dark) !important;
    border-color: var(--blackbox-primary-dark) !important;
}

@media (max-width: 1050px) {
    .dialog-form-grid-create-incident {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 850px) {
    .rz-dialog-wrapper.create-incident-dialog-wrapper {
        align-items: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .rz-dialog.create-incident-dialog {
        margin-top: 0 !important;
    }
}

.detail-grid-details-collapsed {
    grid-template-columns: minmax(0, 1fr) 0;
}

.detail-grid-details-collapsed .detail-sidebar {
    width: 0;
    overflow: visible;
    justify-items: end;
}

.detail-grid-details-collapsed .sidebar-card {
    width: 3.35rem;
}

.camera-header {
    padding: .5rem .65rem;
    gap: .6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--blackbox-border);
}

.icon-button,
.timeline-icon-button {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: var(--bb-radius-pill);
}

.vhf-card {
    display: grid;
    gap: .75rem;
}

.vhf-panel-body {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: .7rem;
    min-height: 25rem;
}

.vhf-transcript-gap {
    margin-bottom: 0;
    min-height: 4rem;
}

.vhf-transcript-empty {
    height: 100%;
    min-height: 18.6rem;
    display: grid;
    align-content: center;
    gap: .35rem;
    padding: 1rem 1.15rem;
    border: 1px dashed rgba(148,163,184,.35);
    border-radius: var(--bb-radius-md);
    background: #f8fafc;
}

.vhf-transcript-empty strong,
.vhf-transcript-empty small {
    display: block;
}

.vhf-transcript-empty strong {
    color: #0f172a;
}

.vhf-transcript-empty small {
    color: #6b7280;
    line-height: 1.45;
}

.vhf-transcript-gap.is-empty {
    border-color: transparent;
    background: transparent;
}

.vhf-transcript-gap.is-empty strong,
.vhf-transcript-gap.is-empty small {
    visibility: hidden;
}

.vhf-transcript-stream {
    height: 18.6rem;
    min-height: 18.6rem;
    max-height: 18.6rem;
}

.navigation-map-panel .mapboxgl-map,
.navigation-map-panel .mapboxgl-canvas {
    background: #f8fafc;
}

.navigation-map-panel .mapboxgl-ctrl-group {
    border-color: var(--blackbox-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.navigation-map-panel .mapboxgl-ctrl button {
    background: #ffffff;
}

.navigation-map-panel .mapboxgl-ctrl-attrib {
    background: rgba(248, 250, 252, .88);
    color: #4b5563;
}

.navigation-map-panel .mapboxgl-ctrl-attrib a {
    color: #0f766e;
}

.navigation-map-marker {
    display: block;
    width: .95rem;
    height: .95rem;
    border: 2px solid #ffffff;
    border-radius: var(--bb-radius-pill);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .24);
}

.navigation-map-marker-start {
    background: #38bdf8;
}

.navigation-map-marker-end {
    background: #f59e0b;
}

.navigation-map-marker-incident {
    width: 1.1rem;
    height: 1.1rem;
    background: #7c3aed;
}

.navigation-map-marker-cursor {
    width: 1rem;
    height: 1rem;
    background: #ef4444;
}

/* ------------------------------------------------------------------ */
/* UI fixes: tabs, grid row selection/actions, navigation-map empty.   */
/* ------------------------------------------------------------------ */

/* Tabs: keep inactive labels muted instead of the default near-black,
   the hovered tab in the accent, and the active tab in the darker accent. */
.rz-tabview .rz-tabview-nav li a,
.rz-tabview .rz-tabview-nav li .rz-tabview-title,
.rz-tabview .rz-tabview-nav .rz-tabview-nav-item a,
.rz-tabview .rz-tabview-nav .rz-tabview-nav-item .rz-tabview-title {
    color: var(--blackbox-muted) !important;
    transition: color .15s ease;
}

.rz-tabview .rz-tabview-nav li:hover a,
.rz-tabview .rz-tabview-nav li:hover .rz-tabview-title,
.rz-tabview .rz-tabview-nav li.rz-state-focused a {
    color: var(--blackbox-primary) !important;
}

.rz-tabview .rz-tabview-nav li.rz-tabview-selected a,
.rz-tabview .rz-tabview-nav li.rz-state-active a,
.rz-tabview .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title,
.rz-tabview .rz-tabview-nav li.rz-state-active .rz-tabview-title {
    color: var(--blackbox-primary-dark) !important;
}

/* Selected/clicked grid row: keep the text in the theme colour rather than
   the default link-blue that lingers after a row is clicked. */
.blackbox-grid .rz-datatable-data tr.rz-selected td,
.blackbox-grid .rz-data-row.rz-selected td,
.blackbox-grid .rz-selectable tbody tr.rz-state-highlight td,
.blackbox-grid tr.rz-selected td,
.blackbox-grid tr:focus-within td {
    background: #eff8f8 !important;
    color: #111827 !important;
}

.blackbox-grid tr.rz-selected td *,
.blackbox-grid .rz-data-row.rz-selected td *,
.blackbox-grid tr.rz-state-highlight td *,
.blackbox-grid tr:focus-within td * {
    color: inherit !important;
}

/* Candidate row actions are icon-only ghost buttons: no fill/border, theme-coloured
   icons (Promote accent, Discard danger) that stay readable on row hover instead of
   inheriting the dark hover text colour. */
.blackbox-grid .candidate-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .15rem;
}

.blackbox-grid .candidate-actions .rz-button,
.blackbox-grid tr:hover td .candidate-actions .rz-button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.blackbox-grid .candidate-actions .rz-button.rz-primary,
.blackbox-grid .candidate-actions .rz-button.rz-primary i,
.blackbox-grid tr:hover td .candidate-actions .rz-button.rz-primary,
.blackbox-grid tr:hover td .candidate-actions .rz-button.rz-primary i {
    color: var(--blackbox-primary-dark) !important;
}

.blackbox-grid .candidate-actions .rz-button.rz-danger,
.blackbox-grid .candidate-actions .rz-button.rz-danger i,
.blackbox-grid tr:hover td .candidate-actions .rz-button.rz-danger,
.blackbox-grid tr:hover td .candidate-actions .rz-button.rz-danger i {
    color: #dc2626 !important;
}

.blackbox-grid .candidate-actions .rz-button.rz-primary:hover {
    background: rgba(41, 169, 167, .12) !important;
}

.blackbox-grid .candidate-actions .rz-button.rz-danger:hover {
    background: rgba(220, 38, 38, .12) !important;
}

/* Keep the Actions header/cells off the right edge. */
.blackbox-grid th.candidate-actions-col,
.blackbox-grid td.candidate-actions-col {
    padding-right: 1.1rem !important;
}

/* ------------------------------------------------------------------ */
/* Candidate dialogs                                                   */
/* ------------------------------------------------------------------ */

/* Intro/context line shared by the promote & discard dialogs. */
.dialog-context-line {
    margin: 0 0 1.15rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--blackbox-border);
    color: var(--blackbox-muted);
    font-size: .9rem;
    line-height: 1.45;
}

/* Promote/discard actions at the bottom of the details sidebar card in candidate
   review mode: two square icon-only buttons, centered. */
.candidate-detail-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--blackbox-border);
}

.candidate-detail-actions .candidate-action-button {
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
}

.candidate-detail-actions .candidate-action-button .rzi {
    font-size: 1.4rem;
}

/* ------------------------------------------------------------------ */
/* Manage camera footage grid                                          */
/* ------------------------------------------------------------------ */

/* Group header rows ("Bridge — 1 segment") read as a tinted section band
   instead of a stark white block, with the camera name in the accent colour. */
.manage-footage .blackbox-grid .rz-group-row td,
.manage-footage .blackbox-grid .rz-group-row:hover td {
    background: #ffffff !important;
    border-top: 1px solid var(--blackbox-border) !important;
    border-bottom: 1px solid var(--blackbox-border) !important;
}

.manage-footage .blackbox-grid .rz-group-row strong {
    color: var(--blackbox-primary-dark) !important;
    letter-spacing: .02em;
}

/* The group expand/collapse toggle is a Radzen button; neutralise its default
   near-white hover/focus background AND the focus ring/outline that otherwise
   lingers after a click, so it blends into the group band. */
.manage-footage .blackbox-grid .rz-group-row .rz-button,
.manage-footage .blackbox-grid .rz-group-row .rz-button:hover,
.manage-footage .blackbox-grid .rz-group-row .rz-button:focus,
.manage-footage .blackbox-grid .rz-group-row .rz-button:focus-visible,
.manage-footage .blackbox-grid .rz-group-row .rz-button:active,
.manage-footage .blackbox-grid .rz-group-row .rz-button.rz-state-focused {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--blackbox-primary-dark) !important;
}

/* The row being edited stays clearly active and themed (just a tint — no per-cell
   accent lines, which read as column separators). */
.manage-footage .blackbox-grid tr.rz-datatable-edit td {
    background: #eff8f8 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Action icons darken to the accent on hover/focus. The `tr:hover td` ancestor is
   included so this beats the row-hover rule that otherwise pins the lighter accent. */
.blackbox-grid tr:hover td .footage-row-actions .rz-button:hover,
.blackbox-grid tr:hover td .footage-row-actions .rz-button:hover .rzi,
.blackbox-grid tr:hover td .footage-row-actions .rz-button:hover i,
.blackbox-grid .footage-row-actions .rz-button:focus-visible,
.blackbox-grid .footage-row-actions .rz-button:focus-visible .rzi,
.blackbox-grid .footage-row-actions .rz-button:focus-visible i {
    color: var(--blackbox-primary-dark) !important;
}

/* The glyph stays transparent — a background on the <i>/box AND the button produced
   the doubled background; keep the single subtle tint on the button only. */
.blackbox-grid .footage-row-actions .rz-button:hover .rzi,
.blackbox-grid .footage-row-actions .rz-button:hover .rz-button-box,
.blackbox-grid .footage-row-actions .rz-button:hover i,
.blackbox-grid .footage-row-actions .rz-button:focus-visible .rzi,
.blackbox-grid .footage-row-actions .rz-button:focus-visible .rz-button-box,
.blackbox-grid .footage-row-actions .rz-button:focus-visible i {
    background: transparent !important;
}

.blackbox-grid .footage-row-actions .rz-button:hover,
.blackbox-grid .footage-row-actions .rz-button:focus-visible {
    background: rgba(41, 169, 167, .12) !important;
    box-shadow: none !important;
}

/* Navigation-map "no GPS points" message: give the centred text padding so
   it isn't flush against the panel edges. */
.navigation-map-empty {
    padding: 1.25rem 1.5rem;
    text-align: center;
}

/* Hint line under a dialog field (e.g. the promote dialog priority note). */
.dialog-hint {
    margin: .35rem 0 0;
    color: var(--blackbox-muted);
    font-size: .82rem;
}

/* Per-panel progressive-loading placeholder (B9.2): telemetry / VHF / handover panels render this
   compact spinner + label while their sub-resource fetch is in flight, so the shell stays responsive. */
.panel-loading {
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    padding: var(--bb-space-4);
    color: var(--blackbox-muted);
    font-size: var(--bb-font-sm);
}

.panel-loading .loading-spinner {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    border-width: 2px;
}

/* Per-severity alarm counts on the collapsed Alarms summary (B10). The aggressive
   `.telemetry-category summary span` title rule needs a higher-specificity override for the chips. */
.telemetry-category summary .alarm-summary-counts {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-left: auto;
}

.telemetry-category summary .alarm-summary-counts .alarm-severity-chip {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .12rem .5rem;
}