/* Pygments Monokai Theme for syntax highlighting */
pre {
    line-height: 125%;
}

td.linenos .normal {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
}

span.linenos {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
}

td.linenos .special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
}

span.linenos.special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
}

.highlight .hll {
    background-color: #49483e
}

.highlight {
    background: #272822;
    color: #F8F8F2
}

.highlight .c {
    color: #959077
}

/* Comment */
.highlight .err {
    color: #ED007E;
    background-color: #1E0010
}

/* Error */
.highlight .esc {
    color: #F8F8F2
}

/* Escape */
.highlight .g {
    color: #F8F8F2
}

/* Generic */
.highlight .k {
    color: #66D9EF
}

/* Keyword */
.highlight .l {
    color: #AE81FF
}

/* Literal */
.highlight .n {
    color: #F8F8F2
}

/* Name */
.highlight .o {
    color: #FF4689
}

/* Operator */
.highlight .x {
    color: #F8F8F2
}

/* Other */
.highlight .p {
    color: #F8F8F2
}

/* Punctuation */
.highlight .ch {
    color: #959077
}

/* Comment.Hashbang */
.highlight .cm {
    color: #959077
}

/* Comment.Multiline */
.highlight .cp {
    color: #959077
}

/* Comment.Preproc */
.highlight .cpf {
    color: #959077
}

/* Comment.PreprocFile */
.highlight .c1 {
    color: #959077
}

/* Comment.Single */
.highlight .cs {
    color: #959077
}

/* Comment.Special */
.highlight .gd {
    color: #FF4689
}

/* Generic.Deleted */
.highlight .ge {
    color: #F8F8F2;
    font-style: italic
}

/* Generic.Emph */
.highlight .ges {
    color: #F8F8F2;
    font-weight: bold;
    font-style: italic
}

/* Generic.EmphStrong */
.highlight .gr {
    color: #F8F8F2
}

/* Generic.Error */
.highlight .gh {
    color: #F8F8F2
}

/* Generic.Heading */
.highlight .gi {
    color: #A6E22E
}

/* Generic.Inserted */
.highlight .go {
    color: #66D9EF
}

/* Generic.Output */
.highlight .gp {
    color: #FF4689;
    font-weight: bold
}

/* Generic.Prompt */
.highlight .gs {
    color: #F8F8F2;
    font-weight: bold
}

/* Generic.Strong */
.highlight .gu {
    color: #959077
}

/* Generic.Subheading */
.highlight .gt {
    color: #F8F8F2
}

/* Generic.Traceback */
.highlight .kc {
    color: #66D9EF
}

/* Keyword.Constant */
.highlight .kd {
    color: #66D9EF
}

/* Keyword.Declaration */
.highlight .kn {
    color: #FF4689
}

/* Keyword.Namespace */
.highlight .kp {
    color: #66D9EF
}

/* Keyword.Pseudo */
.highlight .kr {
    color: #66D9EF
}

/* Keyword.Reserved */
.highlight .kt {
    color: #66D9EF
}

/* Keyword.Type */
.highlight .ld {
    color: #E6DB74
}

/* Literal.Date */
.highlight .m {
    color: #AE81FF
}

/* Literal.Number */
.highlight .s {
    color: #E6DB74
}

/* Literal.String */
.highlight .na {
    color: #A6E22E
}

/* Name.Attribute */
.highlight .nb {
    color: #F8F8F2
}

/* Name.Builtin */
.highlight .nc {
    color: #A6E22E
}

/* Name.Class */
.highlight .no {
    color: #66D9EF
}

/* Name.Constant */
.highlight .nd {
    color: #A6E22E
}

/* Name.Decorator */
.highlight .ni {
    color: #F8F8F2
}

/* Name.Entity */
.highlight .ne {
    color: #A6E22E
}

/* Name.Exception */
.highlight .nf {
    color: #A6E22E
}

/* Name.Function */
.highlight .nl {
    color: #F8F8F2
}

/* Name.Label */
.highlight .nn {
    color: #F8F8F2
}

/* Name.Namespace */
.highlight .nx {
    color: #A6E22E
}

/* Name.Other */
.highlight .py {
    color: #F8F8F2
}

/* Name.Property */
.highlight .nt {
    color: #FF4689
}

/* Name.Tag */
.highlight .nv {
    color: #F8F8F2
}

/* Name.Variable */
.highlight .ow {
    color: #FF4689
}

/* Operator.Word */
.highlight .pm {
    color: #F8F8F2
}

/* Punctuation.Marker */
.highlight .w {
    color: #F8F8F2
}

/* Text.Whitespace */
.highlight .mb {
    color: #AE81FF
}

/* Literal.Number.Bin */
.highlight .mf {
    color: #AE81FF
}

/* Literal.Number.Float */
.highlight .mh {
    color: #AE81FF
}

/* Literal.Number.Hex */
.highlight .mi {
    color: #AE81FF
}

/* Literal.Number.Integer */
.highlight .mo {
    color: #AE81FF
}

/* Literal.Number.Oct */
.highlight .sa {
    color: #E6DB74
}

/* Literal.String.Affix */
.highlight .sb {
    color: #E6DB74
}

/* Literal.String.Backtick */
.highlight .sc {
    color: #E6DB74
}

/* Literal.String.Char */
.highlight .dl {
    color: #E6DB74
}

/* Literal.String.Delimiter */
.highlight .sd {
    color: #E6DB74
}

/* Literal.String.Doc */
.highlight .s2 {
    color: #E6DB74
}

/* Literal.String.Double */
.highlight .se {
    color: #AE81FF
}

/* Literal.String.Escape */
.highlight .sh {
    color: #E6DB74
}

