:root {
    color-scheme: light;
    --background: oklch(0.985 0.003 250);
    --foreground: oklch(0.19 0.025 255);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.19 0.025 255);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.19 0.025 255);
    --primary: oklch(0.55 0.19 255);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.95 0.012 250);
    --secondary-foreground: oklch(0.25 0.03 255);
    --muted: oklch(0.95 0.012 250);
    --muted-foreground: oklch(0.5 0.025 255);
    --accent: oklch(0.94 0.025 250);
    --accent-foreground: oklch(0.25 0.03 255);
    --destructive: oklch(0.58 0.23 27);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.9 0.015 250);
    --input: oklch(0.87 0.018 250);
    --ring: oklch(0.62 0.16 255);
    --radius: 0.7rem;
    --sidebar: oklch(0.972 0.008 250);
    --sidebar-background: var(--sidebar);
    --sidebar-foreground: oklch(0.19 0.025 255);
    --sidebar-primary: oklch(0.55 0.19 255);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.925 0.026 250);
    --sidebar-accent-foreground: oklch(0.25 0.03 255);
    --sidebar-border: oklch(0.88 0.018 250);
    --sidebar-ring: oklch(0.62 0.16 255);
    --sidebar-width: 15.5rem;
    --sidebar-width-icon: 3.35rem;
    --sidebar-width-mobile: min(18rem, calc(100vw - 3rem));
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

::selection {
    background: color-mix(in oklab, var(--primary) 22%, transparent);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

code,
.betty-mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

code {
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    background: var(--muted);
    padding: 0.08rem 0.3rem;
    font-size: 0.88em;
}

.betty-logo {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    flex: none;
    border: 1px solid color-mix(in oklab, var(--primary) 75%, white);
    border-radius: 0.7rem;
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 7px 20px color-mix(in oklab, var(--primary) 18%, transparent);
}

.betty-brand,
.betty-brand-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.betty-brand {
    font-weight: 760;
    letter-spacing: -0.025em;
}

.betty-brand-subtitle,
.betty-muted,
.betty-kpi-caption,
.betty-topbar-subtitle,
.betty-page-heading p,
.betty-stub p {
    color: var(--muted-foreground);
}

.betty-brand-subtitle {
    margin-top: 0.05rem;
    font-size: 0.7rem;
}

.betty-demo-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

aside[data-variant][data-side] {
    min-height: 100dvh;
    border-color: var(--sidebar-border);
    background: var(--sidebar-background);
}

[data-sidebar="header"] {
    min-height: 4.65rem;
    justify-content: center;
    border-bottom: 1px solid var(--sidebar-border);
    padding: 0.65rem;
}

[data-sidebar="header-content"] {
    min-width: 0;
}

[data-sidebar="content"] {
    padding: 0.85rem 0.65rem;
}

[data-sidebar="group"] {
    padding-inline: 0;
}

[data-sidebar="group-label"] {
    height: 2.15rem;
    padding-inline: 0.65rem;
    color: var(--muted-foreground);
    font-size: 0.66rem;
    font-weight: 720;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

[data-sidebar="menu-button"] {
    min-height: 2.55rem;
    padding-inline: 0.7rem;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
}

[data-sidebar="menu-button"]:hover {
    border-color: color-mix(in oklab, var(--sidebar-border) 72%, transparent);
}

[data-sidebar="menu-button"][data-active="true"] {
    border-color: var(--sidebar-border);
    background: var(--card);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 7%, transparent);
}

[data-sidebar="footer"] {
    border-top: 1px solid var(--sidebar-border);
    padding: 0.65rem;
}

.betty-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 4.65rem;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 92%, transparent);
    padding: 0.75rem clamp(1rem, 2.5vw, 2rem);
    backdrop-filter: blur(14px);
}

.betty-shell-content,
.betty-topbar-heading,
.betty-page,
.betty-page-heading > div,
.betty-kpi-grid > *,
.betty-detail-grid > *,
.betty-two-column > * {
    min-width: 0;
}

.betty-page-heading h1,
.betty-feedback,
.betty-device-name {
    overflow-wrap: anywhere;
}

.betty-topbar-separator {
    height: 1.4rem;
}

.betty-topbar-title {
    font-size: 0.9rem;
    font-weight: 720;
    letter-spacing: -0.018em;
}

.betty-topbar-subtitle {
    margin-top: 0.05rem;
    font-size: 0.72rem;
}

.betty-demo-badge {
    margin-left: auto;
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    color: var(--primary);
}

.betty-page {
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: clamp(1.4rem, 3vw, 2.6rem);
}

.betty-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.betty-page-heading h1,
.betty-not-found h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.55rem);
    font-weight: 740;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.betty-page-heading p {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.betty-eyebrow {
    margin-bottom: 0.45rem !important;
    color: var(--primary) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.betty-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in oklab, var(--card) 92%, var(--background));
    padding: 0.4rem 0.7rem;
    color: var(--muted-foreground);
    font-size: 0.76rem;
    font-weight: 600;
}

.betty-page .rounded-lg.border.bg-card {
    border-color: var(--border);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 4%, transparent),
        0 10px 28px color-mix(in oklab, var(--foreground) 2.5%, transparent);
}

.betty-kpi-grid > .rounded-lg.border.bg-card {
    min-height: 9.5rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.betty-kpi-grid > .rounded-lg.border.bg-card:hover {
    border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
    box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 5%, transparent),
        0 14px 34px color-mix(in oklab, var(--foreground) 5%, transparent);
    transform: translateY(-1px);
}

.betty-live-indicator span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgb(22 163 74 / 0.12);
}

.betty-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.betty-kpi-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.55rem;
    color: var(--muted-foreground);
}

