/* Canonical Studio data-table surface and controls. */
.pe-table__wrap,
.pe-table__wrap--loading {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
}

.pe-table__wrap--loading::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-block-size: 3rem;
  background: color-mix(in srgb, var(--bg2) 42%, transparent);
  color: var(--txt2);
  content: "Updating...";
  font: 600 .7rem var(--mono);
  letter-spacing: .04em;
  pointer-events: none;
}

.pe-table__status {
  padding: .65rem .875rem;
  border-block-start: 1px solid var(--border);
  color: var(--red);
  font-size: .7rem;
}

.pe-table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--bg2);
  color: var(--txt);
  font-size: .75rem;
}

.pe-table th {
  padding: .625rem .875rem;
  border-block-end: 1px solid var(--border);
  background: var(--bg1);
  color: var(--txt3);
  font: 600 .625rem var(--mono);
  letter-spacing: .06em;
  text-align: start;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.pe-table td {
  padding: .625rem .875rem;
  border-block-end: 1px solid var(--border);
  background: var(--bg2);
  vertical-align: middle;
}

.pe-table tbody tr:last-child td {
  border-block-end: 0;
}

.pe-table tbody tr {
  transition: background-color .1s;
}

.pe-table tbody tr:hover td {
  background: var(--bg3);
}

.pe-table .tbl-btn,
.pe-table .sett-btn {
  padding: .3125rem .6875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  color: var(--txt2);
  font: 500 .625rem var(--mono);
  white-space: nowrap;
}

/* Shared Studio data-table controls. */
.pe-table__sort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-block-size: 1.8rem;
  padding: .2rem .35rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  cursor: pointer;
}

.pe-table__sort::after {
  content: "↕";
  color: var(--txt3);
  font-size: .8em;
}

.pe-table__filters th {
  padding: .25rem .5rem;
  background: var(--bg1);
}

.pe-table__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: .35rem .5rem;
  max-inline-size: min(100%, 36rem);
  box-sizing: border-box;
  padding-inline: .5rem;
}

.pe-table__filter {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 5rem;
  min-block-size: 2rem;
  padding: .4rem .55rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background-color: var(--bg2);
  color: var(--txt);
  font: inherit;
  font-size: .72rem;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  color-scheme: dark;
}

.pe-table__filter::placeholder {
  color: var(--txt3);
  opacity: 1;
}

.pe-table__filter:hover {
  border-color: var(--border3);
  background-color: var(--bg3);
}

.pe-table__filter:focus-visible {
  border-color: var(--accent);
  outline: .125rem solid var(--accent2);
  outline-offset: .125rem;
  box-shadow: 0 0 0 .2rem rgba(91, 141, 238, .12);
}

.pe-table__filter--search {
  flex: 1 1 12rem;
}

.pe-table__filter--select {
  flex: 0 1 auto;
  inline-size: auto;
  max-inline-size: 14rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23898ea8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  padding-right: 1.5rem;
}

.dash-user-search .pe-table__filter {
  flex: 1 1 12rem;
  min-inline-size: 10rem;
  background-color: var(--bg2);
  border: 1px solid var(--border2);
  padding: .4rem .55rem;
}

.dash-user-search .pe-table__filter--select {
  flex: 0 1 auto;
  min-inline-size: 8rem;
}

.pe-table__search {
  flex: 1 1 12rem;
  min-inline-size: min(100%, 18rem);
  max-inline-size: 22rem;
  margin-block-end: 0;
}

.pe-table__filters .pe-table__filter {
  min-inline-size: 6rem;
}

.pe-table__controls .pe-table__filter {
  max-inline-size: 22rem;
}

.page-btn:focus-visible,
.page-size-sel:focus-visible {
  outline: .125rem solid var(--accent2);
  outline-offset: .125rem;
}

th[aria-sort="ascending"] .pe-table__sort::after {
  content: "↑";
}

th[aria-sort="descending"] .pe-table__sort::after {
  content: "↓";
}

.pe-table__sort:hover,
.pe-table__sort:focus-visible {
  color: var(--accent);
}

.dash-pager {
  flex-wrap: wrap;
  min-block-size: 2.5rem;
  padding-block: .75rem .35rem;
  padding-inline: .75rem;
}

.pe-table__page-size,
.pe-table__page-indicator {
  color: var(--txt3);
  font-size: .7rem;
  white-space: nowrap;
}

.page-size-sel {
  min-block-size: 1.9rem;
  padding-inline: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt2);
  font: inherit;
}

.dash-pager[aria-label="Table pagination, top"] {
  justify-content: flex-end;
  padding-block: .35rem .75rem;
}

/* Bottom pagers match the top: right-aligned. */
.dash-pager[aria-label="Table pagination, bottom"] {
  justify-content: flex-end;
}

.page-btn:disabled,
.page-btn:disabled:hover {
  border: 1px dashed var(--border3);
  background: var(--bg1);
  color: var(--txt3);
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .7;
  transform: none;
  box-shadow: none;
}

