/**
 * Premium Charts CSS Module v2.0.0 - INFOGRAM-LEVEL QUALITY
 * 
 * Design inspired by Infogram's premium data visualization:
 * - Professional spacing & micro-interactions
 * - Intelligent hover states with smooth transitions
 * - Grid backgrounds for data context
 * - Sophisticated shadow system for depth
 * - Rich typography with perfect alignment
 * - Smooth value animations with easing
 * - Touch-optimized for all devices
 * 
 * Key improvements over v1.0:
 * - 3x larger padding for breathing room
 * - Layered shadow system (Infogram-style elevation)
 * - Grid overlay for data precision
 * - Hover effects that scale/lift bars
 * - Value labels positioned outside bars (more readable)
 * - Professional color palette with hover states
 * 
 * @since v5.36.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Premium Chart Tokens)
   ========================================================================== */

:root {
    /* Chart Container - INFOGRAM-LEVEL SPACING */
    --pc-container-bg: #FFFFFF;
    --pc-container-border: rgba(0, 0, 0, 0.06);
    --pc-container-radius: 20px;
    --pc-container-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.04);
    --pc-container-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.08);
    --pc-container-padding: 3.5rem 3rem; /* Generous padding like Infogram */
    
    /* Typography - Professional Hierarchy */
    --pc-title-size: 1.75rem; /* Bigger, bolder titles */
    --pc-title-weight: 700;
    --pc-title-line-height: 1.2;
    --pc-subtitle-size: 1rem;
    --pc-subtitle-weight: 500;
    --pc-label-size: 0.9375rem; /* Larger, easier to read */
    --pc-label-weight: 500;
    --pc-value-size: 1rem; /* Bold values stand out */
    --pc-value-weight: 700;
    --pc-source-size: 0.8125rem;
    --pc-source-color: #6B7280;
    
    /* Colors - Infogram Professional Palette (100% solid) */
    --pc-blue: #1E88E5;
    --pc-blue-hover: #1565C0;
    --pc-red: #E53935;
    --pc-red-hover: #C62828;
    --pc-yellow: #FFB300;
    --pc-yellow-hover: #FF8F00;
    --pc-green: #43A047;
    --pc-green-hover: #2E7D32;
    --pc-purple: #8E24AA;
    --pc-purple-hover: #6A1B9A;
    --pc-teal: #00897B;
    --pc-teal-hover: #00695C;
    --pc-orange: #FB8C00;
    --pc-orange-hover: #E65100;
    --pc-pink: #D81B60;
    --pc-pink-hover: #AD1457;
    --pc-indigo: #3949AB;
    --pc-indigo-hover: #283593;
    --pc-cyan: #00ACC1;
    --pc-cyan-hover: #00838F;
    
    /* Semantic */
    --pc-positive: #43A047;
    --pc-negative: #E53935;
    --pc-neutral: #78909C;
    
    /* Bar dimensions - Generous sizing */
    --pc-bar-height: 48px; /* Taller bars = easier to see */
    --pc-bar-height-stacked: 56px;
    --pc-bar-gap: 20px; /* More space between bars */
    --pc-bar-radius: 8px; /* Softer corners */
    --pc-bar-radius-full: 9999px;
    --pc-bar-border: 2px solid rgba(255, 255, 255, 0.15);
    
    /* Animation - Smooth & sophisticated */
    --pc-animation-duration: 1.2s;
    --pc-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce out */
    --pc-hover-duration: 0.25s;
    --pc-hover-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Grid overlay */
    --pc-grid-color: rgba(0, 0, 0, 0.04);
    --pc-grid-line-width: 1px;

    /* Grid pattern (NO CSS gradients: use an SVG pattern background) */
    --pc-grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M79.5 0V80' stroke='%23E5E7EB' stroke-width='1'/%3E%3Cpath d='M0 79.5H80' stroke='%23E5E7EB' stroke-width='1'/%3E%3C/svg%3E");
    
    /* Gauge */
    --pc-gauge-size: 200px;
    --pc-gauge-stroke: 20px;
    --pc-gauge-track: rgba(0, 0, 0, 0.06);
    
    /* Tooltip */
    --pc-tooltip-bg: #1E293B;
    --pc-tooltip-text: #FFFFFF;
    --pc-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    --pc-tooltip-radius: 8px;
}

