#tc-uba-asset-chart-v2 * { box-sizing: border-box; }

/* Typography & Buttons */
.tc-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-chart-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 8px;
/* Smooth scrolling for devices that still need it */
-webkit-overflow-scrolling: touch;
}
.tc-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 220px;
padding-top: 20px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Changed from 400px to allow fluid mobile scaling */
}
.tc-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
/* Better touch target spacing */
padding: 0 2px;
}
.tc-bar {
width: 100%;
max-width: 24px;
border-radius: 3px 3px 0 0;
transition: height 0.3s ease, opacity 0.2s;
}
.tc-bar-group:hover .tc-bar {
opacity: 0.85;
}
.tc-bar-solid {
background-color: #EA2D2E;
}
.tc-bar-stripe {
background: repeating-linear-gradient(
45deg,
#EA2D2E,
#EA2D2E 5px,
#FFC52F 5px,
#FFC52F 10px
);
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-asset-chart-v2 { padding: 16px; }
.tc-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-hero-stat-val { font-size: 1.5rem !important; }
.tc-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 16px; }
.tc-bars-container { height: 180px; } /* Slightly shorter on mobile */
.tc-detail-metrics { flex-direction: column; gap: 8px !important; }
.tc-val-label { font-size: 0.55rem !important; margin-bottom: 4px !important; }
#tc-card-year, #tc-card-value { font-size: 1.25rem !important; }
#tc-threshold-label { font-size: 0.6rem !important; top: 58% !important; }
}

(function() {
const assetData = [
{ year: ’15’, fullYear: 2015, val: 2.75, exact: ‘₦2,752,622 Million’, yoy: ‘Baseline’, type: ‘solid’, note: “Baseline year of Tony Elumelu’s group chairmanship. Group total assets stood at ₦2.75 trillion ($2.04B at 2015 exchange rates).” },
{ year: ’16’, fullYear: 2016, val: 3.50, exact: ‘₦3,504,470 Million’, yoy: ‘+27.31%’, type: ‘solid’, note: “Post-merger expansion across regional African subsidiaries drove initial deposit and asset growth.” },
{ year: ’17’, fullYear: 2017, val: 4.07, exact: ‘₦4,069,474 Million’, yoy: ‘+16.12%’, type: ‘solid’, note: “Balance sheet crossed ₦4 trillion as UBA expanded digital banking channels and trade finance lines.” },
{ year: ’18’, fullYear: 2018, val: 4.87, exact: ‘₦4,869,738 Million’, yoy: ‘+19.67%’, type: ‘solid’, note: “Expansion in liquid government securities and commercial credit pushed assets near ₦5 trillion.” },
{ year: ’19’, fullYear: 2019, val: 5.60, exact: ‘₦5,604,052 Million’, yoy: ‘+15.08%’, type: ‘solid’, note: “Balance sheet doubled the 2015 baseline, supported by rising e-banking transaction volumes.” },
{ year: ’20’, fullYear: 2020, val: 7.69, exact: ‘₦7,693,377 Million’, yoy: ‘+37.28%’, type: ‘solid’, note: “COVID-19 pandemic period saw a 37% asset surge due to central bank interventions and deposit accumulation.” },
{ year: ’21’, fullYear: 2021, val: 8.54, exact: ‘₦8,541,318 Million’, yoy: ‘+11.02%’, type: ‘solid’, note: “Steadily expanded corporate lending and treasury asset holdings across Pan-African markets.” },
{ year: ’22’, fullYear: 2022, val: 10.86, exact: ‘₦10,857,571 Million’, yoy: ‘+27.12%’, type: ‘solid’, note: “UBA crossed the historic ₦10 trillion benchmark as African subsidiaries contributed over 35% of group assets.” },
{ year: ’23’, fullYear: 2023, val: 20.65, exact: ‘₦20,653,197 Million’, yoy: ‘+90.22%’, type: ‘stripe’, note: “FX Revaluation Spike: Total assets jumped 90.2% in naira terms following Nigeria’s FX unification policy, which inflated translated subsidiary assets.” },
{ year: ’24’, fullYear: 2024, val: 30.32, exact: ‘₦30,323,355 Million’, yoy: ‘+46.82%’, type: ‘stripe’, note: “Balance sheet surpassed ₦30 trillion as inflation and further currency adjustments expanded nominal asset values.” },
{ year: ’25’, fullYear: 2025, val: 33.17, exact: ‘₦33,173,188 Million’, yoy: ‘+9.40%’, type: ‘stripe’, note: “Final year of Elumelu’s 12-year stint as chairman. Group assets closed at ₦33.17 trillion ($24.63B), completing a 12.05× expansion.” }
];

const baselineVal = 2.752622;
const maxVal = 33.173188;
let activeMode = ‘naira’;
let selectedYear = 2025;

window.tcSetMode = function(mode) {
activeMode = mode;
document.getElementById(‘tc-btn-naira’).className = ‘tc-btn’ + (mode === ‘naira’ ? ‘ active’ : ”);
document.getElementById(‘tc-btn-ratio’).className = ‘tc-btn’ + (mode === ‘ratio’ ? ‘ active’ : ”);

// Hide/Show 10T line in ratio mode
const showLine = mode === ‘naira’ ? ‘block’ : ‘none’;
document.getElementById(‘tc-threshold-line’).style.display = showLine;
document.getElementById(‘tc-threshold-label’).style.display = showLine;

renderBars();
};

window.tcSelectYear = function(yr) {
selectedYear = yr;
renderBars();

const item = assetData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-card-value’).innerText = ‘₦’ + item.val.toFixed(2) + ‘ Trillion’;
document.getElementById(‘tc-card-yoy’).innerText = item.yoy;

const mult = (item.val / baselineVal).toFixed(2) + ‘×’;
document.getElementById(‘tc-card-multiple’).innerText = mult;
document.getElementById(‘tc-card-insight’).innerHTML = item.note;
}
};

function renderBars() {
const container = document.getElementById(‘tc-bars-container’);
container.innerHTML = ”;

assetData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);
const heightPct = Math.max(10, (d.val / maxVal) * 100);

const valText = (activeMode === ‘naira’)
? d.val.toFixed(1) + ‘T’
: (d.val / baselineVal).toFixed(1) + ‘×’;

const col = document.createElement(‘div’);
col.className = ‘tc-bar-group’;
col.onclick = function() { tcSelectYear(d.fullYear); };

const barClass = d.type === ‘solid’ ? ‘tc-bar-solid’ : ‘tc-bar-stripe’;
const borderStyle = isSelected ? ‘border: 2px solid #151515; box-shadow: 0 0 8px rgba(234,45,46,0.3);’ : ”;

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectYear(2025);
})();

#tc-uba-deposit-chart * { box-sizing: border-box; }

/* Typography & Buttons */
.tc-dep-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-dep-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-dep-chart-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
/* Hide scrollbar for cleaner look, but keep functionality */
.tc-dep-chart-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.tc-dep-chart-scroll-wrapper::-webkit-scrollbar-thumb { background: #E3E8EF; border-radius: 3px; }

.tc-dep-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 220px;
padding-top: 20px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Changed to 100% for fluid mobile scaling */
}
.tc-dep-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
padding: 0 2px;
}
.tc-dep-bar {
width: 100%;
max-width: 24px;
border-radius: 3px 3px 0 0;
transition: height 0.3s ease, opacity 0.2s;
}
.tc-dep-bar-group:hover .tc-dep-bar {
opacity: 0.85;
}
.tc-dep-bar-solid {
background-color: #EA2D2E;
}
.tc-dep-bar-stripe {
background: repeating-linear-gradient(
45deg,
#EA2D2E,
#EA2D2E 4px,
#FFC52F 4px,
#FFC52F 8px
);
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-deposit-chart { padding: 16px; }
.tc-dep-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-dep-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-dep-hero-stat-val { font-size: 1.5rem !important; }
.tc-dep-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 16px; }
.tc-dep-bars-container { height: 180px; }
.tc-val-label { font-size: 0.55rem !important; margin-bottom: 4px !important; }
#tc-dep-threshold-label { font-size: 0.6rem !important; top: 49% !important; }
.tc-dep-detail-metrics { flex-direction: column; gap: 8px !important; }
#tc-dep-card-year, #tc-dep-card-value { font-size: 1.25rem !important; }
}

