/* ============================================================
   Morandi 雅奢配色（参考 doc/styles/style-2-morandi.html）
   主色 #a89684 / 主色深 #8a7762 / 米色 #d9cfc1 / 背景 #faf6f1
   设计语言：直角 4px 圆角 / 字间距加大 / 细线分隔 / 大量留白
   ============================================================ */
:root {
  /* —— 莫兰迪自定义色板 —— */
  --morandi-primary:      #a89684;  /* 主色：暖灰驼 */
  --morandi-primary-deep: #8a7762;  /* 主色深 */
  --morandi-beige:        #d9cfc1;  /* 米色 */
  --morandi-bg:           #faf6f1;  /* 页面背景 */
  --morandi-card:         #ffffff;  /* 卡片白 */
  --morandi-text:         #2a2a2a;  /* 主文字 */
  --morandi-text-2:       #6b6357;  /* 次文字 */
  --morandi-text-3:       #b3a99a;  /* 淡文字 */
  --morandi-border:       #ece5db;  /* 浅边框 */

  /* —— Bootstrap 5 变量覆盖 —— */
  --bs-primary:                 #a89684;
  --bs-primary-rgb:             168, 150, 132;
  --bs-link-color:              #8a7762;
  --bs-link-color-rgb:          138, 119, 98;
  --bs-link-hover-color:        #6b5a48;
  --bs-link-hover-color-rgb:    107, 90, 72;

  --bs-body-bg:                 #faf6f1;
  --bs-body-bg-rgb:             250, 246, 241;
  --bs-body-color:              #2a2a2a;
  --bs-body-color-rgb:          42, 42, 42;
  --bs-emphasis-color:          #2a2a2a;
  --bs-secondary-color:         #6b6357;
  --bs-tertiary-color:          #b3a99a;
  --bs-tertiary-bg:             #faf6f1;
  --bs-border-color:            #ece5db;
  --bs-border-color-translucent: rgba(168, 150, 132, .15);
}

/* navbar 不用纯黑，改用莫兰迪主色深 */
.navbar.bg-dark { background-color: var(--morandi-primary-deep) !important; }

/* primary 按钮微调（覆盖 hover 时的深度） */
.btn-primary {
  --bs-btn-bg:                  var(--morandi-primary);
  --bs-btn-border-color:        var(--morandi-primary);
  --bs-btn-hover-bg:            var(--morandi-primary-deep);
  --bs-btn-hover-border-color:  var(--morandi-primary-deep);
  --bs-btn-active-bg:           var(--morandi-primary-deep);
  --bs-btn-active-border-color: var(--morandi-primary-deep);
}

/* form-control focus ring 用主色 */
.form-control:focus,
.form-check-input:focus {
  border-color: var(--morandi-primary);
  box-shadow: 0 0 0 .2rem rgba(168, 150, 132, .2);
}
.form-check-input:checked {
  background-color: var(--morandi-primary);
  border-color: var(--morandi-primary);
}

/* ----- shell ----- */
#app-shell {
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  min-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  align-self: flex-start;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  background: var(--morandi-card);
  border-right: 1px solid var(--morandi-border);
}

.sidebar .nav-link {
  /* old: color: #495057; */
  color: var(--morandi-text-2);
  border-radius: 0;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: .3px;
}
.sidebar .nav-link:hover {
  /* old: background: #f1f3f6; */
  background: var(--morandi-bg);
}
.sidebar .nav-link.active {
  /* old: background: #e7f1ff; color: #0d6efd; border-right: 3px solid #0d6efd; */
  background: var(--morandi-bg);
  color: var(--morandi-primary-deep);
  font-weight: 600;
  border-right: 3px solid var(--morandi-primary);
}
.sidebar .nav-section {
  font-size: 11px;
  text-transform: uppercase;
  /* old: color: #6c757d; letter-spacing: .5px; */
  color: var(--morandi-text-3);
  padding: 12px 16px 4px;
  letter-spacing: 1.5px;
}

