.ippt-chart__content {
    margin-top: 20px;
}

/* IPPT Chart - vertical tabs */
.ippt-chart .ippt-chart__tabs-wrap {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.ippt-chart .ippt-chart__tabs-left {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--color-border, #e5e7eb);
	padding-right: 16px;
}

.ippt-chart .ippt-chart__tab-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-left: 3px solid transparent;
	padding: 12px 12px 12px 10px;
	cursor: pointer;
	color: inherit;
}

.ippt-chart .ippt-chart__tab-button:hover {
	border-left-color: var(--brand-primary, #FFB91E);
}

.ippt-chart .ippt-chart__tab-button.is-active {
	border-left-color: var(--brand-primary, #FFB91E);
	background: #393e40 !important;
}

.ippt-chart .ippt-chart__tab-title {
	font-weight: 600;
	line-height: 1.25;
}

.ippt-chart .ippt-chart__tab-shortcode {
	font-size: 12px;
	color: #6b7280;
}

.ippt-chart .ippt-chart__tabs-right {
	flex: 1 1 auto;
	min-width: 0;
}

.ippt-chart .ippt-chart__panel {
	display: none;
}

.ippt-chart .ippt-chart__panel.is-active {
	display: block;
}

.ippt-chart .ippt-chart__panel[hidden] {
	display: none !important;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
	.ippt-chart .ippt-chart__tabs-wrap {
		flex-direction: column;
		gap: 16px;
	}
	.ippt-chart .ippt-chart__tabs-left {
		flex: 0 0 auto;
		border-right: 0;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
		padding-right: 0;
		padding-bottom: 8px;
		width: 100% !important;
	}

	.ippt-chart .ippt-chart__tab-button.is-active {
		background: #393e40;
	}

	.ippt-chart .ippt-chart__tab-button {
		border-left: 0;
		border-bottom: 1px solid #393e40;
	}

	.ippt-chart .ippt-chart__tab-button:last-child {
		border-bottom: 0;
	}

	.ippt-chart .ippt-chart__tabs-right {
		width: 100% !important;
	}

	.ippt-chart .foo-table.footable-paging-right .footable-pagination-wrapper {
		text-align: left !important;
	}
}


/* Table Styling */
.ippt-chart .colored_table table.ninja_table_pro.inverted tbody tr:nth-child(2n) td {
	background: #C5C7C6;
}

.ippt-chart .foo-table {
	width: 100% !important;
}

.ippt-chart .foo-table tbody tr td {
	border-left: 1px solid #aaaaaa !important;
}

/* Filter "button" styles in table header */
.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_radio > label,
.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_select_checkbox > label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 18px;
	margin: 0 8px 8px 0;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	background-color: #f9fafb;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_radio > label:hover,
.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_select_checkbox > label:hover {
	background-color: #f3f4f6;
	border-color: #9ca3af;
}

/* Active / selected state – style the label that contains a checked input
   Using :has() because Ninja Tables nests the input inside the label */
.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_radio label:has(input:checked),
.ippt-chart .ninja_table_wrapper table thead .footable-filtering .ninja_custom_select_checkbox label:has(input:checked) {
	background: #393e40 !important;
	color: #fff !important;
	border-color: #393e40 !important;
}

/* Ensure the filter container lets the buttons wrap nicely on smaller screens
.ippt-chart .ninja_table_wrapper table thead .footable-filtering {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
*/

/* Make Ninja Table take full width inside IPPT chart */
.ippt-chart .ninja_table_wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 0;
}

/* Mobile: subtle right-side gradient to indicate horizontal scroll on table
   Gradient sits on the non-scrolling panel so it stays pinned to the right */
@media (max-width: 768px) {
	.ippt-chart .ippt-chart__panel {
		position: relative;
		overflow: hidden;
	}

	.ippt-chart .ninja_table_wrapper {
		overflow-x: auto;
	}

	.ippt-chart .ippt-chart__panel::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
	}
}

/* Ensure the filtering row/header form is full width and lets buttons wrap */
.ippt-chart .foo-table tr.footable-filtering th[scope="row"]>.form-inline {
    display: flex !important;
    flex-wrap: wrap;
    align-items: start;
    gap: 4px;
    width: 100%;
    text-align: left !important;
}
.ippt-chart input[type="radio"] {
    display: none !important;
}

.ippt-chart .foo-table thead th {
    font-size: 18px !important;
}

.ippt-chart .ninja_table_wrapper .ninja_table_afd_inline thead .footable-filtering th .form-inline>.form-group {
    margin-bottom: 10px;
}


.ippt-chart .pagination>li>a, .footable .pagination>li>span {
    padding: 11px 17px;
}

.ippt-chart tfoot .footable-paging .footable-page.active a {
    background-color: #ffb81c !important;
	color: #000!important;
}