/* ============================================================================
 * ECHO demo — Veritas UI restyle
 * ============================================================================
 * Applies the design language in /veritas-ui-spec.md to the *module content
 * area only*. Everything is scoped under #demoPaneHost .container, so the ECHO
 * chrome (top nav, tab bar, left sidebar) is left exactly as it was.
 *
 * Loaded after app.css — these rules are meant to override it.
 *
 * This folder is a sibling of ../echo-demo (the original ECHO styling, kept as
 * the reference). The only differences are: this stylesheet, its <link> in
 * index.html, the page title, and the BUTTON_ROLE block in assets/app.js that
 * tags each button as primary / secondary / danger.
 *
 * Token values are the measured ones from the spec, section 3.
 * ========================================================================= */

#demoPaneHost .container {
  /* ── colour ramp (spec 3.1) ─────────────────────────────────────────── */
  --cb05: #F0F6FA;
  --cb1: #E6F0F7;
  --cb2: #D3E1EB;
  --cb3: #BED3E5;
  --cb4: #97B4CF;
  --cb5: #5B83A8;
  --cb55: #5C86AD;
  --cb6: #3D6A94;
  --cb7: #2E5880;
  --cb8: #174066;
  --cb9: #0A2D4C;

  --cs3: #C4E9FF;
  --cs4: #B8E4FF;

  --cg5: #48B56D;
  --cy5: #DEA759;
  --cr1: #FCEFF0;
  --cr5: #E0636A;
  --cr55: #ED646C;

  --v-text: #0A2D4C;
  --v-value: #16324D;
  --v-ci1: rgba(15, 47, 77, .08);
  --v-input-border: rgba(91, 131, 168, .20);

  /* ── shape (spec 3.4) ───────────────────────────────────────────────── */
  --r-md: 16px;
  --r-sm: 8px;

  --sh-card: 0 12px 24px -8px rgba(0, 64, 130, .04);
  --sh-primary: 0 10px 20px -8px rgba(91, 131, 168, .60);
  --sh-primary-hover: 0 12px 24px -8px rgba(91, 131, 168, .80);
  --sh-danger: 0 10px 20px -8px rgba(224, 99, 106, .60);
  --sh-pop: 0 -4px 12px -4px rgba(2, 49, 98, .12), 0 12px 24px -8px rgba(2, 49, 98, .16);

  /* ── surface (spec 4.1 / 3.2) ───────────────────────────────────────── */
  background: #F0F6FA;
  padding: 40px 42px 80px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 21px;
  color: var(--v-text);
}

/* ============================================================================
 * 1. Panels → white cards (spec 5.3)
 * ========================================================================= */

#demoPaneHost .container .panel {
  margin: 0 0 40px;
  padding: 32px 36px 40px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

#demoPaneHost .container .panel:last-child {
  margin-bottom: 0;
}

/* Panel heading — the spec's in-card block title: 24 / 350, with a hairline
   filling the rest of the row (spec 3.3 + 5.3). */
#demoPaneHost .container .panel .panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  margin: 0 0 28px;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 24px;
  font-style: normal;
  font-weight: 350;
  line-height: 28px;
  color: var(--v-text);
}

#demoPaneHost .container .panel .panel-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--v-ci1);
}

#demoPaneHost .container .panel .panel-title > i {
  flex: 0 0 auto;
  width: 20px;
  margin: 0;
  font-size: 18px;
  text-align: center;
  color: var(--cb5);
}

#demoPaneHost .container .panel .panel-body {
  margin: 0;
}

/* ============================================================================
 * 2. Buttons (spec 5.5)
 * ----------------------------------------------------------------------------
 * Roles are assigned at runtime by assets/app.js — see BUTTON_ROLE there. The
 * default below is the secondary (light) treatment.
 * ========================================================================= */

#demoPaneHost .container .el-button.button-def,
#demoPaneHost .container .el-button.button-def:focus,
#demoPaneHost .container .el-button.button-def:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 48px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--r-md);
  background: var(--cb05);
  color: var(--v-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#demoPaneHost .container .el-button.button-def:hover {
  background: #E9F1F7;
  border: none;
  color: var(--v-text);
  transform: none;
  box-shadow: none;
}

#demoPaneHost .container .el-button.button-def .icon {
  width: 20px;
  height: 20px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  flex: 0 0 auto;
}

#demoPaneHost .container .el-button.button-def .text {
  vertical-align: baseline;
}

/* ── primary ────────────────────────────────────────────────────────────── */
#demoPaneHost .container .el-button.button-def.vbtn-primary,
#demoPaneHost .container .el-button.button-def.vbtn-primary:focus,
#demoPaneHost .container .el-button.button-def.vbtn-primary:visited {
  background: var(--cb5);
  color: #fff;
}

#demoPaneHost .container .el-button.button-def.vbtn-primary:hover {
  background: var(--cb55);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sh-primary-hover);
}

#demoPaneHost .container .el-button.button-def.vbtn-primary .icon {
  filter: brightness(0) invert(1);
}

/* ── danger ─────────────────────────────────────────────────────────────── */
#demoPaneHost .container .el-button.button-def.vbtn-danger,
#demoPaneHost .container .el-button.button-def.vbtn-danger:focus,
#demoPaneHost .container .el-button.button-def.vbtn-danger:visited {
  background: var(--cr5);
  color: #fff;
}

#demoPaneHost .container .el-button.button-def.vbtn-danger:hover {
  background: rgb(229, 99, 107);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sh-danger);
}

