/* =========================================================
   Tables that hold still, and pagination that does not grow.

   Two things moved around before this file existed:

   * Column widths were decided by whatever happened to be on the page you
     were looking at, so paging from one screen to the next re-laid the whole
     table out -- a long "Person, Company, Adverse Media" on page 2 shoved
     every other column sideways.
   * The pagination control was as wide as its contents. On page 1 of 10 it
     read `Previous 1 2 3 … 10 Next`; on page 6 of 43 it read
     `Previous 1 … 4 5 6 7 8 … 43 Next` and got noticeably longer, so the row
     under every table changed shape as you used it.

   Columns are measured once from real content and then frozen (tables.js), so
   the layout is decided by the data rather than by the page you are on, and
   anything too long for its column is cut with an ellipsis and shown in full
   on hover. The pagination always draws the same number of slots at the same
   widths, so its width is a constant.
   ========================================================= */

:root {
  --pg-slot: 34px;   /* a page number or an ellipsis */
  --pg-edge: 74px;   /* Previous / Next */
  --pg-gap: 4px;
  --pg-slots: 7;     /* the ceiling; tables.js sets the real count per control */
}

/* ---------------------------------------------------------- frozen columns */

table.cdivo-fixed {
  table-layout: fixed;
  width: 100%;
}

/* Used for a moment while the columns are measured: nowrap on, so each column
   reports what it actually needs, and no clipping yet so nothing is hidden
   from the measurement. */
