/**
 * CSP Utility Classes
 * 用於取代 inline style= 屬性，以符合 CSP style-src 規範。
 * 不使用 !important，確保 jQuery .show()/.hide() 與 CSSOM 操作的相容性。
 */

/* === display:none 替代 === */
.is-hidden { display: none; }

/* === min-height === */
.min-h-100  { min-height: 100px; }
.min-h-100pct { min-height: 100%; }
.min-h-150 { min-height: 150px; }
.min-h-300 { min-height: 300px; }
.min-h-500 { min-height: 500px; }
.min-h-600 { min-height: 600px; }

/* === width === */
.w-50px  { width: 50px; }
.w-75px  { width: 75px; }
.w-50pct { width: 50%; }
.w-90pct { width: 90%; }
.w-100px { width: 100px; }
.w-170px { width: 170px; }
.w-180px { width: 180px; }
.w-200px { width: 200px; }
.w-250px { width: 250px; }
.w-280px { width: 280px; }
.w-400px { width: 400px; }
.min-w-250 { min-width: 250px; }
.max-w-120 { max-width: 120px; }
.max-w-220 { max-width: 220px; }

/* === height === */
.h-5px   { height: 5px; }
.h-20px  { height: 20px; }
.h-100px { height: 100px; }
.h-550px { height: 550px; }
.h-30px  { height: 30px; }
.h-150px { height: 150px; }

/* === vertical-align === */
.va-sub    { vertical-align: sub; }
.va-bottom { vertical-align: bottom; }
.va-middle { vertical-align: middle; }
.va-top    { vertical-align: top; }
.va-text-bottom { vertical-align: text-bottom; }

/* === line-height === */
.lh-24 { line-height: 24px; }
.lh-25 { line-height: 25px; }
.lh-28 { line-height: 28px; }
.lh-30 { line-height: 30px; }
.lh-40 { line-height: 40px; }

/* === font-size === */
.fs-8px   { font-size: 8px; }
.fs-10px  { font-size: 10px; }
.fs-14px  { font-size: 14px; }
.fs-16px  { font-size: 16px; }
.fs-18px  { font-size: 18px; }
.fs-20px  { font-size: 20px; }
.fs-09rem { font-size: .9rem; }
.fs-1rem  { font-size: 1rem; }
.fs-11rem { font-size: 1.1rem; }
.fs-12rem { font-size: 1.2rem; }
.fs-13rem { font-size: 1.3rem; }
.fs-15rem { font-size: 1.5rem; }

/* === cursor === */
.cursor-not-allowed { cursor: not-allowed; }
.cursor-pointer     { cursor: pointer; }

/* === text / word === */
.text-underline { text-decoration: underline; }
.wb-break-all  { word-break: break-all; }
.ww-break-word { overflow-wrap: break-word; word-break: break-all; }
.ws-nowrap     { white-space: nowrap; }
.text-initial  { text-align: initial; }
.list-style-none { list-style: none; }
.resize-none   { resize: none; }

