/*
 * XActions shell: design tokens, the fixed sidebar, and the mobile top bar.
 * @author nich (@nichxbt)
 * Licensed under the Apache License, Version 2.0
 *
 * Split out of app.css so pages that keep their own content styles (the
 * documentation theme, the playground, admin, sign-in) can still carry the exact
 * same sidebar. app.css imports this file, so every other page gets it too and
 * there is only one copy of the sidebar to maintain.
 */

@view-transition { navigation: auto; }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --bg-inset: #010409;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-hover: #30363d;
  --border: #30363d;
  --border-muted: #21262d;

  --text-primary: #e6edf3;
  --text-secondary: #7d8590;
  --text-link: #2f81f7;

  --accent: #2f81f7;
  --accent-hover: #1f6feb;
  --accent-light: rgba(47, 129, 247, 0.15);
  --btn: #238636;
  --btn-hover: #2ea043;

  --success: #3fb950;
  --warning: #d29922;
  --error: #f85149;
  --danger: #f85149;
  --danger-solid: #da3633;
  --purple: #a371f7;
  --success-bg: rgba(63, 185, 80, 0.15);
  --warning-bg: rgba(210, 153, 34, 0.15);
  --error-bg: rgba(248, 81, 73, 0.15);
  --verified: #2f81f7;

  --radius: 6px;
  --radius-lg: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --sidebar-w: 275px;
  --topbar-h: 48px;
  --page-pad: 24px;
  --sticky-offset: 0px;
  --content-max: 1280px;
  --article-max: 900px;

  --ring: 0 0 0 3px rgba(47, 129, 247, 0.4);
  --z-sticky: 50;
  --z-sidebar: 1000;
  --z-overlay: 990;
  --z-topbar: 995;
  --z-modal: 2000;

  /* Aliases kept so older page-level CSS resolves to the same palette. */
  --bg: var(--bg-primary);
  --bg2: var(--bg-secondary);
  --bg3: var(--bg-tertiary);
  --bg-card: var(--bg-secondary);
  --card-bg: var(--bg-secondary);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text-muted: var(--text-secondary);
  --secondary: var(--text-secondary);
  --green: var(--success);
  --green-bright: var(--success);
  --positive: var(--success);
  --red: var(--error);
  --negative: var(--error);
  --yellow: var(--warning);
  --orange: var(--warning);
  --neutral: var(--text-secondary);
  --cyan: var(--accent);
  --purple-light: var(--purple);
  --red-dim: var(--error-bg);
  --outline: var(--border);
  --font: var(--font-sans);
  --ease: ease;
  --grad: none;
  --grad-soft: var(--bg-secondary);
  --grad-text: none;
  --border-glow: var(--border);
  --glow-accent: none;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}

/* 3. Shell ----------------------------------------------------------------- */
/* The rail is reserved in CSS, so the page never shifts while the script that
   builds the sidebar is still loading. */
body { padding-left: var(--sidebar-w); }

html::before {
  content: "";
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
  z-index: calc(var(--z-sidebar) - 1);
}

#xa-sidebar {
  view-transition-name: xa-sidebar;
  position: fixed; top: 0; left: 0; z-index: var(--z-sidebar);
  width: var(--sidebar-w); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 var(--space-2);
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
  font-size: var(--fs-md);
}

#xa-sidebar .logo { padding: var(--space-2) var(--space-2) var(--space-1); flex: none; }
#xa-sidebar .logo a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: var(--radius); color: var(--text-primary); line-height: 1; text-decoration: none;
}
#xa-sidebar .logo a:hover { background: var(--bg-tertiary); }
#xa-sidebar .logo-icon { display: flex; line-height: 0; }

#xa-sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-2); }
#xa-sidebar nav::-webkit-scrollbar { width: 0; }
#xa-sidebar nav { scrollbar-width: none; }

#xa-sidebar .nav-group {
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-secondary);
}
#xa-sidebar .nav-group:first-child { margin-top: var(--space-1); }

