/* Play TV | alllist.css | generic listing UI */

/* container ocupa a largura total do pai */
.list-container{
  width: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-4);
}

/* list-card sem bordas arredondadas e ocupando 100% */
.list-card{
  width: 100%; 
  border-radius: 0;   
  overflow: hidden;
}

.table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-width: 720px; /* evita quebrar em telas estreitas (usa scroll) */
}

/* thead sem cor de fundo */
.data-table thead th{
  text-align: left;
  font-weight: var(--fw-regular);
  color: var(--brand);
  background: transparent;       /* <- sem fundo; segue o container */
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
  white-space: nowrap;
}

.data-table tbody td{
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr:hover{
  background: color-mix(in oklab, var(--brand-a15) 40%, transparent);
}

.col-logo{ width: 64px; }
.data-table .avatar{
  width: 40px; height: 40px; object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.data-table .mono{ font-family: var(--font-mono); font-size: var(--fs-sm); }

/* links discretos (sem sublinhado) */
.link-quiet{
  color: var(--text-primary);
  text-decoration: none;
}
.link-quiet:hover{ color: var(--brand-700); }

.col-actions{ width: 160px; text-align: right; }
.data-table td.actions{
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
}

.btn-icon{
  height: 36px; min-width: 36px;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem; cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  box-shadow: var(--shadow-1);
}
.btn-icon .mdi{ font-size: 1.05rem; }
.btn-icon:hover{ background: var(--brand-a15); border-color: var(--brand-600); color: var(--brand-700); transform: translateY(-1px); }
.btn-icon.danger:hover{ border-color: var(--danger); color: var(--danger); }

/* Status chip */
.status-chip{
  height: 32px; padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: default;
}
.status-chip .dot{
  width: 10px; height: 10px; border-radius: 999px; display: inline-block;
  background: var(--border);
}
.status-chip.is-active .dot{ background: var(--success); }
.status-chip.is-pending .dot{ background: var(--warning); }
.status-chip .txt{ text-transform: lowercase; }