/* JSE Stock Dashboard - GKCM Red & White Theme */

:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-card: #FFFFFF;
    --border-color: rgba(200, 16, 46, 0.15);
    --accent: #C8102E;
    --accent-secondary: #8B0000;
    --accent-light: rgba(200, 16, 46, 0.1);
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --positive: #28A745;
    --negative: #DC3545;
    --gkcm-red: #C8102E;
    --gkcm-dark-red: #8B0000;
}

/* Override base styles for dashboard */
body {
    background: var(--bg-secondary);
    min-height: 100vh;
    color: var(--text-primary);
}

.dashboard-container {
    padding: 20px 0;
}

/* Stock Header */
.stock-header {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stock-selector label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.stock-search-wrapper {
    position: relative;
}

.stock-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
}

.stock-search-input {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 32px 10px 36px;
    font-size: 1rem;
    border-radius: 8px;
}

.stock-search-input:focus {
    border-color: var(--gkcm-red);
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.15);
}

.stock-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
}

.stock-search-clear:hover {
    color: var(--gkcm-red);
}

.stock-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(500px, 90vw);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stock-search-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(200, 16, 46, 0.06);
    transition: background 0.15s;
}

.stock-search-item:last-child {
    border-bottom: none;
}

.stock-search-item:hover,
.stock-search-item.active {
    background: var(--accent-light);
}

