html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cew-initializing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 18rem;
    color: var(--bs-body-color);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── App shell layout ── */
.marisat-shell {
    display: flex;
    min-height: 100vh;
    position: relative;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 54px;
    --toggle-size: 40px;
    --toggle-top: 0.6rem;
    --transition: 0.25s ease;
}

/* ── Sidebar ── */
.marisat-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 1100;
    transition: width var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #1f2937;
    border-right: 1px solid #e5e7eb;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset, 8px 0 24px rgba(15,23,42,0.04);
}

[data-bs-theme=dark] .marisat-sidebar {
    background-color: #212529;
    color: #f8f9fa;
    border-right-color: rgba(255,255,255,0.08);
    box-shadow: none;
}

.shell--closed .marisat-sidebar {
    width: var(--sidebar-collapsed-width);
}

/* ── Main content area ── */
.marisat-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition);
}

/* Top bar: always leave room for the hamburger button */
.marisat-topbar {
    padding-left: calc(var(--toggle-size) + 1rem) !important;
}

/* ── Hamburger / close toggle button ── */
.sidebar-toggle {
    position: fixed;
    top: var(--toggle-top);
    left: 0;
    z-index: 1200;
    width: var(--toggle-size);
    height: var(--toggle-size);
    background: #212529;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s, left var(--transition);
}

/* Shift the toggle right alongside the open sidebar so it sits at its edge */
.shell--open .sidebar-toggle {
    left: var(--sidebar-width);
}

.sidebar-toggle:hover {
    background: #1a6ec2;
}

/* ── Mobile overlay (tap to close) ── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1099;
}

/* ── Collapsed nav: icon-only rail ── */
.sidebar-nav--collapsed .sidebar-powered-by,
.sidebar-nav--collapsed .cmd-center-text,
.sidebar-nav--collapsed .cmd-center-arrow,
.sidebar-nav--collapsed .cmd-center-sub,
.sidebar-nav--collapsed .nav-section,
.sidebar-nav--collapsed .nav-link > :not(i:first-child),
.sidebar-nav--collapsed ~ * .nav-link span,
.sidebar-nav--collapsed .nav-link span {
    display: none !important;
}

.sidebar-nav--collapsed {
    overflow: hidden;
}

/* Keep the logo image visible as a small icon when collapsed */
.sidebar-nav--collapsed .sidebar-logo-footer {
    display: flex !important;
    justify-content: center;
    padding: 0.5rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
}
.sidebar-nav--collapsed .sidebar-logo-footer img {
    width: auto !important;
    max-width: 100%;
    max-height: 28px;
    display: block !important;
}

/* Shrink the top brand logo to fit the icon rail when collapsed */
.sidebar-nav--collapsed .sidebar-brand-top {
    padding: 0.5rem 0 !important;
}
.sidebar-nav--collapsed .sidebar-brand-top img {
    width: auto !important;
    max-width: 100%;
    max-height: 32px;
}

/* Collapsed cmd-center button: icon only */
.sidebar-nav--collapsed .cmd-center-btn {
    justify-content: center;
    padding: 0.6rem 0;
}

/* Collapsed nav-link: center the icon */
.sidebar-nav--collapsed .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Support / Logout text: hide text, keep icon */
.sidebar-nav--collapsed a.nav-link > i,
.sidebar-nav--collapsed button.nav-link > i {
    margin-right: 0 !important;
}

/* ── Mobile: sidebar overlays content (drawer style) ── */
@media (max-width: 767.98px) {
    .marisat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(0);
        transition: transform var(--transition), width var(--transition);
    }
    .shell--closed .marisat-sidebar {
        /* On mobile, closed = fully off-screen (not icon rail) */
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    .shell--open .sidebar-toggle {
        left: var(--sidebar-width);
    }
    .shell--closed .sidebar-toggle {
        left: 0;
    }
}

/* Track Pool gauge row (SuperAdmin only) */
.fhcc-pool-row {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.fhcc-pool-gauge {
    max-width: 280px;
    flex: 0 0 280px;
}

/* ── Track Pool live feed panel ─────────────────────────────────────────── */
.fhcc-pool-feed {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    overflow: hidden;
}

.fhcc-pool-feed-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c9b3f5;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fhcc-pool-feed-count {
    font-size: 0.72rem;
    color: #7d8da8;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Processed counter strip */
.fhcc-pool-processed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.74rem;
    color: #8fa0b8;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,230,118,0.05);
}
.fhcc-pool-processed-label {
    display: flex;
    align-items: center;
    color: #7d8da8;
}
.fhcc-pool-processed-count {
    font-weight: 700;
    font-size: 0.9rem;
    color: #00e676;
    font-variant-numeric: tabular-nums;
}
.fhcc-pool-clear-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #c9d1d9;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.fhcc-pool-clear-btn:hover {
    background: rgba(255,93,93,0.18);
    border-color: rgba(255,93,93,0.4);
    color: #ff9d9d;
}

.fhcc-pool-feed-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.fhcc-pool-feed-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    font-size: 0.8rem;
    padding: 1rem;
    gap: 0.4rem;
}

/* Each feed row */
.fhcc-feed-row {
    padding: 0.4rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.75rem;
    transition: background 0.15s;
}
.fhcc-feed-row:last-child { border-bottom: none; }
.fhcc-feed-row:hover { background: rgba(255,255,255,0.04); }

.fhcc-feed-warn  { background: rgba(255,193,7,0.07);  border-left: 2px solid #ffc107; }
.fhcc-feed-error { background: rgba(255,93,93,0.08);  border-left: 2px solid #ff5d5d; }

.fhcc-feed-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.fhcc-feed-listener {
    font-weight: 600;
    color: #7dcfff;
    min-width: 70px;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fhcc-feed-time {
    color: #5a7090;
    font-size: 0.7rem;
    margin-left: auto;
    flex-shrink: 0;
}

.fhcc-feed-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.fhcc-badge-valid { background: rgba(0,230,118,0.15); color: #00e676; border: 1px solid rgba(0,230,118,0.25); }
.fhcc-badge-warn  { background: rgba(255,193,7,0.15);  color: #ffc107; border: 1px solid rgba(255,193,7,0.25); }
.fhcc-badge-error { background: rgba(255,93,93,0.15);  color: #ff5d5d; border: 1px solid rgba(255,93,93,0.25); }

/* Recently processed rows - linger briefly, dimmed, with a green accent */
.fhcc-feed-processed {
    opacity: 0.6;
    background: rgba(0,230,118,0.05);
    border-left: 2px solid rgba(0,230,118,0.4);
}
.fhcc-feed-done {
    font-size: 0.62rem;
    font-weight: 700;
    color: #00e676;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
}

.fhcc-feed-detail {
    color: #8fa0b8;
    font-size: 0.72rem;
}

/* Second / third detail rows — chips strip */
.fhcc-feed-detail2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.18rem;
    font-size: 0.7rem;
    color: #8fa0b8;
}

.fhcc-feed-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.4rem;
    border-radius: 3px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.08);
    color: #b0bec5;
    font-size: 0.68rem;
    white-space: nowrap;
    line-height: 1.4;
}

.fhcc-chip-id {
    color: #7dcfff;
    border-color: rgba(125,207,255,0.25);
    background: rgba(125,207,255,0.07);
    font-family: monospace;
    letter-spacing: 0.03em;
}

.fhcc-chip-warn {
    color: #ffc107;
    border-color: rgba(255,193,7,0.3);
    background: rgba(255,193,7,0.08);
}

/* DIN bit indicator group */
.fhcc-chip-din {
    gap: 0.2rem;
}

.fhcc-din-bit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 2px;
    font-size: 0.58rem;
    font-weight: 700;
    cursor: default;
}

.fhcc-din-on {
    background: rgba(0,230,118,0.25);
    color: #00e676;
    border: 1px solid rgba(0,230,118,0.4);
}

.fhcc-din-off {
    background: rgba(255,255,255,0.05);
    color: #4a5568;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Accumulator values */
.fhcc-chip-accum {
    flex-wrap: wrap;
    gap: 0.2rem;
    background: rgba(201,179,245,0.06);
    border-color: rgba(201,179,245,0.18);
    color: #c9b3f5;
}

.fhcc-accum-val {
    font-family: monospace;
    font-size: 0.65rem;
    color: #c9b3f5;
    padding: 0 0.15rem;
}

.fhcc-accum-val + .fhcc-accum-val::before {
    content: "·";
    margin-right: 0.2rem;
    color: rgba(255,255,255,0.2);
}

.fhcc-feed-issue {
    margin-top: 0.18rem;
    font-size: 0.7rem;
    font-style: italic;
    color: #ffb74d;
}
.fhcc-feed-error .fhcc-feed-issue { color: #ff7d7d; }

/* =============================================================================
   System Command Center - table viewer modal (scc-viewer-*)
   Bootstrap default modal z-index (1055) sits BELOW the app sidebar (1100) and
   toggle (1200), so the dialog was clipped behind the navbar. Lift it above the
   chrome and confine it to the content area to the right of the sidebar so it
   fits next to the nav. Shell-state selectors (0,2,0) also win over .modal.
============================================================================= */
.shell--open .scc-viewer-modal {
    z-index: 2000;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}
.shell--closed .scc-viewer-modal {
    z-index: 2000;
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}
@media (max-width: 767.98px) {
    .shell--open .scc-viewer-modal,
    .shell--closed .scc-viewer-modal {
        left: 0;
        width: 100%;
    }
}

/* ── Listener table Install/Uninstall switch (orange tint) ──────────────── */
.lsm-install-switch {
    accent-color: #ffc07d;
}
.lsm-install-switch:checked {
    background-color: #ffc07d;
    border-color: #ffc07d;
}

/* Sidebar logo */
.sidebar-logo {
    max-height: 48px;
    transition: opacity 0.2s;
}

.sidebar-logo:hover {
    opacity: 0.85;
}

/* Separate the logo from the Command Center quick-launch button so the
   top of the sidebar doesn't feel crowded. */
.sidebar-brand-top {
    border-bottom: 1px solid rgba(15,23,42,0.08);
}
.sidebar-brand-top img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.sidebar-logo-footer {
    margin-top: auto;
    border-top: 1px solid rgba(15,23,42,0.08);
}
.sidebar-logo-footer img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
}
.sidebar-powered-by {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 0.4rem;
    user-select: none;
}
[data-bs-theme=dark] .sidebar-logo-footer img {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,250,0.94) 100%);
    border-radius: 0.85rem;
    padding: 0.65rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

[data-bs-theme=dark] .sidebar-brand-top {
    border-bottom-color: rgba(255,255,255,0.08);
}

[data-bs-theme=dark] .sidebar-logo-footer {
    border-top-color: rgba(255,255,255,0.08);
}

[data-bs-theme=dark] .sidebar-powered-by {
    color: #6c757d;
}

.cmd-center-wrap {
    margin-top: 0.25rem;
}

/* MMS section header banner */
.mms-header {
    min-height: 80px;
}

/* GPS section header banner */
.gps-header {
    min-height: 80px;
}

/* ── Background image header banners ── */
/*
   Asset files required:
     wwwroot/assets/general-background.png  (vehicles / transport scene)
     wwwroot/assets/marina-background.png   (marina / boats scene)
*/

/* General / GPS / Admin header banner (general-background.png) */
.general-header-bg {
    background-color: #1a0035;
    background-image: url('assets/general-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 2rem;
    border-radius: 8px;
    overflow: hidden;
}
.general-header-bg > .header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30,0,60,0.72), rgba(60,0,90,0.55));
    border-radius: 8px;
}

/* Marina Management header banner (marina-background.png) */
.marina-header-bg {
    background-color: #002850;
    background-image: url('assets/marina-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 2rem;
    border-radius: 8px;
    overflow: hidden;
}
.marina-header-bg > .header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,40,80,0.72), rgba(0,80,120,0.55));
    border-radius: 8px;
}

/* ── Full-page backgrounds ── */

/* Login / non-marina full-page background */
.general-page-bg {
    background-color: #1a0035;
    background-image: url('assets/general-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Marina full-page background */
.marina-page-bg {
    background-color: #002850;
    background-image: url('assets/marina-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Vehicle icon styling in tables and lists */
.vehicle-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.vehicle-icon-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.vehicle-icon-lg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Setup tile cards (CustomerSetup page) */
.setup-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.125);
}

/* Marina Map — legend dots */
.marina-map-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.25);
}

.setup-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.setup-tile .bi {
    transition: transform 0.2s ease;
}

.setup-tile:hover .bi {
    transform: scale(1.15);
}

/* Boater Portal — Booking Wizard Stepper */
.booking-stepper {
    display: flex;
    align-items: center;
}

.booking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.booking-step.active {
    opacity: 1;
}

.booking-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 4px;
}

.booking-step:not(.active) .step-number {
    background: #adb5bd;
}

.booking-step-line {
    width: 60px;
    height: 3px;
    background: #adb5bd;
    margin: 0 4px;
    margin-bottom: 18px;
    transition: background 0.3s;
}

.booking-step-line.active {
    background: #0d6efd;
}

/* ── MMS Activity Feed ── */
.mms-activity-feed .list-group-item {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mms-activity-feed .list-group-item:hover {
    background: rgba(13, 110, 253, 0.04);
    border-left-color: #0d6efd;
}

/* Add-on badge in reservation table */
.badge.bg-info i.bi-puzzle {
    font-size: 0.75rem;
}

/* Loyalty card highlight border */
.card.border-primary {
    border-width: 2px !important;
}

/* Weather widget compact styling */
.weather-widget .card-body {
    font-size: 0.9rem;
}

/* Responsive — stack MMS dashboard cards on small screens */
@media (max-width: 768px) {
    .mms-header h3 {
        font-size: 1.2rem;
    }

    .setup-tile .bi {
        font-size: 2rem !important;
    }

    .setup-tile small {
        font-size: 0.75rem;
    }
}

/* Date balloon labels on route maps */
.marisat-date-label {
    background: #0d6efd;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.2;
}

/* Device name + last track balloon on live tracking (custom HTML overlay) */
.marisat-device-label {
    /* kept for legacy – not used by the new overlay */
    background: #1a6b2a;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: pre-line;
    line-height: 1.3;
    font-size: 10px;
    text-align: center;
}

/* Custom balloon overlay: outer wrapper positions both body + arrow */
.marisat-device-balloon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 8000;
}

.marisat-balloon-body {
    background: #1a6b2a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    padding: 3px 7px;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Downward-pointing triangle — sits directly below the body bubble, tip points at icon */
.marisat-balloon-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #1a6b2a;
}

/* ── Google Maps InfoWindow content classes ─────────────────────────────────
   Using CSS classes instead of inline styles so dark mode can override them. */
.marisat-iw {
    min-width: 220px;
    padding: 4px 6px;
    color: #212529;
}

.marisat-iw-title {
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.marisat-iw-table {
    font-size: 0.8rem;
    border-collapse: collapse;
    width: 100%;
}

.marisat-iw-label {
    color: #6c757d;
    padding: 1px 8px 1px 0;
    white-space: nowrap;
}

.marisat-iw-value {
    font-size: 0.8rem;
}

.marisat-iw-small {
    font-size: 0.75rem;
}

.marisat-iw-on  { color: #198754; font-weight: 600; }
.marisat-iw-off { color: #dc3545; font-weight: 600; }

.marisat-iw-address {
    margin-top: 4px;
    font-size: 0.8rem;
}

.marisat-iw-coords {
    margin-top: 3px;
    font-size: 0.75rem;
    color: #6c757d;
}

/* Floating hover balloon (Alert Logs list rows). Supplies the white rounded card chrome that
   Google's InfoWindow normally provides, so the reused .marisat-iw-* content looks identical to
   the Live Tracking map popup. Positioned/toggled by window.marisatBalloon in marisat-map.js. */
.marisat-hover-balloon {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
    padding: 10px 12px;
    max-width: 300px;
}

/* Hover cue for Alert Logs rows that open the GPS info balloon (only when details are enabled). */
.alert-log-row.is-interactive { cursor: help; }

/* ── Balloon mini-dashboard (speedometer + alerts) ──────────────────────────
   Modern graphical popup shown when clicking a marker, route arrow, or list row. */
.marisat-iw-dash {
    min-width: 250px;
    max-width: 280px;
}

.marisat-iw-dash-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.marisat-iw-gauge {
    flex: 0 0 100px;
    width: 100px;
}

.marisat-iw-speedo-svg {
    width: 100%;
    height: auto;
    display: block;
}

.marisat-iw-speedo-track { stroke: rgba(0,0,0,0.10); stroke-width: 12; stroke-linecap: round; }
.marisat-iw-speedo-tick { stroke: rgba(0,0,0,0.20); stroke-width: 1.5; }
.marisat-iw-speedo-tick.is-major { stroke: rgba(0,0,0,0.40); stroke-width: 2.5; }
.marisat-iw-speedo-value { font-size: 34px; font-weight: 800; }
.marisat-iw-speedo-unit { font-size: 12px; font-weight: 600; fill: #6c757d; letter-spacing: 0.08em; }

.marisat-iw-kpis {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.marisat-iw-kpi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #f1f3f5;
    border-radius: 6px;
    padding: 3px 8px;
}

.marisat-iw-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
}

.marisat-iw-kpi-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #212529;
}

.marisat-iw-kpi-badge {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    border-radius: 9px;
    padding: 0 6px;
    background: #adb5bd;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.marisat-iw-kpi-badge.has-alerts { background: #dc3545; }

.marisat-iw-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin: 6px 0 2px;
}

.marisat-iw-section-label i { margin-right: 3px; }

.marisat-iw-chart {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 4px;
}

.marisat-iw-chart-svg {
    width: 100%;
    height: 40px;
    display: block;
}

.marisat-iw-chart-bar { fill: #dc3545; }
.marisat-iw-chart-baseline { stroke: rgba(0,0,0,0.18); stroke-width: 1; }

.marisat-iw-alerts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.marisat-iw-alerts-list li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.78rem;
    padding: 2px 0;
    border-bottom: 1px solid #f1f3f5;
}

.marisat-iw-alerts-list li:last-child { border-bottom: none; }

.marisat-iw-alert-time {
    flex: 0 0 auto;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.marisat-iw-alert-msg {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marisat-iw-alerts-empty {
    font-size: 0.78rem;
    color: #6c757d;
    font-style: italic;
    padding: 2px 0;
}

.marisat-iw-dash .marisat-iw-table {
    margin-top: 6px;
    border-top: 1px solid #e9ecef;
    padding-top: 4px;
}

.marisat-iw-dash .marisat-iw-table td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.35;
}

/* ── Google InfoWindow chrome overrides for the device dashboard balloon ─────
   Google injects a scrollable inner container (.gm-style-iw-d) with a fixed
   max-height plus generous padding. For the compact hover balloon we remove the
   scrollbars, tighten the padding, and let the card size to its content so it
   looks like a clean, self-contained popup. Scoped with :has() so geofence and
   other simple InfoWindows keep Google's default chrome. */
.gm-style-iw.gm-style-iw-c:has(.marisat-iw-dash) {
    padding: 8px 12px !important;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 300px !important;
}

.gm-style-iw.gm-style-iw-c:has(.marisat-iw-dash) .gm-style-iw-d {
    overflow: auto !important;
    /* Never let the balloon grow taller than the map viewport, otherwise its top
       rows get clipped above the map when the browser/page is zoomed in. The
       compact layout keeps normal-zoom content well under this cap, so no
       scrollbar appears; the cap only engages at extreme zoom, where scrolling
       preserves every field instead of chopping data off-screen. */
    max-height: 82vh !important;
    padding: 0 !important;
    scrollbar-width: thin;
}

/* Remove the residual inner right padding Google reserves for the scrollbar. */
.gm-style-iw.gm-style-iw-c:has(.marisat-iw-dash) .gm-style-iw-d + div {
    display: none !important;
}

.marisat-iw-dash {
    min-width: 240px;
    max-width: 276px;
    padding: 0;
}

/* === Auto Engine Monitor === */

.auto-engine-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6c757d;
}

.auto-engine-running {
    background: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
    animation: auto-engine-pulse 2s infinite;
}

.auto-engine-stopped {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

@keyframes auto-engine-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(25, 135, 84, 0.1); }
}

/* ── Help Guide ── */
.help-quickstart {
    border-left: 4px solid #0d6efd;
}

.help-toc .list-group-item.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.help-toc-item {
    transition: background 0.15s ease;
}

.help-toc-item:hover {
    background: rgba(13, 110, 253, 0.06);
}

.help-section-header {
    transition: background 0.15s ease;
}

.help-section-header:hover {
    background: rgba(13, 110, 253, 0.04);
}

.help-section-body {
    animation: helpFadeIn 0.2s ease-in;
}

[data-bs-theme=dark] .help-quickstart,
[data-bs-theme=dark] .help-toc,
[data-bs-theme=dark] .help-section {
    background-color: #212529;
    border-color: rgba(255,255,255,0.08);
    color: #e9ecef;
}

[data-bs-theme=dark] .help-quickstart .text-muted,
[data-bs-theme=dark] .help-toc .text-muted,
[data-bs-theme=dark] .help-section .text-muted,
[data-bs-theme=dark] .help-section + .text-muted,
[data-bs-theme=dark] .help-quickstart + .row .text-muted {
    color: #adb5bd !important;
}

[data-bs-theme=dark] .help-toc .card-header.bg-dark,
[data-bs-theme=dark] .help-section-header {
    background-color: #2b3035 !important;
    border-color: rgba(255,255,255,0.08);
    color: #f8f9fa;
}

[data-bs-theme=dark] .help-toc .list-group-item {
    background-color: #212529;
    border-color: rgba(255,255,255,0.08);
    color: #e9ecef;
}

[data-bs-theme=dark] .help-toc-item:hover {
    background: rgba(13, 110, 253, 0.16);
    color: #fff;
}

[data-bs-theme=dark] .help-section-header:hover {
    background: rgba(13, 110, 253, 0.12);
}

[data-bs-theme=dark] .help-section-body {
    background-color: #212529;
    color: #e9ecef;
}

[data-bs-theme=dark] .help-section-body .card.bg-light,
[data-bs-theme=dark] .help-section-body .card.table-light,
[data-bs-theme=dark] .help-section-body .bg-light {
    background-color: #2b3035 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e9ecef;
}

[data-bs-theme=dark] .help-section-body .alert {
    color: #e9ecef;
}

[data-bs-theme=dark] .help-section-body .alert-info {
    background-color: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.32);
    color: #9eeaf9;
}