#demoPaneHost .container .el-button.button-def.vbtn-danger .icon {
  filter: brightness(0) invert(1);
}

/* ── icon-only (table row actions, spec 5.5 `.btn.iconOnly`) ────────────── */
#demoPaneHost .container .el-button.button-def.vbtn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Toolbar rows keep a row rhythm rather than stacking. */
#demoPaneHost .container .text-right > .el-button + .el-button,
#demoPaneHost .container .el-row > .el-button + .el-button {
  margin-left: 12px;
}

#demoPaneHost .container .el-button + .el-button {
  margin-left: 12px;
}

/* ============================================================================
 * 3. Tables (spec 3.3 / 3.4 applied to the ECHO data grid)
 * ========================================================================= */

#demoPaneHost .container .el-table {
  background: #fff;
  border: 1px solid var(--v-ci1);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--v-value);
  font-family: inherit;
  font-size: 16px;
  box-shadow: none;
}

/* the original draws 1px edge lines that would poke past the new radius */
#demoPaneHost .container .el-table::before,
#demoPaneHost .container .el-table::after {
  display: none;
}

#demoPaneHost .container .el-table th {
  height: auto;
  background: var(--cb05);
}

/* the original pins every cell to 30px, which clips the taller inputs */
#demoPaneHost .container .el-table th,
#demoPaneHost .container .el-table td,
#demoPaneHost .container .el-table__row .cell {
  height: auto;
}

#demoPaneHost .container .el-table th.is-leaf,
#demoPaneHost .container .el-table td {
  border-bottom: 1px solid var(--v-ci1);
}

#demoPaneHost .container .el-table th > .cell {
  padding: 14px 18px;
  color: var(--v-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

#demoPaneHost .container .el-table .cell {
  padding: 12px 18px;
  font-size: 16px;
  line-height: 20px;
}

#demoPaneHost .container .el-table tr {
  background: #fff;
}

#demoPaneHost .container .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: var(--cb05);
}

#demoPaneHost .container .el-table__empty-text {
  color: var(--v-text);
  opacity: .5;
  font-size: 16px;
}

#demoPaneHost .container .el-table__expand-icon {
  color: var(--cb5);
  font-size: 14px;
}

/* the first header cell holds the expand chevron only */
#demoPaneHost .container .el-table th.el-table__expand-column > .cell {
  padding: 14px 10px;
}

/* A row's detail panel reads as a recessed tray holding a white sub-table. Its
   side padding is what indents each level, so one step per nesting level adds
   up to the next level's indent; its vertical padding is zero so the levels
   stack without a blank band between them. */
#demoPaneHost .container .el-table__expanded-cell {
  padding: 0 24px;
  background: var(--cb05);
  box-shadow: inset 0 1px 0 var(--v-ci1);
}

/* The three levels read as three bands: the ITP row is the step down from white
   and carries the weight, the inspection-point row steps down again, and the
   checkpoint rows stay white. Only a light grey and a light blue are used, so a
   long tree does not turn into a colour chart.

   Every rule below walks the direct chain down to the table's own tbody, or the
   tint would leak onto the rows nested inside its expanded panels — and would
   outrank the critical row's own background. */
#demoPaneHost .container .module .echo-table-expand > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td {
  background: var(--cb1);
}

#demoPaneHost .container .module .echo-table-expand > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td > .cell {
  font-weight: 600;
}

#demoPaneHost .container .module .checklist-l1 > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td {
  background: var(--cb05);
}

#demoPaneHost .container .module .checklist-l1 > .el-table__body-wrapper > .el-table__body > tbody > tr > td.el-table__expanded-cell {
  padding-left: 0;
}

/* The tinted levels need their own hover step: the default light-blue hover
   would land on a row that is already that colour. */
#demoPaneHost .container .module .echo-table-expand > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row:hover > td,
#demoPaneHost .container .module .checklist-l1 > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row:hover > td {
  background: var(--cb2);
}

#demoPaneHost .container .el-table__expanded-cell:hover {
  background: var(--cb05) !important;
}

#demoPaneHost .container .el-table__expanded-cell .el-table {
  box-shadow: var(--sh-card);
}

/* Row actions are bare `<div class="icon-edit">` / `<div class="icon-delete">`
   sprites rather than buttons, so they get the icon-button treatment here
   (spec 5.5 `.btn.iconOnly`, 40×40). */
#demoPaneHost .container .el-table td > .cell > [class^="icon-"] {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background-color: var(--cb05);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .2s ease;
}

#demoPaneHost .container .el-table td > .cell > [class^="icon-"] + [class^="icon-"] {
  margin-left: 8px;
}

#demoPaneHost .container .el-table td > .cell > [class^="icon-"]:hover {
  background-color: #E9F1F7;
}

#demoPaneHost .container .el-table td > .cell > div > .icon-delete {
  background-color: rgba(224, 99, 106, .10);
}

#demoPaneHost .container .el-table td > .cell > div > .icon-delete:hover {
  background-color: rgba(224, 99, 106, .20);
}

/* ============================================================================
 * 4. Form controls (spec 5.4)
 * ========================================================================= */

#demoPaneHost .container .el-input__inner {
  height: 56px;
  padding: 18px 20px;
  border: 2px solid var(--v-input-border);
  border-radius: var(--r-md);
  background: #fff;
  color: rgba(22, 50, 77, .8);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  transition: border-color .2s ease, color .2s ease;
}