.betty-kpi-title {
    font-size: 0.78rem;
    font-weight: 680;
}

.betty-kpi-value {
    font-size: 2.15rem;
    font-weight: 760;
    letter-spacing: -0.055em;
}

.betty-positive {
    color: #15803d;
}

.betty-kpi-caption,
.betty-muted {
    margin-top: 0.28rem;
    font-size: 0.76rem;
}

.betty-empty,
.betty-not-found {
    display: flex;
    min-height: 16rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
}

.betty-empty-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--muted);
    color: var(--primary);
}

.betty-empty span,
.betty-not-found p {
    color: var(--muted-foreground);
    font-size: 0.85rem;
}

.betty-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
}

.betty-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.betty-table th {
    background: color-mix(in oklab, var(--muted) 65%, transparent);
    color: var(--muted-foreground);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.035em;
    text-align: left;
    text-transform: uppercase;
}

.betty-table th,
.betty-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 0.9rem;
    vertical-align: middle;
}

.betty-table tbody tr:last-child td {
    border-bottom: 0;
}

.betty-table tbody tr {
    transition: background 120ms ease;
}

.betty-table tbody tr:hover {
    background: color-mix(in oklab, var(--muted) 35%, transparent);
}

.betty-device-name {
    font-weight: 650;
}

.betty-inline-status,
.betty-heading-status,
.betty-detail-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.betty-table-action {
    text-align: right;
}

.betty-detail-nav {
    margin-bottom: 1.25rem;
}

.betty-detail-heading {
    align-items: center;
}

.betty-heading-status {
    margin-bottom: 0.55rem;
    color: var(--muted-foreground);
    font-size: 0.73rem;
}

.betty-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.betty-definition-list {
    display: grid;
    gap: 0.68rem;
    margin: 0;
}

.betty-definition-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    padding-bottom: 0.55rem;
}

.betty-definition-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.betty-definition-list dt {
    color: var(--muted-foreground);
    font-size: 0.76rem;
}

.betty-definition-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    font-weight: 550;
    text-align: right;
}

.betty-command-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.betty-ble-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.betty-ble-card {
    margin-top: 1rem;
}

.betty-scan-status,
.betty-scan-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

.betty-scan-warning {
    margin-bottom: 0.8rem;
    color: hsl(32 95% 34%);
}

.betty-inline-feedback {
    margin: 0;
}

.betty-ble-table {
    min-width: 42rem;
}

.betty-feedback {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid;
    border-radius: 0.55rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
}

.betty-feedback-ok {
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    color: var(--primary);
}

.betty-feedback-error {
    border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    background: color-mix(in oklab, var(--destructive) 9%, transparent);
    color: hsl(0 70% 38%);
}

.betty-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 1rem;
    margin-top: 1rem;
}

.betty-compact-table {
    min-width: 31rem;
}

.betty-stub {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    border: 1px dashed var(--border);
    border-radius: 0.55rem;
    background: color-mix(in oklab, var(--muted) 35%, transparent);
    padding: 1rem;
}

.betty-stub svg {
    flex: none;
    color: var(--muted-foreground);
}

.betty-stub p {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.betty-map-heading {
    align-items: center;
}

.betty-map-filter-card {
    margin-bottom: 1rem;
}

.betty-map-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem 1.5rem;
}

.betty-map-range-fields {
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.betty-field-label {
    color: var(--muted-foreground);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.betty-date-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 2.25rem;
    border: 1px solid var(--input);
    border-radius: 0.45rem;
    outline: none;
    background: var(--background);
    padding: 0.4rem 0.6rem;
    color: var(--foreground);
    color-scheme: light;
    font: inherit;
    font-size: 0.78rem;
}

.betty-date-input:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
}

.betty-map-presets {
    display: grid;
    gap: 0.45rem;
}

.betty-map-presets > div,
.betty-device-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.betty-device-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
}

.betty-device-filter-heading > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.betty-device-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.betty-device-filter {
    display: inline-flex;
    min-height: 2.1rem;
    align-items: center;
    gap: 0.48rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    padding: 0.38rem 0.68rem 0.38rem 0.48rem;
    color: var(--muted-foreground);
    cursor: pointer;
    font-size: 0.78rem;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.betty-device-filter:hover,
.betty-device-filter:focus-within {
    border-color: var(--device-color);
}

.betty-device-filter.is-selected {
    border-color: color-mix(in srgb, var(--device-color) 60%, transparent);
    background: color-mix(in srgb, var(--device-color) 10%, transparent);
    color: var(--foreground);
}

.betty-device-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.betty-device-color {
    width: 0.72rem;
    height: 0.72rem;
    flex: none;
    border: 2px solid color-mix(in oklab, var(--foreground) 70%, transparent);
    border-radius: 999px;
    background: var(--device-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-color) 15%, transparent);
}

.betty-map-filter-empty,
.betty-retention-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted-foreground);
    font-size: 0.76rem;
}

.betty-map-filter-empty {
    margin-top: 0.65rem;
    border: 1px dashed var(--border);
    border-radius: 0.45rem;
    padding: 0.65rem 0.75rem;
}

.betty-retention-note {
    margin: 0.8rem 0 0;
}

.betty-map-feedback {
    margin-top: 0;
}

.betty-map-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.betty-map-card-content {
    padding-top: 0;
}

.betty-map-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--background);
}

.betty-map-canvas {
    z-index: 0;
    width: 100%;
    height: clamp(28rem, 62vh, 48rem);
    background: hsl(214 27% 94%);
}

