/* =================================================================
   1. ROOT VARIABLES & FONT DEFINITIONS
   - Core design system for the documentation platform.
   - A professional, subdued version of the main brand identity.
================================================================= */
:root {
    /* Color Palette */
    --bg-main: #1E1E1E;
    --bg-panel: #2D2D2D;
    --bg-panel-light: #3a3a3a;
    --text-primary: #D4D4D4;
    --text-secondary: #888888;
    --text-header: #FFFFFF;
    --accent-primary: #00B8D4; /* Electric Teal */
    --accent-hover: #00e5ff;
    --accent-orange: #FF9800; /* Primary Action */
    --accent-orange-hover: #ffb74d; /* Lighter orange */
    --accent-red: #d9534f;
    --border-color: #444444;
    --status-open-bg: rgba(255, 152, 0, 0.1);
    --status-open-fg: #FF9800;
    --status-solved-bg: rgba(0, 184, 212, 0.1);
    --status-solved-fg: #00B8D4;
    --status-fixed-bg: rgba(76, 175, 80, 0.1);
    --status-fixed-fg: #4CAF50;
    --status-closed-bg: rgba(136, 136, 136, 0.1);
    --status-closed-fg: #888888;
    --accepted-answer-bg: rgba(76, 175, 80, 0.05);
    --accepted-answer-border: #4CAF50;
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    /* Layout */
    --global-header-height: 72px;
    --index-width: 280px; /* Width for docs-index and studio-toolbox */
    --config-workbench-width: 450px; /* Fixed width for center panel in studio */
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIconsOutlined-Regular.otf) format('opentype');
}

/* =================================================================
   2. BASE STYLES & RESETS
================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%; /* Ensure full width for body/html */
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* Prevents scrollbars on the body itself */
    display: flex;
    flex-direction: column; /* Ensure body is a flex container for header + content */
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

    a:hover {
        color: var(--accent-hover);
    }

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
}

/* =================================================================
   3. GLOBAL HEADER
================================================================= */
#global-header {
    height: var(--global-header-height);
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.global-search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    width: 300px;
}

    .global-search-container .search-icon {
        color: var(--text-secondary);
        font-size: 20px;
    }

#global-search {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
}

    #global-search:focus {
        outline: none;
    }

.btn-pipeline-studio, .btn-primary { /* Applied to both primary action buttons for consistency */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-orange);
    color: #111;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s;
    border: none; /* Ensure no default button border */
    cursor: pointer;
}

    .btn-pipeline-studio:hover, .btn-primary:hover {
        background-color: var(--accent-orange-hover);
        color: #000;
    }

    .btn-pipeline-studio .material-icons-outlined, .btn-primary .material-icons-outlined {
        font-size: 20px;
    }


/* =================================================================
   4. CORE APPLICATION LAYOUT (docs-container - beneath global header)
================================================================= */
.docs-container {
    display: flex;
    flex-grow: 1; /* Allow docs-container to take remaining height */
    height: calc(100vh - var(--global-header-height)); /* Explicit height for content area */
}

#docs-index {
    width: var(--index-width);
    flex-shrink: 0;
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow scrolling within the sidebar */
}

#docs-workspace {
    flex-grow: 1;
    padding: 32px;
    overflow-y: auto;
}

/* =================================================================
   5. LEFT PANEL: INDEX & NAVIGATION (Revised)
================================================================= */
/* Logo and global search moved to #global-header */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

    /* FIXED: Constraints added to prevent natural SVG explosion */
    .logo img {
        height: 40px;
        width: auto;
        flex-shrink: 0;
    }

    .logo .logo-text {
        font-family: var(--font-mono);
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--text-header);
        white-space: nowrap;
    }

.tool-list {
    flex-grow: 1; /* Allow tool list to take available space */
}

.tool-accordion-list {
    list-style: none;
    padding: 16px 0;
}