#demoPaneHost .container .el-input__inner:hover {
  border-color: var(--cb5);
  color: var(--v-value);
}

#demoPaneHost .container .el-input__inner:focus {
  border-color: var(--cb5);
  color: var(--v-value);
  outline: none;
}

#demoPaneHost .container .el-input__inner::placeholder {
  color: var(--v-text);
  opacity: .5;
}

/* the original pins table selects to 25px with !important */
#demoPaneHost .container .el-select .el-input__inner {
  height: 56px !important;
  cursor: pointer;
}

#demoPaneHost .container .el-select .el-input__icon {
  color: var(--cb5);
  opacity: .4;
  font-size: 14px;
}

#demoPaneHost .container .el-input__icon {
  color: var(--cb5);
}

#demoPaneHost .container .el-input.is-disabled .el-input__inner {
  background: var(--cb05);
  border-color: var(--cb05);
}

/* date pickers get room for the calendar glyph on the left */
#demoPaneHost .container .el-date-editor .el-input__inner {
  padding-left: 50px;
}

#demoPaneHost .container .el-date-editor .el-input__prefix {
  left: 16px;
  display: flex;
  align-items: center;
  color: var(--cb5);
}

#demoPaneHost .container .el-date-editor .el-input__icon {
  line-height: 1;
  color: var(--cb5);
  opacity: .4;
}

/* checkbox (spec 5.4) */
#demoPaneHost .container .el-checkbox__inner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--v-input-border);
  border-radius: 6px;
  background: #fff;
  transition: background .2s ease, border-color .2s ease;
}

#demoPaneHost .container .el-checkbox__inner::after {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 10px;
  border-width: 2px;
}

#demoPaneHost .container .el-checkbox__input.is-checked .el-checkbox__inner,
#demoPaneHost .container .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: var(--cb5);
  border-color: var(--cb5);
}

#demoPaneHost .container .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

#demoPaneHost .container .el-checkbox:hover .el-checkbox__inner {
  border-color: var(--cb5);
}

/* form labels (spec 5.4) */
#demoPaneHost .container .el-form-item__label {
  color: var(--v-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

/* ============================================================================
 * 5. Dialogs (spec 3.4 / 5.3)
 * ========================================================================= */

#demoPaneHost .container .el-dialog {
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 24px 48px -12px rgba(0, 64, 130, .16);
  overflow: hidden;
}

#demoPaneHost .container .el-dialog__header {
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--v-ci1);
}

#demoPaneHost .container .el-dialog__title {
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: var(--v-text);
}

#demoPaneHost .container .el-dialog__body {
  padding: 32px;
  color: var(--v-value);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
}

/* app.js lifts a dialog's Close action out of the body (see decorateDialogClose)
   and into the header, which then reads as a title/action row with the button in
   the dialog's top-right corner. */
#demoPaneHost .container .el-dialog__header:has(> .el-dialog__headerbtn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#demoPaneHost .container .el-dialog__header:has(> .el-dialog__headerbtn) .el-dialog__title {
  min-width: 0;
}

#demoPaneHost .container .el-dialog__headerbtn {
  flex: 0 0 auto;
}

#demoPaneHost .container .el-dialog__close {
  color: var(--cb4);
}

#demoPaneHost .container .el-dialog__close:hover {
  color: var(--v-text);
}

/* the dialog's own panels sit flush inside the body */
#demoPaneHost .container .el-dialog__body .panel {
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* The two attachment dialogs are five columns of file metadata plus a row
   action; at the default half-width a fitted grid would clip every file name,
   so they run wider. The generator's label column is the wider of the two. */
#demoPaneHost .container #demo-dlg-itp .el-dialog {
  width: 82%;
}

#demoPaneHost .container #demo-dlg-gen .el-dialog {
  width: 84%;
}

#demoPaneHost .container .el-dialog__body .panel .panel-title {
  margin-bottom: 20px;
}

/* ============================================================================
 * 6. Toolbar row + assorted layout helpers
 * ========================================================================= */

#demoPaneHost .container > .el-form > .el-row:first-child,
#demoPaneHost .container > .el-row:first-child {
  margin-bottom: 32px;
}

#demoPaneHost .container .margin-top-10 {
  margin-top: 16px;
}

#demoPaneHost .container .panel-body > .el-button {
  margin-bottom: 20px;
}

/* ============================================================================
 * 7. Scrollbars — keep the content column visually quiet
 * ========================================================================= */

#demoPaneHost .container::-webkit-scrollbar,
#demoPaneHost .container ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#demoPaneHost .container .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
}

#demoPaneHost .container::-webkit-scrollbar-thumb,
#demoPaneHost .container ::-webkit-scrollbar-thumb {
  background: rgba(91, 131, 168, .22);
  border-radius: 8px;
}

#demoPaneHost .container::-webkit-scrollbar-thumb:hover,
#demoPaneHost .container ::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 131, 168, .40);
}

#demoPaneHost .container::-webkit-scrollbar-track,
#demoPaneHost .container ::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================================
 * 8. Pagination — the demo-only control inside the history dialogs
 * ========================================================================= */

#demoPaneHost .container .history-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--cb5);
}

#demoPaneHost .container .history-pagination__total {
  margin-right: 4px;
}

#demoPaneHost .container .history-pagination .btn-prev,
#demoPaneHost .container .history-pagination .btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--v-input-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--cb6);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#demoPaneHost .container .history-pagination .btn-prev:hover:not(:disabled),
#demoPaneHost .container .history-pagination .btn-next:hover:not(:disabled) {
  border-color: var(--cb5);
  background: var(--cb05);
  color: var(--cb8);
}

