:root {
    color-scheme: light;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --blue-600: #2563eb;
    --green-500: #22c55e;
    --yellow-400: #facc15;
    --orange-500: #f97316;
    --red-500: #ef4444;
    --border: #e2e8f0;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--slate-50);
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

.app-header {
    z-index: 20;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
    padding: 0.65rem 2rem 0.75rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--slate-500);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 150ms ease;
}

.back-link:hover {
    color: var(--blue-600);
}

.back-link svg {
    width: 1rem;
    height: 1rem;
}

.header-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.35rem;
}

.header-main h1 {
    color: var(--slate-800);
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.2;
}

.header-main p {
    margin-top: 0.25rem;
    color: var(--slate-500);
    font-size: 0.8125rem;
}

.date-pill {
    display: inline-flex;
    min-height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--slate-50);
    padding: 0.45rem 0.75rem;
    color: var(--slate-600);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.date-pill svg {
    width: 1rem;
    height: 1rem;
    color: var(--slate-500);
}

.date-pill input {
    width: 8.8rem;
    border: 0;
    background: transparent;
    color: var(--slate-700);
    font-weight: 750;
    outline: none;
}

.date-pill input:disabled {
    color: var(--slate-400);
}

.fleet-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.status-pill {
    display: inline-flex;
    min-height: 1.625rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-pill-good {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.status-pill-muted {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.status-pill .status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.fleet-progress {
    display: flex;
    min-width: 8rem;
    height: 0.85rem;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 999px;
    background: var(--slate-100);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

.fleet-segment {
    display: block;
    min-width: 0;
    height: 100%;
}

.fleet-segment-green {
    background: var(--green-500);
}

.fleet-segment-yellow {
    background: var(--yellow-400);
}

.fleet-segment-orange {
    background: var(--orange-500);
}

.fleet-segment-red {
    background: var(--red-500);
}

.fleet-segment-slate,
.fleet-segment-muted {
    background: var(--slate-400);
}

.fleet-legend {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
    color: var(--slate-600);
    font-size: 0.68rem;
    font-weight: 700;
}

.data-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.data-status-strip[hidden] {
    display: none;
}

.data-status-chip {
    display: inline-flex;
    min-height: 1.55rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50);
    padding: 0.24rem 0.62rem;
    color: var(--slate-600);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
}

.data-status-chip span {
    color: var(--slate-500);
    font-weight: 750;
}

.data-status-chip strong {
    color: var(--slate-800);
    font-weight: 850;
}

.data-status-chip.good {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.data-status-chip.good span,
.data-status-chip.good strong {
    color: #166534;
}

.data-status-chip.work {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.data-status-chip.work span,
.data-status-chip.work strong {
    color: #1d4ed8;
}

.legend-count,
.legend-line {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tab-strip {
    z-index: 19;
    display: flex;
    flex: 0 0 auto;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
    padding: 0 2rem;
}

.tab-button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid transparent;
    color: var(--slate-500);
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 150ms ease, color 150ms ease;
}

.tab-button:hover,
.tab-button.is-active {
    color: var(--blue-600);
}

.tab-button:focus-visible,
.link-button:focus-visible,
.zone-row:focus-visible,
.machine-zone-row:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.32);
    outline-offset: 2px;
}

.tab-button.is-active {
    border-bottom-color: var(--blue-600);
}

.tab-button svg {
    width: 1rem;
    height: 1rem;
}

.map-alert-strip {
    display: flex;
    flex: 0 0 auto;
    gap: 0.6rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
    padding: 0.7rem 2rem;
}

.map-alert-strip[hidden] {
    display: none;
}

.alert-card {
    display: inline-grid;
    min-width: 11.4rem;
    min-height: 3rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--slate-50);
    padding: 0.48rem 0.65rem;
    color: var(--slate-600);
    box-shadow: var(--shadow);
}

.alert-card svg {
    grid-row: span 2;
    width: 1rem;
    height: 1rem;
}

.alert-card span {
    overflow: hidden;
    font-size: 0.74rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-card strong {
    justify-self: end;
    color: var(--slate-900);
    font-size: 0.95rem;
    font-weight: 900;
}

.alert-card small {
    grid-column: 2 / 4;
    overflow: hidden;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-card-red {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.alert-card-orange {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.alert-card-purple {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}

.alert-card-muted {
    min-width: 14rem;
    grid-template-columns: auto minmax(0, 1fr);
    color: var(--slate-500);
}

.workspace {
    display: grid;
    grid-template-columns: minmax(32rem, 2fr) minmax(25rem, 1fr);
    gap: 1rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 1.15rem 1.25rem 1.25rem;
}

.map-panel,
.side-panel {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.map-panel {
    position: relative;
    overflow: hidden;
}

.map-canvas,
.map-fallback,
.map-svg {
    width: 100%;
    height: 100%;
    min-height: 34rem;
}

.map-canvas {
    z-index: 0;
}

.map-fallback {
    position: absolute;
    inset: 0;
    background: var(--slate-50);
}

.map-canvas.is-hidden,
.map-fallback.is-hidden {
    display: none;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    min-height: 34rem;
    background: var(--slate-50);
    font: inherit;
}

.map-toolbar {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.5rem 0.7rem;
    color: var(--slate-600);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.map-toolbar span + span {
    border-left: 1px solid var(--border);
    padding-left: 0.6rem;
    color: var(--slate-900);
}

.map-legend {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 500;
    display: grid;
    gap: 0.35rem;
    min-width: 9.5rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.7rem 0.8rem;
    color: var(--slate-600);
    font-size: 0.75rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.legend-title {
    margin-bottom: 0.15rem;
    color: var(--slate-800);
    font-weight: 750;
}

.legend-dot {
    display: inline-block;
    width: 0.68rem;
    height: 0.68rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.legend-vert {
    background: var(--green-500);
}

.legend-jaune {
    background: var(--yellow-400);
}

.legend-orange {
    background: var(--orange-500);
}

.legend-rouge {
    background: var(--red-500);
}

.legend-gris {
    background: var(--slate-400);
}

.legend-zone {
    border: 2px solid #ffffff;
    background: linear-gradient(135deg, #22c55e, #2563eb 52%, #f97316);
    box-shadow: 0 0 0 1px var(--slate-300);
}

.legend-selected {
    border: 2px solid var(--blue-600);
    background: rgba(37, 99, 235, 0.22);
}

.legend-kmz {
    border: 2px solid #ffffff;
    background: #facc15;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.32);
}

.side-panel {
    min-width: 0;
    overflow: hidden;
}

.panel-scroll {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.panel-scroll::-webkit-scrollbar,
.zone-machine-table::-webkit-scrollbar,
.event-list::-webkit-scrollbar {
    width: 0.38rem;
    height: 0.38rem;
}

.panel-scroll::-webkit-scrollbar-track,
.zone-machine-table::-webkit-scrollbar-track,
.event-list::-webkit-scrollbar-track {
    background: transparent;
}

.panel-scroll::-webkit-scrollbar-thumb,
.zone-machine-table::-webkit-scrollbar-thumb,
.event-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--slate-300);
}

.detail-panel {
    background: #ffffff;
}

.machine-detail-panel {
    background: #ffffff;
}

.machine-head,
.zone-head,
.zone-detail-head {
    padding: 1.5rem;
}

.machine-head {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    border-bottom: 1px solid var(--slate-100);
    background: #ffffff;
    box-shadow:
        inset 0 3px 0 var(--blue-600),
        0 1px 0 rgba(15, 23, 42, 0.04);
}

.machine-detail-panel .machine-head {
    padding: 1.25rem;
}

.zone-head {
    border-bottom: 1px solid var(--slate-100);
}

.zone-detail-head {
    border-bottom: 1px solid var(--slate-100);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(135deg, var(--slate-800), var(--slate-900));
    box-shadow: inset 0 4px 0 var(--zone-stroke, var(--blue-600));
    color: #ffffff;
}

.zone-focus-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
}

.zone-focus-head {
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(15, 23, 42, 0.18);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 20%, transparent), transparent 44%),
        linear-gradient(180deg, var(--slate-800), var(--slate-900));
    padding: 1rem 1.35rem;
    color: #ffffff;
    box-shadow: inset 0 4px 0 var(--zone-stroke, var(--blue-600));
}

.zone-back-link {
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.36rem 0.65rem;
    color: var(--slate-800);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.zone-back-link:hover {
    border-color: #ffffff;
    background: var(--slate-50);
    color: var(--zone-text, var(--slate-900));
}

.zone-back-link svg,
.link-button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.zone-focus-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
}

.zone-focus-title h2 {
    min-width: 0;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 850;
    line-height: 1.18;
}

.zone-focus-title p {
    margin-top: 0.35rem;
    color: var(--slate-300);
    font-size: 0.84rem;
}

.zone-focus-head .panel-kicker {
    color: color-mix(in srgb, var(--zone-fill, var(--blue-600)) 34%, #ffffff);
}

.zone-score-pill {
    display: inline-flex;
    min-width: 6.25rem;
    min-height: 3.1rem;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: center;
    gap: 0.14rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.55rem 0.72rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.zone-score-pill span {
    align-self: flex-start;
    margin-right: 0.25rem;
    color: var(--slate-500);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.zone-score-pill strong {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.zone-score-pill em {
    color: var(--slate-500);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 750;
}

.zone-focus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.zone-focus-meta > span {
    display: inline-flex;
    min-height: 1.55rem;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.24rem 0.6rem;
    color: var(--slate-200);
    font-size: 0.7rem;
    font-weight: 800;
}

.zone-focus-meta strong {
    color: #ffffff;
    font-weight: 900;
}

.zone-focus-kpis {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.9rem 1.35rem 0;
}

.zone-detail-panel {
    min-height: 100%;
    background: #ffffff;
}

.zone-detail-header {
    position: sticky;
    top: 0;
    z-index: 4;
    border-bottom: 1px solid var(--slate-100);
    background:
        linear-gradient(90deg, var(--zone-soft, #eff6ff), transparent 46%),
        #ffffff;
    padding: 1.15rem 1.5rem 1.35rem;
    box-shadow: inset 0 3px 0 var(--zone-stroke, var(--blue-600));
}

.zone-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.zone-detail-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.zone-detail-title-row h2 {
    min-width: 0;
    overflow: hidden;
    color: var(--slate-800);
    font-size: 1.24rem;
    font-weight: 850;
    line-height: 1.18;
    text-overflow: ellipsis;
}

.zone-detail-title-row .panel-kicker {
    color: var(--zone-text, var(--blue-600));
}

.zone-return-button {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 30%, #ffffff);
    background: #ffffff;
    color: var(--zone-text, var(--blue-600));
}

.zone-return-button:hover {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 52%, #ffffff);
    background: var(--zone-soft, var(--slate-50));
}

.zone-version-soft {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: 0.45rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 20%, var(--border));
    border-radius: 999px;
    background: #ffffff;
    padding: 0.32rem 0.65rem;
    color: var(--slate-600);
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-meta-strip span {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 20%, var(--border));
    background: #ffffff;
}

.zone-meta-strip strong {
    margin-right: 0.16rem;
    color: var(--zone-text, var(--blue-600));
    font-weight: 900;
}

.zone-score-stack .score-badge {
    min-width: 5.75rem;
}

.zone-overview-row {
    border-bottom: 1px solid var(--slate-100);
    background: #ffffff;
}

.zone-overview-row .machine-overview-cell {
    background:
        linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--zone-fill, var(--blue-600)) 6%, #ffffff)),
        #ffffff;
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 34%, transparent);
}

.zone-detail-topline,
.zone-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.zone-detail-topline {
    align-items: center;
    margin-bottom: 0.9rem;
}

.zone-color-chip {
    width: 1.8rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 38%, #ffffff);
    border-radius: 999px;
    background: var(--zone-fill, var(--blue-600));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.zone-version-pill {
    display: inline-flex;
    min-height: 1.85rem;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.32rem 0.72rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.zone-back-button {
    display: inline-flex;
    min-height: 1.85rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.98);
    padding: 0.35rem 0.6rem;
    color: var(--slate-700);
    font-size: 0.75rem;
    font-weight: 800;
}

.zone-back-button:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: #ffffff;
    color: var(--zone-text, var(--slate-900));
}

.zone-back-button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.zone-score-card {
    display: grid;
    min-width: 5.6rem;
    min-height: 4rem;
    align-content: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.98);
    padding: 0.55rem 0.72rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.zone-score-card span {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.zone-score-card small,
.zone-score-card em {
    display: block;
    color: var(--slate-500);
    font-style: normal;
}

.zone-score-card small {
    margin-bottom: 0.2rem;
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.zone-score-card em {
    margin-top: 0.08rem;
    font-size: 0.78rem;
    font-weight: 750;
}

.zone-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.zone-hero-metric {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.55rem 0.65rem;
}

.zone-hero-metric span,
.zone-hero-metric small {
    display: block;
    overflow: hidden;
    color: var(--slate-300);
    font-size: 0.66rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.zone-hero-metric strong {
    display: block;
    margin-top: 0.2rem;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.1;
}

.zone-hero-metric small {
    margin-top: 0.24rem;
    color: var(--slate-300);
    text-transform: none;
}

.zone-focus-kpis .zone-hero-metric {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 18%, var(--border));
    background:
        linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--zone-fill, var(--blue-600)) 7%, #ffffff)),
        #ffffff;
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 36%, transparent);
}

.zone-focus-kpis .zone-hero-metric span,
.zone-focus-kpis .zone-hero-metric small {
    color: var(--slate-500);
}

.zone-focus-kpis .zone-hero-metric strong {
    color: var(--slate-900);
}

.panel-kicker {
    margin-bottom: 0.45rem;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.zone-detail-head .panel-kicker {
    color: color-mix(in srgb, var(--zone-fill, var(--blue-600)) 32%, #ffffff);
}

.title-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.machine-head h2,
.zone-head h2,
.zone-detail-head h2,
.empty-state h2 {
    min-width: 0;
    color: var(--slate-800);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.18;
}

.zone-detail-head h2 {
    color: #ffffff;
}

.subtitle,
.zone-head p,
.zone-detail-head p {
    margin-top: 0.35rem;
    color: var(--slate-500);
    font-size: 0.875rem;
}

.zone-detail-head p,
.zone-detail-head .zone-meta {
    color: var(--slate-300);
}

.zone-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.7rem;
    color: var(--slate-500);
    font-size: 0.75rem;
    font-weight: 750;
}

.zone-detail-head .zone-inline-stats {
    color: var(--slate-300);
}

.zone-inline-stats span {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    gap: 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.22rem 0.55rem;
}

.zone-inline-stats strong {
    color: #ffffff;
    font-weight: 900;
}

.mono-line {
    margin-top: 0.45rem;
    color: var(--slate-400);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
}

.mono-line strong {
    color: var(--slate-600);
}

.machine-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.machine-meta-strip span {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50);
    padding: 0.22rem 0.55rem;
    color: var(--slate-600);
    font-size: 0.68rem;
    font-weight: 800;
}

.score-stack {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.score-stack > small {
    color: var(--slate-500);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.machine-status-chip {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    padding: 0.22rem 0.55rem;
    color: #15803d;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.machine-head .panel-kicker {
    color: var(--blue-600);
}

.machine-status-chip.muted {
    border-color: var(--border);
    background: var(--slate-50);
    color: var(--slate-500);
}

.score-badge {
    display: inline-flex;
    min-width: 5.2rem;
    min-height: 3.5rem;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--slate-50);
    padding: 0.65rem 0.8rem;
    color: var(--slate-500);
    box-shadow: var(--shadow);
}

.score-badge span {
    font-size: 1.6rem;
    font-weight: 850;
    line-height: 1;
}

.score-badge small {
    font-size: 0.8rem;
    font-weight: 750;
}

.score-badge.score-good {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.score-badge.score-ok {
    border-color: #fef08a;
    background: #fefce8;
    color: #a16207;
}

.score-badge.score-watch {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.score-badge.score-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.machine-overview-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    border-bottom: 1px solid var(--slate-100);
    padding: 1rem 1.5rem;
}

.machine-detail-panel .machine-overview-row {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.machine-overview-cell {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--slate-50);
    padding: 0.7rem 0.75rem;
}

.machine-overview-cell span,
.machine-overview-cell small {
    display: block;
    overflow: hidden;
    color: var(--slate-500);
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-overview-cell strong {
    display: block;
    margin-top: 0.24rem;
    overflow: hidden;
    color: var(--slate-900);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-overview-cell small {
    margin-top: 0.28rem;
}

.micro-badge {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    padding: 0.22rem 0.55rem;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.micro-badge.warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.75rem;
    padding: 1rem 1.5rem;
}

.machine-detail-panel .info-grid {
    border-bottom: 1px solid var(--slate-100);
    padding: 1rem 1.25rem 1.1rem;
}

.info-grid span {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--slate-500);
    font-size: 0.75rem;
    font-weight: 600;
}

.info-grid strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--slate-800);
    font-size: 0.875rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-strip,
.zone-stat-grid,
.zone-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0 1.5rem 1rem;
}

.machine-kpi-band {
    border-top: 0;
    padding-top: 1rem;
}

.zone-stat-grid {
    margin-top: 1rem;
    padding: 0;
}

.zone-detail-summary {
    padding: 1rem 1.5rem 0.25rem;
}

.metric-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--slate-50);
    padding: 0.75rem;
}

.metric-card span {
    display: block;
    color: var(--slate-500);
    font-size: 0.72rem;
    font-weight: 750;
}

.metric-card strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--slate-900);
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.1;
}

.metric-card small {
    display: block;
    margin-top: 0.3rem;
    color: var(--slate-500);
    font-size: 0.72rem;
}

.panel-section {
    margin: 0 1.25rem 1rem;
    border-top: 1px solid var(--slate-100);
    padding-top: 1rem;
}

.panel-section h3 {
    color: var(--slate-800);
    font-size: 0.875rem;
    font-weight: 800;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.score-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.score-list.compact {
    gap: 0.65rem;
    margin-top: 0;
}

.zone-distribution-section {
    margin-top: 1rem;
    border-top: 0;
}

.zone-focus-panel .zone-distribution-section {
    flex: 0 0 auto;
    margin: 0.75rem 1.35rem 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.75rem 0.9rem;
}

.zone-detail-panel .zone-distribution-section {
    margin: 0.95rem 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.9rem 1rem;
}

.zone-alert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.95rem 1.5rem 0;
}

.zone-alert-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.7rem 0.75rem;
    box-shadow: inset 0 3px 0 var(--slate-300);
}

.zone-alert-card svg {
    width: 1rem;
    height: 1rem;
    color: currentColor;
}

.zone-alert-card span,
.zone-alert-card small {
    display: block;
    overflow: hidden;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-alert-card strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--slate-900);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.zone-alert-card small {
    margin-top: 0.32rem;
    font-weight: 700;
}

.zone-alert-card-red {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    box-shadow: inset 0 3px 0 #ef4444;
}

.zone-alert-card-orange {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    box-shadow: inset 0 3px 0 #f97316;
}

.zone-alert-card-purple {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
    box-shadow: inset 0 3px 0 #8b5cf6;
}

.zone-focus-panel .zone-table-section {
    min-height: 0;
    margin-top: 0.75rem;
}

.zone-distribution-section .score-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
}

.zone-distribution-section .score-row > div:first-child {
    display: block;
}

.zone-distribution-section .score-row > div:first-child span,
.zone-distribution-section .score-row > div:first-child strong {
    display: inline;
}

.zone-distribution-section .score-row > div:first-child strong {
    margin-left: 0.35rem;
}

.score-row {
    display: grid;
    gap: 0.4rem;
}

.score-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--slate-600);
    font-size: 0.78rem;
    font-weight: 650;
}

.score-row strong {
    color: var(--slate-900);
    font-weight: 850;
}

.score-track {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--slate-100);
}

.score-track span {
    display: block;
    height: 100%;
    min-width: 0.15rem;
    border-radius: 999px;
    background: var(--slate-400);
}

.score-good {
    color: #15803d !important;
}

.score-track .score-good {
    background: var(--green-500);
}

.score-ok {
    color: #a16207 !important;
}

.score-track .score-ok {
    background: var(--yellow-400);
}

.score-watch {
    color: #c2410c !important;
}

.score-track .score-watch {
    background: var(--orange-500);
}

.score-danger {
    color: #b91c1c !important;
}

.score-track .score-danger {
    background: var(--red-500);
}

.score-empty {
    color: var(--slate-400) !important;
}

.score-track .score-empty {
    background: var(--slate-300);
}

.quality-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.8rem;
}

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

.quality-cell {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.7rem 0.75rem;
}

.quality-cell span,
.quality-cell small {
    display: block;
    color: var(--slate-500);
    font-size: 0.7rem;
    font-weight: 700;
}

.quality-cell strong {
    display: block;
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--slate-900);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quality-cell small {
    margin-top: 0.3rem;
}

.benchmark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
    color: var(--slate-600);
    font-size: 0.8rem;
}

