/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this application. However, it is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* Sidebar product list scroll */
.sidebar-products-scroll {
  scrollbar-width: thin;
  scrollbar-color: #D6D3D1 transparent;
}

.sidebar-products-scroll::-webkit-scrollbar {
  width: 5px;
}

.sidebar-products-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-products-scroll::-webkit-scrollbar-thumb {
  background: rgba(214, 211, 209, 0.4);
  border-radius: 9999px;
}

.sidebar-products-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(214, 211, 209, 1);
}

/* Dashboard layout */
.dashboard-container {
  overflow: hidden;
  height: 100vh;
}

#main-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile horizontal scroll */
@media (max-width: 768px) {
  .dashboard-container {
    height: 100vh;
    overflow: hidden;
  }

  .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }

  .overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}