/* main section */

.mainSection {
  padding: 30px 0 120px;
  display: flex;
  justify-content: center;
}

/* analytics section */

.analyticsSection {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* analytics top */

.analyticsTop {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analyticsHeaders {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.breadCrumb {
  color: #595959;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.breadCrumb a {
  font-weight: 500;
}

.breadCrumb i {
  font-size: 10px;
}

.analyticsHeader {
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.analyticsHeader p {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 5%;
}

.analyticsHeader span {
  font-size: 13px;
  color: #6b6d6f;
}

.analyticsTopBottom {
  margin-top: 20px;
  display: flex;
}

.analyticsFilter {
  width: 100%;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.analyticsFilter::-webkit-scrollbar {
  display: none;
}

.analyticsFilter:first-child {
  scroll-snap-align: start;
}

.filters {
  display: flex;
  gap: 25px;
}

.filter {
  padding: 10px 20px;
  font-weight: 500;
  background-color: #f3f4f6;
  border-radius: 19px;
  color: #2d2e2f;
  cursor: pointer;
  white-space: nowrap;
}

.filter.active {
  background-color: #f35163;
  color: white;
}

/* <!-- analytics summary --> */

.summaryDetailsSection {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.summarySection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px;
}

.summary {
  padding: 30px 20px;
  border: 1px solid #f3f4f6;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.summaryTop {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
}

.summaryHeader {
  color: #2f3b4b;
  font-size: 15px;
  letter-spacing: 5%;
}

.summaryInsight {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.7;
  letter-spacing: 5%;
}

.summaryBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summaryDetails {
  color: #47475b87;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.increase {
  color: #23c890;
  font-weight: 500;
}

.summaryLink a {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 10px;
  background: #f35163;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*analytics charts */

.charts {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.chartsTop {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 50px;
}

.mapChartSection {
  width: 100%;
  flex: 1 1 600px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.chartHeaders {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.chartHeader {
  max-width: 270px;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chartHeader p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 5%;
}

.chartHeader span {
  color: #6b6d6f;
  font-size: 13px;
}

.chartFilters {
  display: flex;
  align-items: center;
  gap: 15px;
}

.chartFilters select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 14px;
  color: #2d2e2f;
  background-color: white;
  cursor: pointer;
}

.chartPagination {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 20px;
  color: #222b3a;
}

.chartPaginationPrevious,
.chartPaginationNext {
  padding: 0 15px;
  height: 35px;
  border-radius: 5px;
  background: #000;
  color: white;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.chartPaginationPrevious.inactive,
.chartPaginationNext.inactive {
  color: #595959;
  background-color: #bababa;
  opacity: 0.5;
  pointer-events: none;
}

.map {
  position: sticky;
  top: 30px;
  max-width: 250px;
  width: 100%;
  height: 500px;
}

.mapChart {
  font-family: "Roboto";
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 60;
}

.table {
  min-width: 320px;
  width: 100%;
  flex: 1 1 400px;
  overflow-x: auto;
}

.progressTable {
  width: 100%;
  margin-top: 30px;
  border-collapse: separate;
  border-spacing: 40px 15px;
  text-align: left;
  table-layout: fixed;
  overflow: auto;
}

.progressCell {
  padding: 0;
  width: 100%;
}

.progress {
  width: 100%;
  background-color: #f3f3f3;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.progress span {
  font-weight: 500;
  font-size: 13px;
  color: #2f3b4b;
}

.bar {
  height: 100%;
  background-color: #6951f3;
  border-radius: 3px 0 0 3px;
}

.progressTable thead tr {
  position: sticky;
  top: 0;
}

.progressTable thead th {
  padding: 0 0 15px;
  background: white;
  color: #bababa;
  font-weight: 400;
  font-size: 12px;
}

.progressTable tbody tr {
  letter-spacing: 3%;
  font-size: 14px;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.progressTable tbody tr.faded {
  opacity: 0.3;
  scale: 0.98;
  transition: scale 0.4s linear;
}

.progressTable tbody tr.active {
  opacity: 1;
  scale: 1.02;
  transition: scale 0.4s linear;
  /* background-color: #d4edda; */
}

.count {
  font-size: 12px;
}

.pieChartSection {
  position: sticky;
  top: 30px;
  height: fit-content;
  flex: 1 1 300px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pieChartSection .chartHeader {
  max-width: 360px;
}

.pieChart {
  width: 100%;
  min-height: 600px;
  height: 100%;
  font-family: "Inter";
}

/* chart bottom */

.chartBottom {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 30px 50px;
}

.typePieChart {
  width: 100%;
  min-height: 500px;
  height: 100%;
  font-family: "Inter";
}

/* <!-- bar chart --> */

.barChartSection {
  width: 100%;
  flex: 1 1 600px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}

.barChartSection .chartHeader {
  min-width: 100%;
}

.barChart {
  width: 100%;
  overflow-x: auto;
  height: 500px;
}

/* pdes section */

.pdesSection {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pdesColumnChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f8f7fa;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.columnChart {
  background: #fafafa;
  border-radius: 10px;
  height: 600px;
  width: 100%;
  overflow-y: auto;
}

.pdesBudgetChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* funders chart */
.fundersSection {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.fundersColumnChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fundersProjectsChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* contracts status chart */

.contractorsSection {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contractorsColumnChartSection {
  width: 100%;
  flex: 1 1 600px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contractsStatusChartSection {
  width: 100%;
  flex: 1 1 300px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* performance charts */

.performanceSection {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.performanceLineChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lineChart {
  background: #fafafa;
  border-radius: 10px;
  height: 500px;
  width: 100%;
  overflow-y: auto;
}

.performanceCombinedChartSection {
  width: 100%;
  flex: 1 1 520px;
  padding: 40px 30px;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* pagination */

.paginationSection {
  width: 85%;
  padding: 60px 0 0;
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #222b3a;
}

.paginationPrevious.inactive,
.paginationNext.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.paginationNumbers {
  display: flex;
  align-items: center;
}

.paginationNumbers span {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paginationNumbers span.active {
  border: 2px solid #000;
  border-radius: 50%;
}

.paginationNumbers span:hover {
  cursor: pointer;
  font-weight: 600;
  transition: font-weight 0.4s ease-in-out;
}

/* responsive */

@media (max-width: 1660px) {
  .summarySection {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 1467px) {
  .map {
    position: relative;
    top: 0;
  }
}

@media (max-width: 1200px) {
  .analyticsSection {
    width: 85%;
  }
}

@media (max-width: 868px) {
  .mainSection {
    padding-bottom: 80px;
  }

  .mapChartSection {
    padding: 20px 10px;
  }

  .pieChartSection {
    padding: 20px 10px;
  }

  .barChartSection {
    padding: 20px 10px;
  }

  .pdesColumnChartSection,
  .pdesBudgetChartSection {
    padding: 20px 10px;
  }

  .fundersColumnChartSection,
  .fundersProjectsChartSection {
    padding: 20px 10px;
  }

  .contractorsColumnChartSection,
  .contractsStatusChartSection {
    padding: 20px 10px;
  }

  .performanceLineChartSection, .performanceCombinedChartSection{
    padding: 20px 10px;
  }

  .table {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .mainSection {
    padding-bottom: 60px;
  }

  .pieChart {
    min-height: 700px;
  }

  .paginationSection {
    padding-top: 30px;
  }
}

@media (max-width: 480px) {
  .progressTable {
    border-spacing: 15px;
    text-align: right;
  }

  .progressTable tbody tr {
    font-size: 12px;
  }

  .table {
    min-width: 100%;
  }
}

/* extra styles */

.hideSection {
  display: none;
}