/* Statotest brand tokens — 2026.02 */
:root{
  --st-black:#000000; --st-red:#E21752; --st-indigo:#1F04A3; --st-white:#FFFFFF;
  --st-grey-soft:#f6f6f7; --st-grey-line:#e5e5e8; --st-grey-text:#5a5a62;
  --ok:#1e7f3e; --warn:#b26a00;
  --st-font:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--st-font);font-weight:400;color:var(--st-black);background:var(--st-white);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ---- navigation ---- */
nav{position:sticky;top:0;z-index:20;background:var(--st-white);border-bottom:1px solid var(--st-grey-line)}
.nav-inner{display:flex;align-items:center;gap:22px;padding:10px 28px}
.logo{width:96px;height:auto;flex:none}
.nav-title{font-weight:600;letter-spacing:-0.01em;color:var(--st-grey-text);font-size:14px;white-space:nowrap}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs a{padding:7px 14px;border-radius:8px;text-decoration:none;color:var(--st-black);
        font-weight:600;font-size:14px}
.tabs a:hover{background:var(--st-grey-soft)}
.tabs a.active{background:var(--st-indigo);color:var(--st-white)}
.badges{margin-left:auto;display:flex;gap:8px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:12.5px;
       font-weight:600;border:1px solid var(--st-grey-line);background:var(--st-grey-soft);color:var(--st-black);white-space:nowrap}
.badge.dataset-annaberg{background:var(--st-indigo);border-color:var(--st-indigo);color:#fff}
.badge.dataset-testdata{background:#fff7ea;border-color:#e8d5b0;color:var(--warn)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pulse.err{background:var(--st-red)}
.pulse.idle{background:var(--st-grey-text)}

/* ---- layout ---- */
main{padding:26px 28px 40px;width:100%}
section{width:100%}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:18px;flex-wrap:wrap}
h1{font-weight:600;font-size:28px;letter-spacing:-0.015em;margin:0}
h2{font-weight:600;font-size:18px;letter-spacing:-0.01em;margin:34px 0 10px;display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;background:var(--st-red);flex:none}
.muted{color:var(--st-grey-text)}
.small{font-size:12.5px;margin:0 0 12px}
code,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px}
.errtext{color:var(--st-red);font-weight:600}
.scroll{overflow-x:auto}

/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tiles.today{margin-top:12px}
.tiles.today .tile{background:#fbfaff;border-color:#e3ddff}
.hm-cell.clickable{cursor:pointer}
.tile{background:var(--st-grey-soft);border:1px solid var(--st-grey-line);border-radius:10px;padding:16px 18px}
.tile .k{font-size:12px;color:var(--st-grey-text);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:28px;font-weight:600;letter-spacing:-0.01em;margin-top:2px}
.tile .v.indigo{color:var(--st-indigo)}
.tile .v.red{color:var(--st-red)}
.tile .sub{font-size:12px;color:var(--st-grey-text);margin-top:2px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--st-grey-line);vertical-align:middle;white-space:nowrap}
th{font-weight:600;color:var(--st-indigo);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--st-grey-soft)}

.status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px}
.status .sym{font-size:11px;line-height:1}
.status.live{color:var(--ok)}
.status.delayed{color:var(--warn)}
.status.silent{color:var(--st-grey-text)}

/* ---- dashboard columns ---- */
.cols{display:grid;grid-template-columns:3fr 2fr;gap:32px;align-items:start}
@media (max-width:1000px){.cols{grid-template-columns:1fr}}
.chartwrap{position:relative}
#chart{width:100%;height:230px;display:block}

.events{list-style:none;margin:0;padding:0;font-size:13px}
.events li{padding:7px 0;border-bottom:1px solid var(--st-grey-line);display:flex;gap:10px;align-items:baseline}
.events .t{color:var(--st-grey-text);font-variant-numeric:tabular-nums;flex:none}
.events .lvl-error{color:var(--st-red);font-weight:600}

