/* assets/styles.css - "Premium Dark Science" Theme */

/* 1. Global Typography & Background */
body {
    background-color: #0d1117 !important; /* GitHub Dark Dimmed */
    color: #c9d1d9 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

h1 { border-bottom: 2px solid #238636 !important; padding-bottom: 10px; } /* Enterprise Green Accent */
h2 { border-bottom: 1px solid #30363d !important; padding-bottom: 5px; }

/* 2. WebR Output - "The Digital Lab" Look */
/* High Contrast, Professional, No "Matrix" Glare */

div[id^="qwebr-output-code"],
.cell-output-stdout,
.cell-output-display {
    background-color: #010409 !important; /* Pure Dark */
    border: 1px solid #30363d !important;
    border-left: 4px solid #F28C3D !important; /* Brand Orange Accent */
    border-radius: 6px !important;
    margin-top: 15px !important;
    padding: 15px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

/* Text Visibility - Crisp White/Grey on Black */
div[id^="qwebr-output-code"] pre,
div[id^="qwebr-output-code"] code,
.cell-output-stdout pre,
.cell-output-stdout code {
    color: #e6edf3 !important; /* Bright Grey/White */
    background-color: transparent !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* 3. Error Handling - distinct but elegant */
div[id*="-stderr"],
.cell-output-stderr {
    background-color: #2a0a0a !important; /* Deep Red BG */
    border-left: 4px solid #ff7b72 !important; /* Soft Red Accent */
    color: #ff7b72 !important;
    padding: 10px !important;
    margin-top: 5px !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* 4. Glassmorphism Callouts (For Definitions/Quotes) */
.callout {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #e6edf3 !important;
}

.callout-note { border-left: 4px solid #58a6ff !important; } /* Blue */
.callout-warning { border-left: 4px solid #d29922 !important; } /* Yellow */
.callout-important { border-left: 4px solid #F28C3D !important; } /* Brand Orange */

/* 5. Tables - Minimalist Science Style */
table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 20px 0 !important;
    font-size: 0.95rem !important;
}

th {
    background-color: #161b22 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px !important;
    border-bottom: 2px solid #30363d !important;
}

td {
    padding: 12px !important;
    border-bottom: 1px solid #21262d !important;
    color: #c9d1d9 !important;
}

tr:hover td { background-color: #161b22 !important; }

/* 6. Navigation & Sidebar */
.sidebar { background-color: #010409 !important; border-right: 1px solid #30363d !important; }
.sidebar-title { color: #ffffff !important; font-weight: 700 !important; }
.nav-link { color: #8b949e !important; }
.nav-link.active { color: #58a6ff !important; border-right: 2px solid #58a6ff !important; }

/* 7. Code Editor - VS Code Aesthetic */
.qwebr-editor {
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    background-color: #0d1117 !important;
}
.qwebr-button-run {
    background-color: #238636 !important; /* GitHub Green */
    color: white !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease;
}
.qwebr-button-run:hover { background-color: #2ea043 !important; transform: translateY(-1px); }

/* 8. Header Code Visibility (Fix for "Invisible Package Name") */
/* Targets inline code blocks inside headers (e.g. `MAd` in H1) */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, .title code {
    color: #F28C3D !important; /* Brand Orange for Visibility */
    background-color: transparent !important; /* NO BOX - Just Text */
    background: transparent !important;
    border: none !important; /* Remove border if present */
    padding: 0px !important; /* Remove padding to blend in */
    font-family: 'JetBrains Mono', monospace !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* NUCLEAR FIX: Force ALL elements inside header code to inherit orange */
h1 code *, h2 code *, h3 code *, h4 code *, h5 code *, h6 code *, .title code * {
    color: inherit !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* 9. Body Inline Code Fix (Global) */
p code, li code, td code, .callout code {
    color: #F28C3D !important; /* Brand Orange */
    background-color: #161b22 !important; /* Dark Box */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
    border: 1px solid #30363d !important;
}

/* 10. Scrolling Fix for Code Editors */
/* Ensures that scroll events propagate to the page when the editor boundary is reached */
.monaco-scrollable-element, .monaco-editor, .qwebr-editor, .overflow-guard {
    overscroll-behavior: auto !important;
}

/* Add margins to ensure there is always 'black space' to scroll on */
div[id^="qwebr-output-code"], .qwebr-editor {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    box-shadow: 0 0 0 10px rgba(0,0,0,0) !important; /* Invisible handle */
}


/* 11. Navigation Bar Cleanup */
/* Hide Hamburger Menu */
.navbar-toggler {
    display: none !important;
}
/* Hide Title/Brand Left of Search */
.navbar-brand-container {
    display: none !important;
}