/* pixid-ui: shared console layout. Tokens and tab styling match ekg-local-admin
   (src/ui/layout.js) so every pixid console reads as one system.
   --bg is the page, --surface is what sits on it. Never swap them. */

:root { --bg:#f7f8fa; --fg:#12151b; --muted:#5b6472; --surface:#fff; --panel:#f0f2f6; --border:#e2e6ec; --accent:#2563eb; --accent-fg:#fff; --danger:#c0304a; --ok:#1a7f52; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --nav-w:9.5rem; }
[data-theme=dark] { --bg:#0d0f12; --fg:#e6e9ef; --muted:#8a93a3; --surface:#151820; --panel:#11141b; --border:#252a35; --accent:#5edfff; --accent-fg:#0d0f12; --danger:#ff4d6d; --ok:#5edfa0; }

* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--fg); font:400 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:var(--accent); }
code { font-family:var(--mono); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.skip { position:absolute; left:-999px; top:.5rem; z-index:100; background:var(--surface); padding:.5rem .8rem; border:1px solid var(--border); border-radius:8px; }
.skip:focus { left:.5rem; }

/* Header: brand left, account menu then theme switcher right. */
.app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem; border-bottom:1px solid var(--border); background:var(--surface); }
.app-header .spacer { flex:1; }
.brand { display:flex; align-items:center; gap:.5rem; color:var(--fg); text-decoration:none; font-weight:700; letter-spacing:-.01em; }
.brand img { width:1.5rem; height:1.5rem; }
.mark-dark { display:none; }
[data-theme=dark] .mark-light { display:none; }
[data-theme=dark] .mark-dark { display:inline; }
.app-header .nav-toggle { display:none; }

/* Body: fixed-width sidebar + content. */
.app-body { display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:calc(100vh - 3.3rem); }
.app-nav { background:var(--surface); border-right:1px solid var(--border); padding:1rem .75rem; }
.app-nav ul { list-style:none; margin:0; padding:0; }
.app-nav li + li { margin-top:.15rem; }
.app-nav a, .app-nav .group { display:flex; align-items:center; gap:.5rem; width:100%; min-height:2.25rem; padding:.4rem .7rem; border-radius:8px; color:var(--fg); text-decoration:none; font:inherit; font-size:.92rem; background:transparent; border:0; border-left:3px solid transparent; text-align:left; cursor:pointer; }
.app-nav a:hover, .app-nav .group:hover { background:var(--panel); }
.app-nav a[aria-current=page], .app-nav .group.current { background:var(--panel); border-left-color:var(--accent); font-weight:700; }
.app-nav .group .chev { margin-left:auto; color:var(--muted); }
.app-nav .group[aria-expanded=true] { background:var(--panel); }

/* Fly-out: opens to the right of the sidebar. The ::before strip bridges the
   gap so the pointer can travel from the button to the panel without closing it. */
.app-nav .has-flyout { position:relative; }
.app-nav .flyout { position:absolute; z-index:30; top:0; left:calc(100% + .75rem); min-width:11rem; padding:.35rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.app-nav .flyout::before { content:''; position:absolute; top:0; bottom:0; left:-.8rem; width:.8rem; }
.app-nav .flyout[hidden] { display:none; }

main { padding:1.5rem 1.5rem 3rem; max-width:64rem; width:100%; min-width:0; }
.page-head { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-head h1 { font-size:1.35rem; margin:0; letter-spacing:-.01em; }
.page-head p { margin:0; color:var(--muted); flex-basis:100%; }
h2 { font-size:1rem; margin:0 0 .75rem; }

/* Content blocks */
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.25rem; margin-bottom:1rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:1rem; margin-bottom:1rem; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem 1.25rem; }
.stat .label { color:var(--muted); font-size:.8rem; }
.stat .value { font-size:1.6rem; font-weight:700; }
.bar { display:flex; align-items:end; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
.bar .spacer { flex:1; }

/* Forms */
label { font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem; }
input, select { font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--muted); border-radius:8px; padding:.5rem .6rem; width:100%; }
.row { margin-bottom:1rem; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.desc { color:var(--muted); font-size:.82rem; margin-top:.25rem; }
label.check { display:flex; align-items:center; gap:.5rem; font-size:.92rem; color:var(--fg); margin-bottom:.6rem; }
label.check input { width:1.1rem; height:1.1rem; }

/* Buttons */
button { cursor:pointer; font:inherit; color:var(--fg); }
.btn { background:var(--accent); color:var(--accent-fg); border:0; border-radius:8px; padding:.55rem 1rem; font-weight:600; text-decoration:none; display:inline-block; min-height:2.25rem; }
.btn.secondary { background:transparent; color:var(--fg); border:1px solid var(--border); }
.btn.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
.btn.small { padding:.3rem .6rem; font-size:.82rem; font-weight:500; min-height:1.75rem; }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.1rem; }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--border); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
tbody tr:last-child td { border-bottom:0; }
.tag { display:inline-block; font-size:.72rem; padding:.1rem .45rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.tag.ok { color:var(--ok); border-color:var(--ok); }
.tag.danger { color:var(--danger); border-color:var(--danger); }

/* Folder tabs. Never a coloured underline. */
[role=tablist] { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:-1px; flex-wrap:wrap; }
[role=tab] { background:transparent; border:1px solid transparent; border-bottom:0; border-radius:10px 10px 0 0; padding:.5rem .95rem; font-size:.9rem; font-weight:600; color:var(--muted); position:relative; }
[role=tab]:hover { color:var(--fg); }
[role=tab][aria-selected=true] { color:var(--fg); background:var(--surface); border-color:var(--border); }
[role=tab][aria-selected=true]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--surface); }
[role=tabpanel] { background:var(--surface); border:1px solid var(--border); border-radius:0 14px 14px 14px; padding:1.35rem; }

/* Narrow screens: sidebar folds behind a Menu button in the header. */
@media (max-width: 48rem) {
  .app-body { grid-template-columns:1fr; }
  .app-nav { display:none; border-right:0; border-bottom:1px solid var(--border); }
  .app-nav.open { display:block; }
  .app-header .nav-toggle { display:inline-flex; }
  .app-nav .flyout { position:static; margin:.15rem 0 .3rem .5rem; box-shadow:none; }
  .two { grid-template-columns:1fr; }
  main { padding:1.25rem 1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}