/* ==========================================================================
   Tables
   ========================================================================== */

.wc-table-wrapper{

	width:100%;
	overflow-x:auto;

	border:1px solid var(--wc-color-border);
	border-radius:var(--wc-radius-lg);

	background:var(--wc-color-surface);

	box-shadow:var(--wc-shadow-sm);

}

.wc-table{

	width:100%;

	border-collapse:collapse;

	font-size:.95rem;

	color:var(--wc-color-text);

	background:transparent;

}

.wc-table thead{

	background:var(--wc-color-background);

}

.wc-table thead th{

	padding:1rem 1.25rem;

	text-align:left;

	font-size:.82rem;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;

	color:var(--wc-color-muted);

	border-bottom:1px solid var(--wc-color-border);

	white-space:nowrap;

}

.wc-table tbody td{

	padding:1rem 1.25rem;

	border-bottom:1px solid var(--wc-color-border);

	vertical-align:middle;

}

.wc-table tbody tr{

	transition:
		background-color .2s ease;

}

.wc-table tbody tr:hover{

	background:rgba(0,0,0,.02);

}

.wc-table tbody tr:last-child td{

	border-bottom:none;

}

/* ==========================================================================
   Alignment
   ========================================================================== */

.wc-table .text-left{

	text-align:left;

}

.wc-table .text-center{

	text-align:center;

}

.wc-table .text-right{

	text-align:right;

}

/* ==========================================================================
   Actions
   ========================================================================== */

.wc-table-actions{

	display:flex;
	align-items:center;
	gap:.5rem;
	flex-wrap:wrap;

}

.wc-table-actions .wc-button{

	white-space:nowrap;

}

/* ==========================================================================
   Status Cell
   ========================================================================== */

.wc-table-status{

	display:flex;
	align-items:center;
	gap:.5rem;

}

/* ==========================================================================
   Avatar
   ========================================================================== */

.wc-table-avatar{

	display:flex;
	align-items:center;
	gap:.75rem;

}

.wc-table-avatar img{

	width:42px;
	height:42px;

	border-radius:50%;

	object-fit:cover;

	flex-shrink:0;

}

.wc-table-avatar-content{

	display:flex;
	flex-direction:column;
	gap:.2rem;

}

.wc-table-avatar-title{

	font-weight:600;

	color:var(--wc-color-heading);

}

.wc-table-avatar-subtitle{

	font-size:.85rem;

	color:var(--wc-color-muted);

}

/* ==========================================================================
   Price
   ========================================================================== */

.wc-price{

	font-weight:700;

	color:var(--wc-color-heading);

	white-space:nowrap;

}

/* ==========================================================================
   Empty
   ========================================================================== */

.wc-table-empty{

	padding:3rem;

	text-align:center;

	color:var(--wc-color-muted);

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:992px){

	.wc-table{

		min-width:900px;

	}

}

@media (max-width:768px){

	.wc-table-wrapper{

		border-radius:var(--wc-radius-md);

	}

}