/* Sales Dashboard - Exact Overview Page Style */

/* Sales Page Layout */
#sales-page {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Page Header */
#sales-page .page-header {
  margin-bottom: 2rem;
}

#sales-page .page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 0.5rem 0;
}

#sales-page .page-header p {
  color: hsl(var(--foreground-muted));
  margin: 0;
  font-size: 0.9rem;
}

/* Sales Toolbar - Dashboard Style */
.sales-toolbar {
  /* Updated to allow smart-widget styles to shine through */
  background: transparent;
  border: none;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.toolbar-search {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(var(--foreground-muted));
}

.toolbar-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-dropdown {
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  cursor: pointer;
  min-width: 120px;
}

.filter-dropdown:hover {
  border-color: hsl(var(--primary));
}

.filter-dropdown:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.toolbar-right {
  display: flex;
  gap: 0.75rem;
}

/* Buttons - Exact Overview Style */
.add-opportunity-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: hsl(var(--primary));
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}

.add-opportunity-btn:hover {
  background: hsl(var(--primary-hover));
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 0.875rem;
}

.btn-primary {
  background: hsl(var(--primary));
  color: white;
}

.btn-primary:hover {
  background: hsl(var(--primary-hover));
}

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

.btn-secondary:hover {
  background: hsl(var(--secondary-hover));
}

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground-muted));
  border-color: hsl(var(--border));
}

.btn-ghost:hover {
  background: hsl(var(--background-hover));
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary));
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Sales Grid Layout */
.sales-page-grid {
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  max-width:1200px;
  margin:0 auto;
}

.sales-main-content {
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.sales-sidebar {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.25rem;
}

/* KPI Grid - Overview Style */
.sales-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* KPI Cards - Exact Overview Style (scoped for specificity) */
#sales-page .sales-kpi-grid .kpi-card {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#sales-page .sales-kpi-grid .kpi-card:hover {
  border-color: hsl(var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.kpi-title {
  font-weight: 600;
  color: hsl(var(--foreground-muted));
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--primary));
  font-size: 1.5rem;
}

.kpi-value-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.kpi-trend.trend-up {
  color: hsl(var(--success));
}

.kpi-trend.trend-down {
  color: hsl(var(--danger));
}

.kpi-trend.trend-neutral {
  color: hsl(var(--foreground-muted));
}

.kpi-content {
  text-align: left;
}

.kpi-description {
  font-size: 0.875rem;
  color: hsl(var(--foreground-muted));
  margin: 0;
}

/* Dashboard Widgets - Overview Style */
.dashboard-widget {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow: hidden;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.widget-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 0.25rem 0;
}

.widget-subtitle {
  color: hsl(var(--foreground-muted));
  font-size: 0.875rem;
  margin: 0;
}

/* Pipeline Summary */
.pipeline-summary-card {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.pipeline-summary-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid hsl(var(--border));
}

.summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.pipeline-stages-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }

.pipeline-stage-block {
  background: hsl(var(--background));
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid hsl(var(--border));
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pipeline-stage-block:last-child {
  border-right: none;
}

.pipeline-stage-block:hover {
  background: hsl(var(--background-hover));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stage-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground-muted));
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage-count {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
}

.stage-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--success));
}

/* Kanban Board */
.sales-kanban-card {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.kanban-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid hsl(var(--border));
}

.kanban-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.kanban-board { background: hsl(var(--background-subtle)); padding:1.25rem; overflow-x:auto; }

.kanban-columns { display:grid; grid-auto-flow:column; grid-auto-columns:260px; gap:1rem; }

.kanban-column {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  overflow: hidden;
  max-height: 600px;
  display: flex;
  flex-direction: column;
}

