:root {
    --ni2-ink: #17212b;
    --ni2-muted: #66727f;
    --ni2-border: #d9e0e7;
    --ni2-panel: #ffffff;
    --ni2-blue: #1f5f92;
    --ni2-green: #198754;
    --ni2-red: #b53a45;
    --ni2-amber: #b66b00;
}

html, body {
    min-height: 100%;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ni2-ink);
    background: #f3f6f8;
}

a { color: var(--ni2-blue); }

.btn-primary {
    background-color: var(--ni2-blue);
    border-color: var(--ni2-blue);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .18rem rgba(31, 95, 146, .25);
}

.content {
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

h1, h2, h3 { letter-spacing: -.025em; }
h1:focus { outline: none; }
h1 { margin: 0; font-weight: 720; font-size: clamp(1.85rem, 3vw, 2.6rem); }
h2 { font-size: 1.1rem; margin: 0; font-weight: 700; }
h3 { font-size: 1rem; margin: 0; font-weight: 700; }

.eyebrow {
    color: var(--ni2-blue);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: .35rem;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
}

.page-header.compact { align-items: center; }
.page-header p { color: var(--ni2-muted); margin: .5rem 0 0; }
.back-link { display: inline-block; margin-bottom: 1rem; text-decoration: none; font-size: .9rem; }

.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #152433;
    color: white;
    border-radius: .75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(17, 35, 51, .12);
}

.summary-strip > div { padding: 1.15rem 1.35rem; border-right: 1px solid rgba(255,255,255,.1); }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip strong { display: block; font-size: 1.65rem; line-height: 1; }
.summary-strip span { display: block; color: #b9c6d1; font-size: .8rem; margin-top: .35rem; }

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
}

.server-card, .panel, .user-card {
    background: var(--ni2-panel);
    border: 1px solid var(--ni2-border);
    border-radius: .7rem;
    box-shadow: 0 3px 10px rgba(25, 42, 56, .035);
}