/* Literal.String.Heredoc */
.highlight .si {
    color: #E6DB74
}

/* Literal.String.Interpol */
.highlight .sx {
    color: #E6DB74
}

/* Literal.String.Other */
.highlight .sr {
    color: #E6DB74
}

/* Literal.String.Regex */
.highlight .s1 {
    color: #E6DB74
}

/* Literal.String.Single */
.highlight .ss {
    color: #E6DB74
}

/* Literal.String.Symbol */
.highlight .bp {
    color: #F8F8F2
}

/* Name.Builtin.Pseudo */
.highlight .fm {
    color: #A6E22E
}

/* Name.Function.Magic */
.highlight .vc {
    color: #F8F8F2
}

/* Name.Variable.Class */
.highlight .vg {
    color: #F8F8F2
}

/* Name.Variable.Global */
.highlight .vi {
    color: #F8F8F2
}

/* Name.Variable.Instance */
.highlight .vm {
    color: #F8F8F2
}

/* Name.Variable.Magic */
.highlight .il {
    color: #AE81FF
}

/* Literal.Number.Integer.Long */

/* Code container - must be at end for specificity */
.code-container {
    background: #272822 !important;
    border-radius: 0 0 0.75rem 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.code-container .highlight {
    background: transparent !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .code-container .highlight {
        padding: 1rem !important;
    }
}

.code-container .highlight pre {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
    white-space: pre !important;
    overflow-x: visible;
    width: max-content;
    min-width: 100%;
}

@media (min-width: 640px) {
    .code-container .highlight pre {
        font-size: 12px !important;
    }
}

.code-container .highlight code {
    background: transparent !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
}

.code-container .highlight * {
    font-family: inherit !important;
}

/* ============================================
   PyLucid Home Page Styles
   ============================================ */

/* Neon color utilities */
.text-neon-cyan {
    color: #27D3F5;
}

.text-neon-coral {
    color: #F5276C;
}

.text-neon-mint {
    color: #27F5B0;
}

.text-neon-blue {
    color: #276CF5;
}

.text-neon-purple {
    color: #4927F5;
}

.text-neon-amber {
    color: #F5B027;
}

.text-neon-orange {
    color: #F54927;
}

.text-neon-lime {
    color: #6CF527;
}

.text-neon-pink {
    color: #F527B0;
}

.bg-neon-cyan {
    background-color: #27D3F5;
}

.bg-neon-coral {
    background-color: #F5276C;
}

.bg-neon-mint {
    background-color: #27F5B0;
}

.bg-neon-blue {
    background-color: #276CF5;
}

.bg-neon-purple {
    background-color: #4927F5;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #F5276C, #27D3F5, #6CF527);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card glow effect */
.card-glow:hover {
    box-shadow: 0 0 40px rgba(39, 211, 245, 0.15);
}

/* Animated orbs */
@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(10px, -20px) scale(1.05);
    }

    50% {
        transform: translate(-5px, 10px) scale(0.95);
    }

    75% {
        transform: translate(-15px, -10px) scale(1.02);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.4;
        filter: blur(60px);
    }

    50% {
        opacity: 0.7;
        filter: blur(80px);
    }
}

.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #F5276C 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: float 8s ease-in-out infinite, pulse-glow 4s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #27D3F5 0%, transparent 70%);
    top: 50%;
    right: -150px;
    animation: float 10s ease-in-out infinite reverse, pulse-glow 5s ease-in-out infinite;
    animation-delay: -2s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #6CF527 0%, transparent 70%);
    bottom: -50px;
    left: 30%;
    animation: float 12s ease-in-out infinite, pulse-glow 6s ease-in-out infinite;
    animation-delay: -4s;
}

.orb-4 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #4927F5 0%, transparent 70%);
    top: 20%;
    left: 50%;
    animation: float 9s ease-in-out infinite reverse, pulse-glow 4.5s ease-in-out infinite;
    animation-delay: -1s;
}

/* ============================================
   Plotly Chart Containment
   ============================================ */

/* Prevent Plotly charts from overflowing their containers */
#chart-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

#chart-container .plotly-graph-div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Override Plotly's inline fixed dimensions in responsive contexts */
#chart-container .js-plotly-plot {
    width: 100% !important;
    max-width: 100% !important;
}

#chart-container .plot-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure SVG scales properly */
#chart-container .main-svg {
    max-width: 100%;
    height: auto;
}

/* Chart preview cards in gallery */
.chart-preview-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.chart-preview-container .plotly-graph-div {
    width: 100% !important;
    max-width: 100% !important;
}

.chart-preview-container img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   Sidebar Scrollbar Styles
   ============================================ */

/* Sidebar navigation scrollbar - always visible */
#chart-types-nav {
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 transparent !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* Dark mode scrollbar color */
.dark #chart-types-nav {
    scrollbar-color: #64748b transparent !important;
}

/* Webkit browsers (Chrome, Safari, Edge) - force classic scrollbar style */
#chart-types-nav::-webkit-scrollbar {
    width: 8px !important;
    -webkit-appearance: none !important;
}

#chart-types-nav::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

#chart-types-nav::-webkit-scrollbar-thumb {
    background-color: #94a3b8 !important;
    border-radius: 4px !important;
    border: 2px solid #f1f5f9 !important;
}

#chart-types-nav::-webkit-scrollbar-thumb:hover {
    background-color: #64748b !important;
}

/* Dark mode webkit scrollbar */
.dark #chart-types-nav::-webkit-scrollbar-track {
    background: #1e293b !important;
}

.dark #chart-types-nav::-webkit-scrollbar-thumb {
    background-color: #64748b !important;
    border-color: #1e293b !important;
}

.dark #chart-types-nav::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8 !important;
}