Notes

/* ============ UNIQUE MODERN DASHBOARD THEME ============ */

/* Dashboard background with gradient */
.dashboard-content,
.dashboard,
.dashboard-content-wrapper,
.grid-container,
.dashboard-grid,
.dashboard-content > div,
.grid-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
min-height: 100vh;
position: relative;
}

/* Add animated background pattern */
.dashboard-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
pointer-events: none;
animation: backgroundMove 10s linear infinite;
}

@keyframes backgroundMove {
0% { transform: translate(0, 0); }
100% { transform: translate(35px, 35px); }
}

/* Header with glassmorphism effect */
.header-with-actions {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: white;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

/* Tabs with glass effect */
.dashboard-header-container + div .dashboard-component.dashboard-component-tabs {
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px);
border-radius: 15px;
margin: 10px;
padding: 5px;
font-weight: bold;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

/* Filter bar with frosted glass */
div[data-test=filter-bar] > div {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(10px);
border-radius: 15px;
margin: 10px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

/* ============ UNIQUE CHART CARD DESIGN ============ */

/* Neumorphic chart cards */
.dashboard-component-chart-holder {
background: linear-gradient(145deg, #ffffff, #f0f0f3) !important;
border-radius: 20px !important;
box-shadow:
20px 20px 60px rgba(102, 126, 234, 0.2),
-20px -20px 60px rgba(255, 255, 255, 0.7),
inset 1px 1px 1px rgba(255, 255, 255, 0.9) !important;
margin: 15px !important;
padding: 5px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible !important;
position: relative;
}

/* Floating effect on hover */
.dashboard-component-chart-holder:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
25px 25px 75px rgba(102, 126, 234, 0.3),
-25px -25px 75px rgba(255, 255, 255, 0.7),
inset 1px 1px 1px rgba(255, 255, 255, 0.9),
0 10px 40px rgba(118, 75, 162, 0.3) !important;
}

/* Animated gradient border */
.dashboard-component-chart-holder::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #667eea);
border-radius: 20px;
background-size: 300% 300%;
animation: gradientRotate 10s ease infinite;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}

.dashboard-component-chart-holder:hover::before {
opacity: 1;
}

@keyframes gradientRotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Corner badges with numbers */
.dashboard-component-chart-holder::after {
content: attr(data-chart-number);
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
color: white;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
z-index: 10;
}

/* Chart content with glass effect */
.chart-container {
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 15px;
padding: 15px;
}

/* Unique chart headers */
.dashboard-component-chart-holder .header-title {
background: linear-gradient(90deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}

/* Glowing effect on focus */
.dashboard-component-chart-holder:focus-within {
box-shadow:
0 0 50px rgba(102, 126, 234, 0.5),
25px 25px 75px rgba(102, 126, 234, 0.3),
-25px -25px 75px rgba(255, 255, 255, 0.7) !important;
}

/* Chart action buttons with pill shape */
.dashboard-component-chart-holder .chart-header-button {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: white !important;
border-radius: 20px !important;
padding: 5px 15px !important;
transition: all 0.3s ease;
border: none !important;
}

.dashboard-component-chart-holder .chart-header-button:hover {
transform: scale(1.1);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* Transparent rows and columns */
.dashboard-component-row,
.dashboard-component-column,
.dragdroppable-row,
.dragdroppable-column {
background: transparent !important;
}

/* Loading state with pulse */
.dashboard-component-chart-holder .loading {
background: linear-gradient(145deg, #f0f0f3, #ffffff) !important;
animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

/* Chart appear animation */
@keyframes chartSlideIn {
from {
opacity: 0;
transform: translateY(30px) rotateX(-10deg);
}
to {
opacity: 1;
transform: translateY(0) rotateX(0);
}
}

.dashboard-component-chart-holder {
animation: chartSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unique scrollbar styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
}

/* Mobile responsive */
@media (max-width: 768px) {
.dashboard-component-chart-holder {
margin: 10px 5px !important;
border-radius: 15px !important;
}

.dashboard-component-chart-holder:hover {
transform: translateY(-5px) scale(1.01);
}
}