/* ============================================================
   麓小鸣旅拍 · 管理后台「专业润色」层（UI Designer · 2026-08-13）
   ------------------------------------------------------------
   本文件在 admin-content.css 之后加载，做三件事且不改动任何功能代码：
   1) 把内容屏残留的冷灰蓝（--content-* / --cp-*）统一收口到暖胶片品牌中性色；
   2) 打磨壳子（侧边栏 / 顶栏 / 菜单激活态 / 滚动条 / 焦点）；
   3) 全局细节：主按钮品牌渐变、空状态、卡片悬浮、动效克制。
   仅用后加载顺序覆盖，组件无需改动。
   ============================================================ */

:root {
  /* 内容屏中性色收口为暖色（原 #0f172a/#64748b/#e2e8f0 等冷灰 → 暖墨/暖灰） */
  --content-ink:   #2A211B;
  --content-muted: #7C6A5E;
  --content-line:  #EFE6DD;
  --content-panel: #FFFFFF;
  --content-soft:  #FBF4EC;

  --cp-ink:   #2A211B;
  --cp-muted: #7C6A5E;
  --cp-line:  #EFE6DD;
  --cp-line-soft: #F3E9DF;
  --cp-soft:  #FBF4EC;
  --cp-panel: #FFFFFF;
}

/* ---------- 壳子：侧边栏 ---------- */
.admin-shell .lxm-sidebar {
  background: linear-gradient(180deg, #2A211B 0%, #211A15 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 2px 0 18px rgba(42, 33, 27, .18);
}

.admin-shell .lxm-brand .brand-mark {
  background: linear-gradient(135deg, var(--lxm-brand-strong), var(--lxm-brand-vivid));
  color: #fff;
  box-shadow: 0 4px 12px rgba(238, 44, 44, .35);
}

.admin-shell .lxm-brand .brand-copy strong { color: #FFF7EF; letter-spacing: .5px; }
.admin-shell .lxm-brand .brand-copy span { color: rgba(255, 247, 239, .6); }

.admin-shell .menu-group strong { color: rgba(255, 247, 239, .82); }
.admin-shell .menu-group span { color: rgba(255, 247, 239, .42); }

/* 菜单分组小标题（内容资产 / 商品货架） */
.admin-shell .content-menu-subtitle {
  color: rgba(255, 247, 239, .72);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.admin-shell .content-menu-subtitle .sub-dot {
  background: var(--lxm-brand-vivid);
}
.admin-shell .content-menu-subtitle em { color: rgba(255, 247, 239, .4); }

/* 菜单项 */
.admin-shell .menu-btn {
  color: rgba(255, 247, 239, .78);
  border-radius: 10px;
  transition: background var(--lxm-t-fast), color var(--lxm-t-fast), transform var(--lxm-t-fast);
}
.admin-shell .menu-btn:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.admin-shell .menu-btn.active {
  background: linear-gradient(90deg, rgba(238, 44, 44, .22), rgba(255, 141, 82, .10));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--lxm-brand-vivid);
}
.admin-shell .menu-btn .menu-mini {
  background: rgba(255, 255, 255, .08);
  color: #FFD36A;
}
.admin-shell .menu-btn.active .menu-mini {
  background: rgba(255, 211, 106, .18);
  color: #FFD36A;
}

/* 收起态的切换按钮更精致 */
.admin-shell .sidebar-toggle {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #FFF7EF;
}

/* ---------- 壳子：顶栏 ---------- */
.admin-shell .lxm-topbar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--lxm-line);
  backdrop-filter: blur(10px);
}
.admin-shell .lxm-topbar .role-pill {
  background: var(--lxm-brand-soft);
  color: var(--lxm-brand-strong);
  border: 1px solid var(--lxm-brand-soft-2);
}

/* ---------- 全局：滚动条（暖色克制） ---------- */
* { scrollbar-width: thin; scrollbar-color: #E2D5C8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #E2D5C8;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #D8C6B4; background-clip: content-box; }

/* ---------- 全局：键盘焦点可见（无障碍） ---------- */
:focus-visible {
  outline: 2px solid var(--lxm-brand-vivid);
  outline-offset: 2px;
  border-radius: 6px;
}
.el-input__wrapper:focus-within,
.menu-btn:focus-visible { outline: 2px solid var(--lxm-brand-vivid); outline-offset: 2px; }

::selection { background: var(--lxm-brand-soft); color: var(--lxm-brand-strong); }

/* 卡片悬浮统一暖光 */
.page-route-album .album-card:hover,
.page-route-package .package-product-card:hover,
.page-route-peripherals .peripheral-card:hover,
.page-route-addon-service .addon-card:hover {
  border-color: var(--lxm-brand-soft-2);
  box-shadow: 0 14px 32px rgba(217, 83, 30, .12);
}

/* ---------- 空状态更温柔 ---------- */
.empty-state, .empty-mini {
  background: var(--lxm-cream);
  border: 1px dashed var(--lxm-line-strong);
  color: var(--lxm-muted);
}
.empty-state strong { color: var(--lxm-ink); }

/* ---------- 动效克制（尊重减少动效偏好） ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 移动端：图标栏触控更友好 ---------- */
@media (max-width: 820px) {
  .admin-shell .lxm-sidebar {
    background: linear-gradient(180deg, #2A211B 0%, #211A15 100%);
  }
  .admin-shell .lxm-sidebar .menu-btn {
    min-height: 40px;
  }
  .admin-shell .lxm-sidebar .menu-mini {
    background: rgba(255, 255, 255, .08);
  }
  .lxm-content { padding-top: 14px; }
}