/* ═══ LISA Control Plane Admin — "paper ledger" ════════════════════════════════════════════════
   Brand restyle (mcp-docs/control-plane-admin.md "Styling", mockup
   mcp-docs/mockups/controlplane-restyle-c-paper-ledger.html): no dark chrome anywhere — a light
   paper header with the tilted green LISA stamp over a 3px green rule, dense hairline "ledger"
   tables with mono slugs, ruled sections instead of cards, flags as filled/hollow dots.

   Light only in this pass (decision 1): everything goes through the variables below so a dark
   theme can be layered later, but no prefers-color-scheme rules ship now.

   Standing brand rule: ORANGE MARKS EXACTLY ONE PRIMARY ACTION PER SCREEN (+ Add site, Save,
   Preview). Everything else is a quiet bordered button or a link; destructive actions are red
   (--bad-fg), never orange. */
:root {
    --paper: #FBFAF6;
    --panel: #FFFFFF;
    --ink: #1F2822;
    --muted: #5C685F;
    --line: #E3E1D6;
    --hairline: #ECEAE0;
    --green: #1B5E3B;
    --green-deep: #14492E;
    --green-wash: #EAF3EC;
    --orange: #D2561B;
    --orange-hover: #B94A15;
    --code-bg: #F4F3EB;
    --ok-fg: #14492E;
    --bad-fg: #9A3412;
    --bad-wash: #FBE3DB;
    --warn-bg: #FBF0D9;
    --warn-fg: #8A5A0B;
    --warn-rule: #D9A62E;
    --row-hover: #F5F4EC;
    --off: #B4BAB0;
    --font-sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Source Code Pro', ui-monospace, Consolas, monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.55;
}

a {
    color: var(--green);
}

code,
pre {
    font-family: var(--font-mono);
}

code {
    font-size: 0.92em;
}

h1 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 0.6rem;
}

h1 code {
    color: var(--green-deep);
    font-size: 0.85em;
}

h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.8rem 0 0.6rem;
}

h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.2rem 0 0.4rem;
}

/* One focus treatment everywhere — orange, offset, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* ── header: light paper, stamped wordmark, green rule ─────────────────────────────────────── */
.topbar {
    background: var(--paper);
    border-bottom: 3px solid var(--green);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar .bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
}

.topbar .brand {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.topbar .brand .stamp {
    display: inline-block;
    border: 1.5px solid var(--green);
    color: var(--green);
    border-radius: 2px;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(-1.2deg);
}

.topbar .brand .sub {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
}

.topnav {
    display: flex;
    gap: 1.4rem;
}

.topnav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.93rem;
    margin-right: 0;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.1rem;
}

.topnav a:hover {
    color: var(--ink);
}

/* Active section, set from ViewData["NavSection"] in each page. */
.topnav a.active {
    color: var(--green-deep);
    border-bottom-color: var(--orange);
}

.signout {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.85rem;
}

.signout .who {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* Sign out must stay a POST form; the button wears a link's clothes. */
.signout button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

.signout button:hover {
    color: var(--ink);
}

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

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.85rem;
}

/* ── page head, crumbs, tabs ───────────────────────────────────────────────────────────────── */
.pagehead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0 0 0.4rem;
}

.pagehead h1 {
    margin: 0;
}

.pagehead .count {
    color: var(--muted);
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

.pagehead .btn-primary,
.pagehead .btn {
    margin-left: auto;
}

.lede {
    color: var(--muted);
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
}

.crumbs {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}

.crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.crumbs a:hover {
    text-decoration: underline;
}

.sitehead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0;
}

.sitehead h1 {
    margin: 0;
}

.sitehead .health {
    font-size: 0.88rem;
}

/* The per-site tab bar (_SiteTabs.cshtml) — replaces the old dot-separated link line. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    border-bottom: 1px solid var(--line);
    margin: 1rem 0 1.6rem;
}

.tabs a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid transparent;
}

.tabs a:hover {
    color: var(--ink);
}

.tabs a.active {
    color: var(--green-deep);
    border-bottom-color: var(--orange);
}

.tabs a.danger {
    color: var(--bad-fg);
    margin-left: auto;
}

/* ── ruled sections instead of cards ───────────────────────────────────────────────────────── */
section.ruled {
    margin: 0 0 2rem;
}

