.amount-value {
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-value[title] {
    cursor: help;
}

.number-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.card-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@media (max-width: 768px) {
    .card-amount {
        font-size: 1.1rem;
    }
    
    .number-cell {
        max-width: 100px;
    }
    
    .chart-legend {
        display: none !important;
    }
    
    .hide-mobile-legend {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .card-amount {
        font-size: 1rem;
    }
    
    .number-cell {
        max-width: 80px;
        font-size: 0.85rem;
    }
}

@media (min-width: 1200px) {
    .card-amount {
        font-size: 1.5rem;
    }
    
    .number-cell {
        max-width: 200px;
    }
}

.chart-container {
    min-height: 250px;
    position: relative;
}

@media (max-width: 768px) {
    .chart-container {
        min-height: 200px;
    }
}

@media (min-width: 1441px) {
    .chart-container {
        min-height: 350px;
    }
}

.responsive-table-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

@media (max-width: 768px) {
    .responsive-table-amount {
        max-width: 80px;
        font-size: 0.85rem;
    }
}