:root {
  --brand-700: #0f63cf;
  --brand-600: #1f7cf0;
  --brand-500: #2f8dff;
  --brand-100: #e8f2ff;
  --bg-page: #f3f6fb;
  --bg-card: #ffffff;
  --text-main: #24324a;
  --text-sub: #6c7c95;
  --line: #e6edf7;
  --shadow-card: none;
}

body {
  background: var(--bg-page) !important;
  color: var(--text-main);
}

/* 左侧导航改为浅色风格，贴近参考图 */
aside {
  background: #f8fbff !important;
  color: var(--text-main) !important;
  border-right: 1px solid var(--line);
  align-self: stretch;
}

aside h1 {
  color: var(--brand-700);
  letter-spacing: 0.2px;
}

aside p {
  color: var(--text-sub) !important;
}

/* 去掉左侧栏顶部两段文字 */
aside > .mb-6 {
  display: none;
}

.menu-item {
  text-align: left;
  display: flex;
  align-items: center;
  color: #38516f;
  border-radius: 10px;
}

.menu-item:hover {
  background: transparent !important;
  color: inherit !important;
}

.menu-item.active {
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
  color: #fff;
  box-shadow: none;
}

.eval-sub-item,
.invoice-sub-item,
.template-sub-item {
  text-align: left;
  display: flex;
  align-items: center;
  color: #59718f !important;
}

.eval-sub-item:hover,
.invoice-sub-item:hover,
.template-sub-item:hover {
  background-color: transparent !important;
  color: inherit !important;
}

.eval-sub-item.active,
.invoice-sub-item.active,
.template-sub-item.active {
  background-color: #dbeaff !important;
  color: var(--brand-700) !important;
}

/* 顶部标题区改为蓝色通栏卡片风格 */
main {
  padding-top: 72px !important;
}

main > header {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  min-height: auto !important;
}

main > header p,
main > header button {
  display: none !important;
}

main > header h2,
.page-inline-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #213a5a !important;
  line-height: 1.3;
}

/* 统一容器卡片样式 */
.page-content > div,
#content-sales,
#content-service,
#content-print-template,
#content-print-record {
  background: var(--bg-card) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.card-hover {
  transition: all 0.25s ease;
}

undefined
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3f5573;
}

#tradeApplyForm .form-label {
  margin-bottom: 0.625rem;
}

#tradeApplyForm > div {
  margin-bottom: 0.125rem;
}

#tradeApplyForm h4 {
  margin-bottom: 0.5rem;
}

#tradeApplyForm .flex.flex-wrap.gap-2 {
  gap: 0.625rem !important;
}

.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="file"],
select,
textarea {
  width: 100%;
  border: 1px solid #cddbf0 !important;
  border-radius: 0.625rem !important;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #1f3048;
  background-color: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #5aa2ff !important;
  box-shadow: 0 0 0 3px rgba(47, 141, 255, 0.18) !important;
}

/* 表格样式增强 */
table {
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: #f4f8ff !important;
}

thead th {
  color: #5a6f8d !important;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

tbody td {
  color: #2d3f59;
  border-bottom: 1px solid #edf3fb;
}

tbody tr:hover {
  background: #f8fbff;
}

/* 固定列兼容新表头底色 */
.sticky-col {
  position: sticky;
  background: #fff;
  z-index: 20;
  white-space: nowrap;
}

.sticky-head {
  position: sticky;
  background: #f4f8ff;
  z-index: 30;
  white-space: nowrap;
}

.sticky-right {
  right: 0;
  box-shadow: none;
}

/* 左侧固定列（车辆交易申请：交易编号） */
#page-apply .sticky-col:not(.sticky-right) {
  left: 0;
  z-index: 21;
}

.sticky-left-shadow {
  box-shadow: none;
}

/* 全站表格区域：响应式高度，尽量填满一屏 */
.page-content .overflow-x-auto,
.invoice-content .overflow-x-auto,
.template-content .overflow-x-auto {
  max-height: calc(100vh - 320px);
  overflow: auto;
}

