:root { --accent: #d8ef87; --ink: #263a32; --paper: #f5f3ed; --muted: #516258; --line: #dfe3d8; }

html, body { margin: 0; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .86em; padding: 1px 5px; border-radius: 4px; background: rgba(38, 58, 50, .07); }
.muted { color: var(--mud-palette-text-secondary); }

/* Brand */
.brand { font-size: 22px; font-weight: 700; display: flex; align-items: center; letter-spacing: -1px; white-space: nowrap; }
.brand-light { font-weight: 400; opacity: .72; }
.brand-mark { position: relative; font-size: 31px; line-height: 36px; width: 34px; height: 36px; display: inline-block; color: var(--accent); font-weight: 800; margin-right: 7px; }
.brand-mark span { font-size: 20px; position: absolute; right: 3px; top: 8px; }
.dot { color: var(--mud-palette-secondary); }
.eyebrow { display: block; font-size: 11px; letter-spacing: 3px; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 6px 0 10px; }

/* Shell */
.app-bar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.crumb { color: var(--mud-palette-text-secondary); }
.crumb span { opacity: .5; margin: 0 4px; }
.crumb strong { color: var(--mud-palette-text-primary); font-weight: 600; }
.env-chip { letter-spacing: 1.5px; font-size: 10px !important; margin-right: 6px; }
.logout-form { display: inline; margin: 0; }
.side-drawer .drawer-brand { color: #f5f3ed; padding: 28px 24px 34px; }
.side-nav .nav-label { display: block; padding: 18px 24px 6px; letter-spacing: 3px; opacity: .55; font-size: 10px; }
.side-nav .mud-nav-link { padding: 10px 24px; border-radius: 0 24px 24px 0; margin-right: 14px; }
.side-nav .mud-nav-link.active { background: rgba(216, 239, 135, .14); color: var(--accent); font-weight: 600; }
.nav-planned { display: flex; align-items: center; gap: 14px; padding: 9px 24px; opacity: .45; font-size: 14px; }
.nav-planned span { margin-left: auto; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid currentColor; border-radius: 10px; padding: 0 7px; }
.main-content { min-height: 100vh; }

/* Page structure */
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.page-heading h1 { margin: 0 0 10px; }
.back-link { display: inline-block; margin-bottom: 14px; }
.panel { padding: 24px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px !important; height: 100%; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; }
.info-panel ol { padding-left: 18px; line-height: 1.7; margin: 0 0 14px; }

/* Stats */
.stat-card { padding: 22px 24px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px !important; display: flex; flex-direction: column; gap: 4px; }
.stat-top { display: flex; justify-content: space-between; color: var(--mud-palette-text-secondary); font-size: 13px; }
.stat-card strong { font: 400 46px/1.1 Georgia, serif; margin-top: 6px; }
.stat-card small { color: var(--mud-palette-text-secondary); }

/* Lists */
.solution-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; }
.solution-row small { display: block; color: var(--mud-palette-text-secondary); }
.solution-id { font-family: Georgia, serif; font-size: 17px; color: var(--mud-palette-secondary); }
.clickable-row { cursor: pointer; }
.search-field { max-width: 420px; }
.status-chip { font-weight: 600; }
.empty-state { text-align: center; padding: 34px 12px; color: var(--mud-palette-text-secondary); }
.empty-state span { font-size: 26px; color: var(--mud-palette-secondary); }
.audit-timeline { padding-top: 0; }

/* Detail */
.status-editor { display: flex; align-items: center; gap: 12px; min-width: 300px; }
.facts { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; margin: 0; }
.facts dt { color: var(--mud-palette-text-secondary); }
.facts dd { margin: 0; }
.facts .notes { white-space: pre-line; }
.module-row, .history-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.module-row > div, .history-row { flex: 1; }
.module-row small, .history-row small { display: block; color: var(--mud-palette-text-secondary); }
.history-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; color: var(--mud-palette-text-secondary); }
.sync-current { color: var(--mud-palette-success); }
.sync-behind { color: var(--mud-palette-warning); }
.module-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--mud-palette-secondary); }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 80% 20%, #e4e8da 0, var(--paper) 55%); color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; padding: 16px; }
.login-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 42px; }
.login-card .brand { margin-bottom: 40px; }
.login-card .brand-mark { color: #8fae3c; }
.login-card h1 { font: 400 40px/1.1 Georgia, serif; margin: 0 0 12px; }
.login-card .dot { color: #8fae3c; }
.login-card p { color: var(--muted); line-height: 1.6; }
.login-card form { display: grid; gap: 16px; margin-top: 28px; }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.login-card input { font: inherit; padding: 12px 14px; border: 1px solid #c9d1c6; border-radius: 8px; }
.login-card input:focus-visible, .login-card button:focus-visible { outline: 2px solid #8fae3c; outline-offset: 2px; }
.login-card button { font: inherit; font-weight: 600; background: var(--ink); color: #fff; border: 0; border-radius: 8px; padding: 14px; cursor: pointer; }
.login-card .error { color: #a23a2a; margin: 0; }
.login-card .note { font-size: 13px; margin-top: 26px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: #fff3cd; z-index: 2000; }

@media (max-width: 650px) {
  .facts { grid-template-columns: 1fr; gap: 4px; }
  .facts dd { margin-bottom: 10px; }
  .status-editor { min-width: 0; width: 100%; }
  .login-card { padding: 28px; }
}

/* MudBlazor colours the active link with the primary colour, which disappears on the dark drawer. */
.side-drawer .side-nav .mud-nav-link.active, .side-drawer .side-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--accent) !important; }
.side-drawer .side-nav .mud-nav-link { color: var(--mud-palette-drawer-text); }

/* Two-factor set-up (D6) */
.totp-qr { display: grid; place-items: center; margin: 18px 0 6px; }
.totp-qr svg { width: 220px; height: 220px; }
.totp-key { font-size: 13px; letter-spacing: .08em; word-break: break-all; }

/* Support login (CD-028) */
.support-panel { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.support-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 360px; justify-content: flex-end; }
.support-form input { flex: 1 1 220px; max-width: 360px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: transparent; color: inherit; }
.support-button { padding: 10px 18px; border: 0; border-radius: 8px; background: #263a32; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }