/* ==========================================================================
   TUTORIAL MODULE SCOPED STYLES
   Prefix: .tutorial-
   ========================================================================== */

.tutorial-wrapper {
    /* Set fixed Dark Theme setup and remove light theme capability */
    --tutorial-primary: #60a5fa; /* blue-400 */
    --tutorial-primary-hover: #93c5fd;
    --tutorial-text: #f3f4f6; /* gray-100 */
    --tutorial-muted: #9ca3af;
    --tutorial-bg: #111827; /* gray-900 */
    --tutorial-bg-alt: #1f2937; /* gray-800 */
    --tutorial-border: #374151; /* gray-700 */
    --tutorial-code-bg: #0f172a;
    
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--tutorial-text);
    background-color: var(--tutorial-bg);
}

/* Helpers to replace hardcoded tailwind colors */
.tut-bg { background-color: var(--tutorial-bg) !important; }
.tut-bg-alt { background-color: var(--tutorial-bg-alt) !important; }
.tut-text { color: var(--tutorial-text) !important; }
.tut-text-muted { color: var(--tutorial-muted) !important; }
.tut-border { border-color: var(--tutorial-border) !important; }

/* Ensure Quill content respects text color */
.tutorial-wrapper .ql-editor {
    color: var(--tutorial-text);
}

/* Base Styles within wrapper */
.tutorial-wrapper h1, .tutorial-wrapper h2, .tutorial-wrapper h3, .tutorial-wrapper h4, .tutorial-wrapper h5, .tutorial-wrapper h6 {
    color: var(--tutorial-text);
    line-height: 1.3;
}

.tutorial-wrapper a {
    color: var(--tutorial-primary);
    text-decoration: none;
}

.tutorial-wrapper a:hover {
    color: var(--tutorial-primary-hover);
}

/* Sidebar Styling */
.tutorial-sidebar {
    background-color: var(--tutorial-bg-alt);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.tutorial-sidebar::-webkit-scrollbar {
    width: 6px;
}
.tutorial-sidebar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* Sidebar Chapter Buttons */
.tutorial-chapter-btn.active svg {
    transform: rotate(180deg);
}

/* Main Content Typography */
.tutorial-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.tutorial-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 5rem;
}

.tutorial-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    scroll-margin-top: 5rem;
}

.tutorial-content ul, .tutorial-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.tutorial-content li {
    margin-bottom: 0.5rem;
}

.tutorial-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 2rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Code Blocks & Copy Button */
.tutorial-content pre {
    position: relative;
    padding: 1rem;
    padding-top: 2.5rem;
    border-radius: 0.5rem;
    background-color: #1e293b;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.tutorial-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #e2e8f0;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.tutorial-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tutorial-copy-btn.copied {
    background: #10b981;
    color: white;
}

/* Right TOC */
.tutorial-right-sidebar {
    background-color: var(--tutorial-bg);
}

.tutorial-toc-link {
    display: block;
    padding: 0.25rem 0;
    color: var(--tutorial-muted);
    transition: color 0.2s;
}

.tutorial-toc-link:hover {
    color: var(--tutorial-primary);
}

.tutorial-toc-link.active {
    color: var(--tutorial-primary);
    font-weight: 600;
    border-left: 2px solid var(--tutorial-primary);
    padding-left: calc(1rem - 2px);
    margin-left: -1rem;
}

/* Utilities */
.prose-blue a { color: var(--tutorial-primary); text-decoration: underline; text-underline-offset: 4px; }
.prose-blue a:hover { color: var(--tutorial-primary-hover); }