/* ==========================================================================
   Promo codes (gambl-parity) — bento-visual language.
   Структура/поведение 1:1 с эталоном gambl.bet/promocodes (слева create-форма,
   справа список с period-табами + per-period статистикой). Визуал — наш проектный:
   .dtile chrome (18px радиус, --border, --card-bg, --shadow), tokens, Inter +
   tabular-nums для чисел. Обе темы работают через :root/[data-theme].
   Period-табы / search / popover / pager переиспользуют us-* примитивы (users.css).
   Всё скоупится в .admin-main .pc-page.
   ========================================================================== */

.admin-main .pc-page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  --pc-radius: 18px;
  --pc-radius-inner: 12px;
  --pc-radius-pill: 999px;
  /* Reused us-* primitives (period tabs, search, popover, pager) read these —
     they are only defined on .us-page, so mirror them here or the pills go square. */
  --us-radius: 18px;
  --us-radius-inner: 12px;
  --us-radius-pill: 999px;
}

.admin-main .pc-loading {
  padding: 24px;
  color: var(--text-muted);
  font: 500 14px/1.4 var(--font-ui);
}

/* ---- Two-column layout: [hero + create] | list -------------------------- */
/* Left column (aside) stacks the bento hero over the create panel; the list
   block sits to the right and starts at the same top edge as the hero. */