#demoPaneHost .container .history-pagination .btn-prev:disabled,
#demoPaneHost .container .history-pagination .btn-next:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#demoPaneHost .container .history-pagination .el-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#demoPaneHost .container .history-pagination .el-pager .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid var(--v-input-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--cb6);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#demoPaneHost .container .history-pagination .el-pager .number:hover {
  border-color: var(--cb5);
  color: var(--cb8);
}

#demoPaneHost .container .history-pagination .el-pager .number.active {
  border-color: var(--cb5);
  background: var(--cb5);
  color: #fff;
}

#demoPaneHost .container .history-pagination__status {
  margin-left: 4px;
}

/* ============================================================================
 * 9. Restore action — history row button, its confirmation and the toast
 * ========================================================================= */

#demoPaneHost .container .history-restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--v-input-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--cb6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#demoPaneHost .container .history-restore:hover {
  border-color: var(--cb5);
  background: var(--cb05);
  color: var(--cb8);
}

#demoPaneHost .container .history-restore .icon {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  flex: 0 0 auto;
}

/* The confirmation layer — restoring a version from a history dialog, or asking
   whether an ITP has technical documents behind it. */
#demoPaneHost .container .history-confirm {
  background: rgba(10, 45, 76, .28);
}

#demoPaneHost .container .history-confirm .el-dialog {
  width: 520px;
  max-width: calc(100% - 40px);
}

#demoPaneHost .container .history-confirm__text {
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--cb7);
}

#demoPaneHost .container .history-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#demoPaneHost .container .history-confirm__actions .el-button + .el-button {
  margin-left: 0;
}

/* the confirm button while its countdown runs */
#demoPaneHost .container .el-button.button-def.vbtn-primary:disabled {
  background: var(--cb5);
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ============================================================================
 * 10. Checklist detail — the three-level structure in the expanded row
 * ========================================================================= */

#demoPaneHost .container .checklist-detail .el-table {
  margin-bottom: 0;
}

/* Level headers step down the ramp so the nesting reads at a glance. */
#demoPaneHost .container .checklist-l2 > .el-table__header-wrapper thead div {
  background-color: #E9F1F7;
}

#demoPaneHost .container .checklist-l3 > .el-table__header-wrapper thead div {
  background-color: var(--cb05);
}

/* Every level of the tree is a grid of its own, nested in the tray the level above
   opened — so the tray's right padding stepped each deeper grid further in, and
   the Action column, which is a grid's last one, drifted left with the indent.
   The trays now carry the indent on the left only, so all four grids end on one
   right edge, and the column anchored to that edge holds a single line: the ITP
   row, its inspection points, their sub activities and their checkpoints all put
   their icons at the same x. The Action column of an ITP grid is its last real
   one — Element appends a zero-width `gutter` <th> after it. */
#demoPaneHost .container .module .el-table__expanded-cell:has(> .checklist-detail),
#demoPaneHost .container .module .el-table__expanded-cell:has(> .checklist-l2),
#demoPaneHost .container .module .el-table__expanded-cell:has(> .checklist-l3) {
  padding-right: 0;
}

#demoPaneHost .container .module .echo-table-expand:has(.checklist-detail) > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td:last-child > .cell,
#demoPaneHost .container .module .echo-table-expand:has(.checklist-detail) > .el-table__header-wrapper > table > thead > tr > th:nth-last-child(2) > .cell,
#demoPaneHost .container .module :is(.checklist-l1, .checklist-l2, .checklist-l3) td.chk-actions > .cell,
#demoPaneHost .container .module :is(.checklist-l1, .checklist-l2, .checklist-l3) > .el-table__header-wrapper > table > thead > tr > th:last-child > .cell {
  text-align: right;
}

/* Trial: the tree shows a single header band — the ITP grid's, which names the
   ITP ID — and the levels below it read by indent, numbering and weight alone.
   The inner header tables are hidden, never removed: every column label is still
   in the markup. */
#demoPaneHost .container .module :is(.checklist-l1, .checklist-l2, .checklist-l3) > .el-table__header-wrapper {
  display: none;
}

#demoPaneHost .container .risk-tag {
  display: inline-block;
  padding: 2px 10px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

#demoPaneHost .container .risk-low {
  background: rgba(72, 181, 109, .14);
  color: #2F855A;
}

#demoPaneHost .container .risk-medium {
  background: rgba(222, 167, 89, .18);
  color: #96601A;
}

#demoPaneHost .container .risk-high {
  background: rgba(224, 99, 106, .16);
  color: #B22F38;
}

/* Columns a grid has no counterpart for in its own header — the checkpoint
 * fields carried on the punch list — step out of the blue ramp into the
 * warning tint so the two groups stay apart across a wide row. */
#demoPaneHost .container .el-table__header-wrapper thead th.chk-extra > div {
  background-color: rgba(222, 167, 89, .18);
  color: #96601A;
}

#demoPaneHost .container td.chk-extra {
  background: rgba(222, 167, 89, .05);
}

#demoPaneHost .container td.chk-extra > .cell {
  color: #8A6520;
}

/* critical reads as a filled chip so it stays distinct from high's tint.

   The chip only covers one cell, so a whole row graded critical is painted end
   to end — the grade is then legible from across a wide grid without reading
   the chip. `:has()` keys off the chip itself, which keeps the row in step when
   the risk cell is edited to another level and saved. */
