/* ==========================================================================
   销售分析样式（迁自 sales-dashboard，round4 全量迁入主数据中心）
   design tokens 与主数据中心同套(teal)；所有选择器以 .sales-page 作用域隔离，
   避免与主数据中心全局样式冲突。布局类(sidebar/header)已移除，复用主外壳。
   ========================================================================== */

/* ==========================================================================
   穗邑销售数据看板 — Brand Design Tokens & Base Styles
   Based on IMS Design System (design-spec.md V3.0)
   ========================================================================== */

/* --- Design Tokens --- */
:root {

  /* Brand Primary (Teal) */
  --primary-1: #E6F9F7;
  --primary-2: #B3F0E8;
  --primary-3: #80E7D9;
  --primary-4: #4DDECA;
  --primary-5: #1AD5BB;
  --primary-6: #00B8A9;
  --primary-7: #009E92;
  --primary-8: #00857B;
  --primary-9: #006B64;
  --primary-10: #00524D;

  /* Functional Colors */
  --success: #36B37E;
  --success-bg: #E6F9EE;
  --success-deep: #2D9668;
  --warning: #F5A623;
  --warning-bg: #FFF8E6;
  --warning-deep: #D98E1A;
  --danger: #F56C6C;
  --danger-bg: #FEF0F0;
  --danger-deep: #D94545;
  --info: #409EFF;
  --info-bg: #ECF5FF;
  --info-deep: #337ECC;

  /* Neutral Colors */
  --text-primary: rgba(0, 0, 0, 0.88);
  --text-body: rgba(0, 0, 0, 0.65);
  --text-secondary: rgba(0, 0, 0, 0.45);
  --text-disabled: rgba(0, 0, 0, 0.25);
  --border-color: rgba(0, 0, 0, 0.15);
  --divider-color: rgba(0, 0, 0, 0.06);
  --table-header-bg: #FAFAFA;
  --page-bg: #F5F7FA;
  --card-bg: #FFFFFF;
  --sidebar-bg: #FFFFFF;
  --header-bg: #FFFFFF;

  /* Typography */
  --font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 6px 16px rgba(0, 0, 0, 0.08);

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed: 64px;
  --header-height: 50px;
  --tab-height: 36px;
  --content-padding: 16px;
  --card-padding: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Semantic Theme Aliases (required by apply-html-head-contract.mjs) */
  --text-background: var(--page-bg);
  --text-foreground: var(--text-primary);
  --text-card: var(--card-bg);
  --text-card-foreground: var(--text-primary);
  --text-border: var(--border-color);
  --text-muted: var(--text-secondary);
  --text-muted-foreground: var(--text-secondary);
  --text-primary-foreground: #ffffff;
  --text-secondary-foreground: var(--text-body);
  --text-accent: var(--primary-6);
  --text-accent-foreground: #ffffff;
  --text-destructive: var(--danger);
  --text-destructive-foreground: #ffffff;
  --text-popover: var(--card-bg);
  --text-popover-foreground: var(--text-primary);
  --text-input: var(--border-color);
  --text-ring: var(--primary-6);
  --text-radius-sm: var(--radius-sm);
  --text-radius-md: var(--radius-md);
  --text-radius-lg: var(--radius-lg);
  --text-radius-xl: var(--radius-xl);
}

