* {
  box-sizing: border-box;
}
:root {
  font-family: Inter, Arial, sans-serif;
  color: #101827;
  background: #f6f8fb;
}
body {
  margin: 0;
  background: #f6f8fb;
}
.dashboard-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 194px;
  flex: 0 0 194px;
  background: #0d2036;
  color: #f4f7fb;
  display: flex;
  flex-direction: column;
}
.brand {
  height: 120px;
  padding: 31px 25px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  display: flex;
  flex-direction: column;
  letter-spacing: 2px;
}
.brand strong {
  font-size: 31px;
  line-height: 27px;
  letter-spacing: -1px;
}
.brand span {
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 2.5px;
}
.sidebar nav {
  padding: 23px 0;
  flex: 1;
}
.nav-item {
  height: 49px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #f0f4f9;
  text-decoration: none;
  font-size: 15px;
  border-left: 3px solid transparent;
}
.nav-item svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item.active {
  background: #244f80;
  border-left-color: #4c90d7;
}
.nav-item:hover {
  background: #173652;
}
.profile {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 25px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f4f8;
  color: #8ba1b9;
  font-size: 22px;
}
.profile strong,
.profile small {
  display: block;
}
.profile small {
  color: #91a1b4;
  margin-top: 4px;
}
.chevron {
  font-size: 22px;
  margin-left: auto;
  color: #b9c7d7;
}
.content {
  flex: 1;
  /*padding: 29px 36px 20px;*/
  min-width: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 31px;
}
.topbar h1 {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 7px;
  font-weight: 700;
  letter-spacing: -0.9px;
}
.topbar p {
  margin: 0;
  color: #3b4654;
  font-size: 20px;
}
.filters {
  display: flex;
  gap: 18px;
}
.filter {
  height: 54px;
  border: 1px solid #e4e8ee;
  border-radius: 9px;
  background: #fff;
  color: #1d2530;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 14px Inter;
  box-shadow: 0 2px 8px rgba(20, 40, 65, 0.025);
  white-space: nowrap;
}
.filter svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #2367a9;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.filter span {
  color: #5e7895;
  font-size: 17px;
  margin-left: 12px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.card {
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 11px;
  min-height: 266px;
  padding: 17px 29px 0;
  box-shadow: 0 4px 13px rgba(27, 54, 83, 0.045);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: #d8dce5;
  box-shadow: 0px 12px 32px 0px rgba(43, 20, 77, 0.25);
}
.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
}
.card-title h2 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  color: #141a22;
  white-space: nowrap;
}
.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
}
.icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blue {
  background: #edf4fc;
  color: #2d75c9;
}
.green {
  background: #e5f6ee;
  color: #32a978;
}
.orange {
  background: #fff1e4;
  color: #ea8a21;
}
.red {
  background: #ffeaeb;
  color: #e54848;
}
.purple {
  background: #f1ebfc;
  color: #7257bf;
}
.teal {
  background: #e6f5f6;
  color: #41a0a7;
}
.yellow {
  background: #fff5df;
  color: #c99714;
}
.card-body {
  flex: 1;
}
.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.donut {
  width: 142px;
  height: 142px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 142px;
}
.donut svg {
  width: 142px;
  height: 142px;
  transform: rotate(-90deg);
}
.donut circle {
  fill: none;
  stroke-width: 10;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.donut .track {
  stroke: #dfe7f1;
}
.donut .progress {
  stroke: #2f6fda;
  stroke-dasharray: 209.35 307.88;
  stroke-dashoffset: 0;
}
.donut .remaining {
  stroke: #aebfd3;
  stroke-dasharray: 98.53 307.88;
  stroke-dashoffset: -209.35;
}
.donut > div {
  position: absolute;
  text-align: center;
}
.donut b {
  display: block;
  font-size: 32px;
  color: #2c71be;
}
.donut span {
  font-size: 13px;
  color: #111;
}
.stats {
  flex: 1;
  min-width: 140px;
}
.stats div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f3;
  font-size: 14px;
}
.stats div:last-child {
  border-bottom: 0;
}
.stats b {
  font-weight: 500;
}
.details {
  height: 49px;
  border-top: 1px solid #edf0f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #286bb0;
  text-decoration: none;
  font-size: 14px;
}
.details b {
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
}
.metric {
  font-size: 52px;
  line-height: 1;
  display: block;
  font-weight: 500;
  letter-spacing: -2px;
}
.card-body > div > span,
.completed-body span {
  font-size: 14px;
  display: block;
  color: #131a22;
  margin-top: 8px;
}
.green-text {
  color: #37aa7d;
}
.blue-text {
  color: #397cc7;
}
.orange-text {
  color: #eb8a21;
}
.red-text {
  color: #e6494b;
}
.purple-text {
  color: #7057bf;
}
.yellow-text {
  color: #d39b17;
}
.completed-body {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 12px 43px 0;
}
.delta {
  text-align: right;
}
.delta b {
  display: block;
  color: #33a77a;
  font-size: 15px;
  font-weight: 500;
}
.delta small {
  display: block;
  color: #7c838b;
  font-size: 13px;
  margin-top: 10px;
}
.sparkline {
  width: 100%;
  height: 48px;
  margin: 5px 0 5px;
}
.sparkline path {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sparkline-area {
  fill: url(#sparklineShadow);
  stroke: none;
}
.sparkline-path {
  fill: none;
  stroke: #39ae81;
  filter: drop-shadow(0 2px 2px rgba(57, 174, 129, 0.18));
}
.green-line .sparkline-path {
  stroke: #39ae81;
}
.activity-body {
  padding-top: 6px;
  gap: 10px;
}
.activity-body > .donut {
  width: 99px;
  height: 99px;
  flex-basis: 99px;
}
.activity-body .donut svg {
  width: 99px;
  height: 99px;
}
.activity-body .donut circle {
  stroke-width: 11;
}
.activity-body .donut .progress {
  stroke: #4e8dd3;
  stroke-dasharray: 175.03 245.04;
  stroke-dashoffset: 0;
}
.activity-body .donut .attention {
  stroke: #f39a23;
  stroke-dasharray: 52.51 245.04;
  stroke-dashoffset: -175.03;
}
.activity-body .donut .late {
  stroke: #e8453c;
  stroke-dasharray: 17.50 245.04;
  stroke-dashoffset: -227.54;
}
.legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 104px;
}
.legend span {
  display: grid;
  grid-template-columns: 13px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  white-space: nowrap;
}
.legend b {
  font-weight: 500;
  margin-left: 8px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.blue-dot {
  background: #4688d5;
}
.green-dot {
  background: #3bb183;
}
.orange-dot {
  background: #ef8b25;
}
.red-dot {
  background: #e44b4d;
}
.yellow-dot {
  background: #f6bb29;
}
.gray-dot {
  background: #a7b8c9;
}
.wide {
  margin-right: 10px;
}
.people-body {
  padding-top: 12px;
}
.people-grid {
  width: 120px;
  height: 84px;
  display: block;
  flex: 0 0 120px;
  overflow: visible;
}
.people-grid .person {
  fill: none;
  stroke: #6d56bb;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.people-grid .person.muted {
  stroke: #91a0b5;
}
.areas {
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.milestones {
  padding-top: 10px;
}
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  flex: 1;
  min-width: 190px;
}
.milestone-list em {
  font-style: normal;
  color: #89919c;
  float: right;
}
.milestone-list span:last-child {
  color: #68717d;
}
.checklist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  padding: 9px 0 8px;
  font-size: 14px;
  line-height: 1.3;
}
.checklist span:first-letter {
  color: #66afc2;
}
.decisions {
  padding-top: 12px;
}
.decisions ul {
  margin: 0;
  padding-left: 18px;
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
}
.decisions li {
  padding-left: 1px;
  margin-bottom: 9px;
}
.decisions li::marker {
  color: #d7a529;
}
.dashboard-footer {
  height: 51px;
  margin-top: 17px;
  background: #f2f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 13px;
  color: #46515e;
}
.dashboard-footer b {
  font-size: 20px;
  color: #246bb0;
  margin-right: 11px;
}
.dashboard-footer i {
  font-style: italic;
  color: #4d5763;
}
@media (max-width: 1180px) {
  .content {
    padding: 28px 22px;
  }
  .sidebar {
    width: 180px;
    flex-basis: 180px;
  }
  .card {
    padding-left: 20px;
    padding-right: 20px;
  }
  .filters {
    gap: 8px;
  }
  .filter {
    padding: 0 12px;
  }
  .donut {
    transform: scale(0.88);
    margin: -8px;
  }
  .activity-body {
    gap: 6px;
  }
  .activity-body > .donut {
    transform: none;
    margin: 0;
  }
  .activity-body .legend {
    min-width: 98px;
  }
  .activity-body .legend span {
    font-size: 12px;
    gap: 5px;
  }
}
@media (max-width: 950px) {
  .topbar {
    flex-direction: column;
  }
  .filters {
    width: 100%;
  }
  .filter {
    flex: 1;
    justify-content: center;
  }
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card {
    min-height: 255px;
  }
  .dashboard-footer {
    font-size: 12px;
  }
}
@media (max-width: 700px) {
  .dashboard-shell {
    display: block;
  }
  .sidebar {
    width: 100%;
    height: auto;
  }
  .brand {
    height: 78px;
    padding: 18px 24px;
  }
  .brand strong {
    font-size: 25px;
  }
  .sidebar nav {
    display: flex;
    overflow: auto;
    padding: 6px 10px;
  }
  .nav-item {
    height: 43px;
    padding: 0 13px;
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .nav-item.active {
    border-bottom-color: #4c90d7;
  }
  .nav-item span {
    font-size: 13px;
  }
  .profile {
    display: none;
  }
  .content {
    padding: 24px 16px;
  }
  .topbar h1 {
    font-size: 26px;
  }
  .topbar p {
    font-size: 16px;
  }
  .filters {
    flex-direction: column;
  }
  .filter {
    justify-content: space-between;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .card {
    min-height: 250px;
  }
  .dashboard-footer {
    height: auto;
    min-height: 65px;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
    padding: 13px 16px;
  }
  .dashboard-footer i {
    align-self: flex-end;
  }
  .people-grid {
    font-size: 21px;
  }
  .milestone-list {
    min-width: 0;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .card-title h2 {
    font-size: 12px;
  }
  .split {
    gap: 8px;
  }
  .metric {
    font-size: 45px;
  }
  .legend span {
    font-size: 12px;
  }
}

/* DONUT CARD */
.donut.small circle {
  fill: none;
  stroke-width: 10;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}

.donut.small .track {
  stroke: #edf0f4;
}

.donut.small .progress {
  stroke: #4e8dd3;
  stroke-dasharray: 175.03 245.04;
  stroke-dashoffset: 0;
}
.donut.small .attention {
  stroke: #f39a23;
  stroke-dasharray: 52.51 245.04;
  stroke-dashoffset: -175.03;
}
.donut.small .late {
  stroke: #e8453c;
  stroke-dasharray: 17.50 245.04;
  stroke-dashoffset: -227.54;
}