/* OpenTetra-Core dashboard - "Timeslot" design system. * Orange = people / terminals, cyan = base stations / infrastructure, raspberry = on air (TX), * green = live / ok, yellow = warning. Dark is the default; light follows prefers-color-scheme * or the theme toggle (data-theme on ). No external fonts. */ :root,:root[data-theme="dark"]{ --bg0:#0D1014;--bg1:#141920;--bg2:#1B222B;--bg3:#243040;--line:#262F3A;--line2:#34404E; --ink:#F1F4F7;--ink2:#B7C1CC;--ink3:#8894A1; --pri:#FF8A3D;--pri-text:#FF8A3D;--pri-bar:#FF8A3D;--on-pri:#1B0D02;--pri-soft:rgba(255,138,61,.14); --focus:#FF8A3D; --sec:#36C8F4;--sec-soft:rgba(54,200,244,.14);--sec-2:#1F7E9C;--sec-3:#155A70; --bs:#36C8F4;--term:#FF8A3D;--tx:#FF3D7F;--tx-soft:rgba(255,61,127,.16); --ok:#3DDC97;--ok-soft:rgba(61,220,151,.14);--warn:#FFD24A;--warn-soft:rgba(255,210,74,.14);--err:#F87171;--err-soft:rgba(248,113,113,.14); --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35); --shadow-pop:0 12px 40px rgba(0,0,0,.45); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; color-scheme:dark; } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --bg0:#F4F2ED;--bg1:#FFFFFF;--bg2:#F8F6F2;--bg3:#ECE8E0;--line:#E4DFD6;--line2:#CFC8BB; --ink:#15191E;--ink2:#4A535D;--ink3:#626B75; --pri:#FF8A3D;--pri-text:#B83E0B;--pri-bar:#E2651A;--on-pri:#1B0D02;--pri-soft:rgba(226,101,26,.12); --focus:#B83E0B; --sec:#0A7AA6;--sec-soft:rgba(10,122,166,.10);--sec-2:#5BA9C8;--sec-3:#9CCBDD; --bs:#0A7AA6;--term:#E2651A;--tx:#D0144F;--tx-soft:rgba(208,20,79,.10); --ok:#0B7F53;--ok-soft:rgba(11,127,83,.10);--warn:#935600;--warn-soft:rgba(147,86,0,.10);--err:#C62828;--err-soft:rgba(198,40,40,.08); --shadow:0 1px 2px rgba(40,30,10,.06),0 8px 24px rgba(40,30,10,.06); --shadow-pop:0 12px 36px rgba(40,30,10,.18); color-scheme:light; } } :root[data-theme="light"]{ --bg0:#F4F2ED;--bg1:#FFFFFF;--bg2:#F8F6F2;--bg3:#ECE8E0;--line:#E4DFD6;--line2:#CFC8BB; --ink:#15191E;--ink2:#4A535D;--ink3:#626B75; --pri:#FF8A3D;--pri-text:#B83E0B;--pri-bar:#E2651A;--on-pri:#1B0D02;--pri-soft:rgba(226,101,26,.12); --focus:#B83E0B; --sec:#0A7AA6;--sec-soft:rgba(10,122,166,.10);--sec-2:#5BA9C8;--sec-3:#9CCBDD; --bs:#0A7AA6;--term:#E2651A;--tx:#D0144F;--tx-soft:rgba(208,20,79,.10); --ok:#0B7F53;--ok-soft:rgba(11,127,83,.10);--warn:#935600;--warn-soft:rgba(147,86,0,.10);--err:#C62828;--err-soft:rgba(198,40,40,.08); --shadow:0 1px 2px rgba(40,30,10,.06),0 8px 24px rgba(40,30,10,.06); --shadow-pop:0 12px 36px rgba(40,30,10,.18); color-scheme:light; } /* ------------------------------------------------------------------ base */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--bg0)} body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg0);color:var(--ink); font:15px/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} a{color:var(--pri-text)} h1,h2,h3{letter-spacing:-.01em} .mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px;top:8px;background:var(--bg1);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:40} .skip:focus{left:8px} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} [hidden]{display:none !important} svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .sub{color:var(--ink3);font-size:13.5px} .cs{font-weight:750;letter-spacing:-.01em} .flag{font-size:1.15em;line-height:1;margin-right:6px} .fl{font-size:22px;line-height:1} /* ----------------------------------------------------------------- header */ .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px max(24px,env(safe-area-inset-left));min-height:64px;background:var(--bg1)} .ruler{position:sticky;top:64px;z-index:19;height:9px;border-bottom:1px solid var(--line); background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 40px) 0 0/100% 9px no-repeat, repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) 0 4px/100% 5px no-repeat,var(--bg1)} .brand{display:flex;align-items:center;gap:11px;min-width:max-content;color:var(--ink);text-decoration:none} .brand-mark{flex:none;width:38px;height:38px} .mark-bg{fill:var(--bg0);stroke:var(--line2)} .mark-s1,.mark-s2,.mark-s3{fill:var(--pri)} .mark-s1{opacity:.55}.mark-s2{opacity:.75} .mark-s4{fill:var(--sec)} .brand-text b{display:block;font-size:17px;letter-spacing:-.02em;font-weight:750;line-height:1.15} .brand-text b span{color:var(--pri-text)} .brand-text small{display:block;font-size:12.5px;color:var(--ink3);font-weight:500} .tabs{display:flex;gap:2px;padding:4px;background:var(--bg0);border:1px solid var(--line);border-radius:12px;overflow-x:auto;scrollbar-width:none;min-width:0} .tabs::-webkit-scrollbar{display:none} /* Scroll affordance (app.js sets .fade-l/.fade-r while more tabs are hidden on that side). */ .tabs{--fade:30px;scroll-behavior:smooth;scroll-padding-inline:var(--fade)} .tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent)} .tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade));mask-image:linear-gradient(90deg,transparent,#000 var(--fade))} .tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)} @media (prefers-reduced-motion:reduce){.tabs{scroll-behavior:auto}} .tabs a{padding:7px 13px;border-radius:9px;color:var(--ink2);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap} .tabs a:hover{color:var(--ink);background:var(--bg2)} .tabs a[aria-current="page"]{background:var(--pri);color:var(--on-pri);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset,0 4px 14px rgba(255,138,61,.28)} .top-actions{margin-left:auto;display:flex;align-items:center;gap:8px} .status{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--bg0);border:1px solid var(--line);font-weight:600;font-size:14px;white-space:nowrap} .status i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none} .status.ok i{background:var(--ok)} .status.ok i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:.35} .status.bad{color:var(--err)} .status.bad i{background:var(--err)} .ic-moon{display:none} :root[data-theme="light"] .ic-sun{display:none} :root[data-theme="light"] .ic-moon{display:block} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .ic-sun{display:none} :root:not([data-theme="dark"]) .ic-moon{display:block} } /* ---------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--line2); background:var(--bg1);color:var(--ink);font:600 14px/1.2 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap} .btn:hover{background:var(--bg2);border-color:var(--ink3)} .btn:disabled{opacity:.5;cursor:default} .btn.icon{width:36px;padding:0} .btn.primary{background:var(--pri);border-color:transparent;color:var(--on-pri)} .btn.primary:hover{background:color-mix(in srgb,var(--pri) 88%,#fff)} .btn.small{min-height:30px;font-size:13.5px;padding:0 10px;border-radius:8px} .btn.danger{color:var(--err)} /* ----------------------------------------------------------------- layout */ .offline{margin:14px 24px 0;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--err) 45%,transparent);background:var(--err-soft);color:var(--ink)} .offline strong{color:var(--err)} .offline .btn{margin-left:8px} .main{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:20px 24px 28px} .page{display:grid;gap:16px;align-content:start} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .grid-ov{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:16px;align-items:stretch} .grid-ov>.card{display:flex;flex-direction:column} .grid-ov .recent{margin-top:auto} .card{background:var(--bg1);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:0;overflow:hidden} .card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:56px;flex-wrap:wrap} .card-head h1,.card-head h2{margin:0;font-size:16.5px;font-weight:700} .aside{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end} .count{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:7px;background:var(--bg3);color:var(--ink2);font-size:13.5px;font-weight:600;white-space:nowrap} .count b{color:var(--ink);font-weight:700} .count.tx{background:var(--tx-soft);color:var(--tx)} .count.tx b{color:inherit} .link{color:var(--pri-text);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap} .link:hover{text-decoration:underline} .slots{display:inline-flex;gap:2px;margin-right:2px} .slots i{width:4px;height:14px;border-radius:1.5px;background:var(--line2)} .slots i.on{background:var(--pri)} .slots.tx i.on{background:var(--tx)} .hint{margin:14px 18px 0;color:var(--ink2);font-size:14px} .empty{padding:30px 18px;text-align:center;color:var(--ink3)} /* ------------------------------------------------------------------- kpis */ .kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} .kpi{position:relative;background:var(--bg1);border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px;box-shadow:var(--shadow);overflow:hidden;min-width:0} .kpi .lab{display:flex;align-items:center;gap:7px;color:var(--ink2);font-size:14px;font-weight:600;white-space:nowrap} .kpi .lab svg{color:var(--ink3)} .kpi .val{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi .val small{font-size:20px;font-weight:600;color:var(--ink2);margin:0 4px 0 1px;letter-spacing:-.01em} .kpi .kpi-sub{color:var(--ink2);font-size:13.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi .kpi-sub b{color:var(--ink);font-weight:650} .kpi .spark{position:absolute;right:14px;top:50px;height:34px;display:flex;align-items:flex-end;gap:2px} .kpi .spark i{width:4px;border-radius:1.5px;background:var(--line2)} .kpi .spark i.hi{background:var(--pri-bar)} .kpi.live .spark i.hi{background:var(--tx)} .kpi.live{border-color:color-mix(in srgb,var(--tx) 45%,var(--line))} .kpi.live .val{color:var(--tx)} .kpi.live::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tx)} .kpi .flags{font-size:24px;letter-spacing:5px;line-height:1.25;margin-top:4px} .kpis.small{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .kpis.small .val{font-size:28px} .pulse{position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none} .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:.35} .pulse.tx{background:var(--tx)} .pulse.tx::after{border-color:var(--tx)} .kpi .lab .pulse{margin:0 3px 0 4px} /* ------------------------------------------------------------- live calls */ .call{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)} .call:last-child{border-bottom:0} .onair{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:64px;height:58px;border-radius:11px;background:var(--tx-soft);color:var(--tx);font-size:11.5px;font-weight:750;letter-spacing:.04em} .wave{display:flex;align-items:center;gap:2px;height:18px} .wave i{width:3px;height:10px;border-radius:2px;background:var(--tx);animation:wave 1.1s ease-in-out infinite} .wave i:nth-child(1){height:6px;animation-delay:-.1s}.wave i:nth-child(2){height:12px;animation-delay:-.5s} .wave i:nth-child(3){height:17px;animation-delay:-.3s}.wave i:nth-child(4){height:10px;animation-delay:-.8s} .wave i:nth-child(5){height:15px;animation-delay:-.2s}.wave i:nth-child(6){height:8px;animation-delay:-.6s} .wave i:nth-child(7){height:18px;animation-delay:-.4s}.wave i:nth-child(8){height:11px;animation-delay:-.9s} .wave i:nth-child(9){height:7px;animation-delay:-.7s} @keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}} .who{display:flex;align-items:baseline;gap:6px 9px;flex-wrap:wrap;min-width:0} .who .cs{font-size:18px} .who .id{font-size:13.5px;color:var(--ink3)} .arrow{color:var(--ink3);margin:0 2px} .tg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;background:var(--bg3);color:var(--ink);font-weight:700;font-size:14px;white-space:nowrap;align-self:center} .tg .mono{font-weight:700} .tg .tg-name{font-weight:600} .tg.live{background:var(--tx-soft);color:var(--tx)} .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;color:var(--ink2);font-size:13.5px;align-items:center} .meta>span{display:inline-flex;align-items:center;gap:6px} .dur{text-align:right} .dur b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .dur span{font-size:13px;color:var(--ink2)} .tbadge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 7px;border-radius:7px;font-size:13.5px;font-weight:650;white-space:nowrap} .tbadge svg.i{width:15px;height:15px} .tbadge.bs{background:var(--sec-soft);color:var(--bs)} .tbadge.term{background:var(--pri-soft);color:var(--pri-text)} .tbadge.other{background:var(--bg3);color:var(--ink2)} .recent{padding:6px 0 6px;border-top:1px solid var(--line);background:var(--bg2)} .recent h3{margin:0;padding:8px 18px 4px;font-size:13.5px;color:var(--ink3);font-weight:600} .rrow{display:grid;grid-template-columns:minmax(90px,130px) minmax(0,1fr) 64px 100px;gap:12px;align-items:center;padding:0 18px;min-height:38px;font-size:14px;color:var(--ink2)} .rrow b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rrow .r{text-align:right;white-space:nowrap} .rrow .dest{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ------------------------------------------------------------- group rows */ .ghead,.grow{display:grid;grid-template-columns:118px minmax(0,1fr) 124px 104px;gap:14px;align-items:center;padding:0 18px} .ghead.nospark,.grow.nospark{grid-template-columns:118px minmax(0,1fr) 124px} .ghead{padding-top:9px;padding-bottom:9px;font-size:13.5px;color:var(--ink3);font-weight:600;border-bottom:1px solid var(--line);background:var(--bg2)} .ghead span:nth-child(3),.ghead span:nth-child(4){text-align:right} .grow{min-height:58px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:14.5px} .grow:last-child{border-bottom:0} .grow .tg{justify-self:start} .grow .nm{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .grp-act small{font-size:14px;color:var(--ink2)} .grow .nm small{display:block;font-weight:500;color:var(--ink3);font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis} .grow .nm small.talk,small.talk{color:var(--tx);font-weight:600} small.talk::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tx);margin-right:6px;vertical-align:1px} .grow .mem{color:var(--ink2);text-align:right;white-space:nowrap;line-height:1.35} .grow .mem b{color:var(--ink);font-weight:650} .grow .mem .sub{display:block} .hbar{display:flex;align-items:flex-end;gap:2px;height:24px;justify-content:flex-end} .hbar i{width:5px;height:3px;border-radius:1.5px;background:var(--line2)} .hbar i.on{background:var(--pri-bar)} .hbar.tx i.on{background:var(--tx)} /* ----------------------------------------------------------- distribution */ .dist{padding:16px 18px} .stack{display:flex;height:14px;border-radius:5px;overflow:hidden;gap:2px;margin-bottom:12px;background:var(--bg3)} .stack i{display:block;height:100%;min-width:3px} .drow{display:grid;grid-template-columns:26px minmax(0,1.1fr) minmax(60px,1fr) 44px 48px;gap:12px;align-items:center;min-height:42px;font-size:14.5px} .drow .sw{width:12px;height:12px;border-radius:3.5px} .drow .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .drow .nm small{color:var(--ink3);font-weight:500;margin-left:7px;font-size:13.5px} .drow .bar{height:8px;border-radius:4px;background:var(--bg3);overflow:hidden} .drow .bar i{display:block;height:100%;border-radius:4px;background:var(--pri-bar)} .drow b{text-align:right;font-weight:700} .drow .pct{text-align:right;color:var(--ink3);font-size:13.5px} .drow .fl{font-size:24px} .sw.bs,.bar i.bs,.stack i.bs{background:var(--bs)} .sw.bs2,.bar i.bs2,.stack i.bs2{background:var(--sec-2)} .sw.bs3,.bar i.bs3,.stack i.bs3{background:var(--sec-3)} .sw.term,.bar i.term,.stack i.term{background:var(--term)} .sw.other,.bar i.other,.stack i.other{background:var(--ink3)} .stack i.c0{background:var(--pri-bar)} .stack i.c1{background:color-mix(in srgb,var(--pri-bar) 72%,var(--bg1))} .stack i.c2{background:color-mix(in srgb,var(--pri-bar) 50%,var(--bg1))} .stack i.c3{background:color-mix(in srgb,var(--pri-bar) 34%,var(--bg1))} /* ---------------------------------------------------------------- toolbar */ .toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center} .search{flex:1 1 260px;display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;border:1px solid var(--line2);border-radius:10px;background:var(--bg0);color:var(--ink3);min-width:0} .search:focus-within{border-color:var(--focus)} .search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;outline:none} .search input::placeholder{color:var(--ink3)} .select select{height:42px;padding:0 36px 0 13px;border:1px solid var(--line2);border-radius:10px;background:var(--bg0);color:var(--ink);font:600 14.5px var(--sans);min-width:190px; appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%); background-position:calc(100% - 19px) 18px,calc(100% - 14px) 18px;background-size:5px 5px;background-repeat:no-repeat} .seg{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--bg0);border:1px solid var(--line2);min-height:42px;align-items:center;flex-wrap:wrap} .seg:empty{display:none} .seg button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:7px;border:0;background:none;font:600 14px var(--sans);color:var(--ink2);cursor:pointer;white-space:nowrap} .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{background:var(--bg3);color:var(--ink)} .seg button b{color:var(--ink)} .seg i{width:9px;height:9px;border-radius:2.5px} .seg i.bs{background:var(--bs)} .seg i.term{background:var(--term)} /* ----------------------------------------------------------------- tables */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:14.5px} th{text-align:left;font-weight:600;font-size:13.5px;color:var(--ink3);padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line);white-space:nowrap} td{padding:10px 18px;height:60px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:color-mix(in srgb,var(--bg2) 70%,transparent)} tr.tx-row td{background:color-mix(in srgb,var(--tx) 5%,transparent)} td.num,th.num{text-align:right} /* Secondary columns (Users: Client, Groups) collapse into a detail line under the callsign when the table would otherwise scroll sideways. */ .row-detail{display:none} @media (max-width:1100px){ th.col-sec,td.col-sec{display:none} .row-detail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;white-space:normal;font-size:13px;color:var(--ink2);max-width:260px} .row-detail .gchips{display:inline-flex;flex-wrap:wrap;gap:4px} #users-table td{height:auto;padding-top:9px;padding-bottom:9px} } td .cs{font-size:15.5px} .cs-sub{display:block;font-size:13px;color:var(--ink3);font-weight:500;line-height:1.25} .cty{display:inline-flex;align-items:center;gap:8px} .cty .fl{font-size:20px} .iso{color:var(--ink3);font-size:13px} .ver{color:var(--ink3);margin-left:5px} .gchips{display:flex;gap:5px;flex-wrap:wrap;white-space:normal;min-width:120px} .gchip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:6px;background:var(--bg3);font:650 13.5px var(--mono);color:var(--ink);white-space:nowrap} .gchip.live{background:var(--tx-soft);color:var(--tx)} .gchip.live::before,.txchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tx)} .txchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;margin-left:8px;border-radius:6px;background:var(--tx-soft);color:var(--tx);font-size:12.5px;font-weight:750;letter-spacing:.03em;vertical-align:2px} /* Users: long lists scroll inside the card under a sticky header; base stations group their radios (indented child rows, collapsible). */ .table-scroll{max-height:min(72vh,880px);overflow:auto;overscroll-behavior:contain} .table-scroll th{position:sticky;top:0;z-index:2} #users-table td{height:50px;padding-top:6px;padding-bottom:6px} .ucell{display:flex;align-items:center;gap:8px} .ucs{display:inline-block;min-width:0} .bs-toggle{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:7px;border:1px solid var(--line2); background:var(--bg0);color:var(--ink2);cursor:pointer} .bs-toggle:hover{color:var(--ink);border-color:var(--ink3)} .bs-toggle svg.chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .bs-toggle svg.chev.open{transform:rotate(90deg)} tr.bs-parent td{background:color-mix(in srgb,var(--bs) 6%,transparent)} tr.bs-child td:first-child{position:relative;padding-left:52px} tr.bs-child td:first-child::before{content:"";position:absolute;left:26px;top:0;height:50%;width:14px;border-left:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);border-bottom-left-radius:5px} tr.bs-child td{border-bottom-color:color-mix(in srgb,var(--line) 60%,transparent)} .via{color:var(--ink3);font-size:13.5px;white-space:nowrap} .via .mono{color:var(--ink2)} .pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink3)} .pager[hidden]{display:none} .pager b{color:var(--ink);font-weight:650} .pager button{min-height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--bg0);color:var(--ink);font:600 13.5px var(--sans);cursor:pointer} .pager button:hover:not([disabled]){background:var(--bg2);border-color:var(--ink3)} .pager button[disabled]{opacity:.45;cursor:default} .pager .pg{text-align:center} .field{display:flex;align-items:center;gap:8px;height:42px;padding:0 4px 0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--bg0);color:var(--ink3);min-width:0} .field .flabel{font-size:13px;font-weight:600} .field input{height:38px;border:0;background:none;color:var(--ink);font:600 14px var(--sans);min-width:0;outline:none;color-scheme:light dark} .tg-field input{width:84px;font-family:var(--mono)} .field:focus-within{border-color:var(--ink3)} .hist-tools .btn{min-height:42px} @media (max-width:900px){#users-table th.col-proto,#users-table td.col-proto{display:none}} @media (max-width:680px){ .table-scroll{max-height:70vh} tr.bs-child td:first-child{padding-left:38px} tr.bs-child td:first-child::before{left:17px;width:12px} .pager{padding:10px 14px} .pager .pg-n{display:none} /* Users at phone width: Type/Protocol collapse (the BS grouping and the detail line carry them), the country shows as flag + ISO code. */ #users-table th.col-ter,#users-table td.col-ter{display:none} #users-table .cty-nm{display:none} #users-table .cty:not(:has(.iso)) .cty-nm{display:inline} #users-table th,#users-table td{padding-left:10px;padding-right:10px} .hist-tools .field{flex:1 1 calc(50% - 5px)} .hist-tools .field input{flex:1;width:100%} .hist-tools .tg-field{flex-basis:calc(50% - 5px)} .hist-tools .btn{flex:1 1 calc(50% - 5px)} } .badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:13px;font-weight:650;background:var(--bg3);color:var(--ink2);white-space:nowrap} .badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.live{background:var(--tx-soft);color:var(--tx)} /* ------------------------------------------------------------------ prose */ .prose{padding:10px 26px 26px} .prose h1{font-size:24px;margin:14px 0 10px} .prose h2{font-size:18px;margin:28px 0 8px} .prose p,.prose li{color:var(--ink2);max-width:82ch;font-size:15.5px} .prose li{margin:6px 0} .prose b{color:var(--ink)} .prose code{font-size:.92em;padding:1px 6px;border-radius:5px;background:var(--bg3);color:var(--ink)} .steps{padding-left:22px} .endpoints{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:20px} .ep{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;background:var(--bg2);min-width:0} .ep-head{display:flex;align-items:center;gap:10px} .ep h3{margin:0;font-size:16px} .ep p{margin:0;font-size:14px;color:var(--ink2)} .ep code{display:block;font:650 15px var(--mono);color:var(--ink);word-break:break-all;padding:9px 11px;border-radius:9px;background:var(--bg0);border:1px solid var(--line)} .ep .btn{align-self:flex-start} .ep.insecure{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))} .ep-warn{margin:0;padding:9px 11px;border-radius:9px;background:var(--warn-soft);color:var(--ink) !important;border-left:3px solid var(--warn);font-size:13.5px} /* ----------------------------------------------------------------- footer */ .foot{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;align-items:center;padding:13px 24px;border-top:1px solid var(--line);color:var(--ink3);font-size:13.5px;background:var(--bg1)} .foot em{font-style:normal;color:var(--ink2)} /* --------------------------------------------------------------- accounts */ .acct-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start} .acct-card{max-width:620px;width:100%} .acct-body{padding:16px 18px} .acct-body>p{margin:0 0 10px} .acct-body:has(> .acct-msg:empty:only-child){display:none} .hint-inline{color:var(--ink2);font-size:14.5px} .acct-form{display:grid;gap:14px;margin:10px 0} .acct-form label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--ink2)} .acct-form input,.admin-role{font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:var(--bg0);border:1px solid var(--line2);border-radius:10px;padding:0 13px;height:42px;width:100%} .acct-form input:focus,.admin-role:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px var(--pri-soft)} .acct-form .btn{justify-self:start;min-height:42px;padding:0 18px} .admin-role{width:auto;height:32px;padding:0 8px;font-size:13.5px} .acct-form.inline{grid-template-columns:minmax(0,1fr) auto;align-items:end;max-width:600px} .acct-summary{display:flex;align-items:center;gap:12px;margin-bottom:6px} .acct-summary .cs{font-size:22px} .acct-msg:empty{display:none} .acct-msg{margin:10px 0;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);font-size:14.5px} .acct-msg.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)} .acct-msg.err{border-color:color-mix(in srgb,var(--err) 45%,transparent);background:var(--err-soft)} .acct-msg.temp{border-left:4px solid var(--warn)} .acct-msg p{margin:0 0 6px} .acct-msg p:last-child{margin-bottom:0} .acct-warn{color:var(--warn);font-weight:600} .acct-strong{font-weight:700} .acct-temp{display:inline-block;font:700 18px var(--mono);padding:4px 10px;border-radius:8px;background:var(--bg0);border:1px dashed var(--warn);user-select:all;margin:4px 0 8px} .admin-ids{display:flex;flex-wrap:wrap;gap:6px;white-space:normal;min-width:200px} .admin-id{display:inline-flex;align-items:center;gap:6px;padding:2px 2px 2px 9px;border:1px solid var(--line2);border-radius:8px;background:var(--bg0)} .admin-id .btn{min-height:26px;padding:0 8px;font-size:12.5px} .admin-actions{display:flex;gap:6px;flex-wrap:wrap} .hp-field{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden} .bs-coords{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px} .bs-actions{display:flex;gap:8px;flex-wrap:wrap} .bs-picker{margin:10px 0} .ml-picker-canvas{height:320px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--bg2)} .kind{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:var(--term)} .kind svg.i{width:17px;height:17px;stroke:#1B0D02;stroke-width:2.2} .kind.k-bs{background:var(--bs);border-radius:9px} .kind.k-bs svg.i{stroke:#06202B} .kind.k-tx{background:var(--tx)} .kind.k-tx svg.i{stroke:#fff} .kind.dim{background:var(--ink3)} .kind.sm{width:28px;height:28px} .kind.sm svg.i{width:15px;height:15px} :root[data-theme="light"] .kind.k-bs svg.i{stroke:#fff} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .kind.k-bs svg.i{stroke:#fff}} /* -------------------------------------------------------------------- map */ body[data-page="map"] .main{max-width:none;padding:0} body[data-page="map"] .page-map{gap:0} .ml-root{display:grid;grid-template-columns:minmax(0,1fr) 390px;height:calc(100dvh - 86px);min-height:560px;background:var(--bg1);overflow:hidden} .ml-loading{padding:24px;color:var(--ink3)} .ml-stage{position:relative;min-width:0;min-height:0;background:var(--bg0);overflow:hidden} .ml-canvas{position:absolute;inset:0;width:100%;height:100%} .ml-canvas .maplibregl-canvas:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .ml-status{position:absolute;left:16px;top:16px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 460px)} .ml-status:empty{display:none} .ml-stat{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;background:color-mix(in srgb,var(--bg1) 92%,transparent);border:1px solid var(--line2);font-size:14px;color:var(--ink2);box-shadow:var(--shadow);white-space:nowrap;backdrop-filter:blur(8px)} .ml-stat b{color:var(--ink);font-weight:700} .ml-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none} .ml-dot.bs{background:var(--bs);border-radius:3px} .ml-dot.term{background:var(--term)} .ml-dot.tx{background:var(--tx);box-shadow:0 0 0 3px var(--tx-soft)} .ml-dot.live{background:var(--ok)} /* MapLibre controls (top right): style switch, 2D/3D, Fit; zoom below */ .maplibregl-ctrl-top-right{top:6px;right:6px} .ml-ctl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;clear:both;margin:10px 10px 0 0 !important;float:right} .ml-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;height:38px;border-radius:10px;border:1px solid var(--line2);background:color-mix(in srgb,var(--bg1) 94%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(8px)} .ml-ctl-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:0;border-radius:7px;background:none;color:var(--ink2);font:600 14px var(--sans);cursor:pointer;white-space:nowrap} .ml-ctl-btn:hover{color:var(--ink);background:var(--bg2)} .ml-ctl-btn[aria-pressed="true"]{background:var(--pri);color:var(--on-pri)} .ml-ctl-btn svg.i{width:16px;height:16px} .maplibregl-ctrl-group{background:var(--bg1) !important;border:1px solid var(--line2);border-radius:10px !important;box-shadow:var(--shadow) !important;overflow:hidden} .maplibregl-ctrl-group button{width:36px !important;height:36px !important} .maplibregl-ctrl-group button+button{border-top:1px solid var(--line) !important} .maplibregl-ctrl-group button:not(:disabled):hover{background:var(--bg2) !important} .maplibregl-ctrl-group .maplibregl-ctrl-icon{opacity:.85} .maplibregl-ctrl-attrib{font-size:11.5px;background:color-mix(in srgb,var(--bg1) 85%,transparent) !important;color:var(--ink2)} .maplibregl-ctrl-attrib a{color:var(--ink2) !important} .maplibregl-ctrl-attrib-button{background-color:var(--bg1) !important} .maplibregl-ctrl-scale{background:color-mix(in srgb,var(--bg1) 85%,transparent) !important;color:var(--ink2) !important;border-color:var(--ink3) !important;font-size:11.5px} .maplibregl-ctrl-group .maplibregl-ctrl-icon,.maplibregl-ctrl-attrib-button{filter:invert(1) hue-rotate(180deg)} :root[data-theme="light"] .maplibregl-ctrl-group .maplibregl-ctrl-icon,:root[data-theme="light"] .maplibregl-ctrl-attrib-button{filter:none} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .maplibregl-ctrl-group .maplibregl-ctrl-icon,:root:not([data-theme="dark"]) .maplibregl-ctrl-attrib-button{filter:none}} /* playback bar */ .ml-player{position:absolute;left:16px;right:16px;bottom:34px;z-index:2;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--bg1) 95%,transparent);border:1px solid var(--line2);box-shadow:var(--shadow-pop);backdrop-filter:blur(8px)} .ml-play-btn{min-height:38px;padding:0 16px 0 12px;min-width:92px} .ml-play-btn svg.i{width:16px;height:16px;fill:currentColor;stroke:none} .ml-timeline{position:relative;flex:1 1 auto;min-width:120px;height:40px} .ml-rail{position:absolute;left:0;right:0;top:10px;height:8px;border-radius:4px;overflow:hidden;background:linear-gradient(90deg,#36C8F4,#3DDC97 18%,#FFD24A 41%,#FF8A3D 68%,#E36BFF)} .ml-rail-mask{position:absolute;right:0;top:10px;height:8px;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--bg1) 62%,transparent)} .ml-slider{position:absolute;left:-9px;right:-9px;top:0;width:calc(100% + 18px);height:28px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer} .ml-slider:focus{outline:none} .ml-slider::-webkit-slider-runnable-track{height:28px;background:none} .ml-slider::-moz-range-track{height:28px;background:none} .ml-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:5px;border-radius:50%;background:var(--ink);border:4px solid var(--bg1);box-shadow:0 0 0 2px var(--pri)} .ml-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--ink);border:4px solid var(--bg1);box-shadow:0 0 0 2px var(--pri)} .ml-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--focus),0 0 0 6px var(--pri-soft)} .ml-slider:disabled{cursor:default;opacity:.5} .ml-ticks{position:absolute;left:0;right:0;top:23px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink3);pointer-events:none} .ml-play-time{font-size:14.5px;font-weight:650;min-width:170px;text-align:right;white-space:nowrap;color:var(--ink)} .ml-chips{display:inline-flex;gap:4px;align-items:center} .ml-chips.wrap{flex-wrap:wrap} .ml-player .ml-chips{gap:2px;padding:3px;border-radius:10px;border:1px solid var(--line2);background:var(--bg0)} .ml-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line2);background:var(--bg1);color:var(--ink2);font:650 13.5px var(--sans);cursor:pointer;white-space:nowrap} .ml-player .ml-chip{border:0;background:none;height:28px;padding:0 10px} .ml-chip:hover{color:var(--ink);border-color:var(--ink3)} .ml-chip[aria-pressed="true"]{background:var(--pri) !important;border-color:transparent;color:var(--on-pri)} .ml-chip svg.i{width:16px;height:16px} .ml-note{position:absolute;top:64px;left:16px;z-index:3;max-width:min(520px,calc(100% - 32px));padding:11px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--bg1);box-shadow:var(--shadow);font-size:14px} .ml-empty{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1;max-width:calc(100% - 32px);padding:14px 18px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--bg1) 94%,transparent);box-shadow:var(--shadow);text-align:center;font-size:15px} /* side panel */ .ml-panel{display:flex;flex-direction:column;gap:12px;padding:14px;min-width:0;min-height:0;overflow-y:auto;border-left:1px solid var(--line);background:var(--bg1)} .ml-panel .search.ml-panel-search{flex:none;min-height:42px} .ml-custom input{width:100%;font:inherit;color:var(--ink);background:var(--bg0);border:1px solid var(--line2);border-radius:9px;padding:0 10px;height:38px} .ml-track{flex:none;border:1px solid color-mix(in srgb,var(--pri) 45%,var(--line));border-radius:14px;background:var(--bg2);padding:12px;display:grid;gap:12px} .ml-track-head{display:flex;align-items:flex-start;gap:10px} .ml-track-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1} .ml-track-title b{font-size:16.5px;font-weight:750} .ml-track-title .mono{margin-left:6px} .ml-track-title small{display:block;color:var(--ink2);font-size:13px;line-height:1.35;margin-top:1px} .ml-close{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--ink3);cursor:pointer;flex:none} .ml-close:hover{color:var(--ink);background:var(--bg3)} .ml-custom summary{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg1);font-weight:650;font-size:13.5px;color:var(--ink2);cursor:pointer;list-style:none} .ml-custom summary::-webkit-details-marker{display:none} .ml-custom summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-1px);margin-left:6px} .ml-custom-body{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:10px;align-items:end} .ml-custom-body label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--ink2)} .ml-track-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:10px;overflow:hidden;border:1px solid var(--line)} .ml-track-stats>.sub{grid-column:1/-1;background:var(--bg1);padding:10px} .ml-statcell{background:var(--bg1);padding:7px 9px;min-width:0} .ml-statcell>span{display:block;font-size:12.5px;color:var(--ink3);font-weight:600;white-space:nowrap} .ml-statcell b{display:block;white-space:nowrap;font-size:17px;font-weight:750;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis} .ml-statcell b small{font-size:12.5px;color:var(--ink2);font-weight:600;margin-left:2px;letter-spacing:0} .ml-legend-speed i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#36C8F4 0%,#3DDC97 18%,#FFD24A 41%,#FF8A3D 68%,#E36BFF 100%)} .ml-legend-speed div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink3);margin-top:4px;font-weight:600} .ml-track-msg{margin:0;font-size:13.5px;color:var(--warn)} .ml-track-msg:empty{display:none} .ml-track-actions{display:flex;gap:6px} .ml-list-head{display:flex;align-items:center;gap:8px;padding:2px 2px 0} .ml-list-head>b{font-size:15.5px} .ml-check{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink2);font-weight:600;cursor:pointer;white-space:nowrap} .ml-check input{width:16px;height:16px;margin:0;accent-color:var(--pri)} .ml-list{display:grid;gap:2px;align-content:start;flex:1 0 auto;min-height:120px} .ml-list-empty{padding:24px 12px;text-align:center;color:var(--ink3);font-size:14px} .ml-row{display:flex;align-items:center;gap:6px;padding:2px 6px 2px 2px;border-radius:10px} .ml-row:hover{background:var(--bg2)} .ml-row.sel{background:var(--pri-soft);box-shadow:inset 3px 0 0 var(--pri)} .ml-row-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:5px 6px;border-radius:8px} .ml-row-text{display:grid;min-width:0;line-height:1.3} .ml-row-text b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-row-text small{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ml-row .kind{width:30px;height:30px} .ml-row .kind svg.i{width:16px;height:16px} .ml-row .txchip{margin:0;white-space:nowrap;flex:none} .ml-age{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin:0 4px} .ml-age.live{background:var(--ok)} .ml-age.recent{background:var(--warn)} .ml-age.old{background:var(--ink3)} .ml-track-btn{height:28px;padding:0 9px;font-size:13px;opacity:.9} .ml-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:10px} .ml-legend span{display:inline-flex;align-items:center;gap:6px} .ml-legend i{width:10px;height:10px;border-radius:50%} .ml-legend i.bs{background:var(--bs);border-radius:3px} .ml-legend i.term{background:var(--term)} .ml-legend i.tx{background:var(--tx)} .ml-hint{margin:0;color:var(--ink3);font-size:13px;line-height:1.45} /* popups */ .ml-popup .maplibregl-popup-content,.ml-tip .maplibregl-popup-content{padding:12px 14px;border-radius:12px;background:var(--bg1);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--shadow-pop);font:14px/1.45 var(--sans)} .ml-tip .maplibregl-popup-content{padding:8px 11px;font-size:13px} .ml-popup .maplibregl-popup-close-button{font-size:20px;color:var(--ink3);right:6px;top:4px} .ml-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,.ml-tip.maplibregl-popup-anchor-top .maplibregl-popup-tip,.ml-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.ml-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--bg1)} .ml-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.ml-tip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.ml-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.ml-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--bg1)} .ml-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip,.ml-tip.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--bg1)} .ml-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip,.ml-tip.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--bg1)} .ml-card{min-width:230px} .ml-card-head{display:flex;align-items:center;gap:10px;margin:0 20px 10px 0} .ml-card-head b{display:block;font-size:16px} .ml-card-head small{display:block;color:var(--ink2);font-size:13px} .ml-card dl,.ml-tip-body dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0} .ml-card dt,.ml-tip-body dt{color:var(--ink3)} .ml-card dd,.ml-tip-body dd{margin:0;overflow-wrap:anywhere;font-weight:600} .ml-card-actions{display:flex;gap:6px;margin-top:12px} /* ------------------------------------------------------------- responsive */ @media (max-width:1380px){ .top{flex-wrap:wrap;row-gap:10px} .tabs{order:3;width:100%} .ruler{top:auto;position:relative} .top{position:relative} .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .ml-root{height:calc(100dvh - 140px)} } @media (max-width:1100px){ .grid-ov,.grid2,.acct-grid{grid-template-columns:minmax(0,1fr)} .ml-root{grid-template-columns:minmax(0,1fr) 340px} .ml-status{max-width:calc(100% - 32px);top:auto;bottom:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .ml-player{bottom:66px} } @media (max-width:820px){ .ml-root{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(420px,64vh) auto;height:auto;min-height:0} .ml-panel{border-left:0;border-top:1px solid var(--line);overflow:visible} .ml-player{flex-wrap:wrap;gap:10px;bottom:60px} .ml-timeline{order:4;flex-basis:100%} .ml-play-time{min-width:0;margin-left:auto} .bs-coords{grid-template-columns:1fr 1fr} .bs-coords label:first-child{grid-column:1/-1} } @media (max-width:680px){ body{font-size:15px} .top{padding:10px 14px;gap:10px} .brand-text small{font-size:11.5px} .brand-mark{width:34px;height:34px} .status{height:34px;padding:0 10px} #acct-logout .btn-label{display:none} #acct-logout{width:36px;padding:0} .main{padding:14px 12px 20px} .offline{margin:12px 12px 0} .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kpi{padding:12px 13px} .kpi .val{font-size:28px} .kpi .spark{display:none} .kpi .lab{font-size:13.5px} .card-head{padding:12px 14px} .call{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px 14px} .call .dur{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px} .call .dur b{display:inline;font-size:20px} .onair{width:54px;height:52px} .who .cs{font-size:17px} .rrow{grid-template-columns:minmax(0,1fr) auto;padding:6px 14px;gap:2px 10px} .rrow .dest{grid-column:1;grid-row:2;font-size:13.5px} .rrow .r.durc{grid-column:2;grid-row:1} .rrow .r.when{grid-column:2;grid-row:2;font-size:13px} .ghead{display:none} .grow,.grow.nospark{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;padding:8px 14px} .grow .hbar{grid-column:2 / 4;justify-content:flex-start;height:18px} .drow{grid-template-columns:22px minmax(0,1fr) minmax(40px,.7fr) 30px 40px;gap:8px} .drow .nm small{display:none} .dist{padding:14px} .toolbar{padding:12px 14px} .search{flex-basis:100%} .select,.select select{flex:1;min-width:0;width:100%} th,td{padding:8px 12px} td{height:54px} .prose{padding:6px 16px 20px} .prose h1{font-size:22px} .acct-form.inline{grid-template-columns:1fr} .bs-coords{grid-template-columns:1fr} .foot{gap:4px 16px;padding:12px 14px;font-size:13px} .ml-root{grid-template-rows:minmax(380px,60vh) auto} .ml-status{left:10px;right:10px;bottom:10px;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:none} .ml-status::-webkit-scrollbar{display:none} .ml-root{grid-template-rows:minmax(480px,72vh) auto} .ml-player{gap:8px 10px} .ml-play-btn{min-width:0;padding:0 12px} .ml-stat{height:32px;padding:0 9px;font-size:13px} .ml-ctl{margin:8px 8px 0 0 !important;gap:6px} .ml-ctl-btn{padding:0 8px;font-size:13px} .ml-player{left:10px;right:10px;bottom:56px;padding:10px 12px} .ml-play-time{font-size:13px} .ml-custom-body{grid-template-columns:1fr} .ml-track-stats{grid-template-columns:repeat(2,minmax(0,1fr))} /* D1: chips wrap instead of being cut; in track mode the player takes their place. */ .ml-status{flex-wrap:wrap;overflow:visible} .ml-tracking .ml-status{display:none} .ml-tracking .ml-player{bottom:34px} .ml-ctl{max-width:calc(100vw - 20px)} /* D3: KPI sub-lines wrap instead of being truncated; group sparklines are hidden. */ .kpi .kpi-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35} .grow .hbar{display:none} } @media (max-width:420px){ .brand-text b{font-size:16px} .top-actions{gap:6px} } /* Wall / kiosk mode: ?wall=1 */ body.wall{font-size:18px} body.wall .tabs,body.wall #theme-toggle,body.wall .foot{display:none} body.wall .main{max-width:none} @media (min-width:2000px){body{font-size:16px}} @media (prefers-reduced-motion:reduce){.wave i{animation:none}} /* Logo mark: 4 TETRA timeslots (one on air) + 3 network nodes */ .brand-mark .lm-fg,.brand-mark .lm-tx{fill:none;stroke-width:6.5}.brand-mark .lm-fg{stroke:var(--ink)}.brand-mark .lm-tx{stroke:var(--tx)} .brand-mark .lm-infra{fill:none;stroke:var(--bs);stroke-width:3.2;stroke-linecap:round}.brand-mark .lm-node{fill:var(--bg0);stroke:var(--bs);stroke-width:3.2} /* Network identity: under the logo and on "How to connect" */ .brand-text{display:inline-grid;justify-items:center;text-align:center} .brand-text small.netid{font-variant-numeric:tabular-nums;letter-spacing:.06em;font-weight:650;color:var(--ink2)} .brand-text small.netid .net-mccmnc{font-family:var(--mono);color:var(--sec);letter-spacing:.02em} .netid-card{margin:28px 0 8px;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg2)} .netid-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px} .netid-head h2{margin:0} .netid-big{margin:0;font-size:22px;font-variant-numeric:tabular-nums} .netid-big b{font-family:var(--mono);font-size:30px;color:var(--sec);letter-spacing:.02em} .netid-label{color:var(--ink3);font-size:14px;font-weight:650;letter-spacing:.08em} .netid-sep{color:var(--ink3);margin:0 6px} .netid-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:14px 0} .netid-why h3{margin:0 0 6px;font-size:16px} .keypad{display:flex;gap:10px;margin:12px 0 0} .keypad .key{display:grid;justify-items:center;min-width:58px;padding:8px 10px 6px;border:1px solid var(--line2);border-radius:12px;background:var(--bg1);box-shadow:inset 0 -2px 0 var(--line)} .keypad .key b{font-family:var(--mono);font-size:24px;line-height:1;color:var(--pri-text)} .keypad .key small{margin-top:4px;font-size:11.5px;letter-spacing:.08em;color:var(--ink3)} @media (max-width:680px){.netid-why{grid-template-columns:1fr}.netid-card{padding:18px 16px}.netid-big b{font-size:24px}} .foot{justify-content:space-between} .foot-links{display:flex;flex-wrap:wrap;gap:6px 22px} .foot-links a,.foot-tg{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);text-decoration:none;font-weight:600} .foot-links a:hover,.foot-links a:focus-visible,.foot-tg:hover,.foot-tg:focus-visible{color:var(--pri-text)} .foot-links .ext{width:14px;height:14px;opacity:.7} .foot-credit{display:flex;align-items:center;gap:18px} .foot-tg .tg-ico{width:20px;height:20px} .foot-tg .tg-ico{flex:none} .foot-by{color:var(--ink3)} .foot-by b{color:var(--ink);font-weight:750;letter-spacing:.02em} @media (max-width:680px){.foot{justify-content:center;text-align:center}.foot-links,.foot-credit{justify-content:center}} /* How to connect: device settings */ .ep-cfg{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:12px 0;align-items:center} .ep-cfg dt{color:var(--ink3);font-weight:650;font-size:14px} .ep-cfg dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink);overflow-wrap:anywhere} .ep-cfg dd .mono{font-weight:650}