/* ----- 新版分组菜单（goods 模块用） ----- */
.sidebar-toggle-bar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px;
  border-bottom: 1px solid var(--morandi-border);
  color: var(--morandi-text-3);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}
.sidebar-toggle-bar:hover { background: var(--morandi-bg); }
.sidebar.collapsed .sidebar-toggle-bar .toggle-arrow { transform: rotate(180deg); }

.menu-list { padding: 4px 0; font-size: 13px; }
.menu-group { margin-bottom: 4px; }

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  color: var(--morandi-text-2);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border-left: 3px solid transparent;
}
.menu-item:hover { background: var(--morandi-bg); color: var(--morandi-text); }
.menu-item.active {
  background: var(--morandi-bg);
  color: var(--morandi-primary-deep);
  font-weight: 600;
  border-left-color: var(--morandi-primary);
}
.menu-item.disabled,
.menu-item.disabled:hover {
  color: var(--morandi-text-3);
  cursor: not-allowed;
  background: transparent;
}

.menu-item.level-1 {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--morandi-text);
  background: #fafafa;
  padding: 10px 16px;
}
.menu-item.level-1.active { background: var(--morandi-bg); }
.menu-item.level-2 {
  font-size: 12px;
  color: var(--morandi-text-2);
  padding: 6px 16px 6px 24px;
  letter-spacing: .5px;
}
.menu-item.level-2.active { border-left-color: var(--morandi-primary); }

/* 三级（leaf）链接 */
.sub-menu > .menu-item:not(.level-2) {
  padding-left: 36px;
  font-size: 12.5px;
}
.sub-menu .sub-menu > .menu-item:not(.level-2) {
  padding-left: 48px;
}

.menu-item .arrow {
  color: var(--morandi-text-3);
  font-size: 9px;
  transition: transform .15s ease;
}
.menu-item.has-children.expanded .arrow { transform: rotate(90deg); }

.sub-menu { display: none; }
.sub-menu.expanded { display: block; }

/* 整侧栏收起（桌面端） */
.sidebar.collapsed { width: 48px; }
.sidebar.collapsed .menu-text,
.sidebar.collapsed .menu-item.level-1 .arrow,
.sidebar.collapsed .sub-menu { display: none; }

/* ----- mobile sidebar ----- */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .1);
  }
  .sidebar.open { transform: translateX(0); }
}

/* ----- auth (login) page ----- */
.auth-page {
  min-height: 100vh;
}
.auth-card {
  width: 360px;
  max-width: 90vw;
  background: var(--morandi-card);
  padding: 32px;
  /* old: border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.08); */
  border-radius: 4px;
  border: 1px solid var(--morandi-border);
  box-shadow: 0 4px 18px rgba(168, 150, 132, .15);
}
.auth-card h1 { letter-spacing: 1px; color: var(--morandi-primary-deep); }

/* ----- forms ----- */
.form-label {
  font-size: 13px;
  /* old: color: #495057; */
  color: var(--morandi-text-2);
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.form-text-error { color: #dc3545; font-size: 12px; min-height: 18px; }

/* ----- tables ----- */
.table-card {
  background: var(--morandi-card);
  /* old: border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.05); */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--morandi-border);
  box-shadow: 0 1px 3px rgba(168, 150, 132, .08);
}
.table-card .table { margin-bottom: 0; }
.table > :not(caption) > * > * {
  border-bottom-color: var(--morandi-border);
}

/* ----- tag chips ----- */
.tag {
  display: inline-block;
  padding: 1px 8px;
  /* old: border-radius: 3px; */
  border-radius: 2px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  /* old: background: #e7f1ff; color: #0d6efd; */
  background: var(--morandi-bg);
  color: var(--morandi-primary-deep);
  border: 1px solid var(--morandi-border);
  margin-right: 4px;
  margin-bottom: 2px;
  letter-spacing: .5px;
}
.tag.disabled {
  /* old: background: #f8d7da; color: #842029; */
  background: #f5e8e6;
  color: #b15c52;
  border-color: #ecd5d2;
}