/* ===================================
   Pyr Fleet Components
   Shared fleet / heat-map / period-selector styles
   =================================== */

/* Extracted from user-dashboard.css so both the customer dashboard and the
   admin customer-view can pull ONLY the fleet component rules — without the
   page-layout rules (.dashboard, .dashboard-header, etc.) that conflict with
   admin-portal.css. The customer dashboard loads this alongside
   user-dashboard.css; the admin customer-view loads this alone. */

/* ===================================
   Design Tokens
   ===================================
   These --pyr-* (and --vera-, --chart- compat aliases) custom properties are
   defined here rather than in user-dashboard.css because fleet.css is loaded on
   BOTH the customer dashboard (via _UserLayout) and the admin customer-view,
   while user-dashboard.css is not loaded on the admin page. Custom-property
   resolution is global to the document and not stylesheet-order dependent, so
   any rule in either file that references these tokens resolves correctly as
   long as fleet.css is loaded. */

:root {
    /* Surfaces */
    --pyr-bg: #F0EAE0;
    --pyr-surface: #FFFFFF;
    --pyr-surface-raised: #FFFFFF;
    --pyr-surface-muted: #F5F0EA;

    /* Text */
    --pyr-text: #2C1810;
    --pyr-text-secondary: #7A6555;
    --pyr-text-muted: #A89888;

    /* Accents */
    --pyr-amber: #C8956C;
    --pyr-amber-soft: rgba(200, 149, 108, 0.12);
    --pyr-tint: #C4956A;

    /* Status */
    --pyr-green: #34A853;
    --pyr-green-bg: rgba(52, 168, 83, 0.08);
    --pyr-red: #D93025;
    --pyr-red-bg: rgba(217, 48, 37, 0.08);
    --pyr-orange: #E8710A;
    --pyr-orange-bg: rgba(232, 113, 10, 0.08);
    --fire-red: #D4442A;
    --fire-red-light: #FDECEA;

    /* Borders & Depth */
    --pyr-border: rgba(44, 24, 16, 0.1);
    --pyr-border-strong: rgba(44, 24, 16, 0.15);
    --pyr-shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.08), 0 1px 2px rgba(44, 24, 16, 0.12);
    --pyr-shadow-md: 0 4px 12px rgba(44, 24, 16, 0.1), 0 2px 4px rgba(44, 24, 16, 0.12);
    --pyr-shadow-lg: 0 12px 32px rgba(44, 24, 16, 0.12), 0 4px 8px rgba(44, 24, 16, 0.1);

    /* Spacing */
    --pyr-space-xs: 4px;
    --pyr-space-sm: 8px;
    --pyr-space-md: 16px;
    --pyr-space-lg: 24px;
    --pyr-space-xl: 32px;
    --pyr-space-2xl: 48px;

    /* Radius */
    --pyr-radius-sm: 8px;
    --pyr-radius-md: 12px;
    --pyr-radius-lg: 16px;
    --pyr-radius-pill: 100px;

    /* Fonts */
    --pyr-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --pyr-font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* Transitions */
    --pyr-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Backward compat aliases for CSS used by admin-portal.css overrides */
    --vera-background: var(--pyr-bg);
    --vera-surface: var(--pyr-surface);
    --vera-text-primary: var(--pyr-text);
    --vera-text-secondary: var(--pyr-text-secondary);
    --vera-text-light: var(--pyr-text-muted);
    --vera-tint: var(--pyr-tint);
    --vera-border: var(--pyr-border-strong);
    --vera-icon: var(--pyr-text-secondary);
    --vera-button-primary: var(--pyr-tint);
    --vera-button-text: #FFFFFF;
    --vera-error: var(--pyr-red);
    --vera-success: var(--pyr-green);
    --vera-warning: var(--pyr-orange);
    --vera-active: var(--pyr-green);
    --vera-inactive: var(--pyr-red);
    --vera-font-family: var(--pyr-font);
    --vera-font-mono: var(--pyr-font-mono);
    --vera-transition-fast: 150ms var(--pyr-ease);
    --vera-transition-normal: 250ms var(--pyr-ease);
    --vera-radius-md: var(--pyr-radius-sm);
    --vera-radius-lg: var(--pyr-radius-md);
    --vera-radius-xl: var(--pyr-radius-lg);
    --vera-radius-pill: var(--pyr-radius-pill);
    --vera-radius-round: 50%;
    --vera-spacing-xs: var(--pyr-space-xs);
    --vera-spacing-sm: var(--pyr-space-sm);
    --vera-spacing-base: 12px;
    --vera-spacing-md: var(--pyr-space-md);
    --vera-spacing-lg: 20px;
    --vera-spacing-xl: var(--pyr-space-lg);
    --vera-spacing-2xl: var(--pyr-space-xl);
    --vera-spacing-3xl: var(--pyr-space-2xl);
    --vera-shadow-subtle: var(--pyr-shadow-sm);
    --vera-shadow-medium: var(--pyr-shadow-md);
    --vera-shadow-strong: var(--pyr-shadow-lg);
    --vera-divider: var(--pyr-border-strong);
    --vera-accent: var(--pyr-amber);
    --vera-notification: var(--pyr-orange);

    /* Chart Colors */
    --chart-line-color: var(--pyr-green);
    --chart-area-color: rgba(52, 168, 83, 0.1);
    --chart-active-tooltip: rgba(52, 168, 83, 0.95);
    --chart-axis-color: var(--pyr-border-strong);
    --chart-active-line: rgba(100, 100, 100, 0.3);
}

