/* =========================================
   Testing Dashboard — 自訂樣式
   ========================================= */

/* Material Symbols 字體變數預設值 */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* 架構圖箭頭虛線（預留，目前未使用） */
.arch-path {
    stroke-dasharray: 5;
}

/* 玻璃面板效果 */
.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
}

/* 模組被選取狀態：藍色邊框 + 光暈 */
.module-selected {
    border-color: #094cb2 !important;
    box-shadow: 0 0 0 2px rgba(9, 76, 178, 0.2);
}

/* JSON 語法高亮 */
.json-key {
    color: #93c5fd; /* blue-300 */
}

.json-string {
    color: #fbbf24; /* amber-400 */
}

.json-number {
    color: #34d399; /* emerald-400 */
}

.json-boolean {
    color: #f87171; /* red-400 */
}

.json-null {
    color: #a78bfa; /* violet-400 */
}

/* 測項按鈕 — 選取狀態 */
.test-case-btn.selected {
    background-color: var(--color-surface-container-high, #e9e8e9);
    border-left-color: #094cb2;
}

/* Run Test 按鈕 — loading 狀態 */
.btn-running {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* 結果區塊 PASS/FAIL 狀態動畫 */
.result-badge-pass {
    background-color: #d1fae5; /* emerald-100 */
    color: #065f46;            /* emerald-800 */
    border-color: #a7f3d0;     /* emerald-200 */
}

.result-badge-fail {
    background-color: #ffdad6; /* error-container */
    color: #93000a;            /* on-error-container */
    border-color: rgba(186, 26, 26, 0.2); /* error/20 */
}

/* Payload 編輯器 textarea */
.payload-editor {
    min-height: 120px;
    caret-color: #93c5fd; /* blue-300，與 JSON key 同色系 */
    scrollbar-width: thin;
    scrollbar-color: #3f3f46 transparent; /* zinc-700 */
}

.payload-editor::selection {
    background-color: rgba(9, 76, 178, 0.35);
}

/* 背景紋路 */
.dot-bg {
    background-image: radial-gradient(#e3e2e3 1px, transparent 1px);
    background-size: 32px 32px;
}