/* Mokis responsive layout polish.
   Desktop keeps the compact table toolbar. Mobile removes duplicated controls
   because the cards already expose the useful overview/stat information. */

@media (max-width: 767px) {
  /* The desktop-oriented Mokis/listed + Overview/Stats/Market toolbar duplicates
     the mobile filter summary and the preset does not change mobile cards. */
  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child {
    display: none !important;
  }

  /* Make the count in the mobile search/filter panel self-explanatory. */
  div[class*="max-w-[98vw]"] > div:first-child > div:nth-child(2) > div:last-child::after {
    content: " Mokis";
  }

  div[class*="max-w-[98vw]"] > div:first-child > div:nth-child(2) > div:last-child {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 1024px) {
  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > aside {
    margin-top: -8px;
    top: 72px;
    height: calc(100vh - 128px);
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > aside > div:first-child {
    padding: 12px 14px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > aside > div:nth-child(2) {
    padding-top: 12px;
  }
}

@media (min-width: 1280px) {
  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child {
    min-height: 32px;
    margin-bottom: 8px;
    gap: 8px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child > div:first-child > span {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child > div:last-child {
    gap: 6px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child > div:last-child > div {
    padding: 2px;
    border-radius: 10px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child > div:last-child > div:first-child button {
    padding: 4px 10px;
  }

  div[class*="max-w-[98vw]"] > .flex.items-start.gap-6 > main > div:first-child > div:last-child > div:last-child button {
    padding: 4px;
  }
}