#demoPaneHost .container .el-table__row:has(.risk-critical) > td {
  background: #FFF5F5;
}

#demoPaneHost .container .el-table--enable-row-hover .el-table__row:has(.risk-critical):hover > td {
  background: #F8E4E6;
}

/* The risk column edits through a select, so its value can't be typed freely. */
#demoPaneHost .container .chk-select__input {
  height: 56px;
  padding: 18px 44px 18px 20px;
  border: 2px solid var(--v-input-border);
  border-radius: var(--r-md);
  background: #fff;
  color: rgba(22, 50, 77, .8);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

#demoPaneHost .container .chk-select__input:hover,
#demoPaneHost .container .chk-select__input:focus {
  border-color: var(--cb5);
  color: var(--v-value);
  outline: none;
}

#demoPaneHost .container .chk-select__caret {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -7px;
  color: var(--cb5);
  opacity: .4;
  font-size: 14px;
  pointer-events: none;
}

/* ============================================================================
 * 11. SQS visit data — inspector tabs, visit dates and their checklist
 * ========================================================================= */

#demoPaneHost .container .sqs-visit {
  margin-top: 24px;
}

/* Inspector tabs use the navbar's link language (spec 5.1): 4px accent bar that
 * scales in from the centre. */
#demoPaneHost .container .sqs-visit__people {
  display: flex;
  gap: 32px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--v-ci1);
  list-style: none;
}

#demoPaneHost .container .sqs-visit__people li {
  position: relative;
  padding: 0 2px 16px;
  color: var(--cb5);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: color .2s ease;
}

#demoPaneHost .container .sqs-visit__people li:hover,
#demoPaneHost .container .sqs-visit__people li.active {
  color: var(--v-text);
}

#demoPaneHost .container .sqs-visit__people li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #5383A8;
  transform: scaleX(0);
  transition: transform .2s ease;
}

#demoPaneHost .container .sqs-visit__people li:hover::after,
#demoPaneHost .container .sqs-visit__people li.active::after {
  transform: scaleX(1);
}

#demoPaneHost .container .sqs-visit__person {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* Visit dates: quiet rows, the current one takes the accent bar (spec 5.2). */
#demoPaneHost .container .sqs-visit__dates {
  flex: 0 0 152px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#demoPaneHost .container .sqs-visit__dates li {
  position: relative;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  color: var(--cb5);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

#demoPaneHost .container .sqs-visit__dates li:hover {
  background: var(--cb05);
  color: var(--v-text);
}

#demoPaneHost .container .sqs-visit__dates li.active {
  background: var(--cb1);
  color: var(--v-text);
}

#demoPaneHost .container .sqs-visit__dates li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #5383A8;
}

#demoPaneHost .container .sqs-visit__list {
  flex: 1 1 auto;
  min-width: 0;
}

#demoPaneHost .container .sqs-visit__check {
  width: 18px;
  height: 18px;
  accent-color: var(--cb5);
  cursor: pointer;
  vertical-align: middle;
}

/* The Visit Data grid is fluid: every column carries a share of the card
 * (table-layout: fixed, widths set by app.js), so it always ends flush with the
 * card and there is nothing to scroll sideways. That is why the frozen run and
 * its sticky offsets are gone — there is no scrolling to freeze against. */

/* The picker takes a column out of view without dropping the field; app.js also
 * gives that column's slot 0% so its share goes back to the others. The cell
 * itself stays in the grid — `display: none` would drop it from the row and the
 * cells after it would slide one column left, which under table-layout: fixed
 * lands the Action column in the hidden 0%-wide slot. */
#demoPaneHost .container .sqs-list :is(th, td).is-sqs-hidden {
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  border: 0;
}

#demoPaneHost .container .sqs-list :is(th, td).is-sqs-hidden > .cell {
  display: none;
}

/* the inline voice glyph in the visit checklist's action column */
#demoPaneHost .container .sqs-icon-voice {
  display: inline-block;
  color: var(--cb5);
  vertical-align: middle;
}

/* The toast is appended to <body>, outside the content area, so this one rule
 * cannot carry the #demoPaneHost .container prefix. */
#demoToast {
  border: 1px solid rgba(72, 181, 109, .28);
  border-radius: 8px;
  background: #fff;
  color: #2F855A;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 12px 24px -8px rgba(2, 49, 98, .18);
}

/* The same bubble carries validation failures, which read as a warning. */
#demoToast.demo-toast--error {
  border-color: rgba(224, 99, 106, .32);
  color: #B22F38;
}

/* ============================================================================
 * 12. Grid widths — every captured grid anchors to its card
 * ----------------------------------------------------------------------------
 * Each snapshot froze its grids at the pixel width that browser happened to
 * have, so at 1440 most of them overrun their card and drag sideways. Element
 * already draws them with `table-layout: fixed`, so re-cutting the colgroup is
 * the whole fix.
 *
 * The budgets below are measured, not eyeballed. Three columns have a floor no
 * percentage can undercut quietly: the chevron needs its 39px, a row-action
 * pair needs its two 40px icon buttons plus 8px between them on top of the
 * cell's 36px of padding, and a header only holds one line while its longest
 * word fits. Whatever is left over goes to the free-text columns, which
 * truncate into a hover hint instead of pushing the grid sideways.
 *
 * Header and body are separate <table>s, so both colgroups carry the widths —
 * the nested `>` chains keep a rule off the sub-grids inside an expanded row,
 * and the nth-child counts stop before Element's trailing scrollbar-gutter
 * column.
 * ========================================================================= */

