:root {
  --primary-color: #1677ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --text-color: rgba(0, 0, 0, 0.88);
  --text-color-secondary: rgba(0, 0, 0, 0.65);
  --border-color-base: #d9d9d9;
  --split-color: rgba(5, 5, 5, 0.06);
  --body-background: #f5f5f5;
  --component-background: #ffffff;
  --table-header-bg: #fafafa;
  --table-row-hover-bg: #fafafa;
  --control-item-bg-hover: rgba(0, 0, 0, 0.04);
  --border-radius: 6px;
  --border-radius-sm: 4px;
  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

body,
.duty-page,
.autoreport-page {
  background: var(--body-background) !important;
  color: var(--text-color) !important;
}

.header-bar,
.duty-header {
  background: var(--primary-color) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.header-bar .title,
.duty-header .duty-title {
  color: #fff !important;
}

.sidebar-menu,
.topbar-menu {
  background: var(--component-background) !important;
  border-color: var(--border-color-base) !important;
}

.menu-item.active,
.menu-chip.active,
.nav-dot.active,
.sidebar-menu .menu-item.active {
  background: #e6f4ff !important;
  color: var(--primary-color) !important;
}

.menu-item:hover,
.menu-chip:hover,
.nav-dot:hover,
.action-btn:hover,
.btn-icon:hover,
.sidebar-header:hover {
  color: var(--primary-color) !important;
}

.card,
.duty-card-wrapper,
[class*="duty-card-wrapper"] {
  background: var(--component-background) !important;
  border: 1px solid var(--border-color-base) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card-title,
.title-text {
  color: var(--primary-color) !important;
  border-left-color: var(--primary-color) !important;
}

button,
input,
select,
textarea,
.btn-secondary,
.secondary-btn,
.filter-select,
.filter-search {
  border-color: var(--border-color-base) !important;
  border-radius: var(--border-radius-sm) !important;
}

input:focus,
select:focus,
textarea:focus,
.filter-select:focus,
.filter-search:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15) !important;
  outline: none !important;
}

.btn-primary,
.primary-btn,
.action-btn.save,
.btn-handle,
.retry-btn {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-primary:hover,
.primary-btn:hover,
.action-btn.save:hover,
.btn-handle:hover,
.retry-btn:hover {
  background: #0958d9 !important;
  border-color: #0958d9 !important;
}

.table-header,
.case-table th,
.hold-table th,
.data-table th,
.card-body table th {
  background: var(--table-header-bg) !important;
  color: var(--text-color-secondary) !important;
}

.case-table tbody tr:hover,
.hold-table tbody tr:hover,
.data-table tbody tr:hover,
.status-item:hover {
  background: var(--table-row-hover-bg) !important;
}