/* styles.css */

/* Dot pattern background for the flowchart viewer area */
.pattern-dot {
    background-color: #11222C;
    background-image: radial-gradient(#1E3A4C 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Sync scrolling for code editor */
#code-input {
    /* Hide text but keep cursor/selection visible */
    color: transparent;
    caret-color: #fff;
    white-space: pre;
    tab-size: 4;
}

#code-highlight {
    white-space: pre;
    tab-size: 4;
}

/* Prism Overrides for our Theme */
code[class*="language-"],
pre[class*="language-"] {
    font-family: 'JetBrains Mono', 'Menlo', monospace !important;
    text-shadow: none !important;
    background: transparent !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0A1419;
}

::-webkit-scrollbar-thumb {
    background: #1E3A4C;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00CEC9;
}

/* Mermaid graph customizations */
.mermaid svg {
    max-width: none !important;
}

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
    stroke: #00CEC9 !important;
    stroke-width: 2px !important;
    fill: #11222C !important;
}

.node.default .label {
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
}

.edgeLabel {
    background-color: #11222C !important;
    color: #FDCB6E !important;
    font-size: 12px;
}

.edgePath .path {
    stroke: #81ECEC !important;
    stroke-width: 1.5px !important;
}

.marker {
    fill: #81ECEC !important;
    stroke: #81ECEC !important;
}

/* Specific node styles assigned via classes in Mermaid */
.mermaid .start-end rect {
    border-radius: 20px !important;
    rx: 20 !important;
    ry: 20 !important;
    fill: #00CEC9 !important;
    stroke: #00CEC9 !important;
}

.mermaid .start-end .label {
    color: #0A1419 !important;
    font-weight: bold !important;
}

.mermaid .if-decision polygon {
    fill: #1E3A4C !important;
    stroke: #FDCB6E !important;
}

.mermaid .loop-node rect {
    fill: #1E3A4C !important;
    stroke: #81ECEC !important;
    stroke-dasharray: 5, 5 !important;
}