/* ==========================================================================
   知柿 Admin Theme - 白黑橙配色方案
   Django Unfold 自定义样式
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS 变量定义
   -------------------------------------------------------------------------- */
:root {
  /* 核心三色 */
  --wa-white: #FFFFFF;
  --wa-black: #0A0A0A;
  --wa-orange: #F97316;
  --wa-orange-dark: #EA580C;
  --wa-orange-light: #FB923C;

  /* 灰色过渡层级 */
  --wa-gray-50: #FAFAFA;
  --wa-gray-100: #F5F5F5;
  --wa-gray-200: #E5E5E5;
  --wa-gray-300: #D4D4D4;
  --wa-gray-400: #A3A3A3;
  --wa-gray-500: #737373;
  --wa-gray-600: #525252;
  --wa-gray-700: #404040;
  --wa-gray-800: #262626;
  --wa-gray-900: #171717;

  /* 阴影系统 */
  --wa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --wa-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --wa-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --wa-shadow-orange: 0 4px 14px rgba(249, 115, 22, 0.35);

  /* 覆盖 Unfold 默认变量 */
  --primary-50: #FFF7ED;
  --primary-100: #FFEDD5;
  --primary-200: #FED7AA;
  --primary-300: #FDBA74;
  --primary-400: #FB923C;
  --primary-500: #F97316;
  --primary-600: #EA580C;
  --primary-700: #C2410C;
  --primary-800: #9A3412;
  --primary-900: #7C2D12;
  --primary-950: #431407;
}

/* --------------------------------------------------------------------------
   全局背景与文字
   -------------------------------------------------------------------------- */
html {
  background-color: var(--wa-gray-100) !important;
}

body {
  background-color: var(--wa-gray-100) !important;
  color: var(--wa-black) !important;
}

/* --------------------------------------------------------------------------
   侧边栏样式
   -------------------------------------------------------------------------- */
/* 侧边栏背景 - 白色 */
aside.main-sidebar {
  background-color: var(--wa-white) !important;
  border-right: 1px solid var(--wa-gray-200) !important;
  box-shadow: var(--wa-shadow) !important;
}

/* 侧边栏 Logo 区域 */
aside.main-sidebar .sidebar-logo {
  background-color: var(--wa-white) !important;
  border-bottom: 1px solid var(--wa-gray-200) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Logo 图片样式 */
aside.main-sidebar .sidebar-logo img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Logo 文字容器 */
aside.main-sidebar .sidebar-logo a,
aside.main-sidebar .sidebar-logo .sidebar-logo-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  text-decoration: none !important;
}

/* 主标题 */
aside.main-sidebar .sidebar-logo .sidebar-logo-title {
  color: var(--wa-black) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* 副标题 - 如果有的话 */
aside.main-sidebar .sidebar-logo .sidebar-logo-subtitle {
  color: var(--wa-gray-500) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  margin-top: 0.25rem !important;
}

/* Unfold sidebar branding 样式覆盖 */
.sidebar-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-align: center !important;
}