.tool-item {
    border-bottom: 1px solid var(--border-color);
}

    .tool-item:last-child {
        border-bottom: none;
    }

    .tool-item .tool-link-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        color: var(--text-secondary);
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-left: 3px solid transparent;
        cursor: pointer;
    }

        .tool-item .tool-link-header:hover {
            color: var(--text-header);
            background-color: rgba(255, 255, 255, 0.05);
        }

    .tool-item.active > .tool-link-header {
        color: var(--accent-orange);
        font-weight: 600;
        border-left-color: var(--accent-orange);
        background-color: rgba(255, 152, 0, 0.1);
    }

    .tool-item .tool-icon {
        font-size: 20px;
        width: 24px; /* Ensure alignment */
        text-align: center;
    }

    .tool-item .expand-icon {
        margin-left: auto;
        font-size: 20px;
        transition: transform 0.2s ease;
    }

    .tool-item.expanded .expand-icon {
        transform: rotate(90deg);
    }

.version-sublist {
    list-style: none;
    padding-left: 64px; /* Indent versions */
    padding-bottom: 8px;
    background-color: rgba(0, 0, 0, 0.1); /* Slightly darker background for sublist */
    border-left: 3px solid var(--accent-orange); /* Align with active tool link border */
    margin-left: -3px; /* Pull left to meet border */
}

    .version-sublist li a {
        display: block;
        padding: 6px 24px;
        color: var(--text-secondary);
        font-size: 0.9rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .version-sublist li a:hover {
            color: var(--text-primary);
            background-color: rgba(255, 255, 255, 0.03);
        }

        /* Active styling for documentation site version links */
        .version-sublist li a.active {
            color: var(--accent-primary);
            font-weight: 600;
            background-color: rgba(0, 184, 212, 0.1); /* Teal background for active version */
        }
        /* Active styling for studio selected version link */
        .version-sublist li a.active-studio-selection {
            color: var(--accent-orange); /* Orange for active selection in studio */
            font-weight: 600;
            background-color: rgba(255, 152, 0, 0.1);
        }


.latest-badge {
    margin-left: 8px;
    background-color: var(--accent-primary);
    color: #111;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* =================================================================
   6. RIGHT PANEL: WORKSPACE & TOOL PAGE
================================================================= */
.workspace-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary);
}

    .workspace-placeholder h1 {
        font-size: 2rem;
        margin-bottom: 16px;
        color: var(--text-header);
    }

    .workspace-placeholder h2 { /* Added for Studio placeholders */
        font-size: 1.5rem;
        margin-bottom: 8px;
        color: var(--text-header);
    }

    .workspace-placeholder p { /* Added for Studio placeholders */
        font-size: 1rem;
        color: var(--text-secondary);
    }

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

    .tool-header h1 {
        font-size: 2.5rem;
        color: var(--text-header);
    }

.version-selector select {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23888888'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 40px; /* Make space for arrow */
}

.tab-nav {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.tab-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 24px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Overlap the container's border */
    transition: color 0.2s ease, border-color 0.2s ease;
    display: inline-block;
}

    .tab-link:hover {
        color: var(--text-primary);
    }

    .tab-link.active {
        color: var(--accent-orange);
        border-bottom-color: var(--accent-orange);
    }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

/* =================================================================
   7. MARKDOWN CONTENT STYLES
   - Styles for the HTML generated from README files.
================================================================= */
.markdown-body {
    line-height: 1.7;
}

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
        color: var(--text-header);
        margin-top: 1.5em;
        margin-bottom: 0.75em;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0.3em;
    }

    .markdown-body h1 {
        font-size: 2em;
    }

    .markdown-body h2 {
        font-size: 1.5em;
    }

    .markdown-body h3 {
        font-size: 1.25em;
    }

    .markdown-body h4 {
        font-size: 1.1em;
    }

    .markdown-body p {
        margin-bottom: 1em;
        color: var(--text-primary);
    }

    .markdown-body ul,
    .markdown-body ol {
        padding-left: 2em;
        margin-bottom: 1em;
    }

    .markdown-body li {
        margin-bottom: 0.5em;
    }

    .markdown-body strong {
        color: var(--text-header);
        font-weight: 600;
    }

    .markdown-body blockquote {
        margin: 0 0 1em 0;
        padding: 0.5em 1.5em;
        border-left: 4px solid var(--accent-primary);
        background-color: rgba(0, 184, 212, 0.05);
        color: var(--text-secondary);
    }

        .markdown-body blockquote p {
            margin-bottom: 0;
        }

    .markdown-body code {
        font-family: var(--font-mono);
        background-color: var(--bg-panel);
        padding: 0.2em 0.4em;
        border-radius: 4px;
        font-size: 0.9em;
    }

    .markdown-body pre {
        font-family: var(--font-mono);
        background-color: #111;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 1em;
        overflow-x: auto;
        margin-bottom: 1em;
    }

        .markdown-body pre code {
            background: none;
            padding: 0;
            font-size: 1em;
        }

    .markdown-body table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1em;
        border: 1px solid var(--border-color);
    }

    .markdown-body th,
    .markdown-body td {
        border: 1px solid var(--border-color);
        padding: 0.75em 1em;
        text-align: left;
    }

    .markdown-body th {
        background-color: var(--bg-panel);
        color: var(--text-header);
        font-weight: 600;
    }
