/*
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: layout.css
 * @TITLE: Wexford Lodge - Member Portal
 * @DESCRIPTION: Page-level layout system. Defines the authenticated app shell: collapsible sidebar (260px expanded / 64px collapsed / mobile overlay), fixed topbar, main content area, and overlay backdrop. All layout dimensions reference tokens.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.6
 * - File Modified | Ary van der Pijl | 2026/07/20 | QA-125 | Live bug reported by the user (screenshot): tapping the mobile hamburger button (#mobileMenuBtn, z-index 100) did nothing. .sidebar-overlay was forced to display:block for ANY viewport <=1023px, not just while the drawer was open - a full-viewport position:fixed layer at z-index 499 (calc(--z-nav - 1)), sitting above the topbar. opacity:0 doesn't stop an element from capturing clicks, so every tap on the hamburger (or anything else in the topbar) actually landed on the invisible overlay instead, whose own click handler just closes an already-closed drawer - a silent no-op. Added pointer-events:none to the base rule and pointer-events:auto to .sidebar-overlay--visible, so the overlay stays present (needed for the opacity transition to animate) but only actually intercepts clicks while the drawer is genuinely open.
 * VERSION 1.0.0.5
 * - File Modified | Ary van der Pijl | 2026/07/20 | QA-124 | Added a rule targeting the d-flex justify-content-between align-items-center mb-4 utility combo (~44 authenticated view files use it verbatim as their page-header row) so title and action buttons wrap instead of colliding on mobile. The existing .page-header__row class already had the correct flex-wrap but is dead code - nothing references it.
 * VERSION 1.0.0.4
 * - File Modified | Ary van der Pijl | 2026/07/16 | QA-070 | Updated the auth brand panel's decorative glow pattern (.auth-layout__brand-pattern) from the old hardcoded rgba(184,134,11,*) to rgba(192,138,14,*), matching the refreshed --color-gold-700 value in tokens.css. Added .auth-layout__constitutions (flex row layout for the new decorative English/Scottish/Irish badge row on the login brand panel). No other layout.css change needed - .sidebar and .auth-layout__panel--brand already reference var(--color-primary), so they re-theme automatically.
 * 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)/(0.6) and rgba(0,0,0,0.55) values with --overlay-white-08/--overlay-white-60/--overlay-black-55. |
 * 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
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-base);
}

.app-shell--collapsed {
  margin-left: var(--sidebar-width-collapsed);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════════════════ */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  z-index: var(--z-nav);
  transition: width var(--transition-base), transform var(--transition-base);
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar--collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar--collapsed .sidebar__logo-text,
.sidebar--collapsed .sidebar__user-info,
.sidebar--collapsed .sidebar__nav-label,
.sidebar--collapsed .sidebar__section-label {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR HEADER
───────────────────────────────────────────────────────────────────────── */

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--overlay-white-08);
  min-height: var(--topbar-height);
  flex-shrink: 0;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  min-width: 0;
}

.sidebar__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--overlay-white-60);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.sidebar__toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR USER BLOCK
───────────────────────────────────────────────────────────────────────── */

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--overlay-white-08);
  flex-shrink: 0;
}

.sidebar__user-avatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  flex-shrink: 0;
  letter-spacing: var(--letter-spacing-wide);
}

.sidebar__user-info {
  min-width: 0;
  transition: opacity var(--transition-base);
}

.sidebar__user-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  text-transform: capitalize;
  letter-spacing: var(--letter-spacing-wide);
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR FOOTER
───────────────────────────────────────────────────────────────────────── */

.sidebar__footer {
  border-top: 1px solid var(--overlay-white-08);
  padding: var(--space-2) 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════════════════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  gap: var(--space-4);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.topbar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.topbar__menu-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.topbar__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.topbar__icon-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.topbar__user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.topbar__user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.topbar__user-avatar:hover {
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.breadcrumb__item:last-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════════════════ */

.main-content {
  flex: 1;
  padding: var(--space-8) var(--space-8);
  max-width: var(--content-max-width);
  width: 100%;
}

.page-header {
  margin-bottom: var(--space-8);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.page-header__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* The dedicated .page-header__row class above is correct but unused - views build
   their header rows with the raw Bootstrap utility combo below instead. Targeting
   that combo directly fixes the mobile collision across every page using it without
   touching ~44 view files. flex-wrap only changes behavior when content doesn't fit
   on one line, so this is a no-op at desktop widths. */
.d-flex.justify-content-between.align-items-center.mb-4,
.d-flex.align-items-center.justify-content-between.mb-4 {
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY (mobile sidebar)
═══════════════════════════════════════════════════════════════════════════ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-black-55);
  z-index: calc(var(--z-nav) - 1);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.sidebar-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH LAYOUT (split-screen)
═══════════════════════════════════════════════════════════════════════════ */

.auth-layout {
  display: flex;
  min-height: 100vh;
}

.auth-layout__panel--brand {
  display: none;
  flex: 0 0 45%;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.auth-layout__panel--form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  padding: var(--space-12) var(--space-8);
}

.auth-layout__brand-content {
  position: relative;
  z-index: 1;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.auth-layout__brand-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: var(--space-8);
}

.auth-layout__brand-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-3);
}

.auth-layout__brand-subtitle {
  font-size: var(--text-base);
  color: var(--overlay-white-60);
  line-height: var(--line-height-relaxed);
  max-width: 320px;
}

.auth-layout__brand-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(192, 138, 14, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(192, 138, 14, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.auth-layout__quote-carousel {
  margin-top: var(--space-12);
  min-height: var(--space-16);
}

.auth-layout__quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  text-align: center;
  animation: fadeInUp var(--transition-slow) both;
}

.auth-layout__brand-quote {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-accent);
  text-align: left;
}

.auth-layout__brand-quote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.auth-layout__constitutions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.auth-layout__mobile-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-layout__mobile-lodge-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .auth-layout__mobile-logo {
    display: none;
  }
}

.auth-layout__form-inner {
  width: 100%;
  max-width: 420px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - SIDEBAR
═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .auth-layout__panel--brand {
    display: flex;
  }

  .topbar__menu-btn {
    display: none;
  }
}

@media (max-width: 1023px) {
  .app-shell {
    margin-left: 0;
  }

  .app-shell--collapsed {
    margin-left: 0;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar--mobile-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
  }

  .topbar__menu-btn {
    display: flex;
  }
}

@media (max-width: 767px) {
  .main-content {
    padding: var(--space-6) var(--space-4);
  }

  .topbar {
    padding: 0 var(--space-4);
  }

  .auth-layout__panel--form {
    padding: var(--space-8) var(--space-4);
  }
}