/* Table sheet module — everything sheet.js draws, plus the on-page preview
   of a table item (editor.js makeEl → .el-table).

   Self-contained and collision-safe: every selector is either #pw-sheet-modal
   or .pws-*; the .el-table block is the one deliberate bridge, because the
   item lands in the editor's .el family like any other object. The palette
   comes from theme.css's variables, with the site defaults repeated so the
   file also renders standalone. */

/* ------------------------------------------------------------- modal */
#pw-sheet-modal .pws-box {
  width: min(900px, 96vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the grid area is the only scroller */
  padding: 20px 22px 18px;
}
.pws-box h3 { margin: 0 0 6px; }
.pws-hint {
  margin: 0 0 12px;
  color: var(--muted, #6b7280);
  font-size: .84rem;
  line-height: 1.5;
}
.pws-hint b { color: var(--ink-2, #3d4550); font-weight: 600; }

.pws-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.pws-btn {
  border: 1px solid var(--line-2, #d7dcdf);
  background: var(--surface, #fff);
  color: var(--ink-2, #3d4550);
  border-radius: 7px;
  padding: 5px 10px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.pws-btn:hover { border-color: var(--accent, #1f7a6d); color: var(--accent-dark, #155e54); }
/* Undo + Redo as one wrapping unit (see sheet.js build): the bar wrapped
   between them and left a lone "Redo" on its own line, easy to miss. */
.pws-pair { display: inline-flex; align-items: center; gap: 6px; }
.pws-sep {
  width: 1px;
  height: 22px;
  background: var(--line, #e6e9ea);
  margin: 0 3px;
}
.pws-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  color: var(--ink-2, #3d4550);
  white-space: nowrap;
}
.pws-check input[type=checkbox] { accent-color: var(--accent, #1f7a6d); margin: 0; }

/* Colour chips (Header / Text / Body). The shared .modal-box input[type=color]
   rule sizes colour fields at 52x36 with a bottom margin; the id-weighted
   selector below keeps these compact swatches. */
.pws-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pws-color {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .84rem;
  color: var(--ink-2, #3d4550);
  white-space: nowrap;
}
#pw-sheet-modal .pws-color input[type=color] {
  width: 26px;
  height: 22px;
  padding: 1px;
  margin: 0;
  border: 1px solid var(--line-2, #d7dcdf);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
/* The chip that opens the site's colour plate (editor page). When the plate
   is missing the button stays hidden and the native input above is the
   fallback picker. */
#pw-sheet-modal .pws-swatch {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-2, #d7dcdf);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
#pw-sheet-modal input.pws-color-native { display: none; }
/* The shared .modal-box select rule is width:100% — the size picker must not
   stretch like a form field. */
.pws-box select#pws-size {
  width: auto;
  margin: 0;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: .84rem;
}

/* -------------------------------------------------------------- grid */
/* BOLD cell rules — client asked twice ("bold the lines of coulam…" then
   "make the sheet lines bold client didnt understand it"), so the sheet's
   grid is now 2px #8a95a0: unmistakably visible, darker than the page
   table's exported hairline. The previous stop was 1px #b6bec7 (was
   #e6e9ea — near-invisible). */
.pws-grid-wrap {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: min(56vh, 520px);
  overflow: auto;
  border: 2px solid #8a95a0;
  border-radius: 8px;
  background: #fff;
  outline: none;
  overscroll-behavior: contain;
  /* No double-tap zoom inside the sheet — a double-tap must reach the cell. */
  touch-action: manipulation;
}
.pws-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.pws-grid th { font-weight: 500; }

/* Sticky row/column heads: the letters stay visible while the body
   scrolls down, the numbers while it scrolls right. */
.pws-corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  background: var(--surface-2, #f3f5f6);
  border-right: 2px solid #8a95a0;
  border-bottom: 2px solid #8a95a0;
}
.pws-colhead {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Width comes from the colgroup (the flexed 88px x weight); a fixed width
     here fought the drag. */
  padding: 5px 7px;
  background: var(--surface-2, #f3f5f6);
  border-right: 2px solid #8a95a0;
  border-bottom: 2px solid #8a95a0;
  color: var(--muted, #6b7280);
  font-size: .72rem;
  text-align: center;
  letter-spacing: .02em;
}
.pws-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  /* Tight vertical metrics so a flexed-shorter row keeps its shape; the flex
     handle below the number must stay visible, hence no overflow clipping. */
  padding: 4px 7px;
  line-height: 1;
  background: var(--surface-2, #f3f5f6);
  border-right: 2px solid #8a95a0;
  border-bottom: 2px solid #8a95a0;
  color: var(--muted, #6b7280);
  font-size: .72rem;
  text-align: center;
}
.pws-colhead.hl, .pws-rowhead.hl {
  background: var(--accent-soft, rgba(31, 122, 109, .12));
  color: var(--accent-dark, #155e54);
}
.pws-cell {
  /* No fixed width/height: the colgroup widths and the row heights the user
     flexed drive the layout (fixed values here refused to shrink below 88px /
     30px — "it works nearly one time"). position:relative anchors the
     absolutely-placed content box below it. */
  position: relative;
  padding: 0;
  border-right: 2px solid #8a95a0;
  border-bottom: 2px solid #8a95a0;
  vertical-align: middle;
  cursor: cell;
  touch-action: manipulation;
  /* Body fill from the modal's colour chips (applyPreviewColors, sheet.js). */
  background: var(--pws-grid-fill, #fff);
}
.pws-cell-in {
  /* Absolutely placed inside the cell so its text can never force the row
     taller than the height the user flexed; the cell clips instead. */
  position: absolute;
  inset: 0;
  padding: 6px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 16px;
  color: var(--pws-grid-ink, var(--ink, #1b2129));
  pointer-events: none;         /* clicks belong to the cell */
}
tr.pws-head .pws-cell { background: var(--pws-grid-head, var(--surface-2, #f3f5f6)); }
tr.pws-head .pws-cell-in { font-weight: 600; }
.pws-cell.sel { outline: 2px solid var(--accent, #1f7a6d); outline-offset: -2px; }
/* A step: a cell in a column that reaches LOWER than its left neighbour.
   The shared divider stops with the shorter column, so this cell draws its
   own left line — the ragged step then reads as a real row ending, not a
   floating "ghost line" (client: "why this ghost line came again"). The
   page preview (.el-table-seg) and the PDF close it the same way. Cell
   borders never shift the modal grid: the col widths drive the layout and
   the text sits in an absolutely-placed box. */
.pws-cell.pws-lb { border-left: 2px solid #8a95a0; }

/* The blank area under a shorter column's end: no borders, no fill — the
   taller neighbour's box simply stops. Tapping it selects that column. */
.pws-void {
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
/* Column selection — BACK for good: the client removed the sheet-side
   independence for an hour, then: "bring back one row and colum indipemded
   for sheet not for table on pdf". The letter and the column's own cells
   tint, so + Row / − Row clearly belong to one column. (Only the ON-PAGE
   grips and their guide lines stay gone.) */
.pws-colhead { cursor: pointer; }
.pws-colhead.colsel {
  background: var(--accent, #1f7a6d);
  color: #fff;
}
.pws-cell.colsel { background: var(--accent-soft, rgba(31, 122, 109, .12)); }
.pws-rowhead.colsel { background: var(--accent-soft, rgba(31, 122, 109, .12)); }

/* Row selection (the mirror of the letter): the number and the row's own
   cells tint; the Row chip in the bar paints the whole row (client: "when
   user click on each row or colum thry put colors on it too seprately"). */
.pws-rowhead.rowsel {
  background: var(--accent, #1f7a6d);
  color: #fff;
}
.pws-cell.rowsel { background: var(--accent-soft, rgba(31, 122, 109, .12)); }

/* The Cell / Row / Column paint chip — always visible; its label names the
   target of the current selection. */
#pws-rc { display: inline-flex; align-items: center; gap: 6px; }
#pws-rc[hidden] { display: none; }
/* Ringed while a WHOLE row/column is selected: THIS chip colours exactly
   that selection. (The client filled the whole table blue via the Body
   chip — the tables-wide fill — and asked "what"; the ring marks the
   right control.) */
#pws-rc.is-target {
  outline: 2px solid var(--accent, #1f7a6d);
  outline-offset: 2px;
  border-radius: 6px;
}
.pws-rc-clear {
  border: 0;
  background: none;
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.pws-rc-clear:hover { color: #c9302c; }

/* The "+" handles: one after the last column letter, one under the last row
   number (spanning the full width), Excel-style.
   The BOTTOM adder carries NO cell borders (client: "why we broken again"):
   it spans every column, so once the grid lines went bold 2px its bottom
   edge drew a straight full-width line right across the ragged gaps —
   reading as a stray "broken" line under the short columns. The real table
   edge is each column's own last-row border (the staircase). The "+" now
   floats; hover highlights it. The header's "+" keeps its cell borders
   (it sits inside the header band). */
.pws-add {
  color: var(--accent, #1f7a6d);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pws-add:hover { background: var(--accent-soft, rgba(31, 122, 109, .12)); }
.pws-rowhead.pws-add { border-right: 0; border-bottom: 0; }
.pws-addcell {
  height: 24px;
  border: 0;
  color: var(--accent, #1f7a6d);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.pws-addcell:hover { background: var(--accent-soft, rgba(31, 122, 109, .12)); }
.pws-input {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24px;
  border: 0;
  outline: none;
  padding: 5px 7px;
  font: inherit;
  font-size: 13px;
  color: var(--ink, #1b2129);
  background: #fff;
}
.pws-actions { margin-top: 14px; }

/* ------------------------------------- on-page table object (.el-table) */
/* Matches what pdfwerk/services/editor.py draws into the saved PDF: equal
   rows, equal columns, hairline grid, tinted bold header — so the sheet on
   screen and the downloaded file agree.
   overflow: VISIBLE on purpose (client: "when i select table it shows last
   border of the table but when none select it cut the end"): the rendered
   grid runs ~3px taller/wider than the stored box (browser borders sit ON
   TOP of the row weights), and overflow:hidden used to clip the last row's
   bottom and the last column's right hairline. The selection frame sat on
   that edge and MASKED the cut, so it only showed when deselected. */
.el-table { cursor: move; overflow: visible; }
.el-table .el-table-grid {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.el-table .el-table-grid th,
.el-table .el-table-grid td {
  /* max(1px, …): the hairline stays true to the PDF at 100%, but must not
     fade to nothing at phone zoom, where 0.7pt lands under one device pixel —
     that is what made an inserted empty table read as a stray dashed strip.
     (CSS math functions are fine in a border shorthand in every modern browser.) */
  border: max(1px, var(--pws-line-w, 0.7px)) solid var(--pws-line, #b6bec7);
  padding: .3em .45em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  color: inherit;
  /* Body fill per CELL, not on the wrapper: the blank area under a shorter
     column must show the page through, exactly like the exporter draws it. */
  background: var(--pws-fill, #fff);
}
.el-table .el-table-grid th {
  font-weight: 600;
  background: var(--pws-head, transparent);
}
/* A cell under a shorter column's end (uneven tables): nothing drawn — the
   page prints the sheet's exact shape, short columns simply end. */
.el-table .el-table-void {
  border: 0 !important;
  background: transparent !important;
}

/* (The on-page resize grips and their "guide lines" were removed
   2026-10-11 — client: "remove the one row colum indepemnded and guide
   lines". The placed table is a plain object again: drag it around like
   anything else, double-click to reopen the sheet.) */

/* While the sheet is open, the editor's floating object bar (z-index 140)
   sits above this modal's backdrop and stays tappable — dim it with the rest
   of the chrome behind the dialog. Everything is restored on close. */
body.pws-open .float-bar { visibility: hidden; }

@media (max-width: 640px) {
  #pw-sheet-modal .pws-box { padding: 14px 14px 12px; }
  .pws-grid-wrap { max-height: min(48vh, 420px); }
}


/* ---------------- per-column rows on the page (nested columns) -------------
   The outer cell that holds a column is invisible; the inner table fills it
   exactly, so the columns sit flush with no gaps. */
/* td.el-table-colbox, not .el-table-colbox: the shared cell rule above is
   `.el-table .el-table-grid td { vertical-align: middle }` (0,2,1), and the
   plainer selector (0,2,0) LOST to it — so every shorter column was
   vertically CENTRED against the tallest one and a ragged table's later
   columns dropped by half the height difference, their headers no longer
   lining up (the client's screenshot: "Header 3" one row below 1 and 2).
   Keeping the element in the selector lets the top alignment actually win. */
.el-table .el-table-grid td.el-table-colbox {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}
.el-table .el-table-grid-inner {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  /* NOT height:100% — the inner table also matches the `.el-table-grid` rule
     above, and stretching a SHORTER column to the full box blew its rows up
     to fill: the header cell became a tall band with its text floating in
     the middle (the client's screenshot — "Header 3" a row below 1 and 2
     with nothing under it). A column's rows keep their OWN heights and the
     column simply ends; `td.el-table-colbox { vertical-align: top }` keeps
     every column starting at the table's top edge. */
  height: auto;
}

/* One hairline per boundary: adjacent nested columns would otherwise double
   their shared edge (a channel that reads as a gap); the table's own left
   edge keeps its line. */
.el-table .el-table-grid-inner th,
.el-table .el-table-grid-inner td {
  border-left: 0;
}
/* The closing line for a ragged step: a cell that reaches below its left
   neighbour (the shared edge stopped with the shorter column) draws its own
   left line, exactly like the sheet's .pws-lb and the PDF's dividers. */
.el-table .el-table-grid-inner th.el-table-seg,
.el-table .el-table-grid-inner td.el-table-seg {
  border-left: max(1px, var(--pws-line-w, 0.7px)) solid var(--pws-line, #b6bec7);
}
.el-table .el-table-colbox:first-child .el-table-grid-inner th,
.el-table .el-table-colbox:first-child .el-table-grid-inner td {
  border-left: max(1px, var(--pws-line-w, 0.7px)) solid var(--pws-line, #b6bec7);
}