.column-header {
  padding: 1rem;
  background: hsl(var(--background-subtle));
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-stage-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* New responsive overrides for vertical layout */
@media (max-width:1200px){
  .sales-sidebar { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .kanban-columns { grid-auto-columns:240px; }
}
@media (max-width:700px){
  #sales-page { padding:1rem; }
  .sales-page-grid { gap:1.25rem; }
  .pipeline-stages-row { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
  .kanban-columns { grid-auto-columns:200px; }
}

/* === Sales Layout Final Overrides (Accessibility & Sizing) === */
#sales-page .kanban-board { overflow-x:hidden; }
#sales-page .kanban-columns { display:flex; flex-wrap:wrap; gap:1.25rem; width:100%; min-width:0; }
#sales-page .kanban-column { flex:1 1 300px; max-width:360px; min-width:280px; }

/* Remove any legacy min-width forcing horizontal slider */
#sales-page .kanban-columns[style] { min-width:0 !important; }

/* Enlarge pipeline stage blocks & improve separation */
#sales-page .pipeline-stage-block { min-height:140px; border:1px solid var(--border); margin:-1px 0 0 -1px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
#sales-page .pipeline-stages-row { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:linear-gradient(145deg,var(--surface-secondary),var(--surface-tertiary)); }

/* Stronger contrast for action buttons */
#sales-page .pipeline-summary-header .btn-primary,
#sales-page .kanban-header .btn-primary {
  background:var(--primary) !important;
  color:#fff !important;
  border:1px solid var(--primary) !important;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06) inset;
}
#sales-page .pipeline-summary-header .btn-primary:hover,
#sales-page .kanban-header .btn-primary:hover { filter:brightness(1.08); }

#sales-page .pipeline-summary-header .btn-secondary,
#sales-page .kanban-header .btn-secondary { background:var(--surface-secondary); color:var(--foreground); border:1px solid var(--border); }
#sales-page .pipeline-summary-header .btn-secondary:hover,
#sales-page .kanban-header .btn-secondary:hover { background:var(--surface-tertiary); }

/* Distinguish widget edges */
#sales-page .pipeline-summary-card,
#sales-page .sales-kanban-card,
#sales-page .sales-sidebar .widget-card { border:1px solid var(--border); box-shadow:0 2px 6px -2px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.04) inset; }

/* Make sidebar widgets larger by widening grid min */
.sales-sidebar { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
@media (max-width:900px){ .sales-sidebar { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } }

/* KPI card emphasis (slightly larger values & clearer separation) */
#sales-page .sales-kpi-grid .kpi-card { box-shadow:0 3px 10px -3px rgba(0,0,0,.25); }
#sales-page .sales-kpi-grid .kpi-card:not(:last-child){ border-right:1px solid rgba(255,255,255,.05); }

/* Deal card edge clarity */
#sales-page .deal-card { border:1px solid var(--border); box-shadow:0 2px 4px -2px rgba(0,0,0,.3); background:var(--card); }
#sales-page .deal-card:hover { box-shadow:0 4px 12px -4px rgba(0,0,0,.45); }

/* Focus outlines for improved navigation */
#sales-page .btn:focus, #sales-page .deal-card:focus, #sales-page .pipeline-stage-block:focus { outline:2px solid var(--primary); outline-offset:2px; }

/* Subtle separators inside kanban columns */
#sales-page .kanban-column .deal-card + .deal-card { margin-top:1rem; }

/* Ensure no horizontal overflow from overly wide elements */
body, #sales-page, .sales-page-grid { overflow-x:hidden; }

/* Force Deal Pipeline (kanban) to stack vertically */
#sales-page .kanban-columns { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:1.25rem !important; width:100% !important; min-width:0 !important; }
#sales-page .kanban-column { flex:0 0 auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; }
#sales-page .kanban-board { overflow-x:hidden !important; }
#sales-page .kanban-column { border:1px solid var(--border); box-shadow:0 2px 4px -2px rgba(0,0,0,.25); }
#sales-page .kanban-column .column-header { position:sticky; top:0; background:var(--background-subtle); z-index:1; }

/* === OVERRIDE: 3x3 Grid Layout for Deal Pipeline (supersedes vertical stack) === */
#sales-page .kanban-columns {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(260px,1fr)) !important;
  grid-auto-rows:auto;
  gap:1.25rem !important;
  width:100% !important;
  min-width:0 !important;
}
#sales-page .kanban-column { width:auto !important; max-width:100% !important; flex:none !important; }
#sales-page .kanban-board { overflow-x:hidden !important; }
@media (max-width:1100px){ #sales-page .kanban-columns { grid-template-columns:repeat(2,minmax(260px,1fr)) !important; } }
@media (max-width:700px){ #sales-page .kanban-columns { grid-template-columns:1fr !important; } }


.column-deal-count {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.column-body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Deal Cards */
.deal-card {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: grab;
}

.deal-card:hover {
  border-color: hsl(var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.deal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.deal-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
  line-height: 1.2;
}

.deal-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--success));
}

.deal-customer {
  font-size: 0.75rem;
  color: hsl(var(--foreground-muted));
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.deal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.deal-close-date {
  font-size: 0.75rem;
  color: hsl(var(--foreground-muted));
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.deal-close-date.urgent {
  color: hsl(var(--danger));
  font-weight: 600;
}

.deal-owner-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.deal-progress {
  margin-top: 0.5rem;
}

.deal-progress-bar {
  width: 100%;
  height: 0.25rem;
  background: hsl(var(--border));
  border-radius: 0.125rem;
  overflow: hidden;
}

.deal-progress-fill {
  height: 100%;
  background: hsl(var(--primary));
  border-radius: 0.125rem;
}

.add-deal-button {
  background: hsl(var(--background-subtle));
  border: 1px dashed hsl(var(--border));
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  color: hsl(var(--foreground-muted));
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: auto;
}

.add-deal-button:hover {
  background: hsl(var(--background-hover));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

/* Sidebar Widgets - Overview Style */
.top-opportunities-card,
.sales-leaderboard-card,
.recent-orders-card {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.top-opportunities-header,
.leaderboard-header,
.orders-header {
  padding: 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opportunities-title,
.leaderboard-title,
.orders-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 0.25rem 0;
}

.opportunities-subtitle,
.leaderboard-subtitle,
.orders-subtitle {
  color: hsl(var(--foreground-muted));
  font-size: 0.875rem;
  margin: 0;
}

.opportunities-list,
.leaderboard-list {
  max-height: 350px;
  overflow-y: auto;
}

.opportunity-item,
.leaderboard-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
}

.opportunity-item:hover,
.leaderboard-item:hover {
  background: hsl(var(--background-hover));
}

.opportunity-item:last-child,
.leaderboard-item:last-child {
  border-bottom: none;
}

.opportunity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.opportunity-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
  line-height: 1.3;
}

.opportunity-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--success));
}

.opportunity-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: hsl(var(--foreground-muted));
}

.opportunity-close-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Leaderboard */
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leaderboard-rank {
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground-muted));
  min-width: 1.5rem;
  text-align: center;
}

.leaderboard-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.leaderboard-info {
  flex: 1;
}

.leaderboard-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 0.125rem 0;
}

.leaderboard-deals {
  font-size: 0.75rem;
  color: hsl(var(--foreground-muted));
  margin: 0;
}

.leaderboard-revenue {
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--success));
  text-align: right;
}

.leaderboard-growth {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
  margin-top: 0.125rem;
  color: hsl(var(--success));
}

.leaderboard-growth.negative {
  color: hsl(var(--danger));
}