/* === margin === */
.mt-5px    { margin-top: 5px; }
.mt-100px  { margin-top: 100px; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.mt-neg-15 { margin-top: -15px; }

/* === padding === */
.px-0    { padding-left: 0; padding-right: 0; }
.p-form  { padding: .375rem .75rem; }
.p-9px   { padding: 9px; }
.p-5px   { padding: 5px; }
.py-6-0  { padding: 6px 0; }
.p-1px   { padding: 1px; }
.pt-4px  { padding-top: 4px; }
.pr-03rem { padding-right: 0.3rem; }
.pr-04rem { padding-right: 0.4rem; }
.pr-5px   { padding-right: 5px; }
.px-5-2  { padding: 2px 5px; }

/* === color === */
.text-blue-link { color: #2f3dff; }
.text-sign-alert { color: #ff2f3d; }
.text-red       { color: red; }
.text-black     { color: black; }
.text-white-custom { color: white; }
.bg-ddd         { background: #ddd; }
.bg-yellow      { background-color: yellow; }

/* === opacity === */
.opacity-80 { opacity: .8; }
.opacity-40 { opacity: .4; }

/* === border === */
.border-1px-solid { border: 1px solid; }
.border-none      { border: none; }
.border-bottom-3-ddd { border-bottom: 3px #ddd solid; }
.border-right-aaa { border-right-color: #aaa !important; }

/* === overflow === */
.overflow-initial { overflow: initial; }

/* === position helpers === */
.top-0       { top: 0; }
.top-3rem    { top: 3rem; }
.top-60px    { top: 60px; }
.top-80px    { top: 80px; }
.top-150px   { top: 150px; }
.bottom-0    { bottom: 0; }
.left-0      { left: 0; }
.z-999       { z-index: 999; }

/* === misc === */
.obj-fit-contain { object-fit: contain; }
.clear-both      { clear: both; }
.font-courier    { font-family: 'Courier New', sans-serif; }
.fw-initial      { font-weight: initial; }
.visibility-hidden { visibility: hidden; }
.w-max-content   { width: max-content; }
.jc-center       { justify-content: center; }
.m-10px-auto     { margin: 10px auto; }
.h-1068px        { height: 1068px; }
.text-ccc        { color: #ccc; }

/* === 複合樣式（常用組合） === */
.icon-sub-11rem {
    vertical-align: sub;
    font-size: 1.1rem;
}
.text-direction-rtl {
    direction: rtl;
    text-overflow: ellipsis;
}
.page-image-shadow {
    padding: 1px;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.sticky-sidebar {
    position: sticky;
    background: #f4f6f9;
    margin-top: 0;
    z-index: 10;
}
.page-label {
    position: absolute;
    padding: 2px 5px;
    bottom: 0;
    right: 0;
    font-size: 10px;
    background-color: yellow;
    font-family: 'Courier New', sans-serif;
}
.cert-deny-list {
    text-align: initial;
    list-style: none;
}
.signature-img-constraint {
    max-width: 120px;
    max-height: 70px;
    width: auto;
    height: auto;
}
.textarea-full {
    width: 100%;
    height: 100%;
    resize: none;
    padding: .375rem .75rem;
    overflow: hidden;
}
.iframe-full {
    width: 100%;
    height: 550px;
    border: none;
    display: block;
}

/* === 動態字型樣式輔助（用於 CSSOM 動態設定 font-size/padding） === */
.text-styled-nowrap {
    word-wrap: break-word;
    white-space: nowrap;
    position: relative;
}
.text-styled-wrap {
    word-wrap: break-word;
    position: relative;
}
.top-5px  { top: 5px; }
.obj-fit-cover { object-fit: cover; }
.oww-break-word { overflow-wrap: break-word; }
.overflow-hidden { overflow: hidden; }

.sticky-section-title {
    position: sticky;
    top: 80px;
    background: #f4f6f9;
    margin-top: 0;
    z-index: 10;
}
.field-type-badge {
    position: absolute;
    padding: 2px 5px;
    bottom: 0;
    right: 0;
    font-size: 10px;
    background-color: yellow;
    font-family: 'Courier New', sans-serif;
}
.text-danger-sign { color: #ff2f3d; }

/* === 複合樣式（分隔線） === */
.clone-task-divider {
    border-bottom: 3px #ddd solid;
    margin-top: -15px;
}

/* === tooltip 內部不換行 === */
.tooltip-nowrap {
    word-break: keep-all;
    white-space: nowrap;
}

/* === 合約編輯器用複合樣式 === */
.preview-thumbnail {
    margin: 10px auto;
    padding: 1px;
    width: 180px;
}
.page-container {
    margin: 0 auto;
    padding: 1px;
}
.textarea-field-full {
    width: 100%;
    height: 100%;
    resize: none;
    padding: .375rem .75rem;
    overflow: hidden;
}
.wh-full {
    width: 100%;
    height: 100%;
}
.pe-none {
    pointer-events: none;
}

/* === attachment preview 背景圖基本樣式 === */
.js-attachment-preview {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* === 轉移簽署確認 popup 內 table（取代 inline style，符合 CSP） === */
.transfer-confirm-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.transfer-confirm-table th,
.transfer-confirm-table td {
    padding: 6px 8px;
}
.transfer-confirm-table th {
    color: #666;
}
.transfer-confirm-table th.col-label {
    width: 40%;
}

/* === Contract show 頁簽署框圖預覽（取代 inline style，符合 CSP） === */
.contract-show-element-img {
    max-width: 120px;
    max-height: 70px;
    width: auto;
    height: auto;
}