/*
 * ============================================================
 *  Apache Answer — Custom Sidebar CSS
 *  Theme   : Professional Green (matches header theme)
 *  Paste into: Admin → Customize → CSS/HTML → Custom CSS
 *  (append below the header CSS, or paste standalone)
 * ============================================================
 *
 *  COVERS
 *  • Right-hand Q&A sidebar (stats, hot questions, related)
 *  • Left/admin sidebar navigation panel
 *  • Sidebar widgets: tags, users, stats cards
 *  • Sticky sidebar scrolling behaviour
 *
 *  Reuses the same CSS variables as the header file.
 *  If pasting standalone, the :root block below is included.
 * ============================================================
 */

/* ── 0. CSS VARIABLES (skip if already included from header) ── */
:root {
  --an-green-900: #0d3321;
  --an-green-800: #134d33;
  --an-green-700: #1a6641;
  --an-green-500: #228b57;
  --an-green-400: #2aad6c;
  --an-green-300: #3dc878;
  --an-green-100: #d4f0e1;
  --an-green-50:  #edf8f2;
  --an-white:     #f7fdf9;
  --an-accent:    #5df0a4;
  --an-text:      #1a2e24;
  --an-muted:     #5a7a68;
  --an-border:    #c8e6d4;
  --an-shadow:    0 2px 12px rgba(13, 51, 33, 0.10);
  --an-radius:    8px;
  --an-transition: 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════
   PART A — RIGHT SIDEBAR (Q&A pages: stats, related, tags)
   ══════════════════════════════════════════════════════════════ */

/* ── A1. Sidebar outer column wrapper ─────────────────────── */

.sidebar,
aside.sidebar,
[class*="side-nav"],
.col-sidebar,
.layout-right-sidebar {
  position: sticky;
  top: 70px;           /* clears the sticky header */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--an-green-300) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--an-green-300);
  border-radius: 4px;
}

/* ── A2. Sidebar card / widget ────────────────────────────── */

.sidebar .card,
.sidebar .widget,
.sidebar [class*="card"],
aside .card,
aside .widget {
  background: #ffffff !important;
  border: 1px solid var(--an-border) !important;
  border-radius: var(--an-radius) !important;
  box-shadow: var(--an-shadow) !important;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow var(--an-transition);
}

.sidebar .card:hover,
aside .card:hover {
  box-shadow: 0 4px 18px rgba(13, 51, 33, 0.15) !important;
}

/* ── A3. Widget / card header strip ──────────────────────── */

.sidebar .card-header,
.sidebar .widget-header,
.sidebar [class*="card-header"],
aside .card-header {
  background: linear-gradient(
    90deg,
    var(--an-green-800) 0%,
    var(--an-green-600, #1e7a4d) 100%
  ) !important;
  color: var(--an-white) !important;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem !important;
  border-bottom: none !important;
}

/* ── A4. Widget title (h5 / h6 inside card-body) ─────────── */

.sidebar .card-body h5,
.sidebar .card-body h6,
.sidebar .widget-title,
aside .card-body h5,
aside .card-body h6 {
  color: var(--an-green-800) !important;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--an-green-100);
}

/* ── A5. Sidebar list items (hot questions, related, etc.) ── */

.sidebar .list-group-item,
.sidebar li.list-item,
aside .list-group-item {
  background: transparent !important;
  border-color: var(--an-border) !important;
  color: var(--an-text) !important;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.88rem;
  line-height: 1.45;
  transition: background var(--an-transition), color var(--an-transition);
  border-left: 3px solid transparent;
}

.sidebar .list-group-item:hover,
aside .list-group-item:hover {
  background: var(--an-green-50) !important;
  border-left-color: var(--an-green-400) !important;
  color: var(--an-green-800) !important;
}

/* Links inside sidebar lists */
.sidebar a,
aside a {
  color: var(--an-green-700) !important;
  text-decoration: none;
  transition: color var(--an-transition);
}

.sidebar a:hover,
aside a:hover {
  color: var(--an-green-500) !important;
  text-decoration: underline;
}

/* ── A6. Stat numbers (vote count, answer count etc.) ─────── */

.sidebar .count,
.sidebar .stat-number,
.sidebar [class*="count"],
aside .vote-count,
aside .answer-count {
  background: var(--an-green-100) !important;
  color: var(--an-green-800) !important;
  font-weight: 700;
  font-size: 0.78rem;
  border-radius: 4px;
  padding: 1px 6px;
  min-width: 32px;
  text-align: center;
  display: inline-block;
}

/* Accepted / answered highlight */
.sidebar .accepted,
.sidebar [class*="accepted"] {
  background: var(--an-green-500) !important;
  color: #fff !important;
}

/* ── A7. TAG CLOUD (sidebar tags widget) ──────────────────── */

.sidebar .tag,
.sidebar .badge,
.sidebar [class*="tag-item"],
aside .tag,
aside .badge {
  background: var(--an-green-100) !important;
  color: var(--an-green-800) !important;
  border: 1px solid var(--an-border) !important;
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  padding: 2px 8px !important;
  margin: 2px 3px !important;
  transition: background var(--an-transition), border-color var(--an-transition),
              transform var(--an-transition);
  display: inline-block;
  cursor: pointer;
}

.sidebar .tag:hover,
.sidebar .badge:hover,
aside .tag:hover {
  background: var(--an-green-500) !important;
  color: #fff !important;
  border-color: var(--an-green-500) !important;
  transform: translateY(-1px);
}

/* ── A8. "See more" / action links in sidebar ─────────────── */

.sidebar .more-link,
.sidebar a[class*="more"],
aside .btn-link {
  color: var(--an-green-500) !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transition: color var(--an-transition), gap var(--an-transition);
}