/* Recent Orders Table */
.orders-table-container {
  max-height: 350px;
  overflow: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.orders-table th {
  background: hsl(var(--background-subtle));
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  color: hsl(var(--foreground-muted));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.orders-table td {
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.orders-table tr:hover {
  background: hsl(var(--background-hover));
}

.order-id {
  font-weight: 600;
  color: hsl(var(--primary));
  cursor: pointer;
}

.order-id:hover {
  text-decoration: underline;
}

.order-customer {
  font-weight: 500;
  color: hsl(var(--foreground));
}

.order-amount {
  font-weight: 700;
  color: hsl(var(--success));
  text-align: right;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.status-paid {
  background: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
}

.status-badge.status-unpaid {
  background: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
}

.status-badge.status-overdue {
  background: hsl(var(--danger) / 0.1);
  color: hsl(var(--danger));
}

/* === Sales Page Enhancements (Added) === */
#sales-page .toolbar-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--surface-secondary) 100%);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
#sales-page .toolbar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  opacity: .6;
}
#sales-page .gradient-text {
  background: linear-gradient(135deg, var(--foreground) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#sales-page .filter-chips {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: .75rem;
}
#sales-page .chip {
  padding: .4rem .9rem;
  font-size: .6875rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-tertiary);
  color: var(--foreground-secondary);
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}
#sales-page .chip:hover { background: var(--secondary); color: var(--foreground); }
#sales-page .chip.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); box-shadow: var(--shadow-sm); }
#sales-page .chip:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.3); }

/* Align new smart widget cards inside sales page */
#sales-page .widget-card.smart-widget.small { margin-bottom: 1.5rem; }
#sales-page .sales-kpi-grid .smart-kpi { background: linear-gradient(135deg, var(--card) 0%, var(--surface-tertiary) 100%); }
#sales-page .sales-kpi-grid .smart-kpi { border:1px solid var(--card-border); position:relative; }
#sales-page .sales-kpi-grid .smart-kpi::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.35),transparent); pointer-events:none; }
#sales-page .sales-kpi-grid .smart-kpi:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 0 24px rgba(59,130,246,.12); }

/* Accessibility */
#sales-page .smart-kpi:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Responsive Design */
@media (max-width: 1200px) {
  .sales-page-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .sales-sidebar {
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .kanban-columns {
    grid-template-columns: repeat(3, 280px);
    min-width: 880px;
  }
}

/* === FIX / OVERRIDE BLOCK: Correct invalid hsl(var(--token)) usages === */
/* Reason: This file used patterns like hsl(var(--foreground)) while the design system
   variables already store full hsl() values (e.g., --foreground: hsl(210,11%,15%)).
   Wrapping them again produces invalid colors so the browser ignores those declarations.
   These scoped overrides re-declare key colors using the correct var(--token) form. */
#sales-page .sales-toolbar,
#sales-page .sales-kpi-grid .kpi-card,
#sales-page .pipeline-summary-card,
#sales-page .sales-kanban-card,
#sales-page .top-opportunities-card,
#sales-page .sales-leaderboard-card,
#sales-page .recent-orders-card {
  background: var(--card);
  color: var(--foreground);
}

#sales-page .kpi-title,
#sales-page .stage-name,
#sales-page .column-stage-name,
#sales-page .opportunity-name,
#sales-page .leaderboard-name,
#sales-page .orders-title { color: var(--foreground-secondary); }

#sales-page .kpi-value,
#sales-page .deal-value,
#sales-page .order-amount,
#sales-page .opportunity-value,
#sales-page .leaderboard-revenue { color: var(--success); }

#sales-page .kpi-card.smart-kpi { background: linear-gradient(135deg, var(--card) 0%, var(--surface-secondary) 100%); }
#sales-page .kpi-card .kpi-value { font-size:clamp(1.4rem,1.4vw + 1rem,2rem); font-weight:700; line-height:1.05; }
#sales-page .kpi-card .kpi-title { font-size:clamp(.7rem,.45vw + .5rem,.9rem); }
#sales-page .kpi-card .kpi-description { font-size:clamp(.55rem,.35vw + .4rem,.7rem); }

/* Toolbar visual confirmation */
#sales-page .toolbar-card { border: 1px solid var(--card-border); }

/* Subtle visual indicator (temporary) to confirm overrides active. Remove later. */

/* === Dynamic Widget Class Styles (new) === */
#sales-page .pipeline-summary-widget,
#sales-page .top-opportunities-widget,
#sales-page .kanban-widget,
#sales-page .leaderboard-widget,
#sales-page .orders-widget {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
#sales-page .pipeline-summary-widget::before,
#sales-page .top-opportunities-widget::before,
#sales-page .kanban-widget::before,
#sales-page .leaderboard-widget::before,
#sales-page .orders-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right:0; height: 3px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.6;
}
#sales-page .widget-header { padding: 1.25rem 1.5rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; }
#sales-page .widget-header, #sales-page .stat-card, #sales-page .stage-card, #sales-page .opportunity-card, #sales-page .leaderboard-item, #sales-page .orders-widget { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.4,.14,.3,1); }
#sales-page .widget-title { font-size:1.125rem; font-weight:700; color:var(--foreground); margin:0 0 .25rem; }
#sales-page .widget-subtitle { font-size:.75rem; color:var(--foreground-secondary); margin:0; }
#sales-page .widget-actions { display:flex; align-items:center; gap:.5rem; }

/* Stats grid inside widgets */
#sales-page .pipeline-stats,
#sales-page .leaderboard-summary,
#sales-page .orders-summary,
#sales-page .opportunities-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; padding:1rem 1.5rem 0; }

