/* Dashboard Styles */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-header h1 {
  color: var(--primary-color);
  font-size: 28px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-range-picker label {
  font-weight: 500;
  color: #555;
}

.date-range-picker select {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

.date-range-picker select:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* Dashboard Content Layout */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Key Metrics */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.metric-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: var(--secondary-color);
  border-radius: 10px 0 0 10px;
}

.metric-header {
  color: #555;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.metric-value {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.metric-change {
  font-size: 14px;
  font-weight: 500;
}

.metric-change.positive {
  color: var(--success-color);
}

.metric-change.negative {
  color: var(--danger-color);
}

/* Charts Row */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 24px;
}

.chart-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.chart-card .card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #2c3e50;
}

.chart-card .card-body {
  padding: 20px;
  height: 300px;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pie Chart */
.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(calc(var(--start) * 360deg));
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.pie-segment::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color);
  transform: rotate(calc((var(--end) - var(--start)) * 360deg));
  transform-origin: 50% 50%;
}

.segment-label {
  position: absolute;
  font-size: 12px;
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
}

.pie-segment:hover .segment-label {
  opacity: 1;
}

.pie-segment:nth-child(1) .segment-label {
  top: 40%;
  left: 70%;
}

.pie-segment:nth-child(2) .segment-label {
  top: 25%;
  right: 20%;
}

.pie-segment:nth-child(3) .segment-label {
  bottom: 30%;
  right: 20%;
}

.pie-segment:nth-child(4) .segment-label {
  bottom: 25%;
  left: 25%;
}

/* Trend Chart */
.trend-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 85%;
}

.chart-bar {
  width: calc(100% / 7 - 10px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.bar-segment {
  width: 100%;
  height: var(--height);
  transition: all 0.3s ease;
}

.bar-segment.positive {
  background-color: var(--success-color);
  border-radius: 4px 4px 0 0;
}

.bar-segment.neutral {
  background-color: var(--warning-color);
}

.bar-segment.negative {
  background-color: var(--danger-color);
  border-radius: 0 0 4px 4px;
}

.bar-label {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.legend-color.positive {
  background-color: var(--success-color);
}

.legend-color.neutral {
  background-color: var(--warning-color);
}

.legend-color.negative {
  background-color: var(--danger-color);
}

.legend-label {
  font-size: 12px;
  color: #666;
}

/* Table Section */
.table-section {
  margin-top: 10px;
}

.table-section .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
}

.action-button {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-button:hover {
  background-color: #236c6d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f9f9f9;
  font-weight: 600;
  color: #555;
  font-size: 14px;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status.active {
  background-color: rgba(56, 161, 105, 0.1);
  color: var(--success-color);
}

.status.pending {
  background-color: rgba(221, 107, 32, 0.1);
  color: var(--warning-color);
}

.status.completed {
  background-color: rgba(44, 122, 123, 0.1);
  color: var(--secondary-color);
}

/* Insights Row */
.insights-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 24px;
}

.insights-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.insight-item:last-child {
  border-bottom: none;
}

.insight-rank {
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.insight-content {
  flex: 1;
}

.insight-title {
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 2px;
}

.insight-stats {
  color: #666;
  font-size: 14px;
}

/* Quality Metrics */
.quality-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quality-metric {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-label {
  width: 150px;
  font-size: 14px;
  color: #555;
}

.progress-container {
  flex: 1;
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--secondary-color);
  border-radius: 4px;
}

.metric-value {
  width: 60px;
  text-align: right;
  font-weight: 600;
  color: #2c3e50;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .charts-row,
  .insights-row {
    grid-template-columns: 1fr;
  }
  
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-row {
    grid-template-columns: 1fr;
  }
  
  .chart-card .card-body {
    height: 250px;
  }
}