.stock-search-item .search-symbol {
    font-weight: 700;
    color: var(--gkcm-red);
    font-size: 0.85rem;
    flex-shrink: 0;
    background: rgba(200, 16, 46, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.stock-search-item .search-name {
    color: var(--text-primary);
    font-size: 0.88rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-search-item .search-sector {
    color: var(--text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .stock-search-item .search-sector {
        width: 100%;
        padding-left: 0;
        font-size: 0.7rem;
    }
}

.stock-search-no-results {
    padding: 16px 14px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.price-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.company-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.company-title h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
}

.company-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sector-badge {
    background: var(--accent-light);
    color: var(--gkcm-red);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.btn-snapshot {
    background: var(--gkcm-red);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-snapshot:hover {
    background: var(--gkcm-dark-red);
    color: #fff;
    text-decoration: none;
}

.btn-snapshot i {
    font-size: 0.85rem;
}

.btn-trade-stock {
    background: #16a34a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-trade-stock:hover {
    background: #15803d;
    color: #fff;
    text-decoration: none;
}

.btn-trade-stock i {
    font-size: 0.85rem;
}

.price-info {
    text-align: right;
}

.current-price {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.price-change {
    font-size: 1rem;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 6px;
}

.price-change.positive {
    background: rgba(0, 200, 83, 0.2);
    color: var(--positive);
}

.price-change.negative {
    background: rgba(255, 82, 82, 0.2);
    color: var(--negative);
}

.price-details {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.price-details span {
    white-space: nowrap;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border: none;
}

.nav-tabs .nav-link.active {
    color: var(--gkcm-red);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--gkcm-red);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
    background: var(--accent-light);
    border-bottom: 1px solid var(--border-color);
    color: var(--gkcm-red);
    font-weight: 600;
    padding: 15px 20px;
}

.card-body {
    padding: 20px;
    color: var(--text-primary);
}

/* Company Description */
.company-desc {
    line-height: 1.7;
    color: var(--text-secondary);
}

.company-meta {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.company-meta span {
    margin-right: 25px;
    color: var(--text-secondary);
}

.company-meta strong {
    color: var(--text-primary);
}

/* Statistics */
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row span:first-child {
    color: var(--text-secondary);
}

.stat-row span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

/* People List */
.people-list {
    max-height: 300px;
    overflow-y: auto;
}

.person-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.person-item:last-child {
    border-bottom: none;
}

.person-name {
    color: var(--text-primary);
    font-weight: 500;
}

.person-title {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Overview Chart */
.overview-timeframe {
    display: flex;
    gap: 5px;
}

.overview-tf-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.overview-tf-btn:hover {
    color: var(--gkcm-red);
    border-color: var(--gkcm-red);
}

.overview-tf-btn.active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
}

#overviewChart {
    width: 100%;
}

/* Chart Controls */
.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timeframe-selector,
.indicator-toggles,
.chart-type-selector {
    display: flex;
    gap: 5px;
}

.timeframe-btn,
.indicator-btn,
.chart-type-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.timeframe-btn:hover,
.chart-type-btn:hover {
    color: var(--gkcm-red);
    border-color: var(--gkcm-red);
}

.timeframe-btn.active,
.chart-type-btn.active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
}

/* Color-coded indicator buttons matching chart colors */
.indicator-btn:hover {
    color: #3B82F6;
    border-color: #3B82F6;
}

.indicator-btn.active {
    color: #FFFFFF;
}

/* SMA - Blue */
.indicator-btn[data-indicator="sma"].active {
    background: #3B82F6;
    border-color: #3B82F6;
}

/* EMA - Amber */
.indicator-btn[data-indicator="ema"].active {
    background: #F59E0B;
    border-color: #F59E0B;
}

/* Bollinger - Purple */
.indicator-btn[data-indicator="bollinger"].active {
    background: #8B5CF6;
    border-color: #8B5CF6;
}

/* Indicator color dots */
.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* MACD Legend */
.macd-legend {
    display: flex;
    gap: 10px;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* RSI Legend */
.rsi-legend {
    display: flex;
    gap: 8px;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.legend-line {
    width: 12px;
    height: 2px;
    display: inline-block;
    border-radius: 1px;
}

/* Indicator Groups with Period Inputs */
.indicator-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.indicator-period-input {
    width: 50px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
}

.indicator-period-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Color-coded focus states for indicator inputs */
#smaPeriod:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

#emaPeriod:focus {
    border-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

#bollingerPeriod:focus {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

#rsiPeriod:focus {
    border-color: #0EA5E9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}

#macdFast:focus,
#macdSlow:focus,
#macdSignal:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.indicator-period-input::-webkit-inner-spin-button,
.indicator-period-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.indicator-period-input {
    -moz-appearance: textfield;
}

/* Multi-Indicator Groups (SMA/EMA) */
.indicator-multi-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.indicator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.indicator-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.add-indicator-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gkcm-red);
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-indicator-btn:hover {
    background: var(--gkcm-dark-red);
    transform: scale(1.1);
}

.indicator-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.indicator-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}

.indicator-item.active {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.indicator-item .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.indicator-item .indicator-period-label {
    font-size: 0.75rem;
    min-width: 24px;
    text-align: center;
}

.indicator-item .indicator-period-input {
    width: 45px;
    padding: 4px 6px;
    font-size: 0.8rem;
}

/* Technical tab needs to be a positioning context for the info popover */
#technical {
    position: relative;
}

/* Indicator label wrapper (for SMA/EMA — keeps info icon glued to label) */
.indicator-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Info button — small "i" badge next to each indicator name */
.indicator-info-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.indicator-info-btn:hover,
.indicator-info-btn.is-active {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
    transform: scale(1.1);
}

.indicator-info-btn:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Indicator info popover */
.indicator-info-popover {
    position: absolute;
    z-index: 1050;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 14px 16px 12px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.indicator-info-popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.indicator-info-arrow {
    position: absolute;
    top: -7px;
    width: 12px;
    height: 12px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
    /* Left position is set inline by JS to align with the trigger button */
}

.indicator-info-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.indicator-info-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.indicator-info-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 24px 2px 0;
}

.indicator-info-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-style: italic;
}

.indicator-info-section {
    margin-bottom: 8px;
}

.indicator-info-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3B82F6;
    margin-bottom: 2px;
}

.indicator-info-body {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.indicator-info-tip {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid #3B82F6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.indicator-info-tip-label {
    font-weight: 700;
    color: #3B82F6;
    margin-right: 4px;
}

/* Color-tinted variants — popover headings adopt the indicator color */
.indicator-info-popover[data-color="sma"] .indicator-info-heading,
.indicator-info-popover[data-color="sma"] .indicator-info-tip-label { color: #3B82F6; }
.indicator-info-popover[data-color="sma"] .indicator-info-tip { border-left-color: #3B82F6; background: rgba(59, 130, 246, 0.08); }

.indicator-info-popover[data-color="ema"] .indicator-info-heading,
.indicator-info-popover[data-color="ema"] .indicator-info-tip-label { color: #F59E0B; }
.indicator-info-popover[data-color="ema"] .indicator-info-tip { border-left-color: #F59E0B; background: rgba(245, 158, 11, 0.08); }

.indicator-info-popover[data-color="bollinger"] .indicator-info-heading,
.indicator-info-popover[data-color="bollinger"] .indicator-info-tip-label { color: #8B5CF6; }
.indicator-info-popover[data-color="bollinger"] .indicator-info-tip { border-left-color: #8B5CF6; background: rgba(139, 92, 246, 0.08); }

.indicator-info-popover[data-color="rsi"] .indicator-info-heading,
.indicator-info-popover[data-color="rsi"] .indicator-info-tip-label { color: #0EA5E9; }
.indicator-info-popover[data-color="rsi"] .indicator-info-tip { border-left-color: #0EA5E9; background: rgba(14, 165, 233, 0.08); }

/* Valuation-tab info buttons reuse the popover styling but get their own
   accent-red themed trigger. The small variant is used inline next to
   the Sector Avg / Market Avg labels. */
.val-info-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: middle;
}
.val-info-btn:hover,
.val-info-btn.is-active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
    transform: scale(1.1);
}
.val-info-btn:focus-visible {
    outline: 2px solid var(--gkcm-red);
    outline-offset: 2px;
}
.val-info-btn-sm {
    width: 13px;
    height: 13px;
    font-size: 0.6rem;
    margin-left: 4px;
}

/* Accent-red theming for the valuation popover variants */
.indicator-info-popover[data-color="pe"] .indicator-info-heading,
.indicator-info-popover[data-color="pe"] .indicator-info-tip-label { color: var(--gkcm-red); }
.indicator-info-popover[data-color="pe"] .indicator-info-tip { border-left-color: var(--gkcm-red); background: rgba(200, 16, 46, 0.07); }

.indicator-info-popover[data-color="pb"] .indicator-info-heading,
.indicator-info-popover[data-color="pb"] .indicator-info-tip-label { color: var(--gkcm-red); }
.indicator-info-popover[data-color="pb"] .indicator-info-tip { border-left-color: var(--gkcm-red); background: rgba(200, 16, 46, 0.07); }

.indicator-info-popover[data-color="val-sector"] .indicator-info-heading,
.indicator-info-popover[data-color="val-sector"] .indicator-info-tip-label { color: var(--gkcm-dark-red); }
.indicator-info-popover[data-color="val-sector"] .indicator-info-tip { border-left-color: var(--gkcm-dark-red); background: rgba(139, 0, 0, 0.07); }

.indicator-info-popover[data-color="val-market"] .indicator-info-heading,
.indicator-info-popover[data-color="val-market"] .indicator-info-tip-label { color: #6c757d; }
.indicator-info-popover[data-color="val-market"] .indicator-info-tip { border-left-color: #6c757d; background: rgba(108, 117, 125, 0.08); }

/* Ensure the fundamentals tab pane is a positioning context so the
   valuation popover (position: absolute) anchors inside the pane. */
#fundamentals.tab-pane { position: relative; }
#peers.tab-pane { position: relative; }

/* Peer-analysis "i" info button — same affordance as .val-info-btn but
   sized to fit alongside table cell labels and th text. */
.peers-info-btn {
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0 0 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.62rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: middle;
}
.peers-info-btn:hover,
.peers-info-btn.is-active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
    transform: scale(1.1);
}
.peers-info-btn:focus-visible {
    outline: 2px solid var(--gkcm-red);
    outline-offset: 2px;
}

/* Accent-red theming for peer popover variants (concepts get dark red,
   metrics get accent red — matches the valuation tab visual language). */
.indicator-info-popover[data-color^="peers-"] .indicator-info-heading,
.indicator-info-popover[data-color^="peers-"] .indicator-info-tip-label { color: var(--gkcm-red); }
.indicator-info-popover[data-color^="peers-"] .indicator-info-tip {
    border-left-color: var(--gkcm-red);
    background: rgba(200, 16, 46, 0.07);
}
.indicator-info-popover[data-color="peers-heatmap"] .indicator-info-heading,
.indicator-info-popover[data-color="peers-radar"] .indicator-info-heading,
.indicator-info-popover[data-color="peers-median"] .indicator-info-heading,
.indicator-info-popover[data-color="peers-heatmap"] .indicator-info-tip-label,
.indicator-info-popover[data-color="peers-radar"] .indicator-info-tip-label,
.indicator-info-popover[data-color="peers-median"] .indicator-info-tip-label { color: var(--gkcm-dark-red); }
.indicator-info-popover[data-color="peers-heatmap"] .indicator-info-tip,
.indicator-info-popover[data-color="peers-radar"] .indicator-info-tip,
.indicator-info-popover[data-color="peers-median"] .indicator-info-tip {
    border-left-color: var(--gkcm-dark-red);
    background: rgba(139, 0, 0, 0.06);
}

.indicator-info-popover[data-color="macd"] .indicator-info-heading,
.indicator-info-popover[data-color="macd"] .indicator-info-tip-label { color: #3B82F6; }
.indicator-info-popover[data-color="macd"] .indicator-info-tip { border-left-color: #3B82F6; background: rgba(59, 130, 246, 0.08); }

.remove-indicator-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-indicator-btn:hover {
    background: var(--negative);
    border-color: var(--negative);
    color: #FFFFFF;
}

/* Chart Container */
.chart-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#priceChart {
    height: 400px;
    position: relative;
}

.chart-drawing-overlay {
    /* Sits above the chart's internal canvases so we can draw trendlines etc.
       pointer-events toggled by DrawingManager based on active tool. */
    background: transparent;
}

.drawing-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.drawing-toolbar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drawing-tool-btn,
.drawing-tool-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    color: #374151;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.drawing-tool-btn:hover,
.drawing-tool-action:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.drawing-tool-btn.active {
    background: #1f2937;
    color: #fff;
    border-color: #1f2937;
}

.drawing-tool-btn i,
.drawing-tool-action i {
    font-size: 14px;
}

.drawing-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border-color, #e5e7eb);
    margin: 0 4px;
}

.drawing-toolbar-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
}

@media (max-width: 600px) {
    .drawing-toolbar-hint { display: none; }
}

/* Indicator Panels */
.indicator-panels {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.indicator-panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.panel-input {
    width: 42px;
    padding: 4px 6px;
    font-size: 0.8rem;
}

.indicator-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* Color-coded panel toggles for RSI and MACD */
.indicator-toggle.active {
    color: #FFFFFF;
}

/* RSI - Sky Blue */
.indicator-toggle[data-panel="rsi"].active,
#rsiToggle.active {
    background: #0EA5E9;
    border-color: #0EA5E9;
    color: #FFFFFF;
}

/* MACD - Blue */
.indicator-toggle[data-panel="macd"].active,
#macdToggle.active {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
}

.indicator-chart {
    height: 150px;
    padding: 10px;
}

/* Valuation Metrics Container */
.valuation-metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

/* ============================================================
   Valuation Compass — redesigned P/E and P/B cards
   ============================================================ */
.val-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFAFB 100%);
    border-radius: 12px;
    padding: 18px 20px 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.val-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.val-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.val-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.val-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Verdict pill — color-coded by company vs sector relationship */
.val-verdict {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.val-verdict-cheap {
    background: rgba(40, 167, 69, 0.12);
    color: #1E7E34;
    border: 1px solid rgba(40, 167, 69, 0.3);
}
.val-verdict-fair {
    background: rgba(108, 117, 125, 0.12);
    color: var(--text-secondary);
    border: 1px solid rgba(108, 117, 125, 0.3);
}
.val-verdict-premium {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.val-verdict-expensive {
    background: rgba(220, 53, 69, 0.12);
    color: var(--negative);
    border: 1px solid rgba(220, 53, 69, 0.3);
}
.val-verdict-neutral {
    background: rgba(108, 117, 125, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Hero KPI */
.val-hero {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.val-hero-value {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.val-hero-suffix {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Compass track — sector/market markers + company needle */
.val-compass {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Headroom so a raised reference label (top: -34px) clears the hero value */
    margin-top: 16px;
}
.val-compass-track {
    position: relative;
    height: 56px;
    background: linear-gradient(90deg,
        rgba(40, 167, 69, 0.10) 0%,
        rgba(40, 167, 69, 0.04) 35%,
        rgba(108, 117, 125, 0.04) 50%,
        rgba(220, 53, 69, 0.04) 65%,
        rgba(220, 53, 69, 0.10) 100%);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.val-compass-zone-cheap,
.val-compass-zone-expensive {
    position: absolute;
    top: 0; bottom: 0;
    pointer-events: none;
}

/* Sector / market reference tick + label */
.val-compass-mark {
    position: absolute;
    top: 0; bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.val-compass-mark-line {
    width: 2px;
    flex: 1;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 1px;
}
.val-compass-mark-sector .val-compass-mark-line { background: var(--gkcm-dark-red); }
.val-compass-mark-market .val-compass-mark-line {
    background: repeating-linear-gradient(
        to bottom,
        #6c757d 0,
        #6c757d 3px,
        transparent 3px,
        transparent 6px
    );
}
.val-compass-mark-label {
    position: absolute;
    top: -16px;
    font-size: 0.66rem;
    color: var(--text-secondary);
    font-weight: 600;
    background: #FFFFFF;
    padding: 0 4px;
    border-radius: 3px;
    white-space: nowrap;
}
.val-compass-mark-sector .val-compass-mark-label { color: var(--gkcm-dark-red); }
.val-compass-mark-market .val-compass-mark-label { color: #6c757d; }

/* When sector & market markers are too close to fit both labels side-by-side,
   the right-hand label is raised to a second row above the track with a small
   leader line so it doesn't cover its neighbor. */
.val-compass-mark.val-compass-mark-raised .val-compass-mark-label {
    top: -34px;
}
.val-compass-mark.val-compass-mark-raised::after {
    content: '';
    position: absolute;
    top: -19px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: currentColor;
    transform: translateX(-50%);
    opacity: 0.45;
}

/* Company needle — accent red dot + value label below */
.val-compass-company {
    position: absolute;
    top: 0; bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.val-compass-needle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gkcm-red);
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 2px var(--gkcm-red), 0 2px 6px rgba(200, 16, 46, 0.45);
}
.val-compass-company-label {
    position: absolute;
    bottom: -18px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gkcm-red);
    background: #FFFFFF;
    padding: 1px 6px;
    border: 1px solid var(--gkcm-red);
    border-radius: 4px;
    white-space: nowrap;
}

.val-compass-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding-top: 4px;
}

/* Delta summary rows */
.val-deltas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.val-delta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
}
.val-delta-label {
    color: var(--text-secondary);
}
.val-delta-label strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.val-delta-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.val-delta-value.is-cheap     { color: var(--positive); }
.val-delta-value.is-expensive { color: var(--negative); }
.val-delta-value.is-inline    { color: var(--text-secondary); }

@media (max-width: 768px) {
    .val-hero-value { font-size: 2rem; }
    .val-compass-track { height: 50px; }
}

/* Period Toggle */
.period-toggle {
    display: flex;
    gap: 5px;
}

.period-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 6px;
}

.period-btn.active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
}

/* Statement Tabs */
#statementTabs .nav-link {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-right: 5px;
    border-radius: 6px;
}

#statementTabs .nav-link.active {
    background: var(--gkcm-red);
    border-color: var(--gkcm-red);
    color: #FFFFFF;
}

/* Tables */
.table-dark,
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--accent-light);
}

.table-dark thead th,
.table thead th {
    background: var(--accent-light);
    color: var(--gkcm-red);
    font-weight: 600;
    white-space: nowrap;
}

.table-dark tbody td,
.table tbody td {
    color: var(--text-primary);
}

.table-dark tbody td:first-child,
.table tbody td:first-child {
    color: var(--text-secondary);
}

/* Loading State */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gkcm-red);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 16, 46, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gkcm-red);
}

/* AI Analysis Section */
.ai-analysis-section {
    margin-top: 20px;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-icon {
    color: var(--gkcm-red);
}

.ai-badge {
    background: linear-gradient(135deg, var(--gkcm-red), var(--gkcm-dark-red));
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.ai-quick-questions {
    margin-bottom: 20px;
}

.ai-prompt-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.ai-question-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-chip,
.ai-chip-fundamental {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-chip:hover,
.ai-chip-fundamental:hover {
    background: var(--accent-light);
    border-color: var(--gkcm-red);
    color: var(--gkcm-red);
}

.ai-chip svg,
.ai-chip-fundamental svg {
    flex-shrink: 0;
}

.ai-custom-question {
    margin-bottom: 20px;
}

.ai-input-group {
    display: flex;
    gap: 10px;
}

.ai-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.ai-input:focus {
    outline: none;
    border-color: var(--gkcm-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}

.ai-input::placeholder {
    color: var(--text-secondary);
}

.ai-ask-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gkcm-red), var(--gkcm-dark-red));
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-ask-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3);
}

.ai-response-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.ai-response-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border-color);
    color: var(--gkcm-red);
    font-weight: 500;
    font-size: 0.9rem;
}

.ai-response-text {
    padding: 16px;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.ai-response-text p {
    margin-bottom: 12px;
}

.ai-response-text p:last-child {
    margin-bottom: 0;
}

.ai-response-text strong {
    color: var(--gkcm-red);
}

.ai-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: var(--text-secondary);
}

.ai-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--gkcm-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.ai-error-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
    color: var(--negative);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stock-header {
        padding: 16px;
    }

    .price-header {
        flex-direction: column;
        gap: 12px;
    }

    .company-title h2 {
        font-size: 1.25rem;
    }

    .price-info {
        text-align: left;
        width: 100%;
    }

    .current-price {
        font-size: 1.6rem;
    }

    .price-details {
        font-size: 0.8rem;
    }

    .nav-tabs .nav-link {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .indicator-toggles {
        flex-direction: column;
        width: 100%;
    }

    .indicator-multi-group {
        width: 100%;
    }

    .valuation-metrics-container {
        grid-template-columns: 1fr;
    }

    .ratios-container {
        grid-template-columns: 1fr;
    }

    .ai-question-chips {
        flex-direction: column;
    }

    .ai-chip,
    .ai-chip-fundamental {
        width: 100%;
        justify-content: center;
    }

    .ai-input-group {
        flex-direction: column;
    }

    .ai-ask-btn {
        width: 100%;
        border-radius: 25px;
        height: 48px;
    }
}

/* Lightweight Charts crosshair tooltip — moved out of inline JS .cssText
   so the page complies with a strict CSP style-src. */
.chart-tooltip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #1F2937;
    pointer-events: none;
    display: none;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* News tab — underlined sub-tabs (JSE / Web / Videos) */
.news-subtabs {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #E5E7EB;
}
.news-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: -1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.news-subtab:hover {
    color: var(--text-primary);
    border-bottom-color: #D1D5DB;
}
.news-subtab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.news-subtab svg { flex-shrink: 0; opacity: .85; }
.news-subtab.active svg { opacity: 1; }



/* ─────────────────────────────────────────────────────────────────────
   Peer Analysis tab
   ───────────────────────────────────────────────────────────────────── */

.peers-pane { font-size: 14px; }

/* Context line */
.peers-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.peers-context-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}
.peers-pill-sector {
    background: var(--accent-light);
    color: var(--accent);
}
.peers-pill-market {
    background: #EFF6FF;
    color: #1D4ED8;
}
.peers-context-muted {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Chips */
.peers-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.peers-chip {
    --chip-color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
    background: color-mix(in srgb, var(--chip-color) 8%, white);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.peers-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color);
    flex-shrink: 0;
}
.peers-chip-primary {
    background: color-mix(in srgb, var(--chip-color) 14%, white);
    border-color: color-mix(in srgb, var(--chip-color) 50%, transparent);
}
.peers-chip-tag {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}
.peers-chip-remove {
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 4px;
    cursor: pointer;
}
.peers-chip-remove:hover { color: var(--accent); }
.peers-chip-hint {
    align-self: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Add row */
.peers-add-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.peers-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.peers-search-input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-card);
}
.peers-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}
.peers-search-input:disabled {
    background: #F3F4F6;
    cursor: not-allowed;
}
.peers-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    z-index: 10;
    max-height: 280px;
    overflow-y: auto;
}
.peers-dropdown:empty { display: none; }
.peers-dropdown-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    align-items: center;
    border-bottom: 1px solid #F3F4F6;
}
.peers-dropdown-item:last-child { border-bottom: 0; }
.peers-dropdown-item:hover { background: #F9FAFB; }
.peers-dd-sym {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
}
.peers-dd-name {
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peers-dd-sec {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Heatmap table */
.peers-table-wrap {
    overflow-x: auto;
}
.peers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.peers-table th,
.peers-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
}
.peers-table thead th {
    background: #F9FAFB;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
    position: sticky;
    top: 0;
}
.peers-th-metric { text-align: left; }
.peers-th-co {
    color: var(--col-color, var(--text-primary));
}
.peers-th-avg { color: #475569; font-style: italic; }
.peers-cat-header {
    text-align: left !important;
    padding: 10px 12px 4px !important;
    font-size: 11px !important;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: transparent;
    border-bottom: 0 !important;
}
.peers-td-label {
    text-align: left;
    color: var(--text-primary);
    font-weight: 500;
}
.peers-td-val {
    font-variant-numeric: tabular-nums;
}
.peers-td-avg {
    color: var(--text-secondary);
    font-style: italic;
    font-variant-numeric: tabular-nums;
}
.peers-tier-good {
    background: rgba(34, 197, 94, 0.10);
    color: #15803D;
    font-weight: 600;
}
.peers-tier-bad {
    background: rgba(239, 68, 68, 0.08);
    color: #B91C1C;
    font-weight: 600;
}
.peers-tier-neutral { color: var(--text-primary); }
.peers-td-best {
    position: relative;
}
.peers-td-best::before {
    content: '●';
    color: #FACC15;
    margin-right: 4px;
    font-size: 9px;
    vertical-align: middle;
}
.peers-table-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid #F1F5F9;
    font-size: 11px;
    color: var(--text-secondary);
}
.peers-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}
.peers-swatch-best { background: #FACC15; border-radius: 50%; }
.peers-swatch-good { background: rgba(34, 197, 94, 0.5); }
.peers-swatch-bad  { background: rgba(239, 68, 68, 0.5); }

/* Radar */
.peers-radar-wrap {
    position: relative;
    height: 380px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* News article cards (used by JSE News + Web News panes) */
.news-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.news-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-height: 130px;
}
.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    border-color: var(--accent);
}
.news-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.news-card-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;       /* let the label truncate */
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.news-card-source > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-card-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
}
.news-card-recency {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--accent-light);
    color: var(--accent);
    text-transform: uppercase;
}
.news-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 12px;
    flex-grow: 1;
    /* Clamp to 3 lines so cards stay roughly the same height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card:hover .news-card-title { color: var(--accent); }
.news-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: auto;
}

/* Utility helpers for inline-style removal (CSP refactor).
   These keep the previous inline values intact, just as named classes. */
