/* ============================================================
   MOTIVATION.SE — Profile slide-out panel
   Extracted from JOHAN/Motivation-se-ReDesign/motivation-se-post.html
   (.pp-* styles only exist inline in that mockup).

   The container is .redesign-profile-menu (base.html swaps it in for
   the legacy class="sidebar" under ?redesign=1) and is toggled by
   motivation.js via .toggled / body.sidebar-toggled — same mechanics
   as the old menu, mockup's own JS is not used.
   ============================================================ */

/* Container: mockup .profile-panel (sections do their own padding) */
.redesign-profile-menu { padding: 0; }

/* Dimmed backdrop — mockup .profile-overlay; visibility driven by the
   body class motivation.js already toggles. Carries .profile-menu-close
   so clicking it closes the panel. */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 31, 0.35);
  backdrop-filter: blur(2px);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.sidebar-toggled .profile-overlay {
  opacity: 1;
  pointer-events: all;
}

/* ── Panel header ─────────────────────────────────────────── */
.pp-header {
  background: var(--sidebar-dark);
  padding: 24px 20px 20px;
  position: relative;
}
.pp-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,0.1);
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  color: #7ABBC8;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.pp-close:hover { background: rgba(255,255,255,0.2); color: var(--white); }
.pp-avatar-wrap {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.pp-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-name {
  font-family: 'Archivo', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}
.pp-plan {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: var(--ink);
  padding: 2px 8px; border-radius: 4px;
  display: inline-block;
}

/* Quick stats */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
.pp-stat {
  background: rgba(255,255,255,0.05);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}
.pp-stat:hover { background: rgba(255,255,255,0.1); }
.pp-stat-num {
  font-size: 1.1rem; font-weight: 800;
  color: var(--white); line-height: 1;
}
.pp-stat-label {
  font-size: 0.6rem; color: #7a9a8e;
  margin-top: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Panel sections ───────────────────────────────────────── */
.pp-section { padding: 6px 0; border-bottom: 1px solid var(--border); }
.pp-section:last-child { border-bottom: none; }
.pp-section-title {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding: 12px 20px 6px;
}
.pp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  transition: background 0.15s;
  cursor: pointer;
  border: none; background: transparent;
  width: 100%; text-align: left;
}
.pp-item:hover { background: var(--bg); }
.pp-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
  background: var(--bg);
}
.pp-item-body { flex: 1; }
.pp-item-label { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.pp-item-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.pp-item-badge {
  font-size: 0.68rem; font-weight: 700;
  background: var(--tag-bg); color: var(--accent-dark);
  padding: 2px 8px; border-radius: 10px;
  min-width: 28px; text-align: center;
}
.pp-item-arrow { color: var(--border); font-size: 0.7rem; }

/* Following chips */
.pp-chips {
  padding: 8px 20px 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pp-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600;
  background: var(--tag-bg); color: var(--accent-dark);
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid rgba(31,163,184,0.2);
}
.pp-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Recent reads / saves */
.pp-recent-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.pp-recent-item:last-child { border-bottom: none; }
.pp-recent-item:hover { background: var(--bg); }
.pp-recent-num {
  font-size: 0.75rem; font-weight: 800;
  color: var(--accent);
  min-width: 16px; margin-top: 1px;
}
.pp-recent-title {
  font-size: 0.78rem; font-weight: 500;
  color: var(--ink); line-height: 1.4;
}
.pp-recent-date { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

/* Empty-state line inside a section */
.pp-empty {
  font-size: 0.78rem; color: var(--muted);
  padding: 8px 20px 14px;
}

/* Logout */
.pp-logout {
  margin: 14px 20px 20px;
  display: block;
  width: calc(100% - 40px);
  text-align: center;
  padding: 11px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
}
.pp-logout:hover { border-color: #F87171; color: #EF4444; background: #FEF2F2; }

/* AJAX loading placeholder */
.redesign-profile-menu .latest-activity.loader {
  min-height: 60px;
}