/* Mermaid Diagram Text Size Override Styles */
/* This file ensures all Mermaid diagram text is large and readable */

/* Global text size override for all SVG text in Mermaid diagrams */
.mermaid svg text,
.mermaid-container svg text,
pre.mermaid svg text {
    font-size: 18px !important;
    font-weight: 600 !important;
    fill: #333333 !important;
    stroke: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Timeline diagram specific overrides */
.mermaid svg g[id*="timeline"] text,
.mermaid svg .timeline text,
.mermaid-container svg g[id*="timeline"] text,
.mermaid-container svg .timeline text {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Flowchart node labels */
.mermaid svg .nodeLabel,
.mermaid svg g.label text,
.mermaid-container svg .nodeLabel,
.mermaid-container svg g.label text {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Edge labels in flowcharts */
.mermaid svg .edgeLabel text,
.mermaid-container svg .edgeLabel text {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* HTML labels (foreignObject) */
.mermaid svg foreignObject div,
.mermaid-container svg foreignObject div,
.mermaid svg foreignObject span,
.mermaid-container svg foreignObject span {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    line-height: 1.4 !important;
}

/* Ensure tspan elements inherit the size */
.mermaid svg tspan,
.mermaid-container svg tspan {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Override any inline styles with higher specificity */
.mermaid svg text[style*="font-size"],
.mermaid-container svg text[style*="font-size"] {
    font-size: 18px !important;
}

/* Specific for timeline year/date text */
.mermaid svg text.timeline-title,
.mermaid-container svg text.timeline-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Timeline event text */
.mermaid svg text.timeline-event,
.mermaid-container svg text.timeline-event {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Make sure containers have enough height */
.mermaid,
.mermaid-container,
pre.mermaid {
    min-height: 400px !important;
}

/* Prevent text cutoff by ensuring adequate SVG size */
.mermaid svg,
.mermaid-container svg {
    min-height: 350px !important;
    overflow: visible !important;
}

/* Override transform scales that might make text smaller */
.mermaid svg text,
.mermaid-container svg text {
    transform-origin: center !important;
}

/* Force specific sizes for different diagram types */

/* Graph LR/TD/TB/BT text */
.mermaid svg g.nodes text,
.mermaid-container svg g.nodes text {
    font-size: 18px !important;
}

/* Sequence diagram text */
.mermaid svg .actor text,
.mermaid svg .messageText,
.mermaid-container svg .actor text,
.mermaid-container svg .messageText {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Class diagram text */
.mermaid svg .classTitle,
.mermaid svg .classText,
.mermaid-container svg .classTitle,
.mermaid-container svg .classText {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* State diagram text */
.mermaid svg .stateText,
.mermaid svg .statediagram-state text,
.mermaid-container svg .stateText,
.mermaid-container svg .statediagram-state text {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Gantt chart text */
.mermaid svg .taskText,
.mermaid svg .taskTextOutsideRight,
.mermaid svg .taskTextOutsideLeft,
.mermaid-container svg .taskText,
.mermaid-container svg .taskTextOutsideRight,
.mermaid-container svg .taskTextOutsideLeft {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Override any media queries that might affect text size */
@media screen and (max-width: 768px) {
    .mermaid svg text,
    .mermaid-container svg text {
        font-size: 16px !important;
    }
}

@media screen and (min-width: 1200px) {
    .mermaid svg text,
    .mermaid-container svg text {
        font-size: 20px !important;
    }
    
    .mermaid svg g[id*="timeline"] text,
    .mermaid-container svg g[id*="timeline"] text {
        font-size: 22px !important;
    }
}