/**
 * Authentication State Management - CSS-First Approach
 * 認證狀態管理 - CSS 優先方案
 * 
 * 遵循 W3C 標準和 Google/GitHub 最佳實踐
 * 使用 body class 控制全站登入狀態
 */

/* ============================================
   預設狀態: 未登入
   ============================================ */

/* 顯示登入/註冊按鈕 */
.logged-out-item {
  display: list-item !important;
}

/* 隱藏會員相關元素 */
.logged-in-item {
  display: none !important;
}

/* ============================================
   已登入狀態: body.authenticated
   ============================================ */

body.authenticated .logged-out-item {
  display: none !important;
}

body.authenticated .logged-in-item {
  display: list-item !important;
}

/* 手機版會員區域使用 block 顯示 */
body.authenticated .logged-in-item.mobile-member-section {
  display: block !important;
}

/* 桌面版下拉選單 */
body.authenticated .logged-in-item.dropdown {
  display: list-item !important;
}

/* ============================================
   Manus 菜單登入狀態控制
   ============================================ */

/* 預設：未登入時顯示登入區域 */
.manus-logged-out-only {
  display: block !important;
}

/* 預設：未登入時隱藏會員區域 */
.manus-logged-in-only {
  display: none !important;
}

/* 已登入：隱藏登入區域 */
body.authenticated .manus-logged-out-only,
body.authenticated .manus-login-section.manus-logged-out-only,
body.authenticated #manusLoginSection {
  display: none !important;
}

/* 已登入：顯示會員區域 */
body.authenticated .manus-logged-in-only {
  display: block !important;
}

/* ============================================
   特殊元素處理
   ============================================ */

/* 積分使用區域 (在預約頁面) */
#pointsUsageSection {
  display: none;
}

body.authenticated #pointsUsageSection.has-points {
  display: block;
}

/* ============================================
   響應式設計
   ============================================ */

/* 桌面版專用元素 */
@media (min-width: 769px) {
  .desktop-only {
    display: list-item;
  }
  
  body.authenticated .desktop-only.logged-in-item {
    display: list-item;
  }
}

/* 手機版隱藏桌面專用元素 */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

/* 桌面版隱藏手機專用元素（即使已登入）*/
@media (min-width: 1001px) {
  body.authenticated .logged-in-item.mobile-only,
  body.authenticated .logged-in-item.mobile-member-info {
    display: none !important;
  }
}

/* ============================================
   過渡動畫 (可選)
   ============================================ */

/* 移除 transition，因為 display: none 無法做動畫 */
/*
.logged-in-item,
.logged-out-item,
.manus-logged-in-only,
.manus-logged-out-only {
  transition: opacity 0.2s ease-in-out;
}
*/

/* ============================================
   調試模式 (開發用)
   ============================================ */

/* 取消註解以顯示所有元素的邊框,方便調試 */
/*
body.debug-auth .logged-in-item {
  outline: 2px solid green;
}

body.debug-auth .logged-out-item {
  outline: 2px solid red;
}

body.debug-auth .manus-logged-in-only {
  outline: 2px solid blue;
}

body.debug-auth .manus-logged-out-only {
  outline: 2px solid orange;
}
*/