/**
 * Price Chart Container Styles
 *
 * Chart wrapper, loading states, error states, and canvas container
 *
 * @package PC_Kompas_Trends
 * @since 1.0.0
 */

/* ============================================================================
   PRICE CHART CONTAINER
   ============================================================================ */

.pkt-price-chart {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

/* Error state container variant */
.pkt-price-chart--error {
    padding: clamp(1.5rem, 3vw, 2rem);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   PRICE STATISTICS DISPLAY
   ============================================================================ */

.pkt-price-chart__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    margin: clamp(0.5rem, 1vw, 0.75rem) 0 0 0;
}

/**
 * Individual Stat Item
 *
 * - Card-like container with subtle background
 * - Padding for breathing room
 * - Rounded corners for modern look
 */
.pkt-price-chart__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
    padding: clamp(0.75rem, 1.5vw, 1rem);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    text-align: center;
}

/**
 * Stat Label
 *
 * - Small, muted text for hierarchy
 * - Uppercase for visual distinction
 * - Consistent spacing
 */
.pkt-price-chart__stat-label {
    display: block;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/**
 * Stat Value
 *
 * - Larger, bold text for prominence
 * - Uses Intl.NumberFormat() from JS for currency formatting
 * - Base color matches text-primary
 */
.pkt-price-chart__stat-value {
    display: block;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/**
 * Stat Value - Lowest Price
 *
 * - Green color to indicate favorable price
 * - Uses success color from design system
 */
.pkt-price-chart__stat-value--low {
    color: var(--success);
}

/**
 * Stat Value - Highest Price
 *
 * - Red color to indicate unfavorable price
 * - Uses error color from design system
 */
.pkt-price-chart__stat-value--high {
    color: var(--error);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.pkt-price-chart__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 200px;
    padding: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    color: var(--text-secondary);
}

/**
 * Loading Spinner
 *
 * - SVG-based spinner (defined in PHP component)
 * - Fluid sizing with clamp()
 * - Smooth rotation animation
 * - Color inherits from parent
 */
.pkt-price-chart__spinner {
    display: block;
    width: clamp(2rem, 4vw, 2.5rem);
    height: clamp(2rem, 4vw, 2.5rem);
    animation: pkt-spin 1s linear infinite;
    color: var(--accent);
    flex-shrink: 0;
}

/**
 * Loading Text
 *
 * - Semantic color for muted state
 * - Responsive font size
 */
.pkt-price-chart__loading span {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    color: var(--text-secondary);
}

/* ============================================================================
   ERROR STATE
   ============================================================================ */

.pkt-price-chart__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 150px;
    padding: clamp(1.5rem, 2vw, 2rem);
    text-align: center;
}

/**
 * Error Message
 *
 * - Red text to indicate error state
 * - Responsive font size
 * - Margin spacing
 */
.pkt-price-chart__error p {
    margin: 0;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    color: var(--error);
    line-height: 1.5;
    max-width: 400px;
}

/**
 * Retry Button
 *
 * - Touch-friendly minimum size: 44px height
 * - Primary button styling with accent color
 * - Smooth transitions
 */
.pkt-price-chart__retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.pkt-price-chart__retry-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.pkt-price-chart__retry-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pkt-price-chart__retry-btn:focus:not(:focus-visible) {
    outline: none;
}

.pkt-price-chart__retry-btn:active {
    transform: translateY(0);
}

/* ============================================================================
   CHART CANVAS CONTAINER
   ============================================================================ */

/**
 * Canvas Container
 *
 * - Position relative for canvas positioning context
 * - Width 100% to fill parent
 * - Height controlled via inline style in PHP
 * - Ensures proper Chart.js rendering
 */
.pkt-price-chart__canvas-container {
    position: relative;
    width: 100%;
    height: 300px; /* Default - can be overridden by inline style */
    margin: clamp(0.5rem, 1vw, 1rem) 0 0 0;
}

/**
 * Canvas Element
 *
 * - Fills container completely
 * - Max-width prevents overflow on edge cases
 */
.pkt-price-chart__canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/**
 * Spinner Rotation Animation
 *
 * - Continuous 360-degree rotation
 * - 1 second duration for smooth appearance
 * - Linear timing function for consistent speed
 * - Respects prefers-reduced-motion
 */
@keyframes pkt-spin {
    to {
        transform: rotate(360deg);
    }
}

/**
 * Fade-in Animation (for content reveal)
 *
 * - Used when transitioning from loading to content
 */
@keyframes pkt-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   DARK/LIGHT MODE SUPPORT
   ============================================================================ */

/**
 * Dark Mode Overrides
 *
 * - Darker backgrounds for better contrast
 * - Lighter text colors
 * - Adjusted shadows for depth in dark environments
 */
.dark .pkt-price-chart,
html.dark .pkt-price-chart {
    background: var(--bg-secondary);
}

.dark .pkt-price-chart__stat,
html.dark .pkt-price-chart__stat {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/**
 * Light Mode Overrides
 *
 * - Light backgrounds with subtle borders
 * - Dark text for readability
 */
.light .pkt-price-chart,
html.light .pkt-price-chart {
    background: var(--bg-primary);
}

.light .pkt-price-chart__stat,
html.light .pkt-price-chart__stat {
    background: var(--bg-secondary);
    border-color: var(--border);
}

/* ============================================================================
   UTILITY / VISIBILITY
   ============================================================================ */

/**
 * x-cloak - Alpine.js visibility utility
 *
 * Prevents flash of uninitialized content
 * Controlled by Alpine.js, CSS just provides display: none
 */
[x-cloak] {
    display: none !important;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

/**
 * Print-friendly styles
 *
 * - Simplify layout for printed output
 * - Remove interactive elements
 * - Use readable colors
 */
@media print {
    .pkt-price-chart__controls {
        display: none;
    }

    .pkt-price-chart__loading,
    .pkt-price-chart__error {
        display: none;
    }

    .pkt-price-chart {
        background: white;
        padding: 1rem;
    }

    .pkt-price-chart__period-btn {
        display: none;
    }

    .pkt-price-chart__stats {
        break-inside: avoid;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE SUPPORT
   ============================================================================ */

/**
 * High contrast mode - enhance borders and text
 *
 * For users with vision impairments who use high contrast modes
 */
@media (prefers-contrast: more) {
    .pkt-price-chart__stat {
        border-width: 2px;
    }

    .pkt-price-chart__stat-value {
        font-weight: 800;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/**
 * Reduced motion - disable animations
 *
 * Respects prefers-reduced-motion media query for users
 * with motion sensitivity or vestibular disorders
 */
@media (prefers-reduced-motion: reduce) {
    .pkt-price-chart__spinner {
        animation: none;
    }

    .pkt-price-chart__retry-btn {
        transition: none;
    }

    .pkt-price-chart__retry-btn:hover,
    .pkt-price-chart__retry-btn:active {
        transform: none;
    }
}

/**
 * Focus visible - keyboard navigation
 *
 * Clear focus indicators for keyboard users
 * Ensures accessibility compliance (WCAG 2.4.7)
 */
.pkt-price-chart__retry-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}