/* Time Period Selector */
.time-period-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.period-btn {
    padding: 6px 12px;
    background: transparent;
    color: var(--pyr-text-muted);
    border: 1px solid var(--pyr-border-strong);
    border-radius: var(--pyr-radius-pill);
    font-family: var(--pyr-font);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms var(--pyr-ease);
}

.period-btn:hover {
    background: var(--pyr-surface-muted);
    color: var(--pyr-text-secondary);
}

.period-btn.active {
    background: var(--pyr-text);
    color: #fff;
    border-color: var(--pyr-text);
}

.period-btn:active { opacity: 0.8; }

/* ===================================
   Fleet row entrance animation
   =================================== */

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

.fleet-row {
    animation: fadeInUp 0.35s var(--pyr-ease) backwards;
}

.fleet-row:nth-child(1) { animation-delay: 0.03s; }
.fleet-row:nth-child(2) { animation-delay: 0.08s; }
.fleet-row:nth-child(3) { animation-delay: 0.13s; }
.fleet-row:nth-child(4) { animation-delay: 0.18s; }
.fleet-row:nth-child(5) { animation-delay: 0.23s; }
.fleet-row:nth-child(6) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    .fleet-row { animation: none; }
}

/* ===================================
   Fleet Heat-Map Dashboard (stacked)
   =================================== */

/* Toolbar: title + arrange (top row), fleet-wide period selector (below) */
.fleet-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--pyr-space-md);
    margin-bottom: var(--pyr-space-md);
}

/* Title and Arrange share the top row; Arrange sits flush right, in line
   with "Fleet Overview". */
.fleet-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pyr-space-md);
    min-width: 0;
}

.fleet-title {
    font-family: var(--pyr-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pyr-text);
    margin: 0;
}

.fleet-arrange-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--pyr-text-secondary);
    border: 1px solid var(--pyr-border-strong);
    border-radius: var(--pyr-radius-pill);
    font-family: var(--pyr-font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms var(--pyr-ease);
}

.fleet-arrange-btn:hover {
    background: var(--pyr-surface-muted);
    color: var(--pyr-text);
}

.fleet-arrange-btn.active {
    background: var(--pyr-amber);
    color: #fff;
    border-color: var(--pyr-amber);
}

/* Gateway status strip */
.fleet-gateway-strip {
    display: flex;
    align-items: center;
    gap: var(--pyr-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--pyr-space-md);
}

.fleet-gateway-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pyr-space-sm);
    padding: 6px 12px;
    background: var(--pyr-surface);
    border: 1px solid var(--pyr-border);
    border-radius: var(--pyr-radius-pill);
    box-shadow: var(--pyr-shadow-sm);
    cursor: pointer;
    transition: box-shadow 200ms var(--pyr-ease), border-color 200ms var(--pyr-ease);
}

.fleet-gateway-pill:hover {
    box-shadow: var(--pyr-shadow-md);
    border-color: var(--pyr-border-strong);
}

.fleet-gateway-pill-icon {
    display: inline-flex;
    color: var(--pyr-amber);
    opacity: 0.8;
}