/* Dark mode tokens */
[data-theme="dark"] {
    --pc-container-bg: #1E293B;
    --pc-container-border: #334155;
    --pc-container-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.4);
    --pc-container-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6);
    --pc-grid-color: rgba(255, 255, 255, 0.04);
    --pc-grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M79.5 0V80' stroke='%23334155' stroke-width='1'/%3E%3Cpath d='M0 79.5H80' stroke='%23334155' stroke-width='1'/%3E%3C/svg%3E");
    --pc-gauge-track: rgba(255, 255, 255, 0.08);
    --pc-source-color: #94A3B8;
    --pc-tooltip-bg: #F8FAFC;
    --pc-tooltip-text: #1E293B;
}

/* ==========================================================================
   PREMIUM CHART CONTAINER - INFOGRAM-LEVEL POLISH
   ========================================================================== */

.pc-chart {
    position: relative;
    background: var(--pc-container-bg);
    border: 1px solid var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    padding: var(--pc-container-padding);
    margin: 3rem auto;
    max-width: 1000px;
    box-shadow: var(--pc-container-shadow-base);
    overflow: visible;
    transition: box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
}

.pc-chart:hover {
    box-shadow: var(--pc-container-shadow-hover);
}

.pc-chart__header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.pc-chart__title {
    margin: 0 0 0.5rem 0;
    font-size: var(--pc-title-size);
    font-weight: var(--pc-title-weight);
    color: var(--color-text, #1A1A1A);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.pc-chart__subtitle {
    margin: 0;
    font-size: var(--pc-subtitle-size);
    color: var(--color-text-muted, #6B7280);
    line-height: 1.5;
}

.pc-chart__source {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-container-border);
    font-size: var(--pc-source-size);
    color: var(--color-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   HORIZONTAL BAR CHART - INFOGRAM PROFESSIONAL QUALITY
   ========================================================================== */

/* Grid overlay for data precision (like Infogram) */
.pc-chart--with-grid {
    background-image: var(--pc-grid-pattern);
    background-repeat: repeat;
    background-size: 80px 80px;
    background-position: 0 0;
}

/* Horizontal bar container */
.pc-hbar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-bar-gap);
    padding: 1.5rem 0;
}

.pc-hbar__row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr auto;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--pc-bar-height);
    position: relative;
}

.pc-hbar__label {
    font-size: var(--pc-label-size);
    font-weight: var(--pc-label-weight);
    color: var(--color-text, #1A1A1A);
    text-align: right;
    padding-right: 0;
}

/* Bar track (background) */
.pc-hbar__track {
    position: relative;
    height: var(--pc-bar-height);
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Bar fill (colored bar) - INFOGRAM-LEVEL POLISH */
.pc-hbar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--pc-bar-radius);
    background: var(--pc-blue);
    transition: 
        width var(--pc-animation-duration) var(--pc-animation-easing),
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
    will-change: width;
    cursor: pointer;
    
    /* Subtle inner border for depth (Infogram-style) */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Hover: Lift bar slightly (micro-interaction) */
.pc-hbar__fill:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.12);
}

.pc-hbar__fill:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 3px;
    z-index: 10;
}

/* Value label OUTSIDE bar (Infogram-style) */
.pc-hbar__value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: var(--color-text, #1A1A1A);
    white-space: nowrap;
    min-width: 60px;
    text-align: left;
}

/* Tooltip on hover - only shows when data-tooltip has content */
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--pc-tooltip-bg);
    color: var(--pc-tooltip-text);
    padding: 0.5rem 0.75rem;
    border-radius: var(--pc-tooltip-radius);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc-hover-duration) ease,
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        visibility var(--pc-hover-duration);
    box-shadow: var(--pc-tooltip-shadow);
    z-index: 100;
}

