/* GSMVanta shared table UX — persistent filters and native Inventory selection feedback. */

.gv-active-filters{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:0;
  padding:10px 14px 11px;
  border-top:1px solid var(--p-border,var(--ui-line,#d9dee7));
  min-width:0;
}
.gv-active-filters[hidden]{display:none}
.gv-filter-chip{
  min-width:0;
  max-width:100%;
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--p-border,var(--ui-line,#d9dee7));
  border-radius:999px;
  background:var(--p-surface-subdued,var(--ui-surface-2,#f7f8fa));
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:inherit;
  font-size:10px;
  font-weight:600;
  overflow-wrap:anywhere;
  cursor:pointer;
  transition:background var(--motion-fast,120ms) var(--ease-ui,cubic-bezier(.2,.8,.2,1)),border-color var(--motion-fast,120ms) var(--ease-ui,cubic-bezier(.2,.8,.2,1)),opacity var(--motion-fast,120ms) var(--ease-ui,cubic-bezier(.2,.8,.2,1));
}
.gv-filter-chip:hover{background:var(--p-surface-hover,var(--ui-surface-3,#eef2f5));border-color:color-mix(in srgb,var(--p-action,var(--ui-accent,#2563eb)) 28%,var(--p-border,var(--ui-line,#d9dee7)))}


.gv-filter-chip span[aria-hidden="true"]{font-size:13px;line-height:1}
.gv-clear-filters{
  min-height:30px;
  padding:5px 8px;
  border:0;
  background:transparent;
  color:var(--p-text-secondary,var(--ui-muted,#667085));
  font:inherit;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
}
.gv-clear-filters:hover{color:var(--p-text,var(--ui-text,#111827))}
.is-table-filtering{opacity:.72;transition:opacity var(--motion-normal,180ms) var(--ease-ui,cubic-bezier(.2,.8,.2,1))}

.inventory-bulk-controls .gv-selection-count{
  align-self:center;
  min-width:66px;
  color:var(--p-text-secondary,var(--ui-muted,#667085));
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
}
.inventory-table tr.gv-row-selected > td{
  background:color-mix(in srgb,var(--p-action,var(--accent,#2563eb)) 6%,var(--p-surface,var(--surface,#fff)));
}
.inventory-table tr.gv-row-selected > td:first-child{
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--p-action,var(--accent,#2563eb)) 62%,transparent);
}

@media(max-width:760px){
  .gv-active-filters{align-items:stretch}
  .gv-filter-chip,.gv-clear-filters{min-height:36px}
  .inventory-bulk-controls{min-width:0;max-width:100%;flex-wrap:wrap}
  .inventory-bulk-controls .gv-selection-count{grid-column:1/-1;text-align:start}
}

@media(prefers-reduced-motion:reduce){
  .gv-filter-chip,.is-table-filtering{transition:none}
}

/* Account-aware admin filtering uses a real loading skeleton rather than
   leaving a faded table on screen while the replacement request is running. */
.is-table-filtering{position:relative;min-height:180px;overflow:hidden}
.is-table-filtering > :not(.gv-table-skeleton){opacity:.16;pointer-events:none}
.gv-table-skeleton{
  position:absolute;inset:0;z-index:8;padding:14px;background:color-mix(in srgb,var(--p-surface,var(--ui-surface,#fff)) 94%,transparent);
  display:grid;align-content:start;gap:9px;
}
.gv-table-skeleton-row{display:grid;grid-template-columns:1.25fr 1fr .8fr .75fr .45fr;gap:12px;min-height:38px;align-items:center}
.gv-table-skeleton-row span{display:block;height:11px;border-radius:999px;background:linear-gradient(90deg,var(--p-surface-subdued,var(--ui-surface-2,#eef1f4)),color-mix(in srgb,var(--p-border,var(--ui-line,#d8dee4)) 65%,var(--p-surface,var(--ui-surface,#fff))),var(--p-surface-subdued,var(--ui-surface-2,#eef1f4)));background-size:220% 100%;animation:gvSkeletonSweep 1.15s ease-in-out infinite}
.gv-table-skeleton-row span:nth-child(2n){width:78%}.gv-table-skeleton-row span:nth-child(3n){width:58%}
@keyframes gvSkeletonSweep{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:760px){.gv-table-skeleton-row{grid-template-columns:1.3fr .8fr}.gv-table-skeleton-row span:nth-child(n/**/+3){display:none}}
@media(prefers-reduced-motion:reduce){.gv-table-skeleton-row span{animation:none}}

/* theme-safe filter states.  Active filters inherit the current
   workspace surface instead of falling back to a light-only white pill. */
.gv-active-filters{
  background:var(--p-surface,var(--ui-surface,#fff));
  border-color:var(--p-border,var(--ui-line,#d9dee7));
}
.gv-filter-chip{
  border-color:color-mix(in srgb,var(--p-action,var(--ui-accent,#17884d)) 24%,var(--p-border,var(--ui-line,#d9dee7)));
  background:color-mix(in srgb,var(--p-action,var(--ui-accent,#17884d)) 10%,var(--p-surface,var(--ui-surface,#fff)));
  color:var(--p-text,var(--ui-text,#111827));
}
.gv-filter-chip:focus-visible,.gv-clear-filters:focus-visible{
  outline:2px solid var(--p-focus,var(--ui-accent,#17884d));
  outline-offset:2px;
}
.gv-filter-chip:hover{
  background:color-mix(in srgb,var(--p-action,var(--ui-accent,#17884d)) 15%,var(--p-surface,var(--ui-surface,#fff)));
}

/* ========================================================================== 
   canonical table geometry + section copy rhythm
   All workspace data tables remain real tables on every viewport.  Compact
   screens pan the table horizontally; no table is converted to cards/rows.
   ========================================================================== */

/* Section/table headings use one predictable text stack.  The title, copy and
   actions each keep their own lane instead of collapsing into one line. */


.api-editor-section-head{
  display:grid;
  align-content:center;
  gap:4px;
}
.api-editor-section-head > :is(b,span,small){margin:0;min-width:0;line-height:1.4}

/* Every known table viewport is the only horizontal scrolling surface. */
:where(
  .gv-table-viewport,.gv-table-auto-wrap,.table-wrap,.table-scroll,.responsive-table,
  .gv-data-table-wrap,.inventory-table-scroll,.security-table-scroll,
  .customer-table-scroll,.transaction-table-wrap,
  .wallet-transaction-table-wrap,.topup-table-wrap,.api-sync-result-table-wrap,
  .api-inline-sync-table-wrap,.vc-table-wrap,.orders-table-wrap,.gv-orders-table-wrap
){
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  scrollbar-width:thin;
  box-sizing:border-box;
}
.gv-table-auto-wrap{
  border-top:1px solid var(--p-border,var(--theme-border,#d9dee7));
  border-bottom:1px solid var(--p-border,var(--theme-border,#d9dee7));
}

/* Pre-paint fallback and JS-managed final state both preserve native table semantics. */
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table){
  display:table !important;
  width:100%;
  max-width:none;
  border-collapse:collapse;
  border-spacing:0;
}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > colgroup{display:table-column-group !important}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > thead{display:table-header-group !important}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > tbody{display:table-row-group !important}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > tfoot{display:table-footer-group !important}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > :is(thead,tbody,tfoot) > tr{
  display:table-row !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > :is(thead,tbody,tfoot) > tr > :is(th,td){
  display:table-cell !important;
  width:auto;
  max-width:none;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  vertical-align:middle;
  box-sizing:border-box;
}
:is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table) > :is(thead,tbody,tfoot) > tr > td::before{
  display:none !important;
  content:none !important;
}

/* The JS assigns --gv-table-auto-min from the real number of columns.  On a
   wide monitor the table simply fills its panel; on a phone it gets enough
   horizontal canvas that labels and values never collapse vertically. */
table.gv-managed-table{
  min-width:max(100%,var(--gv-table-auto-min,720px)) !important;
  table-layout:auto;
}
table.gv-managed-table[data-gv-column-layout="manual"]{
  min-width:max(100%,var(--gv-table-auto-min,720px)) !important;
}
table.gv-managed-table thead th{
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
table.gv-managed-table tbody td{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}

/* Long identity/name/description cells may wrap naturally inside a deliberately
   wide column. They never shrink into one-character vertical stacks. */
table.gv-managed-table :is(
  .table-primary,.table-secondary,.service-name-link,.order-service-link,
  .orders-service-cell,.orders-target-cell,.customer-identity,
  .provider-service-cell,.api-log-message,.campaign-url-cell,
  [class*="service-cell"],[class*="name-cell"],[class*="description-cell"],
  [class*="message-cell"],[class*="subject-cell"]
){
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
table.gv-managed-table td.gv-table-copy-cell > :is(.table-primary,b,strong){
  display:block;
  margin:0;
  line-height:1.35;
}
table.gv-managed-table td.gv-table-copy-cell > :is(.table-secondary,small){
  display:block;
  margin-top:4px;
  line-height:1.4;
}
table.gv-managed-table td :is(input,select,.input){
  writing-mode:horizontal-tb !important;
}
table.gv-managed-table td :is(select,.input):not([type="checkbox"]):not([type="radio"]){
  min-width:150px;
}
table.gv-managed-table :is(.actions-column,.action-cell,.col-actions,.row-actions,.table-actions,.action-buttons){
  white-space:nowrap !important;
}
table.gv-managed-table :is(.row-actions,.table-actions,.action-buttons){
  flex-wrap:nowrap;
}

/* Empty results are intentionally inset from the table rule. */
table.gv-managed-table td.gv-table-empty-cell{
  padding:26px 18px !important;
  white-space:normal !important;
}
table.gv-managed-table td.gv-table-empty-cell > :is(
  .empty,.empty-state,[class*="empty-state"],[class*="table-empty"],[class*="catalog-empty"]
){
  width:100%;
  min-height:72px;
  margin:0;
  padding:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:5px;
  text-align:center;
  line-height:1.45;
}
table.gv-managed-table td.gv-table-empty-cell > :is(
  .empty,.empty-state,[class*="empty-state"],[class*="table-empty"],[class*="catalog-empty"]
) > :is(b,strong,h2,h3,p,small,span){
  margin:0;
}

.gv-table-viewport:focus-visible{
  outline:2px solid var(--p-focus,var(--theme-accent,var(--accent,#15956f)));
  outline-offset:-2px;
}
.gv-table-viewport.is-gv-scrollable:not(.is-gv-scroll-start){
  box-shadow:inset 16px 0 15px -16px color-mix(in srgb,currentColor 28%,transparent);
}
.gv-table-viewport.is-gv-scrollable:not(.is-gv-scroll-end){
  box-shadow:inset -16px 0 15px -16px color-mix(in srgb,currentColor 28%,transparent);
}

@media(max-width:760px){
  
  

  :is(table.gv-unified-table,table.gv-data-table,table.gv-managed-table){
    width:100% !important;
    max-width:none !important;
    table-layout:auto !important;
  }
  table.gv-managed-table{
    min-width:max(100%,var(--gv-table-auto-min,720px)) !important;
  }
  table.gv-managed-table :is(th,td){
    padding:10px 9px;
    font-size:inherit;
  }
  table.gv-managed-table td.gv-table-empty-cell{padding:22px 14px !important}
}

@media(max-width:480px){
  table.gv-managed-table :is(th,td){padding:9px 8px}
}

/* Table-adjacent custom headers that predate .panel-head use the same copy
   rhythm, so title and description never share a baseline or touch a divider. */
:where(
  .landing-service-list-head,.updates-card-head,.security-card-head,
  .provider-services-head,.api-live-sync-head,.catalog-ordering-main-head
) > div:first-child{
  min-width:0;
}
:where(
  .landing-service-list-head,.updates-card-head,.security-card-head,
  .provider-services-head,.api-live-sync-head
) > div:first-child:not(.catalog-order-toolbar){
  display:grid;
  align-content:center;
  gap:4px;
}
:where(
  .landing-service-list-head,.updates-card-head,.security-card-head,
  .provider-services-head,.api-live-sync-head
) > div:first-child:not(.catalog-order-toolbar) > :is(h1,h2,h3,h4,b,strong,p,small,span){
  margin:0;
  min-width:0;
}
:where(
  .landing-service-list-head,.updates-card-head,.security-card-head,
  .provider-services-head,.api-live-sync-head
) > div:first-child:not(.catalog-order-toolbar) > :is(p,small,span){
  line-height:1.45;
}
:where(.security-sessions-head-copy,[class*="table-head-copy"],[class*="table-title-copy"]){
  min-width:0;
  display:grid;
  align-content:center;
  gap:4px;
}
:where(.security-sessions-head-copy,[class*="table-head-copy"],[class*="table-title-copy"]) > :is(h1,h2,h3,h4,p,small,b,strong,span){
  margin:0;
  min-width:0;
}
:where(.security-sessions-head-copy,[class*="table-head-copy"],[class*="table-title-copy"]) > :is(p,small,span){line-height:1.45}
.service-editor-section-heading > div{
  min-width:0;
  display:grid;
  gap:4px;
}
.service-editor-section-heading > div > :is(h1,h2,h3,h4,p,small){margin:0;min-width:0}
.service-editor-section-heading > div > :is(p,small){line-height:1.45}

/* Direct empty cells (for example Security/Catalog tables) receive the same
   breathing room even when they do not contain a nested .empty-state block. */
table.gv-managed-table td.gv-table-empty-cell:not(:has(> .empty,> .empty-state,> [class*="empty-state"],> [class*="table-empty"],> [class*="catalog-empty"])){
  min-height:72px;
  text-align:center;
  line-height:1.45;
}