/* =================================================================
   8. EXAMPLES TAB STYLES
================================================================= */
.text-secondary {
    color: var(--text-secondary);
}

.sub-tab-nav {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.sub-tab-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .sub-tab-link.active {
        color: var(--accent-primary);
        border-bottom-color: var(--accent-primary);
    }

.sub-tab-content {
    display: none;
}

    .sub-tab-content.active {
        display: block;
    }

.pipeline-code {
    font-family: var(--font-mono);
    background-color: #111;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
    font-size: 0.9em;
}

    .pipeline-code .highlight-line {
        display: block;
        background-color: rgba(253, 151, 31, 0.1); /* Low-opacity orange */
        border-left: 3px solid var(--accent-orange);
        margin: 0 -1em; /* Extend to the edges of the pre block */
        padding: 0 1em; /* Restore padding */
    }

/* =================================================================
   9. LEFT PANEL: USER PANEL
   - Styles for the login/register/logout section.
================================================================= */
.user-panel {
    margin-top: auto; /* Pushes the panel to the bottom of the flex container */
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
}

    .user-panel ul {
        list-style: none;
        padding: 16px 0;
    }

    /* Share styles with .tool-list for consistency */
    .user-panel li a {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        color: var(--text-secondary);
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .user-panel li a:hover {
            color: var(--text-header);
            background-color: rgba(255, 255, 255, 0.05);
        }

    .user-panel .user-info a {
        cursor: default; /* This is not a clickable link yet */
    }

        .user-panel .user-info a:hover {
            background-color: transparent; /* Disable hover effect */
            color: var(--text-secondary);
        }

/* =================================================================
   10. SUPPORT DASHBOARD STYLES
================================================================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.search-bar {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: var(--bg-main); /* Changed from bg-panel to bg-main for visual distinction */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 12px;
}

    .search-bar .search-icon {
        font-size: 20px;
    }

#support-search {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 12px 10px;
}

    #support-search:focus {
        outline: none;
    }

.btn-ask-question {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-orange);
    color: #111;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s;
}

    .btn-ask-question:hover {
        background-color: var(--accent-orange-hover); /* Lighter orange */
        color: #000;
    }

    .btn-ask-question .material-icons-outlined {
        font-size: 20px;
    }

