/**
 * Shared Allocation Card Component
 * Reusable across portfolio detail, onboarding review, and other pages.
 */

/* Allocation Cards Grid - shared by allocations and analysis tabs */
#allocations-cards-modern,
#analysis-results-modern,
.allocations-grid-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    #allocations-cards-modern,
    #analysis-results-modern,
    .allocations-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #allocations-cards-modern,
    #analysis-results-modern,
    .allocations-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Base Card */
.allocation-card-modern {
    min-width: 0; /* allow shrink on small screens (overrides grid default min-width: auto) */
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.allocation-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.allocation-card-modern:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.allocation-card-modern:hover::before {
    opacity: 1;
}

.allocation-card-modern.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.allocation-card-modern.selected::before {
    opacity: 1;
}

/* Header: column — row 1 = symbol + actions; row 2 = full-width company name */
.allocation-card-header-modern {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 16px;
    min-width: 0;
}

.allocation-card-header-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.allocation-card-header-company-modern {
    width: 100%;
    min-width: 0;
}

.allocation-card-header-company-modern .symbol-company-modern {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.allocation-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
    min-width: 0;
}

/* Portfolio variant: flex with symbol-info-modern */
.allocation-symbol-modern:has(.symbol-info-modern) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Review variant: text-only symbol */
.allocation-symbol-modern:not(:has(.symbol-info-modern)) {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.symbol-info-modern {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.symbol-name-modern {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.symbol-company-modern,
.allocation-company-modern {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-sector-industry-modern {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.9;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allocation-company-modern {
    margin-bottom: 8px;
}

/* Action Buttons - never shrink so more-options button stays visible */
.allocation-header-actions-modern {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.allocation-actions-modern {
    display: flex;
    align-items: center;
    gap: 4px;
}

.allocation-options-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.allocation-current-price-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}

/* Header total (position value); replaces former per-share price in options row */
.allocation-header-total-value {
    font-size: calc(26px - 2pt);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.allocation-options-btn {
    flex-shrink: 0;
}

.allocation-options-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 6px;
}

.allocation-options-menu.open {
    display: flex;
}

.allocation-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
}

.allocation-option-item:hover {
    background: var(--bg-secondary);
}

.allocation-option-item i {
    width: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.allocation-option-item[data-action="sell"] {
    color: var(--text-primary);
}

.allocation-option-item[data-action="sell"]:hover {
    color: var(--danger);
}

.allocation-option-item[data-action="sell"]:hover i {
    color: var(--danger);
}

.allocation-option-item[data-action="more-info"]:hover {
    color: var(--primary);
}

.allocation-option-item[data-action="more-info"]:hover i {
    color: var(--primary);
}

.action-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    -webkit-tap-highlight-color: rgba(239, 68, 68, 0.2);
}

/* Icon-only overflow menu — higher specificity than .action-btn-modern alone */
.action-btn-modern.allocation-options-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--bg-tertiary);
}

.action-btn-modern.allocation-options-btn:hover {
    background: var(--bg-tertiary);
}

.action-btn-modern .btn-text-modern {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.action-btn-modern:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-btn-modern.edit-position-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.action-btn-modern.delete-position-btn {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.12),
        rgba(239, 68, 68, 0.06)
    );
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    color: var(--danger);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.action-btn-modern.delete-position-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.18),
        rgba(239, 68, 68, 0.1)
    );
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.action-btn-modern.delete-position-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 639px) {
    .action-btn-modern {
        min-width: auto;
        height: 36px;
        font-size: 14px;
        padding: 6px 10px;
    }

    .action-btn-modern.allocation-options-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .action-btn-modern .btn-text-modern {
        font-size: 13px;
    }
}

