/* SignDesk 3.5.0 – Excel editor screen (sheetui.js, sheettools.js) */
.xs-wrap { display: flex; flex-direction: column; height: calc(100vh - 56px); }
html.sd-embedded .xs-wrap { height: calc(100vh - 44px); }

/* ---------- Home toolbar: words on every button, wraps instead of scrolling ---------- */
.xs-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 3px; padding: 4px 8px; background: #fafbfc; border-bottom: 1px solid var(--line); }
.xs-grp { display: contents; }
.xs-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 3px; }
.xs-grp:first-child .xs-sep { display: none; }
.xs-toggle { margin-left: auto; border-color: var(--line); background: #fff; color: var(--green-dark); }
.xs-ribbon.xs-few > .xs-grp > :not(.xs-p1) { display: none; }
.xs-ribbon.xs-few .xs-sep { display: none; }
.xs-b { border: 1px solid transparent; background: transparent; color: var(--ink); border-radius: 6px; padding: 3px 6px; font: 600 12.5px/1.25 "Segoe UI", Roboto, Arial, sans-serif; cursor: pointer; white-space: nowrap; min-height: 27px; }
.xs-b:hover { background: #fff; border-color: #c9d2dc; }
.xs-b:disabled { opacity: .45; cursor: default; background: transparent; border-color: transparent; }
.xs-b.on { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.xs-b:focus-visible, .xs-sel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.xs-b-sm { padding: 3px 7px; min-height: 26px; font-size: 12px; }
.xs-b-primary { background: var(--green); color: #fff; border-color: var(--green); }
.xs-b-primary:hover { background: var(--green-dark); }
.xs-bold { font-weight: 800; }
.xs-ital { font-style: italic; }
.xs-und { text-decoration: underline; }
.xs-split { display: inline-flex; align-items: stretch; border-radius: 6px; }
.xs-split .xs-split-a { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 5px; }
.xs-split .xs-split-b { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 4px 5px; font-size: 11px; }
.xs-split:hover .xs-b { border-color: #c9d2dc; background: #fff; }
.xs-colbtn { position: relative; }
.xs-colbtn::after { content: ''; position: absolute; left: 7px; right: 5px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--bar, #ff0); }
.xs-sel { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 3px 4px; font: 12.5px "Segoe UI", Roboto, Arial, sans-serif; min-height: 28px; color: var(--ink); }
.xs-font { width: 112px; }
.xs-size { width: 56px; }
.xs-fmt { width: 138px; }
.xs-ribbon.xs-editing .xs-grp { opacity: .85; }

/* ---------- formula bar ---------- */
.xs-fxbar { display: flex; align-items: flex-start; gap: 6px; padding: 5px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.xs-ref { width: 92px !important; font-weight: 700; text-align: center; padding: 4px 6px !important; height: 30px; }
.xs-fx-lbl { font: italic 700 15px Georgia, serif; color: var(--muted); padding: 5px 2px 0; user-select: none; }
.xs-fx-wrap { position: relative; flex: 1; min-width: 160px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.xs-fx-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px rgba(11,93,75,.15); }
.xs-fx, .xs-fx-mir { position: absolute; inset: 0; margin: 0; border: 0; padding: 5px 8px; font: 13.5px/20px Consolas, "Cascadia Mono", "Courier New", monospace; white-space: pre; overflow: hidden; box-sizing: border-box; letter-spacing: 0; tab-size: 4; }
.xs-fx { color: transparent; caret-color: #111; background: transparent; resize: none; outline: none; z-index: 1; width: 100%; height: 100%; }
.xs-fx::placeholder { color: #8a95a3; }
.xs-fx::selection, .xs-ced::selection { background: rgba(26,95,208,.25); color: transparent; }
.xs-fx-mir { color: #1d2433; pointer-events: none; }

/* ---------- the sheet ---------- */
.xs-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: #fff; }
.xs-top { flex: none; overflow: hidden; position: relative; background: #f3f5f7; border-bottom: 1px solid #c9d1d9; }
.xs-top.xs-frozen { border-bottom: 2px solid #9aa6b2; }
.xs-main { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; background: #fff; overscroll-behavior: contain; }
.xs-sizer { position: relative; }
.xs-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.xs-over { z-index: 3; }
.xs-places { z-index: 6; }
.xs-rowhdr { position: sticky; left: 0; z-index: 5; background: #f3f5f7; border-right: 1px solid #c9d1d9; }
.xs-corner { position: sticky; left: 0; z-index: 7; background: #f3f5f7; border-right: 1px solid #c9d1d9; cursor: cell; }
.xs-cornerbox { border-bottom: 1px solid #c9d1d9; background: linear-gradient(135deg, transparent 60%, #c9d1d9 60%, #c9d1d9 66%, transparent 66%); }
.xs-ch, .xs-rhd { position: absolute; box-sizing: border-box; color: #5f6b7a; font: 600 11px/1 "Segoe UI", Arial, sans-serif; display: flex; align-items: center; justify-content: center; user-select: none; cursor: default; background: #f3f5f7; }
.xs-ch { top: 0; border-right: 1px solid #d7dde3; border-bottom: 1px solid #c9d1d9; cursor: s-resize; }
.xs-rhd { left: 0; width: 100%; border-bottom: 1px solid #d7dde3; cursor: e-resize; }
.xs-ch.on, .xs-rhd.on { background: #dcebe6; color: var(--green-dark); }
.xs-ch.on { box-shadow: inset 0 -2px 0 var(--green); }
.xs-rhd.on { box-shadow: inset -2px 0 0 var(--green); }
.xs-ch.all, .xs-rhd.all { background: #bcd9cf; }
.xs-ch::after { content: ''; position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 1; }
.xs-rhd::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; z-index: 1; }
.xc { position: absolute; box-sizing: border-box; display: flex; overflow: hidden; padding: 0 3px; border-right: 1px solid #e1e5e9; border-bottom: 1px solid #e1e5e9; white-space: pre; line-height: 1.2; color: #000; }
.xs-nogrid .xc { border-right-color: transparent; border-bottom-color: transparent; }
.xc > span { min-width: 0; white-space: pre; overflow: hidden; text-overflow: clip; }
.xc[data-spill] > span { overflow: visible; }
.xc.xw { white-space: normal; }
.xc.xw > span { white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; }
.xc.xs-spilled { border-right-color: transparent; }
.xc.xs-editing > span { visibility: hidden; }
.xs-img { position: absolute; pointer-events: none; }

/* selection, fill handle, copy outline, coloured formula references */
.xs-box { position: absolute; box-sizing: border-box; pointer-events: none; }
.xs-range { background: rgba(11,93,75,.11); }
.xs-selbox { border: 2px solid var(--green); margin: -1px 0 0 -1px; }
.xs-active { border: 1px solid rgba(11,93,75,.55); }
.xs-fh { width: 9px; height: 9px; margin: -6px 0 0 -6px; background: var(--green); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--green); cursor: crosshair; pointer-events: auto; z-index: 7; touch-action: none; border-radius: 1px; }
.xs-fh::before { content: ''; position: absolute; inset: -6px; }
@media (pointer: coarse) { .xs-fh { width: 16px; height: 16px; margin: -9px 0 0 -9px; border-radius: 50%; } .xs-fh::before { inset: -10px; } }
.xs-copy { border: 2px dashed var(--green); margin: -1px 0 0 -1px; animation: xs-ants 1s linear infinite; }
@keyframes xs-ants { 50% { border-color: #2fb38f; } }
.xs-fillprev { border: 2px dashed #505a66; margin: -1px 0 0 -1px; }
.xs-refbox { --rc: #1a5fd0; border: 2px solid var(--rc); background: color-mix(in srgb, var(--rc) 9%, transparent); margin: -1px 0 0 -1px; z-index: 2; }
.xs-refbox.xs-pointing { border-style: dashed; animation: xs-ants 1s linear infinite; }

/* typing in a cell */
.xs-cedbox { position: absolute; z-index: 9; background: #fff; box-shadow: 0 0 0 2px var(--green), 0 4px 14px rgba(16,24,40,.18); }
.xs-ced, .xs-ced-mir { position: absolute; inset: 0; margin: 0; border: 0; padding: 1px 3px 0; font: inherit; line-height: 1.25; white-space: pre; overflow: hidden; box-sizing: border-box; letter-spacing: 0; tab-size: 4; }
.xs-ced { color: transparent; caret-color: #111; background: transparent; resize: none; outline: none; z-index: 1; width: 100%; height: 100%; }
.xs-ced-mir { color: #111; pointer-events: none; }
.xs-tip { position: fixed; z-index: 2000; max-width: 380px; background: #a3261d; color: #fff; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; }
.xs-tip::before { content: ''; position: absolute; left: 18px; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #a3261d; }

/* column / row resize */
.xs-resize-line { position: absolute; z-index: 40; pointer-events: none; }
.xs-resize-line.v { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--green); }
.xs-resize-line.h { left: 0; right: 0; height: 0; border-top: 1px dashed var(--green); }
.xs-resize-tip { position: absolute; z-index: 41; background: #1d2433; color: #fff; font-size: 11.5px; padding: 2px 7px; border-radius: 4px; pointer-events: none; white-space: nowrap; }

/* filter buttons */
.xs-fbtn { width: 17px; height: 17px; padding: 0; border: 1px solid #8f99a4; border-radius: 3px; background: #fff; font-size: 10px; line-height: 14px; color: #333; cursor: pointer; pointer-events: auto; z-index: 6; }
.xs-fbtn.on { background: #dcebe6; border-color: var(--green); color: var(--green-dark); }
.xs-filter { width: 260px; }
.xs-flist { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; padding: 4px; }
.xs-fi { display: flex; gap: 6px; align-items: center; padding: 3px 4px; font-size: 13px; cursor: pointer; }
.xs-frow { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- bottom bar: sheet tabs, Sum / Average / Count, zoom ---------- */
.xs-foot { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 3px 10px; background: #eef1f4; border-top: 1px solid var(--line); min-height: 36px; }
.xs-tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 55%; scrollbar-width: thin; }
.xs-tab { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 13px; border-radius: 6px 6px 0 0; }
.xs-tab.on { background: #fff; color: var(--green); border-bottom-color: var(--green); }
.xs-tabin { width: 150px; padding: 4px 6px; border: 1px solid var(--green); border-radius: 4px; font: inherit; font-size: 13px; }
.xs-sheetbtns { display: inline-flex; gap: 2px; }
.xs-flex { flex: 1; }
.xs-stat { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink); }
.xs-stat .xs-sum { font-weight: 700; }
.xs-footnote { font-size: 12px; color: var(--green-dark); }
.xs-footnote:empty { display: none; }
.xs-zoom { display: inline-flex; align-items: center; gap: 3px; }
.xs-zoom .btn-sm { padding: 3px 8px; font-size: 12px; }
@media (max-width: 600px) { .xs-zoom { display: none; } .xs-fxbar { padding: 4px 6px; } .xs-ref { width: 70px !important; } .xs-foot { padding: 2px 6px; } }
.xs-zv { min-width: 40px; text-align: center; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- menus and panels ---------- */
.xs-menu { position: fixed; z-index: 1500; background: #fff; border: 1px solid #cfd6de; border-radius: 9px; box-shadow: 0 10px 28px rgba(16,24,40,.2); padding: 5px; min-width: 190px; max-height: 72vh; overflow: auto; font-size: 13px; }
.xs-mi { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.xs-mi:hover, .xs-mi:focus-visible { background: var(--green-soft); outline: none; }
.xs-mi.on { font-weight: 700; }
.xs-mic { width: 22px; text-align: center; color: var(--muted); font-weight: 700; }
.xs-mhead { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .3px; }
.xs-msep { height: 1px; background: var(--line); margin: 4px 2px; }
.xs-dot { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); flex: none; }
.xs-dot.none { background: linear-gradient(135deg, #fff 45%, #d33 45%, #d33 55%, #fff 55%); }
.xs-panel { position: absolute; top: 6px; right: 22px; z-index: 50; width: 330px; background: #fff; border: 1px solid #cfd6de; border-radius: 10px; box-shadow: 0 10px 28px rgba(16,24,40,.2); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.xs-ptitle { display: flex; justify-content: space-between; align-items: center; }
.xs-prow { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; }
.xs-prow .field { padding: 5px 8px; }
.xs-pchk { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.xs-pbtns { display: flex; gap: 5px; flex-wrap: wrap; }
.xs-pbtns .xs-b { border-color: var(--line); background: #fff; }
.xs-pbtns .xs-b-primary { background: var(--green); color: #fff; }
.xs-pmsg { color: var(--muted); min-height: 1.2em; }

/* ---------- signatures, stamps, dates placed on the sheet ---------- */
.xs-place { position: absolute; z-index: 6; cursor: move; touch-action: none; outline: 1px dashed rgba(11,93,75,.7); outline-offset: 1px; }
.xs-place img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.xs-place.on { outline: 2px solid var(--green); }
.xs-place.on .ptools { display: flex; }
.xs-place.on .x { display: block; }
.xs-place.on .rz { display: block; }
.xs-inkrow { position: absolute; left: 0; top: calc(100% + 6px); display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 4px 6px; box-shadow: 0 4px 12px rgba(16,24,40,.15); white-space: nowrap; z-index: 9; cursor: default; }
.xs-inklbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.xs-inkrow .sd-swatches { flex-wrap: nowrap; }

@media (max-width: 900px) {
  .xs-ribbon { padding: 4px 6px; }
  .xs-font { width: 108px; }
  .xs-fmt { width: 128px; }
  .xs-tabs { max-width: 100%; }
}