section.ruled > h2 {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green-deep);
    font-weight: 600;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.3rem;
    margin: 0 0 0.7rem;
}

section.ruled > h2 .small,
section.ruled > h2 a {
    float: right;
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
    align-items: start;
}

@media (max-width: 800px) {
    .twocol {
        grid-template-columns: 1fr;
    }
}

.foot {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.6rem 0 0;
}

ul.plain {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

ul.plain li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--hairline);
}

/* ── ledger tables: hairlines, no card chrome ──────────────────────────────────────────────── */
table.grid {
    border-collapse: collapse;
    width: 100%;
    background: transparent;
}

table.grid th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 600;
    padding: 0.45rem 0.65rem 0.45rem 0;
    border-bottom: 2px solid var(--ink);
}

table.grid td {
    text-align: left;
    padding: 0.52rem 0.65rem 0.52rem 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: baseline;
}

table.grid tbody tr:hover td {
    background: var(--row-hover);
}

/* The identity column: a site slug reads as a key, so it is set in mono. */
table.grid a.slug {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--green-deep);
}

table.grid a.slug:hover {
    text-decoration: underline;
}

.rowactions a {
    color: var(--muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.rowactions a:hover {
    color: var(--green);
    text-decoration: underline;
}

/* An inactive site's whole row recedes — the one state where nothing else on the row matters. */
tr.site-inactive td {
    opacity: 0.55;
}

dl.detail {
    display: grid;
    grid-template-columns: 11.5rem 1fr;
    row-gap: 0;
    margin: 0;
}

dl.detail dt {
    color: var(--muted);
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--hairline);
}

dl.detail dd {
    margin: 0;
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--hairline);
}

@media (max-width: 640px) {
    dl.detail {
        grid-template-columns: 8.5rem 1fr;
    }
}

/* ── ledger marks: flags and health ────────────────────────────────────────────────────────── */
/* Enablement at a glance (mcp-docs/site-flags-controlplane.md): a filled dot per bit that is on,
   hollow when off. Same class name as before — only the treatment changed — so every page's
   title= tooltip (which carries the semantics) is untouched. */
.flagchip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.8rem;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.flagchip::before {
    content: "\25CF";
    color: var(--green);
    font-size: 0.7rem;
}

.flagchip.off {
    color: var(--off);
}

.flagchip.off::before {
    content: "\25CB";
    color: var(--off);
}