.fleet-gateway-pill-name {
    font-family: var(--pyr-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pyr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.fleet-gateway-pill-last-seen {
    font-size: 0.6875rem;
    color: var(--pyr-text-muted);
    white-space: nowrap;
}

/* Body: stacked panes on the left, shared sticky legend on the right */
/* The stack takes the full width and reads as one aligned chart: one
   surface, rows separated by hairline gaps. */
.fleet-body {
    display: flex;
    flex-direction: column;
}

/* Each unit is a discrete card with a clear gap between them, so it's never
   ambiguous which title owns which chart (critical when rows stack on mobile). */
.fleet-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pyr-space-md);
}

/* Shared temperature legend — a slim horizontal strip above the stack.
   The canvas (drawn by HeatmapRenderer.renderLegend, orientation:horizontal)
   sizes to this container's width. */
.fleet-legend-bar {
    /* display toggled to flex from JS when the body is shown */
    align-items: center;
    gap: var(--pyr-space-sm);
    margin-bottom: var(--pyr-space-md);
}

.fleet-legend-bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pyr-text-secondary);
    white-space: nowrap;
}

.fleet-legend {
    flex: 1;
    min-width: 0;
    max-width: 360px;
}

/* ── Device row (Fleet Overview redesign) ────────────────────────────────
   Left identity column (name → status → bottom-anchored readout) + the
   full-width heat-map pane. Spec colors are literal hex from the handoff;
   fonts/surfaces map to the existing Pyr tokens. */
.fleet-row {
    display: flex;
    align-items: stretch;
    min-height: 150px;
    padding: 16px 28px;
    background: var(--pyr-surface);
    border: 1px solid var(--pyr-border-strong);
    border-radius: var(--pyr-radius-md);
    box-shadow: var(--pyr-shadow-sm);
}

/* Identity column — fixed 340px, name at top, readout pushed to the bottom. */
.fleet-row-rail {
    width: 340px;
    flex: 0 0 340px;
    min-width: 0;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
}

/* Name row holds the (edit-mode-only) drag handle + the hero name. */
.fleet-id-name-row {
    display: flex;
    align-items: flex-start;
    gap: var(--pyr-space-sm);
    min-width: 0;
}

.fleet-drag-handle {
    /* Hidden outside edit mode; shown via .fleet-editing .fleet-drag-handle */
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    color: var(--pyr-text-muted);
    cursor: grab;
    border-radius: var(--pyr-radius-sm);
    transition: background 150ms var(--pyr-ease), color 150ms var(--pyr-ease);
}

.fleet-drag-handle:hover {
    background: var(--pyr-surface-muted);
    color: var(--pyr-text-secondary);
}

.fleet-drag-handle:active {
    cursor: grabbing;
}

/* Device name — the hero of each row (19px / 600). Dimmed when offline. */
.fleet-row-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--pyr-font);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: #2a2d31;
    text-decoration: none;
}

.fleet-row.fleet-offline .fleet-row-name {
    color: #5c574e;
}

.fleet-row-name:hover {
    text-decoration: underline;
}

/* Status block: quiet when online, loud flag when there's a problem. */
.fleet-status-block {
    margin-top: 5px;
}

/* Online → a small green dot + "Updated {lastSeen}". */
.fleet-online-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fleet-online-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4f7a44;
}

.fleet-online-text {
    font-size: 13px;
    color: #6f6a60;
}

/* Problem → an inline-flex flag pill (bg/border/color set inline per accent). */
.fleet-flag-banner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 7px;
    white-space: nowrap;
}

.fleet-flag-icon { font-size: 12px; }

.fleet-flag-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.fleet-flag-seen {
    font-size: 12px;
    opacity: 0.82;
}

.fleet-row-last-seen { white-space: nowrap; }

/* Gateway provenance — small muted line; the dot conveys gateway health. */
.fleet-via-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 4px;
    font-size: 12.5px;
    color: #a39c90;
}

.fleet-via-line > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-via-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fleet-via-dot.online { background: var(--pyr-green); }
.fleet-via-dot.warning { background: var(--pyr-orange); }
.fleet-via-dot.offline { background: var(--pyr-red); }

/* Bottom-anchored readout: caption + big temperature + 7-day range bar. */
.fleet-readout {
    margin-top: auto;
    padding-top: 12px;
}

