/* LumenOS light theme, copied from the ERP (Organoterra/frappe: "navy and cream, Geist, Lemma tokens"):
   cream page, white cards on a 1px navy ring, navy primary, slate neutrals, outlined secondary buttons,
   bordered inputs (radius 10), cards radius 14, Geist, tight heading letter-spacing. Light only. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --navy:#001634; --cream:#faf8f5; --cream-surface:#f3f0eb; --white:#ffffff;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8;
  --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1e293b; --gray-900:#001634;
  --bg:var(--cream); --card:var(--white); --text:var(--gray-800); --heading:var(--gray-900); --muted:var(--gray-500);
  --border:var(--gray-200); --primary:var(--navy);
  --ring:0 0 0 1px rgba(0,22,52,.10); --ring-hover:0 0 0 1px rgba(0,22,52,.25);
  --focus:0 0 0 3px rgba(0,22,52,.18); --band:rgba(241,245,249,.6);
  --bg-green:#e7f8f0; --on-green:#527971; --bg-yellow:#fff2d0; --on-yellow:#b98401; --bg-red:#f9e7eb; --on-red:#be123c;
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:14px;
  --tracking:-0.03em;
}
* { box-sizing:border-box; }
::selection { background:rgba(0,22,52,.14); }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 "Geist","Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:1040px; margin:0 auto; padding:32px 20px 72px; }

.top { display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding:0 20px; min-height:52px; background:var(--cream); border-bottom:1px solid var(--border); }
.top nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.top nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:var(--r); font-weight:500; }
.top nav a:hover { background:var(--gray-100); color:var(--heading); }
.brand { font-weight:600; color:var(--heading); text-decoration:none; letter-spacing:var(--tracking); font-size:15px; }
.brand span { color:var(--muted); font-weight:500; }
a { color:var(--navy); text-underline-offset:2px; text-decoration-color:var(--gray-300); }
h1 { margin:0 0 20px; font-size:20px; font-weight:600; letter-spacing:var(--tracking); color:var(--heading); }
h2 { margin:32px 0 10px; font-size:16px; font-weight:600; letter-spacing:var(--tracking); color:var(--heading); }

.card { background:var(--card); box-shadow:var(--ring); border-radius:var(--r-xl); padding:20px 24px; margin:12px 0; }
.narrow { max-width:420px; margin:72px auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.grid .card { margin:0; } .grid h2 { margin-top:0; font-size:12px; color:var(--muted); font-weight:500; }
.big { font-size:28px; font-weight:600; margin:4px 0 8px; color:var(--heading); letter-spacing:var(--tracking); }

label { display:block; margin:12px 0; font-weight:500; color:var(--heading); font-size:13px; }
input, select { display:block; width:100%; height:32px; margin-top:5px; padding:0 10px; background:var(--white); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); font:inherit; outline:0; box-shadow:none; }
input:focus, select:focus { border-color:var(--navy); box-shadow:var(--focus); }
input::placeholder { color:var(--gray-400); }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:2px 0; } form.inline input { width:auto; margin:0; }
fieldset { border:1px solid var(--border); border-radius:var(--r-xl); margin:0 0 16px; padding:6px 16px 12px; } legend { padding:0 6px; color:var(--muted); font-size:12px; font-weight:500; }
small { display:block; color:var(--muted); font-weight:400; margin-top:3px; }

/* primary = navy; secondary actions are outline buttons (height 32, radius 10, medium weight) */
button, .button { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border:1px solid transparent; border-radius:var(--r-lg); background:var(--navy); color:#fff; font:inherit; font-weight:500; cursor:pointer; text-decoration:none; box-shadow:none; }
button:hover, .button:hover { background:color-mix(in srgb, var(--navy) 85%, transparent); }
button:focus-visible, .button:focus-visible { box-shadow:var(--focus); outline:0; }
button.secondary { background:var(--white); color:var(--text); border-color:var(--border); }
button.secondary:hover { background:var(--gray-100); }
button.danger { background:var(--white); color:var(--on-red); border-color:var(--border); }
button.danger:hover { background:var(--bg-red); }
button.link { height:auto; background:none; border:0; color:var(--muted); padding:0; font-weight:400; text-decoration:underline; }
button.link:hover { background:none; color:var(--heading); }
.top form.inline { margin-left:auto; }

table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); box-shadow:var(--ring); border-radius:var(--r-xl); overflow:hidden; }
th, td { text-align:left; padding:10px 16px; border-bottom:1px solid var(--border); vertical-align:top; word-break:break-word; }
tr:last-child td { border-bottom:0; }
th { background:var(--band); color:var(--muted); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
tbody tr:hover td { background:var(--gray-50); }

.badge { display:inline-block; height:20px; line-height:16px; padding:2px 8px; border-radius:var(--r); font-size:12px; font-weight:500; background:var(--gray-100); color:var(--gray-600); }
.badge.succeeded { background:var(--bg-green); color:var(--on-green); } .badge.failed { background:var(--bg-red); color:var(--on-red); }
.badge.running { background:var(--bg-yellow); color:var(--on-yellow); }
.health.up { color:var(--on-green); } .health.down { color:var(--on-red); }
.alert { padding:10px 14px; border-radius:var(--r-lg); margin:12px 0; background:var(--card); box-shadow:var(--ring); }
.alert.error { background:var(--bg-red); color:var(--on-red); box-shadow:none; }
.alert.ok { background:var(--bg-green); color:var(--on-green); box-shadow:none; }
.warn { color:var(--on-red); }
pre, code { font-family:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; }
pre { background:var(--cream-surface); border-radius:var(--r-lg); padding:12px 14px; overflow:auto; white-space:pre-wrap; }
.log { min-height:200px; max-height:480px; } .secret { font-size:14px; user-select:all; } .key { user-select:all; }
.hidden { display:none; } .kv dt { font-weight:500; color:var(--muted); margin-top:10px; font-size:12px; } .kv dd { margin:2px 0 0; }
.qr { display:block; margin:12px 0; background:#fff; padding:8px; border-radius:var(--r-lg); box-shadow:var(--ring); }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
@media (max-width:600px) { table { font-size:12.5px; } .top { padding:8px 14px; } }

.wide { max-width:560px; }
.copyable dd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.copyable code { background:var(--cream-surface); padding:3px 8px; border-radius:var(--r); word-break:break-all; }
button.small { height:24px; padding:0 10px; font-size:12px; }
.row2 { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
tr.clickable { cursor:pointer; }
.muted { color:var(--muted); font-size:13px; }
