/* MOSAIC Custom Styles */

/* ── Sidebar logo and title ── */
.sidebar-brand {
    padding: 0.5rem;
}

.sidebar-logo {
    max-width: 128px;
    margin: 0 auto;
    border-radius: 50%;
}

.sidebar-brand-text {
    font-size: 1.25rem !important;
    text-align: center;
}

/* ── Code blocks: always dark (bash/terminal style) using zenburn ── */
.highlight {
    border-radius: 6px;
    border: 1px solid #2a2a2a !important;
    background: #3f3f3f !important;
    color: #DCDCCC !important;
}

.highlight pre { line-height: 125%; }
.highlight .hll { background-color: #484848 }
.highlight .c  { color: #7F9F7F; font-style: italic }  /* Comment */
.highlight .err { color: #E37170; font-weight: bold }   /* Error */
.highlight .k  { color: #EFDCBC }                       /* Keyword */
.highlight .kc { color: #DCA3A3 }                       /* Keyword.Constant */
.highlight .kd { color: #F0DFAF }                       /* Keyword.Declaration */
.highlight .kn { color: #F0DFAF }                       /* Keyword.Namespace */
.highlight .kt { color: #DFDFBF; font-weight: bold }    /* Keyword.Type */
.highlight .m  { color: #8CD0D3 }                       /* Literal.Number */
.highlight .mi { color: #8CD0D3 }                       /* Number.Integer */
.highlight .mf { color: #C0BED1 }                       /* Number.Float */
.highlight .mh { color: #8CD0D3 }                       /* Number.Hex */
.highlight .s  { color: #CC9393 }                       /* Literal.String */
.highlight .s1 { color: #CC9393 }                       /* String.Single */
.highlight .s2 { color: #CC9393 }                       /* String.Double */
.highlight .se { color: #CC9393 }                       /* String.Escape */
.highlight .sd { color: #7F9F7F }                       /* String.Doc */
.highlight .sr { color: #CC9393 }                       /* String.Regex */
.highlight .na { color: #EFEF8F }                       /* Name.Attribute */
.highlight .nb { color: #EFEF8F }                       /* Name.Builtin */
.highlight .nc { color: #EFEF8F }                       /* Name.Class */
.highlight .nf { color: #EFEF8F }                       /* Name.Function */
.highlight .fm { color: #EFEF8F }                       /* Name.Function.Magic */
.highlight .no { color: #DCA3A3 }                       /* Name.Constant */
.highlight .nd { color: #DCDCCC }                       /* Name.Decorator */
.highlight .nn { color: #DCDCCC }                       /* Name.Namespace */
.highlight .n  { color: #DCDCCC }                       /* Name */
.highlight .o  { color: #F0EFD0 }                       /* Operator */
.highlight .ow { color: #F0EFD0 }                       /* Operator.Word */
.highlight .p  { color: #F0EFD0 }                       /* Punctuation */
.highlight .cm { color: #7F9F7F; font-style: italic }   /* Comment.Multiline */
.highlight .c1 { color: #7F9F7F; font-style: italic }   /* Comment.Single */
.highlight .cp { color: #DFAF8F; font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .nt { color: #E89393; font-weight: bold }    /* Name.Tag */
.highlight .gh { color: #EFEFEF; font-weight: bold }    /* Generic.Heading */
.highlight .gu { color: #EFEFEF; font-weight: bold }    /* Generic.Subheading */
.highlight .gp { color: #ECBCBC; font-weight: bold }    /* Generic.Prompt */
.highlight .w  { color: #DCDCCC }                       /* Whitespace */

/* Architecture diagram styling */
.architecture-diagram {
    font-family: monospace;
    background-color: var(--color-background-secondary);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

/* Badge styling */
.badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 3px;
    margin-right: 0.25em;
}

.badge-paradigm {
    background-color: #7c4dff;
    color: white;
}

.badge-worker {
    background-color: #00bcd4;
    color: white;
}

/* Table improvements */
table {
    width: 100%;
}

th {
    background-color: var(--color-background-secondary);
}

/* ── Sidebar collapse/expand toggle ── */

/* Make brand area a flex row so button sits beside the logo */
.sidebar-brand {
    position: relative;
}

/* Collapse button: sits above the logo, top-right of brand area */
.sidebar-collapse-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-foreground-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.5;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.sidebar-collapse-btn:hover {
    opacity: 1;
    background: var(--color-background-secondary);
    color: var(--color-foreground-primary);
}

.sidebar-collapse-btn svg {
    width: 16px;
    height: 16px;
}


/* ── Sidebar hidden state ── */
body.sidebar-hidden .sidebar-drawer {
    display: none;
}

body.sidebar-hidden .content {
    padding-left: 104px;
}

/* Expand button: small square top-left when sidebar is collapsed */
.sidebar-expand-btn {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-background-border);
    border-radius: 6px;
    background: var(--color-background-secondary);
    color: var(--color-foreground-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.sidebar-expand-btn:hover {
    opacity: 1;
    background: var(--color-background-hover, var(--color-background-secondary));
    color: var(--color-foreground-primary);
}

.sidebar-expand-btn svg {
    width: 16px;
    height: 16px;
}

body.sidebar-hidden .sidebar-expand-btn {
    display: flex;
}

/* ── Collapsible sidebar sections ── */
.sidebar-tree p.caption {
    cursor: pointer;
    user-select: none;
}

.sidebar-tree p.caption>.caption-text {
    position: relative;
    padding-right: 1.4em;
}

.sidebar-tree p.caption>.caption-text::after {
    content: "\25BE";
    /* ▾ */
    position: absolute;
    right: 0;
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

.sidebar-tree p.caption.collapsed>.caption-text::after {
    transform: rotate(-90deg);
    /* ▸ */
}

.sidebar-tree p.caption.collapsed+ul {
    display: none;
}