#xa-sidebar .nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 1px; padding: 6px var(--space-2);
  border-radius: var(--radius);
  font-size: var(--fs-md); font-weight: 500; line-height: 20px;
  color: var(--text-primary); text-decoration: none;
  background: transparent;
}
#xa-sidebar .nav-item:hover { background: var(--bg-tertiary); }
#xa-sidebar .nav-item.active { background: var(--bg-tertiary); font-weight: 600; }
#xa-sidebar .nav-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--text-secondary); }
#xa-sidebar .nav-item.active .nav-icon, #xa-sidebar .nav-item:hover .nav-icon { color: var(--text-primary); }
#xa-sidebar .nav-icon svg { width: 16px; height: 16px; }
#xa-sidebar .nav-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#xa-sidebar .nav-badge {
  flex: none; min-width: 20px; padding: 0 6px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 18px; text-align: center;
  background: var(--accent-light); color: var(--text-link);
}
#xa-sidebar .nav-badge[data-tone="bad"] { background: var(--error-bg); color: var(--error); }

#xa-sidebar .action-btn {
  flex: none; display: block; margin: var(--space-2) 4px var(--space-3); padding: 5px var(--space-4);
  text-align: center; text-decoration: none;
  background: var(--btn); color: #fff; border: 1px solid rgba(240, 246, 252, 0.1);
  border-radius: var(--radius); font-size: var(--fs-md); font-weight: 500; line-height: 20px;
}
#xa-sidebar .action-btn:hover { background: var(--btn-hover); color: #fff; }
#xa-sidebar .action-ico { display: none; }

#xa-sidebar .user-menu-wrap { position: relative; flex: none; margin: 4px; }
#xa-sidebar .user-menu {
  width: 100%; display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-2); border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
#xa-sidebar .user-menu:hover { background: var(--bg-tertiary); }
#xa-sidebar .user-avatar {
  width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
}
#xa-sidebar .user-info { flex: 1; min-width: 0; }
#xa-sidebar .user-name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#xa-sidebar .user-handle { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#xa-sidebar .user-menu-dots { color: var(--text-secondary); display: inline-flex; }
#xa-sidebar .logout-balloon {
  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); width: 200px; z-index: 40;
  padding: var(--space-2); background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8);
}
#xa-sidebar .logout-balloon[hidden] { display: none; }
#xa-sidebar .logout-balloon-name { margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--text-secondary); }
#xa-sidebar .logout-balloon-btn {
  width: 100%; padding: 5px 10px; background: transparent; color: var(--error);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-weight: 500; cursor: pointer;
}
#xa-sidebar .logout-balloon-btn:hover { background: var(--bg-tertiary); }

#xa-topbar, #xa-overlay { display: none; }

/* Pages that carried their own navigation: the shell replaces it. */
.sidebar-left { display: none; }


/* Mobile: off-canvas drawer and top bar */
@media (max-width: 1024px) {
  :root { --page-pad: 16px; --sticky-offset: var(--topbar-h); }

  html::before { display: none; }
  body { padding-left: 0; padding-top: var(--topbar-h); }
  html { scroll-padding-top: calc(var(--topbar-h) + var(--space-4)); }

  #xa-topbar {
    view-transition-name: xa-topbar;
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar);
    height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-3);
    background: var(--bg-inset); border-bottom: 1px solid var(--border);
  }
  #xa-topbar button {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 0;
  }
  #xa-topbar button:hover { background: var(--bg-tertiary); }
  #xa-topbar .topbar-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; font-weight: 600; }
  #xa-topbar .topbar-page { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: var(--fs-sm); }

  #xa-sidebar {
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.18s ease, visibility 0s linear 0.18s;
    max-width: 86vw; box-shadow: none;
  }
  html.xa-nav-open #xa-sidebar { transform: none; visibility: visible; transition: transform 0.18s ease; box-shadow: 8px 0 24px rgba(1, 4, 9, 0.6); }
  html.xa-nav-open { overflow: hidden; }
  #xa-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(1, 4, 9, 0.7); }
  html.xa-nav-open #xa-overlay { display: block; }

}

/* Navigation between pages: sidebar and top bar stay put, only the content cross-fades. */
::view-transition-group(xa-sidebar), ::view-transition-old(xa-sidebar), ::view-transition-new(xa-sidebar),
::view-transition-group(xa-topbar), ::view-transition-old(xa-topbar), ::view-transition-new(xa-topbar) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.12s; }