/* ═══════════════════════════════════════════
   tables.css — unified table / list / pager styles
   ═══════════════════════════════════════════ */

/* ── Scroll wrappers ── */
.dms-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.dms-table-wrap--wide .alarm-table,
.dms-table-wrap--wide .dms-table {
  table-layout: auto;
  min-width: max-content;
}

.dms-table-wrap--wide .alarm-table th,
.dms-table-wrap--wide .alarm-table td,
.dms-table-wrap--wide .dms-table th,
.dms-table-wrap--wide .dms-table td {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.dms-table-wrap--panel {
  padding: 10px 16px;
  max-height: 360px;
  overflow: auto;
}

.dms-table-wrap--short {
  max-height: 260px;
}

/* ── Ellipsis only when explicitly marked ── */
.dms-cell-ellipsis,
.alarm-table td.dms-cell-ellipsis,
.alarm-table th.dms-cell-ellipsis {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── Empty / loading states ── */
.dms-table-empty,
.sn-empty,
.ac-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text2);
  font-size: var(--fs-body);
}

.dms-table-loading,
.sj-empty-cell,
.sync-loading-cell {
  height: 86px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--fs-title-section);
  color: var(--cyan);
  font-weight: 600;
}

/* ── Unified pager ── */
.dms-pager,
.profile-pager,
.audit-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  font-size: var(--fs-body);
  color: var(--text2);
  flex-wrap: wrap;
}

.dms-pager-label,
.dms-pager .sj-page-indicator,
.profile-pager .sj-page-indicator {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.dms-pager-pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.dms-pager-ellipsis {
  padding: 0 2px;
  color: var(--text2);
  user-select: none;
}

.dms-pager-num.active {
  border-color: var(--cyan);
  color: var(--cyan);
  font-weight: 700;
}

.dms-pager-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.dms-pager-jump-label {
  font-size: var(--fs-caption);
  color: var(--text2);
  white-space: nowrap;
}

.dms-pager-input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-body);
  text-align: center;
}

.dms-pager-input:focus {
  outline: none;
  border-color: var(--cyan);
}

/* ── Audit-style scroll table ── */
.dms-table-wrap .audit-table,
.dms-table-wrap .dms-table--audit {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.dms-table-wrap .audit-table th,
.dms-table-wrap .dms-table--audit th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  color: var(--text2);
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.dms-table-wrap .audit-table td,
.dms-table-wrap .dms-table--audit td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bg3);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dms-table-wrap .audit-table td.dms-cell-ellipsis {
  max-width: 200px;
}

.dms-table-wrap .audit-table td.dms-cell-ellipsis:hover {
  white-space: normal;
  overflow: visible;
}

/* ── WhatsApp log column widths ── */
.dms-table-wrap .dms-table--wa-log {
  table-layout: fixed;
  width: 100%;
  min-width: 920px;
}
.dms-table--wa-log .wa-col-time {
  width: 172px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dms-table--wa-log .wa-col-type { width: 62px; }
.dms-table--wa-log .wa-col-status { width: 72px; }
.dms-table--wa-log .wa-col-ticket { width: 86px; }
.dms-table--wa-log .wa-col-recipient { width: 118px; }
.dms-table--wa-log .wa-col-owner { width: 128px; }
.dms-table--wa-log .wa-col-reason {
  width: 200px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dms-table--wa-log .wa-col-action {
  width: 72px;
  white-space: nowrap;
  text-align: right;
}

/* ── API Usage column widths ── */
.api-usage-table {
  table-layout: fixed;
  width: 100%;
  min-width: 980px;
  font-size: 12px;
}

.dms-table--api-usage .au-col-method,
.api-usage-table .au-col-method { width: 72px; }
.dms-table--api-usage .au-col-path,
.api-usage-table .au-col-path { width: auto; }
.dms-table--api-usage .au-col-count,
.api-usage-table .au-col-count { width: 64px; }
.dms-table--api-usage .au-col-ms,
.api-usage-table .au-col-ms { width: 96px; }
.dms-table--api-usage .au-col-errors,
.api-usage-table .au-col-errors { width: 64px; }
.dms-table--api-usage .au-col-bar,
.api-usage-table .au-col-bar { width: 100px; }
.dms-table--api-usage-recent .au-col-time,
.api-usage-recent-table .au-col-time { width: 160px; }
.dms-table--api-usage-recent .au-col-status,
.api-usage-recent-table .au-col-status { width: 72px; }

.dms-table--api-usage th,
.dms-table--api-usage td:not(.au-path),
.api-usage-table th,
.api-usage-table td:not(.au-path) {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.dms-table--api-usage td.au-path,
.api-usage-table td.au-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dms-table--api-usage td.au-bar,
.api-usage-table td.au-bar {
  overflow: hidden;
  padding-right: 12px;
}

.dms-table--api-usage td.au-count,
.dms-table--api-usage td.au-errors,
.api-usage-table td.au-count,
.api-usage-table td.au-errors {
  text-align: center;
}

.dms-table--api-usage td.au-max,
.api-usage-table td.au-max {
  font-weight: 600;
}

.au-method { font-weight: 600; }
.au-method-get { color: var(--cyan); }
.au-method-post { color: var(--green); }
.au-method-delete { color: var(--red); }
.au-method-put, .au-method-patch { color: var(--yellow); }

.au-ms-bar {
  width: 100%;
  height: 8px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

.au-ms-bar-fill {
  height: 100%;
  border-radius: 4px;
  max-width: 100%;
}