@import url("/css/common.css");

/* Dashboard stats */
.main-content .content-block {
  padding: var(--size-40) var(--size-40);
  overflow: auto;
}

.dashboard-stats .wrapper {
  display: flex;
  justify-content: space-between;
  gap: var(--size-10);
}

.dashboard-stats .card-block {
  background-color: var(--cl-white-400);
  border-radius: var(--size-10);
  padding: var(--size-24) var(--size-20);
  box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
  -webkit-box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
  -moz-box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
}

.dashboard-stats .card-block p {
  font-size: var(--size-14);
}

.dashboard-stats .icon-text {
  display: flex;
  gap: var(--size-10);
}

.dashboard-stats .text-block {
  margin-top: var(--size-10);
}

.dashboard-stats .card-block .icon {
  width: 60px;
  height: 60px;
  background-color: var(--cl-white-300);
  padding: var(--size-15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.dashboard-stats .card-block .icon .material-symbols-outlined {
  color: var(--cl-primary-400);
}

.dashboard-stats .icon-text .text {
  text-align: center;
}

.dashboard-stats .icon-text .text p:first-child {
  font-size: var(--size-25);
  font-weight: 550;
}

.pet-adopted-listed {
  display: flex;
  justify-content: space-between;
  gap: var(--size-40);
}

.pet-adopted-listed>* {
  flex: 1 1 100%;
}

.pet-adopted-listed .listed-adopted-text {
  display: flex;
  justify-content: space-between;

}

.listed-adopted-text p {
  display: flex;
  gap: var(--size-08);
  font-size: var(--size-16);
  line-height: var(--size-24);
}

.listed-adopted-text p::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--cl-secondary-400);
}

.listed-adopted-text p:last-child::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--cl-primary-400);
}

.pet-adopted-listed {
  margin-block: var(--size-40);
}

.pet-adopted-listed .recent-adopted,
.pet-adopted-listed .adopted {
  background-color: var(--cl-white-400);
  padding: var(--size-20);
  border-radius: var(--size-08);
  box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
  -webkit-box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
  -moz-box-shadow: 10px 10px 13px -8px rgba(209, 209, 209, 0.6);
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-20);
  padding: var(--size-20);
}

.chart {
  position: relative;
  width: 220px;
  height: 220pxn;
  width: max(20vmin, 100px);
  height: max(20vmin, 100px);
  aspect-ratio: 1 / 1;
  background: conic-gradient(var(--cl-secondary-400) 0% 70%, var(--cl-primary-400) 70% 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(180deg);
}

.chart::before {
  content: "";
  position: absolute;
  width: calc(20vmin * 0.6);
  height: calc(20vmin * 0.6);
  background: white;
  border-radius: 50%;
  z-index: 1;
}

.percentage-label {
  position: absolute;
  font-size: var(--size-24);
  color: var(--cl-secondary-400);
  z-index: 2;
  text-align: center;
}

.labels {
  display: flex;
  align-items: center;
  gap: var(--size-10);
  font-size: var(--size-32);
}

.pet-adopted-listed .recent-adopted .heading p {
  font-size: var(--size-20);
  line-height: var(--size-24);
  margin-bottom: var(--size-25);
}

.pet-adopted-listed .card-block {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--size-20);
}

.pet-adopted-listed .card-block .image-text {
  display: flex;
  gap: var(--size-10);
}

.pet-adopted-listed .card-block .image-text>* {
  flex: 1 1 100%;
}

.pet-adopted-listed .card-block h6 {
  font-size: var(--size-16);
  line-height: var(--size-20);
  font-weight: 500;
}

.pet-adopted-listed .card-block p {
  font-size: var(--size-16);
  line-height: var(--size-20);
}

.pet-adopted-listed .card-block p:nth-child(2) {
  margin-block: var(--size-08);
}

.pet-adopted-listed .card-block .status a {
  font-size: var(--size-14);
  line-height: var(--size-24);
  color: var(--cl-primary-400);
}

.pet-adopted-listed .card-block .status a {
  font-size: var(--size-14);
  line-height: var(--size-24);
  background-color: var(--cl-primary-400);
  color: var(--cl-white-400);
  border-radius: var(--size-5);
  padding: var(--size-5);
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-table thead {
  font-size: var(--size-14);
  line-height: var(--size-20);
  padding: var(--size-60);
  background-color: transparent;
}

.dashboard-table tbody {
  background-color: var(--cl-white-400);
}

.dashboard-table tbody tr {
  font-size: var(--size-14);
  line-height: var(--size-20);
}

.dashboard-table th {
  padding-bottom: var(--size-10);
}

.dashboard-table td {
  text-align: center;
  padding: var(--size-15);
}

.dashboard-table .action-drop {
  width: var(--size-40);
  fill: none;
  stroke: var(--cl-secondary-400);
  cursor: pointer;
}