/*
    Custom PWA Table Styles
    Prefix: pwa-tbl-
*/

/* 
    Responsive Table Container 
    - Enables horizontal scrolling on smaller viewports.
    - Adds a border to indicate a scrollable area.
*/
.pwa-tbl-container {
	overflow-x: auto;
	/* border: 1px solid #dee2e6; */
	border-radius: 0.25rem;
}

/* 
    Base Table Styling
    - Overrides default table styles from frameworks like Bootstrap.
*/
.pwa-tbl {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 1em 0 !important;
	font-size: 0.9rem;
	background-color: #ffffff !important;
}

/* 
    Table Header (thead)
    - Custom background color, text color, and font weight.
    - A bottom border to separate the header from the body.
*/
.pwa-tbl thead th {
	background-color: #6c757d !important;
	color: #ffffff !important;
	text-align: left !important;
	font-weight: 100 !important;
	border-bottom: 2px solid #dee2e6 !important;
}

/* 
    Table Cells (th, td)
    - Consistent padding, vertical alignment, and borders.
*/
.pwa-tbl th,
.pwa-tbl td {
	padding: 5px !important;
	vertical-align: middle !important;
	border: 1px solid #dee2e6 !important;
}

/* 
    Zebra-Striping for Table Rows
    - Alternating row colors for better readability.
*/
/* .pwa-tbl tbody tr:nth-child(odd) {
	background-color: #f2f2f2;
} */

/* 
    Hover Effect for Table Rows
    - Provides visual feedback when hovering over a table row.
*/
.pwa-tbl tbody tr:hover {
	background-color: #e9ecef;
}

/* 
    Sortable Table Headers
    - Interactive headers that can be clicked to sort data
*/
.pwa-tbl thead th.sortable {
	cursor: pointer;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color 0.2s ease;
}

.pwa-tbl thead th.sortable:hover {
	background-color: #5a6268 !important;
}

/* Sort indicators */
.pwa-tbl thead th.sortable::after {
	content: '\2195';
	/* Up-down arrow */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8em;
	color: #ffffff;
	opacity: 0.6;
}

.pwa-tbl thead th.sortable.sort-asc::after {
	content: '\2191';
	/* Up arrow */
	opacity: 1;
}

.pwa-tbl thead th.sortable.sort-desc::after {
	content: '\2193';
	/* Down arrow */
	opacity: 1;
}