/* Global Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /*
   * Prevent layout shift when routes toggle vertical scrollbar.
   * - scrollbar-gutter: modern, reserves gutter only when needed (stable).
   * - overflow-y: scroll: fallback for older Chromium / embedded webviews.
   */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  width: 100%;
  min-height: 100%;
}
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100vh;
  color: #2c3e50;
  background: #f5f7fb;
}
@keyframes gradientShift {
0% { background-position: 0% 50%;
}
50% { background-position: 100% 50%;
}
100% { background-position: 0% 50%;
}
}

/* --- Element UI Beautification --- */

/* 1. Buttons (Glass) */
.el-button, .el-button--mini, .el-button--small, .el-button--medium {
  font-weight: 500;
  border-radius: var(--radius-btn);
  transition: box-shadow var(--motion-base) var(--motion-ease),
              background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease) !important;
  text-decoration: none;
}
.el-button:not(.el-button--text):hover, .el-button:not(.el-button--text):focus {
  box-shadow: var(--box-shadow-hover) !important;
  z-index: 1;
}
.el-button:active {
  box-shadow: var(--box-shadow-base) !important;
}
/* Text Button Special Handling */
.el-button--text {
  padding-bottom: 2px; /* Ensure space for potential underline if needed, but remove artifacts */
}
.el-button--text:hover {
  background-color: transparent;
  text-decoration: none; /* No underline */
}

/* Button variants beautification */
.el-button--primary { background: linear-gradient(135deg, #409EFF, #3a8ee6); border: none; color: #fff;
}
.el-button--primary:hover { background: linear-gradient(135deg, #66b1ff, #409EFF);
}
.el-button--success { background: linear-gradient(135deg, #67C23A, #5daf34); border: none; color: #fff;
}
.el-button--success:hover { background: linear-gradient(135deg, #85ce61, #67C23A);
}
.el-button--warning { background: linear-gradient(135deg, #E6A23C, #cf9236); border: none; color: #fff;
}
.el-button--warning:hover { background: linear-gradient(135deg, #ebb563, #E6A23C);
}
.el-button--danger { background: linear-gradient(135deg, #F56C6C, #dd6161); border: none; color: #fff;
}
.el-button--danger:hover { background: linear-gradient(135deg, #f78989, #F56C6C);
}

/* 2. Cards */
.el-card {
  border: 1px solid #ebeef5;
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #fff;
  margin-bottom: 24px;
}
.el-card:hover {
  box-shadow: var(--box-shadow-hover) !important;
}
.el-card__header {
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding: 18px 24px;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}
.el-card__body {
  padding: 24px;
}

/* 3. Tables */
.el-table {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--motion-base) var(--motion-ease) !important;
  background: #fff;
  border: 1px solid #ebeef5;
}
.el-table:hover {
  box-shadow: var(--box-shadow-hover) !important;
}
.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 600;
  height: 50px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f0f9eb !important;
}
.el-table td, .el-table th {
  padding: 12px 0;
}

/* 4. Inputs & Forms */
.el-input__inner, .el-textarea__inner, .el-select .el-input__inner {
  border-radius: var(--radius-sm);
  /* transition: all 0.3s; */
  transition: border-color var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease),
              background-color var(--motion-base) var(--motion-ease) !important;
  border: 1px solid #dcdfe6;
}
.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--primary-color);
  /* box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15); */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.18) !important;
}
.el-form-item {
  margin-bottom: 16px;
}
/* revert inputs to default background */
.el-input__inner, .el-textarea__inner { background: #fff;
}
.el-input-group__append { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
}
.el-input-group__prepend { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm);
}
.el-button-group>.el-button:first-child { border-top-left-radius: var(--radius-btn); border-bottom-left-radius: var(--radius-btn);
}
.el-button-group>.el-button:last-child { border-top-right-radius: var(--radius-btn); border-bottom-right-radius: var(--radius-btn);
}
.el-select-dropdown__item { border-radius: var(--radius-sm);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: #f5f7fa;
}

/* 5. Dialogs */
.el-dialog {
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(16,24,40,0.12);
  overflow: hidden;
}
.el-dialog__header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #ebeef5;
}
.el-dialog__body {
  padding: 18px 20px 22px;
}
.el-dialog__footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #f0f2f5;
}
.el-table .cell {
  padding: 14px 16px;
  font-size: 14px;
}

