/*
 * 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 directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Drag & Drop Visuals */
.sortable-ghost {
  opacity: 0.5;
  background-color: #eff6ff;
  border: 2px dashed #a5b4fc;
}

.sortable-drag {
  cursor: grabbing;
  transform: scale(1.05) rotate(2deg);
  background-color: white;
  z-index: 50;
  /* Ring simulation + Shadow */
  box-shadow: 0 0 0 2px #6366f1, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Standardized Card Styles */
.card {
  background-color: white;
  border-radius: 0.75rem;
  /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* shadow-lg */
  border: 1px solid #e5e7eb;
  /* border-gray-200 */
  overflow: hidden;
}

.dark .card {
  background-color: rgb(31 41 55);
  /* bg-gray-800 */
  border-color: rgb(55 65 81);
  /* border-gray-700 */
}

/* Card with hover effect */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* shadow-xl */
}

/* Chart/Data Card - elevated style */
.card-elevated {
  background-color: white;
  border-radius: 1rem;
  /* rounded-2xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* shadow-xl */
  border: 1px solid #d1d5db;
  /* border-gray-300 */
}

.dark .card-elevated {
  background-color: rgb(31 41 55);
  border-color: rgb(55 65 81);
}