/*
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: nav.css
 * @TITLE: Wexford Lodge - Member Portal
 * @DESCRIPTION: Sidebar navigation component styles. Covers nav list, nav links, active/hover states, icons, labels, section labels, and notification badges within the sidebar. Structural sidebar positioning lives in layout.css.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.5
 * - File Modified | Ary van der Pijl | 2026/07/16 | QA-070 | Updated .sidebar__nav-link:hover's hardcoded rgba(184,134,11,0.5) border-left-color to rgba(192,138,14,0.5), matching the refreshed --color-gold-700 value in tokens.css. |
 * VERSION 1.0.0.4
 * - File Modified | Ary van der Pijl | 2026/07/16 | Public calendar + lodge facilities feature | Added .sidebar__nav-toggle/.sidebar__nav-chevron/ .sidebar__submenu/.sidebar__nav-link--sub for the new collapsible "Lodge" sidebar accordion (layouts/app.php). Reuses existing tokens only - no new raw values. |
 * VERSION 1.0.0.3
 * - File Modified | Ary van der Pijl | 2026/07/11 | CSS-003 | Replaced repeated untokenized rgba(255,255,255,0.08) value with --overlay-white-08. |
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026/06/19 | STANDARDS-COMPLIANCE | Applied ATH Solutions 2026 coding standards. |
 * VERSION 1.0.0.1
 * + File Created, Ary van der Pijl, 2026/06/13 - extracted from layout.css
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR NAVIGATION
───────────────────────────────────────────────────────────────────────── */

.sidebar__nav {
  flex: 1;
  padding: var(--space-3) 0;
}

.sidebar__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__section-label {
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.sidebar__nav-item {
  position: relative;
}

.sidebar__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: var(--nav-item-height);
  color: rgba(255, 255, 255, 0.70);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.sidebar__nav-link:hover {
  background: var(--overlay-white-08);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  border-left-color: rgba(192, 138, 14, 0.5);
}

.sidebar__nav-link--active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.sidebar__nav-link--active .sidebar__nav-icon {
  color: var(--color-accent);
}

.sidebar__nav-link--danger {
  color: rgba(255, 150, 150, 0.75);
}

.sidebar__nav-link--danger:hover {
  color: #FF9090;
  background: rgba(255, 100, 100, 0.08);
  border-left-color: rgba(255, 100, 100, 0.4);
}

.sidebar__nav-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: inherit;
}

.sidebar__nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar__nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR ACCORDION (e.g. the "Lodge" nav group)
───────────────────────────────────────────────────────────────────────── */

.sidebar__nav-toggle {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.sidebar__nav-chevron {
  font-size: var(--text-xs);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.sidebar__nav-toggle[aria-expanded="true"] .sidebar__nav-chevron {
  transform: rotate(180deg);
}

.sidebar__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__nav-link--sub {
  padding-left: calc(var(--space-4) * 3);
}