@media (max-width: 1024px) {
  .page-content .overflow-x-auto,
  .invoice-content .overflow-x-auto,
  .template-content .overflow-x-auto {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 768px) {
  .page-content .overflow-x-auto,
  .invoice-content .overflow-x-auto,
  .template-content .overflow-x-auto {
    max-height: calc(100vh - 240px);
  }
}

/* 统一按钮配色（不改字段和按钮，仅改风格） */
button[class*="bg-sky-600"],
button[class*="bg-blue-600"] {
  background: linear-gradient(90deg, #1f7cf0, #2f8dff) !important;
  border-radius: 10px !important;
  box-shadow: none;
}

button[class*="bg-sky-600"]:hover,
button[class*="bg-blue-600"]:hover {
  filter: brightness(0.97);
}

button[class*="bg-emerald-600"],
button[class*="bg-amber-600"],
button[class*="bg-rose-600"] {
  border-radius: 10px !important;
}

button[class*="bg-slate-100"],
button[class*="border-slate-300"] {
  border-radius: 10px !important;
}

/* 弹窗样式柔化 */
[id$="modal"] > div,
[id$="Modal"] > div {
  border: 1px solid var(--line);
  box-shadow: none;
}

/* 评估页面弹窗遮罩兜底（防止遮罩失效发白） */
#addGradeModal,
#editRuleModal,
#setScopeModal,
#deleteConfirmModal,
#priceAdjustModal,
#historyPriceModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45) !important;
  z-index: 50;
}

.page-content {
  min-height: 400px;
}

.evaluation-tab-content {
  min-height: 300px;
}

/* ===== 左侧菜单图标化（纯样式层） ===== */
aside nav {
  margin-top: 4px;
}

.menu-item,
.eval-sub-item,
.invoice-sub-item,
.template-sub-item {
  position: relative;
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* 一级菜单图标（icon/1.svg ~ icon/5.svg） */
.menu-item {
  padding-left: 12px !important;
  gap: 10px;
}

.menu-main-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  opacity: 0.72;
  transform: scale(1);
  filter: grayscale(0.15) brightness(0.88);
  transition: transform .18s ease, opacity .18s ease, filter .18s ease !important;
}

.menu-item:hover .menu-main-icon {
  opacity: 0.92;
  transform: scale(1.08);
  filter: grayscale(0) brightness(1);
}

.menu-item.active .menu-main-icon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.menu-item.active:hover .menu-main-icon {
  transform: scale(1.08);
}

/* 左侧菜单：车辆交易申请图标单独放大 2px */
a[href="apply.html"] .menu-main-icon,
a[href="../apply.html"] .menu-main-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.menu-item-with-icon {
  justify-content: flex-start !important;
}

.menu-item-with-icon .menu-caret {
  margin-left: auto;
}

/* 二级菜单去掉图标，恢复紧凑缩进 */
.eval-sub-item,
.invoice-sub-item,
.template-sub-item {
  padding-left: 12px !important;
}

.eval-sub-item::before,
.invoice-sub-item::before,
.template-sub-item::before {
  content: none;
}

#nav-evaluation,
a[href*="evaluation/"] {
  letter-spacing: 0.2px;
}

/* 二级菜单分组线条优化 */
#nav-evaluation-sub,
#nav-invoice-sub,
#nav-template-sub {
  border-left-color: #c6d9f4 !important;
}

/* ===== 全局顶部导航栏 ===== */
.global-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  margin: 0;
  border-radius: 0;
  border: none;
  background: linear-gradient(90deg, #1369d8 0%, #217df0 60%, #2f8dff 100%);
  box-shadow: none;
}

.global-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 600;
}

.global-topbar-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: none;
}

.global-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.global-message-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.global-message-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.global-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  overflow: hidden;
}

.global-avatar-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.global-user-meta {
  line-height: 1.1;
}

.global-user-name {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}