/* Element breaks anywhere inside a word, which turns a squeezed "Seq No." into
   "Se / q / No.". A header is a phrase, so let it wrap between words only. */
#demoPaneHost .container .el-table th > .cell {
  word-break: normal;
}

/* A row-action cell holds nothing but icon buttons, so the whitespace the markup
   leaves between them would be laid out as spaces and widen the column by ~20px.
   Zeroing the font collapses it; the icons carry their own fixed size. Their own
   margins go too, leaving the 8px gap between buttons as the only spacing, and
   the cell's padding drops to what keeps them off the column edge — 18px a side
   would cost more than the buttons do. */
#demoPaneHost .container .el-table td > .cell:has(> [class^="icon-"]) {
  font-size: 0;
  padding-left: 8px;
  padding-right: 8px;
}

#demoPaneHost .container .el-table td > .cell:has(> [class^="icon-"]) > [class^="icon-"] {
  margin: 0;
}

#demoPaneHost .container .el-table td > .cell:has(> [class^="icon-"]) > [class^="icon-"] + [class^="icon-"] {
  margin-left: 8px;
}

/* ITP Data / Checklist cards: chevron · ITP ID · Material/Product · Tag/Item No. · row actions */
#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table {
  width: 100% !important;
}

/* An empty grid's placeholder is frozen at the same stray width, and it is what
   keeps the scrollbar alive once the table itself fits. */
#demoPaneHost .container .el-table__empty-block {
  width: 100% !important;
}

#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 4%;
}

#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 27%;
}

#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 36%;
}

#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 20%;
}

#demoPaneHost .container .echo-table-expand > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 13%;
}

/* The grid an ITP row opens onto: Seq No. · Inspection Point · Activity · Acceptance Criteria · Records Required · actions */
#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table {
  width: 100% !important;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 10%;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 16%;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 9%;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 27%;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 25%;
}

#demoPaneHost .container .el-table__expanded-cell > .el-table:not(.checklist-l2):not(.checklist-l3) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 13%;
}

/* The attachments dialogs' own grids carry their widths in the markup. */

/* Checklist level 1 — chevron · Seq No. · Inspection Point · Activity · Acceptance Criteria · Records Required · actions */
#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 4%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 10%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 16%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 10%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 27%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 20%;
}

#demoPaneHost .container .checklist-l1 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(7) {
  width: 13%;
}

/* Checklist level 2 rides inside level 1 — chevron · Sub Activity · actions */
#demoPaneHost .container .checklist-l2 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 4%;
}

#demoPaneHost .container .checklist-l2 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 83%;
}

#demoPaneHost .container .checklist-l2 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 13%;
}

/* Checklist level 3 — No. · Checkpoint · Contents · Risk Level · Risk Reason · actions */
#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 7%;
}

#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 12%;
}

#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 30%;
}

#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 13%;
}

#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 25%;
}

#demoPaneHost .container .checklist-l3 > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 13%;
}

/* NCR reads as one long reference number and five scraps; give the reference a
   real share and the rest their names back. */
#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table {
  width: 100% !important;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 6%;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 16%;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 34%;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 14%;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 17%;
}

#demoPaneHost .container .intro-hl-ncr-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 13%;
}

/* View Checklist opens a four-column grid, so the ITP-detail cut above would
   leave the checklist itself with less room than its title column. */
#demoPaneHost .container #demo-dlg-view .el-table__expanded-cell > .el-table > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 13%;
}

#demoPaneHost .container #demo-dlg-view .el-table__expanded-cell > .el-table > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 21%;
}

#demoPaneHost .container #demo-dlg-view .el-table__expanded-cell > .el-table > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 13%;
}

#demoPaneHost .container #demo-dlg-view .el-table__expanded-cell > .el-table > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 53%;
}

/* The SQS grid keeps the widths it was captured at — the columns past the frozen
   run are meant to scroll sideways. The frozen six are pinned here because their
   running sum (40 + 180 + 92 + 110 + 150 + 106) is what the sticky offsets in
   the SQS section are built from; Seq No. and Risk Level were narrower than their
   own header and are widened just enough to hold it. */
#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 40px;
}

#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 180px;
}

#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 92px;
}

#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 110px;
}

#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 150px;
}

#demoPaneHost .container .sqs-list > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 106px;
}

/* The request-history dialogs list six short columns — timestamp, name, count,
   status, a row action — and may also embed the checklist grid itself. They
   carry the same frozen pixels, so they run wide enough for both. */
#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-dialog {
  width: 64%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table {
  width: 100% !important;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(1) {
  width: 12%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(2) {
  width: 20%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(3) {
  width: 17%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(4) {
  width: 17%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(5) {
  width: 16%;
}

#demoPaneHost .container :is(#demo-dlg-history-itp, #demo-dlg-history-checklist) .el-table:not(.echo-table-expand) > :is(.el-table__header-wrapper, .el-table__body-wrapper) > table > colgroup > col:nth-child(6) {
  width: 18%;
}

/* ============================================================================
 * 13. List search — a filter box above every grid
 * ----------------------------------------------------------------------------
 * assets/app.js injects the boxes; this only dresses them. The field reuses the
 * spec's input treatment (5.4) and borrows the date editor's leading glyph slot
 * for the magnifier.
 * ========================================================================= */

#demoPaneHost .container .list-search {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 0 0 12px;
}

#demoPaneHost .container .list-search .list-search__input {
  width: 100%;
  padding-left: 50px;
}

#demoPaneHost .container .list-search .list-search__icon {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 1;
  margin-top: -8px;
  font-size: 16px;
  line-height: 1;
  color: var(--cb5);
  opacity: .4;
  pointer-events: none;
}

#demoPaneHost .container .list-search__empty {
  padding: 18px 20px;
  color: var(--cb5);
  font-size: 16px;
  text-align: center;
}