#sales-page .stat-card { background: var(--surface-secondary); border:1px solid var(--border); border-radius: var(--radius); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; }
#sales-page .stat-label { font-size:.625rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--foreground-muted); display:flex; align-items:center; gap:.4rem; }
#sales-page .stat-icon { width:14px; height:14px; opacity:.7; }
#sales-page .stat-value { font-size:clamp(1rem,1.1vw + .65rem,1.3rem); font-weight:700; color:var(--foreground); line-height:1.05; }
#sales-page .stat-value.trend-up { color: var(--success); }
#sales-page .stat-value.trend-down { color: var(--destructive); }

/* Pipeline stage cards */
#sales-page .pipeline-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.75rem; padding:1rem 1.5rem 1.25rem; }
#sales-page .stage-card { background: var(--surface-secondary); border:1px solid var(--border); border-radius: var(--radius); padding:1rem .95rem 1.15rem; cursor:pointer; position:relative; transform:translateY(0) scale(1); transition: background .45s ease, transform .6s cubic-bezier(.19,.6,.2,1), box-shadow .6s ease, border-color .45s ease; }
#sales-page .stage-card:hover { background:var(--surface-tertiary); transform:translateY(-6px) scale(1.02); box-shadow:0 10px 24px -8px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.25); border-color:var(--border-hover); }
#sales-page .stage-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
#sales-page .stage-badge { font-size:.55rem; font-weight:700; padding:.25rem .45rem; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; background:var(--secondary); color:var(--foreground-secondary); }
#sales-page .stage-conversion { font-size:.625rem; font-weight:600; color:var(--foreground-muted); }
#sales-page .stage-count { font-size:clamp(1.1rem,1vw + .8rem,1.4rem); font-weight:700; color:var(--foreground); line-height:1; margin-bottom:.35rem; }
#sales-page .stage-value { font-size:clamp(.7rem,.55vw + .4rem,.85rem); font-weight:600; color:var(--success); letter-spacing:.04em; }

/* Stage color accents */
#sales-page .stage-badge.stage-prospect { background:#e2e8f0; color:#475569; }
#sales-page .stage-badge.stage-qualified { background:#dbeafe; color:#1d4ed8; }
#sales-page .stage-badge.stage-proposal { background:#fef3c7; color:#b45309; }
#sales-page .stage-badge.stage-negotiation { background:#ede9fe; color:#6d28d9; }
#sales-page .stage-badge.stage-won { background:#d1fae5; color:#047857; }
#sales-page .stage-badge.stage-lost { background:#fee2e2; color:#b91c1c; }

/* Kanban */
#sales-page .kanban-board { padding:1rem 1.25rem 1.5rem; overflow-x:auto; }
#sales-page .kanban-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.25rem; }
#sales-page .kanban-column { background:var(--surface-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; max-height:540px; transition: background .4s ease, transform .55s cubic-bezier(.4,.14,.3,1), box-shadow .5s ease, border-color .4s ease; }
#sales-page .column-header { padding:.85rem .9rem; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--surface) 0%, var(--surface-secondary) 100%); }
#sales-page .column-value { font-size:.65rem; font-weight:600; color:var(--foreground-muted); letter-spacing:.04em; }
#sales-page .kanban-cards { flex:1; padding:.75rem .85rem 1rem; display:flex; flex-direction:column; gap:.75rem; overflow-y:auto; }
#sales-page .opportunity-card.dragging { opacity:.45; box-shadow:0 0 0 2px var(--primary) inset; }
#sales-page .kanban-column.drag-over { outline:2px dashed var(--primary); outline-offset: -2px; }

/* Opportunity cards */
#sales-page .opportunity-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.05rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; position:relative; font-size:.75rem; transform:translateY(0) scale(1); transition: background .45s ease, transform .6s cubic-bezier(.19,.6,.2,1), box-shadow .6s ease, border-color .45s ease; }
#sales-page .opportunity-card:hover { border-color:var(--primary); box-shadow:0 10px 26px -10px rgba(0,0,0,.4), 0 0 0 1px var(--border); transform:translateY(-6px) scale(1.02); }
#sales-page .card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
#sales-page .card-title { font-size:.8rem; font-weight:600; color:var(--foreground); margin:0; line-height:1.25; }
#sales-page .card-probability { font-size:clamp(.65rem,.35vw + .5rem,.85rem); font-weight:700; color:var(--primary); background:var(--secondary); padding:.3rem .55rem; border-radius:999px; }
#sales-page .card-customer { display:flex; align-items:center; gap:.4rem; font-size:.6rem; font-weight:500; color:var(--foreground-secondary); }
#sales-page .card-customer-icon { width:12px; height:12px; opacity:.6; }
#sales-page .card-value { display:flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:600; color:var(--foreground-secondary); }
#sales-page .card-value-icon { width:12px; height:12px; opacity:.6; }
#sales-page .card-value-amount { font-weight:700; color:var(--success); font-size:clamp(.75rem,.6vw + .45rem,.95rem); }
#sales-page .card-footer { display:flex; justify-content:space-between; align-items:center; }
#sales-page .card-date { display:flex; align-items:center; gap:.35rem; font-size:.55rem; font-weight:600; color:var(--foreground-muted); }
#sales-page .card-date-icon { width:12px; height:12px; opacity:.6; }
#sales-page .card-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--primary) 0%, var(--accent) 100%); display:flex; justify-content:center; align-items:center; font-size:.65rem; font-weight:700; color:var(--primary-foreground); box-shadow:var(--shadow-sm); }
#sales-page .card-actions { display:flex; gap:.4rem; margin-top:.25rem; }
#sales-page .card-action-btn { background:var(--secondary); border:1px solid var(--border); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); cursor:pointer; transition:all var(--transition-fast); }
#sales-page .card-action-btn:hover { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
#sales-page .card-action-icon { width:14px; height:14px; }