(function() {
// Data exacted from provided UBA Audited Financial Statements 2015-2025
const depData = [
{ year: ’15’, fullYear: 2015, val: 2.08, exact: ‘₦2,081,704 Million’, yoy: ‘Baseline’, type: ‘solid’, note: “Baseline year. Customer deposits stood at ₦2.08 trillion, representing the core funding base for the bank’s commercial lending.” },
{ year: ’16’, fullYear: 2016, val: 2.49, exact: ‘₦2,485,610 Million’, yoy: ‘+19.40%’, type: ‘solid’, note: “Steady deposit accumulation as UBA deepened its retail penetration and expanded its digital banking channels.” },
{ year: ’17’, fullYear: 2017, val: 2.73, exact: ‘₦2,733,348 Million’, yoy: ‘+9.97%’, type: ‘solid’, note: “Continued Pan-African deposit mobilisation bolstered the bank’s liquidity position, pushing it closer to the ₦3 trillion mark.” },
{ year: ’18’, fullYear: 2018, val: 3.35, exact: ‘₦3,349,120 Million’, yoy: ‘+22.53%’, type: ‘solid’, note: “Customer deposits successfully crossed ₦3 trillion, reflecting strong customer trust across its operating African nations.” },
{ year: ’19’, fullYear: 2019, val: 3.83, exact: ‘₦3,832,884 Million’, yoy: ‘+14.44%’, type: ‘solid’, note: “Digital banking channels drove lower-cost deposit acquisition, allowing for healthier net interest margins.” },
{ year: ’20’, fullYear: 2020, val: 5.68, exact: ‘₦5,676,011 Million’, yoy: ‘+48.09%’, type: ‘solid’, note: “Pandemic-era liquidity surge: Deposits spiked nearly 50% as consumer spending slowed and capital flowed into safe banking havens.” },
{ year: ’21’, fullYear: 2021, val: 6.37, exact: ‘₦6,369,189 Million’, yoy: ‘+12.21%’, type: ‘solid’, note: “Post-pandemic normalization saw sustained growth, proving the stickiness of the deposits acquired during the 2020 lockdowns.” },
{ year: ’22’, fullYear: 2022, val: 7.82, exact: ‘₦7,824,891 Million’, yoy: ‘+22.86%’, type: ‘solid’, note: “Expansion across African subsidiaries contributed heavily, showcasing the strength of UBA’s geographic diversification strategy.” },
{ year: ’23’, fullYear: 2023, val: 14.89, exact: ‘₦14,891,277 Million’, yoy: ‘+90.31%’, type: ‘stripe’, note: “FX Unification Impact: A massive leap past the ₦10T benchmark. While organic growth was strong, the unification of the Naira vastly inflated the translated value of foreign currency deposits.” },
{ year: ’24’, fullYear: 2024, val: 21.57, exact: ‘₦21,571,750 Million’, yoy: ‘+44.86%’, type: ‘stripe’, note: “Customer deposits breached the ₦20 trillion ceiling amidst a high-inflation, high-interest-rate environment and further currency depreciation.” },
{ year: ’25’, fullYear: 2025, val: 23.95, exact: ‘₦23,948,907 Million’, yoy: ‘+11.02%’, type: ‘stripe’, note: “Deposits hit a record ₦23.95 trillion ($17.78B). This monumental pool of raw material cements UBA’s capacity to deploy capital heavily into lending and investments.” }
];

const baselineVal = 2.081704;
const maxVal = 23.948907;
let activeMode = ‘naira’;
let selectedYear = 2025;

window.tcSetDepMode = function(mode) {
activeMode = mode;
document.getElementById(‘tc-dep-btn-naira’).className = ‘tc-dep-btn’ + (mode === ‘naira’ ? ‘ active’ : ”);
document.getElementById(‘tc-dep-btn-ratio’).className = ‘tc-dep-btn’ + (mode === ‘ratio’ ? ‘ active’ : ”);

const showLine = mode === ‘naira’ ? ‘block’ : ‘none’;
document.getElementById(‘tc-dep-threshold-line’).style.display = showLine;
document.getElementById(‘tc-dep-threshold-label’).style.display = showLine;

renderDepBars();
};

window.tcSelectDepYear = function(yr) {
selectedYear = yr;
renderDepBars();

const item = depData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-dep-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-dep-card-value’).innerText = ‘₦’ + item.val.toFixed(2) + ‘ Trillion’;

let yoyColor = ‘#20C997’; // Default green
if (item.yoy.includes(‘-‘)) yoyColor = ‘#EA2D2E’;
else if (item.yoy === ‘Baseline’) yoyColor = ‘#24292F’;

const yoySpan = document.getElementById(‘tc-dep-card-yoy’);
yoySpan.innerText = item.yoy;
yoySpan.style.color = yoyColor;

const mult = (item.val / baselineVal).toFixed(2) + ‘×’;
document.getElementById(‘tc-dep-card-multiple’).innerText = mult;
document.getElementById(‘tc-dep-card-insight’).innerHTML = item.note;
}
};

function renderDepBars() {
const container = document.getElementById(‘tc-dep-bars-container’);
container.innerHTML = ”;

depData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);
const heightPct = Math.max(10, (d.val / maxVal) * 100);

const valText = (activeMode === ‘naira’)
? d.val.toFixed(1) + ‘T’
: (d.val / baselineVal).toFixed(1) + ‘×’;

const col = document.createElement(‘div’);
col.className = ‘tc-dep-bar-group’;
col.onclick = function() { tcSelectDepYear(d.fullYear); };

const barClass = d.type === ‘solid’ ? ‘tc-dep-bar-solid’ : ‘tc-dep-bar-stripe’;
const borderStyle = isSelected ? ‘border: 2px solid #151515; box-shadow: 0 0 8px rgba(234,45,46,0.3);’ : ”;

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectDepYear(2025);
})();

#tc-uba-ldr-chart * { box-sizing: border-box; }

/* Typography & Buttons */
.tc-ldr-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-ldr-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-ldr-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
.tc-ldr-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.tc-ldr-scroll-wrapper::-webkit-scrollbar-thumb { background: #E3E8EF; border-radius: 3px; }

.tc-ldr-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 260px;
padding-top: 30px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Changed from 550px to allow fluid responsive scaling on mobile */
}
.tc-ldr-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
padding: 0 1px;
}

/* The Parent Bar (Deposits) */
.tc-ldr-bar-outer {
width: 100%;
max-width: 32px;
background-color: #F6F6F6;
border: 1px solid #E3E8EF;
border-radius: 4px 4px 0 0;
position: relative;
transition: height 0.4s ease;
display: flex;
align-items: flex-end;
justify-content: center;
}

/* The Inner Bar (Loans) */
.tc-ldr-bar-inner {
width: 100%;
background-color: #EA2D2E;
border-radius: 3px 3px 0 0;
transition: height 0.4s ease, background-color 0.2s;
position: relative;
display: flex;
justify-content: center;
}

.tc-ldr-label-top {
font-size: 0.65rem;
font-weight: 700;
color: #24292F;
position: absolute;
top: -20px;
white-space: nowrap;
}

.tc-ldr-label-inner {
font-size: 0.65rem;
font-weight: 800;
color: #EA2D2E;
position: absolute;
top: -18px;
white-space: nowrap;
text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF; /* Makes red text pop over grey */
}

.tc-ldr-bar-group:hover .tc-ldr-bar-outer {
border-color: #24292F;
}
.tc-ldr-bar-group:hover .tc-ldr-bar-inner {
background-color: #C71B1C;
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-ldr-chart { padding: 16px; }
.tc-ldr-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-ldr-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-ldr-hero-stat-val { font-size: 1.5rem !important; }
.tc-ldr-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 16px; }
.tc-ldr-bars-container { height: 200px; gap: 2px; }
.tc-ldr-metrics { flex-direction: column; gap: 8px !important; }
.tc-ldr-label-top, .tc-ldr-label-inner { font-size: 0.55rem !important; }
#tc-ldr-card-year, #tc-ldr-card-ratio { font-size: 1.25rem !important; }
}

(function() {
// Data extracted from UBA Audited Financial Statements 2015-2025
const ldrData = [
{ year: ’15’, fullYear: 2015, dep: 2.081, loan: 1.036, ldr: 49.8, note: “Baseline. Nearly half of all deposits mobilized were converted into loans for customers.” },
{ year: ’16’, fullYear: 2016, dep: 2.485, loan: 1.505, ldr: 60.5, note: “Lending intensity peaked. Over 60% of customer deposits were actively deployed as credit.” },
{ year: ’17’, fullYear: 2017, dep: 2.733, loan: 1.650, ldr: 60.4, note: “Strong credit deployment continued, mirroring 2016’s aggressive loan book expansion.” },
{ year: ’18’, fullYear: 2018, dep: 3.349, loan: 1.715, ldr: 51.2, note: “Deposit growth began to significantly outpace new loan originations, dropping the LDR.” },
{ year: ’19’, fullYear: 2019, dep: 3.832, loan: 2.061, ldr: 53.8, note: “A slight uptick in lending, but deposit accumulation remained the dominant growth factor.” },
{ year: ’20’, fullYear: 2020, dep: 5.676, loan: 2.554, ldr: 45.0, note: “Pandemic shock. Deposits surged by nearly 50%, while lending grew cautiously, crashing the ratio.” },
{ year: ’21’, fullYear: 2021, dep: 6.369, loan: 2.680, ldr: 42.1, note: “LDR continued to fall as the bank diversified its balance sheet heavily into liquid government securities.” },
{ year: ’22’, fullYear: 2022, dep: 7.824, loan: 3.136, ldr: 40.1, note: “Deposits neared the ₦8 trillion mark, further diluting the concentration of loans on the balance sheet.” },
{ year: ’23’, fullYear: 2023, dep: 14.891, loan: 5.228, ldr: 35.1, note: “FX unification artificially inflated nominal deposits massively, widening the gap between deposits and loans.” },
{ year: ’24’, fullYear: 2024, dep: 21.571, loan: 6.954, ldr: 32.2, note: “A high-interest-rate environment incentivized the bank to place funds in non-loan investments.” },
{ year: ’25’, fullYear: 2025, dep: 23.948, loan: 7.022, ldr: 29.3, note: “The lowest LDR in a decade. While loans grew an impressive 575% since 2015, they now consume less than 30% of total deposits.” }
];

const maxDep = 23.948; // Max value for absolute scale
let activeMode = ‘naira’;
let selectedYear = 2025;

window.tcSetLdrMode = function(mode) {
activeMode = mode;
document.getElementById(‘tc-ldr-btn-naira’).className = ‘tc-ldr-btn’ + (mode === ‘naira’ ? ‘ active’ : ”);
document.getElementById(‘tc-ldr-btn-ratio’).className = ‘tc-ldr-btn’ + (mode === ‘ratio’ ? ‘ active’ : ”);
renderLdrBars();
};

window.tcSelectLdrYear = function(yr) {
selectedYear = yr;
renderLdrBars();

const item = ldrData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-ldr-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-ldr-card-dep’).innerText = ‘₦’ + item.dep.toFixed(2) + ‘ Trillion’;
document.getElementById(‘tc-ldr-card-loan’).innerText = ‘₦’ + item.loan.toFixed(2) + ‘ Trillion’;
document.getElementById(‘tc-ldr-card-ratio’).innerText = item.ldr.toFixed(1) + ‘%’;
document.getElementById(‘tc-ldr-card-insight’).innerHTML = item.note;
}
};

