/* ============================================
   RSL Charts Component
   Version: 1.2.0
   Description: Pure SVG-based charting system
   with zero dependencies. Supports bar, line,
   area, pie, doughnut, and sparkline charts.

   Accessibility: Full keyboard navigation,
   screen reader support, high contrast mode,
   and focus indicators for WCAG 2.1 AA.
   ============================================ */

/* ==========================================
   CSS Custom Properties (Theming)
   ========================================== */
:root {
    /* Chart Container */
    --rsl-chart-bg: #ffffff;
    --rsl-chart-border: #e5e7eb;
    --rsl-chart-radius: 12px;
    --rsl-chart-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Typography */
    --rsl-chart-title-color: #1f2937;
    --rsl-chart-text-color: #1f2937;
    --rsl-chart-subtitle-color: #6b7280;
    --rsl-chart-label-color: #374151;
    --rsl-chart-value-color: #111827;
    --rsl-chart-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Grid & Axes */
    --rsl-chart-grid-color: #e5e7eb;
    --rsl-chart-grid-color-subtle: #f3f4f6;
    --rsl-chart-axis-color: #9ca3af;

    /* Tooltip */
    --rsl-chart-tooltip-bg: #1f2937;
    --rsl-chart-tooltip-color: #ffffff;
    --rsl-chart-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Default Color Palette (Primary) */
    --rsl-chart-color-1: #6E7BFF;
    --rsl-chart-color-2: #10B981;
    --rsl-chart-color-3: #F59E0B;
    --rsl-chart-color-4: #EF4444;
    --rsl-chart-color-5: #8B5CF6;
    --rsl-chart-color-6: #EC4899;
    --rsl-chart-color-7: #06B6D4;
    --rsl-chart-color-8: #84CC16;
}

/* ==========================================
   Dark Mode Variables
   ========================================== */
[data-theme="dark"] {
    --rsl-chart-bg: #1f2937;
    --rsl-chart-border: #374151;
    --rsl-chart-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

    --rsl-chart-title-color: #f9fafb;
    --rsl-chart-text-color: #f9fafb;
    --rsl-chart-subtitle-color: #9ca3af;
    --rsl-chart-label-color: #d1d5db;
    --rsl-chart-value-color: #f3f4f6;

    --rsl-chart-grid-color: #374151;
    --rsl-chart-grid-color-subtle: #2d3748;
    --rsl-chart-axis-color: #6b7280;

    --rsl-chart-tooltip-bg: #f9fafb;
    --rsl-chart-tooltip-color: #1f2937;
}

/* Explicit dark mode overrides for chart elements */
[data-theme="dark"] .rsl-chart-title {
    color: #f9fafb;
}

[data-theme="dark"] .rsl-chart-subtitle {
    color: #9ca3af;
}

/* ==========================================
   Base Chart Container
   ========================================== */