/* Leaderboard & opportunities list items */
#sales-page .leaderboard-item, #sales-page .opportunity-item { background:var(--surface-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.1rem; cursor:pointer; transform:translateY(0) scale(1); transition: background .45s ease, transform .6s cubic-bezier(.19,.6,.2,1), box-shadow .6s ease, border-color .45s ease; }
#sales-page .leaderboard-item:hover, #sales-page .opportunity-item:hover { background:var(--surface-tertiary); transform:translateY(-6px) scale(1.02); box-shadow:0 10px 24px -8px rgba(0,0,0,.35); border-color:var(--border-hover); }
#sales-page .stage-card::after,
#sales-page .opportunity-card::after,
#sales-page .leaderboard-item::after,
#sales-page .opportunity-item::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 70%); opacity:0; pointer-events:none; transition:opacity .6s ease; border-radius:inherit; }
#sales-page .stage-card:hover::after,
#sales-page .opportunity-card:hover::after,
#sales-page .leaderboard-item:hover::after,
#sales-page .opportunity-item:hover::after { opacity:1; }
#sales-page .rep-header, #sales-page .opportunity-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.65rem; }
#sales-page .rep-info { display:flex; align-items:center; gap:.5rem; }
#sales-page .rep-rank, #sales-page .opportunity-rank { font-size:clamp(.75rem,.4vw + .55rem,1rem); font-weight:700; color:var(--foreground-muted); }
#sales-page .rep-avatar, #sales-page .opportunity-rank + .rep-avatar { width:32px; height:32px; }
#sales-page .rep-avatar, #sales-page .card-avatar, #sales-page .opportunity-item .card-avatar { border-radius:50%; background:linear-gradient(135deg,var(--primary) 0%, var(--accent) 100%); color:var(--primary-foreground); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.65rem; }
#sales-page .rep-details h4, #sales-page .opportunity-info h3 { margin:0 0 .15rem; font-size:.8rem; font-weight:600; color:var(--foreground); }
#sales-page .rep-location, #sales-page .opportunity-customer { font-size:.6rem; font-weight:500; color:var(--foreground-secondary); }
#sales-page .opportunity-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:.55rem; }
#sales-page .rep-metrics { display:flex; align-items:stretch; justify-content:space-between; gap:1rem; }
#sales-page .rep-metrics > div { flex:1; min-width:80px; display:flex; flex-direction:column; }
#sales-page .rep-metrics .metric-value { text-align:left; }
@media (max-width: 760px) { #sales-page .rep-metrics { flex-wrap:wrap; row-gap:.85rem; } }
#sales-page .metric-value, #sales-page .detail-value { font-size:clamp(.8rem,.55vw + .55rem,1.1rem); font-weight:700; color:var(--foreground); line-height:1.1; }
#sales-page .metric-value.trend-up, #sales-page .detail-value.trend-up { color:var(--success); }
#sales-page .metric-value.trend-down { color:var(--destructive); }
#sales-page .metric-label, #sales-page .detail-label { font-size:.55rem; font-weight:600; color:var(--foreground-muted); text-transform:uppercase; letter-spacing:.05em; }
#sales-page .opportunity-badges { display:flex; gap:.4rem; }
#sales-page .priority-high { background:#fee2e2; color:#b91c1c; }
#sales-page .priority-medium { background:#fef3c7; color:#b45309; }
#sales-page .priority-low { background:#dbeafe; color:#1d4ed8; }

/* Orders table */
#sales-page .orders-table { width:100%; border-collapse:collapse; font-size:.7rem; }
#sales-page .orders-table th { text-align:left; padding:.6rem .75rem; font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--surface-secondary); color:var(--foreground-muted); border-bottom:1px solid var(--border); }
#sales-page .orders-table td { padding:.65rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
#sales-page .orders-table tr:hover { background:var(--surface-secondary); }
#sales-page .orders-table tr { transition: background .3s ease; }
#sales-page .order-id { font-weight:600; color:var(--primary); cursor:pointer; }
#sales-page .order-id:hover { text-decoration:underline; }
#sales-page .customer-info h5 { margin:0 0 .15rem; font-size:.7rem; font-weight:600; color:var(--foreground); }
#sales-page .payment-method { font-size:.55rem; color:var(--foreground-muted); }
#sales-page .amount { font-weight:700; color:var(--foreground); text-align:right; font-size:clamp(.8rem,.8vw + .5rem,1.05rem); }
#sales-page .status-badge { font-size:.55rem; font-weight:700; padding:.35rem .55rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; display:inline-block; }
#sales-page .status-badge.status-paid { background:var(--success-light); color:var(--success); }
#sales-page .status-badge.status-overdue { background:var(--destructive-light); color:var(--destructive); }
#sales-page .status-badge.status-sent { background:var(--warning-light); color:var(--warning); }
#sales-page .status-badge.status-draft { background:var(--secondary); color:var(--foreground-secondary); }
#sales-page .status-badge.status-partial { background:var(--accent-hover); color:var(--primary-foreground); }

/* Buttons (scoped) */
#sales-page .btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .75rem; font-size:.6rem; font-weight:600; border-radius:var(--radius); border:1px solid var(--border); cursor:pointer; background:var(--secondary); color:var(--foreground-secondary); transition:all var(--transition-fast); }
#sales-page .btn-primary { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
#sales-page .btn-primary:hover { background:var(--primary-hover); }
#sales-page .btn-secondary { background:var(--surface-secondary); color:var(--foreground); }
#sales-page .btn-ghost { background:transparent; color:var(--foreground-muted); }
#sales-page .btn-ghost:hover { color:var(--foreground); background:var(--surface-secondary); }
#sales-page .btn-outline { background:transparent; color:var(--foreground); border-color:var(--border); }
#sales-page .btn-outline:hover { border-color:var(--primary); color:var(--primary); }
#sales-page .btn-sm { padding:.35rem .6rem; font-size:.55rem; }
#sales-page .btn-icon { width:14px; height:14px; }
#sales-page .order-actions .action-btn { background: var(--surface-secondary); border:1px solid var(--border); width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius: 8px; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; position:relative; }
#sales-page .order-actions .action-btn { padding:0; min-width:32px; color: var(--foreground); background: linear-gradient(180deg,var(--surface-secondary),var(--surface-tertiary)); }
#sales-page .order-actions .action-btn:not(:hover) svg { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); }
#sales-page .order-actions .action-btn:hover { filter: brightness(1.05); }
#sales-page .order-actions .action-btn:focus-visible { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
@media (prefers-color-scheme: dark) { #sales-page .order-actions .action-btn { background: linear-gradient(180deg,var(--surface-tertiary),rgba(255,255,255,.04)); border-color: var(--border); } #sales-page .order-actions .action-btn svg { color: var(--foreground); } }
#sales-page .order-actions .action-btn:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); box-shadow:0 2px 8px -2px rgba(0,0,0,.25); }
#sales-page .order-actions .action-btn:active { transform: translateY(1px); }
#sales-page .order-actions .action-btn svg { width:18px; height:18px; stroke-width:2; stroke: currentColor; color: var(--foreground); opacity:.85; transition: color .25s ease, opacity .25s ease; }
#sales-page .order-actions .action-btn:hover svg { color: var(--primary-foreground); opacity:1; }
#sales-page .order-actions .action-btn.is-secondary { background: var(--secondary); color: var(--foreground); }
#sales-page .order-actions .action-btn.is-danger { background:#fee2e2; color:#b91c1c; }
#sales-page .order-actions .action-btn.is-warning { background:#fef3c7; color:#b45309; }
#sales-page .order-actions .action-btn.is-accent { background: var(--accent); color: var(--primary-foreground); }
@media (prefers-color-scheme: dark) { #sales-page .order-actions .action-btn { background: var(--surface-tertiary); } }
#sales-page .order-actions .action-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Dropdown (filter-select) styling with slide/fade */
#sales-page .filter-select { appearance:none; -webkit-appearance:none; background: var(--surface-secondary); border:1px solid var(--border); padding:.5rem .75rem; font-size:.65rem; font-weight:600; border-radius: var(--radius); color: var(--foreground); line-height:1.2; cursor:pointer; position:relative; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
#sales-page .filter-select:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
#sales-page .filter-select:hover { background: var(--surface-tertiary); }

/* Simulated dropdown open animation (applies when re-render changes value) */
@keyframes selectPulse { 0% { box-shadow:0 0 0 0 rgba(59,130,246,.45); } 100% { box-shadow:0 0 0 6px rgba(59,130,246,0); } }
#sales-page .filter-select.anim-pulse { animation: selectPulse .6s ease-out; }

/* Slide down for dynamically inserted option groups (future extensibility) */
@keyframes salesSlideDown { 0% { opacity:0; transform: translateY(-6px); } 100% { opacity:1; transform: translateY(0); } }
#sales-page .filter-select option { padding:.35rem .5rem; }

/* Subtle lift on hover for key cards */
#sales-page .pipeline-summary-widget:hover,
#sales-page .top-opportunities-widget:hover,
#sales-page .kanban-widget:hover,
#sales-page .leaderboard-widget:hover,
#sales-page .orders-widget:hover { transform: translateY(-4px); box-shadow: 0 6px 18px -6px rgba(0,0,0,.15), 0 0 0 1px var(--border); }

/* Utility classes inside sales scope if tailwind-like classes existed */
#sales-page .grid { display:grid; }
#sales-page .grid-cols-1 { grid-template-columns:1fr; }
#sales-page .lg\:grid-cols-2 { grid-template-columns:repeat(auto-fit,minmax(520px,1fr)); }
#sales-page .gap-6 { gap:1.5rem; }

@media (max-width: 900px) { #sales-page .lg\:grid-cols-2 { grid-template-columns:1fr; } }

/* Make Recent Orders widget span both grid columns on large screens */
#sales-page .orders-widget { grid-column: 1 / -1; }

/* Orders summary alignment fix */
#sales-page .orders-summary { display:grid; align-items:stretch; }
#sales-page .orders-summary .stat-card { display:flex; flex-direction:column; justify-content:center; gap:.25rem; padding:1rem 1.1rem; min-height:72px; }
#sales-page .orders-summary .stat-value { line-height:1; display:block; }
#sales-page .orders-summary .stat-label { line-height:1; margin:0; transform:translateY(-1px); letter-spacing:.06em; }

/* Explicit transition overrides (ensure precedence) */
#sales-page .pipeline-summary-widget,
#sales-page .top-opportunities-widget,
#sales-page .kanban-widget,
#sales-page .leaderboard-widget,
#sales-page .orders-widget,
#sales-page .stage-card,
#sales-page .opportunity-card,
#sales-page .leaderboard-item,
#sales-page .opportunity-item,
#sales-page .kanban-column {
  will-change: transform, box-shadow, background, border-color;
  transition: background .4s ease, transform .5s cubic-bezier(.4,.14,.3,1), box-shadow .5s ease, border-color .4s ease;
}

#sales-page .stage-card:hover,
#sales-page .opportunity-card:hover,
#sales-page .leaderboard-item:hover,
#sales-page .opportunity-item:hover,
#sales-page .kanban-column:hover { transform: translateY(-4px); }



@media (max-width: 1024px) {
  #sales-page {
    padding: 1rem;
  }
  
  .sales-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }
  
  .toolbar-left {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .toolbar-search {
    max-width: none;
    order: 3;
    flex-basis: 100%;
  }
  
  .toolbar-filters {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .pipeline-stages-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .kanban-columns {
    grid-template-columns: repeat(2, 280px);
    min-width: 580px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.25rem;
  }
  
  .toolbar-filters {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .filter-dropdown {
    min-width: auto;
  }
  
  .pipeline-stages-row {
    grid-template-columns: 1fr;
  }
  
  .pipeline-stage-block {
    min-height: 100px;
    padding: 1rem;
  }
  
  .kanban-columns {
    grid-template-columns: 1fr;
    min-width: auto;
  }
  
  .kanban-column {
    max-height: 400px;
  }
  
  .sales-sidebar {
    grid-template-columns: 1fr;
  }
  
  .sales-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .toolbar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .add-opportunity-btn {
    justify-content: center;
    padding: 0.875rem 1.25rem;
  }
  
  .sales-kpi-grid {
    grid-template-columns: 1fr;
  }
  
  .kpi-card {
    padding: 1rem;
  }
  
  .kpi-value {
    font-size: 1.5rem;
  }
  
  .pipeline-summary-header,
  .kanban-header,
  .top-opportunities-header,
  .leaderboard-header,
  .orders-header {
    padding: 1rem;
  }

/* === Fix: Top Opportunities widget should not inherit another widget's dynamic height === */
#sales-page [data-widget="top-opportunities"].widget-card { height:auto !important; min-height:0 !important; }
#sales-page [data-widget="top-opportunities"].widget-card.is-empty { border-bottom:1px solid var(--border); }
#sales-page [data-widget="top-opportunities"].widget-card.is-empty .opportunities-list { max-height:none; }
#sales-page [data-widget="top-opportunities"].widget-card.is-empty .opportunities-list .empty { padding:1.1rem .75rem; min-height:auto; }
#sales-page [data-widget="top-opportunities"] .opportunities-list { max-height:260px; overflow-y:auto; }
#sales-page [data-widget="top-opportunities"] .opportunities-list .empty { display:flex; align-items:center; justify-content:center; padding:1.25rem .75rem; text-align:center; width:100%; font-size:.8rem; color:var(--foreground-muted); }
#sales-page [data-widget="top-opportunities"] .opportunities-list .empty:before { content:'\200B'; }

/* Ensure sibling widgets (like extended-orders) do not stretch others via shared flex rules */
#sales-page .sales-sidebar { align-items:start; }
#sales-page .sales-sidebar .widget-card.smart-widget.small { align-self:start; }

/* RTL centering safeguards */
html[dir="rtl"] #sales-page [data-widget="top-opportunities"] .opportunities-list .empty { text-align:center; }
  
  .deal-card {
    padding: 0.75rem;
  }
  
  .opportunity-item,
  .leaderboard-item {
    padding: 0.75rem 1rem;
  }
}

/* Loading and interaction states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.kanban-column.drag-over {
  background: hsl(var(--primary) / 0.05);
  border: 1px dashed hsl(var(--primary));
}

.success-highlight {
  background: hsl(var(--success) / 0.1) !important;
  border-color: hsl(var(--success)) !important;
}

/* Focus states for accessibility */
.search-input:focus,
.filter-dropdown:focus,
.add-opportunity-btn:focus,
.deal-card:focus,
.opportunity-item:focus,
.leaderboard-item:focus {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pipeline-stage-block,
  .deal-card,
  .opportunity-item {
    border-width: 2px;
  }
  
  .add-opportunity-btn {
    border: 2px solid hsl(var(--primary));
  }
  
  .status-badge {
    border: 1px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .sales-toolbar,
  .add-opportunity-btn,
  .add-deal-button {
    display: none !important;
  }
  
  .sales-page-grid {
    grid-template-columns: 1fr;
  }
  
  .pipeline-stages-row {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .kpi-card,
  .pipeline-summary-card,
  .sales-kanban-card {
    box-shadow: none;
    border: 1px solid #000;
    break-inside: avoid;
  }
}

/* ===== ADVANCED RESPONSIVE DESIGN ===== */
@media (max-width: 1400px) {
  #sales-page .sales-page-grid {
    grid-template-columns: 1fr 320px;
    gap: 28px;
  }
  
  #sales-page .kanban-columns {
    grid-template-columns: repeat(3, 300px);
    min-width: 950px;
  }
}

@media (max-width: 1200px) {
  #sales-page .sales-page-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  #sales-page .sales-sidebar {
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }
  
  #sales-page .kanban-columns {
    grid-template-columns: repeat(2, 300px);
    min-width: 650px;
  }
}

@media (max-width: 1024px) {
  #sales-page .sales-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin: 20px 24px 28px;
    padding: 24px;
  }
  
  #sales-page .toolbar-left {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  #sales-page .page-title {
    font-size: 24px;
  }
  
  #sales-page .toolbar-search {
    min-width: 280px;
    max-width: none;
    order: 3;
    flex-basis: 100%;
  }
  
  #sales-page .toolbar-filters {
    gap: 12px;
    flex-wrap: wrap;
  }
  
  #sales-page .sales-page-grid {
    padding: 0 24px 32px;
  }
  
  #sales-page .pipeline-stages-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  #sales-page .kanban-columns {
    grid-template-columns: repeat(2, 280px);
    min-width: 580px;
  }
}