function renderLdrBars() {
const container = document.getElementById(‘tc-ldr-bars-container’);
container.innerHTML = ”;

ldrData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);

let outerHeight, innerHeight, topText, innerText;

if (activeMode === ‘naira’) {
// Absolute volume scale
outerHeight = Math.max(10, (d.dep / maxDep) * 100);
innerHeight = (d.loan / d.dep) * 100; // Loan relative to deposit bar
topText = d.dep.toFixed(1) + ‘T’;
innerText = d.loan.toFixed(1) + ‘T’;
} else {
// Normalized 100% scale to show ratio purely
outerHeight = 100;
innerHeight = d.ldr;
topText = ‘100%’;
innerText = d.ldr.toFixed(0) + ‘%’;
}

const col = document.createElement(‘div’);
col.className = ‘tc-ldr-bar-group’;
col.onclick = function() { tcSelectLdrYear(d.fullYear); };

const borderStyle = isSelected ? ‘border-color: #151515; box-shadow: 0 0 8px rgba(0,0,0,0.15);’ : ”;
const labelWeight = isSelected ? ‘800’ : ‘600’;
const topColor = isSelected ? ‘#151515’ : ‘#555’;

// Prevent label overlapping on very small inner bars
const innerLabelDisplay = innerHeight < 15 ? 'none' : 'block';

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectLdrYear(2025);
})();

#tc-uba-rev-chart * { box-sizing: border-box; }

/* Typography & Buttons */
.tc-rev-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-rev-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-rev-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.tc-rev-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.tc-rev-scroll-wrapper::-webkit-scrollbar-thumb { background: #E3E8EF; border-radius: 3px; }

.tc-rev-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 240px;
padding-top: 20px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Fluid width for mobile screens */
}
.tc-rev-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
padding: 0 1px;
}

.tc-rev-bar {
width: 100%;
max-width: 24px;
border-radius: 3px 3px 0 0;
transition: height 0.4s ease, background-color 0.2s;
}

.tc-rev-bar-group:hover .tc-rev-bar {
opacity: 0.85;
}

.tc-rev-bar-solid { background-color: #EA2D2E; }
.tc-rev-bar-stripe {
background: repeating-linear-gradient(
45deg,
#EA2D2E,
#EA2D2E 4px,
#FFC52F 4px,
#FFC52F 8px
);
}

.tc-rev-label-top {
font-size: 0.65rem;
font-weight: 700;
margin-bottom: 6px;
transition: color 0.2s;
text-align: center;
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-rev-chart { padding: 16px; }
.tc-rev-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-rev-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-rev-hero-stat-val { font-size: 1.5rem !important; }
.tc-rev-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 16px; }
.tc-rev-bars-container { height: 180px; gap: 2px; }
.tc-rev-metrics { flex-direction: column; gap: 8px !important; }
.tc-rev-label-top { font-size: 0.55rem !important; margin-bottom: 4px !important; }
#tc-rev-card-year, #tc-rev-card-value { font-size: 1.25rem !important; }
}

(function() {
// Data extracted from UBA Audited Financial Statements 2015-2025
const revData = [
{ year: ’15’, fullYear: 2015, val: 0.315, yoy: ‘Baseline’, type: ‘solid’, note: “Baseline year. Gross earnings stood at ₦314.8 billion, driven primarily by standard interest and fee income.” },
{ year: ’16’, fullYear: 2016, val: 0.384, yoy: ‘+21.90%’, type: ‘solid’, note: “Solid double-digit growth as lending operations and transaction volumes expanded.” },
{ year: ’17’, fullYear: 2017, val: 0.462, yoy: ‘+20.31%’, type: ‘solid’, note: “A strong year for treasury and financial markets, boosting overall revenue past the ₦450 billion mark.” },
{ year: ’18’, fullYear: 2018, val: 0.494, yoy: ‘+6.92%’, type: ‘solid’, note: “Steady top-line growth driven by growing customer adoption of retail and digital banking channels.” },
{ year: ’19’, fullYear: 2019, val: 0.560, yoy: ‘+13.36%’, type: ‘solid’, note: “Pre-pandemic stability. Revenue officially crossed half a trillion Naira.” },
{ year: ’20’, fullYear: 2020, val: 0.616, yoy: ‘+10.00%’, type: ‘solid’, note: “Pandemic resilience. Core banking operations remained strong despite global economic shutdowns.” },
{ year: ’21’, fullYear: 2021, val: 0.658, yoy: ‘+6.81%’, type: ‘solid’, note: “Economic recovery spurred increased transaction fees and steady credit expansion.” },
{ year: ’22’, fullYear: 2022, val: 0.853, yoy: ‘+29.63%’, type: ‘solid’, note: “Rising interest rates began to significantly uplift interest income as central banks globally fought inflation.” },
{ year: ’23’, fullYear: 2023, val: 2.076, yoy: ‘+143.37%’, type: ‘stripe’, note: “Macroeconomic Shift: FX unification and soaring interest rates triggered a massive nominal spike in earnings.” },
{ year: ’24’, fullYear: 2024, val: 3.187, yoy: ‘+53.51%’, type: ‘stripe’, note: “Peak inflation and aggressive Monetary Policy Rate (MPR) hikes drove gross earnings past an unprecedented ₦3 trillion.” },
{ year: ’25’, fullYear: 2025, val: 3.090, yoy: ‘-3.04%’, type: ‘stripe’, note: “Despite a slight dip due to trading losses, revenue closed at ₦3.09 trillion (+881% vs 2015), representing a nearly 10x larger income engine.” }
];

const baselineVal = 0.314830;
const maxVal = 3.187;
let activeMode = ‘naira’;
let selectedYear = 2025;

window.tcSetRevMode = function(mode) {
activeMode = mode;
document.getElementById(‘tc-rev-btn-naira’).className = ‘tc-rev-btn’ + (mode === ‘naira’ ? ‘ active’ : ”);
document.getElementById(‘tc-rev-btn-ratio’).className = ‘tc-rev-btn’ + (mode === ‘ratio’ ? ‘ active’ : ”);
renderRevBars();
};

window.tcSelectRevYear = function(yr) {
selectedYear = yr;
renderRevBars();

const item = revData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-rev-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-rev-card-value’).innerText = ‘₦’ + item.val.toFixed(2) + ‘ Trillion’;

let yoyColor = ‘#20C997’; // Green for positive
if (item.yoy.includes(‘-‘)) yoyColor = ‘#EA2D2E’; // Red for negative
else if (item.yoy === ‘Baseline’) yoyColor = ‘#24292F’; // Grey for baseline

const yoySpan = document.getElementById(‘tc-rev-card-yoy’);
yoySpan.innerText = item.yoy;
yoySpan.style.color = yoyColor;

const mult = (item.val / baselineVal).toFixed(2) + ‘×’;
document.getElementById(‘tc-rev-card-multiple’).innerText = mult;
document.getElementById(‘tc-rev-card-insight’).innerHTML = item.note;
}
};

function renderRevBars() {
const container = document.getElementById(‘tc-rev-bars-container’);
container.innerHTML = ”;

revData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);

// Calculate height
const heightPct = Math.max(8, (d.val / maxVal) * 100);

// Format label
const valText = (activeMode === ‘naira’)
? d.val.toFixed(2) + ‘T’
: (d.val / baselineVal).toFixed(1) + ‘×’;

const col = document.createElement(‘div’);
col.className = ‘tc-rev-bar-group’;
col.onclick = function() { tcSelectRevYear(d.fullYear); };

const borderStyle = isSelected ? ‘border: 2px solid #151515; box-shadow: 0 0 8px rgba(234,45,46,0.3);’ : ”;
const labelColor = isSelected ? ‘#EA2D2E’ : ‘#24292F’;
const labelWeight = isSelected ? ‘800’ : ‘600’;
const barClass = d.type === ‘solid’ ? ‘tc-rev-bar-solid’ : ‘tc-rev-bar-stripe’;

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectRevYear(2025);
})();

#tc-uba-margin-chart * { box-sizing: border-box; }

/* Typography & Buttons */
.tc-margin-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-margin-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-margin-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.tc-margin-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.tc-margin-scroll-wrapper::-webkit-scrollbar-thumb { background: #E3E8EF; border-radius: 3px; }

.tc-margin-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 260px;
padding-top: 30px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Fluid width for mobile device viewports */
}
.tc-margin-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
padding: 0 1px;
}

/* The Parent Bar (Revenue) */
.tc-margin-bar-outer {
width: 100%;
max-width: 28px;
background-color: #E3E8EF;
border: 1px solid #D1D5DB;
border-radius: 4px 4px 0 0;
position: relative;
transition: height 0.4s ease;
display: flex;
align-items: flex-end;
justify-content: center;
}