.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--pc-tooltip-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc-hover-duration) ease,
        visibility var(--pc-hover-duration);
    z-index: 100;
}

.pc-hbar__fill[data-tooltip]:not([data-tooltip=""]):hover::after,
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* ==========================================================================
   STACKED HORIZONTAL BAR CHART (Infogram-style)
   ========================================================================== */

.pc-stacked-bar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-bar-gap);
    padding: 1.5rem 0;
}

.pc-stacked-bar__row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--pc-bar-height-stacked);
}

.pc-stacked-bar__label {
    font-size: var(--pc-label-size);
    font-weight: var(--pc-label-weight);
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-stacked-bar__container {
    display: flex;
    height: var(--pc-bar-height-stacked);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    background: var(--pc-gauge-track);
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Individual segment in stacked bar */
.pc-stacked-bar__segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 
        width var(--pc-animation-duration) var(--pc-animation-easing),
        filter var(--pc-hover-duration) ease,
        transform var(--pc-hover-duration) var(--pc-hover-easing);
    cursor: pointer;
    will-change: width;
}

.pc-stacked-bar__segment:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05); /* Slight grow on hover */
    z-index: 5;
}

.pc-stacked-bar__segment:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
    z-index: 10;
}

/* Value label inside segment */
.pc-stacked-bar__value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Hide value if segment is too narrow */
.pc-stacked-bar__segment[data-narrow="true"] .pc-stacked-bar__value {
    opacity: 0;
}

/* ==========================================================================
   INTERACTIVE LEGEND
   ========================================================================== */

.pc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-container-border);
}

.pc-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 
        background var(--pc-hover-duration) ease,
        border-color var(--pc-hover-duration) ease,
        opacity var(--pc-hover-duration) ease;
    font-size: var(--pc-label-size);
    color: var(--color-text, #1A1A1A);
    font-weight: 500;
}