/* ---- heatmap ---- */
#heatmap{display:inline-block;min-width:100%}
.hm-grid{display:grid;gap:3px;align-items:center}
.hm-label{font-size:12.5px;white-space:nowrap;padding-right:10px;text-align:right;color:var(--st-black)}
.hm-label .sn{color:var(--st-grey-text);font-size:11px}
.hm-cell{width:100%;min-width:26px;height:24px;border-radius:4px;background:var(--st-grey-soft);
         border:1px solid var(--st-grey-line);cursor:default}
.hm-day{font-size:10.5px;color:var(--st-grey-text);text-align:center;padding-top:3px;white-space:nowrap}
.hm-legend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--st-grey-text);margin-top:10px}
.hm-legend .swatch{width:18px;height:12px;border-radius:3px;border:1px solid var(--st-grey-line)}

/* ---- explorer ---- */
.explorer .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:4px;font-size:13.5px;flex-wrap:wrap}
.crumbs a{color:var(--st-indigo);text-decoration:none;font-weight:600;padding:3px 6px;border-radius:6px}
.crumbs a:hover{background:var(--st-grey-soft)}
.crumbs .sep{color:var(--st-grey-text)}
.crumbs .cur{font-weight:600;padding:3px 6px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:none;cursor:pointer;
     background:var(--st-indigo);color:var(--st-white);font-family:var(--st-font);font-weight:600;font-size:13px;text-decoration:none}
.btn:hover{opacity:.92}
.btn.ghost{background:var(--st-grey-soft);color:var(--st-black);border:1px solid var(--st-grey-line)}
.explorer tr.row{cursor:pointer}
.explorer .name{font-weight:600}
.explorer .name.dir{color:var(--st-indigo)}
.explorer .icon{display:inline-block;width:20px;text-align:center;margin-right:6px}
.explorer .empty{color:var(--st-grey-text);padding:18px 12px}
.explorer .loading{color:var(--st-grey-text);padding:18px 12px}

/* ---- settings ---- */
#mapping input,#mapping select{font-family:var(--st-font);font-size:14px;padding:6px 10px;border:1px solid var(--st-grey-line);
               border-radius:8px;width:200px;background:#fff}
#mapping input[type=number]{width:110px}
#mapping select{width:80px}
#mapping input:focus,#mapping select:focus{border-color:var(--st-indigo);outline:none}
#configtable td:first-child{font-weight:600;color:var(--st-indigo);width:260px}

/* ---- bridge schema ---- */
.schema{min-width:760px}
.schema svg{width:100%;height:auto;display:block}
.schema .slot{cursor:pointer}
.schema.compact{max-width:1100px}
.schema text{font-family:var(--st-font)}

/* ---- compare chips ---- */
.comparebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.comparechips{display:flex;gap:6px;flex-wrap:wrap}
.comparechips .cchip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--st-grey-line);background:var(--st-grey-soft);font-size:12.5px;font-weight:600;
  color:var(--st-grey-text);cursor:pointer;font-family:var(--st-font)}