.benchmark-row strong {
    color: var(--slate-900);
    font-weight: 850;
}

.benchmark-row em {
    color: var(--slate-500);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 750;
}

.benchmark-comparison {
    display: grid;
    gap: 0.9rem;
}

.benchmark-line {
    display: grid;
    gap: 0.45rem;
}

.benchmark-track {
    position: relative;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--slate-100);
}

.benchmark-track span {
    display: block;
    height: 100%;
    min-width: 0.16rem;
    border-radius: 999px;
    background: currentColor;
}

.benchmark-track i {
    position: absolute;
    top: -0.12rem;
    bottom: -0.12rem;
    width: 2px;
    border-radius: 999px;
    background: var(--slate-800);
    opacity: 0.48;
}

.benchmark-note {
    margin-top: 0.85rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    background: #f0fdf4;
    padding: 0.65rem 0.75rem;
    color: #166534;
    font-size: 0.78rem;
    font-weight: 650;
}

.benchmark-note.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.machine-zone-list {
    display: grid;
    gap: 0.5rem;
}

.machine-zone-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    min-height: 3.1rem;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: linear-gradient(90deg, var(--zone-soft, #ffffff), #ffffff 48%);
    padding: 0.62rem 0.72rem;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.machine-zone-row:hover {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 34%, #ffffff);
    background: linear-gradient(90deg, var(--zone-soft, #eff6ff), #ffffff 66%);
    box-shadow: inset 3px 0 0 var(--zone-stroke, var(--blue-600));
}

.machine-zone-swatch {
    width: 0.6rem;
    height: 1.95rem;
    border-radius: 999px;
    background: var(--zone-fill, var(--blue-600));
}

.machine-zone-main {
    min-width: 0;
}

.machine-zone-row strong,
.machine-zone-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-zone-row strong {
    color: var(--slate-800);
    font-size: 0.82rem;
    font-weight: 850;
}

.machine-zone-row small {
    margin-top: 0.14rem;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 650;
}

.machine-zone-row em {
    color: var(--zone-text, var(--slate-700));
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.event-list {
    display: grid;
    gap: 0.5rem;
    max-height: 23rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.event-row {
    display: flex;
    min-height: 3.15rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.65rem 0.75rem;
}

.event-row strong,
.event-row span,
.event-row em {
    display: block;
}

.event-row strong {
    color: var(--slate-800);
    font-size: 0.8125rem;
    font-weight: 800;
}

.event-row span {
    margin-top: 0.12rem;
    color: var(--slate-500);
    font-size: 0.72rem;
}

.event-row em {
    flex: 0 0 auto;
    color: var(--slate-600);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
}

.event-row.danger,
.event-row.brutal {
    border-color: #fecaca;
    background: #fef2f2;
}

.event-row.warning,
.event-row.strong {
    border-color: #fed7aa;
    background: #fff7ed;
}

.track-box {
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #0f172a;
}

.track-map {
    width: 100%;
    height: 15.5rem;
    min-height: 14rem;
    background: var(--slate-100);
}

.track-box .leaflet-container {
    border-radius: 0;
}

.detail-track-line,
.detail-track-line-shadow {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.track-layer-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 23, 42, 0.94);
    padding: 0.55rem;
}

.track-toggle {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.5rem 0.25rem 0.42rem;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.track-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.track-toggle-dot {
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--slate-300);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.track-toggle em {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
}

.track-toggle.is-disabled {
    opacity: 0.48;
}

.track-toggle:has(input:not(:checked)) {
    background: rgba(15, 23, 42, 0.4);
    color: rgba(248, 250, 252, 0.62);
}

.track-toggle-acceleration .track-toggle-dot,
.detail-track-marker-acceleration span {
    background: #f97316;
}

.track-toggle-braking .track-toggle-dot,
.detail-track-marker-braking span {
    background: #ef4444;
}

.track-toggle-speed .track-toggle-dot,
.detail-track-marker-speed span {
    background: #facc15;
}

.track-toggle-loading .track-toggle-dot,
.detail-track-marker-loading span {
    background: #22c55e;
}

.track-toggle-dumping .track-toggle-dot,
.detail-track-marker-dumping span {
    background: #38bdf8;
}

.detail-track-marker {
    display: grid;
    place-items: center;
}

.detail-track-marker span {
    display: block;
    width: 0.86rem;
    height: 0.86rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.55);
}

.detail-track-tooltip {
    border: 0;
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.detail-track-tooltip::before {
    display: none;
}

.detail-track-tooltip strong,
.detail-track-tooltip span {
    display: block;
}

.detail-track-tooltip strong {
    font-size: 0.76rem;
    font-weight: 850;
}

.detail-track-tooltip span {
    margin-top: 0.15rem;
    color: rgba(248, 250, 252, 0.82);
    font-size: 0.7rem;
    font-weight: 650;
}

.zone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.zone-meta span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.6rem;
}

.zone-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.zone-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    min-height: 3.4rem;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: linear-gradient(90deg, var(--zone-soft, #ffffff), #ffffff 42%);
    padding: 0.7rem 0.8rem;
    text-align: left;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.zone-row-swatch {
    width: 0.7rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--zone-fill, var(--blue-600));
}

.zone-row:hover,
.zone-row.is-active {
    border-color: color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 34%, #ffffff);
    background: linear-gradient(90deg, var(--zone-soft, #eff6ff), #ffffff 58%);
    box-shadow: inset 3px 0 0 var(--zone-stroke, var(--blue-600));
}

.zone-row span {
    min-width: 0;
}

.zone-row strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--slate-800);
    font-size: 0.85rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-row small {
    display: block;
    margin-top: 0.15rem;
    color: var(--slate-500);
    font-size: 0.72rem;
}

.zone-row em {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 850;
}

.zone-machine-table {
    overflow: auto;
    max-height: 31rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.zone-table-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0.9rem 1.35rem 1.2rem;
}

.zone-detail-panel .zone-table-section {
    margin: 0.95rem 1.5rem 1.25rem;
}

.zone-table-section .section-heading {
    flex: 0 0 auto;
}

.zone-table-section .zone-machine-table {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
}

.zone-score-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.74rem;
}

.zone-score-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--slate-50);
    box-shadow: inset 0 -1px 0 var(--border);
}

.zone-score-table th {
    padding: 0.65rem 0.45rem;
    color: var(--slate-500);
    font-size: 0.64rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.zone-score-table th:first-child {
    min-width: 12rem;
    padding-left: 0.75rem;
    text-align: left;
}

.zone-score-table td {
    border-top: 1px solid var(--slate-100);
    padding: 0.55rem 0.45rem;
    text-align: center;
    font-weight: 850;
}

.zone-score-table td:first-child {
    padding-left: 0.75rem;
    text-align: left;
    font-weight: 700;
}

.zone-score-table th:first-child,
.zone-score-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

.zone-score-table thead th:first-child {
    z-index: 3;
    background: var(--slate-50);
}

.zone-machine-row {
    cursor: pointer;
    background: #ffffff;
}

.zone-machine-row:hover {
    background: var(--slate-50);
}

.zone-machine-row:hover td:first-child {
    background: var(--slate-50);
}

.zone-machine-row strong,
.zone-machine-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-machine-row strong {
    max-width: 14rem;
    color: var(--slate-800);
    font-size: 0.78rem;
    font-weight: 850;
}

.zone-machine-row small {
    max-width: 14rem;
    margin-top: 0.1rem;
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 600;
}

.zone-global-score {
    display: inline-flex;
    min-width: 2.35rem;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 0.4rem;
    padding: 0.18rem 0.35rem;
    background: #ffffff;
}

.link-button {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.32rem 0.6rem;
    color: var(--blue-600);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.link-button:hover {
    background: var(--slate-50);
}

.muted-text {
    margin-top: 0.75rem;
    color: var(--slate-500);
    font-size: 0.85rem;
}

.empty-state {
    display: grid;
    min-height: 100%;
    place-items: center;
    align-content: center;
    gap: 0.8rem;
    padding: 2rem;
    color: var(--slate-500);
    text-align: center;
}

.empty-state.small {
    min-height: 10rem;
}

.empty-state svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--slate-300);
}

.empty-state p {
    max-width: 18rem;
    color: var(--slate-500);
    font-size: 0.875rem;
}

.spinner {
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--slate-300);
    border-top-color: var(--blue-600);
    border-radius: 999px;
    animation: spin 900ms linear infinite;
}

.custom-marker {
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.45);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.custom-marker:hover,
.custom-marker.marker-selected {
    transform: scale(1.45);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.34);
}

.marker-vert {
    background: var(--green-500);
}

.marker-jaune {
    background: var(--yellow-400);
}

.marker-orange {
    background: var(--orange-500);
}

.marker-rouge {
    background: var(--red-500);
}

.marker-gris {
    background: var(--slate-400);
}

.marker-gris::before {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    content: "×";
    font-size: 0.65rem;
    font-weight: 900;
    transform: translate(-50%, -56%);
}

.marker-selected::after {
    position: absolute;
    inset: -0.35rem;
    border: 2px solid var(--blue-600);
    border-radius: 999px;
    content: "";
}

.map-tooltip {
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
    color: var(--slate-600) !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
}

.map-tooltip::before {
    display: none !important;
}

.zone-map-label {
    display: block;
    max-width: 11.25rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--zone-stroke, var(--blue-600)) 28%, #ffffff);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.28rem 0.55rem;
    color: var(--zone-text, var(--slate-900));
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.tooltip-title {
    color: var(--slate-900);
    font-weight: 850;
}

.fallback-marker {
    cursor: pointer;
}

.fallback-marker circle {
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.24));
}

