/* Replay owns one compact dock layout; no duplicate inline layout overrides. */
body.page-replay { height: 100%; min-height: 100%; overflow: hidden; }
body.page-replay #container {
    position: fixed !important; inset: var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) 0 0 !important;
    height: auto !important; min-height: 0 !important; overflow: hidden; width: 100%;
}
body.page-replay #image-map { position: absolute; inset: 0 0 var(--status-replay-footer-height, 105px) !important; width: auto; height: auto !important; min-height: 0; padding: 0; }
body.page-replay #container:is(:fullscreen, .leaflet-pseudo-fullscreen) { inset: 0 !important; z-index: 99999 !important; height: auto !important; }
html[data-status-theme] body.page-replay footer.footer {
    position: absolute !important; inset: auto 0 0 !important; width: 100% !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    display: block !important; transform: none !important; z-index: 1000;
}
body.page-replay #timeSliderDiv {
    width: 100% !important; margin: 0 !important; transform: none !important;
    background: var(--ct-secondary-bg, #fff); color: var(--ct-body-color, #334155);
    border-top: 1px solid var(--ct-border-color, #dbe3ec);
    padding: 6px max(8px, var(--status-safe-right, 0px)) calc(6px + var(--status-safe-bottom, 0px)) max(8px, var(--status-safe-left, 0px));
}
.status-replay-controls { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.status-replay-timeline { display: flex; min-width: 0; align-items: center; gap: 8px; }
.status-replay-time-strip { flex: 0 0 auto; min-width: 0; touch-action: pan-y pinch-zoom; }
.status-replay-time-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 2px 4px; background: none; border: 0; border-radius: .4rem; color: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-replay-time-button .mdi { font-size: 17px; color: var(--ct-primary, #3b70f8); }
.status-replay-time-button:hover, .status-replay-time-button:focus-visible { background: var(--ct-tertiary-bg, #f1f5f9); outline: 2px solid var(--ct-primary, #3b70f8); outline-offset: -2px; }
.status-replay-actions, .status-replay-buttons, .status-replay-options { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; gap: 6px; }
body.page-replay .status-replay-buttons .btn, body.page-replay .status-replay-options .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; min-width: 44px; min-height: 44px; padding: 4px 8px; gap: 4px; }
body.page-replay #replayPlay { min-width: 80px; font-weight: 600; }
body.page-replay .status-replay-speed { width: 76px; height: 44px; min-height: 44px; margin: 0; padding: 4px 24px 4px 8px; }
.status-replay-icon { font-size: 22px; width: 22px; line-height: 1; flex: 0 0 22px; }
.status-replay-range {
    display: block; flex: 1 1 auto; min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; height: 44px; margin: 0; padding: 0;
    background: transparent; border: 0; accent-color: var(--ct-primary, #3b70f8); touch-action: pan-y; cursor: pointer;
}
.status-replay-range::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 4px; background: linear-gradient(to right, var(--ct-primary, #3b70f8) var(--replay-progress, 0%), var(--ct-border-color, #dbe3ec) var(--replay-progress, 0%)); }
.status-replay-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--ct-secondary-bg, #fff); background: var(--ct-primary, #3b70f8); box-shadow: 0 0 0 1px var(--ct-primary, #3b70f8); }
.status-replay-range::-moz-range-track { height: 6px; border: 0; border-radius: 4px; background: var(--ct-border-color, #dbe3ec); }
.status-replay-range::-moz-range-progress { height: 6px; border-radius: 4px; background: var(--ct-primary, #3b70f8); }
.status-replay-range::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ct-secondary-bg, #fff); background: var(--ct-primary, #3b70f8); box-shadow: 0 0 0 1px var(--ct-primary, #3b70f8); }
.status-replay-range:focus-visible { outline: 2px solid var(--ct-primary, #3b70f8); outline-offset: 2px; border-radius: 4px; }
.status-replay-range:disabled { opacity: .5; }
.status-replay-state { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.status-replay-feedback { display: none; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 8px; font-size: .8rem; }
.status-replay-feedback:has(#replayStatus:not(:empty), #replayGap:not([hidden]), #replayRetry:not([hidden])) { display: flex; }
#replayStatus { color: var(--ct-secondary-color, #64748b); }
#replayStatus[data-severity="warning"], #replayStatus[data-severity="danger"] { color: var(--ct-danger, #b91c1c); }
.status-replay-gap { color: var(--ct-warning-text-emphasis, #855600); }
.status-replay-gap[hidden], #replayStatus:empty { display: none; }
body.page-replay #replayRetry { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 4px; flex: 0 0 44px; }
body.page-replay #replayRetry[hidden] { display: none; }
.status-replay-more { position: relative; }
.status-replay-more summary { list-style: none; cursor: pointer; }
.status-replay-more summary::-webkit-details-marker { display: none; }
.status-replay-more-panel {
    position: fixed; bottom: calc(var(--status-replay-footer-height, 105px) + .5rem); right: .5rem; width: min(22rem, calc(100vw - 1rem)); display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem;
    padding: .65rem; background: var(--ct-secondary-bg, #fff); border: 1px solid var(--ct-border-color, #dbe3ec); border-radius: .8rem; box-shadow: 0 8px 30px #0002;
    max-height: calc(100dvh - var(--status-navbar-actual-height, var(--status-navbar-height, 70px)) - var(--status-replay-footer-height, 105px) - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
}
body.page-replay .status-replay-more-panel > * { min-width: 0; max-width: 100%; }
.status-replay-menu-header { display: flex; align-items: center; gap: .5rem; touch-action: pan-x pinch-zoom; }
body.page-replay #replayMoreClose { margin-inline-start: auto; width: 44px; min-height: 44px; justify-content: center; border: 0; }
.status-replay-menu-group { display: grid; gap: .15rem; padding-block: .25rem; }
.status-replay-menu-group + .status-replay-menu-group { border-top: 1px solid var(--ct-border-color, #dbe3ec); padding-top: .75rem; }
.status-replay-menu-group h3 { margin: 0 .5rem .35rem; font-size: .78rem; color: var(--ct-secondary-color, #64748b); text-transform: uppercase; letter-spacing: .04em; }
body.page-replay .status-replay-menu-group .btn { min-height: 44px; border: 0; background: transparent; color: var(--ct-body-color, #334155); padding: .5rem; box-shadow: none; font-size: .9rem; justify-content: flex-start; text-align: left; gap: .55rem; white-space: normal; }
body.page-replay .status-replay-menu-group .btn:hover, body.page-replay .status-replay-menu-group .btn:focus-visible { background: var(--ct-tertiary-bg, #f1f5f9); }
body.page-replay .status-replay-menu-group .btn.active { background: var(--ct-primary-bg-subtle, #e4ebff); color: var(--ct-primary, #3b70f8); }
.status-replay-time-dialog { position: fixed; width: min(24rem, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); padding: 0; border: 1px solid var(--ct-border-color, #dbe3ec); border-radius: .8rem; background: var(--ct-secondary-bg, #fff); color: var(--ct-body-color, #334155); }
.status-replay-time-dialog::backdrop { background: #0007; }
.status-replay-time-dialog[open] { display: flex; flex-direction: column; }
.status-replay-time-dialog > header { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: 1px solid var(--ct-border-color, #dbe3ec); }
.status-replay-time-dialog h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.status-replay-time-dialog .btn, .status-replay-time-dialog :is(input, select) { min-height: 44px; }
.status-replay-time-body { padding: .75rem; overflow: auto; min-height: 0; margin: 0; }
.status-replay-time-body label { display: block; font-weight: 600; margin-bottom: .3rem; }
#replayDayField { margin-bottom: .75rem; }
#replayDayField[hidden] { display: none; }
.status-replay-time-go { display: flex; gap: .5rem; }
body.page-replay #replaySeekTime { min-width: 0; max-width: 100%; flex: 1 1 auto; }
.status-replay-time-go .btn { min-width: 80px; margin: 0; }
.status-replay-time-body p { margin: .5rem 0 0; }
.status-replay-seek-error { color: var(--ct-danger, #b91c1c); }
.status-replay-seek-error[hidden] { display: none; }
body.page-replay #image-map .status-replay-map-icon { width: 24px; height: 24px; display: block; pointer-events: none; }
body.page-replay #image-map .leaflet-control-zoom-fullscreen .status-replay-map-icon { margin: auto; }
body.page-replay #image-map.status-replay-exporting { pointer-events: none; }
body.page-replay #replayLoadingOverlay { position: absolute; inset: 0 0 var(--status-replay-footer-height, 105px); z-index: 1000; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(248,249,250,.42); backdrop-filter: blur(1px); }
.status-replay-loading-content { display: inline-flex; align-items: center; gap: .65rem; padding: .75rem 1rem; border: 1px solid rgba(0,0,0,.1); border-radius: .65rem; background: rgba(255,255,255,.96); box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.12); font-weight: 600; }
.status-replay-loading-content .spinner-border { width: 1.35rem; height: 1.35rem; border-width: .16em; }
.status-replay-task-marker { background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
@media (max-width: 991.98px) { body.page-replay { padding-bottom: 0 !important; } body.page-replay .status-mobile-nav { display: none !important; } }
@media (max-width: 767.98px) { .status-replay-controls { grid-template-columns: minmax(0, 1fr); gap: 4px; } .status-replay-actions { justify-content: center; } }
@media (max-height: 480px) and (orientation: landscape) { body.page-replay #timeSliderDiv { padding-block: 4px calc(4px + var(--status-safe-bottom, 0px)); } }
