/**
 * JexHRAI Mermaid 圖表樣式
 * 
 * 提供 Mermaid 圖表的響應式樣式和主題
 * 遵循 Material Design 3 (M3) 設計規範：無框線、無陰影、與全局樣式融合
 * 
 * @version 2.0.0 (M3 Upgrade)
 * @author JexHRAI Team
 */

/* ==========================================
   Mermaid 容器樣式
   ========================================== */

/* 圖表包裝器（包含標題和容器） */
.jexhrai-mermaid-chart-wrapper {
    position: relative;
    max-width: 100%;
    margin: 20px 0;
}

/* 圖表標題樣式 */
.jexhrai-mermaid-chart-title {
    margin: 0 0 15px 0;
    font-size: var(--md-sys-typescale-title-medium);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    text-align: center;
}

/* 主要容器樣式 */
.jexhrai-mermaid-container {
    position: relative;
    max-width: 100%;
    margin: 20px 0;
    padding: 20px;
    background: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    border: none;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

/* 渲染包裝器特殊樣式（用於自動渲染） */
.jexhrai-mermaid-render-wrapper {
    position: relative;
    max-width: 100%;
    height: 100%;
    max-height: 80vh;
    margin: 10px 0;
    padding: 20px;
    background-color: var(--md-sys-color-surface-variant);
    border: none;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    cursor: pointer;
    border-radius: var(--md-sys-shape-corner-medium);
    transition: background-color 0.2s ease;
}

.jexhrai-mermaid-render-wrapper:hover {
    box-shadow: none;
    background-color: var(--md-sys-color-surface-container-low);
}

/* ==========================================
   SVG 圖表樣式
   ========================================== */

.jexhrai-mermaid-container svg,
.jexhrai-mermaid-render-wrapper svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================
   響應式設計
   ========================================== */

@media (max-width: 768px) {
    .jexhrai-mermaid-chart-wrapper {
        margin: 15px 0;
    }

    .jexhrai-mermaid-chart-title {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .jexhrai-mermaid-container,
    .jexhrai-mermaid-render-wrapper {
        padding: 10px;
        margin: 15px 0;
    }

    .jexhrai-mermaid-container svg,
    .jexhrai-mermaid-render-wrapper svg {
        min-width: 300px;
    }
}

@media (max-width: 480px) {
    .jexhrai-mermaid-chart-wrapper {
        margin: 10px 0;
    }

    .jexhrai-mermaid-chart-title {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .jexhrai-mermaid-container,
    .jexhrai-mermaid-render-wrapper {
        padding: 8px;
        margin: 10px 0;
    }

    .jexhrai-mermaid-container svg,
    .jexhrai-mermaid-render-wrapper svg {
        min-width: 250px;
    }
}

/* ==========================================
   主題樣式
   ========================================== */

/* 淺色主題 */
.jexhrai-mermaid-container.theme-light {
    background: var(--jexhrai-bg-white);
}

/* 深色主題 */
.jexhrai-mermaid-container.theme-dark {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
}

/* 高對比主題 */
.jexhrai-mermaid-container.theme-high-contrast {
    background: var(--md-sys-color-inverse-surface);
    border: 1px solid var(--md-sys-color-inverse-on-surface);
    color: var(--md-sys-color-inverse-on-surface);
}

/* ==========================================
   載入狀態
   ========================================== */

.jexhrai-mermaid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}

.jexhrai-mermaid-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--md-sys-color-outline-variant);
    border-top: 2px solid var(--md-sys-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================
   錯誤狀態
   ========================================== */

.jexhrai-mermaid-error {
    padding: 15px;
    background: var(--md-sys-color-error-container);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-error);
    text-align: center;
    margin: 10px 0;
}

/* ==========================================
   互動效果
   ========================================== */

.jexhrai-mermaid-container.interactive {
    cursor: pointer;
    transition: transform 0.2s var(--md-sys-motion-easing-standard);
}

.jexhrai-mermaid-container.interactive:hover {
    transform: scale(1.01);
}

/* ==========================================
   縮放控制
   ========================================== */

.jexhrai-mermaid-zoom-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s var(--md-sys-motion-easing-standard);
    z-index: 10;
}

