/* Agent OS admin design system.
 *
 * Loaded before each page's own <style>. Provides the shared design tokens,
 * the topbar chrome and the common navigation menu, so pages stop duplicating
 * the palette and topbar rules and keep only their page-specific styles.
 *
 * Contract for page authors:
 *   - link this file, then leave the palette/topbar to it;
 *   - put an empty `<nav id="admin-nav" class="admin-nav">` in `#topbar`;
 *   - keep page-specific controls (`#refresh-btn`, `#help-btn`, ...) in place.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

:root{
  --bg:#0a0a0f;
  --surface:#111118;
  --surface2:#18181f;
  --border:#252530;
  --text:#d4d4d8;
  --text2:#909098;
  --accent:#7c3aed;
  --accent2:#a78bfa;
  --green:#34d399;
  --red:#f87171;
  --yellow:#fbbf24;
  --blue:#60a5fa;
  --orange:#fb923c;
  --radius:8px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono","Fira Code","Cascadia Code",Consolas,monospace;
  --z-topbar:60;
}

/* Light theme: `<html data-theme="light">` (toggled by /ui/nav.js). */
[data-theme="light"]{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --surface2:#eceef2;
  --border:#d7dbe2;
  --text:#1f2328;
  --text2:#5b6472;
  --accent:#7c3aed;
  --accent2:#6d28d9;
  --green:#0f9d6b;
  --red:#d64545;
  --yellow:#b7791f;
  --blue:#2563eb;
  --orange:#d97706;
}

html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);transition:background .15s,color .15s}

/* ── Top bar ── */
#topbar{
  display:flex;align-items:center;gap:12px;
  padding:8px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  position:relative;z-index:var(--z-topbar);
}
#topbar .logo{font-weight:700;font-size:15px;color:var(--accent2);letter-spacing:-0.5px;white-space:nowrap}
#topbar .crumb{font-size:13px;color:var(--text2);white-space:nowrap}
#topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
#topbar .dot.dead{background:var(--red)}
#topbar #stats{font-size:12px;color:var(--text2);margin-left:auto}
#topbar a{color:var(--text2);font-size:12px;text-decoration:none}
#topbar a:hover{color:var(--accent2)}
#topbar button{
  background:none;border:none;color:var(--accent2);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 8px;border-radius:6px;
}
#topbar button:hover{background:var(--surface2)}
#topbar button#help-btn{
  border:1px solid var(--border);border-radius:50%;width:24px;height:24px;
  font-size:13px;padding:0;color:var(--text2);flex-shrink:0;
}
#topbar button#help-btn:hover{color:var(--accent2);border-color:var(--accent2)}
#topbar .admin-spacer{margin-left:auto}

/* ── Navigation menu (rendered by /ui/nav.js) ── */
.admin-nav{display:flex;align-items:center;gap:2px;min-width:0;flex-shrink:1}
#topbar .admin-nav a,
#topbar .admin-nav .admin-nav-trigger{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;
  color:var(--text2);font-family:inherit;font-size:12px;font-weight:400;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:none;border:none;border-radius:6px;
}
#topbar .admin-nav a:hover,
#topbar .admin-nav .admin-nav-trigger:hover{color:var(--accent2);background:var(--surface2)}
#topbar .admin-nav a.active,
#topbar .admin-nav .admin-nav-trigger.active{color:var(--accent2);font-weight:600;background:var(--surface2)}

.admin-nav-menu{position:relative}
#topbar .admin-nav-menu>.admin-nav-trigger::after{content:"\25BE";font-size:9px;margin-left:5px;opacity:.7}
#topbar .admin-nav-menu.open>.admin-nav-trigger{color:var(--accent2);background:var(--surface2)}
.admin-nav-panel{
  position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.5);padding:6px;z-index:var(--z-topbar);
  display:none;flex-direction:column;gap:1px;
}
.admin-nav-menu.open>.admin-nav-panel{display:flex}
#topbar .admin-nav-panel a{display:block;height:auto;padding:7px 10px;border-radius:6px;font-size:12px;font-weight:400}
#topbar .admin-nav-panel a.active{color:var(--accent2);font-weight:600;background:var(--surface2)}

@media (max-width:720px){
  #topbar{gap:8px;padding:8px 10px}
  #topbar .crumb{display:none}
}