body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.container{padding:16px}
.topbar{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 14px;background:#111;color:#fff;z-index:5}
.brand{font-weight:700;letter-spacing:.2px}
.search{display:flex;gap:8px;align-items:center;flex:1;min-width:220px}
.search input{width:100%;max-width:520px;padding:8px 10px;border-radius:10px;border:1px solid #333;background:#0e0e0e;color:#fff}
.search button{padding:8px 12px;border-radius:10px;border:1px solid #333;background:#1d1d1d;color:#fff}
.topbar nav a{color:#fff;text-decoration:none;margin:0 8px}
.toggles{display:flex;gap:10px;align-items:center}
.toggles button{padding:7px 10px;border-radius:10px;border:1px solid #333;background:#1d1d1d;color:#fff}
.footer{margin-top:20px;}

.row{display:flex;gap:12px;align-items:center}
.between{justify-content:space-between}
.actions{display:flex;gap:10px;flex-wrap:wrap}

h1{margin:10px 0 14px;font-size:22px}
.card{background:#151515;border:1px solid #2a2a2a;border-radius:14px;padding:14px;margin:12px 0;color:#e6e6e6}
.subtle{color:#aaa;font-size:12px;margin-top:4px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.right{text-align:right}
.empty{margin-top:18px;color:#aaa}

.flashes{margin:10px 0 14px}
.flash{padding:10px 12px;border-radius:12px;margin:8px 0;border:1px solid #2a2a2a}
.flash.ok{background:#0f2a17;color:#cfe}
.flash.err{background:#2a1010;color:#ffd4d4}
.flash.warn{background:#2a2410;color:#fff0c2}

.btn{display:inline-block;padding:8px 12px;border-radius:12px;border:1px solid #333;background:#1d1d1d;color:#fff;text-decoration:none;cursor:pointer}
.btn.primary{background:#0b2a5a;border-color:#214d9a}
.btn.danger{background:#3a1414;border-color:#6a2a2a}
.btn.small{padding:6px 10px;border-radius:10px;font-size:13px}

.table{width:100%;border-collapse:collapse;background:#151515;color:#e6e6e6;border:1px solid #2a2a2a;border-radius:14px;overflow:hidden}
.table th,.table td{border-bottom:1px solid #2a2a2a;padding:12px 10px;vertical-align:top;line-height:1.25}
.table thead th{position:sticky;top: calc(var(--topbar-h, 54px) + 8px);background:#121212;z-index:3;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#bbb}
.apex-row td{background:#101010;color:#fff}
.details-row td{background:#0f0f0f}
.details{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#ddd}
.hidden{display:none}

.legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:#bbb;margin:10px 0 12px;font-size:13px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid #444;margin-right:6px;vertical-align:middle}
.dot-blank{background:transparent}
.dot-green{background:#2ecc71;border-color:#2ecc71}
.dot-red{background:#ff4d4d;border-color:#ff4d4d}
.dot-yellow{background:#f1c40f;border-color:#f1c40f}
.dot-orange{background:#ff8c1a;border-color:#ff8c1a}

.form label{display:block;font-size:12px;color:#bbb;margin:8px 0 6px}
.form input,.form textarea{width:100%;padding:9px 10px;border-radius:12px;border:1px solid #333;background:#0e0e0e;color:#fff;box-sizing:border-box}
.form textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.checkbox{display:flex;gap:10px;align-items:center;color:#ddd}
.ok{color:#86efac}
.err{color:#fca5a5}
.warn{color:#fde68a;margin-top:6px}

.theme-light .topbar{background:#f5f5f5;color:#111}
.theme-light .topbar nav a{color:#111}
.theme-light .search input{background:#fff;color:#111;border-color:#ddd}
.theme-light .search button,.theme-light .toggles button,.theme-light .btn{background:#fff;color:#111;border-color:#ddd}
.theme-light .table{background:#fff;color:#111;border-color:#ddd}
.theme-light .table th,.theme-light .table td{border-bottom:1px solid #eee}
.theme-light .table thead th{background:#fafafa;color:#555}
.theme-light .card{background:#fff;color:#111;border-color:#ddd}
.theme-light .form input,.theme-light .form textarea{background:#fff;color:#111;border-color:#ddd}

.mask .mono, .mask td.mono {filter: blur(4px)}


/* FIX: prevent first row from sitting under the header row */
table tbody::before {
  content: "";
  display: block;
  height: 60px;
}


/* Icon inside +Add Host button */
.btn-icon-img{width:18px;height:18px;vertical-align:middle;margin-right:8px;filter:brightness(1.2)}

/* Make hostname clickable for edit (mobile-friendly) */
.hostlink{color:inherit;text-decoration:none}
.hostlink:hover{text-decoration:underline}


/* v3.1 - hosts header logo + inline actions */
.add-host-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.add-host-logo-link{display:inline-flex;align-items:center}
.add-host-logo{width:48px;height:48px;display:block}
form.inline{display:inline;margin:0}
.footer{margin-top:20px;}
.footer-right{display:flex;gap:8px;align-items:center;opacity:0.9}
.footer-right .sep{opacity:0.6}


.footer-center{width:100%; text-align:center; opacity:.75; font-size:12px; padding:10px 0;}