/* ============================================================
   翠墨 Jade-Ink —— 雨花石商城后台主题
   暗墨绿「⌐ 形」框（顶栏 + 侧栏）+ 米纸内容区 + 翡翠绿利落点缀。
   一套样式同时服务 管理后台 / 店铺后台 两个子域。
   设计语言：暗部沉稳、亮部通透、强调色克制锐利、东方器物感。
   ============================================================ */

:root {
  /* —— 暗部：顶栏 / 侧栏 —— */
  --ink:        #14241e;   /* 深墨绿黑 */
  --ink-top:    #1c2e27;   /* 暗部渐变高处 */
  --ink-raise:  #213830;   /* 暗部 hover 抬升 */
  --ink-line:   rgba(255, 255, 255, .065);
  --ink-text:   #c1cdc6;   /* 暗部主文字 */
  --ink-bright: #ecf1ee;   /* 暗部高亮文字 */
  --ink-dim:    #6f817a;   /* 暗部次级 / 分组 */

  /* —— 亮部：内容区 —— */
  --paper:      #f3f2ec;   /* 米纸白 */
  --card:       #ffffff;
  --line:       #e5e4da;   /* 纸面 hairline */
  --line-soft:  #efeee7;
  --text:       #1b231f;   /* 主文字（带微绿底） */
  --text-2:     #586159;   /* 次文字 */
  --text-3:     #97a09a;   /* 淡文字 */

  /* —— 翡翠强调色 —— */
  --jade:        #0f7a56;
  --jade-deep:   #0a5d40;
  --jade-bright: #49bd8d;  /* 暗部上的翡翠高亮 */
  --jade-wash:   #eaf2ed;  /* 纸面上的极浅翡翠底 */

  --radius:    8px;
  --radius-sm: 5px;
  --shadow-card: 0 1px 2px rgba(20, 36, 30, .05), 0 8px 22px -10px rgba(20, 36, 30, .13);
  --shadow-pop:  0 18px 50px -12px rgba(10, 20, 16, .36);

  /* —— Bootstrap 5 变量覆盖 —— */
  --bs-primary:                  #0f7a56;
  --bs-primary-rgb:              15, 122, 86;
  --bs-link-color:               #0f7a56;
  --bs-link-color-rgb:           15, 122, 86;
  --bs-link-hover-color:         #0a5d40;
  --bs-body-bg:                  #f3f2ec;
  --bs-body-bg-rgb:              243, 242, 236;
  --bs-body-color:               #1b231f;
  --bs-body-color-rgb:           27, 35, 31;
  --bs-emphasis-color:           #1b231f;
  --bs-secondary-color:          #586159;
  --bs-tertiary-color:           #97a09a;
  --bs-tertiary-bg:              #f3f2ec;
  --bs-tertiary-bg-rgb:          243, 242, 236;
  --bs-border-color:             #e5e4da;
  --bs-border-color-translucent: rgba(20, 36, 30, .1);
  --bs-table-hover-bg:           #eaf2ed;
  --bs-card-bg:                  #ffffff;
  --bs-card-border-color:        #e5e4da;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  background-color: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .008em;
}

::selection { background: rgba(15, 122, 86, .17); }

/* 全局细滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d3c9; border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #bdbcb1; }
::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------
   顶栏 navbar —— 暗墨绿，与侧栏连成「⌐」形暗框
   ---------------------------------------------------------------- */
.navbar.bg-dark {
  background: linear-gradient(180deg, var(--ink-top), var(--ink)) !important;
  border-bottom: 1px solid var(--ink-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-bright);
  font-size: 15px;
  letter-spacing: .04em;
}
/* 翡翠「石」标记 —— 旋转方块，暗示一枚雨花石 */
.navbar .navbar-brand::before {
  content: "";
  width: 11px; height: 11px;
  background: var(--jade-bright);
  border-radius: 2.5px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(73, 189, 141, .16);
}
.navbar .btn-link { color: rgba(255, 255, 255, .82) !important; }
.navbar .btn-link:hover { color: #fff !important; }
.navbar .dropdown-toggle { letter-spacing: .02em; }

/* ----------------------------------------------------------------
   外壳 + 侧栏
   ---------------------------------------------------------------- */
#app-shell { min-height: calc(100vh - 56px); }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 56px;
  min-height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--ink-top) 0%, var(--ink) 240px);
  background-color: var(--ink);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .09); border: 2px solid transparent; background-clip: padding-box; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------
   多级菜单
   ---------------------------------------------------------------- */
.menu-list { padding: 12px 10px 24px; }

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 1px 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-text);
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .14s ease, color .14s ease;
}
.menu-item:hover { background: var(--ink-raise); color: var(--ink-bright); }

/* 当前页：翡翠点缀 —— 左侧竖条 + 翠绿底 + 翠绿字 */
.menu-item.active {
  background: rgba(73, 189, 141, .16);
  color: var(--jade-bright);
  font-weight: 600;
}
.menu-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  margin-top: -9px;
  background: var(--jade-bright);
  border-radius: 0 3px 3px 0;
}