.overview-chart-box   { height: 250px; }
.dot-bb               { background: #8B5CF6; }   /* Bollinger Bands */
.dot-rsi              { background: #0EA5E9; }
.dot-macd             { background: #3B82F6; }
.dot-signal           { background: #F97316; }
.legend-rsi-70        { background: #EF4444; }
.legend-rsi-50        { background: #9CA3AF; }
.legend-rsi-30        { background: #22C55E; }

/* ============================================================
   Income Statement Visual — Revenue → Profit Flow
   Sits above the statements table on the Fundamentals tab.
   ============================================================ */
.is-visual {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFAFB 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.is-visual.is-hidden { display: none; }
.is-visual.is-empty .is-visual-body { opacity: 0.55; }

.is-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}
.is-visual-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.is-visual-title svg { color: var(--accent); }
.is-visual-period {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--accent-light);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}

/* KPI strip */
.is-kpi-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.is-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    min-width: 0;
}
.is-kpi[data-kind="revenue"] { border-top: 3px solid var(--accent); }
.is-kpi[data-kind="profit"]  { border-top: 3px solid var(--positive); }
.is-kpi[data-kind="margin"]  { border-top: 3px solid #6366F1; }

.is-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
}
.is-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.is-kpi-delta {
    font-size: 0.78rem;
    margin-top: 4px;
    color: var(--text-secondary);
    font-weight: 500;
}
.is-kpi-delta.is-pos { color: var(--positive); }
.is-kpi-delta.is-neg { color: var(--negative); }

.is-kpi-arrow {
    color: var(--accent);
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Donut chart for margin */
.is-margin-donut {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 2px auto 4px;
}
.is-margin-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.is-margin-track {
    fill: none;
    stroke: rgba(99, 102, 241, 0.12);
    stroke-width: 10;
}
.is-margin-fill {
    fill: none;
    stroke: #6366F1;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.7s ease, stroke 0.3s ease;
}
.is-margin-fill.is-neg { stroke: var(--negative); }
.is-margin-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.is-margin-pct {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Funnel row — visceral "of every $1 revenue, X¢ is profit" */
.is-funnel-row { margin-bottom: 18px; }
.is-funnel-track {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.is-funnel-rev-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}
.is-funnel-rev-amt {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95rem;
}
.is-funnel-bar {
    position: relative;
    height: 32px;
    background: linear-gradient(90deg, rgba(200, 16, 46, 0.18) 0%, rgba(200, 16, 46, 0.10) 100%);
    border-radius: 6px;
    overflow: hidden;
}
.is-funnel-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #28A745 0%, #1E7E34 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}
.is-funnel-fill.is-neg {
    background: linear-gradient(90deg, var(--negative) 0%, #B02A37 100%);
}
.is-funnel-ni-label {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.is-funnel-caption {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Multi-period trend chart */
.is-trend-wrap { margin-top: 4px; }
.is-trend-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.is-trend-canvas-wrap {
    position: relative;
    height: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
}
.is-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.is-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.is-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.is-swatch-rev    { background: var(--accent); }
.is-swatch-ni     { background: var(--positive); }
.is-swatch-margin { background: #6366F1; border-radius: 50%; }

/* Responsive */
@media (max-width: 768px) {
    .is-kpi-strip {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .is-kpi-arrow { display: none; }
    .is-kpi-margin { grid-column: 1 / -1; }
    .is-kpi-value { font-size: 1.1rem; }
    .is-trend-canvas-wrap { height: 200px; }
    .bs-kpi-strip { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Balance Sheet Visual — Capital Structure (extends .is-visual)
   ============================================================ */
.bs-kpi-strip {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.is-kpi[data-kind="assets"]      { border-top: 3px solid var(--accent); }
.is-kpi[data-kind="liabilities"] { border-top: 3px solid #F59E0B; }
.is-kpi[data-kind="equity"]      { border-top: 3px solid var(--positive); }
.is-kpi[data-kind="de"]          { border-top: 3px solid #6366F1; }

.is-kpi-equals {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.7;
}

.bs-margin-fill { stroke: #6366F1; }
.bs-margin-fill.is-warn { stroke: #F59E0B; }
.bs-margin-fill.is-risk { stroke: var(--negative); }

/* Stacked Liab + Equity bar (replaces gradient track) */
.bs-funnel-bar {
    background: var(--bg-secondary);
    display: flex;
    align-items: stretch;
}
.bs-funnel-liab {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    overflow: hidden;
}
.bs-funnel-equity {
    background: linear-gradient(90deg, #28A745 0%, #1E7E34 100%);
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    overflow: hidden;
}
.bs-funnel-label {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bs-swatch-assets { background: var(--accent); }
.bs-swatch-liab   { background: #F59E0B; }
.bs-swatch-equity { background: var(--positive); }
.bs-swatch-de     { background: #6366F1; border-radius: 50%; }

/* ============================================================
   Cash Flow Visual — Cash Flow Engine (extends .is-visual)
   ============================================================ */
.cf-kpi-strip {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.is-kpi[data-kind="cfo"]     { border-top: 3px solid var(--positive); }
.is-kpi[data-kind="cfi"]     { border-top: 3px solid #F59E0B; }
.is-kpi[data-kind="cff"]     { border-top: 3px solid #8B5CF6; }
.is-kpi[data-kind="netcash"] { border-top: 3px solid #0EA5E9; }

.cf-net-fill { stroke: #0EA5E9; }
.cf-net-fill.is-pos { stroke: var(--positive); }
.cf-net-fill.is-neg { stroke: var(--negative); }

/* Signed bar equation: zero-centered bars for CFO / CFI / CFF / Net */
.cf-equation-track { padding: 14px 16px; }
.cf-equation-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.cf-equation-row {
    display: grid;
    grid-template-columns: 130px 1fr 110px;
    align-items: center;
    gap: 12px;
}
.cf-equation-row.cf-equation-net {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.cf-equation-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.cf-arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.cf-arrow.is-pos { color: var(--positive); }
.cf-arrow.is-neg { color: var(--negative); }
.cf-arrow.is-flat { color: var(--text-secondary); }

.cf-equation-track-bar {
    position: relative;
    height: 22px;
    background: var(--bg-secondary);
    border-radius: 4px;
}
.cf-equation-zero {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.18);
}
.cf-equation-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-equation-fill.is-pos {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.85), rgba(30, 126, 52, 0.95));
}
.cf-equation-fill.is-neg {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.95), rgba(176, 42, 55, 0.85));
}
.cf-equation-fill-net.is-pos {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.85), rgba(2, 132, 199, 0.95));
}
.cf-equation-fill-net.is-neg {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.95), rgba(176, 42, 55, 0.85));
}
.cf-equation-val {
    text-align: right;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cf-equation-row[data-leg="net"] .cf-equation-val {
    font-size: 0.95rem;
    color: #0284C7;
}

.cf-swatch-cfo { background: var(--positive); }
.cf-swatch-cfi { background: #F59E0B; }
.cf-swatch-cff { background: #8B5CF6; }
.cf-swatch-net { background: #0EA5E9; border-radius: 50%; }

@media (max-width: 768px) {
    .cf-kpi-strip { grid-template-columns: 1fr 1fr; }
    .cf-equation-row { grid-template-columns: 90px 1fr 80px; gap: 8px; }
    .cf-equation-name { font-size: 0.78rem; }
    .cf-equation-val { font-size: 0.78rem; }
}