/* Task 8726. Contract signing: the Signing tab, the prepare editor (js/contract-signing-prepare.js) and the public
   signing page (js/contract-signing-sign.js). Field boxes live in a layer sized in PDF points and scaled to the page
   (js/contract-signing-pages.js), so their sizes here are points too. */

@font-face{font-family:'CSign Dancing Script'; src:url('../vendor/signature-fonts/DancingScript.ttf') format('truetype'); font-weight:400 700; font-display:block}
@font-face{font-family:'CSign Great Vibes'; src:url('../vendor/signature-fonts/GreatVibes-Regular.ttf') format('truetype'); font-display:block}
@font-face{font-family:'CSign Allura'; src:url('../vendor/signature-fonts/Allura-Regular.ttf') format('truetype'); font-display:block}
@font-face{font-family:'CSign Sacramento'; src:url('../vendor/signature-fonts/Sacramento-Regular.ttf') format('truetype'); font-display:block}

/* ── Signing tab ── */
.csign-row{cursor:pointer}
.csign-row:hover td{background:#F5F5F5}
.csign-icon-btn{cursor:pointer}
.csign-chip{display:inline-flex; align-items:center; gap:.4rem; border:1px solid #DEE2E6; border-radius:2rem; background:#FFF; padding:.3rem .8rem; font-size:.9rem; cursor:pointer}
.csign-chip.active{border-color:var(--csign-color); box-shadow:0 0 0 2px var(--csign-color) inset}
.csign-dot{display:inline-block; width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto}
.csign-history{list-style:none; padding:0}
.csign-history li{padding:.4rem 0; border-bottom:1px solid #DEE2E6}
.csign-history-time{display:inline-block; min-width:11rem; color:#6c757d}
.csign-verify{padding:.6rem .9rem; border-radius:.3rem; border:1px solid #DEE2E6}
.csign-verify.ok{background:#E6F9F0}
.csign-verify.bad{background:#FBE9F1}
.csign-sig-thumb{max-height:2.5rem; max-width:12rem; background:#FFF; border:1px solid #DEE2E6; border-radius:.2rem}

/* ── Document pages (both editors) ── */
.csign-doc{background:#F2F3F5; padding:1rem; overflow:auto; max-height:80vh}
.csign-loading{text-align:center; padding:3rem 0}
.csign-page{position:relative; width:100%; max-width:62rem; margin:0 auto 1rem; background:#FFF; box-shadow:0 1px 4px rgba(0,0,0,.18)}
.csign-page canvas{display:block; width:100%; height:100%}
.csign-layer{position:absolute; left:0; top:0; transform-origin:0 0}
.csign-page-number{position:absolute; right:.5rem; bottom:-1.2rem; font-size:.75rem; color:#6c757d}

/* ── Prepare editor ── */
.csign-editor{display:grid; grid-template-columns:13rem minmax(0, 1fr) 16rem; min-height:30rem}
.csign-palette{border-right:1px solid #DEE2E6; padding:.75rem; display:flex; flex-direction:column; gap:.3rem; max-height:80vh; overflow:auto; position:sticky; top:.5rem; align-self:start}
.csign-palette-for{font-size:.85rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem}
.csign-tool{display:flex; align-items:center; gap:.5rem; width:100%; border:1px solid #DEE2E6; border-radius:.3rem; background:#FFF; padding:.35rem .6rem; font-size:.9rem; text-align:left; cursor:grab; user-select:none; touch-action:none}
.csign-tool:hover{border-color:#00A1BE}
.csign-tool.active{border-color:#00A1BE; background:#E6F4F8}
.csign-tool:disabled{opacity:.5; cursor:not-allowed}
.csign-tool i{width:1.1rem; text-align:center; color:#00A1BE}
.csign-props{border-left:1px solid #DEE2E6; padding:.75rem; max-height:80vh; overflow:auto; position:sticky; top:.5rem; align-self:start}
.csign-props-empty{font-size:.9rem}
.csign-editor.readonly{grid-template-columns:minmax(0, 1fr)}
.csign-editor.readonly .csign-palette, .csign-editor.readonly .csign-props{display:none}
.csign-editor.readonly .csign-field{cursor:default}
.csign-props-title{font-weight:700; margin-bottom:.75rem}
.csign-chips{display:flex; flex-wrap:wrap; gap:.3rem}
.csign-placing .csign-layer{cursor:crosshair}
.csign-field{position:absolute; border:1.5px solid var(--csign-color); background:color-mix(in srgb, var(--csign-color) 14%, transparent); border-radius:2px; cursor:move; user-select:none; touch-action:none; overflow:hidden}
.csign-field.selected{box-shadow:0 0 0 2px var(--csign-color); z-index:2}
.csign-field-label{position:absolute; left:2px; top:1px; font-size:7px; line-height:1.1; color:#27282A; white-space:nowrap; pointer-events:none}
.csign-checkbox .csign-field-label, .csign-radio .csign-field-label{display:none}
.csign-radio{border-radius:50%}
.csign-handle{position:absolute; right:0; bottom:0; width:6px; height:6px; background:var(--csign-color); cursor:nwse-resize}
.csign-ghost{position:fixed; z-index:10001; pointer-events:none; background:#FFF; border:2px solid #00A1BE; border-radius:.3rem; padding:.25rem .6rem; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.2)}
@media (max-width:991px){
.csign-editor{grid-template-columns:1fr}
.csign-palette{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid #DEE2E6; max-height:none}
.csign-palette-for{width:100%}
.csign-tool{width:auto}
.csign-props{border-left:0; border-top:1px solid #DEE2E6}
}

/* ── Public signing page ── */
.csign-public{padding:1rem 0 3rem}
.csign-public-card{max-width:48rem; margin:1rem auto}
.csign-message{border-left:3px solid #00A1BE; margin:1rem 0; padding:.25rem 1rem; white-space:pre-wrap; color:#27282A}
.csign-ersd{max-height:20rem; overflow:auto; border:1px solid #DEE2E6; border-radius:.3rem; padding:.75rem 1rem; font-size:.85rem; background:#FFF}
.csign-ersd h6{font-weight:700; margin:.75rem 0 .25rem}
.csign-ersd p{margin-bottom:.5rem}
.csign-bar{position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; background:#FFF; border-bottom:1px solid #DEE2E6; padding:.6rem 1rem; max-width:62rem; margin:0 auto}
.csign-bar-text{font-weight:600}
/* The interface header is fixed (css/interfaces/interface-base.css: 12em tall, 7em on a phone), so the bar sticks just
   below it; an embedded page has no header and the bar sticks to the top. */
body:has(.interface-header) .csign-bar{top:12.3em}
@media (max-width:576px){
body:has(.interface-header) .csign-bar{top:7em}
}
.csign-signer-host .csign-doc{max-height:none; background:transparent}
.csign-sfield{position:absolute; display:flex; align-items:center; font-size:9px; color:#27282A; border-radius:2px}
.csign-sfield.mine{background:rgba(255,204,51,.18); border:1px dashed #FFCC33}
.csign-sfield.mine.required{border:1.5px solid #CC3333}
.csign-sfield.mine.complete{border:1px solid #00CC78; background:rgba(0,204,120,.08)}
.csign-sfield.auto{background:rgba(0,161,190,.08); border:1px solid #DEE2E6; padding:0 2px; white-space:nowrap; overflow:hidden}
.csign-sfield.other{padding:0 2px; white-space:nowrap; overflow:hidden}
.csign-sfield.other img, .csign-sign-btn img{max-width:100%; max-height:100%; object-fit:contain}
.csign-sfield.flash{animation:csign-flash 1.2s ease}
@keyframes csign-flash{0%, 100%{box-shadow:none} 30%{box-shadow:0 0 0 4px rgba(0,161,190,.5)}}
.csign-sfield input[type=text], .csign-sfield input[type=date], .csign-sfield select{width:100%; height:100%; border:0; background:transparent; font-size:9px; padding:0 2px}
.csign-sfield input[type=checkbox], .csign-sfield input[type=radio]{width:100%; height:100%; margin:0}
.csign-sign-btn{width:100%; height:100%; border:0; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer}
.csign-sign-tag{display:inline-flex; align-items:center; gap:3px; background:#FFCC33; color:#27282A; font-weight:700; font-size:9px; padding:2px 6px; border-radius:2px}
.csign-modal-back{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:flex; align-items:center; justify-content:center}
.csign-modal{max-width:900px; width:90vw; max-height:94vh; overflow:auto}
.csign-tabs{display:flex; gap:.25rem; border-bottom:1px solid #DEE2E6}
.csign-tabs button{border:0; background:transparent; padding:.5rem .9rem; border-bottom:3px solid transparent; font-weight:600}
.csign-tabs button.active{border-bottom-color:#00A1BE; color:#00A1BE}
.csign-tab-body{padding:1rem 0}
.csign-style{display:flex; align-items:center; gap:1.5rem; border:1px solid #DEE2E6; border-radius:.3rem; padding:.5rem 1rem; margin-bottom:.5rem; cursor:pointer}
.csign-style.active{border-color:#00A1BE; background:#E6F4F8}
.csign-style-sig{font-size:2rem; flex:1 1 auto; white-space:nowrap; overflow:hidden}
.csign-style-ini{font-size:2rem; min-width:4rem}
.csign-pad{position:relative; border:1px solid #DEE2E6; border-radius:.3rem; background:#FFF}
.csign-pad canvas{display:block; width:100%; aspect-ratio:3 / 1; cursor:crosshair}
.csign-pad-small{max-width:15rem}
.csign-pad-small canvas{aspect-ratio:3 / 2}
.csign-pad .csign-clear{position:absolute; right:.4rem; top:.4rem}
.csign-draw-label{font-weight:700; margin-bottom:.25rem}
.csign-upload-preview img{max-height:5rem; margin-top:.5rem; border:1px solid #DEE2E6}
.csign-legal{font-size:.8rem; color:#6c757d}
body.csign-modal-open{overflow:hidden}