@media (max-width: 42rem) {
  .dash-user-search {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .dash-user-search .pe-table__filter,
  .dash-user-search .pe-table__filter--select {
    flex: 1 1 100%;
    max-inline-size: 100%;
  }

  .pe-table__controls {
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pe-table tbody tr,
  .pe-table__filter,
  .pe-table__sort,
  .page-btn {
    transition-duration: .01ms;
  }
}

/* Table Column Configuration (visibility + custom header text). */
.pe-table__toolbar {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .35rem .5rem;
}

.pe-table__config {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.8rem;
  min-block-size: 1.8rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt3);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: color .12s, border-color .12s, background-color .12s;
}

.pe-table__config:hover,
.pe-table__config:focus-visible {
  color: var(--accent);
  border-color: var(--accent2);
  background: var(--bg3);
}

.pe-table__config svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Pager-row variant: prominent blue gear, right of the Next button. */
.pe-table__config--pager {
  min-inline-size: 2.15rem;
  min-block-size: 2.15rem;
  margin-left: .45rem;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 2px 8px rgba(91, 141, 238, .28);
}

.pe-table__config--pager svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.pe-table__config--pager:hover,
.pe-table__config--pager:focus-visible {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  filter: brightness(1.12);
  box-shadow: 0 4px 14px rgba(91, 141, 238, .42);
}

.pe-table__config--pager:active {
  transform: translateY(1px);
}

.pe-table__pager--config-only {
  justify-content: flex-end;
  padding-inline: .75rem;
}

.pe-table__pager--config-only[hidden] {
  display: none;
}

.pe-table th[hidden],
.pe-table td[hidden] {
  display: none;
}

#pe-table-config-modal {
  z-index: 9999;
}

#pe-table-config-modal .modal-card {
  inline-size: min(34rem, 94vw);
}

.pe-table-config__tabs {
  display: flex;
  gap: .25rem;
  margin-block-end: .85rem;
  border-block-end: 1px solid var(--border);
}

.pe-table-config__tab {
  padding: .45rem .85rem;
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  background: transparent;
  color: var(--txt2);
  font: 600 .66rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}

.pe-table-config__tab:hover {
  color: var(--txt);
}

.pe-table-config__tab.on {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

.pe-table-config__panel[hidden] {
  display: none;
}

.pe-table-config__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pe-table-config__section h4 {
  margin: 0 0 .45rem;
  color: var(--txt3);
  font: 600 .62rem var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pe-table-config__hint {
  margin: -.25rem 0 .45rem;
  color: var(--txt3);
  font-size: .64rem;
}

.pe-table-config__list {
  max-block-size: 44vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}

.pe-table-config__item {
  border-block-end: 1px solid var(--border);
}

.pe-table-config__item:last-child {
  border-block-end: 0;
}

.pe-table-config__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .25rem;
}

.pe-table-config__row.pe-dragging {
  opacity: .4;
}

.pe-table-config__drag {
  display: inline-flex;
  flex: 0 0 auto;
  padding: .15rem .2rem;
  color: var(--txt3);
  cursor: grab;
}

.pe-table-config__drag svg {
  inline-size: .65rem;
  block-size: 1rem;
}

.pe-table-config__row:active .pe-table-config__drag {
  cursor: grabbing;
}

.pe-table-config__row input[type="checkbox"] {
  accent-color: var(--accent);
}

.pe-table-config__label {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 2rem;
  padding: .35rem .55rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt);
  font: inherit;
  font-size: .75rem;
}

.pe-table-config__label:focus-visible {
  border-color: var(--accent);
  outline: .125rem solid var(--accent2);
  outline-offset: .125rem;
}

.pe-table-config__orig {
  color: var(--txt3);
  font-size: .65rem;
  white-space: nowrap;
}

.pe-table-config__more {
  flex: 0 0 auto;
  min-inline-size: 1.6rem;
  min-block-size: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt2);
  font-size: .6rem;
  line-height: 1;
  cursor: pointer;
  transition: color .12s, border-color .12s, background-color .12s;
}

.pe-table-config__more:hover,
.pe-table-config__more[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent2);
  background: var(--bg3);
}

.pe-table-config__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem 1.1rem;
  padding: .1rem .25rem .55rem 1.7rem;
}

.pe-table-config__detail[hidden] {
  display: none;
}

.pe-table-config__field {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--txt3);
  font-size: .65rem;
  white-space: nowrap;
}

.pe-table-config__field input[type="number"],
.pe-table-config__sizes {
  min-block-size: 1.7rem;
  padding: .2rem .4rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt);
  font: inherit;
  font-size: .68rem;
  color-scheme: dark;
}

.pe-table-config__field input[type="number"] {
  inline-size: 4.1rem;
}

.pe-table-config__field input[type="number"]:focus-visible,
.pe-table-config__sizes:focus-visible,
.pe-table-config__family:focus-visible {
  border-color: var(--accent);
  outline: .125rem solid var(--accent2);
  outline-offset: .125rem;
}

.pe-table-config__seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}

.pe-table-config__seg button {
  padding: .22rem .5rem;
  border: 0;
  background: var(--bg2);
  color: var(--txt2);
  font: 500 .62rem var(--mono);
  cursor: pointer;
  transition: background-color .12s, color .12s;
}

.pe-table-config__seg button + button {
  border-inline-start: 1px solid var(--border2);
}

.pe-table-config__seg button:hover {
  background: var(--bg3);
  color: var(--txt);
}

.pe-table-config__seg button.on {
  background: var(--accent);
  color: #fff;
}

.pe-table-config__pageropts,
.pe-table-config__fontopts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
}

.pe-table-config__field--grow {
  flex: 1 1 12rem;
}

.pe-table-config__sizes {
  inline-size: 11rem;
}

.pe-table-config__check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--txt2);
  font-size: .7rem;
  white-space: nowrap;
  cursor: pointer;
}

.pe-table-config__check input {
  accent-color: var(--accent);
}

.pe-table-config__family {
  min-block-size: 1.9rem;
  padding-inline: .35rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--txt);
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}