/* Mermaid diagram styles for custom color scheme - FIXED VERSION */

/* Base mermaid container */
.mermaid {
    background: transparent !important;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

/* Dark theme colors - HIGH CONTRAST */
[data-md-color-scheme="slate"] {
    /* Flowchart */
    .mermaid .label {
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .node rect,
    .mermaid .node circle,
    .mermaid .node ellipse,
    .mermaid .node polygon,
    .mermaid .node path {
        fill: #0D1A1F !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .edgePath .path {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .arrowheadPath {
        fill: #00E5D2 !important;
    }
    
    .mermaid .edgeLabel {
        background: #0D1A1F !important;
        color: #FFFFFF !important;
        border: 2px solid #00E5D2 !important;
        font-weight: 600 !important;
    }
    
    /* Sequence diagram */
    .mermaid .actor {
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
        fill: #0D1A1F !important;
    }
    
    .mermaid text.actor {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .actor-line {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .messageText {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .messageLine0,
    .mermaid .messageLine1 {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .note {
        fill: #1D2E33 !important;
        stroke: #4EC9F3 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .noteText {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* Gantt chart */
    .mermaid .section {
        fill: #0D1A1F !important;
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .sectionTitle {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .task {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .taskText {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .taskTextOutside {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* Pie chart */
    .mermaid .pieTitleText {
        fill: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 16px !important;
    }
    
    .mermaid .slice {
        stroke: #0D1A1F !important;
        stroke-width: 2px !important;
    }
    
    /* Class diagram */
    .mermaid .classGroup .label {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .classGroup .classLabelBox {
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
        fill: #0D1A1F !important;
    }
    
    .mermaid .classGroup .classLabel {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .relation {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    /* State diagram */
    .mermaid .stateGroup .state-label {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .stateGroup .state-node {
        fill: #0D1A1F !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    /* ER diagram */
    .mermaid .entity {
        fill: #0D1A1F !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .entityLabel {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* Common styles for all diagrams */
    .mermaid .cluster rect {
        fill: #122326 !important;
        stroke: #4EC9F3 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .cluster-label {
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .marker {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid line {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    /* FIX FOR TSPAN - CRITICAL */
    .mermaid tspan {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* FIX FOR FOREIGNOBJECT - Light background */
    .mermaid foreignObject {
        background-color: #1D2E33 !important;
        border: 2px solid #00E5D2 !important;
        border-radius: 4px !important;
    }
    
    .mermaid foreignObject div {
        background-color: #1D2E33 !important;
        color: #FFFFFF !important;
    }
    
    .mermaid foreignObject span {
        background-color: #1D2E33 !important;
        color: #FFFFFF !important;
    }
    
    .mermaid foreignObject p {
        background-color: #1D2E33 !important;
        color: #FFFFFF !important;
    }
    
    /* FIX FOR TIMELINE SECTIONS - Better colors with contrast */
    .mermaid .timeline-section {
        fill: #1D2E33 !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid .timeline-section text {
        fill: #FFFFFF !important;
        font-weight: 700 !important;
    }
    
    /* Timeline items with better contrast */
    .mermaid .timeline-item0 {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid .timeline-item0 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item1 {
        fill: #4EC9F3 !important;
        stroke: #4EC9F3 !important;
    }
    
    .mermaid .timeline-item1 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item2 {
        fill: #00D4AA !important;
        stroke: #00D4AA !important;
    }
    
    .mermaid .timeline-item2 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item3 {
        fill: #FF6B6B !important;
        stroke: #FF6B6B !important;
    }
    
    .mermaid .timeline-item3 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item4 {
        fill: #FFA500 !important;
        stroke: #FFA500 !important;
    }
    
    .mermaid .timeline-item4 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item5 {
        fill: #9370DB !important;
        stroke: #9370DB !important;
    }
    
    .mermaid .timeline-item5 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    /* Specific improvements for text contrast */
    .mermaid .label text,
    .mermaid text {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    .mermaid .node text,
    .mermaid .cluster text {
        fill: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* Additional text elements */
    .mermaid text tspan,
    .mermaid .label tspan,
    .mermaid .node tspan,
    .mermaid .cluster tspan {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }
    
    /* Ensure all text elements are visible */
    .mermaid * text,
    .mermaid * tspan {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
    }
}

/* Light theme colors - HIGH CONTRAST */
[data-md-color-scheme="default"] {
    /* Flowchart */
    .mermaid .label {
        color: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .node rect,
    .mermaid .node circle,
    .mermaid .node ellipse,
    .mermaid .node polygon,
    .mermaid .node path {
        fill: #FFFFFF !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .edgePath .path {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .arrowheadPath {
        fill: #00E5D2 !important;
    }
    
    .mermaid .edgeLabel {
        background: #FFFFFF !important;
        color: #0D1A1F !important;
        border: 2px solid #00E5D2 !important;
        font-weight: 600 !important;
    }
    
    /* Sequence diagram */
    .mermaid .actor {
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
        fill: #FFFFFF !important;
    }
    
    .mermaid text.actor {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .actor-line {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .messageText {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .messageLine0,
    .mermaid .messageLine1 {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .note {
        fill: #E3F2FD !important;
        stroke: #4EC9F3 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .noteText {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* Gantt chart */
    .mermaid .section {
        fill: #FFFFFF !important;
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .sectionTitle {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .task {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .taskText {
        fill: #FFFFFF !important;
        font-weight: 700 !important;
    }
    
    .mermaid .taskTextOutside {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* Pie chart */
    .mermaid .pieTitleText {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
        font-size: 16px !important;
    }
    
    .mermaid .slice {
        stroke: #FFFFFF !important;
        stroke-width: 2px !important;
    }
    
    /* Class diagram */
    .mermaid .classGroup .label {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .classGroup .classLabelBox {
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
        fill: #FFFFFF !important;
    }
    
    .mermaid .classGroup .classLabel {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .relation {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    /* State diagram */
    .mermaid .stateGroup .state-label {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .stateGroup .state-node {
        fill: #FFFFFF !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    /* ER diagram */
    .mermaid .entity {
        fill: #FFFFFF !important;
        stroke: #00E5D2 !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .entityLabel {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* Common styles for all diagrams */
    .mermaid .cluster rect {
        fill: #F5F7FA !important;
        stroke: #4EC9F3 !important;
        stroke-width: 2px !important;
    }
    
    .mermaid .cluster-label {
        color: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .marker {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid line {
        stroke: #00E5D2 !important;
        stroke-width: 2px !important;
    }
    
    /* FIX FOR TSPAN - Light theme */
    .mermaid tspan {
        fill: #0D1A1F !important;
        color: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* FIX FOR FOREIGNOBJECT - Light theme */
    .mermaid foreignObject {
        background-color: #FFFFFF !important;
        border: 2px solid #00E5D2 !important;
        border-radius: 4px !important;
    }
    
    .mermaid foreignObject div {
        background-color: #FFFFFF !important;
        color: #0D1A1F !important;
    }
    
    .mermaid foreignObject span {
        background-color: #FFFFFF !important;
        color: #0D1A1F !important;
    }
    
    .mermaid foreignObject p {
        background-color: #FFFFFF !important;
        color: #0D1A1F !important;
    }
    
    /* FIX FOR TIMELINE SECTIONS - Light theme */
    .mermaid .timeline-section {
        fill: #F5F7FA !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid .timeline-section text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    /* Timeline items with better contrast */
    .mermaid .timeline-item0 {
        fill: #00E5D2 !important;
        stroke: #00E5D2 !important;
    }
    
    .mermaid .timeline-item0 text {
        fill: #FFFFFF !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item1 {
        fill: #4EC9F3 !important;
        stroke: #4EC9F3 !important;
    }
    
    .mermaid .timeline-item1 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item2 {
        fill: #00D4AA !important;
        stroke: #00D4AA !important;
    }
    
    .mermaid .timeline-item2 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item3 {
        fill: #FF6B6B !important;
        stroke: #FF6B6B !important;
    }
    
    .mermaid .timeline-item3 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item4 {
        fill: #FFA500 !important;
        stroke: #FFA500 !important;
    }
    
    .mermaid .timeline-item4 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    .mermaid .timeline-item5 {
        fill: #9370DB !important;
        stroke: #9370DB !important;
    }
    
    .mermaid .timeline-item5 text {
        fill: #0D1A1F !important;
        font-weight: 700 !important;
    }
    
    /* Specific improvements for text contrast */
    .mermaid .label text,
    .mermaid text {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    .mermaid .node text,
    .mermaid .cluster text {
        fill: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* Additional text elements */
    .mermaid text tspan,
    .mermaid .label tspan,
    .mermaid .node tspan,
    .mermaid .cluster tspan {
        fill: #0D1A1F !important;
        color: #0D1A1F !important;
        font-weight: 600 !important;
    }
    
    /* Ensure all text elements are visible */
    .mermaid * text,
    .mermaid * tspan {
        fill: #0D1A1F !important;
        color: #0D1A1F !important;
    }
}

/* Common high-contrast improvements for both themes */
.mermaid .flowchart-link {
    stroke: #00E5D2 !important;
    stroke-width: 2px !important;
}

.mermaid .titleText {
    text-anchor: middle;
    font-size: 18px;
    font-weight: 700 !important;
    fill: var(--md-default-fg-color) !important;
}

/* Ensure text is readable with high contrast */
.mermaid .label text {
    fill: currentColor !important;
    font-weight: 600 !important;
}

/* Improve contrast for better readability */
.mermaid .node .label {
    font-weight: 600 !important;
}

/* High contrast grid lines for diagrams */
.mermaid .grid .tick line {
    stroke: var(--md-default-fg-color--light) !important;
    opacity: 0.3 !important;
}

/* Universal fixes */
.mermaid tspan {
    font-weight: 600 !important;
}

[data-md-color-scheme="slate"] .mermaid tspan {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

[data-md-color-scheme="default"] .mermaid tspan {
    fill: #0D1A1F !important;
    color: #0D1A1F !important;
}

/* Universal foreignObject fixes */
[data-md-color-scheme="slate"] .mermaid foreignObject {
    background-color: #1D2E33 !important;
}

[data-md-color-scheme="slate"] .mermaid foreignObject * {
    background-color: #1D2E33 !important;
    color: #FFFFFF !important;
}

[data-md-color-scheme="default"] .mermaid foreignObject {
    background-color: #FFFFFF !important;
}

[data-md-color-scheme="default"] .mermaid foreignObject * {
    background-color: #FFFFFF !important;
    color: #0D1A1F !important;
}

/* Responsive improvements */
@media screen and (max-width: 768px) {
    .mermaid {
        padding: 0.5rem;
        margin: 0.5rem 0;
        overflow-x: auto;
    }
    
    .mermaid .label {
        font-size: 14px !important;
    }
}

/* Print styles with high contrast */
@media print {
    .mermaid {
        background: white !important;
        break-inside: avoid;
    }
    
    .mermaid .node rect,
    .mermaid .node circle {
        fill: white !important;
        stroke: black !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .label {
        color: black !important;
        font-weight: 700 !important;
    }
    
    .mermaid .edgePath .path {
        stroke: black !important;
        stroke-width: 2px !important;
    }
    
    .mermaid tspan {
        fill: black !important;
        color: black !important;
    }
}