/* 已展开的父级（当前页祖先）—— 文字提亮 */
.menu-item.has-children.expanded { color: var(--ink-bright); }

.menu-item.disabled,
.menu-item.disabled:hover {
  color: var(--ink-dim);
  background: transparent;
  cursor: not-allowed;
}

/* 层级缩进 */
.menu-item.level-2          { padding-left: 30px; font-size: 13px; color: #aab6af; }
.menu-item.level-2:hover    { color: var(--ink-bright); }
.sub-menu .sub-menu .menu-item { padding-left: 44px; font-size: 12.5px; }

.menu-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 展开箭头 */
.menu-item .arrow {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--ink-dim);
  transition: transform .18s ease;
}
.menu-item.has-children.expanded .arrow { transform: rotate(90deg); color: var(--jade-bright); }

/* 子菜单 + 层级引导线 */
.sub-menu { display: none; position: relative; margin: 1px 0 3px; }
.sub-menu.expanded { display: block; }
.sub-menu::before {
  content: "";
  position: absolute;
  left: 19px; top: 2px; bottom: 6px;
  width: 1px;
  background: var(--ink-line);
}

/* ----------------------------------------------------------------
   主内容区 —— 米纸 + 极淡翡翠氛围光，载入轻微上浮
   ---------------------------------------------------------------- */
#main-content {
  position: relative;
  background:
    radial-gradient(90% 46% at 88% 0%, rgba(73, 189, 141, .055), transparent 60%);
}
#main-content > * { animation: yw-rise .5s cubic-bezier(.16, .8, .3, 1) both; }
#main-content > *:nth-child(1) { animation-delay: .02s; }
#main-content > *:nth-child(2) { animation-delay: .07s; }
#main-content > *:nth-child(3) { animation-delay: .12s; }
#main-content > *:nth-child(4) { animation-delay: .17s; }
#main-content > *:nth-child(n+5) { animation-delay: .22s; }
@keyframes yw-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 页头标题 + 面包屑 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: -.01em; color: var(--text); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-3); font-size: 12px; letter-spacing: .02em; }
.breadcrumb-item.active { color: var(--text-3); }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--jade); }

