/* ============================================================================ trakzo.css — redesign design-kit (Teztrak) Tokens + components extracted from the approved mockups (design-screens/login.html et al.). Dark-first with a light variant. SAFETY: every rule is scoped under `body.trakzo` (and tokens are only APPLIED inside that scope), so this file cannot affect any legacy screen that does not opt in. Loaded via the new trakzo_* layouts only. Never built by gulp. ============================================================================ */ :root{ --bg:#090A0C; --panel:#101318; --raised:#171B21; --hover:#1E232B; --line:#252B34; --line-strong:#343C48; --fg:#F2F4F7; --fg2:#98A1AE; --fg3:#616A77; --lime:#3D9CF0; --lime-s:rgba(61,156,240,.14); /* Signal Azure — one accent everywhere (2026-09-05) */ --teal:#2BD9A8; --coral:#FF5470; --amber:#FFB93E; --violet:#9C6BFF; --slate:#5A6479; --g1:rgba(61,156,240,.26); --g2:rgba(43,217,168,.21); --g3:rgba(43,217,168,.10); --dot:rgba(255,255,255,.045); --ink:255,255,255; --r:9px; --r2:18px; --r3:16px; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; } html[data-theme="light"]{ --bg:#F1F4F8; --panel:#FFFFFF; --raised:#F4F7FB; --hover:#E9EFF6; --line:#DFE6EE; --line-strong:#C3CEDC; --fg:#0E1218; --fg2:#4E5967; --fg3:#7C8695; --lime:#1F76D2; --lime-s:rgba(31,118,210,.12); /* Signal Azure (light) */ --teal:#0E9E76; --coral:#DA2E50; --amber:#B87503; --violet:#6C43C9; --slate:#7A8698; --g1:rgba(31,118,210,.42); --g2:rgba(43,217,168,.30); --g3:rgba(31,118,210,.16); --dot:rgba(16,24,40,.05); --ink:16,24,40; } /* ---------- reset within scope ---------- */ body.trakzo{background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased;margin:0} body.trakzo *{box-sizing:border-box} body.trakzo svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;flex:none} body.trakzo a{color:var(--fg2);text-decoration:none} body.trakzo a:hover{color:var(--lime)} /* ============================================================================ AUTH SCREENS (login / register / forgot / reset / confirm) ============================================================================ */ body.trakzo.trakzo-auth{height:100vh;display:grid;place-items:center;padding:24px;overflow:hidden} /* backdrop: quiet road network + brand-colour trips (pure CSS/SVG) */ body.trakzo .bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)} body.trakzo .bgfx .wash{position:absolute;inset:0; background:radial-gradient(52% 48% at 12% 18%, var(--g1) 0%, transparent 64%), radial-gradient(48% 44% at 88% 82%, var(--g2) 0%, transparent 62%)} body.trakzo .bgfx svg{position:absolute;inset:0;width:100%;height:100%} body.trakzo .bgfx .rd{fill:none;stroke:rgba(var(--ink),.085);stroke-width:2;stroke-linecap:round} body.trakzo .bgfx .nd{fill:rgba(var(--ink),.20)} body.trakzo .bgfx .tr{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:170 1420; animation:trakzo-run 14s linear infinite} @keyframes trakzo-run{to{stroke-dashoffset:-1590}} @media (prefers-reduced-motion:reduce){body.trakzo .bgfx .tr{animation:none;stroke-dasharray:none;opacity:.5}} body.trakzo .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.15; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} html[data-theme="light"] body.trakzo .grain{opacity:.08} /* theme toggle */ body.trakzo .thm{position:fixed;top:22px;right:22px;z-index:60;display:flex;align-items:center;gap:7px; height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel); color:var(--fg2);cursor:pointer;font:12.5px var(--sans);font-weight:560} body.trakzo .thm:hover{color:var(--fg);border-color:var(--lime)} /* auth card (scoped to auth screens so its fixed width does not leak to page cards) */ body.trakzo.trakzo-auth .card{position:relative;z-index:2;width:416px;max-width:100%;background:var(--panel); border-radius:var(--r2);box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); overflow:hidden;animation:trakzo-rise .5s cubic-bezier(.22,1,.36,1) both} html[data-theme="light"] body.trakzo.trakzo-auth .card{box-shadow:0 24px 60px rgba(20,35,60,.14), 0 0 0 1px rgba(16,24,40,.06)} @keyframes trakzo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} body.trakzo.trakzo-auth .card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--lime) 24%,var(--teal) 76%,transparent)} body.trakzo.trakzo-auth .card .inner{padding:36px 38px 30px} body.trakzo .crest{display:flex;justify-content:center;margin-bottom:20px} body.trakzo .crest .well{width:98px;height:98px;border-radius:27px;background:var(--raised); display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)} html[data-theme="light"] body.trakzo .crest .well{box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)} body.trakzo .crest .well img{height:76px;width:auto;display:block;max-width:100%} body.trakzo .title{text-align:center;margin-bottom:26px} body.trakzo .title h1{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15} body.trakzo .title p{font-size:13px;color:var(--fg3);margin-top:6px} /* alerts (map Laravel flash → these) */ body.trakzo .alert{display:flex;align-items:flex-start;gap:9px;border-radius:var(--r);padding:11px 13px; font-size:13px;margin-bottom:16px;background:rgba(255,84,112,.12);color:var(--coral);border:0} body.trakzo .alert.ok,body.trakzo .alert-success{background:rgba(43,217,168,.12);color:var(--teal)} body.trakzo .alert-danger{background:rgba(255,84,112,.12);color:var(--coral)} /* fields */ body.trakzo .fld{margin-bottom:14px} body.trakzo .fld label{display:block;font-size:12px;color:var(--fg2);font-weight:600;margin-bottom:7px} body.trakzo .ipt{position:relative} body.trakzo .ipt .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg3);transition:color .18s} /* styles BOTH the design's inputs and Laravel Form:: .form-control output */ body.trakzo .ipt input, body.trakzo .ipt .form-control{width:100%;background:var(--raised);border:1.5px solid transparent; border-radius:var(--r);color:var(--fg);font:14.5px var(--sans);padding:13px 13px 13px 41px; transition:border-color .18s,background .18s,box-shadow .18s;height:auto;box-shadow:none} body.trakzo .ipt input::placeholder,body.trakzo .ipt .form-control::placeholder{color:var(--fg3)} body.trakzo .ipt input:hover,body.trakzo .ipt .form-control:hover{background:var(--hover)} body.trakzo .ipt input:focus,body.trakzo .ipt .form-control:focus{outline:none;border-color:var(--lime); background:var(--bg);box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 14%, transparent)} html[data-theme="light"] body.trakzo .ipt input:focus, html[data-theme="light"] body.trakzo .ipt .form-control:focus{background:#fff;box-shadow:0 0 0 4px rgba(95,138,8,.13)} body.trakzo .ipt:focus-within .ic{color:var(--lime)} body.trakzo .ipt .eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:31px;height:31px; border:0;border-radius:7px;background:transparent;color:var(--fg3);cursor:pointer;display:grid;place-items:center} body.trakzo .ipt .eye:hover{color:var(--fg);background:var(--hover)} /* remember row + checkbox */ body.trakzo .rowx{display:flex;align-items:center;justify-content:space-between;margin:18px 0 22px} body.trakzo .chk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--fg2);user-select:none;margin:0} body.trakzo .chk input{position:absolute;opacity:0;width:0;height:0} body.trakzo .chk .box{width:19px;height:19px;border-radius:6px;background:var(--raised);border:1.5px solid var(--line); display:grid;place-items:center;flex:none;transition:.16s} body.trakzo .chk .box svg{width:11px;stroke-width:3.2;color:#fff;opacity:0;transition:.16s} body.trakzo .chk input:checked + .box{background:var(--lime);border-color:var(--lime)} body.trakzo .chk input:checked + .box svg{opacity:1} body.trakzo .chk input:focus-visible + .box{outline:2px solid var(--lime);outline-offset:2px} body.trakzo .lnk{font-size:13px;color:var(--fg2);font-weight:530} body.trakzo .lnk:hover{color:var(--lime)} /* primary button */ body.trakzo .go{position:relative;width:100%;border:0;border-radius:var(--r);background:var(--lime); color:#fff;font:15.5px var(--sans);font-weight:750;letter-spacing:-.012em;padding:14px 0;cursor:pointer; overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;transition:filter .16s,transform .08s} body.trakzo .go svg{transition:transform .22s cubic-bezier(.22,1,.36,1)} body.trakzo .go:hover{filter:brightness(1.09)} body.trakzo .go:hover svg{transform:translateX(4px)} body.trakzo .go:active{transform:translateY(1px)} /* secondary (register/forgot as full-width) */ body.trakzo .go-2{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid var(--line); border-radius:var(--r);background:var(--raised);color:var(--fg);font:14px var(--sans);font-weight:600; padding:12px 0;cursor:pointer;margin-top:10px;transition:.16s} body.trakzo .go-2:hover{border-color:var(--lime);color:var(--fg)} /* footer + links */ body.trakzo .links{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);text-align:center; font-size:13px;color:var(--fg3)} body.trakzo .links a{color:var(--fg2);font-weight:600} body.trakzo .links a:hover{color:var(--lime)} body.trakzo .foot{padding:15px 38px 20px;border-top:1px solid var(--line);text-align:center; font:11px var(--mono);letter-spacing:.06em;color:var(--fg3)} /* external (Azure) methods */ body.trakzo .ext{margin-top:16px;text-align:center} body.trakzo .ext h3{font-size:12px;color:var(--fg3);font-weight:600;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em} body.trakzo .ext img{max-height:38px;width:auto;border-radius:8px} /* app store links */ body.trakzo .applinks{display:flex;gap:10px;justify-content:center;margin-top:16px} body.trakzo .applinks img{height:38px;width:auto} /* captcha (whatever the include renders, keep it tidy) */ body.trakzo .fld img{max-width:100%;border-radius:var(--r)} /* validation errors (error_for / help-block / text-danger) */ body.trakzo .help-block,body.trakzo .text-danger,body.trakzo .invalid-feedback{ color:var(--coral);font-size:12px;margin-top:6px;display:block} body.trakzo .has-error .form-control{border-color:var(--coral)} /* ============================================================================ MODAL / DIALOG SHELL (settings and other dialogs) Standalone-page variant: renders centered over a blurred backdrop. ============================================================================ */ body.trakzo.trakzo-modal-page{height:100vh;overflow:hidden} body.trakzo .behind{position:fixed;inset:0;padding:16px;filter:blur(1px);opacity:.3;pointer-events:none} body.trakzo .behind .b1{height:54px;background:var(--panel);border-radius:var(--r2);margin-bottom:8px} body.trakzo .behind .b2{height:calc(100% - 78px);background:var(--panel);border-radius:var(--r2)} body.trakzo .scrim{position:fixed;inset:0;background:rgba(4,5,6,.72)} html[data-theme="light"] body.trakzo .scrim{background:rgba(20,28,40,.42)} body.trakzo .modal-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px} body.trakzo .dlg{width:900px;max-width:100%;max-height:100%;background:var(--panel);border-radius:var(--r3); display:flex;flex-direction:column;overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05); /* fill-mode is `forwards`, NOT `both`. `both` includes the BACKWARDS fill, which applies the `from` keyframe's transform before the animation runs — and inside the map's Setup child modal the dialog is inserted while still display:none, so the animation never starts and that transform is held indefinitely. A transformed ancestor becomes the containing block for every position:fixed descendant, which is how the row action menus (`data-position="fixed"`, placed by app.js from the trigger's viewport offset) ended up displaced off-screen and the gear looked dead. `forwards` keeps the identical animation but leaves the element untransformed before it starts and after it ends. */ animation:trakzo-pop .28s cubic-bezier(.22,1,.36,1) forwards} html[data-theme="light"] body.trakzo .dlg{box-shadow:0 30px 80px rgba(18,32,54,.24),0 0 0 1px rgba(16,24,40,.07)} /* Opacity only — deliberately no `transform`. Any transform on .dlg, even briefly, makes it the containing block for its position:fixed descendants. The row action menus in Setup's list panes are placed by app.js as position:fixed using the trigger's VIEWPORT offset (`data-position="fixed"`), so a transformed .dlg silently re-bases those coordinates and the menu lands off-screen — the gear then looks dead. It was not enough to change the fill-mode: inside the map's Setup child modal the dialog is inserted while display:none, so the animation sits at 0% and the `from` keyframe's transform is held indefinitely. Removing transform from the keyframes is the only version that cannot regress. The old app has no .dlg wrapper at all, which is why the gear always worked there. Trade-off: the dialog fades in without the 10px rise / .99 scale. */ @keyframes trakzo-pop{from{opacity:0}to{opacity:1}} body.trakzo .mh{display:flex;align-items:center;gap:11px;padding:17px 20px 15px;flex:none} body.trakzo .mh .ico{width:34px;height:34px;border-radius:10px;background:var(--lime-s);color:var(--lime);display:grid;place-items:center} body.trakzo .mh h2{font-size:17px;font-weight:700;letter-spacing:-.02em} body.trakzo .mh p{font-size:12.5px;color:var(--fg3);margin-top:1px} body.trakzo .mh .x{margin-left:auto;width:32px;height:32px;border:0;border-radius:var(--r);background:transparent;color:var(--fg3);cursor:pointer;display:grid;place-items:center;text-decoration:none} body.trakzo .mh .x:hover{background:var(--hover);color:var(--fg)} body.trakzo .mf{display:flex;align-items:center;gap:9px;padding:14px 20px;box-shadow:inset 0 1px 0 var(--line);flex:none} body.trakzo .mf .sp{flex:1} body.trakzo .btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:var(--r);padding:10px 18px; cursor:pointer;font:13.5px var(--sans);font-weight:650;text-decoration:none} body.trakzo .btn.pri{background:var(--lime);color:#fff} body.trakzo .btn.pri:hover{filter:brightness(1.08)} body.trakzo .btn.gh{background:var(--raised);color:var(--fg2)} body.trakzo .btn.gh:hover{background:var(--hover);color:var(--fg)} body.trakzo .btn.xs{padding:6px 11px;font-size:12px} /* split: side-nav + body */ body.trakzo .split{display:grid;grid-template-columns:200px 1fr;flex:1;min-height:0} body.trakzo .snav{background:var(--raised);padding:10px 8px;overflow-y:auto} body.trakzo .snav a,body.trakzo .snav button{width:100%;text-align:left;border:0;background:transparent;color:var(--fg2); font:13px var(--sans);font-weight:530;padding:9px 11px;border-radius:var(--r);cursor:pointer;display:flex; align-items:center;gap:9px;margin-bottom:2px;text-decoration:none} body.trakzo .snav a:hover,body.trakzo .snav button:hover{background:var(--hover);color:var(--fg)} body.trakzo .snav a.on,body.trakzo .snav button.on{background:var(--panel);color:var(--fg);font-weight:640;box-shadow:inset 0 0 0 1px var(--line)} body.trakzo .snav a.on svg,body.trakzo .snav button.on svg{color:var(--lime)} body.trakzo .snav .grp{font-size:10.5px;font-weight:700;color:var(--fg3);letter-spacing:.05em;padding:11px 11px 5px} body.trakzo .mb{overflow-y:auto;padding:18px 20px 22px;min-height:0} body.trakzo .pane{display:none} body.trakzo .pane.on{display:block} /* the settings form fills the dialog so the body scrolls and the footer pins */ body.trakzo .dlg .setform{display:flex;flex-direction:column;flex:1;min-height:0} body.trakzo .sect{font-size:11.5px;font-weight:700;color:var(--fg3);letter-spacing:.04em;margin:20px 0 11px;text-transform:uppercase} body.trakzo .sect:first-child{margin-top:0} /* form fields inside the modal: style BOTH design .f and Laravel form-group */ body.trakzo .mb .form-group{margin-bottom:14px} body.trakzo .mb label{display:block;font-size:12.5px;color:var(--fg2);font-weight:550;margin-bottom:6px} body.trakzo .mb .form-control, body.trakzo .mb input[type=text],body.trakzo .mb input[type=password], body.trakzo .mb select,body.trakzo .mb 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;transition:.16s;height:auto;box-shadow:none} body.trakzo .mb textarea{min-height:74px;resize:vertical} body.trakzo .mb .form-control:hover,body.trakzo .mb select:hover,body.trakzo .mb textarea:hover{background:var(--hover)} body.trakzo .mb .form-control:focus,body.trakzo .mb select:focus,body.trakzo .mb textarea:focus{outline:none; border-color:var(--lime);background:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 12%, transparent)} html[data-theme="light"] body.trakzo .mb .form-control:focus, html[data-theme="light"] body.trakzo .mb select:focus, html[data-theme="light"] body.trakzo .mb textarea:focus{background:#fff} body.trakzo .mb small{font-size:11.5px;color:var(--fg3);display:block;margin-top:5px} body.trakzo .mb hr{border:0;border-top:1px solid var(--line);margin:18px 0} body.trakzo .mb h4,body.trakzo .mb h5{font-size:13px;font-weight:700;margin:16px 0 10px} /* checkboxes inside the modal (Bootstrap .checkbox / .checkbox-inline) */ body.trakzo .mb .checkbox,body.trakzo .mb .checkbox-inline{display:flex;align-items:center;gap:9px;padding:8px 10px; background:var(--raised);border-radius:var(--r);cursor:pointer;font-size:13px;margin:0 0 8px} body.trakzo .mb .checkbox label,body.trakzo .mb .checkbox-inline label{margin:0;font-weight:530;color:var(--fg)} body.trakzo .mb input[type=checkbox]{width:17px;height:17px;accent-color:var(--lime);flex:none;margin:0} body.trakzo .mb .dashboard-widget{display:flex;align-items:center;justify-content:space-between;background:var(--raised); border-radius:var(--r);padding:8px 10px;margin-bottom:8px} body.trakzo .mb .dashboard-widget .checkbox-inline{background:transparent;padding:0} body.trakzo .mb .alert-info{background:var(--lime-s);color:var(--fg2);border:0;border-radius:var(--r);padding:11px 13px;font-size:12.5px} /* data tables inside modal list-tabs */ body.trakzo table.lt{width:100%;border-collapse:collapse;font-size:13.5px} body.trakzo table.lt th{text-align:left;font-size:11.5px;font-weight:650;color:var(--fg3);padding:9px 10px;box-shadow:inset 0 -1px 0 var(--line)} body.trakzo table.lt td{padding:10px;box-shadow:inset 0 -1px 0 var(--line)} body.trakzo .empty{text-align:center;color:var(--fg3);font-size:13px;padding:28px 0} /* ============================================================================ FULL-PAGE SHELL (trakzo_page): top bar + scrolling content ============================================================================ */ body.trakzo.trakzo-page{overflow:auto} body.trakzo .top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;height:56px;padding:0 18px; background:var(--panel);box-shadow:inset 0 -1px 0 var(--line)} body.trakzo .top .brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em;color:var(--fg);text-decoration:none} body.trakzo .top .brand .mk{width:32px;height:32px;border-radius:9px;background:var(--lime);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px} body.trakzo .top .brand small{display:block;font-size:9px;letter-spacing:.14em;color:var(--fg3);font-weight:700} body.trakzo .top nav{display:flex;gap:2px;margin-left:8px} body.trakzo .top nav a{display:flex;align-items:center;gap:7px;color:var(--fg2);font-size:13px;font-weight:560;padding:8px 12px;border-radius:var(--r);text-decoration:none} body.trakzo .top nav a:hover{background:var(--hover);color:var(--fg)} body.trakzo .top .sp{flex:1} /* .thm floats top-right on auth/modal pages; inside the top bar it is a normal flex item so it stays vertically centered in the bar (no overhang) */ body.trakzo .top .thm{position:static;top:auto;right:auto;z-index:auto;flex:none} body.trakzo .page{max-width:1180px;margin:0 auto;padding:22px 20px 40px} body.trakzo .page > .card{background:var(--panel);border-radius:var(--r3);box-shadow:0 0 0 1px var(--line);overflow:hidden} body.trakzo .ph{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 16px} body.trakzo .ph .ico{width:42px;height:42px;border-radius:12px;background:var(--lime-s);color:var(--lime);display:grid;place-items:center;flex:none} body.trakzo .ph h1{font-size:21px;font-weight:750;letter-spacing:-.025em} body.trakzo .ph p{font-size:13px;color:var(--fg3);margin-top:2px} body.trakzo .page .mb{padding:16px 20px 20px} /* list header + summary + progress bars (maintenance and similar list pages) */ body.trakzo .lhead{display:flex;align-items:center;gap:9px;margin-bottom:12px} body.trakzo .lhead .sp{flex:1} body.trakzo .lhead .sect{margin:0} body.trakzo .summary{font:12px var(--mono);color:var(--fg3)} body.trakzo .wrap{overflow-x:auto} body.trakzo .note{display:flex;gap:9px;background:rgba(255,84,112,.10);color:var(--coral);border-radius:var(--r2); padding:11px 13px;font-size:12.5px;margin-bottom:14px;align-items:flex-start} body.trakzo .bar{height:6px;border-radius:3px;background:var(--raised);overflow:hidden;min-width:74px} body.trakzo .bar i{display:block;height:100%;border-radius:3px} body.trakzo .bar.ok i{background:var(--teal)} body.trakzo .bar.warn i{background:var(--amber)} body.trakzo .bar.bad i{background:var(--coral)} body.trakzo .pct{font:10.5px var(--mono);color:var(--fg3);margin-top:4px;display:block} body.trakzo .left{font-family:var(--mono);font-size:12.5px} body.trakzo .left.exp{color:var(--coral);font-weight:650} body.trakzo td.dash{color:var(--fg3);text-align:center} body.trakzo .acts{display:flex;gap:4px;justify-content:flex-end} body.trakzo .acts a,body.trakzo .acts button{width:28px;height:28px;border:0;border-radius:var(--r);background:transparent; color:var(--fg3);cursor:pointer;display:grid;place-items:center;text-decoration:none} body.trakzo .acts a:hover,body.trakzo .acts button:hover{background:var(--raised);color:var(--lime)} body.trakzo .acts a.dg:hover,body.trakzo .acts button.dg:hover{color:var(--coral)} /* ============================================================================ APP PLUGIN WIDGETS (bootstrap-select etc.) — the app JS transforms plain in the DOM (for form submit) but visually hidden, the way bootstrap-select's own CSS does */ body.trakzo .bootstrap-select > select{position:absolute!important;bottom:0;left:50%;display:block!important; width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:0!important;z-index:0!important;background:transparent!important;box-shadow:none!important} /* the wrapper also gets .form-control from the plugin — neutralize that so the inner button carries the field styling, not the wrapper */ body.trakzo .bootstrap-select.form-control{padding:0;border:0;background:transparent;height:auto;box-shadow:none} body.trakzo .bootstrap-select > .btn,body.trakzo .bootstrap-select > .dropdown-toggle{ width:100%;text-align:left;background:var(--raised);border:1.5px solid transparent;border-radius:var(--r); color:var(--fg);font:13.5px var(--sans);padding:10px 11px;display:flex;align-items:center;gap:8px;box-shadow:none;cursor:pointer} body.trakzo .bootstrap-select > .btn:hover{background:var(--hover)} /* `.open` is NOT `focused` — see the FOCUS OWNERSHIP block in trakzo-map.css. This used to paint the trigger lime purely because the panel was expanded, which made the trigger and the focused search field read as two focused controls at once. Open now only darkens the surface. */ body.trakzo .bootstrap-select.open > .btn{background:var(--bg)} body.trakzo .bootstrap-select .filter-option{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.trakzo .bootstrap-select .bs-caret{margin-left:auto} body.trakzo .bootstrap-select .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid var(--fg3)} body.trakzo .bootstrap-select .dropdown-menu{display:none;position:absolute;top:100%;left:0;z-index:100;min-width:100%; margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 12px 30px rgba(0,0,0,.4);list-style:none;padding:6px;max-height:260px;overflow:auto} body.trakzo .bootstrap-select.open .dropdown-menu{display:block} body.trakzo .bootstrap-select .dropdown-menu li{list-style:none} body.trakzo .bootstrap-select .dropdown-menu li a{text-decoration:none;cursor:pointer} /* (rows, hover and selected: assets/css/trakzo-dropdown.css) */ /* bootstrap-select nests an inner that holds the options; the generic .dropdown-menu{position:absolute} above collapses it to one row, so reset the INNER list to a normal scrollable in-flow list. */ body.trakzo .bootstrap-select .dropdown-menu.inner{position:static;display:block;float:none;width:auto;min-width:0; margin:0;padding:0;border:0;box-shadow:none;background:transparent;max-height:240px;overflow-y:auto} body.trakzo .bootstrap-select .dropdown-menu.inner > li{display:block} body.trakzo .bootstrap-select .dropdown-menu .bs-searchbox input{width:100%} /* (the search field and the empty state: assets/css/trakzo-dropdown.css) */ /* generic BS3 dropdown menus (My account, dashboard block Options, etc.) opened by the app. The theme CSS that hides these until open isn't loaded, so replicate BS3's toggle here. */ body.trakzo .dropdown,body.trakzo .btn-group{position:relative} /* behaviour only — BS3's own show/hide, which the theme CSS would normally supply. The panel's looks are the component's (assets/css/trakzo-dropdown.css) */ body.trakzo .dropdown-menu{display:none;position:absolute;top:100%;left:0;z-index:1000;min-width:180px;list-style:none} body.trakzo .dropdown-menu.dropdown-menu-right{left:auto;right:0} body.trakzo .open > .dropdown-menu,body.trakzo .dropdown.open .dropdown-menu,body.trakzo .btn-group.open .dropdown-menu{display:block} body.trakzo .dropdown-menu > li > a{text-decoration:none} /* dashboard block Options panel content (radios/checkboxes inside the dropdown) */ body.trakzo .dropdown-menu label{color:var(--fg2);font-size:12.5px;display:flex;align-items:center;gap:7px;padding:4px 8px;margin:0} body.trakzo .dropdown-menu input[type=radio],body.trakzo .dropdown-menu input[type=checkbox]{accent-color:var(--lime)} /* small BS3 float utils (theme CSS not loaded) */ body.trakzo .pull-left{float:left} body.trakzo .pull-right{float:right} body.trakzo .clearfix:after,body.trakzo .panel-title:after,body.trakzo .row:after{content:"";display:table;clear:both} /* ============================================================================ DASHBOARD — page + block grid + block frame (all 7 blocks share Blocks/layout) ============================================================================ */ body.trakzo #dashboard{padding:22px 20px 40px;max-width:1400px;margin:0 auto} body.trakzo .dash-head{margin-bottom:16px} body.trakzo .dash-head h1{font-size:21px;font-weight:750;letter-spacing:-.025em} body.trakzo #dashboard_blocks{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} body.trakzo .dashboard-block{grid-column:span 3;min-width:0} body.trakzo .dashboard-block.auto-height, body.trakzo .dashboard-block[class*="col-md-12"], body.trakzo .dashboard-block[class*="col-lg-12"]{grid-column:1 / -1} body.trakzo .dashboard-block[class*="col-md-6"]{grid-column:span 6} @media (max-width:1200px){ body.trakzo .dashboard-block{grid-column:span 4} } @media (max-width:992px){ body.trakzo .dashboard-block{grid-column:span 6} } @media (max-width:768px){ body.trakzo .dashboard-block{grid-column:1 / -1} } body.trakzo .dashboard-block .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;height:100%;margin:0} body.trakzo .dashboard-block .panel-heading{padding:12px 14px;box-shadow:inset 0 -1px 0 var(--line);background:transparent} body.trakzo .dashboard-block .panel-title{font-size:13px;font-weight:650;color:var(--fg);margin:0} body.trakzo .dashboard-block .panel-title a{color:var(--fg);text-decoration:none} body.trakzo .dashboard-block .panel-title .icon{margin-right:6px;color:var(--lime)} body.trakzo .dashboard-block .panel-body,body.trakzo .dashboard-block .dashboard-content{padding:14px;color:var(--fg2)} body.trakzo .dashboard-block .panel-body b,body.trakzo .dashboard-block .panel-body strong{color:var(--fg)} body.trakzo .dashboard-block table{width:100%;font-size:13px} body.trakzo .dashboard-block table td,body.trakzo .dashboard-block table th{padding:7px 8px;box-shadow:inset 0 -1px 0 var(--line)} body.trakzo .dashboard-block .btn.icon.options{color:var(--fg3);cursor:pointer} /* dashboard block CONTENT (loaded via block_content) — style the pieces the block templates emit so numbers are visible, tiles lay out, and bars render on dark */ /* invisible count fix: templates hardcode inline `color:#000` on the count */ body.trakzo .dashboard-content [style*="color:#000"], body.trakzo .dashboard-content [style*="color: #000"], body.trakzo .dashboard-block b[style*="#000"]{color:var(--fg) !important} /* intra-block BS3 grid → flex (theme grid not loaded), so col-* don't collapse */ body.trakzo .dashboard-content .row{display:flex;flex-wrap:wrap;margin:0 -6px} body.trakzo .dashboard-content .row > [class*="col-"]{padding:0 6px;flex:1 1 auto;min-width:0} body.trakzo .dashboard-content .row-status{display:flex;flex-wrap:wrap;gap:8px;margin:0} body.trakzo .dashboard-content .row-status > [class*="col-"], body.trakzo .dashboard-content .row-status > .statuss{flex:1 1 110px;padding:0;min-width:0} /* status tiles (colored boxes keep their inline status bg) */ body.trakzo .stat-box{display:block;border-radius:var(--r2);padding:12px 10px;text-align:center;color:#fff;text-decoration:none} body.trakzo .stat-box .count{font-size:22px;font-weight:800;line-height:1.1} body.trakzo .stat-box .title{font-size:11px;font-weight:600;opacity:.95;margin-top:2px} /* progress bars (maintenance uses .bar; blocks/reports use BS3 .progress) */ body.trakzo .progress{background:var(--raised);border-radius:99px;height:10px;overflow:hidden;margin:0} body.trakzo .progress-bar{height:100%;background:var(--lime);color:#fff;font-size:10px;line-height:10px;text-align:center} body.trakzo .progress-bar-success{background:var(--teal)} body.trakzo .progress-bar-warning{background:var(--amber)} body.trakzo .progress-bar-danger{background:var(--coral)} /* modalmanager (jQuery plugin) positioning/state classes the theme normally provides */ body.trakzo.modal-open{overflow:hidden} body.trakzo .modal-scrollable{position:fixed;inset:0;z-index:1045;overflow:auto} body.trakzo .modal .contents{display:block} /* neutralize the plugin's old top:50% centering assumption; we center via margin */ body.trakzo .modal.modal-overflow .modal-dialog,body.trakzo .modal .modal-dialog{top:auto} /* tabs + grid inside app modals */ body.trakzo .modal-body .tab-content{margin-top:12px} body.trakzo .modal-body .tab-pane{display:none} body.trakzo .modal-body .tab-pane.active{display:block} body.trakzo .modal-body .row{display:flex;flex-wrap:wrap;margin:0 -6px} body.trakzo .modal-body .row > [class*="col-"]{padding:0 6px;flex:1 1 auto;min-width:0} /* ============================================================================ DASHBOARD v2 — modern custom design (demo-dashboard.html). Blocks keep their real data; content templates render the design markup + inline-SVG charts. ============================================================================ */ body.trakzo #dashboard .n,body.trakzo .dash-num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* modern block grid: Blocks/layout renders .dashboard-block > .panel */ body.trakzo #dashboard_blocks{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-items:stretch} body.trakzo #dashboard .dashboard-block{min-width:0} body.trakzo #dashboard .dashboard-block{grid-column:span 3} body.trakzo #dashboard .dashboard-block[class*="col-md-12"], body.trakzo #dashboard .dashboard-block[class*="col-lg-12"], body.trakzo #dashboard .dashboard-block.auto-height{grid-column:1 / -1} @media (max-width:1200px){ body.trakzo #dashboard .dashboard-block{grid-column:span 6} } @media (max-width:760px){ body.trakzo #dashboard .dashboard-block{grid-column:1 / -1} } /* the block card */ body.trakzo #dashboard .dashboard-block .panel{background:var(--panel);border:0;border-radius:var(--r2); display:flex;flex-direction:column;min-height:0;height:100%;box-shadow:none;overflow:hidden} body.trakzo #dashboard .panel-heading{padding:14px 16px 12px;background:transparent;box-shadow:none;border:0} body.trakzo #dashboard .panel-title{font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--fg);margin:0;position:relative;min-height:20px} body.trakzo #dashboard .panel-title a{color:var(--fg);text-decoration:none} body.trakzo #dashboard .panel-title .icon{color:var(--lime);margin-right:7px} /* Title Case for multi-word block/section titles (Device Overview, Distance Travelled, ...) */ body.trakzo #dashboard .panel-title, body.trakzo #dashboard .ovh, body.trakzo #dashboard .ovbox .link, body.trakzo #dashboard .ovh .link{text-transform:capitalize} body.trakzo #dashboard .panel-title .pull-left{float:none;display:block;padding-right:34px} body.trakzo #dashboard .panel-title .pull-right{position:absolute;right:0;top:-3px;margin:0} body.trakzo #dashboard .btn.icon.options,body.trakzo #dashboard .btn.icon.filter{color:var(--fg3);cursor:pointer;width:28px;height:28px; display:inline-grid;place-items:center;border-radius:var(--r);font-size:15px} body.trakzo #dashboard .btn.icon.options:hover,body.trakzo #dashboard .btn.icon.filter:hover{background:var(--hover);color:var(--fg)} body.trakzo #dashboard .panel-body,body.trakzo #dashboard .dashboard-content{padding:0 16px 16px;flex:1} /* mini table (Alerts/Devices/Tasks) */ body.trakzo #dashboard table.table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0} body.trakzo #dashboard table.table td{padding:8px 0;box-shadow:inset 0 -1px 0 var(--line);border:0;color:var(--fg2)} body.trakzo #dashboard table.table tr:last-child td{box-shadow:none} body.trakzo #dashboard table.table td.text-right,body.trakzo #dashboard table.table .text-right{text-align:right;font-family:var(--mono);color:var(--fg)} body.trakzo #dashboard table.table td.text-right b,body.trakzo #dashboard table.table b{color:var(--fg);font-weight:650} body.trakzo #dashboard table.table a{color:var(--fg) !important;text-decoration:none} body.trakzo #dashboard table.table a b{color:var(--fg) !important} /* keep the long Alerts-count list from dominating its grid row */ body.trakzo #dashboard #block_latest_events .dashboard-content, body.trakzo #dashboard #block_latest_events .panel-body{max-height:280px;overflow-y:auto} /* Alerts count — icon-chip list (mockup .ev) */ body.trakzo #dashboard #block_latest_events .dashboard-content{max-height:210px;overflow-y:auto} /* donut sits vertically centered in its (stretched) equal-height card */ body.trakzo #dashboard #block_device_activity .dashboard-content{display:flex;align-items:center} body.trakzo #dashboard .ev{display:flex;align-items:center;gap:10px;padding:9px 0;box-shadow:inset 0 -1px 0 var(--line)} body.trakzo #dashboard .ev:last-child{box-shadow:none} body.trakzo #dashboard .ev .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none} body.trakzo #dashboard .ev .ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} body.trakzo #dashboard .ev .t{font-size:13px;font-weight:560;color:var(--fg)} body.trakzo #dashboard .ev .c{margin-left:auto;font-family:var(--mono);font-weight:650;color:var(--fg2);font-size:12.5px;white-space:nowrap} /* KPI tiles (over_view) — dark cards, colored mono number, left accent bar */ body.trakzo #dashboard .row-status{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0;align-content:start;grid-auto-rows:min-content} @media (max-width:1200px){ body.trakzo #dashboard .row-status{grid-template-columns:repeat(3,1fr)} } @media (max-width:600px){ body.trakzo #dashboard .row-status{grid-template-columns:repeat(2,1fr)} } body.trakzo #dashboard .row-status .statuss{padding:0;min-width:0;align-self:start} body.trakzo #dashboard .row-status .stat-box{position:relative;overflow:hidden;background:var(--raised);border-radius:var(--r2); padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:6px;line-height:1; text-align:left;text-decoration:none;color:var(--fg);height:84px} body.trakzo #dashboard .row-status .stat-box:hover{background:var(--hover);opacity:1;filter:none} body.trakzo #dashboard .row-status .stat-box:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fg3)} body.trakzo #dashboard .row-status .stat-box .count{font:29px/1 var(--mono);font-weight:600;letter-spacing:-.045em;color:var(--fg);text-align:left} body.trakzo #dashboard .row-status .stat-box .title{font-size:12.5px;color:var(--fg3);margin-top:0;font-weight:500;text-align:left} body.trakzo #dashboard .row-status .stat-box .link{display:none} body.trakzo #dashboard .stat-box.mv .count{color:var(--teal)} body.trakzo #dashboard .stat-box.mv:after{background:var(--teal)} body.trakzo #dashboard .stat-box.id .count{color:var(--amber)} body.trakzo #dashboard .stat-box.id:after{background:var(--amber)} body.trakzo #dashboard .stat-box.st .count{color:var(--coral)} body.trakzo #dashboard .stat-box.st:after{background:var(--coral)} body.trakzo #dashboard .stat-box.of .count{color:var(--slate)} body.trakzo #dashboard .stat-box.of:after{background:var(--slate)} body.trakzo #dashboard .stat-box.in .count{color:var(--violet)} body.trakzo #dashboard .stat-box.in:after{background:var(--violet)} /* Device overview — solid colored boxes + split (events | pie) */ body.trakzo #dashboard .ovboxes{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:0 0 16px} body.trakzo #dashboard .ovbox{border-radius:var(--r);padding:11px 12px;color:#12151A;text-decoration:none;display:block} body.trakzo #dashboard .ovbox:hover{filter:brightness(1.05)} body.trakzo #dashboard .ovbox .title{font-size:11.5px;font-weight:650;opacity:.78;color:#12151A} body.trakzo #dashboard .ovbox .count{font-size:23px;font-weight:700;line-height:1.2;color:#12151A;font-family:var(--mono)} body.trakzo #dashboard .ovbox .link{font-size:10.5px;font-weight:600;opacity:.72;text-decoration:underline;color:#12151A;display:inline-block;margin-top:2px} body.trakzo #dashboard .ovsplit{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch} /* Recent events and the pie each sit in their own bordered sub-panel (like the original app), so they read as two separate cards, not one flat block. */ body.trakzo #dashboard .ovsplit > div{background:var(--bg);border-radius:var(--r2);padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line)} html[data-theme="light"] body.trakzo #dashboard .ovsplit > div{background:var(--raised)} @media (max-width:980px){ body.trakzo #dashboard .ovboxes{grid-template-columns:repeat(3,1fr)} body.trakzo #dashboard .ovsplit{grid-template-columns:1fr} } body.trakzo #dashboard .ovh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--fg2);margin-bottom:8px} body.trakzo #dashboard .ovh .sp{flex:1} body.trakzo #dashboard .ovh a,body.trakzo #dashboard .ovh .link{color:var(--lime);text-decoration:none;font-size:11.5px} /* recent-events table + transparent inner panel */ body.trakzo #dashboard #block_device_overview .panel-transparent{background:transparent;border:0;box-shadow:none} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-heading{padding:0 0 8px;box-shadow:none} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-body{padding:0} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-title{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg2);font-weight:600} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-title .pull-left{float:none;flex:1;display:flex;align-items:center} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-title .pull-right{float:none;display:flex;align-items:center;gap:8px;margin:0} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-title .icon{color:var(--fg2);margin-right:6px} body.trakzo #dashboard #block_device_overview .panel-transparent .panel-title .btn.icon.filter{color:var(--fg3);width:26px;height:26px;display:inline-grid;place-items:center;border-radius:var(--r)} body.trakzo #dashboard #block_device_overview .panel-transparent .link{display:inline-flex;align-items:center;gap:5px; padding:5px 11px;border-radius:99px;background:var(--lime-s);color:var(--lime);border:1px solid transparent; text-decoration:none;font-size:11.5px;font-weight:650;white-space:nowrap;line-height:1} body.trakzo #dashboard #block_device_overview .panel-transparent .link:hover{background:var(--lime);color:#fff} body.trakzo #dashboard #block_device_overview .panel-transparent .link:after{content:"→";font-weight:600} body.trakzo #dashboard #block_device_overview table.table-list,body.trakzo #dashboard .ovtbl{width:100%;border-collapse:collapse;font-size:12.5px;border:0} body.trakzo #dashboard #block_device_overview table.table-list th,body.trakzo #dashboard .ovtbl th{text-align:left;font-size:11px;font-weight:600;color:var(--fg3);padding:6px 8px;box-shadow:inset 0 -1px 0 var(--line);border:0;background:transparent} body.trakzo #dashboard #block_device_overview table.table-list td,body.trakzo #dashboard .ovtbl td{padding:6px 8px;box-shadow:inset 0 -1px 0 var(--line);border:0;color:var(--fg2)} body.trakzo #dashboard #block_device_overview table.table-list .no-data{text-align:center;color:var(--fg3)} /* tilted pie + legend */ /* pie column: center the chart + legend in the (stretched) panel so it fills the space instead of stranding a small pie at the top */ body.trakzo #dashboard .ovsplit > div:last-child{display:flex;flex-direction:column} body.trakzo #dashboard .ovsplit > div:last-child .ovpie{flex:1} body.trakzo #dashboard .ovpie{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap} body.trakzo #dashboard .ovpie svg{width:190px;max-width:100%;height:auto;flex:none} body.trakzo #dashboard #trk_ovpie .trk-ovpie-tot{fill:var(--fg);font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.03em} body.trakzo #dashboard #trk_ovpie .trk-ovpie-lbl{fill:var(--fg3);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} body.trakzo #dashboard .ovpie .lg{display:flex;flex-direction:column;gap:9px;font-size:13px;min-width:180px} body.trakzo #dashboard .ovpie .lg div{display:flex;align-items:center;gap:9px;color:var(--fg2)} body.trakzo #dashboard .ovpie .lg i{width:10px;height:10px;border-radius:3px;flex:none} body.trakzo #dashboard .ovpie .lg span{flex:1} body.trakzo #dashboard .ovpie .lg b{margin-left:auto;color:var(--fg);font-family:var(--mono);padding-left:16px} /* charts (donut + distance bars) */ body.trakzo #dashboard .trk-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap} body.trakzo #dashboard .trk-donut svg{width:150px;height:150px;flex:none} body.trakzo #dashboard .trk-legend{flex:1;display:flex;flex-direction:column;gap:7px;min-width:120px} body.trakzo #dashboard .trk-legend div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg2)} body.trakzo #dashboard .trk-legend i{width:9px;height:9px;border-radius:3px;flex:none} body.trakzo #dashboard .trk-legend b{margin-left:auto;font-family:var(--mono);font-weight:650;color:var(--fg)} body.trakzo #dashboard .trk-chart{position:relative} body.trakzo #dashboard .trk-chart svg{width:100%;height:168px;display:block;overflow:visible} body.trakzo #dashboard .trk-empty{position:absolute;left:0;right:0;top:14px;bottom:44px;display:none; flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;text-align:center} 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)} body.trakzo #dashboard .trk-gl{stroke:var(--line)} body.trakzo #dashboard .trk-gt{font:10px var(--mono);fill:var(--fg3)} body.trakzo #dashboard .trk-chart-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--fg2)} body.trakzo #dashboard .trk-chart-legend span{display:inline-flex;align-items:center;gap:6px} body.trakzo #dashboard .trk-chart-legend i{width:12px;height:3px;border-radius:2px} /* ============================================================================ 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)} /* ============================================================================ 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} body.trakzo #dashboard .dash-head{margin-bottom:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px} /* a quiet "live" eyebrow above the H1, injected via CSS (no markup change) */ body.trakzo #dashboard .dash-head::before{content:"FLEET OVERVIEW \2022 LIVE";display:block; font:600 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--lime);opacity:.9;order:-1} body.trakzo #dashboard .dash-head h1{font-size:24px;font-weight:750;letter-spacing:-.03em;margin:0;line-height:1.05} /* ---- 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} body.trakzo #dashboard .panel-heading{padding:15px 17px 10px} body.trakzo #dashboard .panel-title{font:600 12px/1 var(--sans);letter-spacing:.02em;color:var(--fg2);text-transform:uppercase} body.trakzo #dashboard .panel-title .icon{color:var(--lime)} body.trakzo #dashboard .dashboard-content{padding:6px 17px 17px} /* ---- 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: thinner glowing ring + centered total ---- */ body.trakzo #dashboard #block_device_activity .dashboard-content{display:flex;align-items:center;gap:20px;flex-wrap:wrap} body.trakzo #dashboard #block_device_activity svg{width:120px;height:120px;flex:none;overflow:visible; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--lime) 14%, transparent))} body.trakzo #dashboard #block_device_activity svg circle{stroke-width:11 !important} /* legend rows: dot + label + mono percent */ body.trakzo #dashboard #block_device_activity .dashboard-content > *:not(svg){min-width:120px} /* ---- OVERVIEW KPIs → the instrument strip (same as the map counters) ---- */ body.trakzo #dashboard #block_over_view .row-status, body.trakzo #dashboard #block_device_overview .row-status{display:grid !important; grid-template-columns:repeat(6,1fr) !important;gap:0 !important; background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0} body.trakzo #dashboard .row-status .statuss{border-left:1px solid var(--line);padding:0 !important;align-self:stretch} body.trakzo #dashboard .row-status .statuss:first-child{border-left:0} body.trakzo #dashboard .row-status .stat-box{position:relative !important;display:flex !important;flex-direction:column; align-items:flex-start;gap:3px;padding:13px 13px 12px !important;background:transparent !important; border-radius:0 !important;overflow:visible;cursor:pointer;transition:background .13s} body.trakzo #dashboard .row-status .stat-box:hover{background:var(--hover) !important} body.trakzo #dashboard .row-status .stat-box:after, body.trakzo #dashboard .row-status .stat-box:before{content:none !important} body.trakzo #dashboard .row-status .stat-box .count{font:600 22px/1 var(--mono) !important;letter-spacing:-.03em;color:var(--fg) !important} body.trakzo #dashboard .row-status .stat-box .title{font:600 10px/1.2 var(--sans) !important;letter-spacing:.04em; text-transform:uppercase;color:var(--fg3) !important;text-align:left} /* status tick along the top of each cell */ body.trakzo #dashboard .row-status .stat-box{--_c:var(--slate)} body.trakzo #dashboard .row-status .stat-box.all{--_c:var(--lime)} body.trakzo #dashboard .row-status .stat-box.mv{--_c:var(--teal)} body.trakzo #dashboard .row-status .stat-box.id{--_c:var(--amber)} body.trakzo #dashboard .row-status .stat-box.st{--_c:var(--coral)} body.trakzo #dashboard .row-status .stat-box.of{--_c:var(--slate)} body.trakzo #dashboard .row-status .stat-box.in{--_c:var(--violet)} body.trakzo #dashboard .row-status .stat-box > .count::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--_c);opacity:.6} body.trakzo #dashboard .row-status .stat-box.all{background:color-mix(in srgb, var(--lime) 12%, transparent) !important} body.trakzo #dashboard .row-status .stat-box.all .title{color:var(--lime) !important;font-weight:700} body.trakzo #dashboard .row-status .stat-box .count{color:var(--_c) !important} body.trakzo #dashboard .row-status .stat-box.all .count,body.trakzo #dashboard .row-status .stat-box.of .count{color:var(--fg) !important} /* ---- Distance chart: area fill under the lines + calm grid ---- */ body.trakzo #dashboard #block_device_distance svg polyline{filter:drop-shadow(0 0 4px color-mix(in srgb, var(--lime) 10%, transparent))} body.trakzo #dashboard #block_device_distance .dashboard-content{position:relative} /* empty-state ("No distance recorded") reads as intentional, not broken */ body.trakzo #dashboard #block_device_distance .dashboard-content:has(svg){min-height:0} /* ---- Alerts / Tasks / Devices tables: quiet rhythm, mono values ---- */ body.trakzo #dashboard table.table td,body.trakzo #dashboard table.table th{box-shadow:inset 0 -1px 0 var(--line);border:0} body.trakzo #dashboard table.table td:last-child{color:var(--fg);text-align:right} body.trakzo #dashboard .ev{padding:10px 0} body.trakzo #dashboard .ev .ic{border-radius:9px} /* ---- Progress bars anywhere on the dashboard get the glow treatment ---- */ body.trakzo #dashboard .progress{background:var(--raised);height:7px;border-radius:99px} body.trakzo #dashboard .progress-bar{background:var(--lime);box-shadow:0 0 8px color-mix(in srgb, var(--lime) 40%, transparent)} /* ---- Light mode: soften the glows so they read as tint, not haze ---- */ html[data-theme="light"] body.trakzo #dashboard #block_device_activity svg{filter:drop-shadow(0 0 6px rgba(95,138,8,.12))} html[data-theme="light"] body.trakzo #dashboard .row-status .stat-box.all{background:color-mix(in srgb, var(--lime) 12%, transparent) !important} html[data-theme="light"] body.trakzo #dashboard .progress-bar{box-shadow:0 0 6px rgba(95,138,8,.28)} html[data-theme="light"] body.trakzo #dashboard #block_device_distance svg polyline{filter:none} /* ---- Device Overview .ovbox tiles: replace the bright saturated fills with refined dark tinted cards (accent by position: Move/Idle/Stop/Offline/Inactive/Unreach) ---- */ body.trakzo #dashboard #block_device_overview .ovboxes{gap:10px} body.trakzo #dashboard #block_device_overview .ovbox{--_c:var(--slate); background:linear-gradient(180deg,var(--raised),var(--panel)) !important;border:1px solid var(--line); border-radius:12px;padding:13px 14px 12px !important;position:relative;overflow:hidden;transition:border-color .13s,background .13s} body.trakzo #dashboard #block_device_overview .ovbox:hover{filter:none;border-color:var(--line-strong);background:var(--hover) !important} body.trakzo #dashboard #block_device_overview .ovbox::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--_c);opacity:.7} body.trakzo #dashboard #block_device_overview .ovbox .title{color:var(--fg3) !important;opacity:1;font:600 10.5px/1.2 var(--sans) !important;letter-spacing:.04em;text-transform:uppercase} body.trakzo #dashboard #block_device_overview .ovbox .count{color:var(--_c) !important;font:600 24px/1.1 var(--mono) !important;letter-spacing:-.03em;margin-top:5px} body.trakzo #dashboard #block_device_overview .ovbox .link{color:var(--fg3) !important;opacity:1;text-decoration:none;font:600 10px/1 var(--sans) !important;margin-top:6px;text-transform:uppercase;letter-spacing:.05em} body.trakzo #dashboard #block_device_overview .ovbox .link:hover{color:var(--lime) !important} /* accent per position (order is fixed: Move Idle Stop Offline Inactive Unreach) */ body.trakzo #dashboard #block_device_overview .ovbox:nth-child(1){--_c:var(--teal)} body.trakzo #dashboard #block_device_overview .ovbox:nth-child(2){--_c:var(--amber)} body.trakzo #dashboard #block_device_overview .ovbox:nth-child(3){--_c:var(--coral)} body.trakzo #dashboard #block_device_overview .ovbox:nth-child(4){--_c:var(--slate)} body.trakzo #dashboard #block_device_overview .ovbox:nth-child(5){--_c:var(--violet)} body.trakzo #dashboard #block_device_overview .ovbox:nth-child(6){--_c:var(--slate)} /* ---- Recent Events / Device-status split: the two sub-panels were styled as nested light cards (bg + radius + inset border) INSIDE the already-carded block — a box-in-a-box that read as unfinished. Flatten them: transparent, no radius, no border; separate the two columns with a single hairline; let the block card be the only frame. Content gets clean inner padding, dividers stay inside. ---- */ body.trakzo #dashboard #block_device_overview .ovsplit{gap:0} /* flat sub-panels (no nested card), but with consistent top padding so content never touches the card walls. Horizontal padding is added per-column below. */ body.trakzo #dashboard #block_device_overview .ovsplit > div{background:transparent !important; border-radius:0 !important;box-shadow:none !important;padding:14px 0 6px !important} /* the inner .panel-transparent wrapper carries no frame of its own */ body.trakzo #dashboard #block_device_overview .ovsplit .panel-transparent{background:transparent !important; border:0 !important;box-shadow:none !important;padding:0 !important} /* stacked (narrow): each column gets side padding so it clears the card walls */ body.trakzo #dashboard #block_device_overview .ovsplit > div{padding-left:2px !important;padding-right:2px !important} /* on wide layout the two columns sit side by side with a divider between them */ @media (min-width:981px){ body.trakzo #dashboard #block_device_overview .ovsplit{grid-template-columns:1.35fr 1fr} body.trakzo #dashboard #block_device_overview .ovsplit > div:first-child{padding-right:22px !important;padding-left:0 !important} body.trakzo #dashboard #block_device_overview .ovsplit > div:last-child{padding-left:22px !important;padding-right:0 !important;box-shadow:inset 1px 0 0 var(--line) !important} } /* the events table itself */ body.trakzo #dashboard #block_device_overview table.table{width:100%} body.trakzo #dashboard #block_device_overview table.table td, body.trakzo #dashboard #block_device_overview table.table th{padding:10px 8px} body.trakzo #dashboard #block_device_overview table.table td:first-child, body.trakzo #dashboard #block_device_overview table.table th:first-child{padding-left:0} body.trakzo #dashboard #block_device_overview table.table td:last-child, body.trakzo #dashboard #block_device_overview table.table th:last-child{padding-right:0} /* the recent-events header row (title + View details) gets space below */ body.trakzo #dashboard #block_device_overview .ovh{margin-bottom:12px} /* column headers quieter, uppercase */ body.trakzo #dashboard #block_device_overview table.table thead th{color:var(--fg3);font:600 10.5px/1 var(--sans); letter-spacing:.05em;text-transform:uppercase;padding-bottom:10px} /* ---- more breathing room inside the big Device Overview card so content doesn't sit tight against the top/left/right walls (user feedback) ---- */ body.trakzo #dashboard #block_device_overview .dashboard-content{padding:8px 22px 22px !important} body.trakzo #dashboard #block_device_overview .panel-heading{padding:18px 22px 6px !important} body.trakzo #dashboard #block_device_overview .ovboxes{margin-bottom:20px} /* the recent-events / donut split sits a touch lower, clear of the tiles */ body.trakzo #dashboard #block_device_overview .ovsplit{margin-top:4px;padding-top:16px;box-shadow:inset 0 1px 0 var(--line)} /* ============================================================================ POP-UPS WITHOUT A THEME UNTIL NOW (2026-09-05) — same tokens as everything else ============================================================================ */ /* toastr notifications: panel card, type shown as a coloured left rail + icon tint */ body.trakzo #toast-container > .toast, body.trakzo #toast-container > .toast:hover{ opacity:1 !important;background-color:var(--panel) !important;color:var(--fg) !important; border:1px solid var(--line) !important;border-left-width:4px !important;border-radius:12px !important; box-shadow:0 18px 44px -20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.06) !important; padding:14px 18px 14px 52px !important;font:500 13px/1.45 var(--sans) !important;width:340px !important; background-size:20px !important;background-position:18px 50% !important} body.trakzo #toast-container > .toast-success{border-left-color:var(--teal) !important} body.trakzo #toast-container > .toast-error{border-left-color:var(--coral) !important} body.trakzo #toast-container > .toast-warning{border-left-color:var(--amber) !important} body.trakzo #toast-container > .toast-info{border-left-color:var(--lime) !important} body.trakzo #toast-container .toast-title{font-weight:700 !important;color:var(--fg) !important;margin-bottom:2px} body.trakzo #toast-container .toast-message{color:var(--fg2) !important} body.trakzo #toast-container .toast-message a{color:var(--lime) !important} body.trakzo #toast-container .toast-close-button{color:var(--fg3) !important;text-shadow:none !important;opacity:1 !important;font-weight:400 !important;top:-2px !important;right:-6px !important} body.trakzo #toast-container .toast-close-button:hover{color:var(--fg) !important} body.trakzo #toast-container .toast-progress{background:var(--lime) !important;opacity:.35 !important} /* bootstrap-colorpicker pop-up (vehicle tail colour etc.) */ body.trakzo .colorpicker{ background:var(--panel) !important;color:var(--fg) !important;border:1px solid var(--line) !important; border-radius:12px !important;padding:10px !important; box-shadow:0 18px 44px -20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.06) !important;z-index:1060 !important} body.trakzo .colorpicker::before,body.trakzo .colorpicker::after{display:none !important} body.trakzo .colorpicker-saturation,body.trakzo .colorpicker-hue,body.trakzo .colorpicker-alpha{border-radius:6px !important;overflow:hidden} body.trakzo .colorpicker-color,body.trakzo .colorpicker-color div{border-radius:6px !important} body.trakzo .colorpicker input.form-control{height:32px !important;font:600 12.5px var(--mono) !important} /* ============================================================================ DIALOG AUDIT FIXES (2026-09-05) — found by a scripted sweep of every dialog ============================================================================ */ /* Bootstrap label/badge colours → tokens (e.g. the Alerts list's "Active" toggles were #5cb85c) */ body.trakzo .label{border-radius:999px !important;padding:4px 10px !important;font:600 11px/1 var(--sans) !important;letter-spacing:.02em !important} body.trakzo .label.label-success,body.trakzo .alert-status-toggle.label-success{background:var(--teal) !important;color:#fff !important} body.trakzo .label.label-danger,body.trakzo .alert-status-toggle.label-danger{background:var(--coral) !important;color:#fff !important} body.trakzo .label.label-warning{background:var(--amber) !important;color:#fff !important} body.trakzo .label.label-info,body.trakzo .label.label-primary{background:var(--lime) !important;color:#fff !important} body.trakzo .label.label-default,body.trakzo .alert-status-toggle.label-default{background:var(--raised) !important;color:var(--fg2) !important} /* pagination (Camera / Media and every paged list): stock white links in both themes */ body.trakzo .pagination > li > a,body.trakzo .pagination > li > span,body.trakzo .page-link{ background:var(--panel) !important;color:var(--fg2) !important;border:1px solid var(--line) !important; font:500 13px/1.2 var(--sans) !important;padding:7px 12px !important;box-shadow:none !important} body.trakzo .pagination > li > a:hover,body.trakzo .page-link:hover{background:var(--hover) !important;color:var(--fg) !important} body.trakzo .pagination > .active > a,body.trakzo .pagination > .active > span,body.trakzo .page-item.active .page-link{ background:var(--lime) !important;border-color:var(--lime) !important;color:#fff !important} body.trakzo .pagination > .disabled > span,body.trakzo .pagination > .disabled > a,body.trakzo .page-item.disabled .page-link{ background:var(--raised) !important;color:var(--fg3) !important;border-color:var(--line) !important} body.trakzo .pagination > li:first-child > a,body.trakzo .pagination > li:first-child > span{border-radius:10px 0 0 10px !important} body.trakzo .pagination > li:last-child > a,body.trakzo .pagination > li:last-child > span{border-radius:0 10px 10px 0 !important} /* scrollbars inside dialogs: thin, token thumb (a 10px dark thumb was showing under wide tables) */ body.trakzo .modal ::-webkit-scrollbar{width:6px !important;height:6px !important;background:transparent !important} body.trakzo .modal ::-webkit-scrollbar-track{background:transparent !important;border:0 !important} body.trakzo .modal ::-webkit-scrollbar-thumb{background:var(--line-strong) !important;border:0 !important;border-radius:3px !important} /* Setup screen (trakzo_modal_page): the base skin's generic `.on{color:green!important}` leaked into the active nav button and the active pane (and everything inside it) */ body.trakzo-modal-page .pane.on,body.trakzo .trakzo-modal-page .pane.on{color:var(--fg) !important} body.trakzo-modal-page .navbtn.on,body.trakzo .trakzo-modal-page .navbtn.on{color:var(--lime) !important} /* Bootstrap panels inside dialogs (Chat): stock #f9f9f9 footer / #f5f5f5 heading in both themes */ body.trakzo .modal .panel{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:none !important} body.trakzo .modal .panel-heading{background:var(--raised) !important;color:var(--fg) !important;border-bottom:1px solid var(--line) !important;border-radius:12px 12px 0 0 !important} body.trakzo .modal .panel-footer{background:var(--raised) !important;border-top:1px solid var(--line) !important;border-radius:0 0 12px 12px !important} body.trakzo .modal .panel-body{color:var(--fg) !important} /* list dialogs (Geofences / Routes / POI / Alerts): `table-layout:fixed` + break-word split the checkbox and colour columns to a few px and stacked their headers one letter per line */ body.trakzo .modal .modal-body table.table-list{table-layout:auto !important;word-break:normal !important} body.trakzo .modal .modal-body table.table-list thead th{white-space:nowrap !important;word-break:normal !important;vertical-align:middle !important} body.trakzo .modal .modal-body table.table-list th.table-checkbox,body.trakzo .modal .modal-body table.table-list td.table-checkbox{width:44px !important;min-width:44px !important} /* striped tables inside dialogs (Weekly Activity etc.): stock #eee / #f9f9f9 stripes in both themes */ body.trakzo .modal .table > tbody > tr{background:transparent !important} body.trakzo .modal .table-striped > tbody > tr:nth-of-type(odd),body.trakzo .modal .table-striped > tbody > tr:nth-of-type(odd) > td{background:var(--raised) !important} body.trakzo .modal .table-hover > tbody > tr:hover,body.trakzo .modal .table-hover > tbody > tr:hover > td,body.trakzo .modal .table > tbody > tr:hover > td{background:var(--hover) !important} body.trakzo .modal .table > thead > tr > th{background:var(--raised) !important;color:var(--fg3) !important;border-bottom:1px solid var(--line) !important;font:600 11px/1.3 var(--sans) !important;letter-spacing:.06em !important;text-transform:uppercase !important} body.trakzo .modal .table > tbody > tr > td{border-top:1px solid var(--line) !important;color:var(--fg) !important} /* Activity log page: the two date inputs were the only square-cornered controls left */ body.trakzo-page .form-control.datepicker,body.trakzo .trakzo-page .form-control.datepicker{border-radius:10px !important} /* small icon buttons in dialog tables (vehicle Edit → Sensors "delete"): stock #eee */ body.trakzo .modal .btn.icon{background:var(--raised) !important;color:var(--fg2) !important;border:0 !important;border-radius:8px !important;box-shadow:none !important} body.trakzo .modal .btn.icon:hover{background:var(--hover) !important;color:var(--fg) !important} body.trakzo .modal .btn.icon.delete:hover{background:var(--coral) !important;color:#fff !important} /* the Setup screen is a regular .modal on the map page (no trakzo-modal-page body class), so the `.on{color:green!important}` leak needs the plain selectors */ body.trakzo .pane.on{color:var(--fg) !important} body.trakzo .navbtn.on{color:var(--lime) !important} /* ============================================================================ MODAL SINGLE-SELECT DROPDOWNS — stop the modal clipping the option list. (2026-09-17) Measured in the live DOM (Add custom address → "Match radius", 20 options): .modal-body top 84, height 354 → bottom 438, overflow-y:auto .dropdown-menu top 395, height 220 → bottom 615 The menu is absolutely positioned inside .bootstrap-select, which sits inside .modal-body — and .modal-body is a scroll container. So everything below y=438 was clipped away and exactly one option row stayed visible. The menu itself was never short: it held all 20
  • and scrolled internally. Same root cause the DataTables page-size select hit earlier (see its dropup fix in trakzo-map.css). Fix: while a single-select menu is open, lift the clip on the two ancestors that impose it. The JS in trakzo-select-fix.js adds .dv-select-unclipped, and only when the form is not itself scrolling — unclipping a scrolled modal would spill its fields and reset its scroll position. ============================================================================ */ /* both axes, and specific enough to beat `body.trakzo .modal .modal-body`: that rule sets overflow-x:hidden !important, and a box with one axis hidden computes the other from visible back to auto — so the clip would survive. */ body.trakzo .modal .modal-body.dv-select-unclipped, body.trakzo-admin .modal .modal-body.dv-select-unclipped, .modal .modal-body.dv-select-unclipped{ overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important} .modal .modal-content:has(> .modal-body.dv-select-unclipped){overflow:visible !important} /* with the clip lifted the list is no longer limited to the room below the field, so raise the open-state cap (~8 rows); longer lists still scroll inside it */ body.trakzo .modal .modal-body.dv-select-unclipped .bootstrap-select.open > .dropdown-menu, .modal .modal-body.dv-select-unclipped .bootstrap-select.open > .dropdown-menu{ max-height:320px !important} /* ============================================================================ SIDEBAR DROPDOWNS vs THE COLLAPSE HANDLE (2026-09-17) Measured on History -> the export button beside "Show history": the open menu was painted over by the sidebar's round collapse handle. The menu's own z-index was never the deciding number -- proved by raising it to 2000 and the group around it to 9999, which changed nothing, and by dropping the handle to 1, which also changed nothing. #sidebar has exactly two children: the handle (position:absolute, z-index:5) and .sidebar-content, which was unpositioned. Everything in the form therefore painted below the one positioned sibling, whatever z-index it carried, because it had no stacking context of its own to be measured in. Giving .sidebar-content a stacking context of its own puts the whole form -- every dropdown in it -- above the handle. Verified: the handle now disappears behind the open menu. #sidebar itself keeps z-index 1020, so nothing changes for the map or the dock. ============================================================================ */ body.trakzo #sidebar .sidebar-content, body.trakzo-admin #sidebar .sidebar-content{position:relative;z-index:10} /* ============================================================================ MUTED / HELP TEXT (2026-09-18) updated.css sets .text-muted to #EEEEEE. On the dark theme that lands on a near-black panel and reads fine, which is why it went unnoticed; in light mode it is near-white on white — measured contrast 1.16 against the 4.5 that small text needs, i.e. effectively invisible. The Add custom address dialog's help paragraph is the case that surfaced it, but the rule is global, so every .text-muted string in the app has the same problem in light mode. Mapped onto the theme's own secondary text token, which is legible on both surfaces and still reads as subordinate to the body text. ============================================================================ */ body.trakzo .text-muted, body.trakzo-admin .text-muted{color:var(--fg2) !important} body.trakzo .text-muted.small, body.trakzo-admin .text-muted.small{color:var(--fg2) !important} /* ============================================================================ STATUS PILLS — READABLE TEXT ON THE FILL (2026-09-21) The dialog-audit pass above moved Bootstrap's label colours onto the theme's tokens but kept white text on them. Measured against each fill, white gives: dark teal 1.81 · amber 1.71 · lime 2.91 · coral 3.11 light teal 3.40 · amber 3.76 · lime 4.58 · coral 4.68 Small text needs 4.5, so the Alerts list's "Active" pill and every other status pill was washed out — worst on teal and amber, which are nearly as bright as the white sitting on them. The fills stay; the ink changes. In the dark theme the fills are vivid, so a near-black ink reads (9.2 / 9.8 / 6.1 / 6.0). In the light theme the same tokens are much darker, so white is the right side — except teal and amber, which are darkened for the pill alone (4.98 / 6.04). The tokens themselves are untouched: charts, bars and alerts keep their colours. ============================================================================ */ body.trakzo .label.label-success,body.trakzo .alert-status-toggle.label-success{color:#06231A !important} body.trakzo .label.label-danger,body.trakzo .alert-status-toggle.label-danger{color:#2B0410 !important} body.trakzo .label.label-warning{color:#2A1B00 !important} body.trakzo .label.label-info,body.trakzo .label.label-primary{color:#05192B !important} html[data-theme="light"] body.trakzo .label.label-success, html[data-theme="light"] body.trakzo .alert-status-toggle.label-success{background:#0B7F5F !important;color:#fff !important} html[data-theme="light"] body.trakzo .label.label-warning{background:#8A5802 !important;color:#fff !important} html[data-theme="light"] body.trakzo .label.label-danger, html[data-theme="light"] body.trakzo .alert-status-toggle.label-danger, html[data-theme="light"] body.trakzo .label.label-info, html[data-theme="light"] body.trakzo .label.label-primary{color:#fff !important}