.global-user-role {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

/* ===== 表格 / 按钮 / 输入精细尺寸统一（36/40体系） ===== */
th,
td {
  height: 40px;
  vertical-align: middle;
  font-size: 14px !important;
}

table,
thead,
tbody,
tr,
th,
td {
  font-size: 14px !important;
}

thead th {
  height: 40px;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

tbody td {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

button,
.button,
a[class*="px-"][class*="py-"] {
  min-height: 36px;
  border-radius: 10px !important;
  font-size: 14px;
  line-height: 20px;
}

button[class*="text-xs"] {
  min-height: 32px;
  border-radius: 8px !important;
}

input,
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  min-height: 36px;
  border-radius: 10px !important;
}

textarea,
.form-textarea {
  min-height: 84px;
}

/* ===== 统一交互与页面结构间距 ===== */

/* 1) 左侧菜单：悬浮/按下/选中态统一 */
.menu-item,
.eval-sub-item,
.invoice-sub-item,
.template-sub-item {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.menu-item:hover,
.eval-sub-item:hover,
.invoice-sub-item:hover,
.template-sub-item:hover {
  transform: none;
}

.menu-item:active,
.eval-sub-item:active,
.invoice-sub-item:active,
.template-sub-item:active {
  transform: none;
  filter: none;
}

.menu-item.active,
.eval-sub-item.active,
.invoice-sub-item.active,
.template-sub-item.active {
  box-shadow: none;
}

/* 2) 统一页面标题位置和间距 */
.page-inline-title {
  margin-top: 0;
  margin-bottom: 14px;
  padding-left: 2px;
}

/* 3) 统一页面操作按钮区位置（左对齐，和表格起始列对齐） */
.page-content > div > .mb-6.flex.justify-end,
.invoice-content > .mb-6.flex.justify-end,
.template-content > .mb-6.flex.justify-end,
.page-content > div > .mb-6.flex.justify-start,
.invoice-content > .mb-6.flex.justify-start,
.template-content > .mb-6.flex.justify-start {
  margin-top: -2px !important;
  margin-bottom: 14px !important;
  justify-content: flex-start !important;
}

/* 筛选栏 + 按钮区在多列下也保持底部对齐 */
.page-content .items-end {
  align-items: flex-end !important;
}

/* 4) 统一按钮尺寸体系 */
button,
a[class*="px-"][class*="py-"] {
  min-height: 36px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-radius: 10px !important;
  font-weight: 500;
}

/* 小操作按钮统一为 32 高 */
button[class*="text-xs"],
.table-op-btn {
  min-height: 32px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-radius: 8px !important;
}

/* 表格操作列按钮排列统一 */
td .flex.gap-2,
td .flex.items-center.gap-2 {
  align-items: center;
  flex-wrap: nowrap;
}

/* 标题-操作区-表格的整体节奏统一 */
.page-content > div,
.invoice-content,
.template-content,
#content-sales,
#content-service,
#content-print-template,
#content-print-record {
  padding-top: 16px !important;
}

/* ===== 强制关闭左侧菜单 hover 效果（覆盖 Tailwind hover 类） ===== */
aside nav *,
aside nav .menu-item,
aside nav .eval-sub-item,
aside nav .invoice-sub-item,
aside nav .template-sub-item,
aside nav a,
aside nav button {
  transition: none !important;
}

/* 非选中态 hover/focus 完全静止 */
aside nav .menu-item:not(.active):hover,
aside nav .eval-sub-item:not(.active):hover,
aside nav .invoice-sub-item:not(.active):hover,
aside nav .template-sub-item:not(.active):hover,
aside nav .menu-item:not(.active):focus,
aside nav .eval-sub-item:not(.active):focus,
aside nav .invoice-sub-item:not(.active):focus,
aside nav .template-sub-item:not(.active):focus,
aside nav a:not(.active):hover,
aside nav button:not(.active):hover,
aside nav a:not(.active):focus,
aside nav button:not(.active):focus,
aside nav .relative:hover,
aside nav .relative:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #38516f !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* 二级菜单未选中颜色锁定，避免 hover 继承 */
aside nav .eval-sub-item:not(.active),
aside nav .invoice-sub-item:not(.active),
aside nav .template-sub-item:not(.active) {
  color: #59718f !important;
}

/* ===== 发票管理：车辆评估弹窗美化 ===== */
#vehicle-eval-modal {
  backdrop-filter: blur(2px);
}

#vehicle-eval-modal > div {
  border: 1px solid #dbe7f6;
  box-shadow: 0 16px 40px rgba(15, 35, 70, 0.18);
}

#vehicle-eval-modal h3 {
  color: #1f3048;
  letter-spacing: 0.2px;
}

#vehicle-eval-modal .rounded-xl.border.border-slate-200.p-4.mb-5.bg-slate-50\/60 {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
  border-color: #d9e7fb;
}

#vehicle-eval-modal #eval-brand,
#vehicle-eval-modal #eval-model,
#vehicle-eval-modal #eval-year,
#vehicle-eval-modal #eval-mileage {
  color: #1e3a5f;
}

#vehicle-eval-modal label:has(input[name="evalPriceSource"]) {
  transition: all .2s ease;
  border-color: #d8e3f2;
  background: #ffffff;
}

#vehicle-eval-modal label:has(input[name="evalPriceSource"]):hover {
  border-color: #bcd3f5;
  background: #f8fbff;
}


#vehicle-eval-modal input[name="evalPriceSource"] {
  accent-color: #1f7cf0;
  width: 16px;
  height: 16px;
}

#vehicle-eval-modal .form-select,
#vehicle-eval-modal .form-input {
  background: #fbfdff;
  border-color: #cfe0f6 !important;
}

#vehicle-eval-modal .form-select:focus,
#vehicle-eval-modal .form-input:focus {
  background: #ffffff;
  border-color: #5aa2ff !important;
  box-shadow: 0 0 0 3px rgba(47, 141, 255, 0.16) !important;
}

#vehicle-eval-modal .form-label {
  color: #334e72;
  font-weight: 600;
}

#vehicle-eval-modal .flex.justify-end.gap-3.mt-6 {
  border-top: 1px solid #e7eef9;
  padding-top: 14px;
}

/* 车辆交易申请：状态筛选标签改为Tab风格（避免像按钮） */
#applyStatusTabs {
  border-bottom: 1px solid #e5e7eb;
  gap: 0.5rem;
}

.apply-tab-btn {
  min-height: auto !important;
  padding: 0.5rem 0.25rem !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent !important;
}

.apply-tab-btn:hover {
  color: #334155 !important;
  background: transparent !important;
}

.apply-tab-btn.active {
  color: #0f63cf !important;
  border-bottom-color: #0f63cf !important;
  font-weight: 600;
}

/* 车辆交易申请：审核状态彩色标签 */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-draft {
  color: #475569;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.status-pending {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.status-approved {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.status-rejected {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.status-seller-approved {
  color: #3730a3;
  background: #e0e7ff;
  border-color: #a5b4fc;
}