.mud-dialog-container {
    z-index: 11112 !important;
}

.mud-popover {
    z-index: 11113 !important;
}

.setting-dialog {
    border-radius: 8px !important;
}

.mud-dialog-width-sm {
    width: 400px !important;
    margin: 0 1rem;
}

.mud-dialog-title {
    border-bottom: 1px solid rgba(var(--black-color), .1);
    padding: .5rem 1rem !important;
}

.mud-dialog .mud-dialog-content {
    padding: 1rem !important;
    margin: 0 !important;
}

.mud-dialog-actions {
    border-top: 1px solid rgba(var(--black-color), .1);
    padding: .75rem 1rem !important;
}

.mud-dialog-content .mud-typography.title {
    position: relative;
    margin-top: .75rem;
    margin-bottom: -.75rem;
    z-index: 1;
}

.mud-dialog-content .mud-typography.title::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 0px;
    border-top: 1px dashed rgba(var(--black-color), .4);
    top: 50%;
    transform: translateY(-50%);
    left: 1%;
    z-index: -1;
}

.mud-dialog-content .mud-typography.title::after {
    content: "";
    position: absolute;
    width: 30%;
    border-top: 1px dashed rgba(var(--black-color), .4);
    top: 50%;
    transform: translateY(-50%);
    right: 1%;
    z-index: -1;
}


/* 預設對話框樣式 —— 這條規則是「對話框為什麼變窄」的唯一權威解釋，請先讀完再改。

   它用 !important 加上 6 個 :not() 白名單，把所有沒列名的對話框寬度**寫死成 440px**。
   後果是 DialogOptions.MaxWidth 在本宿主完全無效：C# 那邊寫 MaxWidth.Medium/Large 都不會生效，
   因為這條選擇器的特異性（1 class + 6 個 :not() 參數 = 7）贏過一般的 .xxx-dialog.mud-dialog（2）。
   全 repo 有 75 處設定 MaxWidth，只有 9 個 razor 檔掛了白名單 class，其餘的 MaxWidth 都是死設定。

   要讓對話框變寬，只有兩條路：
   (a) 在元件的 MudDialog Class 掛上既有白名單之一（.wide-dialog = 95vw/上限 1400px 最常用）；
   (b) 新增專屬 class —— 但必須同時把它加進下面的 :not() 鏈，否則一樣被夾住。
       放到共用的 custom-styles.css 而不改這條鏈是無效的（特異性輸）。 */

.mud-dialog:not(.flow-rule-dialog):not(.two-column-dialog):not(.sampling-rule-dialog):not(.process-template-dialog):not(.product-edit-dialog):not(.wide-dialog):not(.medium-dialog) {
    width: 440px !important;
    max-width: 440px !important;
    border-radius: 32px !important;
}

/* ========================================
   中寬對話框樣式 (Medium Dialog)
   適用於單欄設定表單：440px 放不下（欄位標籤折行、兩三欄的小表格會橫向溢位），
   但 .wide-dialog 的 1400px 又讓一欄的表單攤成一條細線。
   ⚠ 新增這類 class 時，上面那條 :not() 鏈一定要同步加，否則照樣被夾成 440px。
   ======================================== */

.medium-dialog.mud-dialog {
    width: 90vw !important;
    max-width: 640px !important;
    border-radius: 16px !important;
}

.medium-dialog .mud-dialog-content {
    max-height: 78vh !important;
    overflow-y: auto !important;
}

/* ========================================
   寬版對話框樣式 (Wide Dialog)
   適用於複雜編輯器，例如訊息流程事件編輯
   ======================================== */

.wide-dialog.mud-dialog {
    width: 95vw !important;
    max-width: 1400px !important;
    border-radius: 16px !important;
}

.wide-dialog .mud-dialog-content {
    max-height: 82vh !important;
    overflow-y: auto !important;
}

@media (max-width: 959.98px) {
    .wide-dialog.mud-dialog {
        width: 98vw !important;
        max-width: 100% !important;
        margin: 0.25rem !important;
        border-radius: 8px !important;
    }
}

/* ========================================
   產品編輯對話框樣式
   Product Edit Dialog
   ======================================== */

.product-edit-dialog.mud-dialog {
    width: 95vw !important;
    max-width: 1000px !important;
    border-radius: 16px !important;
}

/* 流程節點卡片樣式 */
.route-node-card {
    transition: all 0.2s ease;
    border-radius: 12px !important;
}

.route-node-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* 流程節點容器 */
.route-nodes-container {
    overflow-x: auto;
    padding: 8px 0;
}

.form-dialog .dialog-header {
    padding: 8px 12px 8px 24px;
    background-color: rgb(243, 243, 244);
}

.form-dialog .dialog-content {
    padding: 1rem 1.5rem 1.5rem !important;
    margin-top: 8px !important;
    overflow: auto;
    max-height: 70vh;
}

