/* =============================================================================
   pot-lists.css — THEME-WIDE list tables (2026-10-04, r84)
   Every WHMCS list page — services, domains, invoices, tickets, quotes, emails,
   affiliates, SSL, domain pricing — renders the SAME DataTables component
   (includes/tablelist.tpl). Restyled here once:
     · rows become separated glass cards (rounded via clip-path on the ROW, so the
       shape survives DataTables "responsive" hiding the last cells)
     · slim mono header, gold sort state
     · glass search pill, pill pagination, styled page-length select
     · ONE status-pill system for every status class WHMCS emits
   ⛔ The sidebar status filter matches the status cell's HTML with  [~>]\s*Text\s*[<~]
      — pills are pure CSS on the existing <span class="label status status-x">.
   Loaded after pot-portal.css; specificity (#main-body …) beats the stock
   dark.theme.min.css rules without touching them.
   ============================================================================= */

#main-body {
  --pl-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pl-disp: 'Space Grotesk', 'Inter', sans-serif;
  --pl-card: rgba(255,255,255,.045);
  --pl-card-hi: rgba(255,138,0,.075);
  --pl-edge: rgba(255,255,255,.08);
  --pl-radius: 14px;
}

/* ---- the table ------------------------------------------------------------- */
#main-body .dataTables_wrapper table.table-list,
#main-body table.table-list {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  margin: 2px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#main-body table.table-list thead th {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 16px 2px !important;
  font: 600 11px/1.2 var(--pl-mono) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pot-faint, #827798) !important;
  white-space: nowrap;
}
#main-body table.table-list thead th.sorting_asc,
#main-body table.table-list thead th.sorting_desc { color: #ffcf6b !important; background: transparent !important; }
#main-body table.dataTable thead > tr > th.sorting::before,
#main-body table.dataTable thead > tr > th.sorting::after { opacity: .25; }
#main-body table.dataTable thead > tr > th.sorting_asc::before,
#main-body table.dataTable thead > tr > th.sorting_desc::after { opacity: 1; color: #ff8a00; }

/* card rows */
#main-body table.table-list tbody tr {
  clip-path: inset(0 round var(--pl-radius));
  background: transparent !important;
}
#main-body table.table-list tbody td {
  background: var(--pl-card) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28);
  padding: 16px !important;
  vertical-align: middle !important;
  color: var(--pot-text, #fbf6ff);
  transition: background .18s ease, box-shadow .18s ease;
}
#main-body table.table-list tbody td:first-child { box-shadow: inset 2px 0 0 rgba(255,168,61,.35), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28); }
html[dir="rtl"] #main-body table.table-list tbody td:first-child { box-shadow: inset -2px 0 0 rgba(255,168,61,.35), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28); }
#main-body table.table-list tbody tr[onclick] { cursor: pointer; }
#main-body table.table-list tbody tr:hover td {
  background: var(--pl-card-hi) !important;
  box-shadow: inset 0 1px 0 rgba(255,180,61,.35), inset 0 -1px 0 rgba(255,138,0,.18);
}
#main-body table.table-list tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #ff8a00, inset 0 1px 0 rgba(255,180,61,.35), inset 0 -1px 0 rgba(255,138,0,.18); }
html[dir="rtl"] #main-body table.table-list tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 #ff8a00, inset 0 1px 0 rgba(255,180,61,.35), inset 0 -1px 0 rgba(255,138,0,.18); }
#main-body table.table-list tbody td a:not(.btn):not(.label) { color: #ffb43d; }
#main-body table.table-list tbody td .text-muted,
#main-body table.table-list tbody td small { color: var(--pot-faint, #827798) !important; }
#main-body table.table-list td.dataTables_empty {
  padding: 34px 16px !important; text-align: center;
  color: var(--pot-faint, #827798) !important; font: 500 14px/1.5 var(--pl-disp);
}

/* DataTables "responsive": the expand control and the child row */
#main-body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
#main-body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background: var(--pot-grad, linear-gradient(120deg,#d68f12,#f0aa30,#ffce6b)) !important;
  border: 0 !important; box-shadow: 0 0 10px rgba(255,138,0,.45) !important; color: #fff !important;
}
#main-body table.table-list tbody tr.child td { background: rgba(7,3,16,.55) !important; }
#main-body table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--pl-edge) !important; }
#main-body table.dataTable > tbody > tr.child span.dtr-title {
  font: 600 10.5px/1.4 var(--pl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pot-faint, #827798);
}