@media (max-width: 768px) {
  #sales-page .sales-page-grid {
    padding: 0 16px 24px;
  }
  
  #sales-page .sales-toolbar {
    margin: 16px 16px 24px;
    padding: 20px;
  }
  
  #sales-page .page-title {
    font-size: 22px;
  }
  
  #sales-page .toolbar-filters {
    flex-direction: column;
    gap: 8px;
  }
  
  #sales-page .filter-dropdown {
    min-width: auto;
  }
  
  #sales-page .pipeline-stages-row {
    grid-template-columns: 1fr;
  }
  
  #sales-page .pipeline-stage-block {
    min-height: 120px;
    padding: 20px 16px;
  }
  
  #sales-page .kanban-columns {
    grid-template-columns: 1fr;
    min-width: auto;
  }
  
  #sales-page .kanban-column {
    max-height: 500px;
  }
  
  #sales-page .sales-sidebar {
    grid-template-columns: 1fr;
  }
  
  #sales-page .sales-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  #sales-page .sales-toolbar {
    padding: 16px;
    margin: 12px 12px 20px;
  }
  
  #sales-page .page-title {
    font-size: 20px;
  }
  
  #sales-page .toolbar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  #sales-page .add-opportunity-btn {
    justify-content: center;
    padding: 14px 20px;
  }
  
  #sales-page .sales-kpi-grid {
    grid-template-columns: 1fr;
  }
  
  #sales-page .kpi-card {
    padding: 20px;
  }
  
  #sales-page .kpi-value {
    font-size: 28px;
  }
  
  #sales-page .pipeline-summary-header,
  #sales-page .kanban-header,
  #sales-page .top-opportunities-header,
  #sales-page .leaderboard-header,
  #sales-page .orders-header {
    padding: 20px 16px 16px;
  }
  
  #sales-page .deal-card {
    padding: 16px;
  }
  
  #sales-page .opportunity-item,
  #sales-page .leaderboard-item {
    padding: 16px 20px;
  }
}

