/* ALKARA FLEETFMS — Speed Trend Ops Stylesheet
 * Colors/fonts/radii are inherited from the global stylesheet
 * /_next/static/chunks/1t4aoiqub9ec4.css; local --speed-* aliases below map
 * page-level names onto the global tokens — do not hardcode hex values here.
 */
:root {
  --speed-bg: var(--c-surface);
  --speed-card: var(--c-white);
  --speed-border: var(--c-border);
  --speed-text: var(--c-text);
  --speed-sub: var(--c-sub);
  --speed-blue: var(--c-accent);
}

.speed-page { max-width:1380px; margin:0 auto; padding:24px 30px 64px; min-height: 100%; box-sizing: border-box; }
.speed-statuses,.speed-controls,.speed-range { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.speed-status { border-radius:99px; padding:5px 10px; font-size:10px; font-weight:700; letter-spacing:.05em; }
.speed-status[data-tone="live"] { background:#dcfce7; color:var(--c-loading); }
.speed-status[data-tone="reconnecting"],.speed-status[data-tone="degraded"] { background:#fef9c3; color:var(--c-dumping); }
.speed-status[data-tone="offline"] { background:#fee2e2; color:var(--c-error); }
.speed-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px; }
.speed-heading h2 { margin:0 0 5px; font-size:22px; }
.speed-heading p { margin:0; color:var(--speed-sub); font-size:12px; }
.speed-controls select,.speed-range button { height:34px; border:1px solid var(--speed-border); border-radius:var(--radius-sm); background:var(--c-white); color:var(--speed-text); padding:0 11px; font-size:12px; }
.speed-range button { cursor:pointer; }
.speed-range button.active { color:var(--c-white); background:var(--speed-blue); border-color:var(--speed-blue); }
.speed-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.speed-card { background:var(--speed-card); border:1px solid var(--speed-border); border-radius:10px; padding:15px; min-width:0; }
.speed-metric-label { color:var(--speed-sub); text-transform:uppercase; letter-spacing:.05em; font-size:10px; }
.speed-metric-value { margin-top:7px; font:700 20px var(--font-mono); overflow-wrap:anywhere; }
.speed-chart-card { background:var(--c-white); border:1px solid var(--speed-border); border-radius:10px; padding:18px; margin-bottom:16px; }
.speed-chart-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:8px; }
.speed-chart-title { font-size:13px; font-weight:700; }
.speed-chart-sub { color:var(--speed-sub); font-size:11px; margin-top:3px; }
.speed-legend { color:var(--speed-sub); font-size:11px; white-space:nowrap; }
.speed-legend i { display:inline-block; width:18px; border-top:2px solid var(--speed-blue); margin-right:5px; }
#speed-chart { display:block; width:100%; height:330px; }
.speed-message { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:10px 12px; border-radius:8px; font-size:12px; margin-bottom:16px; }
.speed-table-card { background:var(--c-white); border:1px solid var(--speed-border); border-radius:10px; overflow:hidden; }
.speed-table-head { padding:13px 16px; border-bottom:1px solid var(--speed-border); font-size:12px; font-weight:700; }
.speed-table-scroll { max-height:310px; overflow:auto; }
.speed-table { width:100%; border-collapse:collapse; font-size:12px; }
.speed-table th,.speed-table td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--c-surface2); white-space:nowrap; }
.speed-table th { position:sticky; top:0; background:var(--c-surface); color:var(--speed-sub); text-transform:uppercase; font-size:10px; }
.mono { font-family:var(--font-mono); }
.speed-current-card { border-left:3px solid var(--speed-blue); }
.speed-current-meta { color:var(--speed-sub); font-size:10px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.speed-note { margin-top:14px; color:var(--speed-sub); font-size:11px; }
@media (max-width:1100px) { .speed-metrics { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .speed-page { padding:14px 12px 40px; } .speed-heading { align-items:stretch; flex-direction:column; } .speed-controls { align-items:stretch; flex-direction:column; } .speed-controls select { width:100%; } .speed-range { display:grid; grid-template-columns:repeat(4,1fr); } .speed-range button { padding:0 6px; } .speed-metrics { grid-template-columns:repeat(2,1fr); } #speed-chart { height:260px; } .speed-chart-head { flex-direction:column; } }