/* ---- toolbar: search / info / length / pagination ------------------------- */
#main-body .dataTables_wrapper .dataTables_filter { margin-top: 0 !important; margin-bottom: 4px; }
#main-body .dataTables_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; width: 340px; max-width: 100%; margin-inline-start: auto; }
#main-body .dataTables_wrapper .dataTables_filter label::before {
  content: "\f002"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%);
  color: #ffcf6b; font-size: 14px; pointer-events: none; z-index: 2;
}
#main-body .dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_wrapper .dataTables_filter label .form-control {
  width: 100% !important; max-width: 420px; margin: 0 !important;
  height: 44px !important; padding: 0 16px 0 44px !important;
  background: rgba(7,3,16,.55) !important; background-image: none !important;
  border: 1px solid rgba(255,168,61,.26) !important; border-radius: 999px !important;
  color: var(--pot-text, #fbf6ff) !important; font-size: 14px !important; box-shadow: none !important;
}
html[dir="rtl"] #main-body .dataTables_wrapper .dataTables_filter input { padding: 0 44px 0 16px !important; }
#main-body .dataTables_wrapper .dataTables_filter input:focus { border-color: #ff8a00 !important; box-shadow: 0 0 0 3px rgba(255,138,0,.16) !important; }
#main-body .dataTables_wrapper .dataTables_info {
  font: 500 11.5px/1.6 var(--pl-mono) !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pot-faint, #827798) !important; padding-top: 10px !important;
}
#main-body .dataTables_wrapper .dataTables_length,
#main-body .dataTables_wrapper .dataTables_length label { color: var(--pot-faint, #827798) !important; font-size: 13px; }
#main-body .dataTables_wrapper .dataTables_length select {
  background-color: rgba(7,3,16,.55) !important; color: var(--pot-text, #fbf6ff) !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important;
  padding: 6px 28px 6px 12px !important; height: auto !important; margin: 0 6px !important;
}
#main-body .dataTables_wrapper .dataTables_paginate .pagination { gap: 6px; flex-wrap: wrap; }
#main-body .dataTables_wrapper .dataTables_paginate .page-item .page-link {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px !important; margin: 0 !important;
  background: rgba(255,255,255,.045) !important; color: var(--pot-dim, #b9aed3) !important;
  border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px !important;
  font: 600 13px/1 var(--pl-disp); box-shadow: none !important; transition: .16s;
}
#main-body .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { color: #fff !important; border-color: rgba(255,168,61,.45) !important; background: rgba(255,138,0,.10) !important; }
#main-body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--pot-grad, linear-gradient(120deg,#d68f12,#f0aa30,#ffce6b)) !important; border-color: transparent !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(74,42,0,.55);
}
#main-body .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: .4; pointer-events: none; }

