/* ---- Theme tokens ---- */
/* Dark is the default; [data-theme=light] overrides. Accent stays constant across themes. */
:root, :root[data-theme="dark"] {
  --bg:#0f1115; --card:#171a21; --fg:#e6e8ec; --muted:#9aa3b2; --line:#262b35;
  --topbar:#12151c; --sidebar:#12151c; --input:#0e1016; --hover:#1d2230; --chip:#222836;
  --ok:#2ecc71; --warn:#f1c40f; --err:#e74c3c; --accent:#4aa3ff; --accent-fg:#04203f;
  --shadow:0 1px 0 rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --bg:#f4f6fa; --card:#ffffff; --fg:#1b2330; --muted:#5b6572; --line:#e2e6ee;
  --topbar:#ffffff; --sidebar:#ffffff; --input:#f7f9fc; --hover:#eef2f8; --chip:#eef1f6;
  --ok:#1c9e57; --warn:#b8860b; --err:#d93838; --accent:#2b7fd6; --accent-fg:#ffffff;
  --shadow:0 1px 2px rgba(20,30,50,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }

/* ---- Top bar ---- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:58px; padding:0 20px; background:var(--topbar); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand-icon { display:block; border-radius:8px; }
.brand-name { font-size:18px; font-weight:400; letter-spacing:-.2px; }
.brand-name b { font-weight:700; }
.brand-sub { color:var(--muted); font-size:13px; padding-left:10px; margin-left:4px;
  border-left:1px solid var(--line); }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.token-reveal { margin:8px 0 0; }
.token-reveal:empty { display:none; }
.token-reveal code { background:var(--input); color:var(--ok); padding:4px 8px; border-radius:6px;
  word-break:break-all; }
.whoami { font-size:13px; margin-right:6px; white-space:nowrap; }
.whoami:empty { display:none; }
@media (max-width:720px) { .whoami { display:none; } }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--fg);
  cursor:pointer; text-decoration:none; }
.icon-btn:hover { background:var(--hover); }
/* Show the icon that represents the action available in the current theme. */
.i-sun { display:none; } .i-moon { display:block; }
:root[data-theme="light"] .i-sun { display:block; }
:root[data-theme="light"] .i-moon { display:none; }

/* ---- Layout: sidebar + content ---- */
.layout { display:grid; grid-template-columns:220px 1fr; align-items:start;
  min-height:calc(100vh - 58px); }
.sidebar { position:sticky; top:58px; align-self:start; height:calc(100vh - 58px);
  background:var(--sidebar); border-right:1px solid var(--line); padding:16px 12px;
  display:flex; flex-direction:column; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--muted); text-decoration:none; font-weight:500; }
.nav-item:hover { background:var(--hover); color:var(--fg); }
.nav-item.active { background:var(--hover); color:var(--fg); }
.nav-item.active svg { color:var(--accent); opacity:1; }
.nav-item svg { flex:0 0 auto; opacity:.9; }
.sidebar-foot { margin-top:auto; padding:10px; font-size:12px; line-height:1.5; }
.content { padding:22px 26px; max-width:1100px; }

/* ---- Cards / typography ---- */
.muted { color:var(--muted); font-weight:400; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin:0 0 16px; box-shadow:var(--shadow); }
.sub { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:0 0 8px; }

/* ---- Controls ---- */
input, select, textarea { background:var(--input); border:1px solid var(--line); color:var(--fg);
  padding:8px 10px; border-radius:6px; margin:4px 8px 4px 0; min-width:240px;
  font:inherit; box-sizing:border-box; }
select { min-width:180px; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
button { background:var(--accent); color:var(--accent-fg); border:0; padding:8px 14px;
  border-radius:6px; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.08); }
.btn-danger { background:transparent; color:var(--err); border:1px solid var(--line); font-weight:500; }
.btn-danger:hover { background:rgba(231,76,60,.12); filter:none; }
a { color:var(--accent); }

/* ---- Tables ---- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; margin:8px 0 16px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; }
th { color:var(--muted); font-weight:600; }
.row { display:flex; justify-content:space-between; align-items:center; }
.badge { padding:2px 8px; border-radius:999px; font-size:12px; background:var(--chip); }
.badge.ok { background:rgba(46,204,113,.16); color:var(--ok); }
.badge.warn { background:rgba(241,196,15,.16); color:var(--warn); }
.badge.err { background:rgba(231,76,60,.16); color:var(--err); }
.secret { display:flex; align-items:center; gap:10px; padding:6px 0; }
.secret code { background:var(--input); padding:4px 8px; border-radius:6px; min-width:120px;
  display:inline-block; color:var(--ok); }

/* ---- Guided profile editor ---- */
#profileEditor h4 { margin:18px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
#profileEditor h4:first-of-type { margin-top:4px; }
#profileEditor input[type="checkbox"] { min-width:0; width:16px; height:16px; margin:0; vertical-align:middle; accent-color:var(--accent); cursor:pointer; }
#profileEditor label { display:inline-flex; align-items:center; gap:8px; margin:5px 18px 5px 0; }
#profileEditor input[type="text"], #profileEditor input[type="password"], #profileEditor input:not([type]) { min-width:0; width:300px; max-width:100%; display:block; }
#profileEditor select { min-width:170px; }
#profileEditor .fieldrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:4px 0; }
#pfApps { margin:8px 0; }
.pf-appgroup { margin:8px 0; }
.pf-appgroup-h { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:2px; }
.pf-appgroup-apps { display:flex; flex-wrap:wrap; gap:2px 8px; }
.pf-appgroup-apps label { min-width:210px; margin:2px 0; }

/* ---- Analytics overview ---- */
.an-stats { display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 12px; }
.an-stat { flex:1 1 130px; background:var(--input); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
.an-stat .n { font-size:22px; font-weight:700; }
.an-stat .l { color:var(--muted); font-size:12px; margin-top:2px; }
.an-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--line); margin:4px 0 2px; }
.an-bar > span { display:block; height:100%; }
.an-spark { display:flex; align-items:flex-end; gap:3px; height:56px; margin-top:6px; }
.an-spark .b { flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px; opacity:.85; }
.an-spark .b:hover { opacity:1; }

/* ---- Status line ---- */
#status { min-height:20px; margin:0 0 12px; }
#status.ok { color:var(--ok); } #status.warn { color:var(--warn); } #status.err { color:var(--err); }

/* ---- Responsive: collapse the sidebar to a top strip ---- */
@media (max-width:720px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    border-right:0; border-bottom:1px solid var(--line); }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; }
  .sidebar-foot { display:none; }
  .brand-sub { display:none; }
  .content { padding:18px 16px; }
}