.form-dialog .mud-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.form-dialog .mud-dialog-actions {
    padding: 0 !important;
}

.form-dialog .dialog-action {
    padding: 1rem 1.5rem !important;
    width: 100%;
    border-top: 1px solid rgba(var(--black-color), .1);
}

/* ========================================
   雙欄對話框樣式 (Two-Column Dialog)
   適用於 TagProperties 和 ComProperties 編輯
   支援跨平台響應式設計
   ======================================== */

/* 雙欄對話框基本樣式 */
.two-column-dialog.mud-dialog {
    width: 90vw !important;
    max-width: 900px !important;
}

/* 行動端調整 (螢幕寬度 < 600px) */
@media (max-width: 599.98px) {
    .two-column-dialog.mud-dialog {
        width: 95vw !important;
        max-width: 100% !important;
        margin: 0.5rem !important;
    }
    
    .two-column-dialog .mud-dialog-content {
        max-height: 75vh !important;
        overflow-y: auto !important;
    }
}

/* 平板端調整 (600px - 959px) */
@media (min-width: 600px) and (max-width: 959.98px) {
    .two-column-dialog.mud-dialog {
        width: 85vw !important;
        max-width: 700px !important;
    }
}

/* 桌面端調整 (≥ 960px) */
@media (min-width: 960px) {
    .two-column-dialog.mud-dialog {
        width: 80vw !important;
        max-width: 900px !important;
    }
}

/* 確保對話框內容可滾動 */
.two-column-dialog .mud-dialog-content {
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* ========================================
   Properties 欄位間距樣式
   適用於 TagProperties 和 ComProperties
   ======================================== */

/* Properties 區域內的 MudGrid 間距 */
.two-column-dialog .mud-grid {
    row-gap: 0.5rem;
}

/* Properties 區域內的 MudItem 間距 */
.two-column-dialog .mud-grid > .mud-grid-item {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* 數值欄位和下拉選單的間距 */
.two-column-dialog .mud-input-control {
    margin-bottom: 0.5rem;
}

/* Checkbox 的間距 */
.two-column-dialog .mud-checkbox {
    margin-bottom: 0.5rem;
}

/* Switch 的間距 */
.two-column-dialog .mud-switch {
    margin-bottom: 0.5rem;
}

/* Switch Label 文字換行與溢出處理 */
.two-column-dialog .mud-switch .mud-switch-label {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Switch 容器樣式 - 確保 label 文字正確換行且不溢出 */
.two-column-dialog .switch-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.two-column-dialog .switch-container .mud-switch {
    flex: 1;
    min-width: 0; /* 允許 flex 子元素縮小 */
}

/* 群組 Paper 的間距 */
.two-column-dialog .mud-paper {
    margin-bottom: 0.75rem;
}

/* 群組標題的間距 */
.two-column-dialog .mud-paper > .mud-typography {
    margin-bottom: 0.75rem;
}

/* 群組內部的 MudGrid 間距 */
.two-column-dialog .mud-paper .mud-grid {
    row-gap: 0.75rem;
}

/* ========================================
   Radio Button 響應式樣式
   ======================================== */

/* Radio Group 響應式容器 */
.radio-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* Radio 項目樣式 */
.radio-group-responsive .radio-item {
    flex: 0 0 auto;
    min-width: fit-content;
}

/* 行動端：垂直排列 */
@media (max-width: 599.98px) {
    .radio-group-responsive {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .radio-group-responsive .radio-item {
        width: 100%;
    }
}

/* 小螢幕：允許換行 */
@media (min-width: 600px) and (max-width: 959.98px) {
    .radio-group-responsive {
        flex-wrap: wrap;
    }
}

/* ========================================
   Flow Rule Dialog 樣式
   流程規則編輯器 - 需要更大的寬度
   ======================================== */

.flow-rule-dialog.mud-dialog {
    width: 95vw !important;
    max-width: 1400px !important;
    border-radius: 16px !important;
}

.flow-rule-dialog .mud-dialog-content {
    padding: 1.5rem !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

.flow-rule-dialog .mud-dialog-title {
    padding: 1rem 1.5rem !important;
}

.flow-rule-dialog .mud-dialog-actions {
    padding: 1rem 1.5rem !important;
}

/* 行動端調整 */
@media (max-width: 959.98px) {
    .flow-rule-dialog.mud-dialog {
        width: 98vw !important;
        max-width: 100% !important;
        margin: 0.25rem !important;
        border-radius: 8px !important;
    }

    .flow-rule-dialog .mud-dialog-content {
        padding: 1rem !important;
        max-height: 85vh !important;
    }
}

/* ========================================
   Sampling Rule Dialog 樣式
   取樣規則列表對話框
   ======================================== */

.sampling-rule-dialog.mud-dialog {
    width: 90vw !important;
    max-width: 1200px !important;
    border-radius: 16px !important;
}

.sampling-rule-dialog .mud-dialog-content {
    padding: 1.5rem !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}