/* The Inner Bar (Profit) */
.tc-margin-bar-inner {
width: 100%;
background-color: #EA2D2E;
border-radius: 3px 3px 0 0;
transition: height 0.4s ease, background-color 0.2s;
position: relative;
display: flex;
justify-content: center;
}

.tc-margin-label-top {
font-size: 0.65rem;
font-weight: 700;
color: #24292F;
position: absolute;
top: -20px;
white-space: nowrap;
}

.tc-margin-label-inner {
font-size: 0.65rem;
font-weight: 800;
color: #EA2D2E;
position: absolute;
top: -18px;
white-space: nowrap;
text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF;
}

.tc-margin-bar-group:hover .tc-margin-bar-outer {
border-color: #24292F;
background-color: #D1D5DB;
}
.tc-margin-bar-group:hover .tc-margin-bar-inner {
background-color: #C71B1C;
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-margin-chart { padding: 16px; }
.tc-margin-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-margin-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-margin-hero-stat-val { font-size: 1.5rem !important; }
.tc-margin-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 16px; }
.tc-margin-bars-container { height: 200px; gap: 2px; }
.tc-margin-metrics { flex-direction: column; gap: 8px !important; }
.tc-margin-label-top, .tc-margin-label-inner { font-size: 0.55rem !important; }
#tc-margin-card-year, #tc-margin-card-ratio { font-size: 1.25rem !important; }
}

(function() {
// Data extracted from UBA Audited Financial Statements 2015-2025
const marginData = [
{ year: ’15’, fullYear: 2015, rev: 0.315, pat: 0.060, note: “Baseline. The bank converted 19% of its gross earnings into actual profit for shareholders.” },
{ year: ’16’, fullYear: 2016, rev: 0.384, pat: 0.072, note: “Earnings grew, and margins remained steady as UBA optimized its operating expenses.” },
{ year: ’17’, fullYear: 2017, rev: 0.462, pat: 0.079, note: “Top-line revenue grew strongly, though rising interest expenses slightly compressed the profit margin.” },
{ year: ’18’, fullYear: 2018, rev: 0.494, pat: 0.079, note: “Revenue ticked up, but profit stayed flat, indicating higher costs of operation across the network.” },
{ year: ’19’, fullYear: 2019, rev: 0.560, pat: 0.089, note: “Pre-pandemic stability. The bank maintained a healthy margin while crossing half a trillion Naira in revenue.” },
{ year: ’20’, fullYear: 2020, rev: 0.616, pat: 0.109, note: “Pandemic resilience. Despite global shutdowns, UBA grew both revenue and profit, keeping margins stable.” },
{ year: ’21’, fullYear: 2021, rev: 0.658, pat: 0.119, note: “Post-COVID recovery. A highly efficient year where nearly 18% of revenue hit the bottom line.” },
{ year: ’22’, fullYear: 2022, rev: 0.853, pat: 0.170, note: “The margin peaked at nearly 20% as rising interest rates allowed the bank to maximize returns on its assets.” },
{ year: ’23’, fullYear: 2023, rev: 2.076, pat: 0.608, note: “FX Unification Spike: Both revenue and profit surged massively due to foreign exchange translation gains.” },
{ year: ’24’, fullYear: 2024, rev: 3.187, pat: 0.767, note: “Record highs in both metrics, driven by high inflation and aggressive Monetary Policy Rate (MPR) hikes.” },
{ year: ’25’, fullYear: 2025, rev: 3.090, pat: 0.405, note: “While revenue remained above ₦3T, profit dropped significantly. Heavy impairment charges (₦331B) and trading losses severely squeezed the margin.” }
];

const maxRev = 3.187; // Max value for absolute scale
let activeMode = ‘naira’;
let selectedYear = 2025;

window.tcSetMarginMode = function(mode) {
activeMode = mode;
document.getElementById(‘tc-margin-btn-naira’).className = ‘tc-margin-btn’ + (mode === ‘naira’ ? ‘ active’ : ”);
document.getElementById(‘tc-margin-btn-ratio’).className = ‘tc-margin-btn’ + (mode === ‘ratio’ ? ‘ active’ : ”);
renderMarginBars();
};

window.tcSelectMarginYear = function(yr) {
selectedYear = yr;
renderMarginBars();

const item = marginData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-margin-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-margin-card-rev’).innerText = ‘₦’ + item.rev.toFixed(2) + ‘ Trillion’;

// Format PAT appropriately based on size
const patText = item.pat >= 1.0 ? ‘₦’ + item.pat.toFixed(2) + ‘ Trillion’ : ‘₦’ + (item.pat * 1000).toFixed(1) + ‘ Billion’;
document.getElementById(‘tc-margin-card-pat’).innerText = patText;

const marginPct = (item.pat / item.rev) * 100;
document.getElementById(‘tc-margin-card-ratio’).innerText = marginPct.toFixed(1) + ‘%’;
document.getElementById(‘tc-margin-card-insight’).innerHTML = item.note;
}
};

function renderMarginBars() {
const container = document.getElementById(‘tc-margin-bars-container’);
container.innerHTML = ”;

marginData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);
const marginPct = (d.pat / d.rev) * 100;

// Calculate heights based on mode
let outerHeight, innerHeight, topText, innerText;

if (activeMode === ‘naira’) {
// Absolute volume scale
outerHeight = Math.max(10, (d.rev / maxRev) * 100);
innerHeight = marginPct; // Profit relative to revenue bar
topText = d.rev.toFixed(1) + ‘T’;
innerText = d.pat >= 1.0 ? d.pat.toFixed(1) + ‘T’ : (d.pat * 1000).toFixed(0) + ‘B’;
} else {
// Normalized 100% scale to show margin purely
outerHeight = 100;
innerHeight = marginPct;
topText = ‘100%’;
innerText = marginPct.toFixed(1) + ‘%’;
}

const col = document.createElement(‘div’);
col.className = ‘tc-margin-bar-group’;
col.onclick = function() { tcSelectMarginYear(d.fullYear); };

const borderStyle = isSelected ? ‘border-color: #151515; box-shadow: 0 0 8px rgba(0,0,0,0.15);’ : ”;
const labelWeight = isSelected ? ‘800’ : ‘600’;
const topColor = isSelected ? ‘#151515’ : ‘#555’;

// Prevent label overlapping on very small inner bars
const innerLabelDisplay = innerHeight < 15 ? 'none' : 'block';

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectMarginYear(2025);
})();

#tc-uba-eps-chart * { box-sizing: border-box; }

/* Chart Elements */
.tc-eps-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.tc-eps-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.tc-eps-scroll-wrapper::-webkit-scrollbar-thumb { background: #E3E8EF; border-radius: 3px; }

.tc-eps-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 240px;
padding-top: 30px;
border-bottom: 1.5px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
min-width: 100%; /* Fluid scaling for mobile screens */
}
.tc-eps-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
position: relative;
padding: 0 1px;
}

.tc-eps-bar {
width: 100%;
max-width: 28px;
border-radius: 3px 3px 0 0;
transition: height 0.4s ease, background-color 0.2s;
}

.tc-eps-bar-group:hover .tc-eps-bar {
opacity: 0.85;
}

