/* Nekos.best decorations for tiles */
/* Can be used on profile, schedule, and other pages */

/* Base decoration styles for cards/tiles */
.stat-card,
.year-stat,
.chart-card,
.advanced-stat-card,
.achievement-card,
.month-day,
.calendar-day {
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
}

/* Profile card needs overflow: visible for action buttons */
.profile-card {
    position: relative;
    overflow: visible !important;
    background-clip: padding-box;
}

/* Simple overlay - same size as the card */
.stat-card::after,
.year-stat::after,
.chart-card::after,
.advanced-stat-card::after,
.achievement-card::after,
.month-day::after,
.calendar-day::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        oklch(var(--b1) / 0.85) 0%, 
        oklch(var(--b2) / 0.80) 50%, 
        oklch(var(--b1) / 0.83) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Profile card overlay */
.profile-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        oklch(var(--b1) / 0.85) 0%, 
        oklch(var(--b2) / 0.80) 50%, 
        oklch(var(--b1) / 0.83) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Ensure content is above overlays */
.stat-card > *,
.year-stat > *,
.profile-card > *,
.chart-card > *,
.advanced-stat-card > *,
.achievement-card > *,
.month-day > *,
.calendar-day > * {
    position: relative;
    z-index: 2;
}

/* Text color for readability */
.stat-card h3,
.stat-card .stat-value,
.stat-card .stat-label,
.stat-card .stat-icon,
.year-stat .year-stat-value,
.year-stat .year-stat-label,
.profile-card h2,
.profile-card p,
.chart-card h3,
.advanced-stat-card h4,
.advanced-stat-card .advanced-stat-title,
.achievement-card h4,
.achievement-card p,
.month-day .month-day-number,
.month-day .episode-dot,
.calendar-day .day-name,
.calendar-day .day-date {
    color: oklch(var(--bc)) !important;
}

/* Ensure inner containers are transparent */
.advanced-stat-card .watch-time-stats,
.advanced-stat-card .score-distribution,
.advanced-stat-card .viewing-patterns,
.advanced-stat-card .year-review,
.chart-card .genre-bars,
.chart-card #genre-chart {
    background: transparent !important;
}

/* Different background positions for variety */
.stat-card:nth-child(even)::before {
    background-position: bottom left;
}

.stat-card:nth-child(odd)::before {
    background-position: top right;
}

/* Calendar-specific adjustments */
.month-day.has-episodes::before,
.calendar-day.has-episodes::before {
    opacity: 0.05; /* Slightly more visible on days with anime */
}

/* Mobile: disable decorations for performance */
@media (max-width: 768px) {
    .stat-card::before,
    .year-stat::before,
    .profile-card::before,
    .chart-card::before,
    .advanced-stat-card::before,
    .achievement-card::before,
    .month-day::before,
    .calendar-day::before {
        display: none;
    }
}