/* ====================================
 * NOTEBOOK ENHANCEMENTS
 * Clean, modern styling for Jupyter notebooks
 * ==================================== */

:root {
    --notebook-bg: rgba(30, 33, 38, 0.95);
    --notebook-border: rgba(83, 51, 237, 0.3);
    --notebook-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --notebook-hover-shadow: 0 4px 16px rgba(83, 51, 237, 0.4);
    --code-bg: rgba(26, 29, 32, 0.9);
    --code-border: rgba(66, 69, 74, 0.5);
    --markdown-bg: rgba(30, 33, 38, 0.9);
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --font-ui:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --font-code: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
    --ease-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================================
 * NOTEBOOK WRAPPER
 * ==================================== */

.jupyter-wrapper,
.notebook-content {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: transparent;
}

/* ====================================
 * CELL STRUCTURE
 * ==================================== */

.jp-Cell,
.cell,
.nb-cell {
    background: var(--notebook-bg);
    border: 1px solid var(--notebook-border);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--notebook-shadow);
    transition: all 0.3s var(--ease-curve);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.jp-Cell:hover,
.cell:hover,
.nb-cell:hover {
    border-color: rgba(83, 51, 237, 0.3);
    box-shadow: var(--notebook-hover-shadow);
    transform: translateY(-2px);
}

/* ====================================
 * MARKDOWN CELLS - CLEAN STYLING
 * ==================================== */

.jp-MarkdownCell,
.text_cell,
.nb-markdown {
    background: linear-gradient(
        135deg,
        rgba(30, 33, 38, 0.95) 0%,
        rgba(26, 29, 32, 0.9) 100%
    );
    border-left: 4px solid var(--lab-violet, #5333ed);
    border-radius: var(--border-radius-md);
    box-shadow:
        0 2px 20px rgba(83, 51, 237, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.jp-MarkdownCell .jp-MarkdownOutput,
.text_cell .text_cell_render,
.nb-markdown-content {
    padding: var(--spacing-xl);
    color: var(--photon-white, #f5f7fa);
    line-height: 1.7;
    font-size: 1rem;
    font-family: var(--font-ui, "Inter", system-ui, sans-serif);
}

/* CRITICAL: Hide ALL copy elements from markdown cells */
.jp-MarkdownCell clipboard-copy,
.jp-MarkdownCell .clipboard-copy,
.jp-MarkdownCell .zeroclipboard-container,
.jp-MarkdownCell .copy-button,
.jp-MarkdownCell .jp-InputArea::after,
.jp-MarkdownCell .jp-InputArea::before {
    display: none !important;
    visibility: hidden !important;
}

/* Enhanced typography for markdown */
.jp-MarkdownCell h1,
.text_cell h1,
.nb-markdown h1 {
    color: var(--photon-white, #f5f7fa);
    font-family: var(--font-display, "Manrope", "Inter", sans-serif);
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.2;
    background: linear-gradient(
        135deg,
        var(--lab-violet, #5333ed) 0%,
        var(--lab-aqua, #04e2dc) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jp-MarkdownCell h2,
.text_cell h2,
.nb-markdown h2 {
    color: var(--photon-white, #f5f7fa);
    font-family: var(--font-display, "Manrope", "Inter", sans-serif);
    font-size: 1.875rem;
    font-weight: 600;
    margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(
            90deg,
            var(--lab-violet, #5333ed) 0%,
            var(--lab-aqua, #04e2dc) 100%
        )
        1;
}

.jp-MarkdownCell h3,
.text_cell h3,
.nb-markdown h3 {
    color: var(--lab-violet, #5333ed);
    font-family: var(--font-display, "Manrope", "Inter", sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.jp-MarkdownCell h4,
.text_cell h4,
.nb-markdown h4 {
    color: var(--photon-white, #f5f7fa);
    font-family: var(--font-ui, "Inter", sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

.jp-MarkdownCell p,
.text_cell p,
.nb-markdown p {
    margin-bottom: var(--spacing-md);
    color: rgba(245, 247, 250, 0.9);
    line-height: 1.8;
    font-size: 1.05rem;
    font-weight: 400;
}

.jp-MarkdownCell p strong,
.text_cell p strong,
.nb-markdown p strong {
    color: var(--photon-white, #f5f7fa);
    font-weight: 600;
}

.jp-MarkdownCell p em,
.text_cell p em,
.nb-markdown p em {
    color: var(--lab-violet, #5333ed);
    font-style: italic;
}

.jp-MarkdownCell ul,
.jp-MarkdownCell ol,
.text_cell ul,
.text_cell ol,
.nb-markdown ul,
.nb-markdown ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
    color: rgba(245, 247, 250, 0.85);
    line-height: 1.7;
}

.jp-MarkdownCell li,
.text_cell li,
.nb-markdown li {
    margin-bottom: var(--spacing-sm);
}

.jp-MarkdownCell a,
.text_cell a,
.nb-markdown a {
    color: var(--lab-violet, #5333ed);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease-curve);
}

.jp-MarkdownCell a:hover,
.text_cell a:hover,
.nb-markdown a:hover {
    border-bottom-color: var(--lab-violet, #5333ed);
}

.jp-MarkdownCell blockquote,
.text_cell blockquote,
.nb-markdown blockquote {
    border-left: 4px solid var(--lab-aqua, #04e2dc);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(4, 226, 220, 0.1);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    color: rgba(245, 247, 250, 0.9);
    font-style: italic;
}

.jp-MarkdownCell code,
.text_cell code,
.nb-markdown code {
    background: linear-gradient(
        135deg,
        rgba(83, 51, 237, 0.08) 0%,
        rgba(83, 51, 237, 0.12) 100%
    ) !important;
    color: var(--lab-violet, #5333ed) !important;
    padding: 0.25em 0.5em !important;
    border-radius: var(--border-radius-sm) !important;
    font-family: var(--font-code, "IBM Plex Mono", monospace) !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    border: 1px solid rgba(83, 51, 237, 0.2) !important;
    box-shadow: 0 1px 3px rgba(83, 51, 237, 0.1) !important;
}

/* ====================================
 * CODE CELLS - CLEAN INPUT/OUTPUT
 * ==================================== */

.jp-CodeCell {
    background: var(--code-bg);
    border: 1px solid rgba(83, 51, 237, 0.2);
    border-left: 4px solid #5333ed;
}

.jp-InputArea,
.input_area,
.nb-input {
    background: transparent;
    border: none;
    position: relative;
}

.jp-InputPrompt,
.input_prompt,
.nb-input-prompt {
    background: linear-gradient(135deg, var(--lab-violet, #5333ed), #7c3aed);
    color: var(--photon-white, #f5f7fa) !important;
    font-family: var(--font-code, "IBM Plex Mono", monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important;
    margin: 0 !important;
    min-width: 80px !important;
    text-align: center !important;
    border-right: 2px solid rgba(83, 51, 237, 0.3) !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(83, 51, 237, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Style the actual prompt text content */
.jp-InputPrompt,
.jp-InputArea-prompt {
    color: var(--photon-white, #f5f7fa) !important;
    font-family: var(--font-code, "IBM Plex Mono", monospace) !important;
    font-weight: 600 !important;
}

.jp-OutputPrompt,
.jp-OutputArea-prompt {
    color: var(--photon-white, #f5f7fa) !important;
    font-family: var(--font-code, "IBM Plex Mono", monospace) !important;
    font-weight: 600 !important;
}

.jp-InputArea .jp-Editor,
.input_area .codehilite,
.nb-input-content pre {
    background: linear-gradient(
        135deg,
        rgba(30, 33, 38, 0.95) 0%,
        rgba(26, 29, 32, 0.9) 100%
    ) !important;
    border: 1px solid rgba(83, 51, 237, 0.3) !important;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm)
        var(--border-radius-sm) !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    font-family: var(--font-code) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #d4d4d4 !important;
    overflow-x: auto !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(83, 51, 237, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ====================================
 * OUTPUT CELLS
 * ==================================== */

.jp-OutputArea,
.output_area,
.nb-output {
    margin-top: var(--spacing-md);
    background: transparent;
}

.jp-OutputPrompt,
.output_prompt,
.nb-output-prompt {
    background: linear-gradient(135deg, var(--lab-aqua, #04e2dc), #059669);
    color: var(--photon-white, #f5f7fa) !important;
    font-family: var(--font-code, "IBM Plex Mono", monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important;
    margin: 0 !important;
    min-width: 80px !important;
    text-align: center !important;
    border-right: 2px solid rgba(4, 226, 220, 0.3) !important;
    box-shadow: 0 2px 8px rgba(4, 226, 220, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.jp-OutputArea-output,
.output,
.nb-output-content {
    background: linear-gradient(
        135deg,
        rgba(26, 29, 32, 0.9) 0%,
        rgba(22, 25, 28, 0.95) 100%
    );
    border: 1px solid rgba(4, 226, 220, 0.2);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm)
        var(--border-radius-sm);
    padding: var(--spacing-md);
    font-family: var(--font-code);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d4d4d4;
    overflow-x: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(4, 226, 220, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.jp-OutputArea-output:last-child,
.output:last-child {
    margin-bottom: 0;
}

/* ====================================
 * EXISTING COPY BUTTON STYLING
 * Style the existing clipboard-copy elements
 * ==================================== */

/* Style existing copy buttons on code cells only */
.jp-CodeCell clipboard-copy,
.jp-CodeCell .clipboard-copy {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    background: rgba(83, 51, 237, 0.9) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    font-family: var(--font-ui) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.jp-CodeCell:hover clipboard-copy,
.jp-CodeCell:hover .clipboard-copy {
    opacity: 1 !important;
}

/* Style the copy icon */
.clipboard-copy-icon {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
}

/* ====================================
 * SYNTAX HIGHLIGHTING FIXES
 * ==================================== */

/* Python syntax highlighting - proper VS Code dark theme colors */
.highlight-ipynb.hl-python .err {
    color: #f44747 !important;
}
.highlight-ipynb.hl-python .k {
    color: #569cd6 !important;
    font-weight: 600 !important;
}
.highlight-ipynb.hl-python .n {
    color: #dcdcaa !important;
}
.highlight-ipynb.hl-python .s,
.highlight-ipynb.hl-python .s1,
.highlight-ipynb.hl-python .s2 {
    color: #ce9178 !important;
}
.highlight-ipynb.hl-python .nb {
    color: #4ec9b0 !important;
}
.highlight-ipynb.hl-python .c1,
.highlight-ipynb.hl-python .c {
    color: #6a9955 !important;
    font-style: italic !important;
}
.highlight-ipynb.hl-python .mi,
.highlight-ipynb.hl-python .mf {
    color: #b5cea8 !important;
}
.highlight-ipynb.hl-python .nf {
    color: #dcdcaa !important;
}
.highlight-ipynb.hl-python .o {
    color: #d4d4d4 !important;
}
.highlight-ipynb.hl-python .p {
    color: #d4d4d4 !important;
}

/* Add general text color for all code elements */
.jp-CodeCell,
.jp-CodeCell * {
    color: #d4d4d4;
}

.jp-CodeCell .CodeMirror,
.jp-CodeCell .CodeMirror * {
    background: linear-gradient(
        135deg,
        rgba(30, 33, 38, 0.95) 0%,
        rgba(26, 29, 32, 0.9) 100%
    ) !important;
    color: #d4d4d4 !important;
}

.jp-CodeCell .CodeMirror-lines {
    background: transparent !important;
}

.jp-CodeCell .CodeMirror-gutters {
    background: rgba(26, 29, 32, 0.8) !important;
    border-right: 1px solid rgba(83, 51, 237, 0.2) !important;
}

.jp-CodeCell .CodeMirror-linenumber {
    color: rgba(245, 247, 250, 0.5) !important;
}

/* Output text specifically */
.jp-OutputArea-output,
.jp-OutputArea-output *,
.output,
.output * {
    color: #d4d4d4 !important;
}

/* Python output pre elements */
.jp-OutputArea-output pre,
.output_area pre,
.nb-output pre {
    background: rgba(26, 29, 32, 0.8) !important;
    color: #d4d4d4 !important;
    border: 1px solid rgba(4, 226, 220, 0.2) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: var(--spacing-md) !important;
    margin: var(--spacing-sm) 0 !important;
    font-family: var(--font-code) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Python traceback/error output */
.jp-OutputArea-output pre[class*="stderr"],
.output_area .output_stderr pre {
    background: rgba(244, 71, 71, 0.1) !important;
    color: #f44747 !important;
    border-color: rgba(244, 71, 71, 0.3) !important;
}

/* Remove incorrect language badges on markdown */
.jp-MarkdownCell .lang-badge,
.jp-MarkdownCell::before {
    display: none !important;
}

/* ====================================
 * RESPONSIVE DESIGN
 * ==================================== */

@media (max-width: 768px) {
    .jupyter-wrapper,
    .notebook-content {
        padding: var(--spacing-md);
    }

    .jp-Cell,
    .cell,
    .nb-cell {
        margin-bottom: var(--spacing-md);
    }

    .jp-InputPrompt,
    .jp-OutputPrompt,
    .input_prompt,
    .output_prompt {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
        min-width: 60px !important;
        color: var(--photon-white, #f5f7fa) !important;
    }

    .jp-InputArea .jp-Editor,
    .input_area .codehilite,
    .nb-input-content pre {
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
    }
}

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

@media print {
    .jp-Cell,
    .cell,
    .nb-cell {
        break-inside: avoid;
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        transform: none !important;
    }

    clipboard-copy,
    .clipboard-copy,
    .copy-button {
        display: none !important;
    }

    .jp-InputPrompt,
    .jp-OutputPrompt,
    .input_prompt,
    .output_prompt {
        background: rgba(30, 33, 38, 0.9) !important;
        color: var(--photon-white, #f5f7fa) !important;
        border: 1px solid rgba(83, 51, 237, 0.3) !important;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .jp-Cell,
    .cell,
    .nb-cell {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .jp-Cell,
    .cell,
    .nb-cell {
        border-width: 2px !important;
        border-color: currentColor !important;
    }
}

/* Focus indicators */
.jp-Cell:focus-within,
.cell:focus-within,
.nb-cell:focus-within {
    outline: 2px solid #5333ed;
    outline-offset: 2px;
}

/* ====================================
 * DISABLE ALL PSEUDO-ELEMENT COPY BUTTONS
 * ==================================== */

.jp-InputArea::after,
.jp-InputArea::before,
.jp-OutputArea::after,
.jp-OutputArea::before,
.input_area::after,
.input_area::before,
.output::after,
.output::before {
    display: none !important;
    content: none !important;
}

/* ====================================
 * CLEAN TABLE STYLING
 * ==================================== */

.jp-OutputArea table,
.output table,
.nb-output table {
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    width: 100%;
    background: linear-gradient(
        135deg,
        rgba(26, 29, 32, 0.9) 0%,
        rgba(22, 25, 28, 0.95) 100%
    );
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: #d4d4d4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.jp-OutputArea table th,
.jp-OutputArea table td,
.output table th,
.output table td {
    border: 1px solid #3c3c3c;
    padding: 0.75rem;
    text-align: left;
    color: #d4d4d4;
}

.jp-OutputArea table th,
.output table th {
    background: linear-gradient(
        135deg,
        rgba(30, 33, 38, 0.9) 0%,
        rgba(26, 29, 32, 0.95) 100%
    );
    font-weight: 600;
    color: #cccccc;
    border-color: rgba(83, 51, 237, 0.3);
}

/* ====================================
 * IMAGE STYLING
 * ==================================== */

.jp-OutputArea img,
.output img,
.nb-output img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: var(--spacing-md) 0;
}

/* ====================================
 * ERROR OUTPUT STYLING
 * ==================================== */

.jp-OutputArea-output.jp-OutputArea-executeResult--error,
.output_area .output_stderr,
.nb-error {
    background: rgba(255, 84, 96, 0.1) !important;
    border-left: 4px solid var(--status-error, #ff5460) !important;
    color: var(--status-error, #ff5460) !important;
}

.jp-OutputArea-output.jp-OutputArea-executeResult--error pre,
.output_area .output_stderr pre,
.nb-error pre {
    background: rgba(255, 84, 96, 0.05) !important;
    color: var(--status-error, #ff5460) !important;
    border: 1px solid rgba(255, 84, 96, 0.2) !important;
}