.fallback-marker.is-selected circle {
    stroke: var(--blue-600);
    stroke-width: 4;
}

.svg-marker-vert {
    fill: var(--green-500);
}

.svg-marker-jaune {
    fill: var(--yellow-400);
}

.svg-marker-orange {
    fill: var(--orange-500);
}

.svg-marker-rouge {
    fill: var(--red-500);
}

.svg-marker-gris {
    fill: var(--slate-400);
}

.svg-zone {
    cursor: pointer;
    fill: rgba(100, 116, 139, 0.15);
    stroke: var(--slate-500);
    stroke-width: 2;
}

.svg-zone.is-selected {
    fill: rgba(37, 99, 235, 0.23);
    stroke: var(--blue-600);
    stroke-width: 3;
}

.map-view-switch {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 500;
    display: inline-flex;
    gap: 0.2rem;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.25rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.map-view-switch[hidden] {
    display: none;
}

.map-view-switch button {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.38rem;
    border: 1px solid transparent;
    border-radius: 0.42rem;
    background: transparent;
    padding: 0.38rem 0.62rem;
    color: var(--slate-500);
    font-size: 0.72rem;
    font-weight: 800;
}

.map-view-switch button:hover:not(:disabled),
.map-view-switch button.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.map-view-switch button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.map-view-switch button:focus-visible,
.track-play-button:focus-visible,
.primary-map-button:focus-visible,
.machine-more-details summary:focus-visible,
.track-toggle:focus-within {
    outline: 2px solid rgba(37, 99, 235, 0.38);
    outline-offset: 2px;
}

.map-view-switch svg,
.primary-map-button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.track-timeline {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 700;
    display: grid;
    grid-template-columns: auto minmax(15rem, 1fr) minmax(14rem, 0.72fr);
    align-items: center;
    gap: 0.85rem;
    border: 1px solid rgba(203, 213, 225, 0.98);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.97);
    padding: 0.75rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(8px);
}

