/* =========================================================
   SOCIAL MEDIA ANALYTICS DASHBOARD
   Fonts:
   Space Grotesk = headings / numbers
   Hanken Grotesk = supporting text
========================================================= */

500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* RESET */
.sa-dashboard,
.sa-dashboard * {
  box-sizing: border-box;
}

.sa-dashboard {
  width: 100%;
  max-width: 1875px;
  margin: 0 auto;

  background: #f7f8f8;
  border: 1px solid #dfe3e8;
  border-radius: 30px;

  overflow: hidden;

  font-family: 'Hanken Grotesk', sans-serif;
  color: #11151b;

  box-shadow:
    0 30px 70px rgba(14, 22, 35, .16),
    0 5px 20px rgba(14, 22, 35, .07);
}


/* =========================================================
   HEADER
========================================================= */

.sa-header {
  height: 58.39px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  background: #fff;
  border-bottom: 1px solid #dde2e7;
}

.sa-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sa-brand-icon {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #10151b;
  border-radius: 7px;
}

.sa-brand-icon svg {
  width: 21px;
  height: 21px;
}

.sa-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0C0F14;
  line-height: 23.2px;
}

.sa-dot {
  color: #98a0aa;
  font-size: 21px;
}

.sa-platform-label {
  color: #5A6473;
  font-size: 13px;
  font-weight: 400;
  line-height: 18.85px;
}

.sa-header-actions {
  display: flex;
  gap: 10px;
}

.sa-header-actions button {
  padding: 5px 11px 6.39px 11px;
  border: 1px solid #CDD4DD;
  border-radius: 6px;
  background: #FFFFFF;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1F29;
  line-height: 17.4px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.sa-content {
  padding: 24px;
}


/* =========================================================
   STAT CARDS
========================================================= */

.sa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sa-stat-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #dfe4e9;
  border-radius: 21px;
  box-shadow: 0 2px 4px rgba(20, 30, 40, .04);
}

.sa-stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.96px;
  color: #5A6473;
  line-height: 14.4px;
}

.sa-stat-number {
  margin-top: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  line-height: 33.6px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #0C0F14;
}

.sa-stat-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 10px;
}

.sa-stat-change {
  display: flex;
  align-items: center;
  gap: 7px;

  white-space: nowrap;
}

.sa-stat-change span {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
} 

.sa-stat-change strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 18.85px;
  color: #0E9554;
}

.sa-stat-change small {
  color: #818C9C;
  font-size: 12px;
  line-height: 14.4px;
  font-weight: 500;
}

.sa-stat-change.positive {
  color: #079c58;
}

.sa-stat-change.negative {
  color: #ff3446;
}

.sa-mini-chart {
  width: 92px;
  height: 30px;
}


/* =========================================================
   LOWER GRID
========================================================= */

.sa-lower-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(290px, 1fr)
    minmax(290px, 1fr);
  gap: 2px;
  margin-top: 16px;
}


/* =========================================================
   PANELS
========================================================= */

.sa-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #dfe4e9;
  border-radius: 21px;

  overflow: hidden;
}

.sa-panel-heading h2, .sa-panel-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 23.2px;
  font-weight: 600;
  color: #0C0F14;
  margin-bottom: 5px;
  margin-top: 0px;
}

.sa-panel-heading p, .sa-panel-header p {
  color: #5A6473;
  font-size: 12px;
  line-height: 17.4px;
  margin-bottom: 0px;
}


/* =========================================================
   REACH PANEL
========================================================= */

.sa-reach-panel {
  min-height: 320px;
  padding: 20px;
}

.sa-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sa-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.sa-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1A1F29;
  font-size: 12px;
  line-height: 17.4px;
}

.sa-legend i {
  width: 10px;
  height: 3px;
  display: inline-block;
  border-radius: 2px;
}

.sa-chart-labels {
  color: #818C9C;
  font-size: 11px;
  line-height: 15.95px;
  font-family: 'JetBrains Mono', sans-serif;
  font-weight: 400;
}

.sa-legend .instagram {
  background: #e93470;
}

.sa-legend .facebook {
  background: #2f86ff;
}

.sa-legend .youtube {
  background: #ff2438;
}


/* CHART */
.sa-line-chart {
  position: relative;
  height: 220px;
  margin-top: 20px;
}

.sa-chart-gif {
  width: 128px;
}

.sa-line-gif {
  width: 100px;
  margin-bottom: -10px;
  margin-top: -5px;
  margin-right: -5px;
}

.sa-line-chart svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 180px;
  overflow: visible;
}

.chart-grid-line {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background: #e5e9ee;

  z-index: 0;
}

.chart-grid-line.line-1 {
  top: 50px;
}

.chart-grid-line.line-2 {
  top: 100px;
}

.chart-grid-line.line-3 {
  top: 150px;
}

.chart-grid-line.line-4 {
  top: 200px;
}

.sa-chart-labels {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  justify-content: space-between;

  color: #8792a1;

  font-size: 14px;
}


/* =========================================================
   CONTENT MIX
========================================================= */

.sa-content-mix {
  min-height: 320px;
  padding: 20px;
}

.sa-donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 185px;
}

.sa-donut {
  width: 128px;
  height: 128px;

  border-radius: 50%;

  background:
    conic-gradient(
      #0db66a 0deg 136.8deg,
      #2f86ff 136.8deg 223.2deg,
      #ffa914 223.2deg 295.2deg,
      #8758f7 295.2deg 360deg
    );

  position: relative;
}

.sa-donut-hole {
  position: absolute;

  width: 91px;
  height: 91px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background: #fff;

  border-radius: 50%;
}

.sa-mix-list {
  display: grid;

  grid-template-columns: 1fr 1fr;

  row-gap: 17px;
  column-gap: 28px;
}

.sa-mix-item {
  color: #1A1F29;
  font-size: 12px;
  line-height: 17.4px;
  display: flex;
}

.sa-mix-item span {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 80%;
}

.sa-mix-item i {
  width: 10px;
  height: 10px;

  display: inline-block;

  border-radius: 3px;
}

.sa-mix-item strong {
  color: #5A6473;
  font-weight: 400;
  width: 20%;
}

.mix-green {
  background: #0db66a;
}

.mix-blue {
  background: #2f86ff;
}

.mix-orange {
  background: #ffa914;
}

.mix-purple {
  background: #8758f7;
}


/* =========================================================
   TOP POSTS
========================================================= */

.sa-top-posts {
  min-height: 320px;
  padding: 20px;
}

.sa-post-list {
  margin-top: 15px;
}

.sa-post {
  min-height: 65px;

  display: grid;

  grid-template-columns: 39px minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

  border-top: 1px solid #e0e4e8;
}

.sa-social-icon {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;
}

.sa-social-icon svg {
  width: 25px;
  height: 25px;
}

.instagram-icon {
  background: #e93270;
}

.youtube-icon {
  background: #ff1737;
}

.facebook-icon {
  background: #2778dc;
}

.sa-post-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sa-post-info strong {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #0C0F14;
  line-height: 18.85px;
}

.sa-post-info span {
  color: #77818e;

  font-size: 13px;
}

.sa-post > b {
  font-family: 'JetBrains Mono', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #0C0F14;
  line-height: 17.4px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

  .sa-content {
    padding: 25px;
  }

  .sa-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .sa-lower-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sa-reach-panel {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .sa-dashboard {
    border-radius: 18px;
  }

  .sa-header {
    height: auto;

    padding: 18px;

    flex-direction: column;
    align-items: flex-start;

    gap: 15px;
  }

  .sa-header-actions {
    width: 100%;
  }

  .sa-header-actions button {
    flex: 1;
    font-size: 13px;
  }

  .sa-content {
    padding: 15px;
  }

  .sa-stats {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .sa-stat-card {
    min-height: 160px;

    padding: 23px;
  }

  .sa-stat-number {
    font-size: 36px;
  }

  .sa-lower-grid {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 12px;
  }

  .sa-reach-panel {
    grid-column: auto;

    padding: 23px 18px;
  }

  .sa-panel-header {
    flex-direction: column;

    gap: 18px;
  }

  .sa-legend {
    gap: 13px;

    flex-wrap: wrap;
  }

  .sa-legend span {
    font-size: 13px;
  }

  .sa-line-chart {
    overflow-x: auto;
  }

  .sa-line-chart svg {
    min-width: 600px;
  }

  .sa-chart-labels {
    min-width: 600px;
  }

  .sa-content-mix,
  .sa-top-posts {
    padding: 23px 18px;
  }

}