/* =============================================================================
   DASHBOARD KPI CARDS
   ============================================================================= */

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.dashboard-kpi-card {
  background-color: var(--white);
  padding: var(--space-lg);
  border-radius: var(--space-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--pink-pale);
  transition: all 0.3s ease;
  height: 200px;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  align-items: center;
}

.dashboard-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Left side: Content container */
.dashboard-kpi-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  justify-content: center;
}

.dashboard-kpi-label {
  font-size: 1rem;
  color: var(--medium-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Right side: Icon container */
.dashboard-kpi-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-kpi-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dark-gray);
  line-height: 1.2;
}


.dashboard-kpi-subtitle {
  font-size: 0.75rem;
  color: var(--medium-gray);
}

.dashboard-kpi-subtitle.positive {
  color: #38a169;
}

.dashboard-kpi-subtitle.negative {
  color: #e53e3e;
}

.dashboard-kpi-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-kpi-icon svg {
  width: 32px;
  height: 32px;
}

/* Icon color variants */
.dashboard-kpi-icon.blue {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.dashboard-kpi-icon.red {
  background-color: #fee;
  color: #e74c3c;
}

.dashboard-kpi-icon.orange {
  background-color: #fff3e0;
  color: #f57c00;
}

.dashboard-kpi-icon.purple {
  background-color: #f3e5f5;
  color: #8e24aa;
}

.dashboard-kpi-icon.green {
  background-color: #e8f5e9;
  color: #43a047;
}

.dashboard-kpi-icon.light-blue {
  background-color: #e3f2fd;
  color: #1976d2;
}

.dashboard-kpi-card.complex .dashboard-kpi-details{
  margin-top: 0;
}


.dashboard-kpi-details {
  font-size: 0.65rem;
  color: var(--medium-gray);
  margin-top: var(--space-sm);
}

.dashboard-kpi-details div {
  margin-bottom: 2px;
}

.dashboard-kpi-details strong {
  color: var(--dark-gray);
}

.dashboard-kpi-euro {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark-gray);
  margin-top: 4px;
}

/* =============================================================================
   DISTRIBUTION LIST (Purchase Family Distribution)
   ============================================================================= */

.distribution-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.distribution-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.distribution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.distribution-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.distribution-percentage {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-gray);
}

.distribution-bar-container {
  width: 100%;
  height: 24px;
  background-color: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}

.distribution-bar {
  height: 100%;
  border-radius: 12px;
  transition: width 0.3s ease;
}

.distribution-details {
  font-size: 0.8rem;
  color: var(--medium-gray);
  margin-top: 2px;
}

/* =============================================================================
   CONTRACTS TABLE (Top 10 Contracts)
   ============================================================================= */

.contracts-table-wrapper {
  overflow-x: auto;
}

.contracts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.contracts-table thead {
  background-color: #f8f9fa;
}

.contracts-table th {
  padding: var(--space-md);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--medium-gray);
  border-bottom: 2px solid var(--light-gray);
}

.contracts-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.contracts-table tbody tr:hover {
  background-color: #f9fafb;
}

.contracts-table td {
  padding: var(--space-md);
  color: var(--dark-gray);
}

.contracts-table .contract-number {
  color: var(--coral-primary);
  font-weight: 700;
  font-size: 0.8rem;
}

.contracts-table .amount {
  font-weight: 700;
  color: var(--dark-gray);
}

/* Responsive Design */
/* Extra large screens: 6 cards per row (≥2400px) - only show 6 in a row when they fit without scroll */
/* Default grid is already set to repeat(6, 1fr) above */

/* Large screens: 3 cards per row (1200px - 2399px) - at 2000px shows 3 cards */
@media (max-width: 2399px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Medium screens: 2 cards per row (900px - 1199px) */
@media (max-width: 1199px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: 1 card per row (<900px) */
@media (max-width: 899px) {
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-kpi-card {
    height: 140px;
    min-width: 300px;
  }
  
  .dashboard-kpi-value {
    font-size: 1.75rem;
  }
  
  .dashboard-kpi-icon {
    width: 56px;
    height: 56px;
  }
  
  .dashboard-kpi-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* Responsive layout for Distribution and Top Contracts Section */
@media (max-width: 1024px) {
  /* Stack distribution and contracts table on smaller screens */
  div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  
  .contracts-table {
    font-size: 0.75rem;
  }
  
  .contracts-table th,
  .contracts-table td {
    padding: var(--space-sm);
  }
  
  .contracts-table th {
    font-size: 0.65rem;
  }
}

@media (max-width: 768px) {
  .distribution-name {
    font-size: 0.85rem;
  }
  
  .distribution-percentage {
    font-size: 0.85rem;
  }
  
  .distribution-details {
    font-size: 0.75rem;
  }
  
  .contracts-table-wrapper {
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    padding: 0 var(--space-md);
  }
  
  .contracts-table {
    font-size: 0.7rem;
  }
  
  .contracts-table th,
  .contracts-table td {
    padding: var(--space-xs);
    white-space: nowrap;
  }
}