/* ============================================================================
 * PaperPanda Redesign — App shell (sidebar + topbar)
 *
 * Mirrors design_handoff_paperpanda/app-shell.jsx.  Two-column grid:
 *   232px left rail · main column
 *   56px topbar · content (overflow:auto)
 *
 * Uses --pp-* tokens.  Light/dark mode flips via [data-theme] only.
 * ==========================================================================*/

/* ─────────────────────────────────────────────────────────────────────────────
 * Page grid
 * ───────────────────────────────────────────────────────────────────────────*/

html, body { height: 100%; }

.pp-app {
  display: grid;
  grid-template-columns: var(--pp-sidebar-w) 1fr;
  grid-template-rows: var(--pp-topbar-h) 1fr;
  grid-template-areas:
    "side topbar"
    "side main";
  width: 100%;
  height: 100%;
  background: var(--pp-bg);
  color: var(--pp-text);
}

.pp-app-side    { grid-area: side; }
.pp-app-topbar  { grid-area: topbar; }
.pp-app-main    { grid-area: main; overflow: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
 * Sidebar — 232px fixed left rail
 *
 * Sections:  Overview · Markets · Signals.  Each item: text + optional
 * coral-outlined badge for unread counts.  Active item: 2px coral left
 * border + sub background + 600-weight text.
 * ───────────────────────────────────────────────────────────────────────────*/

.pp-side {
  background: var(--pp-panel);
  border-right: var(--pp-border-w) solid var(--pp-line2);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* Brand mark — panda head logo + "PaperPanda" wordmark */
.pp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 16px;
  text-decoration: none;
}
.pp-brand-tile {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.pp-brand-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.025em;
  color: var(--pp-ink);
  white-space: nowrap;
}

/* Search button — opens the ⌘K command palette */
.pp-side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--pp-sub);
  border: var(--pp-border-w) solid var(--pp-line2);
  color: var(--pp-dim);
  font-size: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.pp-side-search:hover { color: var(--pp-text); }
.pp-side-search-label {
  flex: 1;
  text-align: left;
}
.pp-side-search-kbd {
  font-family: var(--pp-font-mono);
  font-size: 10px;
  background: var(--pp-bg);
  padding: 1px 5px;
  border: var(--pp-border-w) solid var(--pp-line2);
  color: var(--pp-dim);
}
.pp-side-search-icon {
  width: 13px;
  height: 13px;
  color: currentColor;
  flex-shrink: 0;
}

/* Section group */
.pp-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-nav-group + .pp-nav-group { margin-top: 12px; }

.pp-nav-heading {
  color: var(--pp-dim2);
  font-size: 10px;
  letter-spacing: var(--pp-ls-mono-loose);
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 600;
}

.pp-nav-item {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--pp-text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.08s ease, color 0.08s ease;
}
.pp-nav-item:hover {
  background: var(--pp-sub);
  color: var(--pp-ink);
}
.pp-nav-item.is-active {
  background: var(--pp-sub);
  color: var(--pp-ink);
  font-weight: 600;
  border-left-color: var(--pp-accent);
}
.pp-nav-item-name { flex: 1; }

/* Unread badge — coral outline mono number */
.pp-nav-badge {
  font-family: var(--pp-font-mono);
  font-size: 10px;
  color: var(--pp-accent);
  padding: 1px 5px;
  border: var(--pp-border-w) solid var(--pp-accent);
  font-variant-numeric: tabular-nums;
}

/* Sidebar footer — Panda Fund support panel */
.pp-side-spacer { flex: 1; min-height: 12px; }

/* Auth CTA — sits above the Panda Fund widget.  Visibility driven
   entirely by `data-pp-authed` on <body>: SSR sets the initial value
   from request.state.profile; ppUpdateAuthUI flips it at runtime when
   Clerk loads or the session changes.  Pure CSS swap — no per-element
   inline styles, no class-toggling. */
body[data-pp-authed="true"]  .pp-auth-signin  { display: none; }
body[data-pp-authed="false"] .pp-auth-signout { display: none; }