.track-timeline[hidden] {
    display: none;
}

.track-play-button {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 1px solid #1d4ed8;
    border-radius: 0.55rem;
    background: var(--blue-600);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.track-play-button:hover {
    background: #1d4ed8;
}

.track-play-button svg {
    width: 1rem;
    height: 1rem;
}

.track-timeline-main {
    min-width: 0;
}

.track-timeline-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.38rem;
}

.track-timeline-heading strong {
    color: var(--slate-900);
    font-size: 0.9rem;
    font-weight: 900;
}

.track-timeline-heading span,
.track-timeline-heading small,
.track-timeline-bounds {
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 750;
}

.track-timeline-heading span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-timeline-range,
#trackTimelineRange {
    width: 100%;
    accent-color: var(--blue-600);
    cursor: crosshair;
}

.track-timeline-bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
}

.track-map-filters {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.track-map-filters .track-toggle {
    min-height: 1.65rem;
    border-color: var(--border);
    background: var(--slate-50);
    color: var(--slate-700);
    padding: 0.24rem 0.48rem 0.24rem 0.4rem;
    font-size: 0.66rem;
}

.track-map-filters .track-toggle em {
    color: var(--slate-500);
}

.track-map-filters .track-toggle:has(input:not(:checked)) {
    background: #ffffff;
    color: var(--slate-400);
    opacity: 0.68;
}

.map-panel:has(.track-timeline:not([hidden])) .map-legend {
    top: 4.5rem;
    bottom: auto;
}

.legend-route {
    background: var(--blue-600);
}

.legend-start {
    border: 2px solid var(--slate-900);
    background: #ffffff;
}

.legend-end {
    border: 2px solid #ffffff;
    background: var(--blue-600);
    box-shadow: 0 0 0 1px var(--blue-600);
}

.track-cursor-tooltip {
    border: 0;
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.95);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}

