/**
 * CSP Utilities
 * Custom CSS classes to replace inline style attributes for CSP compliance.
 */

/* cursor */
.cursor-pointer { cursor: pointer; }

/* word-break */
.word-break-all  { word-break: break-all; }
.word-break-keep { word-break: keep-all; }

/* min-height */
.min-h-54px   { min-height: 54px; }
.min-h-60px   { min-height: 60px; }
.min-h-70px   { min-height: 70px; }
.min-h-95     { min-height: 95%; }
.min-h-150px  { min-height: 150px; }
.min-h-300px  { min-height: 300px; }
.min-h-360px  { min-height: 360px; }
.min-h-420px  { min-height: 420px; }
.min-h-1100px { min-height: 1100px; }

/* height */
.h-30px  { height: 30px; }
.h-35px  { height: 35px; }
.h-60px  { height: 60px; }
.h-91px  { height: 91px; }
.h-95    { height: 95%; }
.h-212px { height: 212px; }
.h-35pct { height: 35%; }
.h-55pct { height: 55%; }
.h-calc-vh-139 { height: calc(100vh - 139px); }

/* width */
.w-0      { width: 0%; }
.w-8pct   { width: 8%; }
.w-10pct  { width: 10%; }
.w-12pct  { width: 12%; }
.w-15pct  { width: 15%; }
.w-18pct  { width: 18%; }
.w-20pct  { width: 20%; }
.w-20pct  { width: 20%; }
.w-20px   { width: 20px; }
.w-22px   { width: 22px; }
.w-30pct  { width: 30%; }
.w-32px   { width: 32px; }
.w-34pct  { width: 34%; }
.w-35pct  { width: 35%; }
.w-40pct  { width: 40%; }
.w-42px   { width: 42px; }
.w-60pct  { width: 60%; }
.w-70px   { width: 70px; }
.w-80px   { width: 80px; }
.w-100px  { width: 100px; }
.w-120px  { width: 120px; }
.w-220px  { width: 220px; }
.w-auto   { width: auto; }

/* max-width */
.mw-130px { max-width: 130px; }
.mw-140px { max-width: 140px; }
.mw-200px { max-width: 200px; }
.mw-250px { max-width: 250px; }

/* min-width */
.min-w-0     { min-width: 0; }
.min-w-300px { min-width: 300px; }

/* line-height */
.lh-32px  { line-height: 32px; }
.lh-25em  { line-height: 2.5em; }

/* margin */
.mt-3px  { margin-top: 3px; }
.mt-70px { margin-top: 70px; }
.ms-25px { margin-left: 25px; }
.ms-80px { margin-left: 80px; }

/* padding */
.ps-38px { padding-left: 38px; }

/* overflow */
.overflow-x-hidden { overflow-x: hidden; }

/* opacity */
.opacity-30 { opacity: 0.3; }

/* display */
.d-inline-block-imp { display: inline-block; } /* only if Bootstrap d-inline-block not available */

/* align */
.align-items-start { align-items: flex-start; } /* Bootstrap 4/5 compatible */
.float-right-compat { float: right; }           /* use when float-end not available */

/* vertical-align */
.va-middle { vertical-align: middle; }

/* z-index */
.z-1051 { z-index: 1051; }
.z-2000 { z-index: 2000; }

/* top */
.top-neg-10px { top: -10px; }
.top-45pct    { top: 45%; }