.admin-main .pc-layout {
  display: grid;
  grid-template-columns: minmax(355px, 408px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
/* Collapse to one column unless the content is wide enough for the aside AND
   the full list table side-by-side (aside ≤408 + gap + table ~600). Below that
   the list spans full width so every column is visible — no cramped ~510px
   table column. */
@container (max-width: 1180px) {
  .admin-main .pc-layout { grid-template-columns: 1fr; }
}
.admin-main .pc-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- Bento hero (mirrors .us-hero on /#users) --------------------------- */
.admin-main .pc-hero {
  position: relative;
  padding: 18px 20px;
  min-height: 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--pc-radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.admin-main .pc-hero__text {
  position: relative;
  z-index: 2;
  max-width: calc(100% - 76px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-main .pc-hero__title {
  margin: 0;
  font: 700 clamp(22px, 2.4cqw, 30px)/1.05 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.admin-main .pc-hero__sub {
  margin: 0;
  font: 500 13px/1.4 var(--font-ui);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.admin-main .pc-hero__sticker {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 88px;
  height: 88px;
  z-index: 1;
  pointer-events: none;
}
.admin-main .pc-hero__sticker svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Create panel (dtile) ----------------------------------------------- */
.admin-main .pc-create.dtile {
  padding: 20px;
  border-radius: var(--pc-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-main .pc-create__title {
  margin: 0;
  font: 700 16px/1.2 var(--font-ui);
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
/* gambl-parity form metrics: 48px controls, 14px radius, 20px group gap. */
.admin-main .pc-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form field: label + control + hint */
.admin-main .pc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-main .pc-label {
  font: 500 12px/1 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text);
}
.admin-main .pc-hint {
  margin: 2px 0 0;
  font: 500 10.5px/1.4 var(--font-ui);
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.admin-main .pc-hint--note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Wagering («отыгрыш») — switch row + revealed multiplier field. One logical
   group, so it carries its own 12px gap instead of the form's 20px rhythm. */
.admin-main .pc-wager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-main .pc-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 14px;
  transition: border-color 0.15s ease;
}
/* Reveal detail: the card picks up a tint of the accent while wagering is on. */
.admin-main .pc-switch:has(.toggle.is-on) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.admin-main .pc-switch__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-main .pc-switch__title {
  font: 500 13px/1.2 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.admin-main .pc-switch__help {
  font: 500 10.5px/1.4 var(--font-ui);
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.admin-main .pc-switch .toggle {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.admin-main .pc-switch .toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Control shell (input / select) — fixed 48px height, 14px radius */
.admin-main .pc-control {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-main .pc-control:focus-within {
  border-color: var(--accent);
  background: var(--card-bg);
}
.admin-main .pc-prefix {
  font: 500 13px/1 var(--font-ui);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.admin-main .pc-input {
  width: 100%;
  /* .admin-main input has a global bordered box via !important — the pc-control
     div is the box, so the inner input must be flat (needs !important to win). */
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  outline: none;
  color: var(--text-strong);
  padding: 0 !important;
  font: 500 14px/1.2 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.admin-main .pc-control--prefix .pc-prefix { margin-right: 8px; }
.admin-main .pc-control--suffix .pc-prefix--suffix { margin-left: 8px; }
/* Number spinners are noise here — the $ / % / × affix already labels the box,
   and the panel suppresses them everywhere else it takes a number. */
.admin-main .pc-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.admin-main .pc-input::-webkit-outer-spin-button,
.admin-main .pc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.admin-main .pc-input::placeholder { color: var(--text-muted); font-variant-numeric: normal; }
.admin-main .pc-input::-webkit-search-cancel-button { display: none; }

/* Native select — hidden native gets enhanced by dropdown.js; this styles the
   raw fallback (before enhancement / where enhancer is absent). */
.admin-main .pc-select {
  width: 100%;
  height: 48px;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-strong);
  padding: 0 40px 0 16px;
  border-radius: 14px;
  font: 500 14px/1.2 var(--font-ui);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8a8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.admin-main .pc-select:hover { border-color: var(--border-hover); }
.admin-main .pc-select:focus-visible { border-color: var(--accent); outline: none; }
/* When enhanced, dropdown.js hides the native and injects a .dd-trigger — give it
   the same 48px / 14px box as the inputs (selects are rendered directly in the
   .pc-field, NOT wrapped in a .pc-control, to avoid a border-inside-a-border). */
.admin-main .pc-field > .pc-select,
.admin-main .pc-field > .dd-trigger {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  padding: 0 16px;
  font: 500 14px/1.2 var(--font-ui);
}
.admin-main .pc-field > .dd-trigger { padding-right: 12px; }

/* Submit — 48px, 16px radius, full width */
.admin-main .pc-submit {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  font: 500 15px/1 var(--font-ui);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  margin-top: 4px;
}
.admin-main .pc-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.admin-main .pc-submit:active { transform: scale(0.99); }
.admin-main .pc-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- List panel (dtile) ------------------------------------------------- */
.admin-main .pc-list.dtile {
  padding: 20px;
  border-radius: var(--pc-radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
@container (max-width: 640px) {
  .admin-main .pc-list.dtile,
  .admin-main .pc-create.dtile { padding: 14px; }
}

/* Toolbar: search + count */
.admin-main .pc-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-main .pc-toolbar__spacer { flex: 1 1 auto; min-width: 8px; }
.admin-main .pc-search { min-width: 240px; max-width: 360px; flex: 1 1 260px; }
.admin-main .pc-count { padding: 0; white-space: nowrap; }

/* Period row */
.admin-main .pc-periods { display: flex; }

/* Info dot next to Statistics / Conversion headers */
.admin-main .pc-info {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  cursor: help;
  vertical-align: middle;
  margin-left: 2px;
}
.admin-main .pc-info svg { width: 13px; height: 13px; }
.admin-main .pc-info:hover, .admin-main .pc-info:focus-visible { color: var(--accent); outline: none; }

/* ---- Table -------------------------------------------------------------- */
.admin-main .pc-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--pc-radius-inner);
  overflow: hidden;
  overflow-x: auto;
  background: var(--card-bg);
}
.admin-main .pc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
}
.admin-main .pc-th {
  padding: 10px 9px;
  text-align: left;
  background: var(--bg-surface);
  color: var(--text-muted);
  font: 600 11.5px/1.2 var(--font-ui);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.admin-main .pc-th--actions { text-align: right; }

.admin-main .pc-tr { transition: background 0.12s ease; }
.admin-main .pc-tr + .pc-tr .pc-td { border-top: 1px solid var(--border); }
.admin-main .pc-tr:hover .pc-td { background: var(--bg-surface); }
.admin-main .pc-tr.is-off .pc-code__name { color: var(--text-muted); }
.admin-main .pc-tr.is-off .pc-amount { opacity: 0.55; }

.admin-main .pc-td {
  padding: 10px 9px;
  color: var(--text);
  font: 500 13px/1.4 var(--font-ui);
  vertical-align: middle;
  background: var(--card-bg);
  transition: background 0.12s ease;
}
.admin-main .pc-td--code { min-width: 124px; }
.admin-main .pc-td--stats { min-width: 148px; }
.admin-main .pc-td--conv { white-space: nowrap; }
.admin-main .pc-td--actions { text-align: right; padding-right: 8px; white-space: nowrap; }

.admin-main .pc-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font: 500 13px/1.4 var(--font-ui);
  background: var(--card-bg);
}

/* Promo-code cell: code (copy) + two-line date */
.admin-main .pc-code {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-strong);
}
.admin-main .pc-code__name {
  font: 700 14px/1.2 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.admin-main .pc-code svg { width: 13px; height: 13px; color: var(--text-muted); flex: 0 0 auto; }
.admin-main .pc-code:hover svg { color: var(--accent); }
.admin-main .pc-code__date {
  display: block;
  margin-top: 3px;
  font: 500 11.5px/1.2 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Amount cell */
.admin-main .pc-amount {
  font: 700 14px/1.2 var(--font-ui);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Options badges */
.admin-main .pc-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-main .pc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--pc-radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: 600 11px/1.3 var(--font-ui);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-main .pc-badge--accent {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent-border-soft, transparent);
  color: var(--accent);
}
.admin-main .pc-muted { color: var(--text-muted); }

/* Statistics cell: key/value rows */
.admin-main .pc-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 148px;
}
.admin-main .pc-stat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.admin-main .pc-stat__k {
  font: 500 11.5px/1.3 var(--font-ui);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.admin-main .pc-stat__v {
  font: 700 13px/1.3 var(--font-ui);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Delta chip (vs previous period) */
.admin-main .pc-delta {
  font: 600 11px/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.admin-main .pc-delta--flat { color: var(--text-muted); }
.admin-main .pc-delta--up { color: #05b200; }
.admin-main .pc-delta--down { color: var(--red); }

/* Conversion cell */
.admin-main .pc-conv {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-main .pc-conv__v {
  font: 700 15px/1.2 var(--font-ui);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.admin-main .pc-conv__pp {
  font: 500 11.5px/1.2 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Row action icon buttons */
.admin-main .pc-iconbtn {
  appearance: none;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-main .pc-iconbtn:hover { background: var(--bg-surface); color: var(--text-strong); }
.admin-main .pc-iconbtn[aria-expanded="true"] { background: var(--bg-surface); color: var(--text-strong); }
.admin-main .pc-iconbtn svg { width: 16px; height: 16px; }

/* ---- Bento modal (edit / stats) — gambl dialog, our tokens ------------- */
/* Mounted INSIDE .admin-main (root) so enhanced-select CSS (.admin-main .dd-*)
   applies. z-index 9000 keeps the .dd-pop panel (1000000) above it. */
.admin-main .pc-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-main .pc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: pcFade 0.16s ease-out;
}
.admin-main .pc-modal__card {
  position: relative;
  width: min(94vw, 440px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pcPop 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.admin-main .pc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 12px;
}
.admin-main .pc-modal__title {
  margin: 0;
  font: 700 20px/1.2 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.admin-main .pc-modal__x {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
}
.admin-main .pc-modal__x:hover { background: var(--bg-surface); color: var(--text-strong); }
.admin-main .pc-modal__x svg { width: 18px; height: 18px; }
.admin-main .pc-modal__body {
  padding: 8px 24px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.admin-main .pc-modal__form { gap: 18px; }
.admin-main .pc-modal__note { margin-top: 14px; line-height: 1.5; }
.admin-main .pc-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border);
}
.admin-main .pc-modal__btn {
  appearance: none;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.admin-main .pc-modal__btn:active { transform: scale(0.98); }
.admin-main .pc-modal__btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-strong);
}
.admin-main .pc-modal__btn--ghost:hover { border-color: var(--border-hover); background: var(--bg-surface); }
.admin-main .pc-modal__btn--primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-contrast);
}
.admin-main .pc-modal__btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Statistics modal grid */
.admin-main .pc-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-main .pc-statgrid__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
}
.admin-main .pc-statgrid__k { font: 500 11.5px/1.2 var(--font-ui); color: var(--text-muted); }
.admin-main .pc-statgrid__v {
  font: 700 20px/1.1 var(--font-ui);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---- Info hover tooltip ------------------------------------------------- */
.pc-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: 300px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--text-strong);
  color: var(--bg);
  font: 500 12px/1.45 var(--font-ui);
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.pc-tooltip.is-shown { opacity: 1; transform: none; }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .admin-main .pc-page *,
  .admin-main .pc-modal *,
  .pc-tooltip {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Responsive --------------------------------------------------------- */
@container (max-width: 640px) {
  .admin-main .pc-search { min-width: 100%; max-width: 100%; flex: 1 1 100%; }
  .admin-main .pc-toolbar__spacer { display: none; }
}

/* ---- Shared domains ------------------------------------------------------
   Target picker in the create form + the «Домен» column in the table.
   Both themes are driven by the same tokens the rest of the page uses
   (--bg-surface / --border / --accent), so nothing is hard-coded.            */

/* Segment: My domains / Shared / Everywhere. Same pill chrome as .us-ptabs,
   sized for the narrow create-form column. */
.admin-main .pc-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pc-radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.admin-main .pc-seg__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--pc-radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: 600 11.5px/1.2 var(--font-ui);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-main .pc-seg__btn:hover { color: var(--text); }
.admin-main .pc-seg__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.admin-main .pc-seg__btn.is-active {
  background: var(--card-bg);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.admin-main .pc-seg__btn:active { transform: scale(0.98); }

/* Which shared domains — revealed only when there is more than one. */
.admin-main .pc-sharedlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.admin-main .pc-sharedlist[hidden] { display: none; }
.admin-main .pc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1.3 var(--font-ui);
  color: var(--text);
  cursor: pointer;
}
.admin-main .pc-check input { accent-color: var(--accent); margin: 0; }

/* Domain column. Long hostnames truncate rather than widening the table; the
   full value stays available through the title attribute. */
.admin-main .pc-td--domain { max-width: 220px; }
.admin-main .pc-domain {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.admin-main .pc-domain__name,
.admin-main .pc-domain__all {
  font: 600 12px/1.3 var(--font-ui);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-main .pc-domain__all { color: var(--text-muted); }
.admin-main .pc-domain__count {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--pc-radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font: 600 10.5px/1.4 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-main .pc-chip--shared {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--pc-radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: 600 10.5px/1.4 var(--font-ui);
  white-space: nowrap;
}

/* Worker column (super-admin only) — whose code this is, by panel login.
   Same muted, truncating treatment as the domains page's worker cell. */
.admin-main .pc-td--worker { max-width: 130px; }
.admin-main .pc-worker {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font: 600 12px/1.3 var(--font-ui);
  color: var(--text-muted);
}

/* Pinned actions column — only while the table actually scrolls sideways
   (`is-scrollx`, toggled in bindStickyActions). The cells already carry an
   opaque background in both the resting and hover states, so the pinned column
   never lets rows show through; the hairline marks the seam. */
.admin-main .pc-tablewrap.is-scrollx .pc-th--actions,
.admin-main .pc-tablewrap.is-scrollx .pc-td--actions {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: inset 1px 0 0 var(--border);
}

/* Mobile: the table becomes cards (mobile/tables.css), so the domain cell is a
   plain label+value row and must not keep the desktop width cap.
   NB: @container, not @media — the admin shell is a container and a viewport
   query would fire at the wrong width inside the TG webview. */
@container (max-width: 768px) {
  .admin-main .pc-td--domain { max-width: none; }
  .admin-main .pc-domain { justify-content: flex-end; }
  .admin-main .pc-td--worker { max-width: none; text-align: right; }
  /* Card layout: cells are blocks in a non-scrolling container — un-pin. */
  .admin-main .pc-tablewrap.is-scrollx .pc-td--actions {
    position: static;
    box-shadow: none;
  }
}