.track-cursor-tooltip::before {
    border-top-color: rgba(15, 23, 42, 0.95);
}

.track-cursor-tooltip strong,
.track-cursor-tooltip span {
    display: block;
    text-align: center;
}

.track-cursor-tooltip strong {
    font-size: 0.74rem;
    font-weight: 900;
}

.track-cursor-tooltip span {
    margin-top: 0.08rem;
    color: var(--slate-300);
    font-size: 0.66rem;
    font-weight: 700;
}

.machine-location-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
    color: var(--slate-600);
    font-size: 0.72rem;
    font-weight: 800;
}

.machine-location-line svg {
    width: 0.86rem;
    height: 0.86rem;
    flex: 0 0 auto;
    color: var(--blue-600);
}

.machine-location-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-location-line small {
    flex: 0 0 auto;
    border-left: 1px solid var(--border);
    padding-left: 0.35rem;
    color: var(--slate-500);
    font-size: inherit;
}

.machine-core-grid {
    gap: 0.9rem 1rem;
}

.load-summary-section {
    border-top: 0;
    padding-top: 1rem;
}

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

.load-source-card {
    min-width: 0;
    border: 1px solid #fde68a;
    border-radius: 0.55rem;
    background: #fffbeb;
    padding: 0.75rem;
}

.load-source-card span,
.load-source-card small {
    display: block;
    color: #92400e;
    font-size: 0.65rem;
    font-weight: 800;
}

