:root {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --border: #2a2f3a;
    --text: #e6e8eb;
    --muted: #8b93a1;
    --accent: #5b8dee;
    --danger: #e15c5c;
    --ok: #4caf7d;
    --warn: #d6a24c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topnav a { color: var(--text); text-decoration: none; }
.topnav a:hover { color: var(--accent); }
.topnav .brand { font-weight: 700; color: var(--accent); }
.topnav .spacer { flex: 1; }

.nav-dropdown { position: relative; }
.nav-dropdown summary {
    cursor: pointer;
    color: var(--text);
    list-style: none;
}
.nav-dropdown summary:hover { color: var(--accent); }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] summary::after { content: " ▲"; font-size: 0.7em; }
.nav-dropdown summary::after { content: " ▾"; font-size: 0.7em; }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    z-index: 10;
}
.nav-dropdown-menu a { padding: 0.4rem 0.6rem; border-radius: 6px; }
.nav-dropdown-menu a:hover { background: var(--bg); }

.content { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.login-card { width: 320px; }
.login-card h1 { font-size: 1.1rem; margin-top: 0; }

label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem; }
label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }

input, select, textarea, button {
    font: inherit;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
}

button {
    cursor: pointer;
    background: var(--accent);
    color: white;
    border: none;
    font-weight: 600;
}

button.danger { background: var(--danger); }
button:hover { opacity: 0.9; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .span-2 { grid-column: span 2; }

.bulk-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; min-height: 2rem; }
.bulk-toolbar button { opacity: 0.5; pointer-events: none; }
.bulk-toolbar.has-selection button { opacity: 1; pointer-events: auto; }
.bulk-toolbar .muted { font-size: 0.85rem; }

.table { width: 100%; border-collapse: collapse; }
.table th.select-col, .table td.select-col { width: 2rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.table .empty { text-align: center; color: var(--muted); padding: 1.5rem; }

.actions { display: flex; gap: 0.4rem; }
.actions form { display: inline; }

.inline-form { display: flex; gap: 0.4rem; align-items: center; }

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
}
.copy-btn:hover { color: var(--text); background: var(--surface); opacity: 1; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn .icon-check { display: none; }
.copy-btn.copied .icon-copy { display: none; }
.copy-btn.copied .icon-check { display: inline; color: var(--ok); }

.badge { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; }
.badge-online, .badge-active { background: rgba(76, 175, 125, 0.2); color: var(--ok); }
.badge-offline, .badge-error { background: rgba(225, 92, 92, 0.2); color: var(--danger); }
.badge-unknown, .badge-pending, .badge-none { background: rgba(214, 162, 76, 0.2); color: var(--warn); }
.badge-disabled { background: rgba(139, 147, 161, 0.2); color: var(--muted); }

.error, .error-text { color: var(--danger); font-size: 0.85rem; }
.muted { color: var(--muted); font-size: 0.85rem; }

.log-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 260px;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.stat-grid { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.5rem; }
.stat-value { display: block; font-size: 1.6rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 0.85rem; }