@moontra/moonui-pro/src/styles/index.css

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

/* MoonUI Pro - Complete CSS System */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./advanced-chart.css";
@import "./calendar.css";

/* React Grid Layout - Required for Dashboard component */
@import "react-grid-layout/css/styles.css";
@import "react-resizable/css/styles.css";

/* Global Keyframes */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dashboard Grid Layout Overrides */
.react-grid-layout {
  position: relative !important;
  transition: height 200ms ease;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}

.react-grid-item > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}

.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

/* Prevent overflow on small screens */
@media (max-width: 768px) {
  .react-grid-layout {
    overflow-x: hidden !important;
    height: auto !important;
  }
  
  .react-grid-item {
    position: relative !important;
    transform: none !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .react-grid-item:last-child {
    margin-bottom: 0 !important;
  }
  
  /* React grid layout'u mobilde devre dışı bırak */
  .react-grid-item.cssTransforms {
    position: relative !important;
    transform: none !important;
  }
  
  .react-grid-placeholder {
    display: none !important;
  }
}