* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg {
  width: 20px;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: "Inter_18pt-Bold";
  src: url(fontFamily/static/Inter_18pt-Bold.ttf);
}

@font-face {
  font-family: "Inter_24pt-Regular";
  src: url(fontFamily/static/Inter_24pt-Regular.ttf);
}

@font-face {
  font-family: "Inter_18pt-SemiBold";
  src: url(fontFamily/static/Inter_18pt-SemiBold.ttf);
}

:root {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);

  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);

  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-700: oklch(55.5% 0.163 48.998);

  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-700: oklch(53.2% 0.157 131.589);

  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-700: oklch(52.7% 0.154 150.069);

  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);

  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-200: oklch(91% 0.096 180.426);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);

  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-700: oklch(52% 0.105 223.128);

  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-700: oklch(50% 0.134 242.749);

  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);

  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);

  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);

  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);

  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);

  --color-pink-600: oklch(59.2% 0.249 0.584);

  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);

  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-700: oklch(37.2% 0.044 257.287);

  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-900: oklch(21% 0.034 264.665);

  --color-white: #fff;
}

body {
  background-color: #f8fafb;
  padding-inline: 16px;
  padding-top: 80px;
}

body,
button,
select,
input,
textarea {
  font-family: "Inter_24pt-Regular";
}

img {
  width: 100%;
}

.d-none {
  display: none;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.top-bar {
  background-color: #fdfdfecd;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  z-index: 1000;
  align-items: center;
}

.top-bar__wrapper {
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.top-bar__logo-icon {
  width: clamp(40px, 30px + 1vw, 44px);
  height: clamp(40px, 30px + 1vw, 44px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background-image: linear-gradient(
    to bottom right,
    var(--color-violet-600),
    var(--color-indigo-600)
  );
  color: var(--color-white);
}

.top-bar__logo-icon svg {
  width: 18px;
  height: 18px;
}

.top-bar__brand {
  display: flex;
  align-items: center;
  gap: clamp(3px, 1px + 0.7vw, 10px);
}

.top-bar__title {
  font-size: clamp(20px, 18.5px + 0.5vw, 24px);
  font-weight: 700;
  color: var(--color-gray-900);
  font-family: "Inter_18pt-Bold";
}

.top-bar__title span {
  color: var(--color-violet-600);
}

.top-bar__subtitle {
  font-size: 12px;
  color: var(--color-gray-500);
  font-family: "Inter_18pt-SemiBold";
  display: none;
}

.top-bar__actions {
  display: flex;
  align-items: center;
  gap: clamp(5px, 3px + 0.5vw, 10px);
}

.top-bar__actions-img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
}

.btn--icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: none;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.1s;
}

.btn--notification svg {
  width: 14px;
  height: 16px;
}

.btn--settings svg {
  width: 16px;
  height: 16px;
}

.btn--notification:hover,
.btn--settings:hover {
  background-color: var(--color-gray-100);
}

.btn--notification:hover svg,
.btn--settings:hover svg {
  color: var(--color-gray-700);
}

.top-bar__btn {
  border: none;
  border-radius: 12px;
  padding: 10px clamp(15px, 13px + 0.5vw, 20px);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  background-image: linear-gradient(
    to right,
    var(--color-violet-600),
    var(--color-indigo-600)
  );
  color: var(--color-white);
  letter-spacing: 1px;
  transition: all 0.2s;
  cursor: pointer;
}

.top-bar__btn span {
  display: none;
}

.top-bar__btn:hover {
  box-shadow: 0 12px 20px -7px rgba(101, 66, 241, 0.6);
  transform: translateY(-3px);
}

.top-bar__btn svg {
  width: 12px;
  height: 12px;
}

.valid-warning {
  font-size: 12px;
  color: var(--color-rose-500);
  margin-top: 6px;
}

#formWindow {
  background-color: rgba(0, 0, 0, 0.05);
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

form {
  background-color: var(--color-white);
  width: 90%;
  max-width: 464px;
  position: relative;
  border-radius: 16px;
  max-height: 90vh;
  overflow-y: auto;
  animation: popup 0.5s;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

form::-webkit-scrollbar {
  display: none;
}

form header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-gray-100);
  background-color: var(--color-white);
  z-index: 60;
  font-size: 20px;
  font-weight: 700;
}