/* Health is a colored text mark, not a pill: four states, all still distinguishable in print. */
.health {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.health.ok {
    color: var(--ok-fg);
}

.health.bad {
    color: var(--bad-fg);
}

.health.unknown {
    color: var(--muted);
    font-weight: 600;
}

/* Warning-level probe mark: the site still serves, a feature degrades (VIEW DATABASE STATE /
   VIEW DEFINITION — controlplane-db-diagnostics.md). Amber, deliberately not red. */
.health.warn {
    color: var(--warn-fg);
}

/* Used as a block on the Permissions page, where it is a sentence, not a mark. */
p.health,
pre.health {
    white-space: pre-wrap;
    word-break: break-word;
}

pre.health.bad {
    background: var(--bad-wash);
    border-left: 3px solid var(--bad-fg);
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
}

/* ── banners ───────────────────────────────────────────────────────────────────────────────── */
.banner-warn {
    background: var(--warn-bg);
    border-left: 4px solid var(--warn-rule);
    color: var(--warn-fg);
    padding: 0.7rem 1rem;
    margin: 1.2rem 0;
    font-size: 0.93rem;
}

.banner-warn ol {
    margin: 0.35rem 0 0.1rem 1.2rem;
}

.banner-warn code {
    background: rgba(255, 255, 255, 0.55);
    padding: 0 0.15rem;
}

/* Transient action-outcome note (the Flush caches button on site Details). */
.banner-info {
    background: rgba(20, 73, 46, 0.07);
    border-left: 4px solid var(--ok-fg);
    color: var(--ok-fg);
    padding: 0.7rem 1rem;
    margin: 1.2rem 0;
    font-size: 0.93rem;
}

.banner-bad {
    background: var(--bad-wash);
    border-left: 4px solid var(--bad-fg);
    color: var(--bad-fg);
    padding: 0.7rem 1rem;
    margin: 1.2rem 0;
    font-size: 0.93rem;
}

/* The confirm-page callout on the two Delete screens. */
.warning {
    background: var(--warn-bg);
    border-left: 4px solid var(--warn-rule);
    color: var(--warn-fg);
    padding: 0.7rem 1rem;
    margin: 1.2rem 0;
}

.warn {
    color: var(--bad-fg);
    font-size: 0.85em;
    margin-right: 0.5rem;
}

/* ── buttons ───────────────────────────────────────────────────────────────────────────────── */
/* The default: a quiet bordered button. Every form's secondary action lands here without markup. */
button,
.btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.btn:hover {
    border-color: var(--muted);
}

button:disabled {
    color: var(--off);
    cursor: default;
    border-color: var(--hairline);
}

button:disabled:hover {
    border-color: var(--hairline);
}

/* Exactly one of these per screen. */
.btn-primary,
button.btn-primary {
    background: var(--orange);
    color: #fff;
    border: 1px solid var(--orange);
    font-weight: 700;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: var(--orange-hover);
    border-color: var(--orange-hover);
}

button.danger {
    background: var(--bad-fg);
    color: #fff;
    border-color: var(--bad-fg);
}

button.danger:hover {
    background: #7F2A0E;
    border-color: #7F2A0E;
}

/* A button that is really a link (row actions, inline forms). */
button.linky {
    background: none;
    border: none;
    padding: 0;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--muted);
    text-decoration: underline;
}

button.linky:hover {
    color: var(--green);
    border: none;
}

/* ── forms ─────────────────────────────────────────────────────────────────────────────────── */
.field {
    margin: 0.75rem 0;
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.field input[type="text"],
.field input[type="email"],
.field input:not([type]),
.field select,
.field textarea {
    width: 24rem;
    max-width: 100%;
    padding: 0.4rem 0.5rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.field textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.field input[type="checkbox"] {
    width: auto;
    accent-color: var(--green);
}

.field label input[type="checkbox"] {
    margin-right: 0.35rem;
}

/* A checkbox label is a sentence, not a heading — it must not inherit the block-label rule. */
.field label > input[type="checkbox"] + * {
    font-weight: 400;
}

.field span,
.validation {
    color: var(--bad-fg);
}

.validation ul {
    margin: 0.4rem 0;
    padding-left: 1.2rem;
}

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

select,
input,
textarea {
    font-family: inherit;
}

fieldset {
    margin: 1.4rem 0;
    padding: 0.6rem 0.9rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 4px;
}

fieldset > legend {
    padding: 0 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green-deep);
    font-weight: 600;
}

fieldset > legend .muted {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

/* Per-user schema access checkbox list on the Users page (user-schema-access.md §4). */
.schemachecks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    margin: 0.25rem 0;
}

.schemachecks .chk {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9em;
    font-weight: 400;
    white-space: nowrap;
}

/* ---- Per-site policy bits (mcp-docs/site-flags-controlplane.md) --------------------------------
   The Create/Edit "Site flags" panel. The write bits are indented under their surface bit because
   the server evaluates them that way (effective = parent && child), so the nesting IS the rule. */
fieldset.site-flags .field {
    margin: 0.7rem 0;
}

fieldset.site-flags .field.nested {
    margin-left: 1.6rem;
}

fieldset.site-flags label {
    font-weight: 600;
}

fieldset.site-flags .field > p.muted {
    margin: 0.15rem 0 0 1.6rem;
    font-size: 0.85rem;
}

/* Active is the dangerous one: unchecking it takes the whole site off the air. */
fieldset.site-flags .field.danger {
    padding: 0.4rem 0.6rem;
    background: var(--bad-wash);
    border-left: 3px solid var(--bad-fg);
    border-radius: 3px;
}

/* ── the expandable full failure chain (controlplane-db-diagnostics.md fix 4) ───────────────── */
details.errchain {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
}

details.errchain > summary {
    cursor: pointer;
    color: var(--bad-fg);
}

details.errchain pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.7rem;
    background: var(--bad-wash);
    border-left: 3px solid var(--bad-fg);
    border-radius: 0 4px 4px 0;
    color: var(--bad-fg);
}