.load-source-card span {
    text-transform: uppercase;
}

.load-source-card strong {
    display: block;
    margin-top: 0.28rem;
    color: #78350f;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.1;
}

.load-source-card small {
    margin-top: 0.3rem;
    color: #a16207;
    line-height: 1.35;
}

.load-assessment,
.load-empty-state {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.65rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    background: #f0fdf4;
    padding: 0.62rem 0.7rem;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.4;
}

.load-assessment.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.load-assessment svg,
.load-empty-state svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.load-empty-state {
    margin-top: 0;
    border-color: var(--border);
    background: var(--slate-50);
    color: var(--slate-500);
}

.track-summary-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.6rem;
    background: #eff6ff;
    padding: 0.8rem;
}

.track-summary-copy {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.65rem;
}

.track-summary-copy > div {
    min-width: 0;
}

.track-summary-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.5rem;
    background: var(--blue-600);
    color: #ffffff;
}

.track-summary-icon svg {
    width: 1rem;
    height: 1rem;
}

.track-summary-copy p,
.track-summary-copy small {
    display: block;
    margin-top: 0.2rem;
    overflow: hidden;
    color: var(--slate-600);
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-summary-copy small {
    color: var(--slate-500);
    font-size: 0.65rem;
}

.primary-map-button {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid #1d4ed8;
    border-radius: 0.5rem;
    background: var(--blue-600);
    padding: 0.45rem 0.68rem;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.primary-map-button:hover {
    background: #1d4ed8;
}

.machine-more-details {
    margin: 0 1.25rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: #ffffff;
}

.machine-more-details > summary {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    padding: 0.65rem 0.75rem;
    color: var(--slate-700);
    font-size: 0.72rem;
    font-weight: 850;
}

.machine-more-details > summary::-webkit-details-marker {
    display: none;
}

.machine-more-details > summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.machine-more-details > summary svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--slate-500);
}