.server-card { padding: 1.15rem; min-width: 0; }
.server-card-header, .panel-heading, .user-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.server-card-header h2 { margin-top: .15rem; font-size: 1.2rem; }
.server-card-header h2 a { color: var(--ni2-ink); text-decoration: none; }
.server-card-header h2 a:hover { color: var(--ni2-blue); }
.server-id { color: var(--ni2-muted); font-size: .74rem; }

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}
.status-running { color: #12683d; background: #dff5e9; }
.status-transition { color: #855100; background: #fff0ce; }
.status-failed { color: #922e37; background: #f9dfe2; }
.status-stopped { color: #59636d; background: #e9edf0; }

.health-row { display: flex; gap: .75rem; margin: 1rem 0; flex-wrap: wrap; }
.health-indicator { display: inline-flex; align-items: center; font-size: .78rem; color: var(--ni2-muted); }
.health-indicator::before {
    content: "";
    width: .48rem;
    height: .48rem;
    margin-right: .38rem;
    border-radius: 50%;
    background: #8d98a2;
    box-shadow: 0 0 0 3px rgba(141,152,162,.12);
}
.health-indicator.online::before { background: #20a562; box-shadow: 0 0 0 3px rgba(32,165,98,.13); }
.health-indicator.offline::before { background: #c6535c; box-shadow: 0 0 0 3px rgba(198,83,92,.12); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid #edf0f3;
    border-left: 1px solid #edf0f3;
}
.metric-grid > div { padding: .68rem; min-width: 0; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; }
.metric-grid dt, .detail-list dt { color: var(--ni2-muted); font-size: .7rem; font-weight: 600; }
.metric-grid dd { margin: .15rem 0 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-meta { color: var(--ni2-muted); font-size: .72rem; margin: .75rem 0; }

.command-bar { display: flex; align-items: center; gap: .45rem; margin-top: .75rem; }
.command-bar.wrap { flex-wrap: wrap; }

.panel { padding: 1.25rem; min-width: 0; }
.panel-heading { align-items: center; padding-bottom: 1rem; }
.panel-note { color: var(--ni2-muted); font-size: .75rem; }
.muted-copy { color: var(--ni2-muted); margin: .2rem 0; }

.detail-status-grid, .two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.detail-list { margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .48rem 0; border-bottom: 1px solid #edf0f3; }
.detail-list dd { margin: 0; font-size: .85rem; text-align: right; }

.inline-form { display: flex; align-items: center; gap: .65rem; }
.inline-form .form-control { min-width: 0; }
.inline-form .btn { flex: 0 0 auto; }

.manager-table { margin-bottom: 0; font-size: .83rem; }
.manager-table thead th { color: var(--ni2-muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; border-bottom-width: 1px; }
.manager-table td { border-color: #edf0f3; }
.manager-table code { color: #425365; font-size: .74rem; }
.action-cell { white-space: nowrap; }
.action-cell .btn + .btn { margin-left: .35rem; }
.host-instances-row > td { padding: 0 .75rem .9rem 2rem; background: #f8fafb; }
.host-instance-list { display: grid; gap: .4rem; }
.host-instance-list > div {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) 90px minmax(125px, 1fr) 170px auto;
    align-items: center;
    gap: .7rem;
    padding: .48rem .6rem;
    background: white;
    border: 1px solid #e6ebef;
    border-radius: .35rem;
}
.host-instance-list a { color: var(--ni2-ink); text-decoration: none; }
.host-instance-list small { display: block; color: var(--ni2-muted); }
.instance-last-seen { color: var(--ni2-muted); font-size: .72rem; }

.log-view {
    max-height: 560px;
    overflow: auto;
    background: #111b24;
    border-radius: .45rem;
    color: #d8e0e6;
    font: .75rem/1.5 Consolas, "Cascadia Mono", monospace;
}
.log-line { display: grid; grid-template-columns: 65px 70px minmax(0, 1fr); gap: .5rem; padding: .3rem .55rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.log-line time { color: #7f929f; }
.log-level { color: #8cb8dc; font-weight: 700; }
.level-error, .level-critical { color: #ff7e87; }
.level-warning, .level-warn { color: #f4bc5d; }

.command-history { display: grid; gap: .6rem; max-height: 560px; overflow: auto; }
.command-history article { padding: .65rem .75rem; border: 1px solid #e6ebef; border-radius: .4rem; }
.command-history article > div { display: flex; justify-content: space-between; gap: 1rem; }
.command-history small { color: var(--ni2-muted); }
.command-history p { margin: .35rem 0 0; font-size: .8rem; }
.command-state { font-size: .69rem; font-weight: 750; }
.state-succeeded { color: var(--ni2-green); }
.state-failed { color: var(--ni2-red); }
.state-running { color: var(--ni2-amber); }
.state-queued { color: var(--ni2-muted); }
.state-expired, .state-result-unknown { color: var(--ni2-red); }

.secret-panel {
    background: #173650;
    color: white;
    padding: 1.3rem;
    border-radius: .7rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 25px rgba(13, 39, 60, .16);
}
.secret-panel .eyebrow { color: #75c8ff; }
.secret-panel h2 { font-size: 1.25rem; }
.secret-panel p { color: #c8d7e3; margin: .4rem 0 .85rem; }
.secret-panel code { color: inherit; }
.secret-value { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.15); padding: .75rem; border-radius: .4rem; margin: .75rem 0; }
.secret-value code { word-break: break-all; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.invite-form { grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto auto; }

.user-list { display: grid; gap: .8rem; }
.user-card { padding: 1rem; }
.user-heading small { color: var(--ni2-muted); }
.user-actions { display: flex; align-items: center; gap: 1rem; }
.admin-access-note { margin: .85rem 0 0; padding: .65rem; color: #195a3b; background: #e7f6ee; border-radius: .35rem; font-size: .82rem; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: .65rem; margin-top: 1rem; }
.permission-grid label { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: .6rem; padding: .5rem; background: #f6f8fa; border-radius: .35rem; font-size: .78rem; }
.permission-grid label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-state {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--ni2-muted);
    border: 1px dashed #cbd4dc;
    border-radius: .7rem;
    background: rgba(255,255,255,.55);
}
.empty-state h2 { color: var(--ni2-ink); margin-bottom: .4rem; }

.auth-card {
    width: min(440px, 100%);
    margin: 4rem auto;
    padding: 2rem;
    background: white;
    border: 1px solid var(--ni2-border);
    border-radius: .8rem;
    box-shadow: 0 16px 45px rgba(26, 45, 61, .12);
}
.auth-card h1 { margin-bottom: .4rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #b4232d; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

@media (max-width: 900px) {
    .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-strip > div:nth-child(2) { border-right: 0; }
    .detail-status-grid, .two-column { grid-template-columns: 1fr; }
    .invite-form { grid-template-columns: 1fr 1fr; }
    .user-heading { flex-direction: column; }
    .host-instance-list > div { grid-template-columns: 1fr 100px; }
}

@media (max-width: 640px) {
    .content { padding-top: 1.25rem; }
    .page-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .summary-strip { grid-template-columns: 1fr 1fr; }
    .server-grid { grid-template-columns: 1fr; }
    .inline-form, .user-actions { align-items: stretch; flex-direction: column; }
    .invite-form, .form-grid { grid-template-columns: 1fr; }
    .permission-grid label { grid-template-columns: 1fr; }
    .log-line { grid-template-columns: 58px 58px minmax(0, 1fr); }
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0,0,0,.18);
    display: none;
    left: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; }