/* ============================================
   IN.APP - Module Shared Styles
   Centralized CSS for FleetTracking & modules
   ============================================ */

/* --- Animations --- */
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 var(--mud-palette-success); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Fleet Tracker (LastKnownPage) --- */
.ft-glass { background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent); }
.ft-fade { animation: fadeIn 0.2s ease-out; }
.ft-scale { animation: scaleIn 0.2s ease-out; }
.ft-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; user-select: none; }
.ft-pill:hover { transform: scale(1.06); }
.ft-pill-on { outline: 2px solid currentColor; outline-offset: 1px; }
.ft-result { padding: 10px 14px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--mud-palette-lines-default); display: flex; align-items: center; gap: 10px; }
.ft-result:hover { background: var(--mud-palette-action-default-hover); }
.ft-result:last-child { border-bottom: none; }
.ft-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mud-palette-text-secondary); font-weight: 500; display: flex; align-items: center; gap: 3px; }
.ft-speed-bar { height: 3px; border-radius: 2px; transition: width 0.3s; }
.ft-list { position: absolute; top: 22px; left: 44px; bottom: 14px; width: 300px; z-index: 18; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s; }
.ft-list-hidden { transform: translateX(-320px); opacity: 0; pointer-events: none; }
.ft-vrow { padding: 8px 12px; cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 50%, transparent); border-left: 3px solid transparent; font-family: inherit; font-size: inherit; color: inherit; outline: none; }
.ft-vrow:hover { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); transform: translateX(1px); }
.ft-vrow:active { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.ft-vrow:last-child { border-bottom: none; }
.ft-vrow-sel { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important; }
.ft-sbar { height: 2px; border-radius: 1px; transition: width 0.4s ease; }

/* --- Playback datetime bar --- */
.pb-dt-bar { border-radius: 10px; padding: 6px 14px; display: flex; align-items: center; gap: 12px; }
.pb-dt-group { display: flex; align-items: center; gap: 6px; }
.pb-dt-label { font-size: 9px; font-weight: 700; color: var(--mud-palette-text-secondary); letter-spacing: 0.06em; min-width: 28px; }
.pb-dt-input { font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; font-weight: 600; color: var(--mud-palette-text-primary); background: transparent; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px 8px; outline: none; cursor: pointer; transition: border-color 0.15s; }
.pb-dt-input:hover { border-color: var(--mud-palette-primary); }
.pb-dt-input:focus { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent); }
.pb-dt-input::-webkit-calendar-picker-indicator { filter: invert(0.5); cursor: pointer; }
.pb-dt-sep { width: 1px; height: 22px; background: var(--mud-palette-lines-default); }