.form-close__btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}

.form-close__btn svg {
  width: 13.5px;
  height: 18px;
}

.form-close__btn:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  outline: none;
  border-radius: 12px;
  transition: all 0.2s;
}

form textarea {
  height: 70px;
  overflow-y: auto;
  resize: none;
}

select {
  appearance: none;
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--color-violet-500) ;
  box-shadow: 0 0 0 2px var(--color-violet-100);
}
.active-focus {
  border-color: var(--color-violet-500) ;
}

input::placeholder , textarea::placeholder  {
  color: #7C7D7D;
}

.input-row {
  margin-bottom: 20px;
}

.input-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-700);
}

.input-row label span {
  color: var(--color-rose-500);
}

.input-row input,
.input-row select,
.input-row textarea {
  margin-top: 6px;
}

.form-content {
  padding: 24px;
}

.contact-image {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-image: linear-gradient(
    to bottom right,
    var(--color-blue-400),
    var(--color-blue-600)
  );
  overflow: hidden;
  color: var(--color-white);
  position: relative;
}

.contact-image img {
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 30;
}

.contact-image svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 30px;
}

.form-image__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.formImage {
  background-color: var(--color-gray-100);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-gray-700);
  font-size: 14px;
  font-family: "Inter_18pt-SemiBold";
  transition: all 0.1s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.formImage:hover {
  background-color: var(--color-gray-200);
}

.formImage svg {
  color: var(--color-gray-500);
  width: 14px;
  height: 14px;
}

input[type="file"] {
  display: none;
}

.formImage svg {
  width: 14px;
  height: 14px;
}

.checkbox-row,
.checkbox-column {
  display: flex;
  align-items: center;
}

.checkbox-row {
  gap: 20px;
}

.checkbox-column {
  gap: 10px;
}

.checkbox-row input {
  width: fit-content;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.checkbox-favIcon,
.checkbox-emgIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-favIcon svg {
  width: 15.75px;
  height: 14px;
  color: var(--color-amber-400);
  margin-right: 5px;
}

.checkbox-emgIcon svg {
  width: 14px;
  height: 14px;
  color: var(--color-rose-500);
  margin-right: 5px;
}

.checkbox-column span {
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
}

.checkbox-column span:hover {
  color: var(--color-gray-900);
}

.form-btn__action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
  flex-direction: column-reverse;
}

#form-btn__action--cancel,
#form-btn__action--save {
  padding: 12px 20px;
  border-radius: 12px;
  flex: 1;
  width: 100%;
 font-size: 14px;
  border: none;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}

#form-btn__action--cancel {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

#form-btn__action--cancel:hover {
  background-color: var(--color-gray-200);
}

#form-btn__action--save {
  background-image: linear-gradient(
    to right,
    var(--color-violet-600),
    var(--color-indigo-600)
  );
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;
}

#form-btn__action--save:hover {
  box-shadow: 0 12px 20px -9px rgba(101, 66, 241, 0.6);
}

#form-btn__action--save svg {
  width: 12.5px;
  height: 14px;
}