/* ============================================================================
 * 16. Checklist — latest revision, every screen and the View Checklist dialog
 * ----------------------------------------------------------------------------
 * Every band of colour comes off the rows and the trays: the levels are told
 * apart by indent, sequence number and weight alone, and the only tint left is
 * the one a critical row has earned. The hook rides whatever owns the checklist
 * that is on screen — a pane's container, or the View Checklist dialog, whose
 * grid is cloned out of the Visit pane. Section 10 still paints its tints for
 * anything the attribute does not reach.
 * ========================================================================= */

#demoPaneHost [data-checklist="latest"] .module .echo-table-expand > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td,
#demoPaneHost [data-checklist="latest"] .module .checklist-l1 > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td {
  background: #fff;
}

/* The inspection-point row reads as a heading too. */
#demoPaneHost [data-checklist="latest"] .module .checklist-l1 > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row > td > .cell {
  font-weight: 600;
}

/* One row height throughout. */
#demoPaneHost [data-checklist="latest"] .module .el-table__body tr.el-table__row > td {
  height: 46px;
}

/* Indents: ITP 0, inspection point 20, sub activity 20, checkpoint 40. The
   inspection-point tray keeps the global rule that drops its own indent. */
#demoPaneHost [data-checklist="latest"] .el-table__expanded-cell {
  padding: 0 20px;
  background: #fff;
}

#demoPaneHost [data-checklist="latest"] .el-table__expanded-cell:hover {
  background: #fff !important;
}

/* A dialog's filter rides its button row, level with the buttons instead of on a
   line of its own. */
#demoPaneHost .container .el-dialog__body > .el-row:has(> .list-search) {
  align-items: center;
  gap: 12px;
}

#demoPaneHost .container .el-dialog__body > .el-row > .list-search {
  width: 280px;
  margin: 0;
}

/* ============================================================================
 * 14. Page chrome — sticky action bar, module header, table behaviour
 * ========================================================================= */

/* A module title names the block; it is not a control any more. */
#demoPaneHost .container .panel .panel-title > i {
  display: none;
}

/* Each module sits in a row of its own, so `:last-child` was zeroing the gap
   for whichever ones happened to be alone — modules keep one uniform gap. */
#demoPaneHost .container .panel:has(> .panel-body.module) {
  margin-bottom: 40px;
}

/* The action bar is hoisted out of its captured form row to the top of the
   scroll container: inside that row it is only as tall as itself, and sticky
   cannot travel past its own containing block. The container gives up its top
   padding so the bar's resting place sits flush with that block, leaving sticky
   room to work with. */
#demoPaneHost .container.has-page-bar {
  padding-top: 0;
  padding-bottom: 24px;
}

/* One module is on screen at a time (spec option A): the tabs pick which, and
   the rest leave the flow entirely rather than sitting hidden below the fold. */
#demoPaneHost .container .panel.module-row:not(.is-active) {
  display: none;
}

#demoPaneHost .container .panel.module-row.is-active {
  margin-bottom: 0;
}

/* The tab strip under the action bar, in the navbar's own link language: quiet
   text, a 4px accent bar on the current one. */
#demoPaneHost .container .module-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--v-ci1);
}

#demoPaneHost .container .module-tab {
  position: relative;
  padding: 4px 4px 16px;
  border: none;
  background: none;
  color: var(--cb6);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  cursor: pointer;
  transition: color .2s ease;
}

#demoPaneHost .container .module-tab:hover {
  color: var(--v-text);
}

#demoPaneHost .container .module-tab.is-active {
  color: var(--cb9);
}

#demoPaneHost .container .module-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #5383A8;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .2s ease;
}

#demoPaneHost .container .module-tab.is-active::after {
  transform: scaleY(1);
}

/* The tab is the module's name, so the card does not repeat it. The element
   stays in the document — the tab strip takes its label from there. */
#demoPaneHost .container .panel.module-row > .panel-title {
  display: none;
}

#demoPaneHost .container .page-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -42px 24px;
  padding: 18px 42px;
  background: #fff;
  box-shadow: 0 10px 16px -14px rgba(2, 49, 98, .45);
}

/* The captured toolbar row is empty once its actions move into the bar, so the
   space it reserved only pushed the first module down. */
#demoPaneHost .container.has-page-bar > .el-form > .el-row:first-child,
#demoPaneHost .container.has-page-bar > .el-row:first-child {
  margin-bottom: 0;
}

#demoPaneHost .container .page-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Ordinary actions, then the commit pair, then the destructive pair. */
#demoPaneHost .container .page-bar__group {
  display: flex;
  align-items: center;
  gap: 12px;
}

#demoPaneHost .container .page-bar__group + .page-bar__group {
  padding-left: 16px;
  border-left: 1px solid var(--v-ci1);
}

/* Cancel steps back from the rest: no fill until the pointer is on it. */
#demoPaneHost .container .page-bar .el-button.button-def.vbtn-weak,
#demoPaneHost .container .page-bar .el-button.button-def.vbtn-weak:focus,
#demoPaneHost .container .page-bar .el-button.button-def.vbtn-weak:visited {
  background: transparent;
  color: var(--cb6);
  font-weight: 500;
}

