/* =====================================================================
   SRTTS table kit  (prefix tk-)
   Filter bar, readable table, status badges, actions menu, bulk bar, pager.
   Works with the black and white theme: light and dark mode both come from
   the shared tokens (--surface, --border, --text ...). No JavaScript is needed
   for filtering, sorting or paging; table-kit.js only adds comfort.
   ===================================================================== */

:root {
  --tk-zebra: rgba(0, 0, 0, .028);
  --tk-hover: rgba(0, 0, 0, .06);
  --tk-select: rgba(0, 0, 0, .09);
  --tk-head: var(--surface-2);
  --tk-radius: 14px;
  --tk-sticky: 0px;                 /* sticky header offset: raise it if a fixed bar sits above the page */

  /* badge colours: text on tinted background, all above 4.5:1 contrast */
  --tk-ok-bg: #E4F4E9;   --tk-ok-fg: #0B5A28;   --tk-ok-bd: #9ED3AF;
  --tk-wait-bg: #FFF3C4; --tk-wait-fg: #6A4700; --tk-wait-bd: #E5C24A;
  --tk-bad-bg: #FDE6E6;  --tk-bad-fg: #9A1B1B;  --tk-bad-bd: #EDA3A3;
  --tk-info-bg: #111111; --tk-info-fg: #FFFFFF; --tk-info-bd: #111111;
  --tk-off-bg: #F1F1F1;  --tk-off-fg: #3D3D3D;  --tk-off-bd: #CFCFCF;
}

html[data-theme="dark"] {
  --tk-zebra: rgba(255, 255, 255, .035);
  --tk-hover: rgba(255, 255, 255, .075);
  --tk-select: rgba(255, 255, 255, .12);

  --tk-ok-bg: #12301E;   --tk-ok-fg: #86E3A6;   --tk-ok-bd: #2C6B44;
  --tk-wait-bg: #3A2E05; --tk-wait-fg: #FFD768; --tk-wait-bd: #7A5E10;
  --tk-bad-bg: #3F1515;  --tk-bad-fg: #FFA3A3;  --tk-bad-bd: #8A3030;
  --tk-info-bg: #F2F2F2; --tk-info-fg: #111111; --tk-info-bd: #F2F2F2;
  --tk-off-bg: #262626;  --tk-off-fg: #D4D4D4;  --tk-off-bd: #4A4A4A;
}

html[data-theme="dark"] .tk-input, html[data-theme="dark"] .tk-sel, html[data-theme="dark"] .tk-date, html[data-theme="dark"] .tk-per select { color-scheme: dark; }

.tk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tk-ico { flex: none; }

/* ---------- Cards ---------- */
.tk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tk-radius);
  margin-bottom: 16px;
  /* no overflow:hidden here, it would stop the table header from sticking */
}

/* =====================================================================
   1. Filter bar
   ===================================================================== */
.tk-filters { padding: 14px 16px; }

.tk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tk-search { position: relative; flex: 1 1 100%; min-width: 0; }
.tk-search .tk-input { padding-right: 104px; }
.tk-search-btn {
  position: absolute; right: 5px; top: 5px; height: 32px; padding: 0 16px;
  background: var(--text-strong); color: var(--on-brand);
  border: 0; border-radius: 8px; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
}
.tk-search-btn:hover { opacity: .88; }
.tk-search-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.tk-search .tk-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.tk-input, .tk-sel {
  height: 42px;
  width: 100%;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font: inherit;
  font-size: .9375rem;
}

.tk-search .tk-input { padding-left: 40px; font-size: 1rem; }
.tk-sel { flex: 0 1 170px; width: auto; min-width: 0; padding-right: 8px; }

.tk-input:focus-visible, .tk-sel:focus-visible, .tk-date:focus-visible,
.tk-btn:focus-visible, .tk-link:focus-visible, .tk-icon-btn:focus-visible,
.tk-pg:focus-visible, .tk-chip:focus-visible, .tk-mi:focus-visible, .tk-sort:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

/* two dates in one control */
.tk-daterange {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 6px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  flex: 0 1 auto;
  max-width: 100%;
}

.tk-daterange > span { color: var(--text-muted); font-size: .8125rem; font-weight: 700; }
.tk-date {
  width: 128px;
  height: 34px;
  padding: 0 4px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: .875rem;
}

.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px;
  background: var(--surface); color: var(--text-strong);
  border: 1px solid var(--border-strong); border-radius: 10px;
  font: inherit; font-size: .9375rem; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tk-btn:hover { background: var(--surface-2); }
