/* XUIcontrol — tema Tabler (Tabler v1.7.3, MIT). Camada-ponte: mapeia as variáveis do painel
   para os tokens Tabler na paleta da marca (navy/preto, azul #1ea7ff/#0a84ff, branco/prata). */
:root,[data-theme=dark]{color-scheme:dark;
 --primary:#0a84ff;--primary-h:#1ea7ff;--success:#2fb344;--info:#1ea7ff;--warning:#f59f00;--danger:#d63939;--orange:#f76707;--cyan:#22d3ee;
 --bg:#060b16;--bg2:#0a1222;--card:#0d1729;--card2:#111e35;--line:rgba(30,167,255,.13);--line2:rgba(30,167,255,.24);
 --tx:#c9d6e8;--hd:#f4f8fd;--mu:#8ea2bd;--mu2:#62758f;
 --side:#050a14;--side-tx:#a9bad1;--side-hd:#5d7190;--side-on:#ffffff;--top:rgba(8,14,28,.92);--inp:#0a1426;--inpb:rgba(30,167,255,.22);--th:#0f1c33;
 --ac:#1ea7ff;--ac2:#0a84ff;--grad:linear-gradient(135deg,#0a84ff,#1ea7ff);--ok:#2fb344;--warn:#f59f00;--hi:#f76707;--bad:#ff5c5c;--r:8px;
 --glow:0 0 0 1px rgba(30,167,255,.18),0 0 18px -4px rgba(30,167,255,.45);
 --sh:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(30,167,255,.06);
 --body-bg:#060b16;--bg-surface:#0d1729;--bg-surface-secondary:#111e35;--border-color:rgba(30,167,255,.13);--body-color:#c9d6e8;--link-color:#1ea7ff;
 --font-sans-serif:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
[data-theme=light]{color-scheme:light;
 --primary:#0a84ff;--primary-h:#066fd1;--info:#0a84ff;--cyan:#0891b2;
 --bg:#f3f6fb;--bg2:#e9eff7;--card:#ffffff;--card2:#f6f9fd;--line:#e1e8f2;--line2:#cfd9e7;
 --tx:#3a4a60;--hd:#0b1426;--mu:#64748b;--mu2:#8a98ab;
 --side:#060b16;--side-tx:#a9bad1;--side-hd:#5d7190;--side-on:#ffffff;--top:rgba(255,255,255,.94);--inp:#ffffff;--inpb:#d3dce8;--th:#f1f5fa;
 --ac:#0a84ff;--ac2:#066fd1;--grad:linear-gradient(135deg,#0a84ff,#1ea7ff);--r:8px;
 --glow:0 0 0 1px rgba(10,132,255,.15);--sh:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.04);
 --body-bg:#f3f6fb;--bg-surface:#fff;--border-color:#e1e8f2;--body-color:#3a4a60}
html,body{background:var(--bg)}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-size:13.5px;letter-spacing:-.003em}
body::before{background:radial-gradient(1100px 600px at 10% -15%,rgba(10,132,255,.14),transparent 60%),radial-gradient(900px 520px at 105% 0%,rgba(30,167,255,.08),transparent 60%)!important}
[data-theme=light] body::before{background:radial-gradient(1000px 500px at 10% -15%,rgba(10,132,255,.07),transparent 60%)!important}
h1,h2,h3,h4,.card h3,header h1{font-family:inherit!important;color:var(--hd);letter-spacing:-.01em}
.card h3{font-size:14px;font-weight:600}
.card h3 .ic,.kcard .kico .ic{color:var(--ac)}
/* sidebar — Tabler navbar-vertical dark */
aside{background:linear-gradient(180deg,#060d1c 0%,#040811 100%)!important;border-right:1px solid rgba(30,167,255,.12)!important;box-shadow:none!important}
.brand{padding:14px 18px!important;justify-content:center!important;border-bottom:1px solid rgba(30,167,255,.10)}
.blogo{height:56px!important;width:auto;filter:drop-shadow(0 0 10px rgba(30,167,255,.35))}
#nav a{color:var(--side-tx)!important;font-weight:500;padding:9px 20px;margin:1px 10px;border-radius:6px;font-size:13px}
#nav a .ic{color:#6f86a6;opacity:1}
#nav a:hover{background:rgba(30,167,255,.08)!important;color:#fff!important}#nav a:hover .ic{color:#1ea7ff}
#nav a.on{background:linear-gradient(90deg,rgba(10,132,255,.22),rgba(30,167,255,.06))!important;color:#fff!important;box-shadow:inset 3px 0 0 #1ea7ff,0 0 16px -6px rgba(30,167,255,.6)!important}
#nav a.on .ic{color:#1ea7ff!important}
#nav .nsec,.nsec{color:var(--side-hd)!important;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;font-weight:600}
.sidefoot{border-top:1px solid rgba(30,167,255,.10)}
.sidefoot,#clock{color:var(--side-tx)}
/* topbar */
header{background:var(--top)!important;backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
#themebtn .ic{width:18px;height:18px}
/* cards — Tabler card */
.card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important}
.card .card,.card.inner{background:var(--card2)!important;box-shadow:none!important}
.kcard{position:relative;overflow:hidden}
.kcard::after{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgba(30,167,255,.65),transparent);pointer-events:none}
[data-theme=light] .kcard::after{opacity:.5}
.kcard .kico{background:rgba(30,167,255,.12)!important;color:#1ea7ff!important;box-shadow:var(--glow)}
.kpi,.kcard b,.kcard .kv{color:var(--hd)}
/* tables — Tabler table */
th{background:var(--th)!important;color:var(--mu)!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.04em!important;border-bottom:1px solid var(--line)!important}
td{border-color:var(--line)!important}
tbody tr:hover{background:rgba(30,167,255,.05)!important}
/* forms */
input,select,textarea{background:var(--inp)!important;border:1px solid var(--inpb)!important;border-radius:6px!important;color:var(--hd)!important}
input:focus,select:focus,textarea:focus{border-color:#1ea7ff!important;box-shadow:0 0 0 .2rem rgba(30,167,255,.25)!important;outline:0}
/* buttons — Tabler btn-primary / ghost */
button{border-radius:6px!important;font-family:inherit!important;font-weight:500}
button:not(.ghost):not(.danger):not(.chip):not([class*=mp]):hover{box-shadow:0 0 14px -2px rgba(30,167,255,.55)}
button.ghost{border:1px solid var(--line2)!important;color:var(--tx)!important}
button.ghost:hover{background:rgba(30,167,255,.10)!important;color:var(--hd)!important;border-color:rgba(30,167,255,.45)!important}
aside button.ghost{color:var(--side-tx)!important}
.tabs{background:var(--card2)!important;border:1px solid var(--line)!important;border-radius:8px!important}
.tabs button.on,.chip.on{background:rgba(10,132,255,.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(30,167,255,.45)}
[data-theme=light] .tabs button.on,[data-theme=light] .chip.on{color:#0a4fa3!important}
.chip{border:1px solid var(--line2)!important;border-radius:999px!important}
.tag,.badge{border-radius:4px;font-weight:600}
a,.lnk{color:#1ea7ff}[data-theme=light] a,[data-theme=light] .lnk{color:#066fd1}
.banner.info{background:rgba(30,167,255,.08)!important;border:1px solid rgba(30,167,255,.25)!important;color:var(--tx)!important}
code,pre.log{background:#071022!important;border:1px solid var(--line)}
[data-theme=light] code,[data-theme=light] pre.log{background:#eef3f9!important}
#bnav{background:rgba(5,10,20,.96)!important;border-top:1px solid rgba(30,167,255,.15)!important}
#bnav a.on,#bnav a.on .ic{color:#1ea7ff!important}
.toast{border:1px solid rgba(30,167,255,.3);box-shadow:var(--glow)}
.modal .card{box-shadow:0 20px 60px rgba(0,0,0,.6),var(--glow)!important}
.leaflet-container,.map{background:#071022}
/* login — Tabler page-center + badge splash */
#login{background:radial-gradient(800px 500px at 50% 0%,rgba(10,132,255,.18),transparent 70%),var(--bg)}
.loginbox{border:1px solid rgba(30,167,255,.22)!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),var(--glow)!important;border-radius:12px!important}
.loginbox::before{content:'Bem-vindo ao XUIcontrol'!important;background:linear-gradient(135deg,rgba(10,132,255,.25),rgba(30,167,255,.08))!important;color:#e8f4ff!important}
[data-theme=light] .loginbox::before{color:#0a4fa3!important}
.llogo{background:transparent!important}
.llogo img{height:112px!important;width:auto;filter:drop-shadow(0 0 18px rgba(30,167,255,.4))}
.plogo img{height:80px!important}
::selection{background:rgba(30,167,255,.35)}
*{scrollbar-color:rgba(30,167,255,.3) transparent}
@media(max-width:860px){.blogo{height:44px!important}.llogo img{height:88px!important}}
.brand{height:auto!important;min-height:84px;background:transparent!important}
@media(max-width:860px){#view>*,#view .card{min-width:0;max-width:100%}.bmd,.cft,#dbm,#edt{max-width:100%;min-width:0;overflow-x:auto}.bmh{flex-wrap:wrap;min-width:0}.bmh>*{min-width:0}}
@media(max-width:860px){.bchips,.bpills{flex-wrap:wrap}.bchip{max-width:100%;white-space:normal;overflow-wrap:anywhere}}
/* dashboard v4: grade responsiva de largura total (16/24) */
#view>.grid.kp,#hosts,.dtop,.dtop>.card,#dmapa,.g2.dash{width:100%;align-self:stretch}
.grid.kp#kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:stretch}
#kpis>.card{height:100%;margin:0;display:flex;flex-direction:column}
#kpis .kbrk{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.45}
#kpis .kbrk>span{overflow:hidden;text-overflow:ellipsis}
#hosts.srvg{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px;align-items:stretch;margin:0}
#hosts>.srvc{height:100%;margin:0}
.srvm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;margin-top:12px}
.srvcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.srvm .row{font-size:14px;padding:2px 0}.srvm .row b{font-size:14px}
.srvm .bar,.srvm .shbar{height:8px;border-radius:4px;margin-top:4px}
.srvoff{grid-column:1/-1;margin:0;padding:10px 16px}
.srvoff>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;cursor:pointer;list-style:none}
.srvoff>summary::-webkit-details-marker{display:none}
.srvoff>summary::after{content:'▸';margin-left:auto;color:var(--mu)}.srvoff[open]>summary::after{content:'▾'}
.srvoffl{display:flex;flex-wrap:wrap;gap:8px}
.srvchip{font-size:12px;border:1px solid var(--bd);border-radius:999px;padding:2px 10px;opacity:.85}
.srvoffb{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.srvoffr{display:grid;grid-template-columns:140px 140px 1fr 140px 140px;gap:12px;font-size:13px;padding:6px 0;border-top:1px solid var(--bd)}
.dtop{display:grid!important;grid-template-columns:minmax(0,1fr);gap:24px;margin:0}
.dtop>.card{margin:0;min-width:0;max-width:none}
#dbm{overflow:visible}
#dbm .btiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
#dbm .btile{padding:14px;font-size:13px}#dbm .bth b{font-size:14px}
@media(max-width:1599px){.grid.kp#kpis{gap:16px}#hosts.srvg{gap:16px}.dtop{gap:16px}}
@media(max-width:1279px){.grid.kp#kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){#hosts.srvg{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.grid.kp#kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.srvoffr{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.srvm{grid-template-columns:minmax(0,1fr)}#dbm .btiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
@media(max-width:480px){.grid.kp#kpis{grid-template-columns:minmax(0,1fr)}}
#hosts>.srvc{container-type:inline-size}
@container (max-width:620px){.srvm{grid-template-columns:minmax(0,1fr);gap:12px}}
#dbm .btiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#kpis .kbrk>span{white-space:nowrap}
@media(max-width:1599px){#kpis .card h3,#kpis .khead{font-size:12px}#kpis .kbrk{font-size:12px}}
#kpis .khead{flex-wrap:nowrap;gap:8px}#kpis .khead h3{min-width:0}
@media(max-width:1599px){#kpis .kico{display:none}#kpis .kbrk>span{white-space:normal}}
@media(max-width:860px){#kpis .kico{display:grid}}