.tc-eps-bar-solid { background-color: #EA2D2E; }
.tc-eps-bar-peak { background-color: #24292F; } /* Special color for the 2024 peak */
.tc-eps-bar-drop { background-color: #FFC52F; } /* Special color for the 2025 drop */

.tc-eps-label-top {
font-size: 0.65rem;
font-weight: 700;
margin-bottom: 6px;
transition: color 0.2s;
text-align: center;
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-eps-chart { padding: 16px; }
.tc-eps-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-eps-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-eps-hero-stat-val { font-size: 1.5rem !important; }
.tc-eps-bars-container { height: 180px; gap: 2px; }
.tc-eps-metrics { flex-direction: column; gap: 8px !important; }
.tc-eps-label-top { font-size: 0.55rem !important; margin-bottom: 4px !important; }
#tc-eps-card-year, #tc-eps-card-value { font-size: 1.25rem !important; }
}

(function() {
// Data extracted from UBA Audited Financial Statements 2015-2025
const epsData = [
{ year: ’15’, fullYear: 2015, val: 1.79, yoy: ‘Baseline’, type: ‘solid’, note: “Baseline year. Earnings per share stands at ₦1.79.” },
{ year: ’16’, fullYear: 2016, val: 2.04, yoy: ‘+13.9%’, type: ‘solid’, note: “Consistent operational efficiency marginally improves shareholder returns.” },
{ year: ’17’, fullYear: 2017, val: 2.22, yoy: ‘+8.8%’, type: ‘solid’, note: “Modest EPS growth driven by expanding treasury operations.” },
{ year: ’18’, fullYear: 2018, val: 2.20, yoy: ‘-0.9%’, type: ‘solid’, note: “A slight dip in EPS despite revenue growth, indicating early signs of cost and margin pressures.” },
{ year: ’19’, fullYear: 2019, val: 2.52, yoy: ‘+14.5%’, type: ‘solid’, note: “Pre-pandemic stability pushes returns higher as digital channels lower the cost to serve.” },
{ year: ’20’, fullYear: 2020, val: 3.10, yoy: ‘+23.0%’, type: ‘solid’, note: “Despite the pandemic, robust deposit growth translated into a notable jump in EPS.” },
{ year: ’21’, fullYear: 2021, val: 3.39, yoy: ‘+9.3%’, type: ‘solid’, note: “Steady economic recovery allows the bank to maintain its upward trajectory in shareholder value.” },
{ year: ’22’, fullYear: 2022, val: 4.84, yoy: ‘+42.7%’, type: ‘solid’, note: “EPS accelerates as the bank begins to reap the benefits of a higher interest rate environment.” },
{ year: ’23’, fullYear: 2023, val: 17.49, yoy: ‘+261.3%’, type: ‘solid’, note: “Macroeconomic Shift: A massive spike driven by exceptional FX revaluation gains following the Naira’s unification.” },
{ year: ’24’, fullYear: 2024, val: 21.73, yoy: ‘+24.2%’, type: ‘peak’, note: “The Peak: Record EPS fueled by soaring interest rates and historically high top-line revenue.” },
{ year: ’25’, fullYear: 2025, val: 9.66, yoy: ‘-55.5%’, type: ‘drop’, note: “The Drop: While still 5× higher than 2015, massive loan impairment costs heavily eroded profitability and halved EPS year-over-year.” }
];

const baselineVal = 1.79;
const maxVal = 21.73;
let selectedYear = 2025;

window.tcSelectEpsYear = function(yr) {
selectedYear = yr;
renderEpsBars();

const item = epsData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-eps-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-eps-card-value’).innerText = ‘₦’ + item.val.toFixed(2);

let yoyColor = ‘#20C997’; // Green for positive
if (item.yoy.includes(‘-‘)) yoyColor = ‘#EA2D2E’; // Red for negative
else if (item.yoy === ‘Baseline’) yoyColor = ‘#24292F’; // Grey for baseline

const yoySpan = document.getElementById(‘tc-eps-card-yoy’);
yoySpan.innerText = item.yoy;
yoySpan.style.color = yoyColor;

const mult = (item.val / baselineVal).toFixed(2) + ‘×’;
document.getElementById(‘tc-eps-card-multiple’).innerText = mult;
document.getElementById(‘tc-eps-card-insight’).innerHTML = item.note;
}
};

function renderEpsBars() {
const container = document.getElementById(‘tc-eps-bars-container’);
container.innerHTML = ”;

epsData.forEach(d => {
const isSelected = (d.fullYear === selectedYear);

// Calculate height
const heightPct = Math.max(5, (d.val / maxVal) * 100);
const valText = ‘₦’ + d.val.toFixed(2);

const col = document.createElement(‘div’);
col.className = ‘tc-eps-bar-group’;
col.onclick = function() { tcSelectEpsYear(d.fullYear); };

const borderStyle = isSelected ? ‘border: 2px solid #151515; box-shadow: 0 0 8px rgba(0,0,0,0.15);’ : ”;

// Determine Bar Color Class
let barClass = ‘tc-eps-bar-solid’;
let labelColor = isSelected ? ‘#EA2D2E’ : ‘#24292F’;

if (d.type === ‘peak’) {
barClass = ‘tc-eps-bar-peak’;
if (isSelected) labelColor = ‘#151515’;
} else if (d.type === ‘drop’) {
barClass = ‘tc-eps-bar-drop’;
if (isSelected) labelColor = ‘#D49B00’; // Darker yellow for text legibility
}

const labelWeight = isSelected ? ‘800’ : ‘600’;

col.innerHTML = `

‘${d.year}
`;

container.appendChild(col);
});
}

// Initial Render
tcSelectEpsYear(2025);
})();

#tc-uba-mkt-chart * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

/* Typography Tokens based on TC Brand Guidelines */
.tc-mkt-tag { color: #EA2D2E; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 8px; }
.tc-mkt-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 12px; color: #151515; letter-spacing: -0.01em; }
.tc-mkt-desc { font-size: 0.9375rem; color: #24292F; line-height: 1.6; margin-bottom: 20px; border-left: 3px solid #E3E8EF; padding-left: 12px; }

/* Buttons */
.tc-mkt-btn { background: #F6F6F6; border: 1px solid #E3E8EF; color: #151515; padding: 10px 16px; font-size: 0.875rem; font-weight: 700; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }
.tc-mkt-btn.active-sp { background: #151515; color: #FFFFFF; border-color: #151515; }
.tc-mkt-btn.active-div { background: #FFC52F; color: #151515; border-color: #FFC52F; }

/* Scoreboard */
.tc-mkt-scoreboard { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 16px; background: #F6F6F6; border-radius: 6px; padding: 16px 20px; margin-bottom: 16px; border: 1px solid #E3E8EF; align-items: center;}
.tc-mkt-score-col { display: flex; flex-direction: column; border-right: 1px solid #D1D5DB; padding-right: 8px; }
.tc-mkt-score-col:last-child { border-right: none; padding-right: 0; }

.tc-mkt-score-label { font-size: 0.65rem; color: #6B7280; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;}
.tc-mkt-score-val { font-size: 1.35rem; font-weight: 800; color: #151515; line-height: 1; transition: color 0.2s; }
.tc-mkt-dot { width: 10px; height: 10px; border-radius: 2px; }

/* Climax Callout Box */
.tc-mkt-insight-box { background: #FFF9F9; border-left: 4px solid #EA2D2E; padding: 12px 16px; border-radius: 0 4px 4px 0; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px;}
.tc-mkt-insight-text { font-size: 0.875rem; color: #151515; font-weight: 600; line-height: 1.4;}
.tc-mkt-insight-margin { font-size: 1.25rem; font-weight: 800; color: #EA2D2E; text-align: right;}

/* Chart Layout */
.tc-mkt-chart-area { height: 220px; width: 100%; display: flex; justify-content: space-around; gap: 8px; margin-bottom: 0; align-items: flex-end; border-bottom: 2px solid #151515; padding-top: 20px; padding-left: 8%; padding-right: 8%; }

/* Column Wrappers */
.tc-mkt-col-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease;}
.tc-mkt-col-wrap.active { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; z-index: 10; }
.tc-mkt-col-wrap:hover { opacity: 1; }

/* The Bars */
.tc-mkt-bar { width: 100%; max-width: 60px; border-radius: 4px 4px 0 0; transition: height 0.4s ease, background-color 0.4s ease; margin: 0 auto; }
.tc-mkt-bar-sp { background-color: #151515; }
.tc-mkt-bar-div { background-color: #FFC52F; }
.tc-mkt-bar-drop { background-color: #EA2D2E; }

.tc-mkt-label-top { font-size: 0.8125rem; font-weight: 800; margin-bottom: 8px; transition: color 0.2s; pointer-events: none; text-align: center; }

/* Year Labels Row */
.tc-mkt-years-row { display: flex; justify-content: space-around; width: 100%; padding-top: 10px; padding-left: 8%; padding-right: 8%; }
.tc-mkt-year-slot { flex: 1; text-align: center; font-size: 0.875rem; font-weight: 600; color: #9CA3AF; transition: color 0.2s;}
.tc-mkt-year-slot.active { font-weight: 800; color: #151515; }

/* Footer */
.tc-mkt-footer { font-size: 0.75rem; color: #6B7280; line-height: 1.5; margin-top: 20px; border-top: 1px solid #E3E8EF; padding-top: 12px; text-align: right; }

/* Mobile Polish */
@media (max-width: 550px) {
#tc-uba-mkt-chart { padding: 16px; }
.tc-mkt-title { font-size: 1.25rem; }
.tc-mkt-desc { font-size: 0.875rem; margin-bottom: 16px; }
.tc-mkt-scoreboard { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.tc-mkt-score-col { border-right: none; }
.tc-mkt-score-col:nth-child(1) { grid-column: span 2; border-bottom: 1px solid #E3E8EF; padding-bottom: 8px; border-right: none; }
.tc-mkt-score-val { font-size: 1.2rem; }
.tc-mkt-insight-box { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.tc-mkt-insight-margin { font-size: 1.1rem; text-align: left; }
.tc-mkt-chart-area { height: 180px; padding-left: 2%; padding-right: 2%; }
.tc-mkt-years-row { padding-left: 2%; padding-right: 2%; }
.tc-mkt-bar { max-width: 44px; }
.tc-mkt-label-top { font-size: 0.75rem; margin-bottom: 4px; }
.tc-mkt-btn { padding: 8px 12px; font-size: 0.8125rem; flex: 1; }
}

(function() {
// 3-Year Focused Dataset based on raw editorial text
const mktData = [
{
year: ‘2015’, fullYear: 2015, sp: 4.32, div: 0.60, loss: ‘Normal’,
note: “Baseline year. UBA shares traded at roughly ₦4.32, with a 60 kobo dividend payout.”
},
{
year: ‘2024’, fullYear: 2024, sp: 34.00, div: 3.25, loss: ‘Normal’,
note: “Peak returns. Dividend payouts climbed to ₦3.25 per share.”
},
{
year: ‘2025’, fullYear: 2025, sp: 41.65, div: 0.00, loss: ‘₦1.02T’,
note: “Despite shares hitting ₦41.65, UBA provided ₦1.02 trillion ($757.99 million) for credit losses, interrupting the dividend run.”
}
];

const maxSp = 45;
const maxDiv = 4.0; // Scaled to fit the ₦3.25 dividend nicely

let activeMode = ‘sp’; // ‘sp’ or ‘div’
let selectedYear = 2025;

window.tcSetMktMode = function(mode) {
activeMode = mode;

const btnSp = document.getElementById(‘tc-mkt-btn-sp’);
const btnDiv = document.getElementById(‘tc-mkt-btn-div’);

if (mode === ‘sp’) {
btnSp.className = ‘tc-mkt-btn active-sp’;
btnDiv.className = ‘tc-mkt-btn’;
} else {
btnSp.className = ‘tc-mkt-btn’;
btnDiv.className = ‘tc-mkt-btn active-div’;
}

renderMktBars();
};

window.tcSelectMktYear = function(yr) {
selectedYear = yr;

const item = mktData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-mkt-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-mkt-card-sp’).innerText = ‘₦’ + item.sp.toFixed(2);

const divColor = (item.fullYear === 2025) ? ‘#EA2D2E’ : ‘#24292F’;
const divEl = document.getElementById(‘tc-mkt-card-div’);

if (item.fullYear === 2025) {
divEl.innerText = ‘Halted’;
} else {
divEl.innerText = ‘₦’ + item.div.toFixed(2);
}
divEl.style.color = divColor;

document.getElementById(‘tc-mkt-card-loss’).innerText = item.loss;
document.getElementById(‘tc-mkt-card-loss’).style.color = item.loss === ‘₦1.02T’ ? ‘#EA2D2E’ : ‘#24292F’;

document.getElementById(‘tc-mkt-card-insight’).innerHTML = item.note;

renderMktBars();
}
};

function renderMktBars() {
const container = document.getElementById(‘tc-mkt-bars-container’);
const yearsContainer = document.getElementById(‘tc-mkt-years’);

container.innerHTML = ”;
let yearsHTML = ”;

mktData.forEach((d) => {
const isSelected = (d.fullYear === selectedYear);

let heightPct, valText, barClass, labelColor;
const labelWeight = isSelected ? ‘800’ : ‘600’;

if (activeMode === ‘sp’) {
heightPct = Math.max(5, (d.sp / maxSp) * 100);
valText = ‘₦’ + d.sp.toFixed(2);
barClass = ‘tc-mkt-bar-sp’;
labelColor = isSelected ? ‘#151515’ : ‘#6B7280’;
} else {
heightPct = Math.max(2, (d.div / maxDiv) * 100);

if (d.fullYear === 2025) {
valText = ‘₦0.00’;
barClass = ‘tc-mkt-bar-drop’; // Red to signify the halt
labelColor = isSelected ? ‘#EA2D2E’ : ‘#6B7280’;
} else {
valText = ‘₦’ + d.div.toFixed(2);
barClass = ‘tc-mkt-bar-div’;
labelColor = isSelected ? ‘#D49B00’ : ‘#6B7280’;
}
}

const col = document.createElement(‘div’);
col.className = ‘tc-mkt-col-wrap’;
if (isSelected) col.classList.add(‘active’);

col.addEventListener(‘click’, () => tcSelectMktYear(d.fullYear));

col.innerHTML = `

`;

container.appendChild(col);

// Year Labels
const yearClass = isSelected ? ‘tc-mkt-year-slot active’ : ‘tc-mkt-year-slot’;
yearsHTML += `

`;
});

yearsContainer.innerHTML = yearsHTML;
}

// Initial Render
tcSetMktMode(‘sp’);
tcSelectMktYear(2025);
})();

/* Reset & Base */
#tc-uba-geo-chart * {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

/* Typography Tokens */
.tc-geo-tag { color: #EA2D2E; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 8px; }
.tc-geo-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 12px; color: #151515; letter-spacing: -0.01em; }
.tc-geo-desc { font-size: 0.9375rem; color: #24292F; line-height: 1.6; margin-bottom: 20px; font-weight: 400; border-left: 3px solid #E3E8EF; padding-left: 12px; }

/* Scoreboard */
.tc-geo-scoreboard { display: flex; background: #F6F6F6; border-radius: 6px; padding: 16px; margin-bottom: 24px; border: 1px solid #E3E8EF; }
.tc-geo-score-col { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #E3E8EF; padding: 0 12px; }
.tc-geo-score-col:first-child { padding-left: 0; flex: 0.8; }
.tc-geo-score-col:last-child { border-right: none; padding-right: 0; }

.tc-geo-score-label { font-size: 0.6875rem; color: #24292F; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.tc-geo-score-val { font-size: 1.35rem; font-weight: 800; color: #151515; line-height: 1; transition: color 0.2s; }
.tc-geo-dot { width: 10px; height: 10px; border-radius: 2px; }

/* Responsive Chart Container */
.tc-geo-chart-area { position: relative; height: 240px; margin-bottom: 24px; width: 100%; }
.tc-geo-bars-wrap { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; border-bottom: 2px solid #151515; gap: 4px; position: relative; z-index: 2; padding-top: 20px; touch-action: pan-y; }

/* Bar Groups & Interaction */
.tc-geo-bar-group { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; position: relative; opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease; }
.tc-geo-bar-group.active { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; z-index: 10; }
.tc-geo-bar-group:hover { opacity: 1; }

/* Segments */
.tc-geo-seg { width: 100%; transition: height 0.3s ease; }
.tc-seg-row { background-color: #E3E8EF; border-radius: 2px 2px 0 0; } /* Quiet Grey */
.tc-seg-roa { background-color: #FFC52F; border-bottom: 1px solid #ffffff; } /* Accent Yellow */
.tc-seg-nig { background-color: #EA2D2E; border-bottom: 1px solid #ffffff; } /* Primary Red */

/* Year Labels */
.tc-geo-year { font-size: 0.75rem; font-weight: 600; color: #24292F; margin-top: 8px; pointer-events: none; }
.tc-geo-bar-group.active .tc-geo-year { font-weight: 800; color: #151515; }

/* 50% Guide Line */
.tc-geo-guide { position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dashed #A0AEC0; z-index: 1; pointer-events: none; }
.tc-geo-guide-text { position: absolute; left: 0; top: -18px; font-size: 0.65rem; color: #A0AEC0; font-weight: 700; letter-spacing: 0.5px; }

/* Footer */
.tc-geo-footer { font-size: 0.75rem; color: #6B7280; line-height: 1.5; border-top: 1px solid #E3E8EF; padding-top: 12px; text-align: right; }

/* Mobile Polish */
@media (max-width: 550px) {
#tc-uba-geo-chart { padding: 16px 12px; }
.tc-geo-title { font-size: 1.25rem; }
.tc-geo-desc { font-size: 0.875rem; margin-bottom: 16px; }
.tc-geo-scoreboard {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 12px;
}
.tc-geo-score-col { padding: 0; border-right: none; }
.tc-geo-score-col:nth-child(1), .tc-geo-score-col:nth-child(2) {
border-bottom: 1px solid #E3E8EF;
padding-bottom: 8px;
}
.tc-geo-score-val { font-size: 1.2rem; }
.tc-geo-score-label { font-size: 0.65rem; }
.tc-geo-chart-area { height: 200px; margin-bottom: 20px; }
.tc-geo-bars-wrap { gap: 2px; }
.tc-geo-year { font-size: 0.65rem; }
/* Selective year labeling on mobile to prevent crowding */
.tc-geo-bar-group:nth-child(even) .tc-geo-year { display: none; }
.tc-geo-bar-group.active .tc-geo-year { display: block; }
}

(function() {
const data = [
{ y: ’15’, full: 2015, nig: 71.0, roa: 21.6, row: 7.4 },
{ y: ’16’, full: 2016, nig: 62.6, roa: 31.4, row: 6.0 },
{ y: ’17’, full: 2017, nig: 62.4, roa: 32.4, row: 5.2 },
{ y: ’18’, full: 2018, nig: 61.1, roa: 31.4, row: 7.5 },
{ y: ’19’, full: 2019, nig: 62.5, roa: 32.3, row: 5.2 },
{ y: ’20’, full: 2020, nig: 61.0, roa: 35.0, row: 4.0 },
{ y: ’21’, full: 2021, nig: 56.4, roa: 38.9, row: 4.7 },
{ y: ’22’, full: 2022, nig: 58.5, roa: 31.8, row: 9.7 },
{ y: ’23’, full: 2023, nig: 46.8, roa: 40.5, row: 12.7 },
{ y: ’24’, full: 2024, nig: 44.4, roa: 43.6, row: 12.0 },
{ y: ’25’, full: 2025, nig: 38.2, roa: 51.4, row: 10.4 }
];

const barsContainer = document.getElementById(‘tc-geo-bars’);
const elYear = document.getElementById(‘tc-data-year’);
const elNig = document.getElementById(‘tc-data-nig’);
const elRoa = document.getElementById(‘tc-data-roa’);
const elRow = document.getElementById(‘tc-data-row’);

function updateUI(d) {
// Update Scoreboard
elYear.innerText = d.full;
elNig.innerText = d.nig.toFixed(1) + ‘%’;
elRoa.innerText = d.roa.toFixed(1) + ‘%’;
elRow.innerText = d.row.toFixed(1) + ‘%’;

// Update Active Bar state
const allBars = barsContainer.querySelectorAll(‘.tc-geo-bar-group’);
allBars.forEach(bar => {
if (parseInt(bar.dataset.year) === d.full) {
bar.classList.add(‘active’);
} else {
bar.classList.remove(‘active’);
}
});
}

function handleTouchScrub(e) {
if (!e.touches || e.touches.length === 0) return;
const touchX = e.touches[0].clientX;
const bars = barsContainer.querySelectorAll(‘.tc-geo-bar-group’);
bars.forEach((bar, idx) => {
const rect = bar.getBoundingClientRect();
if (touchX >= rect.left && touchX {
const group = document.createElement(‘div’);
group.className = ‘tc-geo-bar-group’;
group.dataset.year = d.full;

group.addEventListener(‘mouseenter’, () => updateUI(d));
group.addEventListener(‘click’, () => updateUI(d));

group.innerHTML = `

‘${d.y}
`;

barsContainer.appendChild(group);
});

// Touch scrubbing for seamless mobile interaction
barsContainer.addEventListener(‘touchstart’, handleTouchScrub, { passive: true });
barsContainer.addEventListener(‘touchmove’, handleTouchScrub, { passive: true });

// Revert to the climax state (2025) on mouseleave
barsContainer.addEventListener(‘mouseleave’, () => {
updateUI(data[data.length – 1]);
});
}

// Init
buildChart();
updateUI(data[data.length – 1]);
})();

/* Reset & Scoped Base */
#tc-uba-tech-chart * {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

/* TechCabal Brand Typography Tokens */
.tc-tech-tag { color: #EA2D2E; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 8px; }
.tc-tech-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 12px; color: #151515; letter-spacing: -0.01em; }
.tc-tech-desc { font-size: 0.9375rem; color: #24292F; line-height: 1.6; margin-bottom: 20px; border-left: 3px solid #E3E8EF; padding-left: 12px; }

/* Scoreboard */
.tc-tech-scoreboard { display: grid; grid-template-columns: 0.8fr 1fr 1fr 1fr; gap: 12px; background: #F6F6F6; border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid #E3E8EF; align-items: center; }
.tc-tech-score-col { display: flex; flex-direction: column; border-right: 1px solid #D1D5DB; padding-right: 8px; }
.tc-tech-score-col:last-child { border-right: none; padding-right: 0; }

.tc-tech-score-label { font-size: 0.65rem; color: #6B7280; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px; }
.tc-tech-score-val { font-size: 1.25rem; font-weight: 800; color: #151515; line-height: 1; transition: color 0.2s; }
.tc-tech-dot { width: 8px; height: 8px; border-radius: 2px; }

/* Insight Callout Box */
.tc-tech-insight-box { background: #FFF9F9; border-left: 4px solid #EA2D2E; padding: 12px 16px; border-radius: 0 4px 4px 0; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tc-tech-insight-text { font-size: 0.875rem; color: #151515; font-weight: 600; line-height: 1.4; }
.tc-tech-insight-margin { font-size: 1.25rem; font-weight: 800; color: #EA2D2E; }

/* Diverging Chart Area */
.tc-tech-chart-area { position: relative; height: 240px; width: 100%; display: flex; gap: 4px; margin-bottom: 8px; touch-action: pan-y; }

/* Center Zero-Axis */
.tc-tech-axis { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #151515; z-index: 1; pointer-events: none; }
.tc-tech-axis-label { position: absolute; left: 0; top: -18px; font-size: 0.6rem; color: #6B7280; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }

/* Interactive Bar Columns */
.tc-tech-col-wrap { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; cursor: pointer; opacity: 0.4; transition: opacity 0.2s ease; }
.tc-tech-col-wrap.active { opacity: 1; z-index: 10; }
.tc-tech-col-wrap:hover { opacity: 1; }

/* Upper Half (Income Segment) */
.tc-tech-up { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 1px; }
.tc-tech-bar-inc { background-color: #20C997; width: 100%; border-radius: 3px 3px 0 0; transition: height 0.3s ease; }

/* Lower Half (Expenses Segment) */
.tc-tech-down { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 1px; }
.tc-tech-bar-eexp { background-color: #EA2D2E; width: 100%; transition: height 0.3s ease; }
.tc-tech-bar-it { background-color: #FFC52F; width: 100%; border-radius: 0 0 3px 3px; transition: height 0.3s ease; border-top: 1px solid #FFFFFF; }

/* Timeline Slot Row */
.tc-tech-years-row { display: flex; gap: 4px; width: 100%; border-top: 1px solid #E3E8EF; padding-top: 8px; }
.tc-tech-year-slot { flex: 1; text-align: center; font-size: 0.75rem; font-weight: 600; color: #9CA3AF; transition: color 0.2s; }
.tc-tech-year-slot.active { font-weight: 800; color: #151515; }

/* Footer Sourcing */
.tc-tech-footer { font-size: 0.75rem; color: #6B7280; line-height: 1.5; margin-top: 20px; border-top: 1px solid #E3E8EF; padding-top: 12px; text-align: right; }

/* Viewport Breakpoints (<550px) */
@media (max-width: 550px) {
#tc-uba-tech-chart { padding: 16px 12px; }
.tc-tech-title { font-size: 1.25rem; }
.tc-tech-desc { font-size: 0.875rem; margin-bottom: 16px; }
.tc-tech-scoreboard {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 12px;
}
.tc-tech-score-col { border-right: none; }
.tc-tech-score-col:nth-child(1), .tc-tech-score-col:nth-child(2) {
border-bottom: 1px solid #E3E8EF;
padding-bottom: 8px;
}
.tc-tech-score-val { font-size: 1.15rem; }
.tc-tech-insight-box { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.tc-tech-insight-margin { font-size: 1.1rem; }
.tc-tech-chart-area { height: 200px; gap: 2px; }
.tc-tech-year-slot { font-size: 0.65rem; }
.tc-tech-year-slot:nth-child(even) { display: none; }
.tc-tech-year-slot.active { display: block; }
}

(function() {
const data = [
{ y: ’15’, full: 2015, inc: 17.18, eExp: 8.31, itExp: 2.05 },
{ y: ’16’, full: 2016, inc: 30.46, eExp: 13.09, itExp: 4.90 },
{ y: ’17’, full: 2017, inc: 20.92, eExp: 15.01, itExp: 5.51 },
{ y: ’18’, full: 2018, inc: 27.92, eExp: 23.76, itExp: 5.67 },
{ y: ’19’, full: 2019, inc: 38.76, eExp: 28.45, itExp: 6.05 },
{ y: ’20’, full: 2020, inc: 44.24, eExp: 35.30, itExp: 6.63 },
{ y: ’21’, full: 2021, inc: 64.59, eExp: 47.91, itExp: 8.13 },
{ y: ’22’, full: 2022, inc: 78.94, eExp: 61.55, itExp: 9.31 },
{ y: ’23’, full: 2023, inc: 125.57, eExp: 101.84, itExp: 23.18 },
{ y: ’24’, full: 2024, inc: 236.31, eExp: 179.00, itExp: 48.05 },
{ y: ’25’, full: 2025, inc: 225.63, eExp: 177.37, itExp: 42.96 }
];

const scaleMax = 250;

const barsContainer = document.getElementById(‘tc-tech-bars’);
const yearsContainer = document.getElementById(‘tc-tech-years’);

const elYear = document.getElementById(‘tc-data-year’);
const elInc = document.getElementById(‘tc-data-inc’);
const elEExp = document.getElementById(‘tc-data-e-exp’);
const elItExp = document.getElementById(‘tc-data-it-exp’);
const elMargin = document.getElementById(‘tc-data-margin’);
const elInsight = document.getElementById(‘tc-data-insight’);

function updateUI(d) {
const margin = d.inc – (d.eExp + d.itExp);

elYear.innerText = d.full;
elInc.innerText = ‘₦’ + d.inc.toFixed(1) + ‘B’;
elEExp.innerText = ‘₦’ + d.eExp.toFixed(1) + ‘B’;
elItExp.innerText = ‘₦’ + d.itExp.toFixed(1) + ‘B’;
elMargin.innerText = ‘₦’ + margin.toFixed(1) + ‘B’;

if (d.full === 2025) {
elInsight.innerText = “In 2025, digital infrastructure costs consumed almost 98% of digital revenues.”;
elMargin.style.color = “#EA2D2E”;
} else if (margin < 0) {
elInsight.innerText = "Digital operations ran at a net loss, as expenses outpaced total digital income.";
elMargin.style.color = "#EA2D2E";
} else if (margin {
if (parseInt(wrap.dataset.year) === d.full) {
wrap.classList.add(‘active’);
allYears[index].classList.add(‘active’);
} else {
wrap.classList.remove(‘active’);
allYears[index].classList.remove(‘active’);
}
});
}

function handleTouchScrub(e) {
if (!e.touches || e.touches.length === 0) return;
const touchX = e.touches[0].clientX;
const wraps = barsContainer.querySelectorAll(‘.tc-tech-col-wrap’);
wraps.forEach((wrap, idx) => {
const rect = wrap.getBoundingClientRect();
if (touchX >= rect.left && touchX {
const incHeightPct = (d.inc / scaleMax) * 100;
const eExpHeightPct = (d.eExp / scaleMax) * 100;
const itExpHeightPct = (d.itExp / scaleMax) * 100;

barsHTML += `

`;

yearsHTML += `

`;
});

const axisHTML = `

`;
barsContainer.innerHTML = axisHTML + barsHTML;
yearsContainer.innerHTML = yearsHTML;

const allWraps = barsContainer.querySelectorAll(‘.tc-tech-col-wrap’);
allWraps.forEach((wrap, index) => {
const rowData = data[index];
wrap.addEventListener(‘mouseenter’, () => updateUI(rowData));
wrap.addEventListener(‘click’, () => updateUI(rowData));
});

barsContainer.addEventListener(‘touchstart’, handleTouchScrub, { passive: true });
barsContainer.addEventListener(‘touchmove’, handleTouchScrub, { passive: true });

barsContainer.addEventListener(‘mouseleave’, () => {
updateUI(data[data.length – 1]);
});
}

buildChart();
updateUI(data[data.length – 1]);
})();

#tc-uba-talent-full-chart * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

/* Typography & Buttons */
.tc-tf-btn {
background: #F6F6F6;
border: 1px solid #E3E8EF;
color: #151515;
padding: 8px 14px;
font-size: 0.8125rem;
font-weight: 700;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tc-tf-btn.active {
background: #EA2D2E;
color: #FFFFFF;
border-color: #EA2D2E;
}

/* Chart Elements */
.tc-tf-chart-area {
width: 100%;
position: relative;
margin-bottom: 20px;
touch-action: pan-y;
}

.tc-tf-bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 260px;
padding-top: 20px;
border-bottom: 2px solid #151515;
gap: 4px;
position: relative;
z-index: 2;
width: 100%;
}

.tc-tf-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
opacity: 0.4;
transition: opacity 0.2s ease;
padding: 0 1px;
}
.tc-tf-bar-group.active {
opacity: 1;
z-index: 10;
transform: scaleX(1.02);
}
.tc-tf-bar-group:hover {
opacity: 1;
}

.tc-tf-bar {
width: 100%;
max-width: 32px;
border-radius: 2px 2px 0 0;
transition: height 0.4s ease, background-color 0.2s;
}
.tc-tf-bar-hc { background-color: #24292F; }
.tc-tf-bar-cost { background-color: #EA2D2E; }
.tc-tf-bar-avg { background-color: #FFC52F; }

.tc-tf-label-top {
font-size: 0.65rem;
font-weight: 800;
margin-bottom: 6px;
transition: color 0.2s;
white-space: nowrap;
pointer-events: none;
text-align: center;
}
.tc-tf-year {
font-size: 0.75rem;
font-weight: 600;
color: #9CA3AF;
margin-top: 8px;
pointer-events: none;
transition: color 0.2s;
}
.tc-tf-bar-group.active .tc-tf-year {
font-weight: 800;
color: #151515;
}

/* Mobile Adjustments */
@media (max-width: 550px) {
#tc-uba-talent-full-chart { padding: 16px; }
.tc-tf-header-flex { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.tc-tf-hero-stat { text-align: left !important; margin-top: 8px; }
.tc-tf-hero-stat-val { font-size: 1.5rem !important; }
.tc-tf-controls-wrapper { flex-direction: column; align-items: flex-start !important; gap: 12px; width: 100%; }
.tc-tf-btn-group { width: 100%; display: flex; gap: 4px; }
.tc-tf-btn { flex: 1; text-align: center; padding: 8px 4px; font-size: 0.75rem; }
.tc-tf-bars-container { height: 190px; gap: 2px; }
.tc-tf-metrics { flex-direction: column; gap: 8px !important; }
.tc-tf-label-top { font-size: 0.55rem !important; margin-bottom: 4px !important; }
#tc-tf-card-year, #tc-tf-card-hc { font-size: 1.25rem !important; }

/* Hide alternate years on small mobile screens to prevent visual crowding */
.tc-tf-bar-group:nth-child(even) .tc-tf-year { display: none; }
.tc-tf-bar-group.active .tc-tf-year { display: block; }
}

(function() {
// Complete Year-by-Year Dataset from UBA Audited Financial Statements (2015-2025)
const tfData = [
{ year: ’15’, fullYear: 2015, hc: 12770, cost: 57.45, avg: 4.50, note: “Baseline year. UBA maintained a large workforce of 12,770 staff with total benefit expenses of ₦57.45B (₦4.50M per worker).” },
{ year: ’16’, fullYear: 2016, hc: 12890, cost: 62.10, avg: 4.82, note: “Headcount peaked slightly as Pan-African expansion required initial physical branch presence.” },
{ year: ’17’, fullYear: 2017, hc: 11925, cost: 68.97, avg: 5.78, note: “Early restructuring: Staff count dropped by nearly 1,000, but per-employee costs rose 20% to ₦5.78M.” },
{ year: ’18’, fullYear: 2018, hc: 12500, cost: 71.16, avg: 5.69, note: “Temporary recruitment surge as digital transformation projects began expanding group-wide.” },
{ year: ’19’, fullYear: 2019, hc: 13237, cost: 75.10, avg: 5.67, note: “Peak pre-pandemic headcount (13,237 staff). Total wage bill surpassed ₦75 billion.” },
{ year: ’20’, fullYear: 2020, hc: 10850, cost: 87.55, avg: 8.07, note: “Pandemic acceleration: Headcount was slashed by over 2,300. Per-worker costs jumped 42% as digital skills became paramount.” },
{ year: ’21’, fullYear: 2021, hc: 10199, cost: 93.24, avg: 9.14, note: “Workforce dropped to 10,199. Average compensation surpassed ₦9 million per worker annually.” },
{ year: ’22’, fullYear: 2022, hc: 10007, cost: 113.99, avg: 11.39, note: “Total employee expenses crossed ₦100 billion for the first time despite the lowest headcount in a decade.” },
{ year: ’23’, fullYear: 2023, hc: 10007, cost: 182.81, avg: 18.27, note: “Severe inflation & wage adjustments: Employee benefits spiked 60% YoY to cushion macroeconomic pressures.” },
{ year: ’24’, fullYear: 2024, hc: 9323, cost: 314.66, avg: 33.75, note: “Workforce dropped to 9,323 staff, yet total employee benefits surged to ₦314.66B due to industry-wide wage adjustments.” },
{ year: ’25’, fullYear: 2025, hc: 10821, cost: 376.27, avg: 34.77, note: “Workforce stabilized at 10,821 staff. However, Group employee benefit expenses hit a staggering ₦376.27B, bringing the average cost per worker to nearly ₦34.8M.” }
];

const maxHc = 14000;
const maxCost = 400;
const maxAvg = 40;

let activeMode = ‘hc’;
let selectedYear = 2025;

window.tcSetTfMode = function(mode) {
activeMode = mode;

document.getElementById(‘tc-tf-btn-hc’).className = ‘tc-tf-btn’ + (mode === ‘hc’ ? ‘ active’ : ”);
document.getElementById(‘tc-tf-btn-cost’).className = ‘tc-tf-btn’ + (mode === ‘cost’ ? ‘ active’ : ”);
document.getElementById(‘tc-tf-btn-avg’).className = ‘tc-tf-btn’ + (mode === ‘avg’ ? ‘ active’ : ”);

const legend = document.getElementById(‘tc-tf-legend’);
if (mode === ‘hc’) {
legend.innerHTML = `

`;
} else if (mode === ‘cost’) {
legend.innerHTML = `

`;
} else {
legend.innerHTML = `

`;
}

renderTfBars();
};

window.tcSelectTfYear = function(yr) {
selectedYear = yr;

const item = tfData.find(d => d.fullYear === yr);
if (item) {
document.getElementById(‘tc-tf-card-year’).innerText = item.fullYear;
document.getElementById(‘tc-tf-card-hc’).innerText = item.hc.toLocaleString() + ‘ Staff’;
document.getElementById(‘tc-tf-card-cost’).innerText = ‘₦’ + item.cost.toFixed(2) + ‘ Billion’;
document.getElementById(‘tc-tf-card-avg’).innerText = ‘₦’ + item.avg.toFixed(2) + ‘ Million’;
document.getElementById(‘tc-tf-card-insight’).innerHTML = item.note;

renderTfBars();
}
};

function handleTouchScrub(e) {
if (!e.touches || e.touches.length === 0) return;
const touchX = e.touches[0].clientX;
const container = document.getElementById(‘tc-tf-bars-container’);
const groups = container.querySelectorAll(‘.tc-tf-bar-group’);
groups.forEach((grp, idx) => {
const rect = grp.getBoundingClientRect();
if (touchX >= rect.left && touchX {
const isSelected = (d.fullYear === selectedYear);

let heightPct, valText, barClass, labelColor;

if (activeMode === ‘hc’) {
heightPct = Math.max(8, (d.hc / maxHc) * 100);
valText = (d.hc / 1000).toFixed(1) + ‘k’;
barClass = ‘tc-tf-bar-hc’;
labelColor = isSelected ? ‘#151515’ : ‘#24292F’;
} else if (activeMode === ‘cost’) {
heightPct = Math.max(8, (d.cost / maxCost) * 100);
valText = ‘₦’ + d.cost.toFixed(0) + ‘B’;
barClass = ‘tc-tf-bar-cost’;
labelColor = isSelected ? ‘#EA2D2E’ : ‘#24292F’;
} else {
heightPct = Math.max(8, (d.avg / maxAvg) * 100);
valText = ‘₦’ + d.avg.toFixed(1) + ‘M’;
barClass = ‘tc-tf-bar-avg’;
labelColor = isSelected ? ‘#D99A00’ : ‘#24292F’;
}

const col = document.createElement(‘div’);
col.className = ‘tc-tf-bar-group’;
if (isSelected) col.classList.add(‘active’);

col.addEventListener(‘click’, () => tcSelectTfYear(d.fullYear));
col.addEventListener(‘mouseenter’, () => tcSelectTfYear(d.fullYear));

col.innerHTML = `

`;

container.appendChild(col);
});
}

const chartArea = document.querySelector(‘.tc-tf-chart-area’);
chartArea.addEventListener(‘touchstart’, handleTouchScrub, { passive: true });
chartArea.addEventListener(‘touchmove’, handleTouchScrub, { passive: true });

// Initialize defaults
tcSetTfMode(‘hc’);
tcSelectTfYear(2025);
})();