.machine-more-details > summary small {
    color: var(--slate-500);
    font-size: 0.66rem;
}

.machine-more-details[open] > summary {
    border-bottom: 1px solid var(--border);
    background: var(--slate-50);
}

.machine-more-content {
    padding-top: 1rem;
}

.machine-more-content .panel-section {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

.zone-coverage-card {
    margin: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--slate-50);
    padding: 0.9rem;
}

.zone-coverage-card .section-heading {
    margin-bottom: 0.7rem;
}

.zone-coverage-card .panel-kicker {
    margin-bottom: 0.18rem;
}

.zone-coverage-card h3 {
    color: var(--slate-800);
    font-size: 0.86rem;
    font-weight: 850;
}

.zone-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.zone-coverage-item {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: #ffffff;
    padding: 0.55rem;
}

.zone-coverage-item svg {
    grid-row: span 2;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--slate-500);
}

.zone-coverage-item span,
.zone-coverage-item strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-coverage-item span {
    color: var(--slate-500);
    font-size: 0.64rem;
    font-weight: 750;
}

.zone-coverage-item strong {
    color: var(--slate-800);
    font-size: 0.68rem;
    font-weight: 850;
}

.zone-coverage-item.good {
    border-color: #bbf7d0;
}

.zone-coverage-item.good svg {
    color: #15803d;
}