.tk-btn.is-primary { background: var(--text-strong); color: var(--on-brand); border-color: var(--text-strong); }
.tk-btn.is-primary:hover { opacity: .88; }
/* the theme colours every link in the page; keep button text readable on links too */
body.page-app .app-content a.tk-btn.is-primary:not(.tk-x), body.page-app .app-content a.tk-btn.is-primary:not(.tk-x):hover { color: var(--on-brand); }
.tk-btn .tk-count-dot {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--text-strong); color: var(--on-brand); border-radius: 999px; font-size: .75rem;
}

.tk-reset { color: var(--text-strong); margin-left: auto; }
.tk-reset[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* second row, opened by "More filters" */
.tk-more-panel {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong);
}
.tk-more-panel[hidden] { display: none; }
.tk-field { display: flex; flex-direction: column; gap: 4px; flex: 0 1 200px; min-width: 0; }
.tk-field > span { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tk-field .tk-sel { width: 100%; flex: none; }
.tk-presets { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tk-presets .tk-btn { height: 34px; padding: 0 12px; font-size: .8125rem; }

/* applied filters, one click to remove each */
.tk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tk-chips-label { font-size: .8125rem; font-weight: 800; color: var(--text-muted); }
.tk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 10px 0 12px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 999px; font-size: .8125rem; text-decoration: none;
}
.tk-chip:hover { border-color: var(--text-strong); }
.tk-chip b { font-weight: 800; color: var(--text-strong); }
.tk-chips-reset { margin-left: 4px; font-size: .8125rem; font-weight: 700; color: var(--text-strong); }

/* =====================================================================
   2. List card header
   ===================================================================== */
.tk-listbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.tk-listbar h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-strong); }
.tk-count { margin-left: 8px; font-size: .875rem; font-weight: 500; color: var(--text-muted); }

/* =====================================================================
   3. Table: sticky header, zebra rows, hover, alignment
   ===================================================================== */
.tk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; color: var(--text); }

.tk-table thead th {
  position: sticky;
  top: var(--tk-sticky);
  z-index: 3;
  padding: 11px 10px;
  background: var(--tk-head);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.tk-table thead th:first-child { border-top-left-radius: 0; }

.tk-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: break-word;       /* long words wrap, but short words are never cut in the middle */
}
.tk-table th:first-child, .tk-table td:first-child { padding-left: 18px; }
.tk-table th:last-child,  .tk-table td:last-child  { padding-right: 18px; }

.tk-table tbody tr:nth-child(even) td { background: var(--tk-zebra); }
.tk-table tbody tr:hover td            { background: var(--tk-hover); }
.tk-table tbody tr.is-selected td      { background: var(--tk-select); }
.tk-table tbody tr.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--text-strong); }
.tk-table tbody tr:last-child td { border-bottom: 0; }

/* alignment: text left, numbers right, badges centred, actions right */
.tk-table .tk-num    { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-table .tk-center { text-align: center; }
.tk-table .tk-end    { text-align: right; white-space: nowrap; }
.tk-table .tk-nowrap { white-space: nowrap; }
.tk-table th.tk-num .tk-sort, .tk-table th.tk-end .tk-sort { flex-direction: row-reverse; }

.tk-check-col { width: 44px; }
.tk-table input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  accent-color: var(--text-strong);
}

/* sortable header */
.tk-sort {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.tk-sort:hover, .tk-sort.is-on { color: var(--text-strong); }
.tk-caret { width: 8px; height: 12px; fill: currentColor; opacity: .32; }
.tk-caret .on { opacity: 1; }
.tk-sort.is-on .tk-caret { opacity: .5; }
.tk-sort.is-on .tk-caret .on { opacity: 1; }

/* two-line cells */
.tk-main { font-weight: 700; color: var(--text-strong); }
.tk-sub  { margin-top: 1px; font-size: .8125rem; color: var(--text-muted); }
.tk-tkt  { display: flex; align-items: center; gap: 4px; }
.tk-tkt-no { display: flex; flex-direction: column; line-height: 1.2; }
.tk-tkt-pre { font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }
.tk-tkt-id  { font-weight: 800; color: var(--text-strong); white-space: nowrap; }
.tk-subject { max-width: 34ch; line-height: 1.35; }
.tk-muted { color: var(--text-muted); }

.tk-table .tk-col-name { min-width: 110px; }
.tk-table .tk-col-grow { min-width: 140px; }
.tk-subject.tk-main { font-weight: 600; }
.tk-table time > span { display: block; }
.tk-table time .tk-main { font-weight: 600; }

/* empty state */
.tk-empty { padding: 44px 18px !important; text-align: center !important; color: var(--text-muted); }
.tk-table td.tk-empty::before { display: none !important; }
.tk-empty strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; color: var(--text-strong); }

