.container {
  width: 84%;
  /* margin-left: 15%; */
  /* padding: 112px 24px 40px; */
}

.tasks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.task-box,
.tasks-first-chart,
.tasks-second-chart,
.tasks-third-chart,
.dashboard-deadlines,
.dashboard-calendar,
.task-status-container {
  background: linear-gradient(180deg, rgba(11, 18, 28, 0.98), rgba(6, 9, 15, 0.98));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.task-box {
  padding: 22px;
}

.task-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.task-box-top i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--white-text);
}

#tasks-id {
  background: rgba(63, 160, 250, 0.14);
  color: #92d1ff;
}

#completed-id {
  background: rgba(34, 197, 94, 0.14);
  color: #95efb8;
}

#overdue-id {
  background: rgba(244, 63, 94, 0.14);
  color: #ffa5b4;
}

#duetime-id {
  background: rgba(245, 158, 11, 0.14);
  color: #ffd089;
}

.task-box-bottom h2 {
  font-size: 36px;
  margin-bottom: 8px;
}

.task-box-bottom p {
  color: var(--muted-text);
  line-height: 1.45;
}

.tasks-second-part {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 20px !important;
  align-items: start !important;
  margin-top: 28px !important;
}

.tasks-first-chart,
.tasks-second-chart,
.tasks-third-chart {
  padding: 24px;
  height: 350px;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

.tasks-first-chart h1,
.tasks-second-chart h2,
.tasks-third-chart h2 {
  margin-bottom: 18px;
}

.mychart {
  width: min(250px, 100%) !important;
  height: 250px !important;
  margin: 0 auto 22px !important;
}

.pdc-legend {
  display: flex;
  justify-content: space-evenly;
  gap: 14px;
}

.pdc-legend > div,
.pdc-legend p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdc-legend p {
  color: var(--muted-text);
  font-size: 14px;
}

.pdc-legend h3 {
  min-width: 18px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.red {
  background: var(--chart-red);
}

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

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

.tsc-title,
.ttc-title {
  font-size: 22px;
}

.tsc-item,
.ttc-row {
  margin-bottom: 16px;
}

.tsc-header,
.ttc-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted-strong);
  font-size: 14px;
}

.tsc-progress,
.ttc-progress {
  height: 10px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.tsc-fill,
.ttc-fill {
  height: 100%;
  border-radius: 999px;
}

.tsc-blue {
  background: var(--chart-blue);
}

.tsc-purple {
  background: var(--chart-purple);
}

.tsc-pink {
  background: var(--task-pink);
}

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

.ttc-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ttc-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ttc-content {
  flex: 1;
}

.ttc-red {
  background: var(--chart-red);
}

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

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

.tsc-footer {
  color: var(--muted-text);
  margin-top: 14px;
}

.dashboard {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.dashboard-deadlines,
.dashboard-calendar {
  padding: 24px;
}

.dashboard-deadlines-header,
.dashboard-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard-deadlines-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-deadlines-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.dashboard-deadlines-meta {
  color: var(--muted-text);
  line-height: 1.4;
}

.dashboard-deadlines-badge {
  min-width: 80px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.highTag {
  background: rgba(244, 63, 94, 0.16);
  color: #ff9faf;
}

.mediumTag {
  background: rgba(245, 158, 11, 0.16);
  color: #ffd089;
}

.dashboard-calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-calendar-nav button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-text);
  cursor: pointer;
}

.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-calendar-weekdays {
  margin-bottom: 12px;
  color: var(--muted-text);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.dashboard-calendar-day {
  min-height: 82px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-calendar-number {
  font-weight: 600;
  margin-bottom: 8px;
}

.dashboard-calendar-day.activeDay {
  border-color: rgba(63, 160, 250, 0.35);
  background: rgba(63, 160, 250, 0.12);
}

.dashboard-calendar-badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(63, 160, 250, 0.16);
  color: #93d2ff;
}

.task-status-container {
  margin-top: 28px;
  padding: 24px;
}

.task-status-container h1 {
  margin-bottom: 20px;
}

.task-status {
  display: grid;
  gap: 14px;
}

.task-status-box {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tsleft h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tsleft h4 {
  margin-bottom: 8px;
  color: var(--muted-strong);
}

.tsleft p {
  color: var(--muted-text);
  line-height: 1.45;
}

.ts-dot {
  font-size: 18px;
  line-height: 1;
}

.status-red {
  color: var(--chart-red);
}

.status-yellow {
  color: var(--chart-yellow);
}

.status-green {
  color: var(--chart-green);
}

.status-blue {
  color: var(--chart-blue);
}

.ts-description {
  margin-top: 8px;
  font-weight: 700;
}

.tsright {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 110px;
}

.tsright button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-text);
  padding: 10px 14px;
  cursor: pointer;
}

.tsright button:hover {
  background: rgba(63, 160, 250, 0.14);
  border-color: rgba(63, 160, 250, 0.28);
}

@media (max-width: 1100px) {
  .container {
    width: calc(100% - 32px);
    margin-left: 0;
    padding: 96px 16px 32px;
  }

  .tasks,
  .tasks-second-part,
  .dashboard {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .task-status-box,
  .dashboard-deadlines-item,
  .ttc-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tsright {
    width: 100%;
    min-width: 0;
    flex-direction: row;
  }

  .dashboard-calendar-weekdays,
  .dashboard-calendar-grid {
    gap: 6px;
  }

  .dashboard-calendar-day {
    min-height: 66px;
    padding: 8px;
  }
}