/* ============================================================================
 * common/widget/21-user-side-menu.css — 會員中心側選單基底
 * ============================================================================
 *   載入序：21 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *
 *   [來源與搬移理由] 本區塊原寄居在 17-sidebar-product.css（商品側欄 widget）內，
 *   但 .user-side-menu 是**會員中心的側選單**（訂單列表／訂單詳情／個人資料／收藏清單
 *   四支 blade 透過 components/web/user-side-menu.blade.php 輸出），與商品側欄 widget
 *   無關，僅因舊單檔（default.css cluster A）順序落在該處。issue #694 抽出獨立成檔。
 *
 *   [載入序無相依] common/widget/ 內其餘各檔皆無 .user-side-menu 選擇器，
 *   自 17 移到 21 不改變任何生效值（已實測）。
 *
 *   [與 pages/user.css 的關係] 本元件另有一組規則位於 common/pages/user.css，
 *   該層載入序在 common/widget/ 之後，衝突時由它勝出——本檔只是基底。
 *   是否進一步把基底也遷入 pages/user.css 尚待評估：需先確認 route_page_map 對
 *   orders／wishList／profile 等路由都對映到 user page key，否則未對映的路由會整組
 *   失去基底樣式。本次不動。
 *
 *   [主題覆寫] 3ffood／dgfactor／kgtwbeef／shopLinerp 各自的 base／sidebar／widget／
 *   pages 皆有品牌覆寫，載入序都在本檔之後，不受本次搬移影響。
 *
 *   [好覆蓋，issue #874] 全部可調值（底色與主色、內距、標題副標字級配色、項目間距、
 *   連結內距圓角配色、圖示與文字字級、hover 與目前項的配色、分隔線）改由
 *   .user-side-menu（0,1,0）上的自訂屬性承載。
 *   .user-side-menu__item a（0,1,1）等含元素選擇器的規則刻意不降權，
 *   改以變數承載後主題寫 .user-side-menu { --user-menu-accent: #123456 } 即可換色。
 * ==========================================================================*/

.user-side-menu {
  --user-menu-bg: #ffffff; /* 側選單底色 */
  --user-menu-accent: #2C2C2C; /* 主色（左側線條與目前項底色） */
  --user-menu-border-w: 4px; /* 左側線條粗細 */
  --user-menu-pad: 24px 20px; /* 側選單內距 */
  --user-menu-header-gap: 16px; /* 標頭下方留白 */
  --user-menu-header-line: #f3f4f6; /* 標頭分隔線顏色 */
  --user-menu-title-font: 18px; /* 標題字級 */
  --user-menu-title-color: #111111; /* 標題文字色 */
  --user-menu-subtitle-font: 12px; /* 副標字級 */
  --user-menu-subtitle-color: #9ca3af; /* 副標文字色 */
  --user-menu-item-gap: 8px; /* 項目間距 */
  --user-menu-link-pad: 12px 14px; /* 連結內距 */
  --user-menu-link-radius: 6px; /* 連結圓角 */
  --user-menu-link-color: #111111; /* 連結文字色 */
  --user-menu-link-gap: 10px; /* 連結內元素間距 */
  --user-menu-icon-size: 20px; /* 圖示欄寬 */
  --user-menu-icon-font: 16px; /* 圖示字級 */
  --user-menu-icon-color: #c1c4cc; /* 圖示顏色 */
  --user-menu-text-font: 14px; /* 項目文字字級 */
  --user-menu-arrow-font: 12px; /* 箭頭字級 */
  --user-menu-arrow-color: #ffffff; /* 箭頭顏色 */
  --user-menu-hover-bg: #f4f4f4; /* 滑過底色 */
  --user-menu-hover-icon-color: #111111; /* 滑過圖示色 */
  --user-menu-active-color: #ffffff; /* 目前項文字色 */
  --user-menu-divider-color: #e5e7eb; /* 分隔線顏色 */
  --user-menu-divider-margin: 12px 0; /* 分隔線外距 */
  background: var(--user-menu-bg, #ffffff);
  border-left: var(--user-menu-border-w, 4px) solid var(--user-menu-accent, #2C2C2C);
  padding: var(--user-menu-pad, 24px 20px);
}

.user-side-menu__header {
  padding-bottom: var(--user-menu-header-gap, 16px);
  margin-bottom: var(--user-menu-header-gap, 16px);
  border-bottom: 1px solid var(--user-menu-header-line, #f3f4f6);
}

.user-side-menu__title {
  margin: 0;
  font-size: var(--user-menu-title-font, 18px);
  font-weight: 800;
  color: var(--user-menu-title-color, #111111);
}

.user-side-menu__subtitle {
  margin: 6px 0 0 0;
  font-size: var(--user-menu-subtitle-font, 12px);
  font-weight: 600;
  color: var(--user-menu-subtitle-color, #9ca3af);
}

.user-side-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-side-menu__item {
  margin-bottom: var(--user-menu-item-gap, 8px);
}

.user-side-menu__item:last-child {
  margin-bottom: 0;
}

.user-side-menu__item a {
  display: flex;
  align-items: center;
  gap: var(--user-menu-link-gap, 10px);
  padding: var(--user-menu-link-pad, 12px 14px);
  border-radius: var(--user-menu-link-radius, 6px);
  text-decoration: none;
  color: var(--user-menu-link-color, #111111);
  border: 1px solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.user-side-menu__icon {
  width: var(--user-menu-icon-size, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--user-menu-icon-color, #c1c4cc);
  font-size: var(--user-menu-icon-font, 16px);
}

.user-side-menu__text {
  flex: 1;
  font-size: var(--user-menu-text-font, 14px);
  font-weight: 600;
}

.user-side-menu__arrow {
  margin-left: auto;
  font-size: var(--user-menu-arrow-font, 12px);
  color: var(--user-menu-arrow-color, #ffffff);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.user-side-menu__item a:hover {
  background: var(--user-menu-hover-bg, #f4f4f4);
  border-color: var(--user-menu-hover-bg, #f4f4f4);
}

.user-side-menu__item a:hover .user-side-menu__icon {
  color: var(--user-menu-hover-icon-color, #111111);
}

.user-side-menu__item.is-active a {
  background: var(--user-menu-accent, #2C2C2C);
  color: var(--user-menu-active-color, #ffffff);
}

.user-side-menu__item.is-active .user-side-menu__icon {
  color: var(--user-menu-active-color, #ffffff);
}

.user-side-menu__item.is-active .user-side-menu__arrow {
  opacity: 1;
  transform: translateX(0);
}

.user-side-menu__item.is-active a:hover {
  background: var(--user-menu-accent, #2C2C2C);
  border-color: var(--user-menu-accent, #2C2C2C);
}

.user-side-menu__divider {
  height: 1px;
  background: var(--user-menu-divider-color, #e5e7eb);
  margin: var(--user-menu-divider-margin, 12px 0);
}