table.cdivo-measuring th,
table.cdivo-measuring td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Anything that does not fit its column is cut rather than widening it.
   tables.js adds .tt-clip only to cells it is safe on -- it skips cells that
   span columns (the usage log's expanded "Screened for" panel is one) and
   cells that contain a nested table. */
table.cdivo-fixed th,
table.cdivo-fixed td.tt-clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A cut cell is worth hovering, so say so. */
table.cdivo-fixed td.tt-clip.is-cut,
table.cdivo-fixed th.is-cut {
  cursor: help;
}

/* ---------------------------------------------- the scroll, sideways

   The wrapper tables.js puts round a bare table -- five pages put their table
   straight into the card -- and Bootstrap's own on the pages that have one.
   Both have to scroll horizontally, or a table wider than the screen is a
   table with its last columns permanently off the edge. */
.amlpro-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.amlpro-wrap::-webkit-scrollbar { height: 9px; }
.amlpro-wrap::-webkit-scrollbar-thumb {
  background: var(--c-line, #dfe5ec); border-radius: 99px; }

/* On a phone a table almost always needs the scroll, and a column cut to an
   ellipsis inside a scrolling table is being cut for no reason -- there is
   room to the right. Let it show what it holds.

   Which means the TABLE has to grow, not just the cells: with the fixed
   layout and 100% width kept, a cell that showed everything drew it over the
   columns beside it (search results under 768px: names, sources and topics
   on top of one another, up to 550px over). So on a phone the columns size to
   what they hold, the table is as wide as that, and the wrapper scrolls. The
   per-column max-widths the pages set inline give way for the same reason. */
@media (max-width: 767.98px) {
  table.cdivo-fixed { table-layout: auto; width: max-content; min-width: 100%; }
  table.cdivo-fixed th,
  table.cdivo-fixed td.tt-clip { overflow: visible; text-overflow: clip; max-width: none !important; }
}

/* ------------------------------------------------- the scroll, inside */

/* tables.js sets the height; this is what makes it a scrollport and keeps the
   header visible while the rows move under it. Without the sticky header an
   internal scroll is worse than a long page -- you lose the column names two
   rows in. */
.cdivo-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;   /* stop the page taking over at the ends */
}
.cdivo-scroll thead th,
.cdivo-scroll thead td {
  position: sticky;
  top: 0;
  z-index: 2;
}
/* A sticky header needs its own background or the rows show through it.
   Which background, though, is the table's business and not this rule's. It
   used to paint every sticky header the card colour, and a table whose header
   is deliberately coloured -- the results tables carry a navy one with white
   text -- turned white the moment it grew tall enough to need an inner
   scroll. White text on white: the column names vanished, and only after a
   search, because an empty table never scrolls.

   So the colour comes from a token the table may set on its header row, and
   falls back to the card only when nothing has an opinion. */
.cdivo-scroll thead th { background: var(--tbl-head-bg, var(--c-card, #fff)); }
[data-mode="dark"] .cdivo-scroll thead th {
  background: var(--tbl-head-bg, var(--c-card, #161d26)); }

/* A thin scrollbar so the table does not lose a column to it. */
.cdivo-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.cdivo-scroll::-webkit-scrollbar-thumb {
  background: var(--c-line, #dfe5ec);
  border-radius: 99px;
  border: 2px solid var(--c-card, #fff);
}
.cdivo-scroll:hover::-webkit-scrollbar-thumb {
  background: var(--c-ink-faint, #b8c4d2);
}

/* ------------------------------------------------------------- the tooltip */

/* Fixed, and on <body> rather than inside the cell: every one of these tables
   sits in a .table-responsive, which is overflow:auto, and a tooltip
   positioned inside that gets clipped at the edge of the scroll box. */
.amlpro-tip {
  position: fixed;
  z-index: 2147483000;
  max-width: min(460px, calc(100vw - 32px));
  padding: 7px 10px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(16, 40, 70, 0.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  overflow-wrap: anywhere;
}
.amlpro-tip.on { opacity: 1; }

[data-mode="dark"] .amlpro-tip {
  background: #eef3f9;
  color: #0e1a27;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------- the pagination */

/* The three-thirds Bootstrap row underneath a table cannot give the buttons a
   fixed width -- a third of the container is whatever the container happens to
   be. The row becomes a flex line instead: the two labels take what they need,
   the buttons take exactly their fixed width. */
.pagination-container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0;
}
.pagination-container > .row > [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* "Showing 1 to 10 of 100" takes the slack, so the buttons stay hard right. */
.pagination-container > .row > [class*="col-"]:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}

.pagination {
  width: calc(var(--pg-edge) * 2 + var(--pg-slot) * var(--pg-slots)
              + var(--pg-gap) * (var(--pg-slots) + 1));
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
}

/* Every slot is the same size whether it holds 1 or 43, so the control cannot
   change width as you page through one table. How MANY slots there are comes
   from the page count, which tables.js writes to --pg-slots on the element. */
.pagination > li > a,
.pagination > li > span {
  width: var(--pg-slot);
  min-width: var(--pg-slot);
  padding: 0 2px;
  overflow: hidden;
}
.pagination > li:first-child > a,
.pagination > li:last-child > a {
  width: var(--pg-edge);
  min-width: var(--pg-edge);
  padding: 0 6px;
}

/* There used to be a `.pg-ph` placeholder here: an invisible slot that held
   the width open so a three-page table drew the same control as a forty-page
   one. It did stop the width changing, but it did it by padding every small
   table out to seven slots, which left a run of empty space with Next
   stranded past it. tables.js sizes the control to the page count instead --
   see slotsFor() -- so there is nothing left to pad. */

/* The ellipsis is a label, not a destination. */
.pagination li.pg-gap > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: #64748b;            /* #8a97a7 was 2.97:1 on the card -- unreadable */
  font-size: 13px;
  user-select: none;
}
[data-mode="dark"] .pagination li.pg-gap > span { color: var(--c-ink-muted, #8a97a7); }

/* Narrow screens: the same structure, smaller, with Previous/Next as arrows so
   the whole control still clears a 375px phone with its gutters. */
@media (max-width: 767.98px) {
  :root { --pg-slot: 30px; --pg-edge: 36px; }

  .pagination-container > .row { justify-content: center; }
  .pagination-container > .row > [class*="col-"]:nth-child(2) { flex: 1 0 100%; text-align: center; }
  .pagination { margin: 0 auto; }

  .pagination > li:first-child > a,
  .pagination > li:last-child > a {
    font-size: 0;                       /* hide "Previous" / "Next" */
  }
  .pagination > li:first-child > a::before { content: "\2039"; font-size: 18px; line-height: 1; }
  .pagination > li:last-child > a::before  { content: "\203A"; font-size: 18px; line-height: 1; }
}

/* ------------------------------------------- clearance for the support button

   The launcher is parked bottom-right, and on a page whose table fills the
   window the pagination row ends up in exactly that corner: the Next button
   sat underneath it, which is how it showed up in the screenshot that started
   this. The row leaves it a gutter -- but only while the button is actually
   parked there. Drag the button anywhere else and support_widget.html drops
   `sw-docked`, and the gutter goes with it. */
@media (min-width: 768px) {
  body.sw-docked .pagination-container > .row > [class*="col-"]:last-child {
    padding-right: 66px;
  }
}

/* On a phone the control is centred and already nearly as wide as the screen,
   so there is no room to shift it sideways out of the button's way. It gets
   the clearance underneath instead: the page scrolls that little bit further
   and the arrows come out from under the button. */
@media (max-width: 767.98px) {
  body.sw-docked .pagination-container { padding-bottom: 76px; }
}