/**
 * ════════════════════════════════════════════════════════════════════════════
 * COOL CHARTS - Main Styles
 * ════════════════════════════════════════════════════════════════════════════
 * 
 * ⚠️  BEFORE MODIFYING: Read CONVENTIONS.md → "UI Architecture: Skin vs Structure"
 * 
 * SAFE TO CHANGE (Skin):
 *   - CSS variables below (:root, .dark)
 *   - .glass-panel, .theme-btn styles
 *   - Visual properties (colors, shadows, borders)
 * 
 * PROTECTED (Structure):
 *   - @media queries for mobile breakpoints
 *   - #sidebar positioning rules
 *   - .control-section visibility rules
 * 
 * ════════════════════════════════════════════════════════════════════════════
 */

:root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    --track-bg: rgba(0, 0, 0, 0.03);
    --grid-pattern: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(0,0,0,0.08)'/%3E%3C/svg%3E");
    --range-track: rgba(0, 0, 0, 0.1);
    --range-thumb: #ffffff;
    --range-thumb-border: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
}

.dark {
    --glass-bg: rgba(20, 20, 20, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    --track-bg: rgba(255, 255, 255, 0.03);
    --grid-pattern: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    --range-track: rgba(255, 255, 255, 0.15);
    --range-thumb: #e5e5e5;
    --range-thumb-border: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
}

body {
    font-family: 'Inter', sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 150, 0.5);
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--range-thumb);
    cursor: pointer;
    margin-top: -6px;
    border: 1px solid var(--range-thumb-border);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dark input[type=range]::-webkit-slider-thumb {
    background: #e5e5e5;
    border-color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--range-track);
    border-radius: 2px;
}

select {
    background-image: none;
}

select option {
    background-color: white;
    color: #1e293b;
}

.dark select option {
    background-color: #171717;
    color: #f8fafc;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.font-serif-display {
    font-family: 'Instrument Serif', serif;
}

.font-mono-display {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.05em;
}

.bg-pattern-grid {
    background-image: var(--grid-pattern);
}

.bar {
    position: relative;
    overflow: hidden;
}

/* Text shadow for bar values */
.bar-value {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* Export mode - disable bar glow to prevent ghosting in PNG export */
.export-mode .bar {
    box-shadow: none !important;
}

/* Export mode - freeze line chart animations so lines are visible in export */
.export-mode path,
.export-mode circle,
.export-mode .line-point {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Export mode - widen title container to prevent early line breaks */
.export-mode #chart-title-text {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

.export-mode #chart-subtitle-text {
    max-width: 100% !important;
    width: 100% !important;
}

/* Export mode - ensure line chart maintains full height on mobile */
.export-mode #line-chart {
    height: 350px !important;
    min-height: 350px !important;
}

.bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.modal-enter {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98) translateY(10px);
}

.modal-enter-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-exit {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98) translateY(10px);
    transition: all 0.15s ease-in;
}

.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.ad-slot-main {
    max-width: 728px;
    width: 100%;
    margin: 3rem auto 2rem auto;
    padding: 1.5rem;
    min-height: 120px;
}

.ad-slot-sidebar {
    width: 100%;
    min-height: 250px;
    margin-top: 1rem;
    padding: 1rem;
}

@media only screen and (max-width: 1023px) {
    .ad-slot-sidebar {
        display: none !important;
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Desktop sidebar - ensure visibility at lg breakpoint */
@media (min-width: 1024px) {
    #sidebar {
        position: static !important;
        transform: none !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex-shrink: 1;
        min-width: 280px;
    }

    .control-section {
        display: block !important;
    }

    #mobile-drag-handle {
        display: none !important;
    }

    /* Ensure main panel can shrink */
    #main-panel {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Line Chart: Desktop height backup (Tailwind lg:h-[350px] is primary) */
    #line-chart {
        height: 350px !important;
    }
}