.zone-coverage-item.work {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.zone-coverage-item.work svg {
    color: #1d4ed8;
}

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

@media (max-width: 1180px) {
    .workspace {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .map-panel {
        min-height: 34rem;
    }

    .side-panel {
        min-height: 38rem;
    }
}

@media (max-width: 1024px) {
    .app-header,
    .tab-strip,
    .map-alert-strip {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .workspace {
        grid-template-columns: 1fr;
        overflow: auto;
        padding: 1rem;
    }

    .map-panel {
        min-height: 32rem;
    }

    .side-panel {
        min-height: 34rem;
    }
}

@media (max-width: 720px) {
    .header-main,
    .fleet-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .fleet-legend {
        flex-wrap: wrap;
    }

    .tab-strip {
        gap: 1rem;
        overflow-x: auto;
    }

    .metric-strip,
    .zone-stat-grid,
    .info-grid,
    .hiboo-grid,
    .load-grid,
    .load-source-grid,
    .zone-coverage-grid,
    .machine-overview-row,
    .zone-focus-kpis,
    .zone-alert-grid {
        grid-template-columns: 1fr;
    }

    .machine-head,
    .zone-title-row,
    .zone-detail-topline,
    .zone-focus-title,
    .zone-detail-title-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        flex-direction: column;
    }

    .score-stack,
    .zone-score-pill,
    .zone-score-stack {
        justify-items: start;
        align-self: flex-start;
    }

    .zone-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .zone-version-pill {
        align-self: flex-start;
    }

    .map-toolbar,
    .map-legend {
        position: static;
        margin: 0.75rem;
    }

    .map-panel {
        display: grid;
        align-content: stretch;
        min-height: 36rem;
    }

    .map-view-switch {
        top: 4.5rem;
        right: 0.75rem;
    }

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

    .track-map-filters {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .track-summary-section {
        grid-template-columns: 1fr;
    }

    .primary-map-button {
        width: 100%;
    }
}