/* Tablesorter skin: gives every jQuery tablesorter table the table-cards look (rounded card, no vertical lines,
   soft header, hover rows, pill-shaped filters and pager buttons), in light and dark mode.
   Load it AFTER the tablesorter theme CSS and w3style.css. It works with the "default" and "blue" themes.

   Why ":not(#no-skin)": tablesorter's themes, w3.css (.w3-table-all, .w3-bordered) and the dark-mode rules in
   w3style.css all paint borders and row colors with class selectors, several with !important. The ID inside
   :not() lifts these rules above all of them without touching the HTML. Add id="no-skin" to a table to opt out. */
:root {
  --ts-card: #fff; --ts-ink: #26221e; --ts-muted: #6f675f; --ts-line: #e4ded6; --ts-head: #f6f4f1;
  --ts-hover: #faf8f5; --ts-field: #fff; --ts-on: #2f7d4f;
  --ts-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
}
body.dark-mode {
  --ts-card: #2d2d2d; --ts-ink: #eee; --ts-muted: #a8a8a8; --ts-line: #3d3d3d; --ts-head: #333;
  --ts-hover: #353535; --ts-field: #363636; --ts-on: #4fa874; --ts-shadow: none;
}

/* ---- the table as a rounded card ---- */
table.tablesorter:not(#no-skin) {
  border-collapse: separate !important; border-spacing: 0 !important; border: 0 !important;
  border-radius: 12px; box-shadow: var(--ts-shadow);
  background: var(--ts-card) !important; color: var(--ts-ink) !important;
  font-size: 14px; margin: 0 0 12px; width: 100%;
}
body.dark-mode table.tablesorter:not(#no-skin) { border: 1px solid var(--ts-line) !important; }

/* Rounded corners come from the corner cells, not overflow:hidden on the table: overflow would make the table the
   scroll container for sticky header rows (w3-sticky), pushing the header down over the filter row. */
table.tablesorter:not(#no-skin) > thead > tr:first-child > :first-child { border-top-left-radius: 12px; }
table.tablesorter:not(#no-skin) > thead > tr:first-child > :last-child { border-top-right-radius: 12px; }
table.tablesorter:not(#no-skin) > tbody > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
table.tablesorter:not(#no-skin) > tbody > tr:last-child > :last-child { border-bottom-right-radius: 12px; }

/* every cell: horizontal divider only, no vertical lines, no zebra */
table.tablesorter:not(#no-skin) > * > tr > th,
table.tablesorter:not(#no-skin) > * > tr > td {
  border: 0 !important; border-bottom: 1px solid var(--ts-line) !important;
  padding: 8px 10px !important; vertical-align: middle; color: inherit;
}
table.tablesorter:not(#no-skin) > tbody > tr,
table.tablesorter:not(#no-skin) > tbody > tr > td {
  background-color: transparent !important;
}
table.tablesorter:not(#no-skin) > tbody > tr:last-child > td { border-bottom: 0 !important; }
table.tablesorter:not(#no-skin) > tbody > tr:hover > td { background-color: var(--ts-hover) !important; }

/* ---- header ---- */
table.tablesorter:not(#no-skin) > thead > tr > th,
table.tablesorter:not(#no-skin) > thead > tr.tablesorter-headerRow > th {
  background-color: var(--ts-head) !important; background-image: none !important;
  color: var(--ts-ink) !important; font-weight: 600; text-align: left; white-space: nowrap;
}
table.tablesorter:not(#no-skin) .tablesorter-header-inner { display: inline-flex; gap: 4px; align-items: center; }
/* sort arrows drawn as text, so they show in both themes (the themes' arrow images are black) */
table.tablesorter:not(#no-skin) .tablesorter-header:not(.sorter-false) .tablesorter-header-inner::after { content: "\2195"; opacity: .35; font-size: 12px; }
table.tablesorter:not(#no-skin) .tablesorter-headerAsc .tablesorter-header-inner::after { content: "\2191" !important; opacity: 1 !important; color: var(--ts-on); }
table.tablesorter:not(#no-skin) .tablesorter-headerDesc .tablesorter-header-inner::after { content: "\2193" !important; opacity: 1 !important; color: var(--ts-on); }
table.tablesorter:not(#no-skin) .tablesorter-header:focus-visible { outline: 2px solid var(--ts-on); outline-offset: -2px; }

/* ---- filter row ---- */
table.tablesorter:not(#no-skin) > thead > tr.tablesorter-filter-row > td {
  background-color: var(--ts-card) !important; padding: 6px 8px !important; text-align: left;
}
table.tablesorter:not(#no-skin) .tablesorter-filter-row.hideme td { padding: 2px !important; }
table.tablesorter:not(#no-skin) input.tablesorter-filter,
table.tablesorter:not(#no-skin) select.tablesorter-filter {
  width: 100%; box-sizing: border-box; margin: 0; padding: 5px 10px !important; font-size: 13px;
  border: 1px solid var(--ts-line) !important; border-radius: 999px !important;
  background-color: var(--ts-field) !important; color: var(--ts-ink) !important; box-shadow: none;
}
table.tablesorter:not(#no-skin) input.tablesorter-filter:focus,
table.tablesorter:not(#no-skin) select.tablesorter-filter:focus { outline: 0; border-color: var(--ts-on) !important; }

/* ---- pagers: the w3 "pager-controls" bars and tablesorter's own .pager ---- */
.pager-controls:not(#no-skin) {
  background: var(--ts-card) !important; color: var(--ts-ink) !important;
  border-radius: 12px !important; box-shadow: var(--ts-shadow);
}
body.dark-mode .pager-controls:not(#no-skin) { border: 1px solid var(--ts-line); }
.pager-controls:not(#no-skin) .w3-button,
.pager-controls:not(#no-skin) button,
.pager-controls:not(#no-skin) select,
.pager-controls:not(#no-skin) input,
.tablesorter-pager:not(#no-skin) select,
.tablesorter-pager:not(#no-skin) input {
  padding: 4px 12px !important; border-radius: 999px !important; font-size: 13px !important;
  border: 1px solid var(--ts-line) !important; background: var(--ts-field) !important; color: var(--ts-ink) !important;
}
.pager-controls:not(#no-skin) .w3-button:hover,
.pager-controls:not(#no-skin) button:hover { border-color: var(--ts-on) !important; }
.pager-controls:not(#no-skin) .disabled,
.pager-controls:not(#no-skin) [disabled] { opacity: .45; cursor: default; }
.tablesorter-pager:not(#no-skin) { color: var(--ts-ink); padding: 6px 0; }
.tablesorter-pager:not(#no-skin) .clickable { color: var(--ts-on) !important; padding: 0 4px; }