.pc-legend__item:hover {
    background: var(--color-surface-alt, #F3F4F6);
}

.pc-legend__item[aria-pressed="false"] {
    opacity: 0.4;
}

.pc-legend__item:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

.pc-legend__color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ==========================================================================
   PROGRESS RING / RADIAL GAUGE (Infogram-style)
   ========================================================================== */

.pc-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pc-gauge__ring {
    position: relative;
    width: var(--pc-gauge-size);
    height: var(--pc-gauge-size);
}

.pc-gauge__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pc-gauge__track {
    fill: none;
    stroke: var(--pc-gauge-track);
    stroke-width: var(--pc-gauge-stroke);
}

.pc-gauge__fill {
    fill: none;
    stroke-width: var(--pc-gauge-stroke);
    stroke-linecap: round;
    transition: stroke-dasharray var(--pc-animation-duration) var(--pc-animation-easing);
}

.pc-gauge__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pc-gauge__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text, #1A1A1A);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pc-gauge__label {
    font-size: var(--pc-label-size);
    color: var(--color-text-muted, #6B7280);
    margin-top: 0.25rem;
}

/* Multiple gauges in a row */
.pc-gauge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.pc-gauge-grid .pc-gauge {
    flex: 0 0 auto;
}

/* Smaller gauge variant */
.pc-gauge--sm {
    --pc-gauge-size: 120px;
    --pc-gauge-stroke: 12px;
}

.pc-gauge--sm .pc-gauge__value {
    font-size: 1.75rem;
}

/* ==========================================================================
   PICTORIAL CHART (Icon-based)
   ========================================================================== */

.pc-pictorial {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pc-pictorial__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pc-pictorial__label {
    flex: 0 0 120px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-pictorial__icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pc-pictorial__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.pc-pictorial__icon--filled {
    opacity: 1;
}

.pc-pictorial__icon--empty {
    opacity: 0.2;
}

.pc-pictorial__value {
    flex: 0 0 60px;
    font-size: var(--pc-value-size);
    font-weight: 700;
    color: var(--color-text, #1A1A1A);
}

/* ==========================================================================
   ANIMATED COUNTER
   ========================================================================== */

.pc-counter {
    text-align: center;
    padding: 1.5rem;
}

.pc-counter__value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary, #0066CC);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pc-counter__label {
    margin-top: 0.5rem;
    font-size: var(--pc-label-size);
    color: var(--color-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.pc-counter__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pc-counter__trend--up {
    color: var(--pc-positive);
}

.pc-counter__trend--down {
    color: var(--pc-negative);
}

/* Counter grid */
.pc-counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    overflow: hidden;
}

.pc-counter-grid .pc-counter {
    background: var(--pc-container-bg);
}

/* ==========================================================================
   COMPARISON BAR (Before/After or A vs B)
   ========================================================================== */

.pc-compare-bar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pc-compare-bar__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pc-compare-bar__label {
    flex: 0 0 100px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-compare-bar__track {
    flex: 1;
    display: flex;
    height: 24px;
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius-full);
    overflow: hidden;
    position: relative;
}

/* Left side (negative/before) */
.pc-compare-bar__left {
    position: absolute;
    right: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    border-radius: var(--pc-bar-radius-full) 0 0 var(--pc-bar-radius-full);
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
}

/* Right side (positive/after) */
.pc-compare-bar__right {
    position: absolute;
    left: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
    border-radius: 0 var(--pc-bar-radius-full) var(--pc-bar-radius-full) 0;
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
}

.pc-compare-bar__value {
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
}

/* Center line */
.pc-compare-bar__center {
    position: absolute;
    left: 50%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--color-text, #1A1A1A);
    transform: translateX(-50%);
    z-index: 5;
}

/* ==========================================================================
   TOOLTIP SYSTEM
   ========================================================================== */

.pc-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--color-text, #1A1A1A);
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: 
        opacity 0.15s ease,
        transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pc-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text, #1A1A1A);
}

.pc-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   HORIZONTAL BAR WITH 3D EFFECT (Premium look)
   ========================================================================== */

.pc-bar-3d {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pc-bar-3d__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pc-bar-3d__label {
    flex: 0 0 120px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-bar-3d__track {
    flex: 1;
    height: var(--pc-bar-height);
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.pc-bar-3d__fill {
    height: 100%;
    border-radius: var(--pc-bar-radius);
    position: relative;
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
    /* 3D effect without gradients */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Top highlight */
.pc-bar-3d__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--pc-bar-radius) var(--pc-bar-radius) 0 0;
    pointer-events: none;
}

.pc-bar-3d__value {
    flex: 0 0 60px;
    font-size: var(--pc-value-size);
    font-weight: 700;
    color: var(--color-text, #1A1A1A);
}

/* Hover effect */
.pc-bar-3d__row:hover .pc-bar-3d__fill {
    transform: scaleY(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   AXIS LABELS
   ========================================================================== */

.pc-axis {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-left: 140px; /* Align with bar track */
    border-top: 1px solid var(--pc-container-border);
    margin-top: 0.5rem;
}

.pc-axis__tick {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9CA3AF);
    font-weight: 500;
}

/* ==========================================================================
   AXIS LABELS & GRID SYSTEM (Infogram-level precision)
   ========================================================================== */

/* Horizontal axis (for bar charts) */
.pc-axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 156px; /* Align with bars (label width + gap) */
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pc-container-border);
}

.pc-axis__tick {
    font-size: 0.8125rem;
    color: var(--pc-source-color);
    font-weight: 500;
    user-select: none;
}

/* Vertical axis labels */
.pc-y-axis {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #1A1A1A);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Grid lines (subtle, Infogram-style) */
.pc-chart--grid-lines {
    position: relative;
}

.pc-chart--grid-lines::before {
    content: "";
    position: absolute;
    top: 0;
    left: 156px; /* Align with bars */
    right: 0;
    bottom: 0;
    background-image: var(--pc-grid-pattern);
    background-repeat: repeat;
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* ========================================================================== 
   COMPAT LAYER: EXISTING SYNTH CHARTS (global upgrade for old posts)
   ========================================================================== */

.synth-chart-container {
    position: relative;
    background: var(--pc-container-bg);
    border: 1px solid var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    padding: 2.25rem 2rem;
    margin: 2.5rem auto;
    max-width: 1000px;
    box-shadow: var(--pc-container-shadow-base);
    transition: box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
}

.synth-chart-container:hover {
    box-shadow: var(--pc-container-shadow-hover);
}

.synth-chart-title {
    margin: 0 0 1.5rem 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text, #1A1A1A);
}

.synth-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.synth-bar {
    display: grid;
    grid-template-columns: minmax(160px, auto) 1fr auto;
    align-items: center;
    gap: 1rem;
}

.synth-bar-label {
    font-size: var(--pc-label-size);
    font-weight: 600;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.synth-bar-track {
    position: relative;
    height: 42px;
    background: var(--pc-gauge-track);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.synth-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition:
        width var(--pc-animation-duration) var(--pc-animation-easing),
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
    will-change: width;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.10);
}

.synth-bar-fill:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.14);
}

.synth-bar-fill:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 3px;
}

/* Pleasant multi-bar palette for single-series synth charts */
.synth-bar:nth-child(1) .synth-bar-fill { background-color: var(--pc-blue); }
.synth-bar:nth-child(2) .synth-bar-fill { background-color: var(--pc-green); }
.synth-bar:nth-child(3) .synth-bar-fill { background-color: var(--pc-purple); }
.synth-bar:nth-child(4) .synth-bar-fill { background-color: var(--pc-orange); }
.synth-bar:nth-child(5) .synth-bar-fill { background-color: var(--pc-teal); }
.synth-bar:nth-child(6) .synth-bar-fill { background-color: var(--pc-red); }

.synth-bar-value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: var(--color-text, #1A1A1A);
    min-width: 3.25rem;
    text-align: left;
}

@media (max-width: 768px) {
    .synth-chart-container { padding: 1.5rem 1.25rem; margin: 1.5rem auto; }
    .synth-bar { grid-template-columns: 1fr; gap: 0.5rem; }
    .synth-bar-label { text-align: left; }
    .synth-bar-value { text-align: right; }
}

.pc-chart--grid-lines > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   COLOR CLASSES
   ========================================================================== */

.pc-color-blue { background-color: var(--pc-blue); }
.pc-color-red { background-color: var(--pc-red); }
.pc-color-yellow { background-color: var(--pc-yellow); }
.pc-color-green { background-color: var(--pc-green); }
.pc-color-purple { background-color: var(--pc-purple); }
.pc-color-teal { background-color: var(--pc-teal); }
.pc-color-orange { background-color: var(--pc-orange); }
.pc-color-pink { background-color: var(--pc-pink); }
.pc-color-indigo { background-color: var(--pc-indigo); }
.pc-color-cyan { background-color: var(--pc-cyan); }
.pc-color-lime { background-color: var(--pc-lime); }
.pc-color-amber { background-color: var(--pc-amber); }
.pc-color-positive { background-color: var(--pc-positive); }
.pc-color-negative { background-color: var(--pc-negative); }

/* Stroke variants for SVG */
.pc-stroke-blue { stroke: var(--pc-blue); }
.pc-stroke-red { stroke: var(--pc-red); }
.pc-stroke-yellow { stroke: var(--pc-yellow); }
.pc-stroke-green { stroke: var(--pc-green); }
.pc-stroke-purple { stroke: var(--pc-purple); }
.pc-stroke-teal { stroke: var(--pc-teal); }
.pc-stroke-orange { stroke: var(--pc-orange); }
.pc-stroke-pink { stroke: var(--pc-pink); }

/* Legend color swatch */
.pc-swatch-blue { background-color: var(--pc-blue); }
.pc-swatch-red { background-color: var(--pc-red); }
.pc-swatch-green { background-color: var(--pc-green); }
.pc-swatch-yellow { background-color: var(--pc-yellow); }
.pc-swatch-purple { background-color: var(--pc-purple); }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .pc-chart {
        padding: 1.5rem;
        margin: 1.5rem auto;
    }
    
    .pc-chart__title {
        font-size: 1.25rem;
    }
    
    .pc-stacked-bar__label,
    .pc-bar-3d__label,
    .pc-pictorial__label,
    .pc-compare-bar__label {
        flex: 0 0 100px;
        font-size: 0.8125rem;
    }
    
    .pc-stacked-bar__value {
        font-size: 0.6875rem;
    }
    
    .pc-gauge {
        --pc-gauge-size: 140px;
        --pc-gauge-stroke: 14px;
    }
    
    .pc-gauge__value {
        font-size: 2rem;
    }
    
    .pc-counter__value {
        font-size: 2.5rem;
    }
    
    .pc-axis {
        margin-left: 100px;
    }
    
    .pc-legend {
        gap: 0.75rem;
    }
    
    .pc-legend__item {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .pc-chart {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .pc-stacked-bar__row,
    .pc-bar-3d__row,
    .pc-pictorial__row,
    .pc-compare-bar__row {
        flex-wrap: wrap;
    }
    
    .pc-stacked-bar__label,
    .pc-bar-3d__label,
    .pc-pictorial__label,
    .pc-compare-bar__label {
        flex: 1 1 100%;
        text-align: left;
        margin-bottom: 0.25rem;
    }
    
    .pc-stacked-bar__container,
    .pc-bar-3d__track,
    .pc-compare-bar__track {
        flex: 1 1 100%;
    }
    
    .pc-axis {
        margin-left: 0;
    }
    
    .pc-gauge-grid {
        gap: 1.5rem;
    }
    
    .pc-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pc-stacked-bar__segment,
    .pc-gauge__fill,
    .pc-bar-3d__fill,
    .pc-compare-bar__left,
    .pc-compare-bar__right,
    .pc-tooltip {
        transition: none !important;
    }
    
    .pc-bar-3d__row:hover .pc-bar-3d__fill {
        transform: none;
    }
}

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

@media print {
    .pc-chart {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .pc-stacked-bar__segment,
    .pc-gauge__fill,
    .pc-bar-3d__fill {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pc-legend__item[aria-pressed="false"] {
        display: none;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .pc-chart__title,
[data-theme="dark"] .pc-stacked-bar__label,
[data-theme="dark"] .pc-bar-3d__label,
[data-theme="dark"] .pc-bar-3d__value,
[data-theme="dark"] .pc-pictorial__label,
[data-theme="dark"] .pc-pictorial__value,
[data-theme="dark"] .pc-compare-bar__label,
[data-theme="dark"] .pc-counter__value,
[data-theme="dark"] .pc-gauge__value,
[data-theme="dark"] .pc-legend__item {
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .pc-chart__subtitle,
[data-theme="dark"] .pc-chart__source,
[data-theme="dark"] .pc-gauge__label,
[data-theme="dark"] .pc-counter__label,
[data-theme="dark"] .pc-axis__tick {
    color: var(--color-text-muted, #94A3B8);
}

[data-theme="dark"] .pc-legend__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pc-tooltip {
    background: #F1F5F9;
    color: #1E293B;
}

[data-theme="dark"] .pc-tooltip::after {
    border-top-color: #F1F5F9;
}

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

/* Focus visible for all interactive elements */
.pc-stacked-bar__segment:focus-visible,
.pc-legend__item:focus-visible,
.pc-bar-3d__fill[tabindex]:focus-visible,
.pc-gauge__fill[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

/* Screen reader only text */
.pc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pc-chart {
        border-width: 2px;
    }
    
    .pc-stacked-bar__value,
    .pc-compare-bar__value {
        text-shadow: none;
        font-weight: 800;
    }
}