/* Table action buttons unified to mini look */
.el-table .el-button {
  padding: 6px 15px;
  font-size: 12px;
  border-radius: var(--radius-btn);
}

/* 10. Menus (hover glass tint) */
.el-submenu__title:hover, .el-menu-item:hover { background-color: #263445 !important;
}
.el-menu-item.is-active { background-color: #1f2d3d !important; border-left: none !important;
}

/* Tabs modern header */
.el-tabs--card > .el-tabs__header, .el-tabs__header {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(16,24,40,0.06);
  margin: 8px 0 12px;
}
.el-tabs__item { transition: color 0.2s ease, background-color 0.2s ease; border-radius: var(--radius-sm);
}
.el-tabs__item.is-active { font-weight: 600;
}
.el-tabs__active-bar { height: 3px; border-radius: var(--radius-sm);
}
.el-tabs__item.is-active { background-color: #f5f7fa;
}
.page-content .el-tabs { margin-top: 8px; margin-bottom: 12px;
}
.el-card__body > *:first-child { margin-top: 8px;
}

/* 6. Scrollbar Customization */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 7. Tags（避免 scale 与 transition:all 触发大面积重绘） */
.el-tag {
  border-radius: var(--radius-sm);
  border: none;
}

/* 8. Menus */
.el-menu {
  border-right: none !important;
}
.el-submenu__title:hover, .el-menu-item:hover {
  background-color: #263445 !important;
}
.el-menu-item.is-active {
  background-color: #1f2d3d !important;
  border-left: none !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.02);
}

/* 9. Pagination */
.el-pagination {
  margin-top: 20px;
  text-align: right;
  font-weight: normal;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 4px 10px rgba(64,158,255,0.3);
}

/* --- Mobile Responsive & Layout Optimization --- */
@media screen and (max-width: 768px) {
  /* 1. Container & Cards */
.page-container {
    padding: 10px !important;
}
.el-card {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
}
.el-card__body {
    padding: 12px !important;
}
  
  /* 2. Search Forms */
.search-card .el-form--inline .el-form-item {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}
.search-card .el-form--inline .el-form-item__content {
    width: 100% !important;
    display: block !important;
}
.search-card .el-input, 
  .search-card .el-select, 
  .search-card .el-date-editor {
    width: 100% !important;
}
.search-card .el-button {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
}

  /* 3. Tables */
.el-table {
    font-size: 12px !important;
}
.el-table .cell {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
  /* Force table to scroll horizontally */
.el-table__body-wrapper {
    overflow-x: auto !important;
}

  /* 4. Dialogs */
.el-dialog {
    width: 95% !important;
    margin-top: 5vh !important;
}
.el-dialog__body {
    padding: 15px !important;
    max-height: 70vh;
    overflow-y: auto;
}
  
  /* 5. Pagination */
.el-pagination {
    white-space: normal !important;
    text-align: center !important;
}
.el-pagination .el-pagination__total,
  .el-pagination .el-pagination__sizes {
    display: none !important;
}
.el-pagination .btn-prev, .el-pagination .btn-next {
    padding: 0 5px !important;
}

  /* 6. Action Buttons in Table */
.el-table .el-button {
    padding: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
    display: inline-block !important;
}
  
  /* 7. Action Card (Top Buttons) */
.action-card .el-button {
    width: 100%;
    margin-bottom: 8px;
    margin-left: 0 !important;
}
  
  /* 8. Tabs */
.custom-tabs-container {
    flex-direction: column;
    align-items: stretch;
}
.custom-tab-item {
    text-align: center;
    border-bottom: 1px solid #eee;
}
}

/* --- Sandbox Watermark --- */
.sandbox-watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  /* 单行水印：固定横向 5 列，避免最右侧出现半列截断 */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27320%27%20height%3D%27320%27%20viewBox%3D%270%200%20320%20320%27%3E%3Ctext%20x%3D%27160%27%20y%3D%27160%27%20fill%3D%27%23000%27%20font-size%3D%2726%27%20font-family%3D%27Microsoft%20YaHei%2C%20Arial%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20transform%3D%27rotate%28-25%20160%20160%29%27%3E%E6%B2%99%E7%9B%92%E7%8E%AF%E5%A2%83%20Sandbox%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: calc(100% / 5) 320px;
}