.dashboard-filters {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .filter-group label {
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.9rem;
    }

    .filter-group select {
        background-color: var(--bg-panel);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        border-radius: 4px;
        padding: 6px 10px;
    }

        .filter-group select:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

.question-list-header, .question-list-item {
    display: grid;
    grid-template-columns: 120px 1fr 120px 120px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.question-list-header {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-list-item {
    color: var(--text-primary);
    transition: background-color 0.2s;
}

    .question-list-item:hover {
        background-color: rgba(255, 255, 255, 0.03);
        color: var(--text-header);
    }

.col-title {
    font-weight: 500;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

    .status-badge.status-open {
        background-color: var(--status-open-bg);
        color: var(--status-open-fg);
    }

    .status-badge.status-solved {
        background-color: var(--status-solved-bg);
        color: var(--status-solved-fg);
    }

    .status-badge.status-fixed {
        background-color: var(--status-fixed-bg);
        color: var(--status-fixed-fg);
    }

    .status-badge.status-closed {
        background-color: var(--status-closed-bg);
        color: var(--status-closed-fg);
    }

.version-badge {
    display: inline-block;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
}

.col-date {
    color: var(--text-secondary);
    text-align: right;
}

.no-questions-placeholder {
    padding: 48px;
    text-align: center;
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    margin-top: 16px;
}

    .no-questions-placeholder h3 {
        color: var(--text-header);
        margin-bottom: 8px;
    }

/* =================================================================
   11. IDENTITY PAGES STYLES
   - Overrides for scaffolded Register/Login pages.
================================================================= */
/* General container for Identity forms */
.identity-form-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 32px;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .identity-form-container h1,
    .identity-form-container h2 {
        color: var(--text-header);
        text-align: center;
        border-bottom: none;
        margin-bottom: 24px;
    }

    .identity-form-container hr {
        border-color: var(--border-color);
        margin-bottom: 24px;
    }

/* Floating label styles */
.form-floating > .form-control,
.form-floating > .form-select {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

    .form-floating > .form-control:focus {
        background-color: var(--bg-main);
        color: var(--text-primary);
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 0.25rem rgba(0, 184, 212, 0.25);
    }

.form-floating > label {
    color: var(--text-secondary);
}

.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control:-webkit-autofill:hover,
.form-floating > .form-control:-webkit-autofill:focus,
.form-floating > .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-main) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Validation and links */
.text-danger {
    color: var(--accent-red) !important;
}

.identity-form-container a {
    color: var(--accent-primary);
}

/* Button overrides */
/* .btn-primary is now defined in Global Header section */

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.5);
}

/* =================================================================
   12. THREAD PAGE STYLES
================================================================= */
.thread-container {
    max-width: 900px;
    margin: 0 auto;
}

.question-post {
    padding-bottom: 24px;
    border-bottom: 2px solid var(--border-color);
}

.post-header {
    margin-bottom: 16px;
}

.status-header {
    margin-bottom: 16px;
}

.post-header h1 {
    font-size: 2.2rem;
    color: var(--text-header);
    line-height: 1.3;
    margin: 0;
    border: none;
}

.post-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.user-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.admin-panel {
    margin-top: 24px;
    padding: 24px;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .admin-panel h4 {
        color: var(--text-header);
        margin-top: 0;
        margin-bottom: 16px;
        border: none;
    }

    .admin-panel .form-control {
        background-color: var(--bg-main);
    }

    .admin-panel .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

.admin-form-controls {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.answers-header {
    margin-top: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

    .answers-header h3 {
        color: var(--text-header);
        font-size: 1.5rem;
    }

.answer-post {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}

    .answer-post.accepted-answer {
        background-color: var(--accepted-answer-bg);
    }

.vote-cell {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vote-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

    .vote-btn .material-icons-outlined {
        font-size: 48px;
    }

    .vote-btn:hover {
        color: var(--text-primary);
    }

    .vote-btn:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

.vote-score {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-header);
    margin: 4px 0;
}

.accepted-indicator .material-icons-outlined {
    font-size: 32px;
    color: var(--accepted-answer-border);
    margin-top: 8px;
}

.post-content {
    flex-grow: 1;
}

.post-new-answer {
    margin-top: 32px;
    padding: 24px;
    background-color: var(--bg-panel);
    border-radius: 6px;
}

    .post-new-answer h3 {
        color: var(--text-header);
        margin-bottom: 16px;
    }

    .post-new-answer textarea {
        background-color: var(--bg-main);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

.login-prompt {
    margin-top: 32px;
    padding: 24px;
    text-align: center;
    background-color: var(--bg-panel);
    border-radius: 6px;
    font-size: 1.1rem;
}

.accept-form {
    margin-top: 8px;
}

.accept-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

    .accept-btn .material-icons-outlined {
        font-size: 32px;
    }

    .accept-btn:hover {
        color: var(--accepted-answer-border);
    }

    .accept-btn.accepted {
        color: var(--accepted-answer-border);
    }

.admin-controls {
    margin-left: auto; /* Pushes the controls to the right */
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 8px;
}

    .btn-link.text-danger {
        color: var(--accent-red);
    }

    .btn-link:hover {
        text-decoration: underline;
    }

.edit-actions {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-secondary {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn-secondary:hover {
        background-color: var(--bg-panel);
        color: var(--text-primary);
    }

/* =================================================================
   13. SEARCH RESULTS STYLES
================================================================= */
.search-loading, .search-error, .search-no-results {
    text-align: center;
    padding: 48px;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.search-result-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.2s;
}

    .search-result-item:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }

.result-icon {
    color: var(--text-secondary);
}

.result-title {
    font-weight: 600;
    color: var(--text-header);
    margin-bottom: 4px;
}

.result-snippet {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* =================================================================
   14. EASYMDE DARK THEME OVERRIDES
================================================================= */
.EasyMDEContainer .CodeMirror {
    background-color: var(--bg-main);
    color: var(--text-primary);
    border-color: var(--border-color);
    border-radius: 4px;
}

.editor-toolbar {
    background-color: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}

    .editor-toolbar button {
        color: var(--text-secondary);
        border: none;
    }

        .editor-toolbar button:hover, .editor-toolbar button.active {
            background-color: var(--bg-main);
            color: var(--text-header);
            border-color: var(--border-color);
        }

.editor-preview, .editor-preview-side {
    background-color: var(--bg-main);
}

/* =================================================================
   15. PIPELINE STUDIO WORKBENCH (3-COLUMN GRID)
================================================================= */
.pipeline-studio-container {
    display: grid;
    grid-template-columns: 320px 480px 1fr;
    height: calc(100vh - var(--global-header-height));
    width: 100vw;
}

.studio-panel {
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .studio-panel:last-child {
        border-right: none;
    }

.panel-header {
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(0,0,0,0.1);
}

    .panel-header h3 {
        font-size: 0.8rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 800;
    }

.panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
}

/* =================================================================
   16. INITIALIZATION MODAL (List Style - Sidebar Mimic)
================================================================= */
.studio-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.modal-header {
    padding: 32px;
    border-bottom: 1px solid var(--border-color);
}

    .modal-header h2 {
        color: var(--text-header);
        font-size: 1.8rem;
        margin-bottom: 8px;
    }

    .modal-header p {
        color: var(--text-secondary);
    }

.modal-body {
    padding: 24px;
    overflow-y: auto;
}

/* List-Based Selection Layout */
.tool-init-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow-y: auto;
}

.tool-init-card {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

    .tool-init-card:last-child {
        border-bottom: none;
    }

.tool-init-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: default;
    background: rgba(0,0,0,0.1);
}

    .tool-init-header strong {
        color: var(--text-header);
    }

    .tool-init-header .material-icons-outlined {
        color: var(--text-secondary);
        font-size: 20px;
    }

.tool-init-versions {
    padding: 10px 16px 10px 56px; /* Indented alignment */
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-main);
}

.v-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}

    /* Custom Styled Checkbox */
    .v-radio input[type="checkbox"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid var(--border-color);
        border-radius: 4px;
        background: var(--bg-panel);
        cursor: pointer;
        position: relative;
    }

        .v-radio input[type="checkbox"]:checked {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
        }

            .v-radio input[type="checkbox"]:checked::after {
                content: '✔';
                position: absolute;
                color: #111;
                font-size: 12px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-weight: 900;
            }

    .v-radio:hover {
        color: var(--text-header);
    }

.modal-footer {
    padding: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

.registry-config {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    justify-content: flex-start;
}

    .registry-config label {
        white-space: nowrap;
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .registry-config input {
        max-width: 300px;
    }

/* =================================================================
   17. INTERACTIVE CONFIGURATION (Inheritance & Dependencies)
================================================================= */
/* Section Headers for Column 1 */
.settings-section {
    margin-bottom: 32px;
}

.settings-section-header {
    font-size: 0.75rem;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 184, 212, 0.2);
    padding-bottom: 4px;
    font-weight: 700;
}

/* Draggable Pill Handle */
.drag-handle-pill {
    background: var(--accent-orange);
    color: #111;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(255,152,0,0.4);
}

/* =================================================================
   HORIZONTAL TAB NAVIGATION (Column 2)
================================================================= */
.tool-tabs-nav {
    display: flex;
    height: 100%;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    align-items: stretch; /* Stretch buttons to full header height */
}

    /* Scrollbar Cleanup */
    .tool-tabs-nav::-webkit-scrollbar {
        height: 3px;
    }

    .tool-tabs-nav::-webkit-scrollbar-thumb {
        background-color: var(--border-color);
        border-radius: 4px;
    }

/* Individual Tab Button */
.tool-tab-link {
    background: transparent !important; /* Force out the white background */
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0 24px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: row; /* Ensure text and dots are side-by-side */
    align-items: center;
    gap: 12px;
    height: 100%;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

    .tool-tab-link:hover {
        color: var(--text-primary);
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    .tool-tab-link.active {
        color: var(--accent-orange);
        border-bottom-color: var(--accent-orange);
        background-color: rgba(255, 152, 0, 0.05) !important;
    }

/* Drag Handle Icon inside the Tab */
.tool-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: grab;
}

    .tool-drag-handle .material-icons-outlined {
        font-size: 20px; /* Smaller icon for better fit */
    }

.tool-tab-link:hover .tool-drag-handle {
    color: var(--accent-orange);
}

/* Ensure tab links don't squash when list exceeds width */
.tool-tab-link {
    flex-shrink: 0;
}

/* Ensure tab links don't shrink */
.tool-tab-link {
    flex-shrink: 0;
}
/* High Fidelity Forms (Source: Styles.css) */
.form-group {
    margin-bottom: 0.75rem;
}

    .form-group label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.25rem;
    }

.form-control {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.9rem;
    height: 36px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 2px rgba(0, 184, 212, 0.3);
    }

    /* Inheritance Ghosting Logic */
    .form-control.is-inherited::placeholder {
        color: var(--accent-primary);
        opacity: 0.6;
        font-style: italic;
    }

/* Utilities */
.is-locked {
    pointer-events: none;
}

.is-blurred {
    filter: blur(15px);
}

.badge-platform {
    font-size: 0.7rem;
    background: rgba(0, 184, 212, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--accent-primary);
    font-weight: 900;
    border: 1px solid rgba(0, 184, 212, 0.3);
}

.monaco-editor-container {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    position: relative;
}

    /* Drag-over feedback for Monaco */
    .monaco-editor-container.drag-over::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 3px dashed var(--accent-orange);
        background: rgba(255,152,0,0.05);
        pointer-events: none;
        z-index: 10;
    }
/* =================================================================
   MINI SELECT (Pipeline Editor Header)
================================================================= */
.mini-select {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 24px 4px 10px; /* Right padding reserved for arrow */
    border-radius: 4px;
    cursor: pointer;
    /* Remove default OS styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom Arrow (Grey to match text-secondary) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23888888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 18px;
    transition: all 0.2s ease;
}

    .mini-select:hover {
        border-color: var(--text-secondary);
        color: var(--text-primary);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .mini-select:focus {
        outline: none;
        border-color: var(--accent-primary);
        color: var(--text-header);
        /* Change arrow to Accent Color on focus */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%2300B8D4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    }

/* =================================================================
   ICON BUTTON (Utility Actions)
================================================================= */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* Hover: Lighten icon and add subtle backing */
    .btn-icon:hover {
        color: var(--text-header);
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Active/Focus: Accent border to indicate interaction */
    .btn-icon:focus,
    .btn-icon:active {
        outline: none;
        color: var(--accent-orange);
        border-color: rgba(255, 152, 0, 0.3);
        background-color: rgba(255, 152, 0, 0.1);
    }

    /* Icon Sizing override to ensure fit */
    .btn-icon .material-icons-outlined {
        font-size: 20px;
    }
/* =================================================================
   20. CONDITIONAL LOGIC VISUALIZATION (Step 5)
================================================================= */
:root {
    /* ... existing vars ... */
    --accent-purple: #9C27B0; /* Conditional Logic */
}

/* The Dagger Icon */
.text-purple {
    color: var(--accent-purple) !important;
    font-weight: 900;
    cursor: help;
    font-size: 1.1em;
    vertical-align: middle;
    margin-left: 4px;
}

/* The Input Field Border */
.form-control.is-conditional {
    border-color: rgba(156, 39, 176, 0.5); /* 50% opacity purple */
    border-left-width: 3px; /* Extra visual cue on the left */
}

    .form-control.is-conditional:focus {
        border-color: var(--accent-purple);
        box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.2);
    }

/* Ensure Inheritance + Conditional works together */
.form-control.is-inherited.is-conditional::placeholder {
    color: var(--accent-purple);
    opacity: 0.7;
}
/* =================================================================
   TOOL FORM PANE VISIBILITY
================================================================= */

/* Hide all panes by default */
.tool-form-pane {
    display: none;
    height: 100%;
}

    /* Only show the pane with the 'active' class */
    .tool-form-pane.active {
        display: block;
        /* Optional: add a subtle fade-in for professional feel */
        animation: fadeIn 0.15s ease-out;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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