.sidebar-brand h1 {
  color: var(--wa-black) !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.sidebar-brand span {
  color: var(--wa-gray-500) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  margin-top: 0.25rem !important;
}

/* 侧边栏导航项 */
aside.main-sidebar .sidebar-nav-item {
  color: var(--wa-gray-600) !important;
  transition: all 0.2s ease !important;
  border-radius: 0.5rem !important;
  margin: 0.25rem 0.75rem !important;
}

aside.main-sidebar .sidebar-nav-item:hover {
  background-color: var(--wa-gray-100) !important;
  color: var(--wa-black) !important;
}

/* 当前激活的导航项 - 橙色点睛 */
aside.main-sidebar .sidebar-nav-item.active {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
  box-shadow: var(--wa-shadow-orange) !important;
}

aside.main-sidebar .sidebar-nav-item.active svg {
  color: var(--wa-white) !important;
}

/* 分组标题 */
aside.main-sidebar .sidebar-section-title {
  color: var(--wa-gray-400) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1.5rem 1.5rem 0.5rem !important;
}

/* --------------------------------------------------------------------------
   顶部导航栏
   -------------------------------------------------------------------------- */
header.main-header {
  background-color: var(--wa-white) !important;
  border-bottom: 1px solid var(--wa-gray-200) !important;
  box-shadow: var(--wa-shadow-sm) !important;
}

header.main-header .header-title {
  color: var(--wa-black) !important;
  font-weight: 600 !important;
}

/* 用户菜单 */
header.main-header .user-menu-button {
  color: var(--wa-gray-600) !important;
  transition: color 0.2s ease !important;
}

header.main-header .user-menu-button:hover {
  color: var(--wa-orange) !important;
}

/* --------------------------------------------------------------------------
   主内容区域
   -------------------------------------------------------------------------- */
.main-content {
  background-color: var(--wa-gray-100) !important;
}

/* 页面标题 */
.page-title {
  color: var(--wa-black) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   卡片样式
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--wa-white) !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow) !important;
  transition: box-shadow 0.2s ease !important;
}

.card:hover {
  box-shadow: var(--wa-shadow-md) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--wa-gray-100) !important;
  padding: 1.25rem 1.5rem !important;
}

