:root {
  /* Neutral Colors */
  --neutral-900: hsl(227, 75%, 14%);
  --neutral-800: hsl(226, 25%, 17%);
  --neutral-700: hsl(225, 23%, 24%);
  --neutral-600: hsl(226, 11%, 37%);
  --neutral-300: hsl(0, 0%, 78%);
  --neutral-200: hsl(217, 61%, 90%);
  --neutral-100: hsl(0, 0%, 93%);
  --neutral-0: hsl(200, 60%, 99%);

  /* Red Colors */
  --red-400: hsl(3, 86%, 64%);
  --red-500: hsl(3, 71%, 56%);
  --red-700: hsl(3, 77%, 44%);

  /* Gradients */
  --gradient-light: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
  --gradient-dark: linear-gradient(180deg, #040918 0%, #091540 100%);

  /*Variables colors for change in light and dark themes*/
  --theme-toggle: var(--neutral-700);

  --bg-color: var(--gradient-dark);
  --bg-btn: var(--neutral-800);
  --bg-cards: var(--neutral-800);
  --bg-theme: var(--neutral-600);

  --text-color: var(--neutral-100);
  --title-color: var(--neutral-0);

  /* Typography */
  --font-family: "Noto Sans", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-base: 16px;

  /* Breakpoints (opcional, para referência) */
  --breakpoint-mobile: 375px;
  --breakpoint-desktop: 1440px;
}

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

body {
  font-family: var(--font-family);
  background: var(--bg-color);
  color: var(--text-color);
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 100vh;
}

body.theme-light {
  --text-color: var(--neutral-800);
  --text-title: var(--neutral-800);
  --title-color: var(--neutral-800);
  --bg-color: var(--gradient-light);
  --bg-cards: var(--neutral-0);
  --bg-btn: var(--neutral-0);
  --bg-theme: var(--neutral-200);

  color: var(--text-color);
  background: var(--bg-color);
}

.btn {
  border-radius: 2rem;
  border: 1px solid var(--neutral-600);
  background-color: var(--bg-btn);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all ease 0.3s;
}

.btn:hover {
  background: var(--red-700);
}

.active {
  background-color: var(--red-400);
}

#box-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  margin: 1rem auto;
  padding: 1rem;
  max-width: 1200px;

  .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-cards);
    padding: 0.7rem;
    border-radius: 12px;

    .theme-toggle {
      background-color: var(--bg-theme);
      padding: 0.8rem;
      border-radius: 12px;
      cursor: pointer;
    }
  }

  .box-extension-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    h1 {
      color: var(--title-color);
    }

    nav {
      display: flex;
      gap: 1rem;
    }

    nav button {
      padding: 0.7rem 1.2rem;
    }
  }

  .group-box-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    /* Auto-fit -> Crie quantas colunas couberem no espaço disponível"** */
    grid-gap: 1rem;

    .box-list,
    .box-message {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      border-radius: 1rem;
      background: var(--bg-cards);
      color: var(--text-color);
      font-size: 1rem;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .box-message {
      align-items: center;
    }

    .list-info {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .list-info h3 {
      color: var(--title-color);
    }

    .list-info .description p {
      margin: 0.6rem 0;
    }

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

    .actions button {
      height: fit-content;
    }

    .actions .btn {
      padding: 0.5rem 1rem;
    }

    .actions .toggle-btn {
      position: relative;
      height: 30px;
      width: 60px;
      border: none;
      background-color: var(--neutral-600);
    }

    .actions .toggle-btn.active {
      background-color: var(--red-500);
    }

    .actions .toggle-btn:after {
      transition: all ease 0.3s;
      position: absolute;
      content: "";
      width: 20px;
      height: 20px;
      top: 50%;
      left: 5px;
      transform: translateY(-50%); /*correct align center*/
      background-color: var(--neutral-0);
      border-radius: 50%;
    }

    .actions:has(.toggle-btn.active) .toggle-btn:after {
      left: calc(100% - 20px - 5px);
    }
  }
}

@media (min-width: 600px) {
  #box-main .box-extension-list {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Classe para esconder extensões no filtro */
.hidden {
  display: none !important;
}