/* --- Sales Overrides (Aug 23 2025) --- */
/* Stronger visual edges & contrast adjustments */
#sales-page .pipeline-summary-card, 
#sales-page .sales-kanban-card, 
#sales-page .top-opportunities-card,
#sales-page .sales-leaderboard-card,
#sales-page .recent-orders-card { 
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset; 
  border:1px solid var(--card-border); 
}
#sales-page .pipeline-summary-header, 
#sales-page .kanban-header { 
  background: linear-gradient(180deg,var(--card) 0%,var(--surface-secondary) 140%); 
  backdrop-filter: blur(4px); 
}
/* Button contrast inside Pipeline Overview & Deal Pipeline */
#sales-page .pipeline-summary-header .btn,
#sales-page .kanban-header .btn { 
  border:1px solid var(--border); 
  background: var(--surface-secondary); 
  color: var(--foreground); 
  transition: background .25s, color .25s, box-shadow .25s; 
}
#sales-page .pipeline-summary-header .btn.btn-primary,
#sales-page .kanban-header .btn.btn-primary { 
  background: var(--primary); 
  color: var(--primary-foreground); 
  border-color: var(--primary); 
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); 
}
#sales-page .pipeline-summary-header .btn.btn-primary:hover,
#sales-page .kanban-header .btn.btn-primary:hover { filter:brightness(1.08); }
#sales-page .pipeline-summary-header .btn.btn-secondary:hover,
#sales-page .kanban-header .btn.btn-secondary:hover { background: var(--surface-tertiary); }
#sales-page .pipeline-summary-header .btn:focus-visible,
#sales-page .kanban-header .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Distinct edges for pipeline stage blocks */
#sales-page .pipeline-stage-block { position:relative; }
#sales-page .pipeline-stage-block::before { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.15); pointer-events:none; }
#sales-page .pipeline-stage-block:hover { box-shadow:0 4px 14px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset; }
/* Remove horizontal slider at page level */
#sales-page, #sales-page .sales-page-grid { overflow-x:hidden; }