.fleet-readout-caption {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b3ada2;
}

.fleet-readout-temp-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 6px;
    margin-bottom: 14px;
}

/* Big temperature — 34px mono, neutral (not temperature-color-coded). */
.fleet-row-temp {
    font-family: var(--pyr-font-mono);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #2a2d31;
    font-variant-numeric: tabular-nums;
}

.fleet-row.fleet-offline .fleet-row-temp {
    color: #8c8579; /* dimmed to signal a stale reading */
}

.fleet-row-temp.no-data {
    color: var(--pyr-text-muted);
    font-weight: 400;
}

/* 7-day min/max range as a bar with a marker at the current reading. */
.fleet-range { width: 210px; }

.fleet-range-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #a8a298;
    font-variant-numeric: tabular-nums;
}

.fleet-range-caption {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #b3ada2;
    white-space: nowrap;
}

/* Placeholder shown when no depth-0 (internal) probe is present — sits in
   the range-bar slot and matches the vertical footprint of labels + track. */
.fleet-range-empty {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b3ada2;
}

.fleet-range-track {
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: #e7e0d4;
}

.fleet-range-marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a2d31;
    box-shadow: 0 0 0 2px #fff;
    transform: translate(-50%, -50%);
}

/* Heat-map pane */
.fleet-row-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fleet-heatmap {
    width: 100%;
}

.fleet-no-data {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyr-surface-muted);
    border-radius: var(--pyr-radius-sm);
    color: var(--pyr-text-muted);
    font-size: 0.8125rem;
}

/* Edit (arrange) mode — reordering is only possible after entering edit mode,
   so the normal dashboard can't be rearranged by accident. In edit mode the
   whole row is draggable; displaced rows slide via a FLIP transform from JS. */
.fleet-stack.fleet-editing .fleet-row {
    cursor: grab;
    border-radius: var(--pyr-radius-sm);
    box-shadow: inset 0 0 0 1px var(--pyr-border-strong);
}

.fleet-stack.fleet-editing .fleet-row:active {
    cursor: grabbing;
}

.fleet-stack.fleet-editing .fleet-drag-handle {
    display: inline-flex;
    cursor: grab;
}

/* While arranging, the panes are non-interactive (no crosshair) and names
   don't navigate — the surface is purely for reordering. */
.fleet-stack.fleet-editing .fleet-heatmap {
    pointer-events: none;
}

.fleet-stack.fleet-editing .fleet-row-name {
    pointer-events: none;
}

.fleet-row.fleet-dragging {
    opacity: 0.4;
    background: var(--pyr-amber-soft);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

/* Toast — transient save-failure notice */
.fleet-toast {
    position: fixed;
    bottom: var(--pyr-space-lg);
    left: 50%;
    transform: translate(-50%, 8px);
    padding: 10px 18px;
    background: var(--pyr-text);
    color: #fff;
    font-family: var(--pyr-font);
    font-size: 0.8125rem;
    border-radius: var(--pyr-radius-sm);
    box-shadow: var(--pyr-shadow-lg);
    opacity: 0;
    transition: opacity 250ms var(--pyr-ease), transform 250ms var(--pyr-ease);
    z-index: 2000;
    pointer-events: none;
}

.fleet-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Responsive: rail collapses above the pane; legend spans the width */
@media (max-width: 768px) {
    .time-period-selector { justify-content: center; }
    .period-btn { flex: 1 1 auto; min-width: 60px; }

    .fleet-legend {
        max-width: none;
    }

    /* Bigger gap + stronger shadow so stacked cards are unmistakably separate
       — the title/chart of one unit can't be confused with the next. */
    .fleet-stack {
        gap: var(--pyr-space-lg);
    }

    .fleet-row {
        flex-direction: column;
        gap: var(--pyr-space-md);
        padding: 16px 18px;
        box-shadow: var(--pyr-shadow-md);
    }

    /* Identity column spans the width and stacks above the chart; the readout
       no longer needs to be pushed to the bottom of a fixed-height row. */
    .fleet-row-rail {
        width: auto;
        flex-basis: auto;
        padding-right: 0;
    }

    .fleet-readout {
        margin-top: 0;
        padding-top: 4px;
    }

    .fleet-gateway-pill-last-seen {
        display: none;
    }
}