/* --- Command Center --- */
.cc-panel { border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); overflow: hidden; display: flex; flex-direction: column; }
.cc-header { padding: 8px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.cc-row { padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); cursor: pointer; transition: background 0.12s; display: flex; align-items: center; gap: 8px; }
.cc-row:hover { background: var(--mud-palette-action-default-hover); }
.cc-row-sel { background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important; }
.cc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mud-palette-text-secondary); font-weight: 500; }
.cc-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; }
.cc-stat { text-align: center; padding: 8px 4px; }
.cc-stat-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.cc-stat-lbl { font-size: 10px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.cc-alert-row { padding: 6px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 11px; display: flex; align-items: center; gap: 6px; }

/* --- Sensor Dashboard --- */
.sd-gauge { position: relative; width: 120px; height: 120px; }
.sd-gauge-bg { stroke: var(--mud-palette-lines-default); fill: none; stroke-width: 10; }
.sd-gauge-fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.sd-gauge-text { font-size: 20px; font-weight: 800; }
.sd-gauge-label { font-size: 9px; fill: var(--mud-palette-text-secondary); }
.sd-spark { display: flex; align-items: flex-end; gap: 1px; height: 32px; }
.sd-spark-bar { flex: 1; min-width: 1px; border-radius: 1px 1px 0 0; transition: height 0.2s; }
.sd-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.15s; }
.sd-card:hover { border-color: var(--mud-palette-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.sd-card-sel { border-color: var(--mud-palette-primary) !important; background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.sd-area { position: relative; height: 180px; }
.sd-area svg { width: 100%; height: 100%; }

/* ═══ Device / Vehicle Detail View (dv-*) ═══ */
.dv-hero { display:flex; align-items:center; gap:16px; padding:16px 20px; margin-bottom:16px; border-radius:14px; border:1px solid var(--mud-palette-lines-default); background:var(--mud-palette-surface); }
.dv-hero-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dv-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dv-metrics-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom:12px; }
.dv-metric-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid var(--mud-palette-lines-default); background:var(--mud-palette-surface); transition:all 0.2s ease; }
.dv-metric-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.06); transform:translateY(-1px); }
.dv-metric-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dv-metric-label { font-size:10px; font-weight:600; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:2px; }
.dv-metric-value { font-size:20px; font-weight:800; line-height:1.1; letter-spacing:-0.02em; }
.dv-metric-unit { font-size:11px; font-weight:400; color:var(--mud-palette-text-secondary); }
.dv-section { border:1px solid var(--mud-palette-lines-default); border-radius:14px; background:var(--mud-palette-surface); overflow:hidden; height:100%; }
.dv-section-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--mud-palette-lines-default); }
.dv-section-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dv-section-title { font-size:14px; font-weight:700; letter-spacing:0.01em; }
.dv-kv-grid { padding:12px 16px; display:flex; flex-direction:column; gap:0; }
.dv-kv { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--mud-palette-lines-default) 40%, transparent); }
.dv-kv:last-child { border-bottom:none; }
.dv-k { font-size:12px; font-weight:600; color:var(--mud-palette-text-secondary); flex-shrink:0; margin-right:8px; }
.dv-v { font-size:13px; font-weight:500; text-align:right; }

/* --- Instrument cluster (odometer + gauges) --- */
.dv-cluster { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:10px; margin-bottom:12px; }
.dv-cluster-card { border:1px solid var(--mud-palette-lines-default); border-radius:12px; background:var(--mud-palette-surface); padding:10px 12px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; overflow:hidden; }
.dv-cluster-label { font-size:9px; font-weight:700; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:0.1em; display:flex; align-items:center; gap:4px; align-self:flex-start; }
.dv-cluster-sub { font-size:9px; font-weight:600; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:0.06em; margin-top:0; text-align:center; }

/* Odometer — compact mechanical/digital */
.dv-odometer { display:flex; align-items:center; gap:2px; padding:8px 4px; justify-content:center; }
.dv-odo-wheel { width:22px; height:32px; background:linear-gradient(180deg, #111 0%, #1a1a1a 50%, #111 100%); color:#FFB300; font-family:'Courier New', monospace; font-weight:700; font-size:20px; line-height:32px; text-align:center; border-radius:3px; border:1px solid #000; box-shadow:inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.3); text-shadow:0 0 4px rgba(255,179,0,0.4); }
.dv-odo-sep { color:#888; font-weight:700; font-size:18px; padding:0; }
.dv-odo-unit { font-size:10px; font-weight:700; color:var(--mud-palette-text-secondary); margin-left:4px; letter-spacing:0.08em; }

/* SVG dial gauge — compact size */
.dv-dial { display:block; width:100%; max-width:170px; height:auto; margin:0 auto; }

/* --- Leaflet Map Enhancements --- */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
}
.custom-popup .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.custom-popup .leaflet-popup-tip { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.custom-tooltip { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* Always-on vehicle label rendered to the right of the marker on the live map.
   Distinct from .custom-tooltip (hover only) — solid pill, no Leaflet pointer arrow. */
.vehicle-label {
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
    color: #1a1a1a; background: rgba(255,255,255,0.55);
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    pointer-events: none;
}
.vehicle-label::before { display: none; }   /* hide Leaflet's tooltip arrow */