.stc-table-wrapper {
	direction: rtl;
	width: 100%;
	margin: 20px 0;
	font-family: inherit;
}

.stc-table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
	background: #f7f8fa;
	border: 1px solid #e2e2e2;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

.stc-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.stc-toolbar-image {
	max-height: 42px;
	max-width: 90px;
	object-fit: contain;
	border-radius: 4px;
}

.stc-toolbar-title {
	font-weight: 700;
	color: #29395a;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stc-toolbar-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.stc-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #29395a;
	color: #29395a;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.stc-toolbar-btn svg {
	width: 16px;
	height: 16px;
}

.stc-toolbar-btn:hover {
	background: #29395a;
	color: #fff;
}

.stc-table-wrapper:has(.stc-table-toolbar) .stc-table-scroll {
	border-radius: 0 0 8px 8px;
}

.stc-table-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
}

table.stc-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	font-size: 15px;
}

table.stc-table th,
table.stc-table td {
	border: 1px solid #e2e2e2;
	padding: 10px 14px;
	text-align: right;
	vertical-align: middle;
}

table.stc-table thead th {
	background: #29395a;
	color: #ffffff;
	font-weight: 700;
}

/* Freeze header row: opt-in per table via the "فریز کردن سطر هدر"
   setting. Sticks to the top of the viewport while scrolling through
   a long table (relative to whatever scrolling ancestor exists). */
.stc-table-wrapper.stc-freeze-header table.stc-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* Per-cell formatting classes (used instead of an inline style="" attribute
   so alignment/bold survive any content filter that strips style attrs,
   and so theme table styles can't accidentally win over them). */
.stc-align-right { text-align: right !important; }
.stc-align-center { text-align: center !important; }
.stc-align-left { text-align: left !important; }
.stc-bold { font-weight: bold !important; }

/* The collapsed "more details" row and its arrow toggle only exist
   for mobile; hidden entirely on desktop. */
.stc-detail-row,
.stc-expand-btn {
	display: none;
}

/*
 * Mobile: keep the real <table> layout (no card conversion). Columns
 * marked "hidden" disappear entirely; columns marked "detail" are
 * hidden individually and instead surface — all together, on a single
 * extra row — when the small inline arrow (next to the first shown
 * column's content) is tapped. Requires JS to toggle; without JS the
 * table still shows every "always visible" column normally (with
 * horizontal scroll as a fallback if needed).
 */
@media (max-width: 767px) {
	/* logo/title stay on their own line; export/print buttons drop to
	   a new line below them instead of squeezing side-by-side. */
	.stc-toolbar-left {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	table.stc-table td.stc-mobile-hidden,
	table.stc-table th.stc-mobile-hidden,
	table.stc-table td.stc-mobile-in-details,
	table.stc-table th.stc-mobile-in-details {
		display: none;
	}

	/* narrow column (e.g. a single-digit number): no side padding on
	   the header (centered), minimal padding on the cell, so it only
	   takes up as much width as its content actually needs. This is
	   now the mobile default for every column (can be turned off per
	   column); text still wraps normally so a column with longer
	   content doesn't force horizontal overflow. */
	table.stc-table th.stc-mobile-compact {
		padding-inline: 0 !important;
		text-align: center !important;
		width: 1%;
	}

	table.stc-table td.stc-mobile-compact {
		padding: 3px !important;
		width: 1%;
	}

	.stc-expand-wrap {
		display: flex;
		align-items: center;
		gap: 4px;
		width: 100%;
	}

	.stc-expand-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		border: none;
		background: transparent;
		color: #29395a;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
		transition: transform .15s;
	}

	.stc-expand-btn::before {
		content: '›';
		font-weight: 700;
	}

	.stc-expand-btn[aria-expanded="true"] {
		transform: rotate(90deg);
	}

	.stc-expand-cell-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.stc-detail-row.is-open {
		display: table-row;
	}

	.stc-detail-row td {
		background: #f7f8fa;
		padding: 10px 14px !important;
		text-align: right;
	}

	.stc-mobile-detail-item {
		display: inline-block;
		margin-inline-end: 14px;
		margin-bottom: 4px;
	}

	.stc-mobile-detail-item strong {
		color: #29395a;
	}
}

table.stc-table tbody tr:nth-child(even) {
	background: #f7f8fa;
}

table.stc-table tbody tr:hover {
	background: #fef6e2;
}

.stc-empty {
	color: #777;
	font-style: italic;
}

.stc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 14px;
}

.stc-pagination button {
	border: 1px solid #29395a;
	background: #fff;
	color: #29395a;
	padding: 5px 12px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: background .15s, color .15s;
}

.stc-pagination button:hover {
	background: #29395a;
	color: #fff;
}

.stc-pagination button.active {
	background: #f6b00b;
	border-color: #f6b00b;
	color: #29395a;
	font-weight: 700;
}

.stc-pagination button:disabled {
	opacity: .45;
	cursor: default;
}