/* ---- status pills: one system for every status class WHMCS emits ---------- */
.label.status {
  --s: 255,180,61;
  display: inline-flex !important; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px !important; border-radius: 999px !important;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(var(--s)) !important; background-color: rgba(var(--s), .10);
  border: 1px solid rgba(var(--s), .34); text-shadow: none !important; white-space: nowrap;
}
.label.status::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--s)); box-shadow: 0 0 8px rgba(var(--s), .85);
}
/* good */
.label.status.status-active, .label.status.status-paid, .label.status.status-completed,
.label.status.status-accepted { --s: 35,196,131; }
.label.status.status-active::before, .label.status.status-paid::before { animation: potPillPulse 2.4s ease-in-out infinite; }
/* needs attention / in progress */
.label.status.status-pending, .label.status.status-unpaid, .label.status.status-payment-pending,
.label.status.status-pending-transfer, .label.status.status-pending-registration, .label.status.status-grace,
.label.status.status-on-hold, .label.status.status-in-progress, .label.status.status-delivered,
.label.status.status-answered, .label.status.status-customer-reply, .label.status.status-open { --s: 255,180,61; }
/* problem */
.label.status.status-overdue, .label.status.status-suspended, .label.status.status-fraud,
.label.status.status-expired, .label.status.status-redemption, .label.status.status-collections,
.label.status.status-dead, .label.status.status-lost { --s: 242,92,112; }
/* finished / inactive */
.label.status.status-cancelled, .label.status.status-terminated, .label.status.status-refunded,
.label.status.status-closed, .label.status.status-transferred-away, .label.status.status-draft,
.label.status.status-inactive { --s: 170,160,196; }
/* tickets may carry an admin-chosen colour inline — keep it, make the text readable */
.label.status[style*="background"] { color: #fff !important; border-color: transparent; }
.label.status[style*="background"]::before { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }
html[dir="rtl"] .label.status { font-family: 'Tajawal', 'Cairo', system-ui, sans-serif !important; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
@keyframes potPillPulse { 50% { box-shadow: 0 0 2px rgba(var(--s), .4); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .label.status::before { animation: none !important; } }

/* =============================================================================
   MY SERVICES (clientareaproducts.tpl fork) — richer row content
   ============================================================================= */
.pot-svc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
}
.pot-svc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pot-svc-chip {
  --s: 185,174,211;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  color: var(--pot-dim, #b9aed3); font: 600 12.5px/1 var(--pl-disp, 'Space Grotesk', sans-serif);
  transition: .16s;
}
html[dir="rtl"] .pot-svc-chip { padding: 7px 14px 7px 8px; }
.pot-svc-chip b {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  font: 700 11.5px/1 var(--pl-mono, monospace); color: rgb(var(--s)); background: rgba(var(--s), .14);
}
.pot-svc-chip.c-ok { --s: 35,196,131; } .pot-svc-chip.c-warn { --s: 255,180,61; }
.pot-svc-chip.c-bad { --s: 242,92,112; } .pot-svc-chip.c-off { --s: 170,160,196; }
.pot-svc-chip:hover { color: #fff; border-color: rgba(255,168,61,.40); }
.pot-svc-chip.is-on { color: #fff; background: rgba(255,138,0,.14); border-color: rgba(255,168,61,.55); box-shadow: 0 0 0 1px rgba(255,168,61,.25) inset; }
.pot-svc-chip:focus-visible { outline: 2px solid #ffcf6b; outline-offset: 2px; }
.pot-svc-next { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--pot-dim, #b9aed3); font-size: 13px; }
.pot-svc-next i { color: #ffcf6b; }
.pot-svc-next span { font: 600 10.5px/1 var(--pl-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--pot-faint, #827798); }
html[dir="rtl"] .pot-svc-next span { font-family: 'Tajawal', sans-serif; letter-spacing: 0; font-size: 12.5px; }
.pot-svc-next b { color: var(--pot-text, #fbf6ff); font-weight: 600; }
.pot-svc-next em { font-style: normal; color: #ffb43d; }

/* column 0 — type tile (+ SSL badge) */
#main-body .pot-svc table.table-list tbody td.pot-svc-c0 { width: 76px; text-align: center; padding-inline: 14px 4px !important; position: relative; }
.pot-svc-ic {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  color: #ffcf6b; font-size: 19px;
  background: linear-gradient(160deg, rgba(255,138,0,.22), rgba(255,138,0,.05));
  border: 1px solid rgba(255,168,61,.32);
  box-shadow: 0 8px 18px -8px rgba(255,138,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
#main-body table.table-list tbody tr:hover .pot-svc-ic { transform: translateY(-2px) scale(1.04); color: #fff; background: linear-gradient(160deg, rgba(255,138,0,.42), rgba(255,138,0,.12)); }
.pot-svc-ssl { position: absolute; bottom: 10px; inset-inline-end: 4px; width: 18px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
/* finished services sit back */
.pot-svc-row.pot-st-cancelled .pot-svc-ic, .pot-svc-row.pot-st-terminated .pot-svc-ic,
.pot-svc-row.pot-st-fraud .pot-svc-ic {
  color: var(--pot-faint, #827798); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none;
}
#main-body .pot-svc table.table-list tbody tr.pot-st-cancelled td,
#main-body .pot-svc table.table-list tbody tr.pot-st-terminated td { background: rgba(255,255,255,.025) !important; }
.pot-svc-row.pot-st-cancelled .pot-svc-name, .pot-svc-row.pot-st-terminated .pot-svc-name,
.pot-svc-row.pot-st-cancelled .pot-svc-amt, .pot-svc-row.pot-st-terminated .pot-svc-amt { color: var(--pot-dim, #b9aed3); }
.pot-svc-row.pot-st-suspended td:first-child { box-shadow: inset 3px 0 0 rgba(242,92,112,.8), inset 0 1px 0 rgba(255,255,255,.07) !important; }

/* column 1 — product */
#main-body .pot-svc table.table-list tbody td.pot-svc-c1 { text-align: start; }
.pot-svc-grp {
  display: block; margin-bottom: 5px;
  font: 600 10.5px/1 var(--pl-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #ffcf6b;
}
html[dir="rtl"] .pot-svc-grp { font-family: 'Tajawal', sans-serif; letter-spacing: 0; font-size: 12px; }
.pot-svc-name { display: block; font: 700 16px/1.25 var(--pl-disp, 'Space Grotesk', sans-serif); color: var(--pot-text, #fbf6ff); }
.pot-svc-addr {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 3px 3px 10px;
  background: rgba(7,3,16,.6); border: 1px solid rgba(255,168,61,.24); border-radius: 9px;
}
html[dir="rtl"] .pot-svc-addr { padding: 3px 10px 3px 3px; }
.pot-svc-addr code {
  background: none; padding: 0; color: #ffcf6b; font: 600 12.5px/1.2 var(--pl-mono, monospace);
  direction: ltr; unicode-bidi: isolate;
}
.pot-svc-copy {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 0; background: transparent; color: var(--pot-faint, #827798); font-size: 12px; transition: .16s;
}
.pot-svc-copy:hover { background: rgba(255,138,0,.16); color: #fff; }
.pot-svc-copy.done { background: rgba(35,196,131,.18); color: #6ff0b7; }
.pot-svc-copy.done i::before { content: "\f00c"; font-weight: 900; }
.pot-svc-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 13px;
  color: #ffb43d !important; text-decoration: none !important; direction: ltr; unicode-bidi: isolate;
}
.pot-svc-link i { font-size: 11px; opacity: .8; }
.pot-svc-link .pot-svc-ext { opacity: 0; transform: translate(-3px, 3px); transition: .16s; }
.pot-svc-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pot-svc-link:hover .pot-svc-ext { opacity: .8; transform: none; }

/* column 2 — price */
#main-body .pot-svc table.table-list tbody td.pot-svc-c2 { white-space: nowrap; }
.pot-svc-amt { display: inline-block; direction: ltr; unicode-bidi: isolate; /* "$9.00 USD" must not bidi-flip to "USD $9.00" in Arabic */ font: 700 17px/1.2 var(--pl-disp, 'Space Grotesk', sans-serif); color: var(--pot-text, #fbf6ff); }
.pot-svc-cyc { display: block; margin-top: 3px; font: 500 11px/1 var(--pl-mono, monospace) !important; letter-spacing: .1em; text-transform: uppercase; }
html[dir="rtl"] .pot-svc-cyc { font-family: 'Tajawal', sans-serif !important; letter-spacing: 0; font-size: 12.5px !important; }

/* column 3 — next due + countdown */
#main-body .pot-svc table.table-list tbody td.pot-svc-c3 { white-space: nowrap; }
.pot-svc-due { display: block; font: 600 14px/1.3 var(--pl-disp, 'Space Grotesk', sans-serif); color: var(--pot-text, #fbf6ff); }
.pot-svc-cd { display: inline-block; margin-top: 5px; font: 600 11px/1 var(--pl-mono, monospace); letter-spacing: .06em; color: var(--pot-faint, #827798); }
.pot-svc-cd:empty { display: none; }
.pot-svc-cd.is-soon { color: #ffb43d; }
.pot-svc-cd.is-late { color: #ff8a98; }
html[dir="rtl"] .pot-svc-cd { font-family: 'Tajawal', sans-serif; letter-spacing: 0; font-size: 12.5px; }
.pot-svc-row.pot-st-cancelled .pot-svc-due, .pot-svc-row.pot-st-terminated .pot-svc-due { color: var(--pot-faint, #827798); text-decoration: line-through; text-decoration-color: rgba(170,160,196,.45); }

/* column 4 — status + chevron */
#main-body .pot-svc table.table-list tbody td.pot-svc-c4 { white-space: nowrap; }
.pot-svc-go { margin-inline-start: 14px; color: var(--pot-faint, #827798); font-size: 12px; transition: transform .18s ease, color .18s ease; }
html[dir="rtl"] .pot-svc-go { transform: scaleX(-1); }
#main-body table.table-list tbody tr:hover .pot-svc-go { color: #ffb43d; transform: translateX(4px); }
html[dir="rtl"] #main-body table.table-list tbody tr:hover .pot-svc-go { transform: scaleX(-1) translateX(4px); }

@media (max-width: 575.98px) {
  .pot-svc-summary { padding: 12px; }
  .pot-svc-ic { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c0 { width: 56px; }
  .pot-svc-name { font-size: 15px; }
}

/* ---- My Services on phones: a real stacked card, not a sideways-scrolling table.
   This WHMCS build doesn't collapse DataTables columns (Responsive isn't active —
   measured collapsed:false with all 5 columns at 375px), so the row is re-laid
   as a grid. Sorting by header isn't offered here; the default order (live first,
   soonest renewal on top), the chips and search cover phones. ---------------- */
@media (max-width: 767.98px) {
  #main-body .pot-svc table.table-list,
  #main-body .pot-svc table.table-list tbody { display: block; width: 100% !important; }
  #main-body .pot-svc table.table-list thead { display: none; }
  #main-body .pot-svc table.table-list tbody tr {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "ic name st" "ic price due";
    column-gap: 12px; row-gap: 10px; align-items: center;
    margin: 0 0 10px; padding: 14px;
    background: var(--pl-card) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28);
  }
  #main-body .pot-svc table.table-list tbody tr:hover { background: var(--pl-card-hi) !important; }
  #main-body .pot-svc table.table-list tbody td,
  #main-body .pot-svc table.table-list tbody tr:hover td {
    display: block; padding: 0 !important; width: auto !important;
    background: transparent !important; box-shadow: none !important;
  }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c0 { grid-area: ic; align-self: start; width: auto !important; padding: 0 !important; text-align: start; }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c1 { grid-area: name; }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c4 { grid-area: st; align-self: start; text-align: end; }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c2 { grid-area: price; text-align: start; }
  #main-body .pot-svc table.table-list tbody td.pot-svc-c3 { grid-area: due; text-align: end; }
  #main-body .pot-svc table.table-list tbody td.dataTables_empty { grid-column: 1 / -1; padding: 26px 0 !important; }
  .pot-svc-go { display: none; }
  .pot-svc-amt { font-size: 15.5px; }
  .pot-svc-due { font-size: 13px; }
  .pot-svc-ssl { bottom: -4px; inset-inline-end: -4px; }
  /* row-level states (the cells are transparent here) */
  #main-body .pot-svc table.table-list tbody tr.pot-st-cancelled,
  #main-body .pot-svc table.table-list tbody tr.pot-st-terminated { background: rgba(255,255,255,.025) !important; }
  #main-body .pot-svc table.table-list tbody tr.pot-st-suspended { box-shadow: inset 3px 0 0 rgba(242,92,112,.8), inset 0 1px 0 rgba(255,255,255,.07); }
  html[dir="rtl"] #main-body .pot-svc table.table-list tbody tr.pot-st-suspended { box-shadow: inset -3px 0 0 rgba(242,92,112,.8), inset 0 1px 0 rgba(255,255,255,.07); }
  .pot-svc-row.pot-st-suspended td:first-child { box-shadow: none !important; }
  .pot-svc-chips { width: 100%; }
  .pot-svc-next { width: 100%; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.08); }
}
/* every other list page keeps the stock behaviour on phones — scroll sideways */
@media (max-width: 767.98px) {
  #main-body .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}