.comparechips .cchip .sw{width:10px;height:10px;border-radius:3px;background:var(--st-grey-line)}
.comparechips .cchip.on{border-color:var(--st-indigo);background:#efeaff;color:var(--st-black)}
.comparechips .cchip:disabled{opacity:.45;cursor:default}

/* ---- measures ---- */
.mtoolbar{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.mlabel{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--st-grey-text);
        text-transform:uppercase;letter-spacing:.04em}
.mlabel select,.mlabel input{font-family:var(--st-font);font-size:14px;padding:7px 10px;border:1px solid var(--st-grey-line);
        border-radius:8px;background:#fff;min-width:220px}
.mlabel select:focus,.mlabel input:focus{border-color:var(--st-indigo);outline:none}
.hourchips{display:flex;gap:4px;flex-wrap:wrap}
.hourchips .chip{width:34px;height:30px;border-radius:7px;border:1px solid var(--st-grey-line);background:var(--st-grey-soft);
        font-family:var(--st-font);font-size:12px;font-weight:600;color:var(--st-grey-text);cursor:default}
.hourchips .chip.avail{background:#e9e5ff;border-color:#c9beff;color:var(--st-indigo);cursor:pointer}
.hourchips .chip.avail:hover{background:#d8d0ff}
.hourchips .chip.active{background:var(--st-indigo);border-color:var(--st-indigo);color:#fff}
.hourchips .chip.pending{background:#fff7ea;border-color:#e8d5b0;color:var(--warn)}
.mheadrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mchartbar{display:flex;align-items:center;gap:18px;margin:18px 0 8px;flex-wrap:wrap}
.mchartbar .legend{margin:0}
.legend .toggle{cursor:pointer;-webkit-user-select:none;user-select:none;opacity:1}
.legend .toggle.off{opacity:.3}
.chartbox{position:relative}
#m-chart{width:100%;display:block;background:#fff;border:1px solid var(--st-grey-line);border-radius:10px}
.mloading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          background:rgba(255,255,255,.7);font-weight:600;color:var(--st-indigo);border-radius:10px}
.mloading[hidden]{display:none}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:rgba(0,0,10,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:30px}
.overlay[hidden]{display:none}
.modal{background:var(--st-white);border-radius:14px;width:min(1100px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px;border-bottom:1px solid var(--st-grey-line)}
.modal-title{font-weight:600;font-size:15px;word-break:break-all}
.modal-actions{display:flex;gap:8px;flex:none}
.modal-body{padding:18px 22px;overflow-y:auto}
#pv-plotwrap{margin-bottom:14px}
#pv-plot{width:100%;display:block;background:var(--st-grey-soft);border:1px solid var(--st-grey-line);border-radius:10px}
.legend{display:flex;gap:16px;font-size:12.5px;margin-bottom:6px}
.legend .sw{display:inline-block;width:16px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
#pv-text{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;line-height:1.5;background:#0a0030;
         color:#eceaff;padding:16px 18px;border-radius:10px;overflow:auto;max-height:340px;white-space:pre}

/* ---- tooltip / footer ---- */
.tooltip{position:fixed;pointer-events:none;background:var(--st-black);color:#fff;font-size:12px;
         padding:6px 10px;border-radius:6px;opacity:0;transition:opacity .12s;white-space:nowrap;z-index:99}
footer{padding:16px 28px 26px;border-top:1px solid var(--st-grey-line);font-size:12px;
       color:var(--st-grey-text);display:flex;justify-content:space-between;gap:20px}

/* ---- login ---- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse 70% 90% at 15% 10%, rgba(226,23,82,.06), transparent 60%),var(--st-grey-soft)}
#login[hidden]{display:none}
.login-card{background:#fff;border:1px solid var(--st-grey-line);border-radius:16px;padding:40px 42px;
  width:min(420px,94vw);box-shadow:0 12px 40px rgba(10,0,48,.08)}
.login-logo{width:118px;height:auto;display:block;margin-bottom:26px}
.login-title{font-weight:600;font-size:24px;letter-spacing:-0.015em;margin:0 0 4px}
.login-title .accent{color:var(--st-indigo)}
.login-sub{color:var(--st-grey-text);font-size:14px;margin:0 0 22px}
#login-form{display:flex;flex-direction:column;gap:14px}
#login-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--st-grey-text);
  text-transform:uppercase;letter-spacing:.04em}
#login-form input{font-family:var(--st-font);font-size:15px;padding:11px 13px;border:1px solid var(--st-grey-line);
  border-radius:9px;background:#fff}
#login-form input:focus{border-color:var(--st-indigo);outline:none}
#login-form .btn{margin-top:6px;justify-content:center;padding:11px 14px;font-size:15px}
#login-form .btn:disabled{opacity:.6;cursor:default}
.login-err{color:var(--st-red);font-size:13px;font-weight:600;min-height:1px}
.login-err:empty{display:none}
.login-note{color:var(--st-grey-text);font-size:12px;line-height:1.5;margin:20px 0 0}

/* ---- user badge ---- */
.badge.user{gap:9px}
.badge.user .uname{font-weight:600;color:var(--st-black)}
.badge.user .urole{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;background:#fff;border:1px solid var(--st-grey-line);color:var(--st-grey-text)}
.badge.user .urole.admin{background:var(--st-indigo);border-color:var(--st-indigo);color:#fff}
.linkbtn{background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:var(--st-font);
  font-size:12px;font-weight:600;color:var(--st-indigo);text-decoration:underline}
.linkbtn:hover{color:var(--st-red)}

/* ---------- devices ---------- */
.subhead{ font-size:15px; margin:26px 0 6px; }
.policy{ border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:6px; padding:10px 14px; margin:10px 0; font-size:13px; }
.policy.warn{ border-left-color:#d08700; background:#fffbf2; }
.policy code{ font-family:ui-monospace,Consolas,monospace; font-size:12px; }
#dev-table td.ctl{ white-space:nowrap; }
#dev-table td.ctl .btn{ padding:3px 8px; font-size:12px; margin-right:4px; }
#dev-table .dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:0; }
#dev-table .dot.live{ background:#17a34a; }
#dev-table .dot.silent{ background:#d0021b; }
.tile .v.small{ font-size:19px; }

/* ---------- retention settings ---------- */
.retform{ display:flex; flex-direction:column; gap:14px; max-width:720px; margin:12px 0 18px; }
.retform label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; }
.retform label .sub{ font-weight:400; font-size:12px; color:var(--muted); }
.retform select{ max-width:320px; padding:6px 8px; font:inherit; border:1px solid var(--line); border-radius:6px; }
.retform label.check{ flex-direction:row; align-items:center; gap:8px; font-weight:400; }
.retform .retactions{ display:flex; align-items:center; gap:12px; }
.cbulk{ display:inline-flex; gap:6px; margin-left:8px; }
.cbulk .btn{ padding:3px 9px; font-size:12px; }
#mapping td .btn.ghost{ padding:4px 9px; font-size:12px; white-space:nowrap; }

/* ---------- language ---------- */
.lang-select{ font-family:var(--st-font); font-size:12.5px; font-weight:600; padding:4px 8px; border-radius:999px;
  border:1px solid var(--st-grey-line); background:var(--st-grey-soft); color:var(--st-black); cursor:pointer; }
.lang-select:focus{ outline:none; border-color:var(--st-indigo); }
.login-lang{ margin-top:18px; display:flex; justify-content:flex-end; }

/* ---------- natural frequencies & vibration events ---------- */
.axis-tag{ display:inline-block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:999px; background:#efeaff; color:var(--st-indigo); margin-left:6px; vertical-align:1px; }
#m-freq td.dim,#m-vib td.dim{ color:var(--st-grey-text); }
#m-vib tr.vrow,#vib-table tr.vrow{ cursor:pointer; }
#m-vib td .btn.ghost,#vib-table td .btn.ghost{ padding:3px 9px; font-size:12px; white-space:nowrap; }
#m-trend{ width:100%; display:block; background:#fff; border:1px solid var(--st-grey-line); border-radius:10px; }
#vib-chart{ width:100%; height:180px; display:block; }
.retform input[type=number]{ max-width:200px; padding:6px 8px; font:inherit; border:1px solid var(--st-grey-line); border-radius:6px; }
.retform input[type=number]:focus{ outline:none; border-color:var(--st-indigo); }
.vib-axis{ font-weight:600; }
.vib-axis.x{ color:var(--st-indigo); } .vib-axis.y{ color:var(--st-red); } .vib-axis.z{ color:var(--st-grey-text); }