.stc-inline-svg {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Responsive tweaks */
@media (max-width: 600px) {
	table.stc-table th,
	table.stc-table td {
		padding: 8px 10px;
		font-size: 13.5px;
	}
}

/* When the page itself is printed natively (Ctrl+P) instead of using our
   dedicated Print button, hide interactive chrome so no unstyled/oversized
   icons or controls end up in the printout — only the table data. */
@media print {
	.stc-table-toolbar,
	.stc-pagination {
		display: none !important;
	}
	.stc-table-scroll {
		overflow: visible !important;
		border: none !important;
	}
	table.stc-table {
		width: 100% !important;
	}
}

/* ---------- Row visibility states (set by frontend.js) ---------- */
.stc-filtered-out,
.stc-paged-out,
.stc-table-hidden {
	display: none !important;
}

/* ---------- Page sidebar filters: [wpdatatable_filters] ---------- */
.stc-filters {
	direction: rtl;
	font-family: inherit;
}

.stc-filters[hidden] {
	display: none;
}

.stc-filters button,
.stc-filters input {
	font-family: inherit;
}

.stc-f-section {
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 14px;
}

.stc-f-title {
	margin: 0px 0px 10px 0px;
	font-size: 17px;
	display: block;
	font-weight: 600;
	color: #29395a;
	border-bottom: 1px solid #f6b00b;
}

.stc-f-search {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #e6eaf2;
	border-radius: 12px;
	background: #f8f9fc;
	font-size: 14px;
}

.stc-f-search:focus {
	outline: 2px solid #f6b00b;
	outline-offset: 0;
}

.stc-f-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stc-f-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: #29395a;
	font-size: 14px;
	text-align: right;
	text-decoration: none;
	cursor: pointer;
}

.stc-f-item:hover {
	background: #f2f4f9;
}

.stc-f-item.is-active {
	background: #f6b00b;
	color: #29395a;
	font-weight: 700;
}

.stc-f-item:disabled,
.stc-f-chip:disabled {
	opacity: .4;
	cursor: default;
}

.stc-f-badge {
	min-width: 22px;
	padding: 1px 6px;
	border-radius: 8px;
	background: #eef1f7;
	color: #5b6478;
	font-size: 11px;
	text-align: center;
}

.stc-f-item.is-active .stc-f-badge {
	background: rgba(255, 255, 255, .55);
}

.stc-f-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.stc-f-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #e6eaf2;
	border-radius: 10px;
	background: #fff;
	color: #29395a;
	font-size: 13px;
	cursor: pointer;
}

.stc-f-chip:hover {
	border-color: #29395a;
}

.stc-f-chip.is-active {
	background: #29395a;
	border-color: #29395a;
	color: #fff;
	font-weight: 700;
}

.stc-f-chip.is-active .stc-f-badge {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.stc-f-clear {
	width: 100%;
	padding: 10px;
	border: 1px solid #e6eaf2;
	border-radius: 12px;
	background: #fff;
	color: #29395a;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.stc-f-clear:hover {
	background: #29395a;
	color: #fff;
}

/* Panel layout: one scrollable body holding everything (including the
   clear button). Desktop height is capped to the viewport so a tall
   filter list scrolls inside itself instead of the whole page; tune
   with --stc-filters-gap (space reserved above/below, default 120px). */
.stc-filters-panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--stc-filters-gap, 120px));
	max-height: calc(100dvh - var(--stc-filters-gap, 120px));
}

.stc-filters-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Desktop only: breathing room between the content and the (left-side,
   RTL) scrollbar, and between the clear button and the panel's bottom
   edge. */
@media (min-width: 768px) {
	.stc-filters-body {
		padding-left: 10px;
		padding-bottom: 40px;
	}
}

/* Mobile: filters become a minimal fixed icon button, vertically
   centered on the right edge of the screen; it opens the panel as a
   slide-in drawer. All of this is hidden on desktop. */
.stc-filters-toggle,
.stc-filters-overlay,
.stc-filters-close {
	display: none;
}

@media (max-width: 767px) {
	.stc-filters-toggle {
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 2147483644;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 46px;
		padding: 0;
		border: none;
		border-radius: 12px 0 0 12px;
		background: #29395a;
		color: #fff;
		box-shadow: 0 2px 10px rgba(20, 26, 41, .25);
		cursor: pointer;
	}

	.stc-filters-toggle .stc-f-dot {
		position: absolute;
		top: 7px;
		left: 7px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #f6b00b;
		border: 1.5px solid #29395a;
	}

	.stc-filters-toggle .stc-f-dot[hidden] {
		display: none;
	}

	.stc-filters-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 2147483645;
		background: rgba(20, 26, 41, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, visibility .2s;
	}

	.stc-filters-panel {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 2147483646;
		width: min(340px, 88vw);
		box-sizing: border-box;
		padding: 48px 14px 20px;
		overflow: hidden;
		max-height: none;
		background: #f8f9fc;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .25s, visibility .25s;
	}

	.stc-filters-close {
		display: block;
		position: absolute;
		top: 8px;
		left: 12px;
		width: 32px;
		height: 32px;
		border: none;
		background: transparent;
		color: #29395a;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}

	.stc-filters.is-open .stc-filters-overlay {
		opacity: 1;
		visibility: visible;
	}

	.stc-filters.is-open .stc-filters-panel {
		transform: translateX(0);
		visibility: visible;
	}
}

@media print {
	.stc-filters {
		display: none !important;
	}
}