/**
 * Infografis Tahun Selector Styles
 * Styling untuk fitur pemilihan tahun data infografis
 */

/* Tahun Selector Container */
.tahun-selector-container {
    @apply flex items-center justify-center gap-3 mb-6 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

/* Tahun Selector Dropdown */
.tahun-selector {
    @apply px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
    @apply hover:border-gray-400 dark:hover:border-gray-500;
    min-width: 100px;
}

/* Tahun Selector Label */
.tahun-selector-label {
    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
    white-space: nowrap;
}

/* Loading Indicator */
.loading-indicator {
    @apply inline-flex items-center gap-2 text-blue-500;
}

.loading-spinner {
    @apply animate-spin h-4 w-4 text-blue-500;
}

/* Section Content dengan Loading State */
.section-content {
    @apply transition-opacity duration-300;
}

.section-content.loading {
    @apply opacity-50 pointer-events-none;
}

/* Tahun Display dalam Title */
.tahun-display {
    @apply font-semibold text-blue-600 dark:text-blue-400 transition-colors duration-200;
}

/* Animasi untuk perubahan data */
.data-updating {
    @apply transition-all duration-500 ease-in-out;
}

.stat-box-value {
    @apply transition-all duration-300 ease-in-out;
}

/* Error State */
.section-error {
    @apply bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded;
}

.section-error-message {
    @apply text-red-700 dark:text-red-300 text-sm;
}

/* Responsive Design */
@media (max-width: 640px) {
    .tahun-selector-container {
        @apply flex-col gap-2 text-center;
    }

    .tahun-selector {
        @apply w-full;
    }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .tahun-selector {
        @apply bg-gray-700 border-gray-600 text-white;
    }

    .tahun-selector:focus {
        @apply ring-blue-400 border-blue-400;
    }
}

/* Chart Container Loading State */
.chart-container.loading {
    @apply relative;
}

.chart-container.loading::before {
    content: "";
    @apply absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-75 dark:bg-opacity-75 flex items-center justify-center z-10;
}

.chart-container.loading::after {
    content: "Memuat data...";
    @apply absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-400 text-sm z-20;
}