/*
 * fleet-dashboard.css
 * Dark, data-dense theme for the Fleet Management dashboard.
 *
 * Canonical tokens live in design-system/ihmis-fleet/MASTER.md; the page-level
 * rules live in design-system/ihmis-fleet/pages/fleet-dashboard.md. Keep the
 * two in sync — this file is the ExtJS delivery of those tokens, not a second
 * source of truth.
 *
 * Everything is scoped to `.fleet-dash` so no other view is affected.
 *
 * Replaces the previous approach of 17 hardcoded Material hexes in inline
 * `bodyStyle` strings. Colour here encodes SEVERITY only — four states, not
 * seventeen decorative hues.
 *
 * Contrast (measured against --fleet-card #0E1223):
 *   foreground #F8FAFC 17.8:1 | muted-fg #94A3B8 7.3:1 | green #22C55E 8.2:1
 *   red #EF4444 4.9:1 | amber #FBBF24 11.1:1 | ring #38BDF8 8.7:1
 *   border-strong #64748B 3.9:1 (meets WCAG 1.4.11 for control boundaries)
 */

.fleet-dash {
    --fleet-bg:            #020617;
    --fleet-fg:            #F8FAFC;
    --fleet-card:          #0E1223;
    --fleet-muted:         #1A1E2F;
    --fleet-muted-fg:      #94A3B8;
    --fleet-border:        #334155;  /* decorative rules only — 1.8:1 */
    --fleet-border-strong: #64748B;  /* control boundaries — 3.9:1     */
    --fleet-secondary:     #12325F;
    --fleet-critical:      #EF4444;
    --fleet-warning:       #FBBF24;
    --fleet-positive:      #22C55E;
    --fleet-on-status:     #0F172A;  /* dark text on status fills      */
    --fleet-ring:          #38BDF8;

    /* density 8/10 */
    --fleet-space-sm:  4px;
    --fleet-space-md:  8px;
    --fleet-space-lg: 12px;
    --fleet-space-xl: 16px;
}

/* ==== Panel shell ==================================================== */
.fleet-dash,
.fleet-dash .x-panel-body {
    background: var(--fleet-bg) !important;
    color: var(--fleet-fg) !important;
}

.fleet-dash .x-panel-header,
.fleet-dash .x-panel-header-title,
.fleet-dash .x-title-text {
    background: var(--fleet-bg) !important;
    color: var(--fleet-fg) !important;
}

/* ==== Action bar ===================================================== */
.fleet-dash .x-btn-default-medium {
    background: var(--fleet-secondary) !important;
    border: 1px solid var(--fleet-border-strong) !important;
    border-radius: 6px !important;
    transition: background 180ms ease !important;
}
.fleet-dash .x-btn-default-medium .x-btn-inner,
.fleet-dash .x-btn-default-medium .x-btn-icon-el {
    color: var(--fleet-fg) !important;
}
.fleet-dash .x-btn-default-medium:hover {
    background: #273449 !important;
}
.fleet-dash .x-btn-default-medium:focus-visible {
    outline: 2px solid var(--fleet-ring) !important;
    outline-offset: 2px !important;
}

/* ==== KPI tile — base (neutral / reference state) ==================== */
.fleet-kpi {
    border: 1px solid var(--fleet-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 180ms ease !important;
}

.fleet-kpi .x-panel-header {
    background: var(--fleet-card) !important;
    border: 0 !important;
    padding: var(--fleet-space-md) var(--fleet-space-lg) var(--fleet-space-sm) !important;
}
.fleet-kpi .x-panel-header-title,
.fleet-kpi .x-title-text {
    background: transparent !important;
    color: var(--fleet-muted-fg) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.fleet-kpi .x-panel-body {
    background: var(--fleet-card) !important;
    color: var(--fleet-fg) !important;
    /* tabular-nums keeps digits column-aligned as counts change on refresh */
    font-family: 'Fira Code', ui-monospace, 'Cascadia Mono', Consolas, monospace !important;
    font-variant-numeric: tabular-nums;
    font-size: 28px !important;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    padding: var(--fleet-space-md) var(--fleet-space-lg) var(--fleet-space-lg) !important;
}

/* Clickable tiles only — non-interactive tiles keep the default cursor */
.fleet-kpi-clickable { cursor: pointer; }
.fleet-kpi-clickable:hover { border-color: var(--fleet-border-strong) !important; }
.fleet-kpi-clickable:focus-visible {
    outline: 2px solid var(--fleet-ring) !important;
    outline-offset: 2px !important;
}

/* ==== KPI tile — severity states ===================================== */
/*
 * Applied by FleetDashboardViewController only when the value is non-zero.
 * A count of 0 stays neutral: a healthy fleet must not render as a wall of
 * red, or the colour stops carrying information.
 */
.fleet-kpi-critical { border-color: var(--fleet-critical) !important; }
.fleet-kpi-critical .x-panel-body {
    background: var(--fleet-critical) !important;
    color: var(--fleet-on-status) !important;
}
.fleet-kpi-critical .x-panel-header { background: #2A1113 !important; }
.fleet-kpi-critical .x-title-text   { color: #FCA5A5 !important; }

.fleet-kpi-warning { border-color: var(--fleet-warning) !important; }
.fleet-kpi-warning .x-panel-body {
    background: var(--fleet-warning) !important;
    color: var(--fleet-on-status) !important;
}
.fleet-kpi-warning .x-panel-header { background: #2A2110 !important; }
.fleet-kpi-warning .x-title-text   { color: #FCD34D !important; }

.fleet-kpi-positive { border-color: var(--fleet-positive) !important; }
.fleet-kpi-positive .x-panel-body {
    background: var(--fleet-positive) !important;
    color: var(--fleet-on-status) !important;
}
.fleet-kpi-positive .x-panel-header { background: #0C2417 !important; }
.fleet-kpi-positive .x-title-text   { color: #86EFAC !important; }

/* Severity is never colour-alone: the controller prefixes the value with a
 * glyph (▲ critical, ● warning) that survives greyscale and colour-blindness. */
.fleet-kpi-flag {
    font-size: .62em;
    vertical-align: .18em;
    margin-right: .3em;
}

/* The glyph is meaningless to a screen reader, so the severity also ships as
 * text that is visible only to assistive technology. */
.fleet-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==== Stale-data banner ============================================== */
.fleet-stale {
    background: var(--fleet-muted) !important;
    color: var(--fleet-warning) !important;
    border: 1px solid var(--fleet-warning) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: var(--fleet-space-md) var(--fleet-space-lg) !important;
    text-align: center;
}

/* ==== Currency tile (Fuel cost) ====================================== */
.fleet-kpi-currency .x-panel-body { font-size: 22px !important; }
.fleet-kpi-currency .fleet-kpi-unit {
    color: var(--fleet-muted-fg);
    font-size: .55em;
    margin-right: .25em;
}

/* ==== Notes panel ==================================================== */
.fleet-note {
    border: 1px solid var(--fleet-border) !important;
    border-radius: 8px !important;
}
.fleet-note .x-panel-header { background: var(--fleet-muted) !important; }
.fleet-note .x-panel-body {
    background: var(--fleet-card) !important;
    color: var(--fleet-muted-fg) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.fleet-note .x-panel-body b { color: var(--fleet-fg) !important; }

/* ==== Reduced motion ================================================= */
@media (prefers-reduced-motion: reduce) {
    .fleet-dash * { transition: none !important; }
}