@import url('../vendor/fonts/outfit.css');
:root{--bg:#ECEFE6;--paper:#fff;--ink:#14212B;--muted:#6E7A84;--line:#E2E6DA;--green:#7DC242;--g2:#5FA82A;--deep:#2F6B16;--blue:#29A8E0;--b2:#0E6BA8;--navy:#0B2433;--amber:#F4A21B;--red:#E2493B;--violet:#7C5CD6;
  --sel:#0B2433;--r:14px}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Outfit,system-ui,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(#d9ddd0 1px,transparent 1px);background-size:18px 18px;font-size:14px}
button{font:inherit;cursor:pointer}
.bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;padding:10px 18px;box-shadow:0 4px 20px rgba(11,36,51,.25)}
.brand{display:flex;align-items:center;gap:12px}
.logo{background:#fff;border-radius:10px;padding:4px 8px;display:flex}.logo img{height:32px}
.bar h1{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.bar p{margin:0;font-size:.8rem;color:#9FB6C3}
.ctrls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:flex;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.seg button{border:0;background:none;color:#cfe0e8;padding:6px 10px;border-radius:8px;font-weight:600;font-size:.82rem}
.seg button.on{background:var(--green);color:#fff}
.measure button.on{background:var(--blue)}
.range{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px 6px;color:#9FB6C3}
.range input{background:transparent;border:0;color:#fff;font:inherit;font-size:.82rem;color-scheme:dark;width:128px}
.ib{border:0;background:rgba(255,255,255,.1);color:#fff;padding:7px 12px;border-radius:10px;font-weight:600;font-size:.82rem;text-decoration:none;white-space:nowrap}
.ib:hover{background:rgba(255,255,255,.18)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 18px 0;min-height:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 6px 4px 12px;font-size:.78rem;font-weight:600;animation:pop .2s}
.chip b{color:#B8E05A;font-weight:700}
.chip button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:50%;width:20px;height:20px;line-height:1;padding:0}
.chip.clear{background:transparent;color:var(--red);border:1.5px solid var(--red);padding:3px 12px}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;padding:12px 18px 18px}
/* slicers */
.slicers{background:var(--paper);border-radius:var(--r);padding:12px;align-self:start;position:sticky;top:72px;max-height:calc(100vh - 90px);overflow:auto;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.sl{margin-bottom:14px}
.sl h3{margin:0 0 6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.sl h3 a{color:var(--b2);cursor:pointer;letter-spacing:0;text-transform:none;font-weight:600}
.sl .opts{display:flex;flex-wrap:wrap;gap:5px}
.sl .opts button{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:4px 9px;font-size:.8rem;font-weight:600;color:var(--ink)}
.sl .opts button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sl .opts.cyl button{display:flex;flex-direction:column;align-items:center;padding:4px 6px;min-width:50px}.sl .opts.cyl img{height:34px}
.sl input.search{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:.82rem;margin-bottom:6px}
.sl .list{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.sl .list label{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:.8rem;cursor:pointer;border-bottom:1px solid #F3F4EF}
.sl .list label:hover{background:#F6F8F2}.sl .list label small{margin-left:auto;color:var(--muted)}
/* canvas */
.canvas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-content:start}
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--paper);border-radius:var(--r);padding:12px 14px 8px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.kpi .l{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .v{font-size:1.9rem;font-weight:800;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums}.kpi .v small{font-size:.5em;color:var(--muted);margin-left:3px}
.kpi .d{font-size:.78rem;font-weight:700}.kpi .d.up{color:var(--g2)}.kpi .d.dn{color:var(--red)}.kpi .d span{color:var(--muted);font-weight:500}
.kpi svg{display:block;width:100%;height:34px;margin-top:4px}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--green))}
.tile{background:var(--paper);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;min-width:0;position:relative}
.tile>header{display:flex;align-items:baseline;gap:8px;padding:10px 14px 0}
.tile h2{margin:0;font-size:.95rem;font-weight:700}
.tile .hint{font-size:.72rem;color:var(--muted);margin-left:auto}
.tile .fx{border:0;background:none;color:var(--muted);font-size:1rem;padding:0 2px}
.tile .body{padding:8px 14px 12px;flex:1;min-height:0;position:relative}
.t-time{grid-column:span 8;height:330px}.t-cyl{grid-column:span 4;height:330px}
.t-dealer{grid-column:span 5;height:380px}.t-map{grid-column:span 4;height:380px}.t-mix{grid-column:span 3;height:380px}
.t-status{grid-column:span 4;height:300px}.t-heat{grid-column:span 4;height:300px}.t-plant{grid-column:span 4;height:300px}
.t-matrix{grid-column:1/-1}
#vMap{position:absolute;inset:8px 14px 12px;border-radius:10px;overflow:hidden}
.tile.focus{position:fixed;inset:70px 24px 24px;z-index:80;height:auto!important;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.scrim{position:fixed;inset:0;background:rgba(11,36,51,.45);z-index:79}
svg text{font-family:Outfit,sans-serif}
.sv .bar,.sv .seg-r,.sv .cell,.sv .hit{cursor:pointer;transition:opacity .25s}
.dim{opacity:.22}
.tip{position:fixed;pointer-events:none;background:var(--navy);color:#fff;padding:7px 10px;border-radius:8px;font-size:.78rem;z-index:100;display:none;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:280px;line-height:1.35}
.tip b{color:#B8E05A}
/* cylinder mix */
.cyl-row{display:flex;justify-content:space-around;align-items:flex-end;height:100%;gap:6px}
.cy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:pointer;transition:opacity .25s;min-width:0}
.cy .fig{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.cy .fig>div{position:relative;height:var(--h)}
.cy img{height:100%;display:block}
.cy .gh{filter:grayscale(1) brightness(1.15) opacity(.28)}
.cy .fl{position:absolute;inset:0;clip-path:inset(var(--cut) 0 0 0);transition:clip-path .9s cubic-bezier(.2,.8,.2,1)}
.cy .pc{font-size:1.25rem;font-weight:800;margin-top:4px}.cy .nm{font-size:.75rem;color:var(--muted);text-align:center;line-height:1.25}
.cy.sel .pc{color:var(--b2)}
/* matrix */
.mx{width:100%;border-collapse:collapse;font-size:.82rem}
.mx th{position:sticky;top:0;background:#fff;text-align:right;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--line);cursor:pointer;white-space:nowrap}
.mx th:first-child,.mx td:first-child{text-align:left}
.mx th.s{color:var(--ink)} .mx th.s::after{content:" ▾"}
.mx td{padding:6px 8px;border-bottom:1px solid #F1F2EC;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx tr{cursor:pointer}.mx tr:hover td{background:#F7F9F3}.mx tr.sel td{background:#E9F4FB}
.mx td.hm{background:rgba(125,194,66,var(--a))}
.mx .db{position:relative}.mx .db i{position:absolute;left:0;top:4px;bottom:4px;background:linear-gradient(90deg,rgba(41,168,224,.25),rgba(41,168,224,.08));border-radius:4px;width:var(--w)}
.mx .db span{position:relative}
.mx tfoot td{font-weight:800;border-top:2px solid var(--line)}
.mxwrap{max-height:420px;overflow:auto}
.foot{padding:0 18px 18px;color:var(--muted);font-size:.75rem}
.loading{position:fixed;inset:0;background:rgba(236,239,230,.7);display:grid;place-items:center;z-index:90;font-weight:700;color:var(--navy)}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin-top:2px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.empty{display:grid;place-items:center;height:100%;color:var(--muted)}
.leaflet-container{font-family:Outfit,sans-serif;background:#DCE6EA}
@media (max-width:1200px){.t-time,.t-cyl,.t-dealer,.t-map,.t-mix,.t-status,.t-heat,.t-plant{grid-column:span 6}}
@media (max-width:860px){.wrap{grid-template-columns:1fr}.slicers{position:static;max-height:none}.t-time,.t-cyl,.t-dealer,.t-map,.t-mix,.t-status,.t-heat,.t-plant{grid-column:1/-1}}