.betty-map-empty-state {
    position: absolute;
    z-index: 500;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(90%, 25rem);
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    transform: translate(-50%, -65%);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--card) 94%, transparent);
    padding: 1rem;
    text-align: center;
    box-shadow: 0 12px 36px rgb(15 23 42 / 0.12);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.betty-map-empty-state span {
    color: var(--muted-foreground);
    font-size: 0.8rem;
}

.betty-map-scrubber {
    position: relative;
    z-index: 510;
    display: grid;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    background: var(--card);
    padding: 0.8rem 1rem 0.75rem;
}

.betty-map-scrubber-labels,
.betty-map-scrubber-ends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.betty-map-scrubber-labels {
    font-size: 0.76rem;
    font-weight: 650;
}

.betty-map-scrubber-labels output {
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.betty-map-scrubber-ends {
    color: var(--muted-foreground);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.betty-map-scrubber input[type="range"] {
    width: 100%;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--primary);
    cursor: ew-resize;
}

.betty-map-scrubber input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.betty-map-tooltip {
    display: grid;
    gap: 0.12rem;
}

.betty-map-tooltip span {
    color: #4b5563;
    font-size: 0.68rem;
}

.betty-map-frame .leaflet-control-attribution {
    background: rgb(255 255 255 / 0.9);
    color: #1f2937;
    font-size: 0.68rem;
}

.betty-map-frame .leaflet-control-attribution a {
    color: #075985;
    text-decoration: underline;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: var(--destructive);
    color: white;
    padding: 1rem;
}

@media (max-width: 1100px) {
    .betty-kpi-grid,
    .betty-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .betty-map-filter-grid {
        grid-template-columns: 1fr;
    }

    .betty-map-range-fields {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .betty-map-range-fields button {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    .betty-page {
        padding: 1.25rem max(0.85rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
    }

    .betty-detail-grid,
    .betty-two-column {
        grid-template-columns: 1fr;
    }

    .betty-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .betty-kpi-grid > .rounded-lg.border.bg-card {
        min-height: 0;
    }

    .betty-kpi-grid .betty-kpi-header {
        gap: 0.4rem;
        padding: 0.85rem 0.85rem 0.3rem;
    }

    .betty-kpi-grid .betty-kpi-header + div {
        padding: 0 0.85rem 0.85rem;
    }

    .betty-kpi-header svg {
        flex: none;
    }

    .betty-kpi-value {
        font-size: 1.8rem;
    }

    .betty-kpi-caption {
        font-size: 0.72rem;
    }

    .betty-topbar {
        min-height: 3.75rem;
        gap: 0.5rem;
        padding: max(0.5rem, env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right)) 0.5rem max(0.85rem, env(safe-area-inset-left));
    }

    .betty-topbar [data-sidebar="trigger"] {
        width: 2.75rem;
        min-height: 2.75rem;
        flex: none;
    }

    [data-sidebar="menu-button"] {
        min-height: 2.75rem;
    }

    .betty-page button,
    .betty-detail-nav a,
    .betty-table-action a {
        min-height: 2.75rem;
        touch-action: manipulation;
    }

    .betty-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .betty-page-heading {
        margin-bottom: 1.2rem;
    }

    .betty-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .betty-live-indicator {
        align-self: flex-start;
    }

    .betty-map-range-fields {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .betty-map-range-fields .betty-field-label {
        margin-bottom: -0.35rem;
    }

    .betty-map-range-fields button {
        grid-column: auto;
        width: 100%;
    }

    .betty-map-presets > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .betty-device-filter {
        min-height: 2.75rem;
        max-width: 100%;
        border-radius: 0.6rem;
    }

    .betty-device-filter > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .betty-device-filter-heading > div:first-child {
        flex-wrap: wrap;
    }

    .betty-map-card-header > span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .betty-retention-note svg,
    .betty-feedback svg {
        flex: none;
    }

    .betty-device-filter-heading,
    .betty-map-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .betty-map-canvas {
        height: clamp(18rem, 52svh, 28rem);
    }

    .betty-map-frame .leaflet-control-zoom a {
        width: 2.75rem;
        height: 2.75rem;
        line-height: 2.75rem;
    }

    .betty-map-scrubber {
        padding-inline: 0.75rem;
    }

    .betty-map-scrubber input[type="range"] {
        height: 2.75rem;
        touch-action: pan-y;
    }

    .betty-map-scrubber input[type="range"]::-webkit-slider-thumb {
        width: 1.5rem;
        height: 1.5rem;
    }

    .betty-map-scrubber input[type="range"]::-moz-range-thumb {
        width: 1.5rem;
        height: 1.5rem;
    }

    .betty-map-scrubber-labels {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .betty-map-scrubber-labels output {
        text-align: left;
    }

    .betty-topbar-subtitle {
        display: none;
    }

    .betty-device-table {
        min-width: 0;
    }

    .betty-device-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .betty-device-table tbody,
    .betty-device-table tr {
        display: block;
    }

    .betty-device-table tbody tr {
        padding: 0.75rem;
    }

    .betty-device-table tbody tr + tr {
        border-top: 1px solid var(--border);
    }

    .betty-device-table td {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: baseline;
        gap: 0.5rem;
        border: 0;
        padding: 0.4rem 0;
        overflow-wrap: anywhere;
    }

    .betty-device-table td[data-label]::before {
        content: attr(data-label);
        color: var(--muted-foreground);
        font-size: 0.72rem;
    }

    .betty-device-table td > * {
        min-width: 0;
        justify-self: start;
        max-width: 100%;
        white-space: normal;
    }

    .betty-device-table .betty-device-cell-name,
    .betty-device-table .betty-table-action {
        display: block;
    }

    .betty-device-table .betty-device-cell-name::before {
        display: none;
    }

    .betty-device-table .betty-device-cell-name {
        padding-bottom: 0.6rem;
    }

    .betty-device-table .betty-table-action a {
        display: flex;
        min-height: 2.75rem;
        justify-content: space-between;
        width: 100%;
    }
}

/* Fleet workspace. Shared with the operational pages; hardware views keep their own layout. */
.fleet-context-strip { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: -.5rem 0 1rem; color: #8b99ac; font-size: .68rem; }
.fleet-context-strip strong { color: #61738d; font-weight: 600; }.fleet-context-strip a { text-decoration: none; }.fleet-context-strip a:hover { text-decoration: underline; }
.fleet-panel-feedback { color: #426b9e; background: #edf4ff; border-radius: 5px; padding: .55rem; font-size: .65rem; margin: .5rem 0; }
.fleet-trip-toolbar { border: 1px solid #e2e8f0; background: #fff; border-radius: 11px; padding: 1.1rem; margin-bottom: 1.2rem; }
.fleet-trip-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }.fleet-trip-presets > span { margin-left: auto; color: #8c99ab; font-size: .66rem; }
.fleet-trip-filter-fields { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr 1fr auto; align-items: flex-end; gap: .7rem; }.fleet-trip-filter-fields label { display: flex; flex-direction: column; gap: .35rem; color: #8090a5; font-size: .7rem; min-width: 0; }
.fleet-trip-metrics { margin-bottom: 1.1rem; }.fleet-trip-metrics > div { padding: .9rem 1.2rem; }.fleet-trip-metrics strong { font-size: 1.4rem; }
.fleet-focused-trip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #edf4ff; border: 1px solid #d9e6ff; border-radius: 8px; padding: .65rem .9rem; margin-bottom: 1rem; font-size: .75rem; color: #4270ae; }.fleet-focused-trip > div { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }.fleet-focused-trip span { font-size: .7rem; color: #7492b8; }
.fleet-journey-view { border: 1px solid #dce5ef; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px #26496b0a; }
.fleet-journey-map-frame { position: relative; height: 430px; min-height: 320px; }.fleet-journey-map { position: absolute; inset: 0; z-index: 0; background: #eaf0ed; }
.fleet-journey-map-caption { display: flex; align-items: center; gap: .6rem; position: absolute; top: 13px; left: 13px; z-index: 3; background: #fffffff2; border: 1px solid #dbe4ef; border-radius: 7px; padding: .55rem .7rem; color: #73829a; font-size: .63rem; box-shadow: 0 2px 10px #1f405518; }
.fleet-journey-map-caption span { display: inline-flex; align-items: center; gap: .35rem; }.fleet-journey-map-caption i { display: block; width: 37px; height: 6px; background: #467cd5; clip-path: polygon(0 45%,100% 0,100% 100%,0 55%); }.fleet-journey-map-caption span:last-child { border-left: 1px solid #dbe4ef; padding-left: .6rem; }
.fleet-sample-readout { position: absolute; z-index: 3; top: 13px; right: 13px; padding: .9rem 1rem; width: 240px; display: flex; flex-direction: column; gap: .25rem; background: #fffffff5; border: 1px solid #dae4ef; border-radius: 9px; box-shadow: 0 3px 14px #24466617; }.fleet-sample-readout > span:first-child { font-size: .75rem; font-weight: 650; color: #526984; }.fleet-sample-readout strong { font-size: 2rem; letter-spacing: -.06em; color: #2c4770; line-height: 1.35; font-variant-numeric: tabular-nums; }.fleet-sample-readout strong small { color: #96a6bb; font-size: .7rem; font-weight: 500; letter-spacing: 0; }.fleet-sample-readout > span { font-size: .69rem; color: #70829b; }.fleet-sample-readout > small { font-size: .6rem; color: #9aa8bb; margin-top: .15rem; }
.fleet-playback-panel { border-top: 1px solid #e2e9f2; background: #fff; padding: 1rem 1.25rem 1.1rem; }.fleet-playback-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.fleet-playback-heading > div { display: flex; align-items: baseline; gap: .6rem; }.fleet-playback-heading strong { font-size: .77rem; font-weight: 650; }.fleet-playback-heading span { color: #96a4b7; font-size: .62rem; }.fleet-playback-heading select { border: 1px solid #dfe6ef; border-radius: 6px; color: #6b7e99; font-size: .68rem; padding: .4rem .55rem; max-width: 220px; background: #fff; }
.fleet-speed-chart { height: 115px; margin: .75rem 0 .5rem; position: relative; cursor: crosshair; }.fleet-speed-chart svg { width: 100%; height: 100%; overflow: visible; }.fleet-chart-empty { display: flex; height: 100%; align-items: center; justify-content: center; color: #a3afbf; font-size: .7rem; background: repeating-linear-gradient(to bottom,#fff 0,#fff 36px,#edf1f7 37px); }
.fleet-playback-controls { display: flex; align-items: flex-start; gap: .65rem; }.fleet-play-button { display: flex; align-items: center; justify-content: center; gap: .4rem; background: #2e6ed5; border: 0; border-radius: 7px; color: white; min-width: 82px; height: 33px; font-size: .7rem; font-weight: 600; cursor: pointer; }.fleet-play-button:disabled { background: #c6d3e5; cursor: default; }.fleet-playback-controls > select { height: 33px; border: 1px solid #dbe4ef; border-radius: 6px; padding: 0 .5rem; color: #6e829f; font-size: .7rem; background: #fff; }
.fleet-time-slider { flex: 1; min-width: 0; padding-top: .2rem; }.fleet-time-slider input { width: 100%; accent-color: #3977dc; cursor: pointer; height: 21px; }.fleet-time-slider > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .57rem; color: #9aa9bd; }.fleet-time-slider output { color: #6884aa; font-weight: 600; }
.fleet-route-note { display: flex; gap: .4rem; align-items: center; color: #9aa7b8; font-size: .65rem; margin: .7rem .2rem 0; }.fleet-route-note svg { flex: none; }.fleet-stop-marker { display: grid; place-items: center; border: 2px solid #fff; background: #fff9e9; box-shadow: 0 2px 7px #3f506040; border-radius: 50%; color: #bd8825; font-size: 11px; font-weight: 700; }.fleet-load-more { display: flex; justify-content: center; margin-top: 1rem; }
.fleet-activity-list { display: flex; flex-direction: column; padding: .25rem 0; }.fleet-activity-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #eef1f6; }.fleet-activity-item:last-child { border: 0; }.fleet-activity-item > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edf3fb; color: #7894b9; flex: none; }.fleet-activity-item > div { flex: 1; min-width: 0; }.fleet-activity-item strong { font-size: .79rem; }.fleet-activity-item p { color: #8b9aaf; font-size: .72rem; margin: .3rem 0 0; }.fleet-activity-item time { color: #99a6b9; font-size: .67rem; flex: none; }
@media (max-width: 1050px) { .fleet-trip-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)) auto; }.fleet-trip-filter-fields > label:nth-child(3) { grid-column: 1; }.fleet-sample-readout { top: 62px; }.fleet-journey-map-caption { font-size: .6rem; } }
@media (max-width: 760px) { .fleet-context-strip { gap: .4rem 1rem; margin-top: -.25rem; font-size: .6rem; }.fleet-context-strip > span:nth-of-type(2) { display: none; }.fleet-trip-toolbar { padding: .8rem; }.fleet-trip-presets { gap: .3rem; }.fleet-trip-presets > span { width: 100%; margin-top: .2rem; }.fleet-trip-filter-fields { grid-template-columns: 1fr 1fr; gap: .6rem; }.fleet-trip-filter-fields > button { grid-column: 1 / -1; }.fleet-journey-map-frame { height: 370px; }.fleet-sample-readout { top: auto; bottom: 24px; right: auto; left: 10px; width: 215px; padding: .65rem .8rem; }.fleet-sample-readout strong { font-size: 1.65rem; }.fleet-journey-map-caption { top: 10px; left: 10px; right: 10px; justify-content: center; }.fleet-playback-panel { padding: .85rem; }.fleet-playback-heading > div { display: block; }.fleet-playback-heading > div span { display: block; margin-top: .15rem; }.fleet-playback-heading select { max-width: 165px; }.fleet-playback-controls { gap: .4rem; flex-wrap: wrap; }.fleet-time-slider { flex-basis: 100%; }.fleet-speed-chart { height: 95px; }.fleet-time-slider > div { font-size: .53rem; }.fleet-focused-trip { flex-direction: column; align-items: flex-start; gap: .3rem; }.fleet-activity-item { gap: .6rem; flex-wrap: wrap; }.fleet-activity-item time { width: 100%; padding-left: 36px; } }
.betty-page:has(.fleet-dashboard) { max-width: none; padding: 1.5rem 1.7rem 1.7rem; }
.betty-page:has(.fleet-trips-page) { max-width: 110rem; }
.fleet-workspace-label { display: flex; align-items: center; gap: .45rem; margin-left: auto; color: #718096; font-size: .73rem; }
.fleet-workspace-dot { width: 6px; height: 6px; border-radius: 50%; background: #8b9bb2; }
.fleet-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }
.fleet-page-heading h1 { margin: 0; font-size: clamp(1.8rem, 2.7vw, 2.3rem); line-height: 1.2; letter-spacing: -.045em; font-weight: 740; }
.fleet-page-heading p { margin: .4rem 0 0; font-size: .84rem; color: #718096; }
.fleet-page-heading .fleet-eyebrow { margin: 0 0 .4rem; font-size: .64rem; letter-spacing: .13em; font-weight: 700; color: #73839a; text-transform: uppercase; }
.fleet-heading-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.fleet-live-label { display: inline-flex; align-items: center; gap: .4rem; color: #168164; font-size: .75rem; font-weight: 650; }
.fleet-live-label i { width: 7px; height: 7px; background: #1aa77a; border-radius: 50%; box-shadow: 0 0 0 4px #e7f5ef; }
.fleet-status-summary { display: flex; align-items: center; gap: .35rem; padding: .45rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; margin-bottom: 1rem; }
.fleet-status-summary button, .fleet-status-summary a { border: 0; background: transparent; border-radius: 8px; min-height: 47px; padding: .6rem .95rem; display: flex; align-items: center; gap: .55rem; color: #69778b; text-decoration: none; font: inherit; font-size: .78rem; cursor: pointer; transition: background .15s; }
.fleet-status-summary button:hover, .fleet-status-summary a:hover { background: #f3f6fa; }
.fleet-status-summary button.active { background: #edf3ff; color: #2458b8; }
.fleet-status-summary strong { font-size: 1.2rem; color: #26374e; font-variant-numeric: tabular-nums; font-weight: 720; }
.fleet-status-summary i, .fleet-row-meta i, .fleet-map-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: #a3acba; }
.fleet-status-summary .fleet-summary-alerts { margin-left: auto; border-left: 1px solid #edf0f4; border-radius: 0; }
i.moving { background: #15a378; } i.stopped { background: #3871e0; } i.stale { background: #e9a127; } i.offline { background: #8994a5; }
.fleet-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.fleet-search { position: relative; min-width: 200px; flex: 1; max-width: 450px; }
.fleet-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #91a0b3; z-index: 1; pointer-events: none; }
.fleet-search input { padding-left: 2.2rem !important; height: 2.5rem; background: #fff; font-size: .79rem; }
.fleet-filter-count { margin-left: auto; font-size: .77rem; color: #8290a3; }
.fleet-filter-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; padding: .95rem; border: 1px solid #e3e9f0; border-radius: 10px; margin-bottom: 1rem; background: #fff; }
.fleet-filter-fields label, .fleet-form-grid label { display: flex; flex-direction: column; gap: .4rem; color: #566579; font-size: .73rem; font-weight: 600; min-width: 0; }
.fleet-filter-fields select, .fleet-form-grid select, .fleet-form-grid textarea, .fleet-form-grid input:not([type="checkbox"]), .fleet-inline-select select, .fleet-trip-filter-fields select, .fleet-trip-filter-fields input { min-width: 0; width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid #dce3ec; border-radius: 7px; background: #fff; color: #334259; font: inherit; font-size: .78rem; }
.fleet-inline-select select { width: auto; }
.fleet-live-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 570px; height: max(570px, calc(100dvh - 300px)); max-height: 1100px; border: 1px solid #dfe6ef; border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 3px 12px #243f6010; }
.fleet-vehicle-list { overflow-y: auto; min-width: 0; border-right: 1px solid #e3e9f1; background: #fff; scrollbar-width: thin; }
.fleet-list-heading { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: #ffffffef; z-index: 2; border-bottom: 1px solid #eef1f5; font-size: .76rem; }
.fleet-list-heading strong { display: flex; gap: .45rem; align-items: center; }
.fleet-list-heading strong span { background: #f0f3f7; color: #768498; border-radius: 5px; min-width: 21px; padding: .1rem .35rem; font-size: .65rem; text-align: center; }
.fleet-list-heading > span { color: #8996a8; font-size: .66rem; }
.fleet-vehicle-row { width: 100%; display: flex; align-items: center; text-align: left; gap: .7rem; background: #fff; border: 0; border-bottom: 1px solid #eef1f5; border-left: 3px solid transparent; padding: 1rem .85rem 1rem .7rem; color: #26364e; cursor: pointer; font: inherit; }
.fleet-vehicle-row:hover { background: #f7faff; }
.fleet-vehicle-row.selected { border-left-color: #3975e9; background: #f0f5ff; }
.fleet-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 10px; background: #eef3fc; color: #4b70a7; flex: none; }
.fleet-type-icon.moving { background: #e9f7f1; color: #15926a; }
.fleet-type-icon.offline { background: #f0f2f5; color: #909bae; }
.fleet-type-icon.stale { background: #fff5e4; color: #b97b14; }
.fleet-type-icon-large { width: 63px; height: 63px; border-radius: 16px; }
.fleet-row-content { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .16rem; }
.fleet-row-content > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 660; }
.fleet-row-content > span { color: #7d8b9e; font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-row-content .fleet-row-meta { display: flex; align-items: center; gap: .3rem; font-size: .63rem; margin-top: .3rem; overflow: visible; white-space: normal; flex-wrap: wrap; }
.fleet-row-meta em { background: #fff1d8; border-radius: 4px; padding: .05rem .23rem; color: #9c6c1b; font-style: normal; font-size: .57rem; }
.fleet-row-speed { flex: none; text-align: right; align-self: flex-start; font-size: .97rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.fleet-row-speed small { display: block; color: #9aa6b6; font-weight: 500; font-size: .55rem; }
.fleet-map-workspace, .fleet-live-map-frame { min-width: 0; min-height: 0; position: relative; height: 100%; }
.fleet-live-map { position: absolute; inset: 0; background: #eaf0ed; z-index: 0; }
.fleet-map-tools { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: .4rem; z-index: 3; }
.fleet-map-tools button { background: #fff; border-color: #d9e2ed; box-shadow: 0 2px 8px #2b40521a; font-size: .68rem; }
.fleet-map-legend { position: absolute; bottom: 24px; left: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: .65rem; background: #ffffffee; border: 1px solid #dce4ed; border-radius: 6px; padding: .4rem .65rem; box-shadow: 0 1px 8px #253a5112; pointer-events: none; }
.fleet-map-legend span { display: flex; align-items: center; gap: .3rem; font-size: .59rem; color: #68778b; }
.fleet-map-empty { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; align-items: center; flex-direction: column; text-align: center; gap: .65rem; width: min(290px, 90%); border: 1px solid #e2e8ef; border-radius: 12px; background: #fffffff5; padding: 1.5rem; box-shadow: 0 10px 40px #263a5020; }
.fleet-map-empty svg { color: #9caac0; }
.fleet-map-empty strong { font-size: .88rem; }
.fleet-map-empty span { color: #7a889b; font-size: .73rem; line-height: 1.6; }
.fleet-map-error { position: absolute; top: 60px; left: 14px; right: 14px; padding: .7rem; background: #fff4de; border-radius: 7px; z-index: 5; font-size: .75rem; }
.fleet-selected-panel { position: absolute; right: 14px; top: 14px; width: 285px; max-width: calc(100% - 28px); border: 1px solid #dce4ee; border-radius: 11px; padding: 1rem; background: #fffffffa; box-shadow: 0 10px 30px #223c581f; z-index: 4; backdrop-filter: blur(10px); }
.fleet-selected-top { display: flex; align-items: center; gap: .7rem; }
.fleet-selected-top > div { min-width: 0; flex: 1; }
.fleet-selected-top strong, .fleet-selected-top span:not(.fleet-type-icon) { display: block; overflow-wrap: anywhere; }
.fleet-selected-top strong { font-size: .9rem; }
.fleet-selected-top div span { color: #8490a2; font-size: .68rem; margin-top: .1rem; }
.fleet-close { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; width: 24px; height: 24px; background: transparent; cursor: pointer; color: #8d9aac; align-self: flex-start; }
.fleet-close:hover { background: #eef2f7; color: #33455f; }
.fleet-selected-status { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .2rem; font-size: .65rem; color: #8491a4; }
.fleet-state-pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 5px; padding: .2rem .5rem; background: #edf2fb; color: #406cad; font-size: .65rem; font-weight: 650; white-space: nowrap; }
.fleet-state-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fleet-state-pill.moving { color: #188664; background: #e8f6ef; }
.fleet-state-pill.offline { color: #8490a1; background: #f0f2f5; }
.fleet-state-pill.stale { color: #a8751d; background: #fff2dc; }
.fleet-selected-facts { margin: 0 0 1rem; font-size: .72rem; }
.fleet-selected-facts > div { display: flex; justify-content: space-between; gap: .7rem; border-bottom: 1px solid #eef1f5; padding: .7rem 0; }
.fleet-selected-facts dt { color: #7c899c; flex: none; }
.fleet-selected-facts dd { margin: 0; text-align: right; color: #3b4b63; font-weight: 550; overflow-wrap: anywhere; }
.fleet-panel-primary { width: 100%; justify-content: space-between; }
.fleet-selected-links { display: flex; justify-content: space-between; gap: .5rem; margin-top: .85rem; font-size: .66rem; color: #6480a6; }
.fleet-selected-links a { text-decoration: none; }
.fleet-selected-links a:hover { text-decoration: underline; }
.fleet-leaflet-marker { background: transparent; border: 0; }
.fleet-vehicle-pin { position: relative; --pin-color: #3975e4; width: 42px; height: 42px; }
.fleet-vehicle-pin.moving { --pin-color: #149c73; }.fleet-vehicle-pin.offline { --pin-color: #8b98aa; }.fleet-vehicle-pin.stale { --pin-color: #ce9429; }.fleet-vehicle-pin.unknown { --pin-color: #7186a3; }
.fleet-pin-disc { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid white; border-radius: 50%; color: white; background: var(--pin-color); box-shadow: 0 2px 10px #263c5040; }
.fleet-pin-disc svg { width: 23px; height: 23px; }
.fleet-vehicle-pin.selected .fleet-pin-disc { box-shadow: 0 0 0 5px #ffffff80, 0 0 0 7px var(--pin-color), 0 6px 16px #263c5040; }
.fleet-pin-heading { position: absolute; inset: -13px; display: block; transform-origin: center; }
.fleet-pin-heading::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--pin-color); }
.fleet-pin-label { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; background: #fffffff5; border: 1px solid #d6e0eb; border-radius: 5px; font-size: 10px; color: #43516a; box-shadow: 0 2px 5px #263c5014; font-weight: 600; }
.fleet-empty-list { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 3.5rem 1.3rem; gap: .65rem; }
.fleet-empty-list > svg { color: #a5b1c3; margin-bottom: .3rem; }
.fleet-empty-list strong { font-size: .89rem; font-weight: 650; }
.fleet-empty-list p { color: #8c99aa; max-width: 380px; margin: 0; font-size: .75rem; line-height: 1.7; }
.fleet-list-limit { color: #8d99aa; font-size: .67rem; padding: 1rem; }
.fleet-mobile-view-toggle { display: none; }
.fleet-table-card > div { padding: 0; }
.fleet-vehicles-table th, .fleet-trips-table th { background: #f8fafc; font-size: .67rem; color: #8090a5; font-weight: 600; }
.fleet-vehicles-table td, .fleet-trips-table td { font-size: .75rem; padding-block: 1rem; }
.fleet-vehicles-table small, .fleet-trips-table small { display: block; color: #91a0b3; font-size: .65rem; font-weight: 400; margin-top: .2rem; }
.fleet-table-vehicle { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.fleet-table-vehicle strong { font-weight: 650; }
.fleet-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.fleet-tags > * { font-size: .61rem; }
.fleet-back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .73rem; color: #7e8ca0; text-decoration: none; margin-bottom: 1.2rem; }
.fleet-vehicle-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.fleet-vehicle-identity > div { min-width: 0; }.fleet-vehicle-identity h1 { overflow-wrap: anywhere; }
.fleet-section-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid #e0e7ef; margin: 1.5rem 0; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.fleet-section-tabs a { display: flex; flex: none; white-space: nowrap; align-items: center; gap: .45rem; text-decoration: none; padding: .7rem .05rem .85rem; color: #8793a5; border-bottom: 2px solid transparent; font-size: .79rem; font-weight: 600; }
.fleet-section-tabs a.active { color: #316bd5; border-bottom-color: #3978e9; }
.fleet-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #e3e9f0; border-radius: 11px; background: #fff; margin-bottom: 1.4rem; }
.fleet-metrics-grid > div { padding: 1.2rem 1.3rem; border-right: 1px solid #edf0f5; min-width: 0; }.fleet-metrics-grid > div:last-child { border: 0; }
.fleet-metrics-grid span { display: block; color: #7f8ea2; font-size: .71rem; }.fleet-metrics-grid strong { display: block; font-size: 1.45rem; letter-spacing: -.035em; margin: .4rem 0; font-weight: 700; }.fleet-metrics-grid small { color: #98a4b5; display: block; font-size: .64rem; }.fleet-metrics-grid em { font-size: .7rem; font-weight: 500; color: #a0aabd; font-style: normal; }
.fleet-metrics-grid .fleet-health-value { font-size: 1rem; letter-spacing: -.015em; padding: .35rem 0; }
.fleet-metric-status.moving { color: #1c9b74; }.fleet-metric-status.offline { color: #8b98a9; }.fleet-metric-status.stale { color: #c2943e; }
.fleet-vehicle-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); gap: 1.2rem; }
.fleet-vehicle-mini-map { min-height: 410px; border: 1px solid #dde5ef; border-radius: 11px; overflow: hidden; }
.fleet-section-card { margin-top: 1.3rem; }
.fleet-card-heading { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
.fleet-section-description { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.fleet-section-description h2 { font-size: 1rem; margin: 0 0 .4rem; font-weight: 650; }.fleet-section-description p { margin: 0; color: #8592a4; font-size: .77rem; }
.fleet-profile-editor { margin: 1rem 0; border-color: #afc8f5; }.fleet-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.fleet-form-wide { grid-column: 1 / -1; }.fleet-form-grid small { color: #8c98a9; font-size: .65rem; font-weight: 400; }.fleet-form-grid textarea { resize: vertical; }.fleet-form-grid .fleet-color-input { padding: 3px; max-width: 100px; }
.fleet-form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }.fleet-profile-notes { white-space: pre-wrap; font-size: .75rem; color: #8190a3; margin-top: 1.2rem; }
.fleet-two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.fleet-health-heading { font-size: 1.25rem; margin: 0 0 .5rem; }.fleet-two-cards p { font-size: .78rem; }
.fleet-settings-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .82rem; }.fleet-settings-row p { margin: .35rem 0 0; font-size: .75rem; }
.fleet-inline-feedback { background: #eef5ff; color: #335e9a; border: 1px solid #d4e4ff; border-radius: 8px; padding: .8rem 1rem; font-size: .78rem; margin: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; }.fleet-inline-feedback a { white-space: nowrap; font-weight: 600; }.fleet-inline-error { color: #b84343; font-size: .76rem; }.fleet-selected-table-row { background: #f0f5ff; }
@media (max-width: 1250px) { .fleet-live-workspace { grid-template-columns: 300px minmax(0, 1fr); }.fleet-selected-panel { width: 255px; top: 64px; }.fleet-filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }.fleet-status-summary button, .fleet-status-summary a { padding-inline: .65rem; gap: .4rem; }.fleet-status-summary strong { font-size: 1rem; } }
@media (max-width: 1000px) { .fleet-live-workspace { grid-template-columns: 265px minmax(0, 1fr); }.fleet-row-speed { display: none; }.fleet-map-legend { max-width: 190px; }.fleet-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.fleet-metrics-grid > div { border-bottom: 1px solid #edf0f5; }.fleet-vehicle-overview-grid { grid-template-columns: 1fr; }.fleet-status-summary .fleet-summary-alerts span { display: none; }.fleet-status-summary { flex-wrap: wrap; }.fleet-workspace-label { display: none; } }
@media (max-width: 760px) { .betty-page:has(.fleet-dashboard), .betty-page:has(.fleet-trips-page) { padding: 1.1rem .9rem; }.fleet-page-heading { align-items: flex-start; margin-bottom: 1rem; }.fleet-page-heading p { font-size: .73rem; }.fleet-page-heading h1 { font-size: 1.8rem; }.fleet-heading-actions { gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }.fleet-heading-actions .fleet-live-label { display: none; }.fleet-page-heading .fleet-eyebrow { display: none; }.fleet-status-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: .25rem; }.fleet-status-summary button { flex-wrap: wrap; gap: .3rem; justify-content: center; padding: .65rem .2rem; }.fleet-status-summary button span { width: 100%; font-size: .63rem; }.fleet-status-summary .fleet-summary-alerts { display: none; }.fleet-mobile-view-toggle { display: flex; gap: .25rem; margin-left: auto; }.fleet-filter-bar { gap: .4rem; }.fleet-search { max-width: none; flex-basis: calc(100% - 105px); }.fleet-filter-bar > .fleet-filter-count { width: 100%; }.fleet-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }.fleet-live-workspace { display: block; height: max(550px, calc(100dvh - 280px)); min-height: 550px; }.fleet-vehicle-list { height: 100%; border: 0; }.fleet-mobile-map .fleet-vehicle-list { display: none; }.fleet-mobile-list .fleet-map-workspace { display: none; }.fleet-map-workspace { height: 100%; }.fleet-row-speed { display: block; }.fleet-selected-panel { top: auto; bottom: 20px; right: 10px; left: 10px; width: auto; max-width: none; padding: .8rem 1rem; }.fleet-selected-panel .fleet-selected-facts { display: none; }.fleet-selected-panel .fleet-selected-status { margin: .65rem 0; }.fleet-selected-panel .fleet-selected-links { margin-top: .6rem; }.fleet-selected-panel .fleet-selected-top .fleet-type-icon { width: 34px; height: 34px; }.fleet-map-legend { max-width: none; bottom: 22px; }.fleet-map-workspace:has(.fleet-selected-panel) .fleet-map-legend { display: none; }.fleet-vehicle-heading { flex-direction: column; }.fleet-vehicle-heading .fleet-heading-actions { width: 100%; justify-content: flex-start; }.fleet-metrics-grid > div { padding: .9rem; }.fleet-metrics-grid strong { font-size: 1.15rem; }.fleet-metrics-grid .fleet-health-value { font-size: .88rem; }.fleet-form-grid, .fleet-two-cards { grid-template-columns: 1fr; }.fleet-section-description, .fleet-settings-row { align-items: flex-start; flex-direction: column; }.fleet-vehicle-identity h1 { font-size: 1.55rem; }.fleet-type-icon-large { width: 51px; height: 51px; }.fleet-inline-feedback { flex-direction: column; gap: .4rem; } }