.chart-toolbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    max-height: 29px;
}

.chart-icon {
    cursor: pointer;
    font-size: 24px;
    color: var(--text-primary);
    transition: all 0.2s ease-in-out;

    &:hover {
        color: var(--text-link);
    }
}

.active-icon {
    color: var(--text-link);
    transform: scale(1.2);
}

.graph-body-div {
    width: 100%;
    padding-right: 10px;
    padding-bottom: 10px;
}

.common-chart {
    font-size: 0.75rem;
    line-height: 1rem;
    justify-content: center;
    // height: 200px;
    display: flex;
}

.scroll-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}

.chartstyle {
    width: 100%;
    height: 100%;
}

.data-availability {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: var(--text-secondary);
}

// Menu styles

.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between; // push items to left and right
    padding: 0 8px; // optional padding

    .date-label {
        font-size: 14px;
        color: var(--text-secondary);
        font-weight: bold;
    }

    .menu-container {
        position: relative;

        .menu-icon {
            cursor: pointer;
            font-size: 24px;
            // color: var(--action-primary-default);
            color: var(--field-text-placeholder);
        }

        .widget-menu {
            position: absolute;
            top: 30px;
            right: 0;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            min-width: 180px;
            max-height: 180px;
            overflow-y: scroll;
            overflow-x: hidden;
            z-index: 1000;
            padding: 5px 0;
            font-size: 15px;

            .widget-menu-item {
                display: flex;
                align-items: center;
                padding: 8px 12px;
                min-height: 30px;
                cursor: pointer;
                transition: background 0.2s;

                mat-icon {
                    margin-right: 8px;
                    font-size: 20px;
                }

                &.active-icon {
                    font-weight: 600;
                    padding-left: 22px;
                }
            }
        }
    }
}

// Tooltip custom styles for charts
:host ::ng-deep .apexcharts-tooltip {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Tooltip header (date section) */
:host ::ng-deep .apexcharts-tooltip-title {
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Field name (Net Profit / Revenue) */
:host ::ng-deep .apexcharts-tooltip-text-y-label {
    color: var(--text-secondary) !important;
}

/* Value */
:host ::ng-deep .apexcharts-tooltip-text-y-value {
    color: var(--text-primary) !important;
}

/* Marker text alignment */
:host ::ng-deep .apexcharts-tooltip-series-group {
    color: var(--text-secondary) !important;
}

/* X axis hover tooltip (Sep-2024 box) */
:host ::ng-deep .apexcharts-xaxistooltip {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
}

/* Arrow under the tooltip */
:host ::ng-deep .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--bg-surface) !important;
}

:host ::ng-deep .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--bg-surface) !important;
}