@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .admin-sidebar-collapsed-only {
    display: none;
  }

  @media (min-width: 1024px) {
    .admin-layout {
      grid-template-columns: 18rem minmax(0, 1fr);
      transition: grid-template-columns 180ms ease;
    }

    .admin-layout[data-sidebar-collapsed="true"] {
      grid-template-columns: 4.75rem minmax(0, 1fr);
    }

    .admin-layout[data-sidebar-collapsed="true"] .admin-sidebar-expanded-only {
      display: none;
    }

    .admin-layout[data-sidebar-collapsed="true"] .admin-sidebar-collapsed-only {
      display: block;
    }

    .admin-layout[data-sidebar-collapsed="true"] .admin-sidebar-inner {
      overflow: visible;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }
}

/* Prevent Chart.js' inline canvas width from becoming a minimum width for its
   parent. The controller adds this class to the immediate canvas container. */
.chart-responsive-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    contain: inline-size;
}

.chart-responsive-container > canvas {
    display: block;
    min-width: 0;
    max-width: 100% !important;
}

.menu-container {
    @apply items-center justify-between w-full lg:flex lg:w-auto lg:order-1 h-full hidden z-1000;
}

.menu-ul {
    @apply h-full w-full table lg:flex flex-col font-medium py-2 lg:p-0 mt-0 border-2 border-gray-300 rounded-lg lg:space-x-8 rtl:space-x-reverse md:flex-row lg:mt-0 bg-gray-100 md:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700;
}

.menu-li {
    @apply h-full p-0 text-center;
}

.menu-button {
    @apply bg-white h-full items-center justify-center content-center inline-flex hover:bg-gray-200 p-4 lg:p-0 lg:m-0 m-2 text-gray-900 rounded-sm dark:text-white  dark:border-gray-700;
}

.menu-button-div {
    @apply block md:p-0 text-gray-900 rounded-sm dark:text-white;
}