.stats-row {
  padding-top: clamp(24px, 21px + 0.8vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stat-card {
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border: 1px solid var(--color-gray-100);
  transition: all 0.2s;
  padding: 20px;
  border-radius: 16px;
  flex: 1;
  gap: 20px;
}

.stat-card:hover {
  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.stat-card__icon-box {
  width: clamp(44px, 1.04vw + 37.33px, 48px);
  height: clamp(44px, 1.04vw + 37.33px, 48px);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
}

.stat-card__icon-box--blue {
  background-image: linear-gradient(
    to bottom right,
    var(--color-blue-500),
    var(--color-blue-600)
  );
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.stat-card__icon-box--orange {
  background-image: linear-gradient(
    to bottom right,
    var(--color-amber-400),
    var(--color-orange-500)
  );
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.stat-card__icon-box--red {
  background-image: linear-gradient(
    to bottom right,
    var(--color-rose-500),
    var(--color-red-600)
  );
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.stat-card__icon-box--blue svg {
  width: 20px;
  height: 16px;
}

.stat-card__icon-box--orange svg {
  width: 18px;
  height: 16px;
}

.stat-card__icon-box--red svg {
  width: 16px;
  height: 16px;
}

.stat-card__label {
  font-size: 12px;
  color: var(--color-gray-500);
}

.stat-card__number {
  font-weight: 700;
  font-size: clamp(20px, 18.18px + 0.48vw, 24px);
  color: var(--color-gray-900);
}

.content-area__header {
  margin-bottom: 20px;
}

.content-area__title {
  font-size: clamp(24px, 1.56vw + 14px, 30px);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-gray-900);
  font-family: "Inter_18pt-Bold";
}

.content-area__subtitle {
  color: var(--color-gray-500);
  font-size: 14px;
}

.main-layout {
  padding-block: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  position: relative;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 24px;
}

.search-bar__input:focus {
  border-color: var(--color-violet-500);
  box-shadow: 0 0 0 2px var(--color-violet-100);
}

.search-bar__icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-bar__icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
}

.search-bar__input {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  outline: none;
  flex: 1;
  border-radius: 12px;
  font-size: 14px;
  padding: 14px 14px 14px 40px;
}

.search-bar__input::placeholder {
  color: var(--color-gray-400);
}

.contact-cards__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-columns: minmax(0, 1fr); */
  gap: 15px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border: 1px solid var(--color-gray-100);
  transition: all 0.3s;
  padding: 16px 16px 12px;
  border-radius: 16px;
  min-width: 0;
}

.contact-card:hover {
  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.1) 0px 4px 20px;
}

.contact-card__img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-image: linear-gradient(
    to bottom right,
    var(--color-emerald-500),
    var(--color-teal-600)
  );
  /* background-image: url(avatar-2.jpg); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--color-white);
  font-weight: 600;
  font-size: 18px;
}

.mini-contact__img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-image: linear-gradient(
    to bottom right,
    var(--color-emerald-500),
    var(--color-teal-600)
  );
  /* background-image: url(avatar-2.jpg); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
}

.favoraite-icon,
.emergency-icon {
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.favoraite-icon {
  right: -2px;
  top: -2px;
  background-color: var(--color-amber-400);
}

.emergency-icon {
  right: -2px;
  bottom: -2px;
  background-color: var(--color-rose-500);
}

.favoraite-icon svg,
.emergency-icon svg {
  width: 9px;
  height: 9px;
  color: var(--color-white);
}

.contact-card__profile {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-card__titles {
  flex: 1;
  min-width: 0;
}

.contact-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.contact-card__phone-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.contact-card__phone-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray-500);
  letter-spacing: 1px;
}

.contact-card__icon--phone {
  width: 24px;
  height: 24px;
  background-color: var(--color-blue-100);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-card__icon--phone svg {
  width: 9px;
  height: 9px;
  color: var(--color-blue-600);
}

.contact-card__tags {
  margin-block: 12px;
}

.contact-card__row,
.contact-card__tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-card__row:first-of-type {
  margin-bottom: 8px;
}

.contact-card__body {
  margin-top: 12px;
}

.contact-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.contact-card__icon svg {
  width: 10px;
  height: 10px;
}

.contact-card__icon--email {
  background-color: var(--color-violet-100);
  color: var(--color-violet-600);
}

.contact-card__icon--location {
  background-color: var(--color-emerald-100);
  color: var(--color-emerald-600);
}

.tag--red {
  display: flex;
  align-items: center;
  background-color: var(--color-rose-50);
  color: var(--color-rose-600);
  gap: 5px;
}

.contact-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px 0px;
  border-top: 1px solid var(--color-gray-100);
  background-color: #fafbfc;
}

.contact-card__actions-left,
.contact-card__actions-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tag {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.tag--blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}

.tag--green {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}

.tag--purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-700);
}

.tag--yellow {
  background-color: var(--color-amber-100);
  color: var(--color-amber-700);
}

.tag--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.tag--red svg {
  width: 10px;
  height: 10px;
}

.action-btn,
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.contact-card__actions-left svg {
  width: 14px;
  height: 14px;
}

.action-btn--call {
  background-color: var(--color-emerald-50);
  color: var(--color-emerald-600);
}

.action-btn--call:hover {
  background-color: var(--color-emerald-100);
}

.action-btn--email {
  background-color: var(--color-violet-50);
  color: var(--color-violet-600);
}

.action-btn--email:hover {
  background-color: var(--color-violet-100);
}

.icon-btn--star {
  background-color: var(--color-amber-50);
  color: var(--color-amber-400);
}

.icon-btn--star:hover {
  background-color: var(--color-amber-100);
}

.icon-btn--heart {
  background-color: var(--color-rose-50);
  color: var(--color-rose-500);
}

.icon-btn--heart:hover {
  background-color: var(--color-rose-100);
}

.icon-btn--edit,
.icon-btn--delete {
  background-color: var(--color-gray-50);
  color: var(--color-gray-500);
}

.icon-btn--edit:hover {
  background-color: var(--color-indigo-50);
  color: var(--color-indigo-600);
}

.icon-btn--delete:hover {
  background-color: var(--color-rose-50);
  color: var(--color-rose-600);
}

.icon-btn--star svg {
  width: 18px;
  height: 16px;
}

.icon-btn--heart svg {
  width: 16px;
  height: 16px;
}

.icon-btn--edit svg {
  width: 14px;
  height: 14px;
}

.icon-btn--delete svg {
  width: 12.5px;
  height: 14px;
}

.contact-card__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--color-gray-600);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
  align-self: start;
}

.widget {
  border-radius: 16px;
  overflow: hidden;
}

.widget__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget__title {
  color: var(--color-gray-900);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  margin-bottom: 2px;
}

.widget__desc {
  display: none;
}

.widget__desc , .widget__desc-hidden{
  font-size: 11px;
  color: var(--color-gray-500);
}

.widget__icon-box {
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 36px;
  height: 36px;
}

.widget--warning .widget__icon-box svg {
  width: 15px;
  height: 15px;
}

.widget--danger .widget__icon-box svg {
  width: 14px;
  height: 14px;
}

.widget--warning .widget__icon-box {
  background-image: linear-gradient(
    to bottom right,
    var(--color-amber-400),
    var(--color-orange-500)
  );
}

.widget--danger .widget__icon-box {
  background-image: linear-gradient(
    to bottom right,
    var(--color-rose-500),
    var(--color-rose-600)
  );
}

.widget--warning .widget__header {
  background-image: linear-gradient(
    to bottom right,
    var(--color-amber-50),
    var(--color-orange-50)
  );
}

.widget--danger .widget__header {
  background-image: linear-gradient(
    to bottom right,
    var(--color-rose-50),
    var(--color-red-50)
  );
}

.widget__list {
  display: flex;
  flex-direction: column;
}

.widget--warning__contianer,
.widget--danger__contianer {
  padding: 12px;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: var(--color-gray-50);
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
  flex: 1;
}

.mini-contact__person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-contact__name {
  font-size: clamp(11px, 9.64px + 0.36vw, 14px);
  font-weight: 500;
}

.mini-contact__phone {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 400;
  color: var(--color-gray-500);
}

.mini-contact__action {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.mini-contact__action svg {
  width: 12px;
  height: 12px;
}

.mini-contact__action--call {
  color: var(--color-emerald-600);
  background-color: var(--color-emerald-100);
}

.mini-contact__action--danger {
  color: var(--color-rose-600);
  background-color: var(--color-rose-100);
}

.widget--danger .mini-contact:hover {
  background-color: var(--color-rose-50);
}

.widget--danger .mini-contact:hover .mini-contact__action--danger {
  color: var(--color-white);
  background-color: var(--color-rose-500);
}

.widget--warning .mini-contact:hover {
  background-color: var(--color-amber-50);
}

.widget--warning .mini-contact:hover .mini-contact__action--call {
  color: var(--color-white);
  background-color: var(--color-emerald-500);
}

.contact-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  grid-column: 1 / -1;
  padding-block: 40px;
}

.contact-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  color: var(--color-gray-300);
}

.contact-empty__icon svg {
  width: 30px;
  height: 30px;
}

.contact-empty__title {
  color: var(--color-gray-500);
  font-size: 16px;
  font-weight: 500;
}

.contact-empty__discription {
  color: var(--color-gray-400);
  font-size: 14px;
}

@keyframes popup {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes popdown {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}