@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0e17; --panel: #0d1321; --border: #0ff3; --cyan: #0ff;
  --cyan-dim: #0ff6; --red: #f44; --green: #0f8; --gray: #555; --text: #c8d6e5;
}
body { font-family: 'JetBrains Mono', monospace; background: var(--bg); color: var(--text); min-height: 100vh; }
input { font-family: inherit; }

/* Header */
.header { display: flex; align-items: center; gap: 16px; padding: 20px 28px; flex-wrap: wrap; }
.header h1 { font-size: 22px; color: #fff; margin-right: auto; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.err { background: var(--red); box-shadow: 0 0 8px var(--red); }
.status-label { font-size: 13px; margin-right: 12px; }
/* global input base */

/* Layout */
/* tenants two-column layout is inline on page-content */
.flex-layout { display: flex; gap: 20px; align-items: flex-start; }
.hosts-panel { width: 330px; flex-shrink: 0; }
.tenants-panel { flex: 1; min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title { font-size: 18px; color: #fff; }

/* Nav Tabs */
.nav-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 16px; background:var(--bg); }
.nav-tab { padding:8px 16px; border:none; background:none; color:var(--gray); cursor:pointer; font-size:13px; border-bottom:2px solid transparent; }
.nav-tab:hover { color:var(--text); }
.nav-tab.active { color:var(--cyan); border-bottom-color:var(--cyan); }

/* Page content */
.page-content { padding:16px 28px; }
.page-content h2 { font-size:18px; margin-bottom:16px; color:var(--text); }
.section-card { border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; background:var(--panel); max-width:1080px; }
.section-card h3 { font-size:14px; color:var(--cyan); margin-bottom:8px; }
/* Compact variant: same visual container as section-card but slimmer padding for inline status/skills strips */
.mini-panel { padding:8px 12px; margin-bottom:12px; max-width:none; }
.config-item { display:flex; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px solid var(--border); }
.config-item:last-child { border-bottom:none; }
.config-name { font-size:13px; font-weight:600; color:var(--text); min-width:160px; }
.config-desc { font-size:12px; color:var(--gray); }
.text-green { color:#4ade80; }
.text-gray { color:var(--gray); }

/* Buttons */
.btn { cursor: pointer; font-family: inherit; font-size: 12px; border-radius: 4px; padding: 6px 16px; transition: .2s; }
.btn-cyan { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); }
.btn-cyan:hover { background: #0ff1; box-shadow: 0 0 12px #0ff3; }
.btn-create { background: var(--cyan); color: var(--bg); border: none; font-weight: 700; }
.btn-create:hover { box-shadow: 0 0 16px #0ff5; }
.btn-outline { background: transparent; border: 1px solid var(--cyan-dim); color: var(--cyan-dim); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px #0ff2; }
.btn-icon { background: none; border: none; color: var(--cyan-dim); cursor: pointer; font-size: 32px; padding: 4px; }
.btn-icon:hover { color: var(--cyan); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-act { background: none; border: none; color: var(--cyan-dim); cursor: pointer; font-size: 16px; padding: 4px; display: inline-flex; align-items: center; }
.btn-act:hover { color: var(--cyan); }
.btn-del { background: none; border: none; color: #f445; cursor: pointer; font-size: 16px; padding: 4px; display: inline-flex; align-items: center; }
.btn-del:hover { color: var(--red); }
.toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: #000; padding: 6px 14px; border-radius: 6px; font-size: 11px; font-weight: 600; z-index: 999; }

/* Host cards */
.host-card {
  border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px;
  margin-bottom: 10px; background: linear-gradient(135deg, #0d1321, #111b2e);
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.host-card:hover { border-color: var(--cyan-dim); }
.host-card.selected { border-color: var(--cyan); box-shadow: 0 0 12px #0ff2; }
.host-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.host-id { font-size: 12px; color: #fff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.badge-active, .badge-running { border: 1px solid var(--green); color: var(--green); }
.badge-inactive { border: 1px solid var(--gray); color: var(--gray); }
.badge-stopped { border: 1px solid var(--red, #f44); color: var(--red, #f44); }
.badge-paused { border: 1px solid var(--yellow, #fa0); color: var(--yellow, #fa0); }
.badge-draining { border: 1px solid var(--gray); color: var(--gray); }
.badge-count { font-size: 9px; padding: 1px 6px; border: 1px solid var(--cyan-dim); color: var(--cyan-dim); font-weight: 400; }
.backup-toggle { color: var(--cyan-dim); transition: transform .15s; font-size: 14px; }
.backup-toggle:hover { color: var(--cyan); }
.backup-toggle.expanded { transform: rotate(90deg); }
.backup-child-row td { background: rgba(0, 255, 255, 0.02); border-bottom-color: #1a2332; font-size: 11px; color: var(--cyan-dim); }
.backup-child-row:last-child td { border-bottom: 1px solid var(--border); }
.act-group { display:flex; gap:2px; align-items:center; flex-wrap:nowrap; }
.host-row { display: flex; align-items: center; font-size: 11px; margin-bottom: 4px; gap: 8px; }
.host-label { width: 62px; color: #6b7a8d; white-space: nowrap; }
.bar-bg { flex: 1; height: 6px; background: #1a2332; border-radius: 3px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.bar-cpu { background: linear-gradient(90deg, #0ff, #06f); }
.bar-cpu-over { background: linear-gradient(90deg, #0ff, #f90); }
.bar-mem { background: linear-gradient(90deg, #0af, #06d); }
.bar-mem-over { background: linear-gradient(90deg, #0af, #f90); }
.bar-physical-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.5); pointer-events: none; }
.overcommit-badge { font-size: 10px; color: #f90; }
.icon { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; }
.s12 { width: 12px; height: 12px; } .s13 { width: 13px; height: 13px; } .s14 { width: 14px; height: 14px; } .s16 { width: 16px; height: 16px; }
.host-val { width: 60px; text-align: right; font-size: 11px; }

/* Tenants table */
.table-wrap { overflow-x: auto; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 8px 10px; color: var(--cyan); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid #1a2332; white-space: nowrap; }
tr:hover td { background: #0ff1; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.health-up { background: var(--green); box-shadow: 0 0 6px var(--green); }
.health-down { background: var(--red); box-shadow: 0 0 6px var(--red); }
.health-unknown { background: var(--gray); }

/* Modal */
.overlay { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 24px; width: 380px; position: relative;
}
.modal h2 { font-size: 18px; color: #fff; margin-bottom: 20px; }
.modal label { display: block; font-size: 12px; margin-bottom: 4px; color: #8899aa; }
.modal label .req { color: var(--red); }
.modal label .opt { color: #556; font-style: italic; }
.modal input {
  width: 100%; background: #0a0e17; border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 14px;
}
.modal input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 8px #0ff2; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.modal .close-btn { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--cyan); font-size: 20px; cursor: pointer; }

.empty { text-align: center; padding: 40px; color: #445; }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 12px; color: #555; font-size: 12px; letter-spacing: 1px; }

/* Settings inputs */
.settings-input { background:var(--panel); border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:4px; font-size:13px; width:100%; }
.settings-input::placeholder { color:#4a5568; }
.settings-input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 8px #0ff2; }
.btn-toggle-pw { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:2px; color:var(--text); }
.btn-toggle-pw:hover { color:var(--cyan); }