/* Badges - match analysis section styling */
.allocation-badges-modern {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Signal badge - analysis-style gradient, white text */
.analysis-signal-badge-modern,
.signal-badge-modern {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analysis-signal-badge-modern.signal-buy,
.analysis-signal-badge-modern.buy,
.signal-badge-modern.signal-buy,
.signal-badge-modern.buy,
.signal-badge-modern.strong-buy {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
}

.analysis-signal-badge-modern.signal-sell,
.analysis-signal-badge-modern.sell,
.signal-badge-modern.signal-sell,
.signal-badge-modern.sell,
.signal-badge-modern.strong-sell {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
}

.analysis-signal-badge-modern.signal-hold,
.analysis-signal-badge-modern.hold,
.signal-badge-modern.signal-hold,
.signal-badge-modern.hold {
    background: linear-gradient(135deg, var(--warning), #d97706);
    color: white;
}

/* Stage Section */
.allocation-stage-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Table grid row: same badges, no extra vertical gap */
.allocation-stage-modern.allocation-stage-grid-cell {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.stage-badge-modern {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.stage-badge-modern.stage-1 {
    background: rgba(255, 193, 7, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.stage-badge-modern.stage-2 {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stage-badge-modern.stage-3 {
    background: rgba(255, 152, 0, 0.2);
    color: #f97316;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.stage-badge-modern.stage-4 {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.strength-badge-modern {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.strength-badge-modern.strength-very-strong {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.strength-badge-modern.strength-strong {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.strength-badge-modern.strength-moderate {
    background: rgba(255, 193, 7, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.strength-badge-modern.strength-weak {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.strength-badge-modern.strength-very-weak {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Same pill geometry for signal + stage + strength in allocation cards */
.allocation-stage-modern .analysis-signal-badge-modern,
.allocation-stage-modern .stage-badge-modern,
.allocation-stage-modern .strength-badge-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
}

/* Analysis tab metric badges: reuse symbol-page signal/stage badge system */
.metric-item-modern.allocation-metric-badge-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    text-align: center;
    gap: 0;
    padding: 12px 10px;
}

.metric-item-modern.allocation-metric-badge-cell.signal-metric-badge-modern,
.metric-item-modern.allocation-metric-badge-cell.stage-metric-badge-modern {
    min-height: 82px;
    gap: 0;
}

.metric-item-modern.allocation-metric-badge-cell .metric-value-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    font-size: clamp(20px, 5cqw, 30px);
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    color: var(--text-primary);
}

.metric-item-modern.allocation-metric-badge-cell-signal .metric-value-modern {
    font-size: clamp(24px, 6cqw, 34px);
}

/* Value Section */
.allocation-value-section-modern {
    margin-bottom: 16px;
}

.position-value-modern {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: right;
}

.percent-of-account-modern {
    font-size: 15px;
    color: var(--text-secondary);
}

.allocation-percentage-modern {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    text-align: right;
}

.allocation-amount-modern {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 4px;
}

/* Metrics Grid */
.allocation-metrics-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.metric-item-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    container-type: inline-size;
    container-name: metric-cell;
}

.metric-label-modern {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.metric-value-modern {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value-modern.positive {
    color: var(--success);
}

.metric-value-modern.negative {
    color: var(--danger);
}

/* Sector / industry tiles: allow long labels without breaking layout */
.allocation-metric-classification-cell .metric-value-modern {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.allocation-metric-span-row {
    grid-column: 1 / -1;
}

/* P/L metric: single line, font scales to fit */
.metric-item-modern:first-child .metric-value-modern {
    white-space: nowrap;
    font-size: clamp(12px, 9cqw, 18px);
}

.metric-item-modern.allocation-metric-badge-cell:first-child .metric-value-modern {
    white-space: normal;
    font-size: inherit;
}

.metric-item-modern:first-child .metric-percent-modern {
    font-size: clamp(11px, 8cqw, 15px);
}

.metric-percent-modern {
    font-size: 15px;
    margin-left: 4px;
}

/* Stage transition probability block (analysis cards) */
.allocation-stage-probability-modern {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.allocation-stage-probability-title-modern {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.allocation-stage-prob-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.allocation-stage-prob-item-modern {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
}

.allocation-stage-prob-item-modern.most-likely {
    border-color: var(--stage-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--stage-color) 35%, transparent);
}

.allocation-stage-prob-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.allocation-stage-prob-label-modern {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.allocation-stage-prob-value-modern {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.allocation-stage-prob-bar-container-modern {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
}

.allocation-stage-prob-bar-modern {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
}

/* Expandable Metrics */
.allocation-metrics-expandable {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.allocation-metrics-expandable.expanded {
    display: grid;
}

.allocation-show-more-btn {
    grid-column: 1 / -1;
    width: 100%;
    padding: 10px 16px;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.allocation-show-more-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

.allocation-show-more-btn .show-more-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Performance Section */
.allocation-performance-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.performance-cell-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.performance-label-modern {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.performance-value-modern {
    font-size: 22px;
    font-weight: 700;
}

.performance-value-modern.positive {
    color: var(--success);
}

.performance-value-modern.negative {
    color: var(--danger);
}

/* Review variant: allocation-details-modern */
.allocation-details-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.allocation-detail-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.allocation-detail-label-modern {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.allocation-detail-value-modern {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Review page: card + reasoning wrapper */
.allocation-card-wrapper-review {
    min-width: 0; /* allow shrink on small screens (grid item) */
    display: flex;
    flex-direction: column;
}

/* Reasoning Section (Review variant) */
.allocation-reasoning-modern {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.allocation-reasoning-title-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.allocation-reasoning-title-modern i {
    color: var(--primary);
}

.allocation-reasoning-text-modern {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.reasoning-toggle-btn-modern {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reasoning-toggle-btn-modern:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

/* Mobile (matches breakpoints.css: --bp-mobile-max 639px) */
@media (max-width: 639px) {
    .allocation-metrics-expandable {
        display: none !important;
    }

    .allocation-metrics-expandable.expanded {
        display: grid !important;
    }

    .allocation-show-more-btn {
        display: flex !important;
    }

    .allocation-card-modern {
        padding: 14px;
    }

    .symbol-name-modern {
        font-size: 22px;
    }

    .allocation-current-price-value {
        font-size: 22px;
    }

    .allocation-header-total-value {
        font-size: calc(30px - 2pt);
    }

    .position-value-modern {
        font-size: 30px;
    }

    .allocation-metrics-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .allocation-stage-prob-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* Desktop/tablet: same Show more / collapsed expandable as mobile (see .allocation-metrics-expandable) */

/* Metric info trigger - tap to show info modal (no visible icon) */
.allocation-metric-info-trigger {
    cursor: help;
}

/* Allocation card metric / performance cells: hover lift like overview bento stats */
.metric-item-modern.allocation-metric-info-trigger,
.performance-cell-modern.allocation-metric-info-trigger {
    transition: var(--transition);
}

.metric-item-modern.allocation-metric-info-trigger:hover,
.performance-cell-modern.allocation-metric-info-trigger:hover {
    background: var(--bg-glass);
    transform: translateY(-2px);
}

.metric-item-modern.allocation-metric-info-trigger:active,
.performance-cell-modern.allocation-metric-info-trigger:active {
    transform: translateY(0);
}

/* Order history cards: stronger desktop mouse affordance for modal-trigger cells */
.allocation-card-order-history-modern .allocation-metric-info-trigger {
    cursor: pointer;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger .metric-label-modern,
.allocation-card-order-history-modern .allocation-metric-info-trigger .performance-label-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger .metric-label-modern::after,
.allocation-card-order-history-modern .allocation-metric-info-trigger .performance-label-modern::after {
    content: "\f25a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
    opacity: 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
    transform: translateY(1px);
    transition: opacity 0.15s ease;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger:hover .metric-label-modern::after,
.allocation-card-order-history-modern .allocation-metric-info-trigger:hover .performance-label-modern::after {
    opacity: 0.65;
}

/* Overview stat info trigger - same pattern for bento/overview stats */
.overview-stat-info-trigger {
    cursor: help;
    transition: var(--transition);
}

/* Match portfolio list metric tiles: inner “help” cells lift separately from the glass card */
.overview-stat-info-trigger:hover {
    background: var(--bg-glass);
    transform: translateY(-2px);
}

.performance-metrics .metric-row.overview-stat-info-trigger {
    border-radius: var(--radius-md);
}

/* Small help icon after label text (matches Font Awesome 6 loaded on portfolio detail) */
.overview-stat-info-trigger .metric-label,
.overview-stat-info-trigger .stat-label-large,
.overview-stat-info-trigger .stat-label-modern,
.overview-stat-info-trigger .summary-stat-label-modern,
.overview-stat-info-trigger .trade-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.overview-stat-info-trigger .metric-label::after,
.overview-stat-info-trigger .stat-label-large::after,
.overview-stat-info-trigger .stat-label-modern::after,
.overview-stat-info-trigger .summary-stat-label-modern::after,
.overview-stat-info-trigger .trade-pick-label::after {
    content: "\f059";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
    opacity: 0.5;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}

/* Bento overview large stats (Capital, History, Equities, Trade picks empty): no help icon */
.stat-display-large.overview-stat-info-trigger .stat-label-large {
    display: block;
}

.stat-display-large.overview-stat-info-trigger .stat-label-large::after {
    content: none;
    display: none;
}

/* Trade Picks bento: unrealized gains / loss / cash — no help icon on labels */
#overview-trade-picks-stats-grid .overview-stat-info-trigger .trade-pick-label {
    display: block;
}

#overview-trade-picks-stats-grid .overview-stat-info-trigger .trade-pick-label::after {
    content: none;
    display: none;
}

/* Performance Analysis summary row + Risk Profile / summary cards below: no help icon */
#performance-summary-modern .overview-stat-info-trigger .stat-label-modern,
.portfolio-summary-modern .overview-stat-info-trigger .stat-label-modern,
.portfolio-summary-modern .overview-stat-info-trigger .summary-stat-label-modern {
    display: block;
}

#performance-summary-modern .overview-stat-info-trigger .stat-label-modern::after,
.portfolio-summary-modern .overview-stat-info-trigger .stat-label-modern::after,
.portfolio-summary-modern .overview-stat-info-trigger .summary-stat-label-modern::after {
    content: none;
    display: none;
}

/* Info Modal - shared with symbol page (same structure as new-symbol.css) */
.indicator-info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: allocationModalFadeIn 0.2s ease;
}

@keyframes allocationModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.indicator-info-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: allocationModalSlideUp 0.25s ease;
    border: 1px solid var(--border-color);
}

@keyframes allocationModalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.indicator-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.indicator-info-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.indicator-info-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.indicator-info-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    transform: scale(1.05);
}

.indicator-info-modal-body {
    padding: 24px 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.indicator-info-value-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.indicator-info-value {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 51, 234, 0.15));
    color: var(--text-primary);
    border: 2px solid rgba(96, 165, 250, 0.3);
    text-align: center;
}

.indicator-info-value.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.indicator-info-value.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.indicator-info-value.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.indicator-info-value.neutral {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.25));
    border-color: rgba(107, 114, 128, 0.5);
    color: var(--text-secondary);
}

.indicator-info-description {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: center;
}

.indicator-info-description strong {
    color: var(--text-primary);
}

/* Mobile modal: sheet-style bottom drawer (merged into 639px breakpoint, no small-mobile variant) */
@media (max-width: 639px) {
    .indicator-info-modal-overlay {
        padding: 16px;
        align-items: flex-end;
    }
    .indicator-info-modal {
        max-height: 70vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .indicator-info-modal-title { font-size: 18px; }
    .indicator-info-value { font-size: 22px; padding: 14px 28px; }
    .indicator-info-description { font-size: 16px; }
}