.jexhrai-mermaid-container:hover .jexhrai-mermaid-zoom-controls {
    opacity: 1;
}

.jexhrai-mermaid-zoom-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    transition: all 0.2s var(--md-sys-motion-easing-standard);
    user-select: none;
    box-shadow: none;
}

.jexhrai-mermaid-zoom-btn:hover {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    transform: scale(1.05);
    box-shadow: var(--md-sys-elevation-1);
}

.jexhrai-mermaid-zoom-btn:active {
    transform: scale(0.95);
}

/* 拖曳狀態樣式（適用於所有圖表） */
.jexhrai-mermaid-container.draggable,
.jexhrai-mermaid-render-wrapper.draggable {
    cursor: grab;
}

.jexhrai-mermaid-container.draggable:active,
.jexhrai-mermaid-render-wrapper.draggable:active,
.jexhrai-mermaid-container.dragging,
.jexhrai-mermaid-render-wrapper.dragging {
    cursor: grabbing;
}

.jexhrai-mermaid-container.dragging,
.jexhrai-mermaid-render-wrapper.dragging {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 縮放狀態樣式 */
.jexhrai-mermaid-container.zoomed svg,
.jexhrai-mermaid-render-wrapper.zoomed svg {
    transition: transform 0.2s var(--md-sys-motion-easing-standard);
}

/* 拖曳時移除過渡效果以提升流暢度 */
.jexhrai-mermaid-container.dragging svg,
.jexhrai-mermaid-render-wrapper.dragging svg {
    transition: none;
}

/* 縮放等級指示 */
.jexhrai-mermaid-zoom-level {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 4px 8px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.jexhrai-mermaid-container.show-zoom-level .jexhrai-mermaid-zoom-level {
    opacity: 0.8;
}

/* 滾輪縮放提示 */
.jexhrai-mermaid-container:hover::before,
.jexhrai-mermaid-render-wrapper:hover::before {
    content: "滾動滑鼠滾輪可縮放圖表";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 6px 12px;
    border-radius: var(--md-sys-shape-corner-extra-small);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    animation: fadeInOut 3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

/* 只在首次 hover 時顯示提示 */
.jexhrai-mermaid-container.wheel-hint-shown::before,
.jexhrai-mermaid-render-wrapper.wheel-hint-shown::before {
    display: none;
}

/* ==========================================
   列印樣式
   ========================================== */

@media print {
    .jexhrai-mermaid-chart-wrapper {
        page-break-inside: avoid;
    }

    .jexhrai-mermaid-chart-title {
        color: #000 !important;
        margin-bottom: 10px !important;
    }

    .jexhrai-mermaid-container,
    .jexhrai-mermaid-render-wrapper {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .jexhrai-mermaid-zoom-controls {
        display: none !important;
    }
}

/* ==========================================
   無障礙支援
   ========================================== */

.jexhrai-mermaid-container[aria-label] {
    position: relative;
}

.jexhrai-mermaid-container[aria-label]::before {
    content: attr(aria-label);
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
}

/* ==========================================
   動畫效果
   ========================================== */

.jexhrai-mermaid-container.animated {
    animation: fadeInUp 0.6s var(--md-sys-motion-easing-standard);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ==========================================
   自定義主題
   ========================================== */

/* 藍色主題 */
.jexhrai-mermaid-container.theme-blue {
    background: linear-gradient(135deg, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-info-container) 100%);
    color: var(--md-sys-color-on-surface);
}

/* 綠色主題 */
.jexhrai-mermaid-container.theme-green {
    background: linear-gradient(135deg, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-success-container) 100%);
    color: var(--md-sys-color-on-surface);
}

/* 橙色主題 */
.jexhrai-mermaid-container.theme-orange {
    background: linear-gradient(135deg, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-warning-container) 100%);
    color: var(--md-sys-color-on-surface);
}