/* ----------------------------------------------------------------
   卡片 / 面板
   ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card.shadow-sm,
.shadow-sm { box-shadow: var(--shadow-card) !important; }

.table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 控制台数字卡：hover 微浮 + 顶部翡翠线滑入 */
.card.h-100 {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card.h-100::after {
  content: "";
  position: absolute;
  left: 0; top: 0; height: 2px; width: 100%;
  background: var(--jade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.card.h-100:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(20,36,30,.05), 0 16px 32px -14px rgba(20,36,30,.22) !important; }
.card.h-100:hover::after { transform: scaleX(1); }
/* 控制台大数字：等宽、近黑、紧排 —— 仪器读数感 */
.card .display-6 {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 2.15rem;
  letter-spacing: -.02em;
  color: var(--text);
}

/* ----------------------------------------------------------------
   表格
   ---------------------------------------------------------------- */
.table-card .table { margin-bottom: 0; }
.table {
  --bs-table-bg: transparent;
  color: var(--text);
}
.table-card thead th {
  background: #faf9f4;
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-3);
  white-space: nowrap;
}
.table-card tbody td {
  padding: 12px 14px;
  border-bottom-color: var(--line-soft);
  vertical-align: middle;
}
.table-card tbody tr:last-child td { border-bottom: 0; }
/* 行 hover 翡翠淡底通过 --bs-table-hover-bg 生效 */
.table-card tbody td .link-primary { font-weight: 500; }

/* ----------------------------------------------------------------
   徽章 —— 柔和淡底款（覆盖 Bootstrap text-bg-*）
   ---------------------------------------------------------------- */
.badge {
  padding: .34em .66em;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.badge.text-bg-success   { background: #e7f2ea !important; color: #1c6f43 !important; border-color: #d3e7da; }
.badge.text-bg-warning   { background: #f7eed6 !important; color: #8a6206 !important; border-color: #ecddb3; }
.badge.text-bg-danger    { background: #f7e6e2 !important; color: #ab3525 !important; border-color: #ecd2cb; }
.badge.text-bg-info      { background: #e3eef2 !important; color: #30627d !important; border-color: #cfe1e8; }
.badge.text-bg-primary   { background: var(--jade-wash) !important; color: var(--jade-deep) !important; border-color: #d4e7dd; }
.badge.text-bg-secondary { background: #eae9e2 !important; color: #646d66 !important; border-color: #deded5; }

/* ----------------------------------------------------------------
   按钮
   ---------------------------------------------------------------- */
.btn { font-weight: 500; letter-spacing: .02em; border-radius: var(--radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--jade);
  --bs-btn-border-color: var(--jade);
  --bs-btn-hover-bg: var(--jade-deep);
  --bs-btn-hover-border-color: var(--jade-deep);
  --bs-btn-active-bg: var(--jade-deep);
  --bs-btn-active-border-color: var(--jade-deep);
  --bs-btn-disabled-bg: var(--jade);
  --bs-btn-disabled-border-color: var(--jade);
  box-shadow: 0 2px 8px -2px rgba(15, 122, 86, .4);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-2);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: #ecebe4;
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: #d8d7cd;
  --bs-btn-active-bg: #e4e3db;
  --bs-btn-active-color: var(--text);
  --bs-btn-active-border-color: #d8d7cd;
}
.link-primary { color: var(--jade) !important; }
.link-primary:hover { color: var(--jade-deep) !important; }
.link-secondary { color: var(--text-2) !important; }

/* ----------------------------------------------------------------
   表单
   ---------------------------------------------------------------- */
.form-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.form-control, .form-select {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background-color: var(--card);
}
.form-control::placeholder { color: #b6bdb7; }
.form-control:focus, .form-select:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(15, 122, 86, .13);
}
.form-control-sm, .form-select-sm { border-radius: var(--radius-sm); }
.form-check-input { border-color: #cfcec3; }
.form-check-input:checked { background-color: var(--jade); border-color: var(--jade); }
.form-check-input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(15, 122, 86, .13); }
.form-text-error { color: #b23a29; font-size: 12px; min-height: 18px; }
.form-text { color: var(--text-3); font-size: 12px; }

/* ----------------------------------------------------------------
   内容块编辑器
   ---------------------------------------------------------------- */
.block-item.card { border-color: var(--line); border-radius: var(--radius-sm); }
.block-item .card-body { background: #faf9f4; border-radius: var(--radius-sm); }

.upload-card-field {
  display: flex;
  align-items: flex-start;
}

.upload-card {
  display: block;
  width: 120px;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7f6f0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.upload-card:hover {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(15, 122, 86, .1);
}

.upload-card > div,
.upload-card-empty,
.upload-card-filled {
  width: 100%;
  height: 100%;
}

.upload-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}

.upload-card-plus {
  font-size: 28px;
  line-height: 1;
}

.upload-card-text {
  margin-top: 6px;
  font-size: 12px;
}

.upload-card-filled {
  position: relative;
  background: #f7f6f0;
}

.upload-card-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-card-block {
  margin-top: 6px;
}

/* 多图上传 */
.multi-upload-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.multi-upload-list {
  display: contents;
}

.multi-upload-item {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.multi-upload-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.multi-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multi-upload-remove:hover {
  background: rgba(220, 53, 69, .85);
}

.upload-card-add {
  display: flex;
  align-items: stretch;
}

.upload-card-add .upload-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------------
   分页
   ---------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--text-2);
  --bs-pagination-bg: var(--card);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--jade-deep);
  --bs-pagination-hover-bg: var(--jade-wash);
  --bs-pagination-hover-border-color: #d4e7dd;
  --bs-pagination-active-bg: var(--jade);
  --bs-pagination-active-border-color: var(--jade);
  --bs-pagination-disabled-color: var(--text-3);
  --bs-pagination-disabled-bg: var(--card);
  --bs-pagination-disabled-border-color: var(--line);
}

/* ----------------------------------------------------------------
   标签 chip / 弹层 / 提示
   ---------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 2px 0;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .03em;
  background: var(--jade-wash);
  color: var(--jade-deep);
  border: 1px solid #d8e7df;
}

.modal-content {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--line-soft); }
.modal-title { font-size: 15px; font-weight: 600; }

.dropdown-menu {
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--radius-sm);
  --bs-dropdown-link-active-bg: var(--jade);
  box-shadow: var(--shadow-pop);
}

.alert-light {
  background: var(--jade-wash);
  border-color: #d8e7df;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}

.toast.text-bg-dark { background: var(--ink) !important; }

/* ----------------------------------------------------------------
   登录页验证码
   ---------------------------------------------------------------- */
#captcha-btn {
  border-left: 0;
  overflow: hidden;
  cursor: pointer;
  background: #f7f6f0;
}
#captcha-btn:hover {
  border-color: var(--line);
  background: #efeee7;
}
#captcha-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}
#captcha-btn img {
  display: block;
}

/* ----------------------------------------------------------------
   登录页 —— 暗墨绿氛围场，白卡浮起
   ---------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(73, 189, 141, .14), transparent 70%),
    radial-gradient(70% 60% at 90% 100%, rgba(15, 122, 86, .16), transparent 70%),
    linear-gradient(165deg, var(--ink-top), var(--ink) 70%);
}
.auth-card {
  width: 372px;
  max-width: 90vw;
  position: relative;
  background: var(--card);
  padding: 38px 34px 32px;
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}
/* 卡片顶部翡翠「石」标记 */
.auth-card::before {
  content: "";
  position: absolute;
  left: 34px; top: -9px;
  width: 18px; height: 18px;
  background: var(--jade);
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 0 6px 16px -4px rgba(15, 122, 86, .6);
}
.auth-card h1 {
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--text);
}

/* ----------------------------------------------------------------
   侧栏移动端抽屉
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 14px 0 40px rgba(0, 0, 0, .35);
  }
  .sidebar.open { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #main-content > * { animation: none; }
  .card.h-100:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}