/* =====================================================================
   4. Status badges (colour + icon + text)
   ===================================================================== */
.tk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.tk-badge.tone-success { background: var(--tk-ok-bg);   color: var(--tk-ok-fg);   border-color: var(--tk-ok-bd); }
.tk-badge.tone-warning { background: var(--tk-wait-bg); color: var(--tk-wait-fg); border-color: var(--tk-wait-bd); }
.tk-badge.tone-danger  { background: var(--tk-bad-bg);  color: var(--tk-bad-fg);  border-color: var(--tk-bad-bd); }
.tk-badge.tone-info    { background: var(--tk-info-bg); color: var(--tk-info-fg); border-color: var(--tk-info-bd); }
.tk-badge.tone-neutral { background: var(--tk-off-bg);  color: var(--tk-off-fg);  border-color: var(--tk-off-bd); }

/* =====================================================================
   5. Actions: one icon + a "..." menu
   ===================================================================== */
.tk-actions { display: inline-flex; align-items: center; gap: 2px; }

.tk-icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--text-strong);
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; text-decoration: none;
}
.tk-icon-btn:hover, .tk-icon-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); }

.tk-menu { position: relative; display: inline-block; }

.tk-menu-list {
  position: fixed;               /* placed by table-kit.js, so rows and cards never clip it */
  z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  text-align: left;
}
.tk-menu-list[hidden] { display: none; }

.tk-mi-form { margin: 0; }
.tk-mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 0 12px;
  background: transparent; color: var(--text-strong);
  border: 0; border-radius: 8px;
  font: inherit; font-size: .9375rem; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer;
}
.tk-mi:hover, .tk-mi:focus-visible { background: var(--surface-2); }
.tk-mi.is-danger { color: var(--tk-bad-fg); }
.tk-mi.is-danger:hover { background: var(--tk-bad-bg); }
.tk-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* =====================================================================
   6. Bulk action bar: sticks to the bottom of the screen while rows are ticked
   ===================================================================== */