[data-bs-theme=dark] .help-section-body .alert-success {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.32);
    color: #a3cfbb;
}

[data-bs-theme=dark] .help-section-body .table {
    --bs-table-color: #e9ecef;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.02);
    --bs-table-hover-bg: rgba(255,255,255,0.04);
    --bs-table-border-color: rgba(255,255,255,0.12);
}

[data-bs-theme=dark] .help-section-body .table-light,
[data-bs-theme=dark] .help-section-body .table-light > th,
[data-bs-theme=dark] .help-section-body .table-light > td,
[data-bs-theme=dark] .help-section-body .table > :not(caption) > * > .table-light {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
    border-color: rgba(255,255,255,0.12) !important;
}

@keyframes helpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Help Tooltip Popover ── */
.help-tooltip-wrapper {
    vertical-align: middle;
}

.help-tooltip-icon {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.help-tooltip-icon:hover {
    opacity: 1;
}

.help-tooltip-popover {
    position: absolute;
    z-index: 1050;
    width: 280px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    animation: helpTooltipIn 0.15s ease-out;
}

.help-tooltip-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.help-tooltip-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.help-tooltip-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.help-tooltip-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.help-tooltip-content {
    color: #333;
    line-height: 1.5;
}

@keyframes helpTooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark mode: the help tooltip popover pins a fixed white background and dark
   text, which glares and hurts contrast on dark pages. Flip it to the dark
   surface palette used by the InfoWindow/hover-balloon chrome. */
[data-bs-theme=dark] .help-tooltip-popover {
    background: #2b2f33;
    border-color: #495057;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

[data-bs-theme=dark] .help-tooltip-content {
    color: #e9ecef;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Professional Glass / Dark-accent theme
   ═══════════════════════════════════════════════════════════════ */

/* Stat cards */
.db-stat-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.db-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
    pointer-events: none;
}
.db-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    border-color: rgba(255,255,255,0.28);
}

/* Accent left stripe */
.db-stat-card .db-accent {
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.db-stat-card .db-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.db-stat-card .db-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 2px;
}

.db-stat-card .db-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: dbCountIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes dbCountIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.db-stat-card .db-sub {
    font-size: 0.7rem;
    opacity: 0.5;
    margin-top: 2px;
}

/* Accent colour variants */
.db-accent-teal   { background: #2dd4bf; }
.db-accent-indigo { background: #818cf8; }
.db-accent-amber  { background: #fbbf24; }
.db-accent-rose   { background: #f87171; }
.db-accent-sky    { background: #38bdf8; }
.db-accent-violet { background: #a78bfa; }
.db-icon-teal     { background: rgba(45,212,191,0.14); color: #2dd4bf; }
.db-icon-indigo   { background: rgba(129,140,248,0.14); color: #818cf8; }
.db-icon-amber    { background: rgba(251,191,36,0.14);  color: #fbbf24; }
.db-icon-rose     { background: rgba(248,113,113,0.14); color: #f87171; }
.db-icon-sky      { background: rgba(56,189,248,0.14);  color: #38bdf8; }
.db-icon-violet   { background: rgba(167,139,250,0.14); color: #a78bfa; }
.db-text-teal     { color: #2dd4bf; }
.db-text-indigo   { color: #818cf8; }
.db-text-amber    { color: #fbbf24; }
.db-text-rose     { color: #f87171; }
.db-text-sky      { color: #38bdf8; }
.db-text-violet   { color: #a78bfa; }

/* Chart panels */
.db-chart-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}
.db-chart-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.db-chart-card .db-chart-header {
    padding: 0.85rem 1.2rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}
.db-chart-card .db-chart-body {
    padding: 1rem 1.2rem 1.2rem;
}

/* Quick-action transparent animated buttons */
.db-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    color: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                transform 0.15s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.db-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.db-action-btn:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.36);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    color: inherit;
    text-decoration: none;
}
.db-action-btn:hover::after { opacity: 1; }
.db-action-btn:active { transform: translateY(0); }

/* Shimmer loader skeleton for stat cards */
.db-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: dbShimmer 1.4s infinite linear;
    border-radius: 14px;
    height: 100px;
}
@keyframes dbShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Dashboard page wrapper — dark background so glass reads clearly */
.db-page {
    background: linear-gradient(160deg, #0f1729 0%, #111827 60%, #0c1221 100%);
    min-height: calc(100vh - 56px);
    padding: 1.5rem;
    border-radius: 12px;
    color: #e2e8f0;
}


/* ── Setup Wizard Stepper ── */
.wizard-stepper {
    user-select: none;
}

.wizard-progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #198754);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.wizard-steps-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.wizard-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    transition: opacity 0.2s;
}

.wizard-step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #adb5bd;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s, box-shadow 0.3s;
}

.wizard-step-item.active .wizard-step-circle {
    background: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

.wizard-step-item.completed .wizard-step-circle {
    background: #198754;
}

.wizard-step-label {
    font-size: 0.72rem;
    margin-top: 4px;
    text-align: center;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.wizard-step-item.active .wizard-step-label {
    color: #0d6efd;
    font-weight: 600;
}

.wizard-step-item.completed .wizard-step-label {
    color: #198754;
}

@media (max-width: 576px) {
    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC BOOKING PORTALS  (no-login customer-facing pages)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-page wrapper */
.pb-page {
    min-height: 100vh;
    background: #f4f6fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Hero banner ── */
.pb-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
    color: #fff;
}
.pb-hero-marina   { background: linear-gradient(135deg, #0d3b6e 0%, #1565c0 40%, #0288d1 100%); }
.pb-hero-camping  { background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 40%, #52b788 100%); }
.pb-hero-service  { background: linear-gradient(135deg, #37006e 0%, #6a1b9a 40%, #ab47bc 100%); }

.pb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pb-hero-icon {
    font-size: 4rem;
    opacity: 0.9;
    display: block;
    margin-bottom: 0.75rem;
    animation: pb-float 3s ease-in-out infinite;
}
@keyframes pb-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.pb-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.pb-hero-subtitle {
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Stepper ── */
.pb-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pb-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2.5px solid #dee2e6;
    background: #fff;
    color: #adb5bd;
    transition: all 0.3s;
}
.pb-step.active .pb-step-num {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13,110,253,0.15);
}
.pb-step.done .pb-step-num {
    border-color: #198754;
    background: #198754;
    color: #fff;
}
.pb-step-label {
    font-size: 0.72rem;
    color: #adb5bd;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pb-step.active .pb-step-label { color: #0d6efd; font-weight: 700; }
.pb-step.done  .pb-step-label  { color: #198754; }
.pb-step-line {
    width: 60px;
    height: 2px;
    background: #dee2e6;
    margin: 0 4px;
    margin-bottom: 1rem;
    transition: background 0.3s;
}
.pb-step-line.done { background: #198754; }

/* ── Content container ── */
.pb-body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; }

/* ── Section cards ── */
.pb-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.pb-card-header {
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.pb-card-header-marina  { background: linear-gradient(90deg, #1565c0, #0288d1); color: #fff; }
.pb-card-header-camping { background: linear-gradient(90deg, #2d6a4f, #52b788); color: #fff; }
.pb-card-header-service { background: linear-gradient(90deg, #6a1b9a, #ab47bc); color: #fff; }
.pb-card-body { padding: 1.5rem; }

/* ── Site/Slip selection cards ── */
.pb-option {
    border: 2.5px solid #e9ecef;
    border-radius: 14px;
    padding: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background: #fff;
}
.pb-option:hover  { border-color: #90caf9; background: #f0f7ff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,110,253,0.1); }
.pb-option.selected { border-color: #1565c0; background: #e8f0fe; box-shadow: 0 0 0 3px rgba(21,101,192,0.15); }

.pb-option-camping:hover    { border-color: #52b788; background: #f0fff4; box-shadow: 0 6px 20px rgba(52,183,88,0.1); }
.pb-option-camping.selected { border-color: #2d6a4f; background: #d8f3dc; box-shadow: 0 0 0 3px rgba(45,106,79,0.15); }

.pb-option-service:hover    { border-color: #ab47bc; background: #fdf0ff; box-shadow: 0 6px 20px rgba(171,71,188,0.1); }
.pb-option-service.selected { border-color: #6a1b9a; background: #f3e5f5; box-shadow: 0 0 0 3px rgba(106,27,154,0.15); }

.pb-option-check {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.4rem;
    color: #1565c0;
    display: none;
}
.pb-option.selected .pb-option-check { display: block; }

/* ── Amenity badges ── */
.pb-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Price tag ── */
.pb-price { font-size: 1.4rem; font-weight: 800; }
.pb-price-sub { font-size: 0.75rem; color: #6c757d; }

/* ── Summary sidebar ── */
.pb-summary {
    background: linear-gradient(160deg, #f8faff 0%, #eef2ff 100%);
    border: 1.5px solid #d0d9ff;
    border-radius: 14px;
    padding: 1.25rem;
    position: sticky;
    top: 90px;
}
.pb-summary-camping { background: linear-gradient(160deg, #f0fff4 0%, #d8f3dc 100%); border-color: #b7e4c7; }
.pb-summary-service { background: linear-gradient(160deg, #fdf0ff 0%, #f3e5f5 100%); border-color: #d7b8e8; }
.pb-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 4px 0; }
.pb-summary-total { font-size: 1.2rem; font-weight: 800; border-top: 2px solid #ced4da; margin-top: 8px; padding-top: 8px; }

/* ── CTA button ── */
.pb-btn-primary {
    background: linear-gradient(135deg, #1565c0, #0288d1);
    border: none;
    color: #fff;
    padding: 0.8rem 2.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(13,110,253,0.35);
    cursor: pointer;
}
.pb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(13,110,253,0.45); }
.pb-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.pb-btn-camping {
    background: linear-gradient(135deg, #2d6a4f, #52b788);
    box-shadow: 0 4px 15px rgba(45,106,79,0.35);
}
.pb-btn-camping:hover { box-shadow: 0 8px 25px rgba(45,106,79,0.45); }

.pb-btn-service {
    background: linear-gradient(135deg, #6a1b9a, #ab47bc);
    box-shadow: 0 4px 15px rgba(106,27,154,0.35);
}
.pb-btn-service:hover { box-shadow: 0 8px 25px rgba(106,27,154,0.45); }

/* ═══════════════════════════════════════════════════════════════════════════
   MMS SLIP-RESERVATION PORTAL — configurable styles & layouts
   The marina booking portal opts in with `.pb-portal` plus a `.pb-layout-*`
   class. All theming is driven by CSS custom properties so an account's saved
   palette (primary/secondary/accent) can be injected inline at runtime. Scoped
   under `.pb-portal` so the shared camping/service portals are never affected.
   ═══════════════════════════════════════════════════════════════════════════ */

.pb-portal {
    /* palette (overridable inline per-account) */
    --pb-primary:   #1565c0;
    --pb-secondary: #0288d1;
    --pb-accent:    #0d3b6e;
    /* hero gradient derives from the palette */
    --pb-hero-from: var(--pb-accent);
    --pb-hero-mid:  var(--pb-primary);
    --pb-hero-to:   var(--pb-secondary);
    /* surfaces */
    --pb-canvas:      #f4f6fb;
    --pb-card-bg:     #ffffff;
    --pb-card-radius: 16px;
    --pb-text:        #1f2937;
    --pb-muted:       #6c757d;
    --pb-border:      #e9ecef;
}

/* ── Variable-driven repaint of the marina visuals ── */
.pb-portal.pb-page { background: var(--pb-canvas); color: var(--pb-text); }

.pb-portal .pb-hero-marina {
    background: linear-gradient(135deg, var(--pb-hero-from) 0%, var(--pb-hero-mid) 40%, var(--pb-hero-to) 100%);
}
.pb-portal .pb-card {
    background: var(--pb-card-bg);
    border-radius: var(--pb-card-radius);
}
.pb-portal .pb-card-header-marina {
    background: linear-gradient(90deg, var(--pb-primary), var(--pb-secondary));
}
.pb-portal .pb-btn-primary {
    background: linear-gradient(135deg, var(--pb-primary), var(--pb-secondary));
    box-shadow: 0 4px 15px color-mix(in srgb, var(--pb-primary) 35%, transparent);
}
.pb-portal .pb-btn-primary:hover {
    box-shadow: 0 8px 25px color-mix(in srgb, var(--pb-primary) 45%, transparent);
}
.pb-portal .pb-step.active .pb-step-num {
    border-color: var(--pb-primary);
    background: var(--pb-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pb-primary) 15%, transparent);
}
.pb-portal .pb-step.active .pb-step-label { color: var(--pb-primary); }
.pb-portal .pb-option:hover {
    border-color: color-mix(in srgb, var(--pb-primary) 45%, white);
    background: color-mix(in srgb, var(--pb-primary) 6%, white);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--pb-primary) 12%, transparent);
}
.pb-portal .pb-option.selected {
    border-color: var(--pb-primary);
    background: color-mix(in srgb, var(--pb-primary) 10%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-primary) 18%, transparent);
}
.pb-portal .pb-option-check { color: var(--pb-primary); }
.pb-portal .pb-price { color: var(--pb-primary); }
.pb-portal .pb-summary {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--pb-primary) 4%, white) 0%,
        color-mix(in srgb, var(--pb-primary) 12%, white) 100%);
    border-color: color-mix(in srgb, var(--pb-primary) 25%, white);
}

/* ── Layout: STEPPER (Classic Marina — the default) ── */
/* Uses the base structure as-is; nothing extra needed. */

/* ── Layout: SPLIT (Modern Coastal) — airy, wider canvas, softer cards ── */
.pb-portal.pb-layout-split .pb-body { max-width: 1120px; }
.pb-portal.pb-layout-split { --pb-card-radius: 22px; --pb-canvas: #ecfeff; }
.pb-portal.pb-layout-split .pb-hero { padding: 2.75rem 1.5rem 2.5rem; }
.pb-portal.pb-layout-split .pb-card { box-shadow: 0 10px 40px rgba(8,145,178,0.10); }
.pb-portal.pb-layout-split .pb-card-body { padding: 2rem; }

/* ── Layout: HERO-BOLD (Bold Nautical) — oversized hero, accent CTAs ── */
.pb-portal.pb-layout-hero-bold .pb-hero { padding: 5rem 1.5rem 4.5rem; }
.pb-portal.pb-layout-hero-bold .pb-hero-title { font-size: clamp(2.25rem, 6vw, 4rem); }
.pb-portal.pb-layout-hero-bold .pb-hero-subtitle { font-size: 1.2rem; opacity: 0.95; }
.pb-portal.pb-layout-hero-bold .pb-btn-primary {
    background: linear-gradient(135deg, var(--pb-accent), color-mix(in srgb, var(--pb-accent) 65%, white));
    box-shadow: 0 4px 18px color-mix(in srgb, var(--pb-accent) 45%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pb-portal.pb-layout-hero-bold .pb-card-header-marina { letter-spacing: 0.02em; text-transform: uppercase; }

/* ── Layout: MINIMAL (Minimal Light) — flat, quiet, hairline borders ── */
.pb-portal.pb-layout-minimal { --pb-card-radius: 10px; --pb-canvas: #ffffff; }
.pb-portal.pb-layout-minimal .pb-hero { padding: 2rem 1.5rem; }
.pb-portal.pb-layout-minimal .pb-hero-icon { animation: none; font-size: 2.5rem; }
.pb-portal.pb-layout-minimal .pb-hero-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-shadow: none; }
.pb-portal.pb-layout-minimal .pb-card {
    box-shadow: none;
    border: 1px solid var(--pb-border);
}
.pb-portal.pb-layout-minimal .pb-stepper { box-shadow: none; }
.pb-portal.pb-layout-minimal .pb-btn-primary { border-radius: 8px; box-shadow: none; }
.pb-portal.pb-layout-minimal .pb-btn-primary:hover { transform: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--pb-primary) 30%, transparent); }

/* ── Layout: DARK (Midnight Dark) — luminous accents on a dark canvas ── */
.pb-portal.pb-layout-dark {
    --pb-canvas:  #0b1220;
    --pb-card-bg: #131c2e;
    --pb-text:    #e2e8f0;
    --pb-muted:   #94a3b8;
    --pb-border:  rgba(255,255,255,0.12);
}
.pb-portal.pb-layout-dark .pb-card { border: 1px solid var(--pb-border); color: var(--pb-text); }
.pb-portal.pb-layout-dark .pb-stepper {
    background: #0e1728;
    border-bottom: 1px solid var(--pb-border);
}
.pb-portal.pb-layout-dark .pb-step-num { background: #1b2740; border-color: rgba(255,255,255,0.2); color: var(--pb-muted); }
.pb-portal.pb-layout-dark .pb-step-label { color: var(--pb-muted); }
.pb-portal.pb-layout-dark .pb-option {
    background: #1b2740;
    border-color: rgba(255,255,255,0.14);
    color: var(--pb-text);
}
.pb-portal.pb-layout-dark .pb-option:hover {
    background: color-mix(in srgb, var(--pb-primary) 22%, #1b2740);
    border-color: var(--pb-primary);
}
.pb-portal.pb-layout-dark .pb-option.selected {
    background: color-mix(in srgb, var(--pb-primary) 30%, #1b2740);
    border-color: var(--pb-primary);
}
.pb-portal.pb-layout-dark .pb-summary {
    background: linear-gradient(160deg, #16203400 0%, color-mix(in srgb, var(--pb-primary) 18%, #131c2e) 100%);
    border-color: color-mix(in srgb, var(--pb-primary) 35%, transparent);
    color: var(--pb-text);
}
.pb-portal.pb-layout-dark .pb-price-sub,
.pb-portal.pb-layout-dark .text-muted,
.pb-portal.pb-layout-dark .form-text { color: var(--pb-muted) !important; }
.pb-portal.pb-layout-dark .form-label { color: var(--pb-text); }
.pb-portal.pb-layout-dark .form-control,
.pb-portal.pb-layout-dark .form-select {
    background: #1b2740;
    border-color: rgba(255,255,255,0.16);
    color: var(--pb-text);
}
.pb-portal.pb-layout-dark .form-control::placeholder { color: rgba(255,255,255,0.4); }
.pb-portal.pb-layout-dark .form-control:focus,
.pb-portal.pb-layout-dark .form-select:focus {
    background: #223052;
    border-color: var(--pb-primary);
    color: #fff;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pb-primary) 25%, transparent);
}

/* ── Admin: portal style selection tiles + live preview (AccountEdit branding) ── */
.portal-style-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    transition: all 0.18s ease;
}
.portal-style-tile:hover {
    border-color: #90caf9;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13,110,253,0.12);
}
.portal-style-tile.selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.18);
}
.portal-style-swatch {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.portal-style-name { font-weight: 700; font-size: 0.9rem; color: #1f2937; }
.portal-style-desc { font-size: 0.72rem; color: #6c757d; line-height: 1.25; }
.portal-style-check {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #0d6efd;
    font-size: 1.1rem;
}

.portal-style-preview {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.portal-style-preview-hero {
    padding: 1.5rem 1.25rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--pb-accent) 0%, var(--pb-primary) 45%, var(--pb-secondary) 100%);
}
.portal-style-preview-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: #fff;
}
.portal-style-preview-chip {
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--pb-primary);
}
.portal-style-preview-btn {
    margin-left: auto;
    border: none;
    color: #fff;
    padding: 0.5rem 1.4rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--pb-primary), var(--pb-secondary));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pb-primary) 35%, transparent);
}



/* ── Confirmation screen ── */
.pb-confirm {
    text-align: center;
    padding: 3rem 1.5rem;
}
.pb-confirm-icon {
    font-size: 5rem;
    animation: pb-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pb-pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.pb-confirm-num {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

/* ── Footer ── */
.pb-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: #adb5bd;
    border-top: 1px solid #e9ecef;
    background: #fff;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .pb-stepper { padding: 1rem 0.5rem; }
    .pb-step-line { width: 30px; }
    .pb-step-label { display: none; }
    .pb-body { padding: 1rem 0.75rem 3rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fleet Hub Overview — Visual System Map
   ─────────────────────────────────────────────────────────────────────────── */

/* Zone containers */
.fho-zone {
    border-radius: 14px;
    padding: 1rem;
    position: relative;
}
.fho-zone-gps     { background: linear-gradient(135deg, #0d1b2a 0%, #1a3550 100%); border: 2px solid #0d6efd55; }
.fho-zone-hub     { background: linear-gradient(135deg, #1a0a3d 0%, #2d1260 100%); border: 2px solid #6f42c155; }
.fho-zone-mms     { background: linear-gradient(135deg, #003d5c 0%, #006494 100%); border: 2px solid #0dcaf066; }
.fho-zone-service { background: linear-gradient(135deg, #3b1f00 0%, #7a4000 100%); border: 2px solid #fd7e1466; }
.fho-zone-inv     { background: linear-gradient(135deg, #003a1a 0%, #006630 100%); border: 2px solid #19875466; }
.fho-zone-camp    { background: linear-gradient(135deg, #1a2d00 0%, #3d5c00 100%); border: 2px solid #79850066; }
.fho-zone-portal  { background: linear-gradient(135deg, #1a1a2e 0%, #2e2e50 100%); border: 2px solid #adb5bd44; }

/* Zone header labels */
.fho-zone-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Individual feature tiles */
.fho-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.4rem 0.55rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e9ecef;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    min-height: 74px;
    position: relative;
}
.fho-tile:hover:not(.fho-tile-disabled) {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    color: #fff;
}
.fho-tile i.bi { font-size: 1.45rem; margin-bottom: 3px; }
.fho-tile-label { font-size: 0.68rem; font-weight: 600; line-height: 1.2; }
.fho-tile-sub   { font-size: 0.58rem; opacity: 0.6; margin-top: 2px; }

/* Disabled / locked tile */
.fho-tile-disabled {
    opacity: 0.32;
    cursor: default;
    filter: grayscale(0.6);
}
.fho-tile-disabled:hover { transform: none; }
.fho-lock {
    position: absolute;
    top: 5px; right: 6px;
    font-size: 0.6rem;
    opacity: 0.5;
}

/* Primary "go" tiles — slightly larger icon, accent border */
.fho-tile-primary {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.25);
}
.fho-tile-primary i.bi { font-size: 1.65rem; }

/* Connector arrow between GPS zone and each module zone */
.fho-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 1.1rem;
    padding: 0.15rem 0;
    user-select: none;
}

/* Legend row */
.fho-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

/* Section divider inside a zone */
.fho-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0.6rem 0;
}

/* Badge on tile showing it's the entry point */
.fho-entry-badge {
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Responsive columns inside zones */
.fho-grid {
    display: grid;
    gap: 0.45rem;
}
.fho-grid-2 { grid-template-columns: 1fr 1fr; }
.fho-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fho-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fho-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 992px) {
    .fho-grid-5 { grid-template-columns: repeat(3, 1fr); }
    .fho-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .fho-grid-3, .fho-grid-4, .fho-grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Pulse animation on the live-tracking tile */
@keyframes fho-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(13,110,253,0); }
}
.fho-tile-live { animation: fho-pulse 2.4s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────────────────────
   System Overview Panel  (sov-*)
   Interactive animated flow-chart used inside System Configuration
   ─────────────────────────────────────────────────────────────────────────── */

/* ── canvas ── */
.sov-canvas {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
    position: relative;
}

/* ── framed host (used on the full-screen overview page) ── */
.sov-host {
    background: linear-gradient(160deg, #060d1a 0%, #0a1628 100%);
    border: 1px solid rgba(13,110,253,0.2);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    min-height: 360px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* ── architecture legend / status strip ── */
.sov-legend {
    background: linear-gradient(135deg, #0a1628 0%, #0d2138 100%);
    border: 1px solid rgba(13,110,253,0.22);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.sov-legend-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
}
.sov-legend-title > i { color: #7dcfff; }
.sov-legend-count {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    background: rgba(13,110,253,0.14);
    border: 1px solid rgba(13,110,253,0.3);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}
.sov-legend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.sov-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: #e9ecef;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 3px 9px 3px 8px;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.sov-chip:hover { background: rgba(255,255,255,0.12); }
.sov-chip.sov-chip-off { opacity: 0.4; }
.sov-chip i { font-size: 0.78rem; }
.sov-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sov-chip-dot.on  { background: #00e676; box-shadow: 0 0 6px rgba(0,230,118,0.6); }
.sov-chip-dot.off { background: #6c757d; }

/* ── load-error state ── */
.sov-error {
    text-align: center;
    padding: 2.5rem 1rem;
    color: rgba(255,255,255,0.7);
    background: linear-gradient(135deg, #0a1628 0%, #0d2138 100%);
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 16px;
}
.sov-error > i { font-size: 2rem; color: #ff7d8a; }

/* ── inline (non-blanking) load-error banner ── */
.sov-error-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: #ffd7dc;
    background: rgba(220,53,69,0.12);
    border: 1px solid rgba(220,53,69,0.35);
    border-radius: 12px;
}
.sov-error-banner > i { color: #ff7d8a; font-size: 1rem; }

/* ── row of module pods ── */
.sov-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ── GPS core (centre, always visible) ── */
.sov-core {
    display: flex;
    justify-content: center;
}
.sov-core-pod {
    background: linear-gradient(135deg, #0a1628 0%, #0d2b4e 100%);
    border: 2px solid #0d6efd;
    border-radius: 20px;
    padding: 1.4rem 2.5rem;
    min-width: 240px;
    text-align: center;
    position: relative;
    cursor: default;
    box-shadow: 0 0 32px rgba(13,110,253,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: sov-glow-blue 3s ease-in-out infinite;
}
@keyframes sov-glow-blue {
    0%,100% { box-shadow: 0 0 20px rgba(13,110,253,0.25), inset 0 1px 0 rgba(255,255,255,0.05); }
    50%      { box-shadow: 0 0 40px rgba(13,110,253,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
}
.sov-core-icon {
    font-size: 2.4rem;
    color: #7dcfff;
    display: block;
    margin-bottom: 0.4rem;
}
.sov-core-label {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
}
.sov-core-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.2rem;
}

/* ── connector arrows ── */
.sov-connectors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 0.5rem;
}
.sov-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    opacity: 0.55;
}
.sov-arrow-line {
    width: 2px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
    border-radius: 2px;
}
.sov-arrow-head {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid rgba(255,255,255,0.45);
}

/* ── module pod ── */
.sov-pod {
    border-radius: 16px;
    padding: 1rem 1rem 0.75rem;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 280px;
    cursor: pointer;
    position: relative;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow  0.22s ease,
                border-color 0.22s ease;
    overflow: hidden;
}
.sov-pod::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(255,255,255,0);
    transition: background 0.22s ease;
}
.sov-pod:hover::before { background: rgba(255,255,255,0.04); }
.sov-pod:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55) !important;
}
.sov-pod.sov-pod-disabled {
    opacity: 0.35;
    filter: grayscale(0.55);
    cursor: default;
}
.sov-pod.sov-pod-disabled:hover { transform: none; }

/* per-module colour themes */
.sov-pod-fleet  { background: linear-gradient(135deg,#1a0a3d,#2d1260); border: 2px solid rgba(111,66,193,0.5); box-shadow: 0 4px 16px rgba(111,66,193,0.15); }
.sov-pod-marina { background: linear-gradient(135deg,#003d5c,#006494); border: 2px solid rgba(13,202,240,0.4); box-shadow: 0 4px 16px rgba(13,202,240,0.12); }
.sov-pod-service{ background: linear-gradient(135deg,#3b1f00,#7a4000); border: 2px solid rgba(253,126,20,0.4);  box-shadow: 0 4px 16px rgba(253,126,20,0.12); }
.sov-pod-inv    { background: linear-gradient(135deg,#003a1a,#006630); border: 2px solid rgba(25,135,84,0.4);   box-shadow: 0 4px 16px rgba(25,135,84,0.12); }
.sov-pod-camp   { background: linear-gradient(135deg,#1a2d00,#3d5c00); border: 2px solid rgba(121,133,0,0.4);   box-shadow: 0 4px 16px rgba(121,133,0,0.12); }
.sov-pod-portal { background: linear-gradient(135deg,#1a1a2e,#2e2e50); border: 2px solid rgba(173,181,189,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }

.sov-pod-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}
.sov-pod-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.sov-pod-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    flex: 1;
}
.sov-pod-badge {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.sov-pod-badge-on  { background: rgba(25,135,84,0.35);  color: #7dffb3; border: 1px solid rgba(25,135,84,0.5); }
.sov-pod-badge-off { background: rgba(108,117,125,0.25); color: #adb5bd; border: 1px solid rgba(108,117,125,0.35); }

/* link tiles inside an expanded pod */
.sov-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-top: 0.5rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
    opacity: 0;
}
.sov-links.sov-links-open {
    max-height: 600px;
    opacity: 1;
}
.sov-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e9ecef;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 500;
    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.sov-link:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.3);
    transform: translateX(2px);
    color: #fff;
}
.sov-link i { font-size: 0.85rem; flex-shrink: 0; }
.sov-link-locked {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* chevron toggle on pod header */
.sov-chevron {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.28s ease;
    margin-left: auto;
}
.sov-chevron-open { transform: rotate(180deg); }

/* flow connector lines between GPS core and module row — CSS only */
.sov-flow-line {
    flex: 1 0 2px;
    height: 2px;
    background: linear-gradient(to right, rgba(13,110,253,0.6), rgba(255,255,255,0.05));
    border-radius: 2px;
    min-width: 30px;
    max-width: 80px;
    align-self: center;
}

/* ── entry animation for pods ── */
@keyframes sov-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.sov-pod { animation: sov-pop-in 0.4s ease both; }
.sov-pod:nth-child(1) { animation-delay: 0.05s; }
.sov-pod:nth-child(2) { animation-delay: 0.12s; }
.sov-pod:nth-child(3) { animation-delay: 0.19s; }
.sov-pod:nth-child(4) { animation-delay: 0.26s; }
.sov-pod:nth-child(5) { animation-delay: 0.33s; }

/* ── hint text on collapsed pod ── */
.sov-pod-hint {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    margin-top: 0.35rem;
    font-style: italic;
    transition: opacity 0.2s;
}
.sov-pod:hover .sov-pod-hint { opacity: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   Fleet Hub Command Center  (fhcc-*)
   State-of-the-art customer-configured control panel
   ─────────────────────────────────────────────────────────────────────────── */

/* ── page chrome ── */
.fhcc-page {
    background: linear-gradient(160deg, #060d1a 0%, #0a1628 40%, #060d1a 100%);
    min-height: 100vh;
    padding: 0 0 3rem;
    color: #e0e9f8;
    overflow-x: hidden;
    max-width: 100%;
}

/* ── Customer/Training Guide dark page wrapper ── */
.cg-page {
    background: linear-gradient(160deg, #060d1a 0%, #0a1628 40%, #060d1a 100%);
    min-height: 100vh;
    padding: 0 2rem 3rem;
    color: #e0e9f8;
}
@media (max-width: 576px) {
    .cg-page { padding: 0 1rem 3rem; }
}
.cg-page .border-top { border-color: rgba(255,255,255,.1) !important; }
.cg-page .btn-outline-secondary {
    color: #94a3b8; border-color: rgba(255,255,255,.2);
}
.cg-page .btn-outline-secondary:hover {
    background: rgba(255,255,255,.08); color: #e2e8f0; border-color: rgba(255,255,255,.35);
}
.cg-chapter-subtitle { font-size: .875rem; color: #94a3b8; }

/* ── hero header ── */
.fhcc-hero {
    background: linear-gradient(135deg, #0a1628 0%, #0d2b4e 50%, #0a1628 100%);
    border-bottom: 1px solid rgba(13,110,253,0.25);
    padding: 1.5rem 2rem 1.25rem calc(var(--toggle-size, 40px) + 0.75rem);
    position: relative;
    overflow: hidden;
}
.fhcc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 120% at 50% -20%, rgba(13,110,253,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.fhcc-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.fhcc-hero-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.fhcc-hero-sub {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.15rem;
}
.fhcc-hero-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 0 0 rgba(0,230,118,0.5);
    animation: fhcc-live 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fhcc-live {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,230,118,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(0,230,118,0); }
}

/* ── main grid ── */
.fhcc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1.5rem 1.75rem 0;
}

/* ── module section heading ── */
.fhcc-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fhcc-section-icon { font-size: 1.1rem; }
.fhcc-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* ── per-section "View Log" button ── */
.scc-viewlog-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #c9d1d9;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.scc-viewlog-btn:hover {
    background: rgba(125,207,255,0.18);
    border-color: rgba(125,207,255,0.4);
    color: #bfe6ff;
}

/* ── action card ── */
.fhcc-card {
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    text-decoration: none;
    color: #e0e9f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                border-color 0.2s ease,
                box-shadow   0.2s ease;
    position: relative;
    overflow: hidden;
}
.fhcc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--fhcc-accent, rgba(13,110,253,0.12));
    opacity: 0;
    transition: opacity 0.2s ease;
}
.fhcc-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--fhcc-border, rgba(13,110,253,0.3));
    color: #fff;
}
.fhcc-card:hover::after { opacity: 1; }

.fhcc-card-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--fhcc-icon-bg, rgba(13,110,253,0.18));
    border: 1px solid var(--fhcc-border, rgba(13,110,253,0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.2s ease;
}
.fhcc-card:hover .fhcc-card-icon-wrap {
    box-shadow: 0 0 22px var(--fhcc-glow, rgba(13,110,253,0.5));
}
.fhcc-card-label {
    font-size: 0.78rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.fhcc-card-sub {
    font-size: 0.62rem;
    opacity: 0.45;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIS ROW — Speedometer Gauge + Alert Trend Chart
   ══════════════════════════════════════════════════════════════════════════ */
.fhcc-vis-row {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem 0;
    flex-wrap: wrap;
    align-items: stretch;
}

/* ── Shared card shell ── */
.fhcc-gauge-card,
.fhcc-trend-card {
    background: #0f1726;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* ── Gauge card ── */
.fhcc-gauge-card {
    flex: 0 0 260px;
    min-width: 220px;
    max-width: 320px;
    align-items: center;
    padding: 1.1rem 1.25rem 0.85rem;
    gap: 0.4rem;
    position: relative;
}
.fhcc-gauge-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9fb8e8;
    text-transform: uppercase;
}
.fhcc-gauge-wrap {
    width: 100%;
    max-width: 200px;
}
.fhcc-gauge-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* SVG inner elements */
.fhcc-gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 7;
    stroke-linecap: round;
}
.fhcc-gauge-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px currentColor);
    transition: all 0.5s ease;
}
.fhcc-gauge-needle {
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px currentColor);
    transition: all 0.5s ease;
}
.fhcc-gauge-dot {
    filter: drop-shadow(0 0 6px currentColor);
}
.fhcc-gauge-val {
    font-size: 14px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: auto;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 0 6px currentColor);
}
.fhcc-gauge-sublabel {
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-anchor: middle;
    dominant-baseline: auto;
    fill: #7d8da8;
}
.fhcc-gauge-tick {
    font-size: 5.5px;
    fill: #6b7d96;
    dominant-baseline: hanging;
    text-anchor: middle;
}
.fhcc-gauge-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.25rem;
}
.fhcc-gauge-stat {
    font-size: 0.76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.fhcc-gauge-stat-reg { color: #7dcfff; }
.fhcc-gauge-stat-ok  { color: #4ade80; }
.fhcc-gauge-stat-off { color: #ff5252; }

/* ── Trend chart card ── */
.fhcc-trend-card {
    flex: 1 1 400px;
    min-width: 280px;
    padding: 0;
}
.fhcc-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fhcc-trend-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fhcc-trend-tabs {
    display: flex;
    gap: 0.3rem;
}
.fhcc-trend-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.45rem;
    color: #7d8da8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.fhcc-trend-tab:hover {
    background: rgba(255, 159, 219, 0.1);
    color: #ff9fdb;
    border-color: rgba(255, 159, 219, 0.3);
}
.fhcc-trend-tab.active {
    background: rgba(255, 159, 219, 0.15);
    color: #ff9fdb;
    border-color: rgba(255, 159, 219, 0.5);
}
.fhcc-trend-chart-wrap {
    flex: 1 1 auto;
    padding: 0.75rem 1rem 0.5rem;
    height: 130px;
    position: relative;
}
.fhcc-trend-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.fhcc-trend-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.25rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fhcc-trend-total {
    font-size: 0.8rem;
    color: #7d8da8;
}
.fhcc-trend-link {
    font-size: 0.78rem;
    color: #7dcfff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.fhcc-trend-link:hover { color: #a8d8ff; }

@media (max-width: 640px) {
    .fhcc-vis-row { padding: 0.75rem 0.75rem 0; gap: 0.75rem; }
    .fhcc-gauge-card { flex: 1 1 100%; max-width: 100%; }
    .fhcc-trend-card { flex: 1 1 100%; }
}

/* ── KPI strip ── */
.fhcc-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
}
.fhcc-kpi {
    flex: 1 1 140px;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: border-color 0.2s, background 0.2s;
}
.fhcc-kpi:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); }
.fhcc-kpi-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.fhcc-kpi-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.fhcc-kpi-lbl {
    font-size: 0.66rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── Command Control Console (in-place high-tech console with readout + controls) ── */
.fhcc-console {
    margin: 1.25rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(13,110,253,0.10), transparent 55%),
        radial-gradient(120% 140% at 100% 0%, rgba(0,230,200,0.08), transparent 55%),
        linear-gradient(180deg, #0a1120, #070b14);
    border: 1px solid rgba(90,180,255,0.28);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 18px 40px -20px rgba(0,120,255,0.5);
}

/* topbar */
.fhcc-con-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(180deg, rgba(90,180,255,0.12), rgba(90,180,255,0.02));
    border-bottom: 1px solid rgba(90,180,255,0.22);
}
.fhcc-con-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #d6ecff;
    font-weight: 800;
    letter-spacing: 0.14em;
}
.fhcc-con-brand i { color: #7dcfff; font-size: 1.1rem; }
.fhcc-con-brand-txt { font-size: 0.95rem; }
.fhcc-con-tag {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: #0a1120;
    background: #7dcfff;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 900;
}
.fhcc-con-status { display: flex; align-items: center; gap: 0.5rem; }
.fhcc-con-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #9fe6c4;
    background: rgba(0,230,150,0.08);
    border: 1px solid rgba(0,230,150,0.25);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}
.fhcc-con-clock { color: #a9d6ff; background: rgba(90,180,255,0.08); border-color: rgba(90,180,255,0.25); font-variant-numeric: tabular-nums; }

/* status LEDs */
.fhcc-con-led {
    width: 9px; height: 9px; border-radius: 50%;
    background: #385; display: inline-block; flex: 0 0 auto;
}
.fhcc-con-led--on     { background: #22e59a; box-shadow: 0 0 8px 1px rgba(34,229,154,0.9); animation: fhccPulse 2s infinite; }
.fhcc-con-led--cyan   { background: #33d6f0; box-shadow: 0 0 8px 1px rgba(51,214,240,0.9); }
.fhcc-con-led--amber  { background: #ffb340; box-shadow: 0 0 8px 1px rgba(255,179,64,0.9); }
.fhcc-con-led--violet { background: #b98bff; box-shadow: 0 0 8px 1px rgba(185,139,255,0.9); }
@keyframes fhccPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Customer Command Console (customer-centered guided cockpit) ── */
.ccc { padding: 1rem 1.25rem 1.25rem; }
.ccc-stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.ccc-step { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); flex: 1 1 160px; }
.ccc-step-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 0.8rem; background: rgba(255,255,255,0.08); color: #9fb3c8; transition: all 0.25s ease; }
.ccc-step-meta { display: flex; flex-direction: column; line-height: 1.15; }
.ccc-step-title { font-size: 0.78rem; font-weight: 600; color: #e6eef7; }
.ccc-step-sub { font-size: 0.66rem; color: #7d93a8; }
.ccc-step-link { position: absolute; right: -0.5rem; top: 50%; width: 0.5rem; height: 2px; background: rgba(255,255,255,0.12); }
.ccc-step--done .ccc-step-dot { background: linear-gradient(135deg,#00e676,#00b894); color: #04210f; }
.ccc-step--active { border-color: rgba(13,110,253,0.55); box-shadow: 0 0 0 1px rgba(13,110,253,0.3), 0 0 18px rgba(13,110,253,0.18); }
.ccc-step--active .ccc-step-dot { background: linear-gradient(135deg,#4da3ff,#0d6efd); color: #fff; animation: fhccPulse 2s ease-in-out infinite; }

.ccc-body { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; }
@media (max-width: 900px) { .ccc-body { grid-template-columns: 1fr; } }
.ccc-pane { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.9rem; }
.ccc-pane-head { font-size: 0.72rem; letter-spacing: 0.08em; color: #8fa6bd; font-weight: 700; margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.4rem; }
.ccc-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #9fb3c8; }
.ccc-search-in { flex: 1; background: none; border: none; outline: none; color: #e6eef7; font-size: 0.85rem; }
.ccc-hint { margin-top: 0.6rem; font-size: 0.75rem; color: #7d93a8; }
.ccc-results { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; max-height: 320px; overflow-y: auto; }
.ccc-result { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0.5rem 0.65rem; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); color: #e6eef7; cursor: pointer; transition: all 0.15s ease; }
.ccc-result:hover { background: rgba(13,110,253,0.12); border-color: rgba(13,110,253,0.35); }
.ccc-result--active { background: rgba(13,110,253,0.2); border-color: rgba(13,110,253,0.6); }
.ccc-result-name { font-weight: 600; font-size: 0.85rem; }
.ccc-result-num { font-size: 0.7rem; color: #8fa6bd; }

.ccc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 220px; color: #6f8598; text-align: center; }
.ccc-empty i { font-size: 2rem; opacity: 0.6; }
.ccc-empty span { font-weight: 700; letter-spacing: 0.06em; font-size: 0.85rem; color: #9fb3c8; }
.ccc-empty small { font-size: 0.72rem; }

.ccc-mission-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
.ccc-mc-id { display: flex; flex-direction: column; }
.ccc-mc-num { font-size: 0.72rem; color: #8fa6bd; letter-spacing: 0.05em; }
.ccc-mc-name { font-size: 1.05rem; font-weight: 700; color: #e6eef7; }
.ccc-badge { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; }
.ccc-badge--ok { background: rgba(0,230,118,0.14); border: 1px solid rgba(0,230,118,0.4); color: #7dffb3; }
.ccc-badge--warn { background: rgba(255,193,7,0.14); border: 1px solid rgba(255,193,7,0.4); color: #ffd968; }
.ccc-badge--live { background: rgba(13,110,253,0.16); border: 1px solid rgba(13,110,253,0.45); color: #7db8ff; }
.ccc-badge--idle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #9fb3c8; }

.ccc-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin-bottom: 0.85rem; }
.ccc-gauge { padding: 0.65rem; border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); text-align: center; }
.ccc-gauge-ic { font-size: 1rem; color: #4da3ff; }
.ccc-gauge-val { font-size: 1.15rem; font-weight: 700; color: #e6eef7; margin-top: 0.2rem; }
.ccc-gauge-lbl { font-size: 0.62rem; letter-spacing: 0.06em; color: #7d93a8; margin-top: 0.1rem; }
.ccc-gauge--warn .ccc-gauge-val { color: #ffd968; }
.ccc-gauge--ok .ccc-gauge-val { color: #7dffb3; }

.ccc-lines { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.85rem; }
.ccc-lines-head { font-size: 0.68rem; letter-spacing: 0.06em; color: #8fa6bd; font-weight: 700; margin-bottom: 0.4rem; }
.ccc-line { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; font-size: 0.8rem; color: #cdd9e5; border-top: 1px solid rgba(255,255,255,0.05); }
.ccc-line:first-of-type { border-top: none; }
.ccc-line--total { font-weight: 700; color: #e6eef7; border-top: 1px solid rgba(255,255,255,0.15); margin-top: 0.2rem; padding-top: 0.4rem; }
.ccc-line-amt { white-space: nowrap; }

.ccc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ccc-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-radius: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: #e6eef7; cursor: pointer; text-decoration: none; transition: all 0.15s ease; }
.ccc-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.ccc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ccc-btn--primary { background: linear-gradient(135deg,#0d6efd,#0b5ed7); border-color: rgba(13,110,253,0.6); color: #fff; }
.ccc-btn--pay { background: linear-gradient(135deg,#00b894,#009e7f); border-color: rgba(0,230,118,0.5); color: #04210f; }
.ccc-btn--close { background: linear-gradient(135deg,#6f42c1,#59309b); border-color: rgba(111,66,193,0.6); color: #fff; }
.ccc-btn--ghost { background: transparent; }

/* toast */
.fhcc-con-toast {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600;
    margin: 0.8rem 1.1rem 0;
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
}
.fhcc-con-toast--ok  { background: rgba(0,230,118,0.12); border: 1px solid rgba(0,230,118,0.35); color: #7dffb3; }
.fhcc-con-toast--err { background: rgba(255,82,82,0.12); border: 1px solid rgba(255,82,82,0.35); color: #ff9f9f; }
.fhcc-con-toast-close { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; line-height: 1; }
.fhcc-con-toast-close:hover { opacity: 1; }

/* readout display (HUD) */
.fhcc-con-readout {
    position: relative;
    margin: 1rem 1.1rem;
    padding: 1rem 1.1rem 1.1rem;
    background: linear-gradient(180deg, rgba(0,20,35,0.85), rgba(0,10,20,0.9));
    border: 1px solid rgba(90,180,255,0.28);
    border-radius: 14px;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(90,180,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90,180,255,0.05) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px, 26px 26px;
}
.fhcc-con-readout-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 40%;
    background: linear-gradient(180deg, rgba(125,207,255,0.10), transparent);
    animation: fhccScan 4.5s linear infinite;
    pointer-events: none;
}
@keyframes fhccScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(320%); } }
.fhcc-con-readout-label {
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.24em;
    color: #7dcfff; opacity: 0.85; margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.fhcc-con-gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    position: relative; z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

/* Readout body: gauges on the left, a fleet-status doughnut filling the rest.
   The visual shrinks with the gauges and disappears when space is tight. */
.fhcc-con-readout-body {
    display: flex;
    gap: 0.7rem;
    align-items: stretch;
    position: relative; z-index: 1;
}
.fhcc-con-status-viz {
    flex: 1 1 300px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid #22e59a;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}
.fhcc-con-spark-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dcfff;
    opacity: 0.85;
    margin-bottom: 0.35rem;
}
.fhcc-con-spark-head i { margin-right: 0.3rem; color: #22e59a; }
.fhcc-con-spark-total { color: #eaf6ff; opacity: 0.7; letter-spacing: 0.06em; }

/* Live vehicle roster: one scrollable row per tracked unit. Fills the panel and
   shows per-vehicle detail the aggregate gauges cannot. */
.fhcc-con-roster {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}
.fhcc-con-roster::-webkit-scrollbar { width: 6px; }
.fhcc-con-roster::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
.fhcc-con-roster-empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; color: #7d8ea0; font-size: 0.78rem;
}
.fhcc-con-roster-empty i { font-size: 1.4rem; opacity: 0.5; }

.fhcc-con-rrow {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid #6b7a8d;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    color: #cfe0f2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.fhcc-con-rrow:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }
.fhcc-con-rrow--moving  { border-left-color: #22e59a; }
.fhcc-con-rrow--idling  { border-left-color: #ffb340; }
.fhcc-con-rrow--stopped { border-left-color: #6b7a8d; }
.fhcc-con-rrow--stale   { border-left-color: #ff5d6c; }

.fhcc-con-rdot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #6b7a8d; box-shadow: 0 0 6px currentColor;
}
.fhcc-con-rrow--moving .fhcc-con-rdot { background: #22e59a; box-shadow: 0 0 7px #22e59a; animation: fhcc-pulse 1.6s ease-in-out infinite; }
.fhcc-con-rrow--idling .fhcc-con-rdot { background: #ffb340; box-shadow: 0 0 7px #ffb340; }
.fhcc-con-rrow--stale  .fhcc-con-rdot { background: #ff5d6c; box-shadow: 0 0 7px #ff5d6c; }
@keyframes fhcc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.fhcc-con-rname {
    font-weight: 700; color: #eaf6ff; font-size: 0.82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fhcc-con-rstate {
    font-size: 0.55rem; letter-spacing: 0.08em; font-weight: 700;
    padding: 2px 6px; border-radius: 999px;
    background: rgba(255,255,255,0.06); color: #9fb2c4;
}
.fhcc-con-rrow--moving .fhcc-con-rstate { background: rgba(34,229,154,0.16); color: #22e59a; }
.fhcc-con-rrow--idling .fhcc-con-rstate { background: rgba(255,179,64,0.16); color: #ffb340; }
.fhcc-con-rrow--stale  .fhcc-con-rstate { background: rgba(255,93,108,0.16); color: #ff5d6c; }
.fhcc-con-rspeed {
    font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
    font-weight: 800; color: #eaf6ff; font-size: 0.92rem;
    font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
}
.fhcc-con-rspeed small { font-size: 0.55rem; opacity: 0.5; margin-left: 1px; }
.fhcc-con-rhead {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; color: #9fb2c4; min-width: 40px;
}
.fhcc-con-rhead i { font-size: 0.7rem; opacity: 0.7; }
.fhcc-con-rage {
    font-size: 0.62rem; color: #7d8ea0; min-width: 52px; text-align: right;
    letter-spacing: 0.02em;
}

/* When the console is narrow, drop the visual so the gauges get all the room. */
@media (max-width: 900px) {
    .fhcc-con-status-viz { display: none; }
}
.fhcc-con-gauge {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}
.fhcc-con-gauge-ic { font-size: 1rem; opacity: 0.8; }
.fhcc-con-digit {
    font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
    font-size: 1.7rem; font-weight: 800; line-height: 1.1;
    color: #eaf6ff; text-shadow: 0 0 12px rgba(125,207,255,0.4);
    font-variant-numeric: tabular-nums;
}
.fhcc-con-unit { font-size: 0.8rem; opacity: 0.55; margin-left: 2px; }
.fhcc-con-gauge-lbl {
    font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.6; margin-top: 3px;
}
.fhcc-con-gauge--ok    { border-left-color: #22e59a; }
.fhcc-con-gauge--ok    .fhcc-con-gauge-ic { color: #22e59a; }
.fhcc-con-gauge--cyan  { border-left-color: #33d6f0; }
.fhcc-con-gauge--cyan  .fhcc-con-gauge-ic { color: #33d6f0; }
.fhcc-con-gauge--warn  { border-left-color: #ffb340; }
.fhcc-con-gauge--warn  .fhcc-con-gauge-ic { color: #ffb340; }
.fhcc-con-gauge--alert { border-left-color: #ff5b6e; }
.fhcc-con-gauge--alert .fhcc-con-gauge-ic { color: #ff5b6e; }
.fhcc-con-gauge--alert .fhcc-con-digit { color: #ffd7dc; text-shadow: 0 0 12px rgba(255,91,110,0.5); }
.fhcc-con-gauge--gold  { border-left-color: #ffd54a; }
.fhcc-con-gauge--gold  .fhcc-con-gauge-ic { color: #ffd54a; }
.fhcc-con-gauge--idle  { border-left-color: #6b7a8d; }
.fhcc-con-gauge--idle  .fhcc-con-gauge-ic { color: #6b7a8d; }

/* control bays */
.fhcc-con-bays {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
    padding: 0 1.1rem 1.1rem;
}
.fhcc-con-bay {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25));
    border: 1px solid rgba(90,180,255,0.18);
    border-radius: 12px;
    overflow: hidden;
}
.fhcc-con-bay-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 0.8rem;
    background: rgba(90,180,255,0.06);
    border-bottom: 1px solid rgba(90,180,255,0.16);
}
.fhcc-con-bay-title {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
    color: #cfe6ff; display: flex; align-items: center; gap: 0.45rem;
}
.fhcc-con-bay-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.fhcc-con-empty {
    font-size: 0.72rem; letter-spacing: 0.1em; text-align: center;
    color: #6b7a8d; padding: 1rem 0;
    border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px;
}

/* mini screen */
.fhcc-con-screen {
    font-family: "Consolas", ui-monospace, monospace;
    background: rgba(0,15,25,0.75);
    border: 1px solid rgba(51,214,240,0.25);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
}
.fhcc-con-screen-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; padding: 2px 0;
}
.fhcc-con-screen-row span { color: #5f7fa0; letter-spacing: 0.1em; }
.fhcc-con-screen-row b { color: #cfe6ff; max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhcc-con-screen-val { color: #6cf3c0 !important; text-shadow: 0 0 8px rgba(108,243,192,0.4); }
.fhcc-con-screen-val em { font-style: normal; opacity: 0.6; font-size: 0.72rem; }

/* select + stepper */
.fhcc-con-select {
    width: 100%;
    background: rgba(0,10,20,0.7);
    color: #dbeeff;
    border: 1px solid rgba(90,180,255,0.28);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
}
.fhcc-con-select:focus { outline: none; border-color: #33d6f0; box-shadow: 0 0 0 2px rgba(51,214,240,0.25); }
.fhcc-con-stepper { display: flex; align-items: stretch; gap: 0.4rem; }
.fhcc-con-step {
    width: 38px; border-radius: 8px; font-size: 1.1rem; font-weight: 800;
    background: rgba(90,180,255,0.1); color: #cfe6ff;
    border: 1px solid rgba(90,180,255,0.28); cursor: pointer; line-height: 1;
}
.fhcc-con-step:hover:not(:disabled) { background: rgba(90,180,255,0.2); }
.fhcc-con-step:disabled { opacity: 0.5; cursor: default; }
.fhcc-con-qty {
    flex: 1; text-align: center;
    font-family: "Consolas", ui-monospace, monospace; font-size: 1rem; font-weight: 700;
    background: rgba(0,10,20,0.7); color: #eaf6ff;
    border: 1px solid rgba(90,180,255,0.28); border-radius: 8px; padding: 0.3rem;
}
.fhcc-con-qty:focus { outline: none; border-color: #33d6f0; }

/* action buttons */
.fhcc-con-actions { display: flex; gap: 0.5rem; }
.fhcc-con-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
    border-radius: 8px; padding: 0.5rem 0.4rem; cursor: pointer;
    border: 1px solid transparent; transition: transform 0.08s, box-shadow 0.15s;
}
.fhcc-con-btn:active:not(:disabled) { transform: translateY(1px); }
.fhcc-con-btn:disabled { opacity: 0.55; cursor: default; }
.fhcc-con-btn--go   { background: rgba(34,229,154,0.14); color: #7dffb3; border-color: rgba(34,229,154,0.4); }
.fhcc-con-btn--go:hover:not(:disabled)   { box-shadow: 0 0 14px -2px rgba(34,229,154,0.7); }
.fhcc-con-btn--stop { background: rgba(255,91,110,0.14); color: #ff9fab; border-color: rgba(255,91,110,0.4); }
.fhcc-con-btn--stop:hover:not(:disabled) { box-shadow: 0 0 14px -2px rgba(255,91,110,0.7); }
.fhcc-con-btn--done { background: rgba(51,214,240,0.14); color: #8fe9f7; border-color: rgba(51,214,240,0.4); }
.fhcc-con-btn--done:hover:not(:disabled) { box-shadow: 0 0 14px -2px rgba(51,214,240,0.7); }

/* launch bay */
.fhcc-con-launch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fhcc-con-launch-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; text-decoration: none;
    color: #dbe9ff; background: rgba(185,139,255,0.1);
    border: 1px solid rgba(185,139,255,0.3); border-radius: 8px;
    padding: 0.4rem 0.75rem; transition: background 0.15s, border-color 0.15s;
}
.fhcc-con-launch-btn:hover { background: rgba(185,139,255,0.22); border-color: rgba(185,139,255,0.55); color: #fff; }

/* occupancy meter */
.fhcc-con-meter { margin-top: 0.2rem; }
.fhcc-con-meter-bar {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(51,214,240,0.25);
}
.fhcc-con-meter-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #33d6f0, #22e59a);
    box-shadow: 0 0 10px rgba(51,214,240,0.6);
    transition: width 0.4s ease;
}
.fhcc-con-meter-lbl {
    font-size: 0.62rem; letter-spacing: 0.1em; color: #8fb4d6;
    margin-top: 4px; text-align: center; font-variant-numeric: tabular-nums;
}

/* inline "open full" link */
.fhcc-con-linkline {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 600; text-decoration: none;
    color: #8fb4d6; margin-top: 0.15rem;
}
.fhcc-con-linkline:hover { color: #cfe6ff; }

/* live-map mini radar list */
.fhcc-con-radar {
    display: flex; flex-direction: column; gap: 0.3rem;
    background: rgba(0,15,25,0.6);
    border: 1px solid rgba(185,139,255,0.22);
    border-radius: 8px; padding: 0.5rem 0.6rem;
}
.fhcc-con-radar-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.76rem; color: #d6e6f5;
    background: none; border: none; width: 100%; text-align: left;
    padding: 0.15rem 0.2rem; border-radius: 6px; cursor: pointer;
}
.fhcc-con-radar-row:hover { background: rgba(185,139,255,0.12); }
.fhcc-con-radar-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhcc-con-radar-spd {
    font-family: "Consolas", ui-monospace, monospace;
    color: #8fe9f7; font-variant-numeric: tabular-nums;
}

/* wide bay spans two columns so the mini map has room */
.fhcc-con-bay--wide { grid-column: span 2; }

/* mini Google map */
.fhcc-con-map-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(185,139,255,0.28);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
}
.fhcc-con-map {
    width: 100%;
    height: 240px;
    background: #0a1120;
}
.fhcc-con-map-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; letter-spacing: 0.14em; color: #6b7a8d;
    background: rgba(10,17,32,0.85);
    pointer-events: none;
}

/* per-module accent palette */
.fhcc-gps     { --fhcc-accent: rgba(13,110,253,0.12);  --fhcc-border: rgba(13,110,253,0.4);   --fhcc-icon-bg: rgba(13,110,253,0.18);   --fhcc-glow: rgba(13,110,253,0.55); }
.fhcc-fleet   { --fhcc-accent: rgba(111,66,193,0.12);  --fhcc-border: rgba(111,66,193,0.4);   --fhcc-icon-bg: rgba(111,66,193,0.18);   --fhcc-glow: rgba(111,66,193,0.55); }
.fhcc-marina  { --fhcc-accent: rgba(13,202,240,0.12);  --fhcc-border: rgba(13,202,240,0.4);   --fhcc-icon-bg: rgba(13,202,240,0.18);   --fhcc-glow: rgba(13,202,240,0.55); }
.fhcc-service { --fhcc-accent: rgba(253,126,20,0.12);  --fhcc-border: rgba(253,126,20,0.4);   --fhcc-icon-bg: rgba(253,126,20,0.18);   --fhcc-glow: rgba(253,126,20,0.55); }
.fhcc-inv     { --fhcc-accent: rgba(25,135,84,0.12);   --fhcc-border: rgba(25,135,84,0.4);    --fhcc-icon-bg: rgba(25,135,84,0.18);    --fhcc-glow: rgba(25,135,84,0.55); }
.fhcc-camp    { --fhcc-accent: rgba(121,133,0,0.14);   --fhcc-border: rgba(161,177,0,0.4);    --fhcc-icon-bg: rgba(121,133,0,0.22);    --fhcc-glow: rgba(161,177,0,0.5); }
.fhcc-portal  { --fhcc-accent: rgba(173,181,189,0.1);  --fhcc-border: rgba(173,181,189,0.3);  --fhcc-icon-bg: rgba(173,181,189,0.12);  --fhcc-glow: rgba(173,181,189,0.4); }
.fhcc-finance { --fhcc-accent: rgba(255,193,7,0.12);   --fhcc-border: rgba(255,193,7,0.4);    --fhcc-icon-bg: rgba(255,193,7,0.18);    --fhcc-glow: rgba(255,193,7,0.55); }

/* ── quick-launch bar ── */
.fhcc-quick-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1rem 1.75rem 0;
}
.fhcc-quick-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #e0e9f8;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    cursor: pointer;
}
.fhcc-quick-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-2px);
    color: #fff;
}
.fhcc-quick-btn i { font-size: 0.9rem; }

/* -- Command Center in-page tab switcher -- */
.fhcc-tabs {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 32px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
}
.fhcc-quick-btn--active {
    background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%);
    border-color: rgba(59,130,246,0.6);
    color: #fff;
    box-shadow: 0 2px 10px rgba(13,110,253,0.35);
}
.fhcc-quick-btn--active:hover {
    background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%);
    transform: none;
}
.fhcc-map-tab {
    padding: 1.5rem 1.75rem 0;
}

.fhcc-workspace-tab {
    padding: 1.5rem 1.75rem 0.5rem;
    min-width: 0;
    overflow-x: hidden;
}

/* -- Role Access sub-feature accordion -- */
.ra-subcat { overflow: hidden; }
.ra-subcat-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--bs-tertiary-bg, #f4f6fa);
    border: 0;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}
.ra-subcat-header:hover { background: var(--bs-secondary-bg, #e9edf3); }
.ra-subcat-header i:first-child { color: #0d6efd; }

/* ── Hero auto-refresh control ── */
.fhcc-refresh-ctrl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    font-size: 0.75rem;
    color: #e0e9f8;
}

.fhcc-refresh-icon {
    font-size: 0.85rem;
    color: #7dcfff;
    transition: transform 0.3s;
}

@keyframes fhcc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.fhcc-refresh-spinning {
    animation: fhcc-spin 1s linear infinite;
}

.fhcc-refresh-select {
    background: transparent;
    border: none;
    color: #c9b3f5;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.fhcc-refresh-select option {
    background: #1a2233;
    color: #e0e6f0;
}

.fhcc-refresh-countdown {
    font-size: 0.72rem;
    font-weight: 700;
    color: #00e676;
    min-width: 2rem;
    text-align: right;
}

/* ── disabled card ── */
.fhcc-card-disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

/* ── loading skeleton ── */
.fhcc-skeleton {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: fhcc-shimmer 1.6s infinite;
    height: 120px;
}
@keyframes fhcc-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Command Center — Guided Onboarding & Section Guidance
   ─────────────────────────────────────────────────────────────────────────── */

/* ── guidance band wrapping the setup card + welcome ── */
.fhcc-guide {
    padding: 1.5rem 1.75rem 0;
}
.fhcc-guide-row {
    display: grid;
    grid-template-columns: minmax(300px, 1.3fr) 2fr;
    gap: 1rem;
    align-items: stretch;
}
/* Grid items default to min-width:auto, which lets nowrap content (e.g. long
   alert addresses) push a column wider than its track and overflow the page.
   Allowing the children to shrink keeps everything within the viewport. */
.fhcc-guide-row > * { min-width: 0; }

/* ── setup / getting-started card ── */
.fhcc-setup {
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(13,110,253,0.12) 0%, rgba(111,66,193,0.1) 100%);
    border: 1px solid rgba(13,110,253,0.3);
    padding: 1.25rem 1.4rem;
    position: relative;
    overflow: hidden;
}
.fhcc-setup-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.fhcc-setup-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.fhcc-setup-subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.1rem;
}

/* ── circular progress ring ── */
.fhcc-ring {
    --pct: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side, #0a1628 0 78%, transparent 79% 100%),
        conic-gradient(#00e676 calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    transition: background 0.6s ease;
}

/* ── checklist ── */
.fhcc-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fhcc-check {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    color: #e0e9f8;
    transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.fhcc-check:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateX(3px);
    color: #fff;
}
.fhcc-check-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.fhcc-check-done .fhcc-check-icon {
    background: rgba(0,230,118,0.18);
    border: 1px solid rgba(0,230,118,0.5);
    color: #00e676;
}
.fhcc-check-todo .fhcc-check-icon {
    background: rgba(255,193,7,0.16);
    border: 1px solid rgba(255,193,7,0.45);
    color: #ffc107;
}
.fhcc-check-body { flex: 1; min-width: 0; }
.fhcc-check-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}
.fhcc-check-done .fhcc-check-label {
    text-decoration: line-through;
    opacity: 0.55;
}
.fhcc-check-hint {
    font-size: 0.64rem;
    opacity: 0.5;
    margin-top: 1px;
}
.fhcc-check-go {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.fhcc-check-todo:hover .fhcc-check-go { color: #ffc107; }

/* all-done celebration state */
.fhcc-setup-complete {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}
.fhcc-setup-complete i {
    font-size: 2rem;
    color: #00e676;
    animation: fhcc-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes fhcc-pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── welcome / guidance panel beside setup ── */
.fhcc-welcome {
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
}
.fhcc-welcome-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fhcc-welcome-text {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
}
.fhcc-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
}
.fhcc-flow-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 30px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.68rem;
    font-weight: 600;
    color: #e0e9f8;
    white-space: nowrap;
}
.fhcc-flow-step i { font-size: 0.8rem; }
.fhcc-flow-arrow {
    color: rgba(255,255,255,0.25);
    font-size: 0.85rem;
}

/* ── Fleet Status Hub (rich replacement for the old "at a glance" box) ── */
.fhcc-status-hub { display: flex; flex-direction: column; gap: 0.85rem; }
.fhcc-sh-header { display: flex; align-items: center; justify-content: space-between; }
.fhcc-sh-title { font-weight: 700; color: #fff; font-size: 0.98rem; display: flex; align-items: center; gap: 0.4rem; }
.fhcc-sh-live-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 600; color: #4ade80;
    background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3);
    border-radius: 999px; padding: 0.25rem 0.7rem; text-decoration: none;
}
.fhcc-sh-live-btn:hover { background: rgba(74,222,128,0.2); color: #4ade80; }
.fhcc-sh-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
    animation: fhcc-pulse 2s ease-in-out infinite;
}
@keyframes fhcc-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* stat tiles */
.fhcc-sh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.fhcc-sh-tile {
    border-radius: 0.65rem; padding: 0.7rem 0.6rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.fhcc-sh-tile-val { font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff; }
.fhcc-sh-tile-lbl { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 0.3rem; }
.fhcc-sh-tile-blue   { background: rgba(125,207,255,0.12); border: 1px solid rgba(125,207,255,0.2); }
.fhcc-sh-tile-green  { background: rgba(74,222,128,0.12);  border: 1px solid rgba(74,222,128,0.25); }
.fhcc-sh-tile-orange { background: rgba(255,192,125,0.12); border: 1px solid rgba(255,192,125,0.3); }
.fhcc-sh-tile-dim    { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

/* section labels inside hub */
.fhcc-sh-section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    color: #93a4bf; text-transform: uppercase;
    display: flex; align-items: center; gap: 0.4rem;
}

/* row list (alerts & tickets) */
.fhcc-sh-list { display: flex; flex-direction: column; gap: 0.45rem; }
.fhcc-sh-row {
    display: flex; align-items: center; gap: 0.7rem;
    background: rgba(255,255,255,0.03); border-radius: 0.55rem; padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.06);
}
.fhcc-sh-row-link { text-decoration: none; transition: background 0.15s; }
.fhcc-sh-row-link:hover { background: rgba(255,255,255,0.07); }
.fhcc-sh-row-icon {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 0.45rem;
    display: grid; place-items: center; font-size: 0.85rem;
}
.fhcc-sh-icon-alert    { background: rgba(255,192,125,0.15); color: #ffc07d; }
.fhcc-sh-icon-new      { background: rgba(255,159,219,0.15); color: #ff9fdb; }
.fhcc-sh-icon-progress { background: rgba(255,192,125,0.15); color: #ffc07d; }
.fhcc-sh-icon-resolved { background: rgba(74,222,128,0.15);  color: #4ade80; }
.fhcc-sh-row-body { flex: 1 1 auto; min-width: 0; }
.fhcc-sh-row-title { color: #e6edf6; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fhcc-sh-row-sub   { color: #7d8da8; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fhcc-sh-row-time  { flex: 0 0 auto; color: #7d8da8; font-size: 0.72rem; white-space: nowrap; }
.fhcc-sh-row-badge {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem; border-radius: 999px;
}
.fhcc-badge-new      { background: rgba(255,159,219,0.15); color: #ff9fdb; border: 1px solid rgba(255,159,219,0.3); }
.fhcc-badge-progress { background: rgba(255,192,125,0.15); color: #ffc07d; border: 1px solid rgba(255,192,125,0.3); }
.fhcc-badge-resolved { background: rgba(74,222,128,0.15);  color: #4ade80; border: 1px solid rgba(74,222,128,0.3);  }
.fhcc-badge-closed   { background: rgba(255,255,255,0.06); color: #7d8da8; border: 1px solid rgba(255,255,255,0.1); }

/* misc within hub */
.fhcc-sh-all-clear  { display:flex; align-items:center; gap:0.5rem; color:#4ade80; font-size:0.85rem; }
.fhcc-sh-more-link  { align-self:flex-end; font-size:0.78rem; color:#7dcfff; text-decoration:none; display:flex; align-items:center; gap:0.25rem; }
.fhcc-sh-more-link:hover { color:#a8d8ff; }
.fhcc-sh-empty-row  { color:#7d8da8; font-size:0.82rem; }
.fhcc-sh-inline-link{ color:#7dcfff; }

/* footer quick-action strip */
.fhcc-sh-footer { display:flex; gap:0.45rem; flex-wrap:wrap; padding-top:0.25rem; border-top:1px solid rgba(255,255,255,0.06); margin-top:0.25rem; }
.fhcc-sh-footer-btn {
    flex:1 1 0; min-width:70px;
    display:inline-flex; align-items:center; justify-content:center; gap:0.3rem;
    border-radius:0.55rem; padding:0.45rem 0.3rem;
    font-size:0.78rem; font-weight:600; text-decoration:none; color:#fff;
    transition: filter 0.15s;
}
.fhcc-sh-footer-btn:hover { filter:brightness(1.15); color:#fff; }
.fhcc-sh-footer-gps     { background: linear-gradient(135deg,#1f5fa6,#3399ff); }
.fhcc-sh-footer-playback{ background: linear-gradient(135deg,#5a3a9a,#9b6ff0); }
.fhcc-sh-footer-alerts  { background: linear-gradient(135deg,#8a4500,#ff8c42); }
.fhcc-sh-footer-reports { background: linear-gradient(135deg,#4a1f7a,#a260e0); }

/* ── SuperAdmin support panels (side-by-side in grid) ── */
.fhcc-support-panels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.fhcc-support-panel {
    background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    border-radius: 0.75rem; padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.fhcc-support-panel-head {
    font-size: 0.82rem; font-weight: 700; color: #e0e8f5;
    display: flex; align-items: center; gap: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.6rem;
}
@media (max-width: 700px) {
    .fhcc-support-panels { grid-template-columns: 1fr; }
    .fhcc-sh-tiles { grid-template-columns: repeat(3,1fr); }
}

/* ── section description (teaches what each module is for) ── */
.fhcc-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.fhcc-section-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}
.fhcc-section-desc {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.4);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding-left: 1.7rem;
}

/* ── empty-state nudge card ── */
.fhcc-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: rgba(255,193,7,0.07);
    border: 1px dashed rgba(255,193,7,0.35);
    font-size: 0.76rem;
    color: rgba(255,255,255,0.7);
}
.fhcc-empty i { font-size: 1.2rem; color: #ffc107; flex-shrink: 0; }
.fhcc-empty a {
    color: #ffc107;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
    white-space: nowrap;
}
.fhcc-empty a:hover { text-decoration: underline; }

/* ── responsive ── */
@media (max-width: 768px) {
    .fhcc-grid { grid-template-columns: repeat(2, 1fr); padding: 1rem; }
    .fhcc-kpi-strip { padding: 0.75rem 1rem 0; }
    .fhcc-quick-bar { padding: 0.75rem 1rem 0; }
    .fhcc-console { margin: 1rem 1rem 0; }
    .fhcc-con-bay--wide { grid-column: span 1; }
    .fhcc-hero { padding: 1.1rem 1rem; }
    .fhcc-hero-title { font-size: 1.2rem; }
    .fhcc-guide { padding: 1rem; }
    .fhcc-guide-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .fhcc-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
    .sov-row { flex-direction: column; align-items: stretch; }
    .sov-pod { max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Command Center quick-launch button (navbar, under the logo)
   Animated, eye-catching entry point to the Fleet Hub control panel.
   ───────────────────────────────────────────────────────────────────────────── */
.cmd-center-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    color: #fff !important;
    overflow: hidden;
    background: linear-gradient(120deg, #ffb300 0%, #ff7a18 45%, #af52de 100%);
    background-size: 200% 200%;
    box-shadow: 0 4px 16px rgba(255,138,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: cmd-center-sheen 6s ease infinite;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cmd-center-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 26px rgba(255,138,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    color: #fff !important;
}
.cmd-center-btn:active { transform: translateY(0) scale(0.99); }

/* animated gradient drift */
@keyframes cmd-center-sheen {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* sweeping light glare across the button */
.cmd-center-glow {
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: cmd-center-glare 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cmd-center-glare {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

.cmd-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(0,0,0,0.18);
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
    animation: cmd-center-pulse 2.4s ease-in-out infinite;
}
@keyframes cmd-center-pulse {
    0%,100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 0 0 rgba(255,255,255,0.0); }
    50%     { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 12px 1px rgba(255,255,255,0.25); }
}

.cmd-center-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    z-index: 1;
}
.cmd-center-title {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.cmd-center-sub {
    font-size: 0.62rem;
    font-weight: 500;
    opacity: 0.85;
}
.cmd-center-arrow {
    margin-left: auto;
    font-size: 1.1rem;
    opacity: 0.85;
    transition: transform 0.18s ease, opacity 0.18s ease;
    z-index: 1;
}
.cmd-center-btn:hover .cmd-center-arrow {
    transform: translateX(3px);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cmd-center-btn,
    .cmd-center-glow,
    .cmd-center-icon { animation: none; }
}

/* System Command Center variant — a cool blue → teal → green gradient so it is
   clearly distinct from the warm orange → purple Fleet Hub Command Center button. */
.cmd-center-btn--system {
    background: linear-gradient(120deg, #0d6efd 0%, #17a2b8 50%, #20c997 100%);
    box-shadow: 0 4px 16px rgba(23,162,184,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.cmd-center-btn--system:hover {
    box-shadow: 0 8px 26px rgba(23,162,184,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Divider between the Fleet Hub and System Utilities sidebar groups. */
.nav-group-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.16);
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SYSTEM COMMAND CENTER (SuperAdmin) — gauges, refresh control & DB panel
   Reuses the fhcc-* dark shell; everything here is namespaced under scc-*.
   ─────────────────────────────────────────────────────────────────────────── */

.scc-page { padding-bottom: 3rem; }

/* Scope section dividers inside SCC to align with content rows */
.scc-page .fhcc-section {
    padding-left: calc(var(--toggle-size, 40px) + 0.75rem);
    padding-right: 1.75rem;
    margin-left: 0;
    margin-right: 0;
}

/* ── Console tab strip (Command Center / Global Overview / System Map) ──
   Also reused for the Global Overview's GPS/MMS/System sub-tabs (.scc-subtabs). */
.scc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
}
.scc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.25rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #cfe2ff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, color 0.18s;
}
.scc-tab:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-1px);
    color: #fff;
}
.scc-tab.active {
    background: linear-gradient(135deg, #0d6efd, #0a4bd0);
    border-color: #0d6efd;
    color: #fff;
    box-shadow: 0 4px 14px rgba(13,110,253,0.35);
}
.scc-tab i { font-size: 0.9rem; }
/* Sub-tabs sit flush with the embedding container's own padding */
.scc-subtabs { padding-left: 0; padding-right: 0; }

/* ── Fullscreen toggle (pushed to the upper-right of the tab strip) ── */
.scc-fullscreen-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 30px;
    border: 1px solid rgba(125,207,255,0.35);
    background: rgba(13,110,253,0.12);
    color: #7dcfff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, color 0.18s;
}
.scc-fullscreen-btn:hover {
    background: rgba(13,110,253,0.25);
    border-color: #7dcfff;
    color: #fff;
    transform: translateY(-1px);
}
.scc-fullscreen-btn i { font-size: 0.95rem; }

/* ── External Battery Analysis (scatter chart + low-battery popup) ──
   Full-width panel between Live Telemetry and Track Pool Staging Queue. The chart
   plots the latest external-battery voltages on a 0–48V scale; hovering a dot
   raises the shared GPS mini-dashboard balloon (window.marisatBalloon). */
.scc-batt-panel {
    padding: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
}
.scc-batt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.scc-batt-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.65);
    flex-wrap: wrap;
}
.scc-batt-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.scc-batt-legend-item i { color: #7dcfff; }
.scc-batt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.scc-batt-dot-ok  { background: #00e676; }
.scc-batt-dot-low { background: #ff5252; }

.scc-batt-lowbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: #cfe2ff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, color 0.18s;
}
.scc-batt-lowbtn:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.30);
    transform: translateY(-1px);
    color: #fff;
}
.scc-batt-lowbtn.has-low {
    border-color: rgba(255,82,82,0.55);
    background: rgba(255,82,82,0.14);
    color: #ffb3b3;
}
.scc-batt-lowbtn i { font-size: 0.95rem; }
.scc-batt-lowcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    font-size: 0.72rem;
    font-weight: 700;
}
.scc-batt-lowbtn.has-low .scc-batt-lowcount { background: #ff5252; color: #fff; }

/* Chart card — roughly half the height of the Live Telemetry gauges. */
.scc-batt-chart {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 0.75rem 1rem;
}
.scc-batt-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Aspect ratio is preserved (viewBox 1000x160) so dots stay perfectly round
       and the voltage labels keep correct proportions. */
}
.scc-batt-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.scc-batt-axis { fill: rgba(255,255,255,0.65); font-size: 11px; font-weight: 600; }
.scc-batt-threshold {
    stroke: #ff5252;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.8;
}
.scc-batt-point {
    cursor: pointer;
    transition: r 0.12s ease;
}
.scc-batt-point.is-ok  { fill: #00e676; stroke: rgba(0,0,0,0.35); stroke-width: 1; }
.scc-batt-point.is-low { fill: #ff5252; stroke: rgba(0,0,0,0.35); stroke-width: 1; }
.scc-batt-point:hover { r: 8; }

.scc-batt-empty {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
}
.scc-batt-empty i { color: #7dcfff; margin-right: 0.4rem; }

/* Low-battery popup list. */
.scc-batt-lowlist-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 21000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.scc-batt-lowlist {
    width: min(440px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: #0d1b30;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    overflow: hidden;
}
.scc-batt-lowlist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    font-weight: 700;
    color: #ffb3b3;
    font-size: 0.9rem;
}
.scc-batt-lowlist-head i { margin-right: 0.4rem; }
.scc-batt-lowlist-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}
.scc-batt-lowlist-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.scc-batt-lowlist-empty {
    padding: 1.5rem 1.1rem;
    text-align: center;
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem;
}
.scc-batt-lowlist-items {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    overflow-y: auto;
}
.scc-batt-lowlist-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.82rem;
    color: #e0e9f8;
}
.scc-batt-lowlist-items li:last-child { border-bottom: none; }
.scc-batt-lowlist-name i { color: #7dcfff; margin-right: 0.4rem; }
.scc-batt-lowlist-volt {
    font-weight: 700;
    color: #ff5252;
    font-variant-numeric: tabular-nums;
}

/* ── Fullscreen console mode ──
   When the browser Fullscreen API promotes #scc-root, make it completely fill the
   screen and allow its own inner scrolling so it behaves as a true, self-contained
   command center. The .fhcc-page gradient background carries over automatically. */
.scc-page.scc-fullscreen {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
}
/* Fleet Hub Command Center reuses the same fullscreen behavior. */
.fhcc-page.scc-fullscreen {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
}
/* Vendor-prefixed :fullscreen guards for the promoted element. */
#scc-root:fullscreen,
#scc-root:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
}
#fhcc-root:fullscreen,
#fhcc-root:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
}

/* ── refresh interval control (hero) ── */
.scc-refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #cfe2ff;
    font-size: 0.78rem;
}
.scc-refresh i { color: #7dcfff; }
.scc-refresh-lbl { font-weight: 600; opacity: 0.8; }
.scc-refresh-select {
    background: #0d1b30;
    color: #e0e9f8;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    outline: none;
}
.scc-refresh-select:focus { border-color: #0d6efd; }
.scc-refresh-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.7;
    white-space: nowrap;
}
.scc-dot-live, .scc-dot-paused {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
}
.scc-dot-live {
    background: #00e676;
    box-shadow: 0 0 0 0 rgba(0,230,118,0.5);
    animation: fhcc-live 2s ease-in-out infinite;
}
.scc-dot-paused { background: #ffae42; }
.scc-spin { animation: scc-rotate 0.9s linear infinite; display: inline-block; }
@keyframes scc-rotate { to { transform: rotate(360deg); } }

/* ── gauge row ── */
.scc-gauge-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    padding: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
}
.scc-gauge-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 1.1rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scc-gauge-foot {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    gap: 0.5rem;
}
.scc-gauge-foot i { margin-right: 0.2rem; }

/* -- Track Pool staging queue row (gauge + live feed) -- */
.scc-pool-row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
    align-items: stretch;
}
.scc-pool-gauge {
    flex: 0 0 260px;
    max-width: 260px;
}
.scc-pool-row .fhcc-pool-feed {
    max-height: 320px;
}
@media (max-width: 768px) {
    .scc-pool-row {
        flex-direction: column;
    }
    .scc-pool-gauge {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* ── speedometer (SVG) ── */
.speedo-wrap {
    position: relative;
    width: 100%;
    max-width: 240px;
    text-align: center;
}
.speedo-svg { width: 100%; height: auto; display: block; }

/* -- gauge data-activity light (System Command Center) -- */
.speedo-activity {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.35);
}
.speedo-activity-on {
    background: #00e676;
    box-shadow: 0 0 0 0 rgba(0,230,118,0.5);
    animation: fhcc-live 2s ease-in-out infinite;
}
.speedo-activity-off {
    background: #ff5d5d;
    box-shadow: 0 0 4px rgba(255,93,93,0.6);
}
.speedo-track { stroke: rgba(255,255,255,0.10); stroke-width: 12; stroke-linecap: round; }
.speedo-fill {
    stroke-width: 12;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px currentColor);
    transition: stroke-dasharray 0.6s ease;
}
.speedo-tick { stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }
.speedo-tick-major { stroke: rgba(255,255,255,0.45); stroke-width: 2.5; }
.speedo-needle {
    stroke-width: 3.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px currentColor);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.speedo-hub { filter: drop-shadow(0 0 4px currentColor); }
.speedo-hub-dot { fill: #0a1628; }
.speedo-readout {
    position: absolute;
    bottom: 38px;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.speedo-value { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.speedo-unit { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin-top: 0.15rem; }
.speedo-label {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.speedo-scale {
    display: flex;
    justify-content: space-between;
    width: 78%;
    margin: 0.1rem auto 0;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
}

/* ── ingestion trend mini-bars ── */
.scc-trend-card { justify-content: space-between; }
.scc-trend-title {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}
.scc-trend-title i { color: #7dcfff; margin-right: 0.3rem; }
.scc-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 100%;
    height: 120px;
    padding: 0 0.25rem;
}
.scc-trend-bar {
    flex: 1 1 auto;
    min-width: 0;
    background: linear-gradient(180deg, #7dcfff 0%, #0d6efd 100%);
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    transition: height 0.5s ease;
}
.scc-trend-foot {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
}

/* -- Listener traffic KPI row (compact, single row until 768px) -- */
.scc-listener-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.scc-listener-card {
    flex: 1 1 0;
    min-width: 130px;
    max-width: 200px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 0.6rem 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scc-listener-card.scc-listener-stopped {
    opacity: 0.55;
    border-color: rgba(255,255,255,0.06);
}
.scc-listener-status {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    margin-bottom: 0.1rem;
}
.scc-listener-state.running { color: #00e676; }
.scc-listener-state.stopped { color: #ffae42; }
/* Compact speedo inside listener cards */
.scc-listener-card .speedo-wrap { max-width: 130px; }
.scc-listener-card .speedo-value { font-size: 1.2rem; }
.scc-listener-card .speedo-label { font-size: 0.72rem; }
.scc-listener-card .speedo-unit  { font-size: 0.6rem; }
.scc-listener-card .speedo-scale { font-size: 0.55rem; }
/* At 130 px wide the SVG is ~99 px tall; the hub centre lands at ~70 px from
   the wrap top. The default bottom:38px places the value text directly on the
   hub. Pushing it up to 60 px clears the dial base cleanly. */
.scc-listener-card .speedo-readout { bottom: 60px; }
.scc-listener-foot {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.55);
    gap: 0.3rem;
}
.scc-listener-foot i { margin-right: 0.15rem; }

/* ── MySQL DB panel ── */
.scc-db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
}
.scc-db-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.scc-db-card-head {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.scc-db-card-head i { margin-right: 0.3rem; color: #7dcfff; }
.scc-db-metric { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.scc-db-metric span { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.45); }
.scc-db-metric-sm { font-size: 1.05rem; }
.scc-db-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
    margin: 0.55rem 0 0.4rem;
}
.scc-db-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.scc-db-sub {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.2rem;
}
.scc-db-sub i { margin-right: 0.2rem; }
.scc-db-error {
    margin: 0.5rem 1.75rem 0;
    margin: 0.5rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
    border-radius: 12px;
    background: rgba(255,93,93,0.12);
    border: 1px solid rgba(255,93,93,0.35);
    color: #ffb3b3;
    font-size: 0.85rem;
}

/* ── largest tables ── */
.scc-tables-card {
    margin: 1rem 1.75rem 0;
    margin: 1rem 1.75rem 0 calc(var(--toggle-size, 40px) + 0.75rem);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 1rem 1.1rem 0.5rem;
}
.scc-tables { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.scc-tables thead th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.scc-tables tbody td {
    padding: 0.4rem 0.5rem;
    color: rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.scc-table-name { font-family: var(--bs-font-monospace, monospace); color: #9fd0ff; }
.scc-tables-bar-col { width: 28%; }
.scc-tbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; }
.scc-tbar-fill { height: 100%; background: linear-gradient(90deg, #7dcfff, #0d6efd); border-radius: 3px; }

@media (max-width: 768px) {
    .scc-gauge-row, .scc-pool-row, .scc-db-grid, .scc-listener-row { padding: 0.5rem 1rem 0 calc(var(--toggle-size, 40px) + 0.5rem); }
    .scc-db-error, .scc-tables-card { margin-left: calc(var(--toggle-size, 40px) + 0.5rem); margin-right: 1rem; }
    .scc-refresh-countdown { display: none; }
    .scc-listener-row { flex-wrap: wrap; overflow-x: visible; }
    .scc-listener-card { flex: 1 1 calc(50% - 0.75rem); max-width: 100%; min-width: 100px; }
}

/* -- NAV SUB-DIVIDER - separates groups inside an expanded nav section -- */
.nav-sub-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.14);
    margin: 0.5rem 0.75rem;
    opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN DARK PAGE — dark-mode theme for Global Overview & System Map so they
   match the System Command Center. Bootstrap card/table/pill overrides are
   scoped under .admin-dark-page to avoid affecting the rest of the app.
   ─────────────────────────────────────────────────────────────────────────── */
.admin-dark-page {
    background: linear-gradient(160deg, #060d1a 0%, #0a1628 40%, #060d1a 100%);
    color: #e0e9f8;
    min-height: 100vh;
    /* counteract the layout's .p-4 so the dark canvas bleeds to the edges */
    margin: -1.5rem;
    padding: 1.5rem;
}

/* host wrapper for the embedded system map on its dedicated dark page */
.scc-map-host { padding: 1.25rem 1.75rem 0; }

/* cards */
.admin-dark-page .card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.18);
    color: #e0e9f8;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.admin-dark-page .card-header {
    background: rgba(13,110,253,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 600;
}
.admin-dark-page .card.bg-dark,
.admin-dark-page .card.bg-primary,
.admin-dark-page .card.bg-success,
.admin-dark-page .card.bg-info,
.admin-dark-page .card.bg-warning {
    border: none;
}

/* keep colored border accents clearly visible on dark — brighter accents plus a
   thicker left bar so KPI boxes read as distinct, gridded cards */
.admin-dark-page .card.border-success { border-color: rgba(25,135,84,0.85) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-info { border-color: rgba(13,202,240,0.85) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-warning { border-color: rgba(255,193,7,0.85) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-primary { border-color: rgba(13,110,253,0.85) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-danger { border-color: rgba(220,53,69,0.85) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-secondary { border-color: rgba(255,255,255,0.45) !important; border-left-width: 4px !important; }
.admin-dark-page .card.border-dark { border-color: rgba(255,255,255,0.50) !important; border-left-width: 4px !important; }

/* light surface utilities (bg-body*, bg-light, bg-white) render as bright bands
   on the dark canvas and wash out the cards/labels sitting on them (e.g. the
   Tracking Listeners stats strip). Repaint them as translucent dark surfaces.
   Exclude .badge so the existing .badge.bg-light dark-text rule still applies. */
.admin-dark-page .bg-body-tertiary:not(.badge),
.admin-dark-page .bg-body-secondary:not(.badge),
.admin-dark-page .bg-body:not(.badge),
.admin-dark-page .bg-light:not(.badge),
.admin-dark-page .bg-white:not(.badge) {
    background-color: rgba(255,255,255,0.04) !important;
    color: #e0e9f8;
}

/* text helpers that go invisible on dark */
.admin-dark-page .text-muted { color: rgba(255,255,255,0.55) !important; }
.admin-dark-page .text-dark { color: #cfe2ff !important; }
.admin-dark-page h2,
.admin-dark-page h3,
.admin-dark-page h6 { color: #fff; }

/* tables */
.admin-dark-page .table {
    color: #e0e9f8;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-striped-color: #e0e9f8;
    --bs-table-color: #e0e9f8;
}
.admin-dark-page .table > :not(caption) > * > * {
    border-bottom-color: rgba(255,255,255,0.08);
}
.admin-dark-page .table thead.table-dark th {
    background: #0d1b30;
    color: #cfe2ff;
}

/* pill tabs */
.admin-dark-page .nav-pills .nav-link {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    margin-right: 0.35rem;
}
.admin-dark-page .nav-pills .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.admin-dark-page .nav-pills .nav-link.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* progress bars sit on a subtle dark track */
.admin-dark-page .progress {
    background: rgba(255,255,255,0.10);
}

/* ── Extended dark overrides for embedded admin pages (System Logs, System
   Reports, Database Maintenance). Scoped under .admin-dark-page so the rest of
   the app is unaffected. Covers the Bootstrap widgets those pages rely on. */

/* underline (nav-tabs) style tabs used by System Logs */
.admin-dark-page .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.14);
}
.admin-dark-page .nav-tabs .nav-link {
    color: rgba(255,255,255,0.70);
    border-color: transparent;
}
.admin-dark-page .nav-tabs .nav-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.18) rgba(255,255,255,0.18) transparent;
}
.admin-dark-page .nav-tabs .nav-link.active {
    color: #fff;
    background: rgba(13,110,253,0.18);
    border-color: rgba(255,255,255,0.18) rgba(255,255,255,0.18) transparent;
}

/* form controls / selects / inputs */
.admin-dark-page .form-control,
.admin-dark-page .form-select {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.18);
    color: #e0e9f8;
}
.admin-dark-page .form-control::placeholder { color: rgba(255,255,255,0.45); }
.admin-dark-page .form-control:focus,
.admin-dark-page .form-select:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(13,110,253,0.65);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.20);
}
.admin-dark-page .form-select option { background: #0a1628; color: #e0e9f8; }
.admin-dark-page .form-label,
.admin-dark-page .form-check-label,
.admin-dark-page .col-form-label { color: #cfe2ff; }
.admin-dark-page .form-text { color: rgba(255,255,255,0.50); }

/* input groups */
.admin-dark-page .input-group-text {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: #cfe2ff;
}

/* list groups */
.admin-dark-page .list-group-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: #e0e9f8;
}

/* alerts keep their semantic hue but sit on a translucent dark surface */
.admin-dark-page .alert {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: #e0e9f8;
}
.admin-dark-page .alert-success { border-left: 4px solid rgba(25,135,84,0.9); }
.admin-dark-page .alert-danger { border-left: 4px solid rgba(220,53,69,0.9); }
.admin-dark-page .alert-warning { border-left: 4px solid rgba(255,193,7,0.9); }
.admin-dark-page .alert-info { border-left: 4px solid rgba(13,202,240,0.9); }

/* muted secondary badges need contrast on dark */
.admin-dark-page .badge.bg-light { color: #0a1628 !important; }
.admin-dark-page .badge.bg-secondary { background: rgba(255,255,255,0.22) !important; }

/* pagination */
.admin-dark-page .page-link {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: #cfe2ff;
}
.admin-dark-page .page-item.active .page-link {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
.admin-dark-page .page-item.disabled .page-link {
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.35);
}

/* modals rendered within an embedded page */
.admin-dark-page .modal-content {
    background: #0b1424;
    border: 1px solid rgba(255,255,255,0.14);
    color: #e0e9f8;
}
.admin-dark-page .modal-header,
.admin-dark-page .modal-footer {
    border-color: rgba(255,255,255,0.12);
}

/* outline buttons that vanish on dark */
.admin-dark-page .btn-outline-secondary {
    color: #cfe2ff;
    border-color: rgba(255,255,255,0.30);
}
.admin-dark-page .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* report tiles (System Reports) — translucent surface + light text on dark */
.admin-dark-page .report-tile {
    background: rgba(255,255,255,0.04);
}
.admin-dark-page .report-tile .card-title { color: #fff; }

/* ── Global Overview: sleek console-matched chrome ──────────────────────────
   Standalone hero banner (mirrors the Command Center hero, sized to sit inside
   the .admin-dark-page padding). Hidden when the Overview is embedded in a tab. */
.ov-hero {
    background: linear-gradient(135deg, #0a1628 0%, #0d2b4e 50%, #0a1628 100%);
    border: 1px solid rgba(13,110,253,0.25);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
}

/* KPI strip reusing the Command Center's .fhcc-kpi tiles */
.ov-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* When the Overview is hosted inside a Command Center tab, drop the standalone
   full-height dark canvas so it inherits the console's page chrome and aligns
   with the console tab strip. Declared after .admin-dark-page to win the cascade. */
.admin-dark-embedded {
    margin: 0;
    padding: 1rem 1.75rem 2rem calc(var(--toggle-size, 40px) + 0.75rem);
    min-height: 0;
    background: transparent;
}

/* =============================================================================
   Listener Diagnostics Modal  (ldiag-*)
   Dark-terminal aesthetic; embedded inside the SuperAdmin listener table.
============================================================================= */

/* ---- Overlay ---- */
.ldiag-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

/* ---- Modal shell ---- */
.ldiag-modal {
    width: 100%;
    max-width: 1380px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 96px rgba(0,0,0,0.85);
    font-family: 'Cascadia Code', 'Consolas', 'Fira Mono', monospace;
    font-size: .82rem;
    color: #c9d1d9;
    overflow: hidden;
}

/* ---- Header bar ---- */
.ldiag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    background: linear-gradient(135deg, #161b22 0%, #1c2130 100%);
    border-bottom: 1px solid #30363d;
    gap: 1rem;
}
.ldiag-header .btn-close-white { opacity: .65; }
.ldiag-header .btn-close-white:hover { opacity: 1; }

/* ---- KPI strip ---- */
.ldiag-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #30363d;
    background: #0d1117;
}
.ldiag-kpi {
    flex: 1 1 130px;
    padding: .8rem 1rem;
    border-right: 1px solid #21262d;
    text-align: center;
    min-width: 110px;
    transition: background .15s;
}
.ldiag-kpi:last-child { border-right: none; }
.ldiag-kpi:hover { background: rgba(255,255,255,.02); }
.ldiag-kpi-val {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #c9d1d9;
    font-variant-numeric: tabular-nums;
}
.ldiag-kpi-lbl {
    font-size: .67rem;
    color: #8b949e;
    margin-top: .25rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ldiag-kpi-warn  { background: rgba(255,168,92,.05); }
.ldiag-kpi-error { background: rgba(218,54,51,.06); }

/* ---- Chart row ---- */
.ldiag-chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #30363d;
    background: #080c11;
}
.ldiag-chart-panel {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 8px 12px 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ldiag-chart-wide   { flex: 2 1 280px; }
.ldiag-chart-narrow { flex: 1 1 200px; }
.ldiag-chart-canvas-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 140px;
    max-height: 170px;
}
.ldiag-chart-canvas-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ---- Body layout (devices left, log right) ---- */
.ldiag-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}

/* ---- Device panel ---- */
.ldiag-devices {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid #21262d;
    padding: .9rem 1rem;
    overflow-y: auto;
    max-height: 62vh;
}
.ldiag-section-title {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8b949e;
    margin-bottom: .65rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
}
.ldiag-empty {
    color: #8b949e;
    font-size: .8rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.ldiag-dev-row {
    margin-bottom: .6rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    background: #161b22;
    border: 1px solid #21262d;
    transition: border-color .15s;
}
.ldiag-dev-row:hover { border-color: #388bfd44; }
.ldiag-dev-excessive { border-color: rgba(255,168,92,.4); background: rgba(255,168,92,.04); }
.ldiag-dev-imei  { font-size: .78rem; color: #7dcfff; word-break: break-all; }
.ldiag-dev-count { font-size: .72rem; color: #c9d1d9; white-space: nowrap; margin-left: .5rem; }
.ldiag-dev-bar-bg {
    height: 4px;
    background: #21262d;
    border-radius: 2px;
    overflow: hidden;
    margin-top: .35rem;
}
.ldiag-dev-bar {
    height: 100%;
    background: linear-gradient(90deg, #1f6feb, #388bfd);
    border-radius: 2px;
    transition: width .4s ease;
}
.ldiag-dev-bar-warn { background: linear-gradient(90deg, #d29922, #ffa85c); }

/* ---- Log panel shell ---- */
.ldiag-log {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Log toolbar (above the column header) ---- */
.ldiag-log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .55rem 1rem .4rem;
    background: #161b22;
    border-bottom: 1px solid #21262d;
}
.ldiag-log-filename {
    font-size: .7rem;
    color: #8b949e;
    font-family: 'Cascadia Code', monospace;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: .1rem .45rem;
}
.ldiag-log-filters {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}
.ldiag-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 4px;
    border: 1px solid #30363d;
    background: #0d1117;
    color: #8b949e;
    cursor: pointer;
    transition: all .15s;
}
.ldiag-filter-btn:hover   { color: #c9d1d9; border-color: #58a6ff; background: #1c2130; }
.ldiag-filter-btn.active  { background: #1f2d45; border-color: #388bfd; color: #7dcfff; }
.ldiag-filter-inf.active  { background: #0e2040; border-color: #1f6feb; color: #7dcfff; }
.ldiag-filter-wrn.active  { background: #2d1f00; border-color: #d29922; color: #e3b341; }
.ldiag-filter-err.active  { background: #2d0c0c; border-color: #da3633; color: #f85149; }
.ldiag-filter-dbg.active  { background: #161b22; border-color: #3d444d; color: #6e7681; }
.ldiag-filter-count {
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 0 .4rem;
    font-size: .62rem;
}

/* ---- Column header row ---- */
.ldiag-log-header-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .25rem .6rem;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6e7681;
    flex-shrink: 0;
}

/* ---- Shared column widths (header + log rows must match) ---- */
.ldiag-col-ts  { flex-shrink: 0; width: 8rem;  }
.ldiag-col-lvl { flex-shrink: 0; width: 3.6rem; }
.ldiag-col-msg { flex: 1 1 0%; min-width: 0; }

/* ---- Scrollable log body ---- */
.ldiag-log-viewer {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 56vh;
    background: #0d1117;
    padding: 0;
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
    font-size: .75rem;
}
.ldiag-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: #8b949e;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: .82rem;
}

/* ---- Log rows ---- */
.ldiag-line {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: .2rem .6rem;
    border-left: 3px solid transparent;
    line-height: 1.45;
    word-break: break-word;
    transition: background .08s;
}
.ldiag-line:hover { background: rgba(255,255,255,.035) !important; }
.ldiag-line-even  { background: transparent; }
.ldiag-line-odd   { background: rgba(255,255,255,.018); }

.ldiag-line-inf { border-left-color: #1f6feb; }
.ldiag-line-dbg { border-left-color: #3d444d; color: #6e7681; }
.ldiag-line-wrn { border-left-color: #d29922; background: rgba(210,153,34,.04) !important; }
.ldiag-line-err { border-left-color: #da3633; background: rgba(218,54,51,.05) !important; }
.ldiag-line-cont {
    border-left-color: transparent;
    padding-left: 12rem;   /* ts col(8rem) + lvl col(3.6rem) + row padding(0.4rem) ≈ 12rem */
    color: #6e7681;
    font-size: .72rem;
    background: transparent !important;
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
}

/* ---- Timestamp ---- */
.ldiag-ts {
    color: #484f58;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ---- Level badge pill ---- */
.ldiag-lvl-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .05rem .35rem;
    border-radius: 3px;
    line-height: 1.4;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.ldiag-lvl-inf { background: rgba(31,111,235,.18);  color: #58a6ff; border: 1px solid rgba(31,111,235,.3); }
.ldiag-lvl-dbg { background: rgba(61,68,77,.25);    color: #6e7681; border: 1px solid rgba(61,68,77,.4);  }
.ldiag-lvl-wrn { background: rgba(210,153,34,.18);  color: #e3b341; border: 1px solid rgba(210,153,34,.3);}
.ldiag-lvl-err { background: rgba(218,54,51,.2);    color: #f85149; border: 1px solid rgba(218,54,51,.35);}
.ldiag-lvl-ftl { background: rgba(255,68,68,.25);   color: #ff6e6e; border: 1px solid rgba(255,68,68,.4); font-weight: 900; }

/* ---- Message column content ---- */
.ldiag-msg { flex: 1 1 0%; min-width: 0; padding-left: .3rem; }

/* ---- Inline token highlighting ---- */
.ldiag-token { color: #c3e88d; font-weight: 600; }                    /* ALL_CAPS event token   */
.ldiag-ip    { color: #ff9070; text-decoration: underline dotted rgba(255,144,112,.4); } /* IP address */
.ldiag-imei  { color: #ffd580; letter-spacing: .03em; }               /* 15-17 digit IMEI       */
.ldiag-hex   { color: #bb9af7; }                                       /* 0xHEX literal          */
.ldiag-kv    { white-space: nowrap; }
.ldiag-k     { color: #7dcfff; }
.ldiag-v     { color: #c3e88d; }
.ldiag-str   { color: #9ece6a; }                                       /* "quoted string"        */

/* ---- Spinning refresh icon ---- */
@keyframes ldiag-spin {
    to { transform: rotate(360deg); }
}
.ldiag-spin { display: inline-block; animation: ldiag-spin .75s linear infinite; }

/* ====================================================================== */
/* ldiag responsive - listener diagnostics / log viewer on small screens  */
/* The modal body is a fixed horizontal flex (device panel + log columns); */
/* on phones we stack it vertically and collapse the fixed column widths.  */
/* ====================================================================== */
@media (max-width: 768px) {
	.ldiag-overlay {
		padding: .5rem;
		align-items: stretch;
	}

	.ldiag-modal {
		max-width: 100%;
		border-radius: 8px;
		font-size: .8rem;
	}

	/* Header wraps so the title and action buttons do not collide. */
	.ldiag-header {
		flex-wrap: wrap;
		gap: .5rem;
		padding: .6rem .85rem;
	}

	/* KPI tiles: 2 per row instead of a single overflowing strip. */
	.ldiag-kpi {
		flex: 1 1 45%;
		min-width: 45%;
		padding: .6rem .5rem;
	}
	.ldiag-kpi-val { font-size: 1.2rem; }

	/* Charts stack full-width and shorten. */
	.ldiag-chart-row { padding: 8px; gap: 8px; }
	.ldiag-chart-wide,
	.ldiag-chart-narrow { flex: 1 1 100%; }
	.ldiag-chart-canvas-wrap { min-height: 120px; max-height: 150px; }

	/* Core fix: stack device panel above the log instead of side by side. */
	.ldiag-body {
		flex-direction: column;
	}
	.ldiag-devices {
		width: 100%;
		flex-shrink: 1;
		border-right: none;
		border-bottom: 1px solid #21262d;
		max-height: 32vh;
	}
	.ldiag-log {
		width: 100%;
	}

	/* Log toolbar + filter buttons wrap and shrink. */
	.ldiag-log-toolbar { padding: .5rem .6rem; }
	.ldiag-log-filters { width: 100%; }
	.ldiag-filter-btn { font-size: .62rem; padding: .18rem .4rem; }
	.ldiag-log-filename {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Collapse the fixed log columns so the message gets the room it needs. */
	.ldiag-col-ts  { width: 5.5rem; }
	.ldiag-col-lvl { width: 2.8rem; }
	.ldiag-ts      { font-size: .66rem; }
	.ldiag-log-header-row { padding: .25rem .5rem; }
	.ldiag-line    { padding: .2rem .5rem; }
	.ldiag-log-viewer { font-size: .7rem; max-height: 42vh; }

	/* Continuation (stack-trace) lines: indent must shrink to match columns,
	   otherwise wrapped text is pushed off-screen on a phone. */
	.ldiag-line-cont {
		padding-left: 1rem;
		border-left: 2px solid #21262d;
		font-size: .68rem;
	}
}

/* Extra-narrow phones: drop the timestamp column entirely; keep level + msg. */
@media (max-width: 480px) {
	.ldiag-kpi { flex: 1 1 100%; min-width: 100%; }
	.ldiag-col-ts,
	.ldiag-log-header-row .ldiag-col-ts { display: none; }
	.ldiag-line-cont { padding-left: .75rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark mode: adapt structural light surfaces to the dark palette.
   Bootstrap's .bg-light / .bg-white utilities pin a fixed light color and do
   NOT respond to [data-bs-theme=dark], so panels, cards and wells that use them
   become unreadable in dark mode. Remap them here. Badges (.badge.bg-light /
   .badge.bg-white) are intentional light chips with dark text, so they are
   excluded from the flip and re-asserted below to stay light for contrast.
   These generic rules are placed BEFORE the specific .marisat-main /
   .marisat-topbar rules so those keep their tuned values via source order.
   ────────────────────────────────────────────────────────────────────────── */
[data-bs-theme=dark] .bg-light:not(.badge),
[data-bs-theme=dark] .bg-white:not(.badge) {
	background-color: #23272b !important;
	color: #e9ecef;
	border-color: #343a40;
}

/* Keep small light chips readable (dark text on a light chip) in dark mode. */
[data-bs-theme=dark] .badge.bg-light,
[data-bs-theme=dark] .badge.bg-white {
	background-color: #e9ecef !important;
	color: #212529 !important;
}

/* Honor explicit light subtrees even when nested under a dark root. A closer
   data-bs-theme=light ancestor (e.g. an always-light preview) should win. These
   sit after the dark rules with equal specificity, so source order applies. */
[data-bs-theme=light] .bg-light:not(.badge) {
	background-color: #f8f9fa !important;
	color: #212529;
	border-color: #dee2e6;
}

[data-bs-theme=light] .bg-white:not(.badge) {
	background-color: #fff !important;
	color: #212529;
	border-color: #dee2e6;
}

/* Dark mode: .table-light headers/rows pin light Bootstrap table variables that
   don't respond to the theme, leaving pale bands with light text. Remap the
   table CSS variables so these blend with the dark table body. */
[data-bs-theme=dark] .table-light,
[data-bs-theme=dark] .table-light > th,
[data-bs-theme=dark] .table-light > td,
[data-bs-theme=dark] thead.table-light th,
[data-bs-theme=dark] tr.table-light > * {
	--bs-table-color: #e9ecef;
	--bs-table-bg: #2b3035;
	--bs-table-border-color: #3a3f44;
	color: #e9ecef;
	background-color: #2b3035;
	border-color: #3a3f44;
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark mode overrides for custom classes that use fixed light colors.
   Bootstrap 5.3 themes its own components via [data-bs-theme=dark]; these rules
   cover the app's bespoke surfaces that Bootstrap utilities don't adapt.
   ────────────────────────────────────────────────────────────────────────── */
[data-bs-theme=dark] .marisat-main.bg-light {
	background-color: #1a1d21 !important;
}

[data-bs-theme=dark] .marisat-topbar.bg-white {
	background-color: #23272b !important;
	color: #e9ecef;
}

/* Dark-mode overrides: Google Maps InfoWindow chrome */
[data-bs-theme=dark] .gm-style .gm-style-iw-c {
	background-color: #2b2f33 !important;
	color: #e9ecef !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.7) !important;
}

[data-bs-theme=dark] .gm-style .gm-style-iw-d {
	overflow: hidden !important;
}

[data-bs-theme=dark] .gm-style .gm-style-iw-t::after {
	background: linear-gradient(45deg, #2b2f33 50%, rgba(43,47,51,0) 51%, rgba(43,47,51,0) 100%) !important;
}

[data-bs-theme=dark] .gm-style .gm-style-iw-c .gm-ui-hover-effect span {
	background-color: #adb5bd !important;
}

/* Dark-mode overrides: InfoWindow content classes */
[data-bs-theme=dark] .marisat-iw {
	color: #e9ecef;
}

[data-bs-theme=dark] .marisat-iw-title {
	border-bottom-color: #495057;
	color: #f8f9fa;
}

[data-bs-theme=dark] .marisat-iw-label {
	color: #adb5bd;
}

[data-bs-theme=dark] .marisat-iw-coords {
	color: #adb5bd;
}

/* Dark-mode card chrome for the floating hover balloon, mirroring the dark InfoWindow look */
[data-bs-theme=dark] .marisat-hover-balloon {
	background: #2b2f33;
	box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Dark-mode overrides: balloon mini-dashboard */
[data-bs-theme=dark] .marisat-iw-speedo-track { stroke: rgba(255,255,255,0.12); }
[data-bs-theme=dark] .marisat-iw-speedo-tick { stroke: rgba(255,255,255,0.22); }
[data-bs-theme=dark] .marisat-iw-speedo-tick.is-major { stroke: rgba(255,255,255,0.45); }
[data-bs-theme=dark] .marisat-iw-speedo-unit { fill: #adb5bd; }

[data-bs-theme=dark] .marisat-iw-kpi {
	background: #2b3035;
}

[data-bs-theme=dark] .marisat-iw-kpi-label,
[data-bs-theme=dark] .marisat-iw-section-label,
[data-bs-theme=dark] .marisat-iw-alert-time,
[data-bs-theme=dark] .marisat-iw-alerts-empty {
	color: #adb5bd;
}

[data-bs-theme=dark] .marisat-iw-kpi-value {
	color: #f8f9fa;
}

[data-bs-theme=dark] .marisat-iw-chart {
	background: #212529;
	border-color: #495057;
}

[data-bs-theme=dark] .marisat-iw-chart-baseline { stroke: rgba(255,255,255,0.2); }

[data-bs-theme=dark] .marisat-iw-alerts-list li {
	border-bottom-color: #343a40;
}

[data-bs-theme=dark] .marisat-iw-dash .marisat-iw-table {
	border-top-color: #495057;
}

/* Green label balloon gets extra shadow depth in dark mode so it pops off dark map tiles */
[data-bs-theme=dark] .marisat-balloon-body {
	box-shadow: 0 1px 5px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12);
}



[data-bs-theme=dark] .marisat-topbar .text-muted {
	color: #adb5bd !important;
}

/* Live tracking telemetry panel (speedometer + ignition + alerts) */
.live-telemetry-overlay {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 1rem;
}

.telemetry-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	padding: 8px 10px;
}

[data-bs-theme=dark] .telemetry-card {
	background: rgba(33, 37, 41, 0.92);
	color: #e9ecef;
}

/* Speedometer + device details side-by-side layout */
.telemetry-main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.telemetry-gauge {
	flex: 0 0 132px;
	max-width: 132px;
}

.telemetry-gauge .speedo-wrap { max-width: 132px; }
.telemetry-gauge .speedo-value { font-size: 1.25rem; }
.telemetry-gauge .speedo-label { font-size: 0.72rem; margin-top: 0.2rem; }
.telemetry-gauge .speedo-unit { font-size: 0.6rem; }
.telemetry-gauge .speedo-scale { font-size: 0.55rem; }
.telemetry-gauge .speedo-readout { bottom: 58px; }

.telemetry-details {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.75rem;
	line-height: 1.3;
}

.telemetry-device {
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.telemetry-stat {
	display: flex;
	justify-content: space-between;
	gap: 6px;
}

.telemetry-stat-label {
	color: #6c757d;
	font-weight: 600;
}

[data-bs-theme=dark] .telemetry-stat-label { color: #adb5bd; }

.telemetry-status.is-online { color: #198754; font-weight: 700; }
.telemetry-status.is-offline { color: #6c757d; font-weight: 700; }

.telemetry-location {
	margin-top: 4px;
	color: #6c757d;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-bs-theme=dark] .telemetry-location { color: #adb5bd; }

.telemetry-ignition { margin-top: 8px; }

/* The speedometer was authored for the dark System Command Center, so its
   track/ticks/labels are hardcoded white. Inside the light telemetry card we
   override them to dark ink; dark mode restores the original white treatment. */
.telemetry-card .speedo-track { stroke: rgba(0, 0, 0, 0.10); }
.telemetry-card .speedo-tick { stroke: rgba(0, 0, 0, 0.25); }
.telemetry-card .speedo-tick-major { stroke: rgba(0, 0, 0, 0.45); }
.telemetry-card .speedo-unit { color: rgba(0, 0, 0, 0.5); }
.telemetry-card .speedo-label { color: #212529; }
.telemetry-card .speedo-scale { color: rgba(0, 0, 0, 0.45); }
.telemetry-card .speedo-hub-dot { fill: #fff; }

[data-bs-theme=dark] .telemetry-card .speedo-track { stroke: rgba(255, 255, 255, 0.10); }
[data-bs-theme=dark] .telemetry-card .speedo-tick { stroke: rgba(255, 255, 255, 0.22); }
[data-bs-theme=dark] .telemetry-card .speedo-tick-major { stroke: rgba(255, 255, 255, 0.45); }
[data-bs-theme=dark] .telemetry-card .speedo-unit { color: rgba(255, 255, 255, 0.45); }
[data-bs-theme=dark] .telemetry-card .speedo-label { color: #fff; }
[data-bs-theme=dark] .telemetry-card .speedo-scale { color: rgba(255, 255, 255, 0.4); }
[data-bs-theme=dark] .telemetry-card .speedo-hub-dot { fill: #0a1628; }

/* Ignition light */
.ignition-light {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 600;
}

.ignition-bulb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #111;
	border: 1px solid #000;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
}

.ignition-bulb.ignition-on {
	background: #00e676;
	border-color: #00b257;
	box-shadow: 0 0 8px 2px rgba(0, 230, 118, 0.7);
}

/* Alerts mini panel */
.alerts-mini-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.72rem;
	line-height: 1.25;
}

.alerts-mini-list li {
	padding: 2px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-bs-theme=dark] .alerts-mini-list li {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.alerts-mini-list li:last-child {
	border-bottom: none;
}

.alerts-mini-empty {
	font-size: 0.72rem;
	color: #6c757d;
}

.alerts-spark {
	display: block;
	width: 100%;
	height: 34px;
}

/* -- Live Tracking: "Distance from Service Vehicle" map overlay -- */
.svc-distance-overlay {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 5;
	width: 260px;
	max-width: 60%;
	padding: 0.6rem 0.7rem;
	border-radius: 8px;
	background: rgba(17, 24, 39, 0.5);
	color: #f8f9fa;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(2px);
	font-size: 0.8rem;
}
.svc-distance-title {
	font-weight: 600;
	margin-bottom: 0.4rem;
	font-size: 0.82rem;
}
.svc-distance-list {
	max-height: 168px;
	overflow-y: auto;
}
.svc-distance-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0.35rem;
	border-radius: 4px;
	cursor: pointer;
}
.svc-distance-row:hover {
	background: rgba(255, 255, 255, 0.12);
}
.svc-distance-row.active {
	background: rgba(13, 110, 253, 0.45);
}
.svc-distance-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.svc-distance-value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}
.svc-distance-empty {
	color: rgba(255, 255, 255, 0.65);
	font-style: italic;
	padding: 0.2rem 0.35rem;
}
.svc-distance-note {
	margin-top: 0.45rem;
	padding-top: 0.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.25;
}

/* ============================================================
   In-place map full screen (Live Tracking)
   Toggled by adding the .marisat-map-fullscreen class (driven by
   Blazor component state) instead of opening a popup window, which
   iOS Safari blocks from a Blazor @onclick. The map element is
   pinned to the whole viewport so the SAME map (markers, route,
   geozones, live refresh) simply grows in place.
   ============================================================ */

/* Normal (non-fullscreen) size for the Live Tracking map. This lives in a
   class rather than an inline style so the #liveMap.marisat-map-fullscreen
   rule below can override the height (an inline style would always win). */
.live-map {
	height: 75vh;
	border-radius: 8px;
}

/* Native HTML5 fullscreen (the preferred path, via marisatMap.enterFullscreen).
   The browser promotes .live-map-fs-target (the wrapper holding the map + Exit
   button) to the top layer and sizes IT to the physical screen. The inner
   #liveMap still has height:75vh from .live-map, so make it fill the wrapper or
   the map would only occupy the top portion of the fullscreen surface. :fullscreen
   matches only while a native session is active, so these rules never affect the
   normal (windowed) layout. */
.live-map-fs-target:fullscreen {
	width: 100%;
	height: 100%;
}

.live-map-fs-target:fullscreen #liveMap.live-map {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* WebKit-prefixed equivalents for older Safari/Chromium. Kept as a separate rule
   block because an unrecognized :-webkit-full-screen selector would invalidate the
   whole comma-joined group in standards-compliant browsers. */
.live-map-fs-target:-webkit-full-screen {
	width: 100%;
	height: 100%;
}

.live-map-fs-target:-webkit-full-screen #liveMap.live-map {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

#liveMap.marisat-map-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* 100dvh tracks the dynamic viewport so the iOS toolbar collapsing
	   doesn't leave a gap; vh is the fallback for older browsers. */
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	/* CSS fallback only (applied when the native Fullscreen API is unavailable,
	   e.g. iPhone Safari). Must sit above the app chrome: the sidebar is z-index
	   1100 and the hamburger toggle is 1200, so a lower value let them cover the
	   map. Note: a fixed element is trapped inside any ancestor that has a
	   transform/filter, which is exactly why the native API is preferred when
	   available — it escapes that trap and fills the physical screen. */
	z-index: 2000;
}

/* Lock background scroll while the map owns the screen. */
body.marisat-map-fullscreen-active {
	overflow: hidden;
}

/* While the map owns the whole window, hide the sidebar, hamburger toggle and
   mobile overlay so nothing renders on top of the full screen map. The class is
   on <body> (toggled by marisat-map.js) so these rules reach the layout chrome,
   which lives outside the Live Tracking component's own render tree. */
body.marisat-map-fullscreen-active .marisat-sidebar,
body.marisat-map-fullscreen-active .sidebar-toggle,
body.marisat-map-fullscreen-active .sidebar-overlay {
	display: none !important;
}

/* Floating controls shown over the expanded map (the page header is covered
   while full screen, so the user needs an in-map way out AND the live refresh
   countdown). Pinned top-left because Google's map-type and fullscreen controls
   occupy the top-right corner. Must sit above the map's own z-index (2000) so it
   stays tappable/visible while the map owns the window. As a descendant of the
   fullscreened wrapper it also renders in the browser's top layer during native
   fullscreen, so the same markup works for both the native and CSS-fallback paths. */
.marisat-fs-controls {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 2010;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.marisat-fs-exit {
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Live-refresh countdown shown beside the Exit button while full screen. Sized
   up from the default badge so it's readable at arm's length on a phone. */
.marisat-fs-countdown {
	font-size: 0.9rem;
	padding: 0.5rem 0.6rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Kiosk full-screen window (Live Tracking on iOS / no native FS)
   The Full Screen button opens /gps/live?kiosk=1 in a new window.
   That window renders ONLY the live map; these rules hide the app
   shell and pin the map to the whole viewport so it fills the
   dedicated window exactly like desktop native fullscreen does.
   Toggled by marisat-map.js adding .marisat-kiosk-active to <body>.
   ============================================================ */
body.marisat-kiosk-active {
	overflow: hidden;
}

/* Hide every piece of app chrome so the kiosk window is map-only. The classes
   live on the layout shell (outside the Live Tracking component), so target them
   from <body>. */
body.marisat-kiosk-active .marisat-sidebar,
body.marisat-kiosk-active .sidebar-toggle,
body.marisat-kiosk-active .sidebar-overlay,
body.marisat-kiosk-active .marisat-topbar {
	display: none !important;
}

/* Collapse the shell/main padding so the map can reach every edge. */
body.marisat-kiosk-active .marisat-main > .p-4 {
	padding: 0 !important;
}

/* Pin the kiosk map to the whole viewport. 100dvh tracks the dynamic viewport so
   the iOS toolbar collapsing doesn't leave a gap; vh is the fallback. */
.marisat-kiosk-map.live-map {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	z-index: 2000;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CLIENT ENGAGEMENT WIZARD (TurboTax-style guided setup)
   ══════════════════════════════════════════════════════════════════════════════ */
.cew-page {
	padding: 1rem 1.25rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.cew-hero {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	border-radius: 1rem;
	background: linear-gradient(120deg, #0b3d66 0%, #1470a3 100%);
	color: #fff;
	margin-bottom: 1.25rem;
}

.cew-hero-title {
	font-size: 1.35rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.cew-hero-sub {
	opacity: .85;
	font-size: .9rem;
	margin-top: .15rem;
}

.cew-hero-client {
	text-align: right;
	background: rgba(255, 255, 255, .12);
	border-radius: .7rem;
	padding: .5rem .9rem;
}

.cew-hero-client-num {
	font-size: .75rem;
	letter-spacing: .04em;
	opacity: .85;
}

.cew-hero-client-name {
	font-weight: 700;
}

.cew-body {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.25rem;
	align-items: start;
}

.cew-rail {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	position: sticky;
	top: 1rem;
}

.cew-rail-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: none;
	border: none;
	border-radius: .6rem;
	padding: .55rem .7rem;
	text-align: left;
	color: #5a6675;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.cew-rail-item:hover:not(:disabled) {
	background: rgba(20, 112, 163, .08);
}

.cew-rail-item:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.cew-rail-item--current {
	background: rgba(20, 112, 163, .12);
	color: #0b3d66;
	font-weight: 700;
}

.cew-rail-item--done {
	color: #1a8a4a;
}

.cew-rail-ico {
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 112, 163, .12);
	font-size: .85rem;
	flex-shrink: 0;
}

.cew-rail-item--done .cew-rail-ico {
	background: #1a8a4a;
	color: #fff;
}

.cew-rail-item--current .cew-rail-ico {
	background: #1470a3;
	color: #fff;
}

.cew-rail-label {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.cew-rail-opt {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .6;
	font-weight: 400;
}

.cew-main {
	background: #fff;
	border: 1px solid #e6eaef;
	border-radius: 1rem;
	padding: 1.5rem;
	min-height: 340px;
	display: flex;
	flex-direction: column;
}

.cew-step {
	flex: 1;
}

.cew-step-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: #0b3d66;
	margin-bottom: .35rem;
}

.cew-step-help {
	color: #6b7684;
	font-size: .9rem;
	margin-bottom: 1.1rem;
}

.cew-search-row {
	display: flex;
	gap: .6rem;
	margin-bottom: 1rem;
}

.cew-input {
	width: 100%;
	border: 1px solid #cfd6de;
	border-radius: .55rem;
	padding: .5rem .7rem;
	font-size: .92rem;
}

.cew-input:focus {
	outline: none;
	border-color: #1470a3;
	box-shadow: 0 0 0 3px rgba(20, 112, 163, .15);
}

.cew-lbl {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: #55606d;
	margin-bottom: .25rem;
}

.cew-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
}

.cew-col2 {
	grid-column: 1 / -1;
}

.cew-card {
	border: 1px solid #e6eaef;
	border-radius: .8rem;
	padding: 1rem;
	background: #f9fbfd;
}

.cew-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	color: #0b3d66;
	margin-bottom: .75rem;
}

.cew-acct-preview {
	font-size: .78rem;
	background: #e3f0f8;
	color: #0b3d66;
	padding: .2rem .55rem;
	border-radius: .5rem;
}

.cew-results {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	max-height: 320px;
	overflow-y: auto;
}

.cew-result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #f9fbfd;
	border: 1px solid #e6eaef;
	border-radius: .6rem;
	padding: .55rem .8rem;
	cursor: pointer;
	text-align: left;
}

.cew-result:hover {
	border-color: #1470a3;
}

.cew-result--sel {
	border-color: #1470a3;
	background: #e9f4fb;
}

.cew-result-name {
	font-weight: 600;
	color: #23303d;
}

.cew-result-meta {
	font-size: .78rem;
	color: #7b8694;
}

.cew-selected {
	margin-top: 1rem;
	padding: .6rem .9rem;
	background: #e9f7ef;
	border-radius: .6rem;
	color: #1a7a44;
	font-size: .9rem;
}

.cew-selected i {
	margin-right: .35rem;
}

.cew-picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
}

.cew-pick {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: .6rem;
	align-items: center;
	border: 1.5px solid #e0e6ec;
	border-radius: .8rem;
	padding: .9rem 1rem;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.cew-pick:hover {
	border-color: #1470a3;
}

.cew-pick--on {
	border-color: #1470a3;
	background: #eaf4fb;
}

.cew-pick--off {
	opacity: .5;
	cursor: not-allowed;
}

.cew-pick input {
	grid-row: 1 / span 2;
	width: 1.15rem;
	height: 1.15rem;
}

.cew-pick i {
	font-size: 1.1rem;
	color: #1470a3;
	grid-column: 2;
}

.cew-pick-t {
	grid-column: 2;
	font-weight: 700;
	color: #23303d;
}

.cew-pick-d {
	grid-column: 2;
	font-size: .8rem;
	color: #7b8694;
}

.cew-hint {
	margin-top: 1rem;
	padding: .6rem .9rem;
	background: #fff7e6;
	border-radius: .6rem;
	color: #8a6d1a;
	font-size: .88rem;
}

.cew-items {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-height: 360px;
	overflow-y: auto;
}

.cew-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #e6eaef;
	border-radius: .6rem;
	padding: .5rem .8rem;
}

.cew-item-info {
	display: flex;
	flex-direction: column;
}

.cew-item-name {
	font-weight: 600;
	color: #23303d;
}

.cew-item-meta {
	font-size: .78rem;
	color: #7b8694;
}

.cew-qty {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.cew-qty-btn {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: .45rem;
	border: 1px solid #cfd6de;
	background: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.cew-qty-btn:hover {
	border-color: #1470a3;
	color: #1470a3;
}

.cew-qty-val {
	min-width: 1.6rem;
	text-align: center;
	font-weight: 600;
}

.cew-cart-total {
	text-align: right;
	margin-top: .8rem;
	font-size: 1rem;
}

.cew-addons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.cew-addon {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 1px solid #e0e6ec;
	border-radius: 2rem;
	padding: .35rem .8rem;
	font-size: .85rem;
	cursor: pointer;
}

.cew-addon--on {
	border-color: #1470a3;
	background: #eaf4fb;
}

.cew-addon-price {
	color: #7b8694;
	font-size: .78rem;
}

.cew-nights {
	display: flex;
	align-items: center;
	color: #1470a3;
	font-weight: 600;
	font-size: .9rem;
}

.cew-summary {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.cew-sum-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: #f9fbfd;
	border: 1px solid #e6eaef;
	border-radius: .6rem;
	padding: .65rem .9rem;
	color: #23303d;
}

.cew-sum-row i {
	color: #1470a3;
}

.cew-done {
	background: #e9f7ef;
	border-radius: .8rem;
	padding: 1.2rem;
}

.cew-done-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: #1a7a44;
	font-size: 1.1rem;
	margin-bottom: .7rem;
}

.cew-done-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.cew-done-list li {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: #23303d;
}

.cew-done-list i {
	color: #1a8a4a;
}

.cew-alert {
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: .6rem;
	padding: .6rem .9rem;
	margin-bottom: 1rem;
	font-size: .9rem;
}

.cew-alert--ok {
	background: #e9f7ef;
	color: #1a7a44;
}

.cew-alert--err {
	background: #fdecea;
	color: #b3261e;
}

.cew-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #eef1f4;
}

.cew-footer-right {
	display: flex;
	gap: .6rem;
}

.cew-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: none;
	border-radius: .6rem;
	padding: .55rem 1.1rem;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: none;
}

.cew-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.cew-btn--primary {
	background: #1470a3;
	color: #fff;
}

.cew-btn--primary:hover:not(:disabled) {
	background: #0f5c88;
}

.cew-btn--ghost {
	background: #f1f4f7;
	color: #4a5563;
}

.cew-btn--ghost:hover:not(:disabled) {
	background: #e4e9ee;
}

/* Fleet Hub-aligned engagement wizard palette (embedded in command-center modal) */
.cew-page--embedded .cew-main {
	background: rgba(13, 31, 50, .82);
	border: 1px solid rgba(83, 154, 218, .22);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.cew-page--embedded .cew-step-title,
.cew-page--embedded .cew-card-head,
.cew-page--embedded .cew-item-name,
.cew-page--embedded .cew-pick-t,
.cew-page--embedded .cew-done-list li,
.cew-page--embedded .cew-result-name {
	color: #e6f0fa;
}

.cew-page--embedded .cew-step-help,
.cew-page--embedded .cew-lbl,
.cew-page--embedded .cew-result-meta,
.cew-page--embedded .cew-item-meta,
.cew-page--embedded .cew-pick-d,
.cew-page--embedded .cew-addon-price {
	color: #9fb4c9;
}

.cew-page--embedded .cew-rail-item {
	color: #b5c8da;
}

.cew-page--embedded .cew-rail-item:hover:not(:disabled) {
	background: rgba(72, 143, 204, .14);
}

.cew-page--embedded .cew-rail-item--current {
	background: rgba(58, 129, 189, .25);
	color: #f2f8ff;
}

.cew-page--embedded .cew-card,
.cew-page--embedded .cew-result,
.cew-page--embedded .cew-item,
.cew-page--embedded .cew-sum-row,
.cew-page--embedded .cew-pick,
.cew-page--embedded .cew-addon,
.cew-page--embedded .cew-done {
	background: rgba(22, 45, 70, .75);
	border-color: rgba(86, 153, 210, .28);
	color: #dbe8f5;
}

.cew-page--embedded .cew-result--sel,
.cew-page--embedded .cew-pick--on,
.cew-page--embedded .cew-addon--on {
	background: rgba(46, 123, 181, .36);
	border-color: #5ea5db;
}

.cew-page--embedded .cew-selected,
.cew-page--embedded .cew-alert--ok {
	background: rgba(35, 140, 85, .22);
	color: #8ce9b8;
}

.cew-page--embedded .cew-alert--err {
	background: rgba(179, 38, 30, .28);
	color: #ffb0ab;
}

.cew-page--embedded .cew-input,
.cew-page--embedded .cew-qty-btn {
	background: rgba(8, 20, 33, .85);
	border-color: rgba(90, 152, 205, .35);
	color: #deebf8;
}

.cew-page--embedded .cew-input::placeholder {
	color: #89a0b6;
}

.cew-page--embedded .cew-btn--ghost {
	background: rgba(44, 67, 94, .85);
	color: #cfe0f1;
}

.cew-page--embedded .cew-btn--ghost:hover:not(:disabled) {
	background: rgba(59, 88, 120, .9);
}

.cew-page--embedded .cew-btn--primary {
	background: linear-gradient(120deg, #1470a3 0%, #2f8cc2 100%);
}

.cew-page--embedded .cew-btn--primary:hover:not(:disabled) {
	background: linear-gradient(120deg, #105f8a 0%, #2a7ead 100%);
}

.fhcc-quick-btn--accent {
	background: linear-gradient(120deg, #7b2ff7, #f107a3) !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none;
}

@media (max-width: 820px) {
	.cew-body {
		grid-template-columns: 1fr;
	}

	.cew-rail {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
	}

	.cew-picker,
	.cew-grid2 {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   FLEET HUB WORKSPACE / ENGAGEMENT MODALS
   Tabs and the engagement wizard open as centered pop-ups over a dimmed backdrop.
   ══════════════════════════════════════════════════════════════════════════════ */
.fhcc-modal {
	background: rgba(8, 20, 33, .55);
	backdrop-filter: blur(2px);
	z-index: 1300;
	left: var(--sidebar-width);
	width: calc(100% - var(--sidebar-width));
}

.shell--closed .fhcc-modal {
	left: var(--sidebar-collapsed-width);
	width: calc(100% - var(--sidebar-collapsed-width));
}

/* On mobile the sidebar is a drawer overlay, so the modal spans the full width. */
@media (max-width: 991.98px) {
	.fhcc-modal,
	.shell--closed .fhcc-modal {
		left: 0;
		width: 100%;
	}
}

.fhcc-modal-dialog {
	max-width: min(1200px, 96vw);
}

.fhcc-modal-content {
	border: 1px solid rgba(75, 149, 216, .28);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(75, 149, 216, .15);
	max-height: 92vh;
	background: linear-gradient(180deg, #0b1a2d 0%, #0f243b 100%);
	color: #deebf8;
}

.fhcc-modal-header {
	background: linear-gradient(120deg, #0b3d66 0%, #1470a3 100%);
	color: #fff;
	border-bottom: 1px solid rgba(120, 185, 237, .28);
	padding: .9rem 1.25rem;
}

.fhcc-modal-header .modal-title {
	font-weight: 700;
	display: flex;
	align-items: center;
}

.fhcc-modal-body {
	padding: 1.25rem;
	background: linear-gradient(180deg, #0d1f33 0%, #122941 100%);
	color: #deebf8;
	overflow-y: auto;
	/* Contain overscroll so wheel/touch scrolling doesn't chain to the page behind. */
	overscroll-behavior: contain;
}

/* Keep the same Fleet Hub styling language in both themes (slightly brighter in light mode). */
[data-bs-theme="light"] .fhcc-modal-content {
	background: linear-gradient(180deg, #10243a 0%, #16304b 100%);
}

[data-bs-theme="light"] .fhcc-modal-body {
	background: linear-gradient(180deg, #122842 0%, #173550 100%);
}

/* Dark mode keeps the same command-center palette with deeper contrast. */
[data-bs-theme="dark"] .fhcc-modal-content {
	background: linear-gradient(180deg, #091624 0%, #0d2237 100%);
}

[data-bs-theme="dark"] .fhcc-modal-body {
	background: linear-gradient(180deg, #0b1a2d 0%, #0f243b 100%);
}

/* The System Map renders white connector lines/labels, so it always needs a dark
   surface to be visible regardless of the active theme. */
.fhcc-map-tab {
	background: #0c1826;
	border-radius: .75rem;
	padding: 1rem;
	color: #e6edf5;
}

/* Background page scroll-lock while a Fleet Hub modal is open. */
body.fhcc-modal-open {
	overflow: hidden;
}


/* When the engagement wizard is embedded in a modal it drops its own outer padding
   and hero, letting the modal chrome frame it. */
.cew-page--embedded {
	padding: 0;
	max-width: 100%;
}

.cew-embedded-client {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: 1rem;
	padding: .5rem .9rem;
	background: #e3f0f8;
	border-radius: .6rem;
	color: #0b3d66;
}

.cew-embedded-client .cew-hero-client-num {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .04em;
}

[data-bs-theme="dark"] .cew-embedded-client {
	background: rgba(20, 112, 163, .25);
	color: #cfe6f5;
}

/* ============================================================
   Fleet Hub combined landing pages (Booking & Arrivals,
   Service Center, Finance Matters). Shared so all three match.
   ============================================================ */
.hub-hero {
	position: relative;
	overflow: hidden;
	border-radius: .75rem;
	padding: 2rem 1.75rem;
	margin-bottom: 1.75rem;
	color: #fff;
	background: linear-gradient(120deg, #0d3b66 0%, #1470a3 55%, #2ea3d9 100%);
	box-shadow: 0 .5rem 1.5rem rgba(13, 59, 102, .35);
}

.hub-hero::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 45%;
	height: 180%;
	background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, transparent 70%);
	transform: rotate(15deg);
	pointer-events: none;
}

.hub-hero h3 {
	margin: 0;
	font-weight: 700;
	position: relative;
	z-index: 1;
}

.hub-hero p {
	margin: .25rem 0 0;
	opacity: .85;
	position: relative;
	z-index: 1;
}

.hub-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.hub-tile {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--bs-body-bg, #fff);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: .75rem;
	padding: 1.5rem 1.25rem;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .06);
}

.hub-tile::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hub-accent, #1470a3), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.hub-tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 .75rem 1.5rem rgba(13, 59, 102, .18);
	border-color: var(--hub-accent, #1470a3);
	color: inherit;
}

.hub-tile:hover::before {
	transform: scaleX(1);
}

.hub-tile-icon {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: #fff;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, var(--hub-accent, #1470a3), color-mix(in srgb, var(--hub-accent, #1470a3) 55%, #000));
	transition: transform .25s ease;
}

.hub-tile:hover .hub-tile-icon {
	transform: scale(1.08) rotate(-4deg);
}

.hub-tile-title {
	font-weight: 700;
	margin: 0 0 .25rem;
	font-size: 1.05rem;
}

.hub-tile-desc {
	margin: 0;
	font-size: .85rem;
	color: var(--bs-secondary-color, #6c757d);
}

.hub-tile-arrow {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease, transform .2s ease;
	color: var(--hub-accent, #1470a3);
}

.hub-tile:hover .hub-tile-arrow {
	opacity: 1;
	transform: translateX(0);
}

[data-bs-theme="dark"] .hub-tile {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .1);
}

.hub-section-label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color, #6c757d);
	margin: 1.5rem 0 .75rem;
}