.pp-side-auth {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pp-side-auth-primary,
.pp-side-auth-secondary {
  width: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.pp-side-auth-primary {
  background: var(--pp-accent);
  color: var(--pp-accent-ink);
  border: 1px solid var(--pp-accent);
}
.pp-side-auth-primary:hover {
  filter: brightness(1.08);
}
.pp-side-auth-secondary {
  background: transparent;
  color: var(--pp-text);
  border: 1px solid var(--pp-line2);
}
.pp-side-auth-secondary:hover {
  border-color: var(--pp-accent);
  color: var(--pp-ink);
}

.pp-side-support {
  padding: 14px;
  background: var(--pp-sub);
  border: var(--pp-border-w) solid var(--pp-line2);
  margin-top: 12px;
}
:root[data-theme="light"] .pp-side-support {
  background: var(--pp-ink);
  color: #fff;
  border: 0;
}

.pp-side-support-kicker {
  font-size: 10px;
  color: var(--pp-accent);
  letter-spacing: var(--pp-ls-mono-vloose);
  font-weight: 700;
  font-family: var(--pp-font-mono);
}

.pp-side-support-title {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--pp-ink);
}
:root[data-theme="light"] .pp-side-support-title { color: #fff; }

.pp-side-support-bar {
  margin-top: 10px;
  height: 3px;
  background: var(--pp-line2);
  overflow: hidden;
}
:root[data-theme="light"] .pp-side-support-bar {
  background: rgba(255, 255, 255, 0.15);
}
.pp-side-support-bar-fill {
  height: 100%;
  background: var(--pp-accent);
}

.pp-side-support-amount {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-family: var(--pp-font-mono);
  color: var(--pp-dim);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] .pp-side-support-amount {
  color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Topbar — 56px height, holds market kicker, theme toggle, time, alert
 * button + avatar
 * ───────────────────────────────────────────────────────────────────────────*/

.pp-topbar {
  background: var(--pp-bg);
  border-bottom: var(--pp-border-w) solid var(--pp-line2);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
}

.pp-topbar-kicker {
  font-family: var(--pp-font-mono);
  font-size: 10px;
  letter-spacing: var(--pp-ls-mono-vloose);
  color: var(--pp-dim);
  text-transform: uppercase;
}

.pp-topbar-spacer { flex: 1; }

/* Notification bell — "lights up" (coral accent + dot) when there
   are unread notifications.  Visually paired with the theme toggle:
   same border, same height, sits to its left in the topbar. */
.pp-topbar-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--pp-border-w) solid var(--pp-line2);
  background: var(--pp-panel);
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--pp-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.08s ease, border-color 0.08s ease;
  position: relative;
}
.pp-topbar-bell:hover { color: var(--pp-text); }
.pp-topbar-bell.is-active {
  color: var(--pp-accent);
  border-color: var(--pp-accent);
}
.pp-topbar-bell-icon {
  font-size: 13px;
  line-height: 1;
  /* Pulse only when lit -- subtle, single-cycle on hover-state change. */
}
.pp-topbar-bell.is-active .pp-topbar-bell-icon {
  animation: pp-bell-pulse 1.6s ease-in-out infinite;
}
@keyframes pp-bell-pulse {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%           { transform: rotate(10deg); }
  20%           { transform: rotate(-10deg); }
  30%           { transform: rotate(6deg); }
  40%           { transform: rotate(-6deg); }
  50%           { transform: rotate(0deg); }
}
.pp-topbar-bell-badge {
  font-family: var(--pp-font-mono);
  font-size: 9px;
  color: var(--pp-accent);
  margin-left: 5px;
  padding: 1px 4px;
  border: var(--pp-border-w) solid var(--pp-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Theme toggle — pill segmented control with icons */
.pp-theme-toggle {
  display: inline-flex;
  border: var(--pp-border-w) solid var(--pp-line2);
  background: var(--pp-panel);
  padding: 2px;
  font-size: 11px;
}
.pp-theme-toggle-btn {
  padding: 3px 9px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--pp-dim);
  font-family: var(--pp-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.08s ease;
}
.pp-theme-toggle-btn:hover { color: var(--pp-text); }
.pp-theme-toggle-btn.is-active {
  background: var(--pp-ink);
  color: var(--pp-bg);
  font-weight: 600;
}

/* Live time chip — green dot + EST timestamp */
.pp-topbar-time {
  font-family: var(--pp-font-mono);
  font-size: 11px;
  color: var(--pp-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pp-topbar-time-dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;     /* explicit override of zero-radius rule — small UI dot only */
  background: var(--pp-up);
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Page header — kicker + h1 + optional subtitle, matches every page hero
 * ───────────────────────────────────────────────────────────────────────────*/

.pp-page {
  padding: var(--pp-page-pad);
  max-width: 1440px;
  margin: 0 auto;
}

.pp-page-header {
  margin-bottom: var(--pp-space-4);
}
.pp-page-h1 {
  font-size: var(--pp-fs-h1);
  font-weight: 700;
  letter-spacing: var(--pp-ls-headline);
  color: var(--pp-ink);
  margin: 4px 0 0 0;
  line-height: 1.1;
}
.pp-page-sub {
  font-size: 13px;
  color: var(--pp-dim);
  margin-top: 6px;
}

/* Section gap between panels — 18px per spec */
.pp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.pp-row {
  display: grid;
  gap: var(--pp-space-4);
}
.pp-row-2  { grid-template-columns: 1fr 1fr; }
.pp-row-3  { grid-template-columns: 1fr 1fr 1fr; }
.pp-row-2-1 { grid-template-columns: 2fr 1fr; }
.pp-row-1-2 { grid-template-columns: 1fr 2fr; }

/* ─────────────────────────────────────────────────────────────────────────────
 * Responsive — collapse sidebar below 1080px (single column)
 * Mobile is OUT-OF-SCOPE per the design handoff, but the basic grid
 * collapse keeps the page usable while a proper mobile pass is designed.
 * ───────────────────────────────────────────────────────────────────────────*/

@media (max-width: 1080px) {
  .pp-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--pp-topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .pp-app-side {
    display: none;  /* TODO: replace with a hamburger drawer in mobile pass */
  }
}