/* 簽名板 Modal 展開模式全域覆寫樣式
   由於 Blazor scoped CSS 無法從子元件 .signature-pad-container 往祖先
   .modal-dialog / .modal-content 套用，所以這部分規則必須放在全域 CSS。
   使用 :has() 僅在內含展開狀態的簽名容器時生效，不影響其他 Modal。 */

/* ===== 展開模式：Modal 鋪滿視窗 ===== */
.modal-dialog:has(.signature-pad-container.is-expanded) {
    max-width: 100%;
    width: 100%;
    height: 100dvh; /* dvh 動態視窗高度：扣掉手機瀏覽器網址列後真正可見高度 */
    margin: 0 !important;
}

.modal-dialog:has(.signature-pad-container.is-expanded) .modal-content {
    height: 100dvh;
    border-radius: 0;
    border: 0;
}

/* ===== Canvas 明確高度（避免 flex 鏈接失效） =====
   用 100dvh 減去 Modal chrome（header 56 + action-bar 56 + body padding 32）
   再減去表單欄位區塊。數值以桌機單列、手機雙列配合以下 .col-md-6 覆寫計算。 */
.modal-dialog:has(.signature-pad-container.is-expanded) .signature-canvas-wrapper {
    height: calc(100dvh - 340px);
    min-height: 300px;
}

/* ===== 手機：壓縮表單欄位 + 更大 Canvas =====
   強迫 col-md-6 在手機仍維持兩欄（col-6），縮小 label/input 尺寸，
   讓簽名區可以多拿回 ~120px。 */
@media (max-width: 768px) {
    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-pad-container .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-pad-container .form-label {
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }

    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-pad-container .form-control {
        padding: 0.3rem 0.5rem;
        font-size: 0.9rem;
    }

    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-pad-container .row.mb-3,
    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-pad-container > .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .modal-dialog:has(.signature-pad-container.is-expanded) .signature-canvas-wrapper {
        height: calc(100dvh - 260px);
        min-height: 360px;
    }
}