/* border */
.border-dotted-ddd     { border: 1px dotted #ddd; }
.border-left-dotted    { border-left: 1px dotted #aaa; }
.border-left-solid-gray { border-left: 1px solid gray; }
.border-right-aaa      { border-right-color: #aaa !important; }
.border-width-2px      { border-width: 2px !important; }

/* color */
.text-csp-blue { color: #2f3dff; }

/* background */
.bg-csp-transparent { background-color: transparent; }

/* font-size */
.fs-085rem { font-size: 0.85rem; }
.fs-105rem { font-size: 1.05rem; }
.fs-12rem  { font-size: 1.2rem; }
.fs-16px   { font-size: 16px; }
.fs-20px   { font-size: 20px; }

/* text-align */
.text-align-initial { text-align: initial; }

/* gap */
.gap-05rem { gap: 0.5rem; }

/* width (JS string targets) */
.w-110px { width: 110px; }

/* Overlay / loading spinner patterns (used in JS-built HTML strings) */
.csp-overlay-bg {
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    z-index: 998; background: #333; opacity: 0.7;
}
.csp-overlay-modal {
    position: fixed; padding: 300px;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
}

/* Circular button patterns (flowview JS-built HTML) */
.csp-circle-btn    { border-radius: 50%; width: 25px; border-width: 2px !important; }
.csp-circle-btn-off { border-radius: 50%; border-width: 0px !important; }

/* Sortable list reset (JS-built HTML in flowlist / sysview / templist) */
.csp-list-reset { list-style: none; padding: 0; margin: 0; border-width: 0; padding: 5px; }
.csp-sortable-ul { padding-left: 0; list-style: none; }
.csp-sortable-ul-ext {
    list-style-type: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0;
    padding-left: 0;
}

/* ===== Step 4: Multi-property composite classes ===== */

/* Outline/shadow reset (collapsible panels) */
.no-outline-shadow { outline: 0 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; }

/* Label small text */
.csp-label-sm { font-size: 75%; line-height: 133%; }

/* AI icon sizing */
.csp-ai-icon { width: auto; height: 20px; margin-right: 5px; }

/* Logo sizing patterns */
.csp-logo-30     { height: 30px; object-fit: contain; }
.csp-logo-22     { height: 22px; object-fit: contain; margin-right: 10px; }
.csp-logo-25     { height: 25px; object-fit: contain; }
.csp-logo-20-dim { opacity: .8; height: 20px; }
.csp-logo-18-dim { opacity: .8; height: 18px; }

/* Form field bold label */
.csp-field-label-bold { font-weight: bold; padding: 6px 12px; }

/* Badge color swatch */
.csp-badge-swatch    { width: 30px; height: 14px; }
.csp-badge-swatch-lg { width: 30px; height: 20px; }

/* Scrollable container patterns */
.csp-scroll-400px  { overflow-y: scroll; height: 400px; }
.csp-scroll-100px  { height: 100px; overflow-y: scroll; font-size: 0.9em; }
.csp-scroll-20vh   { height: 20vh; overflow-y: scroll; }
.csp-scroll-37vh   { height: 37vh; overflow-y: scroll; }
.csp-scroll-calc-250 { max-height: calc(100vh - 250px); overflow-y: auto; }
.csp-scroll-calc-350 { max-height: calc(100vh - 350px); overflow-y: auto; }

/* Graph area border */
.csp-graph-area { border: 1px solid gray; background: #fff; }

/* Contract review page image */
.csp-review-img { width: 400px; border: 1px solid gray; }

/* Sidebar menu toggler */
.csp-menu-toggler { font-size: 16px; vertical-align: top; }

/* CSP 將 <a.nav-link> 改寫為 <button.nav-link> 後，需要清除 button 的 UA 預設樣式
   （font-family、line-height、color、vertical-align、text-align），避免鈴鐺 icon 與 navbar-badge 跑版 */
.csp-nav-link-btn {
    font: inherit;
    color: inherit;
    line-height: 1.5;
    vertical-align: baseline;
    text-align: inherit;
}

/* 通知鈴鐺 icon + badge 的 wrap：讓 badge 直接以這個 span 為定位錨點，
   不受外層 <a>/<button> 差異影響，視覺上 badge 永遠疊在 icon 右上角。
   原本 <a class="nav-link"> 結構下 badge 的位置剛好疊上去；
   改成 <button class="nav-link"> 後 layout 行為改變導致 badge 與 icon 分離，
   用這個 wrap 把錨點顯式釘在 icon 身上。 */
.csp-bell-wrap {
    position: relative;
    display: inline-block;
}

.csp-bell-wrap .navbar-badge {
    top: -4px;
    right: -8px;
}

/* Print table cell */
.csp-td-center-pad { text-align: center; padding: 10px; }

/* Inline-block with vertical alignment */
.csp-ib-vtop     { display: inline-block; vertical-align: top; }
.csp-ib-vtop-280 { display: inline-block; width: 280px; vertical-align: top; }

/* Hidden with background */
.csp-hidden-bg { display: none; background-color: #ccc; }

/* Modal layer */
.csp-layer-hidden { display: none; z-index: 999; }

/* Center spinner (absolute positioned) */
.csp-center-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }
.csp-spinner-3rem   { width: 3rem; height: 3rem; }

/* Padding combo */
.csp-pad-28-10 { padding-left: 28px; padding-top: 10px; }

/* Width for form inputs */
.w-200px { width: 200px; }

/* PDF viewer iframe */
.csp-pdf-frame { width: 100%; height: 80vh; overflow-y: auto; }