.tk-bulk {
  position: sticky; bottom: 14px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 12px 14px;
  padding: 10px 14px;
  background: var(--text-strong); color: var(--on-brand);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.tk-bulk[hidden] { display: none; }
.tk-bulk strong { font-variant-numeric: tabular-nums; }
.tk-bulk .tk-link {
  background: none; border: 0; padding: 4px 2px; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tk-bulk-grow { flex: 1 1 auto; }
.tk-bulk .tk-sel { height: 38px; flex: 0 1 190px; background: var(--surface); color: var(--text); }
.tk-bulk .tk-btn { height: 38px; padding: 0 14px; }
.tk-bulk .tk-btn.is-primary { background: var(--surface); color: var(--text-strong); border-color: var(--surface); }
.tk-bulk .tk-btn.is-danger { background: #C62828; border-color: #C62828; color: #fff; }
.tk-bulk .tk-btn.is-danger:hover { background: #A61F1F; }
.tk-bulk .tk-btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   7. Pagination
   ===================================================================== */
.tk-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.tk-pager-range { margin: 0; font-size: .875rem; color: var(--text-muted); }
.tk-pager-range b { color: var(--text-strong); }
.tk-per { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; color: var(--text-muted); }
.tk-per select {
  height: 36px; padding: 0 8px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; font: inherit;
}
.tk-pages { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tk-pg {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px;
  background: transparent; color: var(--text-strong);
  border: 1px solid transparent; border-radius: 10px;
  font-size: .9375rem; font-weight: 700; text-decoration: none;
}
a.tk-pg:hover { background: var(--surface-2); border-color: var(--border-strong); }
.tk-pg.is-on { background: var(--text-strong); color: var(--on-brand); }
.tk-pg.is-off { opacity: .35; }
.tk-gap { padding: 0 4px; color: var(--text-muted); }

/* =====================================================================
   7b. Collapsible block (used for the "Add user" form)
   ===================================================================== */
.tk-disclosure > summary { list-style: none; cursor: pointer; }
.tk-disclosure > summary::-webkit-details-marker { display: none; }
.tk-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; font-weight: 700; color: var(--text-strong);
}
.tk-summary::before {
  content: ""; width: 8px; height: 8px; margin-right: 4px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform .15s ease;
}
.tk-disclosure[open] > .tk-summary::before { transform: rotate(45deg); }
.tk-summary > span:first-child { flex: 1 1 auto; }
.tk-summary-hint { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
.tk-disclosure[open] > .tk-summary { border-bottom: 1px solid var(--border); }
.tk-summary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; border-radius: var(--tk-radius); }

/* =====================================================================
   8. Card mode: when a table cannot fit, every row becomes a card.
      .tk-table--wide (many columns) switches earlier than normal tables.
   ===================================================================== */
@media (max-width: 1340px) {
  .tk-table--wide thead { display: none; }
  .tk-table--wide, .tk-table--wide tbody, .tk-table--wide tr, .tk-table--wide td { display: block; width: 100%; }
  .tk-table--wide tbody { padding: 12px 14px 4px; }
  .tk-table--wide tr {
    margin-bottom: 12px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  }
  .tk-table--wide tbody tr:nth-child(even) td, .tk-table--wide tbody tr:hover td { background: transparent; }
  .tk-table--wide tbody tr.is-selected { border-color: var(--text-strong); box-shadow: inset 4px 0 0 var(--text-strong); }
  .tk-table--wide td {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
    padding: 9px 14px !important; text-align: right !important;
    border-bottom: 1px solid var(--border);
  }
  .tk-table--wide td:last-child { border-bottom: 0; }
  .tk-table--wide td::before {
    content: attr(data-label); flex: 0 0 36%; text-align: left;
    font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  }
  .tk-table--wide td.tk-check-col { justify-content: flex-start; padding-bottom: 0 !important; border-bottom: 0; }
  .tk-table--wide td.tk-check-col::before { display: none; }
  .tk-table--wide .tk-subject { max-width: none; }
  .tk-table--wide .tk-tkt-no { flex-direction: row; gap: 4px; align-items: baseline; }
}

@media (max-width: 900px) {
  .tk-table:not(.tk-table--wide) thead { display: none; }
  .tk-table:not(.tk-table--wide), .tk-table:not(.tk-table--wide) tbody,
  .tk-table:not(.tk-table--wide) tr, .tk-table:not(.tk-table--wide) td { display: block; width: 100%; }
  .tk-table:not(.tk-table--wide) tbody { padding: 12px 14px 4px; }
  .tk-table:not(.tk-table--wide) tr {
    margin-bottom: 12px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  }
  .tk-table:not(.tk-table--wide) tbody tr:nth-child(even) td,
  .tk-table:not(.tk-table--wide) tbody tr:hover td { background: transparent; }
  .tk-table:not(.tk-table--wide) tbody tr.is-selected { border-color: var(--text-strong); box-shadow: inset 4px 0 0 var(--text-strong); }
  .tk-table:not(.tk-table--wide) td {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
    padding: 9px 14px !important; text-align: right !important;
    border-bottom: 1px solid var(--border);
  }
  .tk-table:not(.tk-table--wide) td:last-child { border-bottom: 0; }
  .tk-table:not(.tk-table--wide) td::before {
    content: attr(data-label); flex: 0 0 36%; text-align: left;
    font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  }
  .tk-table:not(.tk-table--wide) td.tk-check-col { justify-content: flex-start; padding-bottom: 0 !important; border-bottom: 0; }
  .tk-table:not(.tk-table--wide) td.tk-check-col::before { display: none; }
}

@media (max-width: 640px) {
  .tk-filters { padding: 12px; }
  .tk-sel, .tk-daterange { flex: 1 1 100%; }
  .tk-daterange { justify-content: space-between; }
  .tk-date { flex: 1 1 0; width: auto; min-width: 0; }
  .tk-pager { justify-content: center; text-align: center; }
  .tk-pages .tk-num:not(.is-cur) { display: none; }
  .tk-pages .tk-num:has(.is-on) { display: block; }
  .tk-bulk { margin: 10px 8px; bottom: 8px; }
  .tk-bulk .tk-sel { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .tk-table td, .tk-chip, .tk-pg, .tk-icon-btn { transition: background-color .12s ease, border-color .12s ease; }
}

@media print {
  .tk-filters, .tk-bulk, .tk-pager, .tk-check-col, .tk-end { display: none !important; }
}