.theme-btn {
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.theme-btn.active-theme {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(99, 102, 241, 0.4);
    transform: scale(1.1);
}

.dark .theme-btn.active-theme {
    box-shadow: 0 0 0 2px #000000, 0 0 0 4px rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Mobile Layout */
@media (max-width: 1023px) {
    body {
        flex-direction: column !important;
        overflow: hidden;
    }

    /* Static pages (About, Privacy, etc.) need to scroll normally */
    body.page-static {
        overflow: visible;
        overflow-y: auto;
    }

    #main-panel {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: visible;
        height: calc(100vh - 60px);
        /* Leave room for bottom nav */
    }

    #sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 60px) !important;
        min-height: 120px !important;
        border-radius: 1rem 1rem 0 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--glass-border) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1) !important;
        z-index: 40 !important;
    }

    .dark #sidebar {
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    #mobile-handle {
        display: flex !important;
    }

    /* Fix bar ghosting on mobile */
    .bar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: width;
        box-shadow: none !important;
    }

    .bar::before {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Force proper clipping on bar containers */
    .h-12.overflow-hidden {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
        isolation: isolate;
        contain: paint;
    }

    /* Ensure chart bars render correctly */
    .chart-bar-group {
        isolation: isolate;
    }
}

@media (min-width: 1024px) {
    #mobile-handle {
        display: none !important;
    }

    #sidebar {
        position: relative !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
}

/* Mobile: Reduce negative space and add bottom padding to prevent cutoff */
@media (max-width: 1023px) {
    #sidebar-scroll {
        padding-top: 0;
    }

    .section-container {
        padding-bottom: 24px;
    }

    /* Independent scroll for main chart area on mobile */
    #main-scroll {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-bottom: 49px;
        /* Small buffer above bottom nav */
    }

    /* Add bottom margin to ad block - matches tool pane ad spacing */
    .ad-slot-main {
        margin-bottom: 21px;
    }

    /* Prevent chart from overflowing on narrow screens */
    #chart-container {
        overflow: hidden;
    }

    #vertical-chart {
        max-width: 100%;
        overflow-x: hidden;
        gap: 8px !important;
        width: 100%;
    }

    #vertical-chart>div {
        min-width: 0;
        flex: 1 1 0;
    }

    /* Line Chart: Responsive height for portrait mode on mobile */
    /* Increases chart height on narrow screens to maximize vertical space */
    #line-chart {
        height: 450px !important;
        min-height: 450px !important;
    }
}

/* Pane Transitions */
.pane-transition {
    width: 100%;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    animation-fill-mode: both;
}

/* Next: Old slides out left, New slides in from right */
.pane-exit-next {
    animation-name: slideOutLeft;
    position: absolute;
    top: 0;
    left: 0;
}

.pane-enter-next {
    animation-name: slideInRight;
}

/* Prev: Old slides out right, New slides in from left */
.pane-exit-prev {
    animation-name: slideOutRight;
    position: absolute;
    top: 0;
    left: 0;
}

.pane-enter-prev {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile panel indicator color pulse animation */
@keyframes colorPulse {

    0%,
    100% {
        color: #9ca3af;
        /* Light grey */
    }

    50% {
        color: currentColor;
        /* Inherits from parent - black in light, white in dark */
    }
}

/* Light mode: grey to black */
#mobile-panel-indicator {
    animation: colorPulse 2s ease-in-out infinite;
    --pulse-end: #111827;
}

/* Dark mode: grey to white */
.dark #mobile-panel-indicator {
    --pulse-end: #ffffff;
}

@keyframes colorPulseLight {

    0%,
    100% {
        color: #9ca3af;
    }

    50% {
        color: #111827;
    }
}

@keyframes colorPulseDark {

    0%,
    100% {
        color: #9ca3af;
    }

    50% {
        color: #ffffff;
    }
}

#mobile-panel-indicator {
    animation: colorPulseLight 2s ease-in-out infinite;
}

.dark #mobile-panel-indicator {
    animation: colorPulseDark 2s ease-in-out infinite;
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}