/**
 * Data charts ([ktt-chart]) — fully namespaced under .ktt-chart so it can't
 * leak into the theme and any number of charts can share a page.
 *
 * Deliberately a visual sibling of the per-bank transfer chart (.ktt-bxfer):
 * same palette tokens, same "one card — header band above a table" structure,
 * same type scale. Sortable header treatment is borrowed from the big transfer
 * chart (.ktt-xfer). Teal only. No Tailwind, no Alpine.
 */
.ktt-chart {
	--chart-teal: #1f7f95;
	--chart-teal-dark: #155f70;
	--chart-accent: #a5ccd5;
	--chart-bg: #f0f7f9;
	--chart-border: #e2e8f0;
	--chart-text: #2d3748;
	--chart-muted: #64748b;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--chart-text);
	max-width: 1120px;
	margin: 32px auto 28px;
	box-sizing: border-box;
}
.ktt-chart * { box-sizing: border-box; }

/* The whole chart is one card: header band, description, toolbar and table
   share a single border and radius. */
.ktt-chart-box { background: #fff; border: 1px solid var(--chart-border); border-radius: 12px; overflow: hidden; }

/* Header band */
.ktt-chart-head {
	padding: 20px 22px;
	background: var(--chart-bg);
	border-bottom: 1px solid var(--chart-border);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.ktt-chart-title { font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--chart-teal); margin: 0; }
.ktt-chart-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--chart-teal);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Description */
.ktt-chart-desc {
	margin: 0;
	padding: 16px 22px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--chart-muted);
	border-bottom: 1px solid var(--chart-border);
}

/* Toolbar */
.ktt-chart-toolbar {
	padding: 14px 22px;
	background: #fff;
	border-bottom: 1px solid var(--chart-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.ktt-chart-search-wrap { position: relative; width: 100%; }
.ktt-chart-search {
	width: 100%;
	padding: 9px 12px 9px 38px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--chart-text);
	background: #fff;
	outline: none;
}
.ktt-chart-search:focus { border-color: var(--chart-teal); box-shadow: 0 0 0 2px rgba(31,127,149,.25); }
.ktt-chart-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #9ca3af;
	pointer-events: none;
}
.ktt-chart-count { margin: 0; font-size: 13px; color: var(--chart-muted); }
.ktt-chart-count-n { font-weight: 700; color: var(--chart-teal); }

/* Screen-reader-only label (the theme may not ship .screen-reader-text). */
.ktt-chart-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Table */
.ktt-chart-scroll { overflow-x: auto; }
.ktt-chart-table { width: 100%; border-collapse: collapse; min-width: 560px; margin: 0; }
.ktt-chart-table thead { background: var(--chart-teal); }
.ktt-chart-table th { padding: 0; text-align: left; white-space: nowrap; }
.ktt-chart-table th:hover { background: var(--chart-teal-dark); }

/* The header is a real button so sorting is keyboard reachable. */
.ktt-chart-sortbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	text-align: left;
	cursor: pointer;
}
.ktt-chart-sortbtn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.ktt-chart-sort { opacity: .45; font-weight: 400; }
.ktt-chart-sortbtn:hover .ktt-chart-sort { opacity: .8; }
.ktt-chart-table th[aria-sort="ascending"] .ktt-chart-sort,
.ktt-chart-table th[aria-sort="descending"] .ktt-chart-sort { opacity: 1; }

.ktt-chart-table tbody tr { border-top: 1px solid var(--chart-border); }
.ktt-chart-table tbody tr:hover { background: var(--chart-bg); }
.ktt-chart-table td {
	padding: 13px 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--chart-muted);
	vertical-align: top;
}
.ktt-chart-table td.ktt-chart-strong { font-weight: 600; color: #111827; white-space: nowrap; }
.ktt-chart-empty td { text-align: center; padding: 28px; color: var(--chart-muted); font-style: italic; }

/* Footer disclaimer — on every chart, inside the card so it can't be mistaken
   for surrounding page copy. */
.ktt-chart-foot {
	margin: 0;
	padding: 14px 22px;
	background: var(--chart-bg);
	border-top: 1px solid var(--chart-border);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--chart-muted);
	font-style: italic;
}

/* Editor-only error notice (visitors never see this). */
.ktt-chart-err {
	font-size: 14px;
	color: #a32f2f;
	background: #fbeceb;
	border-left: 4px solid #a32f2f;
	padding: 10px 14px;
	border-radius: 6px;
}

@media (min-width: 640px) {
	.ktt-chart-head { flex-direction: row; align-items: center; justify-content: space-between; }
	.ktt-chart-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
	.ktt-chart-search-wrap { width: 320px; }
}