.sidebar .more-link:hover,
aside .btn-link:hover {
  color: var(--an-green-400) !important;
  gap: 7px;
}

/* ── A9. User reputation / profile card in sidebar ────────── */

.sidebar .user-info,
.sidebar .user-card,
aside .user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--an-border);
}

.sidebar .user-info:last-child,
aside .user-card:last-child {
  border-bottom: none;
}

.sidebar .reputation,
aside .reputation {
  color: var(--an-green-600, #1e7a4d) !important;
  font-weight: 700;
  font-size: 0.82rem;
}

/* ── A10. Dividers inside sidebar ─────────────────────────── */

.sidebar hr,
aside hr {
  border-color: var(--an-border) !important;
  opacity: 1 !important;
  margin: 0.6rem 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   PART B — LEFT / ADMIN SIDEBAR NAV
   (Admin panel, and the left navigation on 1.5.0+ full-width layout)
   ══════════════════════════════════════════════════════════════ */

/* ── B1. Admin sidebar wrapper ────────────────────────────── */

.admin-nav,
.sidebar-nav,
.left-sidebar,
[class*="admin-sidebar"],
[class*="side-menu"] {
  background: var(--an-green-900) !important;
  border-right: 1px solid var(--an-green-800) !important;
  min-height: 100vh;
  padding-top: 1rem;
}

/* ── B2. Admin nav section headings ───────────────────────── */

.admin-nav .nav-section-title,
.sidebar-nav .section-label,
[class*="admin-sidebar"] .nav-label {
  color: rgba(93, 240, 164, 0.55) !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.9rem 1.1rem 0.3rem !important;
}

/* ── B3. Admin nav items ──────────────────────────────────── */

.admin-nav .nav-item,
.admin-nav .nav-link,
.sidebar-nav .nav-link,
[class*="admin-sidebar"] .nav-link {
  color: rgba(247, 253, 249, 0.75) !important;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem !important;
  border-radius: 0 var(--an-radius) var(--an-radius) 0;
  margin: 1px 8px 1px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--an-transition),
              color var(--an-transition),
              border-left-color var(--an-transition);
  border-left: 3px solid transparent;
  text-decoration: none !important;
}

.admin-nav .nav-link:hover,
.sidebar-nav .nav-link:hover,
[class*="admin-sidebar"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--an-white) !important;
  border-left-color: var(--an-green-400) !important;
}

/* Active admin nav link */
.admin-nav .nav-link.active,
.admin-nav .nav-link[aria-current="page"],
.sidebar-nav .nav-link.active,
[class*="admin-sidebar"] .nav-link.active {
  background: rgba(93, 240, 164, 0.13) !important;
  color: var(--an-accent) !important;
  border-left-color: var(--an-accent) !important;
  font-weight: 600;
}

/* SVG icons next to admin nav labels */
.admin-nav .nav-link svg,
.sidebar-nav .nav-link svg,
[class*="admin-sidebar"] .nav-link svg {
  opacity: 0.70;
  flex-shrink: 0;
  transition: opacity var(--an-transition);
}

.admin-nav .nav-link:hover svg,
.admin-nav .nav-link.active svg {
  opacity: 1;
}

/* ── B4. Admin sidebar footer / version badge ─────────────── */

.admin-nav .sidebar-footer,
[class*="admin-sidebar"] .sidebar-footer {
  border-top: 1px solid var(--an-green-800) !important;
  padding: 0.8rem 1rem;
  font-size: 0.75rem;
  color: rgba(247, 253, 249, 0.40) !important;
}

/* ── B5. Collapse / expand arrow for grouped nav items ─────── */

.admin-nav .nav-link[data-bs-toggle="collapse"]::after,
.sidebar-nav [data-bs-toggle="collapse"]::after {
  content: '›';
  margin-left: auto;
  font-size: 1rem;
  transition: transform var(--an-transition);
  color: var(--an-green-400);
}

.admin-nav .nav-link[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════════
   PART C — SHARED UTILITY OVERRIDES (both sidebars)
   ══════════════════════════════════════════════════════════════ */

/* Scrollbar on any sidebar column */
.sidebar::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar,
.left-sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb {
  background: var(--an-green-400);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* Focus ring for keyboard navigation */
.sidebar a:focus-visible,
.admin-nav .nav-link:focus-visible {
  outline: 2px solid var(--an-accent) !important;
  outline-offset: 2px;
  border-radius: var(--an-radius);
}

/* ── C1. Empty / loading placeholder states ───────────────── */

.sidebar .placeholder,
.sidebar .skeleton,
aside .placeholder {
  background: linear-gradient(
    90deg,
    var(--an-green-100) 25%,
    var(--an-green-50) 50%,
    var(--an-green-100) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: an-skeleton-shimmer 1.4s infinite;
  border-radius: 4px;
  color: transparent !important;
}

@keyframes an-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── C2. Dark mode adjustments ────────────────────────────── */

[data-bs-theme="dark"] .sidebar .card,
[data-bs-theme="dark"] aside .card {
  background: #111e17 !important;
  border-color: var(--an-green-800) !important;
}

[data-bs-theme="dark"] .sidebar .tag,
[data-bs-theme="dark"] aside .tag {
  background: rgba(93, 240, 164, 0.08) !important;
  color: var(--an-accent) !important;
  border-color: rgba(93, 240, 164, 0.25) !important;
}

[data-bs-theme="dark"] .sidebar a,
[data-bs-theme="dark"] aside a {
  color: var(--an-green-300) !important;
}

[data-bs-theme="dark"] .sidebar .list-group-item {
  color: rgba(247, 253, 249, 0.82) !important;
  border-color: var(--an-green-800) !important;
}