.page-header[data-v-1c6c058c] {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 0 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.header-left[data-v-1c6c058c] {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.header-right[data-v-1c6c058c] {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.header-title h2[data-v-1c6c058c] {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}


/* Global CSS for ERP System - Modern & Consistent UI */

:root {
  /* 与 Element UI 默认主色一致，主端/管理端共用 */
  --primary-color: #409EFF;
  --primary-light: #ecf5ff;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  --text-main: #111827;
  --text-regular: #374151;
  --text-secondary: #6B7280;
  --text-placeholder: #9CA3AF;
  
  --border-color-base: #D1D5DB;
  --border-color-light: #E5E7EB;
  --border-color-lighter: #F3F4F6;
  
  --bg-color-base: #F9FAFB;
  --bg-color-card: #FFFFFF;
  
  --radius-base: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  /* App.vue / 业务里常用命名别名 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-btn: 50px;
  --border-radius-base: 12px;
  --text-primary: #303133;
  --box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-slower: 420ms;
  --motion-micro: 110ms;
  /* 路由切换采用中速，避免“闪切” */
  --motion-route: 180ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
}

/* Reset and basic typography */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-main);
  background-color: var(--bg-color-base);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* 勿对表格单元格 / 卡片 / 标签做全局 transition：节点量大时易掉帧 */
.el-button,
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner,
.el-checkbox__inner,
.el-radio__inner,
.el-switch__core,
.el-menu-item,
.el-submenu__title {
  transition: background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease-smooth);
}

.el-tabs__item,
.el-pagination button,
.el-pagination .el-pager li {
  transition: background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease);
}

.el-button:not(.is-disabled):active,
.el-pagination .el-pager li:not(.active):active,
.el-menu-item:active,
.el-submenu__title:active {
  transform: translateY(1px) scale(0.998);
}

.el-card,
.el-dialog,
.el-drawer,
.el-dropdown-menu,
.el-popover {
  transition: box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease-smooth),
    opacity var(--motion-base) var(--motion-ease);
}

/* 统一“丝滑聚焦”反馈：输入、下拉、日期框焦点态更柔和 */
.el-input.is-focus .el-input__inner,
.el-select .el-input.is-focus .el-input__inner,
.el-date-editor.is-active {
  transform: translateY(-1px);
}

/* 弹层出现动效统一（覆盖 Element 默认过渡节奏） */
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active,
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active,
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active,
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
  transition: opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease-smooth) !important;
}
.dashboard-tabs .el-card {
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease) !important;
}
.dashboard-tabs .el-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Layout Containers */
.page-container {
  padding: 24px;
  background-color: var(--bg-color-base);
  min-height: calc(100vh - 64px);
}

/* 长列表页面只渲染可视区域，减少首屏与切页重排成本 */
.page-container > .el-card {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

/* Card Styling - Modern & Clean */
.el-card {
  border: 1px solid var(--border-color-light) !important;
  border-radius: var(--radius-medium) !important;
  box-shadow: var(--shadow-sm) !important;
  background-color: var(--bg-color-card);
  margin-bottom: 24px;
  overflow: visible !important;
}

.el-card__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color-light);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-main);
  background-color: #fff;
}

.el-card__body {
  padding: 24px;
}

/* 管理端与主端通用内容块宽度与排版节奏 */
.page-container,
.admin-main-body .admin-page-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* Search Card Specifics */
.search-card .el-form-item {
  margin-bottom: 12px;
  margin-right: 16px;
}

.search-card {
  margin-bottom: 16px;
}

/* Action Card Specifics */
.action-card {
  margin-bottom: 16px;
  padding: 16px 24px;
  border: none;
  background: transparent;
  box-shadow: none !important;
}
.action-card .el-card__body {
  padding: 0;
}

/* Button Styling - Modern Flat */
.el-button {
  border-radius: var(--radius-base) !important;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--border-color-base);
  box-shadow: var(--shadow-sm) !important;
  text-align: center;
  white-space: nowrap;
}

.el-button--primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.el-button--primary:hover, .el-button--primary:focus {
  background-color: #2563EB; /* Darker blue on hover */
  border-color: #2563EB;
  color: #fff;
}

.el-button--success {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.el-button--warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}

.el-button--danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}

