/* ================================================================
   SITE SIDEBAR — Persistent collapsible sidebar + slim top bar
   Works with existing sidebar.css/sidebar.js (extends, not replaces)
   ================================================================ */

/* --- Variables --- */
:root {
  --site-sidebar-w: 260px;
  --site-sidebar-w-collapsed: 72px;
  --site-topbar-h: 60px;
}

/* ================================================================
   DESKTOP (>1024px): Persistent sidebar + body margin
   ================================================================ */
@media (min-width: 1025px) {
  /* Override sidebar.css: make sidebar always visible */
  .sidebar {
    transform: translateX(0) !important;
    width: var(--site-sidebar-w);
    transition: width 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease;
    box-shadow: 1px 0 0 var(--sidebar-line, rgba(39,76,119,0.08));
    border-right: 1px solid var(--sidebar-line, rgba(39,76,119,0.08));
    z-index: 80;
  }
  .sidebar.active {
    transform: translateX(0) !important;
  }
  /* Close button — visible on desktop as toggle (X → chevron) */
  .sidebar .sidebar-close {
    display: flex;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .sidebar-close .sidebar-close-chevron {
    display: none;
  }
  body.sidebar-collapsed .sidebar-close .sidebar-close-x {
    display: none;
  }
  body.sidebar-collapsed .sidebar-close .sidebar-close-chevron {
    display: block;
  }
  /* In collapsed state, center close button in header and hide brand */
  body.sidebar-collapsed .sidebar-header {
    padding: 12px;
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-brand {
    display: none;
  }
  body.sidebar-collapsed .sidebar-tagline {
    display: none;
  }
  body.sidebar-collapsed .sidebar-close {
    margin: 0;
  }
  /* Hide overlay — not needed on desktop */
  .sidebar-overlay {
    display: none !important;
  }
  /* Body margin to accommodate sidebar */
  body {
    margin-left: var(--site-sidebar-w);
    transition: margin-left 0.3s cubic-bezier(.4,0,.2,1);
  }
  body.sidebar-collapsed {
    margin-left: var(--site-sidebar-w-collapsed);
  }
  body.sidebar-open {
    overflow: auto !important;
  }

  /* --- COLLAPSED STATE --- */
  body.sidebar-collapsed .sidebar {
    width: var(--site-sidebar-w-collapsed);
    overflow: hidden;
  }

  /* Hide ALL text labels (wrapped by wrapSidebarTextNodes in sidebar.js) */
  body.sidebar-collapsed .sidebar-label {
    display: none;
  }

  /* Hide decorative/non-essential text elements */
  body.sidebar-collapsed .sidebar-tagline,
  body.sidebar-collapsed .sidebar-section-title,
  body.sidebar-collapsed .sidebar-accordion-content,
  body.sidebar-collapsed .sidebar-user-info,
  body.sidebar-collapsed .sidebar-legal,
  body.sidebar-collapsed .sidebar-version,
  body.sidebar-collapsed .sidebar-footer-content .sidebar-copyright,
  body.sidebar-collapsed .sidebar-footer-content .sidebar-social,
  body.sidebar-collapsed .sidebar-user-badge {
    display: none;
  }

  /* Hide entire sections that don't work in icon-rail mode */
  body.sidebar-collapsed .sidebar-quick-actions,
  body.sidebar-collapsed #sidebar-user-menu,
  body.sidebar-collapsed .sidebar-user-guest {
    display: none;
  }

  /* Brand: hidden (close button replaces it in collapsed header) */
  body.sidebar-collapsed .sidebar-brand {
    display: none;
  }

  /* Nav items: center icon only */
  body.sidebar-collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
    position: relative;
  }
  body.sidebar-collapsed .sidebar-nav-item.active::before {
    display: none;
  }

  /* Sections & spacing */
  body.sidebar-collapsed .sidebar-section {
    padding: 12px 8px;
  }

  /* User area: avatar only */
  body.sidebar-collapsed .sidebar-user {
    padding: 16px 8px;
    display: flex;
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
  }
  body.sidebar-collapsed .sidebar-user-profile {
    justify-content: center;
  }

  /* Accordion header: icon only */
  body.sidebar-collapsed .sidebar-accordion-header {
    justify-content: center;
    padding: 12px;
  }

  /* Footer */
  body.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px;
    text-align: center;
  }

  /* Tooltips: handled by real DOM elements in site-sidebar.js (sidebar-tooltip class)
     CSS ::after approach doesn't work because overflow:hidden on nav items clips them */
}

/* ================================================================
   SIDEBAR TOOLTIP ELEMENTS (appended to <body> to escape overflow:hidden)
   ================================================================ */