.rsl-chart {
    position: relative;
    width: 100%;
    background: var(--rsl-chart-bg);
    border: 1px solid var(--rsl-chart-border);
    border-radius: var(--rsl-chart-radius);
    box-shadow: var(--rsl-chart-shadow);
    font-family: var(--rsl-chart-font);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.rsl-chart:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Chart Inner Container */
.rsl-chart-container {
    position: relative;
    padding: 1.5rem;
}

/* ==========================================
   Chart Header (Title & Subtitle)
   ========================================== */
.rsl-chart-header {
    margin-bottom: 1.25rem;
}

.rsl-chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rsl-chart-title-color);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.rsl-chart-subtitle {
    font-size: 0.875rem;
    color: var(--rsl-chart-subtitle-color);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================
   SVG Canvas
   ========================================== */
.rsl-chart-canvas {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rsl-chart-canvas text {
    font-family: var(--rsl-chart-font);
    user-select: none;
}

/* ==========================================
   Grid Lines
   ========================================== */
.rsl-chart-grid line {
    stroke: var(--rsl-chart-grid-color);
    stroke-width: 1;
}

.rsl-chart-grid-subtle line {
    stroke: var(--rsl-chart-grid-color-subtle);
    stroke-dasharray: 4, 4;
}

/* ==========================================
   Axes
   ========================================== */
.rsl-chart-axis line,
.rsl-chart-axis path {
    stroke: var(--rsl-chart-axis-color);
    stroke-width: 1;
    fill: none;
}

.rsl-chart-axis text {
    fill: var(--rsl-chart-label-color);
    font-size: 0.75rem;
}

.rsl-chart-axis-label {
    fill: var(--rsl-chart-subtitle-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ==========================================
   Bar Chart
   ========================================== */
.rsl-chart-bar rect {
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.rsl-chart-bar rect:hover {
    opacity: 0.85;
    filter: brightness(1.05);
}

/* Rounded bars */
.rsl-chart-bar-rounded rect {
    rx: 4;
    ry: 4;
}

/* Bar value labels */
.rsl-chart-bar-value {
    fill: var(--rsl-chart-value-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-anchor: middle;
}

.rsl-chart-bar-value-inside {
    fill: #ffffff;
}

/* Stacked bars */
.rsl-chart-stacked rect {
    transition: opacity 0.2s ease;
}

/* Grouped bars */
.rsl-chart-grouped rect {
    transition: transform 0.2s ease;
}

/* Horizontal bars */
.rsl-chart-horizontal .rsl-chart-bar-value {
    text-anchor: start;
}

/* ==========================================
   Line Chart
   ========================================== */
.rsl-chart-line path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-width 0.2s ease;
}

.rsl-chart-line:hover path {
    stroke-width: 4;
}

/* Line with area fill */
.rsl-chart-line-area {
    opacity: 0.15;
    transition: opacity 0.2s ease;
}

.rsl-chart-line:hover .rsl-chart-line-area {
    opacity: 0.25;
}

/* Curved lines */
.rsl-chart-line-curved path {
    /* Applied via JS using smooth curve algorithm */
}

/* Data points */
.rsl-chart-point {
    transition: r 0.2s ease, stroke-width 0.2s ease;
    cursor: pointer;
}

.rsl-chart-point:hover {
    r: 6;
    stroke-width: 3;
}

/* Point with ring */
.rsl-chart-point-ring {
    fill: var(--rsl-chart-bg);
    stroke-width: 2;
}

/* ==========================================
   Area Chart
   ========================================== */
.rsl-chart-area path.area-fill {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.rsl-chart-area:hover path.area-fill {
    opacity: 0.75;
}

.rsl-chart-area path.area-stroke {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Stacked area */
.rsl-chart-area-stacked path.area-fill {
    opacity: 0.8;
}

/* Gradient area */
.rsl-chart-area-gradient path.area-fill {
    opacity: 0.9;
}

/* ==========================================
   Pie & Doughnut Charts
   ========================================== */
.rsl-chart-pie {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsl-chart-pie-slice {
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    transform-origin: center;
}

.rsl-chart-pie-slice:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

/* Slice labels */
.rsl-chart-pie-label {
    fill: var(--rsl-chart-value-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
}

.rsl-chart-pie-label-inside {
    fill: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Pie percentage */
.rsl-chart-pie-percent {
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Doughnut center */
.rsl-chart-doughnut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.rsl-chart-doughnut-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--rsl-chart-title-color);
    line-height: 1.1;
}

.rsl-chart-doughnut-label {
    font-size: 0.875rem;
    color: var(--rsl-chart-subtitle-color);
    margin-top: 0.25rem;
}

/* ==========================================
   Sparkline Charts
   ========================================== */
.rsl-chart-sparkline {
    display: inline-block;
    vertical-align: middle;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.rsl-chart-sparkline .rsl-chart-container {
    padding: 0;
}

.rsl-chart-sparkline-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rsl-chart-sparkline-area {
    opacity: 0.2;
}

.rsl-chart-sparkline-point {
    /* Last point indicator */
}

.rsl-chart-sparkline-bar rect {
    rx: 1;
    ry: 1;
}

/* Sparkline sizes */
.rsl-chart-sparkline-xs {
    width: 50px;
    height: 16px;
}

.rsl-chart-sparkline-sm {
    width: 80px;
    height: 24px;
}

.rsl-chart-sparkline-md {
    width: 120px;
    height: 32px;
}

.rsl-chart-sparkline-lg {
    width: 180px;
    height: 48px;
}

/* ==========================================
   Legend
   ========================================== */
.rsl-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rsl-chart-grid-color);
}

.rsl-chart-legend-top {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-top: 0;
    padding-bottom: 1rem;
    border-top: none;
    border-bottom: 1px solid var(--rsl-chart-grid-color);
}

.rsl-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.rsl-chart-legend-item:hover {
    opacity: 0.7;
}

.rsl-chart-legend-item.disabled {
    opacity: 0.4;
}

.rsl-chart-legend-color,
.rsl-chart-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}

.rsl-chart-legend-label,
.rsl-chart-legend-text {
    font-size: 0.8125rem;
    color: var(--rsl-chart-label-color);
    white-space: nowrap;
}

.rsl-chart-legend-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rsl-chart-value-color);
    margin-left: 0.25rem;
}

/* Legend positions */
.rsl-chart-legend-right {
    flex-direction: column;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: none;
    gap: 0.75rem;
}

.rsl-chart-legend-left {
    flex-direction: column;
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: none;
    gap: 0.75rem;
}

/* ==========================================
   Tooltip
   ========================================== */
.rsl-chart-tooltip {
    position: absolute;
    background: var(--rsl-chart-tooltip-bg);
    color: var(--rsl-chart-tooltip-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: var(--rsl-chart-tooltip-shadow);
    font-size: 0.8125rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000;
    white-space: nowrap;
}

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

.rsl-chart-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.rsl-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
}

.rsl-chart-tooltip-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rsl-chart-tooltip-label {
    opacity: 0.8;
}

.rsl-chart-tooltip-value {
    font-weight: 600;
    margin-left: auto;
}

/* Tooltip arrow - default points down (tooltip above cursor) */
.rsl-chart-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--rsl-chart-tooltip-bg);
}

/* Tooltip arrow points up (tooltip below cursor) */
.rsl-chart-tooltip.rsl-chart-tooltip-below::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid var(--rsl-chart-tooltip-bg);
}

/* ==========================================
   Chart Sizes
   ========================================== */
.rsl-chart-xs .rsl-chart-container {
    padding: 0.75rem;
}
.rsl-chart-xs .rsl-chart-title {
    font-size: 0.9375rem;
}

.rsl-chart-sm .rsl-chart-container {
    padding: 1rem;
}
.rsl-chart-sm .rsl-chart-title {
    font-size: 1.0625rem;
}

.rsl-chart-md .rsl-chart-container {
    padding: 1.5rem;
}

.rsl-chart-lg .rsl-chart-container {
    padding: 2rem;
}
.rsl-chart-lg .rsl-chart-title {
    font-size: 1.5rem;
}

.rsl-chart-xl .rsl-chart-container {
    padding: 2.5rem;
}
.rsl-chart-xl .rsl-chart-title {
    font-size: 1.75rem;
}

/* ==========================================
   Color Schemes
   ========================================== */

/* Success (Greens) */
.rsl-chart-success {
    --rsl-chart-color-1: #10B981;
    --rsl-chart-color-2: #059669;
    --rsl-chart-color-3: #047857;
    --rsl-chart-color-4: #34D399;
    --rsl-chart-color-5: #6EE7B7;
    --rsl-chart-color-6: #A7F3D0;
}

/* Warm (Orange/Red) */
.rsl-chart-warm {
    --rsl-chart-color-1: #F59E0B;
    --rsl-chart-color-2: #EF4444;
    --rsl-chart-color-3: #F97316;
    --rsl-chart-color-4: #FBBF24;
    --rsl-chart-color-5: #FB923C;
    --rsl-chart-color-6: #FCA5A1;
}

/* Cool (Blue/Teal) */
.rsl-chart-cool {
    --rsl-chart-color-1: #3B82F6;
    --rsl-chart-color-2: #06B6D4;
    --rsl-chart-color-3: #0EA5E9;
    --rsl-chart-color-4: #14B8A6;
    --rsl-chart-color-5: #22D3EE;
    --rsl-chart-color-6: #67E8F9;
}

/* Mono (Grayscale) */
.rsl-chart-mono {
    --rsl-chart-color-1: #374151;
    --rsl-chart-color-2: #6B7280;
    --rsl-chart-color-3: #9CA3AF;
    --rsl-chart-color-4: #4B5563;
    --rsl-chart-color-5: #D1D5DB;
    --rsl-chart-color-6: #E5E7EB;
}

/* Rainbow */
.rsl-chart-rainbow {
    --rsl-chart-color-1: #EF4444;
    --rsl-chart-color-2: #F97316;
    --rsl-chart-color-3: #EAB308;
    --rsl-chart-color-4: #22C55E;
    --rsl-chart-color-5: #3B82F6;
    --rsl-chart-color-6: #8B5CF6;
    --rsl-chart-color-7: #EC4899;
    --rsl-chart-color-8: #14B8A6;
}

/* Accessible (Colorblind-safe) */
.rsl-chart-accessible {
    --rsl-chart-color-1: #4477AA;
    --rsl-chart-color-2: #EE6677;
    --rsl-chart-color-3: #228833;
    --rsl-chart-color-4: #CCBB44;
    --rsl-chart-color-5: #66CCEE;
    --rsl-chart-color-6: #AA3377;
    --rsl-chart-color-7: #BBBBBB;
    --rsl-chart-color-8: #000000;
}

/* ==========================================
   Gradient Fills
   ========================================== */
.rsl-chart-gradient-primary linearGradient stop:first-child {
    stop-color: #6E7BFF;
}
.rsl-chart-gradient-primary linearGradient stop:last-child {
    stop-color: #8B5CF6;
}

.rsl-chart-gradient-success linearGradient stop:first-child {
    stop-color: #10B981;
}
.rsl-chart-gradient-success linearGradient stop:last-child {
    stop-color: #34D399;
}

.rsl-chart-gradient-warm linearGradient stop:first-child {
    stop-color: #F59E0B;
}
.rsl-chart-gradient-warm linearGradient stop:last-child {
    stop-color: #EF4444;
}

/* ==========================================
   Pattern Fills (Accessibility)
   ========================================== */
.rsl-chart-pattern-stripes {
    /* Applied via SVG pattern defs */
}

.rsl-chart-pattern-dots {
    /* Applied via SVG pattern defs */
}

.rsl-chart-pattern-crosshatch {
    /* Applied via SVG pattern defs */
}

/* ==========================================
   Animations
   ========================================== */
@keyframes rsl-chart-bar-grow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes rsl-chart-bar-grow-horizontal {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes rsl-chart-line-draw {
    from {
        stroke-dashoffset: var(--line-length);
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rsl-chart-pie-reveal {
    from {
        stroke-dashoffset: var(--circumference);
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rsl-chart-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rsl-chart-scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.rsl-chart-animate .rsl-chart-bar rect {
    transform-origin: bottom;
    animation: rsl-chart-bar-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rsl-chart-animate.rsl-chart-horizontal .rsl-chart-bar rect {
    transform-origin: left;
    animation: rsl-chart-bar-grow-horizontal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rsl-chart-animate .rsl-chart-line path {
    stroke-dasharray: var(--line-length);
    stroke-dashoffset: var(--line-length);
    animation: rsl-chart-line-draw 1.2s ease-out forwards;
}

.rsl-chart-animate .rsl-chart-pie-slice {
    animation: rsl-chart-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rsl-chart-animate .rsl-chart-point {
    opacity: 0;
    animation: rsl-chart-fade-in 0.3s ease-out forwards;
    animation-delay: 0.8s;
}

/* Staggered animation delays for bars */
.rsl-chart-animate .rsl-chart-bar rect:nth-child(1) { animation-delay: 0s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(2) { animation-delay: 0.05s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(3) { animation-delay: 0.1s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(4) { animation-delay: 0.15s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(5) { animation-delay: 0.2s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(6) { animation-delay: 0.25s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(7) { animation-delay: 0.3s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(8) { animation-delay: 0.35s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(9) { animation-delay: 0.4s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(10) { animation-delay: 0.45s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(11) { animation-delay: 0.5s; }
.rsl-chart-animate .rsl-chart-bar rect:nth-child(12) { animation-delay: 0.55s; }

/* Staggered delays for pie slices */
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(1) { animation-delay: 0s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(2) { animation-delay: 0.1s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(3) { animation-delay: 0.2s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(4) { animation-delay: 0.3s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(5) { animation-delay: 0.4s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(6) { animation-delay: 0.5s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(7) { animation-delay: 0.6s; }
.rsl-chart-animate .rsl-chart-pie-slice:nth-child(8) { animation-delay: 0.7s; }

/* ==========================================
   Reduced Motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .rsl-chart-animate .rsl-chart-bar rect,
    .rsl-chart-animate .rsl-chart-line path,
    .rsl-chart-animate .rsl-chart-pie-slice,
    .rsl-chart-animate .rsl-chart-point {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .rsl-chart-bar rect,
    .rsl-chart-line path,
    .rsl-chart-pie-slice,
    .rsl-chart-point {
        transition: none;
    }
}

/* ==========================================
   Responsive Styles
   ========================================== */
@media (max-width: 768px) {
    .rsl-chart-container {
        padding: 1rem;
    }

    .rsl-chart-title {
        font-size: 1.0625rem;
    }

    .rsl-chart-subtitle {
        font-size: 0.8125rem;
    }

    .rsl-chart-legend {
        gap: 0.75rem;
    }

    .rsl-chart-legend-item {
        gap: 0.375rem;
    }

    .rsl-chart-legend-label {
        font-size: 0.75rem;
    }

    .rsl-chart-legend-right,
    .rsl-chart-legend-left {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .rsl-chart-axis text {
        font-size: 0.6875rem;
    }

    .rsl-chart-tooltip {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .rsl-chart-container {
        padding: 0.75rem;
    }

    .rsl-chart-title {
        font-size: 1rem;
    }

    .rsl-chart-header {
        margin-bottom: 1rem;
    }

    .rsl-chart-legend {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .rsl-chart-legend-color {
        width: 10px;
        height: 10px;
    }

    .rsl-chart-doughnut-value {
        font-size: 1.5rem;
    }

    .rsl-chart-doughnut-label {
        font-size: 0.75rem;
    }
}

/* ==========================================
   No Data State
   ========================================== */
.rsl-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--rsl-chart-subtitle-color);
}

.rsl-chart-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.rsl-chart-empty-text {
    font-size: 0.9375rem;
}

/* ==========================================
   Loading State
   ========================================== */
.rsl-chart-loading {
    position: relative;
}

.rsl-chart-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rsl-chart-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.rsl-chart-loading .rsl-chart-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--rsl-chart-grid-color);
    border-top-color: var(--rsl-chart-color-1);
    border-radius: 50%;
    animation: rsl-chart-spin 0.8s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

@keyframes rsl-chart-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ==========================================
   Borderless Variant
   ========================================== */
.rsl-chart-borderless {
    border: none;
    box-shadow: none;
    background: transparent;
}

.rsl-chart-borderless:hover {
    box-shadow: none;
}

/* ==========================================
   Compact Variant
   ========================================== */
.rsl-chart-compact .rsl-chart-container {
    padding: 1rem;
}

.rsl-chart-compact .rsl-chart-header {
    margin-bottom: 0.75rem;
}

.rsl-chart-compact .rsl-chart-title {
    font-size: 1rem;
}

.rsl-chart-compact .rsl-chart-legend {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* ==========================================
   Threshold/Goal Lines
   ========================================== */
.rsl-chart-threshold {
    stroke-width: 2;
    stroke-dasharray: 6, 4;
}

.rsl-chart-threshold-label {
    font-size: 0.6875rem;
    font-weight: 600;
    fill: currentColor;
}

.rsl-chart-threshold-success {
    stroke: #10B981;
    color: #10B981;
}

.rsl-chart-threshold-warning {
    stroke: #F59E0B;
    color: #F59E0B;
}

.rsl-chart-threshold-danger {
    stroke: #EF4444;
    color: #EF4444;
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
    .rsl-chart {
        box-shadow: none;
        border: 1px solid #e5e7eb;
        break-inside: avoid;
    }

    .rsl-chart-tooltip {
        display: none;
    }

    .rsl-chart-animate .rsl-chart-bar rect,
    .rsl-chart-animate .rsl-chart-line path,
    .rsl-chart-animate .rsl-chart-pie-slice {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================
   Accessibility: Screen Reader Only
   ========================================== */
.rsl-chart-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;
}

/* Data table for screen readers — visually hidden via the sr-only
   pattern but readable by assistive tech. The previous rule was empty
   and assumed inheritance that CSS doesn't do, so the table rendered
   visibly under every chart with raw category names. */
.rsl-chart-data-table {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rsl-chart-data-table caption {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0;
}

.rsl-chart-data-table th,
.rsl-chart-data-table td {
    padding: 0.25rem 0.5rem;
    text-align: left;
}

/* ==========================================
   Accessibility: Focus Indicators
   ========================================== */
.rsl-chart:focus {
    outline: 3px solid var(--rsl-chart-color-1, #6E7BFF);
    outline-offset: 2px;
}

.rsl-chart:focus:not(:focus-visible) {
    outline: none;
}

.rsl-chart:focus-visible {
    outline: 3px solid var(--rsl-chart-color-1, #6E7BFF);
    outline-offset: 2px;
}

/* Focus styles for individual data points */
.rsl-chart-bar:focus,
.rsl-chart-point:focus,
.rsl-chart-slice:focus {
    outline: none;
}

.rsl-chart-bar:focus-visible,
.rsl-chart-point:focus-visible,
.rsl-chart-slice:focus-visible {
    outline: none;
}

/* SVG elements need stroke-based focus indicators */
.rsl-chart-svg rect:focus,
.rsl-chart-svg circle:focus,
.rsl-chart-svg path:focus {
    outline: none;
}

/* Focus ring animation */
@keyframes rsl-chart-focus-pulse {
    0%, 100% {
        stroke-width: 3;
    }
    50% {
        stroke-width: 4;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {
    .rsl-chart {
        border: 2px solid CanvasText;
    }

    .rsl-chart:focus {
        outline: 3px solid Highlight;
    }

    .rsl-chart-bar rect,
    .rsl-chart-slice {
        stroke: CanvasText;
        stroke-width: 2;
    }

    .rsl-chart-point {
        stroke: CanvasText;
        stroke-width: 2;
    }

    .rsl-chart-line path {
        stroke: LinkText;
    }

    .rsl-chart-axis line {
        stroke: CanvasText;
    }

    .rsl-chart-grid line {
        stroke: GrayText;
    }

    .rsl-chart-tooltip {
        background: Canvas;
        color: CanvasText;
        border: 2px solid CanvasText;
    }
}

/* ==========================================
   Accessibility: Skip Link for Charts
   ========================================== */
.rsl-chart-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 1000;
}

.rsl-chart-skip-link:focus {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--rsl-chart-tooltip-bg);
    color: var(--rsl-chart-tooltip-color);
    border-radius: 4px;
    font-size: 0.875rem;
    text-decoration: none;
    z-index: 1001;
}

/* ==========================================
   Accessibility: Legend Keyboard Navigation
   ========================================== */
.rsl-chart-legend-item:focus {
    outline: 2px solid var(--rsl-chart-color-1, #6E7BFF);
    outline-offset: 2px;
    border-radius: 4px;
}

.rsl-chart-legend-item:focus:not(:focus-visible) {
    outline: none;
}

.rsl-chart-legend-item:focus-visible {
    outline: 2px solid var(--rsl-chart-color-1, #6E7BFF);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================
   FilterBus Visibility
   Show/hide charts based on filter state
   ========================================== */

/* Only apply transitions AFTER initialization to prevent flicker on page load */
.rsl-chart.rsl-chart-initialized {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.rsl-chart.rsl-chart-hidden {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

/* For grid layouts - hide the slot-item container when chart is hidden.
   Use immediate-child :has() so a hidden chart only collapses its own
   slot-item cell, not any ancestor slot-item that wraps the whole grid. */
.slot-item:has(> .rsl-chart.rsl-chart-hidden) {
    display: none;
}

/* Alternative: fade only without collapsing (use data-filter-fade-only attribute) */
.rsl-chart[data-filter-fade-only].rsl-chart-hidden {
    opacity: 0.3;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}

/* Respect reduced motion preferences for FilterBus transitions */
@media (prefers-reduced-motion: reduce) {
    .rsl-chart.rsl-chart-initialized {
        transition: none;
    }

    .rsl-chart.rsl-chart-hidden {
        transition: none;
    }
}