@import "/src/assets/scss/modern-variables.scss";
@import "/src/assets/scss/fonts.scss";

.dashboard-finance-container {
  padding: 1.5rem;
  background: #FAFBFC;
  min-height: 100%;
  font-family: 'Nominee-regular', sans-serif;
}

// En-tête Dashboard Finance
.dashboard-header {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    .dashboard-icon {
      font-size: 2.5rem;
      color: #4AA8DC;
    }
    
    .title-text h1 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 600;
      color: #111827;
      font-family: 'Nominee-Medium', sans-serif;
    }
    
    .subtitle {
      margin: 0.25rem 0 0 0;
      color: #6B7280;
      font-size: 0.9rem;
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    .active {
      background: rgba(74, 168, 220, 0.1);
      color: #4AA8DC;
    }
  }
}

// Contrôles Période
.period-controls {
  background: white;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .period-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    label {
      font-weight: 500;
      color: #374151;
      min-width: 120px;
    }
    
    .period-buttons {
      display: flex;
      gap: 0.5rem;
      
      button {
        padding: 0.5rem 1rem;
        color: #6B7280;
        
        &.active {
          background: rgba(74, 168, 220, 0.1);
          color: #4AA8DC;
        }
      }
    }
  }
}

// Section Headers
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  
  h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    font-family: 'Nominee-Medium', sans-serif;
  }
}

// KPIs Finance Section
.kpis-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.kpi-card {
  background: #FAFBFC;
  border-radius: 6px;
  padding: 1.5rem;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .kpi-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    
    .kpi-icon {
      font-size: 1.5rem;
    }
    
    .kpi-title {
      font-weight: 500;
      color: #6B7280;
      font-size: 0.9rem;
    }
  }
  
  .kpi-content {
    display: flex;
    justify-content: space-between;
    align-items: end;
    
    .kpi-value {
      font-size: 2rem;
      font-weight: 700;
      color: #111827;
      font-family: 'Nominee-Bold', sans-serif;
    }
    
    .kpi-variation {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.85rem;
      font-weight: 600;
      
      &.trend-positive {
        color: #10b981;
      }
      
      &.trend-negative {
        color: #ef4444;
      }
      
      mat-icon {
        font-size: 1rem;
      }
    }
  }
}

// Section Graphiques
.charts-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.chart-card {
  background: #FAFBFC;
  border-radius: 6px;
  padding: 1.5rem;
  
  h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    font-family: 'Nominee-Medium', sans-serif;
  }
  
  .chart-content {
    .chart-mock {
      .chart-bars {
        display: flex;
        align-items: end;
        gap: 1rem;
        height: 200px;
        padding: 1rem;
        
        .chart-bar {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;
          
          .bar {
            background: #4AA8DC;
            border-radius: 4px 4px 0 0;
            min-height: 20px;
            width: 100%;
            transition: all 0.3s ease;
            
            &:hover {
              background: #3a96c7;
            }
          }
          
          .bar-label {
            font-size: 0.8rem;
            color: #6B7280;
            font-weight: 500;
          }
          
          .bar-value {
            font-size: 0.9rem;
            color: #111827;
            font-weight: 600;
          }
        }
      }
    }
    
    .pie-chart-mock {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      
      .expense-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem;
        background: white;
        border-radius: 4px;
        
        .expense-color {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        
        .expense-label {
          flex: 1;
          font-weight: 500;
          color: #374151;
        }
        
        .expense-value {
          font-weight: 600;
          color: #111827;
        }
      }
    }
  }
}

// Section Tableaux
.tables-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.table-card {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    
    h3 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      color: #111827;
      font-family: 'Nominee-Medium', sans-serif;
    }
    
    button {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .finance-table {
    width: 100%;
    border-collapse: collapse;
    
    th {
      background: #FAFBFC;
      padding: 1rem;
      text-align: left;
      font-weight: 600;
      color: #374151;
      font-size: 0.9rem;
      border-bottom: 1px solid #E5E7EB;
    }
    
    td {
      padding: 1rem;
      border-bottom: 1px solid #F3F4F6;
      color: #6B7280;
      
      &:first-child {
        color: #111827;
        font-weight: 500;
      }
      
      &.amount {
        font-weight: 600;
        font-family: 'Nominee-Medium', sans-serif;
        
        &.positive {
          color: #10b981;
        }
        
        &.negative {
          color: #ef4444;
        }
      }
    }
    
    tr:hover {
      background: #FAFBFC;
    }
  }
  
  .transaction-type {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    
    &.income {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }
    
    &.expense {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
  }
  
  .status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    
    &.status-validated {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }
    
    &.status-processed {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
    }
    
    &.status-pending {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
    }
    
    &.status-on-track {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }
    
    &.status-at-risk {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
    
    &.status-default {
      background: rgba(107, 114, 128, 0.1);
      color: #6B7280;
    }
  }
  
  .project-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    
    strong {
      color: #111827;
      font-weight: 600;
    }
    
    small {
      color: #9CA3AF;
      font-size: 0.8rem;
    }
  }
  
  .progress-bar {
    position: relative;
    background: #F3F4F6;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
    
    .progress-fill {
      height: 100%;
      background: #4AA8DC;
      border-radius: 4px;
      transition: width 0.3s ease;
      
      &.warning {
        background: #f59e0b;
      }
    }
    
    span {
      position: absolute;
      top: 12px;
      left: 0;
      font-size: 0.8rem;
      font-weight: 600;
      color: #6B7280;
    }
  }
}

// Footer Dashboard
.dashboard-footer {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .footer-content {
    .system-info {
      display: flex;
      gap: 2rem;
      
      .info-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6B7280;
        font-size: 0.9rem;
        
        mat-icon {
          font-size: 1.2rem;
          color: #9CA3AF;
        }
      }
    }
  }
}

// Responsive Design
@media (max-width: 768px) {
  .dashboard-finance-container {
    padding: 1rem;
  }
  
  .dashboard-header {
    padding: 1.5rem;
    
    .header-content {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .title-section .dashboard-icon {
      font-size: 2rem;
    }
  }
  
  .period-controls .period-selector {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    
    .period-buttons {
      width: 100%;
      justify-content: space-between;
    }
  }
  
  .kpis-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .table-card .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .dashboard-footer .footer-content .system-info {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .dashboard-header .header-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    
    button {
      width: 100%;
      justify-content: center;
    }
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .finance-table {
    font-size: 0.8rem;
    
    th, td {
      padding: 0.75rem 0.5rem;
    }
  }
  
  .progress-bar span {
    position: static;
    margin-top: 0.5rem;
    display: block;
  }
}