.sidebar-tooltip {
  position: fixed;
  background: var(--sidebar-ink, #274c77);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease 0.2s, transform 0.15s ease 0.2s;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.sidebar-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}
.sidebar-tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--sidebar-ink, #274c77);
  border-left: none;
}

/* ================================================================
   TABLET (768–1024px): Sidebar hidden, opens as overlay via toggle
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar .sidebar-close {
    display: flex;
  }
}

/* ================================================================
   MOBILE (<768px): Sidebar hidden off-canvas, overlay drawer
   ================================================================ */
@media (max-width: 767px) {
  .sidebar .sidebar-close {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .sidebar-close .sidebar-close-chevron {
    display: none !important;
  }
  .sidebar-close .sidebar-close-x {
    display: block !important;
  }

  /* ── CRITICAL: Keep sidebar hidden off-canvas on mobile/tablet ── */
  /* This MUST override any previously applied transform */
  .sidebar {
    transform: translateX(-100%) !important;
    width: min(85vw, 340px) !important;
    z-index: 1000;
    position: fixed;
  }
  .sidebar.active {
    transform: translateX(0) !important;
  }
  /* Remove desktop body margin — content fills full width */
  body {
    margin-left: 0 !important;
    transition: none !important;
  }
  body.sidebar-open {
    overflow: hidden !important;
  }
  /* Overlay must be visible on mobile */
  .sidebar-overlay {
    display: block !important;
  }
}

/* ================================================================
   TOP BAR — Slim sticky bar above page content
   ================================================================ */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--site-topbar-h);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.site-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Hamburger button — mobile/tablet only */
.site-topbar .site-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-ink, #274c77);
  transition: background 0.2s ease;
}
.site-topbar .site-hamburger:hover {
  background: var(--sidebar-surface, #e7ecef);
}
.site-topbar .site-hamburger svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 1024px) {
  .site-topbar .site-hamburger {
    display: flex;
  }
}
/* User greeting */
.site-topbar .user-greeting {
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-ink, #274c77);
}
.site-topbar .user-greeting .user-email {
  font-weight: 400;
  color: var(--sidebar-muted, #8b8c89);
  font-size: 13px;
}
/* Admin badge */
.site-topbar .admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(99,102,241,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-topbar .admin-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99,102,241,0.3);
}
/* CTA button */
.site-topbar .btn-get-featured {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--sidebar-blue, #6096ba), var(--sidebar-blue-dark, #274c77));
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(96,150,186,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-topbar .btn-get-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42,109,244,0.28);
}
/* Sign in link */
.site-topbar .btn-signin {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-ink, #274c77);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-topbar .btn-signin:hover {
  border-color: var(--sidebar-blue, #6096ba);
  color: var(--sidebar-blue, #6096ba);
}
/* Logout button */
.site-topbar .btn-logout {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-topbar .btn-logout:hover {
  border-color: #dc2626;
  background: rgba(220,38,38,0.04);
}

/* User dropdown button (mobile) */
.site-topbar .user-dropdown-btn {
  display: none; /* Hidden on desktop */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  background: var(--sidebar-surface, #e7ecef);
  color: var(--sidebar-ink, #274c77);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-topbar .user-dropdown-btn:hover {
  background: rgba(42, 109, 244, 0.08);
  border-color: var(--sidebar-blue, #6096ba);
}

/* User dropdown menu (mobile) */
.site-topbar .user-dropdown {
  display: none;
  position: absolute;
  top: calc(var(--site-topbar-h) + 8px);
  right: 14px;
  width: min(280px, 90vw);
  background: var(--sidebar-bg, #fff);
  border: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 1000;
}
.site-topbar .user-dropdown.open {
  display: block;
}
.site-topbar .user-dropdown .dropdown-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sidebar-line, rgba(18,22,35,0.08));
  margin-bottom: 10px;
}
.site-topbar .user-dropdown .dropdown-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sidebar-ink, #274c77);
}
.site-topbar .user-dropdown .dropdown-user-email {
  font-size: 12px;
  color: var(--sidebar-muted, #8b8c89);
}
.site-topbar .user-dropdown .dropdown-link,
.site-topbar .user-dropdown .dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-ink, #274c77);
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.site-topbar .user-dropdown .dropdown-link:hover,
.site-topbar .user-dropdown .dropdown-btn:hover {
  background: var(--sidebar-surface, #e7ecef);
}
.site-topbar .user-dropdown .dropdown-btn.danger {
  color: #dc2626;
}

/* Responsive top bar */
@media (max-width: 767px) {
  .site-topbar {
    padding: 0 14px;
    height: 54px;
  }
  .site-topbar .btn-get-featured {
    padding: 7px 14px;
    font-size: 12px;
  }
  /* Hide inline user info on mobile */
  .site-topbar .user-greeting,
  .site-topbar .admin-badge,
  .site-topbar .btn-logout {
    display: none !important;
  }
  /* Show user dropdown button on mobile */
  .site-topbar .user-dropdown-btn {
    display: flex;
  }
  /* Adjust user dropdown position for smaller top bar */
  .site-topbar .user-dropdown {
    top: 62px;
    right: 10px;
  }
}
@media (max-width: 380px) {
  .site-topbar .btn-get-featured {
    display: none;
  }
}

/* ================================================================
   PAGE LAYOUT ADJUSTMENTS
   Ensure page content doesn't overlap with persistent sidebar
   ================================================================ */
@media (min-width: 1025px) {
  /* Hide the old auth nav since sidebar + topbar replace it */
  [data-auth-nav] .top-nav {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  /* On mobile/tablet, hide the old auth nav too — topbar replaces it */
  [data-auth-nav] .top-nav {
    display: none !important;
  }
}

/* ================================================================
   TOPBAR BRAND — Logo + name shown on mobile between hamburger & actions
   ================================================================ */
.site-topbar .topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sidebar-ink, #274c77);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.site-topbar .topbar-brand img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.site-topbar .topbar-brand-name {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hide brand name on very small screens (hamburger + logo icon only) */
@media (max-width: 400px) {
  .site-topbar .topbar-brand-name {
    display: none;
  }
}

/* Dark mode overrides for topbar */
[data-theme="dark"] .site-topbar {
  background: rgba(26, 31, 46, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .site-topbar .topbar-brand {
  color: var(--sidebar-ink, #E4E7EB);
}
[data-theme="dark"] .site-topbar .btn-signin {
  color: var(--sidebar-ink, #E4E7EB);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .site-topbar .btn-signin:hover {
  border-color: var(--sidebar-blue, #5B8DEF);
  color: var(--sidebar-blue, #5B8DEF);
}
[data-theme="dark"] .site-hamburger {
  color: var(--sidebar-ink, #E4E7EB);
}
[data-theme="dark"] .site-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* Dark mode user dropdown */
[data-theme="dark"] .site-topbar .user-dropdown-btn {
  background: #242936;
  border-color: rgba(255,255,255,0.16);
  color: #E4E7EB;
}
[data-theme="dark"] .site-topbar .user-dropdown-btn:hover {
  background: rgba(91, 141, 239, 0.12);
  border-color: #5B8DEF;
}
[data-theme="dark"] .site-topbar .user-dropdown {
  background: #1a1f2e;
  border-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-user-name {
  color: #E4E7EB;
}
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-user-email {
  color: #9CA3AF;
}
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-link,
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-btn {
  color: #E4E7EB;
}
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-link:hover,
[data-theme="dark"] .site-topbar .user-dropdown .dropdown-btn:hover {
  background: #242936;
}

/* Footer Credit Link (shared across all pages) */
.footer-credit-link {
  color: #D97706; /* Gold accent color */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
.footer-credit-link:hover {
  text-decoration: underline;
  color: #B45309;
}
[data-theme="dark"] .footer-credit-link {
  color: #F59E0B;
}
[data-theme="dark"] .footer-credit-link:hover {
  color: #D97706;
}

/* Mobile responsive: stack credit link on new line */
@media (max-width: 600px) {
  .footer-bottom,
  footer .wrap > div:last-child,
  footer > .wrap > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .footer-bottom .footer-credit-link,
  footer .footer-credit-link {
    display: block;
  }
  /* Hide the separator dot on mobile since we're stacking */
  .footer-credit-sep {
    display: none;
  }
}

/* Footer Contact & Social Links (shared across all pages) */
.footer-contact-links {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-contact-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7ecef;
  border: 1px solid #e2e8f0;
  color: #0F766E; /* Teal default color */
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-contact-link:hover {
  color: #D97706; /* Gold on hover */
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.2);
  transform: translateY(-1px);
}
/* Dark mode adjustments */
[data-theme="dark"] .footer-contact-link {
  color: #14B8A6; /* Teal for dark mode */
  background: rgba(20, 184, 166, 0.04);
  border-color: #2a2f3d;
}
[data-theme="dark"] .footer-contact-link:hover {
  color: #F59E0B; /* Gold for dark mode */
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  body,
  .sidebar-close {
    transition: none !important;
  }
}

/* ============================================
   FORCE SIDEBAR HIDDEN BY DEFAULT ON MOBILE
   ============================================ */
@media screen and (max-width: 1024px) {
  /* OVERRIDE ABSOLUTELY EVERYTHING */
  html body .sidebar {
    transform: translateX(-100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(85vw, 340px) !important;
    max-width: 340px !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.3s ease !important;
  }
  html body .sidebar.active {
    transform: translateX(0) !important;
  }
  /* Overlay styles for mobile */
  html body .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    background: var(--overlay-bg, rgba(15,23,42,0.4)) !important;
    backdrop-filter: blur(8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  html body .sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Prevent body margin left on mobile */
  html body {
    margin-left: 0 !important;
  }
  html body.sidebar-open {
    overflow: hidden !important;
  }
}