:root {
    --bg: #0f1419;
    --fg: #d8dee9;
    --muted: #6b7785;
    --border: #1f2933;
    --panel: #151a21;
    --accent: #5fb3b3;
    --accent-fg: #0f1419;
    --danger: #d05b65;
    --ok: #88b85a;
    --warn: #d8b56b;
    --row-hover: #1c232c;
    --row-selected: #1a2832;
    --link: #80c2c2;
    --mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}
.topbar .brand {
    font-weight: 700; letter-spacing: 0.04em;
    color: var(--fg);
}
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--fg); text-decoration: none; }
.topbar .who { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); }
.topbar form.inline { display: inline; margin: 0; }
.topbar button.link {
    background: none; border: 0; color: var(--link); cursor: pointer;
    font: inherit; padding: 0;
}
.topbar button.link:hover { text-decoration: underline; }

main { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }

h1 { font-size: 1.2rem; margin: 0 0 1rem; font-weight: 600; }
h2 { font-size: 1rem; margin: 1.25rem 0 0.5rem; font-weight: 600; }
.muted { color: var(--muted); }
.mono, code { font-family: var(--mono); }

input[type="text"], input[type="password"], input[type="search"], select, textarea {
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.4rem 0.55rem;
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
button, .btn {
    background: var(--panel); color: var(--fg);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer; font: inherit;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.danger  { background: var(--danger); color: #fff; border-color: var(--danger); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.selected { background: var(--row-selected); }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
}

.flash { padding: 0.6rem 0.8rem; border-radius: 4px; margin: 0 0 1rem; }
.flash.error { background: rgba(208,91,101,0.12); border: 1px solid var(--danger); color: var(--danger); }
.flash.ok    { background: rgba(136,184,90,0.12); border: 1px solid var(--ok);     color: var(--ok); }

.login-wrap { max-width: 320px; margin: 6rem auto; }
.login-wrap .card { display: grid; gap: 0.75rem; }
.login-wrap label { display: grid; gap: 0.25rem; font-size: 12px; color: var(--muted); }
.login-wrap label input { width: 100%; }

.field { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; max-width: 480px; }
.field label { font-size: 12px; color: var(--muted); }
.row-actions { display: flex; gap: 0.5rem; }

.status-available { color: var(--ok); }
.status-assigned  { color: var(--accent); }
.status-reserved  { color: var(--warn); }

.small { font-size: 12px; }

/* Filter bar */
.filterbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.filterbar label { display: inline-flex; align-items: center; gap: 0.35rem; }
.filterbar select, .filterbar input[type=number] { padding: 0.25rem 0.45rem; }

/* Sortable headers */
th a            { color: var(--muted); text-decoration: none; }
th a:hover      { color: var(--fg); }
th a.active     { color: var(--fg); font-weight: 600; }

/* Highlight matched row (single-IP search) */
tbody tr.highlight {
    background: rgba(95, 179, 179, 0.10);
    box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr.highlight:hover { background: rgba(95, 179, 179, 0.18); }

/* Checkbox column */
th.ck, td.ck { width: 28px; padding-left: 0.5rem; padding-right: 0; }

/* Tree view: bucket headers + child rows */
tr.bucket-header {
    background: var(--panel);
    border-top: 1px solid var(--border);
}
tr.bucket-header td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
tr.bucket-header:hover { background: var(--panel); }
.bucket-toggle {
    background: none; border: 0;
    color: var(--muted);
    cursor: pointer; padding: 0 0.4rem 0 0;
    font: inherit;
    width: 1.5em; text-align: left;
}
.bucket-toggle:hover { color: var(--fg); }
.bucket-cidr {
    background: var(--bg);
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-family: var(--mono);
}
tr.bucket-child[hidden] { display: none; }
tr.bucket-child td.indent { padding-left: 2.6rem; position: relative; }
tr.bucket-child td.indent::before {
    content: "";
    position: absolute;
    left: 1.4rem; top: 0; bottom: 0;
    border-left: 1px solid var(--border);
}

/* Pager */
.pager {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 0.2rem; margin-top: 0.5rem;
}
.pager .pages { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.pager a       { color: var(--link); }

/* Two-column show layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* Tools page: responsive cards grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr; } }

/* JSON pretty-print blocks in audit log */
pre.mono {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

/* Synthesized (no override) IP rows render quieter than override rows */
tr.muted-row td { color: var(--muted); }
tr.muted-row td.mono { color: var(--fg); }

/* Sticky bulk-action bar */
.bulkbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--panel); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    z-index: 10;
}
.bulkbar[hidden] { display: none; }
.bulkbar { flex-wrap: wrap; }
#bulkbar-count { font-weight: 600; }
.bulkbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bulk-panel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    width: 100%;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}
.bulk-panel[hidden] { display: none; }
.bulk-panel label { display: inline-flex; align-items: center; gap: 0.4rem; }
.bulk-panel code { background: var(--bg); padding: 0 0.35rem; border-radius: 3px; }
main { padding-bottom: 12rem; } /* room under sticky bulkbar */