(a when there is no link)
Online
4
--_c is the row's accent. Set it on the row; everything else follows.
============================================================================ */
body.trakzo #dashboard .tz-stats{display:flex;flex-direction:column;gap:2px}
body.trakzo #dashboard .tz-stat{--_c:var(--slate);
display:grid;grid-template-columns:1fr auto;grid-template-areas:"k v" "bar bar";
gap:7px 12px;padding:9px 8px 10px;margin:0 -8px;border-radius:10px;
text-decoration:none;color:inherit;transition:background .14s ease}
body.trakzo #dashboard a.tz-stat{cursor:pointer}
body.trakzo #dashboard a.tz-stat:hover{background:var(--hover)}
body.trakzo #dashboard .tz-stat-k{grid-area:k;font-size:13px;font-weight:500;color:var(--fg2);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.trakzo #dashboard a.tz-stat:hover .tz-stat-k{color:var(--fg)}
body.trakzo #dashboard .tz-stat-v{grid-area:v;font:650 14px/1 var(--mono);font-variant-numeric:tabular-nums;
letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
/* a row whose value is zero should not shout; it is the absence of a thing */
body.trakzo #dashboard .tz-stat.is-zero .tz-stat-v{color:var(--fg2);font-weight:500;opacity:.75}
/* the unit after a count ("Times") is a caption, not part of the number */
body.trakzo #dashboard .tz-stat-v small{font:500 10.5px/1 var(--sans);color:var(--fg3);
margin-left:3px;letter-spacing:.03em;text-transform:lowercase}
/* the track is always drawn, so the rows line up whether or not there is a bar
in them — an empty track reads as "none", a missing one reads as broken */
body.trakzo #dashboard .tz-stat-bar{grid-area:bar;height:4px;border-radius:99px;
background:color-mix(in srgb, var(--fg3) 16%, transparent);overflow:hidden}
body.trakzo #dashboard .tz-stat-bar > i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg, color-mix(in srgb, var(--_c) 62%, transparent), var(--_c));
min-width:0;transition:width .5s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
body.trakzo #dashboard .tz-stat-bar > i{transition:none}
}
/* ---- the headline number a block's rows are shares OF ---- */
body.trakzo #dashboard .tz-kpi{display:flex;align-items:baseline;gap:9px;
padding:2px 0 14px;margin-bottom:10px;box-shadow:inset 0 -1px 0 var(--tz-hair)}
body.trakzo #dashboard .tz-kpi-v{font:600 34px/1 var(--mono);letter-spacing:-.045em;color:var(--fg)}
body.trakzo #dashboard .tz-kpi-k{font-size:11.5px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--fg3)}
/* ---- a short secondary list under the rows (Tasks: the five most recent) ---- */
body.trakzo #dashboard .tz-sub{margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 var(--tz-hair)}
body.trakzo #dashboard .tz-sub-h{font-size:10.5px;font-weight:650;letter-spacing:.07em;
text-transform:uppercase;color:var(--fg3);margin-bottom:7px}
body.trakzo #dashboard .tz-sub-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:12.5px}
body.trakzo #dashboard .tz-sub-k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;color:var(--fg2)}
body.trakzo #dashboard .tz-sub-v{color:var(--fg3);font-size:11.5px;white-space:nowrap}
/* ---- "nothing happened in this period" ----
Blocks that count events have periods with no events in them, and that is
ordinary, not an error. Said once, quietly, instead of a column of zeroes. */
body.trakzo #dashboard .tz-none{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;text-align:center;padding:26px 12px;color:var(--fg3)}
body.trakzo #dashboard .tz-none-badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:var(--lime-s);color:var(--lime);margin-bottom:3px}
body.trakzo #dashboard .tz-none-badge svg{width:19px;height:19px;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.trakzo #dashboard .tz-none-title{font-size:13px;font-weight:600;color:var(--fg2)}
body.trakzo #dashboard .tz-none-sub{font-size:11.5px;color:var(--fg3)}
/* ---- a scrolling list should fade out, not be guillotined ----
Alerts Count is capped so one long list cannot set the height of the whole
grid row. Capped alone, the cap fell through the middle of a row and looked
like a rendering fault (reported). The mask makes the cut deliberate. */
body.trakzo #dashboard .tz-scroll{overflow-y:auto;scrollbar-width:thin;
scrollbar-color:var(--line-strong) transparent;
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%);
mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%)}
body.trakzo #dashboard .tz-scroll::-webkit-scrollbar{width:6px}
body.trakzo #dashboard .tz-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
body.trakzo #dashboard .tz-scroll::-webkit-scrollbar-track{background:transparent}
/* nothing to scroll: no cut, so no fade */
body.trakzo #dashboard .tz-scroll.is-short{-webkit-mask-image:none;mask-image:none}
/* ---- Distance travelled: the chart, and what stands in for it when every
vehicle read zero all week. The empty state covers the canvas box only, and
it is the whole block in that case — with no lines drawn there is nothing for
a legend to switch on and off, so the script does not build one. */
/* The chart area takes the slack in the card, so an empty state sits in the
middle of the panel instead of at the top with a void under it, and a drawn
chart grows into the space rather than leaving one. */
body.trakzo #dashboard #block_device_distance .trk-chart{flex:1;display:flex;flex-direction:column}
body.trakzo #dashboard #block_device_distance .tz-canvas-line{flex:1;min-height:180px;height:auto}
/* Only the MESSAGE centres in the spare room. Centring the whole chart area
pushed the panel's own subtitle down the card with it, which looked like a
second, floating heading. */
body.trakzo #dashboard .trk-chart.is-empty .trk-empty{flex:1;justify-content:center;padding:0 12px}
body.trakzo #dashboard #block_device_distance .phead-row{flex:none}
body.trakzo #dashboard .trk-chart{position:relative}
body.trakzo #dashboard .trk-empty{display:none}
/* nothing to plot: drop the chart box and the legend, and let the card shrink to
the message. A 400px frame around one sentence is what made an ordinary quiet
week look like a broken screen. */
body.trakzo #dashboard .trk-chart.is-empty .tz-canvas,
body.trakzo #dashboard .trk-chart.is-empty .tzl{display:none}
body.trakzo #dashboard .trk-chart.is-empty .trk-empty{display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:30px 12px 22px}
body.trakzo #dashboard .trk-empty-badge{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
background:var(--lime-s);color:var(--lime);margin-bottom:8px}
body.trakzo #dashboard .trk-empty-badge svg{width:24px;height:24px}
body.trakzo #dashboard .trk-empty-title{font-size:14px;font-weight:650;color:var(--fg2)}
body.trakzo #dashboard .trk-empty-sub{font-size:12px;color:var(--fg3)}
/* ============================================================================
APP MODALS (Bootstrap-3 / bootstrap-modal) — the app opens these via data-modal;
the theme CSS that normally styles them is not loaded, so style them here so
edit/delete/test-sms/etc. render as proper dark dialogs (not raw boxes).
NB: .modal here is the app's BS3 modal; our own page dialog uses .modal-wrap.
============================================================================ */
body.trakzo .modal{position:fixed;inset:0;z-index:1050;overflow-x:hidden;overflow-y:auto;outline:0}
body.trakzo .modal-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(4,5,6,.72)}
html[data-theme="light"] body.trakzo .modal-backdrop{background:rgba(20,28,40,.42)}
body.trakzo .modal-dialog{position:relative;width:auto;max-width:600px;margin:40px auto;z-index:1050}
body.trakzo .modal-dialog.modal-lg{max-width:900px}
body.trakzo .modal-dialog.modal-sm{max-width:420px}
body.trakzo .modal-content{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:0 40px 100px rgba(0,0,0,.6);overflow:visible}
html[data-theme="light"] body.trakzo .modal-content{box-shadow:0 30px 80px rgba(18,32,54,.24)}
body.trakzo .modal-header{display:flex;align-items:center;gap:11px;padding:16px 20px;box-shadow:inset 0 -1px 0 var(--line);border-radius:var(--r3) var(--r3) 0 0}
body.trakzo .modal-header .modal-title{font-size:16px;font-weight:700;color:var(--fg);margin:0;flex:1;order:1}
body.trakzo .modal-header .close{order:2;margin-left:auto;background:transparent;border:0;color:var(--fg3);
font-size:22px;line-height:1;cursor:pointer;opacity:.85;padding:0 4px}
body.trakzo .modal-header .close:hover{color:var(--fg);opacity:1}
body.trakzo .modal-body{padding:18px 20px;color:var(--fg2);overflow:visible}
body.trakzo .modal-body .form-group{margin-bottom:14px}
body.trakzo .modal-body label{color:var(--fg2);font-size:12.5px;font-weight:550;margin-bottom:6px;display:block}
body.trakzo .modal-body .form-control,body.trakzo .modal-body input[type=text],body.trakzo .modal-body input[type=password],
body.trakzo .modal-body input[type=email],body.trakzo .modal-body input[type=number],body.trakzo .modal-body select,
body.trakzo .modal-body textarea{width:100%;background:var(--raised);border:1.5px solid transparent;border-radius:var(--r);
color:var(--fg);font:13.5px var(--sans);padding:10px 11px;height:auto;box-shadow:none}
body.trakzo .modal-body .form-control:hover,body.trakzo .modal-body select:hover,body.trakzo .modal-body textarea:hover{background:var(--hover)}
body.trakzo .modal-body .form-control:focus,body.trakzo .modal-body select:focus,body.trakzo .modal-body textarea:focus{outline:none;border-color:var(--lime);background:var(--bg)}
body.trakzo .modal-body .checkbox,body.trakzo .modal-body .radio{display:flex;align-items:center;gap:9px;margin:0 0 8px}
body.trakzo .modal-body input[type=checkbox],body.trakzo .modal-body input[type=radio]{accent-color:var(--lime)}
body.trakzo .modal-body hr{border:0;border-top:1px solid var(--line);margin:14px 0}
body.trakzo .modal-body table{width:100%;font-size:13px}
body.trakzo .modal-body table td,body.trakzo .modal-body table th{padding:8px;box-shadow:inset 0 -1px 0 var(--line)}
body.trakzo .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;box-shadow:inset 0 1px 0 var(--line);border-radius:0 0 var(--r3) var(--r3)}
body.trakzo .modal-footer .buttons{display:flex;gap:8px;margin-left:auto}
body.trakzo .modal .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:var(--r);
padding:10px 18px;cursor:pointer;font:13.5px var(--sans);font-weight:650;text-decoration:none}
body.trakzo .modal .btn-action,body.trakzo .modal .btn-primary,body.trakzo .modal .btn-success{background:var(--lime);color:#fff}
/* light mode: the lime token is a darker olive (#5F8A08) — white text reads far
better on it than the dark ink used in dark mode. */
html[data-theme="light"] body.trakzo .modal .btn-action,
html[data-theme="light"] body.trakzo .modal .btn-primary,
html[data-theme="light"] body.trakzo .modal .btn-success{color:#fff}
body.trakzo .modal .btn-action:hover,body.trakzo .modal .btn-primary:hover{filter:brightness(1.08)}
body.trakzo .modal .btn-default{background:var(--raised);color:var(--fg2);border-color:var(--line)}
body.trakzo .modal .btn-default:hover{background:var(--hover);color:var(--fg)}
body.trakzo .modal .btn-danger{background:var(--coral);color:#fff}
body.trakzo .modal .nav-tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);margin-bottom:14px;padding:0;list-style:none;flex-wrap:wrap}
body.trakzo .modal .nav-tabs > li > a{display:block;padding:9px 13px;color:var(--fg3);font-size:13px;font-weight:560;border-radius:var(--r) var(--r) 0 0;text-decoration:none}
body.trakzo .modal .nav-tabs > li.active > a{color:var(--fg);box-shadow:inset 0 -2px 0 var(--lime)}
/* ============================================================================
LOOKUP TABLES (Objects Move/Idle/Stop/Offline/Inactive/Unreach, Events, ...)
Teztrak redesign of the yajra DataTables page. Look: demo-lookup.html.
The table markup/classes are generated by DataTables JS; we only style them.
============================================================================ */
body.trakzo .lookup-page{max-width:1340px}
body.trakzo .lookup-page .card{position:relative}
body.trakzo .lookup-page .ph{padding:16px 20px;align-items:center}
body.trakzo .lookup-body{padding:0}
/* NB: DataTables wraps its filter row in a div.top — same class as our top bar.
Float it up into the header row (top-right, aligned with the title) so the
header is one compact strip instead of a tall empty band. Reset the leaked
top-bar styles too. */
body.trakzo .lookup-page .dataTables_wrapper .top{position:absolute;top:28px;right:20px;height:auto;width:auto;
background:transparent;box-shadow:none;padding:0;margin:0;display:flex;align-items:center;gap:10px;justify-content:flex-end;z-index:3}
@media (max-width:640px){ body.trakzo .lookup-page .dataTables_wrapper .top{position:static;padding:12px 16px;box-shadow:inset 0 -1px 0 var(--line)} }
body.trakzo .lookup-page .dataTables_wrapper .bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:12px 16px;box-shadow:inset 0 1px 0 var(--line)}
/* search box */
body.trakzo .lookup-page .dataTables_filter{margin:0}
body.trakzo .lookup-page .dataTables_filter label{font-size:0;margin:0;color:transparent;position:relative;display:block}
body.trakzo .lookup-page .dataTables_filter input{font:13px var(--sans);min-width:250px;background-color:var(--raised);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:12px center;
border:1.5px solid var(--line);border-radius:var(--r);color:var(--fg);padding:9px 12px 9px 36px;margin:0}
body.trakzo .lookup-page .dataTables_filter input::placeholder{color:var(--fg3)}
body.trakzo .lookup-page .dataTables_filter input:hover{background-color:var(--hover)}
body.trakzo .lookup-page .dataTables_filter input:focus{outline:none;border-color:var(--lime);background-color:var(--bg);box-shadow:0 0 0 3px var(--lime-s)}
html[data-theme="light"] body.trakzo .lookup-page .dataTables_filter input:focus{background-color:#fff}
/* per-page length select */
body.trakzo .lookup-page .dataTables_length{margin:0;order:-1}
body.trakzo .lookup-page .dataTables_length label{font-size:0;color:transparent;margin:0;display:flex;align-items:center;gap:6px}
body.trakzo .lookup-page .dataTables_length select{font:12.5px var(--mono);background:var(--raised);border:1.5px solid transparent;
border-radius:var(--r);color:var(--fg);padding:8px 30px 8px 12px;cursor:pointer;min-width:70px;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center}
body.trakzo .lookup-page .dataTables_length select:hover{background-color:var(--hover)}
body.trakzo .lookup-page .dataTables_length select:focus{outline:none;border-color:var(--lime)}
body.trakzo .lookup-page .dataTables_length option{background:var(--panel);color:var(--fg)}
/* the table */
body.trakzo .lookup-page .table-responsive{overflow-x:auto}
body.trakzo .lookup-page table.dataTable{width:100% !important;border-collapse:collapse;font-size:13.5px;margin:0;color:var(--fg2)}
body.trakzo .lookup-page table.dataTable thead th{text-align:left;font-size:11px;font-weight:650;color:var(--fg3);
padding:11px 14px;box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap;border:0;background:transparent;cursor:pointer;position:relative}
body.trakzo .lookup-page table.dataTable thead th:hover{color:var(--fg2)}
body.trakzo .lookup-page table.dataTable thead th.sorting_asc,
body.trakzo .lookup-page table.dataTable thead th.sorting_desc{color:var(--lime)}
/* replace DataTables' default sort background-image arrows with clean caret glyphs */
body.trakzo .lookup-page table.dataTable thead th.sorting,
body.trakzo .lookup-page table.dataTable thead th.sorting_asc,
body.trakzo .lookup-page table.dataTable thead th.sorting_desc{background-image:none !important}
body.trakzo .lookup-page table.dataTable thead th.sorting_asc:after{content:"▲";font-size:8px;margin-left:6px;color:var(--lime)}
body.trakzo .lookup-page table.dataTable thead th.sorting_desc:after{content:"▼";font-size:8px;margin-left:6px;color:var(--lime)}
body.trakzo .lookup-page table.dataTable tbody td{padding:11px 14px;box-shadow:inset 0 -1px 0 var(--line);border:0;white-space:nowrap;color:var(--fg2)}
body.trakzo .lookup-page table.dataTable tbody tr:hover td{background:var(--hover);color:var(--fg)}
body.trakzo .lookup-page table.dataTable tbody td a{color:var(--lime);text-decoration:none}
body.trakzo .lookup-page table.dataTable tbody td a:hover{text-decoration:underline}
body.trakzo .lookup-page table.dataTable .no-data,
body.trakzo .lookup-page table.dataTable td.dataTables_empty{text-align:center;color:var(--fg3);padding:40px 0}
/* row action buttons/icons */
body.trakzo .lookup-page table.dataTable .btn-group .btn,
body.trakzo .lookup-page table.dataTable .icon{color:var(--fg3);background:transparent;border:0}
body.trakzo .lookup-page table.dataTable .btn-group .btn:hover{color:var(--lime)}
/* info + pagination */
body.trakzo .lookup-page .dataTables_info{color:var(--fg3);font:11.5px var(--mono);padding:0;margin:0}
body.trakzo .lookup-page .dataTables_paginate{margin-left:auto;display:flex;gap:4px}
body.trakzo .lookup-page .dataTables_paginate .paginate_button{min-width:30px;height:30px;display:inline-flex;align-items:center;
justify-content:center;padding:0 9px;border:0 !important;border-radius:var(--r);background:transparent;color:var(--fg2) !important;
font:12.5px var(--sans);font-weight:600;cursor:pointer}
body.trakzo .lookup-page .dataTables_paginate .paginate_button:hover{background:var(--hover) !important;color:var(--fg) !important}
body.trakzo .lookup-page .dataTables_paginate .paginate_button.current{background:var(--lime-s) !important;color:var(--lime) !important}
body.trakzo .lookup-page .dataTables_paginate .paginate_button.disabled{opacity:.3;cursor:default}
body.trakzo .lookup-page .dataTables_paginate .paginate_button.disabled:hover{background:transparent !important}
/* processing loader */
body.trakzo .lookup-page .dataTables_processing{background:var(--panel);color:var(--fg2);border-radius:var(--r);
box-shadow:0 0 0 1px var(--line)}
/* ============================================================================
FLEET OVERVIEW — palette, page header and summary cards (2026-09-24)
The dashboard is the only screen on this palette. Everything here is scoped
under #dashboard (and the page shell under .trakzo-page:has(#dashboard)), so
the map, the admin and every other screen keep the product's blue accent. The
tokens are REDECLARED on #dashboard rather than changed at :root, which is
what makes that containment true rather than merely intended.
THE ACCENT IS THE PRODUCT'S, NOT THE DASHBOARD'S (changed 2026-09-24).
This screen was briefly given its own emerald. It now DERIVES every colour
from the tokens the rest of the app already uses, so the dashboard follows
Signal Azure — and follows it automatically if that accent is ever changed,
because nothing here restates a hex.
--em the accent = --lime (the product accent)
--em-deep the one dark card = that accent mixed toward ink
--em-soft the accent's tint = --lime-s
--off offline = --coral
--unreach never connected = --violet
Statuses keep their own colours because they carry meaning: offline is not
"the accent, but sadder". Every one of them is also labelled in words, since
colour alone is not readable for everyone.
The names stay `--em*` so the panels and the chart helper do not need to know
what the accent happens to be. Do NOT set `--lime` from `--em` here: --em is
defined FROM --lime, and doing both makes the pair circular and both invalid.
============================================================================ */
body.trakzo #dashboard{
--em:var(--lime);
--em-soft:var(--lime-s);
/* The dark summary card. Derived from the accent rather than picked, so it
stays a deep version of whatever the accent is. */
--em-deep:color-mix(in srgb, var(--lime) 42%, #04121F);
--off:var(--coral);
--unreach:var(--violet);
}
/* the page ground: soft grey in light, unchanged near-black in dark */
html[data-theme="light"] body.trakzo.trakzo-page:has(#dashboard){background:#F2F5F7}
/* ---- page header ---- */
body.trakzo #dashboard .dash-head{display:block;margin-bottom:18px}
body.trakzo #dashboard .dash-eyebrow{font:600 10.5px/1 var(--mono);letter-spacing:.18em;
text-transform:uppercase;color:var(--em);opacity:.9;margin:0 0 9px}
body.trakzo #dashboard .dash-head h1{font-size:24px;font-weight:750;letter-spacing:-.03em;
line-height:1.05;margin:0;color:var(--fg)}
/* ---- the four summary cards ----
One row on desktop, two on tablet, one column on a phone. auto-fit rather
than a fixed count so the row cannot produce a lone stranded card. */
body.trakzo #dashboard .fleet-cards{display:grid;gap:14px;margin-bottom:16px;
grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:1100px){ body.trakzo #dashboard .fleet-cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ body.trakzo #dashboard .fleet-cards{grid-template-columns:1fr} }
body.trakzo #dashboard .fcard{display:block;background:var(--panel);border:1px solid var(--line);
border-radius:16px;padding:18px 20px 16px;text-decoration:none;color:inherit;min-width:0;
transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
html[data-theme="light"] body.trakzo #dashboard .fcard{box-shadow:0 1px 2px rgba(16,32,52,.04)}
body.trakzo #dashboard a.fcard:hover{border-color:var(--em);transform:translateY(-1px)}
body.trakzo #dashboard a.fcard:focus-visible{outline:2px solid var(--em);outline-offset:2px}
body.trakzo #dashboard .fcard-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
body.trakzo #dashboard .fcard-title{flex:1;min-width:0;font-size:14px;font-weight:650;color:var(--fg);
letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.trakzo #dashboard .fcard-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;
place-items:center;background:var(--raised);color:var(--fg2)}
body.trakzo #dashboard .fcard-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.trakzo #dashboard .fcard-ic.is-warn{background:color-mix(in srgb, var(--off) 16%, transparent);color:var(--off)}
body.trakzo #dashboard .fcard-n{font:700 36px/1 var(--mono);letter-spacing:-.05em;color:var(--fg);
padding-bottom:14px;margin-bottom:12px;box-shadow:inset 0 -1px 0 var(--line);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.trakzo #dashboard .fcard-n em{font-style:normal;font-size:20px;font-weight:600;color:var(--fg3)}
body.trakzo #dashboard .fcard-foot{font-size:12.5px;color:var(--fg3);display:flex;align-items:center;
gap:5px;flex-wrap:wrap;min-height:18px}
body.trakzo #dashboard .fsep{opacity:.5}
body.trakzo #dashboard .fdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--fg3)}
body.trakzo #dashboard .fdot.is-offline{background:var(--off)}
body.trakzo #dashboard .fdot.is-unreach{background:var(--unreach)}
/* ---- the accent card. Its own colours, because it is the only thing on the
page that sits on a dark fill in BOTH themes — so it cannot inherit tokens
that flip with the theme without going unreadable in one of them. ---- */
body.trakzo #dashboard .fcard.is-accent{background:var(--em-deep);border-color:transparent}
html[data-theme="light"] body.trakzo #dashboard .fcard.is-accent{
box-shadow:0 6px 18px -10px color-mix(in srgb, var(--lime) 55%, transparent)}
body.trakzo #dashboard .fcard.is-accent .fcard-title{color:#EAF6F1}
body.trakzo #dashboard .fcard.is-accent .fcard-n{color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.16)}
body.trakzo #dashboard .fcard.is-accent .fcard-n em{color:rgba(255,255,255,.62)}
body.trakzo #dashboard .fcard.is-accent .fcard-foot{color:rgba(255,255,255,.72)}
body.trakzo #dashboard .fcard.is-accent .fcard-ic{background:var(--em);color:#fff}
body.trakzo #dashboard a.fcard.is-accent:hover{border-color:transparent;
background:color-mix(in srgb, var(--lime) 52%, #04121F)}
/* ============================================================================
DASHBOARD "SIGNAL" UPGRADE (2026-09-03). UI ONLY — supersedes the flat v2
styling above. Adds depth (gradient panels + soft shadow), makes the lime
behave like light (glow on live values), sets data in mono, gives charts an
area fill + glowing endpoint, refines the donut, and turns the Overview KPIs
into an instrument strip. No markup/flow changes; blocks + AJAX untouched.
============================================================================ */
/* ---- page shell: a calmer, blue-biased ground + a real page header ---- */
body.trakzo.trakzo-page:has(#dashboard){background:
radial-gradient(120% 70% at 88% -8%, var(--lime-s), transparent 46%), var(--bg)}
body.trakzo #dashboard{padding:26px 22px 56px;max-width:1360px}
/* The eyebrow above the H1 used to be a CSS `content:` string. It is real text in
index.blade.php now — a generated one could not be selected, copied, read by a
screen reader or translated, and it printed twice the moment the markup gained
its own. The .dash-head rules live in the FLEET OVERVIEW section above. */
/* ---- panel layout ----------------------------------------------------------
The reference is two wide/narrow rows: distance beside connectivity, then
recent events beside tasks. DOM order cannot deliver that — the blocks are
emitted in whatever order the user's settings list them — so each block is
placed by id, with `order` for the sequence and a span for the width.
Every block is optional (Setup can switch any of them off), so nothing is
positioned relative to a neighbour: turn one off and the rest simply close
up. That is also why there is no fixed row count here.
---------------------------------------------------------------------------- */
/* #dashboard_blocks carries Bootstrap's `row` class, and the theme gives
`.row` a clearfix: `.row:after{content:""; display:table}`. On a float layout
that pseudo-element is invisible. On a GRID it is a grid item — so it took
row 1, column 1, and every panel was pushed one column to the right, leaving
the first row looking oddly indented with a gap at its end. Killing the
content removes the item; the clearfix has nothing to clear here anyway. */
body.trakzo #dashboard #dashboard_blocks::after{content:none}
body.trakzo #dashboard #dashboard_blocks{grid-auto-flow:row;align-items:stretch}
/* PANELS IN A ROW ARE THE SAME HEIGHT. This was briefly changed to natural
height, to stop Task overview growing to match the events table beside it.
That was the wrong cure: a short card then ENDED partway down the row and the
page background showed through beneath it, which reads as a rendering fault
rather than as spare room. Equal heights, aligned bottoms.
The real fix for "too tall" is to take the height out of the CONTENT — the
donut and its legend are smaller, the events header is one row instead of
two, and a short panel centres what it has in the space it is given (see
.dashboard-content below) rather than stranding it at the top. */
body.trakzo #dashboard .dashboard-block .panel{height:100%;display:flex;flex-direction:column}
body.trakzo #dashboard .dashboard-block .panel-body,
body.trakzo #dashboard .dashboard-block .dashboard-content{flex:1;display:flex;flex-direction:column}
body.trakzo #dashboard #block_device_distance {order:1; grid-column:span 8}
body.trakzo #dashboard #block_device_activity {order:2; grid-column:span 4}
body.trakzo #dashboard #block_device_overview {order:3; grid-column:span 8}
body.trakzo #dashboard #block_latest_tasks {order:4; grid-column:span 4}
/* The two device-status panels share a row so they read as one band: the
filter strip, and the lifecycle totals that belong with it. Alerts then gets
the full width to itself, because its rows are label + bar + count and cramming
them into half a row is what made the labels truncate. */
body.trakzo #dashboard #block_over_view {order:5; grid-column:1 / -1}
/* The Devices panel is hidden, not deleted: every figure it showed — total,
online, offline, unreachable and expired — is inside the Device status panel
above it now, and showing both was the duplication this merge removes. The
block still loads (one small request); switch "Devices" off in Setup to stop
even that. Nothing about the block itself was changed, so turning it back on
after removing this line restores it exactly. */
body.trakzo #dashboard #block_device_status_counts{display:none}
body.trakzo #dashboard #block_latest_events {order:7; grid-column:1 / -1}
/* Tablet: the wide/narrow pairing stops working below roughly 1100px — the
narrow column gets too tight for a donut and a legend side by side. */
@media (max-width:1100px){
body.trakzo #dashboard #dashboard_blocks > .dashboard-block{grid-column:span 6 !important}
}
@media (max-width:760px){
body.trakzo #dashboard #dashboard_blocks > .dashboard-block{grid-column:1 / -1 !important}
}
/* ---- Distance: the figure above the chart and the two footnotes under it ---- */
body.trakzo #dashboard .trk-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:12px;padding-top:11px;box-shadow:inset 0 1px 0 var(--tz-hair);
font-size:11.5px;color:var(--fg3)}
body.trakzo #dashboard .trk-chart.is-empty .trk-foot,
body.trakzo #dashboard .trk-chart.is-empty .phead-row .ptotal{display:none}
/* ---- Fleet connectivity: donut over its legend, both centred ----
NB the block's own content box is a flex row from an older layout. A flex item
is shrink-to-fit, and `.ovpie` also declares `container-type:inline-size`,
which tells the browser to size it WITHOUT looking at its contents — the two
together resolved to a width of zero and the donut disappeared entirely. The
content box is a plain block again, and the container query that needed
`container-type` belonged to the old side-by-side arrangement and is gone. */
body.trakzo #dashboard #block_device_activity .dashboard-content{display:block}
body.trakzo #dashboard .ovpie{display:flex;flex-direction:column;align-items:stretch;gap:0;
container-type:normal;width:100%}
body.trakzo #dashboard .ovpie{flex:1;justify-content:center}
body.trakzo #dashboard .ovpie .tz-canvas-ovpie{align-self:center;margin:0 0 14px}
body.trakzo #dashboard .tzl-conn{gap:0}
body.trakzo #dashboard .tzl-conn .tzl-item{padding:9px 0;box-shadow:inset 0 -1px 0 var(--tz-hair);
border-radius:0;font-size:13px}
body.trakzo #dashboard .tzl-conn .tzl-item:last-child{box-shadow:none}
body.trakzo #dashboard .tzl-conn .tzl-val{font-variant-numeric:tabular-nums;white-space:pre}
/* (The .statgrid/.statcell rules that used to sit here are gone with the markup
they styled. Device status is one merged panel now — see the
"DEVICE STATUS — the merged panel" section below.) */
/* ---- Devices: the compact lifecycle strip ----
Counts, not bars. These figures are not comparable with each other — the first
is the total the rest are drawn from — so they are laid out as a row of
equals-in-shape rather than as a chart that invites comparison. Each is a link
to its own lookup table; Expired is only reachable from here. */
body.trakzo #dashboard .lifegrid{display:grid;gap:8px;
grid-template-columns:repeat(auto-fit, minmax(96px, 1fr))}
body.trakzo #dashboard .lifecell{--_c:var(--fg3);display:flex;flex-direction:column;gap:3px;
padding:11px 12px;border-radius:12px;background:var(--raised);border:1px solid var(--line);
text-decoration:none;color:inherit;min-width:0;
transition:border-color .15s ease, background .15s ease}
body.trakzo #dashboard a.lifecell:hover{background:var(--hover);border-color:var(--_c)}
body.trakzo #dashboard a.lifecell:focus-visible{outline:2px solid var(--_c);outline-offset:2px}
body.trakzo #dashboard .lifecell-n{font:600 22px/1 var(--mono);letter-spacing:-.04em;color:var(--_c);
font-variant-numeric:tabular-nums}
/* Wrap, do not truncate. "Unreacha…" is no more readable than "Unreach" was. */
body.trakzo #dashboard .lifecell-k{font-size:11.5px;color:var(--fg2);min-width:0;
line-height:1.3;overflow-wrap:anywhere}
/* ---- Fleet connectivity legend: three aligned columns ----
The count and the percentage used to be one string in one cell, so neither
lined up down the list. They are separate columns now, both tabular, both
right-aligned, with the label taking the slack. */
body.trakzo #dashboard .tzl-conn .tzl-item{display:grid;
grid-template-columns:10px minmax(0,1fr) 3.5ch 4.5ch;align-items:center;gap:10px;
padding:8px 0;box-shadow:inset 0 -1px 0 var(--tz-hair);border-radius:0;font-size:13px}
body.trakzo #dashboard .tzl-conn .tzl-item:last-child{box-shadow:none}
body.trakzo #dashboard .tzl-conn .tzl-name{flex:none;color:var(--fg2)}
body.trakzo #dashboard .tzl-conn .tzl-val{display:contents}
body.trakzo #dashboard .tzl-conn .tzl-count,
body.trakzo #dashboard .tzl-conn .tzl-pct{font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;
text-align:right;white-space:nowrap}
body.trakzo #dashboard .tzl-conn .tzl-count{color:var(--fg)}
body.trakzo #dashboard .tzl-conn .tzl-pct{color:var(--fg3)}
/* ---- Recent events ----------------------------------------------------------
The table used to sit inside a second, nested card (.panel.panel-transparent)
with its own padding and border, inside the block's card — a box in a box,
which is where most of the wasted width and the cramped columns came from.
The nested card is gone; the header strip and the table are direct children of
the block's content box now.
COLUMN WIDTHS. Device, Type and Time are sized to their content and never
wrap; Message takes whatever is left and wraps. That is the only column whose
length is unpredictable, so it is the only one allowed to reflow — sizing the
others from content is what stops a long message from squeezing a timestamp
into two lines.
---------------------------------------------------------------------------- */
body.trakzo #dashboard #block_device_overview .evhead{display:flex;align-items:center;gap:10px;
margin:0 0 12px}
body.trakzo #dashboard #block_device_overview .evhead{align-items:flex-start;margin:0 0 14px}
body.trakzo #dashboard #block_device_overview .evhead-sub{flex:1;min-width:0;margin:0;
font-size:13px;color:var(--fg2);line-height:1.45}
/* the table fills what is left of the card, and its rows breathe into it */
body.trakzo #dashboard #block_device_overview .dashboard-content{min-height:0}
body.trakzo #dashboard #block_device_overview .evwrap{flex:1}
body.trakzo #dashboard #block_device_overview .evhead .link{display:inline-flex;align-items:center;gap:5px;
padding:6px 12px;border-radius:99px;background:var(--em-soft);color:var(--em);
text-decoration:none;font-size:11.5px;font-weight:650;white-space:nowrap;line-height:1;flex:none}
body.trakzo #dashboard #block_device_overview .evhead .link:after{content:"→";font-weight:600}
body.trakzo #dashboard #block_device_overview .evhead .link:hover{background:var(--em);color:#fff}
body.trakzo #dashboard #block_device_overview .evhead .link:focus-visible{outline:2px solid var(--em);outline-offset:2px}
body.trakzo #dashboard #block_device_overview .evhead .btn.icon.filter{flex:none;color:var(--fg3);
width:30px;height:30px;display:inline-grid;place-items:center;border-radius:9px;cursor:pointer}
body.trakzo #dashboard #block_device_overview .evhead .btn.icon.filter:hover{background:var(--hover);color:var(--fg)}
body.trakzo #dashboard #block_device_overview .evhead .btn.icon.filter:focus-visible{outline:2px solid var(--em);outline-offset:2px}
/* the scroller. Only this box ever scrolls sideways, and only when it must. */
body.trakzo #dashboard #block_device_overview .evwrap{overflow-x:auto;max-width:100%}
body.trakzo #dashboard .evtable{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
body.trakzo #dashboard .evtable th{text-align:left;font:650 10.5px/1 var(--sans);letter-spacing:.07em;
text-transform:uppercase;color:var(--fg3);padding:0 12px 9px;border:0;background:transparent;
box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap}
body.trakzo #dashboard .evtable td{padding:11px 12px;border:0;box-shadow:inset 0 -1px 0 var(--tz-hair);
color:var(--fg2);vertical-align:top}
body.trakzo #dashboard .evtable tbody tr:last-child td{box-shadow:none}
body.trakzo #dashboard .evtable tbody tr:hover td{background:var(--hover)}
/* first and last columns sit flush with the card's padding, not inset again */
body.trakzo #dashboard .evtable th:first-child,
body.trakzo #dashboard .evtable td:first-child{padding-left:0}
body.trakzo #dashboard .evtable th:last-child,
body.trakzo #dashboard .evtable td:last-child{padding-right:0}
body.trakzo #dashboard .evtable .ev-device{color:var(--fg);font-weight:600;white-space:nowrap}
body.trakzo #dashboard .evtable .ev-type{white-space:nowrap;color:var(--fg2)}
/* the only column that may wrap, and the only one that absorbs spare width */
body.trakzo #dashboard .evtable .ev-msg{width:100%;white-space:normal;overflow-wrap:anywhere;
color:var(--fg3);min-width:110px}
/* Times are tabular and right-aligned so the column reads as a column. It never
wraps and never touches the card edge — the row's own padding-right is 0, so
the gap comes from the cell before it. */
body.trakzo #dashboard .evtable .ev-time{text-align:right;white-space:nowrap;
font:500 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg2);
padding-left:20px}
body.trakzo #dashboard .evtable th:last-child{text-align:right;padding-left:20px}
body.trakzo #dashboard .evtable .no-data{text-align:center;color:var(--fg3);padding:34px 0;
box-shadow:none}
/* On a phone the table is wider than the card whatever we do, so it scrolls
inside .evwrap. Letting the timestamp WRAP as well was the worst of both: the
rows grew to two lines each AND the column still sat off the right edge. The
timestamp stays on one line; the container does the scrolling. */
@media (max-width:520px){
body.trakzo #dashboard .evtable td,
body.trakzo #dashboard .evtable th{padding:9px 8px}
body.trakzo #dashboard .evtable .ev-time{padding-left:14px}
body.trakzo #dashboard .evtable th:last-child{padding-left:14px}
body.trakzo #dashboard .evtable .ev-msg{min-width:80px}
}
/* Tasks share a row with the events table, which is taller. Rather than leave
the four bars stranded at the top of the card with a void beneath them, the
list takes the spare room and centres itself in it. The bars keep their own
spacing — the card is simply balanced, not stretched. */
body.trakzo #dashboard #block_latest_tasks .tz-stats{flex:1;justify-content:center}
body.trakzo #dashboard #block_latest_tasks .tz-sub{margin-top:auto}
/* Tasks: the reference puts the bars edge to edge under the total */
/* The label column was a fixed 96px and truncated every status but the first
("Task in progr…"). It sizes to the longest label now — max-content, capped so
a long translation cannot squeeze the bar out of existence. */
body.trakzo #dashboard #block_latest_tasks .tz-stat{
grid-template-columns:minmax(0, max-content) minmax(60px, 1fr) auto;
grid-template-areas:"k bar v";align-items:center;gap:12px}
body.trakzo #dashboard #block_latest_tasks .tz-stat-k{max-width:150px}
body.trakzo #dashboard #block_latest_tasks .tz-stat-bar{height:8px}
@media (max-width:420px){
body.trakzo #dashboard #block_latest_tasks .tz-stat{grid-template-columns:1fr auto;
grid-template-areas:"k v" "bar bar";align-items:start;gap:7px 12px}
}
/* ---- panel heading: a title, and under it a line saying what you are looking
at. The subtitle is written by the block's CONTENT template, because only the
content knows the period or the device count it is describing — so it arrives
with the AJAX payload and updates with it. ---- */
body.trakzo #dashboard .panel-title{font:650 15px/1.2 var(--sans);letter-spacing:-.015em;
color:var(--fg);text-transform:none}
body.trakzo #dashboard .panel-heading{padding:18px 20px 0}
body.trakzo #dashboard .dashboard-content{padding:4px 20px 20px}
/* Subtitles were --fg3 at 12.5px, which is the same treatment as a disabled
control. They carry real information (the period, the device count, what the
ordering means), so they read at --fg2 and a size that survives a laptop
screen. */
body.trakzo #dashboard .psub{font-size:13px;color:var(--fg2);margin:2px 0 16px;line-height:1.45}
/* a figure the panel leads with, shown to the right of its title */
body.trakzo #dashboard .phead-row{display:flex;align-items:flex-end;gap:16px;
justify-content:space-between;margin:2px 0 14px;flex-wrap:wrap}
body.trakzo #dashboard .phead-row .psub{margin:0}
body.trakzo #dashboard .ptotal{text-align:right;line-height:1.1;min-width:0}
body.trakzo #dashboard .ptotal b{display:block;font:700 26px/1 var(--mono);letter-spacing:-.04em;color:var(--fg)}
body.trakzo #dashboard .ptotal span{display:block;font-size:11.5px;color:var(--fg3);margin-top:4px}
/* ---- the block card: depth via gradient + hairline + soft shadow ---- */
body.trakzo #dashboard #dashboard_blocks{gap:14px}
body.trakzo #dashboard .dashboard-block .panel{
background:linear-gradient(180deg, var(--raised), var(--panel)) !important;
border:1px solid var(--line) !important;border-radius:16px !important;
box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 14px 34px -22px rgba(0,0,0,.55) !important}
body.trakzo #dashboard .dashboard-block .panel:hover{border-color:var(--line-strong) !important}
/* (The panel heading, its title and the content padding are declared once, in
the FLEET OVERVIEW section above. They used to be restated here as a small
uppercase grey label, which quietly overrode it.) */
body.trakzo #dashboard .panel-title .icon{color:var(--em)}
/* ---- all numeric data reads as telemetry (mono, tabular) ---- */
body.trakzo #dashboard .count,body.trakzo #dashboard .n,body.trakzo #dashboard .dash-num,
body.trakzo #dashboard table td:last-child,body.trakzo #dashboard .val,body.trakzo #dashboard b{
font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* ---- Devices (percents) DONUT ----
The ring's size, thickness and colour are Chart.js's now (see the CHARTS
section above and assets/js/trakzo-charts.js), so the drop-shadow and
stroke-width rules that used to live here are gone: they addressed an