.card-title {
  color: var(--wa-black) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.card-body {
  padding: 1.5rem !important;
  color: var(--wa-gray-600) !important;
}

/* --------------------------------------------------------------------------
   按钮样式
   -------------------------------------------------------------------------- */

/* 主要按钮 - 橙色点睛 */
.btn-primary,
button[type="submit"].btn-primary,
.submit-row input[type="submit"].default {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  font-weight: 500 !important;
  box-shadow: var(--wa-shadow-orange) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.submit-row input[type="submit"].default:hover {
  background-color: var(--wa-orange-dark) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* 次要按钮 */
.btn-secondary {
  background-color: var(--wa-white) !important;
  color: var(--wa-black) !important;
  border: 1px solid var(--wa-gray-200) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  background-color: var(--wa-gray-50) !important;
  border-color: var(--wa-gray-300) !important;
}

/* 危险按钮 */
.btn-danger {
  background-color: #EF4444 !important;
  color: var(--wa-white) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.btn-danger:hover {
  background-color: #DC2626 !important;
}

/* --------------------------------------------------------------------------
   表单样式
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem !important;
}

.form-label {
  color: var(--wa-black) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  background-color: var(--wa-white) !important;
  border: 1px solid var(--wa-gray-200) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 0.875rem !important;
  color: var(--wa-black) !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--wa-orange) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.form-control::placeholder {
  color: var(--wa-gray-400) !important;
}

/* --------------------------------------------------------------------------
   表格样式
   -------------------------------------------------------------------------- */
.table-container {
  background-color: var(--wa-white) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow) !important;
  overflow: hidden !important;
}

table {
  width: 100% !important;
  border-collapse: collapse !important;
}

thead {
  background-color: var(--wa-gray-50) !important;
}

th {
  color: var(--wa-gray-600) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.875rem 1rem !important;
  text-align: left !important;
  border-bottom: 1px solid var(--wa-gray-200) !important;
}

td {
  padding: 1rem !important;
  color: var(--wa-gray-600) !important;
  border-bottom: 1px solid var(--wa-gray-100) !important;
}

tr:hover td {
  background-color: var(--wa-gray-50) !important;
}

/* 排序表头 */
th.sortable:hover {
  color: var(--wa-orange) !important;
  background-color: var(--wa-gray-100) !important;
}

th.sorted {
  color: var(--wa-orange) !important;
}

/* --------------------------------------------------------------------------
   状态标签
   -------------------------------------------------------------------------- */
.badge,
.status-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* 成功状态 - 绿色 */
.badge-success,
.status-tag.yes,
.status-active,
.status-Active,
.status-active span {
  background-color: #DCFCE7 !important;
  color: #166534 !important;
}

/* 警告状态 - 橙色 */
.badge-warning,
.status-tag.pending,
.status-paused,
.status-Paused,
.status-paused span {
  background-color: rgba(249, 115, 22, 0.1) !important;
  color: var(--wa-orange) !important;
}

/* 草稿状态 - 灰色 */
.status-draft,
.status-Draft,
.status-draft span {
  background-color: var(--wa-gray-100) !important;
  color: var(--wa-gray-600) !important;
}

/* 错误状态 - 红色 */
.badge-error,
.status-tag.no,
.status-inactive,
.status-exhausted,
.status-Exhausted,
.status-exhausted span {
  background-color: #FEE2E2 !important;
  color: #991B1B !important;
}

/* 完成状态 - 蓝色 */
.status-completed,
.status-Completed,
.status-completed span {
  background-color: #DBEAFE !important;
  color: #1E40AF !important;
}

/* 待处理状态 - 紫色 */
.status-pending,
.status-Pending,
.status-pending span {
  background-color: #F3E8FF !important;
  color: #7C3AED !important;
}

/* 信息状态 - 灰色 */
.badge-info {
  background-color: var(--wa-gray-100) !important;
  color: var(--wa-gray-600) !important;
}

/* --------------------------------------------------------------------------
   分页样式
   -------------------------------------------------------------------------- */
.pagination {
  display: flex !important;
  gap: 0.25rem !important;
}

.pagination a,
.pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.pagination a {
  color: var(--wa-gray-600) !important;
  background-color: var(--wa-white) !important;
  border: 1px solid var(--wa-gray-200) !important;
}

.pagination a:hover {
  background-color: var(--wa-gray-50) !important;
  border-color: var(--wa-gray-300) !important;
  color: var(--wa-black) !important;
}

.pagination .current {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
  box-shadow: var(--wa-shadow-orange) !important;
}

/* --------------------------------------------------------------------------
   消息提示
   -------------------------------------------------------------------------- */
.messagelist {
  margin-bottom: 1.5rem !important;
}

.messagelist li {
  padding: 1rem 1.25rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: 500 !important;
}

.messagelist .success {
  background-color: #DCFCE7 !important;
  color: #166534 !important;
  border-left: 4px solid #22C55E !important;
}

.messagelist .error {
  background-color: #FEE2E2 !important;
  color: #991B1B !important;
  border-left: 4px solid #EF4444 !important;
}

.messagelist .warning {
  background-color: rgba(249, 115, 22, 0.1) !important;
  color: var(--wa-orange-dark) !important;
  border-left: 4px solid var(--wa-orange) !important;
}

.messagelist .info {
  background-color: #DBEAFE !important;
  color: #1E40AF !important;
  border-left: 4px solid #3B82F6 !important;
}

/* --------------------------------------------------------------------------
   面包屑导航
   -------------------------------------------------------------------------- */
.breadcrumbs {
  background-color: transparent !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 1.5rem !important;
}

.breadcrumbs a {
  color: var(--wa-gray-500) !important;
  transition: color 0.2s ease !important;
}

.breadcrumbs a:hover {
  color: var(--wa-orange) !important;
}

.breadcrumbs .current {
  color: var(--wa-black) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   过滤器面板
   -------------------------------------------------------------------------- */
.filter-panel {
  background-color: var(--wa-white) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow) !important;
  padding: 1.25rem !important;
}

.filter-panel h3 {
  color: var(--wa-black) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}

.filter-panel ul li {
  margin-bottom: 0.5rem !important;
}

.filter-panel ul li a {
  color: var(--wa-gray-600) !important;
  font-size: 0.875rem !important;
  transition: color 0.2s ease !important;
}

.filter-panel ul li a:hover {
  color: var(--wa-orange) !important;
}

.filter-panel ul li.selected a {
  color: var(--wa-orange) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   统计卡片（仪表盘）
   -------------------------------------------------------------------------- */
.stat-card {
  background-color: var(--wa-white) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow) !important;
  padding: 1.5rem !important;
  transition: box-shadow 0.2s ease !important;
}

.stat-card:hover {
  box-shadow: var(--wa-shadow-md) !important;
}

.stat-card .stat-label {
  color: var(--wa-gray-500) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

.stat-card .stat-value {
  color: var(--wa-black) !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
}

/* 重点数据 - 橙色高亮 */
.stat-card.highlight .stat-value {
  color: var(--wa-orange) !important;
}

.stat-card .stat-change {
  color: var(--wa-gray-500) !important;
  font-size: 0.75rem !important;
}

.stat-card .stat-change.positive,
.budget-positive {
  color: #22C55E !important;
}

.stat-card .stat-change.negative,
.budget-negative {
  color: #EF4444 !important;
}

/* --------------------------------------------------------------------------
   操作按钮组
   -------------------------------------------------------------------------- */
.object-tools {
  margin-bottom: 1.5rem !important;
}

.object-tools a {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  box-shadow: var(--wa-shadow-orange) !important;
  transition: all 0.2s ease !important;
}

.object-tools a:hover {
  background-color: var(--wa-orange-dark) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}

/* --------------------------------------------------------------------------
   字段集/分组
   -------------------------------------------------------------------------- */
fieldset {
  background-color: var(--wa-white) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow) !important;
  border: none !important;
  margin-bottom: 1.5rem !important;
  padding: 1.5rem !important;
}

fieldset h2,
fieldset .fieldset-heading {
  color: var(--wa-black) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--wa-gray-100) !important;
}

/* --------------------------------------------------------------------------
   帮助文本
   -------------------------------------------------------------------------- */
.help-text,
.form-text,
.help {
  color: var(--wa-gray-500) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.375rem !important;
}

/* --------------------------------------------------------------------------
   选择器 (Select2)
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
  background-color: var(--wa-white) !important;
  border: 1px solid var(--wa-gray-200) !important;
  border-radius: 0.5rem !important;
  height: 2.75rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--wa-black) !important;
  line-height: 2.75rem !important;
  padding-left: 0.875rem !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--wa-orange) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.select2-dropdown {
  background-color: var(--wa-white) !important;
  border: 1px solid var(--wa-gray-200) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--wa-shadow-md) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
}

/* --------------------------------------------------------------------------
   日期选择器
   -------------------------------------------------------------------------- */
.ui-datepicker {
  background-color: var(--wa-white) !important;
  border: 1px solid var(--wa-gray-200) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--wa-shadow-lg) !important;
}

.ui-datepicker-header {
  background-color: var(--wa-gray-50) !important;
  border-bottom: 1px solid var(--wa-gray-200) !important;
}

.ui-datepicker-calendar td a:hover {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
}

.ui-datepicker-calendar .ui-state-active {
  background-color: var(--wa-orange) !important;
  color: var(--wa-white) !important;
}

/* --------------------------------------------------------------------------
   其他样式
   -------------------------------------------------------------------------- */

/* 评分星级 */
.rating-stars {
  color: #fbbf24;
}

/* 数字格式化 */
.number-format {
  font-family: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
}

/* 表格行高亮 */
tr:hover .field-status {
  background-color: rgba(0, 0, 0, 0.02);
}

/* --------------------------------------------------------------------------
   响应式调整
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  aside.main-sidebar {
    box-shadow: var(--wa-shadow-lg) !important;
  }
}

/* --------------------------------------------------------------------------
   动画效果
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card,
fieldset,
.table-container {
  animation: fadeIn 0.3s ease-out;
}

/* 平滑过渡 */
a, button, .btn, .card, fieldset, input, select, textarea {
  transition: all 0.2s ease !important;
}

/* 禁用某些元素的无障碍过渡偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}