/* === FINAL OVERRIDE: Deal Pipeline 3x3 Grid === */
#sales-page .sales-kanban-card .kanban-board .kanban-columns {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(300px,1fr)) !important;
  gap:1.5rem !important;
  width:100% !important;
  min-width:0 !important;
}
#sales-page .sales-kanban-card .kanban-board .kanban-column {
  width:auto !important;
  max-width:100% !important;
  flex:none !important;
}
@media (max-width:1400px){
  #sales-page .sales-kanban-card .kanban-board .kanban-columns { grid-template-columns:repeat(3,minmax(260px,1fr)) !important; }
}
@media (max-width:1100px){
  #sales-page .sales-kanban-card .kanban-board .kanban-columns { grid-template-columns:repeat(2,minmax(280px,1fr)) !important; }
}
@media (max-width:760px){
  #sales-page .sales-kanban-card .kanban-board .kanban-columns { grid-template-columns:1fr !important; }
}

/* === FINAL-FINAL OVERRIDE: 2-column pipeline (rows after every 2) === */
#sales-page .sales-kanban-card .kanban-board .kanban-columns {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(340px,1fr)) !important;
  grid-auto-rows:auto !important;
  gap:1.5rem !important;
  width:100% !important;
  min-width:0 !important;
}
#sales-page .sales-kanban-card .kanban-board .kanban-column { width:auto !important; max-width:100% !important; flex:none !important; }
@media (max-width:900px){
  #sales-page .sales-kanban-card .kanban-board .kanban-columns { grid-template-columns:repeat(2,minmax(260px,1fr)) !important; }
}
@media (max-width:680px){
  #sales-page .sales-kanban-card .kanban-board .kanban-columns { grid-template-columns:1fr !important; }
}