.sales-page /* --- Reset & Base --- */
*, .sales-page *::before, .sales-page *::after {

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sales-page html, .sales-page body {

  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-body);
  background: var(--page-bg);
  line-height: 1.5;
  -webkit-fontoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sales-page a {

  color: var(--primary-6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sales-page a:hover {

  color: var(--primary-7);
}

.sales-page /* --- App Layout --- */
.app-container {

  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sales-page .sidebar {

  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--divider-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition-normal);
  overflow: hidden;
}

.sales-page .sidebar-logo {

  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-xl);
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}

.sales-page .sidebar-logo-icon {

  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-5), var(--primary-7));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.sales-page .sidebar-logo-text {

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.sales-page .sidebar-nav {

  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.sales-page .sidebar-group-title {

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  padding: var(--space-lg) var(--space-xl) var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sales-page .sidebar-item {

  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 40px;
  padding: 0 var(--space-xl);
  font-size: var(--font-size-base);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.sales-page .main-area {

  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sales-page /* --- Header --- */
.app-header {

  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--divider-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  flex-shrink: 0;
}

.sales-page .breadcrumb {

  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-base);
}

.sales-page .breadcrumb-item {

  color: var(--text-secondary);
}

.sales-page .breadcrumb-separator {

  color: var(--text-disabled);
}

.sales-page .header-actions {

  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.sales-page .header-action-btn {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.sales-page /* --- Content Area --- */
.content-area {

  flex: 1;
  overflow-y: auto;
  padding: var(--content-padding);
}

.sales-page /* --- Filter Bar --- */
.filter-bar {

  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.sales-page .filter-item {

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sales-page .filter-label {

  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.sales-page .filter-select, .sales-page .filter-input {

  height: 32px;
  padding: 0 var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-body);
  background: #fff;
  outline: none;
  transition: all var(--transition-fast);
  min-width: 140px;
}

.sales-page .filter-select:focus, .sales-page .filter-input:focus {

  border-color: var(--primary-6);
  box-shadow: 0 0 0 2px rgba(0, 184, 169, 0.1);
}

.sales-page .filter-select {

  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

.sales-page /* --- Buttons --- */
.btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 32px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sales-page .btn-primary {

  background: var(--primary-6);
  color: #fff;
}

.sales-page .btn-primary:hover {

  background: var(--primary-7);
}

.sales-page .btn-default {

  background: #fff;
  border-color: var(--border-color);
  color: var(--text-body);
}

.sales-page .btn-default:hover {

  border-color: var(--primary-6);
  color: var(--primary-6);
}

.sales-page .btn-link {

  background: transparent;
  color: var(--primary-6);
  padding: 0 var(--space-sm);
  height: auto;
}

.sales-page .btn-link:hover {

  color: var(--primary-7);
}

.sales-page .btn-sm {

  height: 28px;
  padding: 0 var(--space-md);
  font-size: var(--font-size-xs);
}

.sales-page /* --- KPI Cards --- */
.kpi-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.sales-page .kpi-card {

  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.sales-page .kpi-card:hover {

  box-shadow: var(--shadow-lg);
}

.sales-page .kpi-card-header {

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.sales-page .kpi-card-label {

  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.sales-page .kpi-card-icon {

  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sales-page .kpi-card-icon.teal {

  background: var(--primary-1);
  color: var(--primary-6);
}

.sales-page .kpi-card-icon.success {

  background: var(--success-bg);
  color: var(--success);
}

.sales-page .kpi-card-icon.warning {

  background: var(--warning-bg);
  color: var(--warning);
}

.sales-page .kpi-card-icon.info {

  background: var(--info-bg);
  color: var(--info);
}

.sales-page .kpi-card-value {

  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.sales-page .kpi-card-unit {

  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  margin-left: var(--space-xs);
}

.sales-page .kpi-card-trend {

  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
}

.sales-page .kpi-card-trend.up {

  color: var(--success);
}

.sales-page .kpi-card-trend.down {

  color: var(--danger);
}

.sales-page .kpi-card-sub {

  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.sales-page /* --- Chart Card --- */
.chart-grid {

  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.sales-page .chart-grid.cols-2 {

  grid-template-columns: 1fr 1fr;
}

.sales-page .chart-grid.cols-3 {

  grid-template-columns: 1fr 1fr 1fr;
}

.sales-page .chart-card {

  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.sales-page .chart-card-header {

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.sales-page .chart-card-title {

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sales-page .chart-card-title iconify-icon {

  color: var(--primary-6);
}

.sales-page .chart-card-actions {

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sales-page .chart-container {

  width: 100%;
  min-height: 300px;
}

.sales-page .chart-container.tall {

  min-height: 360px;
}

.sales-page .chart-container.short {

  min-height: 240px;
}

.sales-page /* --- Data Table --- */
.data-card {

  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
}

.sales-page .data-card-header {

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.sales-page .data-card-title {

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sales-page .data-table-wrapper {

  overflow-x: auto;
}

.sales-page .data-table {

  width: 100%;
  border-collapse: collapse;
}

.sales-page .data-table thead th {

  background: var(--table-header-bg);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider-color);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
}

.sales-page .data-table thead th:hover {

  color: var(--primary-6);
}

.sales-page .data-table thead th .sort-icon {

  opacity: 0.4;
  margin-left: 4px;
}

.sales-page .data-table tbody td {

  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--divider-color);
  color: var(--text-body);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

.sales-page .data-table tbody tr:hover {

  background: var(--primary-1);
}

.sales-page .data-table tbody tr:last-child td {

  border-bottom: none;
}

.sales-page .data-table .num {

  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-page .data-table .highlight {

  color: var(--primary-6);
  font-weight: var(--font-weight-medium);
}

.sales-page /* --- Status Tags --- */
.tag {

  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.sales-page .tag-success {

  background: var(--success-bg);
  color: var(--success);
}

.sales-page .tag-warning {

  background: var(--warning-bg);
  color: var(--warning);
}

.sales-page .tag-danger {

  background: var(--danger-bg);
  color: var(--danger);
}

.sales-page .tag-info {

  background: var(--info-bg);
  color: var(--info);
}

.sales-page .tag-default {

  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
}

.sales-page /* --- Progress Bar --- */
.progress-bar {

  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.sales-page .progress-bar-fill {

  height: 100%;
  background: var(--primary-6);
  border-radius: 3px;
  transition: width var(--transition-normal);
}

.sales-page .progress-bar-fill.success {

  background: var(--success);
}

.sales-page .progress-bar-fill.warning {

  background: var(--warning);
}

.sales-page .progress-bar-fill.danger {

  background: var(--danger);
}

.sales-page /* --- Pagination --- */
.pagination {

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.sales-page .pagination-btn {

  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-body);
  background: #fff;
  transition: all var(--transition-fast);
}

.sales-page .pagination-btn:hover {

  border-color: var(--primary-6);
  color: var(--primary-6);
}

.sales-page .pagination-btn.active {

  background: var(--primary-6);
  border-color: var(--primary-6);
  color: #fff;
}

.sales-page .pagination-btn:disabled {

  cursor: not-allowed;
  opacity: 0.4;
}

.sales-page /* --- Tab Bar (Sub-tabs within a page) --- */
.tab-bar {

  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: var(--space-lg);
}

.sales-page .tab-item {

  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sales-page .tab-item:hover {

  color: var(--primary-6);
}

.sales-page .tab-item.active {

  color: var(--primary-6);
  border-bottom-color: var(--primary-6);
  font-weight: var(--font-weight-medium);
}

.sales-page /* --- Scatter / Matrix quadrant labels --- */
.quadrant-label {

  position: absolute;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.sales-page /* --- Utility --- */
.text-right {
 text-align: right; }

.sales-page .text-center {
 text-align: center; }

.sales-page .text-primary {
 color: var(--primary-6); }

.sales-page .text-success {
 color: var(--success); }

.sales-page .text-warning {
 color: var(--warning); }

.sales-page .text-danger {
 color: var(--danger); }

.sales-page .text-secondary {
 color: var(--text-secondary); }

.sales-page .font-semibold {
 font-weight: var(--font-weight-semibold); }

.sales-page .font-medium {
 font-weight: var(--font-weight-medium); }

.sales-page .mt-0 {
 margin-top: 0; }

.sales-page .mb-0 {
 margin-bottom: 0; }

.sales-page .w-full {
 width: 100%; }

.sales-page /* --- Scrollbar --- */
::-webkit-scrollbar {

  width: 6px;
  height: 6px;
}

.sales-page ::-webkit-scrollbar-track {

  background: transparent;
}

.sales-page ::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.sales-page ::-webkit-scrollbar-thumb:hover {

  background: rgba(0, 0, 0, 0.25);
}

/* --- 工具类 --- */
.sales-page .no-scrollbar::-webkit-scrollbar {
 display: none; }

.sales-page .no-scrollbar {
 -ms-overflow-style: none; scrollbar-width: none; }

.sales-page [data-icon] {

        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }