:root {
  --background: #060c13;
  --dark-bg: #06090f;
  --border: #141926;

  --shadow: #04090e;
 
  --menu-bg: #030407;

  --outline: #0e1116;

  --sb-logo-color: #2e72b3;
  --sb-active-i-color: #3fa0fa;
  --sb-active-bg: #0b1826;

  --sb-scroll-bg: #15314e;

  --sb-title-text: #9a9fa5;

  --blue-active-text-i: #0b1826;
  --white-text: #fff;

  --chart-red: #f43f5e;
  --chart-green: #4ade80;
  --chart-blue: #60a5fa;
  --chart-yellow: #f59e0b;

  --chart-purple: #8884d8;
  --chart-white: #d1d5db;

  --task-ping: #df2f8c;
  --task-purple: #9d40ed;
  --task-blue: #2873ec;

  --calendar-yellow-bg: #352206;
  --calendar-yellow: #ffd230;

  --calendar-red-bg: #340c11;
  --calendar-red: #ffa2a2;

  --calendar-green-bg: #022b16;
  --calendar-green: #7bf1a8;

  --team-performance-blue: #3fa0fa;

  --project-green-bg: #052f1c;
  --project-green: #05df72;

  --project-yellow-bg: #37260c;
  --project-yellow: #e17100;

  --project-blue-bg: #0e2040;
  --project-blue: #155dfc;

  --project-red-bg: #ffe2e2;
  --project-red: #e7000b;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  font-family: "inter";
  color: var(--white-text);
  height: 200vh;
}

* {
  padding: 0;
  margin: 0;
}

.container{
    width: 82%;
    position: relative;
    left: 15%;
    padding: 20px;
    top: 100px;
}

.performanceMetrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.chart-container h3{
  margin-bottom: 20px;
}

.card {
  background: var(--dark-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card h3 {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 500;
}

.card h2 {
  font-size: 32px;
  margin: 10px 0 20px;
}

canvas {
  width: 100% !important;
  height: 140px !important;
}

.chart-container {
  padding: 20px;
  width: 100%;
  height: 450px;
  background: var(--dark-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;

}

.chart-container-chart{
  height: 350px;
}

.tasksCompleted {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #cbd5f5;
}

.task-bar {
  width: 100%;
  height: 6px;
  background: var(--menu-bg);
  border-radius: 10px;
  overflow: hidden;
}

.task-fill {
  height: 100%;
  border-radius: 10px;
}

.qualityScore canvas {
  height: 120px !important;
  margin-top: auto;
}

.timeAllocation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timeAllocation canvas {
  width: 180px !important;
  height: 180px !important;
}

.qualityScore canvas {
  flex: 1;
}

canvas {
  display: block;
}

.trendsCard {
  background: var(--dark-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  height: 350px;
  position: relative;
}

#performanceTrends {
  width: 100% !important;
  height: 100% !important;
}

.bottomSection {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

.card {
  background: var(--dark-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

.card h2 {
  margin-bottom: 20px;
}

.member {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
}

.member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.member-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.member-header span {
  color: #94a3b8;
  font-size: 13px;
}

.stats {
  display: flex;
  gap: 15px;
}

.stat {
  flex: 1;
}

.stat p {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
}

.bar {
  height: 6px;
  background: var(--menu-bg);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 5px;
}

.bar div {
  height: 100%;
  background: var(--chart-blue);
}

.bar.green div {
  background: var(--chart-green);
}

.goal {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
}

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

.goal-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.icon.green {
  background: var(--chart-green);
}

.icon.orange {
  background: var(--chart-yellow);
}

.status {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.status.green {
  background: var(--calendar-green-bg);
  color: #10b981;
}

.status.orange {
  background: var(--project-yellow-bg);
  color: #f59e0b;
}

.progress {
  height: 6px;
  background: var(--menu-bg);
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.progress div {
  height: 100%;
  background: var(--chart-green);
}

.progress.orange div {
  background: var(--chart-yellow);
}