/* The shared look of a table everywhere it is displayed (ADR 0070): the Table field in a
   document, its print page, quick-look and exports preview, and the tables embedded in
   rich text (documents, articles, assessments). The markup comes from
   documents/table_render.py::to_html and from document_table.js, which emits the same
   classes, so a table looks identical while it is edited and once it is read.

   The renderer carries only classes, validated custom properties on the <table>
   (--dt-border-*, --dt-header-*) and per-cell inline declarations for cell-level
   overrides; everything else is here. Editing chrome (toolbar, handles, menus) is
   documents/static/documents/css/document_table.css and is not needed to read a table. */

.doc-table-wrap {
  max-width: 100%;
  margin: 0 0 1rem;
  overflow-x: auto;
}

.doc-table {
  --dt-border-w: 1px;
  --dt-border-style: solid;
  --dt-border-c: #dee2e6;
  --dt-header-bg: transparent;
  --dt-header-color: inherit;
  --dt-zebra-bg: rgba(0, 0, 0, 0.035);
  --dt-pad-y: 0.4rem;
  --dt-pad-x: 0.6rem;
  width: 100%;
  /* a narrow screen scrolls the table inside its wrapper (WCAG 1.4.10 allows two-dimensional
     scrolling for data tables) instead of crushing every column to a sliver */
  min-width: calc(var(--dt-cols, 1) * 7.5rem);
  table-layout: fixed;
  border-collapse: collapse;
  color: inherit;
}

.doc-table--width-auto {
  width: auto;
  min-width: 0;
  table-layout: auto;
}

.doc-table > caption {
  padding: 0 0 0.4rem;
  color: inherit;
  font-weight: 600;
  text-align: left;
  caption-side: top;
}

.doc-table-wrap > .doc-table > :not(caption) > * > * {
  padding: var(--dt-pad-y) var(--dt-pad-x);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  border: 0 none transparent;
}

.doc-table-wrap > .doc-table th {
  background-color: var(--dt-header-bg);
  color: var(--dt-header-color);
  font-weight: 600;
}

/* -- row rules: which edges get the table-level border -- */

.doc-table-wrap > .doc-table--borders-all > :not(caption) > * > * {
  border: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
}

.doc-table-wrap > .doc-table--borders-horizontal > :not(caption) > * > * {
  border-top: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
  border-bottom: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
}

.doc-table-wrap > .doc-table--borders-vertical > :not(caption) > * > * {
  border-left: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
  border-right: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
}

.doc-table--borders-outer {
  border: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
}

/* inner = every edge except the ones on the outside of the table */
.doc-table-wrap > .doc-table--borders-inner > :not(caption) > * > * {
  border: var(--dt-border-w) var(--dt-border-style) var(--dt-border-c);
}

.doc-table-wrap > .doc-table--borders-inner > thead > tr:first-child > *,
.doc-table-wrap > .doc-table--borders-inner:not(:has(> thead)) > tbody > tr:first-child > * {
  border-top: 0 none transparent;
}

.doc-table-wrap > .doc-table--borders-inner > tfoot > tr:last-child > *,
.doc-table-wrap > .doc-table--borders-inner:not(:has(> tfoot)) > tbody > tr:last-child > * {
  border-bottom: 0 none transparent;
}

.doc-table-wrap > .doc-table--borders-inner > :not(caption) > tr > :first-child {
  border-left: 0 none transparent;
}

.doc-table-wrap > .doc-table--borders-inner > :not(caption) > tr > :last-child {
  border-right: 0 none transparent;
}

/* -- looks -- */

.doc-table--striped {
  --dt-header-bg: #eef1f4;
}

.doc-table--boxed {
  --dt-header-bg: #f1f3f5;
}

.doc-table-wrap > .doc-table--minimal > thead > tr > * {
  border-bottom: calc(var(--dt-border-w) * 2) var(--dt-border-style) var(--dt-border-c);
}

.doc-table-wrap > .doc-table--zebra > tbody > tr:nth-child(even) > * {
  background-color: var(--dt-zebra-bg);
}

.doc-table--density-compact {
  --dt-pad-y: 0.2rem;
  --dt-pad-x: 0.4rem;
}

.doc-table--density-roomy {
  --dt-pad-y: 0.7rem;
  --dt-pad-x: 0.9rem;
}

@media print {
  .doc-table-wrap {
    overflow: visible;
  }

  .doc-table > thead {
    display: table-header-group;
  }

  .doc-table > tfoot {
    display: table-footer-group;
  }

  .doc-table tr {
    break-inside: avoid;
  }
}

@media (forced-colors: active) {
  .doc-table-wrap > .doc-table > :not(caption) > * > *,
  .doc-table--borders-outer {
    border-color: CanvasText;
  }
}