#demoPaneHost .container .page-bar .el-button.button-def.vbtn-weak:hover {
  background: var(--cb05);
  color: var(--v-text);
}

/* A module reads: title, then its own actions on the left and its filter on
   the right, then the grid. */
#demoPaneHost .container .module-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Bulk expand/collapse for the tree sits with the module's own actions. */
#demoPaneHost .container .expand-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#demoPaneHost .container .module-bar__actions .expand-controls .el-button.button-def {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

#demoPaneHost .container .module-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#demoPaneHost .container .module-bar .list-search {
  margin: 0 0 0 auto;
}

/* The Columns picker sits with the filter, left of the search box. */
#demoPaneHost .container .sqs-columns {
  position: relative;
  flex: 0 0 auto;
}

#demoPaneHost .container .sqs-columns__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 264px;
  padding: 8px;
  border: 1px solid var(--v-ci1);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 18px 36px -14px rgba(0, 64, 130, .22);
}

#demoPaneHost .container .sqs-columns.is-open .sqs-columns__panel {
  display: block;
}

#demoPaneHost .container .sqs-columns__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  color: var(--v-text);
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}

#demoPaneHost .container .sqs-columns__option:hover {
  background: var(--cb05);
}

#demoPaneHost .container .sqs-columns__reset {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 8px 4px;
  border: none;
  border-top: 1px solid var(--v-ci1);
  background: none;
  color: var(--cb5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

#demoPaneHost .container .sqs-columns__reset:hover {
  color: var(--v-text);
}

/* Row actions live in their own Action column and stay visible (spec option A),
   so the two pages read the same and no operation hides behind a hover. */

/* Each module grid scrolls inside its own frame, which is what keeps its header
   in view. A native vertical scrollbar would narrow the body against the header
   it does not belong to, so it is hidden; the wheel still scrolls. */
#demoPaneHost .container .module .el-table:not(.el-table .el-table) > .el-table__body-wrapper {
  max-height: 560px;
}

#demoPaneHost .container .module .el-table > .el-table__body-wrapper::-webkit-scrollbar:vertical {
  width: 0;
}

/* Horizontal rules carry the row rhythm on their own; the vertical ones are
   noise the spec asks to drop. */
#demoPaneHost .container .module .el-table--border th,
#demoPaneHost .container .module .el-table--border td {
  border-right: none;
}

/* ============================================================================
 * 15. Attachment dialogs
 * ----------------------------------------------------------------------------
 * Both the ITP capture and the checklist generator lead with what their table
 * wants from the reader, gate their primary action on that choice, and hide
 * both answers behind hover hints. The hint bubble is shared — cells use it too,
 * so a truncated file name can still be read in full.
 * ========================================================================= */

#demoPaneHost .container .table-hint {
  margin: 0 0 10px;
  color: var(--cb6);
  font-size: 14px;
  line-height: 18px;
}

/* Both actions sit together at the bottom right, the primary one first. */
#demoPaneHost .container .dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

#demoPaneHost .container .dialog-actions .el-button + .el-button {
  margin-left: 0;
}

/* A disabled button swallows its own hover, so the guard carries both the hint
   and the click that explains why the action is not available yet. */
#demoPaneHost .container [data-action-guard] {
  display: inline-flex;
}

#demoPaneHost .container .dialog-actions .el-button:disabled {
  pointer-events: none;
}

#demoPaneHost .container [data-action-guard][data-tip]:not([data-tip=""]) {
  cursor: not-allowed;
}

#demoPaneHost .container .field-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--cb2);
  color: var(--cb7);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

#demoPaneHost .container .field-error {
  margin: 8px 0 0;
  color: var(--cr5);
  font-size: 14px;
  line-height: 18px;
}

#demoPaneHost .container .el-input.has-error .el-input__inner {
  border-color: var(--cr5);
}

/* The hint bubble lives on <body> rather than inside the element it describes:
   a grid cell sits in a scroll container, which would clip anything drawn past
   the cell's own box. Positioned from the target's rect by assets/app.js, so it
   cannot carry the #demoPaneHost .container prefix. */
#demoTip {
  position: fixed;
  z-index: 3000;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 47, 77, .08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 -4px 12px -4px rgba(2, 49, 98, .12), 0 12px 24px -8px rgba(2, 49, 98, .16);
  color: #16324D;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

#demoTip.is-visible {
  opacity: 1;
}

/* Row action in the attachment grid — the quiet outline button the history
   rows use, sized for a table cell. */
#demoPaneHost .container .preview-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--v-input-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--cb6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#demoPaneHost .container .preview-action:hover {
  border-color: var(--cb5);
  background: var(--cb05);
  color: var(--cb8);
}

#demoPaneHost .container .demo-preview .el-dialog {
  width: 62%;
}

/* View Checklist opens the checklist grid itself, so it needs room for that
   grid's own column floors rather than a reading width. */
#demoPaneHost .container #demo-dlg-view .el-dialog {
  width: 74%;
}

#demoPaneHost .container .preview-file__meta {
  margin: 0 0 20px;
  color: var(--cb6);
  font-size: 14px;
  line-height: 18px;
}

/* No viewer to embed, so the sheet stands in for the rendered file. */
#demoPaneHost .container .preview-file__sheet {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  border: 1px solid var(--v-ci1);
  border-radius: var(--r-md);
  background: var(--cb05);
  color: var(--cb5);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}