/* ── log tables (logins) ───────────────────────────────────────────── */
.logfilters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.logfilters label {
    font-weight: 600;
    font-size: 0.9rem;
}

.logfilters select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font: inherit;
    font-size: 0.9rem;
}

table.logs {
    font-size: 0.85rem;
}

table.logs td {
    vertical-align: top;
}

/* Metadata row keeps the columns tight; the query rides on its own full-width row below. */
table.logs tr.meta td {
    border-bottom: none;
}

table.logs tr.query td {
    padding-top: 0;
    padding-bottom: 0.6rem;
}

table.logs .qline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

table.logs code.q,
table.logs pre.q {
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
    flex: 1;
    margin: 0;
    color: var(--ink);
}

/* Copy-query button: quiet by default, reveals its hover/active state inline with the query. */
table.logs button.copy-q {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
}

table.logs button.copy-q:hover {
    color: var(--ink);
    border-color: var(--muted);
}

table.logs button.copy-q.copied {
    color: var(--ok-fg);
    border-color: var(--green);
    background: var(--green-wash);
}

/* Source pill */
table.logs .source {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

table.logs .src-web {
    background: var(--green-wash);
    color: var(--green-deep);
}

table.logs .src-mcp {
    background: #EEEAF6;
    color: #5B3F91;
}

table.logs .src-unknown {
    color: var(--muted);
}

/* Outcome badge */
table.logs .badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

table.logs .badge.ok {
    background: var(--green-wash);
    color: var(--ok-fg);
}

table.logs .badge.fail {
    background: var(--bad-fg);
    color: #fff;
}

/* Failed queries: prominent red wash + left accent across both rows. Recolored to the token set,
   deliberately no quieter — a failure has to be findable by eye down a long day's log. */
table.logs tr.row-fail td,
table.grid tr.row-fail td {
    background: var(--bad-wash);
}

table.logs tr.row-fail:hover td,
table.grid tr.row-fail:hover td {
    background: #F7D8CD;
}

table.logs tr.row-fail.meta td:first-child,
table.grid tr.row-fail td:first-child {
    box-shadow: inset 4px 0 0 var(--bad-fg);
}

table.logs tr.row-fail.query td {
    box-shadow: inset 4px 0 0 var(--bad-fg);
}

table.logs tr.row-fail.query code.q,
table.logs tr.row-fail.query pre.q {
    color: var(--bad-fg);
}

/* ── one-off panels ────────────────────────────────────────────────────────────────────────── */
/* The minted-token panel (McpTokens): shown once, so it gets the loudest quiet treatment here. */
.minted {
    border-left: 4px solid var(--warn-rule);
    background: var(--warn-bg);
    padding: 0.8rem 1rem;
    margin: 1.2rem 0;
}

.minted h2 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}

.minted .token {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.minted .cmd {
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--code-bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
}

/* The read-only script body on Scripts/Delete. */
pre.q {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--code-bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
}

/* The one unauthenticated page: the stamp and the Google button, centered on paper. */
.signin {
    max-width: 26rem;
    margin: 4rem auto;
    text-align: center;
}

.signin .stamp {
    display: inline-block;
    border: 1.5px solid var(--green);
    color: var(--green);
    border-radius: 2px;
    padding: 0.15rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: rotate(-1.2deg);
}

.signin h1 {
    margin: 1rem 0 0.4rem;
}

.signin p {
    color: var(--muted);
}

.signin form {
    margin-top: 1.4rem;
}