:root{--bg:#0b1220;--card:#0f1724;--muted:rgba(255,255,255,0.6);--accent:#4ea8ff;--accent-strong:#1fb6ff;--badge-bg:rgba(79,195,140,0.12);--badge-color:#46d6a6}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#e6eef6;background:linear-gradient(180deg,#071021 0%, #0b1220 100%);} 
.container{max-width:1100px;margin:36px auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:18px}
.title{font-size:1.4rem;font-weight:700}
.subtitle{color:var(--muted);font-size:0.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.016),transparent);border:1px solid rgba(255,255,255,0.03);padding:16px 18px;border-radius:14px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;display:flex;align-items:center;gap:14px}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(2,6,23,0.65)}
.card .name{font-weight:800;font-size:1.02rem}
.card .meta{color:var(--muted);font-size:0.94rem;margin-left:10px}
.badge{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--badge-bg);color:var(--badge-color);font-weight:700;font-size:0.85rem;border:1px solid rgba(70,214,166,0.08)}
.link{color:inherit;text-decoration:none}
.link:visited{color:inherit}
.link:active .card{transform:none}
/* Button-like customer name */
.customer-btn{background:transparent;border:none;padding:0;margin:0;color:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.customer-btn:focus{outline:2px solid rgba(27,106,153,0.28);outline-offset:3px;border-radius:6px}
.footer{margin-top:18px;color:var(--muted);font-size:0.9rem}
@media(max-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

/* shared detail / customer detail styles */
:root{--panel:#0f1724;--muted-2:rgba(255,255,255,0.04);--accent-2:#ff6b81;--ok:#46d6a6;--card-border: rgba(255,255,255,0.03)}
.layout{display:grid;grid-template-columns:280px 1fr;gap:20px;min-height:100vh;padding:18px}
.sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:14px;padding:16px;border:1px solid var(--muted-2);width:280px}
.sidebar .brand{padding:6px 4px;margin-bottom:8px}
.search input{width:100%;padding:10px;border-radius:8px;border:1px solid var(--muted-2);background:transparent;color:inherit}
.customer-label{font-size:0.9rem;color:var(--muted);margin-bottom:8px}
.host-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.host-pill{padding:10px 12px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--muted);display:flex;align-items:center;gap:10px;cursor:pointer}
.host-pill .dot{width:10px;height:10px;border-radius:10px;display:inline-block;margin-right:8px}
.host-pill.active{background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);border-left:4px solid var(--accent-strong);color:#fff}
.main{padding:6px;min-width:0}
html,body{overflow-x:hidden;max-width:100%}
.brand h1{font-weight:800;font-size:1.1rem;margin:0}
.header .title{font-size:1.6rem;font-weight:800}
.header .subtitle{color:var(--muted);font-size:0.95rem}
.metrics-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.metric-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:12px;padding:18px;border:1px solid var(--card-border);position:relative;min-height:110px;box-shadow:0 6px 18px rgba(2,6,23,0.45)}
.metric-card .label{color:var(--muted);font-size:0.85rem;margin-bottom:10px}
.metric-card .big{font-size:1.6rem;font-weight:800;margin-bottom:8px}
.metric-card .pct{position:absolute;top:12px;right:14px;background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px;font-weight:800;color:var(--ok);font-size:0.9rem}
.bar{height:10px;border-radius:8px;background:var(--muted-2);overflow:hidden}
.bar > .fill{height:100%;background:linear-gradient(90deg,var(--accent-strong),var(--accent));border-radius:8px}
.detail-table{width:100%;border-collapse:collapse;background:transparent;border-radius:12px;overflow:hidden}
.detail-table thead tr{background:rgba(255,255,255,0.02)}
.detail-table th,.detail-table td{padding:12px 14px;border-bottom:1px solid var(--muted-2);text-align:left}
.detail-table th{color:var(--muted);font-weight:600;font-size:0.9rem}
.detail-table tr:last-child td{border-bottom:none}
.detail-table{table-layout:fixed}
.detail-table th,.detail-table td{word-break:break-word;overflow-wrap:break-word}
.items-table{table-layout:fixed;border-collapse:collapse}
.items-table td, .items-table th{white-space:normal;word-break:normal;overflow-wrap:anywhere}
.items-table td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.items-table{table-layout:fixed !important;border-collapse:collapse;width:100%}
.items-table col.col-key{width:220px}
.items-table col.col-name{width:240px}
.items-table col.col-value{width:auto}
.items-table th,.items-table td{padding:4px 8px !important;text-align:left}
.items-table td, .items-table th{white-space:normal !important;word-break:normal !important;overflow-wrap:anywhere !important}
.items-table td:first-child{white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}


.refresh-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none}
.refresh-btn:hover{background:rgba(255,255,255,0.02)}
.detail-table{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));box-shadow:0 6px 18px rgba(2,6,23,0.6);border-radius:10px;padding:8px}
.detail-table th, .detail-table td{border-bottom:1px solid rgba(255,255,255,0.03)}
.host-pill .dot{box-shadow:0 0 0 3px rgba(0,0,0,0.15)}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{order:2}}

.error-box{background:#3b1a1a;padding:12px;border-radius:8px;margin-bottom:14px;color:#f8d7da}

/* small utility classes to replace inline styles */
.muted{color:var(--muted)}
.small{font-size:0.95rem}
.hosts-preview{display:none;width:100%;margin-top:8px}

.dot.critical{background:var(--accent)}
.dot.ok{background:var(--ok)}
.brand-title{font-weight:800;font-size:1.1rem}
.brand-sub{font-size:0.9rem}
.host-name{font-weight:700}

summary::marker{color:var(--accent-strong)}
summary:hover{color:#fff}