.el-button--text {
  border: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
  color: var(--primary-color);
}
.el-button--text:hover {
  background: transparent;
  color: #2563EB;
}

/* Input & Select Styling */
.el-input__inner, .el-textarea__inner {
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--border-color-base);
  color: var(--text-main);
  height: 38px;
  line-height: 38px;
  box-shadow: var(--shadow-sm) !important;
}

.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px var(--primary-light) !important;
}

.el-input__inner::-moz-placeholder {
  color: var(--text-placeholder);
}

.el-input__inner::placeholder {
  color: var(--text-placeholder);
}

/* Table Styling - Clean Data Grid */
.el-table {
  border-radius: var(--radius-medium) !important;
  border: 1px solid var(--border-color-light);
  overflow: hidden;
}

.el-table th {
  background-color: #F3F4F6 !important; /* Light gray header */
  color: var(--text-regular);
  font-weight: 600;
  height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color-light) !important;
}

.el-table td {
  padding: 12px 0;
  color: var(--text-regular);
  border-bottom: 1px solid var(--border-color-light) !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #F9FAFB;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #F3F4F6 !important;
}

/* Pagination */
.el-pagination {
  margin-top: 24px;
  text-align: right;
  font-weight: normal;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--primary-color);
  color: #fff;
}

/* Dialog Styling - Modal */
.el-dialog {
  border-radius: var(--radius-large) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-color-light) !important;
}

/* 特定弹窗：挂到 body 后仍保持正中 */
/* :has 支持不全：用 wrapper flex + dialog margin 兜底 */
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.el-dialog__wrapper > .el-dialog {
  margin: 0 !important;
}
.el-dialog.erp-centered-dialog {
  margin: 0 !important;
  max-height: min(80vh, 860px);
  width: min(1000px, 92vw) !important;
}

.el-dialog__header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--border-color-light);
  background-color: #fff;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 24px;
}

.el-dialog__body {
  padding: 24px !important;
  color: var(--text-regular);
}

.el-dialog__footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--border-color-light);
  background-color: #F9FAFB;
  text-align: right;
}

/* Form Styling */
.el-form-item__label {
  color: var(--text-regular);
  font-weight: 500;
}

/* Status Tags/Text */
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 9999px; /* Pill shape */
  font-size: 12px;
  font-weight: 500;
  height: 24px;
}
.status-draft { background-color: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }
.status-pending { background-color: #EFF6FF; color: #3B82F6; border: 1px solid #DBEAFE; }
.status-approved { background-color: #ECFDF5; color: #10B981; border: 1px solid #D1FAE5; }
.status-rejected { background-color: #FEF2F2; color: #EF4444; border: 1px solid #FEE2E2; }

/* Custom Tabs (if used) */
.custom-tabs-container {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color-light);
}

.custom-tab-item {
  padding: 12px 24px;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  position: relative;
  transition: color 0.2s;
}

.custom-tab-item:hover {
  color: var(--primary-color);
}

.custom-tab-item.active {
  color: var(--primary-color);
}

.custom-tab-item .active-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* A Tag Styling */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}

a:hover {
  color: var(--primary-color);
}

/* Menu A Tags */
.el-menu a {
  color: inherit;
  text-decoration: none;
}

.el-menu a:hover {
  color: var(--primary-color);
}

.el-menu-item.is-active a {
  color: var(--primary-color);
  font-weight: 500;
}

/* Button A Tags */
.el-button a {
  color: inherit;
  text-decoration: none;
  display: inline;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }
  .el-card__body {
    padding: 16px;
  }
  .el-dialog {
    width: 90% !important;
    margin-top: 5vh !important;
  }
}

/* 人脸识别弹窗挂到 body，与内联 width 配合保证小屏不溢出且预览区够宽 */
@media (max-width: 540px) {
  .el-dialog.face-auth-dialog {
    width: min(420px, 94vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 路由页切换：主端 #app / Layout 的 fade-transform 与管理端 admin-page 统一时长与曲线 */
.fade-transform-enter-active,
.fade-transform-leave-active,
.admin-page-enter-active,
.admin-page-leave-active {
  transition: opacity var(--motion-route) var(--motion-ease),
    transform var(--motion-route) var(--motion-ease-smooth);
  will-change: opacity, transform;
}

.fade-transform-enter,
.admin-page-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-transform-leave-to,
.admin-page-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}