/**
 * WP Chart Visualizer - Tailwind CSS Styles
 * Custom Tailwind components for the plugin
 */

/* Chart Container Styles */
.wpcv-chart-container {
    @apply relative p-4 bg-white rounded-lg shadow-md;
}

.wpcv-chart-container h3 {
    @apply text-xl font-semibold mb-4 text-gray-800;
}

.wpcv-chart-wrapper {
    @apply relative w-full;
}

/* Admin Styles */
.wpcv-admin-container {
    @apply flex flex-wrap gap-6 mt-6;
}

.wpcv-admin-main {
    @apply flex-1 min-w-0 bg-white p-6 rounded-lg shadow;
}

.wpcv-admin-sidebar {
    @apply w-full lg:w-80 space-y-4;
}

.wpcv-info-box {
    @apply bg-white p-5 rounded-lg shadow;
}

.wpcv-info-box h3 {
    @apply text-lg font-semibold mb-3 text-gray-800;
}

.wpcv-info-box ol {
    @apply list-decimal list-inside space-y-2 text-gray-600;
}

.wpcv-info-box ul {
    @apply list-disc list-inside space-y-1 text-sm text-gray-600;
}

.wpcv-info-box code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

/* Form Styles */
.wpcv-form .form-table th {
    @apply font-medium text-gray-700;
}

.wpcv-form select,
.wpcv-form input[type="text"] {
    @apply border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500;
}

.wpcv-form .description {
    @apply text-sm text-gray-500 mt-1;
}

/* Preview Section */
.wpcv-preview-section {
    @apply mt-8 p-6 bg-gray-50 rounded-lg;
}

.wpcv-preview-section h3 {
    @apply text-lg font-semibold mb-4 text-gray-800;
}

#chart-preview-container {
    @apply bg-gray-100 p-5 rounded-md min-h-[300px] flex items-center justify-center;
}

/* Shortcode Section */
.wpcv-shortcode-section {
    @apply mt-6 p-6 bg-blue-50 rounded-lg;
}

.wpcv-shortcode-section h3 {
    @apply text-lg font-semibold mb-3 text-gray-800;
}

.shortcode-display {
    @apply flex gap-2;
}

#generated-shortcode {
    @apply flex-1 font-mono text-sm bg-white border-gray-300 rounded-md;
}

#copy-shortcode {
    @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors;
}

/* Color Picker Styles */
.color-picker-row {
    @apply flex flex-wrap gap-2 mb-3;
}

.wp-picker-container {
    @apply inline-block;
}

#add-color {
    @apply px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors;
}

/* Button Styles */
.button-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors;
}

.button-secondary {
    @apply px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wpcv-chart-container {
        @apply p-3;
    }
    
    .wpcv-admin-container {
        @apply flex-col;
    }
    
    .wpcv-admin-sidebar {
        @apply w-full;
    }
}

/* Chart Canvas Responsive */
.wpcv-chart-canvas {
    @apply w-full h-full;
}

/* Loading State */
.wpcv-loading {
    @apply flex items-center justify-center h-64;
}

.wpcv-loading::after {
    content: "";
    @apply w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin;
}

/* Error State */
.wpcv-error {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md;
}

/* Success Message */
.wpcv-success {
    @apply bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md;
}